fix(showcase): 미정의 CSS 변수·한글 조판·접근성 결함 수리 및 무결성 게이트 두 겹 신설

stylelint 도 html-validate 도 "var(--x) 를 썼는데 --x 가 어디에도 없다"를 잡지
못한다. 미정의 변수는 선언 전체를 무효로 만드는데 콘솔 에러가 없어 조용히 남는다.
검사기를 심자마자 v0.9.1 의 실제 결함이 나왔다.

게이트 신설
- tools/integrity.mjs — L0 무결성. CSS 커스텀 프로퍼티 참조, 상대경로,
  한글 조판 필수 규칙(keep-all·한글 폰트 지정), 슬롭 지문, 스크롤 리스너를 검사.
  verify.mjs 체인에 편입해 실패 시 배포를 막는다.
  폴백이 있는 var(--x, 기본값) 은 선택적 주입이므로 미정의로 세지 않는다.
- tools/showcase-audit.mjs — 320/390/768/1440 실렌더 감사. 가로 스크롤·오버플로·
  컨트롤 줄바꿈·대비 AA·왼쪽 인셋·h1 개수·히어로 줄 수·깨진 이미지·콘솔 에러.
  반투명 배경을 합성해 대비를 재고, WebGL 페이지를 위해 swiftshader 로 렌더한다.
- html-validate 대상을 두 페이지에서 public/work 전체로 넓혔다.

수리한 결함
- 미정의 변수 64건: --dur-fast·--radius-xs 가 정의된 적이 없어 cask-archive,
  cheongon-care, materia-interior 의 transition 선언이 통째로 무효였다.
  새 토큰을 만들지 않고 기존 --dur-quick·--radius 로 매핑했다 — 토큰을 늘리면
  radius 어휘가 4종이 되어 하드 게이트 3에 걸린다.
- 한글 조판: lumina-optics·pulsegate·synapse-bci 가 word-break: keep-all 없이
  IBM Plex Sans 만 지정해 한글이 시스템 기본으로 떨어지고 있었다.
  같은 계열의 IBM Plex Sans KR 을 스택에 넣고 keep-all 을 추가했다.
- 슬롭 지문 19건: text-transform: uppercase 로 만든 영문 대문자 eyebrow 를
  한글 문장으로 바꾸고, 대문자용으로 잡아둔 넓은 자간과 모노 서체도 되돌렸다.
- 하드 게이트 9: materia-interior/hannam-duplex.html 의 100vh → 100dvh.
  이 파일은 어디서도 참조되지 않으면서 인라인 hex 까지 갖고 있어 토큰 기반으로 다시 썼다.
- 접근성 11건: label 하나가 output 과 input 둘에 걸리던 것 5건(font-foundry,
  lumina-optics), dl > div > div > dt 4건(muwol-coffee), div 에 붙은 aria-label
  2건(overtone-sound, pulsegate).

측정기 자체의 오류 둘도 고쳤다 — 눈에 보이지 않는 .sr-only 를 대비 실패로 잡던 것과,
overflow-x: auto 상자 안의 넓은 표를 오버플로로 잡던 것. 재는 도구가 틀리면
통과도 실패도 의미가 없다.

apps/site/public/work/materia-interior/styles/main.css

@@ -40,7 +40,7 @@ img {
 a {
   color: inherit;
   text-decoration: none;
-  transition: color var(--dur-fast);
+  transition: color var(--dur-quick);
 }
 
 a:hover {
@@ -97,9 +97,9 @@ button {
   padding: 0.5rem 1.25rem;
   background: var(--surface-inverse);
   color: var(--ink-inverse);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   transform: translateY(-200%);
-  transition: transform var(--dur-fast);
+  transition: transform var(--dur-quick);
   text-decoration: none;
   font-weight: 500;
 }
@@ -153,7 +153,7 @@ body[data-ambiance="night"] .site-header {
   align-items: center;
   justify-content: center;
   padding: 2px 6px;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   background: var(--surface-card);
   border: 1px solid var(--line);
   color: var(--accent);
@@ -182,7 +182,7 @@ body[data-ambiance="night"] .site-header {
   font-size: var(--step--1);
   font-weight: 600;
   letter-spacing: -0.01em;
-  transition: color var(--dur-fast);
+  transition: color var(--dur-quick);
   white-space: nowrap;
 }
 
@@ -205,7 +205,7 @@ body[data-ambiance="night"] .site-header {
   align-items: center;
   background: var(--surface-card);
   border: 1px solid var(--line);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   padding: 2px;
   gap: 2px;
   flex-shrink: 0;
@@ -217,7 +217,7 @@ body[data-ambiance="night"] .site-header {
   font-size: 12px;
   font-weight: 600;
   color: var(--ink-muted);
-  transition: all var(--dur-fast);
+  transition: all var(--dur-quick);
   white-space: nowrap;
 }
 
@@ -237,13 +237,13 @@ body[data-ambiance="night"] .site-header {
   background: var(--surface-inverse);
   color: var(--ink-inverse);
   padding: 8px 16px;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   font-weight: 600;
   font-size: var(--step--1);
   text-decoration: none;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
+  transition: transform var(--dur-quick), background var(--dur-quick), color var(--dur-quick);
 }
 
 .btn-materia:hover {
@@ -290,11 +290,11 @@ body[data-ambiance="night"] .site-header {
   align-items: center;
   gap: 6px;
   padding: 3px 10px;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   background: var(--accent-light);
   color: var(--accent);
   font-size: var(--step--1);
-  font-family: var(--font-mono);
+  font-family: var(--font-body);
   font-weight: 600;
   margin-bottom: var(--space-3);
   border: 1px solid var(--accent-surface);
@@ -344,7 +344,7 @@ body[data-ambiance="night"] .site-header {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
-  transition: transform var(--dur-slow);
+  transition: transform var(--dur-normal);
 }
 
 .hero-spec-tag {
@@ -353,7 +353,7 @@ body[data-ambiance="night"] .site-header {
   left: 16px;
   background: var(--surface-raised);
   border: 1px solid var(--line);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   padding: 8px 14px;
   box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.06);
   display: flex;
@@ -430,7 +430,7 @@ body[data-ambiance="night"] .site-header {
   width: 100%;
   aspect-ratio: 16 / 11;
   overflow: hidden;
-  background: var(--surface-subtle);
+  background: var(--surface-sunken);
   position: relative;
 }
 
@@ -514,7 +514,7 @@ body[data-ambiance="night"] .site-header {
 .mat-item {
   background: var(--surface-raised);
   border: 1px solid var(--line);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   padding: var(--space-4);
   display: flex;
   flex-direction: column;
@@ -550,7 +550,7 @@ body[data-ambiance="night"] .site-header {
 .process-card {
   background: var(--surface-raised);
   border: 1px solid var(--line);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   padding: var(--space-4);
 }
 
@@ -604,7 +604,6 @@ body[data-ambiance="night"] .site-header {
   font-weight: 600;
   color: var(--ink);
   margin-bottom: var(--space-2);
-  text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 
@@ -612,11 +611,11 @@ body[data-ambiance="night"] .site-header {
   width: 100%;
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius);
   padding: 10px 14px;
   color: var(--ink);
   font-size: var(--step-0);
-  transition: border-color var(--dur-fast);
+  transition: border-color var(--dur-quick);
 }
 
 .form-select:focus, .form-input:focus, .form-textarea:focus {