feat(B05 평면 구조물 마커): 구조물 측점 마커 · 고름 정보 창 · 20 m 법선 · 끌기 · 방향키 1 m (399)

- 마커 = 종단 알약과 같은 목록(laneStructures) · 노선 위 알약 꼴(종류 색) · 스냅 · 간격과 무관
- 고름 = 알약 고름과 같은 길(onStructureSelect · 공용 고름) · 알약 벌룬 그대로 · 좌우 20 m 법선
- 끌기 · 방향키 = 노선 따라 정수 m 1 m 씩 · 시점 · 종점 밖 안 감 · 놓을 때 알약 끌기와 같은 길로 한 번
- 집기 차례 = 교각점 · 곡선 손잡이 다음 · 옛 마름모 지움
- 시험 test_399_plan_structure_marks · test_391 마름모 줄 고침

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

B05_Profile/B05_Profile_UI_Page_Structures.ts

@@ -37,6 +37,7 @@ import { planStations } from "../common_util/common_util_structure_station";
 import { plannedIrregular } from "../A00_Common/design/design_structure_status";
 import { pipeChainageOf, pipeIdAt, withPipeIds } from "../A00_Common/design/design_pipe_ids";
 import { pageStructures, pageTypesChecked } from "../A00_Common/design/design_page_data";
+import { planMarksChanged } from "./B05_Profile_UI_RouteEdit_StructureMarks";
 
 /** 관 지점 한 건 — 유효직경·시설 종류·부속 옵션까지 그대로 받는다. */
 export interface PipeProjection {
@@ -155,6 +156,7 @@ export function createStructuresBridge(deps: StructuresBridgeDeps) {
 
   function syncGraphStructures(): void {
     deps.profilePanel().setStructures([...ownStructures, ...pipeMarks]);
+    planMarksChanged(deps.projectId); // 평면 구조물 마커 = 알약과 같은 목록(399)
   }
 
   /** 관 지점을 알약 레인용 가상 구조물로 만든다(정본은 pipe_points, 저장하지 않는다). */
@@ -337,6 +339,9 @@ export function createStructuresBridge(deps: StructuresBridgeDeps) {
     },
     /** 측점 계획을 다시 맞춤 — 추가 측점이 바뀜(368-2). */
     resyncStations: () => syncCrossDrainStations(),
+    /** 알약 레인 목록 · 종류 — 평면 구조물 마커가 같은 것을 씀(399). */
+    marks: (): StructureInstance[] => [...ownStructures, ...pipeMarks],
+    types: (): StructureType[] => planTypes,
     /** 그래프·3D가 쓰는 현재 비정규 측점 목록(물넘이포장 제외 — 알약 레인 몫). */
     irregularStations: () => irregularStations,
     /** 구조물 종류의 군(A~G · 모르면 undefined) — 측점 고름이 덮어 열 구조물을 가름(216-1). */

B05_Profile/B05_Profile_UI_RouteEdit_Pointer.ts

@@ -12,6 +12,7 @@ import { pickPx } from "../A00_Common/touch_bridge";
 import { hitPreparedLayer, type ViewState } from "../B04_PreProcess/B04_PreProcess_UI_MapRender";
 import type { RouteEditContours } from "./B05_Profile_UI_RouteEdit_Contour";
 import { bindRouteEditKeys } from "./B05_Profile_UI_RouteEdit_Keys";
+import { bindStructureMarks } from "./B05_Profile_UI_RouteEdit_StructureMarks";
 import {
   dragHandleTo as curveDragTo,
   type EditedCurve,
@@ -191,6 +192,8 @@ export function bindRouteEditPointer(params: RouteEditPointerParams): RouteEditP
   let dragMoved = false;
   /** 스냅 미리보기 전 자리(390-5) — 하한 검사는 맞춘 선이 아닌 이것으로(맞춤이 IP 를 ±간격/2 밂). */
   let dragRaw: Vertex[] | null = null;
+  /** 구조물 측점 마커(399) — 집기 차례 = 교각점 · 손잡이 다음 · 끌기 · 방향키 1 m. */
+  const marks = bindStructureMarks(params, () => dragNode >= 0 || dragHandle !== null);
 
   canvas.addEventListener("pointerdown", (event) => {
     if (event.button !== 0) return;
@@ -236,6 +239,8 @@ export function bindRouteEditPointer(params: RouteEditPointerParams): RouteEditP
       })()
     ) {
       /* 여기로는 안 온다 — 위 갈래는 선택만 풀고 다음 갈래로 넘긴다. */
+    } else if (marks.press(px, py)) {
+      /* 구조물 마커를 골랐다 — 끌면 노선 따라 1 m 씩(399). */
     } else if (
       // 측점 눈금을 누르면 그 측점 횡단을 따로 띄운다(계획서 0-9 ⑧). 노드·손잡이 다음이다.
       (() => {
@@ -288,6 +293,7 @@ export function bindRouteEditPointer(params: RouteEditPointerParams): RouteEditP
     const rect = canvas.getBoundingClientRect();
     const [px, py] = params.unrotate(event.clientX - rect.left, event.clientY - rect.top);
     const state = params.state();
+    if (marks.move(px, py)) return;
     if (dragHandle) {
       // 곡선 시작·끝점을 끈다 — 그쪽 직선 각도와 반지름이 함께 바뀐다(2026-09-07 사용자 확정).
       const node = dragHandle.node;
@@ -361,7 +367,7 @@ export function bindRouteEditPointer(params: RouteEditPointerParams): RouteEditP
         ? state.apexLock[overNode]
           ? "not-allowed"
           : "grab"
-        : handleAt(px, py)
+        : handleAt(px, py) || marks.over(px, py)
           ? "grab"
           : over
             ? "pointer"
@@ -373,6 +379,7 @@ export function bindRouteEditPointer(params: RouteEditPointerParams): RouteEditP
 
   const endDrag = (event: PointerEvent): void => {
     if (canvas.hasPointerCapture(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
+    marks.release();
     // 끌기 **한 번**이 되돌리기 한 걸음이다 — 프레임마다 쌓으면 한 번 물리는 데 수십 번
     // 눌러야 한다. 놓는 순간에만 쌓는다.
     if (dragMoved) {

B05_Profile/B05_Profile_UI_RouteEdit_Render.ts

@@ -29,12 +29,12 @@ import { contourBandRect, setStationLabelBoxes } from "./B05_Profile_UI_RouteEdi
 import { drawPickHover, drawStationNormal } from "./B05_Profile_UI_RouteEdit_Hover";
 import { drawPickedCurve, traceNodeTriangle } from "./B05_Profile_UI_RouteEdit_Curve_Pick";
 import type { CrossWatch } from "./B05_Profile_UI_RouteEdit_Cross";
-import { stationFrameAt } from "./logic/B05_Profile_UI_RouteEdit_Frame";
 import type { MeasureMark } from "./B05_Profile_UI_RouteEdit_Measure";
 import { stationLabel as formatStation } from "../common_util/common_util_station";
 import { arcLocked, straightLocked } from "./B05_Profile_UI_RouteEdit_Lock";
 import { drawFootprint } from "./B05_Profile_UI_RouteEdit_Footprint";
 import { markShown } from "./B05_Profile_UI_RouteEdit_Marks";
+import { drawStructureMarks } from "./B05_Profile_UI_RouteEdit_StructureMarks";
 
 /** 노드 반지름(px) — 요구 241-14 로 4 → 6(고르면 +2). */
 const NODE_R = 6;
@@ -255,6 +255,7 @@ export function drawRouteEditScene(context: CanvasRenderingContext2D, scene: Rou
   // 등고 높이값은 **맨 나중에** 얹는다(2026-09-12 사용자 지시 ⑦) — 노선·측점 눈금보다 먼저
   // 그리면 숫자가 그 아래 깔려 안 읽힌다. 띠(300m)는 다시 씌워 그리는 범위는 그대로 둔다.
   drawContourLabels(context, scene, band, style);
+  drawStructureMarks(context, scene, line, style); // 구조물 측점 마커(399) — 라벨 위 · 교각점 아래
   // 노드 · 손잡이는 라벨 뒤 맨 위(381-3) — 측점 · 기울기 · 높이 글자에 묻혀 안 집히던 자리.
   context.save();
   context.fillStyle = style.getPropertyValue("--map-route") || "#f97316";
@@ -396,33 +397,14 @@ function drawMeasureMarks(
 }
 
 /** 고른 측점 — 맴돔과 같은 좌우 20 m 법선(391-1 · `drawStationNormal`) · 구조물 · 관 고름 =
- *  그 자리 마름모(배수유역도 `markStation` 꼴)만. 절성토 색은 발자국 선이 보여 줌. */
+ *  구조물 측점 마커가 법선 · 정보 창까지(399 · `drawStructureMarks`). 절성토 색은 발자국 선이 보여 줌. */
 function drawCrossWidth(
   context: CanvasRenderingContext2D,
   scene: RouteEditScene,
   line: ReadonlyArray<Vertex>,
 ): void {
   const watch = scene.crossWidth;
-  if (!watch) return;
-  if (!watch.structure) {
-    drawStationNormal(context, scene, line, watch.chainageM);
-    return;
-  }
-  const frame = stationFrameAt(line, watch.chainageM);
-  if (!frame) return;
-  const [cx, cy] = scene.toScreen(frame.origin);
-  context.save();
-  context.setLineDash([]);
-  context.translate(cx, cy);
-  context.rotate(Math.PI / 4);
-  context.beginPath();
-  context.rect(-7, -7, 14, 14);
-  context.fillStyle = "rgba(255, 196, 0, 0.35)";
-  context.fill();
-  context.lineWidth = 2.5;
-  context.strokeStyle = "#ff9800";
-  context.stroke();
-  context.restore();
+  if (watch && !watch.structure) drawStationNormal(context, scene, line, watch.chainageM);
 }
 
 /**

B05_Profile/B05_Profile_UI_RouteEdit_StructureMarks.ts

@@ -0,0 +1,386 @@
+/* =============================================================================
+ * B05_Profile_UI_RouteEdit_StructureMarks.ts
+ * 평면 **구조물 측점 마커**(PLAN 399 · 요구 250-2).
+ *
+ *   · 목록 = 종단 아래 알약과 같은 것(`laneStructures` · 관 · 구조물 · 물넘이 · 사토장 …) · 노선 위 그 측점에
+ *     알약 꼴(종류 색) · 일반 측점 눈금 · 스냅 · 간격과 무관.
+ *   · 고름 = 알약 고름과 같은 길(`select` · 공용 고름 382-2 — 평면 마커 고름 = 종단 알약 강조 · 반대도).
+ *     고른 마커 = 알약 벌룬과 같은 창(`balloonElement` · `balloonLines`) + 그 측점 좌우 20 m 법선(391).
+ *   · 끌기 · 방향키(마커 고른 때 · 교각점 안 고른 때) = 노선 따라 정수 m · 1 m 씩 · 시점 · 종점 밖 안 감 ·
+ *     놓을 때 · 뗄 때 한 번 옮김(`move` = 알약 끌기와 같은 길 · 관 · 구조물 초안 · [저장]이 정본).
+ *   · 집기 차례 = 교각점 · 곡선 손잡이 다음(381-3) — `_Pointer` 가 부름.
+ * 목록 · 고름 · 옮김은 종단 보기가 `setPlanMarkSource` 로 건넴. 걸음 셈은 `logic/…_StructureMarks`.
+ * ========================================================================== */
+
+import { pickPx } from "../A00_Common/touch_bridge";
+import { draftProjectId } from "../A00_Common/design/design_store";
+import { PIPE_MATCH_M, readSelection } from "../A00_Common/design/design_selection";
+import { lastPointerWithin } from "../B06_Section/B06_Section_UI_Cross_Panel_Base";
+import {
+  structureAnchorM,
+  type StructureInstance,
+  type StructureType,
+} from "./B05_Profile_Api_Structures";
+import {
+  balloonElement,
+  laneStructures,
+  positionText,
+  structurePillTexts,
+} from "./B05_Profile_UI_Structures_Marks";
+import { balloonLines } from "./logic/B05_Profile_UI_Structures_Balloon";
+import { HOLD_DELAY_MS, HOLD_INTERVAL_MS } from "./B05_Profile_UI_Profile_Edit";
+import { drawStationNormal } from "./B05_Profile_UI_RouteEdit_Hover";
+import { routePointAtScreen } from "./B05_Profile_UI_RouteEdit_Input";
+import type { RouteEditPointerParams } from "./B05_Profile_UI_RouteEdit_Pointer";
+import type { RouteEditScene } from "./B05_Profile_UI_RouteEdit_Render";
+import { stationFrameAt } from "./logic/B05_Profile_UI_RouteEdit_Frame";
+import type { Vertex } from "./logic/B05_Profile_UI_RouteEdit_Curve";
+import { arrowStep, isArrowKey, type ArrowKey } from "./logic/B05_Profile_RouteEdit_KeyNudge";
+import {
+  arrowSign,
+  markChainage,
+  markStep,
+  pickedMarkId,
+} from "./logic/B05_Profile_RouteEdit_StructureMarks";
+import { stationLabel as formatStation } from "../common_util/common_util_station";
+
+/** 마커를 잡았다고 볼 거리(px). */
+const MARK_HIT_PX = 10;
+/** 알약 마커 반 길이 · 굵기(px) — 고르면 조금 크게. */
+const MARK_HALF_PX = 5;
+const MARK_WIDTH_PX = 8;
+/** 고른 마커 바깥 테 — 법선과 같은 하늘색(391). */
+const PICKED_RING = "#0ea5e9";
+
+/** 종단 보기가 건네는 것 — 알약 목록 · 종류 · 측점 간격 · 고름 · 옮김(알약과 같은 길). */
+export interface PlanMarkSource {
+  marks: () => ReadonlyArray<StructureInstance>;
+  types: () => ReadonlyArray<StructureType>;
+  intervalM: () => number;
+  select: (structureId: string) => void;
+  move: (structureId: string, toChainageM: number) => void;
+}
+
+const sources = new Map<string, PlanMarkSource>();
+/** 목록이 바뀌면 다시 그릴 편집 창(프로젝트마다). */
+const redraws = new Map<string, Set<() => void>>();
+
+/** 알약 목록이 바뀜(추가 · 옮김 · 노선 따라감) — 그 프로젝트 편집 창을 다시 그림. */
+export function planMarksChanged(projectId: string): void {
+  redraws.get(projectId)?.forEach((redraw) => redraw());
+}
+
+/** 프로젝트의 마커 재료를 건넴 — 돌려준 함수로 뗌(보기를 떠날 때). */
+export function setPlanMarkSource(projectId: string, source: PlanMarkSource): () => void {
+  sources.set(projectId, source);
+  return () => void (sources.get(projectId) === source && sources.delete(projectId));
+}
+
+interface PlanMark {
+  id: string;
+  chainageM: number;
+  structure: StructureInstance;
+  type: StructureType | undefined;
+  name: string;
+}
+
+/** 옮기는 중(끌기 · 방향키 누름) — 놓을 때 · 뗄 때 `to` 로 한 번 옮김. 창(캔버스)마다 따로. */
+interface Moving {
+  id: string;
+  name: string;
+  from: number;
+  to: number;
+  totalM: number;
+}
+const movings = new WeakMap<HTMLCanvasElement, Moving | null>();
+const balloons = new WeakMap<HTMLCanvasElement, { key: string; element: HTMLElement }>();
+
+const lengthOf = (line: ReadonlyArray<Vertex>): number =>
+  line.reduce(
+    (sum, vertex, index) =>
+      index ? sum + Math.hypot(vertex[0] - line[index - 1][0], vertex[1] - line[index - 1][1]) : 0,
+    0,
+  );
+
+/** 지금 마커 목록(옮기는 것은 그 자리) · 고른 것 — 재료가 없으면 null. */
+function planMarks(
+  canvas: HTMLCanvasElement,
+): { source: PlanMarkSource; marks: PlanMark[]; picked: string | null } | null {
+  const projectId = draftProjectId();
+  const source = sources.get(projectId);
+  if (!source) return null;
+  const list = laneStructures(source.marks());
+  const types = new Map(source.types().map((type) => [type.type_id, type]));
+  const texts = structurePillTexts(list, types);
+  const moving = movings.get(canvas) ?? null;
+  const marks = list
+    .filter((structure) => structure.structure_id)
+    .map((structure): PlanMark => {
+      const id = structure.structure_id as string;
+      return {
+        id,
+        chainageM: moving?.id === id ? moving.to : structureAnchorM(structure),
+        structure,
+        type: types.get(structure.type_id),
+        name: texts.get(id)?.name ?? structure.type_id,
+      };
+    });
+  // 옮기는 중엔 그것 — 관 고름은 누가거리만 들어 옮긴 자리로는 못 찾음
+  const picked = moving?.id ?? pickedMarkId(marks, readSelection(projectId), PIPE_MATCH_M);
+  return { source, marks, picked };
+}
+
+/** 알약 꼴 마커 한 개 — 노선 방향으로 누운 둥근 막대(종류 색 · 흰 테 · 고르면 하늘 테). */
+function paintMark(
+  context: CanvasRenderingContext2D,
+  scene: RouteEditScene,
+  line: ReadonlyArray<Vertex>,
+  mark: PlanMark,
+  picked: boolean,
+  halo: string,
+): void {
+  const frame = stationFrameAt(line, mark.chainageM);
+  if (!frame) return;
+  const [x, y] = scene.toScreen(frame.origin);
+  const [fx, fy] = scene.toScreen([
+    frame.origin[0] + frame.left[1],
+    frame.origin[1] - frame.left[0],
+  ]); // 앞쪽 1 m(왼쪽 축을 시계로 90°)
+  const half = picked ? MARK_HALF_PX + 2 : MARK_HALF_PX;
+  context.save();
+  context.translate(x, y);
+  context.rotate(Math.atan2(fy - y, fx - x));
+  context.lineCap = "round";
+  const stroke = (color: string, width: number): void => {
+    context.strokeStyle = color;
+    context.lineWidth = width;
+    context.beginPath();
+    context.moveTo(-half, 0);
+    context.lineTo(half, 0);
+    context.stroke();
+  };
+  if (picked) stroke(PICKED_RING, MARK_WIDTH_PX + 7);
+  stroke(halo, MARK_WIDTH_PX + 3);
+  stroke(mark.type?.style?.color ?? "#888", MARK_WIDTH_PX);
+  context.restore();
+}
+
+/** 마커 · 고른 마커 법선 · 정보 창 — `_Render` 가 라벨 뒤 · 교각점 아래에 부름. */
+export function drawStructureMarks(
+  context: CanvasRenderingContext2D,
+  scene: RouteEditScene,
+  line: ReadonlyArray<Vertex>,
+  style: CSSStyleDeclaration,
+): void {
+  const canvas = context.canvas;
+  const found = line.length >= 2 ? planMarks(canvas) : null;
+  const halo = style.getPropertyValue("--map-halo") || "rgba(255,255,255,0.9)";
+  const picked = found?.marks.find((mark) => mark.id === found.picked) ?? null;
+  found?.marks.forEach(
+    (mark) => mark !== picked && paintMark(context, scene, line, mark, false, halo),
+  );
+  if (picked) {
+    drawStationNormal(context, scene, line, picked.chainageM);
+    paintMark(context, scene, line, picked, true, halo);
+  }
+  showBalloon(canvas, scene, line, picked && found ? { mark: picked, source: found.source } : null);
+}
+
+/** 고른 마커 위 정보 창 — 알약 벌룬 그대로 · 마커 위(위가 모자라면 아래) · 누름은 지나감. */
+function showBalloon(
+  canvas: HTMLCanvasElement,
+  scene: RouteEditScene,
+  line: ReadonlyArray<Vertex>,
+  pick: { mark: PlanMark; source: PlanMarkSource } | null,
+): void {
+  const kept = balloons.get(canvas);
+  const frame = pick && stationFrameAt(line, pick.mark.chainageM);
+  if (!pick || !frame || !canvas.parentElement) {
+    kept?.element.remove();
+    balloons.delete(canvas);
+    return;
+  }
+  const { mark } = pick;
+  const structure = { ...mark.structure, chainage_m: mark.chainageM };
+  const position = positionText(structure, pick.source.intervalM());
+  const lines = balloonLines(structure, mark.type, { name: mark.name, position });
+  const key = JSON.stringify([lines, mark.type?.style?.color]);
+  let element = kept?.element;
+  if (!element || kept?.key !== key) {
+    const next = balloonElement(lines, mark.type);
+    next.classList.add("is-center");
+    next.style.pointerEvents = "none";
+    if (element) element.replaceWith(next);
+    else canvas.parentElement.append(next);
+    element = next;
+    balloons.set(canvas, { key, element });
+  }
+  // 그림은 캔버스 가운데를 축으로 돎 — 창 자리도 같은 만큼 돌림
+  const [sx, sy] = scene.toScreen(frame.origin);
+  const cx = scene.view.width / 2;
+  const cy = scene.view.height / 2;
+  const cos = Math.cos(scene.rotationRad);
+  const sin = Math.sin(scene.rotationRad);
+  const x = cx + (sx - cx) * cos - (sy - cy) * sin;
+  const y = cy + (sx - cx) * sin + (sy - cy) * cos;
+  element.style.left = `${x}px`;
+  element.style.top = `${y}px`;
+  element.style.bottom = "auto";
+  element.style.transform =
+    y < element.offsetHeight + 24 ? "translate(-50%, 14px)" : "translate(-50%, calc(-100% - 14px))";
+}
+
+export interface StructureMarkInput {
+  /** 마커를 눌렀으면 고르고 끌기 시작 · true(교각점 · 손잡이 다음 차례). */
+  press: (px: number, py: number) => boolean;
+  /** 끄는 중이면 자리 바꿈 · true. */
+  move: (px: number, py: number) => boolean;
+  /** 끄는 중이었으면 놓음(옮겼으면 한 번 옮김) · true. */
+  release: () => boolean;
+  /** 마커 위인가 — 커서 몫. */
+  over: (px: number, py: number) => boolean;
+}
+
+/** 끌기 · 방향키 배선 — `_Pointer` 가 부름(같은 재료 `params`). */
+export function bindStructureMarks(
+  params: RouteEditPointerParams,
+  dragging: () => boolean,
+): StructureMarkInput {
+  const { canvas, status } = params;
+  const projectId = draftProjectId();
+  const list = redraws.get(projectId) ?? new Set<() => void>();
+  redraws.set(projectId, list);
+  const redraw = (): void => void (canvas.isConnected ? params.draw() : list.delete(redraw));
+  list.add(redraw);
+  const lineNow = (): Vertex[] => {
+    const state = params.state();
+    return state.plannedLine.length ? state.plannedLine : state.planned;
+  };
+  const markAt = (px: number, py: number): PlanMark | null => {
+    const found = planMarks(canvas);
+    const line = lineNow();
+    let best: PlanMark | null = null;
+    let bestDistance = pickPx(MARK_HIT_PX);
+    for (const mark of found?.marks ?? []) {
+      const frame = stationFrameAt(line, mark.chainageM);
+      if (!frame) continue;
+      const [x, y] = params.toScreen(frame.origin);
+      const distance = Math.hypot(x - px, y - py);
+      if (distance <= bestDistance) [best, bestDistance] = [mark, distance];
+    }
+    return best;
+  };
+  const say = (moving: Moving, done: boolean): void => {
+    const interval = sources.get(draftProjectId())?.intervalM() ?? params.stationIntervalM;
+    const shift = moving.to - moving.from;
+    status.textContent =
+      `${params.routeHead()} — 구조물 ${moving.name} ${formatStation(moving.from, interval)} → ` +
+      `${formatStation(moving.to, interval)}(${shift > 0 ? "+" : ""}${shift} m)` +
+      (done ? " 옮김 — [저장]에서 정본." : " 옮기는 중.");
+  };
+  /** 놓음 · 뗌 — 옮겼으면 알약 끌기와 같은 길로 한 번. */
+  const finish = (): boolean => {
+    const moving = movings.get(canvas);
+    if (!moving) return false;
+    movings.set(canvas, null);
+    if (moving.to !== moving.from) {
+      sources.get(draftProjectId())?.move(moving.id, moving.to);
+      say(moving, true);
+    }
+    params.draw();
+    return true;
+  };
+  const start = (mark: PlanMark): Moving => {
+    const moving = {
+      id: mark.id,
+      name: mark.name,
+      from: mark.chainageM,
+      to: mark.chainageM,
+      totalM: lengthOf(lineNow()),
+    };
+    movings.set(canvas, moving);
+    return moving;
+  };
+
+  // 방향키 — 마커를 골랐고 교각점을 안 골랐을 때 · 누름 ~ 뗌 한 번이 한 옮김(교각점 방향키와 같은 반복)
+  let holdKey: ArrowKey | null = null;
+  let timer = 0;
+  const metricAt = (x: number, y: number): Vertex => params.toMetric(...params.unrotate(x, y));
+  const step = (moving: Moving, key: ArrowKey): void => {
+    const frame = stationFrameAt(lineNow(), moving.to);
+    if (!frame) return;
+    const tangent: Vertex = [frame.left[1], -frame.left[0]];
+    moving.to = markStep(
+      moving.to,
+      arrowSign(key, arrowStep(key, false, metricAt), tangent),
+      moving.totalM,
+    );
+    say(moving, false);
+    params.draw();
+  };
+  const release = (): void => {
+    window.clearTimeout(timer);
+    window.clearInterval(timer);
+    if (holdKey === null) return;
+    holdKey = null;
+    finish();
+  };
+  const detach = (): void => {
+    window.removeEventListener("keydown", onKeyDown, true);
+    window.removeEventListener("keyup", onKeyUp, true);
+    window.removeEventListener("blur", release);
+  };
+  function onKeyDown(event: KeyboardEvent): void {
+    if (!canvas.isConnected) return detach();
+    if (!isArrowKey(event.key) || !lastPointerWithin(".b05-routeedit")) return;
+    const target = event.target as HTMLElement | null;
+    if (target?.closest?.("input, select, textarea, [contenteditable='true']")) return;
+    if (event.repeat || holdKey || dragging() || params.measureMode()) return;
+    if (params.state().picked >= 0 || movings.get(canvas)) return; // 교각점 방향키 몫
+    const found = planMarks(canvas);
+    const mark = found?.marks.find((entry) => entry.id === found.picked);
+    if (!mark) return;
+    event.preventDefault();
+    const moving = start(mark);
+    const key = (holdKey = event.key);
+    step(moving, key);
+    timer = window.setTimeout(() => {
+      timer = window.setInterval(() => holdKey === key && step(moving, key), HOLD_INTERVAL_MS);
+    }, HOLD_DELAY_MS);
+  }
+  function onKeyUp(event: KeyboardEvent): void {
+    if (!canvas.isConnected) return detach();
+    if (event.key === holdKey) release();
+  }
+  window.addEventListener("keydown", onKeyDown, true);
+  window.addEventListener("keyup", onKeyUp, true);
+  window.addEventListener("blur", release);
+
+  return {
+    press(px, py) {
+      const mark = markAt(px, py);
+      if (!mark) return false;
+      release();
+      planMarks(canvas)?.source.select(mark.id); // 알약 고름과 같은 길(공용 고름)
+      start(mark);
+      params.draw();
+      return true;
+    },
+    move(px, py) {
+      const moving = movings.get(canvas);
+      if (!moving || holdKey) return false;
+      const hit = routePointAtScreen(lineNow(), params.toScreen, px, py, Infinity);
+      const near = hit ? markChainage(hit.chainageM, moving.totalM) : moving.to;
+      // 옛 소수 자리(80.17)는 반올림 자리(80)에 머무는 동안 그대로 — 눌렀다 떼기만 해도 옮겨지지 않게
+      const to = near === Math.round(moving.from) ? moving.from : near;
+      if (to !== moving.to) {
+        moving.to = to;
+        say(moving, false);
+        params.draw();
+      }
+      return true;
+    },
+    release: () => !holdKey && finish(),
+    over: (px, py) => markAt(px, py) !== null,
+  };
+}

B05_Profile/B05_Profile_UI_Structures_Marks.ts

@@ -78,7 +78,7 @@ export interface StructureMarksOptions {
 }
 
 /** 위치 표기 — 측점번호+잔여거리(예: 3+18.0). 누가거리 표기는 쓰지 않는다(2026-08-17). */
-function positionText(structure: StructureInstance, intervalM: number): string {
+export function positionText(structure: StructureInstance, intervalM: number): string {
   return structure.placement === "interval"
     ? `${formatStation(structure.start_m ?? 0, intervalM)} ~ ${formatStation(structure.end_m ?? 0, intervalM)}`
     : formatStation(structure.chainage_m ?? 0, intervalM);
@@ -141,6 +141,16 @@ export function structurePillTexts(
   );
 }
 
+/** 알약 자리 목록 — 노선 초안 동안은 묶음 follow 뒤 자리(평면 구조물 마커 399 도 이 목록). */
+export function laneStructures(
+  structures: ReadonlyArray<StructureInstance>,
+): ReadonlyArray<StructureInstance> {
+  const pipe = pagePipeline(draftProjectId());
+  return pipe?.input("route")
+    ? followedMarks(structures, pipe.input("structures"), pipe.input("pipes"))
+    : structures;
+}
+
 /**
  * 그래프 아래에 구조물 알약 레인을 만들어 돌려준다(호출부가 원하는 위치에 붙인다).
  */
@@ -151,10 +161,7 @@ export function buildStructureLane(options: StructureMarksOptions): HTMLElement
   lane.style.height = `${STRUCTURE_LANE_HEIGHT_PX}px`;
 
   const typeMap = new Map(options.types.map((type) => [type.type_id, type]));
-  const pipe = pagePipeline(draftProjectId());
-  const structures = pipe?.input("route")
-    ? followedMarks(options.structures, pipe.input("structures"), pipe.input("pipes"))
-    : options.structures;
+  const structures = laneStructures(options.structures);
   // 좌측 목록과 같은 중복 이름 번호(2026-08-19 사용자 지시) — 알약 글·툴팁·벌룬 제목이
   // 모두 이 번호를 따른다.
   const texts = structurePillTexts(structures, typeMap);
@@ -266,13 +273,20 @@ function buildBalloon(
   anchorPx: number,
   row: number | null,
 ): HTMLElement {
-  const balloon = document.createElement("div");
-  balloon.className = "b05-structure__balloon";
+  const balloon = balloonElement(lines, type);
   balloon.classList.add(row === 0 ? "is-left" : row === 1 ? "is-right" : "is-center");
   balloon.style.left = `${anchorPx}px`;
   balloon.style.bottom = `${STRUCTURE_LANE_HEIGHT_PX + ROW_GAP_PX + EDIT_BUTTON_CLEARANCE_PX}px`;
-  balloon.style.borderColor = type?.style?.color ?? "#888";
+  // 붙은 뒤 그 창의 틀에서 잼 — 만들 때는 아직 메인 문서 소속이라 새 창 최대화 때 멈춤(230-2).
+  queueMicrotask(() => frameOf(balloon, () => flipIfClipped(balloon)));
+  return balloon;
+}
 
+/** 벌룬 몸(제목 + 줄 · 테 색) — 자리는 부르는 쪽(알약 레인 · 평면 구조물 마커 399). */
+export function balloonElement(lines: string[], type: StructureType | undefined): HTMLElement {
+  const balloon = document.createElement("div");
+  balloon.className = "b05-structure__balloon";
+  balloon.style.borderColor = type?.style?.color ?? "#888";
   const [name, ...rest] = lines;
   const title = document.createElement("strong");
   title.textContent = name;
@@ -284,8 +298,6 @@ function buildBalloon(
       return span;
     }),
   );
-  // 붙은 뒤 그 창의 틀에서 잼 — 만들 때는 아직 메인 문서 소속이라 새 창 최대화 때 멈춤(230-2).
-  queueMicrotask(() => frameOf(balloon, () => flipIfClipped(balloon)));
   return balloon;
 }
 

B05_Profile/logic/B05_Profile_RouteEdit_StructureMarks.ts

@@ -0,0 +1,47 @@
+/* =============================================================================
+ * B05_Profile/logic/B05_Profile_RouteEdit_StructureMarks.ts
+ * 평면 구조물 측점 마커(399 · 요구 250-2) — 노선 따라 정수 m 자리 · 방향키 부호 · 고른 마커.
+ *
+ *   · 끌기 · 방향키 = 노선 위 정수 m(시점 0 ~ 종점 내림 · 밖은 끝에 붙음) · 방향키 한 번 1 m(Shift 없음).
+ *   · 방향키 부호 = 누른 화면 방향이 노선 앞쪽과 같은 쪽이면 + · 거의 직각이면 → · ↑ = +.
+ *   · 고른 마커 = 공용 고름 구조물 id 와 같은 것 · id 없으면(관 고름) 그 누가거리 가까운 것.
+ * 파이썬 짝 아님. 순수 계산 — 화면 · fetch · sessionStorage 없음. 부르는 쪽은 `_UI_RouteEdit_StructureMarks`.
+ * ========================================================================== */
+
+import type { ArrowKey } from "./B05_Profile_RouteEdit_KeyNudge";
+import type { Vertex } from "./B05_Profile_UI_RouteEdit_Curve";
+
+/** 노선 위 정수 m 자리 — 0 ~ 종점(내림) 밖은 끝에 붙임. */
+export function markChainage(rawM: number, totalM: number): number {
+  return Math.min(Math.max(Math.round(rawM), 0), Math.max(0, Math.floor(totalM)));
+}
+
+/** 방향키 한 번 — 지금 자리(정수로) ± 1 m. */
+export const markStep = (chainageM: number, sign: 1 | -1, totalM: number): number =>
+  markChainage(Math.round(chainageM) + sign, totalM);
+
+/** 방향키 부호 — `keyDir`(누른 화면 방향의 도면 벡터) · `tangent`(노선 앞쪽) 같은 쪽이면 +1. */
+export function arrowSign(key: ArrowKey, keyDir: Vertex, tangent: Vertex): 1 | -1 {
+  const dot = keyDir[0] * tangent[0] + keyDir[1] * tangent[1];
+  const size = Math.hypot(keyDir[0], keyDir[1]) * Math.hypot(tangent[0], tangent[1]);
+  if (Math.abs(dot) > size * 0.2) return dot > 0 ? 1 : -1;
+  return key === "ArrowRight" || key === "ArrowUp" ? 1 : -1;
+}
+
+/** 고른 마커 id — 고름 구조물 id 와 같은 것 · id 없으면 그 누가거리 `tolM` 안 가장 가까운 것 · 없으면 null. */
+export function pickedMarkId(
+  marks: ReadonlyArray<{ id: string; chainageM: number }>,
+  selection: { chainageM: number | null; structureId: string | null } | null,
+  tolM: number,
+): string | null {
+  if (!selection || selection.chainageM === null) return null;
+  if (selection.structureId)
+    return marks.some((mark) => mark.id === selection.structureId) ? selection.structureId : null;
+  let best: string | null = null;
+  let bestGap = tolM;
+  for (const mark of marks) {
+    const gap = Math.abs(mark.chainageM - selection.chainageM);
+    if (gap < bestGap) [best, bestGap] = [mark.id, gap];
+  }
+  return best;
+}