/* 에이전트 B: 셋리스트 전용. sections.css 보다 뒤에 로드되므로 여기서 덮어쓴다.
   색은 --ink --paper --pink --mint 만. 네온(.glow-pink)은 NOW PLAYING 라벨 한 곳. 모션은 transform/opacity 위주. */

/* ---------- 탭: LIVE 스티커 ---------- */
.tab { position: relative; }
.tab__live {
  position: absolute; top: -12px; right: -8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; line-height: 1.2;
  font-size: var(--fs-label); letter-spacing: .12em;
  background: var(--ink); color: var(--mint); border: 2px solid var(--mint);
  pointer-events: none;
}
.tab__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- 목록 전환: 탭을 바꾸면 내려가며 사라지고, 새 목록이 아래에서 올라옴 ---------- */
.setlist__list { perspective: 1400px; transition: transform .26s var(--ease-out), opacity .26s ease-out; }
.setlist__list.is-leaving { transform: translateY(14px); opacity: 0; transition-duration: .22s; transition-timing-function: ease-in; }
.setlist__list.is-entering { transform: translateY(20px); opacity: 0; transition: none; }

/* ---------- 곡 행 ---------- */
.song {
  flex-wrap: wrap; row-gap: 0; align-content: center;
  position: relative; transform-origin: 50% 0;
  transition: transform .22s var(--ease-out);
}
.song__num { opacity: .72; transition: opacity .2s ease-out; }
.song__meta { flex: 1 1 0; min-width: 0; }
.song__action { flex: 0 0 auto; white-space: nowrap; }
/* 띄어쓰기 없는 긴 제목/아티스트가 칸을 넘어 겹치지 않게. keep-all 은 그대로, 정말 넘칠 때만 글자 사이를 끊는다 */
.song__artist, .song__title { overflow-wrap: anywhere; }
.song__action svg { transition: transform .25s var(--ease-out); }
.song.is-open .song__action svg { transform: rotate(90deg); }

/* 유튜브 링크가 없는 곡: 누를 수 없음을 회색 라벨로 알림 */
.song.is-soon { cursor: default; }
.song.is-soon .song__action { opacity: .6; }
.song__soon--s { display: none; }

/* NOW PLAYING: 핑크 띠 위에 잉크 칩, 그 안에 민트 이퀄라이저 + 네온 라벨 */
.song.is-now .song__num { opacity: 1; }
.song.is-now .song__action { background: var(--ink); color: var(--paper); padding: 6px 12px; gap: 10px; opacity: 1; }
.song.is-now .eq { color: var(--mint); }
.song__np-s { display: none; }

/* 플립 열림: 행이 위 모서리를 축으로 살짝 젖혀졌다가 펴지고, 아래 플레이어가 펼쳐짐 */
.song.is-open { animation: song-flip .5s var(--ease-out); }
@keyframes song-flip { from { transform: rotateX(-14deg); } to { transform: rotateX(0); } }

.song .song__player { display: grid; grid-template-rows: 0fr; flex: 0 0 100%; width: 100%; padding: 0; transition: grid-template-rows .34s var(--ease-out); }
.song.is-open .song__player { display: grid; grid-template-rows: 1fr; }
.song__player-in { min-height: 0; overflow: hidden; }
.song__player iframe, .song__ph { display: block; width: 100%; aspect-ratio: 16 / 9; border: 3px solid var(--paper); margin-top: 10px; }
.song__ph { background: transparent; }
.song__cap { padding: 10px 0 18px; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0; line-height: 1.4; opacity: .8; }
.song.is-now .song__cap { opacity: 1; }

/* ---------- 호버/포커스 (마우스 환경에서만; 터치는 끈적이지 않게) ---------- */
@media (hover: hover) and (pointer: fine) {
  .song:not(.is-soon):not(.is-now):hover { transform: translateX(8px); }
  .song:hover .song__num { opacity: 1; }
  .song.is-open:hover { transform: none; }
}
.song:focus-visible { transform: translateX(8px); }
.song:focus-visible .song__num { opacity: 1; }
.song.is-open:focus-visible, .song.is-now:focus-visible { transform: none; }

/* ---------- 모바일 ---------- */
@media (max-width: 640px) {
  .tab__live { top: -12px; right: -6px; padding: 2px 6px; gap: 4px; }
  .tab__dot { width: 6px; height: 6px; }
  /* sections.css 가 .song__action span 을 숨기므로 필요한 것만 다시 켬 */
  .song__action .eq { display: inline-flex; }
  .song__action .eq span { display: inline-block; }
  .song__action .song__np { display: inline; }
  .song__action .song__np-s { display: inline; }
  .song__action .song__soon--s { display: inline; }
  .song.is-now .song__action { padding: 4px 8px; gap: 6px; }
  .song__action svg { width: 18px; height: 18px; }
  .song__player iframe, .song__ph { border-width: 2px; margin-top: 6px; }
  .song__cap { padding: 8px 0 12px; }
}

/* ---------- 모션 감소 ---------- */
@media (prefers-reduced-motion: reduce) {
  .setlist__list, .song, .song__num, .song__action svg, .song .song__player { transition: none !important; animation: none !important; }
  .setlist__list.is-leaving, .setlist__list.is-entering { transform: none; opacity: 1; }
  .song.is-open { animation: none !important; }
  .tab__dot { animation: none !important; }
}