:root{--ink:#f8fbff;--soft:rgba(248,251,255,.68);--line:rgba(255,255,255,.15);--glass:rgba(24,70,108,.12)}*{box-sizing:border-box}html{background:#5e9dca}body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR","Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 72% 10%,rgba(255,231,159,.22),transparent 19%),linear-gradient(165deg,#438bc1 0%,#72afd4 44%,#a8c9dc 100%);background-attachment:fixed}.app{width:min(100%,520px);margin:auto;min-height:100vh;padding:calc(10px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom))}.top{height:48px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;letter-spacing:-.2px;color:var(--soft)}.icon-btn{border:0;background:transparent;color:inherit;font-size:24px;padding:8px}.hero{padding:32px 2px 38px;text-align:left;position:relative}.weather-art{position:absolute;right:4px;top:30px;width:118px;height:88px}.sun{position:absolute;width:54px;height:54px;border-radius:50%;right:30px;top:0;background:rgba(255,238,171,.96);box-shadow:0 0 42px rgba(255,225,126,.34)}.cloud{position:absolute;height:22px;border-radius:30px;background:rgba(255,255,255,.88)}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:29px;height:29px;left:13px;top:-12px}.cloud:after{width:22px;height:22px;left:35px;top:-7px}.c1{width:68px;right:35px;top:43px}.c2{width:57px;right:2px;top:36px;opacity:.64}.temperature{font-size:96px;font-weight:180;letter-spacing:-8px;line-height:.9}.temperature sup{font-size:31px;vertical-align:top;position:relative;top:9px;margin-left:4px}.hero h1{font-size:21px;letter-spacing:-.5px;margin:20px 0 7px}.summary{font-size:15px;line-height:1.6;color:rgba(255,255,255,.8);margin:0;letter-spacing:-.25px}.highlow{margin:16px 0 0;font-size:13px;color:var(--soft)}.highlow b{color:var(--ink)}.highlow span{margin-left:16px}.section{border-top:1px solid var(--line);padding:22px 0}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.section-head h2,.details h2{font-size:13px;letter-spacing:-.2px;margin:0;color:rgba(255,255,255,.78)}.section-head>span{font-size:11px;color:var(--soft)}.hour-row{display:flex;overflow:auto;gap:5px;scrollbar-width:none}.hour-row::-webkit-scrollbar{display:none}.hour-item{min-width:65px;text-align:center}.hour-item .time{font-size:11px;color:var(--soft)}.weather-icon{height:28px;margin:12px auto 10px;position:relative;width:36px}.weather-icon.sunny:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#ffe19a;left:9px;top:5px;box-shadow:0 0 14px rgba(255,222,142,.45)}.weather-icon.cloudy:before,.weather-icon.rain:before,.weather-icon.partly:after{content:"";position:absolute;width:30px;height:12px;border-radius:14px;background:rgba(245,250,255,.9);left:3px;top:12px;box-shadow:-6px 3px 0 -2px rgba(245,250,255,.9)}.weather-icon.partly:before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#ffe19a;left:3px;top:3px}.weather-icon.rain:after{content:"";position:absolute;width:2px;height:7px;background:rgba(218,239,252,.8);left:12px;top:26px;box-shadow:8px 0 rgba(218,239,252,.8),16px 0 rgba(218,239,252,.8);transform:rotate(15deg)}.hour-temp{font-size:15px}.alert{margin:6px -8px;padding:20px 18px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(29,65,91,.14)}.alert .section-head{margin-bottom:14px}.badge{padding:4px 8px;border:1px solid rgba(255,232,174,.32);border-radius:20px;color:#fff0c5!important}.alert h3{font-size:18px;margin:0 0 8px;letter-spacing:-.5px}.alert p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.73);margin:0 0 12px}.alert-time{font-size:11px;color:var(--soft)}.day{display:grid;grid-template-columns:46px 42px 1fr 42px 42px;align-items:center;height:42px;font-size:13px}.day-icon .weather-icon{margin:0;width:34px;transform:scale(.72)}.range{height:3px;background:rgba(255,255,255,.12);border-radius:3px;margin:0 9px;position:relative}.range i{position:absolute;height:100%;border-radius:3px;background:rgba(255,255,255,.65);left:18%;right:18%}.day .high,.day .low{text-align:right}.day .low{color:var(--soft)}.details h2{margin-bottom:19px}.metric{display:flex;justify-content:space-between;align-items:baseline;margin:15px 0 7px;font-size:13px;color:rgba(255,255,255,.72)}.metric b{font-size:15px;color:var(--ink)}.bar{height:2px;background:rgba(255,255,255,.11);border-radius:4px}.bar i{display:block;height:100%;background:rgba(255,255,255,.64);border-radius:4px}.share{width:100%;height:50px;margin:18px 0 15px;border:1px solid rgba(255,255,255,.25);border-radius:14px;background:rgba(255,255,255,.9);color:#286b99;font-size:14px;font-weight:750}footer{text-align:center;padding:12px;font-size:10px;color:rgba(255,255,255,.42)}@media(min-width:700px){body{padding:28px 0}.app{border-radius:30px}}