/* ============================================================================
   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);
}

/* ── 스튜디오 미리보기 배너 — 저장 전 편집본을 보고 있다는 고지. .test-banner 와 같은 경고 톤이되
   화면 상단에 붙어 스크롤을 따라온다(어느 위치에서든 "이건 미리보기"가 보여야 한다).
   ⚠️ 인라인 스타일로 두면 무드 토큰을 못 타고 AA 회귀 테스트도 이 색을 보지 못한다. ── */
.preview-banner {
  position: sticky;
  top: 0;
  /* ⚠️ --z-sticky(200) 를 쓰면 안 된다. .site-header 가 같은 200 인데 배너는 <main> 안 =
     DOM 상 뒤라 동점에서 배너가 이겨 헤더(브랜드·검색·장바구니)를 덮는다.
     --z-dropdown(100) 이 인라인 시절의 50 과 같은 서열 — 본문 위, 헤더 아래. */
  z-index: var(--z-dropdown);
  background: var(--color-warning);
  color: var(--color-on-warning);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-4);
}