/* =========================================
   0. Blazor 기본 레이아웃 스크롤 강제 제거 (필수!)
   ========================================= */
html, body, #app {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important; /* 브라우저 전체 스크롤 절대 금지 */
}

/* Blazor의 기본 최상위 레이아웃 클래스들 무력화 */
#app, .page, main, .main {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important; /* 여기서 스크롤 생기는 것 방지 */
    display: flex !important;
    flex-direction: column !important; /* 세로 배치 강제 */
}

/* .page는 보통 가로(Sidebar + Main) 배치이므로 예외 처리 */
.page {
    flex-direction: row !important;
}

/* 실제 컨텐츠가 들어가는 영역 (.content) */
/* 보통 여기가 padding을 가지고 있어서 스크롤이 생깁니다 */
.content {
    flex: 1 !important;
    height: 100vh !important; /* 부모 높이 상속 */
    overflow: hidden !important; /* 스크롤 금지! */
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important; /* 패딩 때문에 스크롤 생기는 것 방지 */
}

/* 우리가 만든 페이지 래퍼 */
.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 10px; /* 🔥 기존 20px에서 위아래 여백을 10px로 줄임 */
    box-sizing: border-box;
}

/* =========================================
   1. 전역 변수 (Dark Mode Palette)
   ========================================= */
:root {
    /* 레이아웃 크기 */
    --header-height: 70px;
    --sidebar-width: 250px;
    --transition-speed: 0.3s;
    /* 배경 색상 */
    --bg-page: #000000; /* 전체 배경: 완전 블랙 */
    --bg-card: #121212; /* 카드/사이드바: 다크 그레이 */
    --bg-hover: #1E1E1E; /* 호버 색상 */
    /* UI 요소 배경 */
    --table-header-bg: #1E1E1E;
    --input-bg: #121212;
    --shadow-color: rgba(255,255,255,0.05);
    /* 텍스트 색상 */
    --text-main: #FFFFFF; /* 메인: 흰색 */
    --text-sub: #B0B0B0; /* 보조: 밝은 회색 */
    --text-muted: #6E6E6E; /* 흐린 텍스트 */
    --text-placeholder: #9CA3AF; /* 입력창 힌트 */
    /* 포인트 컬러 */
    --border-color: #333333; /* 테두리 */
    --primary-color: #00BFFF; /* 포인트: 네온 블루 */
    /* 상태 컬러 */
    --success-color: #00E676;
    --warning-color: #FFEA00;
    --error-color: #FF5252;
}

/* =========================================
   2. 기본 설정 & 레이아웃 구조 (핵심)
   ========================================= */
html, body {
    font-family: 'Pretendard', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg-page) !important;
    color: var(--text-main) !important;
    height: 100%;
    margin: 0;
    overflow: hidden; /* 바깥 스크롤 방지 */
}

/* 전체 페이지 래퍼 */
.page-container {
    height: 100vh;
    overflow: hidden;
    max-width: 100%;
}


/* 페이지 내부 컨텐츠 (검색창 + 테이블) */
.page-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 내부 스크롤 샘 방지 */
    max-width: 100%;
}

/* 대시보드 카드 */
.dashboard-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    overflow: hidden !important; /* 스크롤은 자식에게 */

    max-width: 100%;
}

/* [핵심] 테이블 스크롤 컨테이너 (남은 공간 차지) */
.table-scroll-container {
    flex: 1; /* 남은 공간 꽉 채우기 */
    min-height: 0; /* Flex 자식 스크롤 필수 설정 */
    overflow-y: auto; /* 세로 스크롤은 여기서만 발생 */
    overflow-x: auto; /* 가로 스크롤 필요시 */
    margin-bottom: 20;
}

.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* 화면 제일 위로 오도록 */
}

/* 팝업창 본체 */
.custom-modal-content {
    background-color: #1e1e1e; /* 다크 그레이 배경 */
    border: 1px solid #333;
    padding: 24px;
    border-radius: 12px;
    width: 350px;
    max-width: 90%;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* 리스트 스타일 제거 및 여백 조정 */
.download-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

    .download-list li {
        margin-bottom: 10px;
    }

    /* 다운로드 버튼(링크) 디자인 */
    .download-list a {
        display: block;
        padding: 12px 16px;
        background-color: #2a2a2a;
        border: 1px solid #444;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.2s;
    }

        .download-list a:hover {
            background-color: #3a3a3a;
            border-color: #1a73e8; /* 호버 시 파란색 테두리 */
        }

.link-title {
    color: #1a73e8; /* 파란색 강조 */
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 4px;
}

.link-desc {
    color: #888;
    font-size: 12px;
}

/* 하단 닫기 버튼 */
.btn-close-modal {
    width: 100%;
    padding: 12px;
    background-color: #444;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-close-modal:hover {
        background-color: #555;
    }
.history-panel-container {
    width: 100%;
    box-sizing: border-box;
    margin-top: 2px; /* 여백 축소 */
    text-align: left;
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 6px 12px; /* 🔥 기존 15px에서 대폭 축소 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    color: #e0e0e0;
    position: relative;
    z-index: 10;
}

.history-chips-grid {
    display: flex;
    flex-wrap: nowrap !important; /* 가로 한줄 고정 */
    gap: 4px; /* 🔥 칩 사이 간격 축소 */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 2px;
    scrollbar-width: thin;
}
    /* Chrome, Edge, Safari 커스텀 가로 스크롤바 */
    .history-chips-grid::-webkit-scrollbar {
        height: 5px;
    }

    .history-chips-grid::-webkit-scrollbar-track {
        background: transparent;
    }

    .history-chips-grid::-webkit-scrollbar-thumb {
        background: #555;
        border-radius: 2px;
    }

        .history-chips-grid::-webkit-scrollbar-thumb:hover {
            background: #777;
        }

/* 3. 개별 검색어 칩이 찌그러지지 않게 방어 */
.history-chip {
    display: inline-flex;
    align-items: center;
    background-color: #2d2d2d;
    border: 1px solid #444;
    border-radius: 2px;
    padding: 4px 8px; /* 🔥 기존 8px 12px에서 대폭 축소 */
    cursor: pointer;
    transition: all 0.2s;
    font-size: 10px; /* 🔥 폰트 14px -> 12px */
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

    .history-chip:hover {
        border-color: #00c853;
        color: #00c853;
        background-color: #383838;
        transform: translateY(-1px);
    }

.keyword-text {
    font-weight: 600;
    margin-right: 4px;
}

.chip-suffix {
    font-size: 11px; /* 🔥 폰트 축소 */
    color: #aaa;
    margin-right: 6px;
}

/* =========================================
   3. 사이드바 (Sidebar)
   ========================================= */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-image: none !important;
    background-color: var(--bg-card) !important;
    border-right: 1px solid #333333 !important;
}

.nav-menu {
    flex-grow: 1;
}

.sidebar .nav-item,
.sidebar .nav-item a {
    color: var(--text-sub) !important;
    text-decoration: none;
}

    .sidebar .nav-item:hover,
    .sidebar .nav-item a:hover {
        background-color: var(--bg-hover) !important;
        color: var(--text-main) !important;
    }

    .sidebar .nav-item.active,
    .sidebar .nav-item a.active {
        background-color: rgba(0, 191, 255, 0.15) !important;
        color: var(--primary-color) !important;
    }

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background-color: rgba(0,0,0,0.2);
    text-align: center;
    flex-shrink: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    align-items: center;
}

.footer-link {
    font-size: 12px;
    color: var(--text-sub);
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
    padding: 2px 0;
}

    .footer-link:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }

.copyright {
    margin: 0;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

/* =========================================
   4. 상단 헤더 & 로그인 UI
   ========================================= */
.top-row {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 3.5rem;
    z-index: 100;
}

    .top-row a {
        color: var(--text-main) !important;
    }

/* 로그인 표시 컨테이너 */
.login-display-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-name {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
}

.profile-img, .profile-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-img {
    border: 2px solid var(--primary-color);
}

.profile-placeholder {
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid var(--border-color);
}

.btn-login-header {
    background-color: var(--primary-color);
    color: #000;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    transition: transform 0.2s;
}

    .btn-login-header:hover {
        background-color: #00E676;
        color: #000;
        transform: scale(1.05);
    }

.btn-logout-header {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px;
    display: flex;
    align-items: center;
}

    .btn-logout-header:hover {
        color: #ff5252;
    }

/* =========================================
   5. 검색바 & 필터 UI
   ========================================= */
.search-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-card); /* 겹침 방지 */
}

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

.search-input {
    flex: 1;
    background: #121212;
    border: 1px solid #333;
    color: white;
    padding: 0 15px;
    height: 45px;
    border-radius: 4px 0 0 4px;
}

.search-btn {
    background: var(--primary-color);
    border: none;
    width: 50px;
    cursor: pointer;
}

.filter-settings-btn {
    background: #121212;
    border: 1px solid #333;
    border-left: none;
    color: #aaa;
    width: 50px;
    cursor: pointer;
}

    .filter-settings-btn:hover {
        background-color: var(--bg-hover) !important;
        color: var(--text-main);
    }

.filter-bar {
    padding-bottom: 8px; /* 🔥 여백 축소 */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    margin-top: 10px; /* 🔥 기존 20px에서 10px로 축소 */
    margin-bottom: 10px; /* 🔥 기존 15px에서 10px로 축소 */
    align-items: center;
    flex-wrap: wrap;
}

.filter-chip {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    padding: 4px 10px; /* 🔥 버튼 크기 축소 */
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px; /* 🔥 폰트 축소 */
    color: var(--text-sub);
}

    .filter-chip.active {
        background: var(--primary-color) !important;
        color: #000 !important;
        border-color: var(--primary-color);
        font-weight: bold;
    }

/* =========================================
   6. 결과 테이블 (Data Table)
   ========================================= */
.result-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--text-main);
}

    /* 헤더 고정 (Sticky) */
    .result-table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: var(--table-header-bg) !important;
        color: var(--text-sub) !important;
        font-weight: 600;
        font-size: 13px;
        padding: 12px;
        border-bottom: 2px solid var(--border-color);
        text-align: center;
    }

    .result-table td {
        padding: 10px;
        vertical-align: middle;
        border-bottom: 1px solid var(--border-color);
        font-size: 14px;
        color: var(--text-main);
    }

        /* 컬럼별 정렬 및 스타일 */
        .result-table th:nth-child(3), .result-table td:nth-child(3) {
            text-align: left !important;
            width: auto !important;
        }

        /* 4~9번 열 왼쪽 정렬 */
        .result-table th:nth-child(n+4):nth-child(-n+9),
        .result-table td:nth-child(n+4):nth-child(-n+9) {
            text-align: left !important;
            padding-left: 10px !important;
        }

        /* 수치 데이터 (조회수, 구독자, 게시일) */
        .result-table td:nth-child(4),
        .result-table td:nth-child(5),
        .result-table td:nth-child(9) {
            font-size: 13px !important;
            letter-spacing: -0.5px;
            color: var(--text-sub);
        }

        /* 등급 데이터 (기여도, 성과도, 화제성) */
        .result-table td:nth-child(6),
        .result-table td:nth-child(7),
        .result-table td:nth-child(8) {
            font-size: 16px !important;
            font-weight: 800 !important;
        }

/* =========================================
   7. 검색 초기 화면 (Hero / Suggestions)
   ========================================= */
.empty-state-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 🔴 수직(위아래) 정중앙 정렬 */
    align-items: center; /* 🔴 수평(좌우) 정중앙 정렬 */
    flex: 1; /* 🔴 부모(.dashboard-card)의 남은 세로 공간을 모두 차지함 */
    height: 100%;
    width: 100%;
}

.hero-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-icon {
    font-size: 64px;
    color: var(--primary-color);
    margin-bottom: 15px;
    opacity: 0.9;
}

.hero-title {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

    .hero-title .highlight {
        color: var(--primary-color);
        background: linear-gradient(90deg, var(--primary-color), #00E676);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.hero-subtitle {
    font-size: 16px;
    color: var(--text-sub);
    line-height: 1.6;
}

.suggestion-section {
    margin-bottom: 50px;
    width: 100%;
    max-width: 600px;
}

.section-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 15px;
    font-weight: 600;
}

.keyword-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.keyword-chip {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-sub);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .keyword-chip:hover {
        background-color: var(--primary-color);
        color: #000;
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
    }

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 800px;
}

.tip-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 12px;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: background-color 0.2s;
}

    .tip-card:hover {
        background-color: var(--bg-card);
    }

.tip-icon {
    font-size: 24px;
    color: var(--text-muted);
}

.tip-text {
    display: flex;
    flex-direction: column;
}

    .tip-text strong {
        font-size: 14px;
        color: var(--text-main);
        margin-bottom: 4px;
    }

    .tip-text span {
        font-size: 12px;
        color: var(--text-sub);
        line-height: 1.4;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* =========================================
   8. 유틸리티 (로딩, 툴팁, 텍스트)
   ========================================= */
/* 로딩바 */
.loading-bar {
    background: var(--bg-page);
    color: var(--primary-color);
    text-align: right;
    padding: 5px;
    font-size: 12px;
}

.loading-container {
    padding: 50px;
    text-align: center;
    color: var(--text-sub);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* 텍스트 컬러 유틸리티 */
.text-great {
    color: #00E676 !important;
    font-weight: 800;
}

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

.text-normal {
    color: #B0B0B0 !important;
    font-weight: 500;
}

.text-bad {
    color: #FF5252 !important;
    font-weight: 700;
}

/* MudBlazor 강제 다크모드 */
.mud-paper {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* 툴팁 (Tooltip) */
.tt {
    position: relative;
    display: inline-block;
    cursor: help;
}

    .tt .tt-box {
        position: absolute;
        left: 50%;
        top: calc(100% + 8px);
        transform: translateX(-50%);
        white-space: nowrap;
        padding: 8px 10px;
        border-radius: 8px;
        background: rgba(20,20,20,0.95);
        color: #fff;
        font-size: 12px;
        line-height: 1.3;
        border: 1px solid rgba(255,255,255,0.15);
        box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .12s ease, transform .12s ease;
        z-index: 999999;
    }

    .tt:hover .tt-box {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(2px);
    }

    .tt.tt-right .tt-box {
        left: auto;
        right: 0;
        transform: none;
    }

    .tt.tt-right:hover .tt-box {
        transform: translateY(-2px);
    }

    .tt.tt-left .tt-box {
        left: 5%;
        transform: none;
    }

    .tt.tt-left:hover .tt-box {
        transform: translateY(-2px);
    }

/* 스크롤바 커스텀 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.premium-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.7); /* 반투명 다크 배경 */
    backdrop-filter: blur(3px); /* 뒤에 있는 칩들을 흐리게 만듦 */
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

    .premium-lock-overlay:hover {
        background: rgba(18, 18, 18, 0.85);
    }

    .premium-lock-overlay .lock-icon {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .premium-lock-overlay .lock-text {
        color: var(--primary-color);
        font-weight: bold;
        font-size: 13px;
    }