/* FELLRUN — 디자인 시스템 정본 · 회차 2 (Tailwind 4 @theme 이름공간).
 * 페이지는 이 파일을 <link> 로 먼저 싣고, style.css 는 여기 있는 var() 만 쓴다.
 * 승급(Next.js) 때는 :root 블록을 그대로 globals.css 의 @theme 로 옮긴다.
 * 방향: 서울 근교 조망도 — 하늘 안개 바탕 · 겹겹이 능선(생성 그래픽) · 구름 판 · 남색 글자 · 단풍 주황 한 점.
 * 근거·대비표·컴포넌트 표는 _design/DESIGN.md "회차 2", 쪽 구성·폭 표·상태 URL 은 _design/wireframe-v2.md.
 *
 * 이 장의 금지(수렴 금지 5)가 토큰에 먼저 박혀 있다:
 *   letter-spacing 토큰 없음(라벨 자간 0) · border 색 토큰 없음(선 대신 면) · 반경은 --radius-base 하나(6px, 알약 없음 — 안쪽은 동심 계산 2px)
 *   · 등장 연출은 --animate-rise 하나(히어로 능선이 로드 때 한 번) · display 상한 5.5rem(한 줄 문장, 가장 큰 것은 능선 띠).
 */
:root {
  /* ── 색: 바탕(면) — 하늘 → 능선 → 구름. 구획은 선이 아니라 이 판들의 교대로 한다 ── */
  --color-bg: #d9e5ee;          /* 하늘 안개 — 전체 바탕 (OKLCH L0.92 C0.02 h240). 흰색과 ΔE 0.085 */
  --color-surface: #ffffff;     /* 구름 판 — 카테고리 띠 · 교대 구간 · 카드 몸 · 판 */
  --color-surface-2: #edf2f6;   /* 옅은 하늘 — 구름 판 위의 hover · 표 행 띠 · 탭 줄 바닥 · 입력칸 */
  --color-plate: #cdd1c6;       /* 화강암 세이지 — 누끼 사진의 원래 바탕. 상품 사진 자리에만(판과 사진의 경계가 사라진다) */

  /* ── 색: 능선 — 조망도의 겹. 뒤로 갈수록 하늘에 가깝다(대기 원근). 글자 바탕이 될 수 있어 대비표에 든다 ── */
  --color-band-far: #c6d6e4;    /* 먼 능선 */
  --color-band-mid: #9fb8cf;    /* 가운데 능선 */
  --color-band-near: #7494b6;   /* 가까운 능선 — 이 앞은 구름(--color-surface) */
  --color-band-ink: #13233f;    /* 남색 판 — 고지 띠 · 꼬리 · "선택된 것" 의 면 */

  /* ── 색: 글자 ── */
  --color-ink: #13233f;         /* 능선 남색 — 본문·제목 (OKLCH L0.26 h261) */
  --color-ink-soft: #46586f;    /* 안개 남색 — 보조 글자(라벨·사양·수). 세이지 판 위에서도 4.5 를 넘는다 */
  --color-ink-invert: #ffffff;  /* 남색 판 위 본문 */
  --color-ink-invert-soft: #b4c3d4; /* 남색 판 위 보조 글자(꼬리 고지 전문 등) */

  /* ── 색: 강조 — 단풍 주황. 신호다: 한 화면에 주 버튼(면) 1 + 표지 1 까지. 판·배경·배지·탭에 쓰지 않는다 ── */
  --color-accent: #ff5a1f;      /* OKLCH L0.68 C0.21 h38 — 주 버튼 면(글자는 --color-ink, 5.0:1) · 선택된 봉우리 표지 · 남색 판 위 포커스 링 */
  --color-accent-ink: #ad3606;  /* 작은 주황 글자 — 할인율만(흰 판 6.35 · 하늘 4.96 · 옅은 하늘 5.63). 세이지 판 위에는 쓰지 않는다(4.09) */

  /* ── 색: 덮개 — 반투명이라 대비표에서 빠진다 ── */
  --color-overlay-bg: rgb(19 35 63 / 0.5);

  /* ── 색: 지하철 노선 — 코스 카드의 16px 정사각 표지(글자 없음, 옆에 "3호선" 을 남색 글자로). 글자색으로 쓰지 않는다 ── */
  --color-line-1: #0052a4;
  --color-line-2: #00a84d;
  --color-line-3: #ef7c1c;
  --color-line-4: #00a5de;
  --color-line-5: #996cac;
  --color-line-7: #747f00;

  /* ── 색: 상품 색 견본 — 글자가 아니다(정사각 · 안쪽 1px 가 아닌 2px 흰 받침 + 바깥 남색 선택 테) ── */
  --color-swatch-spruce: #1d3a2c;   /* 가문비 */
  --color-swatch-larch: #c89433;    /* 낙엽송 */
  --color-swatch-stone: #7d847a;    /* 돌회색 */
  --color-swatch-black: #16181a;    /* 흑 */
  --color-swatch-slate: #4d6273;    /* 비구름 */
  --color-swatch-oat: #e3dccb;      /* 귀리 */
  --color-swatch-moss: #5b6b3a;     /* 이끼 */
  --color-swatch-charcoal: #33373a; /* 숯 */

  /* ── 서체 — 서가: Gothic A1(표지판 글자: 슬로건·구간 제목·숫자·봉우리) + Pretendard(나머지 전부) ──
   * Gothic A1 서가 굵기는 400·700·900 셋. display 는 900, 봉우리 이름은 700.
   * 글리프 실측(캔버스 폴백 비교): · — – … → ← ↗ ℃ ° ₩ % ~ ● ■ ▲ ₂ × ㎞ ㎏ 전부 있다. */
  --font-display: "Gothic A1", "Pretendard Variable", Pretendard, sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ── 글자 크기 — display 는 한 줄 문장(홈 슬로건)·두 줄 문장(기술·룩북 H1)용, 상한 5.5rem ── */
  --text-display: clamp(2.5rem, 0.9rem + 5.333vw, 5.5rem);    /* 40 → 52.8@720 → 69@1024 → 78.4@1200 → 88@1440 · Gothic A1 900 */
  --text-display--line-height: 1.1;
  --text-title: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);        /* 28 → 32@720 → 38.1@1024 → 41.6@1200 → 44@1440 · Gothic A1 900 · 구간 제목·쪽 제목·상품명 */
  --text-title--line-height: 1.2;
  --text-figure: clamp(2.25rem, 1.25rem + 3.2vw, 4rem);       /* 36 → 43@720 → 52.8@1024 → 58.4@1200 → 64@1440 · Gothic A1 900 · 숫자만(20,000 · 836) — 단위는 떼어 Pretendard */
  --text-figure--line-height: 1;
  --text-figure-sm: 1.625rem;                                  /* 26 · Gothic A1 900 · 코스 수치(2.6 · 80 · 338) · 순위 숫자 */
  --text-figure-sm--line-height: 1.05;
  --text-price: 1.75rem;                                       /* 28 · Pretendard 800 tnum · 상세 가격 · 합계 */
  --text-price--line-height: 1.15;
  --text-lead: 1.25rem;                                        /* 20 · Pretendard 500 · 히어로 보조 한 줄 · 쪽 머리 문장 */
  --text-lead--line-height: 1.5;
  --text-cat: clamp(0.9375rem, 0.75rem + 0.8vw, 1.25rem);      /* 15 → 20 · Pretendard 800 · 카테고리 칸 이름 */
  --text-cat--line-height: 1.25;
  --text-h3: 1.25rem;                                          /* 20 · Pretendard 800 · 카드 판 제목 · 매장 이름 · 대화 상자 제목 */
  --text-h3--line-height: 1.35;
  --text-body: 1rem;                                           /* 16 · 본문 · 입력칸(모바일 확대 방지) */
  --text-body--line-height: 1.65;
  --text-card: 0.9375rem;                                      /* 15 · 상품명 · 탭 · 메뉴 */
  --text-card--line-height: 1.45;
  --text-small: 0.875rem;                                      /* 14 · 사양 · 주소 · 꼬리 */
  --text-small--line-height: 1.5;
  --text-label: 0.8125rem;                                     /* 13 · 라벨(자간 0, 600~700) · 봉우리 이름 */
  --text-label--line-height: 1.35;
  --text-micro: 0.75rem;                                       /* 12 · 모바일 고지 띠 · 배지 — 이보다 작게 쓰지 않는다 */
  --text-micro--line-height: 1.35;

  /* ── 간격 — fluid(clamp)는 margin·gap·높이에만, 판 안 padding 은 리터럴 단계(lessons #50) ── */
  --spacing: 0.25rem;                                          /* Tailwind 기본 단위 — calc(var(--spacing) * n) */
  --spacing-margin: clamp(1rem, 2.5vw, 2rem);                  /* 쪽 좌우 16 → 18@720 → 25.6@1024 → 30@1200 → 32 */
  --spacing-gutter: clamp(1rem, 0.25rem + 1.6vw, 1.5rem);      /* 열 사이 16 → 20.4@1024 → 23.2@1200 → 24 */
  --spacing-tile: 0.5rem;                                      /* 모바일 카테고리 3×2 칸 사이 8 */
  --spacing-section: clamp(3.5rem, 1.5rem + 5vw, 6.5rem);      /* 구간(판) 안 위아래 56 → 104 */
  --spacing-block: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);   /* 구간 제목 ↔ 내용 */
  --spacing-hero: clamp(29.75rem, 28.73rem + 4.19vw, 32.5rem); /* 히어로 띠 높이 476@390 → 490@720 → 503@1024 → 520@1440 */
  --spacing-ridge: clamp(10.625rem, 8.07rem + 10.476vw, 17.5rem); /* 능선 띠 높이 170@390 → 205@720 → 236@1024 → 255@1199 → 280@1440 */
  --spacing-pad-sm: 0.75rem;                                   /* 칩 · 작은 판 */
  --spacing-pad: 1rem;                                         /* 모바일 판 */
  --spacing-pad-md: 1.5rem;                                    /* 태블릿 판 */
  --spacing-pad-lg: 2rem;                                      /* 데스크톱 판 */
  --spacing-tap: 2.75rem;                                      /* 터치 타깃 최소 44px */
  --spacing-rail: 15.5rem;                                     /* 목록 필터 레일 248px (≥1024) */

  /* ── 폭·중단점 (미디어 쿼리는 var() 를 못 읽는다 — 값은 wireframe-v2 폭 표와 같다) ── */
  --container-page: 90rem;          /* 1440 — 넘으면 가운데(하늘·능선·구름 판은 창 끝까지) */
  --container-copy: 38rem;          /* 본문 한 줄 최대 */
  --breakpoint-t: 45rem;            /* 720 — 6열 · 카테고리 한 줄 6 · 상품 3열 */
  --breakpoint-l: 64rem;            /* 1024 — 목록 레일 · 상세 2단 */
  --breakpoint-d: 75rem;            /* 1200 — 8열 */
  --breakpoint-w: 80rem;            /* 1280 — 목록 상품 4열 */

  /* ── 반경 — 하나뿐(6). 안쪽 요소는 동심 계산(6 − 안쪽 여백 4 = 2) ── */
  --radius-base: 6px;
  --radius-inner: 2px;

  /* ── 그림자 — 하나뿐. 몸에서 떠오르는 판(메가 메뉴 · 검색 판 · 대화 상자 · 시트)에만. 카드·버튼·사진 0 ── */
  --shadow-pop: 0 18px 48px -18px rgb(19 35 63 / 0.35), 0 4px 12px -6px rgb(19 35 63 / 0.18);

  /* ── 이징·모션 ── */
  --ease-rise: cubic-bezier(0.22, 1, 0.36, 1);   /* 능선이 떠오른다 — 빨리 시작해 천천히 선다 */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);       /* 색 · 작은 이동 */
  --animate-rise: fr-rise 720ms var(--ease-rise) 1 both; /* @keyframes fr-rise 는 style.css — translate: 0 var(--rise) → 0, opacity .0 → 1. 층마다 --rise 만 다르다(먼 8px · 가운데 16px · 가까운 24px · 구름 0) */

  /* ── 사진 리프트 — Tailwind 이름공간 밖(승급 때 @utility photo-lift). 어두운 Higgsfield 장면 사진을 밝은 판 위에 앉힌다 ──
   * 장면 사진(A·L·D02·S01)에만. 누끼(P·D01)·소재 견본(M)·실험실(T01)에는 쓰지 않는다. */
  --photo-lift: contrast(0.9) brightness(1.06) saturate(1.05);
}