/* =========================================================================
   통계 페이지(stat_*.php) 공통 스타일
   - stat_age / stat_generation / stat_bdyear / stat_adopt /
     stat_grouptotalqty / stat_name / stat_spouse 가 전부 이 파일 하나를 씁니다.
   - 새 통계 페이지를 추가할 때도 이 클래스들만 재사용하면 자동으로 통일됩니다.
   ========================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: #f4f4f4;
    font-family: '맑은 고딕', 'Malgun Gothic', sans-serif;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

a:link, a:visited { color: #000; text-decoration: none; }
a:hover { color: #cc0000; }

/* 페이지 전체를 감싸는 컨테이너 */
.container {
    max-width: 900px;
    width: 95%;
    margin: 0 auto 20px auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 상단 타이틀 */
.title { padding: 15px 0; text-align: center; }
.title span { font-size: 22px; font-weight: bold; color: #333; display: block; }

/* 통계 메뉴 탭 (오렌지 바) */
.nav-table { width: 100%; background-color: orange; border-collapse: collapse; }
.nav-table td { padding: 12px 5px; text-align: center; line-height: 1.9; }
.nav-table a { font-size: 11pt; font-weight: bold; color: #000; }
.nav-table a.active { text-decoration: underline; color: #333; }

/* 본문 영역 */
.content { padding: 20px; }

.section-header {
    text-align: center;
    padding: 10px 0 20px 0;
    font-weight: bold;
    font-size: 12pt;
    color: #333;
}
.section-header .hl { color: #0066cc; }

/* 검색/입력 폼 공통 */
.search-box {
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
}
.search-box select,
.search-box input[type="text"] {
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: middle;
}
.search-box input[type="submit"],
.search-box input[type="image"] {
    padding: 6px 14px;
    font-size: 13px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    vertical-align: middle;
}
.search-box p { margin-top: 10px; font-size: 11px; color: #666; }

/* 가로로 넘칠 수 있는 표를 감싸는 래퍼 -> 모바일에서 좌우 스크롤 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
}

/* 통계 표 공통 스타일 */
.stat-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.stat-table th {
    background-color: #EBEBEB;
    border: 1px solid #ddd;
    padding: 10px;
    font-size: 11pt;
    white-space: nowrap;
}
.stat-table td {
    border: 1px solid #eee;
    padding: 8px;
    text-align: center;
    font-size: 11pt;
}
.stat-table tr:nth-child(even) td { background-color: #fafafa; }

.bg-total  { background-color: #EBEBEB !important; font-weight: bold; }
.bg-grand  { background-color: #FDE5E5 !important; font-weight: bold; }
.bg-sum    { background-color: #F0F8FF !important; font-weight: bold; }
.txt-blue  { color: #0066cc; }
.txt-red   { color: #cc0000; }

/* 두 표를 나란히 놓는 레이아웃 (이름통계/사돈통계 등) */
.flex-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.flex-container > div { flex: 1; min-width: 280px; }

/* 하단 총계 박스 */
.footer-stat {
    margin-top: 20px;
    text-align: center;
    background-color: #f0faff;
    padding: 14px;
    font-size: 11pt;
    font-weight: bold;
    border: 1px solid #d0eaff;
    border-radius: 4px;
}

/* 페이징 */
.pagination { text-align: center; padding: 15px 0; font-size: 11pt; }
.pagination a { margin: 0 4px; font-weight: bold; }
.pagination b { color: #cc0000; margin: 0 4px; }
.pagination .disabled { color: #ccc; }

/* 모바일 대응 */
@media (max-width: 600px) {
    .title span { font-size: 18px; }
    .nav-table a { font-size: 10pt; }
    .stat-table th, .stat-table td { font-size: 10pt; padding: 6px 4px; }
    .search-box input[type="text"] { width: 100px; }
    .flex-container { flex-direction: column; }
}