fix(site): 히어로 h1 의 clamp 하한을 h2 기준으로 잡는다

데스크톱만 보고 고쳐서 좁은 화면의 위계가 사라져 있었다.
h1 만 vw 에 비례해 줄고 h2 는 고정 스케일이라 둘이 만난다.

  1440px  65.4 / 33.2 = 1.97 배
  1024px  52.5 / 33.2 = 1.58 배
   390px  35.2 / 33.2 = 1.06 배   ← 사실상 같은 크기

하한을 3rem(48px, h2 의 1.45 배)으로 올려 전 구간을 확보했다.
320 / 390 / 768 / 1024 / 1440 에서 1.45 · 1.45 · 1.63 · 1.87 · 2.12 배.

tokens.md 에 "clamp 의 하한은 같이 변하지 않는 값을 기준으로 정한다" 와
최소·중간·최대 폭 세 곳에서 계산해 확인하라는 절차를 기록했다.

apps/site/src/components/Hero.astro

@@ -124,8 +124,12 @@ const { c, ui } = Astro.props;
   .hero-title {
     /* step-4(41.5px)는 h2(33px)보다 8px 클 뿐이라 위계가 서지 않았다.
        한때 --display(112px)를 썼다가 배경과 싸워서 줄였는데, 줄이다가
-       h2 와 구별이 안 되는 데까지 왔다. 그 사이 값이 필요하다. */
+       h2 와 구별이 안 되는 데까지 왔다. 그 사이 값이 필요하다.
-    font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem);
+
+       하한이 중요하다. h1 만 vw 에 비례해 줄고 h2 는 고정이라,
+       하한을 2.2rem 으로 두면 390px 화면에서 35.2px 대 33.2px —
+       1.06 배로 사실상 같은 크기가 된다. 하한은 h2 기준으로 정한다. */
+    font-size: clamp(3rem, 1.9rem + 3.1vw, 4.4rem);
     line-height: 1.08;
     letter-spacing: var(--tracking-display);
     max-width: 15ch;

packages/skill/references/tokens.md

@@ -142,16 +142,43 @@
 배경 그래픽과 싸워서 줄였는데, 줄이다가 h2 와 붙는 데까지 왔다.
 **한 극단에서 도망치다 반대쪽 극단에 도착한 것이다.**
 
-기준: **히어로 h1 은 섹션 h2 의 1.8~2.2 배.** 그 아래면 위계가 없고,
+기준: **넓은 화면에서 히어로 h1 은 섹션 h2 의 2 배 안팎.** 그 아래면 위계가 없고,
-그 위는 배경·여백과 싸우기 시작한다. 고친 값은 65.4px 로 h2 의 1.97 배다.
+그 위는 배경·여백과 싸우기 시작한다.
+
+### clamp 의 하한은 h2 를 기준으로 정한다
+
+여기서 한 번 더 틀렸다. 데스크톱만 보고 고쳤더니 이렇게 됐다.
 
 ```css
-/* 스케일의 마지막 단계를 그대로 쓰지 말고, 히어로 전용 구간을 따로 잡는다 */
 .hero-title { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem); }
 ```
 
-> 확인법: h1 과 h2 를 나란히 놓고 보지 말고 **크기를 재라.**
+| 화면 | h1 | h2 | 비율 |
-> 배경이 화려하면 큰 글자도 작아 보여서 눈이 속는다.
+|---|---|---|---|
+| 1440px | 65.4px | 33.2px | 1.97 배 |
+| 1024px | 52.5px | 33.2px | 1.58 배 |
+| 390px | **35.2px** | 33.2px | **1.06 배** |
+
+**h1 만 `vw` 에 비례해 줄고 h2 는 고정이라, 좁아질수록 둘이 만난다.**
+데스크톱에서 고친 위계가 모바일에서 그대로 사라진다.
+
+하한을 h2 의 1.4 배 이상으로 잡으면 전 구간이 유지된다.
+
+```css
+/* 하한 3rem = 48px = h2(33.2px)의 1.45 배 */
+.hero-title { font-size: clamp(3rem, 1.9rem + 3.1vw, 4.4rem); }
+```
+
+| 화면 | 320 | 390 | 768 | 1024 | 1440 |
+|---|---|---|---|---|---|
+| 비율 | 1.45 | 1.45 | 1.63 | 1.87 | 2.12 |
+
+좁은 화면에서 2 배를 고집할 필요는 없다 — 폭이 좁으면 큰 글자가 줄만 늘린다.
+**1.4 배가 하한, 2 배 안팎이 상한**이고 그 사이를 `vw` 가 잇는다.
+
+> 확인법: 한 화면 폭에서만 재지 마라. `clamp` 를 쓴 값은 **최소 폭·중간 폭·최대 폭
+> 세 곳에서 계산해 보고**, 같이 변하지 않는 값(고정 스케일의 h2 등)과의 비율을 봐라.
+> 그리고 눈으로 비교하지 말고 크기를 재라 — 배경이 화려하면 큰 글자도 작아 보인다.
 
 ### 제목 다음 간격은 전역에서 한 번 정한다