/* ──────────────────────────────────────────────────────────────────────────
   contag.io 디자인 토큰 v1.2 (가이드 1층 · 기초 값) — 🟩 05 §51 확정 · §55 신호색 · 흐름 시간 · 히어로 350vh → 400vh(§77) · §63 상태색(연결됨)
   근거 = docs/13_디자인_가이드.md · 실측 = docs/12 §4 (Function · Serus · Mercury · 1Password, 2026-09-30)
   규칙: 페이지 CSS는 이 변수만 쓴다. 숫자를 직접 적지 않는다.
   ────────────────────────────────────────────────────────────────────────── */

/* 서체 — 제목 리디바탕 / 본문 산세리프 / CI 글자 마루 부리 / 라틴 고정폭(주소 · 번호 · 영문 라벨).
   자체 호스팅 부분 서체(쓰는 글자만 · 만드는 법 tools/make_fonts.py · 합계 약 0.46MB — 이전 외부 CDN 약 2.9MB) · 모두 SIL OFL 1.1 ·
   Pretendard(길형진) · 리디바탕(리디주식회사 🟩 05 §134) · 마루 부리(네이버) · Fragment Mono(Google Fonts). 새 글자를 쓰면 make_fonts.py를 다시 돌린다 */
@font-face { font-family: "Pretendard Variable"; font-weight: 400 800; font-style: normal; font-display: swap; src: url("fonts/Pretendard-subset.woff2") format("woff2"); }
@font-face { font-family: "RIDI Batang"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/RIDIBatang-subset.woff2") format("woff2"); }
@font-face { font-family: "Maru Buri"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/MaruBuri-Light-latin.woff2") format("woff2"); }
@font-face { font-family: "Maru Buri"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/MaruBuri-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Fragment Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/FragmentMono-latin.woff2") format("woff2"); }

:root {
  /* ── 색: 무채(따뜻한 종이) ── 실측 Function 바탕 #FEF9EF · 글자 #2A2B2F(대비 13.5) */
  --c-paper: #FBF8F2;      /* 기본 바탕(면적의 약 60%) */
  --c-sand: #F3EEE4;       /* 번갈아 쓰는 바탕(약 25%) */
  --c-white: #FFFFFF;      /* 카드 · 판 */
  --c-line: #DCD6CB;       /* 가는 선 */
  --c-line-soft: #E9E4DA;
  --c-ink-900: #1F2023;    /* 제목 · 본문 — paper 대비 15.4 */
  --c-ink-700: #4A4B50;    /* 보조 글 — 8.2 */
  --c-ink-500: #6B6C71;    /* 설명 · 캡션 — 4.9(AA) */
  --c-ink-400: #8E8F93;    /* ✕ · 꺼진 상태 · 장식(글자에 쓰지 않음) — 3.1 */

  /* ── 색: 어두운 섹션(페이지 전체 두 곳) ── */
  --c-night: #1B1C1F;
  --c-night-2: #26272B;    /* 어두운 면 위 카드 */
  --c-night-line: #3A3B40;
  --c-on-night: #F3EEE4;   /* night 대비 14.7 */
  --c-on-night-2: #A9A8A3; /* 7.2 */

  /* ── 색: 제품 강조(한 가지) ── 로고 #B51F24 → #F6891F 의 25% 지점. 버튼 · 켜진 상태 · 흐르는 신호 · ○ 에만 */
  --c-accent: #C53A23;     /* 흰 글자 5.25 · paper 위 글자 4.95 */
  --c-accent-press: #A8301C;
  --c-accent-soft: #F7E3DC; /* 강조의 옅은 바탕(아주 드물게) */
  --c-accent-night: #E97420;/* 어두운 면 위 강조 — night 대비 5.7 */
  --g-logo: linear-gradient(135deg, #B51F24, #F6891F); /* 로고에만. 면 · 버튼에 쓰지 않음(05 §50 결정 4) */
  /* ── 신호색(🟩 05 §55 결정 4): 초록 한 가지 — 움직이는 빛(연결 신호)에만. 버튼 · 글자 · 면에 쓰지 않음 ── */
  --c-signal: #2DB36F;
  --c-signal-glow: rgba(45, 179, 111, .35);
  /* ── 상태색(🟩 05 §63): 연결된 결과를 멈춘 모양으로 보일 때만 — 4막 이어진 선 · 원형 · "새로 저장" / 5막 상태 상자. 움직이는 빛은 신호색 ── */
  --c-ok: #1D7246;         /* 연결됨 글자 · 선 · 테두리 — 신호색과 같은 색상(149°)을 짙게. white 5.9 · paper 5.6 · sand 5.1 · ok-soft 위 5.1 */
  --c-ok-soft: #DEF2E7;    /* 연결됨 옅은 바탕 */
  /* 컨택dom(다음 작업): 차가운 쪽 --c-accent 를 이 값으로 바꿔 끼운다 */
  --c-accent-dom: #3F3A9A;
  --g-logo-dom: linear-gradient(135deg, #2E308E, #AB4499);

  /* ── 서체 ── 🟩 05 §51: 본문 = Pretendard · 고정폭 = Fragment Mono(라틴에만) · 🟩 05 §134(10-07): 제목 = 리디바탕("낯설다" 피드백 → 고딕 600 시험 → 리디바탕) · 마루 부리는 "Contag Call" 글자에만 */
  --f-head: "RIDI Batang", "AppleMyungjo", serif;           /* 제목 — 굵기 하나(400) */
  --f-serif: "Maru Buri", "MaruBuri", "AppleMyungjo", serif;  /* CI 글자 "Contag Call" */
  --f-sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, Menlo, monospace;

  /* ── 글자 단계 ── 🟩 05 §134: 제목 = 리디바탕 400(굵기 하나). 이전 = 마루 부리 300 · 400(05 §51) → 고딕 600(v1.3 · 같은 날 바꿈). 한글은 라틴보다 줄 간격을 넉넉히 */
  --t-display: 400 clamp(40px, 5vw, 68px)/1.18 var(--f-head);    /* 0막 · CTA 한 번씩 */
  --t-h2: 400 clamp(30px, 3.4vw, 48px)/1.26 var(--f-head);       /* 섹션 제목(두 줄) */
  --t-h3: 400 clamp(21px, 1.9vw, 26px)/1.36 var(--f-head);       /* 카드 · 판 제목 */
  --t-lead: 400 clamp(17px, 1.35vw, 19px)/1.7 var(--f-sans);     /* 섹션 설명 한두 줄 */
  --t-body: 400 16px/1.72 var(--f-sans);
  --t-small: 400 14px/1.6 var(--f-sans);
  --t-strong: 600 16px/1.5 var(--f-sans);                        /* 목록 머리 · 단계 이름 */
  --t-label-ko: 600 13px/1.4 var(--f-sans);                      /* 한글 작은 라벨 */
  --t-label: 400 12px/1.4 var(--f-mono);                         /* 영문 · 숫자 라벨 — 대문자 · 자간 .1em(Function 실측 11px/0.1em) */
  --t-address: 400 17px/1 var(--f-mono);                         /* 주소 알약 */
  --ls-display: -0.02em;
  --ls-h2: -0.015em;
  --ls-label: 0.1em;

  /* ── 여백(4의 배수) ── 실측 Function 섹션 위아래 88px · 글 폭 640 · Serus 판 옆 24px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(72px, 9vw, 120px);
  --gutter: clamp(16px, 3vw, 24px);
  --w-page: 1200px;       /* 본문 틀 */
  --w-wide: 1360px;       /* 사진 판 · 넓은 그림 */
  --w-text: 640px;        /* 설명 글 한 줄 폭 */
  --w-title: 820px;       /* 두 줄 제목 폭 */

  /* ── 모서리 ── 실측: Function 6 · 12 · 22 · 알약 / Serus 12 · 16 · 32 · 알약 */
  --r-sm: 6px;            /* 작은 표시 · 입력 */
  --r-md: 12px;           /* 카드(가장 많이) */
  --r-lg: 32px;           /* 사진 판 */
  --r-pill: 999px;        /* 버튼 · 주소 알약 · 장소 표시 */

  /* ── 그림자 ── 거의 쓰지 않는다(실측: 네 곳 모두 드묾) */
  --sh-1: 0 1px 2px rgba(31, 32, 35, .06);
  --sh-2: 0 18px 40px rgba(31, 32, 35, .14);   /* 떠 있는 것(기기 틀 · 겹친 카드)만. Function 실측 값 */

  /* ── 움직임 ── 곡선 1 · 시간 3(05 §50 결정 3). 실측 Serus · Function .4,0,.2,1 · 0.15~0.3s */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --d-1: 180ms;           /* 누름 · 올림(hover) */
  --d-2: 420ms;           /* 나타나기 */
  --d-3: 800ms;           /* 판 펼침 · 장면 전환 */
  --d-4: 1200ms;          /* 선을 따라 흐르는 빛(🟩 05 §55 결정 3′) */
  --reveal-y: 12px;       /* 나타나기: 아래에서 12px */
  --hero-track: 700vh;    /* 0막 스크롤 길이 — Mercury 실측 250vh → 단계마다 머무는 구간을 넣어 350vh(🟩 05 §55 결정 1) → 4단계(웹 랜딩 추가)로 400vh(🟩 05 §77) */

  /* ── 선 · 아이콘 ── 🟩 Lucide · 24 격자 · 선 1.5 · 둥근 끝 */
  --hair: 1px;
  --icon-stroke: 1.5;
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; --reveal-y: 0px; }
}