소개 페이지 5단계 감사 — 실렌더에서 결함 3건

정적 검사로는 안 잡히고 320px 실렌더에서만 나온 것들이다.
발견 내용은 페이지의 프리플라이트 로그 섹션에 그대로 실었다.

1. 320px 가로 오버플로 13px
   표를 overflow 컨테이너로 감쌌는데도 넘쳤다. grid item 의 기본
   min-width 가 auto 라 콘텐츠가 부모를 밀어낸다. min-width:0 이
   있어야 overflow-x 가 실제로 작동한다.

2. 다크 밴드 버튼 대비 2.88:1 (기준 4.5:1)
   밴드가 --accent 만 반전시키고 --accent-ink 는 흰색으로 뒀다.
   --accent-ink-inverse 토큰을 추가해 함께 반전시킨다. 6.21:1 로 회복.

3. 파이프라인 6단계 중 뒤 3개가 영영 opacity 0  ← 가장 심각
   animation-range 의 cover 22% 에 페이지 하단 요소는 도달하지 못한다.
   스크롤을 끝까지 내려도 이 페이지의 본체가 절반 사라진 상태였다.
   이펙트를 끄면 보이지만 켜면 사라지는 것은 폴백이 있는 것과 다르다.
   스크롤 진입 연출을 제거했다. 남은 모션은 호버·포커스뿐이다.

하드 게이트 12/12 전부 통과 (8개 정적 + 4개 실렌더).
실렌더 대비 최저 6.21:1, AA 미달 0건.

apps/site/src/components/CopyCommand.astro

@@ -19,6 +19,7 @@ const { command, copyLabel, copiedLabel, note } = Astro.props;
 <style>
   .cmd {
     display: flex;
+    min-width: 0;
     align-items: stretch;
     gap: 0;
     border: 1px solid var(--line-strong);
@@ -27,7 +28,7 @@ const { command, copyLabel, copiedLabel, note } = Astro.props;
     max-width: 34em;
   }
   .cmd-text {
-    flex: 1 1 auto;
+    flex: 1 1 0;
     min-width: 0;
     padding: var(--space-3);
     overflow-x: auto;
@@ -38,6 +39,7 @@ const { command, copyLabel, copiedLabel, note } = Astro.props;
     /* 독립 컨트롤이므로 44px 이상 */
     min-width: 5.5em;
     min-height: 44px;
+    white-space: nowrap;
     padding-inline: var(--space-3);
     border: 0;
     border-left: 1px solid var(--line-strong);

apps/site/src/components/Pipeline.astro

@@ -128,25 +128,10 @@ const { c } = Astro.props;
     margin-top: var(--space-5);
   }
 
-  /* 진입 연출은 하나뿐이고, 없어도 전부 읽힌다.
-     scroll-driven animation 이라 scroll 리스너가 없다. */
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
-      .stop {
-        animation: stop-in linear both;
-        animation-timeline: view();
-        animation-range: entry 10% cover 22%;
-      }
-      @keyframes stop-in {
-        from {
-          opacity: 0;
-          transform: translateY(8px);
-        }
-        to {
-          opacity: 1;
-          transform: none;
-        }
-      }
-    }
-  }
+  /* 스크롤 진입 페이드를 넣었다가 뺐다.
+     `animation-range: entry 10% cover 22%` 로는 페이지 하단 요소가 cover 22% 에
+     영영 도달하지 못해, 6개 정거장 중 뒤 3개가 opacity 0 으로 잠겼다.
+     이펙트를 끄면 보이지만 켜면 사라지는 것은 폴백이 있는 것과 다르다.
+     이 섹션은 페이지의 본체다. 콘텐츠를 걸고 하는 연출은 하지 않는다. */
+
 </style>

apps/site/src/components/Typography.astro

@@ -37,7 +37,7 @@ const { c } = Astro.props;
   .demo {
     display: grid;
     gap: var(--space-4);
-    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
     margin-bottom: var(--space-5);
   }
   .demo-col {