:root{--ink:#3f3a5c;--ink-soft:#77708f;--card:#ffffffe0;--accent:#ff7a8a;--cream:#fffaf0;--wood:#e9c9a0;--wood-dark:#c99a68;font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Noto Sans KR,system-ui,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;height:100%;color:var(--ink);background:var(--cream);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;margin:0;overflow:hidden}#app{background:radial-gradient(circle at 12% 18%, #fdd8d8 0 9vmin, transparent 9.2vmin), radial-gradient(circle at 88% 14%, #cff1fc 0 7vmin, transparent 7.2vmin), radial-gradient(circle at 92% 86%, #fdf2c3 0 11vmin, transparent 11.2vmin), radial-gradient(circle at 6% 90%, #eddafb 0 8vmin, transparent 8.2vmin), linear-gradient(180deg, var(--cream) 0%, #fff3e6 100%);position:fixed;top:0;bottom:0;left:0;right:0}button{font:inherit;color:inherit;cursor:pointer}[hidden]{display:none!important}.screen{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.start-screen{text-align:center;padding-left:calc(env(safe-area-inset-left) + 16px);padding-right:calc(env(safe-area-inset-right) + 16px);justify-content:center;align-items:center;gap:3vmin}.title{letter-spacing:-.02em;gap:.04em;margin:0;font-size:clamp(40px,10vmin,84px);font-weight:900;display:flex}.title-char{color:hsl(var(--h) 70% 52%);text-shadow:0 .06em 0 hsl(var(--h) 80% 85%)}.title-char:nth-child(2n){transform:translateY(.08em)}.scale-chips{flex-wrap:wrap;justify-content:center;gap:1.2vmin;display:flex}.scale-chip{color:#fff;background:hsl(var(--h) 75% 62%);width:clamp(34px,7vmin,56px);height:clamp(34px,7vmin,56px);box-shadow:0 .6vmin 0 hsl(var(--h) 60% 48%);border-radius:50%;place-items:center;font-size:clamp(15px,3vmin,24px);font-weight:800;display:grid}.subtitle{color:var(--ink-soft);margin:0;font-size:clamp(18px,3.4vmin,28px)}.start-btn{color:#fff;text-shadow:0 .04em #0000002e;background:linear-gradient(90deg,#f25f5f,#f59847,#f4ce34,#53c653,#3cb4dd,#687fdf,#b079d8);border:0;border-radius:12vmin;width:min(80vw,520px);height:min(36vh,260px);min-height:140px;font-size:clamp(40px,11vmin,88px);font-weight:800;transition:transform .12s ease-out;box-shadow:0 2.4vmin #3f3a5c2e}.start-btn:active{transform:scale(.97)}.hint{max-width:34em;color:var(--ink-soft);margin:0;font-size:14px}.topbar{background:#fff9;border-bottom:2px dashed #3f3a5c26;flex:none;align-items:center;gap:12px;min-height:52px;padding:6px 12px;display:flex}.gear-btn{background:var(--card);touch-action:none;border:1px solid #4a3f6640;border-radius:20px;align-items:center;gap:6px;min-height:40px;padding:0 12px;font-size:14px;display:inline-flex;position:relative;overflow:hidden}.gear-progress{background:var(--accent);width:0;height:4px;position:absolute;bottom:0;left:0}.gear-btn.holding .gear-progress{width:100%;transition:width .6s linear}.notice{min-width:0;color:var(--ink-soft);flex:1;font-size:14px}.notice.warn{color:#b3261e;font-weight:700}.resume-btn{color:#fff;background:#e0526f;border:0;border-radius:20px;min-height:40px;padding:0 14px;font-size:15px;font-weight:700}.stage{isolation:isolate;touch-action:none;flex:1;min-height:0;position:relative}.pads{grid-template-columns:repeat(var(--cols-l,5), 1fr);grid-auto-rows:1fr;gap:2.4vmin;padding:2.4vmin;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}@media (orientation:portrait){.pads{grid-template-columns:repeat(var(--cols-p,2), 1fr)}}.pad{background:hsl(var(--h) 80% 82%);min-height:0;box-shadow:inset 0 -1.2vmin 0 hsl(var(--h) 70% 70% / .6);touch-action:none;border:0;border-radius:6vmin;flex-direction:column;justify-content:center;align-items:center;gap:1vmin;transition:transform .14s ease-out,background-color .2s ease-out;display:flex}.pads[data-mode=piano]{flex-direction:column;gap:1.6vmin;padding:2vmin 3vmin;display:flex}.piano-row{--pad:1.2vmin;--gap:.8vmin;--white-w:calc((100% - 2 * var(--pad) - 6 * var(--gap)) / 7);align-self:center;gap:var(--gap);width:100%;max-width:110vmin;min-height:0;padding:var(--pad);background:linear-gradient(#fff,#fff1f5);border-radius:3.2vmin;flex:1;display:flex;position:relative;box-shadow:0 .8vmin #ff7a8a40,inset 0 0 0 .4vmin #ff7a8a2e}.piano-key{--l:64;touch-action:none;min-height:0}.piano-key[data-octave="3"]{--l:56}.piano-key[data-octave="5"]{--l:72}.key-white{background:linear-gradient(180deg, hsl(var(--h) 90% calc((var(--l) + 14) * 1%)), hsl(var(--h) 80% calc(var(--l) * 1%)));box-shadow:inset 0 -.9vmin 0 hsl(var(--h) 70% calc((var(--l) - 14) * 1%) / .6);border-radius:1.2vmin 1.2vmin 3vmin 3vmin;flex:1;justify-content:flex-end;padding-bottom:1.4vmin;position:relative}.key-white:before{content:"";pointer-events:none;background:#ffffff73;border-radius:99px;width:18%;height:34%;position:absolute;top:1vmin;left:22%}.key-black{z-index:2;top:var(--pad);left:calc(var(--pad) + var(--slot) * var(--white-w) + (var(--slot) - .5) * var(--gap));width:calc(var(--white-w) * .62);background:linear-gradient(180deg, hsl(var(--h) 65% calc((var(--l) - 16) * 1%)), hsl(var(--h) 60% calc((var(--l) - 26) * 1%)));border:.4vmin solid #fff;border-top:0;border-radius:0 0 2.2vmin 2.2vmin;justify-content:flex-end;height:56%;padding-bottom:1vmin;position:absolute;transform:translate(-50%);box-shadow:0 .6vmin #3f3a5c40}.key-black:before{content:"★";color:hsl(var(--h) 90% 80% / .9);pointer-events:none;font-size:clamp(8px,2vmin,16px);position:absolute;top:.8vmin;left:50%;transform:translate(-50%)}.piano-key.key-white.pressed{background:linear-gradient(180deg, hsl(var(--h) 95% calc((var(--l) + 6) * 1%)), hsl(var(--h) 85% calc((var(--l) - 8) * 1%)));transform:translateY(.6vmin)}.piano-key.key-black.pressed{background:linear-gradient(180deg, hsl(var(--h) 80% calc((var(--l) - 6) * 1%)), hsl(var(--h) 70% calc((var(--l) - 16) * 1%)));transform:translate(-50%)translateY(.6vmin)}.piano-key .pad-label{color:#fff;text-shadow:0 .3vmin 0 hsl(var(--h) 60% 30% / .6);flex-direction:column;align-items:center;font-size:clamp(14px,4vmin,38px);line-height:1.05;display:flex}.key-black .pad-label{font-size:clamp(10px,2.4vmin,22px)}.key-white[data-octave="5"] .pad-label:before,.key-white[data-octave="3"] .pad-label:after{content:"●";font-size:.4em;line-height:1.2}.pads[data-mode=song]{flex-direction:column;gap:2vmin;padding:2.4vmin;display:flex}.song-picker{flex:none;align-items:center;gap:1.6vmin;display:flex}.song-nav{background:var(--card);width:clamp(52px,12vmin,88px);height:clamp(48px,10vmin,72px);color:var(--ink-soft);touch-action:none;border:0;border-radius:99px;flex:none;font-size:clamp(18px,4vmin,30px);box-shadow:0 .5vmin #3f3a5c1a}.song-nav:active{transform:scale(.94)}.song-current{color:inherit;touch-action:none;border:3px solid var(--accent);background:#ffe8eb;border-radius:99px;flex:1;justify-content:center;align-items:center;gap:1.2vmin;min-width:0;min-height:clamp(48px,10vmin,72px);padding:0 2vmin;font-size:clamp(16px,3.8vmin,28px);font-weight:800;display:flex}.song-current-emoji{font-size:1.3em}.song-current-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.song-current-toggle{color:#fff;background:var(--accent);border-radius:99px;flex:none;padding:.4vmin 1.6vmin;font-size:.62em}.song-current-count{color:var(--ink-soft);flex:none;font-size:.7em;font-weight:700}.song-list{flex:1;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:1.2vmin;min-height:0;display:grid}@media (orientation:portrait){.song-list{grid-template-columns:repeat(3,1fr)}}.song-item{background:var(--card);touch-action:none;border:3px solid #0000;border-radius:2.4vmin;flex-direction:column;justify-content:center;align-items:center;gap:.4vmin;min-height:0;padding:.6vmin;display:flex;box-shadow:0 .5vmin #3f3a5c14}.song-item[aria-pressed=true]{border-color:var(--accent);background:#ffe8eb}.song-item:active{transform:scale(.96)}.song-item-emoji{pointer-events:none;font-size:clamp(20px,5vmin,40px);line-height:1}.song-item-title{text-align:center;word-break:keep-all;pointer-events:none;max-width:100%;font-size:clamp(12px,2.8vmin,20px);font-weight:800;line-height:1.2}.song-strip{--cell:clamp(40px, 9vmin, 72px);--step:calc(var(--cell) + 1.6vmin);height:calc(var(--cell) * 1.95);border-radius:calc(var(--cell) * .6);background:#ffffff8c;flex:none;position:relative;overflow:hidden}.song-track{top:calc(50% - var(--cell) * .22);transform:translate(calc(var(--pos,0) * var(--step) * -1 - var(--cell) / 2), -50%);gap:1.6vmin;transition:transform .25s ease-out;display:flex;position:absolute;left:50%}.song-note{width:var(--cell);height:var(--cell);font-size:calc(var(--cell) * .42);color:#fff;background:hsl(var(--h) 75% 62%);opacity:.55;border-radius:50%;flex:none;place-items:center;font-weight:800;transition:transform .2s ease-out,opacity .2s ease-out;display:grid;position:relative}.song-note.sharp{font-size:calc(var(--cell) * .32);background:hsl(var(--h) 50% 40%)}.song-note.done{opacity:.22}.song-note.now{opacity:1;box-shadow:0 0 0 .5vmin #fff, 0 .6vmin 1.4vmin hsl(var(--h) 70% 40% / .45);animation:.32s ease-out note-pop;transform:scale(1.22)}@keyframes note-pop{0%{transform:scale(.9)}55%{transform:scale(1.36)}to{transform:scale(1.22)}}.song-note.next{opacity:1;color:hsl(var(--h) 60% 40%);box-shadow:inset 0 0 0 .6vmin hsl(var(--h) 75% 62%);outline:.5vmin dashed hsl(var(--h) 75% 62%);outline-offset:.5vmin;background:#fff;animation:1.1s ease-in-out infinite note-next}.song-note.next:after{content:"다음 👆";white-space:nowrap;color:#fff;background:hsl(var(--h) 65% 50%);border-radius:99px;padding:.2vmin 1.2vmin;font-size:clamp(11px,2.4vmin,18px);position:absolute;top:calc(100% + 1.2vmin);left:50%;transform:translate(-50%)}@keyframes note-next{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.song-note.now,.song-note.next{animation:none}}.pad-song{--h:45;background:linear-gradient(135deg,#fdeba5,#fcc99c);flex:1}.pad-song-emoji{pointer-events:none;font-size:clamp(64px,20vmin,180px);line-height:1}.pad-song-text{color:#7a4f29;pointer-events:none;font-size:clamp(18px,4.4vmin,36px);font-weight:800}.pad.pressed{background:hsl(var(--h) 85% 76%);transform:scale(.965)}.pad-label{color:hsl(var(--h) 40% 35%);pointer-events:none;font-size:clamp(22px,6vmin,52px);font-weight:800}.pad-emoji{pointer-events:none;font-size:clamp(40px,11vmin,110px);line-height:1}.pad-name{color:hsl(var(--h) 40% 30%);pointer-events:none;font-size:clamp(15px,3.2vmin,28px);font-weight:800}.bubble-layer{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.bubble{opacity:0;will-change:transform, opacity;flex-direction:column;justify-content:center;align-items:center;animation:1.9s ease-out forwards bubble-float;display:flex;position:absolute;transform:translate(-50%,-50%)scale(.6)}.bubble-shape-0,.bubble-shape-1,.bubble-shape-2{background:hsl(var(--h) 80% 64% / .85);width:26vmin;height:26vmin}.bubble-shape-0{border-radius:50%}.bubble-shape-1{border-radius:28%}.bubble-shape-2{border-radius:50% 50% 50% 8%}.bubble-note{color:#fff;text-shadow:0 .4vmin 0 hsl(var(--h) 60% 38% / .5);font-size:clamp(32px,9vmin,80px);font-weight:900}.bubble-animal{gap:.6vmin}.bubble-emoji{font-size:clamp(80px,26vmin,220px);line-height:1}.bubble-label{color:#fff;background:hsl(var(--h) 55% 45% / .9);border-radius:99px;padding:.4vmin 2.4vmin;font-size:clamp(20px,5vmin,40px);font-weight:800}@keyframes bubble-float{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}22%{opacity:.95}to{opacity:0;transform:translate(-50%,-78%)scale(1.12)}}@media (prefers-reduced-motion:reduce){.bubble{animation-duration:1.2s}@keyframes bubble-float{0%{opacity:0;transform:translate(-50%,-50%)scale(.9)}25%{opacity:.95}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}}.panel-backdrop{z-index:100;padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 12px);background:#3f3a5c73;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.panel{-webkit-user-select:text;user-select:text;background:#fff;border-radius:22px;width:min(100%,520px);max-height:100%;padding:18px;overflow-y:auto}.panel h2{margin:0 0 12px;font-size:20px}.row{flex-direction:column;gap:8px;margin-bottom:14px;display:flex}.row-label{font-size:15px;font-weight:700}.segmented{gap:8px;display:flex}.segmented button,.panel .wide{background:#fff;border:2px solid #4a3f6633;border-radius:14px;flex:1;min-height:52px;font-size:17px;font-weight:700}.segmented button[aria-pressed=true]{border-color:var(--accent);background:#ffe8eb}.panel button:focus-visible{outline-offset:2px;outline:3px solid #ff7a8a73}.panel input:focus-visible{outline-offset:2px;outline:3px solid #ff7a8a73}.panel button:focus:not(:focus-visible){outline:none}.panel .primary{color:#fff;background:var(--accent);border-color:#0000}.panel input[type=range]{width:100%;height:36px;accent-color:var(--accent)}.diag{color:var(--ink-soft);grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 14px;font-size:13px;display:grid}.diag dt{font-weight:700}.diag dd{overflow-wrap:anywhere;margin:0}.actions{flex-direction:row;margin-bottom:0}