/* 홈 플리 아래: 오늘의 편성 ~ 처음 오셨나요? 규격은 docs/listener-ui-spacing.md '홈 플레이리스트와 방송 아래 콘텐츠'.
   두 띠(.manual-band)가 768px부터 footer와 같은 칸(1.5fr / minmax(320px, 1fr), 사이 --space-16)을 쓴다.
   띠마다 왼쪽 큰 제목이 1행, 양쪽 내용이 2행에 서서(subgrid) 오른쪽 첫 줄이 왼쪽 내용 첫 줄과 같은 높이에 온다.
   칸 나누기는 .manual 안에서만 한다. #manualWrap 은 광고 레일이 붙는 칸이다. */
.below .manual {
  --manual-hair: rgba(169, 180, 194, .18);  /* 형제 사이 줄 */
  --manual-rule: rgba(237, 224, 194, .25);  /* 목록을 여는 줄 */
  --manual-tick: rgba(169, 180, 194, .5);
  --manual-wash: rgba(237, 224, 194, .06);  /* 편성 대화상자의 지금 줄과 같은 빛 */
  display: grid;
  gap: var(--home-section-gap);
  min-width: 0;
}
.below .manual h2 { margin: 0; color: var(--paper) }
.below .manual p { margin: 0; text-wrap: pretty }
/* 띠마다 큰 제목은 하나. 위 플리 제목과 같은 크기 */
.below .manual .manual-display { font: 700 clamp(26px, 2.6vw, 38px)/1.4 var(--display); letter-spacing: -.04em }
.below .manual .manual-band { display: grid; align-items: start; gap: var(--home-section-gap) }
.below .manual :is(.station-log, .quick-guide) { display: grid; align-items: start; gap: var(--space-page); min-width: 0 }
@media (min-width: 768px) {
  .below .manual .manual-band { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); grid-template-rows: auto auto; gap: var(--space-page) var(--space-16) }
  .below .manual :is(.station-log, .quick-guide) { grid-column: 1; grid-row: 1 / span 2; grid-template-rows: subgrid }
  .below .manual :is(.listener-tools, .station-channels) { grid-column: 2; grid-row: 2 }
  /* subgrid 가 없으면 오른쪽을 제목 줄에서 세운다. 어긋남은 늘 제목 높이 + --space-page 만큼이고 겹치지 않는다 */
  @supports not (grid-template-rows: subgrid) {
    .below .manual :is(.listener-tools, .station-channels) { grid-row: 1 / span 2 }
  }
}
/* 고정 재생바 밑으로 탭 초점이 숨지 않게: 모바일 라디오 dock, 플리 재생바(모든 폭). 두 바는 같이 뜨지 않는다 */
.has-radio-dock .below .manual :is(a, button, summary) { scroll-margin-bottom: var(--radio-dock-space) }
.has-playlist-player .below .manual :is(a, button, summary) { scroll-margin-bottom: var(--playlist-player-height) }

/* ---------- 오늘의 편성: 다이얼 ----------
   기본은 왼쪽 세로 레일에 붙은 목록. 두 칸 배치(768px 이상)에서 본문이 560px 이상일 때만 위쪽 기준선에 네 구간이 선 가로 다이얼.
   subgrid 는 크기 격리와 같이 못 쓰므로 컨테이너는 본문 래퍼가 맡는다 */
.below .manual .station-log-body { display: grid; gap: var(--space-page); min-width: 0; container-type: inline-size }
.below .manual .onair-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--manual-rule); border-inline-start: 1px solid var(--manual-rule) }
.below .manual .onair-list li { position: relative; display: grid; grid-template: "time dj" ". mood" / max-content minmax(0, 1fr); align-items: baseline; gap: var(--space-1) var(--space-group); padding: var(--space-group) var(--space-group) var(--space-group) var(--space-page) }
.below .manual .onair-list li + li { border-top: 1px solid var(--manual-hair) }
.below .manual .onair-list time { grid-area: time; color: var(--mist); font: 600 clamp(var(--t3), 5vw, var(--t4))/1.3 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.below .manual .onair-dj { grid-area: dj; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-text) }
.below .manual .onair-list b { color: var(--paper); font: 600 var(--t3)/1.4 var(--ui) }
/* 소개 줄은 짧은 이름표라 여러 줄이 되면 고르게 접는다(balance 는 이 이름표에만 쓴다) */
.below .manual .onair-list small { grid-area: mood; color: var(--mist); font: 400 var(--t1)/1.7 var(--ui); text-wrap: balance }
/* 지금 구간: 옅은 종이빛, 밝아진 시각, 켜진 ON AIR 간판의 작은 짝 */
.below .manual .onair-list li[aria-current] { background: var(--manual-wash) }
.below .manual .onair-list li[aria-current] time { color: var(--paper) }
.below .manual .onair-now { padding: 0 var(--space-text); border: 1px solid var(--onair-edge); border-radius: 3px; background: var(--onair); color: var(--onair-ink); font: 600 var(--t1)/1.7 var(--ui); box-shadow: var(--onair-glow) }
.below .manual .onair-list li:not([aria-current]) .onair-now { display: none }
/* '방송 중'은 정적 HTML 에 두지 않는다(검색에 네 DJ 모두 방송 중으로 읽히지 않게). 칩 안의 숨은 쉼표만 정적이라 낭독은 어느 브라우저에서나 'DJ 새벽별, 방송 중.' */
.below .manual .onair-list li[aria-current] .onair-now::after { content: '방송 중' }
/* 바늘: paintPlayer 가 칠한 --now(지금 구간 안의 자리 0~1)에 선다. 지금 구간이 없으면 안 그린다. 움직임 전환은 없다 */
.below .manual .onair-list li[aria-current]::after { content: ''; position: absolute; top: clamp(1px, calc(var(--now, 0) * 100%), calc(100% - 1px)); left: 0; width: var(--space-6); height: 2px; translate: 0 -50%; background: var(--onair-edge); pointer-events: none }
@media (forced-colors: active) {
  .below .manual .onair-list li[aria-current]::after { forced-color-adjust: none; background: CanvasText }
}
@container (min-width: 400px) {
  .below .manual .onair-list small { font-size: var(--t2) }
}
@media (min-width: 768px) {
  @container (min-width: 560px) {
    /* 네 구간이 시각·DJ·소개 세 행을 함께 쓴다(subgrid). 한 구간의 DJ 줄이 접히면 네 소개 줄이 같이 내려간다. subgrid 가 없으면 구간마다 따로 쌓일 뿐이다 */
    .below .manual .onair-list { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; border-inline-start: 0 }
    .below .manual .onair-list li { grid-row: span 3; grid-template: "time" "dj" "mood" / minmax(0, 1fr); grid-template-rows: subgrid; align-content: start; padding: var(--space-page) var(--space-group) var(--space-section) }
    .below .manual .onair-list li + li { border-top: 0; border-inline-start: 1px solid var(--manual-hair) }
    /* 눈금은 가로 다이얼에만: 구간(6시간)마다 여섯 개, 곧 한 시간에 하나 */
    .below .manual .onair-list li::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--space-2); background: repeating-linear-gradient(90deg, var(--manual-tick) 0 1px, transparent 1px calc(100% / 6)); pointer-events: none }
    .below .manual .onair-list li[aria-current]::after { top: calc(-1 * var(--space-2)); left: clamp(1px, calc(var(--now, 0) * 100%), calc(100% - 1px)); width: 2px; height: var(--space-8); translate: -50% 0 }
    /* 구간 폭이 좁은 동안(본문 560~739px)은 --t3. 글자 간격을 넓혀도 '00~06시'가 한 줄에 선다 */
    .below .manual .onair-list time { font-size: var(--t3) }
    .below .manual .onair-list small { padding-top: var(--space-1); font-size: var(--t1) }
  }
  @container (min-width: 740px) {
    .below .manual .onair-list time { font-size: var(--t4) }
  }
}
.below .manual .station-log-note { display: grid; gap: var(--space-text); color: var(--mist); font-size: var(--t1); line-height: 1.7 }
.below .manual .station-log-note p { max-width: 38em }

/* ---------- 청취자 도구: 버튼은 늘 글 아래 ---------- */
.below .manual .listener-tools { display: grid; gap: var(--space-page); min-width: 0; border-top: 1px solid var(--manual-rule) }
.below .manual .listener-tool { display: grid; justify-items: start; gap: var(--space-group); padding-top: var(--space-page) }
.below .manual .listener-tool + .listener-tool { border-top: 1px solid var(--manual-hair) }
.below .manual .listener-tool-text { display: grid; gap: var(--space-text); min-width: 0 }
.below .manual .listener-tool h2 { font: 600 var(--t3)/1.5 var(--ui) }
.below .manual .listener-tool p { color: var(--mist); font-size: var(--t2); line-height: 1.75 }
.below .manual .listener-tool .listener-small { font-size: var(--t1) }

/* 질문 줄, 안내 줄, 도구 버튼: 초점 고리를 칸 안쪽(-3px)에 그린다. 줄의 글은 고리 폭보다 넓게 --space-text 만큼 들여 고리가 글을 덮지 않는다 */
.below .manual :is(.quick-guide summary, .station-nav a, .listener-action):focus-visible { outline-offset: -3px }

/* ---------- 처음 오셨나요? ---------- */
.below .manual .quick-guide-list { border-top: 1px solid var(--manual-rule) }
.below .manual .quick-guide details + details { border-top: 1px solid var(--manual-hair) }
.below .manual .quick-guide summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-group); min-height: 60px; padding: var(--space-section) var(--space-text); color: var(--paper); font: 500 var(--t3)/1.5 var(--ui); text-wrap: pretty; cursor: pointer; list-style: none }
.below .manual .quick-guide summary::-webkit-details-marker { display: none }
/* 표시는 그림일 뿐이라 이름에서 뺀다(/ ''). 앞 줄은 대체 글을 모르는 엔진용 */
/* 표시 칸 24px 은 안내 줄의 ↗ 칸과 같아 두 목록의 끝 표시가 한 세로선에 선다 */
.below .manual .quick-guide summary::after { content: '+'; content: '+' / ''; flex: none; inline-size: 24px; color: var(--mist); font: 400 24px/1 var(--ui); text-align: center }
.below .manual .quick-guide details[open] summary::after { content: '\2212'; content: '\2212' / '' }
.below .manual .quick-guide details p { max-width: 38em; padding: 0 var(--space-section) var(--space-section) var(--space-text); color: var(--mist); font-size: var(--t2); line-height: 1.85 }
.below .manual .quick-guide a { color: var(--paper); text-underline-offset: 4px }

/* ---------- 라디오 안내: 모두 새 탭 ---------- */
.below .manual .station-channels { display: grid; gap: var(--space-control); min-width: 0 }
.below .manual .station-nav { border-top: 1px solid var(--manual-rule) }
.below .manual .station-nav a { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--space-group); padding: var(--space-section) var(--space-text); text-decoration: none; transition: background-color .18s ease }
.below .manual .station-nav a + a { border-top: 1px solid var(--manual-hair) }
.below .manual .station-nav a > span { display: grid; gap: var(--space-1) }
.below .manual .station-nav strong { color: var(--paper); font: 500 var(--t3)/1.5 var(--ui) }
.below .manual .station-nav small { color: var(--mist); font-size: var(--t1); line-height: 1.6; text-wrap: pretty }
.below .manual .station-nav svg { justify-self: center; width: 22px; height: 22px; fill: none; stroke: var(--mist); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.below .manual .station-nav a:hover { background: rgba(237, 224, 194, .04) }
.below .manual .station-nav a:hover strong { text-decoration: underline; text-underline-offset: 5px }
/* 바로 위 줄들의 글과 같은 들임 */
.below .manual .station-nav-note { padding-inline: var(--space-text); color: var(--mist); font-size: var(--t1); line-height: 1.7 }