/* nodal — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간, 선언은 :root — @theme 블록은 브라우저가 읽지 않는다)
   색은 셰이더도 이 값을 getComputedStyle 로 읽어 쓴다 — 셰이더 색의 출처도 여기다. */
:root {
  /* 색 — 차가운 흰 바탕 · 먹 · 크림슨 신호 한 색 */
  --color-bg: #f1f2ef;          /* 고요 — 바탕, 시퀀스 영상의 배경색 */
  --color-ink: #0e1013;         /* 글자 · 장면 4 먹 판 */
  --color-accent: #d40f35;      /* 크림슨 신호 — 바늘 · 부호/단위 · Signal 견본. 면으로 쓰지 않는다(회차 2: 셰이더에서는 뺐다) */
  --color-accent-soft: #ff8496; /* 먹 판 위의 크림슨(부호·단위) */
  --color-mute: #596067;        /* 보조 글자(바탕 위만 — 먹 위 금지 2.99:1) */
  --color-hiss: #a3a8ad;        /* 셰이더 덩어리·수평선 · 1px 구분선 · 눈금 — 장식 전용, 글자 금지 */
  --color-paper-dim: #e3e5e1;   /* 사양 표 줄무늬 · 자리표시자 바탕 */

  /* 방(room) — 장면 2 무대. 시퀀스 프레임 가장자리 실측(f-001·036·072 평균, 2026-10-09)이라 이음매가 안 보인다.
     설계의 "영상 바탕을 #f1f2ef 로 보정" 대신 원본을 쓰고 페이지가 이 색으로 가라앉는다(NOTES) */
  --color-room-top: #b1c3c9;
  --color-room-mid: #c6d3d8;
  --color-room-bottom: #cfdce0;
  --color-mute-room: #3a4148;   /* 방 위 보조 글자 — mute(#596067)는 방 위에서 4.0:1 이라 못 쓴다. 방 위 끝(#b1c3c9)에서 5.7:1 */

  /* 서체 — display 는 가변 축(wght 200–800 · wdth 75–100)을 소음 진폭에 묶는다 */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* 글자 크기 — 폭 표(wireframe 4절)로 실측한 상한 */
  --text-mega: clamp(5.5rem, 12.5vw, 12rem);   /* 장면 1 헤드라인 2줄(≥720) */
  --text-mega-m: clamp(3.5rem, 18vw, 8rem);    /* 장면 1 헤드라인 3줄(<720) */
  --text-burst: clamp(4rem, 13vw, 12rem);      /* 장면 4 숫자 */
  --text-still: clamp(2.75rem, 9vw, 8.5rem);   /* 장면 3 세 줄 */
  --text-meter: clamp(3.5rem, 10vw, 9rem);     /* 장면 2 dB 계기 (Mono) */
  --text-h2: clamp(2rem, 4vw, 3.5rem);
  --text-lead: clamp(1.125rem, 1.4vw, 1.375rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;                       /* 머리 눈금 이름 · 표 머리 (Mono, 대문자 아님) */

  --text-mega--line-height: 0.9;
  --text-still--line-height: 1.02;
  --text-body--line-height: 1.6;

  /* 간격 — 4 의 배수, 거터는 fluid(margin·gap 에만 — 테두리 상자 padding 은 리터럴 단계, lessons #50) */
  --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-48: 12rem;
  --spacing-gutter: clamp(1.25rem, 4.4vw, 4rem);
  --spacing-header: 3rem;                      /* 머리 높이 48px (<720 은 아래에서 두 줄 92px) */
  --spacing-header-row: 3rem;                  /* 머리 첫 줄 — 워드마크 · 판독값 · 단추 */
  --spacing-ruler-row: 2.875rem;               /* <720 머리 둘째 줄 46px — 위 1px 선을 빼고도 눈금 링크가 44px 이상 */

  /* 모서리 — 직각이 기본, 견본만 원 */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-full: 9999px;

  /* 그림자 — 쓰지 않는다(깊이는 clip-path 겹침이 만든다) */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ink);

  /* 곡선 — scrub 장면은 이징 없음(스크롤이 곧 곡선), 아래는 등장·전환·누름용 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);       /* 등장 · 키네틱 글자 Enter */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);  /* 장면 4 칼날 clip-path */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);/* 누름 피드백 · FAQ 표시 회전 */
  --ease-linear: linear;                                /* scrub 기본 */
}

/* <720 — 눈금 6칸이 한 줄에 44px 씩 들어가지 않는다(6 × 44 > 남는 폭 154px). 눈금을 머리 둘째 줄로 내리고
   머리 높이를 쓰는 모든 자리(장면 무대의 위 여백·셰이더 위 경계)가 이 값 하나를 따라간다 */
@media (max-width: 719px) {
  :root { --spacing-header: calc(var(--spacing-header-row) + var(--spacing-ruler-row)); }
}