:root{--font:"Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--radius:16px}.app,.center-screen{--bg:#e8e6f4;--bg2:#dcd9ee;--panel:#fff;--panel-soft:#f3f1fb;--text:#25223a;--muted:#6a6585;--line:#d3cfe8;--accent:#7b6cf6;--accent-ink:#fff;--accent2:#5aaee8;--good:#2f9e6e;--warn:#d9822b;--danger:#d6385b;--heat:#ff8a3d;--shadow:0 6px 18px #3c327824}.app[data-persona=dark]{--bg:#0e0914;--bg2:#160d1f;--panel:#1d1228;--panel-soft:#261633;--text:#f3eaf8;--muted:#a995bb;--line:#3a2349;--accent:#ff2e5f;--accent-ink:#fff;--accent2:#b45cff;--good:#52d6a0;--warn:#ffb04a;--danger:#ff5c7d;--heat:#ff2e5f;--shadow:0 6px 22px #ff2e5f1f}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{font-family:var(--font);color:#25223a;background:radial-gradient(circle at 20% 10%,#2a1d4a,#0b0812 70%);margin:0;font-size:15px;line-height:1.45}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{background:var(--bg);max-width:480px;min-height:100dvh;color:var(--text);flex-direction:column;margin:0 auto;transition:background-color .4s,color .4s;display:flex;position:relative;box-shadow:0 0 60px #00000080}.main{padding:8px 14px calc(80px + env(safe-area-inset-bottom));flex:1}.screen{flex-direction:column;gap:9px;display:flex}.center-screen{text-align:center;background:var(--bg);max-width:480px;min-height:100dvh;color:var(--text);flex-direction:column;justify-content:center;align-items:center;gap:14px;margin:0 auto;padding:32px 20px;display:flex}.center-screen h1{font-size:20px}.btn-col{flex-direction:column;gap:10px;width:100%;display:flex}.paste{border:1px solid var(--line);width:100%;font:inherit;background:var(--panel);color:var(--text);border-radius:12px;padding:10px}.topbar{z-index:20;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;display:flex;position:sticky;top:0}.resources{border:1px solid var(--line);background:var(--panel);cursor:pointer;text-align:left;border-radius:14px;flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:48px;padding:6px 8px;display:grid}.res{overflow-wrap:anywhere;flex-wrap:wrap;align-items:baseline;gap:4px;min-width:0;display:flex}.res i{font-style:normal}.res strong{font-variant-numeric:tabular-nums;font-size:16px}.res small{color:var(--muted);font-size:11px}.icon-btn{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:14px;width:48px;height:48px;font-size:20px}.zero-note{color:var(--muted);flex-basis:100%;padding:0 4px;font-size:12.5px}.banner{padding:8px 14px;font-size:13px}.banner-warn{color:#5b3a00;background:#ffe8c2}.tabs{z-index:30;width:100%;max-width:480px;padding-bottom:env(safe-area-inset-bottom);background:var(--panel);border-top:1px solid var(--line);grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -4px 16px #0000001f}.tab{min-height:60px;color:var(--muted);cursor:pointer;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:12px;display:flex}.tab span:first-child{font-size:20px}.tab-on{color:var(--accent);box-shadow:inset 0 3px 0 var(--accent);font-weight:700}.section-title{margin-top:2px;font-size:17px}.sub-title{color:var(--muted);margin-top:6px;font-size:14px}.muted{color:var(--muted);font-size:13px}.fineprint{color:var(--muted);font-size:11.5px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:8px;padding:14px;display:flex}.card h3{font-size:15px}.card-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.empty{color:var(--muted);text-align:center;border:1px dashed var(--line);border-radius:12px;padding:10px;font-size:13px}.song-title{font-size:19px;font-weight:800;line-height:1.3}.reward-list,.req-list,.comments{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.req-list .ok{color:var(--good)}.comments li{background:var(--panel-soft);border-radius:12px;padding:8px 10px;font-size:13.5px}.badge{vertical-align:middle;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700;display:inline-block}.badge-normal{color:#34437a;background:#dbe6ff}.badge-dark{color:#ff9db8;background:#4a1330}.btn{cursor:pointer;background:var(--panel-soft);min-height:46px;color:var(--text);border:1px solid #0000;border-radius:14px;padding:10px 16px;font-weight:700;transition:transform 80ms,opacity .2s}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible,.tab:focus-visible,.switch-btn:focus-visible,.work-pad:focus-visible,.tap-pad:focus-visible,.hint:focus-visible,.resources:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-accent{background:var(--accent2);color:#fff}.btn-ghost{border-color:var(--line);background:0 0}.btn-danger{background:var(--danger);color:#fff}.btn-wide{width:100%}.btn-row{flex-wrap:wrap;gap:8px;display:flex}.btn-row .btn{flex:1;min-width:120px}.progress{background:var(--panel-soft);border:1px solid var(--line);border-radius:999px;height:10px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent2), var(--accent));height:100%;transition:width .25s}.scene-frame{border:2px solid var(--line);box-shadow:var(--shadow);border-radius:20px;transition:box-shadow .4s,border-color .4s;position:relative;overflow:hidden}.scene-hot{border-color:var(--heat);box-shadow:0 0 0 3px color-mix(in srgb, var(--heat) 45%, transparent), 0 0 24px color-mix(in srgb, var(--heat) 40%, transparent);animation:2.4s ease-in-out infinite hot-glow}.scene-seized{border-color:var(--warn)}@keyframes hot-glow{50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--heat) 30%, transparent), 0 0 30px color-mix(in srgb, var(--heat) 55%, transparent)}}.scene{--wall:#cdd3ea;--floor:#9ea6c9;--baseboard:#8b93b8;--window:#2c3e6b;--frame:#6b5fa8;--poster:#f2f0fb;--poster-accent:#a89bff;--poster-text:#34306b;--paper:#f8f6ff;--desk:#7a6a9c;--desk-top:#9d8ec2;--hoodie:#8fa3d6;--hoodie-dark:#6f82b8;--skin:#f6d3c0;--skin-shade:#e9bda6;--hair:#3a3358;--ink:#2a2540;width:100%;height:clamp(190px,30dvh,300px);display:block}.scene[data-persona=dark]{--wall:#2a1233;--floor:#1a0b22;--baseboard:#12061a;--window:#1a0626;--frame:#ff2e5f;--poster:#2e1038;--poster-accent:#ff2e5f;--poster-text:#ffd6e2;--paper:#d9c9e6;--desk:#2a1636;--desk-top:#3d2150;--hoodie:#1b1424;--hoodie-dark:#0f0a14;--skin:#ecc3b0;--skin-shade:#d9a891;--hair:#14081c;--ink:#14081c}.poster-title{font:800 10.5px var(--font);fill:var(--poster-text)}.poster-sub{font:700 8px var(--font);fill:var(--poster-text);opacity:.8}.neon{font:800 16px var(--font);fill:#fff;letter-spacing:2px;paint-order:stroke;stroke:var(--poster-accent);stroke-width:2px}.ellipsis{font:800 22px var(--font);fill:var(--ink)}.char-body{transform-origin:180px 260px}.char-work .char-body{animation:.35s ease-out bob}.char-work .mic{transform-origin:224px 178px;animation:.35s ease-out mic-hit}@keyframes bob{40%{transform:translateY(-4px)rotate(-1deg)}}@keyframes mic-hit{40%{transform:rotate(-8deg)}}.eyes{transform-box:fill-box;transform-origin:50%;animation:5s infinite blink}@keyframes blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}.string-light{animation:3s ease-in-out infinite twinkle}.string-light:nth-child(odd){animation-delay:1.2s}@keyframes twinkle{50%{opacity:.45}}.sweat{animation:1.6s ease-in infinite drip}@keyframes drip{60%{opacity:.4;transform:translateY(6px)}}.bubble{color:#25223a;background:#fff;border:2px solid #25223a;border-radius:18px 18px 18px 4px;max-width:62%;padding:9px 12px;font-size:13.5px;font-weight:600;line-height:1.35;animation:.25s ease-out pop;position:absolute;top:10px;left:10px;box-shadow:3px 3px #00000040}.bubble-dark{color:#fff;background:#2a0f3a;border:2px solid #ff2e5f;border-radius:6px 20px;box-shadow:3px 3px #ff2e5f}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.scene-tag{color:#fff;background:#00000073;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;position:absolute;bottom:8px;right:10px}.switch-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.switch-btn{border:2px solid var(--line);background:var(--panel);cursor:pointer;text-align:center;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:58px;padding:8px 10px;display:flex}.switch-btn small{color:var(--muted);font-size:11px}.switch-normal.is-active{color:#25223a;background:linear-gradient(160deg,#e5e9ff,#d6ecff);border-color:#7b6cf6}.switch-normal.is-active small{color:#4a4f7a}.switch-dark.is-active{color:#fff;background:linear-gradient(160deg,#3a0f2a,#2a0f3a);border-color:#ff2e5f}.switch-dark.is-active small{color:#ffb5c9}.switch-btn.is-locked{opacity:.55;border-style:dashed}.lock-reason,.seized-note{color:var(--muted);min-height:1.4em;font-size:12.5px}.seized-note{color:var(--warn);font-weight:600}.heat{flex-direction:column;gap:4px;display:flex}.heat-label{align-items:baseline;gap:8px;font-size:13px;display:flex}.heat-label strong{font-variant-numeric:tabular-nums;font-size:17px}.heat-hint{color:var(--muted);margin-left:auto;font-size:11.5px}.heat-hot .heat-hint{color:var(--heat);font-weight:700}.heat-track{background:var(--panel-soft);border:1px solid var(--line);border-radius:999px;height:14px;position:relative;overflow:hidden}.heat-fill{background:linear-gradient(90deg, #6fb4ea, #ffcf5a 60%, var(--heat));height:100%;transition:width .2s linear}.heat-tick{background:#00000059;width:2px;position:absolute;top:0;bottom:0}.rate-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.rate-row>div{overflow-wrap:anywhere;background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;min-width:0;padding:8px 10px;display:flex}.rate-label{color:var(--muted);font-size:11.5px}.rate-row strong{font-variant-numeric:tabular-nums;font-size:19px}.rate-row small{color:var(--muted);font-size:11px}.rhyme-row{grid-template-columns:1fr auto 1fr;align-items:stretch;gap:8px;display:grid}.rhyme-box{border:2px solid var(--line);background:var(--panel);opacity:.75;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;padding:8px;display:flex}.rhyme-box span{color:var(--muted);font-size:11.5px}.rhyme-box strong{font-variant-numeric:tabular-nums;font-size:20px}.rhyme-active{opacity:1;border-color:var(--accent)}.rhyme-need{text-align:center;color:var(--muted);align-self:center;font-size:11.5px}.rhyme-need b{color:var(--text);font-size:14px}.work-pad{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;min-height:100px;box-shadow:0 8px 0 #00000038, var(--shadow);border:0;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:transform 60ms,box-shadow 60ms;display:flex}.work-pad:active:not(:disabled){transform:translateY(5px);box-shadow:0 3px #00000038}.work-pad-normal{color:#25223a;background:linear-gradient(160deg,#cfd9ff,#b9e0ff)}.work-pad-dark{color:#fff;background:linear-gradient(160deg,#ff2e5f,#8a1fc4)}.work-pad-icon{font-size:28px}.work-pad-label{font-size:20px;font-weight:800}.work-pad-sub{opacity:.75;font-size:11.5px}.pad-dock{bottom:calc(66px + env(safe-area-inset-bottom));z-index:10;background:linear-gradient(to bottom, transparent, var(--bg) 22%);margin-top:-6px;padding-top:14px;position:sticky}.hint{text-align:left;border:1px dashed var(--accent);background:var(--panel-soft);cursor:pointer;border-radius:14px;align-items:flex-start;gap:8px;min-height:44px;padding:10px 12px;font-size:13.5px;display:flex}.before-after{gap:4px;margin:0;font-size:13.5px;display:grid}.before-after>div{justify-content:space-between;gap:8px;display:flex}.before-after dt{color:var(--muted)}.before-after dd{font-variant-numeric:tabular-nums;margin:0}.maxed{color:var(--good);font-weight:700}.tracklist{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.tracklist li{border:1px solid var(--line);background:var(--panel-soft);overflow-wrap:anywhere;border-radius:10px;align-items:baseline;gap:8px;padding:6px 10px;display:flex}.tracklist-small{margin-top:6px}.tracklist-small li{padding:3px 8px;font-size:12.5px}.track-no{width:1.4em;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}.track-title{min-width:0;font-weight:600}.track-tag{background:var(--accent);color:#fff;border-radius:999px;flex:none;padding:0 6px;font-size:11px;font-weight:700}.stage-locked{opacity:.8}.cooldown{color:var(--warn);font-size:13px;font-weight:700}.tour-banner{color:#4a3500;cursor:pointer;background:linear-gradient(160deg,#fff4c4,#ffe28a);border:2px solid #e8c14e;border-radius:14px;min-height:48px;font-weight:800}.stat-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.stat-grid>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:center;padding:10px 4px;display:flex}.stat-grid strong{font-size:20px}.stat-grid span{color:var(--muted);font-size:11.5px}.collection{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.collect{background:var(--panel);border:1px solid var(--line);border-radius:12px;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;display:flex}.collect div{flex-direction:column;min-width:0;display:flex}.collect small{color:var(--muted);font-size:12px}.collect-locked{opacity:.6}.modal-backdrop{z-index:60;background:#08050e9e;justify-content:center;align-items:center;padding:16px;animation:.18s ease-out fade;display:flex;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.modal{background:var(--panel);width:100%;max-width:420px;max-height:88dvh;color:var(--text);border-radius:20px;outline:none;flex-direction:column;gap:12px;padding:18px;animation:.2s ease-out pop;display:flex;overflow:auto;box-shadow:0 20px 60px #00000080}.modal-dark{color:#f3eaf8;background:#1d1228;border:2px solid #ff2e5f}.modal-gold{border:2px solid #e8c14e}.modal-title{font-size:18px}.modal-body{flex-direction:column;gap:10px;display:flex}.modal-footer{justify-content:flex-end;display:flex}.basis{gap:4px 10px;margin:0;font-size:13.5px;display:grid}.basis dt{color:var(--muted);margin-top:6px;font-size:12px}.basis dd{margin:0}.toasts{top:calc(64px + env(safe-area-inset-top));z-index:80;pointer-events:none;flex-direction:column;gap:6px;width:min(92vw,440px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{color:#fff;background:#1e1834f0;border-radius:14px;padding:10px 14px;font-size:13.5px;font-weight:600;animation:.2s ease-out pop;box-shadow:0 6px 18px #00000059}.toast-good{background:#1e6e50f2}.toast-warn{background:#a05014f2}.settings{flex-direction:column;gap:14px;display:flex}.setting-row{justify-content:space-between;align-items:center;gap:12px;min-height:48px;display:flex}.setting-row span{flex-direction:column;display:flex}.setting-row small,.setting-block small{color:var(--muted);font-size:12px}.setting-row input[type=checkbox]{width:26px;height:26px;accent-color:var(--accent)}.setting-block{border-top:1px solid var(--line);flex-direction:column;gap:8px;padding-top:10px;display:flex}.seg{border:1px solid var(--line);border-radius:12px;display:flex;overflow:hidden}.seg button{white-space:nowrap;cursor:pointer;background:0 0;border:0;min-height:44px;padding:0 12px}.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:700}.stage-overlay{z-index:70;color:#fff;background:radial-gradient(circle at 50% 20%,#3b3a6e,#121022 75%);justify-content:center;display:flex;position:fixed;inset:0;overflow:auto}.stage-overlay.stage-dark{background:radial-gradient(circle at 50% 20%,#5a1238,#0c0612 75%)}.stage-play,.stage-result{width:100%;max-width:480px;min-height:100dvh;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex}.stage-result{text-align:center;justify-content:center;align-items:center}.stage-head{justify-content:space-between;gap:10px;display:flex}.stage-head .muted{color:#cfc8ee}.stage-score{text-align:right;flex-direction:column;display:flex}.stage-score strong{font-variant-numeric:tabular-nums;font-size:32px;line-height:1}.stage-score small,.stage-score span{color:#cfc8ee;font-size:11.5px}.stage-lane{justify-content:center;gap:6px;display:flex}.dot{border:2px solid #fff6;border-radius:50%;width:22px;height:22px}.dot-now{background:#ffffff40;border-color:#fff}.dot-perfect{background:#ffd84a;border-color:#ffd84a}.dot-good{background:#5ad7a6;border-color:#5ad7a6}.dot-miss{opacity:.8;background:#ff5c7d;border-color:#ff5c7d}.stage-field{flex:1;justify-content:center;align-items:center;min-height:260px;display:flex;position:relative}.ring{border:5px solid #fff;border-radius:50%;width:96px;height:96px;position:absolute}.ring-approach{border-color:var(--ring,#9fd0ff);will-change:transform}.stage-dark .ring-approach{--ring:#ff6b8f}.ring-now{background:#ffffff38;box-shadow:0 0 22px #fff}.stage-time{color:#cfc8ee;font-variant-numeric:tabular-nums;font-size:15px;position:absolute;bottom:6px}.judge{letter-spacing:1px;font-size:30px;font-weight:900;animation:.6s ease-out forwards judge-pop;position:absolute;top:12px}.judge-perfect{color:#ffd84a}.judge-good{color:#5ad7a6}.judge-miss{color:#ff5c7d}@keyframes judge-pop{0%{opacity:0;transform:scale(.7)}25%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:translateY(-10px)}}.countdown{flex-direction:column;align-items:center;font-size:96px;font-weight:900;display:flex}.countdown small{color:#cfc8ee;font-size:13px;font-weight:500}.pause-note{background:#0000008c;border-radius:20px;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset:0}.tap-pad{letter-spacing:3px;color:#25223a;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;background:linear-gradient(160deg,#cfd9ff,#9fd0ff);border:0;border-radius:24px;min-height:120px;font-size:28px;font-weight:900}.stage-dark .tap-pad{color:#fff;background:linear-gradient(160deg,#ff2e5f,#8a1fc4)}.tap-pad:active{transform:scale(.98)}.stage-overlay .btn-ghost{color:#fff;border-color:#ffffff59}.big-score{font-size:64px;font-weight:900;line-height:1}.big-score small{font-size:18px;font-weight:500}.stage-result .reward-list{align-items:center}.stage-result .muted{color:#cfc8ee}.run-play{max-width:720px}.run-hud{justify-content:space-between;align-items:center;font-weight:700;display:flex}.run-hearts .heart{color:#ff5b8a;margin-right:4px;font-size:24px;font-style:normal}.run-hearts .heart-lost{color:#ffffff38}.run-progress{background:#ffffff29;border-radius:8px;height:8px;overflow:hidden}.run-progress i{background:linear-gradient(90deg,#9fd0ff,#fff);height:100%;display:block}.stage-dark .run-progress i{background:linear-gradient(90deg,#ff6b8f,#ffd1e0)}.run-field{touch-action:none;-webkit-user-select:none;user-select:none;background:#000;border-radius:14px;width:100%;position:relative;overflow:hidden}.run-canvas{width:100%;display:block}.run-countdown{background:#0a08188c;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.run-end{background:#0a081873;justify-content:center;align-items:center;font-size:34px;font-weight:900;display:flex;position:absolute;inset:0}.run-end-win{color:#ffe27a}.reduce-motion *,.reduce-motion :before,.reduce-motion :after{transition:none!important;animation:none!important}.reduce-motion .judge{opacity:1}@media (height<=760px){.scene{height:clamp(150px,25dvh,240px)}.work-pad{min-height:84px}.work-pad-sub{display:none}}@media (width>=520px){.app{border-left:1px solid #fff2;border-right:1px solid #fff2}}.song-title,.collect strong,.pick-title,.album-preview{overflow-wrap:anywhere}