/**
 * Unified Hero Component — 4page-ui-unification Phase 0
 * 설계 섹션 3-C 전체 반영
 * 스코프: .page-prep / .page-tc / .page-bd / .page-hs 만 활성
 */

.page-prep .hero,
.page-tc .hero,
.page-bd .hero,
.page-hs .hero {
  position: relative;
  background: var(--ink-900);
  color: var(--white);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  border-top: 4px solid var(--page-accent);  /* Q1-D accent line */
}

.page-prep .hero-inner,
.page-tc .hero-inner,
.page-bd .hero-inner,
.page-hs .hero-inner {
  text-align: center;  /* D6 2층 구조 */
}

.page-prep .hero-badge,
.page-tc .hero-badge,
.page-bd .hero-badge,
.page-hs .hero-badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: var(--space-5);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 13px;
  color: var(--white);
}

.page-prep .hero-title,
.page-tc .hero-title,
.page-bd .hero-title,
.page-hs .hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--white);
}

.page-prep .hero-title em,
.page-tc .hero-title em,
.page-bd .hero-title em,
.page-hs .hero-title em {
  font-style: normal;
  color: var(--page-accent-bright);  /* 2026-04-16 — 다크 배경 WCAG AA 대비 확보 */
}

.page-prep .hero-lead,
.page-tc .hero-lead,
.page-bd .hero-lead,
.page-hs .hero-lead {
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--ink-300);
  margin: 0 auto var(--space-6);
  max-width: 640px;
  line-height: 1.6;
}

.page-prep .hero-stats,
.page-tc .hero-stats,
.page-bd .hero-stats,
.page-hs .hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-7);
}

.page-prep .hero-stat,
.page-tc .hero-stat,
.page-bd .hero-stat,
.page-hs .hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-prep .hero-stat .num,
.page-tc .hero-stat .num,
.page-bd .hero-stat .num,
.page-hs .hero-stat .num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
}

.page-prep .hero-stat .lbl,
.page-tc .hero-stat .lbl,
.page-bd .hero-stat .lbl,
.page-hs .hero-stat .lbl {
  font-size: 13px;
  color: var(--ink-400);
  margin-top: var(--space-1);
}

@media (max-width: 640px) {
  .page-prep .hero,
  .page-tc .hero,
  .page-bd .hero,
  .page-hs .hero {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .page-prep .hero-stats,
  .page-tc .hero-stats,
  .page-bd .hero-stats,
  .page-hs .hero-stats {
    gap: var(--space-5);
  }
  .page-prep .hero-stat .num,
  .page-tc .hero-stat .num,
  .page-bd .hero-stat .num,
  .page-hs .hero-stat .num {
    font-size: 28px;
  }
}