/* typography.css — 서체 로드와 발표 타입 클래스. 크기 토큰은 tokens.css */

/* 폰트 파일은 fonts/ 에 로컬 번들. 네트워크 없이 동작해야 한다(기획 10절).
   Gmarket Sans는 Light/Medium/Bold 세 굵기뿐이라 weight 범위로 매핑한다:
   regular(400)·medium(500) → Medium, bold(700)·heavy(800) → Bold, Light(300)는 보조 문장용. */
@font-face {
  font-family: "Gmarket Sans";
  src: url("../fonts/GmarketSansTTFLight.ttf") format("truetype");
  font-weight: 100 399;
  font-display: block; /* 발표 중 서체 바뀜(FOUT) 방지 */
}
@font-face {
  font-family: "Gmarket Sans";
  src: url("../fonts/GmarketSansTTFMedium.ttf") format("truetype");
  font-weight: 400 599;
  font-display: block;
}
@font-face {
  font-family: "Gmarket Sans";
  src: url("../fonts/GmarketSansTTFBold.ttf") format("truetype");
  font-weight: 600 900;
  font-display: block;
}
/* 발표 스케일 5개. 한 화면의 핵심 문장은 최대 두 줄(기획 5.2) */
.ns-type-hero {
  font-size: var(--ns-font-size-hero);
  line-height: var(--ns-line-height-hero);
  letter-spacing: var(--ns-letter-spacing-hero);
  font-weight: var(--ns-font-weight-heavy);
  text-wrap: balance;
}
.ns-type-display {
  font-size: var(--ns-font-size-display);
  line-height: var(--ns-line-height-display);
  letter-spacing: var(--ns-letter-spacing-display);
  font-weight: var(--ns-font-weight-bold);
  text-wrap: balance;
}
.ns-type-title {
  font-size: var(--ns-font-size-title);
  line-height: var(--ns-line-height-title);
  letter-spacing: var(--ns-letter-spacing-title);
  font-weight: var(--ns-font-weight-bold);
  text-wrap: balance;
}
.ns-type-body {
  font-size: var(--ns-font-size-body);
  line-height: var(--ns-line-height-body);
  letter-spacing: var(--ns-letter-spacing-body);
  font-weight: var(--ns-font-weight-regular);
  text-wrap: pretty;
}
.ns-type-data {
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-data);
  line-height: var(--ns-line-height-data);
  letter-spacing: var(--ns-letter-spacing-data);
  font-weight: var(--ns-font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* 숫자·종목코드·시각 (기획 5.2) */
.ns-mono {
  font-family: var(--ns-font-family-mono);
  font-variant-numeric: tabular-nums;
}
