fix(B06 십자선): 십자선 = 형상과 한 높이(측점 설계 높이) · 원지반 십자선 · 평면 초안 계획선 표본도 초안 종단 (413-1)

- 카드 · B05 오른쪽 판 · [상세] 창 십자선 · 계획 상자 = section.design.design_elevation_m · 설계 없을 때만 종단 표본
- 원지반 십자선(center_z · 원지반 색 · 다른 무리) 먼저 그림 · 겹치면 보라 위 · 확대 보정 둘 다
- [상세] 표 원지반고 = 원지반 십자 · 절성토고 = 둘 다
- 시험 318 · 150 · 164 고쳐 씀

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013QyNXY2TUKXCFMwAca2APG

B06_Section/B06_Section_UI_Cross_View_Frame.ts

@@ -15,6 +15,8 @@ export interface CardFrameInput {
   centerX: number;
   /** 계획고(없으면 null — 옛 자료는 지반고 폴백). */
   designElevation: number | null;
+  /** 중심 원지반고(`section.center_z` · 없으면 null = 중심에 가장 가까운 지반고). */
+  groundElevation?: number | null;
   /** 표고 → 화면 y(높이 배율 반영). */
   toY: (elevation: number) => number;
   widthPx: number;
@@ -34,27 +36,30 @@ export function appendCardFrame(
     if (!nearest || Math.abs(sample.offset_m ?? 0) < Math.abs(nearest.offset_m ?? 0)) return sample;
     return nearest;
   }, null);
+  const groundElevation = input.groundElevation ?? centerSample?.elevation_m ?? null;
   // 십자선 = 계획 노선 자리(구 데이터는 지반고 폴백).
-  const centerElevation = hasDesign ? designElevation : (centerSample?.elevation_m ?? null);
+  const centerElevation = hasDesign ? designElevation : groundElevation;
   const centerY = centerElevation !== null ? toY(centerElevation) : heightPx / 2;
-  const centerMarkerClass = `b06-chart__center-marker${hasDesign ? " b06-chart__center-marker--design" : ""}`;
-  const marker = svgElement("g", { class: "b06-chart__center" });
-  marker.append(
-    svgElement("line", {
-      x1: centerX,
-      y1: centerY - 18,
-      x2: centerX,
-      y2: centerY + 18,
-      class: centerMarkerClass,
-    }),
-    svgElement("line", {
-      x1: centerX - 18,
-      y1: centerY,
-      x2: centerX + 18,
-      y2: centerY,
-      class: centerMarkerClass,
-    }),
+  const cross = (groupClass: string, y: number, lineClass: string): SVGElement => {
+    const group = svgElement("g", { class: groupClass });
+    group.append(
+      svgElement("line", { x1: centerX, y1: y - 18, x2: centerX, y2: y + 18, class: lineClass }),
+      svgElement("line", { x1: centerX - 18, y1: y, x2: centerX + 18, y2: y, class: lineClass }),
+    );
+    return group;
+  };
+  // 원지반 십자선(413) — 계획 십자선보다 먼저(겹치면 보라가 위) · 다른 무리(고름 · 강조 선택자 안 닿음)
+  const groundY = groundElevation !== null ? toY(groundElevation) : null;
+  const ground =
+    hasDesign && groundY !== null
+      ? cross("b06-chart__ground-center", groundY, "b06-chart__ground-center-marker")
+      : null;
+  const marker = cross(
+    "b06-chart__center",
+    centerY,
+    `b06-chart__center-marker${hasDesign ? " b06-chart__center-marker--design" : ""}`,
   );
+  if (ground) plotLayer.append(ground);
   plotLayer.append(marker);
   svg.append(
     svgElement("line", {
@@ -79,12 +84,17 @@ export function appendCardFrame(
       class: "b06-chart__axis-label",
     }),
   );
-  // 도형 레이어 배율을 십자선 중심에서 되돌림 — 자리는 따라가고 길이 18px 은 그대로.
-  return (scale) =>
-    marker.setAttribute(
-      "transform",
-      `translate(${centerX} ${centerY}) scale(${1 / Math.max(scale, 1e-6)}) translate(${-centerX} ${-centerY})`,
-    );
+  // 도형 레이어 배율을 십자선 중심에서 되돌림 — 자리는 따라가고 길이 18px 은 그대로(두 십자 모두).
+  return (scale) => {
+    marker.setAttribute("transform", unscaleAt(centerX, centerY, scale));
+    if (ground && groundY !== null)
+      ground.setAttribute("transform", unscaleAt(centerX, groundY, scale));
+  };
+}
+
+/** (cx, cy) 를 축으로 배율을 되돌리는 transform — 카드 · [상세] 창 십자선이 같이 씀. */
+export function unscaleAt(cx: number, cy: number, scale: number): string {
+  return `translate(${cx} ${cy}) scale(${1 / Math.max(scale, 1e-6)}) translate(${-cx} ${-cy})`;
 }
 
 /** 원지반선 — 끊긴 샘플(무효 표고)마다 폴리선을 나눠 그린다. `toY` = 표고 → 화면 y(배율 반영). */