:root{--ink:#172033;--muted:#667085;--line:#e3e8ef;--soft:#f7f9fc;--navy:#172a4a;--pink:#c94f72;--blue:#315fa8;--green:#177c59;--red:#b42318;--shadow:0 15px 42px rgba(23,42,74,.08)}
*{box-sizing:border-box}body{margin:0;background:#f7f8fb;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;line-height:1.6}a{text-decoration:none;color:inherit}button,select{font:inherit}.shell{width:min(980px,calc(100% - 28px));margin:auto}.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.toprow{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-weight:950;color:var(--navy);letter-spacing:-.04em}.brand em{font-style:normal;color:var(--pink)}.back{font-size:.88rem;font-weight:750;color:#5d687b}.progress{height:4px;background:#edf0f4}.progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--pink));transition:.3s}
main{padding:34px 0 70px}.lesson-head{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}.kicker{font-size:.76rem;font-weight:900;letter-spacing:.12em;color:var(--pink);text-transform:uppercase}.lesson-head h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.03;letter-spacing:-.045em;color:var(--navy);margin:10px 0}.lesson-head p{color:var(--muted);margin:0}.audio-panel{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.audio-panel label{font-size:.82rem;font-weight:800;color:#4d596d}.audio-panel select,.audio-panel button{border:1px solid #ccd4df;border-radius:10px;background:#fff;padding:8px 10px}.audio-panel button{cursor:pointer;font-weight:800;color:var(--navy)}.status{font-size:.76rem;color:var(--muted)}
.block{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;margin-top:18px}.block h2{color:var(--navy);font-size:1.35rem;margin:0 0 10px}.block>p{color:var(--muted)}.objective{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.chip{padding:7px 10px;border-radius:999px;background:#f1f5fb;color:#3d5579;font-size:.8rem;font-weight:750}
.units{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.unit{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff}.char{font-size:3rem;font-weight:850;line-height:1.1;color:var(--navy)}.roman{font-size:1rem;font-weight:850;color:var(--pink);margin-top:8px}.hint{font-size:.84rem;color:var(--muted);min-height:42px}.say{margin-top:12px;border:0;border-radius:10px;padding:8px 10px;background:#eef4fc;color:var(--blue);font-weight:850;cursor:pointer}.example{margin-top:14px;padding:11px;border-radius:12px;background:var(--soft)}.example b{font-size:1.35rem}.example small{display:block;color:var(--muted)}
.tip{border-left:4px solid #efb443;background:#fff8e8;padding:14px 16px;border-radius:10px;margin:15px 0;color:#68542b}.quiz-card{border:1px solid var(--line);border-radius:16px;padding:18px;margin:12px 0}.quiz-q{font-weight:850;color:var(--navy);margin-bottom:12px}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.option{border:1px solid #ccd4df;background:#fff;border-radius:11px;padding:11px 13px;text-align:left;cursor:pointer}.option:hover{border-color:#9db4d5}.option.correct{border-color:#6cc49e;background:#edf9f3;color:#126644}.option.wrong{border-color:#e99b97;background:#fff1f0;color:#9d2b24}.feedback{min-height:22px;font-size:.84rem;font-weight:750;margin-top:8px}.finish{display:flex;justify-content:space-between;align-items:center;gap:18px}.finish button{border:0;border-radius:12px;background:var(--navy);color:#fff;padding:13px 18px;font-weight:850;cursor:pointer}.done{color:var(--green);font-weight:850}
.error{background:#fff1f0;border:1px solid #f3c0bc;color:#842a24;border-radius:14px;padding:18px}@media(max-width:680px){.lesson-head,.block{padding:20px}.units{grid-template-columns:1fr 1fr}.options{grid-template-columns:1fr}.finish{align-items:flex-start;flex-direction:column}.finish button{width:100%}}@media(max-width:430px){.units{grid-template-columns:1fr}}
.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}.lesson-nav>div:last-child{text-align:right}.navlesson{display:inline-flex;padding:12px 15px;border-radius:12px;border:1px solid #cdd6e2;background:#fff;color:var(--navy);font-weight:850}.navlesson.next{background:var(--navy);color:#fff;border-color:var(--navy)}@media(max-width:620px){.lesson-nav{grid-template-columns:1fr}.lesson-nav>div:last-child{text-align:left}.navlesson{width:100%;justify-content:center}}

.quiz-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.scorebox{min-width:112px;text-align:center;border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:#f8faff}.scorebox b{display:block;font-size:1.25rem;color:var(--navy)}.scorebox span{display:block;color:var(--pink);font-weight:900}.quiz-meter{height:7px;background:#edf0f4;border-radius:999px;overflow:hidden;margin:14px 0 20px}.quiz-meter span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--pink));transition:.25s}.option:disabled{cursor:default}.quiz-result{margin-top:16px;padding:13px 15px;border-radius:12px;background:#f6f7f9;color:#596579;font-weight:800}.quiz-result.pass{background:#ecf8f2;color:#146644}.quiz-result.fail{background:#fff1f0;color:#9d2b24}.retry-quiz{margin-top:10px;border:1px solid #ccd4df;background:#fff;color:var(--navy);border-radius:11px;padding:10px 13px;font-weight:850;cursor:pointer}@media(max-width:620px){.quiz-head{display:block}.scorebox{margin-top:12px;text-align:left;display:flex;justify-content:space-between}}

.study-reminder{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;background:#fffdf7;border-color:#eadfb8;color:#62562e}.study-reminder a{color:var(--blue);font-weight:850}

.repeat-status{flex-basis:100%;font-weight:850;color:var(--pink);min-height:20px}.detail-section{padding:14px 0;border-top:1px solid var(--line)}.detail-section:first-of-type{border-top:0}.detail-section h3{margin:0 0 7px;color:var(--navy)}.detail-section p{color:#536077;margin:7px 0}.orthography-note{background:#eef5ff;border-left:4px solid var(--blue);padding:12px 14px;border-radius:10px}.transform-list{display:grid;gap:12px}.transform-card{border:1px solid var(--line);border-radius:16px;padding:17px;background:#fbfcfe}.transform-main{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.transform-main .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:850}.transform-main b{font-size:1.35rem;color:var(--navy)}.transform-main .pron{color:var(--pink)}.arrow{color:#97a2b4;font-weight:900}.process{display:grid;gap:7px;margin:12px 0}.process>div{display:flex;gap:9px;color:#4f5c70}.process span{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#eaf0f9;color:var(--blue);font-size:.75rem;font-weight:900}.transform-note{font-size:.84rem;color:var(--muted)}.sentence-list{display:grid;gap:12px}.sentence-example{border:1px solid var(--line);border-radius:16px;padding:17px;background:#fff}.sentence-ko{font-size:1.42rem;font-weight:850;color:var(--navy)}.sentence-pron{margin-top:5px;color:var(--pink);font-weight:800}.sentence-roman{font-size:.85rem;color:#7b6685;font-style:italic}.sentence-id{margin-top:5px;color:#46536a}.sentence-note{margin-top:8px;padding:9px 11px;background:#f7f9fc;border-radius:10px;color:var(--muted);font-size:.84rem}.mini-play{display:block;margin-top:8px}.sentence-play{margin-top:11px}

.theme-toggle{border:1px solid var(--line);background:#fff;color:#26334a;border-radius:11px;padding:8px 11px;font-weight:850;cursor:pointer;white-space:nowrap}
.repeat-status{opacity:0;transform:translateY(-2px);transition:.18s ease;color:var(--pink);font-weight:900}.repeat-status.show{opacity:1;transform:none}
html[data-theme="dark"]{color-scheme:dark;--ink:#e9edf5;--muted:#9ca7b8;--line:#303744;--soft:#171b22;--navy:#f3f6fb;--pink:#ff8eac;--blue:#85b5ff;--green:#69d6a6;--shadow:0 16px 44px rgba(0,0,0,.28)}
html[data-theme="dark"] body{background:#090b0f;color:var(--ink)}
html[data-theme="dark"] .topbar{background:rgba(12,15,20,.94);border-color:var(--line)}
html[data-theme="dark"] .lesson-head,
html[data-theme="dark"] .block,
html[data-theme="dark"] .unit,
html[data-theme="dark"] .quiz-card,
html[data-theme="dark"] .sentence-example,
html[data-theme="dark"] .transform-card{background:#11151b;border-color:var(--line);box-shadow:none}
html[data-theme="dark"] .study-reminder{background:#17160f;border-color:#494227;color:#d9cc94}
html[data-theme="dark"] .tip{background:#211d12;color:#e2c981;border-color:#b98a2d}
html[data-theme="dark"] .orthography-note{background:#111c2b;border-color:#6599e4;color:#c5d8f6}
html[data-theme="dark"] .example,
html[data-theme="dark"] .sentence-note,
html[data-theme="dark"] .scorebox,
html[data-theme="dark"] .quiz-result{background:#171b22}
html[data-theme="dark"] .audio-panel select,
html[data-theme="dark"] .audio-panel button,
html[data-theme="dark"] .option,
html[data-theme="dark"] .retry-quiz,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .navlesson{background:#151a21;color:#e9edf5;border-color:#3a4351}
html[data-theme="dark"] .navlesson.next,
html[data-theme="dark"] .finish button{background:#e7edf7;color:#10141a;border-color:#e7edf7}
html[data-theme="dark"] .option.correct{background:#10261c;color:#86e0b7;border-color:#397a5d}
html[data-theme="dark"] .option.wrong{background:#2a1516;color:#ffaaa4;border-color:#8d4545}
html[data-theme="dark"] .quiz-result.pass{background:#10261c;color:#86e0b7}
html[data-theme="dark"] .quiz-result.fail{background:#2a1516;color:#ffaaa4}
html[data-theme="dark"] .progress,
html[data-theme="dark"] .quiz-meter{background:#242a34}
html[data-theme="dark"] .char,
html[data-theme="dark"] .lesson-head h1,
html[data-theme="dark"] .block h2,
html[data-theme="dark"] .detail-section h3,
html[data-theme="dark"] .sentence-ko,
html[data-theme="dark"] .transform-main b,
html[data-theme="dark"] .brand{color:#f2f5fa}
html[data-theme="dark"] .hint,
html[data-theme="dark"] .block>p,
html[data-theme="dark"] .detail-section p,
html[data-theme="dark"] .sentence-id,
html[data-theme="dark"] .transform-note{color:#aab4c4}

:root{--cm0:#c42c23;--cm1:#1d63d7;--cm2:#07844e;--cm3:#7652f5;--cm4:#df5a00;--cm5:#007c83;--cm6:#ad1761;--cm7:#4b3ab5;--cm8:#56821f;--cm9:#0875a8;--cm10:#8c2db2;--cm11:#9b4b16}
html[data-theme="dark"]{--cm0:#ff776f;--cm1:#77a8ff;--cm2:#65d99e;--cm3:#a992ff;--cm4:#ff9a55;--cm5:#66d2d8;--cm6:#ff87bb;--cm7:#b4a4ff;--cm8:#a7d96c;--cm9:#71c7ef;--cm10:#d69af0;--cm11:#efae73}
.cm0{color:var(--cm0)}.cm1{color:var(--cm1)}.cm2{color:var(--cm2)}.cm3{color:var(--cm3)}.cm4{color:var(--cm4)}.cm5{color:var(--cm5)}.cm6{color:var(--cm6)}.cm7{color:var(--cm7)}.cm8{color:var(--cm8)}.cm9{color:var(--cm9)}.cm10{color:var(--cm10)}.cm11{color:var(--cm11)}
.color-map{margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}.cm-label{display:inline-block;font-size:.68rem;font-weight:950;letter-spacing:.1em;color:var(--pink);background:rgba(201,79,114,.10);padding:4px 7px;border-radius:999px;margin-bottom:11px}.cm-ko{font-size:1.55rem;font-weight:900;line-height:1.45;display:flex;flex-wrap:wrap;gap:0 4px}.cm-token{font-weight:800}.cm-row,.cm-natural{display:grid;grid-template-columns:92px 1fr;gap:10px;margin-top:9px;align-items:start}.cm-row>span,.cm-natural>span{font-size:.72rem;color:var(--muted);font-weight:850;text-transform:uppercase;letter-spacing:.04em}.cm-row>div,.cm-natural>div{display:flex;flex-wrap:wrap;gap:3px 7px}.cm-natural{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}.cm-natural>div{font-size:1.02rem;line-height:1.55}.example .color-map{padding:11px;margin-top:0}.example .cm-ko{font-size:1.25rem}.example .cm-row,.example .cm-natural{grid-template-columns:76px 1fr}.example .cm-label{display:none}@media(max-width:560px){.cm-row,.cm-natural,.example .cm-row,.example .cm-natural{grid-template-columns:1fr;gap:3px}.cm-ko{font-size:1.35rem}}
html[data-theme="dark"] .color-map{background:#0d1117;border-color:#303744}

/* Local repeat prompt: appears only below the audio button that just finished. */
.local-repeat{display:block;width:max-content;max-width:100%;margin:6px 0 0;padding:0 2px;font-size:.82rem;font-weight:900;color:var(--pink);opacity:0;transform:translateY(-3px);transition:opacity .18s ease,transform .18s ease}
.local-repeat.show{opacity:1;transform:none}
.repeat-status{display:none!important}

/* Better interactive audio buttons in both themes. */
.say{border:1px solid #cfe0f5;background:#eef5ff;color:#245c9f;transition:background .16s,border-color .16s,transform .08s}
.say:hover{background:#e2efff;border-color:#acc9ec}.say:active{transform:translateY(1px)}
.audio-panel button{transition:background .16s,border-color .16s}

/* Dark-mode readability audit. */
html[data-theme="dark"] .back,
html[data-theme="dark"] .audio-panel label,
html[data-theme="dark"] .status,
html[data-theme="dark"] .transform-main .label,
html[data-theme="dark"] .cm-row>span,
html[data-theme="dark"] .cm-natural>span{color:#aeb9ca}
html[data-theme="dark"] .chip{background:#1b2430;color:#c6d8ee;border:1px solid #33445a}
html[data-theme="dark"] .say{background:#17283b;color:#9ccaff;border-color:#315276}
html[data-theme="dark"] .say:hover{background:#1d334b;border-color:#4775a5}
html[data-theme="dark"] .audio-panel button{background:#1b2430;color:#d9e8fb;border-color:#3c5069}
html[data-theme="dark"] .audio-panel button:hover{background:#223147;border-color:#58769b}
html[data-theme="dark"] .audio-panel select{background:#111820;color:#e8edf5;border-color:#3a4b60}
html[data-theme="dark"] .audio-panel select option{background:#111820;color:#e8edf5}
html[data-theme="dark"] .process>div{color:#c3ccd9}
html[data-theme="dark"] .process span{background:#1b2d45;color:#9bc5ff}
html[data-theme="dark"] .arrow{color:#8997aa}
html[data-theme="dark"] .sentence-roman{color:#c3a9d4}
html[data-theme="dark"] .sentence-pron{color:#ff9cba}
html[data-theme="dark"] .feedback{color:#d4dbe6}
html[data-theme="dark"] .quiz-q{color:#f0f4f9}
html[data-theme="dark"] .scorebox span{color:#ff9cba}
html[data-theme="dark"] .scorebox b{color:#f3f6fb}
html[data-theme="dark"] .done{color:#73e0b0}
html[data-theme="dark"] .example small{color:#aab4c4}
html[data-theme="dark"] .error{background:#301719;border-color:#844449;color:#ffb4b0}
html[data-theme="dark"] .local-repeat{color:#ff9cba}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{accent-color:#85b5ff}

.dialogue-list{display:grid;gap:12px}.dialogue-turn{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}.speaker{display:inline-block;margin-bottom:6px;padding:4px 8px;border-radius:999px;background:#eef3fa;color:#365779;font-size:.72rem;font-weight:900;letter-spacing:.04em}.dialogue-turn .color-map{margin-top:4px}
html[data-theme="dark"] .dialogue-turn{background:#11151b;border-color:var(--line)}html[data-theme="dark"] .speaker{background:#1b2a3b;color:#a9cbf5}