/* ============================================================================
   정치 핫 채널 리그 — CSS v5.0 (모바일 가독성 근본 개선)
   
   v5.0 변경점:
    - 모바일 카드 헤더: 1줄 flex → 2줄 구조 (상단: 순위+채널정보, 하단: 지표)
    - 영상 목록: nowrap 해제 → 2줄 허용, 썸네일 표시
    - 지표 그리드: 4열 → 모바일 2×2, 폰트 사이즈 상향
    - 탭/태그/배지: 터치 타겟 48px 확보, 간격 넉넉
    - 전체 최소 폰트: 0.75rem (12px 하한)
   ============================================================================ */

/* ─── 페이지 컨테이너 ─── */
.hot-ch-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

/* ─── 히어로 배너 ─── */
.hot-ch-hero {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 50%, var(--accent-600) 100%);
  border-radius: 20px;
  margin: 20px 0 16px;
  padding: 2px;
  position: relative;
  overflow: hidden;
}
.hot-ch-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255,150,50,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,200,0,0.1) 0%, transparent 50%);
  pointer-events: none;
}
.hot-ch-hero-inner {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 32px 28px 28px;
  text-align: center;
  position: relative;
}
.hot-ch-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hot-ch-fire-icon {
  font-size: 2rem;
  animation: hot-ch-flame 1.5s ease-in-out infinite alternate;
}
@keyframes hot-ch-flame {
  0% { transform: scale(1) rotate(-3deg); filter: brightness(1); }
  100% { transform: scale(1.12) rotate(3deg); filter: brightness(1.2); }
}
.hot-ch-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  margin: 0 0 6px;
  line-height: 1.5;
}
.hot-ch-criteria {
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  margin: 0 0 14px;
  line-height: 1.4;
}
.hot-ch-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.hot-ch-date-pending {
  background: rgba(255,200,0,0.25);
}

/* ─── 면책 고지 ─── */
.hot-ch-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.hot-ch-disclaimer i {
  color: var(--brand-500);
  margin-top: 2px;
  flex-shrink: 0;
}
[data-theme="dark"] .hot-ch-disclaimer {
  background: var(--gray-800);
  border-color: var(--gray-700);
  color: var(--gray-400);
}

/* ═══════════════════════════════════════════════════════════════
   아젠다 태그 (교집합 + 진영 + 카드 공통)
   ═══════════════════════════════════════════════════════════════ */
.hot-ch-agenda-tags {
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hot-ch-agenda-tags.common-agendas {
  background: linear-gradient(135deg, rgba(14,135,233,0.05) 0%, rgba(7,196,173,0.05) 100%);
  border: 1px solid rgba(14,135,233,0.12);
}
.hot-ch-agenda-tags.camp-agendas-conservative {
  background: rgba(239,68,68,0.04);
  border: 1px solid rgba(239,68,68,0.12);
}
.hot-ch-agenda-tags.camp-agendas-progressive {
  background: rgba(59,130,246,0.04);
  border: 1px solid rgba(59,130,246,0.12);
}
.hot-ch-agenda-tags.camp-agendas-mixed {
  background: rgba(234,179,8,0.04);
  border: 1px solid rgba(234,179,8,0.12);
}
[data-theme="dark"] .hot-ch-agenda-tags {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

.hot-ch-agenda-tags-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-500);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hot-ch-agenda-tags-label i {
  font-size: 0.7rem;
  color: var(--brand-500);
}

.hot-ch-agenda-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.hot-ch-agenda-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.hot-ch-agenda-tag.common-tag {
  background: var(--gray-100);
  color: var(--brand-600, #0e87e9);
  border: 1px solid var(--gray-200);
}
[data-theme="dark"] .hot-ch-agenda-tag.common-tag {
  background: var(--gray-700);
  color: #93c5fd;
  border-color: var(--gray-600);
}
.hot-ch-agenda-tag.camp-tag-conservative {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
[data-theme="dark"] .hot-ch-agenda-tag.camp-tag-conservative {
  background: rgba(239,68,68,0.12);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.25);
}
.hot-ch-agenda-tag.camp-tag-progressive {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
[data-theme="dark"] .hot-ch-agenda-tag.camp-tag-progressive {
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
  border-color: rgba(59,130,246,0.25);
}
.hot-ch-agenda-tag.camp-tag-mixed {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fde68a;
}
[data-theme="dark"] .hot-ch-agenda-tag.camp-tag-mixed {
  background: rgba(234,179,8,0.12);
  color: #fde68a;
  border-color: rgba(234,179,8,0.25);
}
.hot-ch-agenda-tag.hot {
  font-weight: 700;
  box-shadow: 0 0 0 1px currentColor;
}

/* 카드 내 아젠다 태그 */
.hot-ch-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 16px 10px;
}
.hot-ch-card-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.hot-ch-card-tag.camp-tag-conservative { background: #fef2f2; color: #b91c1c; }
.hot-ch-card-tag.camp-tag-progressive { background: #eff6ff; color: #1d4ed8; }
.hot-ch-card-tag.camp-tag-mixed { background: #fefce8; color: #a16207; }
[data-theme="dark"] .hot-ch-card-tag.camp-tag-conservative { background: rgba(239,68,68,0.12); color: #fca5a5; }
[data-theme="dark"] .hot-ch-card-tag.camp-tag-progressive { background: rgba(59,130,246,0.12); color: #93c5fd; }
[data-theme="dark"] .hot-ch-card-tag.camp-tag-mixed { background: rgba(234,179,8,0.12); color: #fde68a; }

.hot-ch-camp-agendas-section {
  margin-bottom: 12px;
}

/* ─── 탭 네비게이션 ─── */
.hot-ch-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  background: var(--gray-100);
  border-radius: 14px;
  padding: 4px;
}
[data-theme="dark"] .hot-ch-tabs {
  background: var(--gray-800);
}
.hot-ch-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--gray-500);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
}
.hot-ch-tab:hover {
  background: rgba(0,0,0,0.04);
}

.hot-ch-tab.hot-ch-tab-conservative.active {
  background: #fef2f2;
  color: #dc2626;
  box-shadow: 0 2px 8px rgba(220,38,38,0.12);
}
.hot-ch-tab.hot-ch-tab-progressive.active {
  background: #eff6ff;
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}
.hot-ch-tab.hot-ch-tab-mixed.active {
  background: #fefce8;
  color: #ca8a04;
  box-shadow: 0 2px 8px rgba(202,138,4,0.12);
}
[data-theme="dark"] .hot-ch-tab.hot-ch-tab-conservative.active {
  background: rgba(220,38,38,0.15);
  color: #fca5a5;
}
[data-theme="dark"] .hot-ch-tab.hot-ch-tab-progressive.active {
  background: rgba(37,99,235,0.15);
  color: #93c5fd;
}
[data-theme="dark"] .hot-ch-tab.hot-ch-tab-mixed.active {
  background: rgba(202,138,4,0.15);
  color: #fde68a;
}
.hot-ch-tab.hot-ch-tab-conservative:hover { color: #dc2626; }
.hot-ch-tab.hot-ch-tab-progressive:hover { color: #2563eb; }
.hot-ch-tab.hot-ch-tab-mixed:hover { color: #ca8a04; }

.hot-ch-tab-emoji { font-size: 1.1rem; }
.hot-ch-tab-count {
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  color: var(--gray-400);
  padding: 1px 5px;
  border-radius: 6px;
  min-width: 18px;
  text-align: center;
}
.hot-ch-tab.active .hot-ch-tab-count {
  background: rgba(0,0,0,0.1);
}
.hot-ch-tab-fire { font-size: 0.8rem; animation: hot-ch-flame 1s ease infinite alternate; }

/* ─── 과열 지수 바 ─── */
.hot-ch-overheat-bar {
  margin-bottom: 12px;
}
.hot-ch-overheat-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 10px 16px;
}
[data-theme="dark"] .hot-ch-overheat-content {
  background: var(--gray-800);
  border-color: var(--gray-700);
}
.hot-ch-overheat-content.level-4,
.hot-ch-overheat-content.level-5 {
  border-color: #fbbf24;
  background: linear-gradient(90deg, rgba(251,191,36,0.08) 0%, transparent 100%);
}
[data-theme="dark"] .hot-ch-overheat-content.level-4,
[data-theme="dark"] .hot-ch-overheat-content.level-5 {
  border-color: #b45309;
  background: linear-gradient(90deg, rgba(180,83,9,0.15) 0%, transparent 100%);
}
.hot-ch-overheat-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hot-ch-overheat-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-weight: 600;
}
.hot-ch-overheat-emoji { font-size: 1.1rem; }
.hot-ch-overheat-score {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-primary);
}
.hot-ch-overheat-track {
  flex: 1;
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}
[data-theme="dark"] .hot-ch-overheat-track {
  background: var(--gray-700);
}
.hot-ch-overheat-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #ef4444);
  transition: width 0.6s ease;
}
.hot-ch-overheat-agenda {
  font-size: 0.75rem;
  color: var(--brand-500);
  font-weight: 600;
  white-space: nowrap;
}
.hot-ch-overheat-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--gray-400);
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
   채널 카드 v5.0 — 모바일 최적화 구조
   ═══════════════════════════════════════════════════════════════ */
.hot-ch-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hot-ch-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  contain: content;
}
[data-theme="dark"] .hot-ch-card {
  background: var(--gray-800);
  border-color: var(--gray-700);
}
.hot-ch-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.hot-ch-card.camp-border-conservative { border-left: 4px solid #ef4444; }
.hot-ch-card.camp-border-progressive { border-left: 4px solid #3b82f6; }
.hot-ch-card.camp-border-mixed { border-left: 4px solid #eab308; }

/* ─── 카드 헤더: 상단 채널 정보 ─── */
.hot-ch-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
}
.hot-ch-card-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.hot-ch-rank-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-weight: 800;
  font-size: 1rem;
}
[data-theme="dark"] .hot-ch-rank-num {
  background: var(--gray-700);
  color: var(--gray-300);
}
.rank-top .hot-ch-rank-num {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}
.hot-ch-rank-up { color: #22c55e; font-size: 0.7rem; font-weight: 700; }
.hot-ch-rank-down { color: #ef4444; font-size: 0.7rem; font-weight: 700; }
.hot-ch-rank-same { color: var(--gray-400); font-size: 0.7rem; }

.hot-ch-card-avatar {
  flex-shrink: 0;
}
.hot-ch-card-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gray-200);
}
[data-theme="dark"] .hot-ch-card-avatar img {
  border-color: var(--gray-600);
}

.hot-ch-card-info {
  flex: 1;
  min-width: 0;
}
.hot-ch-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hot-ch-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hot-ch-card-name:hover {
  color: var(--brand-500);
}
.hot-ch-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.hot-ch-sub-count {
  font-size: 0.8rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}
.hot-ch-upload-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #166534;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}
[data-theme="dark"] .hot-ch-upload-badge {
  background: #14532d;
  color: #86efac;
}

/* ─── 열 지수 (카드 헤더 우측) ─── */
.hot-ch-card-heat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.hot-ch-heat-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  border: 3px solid var(--gray-300);
  color: var(--gray-600);
}
.hot-ch-heat-circle.level-1 { border-color: #94a3b8; color: #64748b; }
.hot-ch-heat-circle.level-2 { border-color: #fbbf24; color: #b45309; }
.hot-ch-heat-circle.level-3 { border-color: #f97316; color: #c2410c; }
.hot-ch-heat-circle.level-4 { border-color: #ef4444; color: #dc2626; background: rgba(239,68,68,0.08); }
.hot-ch-heat-circle.level-5 { border-color: #dc2626; color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); }
.hot-ch-fire-sm { font-size: 0.75rem; line-height: 1; }

/* 구독자 기반 표시 (스냅샷 없을 때) */
.hot-ch-card-subs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  padding: 4px 8px;
}
.hot-ch-subs-value {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.hot-ch-subs-label {
  font-size: 0.65rem;
  color: var(--gray-400);
  font-weight: 600;
}

/* ─── NEW / RE-HEAT / EXPLORE 배지 ─── */
.hot-ch-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.hot-ch-badge-new {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.hot-ch-badge-reheat {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  animation: hot-ch-reheat-pulse 2s ease-in-out infinite;
}
.hot-ch-badge-explore {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #c4b5fd;
  font-size: 0.6rem;
}
@keyframes hot-ch-reheat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
[data-theme="dark"] .hot-ch-badge-new {
  background: #14532d;
  color: #86efac;
  border-color: #22c55e;
}
[data-theme="dark"] .hot-ch-badge-reheat {
  background: #78350f;
  color: #fcd34d;
  border-color: #f59e0b;
}
[data-theme="dark"] .hot-ch-badge-explore {
  background: rgba(109,40,217,0.15);
  color: #c4b5fd;
  border-color: rgba(109,40,217,0.4);
}

/* 영상 리스트 내 배지 */
.hot-ch-video-badge-new,
.hot-ch-video-badge-reheat {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.hot-ch-video-badge-new {
  background: #dcfce7;
  color: #166534;
}
.hot-ch-video-badge-reheat {
  background: #fef3c7;
  color: #92400e;
}
[data-theme="dark"] .hot-ch-video-badge-new {
  background: #14532d;
  color: #86efac;
}
[data-theme="dark"] .hot-ch-video-badge-reheat {
  background: #78350f;
  color: #fcd34d;
}

/* ─── 24h 지표 ─── */
.hot-ch-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 16px 12px;
}
.hot-ch-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--gray-50);
  border-radius: 10px;
}
[data-theme="dark"] .hot-ch-metric {
  background: var(--gray-900);
}
.hot-ch-metric-icon {
  font-size: 0.8rem;
  color: var(--gray-400);
}
.hot-ch-metric-val {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.hot-ch-metric-label {
  font-size: 0.7rem;
  color: var(--gray-400);
}

/* ─── 영상 리스트 v5.0 ─── */
.hot-ch-videos {
  border-top: 1px solid var(--gray-100);
  padding: 4px 0;
}
[data-theme="dark"] .hot-ch-videos {
  border-color: var(--gray-700);
}
.hot-ch-video-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
}
.hot-ch-video-row:hover {
  background: var(--gray-50);
}
[data-theme="dark"] .hot-ch-video-row:hover {
  background: var(--gray-700);
}
.hot-ch-video-idx {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 600;
  padding-top: 2px;
}
.hot-ch-video-title {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.45;
  /* v5.0: 2줄 표시 허용 — 모바일 가독성 확보 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hot-ch-video-views {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--gray-400);
  white-space: nowrap;
  padding-top: 2px;
}

/* 더보기 토글 */
.hot-ch-card-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--brand-500);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.hot-ch-card-toggle:hover {
  background: var(--gray-50);
}

/* 빈 상태 */
.hot-ch-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--gray-400);
}
.hot-ch-empty i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}
.hot-ch-empty p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-500);
}
.hot-ch-empty-sub {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  margin-top: 6px !important;
  color: var(--gray-400) !important;
}

/* 에러 상태 */
.hot-ch-error {
  text-align: center;
  padding: 48px 20px;
  color: var(--gray-500);
}
.hot-ch-error i {
  font-size: 2.5rem;
  color: #f59e0b;
  margin-bottom: 12px;
}
.hot-ch-error-detail {
  font-size: 0.8rem;
  color: var(--gray-400);
}
.hot-ch-retry-btn {
  margin-top: 16px;
  padding: 10px 24px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.hot-ch-retry-btn:hover {
  background: var(--gray-100);
}

/* ─── 스켈레톤 ─── */
.skeleton-text {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s ease infinite;
  border-radius: 6px;
}
[data-theme="dark"] .skeleton-text {
  background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-800) 50%, var(--gray-700) 75%);
  background-size: 200% 100%;
}
@keyframes skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  border: 1px solid var(--gray-200);
  border-radius: 16px;
}
[data-theme="dark"] .skeleton-card {
  border-color: var(--gray-700);
}

/* ═══════════════════════════════════════════════════════════════
   v5.0 모바일 반응형 — 근본 개선
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .hot-ch-page { padding: 0 12px 40px; }
  .hot-ch-hero { margin: 12px 0 14px; border-radius: 16px; }
  .hot-ch-hero-inner { padding: 24px 16px 20px; }
  .hot-ch-title { font-size: 1.3rem; gap: 8px; }
  .hot-ch-fire-icon { font-size: 1.4rem; }
  .hot-ch-subtitle { font-size: 0.82rem; }
  .hot-ch-criteria { font-size: 0.75rem; }
  .hot-ch-date-badge { font-size: 0.75rem; padding: 5px 14px; }

  /* 탭: 터치 타겟 48px 확보, 이모지+라벨 세로 배치 */
  .hot-ch-tabs { gap: 4px; padding: 4px; border-radius: 12px; }
  .hot-ch-tab {
    padding: 10px 4px;
    font-size: 0.85rem;
    min-height: 48px;
    gap: 4px;
    flex-direction: column;
  }
  .hot-ch-tab-emoji { font-size: 1rem; }
  .hot-ch-tab-label { font-size: 0.78rem; }
  .hot-ch-tab-count { font-size: 0.65rem; }

  /* 카드 헤더: 가로 유지하되 패딩·간격 최적화 */
  .hot-ch-card-header { 
    padding: 14px 14px 10px; 
    gap: 10px; 
  }
  .hot-ch-card-avatar img { width: 44px; height: 44px; }
  .hot-ch-card-name { font-size: 0.9rem; }
  .hot-ch-card-name-row { gap: 5px; }
  .hot-ch-sub-count { font-size: 0.78rem; }

  /* 열 지수 원형 */
  .hot-ch-heat-circle { width: 42px; height: 42px; font-size: 0.85rem; }

  /* 순위 넘버 */
  .hot-ch-rank-num { width: 30px; height: 30px; font-size: 0.9rem; }

  /* 지표: 모바일 2×2 그리드 + 폰트 상향 */
  .hot-ch-metrics { 
    grid-template-columns: repeat(2, 1fr);
    gap: 8px; 
    padding: 4px 14px 12px; 
  }
  .hot-ch-metric { 
    padding: 10px 8px;
    border-radius: 10px;
    gap: 3px;
  }
  .hot-ch-metric-icon { font-size: 0.85rem; }
  .hot-ch-metric-val { font-size: 0.9rem; }
  .hot-ch-metric-label { font-size: 0.75rem; }

  /* 아젠다 태그: 터치 타겟 확보 */
  .hot-ch-agenda-tags { padding: 10px 14px; gap: 8px; }
  .hot-ch-agenda-tags-label { font-size: 0.75rem; }
  .hot-ch-agenda-tag { font-size: 0.78rem; padding: 4px 10px; }
  .hot-ch-card-tags { padding: 0 14px 10px; gap: 5px; }
  .hot-ch-card-tag { font-size: 0.75rem; padding: 3px 8px; }

  /* 영상 목록: 제목 2줄 표시, 패딩 넉넉 */
  .hot-ch-video-row { padding: 8px 14px; gap: 8px; }
  .hot-ch-video-title { 
    font-size: 0.82rem; 
    line-height: 1.45;
    -webkit-line-clamp: 2;
  }
  .hot-ch-video-idx { font-size: 0.75rem; width: 20px; }
  .hot-ch-video-views { font-size: 0.75rem; }

  /* 배지 */
  .hot-ch-badge { font-size: 0.6rem; padding: 2px 6px; }

  /* 과열 지수 바 */
  .hot-ch-overheat-content { padding: 10px 14px; gap: 10px; }
  .hot-ch-overheat-score { font-size: 1rem; }
  .hot-ch-overheat-label { font-size: 0.75rem; }
  
  /* 면책 */
  .hot-ch-disclaimer { font-size: 0.78rem; padding: 10px 14px; }
}

/* ─── 초소형 모바일 (< 380px) ─── */
@media (max-width: 380px) {
  .hot-ch-page { padding: 0 8px 40px; }
  .hot-ch-title { font-size: 1.15rem; gap: 6px; }
  .hot-ch-fire-icon { font-size: 1.2rem; }
  .hot-ch-tab { font-size: 0.78rem; padding: 8px 2px; min-height: 44px; }
  .hot-ch-tab-emoji { font-size: 0.9rem; }
  .hot-ch-tab-label { font-size: 0.72rem; }
  
  .hot-ch-card-header { padding: 12px 10px 8px; gap: 8px; }
  .hot-ch-card-avatar img { width: 38px; height: 38px; }
  .hot-ch-card-name { font-size: 0.85rem; }
  .hot-ch-heat-circle { width: 38px; height: 38px; font-size: 0.8rem; border-width: 2px; }
  .hot-ch-rank-num { width: 26px; height: 26px; font-size: 0.82rem; border-radius: 8px; }
  
  .hot-ch-metrics { padding: 4px 10px 12px; gap: 6px; }
  .hot-ch-metric-val { font-size: 0.85rem; }
  
  .hot-ch-agenda-tag { font-size: 0.75rem; padding: 3px 8px; }
  .hot-ch-card-tag { font-size: 0.72rem; }
  
  .hot-ch-video-row { padding: 7px 10px; }
  .hot-ch-video-title { font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   가이드 설명 (핫채널 · 기자분석 공통)
   ═══════════════════════════════════════════════════════════════ */
.hot-ch-guide,
.jr-guide {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, rgba(14,135,233,0.04) 0%, rgba(7,196,173,0.04) 100%);
  border: 1px solid rgba(14,135,233,0.12);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.6;
}
.hot-ch-guide i,
.jr-guide i {
  color: #f59e0b;
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.hot-ch-guide strong,
.jr-guide strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
  font-size: 0.85rem;
}
[data-theme="dark"] .hot-ch-guide,
[data-theme="dark"] .jr-guide {
  background: rgba(14,135,233,0.06);
  border-color: rgba(14,135,233,0.15);
  color: var(--gray-400);
}

/* ═══════════════════════════════════════════════════════════════
   미디어 페이지 탭 바
   ═══════════════════════════════════════════════════════════════ */
.media-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}
.media-tabs-bar {
  display: flex;
  gap: 4px;
  background: var(--gray-100);
  border-radius: 14px;
  padding: 4px;
  margin: 16px 0 4px;
}
[data-theme="dark"] .media-tabs-bar {
  background: var(--gray-800);
}
.media-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--gray-500);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
}
.media-tab:hover {
  background: rgba(0,0,0,0.04);
  color: var(--gray-700);
}
[data-theme="dark"] .media-tab:hover {
  background: rgba(255,255,255,0.06);
  color: var(--gray-300);
}
.media-tab.active {
  background: var(--card-bg, #fff);
  color: var(--brand-600, #0e87e9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="dark"] .media-tab.active {
  background: var(--gray-700);
  color: var(--brand-400);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.media-tab i {
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .media-page { padding: 0 12px; }
  .media-tabs-bar { margin: 12px 0 4px; }
  .media-tab { font-size: 0.85rem; padding: 10px 12px; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   기자분석 페이지 — CSS (핫채널과 구조 통일)
   ═══════════════════════════════════════════════════════════════ */

/* 페이지 컨테이너 */
.jr-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

/* 히어로 배너 */
.jr-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 20px;
  margin: 20px 0 16px;
  padding: 2px;
  position: relative;
  overflow: hidden;
}
.jr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(14,135,233,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(7,196,173,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.jr-hero-inner {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 32px 28px 28px;
  text-align: center;
  position: relative;
}
.jr-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.jr-title-icon {
  font-size: 2rem;
}
.jr-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  margin: 0 0 6px;
  line-height: 1.5;
}
.jr-criteria {
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  margin: 0 0 14px;
  line-height: 1.4;
}
.jr-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.jr-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* 통계 요약 카드 */
.jr-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.jr-stat-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
[data-theme="dark"] .jr-stat-card {
  background: var(--gray-800);
  border-color: var(--gray-700);
}
.jr-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
}
.jr-stat-label {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 2px;
}

/* 면책 고지 */
.jr-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.jr-disclaimer i {
  color: var(--brand-500);
  margin-top: 2px;
  flex-shrink: 0;
}
[data-theme="dark"] .jr-disclaimer {
  background: var(--gray-800);
  border-color: var(--gray-700);
  color: var(--gray-400);
}
.jr-formula-link {
  color: var(--brand-500);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.jr-formula-link:hover {
  text-decoration: underline;
}

/* 필터 바 */
.jr-filters {
  background: var(--card-bg, #fff);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
[data-theme="dark"] .jr-filters {
  background: var(--gray-800);
  border-color: var(--gray-700);
}
.jr-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.jr-search-input {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-50);
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.jr-search-input:focus {
  border-color: var(--brand-500);
}
[data-theme="dark"] .jr-search-input {
  background: var(--gray-900);
  border-color: var(--gray-700);
}
.jr-select {
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-50);
  color: var(--text-primary);
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
}
[data-theme="dark"] .jr-select {
  background: var(--gray-900);
  border-color: var(--gray-700);
}

/* 기자 카드 리스트 */
.jr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jr-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jr-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .jr-card {
  background: var(--gray-800);
  border-color: var(--gray-700);
}
.jr-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* 랭킹 원형 */
.jr-card-rank {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.jr-card-rank.jr-oh-high {
  background: #fee2e2;
  color: #b91c1c;
}
.jr-card-rank.jr-oh-mid {
  background: #fef3c7;
  color: #92400e;
}
.jr-card-rank.jr-oh-low {
  background: #d1fae5;
  color: #065f46;
}
[data-theme="dark"] .jr-card-rank.jr-oh-high {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
}
[data-theme="dark"] .jr-card-rank.jr-oh-mid {
  background: rgba(245,158,11,0.15);
  color: #fcd34d;
}
[data-theme="dark"] .jr-card-rank.jr-oh-low {
  background: rgba(16,185,129,0.15);
  color: #6ee7b7;
}

/* 기자 정보 */
.jr-card-info {
  min-width: 0;
}
.jr-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.jr-card-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.jr-card-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.jr-badge-media {
  background: var(--gray-100);
  color: var(--gray-600);
}
[data-theme="dark"] .jr-badge-media {
  background: var(--gray-700);
  color: var(--gray-300);
}
.jr-badge-political {
  background: #eff6ff;
  color: #2563eb;
}
[data-theme="dark"] .jr-badge-political {
  background: rgba(37,99,235,0.12);
  color: #93c5fd;
}
.jr-card-meta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--gray-500);
  flex-wrap: wrap;
}
.jr-oh-text-high { color: #e74c3c; }
.jr-oh-text-mid { color: #f39c12; }
.jr-oh-text-low { color: #27ae60; }
.jr-rel-text-high { color: #27ae60; }
.jr-rel-text-mid { color: #f39c12; }
.jr-rel-text-low { color: #e74c3c; }

/* 과열 프로그레스 바 */
.jr-card-bar {
  height: 5px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
[data-theme="dark"] .jr-card-bar {
  background: var(--gray-700);
}
.jr-card-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s;
}
.jr-bar-high { background: #ef4444; }
.jr-bar-mid { background: #f59e0b; }
.jr-bar-low { background: #22c55e; }

/* 파급력 */
.jr-card-impact {
  text-align: right;
  flex-shrink: 0;
}
.jr-card-impact-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--brand-500, #0e87e9);
}
.jr-card-impact-label {
  font-size: 0.65rem;
  color: var(--gray-400);
}

/* 페이지네이션 */
.jr-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
}
.jr-page-btn {
  padding: 6px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 36px;
}
.jr-page-btn:hover {
  border-color: var(--brand-300);
  color: var(--brand-500);
}
.jr-page-btn.active {
  background: var(--brand-500, #0e87e9);
  border-color: var(--brand-500);
  color: #fff;
}
[data-theme="dark"] .jr-page-btn {
  background: var(--gray-800);
  border-color: var(--gray-700);
}
[data-theme="dark"] .jr-page-btn.active {
  background: var(--brand-500);
}

/* 빈/에러/로딩 상태 */
.jr-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--gray-400);
}
.jr-empty i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}
.jr-empty p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-500);
}
.jr-empty-sub {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  margin-top: 6px !important;
  color: var(--gray-400) !important;
}
.jr-retry-btn {
  margin-top: 16px;
  padding: 10px 24px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.jr-retry-btn:hover {
  background: var(--gray-100);
}
.jr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  color: var(--gray-400);
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
   기자분석 모바일 반응형
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .jr-page { padding: 0 12px 40px; }
  .jr-hero { margin: 12px 0 14px; border-radius: 16px; }
  .jr-hero-inner { padding: 24px 16px 20px; }
  .jr-title { font-size: 1.3rem; gap: 8px; }
  .jr-title-icon { font-size: 1.4rem; }
  .jr-subtitle { font-size: 0.82rem; }
  .jr-criteria { font-size: 0.75rem; }
  .jr-hero-stat { font-size: 0.75rem; padding: 5px 14px; }
  .jr-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .jr-stat-card { padding: 10px; }
  .jr-stat-value { font-size: 1.2rem; }
  .jr-stat-label { font-size: 0.72rem; }
  .jr-filters { padding: 10px 14px; }
  .jr-search-input { min-width: 100%; font-size: 0.82rem; }
  .jr-select { font-size: 0.78rem; padding: 7px 10px; }
  .jr-card { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 12px 14px; }
  .jr-card-rank { width: 36px; height: 36px; font-size: 0.82rem; }
  .jr-card-name { font-size: 0.88rem; }
  .jr-card-badge { font-size: 0.6rem; }
  .jr-card-meta { font-size: 0.72rem; gap: 8px; }
  .jr-card-impact-val { font-size: 1rem; }
  .jr-disclaimer { font-size: 0.78rem; padding: 10px 14px; }
  .hot-ch-guide, .jr-guide { font-size: 0.78rem; padding: 10px 14px; }
}

@media (max-width: 380px) {
  .jr-page { padding: 0 8px 40px; }
  .jr-title { font-size: 1.15rem; }
  .jr-title-icon { font-size: 1.2rem; }
  .jr-card { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 10px 10px; }
  .jr-card-rank { width: 32px; height: 32px; font-size: 0.78rem; }
  .jr-card-name { font-size: 0.82rem; }
  .jr-card-meta { font-size: 0.68rem; }
  .jr-card-impact-val { font-size: 0.9rem; }
  .jr-stat-value { font-size: 1rem; }
  .hot-ch-guide, .jr-guide { font-size: 0.75rem; padding: 8px 10px; }
}