/* ══════════ 날씨 위젯 — 날씨 전용 규칙 ═══════════════════════════════════
   ⛔ 이 파일은 **자동 생성**이다. 손으로 고치지 말 것.
        만드는 법:  python automation/sync_weather_css.py
        값의 주인:  portal_widget_board_v3.html  (판 규격본 · 디자이너)
      규격본을 고치고 위 명령을 다시 돌린다. 여기서 고치면 그 순간 갈라진다.
      `verify_weather.py` 의 드리프트 검사가 두 파일을 대조해 값이 갈라지면 FAIL 한다.

   ★ 담기는 것 = 판 규격본에서 **날씨에 속한 규칙 전부**(`.wx*` · `.wicon` · `--wx-*` 토큰).
     판 자체의 규칙(`.wb` · `.w` · `.w-h` · `.w-b` · `--wg-*`)은 담지 않는다 — 그건 판의 것이다.

   ⚠ 날씨만 면이 다르다 — 상태가 곧 색인 위젯이기 때문이다(루트 CLAUDE.md 완화 조항).
     판의 면은 두 종류뿐이다. 셋째로 넓히지 말 것.
   ⚠⚠ 맑음 램프를 되돌리지 말 것. 첫 시안의 `#8AD6F7` 은 그 위 흰 글자가 1.61 : 1 로
      AA 미달이었다(하필 시간별 숫자가 그 자리다). 지금 값은 그것을 낮춰 잡은 것이다.
   ⚠ 큰 온도 굵기는 **400** 이다(2026-08-17 사용자 결정 — 가는 웨이트 woff2 를 더 싣지 않는다:
     "사이트가 느려질바엔 그냥 b로 하는 게 나을 거 같은데, 큰 차이가 없다면").
   ══════════════════════════════════════════════════════════════════════════ */

.hub{--wx-ink-2:rgba(255,255,255,.86);--wx-rain:#7CD4FF}
.wicon{position:absolute;right:var(--wg-pad);top:6px;font-size:26px;line-height:1}
.wxbg[data-bg="clear"]{--g1:#0B6BA8; --g2:#0A8FCE; --g3:#4A9FD4}
.wxbg[data-bg="cloudy"]{--g1:#33404C; --g2:#4C5C6A; --g3:#66788A}
.wxbg[data-bg="rain"]{--g1:#0E2233; --g2:#1F4055; --g3:#356179}
.wxbg[data-bg="night"]{--g1:#00121F; --g2:#00263F; --g3:#0A3F60}
.w.wxbg{background:linear-gradient(160deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 100%)}
.w.wxbg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.w.wxbg > *{position:relative;z-index:2}
.w.wxbg .w-h,.w.wxbg .w-h .st,.w.wxbg .v2l,.w.wxbg .v1 .unit,.w.wxbg .v1 sup{color:var(--wx-ink-2)}
.wx-now{display:flex;align-items:flex-start;gap:10px}
.wx-now .big{font-size:44px;line-height:1;font-weight:400;letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.wx-now .rt{margin-left:auto;text-align:right;font-size:12.5px;color:var(--wx-ink-2);line-height:1.5}
.wx-now .rt b{display:block;font-size:13.5px;font-weight:600;color:#fff}
.wx-cur{text-align:center;padding:2px 0 4px}
.wx-loc{font-size:13px;line-height:1.5;color:var(--wx-ink-2)}
.wx-temp{font-size:72px;line-height:1.06;font-weight:400;letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.wx-temp sup{font-size:.32em;font-weight:400;vertical-align:top;top:.30em;position:relative; color:var(--wx-ink-2)}
.wx-st{font-size:14px;line-height:1.5;font-weight:600}
.wx-mm{margin-top:1px;font-size:13px;line-height:1.5;color:var(--wx-ink-2);white-space:nowrap; font-variant-numeric:tabular-nums}
.wx-mm i{font-style:normal;margin:0 6px}
.wx-card{margin-top:12px;padding:11px 12px 9px;border-radius:15px; background:rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.14)}
.wx-hint{font-size:12px;line-height:1.55;color:var(--wx-ink-2); padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:7px}
.wx-cap{font-size:11.5px;line-height:1.5;color:var(--wx-ink-2);margin-bottom:4px}
.wx-card .wx-hours-wrap{margin-top:0}
.wx-hours-wrap{margin-top:10px}
.wx-hours{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:thin;padding-bottom:4px}
.wx-h{flex:1 0 46px;min-width:46px;text-align:center;display:flex;flex-direction:column; align-items:center;gap:4px}
.wx-h .t{font-size:11.5px;line-height:1.45;white-space:nowrap;color:var(--wx-ink-2); font-variant-numeric:tabular-nums}
.wx-h .ic{font-size:16px;line-height:1.15;min-height:18px;display:flex;align-items:center}
.wx-h .p{font-size:10.5px;line-height:1.4;min-height:15px;white-space:nowrap; color:var(--wx-rain);font-variant-numeric:tabular-nums}
.wx-h .v{font-size:14px;line-height:1.35;font-weight:600;white-space:nowrap; font-variant-numeric:tabular-nums}
.wx-h.now .t{font-weight:700;color:#fff}
.wx-h.sun .t{color:#FFCE73;font-size:10.5px}
.wx-days{display:flex;flex-direction:column}
.wx-d{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;line-height:1.5}
.wx-d + .wx-d{border-top:1px solid rgba(255,255,255,.09)}
.wx-d .dn{flex:none;min-width:38px;color:var(--wx-ink-2);white-space:nowrap}
.wx-d .dic{flex:none;width:26px;display:flex;flex-direction:column;align-items:center;gap:1px}
.wx-d .di{font-size:14px;line-height:1.2}
.wx-d .dp{font-size:10.5px;line-height:1.35;min-height:14px;color:var(--wx-rain); white-space:nowrap;font-variant-numeric:tabular-nums}
.wx-d .dl,.wx-d .dh{flex:none;width:30px;text-align:right;white-space:nowrap; font-variant-numeric:tabular-nums;font-size:12.5px}
.wx-d .dl{color:var(--wx-ink-2)}
.wx-d .db{flex:1;min-width:26px;height:6px;border-radius:3px;background:rgba(255,255,255,.22); position:relative}
.wx-d .db span{position:absolute;top:0;bottom:0;border-radius:3px; background:linear-gradient(90deg,#FFD166,#F5883C)}
.wx-d .db i{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#fff; transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px rgba(0,0,0,.38)}
.wx-gr{display:grid;grid-template-columns:repeat(4,1fr);margin:12px 0 0; border-top:1px solid rgba(255,255,255,.16)}
.wx-g{min-width:0;padding:11px 6px 12px;text-align:center}
.wx-g + .wx-g{border-left:1px solid rgba(255,255,255,.12)}
.wx-g dt{margin:0 0 4px;font-size:10.5px;line-height:1.45;color:var(--wx-ink-2); white-space:nowrap}
.wx-g dd{margin:0;font-size:15px;line-height:1.4;font-weight:600;white-space:nowrap; font-variant-numeric:tabular-nums}
.wx-wk{flex:1 1 auto;min-height:0;margin-top:10px;display:flex;gap:2px; overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.wx-wk::-webkit-scrollbar{height:0}
.wx-wd{flex:1 0 44px;min-width:44px;display:flex;flex-direction:column;align-items:center; gap:3px;text-align:center;line-height:1.4}
.wx-wd .wkn{font-size:11px;white-space:nowrap;color:var(--wx-ink-2)}
.wx-wd.now .wkn{font-weight:700;color:#fff}
.wx-wd .wkc{font-size:15px;line-height:1.2}
.wx-wd .wkh,.wx-wd .wkl{font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.wx-wd .wkl{color:var(--wx-ink-2)}
.wx-wd .wkr{flex:1 1 auto;min-height:8px;width:4px;border-radius:2px; background:rgba(255,255,255,.24);position:relative;overflow:hidden}
.wx-wd .wkr span{position:absolute;left:0;right:0;border-radius:2px; top:calc(100% - var(--hi));bottom:var(--lo); background:linear-gradient(180deg,#FFCE73,#8AD6F7)}
.wx-wd .wkr i{display:none}
.w[data-size="l"] .wx-wk{flex-direction:column;gap:0;margin-top:6px; overflow-x:hidden;overflow-y:auto}
.w[data-size="l"] .wx-wd{flex:1 1 auto;min-width:0;min-height:26px; flex-direction:row;align-items:center;gap:8px;text-align:left}
.w[data-size="l"] .wx-wd + .wx-wd{border-top:1px solid rgba(255,255,255,.09)}
.w[data-size="l"] .wx-wd .wkn{flex:none;min-width:28px;font-size:11.5px}
.w[data-size="l"] .wx-wd .wkc{flex:none;width:17px;text-align:center;font-size:13px}
.w[data-size="l"] .wx-wd .wkl{order:1;flex:none;width:27px;text-align:right}
.w[data-size="l"] .wx-wd .wkh{order:3;flex:none;width:27px;text-align:right;font-weight:600}
.w[data-size="l"] .wx-wd .wkr{order:2;flex:1 1 auto;width:auto;height:5px;min-height:0; border-radius:3px;overflow:visible}
.w[data-size="l"] .wx-wd .wkr span{top:0;bottom:0;left:var(--lo); right:calc(100% - var(--hi));border-radius:3px; background:linear-gradient(90deg,#FFD166,#F5883C)}
.w[data-size="l"] .wx-wd .wkr i{display:block;position:absolute;top:50%;left:var(--now); width:9px;height:9px;border-radius:50%;background:#fff; transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px rgba(0,0,0,.38)}
.w[data-size="s"] .wx-wk,.w[data-size="m"] .wx-wk{flex:none;margin-top:8px;gap:6px}
.w[data-size="s"] .wx-wd,.w[data-size="m"] .wx-wd{flex:0 0 auto;min-width:0; flex-direction:row;align-items:baseline;gap:4px; padding:3px 8px;border-radius:9px;background:rgba(255,255,255,.13)}
.w[data-size="s"] .wx-wd .wkn,.w[data-size="m"] .wx-wd .wkn{font-weight:600;color:#fff}
.w[data-size="s"] .wx-wd .wkc,.w[data-size="m"] .wx-wd .wkc{font-size:12.5px}
.w[data-size="s"] .wx-wd .wkh,.w[data-size="m"] .wx-wd .wkh{font-weight:600}
.w[data-size="s"] .wx-wd .wkl,.w[data-size="m"] .wx-wd .wkl{opacity:.72}
.w[data-size="s"] .wx-wd .wkr,.w[data-size="m"] .wx-wd .wkr{display:none}
.w.wxbg .v1,.w.wxbg .v2l{flex:none}
.wp.wxbg{background:linear-gradient(168deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%)}
.wp.wxbg .wp-h .st,.wp.wxbg .wp-src{color:var(--wx-ink-2)}
@media (max-width:900px){
  .wx-now .big{font-size:34px}
  .wx-temp{font-size:56px}
}