Merge remote-tracking branches 'origin/main_desktop_1' and 'origin/sub_desktop_1' into main_laptop_1

B05_Profile/B05_Profile_UI_RouteEdit.ts

@@ -166,6 +166,7 @@ export async function openRouteEditModal(
       measureControls.sync();
       draw();
     },
+    onHint: () => measureControls.sync(),
   });
   /** 재기 단추·작은 창 — 배선은 `_Measure` 몫. */
   const measureControls = bindMeasureControls({

B05_Profile/B05_Profile_UI_RouteEdit_Measure.ts

@@ -10,6 +10,10 @@
  * 지반고는 **찍는 순간에만** 서버에 묻는다(`/route/elevations`). 확정된 지표면을 읽기만 하는
  * 통로라 「편집 중에는 계산이 안 나간다」(계획서 0-2 확정 7)와 부딪히지 않는다 — 다만 노드를
  * 끄는 동안에는 한 번도 부르지 않는다.
+ *
+ * 첫 점을 찍으면 그 노선 땅 높이를 일정 간격으로 **한 번에** 받아 둔다(계획서 48-1). 커서를
+ * 움직이는 동안 길이 · 지반고 · 기울기는 이 표에서 보간해 바로 보이고 서버는 안 부른다.
+ * 둘째 점을 누르면 전처럼 두 점만 다시 물어 그 값으로 고정한다.
  * ========================================================================== */
 
 import { fetchRouteElevations } from "./B05_Profile_Api_Replan";
@@ -23,6 +27,10 @@ export type MeasureLine = "planned" | "expected";
 
 /** 구간 재기로 노선을 짚었다고 볼 거리(px). */
 const MEASURE_HIT_PX = 14;
+/** 커서 미리보기용 땅 높이 표 간격(m). */
+const PROFILE_STEP_M = 2;
+/** 한 번에 묻는 점 수 상한 — 긴 노선은 간격을 넓힌다. */
+const PROFILE_MAX_POINTS = 3000;
 
 interface MeasurePoint extends RoutePointHit {
   line: MeasureLine;
@@ -41,6 +49,69 @@ export interface MeasureToolParams {
   isClosed: () => boolean;
   /** 상태가 바뀌었다 — 호출부가 상태줄을 다시 적고 다시 그린다. */
   onChange: () => void;
+  /** 커서 미리보기 값이 바뀌었다 — 작은 창 글만 다시 적는다(그리기는 포인터 몫). */
+  onHint?: () => void;
+}
+
+/** 첫 점 노선의 땅 높이 표 — 누가거리 `chainages[i]` 자리의 지반고 `z[i]`. */
+interface LineProfile {
+  /** 표를 만든 노선 — 편집으로 노선이 바뀌면 배열이 새로 생겨 낡은 표를 알아챈다. */
+  vertices: Vertex[];
+  stepM: number;
+  chainages: number[];
+  /** 받는 중이면 null. */
+  z: Array<number | null> | null;
+  failed: boolean;
+}
+
+/** 노선 전체 길이(m). */
+function lineLength(vertices: Vertex[]): number {
+  let total = 0;
+  for (let index = 0; index < vertices.length - 1; index += 1) {
+    total += Math.hypot(
+      vertices[index + 1][0] - vertices[index][0],
+      vertices[index + 1][1] - vertices[index][1],
+    );
+  }
+  return total;
+}
+
+/** 노선을 따라 `stepM` 마다 한 점(끝점 포함) — 점과 그 누가거리. */
+function sampleAlong(vertices: Vertex[], stepM: number): { points: Vertex[]; chainages: number[] } {
+  const points: Vertex[] = [];
+  const chainages: number[] = [];
+  let travelled = 0;
+  let next = 0;
+  for (let index = 0; index < vertices.length - 1; index += 1) {
+    const [ax, ay] = vertices[index];
+    const [bx, by] = vertices[index + 1];
+    const segmentM = Math.hypot(bx - ax, by - ay);
+    while (segmentM > 0 && next <= travelled + segmentM) {
+      const t = (next - travelled) / segmentM;
+      points.push([ax + (bx - ax) * t, ay + (by - ay) * t]);
+      chainages.push(next);
+      next += stepM;
+    }
+    travelled += segmentM;
+  }
+  if (points.length && travelled - chainages[chainages.length - 1] > 1e-6) {
+    points.push(vertices[vertices.length - 1]);
+    chainages.push(travelled);
+  }
+  return { points, chainages };
+}
+
+/** 표에서 누가거리 자리의 지반고를 선형 보간 — 양옆 중 하나라도 모르면 null. */
+function profileZ(profile: LineProfile, chainageM: number): number | null {
+  const { chainages, z } = profile;
+  if (!z || chainages.length === 0) return null;
+  if (chainages.length === 1) return z[0];
+  const index = Math.max(0, Math.min(chainages.length - 2, Math.floor(chainageM / profile.stepM)));
+  const [c0, c1] = [chainages[index], chainages[index + 1]];
+  const [z0, z1] = [z[index], z[index + 1]];
+  if (z0 === null || z1 === null) return null;
+  const t = c1 > c0 ? Math.max(0, Math.min(1, (chainageM - c0) / (c1 - c0))) : 0;
+  return z0 + (z1 - z0) * t;
 }
 
 export interface MeasureMark {
@@ -114,27 +185,86 @@ export function createMeasureTool(params: MeasureToolParams): MeasureTool {
   let picked: MeasurePoint[] = [];
   /** 첫 점만 찍혔을 때 커서가 가리키는 둘째 점 후보. */
   let hover: MeasureMark | null = null;
+  /** 첫 점 노선의 땅 높이 표 — 커서 미리보기 값의 바탕. */
+  let profile: LineProfile | null = null;
+  /** 두 점을 찍고 그 자리 지반고를 묻는 중 — 답이 오기 전에 「못 읽음」으로 보이지 않게. */
+  let fixing = false;
+
+  /** 첫 점 노선 땅 높이를 한 번에 받아 둔다. 같은 노선 표가 살아 있으면 다시 안 묻는다. */
+  const loadProfile = (line: MeasureLine): void => {
+    const vertices = params.lines()[line];
+    if (profile && profile.vertices === vertices) return;
+    const stepM = Math.max(PROFILE_STEP_M, lineLength(vertices) / PROFILE_MAX_POINTS);
+    const { points, chainages } = sampleAlong(vertices, stepM);
+    const asked: LineProfile = { vertices, stepM, chainages, z: null, failed: !points.length };
+    profile = asked;
+    if (!points.length) return;
+    fetchRouteElevations(params.projectId, points)
+      .then((heights) => {
+        asked.z = chainages.map((_, index) => heights[index] ?? null);
+      })
+      .catch(() => {
+        asked.failed = true;
+      })
+      .finally(() => {
+        if (params.isClosed() || profile !== asked) return; // 그 사이 다른 노선을 짚었으면 버린다.
+        params.onHint?.();
+      });
+  };
+
+  /** 구간 한 줄 — 두 점(누가거리 · 지반고)에서 길이 · 지반고 · 종단기울기. */
+  const spanText = (
+    name: string,
+    a: { chainageM: number; z: number | null },
+    b: { chainageM: number; z: number | null },
+    missing: string,
+  ): string => {
+    const span = Math.abs(b.chainageM - a.chainageM);
+    const head =
+      `${name}구간 ${formatStation(a.chainageM, params.stationIntervalM)} → ` +
+      `${formatStation(b.chainageM, params.stationIntervalM)} · 길이 ${span.toFixed(1)}m`;
+    if (a.z === null || b.z === null || span <= 1e-6) return `${head} · ${missing}`;
+    // 기울기는 **노선을 따라간 길이** 기준이다 — 직선거리로 나누면 곡선부에서 과대평가된다.
+    const rise = b.z - a.z;
+    return (
+      `${head} · 지반고 ${a.z.toFixed(1)} → ${b.z.toFixed(1)}m` +
+      ` · 종단기울기 ${((rise / span) * 100).toFixed(1)}%`
+    );
+  };
+
+  /** 커서 미리보기 한 줄 — 받아 둔 높이 표에서 보간한 값(누르면 두 점만 다시 물어 고정). */
+  const previewText = (first: MeasurePoint, at: MeasureMark): string => {
+    const table =
+      profile !== null && profile.vertices === params.lines()[first.line] ? profile : null;
+    const zOf = (chainageM: number): number | null => (table ? profileZ(table, chainageM) : null);
+    const missing = !table
+      ? "지반고 읽는 중…"
+      : table.failed
+        ? "지반고를 못 읽어 기울기는 못 냅니다."
+        : table.z
+          ? "지표면 밖이라 기울기는 못 냅니다."
+          : "지반고 읽는 중…";
+    const text = spanText(
+      LINE_NAME[first.line],
+      { chainageM: first.chainageM, z: zOf(first.chainageM) },
+      { chainageM: at.chainageM, z: zOf(at.chainageM) },
+      missing,
+    );
+    return `${text} · 누르면 고정`;
+  };
 
   const hint = (): string => {
     if (picked.length === 0) return "";
     const first = picked[0];
-    const name = LINE_NAME[first.line];
     if (picked.length === 1) {
-      return `${name}구간 재기 — 시작 ${formatStation(first.chainageM, params.stationIntervalM)}. 한 점 더.`;
+      if (hover) return previewText(first, hover);
+      return `${LINE_NAME[first.line]}구간 재기 — 시작 ${formatStation(first.chainageM, params.stationIntervalM)}. 한 점 더.`;
     }
-    const second = picked[1];
-    const span = Math.abs(second.chainageM - first.chainageM);
-    const head =
-      `${name}구간 ${formatStation(first.chainageM, params.stationIntervalM)} → ` +
-      `${formatStation(second.chainageM, params.stationIntervalM)} · 길이 ${span.toFixed(1)}m`;
-    if (first.z === null || second.z === null || span <= 1e-6) {
-      return `${head} · 지반고를 못 읽어 기울기는 못 냅니다.`;
-    }
-    // 기울기는 **노선을 따라간 길이** 기준이다 — 직선거리로 나누면 곡선부에서 과대평가된다.
-    const rise = second.z - first.z;
-    return (
-      `${head} · 지반고 ${first.z.toFixed(1)} → ${second.z.toFixed(1)}m` +
-      ` · 종단기울기 ${((rise / span) * 100).toFixed(1)}%`
+    return spanText(
+      LINE_NAME[first.line],
+      first,
+      picked[1],
+      fixing ? "지반고 읽는 중…" : "지반고를 못 읽어 기울기는 못 냅니다.",
     );
   };
 
@@ -171,10 +301,14 @@ export function createMeasureTool(params: MeasureToolParams): MeasureTool {
       const next = picked.length === 1 ? hitAt(px, py) : null;
       if (!next && !hover) return false;
       hover = next;
+      // 노선을 고친 뒤면 표가 낡았다 — 다시 받는다.
+      if (next) loadProfile(picked[0].line);
+      params.onHint?.();
       return true;
     },
     clear() {
       hover = null;
+      profile = null;
       if (picked.length === 0) return;
       picked = [];
       params.onChange();
@@ -188,8 +322,12 @@ export function createMeasureTool(params: MeasureToolParams): MeasureTool {
         return;
       }
       picked = picked.length >= 2 ? [{ ...hit, z: null }] : [...picked, { ...hit, z: null }];
+      fixing = picked.length === 2;
       params.onChange();
-      if (picked.length < 2) return;
+      if (picked.length < 2) {
+        loadProfile(hit.line);
+        return;
+      }
       const asked = picked;
       try {
         const heights = await fetchRouteElevations(
@@ -202,7 +340,9 @@ export function createMeasureTool(params: MeasureToolParams): MeasureTool {
         });
       } catch {
         /* 지반고를 못 읽으면 길이만 낸다 — `hint` 가 그렇게 말한다. */
+        if (picked !== asked) return;
       }
+      fixing = false;
       params.onChange();
     },
   };

B05_Profile/B05_Profile_UI_RouteEdit_Recommend.ts

@@ -43,6 +43,7 @@ import {
   type WeightKey,
 } from "./B05_Profile_UI_RouteEdit_Initial_Model";
 import { createRecommendMap, RECOMMEND_MAP_HTML } from "./B05_Profile_UI_RouteEdit_Recommend_Map";
+import { recommendHelpHtml, syncRecommendHelp } from "./B05_Profile_UI_RouteEdit_Recommend_Help";
 import "./B05_Profile_UI_Style_RouteRecommend.css";
 
 type Vertex = [number, number];
@@ -225,7 +226,8 @@ export function openRecommendModal(params: RecommendParams): void {
           <span class="b05-routerec__state" data-state></span>
           <button type="button" class="ui-btn ui-btn--filled" data-act="apply" disabled>적용</button>
           <button type="button" class="ui-btn ui-btn--ghost" data-act="close">닫기</button>
-        </div>`;
+        </div>
+        ${recommendHelpHtml()}`;
 
       const q = <T extends HTMLElement>(sel: string): T => body.querySelector<T>(sel)!;
       map = createRecommendMap(q<HTMLElement>(".b05-routerec__mapwrap"));
@@ -342,6 +344,7 @@ export function openRecommendModal(params: RecommendParams): void {
           ? criteriaLine(preview.criteria, params.planMinRadiusM, preview.logic === "gradeline")
           : "";
         line("criteria").hidden = !preview;
+        syncRecommendHelp(body, logic);
         drawMap();
       }
 

B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Help.ts

@@ -0,0 +1,188 @@
+/* =============================================================================
+ * B05_Profile_UI_RouteEdit_Recommend_Help.ts
+ * [노선 추천] 모달 오른쪽 설명 칸(계획서 48-2) — 갈래 여덟 · 공통 제약 넷 · 결과 줄 읽는 법.
+ *
+ * 글은 서버 엔진(`B05_Profile_Engine_RouteInitial*`)이 실제로 하는 일을 따라 적는다 — 엔진을
+ * 바꾸면 여기 글도 같이 고친다. 고른 갈래는 강조하고 보이는 자리로 굴린다.
+ * ========================================================================== */
+
+import type { RouteInitialLogic } from "./B05_Profile_Api_RouteInitial";
+import { LOGIC_LABEL } from "./B05_Profile_UI_RouteEdit_Initial_Model";
+
+interface HelpEntry {
+  /** 한 줄 요약. */
+  summary: string;
+  /** 노선을 만드는 법. */
+  how: string[];
+  /** 이럴 때 고름. */
+  when: string;
+  /** 주의할 점. */
+  caution: string;
+}
+
+const LOGIC_HELP: Record<RouteInitialLogic, HelpEntry> = {
+  follow: {
+    summary: "전처리 때 만든 예상노선(점선)을 그대로 따라가는 노선",
+    how: [
+      "새로 길을 찾지 않음 — 예상노선 꺾임점에 최소 곡선반지름으로 곡선만 넣음",
+      "전처리 초기 계획노선과 같은 규칙이라 같은 선이 나옴",
+      "종단기울기 · 계류 이격은 막지 않고, 넘은 곳만 「못 지킨 구간」에 적음",
+    ],
+    when: "현장 답사로 정한 노선을 출발점으로 삼을 때 · 가장 빨리 나옴",
+    caution: "법정 기울기 · 계류 이격을 보장하지 않음 — 못 지킨 구간을 꼭 확인",
+  },
+  gradeline: {
+    summary: "정한 기울기로 등고선을 비스듬히 건너는 등경사선(영선) 노선",
+    how: [
+      "구간마다 기울기가 「목표 기울기」에 가장 가깝게 붙도록 길을 찾음",
+      "목표 칸을 비우면 종단기울기 상한이 목표 · 상한보다 크게 넣으면 상한으로 잘림",
+      "후보 중 목표와의 차(측점 20m 기울기 평균)가 가장 작은 것을 고름",
+    ],
+    when: "일정한 기울기로 오르내리는 노선이 필요할 때(지형도 위 영선 잡기와 같은 일)",
+    caution:
+      "오르막 · 내리막을 가리지 않음 · 목표를 비우면 상한에 붙은 가파른 노선이 되기 쉬움 — 목표를 상한보다 조금 낮게 넣기를 권함",
+  },
+  earthwork: {
+    summary: "깎고 쌓는 흙(절토 + 성토)이 가장 적은 노선",
+    how: [
+      "옆경사가 급한 곳 · 지반이 상한보다 가파른 곳을 비싸게 보고 길을 찾음",
+      "후보 중 절토 + 성토 어림 양이 가장 적은 것을 고름",
+      "흙 양 = 계획고를 상한 안으로 맞춘 선과 옆경사 단면(노폭 4m)으로 어림",
+    ],
+    when: "토공량 · 사토 처리를 줄여야 할 때",
+    caution: "비탈면 흙은 빠진 어림값 · 연장이 길어지는지 비교값으로 함께 볼 것",
+  },
+  gentle: {
+    summary: "종단기울기가 가장 순한 노선",
+    how: [
+      "기울기가 상한에 가까울수록 크게 벌점을 매겨 길을 찾음",
+      "후보 중 가장 가파른 구간의 기울기가 가장 낮은 것을 고름(같으면 평균 기울기)",
+    ],
+    when: "차량 주행 · 노면 침식이 걱정되는 노선",
+    caution: "거리 비용이 작아 돌아가는 긴 노선이 나올 수 있음 — 연장을 확인",
+  },
+  safe: {
+    summary: "급한 옆경사 · 계류 가까운 곳을 피하는 노선",
+    how: [
+      "옆경사 35°(약 70%) 이상 · 계류 이격 거리 안을 위험 구간으로 보고 피함",
+      "후보 중 위험 구간을 지나는 길이가 가장 짧은 것을 고름(같으면 평균 옆경사)",
+      "35° 기준 = 「35° 이상 전폭 절토」 기술 기준",
+    ],
+    when: "붕괴 · 유실 위험이 큰 급경사지 · 계곡 가까운 지형",
+    caution:
+      "계곡을 따라가는 지형에서는 위험 구간이 어디서나 길어 다른 갈래와 차이가 작음 — 계류 이격 값을 줄여 다시 셈해 볼 것",
+  },
+  crossings: {
+    summary: "계류를 건너는 횟수가 가장 적은 노선",
+    how: [
+      "계류 위를 지나는 칸에 벌점을 매겨 길을 찾음",
+      "후보 중 계류 횡단 수가 가장 적은 것을 고름(같으면 계류에서 더 먼 쪽)",
+      "10m 안에서 여러 번 건너는 것은 한 번으로 셈",
+    ],
+    when: "배수관 · 세월교 같은 횡단 구조물을 줄이고 싶을 때",
+    caution: "소하천 · 지방하천 · 국가하천만 셈 — 작은 세류는 빠짐",
+  },
+  cost: {
+    summary: "토공 · 연장 · 계류 횡단을 한 숫자로 묶은 공사비 어림이 가장 낮은 노선",
+    how: [
+      "공사비 어림 = 흙 1㎥ × 1 + 연장 1m × 2 + 계류 횡단 1곳 × 400(흙 ㎥ 상당)",
+      "같은 비율을 1m 당 값으로 바꿔 길을 찾고, 후보 중 어림값이 가장 낮은 것을 고름",
+    ],
+    when: "토공 · 연장 · 구조물 수를 한꺼번에 비교하고 싶을 때",
+    caution: "실제 원가가 아닌 상대값(임시 비율) — 갈래끼리 비교용으로만 볼 것",
+  },
+  weighted: {
+    summary: "예상 · 토공 · 기울기 세 비중(합 100)을 섞어 찾은 노선",
+    how: [
+      "예상 = 예상노선에서 떨어지지 않기 · 토공 = 흙 양 줄이기 · 기울기 = 순한 기울기",
+      "비중대로 섞은 비용 하나로 한 번 길을 찾음 — 한쪽이 100 이면 그 갈래와 같은 노선",
+      "자물쇠로 비중 하나를 고정하면 나머지 둘만 움직임 · 기본 50 / 25 / 25",
+    ],
+    when: "예상노선을 어느 정도 살리면서 토공 · 기울기도 챙기고 싶을 때",
+    caution: "제약은 벌점일 뿐이라 넘는 구간이 남을 수 있음 — 못 지킨 구간을 확인",
+  },
+};
+
+const CRITERIA_HELP: Array<{ name: string; text: string }> = [
+  {
+    name: "종단기울기 상한(%)",
+    text: "이보다 가파른 구간을 만들지 않음. 비우면 임도 종류 · 지형 · 설계속도 법정 값(20km/h 일반 9% · 특수 14%). 곡선을 넣은 뒤 넘으면 상한을 조금씩 낮춰 다시 찾음",
+  },
+  {
+    name: "최소 반지름(m)",
+    text: "꺾는 곳마다 이 반지름의 곡선이 들어갈 만큼 곧게 간 뒤에만 다시 꺾음. 비우면 설계속도 · 지형 법정 값(20km/h 15m · 12m)",
+  },
+  {
+    name: "계류 이격(m)",
+    text: "계류에서 이 거리 안으로는 따라 걷지 않고 건너거나 빠져나가는 방향으로만 움직임. 비우면 100m(타당성평가 「산지계류 100m 이내」 기준)",
+  },
+  {
+    name: "지반 고름 폭(m)",
+    text: "기울기를 잴 때 지형 잔굴곡을 고르는 폭. 클수록 매끈한 지반으로 봄. 비우면 5m",
+  },
+];
+
+const LINES_HELP: Array<{ name: string; text: string }> = [
+  {
+    name: "비교값",
+    text: "연장 · 기울기 최대 · 평균 · 옆경사 · 절토 · 성토 · 계류 횡단 · 공사비 어림 — 갈래를 바꿔 가며 견줌",
+  },
+  {
+    name: "못 지킨 구간",
+    text: "제약을 넘은 측점(5곳까지 · 나머지는 「외 N곳」, 전체는 마우스를 올리면 보임)",
+  },
+  {
+    name: "상한을 풂",
+    text: "지형상 상한 안으로는 시점 · 종점을 이을 수 없어 꼭 필요한 만큼만 상한을 올린 경우",
+  },
+  {
+    name: "거의 같은 노선",
+    text: "제약 안에서 갈 길이 좁은 띠 하나뿐이라 갈래가 달라도 노선이 겹치는 경우 — 제약 값을 바꾸면 벌어질 수 있음",
+  },
+];
+
+const LOGIC_ORDER: RouteInitialLogic[] = [
+  "follow",
+  "gradeline",
+  "earthwork",
+  "gentle",
+  "safe",
+  "crossings",
+  "cost",
+  "weighted",
+];
+
+/** 설명 칸 HTML — 모달 본문 끝에 붙는다(세로 구분선 오른쪽). */
+export function recommendHelpHtml(): string {
+  const logics = LOGIC_ORDER.map((key) => {
+    const entry = LOGIC_HELP[key];
+    return `<article class="b05-routerec__help-item" data-help-logic="${key}">
+      <h4>${LOGIC_LABEL[key]}</h4>
+      <p class="b05-routerec__help-summary">${entry.summary}</p>
+      <ul>${entry.how.map((line) => `<li>${line}</li>`).join("")}</ul>
+      <p><b>이럴 때</b> ${entry.when}</p>
+      <p class="b05-routerec__help-caution"><b>주의</b> ${entry.caution}</p>
+    </article>`;
+  }).join("");
+  const list = (items: Array<{ name: string; text: string }>): string =>
+    `<dl>${items.map((item) => `<dt>${item.name}</dt><dd>${item.text}</dd>`).join("")}</dl>`;
+  return `<aside class="b05-routerec__help" aria-label="노선 추천 설명">
+    <h3>추천 갈래</h3>
+    <p class="b05-routerec__help-lead">제약을 지키는 후보 노선 여러 벌을 찾은 뒤, 갈래마다 자기 기준이 가장 좋은 것을 고름.</p>
+    ${logics}
+    <h3>공통 제약</h3>
+    <p class="b05-routerec__help-lead">예상노선 추적 · 비중 계산을 뺀 갈래는 넘지 않음 · 칸을 비우면 기본값.</p>
+    ${list(CRITERIA_HELP)}
+    <h3>결과 줄 읽는 법</h3>
+    ${list(LINES_HELP)}
+  </aside>`;
+}
+
+/** 고른 갈래 설명을 강조하고 보이는 자리로 굴린다. */
+export function syncRecommendHelp(body: HTMLElement, logic: RouteInitialLogic): void {
+  body.querySelectorAll<HTMLElement>("[data-help-logic]").forEach((item) => {
+    const on = item.dataset.helpLogic === logic;
+    if (on && !item.classList.contains("is-on")) item.scrollIntoView({ block: "nearest" });
+    item.classList.toggle("is-on", on);
+  });
+}

B05_Profile/B05_Profile_UI_RouteEdit_Render.ts

@@ -184,10 +184,17 @@ export function drawRouteEditScene(context: CanvasRenderingContext2D, scene: Rou
     context.lineWidth = 0.8;
     drawPreparedLayer(context, scene.contours.layer, view, "dot", everyM);
     // 고른 가닥은 굵고 다른 색으로 덧그린다 — 지우고 다시 그리지 않고 위에 얹는다.
+    // 끊어져 여러 가닥으로 나뉜 **같은 높이 줄은 함께** 덧그린다(높이를 모르면 고른 가닥만).
     if (scene.pickedContour >= 0) {
+      const { layer } = scene.contours;
+      const level = layer.features[scene.pickedContour]?.labelValue ?? null;
       context.strokeStyle = style.getPropertyValue("--map-flow-arrow") || "#7c3aed";
       context.lineWidth = 2.6;
-      drawPreparedFeature(context, scene.contours.layer, scene.pickedContour, view);
+      layer.features.forEach((feature, index) => {
+        if (index === scene.pickedContour || (level !== null && feature.labelValue === level)) {
+          drawPreparedFeature(context, layer, index, view);
+        }
+      });
     }
     // 높이값 라벨은 여기서 안 낸다 — 노선·눈금 **뒤에** 그려야 안 묻힌다(맨 아래 참고).
   }

B05_Profile/B05_Profile_UI_Structures_Groups.ts

@@ -102,8 +102,16 @@ export function createGroupBoxes(): GroupBoxes {
         body.className = "b05-structure__grid";
         for (const scope of scopes) {
           const marked = [...scope.querySelectorAll<HTMLElement>("[data-option-keys]")];
-          const fits = marked.filter((node) =>
-            (node.dataset.optionKeys ?? "").split(" ").every((key) => key && keys.has(key)),
+          // 지금 숨은 칸(다른 시설 몫 · 안 고른 갈래)은 그 자리에 둠 — 같은 키 칸이 두 벌 옮겨 오지 않게
+          const shown = (node: HTMLElement): boolean => {
+            for (let at: HTMLElement | null = node; at && at !== scope; at = at.parentElement)
+              if (at.hidden) return false;
+            return true;
+          };
+          const fits = marked.filter(
+            (node) =>
+              shown(node) &&
+              (node.dataset.optionKeys ?? "").split(" ").every((key) => key && keys.has(key)),
           );
           // 바깥 칸만 — 옮길 칸 안의 칸은 따라 옴
           for (const node of fits.filter((n) => !fits.some((o) => o !== n && o.contains(n)))) {

B05_Profile/B05_Profile_UI_Structures_Panel.ts

@@ -66,7 +66,8 @@ export function createStructuresSection(
   // 폼 뼈대는 전용 조립기가 세운다(2026-09-03 · 700줄 제한) — 여기서는 값·검증·저장만.
   const form = buildStructuresForm({
     getInterval: () => callbacks.getInterval(),
-    onFacilityChange: () => liveCommit(),
+    // 갈래(유입구 구조 등)가 바뀌면 보이는 칸이 달라짐 — 그룹 상자도 다시 세움(PLAN 46-3)
+    onFacilityChange: () => (regroup(), liveCommit()),
   });
   const {
     root,

B05_Profile/B05_Profile_UI_Style_RouteRecommend.css

@@ -14,8 +14,9 @@
   z-index: calc(var(--z-modal, 1000) + 2);
 }
 
+/* 오른쪽 설명 칸(계획서 48-2)만큼 넓힘 — 왼쪽 기존 칸은 예전 폭 그대로. */
 .ui-modal.b05-routerec {
-  width: min(960px, 94vw);
+  width: min(1320px, 96vw);
   --modal-max: 92vh;
   font-size: var(--text-body-sm);
 }
@@ -25,6 +26,119 @@
   font-size: var(--text-body-sm);
 }
 
+/* 왼쪽 = 기존 칸 넷(알약 · 지도 · 결과 줄 · 바닥) · 오른쪽 = 세로 구분선 + 설명 칸. */
+.ui-modal.b05-routerec .b05-routerec__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
+  align-content: start;
+  column-gap: var(--spacing-16, 16px);
+}
+
+.b05-routerec__body > :not(.b05-routerec__help) {
+  grid-column: 1;
+}
+
+/* 설명 칸 — 왼쪽 높이를 따라가고(제 글 길이로 창을 키우지 않음) 넘치면 제 안에서 굴림. */
+.b05-routerec__help {
+  grid-column: 2;
+  grid-row: 1 / span 4;
+  contain: size;
+  overflow-y: auto;
+  padding-left: var(--spacing-16, 16px);
+  border-left: 1px solid var(--color-border);
+  color: var(--color-text-body);
+  font-size: var(--text-body-sm);
+  line-height: 1.55;
+}
+
+.b05-routerec__help h3 {
+  margin: var(--spacing-12) 0 var(--spacing-4, 4px);
+  color: var(--color-text-heading, var(--color-text-body));
+  font-size: var(--text-body);
+  font-weight: 700;
+}
+
+.b05-routerec__help h3:first-child {
+  margin-top: 0;
+}
+
+.b05-routerec__help-lead {
+  margin: 0 0 var(--spacing-8);
+  color: var(--color-text-secondary);
+}
+
+.b05-routerec__help-item {
+  margin-bottom: var(--spacing-8);
+  padding: var(--spacing-8);
+  border: 1px solid transparent;
+  border-radius: var(--radius-8, 6px);
+}
+
+/* 고른 갈래 — 알약과 같은 강조색 테두리. */
+.b05-routerec__help-item.is-on {
+  border-color: var(--color-primary);
+  background: var(--color-surface);
+}
+
+.b05-routerec__help-item h4 {
+  margin: 0 0 2px;
+  font-size: var(--text-body-sm);
+  font-weight: 700;
+}
+
+.b05-routerec__help-item.is-on h4 {
+  color: var(--color-primary);
+}
+
+.b05-routerec__help-item p,
+.b05-routerec__help dd {
+  margin: 2px 0;
+}
+
+.b05-routerec__help-item ul {
+  margin: 2px 0;
+  padding-left: 1.1em;
+}
+
+.b05-routerec__help-summary {
+  font-weight: 600;
+}
+
+.b05-routerec__help-caution {
+  color: var(--color-text-secondary);
+}
+
+.b05-routerec__help dl {
+  margin: 0;
+}
+
+.b05-routerec__help dt {
+  margin-top: var(--spacing-8);
+  font-weight: 600;
+}
+
+.b05-routerec__help dd {
+  color: var(--color-text-secondary);
+}
+
+/* 좁은 폭 — 설명 칸은 아래로(가로 구분선 · 제 높이 한도 안에서 굴림). */
+@media (max-width: 1000px) {
+  .ui-modal.b05-routerec .b05-routerec__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .b05-routerec__help {
+    grid-column: 1;
+    grid-row: auto;
+    contain: none;
+    max-height: 280px;
+    padding-top: var(--spacing-12);
+    padding-left: 0;
+    border-top: 1px solid var(--color-border);
+    border-left: none;
+  }
+}
+
 /* 알약 — 하나만 고른 상태(라디오 묶음). */
 /* 여덟 알약 — 네 칸 두 줄로 고르게(좁은 폭은 두 칸 네 줄). */
 .b05-routerec__pills {