/* 기본 스타일 */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f4f7f9; margin: 0; padding: 20px; }
.container { max-width: 1400px; margin: 0 auto; background-color: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }

/* 상단 네비게이션 */
.top-nav { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #e9ecef; }
.top-nav a { margin-right: 15px; text-decoration: none; color: #007bff; font-weight: 500; }
.top-nav a:hover { text-decoration: underline; }

/* 헤더 */
.main-header { text-align: center; margin-bottom: 30px; }
.main-header h1 { color: #212529; }
.main-header p { color: #6c757d; font-size: 1.1em; }

/* 탭 스타일 */
.tab-buttons { display: flex; border-bottom: 2px solid #dee2e6; }
.tab-button { flex: 1; padding: 15px; border: none; background: none; font-size: 18px; font-weight: 600; cursor: pointer; color: #6c757d; transition: all 0.2s ease-in-out; border-bottom: 3px solid transparent; }
.tab-button:hover { color: #007bff; }
.tab-button.active { color: #007bff; border-bottom-color: #007bff; }
.tab-content { padding-top: 25px; }

/* 통계 레이아웃 */
.stats-layout { display: flex; gap: 30px; }
.filter-panel { flex: 0 0 280px; }
.display-panel { flex: 1; }

.filter-group { margin-bottom: 20px; }
.filter-group h3 { font-size: 16px; margin-bottom: 10px; border-bottom: 2px solid #eee; padding-bottom: 5px; }
.filter-group label { display: block; margin-bottom: 5px; }

/* 요약 카드 */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { background-color: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #e9ecef; }
.stat-card .value { font-size: 2.5rem; font-weight: 700; color: #007bff; }
.stat-card .label { font-size: 1rem; color: #6c757d; margin-top: 5px; }

/* 차트 컨테이너 */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.chart-container { background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e9ecef; }

/* 로딩 스피너 */
.loading-spinner { border: 5px solid #f3f3f3; border-top: 5px solid #007bff; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 50px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ... (기존의 모든 CSS 스타일) ... */

/* 로딩 스피너 */
.loading-spinner { border: 5px solid #f3f3f3; border-top: 5px solid #007bff; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 50px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* --- 아래 스타일 추가 --- */
.filter-select { 
    width: 100%; 
    padding: 8px; 
    margin-bottom: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    background-color: #fff;
}

.apply-btn { 
    width: 100%; 
    padding: 12px; 
    border: none; 
    background-color: #007bff; 
    color: white; 
    font-size: 16px; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: background-color 0.2s;
}

.apply-btn:hover { 
    background-color: #0056b3; 
}