카드를 걷어내고 구조를 비대칭으로

'전체적인 레이아웃이나 카드가 너무 전형적이지 않나요'라는 지적.
정확했다. 유리라는 재질만 바뀌었을 뿐 구조는 카드 나열 그대로였다.
우리 규칙이 이미 그걸 금지하고 있었다.

  layout.md: 벤토는 더 이상 차별화가 아니라 새 기본값이다
  design-taste 4.4: 카드는 elevation 이 진짜 위계를 나를 때만

바꾼 것
- 수치: 벤토 카드 -> 조판. 큰 수치 둘이 왼쪽을 차지하고 나머지는
  오른쪽 열에 목록으로 흐른다. 상자 없음
- 규칙: 2열 카드 -> 어긋난 목록. 홀수 항목은 근거가 한 칸 더 밀린다
- 프리플라이트: 카드 -> 로그. 세로선 하나가 형식을 만든다
- 설치 명령·재료 타일: 액자 제거
- 섹션 제목이 본문 정렬선보다 왼쪽으로 나온다. 같은 양을 전체에서 반복

유리 카드 29개 -> 5개. 정말 떠 있어야 하는 것에만 남겼다.
페이지의 수치와 프리플라이트 로그에도 그대로 적었다.

apps/site/src/components/Preflight.astro

@@ -5,7 +5,11 @@ interface Props { c: Content["preflight"]; }
 const { c } = Astro.props;
 ---
 
-{/* 레이아웃 패밀리: 2열 대비. 왼쪽이 걸린 것, 오른쪽이 고친 것 */}
+{/*
+  레이아웃 패밀리: 로그.
+  걸린 것과 고친 것이 한 줄에서 이어진다. 상자에 담지 않는다.
+  왼쪽 세로선이 로그라는 형식을 만든다.
+*/}
 <section class="section preflight" aria-labelledby="pf-h">
   <h2 id="pf-h" class="reveal">{c.h2}</h2>
   <p class="lead pf-lead reveal">{c.lead}</p>
@@ -13,11 +17,8 @@ const { c } = Astro.props;
   <div class="full log">
     {
       c.items.map((i, idx) => (
-        <article class="entry glass lift reveal" style={`--reveal-delay:${idx * 60}ms`}>
-          <p class="caught">
-            <span class="tick" aria-hidden="true" />
-            {i.caught}
-          </p>
+        <article class="entry reveal" style={`--reveal-delay:${idx * 45}ms`}>
+          <p class="caught">{i.caught}</p>
           <p class="fixed muted">{i.fixed}</p>
         </article>
       ))
@@ -28,43 +29,51 @@ const { c } = Astro.props;
 </section>
 
 <style>
-  .pf-lead { margin-block: var(--space-4) var(--space-6); }
+  .pf-lead { margin-block: var(--space-4) var(--space-7); max-width: 30em; }
 
   .log {
     max-width: 1180px;
     margin-inline: auto;
     padding-inline: var(--space-4);
     display: grid;
-    gap: var(--space-3);
   }
   .entry {
+    position: relative;
+    padding: var(--space-4) 0 var(--space-4) var(--space-5);
     display: grid;
-    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
     gap: var(--space-5);
-    padding: var(--space-4);
     align-items: start;
   }
-
-  .caught {
-    margin: 0;
-    font-weight: 500;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    gap: var(--space-2);
-    align-items: start;
+  /* 로그를 관통하는 세로선. 항목마다 상자를 두르지 않는다 */
+  .entry::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--line);
   }
-  /* 걸린 항목을 표시하는 짧은 획. 상태 점이 아니라 획이다 */
-  .tick {
-    width: 3px;
-    height: 1.1em;
-    margin-top: 0.2em;
-    border-radius: var(--radius-sm);
+  .entry:first-child::before { top: var(--space-4); }
+  .entry:last-child::before { bottom: var(--space-4); }
+  /* 걸린 지점을 표시하는 짧은 획 */
+  .entry::after {
+    content: "";
+    position: absolute;
+    left: -2px;
+    top: calc(var(--space-4) + 0.55em);
+    width: 5px;
+    height: 5px;
+    border-radius: 999px;
     background: var(--accent);
   }
-  .fixed { margin: 0; font-size: var(--step-0); }
-  .pf-note { margin-top: var(--space-5); font-size: var(--step-0); }
 
-  @media (max-width: 760px) {
+  .caught { margin: 0; font-weight: 500; }
+  .fixed { margin: 0; font-size: var(--step-0); }
+  .pf-note { margin-top: var(--space-6); font-size: var(--step-0); max-width: 34em; }
+
+  @media (max-width: 800px) {
     .entry { grid-template-columns: 1fr; gap: var(--space-2); }
   }
 </style>