/* mycelia — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간, 선언은 :root — 브라우저는 @theme 를 읽지 않는다 #73)
 * 결: 젖은 흙 바탕 위의 표본 대장. 색은 바탕 둘 · 잉크 둘 · 강조 하나. 강조는 선(균사선·밑줄·초점)에만 — 면이 되지 않는다(#52).
 * style.css 는 여기 이름만 쓴다(raw 색 금지, G2 #9).
 */
:root {
  /* ── 색 ─────────────────────────────────────────────── */
  --color-bg: #64573f;          /* 젖은 흙 — 판·페이지 바탕(가장 큰 면) */
  --color-bg-deep: #544934;     /* 그늘 흙 — 등뼈·판 뒤 땅·입력칸 */
  --color-ink: #f4efe1;         /* 본문·제목 */
  --color-ink-soft: #e0d8c4;    /* 메타·필드 이름·비초점 판 본문 */
  --color-accent: #e2d66c;      /* 지의류 황록 — 균사선·링크 밑줄·초점 링·현재 단계 눈금. 면 금지 */
  --color-on-accent: #2a2418;   /* 강조 위 글자(선택 영역 하나뿐) */
  --color-line: #8a7d63;        /* 장식 1px 선 — 판 경계·대장 줄 */
  --color-line-strong: #b9ac8b; /* 누르는 부품 테두리(비글자 3:1) */

  /* ── 서체 ───────────────────────────────────────────── */
  --font-display: "Space Grotesk", "Pretendard Variable", system-ui, sans-serif; /* 라틴·숫자는 Space Grotesk, 한글은 Pretendard 로 떨어진다 */
  --font-body: "Pretendard Variable", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Pretendard Variable", ui-monospace, monospace; /* → ● ₂ 는 이 서체에 없다 — Pretendard 로 떨어진다 */

  /* ── 글자 크기 ─────────────────────────────────────── */
  --text-2xs: 0.75rem;     /* 12 — 라벨 띠 필드 이름(모노) */
  --text-xs: 0.8125rem;    /* 13 — 메타·등뼈 */
  --text-sm: 0.9375rem;    /* 15 — 백링크 발췌·대장 줄 */
  --text-base: 1.0625rem;  /* 17 — 판 본문 */
  --text-lead: 1.1875rem;  /* 19 — 판 첫 문단 */
  --text-h3: 1.25rem;      /* 20 — 본문 소제목 */
  --text-pane: clamp(1.625rem, 0.92rem + 1.2vw, 2rem);        /* 26→32 — 판 제목(1024 에서 27, 폭 표 4-2) */
  --text-feature: clamp(1.875rem, 1.1rem + 1.9vw, 2.75rem);   /* 30→44 — 홈 대표 판 제목(홈에서 가장 큰 것) */
  --text-page: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);        /* 36→56 — 색인·기록·소개 제목 */
  --text-count: clamp(4.5rem, 2rem + 8vw, 10rem);             /* 72→160 — 큰 숫자(Space Grotesk 숫자만, 3자 이하) */
  --text-leading-tight: 1.15;
  --text-leading-body: 1.75;
  --text-tracking-display: -0.02em;
  --text-tracking-label: 0.04em;

  /* ── 간격(4px 바탕) ────────────────────────────────── */
  --spacing-1: 0.25rem;  /* 4 */
  --spacing-2: 0.5rem;   /* 8 */
  --spacing-3: 0.75rem;  /* 12 */
  --spacing-4: 1rem;     /* 16 */
  --spacing-5: 1.5rem;   /* 24 */
  --spacing-6: 2rem;     /* 32 */
  --spacing-7: 3rem;     /* 48 */
  --spacing-8: 4rem;     /* 64 */
  --spacing-9: 6rem;     /* 96 */
  --spacing-10: 8rem;    /* 128 */
  --spacing-section: clamp(4rem, 2rem + 6vw, 8rem);
  /* 판 무대 — 폭 표는 wireframe.md */
  --spacing-strip: 3.5rem;       /* 56 — 라벨 띠 높이(데스크톱) */
  --spacing-strip-m: 3rem;       /* 48 — 라벨 띠 높이(모바일) */
  --spacing-trail: 2.5rem;       /* 40 — 지나온 판 띠(모바일) */
  --spacing-spine: 2.5rem;       /* 40 — 등뼈 폭 = 판마다 왼쪽에 늘 있는 칸 */
  --spacing-pane: 37.5rem;       /* 600 — 판 최대 폭 */
  --spacing-pane-pad: 2rem;      /* 32 — 판 안쪽 여백(1200 이상) */
  --spacing-pane-pad-s: 1.5rem;  /* 24 — 1199 이하 */
  --spacing-pane-pad-m: 1.25rem; /* 20 — 719 이하 */
  --spacing-measure: 42rem;      /* 672 — 판 밖 본문 칼럼 최대 폭 */
  --spacing-tap: 2.75rem;        /* 44 — 최소 터치 타깃 */

  /* ── 모서리 ─────────────────────────────────────────── */
  --radius-0: 0;
  --radius-1: 2px;   /* 입력칸·단추 */
  --radius-2: 4px;   /* 초점 링 바깥 */

  /* ── 그림자 — 판이 앞 판 위에 얹힐 때 하나만 ────────────── */
  --shadow-pane: -1px 0 0 0 var(--color-line), -10px 0 18px -12px rgb(28 22 12 / 0.55);
  --shadow-none: none;

  /* ── 이징·길이 ─────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* 판 밀림·선 그리기 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* 무대 가로 이동 */
  --ease-press: cubic-bezier(0.2, 0, 0, 1);       /* 누름 */
  --ease-duration-press: 120ms;
  --ease-duration-hover: 160ms;
  --ease-duration-pane: 240ms;
  --ease-duration-thread: 320ms;
  --ease-duration-stage: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-duration-press: 0ms;
    --ease-duration-hover: 0ms;
    --ease-duration-pane: 0ms;
    --ease-duration-thread: 0ms;
    --ease-duration-stage: 0ms;
  }
}