/* 사이트 기능 "날씨"(/site/weather, 2026-11-11) 전용 스타일. 이 페이지에서만 싣는다(site_features/_weather 파셜이 head 에 dynamic 추적 스타일시트로 건다 -
   마을버스·지하철·고속버스와 같은 방식).

   **Tailwind 를 거치지 않는 순수 CSS 다**(Propshaft 가 그대로 내보낸다). dark: 변형을 쓸 수 없어 테마는 조상 셀렉터(.dark)로 가른다.

   무대(하늘 바탕의 섬·지도)와 위치 막대(짙은 남색 판 - 날씨 강조색 #1e6fb8 의 짙은 쪽)는 테마와 무관하다. 결과 칸은 사이트 테마를 따르는 종이 카드다.
   글자 크기는 em 으로 적고 뿌리에서 큰글씨 배율(--silver-scale)을 한 번 곱한다. 작은 글자는 바탕과 4.5:1 넘게 둔다. */

.wx {
  --wx-sky: #1e6fb8;
  --wx-navy: #123a6b;
  --wx-navy-deep: #0b2547;
  --wx-ink: #0f1d2e;
  --wx-paper: #ffffff;
  --wx-paper-2: #f3f7fc;
  --wx-rule: #dbe5f1;
  --wx-muted: #4a5a6e;
  --wx-warn: #b45309;
  --wx-good: #1d7a45;
  --wx-bad: #b42318;
  --wx-cloud: #e2e8f0;
  --wx-cloud-dark: #cbd5e1;
  --wx-cloud-edge: #8796ab;
  font-size: calc(1rem * var(--silver-scale, 1));
  color: var(--wx-ink);
}
.dark .wx {
  --wx-ink: #e7eef8;
  --wx-paper: #0f1826;
  --wx-paper-2: #142033;
  --wx-rule: #24344b;
  --wx-muted: #a6b4c6;
  --wx-warn: #fbbf24;
  --wx-good: #6ee7a8;
  --wx-bad: #fca5a5;
  --wx-cloud: #cbd5e1;
  --wx-cloud-dark: #94a3b8;
  --wx-cloud-edge: #64748b;
}
.wx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 아이콘 ── */
.wx-icon { display: inline-block; width: 1.6em; height: 1.6em; vertical-align: middle; flex: none; }
.wx-icon-xs { width: 1.15em; height: 1.15em; }
.wx-icon-sm { width: 1.5em; height: 1.5em; }
.wx-icon-lg { width: 3.4em; height: 3.4em; }
.wx-glyph { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
.wx-arrow { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; color: var(--wx-sky); }

/* ── 탭 ── */
.wx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35em; padding: 0.3em; border-radius: 999px; background: var(--wx-paper-2); box-shadow: inset 0 0 0 1px var(--wx-rule); }
.wx-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; min-height: 2.6em; padding: 0.35em 0.6em; border-radius: 999px;
  font-size: 0.9em; font-weight: 700; color: var(--wx-muted); background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
.wx-tab:hover { color: var(--wx-ink); }
.wx-tab[aria-selected="true"] { background: var(--wx-navy); color: #fff; box-shadow: 0 6px 16px -10px rgb(11 37 71 / 0.8); }
.wx-tab:focus-visible { outline: 3px solid #f6b22d; outline-offset: 2px; }
.wx-tab-glyph { width: 1.05em; height: 1.05em; }
@media (max-width: 420px) { .wx-tab { font-size: 0.82em; gap: 0.2em; padding-inline: 0.3em; } .wx-tab-glyph { display: none; } }

/* ── 무대 카드 ── */
.wx-card { border-radius: 1.25rem; background: var(--wx-navy); box-shadow: 0 0 0 1px rgb(18 58 107 / 0.35), 0 18px 40px -18px rgb(11 37 71 / 0.55); }
.wx-stage {
  position: relative; overflow: hidden; border-radius: 1.25rem 1.25rem 0 0; min-height: 15rem;
  background-color: #cfe7f8; background-image: linear-gradient(180deg, #9cccf2 0%, #e3f1fb 100%); background-size: cover; background-position: center 55%;
  isolation: isolate; touch-action: none;
}
.wx-stage::before { content: ""; display: block; padding-top: 56%; }
@media (min-width: 1024px) { .wx-stage::before { padding-top: min(56%, calc(48vh - 4rem)); } .wx-stage { min-height: 17rem; } }
@media (max-width: 639px) { .wx-stage::before { padding-top: 78%; } }
@media (any-pointer: coarse) { .wx-stage { touch-action: pan-y; } }
.wx-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; z-index: 0; opacity: 0; transition: opacity 0.6s ease; }
.wx-stage[data-gl="gpu"] canvas, .wx-stage[data-gl="software"] canvas { opacity: 1; }
.wx-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* 덮개(큰 기온) - 반투명 바탕을 깔아 하늘색과 상관없이 글자 대비를 지킨다. */
.wx-overlay {
  position: absolute; left: 0.9em; top: 0.9em; z-index: 2; max-width: min(62%, 17em); padding: 0.6em 0.85em 0.7em; border-radius: 1em;
  background: rgb(11 37 71 / 0.72); color: #fff; backdrop-filter: blur(6px); box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.6); pointer-events: none;
}
.wx-ov-place { font-size: 0.85em; font-weight: 700; opacity: 0.95; overflow-wrap: anywhere; }
.wx-ov-temp { font-size: 3.6em; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wx-ov-line { margin-top: 0.15em; font-size: 0.95em; font-weight: 700; }
.wx-ov-feels { font-weight: 600; opacity: 0.9; }
.wx-ov-diff { margin-top: 0.15em; font-size: 0.85em; font-weight: 700; color: #ffe08a; }
/* 시간 막대로 고른 시각의 꼬리표("오후 3시 예보")와 칩(강수확률·대기질·자외선 - 2026-11-12). 꼬리표는 [hidden] 을 다시 적는다(display 가 hidden 을 이긴다). */
.wx-ov-when { display: inline-block; margin-top: 0.25em; padding: 0.05em 0.6em; border-radius: 999px; background: #f6b22d; color: #1f1300; font-size: 0.74em; font-weight: 800; }
.wx-ov-when[hidden] { display: none; }
.wx-ov-chips { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.45em; }
.wx-ov-chips:empty { display: none; }
.wx-ov-chip { padding: 0.1em 0.55em; border-radius: 999px; background: rgb(255 255 255 / 0.16); font-size: 0.72em; font-weight: 700; white-space: nowrap; }
.wx-ov-chip[data-tone="warn"] { background: #f59f00; color: #1f1300; }
.wx-ov-chip[data-tone="bad"] { background: #e03131; color: #fff; }
@media (max-width: 639px) {
  .wx-ov-chip { font-size: 0.66em; }
  .wx-ov-chip[data-kind="uv"] { display: none; } /* 좁은 화면은 덮개가 섬을 덜 가리게 둘만 */
}
@media (max-width: 639px) {
  .wx-overlay { left: 0.55em; top: 0.55em; max-width: 46%; padding: 0.4em 0.65em 0.5em; }
  .wx-ov-temp { font-size: 2.4em; }
  .wx-ov-line { font-size: 0.82em; }
  .wx-ov-diff { font-size: 0.74em; }
}

/* ── 위치 막대 ── */
.wx-placebar { position: relative; padding: 0.9em 1em 1em; color: #fff; border-top: 3px solid #f6b22d; border-radius: 0 0 1.25rem 1.25rem; }
.wx-place-head { display: flex; align-items: center; gap: 0.5em; }
.wx-place-name { font-size: 1.15em; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.wx-place-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; margin-top: 0.6em; }
.wx-place-status { margin-top: 0.5em; font-size: 0.82em; color: #dbe8f7; min-height: 0; }
/* 비었을 때도 접근성 트리에 남긴다(display:none 이면 비웠다 다시 넣는 사이 빠졌다 돌아와 낭독이 빠질 수 있다 - 검수) - 눈에만 숨긴다. */
.wx-place-status:empty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wx-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.3em; height: 2.3em; border-radius: 999px; border: 0;
  background: transparent; color: inherit; cursor: pointer;
}
.wx-icon-btn:hover { background: rgb(255 255 255 / 0.12); }
.wx-result .wx-icon-btn:hover, .wx-dialog .wx-icon-btn:hover { background: var(--wx-paper-2); }
.wx-icon-btn:focus-visible, .wx-chip-btn:focus-visible, .wx-chip:focus-visible, .wx-kind:focus-visible, .wx-spot-btn:focus-visible, .wx-unit-btn:focus-visible {
  outline: 3px solid #f6b22d; outline-offset: 2px;
}
.wx-fav .wx-fav-on { display: none; color: #f6b22d; }
.wx-fav[aria-pressed="true"] .wx-fav-on { display: inline-block; }
.wx-fav[aria-pressed="true"] .wx-fav-off { display: none; }
.wx-chip-btn {
  display: inline-flex; align-items: center; gap: 0.35em; min-height: 2.3em; padding: 0.3em 0.85em; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.08); color: #fff; font-size: 0.86em; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.wx-chip-btn:hover { background: rgb(255 255 255 / 0.18); }
.wx-chip-primary { background: #f6b22d; border-color: #f6b22d; color: #1f1300; }
.wx-chip-primary:hover { background: #ffc54d; }
.wx-result .wx-chip-btn { border-color: var(--wx-rule); background: var(--wx-paper-2); color: var(--wx-ink); }
.wx-timebar .wx-chip-btn { border-color: rgb(255 255 255 / 0.4); }
.wx-unit { display: inline-flex; margin-left: auto; border-radius: 999px; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.4); }
.wx-unit-btn { min-width: 2.6em; min-height: 2.3em; padding: 0 0.6em; border: 0; background: transparent; color: #fff; font-size: 0.82em; font-weight: 800; cursor: pointer; }
.wx-unit-btn[aria-pressed="true"] { background: #fff; color: var(--wx-navy-deep); }
.wx-chips { display: flex; gap: 0.4em; overflow-x: auto; margin-top: 0.6em; padding-bottom: 0.2em; overscroll-behavior-x: contain; scrollbar-width: thin; }
.wx-chip {
  flex: none; min-height: 2em; padding: 0.2em 0.8em; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.35); background: transparent; color: #fff;
  font-size: 0.82em; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.wx-chip-on { background: #fff; color: var(--wx-navy-deep); }
.wx-chip-shared { border-style: dashed; }
.wx-chip-save { background: #f6b22d; color: #1f1300; border-color: #f6b22d; font-weight: 800; }

/* ── 창 ── */
.wx-dialog { margin: auto; width: calc(100% - 2rem); max-width: 30rem; padding: 0; border: 0; border-radius: 1.1rem; background: transparent; color: inherit; }
.wx-dialog::backdrop { background: rgb(15 23 42 / 0.7); backdrop-filter: blur(4px); }
.wx-dialog-box { border-radius: 1.1rem; background: var(--wx-paper, #fff); color: var(--wx-ink, #0f1d2e); padding: 1.1em 1.2em 1.2em; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5); font-size: calc(1rem * var(--silver-scale, 1)); }
.dark .wx-dialog-box { background: #0f1826; color: #e7eef8; }
.wx-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.wx-dialog-title { font-size: 1.05em; font-weight: 800; }
.wx-dialog-body { margin-top: 0.6em; font-size: 0.93em; line-height: 1.6; }
.wx-dialog-note { margin-top: 0.5em; font-size: 0.85em; color: var(--wx-muted, #4a5a6e); }
.dark .wx-dialog-note { color: #a6b4c6; }
.wx-dialog-status { min-height: 1.3em; margin-top: 0.5em; font-size: 0.85em; color: var(--wx-muted, #4a5a6e); }
.wx-dialog-actions { display: flex; gap: 0.5em; margin-top: 0.9em; }
.wx-dialog-ad { margin-top: 0.9em; padding-top: 0.8em; border-top: 1px solid var(--wx-rule, #dbe5f1); }
.wx-locate-portrait { display: block; width: 6.5em; height: 6.5em; margin: 0.6em auto 0; border-radius: 999px; object-fit: cover; }
.wx-field { display: flex; flex-direction: column; gap: 0.25em; margin-top: 0.7em; }
.wx-label { font-size: 0.8em; font-weight: 700; color: var(--wx-muted, #4a5a6e); }
.wx-placebar .wx-label { color: #dbe8f7; }
.dark .wx-label { color: #a6b4c6; }
.wx-input, .wx-select {
  width: 100%; min-height: 2.6em; padding: 0.4em 0.7em; border-radius: 0.7em; border: 1px solid var(--wx-rule, #dbe5f1); background: var(--wx-paper, #fff);
  color: inherit; font-size: 0.95em;
}
.dark .wx-input, .dark .wx-select { background: #142033; border-color: #24344b; }
.wx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; }
@media (max-width: 480px) { .wx-steps { grid-template-columns: 1fr; } }
.wx-results { max-height: 14em; overflow-y: auto; margin-top: 0.4em; border-radius: 0.7em; border: 1px solid var(--wx-rule, #dbe5f1); overscroll-behavior: contain; }
.wx-result-item { padding: 0.55em 0.8em; font-size: 0.92em; cursor: pointer; border-top: 1px solid var(--wx-rule, #dbe5f1); }
.wx-result-item:first-child { border-top: 0; }
.wx-result-item:hover, .wx-result-item[aria-selected="true"] { background: #e8f1fb; }
.dark .wx-result-item:hover, .dark .wx-result-item[aria-selected="true"] { background: #1c2c45; }

/* ── 상태·안내 ── */
.wx-status { min-height: 0; font-size: 0.85em; color: var(--wx-muted); }
.wx-status:empty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wx-status[data-tone="warn"] { color: var(--wx-warn); font-weight: 700; }
/* 정상 안내("중구 명동, 지금 9도")는 읽어 주기만 한다 - 같은 내용이 덮개·카드에 이미 보인다. */
.wx-status[data-tone="ok"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wx-note { padding: 0.8em 1em; border-radius: 0.9em; background: var(--wx-paper-2); color: var(--wx-muted); font-size: 0.9em; line-height: 1.6; }
.wx-note-warn { color: var(--wx-warn); font-weight: 600; }
.wx-fine { font-size: 0.8em; color: var(--wx-muted); line-height: 1.5; }
.wx-source, .wx-source-line { font-size: 0.75em; color: var(--wx-muted); line-height: 1.55; }
.wx-source a { text-decoration: underline; }
.wx-frame { display: block; }
.wx-result-ad { scroll-margin-top: 5.5rem; }
/* 탭 패널 - 무대 카드·광고·결과 조각을 16px 씩 띄운다(2026-11-12). 종전에는 칸 규칙이 없어(블록) 카드·"광고" 라벨·광고·결과가 0px 로 붙었다 -
   KTX·지하철처럼 광고가 바깥 flex-col 의 바로 아래 칸이면 gap 을 받지만 날씨는 탭 안으로 한 겹 들어가 빠졌다.
   :not([hidden]) 은 꼭 둔다 - display 를 그냥 주면 hidden 속성(UA 의 display:none)을 이겨 숨긴 탭이 보인다. 숨긴 광고(hidden)·접힌 광고
   (application.css 의 display:none)·비어 있는 조각(아직 받지 않은 해외·전국)은 칸을 차지하지 않아 빈 간격이 두 번 생기지 않는다.
   광고 묶음 위는 4px 더 - 무대 카드의 그림자가 아래로 18px 번져 16px 이면 "광고" 라벨이 그림자 안에 앉아 보였다. */
.wx-tabpanel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.wx-tabpanel > .wx-frame:empty { display: none; }
.wx-tabpanel > .wx-result-ad { margin-top: 0.25rem; }
.wx-skeleton { display: grid; gap: 0.7em; }
.wx-skeleton span { display: block; height: 4.5em; border-radius: 1em; background: linear-gradient(90deg, var(--wx-paper-2), var(--wx-rule), var(--wx-paper-2)); background-size: 200% 100%; animation: wx-shimmer 1.4s linear infinite; }
.wx-skeleton span:nth-child(2) { height: 7em; }
@keyframes wx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wx-skeleton span { animation: none; } }

/* ── 결과 카드 ── */
/* 열은 minmax(0, 1fr) - 시간별 칸 띠(max-content)가 격자 열을 넓혀 결과 카드가 화면 밖으로 늘어나지 않게(가로 스크롤은 띠 안에서만). */
.wx-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9em; scroll-margin-top: 5.5rem; }
.wx-tabpanel, .wx-frame, .wx-block { min-width: 0; }
.wx-block { padding: 0.95em 1em 1em; border-radius: 1.1em; background: var(--wx-paper); box-shadow: 0 0 0 1px var(--wx-rule); }
.wx-block-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; margin-bottom: 0.55em; }
.wx-block-title { display: inline-flex; align-items: center; gap: 0.35em; font-size: 1em; font-weight: 800; }
.wx-sub { display: flex; align-items: center; gap: 0.35em; margin-top: 0.8em; font-size: 0.9em; font-weight: 800; }
.wx-grid { display: grid; gap: 0.9em; }
@media (min-width: 640px) { .wx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx-commute { display: flex; align-items: center; gap: 0.45em; padding: 0.6em 0.9em; border-radius: 0.9em; background: #e7f3ff; color: #0b3a66; font-size: 0.9em; font-weight: 700; }
.wx-commute-wet { background: #fff4d6; color: #6b4300; }
.dark .wx-commute { background: #12304f; color: #d7e9ff; }
.dark .wx-commute-wet { background: #3d2e0c; color: #ffe6a8; }

/* 지금 */
.wx-now-main { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.wx-now-temp { font-size: 2.2em; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wx-now-cond { font-weight: 700; color: var(--wx-muted); }
.wx-now-side { margin-left: auto; text-align: right; font-size: 0.9em; line-height: 1.6; }
@media (max-width: 480px) { .wx-now-side { margin-left: 0; text-align: left; width: 100%; } }
.wx-diff { font-weight: 700; }
.wx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; margin-top: 0.8em; }
@media (max-width: 480px) { .wx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx-facts > div { padding: 0.55em 0.7em; border-radius: 0.8em; background: var(--wx-paper-2); }
.wx-facts dt { display: flex; align-items: center; gap: 0.3em; font-size: 0.78em; color: var(--wx-muted); font-weight: 700; }
.wx-facts dd { margin-top: 0.15em; font-weight: 700; font-size: 0.92em; overflow-wrap: anywhere; }
.wx-moon { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: #2a3550; box-shadow: inset calc((0.5 - var(--phase, 0)) * 2em) 0 0 0 #f1e3a3; transform: scaleX(-1); }

/* 시간별 */
.wx-scroll-btns { display: flex; gap: 0.2em; }
.wx-hourly { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 0.2em; }
.wx-hourly:focus-visible { outline: 3px solid #f6b22d; outline-offset: 2px; border-radius: 0.6em; }
/* 칸(시각·하늘·기온·강수)은 위, 서버가 그린 기온 추세선·강수 막대(SVG)는 그 아래 띠에 둔다 - 선이 숫자를 가리지 않게. */
.wx-hourly-track { position: relative; width: max-content; padding-bottom: 74px; }
.wx-hourly-svg { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.wx-line { fill: none; stroke: #f08c00; stroke-width: 2.4; stroke-linecap: round; }
.wx-dot { fill: #fff; stroke: #f08c00; stroke-width: 1.6; }
.dark .wx-dot { fill: #0f1826; }
.wx-bar { fill: #5aa2ea; opacity: 0.55; }
.wx-hours { display: flex; }
.wx-hour {
  width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.15em; padding: 0.3em 0 0.4em; scroll-snap-align: start;
  font-size: 0.82em;
}
.wx-hour-day0 { border-left: 1px dashed var(--wx-rule); }
.wx-hour-time { font-weight: 700; color: var(--wx-muted); white-space: nowrap; font-size: 0.92em; }
.wx-hour-temp { font-weight: 800; font-variant-numeric: tabular-nums; }
.wx-hour-pop { font-size: 0.85em; color: #2563eb; font-weight: 700; }
.dark .wx-hour-pop { color: #93c5fd; }
.wx-pop-high { color: #1d4ed8; }
.wx-hour-mm { font-size: 0.75em; color: var(--wx-muted); text-align: center; line-height: 1.2; }

/* 10일 */
.wx-days { display: grid; }
.wx-day { display: grid; grid-template-columns: minmax(4.6em, 1fr) auto minmax(8em, 1.4fr); align-items: center; gap: 0.6em; padding: 0.45em 0; border-top: 1px solid var(--wx-rule); }
.wx-day:first-child { border-top: 0; }
.wx-day-name { font-weight: 700; font-size: 0.92em; }
.wx-day-weekend .wx-day-name { color: #c0392b; }
.dark .wx-day-weekend .wx-day-name { color: #fca5a5; }
.wx-day-wday { color: var(--wx-muted); font-weight: 600; }
.wx-day-halves { display: inline-flex; gap: 0.5em; }
.wx-day-half { display: inline-flex; align-items: center; gap: 0.1em; min-width: 3.4em; }
.wx-day-pop { font-size: 0.78em; color: #2563eb; font-weight: 700; min-width: 2.2em; }
.dark .wx-day-pop { color: #93c5fd; }
.wx-day-temps { display: grid; grid-template-columns: 2.6em 1fr 2.6em; align-items: center; gap: 0.4em; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.92em; }
.wx-day-min { color: #2563eb; text-align: right; }
.wx-day-max { color: #c2410c; } /* 흰 바탕 5.2:1(#d9480f 는 4.3:1 - 검수) */
.dark .wx-day-min { color: #93c5fd; }
.dark .wx-day-max { color: #ffa94d; }
.wx-day-bar { position: relative; height: 0.4em; border-radius: 999px; background: var(--wx-paper-2); box-shadow: inset 0 0 0 1px var(--wx-rule); }
.wx-day-bar > span { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #5aa2ea, #f6b22d, #f0632b); }
@media (max-width: 420px) { .wx-day { grid-template-columns: 3.6em auto 1fr; gap: 0.35em; } .wx-day-temps { grid-template-columns: 2.2em 1fr 2.2em; } }

/* 대기질·자외선 */
.wx-air-items { display: grid; gap: 0.45em; }
.wx-air-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; padding: 0.35em 0; border-top: 1px solid var(--wx-rule); }
.wx-air-item:first-child { border-top: 0; }
.wx-air-item dt { font-weight: 700; font-size: 0.9em; }
.wx-air-item dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.35em; text-align: right; }
.wx-air-value { font-weight: 800; font-size: 1.1em; font-variant-numeric: tabular-nums; }
.wx-air-minor dt, .wx-air-minor dd { font-size: 0.82em; }
.wx-grade { display: inline-flex; align-items: center; padding: 0.05em 0.55em; border-radius: 999px; font-size: 0.8em; font-weight: 800; border: 1px solid transparent; }
.wx-grade-1 { background: #dbeafe; color: #1e3a8a; }
.wx-grade-2 { background: #dcfce7; color: #14532d; }
.wx-grade-3 { background: #ffedd5; color: #7c2d12; }
.wx-grade-4 { background: #fee2e2; color: #7f1d1d; }
.wx-grade-none { background: var(--wx-paper-2); color: var(--wx-muted); }
.wx-grade-tr { font-weight: 600; }
.wx-air-forecast { display: grid; gap: 0.25em; margin: 0.6em 0; font-size: 0.85em; }
.wx-air-forecast li { display: flex; flex-wrap: wrap; gap: 0.4em; }
.wx-index-main { font-size: 1.05em; font-weight: 800; }
.wx-index-value { font-size: 1.6em; font-variant-numeric: tabular-nums; }
.wx-uv-high .wx-index-value, .wx-uv-very_high .wx-index-value { color: #c2410c; }
.wx-uv-extreme .wx-index-value { color: #b91c1c; }
.dark .wx-uv-high .wx-index-value, .dark .wx-uv-very_high .wx-index-value, .dark .wx-uv-extreme .wx-index-value { color: #fdba74; }
.wx-pollen { display: grid; gap: 0.2em; font-size: 0.88em; }

/* 생활 추천 */
.wx-advice, .wx-brief { display: grid; gap: 0.6em; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .wx-advice, .wx-brief { grid-template-columns: 1fr; } }
.wx-tip { position: relative; padding: 0.75em 0.85em 0.8em 3em; border-radius: 0.95em; background: var(--wx-paper-2); box-shadow: inset 4px 0 0 var(--wx-sky); }
.wx-tip h4 { font-size: 0.82em; font-weight: 800; color: var(--wx-muted); }
.wx-tip-main { margin-top: 0.15em; font-weight: 800; line-height: 1.45; }
.wx-tip-glyph { position: absolute; left: 0.85em; top: 0.85em; width: 1.5em; height: 1.5em; color: var(--wx-sky); }
.dark .wx-tip-glyph { color: #7cb7f0; }
.wx-level-good, .wx-level-none { box-shadow: inset 4px 0 0 #2f9e44; }
.wx-level-fair, .wx-level-folding, .wx-level-caution, .wx-level-slow { box-shadow: inset 4px 0 0 #f59f00; }
.wx-level-bad, .wx-level-need, .wx-level-indoor, .wx-level-hold { box-shadow: inset 4px 0 0 #e03131; }
.wx-foot { display: grid; gap: 0.3em; }

/* ── 특보 띠 ── */
.wx-alerts:empty { display: none; }
.wx-band { border-radius: 0.95em; background: #fef3c7; color: #78350f; box-shadow: 0 0 0 1px #fcd34d; }
.wx-band-warning { background: #b91c1c; color: #fff; box-shadow: 0 0 0 1px #7f1d1d; }
.wx-band-summary { display: flex; align-items: center; gap: 0.5em; padding: 0.6em 0.9em; cursor: pointer; list-style: none; font-size: 0.9em; }
.wx-band-summary::-webkit-details-marker { display: none; }
.wx-band-text { display: flex; flex-wrap: wrap; gap: 0.2em 0.7em; flex: 1; }
.wx-band-more { font-size: 0.85em; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.wx-band-body { padding: 0 0.9em 0.8em; font-size: 0.88em; }
.wx-band-body a { color: inherit; text-decoration: underline; }
/* 띠 바탕은 다크 모드에서도 밝은 노랑이라 작은 글자는 띠 글자색을 따른다(다크용 --wx-muted 면 대비 1.9:1). */
.wx-band .wx-fine { color: #78350f; }
.wx-band-warning .wx-fine { color: #ffe4e4; }
.wx-band-lines { display: grid; gap: 0.3em; }
.wx-band-line { line-height: 1.5; }
.wx-block .wx-band-line { padding-left: 0.6em; border-left: 3px solid #f59f00; }
.wx-block .wx-band-warning { border-left-color: #e03131; background: transparent; color: inherit; box-shadow: none; }
.wx-band-here { font-weight: 800; }
.wx-band-summary:focus-visible { outline: 3px solid #1e6fb8; outline-offset: 2px; border-radius: 0.9em; }

/* ── 전국 ── */
/* 남한 판은 세로로 길다 - 지도 무대는 섬 무대보다 세로로 길게(넓은 화면에서 양옆만 비지 않게). */
.wx-map-stage::before { padding-top: min(86%, calc(80vh - 4rem)); }
@media (max-width: 639px) { .wx-map-stage::before { padding-top: 118%; } }
.wx-map-clock { position: absolute; left: 0.8em; top: 0.8em; z-index: 2; padding: 0.3em 0.8em; border-radius: 999px; background: rgb(11 37 71 / 0.75); color: #fff; font-weight: 800; font-size: 0.9em; }
.wx-map-clock:empty { display: none; }
.wx-timebar { display: flex; align-items: center; gap: 0.6em; padding: 0.8em 1em 0.3em; color: #fff; border-top: 3px solid #f6b22d; }
.wx-play { background: #f6b22d; color: #1f1300; }
.wx-play:hover { background: #ffc54d; }
.wx-play .wx-play-off { display: none; }
.wx-play[aria-pressed="true"] .wx-play-off { display: inline-block; }
.wx-play[aria-pressed="true"] .wx-play-on { display: none; }
.wx-play:disabled, .wx-range:disabled, .wx-chip-btn:disabled { opacity: 0.5; cursor: default; }
.wx-range-wrap { flex: 1; display: flex; }
.wx-range { width: 100%; accent-color: #f6b22d; min-height: 2.2em; }
.wx-map-time { padding: 0 1em 0.8em; color: #dbe8f7; font-size: 0.85em; font-weight: 700; }
/* 섬 시간 막대(2026-11-12) - 고른 시각 글은 덮개 꼬리표가 보이므로 아래 줄이 없다. 위치 막대와는 노란 줄 대신 옅은 줄로 가른다(노란 줄은 무대 아래 한 번만). */
.wx-island-time { padding-bottom: 0.7em; }
.wx-island-time + .wx-placebar { border-top: 1px solid rgb(255 255 255 / 0.14); }
.wx-city {
  display: inline-flex; align-items: center; gap: 0.25em; padding: 0.15em 0.55em 0.15em 0.3em; border-radius: 999px; font-size: 0.72em; font-weight: 800;
  background: var(--wx-chip, #fff); color: var(--wx-chip-ink, #111827); box-shadow: 0 6px 14px -8px rgb(15 23 42 / 0.7); white-space: nowrap;
  --wx-cloud: #f1f5f9; --wx-cloud-dark: #cbd5e1; --wx-cloud-edge: #64748b;
}
.wx-city-temp { font-variant-numeric: tabular-nums; }
/* 지도 위 태풍·지진 이름표(2026-11-12, lib/weather/map_stage 의 buildMarks). */
.wx-mark { display: inline-flex; padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.72em; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 14px -8px rgb(15 23 42 / 0.7); }
.wx-mark-storm { background: #c92a2a; color: #fff; }
.wx-mark-quake { background: #fff4e6; color: #862e05; outline: 2px solid #e8590c; }
.wx-city-warning { outline: 2.5px solid #b91c1c; }
.wx-city-advisory { outline: 2.5px dashed #d97706; }
.wx-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.wx-table th, .wx-table td { padding: 0.45em 0.4em; border-top: 1px solid var(--wx-rule); text-align: left; vertical-align: middle; }
.wx-table thead th { border-top: 0; font-size: 0.8em; color: var(--wx-muted); }
.wx-table td[data-cell="temp"], .wx-table td[data-cell="pop"] { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.wx-badge { display: inline-block; padding: 0 0.45em; border-radius: 999px; font-size: 0.72em; font-weight: 800; }
.wx-badge-warning { background: #b91c1c; color: #fff; }
.wx-badge-advisory { background: #fef3c7; color: #78350f; }
.wx-storm { padding-top: 0.6em; border-top: 1px solid var(--wx-rule); }
.wx-storm:first-of-type { border-top: 0; padding-top: 0; }
.wx-storm h4 { font-weight: 800; }
.wx-storm-map { width: 100%; max-width: 22em; height: auto; margin-top: 0.4em; }
.wx-storm-korea { fill: #a8d98c; opacity: 0.7; }
.wx-storm-track { fill: none; stroke: #e03131; stroke-width: 2; stroke-dasharray: 4 3; }
.wx-storm-eye { fill: #e03131; stroke: #fff; stroke-width: 2; }
.wx-quakes { display: grid; gap: 0.35em; font-size: 0.9em; }

/* ── 해외 ── */
#wx-panel-abroad .wx-placebar .wx-select { background: #fff; color: #0f1d2e; }

/* ── 레저 ── */
.wx-kinds { display: flex; flex-wrap: wrap; gap: 0.45em; }
.wx-kind {
  display: inline-flex; align-items: center; gap: 0.35em; min-height: 2.4em; padding: 0.3em 0.95em; border-radius: 999px; border: 1px solid var(--wx-rule);
  background: var(--wx-paper); color: var(--wx-ink); font-weight: 700; font-size: 0.9em; cursor: pointer;
}
.wx-kind[aria-pressed="true"] { background: var(--wx-navy); border-color: var(--wx-navy); color: #fff; }
.wx-spots { display: grid; gap: 0.45em; margin-top: 0.7em; }
.wx-spot-btn {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15em 0.6em; width: 100%; padding: 0.65em 0.8em; border-radius: 0.9em; border: 1px solid var(--wx-rule);
  background: var(--wx-paper-2); color: inherit; text-align: left; cursor: pointer;
}
.wx-spot-btn:hover { border-color: var(--wx-sky); }
.wx-spot-name { font-weight: 800; overflow-wrap: anywhere; }
.wx-spot-where { grid-column: 1; }
.wx-spot-brief { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.82em; font-weight: 800; padding: 0.2em 0.6em; border-radius: 999px; background: var(--wx-paper); box-shadow: none; }
.wx-spot-head { margin-top: -0.2em; }

/* ── 기온 칸 ── */
.wx-t { font-variant-numeric: tabular-nums; }

/* 강제 색 모드 - 카드·탭·등급 칸에 테두리. */
@media (forced-colors: active) {
  .wx-block, .wx-tip, .wx-tab, .wx-grade, .wx-chip, .wx-chip-btn, .wx-kind, .wx-spot-btn, .wx-band, .wx-city, .wx-overlay { border: 1px solid CanvasText; }
  .wx-tab[aria-selected="true"], .wx-kind[aria-pressed="true"], .wx-unit-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* 좁은 화면 - 긴 이름이 가로로 넘치지 않게. */
.wx :lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
.wx :lang(ja) { word-break: normal; }
/* 뒤에서 다시 받기가 실패했을 때 결과 위 한 줄. */
.wx-note-refresh { margin-bottom: 0.6em; }
/* 밝은 바탕 위 포커스 고리 - 노랑(#f6b22d)은 흰·연한 바탕에서 1.85:1 이라 파랑으로(어두운 위치 막대·시간 막대 안은 노랑 그대로). */
.wx-tab:focus-visible, .wx-hourly:focus-visible, .wx-kind:focus-visible, .wx-spot-btn:focus-visible,
.wx-result .wx-icon-btn:focus-visible, .wx-result .wx-chip-btn:focus-visible, .wx-dialog .wx-icon-btn:focus-visible, .wx-dialog .wx-chip-btn:focus-visible { outline-color: #1e6fb8; }
.dark .wx-tab:focus-visible, .dark .wx-hourly:focus-visible, .dark .wx-kind:focus-visible, .dark .wx-spot-btn:focus-visible,
.dark .wx-result .wx-icon-btn:focus-visible, .dark .wx-result .wx-chip-btn:focus-visible, .dark .wx-dialog .wx-icon-btn:focus-visible, .dark .wx-dialog .wx-chip-btn:focus-visible { outline-color: #f6b22d; }
/* 강제 색 모드 - 바탕색이 지워져도 지금 고른 칩·눌린 단추를 알아보게. */
@media (forced-colors: active) {
  .wx-chip-on, .wx-unit-btn[aria-pressed="true"], .wx-kind[aria-pressed="true"], .wx-tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: 1px; }
}