@charset "UTF-8";

/* 기본 스타일 */
body {
    background-color: #525659; /* 뷰어 배경 (어두운 회색) */
    margin: 0;
    padding: 20px 0;
    font-family: 'Malgun Gothic', 'Dotum', sans-serif;
    color: #333;
}

/* 툴바 */
.rpt-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.toolbar-title { font-weight: bold; font-size: 18px; }
.toolbar-btns button {
    background: #fff; border: none; padding: 5px 15px; cursor: pointer; border-radius: 4px; font-weight: bold;
}
.toolbar-btns button:hover { background: #eee; }
.btn-print { color: #007bff; margin-right: 10px; }

/* A4 페이지 레이아웃 */
.report-container {
    margin-top: 60px; /* 툴바 높이 고려 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.report-page {
    background: #fff;
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    position: relative;
    page-break-after: always; /* 인쇄 시 페이지 나눔 */
}

/* 표지 스타일 */
.cover-wrapper { text-align: center; margin-top: 50mm; }
.cover-top-text { font-size: 24pt; margin-bottom: 20mm; font-weight: bold; line-height: 1.4; }
.cover-doc-no { font-size: 14pt; margin-bottom: 30mm; border-bottom: 2px solid #333; display: inline-block; padding: 0 20px 10px 20px;}
.cover-title { font-size: 36pt; font-weight: bold; margin: 30mm 0; line-height: 1.2; word-break: keep-all; }
.cover-info { margin-top: 60mm; font-size: 14pt; }
.cover-logo { margin-top: 20mm; font-size: 22pt; font-weight: bold; color: #1a73e8; }
.cover-requestor { margin-top: 10mm; font-size: 12pt; color: #666; }

/* 섹션 공통 */
.section-title { font-size: 22pt; font-weight: bold; text-align: center; margin-bottom: 15mm; }
.sub-title { font-size: 16pt; font-weight: bold; margin-bottom: 5mm; border-left: 5px solid #007bff; padding-left: 10px; }

/* 테이블 */
.rpt-table { width: 100%; border-collapse: collapse; margin-bottom: 10mm; font-size: 11pt; table-layout: fixed; }
.rpt-table th, .rpt-table td { border: 1px solid #999; padding: 8px; text-align: center; vertical-align: middle; word-wrap: break-word;}
.rpt-table th { background: #f2f2f2; font-weight: bold; }
.rpt-table td.right { text-align: right; }
.small-text { font-size: 9pt; }

/* 지도 및 차트 박스 */
.rpt-map-box { width: 100%; height: 450px; border: 1px solid #ccc; background: #eee; margin-bottom: 5px; }
.rpt-chart-box { width: 100%; height: 300px; }

/* 레이아웃 분할 */
.layout-split { display: flex; gap: 20px; }
.left-panel { flex: 1; }
.right-panel { flex: 1; display: flex; align-items: center; justify-content: center;}

.caption { font-size: 10pt; color: #666; margin-top: 0; text-align: right; }
.summary-text-area { border: 1px solid #ccc; padding: 20px; min-height: 200px; font-size: 12pt; line-height: 1.6; }

/* 로딩 */
.rpt-loading { position: fixed; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; text-align:center; z-index:10000; }

/* ==========================================================================
   [Print Style] PDF 저장/인쇄 최적화
   ========================================================================== */
@media print {
    /* 1. 브라우저 기본 여백 제거 및 A4 사이즈 고정 */
    @page {
        size: A4 portrait; /* A4 세로 설정 */
        margin: 0; /* 브라우저 헤더/푸터 및 기본 여백 제거 */
    }

    html, body {
        width: 210mm;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact; /* 배경색/그래픽 강제 출력 */
        print-color-adjust: exact;
    }

    /* 2. 인쇄 시 숨길 요소들 */
    #rptToolbar, 
    #reportLoading, 
    .btn-print, 
    .btn-close,
    ::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. 보고서 컨테이너 설정 */
    #reportContainer {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 4. 개별 페이지 강제 분할 (핵심) */
    .report-page {
        width: 210mm !important;       /* A4 너비 */
        height: 296mm !important;      /* A4 높이 (297mm에서 미세 오차 1mm 제외) */
        
        box-sizing: border-box;
        margin: 0 !important;
        padding: 40px !important;      /* 내부 콘텐츠 여백 */
        
        page-break-after: always;      /* 페이지 끝에서 무조건 자름 */
        break-after: page;             /* 최신 브라우저용 */
        
        overflow: hidden;              /* 내용이 넘치면 잘라버림 (밀림 방지) */
        border: none !important;       /* 화면용 테두리 제거 */
        position: relative;
        background-color: #fff !important;
    }

    /* 5. 마지막 페이지 뒤에 빈 페이지 생기는 것 방지 */
    .report-page:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
        margin-bottom: 0 !important;
    }
    
    /* 6. 지도/차트 강제 크기 고정 (깨짐 방지) */
    .rpt-map-box, .chart-container, .green-map-box {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
/* [추가/수정] 인쇄 시 지도 박스 크기 강제 고정 */
    .rpt-map-box {
        width: 100% !important;
        height: 450px !important; /* 화면과 동일한 높이 강제 */
        break-inside: avoid;      /* 페이지 분절 방지 */
        page-break-inside: avoid;
        border: 1px solid #ccc;   /* 테두리 유지 */
        overflow: hidden;         /* 넘치는 이미지 숨김 */
    }

    /* 이미지 강제 맞춤 */
    .rpt-map-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important; /* 박스 크기에 딱 맞게 늘림 (뷰어 비율을 맞췄다면 왜곡 없음) */
    }
}

/* 격차 분석 테이블용 유틸리티 */
.rpt-table.small-text th, 
.rpt-table.small-text td { font-size: 12px; padding: 6px 4px; }
.al-l { text-align: left !important; padding-left: 10px !important; }
.al-r { text-align: right !important; padding-right: 10px !important; }
.txt-red { color: #d32f2f; }
.txt-blue { color: #1976d2; }

/* =========================================
   [1] 표지 (Cover Page) 디자인 개선
   ========================================= */
.report-page.cover-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 80px 50px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); /* 은은한 배경 */
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
}

/* 상단 장식 바 */
.cover-top-deco {
    width: 100px;
    height: 5px;
    background-color: #004ea2; /* 인천시 블루 */
    margin-bottom: 40px;
}

.cover-header-info {
    text-align: right;
    width: 100%;
    font-size: 14px;
    color: #666;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 100px;
}

.cover-title-box {
    text-align: center;
    margin-bottom: auto; /* 중앙 정렬을 위해 밀어내기 */
}

.cover-title-main {
    font-size: 42px;
    font-weight: 700;
    color: #111;
    letter-spacing: -1px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.cover-title-sub {
    font-size: 20px;
    color: #555;
    font-weight: 400;
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.cover-title-sub::before, .cover-title-sub::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: #999;
}
.cover-title-sub::before { left: -20px; }
.cover-title-sub::after { right: -20px; }

.cover-footer {
    text-align: center;
    width: 100%;
    margin-top: 100px;
}

.cover-date {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
}

.cover-logo-area {
    margin-bottom: 20px;
}

.cover-requestor {
    font-size: 16px;
    color: #444;
    border-top: 1px solid #ccc;
    display: inline-block;
    padding: 15px 40px;
}


/* =========================================
   [2] 요약문 (Summary Page) 디자인 개선
   ========================================= */
.summary-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

/* 요약문 - 섹션 타이틀 */
.sum-sec-title {
    font-size: 18px;
    font-weight: 700;
    color: #004ea2;
    border-left: 4px solid #004ea2;
    padding-left: 10px;
    margin-bottom: 10px;
    background-color: #f4f8fb;
    padding: 8px 10px;
}

/* 요약문 - 그리드 레이아웃 */
.sum-grid-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}
.sum-col-half { flex: 1; }

/* 요약문 - 카드 스타일 */
.sum-card {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* 요약문 - 데이터 테이블 (Compact) */
.sum-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sum-table th {
    background: #f7f7f7;
    color: #555;
    padding: 6px 10px;
    text-align: left;
    width: 30%;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}
.sum-table td {
    padding: 6px 10px;
    color: #333;
    border-bottom: 1px solid #eee;
}
.sum-table tr:last-child th, .sum-table tr:last-child td { border-bottom: none; }

/* 요약문 - 하이라이트 숫자 */
.big-stat-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.stat-item { text-align: center; }
.stat-label { font-size: 12px; color: #666; display: block; margin-bottom: 5px; }
.stat-value { font-size: 20px; font-weight: 800; color: #004ea2; }
.stat-unit { font-size: 12px; font-weight: normal; color: #888; }

/* 녹지 분석 비교 맵 스타일 */
.green-compare-wrap {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.green-map-col {
    flex: 1;
    border: 1px solid #ccc;
}
.green-map-header {
    text-align: center;
    padding: 8px;
    font-weight: bold;
    color: #fff;
    font-size: 14px;
}
/* 변경 전: 보라색 계열 */
.header-before { background-color: #7B68EE; }
/* 변경 후: 연두색/녹색 계열 */
.header-after { background-color: #66BB6A; }

.green-map-box {
    width: 100%;
    height: 350px; /* 지도 높이 */
    background: #f0f0f0;
}

/* 비활성화 상태 (로딩 중) */
.btn-print:disabled {
    background-color: #ccc;
    border-color: #bbb;
    color: #666;
    cursor: not-allowed;
    opacity: 0.8;
}

/* 활성화 상태 */
.btn-print {
    /* 기존 스타일 유지 */
    transition: all 0.3s;
}

/* 로딩 완료 시 강조 효과 */
.btn-print.ready {
    background-color: #004ea2; /* 인천시 블루 */
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 78, 162, 0.5);
}

/* [신규] 공유 Cesium 뷰어 컨테이너 (화면 밖으로 숨김) */
#sharedCesiumContainer {
    position: fixed;
    top: 0;
    left: 200%; /* 화면 오른쪽 밖으로 내보냄 */
    width: 100%;
    height: 500px; /* 기본 높이 */
    z-index: -9999;
    visibility: visible; /* 렌더링을 위해 visible이어야 함 */
    overflow: hidden;
}

/* 캡처된 이미지가 들어갈 컨테이너 스타일 */
.captured-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* [보고서 공통 레이아웃] */
.rpt-page { page-break-after: always; padding: 20px; box-sizing: border-box; }
.rpt-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rpt-table th, .rpt-table td { border: 1px solid #ccc; padding: 5px; font-size: 13px; word-break: break-all; }
.rpt-table th { background-color: #f5f5f5; text-align: center; font-weight: bold; color: #333; }
.rpt-table td.center { text-align: center; }
.rpt-table td.align-left { text-align: left; }

/* [섹션 및 유틸리티] */
.section-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; text-align: center; }
.sub-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; border-left: 5px solid #004ea2; padding-left: 10px; }
.caption { font-size: 12px; color: #666; margin-top: 5px; text-align: right; }
.bg-gray { background-color: #eee; }
.text-red { color: #d7191c; }
.text-blue { color: #2b83ba; }
.text-green { color: #008000; }
.text-bold { font-weight: bold; }

/* [플렉스 박스 & 지도 레이아웃] */
.rpt-flex-row { display: flex; gap: 10px; width: 100%; }
.rpt-flex-col { display: flex; flex-direction: column; flex: 1; border: 1px solid #ccc; }
.rpt-map-box { width: 100%; height: 100%; min-height: 400px; flex: 1; }
.rpt-map-header { background: #eee; padding: 5px; font-weight: bold; text-align: center; border-bottom: 1px solid #ccc; }
.rpt-scroll-box { max-height: 150px; overflow-y: auto; margin-bottom: 10px; border-bottom: 1px solid #ccc; }

/* [범례(Legend) 스타일] */
.legend-wrap { display: flex; gap: 10px; margin-top: 10px; font-size: 11px; }
.legend-table { flex: 1; }
.legend-table td { height: 20px; padding: 2px; text-align: center; border: 1px solid #ddd; font-weight: bold; color: #fff; }
.legend-item { color: #333 !important; text-align: left !important; padding-left: 10px !important; }

/* [범례 색상 유틸리티] */
.bg-lv1 { background: #d7191c; } /* 높음/초과 */
.bg-lv2 { background: #fec980; }
.bg-lv3 { background: #ff7f00; }
.bg-lv4 { background: #ffd400; }
.bg-lv5 { background: #c7e8ad; }
.bg-lv6 { background: #80bfab; }
.bg-lv7 { background: #2b83ba; } /* 낮음/미만 */
.bg-gray-dark { background: #808080; }
.bg-gray-light { background: #C0C0C0; }

/* [표지(Cover) 스타일 - 수정본] */
.cover-page { 
    position: relative; 
    height: 900px; /* A4 비율에 맞춰 고정 높이 지정 권장 (또는 100%) */
    padding: 40px; 
    box-sizing: border-box; 
    border: 3px double #333; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; /* 상-중-하 분산 배치 */
}

.cover-header-info { 
    text-align: right; 
    font-size: 14px; 
    color: #666;
}

.cover-title-box { 
    text-align: center; 
    margin: 20px 0; 
    padding: 40px 20px; 
    border-top: 2px solid #333; 
    border-bottom: 2px solid #333; 
}

.cover-title-main { 
    font-size: 32px; 
    font-weight: 900; 
    margin-bottom: 20px; 
    line-height: 1.3; 
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

.cover-title-sub { 
    font-size: 18px; 
    color: #555; 
}

.cover-footer { 
    text-align: center; 
    margin-bottom: 20px;
}

.cover-date {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
}

.cover-logo-area {
    margin-bottom: 30px;
}

.cover-logo-title { 
    color: #004ea2; 
    font-weight: 800; 
    font-size: 28px; 
    margin: 0; 
    letter-spacing: 5px;
}

.cover-logo-sub { 
    font-size: 12px; 
    color: #888; 
    margin-top: 5px; 
    text-transform: uppercase;
}

.cover-requestor { 
    font-size: 15px; 
    font-weight: bold; 
    color: #333;
}