:root {
            --bg-color: #010306;
            --card-bg: #030812;
            --accent: #003366;
            --accent-bright: #3385ff;
            --accent-glow: rgba(0, 51, 102, 0.7);
            --text-main: #f0faff;
            --text-sub: #5c7285;
            --border: #0a1425;
        }

        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: 20px;
            display: flex; justify-content: center; align-items: flex-start; 
            min-height: 100vh; box-sizing: border-box;
        }

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

        .card { 
            background: var(--card-bg); 
            border-radius: 12px; padding: 20px; 
            border: 1px solid var(--border); 
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        /* 상단 헤더 박스 스타일 */
        .header-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            background: linear-gradient(145deg, #051020, #02050a);
        }

        /* 제목과 설명을 묶는 컨테이너 */
.title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* 텍스트 넘침 방지 */
}

.page-title {
    margin: 0;
    font-size: 20px;
    color: var(--accent-bright);
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* 추가된 보조 설명 스타일 */
.page-desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-sub);
    opacity: 0.9;
    line-height: 1.4;
}

        /* 버튼 스타일 */
        .btn {
            display: inline-flex;
            align-items: center;
            padding: 8px 14px;
            background: #0a1a30;
            border-radius: 6px;
            color: var(--text-main);
            text-decoration: none;
            font-size: 13px;
            border: 1px solid var(--accent);
            transition: 0.3s;
            white-space: nowrap;
        }
        .btn:hover {
            background: var(--accent-bright);
            border-color: var(--accent-bright);
            color: #fff;
        }

        /* 메인 콘텐츠 영역 */
        .content-card { min-height: 300px; }
        h2 { 
            font-size: 15px; margin-top: 0; 
            color: var(--text-sub); 
            border-bottom: 1px solid var(--border); 
            padding-bottom: 10px; margin-bottom: 15px; 
            text-transform: uppercase; 
        }

/* 스크롤바 전체 */
::-webkit-scrollbar {
    width: 8px;
}

/* 스크롤바 막대 */
::-webkit-scrollbar-thumb {
    background: var(--accent); /* 설정하신 남색 */
    border-radius: 10px;
}

/* 스크롤바 배경 */
::-webkit-scrollbar-track {
    background: var(--card-bg);
}
/* 셀렉트 박스 스타일링 */
#date-selectors select {
    background-color: var(--card-bg, #1e1e1e); /* 배경색: 카드 배경색 혹은 어두운색 */
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-main); /* 글씨색: 메인 글씨색 */
    cursor: pointer;
    outline: none;
    appearance: none; /* 브라우저 기본 화살표 스타일 제거 (선택사항) */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C/polyline%3E%3C/svg%3E"); /* 커스텀 화살표 아이콘 */
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 30px; /* 화살표 공간 확보 */
}

/* 선택 목록(Option) 스타일링 - 브라우저마다 제약이 있지만 배경색 지정 가능 */
#date-selectors select option {
    background-color: #2a2a2a; /* 목록의 배경색 */
    color: #ffffff; /* 목록의 글자색 */
}

#date-selectors select:hover {
    border-color: var(--text-sub);
}
        /* 모바일 대응 */
        @media (max-width: 900px) {
    .header-box { 
        flex-direction: row; /* 가로 배열 유지 */
        align-items: center; 
        padding: 15px; 
    }
    .page-title { font-size: 17px; }
    .page-desc { font-size: 11px; } /* 모바일에서 설명 크기 축소 */
    .btn { padding: 6px 10px; font-size: 12px; }
}