
.wx-board{color:var(--text);max-width:1600px;margin:auto}.wx-heading,.wx-controls,.wx-table-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.wx-heading h1{margin:0;font-size:26px}.wx-heading p,.wx-distribution p,.wx-footer{font-size:12px;color:var(--muted);line-height:1.6}.wx-controls{flex-wrap:wrap;font-size:12px}.wx-controls button,.wx-table-heading select{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:inherit}.wx-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.wx-summary>div{padding:14px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.wx-summary span{display:block;font-size:12px;color:var(--muted)}.wx-summary strong{display:block;font-size:23px;margin-top:5px}.wx-main{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px}.wx-distribution,.wx-observations{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}.wx-main h2{font-size:16px;margin:0}.wx-map{height:490px;position:relative;margin:16px 28px 28px}.wx-marker{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;min-width:52px;border-radius:8px;padding:5px;background:rgba(15,126,137,.1);color:inherit;text-decoration:none;border:1px solid var(--border);font-size:11px;white-space:nowrap}.wx-marker strong{font-size:18px}.wx-marker small{font-size:12px}.wx-scale{display:flex;align-items:center;gap:8px;font-size:11px}.wx-scale i{height:6px;flex:1;background:linear-gradient(90deg,#0f7e89,#e5b14c);border-radius:5px}.wx-table-heading{margin-bottom:12px;font-size:12px}.wx-table-scroll{overflow:auto}.wx-observations table{width:100%;border-collapse:collapse;font-size:12px}.wx-observations th,.wx-observations td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;line-height:1.4}.wx-observations thead th{color:var(--muted);font-weight:500;background:var(--surface-soft);position:sticky;top:0}.wx-observations tbody th>a{color:inherit;text-decoration:none}.wx-observations tbody th>a span{color:#0f7e89}.wx-observations th small{display:block;color:var(--muted);font-weight:400;font-size:10px;margin-top:3px;max-width:170px;overflow:hidden;text-overflow:ellipsis}.wx-temperature{font-size:21px;font-weight:700}.wx-temperature small{font-size:11px;font-weight:400}.wx-freshness{display:block;font-size:10px;color:#0f7e89;margin-top:3px}.wx-stale .wx-freshness,.wx-missing .wx-freshness{color:#b45309}.wx-stale{background:rgba(229,177,76,.07)}.wx-raining{color:#0f7e89;font-weight:700}.wx-footer{margin-top:12px}.wx-board:fullscreen{overflow:auto;background:var(--background,#f5f6f8);padding:24px}@media(max-width:1100px){.wx-main{grid-template-columns:220px minmax(0,1fr)}.wx-observations th,.wx-observations td{padding:8px 6px}}@media(max-width:800px){.wx-heading{align-items:flex-start;flex-direction:column}.wx-summary{grid-template-columns:repeat(2,1fr)}.wx-main{grid-template-columns:1fr}.wx-distribution{display:none}.wx-summary strong{font-size:20px}}
 .wx-observations th,.wx-observations td{padding:4px 8px;font-size:11px;line-height:1.3}.wx-observations th small{font-size:9px;margin-top:1px}.wx-temperature{font-size:18px!important}.wx-freshness{margin-top:1px;font-size:9px}.wx-marker{min-width:44px;padding:3px;font-size:10px}.wx-marker strong{font-size:16px}.wx-heading p{margin-bottom:0}.wx-summary{margin:12px 0}.wx-summary>div{padding:10px 14px}
@media(min-width:1200px){body:has(.wx-board) main{max-width:none!important;width:100%!important;padding:16px 24px!important;margin:0!important}.wx-board{max-width:none}.wx-main{grid-template-columns:250px minmax(0,1fr)}.wx-table-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible}.wx-observations table{table-layout:auto}.wx-observations th,.wx-observations td{padding:8px 5px;font-size:clamp(10px,.7vw,14px)}.wx-observations th small{font-size:10px}.wx-temperature{font-size:clamp(18px,1.3vw,25px)!important}.wx-observations time{font-size:10px}.wx-map{height:min(47vh,470px);margin:10px 22px 25px}.wx-distribution p{font-size:10px;margin:6px 0}.wx-summary strong{font-size:22px}.wx-heading h1{font-size:24px}.wx-footer{font-size:10px;margin:8px 0}.wx-board:fullscreen{padding:16px 24px}.wx-table-scroll table td:last-child{white-space:normal}.wx-observations{padding:12px}.wx-marker{min-width:38px;font-size:9px;padding:2px}.wx-marker strong{font-size:15px}}

html[data-theme="dark"] .wx-board:fullscreen{background:#0f1215;color:#f3f5f7}
html:not([data-theme="dark"]) .wx-board:fullscreen{background:#f5f6f8;color:#17212b}
.wx-board:fullscreen .wx-heading h1{color:inherit}

.wx-rankings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:12px 0}.wx-rankings section{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:12px 16px}.wx-rankings h2{font-size:13px;margin:0 0 8px}.wx-rankings ol{display:flex;gap:20px;list-style:none;padding:0;margin:0}.wx-rankings li{display:flex;align-items:center;gap:8px;flex:1;font-size:14px;white-space:nowrap}.wx-rankings li b{color:#0f7e89;font-size:12px}.wx-rankings li strong{font-size:21px}.wx-rankings small{font-size:10px;color:var(--muted)}
@media(min-width:1200px){.wx-board:fullscreen{height:100vh;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}.wx-board:fullscreen .wx-summary,.wx-board:fullscreen .wx-rankings{margin:0}.wx-board:fullscreen .wx-main{flex:1;min-height:0}.wx-main{grid-template-columns:240px minmax(0,1fr)}.wx-table-scroll table{table-layout:fixed}.wx-table-scroll th:nth-child(1){width:17%}.wx-table-scroll th:nth-child(2){width:13%}.wx-table-scroll th:nth-child(3){width:13%}.wx-table-scroll th:nth-child(4){width:12%}.wx-table-scroll th:nth-child(5){width:8%}.wx-table-scroll th:nth-child(6){width:14%}.wx-table-scroll th:nth-child(7){width:23%}.wx-observations{display:flex;flex-direction:column;min-height:0}.wx-table-scroll{flex:1;min-height:0}.wx-observations th,.wx-observations td{font-size:clamp(12px,.82vw,17px);padding:8px 6px}.wx-temperature{font-size:clamp(22px,1.5vw,30px)!important}.wx-observations th small,.wx-observations time{font-size:clamp(11px,.7vw,14px)}.wx-freshness{font-size:12px;font-weight:600}.wx-stale .wx-freshness{background:#7c3d10;color:#fff3df;border-radius:4px;padding:3px 5px;display:inline-block}.wx-observations td:last-child time{display:block}.wx-table-scroll table tbody tr{height:calc((100vh - 360px)/8)}.wx-board:fullscreen .wx-map{height:calc(100% - 125px);min-height:260px}.wx-marker{min-width:44px;padding:4px;font-size:11px}.wx-marker strong{font-size:19px}.wx-footer{font-size:11px}.wx-distribution{min-height:0}.wx-board:fullscreen .wx-heading h1{font-size:28px}}
@media(max-width:1199px){.wx-rankings ol{flex-wrap:wrap}.wx-rankings li{font-size:12px}.wx-rankings li strong{font-size:17px}}@media(max-width:600px){.wx-rankings{grid-template-columns:1fr}}

@media(min-width:1200px){.wx-board:fullscreen{overflow:hidden}.wx-board:fullscreen .wx-heading,.wx-board:fullscreen .wx-summary,.wx-board:fullscreen .wx-rankings,.wx-board:fullscreen .wx-footer{flex-shrink:0}.wx-board:fullscreen .wx-table-scroll{height:0;flex:1;overflow:hidden}.wx-board:fullscreen .wx-table-scroll table{height:100%}.wx-table-scroll table tbody tr{height:auto}.wx-board:fullscreen .wx-table-scroll table thead{height:32px}.wx-board:fullscreen .wx-map{height:calc(100% - 135px);min-height:0}.wx-board:fullscreen .wx-footer{margin:0}.wx-board:fullscreen .wx-main{overflow:hidden}.wx-board:fullscreen .wx-observations th,.wx-board:fullscreen .wx-observations td{padding:5px 6px}}

.wx-observations tbody th,.wx-observations thead th:first-child{text-align:center}.wx-observations tbody th small{margin-left:auto;margin-right:auto}.wx-observations tbody th a{display:block}.wx-controls #wx-refresh{display:inline-flex;align-items:center;gap:9px}.wx-controls #wx-countdown{border-left:1px solid var(--border);padding-left:9px;font-variant-numeric:tabular-nums;min-width:42px}.wx-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:6px;margin:10px 0 20px!important}.wx-map .wx-marker{position:static;transform:none;min-width:0;justify-content:center;padding:3px;left:auto!important;top:auto!important}.wx-marker[href*="seoul/"]{grid-area:1/2}.wx-marker[href*="gangwon/"]{grid-area:1/3}.wx-marker[href*="incheon/"]{grid-area:2/1}.wx-marker[href*="gyeonggi/"]{grid-area:2/2}.wx-marker[href*="chungnam/"]{grid-area:3/1}.wx-marker[href*="sejong/"]{grid-area:3/2}.wx-marker[href*="chungbuk/"]{grid-area:3/3}.wx-marker[href*="jeonbuk/"]{grid-area:4/1}.wx-marker[href*="daejeon/"]{grid-area:4/2}.wx-marker[href*="gyeongbuk/"]{grid-area:4/3}.wx-marker[href*="jeonnam-gwangju/"]{grid-area:5/1}.wx-marker[href*="gyeongnam/"]{grid-area:5/2}.wx-marker[href*="daegu/"]{grid-area:5/3}.wx-marker[href*="jeju/"]{grid-area:6/1}.wx-marker[href*="busan/"]{grid-area:6/2}.wx-marker[href*="ulsan/"]{grid-area:6/3}

.wx-board .wx-observations th,.wx-board .wx-observations td{text-align:center;vertical-align:middle}
.wx-summary>div{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.wx-rankings h2{text-align:center}.wx-rankings li{justify-content:center;align-items:center;text-align:center}
.wx-distribution>h2,.wx-distribution>p,.wx-footer{text-align:center}
.wx-table-heading h2{flex:1;text-align:center}
.wx-freshness{margin-left:auto;margin-right:auto}

.wx-summary .wx-rain-summary{grid-column:span 2}.wx-rain-summary strong{font-size:20px;line-height:1.4;overflow-wrap:anywhere}

.wx-summary .wx-humidity-summary{grid-column:span 2}#wx-humidity{display:flex;align-items:center;justify-content:center;gap:24px;list-style:none;padding:0;margin:5px 0 0;flex-wrap:wrap}#wx-humidity li{display:flex;align-items:center;gap:8px}#wx-humidity b{color:#0f7e89;font-size:12px}#wx-humidity strong{margin:0;font-size:22px}#wx-humidity span{color:var(--text);font-size:14px}

.wx-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
.wx-summary .wx-humidity-summary,.wx-summary .wx-rain-summary,.wx-summary .wx-wind-summary{grid-column:auto;min-width:0}
#wx-humidity,#wx-wind{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.2vw,24px);list-style:none;padding:0;margin:5px 0 0;flex-wrap:wrap}
#wx-wind li{display:flex;align-items:center;gap:7px}
#wx-wind b{color:#0f7e89;font-size:12px}
#wx-wind strong{margin:0;font-size:22px;white-space:nowrap}
#wx-wind strong small{font-size:11px;font-weight:400}
#wx-wind span{color:var(--text);font-size:14px}
@media(max-width:1000px){.wx-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.wx-summary .wx-rain-summary{grid-column:span 2}}
@media(max-width:600px){.wx-summary{grid-template-columns:1fr}.wx-summary .wx-rain-summary{grid-column:auto}}

.wx-map{display:block;position:relative;min-height:480px;height:calc(100% - 80px)!important;margin:12px 25px 18px!important}
.wx-map .wx-marker{position:absolute;transform:translate(-50%,-50%);left:var(--map-x)!important;top:var(--map-y)!important;width:64px;min-width:0;padding:5px 2px;gap:2px;grid-area:auto}
.wx-map .wx-marker em{font-style:normal;font-size:12px;color:var(--text);opacity:.85}
.wx-map .wx-marker strong{font-size:18px;line-height:1.1}.wx-map .wx-marker strong small{font-size:9px}
@media(min-width:1200px){.wx-main{grid-template-columns:340px minmax(0,1fr)}.wx-board:fullscreen .wx-map{min-height:0;height:calc(100% - 80px)!important}.wx-table-scroll th:nth-child(1){width:17%}.wx-table-scroll th:nth-child(2){width:17%}.wx-table-scroll th:nth-child(3){width:18%}.wx-table-scroll th:nth-child(4){width:17%}.wx-table-scroll th:nth-child(5){width:12%}.wx-table-scroll th:nth-child(6){width:19%}}

.wx-humidity-summary{--accent:#2563eb;--tint:rgba(37,99,235,.09)}
.wx-wind-summary{--accent:#7c3aed;--tint:rgba(124,58,237,.09)}
.wx-rain-summary{--accent:#0891b2;--tint:rgba(8,145,178,.09)}
.wx-rankings section:first-child{--accent:#ea580c;--tint:rgba(234,88,12,.09)}
.wx-rankings section:last-child{--accent:#0284c7;--tint:rgba(2,132,199,.09)}
.wx-summary>div,.wx-rankings section{border-top:3px solid var(--accent);background:linear-gradient(var(--tint),var(--tint)),var(--surface)}
.wx-summary>div>span,.wx-rankings h2{color:var(--accent);font-weight:700}
#wx-humidity strong,#wx-humidity b{color:#2563eb}#wx-wind strong,#wx-wind b{color:#7c3aed}#wx-rain{color:#0891b2}
.wx-rankings section:first-child strong,.wx-rankings section:first-child li b{color:#ea580c}
.wx-rankings section:last-child strong,.wx-rankings section:last-child li b{color:#0284c7}
.wx-observations .wx-temperature{color:var(--temp-color,var(--text))}
.wx-sky-badge,.wx-rain-badge,.wx-humidity-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:5px 10px;font-weight:600;white-space:nowrap}
.wx-sky-badge[data-sky=clear]{color:#a16207;background:rgba(234,179,8,.14)}
.wx-sky-badge[data-sky=cloud]{color:#64748b;background:rgba(100,116,139,.12)}
.wx-sky-badge[data-sky=wet]{color:#0284c7;background:rgba(2,132,199,.14)}
.wx-rain-badge{color:var(--muted);font-weight:400}
.wx-raining .wx-rain-badge{background:rgba(8,145,178,.14);color:#0891b2;font-weight:700}
.wx-humidity-badge{color:#2563eb;background:rgba(37,99,235,.09)}
.wx-wind-cell strong{color:#7c3aed}
.wx-observations thead th:nth-child(2){color:#ea580c}.wx-observations thead th:nth-child(4){color:#0891b2}.wx-observations thead th:nth-child(5){color:#2563eb}.wx-observations thead th:nth-child(6){color:#7c3aed}
[data-theme=dark] .wx-board{--dummy:0}
@media(prefers-color-scheme:dark){.wx-sky-badge[data-sky=clear]{color:#facc15}}

/* Rounded row surfaces retain table semantics and aligned columns. */
.wx-observations table{border-collapse:separate;border-spacing:0 6px}
.wx-observations th,.wx-observations td{border-bottom:0}
.wx-observations thead th{background:transparent!important;padding-top:0;padding-bottom:4px}
.wx-observations tbody th,.wx-observations tbody td{background:var(--surface-soft);transition:background .15s}
.wx-observations tbody th{border-radius:12px 0 0 12px;background:var(--surface-soft)!important}
.wx-observations tbody td:last-child{border-radius:0 12px 12px 0}
.wx-observations tbody tr{background:transparent!important}
.wx-observations tbody tr:hover th,.wx-observations tbody tr:hover td{background:rgba(15,126,137,.12)!important}
.wx-sky-badge,.wx-rain-badge,.wx-humidity-badge{border-radius:999px}
.wx-observations{background:transparent;border:0;padding:6px 0}
@media(min-width:1200px){.wx-board:fullscreen .wx-table-scroll table thead{height:26px}.wx-board:fullscreen .wx-observations th,.wx-board:fullscreen .wx-observations td{padding:4px 6px}.wx-table-scroll{gap:14px}}

/* Lay out semantic table rows as separate cards, not rounded table cells. */
.wx-observations .wx-table-scroll table{display:flex;flex-direction:column;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;border-spacing:0!important}
.wx-observations .wx-table-scroll thead{display:block;background:transparent!important;flex-shrink:0;height:30px!important}
.wx-observations .wx-table-scroll tbody{display:grid;grid-template-rows:repeat(8,minmax(0,1fr));gap:8px;flex:1;min-height:0;background:transparent!important}
.wx-observations .wx-table-scroll tr{display:grid;grid-template-columns:17fr 17fr 18fr 17fr 12fr 19fr;align-items:center;height:auto!important;min-height:0}
.wx-observations .wx-table-scroll tbody tr{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:14px;overflow:hidden}
.wx-observations .wx-table-scroll th,.wx-observations .wx-table-scroll td{display:block;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background:transparent!important;text-align:center;box-shadow:none!important}
.wx-observations .wx-table-scroll tbody tr:hover{background:var(--surface-soft)!important}
.wx-observations .wx-table-scroll tbody tr:hover th,.wx-observations .wx-table-scroll tbody tr:hover td{background:transparent!important}
@media(max-width:1199px){.wx-observations .wx-table-scroll tbody{grid-template-rows:none;grid-auto-rows:minmax(72px,auto)}.wx-observations .wx-table-scroll table{min-width:650px}}

.wx-observations .wx-table-scroll thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

.wx-observations .wx-table-scroll tbody th a{font-size:clamp(16px,1vw,20px);font-weight:700;line-height:1.3;color:var(--text);white-space:nowrap}
.wx-observations .wx-table-scroll tbody th a span{font-size:12px;vertical-align:middle}
.wx-map .wx-marker>span{font-size:12px;font-weight:700}
@media(max-width:1199px){.wx-observations .wx-table-scroll tbody th a{font-size:16px}}

@media(min-width:1200px){
 .wx-main{grid-template-columns:clamp(420px,26vw,520px) minmax(0,1fr)}
 .wx-observations .wx-table-scroll tr{grid-template-columns:19fr 17fr 18fr 16fr 13fr 17fr}
 .wx-observations .wx-table-scroll th,.wx-observations .wx-table-scroll td{padding-left:3px!important;padding-right:3px!important}
 .wx-observations .wx-table-scroll tbody th a{font-size:clamp(16px,.95vw,19px)}
 .wx-summary{grid-template-columns:2fr 2fr 1fr}
 #wx-humidity,#wx-wind{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;flex-wrap:nowrap}
 #wx-humidity li,#wx-wind li{justify-content:center;gap:5px;white-space:nowrap}
 #wx-humidity strong,#wx-wind strong{font-size:20px}
 #wx-humidity span,#wx-wind span{font-size:12px}
 .wx-rankings ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
 .wx-rankings li{justify-content:center;gap:6px;font-size:12px}
 .wx-rankings li strong{font-size:20px}
 .wx-map .wx-marker{width:72px}
}
@media(min-width:1200px) and (max-width:1500px){#wx-humidity li,#wx-wind li,.wx-rankings li{flex-wrap:wrap;gap:3px}#wx-humidity strong,#wx-wind strong,.wx-rankings li strong{font-size:18px}.wx-main{grid-template-columns:360px minmax(0,1fr)}}

.wx-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
.wx-summary>div{padding:10px 14px;justify-content:flex-start;gap:8px}
.wx-summary>div>span{font-size:14px;line-height:1.3}
#wx-humidity,#wx-wind{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;width:100%;margin:0;flex:1;align-items:center}
#wx-humidity li,#wx-wind li{display:grid;grid-template-columns:auto auto;justify-content:center;align-content:center;gap:4px 6px}
#wx-humidity li strong,#wx-wind li strong{grid-column:1/-1;font-size:23px;text-align:center}
#wx-humidity li span,#wx-wind li span{font-size:14px}
#wx-rain{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:5px;width:100%;margin:0;flex:1;line-height:1.2}
#wx-rain .wx-region-badge{display:inline-flex;align-items:center;justify-content:center;color:#0891b2;background:rgba(8,145,178,.14);border:1px solid rgba(8,145,178,.22);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:600;white-space:nowrap}
@media(max-width:1000px){.wx-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.wx-summary .wx-rain-summary{grid-column:span 2}}
@media(max-width:600px){.wx-summary{grid-template-columns:1fr}.wx-summary .wx-rain-summary{grid-column:auto}#wx-humidity li strong,#wx-wind li strong{font-size:20px}}

#wx-rain .wx-region-badge{color:#06b6d4;border-color:rgba(6,182,212,.55);background:rgba(6,182,212,.18);font-size:14px;font-weight:700;padding:4px 9px}

.wx-sky-badge[data-sky=cloud]{color:var(--text);background:rgba(148,163,184,.18);border:1px solid rgba(148,163,184,.32);font-weight:600}
