feat: 프로젝트 공통 지반모델·교대 지반 통합·재료표/수량 진입·옥성교 랜딩 히어로 (11-06~11-09 작업분)

공용 파일(main.ts·index.html·style.css)에서 서로 얽혀 있어 한 커밋으로 묶음.
- 지반: ① 형상 프로젝트 지반모델 관리창(생성·JSON 불러오기·교각별 비교·선택 적용),
  프로젝트 JSON 내장 groundModel 추출, 교대 8행 통합 적용·공통지형 중복격자 제외
- 재료표·수량: 상단 ⑤ 메뉴·배근 바로가기, 결과 교각/탭 기억, 수량 워크북·정합 보정
- 랜딩: 옥성교 6교각 히어로 이미지·투영 강조점·좌→우 광선·지형 라운드/도로 연결
- 검증 스크립트(verify-project-ground/ground-abutments/okseong-user-files/quantity-*/landing-hero 등)
정본: DOC/04_실행/실행_*_2026-11-09_v0.1.00.md

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

랜딩페이지/landing-motion.ts

@@ -1,25 +1,37 @@
-/** Decorative geometry uses the PNG's exact 2172×724 pixel coordinate system. */
-export const heroMotionMarkup = (imageUrl: string): string => `
-  <div class="landing-scan-mask" style="mask-image:url('${imageUrl}');-webkit-mask-image:url('${imageUrl}')">
-    <div class="landing-terrain-grid"></div><div class="landing-scan-beam"></div>
-  </div>
-  <svg class="landing-model-motion" viewBox="0 0 2172 724" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+import { heroCapture } from './assets/okseong-hero-capture';
+
+const flowPath = (() => {
+  let connected = false;
+  return heroCapture.terrainFlow.map(point => {
+    if (point === null) { connected = false; return ''; }
+    const command = connected ? 'L' : 'M'; connected = true;
+    return `${command}${point.x} ${point.y}`;
+  }).join(' ');
+})();
+const frame = {
+  left: Math.min(...heroCapture.points.map(p=>p.x))-50,
+  right: Math.max(...heroCapture.points.map(p=>p.x))+50,
+  top: Math.min(...heroCapture.points.map(p=>p.y))-60,
+  bottom: Math.max(...heroCapture.points.map(p=>p.y))+70,
+};
+
+/** Markers share the exact camera projection used to capture the model. */
+export const heroMotionMarkup = (): string => `
+  <svg class="landing-model-motion" viewBox="0 0 ${heroCapture.width} ${heroCapture.height}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
     <defs>
       <filter id="landing-energy-glow" x="-30%" y="-200%" width="160%" height="500%"><feGaussianBlur stdDeviation="3"/></filter>
-      <linearGradient id="landing-flow-fade"><stop offset="0" stop-color="#087fcb" stop-opacity="0"/><stop offset=".12" stop-color="#087fcb"/><stop offset=".88" stop-color="#087fcb"/><stop offset="1" stop-color="#087fcb" stop-opacity="0"/></linearGradient>
-      <!-- Trace only the clearly visible pale alignment. Fade the uncertain ends instead of inventing bridge geometry. -->
-      <path id="landing-alignment-path" pathLength="1000" d="M600 335 C650 341 700 367 750 368.5 S850 370 950 370.5 S1020 379 1050 382 S1120 398 1150 398 S1220 395 1250 395.5 S1320 396 1350 395 S1420 392 1450 390 S1520 384 1550 378.5 S1610 352 1650 350"/>
+      <linearGradient id="landing-flow-fade"><stop offset="0" stop-color="#ffffff" stop-opacity="0"/><stop offset=".12" stop-color="#ffffff"/><stop offset=".88" stop-color="#ffffff"/><stop offset="1" stop-color="#ffffff" stop-opacity="0"/></linearGradient>
+      <path id="landing-alignment-path" pathLength="1000" d="${flowPath}"/>
     </defs>
     <use href="#landing-alignment-path" class="landing-energy-track"/>
     <use href="#landing-alignment-path" class="landing-energy-haze" filter="url(#landing-energy-glow)"/>
     <use href="#landing-alignment-path" class="landing-energy-flow"/>
-    ${[[546,331],[774,335],[996,344],[1238,346],[1478,334],[1745,332]].map(([x,y],i)=>`
-      <g class="landing-pier-beacon" style="--beacon-delay:${(i*.72+1.6).toFixed(2)}s" transform="translate(${x} ${y})">
+    ${heroCapture.points.map(({name,x,y},i)=>`
+      <g class="landing-pier-beacon" data-structure="${name}" style="--beacon-delay:${(i*.72+1.6).toFixed(2)}s" transform="translate(${x} ${y})">
         <line x1="0" y1="-31" x2="0" y2="-8"/>
         <circle class="landing-pier-pulse" r="11"/><circle class="landing-pier-point" r="3.5"/>
-        <circle class="landing-pier-spark" cx="8" cy="-15" r="1.5"/>
       </g>`).join('')}
-    <path class="landing-hud-bracket" d="M460 260h-24v22 M1775 260h24v22 M460 485h-24v-22 M1775 485h24v-22"/>
+    <path class="landing-hud-bracket" d="M${frame.left} ${frame.top}h-24v22 M${frame.right} ${frame.top}h24v22 M${frame.left} ${frame.bottom}h-24v-22 M${frame.right} ${frame.bottom}h24v-22"/>
   </svg>`;
 
 export function createHeroMotion(root: HTMLElement): void {