/* Shared AIRS application surfaces. Forecast scales and basemap pixels keep their original colors. */
html[data-airs-ui]{color-scheme:light dark;--bg:light-dark(#f5f3ec,#17211f);--bg2:light-dark(#edf1e9,#1b2a25);--panel:light-dark(#fffef9,#20302b);--panel2:light-dark(#e9efe7,#293e35);--line:light-dark(#d4ded2,#40594c);--ink:light-dark(#193c39,#e9f1e8);--mut:light-dark(#536e62,#b4c7b9);--dim:light-dark(#60756b,#a0b6a7);--acc:light-dark(#176f63,#93d7bf);--blue:light-dark(#276998,#96c9ed);--warn:light-dark(#956014,#edc580);--amber:var(--warn);--amber2:light-dark(#805216,#f3d8a5);--red:light-dark(#ac433a,#f4aaa0);--yel:light-dark(#866c14,#e7d37b);--live:light-dark(#28794f,#93d4ac);--sim:var(--mut);--teal:var(--acc);--ui-overlay:light-dark(rgba(255,254,249,.97),rgba(26,43,35,.97));--ui-accent:var(--acc)}
html[data-airs-ui] *{box-sizing:border-box}
html[data-airs-ui] body{background:var(--bg);color:var(--ink);font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
html[data-airs-ui] [hidden]{display:none!important}
html[data-airs-ui] :is(button,input,select,textarea){font-family:inherit}
html[data-airs-ui] :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}
html[data-airs-ui] input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-airs-ui] select,html[data-airs-ui] textarea{background:var(--panel);color:var(--ink);border-color:var(--line);border-radius:9px;min-height:40px;max-width:100%}
html[data-airs-ui] input::placeholder,html[data-airs-ui] textarea::placeholder{color:var(--dim);opacity:1}
html[data-airs-ui] input:is([type=checkbox],[type=radio],[type=range]){accent-color:var(--ui-accent)}
html[data-airs-ui] button{border-radius:8px;transition:background .18s,border-color .18s,transform .18s}
html[data-airs-ui] button:not(:disabled):hover{border-color:var(--ui-accent)}
html[data-airs-ui] button:active:not(:disabled){transform:translateY(1px)}
html[data-airs-ui] button:disabled{cursor:default;opacity:.55}
html[data-airs-ui] :is(button.acc,button.pri,button.big,button.go){background:var(--ui-accent);border-color:var(--ui-accent);color:light-dark(#fffef9,#183527)}
html[data-airs-ui] :is(.seg button.on,.pbar button.on,button.on){background:var(--panel2);color:var(--ui-accent);border-color:var(--ui-accent)}
html[data-airs-ui] :is(.card,.tile){background:var(--panel);border:1px solid var(--line);box-shadow:0 3px 12px #152e2210;border-radius:16px}
html[data-airs-ui] .card{padding:22px}
html[data-airs-ui] .card h2{font-size:17px;font-weight:600;letter-spacing:-.4px}
html[data-airs-ui] .tile{border-top:3px solid var(--ui-accent);padding:17px 18px}
html[data-airs-ui] .tile .v{font-weight:500;font-size:29px}
html[data-airs-ui] h3.sec{font-size:13px;color:var(--ui-accent);letter-spacing:1.2px;margin:16px 0 0}
html[data-airs-ui] :is(th,td){border-color:var(--line)}
html[data-airs-ui] th{color:var(--mut);background:var(--panel2)}
html[data-airs-ui] :is(.tip,#tip,#tooltip){background:var(--ui-overlay);border-color:var(--line);color:var(--ink)}
html[data-airs-ui] :is(pre,code.inl){background:var(--panel2);color:var(--ink);border-color:var(--line)}
html[data-airs-ui] pre{overflow:auto;max-width:100%;border-radius:10px;line-height:1.8}
html[data-airs-ui] .g0{color:light-dark(#236e96,#7fd3ff)}html[data-airs-ui] .g1{color:light-dark(#28734a,#7be0ad)}html[data-airs-ui] .g2{color:light-dark(#806716,#fde74c)}html[data-airs-ui] .g3{color:var(--warn)}html[data-airs-ui] .g4{color:var(--red)}html[data-airs-ui] .g5{color:light-dark(#80519d,#d9a0ff)}
html[data-airs-ui] .q0{color:var(--blue)}html[data-airs-ui] :is(.q1,.s0){color:var(--live)}html[data-airs-ui] :is(.q2,.s1){color:var(--yel)}html[data-airs-ui] :is(.q3,.s2){color:var(--warn)}html[data-airs-ui] :is(.q4,.s3,.s4){color:var(--red)}html[data-airs-ui] :is(.q5,.s5){color:light-dark(#80519d,#d9a0ff)}
html[data-airs-ui="dashboard"] :is(.card,.row2,.row3,.ep){min-width:0}
html[data-airs-ui="dashboard"] :is(.ep summary,.row){flex-wrap:wrap}
html[data-airs-ui="dashboard"] .ep summary code{overflow-wrap:anywhere;min-width:0}
html[data-airs-ui="dashboard"] .ep summary span.d{flex:1 1 100%;text-align:left;margin-left:0}
html[data-airs-ui="dashboard"] :is(.note,td,code.inl){overflow-wrap:anywhere}
html[data-airs-ui="dashboard"] .ep .p code{color:var(--warn)}
html[data-airs-ui="dashboard"] .idx>div>div{border:0;padding:0;background:transparent;border-radius:0}
html[data-airs-ui="dashboard"] .tile .glow{text-shadow:none}
html[data-airs-ui="dashboard"] .tile small{white-space:normal;overflow-wrap:anywhere}
html[data-airs-ui="dashboard"] body{display:flex;flex-direction:column;align-items:center}
html[data-airs-ui="dashboard"] body>main{max-width:1180px;width:calc(100% - 48px);padding:0 0 44px;gap:20px;min-width:0}
html[data-airs-ui] .service-header{width:calc(100% - 48px);max-width:1180px;min-height:88px;padding:18px 0;margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);background:var(--bg)}
html[data-airs-ui] .service-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:25px;letter-spacing:1px;font-weight:700;white-space:nowrap}
html[data-airs-ui] .service-brand img{height:36px;width:36px;object-fit:contain}
html[data-airs-ui] .service-header nav{display:flex;align-items:center;gap:18px;margin-left:auto;width:auto}
html[data-airs-ui] .service-header nav a{font-size:12px;color:var(--mut);text-decoration:none;white-space:nowrap;flex-shrink:0}
html[data-airs-ui] .service-header select{width:auto;flex-shrink:0}
html[data-airs-ui] .service-switch{font-size:12px;max-width:190px;min-height:40px;padding:8px 30px 8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
html[data-airs-ui] .service-heading{width:calc(100% - 48px);max-width:1180px;margin:28px auto;min-height:170px;padding:30px 34px;position:relative;overflow:hidden;border:1px solid var(--line);border-left:4px solid var(--ui-accent);border-radius:18px;display:flex;align-items:center;background:var(--panel);isolation:isolate}
html[data-airs-ui] .service-heading .heading-copy{position:relative;z-index:1;max-width:75%;display:flex;align-items:flex-start;flex-direction:column;gap:9px}
html[data-airs-ui] .service-heading .eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--ui-accent)}
html[data-airs-ui] .service-heading h1{font:400 33px/1.4 "Noto Serif KR","Batang",serif;color:var(--ink);letter-spacing:-1px;margin:0;white-space:normal}
html[data-airs-ui] .service-heading :is(.p,.heading-desc){font-size:12px;color:var(--mut)}
html[data-airs-ui] .service-heading .heading-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:3px}
html[data-airs-ui] .service-heading .sp{display:flex;flex-wrap:wrap;gap:8px 16px}
html[data-airs-ui] .service-heading a{font-size:12px;color:var(--ui-accent);text-decoration:none}
html[data-airs-ui] .heading-links a{font-size:12px;color:var(--ui-accent);text-decoration:none}
html[data-airs-ui] .service-heading>img{position:absolute;inset:0 0 0 auto;width:40%;height:100%;object-fit:cover;z-index:-2}
html[data-airs-ui] .service-heading::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--panel) 45%,color-mix(in srgb,var(--panel) 95%,transparent) 60%,color-mix(in srgb,var(--panel) 10%,transparent) 100%)}
html[data-airs-ui="dashboard"] canvas:not(.maplibregl-canvas),html[data-airs-ui="dashboard"] .chart,html[data-airs-ui="admin"] canvas{background:#101c26;border-radius:10px}
html[data-airs-ui="dashboard"] #map{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#101c26}
html[data-airs-ui] .maplibregl-popup-content{background:var(--ui-overlay)!important;color:var(--ink)!important;border:1px solid var(--line);border-radius:10px}
html[data-airs-ui] .maplibregl-popup-tip{border-top-color:var(--panel)!important;border-bottom-color:var(--panel)!important}
html[data-airs-ui] .airs-foot{width:100%;align-self:stretch;background:var(--panel2);border-top:1px solid var(--line);color:var(--mut);margin-top:32px;padding:34px 24px}
html[data-airs-ui] .airs-foot .in{max-width:1180px}
html[data-airs-ui] .airs-foot{text-align:left}
html[data-airs-ui] .service-note{width:calc(100% - 48px);max-width:1180px;margin:0 auto 24px;font-size:12px;color:var(--mut);line-height:1.8;text-align:center;overflow-wrap:anywhere}
html[data-airs-ui] .service-note a{color:var(--ui-accent)}
html[data-airs-ui] .airs-foot :is(.bd,.co b,.pol a){color:var(--ink)}
html[data-airs-ui] .airs-foot :is(a,.src,.dis,.co,.cp,.bd small){color:var(--mut)}
html[data-airs-ui] .airs-foot .svc a{background:var(--panel);border-color:var(--line);border-radius:8px;min-height:32px;padding:5px 11px}
html[data-airs-ui] .airs-foot .pol{border-color:var(--line)}
html[data-airs-ui] .airs-mini{width:100%;color:var(--mut);border-color:var(--line);padding:20px 16px;margin-top:24px}
html[data-airs-ui] .airs-mini :is(a,b){color:var(--ink)}
html[data-airs-ui="map"] body{background:var(--bg)}
html[data-airs-ui="map"] body>header{background:var(--panel);border-color:var(--line);height:64px}
html[data-airs-ui="map"] body>main{height:calc(100% - 64px)}
html[data-airs-ui="map"] header .service-brand{font-size:21px;gap:8px}
html[data-airs-ui="map"] header .service-brand img{width:32px;height:32px}
html[data-airs-ui="map"] #globeWrap{background:#101c26}
html[data-airs-ui="map"] main>aside{background:var(--panel);border-color:var(--line);padding:24px}
html[data-airs-ui="map"] :is(.globe-mode,.ovl-bar button){background:var(--ui-overlay);color:var(--ink);border-color:var(--line);min-height:34px}
html[data-airs-ui="map"] .attrib{color:#dce6df;background:#172d24db;border-radius:6px;padding:3px 7px;max-width:calc(100% - 32px);font-size:10px}
html[data-airs-ui="map"] .attrib a{color:inherit}
html[data-airs-ui="map"] :is(.p-metrics,.wk-track){border-color:var(--line)}
html[data-airs-ui="map"] :is(#hourly,#histCv){background:#101c26;border-radius:10px}
html[data-airs-ui="map"] .service-switch{max-width:135px;min-height:34px;font-size:11px}
html[data-airs-ui="archive"] #bar{flex-wrap:wrap}
html[data-airs-ui="archive"] #stage{background:#101c26}
html[data-airs-ui="archive"] #ts{color:#f3d8a5;background:#172d24db}
html[data-airs-ui="archive"] button{background:var(--panel);color:var(--ink);border-color:var(--line);min-height:40px}
html[data-airs-ui="admin"] .content{max-width:1400px;padding:28px}
html[data-airs-ui="admin"] aside{background:var(--panel);padding-top:24px}
html[data-airs-ui="admin"] aside .logo{display:flex;align-items:center;gap:9px;font-size:19px;letter-spacing:1px;padding-bottom:22px}
html[data-airs-ui="admin"] aside .logo img{width:32px;height:32px}
html[data-airs-ui="admin"] aside .foot{display:block}
html[data-airs-ui="admin"] .admin-gate-brand{display:flex;align-items:center;gap:10px}
html[data-airs-ui="admin"] .admin-gate-brand img{width:36px;height:36px}
@media(max-width:820px){html[data-airs-ui="map"] body>header{height:auto;min-height:64px}html[data-airs-ui="map"] body>main{height:auto}}
html[data-airs-ui="admin"] aside button.nav{min-height:42px;margin-bottom:3px}
html[data-airs-ui="admin"] aside button.nav.on{box-shadow:inset 3px 0 var(--ui-accent);background:var(--panel2);color:var(--ui-accent)}
html[data-airs-ui="admin"] #loginBox{width:min(400px,calc(100% - 32px))!important;padding:28px!important}
html[data-airs-ui="admin"] #loginBox .ok{background:var(--acc);color:light-dark(#fff,#17352a);border-color:var(--acc)}
html[data-airs-ui="admin"] #otpGate>div:first-child{font-family:"Batang",serif;font-weight:400!important}
html[data-airs-ui] [data-ui-scroll]{max-width:100%;overflow:auto}
html[data-airs-ui="account"] .account-layout{width:calc(100% - 80px);max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:80px;padding:54px 0 58px}
html[data-airs-ui="account"] .account-panel{width:100%;max-width:410px;justify-self:center;padding:16px 8px;min-width:0}
html[data-airs-ui="account"] .account-panel>.eyebrow{color:var(--acc);margin-bottom:14px}
html[data-airs-ui="account"] .box{width:100%;padding:0;margin:0;border:0;background:none;box-shadow:none}
html[data-airs-ui="account"] .box h1{font-size:29px;line-height:1.45;letter-spacing:-1.2px;font-weight:600;margin:0 0 12px}
html[data-airs-ui="account"] .box .lead{line-height:1.85;margin-bottom:26px;overflow-wrap:anywhere}
html[data-airs-ui="account"] .box label{margin:18px 0 8px}
html[data-airs-ui="account"] .box .hint{font-size:12px;color:var(--mut);margin:7px 0 20px}
html[data-airs-ui="account"] .box .foot{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;color:var(--mut);font-size:13px}
html[data-airs-ui="account"] .box .go{justify-content:center;text-decoration:none}
html[data-airs-ui="account"] .box .sub{width:100%;min-height:46px;border:1px solid var(--line);padding:11px 16px;background:var(--panel);color:var(--ink);cursor:pointer;font-size:13px}
html[data-airs-ui="account"] .box .codein{text-align:center;font-size:28px;font-variant-numeric:tabular-nums;letter-spacing:8px;padding:14px 8px 14px 16px}
html[data-airs-ui="account"] .msg.ok{color:var(--acc)}
html[data-airs-ui="account"] .box #who{color:var(--ink);overflow-wrap:anywhere}
@media(max-width:1000px){html[data-airs-ui="account"] .account-layout{gap:36px}html[data-airs-ui="account"] .account-panel{padding-inline:0}}
@media(max-width:720px){html[data-airs-ui="account"] .account-layout{width:calc(100% - 40px);grid-template-columns:1fr;padding:38px 0 40px;gap:0}html[data-airs-ui="account"] .account-panel{max-width:430px;padding:0}html[data-airs-ui="account"] .box h1{font-size:28px}}
@media(max-width:800px){html[data-airs-ui="dashboard"] :is(.row2,.row3){grid-template-columns:1fr}html[data-airs-ui="dashboard"] .row2>.card{grid-column:auto!important}html[data-airs-ui="dashboard"] .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-airs-ui] .service-heading{min-height:150px;padding:24px}html[data-airs-ui] .service-heading h1{font-size:28px}html[data-airs-ui] .service-heading .heading-copy{max-width:90%}html[data-airs-ui] .service-heading>img{width:50%;opacity:.6}html[data-airs-ui="map"] body{overflow:auto}html[data-airs-ui="map"] body>header{height:auto;min-height:64px}html[data-airs-ui="map"] body>main{height:auto}html[data-airs-ui="map"] main>aside{width:100%}html[data-airs-ui="admin"] .content{padding:18px}}
@media(max-width:600px){html[data-airs-ui] .service-header,html[data-airs-ui] .service-heading,html[data-airs-ui="dashboard"] body>main{width:calc(100% - 28px)}html[data-airs-ui] .service-header{gap:12px;min-height:78px}html[data-airs-ui] .service-header nav{gap:8px}html[data-airs-ui] .service-header nav>a{display:none}html[data-airs-ui] .service-brand{font-size:22px;gap:7px}html[data-airs-ui] .service-switch{width:155px;max-width:155px;font-size:12px}html[data-airs-ui] .service-heading{margin:20px auto;padding:22px 18px;min-height:160px}html[data-airs-ui] .service-heading .heading-copy{max-width:100%}html[data-airs-ui] .service-heading::after{background:linear-gradient(90deg,var(--panel) 30%,color-mix(in srgb,var(--panel) 75%,transparent))}html[data-airs-ui] .card{padding:17px 14px}html[data-airs-ui] .tile{padding:14px 12px}html[data-airs-ui] .tile .v{font-size:24px}html[data-airs-ui="dashboard"] .ctl{gap:8px}html[data-airs-ui="dashboard"] .ctl input{min-width:0!important}html[data-airs-ui="dashboard"] :is(button.b,.seg button){min-height:40px}html[data-airs-ui="dashboard"] .bar{flex-wrap:wrap}html[data-airs-ui="admin"] body{display:block}html[data-airs-ui="admin"] body>aside{width:100%;min-height:0;display:flex;flex-flow:row wrap;gap:4px;padding:14px}html[data-airs-ui="admin"] aside .logo{width:100%;padding:0 6px 12px}html[data-airs-ui="admin"] aside button.nav{width:auto;flex:1 0 28%;font-size:12px;padding:8px}html[data-airs-ui="admin"] aside .foot{width:100%}html[data-airs-ui="admin"] :is(.row2,.tiles){grid-template-columns:repeat(2,minmax(0,1fr))}html[data-airs-ui="admin"] .frm{grid-template-columns:1fr}html[data-airs-ui="admin"] .content{padding:14px}html[data-airs-ui="map"] header .cache-hud{display:none}html[data-airs-ui="map"] header .search{max-width:none;min-width:160px}html[data-airs-ui="map"] header .service-switch{width:115px}html[data-airs-ui] .airs-foot{padding:28px 18px}}
@media(prefers-reduced-motion:reduce){html[data-airs-ui] button{transition:none;transform:none!important}}