/* ═══════════════════════════════════════════════════════════════
   hw-layout.css — 화온 랜딩 판식 SSOT (P0 · 2026-09-02 신설)

   지위 : 전담센터 14 랜딩의 컨테이너 폭 · 세로 리듬 · 면 색의 단일 원천.
          값을 새로 정하는 곳은 이 파일뿐이며, 컴포넌트는 클래스만 붙인다.
   근거 : _audit/PROGRAM_전담센터14_전수개편_S61_20260901.md
          _audit/PROGRAM_REV1_인라인CSS_S61_20260902.md
   판정 : 대표님 2026-09-02 승인 — 폭 1200 · 어두운 면 #0F1B30 · 밝은 면 2색

   ★ 이 파일은 아직 어느 지면에도 로드되지 않는다. 적용은 P1 이다.
   ★ 로드 순서는 지면 인라인 <style> 보다 뒤여야 한다(P0.5 추출 완료 후 성립).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── 컨테이너 폭 ─────────────────────────────────────────────
     실측 근거 = 공통 컴포넌트 3지면 동일 계측(2026-09-02)
       hw-tp-section 1240 · hw-hero-std 1240
       hw-la-wrap / hw-specials / hw-lr-section / gn-system 1200
       hw-faq / global-cta 860 · hw-quick-form 704 · hw-rv-sec / hw-rh-wrap 풀블리드
     표준을 1200 으로 두면 1240 계열은 카드 수 불변으로 폭만 좁아진다. */
  --hw-w:        1200px;   /* 표준 — 센터 랜딩 본문 */
  --hw-w-wide:   1400px;   /* 광폭 — 풀블리드 안쪽 재조판 */
  --hw-w-read:    860px;   /* 읽기 — FAQ · 종결 CTA · 산문 */
  --hw-w-form:    704px;   /* 폼 — 2열 입력 */
  --hw-pad-x:      24px;   /* 좌우 안여백 (모바일에서 20px) */

  /* ── 세로 리듬 3단 ───────────────────────────────────────────
     실측 = 지면당 패딩 종류 평균 11.9종. 3단으로 접는다. */
  --hw-y-loose:   120px;   /* 넉넉 — 장면 전환이 필요한 절 */
  --hw-y-base:     96px;   /* 표준 — 대부분의 절 */
  --hw-y-tight:    72px;   /* 조밀 — 목록·배지·보조 절 */

  /* ── 면 색 ───────────────────────────────────────────────────
     어두운 면은 #0F1B30 단일(라이브 다수 · 2026-09-02 정본 승격).
     #1B2A4A 는 텍스트·선·강조용 네이비로 남는다(면 색 아님). */
  --hw-face-dark:  #0F1B30;
  --hw-face-cream: #F5F0EB;
  --hw-face-base:  #FAFAF7;
  --hw-navy:       #1B2A4A;
  --hw-gold:       #C9A96E;
  --hw-orange:     #EA5514;   /* CTA 전용 — 장식에 쓰지 않는다 */
  --hw-on-dark:    #F2F4F8;
  --hw-line:       #E3E0D9;
  --hw-line-dark:  rgba(255,255,255,.14);
}

/* ── 브레이크포인트 3단 ─────────────────────────────────────────
   실측 = 리포 미디어쿼리 18종(768px 52건 · 640px 29 · 1024px 22 · 그 밖 15종).
   표준은 1024 / 768 / 480 셋이며 새 선언은 이 셋만 쓴다.
   기존 15종의 흡수는 P0.6 소관이다. */

/* ═══ 섹션 골격 ═══════════════════════════════════════════════ */
.hw-sec{ padding-block: var(--hw-y-base); }
.hw-sec--loose{ padding-block: var(--hw-y-loose); }
.hw-sec--tight{ padding-block: var(--hw-y-tight); }
.hw-sec--flush-top{ padding-top: 0; }
.hw-sec--flush-bottom{ padding-bottom: 0; }

/* ═══ 컨테이너 ═══════════════════════════════════════════════ */
.hw-in{
  width: 100%;
  max-width: var(--hw-w);
  margin-inline: auto;
  padding-inline: var(--hw-pad-x);
}
.hw-in--wide{ max-width: var(--hw-w-wide); }
.hw-in--read{ max-width: var(--hw-w-read); }
.hw-in--form{ max-width: var(--hw-w-form); }
.hw-in--full{ max-width: none; padding-inline: 0; }

/* ═══ 면 ═════════════════════════════════════════════════════ */
.hw-face-dark{  background: var(--hw-face-dark);  color: var(--hw-on-dark); }
.hw-face-cream{ background: var(--hw-face-cream); color: var(--hw-navy); }
.hw-face-base{  background: var(--hw-face-base);  color: var(--hw-navy); }
.hw-face-dark  h2, .hw-face-dark  h3{ color: #fff; }
.hw-face-cream h2, .hw-face-cream h3,
.hw-face-base  h2, .hw-face-base  h3{ color: var(--hw-navy); }

/* ═══ 카드 그리드 ════════════════════════════════════════════
   실측 = 공통 컴포넌트의 열 수가 2·3·4·5·6·7·8 로 갈린다.
   자동 접힘을 쓰면 폭이 바뀌어도 카드 수가 유지된다. */
.hw-grid{ display: grid; gap: 24px; }
.hw-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hw-grid--gap-sm{ gap: 12px; }
.hw-grid--gap-lg{ gap: 32px; }

@media (max-width: 1024px){
  .hw-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-sec{ padding-block: var(--hw-y-tight); }
  .hw-sec--loose{ padding-block: var(--hw-y-base); }
}
@media (max-width: 768px){
  :root{ --hw-pad-x: 20px; --hw-y-loose: 80px; --hw-y-base: 64px; --hw-y-tight: 48px; }
  .hw-grid{ gap: 16px; }
  .hw-grid--2, .hw-grid--3, .hw-grid--4{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px){
  :root{ --hw-pad-x: 16px; }
}

/* ═══ 판식 규율 ══════════════════════════════════════════════
   목록 4보드가 radius 0 · shadow none 으로 통일돼 있다.
   랜딩 카드도 같은 기준을 따른다. hover 축은 별개이며 census 후 정한다. */
.hw-card{
  background: #fff;
  border: 1px solid var(--hw-line);
  border-radius: 0;
  box-shadow: none;
}
.hw-face-dark .hw-card{
  background: rgba(255,255,255,.04);
  border-color: var(--hw-line-dark);
}

@media (prefers-reduced-motion: reduce){
  .hw-card, .hw-sec{ transition: none !important; }
}