소개 페이지 — 스킬을 스스로 적용해 만든 첫 사례

designpaca 파이프라인 0~6단계를 실제로 돌려 만들었다. 근거는 research/site-brief.md,
결정 기록은 apps/site/design.md 에 있다.

한 문장 컨셉
- 이 페이지는 designpaca 를 거쳐 만들어졌고, 절차와 형태 수치를 한국어 기준으로 전부 공개한다

번호 없이 순서 표현 (C-07 회피)
- 파이프라인 6단계를 번호로 매기면 검출률 3위 슬롭 지문에 걸린다
- 시각: 스파인 위 위치가 순서를 만든다 / 내용: 같은 브리프가 단계마다 변한다
- 의미: <ol role="list"> — 화면에 번호 0개, 보조기술에는 "6개 중 n번째"

멀티링구얼
- / = 한국어, /en/ = 영어. 번역이 아니라 각 판을 따로 썼다
- 언어별 레이아웃이 자기 폰트만 로드한다 (판당 2개)
- 조판 섹션은 한국어판에서 주장이고 영어판에서 사례다

실측
- JS 314B (gzip, 예산 50KB) / CSS 3.0KB / HTML 4.4~4.8KB
- radius 2종 · backdrop-filter 0개 · 타입 5단계 · 강조색 1개
- 슬롭 지문 grep 9패턴 0건, 정적 하드 게이트 8개 전부 통과

감사에서 걸려 고친 것
- eyebrow 6개 → 상한 ceil(7/3)=3 위반 → 3개로
- clip-path 리빌 → 게이트 #8 위반 → transform 으로 교정
- 구분선 대비 1.30:1 → 입력 테두리용 별칭 분리 (WCAG 1.4.11)
- 본문 컬럼 960px → --measure 로. layout.md 예시 코드도 같이 수정

apps/site/src/components/CopyCommand.astro

@@ -0,0 +1,88 @@
+---
+interface Props {
+  command: string;
+  copyLabel: string;
+  copiedLabel: string;
+  note?: string;
+}
+const { command, copyLabel, copiedLabel, note } = Astro.props;
+---
+
+<div class="cmd">
+  <code class="cmd-text">{command}</code>
+  <button type="button" class="cmd-copy" data-copy={command} data-copied={copiedLabel}>
+    {copyLabel}
+  </button>
+</div>
+{note && <p class="cmd-note muted">{note}</p>}
+
+<style>
+  .cmd {
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    max-width: 34em;
+  }
+  .cmd-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--space-3);
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+  .cmd-copy {
+    flex: 0 0 auto;
+    /* 독립 컨트롤이므로 44px 이상 */
+    min-width: 5.5em;
+    min-height: 44px;
+    padding-inline: var(--space-3);
+    border: 0;
+    border-left: 1px solid var(--line-strong);
+    background: var(--accent);
+    color: var(--accent-ink);
+    font: inherit;
+    font-size: var(--step-0);
+    cursor: pointer;
+    transition: opacity var(--dur-instant) var(--ease-out);
+  }
+  .cmd-copy:hover {
+    opacity: 0.88;
+  }
+  .cmd-note {
+    margin-top: var(--space-2);
+    font-size: var(--step-0);
+  }
+</style>
+
+<script>
+  // 이 페이지의 유일한 상호작용이다. 라이브러리를 쓰지 않는다.
+  document.querySelectorAll<HTMLButtonElement>(".cmd-copy").forEach((btn) => {
+    btn.addEventListener("click", async () => {
+      const text = btn.dataset["copy"] ?? "";
+      const done = btn.dataset["copied"] ?? "OK";
+      const original = btn.textContent;
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        // 클립보드 권한이 없으면 선택 상태로 만들어 사용자가 직접 복사하게 둔다
+        const range = document.createRange();
+        const code = btn.previousElementSibling;
+        if (code) {
+          range.selectNodeContents(code);
+          const sel = getSelection();
+          sel?.removeAllRanges();
+          sel?.addRange(range);
+        }
+        return;
+      }
+      btn.textContent = done;
+      btn.setAttribute("aria-live", "polite");
+      setTimeout(() => {
+        btn.textContent = original;
+      }, 1600);
+    });
+  });
+</script>