/* ============================================================
   랜딩 공통 — 메인(hub/index.html)·공항이동(movement)·짐배송(carry) 세 페이지
   (Figma 시안004 v1.5 계열, 토큰 체계 B). 세 페이지에 같은 사본으로 있던
   토큰·본문 덮어쓰기·Utilities 를 한 벌로 모은 파일이다.

   쓰는 법: base.css → nav.css → 이 파일 → 페이지 <style> 순서로 불러온다.
     <link rel="stylesheet" href="/hub/css/base.css">
     <link rel="stylesheet" href="/hub/css/nav.css">
     <link rel="stylesheet" href="/hub/css/landing.css">
   reset·a·button·ul 은 base.css 가 맡는다. 토큰 이름이 base.css 와 같은 값
   (--fb·--fd·--card·--accent·--shuttle·--private)은 base.css 것을 그대로 쓴다.

   값 통일(2026-10-08): 행간·자간·줄바꿈·글자 렌더링·.btn 기본형은 base.css(체계 A)를 따른다.
   색(글자·보조·구분선·배경·강조 연한색·그림자)은 랜딩 고유 값을 유지한다 — 아래 :root 가 그
   값이다. --accent-soft 는 base.css 와 이름이 같지만 랜딩에서는 이 값(#E8EEFF)이 이긴다.
   ⚠️ 이 파일에서 A 토큰(--ink·--bg·--ink-soft·--hair-soft …)을 덮지 말 것 — nav.css 가
   그 값으로 GNB 를 그린다.
   ============================================================ */

/* 랜딩 고유 토큰 — 색은 base.css 와 다른 랜딩 값을 그대로 쓴다 */
:root {
  --bg-base: var(--bg);       /* body 기본 — 공항이동·짐배송은 페이지에서 #FFFFFF 로 덮는다 */
  --bg-soft: #FDFCFA;         /* Lighter Cream */
  --bg-warm: #FCFAF8;         /* Categories / Brand 섹션 */
  --bg-mute: #F2F3F4;         /* Why Us 섹션 / lang 토글 */

  --text-prim: #1A1F26;       /* 제목 / Footer 배경 */
  --text-mute: #647488;       /* 작은 desc / sub */
  --text-body: #2E333D;       /* 헤더 설명 본문 */
  --text-on-dark: #FFFFFF;

  --accent-soft: #E8EEFF;     /* Cobalt Tint */
  --accent-deeper: #1E40C9;   /* Hover / active */
  --coral: #E2875C;

  --line: #D9D9D9;            /* 카드·토글 보더 */
  --shadow-rgb: 59, 75, 95;   /* 카드 그림자 — rgba(var(--shadow-rgb), a) */
  --dark: #0F1115;
}

html { overflow-x: clip; width: 100%; }   /* clip = sticky 유지(hidden은 sticky 깨짐) */
/* 행간·자간 등 글자 값은 base.css body 를 따르고, 색만 랜딩 값으로 */
body { width: 100%; background: var(--bg-base); color: var(--text-prim); }
svg { max-width: 100%; display: block; }   /* base.css 는 img 만 — 랜딩은 svg 도 블록으로 */

/* ========================================================
   Utilities
   ======================================================== */
/* 콘텐츠 폭 — base.css .wrap 과 같은 격자: 최대 1280(--maxw), 좌우 여백 clamp(24px,4vw,56px).
   GNB(.nav__in)도 같은 값이라 본문이 로고·메뉴와 같은 세로선에 선다(1440 에서 콘텐츠 1168).
   2026-10-08 이전에는 Figma 값 1216 고정 + 1264px 이하 여백 24·모바일 20 이었다. */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(24px, 4vw, 56px); }
.section { padding: 88px 0; position: relative; }   /* figma 섹션 상하 패딩 88 */
.section--base { background: var(--bg-base); }
.section--soft { background: var(--bg-soft); }
.section--card { background: var(--card); }
.section--dark { background: var(--dark); color: var(--text-on-dark); }
@media (max-width: 768px) { .section { padding: 64px 0; } }

h1, h2, h3, h4 {
  font-family: var(--fb);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 700;
}
h1 { font-size: 56px; line-height: 1.2; letter-spacing: 0.012em; }   /* Figma Hero h1: ls 1.2% */
h2 { font-size: 48px; letter-spacing: 0.012em; }                     /* Figma 타이틀 통일 48 / ls 1.2% */
h3 { font-size: 24px; }                      /* Figma 카드 h3 정확 */
h4 { font-size: 17px; }

/* 헤더 desc 토큰 — figma 2그룹:
   18px(Hero/Compare/Categories) = .lead-lg / 20px(Brand/WhyUs/Dest) = .lead-md */
.lead-lg,
.lead-md {
  font-size: 18px;             /* 섹션 설명: 18px (hero보다 한 단계 낮게) */
  font-weight: 400;
  line-height: 1.3;            /* 행간 130% */
  letter-spacing: 0.012em;
  color: var(--text-body);     /* 통일 컬러 */
}
/* 설명 내 강조 단어 — figma Bold(같은 색, 굵기만) */
.lead-lg strong, .lead-md strong { font-weight: 700; color: inherit; }
.text-mute { color: var(--text-mute); }
.accent-word { color: var(--accent); }

/* Buttons — Figma Hero CTA: 16px Bold */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  height: auto;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-deeper); transform: none;}
.btn--outline {
  background: transparent;
  color: var(--text-prim);
  border: 1px solid #63738A;   /* figma CTA outline stroke (데스크톱·모바일 공통) */
}
.btn--outline:hover { background: var(--text-prim); color: #fff; }
.btn--ghost-white {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 13px;
  padding: 8px 16px;
}
.btn--ghost-white:hover { background: rgba(255,255,255,0.22); }