:root { --ok:#1f9d55; --warn:#d69e2e; --bad:#e53e3e; --unk:#a0aec0; --fg:#1a202c; --muted:#718096; --bg:#f7fafc; --card:#fff; --line:#e2e8f0; }
@media (prefers-color-scheme: dark) { :root { --fg:#e2e8f0; --muted:#a0aec0; --bg:#171923; --card:#1f2330; --line:#2d3748; --unk:#4a5568; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif; }
main { max-width:860px; margin:0 auto; padding:32px 16px 48px; }
h1 { font-size:26px; margin:0 0 16px; }
h2 { font-size:17px; margin:32px 0 12px; }
.env { font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:10px; background:var(--line); vertical-align:middle; }
.muted { color:var(--muted); font-size:13px; }
.overall { padding:14px 18px; border-radius:8px; color:#fff; font-weight:600; font-size:17px; }
.overall.operational { background:var(--ok); } .overall.degraded { background:var(--warn); } .overall.outage { background:var(--bad); } .overall.unknown { background:var(--unk); }
.components, .incidents { list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:8px; }
.components li, .incidents li { padding:12px 16px; border-top:1px solid var(--line); }
.components li:first-child, .incidents li:first-child { border-top:0; }
.row { display:flex; align-items:center; gap:10px; }
.name { font-weight:600; flex:1; }
.state { font-size:13px; } .state.operational { color:var(--ok); } .state.degraded { color:var(--warn); } .state.outage { color:var(--bad); } .state.unknown { color:var(--muted); }
.lat { font-size:12px; color:var(--muted); min-width:64px; text-align:right; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 4px 0 10px; vertical-align:middle; }
.dot.operational { background:var(--ok); } .dot.degraded { background:var(--warn); } .dot.outage { background:var(--bad); } .dot.unknown { background:var(--unk); }
.row .dot { margin:0; }
.bars { display:flex; gap:2px; margin-top:8px; height:26px; }
.bars span { flex:1; border-radius:2px; background:var(--unk); }
.bars span.operational { background:var(--ok); } .bars span.degraded { background:var(--warn); } .bars span.outage { background:var(--bad); }
.uptime { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:2px; }
.sev { font-weight:600; text-transform:capitalize; } .sev.outage { color:var(--bad); } .sev.degraded { color:var(--warn); }
footer { margin-top:32px; }