/* =============================================================
 * weather-hub.css  —  날씨 허브 카테고리 모듈 (Compact v2)
 *
 * 의존: _tokens.css (색상/폰트/간격/반경/그림자/브레이크포인트 변수)
 * 규약: ≤ 480 / 768 / 1024 / 1280 / 1400 / 1920
 *
 * v2 변경점 — 공간 절약 리디자인
 *   · 현재 날씨: ≥1024에서 "메인 | 세부 | 시간별" 3-컬럼 배치
 *   · 주간 예보: 7일 세로 스택 → 7분할 가로 그리드 (≥480)
 *   · 전반적 padding/폰트 축소, 섹션 간 불필요한 border-bottom 제거
 * ============================================================= */

[hidden] { display: none !important; }

/* =============================================================================
   Root
   ============================================================================= */
.weather-hub {
    --wh-primary:   #0ea5e9;
    --wh-sky:       #e0f2fe;
    --wh-blue-dark: #0369a1;
    --wh-rain:      #3b82f6;
    --wh-text:      #0f172a;
    --wh-text-mute: #64748b;
    --wh-border:    #e2e8f0;
    --wh-bg:        var(--color-white);
    --wh-bg-alt:    #f8fafc;
    --wh-radius:    10px;
    --wh-shadow:    0 1px 4px rgba(var(--rgb-black), .07);

    background:    var(--wh-bg);
    border:        1px solid var(--wh-border);
    border-radius: var(--wh-radius);
    margin-bottom: 20px;
    overflow:      hidden;
    font-family:   'Noto Sans KR', sans-serif;
}

/* =============================================================================
   헤더
   ============================================================================= */
.weather-hub__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         7px 12px;
    gap:             8px;
    background:      linear-gradient(135deg, var(--wh-primary) 0%, var(--wh-blue-dark) 100%);
}
.weather-hub__heading {
    margin:      0;
    font-size:   var(--fs-lg);
    font-weight: var(--fw-bold);
    color:       var(--color-white);
    display:     flex;
    align-items: center;
    gap:         6px;
}
.weather-hub__heading-icon { font-size: var(--fs-xl); }
.weather-hub__today {
    font-size:   var(--fs-sm);
    color:       rgba(var(--rgb-white), .85);
    white-space: nowrap;
    margin-right: auto;
}

/* =============================================================================
   위치 권한 요청
   ============================================================================= */
.weather-hub__permission {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             6px;
    padding:         16px 14px;
    text-align:      center;
    background:      linear-gradient(180deg, var(--wh-sky) 0%, var(--color-white) 100%);
}
.weather-hub__permission-icon { font-size: 28px; line-height: 1; }
.weather-hub__permission-text {
    margin:      0;
    font-size:   var(--fs-base);
    color:       var(--wh-text);
    font-weight: var(--fw-medium);
}
.weather-hub__permission-btn {
    padding:          8px 20px;
    background:       var(--wh-primary);
    color:            var(--color-white);
    border:           none;
    border-radius:    20px;
    font-size:        var(--fs-base);
    font-weight:      var(--fw-bold);
    cursor:           pointer;
    transition:       background .2s, transform .1s;
    font-family:      inherit;
}
.weather-hub__permission-btn:hover  { background: var(--wh-blue-dark); }
.weather-hub__permission-btn:active { transform: scale(.97); }
.weather-hub__permission-note {
    margin:     0;
    font-size:  var(--fs-xs);
    color:      var(--wh-text-mute);
}

/* =============================================================================
   로딩 스켈레톤
   ============================================================================= */
.weather-hub__loading { padding: 14px; }
@keyframes wh-shimmer {
    from { background-position: -400px 0; }
    to   { background-position:  400px 0; }
}
.wh-skeleton {
    background:      linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation:       wh-shimmer 1.4s infinite;
    border-radius:   6px;
}
.wh-skeleton--location { height: 14px; width: 35%; margin-bottom: 10px; }
.wh-skeleton--temp     { height: 40px; width: 25%; margin-bottom: 6px;  }
.wh-skeleton--desc     { height: 14px; width: 45%; margin-bottom: 14px; }
.wh-skeleton-weekly    { display: flex; gap: 6px; overflow: hidden; }
.wh-skeleton--day      { height: 70px; flex: 1; min-width: 0; }

/* =============================================================================
   에러
   ============================================================================= */
.weather-hub__error {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    padding:        18px 16px;
    text-align:     center;
}
.wh-error__icon { font-size: 26px; }
.wh-error__msg  { margin: 0; font-size: var(--fs-base); color: var(--wh-text); }
.weather-hub__retry-btn {
    padding:       7px 18px;
    background:    var(--wh-primary);
    color:         var(--color-white);
    border:        none;
    border-radius: 18px;
    font-size:     var(--fs-sm);
    font-weight:   var(--fw-semibold);
    cursor:        pointer;
    font-family:   inherit;
    transition:    background .2s;
}
.weather-hub__retry-btn:hover { background: var(--wh-blue-dark); }

/* =============================================================================
   현재 날씨 — Compact 레이아웃
   - 모바일: 세로 스택
   - ≥1024:  "메인 | 세부 2×2" 2-컬럼 (시간별은 아래 섹션으로 분리 유지)
   ============================================================================= */
.wh-current {
    padding:    10px 12px;
    background: linear-gradient(135deg, var(--wh-sky) 0%, #dbeafe 100%);
    display:    grid;
    gap:        4px 12px;
    grid-template-areas:
        "loc"
        "main"
        "details"
        "updated";
}
.wh-current__location {
    grid-area:   loc;
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}
.wh-current__location-icon { font-size: var(--fs-sm); }
.wh-current__location-name {
    font-size:   var(--fs-base);
    font-weight: var(--fw-semibold);
    color:       var(--wh-blue-dark);
}
.wh-current__change-btn {
    background:    transparent;
    border:        1px solid var(--wh-primary);
    border-radius: 10px;
    padding:       1px 7px;
    font-size:     var(--fs-xs);
    color:         var(--wh-primary);
    cursor:        pointer;
    font-family:   inherit;
    transition:    background .2s, color .2s;
    white-space:   nowrap;
}
.wh-current__change-btn:hover {
    background: var(--wh-primary);
    color:      var(--color-white);
}
.wh-current__main {
    grid-area:   main;
    display:     flex;
    align-items: center;
    gap:         6px 12px;
    flex-wrap:   wrap;
}
.wh-current__icon { font-size: 34px; line-height: 1; }
.wh-current__temp-wrap { display: flex; align-items: flex-start; }
.wh-current__temp {
    font-size:     44px;
    font-weight:   var(--fw-extrabold);
    color:         var(--wh-text);
    line-height:   1;
    letter-spacing: -1.5px;
}
.wh-current__unit {
    font-size:   18px;
    font-weight: var(--fw-semibold);
    color:       var(--wh-text-mute);
    margin-top:  4px;
}
.wh-current__desc {
    margin:      0;
    font-size:   var(--fs-md);
    font-weight: var(--fw-medium);
    color:       var(--wh-blue-dark);
    align-self:  center;
}
.wh-current__details {
    grid-area:   details;
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         4px 0;
    align-self:  center;
}
.wh-detail {
    display:        inline-flex;
    align-items:    baseline;
    gap:            5px;
    background:     transparent;
    border:         none;
    border-radius:  0;
    padding:        0 14px 0 0;
    text-align:     left;
    position:       relative;
}
.wh-detail:not(:last-child)::after {
    content:      '·';
    color:        var(--wh-text-mute);
    opacity:      .5;
    position:     absolute;
    right:        4px;
    top:          50%;
    transform:    translateY(-50%);
    font-weight:  var(--fw-bold);
}
.wh-detail__label {
    display:       inline;
    font-size:     var(--fs-sm);
    color:         var(--wh-text-mute);
    margin-bottom: 0;
}
.wh-detail__value {
    display:     inline;
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semibold);
    color:       var(--wh-text);
}
.wh-current__updated {
    grid-area:  updated;
    margin:     0;
    font-size:  var(--fs-xs);
    color:      var(--wh-text-mute);
    text-align: right;
}

/* ≥768 태블릿 — updated를 loc 행 우측 끝으로 이동, main+details 2열 */
@media (min-width: 768px) {
    .wh-current {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "loc  updated"
            "main details";
        align-items: center;
    }
    .wh-current__updated {
        text-align:  right;
        white-space: nowrap;
        align-self:  center;
    }
    .wh-current__details { justify-content: flex-start; }
}

/* ≥1024 PC — 폰트만 살짝 키움 */
@media (min-width: 1024px) {
    .wh-current {
        padding: 12px 14px;
    }
    .wh-current__temp { font-size: 48px; letter-spacing: -1.5px; }
    .wh-current__icon { font-size: 38px; }
    .wh-detail__label,
    .wh-detail__value { font-size: var(--fs-base); }
}

/* ≤480 모바일 — 폰트/패딩 축소 (세부 칩은 자동 줄바꿈) */
@media (max-width: 480px) {
    .wh-current { padding: 10px 12px; gap: 6px 10px; }
    .wh-current__main { gap: 6px 10px; }
    .wh-current__icon { font-size: 36px; }
    .wh-current__temp { font-size: 38px; letter-spacing: -1px; }
    .wh-current__unit { font-size: 16px; margin-top: 3px; }
    .wh-current__desc { font-size: var(--fs-sm); }
    .wh-detail { padding-right: 10px; }
    .wh-detail:not(:last-child)::after { right: 2px; }
}

/* =============================================================================
   섹션 공통
   ============================================================================= */
.wh-section-title {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}
.wh-empty {
    margin:     0;
    font-size:  var(--fs-sm);
    color:      var(--wh-text-mute);
    text-align: center;
    padding:    12px 0;
}

/* =============================================================================
   시간별 예보 — 슬림 가로 스크롤
   ============================================================================= */
.wh-hourly {
    padding:    8px 12px;
    background: var(--wh-bg);
    border-top: 1px solid var(--wh-border);
}
.wh-hourly__list {
    display:         flex;
    gap:             6px;
    overflow-x:      auto;
    scrollbar-width: thin;
    padding-bottom:  2px;
}
.wh-hour {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1px;
    padding:        5px 7px;
    background:     var(--wh-bg-alt);
    border-radius:  7px;
    border:         1px solid var(--wh-border);
    min-width:      48px;
    flex:           0 0 auto;
}
.wh-hour__time { font-size: var(--fs-xs); color: var(--wh-text-mute); font-weight: var(--fw-medium); }
.wh-hour__icon { font-size: var(--fs-xl); line-height: 1; }
.wh-hour__temp { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--wh-text); }
.wh-hour__prob { font-size: var(--fs-xs); color: var(--wh-text-mute); }
.wh-hour__prob--rain { color: var(--wh-rain); font-weight: var(--fw-semibold); }

/* 자정(다음날) 경계 카드 — 시각적 구분 */
.wh-hour--new-day {
    border-left-width: 2px;
    border-left-color: var(--wh-primary);
}
.wh-hour--new-day .wh-hour__time {
    color:       var(--wh-primary);
    font-weight: var(--fw-bold);
}

/* ≥1024 PC — 16개 카드를 화면 폭에 균등 분할 (스크롤 제거) */
@media (min-width: 1024px) {
    .wh-hourly__list {
        display:               grid;
        grid-template-columns: repeat(16, 1fr);
        gap:                   4px;
        overflow-x:            visible;
    }
    .wh-hour {
        min-width: 0;
        padding:   5px 3px;
    }
}

/* =============================================================================
   주간 예보 — 7분할 가로 그리드 (Compact 카드)
   ============================================================================= */
.wh-weekly {
    padding:    8px 12px 10px;
    background: var(--wh-bg);
    border-top: 1px solid var(--wh-border);
}
.wh-weekly__list {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   4px;
}
.wh-day {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            2px;
    padding:        5px 4px;
    border-radius:  7px;
    border:         1px solid var(--wh-border);
    background:     var(--wh-bg-alt);
    min-width:      0;
    text-align:     center;
    transition:     background .15s, border-color .15s;
}
.wh-day:hover { background: var(--wh-bg); border-color: var(--wh-primary); }
.wh-day--today {
    background:   var(--wh-sky);
    border-color: var(--wh-primary);
}
.wh-day__label {
    font-size:   var(--fs-xs);
    font-weight: var(--fw-bold);
    color:       var(--wh-text);
    line-height: 1.2;
}
.wh-day--today .wh-day__label { color: var(--wh-blue-dark); }
.wh-day__date {
    font-size:   var(--fs-xs);
    color:       var(--wh-text-mute);
    line-height: 1.2;
}
.wh-day__icon {
    font-size:   var(--fs-xl);
    line-height: 1;
    margin:      0;
}
.wh-day__desc { display: none; }
.wh-day__prob {
    font-size:   var(--fs-xs);
    color:       var(--wh-text-mute);
    line-height: 1;
}
.wh-day__prob--rain { color: var(--wh-rain); font-weight: var(--fw-semibold); }
.wh-day__temps-row {
    display:     flex;
    align-items: center;
    gap:         2px;
    font-size:   var(--fs-sm);
    line-height: 1.1;
}
.wh-day__max     { font-weight: var(--fw-bold);     color: #dc2626; }
.wh-day__divider { color: var(--wh-border); }
.wh-day__min     { font-weight: var(--fw-semibold); color: var(--wh-rain); }

/* ≤480 모바일 — 주간을 가로 스크롤로 전환 (7개 칸이 너무 좁아지므로) */
@media (max-width: 480px) {
    .wh-weekly { padding: 6px 10px 8px; }
    .wh-weekly__list {
        display:         flex;
        gap:             4px;
        overflow-x:      auto;
        scrollbar-width: thin;
        padding-bottom:  2px;
    }
    .wh-day {
        flex:      0 0 auto;
        min-width: 52px;
        padding:   5px 5px;
    }
}