타이포그래피 스킬 신설 + 폴백 메트릭 보정

'폰트 관련된 것도 스킬이 좀 잘 해줘야 하는데 그렇지 못한 것 같다'는 지적.
점검해보니 size-adjust, ascent-override, unicode-range, OpenType 기능,
FOUT/FOIT, 폰트 라이선스가 스킬 어디에도 없었다. font-display 와 서브셋은
tokens.md 에 한 줄씩뿐이었다.

references/typography.md 신설
- 고르는 절차: 개수를 먼저 정하고, 성격을 브리프에서 끌어내고,
  x-height·대비·웨이트 범위·숫자 형태를 실제로 재서 검증한다
- 가변 폰트: 축, 표준 속성 우선, 가변 축 애니메이션이 왜 게이트 8 위반인지
- 로딩: font-display 값별 선택 기준, preload 조건, unicode-range
- 폴백 메트릭: size-adjust 와 override 3종. 재는 코드 포함
- OpenType: tabular-nums 등. font-variant-* 를 font-feature-settings 보다 먼저
- 한글: 동적 서브셋 원리, 웨이트가 라틴과 다르게 보이는 이유, 스택 순서
- 라이선스: 웹 임베딩 허용 여부가 상업 이용 허용과 다르다는 것

그리고 이 페이지가 그 규칙을 어기고 있었다
- 실측: 맑은 고딕이 Pretendard 보다 13.0% 넓다. 교체 순간 줄바꿈이 다시 잡힌다
- fonts.css 신설. OS 별로 폴백을 따로 정의하고 size-adjust 로 맞췄다
- 실측 차이 13.0% -> 0.0%

preflight.md 에 폰트 검사 6개를 추가했다. 지금까지 하나도 없었다.

apps/site/src/styles/fonts.css

@@ -0,0 +1,48 @@
+/* ============================================================
+   폰트 폴백 메트릭 보정
+
+   웹폰트가 늦게 오면 브라우저는 시스템 폰트로 먼저 그리고 나중에 교체한다.
+   두 폰트의 폭과 행 높이가 다르면 그 순간 레이아웃이 튄다. CLS 의 흔한 원인이고
+   font-display: swap 을 쓰는 한 반드시 일어난다.
+
+   그래서 폴백 폰트를 실제 폰트의 치수에 맞춘다.
+   아래 숫자는 이 페이지에서 직접 잰 값이다. 추정치가 아니다.
+
+     한글  Pretendard 1434px  vs  맑은 고딕 1620px          -> 88.5%
+                                  Apple SD Gothic Neo 1510px -> 94.9%
+     영문  Switzer    1580px  vs  Arial     1501px          -> 105.3%
+
+   재는 법은 references/typography.md §4 에 있다.
+   OS 마다 시스템 폰트가 다르므로 폴백도 따로 정의한다. 하나로 뭉치면
+   한쪽 OS 에서는 보정이 틀린다.
+   ============================================================ */
+
+/* ---- 한글: Windows ---------------------------------------- */
+@font-face {
+  font-family: "KO Fallback Win";
+  src: local("Malgun Gothic"), local("맑은 고딕");
+  size-adjust: 88.5%;
+  ascent-override: 108%;
+  descent-override: 27%;
+  line-gap-override: 0%;
+}
+
+/* ---- 한글: macOS ------------------------------------------ */
+@font-face {
+  font-family: "KO Fallback Mac";
+  src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeo-Regular");
+  size-adjust: 94.9%;
+  ascent-override: 100%;
+  descent-override: 25%;
+  line-gap-override: 0%;
+}
+
+/* ---- 라틴 -------------------------------------------------- */
+@font-face {
+  font-family: "EN Fallback";
+  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
+  size-adjust: 105.3%;
+  ascent-override: 110%;
+  descent-override: 28%;
+  line-gap-override: 0%;
+}

apps/site/src/styles/tokens.css

@@ -95,7 +95,8 @@
 
 /* ---- 타입: 한국어판 --------------------------------------- */
 [lang="ko"] {
-  --font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
+  --font-sans: "Pretendard Variable", Pretendard,
+               "KO Fallback Win", "KO Fallback Mac", system-ui, sans-serif;
 
   --step-0: 1.0625rem;
   --step-1: 1.328rem;
@@ -119,7 +120,7 @@
 
 /* ---- 타입: 영어판 ------------------------------------------ */
 [lang="en"] {
-  --font-sans: "Switzer", system-ui, -apple-system, sans-serif;
+  --font-sans: "Switzer", "EN Fallback", system-ui, -apple-system, sans-serif;
 
   --step-0: 1rem;
   --step-1: 1.25rem;