:root{--bg:#f5f6f8;--card:#fff;--ink:#1d2433;--sub:#5b6474;--line:#e3e6ec;--brand:#1f3a5f;--accent:#e0662b;--ok:#1f8a5b;--warn:#c27a00;--bad:#c0392b;--hl:#fff4e8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-size:15px}
a{color:inherit}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:18px;text-decoration:none}.ver{font-size:12px;opacity:.7;margin-left:4px}
.top nav{display:flex;gap:12px;align-items:center}.navlink{text-decoration:none;opacity:.9}
main{max-width:1280px;margin:0 auto;padding:20px 24px 60px}
.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 16px;border-radius:8px;cursor:pointer;font-size:15px;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.btn.small{padding:6px 12px;font-size:14px}.btn:disabled{opacity:.5;cursor:default}
.btn.big{font-size:17px;padding:12px 22px}
h1{font-size:22px;margin:4px 0 16px}h2{font-size:17px;margin:0 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.lesson{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.lesson img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#dfe3ea}
.lesson .noimg{width:100%;aspect-ratio:16/9;border-radius:8px;background:#dfe3ea;display:flex;align-items:center;justify-content:center;color:var(--sub)}
.lesson .t{font-weight:700}
.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#eef1f5;color:var(--sub)}
.badge.done{background:#e3f4ec;color:var(--ok)}.badge.running,.badge.queued{background:#fff1df;color:var(--warn)}
.badge.failed{background:#fde8e6;color:var(--bad)}.badge.need_source{background:#eef1f5}
.muted{color:var(--sub);font-size:14px}
input[type=text],input[type=url],input[type=number],textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit}
label.chk{display:flex;gap:8px;align-items:flex-start;margin:10px 0}
.notice{border-radius:10px;padding:12px 14px;margin:12px 0;line-height:1.5}
.notice.info{background:#eef4fb;border:1px solid #cfe0f3}.notice.warn{background:#fff6e6;border:1px solid #f1d7a6}.notice.bad{background:#fdecea;border:1px solid #f3c3bd}
.stages{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.stages li{display:flex;gap:10px;align-items:baseline}
.stages .ic{width:20px;text-align:center}
.stages .st-done .ic{color:var(--ok)}.stages .st-failed .ic{color:var(--bad)}.stages .st-running .ic,.stages .st-waiting .ic{color:var(--warn)}
.stages .st-pending{color:#9aa2b1}
.lessonview{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px;align-items:start}
@media (max-width:900px){.lessonview{grid-template-columns:1fr}}
.player{position:sticky;top:70px}
.player video{width:100%;border-radius:10px;background:#000}
.player audio{width:100%}
.audiobox{border-radius:10px;background:var(--brand);color:#fff;padding:28px 18px;text-align:center;font-weight:700;margin-bottom:8px}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:#fff;padding:7px 12px;cursor:pointer;font-size:14px}
.seg button.on{background:var(--brand);color:#fff}
.sents{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 160px);overflow:auto;padding-right:4px}
.sent{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;display:grid;grid-template-columns:34px 1fr auto;gap:8px}
.sent:hover{border-color:#c9cfda}
.sent.cur{background:var(--hl);border-color:var(--accent)}
.sent .no{color:var(--accent);font-weight:700}
.sent .en{font-weight:600;line-height:1.45}
.sent .ko{color:var(--sub);margin-top:3px;line-height:1.45}
.sent .ko.empty{color:var(--bad)}
.sent .tm{font-size:12px;color:#9aa2b1;margin-top:3px}
.flag{display:inline-block;font-size:12px;color:var(--warn);background:#fff6e6;border-radius:6px;padding:1px 6px;margin:3px 4px 0 0}
.flag.res{color:#9aa2b1;background:#f1f2f4;text-decoration:line-through}
.edit{grid-column:1/-1;border-top:1px dashed var(--line);margin-top:6px;padding-top:8px;display:flex;flex-direction:column;gap:6px;cursor:default}
.edit .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.edit textarea{line-height:1.45;resize:vertical;overflow-y:hidden}
.edit input[type=number]{width:110px}
.tag{font-size:12px;color:var(--sub);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.honest{font-size:13px;color:var(--sub);margin-top:6px}
.shadow{position:relative;margin:10px 0;border-radius:10px;background:#1f3a5f;color:#fff;text-align:center;padding:14px}
.shadow .big{font-size:22px;font-weight:800}
body.dim .sents .sent:not(.cur){opacity:.35}
.shadow .big{font-size:22px}
/* ---- v0.2 video stage, transport, offset check, safety UI */
.stage{position:relative;background:#000;border-radius:10px;overflow:hidden}
.stage.audio{background:none;overflow:visible}
.stage video{display:block;width:100%;max-height:62vh;background:#000;border-radius:0}
.ytwrap{position:relative;width:100%;aspect-ratio:16/9}
.ytwrap iframe,.ytwrap>div{position:absolute;inset:0;width:100%;height:100%}
.stage .subtitle{display:block;background:#0b1622;color:#fff;text-align:center;padding:10px 16px}
.stage .subtitle .en{font-size:clamp(18px,1.4vw,26px);font-weight:700;line-height:1.35}
.stage .subtitle .ko{font-size:clamp(15px,1.05vw,19px);color:#ffd9bf;margin-top:4px}
body.live-viewport .stage .subtitle{display:none}
.stage .shadow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;min-width:240px;opacity:.95;z-index:3}
.stage.audio .shadow{position:static;transform:none;margin-top:10px}
.transport{justify-content:center;max-width:560px;width:100%;margin-left:auto;margin-right:auto;gap:8px}
.transport .btn{flex:0 1 120px;min-width:90px;max-width:140px;height:50px;padding:0 12px;font-size:16px;border-radius:10px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.offbox{margin-top:10px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fafbfc}
.offbox summary{cursor:pointer;font-size:14px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(150%);background:#1d2433;color:#fff;border-radius:10px;padding:12px 16px;display:flex;gap:10px;align-items:center;max-width:min(560px,92vw);box-shadow:0 6px 24px rgba(0,0,0,.25);transition:transform .2s;z-index:50;flex-wrap:wrap;font-size:14px}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast .btn{background:#fff}
#errbox{position:fixed;left:12px;right:12px;bottom:12px;background:#fdecea;border:2px solid var(--bad);color:#7a1f16;border-radius:10px;padding:12px 14px;z-index:60;font-size:14px}
/* fullscreen: picture + big subtitle of the current sentence */
.stage:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0}
.stage:fullscreen video,.stage:fullscreen .ytwrap{flex:1;max-height:none;width:100%;height:auto;object-fit:contain}
.stage:fullscreen .ytwrap{aspect-ratio:auto}
.stage:fullscreen .subtitle{display:block;background:#000;color:#fff;text-align:center;padding:14px 20px}
.stage:fullscreen .subtitle .en{font-size:clamp(22px,3.4vw,46px);font-weight:700;line-height:1.3}
.stage:fullscreen .subtitle .ko{font-size:clamp(16px,2.2vw,30px);color:#ffd9bf;margin-top:6px}
body.live-viewport .stage .subtitle .en{font-size:26px;font-weight:700;line-height:1.3}
body.live-viewport .stage .subtitle .ko{font-size:19px;color:#ffd9bf;margin-top:4px}
body.live-viewport .stage video{max-height:none}
body.live-viewport .offbox,body.live-viewport #draftNote{display:none}
body.live-viewport main>.card{display:none}
/* phones and small tablets */
@media (max-width:700px){
  main{padding:12px 10px 60px}
  .top{padding:10px 12px}.brand{font-size:16px}
  h1{font-size:19px}
  .player{position:static}
  .sents{max-height:none;overflow:visible}
  .sent{grid-template-columns:28px 1fr;padding:9px 10px}
  .sent>div:nth-child(3){grid-column:2}
  .transport{flex-wrap:nowrap;gap:6px}
  .transport .btn{min-width:0;flex:1;padding:10px 4px;font-size:18px;white-space:nowrap}
  .transport .lbl{display:none}
  .top .ver,.top .navlink{display:none}
  .seg button{padding:8px 10px}
  .edit input[type=number]{width:90px}
}
.upbar{height:8px;background:#e9ecf1;border-radius:6px;overflow:hidden;margin-top:8px}.upbar div{height:100%;background:var(--accent);width:0}

/* v0.3 textbook editor */
.editor fieldset.grp{border:1px solid #d7dce3;border-radius:8px;margin:8px 0;padding:6px 10px}
.editor legend{font-weight:700;color:#1f3a5f;padding:0 4px}
.editor .fld{display:block;margin:5px 0}
.editor .fld .tag{display:block;margin-bottom:2px}
.editor .fld input,.editor .fld textarea{width:100%}
/* v0.7 [PDF 최종 편집]: editor left, printed pages right */
.finalgrid{display:grid;grid-template-columns:minmax(320px,2fr) 3fr;gap:14px;align-items:start}
.finalgrid #eleft .editor{max-height:calc(100vh - 230px);overflow:auto}
.pvcard{position:sticky;top:70px;padding:10px}
.pvbox{position:relative;overflow:hidden;height:calc(100vh - 300px);min-height:300px;background:#8a8f98;border-radius:6px}
.pvbox iframe{position:absolute;left:0;top:0;width:1123px;border:0;transform-origin:0 0;background:#8a8f98}
.pvcard .notice{margin:6px 0;padding:6px 10px}
@media (max-width:900px){.finalgrid{grid-template-columns:1fr}.finalgrid #eleft .editor{max-height:none}.pvcard{position:static}.pvbox{height:60vh}}
/* v0.7 administrator AI settings */
#aiForm .fld{margin:10px 0}
#aiForm .fld .tag{border:0;padding:0;font-size:13px;font-weight:700;color:var(--ink,#1f2937)}
#aiForm .fld .ctrl{margin-top:4px}
#aiForm input[type=checkbox],#aiForm input[type=radio]{width:auto;margin:0 4px 0 0;vertical-align:middle}
#aiForm select{max-width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:14px}
#aiForm label.btn{display:inline-flex;align-items:center}
.mitem{border:1px solid #e1e5ea;border-radius:8px;padding:6px 10px;margin:8px 0;background:#fff}
.mitem.hid{opacity:.6;background:#f3f3f3}
.mitem .mhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mitem .mhead .btn{margin-left:auto}

.workflow{margin:16px 0}.workflowSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-left:22px;line-height:1.7}.workflowSteps b{font-size:13px;color:var(--sub)}.sourceChoices{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}.sourceChoices .btn:has(input:checked){border-color:var(--brand);background:#eef4fb}#urlFields{margin:14px 0}#title{margin:6px 0 12px}summary{cursor:pointer}button:disabled{opacity:.6;cursor:wait}@media(max-width:600px){.workflowSteps{grid-template-columns:1fr 1fr}.top{padding:10px;align-items:flex-start}.top nav{gap:6px;flex-wrap:wrap;justify-content:flex-end}.brand{font-size:14px}main{padding:16px 12px}.player{position:static}}

/* v0.5 first screen: one address box */
.hero{max-width:860px;margin:10px auto 18px;padding:22px 20px;text-align:center}
.hero h1{margin:0 0 14px;font-size:1.6rem}
.heroform{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.heroform input{flex:1 1 420px;min-width:0;font-size:1.1rem;padding:12px 14px}
.heroform .btn{flex:0 0 auto}
.lesson .lessonlink{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:8px}
.lesson .manage{font-size:.9rem}
.lesson .manage summary{cursor:pointer;color:var(--sub);width:max-content}
.btn.danger{border-color:#c0392b;color:#c0392b}
.scriptAsk{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.scriptAsk label{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
#heroScript{text-align:left;max-width:760px;margin:8px auto 0}
#heroScript textarea{width:100%;box-sizing:border-box}
.footlinks{margin-top:22px;text-align:center}
.pdfbar{margin:-4px 0 10px}
@media (max-width:700px){.hero h1{font-size:1.25rem}.heroform .btn{width:100%}}

/* ===== v0.8 teacher layout: three jobs (수업 영상 · 교재 완성하기 · 자료 받기), tools in 더보기 ===== */
.btn.ghost{background:transparent;border-color:transparent;color:var(--sub)}.btn.ghost:hover{background:#eef1f5;color:var(--ink)}
.btn.big small{display:block;font-size:12px;font-weight:400;opacity:.9}
.notice.slim{padding:7px 11px;margin:6px 0;font-size:14px}
.warntxt{color:var(--warn)}
h1.inline{display:inline;margin:0 0 0 6px;font-size:19px}
.badge.track{background:#e8eef7;color:var(--brand);font-weight:700}
.chip{display:inline-block;font-size:12px;border-radius:999px;padding:1px 8px;background:#eef1f5;color:var(--sub)}.chip.ok{background:#e3f4ec;color:var(--ok)}
/* home: one address box + class choice */
.trackpick{display:flex;gap:8px;justify-content:center;align-items:stretch;flex-wrap:wrap;margin:14px 0 12px}
.trackpick .tp-q{flex-basis:100%;color:var(--sub);font-size:14px}
.trackpick .tp{position:relative;display:flex;flex-direction:column;align-items:center;min-width:150px;border:1.5px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;background:#fff}
.trackpick .tp input{position:absolute;opacity:0;pointer-events:none}
.trackpick .tp b{font-size:16px}.trackpick .tp small{color:var(--sub);font-size:13px}
.trackpick .tp.on{border-color:var(--brand);background:#eef4fb;box-shadow:0 0 0 2px #cfe0f3}
.trackpick .tp:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.scriptAsk{margin:10px 0 0;font-size:14px;color:var(--sub)}
/* lesson header + tabs */
.lhead{margin:-6px 0 12px}
.ltitle{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ltitle h1{margin:0;font-size:21px;line-height:1.3;min-width:0}
.lback{text-decoration:none;font-size:26px;line-height:1;color:var(--sub);padding:0 6px 2px;border-radius:8px}.lback:hover{background:#e9edf2}
.lmorebtn{margin-left:auto}
.ltabs{display:flex;gap:4px;margin-top:10px;border-bottom:2px solid var(--line)}
.ltabs a{display:flex;flex-direction:column;text-decoration:none;padding:8px 18px 9px;border-radius:9px 9px 0 0;margin-bottom:-2px;border-bottom:3px solid transparent;color:var(--sub)}
.ltabs a b{font-size:16px}.ltabs a small{font-size:12px}
.ltabs a:hover{background:#eef1f5;color:var(--ink)}
.ltabs a.on{color:var(--brand);border-bottom-color:var(--accent);background:#fff}
.busybar{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#fff6e6;border:1px solid #f1d7a6;border-radius:10px;padding:7px 12px;margin:0 0 10px;font-size:14px}
.busybar.bad{background:#fdecea;border-color:#f3c3bd}
/* sheet (side panel on PC, bottom sheet on phones) */
#sheet{position:fixed;inset:0;z-index:40}
#sheet .sheetbg{position:absolute;inset:0;background:rgba(20,28,40,.35)}
#sheet .sheetbox{position:absolute;right:0;top:0;bottom:0;width:min(480px,100vw);background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.18);display:flex;flex-direction:column}
#sheet .sheethead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
#sheet .sheethead h2{margin:0}
#sheet .sheetbody{padding:14px 16px;overflow:auto}
.morelist{display:flex;flex-direction:column;gap:6px}
.moreitem{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 14px;cursor:pointer;text-decoration:none;font:inherit;color:inherit}
.moreitem:hover{border-color:#c9cfda;background:#fafbfc}.moreitem small{color:var(--sub)}
/* teaching view */
.iconbtn{border:1px solid transparent;background:transparent;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:16px;color:var(--sub)}
.iconbtn:hover{border-color:var(--line);background:#fff;color:var(--ink)}
.sent{grid-template-columns:34px 1fr 36px}
.sentcol{position:relative;min-width:0}
.sents{position:relative;max-height:calc(100vh - 210px)}
.moreedit{margin:2px 0}.moreedit summary{font-size:13px;color:var(--sub)}
.btn.pen.on{background:#c0392b;border-color:#c0392b;color:#fff}
.penlayer{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:4;overflow:hidden}
.penlayer path{fill:none;stroke:#d0021b;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.penlayer.active{pointer-events:auto;touch-action:none;cursor:crosshair}
.penlayer.active.eraser{cursor:cell}
.penlayer.active path{pointer-events:stroke}
.sents.penon{outline:2px solid #e9a6a6;outline-offset:2px;border-radius:10px}
/* The transcript can receive focus only to release the YouTube iframe; its current sentence card is the
   visible position cue. Keep the pen-mode red outline above. */
.sents:focus:not(.penon){outline:none}
.pentools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid #f0c3c3;border-radius:10px;padding:6px 8px;margin-bottom:6px}
body.live-viewport .lhead,body.live-viewport .busybar{display:none}
body.live-viewport .iconbtn{display:none}
body.live-viewport .ctrl.roomctl{display:flex}body.live-viewport .roomctl .seg,body.live-viewport .roomctl #fsBtn{display:none}
body.live-viewport .sents{max-height:calc(100vh - 80px)}
/* book page: the real print page in the middle, AI on the side */
.bookbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.bookpick{display:flex;gap:6px;flex-wrap:wrap}
.seg button.notmade{color:#9aa2b1}.seg button.notmade::after{content:" +";font-size:12px}
.seg button.notmade.on{color:#fff}
.pager{display:inline-flex;gap:4px;align-items:center}
.pager select{max-width:190px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
.aibtn{margin-left:auto}.aibtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.bookwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.bookwrap.aiopen{grid-template-columns:minmax(0,1fr) 360px}
.pagearea{position:relative;min-width:0}
.pvnote{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--brand);margin:0 0 6px}.pvnote #pvState{margin-left:8px}
.pagearea .pvbox{height:calc(100vh - 300px);min-height:340px}
.notmade-card{max-width:640px}
.fedit{position:absolute;z-index:6;width:min(440px,calc(100% - 16px));background:#fff;border:2px solid var(--accent);border-radius:12px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.fedit[hidden]{display:none}
.fedit .fhead{display:flex;align-items:center;gap:6px;margin-bottom:6px}.fedit .fhead .btn{margin-left:auto}
.fedit textarea,.fedit input{font-size:16px}
.fedit .fft{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:13px}
.sylpick{display:flex;gap:6px;flex-wrap:wrap}.sylpick button{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-size:16px;cursor:pointer}
.sylpick button.on{border-color:#d9622b;background:#fdece3;color:#d9622b;font-weight:800}
.aipanel{background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;height:calc(100vh - 262px);min-height:380px;position:sticky;top:70px}
.aipanel:empty{display:none}
.aihead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.aihead-r{display:flex;gap:2px}
.aimsgs{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.aihint{color:var(--sub);font-size:14px}.aihint ul{padding-left:18px;margin:4px 0}
.bub{border-radius:12px;padding:8px 11px;font-size:14px;line-height:1.5;max-width:100%}
.bub.me{align-self:flex-end;background:#eef4fb;max-width:88%}.bub.me small{display:block;color:var(--sub);font-size:12px}
.bub.ai{background:#f6f7f9}.bub.ai.err{background:#fdecea;color:#7a1f16}.bub.pending .dots::after{content:" …";animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.prop{margin-top:8px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px}
.prophead{display:flex;gap:6px;align-items:center}
.chglist{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:8px}
.chg{border-top:1px dashed var(--line);padding-top:6px}
.chg .chk{margin:0;align-items:center}.clabel{font-size:13px;font-weight:700;color:var(--brand)}
.diff{font-size:14px;margin-top:3px;word-break:break-word}
.diff del{background:#fde2e0;color:#9b2c1f}.diff ins{background:#d9f3e4;color:#156c43;text-decoration:none}
.why{font-size:12px}
.refused{font-size:13px;color:var(--sub);margin-top:4px}
.aicompose{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.aicompose .scope button{font-size:13px;padding:6px 9px}
.aicompose .small{font-size:12px}
.scopefor{font-size:12px}
/* files page */
.getgrid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
.getcard h2{margin-bottom:12px}
.getbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 8px}.getbtns .btn small{display:block;font-size:12px;opacity:.85}.oldpdf{font-size:13px}
.getcard .btn.big{text-align:center;min-width:190px}
.ccfiles{list-style:none;padding:0;margin:12px 0;line-height:1.9;font-size:14px}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
@media (max-width:1100px){.bookwrap.aiopen{grid-template-columns:minmax(0,1fr) 320px}}
@media (max-width:900px){
  .getgrid{grid-template-columns:1fr}
  .bookwrap.aiopen{grid-template-columns:minmax(0,1fr)}
  .aipanel{position:fixed;left:0;right:0;bottom:0;top:auto;height:62vh;min-height:0;border-radius:16px 16px 0 0;z-index:30;box-shadow:0 -10px 30px rgba(0,0,0,.2)}
  .pagearea .pvbox{height:auto;aspect-ratio:1123/794;min-height:0}
  #sheet .sheetbox{top:auto;left:0;width:100%;max-height:85vh;border-radius:16px 16px 0 0}
  .sents{max-height:none}
}
@media (max-width:700px){
  .ltabs a{padding:7px 8px;flex:1;text-align:center;align-items:center}.ltabs a small{display:none}.ltabs a b{font-size:15px}
  .ltitle h1{font-size:18px;flex:1 1 60%}
  .trackpick .tp{min-width:0;flex:1 1 28%;padding:8px 4px}
  .hero .btn.big{width:100%}
  .getcard .btn.big{width:100%}
  .aibtn{margin-left:0}
  .pager select{max-width:150px}
  .fedit{position:fixed;left:8px!important;right:8px;width:auto;top:auto!important;bottom:8px}
  .sent{grid-template-columns:24px 1fr 30px}.sent>div:nth-child(3){grid-column:auto}.iconbtn{width:30px;height:30px}
  .pvnote #pvState{display:none}
}

.aiopts{margin-top:0;gap:10px}.aiopts select{padding:5px 6px;border:1px solid var(--line);border-radius:7px;font-size:13px;background:#fff}.aiopts #aiSend{margin-left:auto}
.getbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 12px}.getbar .muted{font-size:13px}
.getgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.getgrid .getcard{display:flex;flex-direction:column;gap:10px;margin:0}.getgrid .getcard h2{margin:0}
.getcard .remake{display:flex;flex-direction:column;gap:4px}.getcard .remake .btn{align-self:flex-start}.getcard .remake p{margin:0}
.getcard .getbtns{margin:0}.getcard .honest{margin-top:auto}
.getcard.cc .btn.big{align-self:flex-start}.ccfiles{margin:0}
.oldbox{margin-top:16px}.oldbox summary{cursor:pointer}.oldbox .getbtns{margin:12px 0 6px}
.oldnote{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
@media (max-width:900px){.getgrid{grid-template-columns:1fr}}
.linkbtn{border:0;background:none;color:var(--brand);text-decoration:underline;cursor:pointer;font:inherit;font-size:13px;margin-left:8px;padding:0}
.stdchip{border:1px dashed #c9a3e6;background:#f8f2fd;color:#5b2d82;border-radius:999px;padding:3px 10px;font-size:13px;cursor:pointer;margin-left:8px}
.stdchip:hover{background:#f1e6fb}
.stdlist{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.stdrule{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}.stdrule.off{opacity:.6;background:#f6f7f9}
.stdtext{font-weight:600;line-height:1.5}.stdmeta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.chip.act{background:#f8f2fd;color:#5b2d82}
.stdex{font-size:13px;background:#fafbfc;border-radius:8px;padding:6px 9px;margin:4px 0;line-height:1.55}
.stdhist ul{padding-left:16px;margin:4px 0;font-size:13px}.stdhist li{margin:4px 0}
#sheet .fld{display:block;margin:12px 0}#sheet .fld .tag{display:inline-block;margin-bottom:4px}
#sheet .fld select{max-width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:7px}
#sheet .ctrl label{display:inline-flex;gap:4px;align-items:center}
.checks summary{cursor:pointer}.checks ul{margin:6px 0 0;padding-left:18px;font-size:13px}
/* v0.9 [수업에 반영] card + classroom viewer inside HHD (H2D_VIEWER) */
.getcard.online .olhist{margin:8px 0}.getcard.online .olhist summary{cursor:pointer;color:var(--sub)}
.getcard.online .olhist .row{display:flex;gap:10px;align-items:center;margin:6px 0}
.viewerpick .tp{min-width:96px}
a.card.lesson{color:inherit}
.lhead .ltitle #vBooks,.lhead .ltitle #vFull{margin-left:6px}
.vbook{padding:10px 0;border-bottom:1px solid var(--line)}.vbook b{font-size:17px}
#pdfview{position:fixed;inset:0;z-index:60;background:#30353d;display:flex;flex-direction:column}
#pdfview .pdfbar{display:flex;gap:8px;padding:8px 12px;background:#1f3a5f}
#pdfview iframe{flex:1;border:0;width:100%;background:#fff}
.offslot{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}.offslot.cand{border-style:dashed}
.offslot .offhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.officialframe{display:block;width:100%;height:72vh;min-height:360px;border:1px solid var(--line);border-radius:8px;background:#e6e8eb}
.officialbook select{max-width:100%}
.ofprev{display:grid;grid-template-columns:1fr;gap:10px}.ofprev figure{margin:0}.ofprev iframe{width:100%;height:420px;border:1px solid var(--line);border-radius:8px}
.ofok{display:block;margin:10px 0;padding:10px;border:1.5px solid var(--or,#d9622b);border-radius:8px;background:#fff7f1}

/* ===== v0.9.2 classroom UI (H₂D⁺ Vocal Lab.) ===== */
/* Brand glyphs ₂ / ⁺ need a font with the Unicode sub/superscripts; Segoe UI and Malgun Gothic both have them. */
.brand,.rt-brand,.modalhead h2{font-family:"Segoe UI","Malgun Gothic","Noto Sans KR","Pretendard",system-ui,sans-serif;font-synthesis:none}
.ltitle{position:relative}
.topfs{position:absolute;left:50%;top:0;transform:translateX(-50%);background:#087f7a;border-color:#087f7a;color:#fff;font-weight:700;white-space:nowrap}
.topfs:hover{background:#066b67;border-color:#066b67;color:#fff}
.topfs.on{background:#1f3a5f;border-color:#1f3a5f}
.topfs .fsicon{font-size:15px}
.textcenter{text-align:center}
@media(max-width:1100px){.topfs .fslbl{display:none}}

/* left video card: one compact control row, popovers open upwards and never move the page */
.classcard{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px;position:relative}
.ctrlbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 9px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);white-space:nowrap}
.ctrlbtn:hover{border-color:#b9c7d6;background:#fafcfe}
.ctrlbtn[aria-expanded="true"]{border-color:#087f7a;box-shadow:0 0 0 2px rgba(8,127,122,.14)}
.ctrlbtn span{color:var(--sub);font-size:12px}
.ctrlbtn b{font-size:13px;font-weight:700}
.ctrlbtn i{font-style:normal;color:#8a98a8;font-size:10px}
.ctrlbtn:disabled{opacity:.5;cursor:default}
.ctrlspacer{flex:1 1 4px;min-width:0}
.pop{position:absolute;bottom:calc(100% + 6px);left:0;z-index:35;background:#fff;border:1px solid #d7e0e9;border-radius:11px;box-shadow:0 10px 26px rgba(21,42,66,.16);padding:6px;display:grid;grid-template-columns:repeat(4,minmax(58px,1fr));gap:4px;min-width:260px}
.pop[hidden]{display:none}
#modePop{grid-template-columns:repeat(4,minmax(64px,1fr));min-width:290px}
#ratePop{grid-template-columns:repeat(4,minmax(54px,1fr));min-width:250px}
#shadowPop{left:auto;right:0;grid-template-columns:repeat(5,minmax(44px,1fr));min-width:280px}
#showPop{left:auto;right:0;grid-template-columns:1fr;min-width:150px}
.pop button{border:1px solid transparent;background:#f7f9fb;border-radius:7px;padding:7px 8px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);white-space:nowrap}
.pop button:hover{background:#eef4f8}
.pop button.on{background:#087f7a;border-color:#087f7a;color:#fff;font-weight:700}
.pop button:disabled{opacity:.45;cursor:default}

/* script column: fixed header slot (view mode + a reserved pen slot) so the pen never pushes the list */
.sentcol{display:flex;flex-direction:column;min-height:0;position:relative}
.scriptbar{height:42px;flex:0 0 42px;display:flex;align-items:center;gap:8px;padding:0 2px}
.viewseg{background:#fff}
.viewseg button{padding:6px 11px;font-size:13px}
.penslot{position:relative;height:42px;flex:0 0 42px}
.pentools{position:absolute;left:0;right:0;top:2px;display:flex;gap:5px;align-items:center;flex-wrap:nowrap;background:#fff;border:1px solid #f0c3c3;border-radius:9px;padding:4px 6px;margin:0;z-index:8;overflow:auto;box-shadow:0 3px 10px rgba(90,30,30,.06)}
.pentools[inert]{visibility:hidden}
.pentools .btn.small{padding:4px 8px;font-size:12px;white-space:nowrap}
.pentools .seg button{padding:4px 8px;font-size:12px}
.sentcol .sents{flex:1 1 auto;min-height:0;max-height:calc(100vh - 300px);padding:4px 6px 56px 2px}
.fontctl{position:absolute;right:10px;bottom:10px;z-index:9;display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.94);border:1px solid #d5e0e8;border-radius:9px;padding:3px;box-shadow:0 2px 8px rgba(21,42,66,.08)}
.fontctl button{border:0;background:transparent;border-radius:6px;padding:4px 8px;min-width:34px;font:inherit;font-size:12px;color:#203047;cursor:pointer}
.fontctl button:hover{background:#e8f1f5}
.fontctl #fontReset{min-width:48px;font-weight:700;color:#087f7a}

/* sentence cards: the active sentence gets a pale teal surface, a speaker and a little breathing room */
.sent{grid-template-columns:34px minmax(0,1fr) 36px;align-items:start;transition:background .16s ease,border-color .16s ease,margin .16s ease}
.sent .body{min-width:0;overflow-wrap:break-word}
.sent .no{display:flex;align-items:center;gap:4px;min-width:0}
.sent .spk{display:inline-flex;align-items:center;color:#087f7a;visibility:hidden;flex:0 0 auto}
.sent .spk svg{display:block}
.sent .num{font-variant-numeric:tabular-nums}
.sent.cur .spk{visibility:visible}
.sent.cur{background:#ddf3f1;border-color:#b9dedb}
.sent.cur:hover{border-color:#a8d3cf}
.sent.focus{background:#fff;border-color:#d5e0e8;padding:18px 20px}
body.live-viewport .sent.cur.focus{background:#ddf3f1;border-color:#b9dedb}
.focuswrap{min-height:100%;display:flex;align-items:center;padding:18px 4px}
.focuswrap .sent{width:100%;padding:22px 20px}
.scriptempty{color:#6b7d8d;text-align:center;margin:18vh auto 0;font-size:15px}

/* centered textbook picker (not the production side sheet) */
#modal{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:16px}
#modal .modalbg{position:absolute;inset:0;background:rgba(20,34,50,.42)}
#modal .modalbox{position:relative;width:min(560px,96vw);max-height:min(82vh,720px);display:flex;flex-direction:column;background:#fff;border:1px solid #d5e0e8;border-radius:16px;box-shadow:0 18px 50px rgba(13,30,48,.28)}
#modal .modalhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid #e3e9ef}
#modal .modalhead h2{margin:0;font-size:18px}
#modal .modalbody{padding:12px 18px 18px;overflow:auto}
#modal .vbook{border-bottom:1px solid #e8edf2;padding:12px 0}
#modal .vbook:last-child{border-bottom:0}
#modal .vbook b{display:block;font-size:16px;margin-bottom:8px}
#modal .modalbody .honest{margin-top:10px}

/* classroom top bar + calm HHD blue/grey palette */
.roomtop{display:none}
.segmentbreak{display:flex;align-items:center;gap:12px;margin:24px 0 18px;color:var(--sub);font-size:12px}
.segmentbreak::before,.segmentbreak::after{content:"";height:1px;background:#a8bdcc;flex:1}
.segmentchoices{max-height:45dvh;overflow-y:auto;border-block:1px solid var(--line);margin:16px 0}
.modalbox .segmentchoices label{display:flex;align-items:flex-start;gap:12px;padding:12px 6px;min-height:44px;border-bottom:1px solid var(--line);cursor:pointer}
.segmentchoices input{width:20px;height:20px;flex:0 0 20px;margin:2px 0}
.segmentchoices small{display:block;line-height:1.5;margin-top:4px;color:var(--sub)}
.segmenthint{line-height:1.6}
.modalbox .segmentconfirm{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 0;cursor:pointer}
.segmentconfirm input{width:20px;height:20px;flex:0 0 20px;margin:2px 0}
body.live-viewport #modal .segmentconfirm{display:flex}
body.live-viewport #modal #segmentLegacy{display:block}
body.live-viewport{--bg:#e6edf3;--card:#f6f8fa;--ink:#203047;--sub:#52657a;--line:#d5e0e8;--brand:#1f3a5f;--accent:#087f7a;--hl:#ddf3f1;background:#e6edf3;color:#203047;height:100dvh;overflow:hidden}
body.live-viewport .top{display:none!important}
body.live-viewport h1,body.live-viewport .notice,body.live-viewport .honest,body.live-viewport .muted,body.live-viewport .flag,body.live-viewport .tm,body.live-viewport [data-edit],body.live-viewport label{display:none}
body.live-viewport #app{height:100dvh;padding-top:58px;box-sizing:border-box}
body.live-viewport .roomtop{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;top:0;height:58px;padding:0 14px;background:rgba(246,248,250,.97);border-bottom:1px solid #cfdae3;box-shadow:0 1px 6px rgba(25,48,70,.06);z-index:25;backdrop-filter:blur(8px)}
.rt-left{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.rt-back{width:38px;height:38px;flex:0 0 38px;border:1px solid #cbd8e3;background:#fff;border-radius:10px;color:#1f3a5f;font-size:26px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 0 3px}
.rt-back:hover{background:#e9f1f6;border-color:#b6c8d8}
.rt-brand{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#1f3a5f;white-space:nowrap}
.rt-brand b{font-weight:800}
.rt-sep{color:#aab8c5}
.rt-title{font-size:13px;color:#52657a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rt-fs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:6px 14px;border:1px solid #087f7a;border-radius:9px;background:#087f7a;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.rt-fs:hover{background:#066b67;border-color:#066b67}
.rt-fs.on{background:#1f3a5f;border-color:#1f3a5f}
.rt-right{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:1;min-width:0}
.rt-btn{border:1px solid #cbd8e3;background:#fff;border-radius:9px;padding:7px 12px;font:inherit;font-size:13px;color:#1f3a5f;cursor:pointer;white-space:nowrap}
.rt-btn:hover{background:#e9f1f6}
body.live-viewport main{max-width:none;height:100dvh;padding:0;overflow:hidden}
body.live-viewport .lessonview{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:10px;height:calc(100dvh - 66px);max-width:1920px;margin:0 auto;padding:6px 10px;align-items:stretch;min-height:0}
body.live-viewport .player{position:relative;top:auto;align-self:start;max-height:100%;background:#f6f8fa;border:1px solid #d5e0e8;border-radius:14px;box-shadow:none;padding:10px;display:flex;flex-direction:column;min-width:0}
body.live-viewport .stage{border-radius:10px;background:#0b1622;flex:0 0 auto;width:100%}
body.live-viewport .ytwrap{aspect-ratio:16/9}
body.live-viewport .stage video{aspect-ratio:16/9;height:auto;max-height:none;object-fit:contain}
body.live-viewport .stage.audio .audiobox{background:#eaf2f7;color:#1f3a5f}
body.live-viewport .transport{justify-content:center;gap:8px;max-width:560px;width:100%;margin:10px auto 0}
body.live-viewport .transport .btn{flex:1 1 0;min-width:0;max-width:150px;height:50px;padding:0 12px;font-size:18px;border-radius:10px;border-color:#cddbe5;background:#fff}
body.live-viewport .transport .btn.primary{background:#087f7a;border-color:#087f7a;color:#fff}
body.live-viewport .transport .lbl{font-size:15px}
body.live-viewport .classcard{margin-top:10px;gap:6px}
body.live-viewport .ctrlbtn{background:#fff;border-color:#d5e0e8;padding:7px 10px;min-height:38px;border-radius:9px}
body.live-viewport .ctrlbtn span{font-size:11px}
body.live-viewport .ctrlbtn b{font-size:13px}
body.live-viewport .classcard .pen{min-height:38px;padding:7px 12px;font-size:14px;border-radius:9px}
body.live-viewport .classcard .fontctl{height:38px;padding:2px;border-radius:9px}
body.live-viewport .classcard .fontctl button{height:32px;min-width:32px;font-size:13px}
body.live-viewport .classcard .fontctl #fontReset{min-width:48px}
body.live-viewport .classcard #classroom{display:none}
body.live-viewport .classcard .pen{order:20}
body.live-viewport .sentcol{height:100%;min-height:0;background:#f6f8fa;border:1px solid #d5e0e8;border-radius:14px;overflow:hidden;padding:0 7px;box-shadow:none}
body.live-viewport .scriptbar{height:48px;flex-basis:48px;padding:0 2px}
body.live-viewport .viewseg{border-color:#cddbe5}
body.live-viewport .viewseg button{background:#fff;color:#52657a;font-size:13px;padding:7px 12px}
body.live-viewport .viewseg button.on{background:#087f7a;color:#fff}
body.live-viewport .penslot{height:44px;flex-basis:44px}
body.live-viewport .pentools{border-color:#e8c7c7;box-shadow:0 2px 8px rgba(90,30,30,.05)}
body.live-viewport .sents{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;padding:2px 4px 54px 2px;scrollbar-gutter:stable}
body.live-viewport .sent{background:#fff;border:1px solid #e1e9ef;border-radius:12px;padding:13px 14px;grid-template-columns:42px minmax(0,1fr);gap:9px;box-shadow:none;margin:0}
body.live-viewport .sent .no{font-size:15px;color:#087f7a;font-weight:700;align-self:start;padding-top:4px}
body.live-viewport .sent .num{font-size:13px;color:#6a7d8e}
body.live-viewport .sent .en{font-size:calc(clamp(19px,1.25vw,24px) * var(--script-scale,1));line-height:1.4;font-weight:600;letter-spacing:-.006em;color:#203047}
body.live-viewport .sent .ko{font-size:calc(clamp(15px,.95vw,18px) * var(--script-scale,1));line-height:1.5;color:#52657a;margin-top:4px;font-weight:500}
body.live-viewport .sent .ko.empty{color:#a45a4f}
body.live-viewport .sent.cur{background:#ddf3f1;border-color:#b9dedb;margin:8px 0;box-shadow:none}
body.live-viewport .sent.cur .en{font-weight:700}
body.live-viewport .sent.cur .ko{color:#3f5c67}
body.live-viewport .sent.cur:hover{border-color:#b9dedb}
body.live-viewport .sent:hover{border-color:#c8d8e4}
body.live-viewport .sent.focus{padding:22px 20px;background:#fff;border-color:#d5e0e8;margin:0}
body.live-viewport .sent.cur.focus{background:#ddf3f1;border-color:#b9dedb}
body.live-viewport .focuswrap{padding:18px 4px;min-height:100%}
body.live-viewport .sent.focus .no{grid-column:1/-1;padding:0 0 6px;font-size:13px}
body.live-viewport .sent.focus .num::before{content:"문장 ";color:#52657a;font-weight:500}
body.live-viewport .sent.focus .en{font-size:calc(clamp(28px,2.15vw,40px) * var(--script-scale,1));line-height:1.38}
body.live-viewport .sent.focus .ko{font-size:calc(clamp(20px,1.45vw,28px) * var(--script-scale,1));line-height:1.5;margin-top:10px}
body.live-viewport .sent.focus .spk{visibility:visible}
body.live-viewport .fontctl{border-color:#cddbe5;background:rgba(255,255,255,.96);right:12px;bottom:10px}
body.live-viewport .fontctl #fontReset{color:#087f7a}
body.live-viewport .shadow{background:#1f3a5f;color:#fff;border-radius:10px;padding:20px 16px}
body.live-viewport .shadow .big{font-size:clamp(26px,2.3vw,36px);font-weight:800}
body.live-viewport .stage .subtitle{background:#0b1622;padding:10px 16px}
body.live-viewport .stage .subtitle .en{font-size:clamp(18px,1.3vw,26px);line-height:1.35;color:#fff}
body.live-viewport .stage .subtitle .ko{font-size:clamp(14px,1vw,19px);color:#d9f0ed;margin-top:3px}
body.live-viewport .stage:fullscreen .subtitle .en{font-size:clamp(24px,3.2vw,46px)}
body.live-viewport .stage:fullscreen .subtitle .ko{font-size:clamp(17px,2.1vw,30px)}
body.live-viewport.dim .sents .sent:not(.cur){opacity:.35}

@media(max-width:900px){
  body.live-viewport{overflow:auto;height:auto}
  body.live-viewport #app{height:auto;padding-top:calc(76px + env(safe-area-inset-top,0px))}
  body.live-viewport .roomtop{height:calc(76px + env(safe-area-inset-top,0px));padding:calc(16px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 12px max(12px,env(safe-area-inset-left,0px))}
  body.live-viewport .rt-back{width:44px;height:44px;flex-basis:44px}
  body.live-viewport .rt-fs{top:calc(38px + env(safe-area-inset-top,0px));min-height:44px}
  body.live-viewport .rt-title,body.live-viewport .rt-sep{display:none}
  body.live-viewport .rt-brand{font-size:15px}
  body.live-viewport .rt-fs{font-size:13px;padding:5px 10px}
  body.live-viewport .lessonview{grid-template-columns:1fr;height:auto;padding:6px 8px 12px}
  body.live-viewport .player{max-height:none}
  body.live-viewport .sentcol{height:72vh;min-height:420px}
  body.live-viewport .sents{overflow-y:auto}
  .scriptbar,body.live-viewport .scriptbar{height:auto;min-height:48px;flex-basis:auto;flex-wrap:wrap;padding:4px 2px}
  #segmentsBtn{min-height:44px}
}
@media(max-width:700px){
  .topfs{padding:5px 9px}
  .rt-fs .fslbl{display:none}
  .classcard .ctrlspacer{display:none}
  body.live-viewport .classcard .ctrlbtn{flex:1 1 calc(50% - 6px);justify-content:center}
  body.live-viewport .transport .btn{font-size:16px}
  body.live-viewport .sent{grid-template-columns:34px minmax(0,1fr);padding:11px 12px}
  .pop{min-width:0;width:min(320px,calc(100vw - 24px))}
}
body.live-viewport .sent>div:nth-child(3){display:none}
body.live-viewport .sent.focus .no{font-size:13px;color:#52657a;align-items:center;gap:6px;padding-top:0}
body.live-viewport .sent.focus .num{font-size:13px}
.lhead .ltitle{width:100%}
/* keep the font control out of the scrolling text: a real bottom row, not an overlay on the last card */
.sentcol .sents{margin-bottom:44px;padding-bottom:8px}
body.live-viewport .sent .en{font-size:calc(clamp(20px,1.25vw,24px) * var(--script-scale,1))}
body.live-viewport .sent .ko{font-size:calc(clamp(16px,1vw,18px) * var(--script-scale,1))}
.lhead .ltitle #vFull{margin-left:0}
body.live-viewport .sent.focus .body{grid-column:1/-1}
.sents.focuslist{display:flex;flex-direction:column}
.sents.focuslist .focuswrap{margin:auto 0;width:100%;min-height:0;display:block;padding:18px 4px}
body.live-viewport .sents{padding:2px 4px 8px 2px}
/* the fullscreen control follows HHD's own primary button (blue #2563eb, 8px radius) in both screens */
.topfs,.rt-fs{background:#2563eb;border-color:#2563eb;border-radius:8px;color:#fff}
.topfs:hover,.rt-fs:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.topfs.on,.rt-fs.on{background:#1e3a8a;border-color:#1e3a8a;color:#fff}
body.live-viewport .rt-left{padding-right:64px}
body.live-viewport .rt-right{padding-left:64px}
@media(max-width:900px){body.live-viewport .rt-left{padding-right:46px}body.live-viewport .rt-right{padding-left:46px}}
.lhead .ltitle h1{max-width:calc(100% - 250px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.lhead .topfs{position:static;transform:none;margin-left:auto}}
/* ===== v0.9.3 — one-sentence focus grid hardening + stronger active sentence ===== */
/* The focus card is a real single column. The number row used to span the 2-column grid and the body could be
   auto-placed into the 42px number column, producing one or two letters per line. Never rely on auto-placement here. */
body.live-viewport .sent.focus{grid-template-columns:minmax(0,1fr);padding:24px 24px}
body.live-viewport .sent.focus .no,
body.live-viewport .sent.focus .body{grid-column:1;width:100%;max-width:100%;min-width:0}
body.live-viewport .sent.focus .body{justify-self:stretch}
body.live-viewport .sent.focus .en,
body.live-viewport .sent.focus .ko{white-space:normal;word-break:normal;overflow-wrap:anywhere}
body.live-viewport .sent.focus .en{line-break:normal;hyphens:none}
body.live-viewport .sent.focus .ko{word-break:keep-all;overflow-wrap:anywhere}

/* Active sentence: more breathing room, a thin teal edge and a quiet glow (no looping animation). All normal
   classroom cards share the same inner padding so selecting a sentence never moves text inside a card. */
body.live-viewport .sent{grid-template-columns:42px minmax(0,1fr);padding:18px 20px;transition:background .17s ease,border-color .17s ease,box-shadow .17s ease,margin .17s ease}
body.live-viewport .sent.cur{margin:14px 0;border-color:#a9d8d3;box-shadow:0 6px 20px rgba(8,127,122,.15),0 0 0 1px rgba(8,127,122,.08)}
body.live-viewport .sent.cur.focus{margin:0;box-shadow:0 8px 24px rgba(8,127,122,.16),0 0 0 1px rgba(8,127,122,.10)}
body.live-viewport .sent.cur .spk{filter:drop-shadow(0 0 3px rgba(8,127,122,.25))}

@media(max-width:700px){
  body.live-viewport .sent{padding:15px 14px}
  body.live-viewport .sent.cur{margin:10px 0}
  body.live-viewport .sent.focus{padding:20px 16px}
}

/* ===== v0.9.4 — measured split, popover overlay, font control in the left card, shared vertical rhythm ===== */
/* three-column lesson grid: video | draggable splitter | script. JS writes the pixel split, CSS is the fallback. */
.lessonview{grid-template-columns:minmax(0,55fr) 12px minmax(0,45fr);gap:0;align-items:stretch}
.player{position:relative;top:auto;align-self:center}
.sentcol{align-self:stretch}
.splitter{position:relative;width:12px;min-width:12px;align-self:stretch;cursor:col-resize;touch-action:none;z-index:12;outline:none}
.splitter::before{content:"";position:absolute;top:8px;bottom:8px;left:5px;width:2px;border-radius:2px;background:#c6d3de;transition:background .15s,box-shadow .15s}
.splitter:hover::before,.splitter:focus-visible::before,body.split-drag .splitter::before{background:#087f7a;box-shadow:0 0 0 3px rgba(8,127,122,.12)}
.splitter span{position:absolute;top:50%;left:50%;width:4px;height:34px;transform:translate(-50%,-50%);border-radius:4px;background:rgba(8,127,122,.35)}
body.split-drag{cursor:col-resize;user-select:none}
body.split-drag iframe,body.split-drag video,body.split-drag .ytwrap{pointer-events:none!important}
body.split-drag .splitter::before{background:#087f7a}

/* the setting menus: content-sized vertical lists, fixed overlay, measured from the clicked button */
.pop{position:fixed;left:0;top:0;right:auto;bottom:auto;display:flex;flex-direction:column;grid-template-columns:none;gap:2px;width:auto;min-width:0;max-width:min(240px,calc(100vw - 16px));padding:6px;border-radius:11px;z-index:70;box-shadow:0 12px 28px rgba(21,42,66,.18);overflow:hidden}
#modePop,#ratePop,#shadowPop,#showPop{left:0;right:auto;top:0;bottom:auto;width:auto;min-width:132px;display:flex;grid-template-columns:none;overflow:hidden}
.pop button{width:100%;min-height:36px;height:36px;flex:0 0 36px;text-align:left;padding:7px 12px;border-radius:8px;font-size:13px;white-space:normal;line-height:1.35}
.pop button.on{background:#087f7a;border-color:#087f7a;color:#fff}
.pop::-webkit-scrollbar{width:8px}
.pop::-webkit-scrollbar-thumb{background:#c8d6e0;border-radius:8px}

/* font size belongs in the left class-control card, at its right end; it no longer floats over the script */
.classcard .fontctl{position:static;right:auto;bottom:auto;order:99;margin-left:auto;padding:2px;border-radius:8px;background:#fff;box-shadow:none;border-color:#d5e0e8;flex:0 0 auto}
.classcard .fontctl button{height:26px;min-width:30px;padding:2px 7px;font-size:12px}
.classcard .fontctl #fontReset{min-width:45px}
.sentcol .sents{margin-bottom:0;padding-bottom:8px}
body.live-viewport .sents{padding:2px 4px 8px 2px}

/* video is vertically centred in the available row; focus text sits slightly above centre and leaves room for ink */
.sents.focuslist{padding-bottom:clamp(24px,5vh,56px)}
body.live-viewport .player{align-self:center}

/* textbook button lives directly to the right of the lesson title in normal and classroom views */
.rt-left{min-width:0}
.rt-title{flex:1 1 auto;min-width:0}
.rt-books{flex:0 0 auto;margin-left:4px;border-color:#cbd8e3;background:#fff;color:#1f3a5f}
.lhead .ltitle h1{max-width:calc(100% - 330px)}
@media(max-width:900px){
  .lessonview{grid-template-columns:1fr!important;row-gap:14px}
  .splitter{display:none}
  .player{align-self:stretch}
  .lhead .ltitle h1{max-width:calc(100% - 210px)}
  body.live-viewport .rt-title{display:block;font-size:12px}
  body.live-viewport .rt-sep{display:none}
  .rt-books{font-size:12px;padding:6px 9px}
}
@media(max-width:700px){
  .pop{width:min(208px,calc(100vw - 16px))}
  .classcard .fontctl{margin-left:auto}
}
.sents.focuslist{padding-bottom:clamp(32px,8vh,88px)}
.rt-title{flex:0 1 auto}
body.live-viewport .sents.focuslist,.sents.focuslist{padding-bottom:clamp(32px,8vh,88px)!important}
body.live-viewport .sents.focuslist,.sents.focuslist{padding-bottom:clamp(24px,6vh,64px)!important}
@media(max-width:700px){
  body.live-viewport .rt-brand{display:none}
  body.live-viewport .rt-left{max-width:calc(50% - 52px);padding-right:0}
}
.pop[hidden],#modePop[hidden],#ratePop[hidden],#shadowPop[hidden],#showPop[hidden]{display:none!important}
/* ===== v0.9.6 — one vertical rule for the video group, in every screen and view mode ===== */
/* The player card owns the video, captions and both control rows, so centring the card centres the whole group.
   Below 1231px the layout stacks and the group follows the document flow from the top. */
@media(min-width:1231px){
  .player,
  body.live-viewport .player,
  .lessonview.focusview .player,
  body.live-viewport .lessonview.focusview .player{align-self:center}
}

/* two primary actions, one centred group in the normal lesson header; classroom keeps only its back arrow */
.topactions{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:3}
.topactions .topfs,.topactions .topclass{position:static;left:auto;top:auto;transform:none;margin-left:0;min-height:38px;padding:8px 15px;font-size:14px;font-weight:700;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.topclass{background:#087f7a;border-color:#087f7a;color:#fff}
.topclass:hover{background:#066b67;border-color:#066b67;color:#fff}
.topclass .ficon{font-size:14px}
.topactions .topfs{background:#2563eb;border-color:#2563eb;color:#fff}
.topactions .topfs:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
@media(max-width:900px){
  .topactions{position:static;transform:none;margin-left:auto;order:10}
  .topactions .topfs,.topactions .topclass{min-height:34px;padding:6px 10px;font-size:13px}
}

/* one settings line: mode/speed left, shadow/language/pen/font right. No duplicate classroom button here. */
.classcard{flex-wrap:nowrap;gap:5px}
.classcard .ctrlspacer{flex:1 1 4px;min-width:4px}
.classcard .fontctl{margin-left:2px}
@media(max-width:700px){
  .classcard{flex-wrap:wrap}
  .classcard .ctrlspacer{display:none}
  .classcard .ctrlbtn{flex:1 1 calc(50% - 5px);justify-content:center}
  .classcard .fontctl{flex:0 0 auto;margin-left:auto}
}
/* ===== v0.9.5 — font scale also applies outside classroom ===== */
.sent .en{font-size:calc(15px * var(--script-scale,1))}
.sent .ko{font-size:calc(14px * var(--script-scale,1));line-height:1.5}
.sent.focus .en{font-size:calc(24px * var(--script-scale,1));line-height:1.4}
.sent.focus .ko{font-size:calc(18px * var(--script-scale,1));line-height:1.5}
/* keep the settings row single-line down to 521px; only phone-width stacks may wrap */
@media(min-width:521px) and (max-width:700px){
  .classcard{flex-wrap:nowrap}
  .classcard .ctrlspacer{display:block;flex:1 1 4px;min-width:4px}
  body.live-viewport .classcard .ctrlbtn,.classcard .ctrlbtn{flex:0 1 auto;justify-content:flex-start}
  .classcard .fontctl{margin-left:2px}
}
@media(max-width:520px){
  .classcard{flex-wrap:wrap}
  .classcard .ctrlspacer{display:none}
  body.live-viewport .classcard .ctrlbtn,.classcard .ctrlbtn{flex:1 1 calc(50% - 5px);justify-content:center}
  .classcard .fontctl{flex:0 0 auto;margin-left:auto}
}
/* make room for the centred classroom/fullscreen pair without letting title/textbooks collide */
.lhead .ltitle h1{max-width:max(220px,calc(50vw - 260px))}
@media(max-width:1100px){
  .topactions{position:static;transform:none;flex-basis:100%;justify-content:center;margin-left:0;order:20}
  .lhead .ltitle{flex-wrap:wrap}
  .lhead .ltitle h1{max-width:calc(100% - 250px)}
}
@media(max-width:900px){.lhead .ltitle h1{max-width:calc(100% - 210px)}}
.classcard .btn{white-space:nowrap;flex:0 0 auto}
.classcard{column-gap:4px}
.classcard .ctrlbtn{padding:6px 8px}
.classcard .pen{padding:5px 8px;font-size:13px}
.classcard .fontctl button{min-width:28px;padding:2px 6px}
.classcard .fontctl #fontReset{min-width:42px}
/* Below 1230px the two columns cannot hold the full control row; stack before anything clips. */
@media(max-width:1230px){
  .lessonview{grid-template-columns:1fr!important;row-gap:14px}
  .splitter{display:none}
  .player{align-self:stretch}
  body.live-viewport .lessonview{grid-template-columns:1fr;height:auto;padding:6px 8px 12px}
  body.live-viewport .player{max-height:none;align-self:stretch}
  body.live-viewport .sentcol{height:72vh;min-height:420px}
  body.live-viewport .sents{overflow-y:auto}
}
@media(min-width:1101px){.lhead .ltitle h1{max-width:min(460px,calc(50vw - 220px))}}
/* phone/small-window: a regular 2-column grid of controls instead of clipping a single row */
@media(max-width:699px){
  .classcard{flex-wrap:wrap}
  .classcard .ctrlspacer{display:none}
  body.live-viewport .classcard .ctrlbtn,.classcard .ctrlbtn{flex:1 1 calc(50% - 5px);justify-content:center}
  .classcard .fontctl{flex:0 0 auto;margin-left:auto}
}
/* normal/HHD one-sentence view uses the same full-width single-column card as the classroom view */
body:not(.live-viewport) .sent.focus{grid-template-columns:minmax(0,1fr);position:relative}
body:not(.live-viewport) .sent.focus>.no,
body:not(.live-viewport) .sent.focus>.body{grid-column:1;width:100%;max-width:100%;min-width:0}
body:not(.live-viewport) .sent.focus>.no{padding-bottom:6px}
body:not(.live-viewport) .sent.focus>.body{justify-self:stretch}
body:not(.live-viewport) .sent.focus>div:nth-child(3){position:absolute;right:12px;top:12px}
body:not(.live-viewport) .sent.focus .en,
body:not(.live-viewport) .sent.focus .ko{white-space:normal;word-break:normal;overflow-wrap:anywhere}
body:not(.live-viewport) .sent.focus .en{line-break:normal;hyphens:none}
body:not(.live-viewport) .sent.focus .ko{word-break:keep-all;overflow-wrap:anywhere}
body:not(.live-viewport) .sent.cur.focus .spk{visibility:visible}
/* focus view is a full teaching surface: don't reserve the page's bottom padding below it */
body.focus-view main{padding-bottom:0}

/* ===== v0.9.6 — mobile player, readable labels and English sentence prefix ===== */
/* The four playback buttons keep a 50px touch height; labels stay visible because icons alone are ambiguous
   for teachers switching between Korean and English. The group never grows wider than 560px. */
@media(max-width:700px){
  .transport{max-width:560px;gap:6px}
  .transport .btn{flex:1 1 0;min-width:0;max-width:150px;height:50px;padding:0 6px;font-size:16px}
  .transport .lbl{display:inline;font-size:13px}
  .classcard .ctrlbtn{min-height:42px;padding:8px 10px}
  .classcard .pen{min-height:42px;padding:8px 10px}
  .classcard .fontctl{height:42px}
  .classcard .fontctl button{height:36px;min-width:30px}
  body.live-viewport .transport .btn{height:50px;font-size:17px}
  body.live-viewport .classcard .ctrlbtn,body.live-viewport .classcard .pen{min-height:44px}
  body.live-viewport .classcard .fontctl{height:44px}
  body.live-viewport .classcard .fontctl button{height:38px}
}
@media(max-width:700px){
  /* the lesson name gets its own full-width line; buttons/badges follow instead of squeezing the title */
  .lhead .ltitle h1{flex:1 1 100%;max-width:100%;order:-1;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.28;font-size:17px}
  /* classroom bar: title keeps the spare width, books uses a short label, fullscreen moves to the right edge */
  body.live-viewport .rt-left{max-width:none;padding-right:48px;gap:6px}
  body.live-viewport .rt-title{display:block;flex:1 1 auto;min-width:0;font-size:12px}
  body.live-viewport .rt-books{font-size:12px;padding:6px 8px;margin-left:2px}
  body.live-viewport .rt-fs{left:auto;right:8px;transform:translateY(-50%);width:38px;min-width:38px;height:38px;min-height:38px;padding:0}
  body.live-viewport .rt-fs .fslbl{display:none}
}
@media(max-width:520px){
  .transport .btn{font-size:15px;padding:0 4px}
  .transport .lbl{font-size:12px}
}
body.lang-en.live-viewport .sent.focus .num::before{content:"Sentence "}

/* ===== v0.9.7 — stable gutters and one centred control width ===== */
/* Reserving the page scrollbar at the root keeps the whole lesson at the same X coordinate when All/Focus changes
   the document height. The script panel does the same for its own scrollbar, so neither pane reflows on a mode switch. */
/* The page reserves this width in body below; inner transcript scrollbars still use stable gutters. */
.sents{scrollbar-gutter:stable}
/* Playback and settings now share the same 560px centred track; the left/right setting groups still use the spacer. */
body.live-viewport .classcard{width:100%;max-width:560px;margin:10px auto 0;gap:3px;column-gap:3px}
body.live-viewport .classcard .ctrlbtn{padding:7px 5px}
body.live-viewport .classcard .fontctl button{min-width:26px;padding:1px 3px}
body.live-viewport .classcard .fontctl #fontReset{min-width:40px}

/* v0.9.11: a quiet classroom surface, with six tools owned by the left pane.
   Media/transport DOM never changes on resize; only the existing toolbar moves. */
.videocol{min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:0}
html:not(.live-viewport){background:var(--bg);overflow-x:clip}
body:not(.live-viewport){width:calc(100vw - var(--page-gutter,0px));min-height:100dvh}
html:not(.live-viewport) .top{width:100vw}
/* Windows' visible scrollbar also has a header-coloured track; overlay scrollbars stay native. */
html[data-classic-scrollbars]:not(.live-viewport)::-webkit-scrollbar{width:var(--page-gutter)}
html[data-classic-scrollbars]:not(.live-viewport)::-webkit-scrollbar-track{background:linear-gradient(to bottom,var(--brand) var(--header-height,48px),var(--bg) var(--header-height,48px))}
html[data-classic-scrollbars]:not(.live-viewport)::-webkit-scrollbar-thumb{background:#a7b7c1;border:4px solid transparent;background-clip:padding-box;border-radius:10px}
html[data-classic-scrollbars]:not(.live-viewport)::-webkit-scrollbar-button{display:none}
.videocol .player{width:100%;margin:0}
.toolicon{display:none}
.classcard #fontBtn{display:inline-flex}
body.live-viewport .classcard .fontctl.pop,
.classcard .fontctl.pop{position:fixed;display:flex;flex-direction:column;align-items:stretch;order:0;margin:0;bottom:auto;right:auto;width:86px;min-width:0;height:auto;padding:6px;gap:3px;z-index:70}
.classcard .fontctl.pop[hidden]{display:none!important}
.classcard .fontctl.pop button{flex:0 0 auto;width:100%;min-width:0;min-height:44px;height:44px;padding:4px;text-align:center}
.pop button{min-height:44px;height:auto;flex:0 0 auto}
.fontval{flex:0 0 18px;height:18px;line-height:18px;text-align:center;font-size:14px;font-weight:800;color:#087f7a;font-variant-numeric:tabular-nums}
.fontslider{position:relative;display:flex;flex:0 0 88px;justify-content:center;align-items:stretch;width:100%;height:88px;padding:9px 0;box-sizing:border-box;touch-action:none;cursor:ns-resize;outline:none}
.fontslider:focus-visible{outline:3px solid #087f7a;outline-offset:2px;border-radius:8px}
.fontslider-track{position:relative;width:8px;height:100%;border-radius:8px;background:#d5e0e8}
.fontslider-fill{position:absolute;left:0;right:0;bottom:0;height:var(--font-pct,25%);border-radius:8px;background:#087f7a}
.fontslider-thumb{position:absolute;left:50%;bottom:calc(var(--font-pct,25%) - 9px);width:18px;height:18px;transform:translateX(-50%);border-radius:50%;background:#fff;border:2px solid #087f7a;box-shadow:0 1px 4px rgba(21,42,66,.18)}
.classcard .fontctl.pop .fontreset{min-height:34px;height:34px;font-size:12px;font-weight:800;color:#087f7a;background:#eef4fb;border:1px solid #cddbe5}
.pop button:focus-visible,.classcard button:focus-visible,.rt-btn:focus-visible{outline:3px solid #087f7a;outline-offset:2px}
.shortcuthelp p{display:block!important;color:#203047!important;font-size:16px;line-height:1.8;margin:12px 0}
body.live-viewport .roomtop{gap:12px;background:#dfe7e8;box-shadow:none}
body.live-viewport .rt-left{padding-right:0;flex:1;max-width:none}
body.live-viewport .rt-right{padding-left:0;flex:0 0 auto;gap:8px}
body.live-viewport .rt-fs{position:static;transform:none;min-height:44px;left:auto;top:auto;right:auto;background:#f1f5f4;border-color:#beced0;color:#203047}
body.live-viewport .rt-btn,body.live-viewport .rt-back{min-height:44px;background:#edf3f2}
body.live-viewport .rt-title{flex:1}
body.live-viewport .rt-brand{font-size:16px}
body.live-viewport{--bg:#dbe4e5;--card:#e9efee;--ink:#203047;--sub:#4f6473;--line:#bdcccf;background:var(--bg)}
/* The transcript keeps the v0.9.10 surface and inherited colours. Only idle card fill is quieter. */
body.live-viewport .sentcol{--bg:#e6edf3;--card:#f6f8fa;--ink:#203047;--sub:#52657a;--line:#d5e0e8;--brand:#1f3a5f;--accent:#087f7a;--hl:#ddf3f1}
body.live-viewport .sent:not(.cur){background:#fbfcfd}
body.live-viewport.dim .sents .sent:not(.cur){opacity:1}
body.live-viewport .stage .subtitle{display:none}
body.live-viewport.video-captions .stage .subtitle{display:block}
body.live-viewport .lhead{display:none}
body.h2d-viewer #offbox{display:none}
body.live-viewport .rt-fs.on{background:#087f7a;border-color:#087f7a;color:white}
/* Split only when both panes keep their proven reading width: 480px video + 400px script + 12px
   splitter + page gutters. That keeps the 6-tool Dock at about 78px per tool, the four playback labels
   intact, and the sentence text at v0.9.10 size. Narrower windows stack vertically. */
@media(min-width:960px){
  body.lesson-wide .lessonview{display:grid!important;grid-template-columns:minmax(480px,55fr) 12px minmax(400px,45fr)!important;row-gap:0;gap:0;align-items:stretch}
  body.lesson-wide .splitter{display:block}
  body.lesson-wide .sentcol{height:auto;min-height:0}
  body.live-viewport{height:100dvh;overflow:hidden}
  body.live-viewport main,body.live-viewport #app{height:100dvh;overflow:hidden;padding:58px 0 0}
  body.live-viewport #app{padding-top:58px}
  body.live-viewport .roomtop{height:58px;padding:0 12px}
  body.live-viewport .lessonview{height:calc(100dvh - 58px);padding:8px 10px;max-width:1920px}
  body.live-viewport .videocol{position:relative;height:100%;gap:16px;overflow:hidden;padding:0;justify-content:flex-start;container-type:inline-size;container-name:videopane}
  body.live-viewport .videocol .player{flex:0 0 auto;align-self:stretch;margin:auto 0;padding:10px;background:#e9efee;border-color:#c1cecf;max-height:none;box-shadow:none}
  body.live-viewport .videocol>.classcard{position:relative;flex:0 0 78px;min-height:78px;width:100%;max-width:none;margin:0;padding:5px 6px;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;align-items:stretch;border:1px solid #bfcdce;border-radius:12px;background:#d5e0df;box-shadow:none;z-index:20}
  body.live-viewport .videocol>.classcard>.ctrlspacer{display:none}
  body.live-viewport .videocol>.classcard>button{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;min-height:64px;width:100%;max-width:none;margin:0;padding:3px 2px;order:0;border:0;border-radius:8px;background:transparent;box-shadow:none;white-space:nowrap;color:#203047;font-size:12px}
  body.live-viewport .videocol>.classcard>button:hover{background:#e7efed}
  body.live-viewport .videocol>.classcard>button[aria-expanded=true],body.live-viewport .videocol>.classcard>button.on{background:#e1f0eb;color:#087f7a}
  body.live-viewport .videocol>.classcard>button .toolicon{display:block;color:inherit;font-size:21px;line-height:24px;order:0}
  body.live-viewport .videocol>.classcard>button b{font-size:12px;line-height:18px;order:1;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  body.live-viewport .videocol>.classcard>button .toollabel{display:block;color:#4f6473;font-size:11px;line-height:16px;order:2}
  body.live-viewport .videocol>.classcard>button i{display:none}
  body.live-viewport .sentcol{height:100%;min-height:0}
  body.live-viewport .sents{max-height:none;overflow:auto}
  body.live-viewport .rt-title{display:block}
  /* The original creation screen keeps its working layout; these narrower columns can scroll settings. */
  body.lesson-wide:not(.live-viewport) .player>.classcard{flex-wrap:wrap}
}
@container videopane (max-width:390px){
  body.live-viewport .videocol>.classcard{padding-inline:3px}
  body.live-viewport .videocol>.classcard>button b{font-size:11px}
  body.live-viewport .videocol>.classcard>button .toollabel{font-size:10px}
}
@media(max-width:759px){
  .lessonview{display:grid;grid-template-columns:1fr!important;gap:14px}
  .splitter{display:none}
  .videocol{display:block;overflow:visible}
  .player>.classcard{display:flex;flex-wrap:wrap;max-width:none;gap:6px}
  .player>.classcard>.ctrlbtn{min-height:44px;flex:1 1 calc(50% - 6px);justify-content:center}
  .player>.classcard>#penBtn,.player>.classcard>#fontBtn{min-height:44px;flex:1 1 calc(50% - 6px)}
  .player>.classcard .ctrlspacer{display:none}
  .sentcol .sents{max-height:none;overflow:visible}
  body.live-viewport .rt-right{gap:4px}
  body.live-viewport .rt-title{font-size:12px}
  body.live-viewport .rt-brand{display:none}
  body.live-viewport .rt-fs .fslbl{display:none}
  .topactions{flex-wrap:wrap}
}
@media(min-width:760px) and (max-width:1000px){
  body.live-viewport .rt-brand{display:none}
  body.live-viewport .rt-fs .fslbl{display:none}
}
@media(prefers-reduced-motion:reduce){.sent{transition:none!important}}

.videoarea{display:contents}
@media(min-width:960px){body.live-viewport .videoarea{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}body.live-viewport .videoarea>.player{margin:auto 0}}
@media(pointer:coarse) and (min-width:960px){body.lesson-wide .splitter{width:44px;min-width:44px}.splitter::before{left:calc(50% - 1px)}}

.classcard .pen{display:inline-flex;align-items:center;gap:5px}
/* Desktop focus uses the measured YouTube frame centre, never a pane/card/Dock centre. */
body.lesson-wide .sents.focuslist .focuswrap{margin:0;flex:0 0 auto;padding-top:var(--focus-video-top,18px)}
body.lesson-wide .sents.focuslist{overflow-anchor:none}
@media(min-width:1101px){
  body:not(.h2d-viewer):not(.live-viewport) .ltitle h1{flex:0 1 460px;min-width:0;max-width:none}
  body:not(.h2d-viewer):not(.live-viewport) .ltitle .topactions{position:static;transform:none;flex:0 0 auto;margin-left:auto;order:5}
  body:not(.h2d-viewer):not(.live-viewport) .ltitle .lmorebtn{order:6;margin-left:0}
}

  /* classroom window: bigger touch targets, nothing of the production tool */
  body.h2d-viewer .top{height:58px;justify-content:flex-start;gap:10px;padding:0 14px}
  body.h2d-viewer .top .brand{pointer-events:none}
  body.h2d-viewer .h2d-back{margin-right:2px}
  @media(max-width:900px){
    body.h2d-viewer .top{height:calc(76px + env(safe-area-inset-top,0px));padding:calc(16px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 12px max(12px,env(safe-area-inset-left,0px))}
    body.h2d-viewer .h2d-back{width:44px;height:44px;flex-basis:44px}
    body.h2d-viewer .top .brand{font-size:16px;line-height:1.35}
    body.h2d-viewer .top .ver{display:block;margin-left:0}
  }


/* Vocal⁺ Lab. theme. Layout remains the HHD viewer layout. */
:root{--bg:#f5f6ef;--ink:#172d29;--brand:#1f3047;--accent:#285c50;--hl:#e5eee1;--line:#d2dace}
.topactions .topfs,.rt-fs{background:#285c50;border-color:#285c50}
.topactions .topfs:hover,.rt-fs:hover{background:#204a40;border-color:#204a40}
.sent.cur{border-color:var(--accent)}
.sent[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vbook audio{display:block;width:100%;margin-top:8px}
#errbox .error-actions{margin-top:6px}
.top .h2d-back[hidden]{display:none}

/* Wrap the HHD pen toolbar into its reserved slot on narrow phones. */
.videoink{width:auto}
#penBtn,.pentools button{touch-action:manipulation}
@media(max-width:520px){
  .penslot{height:auto;flex-basis:auto}
  .pentools{position:static;flex-wrap:wrap}
  .pentools .btn.small,.pentools .seg button{min-height:36px}
}