/* 🔥 이번 주 세계 라디오 TOP 10 띠 — js/topband.js 와 한 쌍(지우면 같이 지울 것)
 * 버튼 줄 맨 아래 한 줄짜리 알약. ✕ 는 알약 안 오른쪽 끝(따로 동그라미를 두지 않아 한 덩어리로 보이게) */
.tb-band { flex: 1 0 100%; order: 99; max-width: 560px; min-width: 0; height: 30px; position: relative;
  display: flex; align-items: center; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255,154,92,.32);
  background: linear-gradient(90deg, rgba(255,154,92,.16), rgba(255,154,92,.04) 60%), var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  animation: tb-in .35s ease-out both; }
@keyframes tb-in { from { opacity: 0; transform: translateY(-4px); } }
.tb-band:hover, .tb-band.on { border-color: rgba(255,154,92,.65); }
.tb-open { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 4px;
  border: 0; background: none; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.tb-badge { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--radio); color: #1a0d05; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.tb-head { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  background: var(--radio); color: #1a0d05; font-weight: 800; font-size: 12px; }
.tb-tick { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-dim);
  transition: opacity .25s, transform .25s; }
.tb-tick.out { opacity: 0; transform: translateY(5px); }
.tb-tick b { color: var(--text); font-weight: 600; }
.tb-caret { flex: none; color: var(--text-faint); font-size: 11px; transition: transform .2s; }
.tb-band.on .tb-caret { transform: rotate(180deg); }
.tb-x { flex: none; width: 30px; height: 100%; border: 0; border-left: 1px solid var(--line); background: none;
  color: var(--text-faint); font-size: 11px; cursor: pointer; }
.tb-x:hover { color: var(--text); }

.tb-drop { position: fixed; z-index: 25; top: calc(var(--top-h, 66px) + 6px); left: var(--gutter);
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - var(--top-h, 66px) - var(--player-h, 72px) - 40px); overflow: auto; overscroll-behavior: contain;
  background: var(--surface-solid); border: 1px solid var(--line); border-top: 3px solid var(--radio);
  border-radius: var(--radius); padding: 6px 12px 12px; box-shadow: var(--shadow); animation: tb-in .2s ease-out both; }
.tb-drop[hidden] { display: none; }
.tb-list { list-style: none; margin: 0; padding: 0; }
.tb-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.tb-rank { flex: none; width: 22px; text-align: center; font-weight: 800; color: var(--text-faint); }
.tb-row:nth-child(-n+3) .tb-rank { color: var(--radio); }
.tb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tb-title, .tb-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-title { font-size: 14px; }
.tb-artist { font-size: 12px; color: var(--text-dim); }
.tb-yt { flex: none; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.tb-yt:hover { border-color: rgba(255,154,92,.7); }
.tb-all { display: block; width: 100%; margin: 10px 0 6px; padding: 9px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid rgba(255,154,92,.5); background: rgba(255,154,92,.1); color: var(--radio); font-weight: 600; }
.tb-note { margin: 0; font-size: 11px; color: var(--text-faint); }

/* 휴대폰: 버튼 줄과 같은 폭·더 얇게, 긴 제목 대신 'TOP 10' 배지 */
.tb-badge-s { display: none; }
@media (max-width: 720px) {
  .tb-band { max-width: none; height: 28px; }
  .tb-head { display: none; }
  .tb-badge-s { display: inline-flex; }
  .tb-badge { height: 20px; padding: 0 8px; font-size: 11px; }
  .tb-open { font-size: 12.5px; gap: 7px; }
  .tb-x { width: 28px; }
  .tb-drop { top: calc(var(--top-h, 150px) - 6px); z-index: 31; padding: 4px 10px 10px; }   /* 처음 화면 패널과 같은 높이 — 주황 선이 두 겹으로 비치지 않게 */
  .tb-row { padding: 7px 2px; }
}
@media (prefers-reduced-motion: reduce) { .tb-band, .tb-drop { animation: none; } .tb-tick { transition: none; } }