:root{
  --bg:#000;
  --text:#f5f5f7;
  --text2:#86868b;
  --surface:rgba(255,255,255,.07);
  --surface2:rgba(255,255,255,.12);
  --hair:rgba(255,255,255,.10);
  --accent:#c8c8cc;
  --accent-soft:rgba(200,200,204,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* .sheet/.bigplay 의 display 선언이 hidden 속성을 이기지 못하도록 */
[hidden]{display:none !important}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overflow:hidden;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 애플 뮤직처럼 표지에서 뽑은 여러 색이 층을 이루며 천천히 흐릅니다 */
.glow{
  position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 42% at 20% 24%, var(--c1,transparent), transparent 68%),
    radial-gradient(38% 38% at 80% 18%, var(--c2,transparent), transparent 66%),
    radial-gradient(46% 46% at 26% 80%, var(--c3,transparent), transparent 70%),
    radial-gradient(40% 40% at 78% 76%, var(--c4,transparent), transparent 66%);
  filter:blur(46px) saturate(1.25);
  opacity:0;
  transition:opacity 1.4s var(--ease);
  animation:drift 28s ease-in-out infinite alternate;
}
.glow.on{opacity:1}
@keyframes drift{
  from{transform:translate3d(-2%,-1.5%,0) scale(1.04)}
  to  {transform:translate3d(2.5%,2%,0) scale(1.12)}
}
/* 색 위에서도 글씨가 읽히도록 위·아래를 눌러줍니다 */
.glow::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 32%,rgba(0,0,0,.30) 64%,rgba(0,0,0,.72));
}

.topbar{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:max(18px,env(safe-area-inset-top)) 22px 0;
}
.wordmark{
  font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--text2);
}

.chip{
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 14px;border-radius:17px;
  background:var(--surface);backdrop-filter:blur(20px);
  font-size:13px;font-weight:600;color:var(--text);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.chip svg{width:15px;height:15px}
.chip:hover{background:var(--surface2)}
.chip:active{transform:scale(.96)}
.chip.ghost{width:34px;padding:0;justify-content:center;color:var(--text2)}
.chip.ghost[aria-pressed="true"]{color:var(--text);background:var(--surface2)}

/* ── 턴테이블 ── */
.stage{
  position:relative;z-index:1;
  flex:1;min-height:0;
  touch-action:none;
}
#deck{position:absolute;inset:0;width:100%;height:100%;display:block}

.label{
  position:absolute;z-index:2;
  border-radius:50%;
  overflow:hidden;
  will-change:transform;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 10px 40px rgba(0,0,0,.5);
  /* 스핀들 구멍을 뚫어 캔버스의 축이 보이게 */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 var(--hole,7px), #000 var(--hole,7px));
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 var(--hole,7px), #000 var(--hole,7px));
  background:#0e0e10;
}
/* iframe은 자체 합성 레이어를 만들어 z-index:auto 형제를 이길 수 있다.
   표지가 확실히 위로 오도록 쌓임 순서를 명시한다. */
.label{isolation:isolate}
.label-inner{position:absolute;inset:0;overflow:hidden;z-index:1}
/* 16:9 영상을 정사각 라벨에 가운데 크롭. 너비 = 16/9 = 177.778%.
   pointer-events를 끊어 YouTube의 제목 바·일시정지 표시가 뜨지 않게 한다.
   어차피 위에 고해상도 표지 이미지를 덮으므로 화면에는 보이지 않는다. */
.label-inner iframe{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:177.778%;height:100%;
  border:0;pointer-events:none;
}
/* 16:9 썸네일을 정사각에 cover → 아트 트랙이면 앨범 표지만 남는다.
   항상 덮어둔다. 영상 스트림보다 해상도가 높고, YouTube UI가 비칠 일도 없다. */
.labelart{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
  animation:artin .5s var(--ease);
}
@keyframes artin{from{opacity:0}}

.label.idle{background:
  radial-gradient(circle at 50% 50%, #1c1c1f 0%, #121215 60%, #0b0b0d 100%);}
/* 판이 없을 땐 YouTube 기본 화면이 라벨에 비치지 않도록 가린다 */
.label.idle .label-inner{opacity:0;pointer-events:none}

.spindle{
  position:absolute;z-index:3;border-radius:50%;pointer-events:none;
  background:linear-gradient(150deg,#e8e8ea,#9a9aa0 45%,#6e6e74 60%,#c9c9cf);
  box-shadow:0 1px 3px rgba(0,0,0,.8), inset 0 0 2px rgba(255,255,255,.6);
}

.bigplay{
  position:absolute;z-index:4;left:50%;top:50%;
  width:76px;height:76px;margin:-38px 0 0 -38px;
  border-radius:50%;
  background:rgba(20,20,22,.55);backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 0 0 1px var(--hair), 0 12px 40px rgba(0,0,0,.6);
  display:grid;place-items:center;
  transition:transform .22s var(--ease),opacity .22s var(--ease);
}
.bigplay svg{width:34px;height:34px;fill:var(--text);stroke:none;margin-left:3px}
.bigplay:active{transform:scale(.93)}

/* ── 하단 패널 ── */
.panel{
  position:relative;z-index:3;
  padding:0 22px max(20px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
}
.meta{text-align:center;min-height:44px}
.title{
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.artist{font-size:13px;color:var(--text2);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 다이나믹 노치처럼 현재 한 줄만 흐르는 가사 */
.ticker{
  display:block;width:100%;margin-top:7px;
  font-size:13.5px;font-weight:500;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-height:19px;text-align:center;
  animation:tick .45s var(--ease);
  transition:color 1s var(--ease);
}
@keyframes tick{from{opacity:0;transform:translateY(5px)}}

.scrub{cursor:pointer;padding:6px 0}
.scrub-track{height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.scrub-fill{height:100%;width:0;border-radius:2px;background:var(--accent);
  transition:background 1s var(--ease)}
.times{display:flex;justify-content:space-between;
  font-size:11px;color:var(--text2);margin-top:7px;
  font-variant-numeric:tabular-nums}

.transport{display:flex;align-items:center;gap:10px}
.tbtn{
  width:40px;height:40px;border-radius:20px;display:grid;place-items:center;
  color:var(--text2);transition:color .18s var(--ease),transform .18s var(--ease),background .18s var(--ease);
}
.tbtn svg{width:22px;height:22px;fill:currentColor;stroke:none}
.tbtn:hover{color:var(--text)}
.tbtn:active{transform:scale(.9)}
.tbtn.play{width:52px;height:52px;border-radius:26px;color:var(--text);background:var(--surface)}
.tbtn.play svg{width:26px;height:26px}
.spacer{flex:1}

.seg{display:flex;background:var(--surface);border-radius:15px;padding:2px;height:30px}
.seg button{
  padding:0 11px;border-radius:13px;font-size:11px;font-weight:700;
  color:var(--text2);transition:.18s var(--ease);
  font-variant-numeric:tabular-nums;
}
.seg button.on{background:var(--surface2);color:var(--text)}

/* ── 검색 화면 ── */
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(14px);opacity:0}}

.search{
  position:fixed;inset:0;z-index:20;
  background:rgba(10,10,12,.82);backdrop-filter:blur(34px) saturate(1.7);
  display:flex;flex-direction:column;
  animation:fade .18s var(--ease);
}
.search-bar{
  display:flex;align-items:center;gap:12px;flex:none;
  width:100%;max-width:760px;margin:0 auto;
  padding:max(16px,env(safe-area-inset-top)) 18px 14px;
  border-bottom:1px solid var(--hair);
}
.field{
  flex:1;display:flex;align-items:center;gap:9px;
  height:40px;padding:0 12px;border-radius:11px;
  background:rgba(255,255,255,.09);
  transition:background .2s var(--ease);
}
.field:focus-within{background:rgba(255,255,255,.14)}
.field .mag{width:17px;height:17px;flex:none;color:var(--text2)}
.field input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--text);font-size:16px;
}
.field input::placeholder{color:var(--text2)}
.field input::-webkit-search-cancel-button{display:none}
.clear{width:19px;height:19px;flex:none;color:var(--text2);padding:0}
.clear svg{stroke-width:2.2}
.txtbtn{font-size:15px;color:var(--text);flex:none}
.txtbtn:active{opacity:.5}

.results{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  width:100%;max-width:760px;margin:0 auto;
  padding:8px 10px 24px;
}
.note{
  text-align:center;color:var(--text2);font-size:14px;line-height:1.6;
  padding:56px 24px;
}
.note span{font-size:12.5px;opacity:.65}
.note.err{color:#ff6b6b}

.row{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:8px 12px;border-radius:12px;text-align:left;
  transition:background .15s var(--ease);
}
.row:hover{background:rgba(255,255,255,.07)}
.row:active{background:rgba(255,255,255,.12)}
/* mqdefault는 16:9에 앨범 표지가 정중앙 → object-fit:cover가 표지만 남긴다 */
.row img{
  width:52px;height:52px;flex:none;border-radius:6px;
  object-fit:cover;background:#1a1a1d;
  box-shadow:0 1px 6px rgba(0,0,0,.5);
}
.row .rbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .rt{
  display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row .rs{
  display:block;font-size:12.5px;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row .rd{
  font-size:12px;color:var(--text2);flex:none;
  font-variant-numeric:tabular-nums;
}
.row.playing .rt{color:var(--accent)}

.skel{display:flex;align-items:center;gap:13px;padding:8px 12px}
.skel i{display:block;border-radius:6px;background:rgba(255,255,255,.07);
  animation:pulse 1.3s ease-in-out infinite}
.skel .sa{width:52px;height:52px;flex:none}
.skel .sb{flex:1;height:11px;max-width:230px}
@keyframes pulse{50%{opacity:.42}}

.morebtn{
  display:block;margin:14px auto 0;padding:9px 18px;border-radius:19px;
  background:var(--surface);font-size:13px;font-weight:600;color:var(--text);
}
.morebtn:hover{background:var(--surface2)}

/* ── 가사 전체 화면 ── */
.lyrics{
  position:fixed;inset:0;z-index:18;
  background:rgba(8,8,10,.72);backdrop-filter:blur(40px) saturate(1.6);
  display:flex;flex-direction:column;
  animation:lyrup .32s var(--ease);
}
@keyframes lyrup{from{opacity:0;transform:translateY(18px)}}
.lyr-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex:none;
  width:100%;max-width:720px;margin:0 auto;
  padding:max(20px,env(safe-area-inset-top)) 24px 14px;
}
.lyr-meta{min-width:0}
.lyr-title{font-size:19px;font-weight:600;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyr-artist{font-size:13px;color:var(--text2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lines{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  width:100%;max-width:720px;margin:0 auto;
  padding:20vh 24px 34vh;
  scroll-behavior:smooth;
}
.lines p{
  font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.42;
  color:rgba(255,255,255,.30);
  padding:9px 0;cursor:pointer;
  transition:color .35s var(--ease),transform .35s var(--ease),filter .35s var(--ease);
  transform-origin:left center;filter:blur(1.1px);
}
.lines p.done{color:rgba(255,255,255,.24)}
.lines p.now{
  color:var(--text);transform:scale(1.045);filter:none;
  text-shadow:0 0 26px var(--accent-soft);
}
.lines p:hover{color:rgba(255,255,255,.62)}
.lines .plain{font-size:16px;font-weight:500;color:rgba(255,255,255,.72);
  filter:none;cursor:default;padding:4px 0;letter-spacing:normal}
.lines .plain:hover{color:rgba(255,255,255,.72)}
.lyr-note{text-align:center;color:var(--text2);font-size:14px;padding:22vh 24px;line-height:1.6}

@media (max-width:520px){
  .lines p{font-size:19px}
  .lines{padding:16vh 20px 30vh}
}

.toast{
  position:fixed;z-index:30;left:50%;bottom:118px;transform:translateX(-50%);
  background:rgba(40,40,42,.92);backdrop-filter:blur(20px);
  border:1px solid var(--hair);
  padding:11px 18px;border-radius:22px;font-size:13px;
  animation:rise .24s var(--ease);max-width:88vw;text-align:center;
}

@media (max-width:520px){
  .panel{gap:12px}
  .title{font-size:15px}
  .bigplay{width:64px;height:64px;margin:-32px 0 0 -32px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}