:root{font-family:Zen Maru Gothic,Noto Sans KR,sans-serif;--ink: #0f172a;--muted: #64748b;--good: #16a34a;--bad: #dc2626;--teal: #db2777;--cyan: #ec4899;--card: rgba(255, 255, 255, .92);--shadow: 0 16px 44px rgba(15, 23, 42, .14);--bg: #fff1f7}body[data-theme=dark]{--ink: #e2e8f0;--muted: #94a3b8;--card: rgba(15, 23, 42, .92);--shadow: 0 16px 44px rgba(2, 6, 23, .5);--bg: #020617}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 10% 10%,#ffd9ee,transparent 34%),radial-gradient(circle at 80% 14%,#ffe4f3,transparent 35%),radial-gradient(circle at 20% 90%,#ffd1e6,transparent 35%),var(--bg)}.app{max-width:1280px;margin:0 auto;padding:26px 5vw 48px;display:grid;gap:14px}.hero{background:linear-gradient(120deg,#db2777f2,#ec4899f2);color:#f8fafc;border-radius:22px;padding:20px;box-shadow:var(--shadow)}.hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.eyebrow{margin:0;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase}h1{margin:7px 0;font-size:clamp(2rem,1.8rem + 1.3vw,3.05rem)}.sub{margin:0;opacity:.95}.top-actions{display:flex;gap:8px;align-items:center}.menu-wrap{position:relative}.menu-btn{border:1px solid rgba(255,255,255,.5);background:#fff3;color:#fff;border-radius:999px;padding:7px 12px;font-weight:700;cursor:pointer}.menu-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.35)}.menu-btn.icon{width:38px;height:38px;padding:0;font-size:1.1rem;display:grid;place-items:center}.menu-list{position:absolute;top:40px;right:0;min-width:180px;background:#fff;color:#0f172a;border-radius:10px;box-shadow:var(--shadow);padding:8px;display:grid;z-index:30}.menu-list a{text-decoration:none;color:#0f172a;padding:8px;border-radius:8px}.menu-list a:hover{background:#f1f5f9}.track-tabs{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.track-tab{border:1px solid rgba(255,255,255,.42);background:#ffffff29;color:#fff;border-radius:14px;padding:10px;text-align:center;cursor:pointer}.track-tab strong{font-size:.92rem}.track-tab.active{background:#fff;color:#be185d;border-color:#fff}.top-scores{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px}.grand-score{background:linear-gradient(120deg,#831843,#be185d);color:#f8fafc;border-radius:16px;padding:14px;box-shadow:var(--shadow);display:grid}.grand-score span{font-size:.85rem;opacity:.86}.grand-score strong{font-size:clamp(1.65rem,1.6rem + .9vw,2.2rem);line-height:1.1}.grand-score em{margin-top:3px;font-style:normal;color:#facc15;font-weight:900;letter-spacing:.08em;font-size:clamp(2rem,1.9rem + 1.2vw,3rem)}.grand-score small{color:#cbd5e1;font-size:.85rem}.grand-score.pop{animation:scorePop .42s ease}@keyframes scorePop{0%{transform:scale(1)}45%{transform:scale(1.06)}to{transform:scale(1)}}.mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.stat{background:var(--card);border-radius:14px;padding:10px;box-shadow:var(--shadow);display:grid}.stat span{font-size:.75rem;color:var(--muted)}.stat strong{font-size:1.1rem}.main-grid{display:grid;grid-template-columns:1fr;gap:12px}.card{background:var(--card);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.play-card.hit-wrong{animation:wrongFlash .42s ease}@keyframes wrongFlash{0%{transform:translate(0);box-shadow:var(--shadow)}20%{transform:translate(-6px);box-shadow:0 0 0 2px #dc262633}40%{transform:translate(6px);box-shadow:0 0 0 4px #dc26262e}60%{transform:translate(-4px);box-shadow:0 0 0 2px #dc262624}to{transform:translate(0);box-shadow:var(--shadow)}}.card-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin-bottom:10px}.mode{background:#fce7f3;color:#831843;padding:6px 10px;border-radius:999px;font-weight:700}.level-desc{margin:0 0 10px;color:var(--muted);font-size:.92rem}.level-selector{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.level-btn{border-radius:999px;border:1px solid #f5b4d4;background:#fff7fb;color:#831843;padding:7px 11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.level-btn.current{background:#fce7f3;border-color:#db2777;color:#831843}.level-btn:disabled{opacity:.42;cursor:not-allowed}.level-clear{background:#16a34a;color:#fff;border-radius:999px;padding:1px 7px;font-size:.68rem;line-height:1.3;font-weight:800}.quick-tools{margin-bottom:10px}.quick-tools{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:999px;padding:7px 12px;font-weight:700;cursor:pointer}.chip.on{background:#fce7f3;border-color:#db2777}.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}.hud-item{background:#fff7fb;border-radius:10px;padding:8px;display:grid}.hud-item span{font-size:.75rem;color:var(--muted)}.hud-item strong{font-size:1rem}.xp{margin-bottom:12px}.xp-label{font-size:.8rem;color:var(--muted);margin-bottom:6px}.xp-bar{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}.xp-fill{height:100%;background:linear-gradient(120deg,var(--teal),var(--cyan));transition:width .2s ease}.prompt{margin:16px 0 14px;text-align:center;font-size:clamp(2.1rem,1.95rem + 1.4vw,3.2rem);font-weight:800}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.choice{border:2px solid transparent;border-radius:14px;padding:14px 10px;background:#f8fafc;color:#0f172a;font-size:1rem;cursor:pointer;transition:transform .15s ease}.choice:hover:not(:disabled){transform:translateY(-2px)}.choice.correct{border-color:var(--good);background:#16a34a1a}.choice.wrong{border-color:var(--bad);background:#dc26261a}.feedback{min-height:24px;margin-top:12px}.feedback p{margin:0;font-weight:700}.feedback .correct{color:var(--good)}.feedback .wrong{color:var(--bad)}.feedback .hint{color:var(--muted)}.empty{background:#fff7fb;border-radius:12px;padding:16px;text-align:center;color:var(--muted)}.primary,.ghost{border:none;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer}.primary{background:linear-gradient(120deg,var(--teal),var(--cyan));color:#fff}.ghost{background:#fff7fb;border:1px solid #f5b4d4;color:#831843}.clear-box{margin-top:10px;border-radius:14px;border:1px solid #f9a8d4;background:#fdf2f8;padding:14px}.clear-title{margin:0 0 8px;font-size:1.1rem;font-weight:800}.clear-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.danger{color:var(--bad);font-weight:800}.wrong-actions{display:flex;gap:8px}.wrong-note-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.wrong-note-item{display:grid;grid-template-columns:1.4fr 1.4fr 1fr auto;gap:8px;align-items:center;background:#f8fafc;border-radius:12px;padding:10px 12px}.wrong-note-item strong{font-size:1.05rem}.wrong-note-item span{color:var(--muted)}.wrong-note-item em{color:var(--ink);font-style:normal;font-weight:700}.wrong-note-item b{color:#b91c1c}@media (max-width: 980px){.track-tabs{grid-template-columns:1fr 1fr}.top-scores{grid-template-columns:1fr}.mini-stats{grid-template-columns:repeat(2,1fr)}.wrong-note-item{grid-template-columns:1fr}}.menu-btn.active{background:#fff;color:#0f766e}.fail-popup{margin-top:12px;padding:12px;border-radius:14px;border:1px solid #fecaca;background:#fff1f2}.fail-inner h3{margin:0 0 8px;color:#9f1239}.fail-inner p{margin:0 0 10px;color:#881337}body[data-theme=dark] .menu-list{background:#0f172a;color:#e2e8f0}body[data-theme=dark] .hero{background:linear-gradient(120deg,#1e293bf5,#581c87eb)}body[data-theme=dark] .grand-score{background:linear-gradient(120deg,#1e293b,#4c1d95)}body[data-theme=dark] .menu-list a{color:#e2e8f0}body[data-theme=dark] .menu-list a:hover{background:#1e293b}body[data-theme=dark] .stat,body[data-theme=dark] .card,body[data-theme=dark] .level-btn,body[data-theme=dark] .chip,body[data-theme=dark] .hud-item,body[data-theme=dark] .empty,body[data-theme=dark] .ghost,body[data-theme=dark] .choice{background:#1e293b;color:#e2e8f0;border-color:#334155}body[data-theme=dark] .menu-btn{border-color:#ffffff5c;background:#ffffff1f}body[data-theme=dark] .menu-btn.active{background:#312e81;color:#e2e8f0;border-color:#6366f1}body[data-theme=dark] .track-tab{border-color:#ffffff4d;background:#ffffff14}body[data-theme=dark] .primary{background:linear-gradient(120deg,#7c3aed,#4f46e5)}body[data-theme=dark] .ghost{background:#1e293b;color:#e2e8f0;border-color:#475569}body[data-theme=dark] .wrong-note-item{background:#1e293b;border:1px solid #334155}body[data-theme=dark] .wrong-note-item em{color:#e2e8f0}body[data-theme=dark] .choice.correct{border-color:#22c55e;background:#22c55e33;color:#dcfce7}body[data-theme=dark] .choice.wrong{border-color:#f87171;background:#f8717133;color:#fee2e2}body[data-theme=dark] .feedback .correct{color:#4ade80}body[data-theme=dark] .feedback .wrong{color:#fda4af}body[data-theme=dark] .mode{background:#134e4a;color:#ccfbf1}body[data-theme=dark] .track-tab.active{background:#312e81;color:#e0e7ff;border-color:#818cf8}body[data-theme=dark] .xp-bar{background:#334155}body[data-theme=dark] .fail-popup{background:#3f1d2e;border-color:#be123c}body[data-theme=dark] .fail-inner h3,body[data-theme=dark] .fail-inner p{color:#fecdd3}