:root{color-scheme:light;--ink:#17352e;--mint:#d9e8d8;--paper:#fbf8ee;--green:#123e37;--apricot:#f8ac88;--rule:#cbd3c4;--muted:#53665d;font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.55}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:0 max(16px,env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:radial-gradient(ellipse at 91% 14%,#e7ecde 0%,transparent 34%),var(--paper)}button,input{font:inherit}button,a{touch-action:manipulation}a{color:var(--green);text-underline-offset:.18em}button{cursor:pointer}.mast,main,footer{width:100%;max-width:780px;margin:auto}.mast{padding:max(16px,env(safe-area-inset-top)) 0 15px;display:flex;align-items:center;justify-content:space-between;gap:12px}.mast>a{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:1.07rem;line-height:1.12}.mast small{display:block;margin-top:3px;font-size:.72rem;font-weight:600;letter-spacing:.05em;color:var(--muted)}.language{font-size:.8rem;font-weight:620}.hero,.sheet,.review-tile{border:1px solid var(--rule);border-radius:22px;padding:clamp(18px,4vw,35px);margin:12px 0 18px}.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(86px,24%);gap:8px;align-items:center;color:#fff9e4;background:radial-gradient(ellipse at 100% 0%,#275b4a 0%,transparent 61%),var(--green);border-color:transparent}.hero p{max-width:46ch}.hero h1{font-size:clamp(1.7rem,5.6vw,3.15rem);line-height:1.1;letter-spacing:-.045em}.hero .primary{color:var(--green);background:#ffdd99}.tiles{width:100%;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;gap:5px;align-self:start;transform:rotate(5deg)}.tiles>*{display:grid;place-items:center;line-height:1;background:#dceada;color:var(--green);border-radius:20%;font-size:clamp(1.3rem,4vw,3.2rem);min-height:1.3em;font-weight:700}.tiles>*:nth-child(2){background:var(--apricot)}.tiles>*:nth-child(3){background:#ffdd99}.tiles strong{background:#f8f3e3}.tag{font-weight:700;font-size:.76rem;letter-spacing:.02em}.hero .tag{color:#d5eecf}.primary,.secondary,.audio,.choice,.plain{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:46px;border-radius:12px;padding:10px 16px;border:1px solid transparent;line-height:1.3;font-weight:700;text-decoration:none;color:var(--ink);text-align:center;overflow-wrap:anywhere}.primary{background:var(--green);color:#fff9e4}.secondary,.choice,.audio{border-color:#b8c9b8;background:#fffdf6}.plain{background:transparent}.audio{background:#dfecdc}.secondary+.primary,.primary+.secondary{margin:6px}.muted,small,.pron{color:var(--muted)}.sheet,.review-tile,.rows,.stats{background:#fffdf6}.sheet h1,.sheet h2,.review-tile h2{margin:0 0 .45em}h1{font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.17;letter-spacing:-.035em}h2{font-size:1.2rem;line-height:1.3}.stats{display:flex;gap:16px;border:1px solid var(--rule);border-radius:17px;padding:16px 20px}.stats>div{flex:1}.stats>div+div{padding-left:16px;border-left:1px solid var(--rule)}.stats b,.stats span{display:block}.stats b{font-size:1.35rem}.stats span,.count{font-size:.85rem}.section-head,.session-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:1.3rem 0 .55rem}.section-head h2{margin:0}.rows{border:1px solid var(--rule);border-radius:17px;overflow:hidden}.lesson-row{display:grid;align-items:center;grid-template-columns:2.4rem 1fr auto;gap:11px;padding:15px;text-decoration:none}.lesson-row+.lesson-row{border-top:1px solid var(--rule)}.lesson-row b,.lesson-row small{display:block}.number,.count,.seal{background:#e5ecdd;padding:6px;border-radius:10px;text-align:center;font-weight:700}.count{white-space:nowrap}.sheet a,.review-tile a{font-weight:650}.back{display:inline-flex;align-items:center;min-height:44px}.vocab{display:grid;gap:8px;margin:1rem 0 1.5rem}.vocab>div{padding:9px 0;border-bottom:1px solid var(--rule)}.vocab small{display:block}.vocab span{font-weight:650;font-size:1.15rem}.tip,.notice{padding:12px 14px;background:#edf1e4;border-radius:12px;line-height:1.6}.notice{background:#fff0cc}.word{font-size:clamp(2rem,7.2vw,3.65rem);line-height:1.2;letter-spacing:-.035em;margin:1.2rem 0 .2em;font-weight:750;overflow-wrap:anywhere}.pron{margin-top:0}.meter{height:7px;border-radius:10px;background:#d6decd;overflow:hidden}.meter i{display:block;height:100%;background:#39865c}.choices,.scores{display:grid;gap:9px}.choice{justify-content:flex-start;font-size:1.2rem}.practice small{display:block;margin:.5em 0;min-height:.25em}.practice>.primary,.practice>.secondary,.practice form button,.choices button{display:flex;width:100%;margin:.65rem 0 0}.practice form label{display:block;font-weight:600}.practice input{display:block;width:100%;padding:12px;border-radius:10px;border:1px solid #899a8b;font-size:1.2rem;background:white;color:var(--ink)}.scores{margin:1rem 0}.scores p{display:flex;justify-content:space-between;margin:0;padding:.4rem;border-bottom:1px solid var(--rule)}.seal{display:inline-grid;place-items:center;width:48px;height:48px;margin:.2rem 0 1rem;font-size:1.5rem}footer{padding:1rem .25rem .5rem;font-size:.8rem;color:var(--muted)}nav{z-index:3;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,812px);display:flex;align-items:stretch;background:#fffdf6;border:1px solid var(--rule);border-radius:16px 16px 0 0;padding:5px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}nav[hidden]{display:none}nav a{flex:1;text-align:center;text-decoration:none;color:var(--muted);padding:4px;font-size:.85rem;min-height:48px}nav a[aria-current]{color:var(--green);background:#e4edde;border-radius:10px;font-weight:700}nav a span{display:block;line-height:1.2;font-size:1.05rem}.buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.buttons button{margin:0}dialog{max-width:min(92vw,420px);border:1px solid var(--rule);border-radius:18px;background:var(--paper);color:var(--ink);padding:20px}dialog::backdrop{background:#132b2780}hr{border:0;border-top:1px solid var(--rule);margin:18px 0}h1:focus{outline:none}:focus-visible{outline:3px solid #ba641d;outline-offset:3px}@media(max-width:390px){.hero{grid-template-columns:1fr}.tiles{position:absolute;right:14px;top:14px;width:58px;opacity:.25;pointer-events:none}.hero .tag{padding-right:48px}.hero>div:first-child{position:relative;z-index:1}}
/* Restrained paper and ink treatment, keeping study controls prominent. */
body{background:radial-gradient(ellipse at 8% 0%,#efe6d2 0,transparent 32rem),#fbf8ee}
.mast{border-bottom:1px solid #dcd6c5;padding-bottom:16px;margin-bottom:8px}.mast>a img{border-radius:12px;box-shadow:0 3px 12px #17352e1a}
.hero{border-radius:18px;box-shadow:0 14px 30px #163b2d1a}.hero:after{content:"";position:absolute;inset:8px;border:1px solid #f8edc530;border-radius:12px;pointer-events:none}
.sheet,.review-tile,.stats,.rows{box-shadow:0 8px 25px #17352e09}.sheet,.review-tile{border-radius:16px}.primary,.secondary,.choice,.audio{min-height:48px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.scene-row {
 display:flex; justify-content:space-between; gap:1rem; align-items:center;
 min-height:48px; padding:.75rem .1rem; border-top:1px solid var(--rule); text-decoration:none;
}
.scene-row small,.scene-card .back { display:block; }
.scene-card fieldset { padding:0; border:0; margin:1.2rem 0 0; min-width:0; }
.scene-card legend { font-weight:650; margin-bottom:.3rem; }
.scene-card .choice,.scene-card .primary,.scene-card .secondary {
 display:flex; width:100%; margin:.65rem 0; white-space:normal; overflow-wrap:anywhere;
}
.scene-card blockquote { margin:0; padding:.85rem 1rem; border-left:3px solid var(--green); background:#edf1e4; font-size:1.17rem; }
.scene-feedback { padding:.85rem; background:#f5edda; border-radius:10px; }

/* Keep both confirmation actions reachable on small screens and at enlarged text sizes. */
dialog{width:min(92vw,420px);max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain}
@media(max-width:400px){dialog .buttons{display:grid;grid-template-columns:1fr;gap:8px}dialog .buttons button{width:100%;min-height:48px}}

.path-stage{border:1px solid var(--line,#d0d9cf);border-radius:18px;background:#fffdf7;padding:18px;margin-block:20px;overflow-wrap:anywhere}.path-stage>summary{display:flex;align-items:center;gap:16px;cursor:pointer;min-height:52px;font-weight:700;list-style:none}.path-stage>summary::after{content:"+";margin-inline-start:auto;font-size:24px}.path-stage[open]>summary::after{content:"−"}.path-conversations{display:grid;gap:12px;margin-top:16px}.path-conversations .secondary{margin:0}.scene-card>.audio{margin-block:12px}.path-stage .lesson-row{padding-block:18px}.path-stage>p{line-height:1.7}

.insights-entry{display:flex;justify-content:flex-end;margin-block:14px 24px}.insights-entry a{margin:0;min-height:48px}
.insights-panel{overflow-wrap:anywhere}.insights-panel>section{margin-block:28px}.insights-panel h2{margin-bottom:14px}.insights-panel h3{font-size:1.05rem;line-height:1.5;margin:0 0 10px}.insights-panel p{line-height:1.7}
.insight-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}.insight-item,.insight-scenes article{min-width:0;padding:18px;border:1px solid var(--rule);border-radius:14px;background:#fbfcf5}.insight-item>p{margin:10px 0}.insight-item details{margin-top:16px}.insight-item summary,.insight-limit summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:650}
.insight-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:16px}.insight-actions>a{flex:1 1 190px;min-width:0;min-height:48px;margin:0;white-space:normal}.insight-scenes{display:grid;gap:18px}.insight-schedule{list-style:none;padding:0;display:grid;gap:14px}.insight-schedule li{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,auto);gap:16px;align-items:center;border-bottom:1px solid var(--rule);padding-bottom:12px}.insight-schedule time{text-align:center;font-variant-numeric:tabular-nums}.insight-limit{margin-top:28px;border-top:1px solid var(--rule);padding-top:12px}
.insight-actions>a.primary,.insight-actions>a.secondary{margin:0}
@media(max-width:480px){.insight-actions{display:grid;grid-template-columns:minmax(0,1fr)}.insight-schedule li{grid-template-columns:minmax(0,1fr)}.insights-panel .stats{padding:14px;gap:10px}.insights-panel .stats>div+div{padding-left:10px}}

.phrase-entry{margin-block:0 16px}
.phrase-entry a{width:100%;min-height:48px}
.phrase-panel{overflow-wrap:anywhere}
.phrase-panel label{display:block;font-weight:700;margin-bottom:6px}
.phrase-panel input{width:100%;min-height:48px;padding:10px 14px;border:1px solid #899a8b;border-radius:12px;background:#fff;color:var(--ink)}
.phrase-examples,.phrase-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.phrase-actions .secondary,.phrase-actions .audio{margin:0}
.phrase-panel #audio-state{display:block;margin-block:12px}
.phrase-panel #audio-state:empty{margin-block:0}
#phrase-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#phrase-results:not(:empty){margin-top:24px}
.phrase-list{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.phrase-list li{min-width:0;padding:16px;border:1px solid var(--rule);border-radius:14px;background:#fbfcf5}
.phrase-list h3{font-size:1.35rem;line-height:1.4;margin:0 0 6px}
.phrase-list p{margin:4px 0}
.phrase-list .pron{font-size:.9rem}

/* Let the shared header and tabs wrap at larger system text sizes. */
.mast>a,.mast .language,nav a{min-width:0;overflow-wrap:anywhere}
.mast>a img{flex:none}
.mast .language{text-align:end}

body:has(#nav[hidden]) footer,body:has(.scene-card) footer{display:none}

/* Optional, device-local appearance for learners. */
.appearance-settings>div{display:flex;gap:12px;flex-wrap:wrap}
.appearance-settings button{min-width:110px}
.appearance-settings button[aria-pressed=true]{background:#123e37;color:#fff;border-color:#123e37}
html[data-theme=dark]{color-scheme:dark;--ink:#edf7f1;--paper:#10241f;--green:#9fe0c5;--rule:#55756b;--muted:#c0d4cb}
html[data-theme=dark] body{background:#10241f;color:var(--ink)}
html[data-theme=dark] .mast{border-color:var(--rule)}
html[data-theme=dark] .sheet,html[data-theme=dark] .review-tile,html[data-theme=dark] .rows,html[data-theme=dark] .stats,html[data-theme=dark] .path-stage,html[data-theme=dark] nav,html[data-theme=dark] dialog{background:#1b3831;color:var(--ink);border-color:var(--rule)}
html[data-theme=dark] .insight-item,html[data-theme=dark] .insight-scenes article,html[data-theme=dark] .phrase-list li{background:#24483c;color:var(--ink)}
html[data-theme=dark] .secondary,html[data-theme=dark] .choice,html[data-theme=dark] .audio{background:#31564a;color:#f4fff9;border-color:#7a9e90}
html[data-theme=dark] .primary{background:#9fe0c5;color:#102c22}
html[data-theme=dark] .hero{background:#1c4d3e;color:#fff9e4}
html[data-theme=dark] .hero .primary{background:#ffdd99;color:#123e37}
html[data-theme=dark] .hero .tiles>*{color:#123e37}
html[data-theme=dark] .tip,html[data-theme=dark] .notice,html[data-theme=dark] .scene-card blockquote,html[data-theme=dark] .scene-feedback,html[data-theme=dark] .number,html[data-theme=dark] .count,html[data-theme=dark] .seal{background:#31564a;color:#f4fff9}
html[data-theme=dark] .practice input,html[data-theme=dark] .phrase-panel input{background:#102c24;color:#fff;border-color:#9ab7aa}
html[data-theme=dark] nav a[aria-current]{background:#3a6454;color:#fff}
html[data-theme=dark] .appearance-settings button[aria-pressed=true]{background:#9fe0c5;color:#102c22;border-color:#9fe0c5}
html[data-theme=dark] :focus-visible{outline-color:#f4cb7c}