:root{--paper:#f4ead5;--paper-warm:#e8d5b0;--paper-deep:#c4b390;--grapefruit:#e8745a;--apricot:#f4a872;--ink:#1a1410;--ink-soft:#3d2e25;--neon-pink:#ff2e93;--neon-cyan:#00f0ff;--neon-yellow:#fff200}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background:var(--paper);width:100%;height:100%;color:var(--ink);touch-action:none;overscroll-behavior:none;font-family:Gowun Batang,serif;overflow:hidden}.pad{touch-action:none}#stage{background:radial-gradient(ellipse at 30% 15%, #fdf6e0 0%, transparent 55%), radial-gradient(ellipse at 70% 90%, #e8d5b0 0%, transparent 55%), var(--paper);flex-direction:column;justify-content:flex-end;display:flex;position:fixed;inset:0}#stage:before{content:"";pointer-events:none;mix-blend-mode:multiply;opacity:.55;z-index:100;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:absolute;inset:0}.center{flex:none;justify-content:space-around;align-items:center;gap:24px;min-height:0;padding:8px 16px 0;display:flex}.lp-wrap{aspect-ratio:1;flex:none;width:min(38vh,50vw - 28px);position:relative}.lp-wrap:after{content:"";pointer-events:none;z-index:4;mix-blend-mode:screen;background:radial-gradient(at 75% 18%,#fff5dc59 0%,#fff0d21f 25%,#0000 50%);border-radius:50%;position:absolute;inset:0}.lp-shadow{border-radius:50%;position:absolute;inset:4%;box-shadow:0 14px 28px #3c281459,0 4px 12px #28190a40}.lp{transform:rotate(var(--lp-angle,0deg));will-change:transform;touch-action:none;background:repeating-radial-gradient(circle,#ffffff17 0 1px,#0000 1px 6px),radial-gradient(circle at 35% 28%,#2a2018 0%,#120e0a 55%,#050402 100%);border-radius:50%;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 30px #0000008c}.lp.scrubbing{cursor:grabbing}.label{background:#f4a872 url(/assets/cover-hanroro-CJGb-MFr.webp) 50%/cover no-repeat;border-radius:50%;width:52%;height:52%;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:inset 0 0 18px #0000004d,0 0 0 1px #0003}.label.label-gangnam{background:#1a1006 url(/assets/cover-gangnam-VgwfJCxu.webp) 50%/cover no-repeat}.pin{z-index:4;background:radial-gradient(circle at 35% 30%,#d4c4a8 0%,#6e5e44 70%,#2a1f15 100%);border-radius:50%;width:6%;height:6%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 2px #fff6,0 1px 2px #0009}.tonearm{top:var(--ta-top,12%);right:var(--ta-right,12%);width:var(--ta-width,60%);height:var(--ta-height,6px);transform-origin:100%;transform:rotate(var(--ta-rot,-35deg));z-index:5;background:linear-gradient(#e8e2d4 0%,#c4b8a0 50%,#6e6450 100%);border-radius:3px;transition:transform .6s cubic-bezier(.4,0,.2,1);position:absolute;box-shadow:0 2px 4px #0006,inset 0 1px #ffffff80}.tonearm.playing{transform:rotate(var(--ta-rot-playing,-50deg))}.tonearm:before{content:"";right:var(--ta-pivot-offset,-12px);width:var(--ta-pivot-size,24px);height:var(--ta-pivot-size,24px);background:radial-gradient(circle at 35% 30%,#f4ead5 0%,#c4b390 60%,#6e5e44 100%);border-radius:50%;position:absolute;top:50%;transform:translateY(-50%);box-shadow:inset 0 1px 2px #ffffff80,0 2px 4px #00000080}.tonearm:after{content:"";left:var(--ta-cart-left,-4px);top:var(--ta-cart-top,-5px);width:var(--ta-cart-w,16px);height:var(--ta-cart-h,16px);background:linear-gradient(#2a2018 0%,#0a0806 100%);border-radius:3px;position:absolute;box-shadow:inset 0 1px #fff3,0 2px 3px #0009}.player{width:calc(100% - 36px);margin-bottom:max(16px, env(safe-area-inset-bottom));background:radial-gradient(at 30% 20%,#fdf6e0 0%,#f4ead5 35%,#e3d5b8 75%,#c4b390 100%);border-radius:999px;flex:none;align-self:center;align-items:center;gap:14px;padding:8px 14px;display:flex;box-shadow:inset 0 2px 1px #fffcf0f2,inset 0 -6px 10px #8c6e464d,inset 4px 0 8px #fff5dc66,inset -4px 0 8px #8c6e464d,0 1px #fffae6b3,0 2px #c8b896,0 3px #a8967a,0 4px #877555,0 5px #685739,0 6px #4a3e2a,0 8px 12px #503c1e73}.player-btn{cursor:pointer;background:radial-gradient(at 30% 25%,#fdf6e0 0%,#f4ead5 35%,#c4b390 100%);border:none;border-radius:50%;flex:none;width:44px;height:44px;transition:transform 60ms,box-shadow 60ms;position:relative;box-shadow:inset 0 1px #fffcf0e6,inset 0 -2px 4px #8c6e4666,0 2px #9a8866,0 4px #4a3e2a,0 6px 8px #503c1e66}.player-btn:before{content:"";border-left:12px solid var(--ink);border-top:8px solid #0000;border-bottom:8px solid #0000;width:0;height:0;position:absolute;top:50%;left:50%;transform:translate(-35%,-50%)}.player-btn.playing:before{background:linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65% 100%);border:none;width:12px;height:14px;transform:translate(-50%,-50%)}.player-btn:active{transform:translateY(3px);box-shadow:inset 0 1px #fffcf099,inset 0 -1px 2px #8c6e464d,0 1px #4a3e2a,0 2px 4px #503c1e66}.player-bar{appearance:none;background:linear-gradient(90deg, #4a3e2a 0, #4a3e2a calc(var(--seek-pct,0) * 1%), transparent calc(var(--seek-pct,0) * 1%), transparent 100%), linear-gradient(180deg, #c4b390 0%, #9a8866 100%);border-radius:6px;outline:none;flex:auto;height:8px;box-shadow:inset 0 2px 3px #503c1e66,0 1px #fffcf099}.player-bar::-webkit-slider-thumb{appearance:none;cursor:pointer;background:radial-gradient(circle at 30% 30%,#fdf6e0 0%,#c4b390 70%,#6e5e44 100%);border-radius:50%;width:18px;height:18px;box-shadow:inset 0 1px #fffcf0e6,0 2px 4px #0006}.player-bar::-moz-range-thumb{cursor:pointer;background:radial-gradient(circle at 30% 30%,#fdf6e0 0%,#c4b390 70%,#6e5e44 100%);border:none;border-radius:50%;width:18px;height:18px;box-shadow:inset 0 1px #fffcf0e6,0 2px 4px #0006}.pad-grid{flex:none;grid-template-columns:repeat(4,1fr);gap:12px;min-height:0;padding:24px 18px;display:grid}.pad{cursor:pointer;will-change:transform, box-shadow;aspect-ratio:1;border:none;border-radius:12px;justify-content:center;align-items:center;min-width:0;min-height:0;font-weight:700;transition:transform 60ms cubic-bezier(.2,0,.2,1),box-shadow 60ms,filter 60ms;display:flex;position:relative}.pad:after{content:"";pointer-events:none;filter:blur(.6px);z-index:2;background:linear-gradient(#ffffff8c 0%,#ffffff26 50%,#fff0 100%);border-radius:50% 50% 40% 40%/80% 80% 100% 100%;height:38%;transition:opacity .1s,transform 60ms;position:absolute;top:5%;left:8%;right:8%}.pad .label-ko{z-index:3;letter-spacing:-.02em;text-align:center;text-shadow:0 1px #0000002e;font-family:Black Han Sans,sans-serif;font-size:clamp(15px,4.4vw,20px);line-height:1.05;position:relative}.pad.row-gangnam{color:var(--neon-yellow);background:radial-gradient(at 30% 25%,#ff5fb0 0%,#ff2e93 35%,#d61878 75%,#a0125c 100%);box-shadow:inset 0 2px 1px #ffc8e6b3,inset 0 -8px 12px #50052880,inset 4px 0 8px #ff64b440,inset -4px 0 8px #50052866,0 1px #ff96c880,0 2px #d6207f,0 3px #b81570,0 4px #960e5e,0 5px #730a4a,0 6px #4a052b,0 8px 10px #50052880,0 16px 24px #3c1e2859}.pad.row-gangnam:before{content:"";border-radius:inherit;pointer-events:none;z-index:1;background:repeating-linear-gradient(45deg,#0000 0 8px,#ffffff0f 8px 9px);position:absolute;inset:0}.pad.row-fart{color:#003d4a;background:radial-gradient(at 30% 25%,#80f8ff 0%,#00f0ff 35%,#00b8cc 75%,#067 100%);box-shadow:inset 0 2px 1px #dcffffcc,inset 0 -8px 12px #00323c80,inset 4px 0 8px #96faff4d,inset -4px 0 8px #00323c66,0 1px #b4ffff99,0 2px #00bcd0,0 3px #00a0b4,0 4px #007a8c,0 5px #005268,0 6px #003a48,0 8px 10px #00323c80,0 16px 24px #14323c59}.pad.row-hanroro{color:var(--ink);background:radial-gradient(at 30% 25%,#fdf6e0 0%,#f4ead5 35%,#e3d5b8 75%,#c4b390 100%);box-shadow:inset 0 2px 1px #fffcf0e6,inset 0 -8px 12px #8c6e4659,inset 4px 0 8px #fff5dc66,inset -4px 0 8px #8c6e464d,0 1px #fffae6b3,0 2px #c8b896,0 3px #a8967a,0 4px #877555,0 5px #685739,0 6px #4a3e2a,0 8px 10px #503c1e80,0 16px 24px #503c1e59}.pad.row-hanroro .label-ko{font-family:Gowun Batang,serif;font-size:clamp(12px,3.4vw,16px);font-weight:700}.pad.row-hanroro:before{content:"";pointer-events:none;mix-blend-mode:multiply;border-radius:inherit;z-index:1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:absolute;inset:0}.pad.held{filter:brightness(1.18)saturate(1.25);transform:translateY(6px)scale(.97)}.pad.held:after{opacity:.3;transform:scaleY(.7)}.pad.row-gangnam.held{box-shadow:inset 0 4px 8px #50052899,inset 0 -1px #ffc8e666,0 0 0 1px #ff64b4cc,0 1px #6e0840,0 2px #4a052b,0 5px 10px #b41e6473}.pad.row-fart.held{box-shadow:inset 0 4px 8px #00323c99,inset 0 -1px #dcffff80,0 0 0 1px #96faffcc,0 1px #005666,0 2px #003a48,0 5px 10px #0096aa73}.pad.row-hanroro.held{box-shadow:inset 0 4px 8px #8c6e4680,inset 0 -1px #fffcf080,0 0 0 1px #fff5dccc,0 1px #6e5e44,0 2px #4a3e2a,0 5px 10px #8c6e4666}@media (orientation:landscape) and (height<=500px){#stage>*{display:none!important}#stage:after{content:"세로로 돌려주세요";color:var(--ink);justify-content:center;align-items:center;font-family:Gowun Batang,serif;font-size:16px;display:flex;position:absolute;inset:0}}