:root{--cream:#FFF3DC;--navy:#26305C;--gold:#D9A21B;--paper:#FFFBF1;--line:#E4D3AC;--ok:#1B6B3A;--bad:#A12B2B;--mute:#4A5278}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);font:16px/1.6 system-ui,-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:var(--cream);padding:8px 12px;z-index:9}
.skip:focus{left:8px;top:8px}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 5px var(--gold)}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--navy);color:var(--cream);position:sticky;top:0;z-index:5}
.brand{color:var(--cream);text-decoration:none;font-size:15px}
.brand b{color:var(--gold)}
.timer{font-variant-numeric:tabular-nums;font-weight:700;background:var(--cream);color:var(--navy);padding:4px 10px;border-radius:999px;font-size:15px}
.timer .tlabel{font-weight:500;font-size:12px}
.timer.low{background:var(--gold)}
main{max-width:720px;margin:0 auto;padding:14px 14px 28px;outline:none}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px}
h1{font-size:22px;margin:4px 0 8px;line-height:1.3}
h2{font-size:18px;margin:0 0 8px}
h3{font-size:16px;margin:12px 0 6px}
p{margin:0 0 10px}
.small{font-size:13px;color:var(--mute)}
.btn{display:inline-block;min-height:46px;padding:10px 18px;border-radius:12px;border:2px solid var(--navy);background:var(--navy);color:var(--cream);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.sm{min-height:38px;padding:6px 12px;font-size:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.row .btn{flex:1 1 130px}
ul.plain{padding-left:20px;margin:0 0 10px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.chip{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:13px}
/* nav grid */
.qnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin:0 0 12px}
.qn{min-height:40px;border-radius:10px;border:2px solid var(--line);background:var(--paper);color:var(--navy);font:inherit;font-weight:700;cursor:pointer;position:relative}
.qn.done{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.qn.cur{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold)}
.qn.flag::after{content:"";position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--gold);border:1px solid var(--navy)}
.qn.ok{background:#DDF0E2;border-color:var(--ok);color:var(--ok)}
.qn.bad{background:#F8DCDC;border-color:var(--bad);color:var(--bad)}
.legend{font-size:12px;color:var(--mute);margin:-6px 0 12px}
.passage{white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:10px;padding:12px;font-family:Georgia,"Times New Roman",serif;font-size:15.5px;line-height:1.65;max-height:46vh;overflow:auto;margin-bottom:12px}
.passage .blank{background:var(--gold);color:var(--navy);border-radius:4px;padding:0 4px;font-family:system-ui,sans-serif;font-weight:700}
details.pdet>summary{cursor:pointer;font-weight:700;margin-bottom:8px;min-height:32px}
.stem{font-size:17px;font-weight:600;margin:6px 0 10px;white-space:pre-wrap}
.qmeta{font-size:13px;color:var(--mute);margin-bottom:2px}
.choices{display:grid;gap:8px;margin:0 0 12px}
.choice{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;min-height:50px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--navy);font:inherit;cursor:pointer}
.choice .l{flex:0 0 28px;height:28px;border-radius:50%;background:var(--cream);border:2px solid var(--navy);display:grid;place-items:center;font-weight:700;font-size:14px}
.choice[aria-checked="true"]{border-color:var(--navy);background:#F4E7C2}
.choice[aria-checked="true"] .l{background:var(--navy);color:var(--cream)}
.choice.right{border-color:var(--ok);background:#DDF0E2}
.choice.wrong{border-color:var(--bad);background:#F8DCDC}
.choice[disabled]{cursor:default}
.hint{font-size:12.5px;color:var(--mute)}
kbd{background:var(--paper);border:1px solid var(--navy);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:12px}
.score{font-size:44px;font-weight:800;line-height:1.1}
.score small{font-size:20px;font-weight:600}
.bar{height:14px;border-radius:8px;background:#EBDDB8;overflow:hidden;margin:2px 0 8px}
.bar>i{display:block;height:100%;background:var(--navy)}
.stat{display:flex;justify-content:space-between;font-size:14.5px}
.expl{background:var(--cream);border:1px dashed var(--navy);border-radius:10px;padding:10px;margin-top:8px;font-size:15px}
.expl .vl{font-size:13.5px;color:var(--mute)}
.ritem{border-top:1px solid var(--line);padding:10px 0}
.ritem summary{cursor:pointer;min-height:36px}
.tag{display:inline-block;border-radius:6px;padding:0 7px;font-size:12.5px;font-weight:700;margin-right:6px}
.tag.ok{background:#DDF0E2;color:var(--ok)}.tag.bad{background:#F8DCDC;color:var(--bad)}.tag.na{background:#E7E7EE;color:var(--mute)}
canvas{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block;margin:8px 0}
.promo{border-color:var(--gold);border-width:2px}
footer{text-align:center;padding:16px 14px 28px;font-size:14px;border-top:1px solid var(--line);margin-top:10px}
footer p{margin:2px 0}
dialog{border:2px solid var(--navy);border-radius:14px;background:var(--paper);color:var(--navy);max-width:420px;width:calc(100% - 28px);padding:18px}
dialog::backdrop{background:rgba(38,48,92,.55)}
@media (min-width:600px){.choice{padding:12px 14px}.passage{max-height:55vh}}
@media (prefers-reduced-motion:no-preference){.bar>i{transition:width .5s}}
footer .links p{margin:2px 0}