/* Hallmark · genre: modern-minimal · macrostructure: Stat-Led · theme: Coral · enrichment: none (typography + live data) · nav: N5 · footer: Ft5
 * tone: warm · soft · anchor hue: 40 (coral) · audience: 팬비닛 커뮤니티 이용자 · use: 지금 잘 열리는지, 언제 문제가 있었는지
 * pre-emit critique: P5 H5 E4 S5 R5 V5
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font: 400 var(--text-base)/1.65 var(--font-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--color-accent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
.skip { position: absolute; left: var(--space-md); top: -3rem; padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill); z-index: 30; }
.skip:focus { top: var(--space-md); }
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
h1, h2, h3 { color: var(--color-ink); font-style: normal; margin: 0; }
.section-title { font: 700 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.02em; }

/* ── N5 · floating pill ──────────────────────────────── */
.nav-pill {
  position: fixed; inset: var(--space-md) auto auto 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  background: color-mix(in oklch, var(--color-paper) 80%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
  z-index: 20; max-width: calc(100% - 2 * var(--space-md));
}
.wordmark { font: 700 var(--text-base)/1 var(--font-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; }
.wordmark__sub { color: var(--color-accent-text); }
.nav-pill__links { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-md); }
.nav-pill__links a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.nav-pill__links a:hover { color: var(--color-ink); }
.cta-fill {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
  border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper);
  font: 600 var(--text-sm)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.cta-fill:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.cta-fill:active { transform: translateY(1px); }
@media (min-width: 40rem) { .nav-pill__links { display: flex; } }

/* ── notices ─────────────────────────────────────────── */
.notices { padding-top: 6rem; display: grid; gap: var(--space-sm); }
.notice { background: var(--color-accent-2); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); }
.notice p { margin: 0; }
.notice__title { color: var(--color-ink); font-weight: 700; }
.notice__body { margin-top: var(--space-2xs) !important; }
.notices:not([hidden]) + .hero { padding-top: var(--space-xl); }

/* ── Stat-Led hero ───────────────────────────────────── */
.hero { padding-block: var(--space-3xl) calc(var(--space-3xl) * 1.3); display: grid; gap: var(--space-lg); }
.headline {
  display: flex; gap: 0.4em; align-items: baseline;
  font: 700 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.025em;
  min-width: 0; overflow-wrap: anywhere;
}
.headline__glyph { font-size: 0.65em; transform: translateY(-0.1em); }
.headline[data-state="up"] .headline__glyph { color: var(--color-up); }
.headline[data-state="degraded"] .headline__glyph { color: var(--color-degraded); }
.headline[data-state="down"] .headline__glyph { color: var(--color-down); }
.headline[data-state="maint"] .headline__glyph { color: var(--color-maint); }
.headline[data-state="unknown"] .headline__glyph { color: var(--color-unknown); }
.hero__stat { display: grid; gap: var(--space-sm); align-items: end; }
.figure {
  margin: 0; display: flex; align-items: baseline; min-width: 0;
  font: 700 var(--text-figure)/0.9 var(--font-display); letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; color: var(--color-ink);
}
.figure__unit { font-size: 0.42em; letter-spacing: 0; color: var(--color-accent); margin-inline-start: 0.08em; }
.qualifier { margin: 0; max-width: 28ch; font-size: var(--text-md); line-height: 1.45; color: var(--color-ink-2); }
.hero__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.hero__meta time { color: var(--color-ink-2); }
@media (min-width: 48rem) {
  .hero__stat { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xl); }
  .qualifier { padding-bottom: 0.9em; }
}

/* ── services ────────────────────────────────────────── */
.services { padding-block: 0 var(--space-2xl); }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { background: var(--color-card); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-sm); min-width: 0; }
.card.is-down { border-color: var(--color-down); }
.card.is-degraded { border-color: var(--color-degraded); }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.card__name { font: 700 var(--text-md)/1.2 var(--font-display); letter-spacing: -0.015em; }
.card__desc { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.card__now { margin: 0; color: var(--color-ink); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.card__foot { margin: 0; display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-muted); }
.card__foot .mono { color: var(--color-ink-2); }

.pill { display: inline-flex; align-items: center; gap: 0.35em; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; background: var(--color-paper-2); color: var(--color-ink); }
.pill.is-up > span { color: var(--color-up); }
.pill.is-degraded > span { color: var(--color-degraded); }
.pill.is-down { color: var(--color-down); }
.pill.is-maint > span { color: var(--color-maint); }

.code { display: inline-block; font: 500 var(--text-xs)/1 var(--font-mono); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); white-space: nowrap; }
.code--ok { color: var(--color-muted); }

.bars { display: block; width: 100%; height: 34px; }
.bar--up { fill: var(--color-up); }
.bar--degraded { fill: var(--color-degraded); }
.bar--down { fill: var(--color-down); }
.bar--unknown { fill: var(--color-rule); }

.glyph.is-up { color: var(--color-up); } .glyph.is-degraded { color: var(--color-degraded); }
.glyph.is-down { color: var(--color-down); } .glyph.is-maint { color: var(--color-maint); } .glyph.is-unknown { color: var(--color-unknown); }

/* technical details */
.tech { margin-top: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-card); }
.tech summary { cursor: pointer; padding: var(--space-md) var(--space-lg); list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline; }
.tech summary::-webkit-details-marker { display: none; }
.tech summary::before { content: "+"; font: 500 var(--text-md)/1 var(--font-mono); color: var(--color-accent); width: 1em; }
.tech[open] summary::before { content: "−"; }
.tech__title { font-weight: 700; color: var(--color-ink); }
.tech__sum { font-size: var(--text-sm); color: var(--color-muted); }
.tech__sum[data-state="bad"] { color: var(--color-down); }
.tech__list { list-style: none; margin: 0; padding: 0 var(--space-lg) var(--space-sm); }
.tech__row { display: grid; grid-template-columns: 1.2em minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-sm); align-items: center; padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.tech__name { color: var(--color-ink); font-weight: 600; min-width: 0; }
.tech__desc { color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); }
.tech__num { display: none; font-size: var(--text-sm); color: var(--color-ink-2); text-align: end; }
@media (min-width: 40rem) { .tech__row { grid-template-columns: 1.2em minmax(0, 1fr) auto 5.5rem 5.5rem; } .tech__num { display: block; } }
.tech__note { margin: 0; padding: var(--space-sm) var(--space-lg) var(--space-md); font-size: var(--text-xs); color: var(--color-muted); border-top: var(--rule-hair) solid var(--color-rule); }

/* ── history ─────────────────────────────────────────── */
.history { padding-block: var(--space-xl) var(--space-3xl); }
.history__lede { margin: var(--space-xs) 0 var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.incidents { list-style: none; margin: 0; padding: 0 0 0 var(--space-md); border-inline-start: 2px solid var(--color-rule); display: grid; gap: var(--space-md); }
.incident { position: relative; }
.incident::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-md) - 6px); top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-rule-2); }
.incident.is-open::before { border-color: var(--color-down); background: var(--color-down); }
.incident p { margin: 0; }
.incident__what { color: var(--color-ink); font-weight: 600; }
.incident__meta { font-size: var(--text-sm); color: var(--color-muted); }
.incident--empty { color: var(--color-muted); }

/* ── Ft5 · statement ─────────────────────────────────── */
.foot-stmt { padding-block: var(--space-2xl) var(--space-xl); display: grid; gap: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.foot-stmt__line { margin: 0; font: 700 clamp(1.5rem, 3.5vw + 0.5rem, 2.75rem)/1.2 var(--font-display); letter-spacing: -0.025em; color: var(--color-ink); max-width: 24ch; }
.foot-stmt__line a { text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.foot-stmt__line a:hover { color: var(--color-accent); }
.foot-stmt__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-md); align-items: baseline; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; transition-duration: 150ms !important; }
}