/* front-learn — F10 퀴즈·과제(플레이어 다크 셸) · F11 내 강의실 · F12 내 노트 · F13 내 Q&A · F15 알림 · F18 강의 Q&A
   그누보드: theme/classpick/css/pages/front-learn.css
   접두사: lx-(영역 공용) · lq-(퀴즈) · la-(과제) · mc-(내 강의실) · nt-(내 노트) · mq-(내 Q&A) · nf-(알림) · cq-(Q&A 목록) · cv-(Q&A 상세)
   플레이어 화면은 player.css(.pl 셸)를 먼저 읽고 이 파일을 덧붙입니다. */

/* ════════════════════════════════════════════
   1. 플레이어 스테이지 공용 (퀴즈·과제, 다크)
   ════════════════════════════════════════════ */
.lx-stage{padding:24px 32px 80px}
.lx-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.lx-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--dark-text-3);min-width:0}
.lx-type{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:var(--r-sm);background:var(--dark-700);color:var(--dark-text);font-size:12px;font-weight:700;white-space:nowrap}
.lx-type svg{width:13px;height:13px}
.lx-h1{font-size:26px;font-weight:800;letter-spacing:-.035em;line-height:1.35;color:#fff}
.lx-h2{font-size:18px;font-weight:800;letter-spacing:-.03em;color:#fff}
.lx-desc{margin-top:8px;font-size:15px;line-height:1.7;color:var(--dark-text-2);max-width:700px}
.lx-desc .md-img{margin:14px 0;display:grid;gap:6px}
.lx-desc .md-img img{display:block;max-width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--dark-600)}
.lx-desc .md-img figcaption{font-size:13px;line-height:1.5;color:var(--dark-text-3);text-align:center}
.lx-desc code,.lx-code-in code,.lq-q-text code,.lq-opt-t code,.lq-rv-q code,.lq-ans code,.la-req code,.la-sub-text code{font-family:var(--font-mono);font-size:.88em;padding:1px 6px;border-radius:4px;background:var(--dark-700);color:#fff;letter-spacing:0}
.lx-dcard{background:var(--dark-800);border:1px solid var(--dark-700);border-radius:var(--r-lg)}
.lx-sec{margin-top:32px}
.lx-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lx-sec-head p{font-size:13px;color:var(--dark-text-3)}

/* 데모 상태 전환 (다크) */
.lx-demo{display:inline-flex;align-items:center;gap:10px;padding:4px 4px 4px 12px;border:1px dashed var(--dark-600);border-radius:var(--r-md);font-size:12px;font-weight:600;color:var(--dark-text-3);max-width:100%}
.lx-demo > span{white-space:nowrap}
.seg.lx-dseg{background:var(--dark-800);overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg.lx-dseg::-webkit-scrollbar{display:none}
.seg.lx-dseg button{height:28px;padding:0 10px;font-size:12.5px;color:var(--dark-text-2);white-space:nowrap}
.seg.lx-dseg button:hover{color:#fff}
.seg.lx-dseg .is-active{background:var(--dark-600);color:#fff;box-shadow:none}

/* 다크 모달 */
.modal.lx-dmodal{background:var(--dark-800);color:var(--dark-text);border:1px solid var(--dark-600)}
.lx-dmodal .modal-head h3{color:#fff}
.lx-dmodal .icon-btn{color:var(--dark-text-2)}
.lx-dmodal .icon-btn:hover{background:var(--dark-700);color:#fff}
.lx-dmodal .modal-body{font-size:14.5px;color:var(--dark-text-2)}

/* 다크 폼 */
.lx-dform .label{color:#fff}
.lx-dform .label .opt{color:var(--dark-text-3)}
.lx-dform .help{color:var(--dark-text-3)}
.lx-dform .error-text{color:#FCA5A5}
.lx-dform .input-icon > svg{color:var(--dark-text-3)}
.lx-dform .d-input.is-error{border-color:#FCA5A5;box-shadow:0 0 0 1px #FCA5A5}

/* 다크 아웃라인 버튼 */
.lx-btn-line{background:transparent;color:var(--dark-text);box-shadow:inset 0 0 0 1px var(--dark-600)}
.lx-btn-line:hover{box-shadow:inset 0 0 0 1px var(--dark-text-2);color:#fff}

/* 사이드 대본 탭 (퀴즈·과제에는 대본이 없음) */
.lx-noscript{padding:28px 8px 8px;text-align:center;color:var(--dark-text-2);font-size:14px}
.lx-noscript .empty-ic{width:48px;height:48px;border-radius:50%;background:var(--dark-700);display:grid;place-items:center;margin:0 auto 12px;color:var(--dark-text-2)}
.lx-noscript b{display:block;color:#fff;font-size:15px;margin-bottom:4px}

/* ════════════════════════════════════════════
   2. F10 퀴즈 응시 (lq-)
   ════════════════════════════════════════════ */
/* 시작 전 */
.lq-intro{margin-top:24px;padding:24px}
.lq-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.lq-fact{padding:16px;border-radius:var(--r-md);background:var(--dark-900);border:1px solid var(--dark-700);min-width:0}
.lq-fact svg{width:18px;height:18px;color:var(--lime)}
.lq-fact span{display:block;font-size:12.5px;font-weight:600;color:var(--dark-text-3);margin-top:10px}
.lq-fact b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;color:#fff;margin-top:2px;font-variant-numeric:tabular-nums}
.lq-fact small{display:block;font-size:12px;color:var(--dark-text-3);margin-top:2px}
.lq-status{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:var(--r-md);background:var(--dark-700);font-size:14px;line-height:1.6;color:var(--dark-text-2)}
.lq-status > svg{flex:none;margin-top:2px;width:18px;height:18px}
.lq-status b{color:#fff}
.lq-status.is-pass > svg{color:var(--lime)}
.lq-status.is-fail > svg{color:#FCA5A5}
.lq-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:20px;font-size:14px;color:var(--dark-text-2)}
.lq-rules li{display:flex;gap:8px;line-height:1.55}
.lq-rules svg{width:16px;height:16px;margin-top:2px;color:var(--dark-text-3);flex:none}
.lq-start{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--dark-700)}
.lq-start p{font-size:13px;color:var(--dark-text-3);flex:1;min-width:220px}
.lq-hist{display:grid;gap:8px}
.lq-hrow{display:grid;grid-template-columns:72px 150px 80px 84px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-md);background:var(--dark-800);border:1px solid var(--dark-700);font-size:14px;color:var(--dark-text-2)}
.lq-hrow b{color:#fff}
.lq-hrow .lq-hscore{font-size:16px;font-weight:800;color:#fff}
.lq-hrow a{font-size:13px;font-weight:600;color:var(--dark-text-2);display:inline-flex;align-items:center;gap:2px}
.lq-hrow a:hover{color:#fff}
.lq-hrow a svg{width:15px;height:15px}
.lq-hempty{padding:18px 16px;border-radius:var(--r-md);border:1px dashed var(--dark-600);font-size:14px;color:var(--dark-text-3);text-align:center}
.lq-badge-pass{background:var(--lime);color:var(--ink-900)}
.lq-badge-fail{background:rgba(252,165,165,.14);color:#FCA5A5}
.lq-badge-wait{background:var(--dark-700);color:var(--dark-text-2)}

/* 응시 중 */
.lq-bar{position:sticky;top:0;z-index:6;margin:16px 0 0;padding:10px 12px 12px;border-radius:var(--r-lg);background:rgba(24,27,25,.94);backdrop-filter:blur(8px);border:1px solid var(--dark-700)}
.lq-bar-row{display:flex;align-items:center;gap:12px}
.lq-bar-label{font-size:14px;font-weight:700;color:#fff;white-space:nowrap}
.lq-bar-label span{color:var(--dark-text-3);font-weight:600}
.lq-nums{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
.lq-nums::-webkit-scrollbar{display:none}
.lq-num{position:relative;width:34px;height:34px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;font-size:13.5px;font-weight:700;color:var(--dark-text-2);background:var(--dark-900);border:1px solid var(--dark-600);font-variant-numeric:tabular-nums}
.lq-num:hover{color:#fff;border-color:var(--dark-text-3)}
.lq-num.is-done{background:var(--dark-600);border-color:var(--dark-600);color:#fff}
.lq-num.is-cur{box-shadow:0 0 0 2px var(--lime);border-color:transparent;color:#fff}
.lq-num.is-flag::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#FCD34D;box-shadow:0 0 0 2px var(--dark-800)}
.lq-timer{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-md);background:var(--dark-700);font-size:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.lq-timer svg{width:16px;height:16px;color:var(--dark-text-2)}
.lq-timer.is-low{background:rgba(252,165,165,.14);color:#FCA5A5}
.lq-timer.is-low svg{color:#FCA5A5}
.lq-bar .progress{margin-top:10px}

.lq-q{margin-top:16px;padding:28px}
.lq-q-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lq-no{font-size:13px;font-weight:700;color:var(--lime)}
.lq-pts{margin-left:auto;font-size:13px;font-weight:600;color:var(--dark-text-3);font-variant-numeric:tabular-nums}
.lq-q-text{margin-top:12px;font-size:19px;line-height:1.55;font-weight:700;letter-spacing:-.025em;color:#fff}
.lq-q-sub{margin-top:6px;font-size:13.5px;color:var(--dark-text-3)}
.lq-q pre.code{margin:16px 0 0}
.lq-opts{display:grid;gap:10px;margin-top:20px}
.lq-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--dark-600);background:var(--dark-900);cursor:pointer;font-size:15px;color:var(--dark-text);transition:border-color .15s,background .15s;text-align:left;width:100%}
.lq-opt:hover{border-color:var(--dark-text-3)}
.lq-key{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--dark-700);color:var(--dark-text-2)}
.lq-opt.is-multi .lq-key{border-radius:7px}
.lq-opt-t{flex:1;min-width:0;line-height:1.55}
.lq-opt.is-on{border-color:var(--lime);background:rgba(197,245,48,.07)}
.lq-opt.is-on .lq-key{background:var(--lime);color:var(--ink-900)}
.lq-ox{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.lq-oxbtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 12px;border-radius:var(--r-lg);border:1px solid var(--dark-600);background:var(--dark-900);color:var(--dark-text-2);transition:border-color .15s,background .15s}
.lq-oxbtn:hover{border-color:var(--dark-text-3);color:#fff}
.lq-oxbtn b{font-size:40px;line-height:1;font-weight:800;color:#fff}
.lq-oxbtn span{font-size:13.5px;font-weight:600}
.lq-oxbtn.is-on{border-color:var(--lime);background:rgba(197,245,48,.07);color:#fff}
.lq-oxbtn.is-on b{color:var(--lime)}
.lq-short{margin-top:20px}
.lq-short .input{height:52px;font-size:17px;font-family:var(--font-mono);letter-spacing:0}
.lq-short .help{margin-top:8px;color:var(--dark-text-3);display:flex;align-items:center;gap:6px}
.lq-short .help svg{width:14px;height:14px}
.lq-foot{display:flex;align-items:center;gap:8px;margin-top:16px}
.lq-foot .grow{flex:1}
.lq-flag{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--dark-text-2)}
.lq-flag:hover{background:var(--dark-700);color:#fff}
.lq-flag svg{width:16px;height:16px}
.lq-flag.is-on{color:#FCD34D}
.lq-flag.is-on svg{fill:currentColor}

/* 제출 확인 모달 */
.lq-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.lq-sum div{padding:12px;border-radius:var(--r-md);background:var(--dark-900);text-align:center}
.lq-sum span{display:block;font-size:12px;font-weight:600;color:var(--dark-text-3)}
.lq-sum b{display:block;font-size:18px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;margin-top:2px}
.lq-warn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:rgba(252,211,77,.1);color:#FDE68A;font-size:13.5px;line-height:1.55;margin-bottom:12px}
.lq-warn svg{width:16px;height:16px;flex:none;margin-top:2px}
.lq-warn button{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:#fff;margin-left:2px}

/* 결과 */
.lq-score{display:grid;grid-template-columns:168px minmax(0,1fr);gap:28px;align-items:center;margin-top:24px;padding:28px}
.lq-ring{position:relative;width:168px;height:168px}
.lq-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.lq-ring circle{fill:none;stroke-width:10}
.lq-ring .bg{stroke:var(--dark-700)}
.lq-ring .fg{stroke:var(--lime);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.lq-score.is-fail .lq-ring .fg{stroke:#FCA5A5}
.lq-ring .tick{stroke:var(--dark-text-3);stroke-width:12}
.lq-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.lq-ring-in b{font-size:48px;font-weight:800;letter-spacing:-.04em;color:#fff}
.lq-ring-in span{font-size:13px;font-weight:600;color:var(--dark-text-3);margin-top:6px}
.lq-score h2{font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.4;color:#fff;margin-top:10px}
.lq-score-meta{font-size:13.5px;color:var(--dark-text-3);margin-top:4px}
.lq-passbar{position:relative;height:8px;border-radius:4px;background:var(--dark-700);margin:22px 0 26px}
.lq-passbar > i{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:inherit;background:var(--lime)}
.lq-score.is-fail .lq-passbar > i{background:#FCA5A5}
.lq-passline{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:#fff;border-radius:1px}
.lq-passline em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-style:normal;font-size:11.5px;font-weight:700;color:var(--dark-text-2);white-space:nowrap}
.lq-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lq-stats div{padding:10px 12px;border-radius:var(--r-md);background:var(--dark-900)}
.lq-stats dt{font-size:12px;font-weight:600;color:var(--dark-text-3)}
.lq-stats dd{font-size:15px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;margin-top:2px}
.lq-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.lq-done{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 16px;border-radius:var(--r-md);background:rgba(197,245,48,.08);font-size:14px;color:var(--dark-text-2)}
.lq-done svg{width:18px;height:18px;color:var(--lime);flex:none}
.lq-done b{color:#fff}
.lq-done.is-fail{background:var(--dark-800);border:1px solid var(--dark-700)}
.lq-done.is-fail svg{color:#FCA5A5}

.lq-rv-list{display:grid;gap:12px}
.lq-rv{padding:20px 22px;border-radius:var(--r-lg);background:var(--dark-800);border:1px solid var(--dark-700)}
.lq-rv.is-wrong{border-color:rgba(252,165,165,.28)}
.lq-rv-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lq-rv-mark{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink-900);flex:none}
.lq-rv-mark svg{width:14px;height:14px;stroke-width:3}
.lq-rv.is-wrong .lq-rv-mark{background:rgba(252,165,165,.16);color:#FCA5A5}
.lq-rv-q{margin-top:10px;font-size:15.5px;font-weight:600;line-height:1.6;color:#fff}
.lq-ans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.lq-ans div{padding:10px 12px;border-radius:var(--r-md);background:var(--dark-900);min-width:0}
.lq-ans dt{font-size:12px;font-weight:600;color:var(--dark-text-3)}
.lq-ans dd{font-size:14px;font-weight:600;color:#fff;margin-top:2px;line-height:1.5}
.lq-ans dd.is-wrong{color:#FCA5A5;text-decoration:line-through;text-decoration-color:rgba(252,165,165,.5)}
.lq-ans dd.is-right{color:var(--lime)}
.lq-explain{margin-top:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--dark-700);font-size:14px;line-height:1.65;color:var(--dark-text-2)}
.lq-explain b{display:block;color:#fff;font-size:13px;margin-bottom:2px}
.lq-ref{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--lime)}
.lq-ref:hover{text-decoration:underline;text-underline-offset:3px}
.lq-ref svg{width:13px;height:13px}

/* ════════════════════════════════════════════
   3. F10 과제 제출 (la-)
   ════════════════════════════════════════════ */
.la-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.la-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--r-md);background:var(--dark-800);border:1px solid var(--dark-700);font-size:13px;font-weight:600;color:var(--dark-text-2);white-space:nowrap}
.la-chip svg{width:15px;height:15px}
.la-chip b{color:#fff}
.la-chip.is-due{border-color:rgba(252,211,77,.35);color:#FDE68A}
.la-chip.is-due b{color:#FDE68A}
.la-steps{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;font-weight:600;color:var(--dark-text-3)}
.la-step{display:flex;align-items:center;gap:8px;white-space:nowrap}
.la-step .no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--dark-700);color:var(--dark-text-3);font-size:12.5px;font-weight:700}
.la-step .no svg{width:14px;height:14px;stroke-width:3}
.la-step.is-done{color:var(--dark-text-2)}
.la-step.is-done .no{background:var(--lime);color:var(--ink-900)}
.la-step.is-current{color:#fff}
.la-step.is-current .no{background:#fff;color:var(--ink-900)}
.la-steps .sep{flex:1;min-width:16px;height:1px;background:var(--dark-600)}

.la-card{margin-top:20px;padding:24px}
.la-acc{margin-top:20px;border-radius:var(--r-lg);background:var(--dark-800);border:1px solid var(--dark-700)}
.la-acc > summary{list-style:none;display:flex;align-items:center;gap:10px;padding:18px 22px;cursor:pointer}
.la-acc > summary::-webkit-details-marker{display:none}
.la-acc > summary h2{flex:1}
.la-acc > summary .chev{width:18px;height:18px;color:var(--dark-text-3);transition:transform .2s}
.la-acc[open] > summary .chev{transform:rotate(180deg)}
.la-acc-body{padding:0 22px 22px}
.la-brief{font-size:15px;line-height:1.75;color:var(--dark-text-2)}
.la-brief p + p{margin-top:10px}
.la-brief b{color:#fff}
.la-reqhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px}
.la-reqhead b{font-size:15px;color:#fff}
.la-reqhead span{font-size:12.5px;font-weight:600;color:var(--dark-text-3)}
.la-req{display:grid;gap:6px}
.la-req label{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--dark-900);border:1px solid var(--dark-700);cursor:pointer;font-size:14.5px;line-height:1.55;color:var(--dark-text)}
.la-req label:hover{border-color:var(--dark-600)}
.la-req input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--lime)}
.la-req .grow{min-width:0}
.la-req small{display:block;font-size:12.5px;color:var(--dark-text-3);margin-top:2px}
.la-req .badge{margin-left:auto;flex:none}
.la-req label.is-checked{background:transparent}
.la-req label.is-checked .la-req-t,.la-req label.is-checked small{opacity:.55}

.la-rubric{width:100%;font-size:14px;border-radius:var(--r-md);overflow:hidden}
.la-rubric th{text-align:left;font-size:12.5px;font-weight:600;color:var(--dark-text-3);padding:10px 14px;background:var(--dark-900);white-space:nowrap}
.la-rubric td{padding:12px 14px;border-top:1px solid var(--dark-700);color:var(--dark-text-2);vertical-align:top}
.la-rubric td:first-child{color:#fff;font-weight:600;white-space:nowrap}
.la-rubric .pt{text-align:right;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.la-rubric-sub{display:none;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--dark-text-3);line-height:1.5}
.la-rubric tfoot td{font-weight:700;color:#fff;background:var(--dark-900)}

.la-refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.la-ref{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-lg);background:var(--dark-900);border:1px solid var(--dark-700);color:var(--dark-text-2);min-width:0}
.la-ref:hover{border-color:var(--dark-600);color:#fff}
.la-ref .grow{min-width:0}
.la-ref b{display:block;font-size:14px;font-weight:600;color:var(--dark-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-ref small{font-size:12.5px;color:var(--dark-text-3)}

.la-form .field + .field,.la-form .field + .form-grid,.la-form .form-grid + .field{margin-top:20px}
.la-form .form-grid .field + .field{margin-top:0}
.la-form .textarea{min-height:160px}
.la-count{font-size:12px;color:var(--dark-text-3);text-align:right;font-variant-numeric:tabular-nums}
.la-drop{border:1.5px dashed var(--dark-600);border-radius:var(--r-lg);padding:24px;text-align:center;color:var(--dark-text-2);background:var(--dark-900);cursor:pointer;transition:border-color .15s,background .15s;width:100%}
.la-drop:hover,.la-drop.is-over{border-color:var(--lime);background:rgba(197,245,48,.05)}
.la-drop svg{width:26px;height:26px;margin:0 auto 8px;color:var(--dark-text-3)}
.la-drop b{color:#fff}
.la-drop small{display:block;font-size:12.5px;color:var(--dark-text-3);margin-top:4px}
.la-files{display:grid;gap:6px;margin-top:10px}
.la-files li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--dark-700);font-size:14px;color:var(--dark-text)}
.la-files li .f-ic{width:32px;height:32px;background:var(--dark-600)}
.la-files li .grow{min-width:0}
.la-files li b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-files li small{font-size:12px;color:var(--dark-text-3)}
.la-files li button{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--dark-text-3);flex:none}
.la-files li button:hover{background:var(--dark-600);color:#fff}
.la-files li button svg{width:16px;height:16px}
.la-honor{margin-top:20px;padding-top:18px;border-top:1px solid var(--dark-700)}
.la-submit{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}
.la-submit .t-caption{margin-right:auto;color:var(--dark-text-3)}
.la-editing{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:12px 14px;border-radius:var(--r-md);background:rgba(252,211,77,.1);color:#FDE68A;font-size:13.5px}
.la-editing svg{width:16px;height:16px;flex:none}

/* 제출됨·채점 */
.la-status{display:flex;gap:16px;align-items:flex-start}
.la-status-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--dark-700);color:#fff;flex:none}
.la-status-ic svg{width:22px;height:22px}
.la-status h2{font-size:19px;font-weight:800;letter-spacing:-.03em;color:#fff}
.la-status p{font-size:14px;color:var(--dark-text-2);margin-top:4px;line-height:1.6}
.la-status .row{margin-top:14px}
.la-sub{display:grid;gap:14px}
.la-sub-text{font-size:14.5px;line-height:1.75;color:var(--dark-text-2);white-space:pre-line;padding:16px;border-radius:var(--r-md);background:var(--dark-900)}
.la-kv{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px 16px;font-size:14px}
.la-kv dt{color:var(--dark-text-3);font-weight:600}
.la-kv dd{color:var(--dark-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.la-kv a{color:#fff;display:inline-flex;align-items:center;gap:6px;max-width:100%}
.la-kv a span{overflow:hidden;text-overflow:ellipsis}
.la-kv a:hover{text-decoration:underline;text-underline-offset:3px}
.la-kv a svg{width:15px;height:15px;flex:none}
.la-tl{display:grid;gap:0;margin-top:4px}
.la-tl li{position:relative;padding:0 0 14px 24px;font-size:13.5px;color:var(--dark-text-2)}
.la-tl li::before{content:"";position:absolute;left:5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--dark-600)}
.la-tl li::after{content:"";position:absolute;left:9px;top:18px;bottom:0;width:1px;background:var(--dark-700)}
.la-tl li:last-child{padding-bottom:0}
.la-tl li:last-child::after{display:none}
.la-tl li.is-on::before{background:var(--lime)}
.la-tl b{color:#fff;font-weight:600}
.la-tl span{color:var(--dark-text-3);margin-left:6px}

.la-grade{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px}
.la-grade-score{padding:20px;border-radius:var(--r-lg);background:var(--dark-900);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.la-grade-score .big{font-size:56px;line-height:1;font-weight:800;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.la-grade-score .big small{font-size:18px;font-weight:700;color:var(--dark-text-3);letter-spacing:-.02em}
.la-grade-score p{font-size:12.5px;color:var(--dark-text-3);line-height:1.5}
.la-crit{display:grid;gap:12px}
.la-crit li{display:grid;grid-template-columns:148px minmax(0,1fr) 64px;align-items:center;gap:12px;font-size:14px;color:var(--dark-text-2)}
.la-crit .progress{height:8px}
.la-crit b{text-align:right;color:#fff;font-variant-numeric:tabular-nums;font-size:14px}
.la-crit b small{font-weight:500;color:var(--dark-text-3)}
.la-fb{margin-top:24px;padding-top:22px;border-top:1px solid var(--dark-700)}
.la-fb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.la-fb-head b{color:#fff;font-size:15px}
.la-fb-head .t-caption{color:var(--dark-text-3)}
.la-fb-body{margin-top:14px;font-size:15px;line-height:1.8;color:var(--dark-text-2)}
.la-fb-body p + p{margin-top:10px}
.la-fb-body b{color:#fff}
.la-fb-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.la-fb-col{padding:14px 16px;border-radius:var(--r-md);background:var(--dark-900)}
.la-fb-col h4{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#fff;margin-bottom:8px}
.la-fb-col h4 svg{width:15px;height:15px}
.la-fb-col li{position:relative;padding-left:14px;font-size:14px;line-height:1.6;color:var(--dark-text-2)}
.la-fb-col li + li{margin-top:4px}
.la-fb-col li::before{content:"";position:absolute;left:2px;top:.65em;width:4px;height:4px;border-radius:50%;background:var(--dark-text-3)}
.la-badge-inst{background:#fff;color:var(--ink-900)}
.la-policy{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding:16px 18px;border-radius:var(--r-md);background:var(--dark-700)}
.la-policy p{flex:1;min-width:240px;font-size:14px;line-height:1.6;color:var(--dark-text-2)}
.la-policy b{color:#fff}

/* ── 플레이어 스테이지 반응형 ── */
@media (max-width:1024px){
  .lx-stage{padding:20px 24px 64px}
  .lq-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lq-hrow{grid-template-columns:64px minmax(0,1fr) 70px 76px auto}
  .lq-hrow .lq-htime{display:none}
  .la-grade{grid-template-columns:1fr}
  .la-refs{grid-template-columns:1fr}
}
@media (max-width:768px){
  .lx-pl .lx-stage{order:1;padding:18px 16px 32px}
  .lx-pl .pl-side{order:3}
  .lx-pl .pl-tabs{top:56px}
  .lx-h1{font-size:21px}
  .lx-topline{flex-direction:column;align-items:flex-start}
  .lx-demo{width:100%}
  .lx-demo{padding:4px}
  .lx-demo > span{display:none}
  .lx-demo .seg{flex:1}
  .lx-demo .seg button{flex:1;padding:0 6px}
  .lq-intro{padding:18px}
  .lq-fact{padding:12px}
  .lq-fact b{font-size:17px}
  .lq-rules{grid-template-columns:1fr}
  .lq-start .btn{width:100%}
  .lq-hrow{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px}
  .lq-hrow .lq-hdate{grid-column:1 / -1;order:5;font-size:12.5px;color:var(--dark-text-3)}
  .lq-hrow .lq-hscore{order:2}
  .lq-hrow .lq-hres{order:3}
  .lq-hrow .lq-hlink{order:4;justify-self:end}
  .lq-bar{top:56px;margin-left:-16px;margin-right:-16px;border-radius:0;border-left:0;border-right:0;padding:8px 16px 10px}
  .lq-bar-row{flex-wrap:wrap;gap:8px}
  .lq-bar-label{flex:1}
  .lq-nums{order:3;flex-basis:100%}
  .lq-num{width:38px;height:34px}
  .lq-q{padding:20px 16px}
  .lq-q-text{font-size:17px}
  .lq-opt{padding:12px 14px;font-size:14.5px;gap:12px}
  .lq-oxbtn{padding:18px 10px}
  .lq-flag span{display:none}
  .lq-score{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 18px;gap:12px}
  .lq-score-body{width:100%}
  .lq-score h2{font-size:19px}
  .lq-stats{grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
  .lq-stats div{padding:8px}
  .lq-stats dd{font-size:14px}
  .lq-actions{justify-content:center}
  .lq-actions .btn{flex:1 1 100%}
  .lq-done{text-align:left}
  .lq-rv{padding:16px}
  .lq-ans{grid-template-columns:1fr}
  .la-steps{font-size:12.5px;gap:6px}
  .la-step{gap:6px}
  .la-steps .sep{min-width:8px}
  .la-card{padding:18px 16px}
  .la-acc > summary{padding:16px}
  .la-acc-body{padding:0 16px 18px}
  .la-rubric td:nth-child(2),.la-rubric th:nth-child(2){display:none}
  .la-rubric td:first-child{white-space:normal}
  .la-rubric-sub{display:block}
  .la-submit .btn{flex:1}
  .la-submit .t-caption{flex-basis:100%}
  .la-status{flex-direction:column;gap:12px}
  .la-kv{grid-template-columns:76px minmax(0,1fr)}
  .la-crit li{grid-template-columns:104px minmax(0,1fr) 56px;font-size:13px;gap:8px}
  .la-fb-cols{grid-template-columns:1fr}
  .la-policy .btn{flex:1}
}

/* ════════════════════════════════════════════
   4. MY 페이지 공용 (밝은 화면 · lx-)
   ════════════════════════════════════════════ */
/* MY 셸 안의 page-head: my-wrap이 이미 위 여백(32px)을 주므로 위 패딩을 없애고 오른쪽에 동작을 둡니다 (공통 승격 후보) */
.my-body > .page-head.lx-head{padding:0 0 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lx-head h1{font-size:28px}
.lx-head-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 밝은 데모 상태 상자 (course.css .state-demo와 같은 역할) */
.lx-ldemo{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 10px;border:1px dashed var(--border-strong);border-radius:var(--r-md);font-size:12px;font-weight:600;color:var(--text-3);background:var(--bg)}
.lx-ldemo .seg button{height:28px;padding:0 10px;font-size:12.5px}
/* 밝은 타임스탬프 칩: 누르면 플레이어의 그 시점으로 이동 (공통 승격 후보) */
.lx-ts{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:var(--r-xs);background:var(--lime-soft);color:var(--lime-deep);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;transition:background .15s}
.lx-ts svg{width:12px;height:12px;stroke-width:2.5}
a.lx-ts:hover{background:var(--lime);color:var(--ink-900)}
.lx-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lx-tools .input,.lx-tools .select{height:40px;font-size:14px}
.lx-search{flex:1 1 220px;max-width:320px}
.lx-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg)}
.lx-icon-btn{width:32px;height:32px;border-radius:var(--r-md);display:inline-grid;place-items:center;color:var(--text-3);flex:none}
.lx-icon-btn:hover{background:var(--ink-100);color:var(--text)}
.lx-icon-btn svg{width:16px;height:16px}
.lx-tabs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}
.lx-tabs-row .tabs{border-bottom:0;flex:1;min-width:0}
.lx-tabs-row .select{height:36px;font-size:13.5px;width:auto;flex:none}
.lx-new{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;white-space:nowrap}

/* ════════════════════════════════════════════
   5. F11 내 강의실 (mc-)
   ════════════════════════════════════════════ */
.mc-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
.mc-resume{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;padding:16px;align-items:center}
.mc-resume .ph{aspect-ratio:16/9;border-radius:var(--r-lg);display:block}
.mc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink-900);display:grid;place-items:center;box-shadow:var(--sh-2)}
.mc-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.mc-time{position:absolute;right:8px;bottom:8px;z-index:2;height:22px;padding:0 7px;border-radius:var(--r-xs);background:rgba(14,16,15,.78);color:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center}
.mc-lbar{position:absolute;left:0;right:0;bottom:0;z-index:2;height:4px;background:rgba(255,255,255,.35)}
.mc-lbar i{display:block;height:100%;background:var(--lime)}
.mc-kicker{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text-2)}
.mc-kicker svg{width:15px;height:15px}
.mc-resume h2{margin-top:8px;font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.4}
.mc-resume h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.mc-lesson{margin-top:6px;font-size:14.5px;color:var(--text-2)}
.mc-lesson b{color:var(--text);font-weight:600}
.mc-cprog{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13px;color:var(--text-3)}
.mc-cprog .progress{flex:1;max-width:260px}
.mc-cprog b{color:var(--text);font-weight:700}
.mc-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.mc-pass{background:var(--ink-900);color:#fff;border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column}
.mc-pass-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}
.mc-pass-top span{display:inline-flex;align-items:center;gap:6px}
.mc-pass-top svg{width:15px;height:15px}
.mc-dday{margin-top:12px;font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.mc-dday small{font-size:15px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:-.01em;margin-left:6px}
.mc-pbar{margin-top:16px;height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.mc-pbar i{display:block;height:100%;width:var(--v);background:#fff;border-radius:inherit}
.mc-pmeta{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.mc-pinfo{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.mc-pinfo b{color:#fff}
.mc-pass .btn{margin-top:auto}
.mc-pass .mc-pinfo + .btn{margin-top:16px}

.mc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.mc-stat{padding:18px 20px;display:flex;flex-direction:column;min-width:0}
.mc-stat-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-3)}
.mc-stat-label svg{width:15px;height:15px}
.mc-stat-val{margin-top:6px;font-size:24px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.mc-stat-val small{font-size:14px;font-weight:600;color:var(--text-3);letter-spacing:-.01em}
.mc-stat-meta{font-size:12.5px;color:var(--text-3);margin-top:2px}
.mc-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:64px;margin-top:auto;padding-top:14px}
.mc-week span{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;font-size:11px;font-weight:600;color:var(--text-3)}
.mc-week i{display:block;width:100%;max-width:22px;border-radius:4px 4px 2px 2px;background:var(--ink-900);min-height:3px}
.mc-week .is-empty i{background:var(--ink-100)}
.mc-week .is-today{color:var(--text)}
.mc-week .is-today i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-400);height:12px !important}
.mc-dots{display:flex;gap:6px;margin-top:auto;padding-top:14px}
.mc-dots span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink-900);color:#fff}
.mc-dots span svg{width:13px;height:13px;stroke-width:3}
.mc-dots .is-today{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-400)}
.mc-dots .is-next{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-200)}
.mc-dlabel{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);margin-top:6px}
.mc-month{display:flex;gap:16px;margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--text-3)}
.mc-month b{display:block;font-size:15px;color:var(--text);font-weight:700}

.mc-list{margin-top:32px}
.mc-list .lx-tabs-row{margin-bottom:16px}
.mc-rows{display:grid;gap:10px}
.mc-row{display:grid;grid-template-columns:176px minmax(0,1fr) auto;gap:20px;align-items:center;padding:14px 16px 14px 14px}
.mc-row .ph{aspect-ratio:16/9;border-radius:var(--r-md);display:block}
.mc-row.is-expired .ph{filter:grayscale(1);opacity:.6}
.mc-row.is-expired .progress > i{background:var(--ink-400)}
.mc-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mc-tags .t-caption{color:var(--text-3)}
.mc-row h3{margin-top:6px;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.45}
.mc-row h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.mc-inst{font-size:13px;color:var(--text-3);margin-top:2px}
.mc-rprog{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--text-3)}
.mc-rprog .progress{flex:1;max-width:240px}
.mc-rprog b{color:var(--text)}
.mc-rmeta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--text-3)}
.mc-rmeta span{display:inline-flex;align-items:center;gap:5px}
.mc-rmeta svg{width:13px;height:13px}
.mc-ract{display:flex;flex-direction:column;gap:6px;min-width:140px}
.mc-ract .btn{justify-content:center}
.mc-exp-note{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--lime-deep);background:var(--lime-soft);padding:7px 10px;border-radius:var(--r-md);width:fit-content;max-width:100%}
.mc-exp-note svg{width:15px;height:15px;flex:none}
.mc-top.is-empty{grid-template-columns:minmax(0,1fr)}
@media (min-width:769px){
  .mc-top.is-empty .mc-pass{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center}
  .mc-top.is-empty .mc-pass-top,.mc-top.is-empty .mc-pinfo{grid-column:1 / -1}
  .mc-top.is-empty .mc-pass .btn{grid-column:2;grid-row:2 / span 2;margin-top:0}
}
.mc-emptysec{margin-top:16px}
.mc-rec{margin-top:24px}
.mc-rec .sec-head h2{font-size:20px}
.mc-empty{padding:48px 20px}

/* ════════════════════════════════════════════
   6. F12 내 노트 (nt-)
   ════════════════════════════════════════════ */
.nt-sum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.nt-group + .nt-group{margin-top:28px}
.nt-ghead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.nt-ghead .ph{width:72px;aspect-ratio:16/9;border-radius:var(--r-sm);flex:none}
.nt-ghead .grow{min-width:0}
.nt-ghead h2{font-size:15.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-ghead small{font-size:12.5px;color:var(--text-3)}
.nt-ghead .more{font-size:13px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.nt-ghead .more:hover{color:var(--text)}
.nt-ghead .more svg{width:15px;height:15px}
.nt-list{display:grid;gap:8px}
.nt-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;padding:14px 12px 14px 16px;align-items:start}
.nt-card .lx-ts{justify-self:start;margin-top:1px}
.nt-lesson{font-size:12.5px;font-weight:600;color:var(--text-3)}
.nt-body{margin-top:4px;font-size:15px;line-height:1.65;color:var(--text);word-break:keep-all;overflow-wrap:anywhere}
.nt-body mark{background:var(--lime-soft);color:var(--lime-deep);border-radius:3px;padding:0 2px}
.nt-date{margin-top:6px;font-size:12px;color:var(--text-3)}
.nt-acts{display:flex;gap:2px}
.nt-edit .textarea{min-height:84px;font-size:14.5px}
.nt-edit .row{margin-top:8px;justify-content:flex-end}
.nt-bm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nt-bm .nt-card{grid-template-columns:auto minmax(0,1fr) auto}
.nt-bm .nt-body{font-size:14.5px;font-weight:600;margin-top:2px}
.nt-tip{display:flex;gap:10px;align-items:flex-start;margin-top:28px;padding:14px 16px;border-radius:var(--r-md);background:var(--ink-100);font-size:13.5px;line-height:1.6;color:var(--text-2)}
.nt-tip svg{width:16px;height:16px;flex:none;margin-top:2px}

/* ════════════════════════════════════════════
   7. F13 내 Q&A (mq-)
   ════════════════════════════════════════════ */
.mq-hint{margin-bottom:12px}
.mq-list{overflow:hidden}
.mq-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;border-top:1px solid var(--border);position:relative;transition:background .15s}
.mq-row:first-child{border-top:0}
.mq-row:hover{background:var(--ink-50)}
.mq-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}
.mq-course{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-title{display:block;margin-top:6px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.5}
.mq-title::after{content:"";position:absolute;inset:0}
.mq-meta{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--text-3)}
.mq-meta .lx-ts{position:relative;z-index:1}
.mq-meta span{display:inline-flex;align-items:center;gap:5px}
.mq-meta svg{width:13px;height:13px}
.mq-inst{color:var(--text-2);font-weight:600}
.mq-ans,.cq-ans{min-width:64px;text-align:center;padding:8px 10px;border-radius:var(--r-md);background:var(--ink-100)}
.mq-ans b,.cq-ans b{display:block;font-size:18px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.mq-ans small,.cq-ans small{font-size:11.5px;font-weight:600;color:var(--text-3)}
.mq-ans.is-wait,.cq-ans.is-wait{background:transparent;border:1px dashed var(--border-strong);color:var(--text-3)}
.mq-row.is-new{background:linear-gradient(90deg,var(--lime-soft),transparent 40%)}
.mq-title mark,.mq-meta mark,.cq-title mark{background:var(--lime-soft);color:var(--lime-deep);border-radius:3px;padding:0 2px}
.mq-cnt{display:none !important}
.mq-foot{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:13px;line-height:1.6;color:var(--text-3)}
.mq-foot svg{width:15px;height:15px;flex:none;margin-top:3px}

/* ════════════════════════════════════════════
   8. F15 알림 (nf-)
   ════════════════════════════════════════════ */
.nf-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.nf-tools .chips-scroll{min-width:0}
.nf-gt{margin:24px 0 8px;font-size:13px;font-weight:700;color:var(--text-3)}
.nf-list{overflow:hidden}
.nf-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 16px 16px 20px;border-top:1px solid var(--border);position:relative;transition:background .15s}
.nf-row:first-child{border-top:0}
.nf-row:hover{background:var(--ink-50)}
.nf-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink-100);color:var(--text-2)}
.nf-ic svg{width:18px;height:18px}
.nf-ic.t-qna{background:var(--info-bg);color:var(--info)}
.nf-ic.t-learn{background:var(--lime-soft);color:var(--lime-deep)}
.nf-ic.t-order{background:var(--success-bg);color:var(--success)}
.nf-ic.t-notice{background:var(--warn-bg);color:var(--warn)}
.nf-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nf-title{font-size:15px;font-weight:600;color:var(--text-2)}
.nf-title::after{content:"";position:absolute;inset:0}
.nf-row.is-unread .nf-title{font-weight:700;color:var(--text)}
.nf-row.is-unread::before{content:"";position:absolute;left:8px;top:33px;width:6px;height:6px;border-radius:50%;background:var(--ink-900)}
.nf-cat{font-size:12px;font-weight:600;color:var(--text-3)}
.nf-body{margin-top:3px;font-size:14px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere}
.nf-row:not(.is-unread) .nf-body{color:var(--text-3)}
.nf-at{margin-top:6px;font-size:12.5px;color:var(--text-3)}
.nf-side{display:flex;align-items:center;gap:2px;position:relative;z-index:1}
.nf-ch{display:flex;gap:4px;margin-top:8px}
.nf-ch span{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--r-xs);background:var(--ink-100);font-size:11px;font-weight:600;color:var(--text-3)}
.nf-ch svg{width:11px;height:11px}
.nf-tools .chip .num{opacity:.65}
.nf-link{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nf-set-intro{font-size:13.5px;line-height:1.55;color:var(--text-2);margin-bottom:14px}
.nf-set{width:100%;font-size:14px;border-collapse:collapse}
.nf-set th{font-size:12.5px;font-weight:600;color:var(--text-3);text-align:center;padding:0 6px 10px;white-space:nowrap}
.nf-set th:first-child{text-align:left;padding-left:0}
.nf-set td{padding:12px 6px;border-top:1px solid var(--border);text-align:center;vertical-align:middle}
.nf-set td:first-child{text-align:left;padding-left:0}
.nf-set td:first-child b{display:block;font-weight:600}
.nf-set td:first-child small{font-size:12px;color:var(--text-3)}
.nf-set .switch input{width:36px;height:22px}
.nf-set .switch input::after{width:16px;height:16px}
.nf-set .switch input:checked::after{transform:translateX(14px)}
.nf-set .switch input:disabled{opacity:.45;cursor:not-allowed}
.nf-set .na{color:var(--text-disabled);font-weight:600}
.nf-set-note{display:grid;gap:6px;margin-top:14px;font-size:13px;line-height:1.55;color:var(--text-3)}
.nf-set-note p{display:flex;gap:6px}
.nf-set-note svg{width:14px;height:14px;flex:none;margin-top:3px}
.nf-set-note a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── MY 페이지 반응형 ── */
@media (max-width:1024px){
  .my-body > .page-head.lx-head{padding-top:20px}
  .mc-top{grid-template-columns:minmax(0,1fr)}
  .mc-pass{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center}
  .mc-pass-top,.mc-pinfo{grid-column:1 / -1}
  .mc-pass .btn{grid-column:2;grid-row:2 / span 2;margin-top:0}
  .mc-pass .mc-pinfo + .btn{margin-top:0}
}
@media (max-width:768px){
  .my-body > .page-head.lx-head{padding:16px 0 14px}
  .lx-head h1{font-size:24px}
  .lx-head-act{width:100%}
  .lx-search{max-width:none}
  .mc-resume{grid-template-columns:minmax(0,1fr);gap:14px;padding:12px}
  .mc-resume h2{font-size:17px}
  .mc-acts .btn{flex:1}
  .mc-pass{display:flex;align-items:stretch}
  .mc-pass .btn{margin-top:16px}
  .mc-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mc-stat:first-child{grid-column:1 / -1}
  .mc-stat{padding:16px}
  .mc-stat-val{font-size:21px}
  .mc-month{display:none}
  .mc-dots{gap:4px}
  .mc-dots span{width:16px;height:16px}
  .mc-dots span svg{width:9px;height:9px}
  .mc-row{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px;align-items:start}
  .mc-row h3{font-size:15px;margin-top:4px}
  .mc-ract{grid-column:1 / -1;flex-direction:row;min-width:0}
  .mc-ract .btn{flex:1}
  .mc-rprog .progress{max-width:none}
  .lx-tabs-row{flex-wrap:wrap;gap:0}
  .lx-tabs-row .select{margin:8px 0}
  .nt-card,.nt-bm .nt-card{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:14px}
  .nt-card .lx-ts{grid-column:1;grid-row:1}
  .nt-card .nt-acts{grid-column:2;grid-row:1 / span 2}
  .nt-bm{grid-template-columns:minmax(0,1fr)}
  .nt-ghead .ph{width:56px}
  .mq-row{grid-template-columns:minmax(0,1fr);padding:16px}
  .mq-ans{display:none}
  .mq-cnt{display:inline-flex !important}
  .mq-tabs{border-bottom:0}
  .mq-tabs .tabs{flex:1 1 100%;border-bottom:1px solid var(--border)}
  .mq-tabs .select{margin:10px 0 0 auto}
  .nf-row{grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:14px 8px 14px 18px}
  .nf-ic{width:36px;height:36px}
  .nf-row.is-unread::before{left:6px;top:31px}
  .nf-set th,.nf-set td{padding-left:3px;padding-right:3px}
}

/* ════════════════════════════════════════════
   9. F18 강의 Q&A 목록 (cq-)
   ════════════════════════════════════════════ */
.cq-page{background:var(--bg-subtle);padding:24px 0 72px}
.cq-crumbrow{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:12px}
.cq-crumbrow .breadcrumb{margin:0;min-width:0;flex-wrap:wrap}
.cq-hero{display:grid;grid-template-columns:176px minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px;margin-bottom:24px}
.cq-hero > .ph{aspect-ratio:16/9;border-radius:var(--r-md)}
.cq-kicker{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text-3)}
.cq-kicker svg{width:14px;height:14px}
.cq-hero h1{margin-top:4px;font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.35}
.cq-stats{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:13.5px;color:var(--text-2)}
.cq-stats span{display:inline-flex;align-items:center;gap:5px}
.cq-stats b{color:var(--text);font-weight:700}
.cq-stats svg{width:14px;height:14px;color:var(--text-3)}
.cq-hero-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cq-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.cq-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cq-tools .input,.cq-tools .select{height:40px;font-size:14px}
.cq-tools .lx-search{max-width:none}
.cq-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cq-bar .select{height:36px;font-size:13.5px;width:auto}
.cq-result{font-size:13px;color:var(--text-3);margin:0 0 10px}
.cq-result b{color:var(--text)}
.cq-list{overflow:hidden}
.cq-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px 16px 14px;border-top:1px solid var(--border);position:relative;transition:background .15s}
.cq-row:first-child{border-top:0}
.cq-row:hover{background:var(--ink-50)}
.cq-row.is-mine{box-shadow:inset 3px 0 0 var(--ink-900)}
.cq-row.is-just{background:linear-gradient(90deg,var(--lime-soft),transparent 45%)}
.cq-vote{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11.5px;color:var(--text-3)}
.cq-vote svg{width:15px;height:15px}
.cq-vote b{font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.cq-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cq-title{display:block;margin-top:6px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.5}
.cq-title::after{content:"";position:absolute;inset:0}
.cq-meta{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--text-3)}
.cq-meta .lx-ts{position:relative;z-index:1}
.cq-meta span{display:inline-flex;align-items:center;gap:5px}
.cq-meta svg{width:13px;height:13px}
.cq-inst{color:var(--text-2);font-weight:600}
.cq-mcnt{display:none !important}
.cq-side{display:grid;gap:16px;position:sticky;top:calc(var(--header-h) + 16px)}
.cq-box{padding:18px}
.cq-box h3{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;letter-spacing:-.02em}
.cq-box h3 svg{width:16px;height:16px}
.cq-box > p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.cq-mine-n{display:flex;gap:16px;margin:12px 0 14px}
.cq-mine-n div{flex:1;padding:10px 12px;border-radius:var(--r-md);background:var(--ink-50)}
.cq-mine-n small{display:block;font-size:12px;font-weight:600;color:var(--text-3)}
.cq-mine-n b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.cq-tips{display:grid;gap:10px;margin-top:12px;counter-reset:tip}
.cq-tips li{position:relative;padding-left:28px;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.cq-tips li::before{counter-increment:tip;content:counter(tip);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--ink-100);display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--text)}
.cq-tips b{color:var(--text);font-weight:600}
.cq-instrow{display:flex;align-items:center;gap:10px;margin-top:12px}
.cq-instrow b{display:block;font-size:14px;font-weight:700}
.cq-instrow small{font-size:12.5px;color:var(--text-3)}
.cq-pop{margin-top:6px}
.cq-pop a{display:block;padding:10px 0;border-top:1px solid var(--border);font-size:13.5px;font-weight:600;line-height:1.5}
.cq-pop li:first-child a{border-top:0}
.cq-pop a:hover{color:var(--text-2)}
.cq-pop small{display:flex;gap:8px;margin-top:2px;font-size:12px;font-weight:500;color:var(--text-3)}
.cq-form{display:grid;gap:16px}
.cq-form .field + .field{margin-top:0}
.cq-ts-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cq-ts-row .input{width:92px;font-family:var(--font-mono);letter-spacing:0}
.cq-ts-row .check{font-size:14px}
.cq-count{margin-top:4px;font-size:12px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}
.cq-codehint{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:10px 12px;border-radius:var(--r-md);background:var(--ink-50);font-size:12.5px;line-height:1.55;color:var(--text-2)}
.cq-codehint svg{width:14px;height:14px;flex:none;margin-top:2px}
.cq-codehint code,.cv-body :not(pre) > code{font-family:var(--font-mono);font-size:.9em;padding:1px 5px;border-radius:4px;background:var(--ink-100);color:var(--text);letter-spacing:0}
.cq-guest{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}

/* ════════════════════════════════════════════
   10. F18 강의 Q&A 상세 (cv-)
   ════════════════════════════════════════════ */
.cv-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:12px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.cv-back:hover{color:var(--text)}
.cv-back svg{width:16px;height:16px}
.cv-course{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:16px}
.cv-course > .ph{width:88px;aspect-ratio:16/9;border-radius:var(--r-sm);flex:none}
.cv-course .grow{min-width:0}
.cv-course b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-course small{font-size:12.5px;color:var(--text-3)}
.cv-q{padding:28px}
.cv-q h1{margin-top:10px;font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.cv-author{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12.5px;color:var(--text-3)}
.cv-author b{display:block;font-size:14px;font-weight:700;color:var(--text)}
.cv-lesson{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding:10px 12px;border-radius:var(--r-md);background:var(--ink-50);font-size:13.5px;color:var(--text-2)}
.cv-lesson b{color:var(--text);font-weight:600}
.cv-body{margin-top:20px;font-size:15.5px;line-height:1.8;color:var(--text);word-break:keep-all;overflow-wrap:anywhere}
.cv-body p + p,.cv-body pre + p,.cv-body p + pre,.cv-body ul + p,.cv-body p + ul{margin-top:12px}
.cv-body ul{padding-left:18px;list-style:disc}
.cv-body li + li{margin-top:4px}
.cv-body pre{padding:16px 18px;border-radius:var(--r-md);background:var(--ink-900);color:#E8E8EA;font-family:var(--font-mono);font-size:13px;line-height:1.7;overflow-x:auto;white-space:pre;tab-size:2;letter-spacing:0;word-break:normal;overflow-wrap:normal}
.cv-body pre .cm{color:#8C8C94}
.cv-body pre .hl{color:var(--lime)}
.cv-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--border)}
.cv-acts .grow{flex:1}
.cv-like.is-on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.cv-solve{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:16px 18px;border-radius:var(--r-lg);background:var(--lime-soft);color:var(--ink-900)}
.cv-solve > svg{width:20px;height:20px;flex:none}
.cv-solve p{flex:1;min-width:200px;font-size:14px;line-height:1.6}
.cv-solve p b{display:block;font-size:15px}
.cv-sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 12px}
.cv-sec-h h2{font-size:18px;font-weight:800;letter-spacing:-.03em}
.cv-sec-h h2 span{color:var(--text-3);font-weight:700;margin-left:4px}
.cv-ans{padding:24px}
.cv-ans + .cv-ans{margin-top:12px}
.cv-ans.is-inst{box-shadow:inset 3px 0 0 var(--ink-900)}
.cv-ans-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cv-ans-head .who{min-width:0}
.cv-ans-head b{font-size:14.5px;font-weight:700;margin-right:6px}
.cv-ans-head small{display:block;font-size:12.5px;color:var(--text-3)}
.cv-ans-head .cv-pick{margin-left:auto}
.cv-ans .cv-body{margin-top:14px;font-size:15px}
.cv-ans-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:16px}
.cv-cmts{display:grid;gap:12px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--border-strong)}
.cv-cmt{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.6;color:var(--text-2)}
.cv-cmt b{font-size:13px;font-weight:700;color:var(--text);margin-right:6px}
.cv-cmt small{font-size:12px;color:var(--text-3)}
.cv-cmt-form{display:flex;gap:8px}
.cv-cmt-form .input{height:36px;font-size:13.5px}
.cv-noans{padding:28px 20px;text-align:center;font-size:14px;color:var(--text-2)}
.cv-noans svg{display:block;width:22px;height:22px;color:var(--text-3);margin:0 auto 8px}
.cv-noans b{display:block;color:var(--text);font-size:15px;margin-bottom:2px}
.cv-write{padding:20px;margin-top:16px}
.cv-write h3{font-size:15px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cv-write .textarea{min-height:120px}
.cv-write-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--text-3)}
.cv-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:24px}
.cv-nav > *{display:block;padding:14px 16px;min-width:0}
.cv-nav a:hover{border-color:var(--border-strong)}
.cv-nav small{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--text-3)}
.cv-nav small svg{width:14px;height:14px}
.cv-nav b{display:block;margin-top:4px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-nav .is-next{text-align:right}
.cv-nav .is-next small{justify-content:flex-end}
.cv-nav span.lx-card{color:var(--text-3)}
.cv-info{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 12px;margin-top:12px;font-size:13.5px}
.cv-info dt{color:var(--text-3);font-weight:600}
.cv-info dd{color:var(--text);min-width:0}

/* ── Q&A 반응형 ── */
@media (max-width:1024px){
  .cq-grid{grid-template-columns:minmax(0,1fr)}
  .cq-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cq-hero{grid-template-columns:140px minmax(0,1fr)}
  .cq-hero-act{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:768px){
  .cq-page{padding:12px 0 48px}
  .cq-hero{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px;margin-bottom:16px}
  .cq-hero h1{font-size:16.5px}
  .cq-stats{font-size:12.5px;gap:2px 10px}
  .cq-hero-act .btn{flex:1}
  .cq-side{grid-template-columns:minmax(0,1fr)}
  .cq-row{grid-template-columns:minmax(0,1fr);padding:14px 16px}
  .cq-vote,.cq-ans{display:none}
  .cq-mcnt{display:inline-flex !important}
  .cq-bar .chips-scroll{flex:1 1 100%}
  .cv-q{padding:20px 16px}
  .cv-q h1{font-size:19px}
  .cv-body{font-size:15px}
  .cv-ans{padding:18px 16px}
  .cv-body pre{font-size:12.5px;padding:14px}
  .cv-nav{grid-template-columns:minmax(0,1fr)}
  .cv-nav .is-next{text-align:left}
  .cv-nav .is-next small{justify-content:flex-start}
  .cv-solve .btn{width:100%}
  .cv-acts{gap:4px}
  .cv-acts .cv-lbl{display:none}
}

/* F11 내 강의실 (lms/my/classroom.php) — 기간권이 없는 수강생은 이어보기 카드만 한 줄로 */
.mc-top.no-pass{grid-template-columns:minmax(0,1fr)}