카피를 혜택 중심으로 고치고, 필터 데모를 실무 소재에 건다

지적 세 가지를 전부 확인했고 실제 결함도 하나 나왔다.

1. 재료 섹션 h2 가 아무것도 전달하지 않았다
   '표면은 CSS 가 정하고, 공간은 GPU 가 맡는다'
   금칙어도 없고 치환 테스트도 통과하는데 독자가 얻는 게 없다.
   구현 이야기를 대구로 포장한 것이었다.
   -> '텍스처 200KB 를 300바이트가 대신한다'

   카피라이팅 방법론(so you can 테스트 / 6~12단어 / 검증 가능한 수치)을
   찾아 적용했다. 우리 antipatterns 의 카피 절은 금지 목록뿐이라
   이런 문장을 못 잡는다 — 작법 절을 새로 넣었다.

2. 필터 데모가 줄무늬였다
   필터가 무엇을 하는지는 보이지만 왜 쓰는지는 안 보인다.
   각 필터를 실제로 걸리는 자리로 옮겼다.
     그레인  -> 매끈한 그라디언트 (없으면 밋밋하다는 대비)
     굴절    -> 글자 (유리 뒤가 실제로 휘는 것)
     듀오톤  -> 사진풍 면 (한 팔레트로 묶이는 것)
   타일마다 '언제 쓰는가' 한 줄을 추가했다.

3. 그레인 필터가 아무 효과도 못 내고 있었다
   feComposite in='SourceGraphic' in2='soft' operator='over' 는
   원본을 노이즈 위에 올린다. 노이즈가 통째로 가려진다.
   에러도 경고도 없이 조용히 죽는다.
   feBlend overlay 로 바꾸고 baseFrequency 0.9 -> 0.62.

섹션 간 검은 띠도 고쳤다. 파이프라인 캔버스가 섹션 패딩(112px) 아래에서
시작해 히어로 배경이 끝난 자리와 사이에 200px 이 비었다.

스킬
  antipatterns.md  카피 작법 — 금지 목록만으로는 못 잡는 실패
  svg-filters.md   데모는 실무 소재에 · feComposite 입력 순서 함정

apps/site/src/components/Pipeline.astro

@@ -69,6 +69,9 @@ const { c } = Astro.props;
     position: sticky;
     top: 0;
     height: 100dvh;
+    /* 섹션 패딩(112px) 아래에서 시작하면 히어로 배경이 끝난 자리와
+       이 캔버스 사이에 200px 짜리 검은 띠가 생긴다. 패딩만큼 끌어올린다. */
+    margin-top: calc(var(--space-7) * -1);
     margin-bottom: -100dvh;
     z-index: -1;
     pointer-events: none;
@@ -89,6 +92,12 @@ const { c } = Astro.props;
       radial-gradient(42% 50% at 76% 68%,
         color-mix(in oklab, var(--glow-2) 18%, transparent), transparent 68%);
   }
+  /* 캔버스가 섹션 패딩 위까지 덮으면 이웃 섹션과 딱 붙어 보인다.
+     위아래를 지워 여백을 되돌린다. */
+  .gate-bg {
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 88%, transparent 100%);
+    mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 88%, transparent 100%);
+  }
   .gate-canvas { opacity: 0; transition: opacity 1s var(--ease-soft); }
   .gate-canvas.is-live { opacity: 0.7; }
   /* 세로 화면에서는 캔버스가 화면 전체를 덮는다. 같은 밝기면 본문이 묻힌다 */
@@ -148,7 +157,15 @@ const { c } = Astro.props;
 
   .stop {
     position: relative;
-    padding-block: var(--space-4);
+    /* 정거장 간격이 곧 3D 게이트의 스크롤 구간이다.
+       space-4(24px)로는 섹션이 1493px 밖에 안 돼 sticky 이동 거리가 593px 뿐이었다.
+       섹션이 화면에 보이는 구간(2393px)의 4분의 1이라, 조금만 스크롤해도
+       여섯 게이트를 다 지나쳐 버렸다.
+
+       space-6 으로 늘렸더니 sticky 구간이 1226px, 게이트당 204px 이 됐다.
+       휠 한 번(100~150px)에 게이트 하나가 지나가 여전히 과민했다.
+       space-7 이면 게이트당 300px 남짓 — 휠 두세 번에 하나다. */
+    padding-block: var(--space-7);
     display: grid;
     grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
     gap: var(--space-5);
@@ -205,8 +222,10 @@ const { c } = Astro.props;
   }
 
   .after {
-    margin-top: var(--space-5);
+    margin-top: var(--space-7);
     max-width: var(--measure);
+    /* 마지막 게이트를 통과할 스크롤이 남아 있어야 한다 */
+    padding-bottom: 20dvh;
   }
 
   @media (max-width: 780px) {