/* 繝ｬ繝昴・繝医・繝ｼ繧ｸ繧ｹ繧ｿ繧､繝ｫ */

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

body {
    font-family: 'Noto Sans JP', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* 繝倥ャ繝€繝ｼ */
.report-header {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    text-align: center;
}

.report-header h1 {
    color: #667eea;
    font-size: 32px;
    margin-bottom: 10px;
}

.analysis-date,
.session-id {
    color: #666;
    font-size: 14px;
    margin: 5px 0;
}

/* 繧ｵ繝槭Μ繝ｼ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ */
.summary-section {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.summary-section h2 {
    color: #667eea;
    font-size: 24px;
    margin-bottom: 15px;
}

.summary-content {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* 蝨ｰ轤ｹ繧ｫ繝ｼ繝・*/
.location-cards-section {
    margin-bottom: 30px;
}

.location-cards-section h2 {
    color: #667eea;
    font-size: 24px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.location-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* 霍晞屬蝨上ヶ繝ｭ繝・け・医ち繝門ｻ・ｭ｢蠕後・隕句・縺暦ｼ・*/
.radius-block {
    margin-top: 16px;
}

.radius-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 16px;
    padding: 0 10px;
    color: #444;
    font-size: 18px;
    font-weight: 700;
}

.radius-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 1;
}

.zone-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.zone-1km { background: #667eea; color: white; }
.zone-3km { background: #f5576c; color: white; }
.zone-5km { background: #00f2fe; color: #003a3f; }

.location-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.location-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.location-card .card-header {
    padding: 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-card.site-a .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.location-card.site-b .card-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.location-card.site-c .card-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.location-name {
    font-size: 20px;
    font-weight: bold;
}

.location-badge {
    background: rgba(255, 255, 255, 0.3);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
}

.card-body {
    padding: 20px;
}

.metric {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.metric:last-child {
    border-bottom: none;
}

.metric.highlight {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    margin: 10px 0;
    border-bottom: none;
}

.metric .label {
    color: #666;
    font-size: 14px;
}

.metric .value {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.population-number {
    font-size: 20px !important;
    color: #667eea !important;
}

.metric.trend .value.positive {
    color: #27ae60;
}

.metric.trend .value.negative {
    color: #e74c3c;
}

/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蜈ｱ騾・*/
section {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

section h2 {
    color: #667eea;
    font-size: 24px;
    margin-bottom: 20px;
}

/* 蝨ｰ蝗ｳ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ */
/* Leaflet蝨ｰ蝗ｳ縺ｯ縲悟､匁棧・郁ｧ剃ｸｸ逕ｨ・峨€阪→縲悟ｮ滉ｽ薙€阪ｒ蛻・￠繧・*/
.map-frame {
    border-radius: 8px;
    overflow: hidden;
}
.map-section #map {
    height: 500px;
}

/* 繧ｰ繝ｩ繝輔そ繧ｯ繧ｷ繝ｧ繝ｳ */
.chart-container {
    position: relative;
    height: 400px;
    margin: 20px 0;
}

.chart-container.compact {
    height: 260px;
}

/* 繧ｰ繝ｪ繝・ラ陦ｨ遉ｺ・亥ｰ・擂縺ｮ諡｡蠑ｵ逕ｨ縲ら樟迥ｶ縺ｯ荳ｻ縺ｫCSS莠呈鋤邯ｭ謖・ｼ・*/
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.chart-tile {
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 14px 14px 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.chart-title {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    margin: 0 0 8px;
}

/* 豈碑ｼ・｡ｨ */
.table-responsive {
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.comparison-table th,
.comparison-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.comparison-table th {
    background: #f8f9fa;
    color: #667eea;
    font-weight: 600;
}

.comparison-table .label-col {
    font-weight: 600;
    color: #555;
    background: #f8f9fa;
}

.comparison-table td.positive {
    color: #27ae60;
    font-weight: 600;
}

.comparison-table td.negative {
    color: #e74c3c;
    font-weight: 600;
}

/* 繝輔ャ繧ｿ繝ｼ */
.report-footer {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}

/* 繝ｬ繧ｹ繝昴Φ繧ｷ繝・*/
@media (max-width: 768px) {
    .location-cards {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 300px;
    }

    .comparison-table {
        font-size: 14px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 8px;
    }
}

/* =========================
   PDF/蜊ｰ蛻ｷ蜷代￠・井ｽ楢｣∵隼蝟・ｼ・   ========================= */
@media print {
    @page {
        size: A4;
        margin: 10mm;
    }

    body {
        background: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-family: 'Noto Sans JP', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .container {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* 蠖ｱ繝ｻ繝帙ヰ繝ｼ蜉ｹ譫懊・PDF縺ｧ縺ｯ荳崎ｦ・ｼ医↓縺倥∩/谿ｵ蟾ｮ縺ｮ蜴溷屏縺ｫ縺ｪ繧翫′縺｡・・*/
    section,
    .report-header,
    .summary-section,
    .location-card {
        box-shadow: none !important;
    }

    .location-card:hover {
        transform: none !important;
    }

    /* PDF縺ｧ縺ｮ謾ｹ繝壹・繧ｸ蟠ｩ繧悟ｯｾ遲厄ｼ医ヶ繝ｭ繝・け騾比ｸｭ縺ｧ蛻・ｌ縺ｪ縺・ｈ縺・↓縺吶ｋ・・*/
    section,
    .radius-block,
    .location-card,
    .chart-container,
    .table-responsive,
    #map {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* 菴咏區繧定ｩｰ繧√※6繝壹・繧ｸ縺ｫ蜿弱ａ繧・*/
    section {
        padding: 16px;
        margin-bottom: 14px;
        border-radius: 10px;
    }

    .report-header {
        padding: 18px;
        margin-bottom: 14px;
    }
    .report-header h1 {
        font-size: 22px;
    }
    section h2 {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .summary-content {
        font-size: 12px;
        line-height: 1.6;
    }

    /* =========================
       6繝壹・繧ｸ蝗ｺ螳壹Ξ繧､繧｢繧ｦ繝・       =========================
       1) 繧ｿ繧､繝医Ν + 繧ｵ繝槭Μ繝ｼ
       2) 蝨ｰ轤ｹ蛻･莠ｺ蜿｣繝・・繧ｿ・郁ｷ晞屬蝨丞挨・・       3) 蝨ｰ蝗ｳ + 霍晞屬蝨丞挨莠ｺ蜿｣豈碑ｼ・       4) 莠ｺ蜿｣謗ｨ遘ｻ豈碑ｼ・ｼ郁ｷ晞屬蝨丞挨・・       5) 蟷ｴ鮨｢讒区・謗ｨ遘ｻ・郁ｷ晞屬蝨丞挨・・       6) 隧ｳ邏ｰ豈碑ｼ・｡ｨ
    */
    .summary-section {
        break-after: page;
        page-break-after: always;
    }
    .location-cards-section {
        break-after: page;
        page-break-after: always;
    }
    .radius-comparison-section {
        break-after: page;
        page-break-after: always;
    }
    .population-trend-section {
        break-after: page;
        page-break-after: always;
    }
    .age-structure-section {
        break-after: page;
        page-break-after: always;
    }

    /* --- Page2: 蝨ｰ轤ｹ蛻･莠ｺ蜿｣繝・・繧ｿ・郁ｷ晞屬蝨丞挨・峨ｒ1繝壹・繧ｸ縺ｫ --- */
    .location-cards-section {
        zoom: 0.78;
    }
    .location-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .location-card .card-header {
        padding: 10px;
    }
    .location-name {
        font-size: 14px;
    }
    .location-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
    .card-body {
        padding: 10px;
    }
    .metric {
        padding: 6px 0;
    }
    .metric .label {
        font-size: 11px;
    }
    .metric .value {
        font-size: 12px;
    }
    .population-number {
        font-size: 14px !important;
    }

    /* --- Page3: 蝨ｰ蝗ｳ + 霍晞屬蝨丞挨莠ｺ蜿｣豈碑ｼ・--- */
    .map-section {
        padding: 12px;
        margin-bottom: 8px;
    }
        /* PDF時は地図を正方形寄りにして縦方向の見切れと偏りを抑える */
    .map-frame {
        width: min(170mm, 100%);
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        overflow: visible !important;
        border-radius: 0 !important;
    }
    .map-section #map {
        width: 100% !important;
        height: 100% !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }
    body.pdf-map-wide .map-frame {
        width: 100%;
        aspect-ratio: auto;
    }
    body.pdf-map-wide .map-section #map {
        height: 300px !important;
    }
    .radius-comparison-section .chart-container {
        height: 230px;
        margin: 8px 0 0;
    }

    /* --- Page4/5: 繧ｰ繝ｩ繝墓ｽｰ繧碁亟豁｢・亥ｿ・ｦ√↓蠢懊§閾ｪ蜍墓隼繝壹・繧ｸ縺輔○繧具ｼ・--- */
    /* 2蛻苓ｩｰ繧√・邵ｦ譁ｹ蜷代′讌ｵ遶ｯ縺ｫ蟆上＆縺上↑繧翫ｄ縺吶＞縺ｮ縺ｧ縲∝魂蛻ｷ譎ゅ・1蛻励↓縺励※蜿ｯ隱ｭ諤ｧ繧貞━蜈・*/
    .print-grid.print-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: start;
    }

    .population-trend-section .radius-heading,
    .age-structure-section .radius-heading {
        font-size: 13px;
        margin: 6px 0 8px;
        padding: 0;
    }
    .population-trend-section .chart-container,
    .age-structure-section .chart-container {
        /* 165px 縺縺ｨ謚倥ｌ邱・譽偵′邵ｦ縺ｫ縺､縺ｶ繧後※隕九∴繧九◆繧√€∝香蛻・↑鬮倥＆繧堤｢ｺ菫・*/
        height: 260px;
        margin: 0;
    }

    /* zoom 縺ｧ蜈ｨ菴鍋ｸｮ蟆上☆繧九→繧ｰ繝ｩ繝輔′縺輔ｉ縺ｫ貎ｰ繧後※隕九∴繧九◆繧√€∫┌蜉ｹ蛹・*/
    .population-trend-section,
    .age-structure-section {
        zoom: 1;
    }

    /* canvas 縺後さ繝ｳ繝・リ鬮倥↓霑ｽ蠕薙☆繧九ｈ縺・↓・・TML竊単DF縺ｧ鬮倥＆險育ｮ励′繝悶Ξ繧九・繧呈椛縺医ｋ・・*/
    .chart-container > canvas {
        width: 100% !important;
        height: 100% !important;
    }

    /* 譛€邨ゅ・繝ｼ繧ｸ縺ｫ繝輔ャ繧ｿ繝ｼ縺縺第ｮ九ｋ縺ｮ繧帝亟縺撰ｼ・DF荳翫〒菴呵ｨ医↑遨ｺ繝壹・繧ｸ縺悟・繧・☆縺・ｼ・*/
    .report-footer {
        display: none !important;
    }
}