/* 언어별 분석 페이지 전용 CSS */

/* 컨테이너 너비 확장 */
.longform-page .container,
.shorts-page .container {
    max-width: 1680px; /* 기존 1400px에서 20% 증가 */
}

/* 기본 레이아웃 */
.stats-bar {
    background: var(--bg-primary);
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.country-analysis-section {
    margin-top: 20px;
}

/* 테이블 컨트롤 */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.view-controls,
.global-controls {
    display: flex;
    gap: 8px;
}

.control-btn {
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.control-btn:hover {
    background: var(--accent-color);
    color: white;
}

.control-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* 메인 테이블 컨테이너 */
.country-table-container {
    width: 100%;
    height: 1300px; /* 높이 복원 */
    overflow: auto; /* 스크롤 복원 */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
}

/* 언어별 분석 테이블 */
.country-analysis-table {
    width: 100%;
    min-width: 1100px; /* 스크롤 완전 방지 */
    border-collapse: collapse;
    table-layout: fixed;
}

.country-analysis-table th,
.country-analysis-table td {
    width: 14.28%; /* 7개 컬럼 균등 분할 */
    border-right: 1px solid var(--border-color);
    vertical-align: top;
}

.country-analysis-table th:last-child,
.country-analysis-table td:last-child {
    border-right: none;
}

/* 국가 헤더 */
.country-header {
    background: var(--bg-secondary);
    padding: 15px 10px;
    border-bottom: 2px solid var(--border-color);
    text-align: center;
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.country-flag {
    font-size: 1.5em;
    line-height: 1;
}

.country-name {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--text-primary);
}

.video-count {
    font-size: 0.8em;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

/* 정렬 컨트롤 */
.sort-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.sort-btn {
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sort-btn:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.sort-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    font-weight: bold;
}

/* 비디오 컬럼 */
.video-column {
    height: auto; /* 자동 높이로 변경 */
    padding: 0;
    position: relative;
}

.video-list {
    height: auto; /* 자동 높이로 변경 */
    overflow-y: visible; /* 개별 스크롤 제거 */
    padding: 10px;
}

/* 비디오 카드 - 대형 */
.video-card-country {
    display: flex;
    flex-direction: column;
    height: 260px; /* 쇼츠용 높이 더 증가 */
    margin-bottom: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.video-card-country:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.video-thumbnail-country {
    width: 100%;
    height: 140px; /* 썸네일 대폭 증가 (쇼츠 세로형에 적합) */
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.video-info-country {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 102px; /* 남은 공간 증가 (260px - 140px - 10px*2 - 8px) */
    overflow: hidden;
}

.video-title-country {
    font-size: 0.85em; /* 폰트 크기 줄임 */
    font-weight: 700; /* 폰트 굵기 유지 */
    line-height: 1.3; /* 줄 간격 최적화 */
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 3줄까지 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
    flex: 1;
    min-height: 36px; /* 최소 높이 보장 */
}

.video-channel-country {
    font-size: 0.8em; /* 폰트 크기 더 증가 */
    color: var(--text-secondary);
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0; /* 축소 방지 */
}

.video-meta-country {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em; /* 폰트 크기 더 증가 */
    margin-top: auto;
    flex-shrink: 0; /* 축소 방지 */
}

.video-views-country {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 1em; /* 조회수 더 크게 */
}

.video-duration-country {
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.7em; /* duration 더 크게 */
    font-weight: 600;
}

/* 롱폼 전용 스타일 */
body.longform-page .video-card-country {
    height: 240px; /* 롱폼 높이 증가 */
}

body.longform-page .video-thumbnail-country {
    height: 120px; /* 롱폼 썸네일 크기 증가 (16:9 비율 유지) */
}

body.longform-page .video-info-country {
    height: 102px; /* 롱폼 텍스트 영역 증가 (240px - 120px - 10px*2 - 8px) */
}

/* 페이징 */
.pagination {
    position: relative; /* absolute에서 relative로 변경 */
    bottom: auto;
    left: auto;
    right: auto;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    gap: 5px;
    padding: 10px;
    margin-top: 10px;
}

.pagination-btn {
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: all 0.2s ease;
    color: var(--text-primary);
    min-width: 24px;
    text-align: center;
}

.pagination-btn:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.pagination-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    font-weight: bold;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn:disabled:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* 로딩 상태 */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* 언어별 색상 구분 (미세한 차이) */
.country-header[data-lang="ko"] {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

.country-header[data-lang="en"] {
    background: linear-gradient(135deg, #fff8f8 0%, #fff0f0 100%);
}

.country-header[data-lang="ja"] {
    background: linear-gradient(135deg, #fff8fc 0%, #fff0f8 100%);
}

.country-header[data-lang="zh"] {
    background: linear-gradient(135deg, #fffdf8 0%, #fffaf0 100%);
}

.country-header[data-lang="es"] {
    background: linear-gradient(135deg, #f8fff8 0%, #f0fff0 100%);
}

.country-header[data-lang="fr"] {
    background: linear-gradient(135deg, #f8ffff 0%, #f0ffff 100%);
}

.country-header[data-lang="de"] {
    background: linear-gradient(135deg, #fffaf8 0%, #fff5f0 100%);
}

/* 반응형 디자인 */
@media (max-width: 1200px) {
    .country-analysis-table {
        min-width: 1200px;
    }
    
    .sort-controls {
        flex-direction: column;
        gap: 2px;
    }
    
    .sort-btn {
        font-size: 0.7em;
        padding: 3px 6px;
    }
}

@media (max-width: 768px) {
    .table-controls {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .view-controls,
    .global-controls {
        justify-content: center;
    }
    
    .country-analysis-table {
        min-width: 900px; /* 모바일에서 스크롤 방지 */
    }
    
    .header-content {
        gap: 3px;
    }
    
    .country-flag {
        font-size: 1.2em;
    }
    
    .country-name {
        font-size: 0.8em;
    }
}

/* 스크롤바 스타일링 */
.country-table-container::-webkit-scrollbar {
    width: 12px; /* 세로 스크롤바 */
    height: 12px; /* 가로 스크롤바 */
}

.country-table-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
}

.country-table-container::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}

.country-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-primary);
}

.country-table-container::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* 다크 테마 지원 */
[data-theme="dark"] .country-header[data-lang="ko"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

[data-theme="dark"] .country-header[data-lang="en"] {
    background: linear-gradient(135deg, #2e1a1a 0%, #3e1616 100%);
}

[data-theme="dark"] .country-header[data-lang="ja"] {
    background: linear-gradient(135deg, #2e1a2a 0%, #3e1630 100%);
}

[data-theme="dark"] .country-header[data-lang="zh"] {
    background: linear-gradient(135deg, #2e2a1a 0%, #3e3016 100%);
}

[data-theme="dark"] .country-header[data-lang="es"] {
    background: linear-gradient(135deg, #1a2e1a 0%, #163e16 100%);
}

[data-theme="dark"] .country-header[data-lang="fr"] {
    background: linear-gradient(135deg, #1a2e2e 0%, #163e3e 100%);
}

[data-theme="dark"] .country-header[data-lang="de"] {
    background: linear-gradient(135deg, #2e251a 0%, #3e3116 100%);
}