/* K-TOPIK palette: paper, ink, indigo accent, bojagi colours */
:root{--bg:#F7F9F6;--paper:#FFFFFF;--ink:#2F3A36;--soft:#66736E;--line:#DDE5E0;--ind:#2E4C8A;--cel:#9CC3B2;--but:#F3DC8E;--rose:#E9C3CF;--tig:#EFA15E;--ok:#2F7D4F;--okbg:#E6F3EA;--bad:#B5452F;--badbg:#FBEDE8;--tint:#EEF4F1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1C211F;--paper:#252B28;--ink:#EDF1EE;--soft:#A9B5B0;--line:#3A433F;--ind:#9DB6EA;--ok:#8FD3A8;--okbg:#22382B;--bad:#F0A58F;--badbg:#3A2622;--tint:#2E3833;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1C211F;--paper:#252B28;--ink:#EDF1EE;--soft:#A9B5B0;--line:#3A433F;--ind:#9DB6EA;--ok:#8FD3A8;--okbg:#22382B;--bad:#F0A58F;--badbg:#3A2622;--tint:#2E3833;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;font-size:17px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .in{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px}
.brand{font-family:"Gowun Batang",serif;font-weight:700;font-size:17px;white-space:nowrap}
.seg{display:inline-flex;background:var(--tint);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;padding:6px 12px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--ind);color:#fff}
.timer{margin-left:auto;font-variant-numeric:tabular-nums;font-size:15px;color:var(--soft)}
.timer.warn{color:var(--bad);font-weight:700}
main{max-width:900px;margin:0 auto;padding:0 16px 80px}
.bojagi{display:grid;grid-template-columns:3fr 2fr 4fr 2fr;height:14px;margin:20px 0 0;border-radius:6px;overflow:hidden}
.bojagi i:nth-child(1){background:var(--cel)}.bojagi i:nth-child(2){background:var(--but)}.bojagi i:nth-child(3){background:var(--rose)}.bojagi i:nth-child(4){background:var(--ind)}
h1{font-family:"Gowun Batang",serif;font-size:clamp(30px,6vw,46px);line-height:1.1;margin:16px 0 4px}
.sub{color:var(--soft);margin:0 0 10px}
.info{background:var(--paper);border-radius:16px;padding:12px 16px;margin:12px 0;font-size:15px}
.info b{font-weight:700}
h2{font-family:"Gowun Batang",serif;font-size:24px;margin:36px 0 10px;padding-top:12px;border-top:1.5px solid var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2 small{font-family:inherit;font-size:14px;color:var(--soft);font-weight:400}
.group{background:var(--paper);border-radius:18px;padding:14px 16px;margin:16px 0}
.instr{font-weight:700;margin:0 0 8px}
.passage{background:var(--tint);border-radius:12px;padding:10px 14px;margin:8px 0}
.example{border:1.5px dashed var(--line);border-radius:12px;padding:8px 12px;margin:8px 0;font-size:15px}
.example .lab{font-size:13px;color:var(--soft)}
.example .ch{display:inline-block;margin:2px 10px 2px 0}
.example .ch.ans{font-weight:700;color:var(--ind)}
.q{border-top:1px dashed var(--line);padding:12px 0 6px;scroll-margin-top:80px}
.q:first-of-type{border-top:0}
.qh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.num{font-family:"Gowun Batang",serif;font-weight:700;font-size:20px}
.pts{font-size:13px;color:var(--soft)}
.stem{margin:4px 0 8px}
.question_outline{background:var(--tint);border-radius:12px;padding:10px 14px;margin:6px 0}
.pimg{display:block;max-width:100%;height:auto;margin:8px auto;border-radius:8px;background:#fff}
.choices{display:grid;gap:8px;grid-template-columns:1fr}
.choices.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:620px){.choices.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.choices.c2.txt{grid-template-columns:1fr}}
.choice{display:flex;gap:8px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;padding:8px 10px;font:inherit;cursor:pointer;min-height:44px}
.choice .k{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;font-size:13px;line-height:1}
.choice img{display:block;max-width:100%;height:auto;border-radius:6px;background:#fff}
.choice.imgc{flex-direction:column;align-items:center}
.choice.sel{border-color:var(--ind);box-shadow:0 0 0 2px var(--ind) inset}
.choice.sel .k{background:var(--ind);color:#fff;border-color:var(--ind)}
.choice.right{border-color:var(--ok);background:var(--okbg)}
.choice.wrong{border-color:var(--bad);background:var(--badbg)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px;align-items:center}
.btn{border:0;background:var(--ind);color:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer;min-height:40px}
.btn.alt{background:var(--tint);color:var(--ink)}
.btn.play::before{content:"▶ "}.btn.play.on{background:var(--tig)}.btn.play.on::before{content:"■ "}
.reveal{display:none;margin:8px 0 0;border-radius:12px;padding:10px 14px;font-size:16px}
.reveal.open{display:block}
.script{background:var(--tint)}
.script p{margin:2px 0}
.answer{background:var(--okbg)}
.fb{font-size:14px;margin-left:4px}
.fb.ok{color:var(--ok)}.fb.ko{color:var(--bad)}
body.exam .practice-only{display:none!important}
body.practice .exam-only{display:none!important}
.examcard{background:var(--paper);border-radius:18px;padding:14px 16px;margin:16px 0}
.result{background:var(--paper);border-radius:18px;padding:16px;margin:16px 0}
.result .big{font-family:"Gowun Batang",serif;font-size:34px;font-weight:700}
.result table{border-collapse:collapse;width:100%;font-size:15px;margin-top:8px}
.result td,.result th{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left}
.wronglist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wronglist a{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--badbg);color:var(--bad);text-decoration:none;font-size:14px}
.submitbar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:10px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.counter{font-size:14px;color:var(--soft)}

.audiobar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--soft)}
.audiobar input[type=range]{width:110px;accent-color:var(--ind)}
.hoya{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start;background:var(--tint);border-radius:16px;padding:12px 14px;margin-top:14px}
.hoya img{width:72px;height:auto}
.hoya p{margin:0 0 8px}
.hoya .btns{display:flex;flex-wrap:wrap;gap:8px}
.hoya a.btn{text-decoration:none;display:inline-flex;align-items:center}
.homelink{font-size:14px;color:var(--ind);text-decoration:none;white-space:nowrap}
body.redo .q.hide{display:none}
body.redo .group.hide{display:none}
.redobar{display:none;background:var(--badbg);color:var(--bad);border-radius:12px;padding:8px 12px;margin:12px 0;align-items:center;gap:10px;flex-wrap:wrap}
body.redo .redobar{display:flex}
footer{max-width:900px;margin:0 auto;padding:20px 16px 40px;color:var(--soft);font-size:13px}
button:focus-visible,a:focus-visible{outline:3px solid var(--tig);outline-offset:2px}

.info.warn{background:var(--badbg);color:var(--bad)}
#langsel{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:4px 8px;max-width:150px}
.info p{margin:0 0 8px}
h2 small{margin-left:auto}
.hoya a.btn.alt{background:var(--paper);color:var(--ind);box-shadow:inset 0 0 0 1.5px var(--ind)}