:root{--bg:#08090c;--bg-elev:#101218;--bg-card:#161922;--line:#232734;--fg:#f2f4f8;--fg-dim:#99a0b0;--fg-mute:#656d7e;--accent:#5ac8fa;--accent-dim:#1d3a4a;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--meta-space:155px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,Pretendard,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}a.btn{color:inherit;text-decoration:none}img{max-width:100%;display:block}.app{background:var(--bg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;max-width:520px;height:100%;margin:0 auto;display:flex;position:relative;overflow:hidden}.topbar{height:calc(52px + var(--safe-t));flex:0 0 calc(52px + var(--safe-t));padding:var(--safe-t) 16px 0;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#08090ce6;align-items:center;gap:10px;display:flex}.brand{letter-spacing:-.02em;color:var(--accent);align-items:center;gap:8px;font-size:19px;font-weight:700;display:inline-flex}.brand-word{color:var(--fg)}.brand em{color:var(--accent);font-style:normal}.topbar .spacer{flex:1}.icon-btn{width:36px;height:36px;color:var(--fg-dim);border-radius:10px;place-items:center;display:grid}.icon-btn:hover{background:var(--bg-elev);color:var(--fg)}.icon-btn[data-on="1"]{color:var(--accent)}.body{flex:1;min-height:0;position:relative}.pull{z-index:7;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;background:#0000009e;border:1px solid #ffffff29;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;position:absolute;top:92px;left:50%;transform:translate(-50%)}.pull[data-ready="1"]{color:var(--accent);border-color:#5ac8fa99}.feed{scroll-snap-type:y mandatory;scrollbar-width:none;height:100%;overflow-y:auto}.feed::-webkit-scrollbar{display:none}.feed-track{position:relative}.player-slot{background:#000;flex-direction:column;justify-content:center;display:flex;position:absolute;left:0;right:0}.player-slot.empty{display:none}.slide{scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none;position:absolute;left:0;right:0}.player{aspect-ratio:9/16;background:#000;width:100%;max-height:100%;margin:auto;position:relative;overflow:hidden}.player.fill{aspect-ratio:auto;height:100%;max-height:none}.player.wide{aspect-ratio:16/9;top:calc(-1 * min(var(--meta-space) / 2, 12vh))}.player iframe{border:0;width:100%;height:100%;display:block}.meta{pointer-events:none;z-index:4;background:linear-gradient(#0000,#0000008c 45%,#000000eb 92%);padding:22px 68px 18px 16px;position:absolute;bottom:0;left:0;right:0}.meta>*{pointer-events:auto}.screen{--meta-space:calc(155px + var(--safe-b))}.screen .meta{padding-bottom:calc(18px + var(--safe-b))}.screen .rail{bottom:calc(14px + var(--safe-b))}.screen .meta.top{padding-top:calc(48px + var(--safe-t));background:linear-gradient(to bottom, #000000d1 0, #000000d1 calc(44px + var(--safe-t)), #00000080 calc(120px + var(--safe-t)), transparent calc(180px + var(--safe-t)));padding-bottom:14px}[data-hide-yt-ui="1"] .screen .meta.top{background:linear-gradient(to bottom, #000 0, #000 calc(98px + var(--safe-t)), #0009 calc(150px + var(--safe-t)), transparent calc(200px + var(--safe-t)))}.meta.top{background:linear-gradient(#000000c7 0,#00000080 70px,#0000 130px);padding:9px 68px 14px 16px;top:0;bottom:auto}[data-hide-yt-ui="1"] .meta.top{background:linear-gradient(#000 0 54px,#0009 96px,#0000 140px)}.meta.top .song{margin-bottom:3px}.meta.top .artist{margin-bottom:0}.meta.foot{padding-top:48px}.player.fill .sound-hint{top:auto;bottom:calc(110px + var(--safe-b))}.meta .song{letter-spacing:-.02em;text-shadow:0 1px 12px #0009;margin:0 0 6px;font-size:21px;font-weight:700;line-height:1.25}.meta .artist{color:#dfe4ee;margin:0 0 10px;font-size:15px}.tags{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.tag{color:var(--fg-dim);border:1px solid var(--line);white-space:nowrap;background:#161922b8;border-radius:999px;padding:3px 8px;font-size:11.5px}button.tag{cursor:pointer}button.tag:hover{color:var(--fg);background:#ffffff24}button.tag:active{transform:translateY(1px)}.actions{gap:8px;display:flex}.btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff1c;border:1px solid #ffffff24;border-radius:11px;align-items:center;gap:6px;padding:9px 14px;font-size:13.5px;font-weight:600;display:inline-flex}.btn:hover{background:#ffffff2e}.btn.primary{color:var(--accent);background:#5ac8fa33;border-color:#5ac8fa73}.btn.primary:hover{background:#5ac8fa4d;border-color:#5ac8fa9e}.btn[data-on="1"]{color:var(--accent)}.scroll{-webkit-overflow-scrolling:touch;height:100%;overflow-y:auto}.pad{padding:16px 16px calc(28px + var(--safe-b))}.section-title{letter-spacing:.04em;color:var(--fg-mute);text-transform:uppercase;margin:4px 0 12px;font-size:13px;font-weight:700}.row{border-bottom:1px solid var(--line);text-align:left;align-items:center;gap:12px;width:100%;padding:9px 0;display:flex}.row:last-child{border-bottom:0}.row .thumb-wrap{flex:0 0 104px;line-height:0;position:relative}.row .thumb{object-fit:cover;background:var(--bg-card);border-radius:8px;width:104px;height:59px;display:block}.row .kind{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000a8;border-radius:5px;align-items:center;gap:3px;height:17px;padding:0 5px;font-size:10px;font-weight:600;line-height:1;display:inline-flex;position:absolute;bottom:4px;left:4px}.row .kind svg{width:12px;height:12px}.row .kind[data-v="1"]{color:var(--accent)}.row .info{flex:1;min-width:0}.row .t{text-overflow:ellipsis;white-space:nowrap;margin:0 0 3px;font-size:14.5px;font-weight:600;overflow:hidden}.row .sub{color:var(--fg-dim);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12.5px;overflow:hidden}.row .date{color:var(--fg-mute);margin:3px 0 0;font-size:11.5px}.searchbar{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;align-items:center;gap:8px;height:42px;margin-bottom:14px;padding:0 12px;display:flex}.searchbar input{color:var(--fg);background:0 0;border:0;outline:none;flex:1;min-width:0;font-size:15px}.searchbar input::placeholder{color:var(--fg-mute)}.empty{text-align:center;color:var(--fg-mute);padding:56px 24px;font-size:14px;line-height:1.7}.sheet-back{z-index:40;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#000000a8;flex-direction:column;justify-content:flex-end;display:flex;position:absolute;inset:0}.sheet{background:var(--bg-elev);border-top:1px solid var(--line);touch-action:none;border-radius:18px 18px 0 0;flex-direction:column;max-height:82%;transition:transform .22s cubic-bezier(.2,.8,.3,1);animation:.22s cubic-bezier(.2,.8,.3,1) rise;display:flex}.sheet.dragging{transition:none;animation:none}.sheet .scroll{touch-action:pan-y}.sheet-back{transition:opacity .18s}@keyframes rise{0%{opacity:.4;transform:translateY(14%)}to{opacity:1;transform:none}}.sheet-head{border-bottom:1px solid var(--line);padding:16px 16px 12px}.sheet-head h3{letter-spacing:-.02em;margin:0 0 4px;font-size:17px}.sheet-head p{color:var(--fg-dim);margin:0;font-size:12.5px}.grip{background:var(--line);border-radius:2px;width:36px;height:4px;margin:0 auto 12px}.nav{border-top:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-bottom:var(--safe-b);z-index:20;background:#08090cf2;flex:none;display:flex}.nav button{color:var(--fg-mute);flex-direction:column;flex:1;align-items:center;gap:3px;padding:9px 0 8px;display:flex}.nav-lbl{letter-spacing:.01em;font-size:10px;font-weight:600;line-height:1}.nav button:hover{color:var(--fg-dim)}.nav button[data-on="1"]{color:var(--accent)}.player>.yt-host{position:absolute;inset:0}.player>.yt-host.idle{opacity:0;pointer-events:none}.player .yt-host iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.sound-hint{white-space:nowrap;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;background:#0000009e;border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;font-weight:600;animation:.25s ease-out hintIn;display:inline-flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}@keyframes hintIn{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.splash{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex}.splash .brand{opacity:.95;gap:11px;font-size:26px}.splash-msg{color:var(--fg-mute);text-align:center;margin:0;font-size:13.5px;line-height:1.6;animation:1.4s ease-in-out infinite pulse}.splash .btn{background:#ffffff1c;animation:none}@keyframes pulse{0%,to{opacity:.55}50%{opacity:1}}.splash-msg.err{color:#ff9a9a;animation:none}.section-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.section-head .section-title{margin-bottom:12px}.link-btn{color:var(--fg-mute);padding:2px 0;font-size:12px}.link-btn:hover{color:var(--accent)}.chips{flex-wrap:wrap;gap:7px;margin-bottom:4px;display:flex}.chip{background:var(--bg-card);border:1px solid var(--line);border-radius:999px;align-items:center;max-width:100%;display:inline-flex;overflow:hidden}.chip:hover{border-color:#33394a}.chip-label{color:var(--fg);text-overflow:ellipsis;white-space:nowrap;max-width:190px;padding:7px 4px 7px 12px;font-size:13px;overflow:hidden}.chip-x{color:var(--fg-mute);align-self:stretch;place-items:center;padding:0 9px 0 5px;display:grid}.chip-x:hover{color:var(--fg)}.chip-plain{color:var(--fg-dim);padding:7px 12px;font-size:13px}.chip-plain:hover{color:var(--fg)}.icon-btn.sm{border-radius:8px;flex:0 0 26px;width:26px;height:26px}.tap-layer{z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;place-items:center;width:100%;height:100%;display:grid;position:absolute;inset:0}.tap-icon{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0000006b;border:1.5px solid #ffffff73;border-radius:50%;place-items:center;width:64px;height:64px;animation:.16s ease-out popIn;display:grid}@keyframes popIn{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}.progress{z-index:6;cursor:pointer;touch-action:none;align-items:flex-end;height:40px;padding:0;display:flex;position:absolute;bottom:0;left:0;right:0}.progress-track{background:#ffffff38;border-radius:0;width:100%;height:3px;transition:height .12s;position:relative}.progress:hover .progress-track,.progress.dragging .progress-track{height:5px}.screen .progress{bottom:var(--safe-b)}.progress-fill{background:var(--accent);border-radius:2px;position:absolute;top:0;bottom:0;left:0}.progress-knob{background:var(--accent);border-radius:50%;width:11px;height:11px;margin-left:-5.5px;transition:transform .12s;position:absolute;top:50%;transform:translateY(-50%)scale(0)}.progress:hover .progress-knob,.progress.dragging .progress-knob{transform:translateY(-50%)scale(1)}.btn.icon-only{gap:7px;padding:10px 13px}.btn.icon-only .count{letter-spacing:-.01em;font-size:13.5px;font-weight:700;line-height:1}.artist-link{font:inherit;color:inherit;text-align:left;border-bottom:1px solid #ffffff47;padding:0;line-height:1.3}.artist-link:hover{color:var(--accent);border-bottom-color:var(--accent)}.artist-sep{color:var(--fg-mute);margin:0 5px}.chip-plain[data-on="1"]{color:var(--accent);background:#5ac8fa24;border-color:#5ac8fa73}.taste-row{text-align:left;border-bottom:1px solid var(--line);width:100%;color:var(--fg);align-items:center;gap:14px;padding:14px 2px;display:flex}.taste-row:last-child{border-bottom:0}.taste-text{flex:1;min-width:0}.taste-label{margin-bottom:4px;font-size:15px;font-weight:600;display:block}.taste-hint{color:var(--fg-dim);font-size:12.5px;line-height:1.5;display:block}.switch{background:var(--bg-card);border:1px solid var(--line);border-radius:13px;flex:none;width:44px;height:26px;transition:background .16s,border-color .16s;position:relative}.switch:after{content:"";background:var(--fg-mute);border-radius:50%;width:18px;height:18px;transition:transform .16s,background .16s;position:absolute;top:3px;left:3px}.switch.on{background:var(--accent-dim);border-color:var(--accent)}.switch.on:after{background:var(--accent);transform:translate(18px)}.stack{flex-direction:column;flex:1;min-height:0;display:flex}.screen{z-index:30;background:var(--bg);flex-direction:column;animation:.34s cubic-bezier(.2,.9,.3,1) slide-in;display:flex;position:absolute;inset:0;box-shadow:-12px 0 32px #00000073}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.screen-edge{bottom:0;left:0;top:calc(44px + var(--safe-t));z-index:7;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:36px;position:absolute}.screen .feed{flex:1;min-height:0}.screen-body{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.screen-body>*{flex:1;min-height:0}.screen.inset{padding-top:calc(44px + var(--safe-t));padding-bottom:var(--safe-b)}.screen.inset .screen-body>*{overflow-y:auto}.screen-head{z-index:5;padding:calc(6px + var(--safe-t)) 8px 6px;pointer-events:none;background:linear-gradient(#08090cd9,#08090c00);align-items:center;gap:4px;display:flex;position:absolute;top:0;left:0;right:0}.screen-head>*{pointer-events:auto}.screen-title{color:var(--fg);font-size:15px;font-weight:600}.rail{z-index:4;pointer-events:none;flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;bottom:14px;right:8px}.rail>*{pointer-events:auto}.rail-btn{color:#fff;filter:drop-shadow(0 1px 2px #0000008c)drop-shadow(0 0 6px #00000059);background:0 0;border:0;flex-direction:column;align-items:center;gap:2px;width:48px;padding:0;text-decoration:none;display:flex}.rail-btn .ic{place-items:center;width:44px;height:40px;transition:transform .12s;display:grid}.rail-btn .ic svg{stroke-width:1.5px}.rail-btn:active .ic{transform:scale(.88)}.rail-btn .lbl{margin-top:-3px;font-size:12px;font-weight:500;line-height:1}.rail-btn[data-on="1"]{color:var(--accent)}.app input,.app textarea{-webkit-user-select:text;user-select:text}