/* 공통 스타일 및 폰트 */
body { 
    background-color: #f4f6f9; 
    padding: 0; 
    font-family: 'Pretendard', -apple-system, sans-serif; 
    color: #333;
}

.container { max-width: 1500px; }

/* 타이포그래피 */
.fw-bold { font-weight: 700 !important; }
.fs-7 { font-size: 0.85rem !important; }
.display-5 { font-size: 2.8rem; letter-spacing: -1.5px; }

/* 내비게이션 바 */
.navbar { padding: 10px 0; }
.navbar-brand { font-size: 1.4rem; letter-spacing: -1px; color: #0d6efd !important; }

/* 카드 공통 스타일 */
.card { 
    border-radius: 12px; 
    border: none; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; 
    overflow: hidden;
}

/* 하이라이트 요약 카드 (애니메이션 강화) */
.highlight-card { 
    background: white; 
    border-left: 6px solid #0d6efd; 
    padding: 24px; 
    cursor: pointer; 
    height: 100%; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    border-radius: 12px;
}

.highlight-card:hover { 
    transform: translateY(-8px) scale(1.02); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important; 
}

.highlight-title { 
    font-size: 0.9rem; 
    color: #6c757d; 
    margin-bottom: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.highlight-value { 
    font-size: 1.1rem; 
    font-weight: 800; 
    line-height: 1.5; 
    color: #212529 !important;
}

.highlight-name { 
    color: #0d6efd; 
    font-weight: 800; 
}

/* 카드별 고유 색상 설정 */
.wealth-card { border-left-color: #0d6efd; }
.growth-card { border-left-color: #dc3545; }
.land-card { border-left-color: #ffc107; }
.building-card { border-left-color: #17a2b8; }

/* 테이블 스타일 강화 */
.table { font-size: 0.9rem; }
.table thead { 
    background-color: #e9ecef; 
    color: #333; 
    text-align: center; 
    font-size: 0.85rem; 
    font-weight: 700;
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(13, 110, 253, 0.015); }
.table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.04) !important; }

.clickable-name { 
    color: #0d6efd; 
    text-decoration: underline; 
    cursor: pointer; 
    font-weight: 600; 
    transition: 0.2s;
}
.clickable-name:hover { color: #004085; }

.text-right { text-align: right !important; }
.up { color: #dc3545; font-weight: bold; }
.down { color: #0d6efd; font-weight: bold; }

/* 통계 테이블 스타일 */
#districtStatTable { font-size: 0.85rem; }
#districtStatTable thead { font-size: 0.8rem; }
.text-success { color: #198754 !important; }

/* 상세 보기 모달 스타일 강화 */
#detail-section { 
    display: none; 
    margin-bottom: 30px; 
    border: 3px solid #0d6efd; 
    box-shadow: 0 10px 40px rgba(13, 110, 253, 0.1) !important;
}
.table-info-custom { background-color: #e7f1ff !important; font-weight: 700; font-size: 0.95rem; }

/* 로딩바 애니메이션 및 디자인 */
#loading { padding: 60px 0; border: 2px solid #e9ecef; }
.loading-text { font-size: 1.2rem; margin-top: 15px; color: #6c757d; }

/* 차트 디자인 */
.chart-container {
    margin-top: 10px;
}
/* 모바일에서는 차트 높이를 더 높게 잡아서 글자가 겹치지 않게 합니다 */
@media (max-width: 768px) {
    .chart-container { height: 800px !important; }
}

/* 모바일 전용 스타일 (화면 너비 768px 이하일 때 적용) */
@media (max-width: 768px) {
    /* 1. 메인 타이틀 크기 축소 */
    .display-5 {
        font-size: 2.2rem;
        letter-spacing: -1px;
    }
    .fs-5 {
        font-size: 1.1rem !important;
    }

    /* 2. 하이라이트 카드 패딩 축소 및 줄바꿈 */
    .highlight-card {
        padding: 15px;
    }
    .highlight-value {
        font-size: 1rem;
    }

    /* 3. [핵심] 테이블 가로 스크롤 허용 */
    /* 부트스트랩의 .table-responsive를 모바일에서만 강화합니다 */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto; /* 가로 스크롤 생성 */
        -webkit-overflow-scrolling: touch; /* 부드러운 스크롤 */
    }

    /* 4. 테이블 내부 글자 크기 미세 조정 */
    .table {
        font-size: 0.8rem; /* 약간 더 작게 */
        min-width: 600px; /* 스크롤이 생기도록 최소 너비 지정 */
    }
    .table thead th {
        padding: 8px 4px;
    }

    /* 5. 분석 페이지 차트 높이 확대 */
    /* 모바일에서는 세로로 길어야 차트가 안 겹칩니다 */
    .chart-container {
        height: 800px !important;
    }

    /* [추가] 자치구 컬럼 너비 확보 (3글자까지 한 줄) */
    #analysisTable th:nth-child(1),
    #analysisTable td:nth-child(1) {
        min-width: 65px !important;
        text-align: center;
    }

    /* [추가] 성명 컬럼 너비 확보 (3글자까지 한 줄) */
    #analysisTable th:nth-child(3),
    #analysisTable td:nth-child(3) {
        min-width: 60px !important;
        text-align: center;
    }
}

/* --- style.css 맨 아래에 이 내용을 넣으세요 --- */

@media (max-width: 768px) {
    /* 1. 화면 너비에 맞게 전체 여백 조정 */
    .container { padding: 0 10px; }
    .display-5 { font-size: 1.8rem; }
    
    /* 2. [가장 중요] 테이블 셀 줄바꿈 절대 금지 */
    #analysisTable th, 
    #analysisTable td {
        white-space: nowrap !important; /* 이 코드가 모든 칸을 한 줄로 고정합니다 */
        word-break: keep-all !important;
        padding: 12px 10px !important;
        font-size: 0.85rem;
        vertical-align: middle;          /* 모바일 최적화 글자 크기 */
    }

    /* 3. 자치구와 성명 컬럼은 좀 더 눈에 띄게 */
    #analysisTable td:nth-child(1),
    #analysisTable td:nth-child(2) {
        min-width: 75px !important; /* '구의원' 세 글자가 여유 있게 들어가는 크기 */
        font-weight: 600;
        text-align: center;    /* 최소 너비를 넉넉히 확보 */
    }
    #analysisTable td:nth-child(3) {
        min-width: 120px !important; /* 성명 + 정당 배지 공간 확보 */
        text-align: left !important;
    }

    /* 4. 가로 스크롤 시 부드럽게 넘어가도록 */
    .table-responsive {
        overflow-x: auto !important;
        display: block;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* 5. 분석 페이지 차트 높이 조절 */
    .chart-container {
        height: 600px !important;
    }
}

/* 테이블 행에 마우스를 올렸을 때 효과 */
#analysisTable tbody tr {
    cursor: pointer; /* 마우스 커서가 손가락 모양으로 변경 */
    transition: background-color 0.2s ease;
}

#analysisTable tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05) !important; /* 연한 파란색 배경 */
}

/* 이름 강조 제거 (행 전체가 클릭되므로 중복 강조 피하기) */
.clickable-name {
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 768px) {
    #analysisTable td {
        padding: 12px 8px; /* 터치하기 좋게 상하 여백 확대 */
        font-size: 0.85rem;
    }
}

.border-bottom-dashed {
    border-bottom: 1px dashed #dee2e6;
}
.border-bottom-dashed:last-child {
    border-bottom: none;
}
.border-bottom-dashed:hover {
    background-color: #fff;
}