:root {
  --font-display: "Hahmlet", "Times New Roman", serif;
  --font-body: "SUIT Variable", "Apple SD Gothic Neo", sans-serif;

  /* ── 글자 크기 사다리 ──────────────────────────────
     여덟 칸뿐이다. 새 크기가 필요하면 여기에 칸을 더하고,
     화면 쪽 CSS 에는 숫자를 직접 쓰지 않는다.
     중간 크기를 일부러 비워 큰 것과 작은 것의 대비를 살렸다.

     전부 clamp(최소, 화면비례, 최대) 형태다.
     가운데 vw 값이 화면 폭을 따라 미끄러지고, 양끝이 한계를 잡는다.
     기준은 노트북 폭 1512px — 그 화면에서 원래 크기 그대로 보인다. */

  --fs-micro:  clamp( 8px, 0.60vw, 13px);  /* 번호 · 라벨 · eyebrow */
  --fs-small:  clamp(10px, 0.73vw, 16px);  /* 캡션 · 메타 */
  --fs-base:   clamp(12px, 0.86vw, 19px);  /* 목록 설명 · 발췌 · 메뉴 */
  --fs-read:   clamp(14px, 1.00vw, 22px);  /* 읽는 본문 */
  --fs-ui:     clamp(16px, 1.19vw, 26px);  /* 화살표 · 패널 제목 */
  --fs-ui-lg:  clamp(20px, 1.59vw, 34px);  /* 라이트박스 조작 */

  --fs-lead:   clamp(15px, 1.15vw, 26px);  /* 도입 문장 */
  --fs-sub:    clamp(20px, 2.20vw, 44px);  /* 본문 속 소제목 · 인용 */
  --fs-title:  clamp(22px, 2.80vw, 56px);  /* 목록 제목 — 다이어리 · things · 고찰 공통 */

  --fs-display:       clamp(30px, 5.00vw, 92px);  /* 페이지 대제목 */
  --fs-display-long:  clamp(26px, 4.20vw, 76px);
  --fs-display-xl:    clamp(22px, 3.40vw, 62px);

  --ambient-image: url("../images/ambient-source.jpeg");
  --surface-blur: 0px;
  --grain-opacity: .24;
  --grain-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-size: 240px 240px;
  --grain-position: 0 0;
  --sidebar-tint-start: .31;
  --sidebar-tint-end: .38;
  --content-opacity: .84;

  --ink: #172019;
  --ink-soft: #596158;
  --paper: #e8e6de;
  --paper-deep: #d4d7ca;
  --paper-warm: #ded8cb;
  --acid: #d9ff54;
  --line: rgba(23, 32, 25, 0.28);
  --line-strong: rgba(23, 32, 25, 0.72);
  --sidebar-bg: #191815;
  --sidebar-ink: #e8e6de;
  --sidebar-soft: rgba(232, 230, 222, .58);
  --sidebar-line: rgba(232, 230, 222, .28);
  --sidebar-line-strong: rgba(232, 230, 222, .66);
  --sidebar-wash: linear-gradient(
    155deg,
    rgba(17, 24, 19, var(--sidebar-tint-start)),
    rgba(18, 18, 15, var(--sidebar-tint-end))
  );
  --content-wash: rgba(236, 234, 224, var(--content-opacity));

  --split-left: clamp(264px, 28vw, 600px);
  --measure: 1.15;              /* 본문 폭 배율 — 이 숫자 하나로 오른쪽 글 폭이 같이 움직인다 */
  --content-pad: clamp(28px, 5.2vw, 92px);
  --ease: cubic-bezier(.2, .75, .2, 1);
}