/* 폰트 로딩 전 화면 숨김 - FOUT 완전 방지 */
html {
visibility: hidden;
}
html.fonts-loaded {
visibility: visible;
}
/* 이미지 성능 최적화 */
img {
content-visibility: auto;
}
img[loading="lazy"] {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}
@media (prefers-color-scheme: dark) {
img[loading="lazy"] {
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}
}
/* 모바일 가로 스크롤 방지 */
@media (max-width: 768px) {
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
}
.header, .header-inner, .nav, .nav-inner, .container, .home-container, .home-main, .home-sidebar {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.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: hidden;
}
.home-card-body {
width: 100%;
max-width: 100%;
}
.home-news-card, .home-video-card {
max-width: 100%;
}
/* 768px - 카드 내부 모든 요소 좌우 12px 직접 설정 */
.home-card-body {
padding: 12px 0 !important;
}
/* 서브탭 컨테이너 - 마진으로 12px 정렬 */
.home-news-tabs, .home-community-tabs, .home-video-tabs {
display: flex !important;
flex-wrap: nowrap !important;
padding: 4px !important;
gap: 4px !important;
overflow: hidden !important;
width: auto !important;
margin: 0 12px !important;
box-sizing: border-box !important;
background: var(--hover-bg) !important;
border-radius: var(--radius-sm) !important;
border-bottom: none !important;
}
/* split 컨테이너 - 상하만 12px, 좌우 0 (아이템이 직접 패딩) */
.home-news-split, .home-video-split {
padding: 12px 0 !important;
}
/* 뉴스/비디오 아이템 - 좌우 12px */
.home-news-item, .home-video-item {
padding: 10px 12px !important;
}
/* 뉴스/비디오 카드 - 좌우 12px 마진 */
.home-news-card, .home-video-card {
margin: 0 12px !important;
}
/* 리스트 아이템 - 좌우 12px */
.home-item {
padding: 8px 12px !important;
}
/* 스팀/출시예정/랭킹 row - 좌우 12px */
.home-steam-row, .home-upcoming-row, .home-rank-row {
padding: 8px 12px !important;
}
/* 모바일 랭킹 탭 (iOS/Android 토글) - 좌우 12px */
.home-rank-tabs {
padding: 12px 12px !important;
}
/* 탭 그룹 (모바일랭킹/신규게임 등) - 마진 12px */
.home-card-body .tab-group {
margin: 8px 12px !important;
}
.home-news-tab, .home-community-tab, .home-video-tab {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
padding: 10px 6px !important;
font-size: var(--font-tab-size) !important;
min-height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-sizing: border-box !important;
gap: 4px !important;
}
.home-news-tab img, .home-community-tab img, .home-video-tab img {
display: none !important;
}
/* 모바일 홈 피드 순서 변경 */
.home-container {
display: flex !important;
flex-direction: column !important;
}
.home-main, .home-sidebar {
display: contents !important;
}
#home-news { order: 1 !important; }
#home-mobile-rank { order: 2 !important; }
#home-community { order: 3 !important; }
#home-steam { order: 4 !important; }
#home-video { order: 5 !important; }
#home-upcoming { order: 6 !important; }
/* 광고 슬롯 순서 */
.home-main-ad { order: 0 !important; }
.ad-slot:not(.home-main-ad) { order: 99 !important; }
}
:root {
/* === Primary Colors === */
--primary: #4f46e5; /* Indigo 600 */
--primary-light: #6366f1; /* Indigo 500 */
--primary-dark: #4338ca; /* Indigo 700 */
--accent: #f97316;
/* === Background & Surface - 대비 개선 === */
--bg: #f5f7fa; /* 배경 */
--bg-elevated: #ffffff;
--card: #ffffff;
--card-hover: #eef2ff;
/* === Border === */
--border: #e2e8f0; /* Slate 200 */
--border-subtle: #f1f5f9;
/* === Text === */
--text: #1a1a1a; /* 더 진한 텍스트 */
--text-primary: #1a1a1a; /* text와 동일 - 호환성 */
--text-secondary: #1a1a1a; /* 거의 검정 - 본문 설명 (가독성 최적화) */
--text-muted: #737373; /* Neutral 500 */
--text-tertiary: #6b7280; /* Neutral 500 - WCAG AA 준수 (대비 4.5:1) */
/* === Typography - 본문/제목 통합 관리 (데스크탑 기본) === */
--font-title-size: 18px;
--font-title-weight: 700;
--font-body-size: 16px;
--font-desc-size: 15px;
--font-body-weight: 700;
--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: 900;
--font-small-size: 12px;
--font-nav-size: 15px;
--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 - 확장 크기 (전체 통합 관리) === */
/* 초소형 (8-9px) - 매우 작은 메타데이터 */
--font-micro-size: 9px;
--font-tiny-size: 8px;
/* 소형 (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;
}
/* 소형 태블릿/대형 폰 (576px 이하) - 1단계 축소 (-1) */
@media (max-width: 576px) {
:root {
--font-title-size: 17px;
--font-body-size: 15px;
--font-desc-size: 14px;
--font-tab-size: 14px;
--font-nav-size: 15px;
--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: 16px;
--font-body-size: 14px;
--font-desc-size: 13px;
--font-tab-size: 13px;
--font-nav-size: 14px;
--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;
}
}
:root {
/* === 호환성 변수 (별칭) === */
--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: #e8edf3;
--active-bg: #eef2ff;
--item-bg: #ffffff;
/* === Semantic Colors === */
--success: #16a34a;
/* === Layout === */
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 20px;
--radius-xl: 24px;
/* === 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 (primary 통일) === */
--gradient-hot: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
--gradient-industry: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
--gradient-metrics: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
--gradient-rankings: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
--gradient-community: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
--gradient-streaming: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
--gradient-stocks: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
--gradient-primary: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
/* === Report Icon Backgrounds (primary 통일) === */
--icon-bg-hot: rgba(99, 102, 241, 0.12);
--icon-bg-industry: rgba(99, 102, 241, 0.12);
--icon-bg-metrics: rgba(99, 102, 241, 0.12);
--icon-bg-rankings: rgba(99, 102, 241, 0.12);
--icon-bg-community: rgba(99, 102, 241, 0.12);
--icon-bg-streaming: rgba(99, 102, 241, 0.12);
--icon-bg-stocks: rgba(99, 102, 241, 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(99, 102, 241, 0.20);
/* === Glow Effects (라이트모드) === */
--glow-primary: 0 0 20px rgba(79, 70, 229, 0.2);
--glow-accent: 0 0 20px rgba(249, 115, 22, 0.2);
}
/* === 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: #3730a3;
background: #eef2ff;
}
.nav-item svg {
stroke: #374151;
}
.nav-item:hover svg {
stroke: #1f2937;
}
.nav-item.active svg {
stroke: #3730a3;
}
/* 서브탭 버튼 */
.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 === */
@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);
/* === 다크모드 전용 Report Gradients (primary 통일) === */
--gradient-hot: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
--gradient-industry: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
--gradient-metrics: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
--gradient-rankings: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
--gradient-community: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
--gradient-streaming: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
--gradient-stocks: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
--gradient-primary: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
/* === 다크모드 전용 Icon Backgrounds (primary 통일) === */
--icon-bg-hot: rgba(99, 102, 241, 0.25);
--icon-bg-industry: rgba(99, 102, 241, 0.25);
--icon-bg-metrics: rgba(99, 102, 241, 0.25);
--icon-bg-rankings: rgba(99, 102, 241, 0.25);
--icon-bg-community: rgba(99, 102, 241, 0.25);
--icon-bg-streaming: rgba(99, 102, 241, 0.25);
--icon-bg-stocks: rgba(99, 102, 241, 0.25);
}
/* 다크모드 메인탭 - 흰색 톤 */
.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: rgba(255, 255, 255, 0.15) !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,
.home-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;
}
.home-news-tab:hover,
.home-community-tab:hover,
.home-video-tab:hover,
.home-insight-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,
.home-insight-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-page-container p,
.insight-page-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;
}
}
/* ========== 홈 서머리 섹션 ========== */
.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: 16px;
padding: 24px 0;
}
.home-main {
display: flex;
flex-direction: column;
gap: 16px;
}
.home-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
}
/* 홈 카드 공통 */
.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: var(--card-hover);
}
.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: 20px;
height: 20px;
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;
}
/* 홈 뉴스 서브탭 (iOS/Android 스타일) - PC 20px 통일 */
.home-news-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 {
display: none;
}
/* === 홈 서브탭 공통 스타일 === */
.home-news-tab,
.home-community-tab,
.home-video-tab,
.home-insight-tab {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 14px;
font-weight: var(--font-tab-weight);
color: #1e293b;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.home-news-tab img,
.home-community-tab img,
.home-video-tab img,
.home-insight-tab img {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.home-news-tab:hover,
.home-community-tab:hover,
.home-video-tab:hover,
.home-insight-tab:hover {
color: #0f172a;
background: var(--hover-bg);
}
.home-news-tab.active,
.home-community-tab.active,
.home-video-tab.active,
.home-insight-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,
.home-insight-panel {
display: none;
}
.home-news-panel.active,
.home-community-panel.active,
.home-video-panel.active,
.home-insight-panel.active {
display: block;
}
/* 홈 커뮤니티 서브탭 - PC 20px 통일 */
.home-community-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-community-tabs::-webkit-scrollbar {
display: none;
}
/* 홈 인사이트 서브탭 */
.home-insight-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-insight-tabs::-webkit-scrollbar {
display: none;
}
.home-insight-panel.active {
display: flex;
flex-direction: column;
}
.home-insight-body {
max-height: 600px;
overflow-y: auto;
}
/* 스크롤 형태 인사이트 */
.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: 16px 20px 0;
}
.home-daily-focus-text {
font-size: var(--font-body-size);
line-height: 1.7;
color: var(--text);
margin: 0;
padding: 16px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 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;
}
/* 홈 영상 서브탭 - PC 20px 통일 */
.home-video-tabs {
display: flex;
gap: 4px;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
}
/* 홈 커뮤니티 좌우 분할 레이아웃 */
.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: column;
gap: 8px;
padding: 16px 18px;
text-decoration: none;
background: var(--hover-bg);
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-title {
font-size: var(--font-body-size);
font-weight: var(--font-title-weight);
color: var(--text);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--transition-fast);
}
/* 호버 시 타이틀 색상 변경 제거 - 통일성 위해 */
.home-community-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-small-size);
}
.home-community-meta img {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.home-community-source {
font-size: var(--font-source-size);
font-weight: var(--font-source-weight);
color: var(--font-source-color);
}
.home-community-channel {
color: var(--text-secondary);
}
@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;
}
}
/* 홈 뉴스 좌우 분리 레이아웃 - PC 20px 통일 */
.home-news-split {
display: flex;
gap: 16px;
padding: 20px;
}
/* 좌측: 카드 2개 (동일 크기) */
.home-news-cards {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.home-news-card {
text-decoration: none;
background: var(--hover-bg);
border-radius: var(--radius-sm);
overflow: hidden;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-news-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.home-news-card-thumb {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
background: rgba(255,255,255,0.1);
}
.home-news-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-news-card-info {
padding: 10px 12px;
height: 76px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 6px;
}
.home-news-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;
height: 42px;
flex-shrink: 0;
}
.home-news-card-source {
font-size: var(--font-source-size);
font-weight: var(--font-source-weight);
color: var(--font-source-color);
}
/* 우측: 1열 세로 배치 (좌측과 높이 맞춤) */
.home-news-list {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.home-news-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px;
text-decoration: none;
background: var(--hover-bg);
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.home-news-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);
}
.home-news-item:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.home-news-item-thumb {
width: 100px;
height: 56px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.home-news-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal), filter var(--transition-normal);
}
.home-news-item:hover .home-news-item-thumb img {
transform: scale(1.08);
filter: brightness(1.1);
}
.home-news-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.home-news-title {
font-size: var(--font-body-size);
font-weight: var(--font-body-weight);
color: var(--text);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 36px;
transition: color var(--transition-fast);
}
/* 호버 시 타이틀 색상 변경 제거 - 통일성 위해 */
.home-news-source-tag {
font-size: var(--font-source-size);
font-weight: var(--font-source-weight);
color: var(--font-source-color);
}
/* 뉴스 모바일 반응형 */
@media (max-width: 768px) {
.home-news-split {
flex-direction: column;
gap: 10px;
/* padding은 상단 768px 블록에서 통합 관리 */
}
.home-news-cards {
flex: none;
width: 100%;
}
.home-news-card .home-news-card-info {
height: auto;
padding: 10px;
}
.home-news-card .home-news-card-title {
height: auto;
}
.home-news-list {
flex-direction: column;
gap: 8px;
}
.home-news-item {
width: 100%;
/* padding은 상단 768px 블록에서 통합 관리 */
}
.home-news-item-thumb {
width: 80px;
height: 45px;
}
.home-news-title {
height: auto;
}
}
/* 홈 리스트 아이템 */
.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);
}
/* 홈 영상 split 레이아웃 - PC 20px 통일 */
.home-video-split {
display: flex;
gap: 16px;
padding: 20px;
}
.home-video-cards {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.home-video-card {
text-decoration: none;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--hover-bg);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-video-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.home-video-card .home-video-card-thumb {
width: 100%;
aspect-ratio: 16 / 9;
}
.home-video-card-thumb {
position: relative;
overflow: hidden;
}
.home-video-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-video-live {
position: absolute;
bottom: 8px;
left: 8px;
background: #e53935;
color: #fff;
font-size: var(--font-meta-size);
font-weight: var(--font-badge-weight);
padding: 4px 8px;
border-radius: 4px;
}
.home-video-card-info {
padding: 10px 12px;
height: 76px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 6px;
}
.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;
height: 42px;
flex-shrink: 0;
}
.home-video-card-channel {
font-size: var(--font-source-size);
font-weight: var(--font-source-weight);
color: var(--font-source-color);
}
.home-video-list {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.home-video-item {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
padding: 6px 10px;
background: var(--hover-bg);
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.home-video-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);
}
.home-video-item:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.home-video-item-thumb {
position: relative;
width: 100px;
height: 56px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.home-video-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal), filter var(--transition-normal);
}
.home-video-item:hover .home-video-item-thumb img {
transform: scale(1.08);
filter: brightness(1.1);
}
.home-video-live-sm {
position: absolute;
bottom: 2px;
left: 2px;
background: #e53935;
color: #fff;
font-size: var(--font-tiny-size);
font-weight: var(--font-badge-weight);
padding: 2px 4px;
border-radius: 2px;
}
.home-video-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.home-video-item-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.3;
height: 36px;
}
.home-video-item-channel {
font-size: var(--font-source-size);
font-weight: var(--font-source-weight);
color: var(--font-source-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 홈 모바일 랭킹 탭 */
.home-rank-tabs {
display: flex;
padding: 12px 16px;
gap: 8px;
border-bottom: 1px solid var(--border);
}
.home-rank-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
background: var(--hover-bg);
border: none;
border-radius: 8px;
font-size: var(--font-tab-size);
font-weight: var(--font-tab-weight);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.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;
}
.home-rank-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
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);
}
/* 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;
}
.home-rank-icon {
width: 36px;
height: 36px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: rgba(255,255,255,0.1);
}
.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-steam-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
text-decoration: none;
transition: background var(--transition-fast);
}
.home-steam-row:hover {
background: var(--hover-bg);
}
.home-steam-icon {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
background: rgba(255,255,255,0.1);
}
.home-steam-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.home-steam-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;
}
.home-steam-players {
font-size: var(--font-rank-dev-size);
font-weight: var(--font-rank-dev-weight);
color: var(--font-rank-dev-color);
}
/* 홈 출시 예정 */
/* 홈 신규 게임 탭 */
.home-upcoming-tabs {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 8px;
border-bottom: 1px solid var(--border);
}
.home-upcoming-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
height: 32px;
line-height: 32px;
box-sizing: border-box;
background: var(--hover-bg);
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: var(--font-tab-weight);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.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 {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
text-decoration: none;
transition: background var(--transition-fast);
}
.home-upcoming-row:hover {
background: var(--hover-bg);
}
.home-upcoming-icon {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
background: rgba(255,255,255,0.1);
}
.home-upcoming-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.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;
}
.home-upcoming-date {
font-size: var(--font-rank-dev-size);
font-weight: var(--font-rank-dev-weight);
color: var(--font-rank-dev-color);
}
/* 광고 배너 슬롯 */
.ad-slot {
background: var(--card);
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
min-height: 90px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: var(--font-small-size);
}
.ad-slot-top {
margin-bottom: 16px;
}
.ad-slot-section {
margin-top: 16px;
margin-bottom: 16px;
}
.ad-slot.mobile-only {
display: none;
}
/* 모바일 반응형 - 홈 */
@media (max-width: 1024px) {
.home-container {
grid-template-columns: 1fr 320px;
gap: 16px;
padding: 16px;
}
}
@media (max-width: 768px) {
.home-container {
grid-template-columns: 1fr;
padding: 8px;
}
/* 홈 카드 헤더 - 패딩은 파일 끝 통합 블록에서 관리 */
/* 모바일에서 PC only 광고 숨기기 */
.ad-slot.pc-only {
display: none;
}
.home-video-split {
flex-direction: column;
gap: 10px;
}
.home-video-cards {
flex: none;
width: 100%;
}
.home-video-card-info {
height: auto;
padding: 10px;
}
.home-video-card-title {
height: auto;
}
.home-news-card-title {
height: auto;
}
.home-video-list {
flex-direction: column;
gap: 8px;
}
.home-video-item {
width: 100%;
/* padding은 상단 768px 블록에서 통합 관리 */
flex-direction: row;
}
.home-video-item-thumb {
width: 80px;
height: 45px;
}
.home-video-item-info {
padding: 0;
}
.home-video-item-title {
height: auto;
}
.ad-slot.mobile-only {
display: flex;
}
}
@media (max-width: 480px) {
.home-container {
gap: 12px;
}
/* 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;
}
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;
overflow-y: scroll;
}
/* Header */
.header {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 24px 0;
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;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
.logo-svg {
height: 42px;
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);
}
.logo-badge {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
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: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header-title .logo-crawler {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-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 16px;
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;
}
/* 모든 컨트롤 영역 (뉴스/커뮤니티 제외 - PC에서 숨김) */
.rankings-controls,
.steam-controls,
.video-controls,
.upcoming-controls {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 12px 24px !important;
}
/* 컨트롤 그룹 */
.control-group {
width: auto !important;
flex: 0 0 auto !important;
}
/* 탭 그룹 */
.tab-group {
width: auto !important;
justify-content: center !important;
gap: 8px !important;
}
/* PC 서브탭 버튼 - 통일된 스타일 */
.tab-btn,
.tab-group .tab-btn,
.insight-tab {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
min-width: auto !important;
min-height: 38px !important;
gap: 6px !important;
padding: 9px 20px !important;
font-size: var(--font-tab-size) !important;
font-weight: var(--font-tab-weight) !important;
overflow: visible !important;
}
.tab-btn .news-favicon,
.tab-group .tab-btn .news-favicon {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
margin-right: 0 !important;
}
/* 모바일순위 - 두 그룹 사이 간격 */
.rankings-controls {
gap: 40px !important;
}
}
/* 모바일 캐러셀 네비게이션 - 5개 표시 */
@media (max-width: 768px) {
.nav {
overflow: hidden;
}
.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: 10px 4px;
margin: 4px 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: 8px;
right: 8px;
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: var(--primary);
background: var(--active-bg);
border-bottom: none;
font-weight: 800;
position: relative;
}
/* 활성 탭 하단 인디케이터 바 */
.nav-item.active::after {
content: '';
position: absolute;
bottom: 2px;
left: 12px;
right: 12px;
height: 2px;
background: linear-gradient(90deg, #4f46e5, #818cf8);
border-radius: 1px;
}
.nav-item svg {
width: 22px;
height: 22px;
opacity: 1;
transition: all var(--transition-fast);
}
.nav-item.active svg {
opacity: 1;
}
/* Container - 네이버 스타일 (PC: 1190px) */
.container {
max-width: 1190px;
margin: 0 auto;
padding: 0 16px 60px;
box-sizing: border-box;
}
/* Sections */
.section {
display: none;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.section.active {
display: block;
}
/* ===== 공통 컨트롤 영역 스타일 (모든 섹션 통일) - 프레임 없이 버튼만 ===== */
.news-controls,
.rankings-controls,
.steam-controls,
.video-controls,
.upcoming-controls {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 6px 0 !important;
margin-top: 11px !important;
margin-bottom: 11px !important;
justify-content: center !important;
align-items: center !important;
}
/* 랭킹, 스팀, 영상, 출시작품: 항상 표시 */
.rankings-controls,
.steam-controls,
.video-controls,
.upcoming-controls {
display: flex !important;
}
/* 뉴스/커뮤니티: PC/모바일 모두 탭 표시 */
#news .news-controls,
#community .news-controls {
display: flex !important;
}
.news-controls .control-group,
.rankings-controls .control-group,
.steam-controls .control-group,
.video-controls .control-group,
.upcoming-controls .control-group {
width: 100%;
}
/* ===== 공통 탭 스타일 (모바일 기본) ===== */
#newsTab, #communityTab, #storeTab, #chartTab, #steamTab, #videoTab, #upcomingTab {
width: 100%;
}
.tab-group .tab-btn {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 8px;
font-size: var(--font-tab-size);
font-weight: var(--font-tab-weight);
line-height: 1.2;
min-width: 0;
min-height: 44px;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tab-group .tab-btn .news-favicon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* 모든 서브탭 공통 스타일 */
#newsTab,
#communityTab,
.rankings-controls .tab-group,
.steam-controls .tab-group,
.video-controls .tab-group,
.upcoming-controls .tab-group {
width: auto;
justify-content: flex-start;
gap: 8px;
}
.news-card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px 0;
border: 1px solid var(--border);
}
@media (min-width: 769px) {
.news-card {
margin-top: 16px;
}
}
/* 뉴스: 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: var(--card-hover);
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-controls {
display: flex !important;
}
#community .news-card.community-card {
margin-top: 20px;
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컬럼 리스트 (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: var(--card-hover);
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 {
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-controls {
display: flex;
}
.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);
}
/* 탭 버튼 - 태블릿 */
.tab-group .tab-btn {
padding: 10px 6px;
font-size: var(--font-tab-size);
gap: 5px;
min-height: 42px;
overflow: hidden;
}
.tab-group .tab-btn .news-favicon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* 뉴스/커뮤니티 탭 - 태블릿 전체 너비 */
#newsTab,
#communityTab {
width: 100% !important;
justify-content: stretch !important;
}
#newsTab .tab-btn,
#communityTab .tab-btn {
flex: 1 1 0 !important;
white-space: nowrap !important;
font-size: var(--font-tab-size) !important;
padding: 10px 6px !important;
line-height: 1 !important;
}
}
.section-title {
font-size: 1rem;
font-weight: var(--font-section-weight);
margin-bottom: 20px;
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: #6366f1;
background: rgba(99, 102, 241, 0.15);
}
.source-ruliweb {
color: #10b981;
background: rgba(16, 185, 129, 0.15);
}
/* Rankings Section */
/* Rankings Section - 고유 속성만 */
.rankings-controls {
gap: 24px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.rankings-controls::-webkit-scrollbar {
display: none;
}
.control-group {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.rankings-controls .tab-group {
width: 100%;
}
.control-label {
font-size: var(--font-tab-size);
font-weight: var(--font-tab-weight);
color: var(--text-secondary);
}
.tab-group {
display: flex;
background: var(--hover-bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px;
gap: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tab-group::-webkit-scrollbar {
display: none;
}
/* 탭 버튼 기본 스타일 */
.tab-btn {
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;
}
.tab-btn:hover {
color: #0f172a;
background: var(--hover-bg);
}
.tab-btn.active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: var(--shadow-sm);
font-weight: var(--font-badge-weight);
}
/* 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: var(--card-hover);
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: 8px 0;
}
.rank-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
min-height: 64px;
height: 64px;
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: 8px 12px;
min-height: 64px;
height: 64px;
box-sizing: border-box;
}
.rank-row.rank-only {
min-height: 64px;
height: 64px;
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: 48px;
height: 48px;
border-radius: 12px;
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;
}
.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 */
.steam-controls .tab-group {
width: 100%;
}
.steam-section {
display: none;
}
.steam-section.active {
display: block;
}
.steam-table {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
border: 1px solid var(--border);
}
.steam-table-header {
display: grid;
grid-template-columns: 50px 1fr 100px;
padding: 6px 16px;
height: 36px;
box-sizing: border-box;
background: var(--card-hover);
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: flex;
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 - 고유 속성만 */
.video-controls {
flex-wrap: wrap;
gap: 16px;
}
.video-controls .tab-group {
width: 100%;
}
.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: 24px;
}
.youtube-card {
background: var(--card);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
text-decoration: none;
transition: all 0.3s ease;
border: none;
}
.youtube-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.youtube-thumbnail {
position: relative;
aspect-ratio: 16/9;
background: #0f0f0f;
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
}
.youtube-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.youtube-card:hover .youtube-thumbnail img {
transform: scale(1.05);
}
.youtube-rank {
position: absolute;
top: 8px;
left: 8px;
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: white;
background: rgba(0,0,0,0.7);
border-radius: 6px;
backdrop-filter: blur(4px);
}
.youtube-rank.top1 {
background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
color: #92400e;
}
.youtube-rank.top2 {
background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
color: #374151;
}
.youtube-rank.top3 {
background: linear-gradient(135deg, #cd7f32 0%, #daa06d 100%);
color: #fff;
}
.live-badge {
position: absolute;
top: 8px;
right: 8px;
padding: 4px 8px;
font-size: var(--font-xs-size);
font-weight: var(--font-badge-weight);
color: white;
background: #ef4444;
border-radius: 4px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.youtube-info {
padding: 16px;
}
.youtube-title {
font-size: var(--font-body-size);
font-weight: var(--font-title-weight);
color: var(--text);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 8px;
}
.youtube-channel {
font-size: var(--font-small-size);
color: var(--text-muted);
margin-bottom: 4px;
}
.youtube-views {
font-size: var(--font-meta-size);
color: var(--text-muted);
}
.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: 16px;
}
}
@media (max-width: 480px) {
.youtube-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.youtube-info {
padding: 8px;
}
.youtube-title {
-webkit-line-clamp: 2;
}
.youtube-channel {
font-size: var(--font-xs-size);
}
.youtube-views {
font-size: var(--font-xs-size);
}
.youtube-rank {
width: 22px;
height: 22px;
font-size: var(--font-meta-size);
}
}
/* 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; }
.rankings-controls { 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; }
.rankings-controls { gap: 16px; }
.control-group { flex-shrink: 1; }
/* 커뮤니티 - 모바일에서 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; }
.app-icon { width: 36px; height: 36px; 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: 32px; height: 32px; }
.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; }
.rankings-controls { gap: 12px; }
.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: 32px; height: 32px; border-radius: 6px; }
.country-column.expanded .app-icon, .rank-column + .country-column:not(.collapsed) .app-icon { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
/* 좌우 여백 8px 통일 */
.container { padding: 0 8px 40px; }
.nav-inner { padding: 0 8px; }
/* 메인 메뉴 */
.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; }
/* 컨트롤 영역 */
.rankings-controls { gap: 6px; overflow: visible; }
.rankings-controls .tab-group { gap: 2px; }
.rankings-controls .tab-btn { padding: 8px 6px !important; font-size: var(--font-meta-size) !important; }
.control-group { gap: 4px; }
/* 뉴스/커뮤니티 컨트롤 - 공통 스타일 사용 */
/* 뉴스/커뮤니티 아이템 - 좌우 여백 최소화, 상하 여유 확보 */
.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: 28px; height: 28px; }
.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);
}
/* 탭 버튼 - 모바일 8px 통일 */
.tab-group .tab-btn {
padding: 10px 8px;
font-size: var(--font-tab-size);
gap: 4px;
min-height: 40px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.tab-group .tab-btn .news-favicon {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* 뉴스/커뮤니티 탭 - 모바일 전체 너비 + 한줄 표시 */
#newsTab,
#communityTab {
width: 100% !important;
justify-content: stretch !important;
}
#newsTab .tab-btn,
#communityTab .tab-btn {
flex: 1 1 0 !important;
white-space: nowrap !important;
font-size: var(--font-tab-size) !important;
padding: 10px 6px !important;
line-height: 1 !important;
}
#newsTab .tab-btn .news-favicon,
#communityTab .tab-btn .news-favicon {
display: none !important;
}
}
@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; }
.rankings-controls { gap: 4px; flex-wrap: nowrap; overflow: visible; }
.rankings-controls .tab-group { gap: 1px; }
.rankings-controls .tab-btn { padding: 6px 3px !important; font-size: var(--font-tab-size) !important; min-height: 30px !important; }
.control-group { gap: 3px; }
.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: 24px; height: 24px; border-radius: 4px; }
.country-column.expanded { flex: 4; }
.country-column.expanded .app-icon { width: 24px; height: 24px; }
.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);
}
/* 탭 버튼 - 초소형 모바일 6px 통일 */
.tab-group .tab-btn {
padding: 8px 6px;
font-size: var(--font-tab-size);
min-height: 38px;
justify-content: center;
}
.tab-group .tab-btn .news-favicon {
display: none;
}
/* 360px - 모든 요소 좌우 6px 직접 설정 */
.home-card-header {
padding: 8px 6px !important;
}
.home-card-body {
padding: 6px 0 !important;
}
.home-news-tabs, .home-community-tabs, .home-video-tabs {
margin: 0 6px !important;
}
.home-news-split, .home-video-split {
padding: 6px 0 !important;
}
.home-news-item, .home-video-item {
padding: 6px !important;
}
.home-news-card, .home-video-card {
margin: 0 6px !important;
}
.home-item {
padding: 6px !important;
}
.home-steam-row,
.home-upcoming-row,
.home-rank-row {
padding: 6px !important;
}
.home-rank-tabs {
padding: 6px !important;
}
.home-card-body .tab-group {
margin: 6px !important;
}
}
/* ========== Upcoming Games Section ========== */
.upcoming-controls .tab-group {
width: 100%;
}
.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: var(--card-hover);
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); }
}
/* ============================================================
홈 피드 모바일 패딩 통합 (최종)
- 모든 요소가 동일한 좌우 여백으로 정렬
- 768px: 12px | 480px: 8px | 360px: 6px
============================================================ */
/* === 태블릿 (768px 이하) === */
@media (max-width: 768px) {
/* 컨테이너 */
.home-container {
padding: 8px 0 !important;
margin-top: 8px !important;
}
/* 카드 헤더 */
.home-card-header {
padding: 10px 12px !important;
}
/* 카드 바디 - 좌우 패딩 없음 */
.home-card-body {
padding: 8px 0 !important;
}
/* 탭 그룹 */
.home-news-tabs,
.home-community-tabs,
.home-video-tabs,
.home-insight-tabs,
.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: 6px 0 !important;
margin-top: 6px !important;
}
/* 데일리 포커스 문구 */
.home-daily-focus {
padding: 8px 8px 0 !important;
}
.home-daily-focus-text {
padding: 12px !important;
font-size: 13px !important;
}
/* 카드 헤더 */
.home-card-header {
padding: 8px !important;
}
/* 카드 바디 */
.home-card-body {
padding: 6px 0 !important;
}
/* 탭 그룹 */
.home-news-tabs,
.home-community-tabs,
.home-video-tabs,
.home-insight-tabs,
.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: 4px 0 !important;
margin-top: 4px !important;
}
/* 카드 헤더 */
.home-card-header {
padding: 6px !important;
}
/* 카드 바디 */
.home-card-body {
padding: 4px 0 !important;
}
/* 탭 그룹 */
.home-news-tabs,
.home-community-tabs,
.home-video-tabs,
.home-insight-tabs,
.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;
}
/* 피드 카드 패딩 통일 - 360px */
.weekly-hot-card,
.weekly-rank-card,
.weekly-community-card,
.weekly-streaming-card {
padding: 10px;
border-radius: 8px;
}
.weekly-timeline-item {
padding: 8px 0;
}
}
/* ===========================
인사이트 페이지 스타일
=========================== */
/* 탭 스타일 - .tab-group과 동일하게 */
.insight-tabs {
display: flex;
background: var(--hover-bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px;
gap: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 0 16px 0;
}
.insight-tabs::-webkit-scrollbar {
display: none;
}
.insight-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
font-size: var(--font-tab-size);
font-weight: var(--font-tab-weight);
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.insight-tab:hover {
color: var(--text);
background: var(--hover-bg);
}
.insight-tab.active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
/* PC 인사이트 탭 스타일 - .tab-btn과 통합 (상단 PC 서브탭 버튼 스타일 참조) */
@media (min-width: 769px) {
.insight-tabs {
width: auto;
max-width: 400px;
margin: 0 auto 20px auto;
justify-content: center;
gap: 8px;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
}
.insight-panel {
display: none;
}
.insight-panel.active {
display: flex;
flex-direction: column;
gap: 16px;
}
/* 주간 리포트 헤더 카드 (피드 스타일) - 라이트모드 */
.weekly-header-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 1px solid var(--border);
border-radius: 20px;
padding: 24px;
margin-bottom: 0;
position: relative;
overflow: hidden;
}
.weekly-header-card .weekly-header-title,
.weekly-header-card .weekly-header-period,
.weekly-header-card .weekly-header-ampm-tag {
color: #fff;
}
.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) {
.weekly-header-card {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border: 1px solid var(--border);
}
.weekly-header-card .weekly-header-period {
background: rgba(255, 107, 53, 0.2);
color: #ff8f66;
}
.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;
}
}
/* 헤더 상단 하이라이트 선 제거됨 */
.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: 1.2rem;
font-weight: 800;
color: var(--text);
margin: 0 0 12px 0;
line-height: 1.3;
letter-spacing: -0.02em;
}
.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: 10px;
color: var(--text-secondary);
font-size: var(--font-body-size);
font-weight: var(--font-desc-weight);
}
.weekly-header-period {
background: rgba(99, 102, 241, 0.1);
padding: 4px 10px;
border-radius: 12px;
color: var(--primary);
font-size: var(--font-badge-size);
font-weight: var(--font-badge-weight);
}
.weekly-header-divider {
opacity: 0.3;
}
.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-header-week {
font-size: var(--font-badge-size);
font-weight: var(--font-badge-weight);
padding: 4px 10px;
border-radius: 12px;
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
}
/* === 주간 리포트 보고서 스타일 === */
.weekly-report {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 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: 0 4px 12px rgba(0,0,0,0.1);
}
.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(99, 102, 241, 0.15);
color: #6366f1;
}
.weekly-stat-icon.pc {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.weekly-stat-icon.industry {
background: rgba(249, 115, 22, 0.15);
color: #f97316;
}
.weekly-stat-icon.community {
background: rgba(236, 72, 153, 0.15);
color: #ec4899;
}
.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-section {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
position: relative;
transition: var(--transition-elevate);
}
.report-section:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.report-section-header {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 2px solid var(--border);
}
.report-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;
}
.report-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 {
background: var(--card-bg);
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-section:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.weekly-section-header {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 2px solid var(--border);
}
.weekly-section-title-wrap {
display: flex;
align-items: center;
gap: 14px;
}
.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-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;
}
.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: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
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: rgba(99, 102, 241, 0.12);
border-radius: var(--radius-sm);
color: #6366f1;
}
.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: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
}
.weekly-section-editor .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
/* 금주의 핫이슈 */
.weekly-section-hot {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-hot .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.weekly-hot-issues {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
align-items: stretch;
}
.weekly-hot-issues > .weekly-hot-card {
height: 100%;
display: flex;
flex-direction: column;
}
.weekly-hot-issues > .weekly-hot-card .weekly-hot-desc {
flex: 1;
}
.weekly-hot-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 14px;
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: linear-gradient(90deg, #ef4444, #f97316);
opacity: 0;
transition: opacity 0.2s;
}
.weekly-hot-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
/* 호버 시 상단 띠 효과 제거 */
.weekly-hot-card.featured {
grid-column: 1 / -1;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
border-color: rgba(239, 68, 68, 0.35);
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: rgba(99, 102, 241, 0.12);
color: #6366f1;
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,
.weekly-section-community .weekly-community-game {
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 12px 0;
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;
}
/* 순위 변동 분석 */
.weekly-section-rankings {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-rankings .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.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: 14px;
padding: 16px;
position: relative;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.weekly-rank-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.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: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-industry .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.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: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-metrics .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.weekly-metrics-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 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::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #6366f1;
}
.weekly-metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.weekly-metric-icon {
width: 52px;
height: 52px;
border-radius: 14px;
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);
}
.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: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-community .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.weekly-section-alt {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(99, 102, 241, 0.05));
}
.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: 14px;
padding: 16px;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.weekly-community-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.weekly-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;
}
.weekly-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;
}
.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: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-streaming .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.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: 14px;
padding: 16px;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
overflow: hidden;
}
.weekly-streaming-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.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;
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: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-stocks .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.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: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-mvp .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.weekly-mvp-card {
display: flex;
gap: 20px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(249, 115, 22, 0.12) 100%);
border: 1px solid rgba(245, 158, 11, 0.25);
border-radius: 14px;
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: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-releases .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.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: 14px;
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: #6366f1;
}
/* 글로벌 트렌드 */
.weekly-section-global {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
}
.weekly-section-global .weekly-section-title-wrap .weekly-icon {
background: rgba(99, 102, 241, 0.12);
color: #6366f1;
}
.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: 14px;
padding: 16px;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
overflow: hidden;
}
.weekly-global-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.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;
}
/* 주간 리포트 반응형 */
@media (max-width: 768px) {
.weekly-summary-grid {
grid-template-columns: repeat(2, 1fr);
}
.weekly-hot-issues,
.weekly-rankings-grid,
.weekly-metrics-row,
.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-section {
padding: 16px;
}
.weekly-stat-value {
font-size: var(--font-stat-size);
}
.weekly-intro {
padding: 18px;
}
.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;
}
/* 릴리즈 캘린더 */
.weekly-releases-list {
gap: 8px;
}
.weekly-release-item {
padding: 12px;
}
.weekly-release-date {
min-width: 50px;
font-size: var(--font-body-size);
}
/* 글로벌 트렌드 */
.weekly-global-card {
padding: 16px;
}
.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;
}
.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: 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: 14px;
}
.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;
}
.weekly-timeline-item {
padding: 10px 0;
}
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 900px) {
.metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.metrics-grid {
grid-template-columns: 1fr;
}
}
.metric-card {
background: var(--card-bg);
border-radius: 12px;
padding: 20px;
border-top: 3px solid;
}
.metric-card.primary {
border-color: #6366f1;
}
.metric-card.accent {
border-color: #f97316;
}
.metric-card.success {
border-color: #22c55e;
}
.metric-card.blue {
border-color: #3b82f6;
}
.metric-label {
font-size: var(--font-small-size);
color: var(--text-secondary);
margin-bottom: 8px;
}
.metric-value {
font-size: var(--font-heading-size);
font-weight: var(--font-badge-weight);
color: var(--text);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.metric-sub {
font-size: var(--font-small-size);
color: var(--text-muted);
}
.highlights-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.highlights-grid {
grid-template-columns: 1fr;
}
}
.highlight-card {
background: var(--hover-bg);
border-radius: 12px;
padding: 20px;
}
.highlight-tag {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: var(--font-meta-size);
font-weight: var(--font-badge-weight);
margin-bottom: 12px;
}
.highlight-tag.mobile {
background: rgba(99, 102, 241, 0.2);
color: #818cf8;
}
.highlight-tag.pc {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
.highlight-tag.console {
background: rgba(168, 85, 247, 0.2);
color: #c084fc;
}
.highlight-tag.esports {
background: rgba(249, 115, 22, 0.2);
color: #fb923c;
}
.highlight-tag.industry {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
}
.highlight-title {
font-size: var(--font-section-size);
font-weight: var(--font-meta-weight);
color: var(--text);
margin-bottom: 8px;
line-height: 1.4;
}
.highlight-desc {
font-size: var(--font-small-size);
color: var(--text-secondary);
line-height: 1.6;
}
.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-page-container {
display: flex;
flex-direction: column;
padding: 16px 0;
}
/* ========== 일간 리포트 섹션별 스타일 (주간과 통일) ========== */
/* 일간 리포트 카드 기본 스타일 */
.insight-page-container .insight-card {
border-radius: var(--radius-lg);
transition: var(--transition-elevate);
}
.insight-page-container .insight-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
/* 아이콘 배경 박스 (주간과 동일 - 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: rgba(99, 102, 241, 0.2);
}
.insight-card.daily-section-hot .home-card-header {
border-bottom: 2px solid 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: #6366f1;
}
/* 업계 동향 */
.insight-card.daily-section-industry {
background: var(--gradient-industry);
border-color: rgba(99, 102, 241, 0.2);
}
.insight-card.daily-section-industry .home-card-header {
border-bottom: 2px solid 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: #6366f1;
}
/* 주목할만한 지표 */
.insight-card.daily-section-metrics {
background: var(--gradient-metrics);
border-color: rgba(99, 102, 241, 0.2);
}
.insight-card.daily-section-metrics .home-card-header {
border-bottom: 2px solid 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: #6366f1;
}
/* 순위 변동 */
.insight-card.daily-section-rankings {
background: var(--gradient-rankings);
border-color: rgba(99, 102, 241, 0.2);
}
.insight-card.daily-section-rankings .home-card-header {
border-bottom: 2px solid 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: #6366f1;
}
/* 유저 반응 */
.insight-card.daily-section-community {
background: var(--gradient-community);
border-color: rgba(99, 102, 241, 0.2);
}
.insight-card.daily-section-community .home-card-header {
border-bottom: 2px solid 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: #6366f1;
}
/* 스트리밍 트렌드 */
.insight-card.daily-section-streaming {
background: var(--gradient-streaming);
border-color: rgba(99, 102, 241, 0.2);
}
.insight-card.daily-section-streaming .home-card-header {
border-bottom: 2px solid 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: #6366f1;
}
/* 게임주 현황 */
.insight-card.daily-section-stocks {
background: var(--gradient-stocks);
border-color: rgba(99, 102, 241, 0.2);
}
.insight-card.daily-section-stocks .home-card-header {
border-bottom: 2px solid 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: #6366f1;
}
/* 카드 헤더 공통 */
.insight-card .home-card-header {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
}
.insight-page-container .insight-card .home-card-header {
padding: 16px 20px;
border-bottom: 2px solid var(--border);
}
.insight-page-container .insight-card .home-card-body {
padding: 0;
}
.insight-page-container .insight-card .home-insight-split {
padding: 16px 20px;
}
.insight-page-container .home-insight-split {
align-items: stretch;
}
.insight-page-container .home-insight-column {
display: flex;
flex-direction: column;
gap: 16px;
}
.insight-page-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-page-container .home-insight-split {
flex-direction: column;
}
.insight-page-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-page-container .insight-card .home-card-header {
padding: 10px 12px !important;
}
.insight-page-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-card {
/* margin은 .insight-panel의 gap으로 처리 */
}
.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: 14px;
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--border);
}
.stock-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.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-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);
}
}
/* 누락된 클래스 라이트모드 정의 (다크모드 호환성) */
.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-card-container {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
border: 1px solid var(--border);
margin-top: 20px;
}
.metacritic-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
height: 52px;
box-sizing: border-box;
border-bottom: 1px solid var(--border);
background: var(--card-hover);
}
.metacritic-title {
font-size: var(--font-title-size);
font-weight: var(--font-title-weight);
color: var(--text);
}
.metacritic-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
padding: 16px;
}
.metacritic-card {
position: relative;
background: var(--card-hover);
border-radius: 10px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--border-subtle);
}
.metacritic-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.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-info {
padding: 10px;
}
.metacritic-card-title {
font-size: var(--font-rank-name-size);
font-weight: var(--font-rank-name-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-header {
padding: 12px 0;
margin-bottom: 12px;
}
.metacritic-title {
font-size: var(--font-title-size);
}
.metacritic-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 0 8px;
}
.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-meta-size);
min-height: 28px;
}
.metacritic-card-platform {
font-size: var(--font-xs-size);
}
}
/* Small Mobile: 2 columns */
@media (max-width: 480px) {
.metacritic-header {
padding: 8px 8px;
height: 40px;
}
.metacritic-title {
font-size: var(--font-body-size);
}
.metacritic-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
padding: 0 6px;
}
}
/* ========== 일간 리포트 - 유저 반응 카드 그리드 ========== */
.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(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.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: linear-gradient(90deg, #ef4444, #f97316);
opacity: 0;
transition: opacity 0.2s;
}
.daily-streaming-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
/* 호버 시 상단 띠 효과 제거 */
.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);
}
}