/* ===================================================================
   tracklist.css — 곡 목록 표 (최신 트랙·믹셋·레전드·디깅, 2026-11)
   그리는 코드: inc/tracklist.lib.php, 움직임: sub/js/tracklist.js
   - 표가 들어갈 실제 폭(컨테이너)에 맞춰 칸을 줄여요. 왼쪽 메뉴가 있든 없든 같은 규칙이에요.
     좁을 때부터 넓을 때 순서로: 휴대폰(⋮ 메뉴) → 아이콘·날짜 → DJ 정보 칸·재생 → 좋아요 → 연도까지
     2026-11-06 '작업 02' 사용자 요청: 리포스트 칸은 빼고(재생·좋아요만), 휴대폰처럼 DJ 정보(BPM · KEY · 길이)를 컴퓨터에도 보여요
   - 제목은 언제나 한 줄(…으로 줄임).
   - 아이콘(넓을 때): 아티스트 · 좋아요 · 보관함 — 모두 같은 동그란 단추예요 ('작업 02' 아이콘 통일성, 묶음 알약 없음).
     다운로드·사운드클라우드는 줄 아래 디깅 플레이어에 있어요. 덱 단추는 지금 숨겼어요(EDM_TL_DECK_BTNS, 다시 켜면 표에 tl-decks).
     휴대폰은 ⋮ 메뉴와 보관함만 둬요.
   - 다크가 기본이고, 화이트(크림)는 맨 아래 [data-theme="light"]에서 색만 바꿔요.
=================================================================== */

:root{
  --tl-text:#ededed;
  --tl-text-2:#bdbdbd;
  --tl-text-3:#8d8d8d;
  --tl-line:#232323;
  --tl-head:#8d8d8d;
  --tl-hover:rgba(255,255,255,.035);
  --tl-accent:#ff0050;
  --tl-accent-text:#ff3d74;
  --tl-accent-soft:rgba(255,0,80,.10);
  --tl-on-accent:#fff;
  --tl-ic:#9a9a9a;
  --tl-ic-hover:#fff;
  --tl-ic-bg:rgba(255,255,255,.08);
  --tl-chip:#1a1a1a;
  --tl-chip-line:#333;
  --tl-chip-text:#d8d8d8;
  --tl-ink:#fff;
  --tl-ink-text:#111;
  --tl-dig:#0e0e0e;
  --tl-dig-line:#262626;
  --tl-wave:#5a5a5a;
  --tl-wave-prog:#ff0050;
  --tl-pop:#1b1b1b;
  --tl-pop-line:#2e2e2e;
  --tl-shadow:0 12px 32px rgba(0,0,0,.55);
  --tl-cover-bg:#1a1a1a;
  --tl-focus:0 0 0 2px rgba(255,0,80,.55);
  --tl-grp-bg:rgba(255,255,255,.045);
  --tl-grp-line:rgba(255,255,255,.08);
  --tl-d1:#3aa8ff;          /* HANDS 덱 1 */
  --tl-d2:#ff5577;          /* HANDS 덱 2 */
  --tl-on-deck:#fff;
  --tl-sc:#ff5500;          /* 사운드클라우드 주황 */
  --tl-sel:rgba(58,168,255,.6);
  --tl-soft:rgba(255,255,255,.07);   /* 휴대폰: 아이콘 단추 · 칸 나눔 바탕 */
  --tl-seg-on:#2a2a2f;               /* 휴대폰: 칸 나눔에서 고른 칸 */
}

.tl-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tl-svg{width:1em;height:1em;display:block;flex:none}

/* 목록 페이지에서는 본문 칸이 창보다 넓어지지 않게 해요 (탭 줄·표가 창을 옆으로 밀어내던 문제).
   default.css는 1025px 이상에서만 이렇게 해 뒀는데, 새 표는 좁은 폭을 스스로 줄여서 모든 폭에서 괜찮아요 */
.va-main{min-width:0}

/* ---------------- 제목 줄 ---------------- */
.tl-pagehead{flex-wrap:wrap; row-gap:8px}
.tl-pagehead .va-title{min-width:0}

/* ---------------- 기간 탭 + 날짜 고르기 ---------------- */
.tl-tabbar{display:flex; align-items:center; gap:10px; margin:15px 0 12px; min-width:0}
/* 탭은 언제나 한 줄: 넓으면 고르게 나누고, 모자라면 옆으로 밀어서 봐요 (레전드 연도 탭 9개도 글자가 깨지지 않게) */
.tl-tabbar .va-tab{
  margin:0; flex:1 1 auto; min-width:0; max-width:none;
  flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tl-tabbar .va-tab::-webkit-scrollbar{display:none}
.tl-tabbar .va-tab a{flex:1 0 auto; white-space:nowrap}
.tl-tabs .tl-tab-sel{display:none}   /* '이전 연도' 고르기는 컴퓨터만 (아래 721px 이상 규칙) */
.tl-date{display:flex; align-items:center; gap:4px; flex:none}
.tl-date-btn{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 12px; border-radius:8px; cursor:pointer;
  border:1px solid #444; background:#111; color:#ccc; font-family:inherit; font-weight:600; font-size:14px; white-space:nowrap;
}
.tl-date-btn .tl-svg{font-size:17px}
.tl-date-btn:hover{border-color:#666; color:#fff}
.tl-date.on .tl-date-btn{background:var(--tl-accent); border-color:var(--tl-accent); color:#fff}
/* 기간 고르기 판 (2026-11: 시작·끝 날짜) — tracklist.js가 단추 아래에 열어요 */
.tl-datepop{
  position:fixed; z-index:10050; width:min(360px, calc(100vw - 16px)); padding:12px; border-radius:14px;
  background:var(--tl-pop); border:1px solid var(--tl-pop-line); box-shadow:var(--tl-shadow); color:var(--tl-text);
  opacity:0; transform:translateY(-4px); transition:opacity .14s, transform .14s;
}
.tl-datepop.open{opacity:1; transform:none}
.tl-dp-head{margin:0 2px 10px; font-size:13px; font-weight:700; color:var(--tl-text-3)}
.tl-dp-presets{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.tl-dp-presets button{
  flex:1 1 auto; height:34px; padding:0 10px; border-radius:10px; border:1px solid var(--tl-chip-line); background:var(--tl-chip);
  color:var(--tl-text-2); font-family:inherit; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer;
}
.tl-dp-presets button:hover{color:var(--tl-text); border-color:var(--tl-text-3)}
.tl-dp-row{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:6px; margin-bottom:6px}
.tl-dp-row label{display:grid; gap:4px; min-width:0}
.tl-dp-row label span{font-size:12px; font-weight:600; color:var(--tl-text-3)}
.tl-dp-row input{
  width:100%; min-width:0; height:38px; padding:0 8px; border-radius:10px; border:1px solid var(--tl-chip-line); background:var(--tl-chip);
  color:var(--tl-text); font-family:inherit; font-size:14px; color-scheme:dark;
}
.tl-dp-dash{padding-bottom:10px; color:var(--tl-text-3)}
.tl-dp-note{margin:0 2px 12px; font-size:12px; color:var(--tl-text-3)}  /* 기간은 최대 1년 (2026-11-06) */
.tl-dp-apply{width:100%; height:40px; border:0; border-radius:999px; background:var(--tl-accent); color:#fff; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer}
.tl-dp-apply:hover{filter:brightness(1.08)}
.tl-date-step{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:34px; border-radius:8px;
  color:var(--tl-text-2); font-size:17px; text-decoration:none;
}
.tl-date-step:hover{background:var(--tl-ic-bg); color:var(--tl-text)}
.tl-date-step.is-off{opacity:.3; pointer-events:none}
/* 날짜 고르기 자리: 컴퓨터는 기간 탭 오른쪽, 휴대폰은 '전체 재생' 오른쪽 (아래 720px 규칙) */
.tl-date.tl-date-bar{display:none}

/* ---------------- 도구 줄 (곡 수 · 전체 재생 · 정렬) ---------------- */
.tl-bar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 14px; margin:4px 0 14px}
.tl-bar-l,.tl-bar-r{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0}
.tl-per{display:inline-flex; padding:3px; border-radius:999px; background:var(--tl-chip); border:1px solid var(--tl-chip-line)}
.tl-per a{
  min-width:40px; height:30px; padding:0 10px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--tl-text-2); font-weight:700; font-size:14px; text-decoration:none; font-variant-numeric:tabular-nums;
}
.tl-per a:hover{color:var(--tl-text)}
.tl-per a.on{background:var(--tl-ink); color:var(--tl-ink-text)}
.tl-playall{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px 0 13px; border-radius:999px; cursor:pointer;
  background:var(--tl-accent); color:#fff; border:0; font-weight:700; font-size:14px; white-space:nowrap;
}
.tl-playall .tl-svg{font-size:16px}
.tl-playall:hover{filter:brightness(1.08)}
.tl-playall:disabled{opacity:.6; cursor:progress}
.tl-sort{position:relative; display:inline-flex; align-items:center}
.tl-sort-sel{
  appearance:none; -webkit-appearance:none; height:38px; padding:0 36px 0 14px; border-radius:10px; cursor:pointer;
  background:var(--tl-chip); color:var(--tl-text); border:1px solid var(--tl-chip-line); font-weight:600; font-size:14px;
}
.tl-sort .tl-svg{position:absolute; right:12px; font-size:16px; color:var(--tl-text-3); pointer-events:none}
@media (max-width:720px){
  .tl-date.tl-date-tabs{display:none}
  .tl-date.tl-date-bar{display:flex}
  .tl-bar{gap:8px 10px; margin-bottom:10px}
  .tl-per a{min-width:36px; height:28px; padding:0 8px; font-size:13px}
  .tl-playall{height:34px; padding:0 13px 0 11px; font-size:13px}
  .tl-sort-sel{height:34px; font-size:13px; padding:0 32px 0 12px}
  .tl-tabbar{gap:6px; margin:10px 0}
  .tl-date-btn{height:30px; padding:0 10px; border-radius:15px; font-size:13px}
  .tl-date-step{width:26px; height:30px}
}
/* 아주 좁은 화면(폴드 접힘 등): 날짜 단추는 달력 그림만 */
@media (max-width:400px){
  .tl-date:not(.on) .tl-date-btn span{display:none}
  .tl-date:not(.on) .tl-date-btn{padding:0 8px}
}
@media (max-width:330px){
  .tl-playall span{display:none}
  .tl-playall{padding:0 10px}
  .tl-date.on .tl-date-btn span{font-size:12px}
}

/* ---------------- 표 ---------------- */
/* 칸 너비는 변수로: 순위 · 커버 · DJ 정보(BPM · KEY · 길이) · 숫자(재생·좋아요) · 날짜 · 아이콘 하나(--tl-icw)
   --tl-act(아이콘 칸 전체)는 폭마다 보이는 아이콘 수로 정해요 (아래 '폭별 칸'). 아이콘 사이는 4px */
.tl{
  container:tl / inline-size; width:100%;
  --tl-gap:10px; --tl-padx:8px;
  --tl-rankw:22px; --tl-cover:44px; --tl-djw:146px; --tl-numw:52px; --tl-datew:46px; --tl-icw:34px;
  --tl-act:var(--tl-icw);
}
.tl.tl-has-old{--tl-datew:62px}   /* 지난해 곡이 있으면 19-05-03처럼 두 자리 연도가 붙어요 */
@media (pointer:coarse){ .tl{--tl-icw:38px} }  /* 손가락으로 누르는 기기: 단추를 조금 크게 */
.tl .tl-head,
.tl .tl-body .tl-row{
  display:grid; align-items:center; column-gap:var(--tl-gap);
  grid-template-areas:none;
  padding:0 var(--tl-padx);
  /* 휴대폰 기본: 순위 · 커버 · 제목 · ⋮ */
  grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) var(--tl-icw);
}
.tl .tl-head{display:none; padding-top:10px; padding-bottom:10px; color:var(--tl-head); font-size:12px; font-weight:700; letter-spacing:0; white-space:nowrap; border-bottom:1px solid var(--tl-line)}
.tl .tl-body .tl-row{
  position:relative; padding-top:9px; padding-bottom:9px; border-top:1px solid var(--tl-line); border-bottom:0;
  background:transparent; transition:background-color .15s;
}
.tl .tl-body .tl-row:first-child{border-top:0}
.tl .tl-body .tl-row:hover{background:var(--tl-hover)}

/* 칸: 넓을 때만 보이는 것은 기본으로 숨겨요 */
.tl .tl-c-plays,.tl .tl-c-likes,.tl .tl-c-dj,.tl .tl-c-date{display:none}
/* DJ 정보 칩 (BPM · KEY · 길이 · 휴대폰은 올린 날도): 제목 아래 줄(.tl-l3)과 넓을 때 칸(.tl-c-dj)이 같은 모양 */
.tl .tl-c-dj{align-items:center; gap:5px; min-width:0; overflow:hidden; white-space:nowrap}
.tl .tl-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tl .tl-c-date{white-space:nowrap; font-variant-numeric:tabular-nums}
.tl .tl-c-date .tl-y{display:none}
.tl .tl-head .tl-c-date{text-align:left}

.tl .tl-c-rank{
  text-align:center; font-weight:800; font-size:12px; color:var(--tl-text-2);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden;
}
.tl .tl-head .tl-c-rank{font-weight:700; color:var(--tl-head)}

/* 커버 */
.tl-cover{
  position:relative; display:block; width:var(--tl-cover); height:var(--tl-cover); padding:0; border:0; border-radius:6px;
  overflow:hidden; cursor:pointer; background:var(--tl-cover-bg); touch-action:manipulation;
}
.tl-cover img{width:100%; height:100%; object-fit:cover; display:block}
.tl-cover-ic{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); color:#fff; font-size:20px; opacity:0; transition:opacity .15s;
}
.tl-cover:hover .tl-cover-ic,.tl-cover:focus-visible .tl-cover-ic{opacity:1}
.tl-cover:focus-visible{outline:none; box-shadow:var(--tl-focus)}
/* 지금 재생 중: 커버 위 막대 3개가 움직여요 */
.tl-eq{position:absolute; inset:0; display:none; align-items:flex-end; justify-content:center; gap:3px; padding-bottom:11px; background:rgba(0,0,0,.42)}
.tl-eq i{width:4px; height:18px; border-radius:2px; background:#fff; transform-origin:bottom; animation:tl-eq .9s ease-in-out infinite}
.tl-eq i:nth-child(2){animation-delay:-.3s}
.tl-eq i:nth-child(3){animation-delay:-.6s}
@keyframes tl-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.tl-row.active .tl-eq{display:flex}
.tl-row.active .tl-cover:hover .tl-eq{display:none}
.tl-row.active.is-paused .tl-eq i{animation-play-state:paused}

/* 제목·아티스트 */
.tl .tl-c-main{min-width:0; cursor:pointer; touch-action:manipulation}
.tl .tl-head .tl-c-main{cursor:default}
.tl-l1{display:flex; align-items:center; gap:7px; min-width:0}
.tl-title{
  flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  color:var(--tl-text); font-weight:700; font-size:15px; line-height:1.35; word-break:normal;
}
.tl .tl-c-main:hover .tl-title{color:var(--tl-accent-text)}
.tl-row.active .tl-title{color:var(--tl-accent-text)}
.tl-l2{display:flex; align-items:center; gap:8px; min-width:0; margin-top:2px; font-size:13px; line-height:1.35; color:var(--tl-text-3)}
.tl-artist{flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.tl-meta{display:inline-flex; align-items:center; gap:8px; flex:none; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:12px}
.tl-meta > span{display:inline-flex; align-items:center; gap:3px}
.tl-meta > span::before{content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; margin-right:5px}
.tl-meta .tl-svg{font-size:9px}
.tl-pro{
  flex:none; padding:1px 6px; border-radius:4px; font-size:10.5px; font-weight:800; letter-spacing:.3px; line-height:1.5;
  background:#ff5500; color:#fff;
}
/* 기능 아이콘 (2026-11-06 '작업 02'로 다시 정리): 아티스트 · 좋아요 · 보관함 (· 덱 1 · 덱 2) ⋮
   휴대폰은 보관함 · ⋮, 중간 폭은 좋아요 · 보관함 · ⋮, 넓으면 다 보이고 ⋮는 숨겨요 (아래 '폭별 칸') */
.tl .tl-c-act{display:flex; align-items:center; justify-content:flex-end; gap:4px}
.tl .tl-c-act > *{display:none}
.tl .tl-c-act > .tl-ic-more{display:inline-flex}
/* 묶음(tl-grp): 사용자 요청 '아이콘 통일성'으로 알약 바탕을 없앴어요. 묶음 안팎 모두 같은 단추 · 같은 간격 */
.tl-grp{display:inline-flex; align-items:center; flex:none; gap:4px}
.tl-ic{
  display:inline-flex; align-items:center; justify-content:center; width:var(--tl-icw,34px); height:var(--tl-icw,34px); padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--tl-ic); font-size:19px; cursor:pointer; text-decoration:none; flex:none;
  transition:background-color .15s, color .15s, transform .15s; touch-action:manipulation;
}
.tl-ic:hover{background:var(--tl-ic-bg); color:var(--tl-ic-hover)}
.tl-ic:active{transform:scale(.9)}
.tl-ic:focus-visible{outline:none; box-shadow:var(--tl-focus)}
.tl-ic[aria-pressed="true"]{color:var(--tl-accent-text)}
.tl-ic.is-busy{opacity:.5; pointer-events:none}
.tl-ic.pop{animation:tl-pop .35s ease}
@keyframes tl-pop{40%{transform:scale(1.25)}}
/* 좋아요 · 보관함(장바구니 모양): 비면 테두리만, 누르면 꽉 찬 모양에 불이 들어와요 (둘 다 같은 모양, 보관함은 다시 누르면 빠져요) */
.tl-ic-pick[aria-pressed="true"] .tl-svg,
.tl-ic-like[aria-pressed="true"] .tl-svg{filter:drop-shadow(0 0 5px rgba(255,0,80,.6))}
/* 좁은 표: 제목 줄 끝 보관함 단추 (넓으면 아이콘 줄에 있어서 숨겨요) */
.tl-cartm{display:inline-flex; margin-left:auto; width:34px; height:34px; font-size:21px; color:var(--tl-text-2)}
/* HANDS 덱에 넣기 (덱 단추를 켠 표만: tl-decks, 지금은 숨김). 덱 번호 단추는 덱 색으로 늘 보이게 */
.tl:not(.tl-decks) .tl-grp-go{display:none !important}
.tl-ic-deck{font-size:20px}
.tl-ic-deck[data-deck="0"]{color:var(--tl-d1)}
.tl-ic-deck[data-deck="1"]{color:var(--tl-d2)}
.tl-ic-deck:hover{color:var(--tl-ic-hover)}
.tl-ic-deck[data-deck="0"]:hover{background:var(--tl-d1); color:var(--tl-on-deck)}
.tl-ic-deck[data-deck="1"]:hover{background:var(--tl-d2); color:var(--tl-on-deck)}
.tl .tl-body .tl-row.is-sel{box-shadow:inset 0 0 0 2px var(--tl-sel)}
.tl .tl-body .tl-row.is-sel.active{box-shadow:inset 3px 0 0 var(--tl-accent), inset 0 0 0 2px var(--tl-sel)}

.tl-empty{margin:0; padding:36px 16px; text-align:center; color:var(--tl-text-3); font-size:14px}

/* 아주 좁으면 길이는 빼요 */
@container tl (max-width:399px){
  .tl-meta .tl-m-time{display:none}
}

/* ---- 폭별 칸 (보이는 칸 수와 grid 칸 수가 꼭 같아야 해요) ---- */
@container tl (max-width:299px){
  /* 폴드 접힘 같은 아주 좁은 화면: 순위를 빼고 커버 · 제목 · ⋮ */
  .tl > *{--tl-gap:8px; --tl-padx:4px; --tl-cover:40px}
  .tl .tl-head,.tl .tl-body .tl-row{grid-template-columns:var(--tl-cover) minmax(0,1fr) var(--tl-icw)}
  .tl .tl-c-rank{display:none}
  .tl-title{font-size:14px}
  .tl-meta .tl-m-plays{display:none}
}
@container tl (min-width:480px){
  /* 순위 · 커버 · 제목 · 날짜 · 아이콘 */
  .tl > *{--tl-gap:12px; --tl-padx:10px; --tl-rankw:28px}
  .tl .tl-head{display:grid}
  .tl .tl-head,.tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) var(--tl-datew) var(--tl-act)}
  .tl .tl-c-date{display:block}
  /* 아이콘: 좋아요 · 보관함 · ⋮ — 아티스트·다운로드·사운드클라우드는 ⋮ 메뉴에 (덱 단추를 켜면 마우스 기기는 줄에도, 아래) */
  .tl .tl-c-act > .tl-grp-me,.tl .tl-c-act > .tl-ic-pick{display:inline-flex}
  .tl .tl-grp-me .tl-ic-artist{display:none}
  .tl > *{--tl-act:calc(var(--tl-icw) * 3 + 8px)}
  .tl-cartm{display:none}
  .tl-meta > span:first-child{display:none}
  .tl-meta > span:nth-child(2)::before{display:none}
  .tl .tl-c-rank{font-size:13px}
  /* DJ 정보는 제목 아래 줄로 (올린 날은 날짜 칸에 있어서 빼고, 길이도 이 줄에 있어서 재생 옆 길이는 빼요) */
  .tl .tl-l3{display:flex}
  .tl .tl-l3 em.d,.tl-meta .tl-m-time{display:none}
}
/* 중간 폭이라도 마우스로 쓰는 컴퓨터는 덱 단추를 줄에 둬요 (손가락 기기는 ⋮ 메뉴로 깔끔하게) */
@media (pointer:fine){
  @container tl (min-width:480px){
    .tl.tl-decks .tl-c-act > .tl-grp-go{display:inline-flex}
    .tl.tl-decks > *{--tl-act:calc(var(--tl-icw) * 5 + 16px)}
  }
}
@container tl (min-width:600px){
  .tl > *{--tl-rankw:30px}
}
@container tl (min-width:720px){
  /* + DJ 정보 칸 · 재생 수 (제목 아래 줄의 재생·길이·DJ 정보는 숨겨요) */
  .tl > *{--tl-cover:46px; --tl-rankw:32px}
  .tl .tl-head,.tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) var(--tl-djw) var(--tl-numw) var(--tl-datew) var(--tl-act)}
  .tl .tl-c-plays{display:block}
  .tl .tl-c-dj{display:flex}
  .tl-meta,.tl .tl-l3{display:none}
}
@container tl (min-width:860px){
  /* + 좋아요 */
  .tl > *{--tl-gap:14px; --tl-padx:12px; --tl-cover:48px; --tl-rankw:34px}
  .tl .tl-head,.tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) var(--tl-djw) var(--tl-numw) var(--tl-numw) var(--tl-datew) var(--tl-act)}
  .tl .tl-c-likes{display:block}
  .tl-title{font-size:15.5px}
  /* 아이콘 다: 아티스트 · 좋아요 · 보관함 (· 덱 1 · 덱 2) (⋮는 숨겨요) */
  .tl.tl-decks .tl-c-act > .tl-grp-go{display:inline-flex}
  .tl .tl-grp-me .tl-ic-artist{display:inline-flex}
  .tl .tl-c-act > .tl-ic-more{display:none}
  .tl > *{--tl-act:calc(var(--tl-icw) * 3 + 8px)}
  .tl.tl-decks > *{--tl-act:calc(var(--tl-icw) * 5 + 16px)}
}
@container tl (min-width:1040px){
  /* 날짜에 연도까지 (2026-11-04) */
  .tl > *{--tl-rankw:36px; --tl-numw:56px; --tl-djw:156px; --tl-datew:86px}
  .tl .tl-c-date .tl-y{display:inline}
}
/* 컨테이너 쿼리가 없는 옛 브라우저: 휴대폰 모양 그대로 (제목은 한 줄) */

/* 재생 중인 줄 */
.tl .tl-body .tl-row.active{background:var(--tl-accent-soft); box-shadow:inset 3px 0 0 var(--tl-accent)}
/* 디깅 플레이어가 열린 줄 */
.tl .tl-body .tl-row.is-open{background:var(--tl-dig); border-top-color:var(--tl-dig-line)}
.tl .tl-body .tl-row.is-open.active{background:var(--tl-dig)}

/* ---------------- 디깅 모드 (줄 아래 펼쳐지는 플레이어) ---------------- */
.tl-dig{display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s cubic-bezier(.2,.7,.2,1); background:var(--tl-dig)}
.tl-dig.open{grid-template-rows:1fr}
.tl-dig > .tl-dig-in{min-height:0; overflow:hidden}
.tl-dig.active-row{box-shadow:inset 3px 0 0 var(--tl-accent)}
.tl-dig-box{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"play wave" "info info";
  align-items:center; gap:10px 14px; padding:4px var(--tl-padx) 16px calc(var(--tl-padx) + 6px);
}
.tl-dig-play{
  grid-area:play; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; background:var(--tl-accent); color:#fff; font-size:24px;
  box-shadow:0 6px 18px rgba(255,0,80,.28); transition:transform .15s, filter .15s; touch-action:manipulation;
}
.tl-dig-play:hover{filter:brightness(1.08)}
.tl-dig-play:active{transform:scale(.94)}
.tl-dig-play:focus-visible{outline:none; box-shadow:var(--tl-focus), 0 6px 18px rgba(255,0,80,.28)}
.tl-dig-play .tl-svg{font-size:24px}
.tl-dig-play.is-play .tl-svg{transform:translateX(1px)}
.tl-dig-play.is-loading{pointer-events:none}
.tl-dig-play.is-loading .tl-svg{display:none}
.tl-dig-play.is-loading::after{content:""; width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:tl-spin .8s linear infinite}
@keyframes tl-spin{to{transform:rotate(360deg)}}

.tl-wave{grid-area:wave; position:relative; height:72px; min-width:0; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; outline:none}
.tl-wave canvas{position:absolute; left:0; top:0; width:100%; height:100%; display:block}
.tl-wave-prog{position:absolute; left:0; top:0; bottom:0; width:0; overflow:hidden; will-change:width}
.tl-wave-prog canvas{width:auto}
.tl-wave-head{position:absolute; top:4px; bottom:14px; width:2px; margin-left:-1px; left:0; background:var(--tl-accent); border-radius:1px; opacity:0; transition:opacity .2s}
.tl-wave.is-cur .tl-wave-head{opacity:1}
.tl-wave-hover{position:absolute; top:0; bottom:12px; width:1px; left:0; background:var(--tl-text); opacity:0; pointer-events:none}
.tl-wave:hover .tl-wave-hover{opacity:.55}
.tl-wave-tip{
  position:absolute; top:-4px; left:0; transform:translate(-50%,-100%); padding:2px 7px; border-radius:6px; font-size:11.5px; font-weight:700;
  background:var(--tl-ink); color:var(--tl-ink-text); white-space:nowrap; opacity:0; pointer-events:none; font-variant-numeric:tabular-nums;
}
.tl-wave:hover .tl-wave-tip{opacity:1}
.tl-wave:focus-visible{box-shadow:var(--tl-focus); border-radius:6px}
.tl-wave-time{position:absolute; left:0; right:0; bottom:-2px; display:flex; justify-content:space-between; gap:10px; font-size:11.5px; font-weight:700; color:var(--tl-text-3); font-variant-numeric:tabular-nums; pointer-events:none}
.tl-wave-time .cur{color:var(--tl-accent-text)}
.tl-wave-time .g{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; opacity:.85}  /* 장르 (2026-11-06) */
.tl-wave-msg{position:absolute; inset:0 0 14px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--tl-text-3)}
.tl-wave.is-loading .tl-wave-msg::before{content:""; width:14px; height:14px; margin-right:8px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:tl-spin .8s linear infinite}

/* 오른쪽 칸: 두 묶음 — [BPM · KEY] / [사운드클라우드 아이콘 · 다운로드 아이콘]. 넓으면 묶음마다 세로 두 줄이라
   사운드클라우드 아이콘 밑에 다운로드 아이콘이 와요 (2026-11-06 '작업 02' 사용자 요청. 휴대폰은 다운로드 없음, tracklist.js) */
.tl-dig-info{grid-area:info; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0}
.tl-dig-col{display:flex; align-items:center; gap:6px 8px; min-width:0}
.tl-dig-col:empty{display:none}
.tl-chip{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border-radius:999px; font-size:12px; font-weight:600; background:var(--tl-chip); color:var(--tl-chip-text); border:1px solid var(--tl-chip-line); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box}
.tl-chip b{font-weight:800; color:var(--tl-text-3)}
a.tl-chip{text-decoration:none}
a.tl-chip:hover{border-color:var(--tl-text-3); color:var(--tl-text)}
.tl-chip .tl-svg{font-size:14px}
.tl-chip-down{color:var(--tl-accent-text); font-weight:700}
a.tl-chip-down:hover{color:var(--tl-on-accent); background:var(--tl-accent); border-color:var(--tl-accent)}
.tl-chip-ic{width:28px; padding:0; justify-content:center}
.tl-chip-ic .tl-svg{font-size:17px}
a.tl-chip-sc:hover{color:var(--tl-sc); border-color:var(--tl-sc)}
.tl-dig-login{display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--tl-text-2)}
.tl-dig-login a{display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:999px; background:var(--tl-ink); color:var(--tl-ink-text); font-weight:700; text-decoration:none}
.tl-dig-close{margin-left:auto}

@container tl (min-width:720px){
  .tl-dig-box{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"play wave info";
    padding:6px var(--tl-padx) 18px calc(var(--tl-padx) + var(--tl-rankw) + var(--tl-gap));
    gap:10px 18px;
  }
  /* 파형(80px)과 높이가 맞게 두 줄(28 + 6 + 28px)로, 묶음끼리는 나란히 */
  .tl-dig-info{flex-wrap:nowrap; align-items:center; gap:8px; max-width:300px}
  .tl-dig-col{flex-direction:column; align-items:flex-start; gap:6px}
  .tl-dig-info .tl-dig-login{flex-direction:column; align-items:flex-start; gap:6px}
  .tl-dig-close{margin-left:0}
  .tl-wave{height:80px}
}
@container tl (max-width:479px){
  .tl-dig-box{gap:8px 12px; padding:2px var(--tl-padx) 14px}
  .tl-dig-play{width:46px; height:46px}
  .tl-wave{height:62px}
}

/* 조성 색 (2026-11-06 '작업 02' 사용자 요청): 파형은 tracklist.js가 조성 색으로 그리고, 재생 단추·재생 위치 선·지금 시간도 같은 색 (--tl-kc) */
.tl-dig.has-key .tl-dig-play{background:var(--tl-kc); box-shadow:0 6px 18px rgba(0,0,0,.2)}
.tl-dig.has-key .tl-wave-head{background:var(--tl-kc)}
.tl-dig.has-key .tl-wave-time .cur{color:var(--tl-kc)}
.tl-chip-key{color:hsl(var(--kh),80%,70%); border-color:hsla(var(--kh),70%,55%,.45)}
.tl-chip-key b{color:inherit; opacity:.7}
[data-theme="light"] .tl-chip-key{color:hsl(var(--kh),70%,32%); border-color:hsla(var(--kh),60%,45%,.4)}
/* 곡 줄의 KEY 칩도 같은 조성 색 (inc/tracklist.lib.php가 --kh를 넣어요) */
.tl-l3 em.k[style],.tl-c-dj em.k[style]{color:hsl(var(--kh),80%,72%); background:hsla(var(--kh),70%,55%,.18)}
[data-theme="light"] .tl-l3 em.k[style],[data-theme="light"] .tl-c-dj em.k[style]{color:hsl(var(--kh),70%,32%); background:hsla(var(--kh),65%,48%,.13)}

/* 핫큐 1~8 깃발 (2026-11-06 '작업 02'): 파형 위 18px 줄에 숫자 + 구간 이름, 아래로 가는 선. 누르면 그 자리부터 재생 */
.tl-wave.has-cues{height:90px; --cue-line:41px}
.tl-wave.has-cues .tl-wave-head{top:20px}
.tl-wave.has-cues .tl-wave-hover{top:18px}
@container tl (min-width:720px){ .tl-wave.has-cues{height:98px; --cue-line:47px} }
@container tl (max-width:479px){ .tl-wave.has-cues{height:80px; --cue-line:34px} }
.tl-cues{position:absolute; left:0; right:0; top:0; height:0; z-index:3}
.tl-cue{
  position:absolute; top:0; display:inline-flex; align-items:center; gap:4px; height:16px; margin:0; padding:0 6px 0 4px;
  border:0; border-radius:0 5px 5px 0; background:hsl(var(--cue),72%,46%); color:#fff; font:inherit; font-size:10.5px; line-height:1;
  white-space:nowrap; cursor:pointer; touch-action:manipulation;
}
.tl-cue::before{content:""; position:absolute; left:0; top:16px; width:2px; height:var(--cue-line,41px); background:inherit; opacity:.5; pointer-events:none}
.tl-cue b{font-weight:900}
.tl-cue i{font-style:normal; font-weight:700; font-size:9.5px; letter-spacing:.3px; opacity:.92}
.tl-cue.tight i{display:none}
.tl-cue:hover,.tl-cue:focus-visible{filter:brightness(1.12); outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.55)}
[data-theme="light"] .tl-cue:hover,[data-theme="light"] .tl-cue:focus-visible{box-shadow:0 0 0 2px rgba(var(--lt-ink-rgb),.25)}

/* ---------------- ⋮ 메뉴 · 알림 ---------------- */
.tl-menu{
  position:fixed; z-index:10050; min-width:210px; max-width:calc(100vw - 24px); padding:6px; border-radius:14px;
  background:var(--tl-pop); border:1px solid var(--tl-pop-line); box-shadow:var(--tl-shadow);
  opacity:0; transform:translateY(-4px) scale(.98); transform-origin:top right; transition:opacity .14s, transform .14s;
}
.tl-menu.open{opacity:1; transform:none}
.tl-menu-head{padding:8px 10px 8px; font-size:12.5px; color:var(--tl-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; border-bottom:1px solid var(--tl-pop-line); margin-bottom:4px}
.tl-menu a,.tl-menu button{
  display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:0 12px; border:0; border-radius:10px; background:transparent;
  color:var(--tl-text); font-size:15px; font-weight:600; text-align:left; text-decoration:none; cursor:pointer;
}
.tl-menu a:hover,.tl-menu button:hover,.tl-menu a:focus-visible,.tl-menu button:focus-visible{background:var(--tl-ic-bg); outline:none}
.tl-menu .tl-svg{font-size:20px; color:var(--tl-text-3)}
.tl-menu [aria-pressed="true"] .tl-svg{color:var(--tl-accent-text)}
.tl-menu-sep{height:1px; margin:5px 8px; background:var(--tl-pop-line)}  /* 곡 줄 아이콘 묶음과 같은 순서로 나눠요 */
.tl-menu [data-deck="0"] .tl-svg{color:var(--tl-d1)}
.tl-menu [data-deck="1"] .tl-svg{color:var(--tl-d2)}

/* ---------------- HANDS 자리 (2026-11) ----------------
   본문 칸 맨 위, 검색창보다 위에 HANDS 자리를 둬요 (2026-11-06 사용자 요청: "최상단"). tracklist.js가 만들어 화면 위에 붙여 둬요(.tl-hd-top).
   바깥 틀(index.php)이 이 자리(.tl-hd-slot) 위에 HANDS를 띄우고 높이를 넣어요. 목록을 내려도 HANDS는 그대로라 흔들리지 않아요 */
.tl-hd-top.is-on{position:sticky; z-index:60; background:var(--bg,#000)}
.tl-hd-slot{height:0; transition:height .3s ease}
.tl-hd-top.is-on .tl-hd-slot{margin-bottom:14px}

.tl-toast{
  position:fixed; left:50%; bottom:22px; z-index:10060; display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px);
  padding:12px 16px; border-radius:12px; background:var(--tl-ink); color:var(--tl-ink-text); font-size:14px; font-weight:600;
  box-shadow:var(--tl-shadow); transform:translate(-50%,16px); opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
}
.tl-toast.show{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.tl-toast a{color:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .tl-dig,.tl-menu,.tl-toast,.tl-ic,.tl .tl-body .tl-row,.tl-hd-slot{transition:none}
  .tl-eq i{animation:none; transform:scaleY(.6)}
}

/* 옛 표 꾸밈(chart.css의 휴대폰 규칙 등)이 새 표에 끼어들지 않게 */
.tl .tl-c-main,.tl .tl-c-cover,.tl .tl-c-act{grid-area:auto}

/* ===================================================================
   화이트(크림) 모드 — 색만 바꿔요 (theme-light.css의 --lt-* 변수를 써요)
=================================================================== */
[data-theme="light"]{
  --tl-text:var(--lt-text);
  --tl-text-2:var(--lt-text-2);
  --tl-text-3:var(--lt-text-3);
  --tl-line:var(--lt-divider);
  --tl-head:var(--lt-text-3);
  --tl-hover:var(--lt-subtle);
  --tl-accent:var(--lt-accent);
  --tl-accent-text:var(--lt-accent-text);
  --tl-accent-soft:var(--lt-accent-soft);
  --tl-ic:var(--lt-text-3);
  --tl-ic-hover:var(--lt-text);
  --tl-ic-bg:rgba(var(--lt-ink-rgb),.07);
  --tl-chip:var(--lt-surface);
  --tl-chip-line:var(--lt-border-strong);
  --tl-chip-text:var(--lt-text-2);
  --tl-ink:var(--lt-ink);
  --tl-ink-text:#fff;
  --tl-dig:#f9f8f6;
  --tl-dig-line:var(--lt-divider);
  --tl-wave:#cbbfb0;
  --tl-wave-prog:var(--lt-accent);
  --tl-pop:var(--lt-surface);
  --tl-pop-line:var(--lt-border);
  --tl-shadow:var(--lt-shadow-lg);
  --tl-cover-bg:var(--lt-fill);
  --tl-focus:0 0 0 3px rgba(var(--lt-accent-rgb),.28);
  --tl-grp-bg:rgba(var(--lt-ink-rgb),.04);
  --tl-grp-line:rgba(var(--lt-ink-rgb),.1);
  --tl-d1:#0b6cbd;
  --tl-d2:#c42a50;
  --tl-sc:#e04e00;
  --tl-sel:rgba(11,108,189,.5);
  --tl-soft:rgba(var(--lt-ink-rgb),.06);
  --tl-seg-on:var(--lt-surface);
}
[data-theme="light"] .tl-date-btn{background:var(--lt-surface); border-color:var(--lt-border-strong); color:var(--lt-text-2)}
[data-theme="light"] .tl-date-btn:hover{background:var(--lt-fill-hover); color:var(--lt-text)}
[data-theme="light"] .tl-date.on .tl-date-btn{background:var(--lt-accent-soft); border-color:var(--lt-accent-line); color:var(--lt-accent-text)}
[data-theme="light"] .tl-dp-row input{color-scheme:light}
[data-theme="light"] .tl-datepop{border-color:var(--lt-border)}
[data-theme="light"] .tl-playall{background:var(--lt-accent)}
[data-theme="light"] .tl-playall:hover{background:var(--lt-accent-hover); filter:none}
[data-theme="light"] .tl-ic-pick[aria-pressed="true"] .tl-svg{filter:drop-shadow(0 0 4px rgba(var(--lt-accent-rgb),.45))}
[data-theme="light"] .tl-dig-play{box-shadow:0 6px 16px rgba(var(--lt-accent-rgb),.25)}
[data-theme="light"] .tl-cover img{outline:1px solid rgba(var(--lt-ink-rgb),.12); outline-offset:-1px; border-radius:6px}
/* 표는 theme-light.css의 흰 카드 그대로 두고, 줄 여백·선만 새 표에 맞춰요 */
[data-theme="light"] .tl .tl-head,
[data-theme="light"] .tl .tl-body .tl-row{padding-left:var(--tl-padx); padding-right:var(--tl-padx)}
[data-theme="light"] .tl .tl-head{background:var(--lt-subtle); border-bottom:1px solid var(--lt-border)}
[data-theme="light"] .tl .tl-body .tl-row{border-top-color:var(--lt-divider)}
[data-theme="light"] .tl .tl-body .tl-row:hover{background:var(--lt-subtle)}
[data-theme="light"] .tl .tl-body .tl-row.active,
[data-theme="light"] .tl .tl-body .tl-row.active:hover{background:var(--lt-accent-soft); box-shadow:inset 3px 0 0 var(--lt-accent)}
[data-theme="light"] .tl .tl-body .tl-row.is-open,
[data-theme="light"] .tl .tl-body .tl-row.is-open:hover{background:var(--tl-dig)}
[data-theme="light"] .tl .tl-row.active .tl-title{color:var(--lt-accent-text) !important}
[data-theme="light"] .tl .tl-c-rank{color:var(--lt-text-2)}
[data-theme="light"] .tl-menu{border-color:var(--lt-border)}

/* ===================================================================
   휴대폰 (720px 이하) — 2026-11 사용자가 고른 시안 B + C + D
   B(애플뮤직처럼): 큰 제목 · 전체 재생/섞어 재생 · 칸 나눔 기간 탭 · 순위 · 글자 아래만 줄
   C: 제목 오른쪽 달력(기간)·정렬 아이콘, 줄마다 DJ 정보(BPM · KEY · 길이)
   D: ⋯ · 정렬 · 기간은 아래에서 올라오는 판 (tracklist.js)
   표 폭(컨테이너)과 상관없이 화면이 좁으면 이 모양이라, 위 '폭별 칸' 규칙보다 뒤에 둬요
=================================================================== */
.tl-mtools,.tl-mplay{display:none}
.tl-l3{display:none; align-items:center; gap:5px; margin-top:5px; min-width:0; overflow:hidden; white-space:nowrap}
/* DJ 정보 칩: 올린 날(em.d)도 BPM · KEY · 길이와 같은 바탕·테두리 (2026-11-06 '작업 02' 사용자 요청) */
.tl-l3 em,.tl-c-dj em{flex:none; padding:4px 6px; border-radius:5px; background:var(--tl-soft); color:var(--tl-text-2); font-style:normal; font-size:11px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.tl-l3 em.k,.tl-c-dj em.k{color:var(--tl-accent-text)}
.tl-l3 em.d{color:var(--tl-text-3); font-weight:700}
@media (max-width:720px){
  /* 머리: 큰 제목 + 달력·정렬 아이콘, 그 아래 지금 고른 정렬·기간, 전체 재생 · 섞어 재생 */
  .tl-ttl-ic{display:none}
  .tl-pagehead{display:flex; align-items:center; flex-wrap:nowrap; gap:8px; margin-bottom:0}
  .tl-pagehead .va-title{flex:1 1 auto; min-width:0; font-size:27px; letter-spacing:-.5px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tl-mtools{display:flex; gap:8px; flex:none}
  .tl-mic{position:relative; width:38px; height:38px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--tl-soft); color:var(--tl-text-2); font-size:18px; cursor:pointer}
  .tl-mic[hidden]{display:none}
  .tl-mic.on{color:var(--tl-accent-text)}
  .tl-mic.on::after{content:""; position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--tl-accent)}
  /* 디깅 모드 아이콘 (2026-11-06 '작업 02'): 꺼지면 회색, 켜지면 DJ 장비 단추처럼 테두리와 작은 불(LED)에 불이 들어와요 */
  .tl-mic-mode{transition:color .2s, background-color .2s, box-shadow .2s}
  .tl-mic-mode .tl-led{position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.3; transition:opacity .2s, box-shadow .2s}
  .tl-mic-mode[aria-pressed="true"]{color:var(--tl-accent-text); background:var(--tl-accent-soft); box-shadow:inset 0 0 0 1.5px var(--tl-accent), 0 0 14px rgba(255,0,80,.45)}
  .tl-mic-mode[aria-pressed="true"] .tl-led{opacity:1; background:var(--tl-accent); box-shadow:0 0 6px 1px var(--tl-accent)}
  [data-theme="light"] .tl-mic-mode[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--lt-accent), 0 0 12px rgba(var(--lt-accent-rgb),.35)}
  .tl-mplay{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 10px}
  .tl-mplay button{height:44px; padding:0 8px; border:0; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-size:15px; font-weight:800; white-space:nowrap; cursor:pointer}
  .tl-mplay button .tl-svg{font-size:17px}
  .tl-mplay .tl-playall{background:var(--tl-accent); color:#fff}
  .tl-mplay .tl-shuffle{background:var(--tl-soft); color:var(--tl-accent-text)}
  .tl-mplay button:disabled{opacity:.6; cursor:progress}
  .tl-bar{display:none}   /* 곡 수 · 정렬 · 디깅 모드는 정렬 아이콘 판으로 */
  /* 기간 탭: 한 줄 칸 나눔 (레전드 연도처럼 많으면 옆으로 밀어요) */
  .tl-tabbar{margin:0 0 6px}
  .tl-tabbar .va-tab{gap:0; margin:0; padding:3px; max-width:none; border-radius:11px; background:var(--tl-soft)}
  .tl-tabbar .va-tab a{flex:1 0 auto; padding:0; border:0; border-radius:8px; background:transparent; color:var(--tl-text-2); font-size:13.5px; font-weight:700; box-shadow:none}
  .tl-tabbar .va-tab a div{padding:6px 12px}
  .tl-tabbar .va-tab a.on{background:var(--tl-seg-on); color:var(--tl-text); border:0; box-shadow:0 1px 4px rgba(0,0,0,.25)}
  /* 줄: 순위 · 표지 · 제목/아티스트/DJ 정보 · 장바구니 · ⋯ */
  .tl > *{--tl-rankw:20px; --tl-cover:48px}
  .tl .tl-head{display:none}
  .tl .tl-body .tl-row,
  [data-theme="light"] .tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) auto; column-gap:12px; padding:0 0 0 4px; border-top:0}
  .tl .tl-body .tl-row::after{content:""; position:absolute; left:calc(28px + var(--tl-rankw) + var(--tl-cover)); right:0; bottom:0; height:1px; background:var(--tl-line)}
  /* 폴드 바깥 화면 같은 아주 좁은 폭(표 299px 이하): 순위 칸을 숨기면(위 "폭별 칸") 칸 수도 3칸으로 줄여요.
     예전엔 바로 위 규칙이 4칸을 다시 넣어서 표지 · 제목이 한 칸씩 밀려 겹쳤어요 (2026-11-07 320px에서 찾음) */
  @container tl (max-width:299px){
    .tl .tl-body .tl-row,
    [data-theme="light"] .tl .tl-body .tl-row{grid-template-columns:var(--tl-cover) minmax(0,1fr) auto}
    .tl .tl-body .tl-row::after{left:calc(16px + var(--tl-cover))}
  }
  .tl .tl-c-rank{font-size:13px; color:var(--tl-text-3)}
  .tl .tl-c-main{padding:8px 0}
  .tl .tl-c-plays,.tl .tl-c-likes,.tl .tl-c-dj,.tl .tl-c-date{display:none}
  .tl-title{font-size:15px}
  .tl-l2 .tl-meta{display:none}
  .tl-l3,.tl .tl-l3{display:flex}
  .tl .tl-l3 em.d{display:block}   /* 휴대폰은 날짜 칸이 없어서 올린 날도 이 줄에 */
  .tl-cartm{display:none}
  .tl .tl-c-act{gap:0}
  .tl .tl-c-act > *,
  .tl .tl-c-act > .tl-grp-me,.tl .tl-c-act > .tl-grp-go,
  .tl.tl-decks .tl-c-act > .tl-grp-go{display:none}
  .tl .tl-c-act > .tl-ic-pick,.tl .tl-c-act > .tl-ic-more{display:inline-flex}
  .tl .tl-body .tl-row.active,
  [data-theme="light"] .tl .tl-body .tl-row.active,
  [data-theme="light"] .tl .tl-body .tl-row.active:hover{background:transparent; box-shadow:none}
}

/* ---------------- 아래에서 올라오는 판 (휴대폰: ⋯ 메뉴 · 정렬 · 기간, tracklist.js) ---------------- */
.tl-sheet-dim{position:fixed; inset:0; z-index:10055; background:rgba(0,0,0,.5); opacity:0; transition:opacity .2s}
.tl-sheet-dim.open{opacity:1}
.tl-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:10056; max-height:86vh; overflow-y:auto; overscroll-behavior:contain;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0;
  background:var(--tl-pop); color:var(--tl-text); box-shadow:0 -10px 30px rgba(0,0,0,.35); transform:translateY(100%); transition:transform .22s ease;
}
.tl-sheet.open{transform:none}
.tl-sheet-grab{width:38px; height:4px; margin:2px auto 12px; border-radius:2px; background:var(--tl-chip-line)}
.tl-sheet-h{margin:0 0 6px; font-size:16px; font-weight:800}
.tl-sheet-who{display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--tl-pop-line)}
.tl-sheet-who img{width:52px; height:52px; flex:none; border-radius:8px; object-fit:cover; background:var(--tl-cover-bg)}
.tl-sheet-who div{min-width:0}
.tl-sheet-who b{display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-sheet-who span{display:block; font-size:13px; color:var(--tl-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 묶음은 큰 단추 한 줄 (곡 줄 아이콘 묶음과 같은 순서) */
.tl-tiles{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; margin:12px 0}
.tl-tile{
  height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0 4px; border:0; border-radius:14px;
  background:var(--tl-soft); color:var(--tl-text-2); font-family:inherit; font-size:12.5px; font-weight:700; text-align:center; text-decoration:none; cursor:pointer;
}
.tl-tile .tl-svg{font-size:22px; color:var(--tl-text)}
.tl-tile[aria-pressed="true"] .tl-svg{color:var(--tl-accent)}
.tl-tile.sc .tl-svg{color:var(--tl-sc)}
.tl-tile[data-deck="0"] .tl-svg{color:var(--tl-d1)}
.tl-tile[data-deck="1"] .tl-svg{color:var(--tl-d2)}
.tl-sheet-list a,.tl-sheet-list button{
  display:flex; align-items:center; gap:12px; width:100%; height:48px; padding:0 4px; border:0; background:transparent;
  color:var(--tl-text); font-family:inherit; font-size:15px; font-weight:600; text-align:left; text-decoration:none; cursor:pointer;
}
.tl-sheet-list .tl-svg{font-size:21px; color:var(--tl-text-3)}
.tl-sheet-list [aria-pressed="true"] .tl-svg{color:var(--tl-accent-text)}
/* 정렬 · 보기 */
.tl-sheet-lab{margin:14px 0 6px; font-size:12.5px; font-weight:700; color:var(--tl-text-3)}
.tl-opt{
  display:flex; align-items:center; justify-content:space-between; width:100%; height:46px; padding:0 4px; border:0; border-bottom:1px solid var(--tl-pop-line);
  background:transparent; color:var(--tl-text); font-family:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer;
}
.tl-opt.on{color:var(--tl-accent-text)}
.tl-opt .tl-svg{font-size:18px}
.tl-seg2{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); padding:3px; border-radius:10px; background:var(--tl-soft)}
.tl-seg2 a{height:34px; display:grid; place-items:center; border-radius:8px; color:var(--tl-text-2); font-weight:700; text-decoration:none}
.tl-seg2 a.on{background:var(--tl-seg-on); color:var(--tl-text); box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tl-sheet-sw{position:relative; display:flex; align-items:center; justify-content:space-between; margin-top:16px; font-weight:600; cursor:pointer}
.tl-sheet-sw input{position:absolute; opacity:0; width:1px; height:1px}
.tl-sheet-sw i{position:relative; flex:none; width:44px; height:26px; border-radius:999px; background:var(--tl-chip-line); transition:background .2s}
.tl-sheet-sw i::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s}
.tl-sheet-sw input:checked + i{background:var(--tl-accent)}
.tl-sheet-sw input:checked + i::after{transform:translateX(18px)}
.tl-sheet-sw input:focus-visible + i{box-shadow:var(--tl-focus)}
/* 기간 판: 컴퓨터 작은 창(.tl-datepop)과 같은 내용 */
.tl-sheet .tl-dp-presets{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tl-sheet .tl-dp-presets button{height:42px; font-size:14px}
.tl-sheet .tl-dp-apply{height:46px; font-size:15px}
@media (prefers-reduced-motion:reduce){ .tl-sheet,.tl-sheet-dim{transition:none} }

/* ===================================================================
   실시간 (2026-11-06 '작업 02' 사용자 요청: 최신 트랙·최신 믹셋의 '실시간' 탭, inc/tracklist.lib.php edm_tl_rt_*)
=================================================================== */
/* 기간 탭 '실시간' 앞 빨간 점 (방송 중처럼) */
.tl-tabs a[href*="type=realtime"] div::before{content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#ff3b30; vertical-align:2px; box-shadow:0 0 0 3px rgba(255,59,48,.18)}
/* 'HH:MM 기준 · 매시간 새로 계산해요' */
.tl-rt-note{display:flex; align-items:center; gap:7px; margin:-4px 0 10px; font-size:12.5px; font-weight:600; color:var(--tl-text-3)}
.tl-rt-note i{flex:none; width:7px; height:7px; border-radius:50%; background:#ff3b30; animation:tl-live 1.6s ease-in-out infinite}
@keyframes tl-live{50%{opacity:.35}}
/* 순위 칸 아래 ▲▼ · – · NEW (바로 전 시간 순위와 비교) */
.tl-rk{display:block; margin-top:1px; font-size:9.5px; font-weight:800; line-height:1.15; letter-spacing:-.2px}
.tl-rk.up{color:#ff4d6a}
.tl-rk.down{color:#4d9bff}
.tl-rk.same{color:var(--tl-text-3); font-weight:600}
.tl-rk.new{color:#ffb020}
[data-theme="light"] .tl-rk.up{color:#d92f55}
[data-theme="light"] .tl-rk.down{color:#1f6fd1}
[data-theme="light"] .tl-rk.new{color:#b86e00}
/* 제목 옆 급상승 · 역주행 */
.tl-flag{flex:none; padding:1px 6px; border-radius:4px; font-size:10.5px; font-weight:800; line-height:1.5; color:#fff; white-space:nowrap}
.tl-flag.hot{background:linear-gradient(135deg,#ff3b30,#ff7a00)}
.tl-flag.back{background:linear-gradient(135deg,#7034d6,#3a8dff)}
@media (prefers-reduced-motion:reduce){ .tl-rt-note i{animation:none} }

/* ===================================================================
   PC 시안 A2 (2026-11-06 '작업 02', 사용자가 고르고 다듬은 모양 — tools/mockups/pc-list-w2a.html)
   - 머리 한 줄(.tl-top, edm_tl_top_open): 제목 · 기간 탭 ……… 곡 수 · 날짜 고르기 · 정렬. 컴퓨터에서는 전체 재생 단추가 없어요
   - 곡 줄(표 860px 이상): 머리줄(곡/아티스트·BPM … 이름 줄) 없이 칩 6개를 정해진 칸에 —
     [130 BPM][Gm][3:24] (따뜻한 회색) · [▶ 22.2K][♥ 1.1K][26.11.05] (다른 테두리·글자색). 칸 폭이 정해져 있어서 줄마다 세로로 딱 맞아요
   - 아이콘(아티스트 · 좋아요 · 보관함)은 마우스를 올린 줄에만 보여요 (담은 곡·좋아요한 곡·재생 중인 줄은 늘). 손가락 기기는 늘 보여요
   - 휴대폰: 올린 날 칩만 숫자 칩 색 테두리 (사용자 요청)
=================================================================== */
.tl{--tl-cd:#1c1c1f; --tl-cd-line:#2c2c31; --tl-cp:#181c23; --tl-cp-line:#2b3441; --tl-cp-text:#b7c5da}
[data-theme="light"] .tl{--tl-cd:#f5f3ef; --tl-cd-line:#e3dfd8; --tl-cp:#f1f5fa; --tl-cp-line:#d3dce8; --tl-cp-text:#3a4a5e}
.tl-top{--tl-cd:#1c1c1f; --tl-cd-line:#2c2c31}
[data-theme="light"] .tl-top{--tl-cd:#f5f3ef; --tl-cd-line:#e3dfd8}
/* 휴대폰 DJ 정보 줄: 빈 칩은 숨기고, 올린 날은 숫자 칩 색 테두리 */
.tl-l3 em.none{display:none}
.tl-l3 em.d{background:var(--tl-cp); box-shadow:inset 0 0 0 1px var(--tl-cp-line); color:var(--tl-cp-text); font-weight:700}
/* 올린 날 26.11.05는 길이가 늘 같아서 날짜 칸을 그 폭으로 */
.tl > *,.tl.tl-has-old > *{--tl-datew:64px}

@media (min-width:721px){
  .tl-top{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 16px}
  .tl-top > *{order:20}
  .tl-top .tl-pagehead{order:1; flex:none; margin:0 14px 0 0; padding:0; min-height:0; border:0}
  .tl-top .tl-pagehead .va-title{margin:0; font-size:24px; font-weight:850; letter-spacing:-.6px; line-height:40px}
  .tl-top .tl-ttl-ic,.tl-top .tl-pagehead-r{display:none}
  .tl-top .tl-tabbar{display:contents}
  .tl-top .tl-tabs{order:2}
  /* 도구(곡 수 · 장르 · 정렬)는 한 묶음(.tl-bar)이라 모자라면 다 같이 아래 줄로 내려가요 (2026-11-07)
     날짜 고르기는 기간 탭 바로 오른쪽(탭 줄의 tl-date-tabs), 정렬은 묶음 맨 앞이에요. 곡 수 · 디깅 모드는 오른쪽 끝에 그대로라서
     실시간 → 주간 → 월간을 오가도 오른쪽 단추가 밀리지 않아요 (2026-11-08 사용자: "이번주 선택하는건 왼쪽에 … 다른 곳도 수정해") */
  .tl-top .tl-playall,.tl-top .tl-mplay{display:none !important}
  .tl-top .tl-date.tl-date-tabs{display:flex; order:3}
  .tl-top .tl-bar{order:4; flex:0 1 auto; flex-wrap:nowrap; justify-content:flex-end; gap:10px; min-width:0; margin:0 0 0 auto}
  .tl-top .tl-bar-l,.tl-top .tl-bar-r{flex-wrap:nowrap; gap:10px}
  .tl-top:not(.tl-2row) .tl-bar-r{order:-1}
  .tl-top .tl-date.tl-date-bar{display:none}
  .tl-sort.tl-sort-ph{visibility:hidden; pointer-events:none}   /* 실시간의 빈 정렬 자리 (edm_tl_toolbar) */
  .tl-top .tl-rt-note{order:9; flex-basis:100%; margin:0}
  /* 두 줄일 때(tl-2row: edm_tl_top_close()와 tracklist.js가 붙여요): 도구 줄이 한 줄을 다 써요. 곡 수 · 디깅 모드는 왼쪽, 장르 · 정렬은 오른쪽 */
  .tl-top.tl-2row .tl-bar{flex:1 1 auto; justify-content:space-between; flex-wrap:wrap; row-gap:10px; margin-left:0}   /* 날짜 고르기가 줄 첫 칸이면 그 옆 남은 칸을 채워요 (레전드 믹셋, 2026-11-08) */
  .tl-top.tl-2row .tl-bar-r{margin-left:auto}
  /* '이전 연도' 고르기: 탭과 같은 모양 (레전드 연도 탭, 2026-11-07). 휴대폰은 탭을 다 보여서 고르기는 숨겨요 */
  .tl-top .va-tab.tl-tabs a.tl-tab-more{display:none}
  .tl-top .tl-tab-sel{display:inline-flex; position:relative; align-items:center; flex:none}
  .tl-top .tl-tab-sel .tl-sort-sel{height:30px; padding:0 30px 0 14px; border:0; border-radius:8px; background:transparent; box-shadow:none; color:var(--tl-text-2); font-family:inherit; font-size:13.5px; font-weight:700}
  .tl-top .tl-tab-sel .tl-sort-sel:hover{color:var(--tl-text)}
  .tl-top .tl-tab-sel .tl-sort-sel option{background:var(--tl-pop); color:var(--tl-text)}
  .tl-top .tl-tab-sel .tl-svg{right:10px; font-size:14px}
  .tl-top .tl-tab-sel.on .tl-sort-sel{background:var(--tl-pop); color:var(--tl-text); box-shadow:0 1px 3px rgba(0,0,0,.14)}
  [data-theme="light"] .tl-top .tl-tab-sel.on .tl-sort-sel{background:#fff}
  /* 기간 탭: 회색 칸 나눔 안에서 고른 칸만 흰 바탕 */
  .tl-top .va-tab.tl-tabs{flex:0 1 auto; min-width:0; display:flex; gap:4px; margin:0; padding:4px; border-radius:12px; background:var(--tl-cd) !important; border:1px solid var(--tl-cd-line) !important; box-shadow:none !important}
  .tl-top .va-tab.tl-tabs a{flex:none; margin:0; border:0 !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important; color:var(--tl-text-2) !important}
  .tl-top .va-tab.tl-tabs a div{padding:0 14px !important; height:30px; display:flex; align-items:center; font-size:13.5px; font-weight:700}
  .tl-top .va-tab.tl-tabs a.on{background:var(--tl-pop) !important; color:var(--tl-text) !important; box-shadow:0 1px 3px rgba(0,0,0,.14) !important}
  [data-theme="light"] .tl-top .va-tab.tl-tabs a.on{background:#fff !important}
  /* 곡 수 · 날짜 · 정렬: 높이 40px로 같게 */
  .tl-top .tl-per{padding:4px; gap:2px; border-radius:12px; background:var(--tl-cd); border:1px solid var(--tl-cd-line)}
  .tl-top .tl-per a{min-width:40px; height:30px; border-radius:8px}
  .tl-top .tl-date-btn{height:40px; border-radius:12px}
  .tl-top .tl-date-step{height:40px}
  .tl-top .tl-sort-sel{height:40px; border-radius:12px}
}

/* 넓은 컴퓨터 표(A2). 2026-11-07 사용자 요청('이런 창 크기에서는 예전 모양으로 돌아가요'): 860px → 표 폭 640px부터 같은 모양.
   칸 너비는 맨 아래 '폭별 A2 칸'에서 정해요 */
@media (min-width:721px){ @container tl (min-width:640px){
  .tl .tl-head{display:none}
  .tl .tl-body .tl-row{min-height:64px; padding-top:8px; padding-bottom:8px}
  .tl .tl-c-dj{display:contents}
  .tl .tl-c-dj em,.tl .tl-c-plays,.tl .tl-c-likes,.tl .tl-c-date{
    display:flex; align-items:center; justify-content:center; gap:5px; height:26px; padding:0 6px; border-radius:7px; box-sizing:border-box;
    font-size:12px; font-weight:700; font-style:normal; line-height:1; white-space:nowrap; overflow:hidden; text-align:center; font-variant-numeric:tabular-nums
  }
  .tl .tl-c-dj em,.tl .tl-c-dj em.k[style]{background:var(--tl-cd); border:1px solid var(--tl-cd-line); color:var(--tl-text-2)}
  .tl .tl-c-dj em.none{visibility:hidden}
  .tl .tl-c-dj em.b{margin-left:8px}
  .tl .tl-c-dj em.k[style]::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:hsl(var(--kh),62%,50%)}
  .tl .tl-c-plays,.tl .tl-c-likes,.tl .tl-c-date{background:var(--tl-cp); border:1px solid var(--tl-cp-line); color:var(--tl-cp-text)}
  .tl .tl-c-plays{margin-left:12px}
  .tl .tl-c-plays::before,.tl .tl-c-likes::before{content:""; flex:none; width:9px; height:9px; background:currentColor; opacity:.7}
  .tl .tl-c-plays::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.7v12.6c0 .8.9 1.3 1.6.9l9.9-6.3c.6-.4.6-1.4 0-1.8L9.6 4.8C8.9 4.4 8 4.9 8 5.7z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.7v12.6c0 .8.9 1.3 1.6.9l9.9-6.3c.6-.4.6-1.4 0-1.8L9.6 4.8C8.9 4.4 8 4.9 8 5.7z'/%3E%3C/svg%3E") center/contain no-repeat}
  .tl .tl-c-likes::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19.8s-7.3-4.4-9-8.9C1.8 7.8 3.8 4.7 7 4.7c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.2 0 5.2 3.1 4 6.2-1.7 4.5-9 8.9-9 8.9z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19.8s-7.3-4.4-9-8.9C1.8 7.8 3.8 4.7 7 4.7c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.2 0 5.2 3.1 4 6.2-1.7 4.5-9 8.9-9 8.9z'/%3E%3C/svg%3E") center/contain no-repeat}
  .tl .tl-c-date time{display:block}
}}
/* 아이콘은 마우스를 올린 줄에만 (마우스 기기, 넓은 표) */
@media (hover:hover) and (pointer:fine){
  @container tl (min-width:860px){
    .tl .tl-c-act .tl-ic{opacity:0; transition:opacity .12s}
    .tl .tl-body .tl-row:hover .tl-ic,.tl .tl-body .tl-row:focus-within .tl-ic,.tl .tl-body .tl-row.active .tl-ic,.tl .tl-body .tl-row.is-open .tl-ic,
    .tl .tl-c-act .tl-ic[aria-pressed="true"]{opacity:1}
  }
}
/* 휴대폰: 올린 날이 26.11.05로 길어져서 DJ 정보 칩을 조금 작게 (한 줄 안에 다 들어가게) */
@media (max-width:720px){
  .tl .tl-l3{gap:4px}
  .tl .tl-l3 em{padding:3px 5px; font-size:10.5px}
}

/* ===================================================================
   2026-11-07 사용자 요청 (작업 02 추가 1~8, docs/todo-work02.md)
=================================================================== */
/* 02 순위 변동: 숫자 아래 알약. 오름은 분홍~주황, 10계단 넘게 오르면 빛이 지나가고, NEW는 고리가 퍼져요 */
.tl-rk{display:flex; align-items:center; justify-content:center; width:max-content; min-width:24px; height:15px; margin:3px auto 0; padding:0 4px; border-radius:8px; font-size:9.5px; font-weight:900; line-height:1; letter-spacing:-.2px}
.tl-rk.up{color:#fff; background:linear-gradient(135deg,#ff3b5c,#ff7a45); box-shadow:0 2px 6px rgba(255,59,92,.35)}
.tl-rk.up.big{background:linear-gradient(110deg,#ff3b5c 0%,#ff7a45 40%,#ffd36b 50%,#ff7a45 60%,#ff3b5c 100%); background-size:220% 100%; animation:tl-shine 2.2s linear infinite}
.tl-rk.down{color:#4d9bff; background:rgba(77,155,255,.14)}
.tl-rk.same{color:var(--tl-text-3)}
.tl-rk.new{color:#fff; background:linear-gradient(135deg,#ffb020,#ff7a00); animation:tl-new 1.8s ease-out infinite}
[data-theme="light"] .tl-rk.down{color:#1f6fd1; background:rgba(31,111,209,.1)}
@keyframes tl-shine{to{background-position:-220% 0}}
@keyframes tl-new{0%{box-shadow:0 0 0 0 rgba(255,150,30,.55)}70%,100%{box-shadow:0 0 0 6px rgba(255,150,30,0)}}
@media (prefers-reduced-motion:reduce){ .tl-rk.new,.tl-rk.up.big{animation:none} }

/* 04·05 넓은 컴퓨터 화면: 아이콘 칸을 없애요. 보관함 단추만 제목 줄 끝(BPM 왼쪽)에 늘 보이고, 좋아요는 좋아요 숫자 칩을 눌러요 (♥ 분홍, 누르면 채워져요).
   아티스트 페이지는 줄 아래 디깅 플레이어와 ⋮(좁은 화면)에 있어요 */
@media (min-width:721px){ @container tl (min-width:640px){
  .tl .tl-c-act{display:none !important}
  .tl .tl-l1 .tl-cartm{display:inline-flex; flex:none; margin-left:auto; width:34px; height:34px}
  .tl .tl-c-likes{cursor:pointer; transition:border-color .15s, background-color .15s, color .15s}
  .tl .tl-c-likes::before{background:var(--tl-accent); opacity:.6}
  .tl .tl-c-likes:hover{border-color:var(--tl-accent)}
  .tl .tl-c-likes:focus-visible{outline:none; box-shadow:var(--tl-focus)}
  .tl .tl-c-likes.is-liked{color:var(--tl-accent-text); border-color:var(--tl-accent); background:var(--tl-accent-soft)}
  .tl .tl-c-likes.is-liked::before{opacity:1}
}}

/* 06 핫큐 깃발이 있으면 마우스 위치 시간은 아래쪽에 (위쪽 깃발 숫자와 겹치지 않게) */
.tl-wave.has-cues .tl-wave-tip{top:auto; bottom:4px; transform:translate(-50%,0)}
/* 08 값이 없는 칩은 보이지 않는 빈 칸으로 자리만 지켜요 */
.tl-chip-none{visibility:hidden}

/* 폭별 A2 칸 (2026-11-07). 보이는 칸 수와 grid 칸 수가 꼭 같아야 해요
   표 640~899px: 순위 · 커버 · 제목 · BPM · KEY · 재생 · 좋아요 · 날짜 (길이 칩은 빼요 — 디깅 플레이어에 있어요)
   900px 이상: + 길이 */
@media (min-width:721px){
  @container tl (min-width:640px){
    .tl > *{--tl-gap:6px; --tl-padx:10px; --tl-rankw:30px; --tl-cover:42px}
    .tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 72px 50px 74px 62px 68px}
    .tl .tl-c-dj em.t{display:none}
    .tl .tl-c-dj em.b{margin-left:6px}
    .tl .tl-c-plays{margin-left:8px}
    .tl-meta,.tl .tl-l3{display:none}
    .tl-title{font-size:15px}
  }
  @container tl (min-width:900px){
    .tl > *{--tl-gap:8px; --tl-padx:16px; --tl-rankw:36px; --tl-cover:44px}
    .tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 76px 52px 52px 76px 64px 72px}
    .tl .tl-c-dj em.t{display:flex}
    .tl .tl-c-dj em.b{margin-left:8px}
    .tl .tl-c-plays{margin-left:12px}
    .tl-title{font-size:15.5px}
  }
}

/* ===================================================================
   2026-11-07 사용자 요청 (좁은 창 2차): 제목은 맨 윗줄로 · 보관함 아이콘 자리 · 제목/아티스트 간격 · 재생 수 크기별 색
=================================================================== */
/* 제목: 컴퓨터는 맨 윗줄(검색 줄) 왼쪽 (edm_tl_top_close()·tracklist.js가 옮겨요). 검색·HANDS·언어·모드는 오른쪽 (head.php) */
@media (min-width:721px){
  .va-topbar > .tl-pagehead{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:0; margin:0; padding:0; border:0}
  .va-topbar > .tl-pagehead .va-title{min-width:0; margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:24px; font-weight:850; letter-spacing:-.6px; line-height:40px}
  .va-topbar > .tl-pagehead .tl-ttl-ic,.va-topbar > .tl-pagehead .tl-pagehead-r{display:none}
}
/* 보관함 아이콘: 제목 칸 오른쪽 끝, 줄 가운데(칩들과 같은 높이). 제목 줄 안에 있으면 그 줄이 34px로 커져서 제목과 아티스트 사이가 벌어졌어요 */
@media (min-width:721px){ @container tl (min-width:640px){
  .tl .tl-c-main{position:relative; padding-right:40px}
  .tl .tl-l1 .tl-cartm{position:absolute; top:50%; right:2px; width:34px; height:34px; margin:-17px 0 0}
  .tl-title{line-height:1.3}
  .tl-l2{margin-top:3px; line-height:1.3}
}}
/* 재생 수 칩: 10만 · 50만 · 100만 · 500만부터 색이 달라요 (tl-pl1~4, tracklist.lib.php). 파랑 → 보라 → 주황 → 분홍(500만은 꽉 찬 칩) */
@media (min-width:721px){ @container tl (min-width:640px){
  .tl .tl-c-plays.tl-pl1{color:#5aa9ff; background:rgba(90,169,255,.1); border-color:rgba(90,169,255,.36)}
  .tl .tl-c-plays.tl-pl2{color:#b591ff; background:rgba(181,145,255,.1); border-color:rgba(181,145,255,.38)}
  .tl .tl-c-plays.tl-pl3{color:#ffa057; background:rgba(255,160,87,.1); border-color:rgba(255,160,87,.4)}
  .tl .tl-c-plays.tl-pl4{color:#fff; background:linear-gradient(135deg,#e0244e,#b5179e); border-color:transparent; box-shadow:0 2px 8px rgba(224,36,78,.3)}
  .tl .tl-c-plays.tl-pl4::before{opacity:1}
  [data-theme="light"] .tl .tl-c-plays.tl-pl1{color:#1f6fd1; background:rgba(31,111,209,.07); border-color:rgba(31,111,209,.3)}
  [data-theme="light"] .tl .tl-c-plays.tl-pl2{color:#7a3fd1; background:rgba(122,63,209,.07); border-color:rgba(122,63,209,.3)}
  [data-theme="light"] .tl .tl-c-plays.tl-pl3{color:#c2410c; background:rgba(234,88,12,.08); border-color:rgba(234,88,12,.34)}
  [data-theme="light"] .tl .tl-c-plays.tl-pl4{color:#fff; background:linear-gradient(135deg,#e0244e,#b5179e); border-color:transparent}
}}

/* 월간의 달 고르기 (2026-11-07 사용자 요청: 최신 트랙·최신 믹셋 월간은 1월~10월도). 탭 아래 한 줄, 넘치면 옆으로 밀어서 봐요 */
.tl-months{display:flex; gap:6px; margin:0 0 10px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tl-months::-webkit-scrollbar{display:none}
.tl-months a{flex:none; display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--tl-chip-line); background:var(--tl-chip); color:var(--tl-text-2); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap}
.tl-months a:hover{color:var(--tl-text)}
.tl-months a.on{background:var(--tl-ink); border-color:var(--tl-ink); color:var(--tl-ink-text)}
@media (min-width:721px){
  .tl-top .tl-months{order:6; flex:1 0 100%; margin:0}
}

/* 레전드 연도: 눈금 한 줄 (2026-11-07 사용자가 시안 C를 골랐어요, tools/mockups/year-tabs.html · edm_tl_year_tabs)
   연도 글자 알약 + 아래 점, 점은 가로줄 하나에 꿰여 있어요. 밀지 않아도 한 줄에 다 보여요(휴대폰은 '26처럼 짧게) */
.tl-yline{position:relative; flex:1 1 auto; min-width:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin:0; padding:2px 0 0}
.tl-yline::before{content:""; position:absolute; left:calc(50% / var(--tl-yn, 7)); right:calc(50% / var(--tl-yn, 7)); top:42px; height:2px; border-radius:1px; background:var(--tl-chip-line)}
.tl-yline a{position:relative; min-width:0; display:grid; justify-items:center; gap:8px; padding:0 0 2px; color:var(--tl-text-3); text-decoration:none; -webkit-tap-highlight-color:transparent}
.tl-yline .tl-y{height:28px; min-width:44px; max-width:100%; padding:0 8px; border-radius:14px; display:grid; place-items:center; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; transition:background-color .15s, color .15s, box-shadow .15s}
.tl-yline .tl-yd{position:relative; z-index:1; box-sizing:border-box; width:10px; height:10px; border-radius:50%; background:var(--tl-pop); border:2px solid var(--tl-chip-line); transition:background-color .15s, border-color .15s, box-shadow .15s}
.tl-yline a:hover:not(.on){color:var(--tl-text)}
.tl-yline a:hover:not(.on) .tl-yd{border-color:var(--tl-text-3)}
.tl-yline a:focus-visible{outline:none}
.tl-yline a:focus-visible .tl-y{outline:2px solid var(--tl-accent); outline-offset:2px}
.tl-yline a.on{color:#fff}
.tl-yline a.on .tl-y{background:var(--tl-accent); box-shadow:0 4px 12px var(--tl-accent-soft)}
.tl-yline a.on .tl-yd{background:var(--tl-accent); border-color:var(--tl-accent); box-shadow:0 0 0 4px var(--tl-accent-soft)}
.tl-yline .tl-y-s{display:none}
/* '~' 탭 안의 한 해씩 고르기: 테두리만 있는 작은 알약, 고른 칸은 분홍 글자 (시안 그대로) */
.tl-months.tl-years-old{margin:-2px 0 12px}
.tl-years-old a{background:transparent; color:var(--tl-text-3); font-size:12.5px}
.tl-years-old a.on{background:var(--tl-accent-soft); border-color:var(--tl-accent); color:var(--tl-accent-text)}
@media (max-width:720px){
  .tl-tabbar.tl-yearbar{margin:2px 0 10px}
  .tl-yline .tl-y-l{display:none}
  .tl-yline .tl-y-s{display:inline}
  .tl-yline .tl-y{min-width:0; padding:0 9px}   /* 좁은 휴대폰(320px)에서도 7칸이 칸 안에 들어가게 */
}
@media (max-width:359px){
  .tl-yline .tl-y{padding:0 6px; font-size:12.5px}
}
@media (min-width:721px){
  .tl-top .tl-yline{order:2; flex:1 0 100%}
  .tl-yline .tl-y{min-width:64px; font-size:14.5px}
  .tl-top .tl-years-old{order:3}   /* 연도 줄 바로 아래 (도구 줄보다 위) */
}

/* 장르 고르기 (2026-11-07 사용자 요청 19·21, 같은 날 다시: "아이콘이 안 어울려, 기타 때문에 칸이 안 맞아 한 줄에 다 맞춰라")
   여러 개 골라요. 칸을 누르면 바로 그 장르를 더하거나 빼요 (edm_tl_genre_bar). 그림은 장르의 리듬 · 소리 모양(edm_tl_genre_svg), 색은 --gh · --gs
   휴대폰은 옆으로 미는 칩 줄, 컴퓨터는 칸이 몇 개든 늘 한 줄(같은 폭으로 나눠요. 아주 좁으면 옆으로 밀어요) */
.tl-genres{display:flex; gap:8px; margin:0 0 10px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tl-genres::-webkit-scrollbar{display:none}
.tl-g{--gc:hsl(var(--gh,330),var(--gs,70%),62%); position:relative; flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px; border-radius:12px;
  border:1px solid var(--tl-chip-line); background:var(--tl-chip); color:var(--tl-text-2); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:border-color .15s, background-color .15s, color .15s, box-shadow .15s}
.tl-g-ic{flex:none; width:17px; height:17px; color:var(--gc); fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.tl-g-ic .f{fill:currentColor; stroke:none}
.tl-g:hover{color:var(--tl-text); border-color:var(--gc)}
.tl-g.on{color:var(--tl-text); border-color:var(--gc); box-shadow:inset 0 0 0 1px var(--gc);
  background:linear-gradient(160deg,hsla(var(--gh,330),var(--gs,70%),55%,.26),hsla(var(--gh,330),var(--gs,70%),55%,.07))}
.tl-g-x{font-size:11px; color:var(--gc)}
[data-theme="light"] .tl-g{--gc:hsl(var(--gh,330),var(--gs,70%),42%)}
@media (min-width:721px){
  .tl-top .tl-genres{order:7; flex:1 0 100%; display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; margin:0; overflow:visible}
  .tl-top .tl-g{flex-direction:column; justify-content:center; gap:6px; height:auto; min-height:66px; min-width:0; padding:8px 3px 7px; border-radius:12px; font-size:11.5px; line-height:1.15;
    text-align:center; white-space:normal; word-break:keep-all}
  .tl-top .tl-g span{max-width:100%}
  .tl-top .tl-g-ic{width:24px; height:24px; stroke-width:1.7}
  .tl-top .tl-g-x{position:absolute; top:4px; right:6px; font-size:10px}
}
/* 좁은 컴퓨터 창: 칸이 줄어도 한 줄 그대로, 글자만 작게 (두 줄 이름은 칸 높이가 늘어요) */
@media (min-width:721px) and (max-width:1279px){
  .tl-top .tl-genres{gap:4px}
  .tl-top .tl-g{min-height:62px; gap:5px; padding:7px 1px 6px; font-size:10px; letter-spacing:-.2px}
  .tl-top .tl-g-ic{width:20px; height:20px}
}
@media (min-width:721px) and (max-width:900px){
  .tl-top .tl-g{font-size:9.5px}
}

/* NEW (2026-11-07 사용자 요청: 노란 반짝이가 촌스러워요) → 사이트 분홍 알약, 반짝임 없이. 주간 NEW 줄은 숫자 대신 NEW만 */
.tl-rk.new{color:#fff; background:var(--tl-accent); box-shadow:none; animation:none; letter-spacing:.4px}
.tl .tl-c-rank.is-new{display:flex; align-items:center; justify-content:center}
.tl .tl-c-rank.is-new .tl-rk.new{margin:0; height:18px; min-width:32px; padding:0 5px; font-size:9.5px}

/* 디깅 모드 단추 — 컴퓨터 (2026-11-07 사용자 요청 3: 휴대폰과 똑같이). 휴대폰은 제목 옆 둥근 아이콘(.tl-mic-mode)이에요
   꺼지면 회색, 켜지면 DJ 장비 단추처럼 테두리와 작은 불(LED)에 불이 들어와요 */
.tl-pcmode{display:none}
@media (min-width:721px){
  .tl-pcmode{position:relative; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px 0 11px; border-radius:8px; cursor:pointer; flex:none;
    border:1px solid var(--tl-chip-line); background:var(--tl-chip); color:var(--tl-text-2); font-family:inherit; font-weight:700; font-size:13.5px; white-space:nowrap;
    transition:color .2s, background-color .2s, box-shadow .2s, border-color .2s}
  .tl-pcmode .tl-svg{font-size:17px}
  .tl-pcmode:hover{color:var(--tl-text)}
  .tl-pcmode .tl-led{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.3; transition:opacity .2s, box-shadow .2s}
  .tl-pcmode[aria-pressed="true"]{color:var(--tl-accent-text); background:var(--tl-accent-soft); border-color:var(--tl-accent); box-shadow:0 0 14px rgba(255,0,80,.35)}
  .tl-pcmode[aria-pressed="true"] .tl-led{opacity:1; background:var(--tl-accent); box-shadow:0 0 6px 1px var(--tl-accent)}
  [data-theme="light"] .tl-pcmode[aria-pressed="true"]{box-shadow:0 0 12px rgba(var(--lt-accent-rgb),.3)}
}

/* NEW는 글자만 (2026-11-07 사용자 요청: 휴대폰에서 빨간 알약에 글씨가 안 보이고, 바탕 · 테두리를 칠하니 유치해요) — 바탕 · 테두리 · 반짝임 없이 사이트 분홍 글자 */
.tl-rk.new,.tl .tl-c-rank.is-new .tl-rk.new{color:var(--tl-accent-text); background:none; box-shadow:none; animation:none; border:0; border-radius:0; padding:0; min-width:0; height:auto; font-size:11px; font-weight:900; letter-spacing:.6px}
@media (max-width:720px){ .tl-rk.new,.tl .tl-c-rank.is-new .tl-rk.new{font-size:10.5px; letter-spacing:.4px} }

/* 급상승 (2026-11-08 사용자 요청: 한 시간 사이 30계단 넘게 오른 곡) — 순위 알약 앞 불꽃 · 제목 옆 '급상승' 표 (edm_tl_rt_move · edm_tl_fire_svg) */
.tl-fire{width:1em; height:1em; flex:none; vertical-align:-.12em}
.tl-rk.surge{gap:1px; padding:0 5px 0 3px}
.tl-rk.surge .tl-fire{width:9px; height:9px; color:#ffe27a}
.tl-flag.hot{display:inline-flex; align-items:center; gap:2px}
.tl-flag.hot .tl-fire{width:10px; height:10px; color:#fff3b0}

/* 디깅 플레이어 소리 크기 (2026-11-08 사용자: "트랙제목플레이어에서 소리볼륨조절 기능도 필요해") — 컴퓨터 표(720px 이상)만.
   파형 높이(80px)에 맞춘 세로 밀대 + 소리 단추(누르면 끄기 · 켜기), 하단 플레이어 밀대와 같은 값이에요 (tracklist.js bindVol) */
.tl-dig-vol{display:none}
@container tl (min-width:720px){
  .tl-dig-info{max-width:340px}
  .tl-dig-vol{display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:2px; flex:none; height:80px; margin-left:2px}
  .tl-vol{writing-mode:vertical-lr; direction:rtl; width:22px; height:54px; margin:0; padding:0; accent-color:var(--tl-accent); cursor:pointer; background:transparent}
  .tl-vol-mute{display:grid; place-items:center; width:26px; height:22px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--tl-text-3); cursor:pointer}
  .tl-vol-mute:hover{color:var(--tl-text); background:var(--tl-ic-bg)}
  .tl-vol-mute svg{width:18px; height:18px}
  .tl-dig-vol .x{display:none}
  .tl-dig-vol.is-low .w2{display:none}
  .tl-dig-vol.is-mute .w1,.tl-dig-vol.is-mute .w2{display:none}
  .tl-dig-vol.is-mute .x{display:inline}
  .tl-dig-vol.is-mute .tl-vol-mute{color:var(--tl-accent-text)}
}

/* 장르 고르기 A (2026-11-08 사용자: "하우스를 누르고 덥스텝만 볼려고 … 헷갈리지 않게", 시안 tools/mockups/genre-pick.html):
   칸 = 그 장르만, ＋ = 더하기, ✕ = 빼기 (inc/tracklist.lib.php edm_tl_genre_bar). 칸 색(--gh · --gs)은 감싼 칸(.tl-gw)에 있어요 */
.tl-gw{--gc:hsl(var(--gh,330),var(--gs,70%),62%); position:relative; display:flex; flex:none; min-width:0}
[data-theme="light"] .tl-gw{--gc:hsl(var(--gh,330),var(--gs,70%),42%)}
.tl-gw > .tl-g{flex:1 1 auto; min-width:0}
.tl-g-b{position:absolute; top:-7px; right:-7px; z-index:2; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900; line-height:1; font-style:normal; text-decoration:none; box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tl-g-ok,.tl-g-rm{background:var(--gc); color:#fff}
.tl-g-rm:hover{filter:brightness(1.15)}
.tl-g-add{background:var(--tl-chip); border:1px solid var(--tl-chip-line); color:var(--tl-text-2); opacity:0; transform:scale(.8); transition:opacity .15s, transform .15s, background-color .15s, color .15s}
.tl-gw:hover .tl-g-add,.tl-g-add:focus-visible{opacity:1; transform:none}
.tl-genres.has-sel .tl-g-add{opacity:.85; transform:none}
.tl-g-add:hover{background:var(--gc); border-color:var(--gc); color:#fff; opacity:1}
/* 지금 고른 장르 줄 */
.tl-gsel{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 10px; font-size:13px; color:var(--tl-text-2)}
.tl-gsel-c{--gc:hsl(var(--gh,330),var(--gs,70%),62%); display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 4px 0 9px; border-radius:9px; border:1px solid var(--gc); background:hsla(var(--gh,330),var(--gs,70%),55%,.16); color:var(--tl-text); font-weight:800; font-size:12.5px}
[data-theme="light"] .tl-gsel-c{--gc:hsl(var(--gh,330),var(--gs,70%),42%); background:hsla(var(--gh,330),var(--gs,70%),55%,.12)}
.tl-gsel-c .tl-g-ic{width:15px; height:15px}
.tl-gsel-c a{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:var(--tl-text-3); text-decoration:none; font-size:11px}
.tl-gsel-c a:hover{background:var(--tl-ic-bg); color:var(--tl-text)}
.tl-gsel-p{font-style:normal; color:var(--tl-text-3); font-weight:800}
.tl-gsel-all{color:var(--tl-accent-text); font-weight:800; text-decoration:none; padding:0 4px}
.tl-gsel-all:hover{text-decoration:underline}
.tl-gsel-hint{color:var(--tl-text-3); font-size:12px}
@media (min-width:721px){
  .tl-top .tl-gsel{order:8; flex:1 0 100%; margin:0}
}
/* 휴대폰: 칩 줄은 옆으로 미는 칸이라 모서리 밖이 잘려요 → 표시는 칩 안 오른쪽 끝, ＋는 장르를 하나 고른 뒤에만 */
@media (max-width:720px){
  .tl-g-b{top:50%; right:6px; transform:translateY(-50%); width:22px; height:22px; box-shadow:none}
  .tl-gw:has(.tl-g-b) > .tl-g{padding-right:34px}
  .tl-genres:not(.has-sel) .tl-g-add{display:none}
  .tl-genres:not(.has-sel) .tl-gw > .tl-g{padding-right:12px}
  .tl-genres.has-sel .tl-g-add,.tl-gw:hover .tl-g-add{opacity:1; transform:translateY(-50%)}
}

/* ===================================================================
   2026-11-08 모바일 최적화 묶음 (사용자 요청 07 · 08 · 12 · 13 · 15, docs/todo-work03.md '모바일 최적화')
=================================================================== */
/* 07 레전드 연도: 예전 '(올해−6)년~' 묶음 탭을 없애고 모든 연도를 칸으로 (edm_tl_tabs_years). 모양은 '눈금 한 줄' 그대로이고,
   칸이 모자라면 옆으로 밀어요(휴대폰). 가로줄은 칸마다 그려서 밀어도 끊기지 않아요. 더 밀 수 있는 쪽 끝은 흐려요(tracklist.js가 is-l · is-r) */
.tl-yline{overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  grid-auto-columns:minmax(var(--tl-ycol,76px),1fr); padding:4px 0 6px}
.tl-yline::-webkit-scrollbar{display:none}
.tl-yline::before{display:none}
.tl-yline a{scroll-snap-align:center}
.tl-yline a::before{content:""; position:absolute; left:0; right:0; top:40px; height:2px; background:var(--tl-chip-line)}
.tl-yline a:first-child::before{left:50%}
.tl-yline a:last-child::before{right:50%}
.tl-yline.is-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.tl-yline.is-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px); mask-image:linear-gradient(90deg,transparent,#000 40px)}
.tl-yline.is-l.is-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
@media (max-width:720px){
  .tl-yline{--tl-ycol:56px}
  .tl-yline .tl-y{padding:0 10px}
}

/* 08 ⋮ 판 '트랙 정보': 재생 · 좋아요 · 리포스트 · 올린 날 (tracklist.js openMoreSheet) */
.tl-stats{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; margin:12px 0 0; padding:0}
.tl-stat{min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 2px 8px; border-radius:12px; background:var(--tl-soft)}
.tl-stat dt{display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--tl-text-3); white-space:nowrap}
.tl-stat dt::before{content:""; flex:none; width:11px; height:11px; background:currentColor; -webkit-mask:var(--tl-stat-ic) center/contain no-repeat; mask:var(--tl-stat-ic) center/contain no-repeat}
.tl-stat dd{max-width:100%; margin:0; overflow:hidden; text-overflow:ellipsis; font-size:15px; font-weight:800; line-height:1.2; color:var(--tl-text); font-variant-numeric:tabular-nums; white-space:nowrap}
.tl-stat-play{--tl-stat-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.7v12.6c0 .8.9 1.3 1.6.9l9.9-6.3c.6-.4.6-1.4 0-1.8L9.6 4.8C8.9 4.4 8 4.9 8 5.7z'/%3E%3C/svg%3E")}
.tl-stat-heart{--tl-stat-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19.8s-7.3-4.4-9-8.9C1.8 7.8 3.8 4.7 7 4.7c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.2 0 5.2 3.1 4 6.2-1.7 4.5-9 8.9-9 8.9z'/%3E%3C/svg%3E")}
.tl-stat-repost{--tl-stat-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 6h9.2l-2.1-2.1 1.4-1.4L20 7l-4.5 4.5-1.4-1.4L16.2 8H7a1 1 0 0 0-1 1v3H4V9a3 3 0 0 1 3-3zm10 12H7.8l2.1 2.1-1.4 1.4L4 17l4.5-4.5 1.4 1.4L7.8 16H17a1 1 0 0 0 1-1v-3h2v3a3 3 0 0 1-3 3z'/%3E%3C/svg%3E")}
.tl-stat-cal{--tl-stat-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2zm12 8H5v9h14z'/%3E%3C/svg%3E")}
.tl-stat-heart dt{color:var(--tl-accent-text)}

/* 12 판 잡아 내려 닫기 (tracklist.js dragToClose): 손잡이를 조금 더 손잡이답게 */
.tl-sheet-grab{width:44px; height:5px; margin:0 auto 12px; border-radius:3px; background:var(--tl-text-3); opacity:.45}

/* 13 실시간 '21:15 기준 · 매시간 새로 계산해요' (2026-11-08 사용자: "위에 몰려 있어요"): 탭 바로 밑에 붙은 글 한 줄 대신 작은 알약으로, 위아래 간격을 비슷하게.
   휴대폰은 탭과 목록 사이 가운데, 컴퓨터는 탭 줄 아래 왼쪽(탭 · 목록과 줄 맞춤) */
.tl-rt-note > span{display:inline-flex; align-items:center; gap:7px; max-width:100%; box-sizing:border-box; padding:6px 13px; border-radius:999px; background:var(--tl-soft); line-height:1.2}
@media (max-width:720px){
  .tl-rt-note{justify-content:flex-start; margin:10px 0 12px; font-size:12px}
}
@media (min-width:721px){
  .tl-top .tl-rt-note{margin:2px 0}
}

/* 15 NEW · ▲ 알약이 휴대폰 순위 칸(20px)보다 넓어 잘렸어요(아이폰 글꼴이 더 넓어요) → 칸 밖으로 조금 나와도 보이게, 가운데 맞춤 */
@media (max-width:720px){
  .tl .tl-c-rank{overflow:visible; display:flex; flex-direction:column; align-items:center; justify-content:center}
  .tl .tl-c-rank.is-new{flex-direction:row}
  .tl .tl-c-rank .tl-rk{flex:none; margin-left:0; margin-right:0}
  .tl-rk.new,.tl .tl-c-rank.is-new .tl-rk.new{letter-spacing:.1px}
}

/* 20 장르 칩 (2026-11-08 사용자 요청: "디깅에서 최신 디깅과 레전드디깅은 장르도 BPM처럼 목록에서 보여져야해") — 표에 tl-has-genre(inc/tracklist.lib.php)
   KEY 칩 다음 칸, 색은 장르 칸과 같아요(edm_tl_genre_look → --gh · --gs). 컴퓨터는 칩 칸이 하나 늘고, 휴대폰은 DJ 정보 줄(.tl-l3)에 들어가요 */
.tl-l3 em.g,.tl-c-dj em.g{color:hsl(var(--gh,330),var(--gs,60%),72%)}
[data-theme="light"] .tl-l3 em.g,[data-theme="light"] .tl-c-dj em.g{color:hsl(var(--gh,330),var(--gs,60%),33%)}
.tl-l3 em.g{max-width:120px; overflow:hidden; text-overflow:ellipsis}
.tl-l3 em.g.none{display:none}
/* 좁은 휴대폰(표 439px 이하)은 한 줄에 다 안 들어가서, 장르가 있는 줄은 BPM · KEY · 장르만 (길이 · 올린 날은 ⋮ 트랙 정보 판에 있어요) */
@media (max-width:720px){ @container tl (max-width:439px){ .tl.tl-has-genre .tl-l3:has(em.g:not(.none)) em.t,.tl.tl-has-genre .tl-l3:has(em.g:not(.none)) em.d{display:none} } }
@media (min-width:721px){
  @container tl (min-width:640px){
    .tl.tl-has-genre .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 72px 50px 92px 74px 62px 68px}
    .tl .tl-c-dj em.g{display:block; padding:0 8px; line-height:24px; text-overflow:ellipsis}
    .tl .tl-c-dj em.g::before{content:""; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:hsl(var(--gh,330),var(--gs,60%),55%); vertical-align:1px}
    .tl .tl-c-dj em.g.none{visibility:hidden}
  }
  @container tl (min-width:900px){
    .tl.tl-has-genre .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 76px 52px 100px 52px 76px 64px 72px}
  }
}

/* 59 순위 칸 표시 A '작은 알약' (2026-11-09 사용자가 고른 시안, tools/mockups/rank-badges.html):
   순위 숫자 아래 알약 하나 — 급상승(불꽃 + 오른 계단) · 역주행(되감기) · NEW · HiGH(42, 월간 이번 달 곡) · ▲▼(색 글자) · –.
   제목 옆 '급상승' · '역주행' 글자 표(.tl-flag)는 없앴어요(inc/tracklist.lib.php edm_tl_rank_badge). 주간 NEW 줄(숫자 대신 NEW, .is-new)은 그대로예요.
   설명은 title · aria-label(lang tl.rank.* · tl.high*)이라 언어를 바꾸면 같이 바뀌어요 */
.tl .tl-c-rank:not(.is-new) .tl-rk{display:flex; align-items:center; justify-content:center; gap:2px; width:max-content; min-width:0; height:16px; margin:3px auto 0; padding:0 5px; border:0; border-radius:999px; background:none; box-shadow:none; animation:none; font-size:10px; font-weight:900; line-height:1; letter-spacing:-.1px; white-space:nowrap}
.tl .tl-c-rank:not(.is-new) .tl-rk svg{width:10px; height:10px; flex:none}
.tl .tl-c-rank .tl-rk.hot{color:#fff; background:linear-gradient(135deg,#ff3b5c,#ff8a3d); box-shadow:0 2px 6px rgba(255,80,60,.35)}
.tl .tl-c-rank .tl-rk.hot .tl-fire{color:#ffe27a}
.tl .tl-c-rank .tl-rk.back{color:#fff; background:linear-gradient(135deg,#7a4bd6,#3a8dff); box-shadow:0 2px 6px rgba(80,90,230,.3); padding:0 6px}
.tl .tl-c-rank:not(.is-new) .tl-rk.new{color:#fff; background:var(--tl-accent); letter-spacing:.2px}
.tl .tl-c-rank .tl-rk.high{color:#fff; background:linear-gradient(135deg,#f5a623,#e0284f); letter-spacing:0; padding:0 3px}
.tl .tl-c-rank .tl-rk.up{color:#ff5a7a; padding:0}
.tl .tl-c-rank .tl-rk.down{color:#5aa0ff; padding:0}
.tl .tl-c-rank .tl-rk.same{color:var(--tl-text-3); padding:0; font-weight:700}
[data-theme="light"] .tl .tl-c-rank .tl-rk.up{color:#e0284f}
[data-theme="light"] .tl .tl-c-rank .tl-rk.down{color:#2f6fd6}

/* 42 이번 달 곡 줄 (월간 최근 30일, .is-high): 연한 금빛 + 왼쪽 금빛 줄. 듣는 곡(.active) · 펼친 디깅 줄(.is-open) · 고른 줄(.is-sel) 표시가 먼저예요 */
.tl .tl-body .tl-row.is-high{background:rgba(245,166,35,.09); box-shadow:inset 3px 0 0 #f5a623}
.tl .tl-body .tl-row.is-high:hover{background:rgba(245,166,35,.15)}
[data-theme="light"] .tl .tl-body .tl-row.is-high{background:#fff6e3}
[data-theme="light"] .tl .tl-body .tl-row.is-high:hover{background:#ffefcc}
.tl .tl-body .tl-row.is-high.active{background:var(--tl-accent-soft); box-shadow:inset 3px 0 0 var(--tl-accent)}
[data-theme="light"] .tl .tl-body .tl-row.is-high.active,
[data-theme="light"] .tl .tl-body .tl-row.is-high.active:hover{background:var(--lt-accent-soft); box-shadow:inset 3px 0 0 var(--lt-accent)}
.tl .tl-body .tl-row.is-high.is-open,
[data-theme="light"] .tl .tl-body .tl-row.is-high.is-open,
[data-theme="light"] .tl .tl-body .tl-row.is-high.is-open:hover{background:var(--tl-dig)}
.tl .tl-body .tl-row.is-high.is-sel{box-shadow:inset 3px 0 0 #f5a623, inset 0 0 0 2px var(--tl-sel)}

/* 휴대폰 순위 칸 20px → 32px: 알약이 칸 안에 들어가요. 제목 옆 표가 빠져서 제목 자리는 오히려 넓어요 */
@media (max-width:720px){ .tl > *{--tl-rankw:32px} }

/* 27 디깅에서 빼기 (2026-11-09 사용자 요청 27, tracklist.js digRemove): 뺀 아티스트 곡 줄은 숨기고, 듣는 중 · 펼친 줄은 흐리게. 알림의 '되돌리기' 단추 */
.tl .tl-body .tl-row.is-gone{display:none}
.tl .tl-body .tl-row.is-dim{opacity:.45}
.tl-toast .tl-toast-btn{margin-left:10px; padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; cursor:pointer}

/* 여기서 못 트는 곡 (2026-11-09 작업 04 요청 31 '재생 멈칫', inc/edm_play_state.lib.php · tracklist.js lockNote):
   사운드클라우드 Go+ 미리듣기만(data-lock 1 · 표 Go+) · 재생 막힘(2) · 방금 못 튼 곡(3, 하단 플레이어가 알려 줘요).
   흐리게 + 표, 누르면 알림 · SoundCloud에서 듣기. 담기 · 좋아요 · ⋮는 그대로 써요 */
.tl .tl-body .tl-row.is-locked .tl-cover img{filter:grayscale(.9); opacity:.42}
.tl .tl-body .tl-row.is-locked .tl-cover-ic{opacity:0 !important}
/* 알림이 휴대폰에서 한 글자씩 줄바꿈되던 것(왼쪽 50%에서 시작해서 남은 폭이 화면 절반이었어요): 글 길이만큼, 화면 폭 − 32px까지 (요청 31 알림 글이 길어서 드러났어요) */
.tl-toast{width:max-content; box-sizing:border-box}
.tl-toast > span{min-width:0}
.tl .tl-body .tl-row.is-locked .tl-title,
.tl .tl-body .tl-row.is-locked .tl-artist,
.tl .tl-body .tl-row.is-locked .tl-l3,
.tl .tl-body .tl-row.is-locked .tl-c-dj,
.tl .tl-body .tl-row.is-locked .tl-c-plays,
.tl .tl-body .tl-row.is-locked .tl-c-likes,
.tl .tl-body .tl-row.is-locked .tl-c-date{opacity:.5}
.tl .tl-body .tl-row.is-locked .tl-cover,
.tl .tl-body .tl-row.is-locked .tl-c-main{cursor:help}
.tl .tl-body .tl-row.is-locked[data-lock="3"] .tl-title{text-decoration:line-through; text-decoration-thickness:1px}
.tl-pro.tl-pro-x{background:#6b6560}

/* ===================================================================
   작업 04 묶음 F1 (2026-11-09 사용자 요청 36 · 38 · 39, 아이패드 사진 3장 — tools/tl-fit/로 잼)
   "좁을 때는 좋아요 같은 칸이 안 보이는 게 좋아요 … 거의 다 한 줄로 균형 있게, 트랙 제목이 잘 보여야 해요. 사람은 트랙 제목과 사진을 보고 누르니까요"
   - 왼쪽 메뉴가 보이는 아이패드 가로(창 1024~1194px)는 표가 720~890px, 세로(768~834px)는 712~778px뿐인데 컴퓨터와 같은 칩 다섯 개를 다 둬서
     제목 칸이 210~280px였어요(실제 사이트 최신 트랙 25곡 중 21곡이 잘림). 칩 칸도 좁아 'Gbm' 'Abm' · '915.5K'가 잘렸어요(컴퓨터 1440px 레전드 22곳).
   - 표 폭(컨테이너 tl)마다 덜 중요한 칩부터 빼요. 남기는 차례: 표지 · 제목 · 담기 > 재생 수 > BPM > (디깅) 장르 > KEY > 올린 날 > 좋아요 > 길이
       640~799px  BPM · KEY · 재생            (디깅: BPM · 장르 · 재생)
       800~919px  + 올린 날                   (디깅: + KEY)
       920~1099px + 좋아요                    (디깅: + 올린 날)
       1100px~    컴퓨터 그대로(+ 길이)       — KEY 56 · 재생 80 · 좋아요 68px만 넓혀 글자가 안 잘려요
   - 표지는 아이패드 폭에서 48px(컴퓨터 44px). 재생 · 좋아요 숫자는 세 자리까지(916K · 78.8K, inc/tracklist.lib.php edm_tl_num)
   보이는 칸 수와 grid 칸 수가 꼭 같아야 해요(위 '폭별 A2 칸'을 덮어요)
=================================================================== */
@media (min-width:721px){
  @container tl (min-width:640px){
    .tl > *{--tl-gap:6px; --tl-padx:12px; --tl-rankw:30px; --tl-cover:48px}
    .tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 72px 56px 76px}
    .tl .tl-c-dj em.t,.tl .tl-c-likes,.tl .tl-c-date{display:none}
    .tl .tl-c-dj em.b{margin-left:6px}
    .tl .tl-c-plays{margin-left:8px}
    .tl.tl-has-genre .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 72px 96px 76px}
    .tl.tl-has-genre .tl-c-dj em.k{display:none}
    .tl-title{font-size:15px}
  }
  @container tl (min-width:800px){
    .tl > *{--tl-rankw:32px}
    .tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 72px 56px 76px 72px}
    .tl .tl-c-date{display:flex}
    .tl.tl-has-genre .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 72px 56px 96px 76px}
    .tl.tl-has-genre .tl-c-dj em.k{display:flex}
    .tl.tl-has-genre .tl-c-date{display:none}
  }
  @container tl (min-width:920px){
    .tl > *{--tl-gap:8px; --tl-padx:14px; --tl-rankw:34px}
    .tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 72px 56px 76px 68px 72px}
    .tl .tl-c-likes{display:flex}
    .tl.tl-has-genre .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 72px 56px 100px 76px 72px}
    .tl.tl-has-genre .tl-c-date{display:flex}
    .tl.tl-has-genre .tl-c-likes{display:none}
  }
  @container tl (min-width:1100px){
    .tl > *{--tl-gap:8px; --tl-padx:16px; --tl-rankw:36px; --tl-cover:44px}
    .tl .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 76px 56px 52px 80px 68px 72px}
    .tl .tl-c-dj em.t{display:flex}
    .tl .tl-c-likes,.tl.tl-has-genre .tl-c-likes{display:flex}
    .tl .tl-c-dj em.b{margin-left:8px}
    .tl .tl-c-plays{margin-left:12px}
    .tl.tl-has-genre .tl-body .tl-row{grid-template-columns:var(--tl-rankw) var(--tl-cover) minmax(0,1fr) 76px 56px 100px 52px 80px 68px 72px}
    .tl-title{font-size:15.5px}
  }
}

/* 머리 줄 (요청 36 "25 · 50 · 100 · 150 줄이 최적화가 안 돼 있어요"): 아이패드 폭에서는 탭 · 날짜 · [곡 수] · 디깅 모드 · 정렬이 한 줄에 들어가게 작게.
   예전엔 머리 칸 720~778px(아이패드 가로 1024 · 세로)에서 곡 수 네 칸 + 디깅 모드가 혼자 둘째 줄을 썼어요. 머리 칸 폭(컨테이너 tlt)으로 정해요 */
.tl-per-pick{display:none}
.tl-per-sel{appearance:none; -webkit-appearance:none; height:38px; padding:0 34px 0 14px; border-radius:10px; cursor:pointer;
  background:var(--tl-chip); color:var(--tl-text); border:1px solid var(--tl-chip-line); font-family:inherit; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums}
.tl-per-sel:focus-visible{outline:none; box-shadow:var(--tl-focus)}
.tl-per-sel option{background:var(--tl-pop); color:var(--tl-text)}
@media (min-width:721px){
  /* 맨 윗줄 제목: 아이패드 미니 세로(768px)에서 '레전드 …'처럼 잘렸어요(제목과 검색칸이 같이 줄었어요) → 제목은 안 줄고 검색칸이 줄어요(최소 200px, head.php).
     아주 긴 제목(다른 언어)은 윗줄 절반에서 … — 큰 글씨 머리(.pg-mhead, 최신 트랙 · 최신 믹셋, page_mast.css)는 그쪽 규칙 그대로라 빼요 */
  .va-topbar > .tl-pagehead:not(.pg-mhead){flex-shrink:0; max-width:50%}
  .tl-top{container:tlt / inline-size}
  @container tlt (max-width:1099px){
    .tl-top .tl-per{display:none}
    .tl-top .tl-per-pick{display:inline-flex}
    .tl-top .tl-per-sel{height:40px; border-radius:12px; background:var(--tl-cd); border-color:var(--tl-cd-line)}
    /* 날짜 고르기는 고르기 전에는 달력 아이콘만 (고른 뒤에는 기간 글자 · ‹ › ✕ 그대로) */
    .tl-top .tl-date:not(.on) .tl-date-btn{width:40px; padding:0; justify-content:center}
    .tl-top .tl-date:not(.on) .tl-date-btn span{display:none}
  }
  @container tlt (max-width:899px){
    /* 디깅 모드는 아이콘 + 불(LED)만 — DJ Pick 머리 · 휴대폰과 같은 모양, 설명은 title */
    .tl-top .tl-pcmode{width:40px; height:40px; padding:0; justify-content:center; gap:0; border-radius:12px}
    .tl-top .tl-pcmode span{display:none}
    .tl-top .tl-pcmode .tl-led{position:absolute; top:6px; right:6px}
  }
}

/* 장르 칸 (요청 7 곡 수 · 38): 장르마다 그 기간 곡 수(edm_tl_genre_counts, 곡이 없는 장르 칸은 안 그려요).
   아이패드 폭(머리 칸 1100px 아래)은 좁고 긴 칸 대신 한 줄 알약(옆으로 밀기) — DJ Pick 장르 칸(20a3ed8)과 같아요. 컴퓨터는 칸 그대로, 수는 이름 아래 */
.tl-g .tl-g-n{flex:none; font-size:11px; font-weight:700; font-style:normal; font-variant-numeric:tabular-nums; color:var(--tl-text-3); opacity:.9}
.tl-g.on .tl-g-n{color:var(--tl-text-2)}
@media (min-width:721px){
  .tl-top .tl-g .tl-g-n{display:block; margin-top:-2px; font-size:10.5px}
  .tl-top .tl-genres.has-n{grid-auto-columns:minmax(0,132px); justify-content:start}   /* 곡이 있는 장르만 그리니 칸이 몇 개 안 되면 한 칸이 너무 넓어져요 */
  @container tlt (max-width:1099px){
    .tl-top .tl-genres{display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:0; padding:2px 0}
    .tl-top .tl-genres::-webkit-scrollbar{display:none}
    .tl-top .tl-gw{flex:none}
    .tl-top .tl-g{flex-direction:row; height:40px; min-height:0; padding:0 14px; gap:6px; border-radius:12px; font-size:13px; letter-spacing:0; white-space:nowrap; text-align:left}
    .tl-top .tl-g span{max-width:none}
    .tl-top .tl-g-ic{width:18px; height:18px; stroke-width:1.9}
    .tl-top .tl-g .tl-g-n{display:inline; margin:0 0 0 1px; font-size:11.5px}
    .tl-top .tl-g-b{top:50%; right:6px; transform:translateY(-50%); width:22px; height:22px; box-shadow:none}
    .tl-top .tl-gw:has(.tl-g-b) > .tl-g{padding-right:34px}
    .tl-top .tl-genres:not(.has-sel) .tl-g-add{display:none}
    .tl-top .tl-genres:not(.has-sel) .tl-gw > .tl-g{padding-right:14px}
    .tl-top .tl-genres.has-sel .tl-g-add,.tl-top .tl-gw:hover .tl-g-add{opacity:1; transform:translateY(-50%)}
  }
}

/* 휴대폰 (요청 36 "모든 기종"): 360 · 390px에서 제목 아래 칩 줄(BPM · KEY · 길이 · 올린 날)이 넘쳐 올린 날 끝이 잘렸어요(25곡 중 19~25곡).
   - 표 409px 아래는 길이를 빼요(디깅 플레이어 · ⋮ 판 '트랙 정보'에 있어요)
   - 그래도 칸이 모자라면(갤럭시 360px · 아이폰 글꼴) 끝 칩이 반쯤 잘리지 않고 통째로 빠져요: 줄 바꿈을 허락하고 높이를 한 줄로 막아, 넘친 칩은 안 보이는 둘째 줄로 가요 */
@media (max-width:720px){
  .tl .tl-l3{flex-wrap:wrap; align-content:flex-start; height:18px; row-gap:10px}
  @container tl (max-width:409px){
    .tl .tl-l3 em.t{display:none}
  }
  /* 갤럭시 360px(표 340px): 'Cm' · 'Gbm'처럼 키가 길면 BPM · KEY · 올린 날이 몇 px 넘쳐요 → 칩 글자 · 여백 · 사이를 조금씩 줄여 셋이 다 들어가게 */
  @container tl (max-width:359px){
    .tl .tl-l3{gap:3px}
    .tl .tl-l3 em{padding-left:4px; padding-right:4px; font-size:10px}
  }
}
/* ---- 작업 04 묶음 F1 끝 (tools/tl-fit/stage-css.js가 이 블록만 서버 판 끝에 붙여요) ---- */

/* ===================================================================
   작업 04 요청 44 — BPM 범위 거르기 (2026-11-10, 세션 tl-ipad)
   사용자: "모바일에서는 정렬보기에 BPM도 유저가 직접 숫자를 입력하면 120~140 이렇게 하면 해당 bpm만 나오게 … PC에서도 있어야해 … 빈 자리 밸런스 잘 찾아서"
   - 컴퓨터(721px 이상): 머리 줄 왼쪽 '거르기' 묶음 = 기간 탭 · 날짜 고르기 · BPM(order 3이라 날짜 바로 오른쪽). 오른쪽 '보기' 묶음(정렬 · 곡 수 · 디깅 모드)은 그대로예요.
     날짜 고르기가 없는 레전드는 연도 줄 아래 도구 줄의 맨 앞. 누르면 작은 판(tracklist.js openBpmPop — 날짜 판과 같은 틀), 고르면 '120~140 BPM' + ✕
   - 휴대폰(720px 이하): 단추는 숨기고 '정렬 · 보기' 판 맨 위 칸(openViewSheet). 고른 동안만 탭 아래 '120~140 BPM ✕' 줄 + 정렬 아이콘 불
   그리는 코드 inc/tracklist.lib.php edm_tl_bpm_html (주소 ?bpm=120-140, 서버 edm_tl_bpm_range가 다시 검사해요)
=================================================================== */
.tl-bpm{display:flex; align-items:center; gap:4px; flex:none}
.tl-bpm-btn{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 12px; border-radius:8px; cursor:pointer;
  border:1px solid #444; background:#111; color:#ccc; font-family:inherit; font-weight:600; font-size:14px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.tl-bpm-btn .tl-bpm-ic{width:17px; height:17px; flex:none}
.tl-bpm-btn:hover{border-color:#666; color:#fff}
.tl-bpm-btn:focus-visible{outline:none; box-shadow:var(--tl-focus)}
.tl-bpm.on .tl-bpm-btn{background:var(--tl-accent); border-color:var(--tl-accent); color:#fff}
.tl-bpm-x{display:inline-flex; align-items:center; justify-content:center; width:30px; height:34px; border-radius:8px; color:var(--tl-text-2); font-size:17px; text-decoration:none}
.tl-bpm-x:hover{background:var(--tl-ic-bg); color:var(--tl-text)}
[data-theme="light"] .tl-bpm-btn{background:var(--lt-surface); border-color:var(--lt-border-strong); color:var(--lt-text-2)}
[data-theme="light"] .tl-bpm-btn:hover{background:var(--lt-fill-hover); color:var(--lt-text)}
[data-theme="light"] .tl-bpm.on .tl-bpm-btn{background:var(--lt-accent-soft); border-color:var(--lt-accent-line); color:var(--lt-accent-text)}
@media (min-width:721px){
  .tl-top .tl-bpm{order:3}
  .tl-top .tl-bpm-btn{height:40px; border-radius:12px}
  .tl-top .tl-bpm-x{height:40px}
  /* 아이패드 폭(머리 칸 1100px 아래): 그림 없이 'BPM' · '125~130 BPM' 글자만 — 날짜 고르기가 달력 아이콘만이 되는 폭과 같아요(F1).
     고른 뒤에도 그림을 빼야 아이패드 가로(1024)에서 탭 · 날짜 · BPM · 정렬 · 곡 수 · 디깅 모드가 한 줄에 들어가요(그림이 있으면 두 줄) */
  @container tlt (max-width:1099px){
    .tl-top .tl-bpm{gap:2px}
    .tl-top .tl-bpm-btn{padding:0 11px}
    .tl-top .tl-bpm-ic{display:none}
    .tl-top .tl-bpm-x{width:26px}
  }
}
/* 고르기 판 (컴퓨터 작은 창 .tl-datepop.tl-bpmpop · 휴대폰 '정렬 · 보기' 판 맨 위 .tl-bpsec) */
.tl-bpmpop{width:min(340px, calc(100vw - 16px))}
.tl-bp-presets{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:12px}
.tl-bp-presets button{
  height:34px; padding:0 6px; border-radius:10px; border:1px solid var(--tl-chip-line); background:var(--tl-chip);
  color:var(--tl-text-2); font-family:inherit; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; cursor:pointer;
}
.tl-bp-presets button:hover{color:var(--tl-text); border-color:var(--tl-text-3)}
.tl-bp-presets button.on{border-color:var(--tl-accent); background:var(--tl-accent-soft); color:var(--tl-accent-text)}
.tl-bp-row input{font-variant-numeric:tabular-nums; text-align:center; font-weight:700}
.tl-bp-row input::placeholder{color:var(--tl-text-3); font-weight:600; opacity:.7}
.tl-bp-row input:focus{outline:none; border-color:var(--tl-accent); box-shadow:var(--tl-focus)}
.tl-bp-err{margin:-6px 2px 10px; font-size:12.5px; font-weight:700; color:var(--tl-accent-text)}
.tl-bp-err[hidden]{display:none}
.tl-bp-acts{display:flex; gap:8px}
.tl-bp-acts .tl-dp-apply{flex:1 1 auto}
.tl-bp-clear{flex:none; height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--tl-chip-line); background:transparent; color:var(--tl-text-2); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer}
.tl-bp-clear:hover{color:var(--tl-text); border-color:var(--tl-text-3)}
.tl-sheet .tl-bpsec{padding-bottom:14px; border-bottom:1px solid var(--tl-pop-line)}
.tl-sheet .tl-bpsec .tl-sheet-lab{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.tl-sheet .tl-bpsec .tl-sheet-lab b{font-weight:800; color:var(--tl-accent-text); font-variant-numeric:tabular-nums}
.tl-sheet .tl-bp-presets button{height:40px; font-size:14px}
.tl-sheet .tl-bp-row input{height:44px; font-size:17px}   /* 16px 넘게: 아이폰이 칸을 누를 때 화면을 키우지 않아요 */
.tl-sheet .tl-bp-acts .tl-dp-apply,.tl-sheet .tl-bp-clear{height:44px; font-size:15px}
@media (max-width:720px){
  .tl-bpm{display:none}
  /* 고른 동안만: 탭 아래 '120~140 BPM ✕' 줄 (누르면 '정렬 · 보기' 판) */
  .tl-bpm.on{display:flex; margin:2px 0 10px}
  .tl-bpm.on .tl-bpm-btn{height:30px; padding:0 11px; border-radius:15px; font-size:13px; font-weight:700}
  .tl-bpm.on .tl-bpm-ic{width:15px; height:15px}
  .tl-bpm.on .tl-bpm-x{width:30px; height:30px}
}
/* ---- 작업 04 요청 44 끝 (tools/tl-fit/stage-44.js가 이 블록만 서버 판 끝에 붙여요) ---- */