/* =========================================================
   PPABAM PREMIUM WEATHER
   PPABAM STANDARD
   BOX:12px / CONTROL:10px / MOBILE PAGE PADDING:10px
========================================================= */

:root{
    --ppabam-radius-box:12px;
    --ppabam-radius-control:10px;

    --weather-bg:#ffffff;
    --weather-box:#ffffff;
    --weather-soft:#f6f7fb;
    --weather-soft-2:#f0f2f7;
    --weather-border:#e1e4ec;
    --weather-text:#171821;
    --weather-sub:#74798d;
    --weather-muted:#989daf;
    --weather-accent:#6f57e8;
    --weather-accent-soft:#f0edff;

    --weather-dark-bg:#0e0d19;
    --weather-dark-box:#171624;
    --weather-dark-soft:#0f0e1b;
    --weather-dark-border:#2a2a37;
    --weather-dark-text:#f4f3fa;
    --weather-dark-sub:#aaa7bc;
    --weather-dark-muted:#807d94;
}

.ppabam-weather-page,
.ppabam-weather-page *{
    box-sizing:border-box;
}

.ppabam-weather-page{
    width:100%;
    margin:0 auto;
    padding:0;
    color:var(--weather-text);
    font-family:'Noto Sans KR',Arial,sans-serif;
}

/* PAGE HEAD */
.weather-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin:0 0 16px;
}

.weather-page-title{
    margin:0;
    color:var(--weather-text);
    font-size:24px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.035em;
}

.weather-page-desc{
    margin:5px 0 0;
    color:var(--weather-sub);
    font-size:13px;
    line-height:1.55;
}

.weather-head-meta{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--weather-muted);
    font-size:11px;
    white-space:nowrap;
}

.weather-head-meta span{
    display:inline-flex;
    align-items:center;
    height:28px;
    padding:0 10px;
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-control);
    background:var(--weather-soft);
    color:var(--weather-text);
    font-weight:700;
}

.weather-head-meta strong{
    font-weight:500;
}

/* CITY TABS */
.weather-city-tabs{
    display:flex;
    gap:7px;
    width:100%;
    margin-bottom:14px;
    padding-bottom:2px;
    overflow-x:auto;
    scrollbar-width:none;
}

.weather-city-tabs::-webkit-scrollbar{
    display:none;
}

.weather-city-tab{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:54px;
    height:34px;
    padding:0 12px;
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-control);
    background:var(--weather-bg);
    color:#5f6475;
    font-size:12px;
    font-weight:600;
    text-decoration:none !important;
    transition:.15s ease;
}

.weather-city-tab:hover{
    background:#f3f1fb;
    color:#28243d;
}

.weather-city-tab.active{
    background:#28243d;
    border-color:#28243d;
    color:#fff;
}

/* ALERT */
.weather-alert{
    margin-bottom:12px;
    padding:11px 13px;
    border:1px solid;
    border-radius:var(--ppabam-radius-box);
    font-size:12px;
}

.weather-alert-error{
    background:#fff4f5;
    border-color:#ef9baa;
    color:#b52b45;
}

.weather-alert-warn{
    background:#fff9e9;
    border-color:#ebcf7a;
    color:#8d6a00;
}

/* HERO */
.weather-hero{
    display:grid;
    grid-template-columns:minmax(270px,.9fr) minmax(420px,1.1fr);
    gap:12px;
    margin-bottom:12px;
}

.weather-hero-main,
.weather-hero-details{
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    background:var(--weather-box);
}

.weather-hero-main{
    min-height:235px;
    padding:22px;
}

.weather-hero-location{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--weather-sub);
    font-size:12px;
    font-weight:700;
}

.weather-location-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--weather-accent);
}

.weather-hero-weather{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:13px;
}

.weather-main-icon{
    width:82px;
    height:82px;
    object-fit:contain;
    margin-left:-8px;
}

.weather-main-temp{
    color:var(--weather-text);
    font-size:58px;
    line-height:.95;
    font-weight:800;
    letter-spacing:-.06em;
    font-variant-numeric:tabular-nums;
}

.weather-main-temp span{
    margin-left:2px;
    color:var(--weather-sub);
    font-size:28px;
    font-weight:500;
    vertical-align:top;
}

.weather-main-desc{
    margin-top:7px;
    color:var(--weather-sub);
    font-size:13px;
    font-weight:500;
}

.weather-hero-sub{
    display:flex;
    flex-wrap:wrap;
    gap:7px 16px;
    margin-top:17px;
    color:var(--weather-sub);
    font-size:11px;
}

.weather-hero-sub strong{
    margin-left:3px;
    color:var(--weather-text);
    font-weight:700;
}

.weather-hero-details{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:hidden;
}

.weather-stat{
    min-height:115px;
    padding:18px;
    border-right:1px solid var(--weather-border);
    border-bottom:1px solid var(--weather-border);
}

.weather-stat:nth-child(3n){
    border-right:0;
}

.weather-stat:nth-last-child(-n+3){
    border-bottom:0;
}

.weather-stat span,
.weather-stat strong{
    display:block;
}

.weather-stat span{
    color:var(--weather-muted);
    font-size:11px;
}

.weather-stat strong{
    margin-top:13px;
    color:var(--weather-text);
    font-size:16px;
    font-weight:750;
    font-variant-numeric:tabular-nums;
}

/* SECTION */
.weather-section{
    margin-top:12px;
    padding:18px;
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    background:var(--weather-box);
}

.weather-section-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.weather-section-head-inline{
    align-items:center;
}

.weather-section-head h2{
    margin:0;
    color:var(--weather-text);
    font-size:15px;
    line-height:1.3;
    font-weight:750;
}

.weather-section-head p{
    margin:4px 0 0;
    color:var(--weather-muted);
    font-size:10px;
    line-height:1.45;
}

/* LIFE */
.weather-life-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}

.weather-life-card{
    padding:13px 14px;
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    background:var(--weather-soft);
}

.weather-life-card span,
.weather-life-card strong{
    display:block;
}

.weather-life-card span{
    color:var(--weather-muted);
    font-size:10px;
}

.weather-life-card strong{
    margin-top:6px;
    color:var(--weather-text);
    font-size:13px;
}

.weather-life-card.life-good{
    background:#f2fbf7;
    border-color:#b6dfca;
}

.weather-life-card.life-mid{
    background:#fff9ec;
    border-color:#ead49b;
}

.weather-life-card.life-warn{
    background:#fff3f5;
    border-color:#efb0bb;
}

/* HOURLY */
.weather-hourly-scroll{
    display:grid;
    grid-template-columns:repeat(8,minmax(86px,1fr));
    gap:8px;
    overflow-x:auto;
    padding-bottom:3px;
}

.weather-hour-card{
    min-width:86px;
    padding:12px 9px;
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    background:var(--weather-soft);
    text-align:center;
}

.weather-hour-card time,
.weather-hour-card strong,
.weather-hour-card span{
    display:block;
}

.weather-hour-card time{
    color:var(--weather-sub);
    font-size:10px;
    font-weight:600;
}

.weather-hour-card img{
    display:block;
    width:42px;
    height:42px;
    margin:4px auto 2px;
    object-fit:contain;
}

.weather-hour-card strong{
    color:var(--weather-text);
    font-size:16px;
    font-weight:750;
}

.weather-hour-card .weather-pop{
    margin-top:5px;
    color:#4b81db;
    font-size:9px;
    font-weight:600;
}

/* DAILY TABLE */
.weather-daily-table{
    border-top:1px solid var(--weather-border);
}

.weather-day-row{
    display:grid;
    grid-template-columns:100px minmax(150px,1fr) 100px 100px;
    align-items:center;
    min-height:66px;
    border-bottom:1px solid var(--weather-border);
}

.weather-day-row:last-child{
    border-bottom:0;
}

.weather-day-date strong,
.weather-day-date span{
    display:block;
}

.weather-day-date strong{
    color:var(--weather-text);
    font-size:12px;
}

.weather-day-date span{
    margin-top:3px;
    color:var(--weather-muted);
    font-size:10px;
}

.weather-day-condition{
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--weather-sub);
    font-size:11px;
}

.weather-day-condition img{
    width:40px;
    height:40px;
    object-fit:contain;
}

.weather-day-rain{
    color:#4c83dd;
    font-size:11px;
    font-weight:650;
    text-align:right;
}

.weather-day-temp{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    font-size:13px;
    font-variant-numeric:tabular-nums;
}

.weather-day-temp strong{
    color:#ef526d;
}

.weather-day-temp span{
    color:#4f86e4;
}

/* AIR */
.weather-aqi-badge{
    display:inline-flex;
    align-items:center;
    height:30px;
    padding:0 11px;
    border-radius:var(--ppabam-radius-control);
    font-size:11px;
    font-style:normal;
    font-weight:700;
}

.weather-air-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:10px;
}

.weather-air-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.weather-air-card{
    padding:14px;
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    background:var(--weather-soft);
}

.weather-air-card > span{
    display:block;
    min-height:28px;
    color:var(--weather-muted);
    font-size:10px;
}

.weather-air-card > strong{
    display:block;
    margin-top:4px;
    color:var(--weather-text);
    font-size:19px;
    font-weight:780;
    font-variant-numeric:tabular-nums;
}

.weather-air-card strong small{
    color:var(--weather-muted);
    font-size:9px;
    font-weight:500;
}

.weather-air-card em{
    display:inline-flex;
    margin-top:7px;
    padding:3px 7px;
    border-radius:8px;
    font-size:9px;
    font-style:normal;
    font-weight:700;
}

.weather-air-components{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    overflow:hidden;
}

.weather-air-components > div{
    padding:14px;
    border-right:1px solid var(--weather-border);
    border-bottom:1px solid var(--weather-border);
}

.weather-air-components > div:nth-child(2n){
    border-right:0;
}

.weather-air-components > div:nth-last-child(-n+2){
    border-bottom:0;
}

.weather-air-components span,
.weather-air-components strong{
    display:block;
}

.weather-air-components span{
    color:var(--weather-muted);
    font-size:9px;
}

.weather-air-components strong{
    margin-top:7px;
    color:var(--weather-text);
    font-size:13px;
    font-weight:700;
}

.aqi-good{
    background:#eefaf4 !important;
    color:#23875b !important;
}

.aqi-fair{
    background:#f2f8ff !important;
    color:#3c79ce !important;
}

.aqi-moderate{
    background:#fff8e8 !important;
    color:#a67700 !important;
}

.aqi-poor{
    background:#fff2ec !important;
    color:#d16031 !important;
}

.aqi-very-poor{
    background:#fff0f3 !important;
    color:#cf3f5b !important;
}

.aqi-unknown{
    background:#f2f3f6 !important;
    color:#74798c !important;
}

.weather-air-forecast{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--weather-border);
}

.weather-mini-title{
    margin-bottom:10px;
    color:var(--weather-text);
    font-size:11px;
    font-weight:700;
}

.weather-air-timeline{
    display:grid;
    grid-template-columns:repeat(12,minmax(48px,1fr));
    gap:5px;
    overflow-x:auto;
}

.weather-air-point{
    min-width:48px;
    text-align:center;
}

.weather-air-point span,
.weather-air-point strong{
    display:block;
}

.weather-air-point span{
    color:var(--weather-muted);
    font-size:8px;
}

.weather-air-point i{
    display:block;
    width:9px;
    height:9px;
    margin:7px auto;
    padding:0 !important;
    border-radius:50%;
}

.weather-air-point i.aqi-good{background:#43b780 !important;}
.weather-air-point i.aqi-fair{background:#5d95e7 !important;}
.weather-air-point i.aqi-moderate{background:#d5a62d !important;}
.weather-air-point i.aqi-poor{background:#df7a4d !important;}
.weather-air-point i.aqi-very-poor{background:#dc5971 !important;}

.weather-air-point strong{
    color:var(--weather-sub);
    font-size:8px;
    font-weight:600;
}

/* DETAIL */
.weather-detail-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    overflow:hidden;
}

.weather-detail-card{
    min-height:72px;
    padding:14px;
    border-right:1px solid var(--weather-border);
    border-bottom:1px solid var(--weather-border);
}

.weather-detail-card:nth-child(4n){
    border-right:0;
}

.weather-detail-card:nth-last-child(-n+4){
    border-bottom:0;
}

.weather-detail-card span,
.weather-detail-card strong{
    display:block;
}

.weather-detail-card span{
    color:var(--weather-muted);
    font-size:10px;
}

.weather-detail-card strong{
    margin-top:8px;
    color:var(--weather-text);
    font-size:13px;
}

/* REGION */
.weather-region-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}

.weather-region-card{
    display:block;
    padding:14px;
    border:1px solid var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    background:var(--weather-soft);
    color:var(--weather-text) !important;
    text-decoration:none !important;
    transition:.15s ease;
}

.weather-region-card:hover{
    transform:translateY(-2px);
    background:#f3f1fb;
    border-color:#cfc9e8;
}

.weather-region-card.active{
    background:var(--weather-accent-soft);
    border-color:#b7aae9;
}

.weather-region-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.weather-region-top strong{
    font-size:12px;
}

.weather-region-top img{
    width:36px;
    height:36px;
    object-fit:contain;
}

.weather-region-temp{
    margin-top:8px;
    font-size:26px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.04em;
}

.weather-region-bottom{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-top:10px;
    color:var(--weather-muted);
    font-size:9px;
}

.weather-empty{
    padding:20px;
    border:1px dashed var(--weather-border);
    border-radius:var(--ppabam-radius-box);
    color:var(--weather-muted);
    font-size:11px;
    text-align:center;
}

.weather-source-note{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    margin-top:12px;
    padding:0 2px;
    color:var(--weather-muted);
    font-size:9px;
    line-height:1.5;
}

/* DARK MODE */
body.dark-mode .ppabam-weather-page,
section.content.dark .ppabam-weather-page{
    color:var(--weather-dark-text);
}

body.dark-mode .weather-page-title,
body.dark-mode .weather-main-temp,
body.dark-mode .weather-stat strong,
body.dark-mode .weather-section-head h2,
body.dark-mode .weather-hour-card strong,
body.dark-mode .weather-day-date strong,
body.dark-mode .weather-air-card > strong,
body.dark-mode .weather-air-components strong,
body.dark-mode .weather-mini-title,
body.dark-mode .weather-detail-card strong,
body.dark-mode .weather-region-card,
body.dark-mode .weather-hero-sub strong,
section.content.dark .weather-page-title,
section.content.dark .weather-main-temp,
section.content.dark .weather-stat strong,
section.content.dark .weather-section-head h2,
section.content.dark .weather-hour-card strong,
section.content.dark .weather-day-date strong,
section.content.dark .weather-air-card > strong,
section.content.dark .weather-air-components strong,
section.content.dark .weather-mini-title,
section.content.dark .weather-detail-card strong,
section.content.dark .weather-region-card,
section.content.dark .weather-hero-sub strong{
    color:var(--weather-dark-text) !important;
}

body.dark-mode .weather-page-desc,
body.dark-mode .weather-head-meta,
body.dark-mode .weather-main-desc,
body.dark-mode .weather-hero-sub,
body.dark-mode .weather-stat span,
body.dark-mode .weather-section-head p,
body.dark-mode .weather-hour-card time,
body.dark-mode .weather-day-date span,
body.dark-mode .weather-day-condition,
body.dark-mode .weather-air-card > span,
body.dark-mode .weather-air-card strong small,
body.dark-mode .weather-air-components span,
body.dark-mode .weather-air-point span,
body.dark-mode .weather-air-point strong,
body.dark-mode .weather-detail-card span,
body.dark-mode .weather-region-bottom,
body.dark-mode .weather-source-note,
section.content.dark .weather-page-desc,
section.content.dark .weather-head-meta,
section.content.dark .weather-main-desc,
section.content.dark .weather-hero-sub,
section.content.dark .weather-stat span,
section.content.dark .weather-section-head p,
section.content.dark .weather-hour-card time,
section.content.dark .weather-day-date span,
section.content.dark .weather-day-condition,
section.content.dark .weather-air-card > span,
section.content.dark .weather-air-card strong small,
section.content.dark .weather-air-components span,
section.content.dark .weather-air-point span,
section.content.dark .weather-air-point strong,
section.content.dark .weather-detail-card span,
section.content.dark .weather-region-bottom,
section.content.dark .weather-source-note{
    color:var(--weather-dark-sub) !important;
}

body.dark-mode .weather-hero-main,
body.dark-mode .weather-hero-details,
body.dark-mode .weather-section,
section.content.dark .weather-hero-main,
section.content.dark .weather-hero-details,
section.content.dark .weather-section{
    background:var(--weather-dark-box) !important;
    border-color:var(--weather-dark-border) !important;
}

body.dark-mode .weather-stat,
body.dark-mode .weather-daily-table,
body.dark-mode .weather-day-row,
body.dark-mode .weather-air-components,
body.dark-mode .weather-air-components > div,
body.dark-mode .weather-air-forecast,
body.dark-mode .weather-detail-grid,
body.dark-mode .weather-detail-card,
section.content.dark .weather-stat,
section.content.dark .weather-daily-table,
section.content.dark .weather-day-row,
section.content.dark .weather-air-components,
section.content.dark .weather-air-components > div,
section.content.dark .weather-air-forecast,
section.content.dark .weather-detail-grid,
section.content.dark .weather-detail-card{
    border-color:var(--weather-dark-border) !important;
}

body.dark-mode .weather-head-meta span,
body.dark-mode .weather-city-tab,
body.dark-mode .weather-hour-card,
body.dark-mode .weather-air-card,
body.dark-mode .weather-region-card,
section.content.dark .weather-head-meta span,
section.content.dark .weather-city-tab,
section.content.dark .weather-hour-card,
section.content.dark .weather-air-card,
section.content.dark .weather-region-card{
    background:var(--weather-dark-soft) !important;
    border-color:var(--weather-dark-border) !important;
    color:var(--weather-dark-sub) !important;
}

body.dark-mode .weather-city-tab:hover,
section.content.dark .weather-city-tab:hover{
    background:#28243d !important;
    color:#fff !important;
}

body.dark-mode .weather-city-tab.active,
section.content.dark .weather-city-tab.active{
    background:#28243d !important;
    border-color:#3a3553 !important;
    color:#fff !important;
}

body.dark-mode .weather-region-card:hover,
body.dark-mode .weather-region-card.active,
section.content.dark .weather-region-card:hover,
section.content.dark .weather-region-card.active{
    background:#28243d !important;
    border-color:#3a3553 !important;
}

body.dark-mode .weather-life-card,
section.content.dark .weather-life-card{
    background:var(--weather-dark-soft) !important;
    border-color:var(--weather-dark-border) !important;
}

body.dark-mode .weather-life-card.life-good,
section.content.dark .weather-life-card.life-good{
    background:#102019 !important;
    border-color:#244d3b !important;
}

body.dark-mode .weather-life-card.life-mid,
section.content.dark .weather-life-card.life-mid{
    background:#211c10 !important;
    border-color:#554522 !important;
}

body.dark-mode .weather-life-card.life-warn,
section.content.dark .weather-life-card.life-warn{
    background:#21131a !important;
    border-color:#5d2938 !important;
}

/* MOBILE */
@media(max-width:1100px){
    .weather-hero{
        grid-template-columns:1fr;
    }

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

    .weather-hourly-scroll{
        grid-template-columns:repeat(8,90px);
    }
}

@media(max-width:768px){
    .ppabam-weather-page{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .weather-page-head{
        align-items:flex-start;
        margin-bottom:13px;
    }

    .weather-page-title{
        font-size:22px;
    }

    .weather-page-desc{
        font-size:12px;
    }

    .weather-head-meta{
        display:none;
    }

    .weather-city-tabs{
        margin-left:-10px;
        width:calc(100% + 20px);
        padding:0 10px 3px;
    }

    .weather-hero-main{
        min-height:auto;
        padding:18px;
    }

    .weather-main-temp{
        font-size:50px;
    }

    .weather-main-icon{
        width:70px;
        height:70px;
    }

    .weather-hero-details{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .weather-stat{
        min-height:88px;
        padding:14px;
        border-right:1px solid var(--weather-border) !important;
        border-bottom:1px solid var(--weather-border) !important;
    }

    .weather-stat:nth-child(2n){
        border-right:0 !important;
    }

    .weather-stat:nth-last-child(-n+2){
        border-bottom:0 !important;
    }

    .weather-stat:nth-child(3n){
        border-right:1px solid var(--weather-border);
    }

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

    .weather-section{
        padding:15px;
    }

    .weather-day-row{
        grid-template-columns:64px minmax(120px,1fr) 72px 72px;
    }

    .weather-day-condition span{
        display:none;
    }

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

    .weather-air-cards{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

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

    .weather-detail-card{
        border-right:1px solid var(--weather-border) !important;
        border-bottom:1px solid var(--weather-border) !important;
    }

    .weather-detail-card:nth-child(2n){
        border-right:0 !important;
    }

    .weather-detail-card:nth-last-child(-n+2){
        border-bottom:0 !important;
    }

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

    body.dark-mode .weather-stat,
    body.dark-mode .weather-detail-card,
    section.content.dark .weather-stat,
    section.content.dark .weather-detail-card{
        border-color:var(--weather-dark-border) !important;
    }
}

@media(max-width:480px){
    .weather-hero-sub{
        gap:7px 11px;
    }

    .weather-air-cards{
        grid-template-columns:1fr;
    }

    .weather-day-row{
        grid-template-columns:56px minmax(45px,1fr) 65px 68px;
        min-height:60px;
    }

    .weather-day-condition{
        justify-content:center;
    }

    .weather-day-condition img{
        width:36px;
        height:36px;
    }

    .weather-region-temp{
        font-size:23px;
    }
}


/* =========================================================
   PPABAM WEATHER LIFE INDEX - DARK MODE TEXT FIX
   »ýÈ°Áö¼ö Ä«µåÀÇ ¶óº§/»óÅ°ªÀ» Èò»öÀ¸·Î °íÁ¤
========================================================= */
body.dark-mode .weather-life-card span,
body.dark-mode .weather-life-card strong,
section.content.dark .weather-life-card span,
section.content.dark .weather-life-card strong{
    color:#ffffff !important;
}

body.dark-mode .weather-life-card.life-good span,
body.dark-mode .weather-life-card.life-good strong,
body.dark-mode .weather-life-card.life-mid span,
body.dark-mode .weather-life-card.life-mid strong,
body.dark-mode .weather-life-card.life-warn span,
body.dark-mode .weather-life-card.life-warn strong,
section.content.dark .weather-life-card.life-good span,
section.content.dark .weather-life-card.life-good strong,
section.content.dark .weather-life-card.life-mid span,
section.content.dark .weather-life-card.life-mid strong,
section.content.dark .weather-life-card.life-warn span,
section.content.dark .weather-life-card.life-warn strong{
    color:#ffffff !important;
}


/* =========================================================
   PPABAM WEATHER MOBILE HORIZONTAL SCROLL FINAL
   - »ó´Ü µµ½Ã Ä«Å×°í¸® ¸ð¹ÙÀÏ °¡·Î ½ºÅ©·Ñ
   - ¾ÕÀ¸·Î 24½Ã°£ Ä«µå °¡·Î ½ºÅ©·Ñ
   - ÇâÈÄ 12½Ã°£ ´ë±âÁú °¡·Î ½ºÅ©·Ñ
========================================================= */

/* °øÅë ½ºÅ©·Ñ¹Ù */
.weather-city-tabs,
.weather-hourly-scroll,
.weather-air-timeline{
    scrollbar-width:thin;
    scrollbar-color:#c8ccd8 transparent;
}

.weather-city-tabs::-webkit-scrollbar,
.weather-hourly-scroll::-webkit-scrollbar,
.weather-air-timeline::-webkit-scrollbar{
    height:6px;
}

.weather-city-tabs::-webkit-scrollbar-track,
.weather-hourly-scroll::-webkit-scrollbar-track,
.weather-air-timeline::-webkit-scrollbar-track{
    background:transparent;
}

.weather-city-tabs::-webkit-scrollbar-thumb,
.weather-hourly-scroll::-webkit-scrollbar-thumb,
.weather-air-timeline::-webkit-scrollbar-thumb{
    background:#c8ccd8;
    border-radius:999px;
}

/* =========================================================
   1. Áö¿ª Ä«Å×°í¸®
========================================================= */
.weather-city-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    gap:7px !important;

    width:100% !important;
    max-width:100% !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;

    padding:0 0 7px !important;
    margin:0 0 14px !important;
}

.weather-city-tab{
    flex:0 0 auto !important;
    min-width:56px !important;
    width:auto !important;
    white-space:nowrap !important;
}

/* =========================================================
   2. ¾ÕÀ¸·Î 24½Ã°£
========================================================= */
.weather-hourly-scroll{
    display:grid !important;
    grid-template-columns:none !important;
    grid-auto-flow:column !important;
    grid-auto-columns:92px !important;

    gap:8px !important;
    width:100% !important;
    max-width:100% !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:0 0 10px !important;
    margin:0 !important;

    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
}

.weather-hour-card{
    min-width:0 !important;
    width:92px !important;
    scroll-snap-align:start;
}

/* =========================================================
   3. ÇâÈÄ 12½Ã°£ ´ë±âÁú
========================================================= */
.weather-air-timeline{
    display:grid !important;
    grid-template-columns:none !important;
    grid-auto-flow:column !important;
    grid-auto-columns:72px !important;

    gap:6px !important;
    width:100% !important;
    max-width:100% !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:2px 0 10px !important;
    margin:0 !important;

    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
}

.weather-air-point{
    min-width:0 !important;
    width:72px !important;
    padding:7px 5px !important;
    border:1px solid var(--weather-border);
    border-radius:10px;
    background:var(--weather-soft);
    scroll-snap-align:start;
}

.weather-air-point span{
    font-size:9px !important;
}

.weather-air-point strong{
    font-size:9px !important;
}

.weather-air-point i{
    width:10px !important;
    height:10px !important;
    margin:8px auto !important;
}

/* DARK MODE ½ºÅ©·Ñ */
body.dark-mode .weather-city-tabs,
body.dark-mode .weather-hourly-scroll,
body.dark-mode .weather-air-timeline,
section.content.dark .weather-city-tabs,
section.content.dark .weather-hourly-scroll,
section.content.dark .weather-air-timeline{
    scrollbar-color:#4a475d transparent;
}

body.dark-mode .weather-city-tabs::-webkit-scrollbar-thumb,
body.dark-mode .weather-hourly-scroll::-webkit-scrollbar-thumb,
body.dark-mode .weather-air-timeline::-webkit-scrollbar-thumb,
section.content.dark .weather-city-tabs::-webkit-scrollbar-thumb,
section.content.dark .weather-hourly-scroll::-webkit-scrollbar-thumb,
section.content.dark .weather-air-timeline::-webkit-scrollbar-thumb{
    background:#4a475d;
}

body.dark-mode .weather-air-point,
section.content.dark .weather-air-point{
    background:#0f0e1b !important;
    border-color:#2a2a37 !important;
}

/* =========================================================
   MOBILE
========================================================= */
@media(max-width:768px){

    /* »ó´Ü µµ½Ã Ä«Å×°í¸®°¡ ÄÜÅÙÃ÷ 10px ¾ÈÂÊ¿¡¼­ Á¤»ó ½ºÅ©·Ñ */
    .weather-city-tabs{
        width:100% !important;
        max-width:100% !important;
        margin:0 0 12px !important;
        padding:0 0 7px !important;
    }

    .weather-city-tab{
        min-width:58px !important;
        height:34px !important;
        padding:0 12px !important;
    }

    /* 24½Ã°£ */
    .weather-hourly-scroll{
        grid-auto-columns:86px !important;
        gap:7px !important;
        padding-bottom:9px !important;
    }

    .weather-hour-card{
        width:86px !important;
        padding:11px 7px !important;
    }

    /* ´ë±âÁú 12½Ã°£ */
    .weather-air-timeline{
        grid-auto-columns:68px !important;
        gap:6px !important;
        padding-bottom:9px !important;
    }

    .weather-air-point{
        width:68px !important;
        padding:7px 4px !important;
    }
}

@media(max-width:480px){

    .weather-city-tab{
        min-width:54px !important;
        padding:0 11px !important;
    }

    .weather-hourly-scroll{
        grid-auto-columns:82px !important;
    }

    .weather-hour-card{
        width:82px !important;
    }

    .weather-air-timeline{
        grid-auto-columns:66px !important;
    }

    .weather-air-point{
        width:66px !important;
    }
}