:root{--bg:#eef1f6;--card:#fff;--title:#16334f;--text:#35435a;--muted:#8a94a6;--border:#e4e9f0;--blue:#1f6fdd;--orange:#f2622a;--green:#17a06b;--red:#e03131;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Pretendard,Noto Sans KR,-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-width:1280px;margin:0}h1,h2{margin:0}.app{padding:14px 18px 22px}.app-header{justify-content:space-between;align-items:center;padding:4px 6px 14px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand h1{letter-spacing:-.5px;color:var(--title);font-size:27px;font-weight:800}.header-right{align-items:center;gap:16px;display:flex}.offline-badge{color:#a86a12;background:#fff4e5;border:1px solid #f0c894;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700}.warning-banner{background:#fff;border:1.5px solid #f3b0b0;border-radius:10px;align-items:center;gap:8px;padding:8px 14px;display:flex}.warning-label,.warning-text{color:var(--red);font-size:14px;font-weight:700}.warning-time{color:var(--muted);background:#f3f5f8;border-radius:6px;padding:3px 8px;font-size:12px}.header-clock{color:#44546b;align-items:center;gap:7px;font-size:15px;font-weight:600;display:flex}.dashboard{flex-direction:column;gap:14px;display:flex}.row{gap:14px;display:flex}.row-top .card-observation{flex:0 0 35%}.row-top .card-power{flex:1}.row-mid{gap:30px}.row-mid .card-asos{flex:0 0 50%}.row-mid .card-air{border-left:1px solid var(--border);flex:1;padding-left:30px}.row .card-imagery{flex:1}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px 14px;position:relative;box-shadow:0 1px 2px #16334f0a}.card-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.card-title{align-items:center;gap:8px;display:flex}.card-title h2{color:var(--title);font-size:16.5px;font-weight:700}.card-basetime{color:var(--muted);font-size:12px}.card-source{color:var(--muted);font-size:11.5px;position:absolute;bottom:10px;right:18px}.card-bare{box-shadow:none;background:0 0;border:none;padding:0}.card-bare .card-head{margin-bottom:10px}.card-bare .card-source{bottom:0;right:2px}.metric{flex-direction:column;align-items:center;gap:2px;display:flex}.metric-label{color:#4a5a72;align-items:center;gap:5px;margin-bottom:2px;font-size:13.5px;font-weight:600;display:flex}.metric-value{letter-spacing:-.5px;font-size:30px;font-weight:800;line-height:1.15}.tone-blue{color:var(--blue)}.tone-orange{color:var(--orange)}.tone-green{color:var(--green)}.metric-unit{color:var(--muted);font-size:12px}.metric-card{background:var(--card);border:1px solid var(--border);border-radius:10px;justify-content:center;min-height:128px;padding:12px 6px 14px;box-shadow:0 1px 2px #16334f0a}.metric-card .metric-value{font-size:26px}.site-row+.site-row{border-top:1px solid var(--border);margin-top:12px;padding-top:14px}.site-badge{color:#1d3f68;background:#eaf1fb;border-radius:7px;padding:4px 12px;font-size:12.5px;font-weight:700;display:inline-block}.metric-grid{grid-template-columns:repeat(3,1fr);margin-top:10px;display:grid}.metric-grid .metric+.metric{border-left:1px solid var(--border)}.chart-legend{color:#44546b;justify-content:center;gap:26px;margin:-4px 0 6px;font-size:12.5px;font-weight:600;display:flex}.legend-item{align-items:center;gap:7px;display:flex}.legend-item em{color:var(--muted);font-size:11.5px;font-style:normal;font-weight:500}.legend-line{border-radius:2px;width:22px;height:3px}.chart-box{height:288px}.chart-tooltip{border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px 10px;font-size:12px;box-shadow:0 4px 12px #16334f1a}.chart-tooltip-head{color:var(--title);margin-bottom:6px;font-weight:700}.chart-tooltip-row{align-items:center;gap:6px;line-height:1.7;display:flex}.chart-tooltip-dot{border-radius:50%;width:8px;height:8px}.chart-tooltip-name{color:#5b6b80;min-width:74px}.chart-tooltip-value{color:var(--title);margin-left:auto;font-weight:700}.asos-grid{grid-template-columns:repeat(6,1fr);gap:10px;padding-bottom:18px;display:grid}.air-grid{grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:18px;display:grid}.air-item{flex-direction:column;align-items:center;gap:3px;display:flex}.air-label{color:#4a5a72;margin-bottom:4px;font-size:13.5px;font-weight:600}.grade-badge{color:#fff;border-radius:6px;margin-top:5px;padding:3px 12px;font-size:11.5px;font-weight:700}.grade-1{background:#2f7fe0}.grade-2{background:#2e9e5b}.grade-3{background:#f0a020}.grade-4{background:#e03131}.imagery-grid{grid-template-columns:repeat(5,1fr);gap:14px;padding-bottom:12px;display:grid}.imagery-item{flex-direction:column;gap:8px;margin:0;display:flex}.imagery-item figcaption{text-align:center;color:#44546b;font-size:13px;font-weight:600}.imagery-item img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border);background:#f3f5f8;border-radius:8px;width:100%}.imagery-time{text-align:center;color:#7b8a9e;font-variant-numeric:tabular-nums;font-size:11px}.imagery-placeholder{aspect-ratio:4/3;color:#93a0b2;background:repeating-linear-gradient(45deg,#f5f7fa,#f5f7fa 10px,#eef1f6 10px 20px);border:1px dashed #cfd8e3;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex}.imagery-placeholder span{font-size:13px;font-weight:600}.imagery-placeholder small{font-size:11px}