/* arc-card — 디자인 시스템 정본 (3단계). 페이지는 이 파일을 <link> 로 싣고 style.css 는 var() 만 쓴다.
 *
 * 이름은 Tailwind 4 @theme 이름공간 그대로다. 브라우저는 @theme 를 모르므로 여기서는 :root 에 두고,
 * 서비스로 승급할 때 `:root {` 를 `@theme {` 로 바꿔 globals.css 에 옮긴다(값은 손대지 않는다).
 *
 * 층 셋 — 슬레이트(책상) · 시트(서류) · 카드(물체). 카드는 슬레이트 위에만 놓인다(bg-deep 위 흑 카드 2.02:1 — 금지).
 * 그라데이션과 물체 그림자는 카드 재질(--color-plate-* · --shadow-card*)에만 쓴다 — UI 면에는 0.
 */
:root {
  /* ── 색: 슬레이트(책상) ─────────────────────────────────────────── */
  --color-bg: #58626d;            /* 차가운 중간 슬레이트 — 분필 카드 4.32:1 · 흑 카드 3.17:1 둘 다 가장자리를 지키는 톤 */
  --color-bg-deep: #3d454e;       /* 꼬리 띠 · 신청 페이지 머리 띠 — 카드를 올리지 않는다 */
  --color-ink: #f3f5f7;           /* 슬레이트 위 본문·제목 5.68:1 · bg-deep 위 8.90:1 */
  --color-ink-muted: #dde1e5;     /* 슬레이트 위 보조 글 4.72:1 — 이보다 흐린 글자는 없다 */
  --color-line: #b3bcc4;          /* 치수선·호·눈금·구분선 (비텍스트, 슬레이트 위 3.22:1 · bg-deep 위 5.05:1) */
  --color-line-faint: #7c8691;    /* 5° 잔눈금 · 표 안 행 구분 (장식, 대비 요구 없음) */
  --color-focus: #ffffff;         /* 슬레이트 위 포커스 링 6.21:1 */

  /* ── 색: 시트(서류) — 비교표 · 명세 · 적립표 · 유의사항 · 신청서 ─── */
  --color-surface: #e7eaed;       /* 차가운 회백 (h≈248°, 종이색 아님) */
  --color-ink-sheet: #161b20;     /* 시트 위 본문 14.35:1 */
  --color-ink-sheet-muted: #4a535c; /* 시트 위 작은 글씨·보조 6.48:1 — 유의사항도 이 이상 */
  --color-rule-sheet: #c3cad1;    /* 시트 안 가는 선 (장식) */
  --color-accent-ink: #0a5c7a;    /* 시트 위 강조 글자·적립 막대(ARC 180 행·숫자) 6.16:1 — 심해 시안(h≈230°) */
  --color-focus-sheet: #161b20;   /* 시트 위 포커스 링 14.35:1 */

  /* ── 색: 강조 — 페이지의 유일한 색 = ARC 180 의 재질 (G1 2회차: 주황 → 형광 시안) ─ */
  --color-accent: #80f4ff;        /* 형광 시안. 슬레이트 위 4.82:1 · bg-deep 위 7.55:1 — ARC 180 을 가리키는 글자·선·호 조각. 시트 위에서는 1.09:1 이라 쓰지 않는다(→ accent-ink) */

  /* ── 색: 카드 재질 (plate = 카드 판) ──────────────────────────── */
  --color-plate-chalk: #d3d8dc;   /* ARC 90 무광 */
  --color-ink-chalk: #1f252b;     /* 분필 판 위 글자 10.77:1 */
  --color-plate-satin: #80f4ff;   /* ARC 180 반광(아노다이즈 시안) — --color-accent 와 같은 값 */
  --color-plate-satin-hi: #d2fcff; /* 반광 광택 띠(재질 그라데이션 안에서만) */
  --color-plate-satin-lo: #35bfd3; /* 반광 그늘(재질 그라데이션 안에서만) */
  --color-ink-satin: #0b1a20;     /* 시안 판 위 글자 13.78:1 */
  --color-plate-onyx: #0a0b0d;    /* ARC 360 흑 */
  --color-plate-onyx-line: #1e2227; /* 흑 판에 새긴 동심원 호 (장식) */
  --color-ink-onyx: #c9cfd5;      /* 흑 판 위 글자 12.4:1 (은빛) */
  --color-edge-light: rgb(255 255 255 / 0.16); /* 카드 윗가장자리 1px 빛 — 반광·흑 판의 윤곽 */

  /* ── 서체 ─────────────────────────────────────────────────────── */
  /* Epilogue 는 라틴뿐 — 한글은 자동으로 Pretendard 로 넘어간다. 한글 제목은 --font-heading 을 쓴다 */
  --font-display: "Epilogue", "Pretendard Variable", system-ui, sans-serif;  /* 워드마크·카드 이름·각도·큰 숫자 */
  --font-heading: "Pretendard Variable", system-ui, sans-serif;             /* 한글 제목 (700) */
  --font-sans: "Pretendard Variable", system-ui, -apple-system, sans-serif;  /* 본문·UI·표 */

  /* ── 글자 크기 (한글 본문은 17px — 라틴 기준 16 보다 한 단계 크게) ─── */
  --text-xs: 0.875rem;            /* 14 — 가장 작은 글자. 유의사항·캡션·꼬리표. 이보다 작게 쓰지 않는다 */
  --text-xs--line-height: 1.7;
  --text-sm: 0.9375rem;           /* 15 — UI · 표 · 이름표 한 줄 혜택 */
  --text-sm--line-height: 1.6;
  --text-base: 1.0625rem;         /* 17 — 본문 */
  --text-base--line-height: 1.7;
  --text-lg: 1.25rem;             /* 20 — 리드 · 이름표의 카드 이름 */
  --text-lg--line-height: 1.5;
  --text-xl: 1.625rem;            /* 26 — 장 제목(모바일) · h3 */
  --text-xl--line-height: 1.35;
  --text-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);   /* 28–40 — 장 제목 · h2 */
  --text-2xl--line-height: 1.25;
  --text-3xl: clamp(1.875rem, 1.1rem + 2.9vw, 3.5rem);  /* 30–56 — H1 (한글) */
  --text-3xl--line-height: 1.15;
  --text-num: clamp(3rem, 1.4rem + 5.2vw, 6.5rem);      /* 48–104 — 90° · 180° · 360° · 핵심 숫자 (Epilogue) */
  --text-num--line-height: 0.95;

  /* ── 간격 — 4px 척도 + 이름 붙은 리듬 ────────────────────────── */
  --spacing: 0.25rem;             /* Tailwind 4 기준 단위 (p-4 = 16px) */
  --spacing-gutter: clamp(1.25rem, 0.5rem + 3.4vw, 4rem);   /* 20–64 좌우 여백 */
  --spacing-section: clamp(6rem, 3.5rem + 9vw, 11rem);      /* 96–176 구간 사이 */
  --spacing-block: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);     /* 40–64 구간 안 덩어리 사이 */
  --spacing-sheet: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);  /* 20–56 시트 안쪽 여백 */
  --spacing-header: 4.5rem;       /* 72 머리 높이 (모바일은 3.5rem = 56) */
  --spacing-card-hero: 21.25rem;  /* 340 홈 호 위 카드 폭 (데스크톱) */
  --spacing-card-stage: 26.25rem; /* 420 장 무대 가운데 카드 폭 */
  --spacing-card-lg: 30rem;       /* 480 상세 히어로 카드 폭 */
  --spacing-card-sm: 11.25rem;    /* 180 신청 요약 · 다른 카드 보기 */
  --spacing-card-swatch: 4.5rem;  /* 72 눈금자 견본 · 모바일 요약 */

  /* ── 모서리 ───────────────────────────────────────────────────── */
  --radius-card: 3.7cqw;          /* ISO ID-1 모서리 3.18mm / 85.6mm. 카드 래퍼가 container-type: inline-size 여야 한다 */
  --radius-ui: 4px;               /* 버튼 · 입력 칸 모양 · 칩 */
  --radius-sheet: 2px;            /* 시트 — 거의 각지게(서류) */
  --radius-none: 0;

  /* ── 그림자 — 카드(물체)에만. UI 면에는 쓰지 않는다 ─────────── */
  --shadow-card: 0 1px 0 0 var(--color-edge-light) inset, 0 2px 3px rgb(14 17 20 / 0.28), 0 22px 40px -22px rgb(14 17 20 / 0.6);
  --shadow-card-lift: 0 1px 0 0 var(--color-edge-light) inset, 0 3px 4px rgb(14 17 20 / 0.24), 0 30px 48px -24px rgb(14 17 20 / 0.55);
  --shadow-none: none;

  /* ── 이징 — 길이는 DESIGN.md 모션 절(160 · 280 · 600 · 800 · 900 · 1100ms) ─ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* 들어오기·반응 */
  --ease-turn: cubic-bezier(0.65, 0, 0.35, 1);    /* 화면 안에서 A→B — 이름대로 도는 회전·이동 */
  --ease-press: cubic-bezier(0.2, 0, 0, 1);       /* 누름 */
}