/* DJ Pick 매거진 (sub/weekly_pick.php, 2026-11-07 사용자 요청 · 시안 tools/mockups/djpick-magazine.html)
   보기: .wp-v-mag(매거진) · .wp-v-list(목록 = 다른 곡 목록과 같은 표). 색은 다크가 기본이고 화이트는 [data-theme="light"] */
.wp-page{
  --m-surface:#161616; --m-fill:#1c1c1c; --m-line:#2a2a2a; --m-line2:#202020; --m-subtle:#121212;
  --m-text:#ededed; --m-text2:#bdbdbd; --m-text3:#8d8d8d; --m-text4:#5c5c5c;
  --m-accent:#ff0050; --m-accent-text:#ff3d74; --m-up:#22c55e; --m-gl:62%; --m-gbg:.16;
  --m-shadow:0 14px 36px rgba(0,0,0,.6); --m-shadow-sm:0 4px 14px rgba(0,0,0,.4);
  --m-num:"Anton","Arial Narrow",Impact,"Segoe UI",sans-serif;
}
[data-theme="light"] .wp-page{
  --m-surface:#fff; --m-fill:#f0eeea; --m-line:#dcd8d1; --m-line2:#e8e5e0; --m-subtle:#f7f6f3;
  --m-text:#1d1b19; --m-text2:#46423d; --m-text3:#6f6a63; --m-text4:#a39e97;
  --m-accent:#e0244e; --m-accent-text:#c81d43; --m-up:#15803d; --m-gl:42%; --m-gbg:.12;
  --m-shadow:0 14px 36px rgba(40,35,30,.14); --m-shadow-sm:0 4px 14px rgba(40,35,30,.08);
}
.wp-page [hidden]{display:none !important}
.wp-v-mag .wp-list,.wp-v-list .wp-mag{display:none}
.wp-m10{display:none}  /* 휴대폰 1~10 (720px 이하에서만, 아래 휴대폰 칸) */

/* 머리 */
.wp-head{display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin:6px 0 14px}
/* 첫 줄 = 제목 · 오른쪽 묶음(보기 · 공유 · 디깅 모드 · 탭), 둘째 줄 왼쪽 = 이번 주 · 달 고르기 (2026-11-08 사용자 요청).
   탭을 바꿔도 오른쪽 묶음은 같은 자리예요. 좁은 컴퓨터 창은 제목 옆 작은 글(World Free-Download Chart)과 디깅 모드 글자를 줄여 첫 줄에 맞춰요 */
.wp-mast{display:flex; align-items:baseline; gap:12px; margin-right:auto}
.wp-hr{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; margin-left:auto}
.wp-head > .wp-sel{flex-basis:100%; margin-top:-2px}
@media (max-width:1279px){ .wp-kick{display:none} }
@media (min-width:721px) and (max-width:1099px){
  .wp-head .tl-pcmode{width:38px; height:38px; padding:0; justify-content:center; gap:0; border-radius:11px}
  .wp-head .tl-pcmode span{display:none}
  .wp-head .tl-pcmode .tl-led{position:absolute; top:6px; right:6px}
}
.wp-mast h1{margin:0; font:400 44px/1 var(--m-num); letter-spacing:.5px; text-transform:uppercase; color:var(--m-text)}
.wp-mast h1 em{font-style:normal; color:var(--m-accent)}
.wp-kick{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--m-text3)}
.wp-seg{display:inline-flex; padding:3px; border-radius:12px; background:var(--m-fill); border:1px solid var(--m-line)}
.wp-seg a,.wp-seg button{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border:0; border-radius:9px; background:transparent; font:inherit; font-size:14px; font-weight:800; color:var(--m-text3); text-decoration:none; cursor:pointer}
.wp-seg svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.wp-seg .on,.wp-v-mag .wp-head [data-wp-view="mag"],.wp-v-list .wp-head [data-wp-view="list"]{background:var(--m-surface); color:var(--m-text); box-shadow:var(--m-shadow-sm)}
.wp-ib{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; border:1px solid var(--m-line); background:transparent; color:var(--m-text2); text-decoration:none; cursor:pointer; position:relative}
.wp-ib.is-off{opacity:.35; cursor:default}
.wp-share.is-done::after{content:attr(data-tip); position:absolute; right:0; top:calc(100% + 6px); z-index:5; padding:5px 9px; border-radius:7px; white-space:nowrap; background:var(--m-text); color:var(--m-surface); font-size:12px; font-weight:700}
.wp-sel{display:inline-flex; align-items:center; gap:6px}
.wp-month{position:relative; display:inline-flex; align-items:center}
.wp-month select{-webkit-appearance:none; appearance:none; height:38px; padding:0 32px 0 14px; border-radius:11px; border:1px solid var(--m-line); background:transparent; color:var(--m-text); font:inherit; font-size:14px; font-weight:800; cursor:pointer}
.wp-month select option{color:#111; background:#fff}
.wp-month .tl-svg{position:absolute; right:11px; pointer-events:none; font-size:11px; color:var(--m-text3)}
.wp-period{flex-basis:100%; margin:0; color:var(--m-text3); font-size:13px}
.wp-adm{display:inline-block; margin-right:6px; padding:1px 7px; border-radius:6px; background:var(--m-text); color:var(--m-surface); font-size:11px; font-weight:800; vertical-align:1px}

/* 장르 칸: 컴퓨터는 칸 수와 상관없이 늘 한 줄 */
.wp-gbar{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(min-content,1fr); gap:8px; margin:0 0 28px}
.wp-gi{flex:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.wp-gi .f{fill:currentColor; stroke:none}
.wp-g,.wp-gc{--gc:hsl(var(--gh),var(--gs,70%),var(--m-gl))}
.wp-g{position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:84px; padding:8px 4px; border-radius:14px;
  border:1px solid var(--m-line); background:var(--m-surface); color:var(--m-text2); font-size:12.5px; font-weight:800; text-align:center; line-height:1.15; text-decoration:none; transition:.15s}
.wp-g .wp-gi{color:var(--gc)}
.wp-g span{max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all} /* 긴 이름(Dance & EDM · Drum & Bass)은 두 줄로, 잘리지 않게 칸 높이를 늘려요 (2026-11-08) */
.wp-g small{font-size:11px; font-weight:700; color:var(--m-text4)}
.wp-g:hover{border-color:var(--gc); color:var(--m-text)}
.wp-g.on{border-color:var(--gc); box-shadow:inset 0 0 0 1px var(--gc); background:hsla(var(--gh),var(--gs,70%),55%,var(--m-gbg)); color:var(--m-text)}
/* 장르 고르기 A (2026-11-08 사용자: "하우스를 누르고 덥스텝만 보려고 … 헷갈려", 시안 tools/mockups/genre-pick.html, 곡 목록 tracklist.css '장르 고르기 A'와 같아요):
   칸 = 그 장르만, 모서리 ＋ = 더하기(마우스를 올리면 · 하나라도 고르면 늘 보여요), ✕ = 빼기(둘 넘게 골랐을 때, 하나만이면 ✓). 칸 색(--gh · --gs)은 감싼 칸(.wp-gw)에 있어요 */
.wp-gw{--gc:hsl(var(--gh),var(--gs,70%),var(--m-gl)); position:relative; display:flex; min-width:0}
.wp-gw > .wp-g{flex:1 1 auto; min-width:0}
.wp-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)}
.wp-g-ok,.wp-g-rm{background:var(--gc); color:#fff}
.wp-g-rm:hover{filter:brightness(1.15)}
.wp-g-add{background:var(--m-surface); border:1px solid var(--m-line); color:var(--m-text2); opacity:0; transform:scale(.8); transition:opacity .15s, transform .15s, background-color .15s, color .15s}
.wp-gw:hover .wp-g-add,.wp-g-add:focus-visible{opacity:1; transform:none}
.wp-gbar.has-sel .wp-g-add{opacity:.85; transform:none}
.wp-g-add:hover{background:var(--gc); border-color:var(--gc); color:#fff; opacity:1}
/* 지금 고른 장르 줄 */
.wp-gsel{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:-16px 0 24px; font-size:13px; color:var(--m-text2)}
.wp-gsel-c{--gc:hsl(var(--gh),var(--gs,70%),var(--m-gl)); 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),var(--gs,70%),55%,var(--m-gbg)); color:var(--m-text); font-weight:800; font-size:12.5px}
.wp-gsel-c .wp-gi{width:15px; height:15px; color:var(--gc)}
.wp-gsel-c a{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:var(--m-text3); text-decoration:none; font-size:11px}
.wp-gsel-c a:hover{background:var(--m-fill); color:var(--m-text)}
.wp-gsel-p{font-style:normal; color:var(--m-text3); font-weight:800}
.wp-gsel-all{color:var(--m-accent-text); font-weight:800; text-decoration:none; padding:0 4px}
.wp-gsel-all:hover{text-decoration:underline}
.wp-gsel-hint{color:var(--m-text3); font-size:12px}
/* 좁은 컴퓨터 창: 칸이 다 같은 폭이라 Dubstep · Electronic이 잘렸어요(2026-11-08 메인 확인) → 칸은 이름이 들어갈 만큼은 넓게(.wp-gbar의 min-content),
   남는 폭은 똑같이 나눠요. 넓은 창은 예전처럼 모두 같은 폭. 태블릿 폭(721~1023px)은 글자 · 사이를 조금 줄여 한 줄에 들어가게 */
@media (min-width:721px) and (max-width:1279px){
  .wp-gbar{gap:6px}
  .wp-g{padding:8px 3px}
}
@media (min-width:721px) and (max-width:1023px){
  .wp-g{font-size:11px}
}

/* 곡마다: 장르 · BPM · 키 · 근거 숫자 · 담기 · 받기 */
.wp-gc{display:inline-flex; align-items:center; gap:5px; min-width:0; padding:2px 8px 2px 7px; border-radius:7px; font-size:11.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:hsla(var(--gh),var(--gs,70%),55%,var(--m-gbg)); color:var(--gc)}
.wp-gc .wp-gi{width:15px; height:15px; stroke-width:2.1}
.wp-dj{display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:7px; background:var(--m-fill); border:1px solid var(--m-line2); color:var(--m-text2); font-size:11.5px; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums}
.wp-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0}
.wp-ev{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:800; color:var(--m-up); font-variant-numeric:tabular-nums; white-space:nowrap}
.wp-ev .tl-svg{width:11px; height:11px; font-size:11px}
.wp-ev i{font-style:normal}
.wp-evr{display:flex; flex-wrap:wrap; gap:4px 12px}
.wp-acts{display:inline-flex; gap:6px; margin-left:auto; flex:none}
.wp-act{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; min-width:34px; padding:0; border-radius:10px; border:1.5px solid var(--m-line); background:var(--m-surface); color:var(--m-text2);
  font:inherit; font-size:13px; font-weight:800; text-decoration:none; cursor:pointer; transition:.15s}
.wp-act .tl-svg{font-size:13px}
.wp-act.lab{padding:0 12px}
.wp-act.sm{height:30px; min-width:30px; border-radius:9px}
.wp-act.cart:hover{border-color:var(--m-accent); color:var(--m-accent-text)}
.wp-act.cart.on{background:var(--m-accent); border-color:var(--m-accent); color:#fff}
.wp-act.get{color:var(--m-up); border-color:currentColor}
.wp-act.get:hover{background:var(--m-up); color:#fff}
.wp-ovr{font-size:11.5px; font-weight:700; color:var(--m-text3)}
.wp-rev{display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px; background:#8b5cf6; color:#fff; font-size:10.5px; font-weight:800; vertical-align:1px}
.wp-mv{display:inline-block; margin-left:6px; font-size:11px; font-weight:800; color:var(--m-text3)}

/* 구간 머리 */
.wp-sec{margin:0 0 40px}
.wp-sec-h{display:flex; align-items:flex-end; gap:14px; margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--m-text)}
.wp-sec-h .n{font:400 40px/.9 var(--m-num); letter-spacing:.5px; color:var(--m-text)}
.wp-sec-h .n em{font-style:normal; color:var(--m-accent)}
.wp-sec-h p{margin:0 0 3px; color:var(--m-text3); font-size:13px}

/* 1위 표지 */
.wp-cover{position:relative; overflow:hidden; border-radius:26px; color:#fff; background:#111; box-shadow:var(--m-shadow); isolation:isolate}
.wp-cover-bg{position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(38px) saturate(1.4); transform:scale(1.1); z-index:-2; opacity:.9}
.wp-cover::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.2) 100%)}
.wp-cover-in{display:grid; grid-template-columns:340px minmax(0,1fr); gap:34px; align-items:center; padding:34px}
.wp-cover-art{position:relative; margin:0; aspect-ratio:1; border-radius:18px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.5)}
.wp-cover-art img{width:100%; height:100%; object-fit:cover; display:block}
.wp-play{position:absolute; right:14px; bottom:14px; width:58px; height:58px; border-radius:50%; border:0; background:var(--m-accent); color:#fff; font-size:20px; box-shadow:0 8px 24px rgba(0,0,0,.4); display:grid; place-items:center; cursor:pointer}
.wp-cover-big{position:absolute; right:22px; top:-28px; font:400 300px/1 var(--m-num); color:rgba(255,255,255,.09); pointer-events:none; z-index:0}
.wp-cover-text{position:relative; z-index:1; min-width:0}
.wp-ck{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75)}
.wp-ck .no{font:400 22px/1 var(--m-num); letter-spacing:.5px; color:#fff; background:var(--m-accent); padding:5px 10px 3px; border-radius:8px}
.wp-cover h2{margin:0; font-size:44px; line-height:1.04; font-weight:900; letter-spacing:-.02em; word-break:keep-all; color:#fff}
.wp-cover h2 small{display:block; margin-top:6px; font-size:22px; font-weight:700; color:rgba(255,255,255,.8)}
.wp-cover .by{margin:12px 0 0; font-size:17px; font-weight:700; color:rgba(255,255,255,.85)}
.wp-cover .wp-meta{margin-top:14px; font-size:13px; color:rgba(255,255,255,.7)}
.wp-cover .wp-gc{background:rgba(255,255,255,.14); color:#fff}
.wp-cover .wp-dj{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); color:#fff}
.wp-stats{display:flex; gap:30px; margin:24px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.18)}
.wp-stats b{display:block; font:400 40px/1 var(--m-num); letter-spacing:.5px; color:#7ef0a4}
.wp-stats span{font-size:12px; font-weight:700; color:rgba(255,255,255,.65)}
.wp-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.wp-btn{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:12px; border:0; font:inherit; font-size:14px; font-weight:800; text-decoration:none; cursor:pointer}
.wp-btn.p{background:#fff; color:#111}
.wp-btn.d{background:#22c55e; color:#06240f}
.wp-btn.c,.wp-btn.s{background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.wp-btn.c.on{background:var(--m-accent); box-shadow:none}
.wp-why{margin-top:14px; font-size:12px; color:rgba(255,255,255,.6)}

/* 2~5위 큰 카드 */
.wp-feat{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px}
.wp-fc{display:grid; grid-template-columns:64px 128px minmax(0,1fr); gap:16px; align-items:center; padding:16px 18px 16px 8px; border-radius:20px; background:var(--m-surface); border:1px solid var(--m-line2); box-shadow:var(--m-shadow-sm)}
.wp-fc .rk{font:400 64px/1 var(--m-num); text-align:center; color:var(--m-text)}
.wp-fc .rk.r2{color:#8a8f98} .wp-fc .rk.r3{color:#b07a4b}
.wp-fc .art,.wp-vc .art,.wp-tile .art{position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--m-fill)}
.wp-fc .art img,.wp-vc .art img,.wp-tile .art img{width:100%; height:100%; object-fit:cover; display:block}
.wp-mini{position:absolute; right:8px; bottom:8px; width:36px; height:36px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center; font-size:13px; opacity:0; transition:.15s; cursor:pointer}
.wp-fc:hover .wp-mini,.wp-vc:hover .wp-mini,.wp-tile:hover .wp-mini{opacity:1}
.wp-fc .body{min-width:0}
.wp-fc h3{margin:0; font-size:18px; line-height:1.2; font-weight:900; color:var(--m-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all}
.wp-fc .by,.wp-vc .by,.wp-tile .by{margin:5px 0 8px; font-size:13px; font-weight:700; color:var(--m-text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wp-fc .wp-evr{margin-top:12px}

/* 6~10위 세로 카드 */
.wp-five{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:16px}
.wp-vc{min-width:0}
.wp-vc .art{border-radius:16px; box-shadow:var(--m-shadow-sm)}
.wp-vc .badge{position:absolute; left:10px; bottom:6px; font:400 52px/1 var(--m-num); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55)}
.wp-vc h4{margin:10px 0 0; font-size:14.5px; line-height:1.25; font-weight:900; color:var(--m-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all}
.wp-foot{display:flex; align-items:center; gap:8px; margin-top:8px}
.wp-vc .wp-evr{gap:2px 8px}

/* 11~30위 격자 */
.wp-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px 16px}
.wp-tile{min-width:0}
.wp-tile .rk{position:absolute; left:0; top:0; min-width:38px; padding:6px 8px 4px; border-bottom-right-radius:12px; background:var(--m-surface); font:400 22px/1 var(--m-num); color:var(--m-text); text-align:center}
.wp-tile h5{margin:9px 0 0; font-size:13.5px; line-height:1.25; font-weight:800; color:var(--m-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* 31~50위 두 칸 목록 */
.wp-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px}
.wp-li{display:grid; grid-template-columns:30px 44px minmax(0,1fr) auto auto auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--m-line2)}
.wp-li .rk{font:400 22px/1 var(--m-num); text-align:right; color:var(--m-text2)}
.wp-li img{width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--m-fill); cursor:pointer}
.wp-li .m{min-width:0}
.wp-li .t{font-size:14px; font-weight:800; color:var(--m-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wp-li .s{display:flex; align-items:center; gap:6px; margin-top:3px; font-size:12px; color:var(--m-text3); min-width:0}
.wp-li .s > span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.wp-li .s .wp-gc,.wp-li .s .wp-dj{flex:none}
.wp-li .wp-acts{margin-left:0}
.wp-li .date{font-size:12px; color:var(--m-text3); font-variant-numeric:tabular-nums}
/* 매거진 안 디깅 플레이어 (2026-11-08 사용자: "목록으로 변하지 않고 매거진 자체에서도 플레이어가"). 곡 목록 표(tracklist.js)가 만든
   디깅 플레이어(.tl-dig)를 sub/js/weekly_pick.js가 이 칸(.tl.wp-np)으로 옮겨 와요. .tl을 붙여서 곡 목록과 같은 폭 규칙(@container tl)으로 그려져요.
   자리는 누른 곡이 있는 줄 바로 아래예요(위 뿔이 그 곡을 가리켜요) — 사용자가 시안 A · B 중 A를 골랐어요 */
.wp-np{grid-column:1 / -1; position:relative; margin:14px 0 4px; color:var(--m-text); transition:opacity .2s}
.wp-np-in{border-radius:18px; background:var(--tl-dig); border:1px solid var(--m-line); box-shadow:var(--m-shadow-sm)}
.wp-np.is-closing{opacity:0}
.wp-np .tl-dig,.wp-np .tl-dig.active-row{background:transparent; box-shadow:none; border-radius:0 0 18px 18px}
.wp-np .tl-dig-box{padding-left:16px; padding-right:16px}
.wp-np-hd{display:flex; align-items:center; gap:10px; min-width:0; padding:10px 8px 2px 16px}
.wp-np-rk{flex:none; min-width:22px; font:400 24px/1 var(--m-num); color:var(--m-accent)}
.wp-np-t{display:flex; align-items:baseline; gap:10px; min-width:0; flex:1 1 auto}
.wp-np-t b{min-width:0; font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wp-np-t span{flex:0 1 auto; max-width:40%; font-size:13px; font-weight:700; color:var(--m-text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wp-np-x{flex:none; width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:var(--m-text3); cursor:pointer}
.wp-np-x svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.wp-np-x:hover{background:var(--m-fill); color:var(--m-text)}
.wp-np::before{content:""; position:absolute; top:-8px; left:var(--np-x,50%); width:14px; height:14px; margin-left:-7px; background:var(--tl-dig); border-left:1px solid var(--m-line); border-top:1px solid var(--m-line); transform:rotate(45deg)}
.wp-cover + .wp-np{margin-top:18px}
/* 지금 듣는 곡에 불 (목록 표의 .active와 같은 뜻) */
.wp-now .art,.wp-cover.wp-now .wp-cover-art{box-shadow:0 0 0 3px var(--m-accent), var(--m-shadow-sm)}
.wp-fc.wp-now{border-color:var(--m-accent)}
.wp-now .wp-mini{opacity:1; background:var(--m-accent)}
.wp-li.wp-now{background:var(--m-fill); border-radius:10px}
.wp-li.wp-now .rk{color:var(--m-accent)}
.wp-li.wp-now img{box-shadow:0 0 0 2px var(--m-accent)}
@media (max-width:720px){
  .wp-np-in{border-radius:16px}
  .wp-np-hd{padding:8px 4px 0 12px; gap:8px}
  .wp-np-t span{display:none}  /* 휴대폰은 제목만 */
  .wp-np .tl-dig-box{padding-left:10px; padding-right:10px}
}
/* 디깅 모드 단추: 컴퓨터는 글자 단추(.tl-pcmode, tracklist.css), 휴대폰은 둥근 아이콘 */
@media (min-width:721px){ .wp-head .tl-mic-mode{display:none} }

.wp-to-list{display:flex; justify-content:center}
.wp-to-list button{height:44px; padding:0 22px; border-radius:12px; border:1px solid var(--m-line); background:var(--m-surface); color:var(--m-text); font:inherit; font-weight:800; cursor:pointer}
.wp-how{margin:24px 0 12px}

/* 담은 곡 줄 */
.wp-bag{position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:12px; padding:10px 12px 10px 16px; border-radius:16px;
  background:var(--m-text); color:var(--m-surface); box-shadow:var(--m-shadow); font-size:14px; font-weight:700; white-space:nowrap}
.wp-bag .tl-svg{color:var(--m-accent)}
.wp-bag a{display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:11px; background:var(--m-accent); color:#fff; font-weight:800; text-decoration:none}

@media (max-width:1100px){
  .wp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wp-cover-in{grid-template-columns:280px minmax(0,1fr)} .wp-cover h2{font-size:36px}
  .wp-fc{grid-template-columns:52px 104px minmax(0,1fr)} .wp-fc .rk{font-size:52px}
  .wp-g{font-size:11.5px; min-height:78px} .wp-g .wp-gi{width:22px; height:22px}
}
@media (max-width:900px){
  .wp-feat{grid-template-columns:minmax(0,1fr)}
  .wp-five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wp-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  /* 머리 2줄 (2026-11-08 사용자 요청 04 "위에 칸들이 많아서 1-10위가 한눈에 안보여서 죽는 느낌", 시안 tools/mockups/djpick-mobile.html):
     첫 줄 = 제목 · 탭, 둘째 줄 = 이번 주 · 달 고르기(왼쪽) · 보기 · 공유 · 디깅 모드(오른쪽). 예전엔 3줄(제목 / 보기 · 탭 / 고르기)이었어요.
     보기는 아이콘 하나 — 매거진이면 목록 아이콘, 목록이면 매거진 아이콘(누르면 그 보기로) */
  .wp-mast h1{font-size:30px} .wp-kick{display:none}
  .wp-head{gap:0 8px; margin:2px 0 12px}
  .wp-hr{display:contents}
  .wp-mast{order:1}
  .wp-tabs{order:2; margin-left:auto}
  .wp-head::before{content:""; order:3; flex-basis:100%; height:0}  /* 줄 바꿈 (줄 사이는 아래 margin-top 10px) */
  .wp-head > .wp-sel{order:4; flex:1 1 0; min-width:0; max-width:300px; margin-right:auto; gap:4px}  /* 바탕 폭 0에서 늘어나요 — 고르기 칸이 길어도 아이콘이 다음 줄로 밀리지 않게 */
  .wp-head .wp-seg[role="group"]{order:5; margin-left:auto}
  .wp-share{order:6}
  .wp-head .tl-mic-mode{order:7}
  .wp-head > .wp-sel,.wp-head .wp-seg[role="group"],.wp-head .wp-share,.wp-head .tl-mic-mode{margin-top:10px}
  .wp-period{order:8; margin-top:8px}
  .wp-head .wp-tabs a{height:30px; padding:0 10px; font-size:13px}
  .wp-head .wp-seg[role="group"]{padding:0; border:0; background:none}
  .wp-head .wp-seg[role="group"] button{width:34px; height:34px; padding:0; justify-content:center; border:1px solid var(--m-line); border-radius:10px; background:transparent; color:var(--m-text2); box-shadow:none}
  .wp-head .wp-seg[role="group"] button span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .wp-v-mag .wp-head [data-wp-view="mag"],.wp-v-list .wp-head [data-wp-view="list"]{display:none}
  .wp-head .wp-ib{width:34px; height:34px; border-radius:10px}
  .wp-head .wp-sel .wp-ib{flex:none}
  .wp-head .wp-month{min-width:0; flex:1 1 auto}
  .wp-head .wp-month select{width:100%; min-width:0; height:34px; padding:0 28px 0 12px; border-radius:10px; font-size:13.5px; text-overflow:ellipsis}
  .wp-head .wp-month .tl-svg{right:10px}
  .wp-gbar{display:flex; overflow-x:auto; gap:8px; margin:0 -10px 14px; padding:0 10px; scrollbar-width:none}  /* 휴대폰 옆 여백(.va-main 10px)만큼만 튀어나와요 — 예전 16px은 페이지가 옆으로 6px 밀렸어요 (2026-11-08) */
  .wp-gbar::-webkit-scrollbar{display:none}
  .wp-g{flex:none; flex-direction:row; height:38px; min-height:0; padding:0 13px; border-radius:12px; font-size:13px} .wp-g span{display:block; white-space:nowrap}
  /* 장르 고르기 A: 칩 줄은 옆으로 미는 칸이라 모서리 밖이 잘려요 → 표시는 칩 안 오른쪽 끝, ＋는 장르를 하나 고른 뒤에만 (곡 목록과 같아요) */
  .wp-gw{flex:none}
  .wp-g-b{top:50%; right:6px; transform:translateY(-50%); width:22px; height:22px; box-shadow:none}
  .wp-gw:not(.wp-gw-all) > .wp-g{padding-right:34px}
  .wp-gbar:not(.has-sel) .wp-g-add{display:none}
  .wp-gbar:not(.has-sel) .wp-gw > .wp-g{padding-right:13px}
  .wp-gbar.has-sel .wp-g-add,.wp-gw:hover .wp-g-add{opacity:1; transform:translateY(-50%)}
  .wp-gsel{margin:-4px 0 14px}
  .wp-g .wp-gi{width:18px; height:18px}
  .wp-sec{margin:0 0 22px}
  .wp-sec-h{gap:10px; margin:0 0 10px; padding-bottom:6px}
  .wp-sec-h .n{font-size:28px} .wp-sec-h p{min-width:0; margin-bottom:2px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* 좁은 화면도 문구를 보여요 (2026-11-08) */

  /* 1~10은 휴대폰 칸(.wp-m10)으로 — 시안 B: 1~3위 시상대(2 · 1 · 3) + 4~7위 줄, 8~10위 세 칸 똑같이, 근처 클럽 3곳 */
  .wp-sec-top{display:none}
  .wp-m10{display:block}
  .wp-pod,.wp-trio,.wp-clubs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
  .wp-pod{margin-bottom:8px}
  .wp-pod > .wp-pc{grid-row:1}
  .wp-pod > .r2{grid-column:1} .wp-pod > .r1{grid-column:2} .wp-pod > .r3{grid-column:3}
  .wp-pc{position:relative; display:flex; flex-direction:column; gap:5px; min-width:0; padding:5px; border-radius:15px; background:var(--m-surface); border:1px solid var(--m-line2); container:wppc / inline-size}
  .wp-pc.r1{border-color:var(--m-accent); box-shadow:inset 0 0 0 1px var(--m-accent)}
  .wp-pc .art,.wp-row .art{position:relative; overflow:hidden; background:var(--m-fill)}
  .wp-pc .art{aspect-ratio:1; border-radius:11px}
  .wp-pc .art img,.wp-row .art img{width:100%; height:100%; object-fit:cover; display:block}
  .wp-pc .art img{cursor:pointer}
  .wp-pc .badge{position:absolute; left:7px; top:4px; font:400 30px/1 var(--m-num); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6); pointer-events:none}
  .wp-pc .mvs{position:absolute; right:5px; top:5px; display:flex; gap:3px; pointer-events:none}
  .wp-pc .mvs > span{margin:0; padding:1px 5px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; font-size:10px; line-height:1.4}
  .wp-pc .mvs > .wp-rev{background:#8b5cf6}
  .wp-pc .wp-mini,.wp-tile .wp-mini{opacity:1; right:6px; bottom:6px; width:30px; height:30px; background:rgba(0,0,0,.55); font-size:12px}
  .wp-pc h4{margin:1px 0 0; font-size:12.5px; line-height:1.22; font-weight:900; color:var(--m-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; overflow-wrap:anywhere; min-height:2.44em; cursor:pointer}
  .wp-pc .wp-meta{flex-wrap:nowrap; overflow:hidden}
  .wp-pc .wp-gc{max-width:100%; font-size:11px; padding:2px 6px 2px 5px}
  .wp-pc .wp-gc .wp-gi{width:13px; height:13px}
  .wp-pc .wp-foot{gap:4px; margin-top:auto; padding-top:1px}
  .wp-pc .wp-foot .wp-ev{min-width:0; overflow:hidden; font-size:11.5px}
  .wp-pc .wp-act.sm{width:28px; min-width:28px; height:28px; border-radius:8px}
  .wp-pc .wp-acts{gap:4px}
  @container wppc (max-width:96px){ .wp-foot .wp-ev{display:none} }  /* 좁은 폰: 담기 · 받기만 (근거 숫자는 목록 · 디깅 플레이어에) */
  .wp-pc.wp-now{border-color:var(--m-accent)}
  /* 4~7위 줄: 순위 · 표지 · 제목/아티스트 · 근거 · 장르/BPM · 키 · 담기/받기(가운데 줄) */
  .wp-rows{display:grid; grid-template-columns:minmax(0,1fr); gap:7px}
  .wp-row{display:grid; grid-template-columns:28px 56px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 8px 8px 2px; border-radius:14px; background:var(--m-surface); border:1px solid var(--m-line2)}
  .wp-row .rk{min-width:0; text-align:center}
  .wp-row .rk b{display:block; font:400 24px/1 var(--m-num); color:var(--m-text)}
  .wp-row .rk > span{display:block; margin:3px 0 0; padding:0; font-size:10px; white-space:nowrap}
  .wp-row .rk > .wp-rev{padding:0 3px}
  .wp-row .art{width:56px; height:56px; border-radius:10px}
  .wp-row .wp-mini{top:0; left:0; right:0; bottom:0; width:auto; height:auto; border-radius:0; background:transparent; color:transparent; opacity:1}  /* 표지 전체가 재생 단추, 듣는 중이면 멈춤 그림 */
  .wp-row.wp-now .wp-mini{background:rgba(0,0,0,.45); color:#fff}
  .wp-row .m{min-width:0}
  .wp-row h5{margin:0; font-size:13.5px; line-height:1.25; font-weight:900; color:var(--m-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
  .wp-row .by{display:flex; align-items:center; gap:8px; min-width:0; margin:2px 0 4px; font-size:12px; font-weight:700; color:var(--m-text3)}
  .wp-row .by > span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .wp-row .by .wp-ev{flex:none; font-size:11.5px}
  .wp-row .wp-meta{gap:6px; height:22px; overflow:hidden}  /* 한 줄: 안 들어가는 칸은 다음 줄로 밀려 숨어요(잘린 글자 없이) */
  .wp-row .wp-acts{margin-left:0}
  .wp-row.wp-now{border-color:var(--m-accent)}
  .wp-djt{display:inline-flex; align-items:center; height:22px; font-size:11px; font-weight:800; color:var(--m-text3); white-space:nowrap; font-variant-numeric:tabular-nums}
  /* 근처 클럽 3곳 (모바일 메인 세션의 '근처 클럽'과 같은 자료): 네온 포스터. 화이트 모드의 [data-theme="light"] a 글자색을 이기게 .wp-page를 붙여요 */
  .wp-near-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px}
  .wp-near-h b{font-size:15px; font-weight:900; color:var(--m-text)}
  .wp-page .wp-near-h a{font-size:12px; font-weight:800; color:var(--m-accent-text); text-decoration:none; white-space:nowrap}
  .wp-page .wp-club{position:relative; min-width:0; min-height:128px; padding:10px; border-radius:15px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:hidden; isolation:isolate; text-decoration:none;
    background:radial-gradient(120% 90% at 20% 0%,hsla(var(--h1),90%,55%,.9),transparent 60%),radial-gradient(120% 90% at 100% 100%,hsla(var(--h2),90%,50%,.85),transparent 60%),#0b0b10}
  .wp-club b{font:400 20px/1.02 var(--m-num); letter-spacing:.4px; text-transform:uppercase; overflow-wrap:anywhere; text-shadow:0 0 12px hsla(var(--h1),100%,70%,.9)}
  .wp-club span{margin-top:4px; font-size:11px; font-weight:700; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .wp-club em{position:absolute; top:8px; left:10px; right:10px; font-style:normal; font-size:10.5px; font-weight:800; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .wp-club .ph{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-2}  /* 클럽 글에 사진이 있으면 사진 포스터 (메인과 같아요) */
  .wp-club.has-ph::before{content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.78) 100%)}
  .wp-near-src{margin:6px 0 0; text-align:right; font-size:10.5px}
  .wp-page .wp-near-src a{color:var(--m-text4); text-decoration:none}

  .wp-act.lab{padding:0; width:34px} .wp-act.lab span{display:none}
  /* 11~30위 두 칸: 칸 높이를 맞추고 담기 · 받기 줄은 칸 맨 아래 — 장르 줄이 짧든 길든 아이콘이 같은 높이 (사용자: "비뚤게 보여") */
  .wp-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px}
  .wp-tile{display:flex; flex-direction:column}
  .wp-tile h5{margin-top:7px}
  .wp-tile .by{margin:3px 0 6px}
  .wp-tile .wp-meta{gap:6px; height:22px; overflow:hidden}
  .wp-tile .wp-meta .wp-dj{height:22px; padding:0; border:0; background:none; color:var(--m-text3); font-size:11px}
  .wp-tile .wp-meta .wp-dj + .wp-dj::before{content:"·"; margin-right:6px}
  .wp-tile .wp-foot{margin-top:auto; padding-top:6px}
  .wp-tile .wp-foot .wp-ev{min-width:0; overflow:hidden; font-size:12px}
  .wp-li{grid-template-columns:26px 44px minmax(0,1fr) auto; gap:10px}
  /* 아이폰에서 좌우로 문지르면 페이지가 옆으로 밀리던 것 (2026-11-08 사용자): 아이폰은 안쪽 화면이 1px이라도 넓으면 그만큼 넓혀서 옆으로 움직여요.
     31~50위 줄의 [아티스트 · 장르 · BPM · KEY]가 한 줄 고정이라 좁은 폰(320px)에서 BPM · KEY가 화면 밖으로 나갔어요 → 휴대폰에서는 다음 줄로 */
  .wp-li .s{flex-wrap:wrap; row-gap:4px}
  .wp-li .s > span:first-child{max-width:100%}
  /* 안전장치: 앞으로 넓은 것이 생겨도 페이지가 옆으로 밀리지 않게 잘라요(overflow-x: clip — 스크롤 칸을 만들지 않아서 위에 붙는 덱 · 손짓은 그대로).
     양옆 10px(휴대폰 옆 여백)까지 넓혀서 화면 끝까지 미는 장르 줄 · 6~10위 줄은 안 잘려요 */
  .wp-page{margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px; overflow-x:clip}
  .wp-li .wp-ev,.wp-li .date{display:none}
  .wp-bag{left:12px; right:12px; transform:none; bottom:140px; justify-content:space-between; font-size:13px}
}

/* 목록 보기 (다른 곡 목록과 같은 표): 두 칸에 늘어난 재생 · 리포스트, 담기 · 받기는 늘 보이게, 휴대폰은 제목 아래 근거 한 줄 */
.wp-page .tl .tl-c-plays.wp-evc,.wp-page .tl .tl-c-likes.wp-evc{color:var(--m-up); cursor:default}
/* 재생 칸은 늘어난 재생(▶, tracklist.css 그림 그대로), 좋아요 칸은 늘어난 리포스트(↻) — 2026-11-08 새 무게 */
.wp-page .tl .tl-c-likes.wp-evc::before{content:"↻"; -webkit-mask:none; mask:none; background:none; width:auto; height:auto; font-size:12px; line-height:1}
.wp-page .tl .tl-c-act,.wp-page .tl .tl-c-act > *{opacity:1 !important; visibility:visible !important}
.wp-page .tl .tl-c-act .wp-dl{margin-right:4px}
.wp-page .tl .wp-gc{margin-left:6px; flex:none}
.wp-page .tl .wp-ovr{margin-left:6px; flex:none}
.wp-rk{display:block; font:400 20px/1 var(--m-num); color:var(--m-text)}
.wp-page .tl .wp-mv{display:block; margin:3px 0 0}
.wp-page .tl .wp-mv.re{color:#8b5cf6}
.wp-l4{display:none; gap:10px; margin-top:3px}
@media (max-width:720px){ .wp-l4{display:flex} }

/* 아이패드 · 좁은 컴퓨터 창 (2026-11-09 작업 04 요청 38 "아이패드에서 장르 아이콘이 세로로 깨지고, 2~4위 숫자 글씨가 안 어울리고, 제목이 너무 짧아"):
   왼쪽 메뉴가 보이는 아이패드 가로(창 1024~1194px)는 본문 칸이 720~890px인데, 위 규칙은 '화면 폭'(1100 · 900)이라 컴퓨터 모양이 그대로 끼었어요
   (실제 사이트 1180px 창: 장르 칸 폭 48~68px · 높이 93px, 2~5위 제목 178px 두 줄 / 1024px 창: 31~50위 제목 62px).
   → 본문 칸 폭(@container wpp)으로 바꿔요. 컴퓨터(본문 1100px 넘게)와 휴대폰(창 720px 이하)은 그대로예요 */
@media (min-width:721px){
  .wp-page{container:wpp / inline-size}
  @container wpp (max-width:1099px){
    /* 장르: 좁고 긴 타일 대신 한 줄 알약(옆으로 밀기) — 휴대폰 칩과 같은 모양 */
    .wp-gbar{display:flex; overflow-x:auto; gap:8px; margin:0 0 20px; padding-bottom:2px; scrollbar-width:none}
    .wp-gbar::-webkit-scrollbar{display:none}
    .wp-gw{flex:none}
    .wp-g{flex:none; flex-direction:row; height:40px; min-height:0; padding:0 14px; gap:6px; border-radius:12px; font-size:13px}
    .wp-g span{display:block; white-space:nowrap}
    .wp-g .wp-gi{width:18px; height:18px}
    .wp-g-b{top:50%; right:6px; transform:translateY(-50%); width:22px; height:22px; box-shadow:none}
    .wp-gw:not(.wp-gw-all) > .wp-g{padding-right:34px}
    .wp-gbar:not(.has-sel) .wp-g-add{display:none}
    .wp-gbar:not(.has-sel) .wp-gw > .wp-g{padding-right:14px}
    .wp-gbar.has-sel .wp-g-add,.wp-gw:hover .wp-g-add{opacity:1; transform:translateY(-50%)}
    /* 1위 큰 카드: 그림을 조금 줄여 글 칸을 넓히고, 단추 넷(재생 · 받기 · 보관함 · 사운드클라우드)이 한 줄에 — 좁으면 단추 글자를 줄여요 */
    .wp-cover-in{grid-template-columns:260px minmax(0,1fr); gap:28px; padding:28px}
    .wp-cover h2{font-size:36px}
    .wp-stats{gap:24px} .wp-stats b{font-size:34px}
    .wp-btns{flex-wrap:nowrap; gap:8px}
    .wp-btn{height:42px; padding:0 14px; font-size:13.5px; white-space:nowrap; flex:none}
    .wp-btn.d{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
    /* 2~5위: 한 칸에 한 곡 — 제목을 넓게(한 줄), 숫자는 리포스트 · 재생만(좋아요는 목록 · 디깅 플레이어에) */
    .wp-feat{grid-template-columns:minmax(0,1fr); gap:12px}
    .wp-fc{grid-template-columns:52px 92px minmax(0,1fr); gap:16px; padding:12px 18px 12px 6px; border-radius:18px}
    .wp-fc .rk{font-size:48px}
    .wp-fc h3{font-size:18px; -webkit-line-clamp:1; display:block; white-space:nowrap; text-overflow:ellipsis}
    .wp-fc .by{margin:4px 0 6px}
    .wp-fc .wp-evr{margin-top:8px}
    .wp-fc .wp-evr .wp-ev:nth-child(3){display:none}
    /* 11~30위 바둑판 3칸, 31~50위 목록은 한 칸 줄(제목 칸을 넓게) */
    .wp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .wp-two{grid-template-columns:minmax(0,1fr)}
  }
  @container wpp (max-width:899px){
    .wp-five{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @container wpp (max-width:779px){
    .wp-li .date{display:none} /* 좁으면 올린 날은 빼요(제목 · 아티스트 · 리포스트 · 담기 · 받기는 그대로) */
  }
}

/* 탭 아래 한 줄 (2026-11-10 주간 · 월간 역할 나누기, 시안 tools/mockups/djpick-week-month.html · sub/weekly_pick.php .wp-sub):
   주간 '이번 주 DJ들이 많이 받은 곡 (올린 날 상관없이)' · 월간 '2026년 11월에 나온 곡 순위' · 실시간 '최근 24시간 …'.
   컴퓨터 = 고르기 칸 아래(실시간은 제목 아래) 한 줄, 휴대폰 = 둘째 줄(고르기 · 아이콘) 아래. 관리자 기간 줄은 그 아래 */
.wp-head > .wp-sub{flex-basis:100%; margin:-6px 0 0; color:var(--m-text2); font-size:13px; font-weight:600; line-height:1.45}
.wp-sub-x{color:var(--m-text3)}
@media (max-width:720px){
  .wp-head > .wp-sub{order:8; margin-top:8px; font-size:12.5px; line-height:1.4}
  .wp-period{order:9}
}
/* 좁은 휴대폰: '○일 동안 늘어난 숫자'가 붙는 주간 · 실시간은 '(올린 날 상관없이)' 조각을 빼서 한 줄로 (머리가 높으면 1~10위가 덜 보여요) */
@media (max-width:480px){
  .wp-sub.has-d .wp-sub-x,.wp-sub.is-rt .wp-sub-x{display:none}
}