:root {
  --site-ink: var(--nr-site-ink);
  --site-muted: var(--nr-site-muted);
  --site-line: var(--nr-site-line);
  --site-paper: var(--nr-site-paper);
  --site-bg: var(--nr-site-bg);
  --site-brand: var(--nr-site-accent);
  --site-foot: var(--nr-site-foot);
  --site-foot-ink: var(--nr-site-foot-ink);
  --site-space: 8px;
  --site-bar: var(--nr-site-bar);
  --site-wide: var(--nr-site-wide);
  --site-form: 640px;
}
.site-hero { margin: 0 0 calc(var(--site-space) * 3); }
.site-hero h1 {
  margin: 0 0 calc(var(--site-space) * 2);
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--site-ink);
}
.site-hero .lede,
.site-lead { margin: 0 0 calc(var(--site-space) * 2); font-size: 18px; line-height: 1.65; color: var(--site-muted); }
.site-kicker { margin: 0 0 var(--site-space); font-size: 14px; font-weight: 700; color: var(--site-brand); }
.site-page {
  max-width: var(--site-wide);
  margin: 0 auto;
  padding: calc(var(--site-bar) + var(--site-space) * 4) calc(var(--site-space) * 3) calc(var(--site-space) * 6);
  box-sizing: border-box;
}
.site-card {
  background: var(--site-paper);
  border: 1px solid var(--site-line);
  border-radius: 16px;
  padding: calc(var(--site-space) * 3);
}
.site-btn,
.cta-secondary,
.site-nav .site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--site-line);
  background: var(--site-paper);
  color: var(--site-ink);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.site-btn-primary,
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--site-brand);
  background: var(--site-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.cta-row { display: flex; flex-wrap: wrap; gap: calc(var(--site-space) * 1.5); margin: calc(var(--site-space) * 2) 0; }
body.site-doc {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: Pretendard, "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
.stat-grid, .stat-grid-4, .stat-grid-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: start;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  padding: 20px;
  border: 1px solid var(--site-line);
  border-radius: 20px;
  background: var(--site-paper);
}
.stat-label { font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--nr-site-muted); }
.stat-num { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--site-ink); font-variant-numeric: tabular-nums; }
.stat-of { margin-left: 4px; font-size: 17px; font-weight: 500; color: var(--nr-site-muted); }
.stat-hint, .chart-caption, .notice { font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--nr-site-muted); }
.chart-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: var(--nr-site-wide);
  margin: 24px 0;
}
.chart-card {
  max-width: var(--nr-site-wide);
  margin: 0 0 16px;
  padding: 20px;
  background: var(--nr-site-paper);
  border: 1px solid var(--nr-site-line);
  border-radius: 20px;
}
.chart-pair .chart-card { margin: 0; }
.chart-card h3 { margin: 0 0 4px; font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--nr-site-ink); }
.chart-card .chart-caption { margin: 0 0 12px; }
.bar-chart { display: flex; flex-direction: column; gap: 4px; }
.bar-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(7em, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: auto;
  min-height: 0;
  margin: 0;
  font-size: 15px;
  overflow: visible;
}
.bar-row .track {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  height: 8px;
  background: var(--nr-site-soft);
  border-radius: 999px;
  z-index: 0;
}
.bar-row .fill { display: block; height: 8px; background: var(--nr-site-accent); border-radius: 999px; }
.bar-row.is-self .fill { background: var(--nr-site-accent); }
.bar-row.is-other .fill { background: var(--nr-site-chart-other); }
.bar-row span { position: relative; z-index: 1; }
.bar-row.is-zero { color: var(--nr-site-muted); }
.bar-row.is-zero .track { background: transparent; }
.bar-row.is-zero .fill { width: 0 !important; background: transparent; }
.past-list { list-style: none; padding: 0; margin: 0; }
.past-list a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--site-line); font-size: 16px; }
@media (max-width: 720px) {
  .site-hero h1 { font-size: 26px; }
  .stat-grid, .stat-grid-4, .stat-grid-5 { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 20px; }
  .chart-pair { grid-template-columns: 1fr; }
}