헤더 배경 수정 + three.js 를 두 곳으로

헤더에 배경이 왜 있냐는 지적에서 시작했다.
site-header 자체는 배경이 없었고, 안쪽 유리가 불투명 판으로
폴백된 것이었다. prefers-reduced-transparency 가 참이면
(윈도우 투명 효과 끄기 등) --surface-raised 단색이 깔린다.

투명도를 줄여달라는 요청은 "불투명한 판을 깔아라"가 아니다.
배경에 가까운 톤으로 낮추고 형태는 테두리와 그림자가 유지한다.
떠 있는 헤더는 더 가깝게 맞췄다.

three.js
- 공용 부트스트랩을 src/lib/shader-plane.ts 로 추출했다.
  references/three.md 가 권하는 구조를 그대로 구현한 것이다.
  지연 로드 · DPR 클램프 1.5 · 화면 밖이면 정지 · 실패 시 CSS 폴백
- 히어로: 광원 두 개가 흐르고 하나가 포인터를 느리게 따라온다
- 재료: 좌표를 노이즈로 밀어 유리 너머의 결을 만든다
- 두 셰이더가 같은 three 청크를 공유한다. 네트워크 요청 1건

--glow-2 를 토큰으로 승격해 셰이더의 하드코딩 색을 없앴다.

apps/site/src/styles/base.css

@@ -55,7 +55,7 @@ body::before {
     radial-gradient(58vw 46vw at 14% -6%,
       color-mix(in oklab, var(--accent) 26%, transparent), transparent 68%),
     radial-gradient(52vw 44vw at 92% 8%,
-      color-mix(in oklab, #6E7BFF 20%, transparent), transparent 66%),
+      color-mix(in oklab, var(--glow-2) 20%, transparent), transparent 66%),
     radial-gradient(70vw 60vw at 62% 108%,
       color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
 }
@@ -210,13 +210,18 @@ a:hover { color: var(--accent); }
   mask-composite: exclude;
 }
 
-/* 투명도를 줄여달라는 사용자에게는 불투명 판으로 준다 */
+/* 투명도를 줄여달라는 요청에 불투명한 판을 깔면 그냥 상자가 된다.
+   배경에 가까운 톤으로 낮추고 형태는 테두리와 그림자가 유지한다. */
 @media (prefers-reduced-transparency: reduce) {
   .glass {
-    background: var(--surface-raised);
+    background: color-mix(in oklab, var(--surface) 84%, var(--ink));
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }
+  /* 떠 있는 헤더는 배경과 더 가깝게. 여기 판이 깔리면 즉시 눈에 띈다 */
+  .site-header .glass {
+    background: color-mix(in oklab, var(--surface) 93%, var(--ink));
+  }
 }
 @supports not (backdrop-filter: blur(1px)) {
   .glass { background: var(--surface-raised); }
@@ -241,7 +246,10 @@ a:hover { color: var(--accent); }
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
 }
 @media (prefers-reduced-transparency: reduce) {
-  .shell { background: var(--surface-raised); backdrop-filter: none; }
+  .shell {
+    background: color-mix(in oklab, var(--surface) 88%, var(--ink));
+    backdrop-filter: none;
+  }
 }
 
 /* ---- 진입 연출 ----------------------------------------------

apps/site/src/styles/tokens.css

@@ -33,6 +33,8 @@
   --accent-ink:         #04211D;
   --accent-inverse:     #0E7A6E;
   --accent-ink-inverse: #FFFFFF;
+  /* 셰이더가 쓰는 두 번째 광색. 강조색이 아니라 광원이다 */
+  --glow-2: #6E7BFF;
 
   /* ---- 유리 ------------------------------------------------
      backdrop-filter 만으로는 흐린 유리다. 굴절은 SVG 가 만든다. */