/* =========================================
   1. 전역 변수 & 기본 설정
   ========================================= */
:root {
    --header-height: 70px; /* 헤더 높이 넉넉하게 */
    --sidebar-width: 250px;
    --primary-color: #00BFFF;
    --bg-gray: #F0F2F5;
    --text-primary: #333;
    --transition-speed: 0.3s;
}

html, body {
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-gray);
    overflow: hidden; /* 이중 스크롤 방지 */
}

/* =========================================
   2. 공통 UI 컴포넌트 (페이지 디자인 통일용)
   ========================================= */

/* (1) 대시보드 카드 (흰색 박스) */
.dashboard-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 20px;
    min-height: 600px;
    margin-bottom: 30px; /* 하단 여백 추가 */
}

/* (2) 검색창 섹션 (왼쪽 정렬) */
.search-section {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start; /* 왼쪽 정렬 */
}

.search-input-group {
    display: flex;
    width: 100%;
    max-width: 600px;
}

.search-input {
    flex-grow: 1;
    height: 45px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
    outline: none;
    font-size: 15px;
}

    .search-input:focus {
        border-color: var(--primary-color);
    }

.search-btn {
    width: 60px;
    height: 45px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 18px;
}

    .search-btn:hover {
        opacity: 0.9;
    }

/* (3) 필터 바 & 칩 */
.filter-bar {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.filter-chip {
    background: white;
    border: 1px solid #ddd;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    transition: all 0.2s;
}

    .filter-chip.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        font-weight: bold;
    }

/* (4) 결과 테이블 (스타일 통일) */
.result-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .result-table th {
        background-color: #f8f9fa;
        color: #666;
        font-weight: 600;
        font-size: 13px;
        padding: 12px;
        border-bottom: 1px solid #ddd;
        text-align: center;
    }

        .result-table th.col-title {
            text-align: left;
            padding-left: 15px;
        }

    .result-table td {
        padding: 10px; /* 여백을 좀 줄여서 타이트하게 */
        vertical-align: middle; /* 텍스트와 이미지가 가운데 오도록 */
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
        color: #333;
    }

        .result-table td.cell-title {
            text-align: left;
            padding-left: 15px;
        }

.video-row:hover {
    background-color: #f9fcff;
    cursor: pointer;
}

/* (5) 텍스트 색상 및 유틸리티 */
.text-great {
    color: #00C73C;
    font-weight: 800;
}

.text-good {
    color: #4CAF50;
    font-weight: 700;
}

.text-normal {
    color: #9E9E9E;
    font-weight: 500;
}

.text-bad {
    color: #F44336;
    font-weight: 700;
}

.loading-container {
    padding: 50px;
    text-align: center;
    color: #999;
}

.spinner {
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* (6) 채널 프로필 관련 */
.profile-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.channel-profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
}

.flag-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 14px;
    background: white;
    border-radius: 50%;
    padding: 1px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-outline-sm {
    background: white;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

/* [추가] 썸네일 이미지 고정 크기 스타일 */
.small-thumb {
    width: 120px; /* 너비 고정 (원하는대로 조절 가능) */
    height: 68px; /* 16:9 비율 유지 (120 * 9 / 16) */
    object-fit: cover; /* 이미지 비율 깨짐 방지 */
    border-radius: 4px; /* 모서리 둥글게 */
    display: block; /* 하단 여백 제거 */
    margin: 0 auto; /* 셀 안에서 가운데 정렬 */
    background-color: #eee; /* 로딩 전 회색 배경 */
}

/* [추가] 제목이 너무 길면 줄임표(...) 처리 (선택사항) */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 두 줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-width: 400px; /* 제목 칸 최대 너비 제한 */
    text-align: left;
}

/* 채널 모달 전용 스타일 */
.channel-modal {
    width: 800px; /* 더 넓게 */
    max-width: 95vw;
    padding: 30px;
}

.channel-header-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.ch-profile-img-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
}

.ch-info h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
}

.btn-visit {
    padding: 6px 12px;
    border: 1px solid #00C73C;
    color: #00C73C;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
}

/* 통계 그리드 (3x2) */
.stats-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.stat-box {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

    .stat-box .label {
        display: block;
        font-size: 12px;
        color: #888;
        margin-bottom: 5px;
    }

    .stat-box .value {
        font-size: 18px;
        color: #333;
    }

    .stat-box .sub-text {
        display: block;
        font-size: 11px;
        color: #999;
        margin-top: 2px;
    }

/* 등급 그리드 */
.rating-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.rating-box {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 최신 영상 카드 */
.latest-video-card {
    display: flex;
    gap: 15px;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
}

    .latest-video-card img {
        width: 160px;
        height: 90px;
        object-fit: cover;
        border-radius: 4px;
    }

.lv-info h5 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.lv-stats span {
    font-size: 12px;
    color: #666;
    margin-right: 10px;
    background: #f0f0f0;
    padding: 3px 6px;
    border-radius: 4px;
}

/* 인기 영상 테이블 */
.top-video-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    .top-video-table th {
        background: #f5f5f5;
        font-size: 12px;
        padding: 8px;
        text-align: center;
    }

    .top-video-table td {
        border-bottom: 1px solid #eee;
        padding: 8px;
        font-size: 13px;
        text-align: center;
    }

.xs-thumb {
    width: 60px;
    height: 34px;
    object-fit: cover;
    border-radius: 3px;
}

.text-truncate-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    text-align: left;
}
/* =========================================
   [통합] 모달(팝업) 스타일
   ========================================= */

/* 1. 뒷배경 (공통) - 화면 중앙 정렬 핵심 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex; /* 플렉스 박스 사용 */
    justify-content: center; /* 가로 중앙 */
    align-items: center; /* 세로 중앙 */
    backdrop-filter: blur(3px); /* 배경 흐림 효과 */
}

/* 2. 모달 본체 박스 (공통) */
.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* 화면 높이의 90% 제한 */
    overflow-y: auto; /* 내용 넘치면 스크롤 */
    animation: slideUp 0.3s ease-out;
    padding: 30px;
}

/* 모달 크기 지정 */
.modal-size-lg {
    width: 900px;
    max-width: 95%;
}

/* 닫기 버튼 */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}

    .close-btn:hover {
        color: #333;
    }

/* 애니메이션 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. 섹션 공통 */
.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    margin-top: 10px;
}

/* =========================================
   [영상 상세 모달 전용 스타일] (vm-)
   ========================================= */

/* 헤더 영역: 썸네일(좌) + 정보(우) */
.vm-header {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.vm-thumb {
    width: 200px;
    height: 112px; /* 16:9 비율 */
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
}

.vm-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vm-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.3;
    color: #333;
}

.vm-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vm-badge {
    background: #f1f3f5;
    color: #555;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.btn-youtube {
    padding: 6px 12px;
    border: 1px solid #00C73C;
    color: #00C73C;
    background: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .btn-youtube:hover {
        background-color: #f0fff4;
    }

/* 통계 박스 그리드 (4칸) */
.vm-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4등분 */
    gap: 15px;
    margin-bottom: 25px;
}

.stat-box {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 20px 10px;
    text-align: center;
}

.stat-label {
    font-size: 12px;
    color: #888;
    display: block;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #333;
}

.stat-sub {
    font-size: 11px;
    margin-top: 5px;
    display: block;
}

/* 채널 정보 바 */
.vm-channel-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.vm-ch-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.vm-ch-name {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.vm-ch-desc {
    font-size: 13px;
    color: #666;
    margin: 2px 0 0 0;
}

/* 베스트 댓글 */
.vm-comment-box {
    background: #E6F7FF; /* 아주 연한 하늘색 배경 */
    border-left: 4px solid #00BFFF;
    padding: 15px;
    border-radius: 4px;
}

.vm-cmt-author {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
}

.vm-cmt-body {
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    margin: 0;
}

/* 등급 색상 (기존 유지) */
.text-great {
    color: #00C73C;
}

.text-good {
    color: #4CAF50;
}

.text-normal {
    color: #9E9E9E;
}

.text-bad {
    color: #F44336;
}


.chart-slider-wrapper {
    width: 100%;
}

/* 조회수용 슬라이더 */
.view-slider-inner {
    margin-left: 40px; /* 차트 왼쪽 빈 공간만큼 */
    margin-right: 20px; /* 필요하면 오른쪽도 조금 */
}

/* 구독자용 슬라이더 */
.sub-slider-inner {
    margin-left: 32px; /* 구독자 차트에 맞춰 따로 조정 */
    margin-right: 20px;
}

.hist-range-wrapper {
    width: 100%;
    padding: 0 40px; /* 차트랑 슬라이더 둘 다 동일하게 */
}

.hist-chart {
    height: 80px;
}

.range-container {
    position: relative;
    height: 32px;
}

    .range-container input[type=range] {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        margin: 0;
    }


.view-bar {
    background-color: var(--mud-palette-primary);
}

.subs-bar {
    background-color: var(--mud-palette-secondary);
}

.date-bar {
    background-color: var(--mud-palette-success);
}

.dialog-scroll {
    padding: 10px;
}

/* 칩들을 가로로 나열 */
.grade-chip-set {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 카드 기본 모양 : MudChip 자체에 적용 */
.grade-card.mud-chip {
    min-width: 110px !important;
    height: 72px !important; /* 높이 확실히 올리기 */
    border-radius: 6px !important;
}

    /* MudChip 안쪽(content)을 세로 중앙 정렬 + 패딩 확대 */
    .grade-card.mud-chip .mud-chip-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* 세로 가운데 */
        gap: 4px;
        padding: 10px 14px !important; /* 위/아래 여백 넉넉하게 */
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

/* 1줄째 : 등급 이름 */
.grade-card-label {
    font-size: 0.95rem;
    font-weight: 700;
}

/* 2줄째 : (개수) */
.grade-card-count {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* 🔹 등급별 색상 (ratings = Worst, Bad, Normal, Good, Great) 기준 */
.grade-Worst .grade-card-label {
    color: #e53935;
}

.grade-Bad .grade-card-label {
    color: #ef5350;
}

.grade-Normal .grade-card-label {
    color: #9e9e9e;
}

.grade-Good .grade-card-label {
    color: #43a047;
}

.grade-Great .grade-card-label {
    color: #2e7d32;
}

/* 선택된 카드 강조 효과 */
.grade-card.mud-chip.mud-chip-selected {
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.25);
    border-color: rgba(76, 175, 80, 0.6);
}
/* 슬라이더 선/틱은 클릭 못하게 막기 */
.filter-slider :deep(.mud-slider-track-container),
.filter-slider :deep(.mud-slider-tick-container),
.filter-slider :deep(.mud-slider-track),
.filter-slider :deep(.mud-slider-filled) {
    pointer-events: none;
}

/* 동그란 thumb 만 클릭/드래그 가능하도록 다시 켜주기 */
.filter-slider :deep(.mud-slider-thumb) {
    pointer-events: auto;
}
.disable-track-click {
    pointer-events: none !important;
}

    /* 2. 하지만 손잡이(Thumb/Knob)는 드래그해야 하므로 다시 켭니다. */
    .disable-track-click .mud-slider-thumb {
        pointer-events: auto !important;
        cursor: grab;
    }

    /* (혹시 모를 확장 패키지 호환성을 위해 추가) */
    .disable-track-click .mud-range-slider-thumb {
        pointer-events: auto !important;
        cursor: grab;
    }