* {
    font-family: 'Noto Sans KR', sans-serif !important;
    box-sizing: border-box;
}
        :root {
            --bg-color: #010306;
            --card-bg: #030812;
            --accent: #003366;
            --accent-bright: #3385ff;
            --text-main: #f0faff;
            --text-sub: #5c7285;
            --border: #16243a;
        }

        body { 
            background-color: var(--bg-color); 
            background-image: radial-gradient(circle at center, #051020 0%, #02050a 100%);
            color: var(--text-main); font-family: 'Noto Sans KR', sans-serif; 
            margin: 0; padding: 15px; display: flex; justify-content: center; min-height: 100vh; box-sizing: border-box;
        }

        .wrapper { width: 100%; max-width: 1250px; display: flex; flex-direction: column; gap: 12px; }

        .card { 
            background: var(--card-bg); border-radius: 10px; padding: 12px 15px; 
            border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            display: flex; flex-direction: column;
        }

        .profile-box { 
            display: flex !important; 
            flex-direction: row !important;
            justify-content: space-between !important; 
            align-items: center !important; 
            background: linear-gradient(145deg, #051020, #02050a); 
        }
        
        .profile-info { text-align: left; }
        .profile-info h1 { margin: 0; font-size: 20px; letter-spacing: -0.5px; }
        .profile-info p { margin: 3px 0 0; font-size: 12px; color: var(--text-sub); }

        .header-buttons { display: flex; gap: 8px; flex-shrink: 0; }
        .link-btn { 
            padding: 8px 12px; border-radius: 6px; font-size: 11px; font-weight: bold;
            text-decoration: none; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center;
            white-space: nowrap;
        }
        .btn-summary { background: rgba(51, 133, 255, 0.1); border: 1px solid var(--accent-bright); color: var(--text-main); }
        .btn-summary:hover { background: var(--accent-bright); color: #fff; }
        .btn-back { background: rgba(92, 114, 133, 0.1); border: 1px solid var(--text-sub); color: var(--text-sub); }
        .btn-back:hover { background: var(--text-sub); color: #fff; }

        .bottom-section { 
            display: grid; 
            grid-template-columns: 1fr 1fr 1.8fr; 
            gap: 12px; 
            align-items: stretch;
        }

        h2 { font-size: 12px; color: var(--accent-bright); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin: 0 0 10px 0; letter-spacing: 0.5px; }

        .item-row { 
            padding: 5px 4px; border-bottom: 1px solid rgba(22, 36, 58, 0.5); 
            font-size: 12.5px; flex: 1; display: flex; flex-direction: column; justify-content: center; 
        }
        .item-row:last-child { border-bottom: none; }

        .stat-label { color: var(--text-sub); font-size: 10.5px; }
        .stat-value { font-size: 14px; font-weight: bold; margin-top: 2px; }

        .graph-bar-container { width: 100%; background: #051020; height: 4px; border-radius: 2px; margin-top: 5px; }
        .graph-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); border-radius: 2px; }

        .rank-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            grid-template-rows: repeat(4, auto);   
            grid-auto-flow: column;                
            column-gap: 12px; 
            height: 100%;
        }
        .rank-item { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(22, 36, 58, 0.3); font-size: 11.5px; }
        .rank-item:hover {
    background: rgba(51, 133, 255, 0.1);
    border-radius: 5px;
}
        .rank-item:not([style*="background: rgba"]) :hover {
    background: rgba(22, 36, 58, 0.5);
    border-radius: 6px;
}
        .rank-badge { 
            display: inline-block; min-width: 18px; height: 18px; line-height: 18px; 
            text-align: center; background: #1a2638; border-radius: 3px; 
            font-size: 10px; margin-right: 6px; color: var(--text-sub); font-weight: bold;
        }
        .top-rank { background: var(--accent-bright); color: #fff; }

       .btn-pagination {
    padding: 10px 24px;
    background: rgba(51, 133, 255, 0.1); /* 은은한 파란 배경 */
    color: var(--text-main);
    border: 1px solid var(--accent-bright);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.2s;
    display: inline-flex;   /* 내용물만큼만 크기 차지 */
    min-width: 120px;
    align-items: center;
    justify-content: center;
}

.btn-pagination:hover {
    background: var(--accent-bright);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(51, 133, 255, 0.3);
}

/* 접기 버튼 전용 (약간 차분한 색상) */
.btn-collapse {
    background: rgba(22, 36, 58, 0.5);
    border: 1px solid var(--border);
    color: var(--text-sub);
}

.btn-collapse:hover {
    background: var(--text-sub);
    color: #ffffff;
    border-color: var(--text-sub);
}

/* 페이지네이션 컨테이너 */
vod-control {
    display: flex;
    flex-direction: column;
    align-items: center;    /* 가로축 중앙 정렬 */
    justify-content: center; /* 세로축 중앙 정렬 (필요시) */
    gap: 12px;
    margin: 20px auto;      /* 상하 20px, 좌우 auto로 중앙 고정 */
    width: 100%;            /* 전체 너비 확보 */
    max-width: 100%;        /* 박스 모델 밖으로 나가지 않게 제한 */
    padding: 0;             /* 혹시 모를 내부 여백 제거 */
    box-sizing: border-box;
}
        .vod-list {
            max-height: none !important;
        }
        .vod-item {
    display: flex; 
    align-items: center; 
    gap: 15px;
    padding: 12px; /* 안쪽 여백을 살짝 늘림 */
    margin-bottom: 12px; /* [핵심] 아이템 사이의 바깥 간격 추가 */
    background: rgba(22, 36, 58, 0.3);
    border-radius: 10px; /* 조금 더 부드러운 곡선 */
    border: 1px solid var(--border); /* 기본 테두리를 흐리게 추가 */
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 약간의 입체감 추가 */
}

.vod-item:last-child {
    margin-bottom: 0; /* 마지막 아이템은 아래 간격 제거 */
}
    .vod-item:hover { border-color: var(--accent-bright); background: rgba(51, 133, 255, 0.05); }
        /* 썸네일 박스 스타일 */
    .vod-thumb {
        width: 100px; /* 16:9 비율 유지용 */
        aspect-ratio: 16 / 9;
        background: #16243a;
        border-radius: 4px;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
    }
    .vod-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지가 꽉 차게 */
    }
      .vod-date { 
        display: flex; flex-direction: column; align-items: center;
        min-width: 60px; text-align: center; 
        border-right: 1px solid var(--border); padding-right: 12px;
        flex-shrink: 0;
    }

    .date-day { font-size: 13px; font-weight: bold; color: var(--text-main); }
    .date-duration { font-size: 10px; color: #ffcc00; margin-top: 4px; white-space: nowrap; }

    .vod-info { flex: 1; min-width: 0; }
    .vod-title { 
        font-size: 13.5px; font-weight: bold; color: var(--text-main); display: flex; align-items: center; gap: 5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    }
    .vod-meta {
    display: flex;
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    overflow: hidden;
    gap: 5px;
    align-items: center;
}
.plus-tag {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-sub) !important;
    font-size: 10px;
    font-weight: bold;
}
    .vod-tag { font-size: 9.5px; color: var(--text-sub); background: #16243a; padding: 1px 5px; border-radius: 3px; }
        .btn-watch {
            padding: 6px 10px; font-size: 11px; background: var(--accent); color: white;
            text-decoration: none; border-radius: 4px; font-weight: bold; transition: 0.2s; flex-shrink: 0;
        }
        .btn-watch:hover { background: var(--accent-bright); }

        /* 팝업(모달) 배경 */
.modal {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0;
    width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px); align-items: center; justify-content: center;
}

/* 팝업창 박스 */
.modal-content {
    background: var(--card-bg); border: 1px solid var(--border);
    width: 95%; max-width: 500px; 
    max-height: 85vh; /* 화면 높이의 85%까지만 커짐 */
    border-radius: 15px;
    position: relative; 
    display: flex; flex-direction: column; /* 헤더와 바디 분리용 */
    overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 닫기 버튼 */
.close-btn {
    position: absolute; top: 15px; right: 20px; color: var(--text-sub);
    font-size: 24px; cursor: pointer; z-index: 100; /* 최상단 고정 */
    background: var(--card-bg); padding: 0 5px; border-radius: 50%;
}
.close-btn:hover { color: var(--text-main); }

/* 팝업 내부 콘텐츠 */
.modal-body { 
    overflow-y: auto; /* 세로 스크롤 활성화 */
    flex: 1; 
    scrollbar-width: thin; /* 파이어폭스 스크롤바 조절 */
    scrollbar-color: var(--accent) transparent;
}
/* 크롬/사파리 스크롤바 디자인 */
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 10px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }

/* 팝업 상단 이미지 고정 해제 (본문과 함께 스크롤되도록 본문 안으로 이동) */
.modal-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid var(--border); }
.modal-details { padding: 20px; }
.modal-details h3 { margin: 0 0 15px 0; font-size: 18px; color: var(--text-main); line-height: 1.5; }
.modal-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.info-item { background: rgba(22, 36, 58, 0.5); padding: 10px; border-radius: 8px; }
.info-item label { display: block; font-size: 10px; color: var(--text-sub); margin-bottom: 4px; }
.info-item span { font-size: 13px; font-weight: bold; color: var(--accent-bright); }
.modal-tags { display: flex; gap: 6px; flex-wrap: wrap; }

        /* 요약 팝업 전용 스타일 */
.summary-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-btn { 
    flex: 1; padding: 10px; background: none; border: none; color: var(--text-sub); 
    cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.3s;
}
.tab-btn.active { color: var(--accent-bright); border-bottom: 2px solid var(--accent-bright); }

.tab-content { display: none; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-item { background: rgba(22, 36, 58, 0.4); padding: 15px; border-radius: 10px; text-align: center; }
.summary-item label { display: block; font-size: 11px; color: var(--text-sub); margin-bottom: 5px; }
.summary-item div { font-size: 16px; font-weight: bold; color: var(--text-main); }
.summary-full { grid-column: span 2; background: linear-gradient(145deg, #051020, #030812); border: 1px solid var(--accent); }

       .diff-text {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    font-weight: bold;
}
.vod-list {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} 
/* PC와 모바일 공통으로 적용되는 배지 스타일 */
.badge-19 {
    color: #fff !important; /* 선명한 빨간색 */
    font-weight: bold !important;
    margin-left: 5px;          /* 제목과의 간격 */
    font-size: 13px;
    flex-shrink: 0;            /* 짤림 방지 */
}
/* 리포트(요약) 팝업 */
#summaryModal {
    z-index: 1000;
}

/* 상세 정보 팝업 */
#vodModal {
    z-index: 2000; /* 리포트보다 높아야 위로 올라옵니다 */
}

/* 모바일 레이아웃 */
/* 모바일 레이아웃 */
/* 모바일 레이아웃 */
/* 모바일 레이아웃 */

         @media (max-width: 800px) {
     /* 1. 첫 번째 카드 (제목 + 선택창) 세로 배치 */
    #summaryModal .modal-body > div > .card:first-child {
        flex-direction: column !important; /* 가로에서 세로로 */
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 20px !important;
    }

    /* 선택창을 감싸는 div 가로 꽉 채우기 */
    #summaryModal .modal-body > div > .card:first-child > div:last-child {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* 연도/월 선택 박스 반반씩 */
    #selectYear, #selectMonth {
        flex: 1 !important;
        width: 100% !important;
        height: 40px !important;
    }

            /* 1. 상단 통계 컨테이너: 높이를 유연하게 조절 */
   .summary-grid.summary-full {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        height: auto !important;
        padding: 15px !important;
    }
    /* 2. 각 통계 항목(시간, 횟수 등)의 박스 */
    .summary-item {
        display: flex !important;
        flex-direction: column !important;   /* row에서 column으로 변경 */
        justify-content: center !important;  /* 세로 중앙 정렬 */
        align-items: center !important;  /* 왼쪽 정렬 */
        width: 100% !important;
        min-height: 50px !important;         /* 위아래 배치에 맞는 충분한 높이 */
        padding: 5px !important;       /* 여백 조정 */
        box-sizing: border-box !important;
        position: relative !important;
        background: rgba(51, 133, 255, 0.08) !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        margin: 0 3px !important;
    }
    .summary-item:not(:last-child) {
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important; /* 대신 아래 선 추가 가능 */
    }

    /* 3. 라벨과 숫자 크기 조절 */
   .summary-item label {
        flex: none !important;
        margin-bottom: 6px !important;       /* 아래 숫자와의 간격 확보 */
        padding: 0px !important;
        position: static !important;
        font-size: 12px !important;
        color: var(--text-sub) !important;
        display: block !important;
    }
    /* 4. [핵심] 큰 숫자(619시간 등) 글자 크기 조절 */
    .summary-item div {
        flex: none !important;
        text-align: center !important;         /* 왼쪽 정렬로 통일 */
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        font-size: 12px !important;
        font-weight: bold !important;
        color: var(--accent-bright) !important;
        white-space: nowrap !important;
    }

    /* 5. 숫자 사이의 구분선(border)이 있다면 조정 */
    .summary-item:not(:last-child) {
        border-right: 1px solid var(--border) !important;
    }
    .modal-content {
        /* 1. width를 96%로 유지하되, 브라우저가 계산을 잘못하지 않게 고정 */
        width: 94vw !important; /* % 대신 vw(화면대비)를 써서 스크롤바 영향을 줄임 */
        max-width: 94vw !important;
        
        /* 2. 중앙 정렬을 위해 margin 재설정 */
        margin: 10px auto !important;
        left: 0; right: 0; /* 강제 중앙 정렬 보조 */
        
        /* 3. 내부 여백을 줘서 스크롤바와 내용이 붙지 않게 함 */
        padding: 0 !important;
        box-sizing: border-box !important;
        
        /* 4. 가로 스크롤 방지 및 유연한 세로 스크롤 */
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* 2. 내부 콘텐츠 패딩 최적화 */
    .modal-details {
        padding: 15px 12px !important;
    }

    /* 3. 태그 순위 및 카테고리 요약: 세로 1열로 길게 배치 */
    #modalTags, #rptCategory, .modal-tags {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    height: auto !important;
}
            /* 태그가 들어가는 컨테이너 (ID나 클래스명 확인 필요) */
    #modalTags, .modal-tags {
        display: flex !important;
        flex-direction: row !important; /* 세로가 아닌 가로 방향으로 */
        flex-wrap: wrap !important;    /* 공간이 부족하면 다음 줄로 넘김 */
        justify-content: flex-start !important; /* 왼쪽 정렬 */
        gap: 6px !important;            /* 태그 사이 간격 */
        width: 100% !important;
        height: auto !important;
        padding: 5px 0 !important;
    }

    /* 개별 태그 스타일 */
    .rank-item, .vod-tag { 
        width: auto !important;         /* 너비를 100%가 아닌 자동(글자 크기만큼)으로 */
        min-width: 0 !important;
        padding: 3px 8px !important;   /* 태그 안쪽 여백 조절 */
        display: inline-flex !important; /* 텍스트에 딱 맞게 */
        align-items: center;
        white-space: nowrap !important; /* 태그 안에서 글자가 줄바꿈되지 않게 */
    }
     /* 리스트 내의 태그 크기만 타겟팅 */
    .vod-info .vod-tag {
        font-size: 9px !important;      /* 글자 크기를 더 작게 */
        padding: 2px 5px !important;    /* 안쪽 여백을 줄여 전체 부피 축소 */
        border-radius: 3px !important;  /* 둥근 모서리도 크기에 맞춰 조절 */
        line-height: 1 !important;      /* 줄 높이 최소화 */
    }
            /* 태그 사이의 간격도 살짝 좁혀서 공간 확보 */
    .vod-meta {
        gap: 4px !important;
        margin-top: 4px !important;     /* 제목과의 간격이 너무 멀어 보이면 조절 */
    }

   /* [3] 태그 순위 (핵심: 2열 그리드 강제 적용) */
    .rank-grid {
    display: grid !important;
    /* 무조건 2열로 고정하고 나머지는 아래로 */
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
    /* 추가: 자식들이 옆으로 새지 않도록 고정 */
    grid-auto-flow: row !important; 
}

.rank-item {
    /* 중요: 너비를 100%로 해서 그리드 한 칸을 꽉 채우게 함 */
    width: 100% !important; 
    display: flex !important;
    align-items: center !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
    /* 기존 margin: 2px 0; 이 그리드 간격을 방해하므로 CSS에서 초기화 */
    margin: 0 !important; 
}

  /* 제목은 한 줄로 고정하고 말줄임표 처리 */
.vod-title {
        display: flex !important;
        align-items: center;
        justify-content: space-between; /* 제목은 왼쪽, 배지는 오른쪽 */
        gap: 8px;
        width: 100%;
        white-space: nowrap !important;
    }

    /* 실제 제목 텍스트: 여기서만 말줄임표 발생 */
    .title-text {
        flex: 1;                /* 가능한 넓은 공간 차지 */
        min-width: 0;           /* flex 박스 내 말줄임표 필수 설정 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block !important;
    }

    /* 19금 배지: 절대로 크기가 줄어들거나 잘리지 않음 */
    .badge-19 {
        flex-shrink: 0;         /* 공간 부족해도 유지 */
        color: #ff4444;
        font-weight: bold;
        font-size: 12px;
    }
    
    /* 기존 5번 항목의 다른 요소들 줄바꿈 설정 유지 */
    .modal-content h3, .modal-content span:not(.title-text), .modal-content div:not(.vod-title) {
        white-space: normal !important;
        word-break: keep-all !important;
    }
    /* 6. 메인 화면 하단 섹션 (다시보기 리스트 등) 1열로 */
    .bottom-section { 
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important; 
    }
            .vod-list {
        display: flex !important;
        flex-direction: column !important; /* 모바일은 세로 한 줄 */
        gap: 12px !important;
    }

    /* 7. 다시보기 아이템 최적화 */
    .vod-item {
        background: var(--card-bg, #1e2a3a) !important; /* 배경색 강제 지정 */
        border: 1px solid var(--border, rgba(255,255,255,0.1)) !important; /* 테두리 강제 지정 */
        border-radius: 12px !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: row !important; /* 가로형 레이아웃 유지 */
        align-items: center !important;
    }
    .vod-thumb { width: 90px; } /* 썸네일 크기 적정화 */
    .btn-watch { display: none; } /* 모바일에서 버튼 숨김 유지 */

    /* 8. 통계 수치 그리드 (2열이 가장 깔끔함) */
    .summary-grid {
    display: flex !important;
    flex-direction: column !important;
}
}