/* TIENGHANTOPIK — Exam Results + Answer Review (prototype). Uses tokens.css + site.css. Not production.
   Status is never colour-only: every state = icon + text (+ border style in the navigator). Coral stays for the single primary action. */
.page{padding:var(--s-8) 0 var(--s-4)}
.muted{color:var(--text-secondary);font-size:var(--fs-14)}
.pre{white-space:pre-wrap}
.kr{font-family:var(--font-kr)}
.notice{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--state-info-bg);color:#143F70;border-radius:var(--r-md);padding:var(--s-3) var(--s-4);font-size:var(--fs-14);margin:var(--s-4) 0}
.notice b{font-weight:700}
.notice.st-partial{background:var(--state-flag-bg);color:var(--amber-800)}
.illus{display:flex;gap:var(--s-3);align-items:flex-start;border:1px dashed var(--border-strong);background:var(--bg-sunken);color:var(--text-secondary);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);font-size:var(--fs-14);margin:var(--s-4) 0}
.illus svg,.notice svg{margin-top:2px}

/* status chip: icon + text; shape differs by kind via border style */
.rchip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-14);font-weight:700;padding:3px 10px;border-radius:var(--r-pill);border:2px solid var(--border-strong);background:var(--bg-surface);color:var(--text-primary);white-space:normal;overflow-wrap:anywhere}
.rchip.ok{border-color:var(--state-success);background:var(--state-success-bg);color:var(--state-success)}
.rchip.bad{border-color:var(--state-error);background:var(--state-error-bg);color:var(--state-error)}
.rchip.graded{border-color:var(--n-900);color:var(--n-900)}
.rchip.blank{border-style:dashed;color:var(--text-secondary);background:var(--bg-surface)}
.rchip.clock{border-color:var(--state-flag);background:var(--state-flag-bg);color:var(--state-flag)}
.rchip.na{border-style:dashed;color:var(--text-secondary);background:var(--state-disabled-bg)}

/* ---------- Screen A ---------- */
.res-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-2)}
.res-head h1{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem)}
.res-title{font-size:var(--fs-20);font-weight:600;margin:0;overflow-wrap:anywhere}
.res-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center}
.res-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--s-6);align-items:start;margin-top:var(--s-6)}
.total{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-6)}
.total h2{font-size:var(--fs-16);font-weight:700;color:var(--text-secondary);margin:0 0 var(--s-3)}
.tv{margin:0;display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.tv b{font-size:var(--fs-44);line-height:1.1}
.tv span{font-size:var(--fs-20);color:var(--text-secondary);font-weight:600}
.tv-na{display:flex;gap:var(--s-2);align-items:center;margin:0;font-size:var(--fs-20);font-weight:700;color:var(--text-secondary)}
.tv-why{margin:var(--s-3) 0 0;font-size:var(--fs-14);color:var(--text-secondary)}
.total.empty{border-style:dashed;background:var(--state-disabled-bg)}
.sec-h{font-size:var(--fs-20);margin:0 0 var(--s-4)}
.sec-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.xc{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-5)}
.sc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3) var(--s-6);align-items:center}
.sc>.sc-head{grid-column:1/-1;display:flex;justify-content:space-between;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.sc h3{font-size:var(--fs-20)}
.sc-n{grid-column:1/-1;margin:calc(var(--s-2)*-1) 0 0;color:var(--text-secondary);font-size:var(--fs-14)}
.sc-v{margin:0;display:flex;align-items:baseline;gap:6px}
.sc-v b{font-size:var(--fs-32);line-height:1.1}
.sc-v span{color:var(--text-secondary);font-weight:600}
.sc-na{display:flex;gap:var(--s-2);align-items:center;margin:0;color:var(--text-secondary);font-weight:600}
.meter{grid-column:1/-1;height:10px;border-radius:var(--r-pill);background:var(--n-100);border:1px solid var(--border-strong);overflow:hidden}
.meter-fill{display:block;height:100%;background:var(--n-900)}
.cnts{grid-column:1/-1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3)}
.cnt{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--border-strong);border-radius:var(--r-md);padding:4px 10px;font-size:var(--fs-14);font-weight:600;background:var(--bg-surface)}
.cnt b{font-size:var(--fs-18)}
.cnt.ok{border-color:var(--state-success);color:var(--state-success)}
.cnt.bad{border-color:var(--state-error);color:var(--state-error)}
.cnt.blank{border-style:dashed;color:var(--text-secondary)}
.sc .btn{grid-column:1/-1;justify-self:start}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-top:var(--s-8)}
.cta-note{flex-basis:100%;margin:0;color:var(--text-secondary);font-size:var(--fs-14)}
.chide{display:flex;gap:var(--s-2);align-items:center;color:var(--text-secondary);font-size:var(--fs-14);margin:var(--s-4) 0 0}

/* ---------- Screen B ---------- */
.rv-top{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}
.rv-top h1{font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem)}
.back{display:inline-flex;align-items:center;gap:6px;min-height:var(--touch);font-weight:700;color:var(--text-primary)}
.rv-sub{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;margin:var(--s-2) 0 var(--s-4)}
.rv-sub .res-title{font-size:var(--fs-18)}
.how{border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-surface);margin:0 0 var(--s-5)}
.how summary{cursor:pointer;padding:var(--s-3) var(--s-4);font-weight:700;min-height:var(--touch);display:flex;align-items:center}
.how ol{margin:0;padding:0 var(--s-4) var(--s-4) var(--s-8);display:grid;gap:var(--s-2);font-size:var(--fs-14);color:var(--text-secondary)}
.rv{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);gap:var(--s-6);align-items:start}
.navp{position:sticky;top:calc(var(--header-h) + var(--s-4));max-height:calc(100vh - var(--header-h) - 2*var(--s-4));overflow:auto;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-4)}
.navtgl{display:none}
.flt{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4)}
.fbtn{min-height:36px;padding:0 var(--s-3);border-radius:var(--r-pill);border:1px solid var(--border-strong);background:var(--bg-surface);font-weight:600;cursor:pointer}
.fbtn[aria-pressed="true"]{background:var(--n-900);border-color:var(--n-900);color:#fff}
.nsec{margin-bottom:var(--s-4)}
.nsec h3{font-size:var(--fs-14);color:var(--text-secondary);margin:0 0 var(--s-2)}
.cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:var(--s-2)}
.cell{position:relative;height:48px;border-radius:var(--r-md);border:2px solid var(--border-strong);background:var(--bg-surface);font-weight:700;cursor:pointer;color:var(--text-primary);padding:0}
.cell:hover{background:var(--bg-subtle)}
.cell .cn{display:block;line-height:1;margin-top:-6px}
.cell .ci{position:absolute;left:0;right:0;bottom:3px;display:flex;justify-content:center}
.cell .ci svg{width:14px;height:14px}
.cell.ok{border-color:var(--state-success)}.cell.ok .ci{color:var(--state-success)}
.cell.bad{border-color:var(--state-error);background:var(--state-error-bg)}.cell.bad .ci{color:var(--state-error)}
.cell.blank{border-style:dashed}
.cell.graded{border-color:var(--n-900)}
.cell.clock{border-color:var(--state-flag);background:var(--state-flag-bg)}.cell.clock .ci{color:var(--state-flag)}
.cell.cur{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--state-current-ring)}
.cell.ingrp::after{content:"";position:absolute;left:6px;right:6px;bottom:-7px;height:3px;border-radius:2px;background:var(--coral-400)}
.lgd{list-style:none;margin:var(--s-2) 0 0;padding:var(--s-3) 0 0;border-top:1px solid var(--border);display:grid;gap:var(--s-2);font-size:var(--fs-14);color:var(--text-secondary)}
.lgd li{display:flex;gap:var(--s-2);align-items:center}
.dsh{display:inline-block;width:18px;height:0;border-top:2px dashed var(--border-strong)}
.qcol{min-width:0}
.qbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:var(--s-4) 0 0}
.qbar .pos{font-weight:600;color:var(--text-secondary)}
.qbar .btn{min-width:0}
.qbar .btn[disabled]{opacity:1}
.qcard{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-6);margin-top:var(--s-4)}
.qh{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}
.qh h2{font-size:var(--fs-24);display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:baseline}
.qh h2 small{font-size:var(--fs-14);font-weight:600;color:var(--text-secondary)}
.qh h2:focus{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.ins{margin:0 0 var(--s-3);font-weight:500;overflow-wrap:anywhere;word-break:keep-all}
.stem{margin:0 0 var(--s-4);font-size:var(--fs-18);line-height:var(--lh-read-kr);overflow-wrap:anywhere;word-break:keep-all}
.opts{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:var(--s-2)}
.opt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);background:var(--bg-surface)}
.opt .on{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;font-size:15px;flex:none}
.opt .ot{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere;word-break:keep-all;font-size:var(--fs-16);line-height:1.6}
.opt .tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);font-weight:700;padding:2px 9px;border-radius:var(--r-pill);border:2px solid;background:var(--bg-surface);white-space:normal}
.tag.you{border-color:var(--n-900);color:var(--n-900)}
.tag.key{border-color:var(--state-success);color:var(--state-success);background:var(--state-success-bg)}
.opt.sel{border:2px solid var(--n-900);padding:calc(var(--s-3) - 1px) calc(var(--s-4) - 1px)}
.opt.sel .on{background:var(--n-900);border-color:var(--n-900);color:#fff}
.opt.key{border:2px solid var(--state-success);background:var(--state-success-bg);padding:calc(var(--s-3) - 1px) calc(var(--s-4) - 1px)}
.opt.key .on{border-color:var(--state-success);color:var(--state-success)}
.opt.wrong{border:2px solid var(--state-error);background:var(--state-error-bg);padding:calc(var(--s-3) - 1px) calc(var(--s-4) - 1px);text-decoration:none}
.opt.wrong .on{background:var(--state-error);border-color:var(--state-error);color:#fff}
.opt.sel.key .on{background:var(--state-success);border-color:var(--state-success);color:#fff}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--s-3);margin:0 0 var(--s-5)}
.sum>div{border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);background:var(--bg-subtle)}
.sum dt{display:flex;gap:6px;align-items:center;font-size:var(--fs-12);font-weight:700;color:var(--text-secondary);margin:0 0 4px}
.sum dd{margin:0;font-weight:600;overflow-wrap:anywhere;display:flex;gap:6px;align-items:center}
.sum .sr.ok dd{color:var(--state-success)}.sum .sr.bad dd{color:var(--state-error)}.sum .sr.blank dd{color:var(--text-secondary)}.sum .sr.clock dd{color:var(--state-flag)}
.sum .sk{border-color:var(--state-success)}
.sum .sy{border-color:var(--n-900)}
.ctx{position:sticky;top:calc(var(--header-h) + var(--s-2));z-index:5;background:#fff;border:2px solid var(--n-700);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);margin-top:var(--s-4)}
.ctx-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.ctx-b{max-height:min(38vh,360px);overflow:auto;margin-top:var(--s-2)}
.ctx.fold .ctx-b{display:none}
.ctx .ins{font-size:var(--fs-14)}
.pass{margin:0 0 var(--s-2);line-height:var(--lh-read-kr);font-size:var(--fs-16);overflow-wrap:anywhere;word-break:keep-all}
.kn{margin:0;font-size:var(--fs-12);color:var(--text-secondary)}
.aud-note{display:flex;gap:var(--s-2);align-items:center;margin:0 0 var(--s-2);font-weight:600}
.audio{border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-5);background:var(--bg-sunken)}
.ap{display:flex;gap:var(--s-3);align-items:center;color:var(--text-muted)}
.ap .bar{flex:1;height:6px;border-radius:3px;background:var(--n-200)}
.an,.txna{margin:var(--s-2) 0 0;font-size:var(--fs-14);color:var(--text-secondary)}
.txna{display:flex;gap:var(--s-2);align-items:flex-start}
.tx{margin-top:var(--s-3)}
.tx summary{cursor:pointer;font-weight:700;min-height:var(--touch);display:flex;align-items:center}
.tx p{margin:0;line-height:var(--lh-read-kr)}
/* approved layers: each in its own labelled box */
.abox{border:1px solid var(--border-strong);border-radius:var(--r-md);margin:0 0 var(--s-4);background:var(--bg-surface);overflow:hidden}
.abox>header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);align-items:center;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);background:var(--bg-subtle)}
.abox h3{font-size:var(--fs-16)}
.ah{display:inline-flex;gap:var(--s-2);align-items:center}
.aok{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);font-weight:700;color:var(--state-info);border:1px solid var(--state-info);border-radius:var(--r-pill);padding:2px 9px;background:var(--bg-surface)}
.abody{margin:0;padding:var(--s-4);line-height:var(--lh-read-vi);overflow-wrap:anywhere}
.abox.tr{border-left:6px solid var(--n-400)}
.abox.ex{border-left:6px solid var(--state-info)}
.abox.miss{border-style:dashed;background:var(--state-disabled-bg)}
.abox.miss>header{background:transparent}
.mp{display:flex;gap:var(--s-2);align-items:flex-start;margin:0;padding:var(--s-3) var(--s-4);color:var(--text-secondary)}
.alt{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0 var(--s-4) var(--s-3)}
.altb{border-top:1px dashed var(--border-strong);padding:var(--s-3) 0 0}
.altout:not(:empty){padding:0 var(--s-4) var(--s-3)}
.altb .abody{padding:var(--s-2) 0 0}
.gate{background:var(--state-flag-bg);color:var(--amber-800)}
/* writing */
.wbody{margin:0 0 var(--s-4);padding:var(--s-4);border:1px solid var(--border-strong);border-radius:var(--r-md);line-height:var(--lh-read-kr);overflow-wrap:anywhere;word-break:keep-all}
.chartph{border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:var(--s-6);margin:0 0 var(--s-4);text-align:center;color:var(--text-secondary);background:var(--bg-sunken)}
.chartph p{margin:0}
.yours{border-top:1px solid var(--border);padding-top:var(--s-4)}
.yh{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:space-between;align-items:center;margin-bottom:var(--s-3)}
.yh h3{font-size:var(--fs-18)}
.mk{font-size:var(--fs-18);font-weight:700;margin:var(--s-3) 0 var(--s-1)}
.pscroll{overflow-x:auto;max-width:100%;padding:2px;container-type:inline-size}
.pscroll:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sheet{--cell:clamp(15px,calc((100cqw - 6px) / 30),24px);display:grid;grid-template-columns:repeat(30,var(--cell));width:calc(30*var(--cell) + 1px);border-top:1px solid var(--n-400);border-left:1px solid var(--n-400);background:#fff}
.pc{width:var(--cell);height:var(--cell);border-right:1px solid var(--n-400);border-bottom:1px solid var(--n-400);display:grid;place-items:center;font:400 calc(var(--cell) * .68)/1 var(--font-kr);color:var(--n-900);overflow:hidden}
.pcnt{margin:var(--s-2) 0 0;font-size:var(--fs-14);font-weight:600;color:var(--text-secondary)}
.wmsg,.wref{display:flex;gap:var(--s-2);align-items:flex-start;margin:var(--s-3) 0 0;font-size:var(--fs-14)}
.wmsg{font-weight:600}
.wref{color:var(--text-secondary)}

@media (max-width:960px){
  .res-grid{grid-template-columns:1fr}
  .rv{grid-template-columns:1fr}
  .navp{position:static;max-height:none;padding:0;border:0;background:none}
  .navtgl{display:flex;align-items:center;gap:var(--s-2);width:100%;min-height:var(--touch);padding:0 var(--s-4);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-surface);font-weight:700;cursor:pointer;text-align:left}
  .navtgl svg:last-child{margin-left:auto;transition:transform .15s}
  .navp.open .navtgl svg:last-child{transform:rotate(180deg)}
  .navp #navBox{display:none;margin-top:var(--s-3);background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-4)}
  .navp.open #navBox{display:block}
  .qcard{padding:var(--s-4)}
  .ctx{top:var(--header-h);border-radius:var(--r-md)}
  .ctx-b{max-height:28vh}
}
@media (max-width:640px){.sheet{--cell:22px}}
@media (max-width:480px){
  .tv b{font-size:var(--fs-32)}
  .qbar .btn span{font-size:var(--fs-14)}
  .qbar .btn{padding:0 var(--s-3)}
  .total{padding:var(--s-4)}
  .xc{padding:var(--s-4)}
}

.gtr{margin-top:var(--s-4)}
.ctx-h b{min-width:0;overflow-wrap:anywhere}
.ctx-h .btn{flex:none;white-space:nowrap}
@media (max-width:960px){.ctx-b{max-height:24vh}.ctx{padding:var(--s-2) var(--s-3)}}

.notice b{display:block}
.tx summary::after{content:'+';margin-left:var(--s-2);font-weight:700}
.tx[open] summary::after{content:'−'}

.side{display:grid;gap:var(--s-4);position:sticky;top:calc(var(--header-h) + var(--s-4));align-self:start}
.side-cta{margin-top:0;flex-direction:column;align-items:stretch}
.side-cta .btn{width:100%}
@media (max-width:960px){.side{position:static}}
.side-cta .cta-note{flex-basis:auto;overflow-wrap:anywhere}

.how-after{margin:var(--s-6) 0 0}
@media (max-width:960px){
  .rv-top{margin-bottom:var(--s-2)}
  .rv-top h1{font-size:var(--fs-24)}
  .rv-sub{margin:0 0 var(--s-3)}
  .rv-sub .res-title{font-size:var(--fs-16)}
  .illus{font-size:var(--fs-12);padding:var(--s-2) var(--s-3);margin:var(--s-3) 0}
  .bc{margin-bottom:var(--s-2)}
  .page{padding-top:var(--s-4)}
}
.sum .sk.na{border:1px dashed var(--border-strong);background:var(--state-disabled-bg)}
.sum .sk.na dd{color:var(--text-secondary)}