feat(site): 히어로를 첫인상 크기로 되돌린다

페이지에서 가장 중요한 섹션이 가장 짧았다(0.7 화면). 배분이 중요도와 반대다.

- min-height 72dvh → 88dvh. 100dvh 로 채우지는 않는다. 다음 섹션의 머리가
  조금 보여야 스크롤할 것이 있다는 단서가 된다.
- h1 41.5px → 65.4px. 섹션 h2 가 33.2px 이라 8px 차이였고, 스케일상 한 단계
  위일 뿐 화면에서는 같은 크기로 읽혔다. 처음에 --display(112px)를 썼다가
  배경과 싸워 줄였는데 반대쪽 극단까지 갔다. 지금은 h2 의 1.97 배다.
- 저장소 링크를 헤더로 옮겼으므로 히어로에서는 뺐다. 같은 링크가 두 번 나갔다.

tokens.md 에 히어로 h1 은 섹션 h2 의 1.8~2.2 배라는 기준을 기록했다.

apps/site/src/components/Hero.astro

@@ -55,7 +55,10 @@ const { c, ui } = Astro.props;
     position: relative;
     isolation: isolate;
     overflow: clip;
-    min-height: min(72dvh, 42rem);
+    /* 72dvh 는 0.7 화면이었다. 페이지에서 가장 짧은 섹션이 첫인상이라
+       분량 배분이 중요도와 반대였다. 100dvh 로 채우지는 않는다 —
+       다음 섹션의 머리가 조금 보여야 스크롤할 것이 있다는 단서가 된다. */
+    min-height: min(88dvh, 52rem);
     display: grid;
     align-content: center;
     padding-block: calc(var(--header-h) + var(--space-6)) var(--space-6);
@@ -113,16 +116,19 @@ const { c, ui } = Astro.props;
     margin-inline: auto;
     padding-inline: var(--gutter);
     display: grid;
-    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
     gap: var(--space-5) var(--space-6);
     align-items: center;
   }
 
   .hero-title {
-    font-size: clamp(var(--step-2), 1.1rem + 2.6vw, var(--step-4));
+    /* step-4(41.5px)는 h2(33px)보다 8px 클 뿐이라 위계가 서지 않았다.
-    line-height: 1.12;
+       한때 --display(112px)를 썼다가 배경과 싸워서 줄였는데, 줄이다가
+       h2 와 구별이 안 되는 데까지 왔다. 그 사이 값이 필요하다. */
+    font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem);
+    line-height: 1.08;
     letter-spacing: var(--tracking-display);
-    max-width: 16ch;
+    max-width: 15ch;
     margin: 0;
   }
   [lang="en"] .hero-title { max-width: 18ch; line-height: 1.04; }

apps/site/src/i18n/content.ts

@@ -188,10 +188,7 @@ export const ko: Content = {
     lead: "AI가 만든 티는 못 만들어서가 아니라 결정을 안 해서 난다. 그 결정을 여섯 단계로 강제하는 스킬.",
     install: "npx designpaca",
     installNote: "Node 20.11+ · 설치 대상을 감지해 골라준다",
-    links: [
+    links: [{ label: "npm", href: "https://www.npmjs.com/package/designpaca" }],
-      { label: "저장소", href: "https://git.chanpaca.net/yunchan/designpaca" },
-      { label: "npm", href: "https://www.npmjs.com/package/designpaca" },
-    ],
     stage: {
       alt: "유리판 여섯 장이 깊이 방향으로 나란히 서 있다. 스크롤하면 카메라가 판을 하나씩 통과하고, 통과한 판은 뒤로 물러난다.",
       caption: "판 하나가 단계 하나다. 통과 조건을 채우지 못하면 다음 판으로 가지 않는다.",

packages/skill/references/tokens.md

@@ -126,6 +126,33 @@
 - 섹션 간격은 **본문 간격의 4배 이상**. 좁으면 페이지가 뭉개진다
 - 요소를 정렬할 때 **간격이 아니라 정렬선**을 먼저 맞춰라
 
+### h1 이 h2 보다 한 단계만 크면 위계가 아니다
+
+히어로 제목을 줄이다가 실측에서 이렇게 됐다.
+
+| | 크기 | |
+|---|---|---|
+| h1 (히어로) | 41.5px | `--step-4` |
+| h2 (섹션) | 33.2px | `--step-3` |
+
+**8px 차이.** 스케일상으로는 한 단계 위지만 화면에서는 같은 크기로 읽힌다.
+페이지에서 가장 중요한 문장이 아홉 개의 섹션 제목과 구별되지 않았다.
+
+원인은 과잉 교정이었다. 처음에 `--display`(1440px 에서 112px)를 썼다가
+배경 그래픽과 싸워서 줄였는데, 줄이다가 h2 와 붙는 데까지 왔다.
+**한 극단에서 도망치다 반대쪽 극단에 도착한 것이다.**
+
+기준: **히어로 h1 은 섹션 h2 의 1.8~2.2 배.** 그 아래면 위계가 없고,
+그 위는 배경·여백과 싸우기 시작한다. 고친 값은 65.4px 로 h2 의 1.97 배다.
+
+```css
+/* 스케일의 마지막 단계를 그대로 쓰지 말고, 히어로 전용 구간을 따로 잡는다 */
+.hero-title { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem); }
+```
+
+> 확인법: h1 과 h2 를 나란히 놓고 보지 말고 **크기를 재라.**
+> 배경이 화려하면 큰 글자도 작아 보여서 눈이 속는다.
+
 ### 제목 다음 간격은 전역에서 한 번 정한다
 
 `h2 { margin: 0 }` 리셋과 `p { margin: 0 0 X }` 를 같이 쓰면 **제목과 본문이 붙는다.**