:root{
  --bg:#0e1116; --bg-soft:#161b22; --card:#161b22; --card-hi:#1c2230;
  --line:#262d3a; --line-soft:#1f2530;
  --fg:#e6edf3; --fg-dim:#9aa7b4; --fg-faint:#6b7787;
  --up:#2ea043; --up-soft:#1b4a28;
  --degraded:#d29922; --degraded-soft:#4a3a12;
  --down:#e5534b; --down-soft:#4d1f1d;
  --nodata:#2b323d;
  --accent:#4c8eff;
  --radius:10px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
/* Author display rules (.btn is inline-flex, .tab is inline-block, ...) outrank
   the UA stylesheet's [hidden]{display:none}, so state it explicitly here.
   Without this, every element toggled via the `hidden` property stays visible. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Roboto,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,17,22,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

/* 다음 자동 갱신까지 남은 시간을 헤더 하단에서 소진하는 2px 바.
   --poll 은 app.js 가 POLL_MS 로부터 설정한다. */
.refresh-bar{
  position:absolute; bottom:0; left:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--accent) 0%,#7b5cff 65%,#b08cff 100%);
  animation:refresh-timer var(--poll,30s) linear forwards;
}
@keyframes refresh-timer{
  from{width:100%; opacity:1}
  90%{opacity:1}
  to{width:0%; opacity:.35}
}
@media(prefers-reduced-motion:reduce){
  .refresh-bar{animation:none; width:100%; opacity:.25}
}
.header-inner{
  max-width:1120px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand-mark{
  width:32px;height:32px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--accent),#7b5cff);
  display:grid;place-items:center;
}
.brand-mark svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.brand h1{margin:0;font-size:16px;font-weight:700;letter-spacing:-.2px}
.brand p{margin:0;font-size:11px;color:var(--fg-faint);letter-spacing:.5px;text-transform:uppercase}

.updated{font-size:12px;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--up);flex:none;opacity:.35}
.pulse.on{animation:blip .9s ease}
@keyframes blip{0%{opacity:1;box-shadow:0 0 0 0 rgba(46,160,67,.6)}100%{opacity:.35;box-shadow:0 0 0 9px rgba(46,160,67,0)}}

.btn{
  background:var(--card-hi); color:var(--fg); border:1px solid var(--line);
  border-radius:7px; padding:7px 12px; cursor:pointer; font-weight:600; font-size:12.5px;
  display:inline-flex; align-items:center; gap:6px; transition:.14s;
}
.btn:hover{background:#242c3a;border-color:#39435400}
.btn:hover{border-color:#3a4557}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#3d7ff0;border-color:#3d7ff0}
.btn-danger{background:transparent;border-color:#5a2a28;color:#f08f89}
.btn-danger:hover{background:#3a1d1c;border-color:#7a3a36}
.btn-icon{padding:7px 9px}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:22px 20px 70px}

.banner{
  border-radius:var(--radius); padding:18px 20px; margin-bottom:22px;
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line); background:var(--card);
}
.banner-dot{width:11px;height:11px;border-radius:50%;flex:none}
.banner h2{margin:0;font-size:16px;font-weight:700}
.banner p{margin:2px 0 0;font-size:12.5px;color:var(--fg-dim)}
.banner.ok{border-color:var(--up-soft);background:linear-gradient(90deg,rgba(46,160,67,.10),transparent 55%)}
.banner.ok .banner-dot{background:var(--up)}
.banner.warn{border-color:var(--degraded-soft);background:linear-gradient(90deg,rgba(210,153,34,.11),transparent 55%)}
.banner.warn .banner-dot{background:var(--degraded)}
.banner.bad{border-color:var(--down-soft);background:linear-gradient(90deg,rgba(229,83,75,.12),transparent 55%)}
.banner.bad .banner-dot{background:var(--down)}

.sec-title{
  font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--fg-faint); margin:0 0 11px; display:flex; align-items:center; gap:8px;
}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line-soft)}

/* ---------- target card ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px 14px; margin-bottom:12px;
}
.card.paused{opacity:.55}
.card-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-id{flex:1;min-width:200px}
.card-name{display:flex;align-items:center;gap:8px;font-weight:650;font-size:14.5px}
.card-url{
  font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);
  margin-top:3px;word-break:break-all;
}
.pill{
  font-size:11px;font-weight:700;letter-spacing:.4px;padding:3px 8px;border-radius:20px;
  border:1px solid transparent;white-space:nowrap;
}
.pill.up{background:var(--up-soft);color:#7ee787;border-color:#2a5a35}
.pill.down{background:var(--down-soft);color:#ff9d96;border-color:#6e2f2c}
.pill.degraded{background:var(--degraded-soft);color:#e3b341;border-color:#5f4a17}
.pill.pending,.pill.paused{background:#242b36;color:var(--fg-faint);border-color:var(--line)}

.metrics{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto;text-align:right}
.metric-l{font-size:10.5px;color:var(--fg-faint);letter-spacing:.5px;text-transform:uppercase}
.metric-v{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;margin-top:1px}
.metric-v small{font-size:11px;color:var(--fg-faint);font-weight:500}

.err{
  margin-top:10px;font-family:var(--mono);font-size:11.5px;
  background:#1d1413;border:1px solid #4d2523;color:#f0a9a4;
  padding:7px 10px;border-radius:6px;word-break:break-all;
}

/* ---------- uptime bar ---------- */
.bar{display:flex;gap:2px;margin-top:14px;height:34px;align-items:stretch}
.seg{flex:1 1 0;min-width:2px;border-radius:2px;background:var(--nodata);cursor:pointer;
  transition:transform .1s, filter .1s}
.seg:hover{transform:scaleY(1.14);filter:brightness(1.35)}
.seg.up{background:var(--up)}
.seg.degraded{background:var(--degraded)}
.seg.down{background:var(--down)}
.seg.nodata{background:var(--nodata);cursor:default}
.seg.nodata:hover{transform:none;filter:none}
.bar-legend{
  display:flex;justify-content:space-between;font-size:11px;color:var(--fg-faint);
  margin-top:7px;font-variant-numeric:tabular-nums;
}

/* ---------- incidents ---------- */
.inc{
  display:flex;gap:12px;align-items:flex-start;padding:11px 14px;
  border:1px solid var(--line);border-left:3px solid var(--down);
  border-radius:7px;background:var(--card);margin-bottom:8px;
}
.inc.resolved{border-left-color:var(--fg-faint);opacity:.72}
.inc-body{flex:1;min-width:0}
.inc-name{font-weight:650;font-size:13.5px}
.inc-reason{font-family:var(--mono);font-size:11.5px;color:var(--fg-dim);
  margin-top:3px;word-break:break-all}
.inc-meta{font-size:11.5px;color:var(--fg-faint);white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums}
.tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.4px}
.tag.on{background:var(--down-soft);color:#ff9d96}
.tag.off{background:#242b36;color:var(--fg-faint)}

.empty{
  border:1px dashed var(--line);border-radius:var(--radius);padding:26px;
  text-align:center;color:var(--fg-faint);font-size:13px;
}

/* ---------- modal ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(5,7,10,.72);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.overlay[hidden]{display:none!important}
.modal{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  width:100%;max-width:720px;max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.modal-hd{
  display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid var(--line);
}
.modal-hd h3{margin:0;font-size:15px;font-weight:700;flex:1}
.modal-hd .sub{font-size:11.5px;color:var(--fg-faint);font-family:var(--mono)}
.x{background:none;border:none;color:var(--fg-faint);font-size:20px;cursor:pointer;
  line-height:1;padding:0 4px}
.x:hover{color:var(--fg)}
.modal-bd{padding:16px 18px;overflow:auto}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--fg-faint);font-weight:700;padding:0 8px 8px;border-bottom:1px solid var(--line);
}
td{padding:7px 8px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
td.mono{font-family:var(--mono);font-size:11.5px}
.ok-y{color:#7ee787;font-weight:650}
.ok-n{color:#ff9d96;font-weight:650}

/* ---------- form ---------- */
.field{margin-bottom:13px}
.field label{display:block;font-size:11.5px;font-weight:650;color:var(--fg-dim);margin-bottom:5px}
.field .hint{font-weight:400;color:var(--fg-faint)}
/* Every text-like input must be listed. Miss one (password used to be missing)
   and that field silently falls back to the browser's default chrome, which
   looks nothing like the rest of the form. The password-visibility toggle also
   swaps type between password and text, so both must render identically. */
input[type=text],
input[type=password],
input[type=number],
input[type=search],
input[type=email],
input[type=url],
input:not([type]),
select,
textarea{
  width:100%;background:#0d1117;border:1px solid var(--line);border-radius:7px;
  padding:8px 11px;color:var(--fg);font-size:13px;font-family:inherit;
  line-height:1.4;appearance:none;-webkit-appearance:none;
}
input[type=password]{
  font-family:inherit;letter-spacing:.06em;          /* 마스킹 문자 간격만 살짝 */
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=email]:focus,
input[type=url]:focus,
input:not([type]):focus,
select:focus,
textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder{color:var(--fg-faint);opacity:1}
input[readonly]{cursor:text}
/* 브라우저 자동완성 배경이 흰색으로 덮는 것 방지 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fg);
  -webkit-box-shadow:0 0 0 1000px #0d1117 inset;
  caret-color:var(--fg);
}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;vertical-align:-2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.form-err{
  background:#1d1413;border:1px solid #4d2523;color:#f0a9a4;
  padding:8px 11px;border-radius:6px;font-size:12.5px;margin-bottom:12px;
}
.tlist{margin-bottom:16px}
.trow{
  display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:7px;margin-bottom:6px;background:var(--card);
}
.trow-id{flex:1;min-width:0}
.trow-id b{font-size:13px;font-weight:650}
.trow-id div{font-family:var(--mono);font-size:11px;color:var(--fg-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:640px){
  .metrics{margin-left:0;text-align:left;gap:16px;width:100%}
  .header-inner{padding:12px 14px}
  .wrap{padding:16px 14px 60px}
  .bar{height:28px}
}

/* ===================== v2 additions ===================== */
.who{font-size:12px;color:var(--fg-dim);font-weight:600}
.btn-sm{padding:4px 9px;font-size:11.5px}
.note{font-size:12.5px;color:var(--fg-dim);background:#1a2030;border:1px solid var(--line);
  border-radius:7px;padding:9px 11px;margin:0 0 13px}
.form-ok{background:#12241a;border:1px solid #2a5a35;color:#7ee787;
  padding:8px 11px;border-radius:6px;font-size:12.5px;margin-bottom:12px;word-break:break-all}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg);
  font-weight:600;padding-top:6px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.modal-lg{max-width:940px}
.modal-sm{max-width:420px}

/* banner metrics */
.banner{align-items:center}
.banner-txt{flex:1;min-width:0}
.banner-metrics{display:flex;gap:20px;text-align:right;flex-wrap:wrap}

/* overall card */
.card.overall{border-color:#2c3648;background:linear-gradient(180deg,#19202c,#161b22)}
.card.overall .card-name{font-size:15px}

/* uptime bar: body-fail stripe */
.seg{position:relative;overflow:hidden}
.seg.bodyfail::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--degraded);
}

/* tabs */
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tab{
  background:none;border:none;border-bottom:2px solid transparent;color:var(--fg-faint);
  padding:8px 13px;cursor:pointer;font-size:12.5px;font-weight:650;margin-bottom:-1px;
}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--fg);border-bottom-color:var(--accent)}

/* markdown */
.md{font-size:13.5px;line-height:1.72;color:var(--fg)}
.md h1{font-size:20px;margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.md h2{font-size:16px;margin:26px 0 11px;padding-bottom:7px;border-bottom:1px solid var(--line-soft)}
.md h3{font-size:14px;margin:20px 0 9px;color:var(--fg)}
.md p{margin:10px 0}
.md ul,.md ol{margin:10px 0;padding-left:22px}
.md li{margin:4px 0}
.md code{
  font-family:var(--mono);font-size:12px;background:#0d1117;border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;color:#a5d6ff;
}
.md pre{
  background:#0d1117;border:1px solid var(--line);border-radius:8px;padding:13px 15px;
  overflow-x:auto;margin:12px 0;
}
.md pre code{background:none;border:none;padding:0;font-size:12px;color:#c9d1d9;line-height:1.6}
.md blockquote{
  margin:12px 0;padding:9px 14px;border-left:3px solid var(--accent);
  background:#141b26;border-radius:0 7px 7px 0;color:var(--fg-dim);
}
.md blockquote p{margin:3px 0}
.md table{margin:13px 0;font-size:12.5px;display:block;overflow-x:auto;white-space:nowrap}
.md th{background:#1a2130;padding:8px 11px;border:1px solid var(--line);
  text-transform:none;letter-spacing:0;font-size:12px;color:var(--fg)}
.md td{padding:7px 11px;border:1px solid var(--line-soft);white-space:normal}
.md hr{border:none;border-top:1px solid var(--line);margin:22px 0}
.md a{color:var(--accent)}
.md strong{color:#fff;font-weight:700}

/* editor */
textarea{
  min-height:400px;border-radius:8px;padding:13px 15px;
  font-family:var(--mono);font-size:12.5px;line-height:1.65;resize:vertical;
}

/* rule rows */
.rule{
  display:grid;grid-template-columns:110px 1fr 130px 1.4fr 32px;gap:8px;align-items:center;
  padding:9px;border:1px solid var(--line);border-radius:7px;margin-bottom:7px;background:#12171f;
}
.rule input,.rule select{padding:6px 9px;font-size:12px}
.rule .rm{
  background:none;border:1px solid var(--line);color:var(--fg-faint);border-radius:6px;
  cursor:pointer;padding:5px 0;font-size:14px;
}
.rule .rm:hover{color:#ff9d96;border-color:#5a2a28}
.rule-desc{grid-column:1 / -1}
.rule-desc input{width:100%}
@media(max-width:760px){ .rule{grid-template-columns:1fr 1fr} .row3{grid-template-columns:1fr} }

/* detail tables */
.detail-rule{
  border:1px solid var(--line);border-radius:7px;padding:10px 12px;margin:7px 0;background:#12171f;
  font-size:12.5px;
}
.detail-rule.bad{border-color:#5a2a28;background:#1d1413}
.detail-rule b{font-family:var(--mono);font-size:11.5px}
.detail-rule .kv{color:var(--fg-faint);font-family:var(--mono);font-size:11.5px;margin-top:4px;
  word-break:break-all}

/* chart */
.chart-wrap{overflow-x:auto}
.chart-stats{display:flex;gap:24px;margin-bottom:14px;flex-wrap:wrap}

/* ---------- log viewer ---------- */
.log-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.log-toolbar input[type=text]{flex:1;min-width:180px;padding:6px 10px;font-size:12.5px}
.log-toolbar select{width:auto;padding:6px 10px;font-size:12.5px}
.log-toolbar .chk{padding-top:0;white-space:nowrap}
.logview{
  background:#0d1117;border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;margin:0;max-height:56vh;overflow:auto;
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:#c9d1d9;
  white-space:pre;tab-size:4;
}
.logview .lv-err{color:#ff9d96}
.logview .lv-warn{color:#e3b341}
.logview .lv-ok{color:#7ee787}
.logview .lv-dim{color:var(--fg-faint)}
.log-empty{color:var(--fg-faint);font-style:italic}

/* ---------- CSP 대응 유틸리티 (인라인 style 속성 대체) ---------- */
.mt16{margin-top:16px}
.mt20{margin-top:20px}
.mt28{margin-top:28px}
.btn-block{width:100%;justify-content:center;margin-bottom:12px}
.field-narrow{max-width:240px}