/* =============================================================================
 * 허브 페이지 전용 스타일. 토큰·컴포넌트는 tokens.css(Mia, SaaS 디자인 시스템 정본)를
 * 그대로 쓰고, 여기에는 이 사이트에만 있는 레이아웃만 둔다.
 * 색·간격·모서리를 여기서 새로 만들지 않는다 — 토큰에 있는 것을 쓴다.
 *
 * 무드(DESIGN.md): "현직 16년차 MD가 새벽에 켜놓은 대시보드.
 *                   어두운 화면, 초록 숫자, 군더더기 없는 표."
 * 60/30/10 — 다크 60, 흰 타이포 30, 초록 10. 초록은 바·배지·숫자에만.
 * ========================================================================== */

/* ── 헤더 ──────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-height);
  display: flex; align-items: center;
  background: rgba(13, 21, 18, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.logo { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-extrabold); font-size: var(--fs-body-lg); color: var(--text-white); letter-spacing: var(--tracking-tight); }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-md);
  background: var(--accent-green-bright); color: var(--on-green);
  font-weight: var(--fw-black); font-size: var(--fs-body-sm);
}
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { color: var(--text-muted); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); transition: color var(--duration-fast) var(--ease-out); }
.nav-links a:hover { color: var(--text-white); }
.nav-links a.on { color: var(--accent-green-bright); }
@media (max-width: 600px) { .nav-links { gap: var(--space-4); } .nav-links a { font-size: var(--fs-caption); } }

/* ── 히어로 ────────────────────────────────────────────────── */
.hero { padding: var(--space-20) 0 var(--space-12); }
.hero h1 {
  font-size: var(--fs-hero); font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  margin: var(--space-5) 0 var(--space-5); max-width: 18em;
}
.hero h1 em { font-style: normal; color: var(--accent-cyan); }   /* 강조어는 1~2어절만 */
.hero-sub { font-size: var(--fs-body-lg); color: var(--text-muted); line-height: var(--lh-relaxed); max-width: 34em; }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }

/* ── 실측 숫자 바 — 대시보드 톤의 핵심 ───────────────────────── */
.stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.stat-item { text-align: left; }
.stat-num {
  font-size: var(--fs-h2); font-weight: var(--fw-extrabold);
  color: var(--accent-green-bright); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight);
}
.stat-num .unit { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.stat-num .arrow { color: var(--text-faint); font-weight: var(--fw-regular); }
.stat-label { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-2); line-height: var(--lh-snug); }
@media (max-width: 768px) { .stats-bar { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); } }

/* ── 섹션 헤딩 ─────────────────────────────────────────────── */
.section-heading { margin-bottom: var(--space-8); }
.section-heading h2 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.section-heading p { color: var(--text-muted); margin-top: var(--space-3); max-width: 36em; }

/* ── 라우팅 카드 (홈 4분면) ─────────────────────────────────── */
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 768px) { .route-grid { grid-template-columns: 1fr; } }
.route-card { display: flex; flex-direction: column; }
.route-card .badge { align-self: flex-start; }   /* 세로 플렉스에서 배지가 가로로 늘어나는 것을 막는다 */
.route-card h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin: var(--space-3) 0 var(--space-2); letter-spacing: var(--tracking-tight); }
.route-card p { font-size: var(--fs-body-sm); color: var(--text-muted); line-height: var(--lh-relaxed); }
.route-card .go { margin-top: var(--space-5); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--accent-green-bright); }
.route-card:hover .go { text-decoration: underline; }

/* ── 본문 페이지 ───────────────────────────────────────────── */
.page { padding: var(--space-12) 0 var(--space-16); }
.page-title { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.page-sub { color: var(--text-muted); margin: var(--space-4) 0 var(--space-10); max-width: 36em; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }

.block { margin: var(--space-10) 0; }
.block h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-bottom: var(--space-4);
  border-left: 4px solid var(--accent-green-bright); padding-left: var(--space-4);   /* DESIGN.md 좌측 바 */
}
.block p { color: var(--text-muted); margin: var(--space-3) 0; line-height: var(--lh-relaxed); }
.block strong, .block b { color: var(--text-body); font-weight: var(--fw-bold); }
.list { margin: var(--space-4) 0 0 var(--space-5); color: var(--text-muted); }
.list li { margin: var(--space-2) 0; line-height: var(--lh-relaxed); }
.list li::marker { color: var(--accent-green-bright); }

/* ── 오퍼 카드 (자료·도구·신청) ──────────────────────────────── */
.offer { padding: var(--space-8); margin: var(--space-5) 0; }
.offer-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.offer h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.offer .src { font-size: var(--fs-caption); color: var(--text-faint); margin-top: var(--space-2); line-height: var(--lh-snug); }
.offer p { color: var(--text-muted); margin-top: var(--space-4); line-height: var(--lh-relaxed); }

/* ── 폼 ────────────────────────────────────────────────────── */
form.lead { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
form.lead textarea { min-height: 92px; resize: vertical; line-height: var(--lh-normal); padding: var(--space-3) var(--space-4); }
.form-row { display: flex; gap: var(--space-3); }
.form-row .input { flex: 1; }
@media (max-width: 560px) { .form-row { flex-direction: column; } .form-row .btn { width: 100%; } }
.form-msg { font-size: var(--fs-body-sm); min-height: 1.4em; }
.form-msg.ok { color: var(--accent-green-bright); }
.form-msg.err { color: var(--accent-orange); }
.fine { font-size: var(--fs-caption); color: var(--text-faint); }
.fine a { color: var(--text-muted); text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 표 — "군더더기 없는 표" ─────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: var(--space-5) 0; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); min-width: 420px; }
table.data th, table.data td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-subtle); }
table.data th { color: var(--text-faint); font-weight: var(--fw-semibold); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
table.data td { color: var(--text-muted); }
table.data td b, table.data td strong { color: var(--text-body); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-body); }
table.data tr:last-child td { border-bottom: none; }
table.data tr.total td { border-top: 1px solid var(--border-default); color: var(--text-white); font-weight: var(--fw-bold); }

/* ── 노트 ──────────────────────────────────────────────────── */
.note {
  background: var(--bg-body); border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-green-bright);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6); margin: var(--space-8) 0;
  font-size: var(--fs-body-sm); color: var(--text-muted); line-height: var(--lh-relaxed);
}
.note a { color: var(--accent-green-bright); }
.note a:hover { text-decoration: underline; }

/* ── 푸터 ──────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border-subtle); padding: var(--space-10) 0 var(--space-12); margin-top: var(--space-16); }
.site-footer .container { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--text-muted); font-size: var(--fs-body-sm); }
.site-footer a:hover { color: var(--text-white); }
.site-footer .watermark { margin-left: auto; }
@media (max-width: 600px) { .site-footer .watermark { margin-left: 0; width: 100%; text-align: left; } }