/* A single control surface moves into the native dialog; audio stays with its controller. */
:root { --playlist-player-height: 0px; }
body.has-playlist-player { padding-bottom: var(--playlist-player-height); }
body.playlist-sheet-open { overflow: hidden; }
.playlist-dock, .playlist-sheet {
  --pd-night: #0b1524;
  --pd-paper: #ede0c2;
  --pd-muted: #a9b4c2;
  --pd-line: rgba(237, 224, 194, .16);
  --pd-gutter: var(--gutter-mobile);
  box-sizing: border-box;
  color: var(--pd-paper);
  font-family: var(--ui, 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif);
  line-height: 1.5;
  color-scheme: dark;
}
.playlist-dock *, .playlist-sheet * { box-sizing: border-box; }
.playlist-dock [hidden], .playlist-dock[hidden], .playlist-sheet [hidden] { display: none !important; }
.playlist-dock :is(button,input), .playlist-sheet :is(button,input) { font: inherit; -webkit-tap-highlight-color: transparent; }
.playlist-dock button, .playlist-sheet button { color: inherit; cursor: pointer; touch-action: manipulation; }
.playlist-dock button:disabled, .playlist-sheet button:disabled { opacity: .35; cursor: default; }
.playlist-dock :is(button,input):focus-visible, .playlist-sheet :is(button,input):focus-visible { outline: 2px solid var(--pd-paper); outline-offset: 4px; }
.playlist-dock p, .playlist-sheet :is(p,h2,h3) { margin: 0; }
.playlist-dock {
  position: fixed; inset: auto 0 0; z-index: 75;
  width: 100%; border-top: 1px solid var(--pd-line);
  background: #102035f7; box-shadow: 0 -8px 30px rgba(0, 0, 0, .16);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.playlist-dock__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: var(--space-text) var(--space-control); padding: var(--space-control) var(--pd-gutter) max(var(--space-control), env(safe-area-inset-bottom)); }
.playlist-dock__now { display: flex; min-width: 0; align-items: center; gap: var(--space-control); cursor: pointer; }
.playlist-dock__now > img { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 6px; background: #1a304b; }
.playlist-dock__copy { display: grid; gap: 2px; min-width: 0; }
.playlist-dock__copy :is(span,strong) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-dock #nowPlaylist { color: var(--pd-muted); font-size: 11px; }
.playlist-dock #nowTitle { font-size: 13px; font-weight: 600; }
.playlist-dock #playerStatus { color: var(--pd-muted); font-size: 10px; }
.playlist-dock__transport { display: flex; align-items: center; gap: 0; }
.playlist-dock .playlist-dock__button { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: var(--space-text); border: 0; border-radius: 50%; background: transparent; }
.playlist-dock__button svg { width: 20px; height: 20px; fill: currentColor; }
.playlist-dock .playlist-dock__toggle { color: #0b1524; background: var(--pd-paper); font-size: 17px; }
.playlist-dock__expand svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.playlist-dock button:hover:not(:disabled):not(.playlist-dock__toggle) { background: rgba(237, 224, 194, .07); }
.playlist-dock__volume { display: none; align-items: center; justify-content: flex-end; gap: var(--space-text); }
.playlist-dock__volume button { min-width: 44px; min-height: 44px; padding: var(--space-text); border: 0; border-radius: 4px; background: transparent; white-space: nowrap; font-size: 12px; }
.playlist-dock__volume span { color: var(--pd-muted); font-size: 11px; }
.playlist-dock__volume input { max-width: 110px; }
.playlist-dock__seek { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-control); color: var(--pd-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.playlist-dock input[type=range] { width: 100%; min-width: 0; height: 24px; margin: 0; accent-color: var(--pd-paper); cursor: pointer; }
.playlist-dock__error { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-text) var(--space-control); }
.playlist-dock__error p { flex: 1 1 240px; font-size: 12px; }
.playlist-dock__error button { min-height: 44px; padding: var(--space-text) var(--space-control); border: 1px solid var(--pd-line); border-radius: 6px; background: transparent; font-size: 12px; }
.playlist-sheet {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: radial-gradient(ellipse at 15% 30%, #23344b 0, transparent 60%), #0b1524;
  transform: translateY(100%); opacity: 0;
  transition: transform 280ms cubic-bezier(.22, .7, .2, 1), opacity 220ms ease;
}
.playlist-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.playlist-sheet.is-visible { transform: translateY(0); opacity: 1; }
.playlist-sheet::backdrop { background: rgba(3, 8, 15, .6); }
.playlist-sheet__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-group); padding: max(var(--space-group), env(safe-area-inset-top)) var(--pd-gutter) var(--space-group); border-bottom: 1px solid var(--pd-line); }
.playlist-sheet__header > div { display: grid; min-width: 0; gap: var(--space-1); }
.playlist-sheet__eyebrow { color: var(--pd-muted); font-size: 10px; font-weight: 500; letter-spacing: .14em; }
.playlist-sheet__header h2 { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.playlist-sheet__header button { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: var(--space-text); min-width: 44px; min-height: 44px; padding: var(--space-text); border: 0; border-radius: 6px; background: none; font-size: 12px; }
.playlist-sheet__header button:hover { background: rgba(237, 224, 194, .07); }
.playlist-sheet__header svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.playlist-sheet__content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-page); min-height: 0; padding: var(--space-page) var(--pd-gutter); overflow: auto; overscroll-behavior: contain; scrollbar-color: #465469 transparent; scrollbar-width: thin; }
.playlist-sheet__current { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; gap: var(--space-section); }
.playlist-disc-wrap { width: min(72vw, 300px); max-width: 100%; padding: var(--space-control); flex: none; }
/* The circular cover, spindle hole, rings and shadow are CD artwork geometry. */
.playlist-disc { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; isolation: isolate; border-radius: 50%; padding: 5px; background: conic-gradient(from 20deg, #cbd2d9, #65727e 16%, #e0dad0 25%, #354454 45%, #b1bfcb 55%, #e4d5bd 73%, #5b6b7c 90%, #cbd2d9); box-shadow: 0 18px 54px #0008, 0 0 0 1px #e4d5bd42; animation: playlist-disc-turn 32s linear infinite; animation-play-state: paused; }
.playlist-disc[data-playing=true] { animation-play-state: running; }
.playlist-disc img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.playlist-disc::before { content: ''; position: absolute; z-index: 1; inset: 2%; border: 1px solid #fff5; border-radius: 50%; box-shadow: inset 0 0 0 9px #ffffff0a; pointer-events: none; }
.playlist-disc::after { content: ''; position: absolute; z-index: 2; width: 12%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid #a9b4c299; border-radius: 50%; background: #0b1524; box-shadow: 0 0 0 9px #ede0c22b, 0 0 0 10px #ffffff32; }
@keyframes playlist-disc-turn { to { transform: rotate(360deg); } }
.playlist-sheet__song { display: grid; gap: var(--space-text); max-width: 100%; text-align: center; }
.playlist-sheet__song h3 { color: var(--pd-paper); font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; line-height: 1.4; letter-spacing: -.04em; overflow-wrap: anywhere; }
.playlist-sheet__song > p:last-child { color: var(--pd-muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.playlist-sheet__queue { display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; min-width: 0; gap: var(--space-group); }
.playlist-sheet__queue-heading { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: var(--space-text); }
.playlist-sheet__queue-heading h3 { color: var(--pd-paper); font-size: 16px; font-weight: 500; }
.playlist-sheet__queue-heading > span { color: var(--pd-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.playlist-sheet #playlistQueueTracks { display: grid; align-content: start; list-style: none; padding: 0; margin: 0; }
.playlist-sheet #playlistQueueTracks li { min-width: 0; border-bottom: 1px solid rgba(237, 224, 194, .07); }
.playlist-sheet #playlistQueueTracks button { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 18px; gap: var(--space-control); align-items: center; width: 100%; min-height: 64px; padding: var(--space-control) var(--space-text); border: 0; border-radius: 6px; background: transparent; text-align: left; }
.playlist-sheet #playlistQueueTracks button:hover { background: rgba(237, 224, 194, .05); }
.playlist-sheet #playlistQueueTracks button[aria-current=true] { background: rgba(237, 224, 194, .09); }
.playlist-queue__number, .playlist-queue__duration, .playlist-queue__state { color: var(--pd-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.playlist-queue__title { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.playlist-sheet__dock { min-width: 0; }
.playlist-sheet .playlist-dock { position: static; border-top: 1px solid var(--pd-line); background: #0b1524; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.playlist-sheet .playlist-dock__expand svg { transform: rotate(180deg); }
@media (max-width: 399px) {
  .playlist-dock .playlist-dock__now > img { width: 36px; height: 36px; }
  .playlist-dock__now { gap: var(--space-text); }
  .playlist-dock #previousTrack { display: none; }
  .playlist-sheet .playlist-dock #previousTrack { display: inline-grid; }
  .playlist-sheet .playlist-dock__now > img { display: none; }
  .playlist-sheet__header button > span { display: none; }
}
@media (min-width: 700px) {
  .playlist-dock, .playlist-sheet { --pd-gutter: var(--gutter-desktop); }
  .playlist-dock__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-text) var(--space-section); }
  .playlist-dock__now > img { width: 48px; height: 48px; }
  .playlist-dock #nowTitle { font-size: 14px; }
  .playlist-dock__transport { gap: var(--space-text); }
  .playlist-dock__volume { display: flex; grid-column: 3; grid-row: 1; padding-right: calc(44px + var(--space-control)); }
  .playlist-dock__expand { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (min-width: 900px) {
  .playlist-sheet__header { padding-block: max(var(--space-section), env(safe-area-inset-top)) var(--space-section); }
  .playlist-sheet__content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); overflow: hidden; padding-block: var(--space-page); }
  .playlist-sheet__current { min-height: 0; overflow: auto; justify-content: start; padding: var(--space-group); }
  .playlist-disc-wrap { width: min(100%, 48vh, 480px); }
  .playlist-sheet__queue { min-height: 0; padding-block: var(--space-group); }
  .playlist-sheet #playlistQueueTracks { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #465469 transparent; padding-right: var(--space-text); }
}
@media (min-width: 1200px) {
  .playlist-dock, .playlist-sheet { --pd-gutter: var(--space-12); }
}
@media (max-width: 699px) {
  .playlist-sheet .playlist-dock__inner { grid-template-columns: minmax(0, 1fr) auto 44px; }
  .playlist-sheet .playlist-dock__volume { display: flex; grid-row: 3; grid-column: 1 / -1; justify-content: center; }
  .playlist-sheet .playlist-dock__seek { grid-row: 2; }
}
@media (max-height: 500px) {
  .playlist-sheet__header { padding-block: var(--space-text); }
  .playlist-sheet__content { padding-block: var(--space-group); gap: var(--space-section); }
  .playlist-sheet__current { gap: var(--space-group); }
  .playlist-disc-wrap { width: min(42vw, 180px); }
  .playlist-sheet .playlist-dock__inner { grid-template-columns: minmax(0, 1fr) auto 44px; padding-block: var(--space-text) max(var(--space-text), env(safe-area-inset-bottom)); }
  .playlist-sheet .playlist-dock__volume { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .playlist-sheet { transition: none; }
  .playlist-disc { animation: none; }
}