:root {
--bg:#f7f8fa; --card:#fff; --fg:#111418; --dim:#5c636d; --faint:#8b929c;
--line:#e4e7ec; --rule:#c9ced6;
--accent:#1d4ed8;
--ok:#1e8449; --warn:#8a6100; --bad:#c0392b;
--w:52rem;
}
@media (prefers-color-scheme: dark) {
:root {
--bg:#0b0d10; --card:#14171c; --fg:#e8ebf0; --dim:#9aa2ad; --faint:#6d747f;
--line:#232830; --rule:#39404a;
--accent:#93b4fd;
--ok:#4ade80; --warn:#e5be6a; --bad:#ff7a70;
}
}
* { box-sizing:border-box; }
html { overflow-y:scroll; }
body {
margin:0; background:var(--bg); color:var(--fg);
font-family:var(--font-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif);
font-size:15px; line-height:1.7; -webkit-text-size-adjust:100%;
}
main, header, footer { max-width:var(--w); margin:0 auto; padding:0 1.2rem; }
header { padding-top:2.4rem; }
a { color:var(--accent); }
.wordmark { margin:0; font-size:1rem; }
header h1 { margin:.2rem 0 0; font-size:1.55rem; letter-spacing:-.01em; }
.now { display:flex; gap:.8rem; align-items:flex-start;
margin:1.6rem 0 0; padding:1.1rem 1.2rem;
background:var(--card); border:1px solid var(--line); border-radius:12px; }
.now .dot { flex:none; width:.9rem; height:.9rem; border-radius:50%; margin-top:.42rem;
background:var(--ok); }
.now.warn .dot { background:var(--warn); }
.now.bad .dot  { background:var(--bad); }
.now b { display:block; font-size:1.12rem; }
.now span { color:var(--dim); font-size:.92rem; }
.parts { margin:1.2rem 0 0; padding:0; list-style:none;
background:var(--card); border:1px solid var(--line); border-radius:12px; }
.parts li { padding:.85rem 1.2rem; border-top:1px solid var(--line); }
.parts li:first-child { border-top:0; }
.parts .row { display:flex; align-items:center; gap:.7rem; }
.parts .name { flex:1; }
.parts .sub { color:var(--faint); font-size:.86rem; }
.parts .st { font-size:.88rem; color:var(--ok); white-space:nowrap; }
.parts .st.warn { color:var(--warn); }
.parts .st.bad  { color:var(--bad); }
.parts .row > i { flex:none; width:.55rem; height:.55rem; border-radius:50%; background:var(--ok); }
.parts .row > i.warn { background:var(--warn); }
.parts .row > i.bad  { background:var(--bad); }
.days { display:flex; margin:.7rem 0 0; height:1.9rem;
position:relative; padding-top:1.4rem; box-sizing:content-box; }
.days i:hover::after, .days i:focus-visible::after {
content:attr(data-t);
position:absolute; left:0; right:0; top:0;
text-align:center; font-size:.78rem; line-height:1.4; color:var(--fg);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
pointer-events:none;   
}
.days i:hover, .days i:focus-visible {
outline:2px solid var(--fg); outline-offset:1px; }
.days i { flex:1 1 0; min-width:0; border-right:1px solid var(--card);
border-radius:1px; background:color-mix(in srgb,var(--ok) 55%,transparent); }
.days i:last-child { border-right:0; }
.days i.warn { background:var(--warn); }
.days i.bad  { background:var(--bad); }
.days i.none { background:repeating-linear-gradient(135deg,
var(--line) 0 2px, transparent 2px 4px); }
.parts li.axis { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
color:var(--faint); font-size:.78rem; padding-top:.6rem; padding-bottom:.9rem; }
.parts li.axis .legend { flex:1; display:flex; align-items:center; gap:.3rem;
justify-content:center; flex-wrap:wrap; }
.parts li.axis i { width:.6rem; height:.6rem; border-radius:2px; margin-left:.5rem;
background:color-mix(in srgb,var(--ok) 55%,transparent); }
.parts li.axis i:first-child { margin-left:0; }
.parts li.axis i.warn { background:var(--warn); }
.parts li.axis i.bad  { background:var(--bad); }
.parts li.axis i.none { background:repeating-linear-gradient(135deg,
var(--line) 0 2px, transparent 2px 4px); }
.since { margin:.7rem 0 0; color:var(--faint); font-size:.84rem; }
h2 { margin:2.4rem 0 .8rem; font-size:1.02rem; color:var(--dim); font-weight:600; }
.inc { margin:0 0 1rem; padding:1.1rem 1.2rem;
background:var(--card); border:1px solid var(--line); border-radius:12px; }
.inc.bad  { border-color:color-mix(in srgb,var(--bad) 40%,var(--line)); }
.inc.warn { border-color:color-mix(in srgb,var(--warn) 45%,var(--line)); }
.inc h3 { margin:0; font-size:1.05rem; }
.inc .meta { margin:.3rem 0 0; color:var(--faint); font-size:.86rem; }
.inc .meta .sev { color:var(--dim); }
.ups { margin:1rem 0 0; padding:0; list-style:none; }
.ups li { position:relative; padding:0 0 1rem 1.1rem; border-left:2px solid var(--line); }
.ups li:last-child { border-left-color:transparent; padding-bottom:0; }
.ups li::before { content:''; position:absolute; left:-6px; top:.55rem;
width:10px; height:10px; border-radius:50%; background:var(--rule);
border:2px solid var(--card); }
.ups li:first-child::before { background:var(--accent); }
.ups .when { color:var(--faint); font-size:.82rem;
font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.ups .what { color:var(--dim); font-size:.82rem; }
.ups p { margin:.2rem 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
details.past { margin:0 0 .6rem; padding:.7rem 1.2rem;
background:var(--card); border:1px solid var(--line); border-radius:12px; }
details.past summary { cursor:pointer; }
details.past summary::marker { color:var(--faint); }
details.past .meta { margin:.2rem 0 0; }
.empty { color:var(--dim); background:var(--card); border:1px solid var(--line);
border-radius:12px; padding:1.1rem 1.2rem; margin:0; }
footer { margin:3rem auto 3rem; color:var(--faint); font-size:.84rem; }
footer p { margin:.4rem 0; }
footer .stamp {
font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }