/* 컴퓨터 메인 W2 (main.php .mw2) — 2026-11-07 사용자 요청: "피씨버젼만 너가 만든 시안으로" (시안 tools/mockups/main-w2.html)
   721px 이상만 보여요. 휴대폰(720px 이하)은 B '스와이프 카드'(.mm, sub/css/main_m.css, 2026-11-08)예요
   실시간 1위 크게 + TOP 2~10 · 최신 트랙 · DJ Pick · 최신 믹셋 · 클럽 (· 다가오는 페스티벌) */
.mw2{display:none; container:mw / inline-size;
  --mw-card:#141417; --mw-line:#26262b; --mw-t1:#ededed; --mw-t2:#bdbdbd; --mw-t3:#8d8d8d; --mw-ac:#ff2e63; --mw-ac-t:#ff5c85; --mw-ac-soft:rgba(255,46,99,.12);
  --mw-chip:#1c1c1f; --mw-chip-line:#2c2c31; --mw-cp:#181c23; --mw-cp-line:#2b3441; --mw-cp-t:#b7c5da; --mw-shadow:0 8px 24px rgba(0,0,0,.45);
  --mw-grad:linear-gradient(135deg,#ff2e63,#a8329e 55%,#7034d6)}
[data-theme="light"] .mw2{--mw-card:#fff; --mw-line:#dcd8d1; --mw-t1:#1d1b19; --mw-t2:#46423d; --mw-t3:#6f6a63; --mw-ac:#e0244e; --mw-ac-t:#c41d43; --mw-ac-soft:rgba(224,36,78,.08);
  --mw-chip:#f5f3ef; --mw-chip-line:#e3dfd8; --mw-cp:#f1f5fa; --mw-cp-line:#d3dce8; --mw-cp-t:#3a4a5e; --mw-shadow:0 1px 2px rgba(29,27,25,.06),0 6px 18px rgba(29,27,25,.07);
  --mw-grad:linear-gradient(135deg,#e0244e,#a8329e 55%,#7034d6)}
@media (min-width:721px){
  .mw2{display:block; padding-bottom:40px}
  /* 맨 윗줄 왼쪽 제목 '홈' (검색·아이콘은 오른쪽) */
  .va-topbar > .mw-title{flex:1 1 auto; min-width:0; margin:0; font-size:24px; font-weight:850; letter-spacing:-.6px; line-height:40px}
}
.va-topbar > .mw-title{display:none}
@media (min-width:721px){ .va-topbar > .mw-title{display:block} }

.mw2 a{color:inherit; text-decoration:none}
.mw-sec{margin-top:30px}
.mw-sec:first-child{margin-top:0}
.mw-h{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.mw-h h2{margin:0; color:var(--mw-t1); font-size:19px; font-weight:850; letter-spacing:-.4px}
.mw-sub{color:var(--mw-t3); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mw-more{margin-left:auto; flex:none; height:32px; padding:0 12px; border-radius:10px; border:1px solid var(--mw-line); background:var(--mw-card); display:inline-flex; align-items:center; color:var(--mw-t2) !important; font-size:12.5px; font-weight:700; white-space:nowrap}
.mw-more:hover{border-color:var(--mw-t3)}
.mw-dot{flex:none; width:8px; height:8px; border-radius:50%; background:#ff3b5c; animation:mw-pulse 1.8s infinite}
@keyframes mw-pulse{0%{box-shadow:0 0 0 0 rgba(255,59,92,.6)}70%{box-shadow:0 0 0 8px rgba(255,59,92,0)}100%{box-shadow:0 0 0 0 rgba(255,59,92,0)}}
.mw-chip{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:7px; background:var(--mw-chip); border:1px solid var(--mw-chip-line); color:var(--mw-t2); font-size:11.5px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.mw-chip.k[style]::before{content:""; width:7px; height:7px; border-radius:50%; background:hsl(var(--kh),62%,50%)}
.mw-chip.cp{background:var(--mw-cp); border-color:var(--mw-cp-line); color:var(--mw-cp-t)}
/* 순위 변동 알약 (tracklist.css .tl-rk와 같은 모양) */
.mw2 .tl-rk{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:18px; padding:0 6px; border-radius:9px; font-size:10.5px; font-weight:900; line-height:1}
.mw2 .tl-rk.up{color:#fff; background:linear-gradient(135deg,#ff3b5c,#ff7a45)}
.mw2 .tl-rk.down{color:#4d9bff; background:rgba(77,155,255,.14)}
[data-theme="light"] .mw2 .tl-rk.down{color:#1f6fd1; background:rgba(31,111,209,.1)}
.mw2 .tl-rk.same{color:var(--mw-t3)}
.mw2 .tl-rk.new{color:var(--mw-ac); background:none; min-width:0; padding:0; letter-spacing:.6px}   /* 2026-11-07 사용자 요청: NEW는 바탕 없이 글자만 */
.mw-pb{position:absolute; right:8px; bottom:8px; width:36px; height:36px; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; font-size:12px; box-shadow:0 4px 12px rgba(0,0,0,.28); opacity:.92; transition:transform .15s, opacity .15s}
button.mw-cv,button.mw-lcv,button.mw-feat-cv{padding:0; border:0; cursor:pointer; font:inherit}

/* ---------- 히어로: 실시간 1위 + TOP 2~10 ---------- */
.mw-hero{display:grid; grid-template-columns:1.05fr 1fr; gap:16px}
.mw-feat{position:relative; min-height:300px; border-radius:18px; overflow:hidden; display:flex; align-items:flex-end; padding:22px; color:#fff; box-shadow:var(--mw-shadow); background:#111}
.mw-feat-bg{position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(28px) saturate(1.3); transform:scale(1.1)}
.mw-feat-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.72))}
.mw-feat-in{position:relative; display:flex; gap:20px; align-items:flex-end; width:100%; min-width:0}
.mw-feat-cv{position:relative; flex:none; width:190px; height:190px; border-radius:14px; overflow:hidden; background:#222; box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mw-feat-cv img{width:100%; height:100%; object-fit:cover; display:block}
.mw-feat-tx{min-width:0}
.mw-badge{display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px; border-radius:13px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); font-size:12px; font-weight:800}
.mw-feat-t{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:10px 0 4px; color:#fff !important; font-size:24px; font-weight:850; line-height:1.2; letter-spacing:-.5px}
.mw-feat-a{opacity:.85; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mw-feat-c{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px}
.mw-feat .mw-chip{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.24); color:#fff}
.mw-play{width:46px; height:46px; border:0; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; font-size:15px; cursor:pointer; transition:transform .15s}
.mw-play:hover{transform:scale(1.06)}
.mw-top{min-width:0}
.mw-list{list-style:none; margin:0; padding:6px 8px; border-radius:18px; background:var(--mw-card); border:1px solid var(--mw-line); box-shadow:var(--mw-shadow)}
.mw-list li{display:grid; grid-template-columns:28px 40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:5px 6px; border-radius:10px}
.mw-list li:hover{background:var(--mw-ac-soft)}
.mw-list li.mw-first{display:none}   /* 1위는 큰 카드로 보여요. 좁아서 큰 카드를 숨길 때만 목록에 (아래 819px 규칙) */
.mw-rk{text-align:center; color:var(--mw-t1); font-weight:850; font-variant-numeric:tabular-nums}
.mw-rk .mw-hot{display:block; height:12px; margin-top:1px; color:#ff5a1f; line-height:0}   /* 급상승: 한 시간 사이 30계단 넘게 (2026-11-08) */
.mw-rk .mw-hot .tl-fire{width:12px; height:12px}
.mw-lcv{position:relative; width:40px; height:40px; border-radius:7px; overflow:hidden; background:var(--mw-chip)}
.mw-lcv img{width:100%; height:100%; object-fit:cover; display:block}
.mw-lcv::after{content:"▶"; position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.4); color:#fff; font-size:12px; opacity:0; transition:opacity .15s}
.mw-list li:hover .mw-lcv::after{opacity:1}
.mw-tt{display:block; min-width:0}
.mw-tt b{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--mw-t1); font-size:14px; font-weight:700}
.mw-tt span{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--mw-t3); font-size:12.5px}
a.mw-tt:hover b{color:var(--mw-ac-t)}

/* ---------- 카드 (최신 트랙 · DJ Pick) ---------- */
.mw-cards{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
.mw-card{min-width:0}
.mw-cv{position:relative; display:block; width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--mw-chip); box-shadow:var(--mw-shadow)}
.mw-cv img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s}
.mw-card:hover .mw-cv img{transform:scale(1.04)}
.mw-card:hover .mw-pb{transform:scale(1.08); opacity:1}
.mw-card .mw-tt{margin-top:8px}
.mw-cl{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.mw-gate{position:absolute; left:8px; top:8px; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:12px; background:rgba(0,0,0,.62); color:#fff; font-size:11px; font-weight:800; backdrop-filter:blur(4px)}
.mw-rkb{position:absolute; left:8px; bottom:8px; width:30px; height:30px; border-radius:9px; background:var(--mw-grad); color:#fff; display:grid; place-items:center; font-weight:900; font-size:14px}
/* DJ Pick은 8곡을 받아서, 한 줄 6칸이면 6곡, 4칸이면 8곡(두 줄), 3칸이면 6곡(두 줄)만 보여요 */
.mw-band .mw-card:nth-child(n+7){display:none}
@container mw (min-width:820px) and (max-width:1099px){ .mw-band .mw-card:nth-child(n+7){display:block} }
.mw-band{padding:18px; border-radius:18px; border:1px solid var(--mw-line); background:linear-gradient(135deg,rgba(224,36,78,.08),rgba(112,52,214,.08))}

/* ---------- 믹셋 ---------- */
.mw-mixes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.mw-mix{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center; padding:12px; border-radius:16px; background:var(--mw-card); border:1px solid var(--mw-line); box-shadow:var(--mw-shadow)}
.mw-mix .mw-cv{width:96px; height:96px; border-radius:10px}
.mw-mix .mw-pb{right:6px; bottom:6px; width:30px; height:30px; font-size:11px}
/* 오른쪽 칸 (2026-11-09 요청 28 "시간 · 장르가 가운데가 아니라 위로 붙어서"): 예전엔 칩이 .mw-tt 안에 있어서 '.mw-tt span'이 칩을 블록으로 바꿔 글자가 칩 위쪽에 붙었어요
   칩 줄은 한 줄 — 좁으면 장르 칩 글자만 줄여요(…), 시간 · 재생 · 올린 날은 그대로 */
.mw-mi{min-width:0}
.mw-mix .mw-tt{margin-top:0}
.mw-mix .mw-cl{flex-wrap:nowrap; overflow:hidden; margin-top:8px}
.mw-mix .mw-chip{flex:none}
.mw-mix .mw-chip.g{flex:0 1 auto; min-width:0}
.mw-mix .mw-chip.g i{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-style:normal}
/* 전설의 트랙 'N년 전 이맘때' 칸 (2026-11-09 요청 30 — 최신 믹셋 칸 마지막 1~2자리. 자료는 매거진 edm_lmag_main_picks, 없으면 안 나와요)
   표지 아래에 그해(Anton — 홈 머리 글꼴), 위 줄 'LEGEND · N년 전 이맘때 ›'는 매거진의 그해 칼럼으로. 믹셋과 구별되게 옅은 금빛 테두리 */
.mw-lg{border-color:rgba(190,140,50,.42); background:linear-gradient(135deg,var(--mw-card) 55%,rgba(200,150,60,.10))}
.mw-lg .mw-cv::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6)); pointer-events:none}
.mw-lgy{position:absolute; left:8px; bottom:6px; z-index:1; color:#fff; font-family:"Anton","Arial Narrow",Impact,sans-serif; font-size:24px; font-weight:400; line-height:1; letter-spacing:.5px; text-shadow:0 2px 10px rgba(0,0,0,.45)}
.mw-lg .mw-pb{z-index:2}
.mw-lgk{display:flex; align-items:center; gap:6px; max-width:100%; margin-bottom:5px; color:#a8741a !important; font-size:12px; font-weight:850; white-space:nowrap; overflow:hidden}
[data-theme="dark"] .mw-lgk{color:#e3b860 !important}
.mw-lgk em{flex:none; padding:2px 6px; border-radius:5px; background:rgba(200,150,60,.16); font-style:normal; font-size:9.5px; font-weight:900; letter-spacing:.8px}
.mw-lgk:hover{text-decoration:underline !important}

/* ---------- 클럽: 사진이 있으면 사진, 없으면 장르 색 네온 포스터 (매주 열어서 날짜는 안 써요) ---------- */
.mw-clubs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.mw-club{position:relative; display:block; aspect-ratio:4/5; border-radius:16px; overflow:hidden; color:#fff !important; background:#07070a; box-shadow:var(--mw-shadow); isolation:isolate}
.mw-club-art{position:absolute; inset:0; z-index:-1; transition:transform .5s ease;
  background:radial-gradient(120% 75% at 12% 8%, hsla(var(--h1),95%,58%,.9), transparent 60%),
             radial-gradient(110% 80% at 92% 88%, hsla(var(--h2),95%,56%,.85), transparent 58%),
             linear-gradient(160deg,#0d0d16,#050508)}
.mw-club-art::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg, transparent 5%, #000 45%, transparent 95%); mask-image:linear-gradient(180deg, transparent 5%, #000 45%, transparent 95%)}
.mw-club-art::after{content:""; position:absolute; left:50%; top:-30%; width:140%; height:120%; transform:translateX(-50%); opacity:.35; filter:blur(18px);
  background:conic-gradient(from 180deg at 50% 0%, transparent 40%, hsla(var(--h1),100%,75%,.55) 47%, transparent 50%, hsla(var(--h2),100%,75%,.5) 53%, transparent 60%)}
.mw-club img{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.mw-club:hover .mw-club-art,.mw-club:hover img{transform:scale(1.06)}
.mw-club-in{position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.7))}
.mw-club-area{display:inline-block; margin-bottom:8px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); font-size:11px; font-weight:800; letter-spacing:.2px}
.mw-club b{display:block; font-size:22px; font-weight:900; line-height:1.05; letter-spacing:-.4px; text-transform:uppercase; text-shadow:0 2px 14px rgba(0,0,0,.45); overflow-wrap:anywhere}
.mw-club small{display:block; margin-top:4px; opacity:.85; font-size:12.5px; font-weight:600}
.mw-club-g{display:block; margin-top:8px; font-size:11.5px; font-weight:700; opacity:.88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 내 주변 클럽 (2026-11-08 사용자 요청 03 "같이 바꾸기"): 거리 · 출처 링크. 단추 바탕 모양(.nc-gps)은 main_m.css
   머리 줄 (2026-11-09 요청 60 — '가 지도 보기 바로 왼쪽'): '어디 기준' 작은 글 + '⌖ 내 위치' 단추(지도 보기와 같은 모양). 예전엔 따로 한 줄(.mw-loc) */
.mw2 .nc-gps{--mm-ac:var(--mw-ac); --mm-chip:var(--mw-chip); --mm-t2:var(--mw-t2)}
.mw-nch .nc-where{flex:1 1 auto; min-width:0}
.mw-nch .nc-gps{height:32px; padding:0 12px; gap:6px; border-radius:10px; border:1px solid var(--mw-line); background:var(--mw-card); color:var(--mw-t2) !important; font-size:12.5px; font-weight:700}
.mw-nch .nc-gps svg{width:15px; height:15px; color:var(--mw-ac)}
.mw-nch .nc-gps:hover{border-color:var(--mw-t3)}
.mw-nch .nc-gps.on{background:var(--mw-ac-soft); border-color:var(--mw-ac); color:var(--mw-ac-t) !important}
.mw-nch .nc-gps.on svg{color:var(--mw-ac)}
.mw-nch .nc-gps + .mw-more{margin-left:0}
.mw-club-d{position:absolute; right:10px; top:10px; z-index:1; display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:11px; background:rgba(0,0,0,.5); color:#fff; font-size:11.5px; font-weight:800; backdrop-filter:blur(4px)}
.mw-attr{margin:8px 0 0; color:var(--mw-t3); font-size:11px}
.mw-attr a{text-decoration:underline !important}
/* 다가오는 페스티벌 (공공데이터 자동 가져오기가 채워요) */
.mw-fests{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.mw-fest{display:block; border-radius:16px; overflow:hidden; background:var(--mw-card); border:1px solid var(--mw-line); box-shadow:var(--mw-shadow)}
.mw-fest-img{position:relative; aspect-ratio:3/4; background:linear-gradient(135deg,#1b2a3a,#2d4f6b) center/cover no-repeat}
.mw-fest-d{position:absolute; left:10px; top:10px; padding:4px 9px; border-radius:9px; background:rgba(0,0,0,.65); color:#fff; font-size:12px; font-weight:800}
.mw-fest-in{padding:10px 12px}
.mw-fest-in b{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--mw-t1); font-size:14px}
.mw-fest-in span{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--mw-t3); font-size:12px}
.mw-note{margin:0; padding:14px 16px; border-radius:14px; border:1px dashed var(--mw-line); color:var(--mw-t3); font-size:13px}

/* ---------- 본문 칸 폭에 맞추기 ---------- */
@container mw (max-width:1099px){
  .mw-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mw-feat-cv{width:150px; height:150px}
  .mw-feat-t{font-size:21px}
  .mw-fests{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container mw (max-width:819px){
  .mw-hero{grid-template-columns:1fr}
  .mw-feat{display:none}   /* 2026-11-07 사용자 요청: 좁은 폭에서는 맨 위 큰 1위 카드 없이 목록만 (1위부터) */
  .mw-list li.mw-first{display:grid}
  .mw-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mw-mixes{grid-template-columns:1fr}
  .mw-clubs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mw-clubs .mw-club:nth-child(n+7){display:none}   /* 3칸이면 6곳(두 줄)만 */
}
@media (prefers-reduced-motion:reduce){ .mw-dot{animation:none} .mw-club-art,.mw-club img,.mw-cv img{transition:none} }

/* ---------- 실시간 1위 자리 DJ 라이브 영상 (2026-11-09 사용자 요청 38, 시안 tools/mockups/main-live.html의 A — inc/edm_mainlive.lib.php) ----------
   메인을 열 때마다 30%(관리자 > 환경설정 > 메인 레이아웃) 큰 1위 카드 자리에 나와요. 처음엔 그림만, 누르면 그 자리에서 유튜브(sub/js/main_m.js 2번)
   .ml-*는 휴대폰 .mm-dj(main_m.css)와 같이 써요. 영상 칸은 다크 · 화이트 모두 어두운 카드예요(큰 1위 카드와 같아요) */
.ml-media{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#000; cursor:pointer; isolation:isolate}
.ml-media > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ml-media iframe,.ml-yt{position:absolute; inset:0; z-index:5; width:100%; height:100%; border:0; display:block}
.ml-b{position:absolute; z-index:2; left:12px; top:12px; display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 9px; border-radius:12px; background:#ff0033; color:#fff; font-size:11.5px; font-weight:900; letter-spacing:.6px; line-height:1; white-space:nowrap}
.ml-b i{flex:none; width:7px; height:7px; border-radius:50%; background:#fff; animation:ml-pulse 1.6s infinite}
@keyframes ml-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.ml-dur{position:absolute; z-index:2; right:10px; bottom:10px; display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:6px; background:rgba(0,0,0,.72); color:#fff; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums}
.ml-dur[hidden]{display:none}
.ml-play{position:absolute; z-index:3; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; padding:0; border:0; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,.4); transition:transform .15s}
.ml-play svg{width:24px; height:24px; margin-left:3px}
.ml-media:hover .ml-play,.ml-play:focus-visible{transform:scale(1.07)}
.is-on .ml-media{cursor:default}
.is-on .ml-media > img,.is-on .ml-play,.is-on .ml-b,.is-on .ml-dur{display:none}
/* 터치 기기(아이폰 · 갤럭시 · 아이패드)는 유튜브 플레이어를 화면 가까이 오면 미리 걸어 둬요 (2026-11-09 요청 37, main_m.js 2번 arm)
   다 걸릴 때까지는 우리 그림(.ml-wait — 플레이어는 안 보이고 눌리지도 않아요), 다 걸리면 유튜브 화면을 바로 눌러 한 번에 재생 */
.ml-wait iframe{opacity:0; pointer-events:none}
.is-armed .ml-media{cursor:default}
.is-armed .ml-media > img,.is-armed .ml-play,.is-armed .ml-b,.is-armed .ml-dur{display:none}

.mw-dj{position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; padding:14px; border-radius:18px; overflow:hidden; color:#fff; background:#111; box-shadow:var(--mw-shadow); isolation:isolate}
.mw-dj-bg{position:absolute; inset:-30px; z-index:-1; background-size:cover; background-position:center; filter:blur(30px) saturate(1.3); transform:scale(1.1); opacity:.75}
.mw-dj-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.82))}
.mw-dj .ml-media{flex:none; max-height:400px; border-radius:12px}
.mw-dj-tx{min-width:0}
.mw-dj-t{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#fff !important; font-size:21px; font-weight:850; line-height:1.25; letter-spacing:-.3px}
a.mw-dj-t:hover{text-decoration:underline}
.mw-dj-by{margin-top:4px; color:rgba(255,255,255,.8); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mw-dj-next{margin-top:auto}
.mw-dj-nh{display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:12.5px; font-weight:800}
.mw-dj-nh span{color:rgba(255,255,255,.9)}
.mw-dj-nh a{margin-left:auto; color:rgba(255,255,255,.9) !important; white-space:nowrap}
.mw-dj-nh a:hover{color:#fff !important; text-decoration:underline}
.mw-dj-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.mw-dj-pk{display:block; min-width:0; padding:0; border:0; background:none; color:#fff; text-align:left; cursor:pointer; font:inherit}
.mw-dj-th{position:relative; display:block; aspect-ratio:16/9; max-height:96px; border-radius:9px; overflow:hidden; background:#000}
.mw-dj-th img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s}
.mw-dj-pk:hover .mw-dj-th img{transform:scale(1.05)}
.mw-dj-th i{position:absolute; right:5px; bottom:5px; padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.72); color:#fff; font-size:10.5px; font-style:normal; font-weight:800; font-variant-numeric:tabular-nums}
.mw-dj-pk b{display:block; margin-top:5px; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:rgba(255,255,255,.9)}
/* 영상만 (2026-11-10 작업 05 A-1 "라이브 더 보기가 나오더라고 그냥 영상만 바로 나오게"): '다른 DJ 라이브' · '라이브 더 보기' 줄을 뺀 카드(edm_ml_pc)
   카드가 옆 목록보다 짧으면 영상 · 제목을 세로 가운데로(위아래는 흐린 영상 그림 바탕) */
.mw-dj-solo{justify-content:center}
/* 영상 카드가 목록보다 길면(넓은 창) 목록 줄을 고르게 벌려 같은 높이로 */
.mw-has-dj .mw-top{display:flex; flex-direction:column}
.mw-has-dj .mw-list{flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-around}
/* 좁은 폭(본문 820px 아래)은 큰 1위 카드가 없어서, 영상 카드가 목록 위에 가로로 (영상 왼쪽 · 제목 오른쪽) */
@container mw (max-width:819px){
  .mw-dj{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:auto 1fr; gap:10px 16px; align-items:start}
  .mw-dj .ml-media{grid-row:1 / span 2}
  .mw-dj-tx{padding-top:2px}
  .mw-dj-t{-webkit-line-clamp:3; font-size:18px}
  .mw-dj-next{margin:0; align-self:end}
  .mw-dj-nh{margin:0}
  .mw-dj-nh span,.mw-dj-row{display:none}
  /* 영상만(A-1): 오른쪽 아래 '라이브 더 보기'가 없어서 제목을 영상 높이 가운데로 */
  .mw-dj-solo{grid-template-rows:auto; align-items:center}
  .mw-dj-solo .ml-media{grid-row:1}
}
@media (prefers-reduced-motion:reduce){ .ml-b i{animation:none} .mw-dj-th img{transition:none} }