:root { --bg:#f5f7fb; --ink:#172033; --muted:#6b7280; --navy:#111827; --lime:#a3e635; --blue:#38bdf8; --white:#fff; --red:#ef4444; --line:#dbe2ea; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,"Noto Sans KR","Yu Gothic UI",system-ui,sans-serif; color:var(--ink); background:var(--bg); }
button { font:inherit; }
.topbar { width:100%; height:64px; padding:0 clamp(16px,2.5vw,40px); background:var(--navy); color:white; display:flex; align-items:center; justify-content:space-between; gap:24px; position:sticky; top:0; z-index:5; }
.brand { color:var(--lime); font-size:24px; font-weight:900; text-decoration:none; letter-spacing:-1px; }
.brand-area{display:flex;align-items:center;gap:14px;flex:0 0 auto}.brand-area select{background:#1f2937;color:#e5e7eb;border:1px solid #475569;border-radius:9px;padding:7px 9px;font-weight:700}
.stats { display:flex; align-items:center; justify-content:flex-end; gap:18px; min-width:0; font-size:14px; }
.volume-control{display:flex;align-items:center;flex:0 0 64px;min-width:0}.volume-control>span,.volume-control output{display:none}.volume-control input{display:block;width:64px;min-width:0;margin:0;accent-color:var(--lime);cursor:pointer}
main { width:min(760px,100%); margin:auto; padding:34px 20px 110px; }
.hidden { display:none !important; }
.hero { background:linear-gradient(135deg,#111827 0%,#253451 100%); color:white; border-radius:24px; padding:34px; box-shadow:0 16px 40px #11182720; }
.hero h1 { margin:7px 0 10px; font-size:clamp(28px,6vw,44px); line-height:1.15; letter-spacing:-2px; }
.hero p:last-child { margin:0; color:#cbd5e1; line-height:1.7; }
.eyebrow { margin:0; color:#65a30d; font-size:12px; font-weight:900; letter-spacing:1.5px; }
.hero .eyebrow { color:var(--lime); }
.daily-card { margin:20px 0 34px; background:white; border:1px solid var(--line); padding:18px 20px; border-radius:18px; display:grid; grid-template-columns:150px 1fr; align-items:center; gap:20px; }
.daily-card small,.daily-card strong { display:block; }
.daily-card strong { margin-top:4px; }
.progress { height:12px; border-radius:999px; overflow:hidden; background:#e5e7eb; }
.progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#84cc16,var(--lime)); border-radius:inherit; transition:width .35s; }
h2 { letter-spacing:-.7px; }
.unit-banner{margin:34px 0 24px;background:linear-gradient(135deg,#65a30d,#84cc16);color:white;border-radius:20px;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 5px 0 #4d7c0f}.unit-banner small{font-weight:900;letter-spacing:1px}.unit-banner h2{margin:7px 0 3px}.unit-banner p{margin:0;color:#f7fee7}.guide-btn{border:2px solid #d9f99d;background:#ffffff18;color:white;padding:11px 14px;border-radius:12px;font-weight:900;cursor:pointer}
.learning-path{display:flex;flex-direction:column;align-items:center;gap:18px;padding:8px 0 30px;position:relative}.learning-path:before{content:"";position:absolute;top:18px;bottom:45px;width:6px;background:#e2e8f0;border-radius:9px;z-index:-1}.path-node{width:76px;height:66px;border:0;border-radius:50%;background:#84cc16;color:#27410a;font-size:25px;box-shadow:0 7px 0 #4d7c0f;cursor:pointer;position:relative}.path-node:nth-child(4n+2){transform:translateX(-58px)}.path-node:nth-child(4n){transform:translateX(58px)}.path-node.locked{background:#d1d5db;color:#64748b;box-shadow:0 7px 0 #9ca3af;cursor:not-allowed}.path-node.completed{background:#38bdf8;box-shadow:0 7px 0 #0284c7}.path-node.current{outline:5px solid #d9f99d}.node-label{position:absolute;left:50%;top:76px;transform:translateX(-50%);white-space:nowrap;background:#111827;color:white;padding:6px 9px;border-radius:8px;font-size:11px;font-weight:800;z-index:2}.checkpoint{width:92px;height:78px;border-radius:24px}
.quest-card{background:white;border:1px solid var(--line);border-radius:20px;padding:20px;margin-top:18px}.quest-card h3{margin:0 0 14px}.quest-row{display:grid;grid-template-columns:34px 1fr 45px;align-items:center;gap:10px;margin:12px 0}.quest-row small{display:block;color:var(--muted);margin-bottom:6px}.mini-progress{height:8px;background:#e5e7eb;border-radius:9px;overflow:hidden}.mini-progress i{display:block;height:100%;background:#38bdf8}.quest-row b{text-align:right;color:#0284c7;font-size:12px}
.path-note { color:var(--muted); margin:-6px 0 18px; }
.course { border:1px solid var(--line); background:white; border-radius:20px; padding:20px; display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:16px; cursor:pointer; text-align:left; color:inherit; box-shadow:0 3px 0 #d8dee7; transition:.15s; }
.course:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 5px 0 #d8dee7; }
.course:disabled { opacity:.55; cursor:not-allowed; }
.course-icon { width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#ecfccb;font-size:25px; }
.course strong,.course small { display:block; }.course small { color:var(--muted); margin-top:5px; }.course .done { color:#65a30d;font-weight:800; }
.ghost { color:white; border:1px solid #64748b; background:transparent; border-radius:9px; padding:7px 10px; cursor:pointer; }
.dev-toggle{border:1px solid #64748b;background:#1f2937;color:#cbd5e1;border-radius:9px;padding:7px 10px;cursor:pointer;font-size:12px;font-weight:900}.dev-toggle.on{background:#fbbf24;color:#422006;border-color:#fbbf24}
.transcript-btn{border:1px solid #94a3b8;background:white;color:#334155;border-radius:12px;padding:11px 14px;font-weight:800;cursor:pointer;margin-left:7px}.transcript{background:white;border:2px dashed #94a3b8;border-radius:14px;padding:15px;margin:12px 0;font-size:20px;font-weight:900}.transcript small{display:block;color:#0284c7;font-size:13px;margin-top:7px}.preview-card{max-width:620px;margin:auto}.preview-card h1{font-size:36px;margin:10px 0}.preview-card>p{color:var(--muted)}.preview-list{display:grid;gap:10px;margin:25px 0}.preview-item{background:white;border:1px solid var(--line);border-radius:15px;padding:15px;display:grid;grid-template-columns:auto 1fr;gap:4px 13px;align-items:center}.preview-item button{grid-row:1/4;border:0;background:#e0f2fe;border-radius:50%;width:44px;height:44px;cursor:pointer}.preview-item b{font-size:18px}.preview-item span{color:#0284c7;font-weight:800}.preview-item small{color:var(--muted)}
.lesson-head { display:grid; grid-template-columns:40px 1fr 48px; align-items:center; gap:14px; margin-bottom:55px; }
.icon-btn { border:0;background:transparent;font-size:20px;color:var(--muted);cursor:pointer; }
#heartText { color:var(--red);font-weight:800;text-align:right; }
.question-card { max-width:620px;margin:auto; }.question-card h2 { font-size:clamp(24px,5vw,34px);margin:12px 0; }.hint { color:var(--muted);min-height:24px; }
.learning-state{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.learning-state span{font-size:12px;font-weight:900;border-radius:999px;padding:7px 10px;background:#ecfccb;color:#4d7c0f}.learning-state span:last-child{background:#e0f2fe;color:#0369a1;opacity:.45}.learning-state span.hot{opacity:1;animation:pop .25s}@keyframes pop{50%{transform:scale(1.12)}}
.answers { display:grid;gap:12px;margin-top:28px; }.answer { padding:17px;text-align:left;background:white;border:2px solid var(--line);border-radius:14px;box-shadow:0 3px 0 #d8dee7;cursor:pointer; }.answer:hover { border-color:#94a3b8; }.answer.selected { border-color:var(--blue);background:#f0f9ff;box-shadow:0 3px 0 #0284c7; }.answer.correct { border-color:#84cc16;background:#f7fee7; }.answer.wrong { border-color:#f87171;background:#fef2f2; }
.word-bank,.sentence-slots{display:flex;gap:10px;flex-wrap:wrap;min-height:62px;padding:12px;border-radius:13px}.sentence-slots{border-bottom:2px solid var(--line);margin-bottom:18px}.word-tile{background:white;border:2px solid var(--line);box-shadow:0 3px 0 #cbd5e1;border-radius:10px;padding:10px 13px;cursor:pointer}.text-answer{width:100%;font-size:18px;border:2px solid var(--line);border-radius:13px;padding:16px;outline:none}.text-answer:focus{border-color:var(--blue)}.audio-btn{border:0;background:#38bdf8;color:#075985;border-radius:16px;padding:14px 18px;font-weight:900;font-size:17px;cursor:pointer;margin:12px 0}.speak-panel{text-align:center;background:#e0f2fe;border:2px solid #7dd3fc;border-radius:20px;padding:24px}.mic-btn{width:78px;height:78px;border:0;border-radius:50%;background:#38bdf8;font-size:34px;cursor:pointer;box-shadow:0 5px 0 #0284c7}.mic-btn.listening{animation:pulse 1s infinite;background:#fb7185}@keyframes pulse{50%{transform:scale(1.08)}}
.checkbar { margin-top:35px;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:flex-end;align-items:center;gap:18px; }.feedback { flex:1;font-weight:800; }.feedback.good { color:#65a30d; }.feedback.bad { color:#dc2626; }
.primary { border:0;border-radius:13px;background:#84cc16;color:#23320a;padding:15px 28px;font-weight:900;box-shadow:0 4px 0 #4d7c0f;cursor:pointer; }.primary:disabled { background:#d1d5db;color:#6b7280;box-shadow:0 4px 0 #9ca3af;cursor:not-allowed; }
.result { text-align:center;padding-top:70px; }.result-badge { font-size:72px; }.result h1 { font-size:40px;margin:16px 0 4px; }.result>p { color:var(--muted); }.result-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px auto;max-width:440px; }.result-grid div { background:white;border:1px solid var(--line);border-radius:16px;padding:18px; }.result-grid small,.result-grid strong { display:block; }.result-grid strong { font-size:25px;margin-top:5px;color:#65a30d; }
.growth-card{max-width:440px;margin:-16px auto 28px;background:white;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:left}.growth-card>div:first-child{display:flex;align-items:center;gap:10px;margin-bottom:12px}.growth-card span{flex:1;font-size:13px;color:var(--muted);font-weight:800}.growth-card b:last-of-type{color:#65a30d;font-size:20px}.growth-card em{font-style:normal;color:#94a3b8}.growth-card p{font-size:13px;color:var(--muted);margin:12px 0 0}.result .primary{min-width:220px}
.dev-panel{position:fixed;right:16px;bottom:84px;width:190px;background:#111827;color:white;border:2px solid #fbbf24;border-radius:14px;padding:10px;z-index:20;box-shadow:0 12px 35px #0005}.dev-panel>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.dev-panel button{width:100%;border:0;border-radius:8px;padding:8px;margin:3px 0;background:#334155;color:white;cursor:pointer;font-size:12px;font-weight:800}.dev-panel>div button{width:28px;margin:0;padding:4px}.dev-panel .danger{background:#7f1d1d}.dev-reopen{position:fixed;right:16px;bottom:84px;border:2px solid #fbbf24;background:#111827;color:white;border-radius:50%;width:46px;height:46px;z-index:20;cursor:pointer}
.dev-panel label{display:block;margin:7px 2px 4px;color:#fde68a;font-size:11px;font-weight:800}.dev-panel select{width:100%;margin-bottom:4px;padding:7px 5px;border:1px solid #64748b;border-radius:8px;background:#1e293b;color:white;font-size:11px}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:68px;background:white;border-top:1px solid var(--line);display:flex;justify-content:center;gap:34px;z-index:8}.bottom-nav button{border:0;background:transparent;color:#64748b;font-weight:900;padding:8px 14px;cursor:pointer;font-size:20px}.bottom-nav span{display:block;font-size:11px;margin-top:2px}.practice-hero,.review-hero,.glossary-hero{margin-bottom:24px}.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.practice-card{background:white;border:2px solid var(--line);border-radius:18px;padding:24px;text-align:left;cursor:pointer;box-shadow:0 4px 0 #d8dee7}.practice-card span,.practice-card strong,.practice-card small{display:block}.practice-card span{font-size:34px}.practice-card strong{font-size:18px;margin:12px 0 5px}.practice-card small{color:var(--muted)}.review-lesson-list{display:grid;gap:18px}.review-unit{background:white;border:1px solid var(--line);border-radius:18px;padding:20px}.review-unit>small{color:#65a30d;font-weight:900}.review-unit h2{margin:5px 0 15px}.review-unit>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.review-lesson{border:2px solid var(--line);border-radius:14px;background:#fff;padding:13px;text-align:left;display:grid;grid-template-columns:42px 1fr;column-gap:10px;cursor:pointer}.review-lesson>span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ecfccb;font-size:21px}.review-lesson b{align-self:end}.review-lesson small{color:var(--muted);font-size:11px}.review-empty{padding:50px 20px;text-align:center;background:white;border:1px dashed #94a3b8;border-radius:18px;color:var(--muted);line-height:1.7}.filter-row{display:flex;gap:8px;overflow:auto;padding:16px 0}.filter-btn{border:1px solid var(--line);background:white;border-radius:999px;padding:8px 12px;white-space:nowrap;cursor:pointer}.filter-btn.active{background:#111827;color:white}.glossary-list{display:grid;gap:10px;margin-bottom:22px}.glossary-item{background:white;border:1px solid var(--line);border-radius:15px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;cursor:pointer}.glossary-item b{font-size:18px}.glossary-item .reading{color:#0284c7;font-weight:800}.glossary-item small{color:var(--muted);grid-column:1/-1}.glossary-item .play{grid-row:1/3;grid-column:2;border:0;background:#e0f2fe;border-radius:50%;width:42px;height:42px;cursor:pointer}.ghost-dark{margin-top:24px;color:var(--ink);border-color:#94a3b8;padding:12px 16px}dialog{width:min(620px,calc(100% - 30px));border:0;border-radius:22px;padding:28px;box-shadow:0 30px 80px #0005}dialog::backdrop{background:#111827aa}.dialog-close{float:right;border:0;background:transparent;font-size:20px;cursor:pointer}.guide-expression{border-bottom:1px solid var(--line);padding:13px 0}.guide-expression b,.guide-expression span{display:block}.guide-expression span{color:var(--muted);margin-top:4px}
.developer-credit{position:fixed;right:14px;bottom:75px;z-index:7;color:#94a3b8;font-size:10px;font-weight:700;letter-spacing:.3px;pointer-events:none}
@media(max-width:800px){.topbar{padding-inline:12px}.stats{gap:7px}.brand-area{gap:8px}.brand-area select{max-width:145px}.volume-control{flex-basis:54px}.volume-control input{width:54px}}
@media(max-width:520px){ main{padding:22px 14px 100px}.hero{padding:25px 22px}.daily-card{grid-template-columns:1fr}.stats{gap:5px}.stats>span{display:none}.dev-toggle{font-size:10px;padding:6px}.volume-control{flex-basis:46px}.volume-control input{width:46px}.brand-area{gap:7px}.brand-area select{max-width:118px;font-size:10px;padding-inline:6px}.unit-banner{align-items:flex-start;gap:15px}.guide-btn{font-size:12px}.lesson-head{margin-bottom:35px}.checkbar{align-items:stretch;flex-direction:column}.primary{width:100%}.practice-grid,.review-unit>div{grid-template-columns:1fr}.bottom-nav{gap:8px}.bottom-nav button{padding-inline:12px} }
@media(max-width:390px){.topbar{padding-inline:8px}.brand{font-size:21px}.brand-area select{max-width:98px}.stats{gap:3px}.volume-control{flex-basis:38px}.volume-control input{width:38px}.dev-toggle{padding:5px;font-size:9px}}
.preview-item small{line-height:1.5}.preview-item b{word-break:keep-all}
.preview-item small strong{color:var(--ink);font-size:14px}.preview-item span{font-size:14px}

/* 한글 발음 우선 표기: 가나를 몰라도 문제를 풀 수 있게 한다 */
.answer.bilingual,.word-tile.bilingual{display:flex;flex-direction:column;gap:3px}
.opt-ko{font-size:19px;font-weight:900;color:#0f172a;line-height:1.25}
.opt-ja{font-size:13px;font-weight:700;color:#0284c7;letter-spacing:.4px}
.word-tile .opt-ko{font-size:17px}

/* 발음 음성 선택 */
.voice-picker{max-width:150px;padding:6px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;font-size:12px}
.voice-warning{margin:0;padding:10px clamp(16px,2.5vw,40px);background:#7f1d1d;color:#fee2e2;font-size:13px;line-height:1.45}
@media(max-width:800px){.voice-picker{max-width:104px;font-size:10px}}
@media(max-width:520px){.voice-picker{max-width:80px;font-size:9px;padding:5px 6px}}
.voice-badge{padding:5px 9px;border-radius:9px;background:rgba(56,189,248,.22);border:1px solid rgba(56,189,248,.5);color:#e0f2fe;font-size:11px;white-space:nowrap}
@media(max-width:520px){.voice-badge{font-size:9px;padding:4px 6px}}