테두리 광을 회전시키고 three.js 모바일 대응을 고친다

회전 테두리
  conic 의 각도를 @property 로 돌리면 매 프레임 배경을 다시 칠한다 —
  컴포지터에서 못 돌고 메인 스레드가 페인트한다(하드 게이트 8).
  정사각형 원뿔 레이어를 마스크 안에서 rotate 시켰다. transform 만 움직인다.
  aspect-ratio: 1 이라야 회전 중 밝기가 일정하고,
  width: 200% 라야 1178x52 헤더에서 모서리까지 닿는다. 주기 11초.

three.js 모바일
  세로 화면에서 게이트가 통째로 안 보이고 있었다.
  수직 시야는 화면 비율과 무관하지만 수평 시야는 aspect 에 비례한다.
  데스크톱(2.5:1)에서 정한 판 폭 15 가 세로 화면(0.45:1)의 수평 시야
  2.5 에 비해 여섯 배라, 첫 판이 화면을 완전히 덮었다.
  fit() 에서 camera.aspect 를 갱신할 때 판의 scale.x 도 같이 잡는다.

  저사양 판정도 고쳤다. hardwareConcurrency <= 4 만 보면 요즘 폰이 전부
  고사양으로 잡힌다(8코어가 흔하다). innerWidth < 760 을 함께 본다.
  DPR 1.5 -> 1.25, 캔버스 불투명도 0.7 -> 0.45(세로는 화면 전체를 덮는다).

스킬
  svg-filters.md  테두리 광 회전은 각도가 아니라 정사각형 레이어 rotate
  three.md        지오메트리를 화면 비율에 맞춰 다시 잡아라
                  저사양 판정에 화면 폭을 넣어라

apps/site/src/lib/gate-scene.ts

@@ -84,11 +84,15 @@ async function boot({ canvas, accentVar, glowVar, onGate, progressFrom }: GateSc
   const accent = color(accentVar, "#4FD6C4");
   const glow = color(glowVar, "#6E7BFF");
 
-  // 저사양이면 판을 줄인다. 코어 수는 거친 지표지만 라이브러리를 더 받지 않는다
-  const lean = (navigator.hardwareConcurrency ?? 4) <= 4;
+  // 저사양 판정.
+  // 코어 수만 보면 요즘 폰(8코어)이 전부 고사양으로 잡힌다. 화면 폭을 같이 본다 —
+  // 좁은 화면은 대개 배터리로 돌아가고, 같은 씬이라도 열이 더 난다.
+  const narrow = innerWidth < 760;
+  const lean = narrow || (navigator.hardwareConcurrency ?? 4) <= 4;
   const PANE_COUNT = lean ? 3 : 6;
 
-  const dpr = Math.min(devicePixelRatio, 1.5);
+  // 좁은 화면에서는 DPR 도 한 단계 더 내린다. 폰의 DPR 은 3 까지 간다.
+  const dpr = Math.min(devicePixelRatio, narrow ? 1.25 : 1.5);
   renderer.setPixelRatio(dpr);
 
   /* ---- 1) 배경을 렌더 타겟에 그린다 ------------------------- */
@@ -251,6 +255,20 @@ async function boot({ canvas, accentVar, glowVar, onGate, progressFrom }: GateSc
   const pointer = new THREE.Vector2(0.5, 0.5);
   const pointerTarget = new THREE.Vector2(0.5, 0.5);
 
+  // 판이 화면을 덮는 데 필요한 최소 폭.
+  // 수직 시야는 화면 비율과 무관하지만 수평 시야는 aspect 에 비례한다.
+  // 데스크톱(2.5:1)에 맞춘 폭 15 를 세로 화면(0.45:1)에 그대로 쓰면
+  // 수평 시야의 여섯 배가 되어 첫 판이 화면을 완전히 덮는다 —
+  // 게이트가 보이지 않고 그냥 밝은 화면이 된다.
+  const GEO_W = 15;
+  const fitPanes = (aspect: number) => {
+    const halfH = Math.tan((camera.fov * Math.PI) / 360);
+    const viewW = 2 * 7.2 * halfH * aspect;
+    const want = Math.max(6.5, viewW * 1.12);
+    const sx = Math.min(1, want / GEO_W);
+    for (const m of panes) m.scale.x = sx;
+  };
+
   const fit = () => {
     const r = canvas.getBoundingClientRect();
     if (!r.width || !r.height) return;
@@ -262,6 +280,7 @@ async function boot({ canvas, accentVar, glowVar, onGate, progressFrom }: GateSc
     camera.aspect = r.width / r.height;
     camera.updateProjectionMatrix();
     bgUniforms.uAspect.value = r.width / r.height;
+    fitPanes(camera.aspect);
   };
   fit();
   // window resize 만 듣던 것을 ResizeObserver 로 바꾼다.