/* =====================================================================
   list_slot.css — 곡 목록 사이 영상 칸 (2026-11-09 요청 39, 사용자가 시안 C '얇은 띠'를 골랐어요)
   그리는 코드 inc/edm_list_slot.lib.php · 움직임 sub/js/list_slot.js. 곡 줄(.tl-row)이 아니라서 표 칸(grid)과 따로 그려요.
   - [음악정보 동영상] [작은 사진 · 제목 · 이름표 · 채널 · 24시간 +N] [점] [보기 ›] — 제목은 3.5초마다 다음 영상으로 바뀌어요
   - 광고일 때: [광고 · 광고주] [그림 · 제목 · 작은 글] [단추 글자 ›]. '광고' 표시는 늘 보여요(좁으면 작은 글 앞)
   - 표 폭(@container tl)이 600px보다 좁으면(휴대폰 · 좁은 창) 왼쪽 이름표 · 점을 빼고 [사진 · 제목] [보기 ›]만
   - 다크가 기본(tracklist.css의 --tl-* 색), 화이트는 맨 아래 [data-theme="light"]
   - 2026-11-10 요청 27: 같은 띠에 DJ 라이브(tls-k-live) · 전설의 트랙 매거진(tls-k-mag, 표지 + 레코드판) · 클럽 지도(tls-k-club) · 페스티벌(tls-k-fest, 사진이 없으면 네온 포스터)
===================================================================== */
.tls{position:relative; border-top:1px solid var(--tl-line,#232323); background:linear-gradient(90deg,rgba(255,0,80,.14),rgba(122,77,255,.06) 55%,rgba(0,0,0,0) 100%)}
.tls::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#ff2d63,#c13ab0 55%,#7a4dff)}
.tls-a{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; column-gap:12px; min-height:56px; padding:7px 14px 7px 12px; color:inherit; text-decoration:none; outline-offset:-2px}
.tls-a:hover, .tls-a:focus{text-decoration:none}
.tls-badge{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:14px; border:1px solid rgba(255,61,116,.45); background:rgba(0,0,0,.35); color:var(--tl-accent-text,#ff3d74); font-size:12px; font-weight:800; white-space:nowrap}
.tls-badge svg{width:14px; height:14px; flex:none}
.tls-badge.is-ad{border-color:var(--tl-chip-line,#333); color:var(--tl-text-3,#8d8d8d)}
.tls-adb{display:inline-flex; align-items:center; height:17px; padding:0 5px; border:1px solid currentColor; border-radius:4px; font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.3px; line-height:1}
.tls-it small .tls-adb{display:none; margin-right:5px; vertical-align:1px}
.tls-rot{position:relative; height:46px; overflow:hidden; min-width:0}
.tls-it{position:absolute; inset:0; display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-content:center;
  transform:translateY(100%); opacity:0; transition:transform .5s ease, opacity .5s ease}
.tls-it.on{transform:none; opacity:1}
.tls-it.out{transform:translateY(-100%); opacity:0}
.tls-th{grid-row:1/3; position:relative; width:76px; height:43px; border-radius:6px; overflow:hidden; background:#000}
.tls-th img{display:block; width:100%; height:100%; object-fit:cover}
.tls-it b{min-width:0; align-self:end; color:var(--tl-text,#ededed); font-size:14px; font-weight:800; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tls-it small{min-width:0; align-self:start; color:var(--tl-text-3,#8d8d8d); font-size:11.5px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tls-dots{display:flex; gap:4px}
.tls-dots i{width:6px; height:6px; border-radius:3px; background:var(--tl-chip-line,#333); transition:width .3s, background-color .3s}
.tls-dots i.on{width:16px; background:var(--tl-accent,#ff0050)}
.tls-go{display:inline-flex; align-items:center; gap:2px; color:var(--tl-accent-text,#ff3d74); font-size:13px; font-weight:800; white-space:nowrap}
.tls-go svg{width:15px; height:15px}
.tls-a:hover .tls-it.on b{color:var(--tl-accent-text,#ff3d74)}
.tls-a:hover .tls-go{text-decoration:underline; text-underline-offset:3px}
.tls-a:focus-visible{outline:2px solid var(--tl-accent,#ff0050)}
/* 내용 종류마다 (2026-11-10 요청 27): DJ 라이브 · 전설의 트랙 · 클럽 지도 · 페스티벌 — 이름표 · 왼쪽 빛줄 색만 달라요 */
.tls-k-live{background:linear-gradient(90deg,rgba(255,106,61,.15),rgba(255,45,99,.05) 55%,rgba(0,0,0,0) 100%)}
.tls-k-mag{background:linear-gradient(90deg,rgba(242,193,78,.13),rgba(217,138,43,.05) 55%,rgba(0,0,0,0) 100%)}
.tls-k-club{background:linear-gradient(90deg,rgba(139,92,255,.16),rgba(41,197,246,.05) 55%,rgba(0,0,0,0) 100%)}
.tls-k-fest{background:linear-gradient(90deg,rgba(47,211,154,.14),rgba(41,197,246,.05) 55%,rgba(0,0,0,0) 100%)}
.tls-k-live::before{background:linear-gradient(180deg,#ff6a3d,#ff2d63)}
.tls-k-live .tls-badge{border-color:rgba(255,106,61,.5); color:#ff8a5c}
.tls-k-mag::before{background:linear-gradient(180deg,#f2c14e,#d98a2b)}
.tls-k-mag .tls-badge{border-color:rgba(242,193,78,.5); color:#f2c14e}
.tls-k-club::before{background:linear-gradient(180deg,#8b5cff,#29c5f6)}
.tls-k-club .tls-badge{border-color:rgba(139,92,255,.55); color:#a98bff}
.tls-k-fest::before{background:linear-gradient(180deg,#2fd39a,#29c5f6)}
.tls-k-fest .tls-badge{border-color:rgba(47,211,154,.5); color:#4be0a8}
/* 전설의 트랙: 네모 표지 + 뒤로 살짝 나온 레코드판 */
.tls-th.lp{background:transparent; overflow:visible}
.tls-th.lp::after{content:""; position:absolute; left:24px; top:1px; width:41px; height:41px; border-radius:50%; z-index:0;
  background:radial-gradient(circle,#d98a2b 0 13%,#111 14% 30%,#2a2a2a 31% 33%,#111 34% 60%,#262626 61% 63%,#0c0c0c 64%)}
.tls-th.lp img{position:relative; z-index:1; width:43px; height:43px; border-radius:4px; box-shadow:2px 0 6px rgba(0,0,0,.5)}
/* 사진 없는 클럽 · 페스티벌: 장르 색 두 빛의 작은 네온 포스터 */
.tls-th.neon{display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 20% 15%,hsl(var(--h1) 95% 60% / .95),transparent 60%),radial-gradient(120% 90% at 85% 90%,hsl(var(--h2) 95% 55% / .9),transparent 62%),#0b0716}
.tls-th.neon i{font-style:normal; font-size:10px; font-weight:900; letter-spacing:.4px; color:#fff; text-align:center; line-height:1.1; padding:0 4px; word-break:break-all; text-shadow:0 0 6px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.6)}
@container tl (max-width:600px){
  .tls-a{grid-template-columns:minmax(0,1fr) auto; min-height:62px; padding:8px 12px 8px 12px}
  .tls-badge, .tls-dots{display:none}
  .tls-it small .tls-adb{display:inline-flex}
  .tls-it{grid-template-columns:78px minmax(0,1fr)}
  .tls-th{width:78px; height:44px}
}
@media (prefers-reduced-motion: reduce){ .tls-it, .tls-dots i{transition:none} }

/* 화이트 */
[data-theme="light"] .tls{border-top-color:var(--lt-divider,#e8e5e0); background:linear-gradient(90deg,#fdecef,#f6effc 55%,var(--lt-surface,#fff) 100%)}
[data-theme="light"] .tls::before{background:linear-gradient(180deg,#d92f55,#a8329e 55%,#7034d6)}
[data-theme="light"] .tls-badge{background:var(--lt-surface,#fff); border-color:rgba(var(--lt-accent-rgb,224,36,78),.35); color:var(--lt-accent-text,#c81d43)}
[data-theme="light"] .tls-badge.is-ad{border-color:var(--lt-border,#dcd8d1); color:var(--lt-text-3,#6f6a63)}
[data-theme="light"] .tls-it b{color:var(--lt-text,#1d1b19)}
[data-theme="light"] .tls-it small{color:var(--lt-text-3,#6f6a63)}
[data-theme="light"] .tls-dots i{background:var(--lt-border,#dcd8d1)}
[data-theme="light"] .tls-dots i.on{background:var(--lt-accent,#e0244e)}
[data-theme="light"] .tls-go,
[data-theme="light"] .tls-a:hover .tls-it.on b{color:var(--lt-accent-text,#c81d43)}
[data-theme="light"] .tls-k-live::before{background:linear-gradient(180deg,#e2562c,#d92f55)}
[data-theme="light"] .tls-k-mag::before{background:linear-gradient(180deg,#d4a12f,#b9741c)}
[data-theme="light"] .tls-k-club::before{background:linear-gradient(180deg,#7034d6,#1f9fd1)}
[data-theme="light"] .tls-k-fest::before{background:linear-gradient(180deg,#1fae7c,#1f9fd1)}
[data-theme="light"] .tls-k-live{background:linear-gradient(90deg,#fdeee8,#fbf1ee 55%,var(--lt-surface,#fff) 100%)}
[data-theme="light"] .tls-k-live .tls-badge{border-color:rgba(214,84,40,.4); color:#c24a1f}
[data-theme="light"] .tls-k-mag{background:linear-gradient(90deg,#fbf3e1,#f8f2e8 55%,var(--lt-surface,#fff) 100%)}
[data-theme="light"] .tls-k-mag .tls-badge{border-color:rgba(176,122,24,.4); color:#93640f}
[data-theme="light"] .tls-k-club{background:linear-gradient(90deg,#f1ecfd,#edf4fb 55%,var(--lt-surface,#fff) 100%)}
[data-theme="light"] .tls-k-club .tls-badge{border-color:rgba(112,52,214,.35); color:#6a31c9}
[data-theme="light"] .tls-k-fest{background:linear-gradient(90deg,#e8f8f1,#ecf6f8 55%,var(--lt-surface,#fff) 100%)}
[data-theme="light"] .tls-k-fest .tls-badge{border-color:rgba(25,140,98,.38); color:#16805a}