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

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

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

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

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

apps/site/src/components/Metrics.astro

@@ -7,73 +7,107 @@ const feature = c.items.filter((m) => m.feature);
 const rest = c.items.filter((m) => !m.feature);
 ---
 
-{/* 레이아웃 패밀리: 벤토. 항목 수만큼 셀이 있고 빈 칸이 없다 */}
+{/*
+  레이아웃 패밀리: 수치 조판.
+  카드에 담지 않는다. 숫자가 크기와 정렬선으로 스스로 위계를 만든다.
+  카드는 elevation 이 진짜 위계를 나를 때만 쓴다는 규칙을 여기서 지킨다.
+*/}
 <section class="section metrics" aria-labelledby="metrics-h">
-  <p class="eyebrow reveal">{c.eyebrow}</p>
-  <h2 id="metrics-h" class="reveal">{c.h2}</h2>
+  <div class="head">
+    <p class="eyebrow reveal">{c.eyebrow}</p>
+    <h2 id="metrics-h" class="reveal">{c.h2}</h2>
+  </div>
   <p class="lead metrics-lead reveal">{c.lead}</p>
 
-  <div class="full bento">
+  <div class="full figures">
     {
       feature.map((m, i) => (
-        <div class="cell cell-lg glass glass-2 lift reveal" style={`--reveal-delay:${i * 70}ms`}>
-          <span class="cell-value nums">{m.value}</span>
-          <span class="cell-label">{m.label}</span>
-          <span class="cell-note muted">{m.note}</span>
-        </div>
-      ))
-    }
-    {
-      rest.map((m, i) => (
-        <div class="cell glass lift reveal" style={`--reveal-delay:${(i + 2) * 70}ms`}>
-          <span class="cell-value nums">{m.value}</span>
-          <span class="cell-label">{m.label}</span>
-          <span class="cell-note muted">{m.note}</span>
+        <div class="fig fig-lead reveal" style={`--reveal-delay:${i * 80}ms`}>
+          <span class="fig-value nums">{m.value}</span>
+          <span class="fig-label">{m.label}</span>
+          <span class="fig-note muted">{m.note}</span>
         </div>
       ))
     }
+
+    <dl class="fig-rest">
+      {
+        rest.map((m, i) => (
+          <div class="row reveal" style={`--reveal-delay:${(i + 2) * 50}ms`}>
+            <dt>{m.label}</dt>
+            <dd class="nums">{m.value}</dd>
+            <dd class="row-note muted">{m.note}</dd>
+          </div>
+        ))
+      }
+    </dl>
   </div>
 
   <p class="caveat muted reveal">{c.caveat}</p>
 </section>
 
 <style>
-  .metrics-lead { margin-block: var(--space-4) var(--space-6); }
+  .metrics-lead { margin-block: var(--space-4) var(--space-7); max-width: 30em; }
 
-  .bento {
-    display: grid;
-    gap: var(--space-3);
-    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
+  .figures {
     max-width: 1180px;
     margin-inline: auto;
     padding-inline: var(--space-4);
+    display: grid;
+    /* 비대칭. 큰 수치 둘이 왼쪽을 차지하고 나머지는 오른쪽 여백에 흐른다 */
+    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+    column-gap: var(--space-7);
+    row-gap: var(--space-6);
+    align-items: start;
   }
-  .cell {
+
+  .fig-lead { display: grid; gap: var(--space-1); }
+  .fig-lead:nth-child(2) {
+    /* 두 번째 큰 수치는 한 칸 내려앉는다 */
+    margin-top: var(--space-6);
+  }
+  .fig-value {
+    font-size: clamp(3.4rem, 2rem + 5vw, 6rem);
+    line-height: 0.92;
+    font-weight: 620;
+    letter-spacing: -0.04em;
+    color: var(--accent);
+  }
+  .fig-label { font-size: var(--step-1); font-weight: 500; margin-top: var(--space-2); }
+  .fig-note { font-size: var(--step-0); max-width: 22em; }
+
+  /* 나머지 수치는 오른쪽 열에서 두 칸을 세로로 이어 쓴다 */
+  .fig-rest {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    margin: 0;
     display: grid;
     align-content: start;
-    gap: var(--space-1);
-    padding: var(--space-4);
   }
-  /* 두 항목만 크게. 나머지는 조용히 받친다 */
-  .cell-lg {
-    grid-column: span 2;
-    box-shadow: var(--glass-hi), var(--shadow-3);
+  .row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: var(--space-4);
+    align-items: baseline;
+    padding-block: var(--space-3);
+    border-top: 1px solid var(--line);
   }
-  .cell-lg .cell-value { color: var(--accent); }
-
-  .cell-value {
-    font-size: var(--step-3);
-    font-weight: 600;
-    line-height: 1.1;
-    letter-spacing: var(--tracking-display);
+  .row:last-child { border-bottom: 1px solid var(--line); }
+  dt { font-weight: 500; }
+  dd { margin: 0; }
+  dd.nums { font-size: var(--step-1); color: var(--accent); justify-self: end; }
+  .row-note {
+    grid-column: 1 / -1;
+    font-size: var(--step-0);
+    margin-top: var(--space-1);
+    max-width: 32em;
   }
-  .cell-lg .cell-value { font-size: var(--step-4); }
-  .cell-label { font-weight: 500; }
-  .cell-note { font-size: var(--step-0); }
 
-  .caveat { margin-top: var(--space-5); font-size: var(--step-0); }
+  .caveat { margin-top: var(--space-6); font-size: var(--step-0); max-width: 34em; }
 
-  @media (max-width: 700px) {
-    .cell-lg { grid-column: span 1; }
+  @media (max-width: 860px) {
+    .figures { grid-template-columns: 1fr; }
+    .fig-rest { grid-column: 1; grid-row: auto; }
+    .fig-lead:nth-child(2) { margin-top: 0; }
   }
 </style>