:root{--bg:#fbfbfa;--card:#fff;--fg:#1d1d1f;--muted:#6e6e73;--line:#e6e6e3;--o:#3fb950;--d:#e3b341;--p:#f0883e;--m:#e5534b;--n:#d7d7d2;--tip:#1d1d1f;--tipfg:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#111113;--card:#18181b;--fg:#ededef;--muted:#a1a1aa;--line:#2a2a2e;--n:#34343a;--tip:#ededef;--tipfg:#111113}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Segoe UI",sans-serif}
a{color:inherit}.wrap{max-width:860px;margin:0 auto;padding:0 16px}
.top{border-bottom:1px solid var(--line);background:var(--card)}.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}.logo{font-weight:800;font-size:22px;letter-spacing:-.02em}.sub{color:var(--muted);font-size:15px}
.out{color:var(--muted);font-size:14px;text-decoration:none}.out:hover{color:var(--fg)}
main{padding-top:32px}
.banner{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:10px;color:#fff;font-weight:650;font-size:17px;margin-bottom:28px}
.banner .dot{width:10px;height:10px;border-radius:50%;background:#fff;flex:none}
.banner.operational{background:var(--o)}.banner.degraded{background:var(--d);color:#1d1d1f}.banner.degraded .dot{background:#1d1d1f}.banner.partial_outage{background:var(--p)}.banner.major_outage{background:var(--m)}.banner.unknown{background:var(--muted)}
.active{margin-bottom:28px;display:grid;gap:12px}
.active .incident{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--p);border-radius:8px;padding:14px 16px}
.active .incident.major_outage{border-left-color:var(--m)}.active .incident.degraded{border-left-color:var(--d)}
.group{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden}
.group h2{display:flex;justify-content:space-between;align-items:center;margin:0;padding:14px 20px;font-size:15px;border-bottom:1px solid var(--line)}
.comp{padding:16px 20px;border-bottom:1px solid var(--line)}.comp:last-child{border-bottom:0}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.name{font-weight:600}.hint{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;border:1px solid var(--line);border-radius:50%;font-size:11px;color:var(--muted);cursor:help;vertical-align:1px}
.state{font-size:14px;font-weight:600;white-space:nowrap}.state.operational{color:var(--o)}.state.degraded{color:#b8860b}.state.partial_outage{color:var(--p)}.state.major_outage{color:var(--m)}.state.unknown{color:var(--muted)}
@media (prefers-color-scheme:dark){.state.degraded{color:var(--d)}}
.bars{display:flex;gap:2px;height:34px}.bars i{flex:1;border-radius:2px;background:var(--n);min-width:0}.bars i:hover{opacity:.7}
i.o{background:var(--o)}i.d{background:var(--d)}i.p{background:var(--p)}i.m{background:var(--m)}i.n{background:var(--n)}
.axis{display:flex;align-items:center;gap:10px;margin-top:6px;color:var(--muted);font-size:12px}.axis .rule{flex:1;height:1px;background:var(--line)}
.narrow{display:none}
@media (max-width:640px){.bars i:nth-child(-n+60){display:none}.wide{display:none}.narrow{display:inline}.banner{font-size:16px}}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:12px;margin:-4px 0 36px}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.past h2{font-size:20px;margin:0 0 8px}.day{border-bottom:1px solid var(--line);padding:16px 0}.day h3{margin:0 0 8px;font-size:15px}
.none{margin:0;color:var(--muted);font-size:14px}
.incident+.incident{margin-top:12px}.incident .title{font-weight:650;color:var(--p)}.incident.major_outage .title{color:var(--m)}.incident.degraded .title{color:#b8860b}
.incident .update{font-size:14px;margin-top:2px}.incident .when{color:var(--muted);font-size:13px;margin-top:2px}
footer{color:var(--muted);font-size:13px;padding-top:24px;padding-bottom:40px}
#tip{position:fixed;z-index:10;max-width:240px;padding:8px 10px;border-radius:6px;background:var(--tip);color:var(--tipfg);font-size:12px;line-height:1.5;white-space:pre-line;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.18)}