@font-face { font-family: "Galmuri11"; src: url("../fonts/Galmuri11.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "GalmuriMono11"; src: url("../fonts/GalmuriMono11.woff2") format("woff2"); font-display: swap; }

:root {
  --sh: 212px;            /* 스파인 높이 */
  --sw: 21px;             /* 스파인 두께 */
  --dp: 70px;             /* 선반 안쪽으로 보이는 케이스 깊이 */
  --gap: 3px;
  --plank: 18px;
  --vfd: #74f5e2;
  --vfd-glow: rgba(116, 245, 226, .55);
  --text: #ebe3d8;
  --muted: #a8998a;
  --pbar: 0px;
  --well: min(250px, 30vh);
  --ui: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  color-scheme: dark;
}
@media (pointer: coarse) { :root { --sw: 24px; --gap: 4px; } }
@media (max-width: 640px) { :root { --sh: 172px; } }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #110d0b; color: var(--text); font-family: var(--ui); -webkit-tap-highlight-color: transparent; }
html { scrollbar-gutter: stable; }
html.lock { overflow: hidden; }
.stage.on { touch-action: none; }
.booklet { touch-action: pan-y; }
button { font: inherit; color: inherit; }

.app { display: grid; grid-template-columns: minmax(0, 1fr) 390px; min-height: 100vh; }

/* ---------- 방 / 선반 ---------- */
.room {
  min-width: 0;
  padding: 0 0 48px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(255, 196, 130, .16), transparent 70%),
    radial-gradient(ellipse at 50% 30%, #2a1f18 0%, #1a1310 60%, #110d0b 100%);
}
.top { display: flex; align-items: center; gap: 14px; padding: 22px clamp(16px, 3vw, 44px) 6px; }
.top h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .32em; color: #d9c8b4; }
.top .count { font-size: 12px; color: var(--muted); letter-spacing: .05em; }
.admin-link { margin-left: auto; color: #8c7d6d; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; transition: color .2s, background .2s; }
.admin-link:hover { color: #e8d9c6; background: rgba(255, 255, 255, .06); }

.shelves { padding: 10px clamp(12px, 3vw, 44px) 0; }
.shelf { position: relative; margin-top: 30px; }
.shelf-back {
  position: relative;
  padding: 16px 16px 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 40%),
    linear-gradient(180deg, #120d0a, #1e1611 75%, #261b14);
  box-shadow: inset 0 22px 26px -10px #000, inset 12px 0 18px -10px #000, inset -12px 0 18px -10px #000;
  border-left: 12px solid #4c331f;
  border-right: 12px solid #4c331f;
  border-top: 10px solid #573b24;
  border-image: none;
}
.shelf-back::before { /* 뒤판 은은한 조명 */
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 60%;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 210, 160, .10), transparent 70%);
  pointer-events: none;
}
.row {
  position: relative;
  display: flex; align-items: flex-end; gap: var(--gap);
  height: var(--sh);
  perspective: 1100px; perspective-origin: 50% 35%;
}
.plank {
  position: relative; z-index: 2; height: var(--plank);
  margin: 0 -12px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 9px, rgba(255, 255, 255, .03) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, #9a6d46 0%, #7a5434 22%, #5b3c23 100%);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 220, 180, .25);
}

/* ---------- 스파인 ---------- */
.spine {
  --k: 1;
  position: relative; flex: 0 0 calc(var(--sw) * var(--k)); width: calc(var(--sw) * var(--k)); height: var(--sh);
  transform-style: preserve-3d; cursor: pointer; outline: none;
  --fh: var(--sh); --fw: calc(var(--sw) * var(--k));
}
.sp-box { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .spine:hover { z-index: 3; }
  .spine:hover .sp-box { transform: translate3d(0, -9px, 46px); }
}
.spine.peek, .spine:focus-visible { z-index: 3; }
.spine.peek .sp-box, .spine:focus-visible .sp-box { transform: translate3d(0, -9px, 46px); }
.spine.out { visibility: hidden; }
.spine.out .sp-box { transition: none; transform: none; }
.sp-face { position: absolute; display: block; backface-visibility: hidden; }
.sp-front { inset: 0; overflow: hidden; border-radius: 1px; background: #222; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .7); }
.sp-right {
  top: 0; left: 100%; width: var(--dp); height: 100%;
  transform-origin: left center; transform: rotateY(90deg);
  background-size: cover; background-position: left center; background-color: #2a2a2e;
}
.sp-left {
  top: 0; right: 100%; width: var(--dp); height: 100%;
  transform-origin: right center; transform: rotateY(-90deg);
  background: linear-gradient(270deg, #222327, #060607);
}
.sp-top {
  left: 0; bottom: 100%; width: 100%; height: var(--dp);
  transform-origin: bottom center; transform: rotateX(90deg);
  background: linear-gradient(0deg, rgba(220, 225, 230, .55), rgba(70, 72, 78, .35));
}
.spine.playing .sp-front::after {
  content: ""; position: absolute; left: 50%; bottom: 7px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--vfd); box-shadow: 0 0 8px 2px var(--vfd-glow);
  animation: led 2.4s ease-in-out infinite;
}
@keyframes led { 50% { opacity: .35; } }

/* 스파인 그림 (선반·케이스 공용) */
.spf { position: absolute; inset: 0; overflow: hidden; }
.spf img { display: block; width: 100%; height: 100%; object-fit: fill; }
.spf img.rot { position: absolute; left: 50%; top: 50%; width: var(--fh); height: var(--fw); transform: translate(-50%, -50%) rotate(90deg); }
.spf.gen { background: linear-gradient(90deg, hsl(var(--h) 28% 12%), hsl(var(--h) 36% 25%) 45%, hsl(var(--h) 30% 15%)); }
.spf .spt {
  position: absolute; left: 50%; top: 50%; width: var(--fh); height: var(--fw);
  transform: translate(-50%, -50%) rotate(90deg);
  display: flex; align-items: center; gap: .7em; padding: 0 9%;
  font-size: min(calc(var(--fw) * .46), calc(var(--fh) * .062)); line-height: 1; white-space: nowrap; overflow: hidden;
  color: hsl(var(--h) 30% 88%);
}
.spf .spt .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.spf .spt .a { opacity: .72; flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.spf .spt .y { margin-left: auto; opacity: .5; font-size: .85em; }
.spf .spt .dc { flex: 0 0 auto; margin-left: .6em; padding: .15em .35em; border: 1px solid currentColor; border-radius: 3px; font-size: .72em; font-weight: 700; opacity: .75; }
.spf .spt .y + .dc { margin-left: .6em; }
.spf .spt .t + .dc { margin-left: auto; }
/* 두꺼운 케이스: 아티스트 / 제목 두 줄 */
.spf.wide .spt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  align-content: center; row-gap: .3em; column-gap: .7em;
  font-size: min(calc(var(--fw) * .3), calc(var(--fh) * .062));
}
.spf.wide .spt .a { grid-row: 1; grid-column: 1; max-width: none; font-size: .82em; }
.spf.wide .spt .t { grid-row: 2; grid-column: 1; font-size: 1.08em; }
.spf.wide .spt .y { display: none; }
.spf.wide .spt .dc { grid-row: 1 / span 2; grid-column: 2; align-self: center; margin: 0; }
.spf::after { /* 주얼케이스 플라스틱 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, .06) 16%, transparent 38%, transparent 72%, rgba(0, 0, 0, .38) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .6) 0, transparent 2.4%, transparent 97.6%, rgba(0, 0, 0, .6) 100%);
}

.tip {
  position: fixed; z-index: 120; left: 0; top: 0; pointer-events: none;
  max-width: 260px; padding: 7px 11px; border-radius: 9px;
  background: rgba(18, 14, 11, .94); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  font-size: 13px; line-height: 1.35; opacity: 0; transform: translate(-50%, calc(-100% - 6px));
  transition: opacity .18s;
}
.tip.on { opacity: 1; }
.tip b { display: block; font-weight: 600; }
.tip span { color: var(--muted); font-size: 12px; }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty a { color: #e3c9a8; }

/* ---------- 스테이지 (케이스 꺼내기) ---------- */
.stage { position: fixed; inset: 0; z-index: 50; pointer-events: none; perspective: 1800px; }
.stage.on { pointer-events: auto; }
.backdrop {
  position: absolute; inset: 0; opacity: 0; transition: opacity .45s;
  background: radial-gradient(ellipse at 50% 45%, rgba(12, 9, 7, .55), rgba(6, 4, 3, .9));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.stage.on .backdrop { opacity: 1; }
.stage-close, .stage-hint { position: absolute; opacity: 0; transition: opacity .3s; pointer-events: none; }
.stage.open .stage-close, .stage.open .stage-hint { opacity: 1; pointer-events: auto; }
.stage-close {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(30, 24, 20, .8); font-size: 22px; line-height: 1; cursor: pointer; color: #e6d8c6;
}
.stage-hint { margin: 0; font-size: 13px; color: #bfae9b; text-align: center; transform: translateX(-50%); white-space: nowrap; }

.case { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); transform-style: preserve-3d; will-change: transform; }
.cf { position: absolute; backface-visibility: hidden; }
.cf-back { inset: 0; transform: translateZ(calc(var(--D) * -.5)) rotateY(180deg); background: linear-gradient(135deg, #18181b, #09090a); border-radius: 2px; }
.cf-left { top: 0; left: calc((var(--W) - var(--D)) / 2); width: var(--D); height: var(--H); transform: rotateY(-90deg) translateZ(calc(var(--W) / 2)); --fh: var(--H); --fw: var(--D); overflow: hidden; }
.cf-right { top: 0; left: calc((var(--W) - var(--D)) / 2); width: var(--D); height: var(--H); transform: rotateY(90deg) translateZ(calc(var(--W) / 2)); background: linear-gradient(90deg, rgba(190, 196, 204, .45), rgba(60, 63, 68, .7)); }
.cf-top { left: 0; top: calc((var(--H) - var(--D)) / 2); width: var(--W); height: var(--D); transform: rotateX(90deg) translateZ(calc(var(--H) / 2)); background: linear-gradient(180deg, rgba(215, 220, 226, .6), rgba(80, 84, 90, .55)); }
.cf-bottom { left: 0; top: calc((var(--H) - var(--D)) / 2); width: var(--W); height: var(--D); transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)); background: #0d0d0f; }

.tray {
  position: absolute; inset: 0; transform: translateZ(calc(var(--D) * .5 - 2px));
  border-radius: 2px;
  background:
    repeating-radial-gradient(circle at 54.5% 50%, rgba(255, 255, 255, .02) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 54.5% 50%, #232327 0, #101012 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 18px rgba(0, 0, 0, .8);
}
.tray::before { /* 경첩 */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9%;
  background: linear-gradient(90deg, #0a0a0b, #1d1d20), repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 4px);
  background-blend-mode: screen;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.tray .hub {
  position: absolute; left: 54.5%; top: 50%; width: calc(var(--W) * .3); height: calc(var(--W) * .3);
  transform: translate(-50%, -50%); border-radius: 50%;
  background:
    radial-gradient(circle, #0b0b0c 0 22%, transparent 23%),
    repeating-conic-gradient(#2c2c31 0 6deg, #141416 6deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0 62%, transparent 63%);
  mask: radial-gradient(circle, #000 0 62%, transparent 63%);
}
.tray .empty-note {
  position: absolute; left: 54.5%; top: 80%; transform: translateX(-50%);
  font-size: calc(var(--W) * .045); color: #6f6a66; white-space: nowrap; letter-spacing: .05em;
}
.tray .disc { left: calc(54.5% - var(--CD) / 2); top: calc(50% - var(--CD) / 2); width: var(--CD); height: var(--CD); cursor: pointer; }
.tray .disc:hover .disc-sheen { opacity: 1; }
.tray .disc.gone { visibility: hidden; }
.tray .disc { transition: opacity .32s ease, transform .4s cubic-bezier(.3,.7,.3,1); }
.tray .disc.off { opacity: 0; transform: translateX(7%) scale(.97); pointer-events: none; }
.tray.multi::after { /* 겹쳐 꽂힌 디스크 가장자리 */
  content: ""; position: absolute; left: calc(54.5% - var(--CD) / 2 + 3px); top: calc(50% - var(--CD) / 2 + 3px);
  width: var(--CD); height: var(--CD); border-radius: 50%; z-index: -1;
  box-shadow: 0 0 0 1px rgba(200, 205, 212, .18), 3px 3px 0 1px rgba(150, 155, 162, .12);
}
.tray .empty-note[hidden] { display: none; }
.disc-no {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  padding: .2em .55em; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff;
  font: 700 calc(var(--ds, 200px) * .052)/1 var(--ui); letter-spacing: .08em; white-space: nowrap;
}
.disc-tabs {
  position: absolute; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.stage.open .disc-tabs { opacity: 1; pointer-events: auto; }
.dtab {
  position: relative; padding: 6px 13px; border-radius: 99px; cursor: pointer; font-size: 13px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(30, 24, 20, .85); color: #d8cab8;
}
.dtab.on { background: #e8d9c4; color: #241a12; border-color: transparent; font-weight: 700; }
.dtab.inp::after { content: ""; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--vfd); box-shadow: 0 0 6px var(--vfd-glow); }

.lid { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 50%; }
.lid-out, .lid-in { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 2px; overflow: hidden; background: rgba(40, 44, 50, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.lid-in { transform: rotateY(180deg); }
.lid .hinge {
  position: absolute; top: 0; bottom: 0; width: 9%;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
}
.lid-out .hinge { left: 0; border-right: 1px solid rgba(255, 255, 255, .18); }
.lid-in .hinge { right: 0; border-left: 1px solid rgba(255, 255, 255, .18); }
.lid .cover { position: absolute; left: 11%; right: 2%; top: 2.5%; bottom: 2.5%; background-size: cover; background-position: center; background-color: #333; }
.lid .glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .07) 26%, transparent 40%, transparent 63%, rgba(255, 255, 255, .08) 71%, transparent 84%);
}
.gen-cover { display: flex; flex-direction: column; justify-content: flex-end; padding: 9%; overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, hsl(calc(var(--h) + 30) 60% 55% / .55) 0 18%, transparent 18.5%),
    radial-gradient(circle at 78% 22%, transparent 0 26%, hsl(calc(var(--h) + 30) 60% 70% / .25) 26.5% 27.5%, transparent 28%),
    linear-gradient(150deg, hsl(var(--h) 42% 34%), hsl(calc(var(--h) + 40) 45% 14%));
}
.gen-cover .ga { font-size: calc(var(--W) * .045); color: hsl(var(--h) 40% 85% / .8); margin-bottom: .3em; letter-spacing: .04em; }
.gen-cover .gt { font-size: calc(var(--W) * .085); font-weight: 800; line-height: 1.1; color: hsl(var(--h) 30% 95%); word-break: keep-all; overflow-wrap: anywhere; }

.booklet {
  position: absolute; left: 2%; right: 11%; top: 2.5%; bottom: 2.5%; overflow: auto; overscroll-behavior: contain;
  padding: 8% 8% 6%;
  font-size: var(--bkfs, 13px);
  color: #2a231b;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(255, 255, 255, .5), transparent 60%),
    linear-gradient(160deg, #f3ece0, #e3d9c8);
  scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent;
}
.booklet h2 { margin: 0; font-size: 1.32em; line-height: 1.2; word-break: keep-all; }
.booklet .bm { margin: .3em 0 .9em; color: #75685a; font-size: .88em; }
.booklet ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(60, 45, 30, .2); }
.booklet li {
  display: grid; grid-template-columns: 2em 1fr auto; gap: .5em; align-items: baseline;
  padding: .42em .3em; border-bottom: 1px solid rgba(60, 45, 30, .1); cursor: pointer; border-radius: 3px;
}
.booklet li:hover { background: rgba(120, 80, 40, .1); }
.booklet li .n { color: #8b7b69; font-variant-numeric: tabular-nums; }
.booklet li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booklet li .t small { color: #8b7b69; margin-left: .4em; font-size: .85em; }
.booklet li .d { color: #8b7b69; font-variant-numeric: tabular-nums; font-size: .9em; }
.booklet li.cur { font-weight: 700; }
.booklet li.cur .n { color: #b5541f; }
.booklet li.dh, .tracklist li.dh { display: flex; align-items: baseline; gap: .6em; cursor: default; }
.booklet li.dh { margin-top: .9em; padding: .35em .3em; border-bottom: 1px solid rgba(60, 45, 30, .3); background: none; }
.booklet li.dh:first-child { margin-top: 0; }
.booklet li.dh b { font-size: .8em; letter-spacing: .12em; color: #8a4a22; }
.booklet li.dh span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9em; }
.booklet li.dh em { margin-left: auto; font-style: normal; font-size: .82em; color: #8b7b69; }
.booklet li.dh:hover { background: none; }
.booklet .none { color: #8b7b69; padding: 1em 0; }

/* ---------- 디스크 ---------- */
.disc {
  position: absolute; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 0 7.3%, #000 7.7%);
  mask: radial-gradient(circle, transparent 0 7.3%, #000 7.7%);
}
.disc-spin {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(210, 220, 230, .25) 0 11%, rgba(255, 255, 255, .55) 11.4% 12%, rgba(160, 170, 180, .3) 12.4% 16.6%, transparent 17%),
    conic-gradient(from 10deg, #c9ced5, #f5f7f9, #aeb4bc, #e9ecef, #bfc5cc, #f7f8f9, #b7bdc4, #eef0f2, #c9ced5);
}
.disc-spin .lbl {
  position: absolute; inset: 0; border-radius: 50%; background-size: cover; background-position: center;
  -webkit-mask: radial-gradient(circle, transparent 0 17.4%, #000 17.8% 47.2%, transparent 47.6%);
  mask: radial-gradient(circle, transparent 0 17.4%, #000 17.8% 47.2%, transparent 47.6%);
}
.disc-spin .lbl.full { -webkit-mask: none; mask: none; inset: -1.6%; border-radius: 50%; }
/* CD 이미지를 쓴 디스크: 기본 은색 바탕·반사 링 없이 그림만 */
.disc.art .disc-spin { background: none; overflow: hidden; }
.disc.art .disc-sheen {
  opacity: .55;
  background: conic-gradient(from 205deg, transparent 0, rgba(255, 60, 170, .16) 7%, rgba(60, 200, 255, .18) 13%, rgba(255, 240, 80, .14) 19%, transparent 27%,
    transparent 50%, rgba(255, 60, 170, .1) 57%, rgba(60, 255, 210, .13) 63%, rgba(255, 230, 60, .09) 69%, transparent 77%);
}
.disc-spin .lbl.gen {
  background: radial-gradient(circle, hsl(var(--h) 45% 40%) 0 30%, hsl(calc(var(--h) + 35) 45% 22%) 47%);
  display: flex; align-items: flex-start; justify-content: center;
}
.disc-spin .lbl.gen span {
  margin-top: 23%; max-width: 46%; text-align: center; font-weight: 700; color: hsl(var(--h) 30% 92%);
  font-size: calc(var(--ds, 200px) * .06); line-height: 1.15; word-break: keep-all;
}
.disc-sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: .85; transition: opacity .3s;
  background:
    conic-gradient(from 205deg, transparent 0, rgba(255, 60, 170, .2) 7%, rgba(60, 200, 255, .22) 13%, rgba(255, 240, 80, .18) 19%, transparent 27%,
      transparent 50%, rgba(255, 60, 170, .14) 57%, rgba(60, 255, 210, .17) 63%, rgba(255, 230, 60, .12) 69%, transparent 77%),
    radial-gradient(circle, transparent 0 47%, rgba(255, 255, 255, .25) 48.6% 49.2%, rgba(0, 0, 0, .25) 49.6% 50%);
  mix-blend-mode: screen;
}
.fly-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.fly { position: absolute; left: 0; top: 0; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55)); will-change: transform; }
.fly .disc { inset: 0; }

/* ---------- 플레이어 ---------- */
.player {
  position: sticky; top: 0; height: 100vh; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 24px 22px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .25));
  border-left: 1px solid rgba(255, 255, 255, .04);
}
.deck {
  position: relative; width: 100%; max-width: 340px; border-radius: 28px; padding: 20px 22px 22px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #44474d 0%, #2a2c31 42%, #1b1c1f 100%);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .65), 0 2px 0 rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -3px 8px rgba(0, 0, 0, .5);
}
.brand { display: flex; justify-content: space-between; align-items: baseline; color: #9ea2aa; }
.brand span { font-size: 11px; font-weight: 700; letter-spacing: .32em; }
.brand i { font-size: 8.5px; letter-spacing: .18em; font-style: normal; opacity: .7; }

.well {
  position: relative; width: var(--well); height: var(--well); margin: 16px auto 22px; border-radius: 50%;
  background: radial-gradient(circle, #0b0b0c 0 55%, #17181a 100%);
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, .95), inset 0 -2px 4px rgba(255, 255, 255, .05),
              0 0 0 7px #2c2e33, 0 0 0 8px rgba(255, 255, 255, .07), 0 0 0 9px rgba(0, 0, 0, .5);
}
.well-floor { position: absolute; inset: 0; display: grid; place-items: center; }
.spindle {
  width: 13%; height: 13%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f1f2f4, #8c9098 55%, #3b3d42);
  box-shadow: 0 0 0 3px #1c1d20, 0 0 0 4px rgba(255, 255, 255, .08);
}
.pdisc-holder { position: absolute; inset: 3.5%; }
.pdisc-holder .disc { inset: 0; }
.glass {
  position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 31% 26%, rgba(255, 255, 255, .32), rgba(255, 255, 255, .07) 26%, transparent 44%),
    radial-gradient(circle at 72% 82%, rgba(255, 255, 255, .08), transparent 38%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .09), inset 0 -12px 30px rgba(140, 210, 255, .07);
  transform-origin: 50% 0;
  transition: transform .55s cubic-bezier(.3, .7, .2, 1), opacity .45s;
}
.glass.open { transform: perspective(600px) rotateX(72deg) translateY(-6%); opacity: .12; }

.lcd {
  position: relative; overflow: hidden;
  padding: 10px 13px 9px; border-radius: 11px;
  background: radial-gradient(ellipse at 50% 0, #0b1514, #040706 70%);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .09);
  font-family: "GalmuriMono11", "Galmuri11", ui-monospace, monospace;
  color: var(--vfd); text-shadow: 0 0 6px var(--vfd-glow);
}
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.lcd-row { display: flex; align-items: center; gap: 10px; font-size: 12px; min-height: 16px; }
.lcd-state { width: 14px; text-align: center; }
.lcd-mode { margin-left: auto; letter-spacing: .06em; font-size: 11px; }
.lcd-title { position: relative; height: 26px; margin: 5px 0 3px; overflow: hidden; white-space: nowrap; font-family: "Galmuri11", ui-monospace, monospace; font-size: 17px; line-height: 26px; }
.lcd-title > span { display: inline-block; will-change: transform; }
.lcd-title .t2 { margin-left: 3em; }
.lcd-title .t2[hidden] { display: none; }
.lcd-bottom { align-items: flex-end; }
.lcd-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Galmuri11", monospace; font-size: 11px; opacity: .7; }
.lcd-time { font-size: 24px; line-height: 1; letter-spacing: .04em; }
.lcd.paused .lcd-time { animation: blink 1s steps(2, start) infinite; }
.lcd.off { color: rgba(116, 245, 226, .25); text-shadow: none; }
@keyframes blink { to { visibility: hidden; } }

.seek { width: 100%; margin: 14px 0 6px; height: 18px; background: transparent; -webkit-appearance: none; appearance: none; --p: 0%; cursor: pointer; }
.seek:disabled { opacity: .4; cursor: default; }
.seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--vfd) var(--p), #0b0c0d var(--p)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .07); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fafafa, #9aa0a8); box-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.seek::-moz-range-track { height: 4px; border-radius: 4px; background: #0b0c0d; }
.seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--vfd); }
.seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fafafa, #9aa0a8); }

.ctrl { display: block; }
.btns { display: flex; gap: 7px; }
.btns.main { margin-top: 10px; }
.btns.sub { margin-top: 12px; align-items: center; }
.pb, .sb {
  position: relative; flex: 1 1 0; min-width: 0; height: 42px; border: 0; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center; color: #d5d8de;
  background: linear-gradient(180deg, #51545b, #33353a 55%, #2a2b2f);
  box-shadow: 0 2px 0 #0c0c0d, 0 4px 8px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .06s, box-shadow .06s, color .2s;
}
.pb svg, .sb svg { width: 18px; height: 18px; fill: currentColor; }
.pb:active, .sb:active { transform: translateY(2px); box-shadow: 0 0 0 #0c0c0d, 0 1px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12); }
.pb.on, .sb.on { color: var(--vfd); }
.pb.on svg, .sb.on svg { filter: drop-shadow(0 0 4px var(--vfd-glow)); }
.pb.eject { color: #e9c9a0; }
.sb { flex: 0 0 44px; height: 34px; border-radius: 9px; }
.sb b { position: absolute; right: 6px; bottom: 3px; font-size: 9px; font-family: "GalmuriMono11", monospace; }
.vol { flex: 1; display: flex; align-items: center; gap: 6px; color: #9ea2aa; min-width: 0; }
.vol svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.vol input { flex: 1; min-width: 0; accent-color: var(--vfd); }
.vol.na { display: none; }

.tracklist {
  position: absolute; left: 12px; right: 12px; bottom: 12px; max-height: 70%;
  display: flex; flex-direction: column;
  background: rgba(10, 11, 12, .97); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .6); overflow: hidden; z-index: 5;
}
.tracklist[hidden] { display: none; }
.tl-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.tl-head b { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .07); cursor: pointer; font-size: 18px; }
.tracklist ol { list-style: none; margin: 0; padding: 6px; overflow: auto; }
.tracklist li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 8px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.tracklist li:hover { background: rgba(255, 255, 255, .06); }
.tracklist li .n, .tracklist li .d { color: #8f9299; font-variant-numeric: tabular-nums; }
.tracklist li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracklist li.cur { color: var(--vfd); }
.tracklist li.dh { padding: 12px 10px 4px; font-size: 12px; color: #8f9299; border-radius: 0; }
.tracklist li.dh:hover { background: none; }
.tracklist li.dh b { letter-spacing: .12em; }
.tracklist li.dh span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracklist li.dh em { font-style: normal; }
.tracklist li.dh.cur b { color: var(--vfd); }
.tracklist li.cur .n { color: var(--vfd); }

/* ---------- 태블릿·모바일: 플레이어를 하단 바로 ---------- */
@media (max-width: 1000px) {
  .app { display: block; }
  .room { padding-bottom: calc(var(--pbar) + 30px); min-height: 100vh; }
  .player { position: fixed; top: auto; left: 0; right: 0; bottom: 0; height: auto; padding: 0; background: none; border: 0; }
  .deck {
    max-width: 760px; margin: 0 auto; border-radius: 22px 22px 0 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: var(--well) minmax(0, 1fr); column-gap: 14px; align-items: center;
    --well: 92px;
  }
  .brand { display: none; }
  .well { margin: 0; grid-row: 1 / span 2; grid-column: 1; box-shadow: inset 0 6px 14px rgba(0, 0, 0, .95), 0 0 0 4px #2c2e33, 0 0 0 5px rgba(255, 255, 255, .07); }
  .panel { display: contents; }
  .lcd { grid-column: 2; grid-row: 1; padding: 7px 10px 6px; }
  .lcd-title { height: 22px; line-height: 22px; font-size: 15px; margin: 2px 0; }
  .lcd-time { font-size: 19px; }
  .seek { grid-column: 2; grid-row: 2; margin: 8px 0 0; }
  .ctrl { grid-column: 1 / -1; grid-row: 3; display: flex; gap: 7px; margin-top: 8px; }
  .btns.main, .btns.sub { margin: 0; }
  .btns.main { flex: 6 1 0; }
  .btns.sub { flex: 0 1 auto; gap: 5px; }
  .pb { height: 40px; }
  .sb { flex: 0 0 38px; height: 40px; }
  .vol { flex: 0 0 120px; }
  .tracklist { position: fixed; left: 8px; right: 8px; bottom: calc(var(--pbar) + 8px); max-height: 55vh; max-width: 744px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .vol { display: none; }
  .btns.main { gap: 5px; }
  .pb svg, .sb svg { width: 16px; height: 16px; }
  .deck { --well: 84px; }
}
@media (max-width: 380px) {
  .sb[data-act="list"] { display: none; }
}