:root{--accent:#1db954;--fg:#fff;--muted:rgba(255,255,255,.55);--dim:rgba(255,255,255,.32);
--fs:28px;--furi:12px;--pron:14px;--trans:17px;--align:left;
--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100vh;height:100dvh;background:#000;color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;overscroll-behavior:none}
body{overflow:hidden}
#bg{position:fixed;inset:-40px;background-size:cover;background-position:center;filter:blur(60px) brightness(.45) saturate(1.3);transform:scale(1.2);transition:background-image .6s;z-index:0}
#scrim{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.8));z-index:0}
.screen{position:relative;z-index:1;height:100vh;height:100dvh;display:flex;flex-direction:column}
.hidden{display:none!important}
.muted{color:var(--muted)} small.muted{font-size:11px}

/* 카드 */
#login{align-items:center;justify-content:center;padding:16px}
.card{width:100%;max-width:440px;background:rgba(20,20,22,.85);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:26px;backdrop-filter:blur(20px)}
.card.center{text-align:center}.card h1{margin:0 0 6px;font-size:34px;font-weight:800}
button{cursor:pointer;border:none;border-radius:12px;font-family:inherit;font-weight:600;font-size:15px}
.primary{width:100%;margin-top:18px;padding:14px;background:var(--accent);color:#000}
.ghost{width:100%;margin-top:10px;padding:12px;background:rgba(255,255,255,.08);color:var(--fg)}
.ghost.danger{color:#ff6b6b}

/* 헤더 */
#np{display:flex;align-items:center;gap:12px;padding:calc(var(--st) + 12px) 14px 8px;transition:opacity .3s}
#np-art{width:48px;height:48px;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.1);flex-shrink:0}
.np-meta{flex:1;min-width:0}#np-title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#np-artist{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon{background:transparent;color:#fff;padding:7px;opacity:.7;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:opacity .15s,background .15s}
.icon:active{opacity:1;background:rgba(255,255,255,.12)}
.icon svg{width:20px;height:20px;display:block}

/* 가사 */
#lyrics-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}
#lyrics-wrap::-webkit-scrollbar{display:none}
#lyrics{padding:42vh 20px;text-align:var(--align)}
.line{margin:6px 0;padding:7px 6px;border-radius:12px;opacity:.5;cursor:pointer;transition:opacity .35s,background .15s}
.line:active{background:rgba(255,255,255,.07)}
.line.active{opacity:1}.line.passed{opacity:.4}
.line .main{font-size:var(--fs);font-weight:700;line-height:1.5}
.line .main ruby rt{font-size:var(--furi);font-weight:400;color:var(--muted);line-height:1}
.line .ch{color:var(--dim);transition:color .12s}
.line.active .ch{color:rgba(255,255,255,.9)}
.line.passed .ch{color:rgba(255,255,255,.4)}
.line.active .ch.sung{color:var(--accent)}
.line .pron{font-size:var(--pron);font-weight:500;color:rgba(255,255,255,.5);margin-top:4px}
.line .trans{font-size:var(--trans);font-weight:600;color:var(--accent);margin-top:3px;opacity:0;transition:opacity .3s}
.line.active .trans{opacity:.95}
.line.instr .main{color:var(--accent);opacity:.6}
body.no-trans .trans{display:none}body.no-pron .pron{display:none}

/* 푸터 */
#foot{padding:6px 16px calc(var(--sb) + 10px);transition:opacity .3s}
#seekrow{display:flex;align-items:center;gap:8px}
#seekrow input{flex:1;accent-color:var(--accent)}#t-cur,#t-dur{font-size:11px;min-width:34px}
#pbrow{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:6px}
.pbtn{background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;opacity:.85;padding:6px;transition:transform .1s,opacity .15s}
.pbtn:active{transform:scale(.9);opacity:1}
.pbtn svg{width:26px;height:26px;display:block}
.pbtn.big{background:#fff;border-radius:50%;width:56px;height:56px;opacity:1}
.pbtn.big svg{width:30px;height:30px;color:#000}
#status{position:absolute;right:16px;bottom:calc(var(--sb) + 10px);font-size:11px;color:var(--muted)}

/* 몰입 */
body.immersive #np,body.immersive #foot{opacity:0;pointer-events:none}
body.immersive #immersive-hint{display:block;position:fixed;bottom:calc(var(--sb) + 16px);left:50%;transform:translateX(-50%);background:transparent;color:#fff;opacity:.35;font-size:12px}

/* 모달 */
.modal{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;background:rgba(0,0,0,.55)}
.sheet{width:100%;max-width:460px;margin:0 auto;max-height:90vh;overflow-y:auto;background:rgba(20,20,22,.92);border-radius:20px 20px 0 0;padding:22px 20px calc(var(--sb) + 20px);backdrop-filter:blur(20px)}
.sheet h2{margin:0 0 12px}
.sheet label{display:block;margin:14px 0 0;font-size:13px;color:var(--muted)}
.sheet input[type=text],.sheet select,.sheet input[type=number]{width:100%;margin-top:6px;padding:11px 13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:11px;color:#fff;font-size:16px}
.sheet input[type=range]{width:100%;margin-top:8px;accent-color:var(--accent)}
.sheet input[type=color]{width:100%;height:40px;margin-top:6px;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:10px}
.row{display:flex;gap:12px}.grow{flex:1}.check{display:flex;align-items:center;gap:8px;color:#fff}
.sec{display:flex;align-items:center;justify-content:space-between;margin:12px 0;font-size:14px}
.segs{display:flex;gap:6px}.seg{padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--muted);font-size:13px}
.seg.on{background:var(--accent);color:#000}
#srclist{margin-top:6px}
.srcitem{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.06);border-radius:10px;margin-top:6px}
.srcitem .name{flex:1;font-size:14px}.srcitem.off .name{color:var(--muted)}
.srcitem button{background:transparent;color:#fff;font-size:16px;padding:2px 6px}
.srcitem .chk{color:var(--accent)}.srcitem.off .chk{color:var(--muted)}

#results{margin-top:10px;max-height:50vh;overflow-y:auto}
.hit{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}
.hit img{width:42px;height:42px;border-radius:6px;object-fit:cover;background:rgba(255,255,255,.1)}
.hit .ht{font-size:14px}.hit .ha{font-size:12px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 90px);transform:translateX(-50%);background:rgba(40,40,44,.95);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;z-index:20;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.show{opacity:1}