/*
  Shared chrome for every /play_list page: the sticky top bar and the phone tab bar.
  Pages keep their own palette; this file only reads --ground, --paper, --ink, --ink-soft, --seal
  and falls back to the list page's values when a page doesn't define them.
*/
.pc-top {
  position: sticky; top: 0; z-index: 30;
  background: var(--ground, #E5DFD5);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.pc-top.is-stuck { border-bottom-color: rgba(31, 27, 23, 0.1); }
.pc-top .in {
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px);
  height: 60px; display: flex; align-items: center; gap: 28px;
}
.pc-brand {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  text-decoration: none; color: var(--ink, #1F1B17);
  font-family: "Black Han Sans", "IBM Plex Sans KR", sans-serif; font-weight: 400; font-size: 1.25rem; letter-spacing: -0.01em;
}
.pc-brand svg { width: 26px; height: 26px; flex: none; }
.pc-nav { display: flex; gap: 4px; }
.pc-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  text-decoration: none; font-family: "IBM Plex Sans KR", -apple-system, sans-serif; font-size: 0.9375rem; font-weight: 600;
  color: var(--ink-soft, #5B5249);
}
.pc-nav a:hover { color: var(--ink, #1F1B17); background: rgba(31, 27, 23, 0.06); }
.pc-nav a[aria-current="page"] { color: var(--paper, #F6F3ED); background: var(--ink, #1F1B17); }
.pc-home {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
  font-family: "IBM Plex Sans KR", -apple-system, sans-serif; font-size: 0.875rem; font-weight: 600;
  color: var(--ink-soft, #5B5249); text-decoration: none;
}
.pc-home:hover { color: var(--ink, #1F1B17); text-decoration: underline; text-underline-offset: 3px; }
.pc-top a:focus-visible, .pc-tabs a:focus-visible { outline: 3px solid var(--seal, #A3302A); outline-offset: 2px; }

/* Phone tab bar */
.pc-tabs { display: none; }
@media (max-width: 860px) {
  .pc-nav { display: none; }
  .pc-top .in { height: 56px; }
  body.has-tabs { --tab-h: calc(60px + env(safe-area-inset-bottom)); padding-bottom: calc(var(--tab-h) + 12px); }
  .pc-tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    height: var(--tab-h); padding-bottom: env(safe-area-inset-bottom);
    background: var(--paper, #F6F3ED); border-top: 1px solid rgba(31, 27, 23, 0.12);
  }
  .pc-tabs a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: var(--ink-soft, #5B5249);
    font-family: "IBM Plex Sans KR", -apple-system, sans-serif; font-size: 0.75rem; font-weight: 600; line-height: 1;
  }
  .pc-tabs svg { width: 24px; height: 24px; }
  .pc-tabs a[aria-current="page"] { color: var(--ink, #1F1B17); }
  .pc-tabs a[aria-current="page"] svg .fill { fill: var(--seal, #A3302A); }
  /* the Coupang bar from common.js sits on top of the tab bar, not under it */
  body.has-tabs .cdock { bottom: var(--tab-h); }
  body.has-tabs.has-cdock { padding-bottom: calc(var(--tab-h) + var(--cdock-h, 0px) + 12px); }
}
@media (prefers-reduced-motion: reduce) { .pc-top { transition: none; } }