:root{
  --bg:#F4F7FA; --card:#FFFFFF; --soft:#EEF3F8; --edge:#D8E2EC; --edge2:#E8EEF4;
  --ink:#16202B; --ink2:#4A5A6A; --ink3:#8194A6;
  --D:#1F5FA8; --Dbg:#E6EFF9; --M:#17795A; --Mbg:#E2F2EC;
  --S:#BE5124; --Sbg:#FBEDE5; --B:#6A46A6; --Bbg:#EFE9F8;
  --gold:#B07A12; --goldbg:#FBF2DE;
  --sans:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Roboto Mono',ui-monospace,Menlo,Consolas,monospace;
  --cw:44px; --rail:246px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101822; --card:#18222E; --soft:#1E2A38; --edge:#2C3B4C; --edge2:#243141;
    --ink:#E8EFF5; --ink2:#A8BACB; --ink3:#75899C;
    --D:#79B4EE; --Dbg:#16283D; --M:#6ED3AC; --Mbg:#123027;
    --S:#F0A077; --Sbg:#33211A; --B:#B79BEA; --Bbg:#241C38;
    --gold:#E0B355; --goldbg:#2C2416;
  }
}
:root[data-theme="dark"]{
  --bg:#101822; --card:#18222E; --soft:#1E2A38; --edge:#2C3B4C; --edge2:#243141;
  --ink:#E8EFF5; --ink2:#A8BACB; --ink3:#75899C;
  --D:#79B4EE; --Dbg:#16283D; --M:#6ED3AC; --Mbg:#123027;
  --S:#F0A077; --Sbg:#33211A; --B:#B79BEA; --Bbg:#241C38;
  --gold:#E0B355; --goldbg:#2C2416;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
input,textarea{background-color:var(--soft);color:var(--ink);color-scheme:light dark}
a{color:inherit}
.shell{display:flex;align-items:flex-start;min-height:100vh}

/* rail */
.rail{width:var(--rail);flex:0 0 var(--rail);background:var(--card);border-right:1px solid var(--edge);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{padding:18px 18px 15px;border-bottom:1px solid var(--edge);cursor:pointer}
.brand b{display:block;font-size:18.5px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.brand b i{font-style:normal;color:var(--D)}
.brand span{font-size:11px;color:var(--ink3);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.menu{overflow-y:auto;flex:1;padding:8px 0 22px}
.mg{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);font-weight:800;
  padding:14px 18px 5px}
.mi{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:7px 18px;
  border-left:3px solid transparent;font-size:13.8px;line-height:1.4;color:var(--ink2)}
.mi:hover{background:var(--soft)}
.mi.on{background:var(--Dbg);border-left-color:var(--D);color:var(--D);font-weight:700}
.railtop{display:none}

/* main */
.main{flex:1;min-width:0;padding:28px 32px 64px;max-width:1040px}
.crumb{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);font-weight:800}
h1{font-size:clamp(26px,4.4vw,38px);font-weight:800;letter-spacing:-.028em;margin:8px 0 7px;line-height:1.12;
  text-wrap:balance}
h1 em{font-style:normal;color:var(--D)}
.tag{color:var(--ink2);font-size:16px;margin:0;max-width:60ch}

/* problem bar */
.bar{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:15px 17px;margin-top:20px;
  display:flex;flex-wrap:wrap;gap:13px;align-items:flex-end}
.ff label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:5px}
.ff input{width:140px;background:var(--soft);border:2px solid var(--edge);border-radius:9px;padding:8px 11px;
  font-family:var(--mono);font-size:18px;font-weight:500;outline:none;text-align:center}
.ff input:focus{border-color:var(--D);background:var(--card)}
.opsym{font-family:var(--mono);font-size:25px;color:var(--ink3);padding-bottom:7px}
.modewrap{margin-left:auto}
.seg{display:flex;border:2px solid var(--edge);border-radius:9px;overflow:hidden;background:var(--soft)}
.seg button{border:0;background:transparent;padding:8px 14px;cursor:pointer;font-size:13.5px;font-weight:700;
  color:var(--ink2);white-space:nowrap}
.seg button.on{background:var(--D);color:#fff}
:root[data-theme="dark"] .seg button.on{color:#101822}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg button.on{color:#101822}}
.egs{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;align-items:center}
.egs>span{font-size:11.5px;color:var(--ink3);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.egs button{border:1px solid var(--edge);background:var(--card);border-radius:20px;padding:5px 13px;cursor:pointer;
  font-family:var(--mono);font-size:13px}
.egs button:hover{border-color:var(--D);color:var(--D)}

.split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:17px;margin-top:17px;align-items:start}
@media(max-width:900px){ .split{grid-template-columns:1fr} }
.panel{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:19px}
.ptitle{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin:0 0 13px}

/* board */
.board{overflow-x:auto;padding:6px 2px 2px}
.dgrid{display:grid;font-family:var(--mono);font-size:26px;font-weight:500;width:max-content;margin:0 auto}
.cell{width:var(--cw);height:46px;display:flex;align-items:center;justify-content:center;position:relative}
.cell.lead{width:auto;min-width:46px;padding-right:5px;justify-content:flex-end}
.cell.brk{width:26px;font-size:32px;color:var(--ink2)}
.cell.rule{border-top:2.5px solid var(--ink2)}
.cell.obar{border-bottom:2.5px solid var(--ink2)}
.cell .g{opacity:0;transform:translateY(-7px) scale(.82);transition:opacity .2s ease,transform .2s ease}
.cell.show .g{opacity:1;transform:none}
.cell.qz .g{color:var(--D);font-weight:700}
.cell.sm{height:26px;font-size:15px;font-weight:700}
.cell.sm .g{color:var(--S)}
.cell.carry .g{color:var(--S)}
.cell.focus{background:var(--goldbg);border-radius:8px;box-shadow:inset 0 0 0 2px var(--gold)}
.cell.hit{border-radius:8px;background-clip:padding-box}
.cell.hit.tD{background:var(--D)} .cell.hit.tM{background:var(--M)}
.cell.hit.tS{background:var(--S)} .cell.hit.tB{background:var(--B)}
.cell.hit .g,.cell.hit.qz .g,.cell.hit.carry .g{color:#fff}
:root[data-theme="dark"] .cell.hit .g,:root[data-theme="dark"] .cell.hit.qz .g,
:root[data-theme="dark"] .cell.hit.carry .g{color:#101822}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cell.hit .g,
  :root:not([data-theme="light"]) .cell.hit.qz .g,
  :root:not([data-theme="light"]) .cell.hit.carry .g{color:#101822}
}
.cell .strike{position:absolute;left:14%;right:14%;top:52%;height:2.5px;background:var(--S);border-radius:2px}
.cell .over{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:14px;font-weight:700;
  color:var(--S);white-space:nowrap;background:var(--card);padding:0 2px;border-radius:3px}
.arrow{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:18px;color:var(--B);
  animation:drop .5s ease}
@keyframes drop{from{opacity:0;transform:translate(-50%,-11px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){ .cell .g{transition:none} .arrow{animation:none} }

/* box (area model) */
.boxwrap{display:flex;justify-content:center;padding:10px 0}
.abox{display:grid;gap:3px;font-family:var(--mono)}
.abox .h{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--ink3);
  height:34px}
.abox .c{background:var(--soft);border:1.5px solid var(--edge);border-radius:8px;width:104px;height:68px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.abox .c small{font-size:11.5px;color:var(--ink3);font-weight:500;font-family:var(--sans)}
.abox .c.lit{background:var(--Mbg);border-color:var(--M);color:var(--M)}
.abox .c.dim{opacity:.32}

/* voice */
.vc{display:flex;align-items:center;gap:7px;margin-left:auto;flex-wrap:wrap}
.spk{border:1px solid var(--edge);background:var(--soft);border-radius:9px;padding:9px 13px;cursor:pointer;
  font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.spk:hover{border-color:var(--D);color:var(--D)}
.spk.on{background:var(--M);color:#fff;border-color:transparent}
:root[data-theme="dark"] .spk.on{color:#101822}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spk.on{color:#101822}}
.rate{display:flex;border:1px solid var(--edge);border-radius:9px;overflow:hidden;background:var(--soft)}
.rate button{border:0;background:transparent;padding:9px 9px;cursor:pointer;font-size:12.5px;font-weight:700;
  color:var(--ink3);font-family:var(--mono)}
.rate button.on{background:var(--D);color:#fff}
:root[data-theme="dark"] .rate button.on{color:#101822}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rate button.on{color:#101822}}
.say.reading{position:relative;padding-left:17px}
.say.reading::before{content:'';position:absolute;left:0;top:6px;bottom:4px;width:4px;border-radius:3px;
  background:var(--M);animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .say.reading::before{animation:none;opacity:.8} }
.vnote{font-size:12px;color:var(--ink3);margin-top:9px}
.ctrl.vrow{margin-top:10px;padding-top:11px;border-top:1px solid var(--edge2)}
.ctrl.vrow .prog{margin-left:auto}
.spk[disabled]{opacity:.45;cursor:default}
.spk .ic{font-size:16px;line-height:1}
.spk.on .ic{animation:pulse 1.2s ease-in-out infinite}
.rate{display:none}
.vc.live .rate{display:flex}
@media (prefers-reduced-motion:reduce){ .spk.on .ic{animation:none} }
@media(max-width:430px){ .spk .lb{display:none} .spk{padding:9px 13px} }

/* measurement: stairs, shapes, hops, tables */
.mx-stairs{display:flex;justify-content:center;gap:4px;padding:16px 0 8px;flex-wrap:wrap}
.mx-st{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px}
.mx-st .bx{width:50px;height:44px;border:2px solid var(--edge);border-radius:9px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;font-weight:700}
.mx-st .cap{font-size:10.5px;color:var(--ink3);font-weight:700}
.mx-st.from .bx{background:var(--Dbg);border-color:var(--D);color:var(--D)}
.mx-st.to .bx{background:var(--Mbg);border-color:var(--M);color:var(--M)}
.mx-st.path .bx{border-color:var(--gold);background:var(--goldbg);color:var(--gold)}
.mx-move{text-align:center;font-family:var(--sans);font-size:14px;color:var(--ink2);margin-top:10px}
.mx-move b{color:var(--D)}
.mx-shape{display:flex;justify-content:center;padding:8px 0}
.mx-shape svg{max-width:100%;height:auto}
.mx-lab{font-family:var(--mono);font-size:13px}
.mx-hops{padding:16px 0;overflow-x:auto}
.mx-hops svg{display:block;margin:0 auto;max-width:100%;height:auto}
.mx-tbl{display:flex;justify-content:center;padding:8px 0;overflow-x:auto}
.mx-tbl table{border-collapse:collapse;font-family:var(--mono);font-size:17px}
.mx-tbl th,.mx-tbl td{border:1.5px solid var(--edge);padding:9px 15px;text-align:center;min-width:60px}
.mx-tbl th{background:var(--soft);font-size:12px;font-weight:700;color:var(--ink3);letter-spacing:.05em;
  font-family:var(--sans);text-transform:uppercase}
.mx-tbl td.lit{background:var(--Mbg);color:var(--M);font-weight:700}
.mx-tbl td.dim{color:var(--ink3);opacity:.4}
.mx-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:8px 0}
.mx-chip{font-family:var(--mono);font-size:16px;background:var(--soft);border:1.5px solid var(--edge);
  border-radius:8px;padding:6px 12px}
.mx-chip.lit{background:var(--Dbg);border-color:var(--D);color:var(--D);font-weight:700}
.mx-chip.mid{background:var(--Mbg);border-color:var(--M);color:var(--M);font-weight:700}

/* expressions + number line */
.ex-wrap{display:flex;flex-direction:column;gap:9px;align-items:center;padding:10px 0}
.ex-l{font-family:var(--mono);font-size:clamp(19px,3.4vw,26px);font-weight:500;text-align:center;
  word-break:break-word;line-height:1.4}
.ex-l.new{animation:pop .3s ease}
.ex-l mark{background:var(--goldbg);color:var(--gold);border-radius:6px;padding:1px 6px;font-weight:700}
.ex-l mark.g{background:var(--Mbg);color:var(--M)}
.ex-l mark.b{background:var(--Dbg);color:var(--D)}
.ex-n{font-family:var(--sans);font-size:12.8px;color:var(--ink3);margin-top:-3px;text-align:center}
.ex-side{font-family:var(--sans);font-size:12.5px;color:var(--S);font-weight:700}
.nl-wrap{padding:14px 0;overflow-x:auto}
.nl-wrap svg{display:block;margin:0 auto;max-width:100%;height:auto}
.nl-t{font-family:var(--mono);font-size:12px}
.nl-lbl{font-family:var(--mono);font-size:15px;font-weight:700}

/* factors: tree, ladder, checks, pairs */
.fx-tree{display:flex;justify-content:center;padding:6px 0}
.fx-tree svg{max-width:100%;height:auto}
.fx-node{font-family:var(--mono);font-size:17px;font-weight:600}
.fx-ladder{display:flex;justify-content:center;padding:8px 0}
.fx-lad{font-family:var(--mono);font-size:23px;border-collapse:collapse}
.fx-lad td{padding:7px 16px;text-align:center;min-width:64px}
.fx-lad td.dv{border-right:2.5px solid var(--ink2);color:var(--S);font-weight:700;text-align:right;
  min-width:52px}
.fx-lad tr.hot td{background:var(--goldbg)}
.fx-lad tr.last td{border-top:2.5px solid var(--ink2)}
.fx-lad td.q{color:var(--ink3)}
.fx-sum{text-align:center;font-family:var(--mono);font-size:17px;margin-top:14px;color:var(--M);font-weight:700}
.fx-checks{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.fx-chk{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:9px;background:var(--soft);
  border:1.5px solid var(--edge)}
.fx-chk .num{font-family:var(--mono);font-size:18px;font-weight:700;min-width:30px}
.fx-chk .why{font-size:13.2px;color:var(--ink2);flex:1}
.fx-chk .res{font-size:13px;font-weight:800;letter-spacing:.03em}
.fx-chk.yes{background:var(--Mbg);border-color:var(--M)} .fx-chk.yes .num,.fx-chk.yes .res{color:var(--M)}
.fx-chk.no{background:var(--Sbg);border-color:transparent;opacity:.75} .fx-chk.no .res{color:var(--S)}
.fx-chk.wait{opacity:.35}
.fx-pairs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px 0}
.fx-pair{font-family:var(--mono);font-size:17px;background:var(--soft);border:1.5px solid var(--edge);
  border-radius:9px;padding:8px 14px}
.fx-pair.new{background:var(--Mbg);border-color:var(--M);color:var(--M);font-weight:700}
.fx-try{text-align:center;font-family:var(--mono);font-size:15px;color:var(--ink3);margin-top:10px}

/* fraction inputs */
.finp{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.finp input{width:82px;padding:6px 8px;font-size:17px;font-family:var(--mono);font-weight:500;
  text-align:center;background:var(--soft);color:var(--ink);border:2px solid var(--edge);
  border-radius:9px;outline:none}
.finp input:focus{border-color:var(--D);background:var(--card)}
.finp .fbar{height:2.5px;width:74px;background:var(--ink2);border-radius:2px}
.minp{display:inline-flex;align-items:center;gap:8px}
.minp>input{width:58px;background:var(--soft);border:2px solid var(--edge);border-radius:9px;padding:8px 10px;
  font-family:var(--mono);font-size:18px;font-weight:500;outline:none;text-align:center}
.minp>input:focus{border-color:var(--D);background:var(--card)}
#opsym{cursor:default}

/* fraction chain */
.chain{display:flex;flex-direction:column;gap:11px;align-items:center;padding:8px 0;font-family:var(--mono)}
.cl{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:500}
.cl.new{animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .cl.new{animation:none} }
.fr{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05}
.fr .n,.fr .d{padding:0 5px;white-space:nowrap}
.fr .frb{display:block;height:2.5px;padding:0;background:currentColor;align-self:stretch;min-width:28px;
  margin:3px 0;border-radius:2px}
.fr.hl,.it.hl,.mx.hl{color:var(--D)}
.fr.hl2,.it.hl2{color:var(--M)}
.fr s,.it s{text-decoration:line-through;text-decoration-color:var(--S);text-decoration-thickness:2px;opacity:.5}
.fr u,.it u{text-decoration:none;color:var(--M);font-size:.74em;margin-left:2px;vertical-align:super}
.op2{font-size:24px;color:var(--ink3);padding:0 1px}
.mx{display:inline-flex;align-items:center;gap:6px}
.mx .wh{font-size:26px}
.it{font-size:26px}
.clnote{font-family:var(--sans);font-size:12.8px;color:var(--ink3);margin-top:-4px}
/* multiples ladder + bars */
.mrow{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:7px}
.mrow .lb{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink3);min-width:96px}
.mrow span.v{font-family:var(--mono);font-size:14px;background:var(--soft);border-radius:6px;padding:3px 9px}
.mrow span.v.hit2{background:var(--Dbg);color:var(--D);font-weight:700;box-shadow:inset 0 0 0 2px var(--D)}
.bars{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.barrow{display:flex;align-items:center;gap:9px}
.barrow .lb{font-family:var(--mono);font-size:13.5px;min-width:52px;text-align:right;color:var(--ink2)}
.bar2{display:flex;flex:1;height:24px;border:1.5px solid var(--edge);border-radius:6px;overflow:hidden;
  background:var(--soft)}
.bar2 i{flex:1;border-right:1px solid var(--edge)}
.bar2 i:last-child{border-right:0}
.bar2 i.on{background:var(--D)}
.bar2.g i.on{background:var(--M)}

/* decimal shift */
.shiftbox{padding:16px 0;text-align:center}
.shiftrow{display:inline-flex;align-items:flex-end;font-family:var(--mono);font-size:34px;font-weight:500}
.shiftrow .dg{width:32px;text-align:center}
.shiftrow .pt{width:15px;text-align:center;color:var(--ink3);position:relative}
.shiftrow .pt.on{color:var(--D);font-weight:700;transform:scale(1.5)}
.shiftrow .pt.ghost{color:var(--ink3);opacity:.32}
.shiftval{margin-top:16px;font-family:var(--mono);font-size:20px;font-weight:700;color:var(--D)}



/* 독일식 나눗셈 — 한 줄에 쓰고 아래로 뺀다 */
.de-div{font-family:var(--mono);font-size:clamp(18px,3.4vw,26px);padding:10px 2px;
  width:max-content;margin:0 auto;min-width:min(100%,260px)}
.de-head{white-space:nowrap;margin-bottom:6px}
.de-head b{color:var(--D)}
.de-row{display:flex;gap:0;white-space:nowrap;line-height:1.5}
.de-ind{display:inline-block}
.de-row.sub{color:var(--S)}
.de-row.rule{border-top:2.5px solid var(--ink2);padding-top:2px;margin-top:1px}
.de-row.dim{opacity:.3}
.de-row.now{background:var(--goldbg);border-radius:6px}
.de-rest{margin-top:9px;font-size:.82em;color:var(--M);font-weight:700}
/* 프랑스식 포탄스(potence): 피제수는 왼쪽 위, 제수는 세로선 오른쪽 위,
   몫은 제수 밑에 가로선을 긋고 그 아래에 쓴다. 미국식과 위아래가 반대다. */
.fr-div{display:flex;align-items:flex-start;justify-content:center;width:max-content;margin:0 auto}
.fr-body{display:grid;font-family:var(--mono);font-size:26px;font-weight:500}
.fr-side{align-self:stretch;border-left:2.5px solid var(--ink2);
  padding-left:10px;margin-left:4px;font-family:var(--mono);font-size:26px;font-weight:500}
.fr-srow{display:flex}
/* 몫은 왼쪽 격자와 자리를 맞출 필요가 없으므로 촘촘하게 — 프랑스 공책 그대로 */
.fr-side .cell{width:30px}
.fr-side .fr-dvs{width:auto;min-width:30px;padding:0 2px}
.fr-qbar{border-top:2.5px solid var(--ink2);margin:1px 0 0}
.fr-rest{margin-top:9px;font-size:.82em;color:var(--M);font-weight:700;text-align:center}
/* 구구단 묶음 */
.gg-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 0}
.gg-groups{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:100%}
.gg-g{border:2px dashed var(--edge);border-radius:12px;padding:9px;display:grid;gap:5px;
  background:var(--soft)}
.gg-g.lit{border-color:var(--D);border-style:solid;background:var(--Dbg)}
.gg-d{width:15px;height:15px;border-radius:50%;background:var(--ink3)}
.gg-g.lit .gg-d{background:var(--D)}
.gg-cap{font-family:var(--sans);font-size:12.5px;color:var(--ink3);font-weight:700;text-align:center}
.gg-chant{font-family:var(--sans);font-size:clamp(21px,4.2vw,30px);font-weight:800;color:var(--D);
  letter-spacing:.02em;text-align:center}
.gg-eq{font-family:var(--mono);font-size:clamp(19px,3.6vw,26px);text-align:center}
.gg-eq b{color:var(--M)}
.gg-tbl{display:grid;grid-template-columns:repeat(3,auto);gap:5px 16px;justify-content:center;
  font-family:var(--mono);font-size:15px}
.gg-tbl span{padding:3px 8px;border-radius:6px}
.gg-tbl span.now{background:var(--Dbg);color:var(--D);font-weight:700}
.gg-tbl span.past{color:var(--ink3)}
.gg-tbl span.soon{opacity:.28}
/* 수의 범위 */
.rg-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px 0}
.rg-n{font-family:var(--mono);font-size:16px;border:1.5px solid var(--edge);border-radius:8px;
  padding:5px 11px;background:var(--soft);color:var(--ink3)}
.rg-n.in{background:var(--Mbg);border-color:var(--M);color:var(--M);font-weight:700}
.rg-n.out{opacity:.35;text-decoration:line-through;text-decoration-color:var(--S)}
/* controls */
.ctrl{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.ctrl button{border:1px solid var(--edge);background:var(--soft);border-radius:9px;padding:9px 14px;cursor:pointer;
  font-weight:700;font-size:14px}
.ctrl button:hover:not(:disabled){border-color:var(--D);color:var(--D)}
.ctrl button:disabled{opacity:.38;cursor:default}
.ctrl button.play{background:var(--D);color:#fff;border-color:transparent;min-width:100px}
:root[data-theme="dark"] .ctrl button.play{color:#101822}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ctrl button.play{color:#101822}}
.prog{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink3);white-space:nowrap}
.track{height:5px;background:var(--edge2);border-radius:3px;margin-top:12px;overflow:hidden}
.track i{display:block;height:100%;background:var(--D);border-radius:3px;transition:width .24s ease}

/* explain */
.phases{display:flex;gap:6px;margin-bottom:13px}
.phases div{flex:1;text-align:center;border-radius:9px;padding:7px 3px;border:1.5px solid var(--edge);
  background:var(--soft);opacity:.42;transition:opacity .2s}
.phases div b{display:block;font-size:17px;font-weight:800;line-height:1.15}
.phases div span{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3)}
.phases div.on{opacity:1}
.phases div.on.tD{background:var(--Dbg);border-color:var(--D)} .phases div.on.tD b{color:var(--D)}
.phases div.on.tM{background:var(--Mbg);border-color:var(--M)} .phases div.on.tM b{color:var(--M)}
.phases div.on.tS{background:var(--Sbg);border-color:var(--S)} .phases div.on.tS b{color:var(--S)}
.phases div.on.tB{background:var(--Bbg);border-color:var(--B)} .phases div.on.tB b{color:var(--B)}
.say{font-size:18.5px;font-weight:700;line-height:1.42;margin:0 0 4px;letter-spacing:-.01em;text-wrap:balance}
.sub{font-size:14.5px;color:var(--ink2);margin:0}
.sub code,.say code{font-family:var(--mono);background:var(--soft);padding:1px 6px;border-radius:5px;font-size:.9em}
.aux{margin-top:15px;border-top:1px solid var(--edge2);padding-top:13px}
.auxhd{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-bottom:8px}
.lad{display:flex;flex-direction:column;gap:3px}
.lad div{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14.5px;padding:5px 10px;
  border-radius:7px;background:var(--soft)}
.lad div .t{margin-left:auto;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink3)}
.lad div.pick{background:var(--Dbg);color:var(--D);font-weight:700;box-shadow:inset 0 0 0 2px var(--D)}
.lad div.pick .t{color:var(--D)}
.lad div.over2{color:var(--S);text-decoration:line-through;text-decoration-thickness:2px;opacity:.82}
.lad div.over2 .t{color:var(--S);text-decoration:none;display:inline-block}

/* answer */
.ans{margin-top:17px;background:var(--card);border:1px solid var(--edge);border-radius:14px;overflow:hidden}
.ansTop{background:var(--M);padding:19px;color:#fff}
:root[data-theme="dark"] .ansTop{background:var(--Mbg);border-bottom:1px solid var(--edge)}
:root[data-theme="dark"] .ansTop *{color:var(--M)!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ansTop{background:var(--Mbg);border-bottom:1px solid var(--edge)}
  :root:not([data-theme="light"]) .ansTop *{color:var(--M)!important}
}
.ansTop .l{font-size:11.5px;letter-spacing:.09em;font-weight:800;opacity:.85}
.ansTop .v{font-family:var(--mono);font-size:clamp(26px,5vw,38px);font-weight:700;letter-spacing:-.02em;
  margin-top:2px;word-break:break-word}
.ansRows{padding:5px 19px 13px}
.arow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--edge2);
  align-items:baseline}
.arow:last-child{border-bottom:0}
.arow .l{font-size:13.8px;color:var(--ink2)}
.arow .v{font-family:var(--mono);font-size:14.5px;font-weight:500;text-align:right}
.arow.chk .v{color:var(--M);font-weight:700}
.cta{display:block;margin-top:16px;background:var(--Dbg);border:1.5px solid var(--D);border-radius:12px;
  padding:15px 17px;text-decoration:none}
.cta:hover{background:var(--card)}
.cta b{display:block;color:var(--D);font-size:16px;font-weight:800}
.cta span{font-size:13.5px;color:var(--ink2)}
.err{background:var(--Sbg);border:1px solid var(--S);color:var(--S);border-radius:10px;padding:11px 14px;
  font-size:14.5px;font-weight:700;margin-top:13px}
.pn{display:flex;gap:11px;margin-top:24px}
.pn a{flex:1;text-decoration:none;background:var(--card);border:1px solid var(--edge);border-radius:11px;
  padding:12px 15px}
.pn a:hover{border-color:var(--D)}
.pn a span{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);font-weight:800}
.pn a b{font-size:13.8px;font-weight:700}
.pn a.nx{text-align:right}

/* home */
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;margin-top:14px}
.hcards a{text-decoration:none;background:var(--card);border:1px solid var(--edge);border-radius:12px;
  padding:15px 16px;display:block}
.hcards a:hover{border-color:var(--D)}
.hcards .nm{font-weight:800;font-size:15.5px;letter-spacing:-.015em}
.hcards .gr{font-size:11.5px;color:var(--ink3);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:3px}
.hcards .bb{font-size:13px;color:var(--ink2);line-height:1.5;margin-top:4px}
.sect{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin:30px 0 0}
.soon{background:var(--card);border:1px dashed var(--edge);border-radius:12px;padding:17px 19px;margin-top:13px}
.soon p{margin:0 0 9px;font-size:13.8px;color:var(--ink2)}
.soon ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.soon li{font-size:12.8px;color:var(--ink3);background:var(--soft);border-radius:16px;padding:4px 11px}
footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--edge);font-size:12.5px;color:var(--ink3)}

@media(max-width:780px){
  .shell{display:block}
  .rail{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--edge)}
  .railtop{display:flex;padding:0 14px 12px}
  .menu{max-height:0;overflow:hidden;padding:0}
  .menu.open{max-height:none;overflow-y:auto;padding:8px 0 16px;border-top:1px solid var(--edge)}
  .mtog{border:1px solid var(--edge);background:var(--soft);border-radius:8px;padding:7px 13px;cursor:pointer;
    font-size:13px;font-weight:700}
  .main{padding:20px 16px 56px}
  :root{--cw:34px}
  .dgrid{font-size:21px} .cell{height:38px} .cell.brk{font-size:26px;width:20px}
  .abox .c{width:76px;height:58px;font-size:16px}
  .modewrap{margin-left:0;width:100%}
}

/* ── overflow containment ── */
.split{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.panel{min-width:0;overflow:hidden}
.board{max-width:100%}
.bar{max-width:100%}
.ff{min-width:0;max-width:100%}
.seg{flex-wrap:wrap;max-width:100%}
.seg button{flex:1 1 auto;min-width:44px}
.modewrap{max-width:100%}
.mx-tbl,.fx-ladder,.boxwrap,.mx-shape,.mx-stairs{max-width:100%;overflow-x:auto}
.chain,.ex-wrap{max-width:100%;overflow-x:auto}
.ex-l{max-width:100%}
.dgrid{max-width:none}
.egs button{max-width:100%;overflow-wrap:anywhere}
@media(max-width:900px){ .split{grid-template-columns:minmax(0,1fr)} }
@media(max-width:430px){
  :root{--cw:30px}
  .dgrid{font-size:19px} .cell{height:34px} .cell.brk{font-size:23px;width:18px}
  .cl{font-size:21px} .finp input{width:66px} .finp .fbar{width:60px}
  .mx-st{min-width:42px} .mx-st .bx{width:40px;height:38px;font-size:13px}
  .ff input{width:100%;min-width:0}
  .ff{flex:1 1 140px}
  .seg button{padding:8px 9px;font-size:12.5px}
  .mx-tbl th,.mx-tbl td{padding:7px 9px;min-width:44px;font-size:14px}
  .fx-lad{font-size:19px} .fx-lad td{padding:6px 10px;min-width:48px}
}
@media(max-width:375px){
  :root{--cw:27px}
  .dgrid{font-size:17px} .cell{height:31px}
  .mx-chip{font-size:14px;padding:5px 9px}
}

/* ── consumer-facing polish ── */
.err.wait{background:var(--soft);border-color:var(--edge);color:var(--ink2);font-weight:600}
:where(button,input,select,a,[tabindex]):focus-visible{
  outline:3px solid var(--D);outline-offset:2px;border-radius:8px}
.srch{padding:10px 14px;border-bottom:1px solid var(--edge)}
.srch input{width:100%;background:var(--soft);border:1px solid var(--edge);border-radius:8px;
  padding:8px 11px;font-size:13.5px;outline:none;color:var(--ink)}
.srch input:focus{border-color:var(--D);box-shadow:0 0 0 3px var(--Dbg)}
.mnone{padding:14px 18px;font-size:13px;color:var(--ink3)}
.lang{display:flex;margin:12px 14px 0;border:1px solid var(--edge);border-radius:9px;overflow:hidden;
  background:var(--soft)}
.lang select{flex:1;border:0;background:transparent;padding:9px 10px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--ink);min-height:40px;outline:none;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),
                   linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 18px, calc(100% - 10px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.lang select:focus-visible{box-shadow:0 0 0 3px var(--Dbg)}
.mg.mgy{color:var(--D);font-size:11.5px;letter-spacing:.08em;border-top:1px solid var(--edge2);
  margin-top:6px;padding-top:13px}
.mu{font-size:11.5px;color:var(--ink3);font-weight:600;padding:5px 18px 2px;letter-spacing:.01em}
@media(max-width:780px){
  .mi{padding:12px 18px;min-height:44px;display:flex;align-items:center}
  .mtog{min-height:44px;padding:10px 15px}
  .ctrl button{min-height:44px}
  .egs button{min-height:44px;padding:8px 14px}
  .seg button{min-height:44px}
}