/* ─────────────────────────────────────────────
 * 자체 호스팅 웹폰트 — Pretendard Variable 하나.
 *
 * 외부 요청 0건이라는 원칙은 그대로다. 예전에는 네 화면이 fonts.googleapis.com 을
 * <link> 로 불러왔다. 관리 콘솔은 수강생 이름·전사·내부 점수를 렌더링하는 화면인데,
 * 그 화면을 열 때마다 제3자에게 Referer·IP·시각이 나가는 셈이었다.
 * 그래서 woff2 를 저장소에 넣고 여기서 직접 선언한다. CSP 는 font-src 'self' 다.
 *
 * 2026-09-01, 글꼴을 바꾼 이유:
 *
 * 예전 조합은 DM Sans(본문) + DM Serif Display(제목)였고, 둘 다 **라틴 전용**
 * 서브셋이었다. 이 앱의 화면은 대부분 한글이다. 즉 실제로 보이던 글꼴은 웹폰트가
 * 아니라 접속한 기기의 시스템 글꼴이었다 — 맥에서는 Apple SD Gothic Neo, 윈도우에서는
 * Malgun Gothic. 두 글꼴은 굵기 축도 글자 폭도 다르므로, 같은 화면이 기기마다 다르게
 * 보였고 "P4 레벨" 처럼 라틴과 한글이 한 줄에 섞이면 x-height 가 어긋났다.
 *
 * Pretendard 는 한글과 라틴을 같은 골격으로 그린 글꼴이라 그 이음매가 없다.
 * 가변 폰트 하나로 45–920 굵기를 전부 덮으므로 굵기별 파일도 필요 없다.
 *
 * 파일 하나 · 2.0MB. 라틴 전용 80KB 였던 것에 비하면 크지만, 한글 11,172 음절을
 * 전부 담은 값이다. **서브셋(KS X 1001 2,350자)으로 줄이지 않은 것은 의도적이다** —
 * 이 앱이 렌더링하는 주요 내용이 수강생 이름이고, 서브셋 밖 음절이 든 이름 하나가
 * 조용히 시스템 글꼴로 떨어지는 것이 2MB 를 아끼는 것보다 나쁘다. README 의 경고와
 * 같은 이유다: 글리프가 빠지면 아무 소리 없이 폴백한다.
 * font-display: swap 이므로 내려받는 동안 화면이 비지는 않는다.
 *
 * 라이선스: SIL Open Font License 1.1 — fonts/OFL-Pretendard.txt.
 * ───────────────────────────────────────────── */

@font-face {
  font-family: 'Pretendard Variable';
  font-style: normal;
  /* 가변 축 전체. 업스트림은 45–920 으로 선언하지만 100–900 으로 적어 두면
     브라우저가 요청한 굵기를 축 범위 안으로 클램프한다. */
  font-weight: 100 900;
  font-display: swap;
  /* format('woff2') 로 선언한다. 업스트림의 'woff2-variations' 는 폐기된 표기이고,
     지금 브라우저는 woff2 안에 가변 축이 있으면 알아서 쓴다. */
  src: url('PretendardVariable.woff2') format('woff2');
}

/* ─────────────────────────────────────────────
 * 타이포그래피 토큰.
 *
 * 여기 두는 이유: fonts.css 는 세 화면군(로그인·콘솔 = admin.css, 업로드·평가 =
 * style.css, 그리고 rate.php 의 인라인 블록)에서 **모두** 먼저 로드된다.
 * 글꼴 이름과 자간을 파일마다 적으면 다음에 고칠 때 한 곳이 빠진다.
 *
 * 자간이 토큰인 이유가 핵심이다. 예전에는 제목이 세리프(DM Serif Display),
 * 본문이 산세리프였으므로 **글꼴 종류 자체가** 위계를 만들었다. 이제 전부 한 가족이니
 * 위계는 굵기와 자간이 만든다. 그래서 자간은 장식이 아니라 구조다.
 *
 * 값이 크기별로 나뉘어 있는 것도 의도적이다. 자간은 광학적 속성이라 절대 크기를 따른다 —
 * 48px 에서 알맞은 -0.032em 을 14px 본문에 그대로 쓰면 글자가 서로 붙는다.
 * 그리고 **한글은 라틴보다 음수 자간을 덜 견딘다**. 네모틀 안에 획이 이미 꽉 차 있어서
 * 조금만 좁혀도 뭉친다. 아래 값은 라틴 기준 관행보다 한 단계씩 완만하다.
 * ───────────────────────────────────────────── */

:root {
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --tr-display: -0.032em;  /* 32px 이상 — 히어로, 브랜드 */
  --tr-title:   -0.022em;  /* 20–31px — 페이지 제목 */
  --tr-lead:    -0.012em;  /* 16–19px — 도입 문단, 큰 수치 */
  --tr-body:    -0.004em;  /* 13–15px — 본문. 0 이 아닌 것은 Pretendard 의
                              기본 자간이 화면용으로 약간 넉넉하기 때문이다 */
  --tr-eyebrow:  0.09em;   /* 대문자 마이크로 라벨 — 여기서만 자간을 벌린다 */
}