:root{
  --bg:#f4f6fb;--surface:#fff;--ink:#14213d;--muted:#64748b;--line:#dbe3ef;
  --accent:#fca311;--accent2:#4263eb;--ok:#1f9d67;--bad:#d9485f;--shadow:0 12px 30px rgba(20,33,61,.09);
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,"Noto Sans KR",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);padding-bottom:88px}
button,select,input{font:inherit}button{border:0;cursor:pointer}.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px max(20px,calc((100vw - 1100px)/2));background:var(--ink);color:#fff}.topbar h1{margin:2px 0 0;font-size:1.35rem}.eyebrow{margin:0;color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
main{max-width:1100px;margin:auto;padding:24px 18px}.screen{display:none}.screen.active{display:block}.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.hero{padding:26px;display:flex;justify-content:space-between;gap:20px;align-items:center}.hero h2{margin:12px 0 8px;font-size:clamp(1.35rem,4vw,2.1rem)}.hero p{margin:0;color:var(--muted)}.pill{background:#fff4d8;color:#8c5a00;padding:7px 11px;border-radius:999px;font-weight:800;font-size:.78rem}.hero-score{min-width:110px;text-align:center;background:var(--ink);color:white;border-radius:18px;padding:18px}.hero-score strong{display:block;font-size:2rem}.hero-score span{font-size:.8rem;color:#cbd5e1}
.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}.module-card{background:white;border:1px solid var(--line);border-radius:20px;padding:24px;text-align:left;color:var(--ink);box-shadow:var(--shadow);transition:.18s}.module-card:active{transform:scale(.98)}.module-card .icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#eef2ff;color:var(--accent2);font-weight:900;margin-bottom:28px}.module-card strong{display:block;font-size:1.2rem}.module-card small{color:var(--muted);display:block;margin-top:6px;line-height:1.45}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-head h2{margin:3px 0 0}.ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:inherit;padding:10px 14px;border-radius:12px}.section-head .ghost,.toolbar .ghost{border-color:var(--line);background:white}.primary,#newBatchBtn,#newReadingBtn{background:var(--ink);color:white;padding:12px 16px;border-radius:13px;font-weight:800}.toolbar{padding:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}.toolbar label{display:grid;gap:6px;color:var(--muted);font-size:.82rem}.toolbar select{border:1px solid var(--line);background:white;border-radius:12px;padding:11px}
.vocab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.vocab-card{background:white;border:1px solid var(--line);border-radius:18px;padding:16px;position:relative}.vocab-card h3{margin:0;font-size:1.25rem}.vocab-card .meaning{font-weight:800;margin-top:8px}.vocab-card p{color:var(--muted);font-size:.88rem;line-height:1.5}.speak{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:12px;background:#eef2ff}.tag{display:inline-block;font-size:.7rem;padding:4px 8px;border-radius:999px;background:#edf7f2;color:#18714d;font-weight:800}.star{position:absolute;right:12px;bottom:12px;background:transparent;font-size:1.2rem;color:#aab4c4}.star.on{color:var(--accent)}
.progress{height:9px;background:#dde4ef;border-radius:999px;overflow:hidden;margin-bottom:15px}.progress span{display:block;height:100%;width:0;background:var(--accent2);transition:.2s}.question{padding:24px}.question h3{font-size:1.35rem;margin-top:4px}.question .prompt{font-size:1.05rem;line-height:1.75}.options{display:grid;gap:10px;margin-top:20px}.option{padding:15px;border:1px solid var(--line);background:white;border-radius:14px;text-align:left;color:var(--ink)}.option.correct{border-color:var(--ok);background:#edf9f3}.option.wrong{border-color:var(--bad);background:#fff0f2}.answer-input{width:100%;padding:15px;border:1px solid var(--line);border-radius:14px;margin-top:15px}.submit-row{display:flex;justify-content:flex-end;margin-top:14px}.feedback{padding:12px;border-radius:12px;margin-top:14px;background:#f1f5f9;line-height:1.5}
.lesson-list{display:grid;gap:12px}.lesson{background:white;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:15px;align-items:center;text-align:left;color:var(--ink)}.lesson.locked{opacity:.5}.level-badge{width:50px;height:50px;border-radius:16px;background:var(--ink);color:white;display:grid;place-items:center;font-weight:900}.lesson strong{display:block}.lesson small{color:var(--muted)}.lesson-body{padding:24px;line-height:1.75}.lesson-body .example{background:#f5f7fb;border-left:4px solid var(--accent2);padding:14px;border-radius:10px;margin:14px 0}.lesson-body .quiz{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.reading-card{padding:24px}.passage{line-height:1.9;font-size:1rem;background:#fafbfe;border:1px solid var(--line);padding:18px;border-radius:16px}.reading-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.reading-meta span{background:#eef2ff;color:#3249a8;border-radius:999px;padding:6px 9px;font-size:.75rem;font-weight:800}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.stat{background:white;border:1px solid var(--line);border-radius:17px;padding:16px}.stat strong{display:block;font-size:1.55rem}.stat span{font-size:.78rem;color:var(--muted)}.tabs{display:flex;gap:8px;margin:12px 0}.tab{padding:10px 13px;border-radius:12px;background:#e9eef6;color:var(--ink)}.tab.active{background:var(--ink);color:white}#studyroomContent{padding:18px;min-height:190px}.review-item{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.review-item:last-child{border-bottom:0}.empty{color:var(--muted);text-align:center;padding:40px 10px}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:30;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{background:transparent;color:var(--muted);padding:10px 4px;font-size:.72rem}.bottom-nav span{display:block;font-weight:900;font-size:1rem;color:var(--ink);margin-bottom:2px}
.mascot-overlay{position:fixed;inset:0;background:rgba(20,33,61,.72);z-index:100;display:grid;place-items:center;padding:20px}.mascot-overlay.hidden,.hidden{display:none!important}.mascot-card{background:white;border-radius:28px;padding:30px;text-align:center;min-width:min(340px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.25)}.panda{width:150px;height:135px;background:white;border:5px solid #111;border-radius:50% 50% 44% 44%;margin:10px auto 20px;position:relative;animation:happyDance .55s infinite alternate}.panda .ear{position:absolute;width:44px;height:44px;background:#111;border-radius:50%;top:-23px}.panda .ear.left{left:9px}.panda .ear.right{right:9px}.panda .eye{position:absolute;width:31px;height:42px;background:#111;border-radius:50%;top:37px}.panda .eye:after{content:"";position:absolute;width:8px;height:11px;background:white;border-radius:50%;top:10px;left:11px}.panda .eye.left{left:28px;transform:rotate(18deg)}.panda .eye.right{right:28px;transform:rotate(-18deg)}.panda .nose{position:absolute;width:20px;height:13px;background:#111;border-radius:50%;top:80px;left:60px}.panda .mouth{position:absolute;width:30px;height:15px;border-bottom:4px solid #111;border-radius:50%;top:91px;left:55px}.panda .arm{position:absolute;width:36px;height:64px;background:#111;border-radius:20px;top:76px}.panda .arm.left{left:-18px;transform:rotate(28deg)}.panda .arm.right{right:-18px;transform:rotate(-28deg)}.mascot-card.sad .panda{animation:sadBob 1s infinite}.mascot-card.sad .panda .mouth{border-bottom:0;border-top:4px solid #111;top:104px}.mascot-card.sad .panda .arm.left{transform:rotate(-5deg)}.mascot-card.sad .panda .arm.right{transform:rotate(5deg)}
@keyframes happyDance{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(7deg) translateY(-8px)}}@keyframes sadBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(max-width:680px){.module-grid,.vocab-grid{grid-template-columns:1fr}.hero{align-items:flex-start}.hero-score{min-width:88px}.stats-grid{grid-template-columns:1fr 1fr}.topbar{padding:18px}.topbar h1{font-size:1.1rem}.toolbar>*{flex:1}.toolbar label{min-width:100%}}