/* Pick(World) (sub/weekly_pick.php, 2026-11) — 곡 목록 표(tracklist.css)는 그대로 두고 그 위에 더하는 것만
   머리(최신 트랙과 같은 .tl-top 묶음 안의 탭 · 고르기 · 공유 · 잰 날) · 계산 방법(관리자) · 순위 칸(순위 + ▲▼·NEW·RE)
   · 장르 · 이번 주(달) 증가량 줄 + 무료로 받는 곳 아이콘 (sub/js/weekly_pick.js가 붙여요)
   색은 tracklist.css의 --tl-* 변수를 써서 화이트·다크가 같이 맞아요 */
.wp-page{--wp-up:#16a34a; --wp-down:#e5484d; --wp-new:var(--tl-accent-text); --wp-re:#8b5cf6}
[data-theme="light"] .wp-page{--wp-up:#15803d; --wp-down:#c62f3a; --wp-re:#6d28d9}

/* 고르기 · 공유 */
.wp-week{display:flex; align-items:center; gap:8px; margin:4px 0 12px}
.wp-step{
  position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; padding:0;
  border:1px solid var(--tl-line); border-radius:9px; background:transparent; color:var(--tl-text); text-decoration:none; cursor:pointer;
}
.wp-step:hover{background:var(--tl-hover)}
.wp-step.is-off{opacity:.35; cursor:default}
.wp-share{margin-left:4px}
.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(--tl-text); color:var(--tl-bg, #fff); font-size:12px; font-weight:700;
}
.wp-week-sel{position:relative; display:inline-flex; align-items:center; min-width:0}
.wp-week-sel select{
  -webkit-appearance:none; appearance:none; height:34px; max-width:100%; padding:0 32px 0 12px;
  border:1px solid var(--tl-line); border-radius:9px; background:transparent; color:var(--tl-text);
  font:inherit; font-size:14px; font-weight:800; cursor:pointer;
}
.wp-week-sel select option{color:#111; background:#fff}
.wp-week-sel .tl-svg{position:absolute; right:11px; pointer-events:none; font-size:11px; color:var(--tl-text-3)}
.wp-period{margin:0 0 12px; color:var(--tl-text-3); font-size:13px; line-height:1.45}

/* 탭 (다른 목록의 기간 탭과 같은 모양) */
.wp-tabbar{margin-bottom:10px}

/* 계산 방법 (관리자) */
.wp-how{margin:0 0 12px; border:1px solid var(--tl-line); border-radius:10px; font-size:13px; line-height:1.6; color:var(--tl-text-2)}
.wp-how summary{padding:9px 12px; cursor:pointer; font-weight:800; color:var(--tl-text)}
.wp-how ul{margin:0; padding:0 14px 4px 30px}
.wp-how li{margin:0 0 4px; list-style:disc}
.wp-how p{margin:0; padding:2px 14px 10px; color:var(--tl-text-3)}
.wp-empty{margin-top:30px}

/* 컴퓨터: 머리 한 줄(.tl-top, tracklist.css) — 제목 · 탭 ……… 고르기 · 공유, 그 아래 잰 날 */
@media (min-width:721px){
  .wp-page .tl-top .wp-week{order:4; margin:0 0 0 auto}
  .wp-page .tl-top .wp-step,.wp-page .tl-top .wp-week-sel select{height:40px; border-radius:12px}
  .wp-page .tl-top .wp-step{width:40px}
  .wp-page .tl-top .wp-period{order:9; flex-basis:100%; margin:0}
}

/* 순위 칸: 순위 숫자 아래 변동 (칸을 조금 넓혀요) */
.wp-page .tl > *{--tl-rankw:36px}
.wp-page .tl .tl-c-rank{white-space:normal; overflow:visible; line-height:1.1}
.wp-rk{display:block; font-size:16px; font-weight:800; color:var(--tl-text)}
.wp-mv{display:block; margin-top:3px; font-size:10.5px; font-weight:800; letter-spacing:-.2px}
.wp-mv.up{color:var(--wp-up)}
.wp-mv.down{color:var(--wp-down)}
.wp-mv.same{color:var(--tl-text-3)}
.wp-mv.new{color:var(--wp-new)}
.wp-mv.re{color:var(--wp-re)}

/* 장르: 아티스트 이름 옆 작은 표 (사용자 요청 '15') */
.wp-genre{
  flex:0 1 auto; min-width:0; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:0 6px; border-radius:5px; font-size:11px; font-weight:700; line-height:18px;
  background:var(--tl-cd, rgba(127,127,127,.12)); box-shadow:inset 0 0 0 1px var(--tl-cd-line, transparent); color:var(--tl-text-3);
}

/* 이번 주(달) 증가량 줄 + 무료로 받는 곳 아이콘 (사용자 요청 '17': 초록 FREE 표·게이트 이름 대신) */
.wp-l4{display:flex; flex-wrap:wrap; align-items:center; gap:1px 10px; margin-top:3px; font-size:12px; line-height:1.4; color:var(--tl-text-3); font-variant-numeric:tabular-nums}
.wp-l4 b{color:var(--wp-up); font-weight:800}
.wp-l4 .wp-wk{font-weight:700}
.wp-st{display:inline-flex; align-items:center; gap:3px}
.wp-st .tl-svg{font-size:9px; opacity:.85}
.wp-rp{font-style:normal; font-size:12px; line-height:1; opacity:.85}
.wp-gate{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:20px; border-radius:6px;
  color:var(--wp-up); box-shadow:inset 0 0 0 1px currentColor; text-decoration:none;
}
.wp-gate .tl-svg{font-size:12px}
.wp-gate:hover{background:var(--wp-up); color:#fff}

/* 휴대폰 */
@media (max-width:720px){
  .wp-page .tl > *{--tl-rankw:22px}
  .wp-rk{font-size:13px}
  .wp-mv{font-size:9.5px; letter-spacing:-.4px}
  .wp-page .tl-mic-date,.wp-page .tl-mic-sort{display:none}   /* 기간·정렬은 차트에 없어요 */
  .wp-l4{font-size:11.5px; gap:0 8px}
}