/*
  GamersCrawl CSS Entry
  - 실제 스타일은 src/styles/*.css 로 분리되어 있습니다.
  - import 순서(캐스케이드)를 변경하지 마세요.
*/

    /* 가로 스크롤 방지 (PC 포함) - AdSense Side Rail 호환성 */
    html {
      overflow-x: clip;
    }
    body {
      overflow-x: clip;
    }

    /* 모바일 터치 하이라이트 제거 */
    * {
      -webkit-tap-highlight-color: transparent;
    }

    /* 접근성: 시각적으로 숨기지만 스크린리더/SEO에는 노출 */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .is-hidden {
      display: none !important;
    }

    html.js-defer :is(
      .popular-banner-label,
      .popular-banner-more,
      .column-header,
      .country-name,
      .flag,
      .steam-table-header,
      .upcoming-table-header,
      .games-hub-section-title,
      .group-title,
      .group-count,
      .index-link,
      #search-results-title,
      .search-results-close,
      .home-card-title,
      .home-card-more,
      .community-panel-title,
      .community-panel-more,
      .home-news-tab,
      .home-community-tab,
      .home-rank-tab,
      .home-upcoming-tab,
      .insight-tab,
      .tab-btn,
      .home-news-card,
      .home-news-item,
      .home-community-item,
      .home-video-card,
      .home-video-item,
      .home-rank-row,
      .home-steam-row,
      .home-upcoming-row,
      .home-trend-card,
      .popular-banner-item,
      .news-grid-card,
      .news-grid-item,
      .community-item,
      .youtube-card,
      .rank-row,
      .steam-table-row,
      .upcoming-item,
      .metacritic-card,
      .games-hub-popular-card,
      .game-item,
      .games-hub-recent-card,
      .trend-feed-card,
      .game-hero-stat,
      .rank-trend-section,
      .game-rank-country-row,
      .game-steam-stat,
      .game-news-item,
      .game-community-item,
      .game-youtube-item,
      .gm-item,
      .weekly-hot-card,
      .weekly-rank-card,
      .weekly-metric-card,
      .weekly-community-card,
      .weekly-streaming-card,
      .weekly-stock-item,
      .weekly-release-item,
      .industry-card,
      .global-card
    ) {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    html.js-defer :is(
      .popular-banner-label,
      .popular-banner-more,
      .column-header,
      .country-name,
      .flag,
      .steam-table-header,
      .upcoming-table-header,
      .games-hub-section-title,
      .group-title,
      .group-count,
      .index-link,
      #search-results-title,
      .search-results-close,
      .home-card-title,
      .home-card-more,
      .community-panel-title,
      .community-panel-more,
      .home-news-tab,
      .home-community-tab,
      .home-rank-tab,
      .home-upcoming-tab,
      .insight-tab,
      .tab-btn,
      .home-news-card,
      .home-news-item,
      .home-community-item,
      .home-video-card,
      .home-video-item,
      .home-rank-row,
      .home-steam-row,
      .home-upcoming-row,
      .home-trend-card,
      .popular-banner-item,
      .news-grid-card,
      .news-grid-item,
      .community-item,
      .youtube-card,
      .rank-row,
      .steam-table-row,
      .upcoming-item,
      .metacritic-card,
      .games-hub-popular-card,
      .game-item,
      .games-hub-recent-card,
      .trend-feed-card,
      .game-hero-stat,
      .rank-trend-section,
      .game-rank-country-row,
      .game-steam-stat,
      .game-news-item,
      .game-community-item,
      .game-youtube-item,
      .gm-item,
      .weekly-hot-card,
      .weekly-rank-card,
      .weekly-metric-card,
      .weekly-community-card,
      .weekly-streaming-card,
      .weekly-stock-item,
      .weekly-release-item,
      .industry-card,
      .global-card
    ).gc-defer-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    html.js-defer .rankings-card .country-column {
      border-right-color: transparent;
    }

    html.js-defer .rankings-card .column-header {
      border-bottom-color: transparent;
    }

    /* 이미지 성능 최적화 - content-visibility 제거 (스크롤 시 회색 방지) */

    /* 썸네일/아이콘 폴백 (파비콘 중앙 배치) */
    .thumb-fallback {
      background: var(--bg-secondary, #1a1a2e) url('/favicon.svg') center/32px no-repeat !important;
    }
    .thumb-fallback img {
      opacity: 0;
    }
    .icon-fallback {
      background: var(--bg-secondary, #1a1a2e) url('/favicon.svg') center/60% no-repeat !important;
      border-radius: 6px;
    }

    /* 모바일 가로 스크롤 방지 + sticky 호환 */
    @media (max-width: 768px) {
      body {
        width: 100%;
        max-width: 100vw;
        overscroll-behavior-x: none;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      .header, .header-inner, .nav-inner {
        width: 100%;
        max-width: 100%;
      }
      .nav, .container, .site-container {
        width: 100%;
        max-width: 100%;
      }
    }
    :root {
      /* === Primary Colors - 블루 (신뢰감 있는 뉴스 사이트 느낌) === */
      --primary: #2563eb; /* 블루 */
      --primary-light: #3b82f6; /* 밝은 블루 */
      --primary-dark: #1d4ed8; /* 어두운 블루 */
      --accent: #0ea5e9; /* 스카이 블루 */

      /* === Background & Surface - 화이트 === */
      --bg: #ffffff;
      --bg-elevated: #ffffff;
      --card: #ffffff;
      --card-hover: #f8fafc; /* 연한 그레이 호버 */

      /* === Border - 웜톤 === */
      --border: #e5e2de; /* 웜 그레이 */
      --border-subtle: #f0ede8;

      /* === Text - 대비 강화 (WCAG AAA) === */
      --text: #1a1a1a; /* 메인 텍스트 */
      --text-primary: #1a1a1a;
      --text-secondary: #2d2d2d; /* 본문 설명 - 더 진하게 */
      --text-muted: #525252; /* 대비 7:1+ */
      --text-tertiary: #6b6b6b; /* 보조 텍스트 */

      /* === Typography - 본문/제목 통합 관리 (데스크탑 기본) === */
      --font-title-size: 18px;
      --font-title-weight: 700;
      --font-body-size: 16px;
      --font-desc-size: 15px;
      --font-body-weight: 600;
      --font-desc-weight: 500;
      --font-body-line-height: 1.7;

      /* === Typography - UI 요소 (탭, 배지, 네비 등) === */
      --font-tab-size: 15px;
      --font-tab-weight: 700;
      --font-badge-size: 12px;
      --font-badge-weight: 800;
      --font-small-size: 12px;
      --font-nav-size: 16px;
      --font-nav-weight: 700;

      /* === Typography - 순위 테이블 (스팀, 모바일 등) === */
      --font-rank-name-size: 14px;
      --font-rank-name-weight: 700;
      --font-rank-name-color: var(--text);
      --font-rank-dev-size: 12px;
      --font-rank-dev-weight: 500;
      --font-rank-dev-color: var(--text-muted);

      /* === Typography - 확장 크기 (전체 통합 관리) === */
      /* 초소형 - 최소 10px 유지 (가독성) */
      --font-micro-size: 10px;
      --font-tiny-size: 10px;

      /* 소형 (10-11px) - 배지 내부, 순위 숫자, 보조 정보 */
      --font-xs-size: 10px;
      --font-meta-size: 11px;

      /* === Typography - 소스 태그 (언론사, 채널명 등) === */
      --font-source-size: var(--font-small-size);
      --font-source-weight: 700;
      --font-source-color: var(--primary);

      /* 중형 (16px) - 섹션 제목 */
      --font-section-size: 16px;
      --font-section-weight: 700;

      /* 대형 (18-20px) - 큰 제목, 강조 텍스트 */
      --font-heading-size: 18px;
      --font-lg-size: 20px;

      /* 초대형 (22-28px) - 통계 숫자, 큰 값 */
      --font-xl-size: 22px;
      --font-2xl-size: 26px;
      --font-stat-size: 28px;

      /* === Insight/Accent Colors (통합 관리) === */
      --insight-icon: #1a73e8; /* 구글 블루 - 인사이트 아이콘 기본색 */
      --metric-color: #3b82f6; /* 블루 - 메트릭/통계 관련 */
      --gradient-progress: linear-gradient(90deg, #3b82f6, #2563eb); /* 프로그레스바 그라데이션 */
      --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); /* 강조 그라데이션 */

      /* === 호환성 변수 (별칭) === */
      --bg-secondary: #f8fafc; /* 보조 배경 */
      --border-color: #e2e8f0; /* 테두리 색상 */
      --bg-hover: #f1f5f9; /* 호버 배경 */
      --accent-color: #4f46e5; /* 강조 색상 */
      --card-bg: var(--card); /* 카드 배경 */
      --font-meta-weight: 500; /* 메타 텍스트 굵기 */
      --font-desc-line-height: 1.6; /* 설명 텍스트 행간 */

      /* === Shadows (Multi-layer Soft) - 개선 === */
      --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.03), 0 1px 3px rgb(0 0 0 / 0.02);
      --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 6px rgb(0 0 0 / 0.03);
      --shadow: 0 2px 4px rgb(0 0 0 / 0.03), 0 4px 12px rgb(0 0 0 / 0.05), 0 8px 24px rgb(0 0 0 / 0.04);
      --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.04), 0 12px 24px rgb(0 0 0 / 0.06), 0 24px 48px rgb(0 0 0 / 0.05);
      --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.04), 0 24px 48px rgb(0 0 0 / 0.08), 0 48px 96px rgb(0 0 0 / 0.06);

      /* === Glass Effect === */
      --glass-bg: rgba(255, 255, 255, 0.7);
      --glass-bg-solid: rgba(255, 255, 255, 0.9);
      --glass-border: rgba(255, 255, 255, 0.5);

      /* === Interactive States === */
      --hover-bg: #ebebeb;
      --active-bg: #eef2ff;
      --item-bg: #ffffff;

      /* === Semantic Colors === */
      --success: #16a34a;

      /* === Layout === */
      --radius: 16px;
      --radius-sm: 10px;
      --radius-lg: 20px;
      --radius-xl: 24px;

      /* === Spacing (Blocks/Layout) === */
      --space-xxs: 6px;
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 16px;
      --space-lg: 20px;
      --space-xl: 24px;

      --space-page-x: var(--space-md);
      --space-block-y: var(--space-md);
      --space-block-y-lg: var(--space-md);
      --space-block-y-xl: var(--space-md);
      --space-block-gap: var(--space-md);
      --space-block-gap-lg: var(--space-md);
      --space-header-gap: var(--space-md);

      /* === Animation - 스프링 효과 추가 === */
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --transition-fast: 0.15s var(--ease-in-out);
      --transition-normal: 0.25s var(--ease-out-expo);
      --transition-slow: 0.4s var(--ease-out-expo);
      --transition-elevate: transform 0.2s ease, box-shadow 0.2s ease;

      /* === Report Gradients (중립 그레이) === */
      --gradient-hot: var(--card-bg);
      --gradient-industry: var(--card-bg);
      --gradient-metrics: var(--card-bg);
      --gradient-rankings: var(--card-bg);
      --gradient-community: var(--card-bg);
      --gradient-streaming: var(--card-bg);
      --gradient-stocks: var(--card-bg);
      --gradient-primary: var(--card-bg);

      /* === Report Icon Backgrounds (구글 블루 통일) === */
      --icon-bg-hot: rgba(26, 115, 232, 0.12);
      --icon-bg-industry: rgba(26, 115, 232, 0.12);
      --icon-bg-metrics: rgba(26, 115, 232, 0.12);
      --icon-bg-rankings: rgba(26, 115, 232, 0.12);
      --icon-bg-community: rgba(26, 115, 232, 0.12);
      --icon-bg-streaming: rgba(26, 115, 232, 0.12);
      --icon-bg-stocks: rgba(26, 115, 232, 0.12);

      /* === Report Badge (20% opacity for better readability) === */
      --badge-bg-up: rgba(34, 197, 94, 0.20);
      --badge-bg-down: rgba(239, 68, 68, 0.20);
      --badge-bg-new: rgba(26, 115, 232, 0.20);

      /* === Tag Base Colors (기본 태그 색상) === */
      --tag-bg: rgba(26, 115, 232, 0.12);
      --tag-color: #1a73e8;

      /* === Section Colors (섹션 배경/아이콘 - 통합 관리) === */
      --section-gradient: #ffffff;
      --section-gradient-strong: #ffffff;
      --section-icon-bg: rgba(26, 115, 232, 0.12);
      --section-accent-bg: rgba(26, 115, 232, 0.15);
      --section-border: rgba(26, 115, 232, 0.2);

      /* === Glow Effects (라이트모드) === */
      --glow-primary: 0 0 20px rgba(79, 70, 229, 0.2);
      --glow-accent: 0 0 20px rgba(249, 115, 22, 0.2);
    }

    /* 소형 태블릿/대형 폰 (576px 이하) - 1단계 축소 (-1) */
    @media (max-width: 576px) {
      :root {
        --font-tab-size: 14px;
        --font-section-size: 15px;
        --font-heading-size: 17px;
        --font-lg-size: 19px;
        --font-stat-size: 27px;
        --font-xl-size: 21px;
        --font-2xl-size: 25px;
        --font-rank-name-size: 13px;
        --font-rank-dev-size: 11px;
      }
    }

    /* 초소형 모바일 (360px 이하) - 2단계 축소 (-1 추가) */
    @media (max-width: 360px) {
      :root {
        --font-title-size: 17px;
        --font-body-size: 15px;
        --font-desc-size: 14px;
        --font-tab-size: 13px;
        --font-nav-size: 15px;
        --font-section-size: 14px;
        --font-heading-size: 16px;
        --font-lg-size: 18px;
        --font-stat-size: 26px;
        --font-xl-size: 20px;
        --font-2xl-size: 24px;
        --font-small-size: 11px;
        --font-badge-size: 11px;
        --font-meta-size: 10px;
        --font-xs-size: 9px;
        --font-rank-name-size: 12px;
        --font-rank-dev-size: 10px;
        --space-page-x: 6px;
      }
    }

    /* PC: 섹션/피드 간격 20px 통일 */
    @media (min-width: 769px) {
      :root {
        --space-block-y: var(--space-lg);
        --space-block-y-lg: var(--space-lg);
        --space-block-y-xl: var(--space-lg);
        --space-block-gap: var(--space-lg);
        --space-block-gap-lg: var(--space-lg);
        --space-header-gap: var(--space-lg);
      }
    }

    /* === Light Mode - 메인메뉴 스타일 === */
    .nav-item {
      color: #1f2937;
    }
    .nav-item:hover {
      color: #111827;
      background: #f1f5f9;
    }
    /* 스와이프 중 하이라이트 비활성화 */
    .nav-item.swiping,
    .nav-item.swiping:hover,
    .nav-item.swiping:active,
    .nav-item.swiping:focus {
      background: transparent !important;
      color: inherit !important;
      outline: none !important;
      box-shadow: none !important;
    }
    .nav-item.active {
      color: #1e293b;
      background: transparent;
    }
    .nav-item svg {
      stroke: #374151;
    }
    .nav-item:hover svg {
      stroke: #1f2937;
    }
    .nav-item.active svg {
      stroke: #1e293b;
    }
    /* 서브탭 버튼 */
    .tab-btn {
      color: #1e293b;
      background: var(--bg);
      border: 1px solid var(--border);
    }
    .tab-btn:hover {
      color: #0f172a;
      background: var(--hover-bg);
    }
    /* 스와이프 중 탭버튼 하이라이트 비활성화 */
    .tab-btn.swiping,
    .tab-btn.swiping:hover,
    .tab-btn.swiping:active,
    .tab-btn.swiping:focus {
      background: var(--bg) !important;
      color: #1e293b !important;
      outline: none !important;
      box-shadow: none !important;
    }
    .tab-btn.active {
      color: #fff;
      background: var(--primary);
      border-color: var(--primary);
    }

/* ========== Dark Mode Overrides ========== */

@media (prefers-color-scheme: dark) {
  img[loading="lazy"] {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  }
}

    /* === Dark Mode === */
    @media (prefers-color-scheme: dark) {
      :root {
        /* Primary Colors - 게이밍 느낌 오렌지 계열 */
        --primary: #ff6b35; /* Orange-Red */
        --primary-light: #ff8f66;
        --primary-dark: #e55a2b;
        --accent: #ffc107; /* Gold */

        /* Background & Surface - 검정 계열 (청색 배제) */
        --bg: #121212; /* Material Design 표준 다크 */
        --bg-elevated: #1e1e1e; /* Neutral 900 */
        --card: #1e1e1e; /* Neutral 900 */
        --card-hover: #2a2a2a; /* Neutral 800 */

        /* Border - 검정 계열 */
        --border: #333333; /* Neutral 700 */
        --border-subtle: #262626; /* Neutral 800 */

        /* Text - WCAG AA 준수 */
        --text: #f0f0f0; /* 대비 높임 */
        --text-primary: #ffffff; /* 다크모드 - 순백색 */
        --text-secondary: rgba(255, 255, 255, 0.9); /* 본문 설명 - 더 밝게 */
        --text-muted: #888888; /* 대비 높임 */
        --text-tertiary: #9ca3af; /* 보조 텍스트 - WCAG AA 준수 (대비 7.4:1) */

        /* 호환성 변수 (별칭) - 다크모드 */
        --bg-secondary: #262626;
        --border-color: #333333;
        --bg-hover: #2a2a2a;
        --accent-color: #ff6b35;

        /* Shadows - 다크모드 최적화 + 미세 글로우 */
        --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 0 1px rgb(255 255 255 / 0.03);
        --shadow: 0 2px 4px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3), 0 0 1px rgb(255 255 255 / 0.05);
        --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 12px 24px rgb(0 0 0 / 0.35), 0 0 1px rgb(255 255 255 / 0.05);
        --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.4), 0 24px 48px rgb(0 0 0 / 0.35), 0 0 1px rgb(255 255 255 / 0.06);

        /* Glass Effect - 검정 계열 */
        --glass-bg: rgba(30, 30, 30, 0.75);
        --glass-bg-solid: rgba(30, 30, 30, 0.95);
        --glass-border: rgba(255, 255, 255, 0.08);

        /* Interactive States - 검정 계열 */
        --hover-bg: #2a2a2a;

        /* Semantic Colors - 다크모드 */
        --success: #4ade80;
        --active-bg: rgba(255, 107, 53, 0.15);
        --item-bg: #1e1e1e;

        /* Glow Effects - 게이밍 특화 */
        --glow-primary: 0 0 20px rgba(255, 107, 53, 0.3);
        --glow-accent: 0 0 20px rgba(255, 193, 7, 0.25);

        /* === 다크모드 전용 Insight/Accent Colors (오렌지) === */
        --insight-border: rgba(255, 107, 53, 0.25);
        --insight-header-border: rgba(255, 107, 53, 0.2);
        --insight-icon: #ff6b35;
        --metric-color: #ff6b35;
        --gradient-progress: linear-gradient(90deg, #ff6b35, #ffc107);
        --gradient-accent: linear-gradient(135deg, #ff6b35 0%, #ffc107 100%);

        /* === 다크모드 전용 Icon Backgrounds (오렌지 통일) === */
        --icon-bg-hot: rgba(255, 107, 53, 0.25);
        --icon-bg-industry: rgba(255, 107, 53, 0.25);
        --icon-bg-metrics: rgba(255, 107, 53, 0.25);
        --icon-bg-rankings: rgba(255, 107, 53, 0.25);
        --icon-bg-community: rgba(255, 107, 53, 0.25);
        --icon-bg-streaming: rgba(255, 107, 53, 0.25);
        --icon-bg-stocks: rgba(255, 107, 53, 0.25);

        /* === 다크모드 전용 Tag Base Colors (밝은 오렌지) === */
        --tag-bg: rgba(255, 112, 67, 0.18);
        --tag-color: #ff7043;

        /* === 다크모드 전용 Section Colors (미니멀 - 투명/단색) === */
        --section-gradient: transparent;
        --section-gradient-strong: rgba(255, 255, 255, 0.02);
        --section-icon-bg: rgba(255, 107, 53, 0.15);
        --section-accent-bg: rgba(255, 255, 255, 0.05);
        --section-border: rgba(255, 255, 255, 0.1);
      }

      /* 다크모드 메인탭 - 흰색 톤 */
      .nav-item {
        color: rgba(255, 255, 255, 0.85) !important;
      }
      .nav-item:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.1) !important;
      }
      /* 스와이프 중 하이라이트 비활성화 (다크모드) */
      .nav-item.swiping,
      .nav-item.swiping:hover,
      .nav-item.swiping:active,
      .nav-item.swiping:focus {
        background: transparent !important;
        color: rgba(255, 255, 255, 0.85) !important;
        outline: none !important;
        box-shadow: none !important;
      }
      .nav-item.active {
        color: #fff !important;
        background: transparent !important;
      }
      .nav-item svg {
        stroke: rgba(255, 255, 255, 0.85) !important;
        opacity: 1 !important;
      }
      .nav-item:hover svg {
        stroke: #fff !important;
      }
      .nav-item.active svg {
        stroke: #fff !important;
      }

      /* 다크모드 서브탭 - 흰색 톤 */
      .tab-btn {
        color: rgba(255, 255, 255, 0.85) !important;
      }
      .tab-btn:hover {
        color: #fff !important;
      }
      .tab-btn.active {
        color: #fff !important;
      }
      /* 스와이프 중 탭버튼 하이라이트 비활성화 (다크모드) */
      .tab-btn.swiping,
      .tab-btn.swiping:hover,
      .tab-btn.swiping:active,
      .tab-btn.swiping:focus {
        background: transparent !important;
        color: rgba(255, 255, 255, 0.85) !important;
        outline: none !important;
        box-shadow: none !important;
      }
      .tab-btn .news-favicon {
        filter: brightness(1.5) contrast(0.9) !important;
      }

      /* 다크모드 홈 서브탭 - 밝은 색상 */
      .home-news-tab,
      .home-community-tab,
      .home-video-tab {
        color: rgba(255, 255, 255, 0.85) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
      }
      .home-news-tab:hover,
      .home-community-tab:hover,
      .home-video-tab:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.15) !important;
      }
      .home-news-tab.active,
      .home-community-tab.active,
      .home-video-tab.active {
        background: var(--primary) !important;
        color: #fff !important;
      }

      /* 다크모드 - 인사이트 페이지 탭 */
      .insight-tab {
        color: rgba(255, 255, 255, 0.85) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
      }
      .insight-tab:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.15) !important;
      }
      .insight-tab.active {
        background: var(--primary) !important;
        color: #fff !important;
        border-color: var(--primary) !important;
      }

      /* 다크모드 - 모든 본문/설명 텍스트 흰색 계열 */
      .home-insight-desc,
      .weekly-section-desc,
      .weekly-hot-desc,
      .weekly-timeline-desc,
      .weekly-metric-desc,
      .weekly-community-desc,
      .weekly-streaming-desc,
      .weekly-highlight-desc,
      .weekly-mvp-desc,
      .weekly-global-desc,
      .weekly-ranking-desc,
      .weekly-rank-reason,
      .weekly-stock-comment,
      .weekly-stock-rank-comment,
      .daily-community-desc,
      .daily-streaming-desc,
      .daily-industry-desc,
      .insight-item-desc,
      .report-section-desc,
      .stock-comment,
      .stock-desc {
        color: rgba(255, 255, 255, 0.9) !important;
      }

      /* 다크모드 - 모든 제목 텍스트 순백색 */
      .home-insight-title,
      .weekly-section-title,
      .weekly-hot-title,
      .weekly-timeline-title,
      .weekly-metric-title,
      .weekly-community-title,
      .weekly-streaming-title,
      .weekly-highlight-title,
      .weekly-mvp-name,
      .weekly-global-title,
      .weekly-ranking-title,
      .weekly-rank-title,
      .weekly-stock-name,
      .daily-community-title,
      .daily-streaming-title,
      .daily-industry-title,
      .insight-item-title,
      .report-section-title,
      .stock-name,
      .stock-title {
        color: #fff !important;
      }

      /* 다크모드 - 태그/배지 텍스트 (섹션별 고유 색상 유지) */
      /* 태그는 각 섹션별 색상을 유지하므로 강제 흰색 제거 */
      .weekly-ranking-badge {
        color: rgba(255, 255, 255, 0.95) !important;
      }

      /* 다크모드 - 에디터스 노트 */
      .weekly-editor-note,
      .insight-summary {
        color: rgba(255, 255, 255, 0.95) !important;
      }

      /* 다크모드 - 인포그래픽 텍스트 */
      .insight-info-label,
      .insight-info-value,
      .insight-info-sub {
        color: rgba(255, 255, 255, 0.9) !important;
      }

      /* 다크모드 - 주식 정보 텍스트 */
      .stock-item-name,
      .stock-item-comment,
      .stock-item-desc {
        color: rgba(255, 255, 255, 0.9) !important;
      }

      /* 다크모드 - 인사이트 페이지 전체 텍스트 */
      .insight-container p,
      .insight-container span:not(.home-insight-tag):not([class*="badge"]):not([class*="rank"]):not(.weekly-stock-percent):not(.weekly-stock-arrow) {
        color: rgba(255, 255, 255, 0.9);
      }

      /* 다크모드 - 주간 게임주 분석 상승/하락 색상 */
      .weekly-stock-change.up,
      .weekly-stock-change.up .weekly-stock-arrow,
      .weekly-stock-change.up .weekly-stock-percent {
        color: #4ade80 !important;
      }

      .weekly-stock-change.down,
      .weekly-stock-change.down .weekly-stock-arrow,
      .weekly-stock-change.down .weekly-stock-percent {
        color: #f87171 !important;
      }
    }

/* ===== Ads (AdSense) - PC/모바일 분리 방식 ===== */

/* ins 태그 기본 display (인라인 스타일 대신 CSS로 제어) */
ins.adsbygoogle {
  display: inline-block;
}

/* ===== 광고 크기 ===== */

/* 모바일 상단 광고 (320x100) - Responsive001 */
.ad-card-mobile-top {
  width: 100%;
  height: 100px;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 모바일 중간 광고 (300x250) - Responsive002~005 */
.ad-card-mobile-mid {
  width: 100%;
  height: 250px;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* PC 홈 상단 광고 (728x90) - ResponsivePCHome001 */
.ad-card-pc-home {
  width: 100%;
  height: 90px;
  min-height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* PC 상단 광고 (970x90) - ResponsivePC001~005 */
.ad-card-pc {
  width: 100%;
  height: 90px;
  min-height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* PC 사이드바 - Vertical (300x600) */
.ad-card-vertical {
  width: 300px;
  height: 600px;
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* PC 사이드바 - Rectangle (300x250) */
.ad-card-rectangle {
  width: 300px;
  height: 250px;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== PC/모바일 표시 규칙 ===== */
/* 인라인 <style> 태그에서 media query로 처리 (Google AdSense 권장 방식) */
/* ads.js의 각 광고 함수에서 .adslot-* 클래스로 크기/숨김 제어 */

/* ===== 광고 카드 공통 스타일 ===== */

.ad-card {
  background: var(--card);
  border-radius: var(--radius);
  outline: 1px solid var(--border);
  overflow: hidden;
  touch-action: pan-x pan-y;
}

/* ins/iframe 스와이프 허용 + 마진 제거 */
.ad-card ins,
.ad-card iframe {
  touch-action: pan-x pan-y;
  margin: 0;
}

/* unfilled일 때만 로고 플레이스홀더 */
.ad-card:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
  background-image: url('/favicon-placeholder.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60px;
}

/* ===== 광고 여백 ===== */

/* 기본: 상단 마진만 (컨테이너 gap과 중복 방지) */
main .ad-card {
  margin: var(--space-block-gap, 16px) 0 0 0;
}

/* 첫 번째 광고: 상단만 마진 */
main > .ad-card:first-child,
.page-container > .ad-card:first-child,
.game-container > .ad-card:first-child,
.games-hub-container > .ad-card:first-child,
.deep-dive-container > .ad-card:first-child {
  margin: var(--space-block-y, 24px) 0 0 0;
}

/* insight-container는 컨테이너 padding이 이미 있으므로 상단 마진 제거 */
.insight-container > .ad-card:first-child {
  margin: 0;
}

/* insight-container, insight-panel, weekly-report 내부 광고 */
.insight-container .ad-card,
.insight-panel .ad-card,
.weekly-report .ad-card {
  margin: var(--space-block-gap, 16px) 0 0 0;
}

@media (max-width: 768px) {
  main > .ad-card:first-child,
  .page-container > .ad-card:first-child,
  .game-container > .ad-card:first-child,
  .games-hub-container > .ad-card:first-child,
  .deep-dive-container > .ad-card:first-child {
    margin: var(--space-block-gap, 16px) 0 0 0;
  }
}

/* 홈/flex 컨테이너: 마진 없음 (gap으로 처리) */
.home-main .ad-card,
.home-sidebar .ad-card {
  margin: 0;
}

/* 모바일 홈: 첫 광고 상단 마진 */
@media (max-width: 768px) {
  .home-main > .ad-card:first-child {
    margin-top: var(--space-block-gap, 16px);
  }
}

/* ===== 홈 페이지 특별 규칙 ===== */

/* 모바일 홈: 사이드바 숨김 (PC 전용) */
@media (max-width: 768px) {
  .home-sidebar {
    display: none !important;
  }
}

/* ===== Tabs (공통) ===== */

:root {
  /* tab-group */
  --tab-group-gap: 4px;
  --tab-group-justify: flex-start;

  /* tab-btn (in tab-group) */
  --tab-btn-flex: 1 1 0;
  --tab-btn-min-width: 0;
  --tab-btn-min-height: 44px;
  --tab-btn-padding: 12px 8px;
  --tab-btn-gap: 6px;
  --tab-btn-overflow: hidden;

  /* tab-btn icon */
  --tab-btn-icon-size: 18px;
  --tab-btn-icon-display: inline-block;
}

/* PC: 버튼은 자동폭, 그룹은 가운데 정렬 */
@media (min-width: 769px) {
  :root {
    --tab-group-gap: 8px;
    --tab-group-justify: center;

    --tab-btn-flex: 0 0 auto;
    --tab-btn-min-width: auto;
    --tab-btn-min-height: 38px;
    --tab-btn-padding: 9px 20px;
    --tab-btn-gap: 6px;
    --tab-btn-overflow: visible;

    --tab-btn-icon-size: 16px;
    --tab-btn-icon-display: inline-block;
  }
}

/* 태블릿(768px 이하): 약간 더 컴팩트 */
@media (max-width: 768px) {
  :root {
    --tab-btn-padding: 10px 6px;
    --tab-btn-min-height: 42px;
    --tab-btn-gap: 5px;
    --tab-btn-icon-size: 16px;
  }
}

/* 모바일(480px 이하): 버튼/아이콘을 조금 더 컴팩트하게 */
@media (max-width: 480px) {
  :root {
    --tab-btn-padding: 10px 8px;
    --tab-btn-min-height: 40px;
    --tab-btn-gap: 4px;
    --tab-btn-icon-size: 12px;
  }
}

/* 초소형(360px 이하): 아이콘 숨김 */
@media (max-width: 360px) {
  :root {
    --tab-btn-padding: 8px 6px;
    --tab-btn-min-height: 38px;
    --tab-btn-icon-display: none;
  }
}

/* 페이지 탭 그룹: width 100% 유지 */
#storeTab,
#chartTab,
#steamTab,
#upcomingTab {
  width: 100%;
}

/* 탭 그룹 */
:is(.tab-group, .insight-tabs) {
  display: flex;
  justify-content: var(--tab-group-justify);
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  gap: var(--tab-group-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

:is(.tab-group, .insight-tabs)::-webkit-scrollbar {
  display: none;
}

/* 탭 버튼 기본 스타일 */
:is(.tab-btn, .insight-tab) {
  font-size: var(--font-tab-size);
  font-weight: var(--font-tab-weight);
  color: #1e293b;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* PC에서만 hover 적용 (모바일 터치 문제 방지) */
@media (hover: hover) {
  :is(.tab-btn, .insight-tab):hover {
    color: #0f172a;
    background: var(--hover-bg);
  }
}

/* 터치/클릭 중 스타일 */
:is(.tab-btn, .insight-tab):active:not(.active) {
  background: var(--hover-bg);
  transform: scale(0.98);
}

:is(.tab-btn, .insight-tab).active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-badge-weight);
}

/* 탭 그룹 내부 버튼 레이아웃 */
:is(.tab-group .tab-btn, .insight-tabs .insight-tab) {
  flex: var(--tab-btn-flex);
  min-width: var(--tab-btn-min-width);
  min-height: var(--tab-btn-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tab-btn-gap);
  padding: var(--tab-btn-padding);
  line-height: 1.2;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: var(--tab-btn-overflow);
  text-overflow: ellipsis;
}

/* 탭 버튼 내부 아이콘(파비콘 등) */
.tab-btn .news-favicon {
  display: var(--tab-btn-icon-display);
  width: var(--tab-btn-icon-size);
  height: var(--tab-btn-icon-size);
  flex-shrink: 0;
}

/* ===========================
   Insight Tabs (일간/주간)
   =========================== */

.insight-tabs {
  margin: 0 0 16px 0;
}

/* PC 인사이트 탭 스타일 - .tab-btn과 동일한 크기/정렬 */
@media (min-width: 769px) {
  .insight-tabs {
    width: auto;
    max-width: 400px;
    margin: 0 auto 20px auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }
}

/* ===== Home Sub Tabs (뉴스/커뮤니티/영상) ===== */

.home-news-tabs,
.home-community-tabs,
.home-video-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-news-tabs::-webkit-scrollbar,
.home-community-tabs::-webkit-scrollbar,
.home-video-tabs::-webkit-scrollbar {
  display: none;
}

.home-news-tab,
.home-community-tab,
.home-video-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: var(--font-tab-size);
  font-weight: var(--font-tab-weight);
  color: #1e293b;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.home-news-tab img,
.home-community-tab img,
.home-video-tab img {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.home-news-tab:hover,
.home-community-tab:hover,
.home-video-tab:hover {
  color: #0f172a;
  background: var(--hover-bg);
}

.home-news-tab.active,
.home-community-tab.active,
.home-video-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.home-news-tab.active img {
  filter: brightness(1.2);
}

.home-news-panel,
.home-community-panel,
.home-video-panel {
  display: none;
}

.home-news-panel.active,
.home-community-panel.active,
.home-video-panel.active {
  display: block;
}

@media (max-width: 768px) {
  .home-news-tabs,
  .home-community-tabs,
  .home-video-tabs {
    display: none !important;
  }
}

/* ===== Home/Site Styles (split) ===== */

    /* ========== 홈 서머리 섹션 ========== */
    .home-section {
      display: none;
      padding: 0;
    }

    .home-section.active {
      display: block;
    }

    /* 홈 메인 상단 광고 */
    .home-main-ad {
      margin-bottom: 0;
    }

    /* 홈 레이아웃 컨테이너 */
	    .home-container {
	      display: grid;
	      grid-template-columns: 1fr 300px;
	      gap: var(--space-block-gap);
	      padding: var(--space-block-y) 0;
	      align-items: start; /* 두 컬럼 상단 정렬 보장 */
	    }

	    .home-main {
	      display: flex;
	      flex-direction: column;
	      gap: var(--space-block-gap);
	      min-width: 0;
	      overflow-x: clip;
	    }

    .home-sidebar {
      display: flex;
      flex-direction: column;
      gap: var(--space-block-gap);
    }

    /* 홈 카드 공통 */
    .home-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      overflow: hidden;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    }

    .home-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .home-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      padding: 12px 20px;
      height: 52px;
      box-sizing: border-box;
      border-bottom: 1px solid var(--border);
      background: transparent;
    }

    .home-card-title {
      font-size: var(--font-title-size);
      font-weight: var(--font-title-weight);
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 홈 인사이트 제목 행 (태그 위, 제목 아래 세로 배치) */
    .home-insight-title-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 8px;
    }

    .home-insight-title-row .weekly-hot-tag {
      margin-bottom: 0;
      flex-shrink: 0;
    }

    .home-insight-title-row .weekly-hot-title {
      margin: 0;
      line-height: 1.4;
    }

    .home-card-title svg {
      width: 24px;
      height: 24px;
      stroke: var(--primary);
    }

    /* 홈 카드 AM/PM 밑줄 스타일 */
    .home-card-ampm-underline {
      font-weight: var(--font-badge-weight);
      padding-bottom: 2px;
      border-bottom: 2px solid;
    }

    .home-card-ampm-underline.am {
      color: #fbbf24;
      border-bottom-color: #fbbf24;
    }

    .home-card-ampm-underline.pm {
      color: #a78bfa;
      border-bottom-color: #a78bfa;
    }

    .home-card-more {
      font-size: var(--font-meta-size);
      font-weight: var(--font-badge-weight);
      color: var(--primary);
      text-decoration: none;
      transition: opacity var(--transition-fast);
    }

    .home-card-more:hover {
      opacity: 0.7;
    }

    /* 홈 카드 컨트롤 (매출/인기 + 더보기) */
    .home-card-controls {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: nowrap;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .home-chart-toggle {
      display: flex;
      align-items: center;
      gap: 3px;
      background: transparent;
      padding: 3px;
      border-radius: 5px;
    }

    .home-chart-toggle .tab-btn.small {
      font-size: 13px !important;
      font-weight: var(--font-tab-weight) !important;
      padding: 5px 12px !important;
      border-radius: 4px;
      min-width: auto !important;
      min-height: auto !important;
      line-height: 1.3;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 홈 랭킹 차트 컨테이너 */
    .home-rank-chart {
      display: none;
    }

    .home-rank-chart.active {
      display: block;
    }

    /* 홈 스팀 차트 컨테이너 */
    .home-steam-chart {
      display: none;
    }

    .home-steam-chart.active {
      display: block;
    }

    .home-card-body {
      padding: 0;
    }

    /* 스크롤 형태 인사이트 */
    .home-insight-scroll {
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .home-insight-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .home-insight-section-title {
      font-size: var(--font-title-size);
      font-weight: var(--font-title-weight);
      color: var(--text-primary);
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .home-insight-section-items {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .home-insight-desc {
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text-secondary);
      margin-top: 4px;
      line-height: var(--font-body-line-height);
      word-break: keep-all;
    }

    /* 데일리 포커스 문구 - 강조 카드 스타일 */
    .home-daily-focus {
      padding: 12px 16px 16px;
    }

	    .home-daily-focus-text {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      line-height: var(--font-body-line-height);
      color: var(--text);
      margin: 0;
      padding: 16px;
	      background: #ffffff;
	      border: 1px solid var(--border);
	      border-radius: var(--radius);
	    }

    /* 홈 트렌드 그리드 (일간/주간 2컬럼 - 이미지 피드 스타일) */
    .home-trend-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 12px 16px 16px;
    }

	    .home-trend-card {
      display: block;
	      background: #ffffff;
	      border: 1px solid var(--border);
	      border-radius: var(--radius);
	      text-decoration: none;
	      overflow: hidden;
	      transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	    }

    .home-trend-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .home-trend-card-image {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .home-trend-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .home-trend-card-image img[src=""],
    .home-trend-card-image img:not([src]) {
      display: none;
    }

    .home-trend-card-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      backdrop-filter: blur(8px);
    }

    .home-trend-card-tag.weekly {
      background: rgba(0, 0, 0, 0.5);
    }

    .home-trend-card-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      margin: 0;
      padding: 12px;
      line-height: 1.4;
      height: 60px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    @media (max-width: 768px) {
      .home-trend-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 8px 12px 12px;
      }

      .home-trend-card-title {
        padding: 12px 12px 14px;
      }
    }

    /* 인사이트 그리드 (좌우 2열) */
    .home-insight-grid {
      display: flex;
      gap: 20px;
      padding: 16px 20px;
      flex: 1;
    }

    .home-insight-split {
      display: flex;
      gap: 20px;
      padding: 16px 20px;
      flex: 1;
    }

    .home-insight-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .home-insight-column .home-insight-item {
      flex: 1;
    }

    .home-insight-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 14px 16px;
      background: var(--hover-bg);
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }

    /* 순위 변동 배지 */
    .ranking-badge,
    .weekly-ranking-badge {
      display: inline-flex;
      align-items: center;
      font-size: var(--font-badge-size);
      font-weight: var(--font-badge-weight);
      padding: 4px 10px;
      border-radius: 12px;
      background: var(--border);
      color: var(--text-secondary);
      width: fit-content;
      margin-bottom: 10px;
    }

    .ranking-badge.up,
    .weekly-ranking-badge.up {
      background: rgba(34, 197, 94, 0.15);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .ranking-badge.down,
    .weekly-ranking-badge.down {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .home-insight-header {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .home-insight-tag {
      font-size: var(--font-meta-size);
      font-weight: var(--font-badge-weight);
      color: var(--primary);
      background: rgba(99, 102, 241, 0.15);
      border: 1px solid rgba(99, 102, 241, 0.3);
      padding: 4px 10px;
      border-radius: 20px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .home-insight-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-title-weight);
      color: var(--text-primary);
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 주요 지표 탭 - 좌우 2열 그리드 */
    .home-metrics-grid {
      display: flex;
      gap: 20px;
      padding: 16px 20px;
      flex: 1;
    }

    .home-metrics-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .home-metrics-section {
      background: linear-gradient(135deg, var(--hover-bg) 0%, rgba(99, 102, 241, 0.05) 100%);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      padding: 16px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .home-metrics-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .home-metrics-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-title-weight);
      color: var(--text-primary);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .home-metrics-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: var(--font-body-size);
      padding: 8px 10px;
      background: var(--card-bg);
      border-radius: 6px;
      transition: background 0.15s;
    }

    .home-metrics-item:hover {
      background: var(--hover-bg);
    }

    .metric-rank {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
      color: white;
      border-radius: 6px;
      font-size: var(--font-meta-size);
      font-weight: var(--font-badge-weight);
      flex-shrink: 0;
    }

    .home-metrics-item:nth-child(1) .metric-rank {
      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    }

    .home-metrics-item:nth-child(2) .metric-rank {
      background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    }

    .home-metrics-item:nth-child(3) .metric-rank {
      background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
    }

    .metric-name {
      flex: 1;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: var(--font-desc-weight);
    }

    .metric-up {
      color: #ef4444;
      font-size: var(--font-badge-size);
      font-weight: var(--font-badge-weight);
    }

    .metric-down {
      color: #3b82f6;
      font-size: var(--font-badge-size);
      font-weight: var(--font-badge-weight);
    }

    .metric-same {
      color: var(--text-secondary);
      font-size: var(--font-badge-size);
    }

    .metric-ccu {
      color: var(--primary);
      font-size: var(--font-badge-size);
      font-weight: var(--font-meta-weight);
      white-space: nowrap;
    }

    .metric-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
      background: rgba(255,255,255,0.1);
    }

    .metric-platform-badge {
      font-size: var(--font-micro-size);
      font-weight: var(--font-meta-weight);
      padding: 2px 5px;
      border-radius: 3px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .metric-platform-badge.ios {
      background: rgba(0, 122, 255, 0.15);
      color: #007AFF;
    }

    .metric-platform-badge.android {
      background: rgba(61, 220, 132, 0.15);
      color: #3DDC84;
    }

    .metric-new {
      background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
      color: white;
      font-size: var(--font-xs-size);
      font-weight: var(--font-badge-weight);
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .metric-empty {
      color: var(--text-muted);
      font-size: var(--font-small-size);
      text-align: center;
      padding: 16px;
    }

    /* 홈 커뮤니티 좌우 분할 레이아웃 */
    .home-community-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 16px;
    }

    .home-community-column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow: hidden;
      min-width: 0;
    }

    .home-community-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      text-decoration: none;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      min-width: 0;
      max-width: 100%;
    }

    .home-community-item:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    .home-community-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      border-radius: 4px;
    }

    .home-community-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    @media (max-width: 768px) {
      .home-community-split {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
      }
      .home-community-column {
        width: 100%;
      }
      .home-community-item {
        padding: 12px 14px;
      }
    }

    /* 홈 뉴스/영상 공통 - 카드/리스트 */
    :is(.home-news-split, .home-video-split) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      padding: 20px;
    }

    :is(.home-news-column, .home-video-column) {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    :is(.home-news-card, .home-video-card) {
      text-decoration: none;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    :is(.home-news-card:hover, .home-video-card:hover) {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    :is(.home-news-card-thumb, .home-video-card-thumb) {
      position: relative;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: rgba(255,255,255,0.1);
    }

    :is(.home-news-card-thumb img, .home-video-card-thumb img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    :is(.home-news-card-tag, .home-video-card-tag) {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 4px;
      backdrop-filter: blur(8px);
    }

    :is(.home-news-card-info, .home-video-card-info) {
      padding: 12px 12px 14px;
      height: 70px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }

    :is(.home-news-card-title, .home-video-card-title) {
      font-size: var(--font-body-size);
      font-weight: var(--font-title-weight);
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
    }

    /* 가로형 배너 카드 리스트 */
    :is(.home-news-list, .home-video-list) {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    :is(.home-news-item, .home-video-item) {
      display: flex;
      align-items: stretch;
      text-decoration: none;
      background: var(--card-bg);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      overflow: hidden;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      height: 82px;
    }

    :is(.home-news-item:hover, .home-video-item:hover) {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    :is(.home-news-item-thumb, .home-video-item-thumb) {
      position: relative;
      width: 120px;
      height: 100%;
      flex-shrink: 0;
      overflow: hidden;
      background: rgba(255,255,255,0.1);
    }

    :is(.home-news-item-thumb img, .home-video-item-thumb img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    :is(.home-news-item-tag, .home-video-item-tag) {
      position: absolute;
      top: 6px;
      left: 6px;
      padding: 2px 5px;
      font-size: 9px;
      font-weight: 600;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 3px;
      backdrop-filter: blur(8px);
    }

    :is(.home-news-item-info, .home-video-item-info) {
      flex: 1;
      padding: 10px;
      display: flex;
      align-items: center;
    }

    :is(.home-news-title, .home-video-item-title) {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 뉴스/비디오 모바일 반응형 */
    @media (max-width: 768px) {
      :is(.home-news-split, .home-video-split) {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      :is(.home-news-card-info, .home-video-card-info) {
        height: auto;
        min-height: auto;
        padding: 12px;
      }

      :is(.home-news-card-title, .home-video-card-title) {
        height: auto;
        -webkit-line-clamp: 3;
      }

      :is(.home-news-item-thumb, .home-video-item-thumb) {
        width: 100px;
      }

      :is(.home-news-item, .home-video-item) {
        height: 76px;
      }

      :is(.home-news-title, .home-video-item-title) {
        font-size: var(--font-desc-size);
        -webkit-line-clamp: 3;
      }
    }

    /* 홈 리스트 아이템 */
    .home-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
      text-decoration: none;
      transition: background var(--transition-fast);
    }

    .home-item:hover {
      background: var(--hover-bg);
    }

    .home-rank {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-badge-size);
      font-weight: var(--font-badge-weight);
      color: var(--text-muted);
      background: var(--hover-bg);
      border-radius: 6px;
      flex-shrink: 0;
    }

    .home-favicon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .home-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    .home-tag {
      font-size: var(--font-meta-size);
      font-weight: var(--font-badge-weight);
      color: var(--primary);
      background: var(--active-bg);
      padding: 2px 6px;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .home-empty {
      padding: 40px 20px;
      text-align: center;
      color: var(--text-muted);
      font-size: var(--font-body-size);
    }

    /* 홈 영상 - 큰 카드 hover는 조금 더 강조 */
    .home-video-card:hover {
      box-shadow: var(--shadow-lg);
    }

    .home-video-live {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: #e53935;
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--font-meta-size);
      font-weight: var(--font-badge-weight);
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .home-video-live::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
      flex-shrink: 0;
    }

    .home-video-live-sm {
      position: absolute;
      bottom: 4px;
      left: 4px;
      background: #e53935;
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--font-tiny-size);
      font-weight: var(--font-badge-weight);
      padding: 2px 4px;
      border-radius: 2px;
      white-space: nowrap;
    }

    .home-video-live-sm::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
      flex-shrink: 0;
    }

    /* 홈 모바일 랭킹/출시 탭 */
    :is(.home-rank-tabs, .home-upcoming-tabs) {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      gap: 8px;
      border-bottom: 1px solid var(--border);
    }

    :is(.home-rank-tab, .home-upcoming-tab) {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--hover-bg);
      border: none;
      border-radius: 8px;
      font-weight: var(--font-tab-weight);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .home-rank-tab {
      gap: 6px;
      padding: 8px 12px;
      font-size: var(--font-tab-size);
    }

    .home-rank-tab img {
      width: 16px;
      height: 16px;
    }

    .home-rank-tab.active {
      background: var(--primary);
      color: #fff;
    }

    .home-rank-content {
      padding: 8px 0;
    }

    .home-rank-list {
      display: none;
    }

    .home-rank-list.active {
      display: block;
    }

    :is(.home-rank-row, .home-steam-row, .home-upcoming-row) {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      text-decoration: none;
      color: inherit;
      transition: background var(--transition-fast);
    }

    .home-rank-row {
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
      position: relative;
    }

    .home-rank-row:last-child {
      border-bottom: none;
    }

    .home-rank-row:hover {
      background: var(--hover-bg);
      color: inherit;
    }

    /* 1-3위 특별 강조 - 주요 지표 탭과 통일된 그라디언트 */
    .home-rank-row:nth-child(1) .home-rank-num {
      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
      color: #fff !important;
      border-color: transparent !important;
    }

    .home-rank-row:nth-child(2) .home-rank-num {
      background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%) !important;
      color: #fff !important;
      border-color: transparent !important;
    }

    .home-rank-row:nth-child(3) .home-rank-num {
      background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
      color: #fff !important;
      border-color: transparent !important;
    }

    .home-rank-num {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-badge-size);
      font-weight: var(--font-badge-weight);
      color: var(--text-muted);
      background: var(--hover-bg);
      border-radius: 6px;
      flex-shrink: 0;
    }

    .home-rank-num.top1 {
      background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
      color: #fff;
    }

    .home-rank-num.top2 {
      background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
      color: #fff;
    }

    .home-rank-num.top3 {
      background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
      color: #fff;
    }

    :is(.home-rank-icon, .home-steam-icon, .home-upcoming-icon) {
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
      background: rgba(255,255,255,0.1);
    }

    .home-rank-icon {
      width: 36px;
      height: 36px;
    }

    .home-rank-name {
      font-size: var(--font-rank-name-size);
      font-weight: var(--font-rank-name-weight);
      color: var(--font-rank-name-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    .home-rank-link {
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    .home-rank-link:hover {
      color: var(--primary);
    }

    /* 홈 스팀 순위 */
    .home-steam-row:hover {
      background: var(--hover-bg);
      color: inherit;
    }

    :is(.home-steam-icon, .home-upcoming-icon) {
      width: 40px;
      height: 40px;
    }

    :is(.home-steam-info, .home-upcoming-info) {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    :is(.home-steam-name, .home-upcoming-name) {
      font-size: var(--font-rank-name-size);
      font-weight: var(--font-rank-name-weight);
      color: var(--font-rank-name-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :is(.home-steam-players, .home-upcoming-date) {
      font-size: var(--font-rank-dev-size);
      font-weight: var(--font-rank-dev-weight);
      color: var(--font-rank-dev-color);
    }

    /* 홈 출시 예정 */
    /* 홈 신규 게임 탭 */
    .home-upcoming-tab {
      padding: 0 6px;
      height: 32px;
      line-height: 32px;
      box-sizing: border-box;
      font-size: 12px;
    }

    .home-upcoming-tab:hover {
      background: var(--border);
    }

    .home-upcoming-tab.active {
      background: var(--accent);
      color: #fff;
    }

    .home-upcoming-list {
      display: none;
    }

    .home-upcoming-list.active {
      display: block;
    }

    .home-upcoming-row:hover {
      background: var(--hover-bg);
    }

    /* 모바일 반응형 - 홈 */
    @media (max-width: 1024px) {
      .home-container {
        grid-template-columns: 1fr 320px;
        gap: var(--space-block-gap);
        padding: var(--space-block-y) 0;
      }
    }

    @media (max-width: 768px) {
      .home-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-block-gap);
        padding: var(--space-block-y) 0;
      }

      .home-sidebar {
        display: none !important;
      }

      /* 가로 스크롤 방지: 개별 요소에만 적용 (sticky 조상 제외) */
      .home-card, .home-news-split, .home-video-split, .home-news-cards, .home-news-list, .home-video-cards, .home-video-list {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
      }
      .home-card-body {
        width: 100%;
        max-width: 100%;
      }
	      .home-news-card, .home-video-card {
	        max-width: 100%;
	      }

	      /* 홈 모바일 패딩 통합은 30-responsive.css에서 관리 */

      /* 모바일에서 숨김: 모바일랭킹, 스팀순위, 신규게임 (광고는 유지) */
      #home-mobile-rank,
      #home-steam,
      #home-upcoming { display: none !important; }

      /* 홈 카드 헤더 - 패딩은 파일 끝 통합 블록에서 관리 */

      .home-video-split {
        gap: 10px;
      }

      .home-video-cards {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .home-video-card-info {
        height: auto;
        min-height: auto;
        padding: 10px;
      }

      :is(.home-video-card-title, .home-news-card-title) {
        height: auto;
      }

      /* 모바일 페이지 컨테이너 padding-top 제거 (광고 패딩만 사용) - search-hidden 제외 */
      body:not(.search-hidden) :is(.page-container, .games-hub-container, .game-container, .insight-container, .home-container) {
        padding-top: 0 !important;
      }
    }

    @media (max-width: 480px) {
      .home-container {
        gap: var(--space-block-gap);
      }
      /* 480px 패딩은 파일 끝 통합 블록에서 관리 */
    }

    /* === Custom Scrollbar === */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--text-muted);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-secondary);
    }

    /* Firefox */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--text-muted) transparent;
    }

    /* Reduced Motion 지원 */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Twemoji 이모지 크기 제어 */
    img.emoji {
      height: 1em;
      width: 1em;
      margin: 0 .05em 0 .1em;
      vertical-align: -0.1em;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      overflow-y: scroll; /* 스크롤바 예약 - body가 아닌 html에 설정해야 sticky 작동 */
    }

    body {
      font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* Header */
    .header {
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: none;
      padding: 24px 0 12px;
      transition: opacity 0.2s, max-height 0.2s;
    }

    /* 상세페이지에서 헤더 숨기기 (모바일만) */
    @media (max-width: 768px) {
      body.detail-page .header {
        display: none;
      }
    }

    .header-inner {
      max-width: 1190px;
      margin: 0 auto;
      padding: 0 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .header-date {
      position: absolute;
      right: 24px;
      font-size: 0.9rem;
      font-weight: var(--font-meta-weight);
      color: var(--text-secondary);
      background: var(--glass-bg);
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid var(--border);
    }

    .header-title {
      font-size: 2.2rem;
      font-weight: 800;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
    }

    .header-title a {
      display: flex;
      align-items: center;
      color: inherit;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
    }

    .header-title a:hover,
    .header-title a:visited,
    .header-title a:active,
    .header-title a:focus {
      color: inherit;
      text-decoration: none;
      outline: none;
    }

    .logo-svg {
      height: 48px;
      width: auto;
      max-width: 100%;
      color: var(--text);
      filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.2));
      transition: transform var(--transition-normal), color var(--transition-normal);
    }

    .logo-svg:hover {
        transform: scale(1.02);
    }

    .header-title a:active .logo-svg {
        color: var(--text);
    }

    .logo-badge {
      width: 36px;
      height: 36px;
      background: var(--gradient-accent);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-tab-size);
      font-weight: 800;
      color: #fff;
      letter-spacing: -1px;
    }

    .logo-text {
      display: flex;
      align-items: center;
    }

    .header-title .logo-game {
      background: var(--gradient-accent);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .header-title .logo-crawler {
      background: var(--gradient-accent);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .header-subtitle {
      display: none;
    }

    /* Navigation */
    .nav {
      background: var(--glass-bg-solid);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: var(--shadow-sm);
      transition: background var(--transition-normal);
    }

    .nav-inner {
      max-width: 1190px;
      margin: 0 auto;
      padding: 0 var(--space-page-x);
      display: flex;
      justify-content: center;
      gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      transition: transform 0.3s ease;
    }
    .nav-inner::-webkit-scrollbar {
      display: none;
    }

    .nav-item {
      padding: 10px 14px;
      font-size: var(--font-nav-size);
      font-weight: var(--font-nav-weight);
      letter-spacing: 0.01em;
      color: var(--text-secondary);
      text-decoration: none;
      cursor: pointer;
      position: relative;
      transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      flex-shrink: 0;
      border-radius: var(--radius-sm);
      margin: 4px 0;
      border-bottom: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
    }

    /* ===== PC 전용 스타일 (769px 이상) ===== */
    @media (min-width: 769px) {
      /* 메인 메뉴 가운데 정렬 */
      .nav-inner {
        justify-content: center !important;
      }

    }

    /* 모바일 캐러셀 네비게이션 - 5개 표시 */
    @media (max-width: 768px) {
      /* nav는 9555라인 이후 미디어쿼리에서 fixed로 처리 */
      .nav-inner {
        justify-content: flex-start;
        padding: 0;
        gap: 0;
        overflow: visible;
      }
      .nav-item {
        min-width: 20%;
        flex: 0 0 20%;
        justify-content: center;
        text-align: center;
        padding: 8px 4px 6px;
        margin: 0;
        font-size: var(--font-nav-size) !important;
        font-weight: var(--font-nav-weight) !important;
        gap: 5px;
        flex-direction: column;
        border-radius: var(--radius-sm);
      }
      .nav-item.active {
        font-weight: var(--font-nav-weight);
        position: relative;
      }
      .nav-item.active::after {
        bottom: 2px;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        height: 2px;
      }
      .nav-item svg {
        width: 22px;
        height: 22px;
      }
      .nav-item.active svg {
        opacity: 1;
      }
    }

    /* 데스크톱에서만 hover */
    @media (hover: hover) {
      .nav-item:hover svg {
        opacity: 1;
      }
    }

    /* 스와이프 중에만 모든 hover/active 효과 비활성화 (탭은 정상 동작) */
    body.is-swiping .nav-item:hover,
    body.is-swiping .nav-item:active,
    body.is-swiping .tab-btn:hover,
    body.is-swiping .tab-btn:active,
    body.is-swiping .nav-item.swiping,
    body.is-swiping .tab-btn.swiping {
      background: transparent !important;
      color: inherit !important;
      opacity: inherit !important;
      transform: none !important;
      box-shadow: none !important;
    }

    .nav-item.active {
      color: #1e293b;
      background: transparent;
      border-bottom: none;
      border-radius: 0;
      font-weight: 700;
      position: relative;
    }

    /* 활성 탭 하단 인디케이터 바 - 버튼 너비만큼 */
    .nav-item.active::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 2px;
      background: #1a73e8;
      border-radius: 1px;
    }

    .nav-item svg {
      display: none;
    }

	    .nav-item.active svg {
	      display: none;
	    }

	    /* Common Page Containers - 세로 스택 레이아웃 */
	    :is(.page-container, .games-hub-container, .game-container, .insight-container) {
	      display: flex;
	      flex-direction: column;
	      gap: var(--space-block-gap);
	    }

	    /* Page Container - footer 하단 고정 */
	    /* header(~70px) + search(~50px) + nav(~52px) = ~172px, 여유분 포함 180px 제외 */
	    .page-container {
	      min-height: calc(100vh - 180px) !important;
	    }

    /* Site Container - 네이버 스타일 (PC: 1190px) */
    :is(.site-container, .container) {
      max-width: 1190px;
      flex: 1 0 auto !important;
      margin: 0 auto;
      padding: 0 var(--space-page-x) 60px;
      box-sizing: border-box;
    }


    /* 모바일: page-container 높이 조정 */
    @media (max-width: 768px) {
      .page-container {
        min-height: calc(100vh - 120px) !important;
      }
    }

    /* Sections */
    .section {
      display: none;
      animation: fadeIn 0.3s ease-out;
      padding-top: 0;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

	    .section.active {
	      display: block;
	    }

	    /* 페이지 컨테이너 - 광고 패딩만 사용 */
	    :is(.page-container, .games-hub-container, .game-container) {
	      padding-top: 0;
	    }

/* ===== Home Pages Styles (split) ===== */

    .news-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 24px 0;
      border: 1px solid var(--border);
    }

    /* 뉴스: PC에서 2컬럼 그리드 + 선택 탭 맨 앞 */
    @media (min-width: 769px) {
      #news .news-card {
        padding: 0;
      }

      #news .news-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px 20px;
      }

      #news .news-panel {
        display: block;
        background: var(--card);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        overflow: hidden;
      }

      #news .news-panel-header {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        height: 48px;
        box-sizing: border-box;
        border-radius: var(--radius) var(--radius) 0 0;
        background: transparent;
        border-bottom: 1px solid var(--border);
      }

      #news .news-panel-title {
        font-size: var(--font-title-size);
        font-weight: var(--font-title-weight);
        color: var(--text);
      }

      #news .news-more-link {
        margin-left: auto;
        color: var(--primary);
        background: transparent;
      }

      #news .news-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
      }
    }

    /* 뉴스: 모바일 단일 패널 뷰 */
    @media (max-width: 768px) {
      #news .news-container {
        display: block;
        padding: 0 12px;
      }

      #news .news-panel {
        display: none;
      }

      #news .news-panel.active {
        display: block;
      }

      #news .news-panel-header {
        display: none;
      }
    }

    /* 커뮤니티: 기본 - 모바일에서 섹션 타이틀 숨김 */
    .community-section-header {
      display: none;
    }

    /* 커뮤니티: PC에서 서브탭 표시 및 2컬럼 그리드 */
    @media (min-width: 769px) {
      #community .news-card.community-card {
        margin-top: var(--space-block-y-lg);
        padding: 0;
        background: var(--card);
        border-radius: var(--radius);
        border: 1px solid var(--border);
      }

      .community-section-header {
        display: none;
      }

      #community .news-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px 20px;
      }

      #community .news-panel {
        display: block;
        background: var(--card);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        overflow: hidden;
      }

      #community .news-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
      }
    }

    /* 커뮤니티 페이지 - 1컬럼 그리드 */
    .community-grid {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px;
    }

    .community-panel {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .community-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 12px 20px;
      height: 52px;
      box-sizing: border-box;
      border-bottom: 1px solid var(--border);
      background: transparent;
    }

    .community-panel-title {
      font-size: var(--font-title-size);
      font-weight: var(--font-title-weight);
      color: var(--text);
      flex: 1;
    }

    .community-panel-more {
      font-size: var(--font-meta-size);
      font-weight: var(--font-badge-weight);
      color: var(--primary);
      text-decoration: none;
      transition: opacity var(--transition-fast);
    }

    .community-panel-more:hover {
      opacity: 0.7;
    }

    .community-panel-body {
      padding: 12px;
    }

    .community-items-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    /* PC에서 페이지네이션 숨김 (20개 다 보임) */
    .community-panel-pagination {
      display: none;
    }

    .community-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 12px 14px;
      text-decoration: none;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .community-item:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    .community-item-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .community-item-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .community-panel-pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      padding: 12px;
      border-top: 1px solid var(--border);
    }

    .community-page-btn {
      width: 32px;
      height: 32px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--card-bg);
      color: var(--text-muted);
      font-size: var(--font-small-size);
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .community-page-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .community-page-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }

    @media (max-width: 1200px) {
      .community-items-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 900px) {
      .community-items-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .community-grid {
        padding: 12px;
      }
      .community-items-grid {
        grid-template-columns: 1fr;
      }
      /* 모바일에서 페이지네이션 표시 */
      .community-panel-pagination {
        display: flex;
      }
    }

    /* 커뮤니티 1컬럼 리스트 (4그리드 레이아웃에 맞게) - 위에서 정의됨 */

    .news-panel {
      display: block;
      border-right: none;
      padding: 0;
      min-width: 0;
      overflow: hidden;
    }

    .news-panel:last-child {
      border-right: none;
    }

    .news-list {
      min-width: 0;
    }

    .news-item a {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .news-panel-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 0;
      padding: 12px 16px;
      height: 48px;
      box-sizing: border-box;
      border-radius: var(--radius) var(--radius) 0 0;
      background: transparent;
      border-bottom: 1px solid var(--border);
      box-shadow: none;
    }

    #community .news-panel-title {
      font-size: var(--font-title-size);
      font-weight: var(--font-title-weight);
      color: var(--text);
      text-shadow: none;
    }

    #community .news-more-link {
      color: var(--primary);
      background: transparent;
    }

    #community .news-more-link:hover {
      opacity: 0.8;
    }

    .news-panel-title {
      font-size: var(--font-title-size);
      font-weight: var(--font-title-weight);
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .news-more-link {
      margin-left: auto;
      font-size: var(--font-meta-size);
      font-weight: var(--font-badge-weight);
      color: rgba(255,255,255,0.9);
      text-decoration: none;
      padding: 4px 8px;
      border-radius: 6px;
      background: rgba(255,255,255,0.1);
      transition: background 0.2s;
    }

    .news-more-link:hover {
      color: #fff;
      background: rgba(255,255,255,0.25);
    }

    .news-favicon {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 6px;
      vertical-align: middle;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    }

    @media (max-width: 1400px) {
      .news-container { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .news-card {
        padding: 20px;
      }
      .news-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .news-panel {
        display: block;
        background: transparent;
        border-radius: 0;
        border: none;
        padding: 0;
      }

      /* 스팀 순위 - 모바일용 축소 */
      .steam-table-header {
        grid-template-columns: 50px 1fr 80px;
        padding: 12px 12px;
        font-size: var(--font-meta-size);
      }
      .steam-table-row {
        grid-template-columns: 50px 1fr 80px;
        padding: 10px 12px;
      }
      .steam-col-game {
        gap: 10px;
      }
      .steam-img {
        width: 80px;
        height: 30px;
      }
      .steam-col-players {
        font-size: var(--font-small-size);
      }


    }

    .section-title {
      font-size: 1rem;
      font-weight: var(--font-section-weight);
      margin-bottom: var(--space-header-gap);
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title svg {
      width: 20px;
      height: 20px;
      color: var(--primary);
    }

    .news-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .news-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: var(--item-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      transition: all var(--transition-normal);
      min-width: 0;
      overflow: hidden;
    }

    /* 데스크톱에서만 hover 효과 */
    @media (hover: hover) {
      .news-item:hover {
        background: var(--hover-bg);
      }
    }

    a.news-item.clickable {
      text-decoration: none;
      color: inherit;
      cursor: pointer;
    }

    /* 데스크톱에서만 hover 효과 */
    @media (hover: hover) {
      a.news-item.clickable:hover {
        background: var(--hover-bg);
      }
    }

    /* 터치 디바이스에서 active 효과 */
    @media (hover: none) {
      a.news-item.clickable:active {
        background: var(--hover-bg);
      }
    }

    .news-num {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--hover-bg);
      color: var(--text-secondary);
      font-size: var(--font-badge-size);
      font-weight: var(--font-badge-weight);
      border-radius: 6px;
      flex-shrink: 0;
    }

    .news-item:nth-child(1) .news-num {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
      color: #92400e;
    }
    .news-item:nth-child(2) .news-num {
      background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
      color: #374151;
    }
    .news-item:nth-child(3) .news-num {
      background: linear-gradient(135deg, #cd7f32 0%, #daa06d 100%);
      color: #fff;
    }

    .news-content {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* 뉴스/커뮤니티: 제목 아래 태그 세로 배치 */
    #news .news-content,
    #community .news-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    #news .news-title,
    #community .news-title {
      display: block;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .news-content a {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      text-decoration: none;
      display: block;
      line-height: 1.5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      transition: color 0.2s;
    }

    .news-content a:hover {
      opacity: 0.7;
    }

    .news-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
      line-height: 1.5;
    }

    .community-tag {
      font-size: var(--font-meta-size);
      font-weight: var(--font-badge-weight);
      color: var(--primary);
      background: var(--active-bg);
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* 커뮤니티 태그 컨테이너 */
    .news-tags {
      display: flex;
      gap: 4px;
      margin-top: 4px;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    /* 채널/게시판 태그 */
    .channel-tag {
      font-size: var(--font-xs-size);
      font-weight: var(--font-badge-weight);
      padding: 2px 6px;
      border-radius: 3px;
      color: var(--text-muted);
      background: var(--bg-secondary);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 80px;
    }

    /* 소스 사이트 태그 */
    .source-tag {
      font-size: var(--font-xs-size);
      font-weight: var(--font-badge-weight);
      padding: 2px 6px;
      border-radius: 3px;
      line-height: 1.2;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .source-dcinside {
      color: #3b82f6;
      background: rgba(59, 130, 246, 0.15);
    }

    .source-arca {
      color: #8b5cf6;
      background: rgba(139, 92, 246, 0.15);
    }

    .source-inven {
      color: var(--insight-icon, #6366f1);
      background: rgba(99, 102, 241, 0.15);
    }

    .source-ruliweb {
      color: #10b981;
      background: rgba(16, 185, 129, 0.15);
    }

    /* Rankings Section */
    /* 모바일 순위 탭 행 */
    .rankings-tabs-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      padding: 8px 20px;
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .rankings-tabs-row::-webkit-scrollbar {
      display: none;
    }
    .rankings-tabs-row .tab-group {
      flex-shrink: 0;
      padding: 0;
      gap: 4px;
      background: transparent;
      border: none;
    }
    .rankings-card .home-card-header .tab-group,
    .steam-card .home-card-header .tab-group {
      background: transparent;
      border: none;
      padding: 0;
      gap: 4px;
    }
    .rankings-card .home-card-header .tab-btn,
    .steam-card .home-card-header .tab-btn {
      padding: 6px 14px;
      font-size: var(--font-small-size);
    }
    @media (max-width: 768px) {
      .rankings-card .home-card-header .tab-btn,
      .steam-card .home-card-header .tab-btn {
        padding: 8px 16px;
        font-size: var(--font-body-size);
      }
    }
    .rankings-tabs-row .tab-btn {
      padding: 6px 12px;
      font-size: var(--font-small-size);
      background: var(--hover-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    .rankings-tabs-row .tab-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
    /* 터치 시 스타일 유지 (모바일 깜빡임 방지) */
    .rankings-tabs-row .tab-btn:active:not(.active) {
      background: var(--hover-bg);
      border-color: var(--border);
    }
    .rankings-tabs-row .tab-btn.active:active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
    .rankings-tabs-row .news-favicon {
      width: 14px;
      height: 14px;
    }
    @media (max-width: 768px) {
      .rankings-tabs-row {
        padding: 8px 12px;
        gap: 8px;
      }
      .rankings-tabs-row .tab-group {
        padding: 0;
        gap: 4px;
        background: transparent;
        border: none;
      }
      .rankings-tabs-row .tab-btn {
        padding: 10px 16px;
        font-size: var(--font-body-size);
        gap: 6px;
        background: var(--hover-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
      }
      .rankings-tabs-row .tab-btn .news-favicon {
        width: 14px;
        height: 14px;
      }
    }

    /* Rankings Table */
    .rankings-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .chart-section {
      display: none;
    }

    .chart-section.active {
      display: block;
    }

    .chart-scroll {
      overflow-x: auto;
    }

    .columns-grid {
      display: grid;
      grid-template-columns: 50px repeat(5, 1fr);
      width: 100%;
    }

    .country-column {
      min-width: 0;
      border-right: 1px solid var(--border);
    }

    .country-column:last-child {
      border-right: none;
    }

    .column-header {
      padding: 6px 12px;
      height: 36px;
      box-sizing: border-box;
      background: transparent;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(4px);
    }

    .flag {
      font-size: 1.1rem;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
    }

    .country-name {
      font-size: var(--font-small-size);
      font-weight: var(--font-badge-weight);
      color: var(--text);
    }

    .rank-list {
      padding: 4px 0;
    }

	    .rank-row {
	      display: flex;
	      align-items: center;
	      gap: 12px;
	      padding: 6px 12px;
	      min-height: 48px;
	      height: 48px;
	      box-sizing: border-box;
	      border-bottom: 1px solid var(--border-subtle);
	      transition: all var(--transition-normal);
	    }

	    .rank-row:hover {
	      background: var(--card-hover);
	      transform: scale(1.01);
	      box-shadow: var(--shadow-sm);
      z-index: 1;
      position: relative;
    }

    .rank-row:last-child {
      border-bottom: none;
    }

    .rank-num {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-badge-size);
      font-weight: var(--font-badge-weight);
      color: var(--text-muted);
      flex-shrink: 0;
      border-radius: 6px;
      background: var(--hover-bg);
    }

    .rank-num-simple {
      width: 24px;
      font-size: var(--font-badge-size);
      font-weight: var(--font-meta-weight);
      color: var(--text-muted);
      flex-shrink: 0;
      text-align: center;
    }

    /* 순위 전용 컬럼 */
    .rank-column {
      background: var(--card);
    }

    .rank-column .column-header {
      padding: 6px 8px;
    }

    .rank-column .rank-row {
      justify-content: center;
      padding: 6px 12px;
      min-height: 48px;
      height: 48px;
      box-sizing: border-box;
    }

    .rank-row.rank-only {
      min-height: 48px;
      height: 48px;
      box-sizing: border-box;
    }

    .rank-num.top1 {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
      color: #92400e;
    }

    .rank-num.top2 {
      background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
      color: #374151;
    }

    .rank-num.top3 {
      background: linear-gradient(135deg, #cd7f32 0%, #daa06d 100%);
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,0.2);
      box-shadow: 0 4px 6px rgba(249, 115, 22, 0.3);
    }

    .app-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--hover-bg);
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);
      border: 1px solid rgba(0,0,0,0.05);
    }

    .app-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .app-name {
      font-size: var(--font-rank-name-size);
      font-weight: var(--font-rank-name-weight);
      color: var(--font-rank-name-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
    }

    /* rank-row 링크 스타일 - 전체 행 클릭 가능 */
    .rank-row-link {
      text-decoration: none;
      color: inherit;
    }

    .rank-row-link:hover {
      color: inherit;
    }

    .app-dev {
      font-size: var(--font-rank-dev-size);
      font-weight: var(--font-rank-dev-weight);
      color: var(--font-rank-dev-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .no-data, .no-service {
      padding: 40px 20px;
      text-align: center;
      color: var(--text-muted);
      font-size: var(--font-body-size);
    }

    /* Steam Section */

    .steam-section {
      display: none;
    }

    .steam-section.active {
      display: block;
    }

    .steam-table {
      background: transparent;
      overflow: hidden;
    }

    .steam-table-header {
      display: grid;
      grid-template-columns: 50px 1fr 100px;
      padding: 6px 16px;
      height: 36px;
      box-sizing: border-box;
      background: transparent;
      border-bottom: 1px solid var(--border);
      font-size: var(--font-small-size);
      font-weight: var(--font-badge-weight);
      color: var(--text);
      letter-spacing: 0.02em;
      align-items: center;
    }

    .steam-table-header > div:nth-child(1) {
      text-align: center;
    }

    .steam-table-header > div:nth-child(2) {
      text-align: center;
    }

    .steam-table-header > div:nth-child(3) {
      text-align: right;
    }

	    .steam-table-row {
	      display: grid;
	      grid-template-columns: 50px 1fr 100px;
	      padding: 10px 16px;
	      border-bottom: 1px solid var(--border-subtle);
	      align-items: center;
	      transition: all var(--transition-normal);
	    }

	    .steam-table-row:hover {
	      background: var(--hover-bg);
	    }

    .steam-table-row:last-child {
      border-bottom: none;
    }

    .steam-col-rank {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .steam-col-game {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .steam-img {
      width: 140px;
      height: 52px;
      border-radius: 8px;
      object-fit: cover;
      background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
      flex-shrink: 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .steam-img-placeholder {
      width: 140px;
      height: 52px;
      border-radius: 8px;
      background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
      flex-shrink: 0;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .steam-img-placeholder svg {
      width: 24px;
      height: 24px;
      fill: #66c0f4;
      opacity: 0.6;
    }

    .steam-game-info {
      min-width: 0;
    }

    .steam-game-name {
      font-size: var(--font-rank-name-size);
      font-weight: var(--font-rank-name-weight);
      color: var(--font-rank-name-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .steam-game-dev {
      font-size: var(--font-rank-dev-size);
      font-weight: var(--font-rank-dev-weight);
      color: var(--font-rank-dev-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }

    .steam-col-players {
      text-align: right;
      font-size: var(--font-body-size);
      font-weight: var(--font-meta-weight);
      color: var(--success);
    }

    .steam-price-info {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .steam-discount {
      background: #22c55e;
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: var(--font-badge-size);
      font-weight: 800;
      box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
    }

    .steam-price {
      color: var(--text);
      font-weight: var(--font-meta-weight);
    }

    .steam-rank {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-badge-size);
      font-weight: var(--font-badge-weight);
      color: var(--text-secondary);
      background: var(--hover-bg);
      border-radius: 6px;
      flex-shrink: 0;
    }

    .steam-rank.top1 {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
      color: #92400e;
    }

    .steam-rank.top2 {
      background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
      color: #374151;
    }

    .steam-rank.top3 {
      background: linear-gradient(135deg, #cd7f32 0%, #daa06d 100%);
      color: #fff;
    }

    .steam-col-game {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .steam-game-info {
      min-width: 0;
      flex: 1;
    }

    /* Video Section (영상) */

    .video-section {
      display: none;
    }

    .video-section.active {
      display: block;
    }

    .external-links {
      display: flex;
      gap: 8px;
    }

    .external-link-btn {
      display: inline-flex;
      align-items: center;
      padding: 10px 16px;
      font-size: var(--font-body-size);
      font-weight: var(--font-meta-weight);
      color: var(--text-secondary);
      background: var(--hover-bg);
      border: none;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.2s;
      cursor: pointer;
    }

    .external-link-btn:hover {
      background: var(--border);
      color: var(--text);
    }

    .link-favicon {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }

    .external-link-btn svg {
      margin-left: 4px;
      opacity: 0.5;
    }

    .youtube-link:hover {
      background: #ff0000;
      color: white;
    }

    .chzzk-link:hover {
      background: #00ffa3;
      color: #000;
    }

    .soop-link:hover {
      background: #5c7cfa;
      color: white;
    }

    /* YouTube Grid (세로형 카드 - 트렌드 리포트 스타일) */
    .youtube-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      padding: 16px;
    }

	    .youtube-card {
	      display: block;
	      text-decoration: none;
	      background: var(--card-bg);
	      border-radius: var(--radius);
	      overflow: hidden;
	      border: 1px solid var(--border);
	      transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	    }

    .youtube-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .youtube-thumb {
      position: relative;
      aspect-ratio: 16/9;
      overflow: hidden;
      background: #1a1a1a;
    }

    .youtube-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .youtube-thumb-empty {
      background: linear-gradient(135deg, #00ffa3 0%, #03e5b7 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .youtube-thumb-empty::before {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ff3b30;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      flex-shrink: 0;
    }

    .youtube-thumb-empty::after {
      content: 'LIVE';
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .youtube-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.95);
      background: rgba(0, 0, 0, 0.55);
      border-radius: 4px;
      backdrop-filter: blur(8px);
    }

    .youtube-live {
      position: absolute;
      bottom: 10px;
      right: 10px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.95);
      background: rgba(0, 0, 0, 0.55);
      border-radius: 4px;
      backdrop-filter: blur(8px);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .youtube-live::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff3b30;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
      flex-shrink: 0;
    }

    .youtube-info {
      padding: 12px;
      min-height: 60px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }

    .youtube-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
    }

    .youtube-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-secondary);
    }

    .youtube-empty p {
      margin: 8px 0;
    }

    @media (max-width: 1200px) {
      .youtube-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .youtube-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
      }
      .youtube-info {
        padding: 12px 12px 14px;
      }
      .youtube-tag,
      .youtube-live {
        font-size: 10px;
        padding: 3px 8px;
      }
    }

    /* News Grid Section (뉴스 페이지 - 언론사별 섹션) */
    .news-sources-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .news-section-card {
      margin-bottom: 0;
    }

    .news-section-card:hover {
      transform: none;
    }

    .news-grid-container {
      padding: 16px 20px;
    }

    .news-column {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .news-cards-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .news-list-col {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* News Thumbnail Card */
    .news-grid-card {
      display: block;
      text-decoration: none;
      background: var(--card-bg);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .news-grid-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .news-grid-card-thumb {
      aspect-ratio: 16/9;
      overflow: hidden;
      background: var(--card-bg);
      position: relative;
    }

    .news-grid-card-thumb > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: relative;
      z-index: 1;
    }

    .news-thumb-fallback {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--hover);
    }

    .news-thumb-fallback img {
      opacity: 0.5;
    }

    .news-grid-card-title {
      padding: 12px;
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
    }

    /* News List Item */
    .news-grid-item {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      background: var(--hover-bg);
      border-radius: 8px;
      text-decoration: none;
      transition: background 0.15s;
    }

    .news-grid-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .news-grid-item-title {
      font-size: var(--font-body-size);
      font-weight: var(--font-body-weight);
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
    }

    .news-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-secondary);
      flex: 1;
    }

    @media (max-width: 1200px) {
      .news-sources-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    @media (max-width: 768px) {
      .news-grid-container {
        padding: 12px;
        gap: 12px;
      }

      .news-cards-row {
        gap: 10px;
      }

      .news-grid-card-title {
        padding: 10px;
        font-size: 13px;
      }

      .news-grid-item {
        padding: 8px 10px;
      }

      .news-grid-item-title {
        font-size: 13px;
      }
    }

    /* Top Banner */
    .top-banner {
      max-width: 728px;
      margin: 0 auto;
      padding: 12px 24px 0 24px;
      text-align: center;
    }

    .top-banner-placeholder {
      background: var(--hover-bg);
      border: 2px dashed var(--border);
      border-radius: 4px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: var(--font-body-size);
    }

    /* Footer */
    .footer {
      background: var(--card);
      border-top: 1px solid var(--border);
      padding: 32px 20px;
      text-align: center;
      margin-top: 40px;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-links {
      margin-bottom: 12px;
    }

    .footer-links a {
      color: var(--text);
      text-decoration: none;
      font-size: var(--font-body-size);
    }

    .footer-links a:hover {
      text-decoration: underline;
    }

    .footer-info {
      color: var(--text-secondary);
      font-size: var(--font-small-size);
    }

    .footer-info p {
      margin: 0;
    }

    /* Print */
    @media print {
      .nav { display: none; }
      body { background: white; }
      .header { background: #1e3a8a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }

    /* Mobile */
    @media (max-width: 768px) {
      .header-top { flex-direction: column; align-items: flex-start; gap: 8px; }
      .report-date { text-align: left; }
      /* 뉴스/커뮤니티 그리드 - 모바일 1컬럼 리스트 */
      #news .news-list,
      #community .news-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
      }
      .nav-item { padding: 10px 14px; }
      .nav-item svg { width: 15px; height: 15px; }

      /* 커뮤니티 - 모바일에서 1개씩 전환 */
      #community .news-container {
        display: block !important;
        padding: 0 12px !important;
      }
      #community .news-panel {
        display: none !important;
      }
      #community .news-panel.active {
        display: block !important;
      }
    }

    @media (max-width: 768px) {
      /* 모바일 순위 - 비율로 화면에 딱 맞게 */
      .columns-grid { display: flex; width: 100%; }
      .country-column:not(.rank-column) { flex: 1; min-width: 0; transition: flex 0.3s ease; }
      .country-column.expanded { flex: 3; }
      /* 첫번째 국가(한국)를 기본 펼침 상태로 */
      .rank-column + .country-column:not(.collapsed) { flex: 3; }
      /* 순위 컬럼 모바일 스타일 */
      .rank-column { flex: 0 0 40px !important; min-width: 40px !important; max-width: 40px !important; }
      .rank-column .column-header { min-height: 44px; display: flex; align-items: center; justify-content: center; }
      .rank-column .rank-row { min-height: 48px; height: 48px; }
      .column-header { cursor: pointer; padding: 6px 4px; flex-direction: column; gap: 2px; min-height: 44px; box-sizing: border-box; }
      .country-name { font-size: var(--font-micro-size); }
      /* 접힌 상태 - 국가명 숨김 */
      .country-column:not(.rank-column) .country-name { display: none; }
      .country-column.expanded .country-name, .rank-column + .country-column:not(.collapsed) .country-name { display: block; }
      .flag { font-size: 1.1rem; }
      .rank-row { padding: 5px 3px; gap: 3px; flex-direction: column; align-items: center; }
      .rank-num { width: 20px; height: 20px; font-size: var(--font-xs-size); border-radius: 4px; }
      /* 선택되지 않은 국가의 행 높이 고정 */
      .country-column:not(.expanded):not(.rank-column).collapsed .rank-row,
      .country-column:not(.rank-column):not(:nth-child(2)):not(.expanded) .rank-row { height: 48px; min-height: 48px; justify-content: center; box-sizing: border-box; }
      /* 접힌 컬럼 클릭 시 링크 이동 방지 */
      .country-column.collapsed .rank-row { pointer-events: none; }
      .country-column.collapsed .column-header { pointer-events: auto; }
      .app-icon { width: 32px; height: 32px; border-radius: 8px; }
      .app-info { display: none; }
      .country-column.expanded .rank-row, .rank-column + .country-column:not(.collapsed) .rank-row { flex-direction: row; padding: 8px 10px; gap: 8px; height: 48px; min-height: 48px; box-sizing: border-box; }
      .country-column.expanded .app-info, .rank-column + .country-column:not(.collapsed) .app-info { display: block; flex: 1; min-width: 0; }
      .country-column.expanded .app-icon, .rank-column + .country-column:not(.collapsed) .app-icon { width: 28px; height: 28px; }
      .app-name { font-size: var(--font-meta-size); margin-bottom: 2px; }
      .app-dev { font-size: var(--font-micro-size); }
    }

    @media (max-width: 576px) {
      .nav-item { padding: 10px 12px; gap: 4px; }
      .nav-item svg { width: 14px; height: 14px; }
      .logo-svg { height: 36px; }
      .news-favicon { width: 14px; height: 14px; }
      /* 순위 - 통일된 크기 */
      .rank-num { width: 24px; height: 24px; font-size: var(--font-xs-size); }
      .steam-rank { width: 24px; height: 24px; font-size: var(--font-xs-size); }
      .upcoming-rank { width: 24px; height: 24px; font-size: var(--font-xs-size); }
      .app-icon { width: 28px; height: 28px; border-radius: 6px; }
      .country-column.expanded .app-icon, .rank-column + .country-column:not(.collapsed) .app-icon { width: 24px; height: 24px; }
    }

    @media (max-width: 480px) {
      :root { --space-page-x: 8px; }
      /* 좌우 여백 8px 통일 */
	      :is(.site-container, .container) { padding: 0 var(--space-page-x) 40px; }
      .nav-inner { padding: 0; }

      /* 메인 메뉴 */
      .nav-item { padding: 12px 8px; gap: 4px; font-size: var(--font-nav-size) !important; font-weight: var(--font-nav-weight) !important; }
      .nav-item svg { width: 20px; height: 20px; }
      .logo-svg { height: 32px; }

      /* 뉴스/커뮤니티 컨트롤 - 공통 스타일 사용 */

      /* 뉴스/커뮤니티 아이템 - 좌우 여백 최소화, 상하 여유 확보 */
      .news-item { padding: 10px 4px; gap: 6px; }
      .news-panel { padding: 10px 4px !important; }
      .news-card { padding: 10px 0 !important; }
      #news .news-container,
      #community .news-container { padding: 0 4px !important; }
      .news-favicon { width: 14px; height: 14px; }

      /* 순위 - 통일된 크기 */
      .rank-num { width: 22px; height: 22px; font-size: var(--font-xs-size); }
      .steam-rank { width: 22px; height: 22px; font-size: var(--font-xs-size); }
      .upcoming-rank { width: 22px; height: 22px; font-size: var(--font-xs-size); }
      .app-icon { width: 24px; height: 24px; }
      .country-column.expanded { flex: 3.5; }

      /* Steam 테이블 모바일 */
      .steam-table-row {
        grid-template-columns: 32px 1fr 80px;
        padding: 10px 12px;
        gap: 8px;
      }
      .steam-col-game {
        gap: 8px;
      }
      .steam-img {
        width: 60px;
        height: 28px;
      }
      .steam-col-players {
        font-size: var(--font-small-size);
        text-align: right;
      }
      .steam-price-info {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
      }
      .steam-discount {
        font-size: var(--font-badge-size);
        padding: 2px 4px;
      }
      .steam-price {
        font-size: var(--font-small-size);
      }

    }

    @media (max-width: 360px) {
      .nav-item { padding: 6px 8px; gap: 2px; font-size: var(--font-nav-size) !important; font-weight: var(--font-nav-weight) !important; }
      .nav-item svg { width: 12px; height: 12px; }
      .logo-svg { height: 28px; }
      .news-favicon { width: 12px; height: 12px; }
      /* 순위 - 통일된 크기 */
      .rank-num { width: 20px; height: 20px; font-size: var(--font-micro-size); }
      .steam-rank { width: 20px; height: 20px; font-size: var(--font-micro-size); }
      .upcoming-rank { width: 20px; height: 20px; font-size: var(--font-micro-size); }
      .app-icon { width: 20px; height: 20px; border-radius: 4px; }
      .country-column.expanded { flex: 4; }
      .country-column.expanded .app-icon { width: 20px; height: 20px; }
      .app-name { font-size: var(--font-micro-size); }
      .app-dev { display: none; }

      /* Steam 테이블 초소형 모바일 - 6px 통일 */
      .steam-table-row {
        grid-template-columns: 28px 1fr 70px;
        padding: 8px 6px;
        gap: 6px;
      }
      .steam-img {
        width: 50px;
        height: 24px;
      }
	      .steam-col-players {
	        font-size: var(--font-small-size);
	      }

	      /* 홈 모바일 패딩 통합은 30-responsive.css에서 관리 */
	    }

/* Footer + Privacy Modal */

.site-footer {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
}

.site-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
}

.footer-divider {
  margin: 0 8px;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-overlay.is-open {
  display: flex;
}

.modal-content {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  color: #ddd;
}

.modal-content h2 {
  margin-top: 0;
  color: #fff;
}

.modal-content h3 {
  color: #aaa;
  margin-top: 20px;
  font-size: 14px;
}

.modal-content p {
  font-size: 13px;
  line-height: 1.6;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
}

.modal-close:hover {
  color: #fff;
}

.privacy-modal-list {
  margin: 10px 0;
  padding-left: 20px;
  font-size: 13px;
}

.privacy-modal-effective-date {
  margin-top: 20px;
  color: #666;
  font-size: 12px;
}

/* 404 Not Found */

.not-found-container {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.not-found-content {
  text-align: center;
  max-width: 400px;
}

.not-found-icon {
  color: var(--text-muted, #64748b);
  margin-bottom: 1.5rem;
}

.not-found-icon svg {
  opacity: 0.6;
}

.not-found-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--text-primary, #f1f5f9);
}

.not-found-desc {
  color: var(--text-secondary, #94a3b8);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.not-found-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.not-found-link {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  background: var(--surface, #1e293b);
  color: var(--text-primary, #f1f5f9);
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s;
}

.not-found-link:hover {
  background: var(--surface-hover, #334155);
}

    /* ========== Upcoming Games Section ========== */
    .upcoming-section {
      display: none;
    }

    .upcoming-section.active {
      display: block;
    }

    .upcoming-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .upcoming-table-header {
      display: grid;
      grid-template-columns: 60px 1fr 100px;
      padding: 6px 16px;
      height: 36px;
      box-sizing: border-box;
      background: transparent;
      text-align: center;
      border-bottom: 1px solid var(--border);
      font-size: var(--font-small-size);
      font-weight: var(--font-badge-weight);
      color: var(--text);
      letter-spacing: 0.02em;
      align-items: center;
    }

    .upcoming-table-header > div:nth-child(1) {
      text-align: center;
    }

    .upcoming-table-header > div:nth-child(3) {
      text-align: right;
    }

    .upcoming-item {
      display: grid;
      grid-template-columns: 60px 1fr 100px;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-subtle);
      transition: background 0.2s;
      text-decoration: none;
      color: inherit;
    }

    .upcoming-item:hover {
      background: var(--card-hover);
    }

    .upcoming-col-rank {
      display: flex;
      justify-content: center;
    }

    .upcoming-col-game {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .upcoming-col-date {
      text-align: right;
      font-size: var(--font-small-size);
      color: var(--text-muted);
      white-space: nowrap;
    }

    .upcoming-item:last-child {
      border-bottom: none;
    }

    .upcoming-rank {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--border);
      color: var(--text-secondary);
      border-radius: 6px;
      font-weight: var(--font-badge-weight);
      font-size: var(--font-badge-size);
      flex-shrink: 0;
    }

    .upcoming-rank.top1 { background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%); color: #92400e; }
    .upcoming-rank.top2 { background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%); color: #374151; }
    .upcoming-rank.top3 { background: linear-gradient(135deg, #cd7f32 0%, #daa06d 100%); color: #fff; }

    .upcoming-icon {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      object-fit: cover;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      background: var(--hover-bg);
    }

    .upcoming-icon-placeholder {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      flex-shrink: 0;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    .upcoming-icon-placeholder svg {
      width: 100%;
      height: 100%;
      opacity: 0.7;
    }

    .upcoming-icon-placeholder.hidden {
      display: none;
    }

    .upcoming-info {
      flex: 1;
      min-width: 0;
    }

    .upcoming-name {
      font-size: var(--font-rank-name-size);
      font-weight: var(--font-rank-name-weight);
      color: var(--font-rank-name-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
    }

    .upcoming-date {
      font-size: var(--font-rank-dev-size);
      color: var(--primary);
      font-weight: var(--font-desc-weight);
    }

    .upcoming-publisher {
      font-size: var(--font-rank-dev-size);
      font-weight: var(--font-rank-dev-weight);
      color: var(--font-rank-dev-color);
      margin-top: 2px;
    }

    .upcoming-price {
      font-size: var(--font-small-size);
      color: var(--text-muted);
      margin-top: 2px;
    }

    .upcoming-empty {
      padding: 40px 20px;
      text-align: center;
      color: var(--text-secondary);
    }

    /* Upcoming responsive */
    @media (max-width: 768px) {
      .upcoming-table-header {
        grid-template-columns: 32px 1fr 80px;
        padding: 6px 12px;
      }
      .upcoming-table-header > div:nth-child(1) { text-align: left; }
      .upcoming-item {
        padding: 12px 12px;
        gap: 10px;
        grid-template-columns: 32px 1fr 80px;
      }
      .upcoming-col-rank { justify-content: flex-start; }
      .upcoming-icon { width: 48px; height: 48px; border-radius: 10px; }
      .upcoming-icon-placeholder { width: 48px; height: 48px; border-radius: 10px; }
      .upcoming-name { font-size: var(--font-small-size); }
      .upcoming-rank { width: 24px; height: 24px; font-size: var(--font-meta-size); }
    }

    @media (max-width: 480px) {
      .upcoming-table-header {
        grid-template-columns: 28px 1fr 70px;
        padding: 6px 8px;
      }
      .upcoming-table-header > div:nth-child(1) { text-align: left; }
      .upcoming-item {
        padding: 10px 8px;
        gap: 8px;
        grid-template-columns: 28px 1fr 70px;
      }
      .upcoming-col-rank { justify-content: flex-start; }
      .upcoming-icon { width: 40px; height: 40px; border-radius: 8px; }
      .upcoming-icon-placeholder { width: 40px; height: 40px; border-radius: 8px; }
      .upcoming-name { font-size: var(--font-badge-size); }
      .upcoming-date { font-size: var(--font-meta-size); }
      .upcoming-rank { width: 22px; height: 22px; font-size: var(--font-xs-size); }
    }

/* ============================================================
   홈 피드 모바일 패딩 통합 (최종)
   - 모든 요소가 동일한 좌우 여백으로 정렬
   - 768/480/360: 12px 통일
   ============================================================ */

/* === 태블릿 (768px 이하) === */
@media (max-width: 768px) {
  /* 컨테이너 - 상단 패딩 제거 (광고 패딩만 사용) */
  .home-container {
    padding: 0 0 var(--space-block-y) 0 !important;
    gap: var(--space-block-gap) !important;
  }

  /* 카드 헤더 */
  .home-card-header {
    padding: 10px 12px !important;
  }

  /* 카드 바디 - 좌우 패딩 없음 */
  .home-card-body {
    padding: 8px 0 !important;
  }

  /* 탭 그룹 */
  .home-rank-tabs {
    margin: 0 12px 8px 12px !important;
    padding: 0 !important;
  }

  /* 인사이트 페이지 탭 - 모바일 */
  .insight-tabs {
    margin: 0 0 12px 0 !important;
    padding: 4px !important;
  }

  /* Split 컨테이너 - 좌우 패딩 없음 */
  .home-news-split,
  .home-video-split {
    padding: 0 !important;
  }

  /* 카드 컨테이너 - 좌우 패딩 없음 */
  .home-news-cards,
  .home-video-cards {
    padding: 0 !important;
  }

  /* 리스트 컨테이너 - 좌우 패딩 */
  .home-news-list,
  .home-video-list {
    padding: 0 12px !important;
  }

  /* 뉴스/영상 카드 - 좌우 마진으로 여백 */
  .home-news-card,
  .home-video-card {
    margin: 0 12px 10px 12px !important;
    border-radius: 8px;
  }

  /* 뉴스/영상 아이템 - 패딩으로 여백 */
  .home-news-item,
  .home-video-item {
    padding: 10px 12px !important;
    margin: 0 !important;
  }

  /* 일반 아이템 */
  .home-item {
    padding: 10px 12px !important;
  }

  /* 순위/스팀/출시예정 행 */
  .home-steam-row,
  .home-upcoming-row,
  .home-rank-row {
    padding: 10px 12px !important;
  }

  /* 탭 그룹 (카드 바디 내) */
  .home-card-body .tab-group {
    margin: 0 12px 8px 12px !important;
  }

  /* 인사이트 그리드 - 1열로 변경 */
  .home-insight-grid {
    flex-direction: column;
    gap: 12px;
    padding: 8px 12px !important;
  }

  /* 인사이트 스크롤 - 헤더와 정렬 */
  .home-insight-scroll {
    padding: 8px 12px !important;
    gap: 12px !important;
  }

  /* 인사이트 split - 1열로 변경 */
  .home-insight-split {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 8px 12px !important;
  }

  .home-insight-column {
    width: 100% !important;
  }

  .home-insight-item {
    padding: 14px;
  }

}

/* === 모바일 (480px 이하) === */
@media (max-width: 480px) {
  /* 컨테이너 - 상단 패딩 제거 (광고 패딩만 사용) */
  .home-container {
    padding: 0 0 var(--space-block-y) 0 !important;
    gap: var(--space-block-gap) !important;
  }

  /* 데일리 포커스 문구 */
  .home-daily-focus {
    padding: 8px 8px 0 !important;
  }

  .home-daily-focus-text {
    padding: 12px !important;
    font-size: 15px !important;
  }

  @media (max-width: 360px) {
    .home-daily-focus-text {
      font-size: 14px !important;
    }
  }

  /* 카드 헤더 */
  .home-card-header {
    padding: 8px !important;
  }

  /* 카드 바디 */
  .home-card-body {
    padding: 6px 0 !important;
  }

  /* 탭 그룹 */
  .home-rank-tabs {
    margin: 0 8px 6px 8px !important;
  }

  /* 커뮤니티 탭 텍스트 축약 */
  .tab-text-dcinside {
    font-size: 0;
  }
  .tab-text-dcinside::after {
    content: '디시';
    font-size: var(--font-tab-size);
  }
  .tab-text-arca {
    font-size: 0;
  }
  .tab-text-arca::after {
    content: '아카';
    font-size: var(--font-tab-size);
  }

  /* 인사이트 페이지 탭 - 480px */
  .insight-tabs {
    margin: 0 0 10px 0 !important;
    padding: 4px !important;
  }

  /* 뉴스/영상 카드 */
  .home-news-card,
  .home-video-card {
    margin: 0 8px 8px 8px !important;
  }

  /* 리스트 컨테이너 */
  .home-news-list,
  .home-video-list {
    padding: 0 8px !important;
  }

  /* 뉴스/영상 아이템 */
  .home-news-item,
  .home-video-item {
    padding: 8px !important;
  }

  /* 일반 아이템 */
  .home-item {
    padding: 8px !important;
  }

  /* 순위/스팀/출시예정 행 */
  .home-steam-row,
  .home-upcoming-row,
  .home-rank-row {
    padding: 8px !important;
  }

  /* 탭 그룹 (카드 바디 내) */
  .home-card-body .tab-group {
    margin: 0 8px 6px 8px !important;
  }

  /* 인사이트 그리드 */
  .home-insight-grid {
    padding: 6px 8px !important;
  }

  /* 인사이트 스크롤 - 헤더와 정렬 */
  .home-insight-scroll {
    padding: 6px 8px !important;
  }

  /* 인사이트 스플릿 - 헤더와 정렬 (480px) */
  .home-insight-split {
    padding: 6px 8px !important;
  }

  .home-insight-item {
    padding: 12px;
  }
}

/* === 작은 화면 (360px 이하) === */
@media (max-width: 360px) {
  /* 컨테이너 - 상단 패딩 제거 (광고 패딩만 사용) */
  .home-container {
    padding: 0 0 var(--space-block-y) 0 !important;
    gap: var(--space-block-gap) !important;
  }

  /* 카드 헤더 */
  .home-card-header {
    padding: 6px !important;
  }

  /* 카드 바디 */
  .home-card-body {
    padding: 4px 0 !important;
  }

  /* 탭 그룹 */
  .home-rank-tabs {
    margin: 0 6px 4px 6px !important;
  }

  /* 커뮤니티 탭 텍스트 축약 */
  .tab-text-dcinside {
    font-size: 0;
  }
  .tab-text-dcinside::after {
    content: '디시';
    font-size: var(--font-tab-size);
  }
  .tab-text-arca {
    font-size: 0;
  }
  .tab-text-arca::after {
    content: '아카';
    font-size: var(--font-tab-size);
  }

  /* 인사이트 페이지 탭 - 360px */
  .insight-tabs {
    margin: 0 0 8px 0 !important;
    padding: 3px !important;
  }

  /* 뉴스/영상 카드 */
  .home-news-card,
  .home-video-card {
    margin: 0 6px 6px 6px !important;
  }

  /* 리스트 컨테이너 */
  .home-news-list,
  .home-video-list {
    padding: 0 6px !important;
  }

  /* 뉴스/영상 아이템 */
  .home-news-item,
  .home-video-item {
    padding: 6px !important;
  }

  /* 일반 아이템 */
  .home-item {
    padding: 6px !important;
  }

  /* 순위/스팀/출시예정 행 */
  .home-steam-row,
  .home-upcoming-row,
  .home-rank-row {
    padding: 6px !important;
  }

  /* 탭 그룹 (카드 바디 내) */
  .home-card-body .tab-group {
    margin: 0 6px 4px 6px !important;
  }

  /* 인사이트 그리드 */
  .home-insight-grid {
    padding: 4px 6px !important;
  }

  /* 인사이트 스크롤 - 헤더와 정렬 */
  .home-insight-scroll {
    padding: 4px 6px !important;
  }

  /* 인사이트 스플릿 - 헤더와 정렬 (360px) */
  .home-insight-split {
    padding: 4px 6px !important;
  }

  .home-insight-item {
    padding: 10px;
  }
}

/* ===========================
   인사이트 페이지 스타일
   =========================== */

.insight-panel {
  display: none;
}

.insight-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-block-y);
}

/* 주간 리포트 헤더 카드 (피드 스타일) - 라이트모드 */
.weekly-header-card {
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 0; /* gap으로 처리 */
  position: relative;
  overflow: hidden;
}

/* 헤드라인 이미지 레이아웃 */
.weekly-header-card.has-hero-image {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
  padding: 0;
}

.weekly-header-image {
  flex-shrink: 0;
  width: 200px;
  border-radius: 20px 0 0 20px;
  overflow: hidden;
}

.weekly-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weekly-header-text {
  flex: 1;
  padding: 20px 20px 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.weekly-header-card:not(.has-hero-image) .weekly-header-text {
  padding: 0;
}

.weekly-header-card .weekly-header-title,
.weekly-header-card .weekly-header-headline,
.weekly-header-card .weekly-header-period,
.weekly-header-card .weekly-header-ampm-tag {
  color: #fff;
}

.weekly-header-card .weekly-header-headline {
  opacity: 0.85;
}

.weekly-header-card .weekly-header-period {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.weekly-header-card .weekly-header-ampm-tag.am {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.weekly-header-card .weekly-header-ampm-tag.pm {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* 다크모드 - 블루/인디고→오렌지 복원 */
@media (prefers-color-scheme: dark) {
  /* 네비 active - 밑줄만 오렌지, 폰트 색 유지 */
  .nav-item.active::after {
    background: #f97316;
  }
  /* 데일리 포커스 문구 - 미니멀 (투명 배경 + 은은한 테두리) */
  .home-daily-focus-text {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
  }
  /* 홈 트렌드 카드 다크모드 */
  .home-trend-card {
    background: var(--card-bg);
    border-color: var(--border);
  }
  .home-trend-card-tag {
    background: rgba(0, 0, 0, 0.6);
  }
  .home-trend-card-tag.weekly {
    background: rgba(0, 0, 0, 0.6);
  }
  /* 로고 배지/텍스트 */
  .logo-badge {
    background: linear-gradient(135deg, #ff6b35 0%, #ffc107 100%);
  }
  .header-title .logo-game {
    background: linear-gradient(135deg, #ff6b35 0%, #ffc107 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  /* === 트렌드 페이지 전체 오버라이드 === */
  /* 모든 insight 카드 테두리 */
  .insight-card[class*="daily-section-"] {
    border-color: rgba(255, 107, 53, 0.25) !important;
  }
  /* 모든 카드 헤더 하단 테두리 */
  .insight-card[class*="daily-section-"] .home-card-header {
    border-bottom-color: rgba(255, 107, 53, 0.2) !important;
  }
  /* 모든 섹션 아이콘 */
  .daily-section-icon {
    color: #ff6b35 !important;
  }
  /* 아이콘 래퍼 배경 */
  .daily-section-icon-wrap {
    background: rgba(255, 107, 53, 0.15) !important;
  }
  /* 급상승/급하락 뱃지 */
  .rank-badge {
    background: rgba(255, 107, 53, 0.15) !important;
    color: #ff6b35 !important;
  }
  /* 통계 아이콘 */
  .weekly-stat-icon.industry {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
  }
  /* 카드 호버 그라디언트 */
  .weekly-hot-card::before {
    background: linear-gradient(90deg, #ef4444, #f97316);
  }
}

/* 주간 리포트 헤더 카드 - 다크모드 */
@media (prefers-color-scheme: dark) {
  .weekly-header-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .weekly-header-card .weekly-header-period {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
  }

  .weekly-header-card .weekly-header-week {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
  }

  .weekly-header-card .weekly-header-meta {
    color: rgba(255, 255, 255, 0.5);
  }

  .weekly-header-card .weekly-header-ampm-tag.am {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
  }

  .weekly-header-card .weekly-header-ampm-tag.pm {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
  }

  /* === 카드 미니멀 + 포인트 하이라이트 === */
  /* MVP 카드 */
  .weekly-mvp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #f59e0b;
  }

  /* 핫이슈 featured 카드 */
  .weekly-hot-card.featured {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #ef4444;
  }

  /* 일반 핫이슈 카드 */
  .weekly-hot-card {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* 헤더 상단 하이라이트 선 제거됨 */

.weekly-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.weekly-header-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: var(--font-badge-size);
  font-weight: var(--font-badge-weight);
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.15);
  border-radius: 20px;
}

.weekly-header-title {
  font-size: var(--font-title-size);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.weekly-header-headline {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.weekly-header-ampm-tag {
  font-size: var(--font-badge-size);
  font-weight: var(--font-badge-weight);
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
}

.weekly-header-ampm-tag.am {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.weekly-header-ampm-tag.pm {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

.weekly-header-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 4px;
}

.weekly-header-period {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.weekly-header-divider {
  opacity: 0.4;
  font-size: 0.7rem;
}

.weekly-header-week {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.weekly-header-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.demo-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: var(--font-badge-size);
  font-weight: var(--font-badge-weight);
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 20px;
}

/* === 주간 리포트 보고서 스타일 === */
.weekly-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-block-y-lg);
}

/* SVG 아이콘 공통 */
.weekly-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.weekly-icon-sm {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 요약 통계 그리드 */
.weekly-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}

.weekly-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.weekly-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.weekly-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.weekly-stat-icon svg {
  width: 24px;
  height: 24px;
}

.weekly-stat-icon.mobile {
  background: rgba(26, 115, 232, 0.15);
  color: var(--insight-icon, #1a73e8);
}

.weekly-stat-icon.pc {
  background: rgba(26, 115, 232, 0.15);
  color: #1a73e8;
}

.weekly-stat-icon.industry {
  background: rgba(26, 115, 232, 0.15);
  color: #1a73e8;
}

.weekly-stat-icon.community {
  background: rgba(26, 115, 232, 0.15);
  color: #1a73e8;
}

.weekly-stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weekly-stat-value {
  font-size: var(--font-stat-size);
  font-weight: var(--font-badge-weight);
  color: var(--text);
  line-height: 1;
}

.weekly-stat-label {
  font-size: var(--font-body-size);
  color: var(--text-secondary);
}

/* ===== Report Base Styles (split) ===== */

/* ========== 리포트 공통 베이스 스타일 ========== */
:is(.report-section, .weekly-section) {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  transition: var(--transition-elevate);
}

.weekly-section {
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

:is(.report-section, .weekly-section):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

:is(.report-section-header, .weekly-section-header) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--border);
}

:is(.report-section-title-wrap, .weekly-section-title-wrap) {
  display: flex;
  align-items: center;
  gap: 14px;
}

.report-section-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  background: var(--icon-bg-hot);
  border-radius: var(--radius-sm);
  color: var(--primary);
  flex-shrink: 0;
}

:is(.report-section-title, .weekly-section-title) {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.report-section-desc {
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--font-body-line-height);
}

/* 섹션 공통 (주간 리포트) */
.weekly-section:last-child {
  margin-bottom: 0;
}

.weekly-section-title-wrap .weekly-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  background: var(--icon-bg-hot);
  border-radius: var(--radius-sm);
  color: var(--primary);
}

.weekly-section-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--font-desc-line-height);
}

/* 에디터스 노트 */
.weekly-intro {
  background: var(--section-gradient-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  transition: var(--transition-elevate);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.weekly-intro:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.weekly-intro-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--border);
}

.weekly-intro-header .weekly-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  background: var(--section-icon-bg);
  border-radius: var(--radius-sm);
  color: var(--insight-icon);
}

.weekly-intro-label {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.weekly-intro-text {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* 에디터스 노트 */
.weekly-section-editor {
  background: var(--section-gradient-strong);
}

.weekly-section-editor .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

/* 금주의 핫이슈 */
.weekly-section-hot {
  background: var(--section-gradient);
}

.weekly-section-hot .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-hot-issues {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* 2x2 그리드 강제 (featured 카드 없이) */
.weekly-hot-grid .weekly-hot-card {
  grid-column: auto;
}

.weekly-hot-grid .weekly-hot-card .weekly-hot-title {
  font-size: var(--font-body-size);
}

.weekly-hot-grid .weekly-hot-card .weekly-hot-desc {
  font-size: var(--font-desc-size);
}

.weekly-hot-issues > .weekly-hot-card {
  display: flex;
  flex-direction: column;
}

.weekly-hot-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.weekly-hot-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-progress);
  opacity: 0;
  transition: opacity 0.2s;
}

.weekly-hot-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 이미지 포함 카드 - 세로 레이아웃 (이미지 상단) */
.weekly-hot-card.has-thumb {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.weekly-hot-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--border);
  flex-shrink: 0;
}

.weekly-hot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 게임 아이콘 (정사각형) */
.weekly-hot-thumb.is-icon {
  aspect-ratio: 1 / 1;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  margin: 16px auto 0;
}

.weekly-hot-card.has-thumb:has(.is-icon) {
  text-align: center;
}

.weekly-hot-card.has-thumb:has(.is-icon) .weekly-hot-content {
  text-align: left;
}

.weekly-hot-card.has-thumb .weekly-hot-content {
  padding: 14px 16px 16px;
}

/* 그리드 카드 높이 통일 */
.weekly-hot-grid {
  align-items: stretch;
}

.weekly-hot-grid .weekly-hot-card {
  display: flex;
  flex-direction: column;
}

/* 호버 시 상단 띠 효과 제거 */

.weekly-hot-card.featured {
  grid-column: 1 / -1;
  background: var(--card);
  border-color: var(--border);
  padding: 24px;
}

.weekly-hot-card.featured .weekly-hot-title {
  font-size: var(--font-section-size);
}

.weekly-hot-card.featured .weekly-hot-desc {
  font-size: var(--font-body-size);
}

.weekly-hot-card.featured::before {
  opacity: 0;
}

.weekly-hot-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  background: var(--tag-bg);
  color: var(--tag-color);
  width: fit-content;
  align-self: flex-start;
}

/* 섹션별 태그 색상 */
.weekly-section-hot .weekly-hot-tag {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

.weekly-section-industry .weekly-hot-tag,
.weekly-section-industry .weekly-timeline-tag {
  background: rgba(167, 139, 250, 0.18);
  color: #a78bfa;
}

.weekly-section-metrics .weekly-hot-tag {
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
}

.weekly-section-rankings .weekly-hot-tag {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}

.weekly-section-community .weekly-hot-tag {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
}

.weekly-section-streaming .weekly-hot-tag {
  background: rgba(251, 146, 60, 0.18);
  color: #fb923c;
}

/* 고정형 태그 색상 (급상승/급하락/신규진입 등) - 섹션 색상보다 우선 */
.weekly-hot-tag.tag-up {
  background: rgba(74, 222, 128, 0.18) !important;
  color: #4ade80 !important;
}

.weekly-hot-tag.tag-down {
  background: rgba(248, 113, 113, 0.18) !important;
  color: #f87171 !important;
}

.weekly-hot-tag.tag-new {
  background: rgba(244, 114, 182, 0.18) !important;
  color: #f472b6 !important;
}

.weekly-hot-tag.tag-revenue {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fbbf24 !important;
}

.weekly-hot-tag.tag-players {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
}

.weekly-hot-tag svg {
  width: 10px;
  height: 10px;
}

.weekly-hot-title {
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  color: var(--text);
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
}

.weekly-hot-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* ===== Report Content Styles (split) ===== */

/* 순위 변동 분석 */
.weekly-section-rankings {
  background: var(--section-gradient);
}

.weekly-section-rankings .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-rankings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.weekly-rank-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.weekly-rank-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.weekly-rank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.weekly-rank-badge {
  font-size: var(--font-meta-size);
  font-weight: var(--font-meta-weight);
  padding: 4px 10px;
  border-radius: 12px;
}

.weekly-rank-badge.up {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.weekly-rank-badge.down {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.weekly-rank-badge.new {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.weekly-rank-platform {
  font-size: var(--font-small-size);
  color: var(--text-secondary);
}

.weekly-rank-game {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin-bottom: 10px;
}

.weekly-rank-change {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.weekly-rank-arrow {
  font-size: var(--font-body-size);
  font-weight: var(--font-badge-weight);
}

.weekly-rank-arrow.up { color: #22c55e; }
.weekly-rank-arrow.down { color: #ef4444; }
.weekly-rank-arrow.new { color: #f59e0b; }

.weekly-rank-positions {
  font-size: var(--font-body-size);
  color: var(--text-secondary);
}

.weekly-rank-delta {
  font-size: var(--font-body-size);
  font-weight: var(--font-meta-weight);
  padding: 2px 8px;
  border-radius: 8px;
}

.weekly-rank-delta.up {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.weekly-rank-delta.down {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.weekly-rank-delta.new {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.weekly-rank-reason {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* 업계 동향 타임라인 */
.weekly-section-industry {
  background: var(--section-gradient);
}

.weekly-section-industry .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 28px;
}

.weekly-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, #a855f7, #ec4899);
  border-radius: 1px;
}

.weekly-timeline-item {
  position: relative;
  padding: 14px 0;
}

.weekly-timeline-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.weekly-timeline-marker {
  position: absolute;
  left: -28px;
  top: 24px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  border-radius: 50%;
  border: 3px solid var(--card-bg);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.weekly-timeline-content {
  padding-left: 12px;
}

.weekly-timeline-tag {
  display: inline-block;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.weekly-timeline-title {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.weekly-timeline-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* 주간 지표 (아이콘 강조형) */
.weekly-section-metrics {
  background: var(--section-gradient);
}

.weekly-section-metrics .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-section-metrics .weekly-hot-issues,
.weekly-section-rankings .weekly-hot-issues {
  height: auto;
  grid-template-rows: auto;
}

.weekly-metrics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* 일간 리포트 지표 그리드 (가로로 길게 1열) */
.weekly-metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weekly-metrics-grid .weekly-metric-card {
  min-height: 100px;
}

.weekly-metrics-grid .metric-thumb {
  width: 140px;
  height: 100px;
}

.weekly-metrics-grid .metric-thumb img {
  height: 100%;
}

/* 게임 아이콘 (정사각형) */
.metric-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--border);
}

.metric-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 제목 앞 인라인 아이콘 */
.title-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  vertical-align: middle;
  margin-right: 10px;
  object-fit: cover;
}

/* 지표/순위변동 제목 강조 + 밑줄 */
.weekly-metric-title,
.ranking-item .weekly-hot-title {
  font-size: 1.1rem;
  font-weight: 700;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* 업계 동향 그리드 */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
}

.industry-grid .industry-card {
  height: 100%;
  min-height: 120px;
}

.industry-grid .industry-thumb {
  width: 100px;
  height: 100%;
  min-height: 80px;
}

.industry-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.industry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.industry-thumb {
  width: 100px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--border);
}

.industry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industry-content {
  flex: 1;
  min-width: 0;
}

.industry-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.industry-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

@media (max-width: 768px) {
  .industry-grid .industry-card,
  .industry-card {
    flex-direction: column;
    padding: 0;
  }
  .industry-grid .industry-thumb,
  .industry-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 180px;
    border-radius: var(--radius) var(--radius) 0 0;
    min-height: auto;
  }
  .industry-content {
    padding: 14px 16px 16px;
  }
}

.weekly-metric-card {
  display: flex;
  gap: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* 왼쪽 띠 제거됨 */

.weekly-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.weekly-metric-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--metric-color, #3b82f6) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.weekly-metric-icon svg {
  width: 26px;
  height: 26px;
  color: var(--metric-color, #3b82f6);
}

/* 지표 썸네일 */
.metric-thumb {
  width: 100px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--border);
}

.metric-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .weekly-metrics-grid .weekly-metric-card,
  .weekly-metric-card {
    flex-direction: column;
    padding: 0;
  }
  .weekly-metrics-grid .metric-thumb,
  .metric-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 180px;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .weekly-metric-content {
    padding: 14px 16px 16px;
  }
}

.weekly-metric-content {
  flex: 1;
  min-width: 0;
}

.weekly-metric-tag {
  display: inline-block;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: #818cf8;
  background: rgba(99, 102, 241, 0.18);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.weekly-metric-title {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.weekly-metric-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* 커뮤니티 반응 (말풍선 스타일) */
.weekly-section-community {
  background: var(--section-gradient);
}

.weekly-section-community .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-section-alt {
  background: var(--section-gradient);
}

.weekly-community-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.weekly-community-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.weekly-community-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.weekly-community-game {
  display: block;
  font-size: var(--font-body-size);
  font-weight: var(--font-badge-weight);
  color: var(--text);
  margin-bottom: 10px;
}

.weekly-community-title {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
}

.weekly-community-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* 스트리밍 트렌드 (플랫폼 카드) */
.weekly-section-streaming {
  background: var(--section-gradient);
}

.weekly-section-streaming .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-streaming-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.weekly-streaming-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.weekly-streaming-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.weekly-streaming-platform {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.weekly-streaming-platform-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekly-streaming-platform-icon.youtube {
  background: rgba(255, 0, 0, 0.12);
  color: #ff0000;
}

.weekly-streaming-platform-icon.chzzk {
  background: rgba(0, 255, 163, 0.12);
  color: #00ffa3;
}

.weekly-streaming-platform-icon.twitch {
  background: rgba(145, 70, 255, 0.12);
  color: #9146ff;
}

.weekly-streaming-platform svg {
  width: 20px;
  height: 20px;
}

.weekly-streaming-platform span {
  font-size: var(--font-body-size);
  font-weight: var(--font-badge-weight);
  color: var(--text);
}

.weekly-streaming-title {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
}

.weekly-streaming-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

.weekly-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.weekly-highlight-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weekly-highlight-subtitle {
  font-size: var(--font-body-size);
  font-weight: var(--font-meta-weight);
  color: var(--text);
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.weekly-highlight-item {
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.weekly-highlight-tag {
  display: inline-block;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.15);
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 8px;
}

.weekly-highlight-title {
  font-size: var(--font-body-size);
  font-weight: var(--font-meta-weight);
  color: var(--text);
}

.weekly-highlight-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 8px 0 0 0;
}

/* 주간 게임주 분석 (테이블 스타일) */
.weekly-section-stocks {
  background: var(--section-gradient);
}

.weekly-section-stocks .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-stocks-tables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch;
}

.weekly-stocks-table {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.weekly-stocks-table-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  font-size: var(--font-title-size);
  font-weight: var(--font-badge-weight);
}

.weekly-stocks-table-header svg {
  width: 20px;
  height: 20px;
}

.weekly-stocks-table-header.up {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.2) 100%);
  color: #4ade80;
}

.weekly-stocks-table-header.down {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(239, 68, 68, 0.2) 100%);
  color: #f87171;
}

.weekly-stocks-table-body {
  padding: 8px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  flex: 1;
}

.weekly-stock-item {
  display: flex;
  flex-direction: column;
}

.weekly-stock-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 10px;
  transition: background 0.2s;
}

.weekly-stock-row:hover {
  background: var(--hover-bg);
}

.weekly-stock-rank {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-badge-size);
  font-weight: var(--font-badge-weight);
  flex-shrink: 0;
}

.weekly-stock-row.up .weekly-stock-rank {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.weekly-stock-row.down .weekly-stock-rank {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.weekly-stock-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weekly-stock-name {
  font-size: var(--font-body-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
}

.weekly-stock-price {
  font-size: var(--font-small-size);
  color: var(--text-secondary);
}

.weekly-stock-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--font-badge-weight);
  flex-shrink: 0;
  color: var(--text);
}

.weekly-stock-arrow {
  font-size: var(--font-small-size);
}

.weekly-stock-percent {
  font-size: var(--font-body-size);
}

.weekly-stock-change.up {
  color: #4ade80 !important;
}

.weekly-stock-change.down {
  color: #f87171 !important;
}

.weekly-stock-comment {
  padding: 8px 14px 12px;
  font-size: var(--font-small-size);
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 주간 MVP 섹션 */
.weekly-section-mvp {
  background: var(--section-gradient);
}

.weekly-section-mvp .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-mvp-card {
  display: flex;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.weekly-mvp-card::before {
  display: none;
}

.weekly-mvp-badge {
  display: none;
}

.weekly-mvp-content {
  flex: 1;
}

.weekly-mvp-tag {
  display: inline-block;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: #818cf8;
  background: rgba(99, 102, 241, 0.18);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.weekly-mvp-name {
  font-size: var(--font-lg-size);
  font-weight: var(--font-badge-weight);
  color: var(--text);
  margin: 0 0 10px 0;
}

.weekly-mvp-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0 0 14px 0;
}

.weekly-mvp-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.weekly-mvp-highlight {
  font-size: var(--font-badge-size);
  font-weight: var(--font-badge-weight);
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  padding: 6px 12px;
  border-radius: 20px;
}

/* 신작/업데이트 캘린더 */
.weekly-section-releases {
  background: var(--section-gradient);
}

.weekly-section-releases .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-releases-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.weekly-release-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.weekly-release-item:hover {
  background: var(--hover-bg);
}

.weekly-release-date {
  font-size: var(--font-body-size);
  font-weight: var(--font-badge-weight);
  color: #818cf8;
  background: rgba(99, 102, 241, 0.18);
  padding: 8px 14px;
  border-radius: 10px;
  flex-shrink: 0;
  min-width: 60px;
  text-align: center;
}

.weekly-release-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weekly-release-title {
  font-size: var(--font-rank-name-size);
  font-weight: var(--font-rank-name-weight);
  color: var(--font-rank-name-color);
}

.weekly-release-platform {
  font-size: var(--font-rank-dev-size);
  font-weight: var(--font-rank-dev-weight);
  color: var(--font-rank-dev-color);
}

.weekly-release-type {
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  padding: 6px 14px;
  border-radius: 20px;
  flex-shrink: 0;
}

.weekly-release-type.new {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(74, 222, 128, 0.15) 100%);
  color: #22c55e;
}

.weekly-release-type.update {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  color: var(--insight-icon, #6366f1);
}

/* 글로벌 트렌드 */
.weekly-section-global {
  background: var(--section-gradient);
}

.weekly-section-global .weekly-section-title-wrap .weekly-icon {
  background: var(--section-icon-bg);
  color: var(--insight-icon);
}

.weekly-global-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.weekly-global-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.weekly-global-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.weekly-global-region {
  display: inline-block;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.18);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.weekly-global-title {
  font-size: var(--font-section-size);
  font-weight: var(--font-badge-weight);
  color: var(--text);
  margin: 0 0 10px 0;
  line-height: 1.45;
}

.weekly-global-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* 글로벌 트렌드 카드 (썸네일 포함, 2열) */
.global-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
}

.global-grid .global-card {
  height: 100%;
  min-height: 120px;
}

.global-grid .global-thumb {
  width: 100px;
  height: 100%;
  min-height: 80px;
}

.global-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.global-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.global-thumb {
  width: 100px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--border);
}

.global-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.global-content {
  flex: 1;
  min-width: 0;
}

.global-tag {
  display: inline-block;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.18);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.global-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.global-desc {
  font-size: var(--font-desc-size);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

@media (max-width: 768px) {
  .global-grid,
  .industry-grid {
    grid-template-columns: 1fr;
  }
  .global-grid .global-card,
  .global-card {
    flex-direction: column;
    padding: 0;
  }
	  .global-grid .global-thumb,
	  .global-thumb {
	    width: 100%;
	    height: auto;
	    aspect-ratio: 16 / 9;
	    max-height: 180px;
	    border-radius: var(--radius) var(--radius) 0 0;
	    min-height: auto;
	  }
  .global-content {
    padding: 14px 16px 16px;
  }
}

/* 주간 리포트 반응형 */
@media (max-width: 768px) {
  .weekly-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekly-hot-issues {
    grid-template-columns: 1fr;
  }

  .weekly-rankings-grid,
  .weekly-metrics-row,
  .weekly-metrics-grid,
  .weekly-highlight-grid,
  .weekly-stocks-tables,
  .weekly-community-grid,
  .weekly-streaming-grid,
  .weekly-global-grid {
    grid-template-columns: 1fr;
  }

  .weekly-hot-card.featured {
    grid-column: 1;
  }

  /* 모바일 이미지 스타일 */
  .weekly-hot-thumb {
    aspect-ratio: 16 / 9;
    max-height: 200px;
    border-radius: 12px 12px 0 0;
  }

  .weekly-header-card.has-hero-image {
    flex-direction: column;
  }

  .weekly-header-image {
    width: 100%;
    height: 220px;
    border-radius: 20px 20px 0 0;
  }

  .weekly-header-text {
    padding: 16px;
  }

  .weekly-section {
    padding: 16px;
    border-radius: 16px;
  }

  .weekly-stat-value {
    font-size: var(--font-stat-size);
  }

  .weekly-intro {
    padding: 18px;
    border-radius: 16px;
  }

  .weekly-intro-text {
    font-size: var(--font-body-size);
  }

  /* MVP 섹션 */
  .weekly-mvp-card {
    flex-direction: column;
    gap: 16px;
  }

  .weekly-mvp-badge {
    width: 50px;
    height: 50px;
    font-size: var(--font-body-size);
  }

  .weekly-mvp-name {
    font-size: var(--font-heading-size);
  }

  .weekly-mvp-highlights {
    flex-wrap: wrap;
  }

  /* 릴리즈 캘린더 - 모바일에서 1열 */
  .weekly-releases-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .weekly-release-item {
    padding: 14px;
    border-radius: 12px;
  }

  .weekly-release-date {
    min-width: 50px;
    font-size: var(--font-body-size);
  }

  /* 글로벌 트렌드 */
  .weekly-global-card {
    padding: 14px;
    border-radius: 12px;
  }

  .weekly-global-title {
    font-size: var(--font-title-size);
  }

  .weekly-global-desc {
    font-size: var(--font-body-size);
  }

  /* 피드 카드 패딩 통일 - 768px */
  .weekly-hot-card,
  .weekly-rank-card,
  .weekly-community-card,
  .weekly-streaming-card {
    padding: 14px;
    border-radius: 12px;
  }

  /* 이미지형 카드 라운드/패딩 통일 - 768px */
  .industry-card,
  .weekly-metric-card,
  .global-card,
  .weekly-stocks-table {
    border-radius: 12px;
  }

  .industry-thumb,
  .metric-thumb,
  .global-thumb {
    border-radius: 12px 12px 0 0;
  }

  .weekly-hot-card.has-thumb .weekly-hot-content,
  .industry-content,
  .weekly-metric-content,
  .global-content {
    padding: 14px;
  }

  .weekly-timeline-item {
    padding: 12px 0;
  }
}

@media (max-width: 480px) {
  .weekly-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .weekly-stat-card {
    padding: 14px;
    gap: 12px;
  }

  .weekly-stat-icon {
    width: 40px;
    height: 40px;
  }

  .weekly-stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .weekly-stat-value {
    font-size: var(--font-xl-size);
  }

  .weekly-stat-label {
    font-size: var(--font-meta-size);
  }

  .weekly-section {
    padding: 16px;
    border-radius: 12px;
  }

  .weekly-section-title {
    font-size: var(--font-section-size);
  }

  .weekly-icon {
    width: 18px;
    height: 18px;
  }

  .weekly-rank-game {
    font-size: var(--font-body-size);
  }

  /* MVP 섹션 */
  .weekly-mvp-badge {
    width: 44px;
    height: 44px;
    font-size: var(--font-badge-size);
  }

  .weekly-mvp-name {
    font-size: var(--font-section-size);
  }

  .weekly-mvp-desc {
    font-size: var(--font-small-size);
  }

  .weekly-mvp-highlight {
    font-size: var(--font-meta-size);
    padding: 4px 8px;
  }

  /* 릴리즈 캘린더 */
  .weekly-release-item {
    padding: 12px;
    border-radius: 10px;
    gap: 10px;
  }

  .weekly-release-date {
    min-width: 45px;
    font-size: var(--font-small-size);
  }

  .weekly-release-badges {
    flex-wrap: wrap;
    gap: 4px;
  }

  .weekly-release-badge {
    font-size: var(--font-xs-size);
    padding: 2px 6px;
  }

  /* 글로벌 트렌드 */
  .weekly-global-card {
    padding: 12px;
    border-radius: 10px;
  }

  .weekly-global-region {
    font-size: var(--font-meta-size);
    padding: 3px 8px;
  }

  .weekly-global-title {
    font-size: var(--font-body-size);
  }

  .weekly-global-desc {
    font-size: var(--font-small-size);
  }

  /* 피드 카드 패딩 통일 - 480px */
  .weekly-hot-card,
  .weekly-rank-card,
  .weekly-community-card,
  .weekly-streaming-card {
    padding: 12px;
    border-radius: 10px;
  }

  /* 이미지형 카드 라운드/패딩 통일 - 480px */
  .weekly-hot-thumb,
  .industry-thumb,
  .metric-thumb,
  .global-thumb {
    border-radius: 10px 10px 0 0;
  }

  .industry-card,
  .weekly-metric-card,
  .global-card,
  .weekly-stocks-table {
    border-radius: 10px;
  }

  .weekly-hot-card.has-thumb .weekly-hot-content,
  .industry-content,
  .weekly-metric-content,
  .global-content {
    padding: 12px;
  }

  .weekly-timeline-item {
    padding: 10px 0;
  }
}

@media (max-width: 360px) {
  /* 피드 카드 패딩/라운드 통일 - 360px */
  .weekly-hot-card,
  .weekly-rank-card,
  .weekly-community-card,
  .weekly-streaming-card {
    padding: 10px;
    border-radius: 8px;
  }

  .weekly-release-item,
  .weekly-global-card,
  .industry-card,
  .weekly-metric-card,
  .global-card,
  .weekly-stocks-table {
    border-radius: 8px;
  }

  .weekly-hot-thumb,
  .industry-thumb,
  .metric-thumb,
  .global-thumb {
    border-radius: 8px 8px 0 0;
  }

  .weekly-hot-card.has-thumb .weekly-hot-content,
  .industry-content,
  .weekly-metric-content,
  .global-content {
    padding: 10px;
  }

  .weekly-timeline-item {
    padding: 8px 0;
  }
}
.weekly-coming-soon {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.weekly-coming-soon h3 {
  font-size: var(--font-heading-size);
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.insight-container {
  padding: var(--space-block-y) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-block-y);
}

/* ========== 일간 리포트 섹션별 스타일 (주간과 통일) ========== */

/* 일간 리포트 카드 기본 스타일 */
.insight-container .insight-card {
  border-radius: var(--radius-lg);
  transition: var(--transition-elevate);
}

.insight-container .insight-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 아이콘 배경 박스 (주간과 동일 - 32px) */
.daily-section-icon-wrap {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.daily-section-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 섹션 타이틀 스타일 (주간과 동일) */
.insight-card .home-card-title {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  letter-spacing: -0.01em;
  line-height: 1.5;
}

/* 핫이슈 */
.insight-card.daily-section-hot {
  background: var(--gradient-hot);
  border-color: var(--insight-border, rgba(99, 102, 241, 0.2));
}

.insight-card.daily-section-hot .home-card-header {
  border-bottom: 2px solid var(--insight-header-border, rgba(99, 102, 241, 0.15));
}

.insight-card.daily-section-hot .daily-section-icon-wrap {
  background: var(--icon-bg-hot);
}

.insight-card.daily-section-hot .daily-section-icon {
  color: var(--insight-icon, #6366f1);
}

/* 업계 동향 */
.insight-card.daily-section-industry {
  background: var(--gradient-industry);
  border-color: var(--insight-border, rgba(99, 102, 241, 0.2));
}

.insight-card.daily-section-industry .home-card-header {
  border-bottom: 2px solid var(--insight-header-border, rgba(99, 102, 241, 0.15));
}

.insight-card.daily-section-industry .daily-section-icon-wrap {
  background: var(--icon-bg-industry);
}

.insight-card.daily-section-industry .daily-section-icon {
  color: var(--insight-icon, #6366f1);
}

/* 주목할만한 지표 */
.insight-card.daily-section-metrics {
  background: var(--gradient-metrics);
  border-color: var(--insight-border, rgba(99, 102, 241, 0.2));
}

.insight-card.daily-section-metrics .home-card-header {
  border-bottom: 2px solid var(--insight-header-border, rgba(99, 102, 241, 0.15));
}

.insight-card.daily-section-metrics .daily-section-icon-wrap {
  background: var(--icon-bg-metrics);
}

.insight-card.daily-section-metrics .daily-section-icon {
  color: var(--insight-icon, #6366f1);
}

/* 순위 변동 */
.insight-card.daily-section-rankings {
  background: var(--gradient-rankings);
  border-color: var(--insight-border, rgba(99, 102, 241, 0.2));
}

.insight-card.daily-section-rankings .home-card-header {
  border-bottom: 2px solid var(--insight-header-border, rgba(99, 102, 241, 0.15));
}

.insight-card.daily-section-rankings .daily-section-icon-wrap {
  background: var(--icon-bg-rankings);
}

.insight-card.daily-section-rankings .daily-section-icon {
  color: var(--insight-icon, #6366f1);
}

/* 유저 반응 */
.insight-card.daily-section-community {
  background: var(--gradient-community);
  border-color: var(--insight-border, rgba(99, 102, 241, 0.2));
}

.insight-card.daily-section-community .home-card-header {
  border-bottom: 2px solid var(--insight-header-border, rgba(99, 102, 241, 0.15));
}

.insight-card.daily-section-community .daily-section-icon-wrap {
  background: var(--icon-bg-community);
}

.insight-card.daily-section-community .daily-section-icon {
  color: var(--insight-icon, #6366f1);
}

/* 스트리밍 트렌드 */
.insight-card.daily-section-streaming {
  background: var(--gradient-streaming);
  border-color: var(--insight-border, rgba(99, 102, 241, 0.2));
}

.insight-card.daily-section-streaming .home-card-header {
  border-bottom: 2px solid var(--insight-header-border, rgba(99, 102, 241, 0.15));
}

.insight-card.daily-section-streaming .daily-section-icon-wrap {
  background: var(--icon-bg-streaming);
}

.insight-card.daily-section-streaming .daily-section-icon {
  color: var(--insight-icon, #6366f1);
}

/* 게임주 현황 */
.insight-card.daily-section-stocks {
  background: var(--gradient-stocks);
  border-color: var(--insight-border, rgba(99, 102, 241, 0.2));
}

.insight-card.daily-section-stocks .home-card-header {
  border-bottom: 2px solid var(--insight-header-border, rgba(99, 102, 241, 0.15));
}

.insight-card.daily-section-stocks .daily-section-icon-wrap {
  background: var(--icon-bg-stocks);
}

.insight-card.daily-section-stocks .daily-section-icon {
  color: var(--insight-icon, #6366f1);
}

/* 카드 헤더 공통 */
.insight-card .home-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.insight-container .insight-card .home-card-header {
  padding: 16px 20px;
  border-bottom: 2px solid var(--border);
}

.insight-container .insight-card .home-card-body {
  padding: 0;
}

.insight-container .insight-card .home-insight-split {
  padding: 16px 20px;
}

.insight-container .home-insight-split {
  align-items: stretch;
}

.insight-container .home-insight-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-container .home-insight-column .home-insight-item {
  flex: 1;
  min-height: 120px;
}

/* 인포그래픽 */
.insight-infographic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.insight-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  text-align: center;
  position: relative;
}

.insight-info-card.with-icon {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 3px;
  padding: 14px 10px;
  min-height: 130px;
}

.insight-info-card.with-icon .insight-info-label {
  margin-bottom: 2px;
}

.insight-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  margin: 4px 0;
}

.insight-info-icon-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-secondary);
  margin: 4px 0;
}

.insight-info-card.with-icon .insight-info-value {
  font-size: var(--font-small-size);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.insight-info-card.with-icon .insight-info-sub {
  font-size: var(--font-xs-size);
  color: var(--text-tertiary);
}

.insight-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.insight-info-label {
  font-size: var(--font-meta-size);
  color: var(--text-tertiary);
  font-weight: var(--font-desc-weight);
}

.insight-info-value {
  font-size: var(--font-body-size);
  font-weight: var(--font-badge-weight);
  color: var(--text-primary);
}

.insight-info-sub {
  font-size: var(--font-meta-size);
  color: var(--text-secondary);
}

.insight-info-trend {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: var(--font-xs-size);
  font-weight: var(--font-badge-weight);
}

.insight-info-trend.up { color: #22c55e; }
.insight-info-trend.down { color: #ef4444; }
.insight-info-trend.new { color: var(--primary); }

@media (max-width: 768px) {
  .insight-infographic {
    grid-template-columns: repeat(3, 1fr);
  }

  .insight-container .home-insight-split {
    flex-direction: column;
  }

  .insight-container .home-insight-column {
    width: 100%;
  }

  .insight-ranking-chart {
    padding: 12px;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .insight-infographic {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px;
    gap: 8px;
  }

  .insight-container .insight-card .home-card-header {
    padding: 10px 12px !important;
  }

  .insight-container .insight-card .home-insight-split {
    padding: 10px 12px;
  }
}

/* 순위 변동 차트 */
.insight-ranking-chart {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.04) 0%, rgba(59, 130, 246, 0.04) 100%);
  border-radius: 20px;
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.insight-chart-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-chart-header {
  font-size: var(--font-small-size);
  font-weight: var(--font-badge-weight);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.insight-chart-header.up {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.insight-chart-header.down {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.insight-chart-header.new {
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary);
}

.insight-chart-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.insight-chart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}

.insight-chart-item.up { border-left-color: #22c55e; }
.insight-chart-item.down { border-left-color: #ef4444; }
.insight-chart-item.new { border-left-color: var(--primary); }

.insight-chart-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.insight-chart-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.insight-chart-name {
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insight-chart-rank {
  font-size: var(--font-meta-size);
  color: var(--text-secondary);
}

.insight-chart-item.up .insight-chart-rank { color: #22c55e; }
.insight-chart-item.down .insight-chart-rank { color: #ef4444; }
.insight-chart-item.new .insight-chart-rank { color: var(--primary); }

.insight-chart-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-small-size);
}

@media (max-width: 768px) {
  .insight-ranking-chart {
    grid-template-columns: 1fr;
  }
}

/* ========== Stocks Card (게임주 현황) ========== */
.stocks-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0;
}

.stock-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--card-bg);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border);
}

.stock-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stock-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stock-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stock-name {
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  color: var(--text);
  line-height: 1.45;
}

.stock-date {
  font-size: var(--font-small-size);
  color: var(--text-tertiary);
}

.stock-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.stock-price-value {
  font-size: var(--font-xl-size);
  font-weight: var(--font-badge-weight);
  color: var(--text-primary);
  white-space: nowrap;
}

.stock-price-value.up {
  color: #ef5350;
}

.stock-price-value.down {
  color: #42a5f5;
}

.stock-change-badge {
  font-size: var(--font-body-size);
  font-weight: var(--font-meta-weight);
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-tertiary);
}

.stock-change-badge.up {
  background: rgba(239, 83, 80, 0.15);
  color: #ef5350;
}

.stock-change-badge.down {
  background: rgba(66, 165, 245, 0.15);
  color: #42a5f5;
}

.stock-chart {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--bg-tertiary);
}

.stock-comment {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 12px 0 0 0;
}

/* 모바일: 한 아이템씩 표시 */
@media (max-width: 768px) {
  .stocks-split {
    grid-template-columns: 1fr;
  }

  .stock-item {
    padding: 14px;
    border-radius: 12px;
  }

  .stock-name {
    font-size: var(--font-lg-size);
  }

  .stock-price-value {
    font-size: var(--font-2xl-size);
  }

  .stock-change-badge {
    font-size: var(--font-title-size);
  }

  .stock-comment {
    font-size: var(--font-body-size);
  }
}

@media (max-width: 480px) {
  .stock-item {
    padding: 12px;
    border-radius: 10px;
  }
}

@media (max-width: 360px) {
  .stock-item {
    padding: 10px;
    border-radius: 8px;
  }
}

/* 누락된 클래스 라이트모드 정의 (다크모드 호환성) */
.weekly-ranking-desc,
.weekly-stock-rank-comment,
.insight-item-desc,
.stock-desc,
.stock-item-comment,
.stock-item-desc {
  color: var(--text-secondary);
}

.stock-item-name {
  color: var(--text);
}

/* ========== Metacritic Section (Poster Grid) ========== */
.metacritic-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 16px;
}

.metacritic-card {
  position: relative;
  background: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid var(--border);
}

.metacritic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.metacritic-card-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: var(--font-badge-size);
  font-weight: var(--font-badge-weight);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
}

.metacritic-card-rank.top1 { background: #ffd700; color: #000; }
.metacritic-card-rank.top2 { background: #c0c0c0; color: #000; }
.metacritic-card-rank.top3 { background: #cd7f32; color: #fff; }

.metacritic-card-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.metacritic-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metacritic-card-score {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: var(--font-heading-size);
  font-weight: var(--font-badge-weight);
  color: #fff;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.metacritic-card-score.score-high { background: #66cc33; }
.metacritic-card-score.score-good { background: #ffcc33; }
.metacritic-card-score.score-mixed { background: #ff6600; }
.metacritic-card-score.score-bad { background: #ff0000; }
.metacritic-card-score.score-unknown {
  background: var(--bg-tertiary);
  color: var(--text);
}

.metacritic-card-info {
  padding: 10px;
}

.metacritic-card-title {
  font-size: var(--font-desc-size);
  font-weight: var(--font-title-weight);
  color: var(--font-rank-name-color);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}

.metacritic-card-platform {
  font-size: var(--font-rank-dev-size);
  font-weight: var(--font-rank-dev-weight);
  color: var(--font-rank-dev-color);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metacritic-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
}

/* Tablet: 4 columns */
@media (max-width: 1024px) {
  .metacritic-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

/* Mobile: 3 columns */
@media (max-width: 768px) {
  .metacritic-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .metacritic-card-rank {
    font-size: var(--font-xs-size);
    padding: 3px 6px;
    top: 6px;
    left: 6px;
  }

  .metacritic-card-score {
    font-size: var(--font-body-size);
    min-width: 32px;
    height: 32px;
    bottom: 6px;
    right: 6px;
  }

  .metacritic-card-info {
    padding: 8px;
  }

  .metacritic-card-title {
    font-size: var(--font-desc-size);
    min-height: 28px;
  }

  .metacritic-card-platform {
    font-size: var(--font-rank-dev-size);
  }
}

/* Small Mobile: 2 columns */
@media (max-width: 480px) {
  .metacritic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px;
  }
}


/* ========== 일간 리포트 - 유저 반응 카드 그리드 ========== */
.daily-community-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}

.daily-community-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.daily-community-card::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 24px;
  width: 16px;
  height: 16px;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

.daily-community-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.daily-community-game {
  display: inline-block;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: #ec4899;
  background: rgba(236, 72, 153, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.daily-community-title {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0 0 10px 0;
  line-height: 1.45;
}

.daily-community-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* ========== 일간 리포트 - 스트리밍 트렌드 카드 그리드 ========== */
.daily-streaming-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}

.daily-streaming-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.daily-streaming-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-progress);
  opacity: 0;
  transition: opacity 0.2s;
}

.daily-streaming-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 호버 시 상단 띠 효과 제거 */

.daily-streaming-platform {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.daily-streaming-platform-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-streaming-platform-icon.youtube {
  background: rgba(255, 0, 0, 0.12);
  color: #ff0000;
}

.daily-streaming-platform-icon.chzzk {
  background: rgba(0, 255, 163, 0.12);
  color: #00ffa3;
}

.daily-streaming-platform-icon.twitch {
  background: rgba(145, 70, 255, 0.12);
  color: #9146ff;
}

.daily-streaming-platform-icon svg {
  width: 20px;
  height: 20px;
}

.daily-streaming-platform-name {
  font-size: var(--font-small-size);
  font-weight: var(--font-meta-weight);
  color: var(--text-secondary);
}

.daily-streaming-title {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0 0 10px 0;
  line-height: 1.45;
}

.daily-streaming-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* ========== 일간 리포트 - 업계 동향 타임라인 ========== */
.daily-industry-timeline {
  padding: 16px;
  position: relative;
}

.daily-industry-timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3));
}

.daily-industry-item {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
}

.daily-industry-item:last-child {
  margin-bottom: 0;
}

.daily-industry-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--card-bg);
}

.daily-industry-content {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.daily-industry-content:hover {
  background: var(--hover-bg);
}

.daily-industry-tag {
  display: inline-block;
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: #a855f7;
  background: rgba(168, 85, 247, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.daily-industry-title {
  font-size: var(--font-body-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.daily-industry-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  margin: 0;
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
  .daily-community-grid,
  .daily-streaming-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .daily-community-card,
  .daily-streaming-card {
    padding: 16px;
  }

  .daily-community-title,
  .daily-streaming-title {
    font-size: var(--font-title-size);
  }

  .daily-community-desc,
  .daily-streaming-desc {
    font-size: var(--font-small-size);
  }

  .daily-industry-timeline {
    padding: 12px;
  }

  .daily-industry-timeline::before {
    left: 18px;
  }

  .daily-industry-item {
    gap: 16px;
  }

  .daily-industry-content {
    padding: 14px;
  }

  .daily-industry-title {
    font-size: var(--font-body-size);
  }

  .daily-industry-desc {
    font-size: var(--font-small-size);
  }
}

/* ========== Daily Insight (Standalone Reports) ========== */
/* Used by `src/insights/daily.js` generated `/reports/*.html` */

.page-daily-insight {
  background: #111827;
  min-height: 100vh;
}

.page-daily-insight .insight-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-daily-insight .insight-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-daily-insight .insight-date {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

.page-daily-insight .insight-subtitle {
  color: #9ca3af;
  margin-top: 8px;
}

/* Tabs */
.page-daily-insight .insight-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}

.page-daily-insight .insight-tab {
  padding: 12px 32px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  background: #1f2937;
  color: #9ca3af;
}

.page-daily-insight .insight-tab:hover {
  background: #374151;
  color: #fff;
}

.page-daily-insight .insight-tab.active {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  border-color: transparent;
}

.page-daily-insight .insight-panel {
  display: none;
}

.page-daily-insight .insight-panel.active {
  display: block;
}

.page-daily-insight .insight-section {
  background: #1f2937;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.page-daily-insight .section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-daily-insight .summary-list {
  list-style: none;
  padding: 0;
}

.page-daily-insight .summary-list li {
  padding: 12px 16px;
  background: #374151;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #e5e7eb;
}

.page-daily-insight .ranking-table {
  width: 100%;
  border-collapse: collapse;
}

.page-daily-insight .ranking-table th,
.page-daily-insight .ranking-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #374151;
}

.page-daily-insight .ranking-table th {
  color: #9ca3af;
  font-weight: 500;
}

.page-daily-insight .ranking-table .rank {
  width: 40px;
  font-weight: 700;
  color: #fff;
}

.page-daily-insight .ranking-table .icon {
  width: 40px;
}

.page-daily-insight .ranking-table .icon img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.page-daily-insight .ranking-table .title {
  color: #e5e7eb;
}

.page-daily-insight .ranking-table .ccu {
  color: #9ca3af;
}

.page-daily-insight .ranking-table .change-cell {
  width: 60px;
  text-align: right;
}

.page-daily-insight .change {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.page-daily-insight .change.up {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.page-daily-insight .change.down {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.page-daily-insight .change.new {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.page-daily-insight .change.same {
  color: #6b7280;
}

.page-daily-insight :is(.news-list, .community-list) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-daily-insight :is(.news-item, .community-item) {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #374151;
  border-radius: 8px;
  text-decoration: none;
  color: #e5e7eb;
  transition: background 0.2s;
}

.page-daily-insight :is(.news-item, .community-item):hover {
  background: #4b5563;
}

.page-daily-insight :is(.news-item .source, .community-item .source) {
  background: #4f46e5;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.page-daily-insight :is(.news-item .title, .community-item .title) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-daily-insight .back-link {
  display: inline-block;
  margin-bottom: 20px;
  color: #9ca3af;
  text-decoration: none;
}

.page-daily-insight .back-link:hover {
  color: #fff;
}

.page-daily-insight .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .page-daily-insight .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* AI Insight */
.page-daily-insight .ai-section {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}

.page-daily-insight .ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .page-daily-insight .ai-grid {
    grid-template-columns: 1fr;
  }
}

.page-daily-insight .ai-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-daily-insight .ai-card {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 16px;
  border-left: 3px solid #818cf8;
}

.page-daily-insight .ai-card-tag {
  display: inline-block;
  background: #4f46e5;
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.page-daily-insight .ai-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.4;
}

.page-daily-insight .ai-card-desc {
  font-size: 0.85rem;
  color: #c7d2fe;
  line-height: 1.7;
  white-space: pre-line;
}

.page-daily-insight .ai-trends {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-daily-insight .ai-trends li {
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  margin-bottom: 8px;
  color: #c7d2fe;
  font-size: 0.9rem;
  border-left: 3px solid #818cf8;
}

.page-daily-insight .ai-badge {
  background: #818cf8;
  color: #1e1b4b;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  font-weight: 700;
}

/* Weekly Panel */
.page-daily-insight .weekly-header {
  text-align: center;
  margin-bottom: 32px;
}

.page-daily-insight .weekly-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.page-daily-insight .weekly-period {
  color: #9ca3af;
  font-size: 14px;
}

.page-daily-insight .metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 900px) {
  .page-daily-insight .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .page-daily-insight .metrics-grid {
    grid-template-columns: 1fr;
  }
}

.page-daily-insight .metric-card {
  background: #1f2937;
  border-radius: 12px;
  padding: 20px;
  border-top: 3px solid;
}

.page-daily-insight .metric-card.primary { border-color: #6366f1; }
.page-daily-insight .metric-card.accent { border-color: #f97316; }
.page-daily-insight .metric-card.success { border-color: #22c55e; }
.page-daily-insight .metric-card.blue { border-color: #3b82f6; }

.page-daily-insight .metric-label {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 8px;
}

.page-daily-insight .metric-value {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.page-daily-insight .metric-sub {
  font-size: 12px;
  color: #6b7280;
}

.page-daily-insight .highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .page-daily-insight .highlights-grid {
    grid-template-columns: 1fr;
  }
}

.page-daily-insight .highlight-card {
  background: #1f2937;
  border-radius: 12px;
  padding: 20px;
}

.page-daily-insight .highlight-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}

.page-daily-insight .highlight-tag.mobile { background: rgba(99,102,241,0.2); color: #818cf8; }
.page-daily-insight .highlight-tag.pc { background: rgba(59,130,246,0.2); color: #60a5fa; }
.page-daily-insight .highlight-tag.console { background: rgba(168,85,247,0.2); color: #c084fc; }
.page-daily-insight .highlight-tag.esports { background: rgba(249,115,22,0.2); color: #fb923c; }
.page-daily-insight .highlight-tag.industry { background: rgba(34,197,94,0.2); color: #4ade80; }

.page-daily-insight .highlight-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.4;
}

.page-daily-insight .highlight-desc {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.6;
}

.page-daily-insight .weekly-coming-soon {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.page-daily-insight .weekly-coming-soon h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #9ca3af;
}

/* ===========================================
   상단 검색바 스타일 (테마 통합)
   =========================================== */
.search-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 20px 16px;
  position: relative;
  z-index: 200;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.search-container-inner {
  max-width: 300px;
  margin: 0 auto;
  position: relative;
}

.search-box {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0 5px 0 24px;
  height: 40px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box:focus-within {
  border-color: var(--border-color);
  box-shadow: none;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  padding: 0 8px;
  min-width: 0;
  height: 100%;
  text-align: center;
}

.search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
  transition: opacity 0.15s;
}

.search-input:focus::placeholder {
  opacity: 0;
}

.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
  margin-right: 2px;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  visibility: hidden;
}

.search-box:focus-within .search-clear,
.search-clear.visible {
  visibility: visible;
}

.search-clear:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.search-clear svg {
  width: 14px;
  height: 14px;
}

.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--hover-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.search-btn:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.search-btn:active {
  transform: scale(0.95);
}

.search-btn svg {
  width: 16px;
  height: 16px;
}

/* 검색 드롭다운 */
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  margin-top: 6px;
}

.search-dropdown.active {
  display: block;
}

/* 최근 검색 헤더 */
.search-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border-color);
}

.search-recent-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-clear-all {
  font-size: 11px;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.search-clear-all:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: var(--hover-bg);
}

.search-result-icon {
  display: none;
}

.search-result-info {
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

/* 헤더 검색 드롭다운 전용 - 클릭 영역 확대 */
.search-dropdown .search-result-item {
  padding: 0;
  cursor: pointer;
}

.search-dropdown .search-result-info {
  display: block;
  padding: 14px 16px;
}

.search-result-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 개별 삭제 버튼 */
.search-result-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.search-result-delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.search-result-delete svg {
  width: 12px;
  height: 12px;
}

.search-no-results {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* 검색바 모바일 반응형 */
@media (max-width: 768px) {
  .search-container {
    max-width: 100%;
    padding: 0 var(--space-page-x);
    margin-bottom: var(--space-block-y);
  }

  .search-box {
    height: 40px;
    border-radius: 20px;
    padding: 0 4px 0 32px;
  }

  .search-input {
    font-size: 12px;
  }

  .search-btn {
    width: 28px;
    height: 28px;
  }

  .search-btn svg {
    width: 16px;
    height: 16px;
  }

  .search-dropdown {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 500px;
    border-radius: 12px;
  }

  .search-result-item {
    padding: 10px 14px;
    gap: 10px;
  }

  .search-result-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .search-result-title {
    font-size: 14px;
  }

  .search-result-meta {
    font-size: 12px;
  }
}

/* ===========================================
   검색 페이지 스타일
   =========================================== */
.search-page {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-block-y-xl) 0;
  min-height: calc(100vh - 250px);
}

.search-redirect-container {
  text-align: center;
  padding: 40px;
}

.search-page-header {
  margin-bottom: var(--space-block-y-xl);
}

.search-page-input-wrap {
  display: flex;
  align-items: center;
  background: var(--card-bg, #1e1e1e);
  border: 2px solid var(--border-color, #555);
  border-radius: 24px;
  padding: 0 8px 0 20px;
  height: 52px;
  min-height: 52px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-page-input-wrap:focus-within {
  border-color: var(--border-color);
}

.search-page-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 15px;
  padding: 0 12px 0 0;
  min-width: 0;
  height: 100%;
}

.search-page-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.search-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--hover-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.search-page-btn:hover {
  background: var(--primary);
  color: white;
}

.search-page-btn svg {
  width: 18px;
  height: 18px;
}

/* 로딩 */
.search-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.search-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 검색 결과 없음 안내 */
.search-no-result-notice {
  text-align: center;
  padding: 24px 16px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

/* 섹션 */
.search-page-section {
  margin-bottom: var(--space-block-y-xl);
}

.search-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.search-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px 0;
}

.search-section-header .search-section-title {
  margin: 0;
}

.search-clear-all-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.search-clear-all-btn:hover {
  color: var(--text);
  background: var(--hover-bg);
}

/* 최근 본 게임 */
.search-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background 0.2s;
}

.search-recent-item:hover {
  background: var(--hover-bg);
}

.search-recent-link {
  flex: 1;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.search-recent-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
}

.search-recent-delete:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.search-recent-delete svg {
  width: 14px;
  height: 14px;
}

/* 검색 결과 */
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}

.search-result-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.search-result-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.search-result-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-dev {
  font-size: 13px;
  color: var(--text-muted);
}

.search-result-platforms {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.search-result-platform {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--hover-bg);
  padding: 4px 8px;
  border-radius: 4px;
}

/* 빈 결과 */
.search-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

/* 모바일 */
@media (max-width: 768px) {
  .search-page {
    padding: var(--space-block-y) 0;
  }

  .search-page-input-wrap {
    height: 44px;
    padding: 0 6px 0 16px;
  }

  .search-page-input {
    font-size: 14px;
  }

  .search-page-btn {
    width: 32px;
    height: 32px;
  }

  .search-page-btn svg {
    width: 16px;
    height: 16px;
  }

  .search-recent-item,
  .search-result-card {
    padding: 12px 14px;
  }

  .search-result-name {
    font-size: 14px;
  }
}

/* ===== Game Page Styles (split) ===== */

/* ========== Game Page ========== */
.game-container {
  min-height: calc(100vh - 250px);
  padding-top: 0;
  padding-bottom: var(--space-block-y-xl);
}

.game-container .home-card-body {
  padding: 0;
}

.game-container .home-card-header {
  padding: 12px 16px;
}

.game-container .home-card-title svg {
  width: 24px;
  height: 24px;
}

.game-container .rank-trend-section {
  padding: 0;
  min-height: 280px;
}

.game-container .trend-charts {
  padding: 4px 4px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.game-container .trend-charts .trend-content {
  flex: 1;
  display: none;
}

.game-container .trend-charts .trend-content.active {
  display: flex;
  flex-direction: column;
}

.game-container .trend-charts .game-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-container .trend-charts svg {
  width: 100%;
  height: auto;
  display: block;
}

.game-container .trend-chart-svg,
.game-container .game-chart-svg {
  width: 100%;
  max-height: 260px;
}

/* 게임 히어로 섹션 */
.game-hero {
  margin-bottom: var(--space-block-y-lg);
}

.game-hero-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.game-hero-icon {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

.game-hero-info {
  flex: 1;
  min-width: 0;
}

.game-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #c2410c;
  background: rgba(194, 65, 12, 0.15);
  border: 1px solid #c2410c;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}

.game-back-btn:hover {
  color: white;
  background: #c2410c;
  border-color: #c2410c;
}

.game-hero-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px 0;
}

.game-hero-developer {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.game-hero-platforms {
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-platform-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.game-hero-stats {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.game-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.game-hero-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.game-hero-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

/* Steam 스탯 색상 */
.stat-ccu .game-hero-stat-value {
  color: #4fc3f7;
}

.stat-sales .game-hero-stat-value {
  color: #ffb74d;
}

.stat-players .game-hero-stat-value {
  color: #81c784;
}

/* 게임 그리드 (2컬럼) */
.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-block-gap-lg);
}

/* 풀 너비 카드 */
.home-card-full {
  grid-column: 1 / -1;
}

/* 게임 순위 섹션 */
.game-rank-mobile {
  padding: 8px;
}

.game-rank-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px 0;
}

.game-rank-col {
  padding: 0;
  background: var(--bg-tertiary);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.game-rank-col-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.game-rank-col-header img {
  width: 20px;
  height: 20px;
}

.game-rank-rows {
  padding: 0;
}

.game-rank-country-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.game-rank-country-row:last-child {
  border-bottom: none;
}

.game-rank-country-flag {
  font-size: 20px;
  width: 28px;
}

.game-rank-country-flag .emoji {
  width: 22px;
  height: 22px;
}

.game-rank-country-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

@media (prefers-color-scheme: dark) {
  .game-rank-country-name {
    color: rgba(255, 255, 255, 0.9);
  }
}

.game-rank-country-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  min-width: 36px;
  text-align: right;
}

.game-rank-change {
  font-size: 13px;
  font-weight: 500;
  margin-left: 6px;
}

.game-rank-change.up {
  color: #22c55e;
}

.game-rank-change.down {
  color: #ef4444;
}

/* 실시간 순위 - 비활성 버튼 스타일 */
.realtime-rank-section .tab-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.realtime-content {
  display: none;
}

.realtime-content.active {
  display: block;
  padding: 0;
}

.realtime-rank-section .game-rank-grid {
  padding: 12px 16px;
}

/* 요약 뷰: trend-charts와 동일한 패딩 */
.realtime-content[data-realtime-view="summary"].active .game-rank-grid {
  padding: 4px 8px;
}

.realtime-content[data-realtime-view="realtime"].active {
  padding: 4px 8px;
}

.realtime-content svg {
  width: 100%;
  height: auto;
  display: block;
}

.realtime-legend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

/* 트렌드 차트 공통 */
.rank-trend-section {
  padding: 0;
}

.trend-tab-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.trend-tabs-left,
.trend-tabs-right {
  display: flex;
  gap: 4px;
}

/* 오른쪽 탭만 있을 때 우측 정렬 */
.trend-tab-row > .trend-tabs-right:only-child,
.trend-tab-row > .tab-group.trend-tabs-right:only-child {
  margin-left: auto;
}

/* 게임 페이지 탭 - 홈페이지 서브탭과 동일한 스타일 */
.game-container .tab-group {
  display: inline-flex;
  gap: 4px;
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
}

.game-container .tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: #1e293b;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.game-container .tab-btn:hover {
  color: #0f172a;
  background: var(--hover-bg);
}

.game-container .tab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

@media (prefers-color-scheme: dark) {
  .game-container .tab-btn {
    color: rgba(255, 255, 255, 0.85);
  }
  .game-container .tab-btn:hover {
    color: #fff;
  }
}

.trend-legend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trend-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: opacity 0.2s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.trend-legend-item:not(.active) {
  opacity: 0.3;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot[data-region="kr"] { background: #FF4757; }
.legend-dot[data-region="jp"] { background: #2ED573; }
.legend-dot[data-region="us"] { background: #3742FA; }
.legend-dot[data-region="cn"] { background: #FFA502; }
.legend-dot[data-region="tw"] { background: #A55EEA; }

.trend-market-toggle {
  display: flex;
  gap: 4px;
}

.market-toggle-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.market-toggle-btn:hover {
  border-color: var(--primary);
}

.market-toggle-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.trend-charts {
  padding: 0;
}

.trend-content {
  display: none;
}

.trend-content.active {
  display: block;
}

/* 차트 SVG */
.chart-market-container {
  position: relative;
}

.chart-market-svg {
  display: none;
}

.chart-market-svg.active {
  display: block;
}

.trend-chart-svg,
.game-chart-svg {
  width: 100%;
  height: auto;
  max-height: 280px;
}

.chart-grid {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-dasharray: 2 2;
}

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-dot {
  stroke: var(--card);
  stroke-width: 1;
}

.chart-rank-label {
  font-size: 12px;
  font-weight: 600;
}

.chart-ylabel {
  font-size: 12px;
  fill: #64748b;
}

.chart-xlabel {
  font-size: 10px;
  fill: #64748b;
}

@media (prefers-color-scheme: dark) {
  .chart-grid {
    stroke: rgba(255, 255, 255, 0.1);
  }
  .chart-ylabel,
  .chart-xlabel {
    fill: rgba(255, 255, 255, 0.7);
  }
}

/* 게임 empty 상태 */
.game-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* 트렌드 리포트 (mentions) */
.gm-container {
  padding: 0;
}

.gm-container-wide {
  padding: 0;
}

.gm-container .game-empty,
.gm-container-wide .game-empty {
  min-height: 450px;
}

.gm-tab-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.gm-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gm-page-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}

.gm-page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.gm-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gm-page-index {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  min-width: 48px;
  text-align: center;
}

.gm-period-content {
  display: none;
}

.gm-period-content.active {
  display: block;
}

.gm-items {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gm-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  min-height: 450px;
}

.gm-item {
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}

.gm-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {
  .gm-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
  }
}

@media (prefers-color-scheme: dark) {
  .gm-item {
    background: var(--card);
  }
}

.gm-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.gm-item-type {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.gm-type-ranking { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.gm-type-community { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.gm-type-issue { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.gm-type-metric { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.gm-type-streaming { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.gm-type-mvp { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.gm-type-stock { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.gm-type-industry { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.gm-type-global { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.gm-type-release { background: rgba(249, 115, 22, 0.15); color: #f97316; }
/* 트렌드 리포트 허브 - AM/PM/주간/일간 타입 */
.gm-type-am { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.gm-type-pm { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.gm-type-weekly { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.gm-type-daily { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

/* 트렌드 허브 링크 아이템 스타일 (a 태그용) */
a.gm-item {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

a.gm-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

/* 트렌드 허브 헤더 내 제목 스타일 */
.gm-item-header .gm-item-title {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.gm-rank-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.gm-rank-badge.up { color: #22c55e; }
.gm-rank-badge.down { color: #ef4444; }

.gm-item-date {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
}

.gm-item-title {
  font-size: var(--font-body-size);
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
  line-height: 1.4;
}

.gm-item-desc {
  font-size: var(--font-desc-size);
  font-weight: var(--font-desc-weight);
  color: var(--text-secondary);
  line-height: var(--font-desc-line-height);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .gm-item-title {
    color: #f0f0f0;
  }
  .gm-item-desc {
    color: rgba(255, 255, 255, 0.9);
  }
}

/* 스팀 섹션 */
.game-rank-section.steam {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.game-rank-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.game-rank-section-icon {
  font-size: 16px;
}

.game-rank-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.game-steam-inline {
  display: flex;
  gap: 24px;
}

.game-steam-stat-inline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-steam-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.game-steam-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* 게임 페이지 모바일 반응형 */
@media (max-width: 768px) {
  .game-container {
  min-height: calc(100vh - 250px);
    padding-bottom: var(--space-block-y);
  }

  .game-hero-content {
    flex-wrap: wrap;
    padding: 16px;
  }

  .game-hero-icon {
    width: 88px;
    height: 88px;
  }

  .game-hero-title {
    font-size: 20px;
  }

  .game-hero-stats {
    width: 100%;
    margin-left: 0;
    margin-top: 16px;
    justify-content: space-around;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .game-rank-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .game-rank-col + .game-rank-col {
    border-top: none;
  }

  /* 요약 뷰 - 아이템 패딩만 조정 */
  .realtime-content[data-realtime-view="summary"].active .game-rank-col-header {
    padding: 8px 10px;
    font-size: 13px;
  }

  .realtime-content[data-realtime-view="summary"].active .game-rank-country-row {
    padding: 6px 10px;
  }

  .realtime-content[data-realtime-view="summary"].active .game-rank-country-flag {
    font-size: 16px;
    width: 24px;
  }

  .realtime-content[data-realtime-view="summary"].active .game-rank-country-flag .emoji {
    width: 18px;
    height: 18px;
  }

  .realtime-content[data-realtime-view="summary"].active .game-rank-country-name {
    font-size: 13px;
  }

  .realtime-content[data-realtime-view="summary"].active .game-rank-country-value {
    font-size: 14px;
  }

  .gm-items-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    min-height: 380px;
  }

  .trend-tab-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .trend-legend-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* 검색창 내부 홈 아이콘 */
.search-home-icon {
  display: none;
}

@media (max-width: 768px) {
  /* 헤더 로고 숨기기 */
  .header {
    display: none !important;
  }

  /* ===== 모바일 Fixed 헤더 시스템 ===== */
  /* 검색 컨테이너 - fixed 상단 고정 */
  .search-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 16px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg) !important;
  }

  /* 네비게이션 - fixed, 검색바 아래 */
  .nav {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 199 !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 4px 0 !important;
    margin-top: 0 !important;
    background: var(--glass-bg-solid) !important;
  }

  /* 본문 콘텐츠 - fixed 헤더 높이만큼 여백 */
  :is(.site-container, .container) {
    padding-top: 120px !important;
    transition: padding-top 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 스크롤 시 검색창 숨김 - 검색창과 네비가 함께 이동 */
  body.search-hidden .search-container {
    transform: translateY(-100%) !important;
    pointer-events: none !important;
  }
  body.search-hidden .nav {
    transform: translateY(-64px) !important;
  }
  body.search-hidden :is(.site-container, .container) {
    padding-top: 56px !important;
  }
  body.search-hidden .games-hub-container {
    padding-top: 56px !important;
  }

  /* ===== 게임 DB 자음 필터 sticky용 CSS 변수 ===== */
  /* 기본 상태: search(64px) + nav(52px) = 116px */
  :root {
    --games-hub-sticky-top: 116px;
  }
  /* search-hidden 상태: nav(52px)만 */
  body.search-hidden {
    --games-hub-sticky-top: 52px;
  }

  /* 네비 아이콘 숨기기 */
  .nav-item svg {
    display: none !important;
  }

  /* 모바일 네비 순서: 모바일 순위를 3번째로 (기본 순서 유지) */

  /* 네비 선택 스타일 - 하단 밑줄 */
  .nav-item.active {
    color: var(--nav-active-color, #1e293b) !important;
    background: transparent !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    position: relative !important;
  }

  .nav-item.active::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 2px !important;
    background: var(--nav-active-bar, #1a73e8) !important;
    border-radius: 1px !important;
  }

  /* 다크모드 - 폰트 흰색, 밑줄 오렌지 */
  @media (prefers-color-scheme: dark) {
    .nav-item.active {
      color: #fff !important;
    }
    .nav-item.active::after {
      background: #f97316 !important;
    }
  }

  /* 검색창 내부 홈 아이콘 표시 */
  .search-home-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 100%;
  }

  .search-home-icon img {
    width: 32px;
    height: 32px;
  }

  /* 검색 박스 확장 + 높이 키움 */
  .search-box {
    flex: 1;
    max-width: none;
    padding-left: 8px;
    display: flex;
    align-items: center;
    height: 48px;
  }

  /* placeholder 폰트 크기 - 네비와 균형 맞춤 */
  .search-input {
    font-size: 14px;
  }

  /* 검색 버튼 아이콘 크기 키움 */
  .search-btn {
    width: 36px;
    height: 36px;
  }

  .search-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* ===== Games Hub & Trend Styles (split) ===== */

/* ===== 게임 허브 페이지 ===== */

/* 돌아가기 버튼 */
.games-hub-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
}

.games-hub-back:hover {
  color: var(--text-primary);
  border-color: var(--primary);
}

.games-hub-back svg {
  width: 16px;
  height: 16px;
}

.games-hub-header {
  text-align: center;
  margin-bottom: 32px;
}

.games-hub-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.games-hub-desc {
  font-size: 15px;
  color: var(--text-secondary);
}

.games-hub-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.games-hub-section-title .section-icon {
  width: 20px;
  height: 20px;
  color: #f97316;
}

/* 인기 게임 섹션 */
.games-hub-popular {
  margin-bottom: 16px;
}

.games-hub-popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.games-hub-popular-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.games-hub-popular-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.popular-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: white;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
}

.popular-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.popular-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.popular-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popular-views {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 검색 결과 섹션 */
.games-hub-search-results {
  margin-bottom: 24px;
}

.search-results-close {
  margin-left: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}

.search-results-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.search-no-results {
  text-align: center;
  color: var(--text-tertiary);
  padding: 24px;
}

/* 최근 본 게임 섹션 */
.games-hub-recent {
  margin-bottom: 24px;
}

.games-hub-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.games-hub-recent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s;
}

.games-hub-recent-card:hover {
  transform: translateY(-2px);
}

.recent-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.recent-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-tertiary);
}

.recent-remove:hover {
  background: #ef4444;
  color: white;
}

.recent-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  object-fit: cover;
}

.recent-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

/* 초성 인덱스 네비게이션 */
.games-hub-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 56px;
  background: var(--bg);
  z-index: 10;
}

.index-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}

.index-link:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-color: var(--text-secondary);
}

.index-link.active {
  color: white;
  background: #f97316;
  border-color: #f97316;
}

.index-link-back {
  background: rgba(194, 65, 12, 0.15);
  border-color: #c2410c;
  color: #c2410c;
}

.index-link-back:hover {
  color: white;
  background: #c2410c;
  border-color: #c2410c;
}

/* 전체 게임 섹션 */
.games-hub-all {
  margin-top: 0;
}

.games-hub-groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.games-hub-group {
  scroll-margin-top: 120px;
}

.group-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f97316;
}

.group-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-tertiary);
}

.group-games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.game-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--card-bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.game-item::before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--bg-tertiary);
  background-image: var(--game-icon, url('/icon-192.png')), url('/icon-192.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  flex-shrink: 0;
}

.game-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.game-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  /* 좌우 12px 패딩 통일 (홈 피드와 동일) */
  .games-hub-section-title {
    padding: 0 12px;
  }

  .games-hub-recent-grid,
  .games-hub-popular-grid,
  .games-hub-groups {
    padding: 0 12px;
  }

  .games-hub-title {
    font-size: 22px;
  }

  .games-hub-popular-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .games-hub-popular-card {
    padding: 8px 10px;
    gap: 10px;
  }

  /* 게임 페이지 전용 - CSS sticky로 자동 고정 */
    .games-hub-index {
      position: -webkit-sticky !important;
      position: sticky !important;
      top: var(--games-hub-sticky-top) !important;
      z-index: 98 !important;
      background: var(--bg) !important;
      padding: 8px 12px !important;
      gap: 4px;
    }

  .index-link {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .group-games {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .game-item {
    padding: 8px;
  }

  .game-item::before {
    width: 36px;
    height: 36px;
  }

  .game-name {
    font-size: 12px;
  }

  /* 자음 링크 클릭 시 섹션이 필터에 가려지지 않도록 */
  .games-hub-group {
    scroll-margin-top: calc(var(--games-hub-sticky-top) + 60px);
  }
}

/* ========================================
   실시간 인기 띠 배너
   ======================================== */
.popular-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  box-sizing: border-box;
}

.popular-banner-label {
  font-size: var(--font-title-size);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.popular-banner-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.popular-banner-items::-webkit-scrollbar {
  display: none;
}

.popular-banner-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #e8f0fe;
  border-radius: 8px;
  border: 1px solid #d2e3fc;
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.popular-banner-item:hover {
  background: var(--hover-bg);
}

.popular-banner-rank {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--font-badge-weight);
  color: var(--text-muted);
  background: var(--hover-bg);
  border-radius: 6px;
  flex-shrink: 0;
}

.popular-banner-rank.top1 {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #fff;
}

.popular-banner-rank.top2 {
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
  color: #fff;
}

.popular-banner-rank.top3 {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #fff;
}

.popular-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
}

.popular-banner-name {
  font-size: 13px;
  font-weight: 700;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popular-banner-more {
  font-size: var(--font-meta-size);
  font-weight: var(--font-badge-weight);
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.popular-banner-more:hover {
  opacity: 0.7;
}

/* 다크모드 실시간 인기 배너 */
@media (prefers-color-scheme: dark) {
  .popular-banner {
    background: var(--card);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .popular-banner-item {
    background: var(--card-hover);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .popular-banner-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* 모바일 띠 배너 */
@media (max-width: 768px) {
  .popular-banner {
    padding: 4px 10px;
    gap: 6px;
    overflow: visible;
  }

  .popular-banner-label {
    font-size: var(--font-title-size);
    font-weight: 700;
    min-width: 55px;
    flex-shrink: 0;
  }

  .popular-banner-items {
    gap: 6px;
    justify-content: center;
  }

  .popular-banner-item:last-child {
    margin-right: 8px;
  }

  .popular-banner-item {
    padding: 6px;
    gap: 4px;
  }

  .popular-banner-rank {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .popular-banner-icon {
    width: 36px;
    height: 36px;
  }

  .popular-banner-name {
    display: none;
  }

  .popular-banner-more {
    font-size: var(--font-meta-size);
    font-weight: var(--font-badge-weight);
    color: var(--primary);
    min-width: 45px;
    text-align: right;
    flex-shrink: 0;
  }
}

/* 480px 이하 */
@media (max-width: 480px) {
  .popular-banner {
    padding: 8px;
  }
}

/* 360px 이하 */
@media (max-width: 360px) {
  .popular-banner {
    padding: 8px 6px;
  }
}

/* ========================================
   블로그 심층 리포트 - 일간리포트 스타일 통일
   ======================================== */

/* 컨테이너 - 페이지 표준 */
.blog-article {
  max-width: 1190px;
  margin: 0 auto;
  padding: 20px var(--space-page-x);
  box-sizing: border-box;
}

.blog-article .ad-card {
  margin-bottom: 12px;
}

/* 통합 카드 - 배너+헤더 */
.blog-card {
  background: var(--card);
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  overflow: hidden;
}

.blog-header {
  padding: 24px 24px 8px;
}

/* 히어로 이미지 - 카드 상단에 붙음 */
.blog-hero {
  width: 100%;
  max-height: 180px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.blog-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-hero-image[src=""], .blog-hero-image:not([src]) {
  display: none;
}

/* 제목 */
.blog-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 16px;
}

/* 메타 정보 */
.blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.blog-date {
  font-size: 14px;
  color: var(--text-muted);
}

/* 요약 박스 */
.blog-summary {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  padding: 16px;
  background: var(--hover-bg);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  margin-bottom: 16px;
}

/* 태그 */
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-tag {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(37, 99, 235, 0.1);
  border-radius: 6px;
}

@media (prefers-color-scheme: dark) {
  .blog-tag {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
  }
}

/* 본문 섹션 - 헤더와 연결 */
.blog-content {
  background: var(--card);
  border-radius: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-top: none;
  border-bottom: none;
}

/* 본문 단락 */
.blog-paragraph {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.blog-paragraph:last-child {
  margin-bottom: 0;
}

/* 섹션 제목 */
.blog-heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-heading:first-child {
  margin-top: 0;
}

/* 이미지 피규어 */
.blog-figure {
  margin: 24px 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.blog-image {
  width: 100%;
  height: auto;
  display: block;
}

.blog-caption {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  background: var(--hover-bg);
  border-top: 1px solid var(--border);
}

/* 인용문 */
.blog-quote {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--hover-bg);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  .blog-quote {
    background: rgba(249, 115, 22, 0.08);
    border-left-color: #f97316;
  }
}

/* 광고 영역 */
.blog-ad {
  margin: 24px 0;
}

/* 관련 게임 섹션 - 카드 하단 마감 */
.blog-related-games {
  background: var(--card);
  border-radius: 0 0 12px 12px;
  padding: 24px;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.blog-related-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.blog-related-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--hover-bg);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.blog-related-card:hover {
  background: var(--card-hover);
  border-color: var(--border);
  transform: translateY(-1px);
}

.blog-related-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.blog-related-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 네비게이션 */
.blog-nav-wrapper {
  background: var(--card);
  border-radius: 12px;
  padding: 16px 24px;
  border: 1px solid var(--border);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .blog-article {
    padding: 12px;
  }

  .blog-header,
  .blog-content,
  .blog-related-games,
  .blog-nav-wrapper {
    padding: 16px;
    border-radius: 8px;
  }

  .blog-title {
    font-size: 1.375rem;
  }

  .blog-hero {
    margin: -16px -16px 16px -16px;
    border-radius: 8px 8px 0 0;
  }

  .blog-paragraph {
    font-size: 15px;
  }

  .blog-heading {
    font-size: 1.125rem;
  }

  .blog-figure {
    margin: 16px -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .blog-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 상세 페이지 네비게이션 - 하단 배치 (이전/목록/다음) */
.trend-detail-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  gap: 12px;
}

.trend-nav-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  background: var(--hover-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  min-width: 80px;
  text-align: center;
}

.trend-nav-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}


.trend-nav-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .trend-detail-nav {
    gap: 8px;
  }

  .trend-nav-btn {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
  }
}

/* ========== 트렌드 허브 페이지 (피드 카드 스타일) ========== */
.trends-hub-container {
  /* 레이아웃은 `.site-container` + `.game-container`에서 관리하고, 이 클래스는 페이지 스코프용 마커로 둡니다. */
  width: 100%;
}

.trend-feed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
}

.trend-feed-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.trend-feed-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.trend-feed-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.trend-feed-card-weekly .trend-feed-card-image {
  background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
}

.trend-feed-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trend-feed-card-image img[src=""],
.trend-feed-card-image img:not([src]) {
  display: none;
}

.trend-feed-card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}

.trend-feed-card-tag.weekly {
  background: rgba(0, 0, 0, 0.55);
}

.trend-feed-card-title {
  font-size: var(--font-body-size);
  font-weight: var(--font-title-weight);
  color: var(--text);
  margin: 0;
  padding: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 60px;
  box-sizing: border-box;
}

/* 트렌드 섹션 간격 */
.trend-section {
  margin-bottom: 20px;
}

.trend-section:last-child {
  margin-bottom: 0;
}

/* 트렌드/비디오 섹션 페이지네이션 (헤더 내) */
.trend-pagination,
.video-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend-page-btn,
.video-page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trend-page-btn:hover:not(:disabled),
.video-page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.trend-page-btn:disabled,
.video-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.trend-page-index,
.video-page-index {
  font-size: var(--font-body-size);
  color: var(--text-secondary);
  min-width: 45px;
  text-align: center;
}

/* 비디오 섹션 카드 간격 */
.video-section-card {
  margin-bottom: 24px;
}
.video-section-card:last-child {
  margin-bottom: 0;
}

.trend-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}

/* 다크모드 - 트렌드 피드 */
@media (prefers-color-scheme: dark) {
  .trend-feed-card {
    background: var(--card-bg);
    border-color: var(--border);
  }
  .trend-feed-card-tag {
    background: rgba(0, 0, 0, 0.65);
  }
}

/* 모바일 - 트렌드 피드 */
@media (max-width: 768px) {
  .trend-feed-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .trend-feed-card-title {
    padding: 12px 12px 14px;
  }

  .trend-feed-card-tag {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ===== 모바일 Edge-to-Edge 스타일 ===== */
@media (max-width: 768px) {
  :is(.site-container, .container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .games-hub-popular-card,
  .games-hub-recent-card,
  .games-hub-group,
  .games-hub-popular-grid,
  .games-hub-recent-grid {
    border-radius: var(--radius) !important;
  }

  .home-card,
  .popular-banner,
  .metacritic-card-container,
  .news-card,
  .news-panel,
  .steam-table,
  .ad-card,
  .ranking-table,
  .upcoming-table,
  .section-header,
  .controls-wrapper,
  .tab-group {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  .ad-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .news-card,
  .news-panel,
  .metacritic-card-container,
  .steam-table,
  .ranking-table,
  .upcoming-table,
  .video-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 게임 DB 왼쪽으로 5px 이동 */
@media (max-width: 768px) {
  .nav-item[href="/games/"] {
    transform: translateX(-5px);
  }
}