:root {
  --bg: #000000;
  --card: #0a0a0a;
  --line-soft: #151515;
  --line-mid: #1c1c1c;
  --text: #ffffff;
  --muted: #b7b7b7;
  --muted-2: #8c8c8c;
  --up: #42ff61;
  --down: #ff4d4f;
  --new: #a970ff;
}

* { box-sizing: border-box; }
body { margin: 0; background: #000; color: var(--text); font-family: "Pretendard","Apple SD Gothic Neo","Noto Sans KR",Arial,sans-serif; line-height: 1.5; letter-spacing: -0.01em; user-select:none; -webkit-user-select:none; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

.container { width: min(980px, calc(100% - 24px)); margin: 0 auto; padding: 0 0 44px; }
.page-header { margin-bottom: 10px; }
.page-title { margin: 0; font-size: clamp(26px, 3.2vw, 36px); font-weight: 620; letter-spacing: -0.04em; color: #fff; }
.page-beta { margin: 6px 0 8px; font-size: 15px; font-weight: 520; color: #ff4d4f; line-height: 1.5; }
.page-desc { margin: 4px 0 0; font-size: 13px; color: var(--muted-2); font-weight: 400; line-height: 1.5; }
.desc-link { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.desc-link:hover { color: #fff; }
.site-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid #111; color: var(--muted-2); font-size: 12px; }

.top-meta { display:flex; justify-content:space-between; align-items:end; gap:12px; flex-wrap:wrap; margin-top:12px; margin-bottom:12px; }
.top-meta-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.top-meta-right { color: var(--muted-2); font-size:14px; font-weight:460; white-space:nowrap; }

.period-select {
  appearance:none; -webkit-appearance:none; min-height:40px; padding:0 38px 0 14px; border:none; border-radius:10px;
  background:
    linear-gradient(45deg, transparent 50%, #bdbdbd 50%),
    linear-gradient(135deg, #bdbdbd 50%, transparent 50%),
    #101010;
  background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  color:#fff; font-size:16px; font-weight:500; outline:none; cursor:pointer;
}

.filter-toggle { display:inline-flex; align-items:center; gap:4px; background:#101010; border-radius:10px; padding:4px; }
.filter-btn { min-width:78px; height:32px; border:none; border-radius:8px; background:transparent; color:#8c8c8c; font-size:14px; font-weight:520; cursor:pointer; }
.filter-btn.active { background:#1b1b1b; color:#fff; }

.card-list { display:grid; gap:12px; }
.empty-note { color:#555; padding:40px 0; text-align:center; }

.search-wrap { display:flex; gap:10px; margin-bottom:16px; max-width:600px; }
.search-input { flex:1; height:46px; padding:0 16px; background:#0f0f0f; border:1px solid #1a1a1a; border-radius:12px; color:#fff; font-size:15px; outline:none; }
.search-input::placeholder { color:#444; }
.search-btn { height:46px; padding:0 22px; background:#191919; border:none; border-radius:12px; color:#fff; font-size:14px; font-weight:500; cursor:pointer; }
.result-count { font-size:13px; color:var(--muted-2); margin-bottom:16px; }

.chart-card {
  background: linear-gradient(180deg, #0b0b0b 0%, #090909 100%);
  border: 1px solid #0b0b0b;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.025);
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  overflow: hidden;
}

a.thumbnail { display:block; color:inherit; text-decoration:none; }
.thumbnail {
  width:250px; min-height:190px; background-color:#161616; background-position:center; background-size:cover; background-repeat:no-repeat; position:relative;
}
.thumbnail::after {
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.14) 100%);
}
.yt-link-badge {
  position:absolute; left:4px; bottom:12px; z-index:1; display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,0.72);
  color:#fff; font-size:12px; font-weight:600; border-radius:999px; padding:3px 10px 3px 7px; white-space:nowrap;
}
.yt-icon { width:29px; height:auto; display:block; flex-shrink:0; }

.info { padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px; min-width:0; position:relative; }
.song-block { min-width:0; flex:1; padding-right:128px; }
.song-title { margin:0; font-size:1.72rem; font-weight:540; letter-spacing:-0.03em; line-height:1.14; color:#fff; }
.artist-name { margin-top:5px; color:var(--muted); font-size:16px; font-weight:470; }
.post-date { margin-top:5px; color:var(--muted-2); font-size:13px; font-weight:430; }

.rank-area { position:absolute; top:18px; right:18px; text-align:right; }
.rank-line { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.rank-number { font-size:32px; line-height:1; font-weight:570; color:#fff; letter-spacing:-0.04em; min-width:64px; text-align:right; }
.rank-change { display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:520; width:34px; text-align:left; margin-top:6px; }
.chevron { width:9px; height:9px; display:inline-block; box-sizing:border-box; flex-shrink:0; }
.chevron.up { border-top:2.5px solid currentColor; border-right:2.5px solid currentColor; transform:rotate(-45deg); margin-top:3px; }
.chevron.down { border-bottom:2.5px solid currentColor; border-right:2.5px solid currentColor; transform:rotate(45deg); margin-top:2px; }
.rank-change.up { color:var(--up); }
.rank-change.down { color:var(--down); }
.rank-change.new { color:var(--new); }
.rank-change.same { color:#888; font-size:20px; font-weight:900; position:relative; top:-3px; }

.week-text { margin-top:6px; color:var(--muted-2); font-size:15px; font-weight:430; }
.primary-pair { display:grid; grid-template-columns:3fr 4fr 3fr; gap:10px 8px; margin-top:2px; }
.stat-item { border-top:1px solid var(--line-soft); padding-top:10px; min-width:0; }
.stat-label { font-size:15px; color:var(--muted); margin-bottom:5px; font-weight:390; }
.stat-value { font-size:20px; font-weight:480; letter-spacing:-0.02em; word-break:break-word; color:#fff; }

.video-block {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 28px;
  background: linear-gradient(180deg, #0b0b0b 0%, #090909 100%);
  border: 1px solid #0b0b0b;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.025);
  overflow: hidden;
}
.video-summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px 14px; border-bottom: 1px solid #111;
}
.video-summary-thumb {
  width: 96px; height: 96px; flex-shrink: 0; border-radius: 10px;
  background-color: #161616; background-position: center; background-size: cover; background-repeat: no-repeat;
  display: block; text-decoration: none; color: inherit; position: relative; overflow: hidden;
}
.video-summary-yt-badge {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.78); color: #fff; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 4px 9px 4px 6px; white-space: nowrap; line-height: 1;
}
.video-summary-yt-icon { width: 24px; height: auto; display: block; flex-shrink: 0; }
.video-summary-text { min-width: 0; padding-top: 2px; }
.video-summary-title { margin: 0; font-size: 1.55rem; font-weight: 560; letter-spacing: -0.03em; line-height: 1.18; color: #fff; }
.video-summary-artist { margin-top: 6px; color: var(--muted); font-size: 15px; font-weight: 470; }
.video-summary-date { margin-top: 5px; color: var(--muted-2); font-size: 13px; font-weight: 430; }

.search-table-wrap { width: auto; max-width: 100%; overflow-x: auto; }
.search-table { width: auto; min-width: 760px; border-collapse: collapse; table-layout: auto; }
.search-table th, .search-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--line-mid);
  text-align: left; font-size: 14px; vertical-align: middle; white-space: nowrap;
}
.search-table th { color: var(--muted); font-weight: 520; background: #0f0f0f; }
.search-table td { color: #fff; font-weight: 430; }
.search-table tr:last-child td { border-bottom: none; }
.search-table td.num { text-align: left; font-variant-numeric: tabular-nums; }
.search-table td.period { color: var(--muted); }
.search-table th:nth-child(1), .search-table td:nth-child(1) { min-width: 210px; }
.search-table th:nth-child(2), .search-table td:nth-child(2) { min-width: 80px; }
.search-table th:nth-child(3), .search-table td:nth-child(3) { min-width: 130px; }
.search-table th:nth-child(4), .search-table td:nth-child(4) { min-width: 210px; }
.search-table th:nth-child(5), .search-table td:nth-child(5) { min-width: 120px; }

/* 검색 결과 주차 링크 */
.week-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid #333;
  transition: color 0.15s, border-color 0.15s;
}
.week-link:hover { color: #fff; border-bottom-color: #777; }

@media (max-width:720px) {
  .chart-card { grid-template-columns:1fr; }
  .thumbnail { width:100%; min-height:220px; }
  .rank-area { position:static; text-align:left; margin-top:6px; }
  .rank-line { justify-content:start; }
  .rank-number { text-align:left; }
  .song-block { padding-right:0; }
  .video-summary-title { font-size:1.35rem; }
  .video-summary-thumb { width:80px; height:80px; }
  .video-summary { gap:12px; }
}
@media (max-width:520px) {
  .container { width:min(100% - 16px, 100%); padding-top:16px; }
  .info { padding:14px; }
  .primary-pair { grid-template-columns:1fr; gap:8px; }
  .song-title { font-size:1.45rem; }
  .rank-number { font-size:28px; }
  .stat-label { font-size:14px; }
  .stat-value { font-size:19px; }
  .search-wrap { max-width:100%; }
  .search-table th, .search-table td { padding:10px 12px; font-size:13px; }
}