/* Sparrow 서비스 상태 — 디자인 토큰과 컴포넌트 스타일.
 *
 * 값은 design_handoff_status_page/README.md 의 토큰 표를 그대로 옮겼다.
 * 원본 프로토타입은 인라인 스타일이지만 그건 프로토타입 런타임 제약이라 따르지 않는다.
 * 그림자는 쓰지 않는다 — 이 디자인은 보더로만 층을 구분한다.
 */

:root {
  /* 중립 */
  --bg:              oklch(0.975 0.003 265);
  --surface:         #fff;
  --surface-sub:     oklch(0.985 0.003 265);
  --border:          oklch(0.92 0.006 265);
  --border-inner:    oklch(0.94 0.005 265);
  --border-row:      oklch(0.955 0.005 265);
  --neutral-faint:   oklch(0.9 0.006 265);
  --text:            oklch(0.22 0.015 265);
  --text-strong-num: oklch(0.3 0.014 265);
  --text-body:       oklch(0.4 0.012 265);
  --text-body-alt:   oklch(0.42 0.012 265);
  --text-muted:      oklch(0.48 0.012 265);
  --text-kicker:     oklch(0.45 0.012 265);
  --ink:             oklch(0.24 0.015 265);
  --ink-hover:       oklch(0.32 0.015 265);

  /* 상태 */
  --ok:        oklch(0.74 0.14 155);
  --ok-bar:    oklch(0.74 0.14 155 / 0.55);
  --ok-fg:     oklch(0.3 0.07 155);
  --ok-bg:     oklch(0.74 0.14 155 / 0.18);
  --warn:      oklch(0.79 0.14 78);
  --warn-fg:   oklch(0.32 0.09 60);
  --warn-bg:   oklch(0.79 0.14 78 / 0.24);
  --warn-text: oklch(0.45 0.13 55);
  --down:      oklch(0.63 0.19 25);
  --down-fg:   oklch(0.4 0.16 25);
  --down-bg:   oklch(0.63 0.19 25 / 0.18);
  --down-text: oklch(0.48 0.17 25);
  --none:      oklch(0.9 0.006 265);

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Pretendard, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
}

/* ── 헤더 ─────────────────────────────────────────────── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand__mark { width: 22px; height: 22px; background: url(favicon.svg) center / contain no-repeat; }
.brand__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.live { display: flex; align-items: center; gap: 9px; }
.live__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  animation: livePulse 1.8s ease-in-out infinite;
}
.live__text { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
/* 폴링 실패 시 표식을 죽인다 */
.live[data-stale='true'] .live__dot { background: var(--neutral-faint); animation: none; }

@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .live__dot { animation: none; } }

/* ── 레이아웃 ─────────────────────────────────────────── */
.container {
  max-width: 920px; margin: 0 auto;
  padding: 56px 32px 72px;
  display: flex; flex-direction: column; gap: 44px;
}

/* ── 전체 판정 Hero ───────────────────────────────────── */
.hero { display: flex; flex-direction: column; gap: 14px; }
.hero__row { display: flex; align-items: center; gap: 11px; }
.hero__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--neutral-faint); }
.hero__kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--text-kicker);
}
.hero__title {
  margin: 0; font-size: 34px; font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.25; text-wrap: pretty;
}
.hero__sub {
  margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-body-alt); max-width: 620px;
  text-wrap: pretty;
}
.hero[data-overall='healthy']  .hero__dot { background: var(--ok); }
.hero[data-overall='degraded'] .hero__dot { background: var(--warn); }
.hero[data-overall='outage']   .hero__dot { background: var(--down); }

/* ── 카드 ─────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.card__header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px;
  background: var(--surface-sub);
  border-bottom: 1px solid var(--border-inner);
}
.card__title { font-size: 15px; font-weight: 600; }
.card__meta { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }

/* ── 환경 행 ──────────────────────────────────────────── */
.env {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-row);
}
.env__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.env__id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.env__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--none); }
.env__name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.env__host {
  font-family: var(--mono); font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.env__right { display: flex; align-items: center; gap: 16px; flex: none; }
.env__ms { font-family: var(--mono); font-size: 13px; color: var(--text-body-alt); }

.env[data-status='ok']   .env__dot { background: var(--ok); }
.env[data-status='warn'] .env__dot { background: var(--warn); }
.env[data-status='down'] .env__dot { background: var(--down); }
.env[data-status='warn'] .env__ms  { color: var(--warn-text); }
.env[data-status='down'] .env__ms  { color: var(--down-text); }

.badge { font-size: 13px; font-weight: 600; border-radius: 7px; padding: 6px 11px; white-space: nowrap; }
.badge[data-status='ok']   { color: var(--ok-fg);   background: var(--ok-bg); }
.badge[data-status='warn'] { color: var(--warn-fg); background: var(--warn-bg); }
.badge[data-status='down'] { color: var(--down-fg); background: var(--down-bg); }
.badge[data-status='none'] { color: var(--text-muted); background: var(--neutral-faint); }

/* ── 이력 바 ──────────────────────────────────────────── */
.history { display: flex; gap: 2px; height: 34px; align-items: stretch; }
.history__day { flex: 1; border-radius: 2px; background: var(--none); min-width: 2px; }
.history__day[data-status='ok']   { background: var(--ok-bar); }
.history__day[data-status='warn'] { background: var(--warn); }
.history__day[data-status='down'] { background: var(--down); }

.env__foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 12px; color: var(--text-muted);
}
.env__uptime { font-weight: 600; color: var(--text-strong-num); }
.env__uptime[data-low='true'] { color: var(--warn-text); }

/* ── 범례 ─────────────────────────────────────────────── */
.legend {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--surface-sub);
}
.legend__item { display: flex; align-items: center; gap: 8px; }
.legend__swatch { width: 18px; height: 7px; border-radius: 3px; }
.legend__label { font-size: 12px; color: var(--text-muted); }

/* ── 인시던트 ─────────────────────────────────────────── */
.section__header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.section__title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.section__meta { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }

.incidents { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px 24px; }
.incident__date {
  font-family: var(--mono); font-size: 13px; color: var(--text-kicker); padding-top: 2px;
}
.incident__body {
  border-left: 2px solid var(--neutral-faint);
  padding-left: 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.incident__body[data-state='investigating'] { border-left-color: var(--warn); }
.incident__body[data-state='down']          { border-left-color: var(--down); }
.incident__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.incident__title { font-size: 16px; font-weight: 600; }
.incident__state { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 4px 9px; white-space: nowrap; }
.incident__state[data-state='investigating'] { color: var(--warn-fg); background: var(--warn-bg); }
.incident__state[data-state='resolved']      { color: var(--ok-fg);   background: var(--ok-bg); }
.incident__state[data-state='completed']     { color: var(--text-strong-num); background: oklch(0.93 0.006 265); }
.incident__text {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-body);
  max-width: 620px; text-wrap: pretty;
}
.incident__timeline { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.incidents__empty { grid-column: 1 / -1; font-size: 15px; color: var(--text-body-alt); }

/* ── 로딩 / 오류 ──────────────────────────────────────── */
.skeleton { background: var(--neutral-faint); border-radius: 4px; }
.skeleton--name { width: 120px; height: 17px; }
.skeleton--bar { height: 34px; border-radius: 2px; }
.error { padding: 32px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.error__text { font-size: 15px; color: var(--text-body-alt); }
.button {
  font-size: 14px; font-weight: 600; color: #fff; background: var(--ink);
  border: 0; border-radius: 9px; padding: 11px 18px; cursor: pointer; white-space: nowrap;
}
.button:hover { background: var(--ink-hover); }

@media (max-width: 560px) {
  .container { padding: 40px 20px 56px; gap: 32px; }
  .hero__title { font-size: 28px; }
  .incidents { grid-template-columns: 1fr; gap: 6px 0; }
  .incident__body { margin-bottom: 14px; }
}