패럴랙스에 기준면을 준다 — 배경 격자와 광원 레이어

배경이 단색이면 패럴랙스는 성립하지 않는다. 앞의 것이 몇 px 어긋나도
비교할 대상이 없다. 히어로 말고는 기준면이 없어 시차가 안 보였다.

배경 이미지를 사 오는 대신 이 페이지가 이미 주장하는 것을 그렸다
  .bg-grid  간격 눈금 격자. 셀이 --grid-cell = --space-6
            파이프라인 · 수치. "모든 값이 토큰에서 나온다"가 배경에서도 성립
  .bg-glow  광원 블롭. 섹션마다 --glow-x 로 자리를 옮긴다
            재료 · 설치. 히어로의 빛이 마지막 CTA 에서 돌아온다

실측 3층 (스크롤 1000 -> 1600)
  격자 +14.9px  ·  산출물 -14px  ·  단계명 0
  한 층은 반드시 고정이다. 전부 움직이면 그냥 흔들리는 페이지다

그리드 wide 트랙을 좁은 화면에서 닫는다
  고정 10rem 이라 모바일에서도 좌우 80px 이 살아남아, 390px 에서 본문이
  x=112 부터 시작하고 폭이 278px 로 줄어 제목이 네 줄로 접혔다.
  --wide-pad 를 clamp 로 바꿔 닫았다. 이제 전부 x=32 에서 시작하고 두 줄이다

파이프라인 정렬선을 하나로
  제목 x=371 / 리드 x=435 / 스파인 x=143 이던 것을 전부 x=183 으로.
  제목·리드·브리프를 스파인과 같은 컨테이너에 넣었다

히어로 높이를 콘텐츠에 맞춘다
  모바일에서 콘텐츠 390px 에 736px 을 씌워 여백이 화면의 41% 였고
  다음 섹션이 화면 밖으로 밀려 스크롤 단서까지 사라졌다.
  모바일 min-height 제거(736 -> 554), 데스크톱 88dvh -> 78dvh
  배경 마스크 62% -> 82% 로 늘려 하단의 죽은 띠를 없앴다

스킬 motion.md 에 "패럴랙스에는 기준면이 필요하다" 를 추가.
페이지가 주장하는 것을 배경으로 그리는 표와, 한 층은 고정이라는 규칙.

390px / 1440px 실렌더: 가로 스크롤 0, 대비 실패 0. 테스트 22개 통과

apps/site/src/components/Pipeline.astro

@@ -14,17 +14,20 @@ const { c } = Astro.props;
   ③ 의미  — <ol role="list"> — 화면에 번호는 없지만 보조기술은 "6개 중 n번째"로 읽는다
              role="list" 는 list-style:none 일 때 Safari/VoiceOver 가 목록 의미를 버리는 것을 되돌린다
 */}
-<section id="pipeline" class="section" aria-labelledby="pipeline-h">
-  <p class="eyebrow reveal">{c.eyebrow}</p>
-  <h2 id="pipeline-h" class="reveal">{c.h2}</h2>
-  <p class="lead pipeline-lead reveal">{c.lead}</p>
-
-  <div class="brief reveal"><div class="brief-core">
-    <span class="brief-label">{c.briefLabel}</span>
-    <p class="brief-text">{c.brief}</p>
-  </div></div>
-
+<section id="pipeline" class="section bg-grid" aria-labelledby="pipeline-h">
+  {/* 제목·리드·브리프·스파인을 한 컨테이너에 담는다.
+      섹션 기본 그리드에 두면 제목은 main 칼럼의 음수 마진으로 x=371,
+      리드는 x=435, 스파인은 x=143 에 서서 정렬선이 셋이 된다. */}
   <div class="full spine-wrap">
+    <p class="eyebrow reveal">{c.eyebrow}</p>
+    <h2 id="pipeline-h" class="reveal">{c.h2}</h2>
+    <p class="lead pipeline-lead reveal">{c.lead}</p>
+
+    <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) => (
@@ -43,9 +46,13 @@ const { c } = Astro.props;
 </section>
 
 <style>
+  /* 컨테이너는 넓어도 읽는 것은 measure 안에 둔다 */
   .pipeline-lead {
     margin-bottom: var(--space-6);
+    max-width: var(--measure);
   }
+  .brief { max-width: var(--measure); }
+  #pipeline-h { max-width: 24ch; }
 
   /* 스파인은 페이지의 본체다. main 칼럼(561px)에 가두면
      페이지에서 가장 긴 섹션이 가장 좁아진다.