/* ===================================================================
   legend_lx.css — 레전드 연대기 (레전드 트랙 · 레전드 믹셋의 기본 화면, 2026-11-11 작업 05 B-7 = 작업 03 요청 43, 시안 A)
   그리는 코드 inc/edm_legend_lx.lib.php, 움직임 sub/js/legend_lx.js
   - 곡은 모두 곡 목록 표(#tlTable, tracklist.css · tracklist.js)의 줄이에요. 여기서는 그 줄을 앤섬 카드(.lx-anthem) · 작은 카드(.lx-tile)로 꾸미고,
     시대 띠(.lx-rail) · 해마다 한 장(.lx-ch) · 보는 방법 탭(.lx-lens)을 그려요.
   - 폭은 표 폭(컨테이너 tl = 본문 칸)으로 정해요: 720px부터 두 칸(왼쪽 연도 · 오른쪽 곡), 900px부터 카드 6칸, 1000px부터 왼쪽 칸 · 앤섬 표지를 크게.
   - 색은 --lx-* 변수로만 칠해요. 다크 = 지금 사이트 다크 값, 화이트 = 맨 아래에서 theme-light.css의 --lt-*로 바꿔요
     (다크 새로 입히기 도구 tools/dark-v2/build.js가 그 화이트 묶음을 새 다크로 옮겨요 — 새 다크 색을 여기에 직접 넣지 않아요).
   - 화면 높이(vh)에 맞춰 늘어나는 칸은 없어요(휴대폰 문서 스크롤 EDMDoc).
=================================================================== */
.lx,.lx-lens{
  --lx-card:#141417; --lx-line:#26262b; --lx-fill:#1c1c1f; --lx-pop:#2a2a2f;
  --lx-t1:#ededed; --lx-t2:#bdbdbd; --lx-t3:#8d8d8d;
  --lx-ac:#ff0050; --lx-ac-t:#ff3d74;
  --lx-shadow:0 8px 24px rgba(0,0,0,.45);
}
.lx{container:lxp / inline-size; color:var(--lx-t2); font-size:14px; line-height:1.5; min-width:0}   /* 시대 띠는 표 밖이라 이 칸 폭(lxp)으로 재요 */
.lx a{color:inherit; text-decoration:none}
.lx p{word-break:normal; overflow-wrap:anywhere}
.lx-ic{width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.14em}
.lx-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-top 안) ---------------- */
.lx-lens{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-width:0; margin:10px 0 12px}
.lx-tabs,.lx-kind{display:flex; gap:3px; padding:4px; border-radius:12px; background:var(--lx-fill); border:1px solid var(--lx-line); min-width:0}
.lx-kind{margin-left:auto}
.lx-lens .lx-tabs a,.lx-lens .lx-kind a{flex:none; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:8px; color:var(--lx-t2); font-size:13.5px; font-weight:700; line-height:1; white-space:nowrap; text-decoration:none}
.lx-lens .lx-tabs a:hover,.lx-lens .lx-kind a:hover{color:var(--lx-t1)}
.lx-lens .lx-tabs a.on,.lx-lens .lx-kind a.on{background:var(--lx-pop); color:var(--lx-t1); box-shadow:0 1px 3px rgba(0,0,0,.14)}
.lx-tabs .lx-ic{font-size:15px}
.lx-pcmode{flex:none}
@media (min-width:721px){
  .tl-top .lx-lens{order:0; flex:1 0 100%; margin:0}
}
@media (max-width:720px){
  .lx-lens .lx-tabs a{padding:0 10px}
  .lx-tabs .lx-ic{display:none}
}

/* ---------------- 머리 글 · 시대 띠 ---------------- */
.lx-lead{margin:0 0 10px; max-width:760px; color:var(--lx-t3); font-size:14px; line-height:1.6; scroll-margin-top:var(--lx-sm,72px)}
.lx-rail{position:sticky; top:var(--lx-top,0px); z-index:6; margin:0; padding:10px 0 9px; background:var(--lx-bgc, var(--bg,#000)); border-bottom:1px solid var(--lx-line)}   /* --lx-bgc = 페이지 바탕색(legend_lx.js가 body에서 읽어 줘요 — 화면 모드마다 달라요) */
.lx-rail-in{min-width:0}
.lx-eras{display:flex; gap:2px; margin-bottom:7px}
.lx-eras span{min-width:0; min-height:14px; padding:0 2px 4px; border-bottom:5px solid hsl(var(--gh,220),var(--gs,0%),52%); color:var(--lx-t2); font-size:11px; font-weight:800; line-height:1.3; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-eras span:first-child{border-bottom-left-radius:3px} .lx-eras span:last-child{border-bottom-right-radius:3px}
.lx-eras b{font-weight:800}
.lx-yrs{display:flex}
.lx .lx-yrs a{flex:1 1 0; min-width:0; height:42px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; color:var(--lx-t3); font-size:11.5px; font-weight:800; line-height:1.2; touch-action:manipulation}
.lx-yrs a i{display:block; flex:none; border-radius:50%; background:hsl(var(--gh,220),var(--gs,0%),52%); opacity:.8; transition:transform .15s}
.lx-yrs a b{font-weight:800; font-variant-numeric:tabular-nums}
.lx .lx-yrs a:hover{color:var(--lx-t1)} .lx-yrs a:hover i{transform:scale(1.15); opacity:1}
.lx .lx-yrs a.on{color:var(--lx-t1)}
.lx-yrs a.on i{opacity:1; outline:2px solid var(--lx-t1); outline-offset:2px}
.lx-yrs a.is-off{opacity:.42}
.lx-y2{display:none}
@container lxp (max-width:719px){ .lx-eras span{font-size:10px} }
@media (max-width:720px){ .lx-eras span.is-s{font-size:0} }   /* 한두 해짜리 시대는 휴대폰에서 색 띠만(이름이 'T…'로 잘려요) */
@media (max-width:720px){
  .lx-y4{display:none} .lx-y2{display:inline}
  .lx .lx-yrs a{font-size:10.5px; height:38px}
  @container lxp (max-width:319px){ .lx .lx-yrs a{font-size:9px; letter-spacing:-.3px} .lx-yrs a i{max-width:12px; max-height:12px} }   /* 갤럭시 폴드 바깥 화면 */
  .lx-rail{position:static; background:transparent}   /* 휴대폰은 문서가 스크롤돼서 붙지 않아요 — 장 머리의 ‹ 해 · 해 › 로 옮겨요 */
}

/* ---------------- 표 겉모양 지우기 (장이 카드라서) ---------------- */
.lx .bp-table.lx-tl,[data-theme="light"] .lx .bp-table.lx-tl{background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible}
.lx-tl .tl-head{display:none !important}
.lx-empty{margin:0; padding:40px 16px; text-align:center; color:var(--lx-t3)}

/* ---------------- 해 한 장 ---------------- */
.lx-ch{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:24px 0 26px; border-bottom:1px solid var(--lx-line); scroll-margin-top:var(--lx-sm,72px); min-width:0}
.lx-ch > *,.lx-main > *{min-width:0}
/* 좁을 때: 왼쪽 칸을 풀어서 연도 · 시대 · 숫자 → 곡 → DNA · 아티스트 · 건너가기 차례로 */
.lx-yy,.lx-yy-in{display:contents}
.lx-step{grid-row:1; grid-column:1; justify-self:end; align-self:center} .lx-num{grid-row:1; grid-column:1; justify-self:start} .lx-erab{order:3} .lx-facts{order:4} .lx-main{order:5} .lx-dna-w{order:6} .lx-who{order:7} .lx-links{order:8}
.lx-num{font-family:"Anton","Arial Narrow",Impact,"Segoe UI",sans-serif; font-size:64px; font-weight:400; line-height:.95; letter-spacing:.5px; color:var(--lx-t1)}
.lx-erab{justify-self:start; max-width:100%; margin:0; padding:5px 12px; border-radius:99px; font-family:inherit; font-size:13px; font-weight:900; line-height:1.35; letter-spacing:0;
  color:hsl(var(--gh,220),82%,74%); background:hsla(var(--gh,220),var(--gs,0%),55%,.16); word-break:keep-all; overflow-wrap:anywhere}
.lx .lx-step{display:flex; align-items:center; justify-content:flex-end; gap:6px; min-height:34px}
.lx .lx-step a{display:inline-flex; align-items:center; gap:2px; height:34px; padding:0 10px; border-radius:99px; border:1px solid var(--lx-line); background:var(--lx-card); color:var(--lx-t2); font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; touch-action:manipulation}
.lx .lx-step a:hover{color:var(--lx-t1); border-color:var(--lx-t3)}
.lx-step .lx-ic{font-size:14px}
.lx-step .is-none{display:none}
.lx-facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.lx-facts div{min-width:0; padding:8px 10px; border-radius:10px; background:var(--lx-card); border:1px solid var(--lx-line)}
.lx-facts b{display:block; color:var(--lx-t1); font-size:17px; font-weight:850; letter-spacing:-.3px; line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-facts span{display:block; color:var(--lx-t3); font-size:11px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-ch h4{margin:0 0 6px; color:var(--lx-t3); font-family:inherit; font-size:12px; font-weight:800; letter-spacing:0; line-height:1.3}
.lx-dna{display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--lx-fill)}
.lx-dna i{display:block; height:100%; background:hsl(var(--gh,220),var(--gs,0%),55%)}
.lx-dnal{display:flex; flex-wrap:wrap; gap:3px 10px; margin-top:7px; color:var(--lx-t3); font-size:11.5px; line-height:1.4}
.lx-dnal span{white-space:nowrap}
.lx-dnal span::before{content:""; display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:2px; background:hsl(var(--gh,220),var(--gs,0%),55%)}
.lx-dnal em{font-style:normal; font-weight:800; color:var(--lx-t2)}
.lx-who a,.lx-who span{display:inline-block; max-width:100%; margin:0 4px 5px 0; padding:4px 10px; border-radius:99px; background:var(--lx-card); border:1px solid var(--lx-line); color:var(--lx-t2); font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top}
.lx .lx-who a:hover{color:var(--lx-t1); border-color:var(--lx-t3)}
.lx-links{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; font-weight:800}
.lx .lx-links a{display:inline-flex; align-items:center; gap:3px; color:var(--lx-t3)}
.lx .lx-links a:hover{color:var(--lx-t1)}
.lx-lab{margin:0 0 8px; color:var(--lx-t3); font-size:12px; font-weight:900; letter-spacing:.4px}
.lx-col-h{margin:0 0 10px; color:var(--lx-t1); font-family:inherit; font-size:22px; font-weight:900; letter-spacing:-.6px; line-height:1.22; word-break:keep-all; overflow-wrap:anywhere}
.lx .lx-col-p{margin:0 0 16px; color:var(--lx-t2); font-size:15px; line-height:1.8; word-break:keep-all; overflow-wrap:anywhere}
.lx-foot{display:flex; align-items:center; gap:10px; margin-top:14px; min-width:0}
.lx .lx-all{min-width:0; display:inline-flex; align-items:center; gap:3px; color:var(--lx-t2); font-size:13px; font-weight:800}
.lx .lx-all:hover{color:var(--lx-t1)}
.lx-share{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px; border-radius:99px; border:1px solid var(--lx-line); background:var(--lx-card); color:var(--lx-t2); font-family:inherit; font-size:12.5px; font-weight:800; line-height:1; cursor:pointer; touch-action:manipulation}
.lx-share:hover{color:var(--lx-t1); border-color:var(--lx-t3)}
.lx-share .lx-ic{font-size:15px}
.lx-end{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:22px 0 8px; color:var(--lx-t3); font-size:13px}
.lx-end p{margin:0}
.lx .lx-end a{margin-left:auto; display:inline-flex; align-items:center; gap:4px; color:var(--lx-t2); font-weight:800}

/* 두 칸: 왼쪽 연도 칸이 따라 내려와요 */
@container tl (min-width:720px){
  .lx-ch{grid-template-columns:240px minmax(0,1fr); gap:24px; padding:32px 0 34px}
  .lx-yy{display:block; min-width:0}
  .lx-yy-in{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; position:sticky; top:calc(var(--lx-sm,110px) + 6px)}
  .lx-main{order:0}
  .lx-step,.lx-num{grid-row:auto; grid-column:auto; justify-self:stretch}
  .lx-num{font-size:84px}
  .lx .lx-step{justify-content:flex-start; min-height:0}
  .lx .lx-step a{height:28px; padding:0 8px; font-size:12px}
  .lx-col-h{font-size:26px}
}
@container tl (min-width:1000px){
  .lx-ch{grid-template-columns:290px minmax(0,1fr); gap:30px}
  .lx-num{font-size:96px}
  .lx-col-h{font-size:30px} .lx .lx-col-p{font-size:16px}
}

/* ---------------- 앤섬 카드: 곡 줄(.tl-row)을 큰 카드로 ---------------- */
.lx-tl .tl-body .tl-row.lx-anthem,
[data-theme="light"] .lx-tl .tl-body .tl-row.lx-anthem{
  display:grid; grid-template-columns:112px auto auto minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:8px 12px; min-height:0; padding:12px;
  border:1px solid var(--lx-line); border-radius:18px; box-shadow:none !important;
  background:linear-gradient(135deg, hsla(var(--gh,330),80%,55%,.18), transparent 62%), var(--lx-card) !important;
}
.lx-tl .tl-body .tl-row.lx-anthem::after{display:none}
.lx-tl .tl-body .tl-row.lx-anthem.active,.lx-tl .tl-body .tl-row.lx-anthem.is-open{border-color:var(--lx-ac)}
.lx-tl .lx-anthem > .tl-c-rank,.lx-tl .lx-anthem > .tl-c-dj,.lx-tl .lx-anthem > .tl-c-date,.lx-tl .lx-anthem .tl-meta,.lx-tl .lx-anthem .tl-cartm,.lx-tl .lx-anthem .tl-ic-like{display:none !important}
.lx-tl .lx-anthem > .tl-c-cover{grid-column:1; grid-row:1 / span 2; align-self:start}
.lx-tl .lx-anthem .tl-cover{width:112px; height:112px; border-radius:12px; box-shadow:var(--lx-shadow)}
.lx-tl .lx-anthem .tl-cover img{border-radius:12px}
.lx-tl .lx-anthem .tl-cover-ic{font-size:40px}
.lx-tl .lx-anthem .tl-eq{padding-bottom:26px; gap:5px} .lx-tl .lx-anthem .tl-eq i{width:6px; height:34px}
.lx-tl .tl-body .lx-anthem > .tl-c-main{grid-column:2 / -1; grid-row:1; align-self:end; padding:0; min-width:0}
.lx-tl .lx-anthem .tl-l1{display:block}
.lx-tl .lx-anthem .tl-title{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow:hidden; font-size:17px; font-weight:850; letter-spacing:-.3px; line-height:1.22; word-break:normal; overflow-wrap:anywhere}
.lx-tl .lx-anthem .tl-pro{display:inline-block; margin-top:4px}
.lx-tl .tl-body .lx-anthem .tl-l2{display:block; margin-top:3px; font-size:13.5px; font-weight:700; color:var(--lx-t2)}
.lx-tl .lx-anthem .tl-artist{display:block}
.lx-tl .tl-body .lx-anthem .tl-l3{display:flex !important; flex-wrap:wrap; gap:4px; margin-top:7px; overflow:visible; white-space:normal}
.lx-tl .tl-body .lx-anthem .tl-l3 em.t{display:block}
.lx-tl .tl-body .lx-anthem .tl-l3 em.d{display:block}
.lx-tl .tl-body .lx-anthem .tl-l3 em.none{display:none}
.lx .lx-tl .tl-body .lx-anthem > .tl-c-plays,.lx .lx-tl .tl-body .lx-anthem > .tl-c-likes{
  display:inline-flex !important; align-items:center; gap:4px; grid-row:2; align-self:center; justify-self:start; width:auto; height:26px; margin:0; padding:0 9px; border:0; border-radius:7px; box-shadow:none;
  background:var(--lx-fill); color:var(--lx-t2); font-size:12px; font-weight:800; line-height:1; text-align:left; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.lx .lx-tl .tl-body .lx-anthem > .tl-c-plays{grid-column:2}
.lx .lx-tl .tl-body .lx-anthem > .tl-c-likes{grid-column:3; cursor:pointer}
/* 칩 앞 그림은 글자로(곡 목록의 컴퓨터 폭 칩 그림 · 재생 수 크기별 색 규칙을 덮어요 — 모든 폭 · 화면 모드에서 같은 모양).
   다크 색 파일의 같은 규칙(html[data-theme="dark"] .tl .tl-c-plays.tl-pl1 …)보다 앞서게 맨 앞에 .lx를 한 단계 더 써요 */
.lx .lx-tl .tl-body .lx-anthem > .tl-c-plays::before,.lx .lx-tl .tl-body .lx-anthem > .tl-c-likes::before{flex:none; width:auto; height:auto; color:inherit; background:none; -webkit-mask:none; mask:none; opacity:.75; line-height:1}
.lx .lx-tl .tl-body .lx-anthem > .tl-c-plays::before{content:"▶"; font-size:9px}
.lx .lx-tl .tl-body .lx-anthem > .tl-c-likes::before{content:"♥"; font-size:11px}
.lx .lx-tl .tl-body .lx-anthem > .tl-c-likes.is-liked{color:var(--lx-ac-t)}
.lx-tl .tl-body .lx-anthem > .tl-c-act{grid-column:4; grid-row:2; justify-self:end; display:flex !important; gap:2px}
.lx-tl .tl-body .lx-anthem > .tl-c-act > *{display:inline-flex}
.lx-tl .tl-body .lx-anthem .tl-ic{opacity:1}
.lx-main > .tl-dig{margin-top:8px; border:1px solid var(--lx-line); border-radius:14px; overflow:hidden}
.lx-main > .tl-dig:not(.open){border-color:transparent; margin-top:0}
@container tl (max-width:379px){
  .lx-tl .tl-body .tl-row.lx-anthem,[data-theme="light"] .lx-tl .tl-body .tl-row.lx-anthem{grid-template-columns:84px auto auto minmax(0,1fr); gap:6px 10px; padding:10px}
  .lx-tl .lx-anthem .tl-cover{width:84px; height:84px}
  .lx-tl .lx-anthem .tl-title{font-size:15px}
  .lx .lx-tl .tl-body .lx-anthem > .tl-c-plays,.lx .lx-tl .tl-body .lx-anthem > .tl-c-likes,.lx-tl .tl-body .lx-anthem > .tl-c-act{grid-row:3}
  .lx .lx-tl .tl-body .lx-anthem > .tl-c-plays{grid-column:1 / span 2; justify-self:start}
  .lx .lx-tl .tl-body .lx-anthem > .tl-c-likes{grid-column:3}
  .lx-tl .lx-anthem > .tl-c-cover{grid-row:1}
  .lx-tl .tl-body .lx-anthem > .tl-c-main{grid-row:1}
}
@container tl (min-width:560px){
  .lx-tl .tl-body .tl-row.lx-anthem,[data-theme="light"] .lx-tl .tl-body .tl-row.lx-anthem{grid-template-columns:160px auto auto minmax(0,1fr); gap:10px 18px; padding:16px}
  .lx-tl .lx-anthem .tl-cover{width:160px; height:160px; border-radius:14px}
  .lx-tl .lx-anthem .tl-title{font-size:22px; letter-spacing:-.5px}
  .lx-tl .tl-body .lx-anthem .tl-l2{font-size:14.5px}
}
@container tl (min-width:1000px){
  .lx-tl .tl-body .tl-row.lx-anthem,[data-theme="light"] .lx-tl .tl-body .tl-row.lx-anthem{grid-template-columns:200px auto auto minmax(0,1fr); gap:12px 20px; padding:18px}
  .lx-tl .lx-anthem .tl-cover{width:200px; height:200px}
  .lx-tl .lx-anthem .tl-title{font-size:26px; letter-spacing:-.6px; line-height:1.15}
}

/* ---------------- 작은 카드: 2위부터 (디깅 플레이어는 누른 카드가 있는 줄 바로 아래 한 줄 전체) ---------------- */
.lx-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px; grid-auto-flow:row dense; margin-top:14px}
.lx-grid.lx-grid-mix{grid-template-columns:repeat(2,minmax(0,1fr))}
.lx-grid > .tl-dig{grid-column:1 / -1; border:1px solid var(--lx-line); border-radius:14px; overflow:hidden}
.lx-grid > .tl-dig:not(.open){border-color:transparent}
.lx-tl .tl-body .lx-grid .tl-row.lx-tile,
[data-theme="light"] .lx-tl .tl-body .lx-grid .tl-row.lx-tile{
  position:relative; display:flex; flex-direction:column; align-items:stretch; gap:0; min-width:0; min-height:0; padding:0; border:0; background:transparent !important; box-shadow:none !important;
}
.lx-tl .tl-body .lx-grid .tl-row.lx-tile::after{display:none}
.lx-tl .lx-tile > .tl-c-dj,.lx-tl .lx-tile > .tl-c-plays,.lx-tl .lx-tile > .tl-c-likes,.lx-tl .lx-tile > .tl-c-date,.lx-tl .lx-tile > .tl-c-act,
.lx-tl .lx-tile .tl-l3{display:none !important}
.lx-tl .tl-body .lx-tile > .tl-c-rank,[data-theme="light"] .lx-tl .tl-body .lx-tile > .tl-c-rank{
  display:flex !important; flex-direction:row; align-items:center; justify-content:center; position:absolute; left:6px; top:6px; z-index:2; width:auto; min-width:24px; height:24px; padding:0 6px;
  border-radius:7px; background:rgba(0,0,0,.72); color:#fff; font-size:12.5px; font-weight:900; pointer-events:none;
}
.lx-tl .lx-tile .tl-c-cover{width:100%}
.lx-tl .lx-tile .tl-cover{width:100%; height:auto; aspect-ratio:1; border-radius:10px; box-shadow:var(--lx-shadow)}
.lx-tl .lx-tile .tl-cover img{width:100%; height:100%; border-radius:10px}
.lx-tl .lx-tile .tl-cover-ic{font-size:34px}
.lx-tl .lx-tile .tl-eq{padding-bottom:16px; gap:4px} .lx-tl .lx-tile .tl-eq i{width:5px; height:26px}
.lx-tl .tl-body .lx-tile .tl-c-main{padding:7px 0 0; min-width:0}
.lx-tl .lx-tile .tl-l1{display:block}
.lx-tl .lx-tile .tl-title{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow:hidden; font-size:12.5px; font-weight:700; line-height:1.3; word-break:normal; overflow-wrap:anywhere}
.lx-tl .lx-tile .tl-pro{display:inline-block; margin-top:3px}
.lx-tl .tl-body .lx-tile .tl-l2{display:block; margin-top:2px; font-size:11.5px}
.lx-tl .lx-tile .tl-artist{display:block}
.lx-tl .tl-body .lx-tile .tl-l2 .tl-meta{display:flex; flex-wrap:wrap; gap:0 6px; max-width:100%; font-size:11.5px; white-space:normal}
.lx-tl .tl-body .lx-tile .tl-meta > span{display:none}
.lx-tl .tl-body .lx-tile .tl-meta > span::before{display:none}
.lx-tl .tl-body .lx-tile .tl-meta .tl-m-plays{display:inline-flex}
.lx-tl .tl-body .lx-tile-mix .tl-meta .tl-m-time{display:inline-flex}
.lx-tl .tl-body .lx-tile-mix .tl-meta .tl-m-time::before{display:inline-block; margin-right:4px}
/* 카드의 CUE 단추: 표지 오른쪽 위 (마우스는 올렸을 때 · 담은 곡은 늘, 손가락 기기는 늘) */
.lx-tl .lx-tile .tl-cartm{display:inline-flex !important; position:absolute; top:6px; right:6px; z-index:2; margin:0; width:32px; height:32px; font-size:20px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; backdrop-filter:blur(6px)}
.lx-tl .lx-tile .tl-cartm:hover{background:rgba(0,0,0,.78); color:#fff}
@media (hover:hover) and (pointer:fine){
  .lx-tl .lx-tile .tl-cartm{opacity:0; transition:opacity .12s}
  .lx-tl .lx-tile:hover .tl-cartm,.lx-tl .lx-tile:focus-within .tl-cartm,.lx-tl .lx-tile.is-picked .tl-cartm{opacity:1}
}
.lx-tl .lx-tile.is-open .tl-cover{box-shadow:0 0 0 2px var(--lx-ac), var(--lx-shadow)}
@container tl (min-width:560px){
  .lx-grid{grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px 12px}
  .lx-grid.lx-grid-mix{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container tl (min-width:720px){
  .lx-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 14px; margin-top:16px}
  .lx-grid.lx-grid-mix{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container tl (min-width:900px){
  .lx-grid{grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px 12px}
  .lx-grid.lx-grid-mix{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------------- 화이트 ---------------- */
[data-theme="light"] .lx,[data-theme="light"] .lx-lens{
  --lx-card:var(--lt-surface); --lx-line:var(--lt-border); --lx-fill:var(--lt-fill); --lx-pop:var(--lt-surface);
  --lx-t1:var(--lt-text); --lx-t2:var(--lt-text-2); --lx-t3:var(--lt-text-3);
  --lx-ac:var(--lt-accent); --lx-ac-t:var(--lt-accent-text);
  --lx-shadow:var(--lt-shadow-md);
}
[data-theme="light"] .lx-erab{color:hsl(var(--gh,220),72%,24%); background:hsla(var(--gh,220),var(--gs,0%),50%,.13)}
[data-theme="light"] .lx-eras span{border-bottom-color:hsl(var(--gh,220),var(--gs,0%),48%)}
[data-theme="light"] .lx-yrs a i,[data-theme="light"] .lx-dna i,[data-theme="light"] .lx-dnal span::before{background:hsl(var(--gh,220),var(--gs,0%),48%)}