* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        "Malgun Gothic",
        "맑은 고딕",
        Arial,
        sans-serif;

    background: #f3f6f8;

    color: #1f2933;
}


/* =================================
   상단 헤더
================================= */

.top-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    height: 86px;

    padding: 0 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #ffffff;

    border-bottom: 1px solid #dfe5ea;
}


.main-title {

    font-size: 24px;

    font-weight: 700;

    color: #17212b;
}


.sub-title {

    margin-top: 5px;

    font-size: 13px;

    color: #788692;
}


.file-area {

    display: flex;

    align-items: center;

    gap: 12px;
}


.file-button {

    padding: 10px 18px;

    background: #244e68;

    color: white;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;
}


.file-button:hover {

    background: #1c4055;
}


#status {

    font-size: 12px;

    color: #687680;

    min-width: 230px;
}

/* =================================
   왼쪽 사이드 메뉴
================================= */

.main-nav {

    position: fixed;

    top: 86px;

    left: 0;

    bottom: 0;

    width: 220px;

    height: auto;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 4px;

    padding: 24px 12px;

    background: #ffffff;

    border-right: 1px solid #dfe5ea;

    z-index: 900;

    overflow-y: auto;
}


.nav-button {

    width: 100%;

    min-height: 48px;

    padding: 0 18px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: #536575;

    font-size: 14px;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.nav-button:hover {

    color: #1769aa;

    background: #eef6ff;
}


.nav-button.active {

    color: #1769aa;

    background: #eaf4ff;

    font-weight: 700;

    border-left: 3px solid #1769aa;
}


/* =================================
   전체 대시보드
================================= */

.dashboard {

    max-width: none;

    margin: 0 0 0 220px;

    padding: 116px 32px 50px;
}

/* =================================
   사이드 메뉴 오른쪽 콘텐츠 영역
================================= */

.dashboard-page {

    margin-left: 220px;

    padding: 116px 32px 50px;

    max-width: none;
}


/* =================================
   페이지 제목
================================= */

.page-title {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 24px;
}


.page-title h1 {

    margin: 0;

    font-size: 26px;

    font-weight: 700;
}


.page-title p {

    margin: 8px 0 0;

    color: #71808c;

    font-size: 13px;
}


.period-info {

    text-align: right;

    color: #75838d;

    font-size: 12px;
}


.period-info strong {

    display: block;

    margin-top: 5px;

    font-size: 18px;

    color: #273b49;
}


/* =================================
   핵심 카드
================================= */

.summary-grid {

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 14px;

    margin-bottom: 18px;
}


.summary-card {

    min-height: 140px;

    padding: 20px;

    background: white;

    border: 1px solid #e0e6ea;

    border-radius: 10px;

    box-shadow:
        0 2px 7px rgba(30, 50, 65, 0.04);
}


.card-label {

    font-size: 13px;

    color: #71808b;

    font-weight: 600;
}


.card-value {

    margin-top: 18px;

    font-size: 29px;

    font-weight: 700;

    color: #234d68;
}


.card-description {

    margin-top: 9px;

    font-size: 11px;

    color: #9aa5ac;
}


.season-row {

    display: flex;

    gap: 25px;

    margin-top: 17px;
}


.season-row > div {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.season-label {

    font-size: 11px;

    color: #89959d;
}


.season-row strong {

    font-size: 21px;

    color: #234d68;
}


/* =================================
   그래프
================================= */

.chart-grid {

    display: grid;

    grid-template-columns:
        2fr 1fr;

    gap: 16px;
}


.chart-card {

    min-height: 350px;

    padding: 20px;

    background: white;

    border: 1px solid #e0e6ea;

    border-radius: 10px;

    box-shadow:
        0 2px 7px rgba(30, 50, 65, 0.04);
}


.chart-card.large {

    min-height: 420px;
}


.chart-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 14px;
}


.chart-header h2 {

    margin: 0;

    font-size: 16px;

    color: #263b49;
}


.chart-header p {

    margin: 6px 0 0;

    font-size: 11px;

    color: #8b979f;
}


.chart-container {

    position: relative;

    width: 100%;

    height: 270px;
}


.chart-card.large .chart-container {

    height: 335px;
}


/* =================================
   데이터 상태
================================= */

.data-status {

    margin-top: 18px;

    padding: 14px 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: white;

    border: 1px solid #e0e6ea;

    border-radius: 8px;

    color: #78858d;

    font-size: 12px;
}


.data-status strong {

    margin-right: 12px;

    color: #394d5a;
}


#dataPeriod {

    color: #87939b;
}


/* =================================
   반응형
================================= */

@media (max-width: 1200px) {

    .summary-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 850px) {

    .top-header {

        height: auto;

        padding: 18px;

        gap: 15px;

        flex-direction: column;

        align-items: flex-start;
    }


    .file-area {

        width: 100%;

        flex-wrap: wrap;
    }


    .main-nav {

        padding: 0 10px;

        overflow-x: auto;
    }


    .nav-button {

        white-space: nowrap;
    }


    .dashboard {

        padding: 20px 15px;
    }


    .summary-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .chart-grid {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 500px) {

    .summary-grid {

        grid-template-columns: 1fr;
    }

}

/* =================================
   페이지 전환
================================= */

.hidden-page {
    display: none;
}


/* =================================
   기온 변화 페이지
================================= */

.temperature-summary {
    grid-template-columns: repeat(4, 1fr);
}


.temperature-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.75fr)
        minmax(320px, 1fr);

    gap: 16px;

    margin-bottom: 16px;

    align-items: start;
}


.temperature-main-chart {

    min-height: 470px;
}


.temperature-large {

    height: 300px;
}


/* =================================
   비교표
================================= */

.comparison-card {

    padding: 20px;

    background: white;

    border: 1px solid #e0e6ea;

    border-radius: 10px;

    box-shadow:
        0 2px 7px rgba(30, 50, 65, 0.04);

}


.comparison-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 18px;

    font-size: 12px;

}


.comparison-table th {

    padding: 11px 7px;

    background: #f1f5f7;

    color: #52636e;

    font-weight: 600;

}


.comparison-table td {

    padding: 13px 7px;

    border-bottom: 1px solid #e7ecef;

    text-align: center;

}


.comparison-table td:first-child {

    text-align: left;

    font-weight: 600;

    color: #455863;

}


/* =================================
   10년 추세
================================= */

.trend-card {

    margin-bottom: 0;

}


.trend-card {
    min-height: 470px;
}

.trend-card .chart-container {
    height: 380px;
}


/* =================================
   계절별 기온
================================= */

.seasonal-temperature-card {

    margin-bottom: 20px;

}


.seasonal-temperature-card .chart-container {

    height: 320px;

}


/* =================================
   반응형
================================= */

@media (max-width: 1000px) {

    .temperature-layout {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 700px) {

    .temperature-summary {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 450px) {

    .temperature-summary {

        grid-template-columns: 1fr;

    }

}

/* =================================
   강수 변화 페이지
================================= */

.rainfall-summary {
    grid-template-columns: repeat(4, 1fr);
}


.rainfall-layout {

    display: grid;

    grid-template-columns: 1.7fr 1fr;

    gap: 16px;

    margin-bottom: 16px;
}


.rainfall-main-chart {

    min-height: 470px;
}


.rainfall-large {

    height: 380px;
}


.rainfall-intensity-card {

    margin-bottom: 16px;
}


.rainfall-intensity-chart {

    height: 330px;
}


.rainfall-five-day-chart {

    height: 330px;
}


.seasonal-rainfall-card {

    margin-top: 16px;

    margin-bottom: 20px;
}


.seasonal-rainfall-chart {

    height: 330px;
}


/* =================================
   반응형
================================= */

@media (max-width: 1000px) {

    .rainfall-layout {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 700px) {

    .rainfall-summary {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 450px) {

    .rainfall-summary {

        grid-template-columns: 1fr;

    }

}

/* ==========================================
   계절 변화 페이지
========================================== */

.season-page-summary {
    grid-template-columns:
        repeat(4, 1fr);
}


.season-info-card {

    background:
        #eef8f1;

    border:
        1px solid #dcefe1;

    border-radius:
        12px;

    padding:
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.season-info-icon {

    width:
        58px;

    height:
        58px;

    border-radius:
        50%;

    background:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        30px;

    flex-shrink:
        0;

}


.season-info-card h3 {

    margin:
        0 0 8px;

    color:
        #246247;

}


.season-info-card p {

    margin:
        4px 0;

    font-size:
        13px;

    line-height:
        1.6;

    color:
        #60706a;

}


/* ==========================================
   계절 비교 영역
========================================== */

.season-main-grid {

    display:
        grid;

    grid-template-columns:
        1.25fr 1fr;

    gap:
        18px;

    margin-top:
        18px;

}


.season-comparison-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        10px;

    padding:
        8px 0;

}


.season-comparison-item {

    text-align:
        center;

    padding:
        14px 8px;

    border-right:
        1px solid #e5ebef;

}


.season-comparison-item:last-child {

    border-right:
        none;

}


.season-icon {

    font-size:
        26px;

    margin-bottom:
        7px;

}


.season-name {

    font-weight:
        700;

    font-size:
        15px;

}


.season-period {

    font-size:
        11px;

    color:
        #7b8992;

    margin:
        4px 0 12px;

}


.season-values {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.season-values span {

    display:
        block;

    font-size:
        10px;

    color:
        #8a969d;

}


.season-values strong {

    font-size:
        15px;

}


.season-change {

    margin-top:
        12px;

    font-size:
        17px;

    font-weight:
        700;

}


/* ==========================================
   하단 영역
========================================== */

.season-bottom-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1.2fr;

    gap:
        18px;

    margin-top:
        18px;

}


.season-overview {

    padding:
        12px;

}


.season-overview-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        12px 14px;

    background:
        #f6f8fa;

    border-radius:
        8px;

    margin-bottom:
        8px;

}


.season-overview-row span {

    color:
        #71808a;

    font-size:
        12px;

}


.season-overview-row strong {

    font-size:
        13px;

}


.season-overview-arrow {

    text-align:
        center;

    color:
        #63879d;

    margin:
        3px 0;

}


.season-highlight {

    margin-top:
        10px;

    padding:
        12px;

    background:
        #eef8f1;

    border-radius:
        8px;

    color:
        #286548;

    font-size:
        13px;

    font-weight:
        600;

}


.season-start-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        8px;

}


.season-start-item {

    padding:
        12px 8px;

    text-align:
        center;

    background:
        #f8fafb;

    border-radius:
        8px;

}


.season-start-item div {

    font-size:
        12px;

    margin-bottom:
        8px;

}


.season-start-item strong {

    display:
        block;

    font-size:
        15px;

    margin-bottom:
        5px;

}


.season-start-item span {

    font-size:
        10px;

    color:
        #71808a;

}


.season-summary-box {

    margin-top:
        18px;

    padding:
        18px 22px;

    background:
        #eef8f1;

    border:
        1px solid #dcefe1;

    border-radius:
        10px;

}


.season-summary-box strong {

    color:
        #286548;

}


.season-summary-box p {

    margin:
        7px 0 0;

    color:
        #5d6d66;

    font-size:
        13px;

}


@media (max-width: 900px) {

    .season-page-summary {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .season-main-grid,
    .season-bottom-grid {

        grid-template-columns:
            1fr;

    }


    .season-comparison-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .season-start-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}

/* ==========================================
   계절 길이 변화
========================================== */

.season-overview-card {
    min-height: 300px;
}


/* 4계절 가로 배치 */

.season-overview-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    height: calc(100% - 55px);

    margin-top: 8px;
}


/* 계절 하나 */

.season-item {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 4px 8px;

    border-right: 1px solid #e5ebf2;
}


.season-item:last-child {
    border-right: none;
}


/* 계절 이름 */

.season-item-title {
    text-align: center;

    font-size: 12px;
    font-weight: 700;

    color: #243b53;

    margin-bottom: 8px;
}


/* 과거/최근 */

.season-bar-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


/* 한 줄 */

.season-bar-row {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


/* 과거/최근 글자 */

.season-bar-label {
    font-size: 9px;

    color: #718096;

    text-align: left;
}


/* 막대 */

.season-bar-track {
    width: 100%;

    height: 10px;

    background: #edf2f7;

    border-radius: 3px;

    overflow: hidden;
}


/* 과거 막대 */

.season-bar-old {
    height: 100%;

    background: #a9cfee;

    border-radius: 3px;

    min-width: 2px;
}


/* 최근 막대 */

.season-bar-recent {
    height: 100%;

    background: #f49aaa;

    border-radius: 3px;

    min-width: 2px;
}


/* 일수 */

.season-bar-value {
    font-size: 9px;

    color: #4a5568;

    text-align: right;
}


/* 변화량 */

.season-change {
    margin-top: auto;

    padding-top: 10px;

    text-align: center;

    font-size: 12px;

    font-weight: 700;
}


/* 증가 */

.season-change.positive {
    color: #159447;
}


/* 감소 */

.season-change.negative {
    color: #2674d9;
}

/* ==========================================
   메인 화면 주요 기온 변화
========================================== */

.temperature-overview-card {

    position: relative;

}


/* 상단 제목 + 버튼 */

.temperature-chart-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 16px;

}


.temperature-chart-title h2 {

    margin: 0;

    font-size: 16px;

    color: #263b49;

}


.temperature-chart-title p {

    margin: 6px 0 0;

    font-size: 11px;

    color: #8b979f;

}


/* ==========================================
   기온 선택 탭
========================================== */

.temperature-tabs {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 4px;

    background: #f3f6fa;

    border: 1px solid #e3e9ef;

    border-radius: 9px;

}


.temperature-tab {

    min-width: 82px;

    height: 34px;

    padding: 0 15px;

    border: none;

    border-radius: 7px;

    background: transparent;

    color: #657585;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;

}


.temperature-tab:hover {

    background: #eaf3fb;

    color: #1769aa;

}


/* 선택된 버튼 */

.temperature-tab.active {

    background: #1769aa;

    color: #ffffff;

    box-shadow:
        0 2px 5px rgba(23, 105, 170, 0.22);

}


/* 모바일 */

@media (max-width: 700px) {

    .temperature-chart-header {

        flex-direction: column;

    }


    .temperature-tabs {

        width: 100%;

    }


    .temperature-tab {

        flex: 1;

        min-width: 0;

    }

}

/* ==========================================
   주요 기온 변화 하단 통계
========================================== */

.temperature-overview-chart {

    height: 270px !important;

}


.temperature-stat-panel {

    display: grid;

    grid-template-columns:
        1fr 1.4fr 1fr;

    align-items: stretch;

    gap: 10px;

    margin-top: 12px;

}


/* 과거 / 최근 */

.temperature-period-stat {

    padding: 12px 14px;

    background: #f7f9fb;

    border: 1px solid #e6ebef;

    border-radius: 9px;

    text-align: center;

}


.temperature-period-stat span {

    display: block;

    margin-bottom: 5px;

    font-size: 10px;

    color: #84919a;

}


.temperature-period-stat strong {

    display: block;

    font-size: 18px;

    color: #1769aa;

}


.temperature-period-stat small {

    display: block;

    margin-top: 4px;

    font-size: 9px;

    color: #a0a9af;

}


/* 53년 변화 */

.temperature-longterm-stat {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    column-gap: 8px;

    row-gap: 3px;

    padding: 12px 16px;

    background: #f1f6fc;

    border: 1px solid #dce9f5;

    border-radius: 9px;

    text-align: center;

}


.temperature-longterm-stat span {

    font-size: 12px;

    color: #566978;

}


.temperature-longterm-stat strong {

    font-size: 19px;

    color: #e76532;

}


.temperature-longterm-stat small {

    width: 100%;

    font-size: 10px;

    color: #3573b4;

}


/* 모바일 */

@media (max-width: 700px) {

    .temperature-stat-panel {

        grid-template-columns: 1fr;

    }

}

/* ==========================================
   메인 화면 주요 강수 변화
========================================== */

.rainfall-overview-card {

    position: relative;

}


/* 제목 + 버튼 */

.rainfall-chart-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 14px;

}


.rainfall-chart-title h2 {

    margin: 0;

    font-size: 16px;

    color: #263b49;

}


.rainfall-chart-title p {

    margin: 6px 0 0;

    font-size: 11px;

    color: #8b979f;

}


/* ==========================================
   강수 선택 탭
========================================== */

.rainfall-tabs {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 4px;

    background: #f3f6fa;

    border: 1px solid #e3e9ef;

    border-radius: 9px;

}


.rainfall-tab {

    min-width: 72px;

    height: 34px;

    padding: 0 11px;

    border: none;

    border-radius: 7px;

    background: transparent;

    color: #657585;

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;

}


.rainfall-tab:hover {

    background: #eaf3fb;

    color: #1769aa;

}


.rainfall-tab.active {

    background: #1769aa;

    color: #ffffff;

    box-shadow:
        0 2px 5px rgba(23, 105, 170, 0.22);

}


@media (max-width: 700px) {

    .rainfall-chart-header {

        flex-direction: column;

    }


    .rainfall-tabs {

        width: 100%;

    }


    .rainfall-tab {

        flex: 1;

        min-width: 0;

    }

}

/* ==========================================
   메인 화면 극한기후 변화
========================================== */

.extreme-overview-card {

    min-height: 430px;

}


.extreme-overview-chart {

    height: 245px;

}


/* ==========================================
   극한기후 변화량 5개 박스
========================================== */

.extreme-change-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 7px;

    margin-top: 12px;

}


.extreme-change-item {

    padding: 9px 6px;

    background: #f7f9fb;

    border: 1px solid #e4eaf0;

    border-radius: 8px;

    text-align: center;

}


.extreme-change-item span {

    display: block;

    margin-bottom: 5px;

    font-size: 9px;

    color: #7d8994;

}


.extreme-change-item strong {

    display: block;

    font-size: 15px;

    color: #263b49;

}


.extreme-change-item small {

    display: inline-block;

    margin-top: 5px;

    padding: 2px 7px;

    border-radius: 10px;

    font-size: 9px;

    font-weight: 700;

}


/* 증가 */

.extreme-change-item small.increase {

    color: #d96032;

    background: #fff0e9;

}


/* 감소 */

.extreme-change-item small.decrease {

    color: #2b6fc4;

    background: #eaf3ff;

}


/* 변화 없음 */

.extreme-change-item small.same {

    color: #6f7c86;

    background: #eef1f3;

}


/* 모바일 */

@media (max-width: 900px) {

    .extreme-change-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


@media (max-width: 600px) {

    .extreme-change-grid {

        grid-template-columns:
            1fr 1fr;

    }

}

/* ==========================================
   기온 페이지 상단 카드 변화량
========================================== */

.temperature-card-change {

    margin-top: 10px;

    padding-top: 9px;

    border-top: 1px solid #edf1f4;

    font-size: 11px;

    font-weight: 700;

    color: #788692;

}


/* 상승 */

.temperature-card-change.increase {

    color: #e76532;

}


/* 감소 */

.temperature-card-change.decrease {

    color: #2674d9;

}


/* 변화 없음 */

.temperature-card-change.same {

    color: #788692;

}

/* ==========================================
   기온 변화 상단 카드
========================================== */

.temperature-card-main {
    margin-top: 12px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.temperature-card-main.increase {
    color: #ef6b3c;
}

.temperature-card-main.decrease {
    color: #2d6cdf;
}

.temperature-card-main.same {
    color: #475569;
}


.temperature-card-trend {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.temperature-card-trend.increase {
    color: #ef6b3c;
}

.temperature-card-trend.decrease {
    color: #2d6cdf;
}

.temperature-card-trend.same {
    color: #64748b;
}


.temperature-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    width: fit-content;
}

.temperature-card-status.increase {
    color: #e76532;
    background: #fff1eb;
}

.temperature-card-status.decrease {
    color: #2563eb;
    background: #eef5ff;
}

.temperature-card-status.same {
    color: #64748b;
    background: #f1f5f9;
}

/* ==========================================
   우리 지역 요약 상단 카드 배치
========================================== */

.overview-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 12px;
}


.overview-summary-grid .summary-card {
    min-width: 0;

    width: 100%;

    min-height: 150px;

    padding: 16px;
}

@media (max-width: 1200px) {

    .overview-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .overview-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 450px) {

    .overview-summary-grid {
        grid-template-columns:
            1fr;
    }

}

/* =================================
   기온 변화 페이지 상단 배치
================================= */

.temperature-top-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) 1.35fr;

    gap: 16px;

    align-items: stretch;

    margin-bottom: 16px;
}


.temperature-top-grid .summary-card {

    min-width: 0;

    min-height: 182px;
}


.top-comparison-card {

    height: 100%;

    margin: 0;
}

@media (max-width: 1200px) {

    .temperature-top-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .top-comparison-card {
        grid-column: 1 / -1;
    }
}


@media (max-width: 1000px) {

    .temperature-layout {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .temperature-top-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================
   기온 변화 페이지 상단 카드 높이 축소
================================= */

.temperature-top-grid .summary-card {
    min-height: 145px;
    padding: 14px 16px;
}

.temperature-top-grid .top-comparison-card {
    padding: 14px 16px;
}

.temperature-top-grid .comparison-table {
    margin-top: 10px;
}

.temperature-top-grid .comparison-table th {
    padding: 7px 6px;
}

.temperature-top-grid .comparison-table td {
    padding: 8px 6px;
}

/* =================================
   연평균기온 그래프 하단 53년 변화
================================= */

.temperature-53year-summary {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 42px;

    margin-top: 10px;

    padding: 9px 14px;

    background: #f4f7fb;

    border: 1px solid #e2e9f1;

    border-radius: 8px;

    text-align: center;

    white-space: nowrap;

}


.temperature-53year-label {

    font-size: 13px;

    font-weight: 600;

    color: #536575;

}


#temperature53YearChange {

    font-size: 18px;

    font-weight: 800;

}


.temperature-53year-direction {

    font-size: 13px;

    font-weight: 700;

}


.temperature-53year-trend {

    margin-left: 3px;

    font-size: 11px;

    color: #71808c;

}


#temperature53YearTrend {

    font-size: 11px;

    font-weight: 700;

}


/* 상승 */

#temperature53YearChange.increase,
.temperature-53year-direction.increase,
#temperature53YearTrend.increase {

    color: #ef6b3c;

}


/* 하강 */

#temperature53YearChange.decrease,
.temperature-53year-direction.decrease,
#temperature53YearTrend.decrease {

    color: #2d6cdf;

}


/* 변화 없음 */

#temperature53YearChange.same,
.temperature-53year-direction.same,
#temperature53YearTrend.same {

    color: #64748b;

}

.temperature-side-column {

    display: flex;

    flex-direction: column;

    gap: 16px;

    min-width: 0;
}

.temperature-main-chart,
.temperature-side-column .chart-card {

    min-width: 0;
}

/* =================================
   계절별 기온 변화 카드형
================================= */

.season-temp-card-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-top: 6px;
}


.season-temp-card {

    min-width: 0;

    padding: 16px 14px;

    background: #ffffff;

    border: 1px solid #e6ebf1;

    border-radius: 10px;
}


.season-temp-head {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}


.season-temp-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #f8fafc;

    font-size: 20px;

    flex-shrink: 0;
}


.season-temp-name {

    font-size: 14px;

    font-weight: 700;

    color: #243b53;
}


.season-temp-month {

    margin-top: 2px;

    font-size: 11px;

    color: #7b8794;
}


.season-temp-value {

    margin-top: 4px;

    font-size: 28px;

    font-weight: 800;

    line-height: 1.2;
}


.season-temp-value.increase {
    color: #ef6b3c;
}

.season-temp-value.decrease {
    color: #2d6cdf;
}

.season-temp-value.same {
    color: #475569;
}


.season-temp-trend {

    margin-top: 8px;

    font-size: 12px;

    font-weight: 600;
}

.season-temp-trend.increase {
    color: #ef6b3c;
}

.season-temp-trend.decrease {
    color: #2d6cdf;
}

.season-temp-trend.same {
    color: #64748b;
}


.season-temp-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 10px;

    padding: 5px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    width: fit-content;
}

.season-temp-status.increase {
    color: #e76532;
    background: #fff1eb;
}

.season-temp-status.decrease {
    color: #2563eb;
    background: #eef5ff;
}

.season-temp-status.same {
    color: #64748b;
    background: #f1f5f9;
}


/* 반응형 */

@media (max-width: 1100px) {

    .season-temp-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .season-temp-card-grid {
        grid-template-columns: 1fr;
    }

}

/* =================================
   기온 페이지 그래프 하단 3칸 요약
================================= */

.temperature-page-stat-panel {

    display: grid;

    grid-template-columns:
        1fr 1.35fr 1fr;

    align-items: stretch;

    gap: 10px;

    margin-top: 12px;
}


/* 좌우 평균 박스 */

.temperature-page-period-stat {

    padding: 12px 14px;

    background: #f7f9fb;

    border: 1px solid #e6ebef;

    border-radius: 9px;

    text-align: center;
}


.temperature-page-period-stat span {

    display: block;

    margin-bottom: 5px;

    font-size: 10px;

    color: #84919a;
}


.temperature-page-period-stat strong {

    display: block;

    font-size: 18px;

    color: #1769aa;
}


.temperature-page-period-stat small {

    display: block;

    margin-top: 4px;

    font-size: 9px;

    color: #a0a9af;
}


/* 가운데 53년 변화 박스 */

.temperature-page-longterm-stat {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    column-gap: 8px;

    row-gap: 3px;

    padding: 12px 16px;

    background: #f1f6fc;

    border: 1px solid #dce9f5;

    border-radius: 9px;

    text-align: center;
}


.temperature-page-longterm-stat span {

    font-size: 12px;

    color: #566978;
}


.temperature-page-longterm-stat strong {

    font-size: 19px;

    color: #e76532;
}


.temperature-page-longterm-stat em {

    font-style: normal;

    font-size: 13px;

    font-weight: 700;
}


.temperature-page-longterm-stat small {

    width: 100%;

    font-size: 10px;

    color: #3573b4;
}


/* 기존 색상 클래스 재사용 */

#temperature53YearChange.increase,
.temperature-53year-direction.increase,
#temperature53YearTrend.increase {
    color: #ef6b3c;
}

#temperature53YearChange.decrease,
.temperature-53year-direction.decrease,
#temperature53YearTrend.decrease {
    color: #2d6cdf;
}

#temperature53YearChange.same,
.temperature-53year-direction.same,
#temperature53YearTrend.same {
    color: #64748b;
}


/* 반응형 */

@media (max-width: 700px) {

    .temperature-page-stat-panel {
        grid-template-columns: 1fr;
    }

}

/* =================================
   강수 변화 페이지 상단 카드
================================= */

.rainfall-summary .summary-card {

    min-height: 145px;

    padding: 14px 16px;
}


/* 강수 증가값 */

.rainfall-summary .temperature-card-main.increase,
.rainfall-summary .temperature-card-trend.increase {

    color: #159447;
}


/* 증가 배지 */

.rainfall-summary .temperature-card-status.increase {

    color: #159447;

    background: #eaf8f0;
}


/* 감소값 */

.rainfall-summary .temperature-card-main.decrease,
.rainfall-summary .temperature-card-trend.decrease {

    color: #2d6cdf;
}


/* 감소 배지 */

.rainfall-summary .temperature-card-status.decrease {

    color: #2563eb;

    background: #eef5ff;
}

/* =================================
   연강수량 그래프 하단 53년 변화
================================= */

.rainfall-53year-summary {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 42px;

    margin-top: 10px;

    padding: 9px 14px;

    background: #f4f8fb;

    border: 1px solid #e1e9ef;

    border-radius: 8px;

    text-align: center;

    white-space: nowrap;
}


.rainfall-53year-label {

    font-size: 13px;

    font-weight: 600;

    color: #536575;
}


#rainfall53YearChange {

    font-size: 18px;

    font-weight: 800;
}


.rainfall-53year-direction {

    font-style: normal;

    font-size: 13px;

    font-weight: 700;
}


.rainfall-53year-trend {

    margin-left: 3px;

    font-size: 11px;

    color: #71808c;
}


#rainfall53YearTrend {

    font-size: 11px;

    font-weight: 700;
}


/* 증가 */

#rainfall53YearChange.increase,
.rainfall-53year-direction.increase,
#rainfall53YearTrend.increase {

    color: #159447;
}


/* 감소 */

#rainfall53YearChange.decrease,
.rainfall-53year-direction.decrease,
#rainfall53YearTrend.decrease {

    color: #2d6cdf;
}


/* 변화 없음 */

#rainfall53YearChange.same,
.rainfall-53year-direction.same,
#rainfall53YearTrend.same {

    color: #64748b;
}

/* =====================================================
   강수 변화 페이지 최종 배치
   기존 다른 페이지에 영향 주지 않도록 별도 클래스 사용
===================================================== */


/* =====================================================
   1. 상단
   핵심 카드 4개
===================================================== */

.rainfall-top-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    align-items: stretch;

    margin-bottom: 16px;
}


/* 핵심 카드 */

.rainfall-top-grid .summary-card {

    min-width: 0;

    min-height: 154px;

    padding: 14px 16px;
}


/* 강수 변화 페이지 상단 카드의 기간별 비교값 */

#rainfallPage .overview-comparisons {

    display: grid;
    gap: 5px;
    margin-top: 10px;
    color: #64748b;
}


#rainfallPage .overview-comparisons .overview-comparison-row {

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 1.3;
}


#rainfallPage .overview-comparisons .overview-comparison-row span {

    min-width: 0;
    color: #7c8794;
    font-weight: 500;
    white-space: nowrap;
}


#rainfallPage .overview-comparisons .overview-comparison-row strong {

    font-size: 13px;
    white-space: nowrap;
}


#rainfallPage .overview-comparisons .overview-comparison-row strong.increase {
    color: #159447;
}


#rainfallPage .overview-comparisons .overview-comparison-row strong.decrease {
    color: #2d6cdf;
}


#rainfallPage .overview-comparisons .overview-comparison-row strong.same {
    color: #64748b;
}


/* 강수 증가 색상 */

.rainfall-top-grid .temperature-card-main.increase,
.rainfall-top-grid .temperature-card-trend.increase {

    color: #159447;
}


.rainfall-top-grid .temperature-card-status.increase {

    color: #159447;

    background: #eaf8f0;
}


/* 강수 감소 색상 */

.rainfall-top-grid .temperature-card-main.decrease,
.rainfall-top-grid .temperature-card-trend.decrease {

    color: #2d6cdf;
}


.rainfall-top-grid .temperature-card-status.decrease {

    color: #2563eb;

    background: #eef5ff;
}


/* 비교표 카드 */

.rainfall-comparison-card {

    min-width: 0;

    min-height: 154px;

    padding: 12px 14px;
}


.rainfall-comparison-card .chart-header {

    margin-bottom: 6px;
}


.rainfall-comparison-card .chart-header h2 {

    font-size: 14px;
}


.rainfall-comparison-card .chart-header p {

    margin-top: 3px;

    font-size: 9px;
}


.rainfall-comparison-card .comparison-table {

    margin-top: 6px;

    table-layout: fixed;

    font-size: 9px;
}


.rainfall-comparison-card .comparison-table th {

    padding: 6px 3px;

    font-size: 9px;
}


.rainfall-comparison-card .comparison-table td {

    padding: 6px 3px;

    font-size: 9px;

    white-space: nowrap;
}


.rainfall-comparison-card .comparison-table th:first-child,
.rainfall-comparison-card .comparison-table td:first-child {

    width: 26%;
}



/* =====================================================
   2. 메인 그래프 3개
===================================================== */

.rainfall-main-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 14px;

    align-items: stretch;

    margin-bottom: 16px;
}


/* 모든 그래프 카드 공통 */

.rainfall-main-grid .chart-card {

    min-width: 0;

    min-height: 365px;

    padding: 16px;
}


.rainfall-main-grid .chart-header {

    margin-bottom: 8px;
}


.rainfall-main-grid .chart-header h2 {

    font-size: 14px;
}


.rainfall-main-grid .chart-header p {

    margin-top: 4px;

    font-size: 9px;
}



/* =====================================================
   3. 연강수량 변화
===================================================== */

.rainfall-main-grid .rainfall-main-chart {

    min-height: 365px;
}


.rainfall-main-grid .rainfall-large {

    height: 250px;
}


/* 강수 변화 그래프 우측 상단 선택 버튼 */

#rainfallPage .rainfall-trend-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#rainfallPage .rainfall-trend-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #f7fafc;
}

#rainfallPage .rainfall-trend-tab {
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

#rainfallPage .rainfall-trend-tab:hover {
    color: #1769aa;
    background: #e8f2fb;
}

#rainfallPage .rainfall-trend-tab.active {
    color: #ffffff;
    background: #2484bd;
    box-shadow: 0 2px 6px rgba(36, 132, 189, 0.24);
}

@media (max-width: 650px) {
    #rainfallPage .rainfall-trend-header {
        flex-direction: column;
    }

    #rainfallPage .rainfall-trend-tabs {
        width: 100%;
    }

    #rainfallPage .rainfall-trend-tab {
        flex: 1;
    }
}


/* 기존 53년 변화 박스 크기 조절 */

.rainfall-main-grid .rainfall-53year-summary {

    min-height: 38px;

    margin-top: 8px;

    padding: 7px 10px;
}


.rainfall-main-grid .rainfall-53year-label {

    font-size: 11px;
}


.rainfall-main-grid #rainfall53YearChange {

    font-size: 16px;
}


.rainfall-main-grid .rainfall-53year-direction {

    font-size: 11px;
}


.rainfall-main-grid .rainfall-53year-trend {

    font-size: 9px;
}


.rainfall-main-grid #rainfall53YearTrend {

    font-size: 9px;
}



/* =====================================================
   4. 강수량 구간별 변화
===================================================== */

.rainfall-main-grid .rainfall-intensity-card {

    margin: 0;

    min-height: 365px;
}


.rainfall-main-grid .rainfall-intensity-chart {

    height: 290px;
}



/* =====================================================
   5. 5일 최다강수량
===================================================== */

.rainfall-main-grid .rainfall-five-day-card {

    margin: 0;

    min-height: 365px;
}


.rainfall-main-grid .rainfall-five-day-chart {

    height: 290px;
}



/* =====================================================
   6. 계절별 강수량
===================================================== */

#rainfallPage .seasonal-rainfall-card {

    margin-top: 0;

    margin-bottom: 20px;

    min-height: 330px;
}


#rainfallPage .seasonal-rainfall-chart {

    height: 260px;
}



/* =====================================================
   반응형
===================================================== */

@media (max-width: 1400px) {

    .rainfall-top-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

    }


    .rainfall-comparison-card {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 1100px) {

    .rainfall-main-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .rainfall-main-grid .rainfall-main-chart {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 800px) {

    .rainfall-top-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .rainfall-main-grid {

        grid-template-columns:
            1fr;

    }


    .rainfall-main-grid .rainfall-main-chart {

        grid-column:
            auto;

    }

}


@media (max-width: 500px) {

    .rainfall-top-grid {

        grid-template-columns:
            1fr;

    }


    .rainfall-comparison-card {

        grid-column:
            auto;

    }

}

/* ==========================================
   강수 과거20년 vs 최근20년 표
   '변화' 열 숨기기
========================================== */

.rainfall-comparison-card .comparison-table th:nth-child(4),
.rainfall-comparison-card .comparison-table td:nth-child(4) {
    display: none;
}


/* 3열 비율 재조정 */

.rainfall-comparison-card .comparison-table th:first-child,
.rainfall-comparison-card .comparison-table td:first-child {
    width: 34%;
}


.rainfall-comparison-card .comparison-table th:nth-child(2),
.rainfall-comparison-card .comparison-table td:nth-child(2),
.rainfall-comparison-card .comparison-table th:nth-child(3),
.rainfall-comparison-card .comparison-table td:nth-child(3) {
    width: 33%;
}

/* =====================================================
   기온 변화 상단을 강수 변화 상단과 동일 크기로
===================================================== */

.temperature-top-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr))
        minmax(350px, 1.45fr);

    gap: 12px;

    align-items: stretch;

    margin-bottom: 16px;
}


/* =================================
   기온 상단 4개 카드
================================= */

.temperature-top-grid .summary-card {

    min-width: 0;

    min-height: 154px;

    padding: 14px 16px;
}


/* =================================
   기온 비교표 카드
================================= */

.temperature-top-grid .top-comparison-card {

    min-width: 0;

    min-height: 154px;

    height: auto;

    padding: 12px 14px;

    margin: 0;
}


/* 비교표 제목 */

.temperature-top-grid .top-comparison-card .chart-header {

    margin-bottom: 6px;
}


.temperature-top-grid .top-comparison-card .chart-header h2 {

    font-size: 14px;
}


.temperature-top-grid .top-comparison-card .chart-header p {

    margin-top: 3px;

    font-size: 9px;
}


/* =================================
   비교표 크기
================================= */

.temperature-top-grid .comparison-table {

    margin-top: 6px;

    table-layout: fixed;

    font-size: 9px;
}


.temperature-top-grid .comparison-table th {

    padding: 6px 3px;

    font-size: 9px;
}


.temperature-top-grid .comparison-table td {

    padding: 6px 3px;

    font-size: 9px;

    white-space: nowrap;
}


/* 첫 번째 열 */

.temperature-top-grid .comparison-table th:first-child,
.temperature-top-grid .comparison-table td:first-child {

    width: 34%;
}


/* 과거/최근 열 */

.temperature-top-grid .comparison-table th:nth-child(2),
.temperature-top-grid .comparison-table td:nth-child(2),
.temperature-top-grid .comparison-table th:nth-child(3),
.temperature-top-grid .comparison-table td:nth-child(3) {

    width: 33%;
}


/* =====================================================
   반응형도 강수 상단과 동일하게
===================================================== */

@media (max-width: 1400px) {

    .temperature-top-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

    }


    .temperature-top-grid .top-comparison-card {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 800px) {

    .temperature-top-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


@media (max-width: 500px) {

    .temperature-top-grid {

        grid-template-columns:
            1fr;

    }


    .temperature-top-grid .top-comparison-card {

        grid-column:
            auto;

    }

}

/* =====================================================
   연강수량 그래프 하단 3칸 요약
===================================================== */

.rainfall-page-stat-panel {

    display: grid;

    grid-template-columns:
        1fr 1.35fr 1fr;

    align-items: stretch;

    gap: 8px;

    margin-top: 8px;
}


/* =================================
   좌우 : 과거 / 최근 평균
================================= */

.rainfall-page-period-stat {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;

    padding: 7px 8px;

    background: #f7f9fb;

    border: 1px solid #e6ebef;

    border-radius: 8px;

    text-align: center;
}


.rainfall-page-period-stat span {

    display: block;

    margin-bottom: 3px;

    font-size: 9px;

    color: #84919a;
}


.rainfall-page-period-stat strong {

    display: block;

    font-size: 15px;

    font-weight: 800;

    color: #1769aa;
}


.rainfall-page-period-stat small {

    display: block;

    margin-top: 3px;

    font-size: 8px;

    color: #a0a9af;
}


/* =================================
   가운데 : 53년 변화
================================= */

.rainfall-page-longterm-stat {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    column-gap: 6px;

    row-gap: 2px;

    min-width: 0;

    padding: 7px 10px;

    background: #f1f8f4;

    border: 1px solid #dceee4;

    border-radius: 8px;

    text-align: center;
}


.rainfall-page-longterm-stat span {

    font-size: 10px;

    color: #566978;
}


.rainfall-page-longterm-stat strong {

    font-size: 16px;

    font-weight: 800;
}


.rainfall-page-longterm-stat em {

    font-style: normal;

    font-size: 10px;

    font-weight: 700;
}


.rainfall-page-longterm-stat small {

    width: 100%;

    font-size: 8px;

    color: #71808c;
}


.rainfall-page-longterm-stat small b {

    font-size: 8px;

    font-weight: 700;
}


/* 증가 */

.rainfall-page-longterm-stat #rainfall53YearChange.increase,
.rainfall-page-longterm-stat .rainfall-53year-direction.increase,
.rainfall-page-longterm-stat #rainfall53YearTrend.increase {

    color: #159447;
}


/* 감소 */

.rainfall-page-longterm-stat #rainfall53YearChange.decrease,
.rainfall-page-longterm-stat .rainfall-53year-direction.decrease,
.rainfall-page-longterm-stat #rainfall53YearTrend.decrease {

    color: #2d6cdf;
}


/* 변화 없음 */

.rainfall-page-longterm-stat #rainfall53YearChange.same,
.rainfall-page-longterm-stat .rainfall-53year-direction.same,
.rainfall-page-longterm-stat #rainfall53YearTrend.same {

    color: #64748b;
}


/* 모바일 */

@media (max-width: 700px) {

    .rainfall-page-stat-panel {

        grid-template-columns: 1fr;

    }

}

/* =====================================================
   연강수량 그래프 하단
   과거 평균 | 53년 변화 | 최근 평균
===================================================== */

.rainfall-page-stat-panel {

    display: grid;

    grid-template-columns:
        1fr 1.35fr 1fr;

    gap: 8px;

    align-items: stretch;

    margin-top: 8px;
}


/* =================================
   과거 / 최근 평균
================================= */

.rainfall-page-period-stat {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 44px;

    padding: 6px 8px;

    background: #f7f9fb;

    border: 1px solid #e4eaf0;

    border-radius: 8px;

    text-align: center;
}


.rainfall-page-period-stat span {

    display: block;

    margin-bottom: 2px;

    font-size: 9px;

    color: #84919a;
}


.rainfall-page-period-stat strong {

    display: block;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.2;

    color: #1769aa;
}


.rainfall-page-period-stat small {

    display: block;

    margin-top: 2px;

    font-size: 8px;

    color: #a0a9af;
}


/* =================================
   가운데 53년 변화
================================= */

.rainfall-page-longterm-stat {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    column-gap: 5px;

    row-gap: 2px;

    min-width: 0;

    min-height: 44px;

    padding: 6px 8px;

    background: #f1f8f4;

    border: 1px solid #dceee4;

    border-radius: 8px;

    text-align: center;
}


.rainfall-page-longterm-stat span {

    font-size: 9px;

    color: #566978;
}


.rainfall-page-longterm-stat strong {

    font-size: 16px;

    font-weight: 800;
}


.rainfall-page-longterm-stat em {

    font-style: normal;

    font-size: 10px;

    font-weight: 700;
}


.rainfall-page-longterm-stat small {

    width: 100%;

    font-size: 8px;

    color: #71808c;
}


.rainfall-page-longterm-stat small b {

    font-size: 8px;

    font-weight: 700;
}


/* 증가 */

.rainfall-page-longterm-stat #rainfall53YearChange.increase,
.rainfall-page-longterm-stat .rainfall-53year-direction.increase,
.rainfall-page-longterm-stat #rainfall53YearTrend.increase {

    color: #159447;
}


/* 감소 */

.rainfall-page-longterm-stat #rainfall53YearChange.decrease,
.rainfall-page-longterm-stat .rainfall-53year-direction.decrease,
.rainfall-page-longterm-stat #rainfall53YearTrend.decrease {

    color: #2d6cdf;
}


/* 변화 없음 */

.rainfall-page-longterm-stat #rainfall53YearChange.same,
.rainfall-page-longterm-stat .rainfall-53year-direction.same,
.rainfall-page-longterm-stat #rainfall53YearTrend.same {

    color: #64748b;
}


/* 모바일 */

@media (max-width: 700px) {

    .rainfall-page-stat-panel {

        grid-template-columns:
            1fr;

    }

}

/* ==========================================
   강수강도별 강수량 변화
========================================== */

.chart-unit {

    font-size: 10px;

    color: #94a3b8;

    white-space: nowrap;
}


.rainfall-intensity-note {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 10px;

    padding: 10px 12px;

    background: #f8fbff;

    border: 1px solid #e3edf7;

    border-radius: 8px;
}


.rainfall-intensity-note-icon {

    flex: 0 0 auto;

    font-size: 20px;

    line-height: 1;
}


.rainfall-intensity-note p {

    margin: 0;

    font-size: 11px;

    line-height: 1.5;

    color: #5b6b79;
}

/* ==========================================
   기온 변화 추세 하단 설명
========================================== */


/* 문구 공간 확보를 위해 그래프 높이 축소 */

.trend-card .chart-container {

    height: 300px;
}


/* 설명 박스 */

.temperature-trend-note {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 68px;

    margin-top: 10px;

    padding: 12px 14px;

    background: #f7faff;

    border: 1px solid #e3ebf5;

    border-radius: 9px;
}


/* 아이콘 */

.temperature-trend-note-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 32px;

    width: 32px;

    height: 32px;

    font-size: 21px;
}


/* 문구 */

.temperature-trend-note p {

    margin: 0;

    font-size: 11px;

    line-height: 1.65;

    color: #566978;

    word-break: keep-all;
}


/* 강조 문구 */

.temperature-trend-note strong {

    color: #34495e;

    font-weight: 700;
}

/* =====================================================
   5일 최다강수량 그래프 하단 3칸 요약
===================================================== */

.five-day-stat-panel {

    display: grid;

    grid-template-columns:
        1fr 1.35fr 1fr;

    align-items: stretch;

    gap: 8px;

    margin-top: 8px;
}


/* 가운데 53년 변화 */

.five-day-longterm-stat {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    column-gap: 6px;

    row-gap: 2px;

    min-width: 0;

    padding: 7px 10px;

    background: #f1f8f4;

    border: 1px solid #dceee4;

    border-radius: 8px;

    text-align: center;
}


.five-day-longterm-stat span {

    font-size: 10px;

    color: #566978;
}


.five-day-longterm-stat strong {

    font-size: 16px;

    font-weight: 800;
}


.five-day-longterm-stat em {

    font-style: normal;

    font-size: 10px;

    font-weight: 700;
}


.five-day-longterm-stat small {

    width: 100%;

    font-size: 8px;

    color: #71808c;
}


.five-day-longterm-stat small b {

    font-size: 8px;

    font-weight: 700;
}


/* 증가 */

.five-day-longterm-stat #fiveDay53YearChange.increase,
.five-day-longterm-stat .five-day-53year-direction.increase,
.five-day-longterm-stat #fiveDay53YearTrend.increase {

    color: #159447;
}


/* 감소 */

.five-day-longterm-stat #fiveDay53YearChange.decrease,
.five-day-longterm-stat .five-day-53year-direction.decrease,
.five-day-longterm-stat #fiveDay53YearTrend.decrease {

    color: #2d6cdf;
}


/* 변화 없음 */

.five-day-longterm-stat #fiveDay53YearChange.same,
.five-day-longterm-stat .five-day-53year-direction.same,
.five-day-longterm-stat #fiveDay53YearTrend.same {

    color: #64748b;
}


/* 모바일 */

@media (max-width: 700px) {

    .five-day-stat-panel {

        grid-template-columns: 1fr;

    }

}

/* =====================================================
   강수 페이지 하단 2열 영역
===================================================== */

.rainfall-bottom-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 1fr);

    gap: 12px;

    margin-top: 12px;

    margin-bottom: 20px;
}


/* =====================================================
   계절별 강수량 변화 카드
===================================================== */

#rainfallPage .seasonal-rainfall-card {

    margin: 0;

    min-height: 205px;
}

.seasonal-rain-summary-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-top: 10px;
}

.seasonal-rain-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 12px 10px;

    border: 1px solid #e6edf2;

    border-radius: 10px;

    background: #fbfdff;

    text-align: center;
}

.seasonal-rain-label {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    margin-bottom: 8px;
}

.seasonal-rain-icon {

    font-size: 22px;

    line-height: 1;
}

.seasonal-rain-label strong {

    display: block;

    font-size: 13px;

    color: #334155;
}

.seasonal-rain-label small {

    display: block;

    font-size: 9px;

    color: #94a3b8;
}

.seasonal-rain-value {

    font-size: 18px;

    font-weight: 800;

    line-height: 1.2;
}

.seasonal-rain-value.increase {

    color: #159447;
}

.seasonal-rain-value.decrease {

    color: #2563eb;
}

.seasonal-rain-value.same {

    color: #64748b;
}

.seasonal-rain-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 8px;

    padding: 3px 10px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;
}

.seasonal-rain-badge.increase {

    color: #159447;
    background: #ecf9f0;
}

.seasonal-rain-badge.decrease {

    color: #2563eb;
    background: #eef4ff;
}

.seasonal-rain-badge.same {

    color: #64748b;
    background: #f1f5f9;
}


/* =====================================================
   강수 변화 한눈에 보기
===================================================== */

.rainfall-overview-card {

    min-height: 205px;
}

.rainfall-overview-flow {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 8px;

    margin-top: 10px;
}

.rainfall-overview-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 10px;

    border: 1px solid #e6edf2;

    border-radius: 10px;

    background: #fbfdff;
}

.rainfall-overview-icon {

    font-size: 24px;

    line-height: 1;
}

.rainfall-overview-text strong {

    display: block;

    font-size: 12px;

    color: #334155;

    margin-bottom: 4px;
}

.rainfall-overview-text div {

    font-size: 17px;

    font-weight: 800;

    color: #159447;

    line-height: 1.2;
}

.rainfall-overview-text small {

    display: block;

    margin-top: 4px;

    font-size: 10px;

    color: #64748b;

    line-height: 1.4;
}

.rainfall-overview-arrow {

    font-size: 18px;

    font-weight: 700;

    color: #94a3b8;
}

.rainfall-overview-description {

    margin: 12px 0 0 0;

    padding: 10px 12px;

    border-radius: 8px;

    background: #f8fbff;

    border: 1px solid #e3edf7;

    font-size: 11px;

    line-height: 1.6;

    color: #5b6b79;
}


/* =====================================================
   반응형
===================================================== */

@media (max-width: 1400px) {

    .rainfall-bottom-grid {

        grid-template-columns: 1fr;
    }

    .seasonal-rain-summary-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rainfall-overview-flow {

        grid-template-columns: 1fr;
    }

    .rainfall-overview-arrow {

        display: none;
    }

}

@media (max-width: 700px) {

    .seasonal-rain-summary-grid {

        grid-template-columns: 1fr;
    }

}

/* =====================================================
   극한기후 변화 페이지
   상단 핵심 지표 5개
===================================================== */

#extremePage .extreme-summary {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 16px;
}


/* =====================================================
   카드
===================================================== */

#extremePage .extreme-summary .extreme-kpi-card {

    min-width: 0;

    min-height: 154px;

    padding: 14px 16px;
}


/* =====================================================
   카드 제목
===================================================== */

#extremePage .extreme-summary .card-label {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 12px;

    font-weight: 700;

    color: #556575;
}


#extremePage .extreme-kpi-icon {

    font-size: 18px;

    line-height: 1;
}


/* =====================================================
   메인 변화량
===================================================== */

#extremePage .extreme-summary .temperature-card-main {

    margin-top: 12px;

    font-size: 25px;

    font-weight: 800;
}


/* =====================================================
   10년당 변화
===================================================== */

#extremePage .extreme-summary .temperature-card-trend {

    margin-top: 8px;

    font-size: 10px;

    font-weight: 600;
}


/* =====================================================
   증가 / 감소 배지
===================================================== */

#extremePage .extreme-summary .temperature-card-status {

    margin-top: 9px;

    padding: 4px 11px;

    font-size: 10px;
}


/* =====================================================
   폭염 : 주황
===================================================== */

#extremePage .extreme-heatwave-card
.temperature-card-main.increase,

#extremePage .extreme-heatwave-card
.temperature-card-trend.increase {

    color: #f06a28;
}


#extremePage .extreme-heatwave-card
.temperature-card-status.increase {

    color: #e76532;

    background: #fff1eb;
}


/* =====================================================
   열대야 : 보라
===================================================== */

#extremePage .extreme-tropical-card
.temperature-card-main.increase,

#extremePage .extreme-tropical-card
.temperature-card-trend.increase {

    color: #7655d6;
}


#extremePage .extreme-tropical-card
.temperature-card-status.increase {

    color: #7655d6;

    background: #f3efff;
}


/* =====================================================
   한파 / 결빙 / 서리 감소 : 파랑
===================================================== */

#extremePage .extreme-cold-card
.temperature-card-main.decrease,

#extremePage .extreme-cold-card
.temperature-card-trend.decrease,

#extremePage .extreme-freezing-card
.temperature-card-main.decrease,

#extremePage .extreme-freezing-card
.temperature-card-trend.decrease,

#extremePage .extreme-frost-card
.temperature-card-main.decrease,

#extremePage .extreme-frost-card
.temperature-card-trend.decrease {

    color: #2563eb;
}


/* =====================================================
   반응형
===================================================== */

@media (max-width: 1200px) {

    #extremePage .extreme-summary {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    #extremePage .extreme-summary {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 500px) {

    #extremePage .extreme-summary {

        grid-template-columns:
            1fr;
    }

}

/* =====================================================
   극한기후 상단 핵심지표 제목
===================================================== */

#extremePage .extreme-summary-title {

    margin-bottom: 10px;

    font-size: 14px;

    color: #334155;
}


#extremePage .extreme-summary-title strong {

    font-weight: 700;
}

/* =====================================================
   극한기후
   폭염·열대야 변화 추이 + 연대 평균
===================================================== */

#extremePage .extreme-trend-area {

    display: grid;

    grid-template-columns:
        125px
        minmax(0, 1fr)
        125px;

    gap: 12px;

    align-items: center;

    margin-top: 4px;
}


/* =====================================================
   좌우 연대 평균
===================================================== */

#extremePage .extreme-decade-summary {

    min-width: 0;

    padding: 12px 10px;

    background: #f8fafc;

    border: 1px solid #e5eaf0;

    border-radius: 9px;

    text-align: center;
}


#extremePage .extreme-decade-title {

    font-size: 11px;

    font-weight: 700;

    color: #475569;
}


#extremePage .extreme-decade-summary > small {

    display: block;

    margin-top: 3px;

    margin-bottom: 12px;

    font-size: 8px;

    color: #94a3b8;
}


/* 각 지표 */

#extremePage .extreme-decade-metric {

    padding: 8px 3px;
}


#extremePage .extreme-decade-metric + .extreme-decade-metric {

    border-top: 1px solid #edf1f5;
}


#extremePage .extreme-decade-metric span {

    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    color: #64748b;
}


#extremePage .extreme-decade-metric strong {

    display: block;

    font-size: 17px;

    font-weight: 800;
}


/* 폭염 */

#extremePage .extreme-decade-metric.heatwave strong {

    color: #f97316;
}


/* 열대야 */

#extremePage .extreme-decade-metric.tropical strong {

    color: #8b5cf6;
}


/* =====================================================
   가운데 그래프
===================================================== */

#extremePage .extreme-trend-chart {

    width: 100%;

    height: 270px;

    min-width: 0;
}


/* =====================================================
   하단 증가량
===================================================== */

#extremePage .extreme-decade-change-panel {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 10px;
}


#extremePage .extreme-decade-change-item {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    column-gap: 7px;

    row-gap: 2px;

    padding: 9px 12px;

    border-radius: 8px;

    background: #f8fafc;

    border: 1px solid #e6ebf0;

    text-align: center;
}


#extremePage .extreme-decade-change-item span {

    font-size: 10px;

    font-weight: 700;

    color: #475569;
}


#extremePage .extreme-decade-change-item strong {

    font-size: 14px;

    font-weight: 800;
}


#extremePage .extreme-decade-change-item small {

    width: 100%;

    font-size: 8px;

    color: #94a3b8;
}


/* 폭염 증가 */

#extremePage .extreme-decade-change-item.heatwave strong {

    color: #f97316;
}


/* 열대야 증가 */

#extremePage .extreme-decade-change-item.tropical strong {

    color: #8b5cf6;
}

/* =====================================================
   극한기후 페이지 - 저온 극한기후지수 변화
===================================================== */

#extremePage .cold-extreme-card {
    min-height: 100%;
}

#extremePage .cold-extreme-chart {
    height: 260px;
}

#extremePage .cold-extreme-card .chart-header {
    margin-bottom: 10px;
}

/* =====================================================
   극한기후지수 10년당 변화 추세
===================================================== */

#extremePage .extreme-decade-section {

    margin-top: 16px;

    padding: 16px 18px;

    min-height: 315px;
}


/* ==========================================
   5개 지표 가로 배치
========================================== */

#extremePage .extreme-decade-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    margin-top: 8px;
}


/* ==========================================
   지표 하나
========================================== */

#extremePage .extreme-decade-item {

    min-width: 0;

    padding: 6px 14px 4px;

    border-right:
        1px solid #e6ebf0;
}


#extremePage .extreme-decade-item:last-child {

    border-right: none;
}


/* 지표명 */

#extremePage .extreme-decade-item-title {

    margin-bottom: 4px;

    font-size: 12px;

    font-weight: 700;

    color: #334155;
}


/* 10년당 변화량 */

#extremePage .extreme-decade-trend-value {

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 800;
}


#extremePage .extreme-decade-trend-value.increase {

    color: #f97316;
}


#extremePage .extreme-decade-item.tropical
.extreme-decade-trend-value.increase {

    color: #7c3aed;
}


#extremePage .extreme-decade-trend-value.decrease {

    color: #2563eb;
}


#extremePage .extreme-decade-trend-value.same {

    color: #64748b;
}


/* ==========================================
   미니차트
========================================== */

#extremePage .extreme-mini-chart {

    position: relative;

    width: 100%;

    height: 155px;
}


/* ==========================================
   하단 설명
========================================== */

#extremePage .extreme-decade-note {

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 34px;

    margin-top: 8px;

    padding: 7px 12px;

    border: 1px solid #e4eaf0;

    border-radius: 7px;

    background: #f8fafc;

    font-size: 10px;

    color: #64748b;
}


#extremePage .extreme-decade-note-icon {

    color: #2563eb;

    font-size: 12px;
}


/* ==========================================
   반응형
========================================== */

@media (max-width: 1100px) {

    #extremePage .extreme-decade-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    #extremePage .extreme-decade-item {

        border-right: none;

        border-bottom:
            1px solid #e6ebf0;
    }

}


@media (max-width: 700px) {

    #extremePage .extreme-decade-grid {

        grid-template-columns:
            1fr;
    }

}

/* ==========================================
   계절 변화 페이지 상단 3박스
========================================== */

.season-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.7fr;
    gap: 16px;
    margin-bottom: 18px;
    align-items: stretch;
}

.season-top-card {
    min-height: 140px;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid #e4eaef;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(30, 50, 65, 0.04);
}

.season-top-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.season-top-icon {
    font-size: 22px;
    line-height: 1;
}

.season-top-title {
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}

.season-top-value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}

.season-top-value.increase {
    color: #16a34a;
}

.season-top-value.decrease {
    color: #2563eb;
}

.season-top-value.same {
    color: #475569;
}

.season-top-description {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}

.season-top-info-card {
    min-height: 140px;
    padding: 22px 24px;
    background: #eef7ef;
    border: 1px solid #dbeadf;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.season-top-info-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
}

.season-top-info-text h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: #2f6b42;
}

.season-top-info-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #5f7468;
}

/* 반응형 */
@media (max-width: 1100px) {
    .season-top-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   계절 변화 페이지
   계절 길이 변화 비교 전용 스타일
   우리 지역 요약에는 영향 없음
===================================================== */

#seasonPage .season-comparison-card {
    padding-bottom: 12px;
}


#seasonPage .season-comparison-card .season-subtitle {

    margin-left: 4px;

    font-size: 12px;

    font-weight: 600;

    color: #7b8794;
}


/* =====================================================
   4개 계절 배치
===================================================== */

#seasonPage .season-comparison-card .season-comparison-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;

    margin-top: 6px;

    padding: 8px 0;
}


#seasonPage .season-comparison-card .season-comparison-item {

    min-width: 0;

    padding: 12px 16px 10px;

    border-right:
        1px solid #e7edf2;

    text-align: center;
}


#seasonPage .season-comparison-card
.season-comparison-item:last-child {

    border-right: none;
}


/* =====================================================
   계절 제목
===================================================== */

#seasonPage .season-comparison-card .season-compare-head {

    margin-bottom: 12px;
}


#seasonPage .season-comparison-card .season-icon {

    margin-bottom: 6px;

    font-size: 24px;
}


#seasonPage .season-comparison-card .season-name {

    font-size: 14px;

    font-weight: 800;

    line-height: 1.2;

    color: #334155;
}


#seasonPage .season-comparison-card .season-period {

    margin: 3px 0 0;

    font-size: 10px;

    font-weight: 600;

    color: #7b8794;
}


/* =====================================================
   과거 / 최근 막대
===================================================== */

#seasonPage .season-comparison-card .season-bar-group {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 8px;
}


#seasonPage .season-comparison-card .season-bar-row {

    display: grid;

    grid-template-columns:
        52px minmax(0, 1fr) 38px;

    align-items: center;

    gap: 8px;
}


#seasonPage .season-comparison-card .season-bar-label {

    font-size: 9px;

    color: #7b8794;

    text-align: left;

    white-space: nowrap;
}


#seasonPage .season-comparison-card .season-bar-track {

    position: relative;

    width: 100%;

    height: 10px;

    overflow: hidden;

    background: #eef2f6;

    border-radius: 999px;
}


#seasonPage .season-comparison-card .season-bar-fill {

    height: 100%;

    border-radius: 999px;
}


/* =====================================================
   계절별 색상
===================================================== */

#seasonPage .season-comparison-card
.season-bar-fill.spring {

    background: #ef8fb0;
}


#seasonPage .season-comparison-card
.season-bar-fill.summer {

    background: #67c58a;
}


#seasonPage .season-comparison-card
.season-bar-fill.autumn {

    background: #f2a166;
}


#seasonPage .season-comparison-card
.season-bar-fill.winter {

    background: #76a7f5;
}


#seasonPage .season-comparison-card
.season-bar-fill.recent {

    filter:
        saturate(1.15)
        brightness(0.98);
}


/* =====================================================
   막대 옆 숫자
===================================================== */

#seasonPage .season-comparison-card .season-bar-value {

    font-size: 10px;

    font-weight: 700;

    color: #5b6774;

    text-align: right;

    white-space: nowrap;
}


/* =====================================================
   변화량
===================================================== */

#seasonPage .season-comparison-card .season-change {

    margin-top: 14px;

    padding-top: 0;

    font-size: 20px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.4px;

    color: #64748b;

    text-align: center;
}


#seasonPage .season-comparison-card
.season-change.positive {

    color: #16a34a;
}


#seasonPage .season-comparison-card
.season-change.negative {

    color: #2563eb;
}


/* =====================================================
   하단 기준기간 안내
===================================================== */

#seasonPage .season-comparison-card
.season-comparison-note {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    padding: 10px 12px;

    border: 1px solid #e6edf3;

    border-radius: 8px;

    background: #f8fafc;

    font-size: 11px;

    color: #64748b;
}


#seasonPage .season-comparison-card
.season-note-icon {

    color: #5f6ee6;

    font-weight: 700;
}


/* =====================================================
   반응형
===================================================== */

@media (max-width: 1200px) {

    #seasonPage .season-comparison-card
    .season-comparison-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    #seasonPage .season-comparison-card
    .season-comparison-item {

        border-right: none;

        border-bottom:
            1px solid #e7edf2;
    }

}


@media (max-width: 700px) {

    #seasonPage .season-comparison-card
    .season-comparison-grid {

        grid-template-columns:
            1fr;
    }


    #seasonPage .season-comparison-card
    .season-bar-row {

        grid-template-columns:
            48px minmax(0, 1fr) 36px;
    }

}

/* =====================================================
   계절 변화 페이지
   연대별 여름·겨울 길이 변화 추세
===================================================== */

#seasonPage .season-trend-card {

    min-width: 0;

    padding-bottom: 14px;
}


/* =====================================================
   과거 평균 | 그래프 | 최근 평균
===================================================== */

#seasonPage .season-trend-layout {

    display: grid;

    grid-template-columns:
        105px
        minmax(0, 1fr)
        105px;

    gap: 10px;

    align-items: center;

    margin-top: 4px;
}


/* =====================================================
   좌우 평균 박스
===================================================== */

#seasonPage .season-trend-period-card {

    min-width: 0;

    padding: 12px 8px;

    background: #f8fafc;

    border: 1px solid #e5ebf0;

    border-radius: 9px;

    text-align: center;
}


#seasonPage .season-trend-period-title {

    font-size: 10px;

    font-weight: 700;

    color: #475569;
}


#seasonPage .season-trend-period-card > small {

    display: block;

    margin-top: 3px;

    margin-bottom: 10px;

    font-size: 8px;

    color: #94a3b8;
}


/* =====================================================
   여름 / 겨울 평균값
===================================================== */

#seasonPage .season-trend-period-item {

    padding: 7px 2px;
}


#seasonPage
.season-trend-period-item
+
.season-trend-period-item {

    border-top: 1px solid #e9eef3;
}


#seasonPage .season-trend-period-item span {

    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    color: #64748b;
}


#seasonPage .season-trend-period-item strong {

    display: block;

    font-size: 16px;

    font-weight: 800;
}


/* 여름 : 초록 */

#seasonPage
.season-trend-period-item.summer
strong {

    color: #16a36a;
}


/* 겨울 : 파랑 */

#seasonPage
.season-trend-period-item.winter
strong {

    color: #3b82f6;
}


/* =====================================================
   그래프 영역
===================================================== */

#seasonPage .season-trend-chart-container {

    width: 100%;

    min-width: 0;

    height: 245px;
}


/* =====================================================
   그래프 아래 설명
===================================================== */

#seasonPage .season-trend-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 34px;

    margin-top: 9px;

    padding: 8px 12px;

    background: #f8fafc;

    border: 1px solid #e5ebf0;

    border-radius: 8px;

    font-size: 10px;

    font-weight: 600;

    color: #5b6774;

    text-align: center;
}


#seasonPage .season-trend-note-icon {

    color: #5f6ee6;

    font-size: 11px;
}

/* =====================================================
   계절 변화 페이지 하단
   계절 길이 한눈에 보기 + 계절 시작 시기
===================================================== */

#seasonPage .season-bottom-grid {

    display: grid;

    grid-template-columns:
        1fr 1.05fr;

    gap: 14px;

    margin-top: 16px;

    align-items: stretch;
}


/* =====================================================
   1. 계절 길이 변화 한눈에 보기
===================================================== */

#seasonPage .season-overview-detail-card {

    min-width: 0;

    min-height: 250px;

    padding: 16px;
}


#seasonPage .season-overview-compare {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        28px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    margin-top: 6px;
}


/* 과거 / 최근 묶음 */

#seasonPage .season-overview-period-box {

    min-width: 0;

    padding: 12px 10px;

    background: #fbfdff;

    border: 1px solid #e7edf2;

    border-radius: 10px;
}


#seasonPage .season-overview-period-title {

    text-align: center;

    margin-bottom: 12px;
}


#seasonPage .season-overview-period-title strong {

    display: block;

    font-size: 11px;

    color: #475569;
}


#seasonPage .season-overview-period-title span {

    display: block;

    margin-top: 3px;

    font-size: 8px;

    color: #94a3b8;
}


/* 4계절 */

#seasonPage .season-overview-season-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 4px;
}


#seasonPage .season-overview-season {

    min-width: 0;

    text-align: center;
}


#seasonPage .season-overview-season-icon {

    font-size: 19px;

    line-height: 1;

    margin-bottom: 5px;
}


#seasonPage .season-overview-season span {

    display: block;

    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 700;

    color: #64748b;
}


#seasonPage .season-overview-season strong {

    display: block;

    font-size: 13px;

    font-weight: 800;
}


/* 계절별 숫자 색상 */

#seasonPage
.season-overview-season.spring
strong {

    color: #34a879;
}


#seasonPage
.season-overview-season.summer
strong {

    color: #159447;
}


#seasonPage
.season-overview-season.autumn
strong {

    color: #ef7c43;
}


#seasonPage
.season-overview-season.winter
strong {

    color: #3b82f6;
}


/* 가운데 화살표 */

#seasonPage .season-overview-main-arrow {

    font-size: 22px;

    font-weight: 700;

    text-align: center;

    color: #5f82ae;
}


/* 하단 문구 */

#seasonPage .season-overview-insight {

    margin-top: 10px;

    padding: 9px 12px;

    background: #eef8f1;

    border: 1px solid #deeee3;

    border-radius: 8px;

    text-align: center;

    font-size: 10px;

    line-height: 1.5;

    color: #2c6950;
}


#seasonPage .season-overview-insight strong {

    font-weight: 800;

    color: #16734d;
}


/* =====================================================
   2. 계절별 시작 시기 변화
===================================================== */

#seasonPage .season-start-detail-card {

    min-width: 0;

    min-height: 250px;

    padding: 16px;
}


#seasonPage .season-start-title-note {

    margin-left: 3px;

    font-size: 10px;

    font-weight: 500;

    color: #7b8794;
}


#seasonPage .season-start-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 7px;

    margin-top: 8px;
}


#seasonPage .season-start-item {

    min-width: 0;

    padding: 11px 6px;

    background: #f8fafc;

    border: 1px solid #edf1f4;

    border-radius: 9px;

    text-align: center;
}


/* 제목 */

#seasonPage .season-start-item-title {

    margin-bottom: 10px;

    font-size: 10px;

    font-weight: 700;

    color: #475569;
}


/* 날짜 */

#seasonPage .season-start-date-flow {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;
}


#seasonPage .season-start-date-flow strong {

    display: block;

    margin: 0;

    font-size: 12px;

    font-weight: 800;

    color: #334155;
}


#seasonPage .season-start-date-flow span {

    font-size: 11px;

    color: #94a3b8;
}


/* 변화 배지 */

#seasonPage .season-start-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 23px;

    margin-top: 9px;

    padding: 3px 9px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 700;

    white-space: nowrap;
}


/* 봄 */

#seasonPage
.season-start-badge.spring {

    color: #e35c82;

    background: #fff0f4;
}


/* 여름 */

#seasonPage
.season-start-badge.summer {

    color: #159447;

    background: #ecf8f0;
}


/* 가을 */

#seasonPage
.season-start-badge.autumn {

    color: #e66f34;

    background: #fff2e9;
}


/* 겨울 */

#seasonPage
.season-start-badge.winter {

    color: #2563eb;

    background: #edf4ff;
}


/* 변화 없음 */

#seasonPage
.season-start-badge.same {

    color: #64748b;

    background: #f1f5f9;
}


/* 하단 설명 */

#seasonPage .season-start-insight {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 32px;

    margin-top: 10px;

    padding: 8px 10px;

    background: #f8fafc;

    border: 1px solid #e7edf2;

    border-radius: 8px;

    font-size: 9px;

    line-height: 1.5;

    color: #64748b;

    text-align: center;
}


#seasonPage .season-start-insight-icon {

    color: #5b6ee1;

    font-size: 10px;
}


/* =====================================================
   반응형
===================================================== */

@media (max-width: 1100px) {

    #seasonPage .season-bottom-grid {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    #seasonPage .season-overview-compare {

        grid-template-columns:
            1fr;
    }


    #seasonPage .season-overview-main-arrow {

        transform:
            rotate(90deg);
    }


    #seasonPage .season-start-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =====================================================
   왼쪽 사이드메뉴
   내 지역 기후변화 찾기
===================================================== */

.region-finder {

    margin:
        -24px
        -12px
        20px;

    padding:
        22px
        18px
        24px;

    background:
        linear-gradient(
            145deg,
            #173f69,
            #0f3158
        );

    color:
        #ffffff;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.12);
}


/* 제목 */

.region-finder-title {

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.4;

    color:
        #ffffff;
}


/* 설명 */

.region-finder-description {

    margin:
        9px 0 17px;

    font-size:
        11px;

    line-height:
        1.7;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
}


/* 현재 지역 박스 */

.region-current-box {

    width:
        100%;

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 12px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.35
        );

    border-radius:
        8px;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            0.08
        );
}


/* 위치 아이콘 */

.region-pin {

    flex:
        0 0 auto;

    font-size:
        19px;

    color:
        #295d91;

    line-height:
        1;
}


/* 지역명 */

#region-current-box,
#currentRegionName {
    min-width: 0;
}


#currentRegionName {

    flex:
        1;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        15px;

    font-weight:
        800;

    color:
        #172b40;
}


/* 오른쪽 화살표 */

.region-arrow {

    flex:
        0 0 auto;

    font-size:
        17px;

    font-weight:
        700;

    color:
        #577089;
}

/* =====================================================
   지역 선택 드롭다운
===================================================== */

.region-selector-wrap {
    position: relative;
}

.region-current-box {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-family: inherit;
}

.region-current-box:hover {
    background: #f8fbff;
}

.region-current-box:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(23, 105, 170, 0.18),
        0 3px 10px rgba(0, 0, 0, 0.08);
}

.region-pin {
    flex: 0 0 auto;
    font-size: 19px;
    color: #295d91;
    line-height: 1;
}

#currentRegionName {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
    color: #172b40;
    text-align: left;
}

.region-arrow {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 700;
    color: #577089;
    transition: transform 0.2s ease;
}

.region-arrow.open {
    transform: rotate(180deg);
}

.region-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #d9e3ec;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.region-dropdown.hidden {
    display: none;
}

.region-option {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.region-option:hover {
    background: #eef6ff;
    color: #1769aa;
}

.region-option.active {
    background: #eaf4ff;
    color: #1769aa;
    font-weight: 800;
}

.region-option.not-loaded {
    color: #9aa5b1;
}

.region-option.not-loaded:hover {
    background: #f8fafc;
    color: #64748b;
}

/* =====================================================
   우리 지역 요약
   충북 관측지점 선택 지도
===================================================== */

.climate-map-card {

    margin-bottom: 16px;

    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #e0e6ea;

    border-radius: 10px;

    box-shadow:
        0 2px 7px rgba(30, 50, 65, 0.04);
}


/* 상단 */

.climate-map-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 8px;
}


.climate-map-header h2 {

    margin: 0;

    font-size: 16px;

    color: #263b49;
}


.climate-map-header p {

    margin: 6px 0 0;

    font-size: 11px;

    color: #8b979f;
}


/* 충북 전체 버튼 */

.map-all-region-button {

    flex-shrink: 0;

    min-width: 110px;

    height: 36px;

    padding: 0 14px;

    border: 1px solid #d6e0e8;

    border-radius: 8px;

    background: #ffffff;

    color: #536575;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.map-all-region-button:hover {

    color: #1769aa;

    border-color: #9fc4e4;

    background: #f3f8fd;
}


.map-all-region-button.active {

    color: #ffffff;

    border-color: #1769aa;

    background: #1769aa;
}


/* 지도 영역 */

.climate-map-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 410px;

    overflow: hidden;
}


#chungbukClimateMap {

    display: block;

    width: 100%;

    max-width: 650px;

    height: auto;
}


/* 충북 경계 */

.chungbuk-map-boundary {

    fill: #d9efe2;

    stroke: #afd3be;

    stroke-width: 1.4;

    vector-effect: non-scaling-stroke;
}


/* ==========================================
   관측지점
========================================== */

.map-station {

    cursor: pointer;

    outline: none;
}


/* 바깥 원 */

.map-station-ring {

    fill: #ffffff;

    stroke: #244e68;

    stroke-width: 2;
}


/* 가운데 점 */

.map-station-dot {

    fill: #244e68;
}


/* 지역명 */

.map-station-label {

    fill: #34495e;

    font-family:
        "Malgun Gothic",
        "맑은 고딕",
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    pointer-events: none;
}


/* 마우스 올렸을 때 */

.map-station:hover .map-station-ring {

    fill: #eaf4ff;

    stroke: #1769aa;

    stroke-width: 3;
}


.map-station:hover .map-station-dot {

    fill: #1769aa;
}


/* 현재 선택 지역 */

.map-station.active .map-station-ring {

    fill: #1769aa;

    stroke: #1769aa;

    stroke-width: 3;
}


.map-station.active .map-station-dot {

    fill: #ffffff;
}


.map-station.active .map-station-label {

    fill: #1769aa;

    font-weight: 800;
}


/* 하단 현재 선택 */

.map-selected-region {

    margin-top: 8px;

    padding: 9px 12px;

    background: #f7f9fb;

    border-radius: 7px;

    text-align: center;

    font-size: 11px;

    color: #71808c;
}


.map-selected-region strong {

    margin-left: 3px;

    color: #1769aa;

    font-size: 12px;
}


/* 반응형 */

@media (max-width: 700px) {

    .climate-map-header {

        flex-direction: column;
    }


    .map-all-region-button {

        width: 100%;
    }


    .climate-map-wrap {

        min-height: 320px;
    }

}

/* =====================================================
   1. 충북 지도 카드 확대
===================================================== */

.climate-map-card {

    width: 390px;
    min-width: 390px;

    height: 390px;
    min-height: 390px;

    padding: 14px 16px;
}


/* 실제 지도 영역 확대 */

.climate-map-wrap {

    width: 100%;

    height: 305px;
    min-height: 305px;

    margin-top: 2px;
}


/* 충북 지도 자체 확대 */

#chungbukClimateMap {

    width: 355px;

    height: 295px;

    max-width: 355px;
}


/* 지점 이름도 약간 키움 */

.map-station-label {

    font-size: 12px;
}


/* 지점 원 */

.map-station-ring {

    r: 7.5px;
}

.map-station-dot {

    r: 3px;
}


/* =====================================================
   2. 메인 화면 기온 변화 박스 축소
===================================================== */

#overviewPage .temperature-overview-card {

    min-height: 350px;

    padding: 16px;
}


/* 기존 large 클래스의 420px 강제 크기 덮어쓰기 */

#overviewPage .chart-card.large.temperature-overview-card {

    min-height: 350px;
}


/* 기온 그래프 높이 축소 */

#overviewPage .temperature-overview-chart {

    height: 205px !important;
}


/* 제목 영역 간격 축소 */

#overviewPage .temperature-chart-header {

    margin-bottom: 8px;

    gap: 10px;
}


/* 제목 */

#overviewPage .temperature-chart-title h2 {

    font-size: 15px;
}


/* 설명 */

#overviewPage .temperature-chart-title p {

    margin-top: 3px;

    font-size: 10px;
}


/* 기온 선택 버튼도 조금 작게 */

#overviewPage .temperature-tabs {

    gap: 3px;

    padding: 3px;
}


#overviewPage .temperature-tab {

    min-width: 68px;

    height: 29px;

    padding: 0 9px;

    font-size: 10px;
}


/* 그래프 아래 통계박스 축소 */

#overviewPage .temperature-stat-panel {

    margin-top: 7px;

    gap: 6px;
}


#overviewPage .temperature-period-stat,
#overviewPage .temperature-longterm-stat {

    padding: 7px 8px;
}


#overviewPage .temperature-period-stat strong {

    font-size: 15px;
}


#overviewPage .temperature-longterm-stat strong {

    font-size: 16px;
}

.climate-map-card {
    width: 390px;
    min-width: 390px;

    height: 365px;
    min-height: 365px;
}

.climate-map-wrap {
    height: 280px;
    min-height: 280px;
}

#chungbukClimateMap {
    width: 355px;
    height: 275px;
}

/* =====================================================
   우리 지역 요약
   지도 + 기온 + 강수 3열 배치
===================================================== */

#overviewPage .overview-main-row {

    display: grid;

    grid-template-columns:
        minmax(320px, 0.95fr)
        minmax(0, 1.25fr)
        minmax(0, 1.15fr);

    gap: 12px;

    align-items: stretch;

    margin-bottom: 16px;
}


/* 세 카드 공통 */

#overviewPage .overview-main-row > * {

    min-width: 0;

    width: 100%;

    margin: 0;
}

/* =====================================================
   우리 지역 요약
   지도 + 기온 + 강수 최종 3열 배치
===================================================== */

#overviewPage .overview-main-row {

    display: grid;

    grid-template-columns:
        minmax(360px, 1.05fr)
        minmax(0, 1.35fr)
        minmax(0, 1.25fr);

    gap: 12px;

    align-items: stretch;

    margin-bottom: 16px;
}


/* =====================================================
   공통 카드
===================================================== */

#overviewPage .overview-main-row > * {

    min-width: 0;

    width: 100%;

    margin: 0;
}


/* =====================================================
   지도 카드
===================================================== */

#overviewPage .overview-main-row .climate-map-card {

    width: 100%;

    min-width: 0;

    height: 365px;

    min-height: 365px;

    padding: 14px 16px;

    margin: 0;
}


/* 지도 제목 */

#overviewPage .overview-main-row .climate-map-header {

    margin-bottom: 4px;
}


#overviewPage .overview-main-row .climate-map-header h2 {

    font-size: 14px;
}


/* 지도 영역 */

#overviewPage .overview-main-row .climate-map-wrap {

    width: 100%;

    height: 300px;

    min-height: 0;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* 실제 충북 지도 */

#overviewPage .overview-main-row #chungbukClimateMap {

    display: block;

    width: 100%;

    height: 285px;

    max-width: 350px;
}


/* =====================================================
   기온 카드
===================================================== */

#overviewPage .overview-main-row .temperature-overview-card {

    width: 100%;

    height: 365px;

    min-height: 365px;

    padding: 14px;
}


#overviewPage .overview-main-row
.chart-card.large.temperature-overview-card {

    min-height: 365px;
}


/* 기온 그래프 */

#overviewPage .overview-main-row
.temperature-overview-chart {

    height: 205px !important;
}


/* =====================================================
   강수 카드
===================================================== */

#overviewPage .overview-main-row
.rainfall-overview-card {

    width: 100%;

    height: 365px;

    min-height: 365px;

    padding: 14px;
}


#overviewPage .overview-main-row
.rainfall-overview-card .chart-container {

    height: 275px;
}

/* =====================================================
   지도 박스는 그대로 + 충북 지도만 확대
===================================================== */

#overviewPage .overview-main-row #chungbukClimateMap {

    width: 100%;
    height: 285px;
    max-width: 350px;

    transform: scale(1.38);
    transform-origin: center center;
}

/* ==========================================
   열대야 일최저 기준 표시
========================================== */

.tropical-daily-card {

    display: flex;
    flex-direction: column;
}


.tropical-daily-row {

    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: center;

    column-gap: 8px;

    padding: 8px 0;

    border-bottom: 1px solid #edf1f5;
}


.tropical-daily-row:last-child {

    border-bottom: none;
}


.tropical-daily-label {

    font-size: 10px;

    color: #7c8794;
}


.tropical-daily-row strong {

    font-size: 18px;

    color: #7655d6;
}


.tropical-daily-row small {

    grid-column: 1 / -1;

    margin-top: 2px;

    font-size: 9px;

    color: #7655d6;
}

/* ==========================================
   열대야 연대 평균
========================================== */

.tropical-average-values {

    display: grid;

    grid-template-columns: 1fr;

    gap: 8px;

    width: 100%;

    margin-top: 5px;

}


.tropical-average-values > div {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

}


.tropical-average-values small {

    font-size: 9px;

    color: #8a94a3;

}


.tropical-average-values strong {

    font-size: 15px;

    color: #7c3aed;

}

/* ==========================================
   열대야 미니그래프 기준 선택 버튼
========================================== */

.extreme-decade-item-title-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 6px;

}













/* ==========================================
   극한기후 변화 - 열대야 변화 표시
========================================== */

.tropical-change-item {

    padding-top: 8px;
    padding-bottom: 8px;
}


.tropical-change-title {

    margin-bottom: 5px;

    font-weight: 600;
}


.tropical-change-row {

    display: grid;

    grid-template-columns:
        40px 1fr auto;

    align-items: center;

    gap: 4px;

    padding: 3px 0;
}


.extreme-change-item
.tropical-change-row span {

    margin: 0;

    font-size: 8px;

    color: #8b95a1;
}


.extreme-change-item
.tropical-change-row strong {

    display: block;

    font-size: 12px;

    color: #263b49;
}


.extreme-change-item
.tropical-change-row small {

    margin: 0;

    padding: 2px 5px;

    font-size: 8px;
}

/* ==========================================
   상단 최근20년 - 과거20년 비교 제목
========================================== */

.summary-period-title {

    margin-bottom: 10px;

    font-size: 14px;

    color: #334155;
}


.summary-period-title strong {

    font-weight: 700;
}

/* 사이드바 지역 선택 지도 및 메뉴 여백 */
.main-nav {
    width: 320px;
    gap: 12px;
    padding: 24px 16px;
}

.main-nav > * {
    flex-shrink: 0;
}

.main-nav .region-finder {
    margin: -24px -16px 0;
    padding: 22px 24px 24px;
}

.main-nav .nav-button {
    min-height: 54px;
    padding: 12px 18px;
}

.main-nav .climate-map-card {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0 0 8px;
    padding: 14px 10px;
}

.main-nav .climate-map-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 4px;
}

.main-nav .climate-map-header h2 {
    font-size: 13px;
    line-height: 1.5;
}

.main-nav .climate-map-wrap {
    height: auto;
    min-height: 0;
    margin: 0;
}

.main-nav #chungbukClimateMap {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 440 / 430;
    transform: none;
}

.main-nav .map-station-label {
    font-size: 20px;
}

.dashboard, .dashboard-page {
    margin-left: 320px;
}

#overviewPage .overview-main-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    #overviewPage .overview-main-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 850px) {
    .main-nav {
        position: relative;
        top: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        margin-top: 86px;
        flex-direction: column;
        overflow: visible;
    }

    .main-nav .climate-map-card {
        max-width: 360px;
        align-self: center;
    }

    .dashboard, .dashboard-page {
        margin-left: 0;
        padding-top: 24px;
    }
}


/* 지도 배경은 충북 전체, 관측지점은 해당 지역 선택 */
.main-nav .chungbuk-boundary-layer {
    cursor: pointer;
}

.main-nav .chungbuk-boundary-layer:focus-visible .chungbuk-map-boundary {
    stroke: #1769aa;
    stroke-width: 2;
}

.main-nav .map-station-ring {
    r: 14px;
    stroke-width: 3;
}

.main-nav .map-station-dot {
    r: 5px;
}

.main-nav .map-station-label {
    pointer-events: all;
}

.main-nav .map-station:focus-visible .map-station-ring {
    stroke: #1769aa;
    stroke-width: 5;
}


/* 우리 지역 요약: 강수 지표 네 개가 겹치지 않도록 배치 */
#overviewPage .rainfall-chart-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
#overviewPage .rainfall-tabs {
    display: flex;
    flex-wrap: wrap;
}
#overviewPage .rainfall-tab {
    white-space: nowrap;
    flex: 1 0 auto;
}
#overviewPage .overview-main-row .rainfall-overview-card {
    display: flex;
    flex-direction: column;
}
#overviewPage .overview-main-row .rainfall-overview-card .chart-container {
    flex: 1;
    min-height: 0;
    height: auto;
}


/* 우리 지역 요약 상단 카드의 엑셀 기간 비교값 */
#overviewPage .overview-comparisons {
    display: grid;
    gap: 4px;
    margin-top: 7px;
    color: #64748b;
}

#overviewPage .overview-comparison-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    line-height: 1.25;
}

#overviewPage .overview-comparison-row span {
    min-width: 0;
    color: #7c8794;
    font-weight: 500;
}

#overviewPage .overview-comparison-row strong {
    font-size: 11px;
    white-space: nowrap;
}

#overviewPage .overview-comparison-row strong.increase {
    color: #ef6b3c;
}

#overviewPage .overview-comparison-row strong.decrease {
    color: #2d6cdf;
}

#overviewPage .overview-comparison-row strong.same {
    color: #64748b;
}

#overviewPage .tropical-daily-row small.overview-comparisons {
    display: grid;
    gap: 2px;
    margin-top: 4px;
}

#overviewPage .tropical-daily-row .overview-comparison-row {
    font-size: 8px;
}

#overviewPage .tropical-daily-row .overview-comparison-row strong {
    font-size: 9px;
}


/* 우리 지역 요약에 복제한 계절 결과 */
.season-summary-results {
    display: grid;
    gap: 18px;
    margin-bottom: 16px;
}

.season-summary-results .overview-season-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .season-summary-results .overview-season-top-grid {
        grid-template-columns: 1fr;
    }
}

.season-summary-results .season-comparison-card {
    padding-bottom: 12px;
}


.season-summary-results .season-comparison-card .season-subtitle {

    margin-left: 4px;

    font-size: 12px;

    font-weight: 600;

    color: #7b8794;
}


/* =====================================================
   4개 계절 배치
===================================================== */

.season-summary-results .season-comparison-card .season-comparison-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;

    margin-top: 6px;

    padding: 8px 0;
}


.season-summary-results .season-comparison-card .season-comparison-item {

    min-width: 0;

    padding: 12px 16px 10px;

    border-right:
        1px solid #e7edf2;

    text-align: center;
}


.season-summary-results .season-comparison-card
.season-comparison-item:last-child {

    border-right: none;
}


/* =====================================================
   계절 제목
===================================================== */

.season-summary-results .season-comparison-card .season-compare-head {

    margin-bottom: 12px;
}


.season-summary-results .season-comparison-card .season-icon {

    margin-bottom: 6px;

    font-size: 24px;
}


.season-summary-results .season-comparison-card .season-name {

    font-size: 14px;

    font-weight: 800;

    line-height: 1.2;

    color: #334155;
}


.season-summary-results .season-comparison-card .season-period {

    margin: 3px 0 0;

    font-size: 10px;

    font-weight: 600;

    color: #7b8794;
}


/* =====================================================
   과거 / 최근 막대
===================================================== */

.season-summary-results .season-comparison-card .season-bar-group {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 8px;
}


.season-summary-results .season-comparison-card .season-bar-row {

    display: grid;

    grid-template-columns:
        52px minmax(0, 1fr) 38px;

    align-items: center;

    gap: 8px;
}


.season-summary-results .season-comparison-card .season-bar-label {

    font-size: 9px;

    color: #7b8794;

    text-align: left;

    white-space: nowrap;
}


.season-summary-results .season-comparison-card .season-bar-track {

    position: relative;

    width: 100%;

    height: 10px;

    overflow: hidden;

    background: #eef2f6;

    border-radius: 999px;
}


.season-summary-results .season-comparison-card .season-bar-fill {

    height: 100%;

    border-radius: 999px;
}


/* =====================================================
   계절별 색상
===================================================== */

.season-summary-results .season-comparison-card
.season-bar-fill.spring {

    background: #ef8fb0;
}


.season-summary-results .season-comparison-card
.season-bar-fill.summer {

    background: #67c58a;
}


.season-summary-results .season-comparison-card
.season-bar-fill.autumn {

    background: #f2a166;
}


.season-summary-results .season-comparison-card
.season-bar-fill.winter {

    background: #76a7f5;
}


.season-summary-results .season-comparison-card
.season-bar-fill.recent {

    filter:
        saturate(1.15)
        brightness(0.98);
}


/* =====================================================
   막대 옆 숫자
===================================================== */

.season-summary-results .season-comparison-card .season-bar-value {

    font-size: 10px;

    font-weight: 700;

    color: #5b6774;

    text-align: right;

    white-space: nowrap;
}


/* =====================================================
   변화량
===================================================== */

.season-summary-results .season-comparison-card .season-change {

    margin-top: 14px;

    padding-top: 0;

    font-size: 20px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.4px;

    color: #64748b;

    text-align: center;
}


.season-summary-results .season-comparison-card
.season-change.positive {

    color: #16a34a;
}


.season-summary-results .season-comparison-card
.season-change.negative {

    color: #2563eb;
}


/* =====================================================
   하단 기준기간 안내
===================================================== */

.season-summary-results .season-comparison-card
.season-comparison-note {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    padding: 10px 12px;

    border: 1px solid #e6edf3;

    border-radius: 8px;

    background: #f8fafc;

    font-size: 11px;

    color: #64748b;
}


.season-summary-results .season-comparison-card
.season-note-icon {

    color: #5f6ee6;

    font-weight: 700;
}


/* =====================================================
   반응형
===================================================== */

@media (max-width: 1200px) {

    .season-summary-results .season-comparison-card
    .season-comparison-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .season-summary-results .season-comparison-card
    .season-comparison-item {

        border-right: none;

        border-bottom:
            1px solid #e7edf2;
    }

}


@media (max-width: 700px) {

    .season-summary-results .season-comparison-card
    .season-comparison-grid {

        grid-template-columns:
            1fr;
    }


    .season-summary-results .season-comparison-card
    .season-bar-row {

        grid-template-columns:
            48px minmax(0, 1fr) 36px;
    }

}



/* 우리 지역 요약 상단 카드의 기간별 비교값 가독성 확대 */
#overviewPage .overview-comparisons {
    gap: 7px;
    margin-top: 10px;
}

#overviewPage .overview-comparison-row {
    gap: 7px;
    font-size: 11px;
    line-height: 1.35;
}

#overviewPage .overview-comparison-row strong {
    font-size: 14px;
}

#overviewPage .tropical-daily-row small.overview-comparisons {
    gap: 5px;
    margin-top: 6px;
}

#overviewPage .tropical-daily-row .overview-comparison-row {
    font-size: 10px;
}

#overviewPage .tropical-daily-row .overview-comparison-row strong {
    font-size: 12px;
}

/* 좁은 카드에서도 비교 문구와 값이 끊기지 않도록 위아래 배치 */
#overviewPage .overview-comparison-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
}

#overviewPage .overview-comparison-row span {
    white-space: nowrap;
}

#overviewPage .overview-comparison-row strong {
    justify-self: start;
}


/* 우리 지역 요약 전체 글자 확대: 기존 그리드와 카드 형식 유지 */
#overviewPage .page-title h1 {
    font-size: 30px;
}

#overviewPage .page-title p {
    font-size: 15px;
}

#overviewPage .overview-summary-grid .summary-card {
    min-height: 185px;
    padding: 18px;
}

#overviewPage .card-label {
    font-size: 14px;
    line-height: 1.4;
}

#overviewPage .temperature-card-main {
    font-size: 28px;
}

#overviewPage .temperature-card-status {
    font-size: 13px;
}

#overviewPage .overview-comparison-row {
    font-size: 12px;
}

#overviewPage .overview-comparison-row strong {
    font-size: 16px;
}

#overviewPage .tropical-daily-label {
    font-size: 12px;
}

#overviewPage .tropical-daily-row strong {
    font-size: 21px;
}

#overviewPage .tropical-daily-row .overview-comparison-row {
    font-size: 11px;
}

#overviewPage .tropical-daily-row .overview-comparison-row strong {
    font-size: 14px;
}

#overviewPage .season-label {
    font-size: 13px;
}

#overviewPage .season-row strong {
    font-size: 23px;
}

#overviewPage .card-description {
    font-size: 11px;
}

#overviewPage .temperature-chart-title h2,
#overviewPage .rainfall-chart-title h2,
#overviewPage .chart-header h2 {
    font-size: 18px;
}

#overviewPage .temperature-chart-title p,
#overviewPage .rainfall-chart-title p,
#overviewPage .chart-header p {
    font-size: 13px;
}

#overviewPage .temperature-tab,
#overviewPage .rainfall-tab {
    font-size: 12px;
}

#overviewPage .overview-main-row .temperature-overview-card,
#overviewPage .overview-main-row .rainfall-overview-card {
    height: 395px;
    min-height: 395px;
}

#overviewPage .overview-main-row .temperature-overview-chart {
    height: 275px !important;
}

#overviewPage .season-top-title {
    font-size: 17px;
}

#overviewPage .season-top-value {
    font-size: 37px;
}

#overviewPage .season-top-description {
    font-size: 15px;
}

#overviewPage .season-comparison-card .season-subtitle {
    font-size: 14px;
}

#overviewPage .season-comparison-card .season-icon {
    font-size: 28px;
}

#overviewPage .season-comparison-card .season-name {
    font-size: 16px;
}

#overviewPage .season-comparison-card .season-period,
#overviewPage .season-comparison-card .season-bar-label {
    font-size: 11px;
}

#overviewPage .season-comparison-card .season-bar-value {
    font-size: 12px;
}

#overviewPage .season-comparison-card .season-change {
    font-size: 23px;
}

#overviewPage .season-comparison-card .season-comparison-note {
    font-size: 13px;
}

#overviewPage .data-status {
    font-size: 14px;
}

/* 단위가 긴 연강수량 메인값은 카드 안에서 잘리지 않도록 조정 */
#overviewPage #rainfallChange {
    font-size: 25px;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

/* 우리 지역 요약의 여름·겨울 길이 변화 카드만 축소 */
#overviewPage .overview-season-top-grid {
    gap: 12px;
}

#overviewPage .overview-season-top-grid .season-top-card {
    min-height: 112px;
    padding: 16px 20px;
}

#overviewPage .overview-season-top-grid .season-top-head {
    margin-bottom: 9px;
}

#overviewPage .overview-season-top-grid .season-top-icon {
    font-size: 20px;
}

#overviewPage .overview-season-top-grid .season-top-title {
    font-size: 15px;
}

#overviewPage .overview-season-top-grid .season-top-value {
    font-size: 31px;
}

#overviewPage .overview-season-top-grid .season-top-description {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
}

/* 우리 지역 요약 강수량 변화 버튼을 우측 상단에 작게 배치 */
#overviewPage .rainfall-chart-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

#overviewPage .rainfall-chart-title {
    flex: 0 1 auto;
    min-width: 92px;
}

#overviewPage .rainfall-tabs {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 2px;
    padding: 2px;
}

#overviewPage .rainfall-tab {
    flex: 0 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 7px;
    font-size: 10.5px;
}

/* 기온 변화 페이지 상단 장기추세 카드 배치 */
#temperaturePage .temperature-top-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 800px) {
    #temperaturePage .temperature-top-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    #temperaturePage .temperature-top-grid {
        grid-template-columns: 1fr;
    }
}

/* 기온 변화 페이지 상단의 기간별 비교값 */
#temperaturePage .temperature-comparisons {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    color: #64748b;
}

#temperaturePage .temperature-comparisons .overview-comparison-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
}

#temperaturePage .temperature-comparisons .overview-comparison-row span {
    min-width: 0;
    color: #7c8794;
    font-weight: 500;
    white-space: nowrap;
}

#temperaturePage .temperature-comparisons .overview-comparison-row strong {
    font-size: 14px;
    white-space: nowrap;
}

#temperaturePage .temperature-comparisons .overview-comparison-row strong.increase {
    color: #ef6b3c;
}

#temperaturePage .temperature-comparisons .overview-comparison-row strong.decrease {
    color: #2d6cdf;
}

#temperaturePage .temperature-comparisons .overview-comparison-row strong.same {
    color: #64748b;
}

/* 기온 변화 그래프 우측 상단 선택 버튼 */
#temperaturePage .temperature-page-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#temperaturePage .temperature-page-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #f3f6f9;
}

#temperaturePage .temperature-page-tab {
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

#temperaturePage .temperature-page-tab:hover {
    color: #1769aa;
    background: #e8f2fb;
}

#temperaturePage .temperature-page-tab.active {
    color: #ffffff;
    background: #2484bd;
    box-shadow: 0 2px 6px rgba(36, 132, 189, 0.24);
}

@media (max-width: 650px) {
    #temperaturePage .temperature-page-chart-header {
        flex-direction: column;
    }

    #temperaturePage .temperature-page-tabs {
        width: 100%;
    }

    #temperaturePage .temperature-page-tab {
        flex: 1;
        padding: 0 6px;
    }
}

/* 연대별 기온 변화 그래프 선택 버튼 */
#temperaturePage .temperature-decade-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

#temperaturePage .temperature-decade-tabs {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    gap: 2px;
    padding: 2px;
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #f3f6f9;
}

#temperaturePage .temperature-decade-tab {
    flex: 0 0 auto;
    min-width: 0;
    height: 27px;
    padding: 0 5px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

#temperaturePage .temperature-decade-tab:hover {
    color: #1769aa;
    background: #e8f2fb;
}

#temperaturePage .temperature-decade-tab.active {
    color: #ffffff;
    background: #2484bd;
    box-shadow: 0 2px 6px rgba(36, 132, 189, 0.24);
}

#temperaturePage .temperature-decade-card .chart-container {
    height: 360px;
}

/* 기온 변화 페이지의 계절별·월별 기온 그래프 */
#temperaturePage .temperature-period-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

#temperaturePage .temperature-period-card {
    min-width: 0;
    margin: 0;
}

#temperaturePage .temperature-period-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#temperaturePage .temperature-period-header > div:first-child {
    min-width: 0;
}

#temperaturePage .temperature-period-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px;
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #f3f6f9;
}

#temperaturePage .temperature-period-tab {
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

#temperaturePage .temperature-period-tab:hover {
    color: #1769aa;
    background: #e8f2fb;
}

#temperaturePage .temperature-period-tab.active {
    color: #ffffff;
    background: #2484bd;
    box-shadow: 0 2px 6px rgba(36, 132, 189, 0.24);
}

#temperaturePage .temperature-comparison-tabs {
    display: flex;
    width: 100%;
    gap: 4px;
    margin: 10px 0 2px;
    padding: 3px;
    border-radius: 9px;
    background: #f3f6f9;
}

#temperaturePage .temperature-comparison-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 32px;
    padding: 5px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #607080;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    cursor: pointer;
}

#temperaturePage .temperature-comparison-tab:hover {
    color: #1769aa;
    background: #e8f2fb;
}

#temperaturePage .temperature-comparison-tab.active {
    color: #ffffff;
    background: #2484bd;
    box-shadow: 0 2px 6px rgba(36, 132, 189, 0.24);
}

/* 기온 변화 페이지 전체 글자 확대: 기존 카드와 그래프 배치 유지 */
#temperaturePage .page-title h1 {
    font-size: 30px;
}

#temperaturePage .page-title p {
    font-size: 15px;
}

#temperaturePage .temperature-top-grid .summary-card {
    min-height: 175px;
    padding: 18px;
}

#temperaturePage .card-label {
    font-size: 15px;
    line-height: 1.4;
}

#temperaturePage .temperature-card-main {
    font-size: 28px;
}

#temperaturePage .temperature-card-status {
    font-size: 13px;
}

#temperaturePage .temperature-comparisons .overview-comparison-row {
    font-size: 13px;
}

#temperaturePage .temperature-comparisons .overview-comparison-row strong {
    font-size: 16px;
}

#temperaturePage .chart-header h2 {
    font-size: 18px;
}

#temperaturePage .chart-header p {
    font-size: 13px;
    line-height: 1.45;
}

#temperaturePage .temperature-page-tab {
    height: 35px;
    padding: 0 10px;
    font-size: 11.5px;
}

#temperaturePage .temperature-decade-tab {
    height: 31px;
    padding: 0 6px;
    font-size: 10.5px;
}

#temperaturePage .temperature-period-tab {
    height: 34px;
    padding: 0 9px;
    font-size: 12px;
}

#temperaturePage .temperature-comparison-tab {
    min-height: 36px;
    font-size: 12px;
}

#temperaturePage .temperature-decade-header h2 {
    font-size: 17px;
}

#temperaturePage .temperature-decade-header p,
#temperaturePage .temperature-period-header p {
    font-size: 12px;
}

#temperaturePage .temperature-page-period-stat span {
    font-size: 12px;
}

#temperaturePage .temperature-page-period-stat strong {
    font-size: 21px;
}

#temperaturePage .temperature-page-period-stat small {
    font-size: 11px;
}

#temperaturePage .temperature-page-longterm-stat span {
    font-size: 14px;
}

#temperaturePage .temperature-page-longterm-stat strong {
    font-size: 23px;
}

#temperaturePage .temperature-page-longterm-stat em {
    font-size: 14px;
}

#temperaturePage .temperature-page-longterm-stat small {
    font-size: 12px;
}

#temperaturePage .temperature-period-chart-container {
    height: 320px;
}

@media (max-width: 1050px) {
    #temperaturePage .temperature-period-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    #temperaturePage .temperature-period-header {
        flex-direction: column;
    }

    #temperaturePage .temperature-period-tabs {
        width: 100%;
    }

    #temperaturePage .temperature-period-tab {
        flex: 1;
    }
}

/* 일최저 기준 단일 지표 레이아웃 */
.tropical-basis-label { font-size: 11px; color: #7c3aed; }
#overviewPage .tropical-daily-row,
#extremePage .tropical-daily-row { grid-template-columns: 1fr; border: 0; gap: 5px; }
#overviewPage .tropical-daily-row > strong,
#extremePage .tropical-daily-row > strong { font-size: 28px; line-height: 1.2; }

/* 상단 카드: 변화량 숫자만 표시 */
#overviewPage .temperature-card-status,
#temperaturePage .temperature-card-status,
#extremePage .temperature-card-status,
#seasonPage .temperature-card-status,
#rainfallPage .temperature-card-status {
    display: none;
}

/* 요약 제목 오른쪽의 비교기간 안내 */
#overviewPage .page-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
#overviewPage .overview-period-legend {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px 22px;
    margin: 0 0 0 auto;
    padding: 12px 16px;
    border: 1px solid #dce4eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}
#overviewPage .overview-period-legend > div { display: flex; gap: 10px; }
#overviewPage .overview-period-legend dt { font-weight: 700; color: #334155; }
#overviewPage .overview-period-legend dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    #overviewPage .overview-period-legend { margin-left: 0; grid-template-columns: 1fr; }
}

/* 요약 카드: 추세 제목 → 대표값 → 기간별 비교 두 줄 */
#overviewPage .overview-summary-grid .summary-card:not(.season-card) {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px;
    min-width: 0;
}
#overviewPage .overview-summary-grid .summary-card:not(.season-card) .card-label {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
}
#overviewPage .overview-trend-caption {
    display: inline;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}
#overviewPage .overview-summary-grid .temperature-card-main,
#overviewPage .overview-summary-grid #tropicalDailyChange {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 18px;
}
#overviewPage .overview-summary-grid .temperature-card-trend,
#overviewPage .overview-summary-grid #tropicalDailyTrend {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0;
}
#overviewPage .overview-summary-grid .overview-comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    font-size: 13px;
    line-height: 1.5;
}
#overviewPage .overview-summary-grid .overview-comparison-row span { color: #64748b; }
#overviewPage .overview-summary-grid .overview-comparison-row strong {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
#overviewPage .overview-summary-grid .tropical-daily-row {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
}
#overviewPage .overview-summary-grid .temperature-card-status { display: none; }

/* 요약 계절 영역: 왼쪽 여름/겨울, 오른쪽 사계절 비교 */
#overviewPage .season-summary-results {
    display: grid;
    grid-template-columns: minmax(240px, 0.85fr) minmax(0, 2.15fr);
    align-items: stretch;
    gap: 20px;
}
#overviewPage .season-summary-results > .overview-season-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    margin: 0;
    min-width: 0;
}
#overviewPage .season-summary-results > .season-comparison-card {
    margin: 0;
    min-width: 0;
    width: auto;
}
@media (max-width: 1000px) {
    #overviewPage .season-summary-results { grid-template-columns: minmax(0, 1fr); }
}

/* 여름·겨울 카드 내부의 남는 높이를 내용 사이에 고르게 배분 */
#overviewPage .overview-season-top-grid .season-top-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
}
#overviewPage .overview-season-top-grid .season-top-head {
    margin: 0;
}
#overviewPage .overview-season-top-grid .season-top-value {
    margin: 0;
    line-height: 1.25;
}
#overviewPage .overview-season-top-grid .season-top-description {
    margin: 0;
    line-height: 1.5;
}
/* 상단 계절 길이 카드도 제목·변화량·설명을 고르게 배치 */
#overviewPage .overview-summary-grid .season-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 20px;
    min-width: 0;
}
#overviewPage .overview-summary-grid .season-card .card-label {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
}
#overviewPage .overview-summary-grid .season-card .season-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
#overviewPage .overview-summary-grid .season-card .season-row > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
#overviewPage .overview-summary-grid .season-card .season-row strong {
    margin: 0;
    font-size: 30px;
    line-height: 1.25;
}
#overviewPage .overview-summary-grid .season-card .card-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}
/* 상단 계절 변화량: 여름은 초록, 겨울은 파랑 */
#overviewPage .overview-summary-grid .season-card #summerChange {
    color: #16a34a;
}
#overviewPage .overview-summary-grid .season-card #winterChange {
    color: #2563eb;
}
/* 기온 상단 카드의 변화추세 안내는 제목 옆에 표시 */
#temperaturePage .temperature-top-grid .card-label {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
#temperaturePage .temperature-top-grid .temperature-trend-caption {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}

/* 기온 제목 오른쪽의 비교기간 안내 */
#temperaturePage .page-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
#temperaturePage .temperature-period-legend {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px 22px;
    margin: 0 0 0 auto;
    padding: 12px 16px;
    border: 1px solid #dce4eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}
#temperaturePage .temperature-period-legend > div { display: flex; gap: 10px; }
#temperaturePage .temperature-period-legend dt { font-weight: 700; color: #334155; }
#temperaturePage .temperature-period-legend dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    #temperaturePage .temperature-period-legend { margin-left: 0; grid-template-columns: 1fr; }
}


/* 기온 상단 카드의 글자 크기·간격을 우리 지역 요약과 통일 */
#temperaturePage .temperature-top-grid .summary-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px;
    min-width: 0;
    min-height: 0;
}
#temperaturePage .temperature-top-grid .card-label {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 12px;
}
#temperaturePage .temperature-top-grid .temperature-trend-caption {
    font-size: 12px;
    font-weight: 500;
}
#temperaturePage .temperature-top-grid .temperature-card-main {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 18px;
}
#temperaturePage .temperature-top-grid .temperature-card-trend {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0;
}
#temperaturePage .temperature-top-grid .overview-comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    font-size: 13px;
    line-height: 1.5;
}
#temperaturePage .temperature-top-grid .overview-comparison-row span {
    color: #64748b;
}
#temperaturePage .temperature-top-grid .overview-comparison-row strong {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
#temperaturePage .temperature-top-grid .temperature-card-status { display: none; }
/* 기온 그래프 양옆에 과거·최근 평균 배치 */
#temperaturePage .temperature-graph-with-periods {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 100px;
    gap: 12px;
    align-items: center;
}
#temperaturePage .temperature-graph-with-periods > .chart-container {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
}
#temperaturePage .temperature-graph-with-periods > .temperature-page-stat-panel {
    display: contents;
}
#temperaturePage .temperature-graph-with-periods .temperature-page-period-stat {
    padding: 12px 4px;
    border: 0;
    min-width: 0;
    text-align: center;
    grid-row: 1;
}
#temperaturePage .temperature-graph-with-periods .temperature-page-period-stat:first-child { grid-column: 1; }
#temperaturePage .temperature-graph-with-periods .temperature-page-period-stat:last-child { grid-column: 3; }
@media (max-width: 700px) {
    #temperaturePage .temperature-graph-with-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #temperaturePage .temperature-graph-with-periods > .chart-container { grid-column: 1 / -1; }
    #temperaturePage .temperature-graph-with-periods .temperature-page-period-stat { grid-row: 2; }
    #temperaturePage .temperature-graph-with-periods .temperature-page-period-stat:last-child { grid-column: 2; }
}

/* 요약 카드의 기간별 원본 집계값 툴팁 */
#overviewPage .overview-summary-grid .summary-card { position: relative; overflow: visible; }
#overviewPage .overview-period-tooltip {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    z-index: 100;
    width: max-content;
    min-width: 280px;
    max-width: min(420px, 90vw);
    padding: 16px;
    background: #ffffff;
    color: #334155;
    border: 1px solid #dce4eb;
    border-radius: 12px;
    box-shadow: 0 8px 28px #0f172a26;
    text-align: left;
}
#overviewPage .summary-card:hover:not(.tooltip-dismissed) > .overview-period-tooltip,
#overviewPage .summary-card:focus-within:not(.tooltip-dismissed) > .overview-period-tooltip { display: block; }
#overviewPage .overview-summary-grid .summary-card:last-child .overview-period-tooltip { left: auto; right: 0; }
#overviewPage .overview-tooltip-heading { display: block; font-size: 14px; margin-bottom: 10px; }
#overviewPage .overview-tooltip-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 7px 0; }
#overviewPage .overview-tooltip-row > span { font-size: 13px; }
#overviewPage .overview-tooltip-row small { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
#overviewPage .overview-tooltip-row > strong { font-size: 14px; white-space: nowrap; }

/* 기온 카드의 기간별 원본 집계값 툴팁 */
#temperaturePage .temperature-top-grid .summary-card { position: relative; overflow: visible; }
#temperaturePage .overview-period-tooltip {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    z-index: 100;
    width: max-content;
    min-width: 280px;
    max-width: min(420px, 90vw);
    padding: 16px;
    background: #ffffff;
    color: #334155;
    border: 1px solid #dce4eb;
    border-radius: 12px;
    box-shadow: 0 8px 28px #0f172a26;
    text-align: left;
}
#temperaturePage .summary-card:hover:not(.tooltip-dismissed) > .overview-period-tooltip,
#temperaturePage .summary-card:focus-within:not(.tooltip-dismissed) > .overview-period-tooltip { display: block; }
#temperaturePage .temperature-top-grid .summary-card:last-child .overview-period-tooltip { left: auto; right: 0; }
#temperaturePage .overview-tooltip-heading { display: block; font-size: 14px; margin-bottom: 10px; }
#temperaturePage .overview-tooltip-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 7px 0; }
#temperaturePage .overview-tooltip-row > span { font-size: 13px; }
#temperaturePage .overview-tooltip-row small { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
#temperaturePage .overview-tooltip-row > strong { font-size: 14px; white-space: nowrap; }

/* 기온 제목 오른쪽의 비교기간 안내 */
#rainfallPage .page-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
#rainfallPage .rainfall-period-legend {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px 22px;
    margin: 0 0 0 auto;
    padding: 12px 16px;
    border: 1px solid #dce4eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}
#rainfallPage .rainfall-period-legend > div { display: flex; gap: 10px; }
#rainfallPage .rainfall-period-legend dt { font-weight: 700; color: #334155; }
#rainfallPage .rainfall-period-legend dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    #rainfallPage .rainfall-period-legend { margin-left: 0; grid-template-columns: 1fr; }
}



/* 기온 상단 카드의 글자 크기·간격을 우리 지역 요약과 통일 */
#rainfallPage .rainfall-top-grid .summary-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px;
    min-width: 0;
    min-height: 0;
}
#rainfallPage .rainfall-top-grid .card-label {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 12px;
}
#rainfallPage .rainfall-top-grid .rainfall-trend-caption {
    font-size: 12px;
    font-weight: 500;
}
#rainfallPage .rainfall-top-grid .temperature-card-main {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 18px;
}
#rainfallPage .rainfall-top-grid .temperature-card-trend {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0;
}
#rainfallPage .rainfall-top-grid .overview-comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    font-size: 13px;
    line-height: 1.5;
}
#rainfallPage .rainfall-top-grid .overview-comparison-row span {
    color: #64748b;
}
#rainfallPage .rainfall-top-grid .overview-comparison-row strong {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
#rainfallPage .rainfall-top-grid .temperature-card-status { display: none; }

/* 기온 카드의 기간별 원본 집계값 툴팁 */
#rainfallPage .rainfall-top-grid .summary-card { position: relative; overflow: visible; }
#rainfallPage .overview-period-tooltip {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    z-index: 100;
    width: max-content;
    min-width: 280px;
    max-width: min(420px, 90vw);
    padding: 16px;
    background: #ffffff;
    color: #334155;
    border: 1px solid #dce4eb;
    border-radius: 12px;
    box-shadow: 0 8px 28px #0f172a26;
    text-align: left;
}
#rainfallPage .summary-card:hover:not(.tooltip-dismissed) > .overview-period-tooltip,
#rainfallPage .summary-card:focus-within:not(.tooltip-dismissed) > .overview-period-tooltip { display: block; }
#rainfallPage .rainfall-top-grid .summary-card:last-child .overview-period-tooltip { left: auto; right: 0; }
#rainfallPage .overview-tooltip-heading { display: block; font-size: 14px; margin-bottom: 10px; }
#rainfallPage .overview-tooltip-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 7px 0; }
#rainfallPage .overview-tooltip-row > span { font-size: 13px; }
#rainfallPage .overview-tooltip-row small { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
#rainfallPage .overview-tooltip-row > strong { font-size: 14px; white-space: nowrap; }

/* 긴 강수 지표 제목도 한 줄을 유지할 수 있도록 카드 폭 확보 */
#rainfallPage .rainfall-top-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 16px;
}

/* 강수 변화와 연대별 강수 변화를 나란히 배치 */
#rainfallPage .rainfall-main-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
#rainfallPage .rainfall-main-grid > .rainfall-main-chart,
#rainfallPage .rainfall-main-grid > .rainfall-decade-card { grid-column: auto; grid-row: auto; min-width: 0; }
#rainfallPage .rainfall-decade-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
#rainfallPage .rainfall-decade-tabs { display: flex; gap: 4px; margin-left: auto; }
#rainfallPage .rainfall-decade-tab { padding: 6px 10px; border: 1px solid #dbe5ed; border-radius: 7px; background: #f8fafc; color: #526579; font-size: 12px; cursor: pointer; white-space: nowrap; }
#rainfallPage .rainfall-decade-tab.active { background: #2563eb; color: white; border-color: #2563eb; }
#rainfallPage .rainfall-decade-chart { height: 310px; margin-top: 16px; }
@media (max-width: 1000px) { #rainfallPage .rainfall-main-grid { grid-template-columns: minmax(0, 1fr); } }

/* 연대별 강수 선택 버튼을 기존 강수 그래프와 동일한 그룹으로 표시 */
#rainfallPage .rainfall-decade-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #f7fafc;
    margin-left: auto;
}
#rainfallPage .rainfall-decade-tab {
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
#rainfallPage .rainfall-decade-tab:hover { color: #1769aa; background: #e8f2fb; }
#rainfallPage .rainfall-decade-tab.active {
    color: #ffffff;
    background: #2484bd;
    box-shadow: 0 2px 6px rgba(36, 132, 189, 0.24);
}
/* 강수 계절·월별 카드: 기온 페이지와 동일한 구성 */
#rainfallPage .rainfall-period-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

#rainfallPage .rainfall-period-card {
    min-width: 0;
    margin: 0;
}

#rainfallPage .rainfall-period-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#rainfallPage .rainfall-period-header > div:first-child {
    min-width: 0;
}

#rainfallPage .rainfall-period-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px;
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #f3f6f9;
}

#rainfallPage .rainfall-period-tab {
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

#rainfallPage .rainfall-period-tab:hover {
    color: #1769aa;
    background: #e8f2fb;
}

#rainfallPage .rainfall-period-tab.active {
    color: #ffffff;
    background: #2484bd;
    box-shadow: 0 2px 6px rgba(36, 132, 189, 0.24);
}

#rainfallPage .rainfall-comparison-tabs {
    display: flex;
    width: 100%;
    gap: 4px;
    margin: 10px 0 2px;
    padding: 3px;
    border-radius: 9px;
    background: #f3f6f9;
}

#rainfallPage .rainfall-comparison-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 32px;
    padding: 5px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #607080;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    cursor: pointer;
}

#rainfallPage .rainfall-comparison-tab:hover {
    color: #1769aa;
    background: #e8f2fb;
}

#rainfallPage .rainfall-comparison-tab.active {
    color: #ffffff;
    background: #2484bd;
    box-shadow: 0 2px 6px rgba(36, 132, 189, 0.24);
}


#rainfallPage .rainfall-period-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#rainfallPage .rainfall-period-card { min-width: 0; }
#rainfallPage .rainfall-period-chart-container { height: 280px; }
@media (max-width: 1000px) { #rainfallPage .rainfall-period-grid { grid-template-columns: 1fr; } }

/* 강수 페이지 글자 크기를 기온 페이지 기준으로 통일 */
#rainfallPage .chart-header h2 {
    font-size: 18px;
}

#rainfallPage .chart-header p {
    font-size: 13px;
    line-height: 1.45;
}

#rainfallPage .rainfall-trend-tab {
    height: 35px;
    padding: 0 10px;
    font-size: 11.5px;
}

#rainfallPage .rainfall-decade-tab {
    height: 31px;
    padding: 0 6px;
    font-size: 10.5px;
}

#rainfallPage .rainfall-period-tab {
    height: 34px;
    padding: 0 9px;
    font-size: 12px;
}

#rainfallPage .rainfall-comparison-tab {
    min-height: 36px;
    font-size: 12px;
}

#rainfallPage .rainfall-decade-header h2 {
    font-size: 17px;
}

#rainfallPage .rainfall-decade-header p,
#rainfallPage .rainfall-period-header p {
    font-size: 12px;
}

#rainfallPage .rainfall-page-period-stat span {
    font-size: 12px;
}

#rainfallPage .rainfall-page-period-stat strong {
    font-size: 21px;
}

#rainfallPage .rainfall-page-period-stat small {
    font-size: 11px;
}

#rainfallPage .rainfall-page-longterm-stat span {
    font-size: 14px;
}

#rainfallPage .rainfall-page-longterm-stat strong {
    font-size: 23px;
}

#rainfallPage .rainfall-page-longterm-stat em {
    font-size: 14px;
}

#rainfallPage .rainfall-page-longterm-stat small {
    font-size: 12px;
}


#rainfallPage .page-title h1 { font-size: 30px; }
#rainfallPage .page-title p { font-size: 15px; }

/* 극한기후 상단 카드: 기존 페이지와 동일한 형식 */
/* 기온 제목 오른쪽의 비교기간 안내 */
#extremePage .page-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
#extremePage .extreme-period-legend {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px 22px;
    margin: 0 0 0 auto;
    padding: 12px 16px;
    border: 1px solid #dce4eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}
#extremePage .extreme-period-legend > div { display: flex; gap: 10px; }
#extremePage .extreme-period-legend dt { font-weight: 700; color: #334155; }
#extremePage .extreme-period-legend dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    #extremePage .extreme-period-legend { margin-left: 0; grid-template-columns: 1fr; }
}



/* 기온 상단 카드의 글자 크기·간격을 우리 지역 요약과 통일 */
#extremePage .extreme-summary .summary-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px;
    min-width: 0;
    min-height: 0;
}
#extremePage .extreme-summary .card-label {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 12px;
}
#extremePage .extreme-summary .extreme-trend-caption {
    font-size: 12px;
    font-weight: 500;
}
#extremePage .extreme-summary .temperature-card-main {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 18px;
}
#extremePage .extreme-summary .temperature-card-trend {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0;
}
#extremePage .extreme-summary .overview-comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    font-size: 13px;
    line-height: 1.5;
}
#extremePage .extreme-summary .overview-comparison-row span {
    color: #64748b;
}
#extremePage .extreme-summary .overview-comparison-row strong {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
#extremePage .extreme-summary .temperature-card-status { display: none; }

/* 기온 카드의 기간별 원본 집계값 툴팁 */
#extremePage .extreme-summary .summary-card { position: relative; overflow: visible; }
#extremePage .overview-period-tooltip {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    z-index: 100;
    width: max-content;
    min-width: 280px;
    max-width: min(420px, 90vw);
    padding: 16px;
    background: #ffffff;
    color: #334155;
    border: 1px solid #dce4eb;
    border-radius: 12px;
    box-shadow: 0 8px 28px #0f172a26;
    text-align: left;
}
#extremePage .summary-card:hover:not(.tooltip-dismissed) > .overview-period-tooltip,
#extremePage .summary-card:focus-within:not(.tooltip-dismissed) > .overview-period-tooltip { display: block; }
#extremePage .extreme-summary .summary-card:last-child .overview-period-tooltip { left: auto; right: 0; }
#extremePage .overview-tooltip-heading { display: block; font-size: 14px; margin-bottom: 10px; }
#extremePage .overview-tooltip-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 7px 0; }
#extremePage .overview-tooltip-row > span { font-size: 13px; }
#extremePage .overview-tooltip-row small { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
#extremePage .overview-tooltip-row > strong { font-size: 14px; white-space: nowrap; }
#extremePage .extreme-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
#extremePage .extreme-summary .tropical-daily-row { display: block; padding: 0; margin: 0; border: 0; width: 100%; }
#extremePage .extreme-summary .tropical-daily-row > strong { font-size: 34px; line-height: 1.25; margin: 0 0 18px; }
#extremePage .extreme-summary .tropical-daily-row .overview-comparison-row strong { font-size: 17px; margin: 0; }
#extremePage .extreme-trend-caption { font-size: 12px; font-weight: 500; color: #64748b; }

/* 긴 호우 지표 제목은 추세 안내와 한 줄씩 자연스럽게 배치 */
#extremePage .extreme-hourly-rain-card .card-label { flex-wrap: wrap; column-gap: 3px; row-gap: 0; }
#extremePage .extreme-hourly-rain-card .temperature-card-main,
#extremePage .extreme-heavy-rain-card .temperature-card-main { color: #2563eb; }

/* 극한기후 한파일수 카드의 값은 하늘색으로 표시 */
#extremePage #extremeColdCardValue.temperature-card-main {
    color: #38bdf8;
}
#extremePage .extreme-cold-card .overview-comparison-row strong {
    color: #38bdf8 !important;
}
/* 극한기후 하단: 기온·강수 연대별 집계 그래프 */
#extremePage .extreme-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#extremePage .extreme-history-card { min-width: 0; }
#extremePage .extreme-history-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
#extremePage .extreme-history-header h2 { font-size: 18px; }
#extremePage .extreme-history-header p { font-size: 12px; line-height: 1.5; }
#extremePage .extreme-history-tabs { display: flex; margin-left: auto; padding: 3px; gap: 3px; border: 1px solid #dbe5ee; border-radius: 9px; background: #f7fafc; }
#extremePage .extreme-history-tab { height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #64748b; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#extremePage .extreme-history-tab:hover { background: #e8f2fb; }
#extremePage .extreme-history-tab.active { color: white; background: #2484bd; box-shadow: 0 2px 6px #2484bd3d; }
#extremePage .extreme-history-chart { height: 300px; margin-top: 16px; }
@media (max-width: 1000px) { #extremePage .extreme-history-grid { grid-template-columns: 1fr; } }

#extremePage .extreme-history-comparisons { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
#extremePage .extreme-history-comparison { min-height: 36px; padding: 7px 10px; border: 1px solid #dbe5ee; border-radius: 8px; background: #f8fafc; color: #64748b; font-size: 12px; font-weight: 600; cursor: pointer; }
#extremePage .extreme-history-comparison.active { border-color: #2484bd; background: #e8f2fb; color: #1769aa; }

/* 극한기후 기간 선택: 하나로 이어진 세 버튼 */
#extremePage .extreme-history-comparisons {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #f7fafc;
    width: fit-content;
    max-width: 100%;
}
#extremePage .extreme-history-comparison {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    padding: 7px 10px;
    font-size: 12px;
}
#extremePage .extreme-history-comparison:hover { background: #e8f2fb; }
#extremePage .extreme-history-comparison.active {
    background: #2484bd;
    color: #ffffff;
    box-shadow: 0 2px 6px #2484bd3d;
}
#extremePage .rain-extreme-change-card { min-width: 0; }
#extremePage .rain-extreme-change-card h2 { font-size: 18px; }
#extremePage .rain-extreme-change-card .chart-header p { font-size: 12px; line-height: 1.5; }
#extremePage .rain-extreme-change-value { font-size: 30px; font-weight: 800; color: #3b82f6; margin: 16px 0 8px; }

#extremePage .rain-extreme-change-card .cold-extreme-chart { height: 300px; margin-top: 16px; }

/* 강수 극한지표명이 길어도 선택 버튼을 우측 상단에 유지 */
#extremePage .rain-extreme-change-card .extreme-history-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}
#extremePage .rain-extreme-change-card .extreme-history-header > div:first-child {
    min-width: 0;
}
#extremePage .rain-extreme-change-card #rainExtremeChangeDescription {
    white-space: normal;
    overflow-wrap: anywhere;
}
#extremePage .rain-extreme-change-card .extreme-history-tabs {
    justify-self: end;
    align-self: start;
    margin: 0;
    flex-wrap: nowrap;
}
#extremePage .temperature-extreme-change-card { min-width: 0; }
#extremePage .temperature-extreme-change-card .extreme-history-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
#extremePage .temperature-extreme-change-card h2 { font-size: 18px; }
#extremePage .temperature-extreme-change-card .chart-header p { font-size: 12px; line-height: 1.5; }
#extremePage .temperature-extreme-series { height: 300px; margin-top: 16px; }
#extremePage .temperature-extreme-period-panel { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; padding: 16px 0 0; margin-top: 12px; border-top: 1px solid #e2e8f0; text-align: center; }
#extremePage .temperature-extreme-period-panel > div { display: flex; flex-direction: column; gap: 6px; }
#extremePage .temperature-extreme-period-panel span { font-size: 12px; color: #475569; }
#extremePage .temperature-extreme-period-panel strong { font-size: 23px; }
#extremePage .temperature-extreme-period-panel small { font-size: 11px; color: #64748b; }

#extremePage .rain-extreme-period-panel strong { color: #3b82f6; }

#overviewPage .overview-period-legend .overview-season-period-note {
    grid-column: 1 / -1;
    display: block;
    padding-top: 8px;
    border-top: 1px solid #dce4eb;
    font-size: 12px;
    color: #64748b;
}
#overviewPage .overview-period-legend .overview-season-period-note[hidden] { display: none; }
#overviewPage .overview-season-period-note dt { display: none; }
#overviewPage .overview-season-period-note dd { margin: 0; }
/* 요약 제목 오른쪽의 비교기간 안내 */
#seasonPage .page-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
#seasonPage .seasonPage-period-legend {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px 22px;
    margin: 0 0 0 auto;
    padding: 12px 16px;
    border: 1px solid #dce4eb;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}
#seasonPage .seasonPage-period-legend > div { display: flex; gap: 10px; }
#seasonPage .seasonPage-period-legend dt { font-weight: 700; color: #334155; }
#seasonPage .seasonPage-period-legend dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    #seasonPage .seasonPage-period-legend { margin-left: 0; grid-template-columns: 1fr; }
}


#seasonPage .seasonPage-period-legend .seasonPage-season-period-note {
    grid-column: 1 / -1;
    display: block;
    padding-top: 8px;
    border-top: 1px solid #dce4eb;
    font-size: 12px;
    color: #64748b;
}
#seasonPage .seasonPage-period-legend .seasonPage-season-period-note[hidden] { display: none; }
#seasonPage .seasonPage-season-period-note dt { display: none; }
#seasonPage .seasonPage-season-period-note dd { margin: 0; }
/* 모든 페이지의 청주 계절 길이 집계기간 안내 */
.page-title dl .cheongju-season-period-note {
    grid-column: 1 / -1;
    display: block;
    padding-top: 8px;
    border-top: 1px solid #dce4eb;
    font-size: 12px;
    color: #64748b;
}
.page-title dl .cheongju-season-period-note[hidden] { display: none !important; }
.page-title dl .cheongju-season-period-note dt { display: none; }
.page-title dl .cheongju-season-period-note dd { margin: 0; }

/* 연대 차이: 제목 아래에 값과 증감 문구를 나란히 배치 */
#temperaturePage .temperature-page-longterm-stat,
#rainfallPage .rainfall-page-longterm-stat {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: center;
    align-content: center;
    align-items: baseline;
    gap: 3px 8px;
}
#temperaturePage .temperature-page-longterm-stat > span,
#rainfallPage .rainfall-page-longterm-stat > span {
    grid-column: 1 / -1;
    text-align: center;
}

/* 기온 변화와 연대별 기온 변화 카드의 위아래 정렬 */
#temperaturePage .temperature-layout {
    align-items: stretch;
}
#temperaturePage .temperature-decade-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#temperaturePage .temperature-decade-card .chart-container {
    flex: 1 0 360px;
    min-height: 360px;
}

/* 강수 페이지와 동일한 계절·월별 그래프 크기 및 기온 페이지 간격 */
#temperaturePage .temperature-period-grid,
#temperaturePage .temperature-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
#temperaturePage .temperature-period-chart-container {
    height: 280px;
}
#temperaturePage .temperature-top-grid {
    gap: 20px;
    margin-bottom: 20px;
}
#temperaturePage .chart-card {
    padding: 20px;
    min-width: 0;
}
#temperaturePage .temperature-main-chart,
#temperaturePage .temperature-decade-card {
    min-height: 0;
}
#temperaturePage .temperature-main-chart .temperature-large {
    height: 280px;
}
#temperaturePage .temperature-decade-card .chart-container {
    height: 280px;
    min-height: 280px;
    flex-basis: 280px;
}
@media (max-width: 1000px) {
    #temperaturePage .temperature-period-grid,
    #temperaturePage .temperature-layout {
        grid-template-columns: 1fr;
    }
}

/* 상단 두 기온 그래프를 강수 페이지의 대응 카드 크기에 맞춤 */
#temperaturePage .temperature-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
#temperaturePage .temperature-layout .chart-card {
    min-height: 365px;
    padding: 16px;
}
#temperaturePage .temperature-layout .chart-header {
    margin-bottom: 8px;
}
#temperaturePage .temperature-layout .chart-header p { margin-top: 4px; }
#temperaturePage .temperature-main-chart .temperature-large { height: 250px; }
#temperaturePage .temperature-decade-card .chart-container {
    height: 310px;
    min-height: 310px;
    flex: 0 0 310px;
    margin-top: 16px;
}
#temperaturePage .temperature-page-stat-panel { gap: 8px; margin-top: 8px; }
#temperaturePage .temperature-page-period-stat,
#temperaturePage .temperature-page-longterm-stat {
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
}
#temperaturePage .temperature-page-period-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#temperaturePage .temperature-page-period-stat span { margin-bottom: 2px; }
#temperaturePage .temperature-page-period-stat strong { line-height: 1.2; font-weight: 800; }
#temperaturePage .temperature-page-period-stat small { margin-top: 2px; }
@media (max-width: 1000px) {
    #temperaturePage .temperature-layout { grid-template-columns: minmax(0, 1fr); }
}

/* 극한기후 그래프 카드: 강수 페이지와 같은 열 비율과 크기 기준 */
#extremePage .rainfall-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
    margin-bottom: 16px;
}
#extremePage .rainfall-layout > .chart-card {
    min-width: 0;
    min-height: 365px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
#extremePage .rainfall-layout .chart-header { margin-bottom: 8px; }
#extremePage .rainfall-layout .chart-header p { margin-top: 4px; font-size: 13px; line-height: 1.45; }
#extremePage .temperature-extreme-series,
#extremePage .rain-extreme-change-card .cold-extreme-chart {
    height: 250px;
    min-height: 250px;
    margin-top: 0;
}
#extremePage .temperature-extreme-period-panel {
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 8px;
    padding: 0;
    margin-top: 8px;
    border-top: 0;
}
#extremePage .temperature-extreme-period-panel > div {
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    gap: 2px;
    justify-content: center;
}
#extremePage .extreme-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}
#extremePage .extreme-history-card {
    padding: 20px;
    min-height: 350px;
    margin: 0;
}
#extremePage .extreme-history-chart {
    height: 280px;
    margin-top: 0;
}
@media (max-width: 1000px) {
    #extremePage .rainfall-layout,
    #extremePage .extreme-history-grid { grid-template-columns: 1fr; }
}

/* 극한기후의 과거·최근 평균값은 강수 변화의 평균값과 같은 색 */
#extremePage #temperatureExtremeOldValue,
#extremePage #temperatureExtremeRecentValue,
#extremePage #rainExtremeOldValue,
#extremePage #rainExtremeRecentValue { color: #1769aa; }

/* 연대 차이 값과 증가·감소 문구를 같은 줄에 표시 */
#extremePage .extreme-difference-value-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
}
#extremePage .extreme-difference-value-row em {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}
#extremePage #rainExtremeDirection { color: #3b82f6; }

/* 기온 연대 간 차이 값과 방향을 시계열 그래프 색에 맞춤 */
#temperaturePage #temperature53YearChange,
#temperaturePage #temperature53YearDirection {
    color: #f87171;
}

/* 극한기후 하단 3칸 요약: 이전 페이지와 동일한 카드 및 문구 색 */
#extremePage .temperature-extreme-period-panel > div {
    background: #f7f9fb;
    border: 1px solid #e4eaf0;
    border-radius: 8px;
    text-align: center;
}
#extremePage .temperature-extreme-period-panel > div:nth-child(2) {
    background: #f1f6fc;
    border-color: #dce9f5;
}
#extremePage .rain-extreme-period-panel > div:nth-child(2) {
    background: #f1f8f4;
    border-color: #dceee4;
}
#extremePage .temperature-extreme-period-panel > div > span {
    color: #84919a;
}
#extremePage .temperature-extreme-period-panel > div:nth-child(2) > span {
    color: #566978;
}
#extremePage .temperature-extreme-period-panel > div > small {
    color: #a0a9af;
}

/* 극한기후 요약 높이를 강수 변화 하단 요약의 글자·여백 기준과 통일 */
#extremePage .temperature-extreme-period-panel > div {
    min-height: 44px;
    padding: 6px 8px;
    gap: 0;
}
#extremePage .temperature-extreme-period-panel > div > span {
    font-size: 12px;
    margin-bottom: 2px;
}
#extremePage .temperature-extreme-period-panel > div > strong {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
}
#extremePage .temperature-extreme-period-panel > div > small {
    font-size: 11px;
    margin-top: 2px;
}
#extremePage .temperature-extreme-period-panel > div:nth-child(2) { gap: 3px; }
#extremePage .temperature-extreme-period-panel > div:nth-child(2) > span {
    font-size: 14px;
    margin-bottom: 0;
}

/* 계절 시작일 정의: 첫 줄 봄·여름, 둘째 줄 가을·겨울 */
.season-comparison-card .season-start-definitions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.season-comparison-card .season-start-definitions p {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    box-sizing: border-box;
}
.season-comparison-card .season-start-definitions p strong {
    display: inline;
    margin-bottom: 0;
    font-size: inherit;
}
.season-comparison-card .season-start-definitions strong { color: #334155; }

/* 강수 상단 3개 카드: 기온 페이지와 같은 열 너비와 간격 */
#rainfallPage .rainfall-top-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 800px) {
    #rainfallPage .rainfall-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
    #rainfallPage .rainfall-top-grid { grid-template-columns: 1fr; }
}

/* 지도 클릭 시 SVG 선택 영역에 생기는 사각 포커스 테두리 제거 */
#chungbukClimateMap:focus,
#chungbukClimateMap .chungbuk-boundary-layer:focus,
#chungbukClimateMap .map-station:focus {
    outline: none;
}

/* =====================================================
   극한기후 변화 페이지 글자 크기
   기온·강수 변화 페이지와 통일
===================================================== */

/* 페이지 맨 위 제목 */
#extremePage .page-title h1 {
    font-size: 30px;
}

/* 페이지 맨 위 설명 */
#extremePage .page-title p {
    font-size: 15px;
}


/* 그래프 카드 제목 */
#extremePage .chart-header h2 {
    font-size: 18px;
}

/* 그래프 카드 제목 아래 설명 */
#extremePage .chart-header p {
    font-size: 13px;
    line-height: 1.45;
}


/* =====================================================
   그래프 하단 3칸 요약
===================================================== */

/* 과거 평균 / 최근 평균 제목 */
#extremePage .temperature-extreme-period-panel > div:first-child span,
#extremePage .temperature-extreme-period-panel > div:last-child span {
    font-size: 12px;
}

/* 과거 평균 / 최근 평균 숫자 */
#extremePage .temperature-extreme-period-panel > div:first-child strong,
#extremePage .temperature-extreme-period-panel > div:last-child strong {
    font-size: 21px;
}

/* 1973~1980년 / 2021~2025년 */
#extremePage .temperature-extreme-period-panel small {
    font-size: 11px;
}


/* 가운데 '2020년대 − 1970년대' */
#extremePage .temperature-extreme-period-panel > div:nth-child(2) span {
    font-size: 14px;
}

/* 가운데 변화량 숫자 */
#extremePage .temperature-extreme-period-panel > div:nth-child(2) strong {
    font-size: 23px;
}

/* 증가 / 감소 문구 */
#extremePage .temperature-extreme-period-panel > div:nth-child(2) em {
    font-size: 14px;
}
/* 기존 18px 여백을 주석 한 줄로 사용하여 비교 박스 크기 유지 */
#overviewPage .season-comparison-card .season-start-definitions {
    margin-top: 0;
    padding-top: 6px; /* 기존 10px 중 4px을 하단 문구 위 여백으로 이동 */
}
#overviewPage .season-comparison-card .season-moving-average-note {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    height: 18px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #64748b;
    white-space: nowrap;
}
/* Small screens: preserve the original desktop layout at 1600px and above. */
.compact-menu-toggle { display: none; }
@media (max-width: 1599px) {
    .main-nav { width: 230px; padding: 18px 12px; gap: 8px; }
    .main-nav .region-finder { margin: -18px -12px 0; padding: 18px 16px; }
    .main-nav .nav-button { padding: 10px 12px; min-height: 46px; }
    .dashboard, .dashboard-page { margin-left: 230px; padding-left: 20px; padding-right: 20px; }
    .top-header { padding-left: 20px; padding-right: 20px; }
    #overviewPage .overview-summary-grid,
    #temperaturePage .temperature-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #overviewPage .overview-main-row > .temperature-overview-card,
    #overviewPage .overview-main-row > .rainfall-overview-card { height: auto; }
}
@media (max-width: 1199px) {
    .compact-menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; background: white; color: #1c4055; font: inherit; font-weight: 700; cursor: pointer; }
    .compact-menu-toggle:focus-visible { outline: 3px solid #1769aa; outline-offset: 2px; }
    .top-header { height: auto; min-height: 86px; padding: 12px 16px; gap: 12px; flex-direction: row; align-items: center; flex-wrap: wrap; }
    .top-header > div:first-of-type { flex: 1; min-width: 0; }
    .main-title { font-size: clamp(16px, 2.2vw, 24px); overflow-wrap: anywhere; }
    .file-area { width: auto; flex-wrap: wrap; }
    #status { min-width: 0; }
    .main-nav { display: none; position: fixed; top: var(--compact-header-height, 86px); bottom: 0; width: min(300px, 100%); height: auto; margin-top: 0; overflow-y: auto; box-shadow: 8px 0 24px #17212b26; }
    body.compact-menu-open .main-nav { display: flex; }
    .dashboard, .dashboard-page { margin-left: 0; padding: calc(var(--compact-header-height, 86px) + 20px) 16px 40px; }
    #overviewPage .overview-main-row,
    #overviewPage .season-summary-results,
    #temperaturePage .temperature-layout,
    #rainfallPage .rainfall-main-grid,
    #rainfallPage .rainfall-period-grid,
    #extremePage .rainfall-layout,
    #extremePage .extreme-history-grid { grid-template-columns: minmax(0, 1fr); }
    #temperaturePage .temperature-main-chart .temperature-large { height: clamp(250px, 30vw, 310px); }
    .page-title, .chart-header { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 600px) {
    .top-header .file-area { flex-basis: 100%; }
    #overviewPage .overview-summary-grid,
    #temperaturePage .temperature-top-grid,
    #rainfallPage .rainfall-top-grid,
    #extremePage .extreme-summary { grid-template-columns: minmax(0, 1fr); }
    #overviewPage .season-summary-results { grid-template-columns: minmax(0, 1fr); }
}

.publication-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.publication-link:focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }

/* Allow the publication title to fit alongside the dashboard heading. */
.top-header > div:first-of-type { min-width: 0; }
.publication-link { white-space: normal; text-align: center; max-width: 100%; }
@media (min-width: 1200px) { .top-header { gap: 16px; } .top-header .file-area { flex-shrink: 0; } }