/* ==========================================================================
   크라운 디자인 토큰 — 시안 v3 에디토리얼 · 시네마틱 (docs/05-디자인시스템.md)
   층 1 원시값(--c-*, --fs-*, --sp-* …)  →  층 2 의미값(--bg, --fg, --accent …)  →  층 3 구간 테마(.t-ink · .t-paper …)
   컴포넌트는 층 2(의미값)만 쓴다. 색을 바꿀 때는 층 1, 구간 분위기를 바꿀 때는 층 3만 고친다.
   ========================================================================== */
:root {
  /* ── 1-1 색 원시값 ── */
  --c-ink-950: #070708;
  --c-ink-900: #0b0b0c;   /* 잉크 — 첫 화면 · 지원 시스템 · 인사말 · 하단 */
  --c-ink-800: #151517;   /* 잉크 면 */
  --c-ink-700: #232326;
  --c-ink-600: #34343a;
  --c-paper-50: #fbfaf8;
  --c-paper-100: #f4f2ee; /* 종이 — 소개 · 성장 · FAQ */
  --c-paper-200: #ebe7e1; /* 진한 종이 — 합류 */
  --c-paper-300: #ddd7cf;
  --c-white: #ffffff;
  --c-crimson-700: #a50d26;
  --c-crimson-600: #c8102e; /* 강조색은 크림슨 하나 */
  --c-crimson-500: #e0213f;
  --c-crimson-300: #ff5d74; /* 잉크 위 작은 글씨용 크림슨 (대비 4.5:1 이상) */
  --c-crimson-50: #fbeef0;
  --c-gold-500: #b8925a;    /* 골드는 왕관 심볼에만 */
  --c-gold-300: #e2c493;
  --c-gray-ink: #a3a3a8;    /* 잉크 위 보조 글자 (8:1) */
  --c-gray-paper: #5d5a57;  /* 종이 위 보조 글자 (6.3:1) */

  /* 상태색 (관리자 · 알림) — 색만으로 구분하지 않고 글자와 함께 쓴다 */
  --c-tone-new: #c8102e;
  --c-tone-review: #8a6a2a;
  --c-tone-contact: #1f5fae;
  --c-tone-consult: #21703f;
  --c-tone-hold: #a06400;
  --c-tone-contract: #5b34b8;
  --c-tone-closed: #5d5a57;
  --c-ok: #21703f;
  --c-ok-bg: #e7f2ea;
  --c-warn: #8a5a00;
  --c-warn-bg: #fff6e0;
  --c-danger: #a50d26;
  --c-danger-bg: #fbeef0;
  --c-info: #1f5fae;
  --c-info-bg: #e9f0fa;

  /* ── 1-2 글꼴 ── */
  --font-sans: "Noto Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-wide: "Archivo", "Noto Sans KR", sans-serif;   /* 확장형 영문 — 번호 · 영문 소제목 · 큰 띠 문구 */
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", serif; /* 인사말 · 인용 */
  --font-mark: "Syncopate", "Archivo", sans-serif;       /* 워드마크 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wide-stretch: 125%;

  /* 글자 크기 — 화면 폭에 따라 부드럽게 (휴대폰 → PC) */
  --fs-mega: clamp(64px, 11vw, 150px);   /* JOIN CROWN · 하단 워드마크 */
  --fs-band: clamp(46px, 7.5vw, 96px);   /* 흐르는 띠 */
  --fs-display: clamp(36px, 5.6vw, 76px);/* 첫 화면 제목 */
  --fs-h1: clamp(32px, 4.2vw, 56px);     /* 섹션 제목 */
  --fs-h2: clamp(24px, 2.6vw, 32px);
  --fs-h3: clamp(19px, 1.8vw, 26px);
  --fs-h4: 18px;
  --fs-stat: clamp(40px, 4.2vw, 52px);
  --fs-quote: clamp(28px, 3.4vw, 44px);
  --fs-lede: clamp(15px, 1.4vw, 18px);
  --fs-body: 16px;
  --fs-sm: 14.5px;
  --fs-xs: 13px;
  --fs-2xs: 12px;
  --fs-3xs: 11px;

  --lh-tight: 1.12;
  --lh-title: 1.22;
  --lh-snug: 1.45;
  --lh-body: 1.7;
  --lh-loose: 1.9;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  --ls-display: -0.04em;
  --ls-title: -0.03em;
  --ls-tight: -0.015em;
  --ls-wide: 0.02em;
  --ls-caps: 0.14em;

  /* ── 1-3 간격 (4px 단위) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-24: 96px;
  --section-y: clamp(84px, 10vw, 140px); /* 섹션 위아래 */
  --wrap: 1240px;                          /* 본문 최대 폭 */
  --wrap-narrow: 760px;                    /* 신청서 · 글 */
  --gutter: clamp(20px, 4vw, 48px);        /* 좌우 여백 */

  /* ── 1-4 모양 ── 에디토리얼: 기본은 각진 모서리, 버튼만 알약 */
  --r-0: 0;
  --r-xs: 3px;
  --r-sm: 6px;
  --r-pill: 999px;
  --bw: 1px;
  --bw-strong: 2px;

  /* ── 1-5 컨트롤 높이 ── */
  --ctl-sm: 40px;
  --ctl-md: 48px;
  --ctl-lg: 58px;

  /* ── 1-6 그림자 · 움직임 · 층 ── */
  --shadow-pop: 0 30px 60px -20px rgba(0, 0, 0, .55);
  --shadow-card: 0 18px 40px -26px rgba(20, 10, 10, .35);
  --dur-fast: .18s;
  --dur: .35s;
  --dur-slow: .8s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --z-header: 20;
  --z-mbar: 30;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* ── 층 2 · 3: 구간 테마 — 의미값을 구간마다 다시 정한다 ──
   .t-ink(잉크) · .t-paper(종이) · .t-paper2(진한 종이) · .t-crimson(크림슨 띠) · .t-white(카드 · 입력 바탕)
   종이 계열(.t-paper · .t-paper2 · .t-white)은 의미값 전체를 함께 정하고, 바탕만 아래에서 다시 바꾼다 —
   잉크 안에 종이 구간이 들어와도 글자색을 물려받지 않게 (2026-10-15 합류 구간 글자 안 보임 수정) */
:root,
.t-paper,
.t-paper2,
.t-white {
  --bg: var(--c-paper-100);
  --bg-raised: var(--c-white);
  --bg-sunken: var(--c-paper-200);
  --fg: var(--c-ink-900);
  --fg-muted: var(--c-gray-paper);
  --fg-faint: #8a857f;
  --line: rgba(11, 11, 12, .14);
  --line-strong: var(--c-ink-900);
  --accent: var(--c-crimson-600);
  --accent-hover: var(--c-crimson-500);
  --accent-text: var(--c-crimson-600);
  --accent-soft: var(--c-crimson-50);
  --on-accent: var(--c-white);
  --field-bg: var(--c-white);
  --field-line: rgba(11, 11, 12, .22);
  --field-line-focus: var(--c-ink-900);
  --focus-ring: var(--c-crimson-600);
  --overlay: rgba(11, 11, 12, .55);
}
.t-paper2 {
  --bg: var(--c-paper-200);
  --bg-raised: var(--c-paper-50);
  --bg-sunken: var(--c-paper-300);
}
.t-white {
  --bg: var(--c-white);
  --bg-raised: var(--c-paper-50);
  --bg-sunken: var(--c-paper-100);
}
.t-ink {
  --bg: var(--c-ink-900);
  --bg-raised: var(--c-ink-800);
  --bg-sunken: var(--c-ink-950);
  --fg: var(--c-white);
  --fg-muted: var(--c-gray-ink);
  --fg-faint: #75757b;
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .6);
  --accent: var(--c-crimson-600);
  --accent-hover: var(--c-crimson-500);
  --accent-text: var(--c-crimson-300);
  --accent-soft: rgba(224, 33, 63, .14);
  --on-accent: var(--c-white);
  --field-bg: var(--c-ink-800);
  --field-line: rgba(255, 255, 255, .24);
  --field-line-focus: var(--c-white);
  --focus-ring: var(--c-crimson-300);
  --overlay: rgba(0, 0, 0, .7);
  color-scheme: dark;
}
.t-crimson {
  --bg: var(--c-crimson-600);
  --bg-raised: var(--c-crimson-700);
  --fg: var(--c-white);
  --fg-muted: rgba(255, 255, 255, .86);
  --line: rgba(255, 255, 255, .3);
  --line-strong: var(--c-white);
  --accent: var(--c-white);
  --accent-hover: var(--c-paper-100);
  --accent-text: var(--c-white);
  --on-accent: var(--c-ink-900);
  --focus-ring: var(--c-white);
}
.t-ink, .t-paper, .t-paper2, .t-crimson, .t-white { background: var(--bg); color: var(--fg); }