/*
 * 소개 랜딩 — DESIGN-POLICY §9.F(한결 v1.5).
 *
 * §9.F.1 Hero 6요소 중 **4(CTA cluster)·5(Ghost CTA)는 두지 않는다**.
 *   5 = §9-A.9 Ghost CTA 폐지 전환에 따라 신규 앱은 추가하지 않는다(profile·sangkwon 선례).
 *   4 = 이 앱은 아직 들어갈 수 있는 화면이 없다. 누를 곳이 없는데 CTA 를 두면 그게 유령 버튼이다.
 *       activation 승격으로 발급 경로가 켜지는 날 §9-A.6 "수업 참여하기 / 수업 만들기" 를 넣는다.
 * 그 자리에는 §9.1 "히어로 텍스트만 집중" 을 지키는 한 줄짜리 상태 고지를 둔다(카드·보더 없음).
 * §9.F.2 제외 요소(카드 그리드·how-it-works·후기·통계·2단 그리드)는 하나도 두지 않는다.
 *
 * 치수는 profile `client/src/style.css` 의 hero 규격과 같은 값이다.
 */
@import "./tokens.css";

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-synthesis: none;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* service-nav.js .navbar 치수 — 데스크톱 56+46+1=103px / 모바일(≤767px) 56+1=57px.
   토큰이 아니라 그 컴포넌트의 실측 치수라 리터럴로 두되 출처를 여기 적는다(profile 과 같은 근거). */
.nav-sticky { position: sticky; top: 0; z-index: 50; }
.site-nav { display: flex; align-items: center; justify-content: space-between; min-height: 57px; padding: 0 32px; border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.96); }
.site-nav a { color: var(--color-text-primary); font-weight: 750; text-decoration: none; }
.site-nav span { color: var(--color-text-muted); font-size: 14px; font-weight: 650; }

.hero-page {
  display: flex;
  min-height: calc(100vh - 103px);
  padding: 64px 32px;
  background: var(--color-surface);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.hero-inner { width: 100%; max-width: 880px; }

/* ① 영문 라벨 — §9.C-5 */
.hero-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ② 제목 — §9.C-2, 2줄. §9.C-2.1 완화(-0.02em): 한 줄 12자 이상 한글 */
.hero-title {
  margin: 24px 0 0;
  word-break: keep-all;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  /* §9.C-2 --type-hero-size 는 clamp(48px, 7vw, 88px). 모바일 하한 48px 로는 이 헤드라인이
     390px 폭에서 3줄로 쪼개져 「돕니다.」가 고아 줄이 된다 — §9.C-2.1 완화 조건(한 줄 12자 이상
     한글)에 해당하므로 하한만 30px 로 낮춰 2줄을 지킨다(sangkwon 선례). 상한·weight·leading 은 토큰 그대로. */
  font-size: clamp(30px, 7vw, 88px);
  font-weight: 600;   /* §9.C-2 --type-hero-weight */
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* ③ 캡션 — §9.C-2 body landing 18px / max-w 640 */
.hero-caption {
  max-width: 640px;
  word-break: keep-all;
  margin: 24px auto 0;
  color: var(--color-text-body);
  font-size: 18px;
  line-height: 1.6;
}

/* CTA 자리를 대신하는 상태 고지 — pill 라벨 + 한 줄. */
.hero-status { margin: 40px auto 0; max-width: 640px; }
.hero-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn-landing);
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.hero-status-note {
  margin: 16px 0 0;
  word-break: keep-all;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .hero-page { min-height: calc(100vh - 57px); padding: 48px 20px; }
}