/* valor — 디자인 시스템 정본 (이식 모드: 시안에서 역추출 · _design/DESIGN.md 가 이유를 적는다)
   선언은 :root 에 — @theme 블록은 브라우저가 읽지 않는다(lessons #73). 이름은 Tailwind 4 이름공간을 따른다.
   style.css 는 이 변수만 쓴다(raw 색 금지 — G2 #9). */

:root {
  /* ── 색 — 시안 하단 5색 → 역할. 강조(sand)는 작은 것에만: 큰 면 금지(#52) ── */
  --color-night: #07090c;          /* 바탕 · 메뉴 면 · 덮개의 어둠 */
  --color-deep: #1c2834;           /* 꼬리 면 · 덮개 색의 근원 */
  --color-slate: #4f5a66;          /* 선만(1px · 원형 테두리 기본) — 글자 금지 2.84:1 */
  --color-mist: #d8dde2;           /* 글자 전부 — night 위 14.58:1 */
  --color-sand: #ead9c4;           /* 강조 — 현재 번호 · hover · 커서 라벨 */
  --color-muted: #a4adb6;          /* 보조 글자 — 단색 면 위에서만(night 8.76:1) */
  --color-veil: rgb(11 17 24 / 0.30);      /* ② 대기 덮개 기본 — 설계 정본(012bfbbf) */
  --color-veil-mobile: rgb(11 17 24 / 0.42);
  --color-veil-short: rgb(11 17 24 / 0.52); /* 짧은 폰(max-height 700) · Contact·상세 모바일 */
  --color-veil-plate: rgb(11 17 24 / 0.45); /* 글자가 걸치는 밝은 판(ideas-fog) */
  --color-scrim: rgb(7 9 12 / 0.62);       /* 스크림 시작 불투명(왼쪽) — 끝은 투명 */
  --color-scrim-bottom: rgb(7 9 12 / 0.75);
  --color-scrim-top: rgb(7 9 12 / 0.55);
  --color-scrim-right: rgb(7 9 12 / 0.50);  /* ≥1200 레일 라벨(해 쪽) — 22% 까지 */
  --color-scrim-left-md: rgb(7 9 12 / 0.70); /* 768–1199 왼쪽 스크림(75% 까지) */
  --color-scrim-mid: rgb(7 9 12 / 0.40);    /* 세로 화면 위 스크림의 중간 정지점(제목이 하늘에 얹힌다) — 4단계 실측 */
  --color-scrim-deep: rgb(7 9 12 / 0.86);   /* 전면 판 글자 자리의 가장 짙은 끝(밝은 수면·구름) — 4단계 실측 */
  --color-line: rgb(216 221 226 / 0.18);   /* 사진 위 머리카락 선 */
  --color-line-strong: rgb(216 221 226 / 0.60); /* SCROLL 세로선 · 메일 밑줄 */
  --color-ring: rgb(216 221 226 / 0.42);   /* 원형 버튼 기본 테두리 — 사진 위에서 slate 는 안 보인다(4단계) */
  --color-dim: rgb(7 9 12 / 0.36);         /* Hero 를 벗어나면 얹는 어둠(스크롤로 opacity 0→1) — veil 0.30 위에 얹어 합이 설계의 0.55 가 된다 */

  /* ── 서체 ── */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", serif;   /* 서가: /_shared/fonts/bodoni-moda/font.css — → ← 글리프 없음 */
  --font-sans: "Pretendard Variable", "Pretendard", system-ui, sans-serif;   /* /_shared/pretendard.css 의 이름 — 라벨·본문·화살표 */

  /* ── 글자 크기 — display 는 폭 표(wireframe §6)가 정한 식. 바꾸면 표를 다시 잰다 ── */
  --text-display-xl: min(19vw, 17svh);                 /* Hero <768 */
  --text-display-xl-md: min(13vw, 17svh);              /* 768–1199 */
  --text-display-xl-lg: min(11vw, 17svh, 13.5rem);     /* ≥1200 */
  --text-display-l: 18vw;                              /* Ideas·Work·Studio <768 */
  --text-display-l-md: 11vw;
  --text-display-l-lg: min(9vw, 11rem);
  --text-display-m: 15vw;                              /* Contact <768 (EXTRAORDINARY 줄은 --text-display-m-solo) */
  --text-display-m-solo: 10vw;
  --text-display-m-md: 8.5vw;
  --text-display-m-lg: min(7vw, 8.5rem);
  --text-menu: 16vw;                                   /* 메뉴 <768 */
  --text-menu-md: 8vw;
  --text-menu-lg: min(8vw, 9rem);
  --text-detail: 17vw;                                 /* 상세 제목 <768 (2줄) */
  --text-detail-md: 9vw;
  --text-detail-lg: min(8vw, 9.5rem);
  --text-lead: 1.0625rem;      /* 17 — 장면 설명 */
  --text-body: 0.9375rem;      /* 15 */
  --text-small: 0.8125rem;     /* 13 — 고지·꼬리 */
  --text-label: 0.6875rem;     /* 11 — 넓은 자간 대문자 라벨 */
  --text-label-lg: 0.8125rem;  /* 13 — 메일·로고 */

  --leading-display: 0.88;
  --leading-tight: 1.2;
  --leading-body: 1.65;
  --tracking-display: -0.02em;
  --tracking-label: 0.24em;
  --tracking-brand: 0.32em;

  /* 계단식 들여쓰기(em — display 크기에 붙는다) */
  --spacing-step-1: 2.4em;     /* THE (넓은 화면) */
  --spacing-step-2: 1.2em;     /* HORIZON (넓은 화면) · THE(모바일) */
  --spacing-step-3: 0.6em;     /* REALITY · ELYSIUM · STUDIO(모바일) */
  --spacing-step-4: 1em;       /* SOMETHING */

  /* ── 간격 — 4 기반 척도 + 유체 거터 ── */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-gutter: clamp(20px, 4.4vw, 80px);
  --spacing-header: clamp(20px, 2.8vw, 40px);   /* 머리 위 여백 */
  --spacing-scene: clamp(6rem, 16svh, 12rem);   /* 장면 사이 */
  --spacing-rail: 160px;                        /* ≥1200 오른쪽 레일 몫 */
  --spacing-plate: min(34vw, 640px);            /* Work 02·03 판 폭 — 판/전면 리듬용(해상도 제약 아님) */

  /* ── 크기 ── */
  --size-ring: 120px;          /* 원형 버튼 — 모바일 96 · 짧은 폰 88 */
  --size-ring-sm: 96px;
  --size-ring-xs: 88px;
  --size-tap: 44px;
  --size-cursor: 6px;
  --size-cursor-view: 56px;
  --size-cursor-open: 76px;

  /* ── 모서리 · 그림자 — 둘 다 쓰지 않는 것이 기본. 아치만 예외 ── */
  --radius-none: 0;
  --radius-full: 9999px;                        /* 원형 버튼·커서 */
  --radius-arch: 50% 50% 0 0 / 28% 28% 0 0;     /* 메뉴 풍경 조각 */
  --shadow-none: none;

  /* ── 이징 · 길이 — 느리고 부드럽게, 바운스 없음 ── */
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);    /* 장면·등장 — 긴 ease-out */
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);       /* hover·버튼 */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* 이미 화면에 있는 것이 옮겨갈 때(번호 표시) */
  --duration-ui: 320ms;
  --duration-menu: 700ms;
  --duration-scene: 900ms;
  --duration-intro: 2200ms;
  --stagger-step: 120ms;
  --stagger-menu: 70ms;

  /* ── 층 ── */
  --z-wall: 0;
  --z-veil: 1;
  --z-plate: 2;
  --z-type: 3;
  --z-ui: 10;
  --z-menu: 50;
  --z-cursor: 60;

}

@media (max-height: 700px) and (max-width: 767px) {
  :root { --size-ring-sm: var(--size-ring-xs); }
}