/* 기본 스타일 */
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); } }

/* 테이블 전체를 감싸는 컨테이너 */
.chart-container.full-width {
    background-color: #ffffff; /* 요청하신 흰색 배경 */
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e9ecef;
}

/* 스크롤을 위한 테이블 래퍼 */
.category-table-wrapper {
    width: 100%;
    max-height: 500px; /* 테이블이 길어질 경우 스크롤 생성 */
    overflow-y: auto;
}

/* 테이블 기본 스타일 */
.category-table {
    width: 100%;
    border-collapse: collapse; /* 테두리 한 줄로 합치기 */
}

/* 모든 셀(th, td) 공통 스타일 */
.category-table th,
.category-table td {
    padding: 12px 15px; /* 요청하신 패딩 적용 */
    text-align: center;
    border-bottom: 1px solid #e0e8f0; /* 셀 구분선 */
}

/* 테이블 헤더(제목 행) 스타일 */
.category-table thead th {
    background-color: #f0f7ff; /* 옅은 하늘색 배경 */
    color: #333;
    font-weight: 600;
    position: sticky;
    top: 0;
}

/* 테이블 본문(tbody)의 짝수 번째 행 배경색 */
.category-table tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* 가독성을 위한 옅은 회색 */
}

/* 마우스를 올렸을 때 행 스타일 */
.category-table tbody tr:hover {
    background-color: #e6f2ff; /* 하이라이트 효과 */
}

/* 첫 번째 열(카테고리명)은 왼쪽 정렬 */
.category-table th:first-child,
.category-table td:first-child {
    text-align: left;
    padding-left: 20px;
}

/* 테이블 푸터(합계 행) 스타일 */
.category-table tfoot td {
    font-weight: bold;
    background-color: #e9ecef;
    border-top: 2px solid #cdd7e1;
}