:root{--ink:#0b2648;--muted:#66717e;--blue:#0864d8;--blue-dark:#064397;--blue-soft:#e2f0ff;--green:#178449;--amber:#ec8a19;--line:#e2e7ec;--surface:#fffdfa}button{font:inherit}.app-screen{background:var(--surface);color:var(--ink);font-family:Pretendard,Noto Sans KR,Malgun Gothic,sans-serif}.screen-content{min-height:100%;padding:55px 18px calc(var(--mobile-safe-area-height,28px) + 104px)}.app-header,.section-heading,.temperature-row,.map-footer,.notice-row,.bottom-nav,.map-header,.map-location,.layer-chip{align-items:center;display:flex}.app-header{justify-content:space-between;margin-bottom:18px}.brand-lockup{gap:5px;display:grid}.brand-lockup strong{letter-spacing:-1.3px;font-size:24px;font-weight:800}.brand-lockup span{background:var(--blue);border-radius:4px;width:50px;height:4px;box-shadow:18px 0 #21a861}.icon-button,.round-button,.layer-menu{color:var(--ink);cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.icon-button{width:42px;height:42px}.icon-button svg{width:25px;height:25px}.location-button{min-height:42px;color:var(--ink);background:#f2f1ef;border:0;border-radius:22px;align-items:center;gap:6px;padding:0 15px;font-size:14px;font-weight:700;display:inline-flex}.location-button .muted{color:#5d6670;font-weight:500}.weather-hero{padding:28px 4px 20px}.weather-hero h1{letter-spacing:-1.4px;margin:0 0 13px;font-size:29px;line-height:1.28}.temperature-row{min-height:104px}.temperature{letter-spacing:-5px;font-size:72px;line-height:1}.weather-detail{color:#5c6570;gap:2px;margin-left:18px;font-size:17px;display:grid}.weather-detail b{color:#414b57}.weather-symbol{object-fit:cover;border-radius:16px;width:75px;height:75px;margin-left:auto}.source{color:var(--muted);margin:7px 0 0;font-size:14px}.rain-alert{background:var(--blue-soft);width:100%;min-height:58px;color:var(--ink);border:0;border-radius:13px;justify-content:center;align-items:center;gap:14px;padding:0 20px;font-size:17px;font-weight:700;display:flex}.rain-alert svg{width:28px;height:28px;color:var(--blue)}.rain-alert strong{color:#0754ba;font-size:20px}.forecast-section{padding:25px 0 15px}.section-heading{justify-content:space-between;margin-bottom:15px}.section-heading h2,.local-section h2{letter-spacing:-.8px;margin:0;font-size:20px}.section-heading span{color:var(--muted);font-size:10px}.forecast-grid{grid-template-columns:repeat(7,1fr);display:grid}.forecast-item{border:0;border-right:1px solid var(--line);color:#596676;background:0 0;border-radius:8px;justify-items:center;gap:5px;min-width:0;padding:7px 2px 5px;display:grid}.forecast-item:last-child{border-right:0}.forecast-item.is-selected{background:#f1f7ff}.forecast-item strong{color:#0c75d9;font-size:13px}.forecast-item small{white-space:nowrap;font-size:9px}.forecast-item progress{accent-color:#63aef5;border:0;width:30px;height:5px}.forecast-selection{text-align:center;color:var(--blue-dark);margin:10px 0 0;font-size:11px;font-weight:600}.map-card{background:#e9eef3;height:236px;margin:5px -18px 0;position:relative;overflow:hidden}.map-card>img,.full-map-image{object-fit:cover;-webkit-user-select:none;user-select:none;width:100%;height:100%}.map-layer-row{gap:7px;display:flex;position:absolute;top:13px;left:13px;right:13px}.layer-chip{min-height:38px;color:var(--ink);background:#fffffff2;border:1px solid #0b26481f;border-radius:20px;gap:6px;padding:0 13px;font-size:13px;font-weight:700;box-shadow:0 3px 10px #102a4b1f}.layer-chip.is-active{background:var(--blue);color:#fff;border-color:#fff}.layer-menu{background:#fffffff2;border-radius:12px;width:40px;height:40px;margin-left:auto;box-shadow:0 3px 10px #102a4b24}.map-footer{justify-content:space-between;gap:8px;position:absolute;bottom:12px;left:12px;right:12px}.map-footer>span{color:#465564;background:#ffffffeb;border-radius:10px;max-width:158px;padding:8px 10px;font-size:10px;line-height:1.4}.map-footer button{background:var(--blue-dark);color:#fff;border:0;border-radius:22px;align-items:center;gap:7px;min-height:43px;padding:0 14px;font-size:13px;font-weight:700;display:flex}.local-section{padding-top:25px}.local-section h2{margin-bottom:12px}.notice-row{border:0;border-bottom:1px solid var(--line);width:100%;min-height:72px;color:var(--ink);text-align:left;background:0 0;gap:12px;padding:11px 3px}.notice-icon{border-radius:12px;flex:none;place-items:center;width:42px;height:42px;display:grid}.notice-icon svg{width:22px;height:22px}.notice-icon.air{color:var(--green);background:#e8f7e9}.notice-icon.road{color:var(--amber);background:#fff3df}.notice-copy{flex:1;gap:3px;min-width:0;display:grid}.notice-copy strong{font-size:14px}.notice-copy em{color:var(--green);font-style:normal}.notice-copy small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.bottom-nav{z-index:20;box-sizing:border-box;height:calc(76px + var(--mobile-safe-area-height,28px));padding:7px 18px calc(var(--mobile-safe-area-height,28px) + 5px);border-top:1px solid var(--line);background:#fffffff7;justify-content:space-around;font-family:Pretendard,Noto Sans KR,Malgun Gothic,sans-serif;position:absolute;bottom:0;left:0;right:0}.bottom-nav button{color:#5f6670;background:0 0;border:0;justify-items:center;gap:2px;min-width:56px;min-height:50px;font-size:11px;display:grid}.bottom-nav svg{width:23px;height:23px}.bottom-nav button.is-active{color:var(--blue);font-weight:700}.toast{z-index:60;left:50%;bottom:calc(88px + var(--mobile-safe-area-height,28px));color:#fff;background:#0b2648f0;border-radius:20px;width:max-content;max-width:82%;padding:10px 15px;font:500 11px/1.4 Pretendard,Noto Sans KR,Malgun Gothic,sans-serif;position:absolute;transform:translate(-50%);box-shadow:0 8px 22px #0b264833}.full-map-view{color:var(--ink);background:#eef2f4;font-family:Pretendard,Noto Sans KR,Malgun Gothic,sans-serif;position:absolute;inset:0;overflow:hidden}.full-map-image{position:absolute;inset:0}.map-header{z-index:5;justify-content:space-between;position:absolute;top:50px;left:14px;right:14px}.round-button{background:#fff;border-radius:14px;width:42px;height:42px;box-shadow:0 4px 14px #0b26482e}.map-location{height:42px;color:var(--ink);background:#fff;border:0;border-radius:22px;gap:7px;padding:0 17px;font-weight:700;box-shadow:0 4px 14px #0b26482e}.map-layer-row--expanded{z-index:5;top:104px}.map-sheet{z-index:6;min-height:225px;padding:16px 22px calc(var(--mobile-safe-area-height,28px) + 22px);background:#fff;border-radius:24px 24px 0 0;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -8px 24px #0b26481f}.sheet-handle{background:#d2d8de;border-radius:3px;width:40px;height:4px;margin:0 auto 14px;display:block}.eyebrow{color:var(--blue);margin:0 0 5px;font-size:11px;font-weight:700}.map-sheet h2{letter-spacing:-.6px;margin:0 0 7px;font-size:19px}.map-sheet>p:not(.eyebrow){color:var(--muted);margin:0;font-size:12px}.time-slider{grid-template-columns:repeat(5,1fr);gap:5px;margin-top:18px;display:grid}.time-slider button{border:1px solid var(--line);min-height:38px;color:var(--muted);background:#fff;border-radius:10px;font-size:11px}.time-slider button.is-selected{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:700}@media (width<=360px){.screen-content{padding-left:14px;padding-right:14px}.weather-hero h1{font-size:26px}.temperature{font-size:64px}.map-card{margin-left:-14px;margin-right:-14px}.forecast-item small{display:none}}.demo-banner{color:#694710;background:#fff2d8;border-radius:10px;margin:14px 0 0;padding:12px;font-size:12px;line-height:1.6}.map-placeholder{box-sizing:border-box;color:#26435e;text-align:center;background:#e8eef4;flex-direction:column;justify-content:center;align-items:center;gap:9px;width:100%;height:100%;padding:55px 15px;display:flex}.map-placeholder strong{font-size:20px}.map-placeholder span{font-size:14px}.map-placeholder small{font-size:11px}.full-map-view .map-placeholder{justify-content:flex-start;padding-top:180px}:root{color:#0b2648;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--mobile-safe-area-height:env(safe-area-inset-bottom,0px);background:#eef3f8;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Malgun Gothic,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{min-width:320px}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:3px;outline:3px solid #0864d8}.dayon-app{background:var(--surface);min-height:100dvh;position:relative}.screen-content{max-width:1120px;padding-top:calc(24px + env(safe-area-inset-top,0px));margin:auto}.app-header{margin-bottom:20px}.app-header .brand-lockup{align-items:center;gap:12px;display:flex}.brand-lockup:before{content:"";background:url(/icons/dayon-w2-source.png) 50%/cover;border-radius:10px;width:40px;height:40px}.brand-lockup span{display:none}.bottom-nav{height:calc(70px + env(safe-area-inset-bottom,0px));padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));position:fixed}.bottom-nav button{min-height:48px}.toast{font-size:13px;position:fixed}.full-map-view{min-height:100dvh;position:fixed}.map-header{top:calc(18px + env(safe-area-inset-top,0px))}.map-layer-row--expanded{top:calc(78px + env(safe-area-inset-top,0px))}.map-sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}.forecast-item{gap:8px;min-height:86px}.forecast-item span{font-size:12px}.forecast-item strong{font-size:16px}.forecast-item small{font-size:11px}.forecast-selection{font-size:13px}.notice-copy small{white-space:normal;font-size:12px}.map-card{height:300px}.map-footer>span{max-width:48%;font-size:12px}@media (width>=760px){.screen-content{grid-template-columns:1fr 1fr;gap:22px 32px;padding:32px 36px 120px;display:grid}.app-header,.demo-banner,.location-button{grid-column:1/-1}.app-header{margin:0}.location-button{justify-self:start}.demo-banner{margin:0}.weather-hero{grid-area:4/1;padding:18px 4px}.rain-alert{grid-area:5/1}.forecast-section{grid-area:6/1;padding-top:0}.map-card{border-radius:20px;grid-area:4/2/7;height:100%;min-height:390px;margin:0}.local-section{grid-column:1/-1;padding:16px 0}.notice-row{min-height:76px}.bottom-nav{justify-content:center;gap:80px}.bottom-nav button{min-width:84px}.full-map-view .map-sheet{width:min(600px,100%);left:50%;right:auto;transform:translate(-50%)}}