/* ============================================================
   Typography — 리본 ERP 디자인 표준 (DESIGN.md §3)
   본문 글꼴 Pretendard, 기본 14px / 400 / 행간 1.5 / 자간 -0.2px.
   제목 스케일: 대 22px·700·-0.44px / 중 16px·-0.34px / 본문 14px.
   변수명은 구 시스템 이름 유지(세리프 display 계열 → Pretendard 로 통일).
   ============================================================ */

:root {
  /* ---- 글꼴 ---- */
  --font-display: 'Pretendard', '맑은 고딕', 'Malgun Gothic', sans-serif;
  --font-sans: 'Pretendard', '맑은 고딕', 'Malgun Gothic', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;

  /* ---- 제목(구 display 계열 — 표준 제목 위계로 축소) ---- */
  --display-xl-size: 26px;
  --display-xl-lh: 1.15;
  --display-xl-ls: -0.52px;
  --display-lg-size: 22px;   /* 표준 대제목 */
  --display-lg-lh: 1.2;
  --display-lg-ls: -0.44px;
  --display-md-size: 18px;
  --display-md-lh: 1.3;
  --display-md-ls: -0.36px;
  --display-sm-size: 16px;   /* 표준 중제목 */
  --display-sm-lh: 1.35;
  --display-sm-ls: -0.34px;
  --display-weight: 700;     /* 표준 대제목 굵기 */

  /* ---- 소제목(구 title 계열) ---- */
  --title-lg-size: 20px;
  --title-lg-lh: 1.3;
  --title-md-size: 16px;     /* 표준 중제목 크기 */
  --title-md-lh: 1.4;
  --title-sm-size: 14px;
  --title-sm-lh: 1.4;
  --title-weight: 500;       /* 표준 표 머리 굵기 */

  /* ---- 본문 ---- */
  --body-md-size: 14px;      /* 표준 본문 */
  --body-md-lh: 1.5;
  --body-sm-size: 13px;
  --body-sm-lh: 1.5;

  /* ---- 부가 ---- */
  --caption-size: 12px;
  --caption-lh: 1.4;
  --caption-weight: 500;
  --caption-up-size: 11px;
  --caption-up-lh: 1.4;
  --caption-up-ls: 1px;
  --code-size: 13px;
  --code-lh: 1.6;
  --button-size: 14px;
  --button-weight: 500;
  --nav-size: 13px;          /* 표준 메뉴 글자 */
  --nav-lh: 1.4;
  --nav-weight: 500;

  /* 기본 자간(표준 -0.02rem = -0.2px, 루트 10px 기준) */
  --ls-base: -0.02rem;
}

/* ------------------------------------------------------------
   헬퍼 클래스 (컴포넌트는 raw 변수도 직접 읽음)
   ------------------------------------------------------------ */
.ds-display-xl { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-xl-size); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); }
.ds-display-lg { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-lg-size); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); }
.ds-display-md { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-md-size); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); }
.ds-display-sm { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-sm-size); line-height: var(--display-sm-lh); letter-spacing: var(--display-sm-ls); }

.ds-title-lg { font-family: var(--font-sans); font-weight: var(--title-weight);
  font-size: var(--title-lg-size); line-height: var(--title-lg-lh); }
.ds-title-md { font-family: var(--font-sans); font-weight: var(--title-weight);
  font-size: var(--title-md-size); line-height: var(--title-md-lh); }
.ds-title-sm { font-family: var(--font-sans); font-weight: var(--title-weight);
  font-size: var(--title-sm-size); line-height: var(--title-sm-lh); }

.ds-body-md { font-family: var(--font-sans); font-weight: 400;
  font-size: var(--body-md-size); line-height: var(--body-md-lh); }
.ds-body-sm { font-family: var(--font-sans); font-weight: 400;
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }

.ds-caption { font-family: var(--font-sans); font-weight: var(--caption-weight);
  font-size: var(--caption-size); line-height: var(--caption-lh); }
.ds-caption-up { font-family: var(--font-sans); font-weight: var(--caption-weight);
  font-size: var(--caption-up-size); line-height: var(--caption-up-lh);
  letter-spacing: var(--caption-up-ls); text-transform: uppercase; }
.ds-code { font-family: var(--font-mono); font-weight: 400;
  font-size: var(--code-size); line-height: var(--code-lh); }