:root{--ink:#2b2540;--ink-2:#4f4966;--ink-3:#686380;--paper:#fffdf8;--line:#e7e3ef;--border:2.5px solid var(--ink);--radius:24px;--shadow:4px 5px 0 var(--ink);--shadow-sm:2px 3px 0 var(--ink);--font-display:"Jua", "Gowun Dodum", system-ui, sans-serif;--font-body:"Gowun Dodum", system-ui, sans-serif;--sky-top:#9fd6ff;--sky-mid:#cfeaff;--sky-bottom:#fff4e2;--haze:0;--sun:1;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body[data-mood=moderate]{--haze:.12;--sun:.9}body[data-mood=unhealthy]{--haze:.32;--sun:.6}body[data-mood=very-unhealthy]{--haze:.5;--sun:.4}body[data-mood=hazardous]{--haze:.68;--sun:.2}body[data-mood=unknown]{--haze:.06;--sun:.7}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100vh;font-family:var(--font-body);color:var(--ink);background:var(--sky-bottom);word-break:keep-all;overflow-wrap:anywhere;margin:0;font-size:16px;line-height:1.5;overflow-x:hidden}h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:400;line-height:1.2}a{color:#2856b8;text-underline-offset:2px}button,input,select{font:inherit;color:inherit}:focus-visible{outline-offset:2px;outline:3px solid #2856b8}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sky{z-index:-1;background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-bottom) 100%);position:fixed;inset:0;overflow:hidden}.sky-sun{width:260px;height:260px;opacity:var(--sun);background:radial-gradient(circle,#fff6b8 0 38%,#ffe98c8c 39% 52%,#ffe98c00 70%);border-radius:50%;transition:opacity 1.5s;position:absolute;top:-60px;right:-40px}.sky-cloud{opacity:.75;background:#fff;border-radius:999px;height:46px;animation:90s linear infinite drift;position:absolute}.sky-cloud:before,.sky-cloud:after{content:"";background:inherit;border-radius:50%;position:absolute}.sky-cloud:before{width:56%;height:150%;bottom:30%;left:14%}.sky-cloud:after{width:38%;height:110%;bottom:40%;right:12%}.sky-cloud--1{width:150px;top:120px;left:-10%}.sky-cloud--2{width:110px;animation-duration:120s;animation-delay:-40s;top:340px;left:30%}.sky-cloud--3{width:190px;animation-duration:150s;animation-delay:-90s;top:60%;left:60%}.sky-haze{opacity:var(--haze);background:radial-gradient(at 20% 30%,#c4aa80e6,#0000 60%),radial-gradient(at 80% 70%,#aa9678e6,#0000 55%),linear-gradient(#cdbc9ef2,#deceb2f2);transition:opacity 1.5s;position:absolute;inset:0}@keyframes drift{0%{transform:translate(0)}to{transform:translate(120vw)}}.page{max-width:1280px;padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 32px max(14px, env(safe-area-inset-left));margin:0 auto}.grid{grid-template-columns:minmax(0,1fr);gap:18px;display:grid}.grid>*{min-width:0}.card{background:var(--paper);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;position:relative}.card-head{flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:12px;display:flex}.card-title{font-size:1.35rem}.card-sub{color:var(--ink-2);flex-basis:100%;margin:0;font-size:.92rem}.fine-print{color:var(--ink-3);margin:10px 0 0;font-size:.8rem}.is-loading{opacity:.55;transition:opacity .2s}.top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-bottom:14px;display:flex}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand .mascot{flex:none}.brand-title{letter-spacing:-.01em;text-shadow:2px 2px #fff;font-size:clamp(1.45rem,5.5vw,2.1rem)}.brand-sub{color:var(--ink-2);margin:2px 0 0;font-size:.85rem}.top-actions{flex-wrap:wrap;gap:8px;display:flex}.refresh-status{color:var(--ink-2);flex-wrap:wrap;flex-basis:100%;gap:4px 14px;margin:0;font-size:.85rem;display:flex}.refresh-status>span{background:#ffffffb3;border-radius:999px;padding:2px 10px}.countdown{font-variant-numeric:tabular-nums}.btn{border:var(--border);min-height:44px;box-shadow:var(--shadow-sm);font-family:var(--font-display);cursor:pointer;background:#fff;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:6px 16px;font-size:1rem;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:hover:not(:disabled){background:#fff8d6}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translate(2px,2px)}.btn:disabled{opacity:.6;cursor:progress}.btn-ghost{background:#f1ecff}.btn-icon{min-width:44px;padding:0;font-size:1.5rem;line-height:1}.btn-icon:disabled{cursor:not-allowed}.btn-small{min-height:36px;padding:2px 12px;font-size:.9rem}.refresh-icon{font-size:1.15rem;display:inline-block}.refresh-icon.is-spinning{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.seg{border:var(--border);background:#fff;border-radius:999px;gap:2px;max-width:100%;padding:3px;display:inline-flex}.seg button{min-height:38px;font-family:var(--font-display);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;flex:auto;justify-content:center;align-items:center;gap:6px;padding:4px 14px;font-size:.98rem;display:inline-flex}.seg button:hover:not(.is-on){background:#f3f0fa}.seg button.is-on{background:var(--ink);color:#fff}.live-dot{background:#ff5d73;border-radius:50%;width:9px;height:9px;animation:1.8s ease-in-out infinite pulse;box-shadow:0 0 0 3px #ff5d7340}@keyframes pulse{50%{box-shadow:0 0 0 6px #ff5d7300}}.timebar{flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-bottom:14px;padding:12px 14px;display:flex}.timebar .seg-mode,.timebar .seg-metric{width:100%}.timebar-pickers{align-items:flex-end;gap:6px;width:100%;display:flex}.field{flex-direction:column;gap:2px;min-width:0;display:flex}.field:first-of-type{flex:auto}.field-label{color:var(--ink-2);padding-left:6px;font-size:.78rem}.field input,.field select{border:var(--border);min-height:44px;font-family:var(--font-display);background:#fff;border-radius:14px;width:100%;min-width:0;padding:4px 10px;font-size:1rem}.field select{min-width:84px;padding-right:6px}.field input[type=date]{font-variant-numeric:tabular-nums;padding:4px 6px 4px 10px}.field input[type=date]::-webkit-calendar-picker-indicator{margin-left:2px;padding:2px}.notices{gap:8px;margin:0 0 14px;padding:0;list-style:none;display:grid}.notice{border:var(--border);box-shadow:var(--shadow-sm);background:#dfecff;border-radius:18px;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;display:flex}.notice--warn{background:#fff1bf}.notice--error{background:#ffd9db}.notice-icon{border:2px solid var(--ink);width:26px;height:26px;font-family:var(--font-display);background:#fff;border-radius:50%;flex:none;place-items:center;display:grid}.notice-text{flex:200px}.hero{background:linear-gradient(160deg, #e6f7ff 0%, var(--paper) 60%);overflow:hidden}.hero--good{background:linear-gradient(160deg, #dcf5e3 0%, var(--paper) 62%)}.hero--moderate{background:linear-gradient(160deg, #dfecff 0%, var(--paper) 62%)}.hero--unhealthy{background:linear-gradient(160deg, #fff1bd 0%, var(--paper) 62%)}.hero--very-unhealthy{background:linear-gradient(160deg, #ffe0c4 0%, var(--paper) 62%)}.hero--hazardous{background:linear-gradient(160deg, #ffd6d8 0%, var(--paper) 62%)}.hero:before{content:"";opacity:.85;background:repeating-linear-gradient(45deg,#ffc4d2 0 8px,#ffd9e2 8px 16px);border-radius:3px;width:92px;height:22px;position:absolute;top:-6px;left:50%;transform:translate(-50%)rotate(-3deg)}.hero-title{margin-top:4px;font-size:1.3rem}.hero-main{flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:6px;display:flex}.hero-mascot{flex:none;margin:-6px -6px 0 -8px}.hero-numbers{flex:140px;min-width:0}.hero-label{color:var(--ink-2);margin:0;font-size:.92rem}.hero-value{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:clamp(3.4rem,15vw,4.6rem);line-height:1}.hero-value small{letter-spacing:0;color:var(--ink-2);font-size:1rem}.hero-secondary{flex-wrap:wrap;align-items:center;gap:4px 6px;margin:10px 0 0;font-size:.95rem;display:flex}.hero-secondary strong{font-family:var(--font-display);font-size:1.3rem;font-weight:400}.hero-empty{color:var(--ink-2);flex:160px;font-size:1.05rem}.hero-times{color:var(--ink-2);margin:12px 0 0;padding:0;font-size:.82rem;list-style:none}.advice-now{border:2px dashed var(--ink);background:#ffffffbf;border-radius:18px;margin-top:14px;padding:12px 14px}.advice-now h3{margin-bottom:6px;font-size:1.05rem}.advice-now dl{gap:6px;margin:0;display:grid}.advice-now dl>div{grid-template-columns:6.5em minmax(0,1fr);gap:8px;display:grid}.advice-now dt{font-family:var(--font-display);color:var(--ink-2)}.advice-now dd{margin:0}.mascot{display:block;overflow:visible}.mascot-body{transform-origin:50% 100%;animation:3.4s ease-in-out infinite bob}.mascot--hazardous .mascot-body,.mascot--very-unhealthy .mascot-body{animation:2.6s ease-in-out infinite shiver}.mascot-sparkles{transform-origin:50%;animation:2.2s ease-in-out infinite twinkle}@keyframes bob{50%{transform:translateY(-4px)}}@keyframes shiver{0%,to{transform:translate(0)}10%{transform:translate(-1.5px)}20%{transform:translate(1.5px)}30%{transform:translate(0)}}@keyframes twinkle{50%{opacity:.35}}.band-chip{border:2px solid var(--ink);font-family:var(--font-display);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 12px 3px 8px;font-size:.98rem;line-height:1.25;display:inline-flex}.band-chip--small{border-width:1.5px;padding:1px 9px 1px 6px;font-size:.8rem}.band-dot{border:1.5px solid var(--ink);border-radius:50%;flex:none;width:10px;height:10px}.map-card{background:linear-gradient(#e3f3ff 0%,#f2f9ff 100%)}.national-pill{border:var(--border);cursor:pointer;min-height:44px;font-family:var(--font-display);background:#fff;border-radius:999px;align-items:center;gap:8px;margin-left:auto;padding:4px 8px 4px 14px;display:inline-flex}.national-pill strong{font-size:1.3rem;font-weight:400}.national-pill.is-selected{box-shadow:var(--shadow-sm);background:#fff8d6}.map-frame{aspect-ratio:1000/643;width:100%}.map-svg{width:100%;height:100%;display:block;overflow:visible}.map-shadow{fill:#2b254029}.map-land{fill:#fff}.map-zone{stroke:#fff;stroke-width:5px;cursor:pointer;transition:fill .6s}.map-zone:hover{filter:brightness(1.05)saturate(1.1)}.map-zone:focus{outline:none}.map-zone:focus-visible{stroke:#2856b8;stroke-width:14px}.map-zone-outline{fill:none;stroke:var(--ink);stroke-width:12px;pointer-events:none}.map-coast{fill:none;stroke:var(--ink);stroke-width:4.5px;stroke-linejoin:round;pointer-events:none}.map-wind{pointer-events:none;fill:none;stroke:var(--ink);stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;opacity:.4}.map-pill{cursor:pointer}.map-pill rect{fill:#fff;stroke:var(--ink);stroke-width:4px}.map-pill-name{font-family:var(--font-body);fill:var(--ink-2);font-size:36px}.map-pill-value{font-family:var(--font-display);fill:var(--ink);font-size:56px}.map-pill.is-selected rect{fill:var(--ink)}.map-pill.is-selected text{fill:#fff}.legend{flex-wrap:wrap;gap:6px 10px;margin:12px 0 0;padding:0;list-style:none;display:flex}.legend li{align-items:center;gap:4px;display:inline-flex}.legend-range{color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:.78rem}.wind-line{align-items:center;gap:8px;margin:8px 0 0;font-size:.88rem;display:flex}.wind-line.is-muted{color:var(--ink-3)}.wind-icon{border:2px solid var(--ink);background:#fff;border-radius:50%;place-items:center;width:26px;height:26px;font-weight:700;display:inline-grid}.region-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.region-card{border:var(--border);background:linear-gradient(180deg, var(--band-soft,#fff) 0%, #fff 140%);text-align:left;cursor:pointer;border-radius:18px;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:118px;padding:10px 12px;transition:transform .12s,box-shadow .12s;display:flex}.region-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.region-card.is-selected{box-shadow:var(--shadow);outline:3px solid var(--ink);outline-offset:2px;transform:translate(-1px,-2px)}.region-name{font-family:var(--font-display);font-size:1.02rem}.region-value{font-family:var(--font-display);font-size:2.1rem;line-height:1}.region-other{color:var(--ink-2);font-size:.8rem}.detail-headline{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.stat{border:2px solid var(--ink);background:#fff;border-radius:16px;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;display:flex}.stat-label{color:var(--ink-2);font-size:.82rem}.stat-value{font-family:var(--font-display);font-size:1.9rem;line-height:1}.stat-value small{color:var(--ink-2);font-size:.8rem}.stat-time{color:var(--ink-3);font-size:.75rem}.dominant{margin:12px 0 4px;font-size:.9rem}.pollutant-table{border-collapse:collapse;table-layout:fixed;width:100%;margin-top:6px}.pollutant-table th,.pollutant-table td{border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;padding:8px 4px}.pollutant-table thead th{font-family:var(--font-display);color:var(--ink-2);font-size:.82rem;font-weight:400}.pollutant-table thead th:first-child{width:34%}.pollutant-table .num{text-align:right}.pollutant-table tr.is-dominant th[scope=row] .pollutant-name:after{content:" ★";color:#f2a900}.pollutant-name{font-family:var(--font-display);font-size:1rem;font-weight:400;display:block}.pollutant-long{color:var(--ink-3);font-size:.74rem;font-weight:400;display:block}.sub-bar{align-items:center;gap:8px;display:flex}.sub-track{border:1.5px solid var(--ink);background:#f4f1f9;border-radius:999px;flex:1;height:12px;position:relative;overflow:hidden}.sub-fill{border-right:1.5px solid var(--ink);position:absolute;inset:0 auto 0 0}.sub-tick{background:#2b254059;width:1px;position:absolute;top:0;bottom:0}.sub-num{text-align:right;width:2.2em;font-family:var(--font-display);font-variant-numeric:tabular-nums}.sub-none{color:var(--ink-3)}.conc{font-family:var(--font-display);font-variant-numeric:tabular-nums;display:block}.conc small{font-family:var(--font-body);color:var(--ink-2);font-size:.72rem}.conc-period{color:var(--ink-3);font-size:.72rem;display:block}.chart-card .card-head .seg{margin-left:auto}.trend-meta{flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:28px;margin-bottom:6px;font-size:.88rem;display:flex}.progress{border:2px solid var(--ink);background:#fff;border-radius:999px;align-items:center;min-width:180px;height:24px;display:inline-flex;position:relative;overflow:hidden}.progress-bar{background:repeating-linear-gradient(45deg,#bfe3ff 0 8px,#d6edff 8px 16px);transition:width .3s;position:absolute;inset:0 auto 0 0}.progress-text{padding:0 10px;font-size:.78rem;position:relative}.inline-warn{color:#9c2a1f}.chart{position:relative}.chart-plot{cursor:crosshair;touch-action:pan-y;border-radius:12px;width:100%;position:relative}.chart-plot svg{display:block;overflow:visible}.chart--fill .chart-plot{min-height:240px}.chart--fill .chart-plot svg{position:absolute;inset:0}.chart-grid line{stroke:var(--line);stroke-width:1px}.chart-grid text,.chart-xaxis text{fill:var(--ink-3);font-size:11px;font-family:var(--font-body);font-variant-numeric:tabular-nums}.chart-xaxis line{stroke:#c9c3d6;stroke-width:1px}.chart-thresholds line{stroke:#a39cb6;stroke-width:1px;stroke-dasharray:5 4}.chart-thresholds text{fill:var(--ink-2);font-size:11px;font-family:var(--font-display);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}.chart-marker{stroke:var(--ink);stroke-width:1.5px;stroke-dasharray:3 3;opacity:.7}.chart-series path{fill:none;stroke:currentColor;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;transition:opacity .2s,stroke-width .2s}.chart-series circle{fill:currentColor}.chart-series.is-dim{opacity:.22}.chart-series.is-strong path{stroke-width:3px}.chart-cross line{stroke:var(--ink);stroke-width:1px;opacity:.5}.chart-cross circle{stroke:var(--paper);stroke-width:2px}.chart-empty{color:var(--ink-2);pointer-events:none;place-items:center;font-size:.95rem;display:grid;position:absolute;inset:0}.chart-tip{z-index:2;border:2px solid var(--ink);min-width:150px;max-width:min(220px,70%);box-shadow:var(--shadow-sm);pointer-events:none;background:#fff;border-radius:14px;padding:8px 10px;font-size:.8rem;position:absolute;top:6px}.chart-tip-time{font-family:var(--font-display);margin-bottom:4px}.chart-tip-row{justify-content:space-between;gap:10px;line-height:1.5;display:flex}.chart-tip-row span{align-items:center;gap:6px;display:inline-flex}.chart-tip-row strong{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:400}.chart-tip-row.is-strong{font-weight:700}.chart-tip-summary{border-bottom:1px dashed var(--line);margin-bottom:2px;padding-bottom:2px}.swatch{border-radius:3px;width:10px;height:10px;display:inline-block}.chart-legend{flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.chart-legend button{border:1.5px solid var(--ink);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:6px;min-height:32px;padding:2px 10px;font-size:.85rem;display:inline-flex}.chart-legend button.is-selected{background:var(--ink);color:#fff}.swatch-line{border-radius:2px;width:16px;height:4px;display:inline-block}.table-view{margin-top:10px}.table-view summary{cursor:pointer;font-family:var(--font-display);border:1.5px dashed var(--ink);background:#fff;border-radius:999px;align-items:center;min-height:36px;padding:2px 12px;display:inline-flex}.table-scroll{border:1.5px solid var(--ink);background:#fff;border-radius:12px;max-height:360px;margin-top:8px;overflow:auto}.data-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.82rem}.data-table caption{text-align:left;font-family:var(--font-display);padding:6px 10px}.data-table th,.data-table td{border-bottom:1px solid var(--line);white-space:nowrap;text-align:left;padding:5px 8px}.data-table thead th{font-family:var(--font-display);background:#f6f3fb;font-weight:400;position:sticky;top:0}.data-table .num{text-align:right}.advice-sub{margin:6px 0 8px;font-size:1.02rem}.advice-sub+.advice-grid{margin-bottom:16px}.advice-grid{grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0;list-style:none;display:grid}.advice-band{border:2px solid var(--ink);background:var(--band-soft);border-radius:16px;padding:10px 12px;font-size:.86rem}.advice-band.is-now{box-shadow:var(--shadow);outline:3px solid var(--band-strong);outline-offset:2px}.advice-band-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;margin-bottom:6px;display:flex}.advice-range{font-family:var(--font-display);font-size:.85rem}.advice-band dl{margin:0}.advice-band dt{font-family:var(--font-display);color:var(--ink-2);margin-top:4px;font-size:.8rem}.advice-band dd{margin:0}.foot{border-radius:var(--radius);border:2px dashed var(--ink);color:var(--ink-2);background:#fffdf8e0;margin-top:22px;padding:16px;font-size:.82rem}.foot p{margin:0 0 8px}.foot-legal{color:var(--ink-3);font-size:.76rem}.foot-links{flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;display:flex}@media (min-width:480px){.region-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:640px){.page{padding-left:22px;padding-right:22px}.card{padding:20px}.timebar .seg-mode,.timebar .seg-metric,.timebar-pickers{width:auto}.timebar-pickers{flex:auto}.advice-grid--4,.advice-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.page{padding:24px 28px 40px}.grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"hero map""regions regions""detail day""trend trend""advice advice";gap:22px}.area-hero{grid-area:hero}.area-map{grid-area:map}.area-regions{grid-area:regions}.area-detail{grid-area:detail}.area-day{grid-area:day}.area-trend{grid-area:trend}.area-advice{grid-area:advice}.area-hero>.card,.area-map>.card,.area-detail>.card,.area-day>.card{height:100%}.hero,.map-card,.area-day .chart-card,.area-day .chart--fill{flex-direction:column;display:flex}.area-day .chart--fill,.area-day .chart--fill .chart-plot{flex:auto}.hero .hero-main{flex:auto;align-content:center}.area-trend .chart--fill .chart-plot{min-height:320px}.map-frame{margin:auto 0}.region-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.timebar{flex-wrap:nowrap}.advice-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.advice-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (forced-colors:active){.band-dot,.swatch,.swatch-line{forced-color-adjust:none}}