소개 페이지를 스킬 전체 경로로 다시 만들고, 배운 것을 스킬에 반영

방향을 글래스로 바꿀 때 2단계 재결정을 하고도 전체 경로로 올리지 않았다.
레퍼런스 없이 재질만 갈아끼운 결과가 스위스 미니멀 뼈대에 유리를 바른
페이지였고, design.md 는 초판 결정을 그대로 담고 있었다. 0단계부터 다시 돌았다.

1단계 — 레퍼런스 3개를 computed style 까지 실측
  R1 zed.dev      컨테이너 1120px 과 전체폭이 교대 · radius 2px 621회
  R2 lusion.co    3D 는 액자 안, 텍스트는 액자 밖 · 배경 흰색 · h1 36px
  R3 Codrops      DOM 이 구조를 소유하고 WebGL 은 uniform 만 만진다

2단계 — 프리셋 swiss-minimal → dark-instrument, 컨셉 "검사대 위의 물체"
        유리는 액자에만 남긴다(헤더 · 검사대 · 명령창)

4단계 — 히어로 재구성. 캔버스를 배경에서 빼 액자 안으로, 텍스트는 밖으로
        판독기가 통과한 게이트를 표시한다(값이 바뀔 때만 DOM 을 쓴다)
        파이프라인을 2열로 열어 625px → 1113px

5단계에서 실제로 걸린 것
  게이트 3  radius 4종 → 2종 (3px / 14px, pill 제거)
  게이트 1  base.css 토큰 밖 rgb() 7곳 → 토큰
  게이트 7  헤더 English 2.59:1 → ink 로 상향
  카운트    히어로 h1 4줄 → 2줄
  셰이더    판이 정면이라 프레넬이 구조적으로 0. 법선을 굽히고 UV 로 테두리
  셰이더    gl_FragCoord 를 렌더 타겟 크기로 나눠 UV 가 1 을 넘고 있었다
  수치      페이지가 실은 "타입 단계 5단계"가 실측 9종이었다. lang 속성이
            스케일을 재정의해 링크 하나가 16px 로 새고 있었다
  측정      대비 스크립트가 반투명 배경을 불투명으로 계산했다. 알파 합성으로 교정

스킬 반영
  three.md    §0-A 배치 원리(3D 는 액자 안) · 프레넬 0 함정 · gl_FragCoord 함정
  preflight.md 대비 측정 시 알파 합성. 검사 도구가 틀리면 통과도 의미가 없다

최종: 하드 게이트 12/12, 대비 실패 0, 320px 오버플로 0, 테스트 22개 통과

apps/site/src/styles/base.css

@@ -165,7 +165,7 @@ a:hover { color: var(--accent); }
   isolation: isolate;
   background: var(--glass-tint);
   border: 1px solid var(--glass-edge);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-frame);
   box-shadow: var(--glass-hi), var(--shadow-2);
   backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
   -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
@@ -178,13 +178,7 @@ a:hover { color: var(--accent); }
   z-index: -1;
   border-radius: inherit;
   pointer-events: none;
-  background:
-    linear-gradient(
-      180deg,
-      rgb(255 255 255 / 0.10) 0%,
-      rgb(255 255 255 / 0.02) 22%,
-      transparent 55%
-    );
+  background: var(--glass-sheen);
 }
 /* backdrop-filter 에 SVG 필터를 얹는 것은 쓰지 않는다.
    Chrome 은 CSS.supports 로는 true 를 주면서 렌더에서 선언 전체를 버린다
@@ -199,21 +193,15 @@ a:hover { color: var(--accent); }
   border-radius: inherit;
   pointer-events: none;
   padding: 1px;
-  background: conic-gradient(
-    from 210deg,
-    rgb(255 255 255 / 0.32),
-    transparent 22%,
-    transparent 58%,
-    rgb(255 255 255 / 0.20) 74%,
-    transparent 92%
-  );
+  background: var(--glass-rim);
+  /* 아래 black 은 색이 아니라 마스크의 알파다. 팔레트와 무관하다 */
   -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
+    linear-gradient(black 0 0) content-box,
+    linear-gradient(black 0 0);
   -webkit-mask-composite: xor;
   mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
+    linear-gradient(black 0 0) content-box,
+    linear-gradient(black 0 0);
   mask-composite: exclude;
 }
 
@@ -237,27 +225,20 @@ a:hover { color: var(--accent); }
 /* 유리 위에 얹는 두 번째 판. 안쪽으로 갈수록 밝아진다 */
 .glass-2 { background: var(--glass-tint-2); }
 
-/* 이중 베젤: 유리판이 트레이 안에 앉는다 */
-.shell {
-  background: var(--glass-tint);
-  border: 1px solid var(--glass-edge);
-  border-radius: var(--radius-shell);
-  padding: var(--shell-pad);
-  box-shadow: var(--glass-hi), var(--shadow-2);
-  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
-  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
-}
-.core {
+/* 액자. 이중 베젤을 버렸다 — 껍데기와 속의 radius 가 서로 달라
+   그것만으로 형태 어휘가 두 종 늘어난다(하드 게이트 #3).
+   그리고 안이 불투명한 이미지면 backdrop-filter 는 아무것도 하지 않는다.
+   유리로 읽히게 하는 것은 테두리 광과 위쪽 반사지 흐림이 아니다. */
+.frame {
+  position: relative;
   background: var(--surface-sunken);
-  border-radius: var(--radius-md);
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
-}
-@media (prefers-reduced-transparency: reduce) {
-  .shell {
-    background: color-mix(in oklab, var(--surface) 88%, var(--ink));
-    backdrop-filter: none;
-  }
+  border: 1px solid var(--glass-edge);
+  border-radius: var(--radius-frame);
+  box-shadow: var(--glass-hi), var(--core-hi), var(--shadow-2);
+  overflow: clip;
 }
+/* 이미지를 담는 액자만. 인라인 여백을 지운다 */
+.frame > :is(img, picture, canvas) { display: block; width: 100%; height: auto; }
 
 /* ---- 진입 연출 ----------------------------------------------
    opacity 로 콘텐츠를 숨기지 않는다.

apps/site/src/styles/tokens.css

@@ -1,11 +1,15 @@
 /* ============================================================
    designpaca 소개 페이지 — 디자인 토큰
-   방향 재설정 2026-08-20: Ethereal Glass
+   프리셋: dark-instrument  ·  컨셉: 검사대 위의 물체
 
-   이 페이지는 SVG 필터와 three.js 를 파는 제품의 데모다.
-   리퀴드 글래스는 그 두 기술의 결합 그 자체이므로 여기서는
-   장식이 아니라 제품 시연이다. 다크 기반을 고른 것도 같은 이유다.
-   유리는 어두운 바탕 위에서만 굴절이 읽힌다.
+   다크를 "멋있어서" 고르지 않았다. 제품이 CLI 이고 사용자가 이
+   화면을 터미널 옆에 두고 본다. 프리셋이 요구하는 근거다.
+
+   유리는 액자에만 쓴다. 액자 안은 3D, 액자 밖은 글자 —
+   R2(lusion.co) 실측에서 가져온 원리다. 둘을 겹치면 3D 는 얼룩이
+   되고 글자는 대비를 잃는다. 실제로 한 번 그렇게 만들었다.
+
+   전체 결정 근거는 design.md.
    ============================================================ */
 
 :root {
@@ -33,11 +37,17 @@
   --accent-ink:         #04211D;
   --accent-inverse:     #0E7A6E;
   --accent-ink-inverse: #FFFFFF;
-  /* 셰이더가 쓰는 두 번째 광색. 강조색이 아니라 광원이다 */
-  --glow-2: #6E7BFF;
+  /* 셰이더가 쓰는 두 번째 광색. 강조색이 아니라 광원이다.
+     보라기를 뺐다 — #6E7BFF 는 R 이 높아 보라-파랑으로 읽히고,
+     그것이 antipatterns.md 의 슬롭 지문이자 dark-instrument 가
+     "어두운 배경일수록 빠지기 쉬운 함정"으로 지목한 색이다. */
+  --glow-2: #3D7BD6;
 
   /* ---- 유리 ------------------------------------------------
-     backdrop-filter 만으로는 흐린 유리다. 굴절은 SVG 가 만든다. */
+     유리는 액자에만 쓴다. 헤더 · 검사대 프레임 · 게이트 배지.
+     콘텐츠 카드에는 쓰지 않는다 — 유리는 무언가를 담을 때만
+     의미가 있고, 아무 데나 바르면 그냥 반투명한 상자다.
+     (R2 lusion.co 실측: 3D 를 액자에 가두고 텍스트는 액자 밖에 둔다) */
   --glass-tint:   rgb(255 255 255 / 0.045);
   --glass-tint-2: rgb(255 255 255 / 0.085);
   --glass-edge:   rgb(255 255 255 / 0.14);
@@ -47,17 +57,39 @@
   --glass-hi:
     inset 0 1px 0 rgb(255 255 255 / 0.22),
     inset 0 -1px 0 rgb(255 255 255 / 0.05);
+  /* 표면 반사와 테두리 광. 값이 아니라 토큰으로 둬야 밝은 밴드에서
+     같은 자리를 뒤집을 수 있다 (하드 게이트 #1) */
+  --glass-sheen: linear-gradient(
+    180deg,
+    rgb(255 255 255 / 0.10) 0%,
+    rgb(255 255 255 / 0.02) 22%,
+    transparent 55%
+  );
+  --glass-rim: conic-gradient(
+    from 210deg,
+    rgb(255 255 255 / 0.32),
+    transparent 22%,
+    transparent 58%,
+    rgb(255 255 255 / 0.20) 74%,
+    transparent 92%
+  );
+  --core-hi: inset 0 1px 0 rgb(255 255 255 / 0.06);
 
   --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
   --shadow-2: 0 2px 6px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
   --shadow-3: 0 6px 16px rgb(0 0 0 / 0.45), 0 32px 80px rgb(0 0 0 / 0.6);
   --inset-hi: var(--glass-hi);
 
-  /* ---- 형태 ------------------------------------------------ */
-  --radius-sm: 10px;
-  --radius-md: 20px;
-  --shell-pad: 6px;
-  --radius-shell: calc(var(--radius-md) + var(--shell-pad));
+  /* ---- 형태 ------------------------------------------------
+     두 종류뿐이다. 하드 게이트 #3 은 3종부터 실패로 본다.
+
+     3px  — 요소. R1 zed.dev 실측에서 border-radius 2px 가 621회로
+            압도적이었다. 개발자 도구는 각져야 정밀해 보인다
+     14px — 액자. R2 lusion.co 가 3D 캔버스를 감싼 값이 15px 이다
+
+     pill(999px) 을 없앴다. 계기판에 알약은 없다. */
+  --radius-sm: 3px;
+  --radius-frame: 14px;
 
   /* ---- 간격 ------------------------------------------------ */
   --space-1: 0.25rem;
@@ -98,12 +130,14 @@
   --font-sans: "Pretendard Variable", Pretendard,
                "KO Fallback Win", "KO Fallback Mac", system-ui, sans-serif;
 
+  --step--1: 0.8125rem;
   --step-0: 1.0625rem;
   --step-1: 1.328rem;
   --step-2: 1.660rem;
   --step-3: 2.076rem;
   --step-4: 2.595rem;
-  /* 히어로에 힘을 준다 */
+  /* 페이지에서 가장 큰 글자. 히어로가 아니라 수치 섹션이 쓴다 —
+     히어로의 힘은 타이포가 아니라 검사대 액자에서 나온다 */
   --display: clamp(3rem, 1.2rem + 7.2vw, 7rem);
 
   --leading-tight:  1.06;
@@ -122,6 +156,7 @@
 [lang="en"] {
   --font-sans: "Switzer", "EN Fallback", system-ui, -apple-system, sans-serif;
 
+  --step--1: 0.8125rem;
   --step-0: 1rem;
   --step-1: 1.25rem;
   --step-2: 1.5625rem;