/* ============================================================================
   components.css — 브랜드 연속성 공용 컴포넌트 레이어.
   tokens-base/tokens-moods 위, storefront.css **앞**에 로드(base 레이어). landing.css의
   시그니처 프리미티브(kicker eyebrow, 헤어라인 리듬)를 storefront/셀러/운영자가 공유해,
   랜딩(Swiss)에서 앱으로 넘어갈 때 정체성이 끊기지 않게 한다.
   원칙: 여기 정의는 신규 공용 클래스만(기존 storefront.css 클래스 미override) — additive·무충돌.
   이후 서브 증분에서 storefront.css의 중복 규칙을 이 레이어로 수렴시킨다.
   ============================================================================ */

/* ── kicker — 섹션/히어로 상단 eyebrow 라벨(랜딩 .kicker와 통일한 브랜드 보이스) ── */
.kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--color-primary-strong);
}

/* ── eyebrow 헤어라인 섹션 헤드 — 제목 위 얇은 잉크 룰 + kicker(스위스 인덱스 리듬).
   기존 .section__head를 건드리지 않는 opt-in 래퍼. 도입할 섹션에만 부착. ── */
.section-eyebrow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.section-eyebrow__rule {
  width: var(--space-8);
  height: 2px;
  background: var(--color-ink);
  border: 0;
  margin: 0 0 var(--space-1);
}

/* ── 테스트 환경 배너 — TEST_ENV 인스턴스 전용(실 결제 아님 고지). on-warning=어두운 텍스트로 AA. ── */
.test-banner {
  background: var(--color-warning);
  color: var(--color-on-warning);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-4);
}