소개 페이지를 스킬 전체 경로로 다시 만들고, 배운 것을 스킬에 반영

방향을 글래스로 바꿀 때 2단계 재결정을 하고도 전체 경로로 올리지 않았다.
레퍼런스 없이 재질만 갈아끼운 결과가 스위스 미니멀 뼈대에 유리를 바른
페이지였고, design.md 는 초판 결정을 그대로 담고 있었다. 0단계부터 다시 돌았다.

1단계 — 레퍼런스 3개를 computed style 까지 실측
  R1 zed.dev      컨테이너 1120px 과 전체폭이 교대 · radius 2px 621회
  R2 lusion.co    3D 는 액자 안, 텍스트는 액자 밖 · 배경 흰색 · h1 36px
  R3 Codrops      DOM 이 구조를 소유하고 WebGL 은 uniform 만 만진다

2단계 — 프리셋 swiss-minimal → dark-instrument, 컨셉 "검사대 위의 물체"
        유리는 액자에만 남긴다(헤더 · 검사대 · 명령창)

4단계 — 히어로 재구성. 캔버스를 배경에서 빼 액자 안으로, 텍스트는 밖으로
        판독기가 통과한 게이트를 표시한다(값이 바뀔 때만 DOM 을 쓴다)
        파이프라인을 2열로 열어 625px → 1113px

5단계에서 실제로 걸린 것
  게이트 3  radius 4종 → 2종 (3px / 14px, pill 제거)
  게이트 1  base.css 토큰 밖 rgb() 7곳 → 토큰
  게이트 7  헤더 English 2.59:1 → ink 로 상향
  카운트    히어로 h1 4줄 → 2줄
  셰이더    판이 정면이라 프레넬이 구조적으로 0. 법선을 굽히고 UV 로 테두리
  셰이더    gl_FragCoord 를 렌더 타겟 크기로 나눠 UV 가 1 을 넘고 있었다
  수치      페이지가 실은 "타입 단계 5단계"가 실측 9종이었다. lang 속성이
            스케일을 재정의해 링크 하나가 16px 로 새고 있었다
  측정      대비 스크립트가 반투명 배경을 불투명으로 계산했다. 알파 합성으로 교정

스킬 반영
  three.md    §0-A 배치 원리(3D 는 액자 안) · 프레넬 0 함정 · gl_FragCoord 함정
  preflight.md 대비 측정 시 알파 합성. 검사 도구가 틀리면 통과도 의미가 없다

최종: 하드 게이트 12/12, 대비 실패 0, 320px 오버플로 0, 테스트 22개 통과

apps/site/src/components/Pipeline.astro

@@ -19,24 +19,27 @@ const { c } = Astro.props;
   <h2 id="pipeline-h" class="reveal">{c.h2}</h2>
   <p class="lead pipeline-lead reveal">{c.lead}</p>
 
-  <div class="brief glass reveal"><div class="brief-core">
+  <div class="brief reveal"><div class="brief-core">
     <span class="brief-label">{c.briefLabel}</span>
     <p class="brief-text">{c.brief}</p>
   </div></div>
 
-  <ol role="list" class="spine">
-    {
-      c.stages.map((s) => (
-        <li class="stop reveal">
-          <h3 class="stop-name">{s.name}</h3>
-          <p class="stop-does">{s.does}</p>
-          <p class:list={["stop-becomes", { mono: s.mono }]}>{s.becomes}</p>
-        </li>
-      ))
-    }
-  </ol>
-
-  <p class="after muted reveal">{c.after}</p>
+  <div class="full spine-wrap">
+    <ol role="list" class="spine">
+      {
+        c.stages.map((s) => (
+          <li class="stop reveal">
+            <div class="stop-head">
+              <h3 class="stop-name">{s.name}</h3>
+              <p class="stop-does">{s.does}</p>
+            </div>
+            <p class:list={["stop-becomes", { mono: s.mono }]}>{s.becomes}</p>
+          </li>
+        ))
+      }
+    </ol>
+    <p class="after muted reveal">{c.after}</p>
+  </div>
 </section>
 
 <style>
@@ -44,6 +47,15 @@ const { c } = Astro.props;
     margin-bottom: var(--space-6);
   }
 
+  /* 스파인은 페이지의 본체다. main 칼럼(561px)에 가두면
+     페이지에서 가장 긴 섹션이 가장 좁아진다.
+     R1(zed.dev) 실측: 컨테이너 1120px 과 전체폭이 교대한다. */
+  .spine-wrap {
+    max-width: 1180px;
+    margin-inline: auto;
+    padding-inline: var(--space-4);
+  }
+
   .brief { margin-bottom: var(--space-2); }
   .brief-core { padding: var(--space-4); }
   .brief-label {
@@ -80,7 +92,12 @@ const { c } = Astro.props;
   .stop {
     position: relative;
     padding-block: var(--space-4);
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+    gap: var(--space-5);
+    align-items: start;
   }
+  .stop-head { min-width: 0; }
   .stop + .stop {
     border-top: 1px solid var(--line);
   }
@@ -105,7 +122,8 @@ const { c } = Astro.props;
   }
   .stop-does {
     color: var(--ink-muted);
-    margin-bottom: var(--space-3);
+    margin: 0;
+    max-width: 34ch;
   }
 
   /* 브리프가 이 단계에서 무엇이 됐는가 — 변화가 순서를 만든다 */
@@ -131,6 +149,14 @@ const { c } = Astro.props;
 
   .after {
     margin-top: var(--space-5);
+    max-width: var(--measure);
+  }
+
+  @media (max-width: 780px) {
+    .stop {
+      grid-template-columns: 1fr;
+      gap: var(--space-3);
+    }
   }
 
   /* 스크롤 진입 페이드를 넣었다가 뺐다.