/* =============================================================
   토큰 — 색 · 글자 · 간격 · 모션. 값을 바꾸려면 여기부터.
   ============================================================= */
:root{
  /* --- 색 (컬러 A) --- */
  --ink:#000000;
  --ink-60:#666666;
  --ink-15:rgba(0,0,0,.15);
  --ink-08:rgba(0,0,0,.08);
  --accent:#E8352B;
  --accent-deep:#C42A21;  /* 빨간 버튼에 마우스를 올렸을 때 */
  --cream:#F2F0E9;
  --white:#FFFFFF;
  --load:#111111;
  --veil:.42;            /* 섹션 대표 이미지 위에 얹는 검은 레이어 농도 */
  --on-dark-60:rgba(255,255,255,.6);
  --on-dark-80:rgba(255,255,255,.8);

  /* --- 글꼴 --- */
  --f-latin:'Geologica','Paperlogy','Pretendard',system-ui,sans-serif;   /* 영문 디스플레이 */
  --f-display:'Paperlogy','Pretendard',system-ui,sans-serif;             /* 한글 디스플레이 */
  --f-body:'Pretendard',system-ui,-apple-system,'Malgun Gothic',sans-serif;

  /* --- 글자 크기 --- */
  --t-hero:clamp(40px,7vw,88px);
  --t-sec:clamp(28px,4.4vw,52px);
  --t-card:clamp(20px,2.4vw,32px);
  --t-lead:17px;
  --t-body:15px;
  --t-label:13px;
  --t-mini:11px;

  /* --- 굵기 --- */
  --w-display:800;
  --w-bold:700;
  --w-body:400;

  /* --- 간격 --- */
  --pad-x:clamp(16px,4vw,40px);
  --wrap:1236px;
  --wrap-wide:1440px;
  --sec-y:clamp(56px,7vw,96px);
  --main-h:82px;        /* 데스크톱 헤더 한 줄 */
  --header-h:82px;
  --header-h-m:100px;   /* 1279px 이하 : 로고줄 56 + 메뉴줄 44 */
  --nav-h-m:44px;

  /* --- 모션 : 이 여섯 값 밖으로 나가지 않습니다 --- */
  --d-hover:.1s;
  --d-switch:.2s;
  --d-enter:.3s;
  --d-settle:.5s;
  --d-slow:1s;
  --d-out:1.5s;
  --e-out:cubic-bezier(0,0,.2,1);
  --stagger:.1s;
}

@media (max-width:1279px){
  :root{ --header-h:var(--header-h-m); }
}