:root {
  --site-ink: #18181b;
  --site-muted: #52525b;
  --site-line: #e4e4e7;
  --site-paper: #ffffff;
  --site-bg: #fafaf9;
  --site-brand: #4f46e5;
  --site-foot: #09090b;
  --site-foot-ink: #a1a1aa;
  --site-space: 8px;
  --site-bar: 80px;
  --site-wide: 1120px;
  --site-form: 640px;
}

.site-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  min-height: var(--site-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--site-space) * 2);
  padding: 0 calc(var(--site-space) * 3);
  background: var(--site-paper);
  border-bottom: 1px solid var(--site-line);
  box-sizing: border-box;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: calc(var(--site-space) * 1.5);
  color: var(--site-ink);
  text-decoration: none;
  font-size: 20px;
  line-height: 1.2;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.site-logo img { height: 40px; width: auto; }
.site-logo strong { font-weight: 800; letter-spacing: -0.02em; }
.site-logo em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: #4338ca;
}
.site-nav { display: flex; flex-wrap: wrap; gap: var(--site-space); align-items: center; }
.site-nav a,
.site-nav button {
  color: var(--site-ink);
  background: transparent;
  border: 0;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  min-height: 44px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.site-foot {
  margin-top: calc(var(--site-space) * 6);
  padding: calc(var(--site-space) * 4) calc(var(--site-space) * 3) calc(var(--site-space) * 5);
  background: var(--site-foot);
  color: var(--site-foot-ink);
  font-size: 16px;
  line-height: 1.65;
}
.site-foot a { color: #fff; text-decoration: none; margin-right: 16px; }
.site-foot p { margin: 8px 0; }
.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-4, .stat-grid-5 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--site-space) * 1.5); }
.stat-card { padding: 16px; border: 1px solid var(--site-line); border-radius: 12px; background: var(--site-paper); font-size: 16px; }
.stat-hint, .chart-caption, .notice { font-size: 14px; color: var(--site-muted); }
.bar-row { display: grid; grid-template-columns: 7.5rem 1fr 6.5rem; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 16px; }
.bar-row .track { height: 10px; background: #eef2ff; border-radius: 999px; overflow: hidden; }
.bar-row .fill { display: block; height: 100%; background: var(--site-brand); border-radius: 999px; }
.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-bar { height: auto; align-items: flex-start; flex-wrap: wrap; padding: 12px 16px; }
  .site-nav { width: 100%; }
  .site-hero h1 { font-size: 24px; }
}