:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-strong: 600;
  --fw-bold: 700;
  --fs-caption: .8125rem;
  --fs-body: 1rem;
  --fs-title: 1.125rem;
  --fs-heading: 1.375rem;
  --fs-display: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --lh-body: 1.6;
  --lh-ui: 1.45;
  --lh-heading: 1.3;
  --ls-heading: -.02em;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 40px;
  --gutter: var(--sp-4);
  --radius: 12px;
  --radius-pill: 999px;
  --shadow-float: 0 8px 24px rgba(17, 17, 17, .12);
  --muted: #5F6864;
  --line: #E6E9E7;
  --line-strong: #878F8B;
  --accent: #087A4E;
  --accent-ink: #087A4E;
  --heart: #D6304A;
  --page: #ECEFEE;
  /* 반응형 웹(10/16 저녁): 휴대폰 767px 이하는 지금 그대로, 768px 부터 화면 폭을 쓴다. 미디어 쿼리는 768px·1080px 두 개만 쓴다.
     --content-max: 내용 최대 폭 · --read-max: 글만 있는 화면의 읽기 폭 · --page-gutter: 좌우 여백(태블릿 24px·PC 32px)
     --content-pad: 화면 전체 폭을 쓰는 띠(머리·바닥)가 안쪽 내용을 --content-max 가운데 정렬로 맞출 때 쓰는 좌우 안쪽 여백(padding-inline 에만 쓴다) */
  --content-max: 1200px;
  --read-max: 760px;
  --page-gutter: var(--sp-4);
  --content-pad: max(var(--page-gutter), calc((100% - var(--content-max)) / 2));
}

@media (min-width: 768px) {
  :root { --page-gutter: 24px; }
}

@media (min-width: 1080px) {
  :root { --page-gutter: 32px; }
}