From eb4f8ba55a2cdbd8922e876bf12003c82bc498a7 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Sat, 17 Oct 2026 11:48:16 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=EF=BB=BFfeat(B05):=20367-1=20=EC=9C=A0?=
 =?UTF-8?q?=ED=86=A0=EA=B3=A1=EC=84=A0=20=EB=8A=98=20=EC=A0=84=EC=B2=B4=20?=
 =?UTF-8?q?=EB=A7=9E=EC=B6=A4=20=C2=B7=20=EC=B8=A1=EC=A0=90=20=EC=97=B0?=
 =?UTF-8?q?=EA=B3=84=20=EB=B3=B4=EA=B8=B0=20=EC=A7=80=EC=9B=80=20=C2=B7=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=3D=20=ED=9A=A1=EB=8B=A8=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A4=80=20+=20=ED=86=A0=EB=9F=89=20=EB=B6=84=EB=B0=B0=20?=
 =?UTF-8?q?=C2=B7=20[=EB=8F=84=ED=98=95=20=EC=9C=84=EC=B9=98=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=ED=99=94]=20=ED=9A=A1=EB=8B=A8=20=EA=B8=B0=EC=A4=80?=
 =?UTF-8?q?=20=EC=99=BC=EC=AA=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 유토곡선 = 늘 노선 전체 한 화면(측점선 · 스크롤 동기 · 휠 · 스크롤마다 다시 그림 지움)
- 범례 기본값에 토량 분배 더함 · masshaul-visible 판 v6
- [토량 분배] = 분배 그림 보임/숨김 · [도형 위치 초기화] 범례 맨 앞
- 시험 354_1 · 354_2 · 354_3 · 224_1b 고쳐 씀

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy
---
 A00_Common/b_page_state.ts                    |   2 +-
 A00_Common/design/design_profile_overlays.ts  |   2 -
 .../B05_Profile_UI_Profile_MassHaul.ts        | 155 ++++--------------
 B05_Profile/B05_Profile_UI_Profile_Render.ts  |  14 --
 B05_Profile/B05_Profile_UI_Style_MassHaul.css |   6 +-
 common_util/common_util_mass_haul_view.ts     |   3 +-
 .../helper_354_2_masshaul_cross_only.cjs      |   2 +-
 .../tester/test_224_1b_masshaul_docked.py     |   7 +-
 .../tester/test_354_1_masshaul_own_panel.py   |   4 +-
 .../tester/test_354_2_masshaul_cross_only.py  |   2 +-
 resources/tester/test_354_3_scroll_echo.py    |  40 ++---
 11 files changed, 66 insertions(+), 171 deletions(-)

diff --git a/A00_Common/b_page_state.ts b/A00_Common/b_page_state.ts
index 3b0edc52f..f2359879c 100644
--- a/A00_Common/b_page_state.ts
+++ b/A00_Common/b_page_state.ts
@@ -89,7 +89,7 @@ export const STATE_REGISTRY = {
   "masshaul-visible": {
     bucket: "pref",
     scope: "global",
-    version: 5,
+    version: 6,
     legacy: () => "b06:masshaul-visible-v4",
   },
   "table-open": { bucket: "pref", scope: "global", legacy: () => "b05:profile:table:open" },
diff --git a/A00_Common/design/design_profile_overlays.ts b/A00_Common/design/design_profile_overlays.ts
index 5926afe74..f5735dcb2 100644
--- a/A00_Common/design/design_profile_overlays.ts
+++ b/A00_Common/design/design_profile_overlays.ts
@@ -59,8 +59,6 @@ export function createProfileOverlays(deps: ProfileOverlaysDeps) {
   const column = document.createElement("div");
   column.className = "b05-route-profile__column";
   column.append(bodyWrap, massHaul.overlay);
-  // 판의 가로 스크롤을 종단 스크롤러와 양방향 동기화 — 측점 세로선 정렬 유지.
-  massHaul.attachScrollSync(body);
   // 테이블은 종단 칸 바닥 겹침 판(2026-08-05 사용자 지시).
   const tableOverlay = createProfileTableOverlay(onChange);
   bodyWrap.append(tableOverlay.overlay, tableOverlay.handle);
diff --git a/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts b/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts
index 201cfa586..c544caf0d 100644
--- a/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts
+++ b/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts
@@ -17,8 +17,8 @@
  * ── 배치 (354-1 · 요구 235-7 「유토곡선도 분리」) ─────────────────────
  * 종단 열(그래프 · 표) 아래 칸에 따로 선다 — 종단도 · 표 위를 덮지 않고 높이 나눔 · 표 쌓기에도
  * 안 낀다. 높이는 판 위 경계 리사이저(`createPanelResizer`)로 조절하고 세션 동안 유지한다.
- * 머리줄([창 분할] · 접기 손잡이)은 접어도 남는다. 곡선 SVG는 판 안 자체 가로 스크롤러에
- * 들어가며, 종단 스크롤러와 scrollLeft를 양방향 동기화해 측점 세로선이 어긋나지 않게 한다.
+ * 접으면 손잡이만 남는다(367-2). 곡선은 늘 노선 전체를 한 화면에 맞춰 그린다 — 종단 측점과
+ * 맞물리는 보기 · 스크롤 동기는 없앰(367-1).
  * ========================================================================== */
 
 import { readStateRaw, stateKey, writeStateRaw } from "../A00_Common/b_page_state";
@@ -46,16 +46,13 @@ import { resetBalloonOffsets } from "@util/common_util_mass_haul_balance_view";
 import {
   createMassHaulChart,
   createMassHaulLegend,
-  createMassHaulWindowState,
   MASS_HAUL_MIN_HEIGHT,
-  scheduleMassHaulSettle,
 } from "@util/common_util_mass_haul_view";
 import { Y_WINDOW_BAKED_ATTR } from "../B06_Section/B06_Section_UI_Longitudinal";
 import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
 import { createPanelResizer } from "@ui/ui_template_resizer";
 import "@util/common_util_mass_haul.css";
 import "./B05_Profile_UI_Style_MassHaul.css";
-import { attachWheelHorizontalScroll, linkScrollLeft } from "./B05_Profile_UI_Profile_Wheel";
 import { frameOf } from "../common_util/common_util_view_window";
 
 /** 2차 패널 펼침 여부 — 세션 동안만 유지(패널 높이·접힘과 같은 수명). */
@@ -76,10 +73,8 @@ const HEIGHT_VAR = "--b05-masshaul-height";
  * 표시 상태가 갈리면 "같은 곡선인데 왜 다르게 보이나"가 된다(2026-08-03 사용자 확정).
  * 정의처는 B06 `_UI_Section_View`와 이 파일 두 곳뿐이며 값이 반드시 같아야 한다.
  */
-/** 처음 열 때는 **곡선만** 보인다 — 토량 분배(평형선·운반 블록)는 범례에서 켠다
- *  (2026-09-06 사용자 지시). 판을 v4 → v5 로 올려 이미 켜 둔 브라우저도 새 기본값으로
- *  시작하게 한다. */
-const DEFAULT_VISIBLE: string[] = [...MASS_HAUL_DEFAULT_VISIBLE];
+/** 기본 = 횡단 기준 + 토량 분배 켬(367-1) — 판 v6. [토량 분배] 는 분배 그림 보임/숨김. */
+const DEFAULT_VISIBLE: string[] = [...MASS_HAUL_DEFAULT_VISIBLE, MASS_HAUL_BALANCE_KEY];
 
 /** 유토곡선 계산에 필요한 프로젝트 설정 — B05 Page가 `fetchSectionContext()`에서 받아 넘긴다. */
 export interface RouteMassHaulContext {
@@ -150,12 +145,8 @@ export interface RouteMassHaulPanel {
   overlay: HTMLElement;
   isOpen(): boolean;
   setContext(next: RouteMassHaulContext | null): void;
-  /** 종단 가로 스크롤러와 scrollLeft를 양방향 동기화한다(설치 1회). */
-  attachScrollSync(main: HTMLElement): void;
   /** 판 내용을 다시 그린다. 접혀 있으면 머리줄만 남기고 끝낸다. */
   draw(params: RouteMassHaulDrawParams): void;
-  /** 가로 스크롤로 보이는 구간만 바뀜 — 창을 따를 때만 · 한 틀 한 번 · 다시 셈 없음(354-3). */
-  drawWindow(params: RouteMassHaulDrawParams): void;
 }
 
 function readVisible(): Set<string> {
@@ -248,10 +239,6 @@ export function createRouteMassHaulPanel(
   pendingChip.hidden = true;
   overlay.append(resizer.root, head, bar, scroll, legendLayer, pendingChip);
 
-  // 종단 그래프 영역과 같은 문법 — 세로 휠을 가로 이동으로 돌린다(2026-08-04 사용자 지시).
-  // scrollLeft 동기화 덕에 위 종단 그래프도 함께 움직인다. Shift+휠은 브라우저 기본 그대로.
-  attachWheelHorizontalScroll(scroll);
-
   /** 곡선을 그리는가 — 펼침이거나 새 창으로 뗌(뗀 창엔 접기가 없음 · 354-1). */
   const shown = (): boolean => open || overlay.classList.contains("is-popout");
 
@@ -279,29 +266,14 @@ export function createRouteMassHaulPanel(
     onChanged();
   }
 
-  // 종단 스크롤러와의 양방향 동기화 — 메아리는 공용 도우미가 걸러 냄(354-3).
-  // 토량 분배(전체 맞춤) 중에는 끊는다 — 유토곡선이 0 으로 붙으며 낸 scroll 이 종단 그래프 ·
-  // 표까지 0 으로 되돌렸다(PLAN 79-1). 유토곡선만 스크롤이 없는 상태.
-  let fitted = false;
-  let syncedMain: HTMLElement | null = null;
-  let putScroll: ((to: HTMLElement, left: number) => void) | null = null;
-  /** 종단과 맞물려 그린 곡선이 놓인 문서 — 처음 · 분배 맞춤 뒤 · 창 옮김 뒤면 종단 자리로 맞춘다. */
-  let syncedIn: Document | null = null;
-  function attachScrollSync(main: HTMLElement): void {
-    if (syncedMain === main) return;
-    syncedMain = main;
-    putScroll = linkScrollLeft(main, scroll, () => fitted);
-  }
-
   /** 곡선을 한 번이라도 그렸는지 — 재계산 대기 중 화면을 비우지 않기 위한 표시. */
   let drawnOnce = false;
-  /** 마지막으로 낸 계열 — 가로 스크롤(보이는 구간만 바뀜)은 다시 셈 없이 이걸로 그린다(354-3). */
+  /** 마지막으로 낸 계열 — 같은 계열이면 총괄값을 다시 내지 않는다. */
   let lastSeries: MassHaulSeries[] | null = null;
 
   function note(message: string): void {
     drawnOnce = false;
     lastSeries = null;
-    syncedIn = null;
     pendingChip.hidden = true;
     bar.replaceChildren();
     scroll.replaceChildren();
@@ -312,11 +284,6 @@ export function createRouteMassHaulPanel(
     bar.append(empty);
   }
 
-  // 세로창 버티기·부드러운 이동 상태 — 이 패널이 사는 동안 하나만 둔다(2026-09-04).
-  const windowState = createMassHaulWindowState();
-  /** 마지막으로 그린 입력 — 이동이 아직 안 끝났으면 다음 프레임에 이걸로 한 번 더 그린다. */
-  let lastParams: RouteMassHaulDrawParams | null = null;
-
   /** 이미 낸 계열에서 총괄값만 꺼낸다 — 계산은 하지 않는다. */
   function emitSummary(series: MassHaulSeries[]): void {
     if (!onSummary) return;
@@ -348,33 +315,16 @@ export function createRouteMassHaulPanel(
     );
   }
 
-  /** 그리기 몫 기록(349-0s) — 묶음 마지막 차례 `work.유토곡선`. `reuse` = 마지막 계열로(다시 셈 없음). */
-  function draw(params: RouteMassHaulDrawParams, reuse = false): void {
-    pipelineWork("유토곡선", () => drawNow(params, reuse));
+  /** 그리기 몫 기록(349-0s) — 묶음 마지막 차례 `work.유토곡선`. */
+  function draw(params: RouteMassHaulDrawParams): void {
+    pipelineWork("유토곡선", () => drawNow(params));
   }
 
-  /** 가로 스크롤로 보이는 구간만 바뀜(354-3) — 곡선이 창을 따를 때만(열림 · 분배 맞춤 아님 · 붙음) ·
-   *  한 틀 한 번 · 다시 셈 없이 세로 창만 다시 그림. 접힘 · 분배 · 새 창은 스크롤마다 할 일 없음. */
-  let windowDirty = false;
-  function drawWindow(params: RouteMassHaulDrawParams): void {
-    if (!open || fitted || overlay.classList.contains("is-popout") || !lastSeries) return;
-    lastParams = params;
-    // 미끄러짐 틀이 이미 잡혀 있으면 그 틀이 이 값으로 그림
-    if (windowDirty || windowState.frame) return;
-    windowDirty = true;
-    frameOf(overlay, () => {
-      if (windowDirty && lastParams) draw(lastParams, true);
-    });
-  }
-
-  function drawNow(params: RouteMassHaulDrawParams, reuse: boolean): void {
-    lastParams = params;
-    windowDirty = false;
+  function drawNow(params: RouteMassHaulDrawParams): void {
     overlay.classList.toggle("is-collapsed", !open);
     // 접혀 있어도 상단줄에는 값이 서야 한다 — 이때는 **횡단 기준만** 적분한다.
     // 펼친 경우에는 아래에서 낸 계열로 총괄값을 낸다(계산 한 번).
     if (!shown()) {
-      syncedIn = null;
       reportSummary(params);
       return;
     }
@@ -407,17 +357,13 @@ export function createRouteMassHaulPanel(
     // (354-2 · 계산 코드는 공용에 남김).
     // 결과를 아껴 두지 **않는다** — 횡단 설계가 제자리에서 갈리므로 객체 동일성으로는
     // 바뀐 것을 못 잰다(2026-09-04 캐시를 넣었다가 곡선이 안 따라와 되돌림).
-    // 스크롤로 창만 바뀐 그리기(`reuse`)는 직전 계열 그대로 — 같은 입력의 두 번째 적분이었다(354-3).
-    const series: MassHaulSeries[] =
-      reuse && lastSeries
-        ? lastSeries
-        : computeMassHaulSeries(
-            params.longitudinal,
-            params.crossSections,
-            context.conversion,
-            context.naturalSpoilMinSlope,
-            ["cross"],
-          );
+    const series: MassHaulSeries[] = computeMassHaulSeries(
+      params.longitudinal,
+      params.crossSections,
+      context.conversion,
+      context.naturalSpoilMinSlope,
+      ["cross"],
+    );
     // 총괄값은 방금 낸 계열에서 꺼낸다 — 접힘 경로처럼 따로 적분하지 않는다.
     if (series !== lastSeries) emitSummary(series);
     lastSeries = series;
@@ -446,29 +392,16 @@ export function createRouteMassHaulPanel(
       (overlay.clientHeight || OVERLAY_DEFAULT_HEIGHT) - bar.offsetHeight - 12;
     const chartHeight = Math.max(scrollHeight, MASS_HAUL_MIN_HEIGHT);
 
-    // 토량 분배를 켜면 **곡선 전체가 한 화면에** 들어와야 한다(2026-09-06 사용자 지시).
-    // 평형선·운반 블록은 노선 전체를 놓고 읽는 그림이라, 종단 그래프와의 X 맞춤(가로
-    // 스크롤)과 보이는 구간만 보는 Y 창을 둘 다 버리고 스크롤러 안쪽 폭·전 구간 Y로 그린다.
-    // 종단과 맞물릴 필요가 없으므로 반 칸 들여쓰기(originOffset)도 쓰지 않는다 — 그만큼
-    // 좌우가 비어 곡선이 가운데로 쪼그라들었다(2026-09-06 사용자 보고: 「우측 여유 과다」).
-    const fitAll = haulPlan !== null;
-    fitted = fitAll;
-    const widthPx = fitAll ? scroll.clientWidth || params.widthPx : params.widthPx;
-    const chartAxis = fitAll
-      ? {
-          ...params.axis,
-          padLeft: params.axis.axisX ?? params.axis.padLeft,
-          padRight: MASS_FIT_PAD_RIGHT,
-          viewRange: undefined,
-          window: undefined,
-          hideStations: true,
-        }
-      : {
-          ...params.axis,
-          // 새 창으로 뗀 판은 넓어 메인 보이는 구간 세로면 잘림 — 노선 전체 세로(325-2).
-          viewRange: overlay.classList.contains("is-popout") ? undefined : params.axis.viewRange,
-          window: windowState,
-        };
+    // 늘 **곡선 전체가 한 화면에**(367-1 · 측점 연계 보기 없앰) — 스크롤러 안쪽 폭 · 전 구간 Y ·
+    // 측점선 없음. 반 칸 들여쓰기(originOffset)도 안 씀(2026-09-06 「우측 여유 과다」).
+    const widthPx = scroll.clientWidth || params.widthPx;
+    const chartAxis = {
+      ...params.axis,
+      padLeft: params.axis.axisX ?? params.axis.padLeft,
+      padRight: MASS_FIT_PAD_RIGHT,
+      viewRange: undefined,
+      hideStations: true,
+    };
 
     let massAxis: { padLeft: number; ticks: Array<{ y: number; label: string }> } | null = null;
     const chart = createMassHaulChart(
@@ -495,33 +428,17 @@ export function createRouteMassHaulPanel(
     wrap.append(chart);
     // 앵커는 첫 자식 — SVG 뒤면 흐름 위치가 밀려 스크롤 시 축이 안 보인다(B06과 같은 규칙).
     if (massAxis) wrap.prepend(buildStickyYAxis(massAxis, chartHeight));
-    // 이미 종단과 맞물려 그린 곡선이면 제 자리 그대로 — 종단 값으로 되쓰면 그 사이 유토 쪽 휠이
-    // 더 간 만큼 뒤로 튐(354-3). 처음 · 분배 맞춤 뒤 · 창 옮김 뒤만 종단 자리에서 시작한다.
-    const keepLeft = !fitAll && syncedIn === scroll.ownerDocument ? scroll.scrollLeft : null;
     scroll.replaceChildren(wrap);
-    // 전체 맞춤일 때는 스크롤할 것이 없으므로 왼쪽 끝에 둔다.
-    if (fitAll) scroll.scrollLeft = 0;
-    else if (keepLeft !== null) scroll.scrollLeft = keepLeft;
-    else if (syncedMain) putScroll?.(scroll, syncedMain.scrollLeft);
-    syncedIn = fitAll ? null : scroll.ownerDocument;
+    // 스크롤할 것이 없으므로 왼쪽 끝에 둔다.
+    scroll.scrollLeft = 0;
 
-    // 범례는 계열 · 켬이 바뀔 때만 — 스크롤 그리기는 그대로 둔다.
-    if (!reuse || !legendLayer.firstChild)
-      legendLayer.replaceChildren(
-        createMassHaulLegend(series, visible, toggleSeries, () => {
-          resetBalloonOffsets();
-          onChanged();
-        }),
-      );
-    drawnOnce = true;
-    // 세로창이 아직 목표까지 안 갔으면 다음 프레임에 한 걸음 더 — 확 튀지 않고 미끄러진다.
-    scheduleMassHaulSettle(
-      windowState,
-      () => {
-        if (lastParams) draw(lastParams, true);
-      },
-      overlay,
+    legendLayer.replaceChildren(
+      createMassHaulLegend(series, visible, toggleSeries, () => {
+        resetBalloonOffsets();
+        onChanged();
+      }),
     );
+    drawnOnce = true;
   }
 
   return {
@@ -531,8 +448,6 @@ export function createRouteMassHaulPanel(
     setContext(next) {
       context = next;
     },
-    attachScrollSync,
-    draw: (params) => draw(params),
-    drawWindow,
+    draw,
   };
 }
diff --git a/B05_Profile/B05_Profile_UI_Profile_Render.ts b/B05_Profile/B05_Profile_UI_Profile_Render.ts
index d0a4fad59..23d26fc01 100644
--- a/B05_Profile/B05_Profile_UI_Profile_Render.ts
+++ b/B05_Profile/B05_Profile_UI_Profile_Render.ts
@@ -66,7 +66,6 @@ export interface ProfileRenderContext {
   callbacks: RouteProfilePanelCallbacks | undefined;
   massHaul: {
     draw: (params: RouteMassHaulDrawParams) => void;
-    drawWindow: (params: RouteMassHaulDrawParams) => void;
   };
   tableOverlay: {
     isOpen: () => boolean;
@@ -337,8 +336,6 @@ export function renderProfile(ctx: ProfileRenderContext): void {
   });
   // 세로 창 갱신기 — 가로로 스크롤할 때마다 패널이 이것을 부른다. 도형은 그대로 두고
   // 겹 하나의 변환만 갈아 끼우므로 매 프레임 불러도 된다(2026-09-04 사용자 확정).
-  // 유토곡선 갱신기 — 아래에서 유토곡선을 그린 뒤 채워진다(그리기 순서상 여기서는 아직 없다).
-  let massHaulUpdater: ((fromM: number, toM: number) => void) | null = null;
   ctx.setElevationWindowUpdater(() => {
     const from = Math.max(0, toChainage(body.scrollLeft));
     const to = Math.min(maxChainageM, toChainage(body.scrollLeft + body.clientWidth));
@@ -349,7 +346,6 @@ export function renderProfile(ctx: ProfileRenderContext): void {
         to,
       ) ?? null,
     );
-    massHaulUpdater?.(from, to);
     return applyElevationWindow(chartWrap, next);
   });
 
@@ -452,15 +448,5 @@ export function renderProfile(ctx: ProfileRenderContext): void {
       onSelectStation: ctx.selectStation,
     };
     massHaul.draw(massHaulParams);
-    // 유토곡선도 **같은 창**을 본다(2026-09-04 사용자 확정) — 스크롤할 때마다 곡선만 다시
-    // 그린다. 종단처럼 변환으로 옮기지 않는 이유: 곡선 위에 앉는 말풍선·EP 표·측점 점이
-    // 세로로 늘어나면 안 되는 것들이라, 그것만 따로 옮기는 값이 곡선 자체를 다시 그리는
-    // 값보다 크다(요소 수가 종단의 1/3). 열림 · 분배 맞춤 아닐 때만 · 한 틀 한 번 · 다시 셈 없음(354-3).
-    massHaulUpdater = (fromM, toM) => {
-      massHaul.drawWindow({
-        ...massHaulParams,
-        axis: { ...massHaulParams.axis, viewRange: { fromM, toM } },
-      });
-    };
   }
 }
diff --git a/B05_Profile/B05_Profile_UI_Style_MassHaul.css b/B05_Profile/B05_Profile_UI_Style_MassHaul.css
index 59cc32b50..2af4459c8 100644
--- a/B05_Profile/B05_Profile_UI_Style_MassHaul.css
+++ b/B05_Profile/B05_Profile_UI_Style_MassHaul.css
@@ -129,14 +129,12 @@
   background: var(--color-surface);
 }
 
-/* 곡선 가로 스크롤러 — 종단 스크롤러와 scrollLeft를 동기화한다(JS). 세로는 잘라낸다.
-   스크롤바는 항상 표시(scroll) — auto면 생겼다 없어질 때 곡선 높이가 널뛰고,
-   clientHeight 기반 높이 계산도 함께 흔들린다. */
+/* 곡선 칸 — 늘 전체 맞춤이라 스크롤 없음(367-1). */
 .b05-profile__masshaul-scroll {
   position: relative;
   flex: 1 1 auto;
   min-height: 0;
-  overflow-x: scroll;
+  overflow-x: hidden;
   overflow-y: hidden;
 }
 
diff --git a/common_util/common_util_mass_haul_view.ts b/common_util/common_util_mass_haul_view.ts
index 95d618d03..41bc3a659 100644
--- a/common_util/common_util_mass_haul_view.ts
+++ b/common_util/common_util_mass_haul_view.ts
@@ -786,7 +786,8 @@ export function createMassHaulLegend(
     reset.textContent = L("B06_MassHaul_Balloon_Reset");
     reset.title = L("B06_MassHaul_Balloon_Reset_Tip");
     reset.addEventListener("click", onResetBalloons);
-    legend.append(reset);
+    // [횡단 기준] 왼쪽(367-1)
+    legend.prepend(reset);
   }
   return legend;
 }
diff --git a/resources/tester/helper_354_2_masshaul_cross_only.cjs b/resources/tester/helper_354_2_masshaul_cross_only.cjs
index 8a688c9a6..088ea97e2 100644
--- a/resources/tester/helper_354_2_masshaul_cross_only.cjs
+++ b/resources/tester/helper_354_2_masshaul_cross_only.cjs
@@ -23,7 +23,7 @@ const mass = read("B05_Profile", "B05_Profile_UI_Profile_MassHaul.ts");
 let stored = null;
 const src = [
   'const SERIES_BASES = ["cross", "longitudinal"];',
-  'const DEFAULT_VISIBLE = ["cross"];',
+  'const DEFAULT_VISIBLE = ["cross", "balance"];', // 367-1 기본 = 횡단 + 분배
   block(util, "export function normalizeVisibleBasis("),
   block(mass, "function readVisible(): Set<string> {"),
   block(util, "export function computeMassHaulSeries("),
diff --git a/resources/tester/test_224_1b_masshaul_docked.py b/resources/tester/test_224_1b_masshaul_docked.py
index 942ae8347..b1be9a1c7 100644
--- a/resources/tester/test_224_1b_masshaul_docked.py
+++ b/resources/tester/test_224_1b_masshaul_docked.py
@@ -11,7 +11,6 @@
 
 import json
 import os
-import re
 import subprocess
 from pathlib import Path
 
@@ -65,7 +64,5 @@ def test_끌기도_유토_판_안_셈():
 
 def test_뗀_유토는_노선_전체_세로():
     mass = (B05 / "B05_Profile_UI_Profile_MassHaul.ts").read_text(encoding="utf-8")
-    assert re.search(
-        r'viewRange: overlay\.classList\.contains\("is-popout"\) \? undefined : params\.axis\.viewRange',
-        mass,
-    )
+    # 367-1 붙음 · 뗌 모두 노선 전체 세로
+    assert "viewRange: undefined," in mass
diff --git a/resources/tester/test_354_1_masshaul_own_panel.py b/resources/tester/test_354_1_masshaul_own_panel.py
index b92159eb4..ae4531f89 100644
--- a/resources/tester/test_354_1_masshaul_own_panel.py
+++ b/resources/tester/test_354_1_masshaul_own_panel.py
@@ -4,7 +4,7 @@
 - 종단 열(`b05-route-profile__column`) = [종단 칸(bodyWrap), 유토 판] · content 안이라 종단 [창 분할]
   (`.is-popout > :not(content)` 숨김)에도 같이 감 · B05 · B06 이 같은 `design_profile` 하나.
 - 유토 판은 흐름 칸(겹침 아님) · 자기 리사이저 높이 · 접으면 머리줄만(손잡이 · [창 분할] 닿음).
-- 높이 나눔 · 표 쌓기에서 빠짐(표 bottomOffset 없음) · X 동기화는 그대로.
+- 높이 나눔 · 표 쌓기에서 빠짐(표 bottomOffset 없음) · X 동기화 없음(367-1 늘 전체 맞춤).
 """
 
 import os
@@ -30,7 +30,7 @@ def test_종단_열_아래_자기_칸():
     assert 'column.className = "b05-route-profile__column";' in overlays
     assert "column.append(bodyWrap, massHaul.overlay);" in overlays
     assert "bodyWrap.append(massHaul.overlay" not in overlays
-    assert "massHaul.attachScrollSync(body);" in overlays
+    assert "massHaul.attachScrollSync" not in overlays  # 367-1 측점 연계 없앰
     profile = read("A00_Common/design/design_profile.ts")
     assert "content.append(column);" in profile
     assert sum(1 for _ in profile.splitlines()) <= 700
diff --git a/resources/tester/test_354_2_masshaul_cross_only.py b/resources/tester/test_354_2_masshaul_cross_only.py
index fe84be732..b6ad7f172 100644
--- a/resources/tester/test_354_2_masshaul_cross_only.py
+++ b/resources/tester/test_354_2_masshaul_cross_only.py
@@ -37,7 +37,7 @@ def test_저장된_종단_범례는_횡단으로(r):
     assert r["longitudinal"] == ["cross"]
     assert r["longitudinalBalance"] == ["balance", "cross"]
     assert r["cross"] == ["cross"]
-    assert r["empty"] == ["cross"] and r["broken"] == ["cross"]
+    assert r["empty"] == ["balance", "cross"] and r["broken"] == ["balance", "cross"]
 
 
 def test_기준_횡단만_계산(r):
diff --git a/resources/tester/test_354_3_scroll_echo.py b/resources/tester/test_354_3_scroll_echo.py
index 869f9df34..9e5452d8f 100644
--- a/resources/tester/test_354_3_scroll_echo.py
+++ b/resources/tester/test_354_3_scroll_echo.py
@@ -4,14 +4,13 @@
 - 메아리: scroll 은 다음 틀에 옴 → 동기 플래그로 못 막아 한 틀 전 값을 되씀 → 뒤로 튐 →
   휠 이동이 접힘. 공용 `linkScrollLeft`(Wheel.ts)가 써 넣은 값으로 온 scroll 을 무시.
   가짜 창(다음 틀 scroll) 재현 — 옛 잇기는 뒤로 튐 · 멈춤, 새 잇기는 4 경우 × 휠 쪽 둘 모두 튐 0.
-- 유토 스크롤 그리기 = 열림 · 분배 맞춤 아님 · 붙음일 때만 · 한 틀 한 번 · 다시 셈 없음.
+- 유토곡선 = 늘 전체 맞춤 · 종단과 안 이음(367-1) — 휠 · 잇기 경우는 공용 도우미 시험으로 남김.
 
 `helper_354_3_scroll_echo.cjs` 가 진짜 휠 · 잇기 TS 를 가짜 창 위에서 돌림.
 """
 
 import json
 import os
-import re
 import subprocess
 from pathlib import Path
 
@@ -64,24 +63,25 @@ def test_새_잇기는_뒤로_튐_0_끝까지(r, case):
     assert got["mass"] == (0 if balance else 1200)
 
 
-def test_유토_표_같은_도우미():
-    for name in ("MassHaul", "TableOverlay"):
-        src = (B05 / f"B05_Profile_UI_Profile_{name}.ts").read_text(encoding="utf-8")
-        assert "linkScrollLeft(main, scroll" in src
-        assert "syncing" not in src
-
-
-def test_유토_스크롤_그리기는_창_따를_때만_한_틀_한_번():
+def test_표만_잇기_유토는_안_이음():
+    # 367-1 유토곡선 = 늘 전체 맞춤 · 종단 스크롤과 안 이음
+    table = (B05 / "B05_Profile_UI_Profile_TableOverlay.ts").read_text(encoding="utf-8")
+    assert "linkScrollLeft(main, scroll" in table
+    assert "syncing" not in table
     mass = (B05 / "B05_Profile_UI_Profile_MassHaul.ts").read_text(encoding="utf-8")
-    body = mass[mass.index("function drawWindow(") :]
-    body = body[: body.index("\n  }\n")]
-    assert '!open || fitted || overlay.classList.contains("is-popout") || !lastSeries' in body
-    assert "windowState.frame" in body and "frameOf(overlay" in body
-    assert "draw(lastParams, true)" in body
-    # 다시 셈 없음 · 총괄값 · 범례는 계열이 바뀔 때만
-    assert re.search(r"reuse && lastSeries\s*\? lastSeries", mass)
+    for gone in ("linkScrollLeft", "attachWheelHorizontalScroll", "attachScrollSync", "drawWindow"):
+        assert gone not in mass, gone
+
+
+def test_유토는_늘_전체_맞춤_스크롤마다_안_그림():
+    mass = (B05 / "B05_Profile_UI_Profile_MassHaul.ts").read_text(encoding="utf-8")
+    assert "hideStations: true," in mass
+    assert "viewRange: undefined," in mass
+    assert "scroll.scrollLeft = 0;" in mass
+    assert "createMassHaulWindowState" not in mass and "scheduleMassHaulSettle" not in mass
     assert "if (series !== lastSeries) emitSummary(series);" in mass
-    # 다시 그려도 제 자리 — 종단 값으로 되쓰는 것은 처음 · 맞춤 뒤 · 창 옮김 뒤만
-    assert "scroll.scrollLeft = syncedMain.scrollLeft" not in mass
     render = (B05 / "B05_Profile_UI_Profile_Render.ts").read_text(encoding="utf-8")
-    assert "massHaul.drawWindow({" in render
+    assert "drawWindow" not in render and "massHaulUpdater" not in render
+    css = (B05 / "B05_Profile_UI_Style_MassHaul.css").read_text(encoding="utf-8")
+    block = css[css.index(".b05-profile__masshaul-scroll {") :]
+    assert "overflow-x: hidden;" in block[: block.index("}")]

From ddc6fe23112d62b0fe63c98ac80e6e1c4a2b7aed Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Sat, 17 Oct 2026 11:49:27 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix(B05):=20367-2=20=EC=9C=A0=ED=86=A0?=
 =?UTF-8?q?=EA=B3=A1=EC=84=A0=20[=EC=B0=BD=20=EB=B6=84=ED=95=A0]=20?=
 =?UTF-8?q?=ED=8E=BC=EC=B9=9C=20=EB=95=8C=EB=A7=8C=20=C2=B7=20=EC=A0=91?=
 =?UTF-8?q?=EC=9D=8C=20=3D=20=EB=86=92=EC=9D=B4=200=20=C2=B7=20=EC=86=90?=
 =?UTF-8?q?=EC=9E=A1=EC=9D=B4=EB=A7=8C=20=ED=8C=90=20=EC=9C=84=20=EA=B2=BD?=
 =?UTF-8?q?=EA=B3=84=EC=97=90=20=EB=A7=A4=EB=8B=AC=EB=A6=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 접은 판 높이 0 · 머리줄 bottom 100%(배수유역 접힘 꼴)
- 접은 때 [창 분할] 숨김 · 새 창으로 뗀 [창 결합] 그대로
- 시험 354_1 확인 더함 · 224_1c 글

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy
---
 B05_Profile/B05_Profile_UI_Profile_MassHaul.ts    |  6 +++---
 B05_Profile/B05_Profile_UI_Style_MassHaul.css     | 14 +++++++++-----
 resources/tester/test_224_1c_subpanel_popout.py   |  2 +-
 resources/tester/test_354_1_masshaul_own_panel.py | 14 +++++++++++++-
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts b/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts
index c544caf0d..6a4b5b778 100644
--- a/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts
+++ b/B05_Profile/B05_Profile_UI_Profile_MassHaul.ts
@@ -145,7 +145,7 @@ export interface RouteMassHaulPanel {
   overlay: HTMLElement;
   isOpen(): boolean;
   setContext(next: RouteMassHaulContext | null): void;
-  /** 판 내용을 다시 그린다. 접혀 있으면 머리줄만 남기고 끝낸다. */
+  /** 판 내용을 다시 그린다. 접혀 있으면 손잡이만 남기고 끝낸다. */
   draw(params: RouteMassHaulDrawParams): void;
 }
 
@@ -190,7 +190,7 @@ export function createRouteMassHaulPanel(
   handle.className = "b05-profile__masshaul-handle";
   handle.append(handleControl.root);
   handleControl.root.setAttribute("aria-label", "유토곡선 패널");
-  // 머리줄 — 접어도 남아 [창 분할]([attachSubPanelPopouts] 가 맨 앞에 붙임) · 손잡이가 닿는다(354-1).
+  // 머리줄 — [창 분할]([attachSubPanelPopouts] 가 맨 앞에 붙임 · 펼친 때만 보임) · 손잡이(접으면 판 위 경계에 매달림 · 367-2).
   const head = document.createElement("div");
   head.className = "b05-profile__masshaul-head";
   head.append(handle);
@@ -249,7 +249,7 @@ export function createRouteMassHaulPanel(
     // 툴팁은 setOpen이 일반 문구로 덮으므로 매번 유토곡선용으로 다시 밝힌다.
     handleControl.root.title = next ? "유토곡선 접기" : "유토곡선 펼치기";
     handle.classList.toggle("is-open", next);
-    // 접으면 머리줄만 남는다(배수유역도처럼 손잡이는 늘 닿음)
+    // 접으면 손잡이만 남는다(배수유역도처럼 손잡이는 늘 닿음)
     overlay.classList.toggle("is-collapsed", !next);
     onChanged();
   }
diff --git a/B05_Profile/B05_Profile_UI_Style_MassHaul.css b/B05_Profile/B05_Profile_UI_Style_MassHaul.css
index 2af4459c8..1d458de7c 100644
--- a/B05_Profile/B05_Profile_UI_Style_MassHaul.css
+++ b/B05_Profile/B05_Profile_UI_Style_MassHaul.css
@@ -88,8 +88,9 @@
   pointer-events: auto;
 }
 
+/* 접음 = 판 높이 0 · 손잡이만 판 위 경계에 매달림(배수유역 접힘 꼴 · 367-2). */
 .b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) {
-  height: auto;
+  height: 0;
 }
 
 .b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) > :not(.b05-profile__masshaul-head) {
@@ -97,10 +98,13 @@
 }
 
 .b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) > .b05-profile__masshaul-head {
-  position: relative;
-  top: 0;
-  left: 0;
-  padding: 2px var(--spacing-8);
+  top: auto;
+  bottom: 100%;
+}
+
+/* [창 분할]은 펼친 때만(367-2) — 새 창으로 뗀 [창 결합]은 그대로. */
+.b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) .b05-subpanel__popout {
+  display: none;
 }
 
 /* 종단 패널을 접으면 판도 함께 숨는다(배수유역도와 같음). */
diff --git a/resources/tester/test_224_1c_subpanel_popout.py b/resources/tester/test_224_1c_subpanel_popout.py
index eb8f2f684..2b8632bb1 100644
--- a/resources/tester/test_224_1c_subpanel_popout.py
+++ b/resources/tester/test_224_1c_subpanel_popout.py
@@ -1,7 +1,7 @@
 # -*- coding: utf-8 -*-
 """224-1c(PLAN 325-3) 유토곡선 · 배수유역 [창 분할] — 종단 [창 분할]과 같은 양식 · 따로 새 창.
 
-- 단추 = 두 판 머리줄 맨 앞(유토는 접어도 남는 머리줄 · 354-1) · 글 [창 분할]/[창 결합] · 툴팁에 판 이름.
+- 단추 = 두 판 머리줄 맨 앞(유토는 펼친 때만 보임 · 367-2) · 글 [창 분할]/[창 결합] · 툴팁에 판 이름.
 - 창 이름 셋 다름(같으면 앞 창 body 를 덮어 조각이 사라짐).
 - 뗌 = 새 창 body · 뗀 유토 판 손잡이 · 리사이저는 CSS 로 감춤 · 배수 지도 관찰 rehome.
 - 붙임(단추 · 새 창 닫힘 · 페이지 떠남) = 제자리 — 종단 열 끝(종단 칸 아래) · 배수 content 끝.
diff --git a/resources/tester/test_354_1_masshaul_own_panel.py b/resources/tester/test_354_1_masshaul_own_panel.py
index ae4531f89..63c9d3601 100644
--- a/resources/tester/test_354_1_masshaul_own_panel.py
+++ b/resources/tester/test_354_1_masshaul_own_panel.py
@@ -3,7 +3,7 @@
 
 - 종단 열(`b05-route-profile__column`) = [종단 칸(bodyWrap), 유토 판] · content 안이라 종단 [창 분할]
   (`.is-popout > :not(content)` 숨김)에도 같이 감 · B05 · B06 이 같은 `design_profile` 하나.
-- 유토 판은 흐름 칸(겹침 아님) · 자기 리사이저 높이 · 접으면 머리줄만(손잡이 · [창 분할] 닿음).
+- 유토 판은 흐름 칸(겹침 아님) · 자기 리사이저 높이 · 접으면 높이 0 · 손잡이만 매달림 · [창 분할] 숨김(367-2).
 - 높이 나눔 · 표 쌓기에서 빠짐(표 bottomOffset 없음) · X 동기화 없음(367-1 늘 전체 맞춤).
 """
 
@@ -57,6 +57,18 @@ def test_흐름_칸_자기_높이_접으면_머리줄():
         ".b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) > :not(.b05-profile__masshaul-head)",
     )
     assert "display: none;" in hide
+    # 367-2 접음 = 높이 0 · 손잡이 판 위 경계에 매달림 · [창 분할] 숨김(뗀 창 [창 결합] 그대로)
+    folded = css_block(css, ".b05-profile__masshaul-overlay.is-collapsed:not(.is-popout)")
+    assert "height: 0;" in folded
+    head = css_block(
+        css,
+        ".b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) > .b05-profile__masshaul-head",
+    )
+    assert "top: auto;" in head and "bottom: 100%;" in head
+    assert "display: none;" in css_block(
+        css, ".b05-profile__masshaul-overlay.is-collapsed:not(.is-popout) .b05-subpanel__popout"
+    )
+    assert ".is-popout .b05-subpanel__popout" not in css
     assert "display: none;" in css_block(
         css, ".b05-route-profile.is-collapsed .b05-profile__masshaul-overlay"
     )

From 84876b747be6e7c2fbaca261566120179d6a00a1 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Sat, 17 Oct 2026 11:53:36 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat(B05):=20367-3=20=EC=9E=90=EC=9C=A0?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95=20=EB=90=98=EB=8F=8C=EB=A6=AC=EA=B8=B0=20?=
 =?UTF-8?q?=C2=B7=20=EB=8B=A4=EC=8B=9C=ED=95=98=EA=B8=B0=20=E2=80=94=20?=
 =?UTF-8?q?=EC=9E=90=EC=9C=A0=EC=A7=80=EC=A0=95=20=EC=95=88=20=ED=95=9C=20?=
 =?UTF-8?q?=EA=B1=B8=EC=9D=8C=EC=94=A9=20=C2=B7=20=ED=81=B0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A0=A5=EA=B3=BC=20=EB=94=B0=EB=A1=9C=20=C2=B7=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=EB=A7=89=ED=9E=88=EB=A9=B4=20=EC=97=B4=EB=A6=B0=20?=
 =?UTF-8?q?=EC=B1=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- design_profile_free past/future(상태 바뀐 클릭만 · 새 클릭이 future 비움) · undo/redo/canUndo/canRedo · reset 비움 · Backspace = undo
- 자유지정 동안 ↶ ↷ 단추 · Ctrl+Z · Ctrl+Shift+Z = 자유지정 쪽만(되돌릴 것 없어도 큰 이력 안 감)
- applyEdits 성공 여부 돌려줌 · 막히면(기울기 · 흙덮기) 자유지정 열린 채
- 시험 helper_215_1 ⑥ ⑦ · test_215_1 · 345_3 창 넓힘

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy
---
 A00_Common/design/design_profile.ts           | 11 +--
 .../design/logic/design_profile_free.ts       | 57 ++++++++++----
 .../B05_Profile_UI_Profile_Panel_Tools.ts     | 19 +++--
 .../tester/helper_215_1_free_profile.cjs      | 75 ++++++++++++++++++-
 resources/tester/test_215_1_free_profile.py   | 32 ++++++++
 resources/tester/test_345_3_route_body.py     |  4 +-
 6 files changed, 171 insertions(+), 27 deletions(-)

diff --git a/A00_Common/design/design_profile.ts b/A00_Common/design/design_profile.ts
index faa2750cb..6e5986cc6 100644
--- a/A00_Common/design/design_profile.ts
+++ b/A00_Common/design/design_profile.ts
@@ -324,9 +324,9 @@ export function createDesignProfile(ctx: DesignProfileContext) {
     refresh: () => renderBalance(),
   });
 
-  /** 편집을 적용한다. 법정 위반 정책이 block이면 새 위반이 생기는 편집을 막는다. */
-  function applyEdits(next: AlignmentEdits): void {
-    if (!base || !alignment) return;
+  /** 편집을 적용한다. 법정 위반 정책이 block이면 새 위반이 생기는 편집을 막는다. false = 막힘. */
+  function applyEdits(next: AlignmentEdits): boolean {
+    if (!base || !alignment) return false;
     const candidate = buildAlignment(base, next);
     if (
       base.policy.grade_violation_policy === "block" &&
@@ -336,12 +336,13 @@ export function createDesignProfile(ctx: DesignProfileContext) {
         `종단기울기 상한 ${base.policy.max_grade_pct.toFixed(1)}%를 넘어 편집을 적용하지 않았습니다.`,
         "error",
       );
-      return;
+      return false;
     }
     // 최소고 가드 — 편집 경로가 전부 여기로 모인다(2026-09-02 직선화·쉬프트·틸팅·방향키 누락 수정).
-    if (blocksMinCover(base, alignment, candidate, enforceMinCover, minCoverTargets)) return;
+    if (blocksMinCover(base, alignment, candidate, enforceMinCover, minCoverTargets)) return false;
     store.replace(next);
     history.record();
+    return true;
   }
 
   /** 계획선 측점 줄 = 측점 한 벌 — 셈은 `design_profile_base` 몫(계산 묶음 planline 도 같은 기준). */
diff --git a/A00_Common/design/logic/design_profile_free.ts b/A00_Common/design/logic/design_profile_free.ts
index 4bb03c965..c658fca63 100644
--- a/A00_Common/design/logic/design_profile_free.ts
+++ b/A00_Common/design/logic/design_profile_free.ts
@@ -4,7 +4,8 @@
  *
  * 흐름: 세로 측점선 둘로 범위를 고름 → 시작(또는 끝) 세로선 근처 클릭 = 그 측점 계획고에 이은
  * 채 시작 → 클릭마다 점 하나(가로 = 범위 안 가장 가까운 측점선 · 높이 = 클릭한 높이) → 반대쪽
- * 세로선 근처 클릭 또는 Enter = 그 측점 계획고에 이어 끝. Esc = 취소 · Backspace = 마지막 점 빼기.
+ * 세로선 근처 클릭 또는 Enter = 그 측점 계획고에 이어 끝. Esc = 취소 · ↶ ↷(Backspace = ↶) =
+ * 자유지정 안 한 걸음씩(범위 · 시작 · 점 · 367-3) — 큰 이력과 따로 · 끝나면 큰 이력 한 걸음.
  *
  * 적용은 직선화와 같은 길 — 편집 델타(`station_offsets` · `curve_radii`)만 만들어 캐시에 쓰고
  * [저장] 때 서버가 다시 셈한다. 꺾이는 점 종단곡선 = 직선화 틸팅과 같은 기본 길이 L
@@ -181,8 +182,8 @@ export interface FreeDrawDeps {
   base: () => AlignmentBase | null;
   alignment: () => ProfileAlignment | null;
   edits: () => AlignmentEdits;
-  /** 편집 적용 — 직선화 결과와 같은 길(캐시 · 되돌리기 · 막기 규칙). */
-  apply: (next: AlignmentEdits) => void;
+  /** 편집 적용 — 직선화 결과와 같은 길(캐시 · 되돌리기 · 막기 규칙). false = 막힘(열린 채). */
+  apply: (next: AlignmentEdits) => boolean | void;
   /** 모드를 끈다(적용 뒤 · Esc). */
   close: () => void;
   /** 단계 · 안내가 바뀜. */
@@ -198,6 +199,11 @@ export interface FreeDraw {
   hover: (pointer: { chainageM: number; elevationM: number; stations: number[] } | null) => void;
   /** Enter · Escape · Backspace — 먹었으면 true. */
   key: (key: string) => boolean;
+  /** 자유지정 안 한 걸음 되돌림 · 다시함(367-3) — 큰 이력과 따로. */
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
   marks: () => FreeMarks;
   hint: () => string;
 }
@@ -209,6 +215,25 @@ export function createFreeDraw(deps: FreeDrawDeps): FreeDraw {
   let anchor: number | null = null;
   let points: FreeVertex[] = [];
   let target: FreeVertex | null = null;
+  /** 자유지정 안 이력(367-3) — 상태 바뀐 클릭만 쌓음 · 새 클릭이 future 비움. */
+  interface Snap {
+    phase: FreePhase;
+    pending: number | null;
+    range: [number, number] | null;
+    anchor: number | null;
+    points: FreeVertex[];
+  }
+  let past: Snap[] = [];
+  let future: Snap[] = [];
+  const snap = (): Snap => ({ phase, pending, range, anchor, points: [...points] });
+  function step(from: Snap[], to: Snap[]): void {
+    const state = from.pop();
+    if (!state) return;
+    to.push(snap());
+    ({ phase, pending, range, anchor, points } = state);
+    target = null;
+    deps.changed();
+  }
 
   function reset(): void {
     phase = "range";
@@ -217,6 +242,8 @@ export function createFreeDraw(deps: FreeDrawDeps): FreeDraw {
     anchor = null;
     points = [];
     target = null;
+    past = [];
+    future = [];
   }
 
   /** 그 측점의 지금 계획고(변화점이면 라운드 중심 z — 직선화와 같은 값). */
@@ -263,8 +290,9 @@ export function createFreeDraw(deps: FreeDrawDeps): FreeDraw {
     if (!base || end === null || z === null) return;
     const vertices = [...path(), { chainage_m: end, elevation_m: z }];
     const next = buildFreeEdits(base, deps.edits(), vertices);
+    // 막히면(기울기 · 흙덮기) 자유지정 열린 채 — 그린 점 그대로(367-3)
+    if (deps.apply(next) === false) return;
     reset();
-    deps.apply(next);
     deps.close();
   }
 
@@ -272,6 +300,7 @@ export function createFreeDraw(deps: FreeDrawDeps): FreeDraw {
     phase: () => phase,
     reset,
     click(chainageM, elevationM, stations) {
+      const before = snap();
       if (phase === "range") {
         const station = snapStation(stations, chainageM);
         if (station === null) return true;
@@ -297,6 +326,10 @@ export function createFreeDraw(deps: FreeDrawDeps): FreeDraw {
         }
         points.push(next);
       }
+      if (JSON.stringify(snap()) !== JSON.stringify(before)) {
+        past.push(before);
+        future = [];
+      }
       target = null;
       deps.changed();
       return true;
@@ -316,18 +349,16 @@ export function createFreeDraw(deps: FreeDrawDeps): FreeDraw {
         return true;
       }
       if (key === "Backspace") {
-        if (phase !== "drawing") return false;
-        if (points.length) points.pop();
-        else {
-          anchor = null;
-          phase = "armed";
-        }
-        target = null;
-        deps.changed();
+        if (!past.length) return false;
+        step(past, future);
         return true;
       }
       return false;
     },
+    undo: () => step(past, future),
+    redo: () => step(future, past),
+    canUndo: () => past.length > 0,
+    canRedo: () => future.length > 0,
     marks() {
       const maxPct = deps.base()?.policy.max_grade_pct ?? Number.POSITIVE_INFINITY;
       const dots = path();
@@ -357,7 +388,7 @@ export function createFreeDraw(deps: FreeDrawDeps): FreeDraw {
           : `${pending.toFixed(1)}m 선택 — 범위 끝 세로 측점선을 고르세요`;
       }
       if (phase === "armed") return "시작(또는 끝) 세로선 근처를 눌러 시작하세요 (Esc 취소)";
-      return "클릭마다 점 · 반대쪽 세로선 또는 Enter 로 끝 (Backspace 점 빼기 · Esc 취소)";
+      return "클릭마다 점 · 반대쪽 세로선 또는 Enter 로 끝 (↶ · Backspace 되돌리기 · Esc 취소)";
     },
   };
 }
diff --git a/B05_Profile/B05_Profile_UI_Profile_Panel_Tools.ts b/B05_Profile/B05_Profile_UI_Profile_Panel_Tools.ts
index 12bc11376..6372ff738 100644
--- a/B05_Profile/B05_Profile_UI_Profile_Panel_Tools.ts
+++ b/B05_Profile/B05_Profile_UI_Profile_Panel_Tools.ts
@@ -49,7 +49,8 @@ export interface PanelToolsContext {
   base: () => AlignmentBase | null;
   alignment: () => ProfileAlignment | null;
   edits: () => AlignmentEdits;
-  applyEdits: (next: AlignmentEdits) => void;
+  /** false = 막힘(기울기 · 흙덮기). */
+  applyEdits: (next: AlignmentEdits) => boolean;
   /** 고른 측점 id(없으면 null). */
   selectedStationId: () => string | null;
   /** 비정규(구조물) 측점 목록 — 좌우 이동 대상 판정에 쓴다. */
@@ -157,10 +158,11 @@ export function createPanelTools(ctx: PanelToolsContext): PanelTools {
       history.record();
     },
     canResetToSaved: ctx.canRestoreSaved,
-    onUndo: () => inner.undo(),
-    onRedo: () => inner.redo(),
-    canUndo: () => inner.canUndo(),
-    canRedo: () => inner.canRedo(),
+    // 자유지정 동안 ↶ ↷ = 자유지정 안 한 걸음(367-3) — 큰 이력은 안 건드림.
+    onUndo: () => (tools.mode() === "free" ? (free.undo(), freeView.redraw()) : inner.undo()),
+    onRedo: () => (tools.mode() === "free" ? (free.redo(), freeView.redraw()) : inner.redo()),
+    canUndo: () => (tools.mode() === "free" ? free.canUndo() : inner.canUndo()),
+    canRedo: () => (tools.mode() === "free" ? free.canRedo() : inner.canRedo()),
     hasStraightRuns: () => {
       const alignment = ctx.alignment();
       return alignment ? hasStraightRuns(alignment) : false;
@@ -327,6 +329,13 @@ export function createPanelTools(ctx: PanelToolsContext): PanelTools {
     // 한 줄 되돌리기(346-4) — 평면 · 종단 · 횡단 · 관 · 구조물을 만진 차례 거꾸로.
     if (isCtrlKey(event, "z") || isCtrlKey(event, "y")) {
       event.preventDefault();
+      // 자유지정 동안은 자유지정 안만 — 되돌릴 것 없어도 큰 이력으로 안 감(367-3)
+      if (tools.mode() === "free") {
+        if (event.shiftKey || isCtrlKey(event, "y")) free.redo();
+        else free.undo();
+        freeView.redraw();
+        return;
+      }
       flushHold();
       if (event.shiftKey || isCtrlKey(event, "y")) history.redo();
       else history.undo();
diff --git a/resources/tester/helper_215_1_free_profile.cjs b/resources/tester/helper_215_1_free_profile.cjs
index 3c27f333b..e5a7e9181 100644
--- a/resources/tester/helper_215_1_free_profile.cjs
+++ b/resources/tester/helper_215_1_free_profile.cjs
@@ -26,7 +26,9 @@ function loadTs(file) {
 }
 
 const free = loadTs(path.join(ROOT, "A00_Common", "design", "logic", "design_profile_free.ts"));
-const align = loadTs(path.join(ROOT, "B05_Profile", "logic", "B05_Profile_UI_Profile_Alignment.ts"));
+const align = loadTs(
+  path.join(ROOT, "B05_Profile", "logic", "B05_Profile_UI_Profile_Alignment.ts"),
+);
 
 // 전체 측점 폴리라인(20m 간격 · 0~200m) — 계획고 = 지반고, 마디마다 기울기가 다르다.
 const stations = Array.from({ length: 11 }, (_, i) => i * 20);
@@ -124,14 +126,23 @@ out.snapOutside = free.snapStation(stations, 190, [40, 160]);
   out.radiiKeys = Object.keys(next.curve_radii).sort();
   const built = align.buildAlignment(base, next);
   const pvi = (s) => built.pvi.find((n) => Math.abs(n.chainage_m - s) < 1e-6).elevation_m;
-  out.pvi = { 40: pvi(40), 60: pvi(60), 80: pvi(80), 100: pvi(100), 120: pvi(120), 140: pvi(140), 160: pvi(160) };
+  out.pvi = {
+    40: pvi(40),
+    60: pvi(60),
+    80: pvi(80),
+    100: pvi(100),
+    120: pvi(120),
+    140: pvi(140),
+    160: pvi(160),
+  };
   out.ground = { 40: z0(40), 160: z0(160) };
   const g1 = (103.46 - z0(40)) / 40;
   const g2 = (101.2 - 103.46) / 40;
   out.expectR80 = Number((20 / Math.abs(g2 - g1)).toFixed(6));
   out.r80 = next.curve_radii["80.000"];
   out.curve80L = built.curves.find((c) => Math.abs(c.chainage_m - 80) < 1e-6)?.l_m ?? null;
-  out.outsideUntouched = !("20.000" in next.station_offsets) && !("180.000" in next.station_offsets);
+  out.outsideUntouched =
+    !("20.000" in next.station_offsets) && !("180.000" in next.station_offsets);
 }
 
 // ④ Enter = 끝(마지막 점 → 끝 세로선) · 끝 세로선에서 거꾸로 시작.
@@ -172,4 +183,62 @@ out.snapOutside = free.snapStation(stations, 190, [40, 160]);
   out.enterOutsideDrawing = draw.key("Enter");
 }
 
+// ⑥ 되돌리기 · 다시하기(367-3) — 점 둘 → ↶ → ↷ → 새 클릭이 ↷ 지움 · apply 안 불림 · 범위까지 거꾸로.
+{
+  const { draw, log } = harness();
+  out.undoEmpty = { can: draw.canUndo(), backspace: draw.key("Backspace") };
+  draw.click(40, 0, stations);
+  draw.click(40, 0, stations); // 같은 세로선 다시 — 상태 그대로 · 안 쌓임
+  draw.click(160, 0, stations);
+  draw.click(40, 0, stations);
+  draw.click(80, 102, stations);
+  draw.click(120, 103, stations);
+  const dots = () => draw.marks().dots.map((d) => d.chainage_m);
+  draw.undo();
+  out.undo1 = { dots: dots(), canRedo: draw.canRedo() };
+  draw.redo();
+  out.redo1 = { dots: dots(), canRedo: draw.canRedo() };
+  draw.undo();
+  draw.click(100, 104, stations); // 새 클릭 = future 비움
+  out.newClick = { dots: dots(), canRedo: draw.canRedo() };
+  const phases = [];
+  while (draw.canUndo()) {
+    draw.undo();
+    phases.push(`${draw.phase()}:${draw.marks().edges.length}`);
+  }
+  out.undoAll = phases;
+  out.undoApplied = log.applied.length;
+  out.undoClosed = log.closed;
+  draw.redo();
+  draw.redo();
+  out.redoTwice = { phase: draw.phase(), band: draw.marks().band };
+  draw.reset();
+  out.resetClears = { undo: draw.canUndo(), redo: draw.canRedo() };
+}
+
+// ⑦ 적용이 막히면(apply = false) 자유지정 열린 채 · 점 그대로.
+{
+  let tries = 0;
+  const draw = free.createFreeDraw({
+    base: () => base,
+    alignment: () => align.buildAlignment(base, align.emptyEdits()),
+    edits: () => align.emptyEdits(),
+    apply: () => ((tries += 1), false),
+    close: () => (tries += 100),
+    changed: () => undefined,
+  });
+  draw.click(40, 0, stations);
+  draw.click(160, 0, stations);
+  draw.click(40, 0, stations);
+  draw.click(80, 102, stations);
+  draw.key("Enter");
+  draw.click(160, 0, stations);
+  out.blocked = {
+    tries,
+    phase: draw.phase(),
+    dots: draw.marks().dots.length,
+    canUndo: draw.canUndo(),
+  };
+}
+
 process.stdout.write(JSON.stringify(out));
diff --git a/resources/tester/test_215_1_free_profile.py b/resources/tester/test_215_1_free_profile.py
index 2c626af39..1166efad7 100644
--- a/resources/tester/test_215_1_free_profile.py
+++ b/resources/tester/test_215_1_free_profile.py
@@ -115,6 +115,38 @@ def test_Backspace_와_Esc_취소(out):
     assert out["enterOutsideDrawing"] is False
 
 
+def test_자유지정_되돌리기_다시하기(out):
+    # 367-3 ⑥ 점 둘 → ↶ → ↷ → 새 클릭이 ↷ 지움 · 큰 이력(apply · close) 안 건드림
+    assert out["undoEmpty"] == {"can": False, "backspace": False}
+    assert out["undo1"] == {"dots": [40, 80], "canRedo": True}
+    assert out["redo1"] == {"dots": [40, 80, 120], "canRedo": False}
+    assert out["newClick"] == {"dots": [40, 80, 100], "canRedo": False}
+    # 한 걸음 = 점 · 시작 · 범위 끝 · 범위 첫 · 같은 세로선 다시 누름은 안 쌓임
+    assert out["undoAll"] == ["drawing:2", "drawing:2", "armed:2", "range:1", "range:0"]
+    assert out["undoApplied"] == 0 and out["undoClosed"] == 0
+    assert out["redoTwice"] == {"phase": "armed", "band": [40, 160]}
+    assert out["resetClears"] == {"undo": False, "redo": False}
+
+
+def test_적용_막히면_열린_채(out):
+    # 367-3 ⑦ Enter · 끝 세로선 둘 다 apply 시도(2) · close 없음 · 점 그대로
+    assert out["blocked"] == {"tries": 2, "phase": "drawing", "dots": 2, "canUndo": True}
+
+
+def test_되돌리기_배선_자유지정_먼저():
+    panel = _read("B05_Profile/B05_Profile_UI_Profile_Panel_Tools.ts")
+    assert 'tools.mode() === "free" ? (free.undo(), freeView.redraw()) : inner.undo()' in panel
+    assert 'tools.mode() === "free" ? free.canUndo() : inner.canUndo()' in panel
+    keys = panel[panel.index('isCtrlKey(event, "z") || isCtrlKey(event, "y")') :]
+    free_at = keys.index('if (tools.mode() === "free") {')
+    assert (
+        free_at < keys.index("history.undo()")
+        and "return;" in keys[free_at : keys.index("flushHold();")]
+    )
+    profile = _read("A00_Common/design/design_profile.ts")
+    assert "function applyEdits(next: AlignmentEdits): boolean {" in profile
+
+
 def test_도구줄_직선화_오른쪽_자유지정():
     tools = _read("B05_Profile/B05_Profile_UI_Profile_Tools.ts")
     assert '"자유지정"' in tools
diff --git a/resources/tester/test_345_3_route_body.py b/resources/tester/test_345_3_route_body.py
index 2a038790d..18cdbd0de 100644
--- a/resources/tester/test_345_3_route_body.py
+++ b/resources/tester/test_345_3_route_body.py
@@ -48,7 +48,9 @@ def test_Ctrl_Z_는_사진첩_한_줄(out):
 def test_종단도_Ctrl_Z_줄이_사진첩_하나():
     tools = _read("B05_Profile/B05_Profile_UI_Profile_Panel_Tools.ts")
     at = tools.index('if (isCtrlKey(event, "z") || isCtrlKey(event, "y")) {')
-    assert "undoOwner" not in tools and "history.undo()" in tools[at : at + 240]
+    assert (
+        "undoOwner" not in tools and "history.undo()" in tools[at : at + 600]
+    )  # 367-3 자유지정 분기 앞에 섬
     history = _read("B05_Profile/B05_Profile_UI_RouteEdit_History.ts")
     assert '"keydown"' not in history and "onPageHistory" in history
 

From 04dd53e5e69d45173004a74b9c13228675487de8 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Sat, 17 Oct 2026 11:54:49 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix(B05):=20367-4=20=EC=9E=90=EC=9C=A0?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95=20=EC=84=A0=20=C2=B7=20=EB=AF=B8=EB=A6=AC?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=C2=B7=20=EC=A0=90=20=EB=85=B9=EC=83=89=20?=
 =?UTF-8?q?=C2=B7=20OS=20=EC=9E=90=EB=8F=99=20=EC=96=B4=EB=91=90=EC=9B=80?=
 =?UTF-8?q?=EC=97=90=20success=20=C2=B7=20danger=20=ED=86=A0=ED=81=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- freemark 선 · 점 stroke = --color-success · 넘음 빨강 · 범위 띠 · 경계 보라 그대로
- ui_template_theme OS 자동 어두움 블록에 --color-success · --color-danger 채움
- 시험 test_215_1 색 확인

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy
---
 B05_Profile/B05_Profile_UI_Style_Table.css  |  5 +++--
 resources/tester/test_215_1_free_profile.py | 22 +++++++++++++++++++++
 ui_template/ui_template_theme.css           |  3 +++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/B05_Profile/B05_Profile_UI_Style_Table.css b/B05_Profile/B05_Profile_UI_Style_Table.css
index 1806537e8..3f1dedf96 100644
--- a/B05_Profile/B05_Profile_UI_Style_Table.css
+++ b/B05_Profile/B05_Profile_UI_Style_Table.css
@@ -352,8 +352,9 @@
   stroke-width: 1.5;
 }
 
+/* 지나온 선 · 미리 보기 · 점 = 녹색(367-4) — 범위 띠 · 경계는 보라 그대로. */
 .b05-profile-freemark__line {
-  stroke: var(--color-primary);
+  stroke: var(--color-success);
   stroke-width: 2;
   stroke-dasharray: 6 4;
 }
@@ -368,7 +369,7 @@
 
 .b05-profile-freemark__dot {
   fill: var(--color-surface);
-  stroke: var(--color-primary);
+  stroke: var(--color-success);
   stroke-width: 1.5;
 }
 
diff --git a/resources/tester/test_215_1_free_profile.py b/resources/tester/test_215_1_free_profile.py
index 1166efad7..06c5a458a 100644
--- a/resources/tester/test_215_1_free_profile.py
+++ b/resources/tester/test_215_1_free_profile.py
@@ -174,6 +174,28 @@ def test_오버레이_점선_빨강_글():
     assert ".b05-profile-freemark__line.is-over" in css
 
 
+def _css_rule(css: str, selector: str) -> str:
+    at = css.index(selector + " {")
+    return css[at : css.index("}", at)]
+
+
+def test_자유지정_녹색_넘음_빨강_띠_보라():
+    # 367-4 선 · 미리 보기 · 점 = --color-success · 넘음 빨강 · 범위 띠 · 경계 보라 그대로
+    css = _read("B05_Profile/B05_Profile_UI_Style_Table.css")
+    assert "stroke: var(--color-success);" in _css_rule(css, ".b05-profile-freemark__line")
+    assert "stroke: var(--color-success);" in _css_rule(css, ".b05-profile-freemark__dot")
+    assert "var(--color-danger" in _css_rule(css, ".b05-profile-freemark__line.is-over")
+    assert "var(--color-danger" in _css_rule(css, ".b05-profile-freemark__grade.is-over")
+    assert "--color-primary" in _css_rule(css, ".b05-profile-freemark__band")
+    assert "--color-primary" in _css_rule(css, ".b05-profile-freemark__edge")
+    # 밝음 · 어두움(명시 · OS 자동) 모두 success · danger 토큰 있음
+    theme = _read("ui_template/ui_template_theme.css")
+    auto = theme[theme.index("@media (prefers-color-scheme: dark)") :]
+    auto = auto[: auto.index("\n}\n")]
+    for block in (_css_rule(theme, ":root"), _css_rule(theme, ':root[data-theme="dark"]'), auto):
+        assert "--color-success:" in block and "--color-danger:" in block
+
+
 def test_줄_수_늘리지_않음():
     for relative in (
         "A00_Common/design/design_profile.ts",
diff --git a/ui_template/ui_template_theme.css b/ui_template/ui_template_theme.css
index c670ebc04..fc1bd6fe8 100644
--- a/ui_template/ui_template_theme.css
+++ b/ui_template/ui_template_theme.css
@@ -370,6 +370,9 @@
     --color-primary-text: #16121f;
     --color-accent: var(--color-lavender-wash);
     --color-focus-ring: var(--color-lavender-wash);
+
+    --color-success: #3fbb6f;
+    --color-danger: #e8695a;
     --panel-handle-border: #e0b64a;
     --map-route-locked: #f472b6;
   }

From 2a661304461a21aaeee5427c5ad6b8ec48370419 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Sat, 17 Oct 2026 11:58:48 +0900
Subject: [PATCH 5/5] =?UTF-8?q?fix(ui):=20374-1=20=EB=8F=8B=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=3D=20=EC=A7=80=EA=B8=88=20=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8A=94=20=ED=99=94=EB=A9=B4=20=EC=A0=84=EC=B2=B4(body=20?=
 =?UTF-8?q?=C2=B7=20=EB=AA=A8=EB=8B=AC=20=ED=8F=AC=ED=95=A8)=20=C2=B7=20?=
 =?UTF-8?q?=EC=9B=80=EC=A7=81=EC=9D=B4=EB=8A=94=20=EB=8F=99=EC=95=88=20?=
 =?UTF-8?q?=EC=95=88=20=EB=9C=B8=20=C2=B7=20=EC=9D=B4=EB=8F=99=20=ED=95=A9?=
 =?UTF-8?q?=EC=84=B1=EC=B8=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 복제 원본 #app → document.body(모달 포함) · 원 · 배율 글은 html 바로 아래(자기 복제 · 관찰 안 걸림)
- 다시 뜨기 스로틀 → 디바운스(바뀜 · 스크롤 · 움직임마다 미룸 · 멈춘 뒤 0.5 초 한 번)
- 바깥 판 translate 만(will-change) · 안쪽 상자 scale
- 시험 helper_218_1 · test_218_1 고쳐 씀(디바운스 · 원 자리 · 원본)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy
---
 resources/tester/helper_218_1_loupe.cjs | 48 +++++++++++++++++--------
 resources/tester/test_218_1_loupe.py    | 20 +++++++++++
 ui_template/ui_template_loupe.css       | 11 +++++-
 ui_template/ui_template_loupe.ts        | 33 ++++++++++-------
 4 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/resources/tester/helper_218_1_loupe.cjs b/resources/tester/helper_218_1_loupe.cjs
index 1d8e2030c..be3b7ea74 100644
--- a/resources/tester/helper_218_1_loupe.cjs
+++ b/resources/tester/helper_218_1_loupe.cjs
@@ -489,7 +489,8 @@ function makePage() {
   return app;
 }
 function fakeDocument(app) {
-  const doc = { body: new El("BODY") };
+  // 374-1 뜨는 자리 = body(모달 포함) · 원 · 배율 글은 html 바로 아래
+  const doc = { body: app, documentElement: new El("HTML") };
   doc.createElement = (tag) => new El(tag.toUpperCase());
   doc.getElementById = (id) => (id === "app" ? app : null);
   return doc;
@@ -515,10 +516,12 @@ function fakeDocument(app) {
   };
   const view = m.createLoupeView(win);
   view.show(500, 400);
-  const root = doc.body.children[0];
-  const label = doc.body.children[1];
+  const root = doc.documentElement.children[0];
+  const label = doc.documentElement.children[1];
   const stage = root.children[0];
-  const page = stage.children[0];
+  const scaler = stage.children[0]; // 이동 = stage · 배율 = scaler
+  const page = scaler.children[0];
+  const lens = () => `${stage.style.transform} ${scaler.style.transform}`;
   const copy = page.children[0];
   const [scroller, offscreen, table, svg, frame, cadBox] = copy.children;
   const [canvas, blank, input, check] = scroller.children;
@@ -529,7 +532,8 @@ function fakeDocument(app) {
     ariaHidden: root.attrs["aria-hidden"],
     hidden: root.hidden,
     rootTransform: root.style.transform,
-    stageTransform: stage.style.transform,
+    stageTransform: lens(),
+    stageMoveOnly: stage.style.transform,
     pageBox: [page.style.left, page.style.top, page.style.width, page.style.height],
     isClone: copy.cloned === true && copy !== app,
     canvasDrawn: canvas.drawn.map((d) => d[0]),
@@ -560,19 +564,31 @@ function fakeDocument(app) {
     hidden: label.hidden,
   };
   view.setZoom(3);
-  r.label.zoom3 = [label.textContent, stage.style.transform, root.style.transform];
+  r.label.zoom3 = [label.textContent, lens(), root.style.transform];
   view.move(500, 790);
   r.label.bottom = label.style.transform;
   view.setZoom(2);
   view.move(500, 400);
-  // 화면이 바뀜 — 0.5 초 뒤 한 번만 다시 뜸
+  // 화면이 바뀜 — 멈춘 뒤 0.5 초에 한 번만 다시 뜸
   const firstCopy = copy;
   observers[0].fn();
   observers[0].fn();
   win.tick(499);
-  const sameBefore = stage.children[0].children[0] === firstCopy;
+  const sameBefore = scaler.children[0].children[0] === firstCopy;
   win.tick(1);
-  const recaptured = stage.children[0].children[0] !== firstCopy && stage.children.length === 1;
+  const recaptured = scaler.children[0].children[0] !== firstCopy && scaler.children.length === 1;
+  // 374-1 움직이는 동안 안 뜸 — 바뀜 뒤 움직이면 처음부터 · 멈춘 뒤 0.5 초에 한 번
+  const moving = scaler.children[0].children[0];
+  observers[0].fn();
+  win.tick(300);
+  view.move(520, 400);
+  win.tick(300);
+  view.move(540, 400);
+  win.tick(499);
+  const heldWhileMoving = scaler.children[0].children[0] === moving;
+  win.tick(1);
+  r.debounce = { heldWhileMoving, afterStop: scaler.children[0].children[0] !== moving };
+  view.move(500, 400);
   view.move(10, 10);
   const nearEdge = root.style.transform;
   view.hide();
@@ -580,20 +596,21 @@ function fakeDocument(app) {
     sameBefore,
     recaptured,
     nearEdge,
-    stageChildren: stage.children.length,
+    stageChildren: scaler.children.length,
     hidden: root.hidden,
     disconnected: observers[0].watching === null,
     scrollListen: win.calls.some((c) => c.type === "scroll"),
   };
   observers[0].fn();
   win.tick(1000);
-  r.hide.noRecaptureAfterHide = stage.children.length;
+  r.hide.noRecaptureAfterHide = scaler.children.length;
   r.hide.labelHidden = label.hidden;
   view.setZoom(4);
   view.hide();
   view.show(500, 400);
-  r.hide.reopenLabel = [label.textContent, label.hidden, stage.style.transform];
-  r.hide.reuseRoot = doc.body.children.length;
+  r.hide.reopenLabel = [label.textContent, label.hidden, lens()];
+  r.hide.reuseRoot = doc.documentElement.children.length;
+  r.hide.bodyUntouched = app.children.length; // 원이 body 에 안 붙음
 }
 {
   // 221-2 스크롤 — 스크롤한 뒤 켬 · 켠 채 스크롤(칸 · 문서)
@@ -606,8 +623,9 @@ function fakeDocument(app) {
     disconnect() {}
   };
   const view = m.createLoupeView(win);
-  const cloneScroller = () => doc.body.children[0].children[0].children[0].children[0].children[0];
-  const page = () => doc.body.children[0].children[0].children[0];
+  const scaler = () => doc.documentElement.children[0].children[0].children[0];
+  const cloneScroller = () => scaler().children[0].children[0].children[0];
+  const page = () => scaler().children[0];
   view.show(500, 400);
   view.hide();
   scroller.scrollTop = 0; // 0 에서 켬 → 스크롤 칸으로 잡힘
diff --git a/resources/tester/test_218_1_loupe.py b/resources/tester/test_218_1_loupe.py
index 9568efe79..c3f5f20bd 100644
--- a/resources/tester/test_218_1_loupe.py
+++ b/resources/tester/test_218_1_loupe.py
@@ -162,6 +162,26 @@ def test_바뀌면_0_5초_뒤_다시_뜸_끄면_복제_지움(r):
     assert h["hidden"] and h["disconnected"] and h["scrollListen"] is False
     assert h["noRecaptureAfterHide"] == 0
     assert h["reuseRoot"] == 2  # 원 · 배율 글 하나씩을 다시 씀
+    assert h["bodyUntouched"] == 6  # 원 · 글은 html 바로 아래 — body 복제 · 관찰에 안 걸림(374-1)
+
+
+def test_움직이는_동안_안_뜸_멈춘_뒤_한_번(r):
+    # 374-1 디바운스 — 바뀜 뒤 계속 움직이면 안 뜸 · 마지막 움직임 0.5 초 뒤 한 번
+    assert r["debounce"] == {"heldWhileMoving": True, "afterStop": True}
+    # 이동 = 바깥 판 translate 만(합성층) · 배율 = 안쪽 상자
+    assert r["capture"]["stageMoveOnly"] == "translate(-820px, -620px)"
+    css = _read("ui_template/ui_template_loupe.css")
+    stage = css[css.index(".ui-loupe__stage {") :]
+    assert "will-change: transform;" in stage[: stage.index("}")]
+    scale = css[css.index(".ui-loupe__scale {") :]
+    assert "transform-origin: 0 0;" in scale[: scale.index("}")]
+
+
+def test_뜨는_자리_화면_전체_모달_포함():
+    src = _read("ui_template/ui_template_loupe.ts")
+    assert "sourceOf: () => Element | null = () => win.document.body," in src
+    assert "doc.documentElement.append(root, label);" in src
+    assert 'getElementById("app")' not in src
 
 
 def test_테두리_그림자_토큰():
diff --git a/ui_template/ui_template_loupe.css b/ui_template/ui_template_loupe.css
index 5961245a9..c3471fca1 100644
--- a/ui_template/ui_template_loupe.css
+++ b/ui_template/ui_template_loupe.css
@@ -24,13 +24,20 @@
   display: none;
 }
 
-/* 복제를 놓는 판 — 화면(뷰포트) 크기 · fixed 자식의 기준 상자 */
+/* 복제를 놓는 판 — 화면(뷰포트) 크기 · 움직임은 translate 만(합성층 · 374-1) */
 .ui-loupe__stage {
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100dvh;
+  will-change: transform;
+}
+
+/* 배율 상자 — 배율 바꿀 때만 scale · fixed 자식의 기준 상자 */
+.ui-loupe__scale {
+  position: absolute;
+  inset: 0;
   transform-origin: 0 0;
 }
 
@@ -55,6 +62,8 @@
   border-radius: 9px;
   background: var(--color-bg);
   color: var(--color-accent);
+  /* html 바로 아래라 body 글꼴을 안 물려받음 */
+  font-family: var(--font-body);
   font-size: 11px;
   line-height: 18px;
   box-shadow: 0 0 0 1px var(--color-accent);
diff --git a/ui_template/ui_template_loupe.ts b/ui_template/ui_template_loupe.ts
index 68a0cfee4..a7768fb54 100644
--- a/ui_template/ui_template_loupe.ts
+++ b/ui_template/ui_template_loupe.ts
@@ -5,9 +5,10 @@
  * 켜는 법 둘 — 오른쪽 단추를 0.4 초 넘게 누르고 있는 동안 · Z 키를 누르고 있는 동안 · 떼면 꺼짐.
  * 켜 있는 동안 휠 = 배율(220-1 · 1.5 ~ 6배 · 한 칸 0.25 · 켤 때마다 2배) · 화면 스크롤 · 그래프 휠 줌은 막음.
  * 길게 누른 우클릭은 뗀 뒤 메뉴(우리 메뉴 · 브라우저 메뉴)를 안 띄움 · 짧게 누르면 지금 우클릭 그대로.
- * 그리기 — 켤 때 `#app` 을 한 번 떠서(DOM 복제 + 2D canvas 그림 복사 · SVG 그대로) 원 안에 놓고, 움직일 때 transform 만 바꿈.
- * 화면 밖 상자는 속을 비우고 크기만 남김 · 켜 있는 동안 화면이 바뀌면 0.5 초 뒤 다시 뜸 · 끄면 복제를 지움.
- * 스크롤(221-2) — 뜰 때 스크롤 칸마다 scrollTop · Left 를 복제에 옮김 · 켜진 동안 어느 칸이든 스크롤하면 그 화면 틀(rAF 한 번)에 위치를 맞추고 0.5 초 뒤 다시 뜸(비워 둔 화면 밖 칸을 채움).
+ * 그리기 — 켤 때 지금 보이는 화면 전체(`body` · 모달 포함 · 374-1)를 한 번 떠서(DOM 복제 + 2D canvas 그림 복사 · SVG 그대로) 원 안에 놓고,
+ * 움직일 때 바깥 판(합성층) translate 만 바꿈 · 배율은 안쪽 상자 scale. 원 · 배율 글은 `html` 바로 아래(복제 · 관찰에 안 걸림).
+ * 화면 밖 상자는 속을 비우고 크기만 남김 · 켜 있는 동안 화면이 바뀌면 멈춘 뒤 0.5 초에 한 번 다시 뜸(움직이는 동안 안 뜸) · 끄면 복제를 지움.
+ * 스크롤(221-2) — 뜰 때 스크롤 칸마다 scrollTop · Left 를 복제에 옮김 · 켜진 동안 어느 칸이든 스크롤하면 그 화면 틀(rAF 한 번)에 위치를 맞추고 멈춘 뒤 0.5 초에 다시 뜸(비워 둔 화면 밖 칸을 채움).
  * WebGL canvas 는 그림이 남아 있을 때만 옮겨짐.
  * CAD 영역(cad_host 상자 · iframe · 221-1) — 커서가 그 위면 켜지 않고 · 켜진 채 들어가면 숨김(나오면 다시) · 휠도 CAD 로 · 복제는 빈칸.
  * ========================================================================== */
@@ -28,7 +29,7 @@ export const LOUPE_ZOOM_STEP = 0.25;
 const LOUPE_LABEL_H = 18;
 /** 오른쪽 단추를 이만큼(ms) 넘게 누르면 켬 */
 export const LOUPE_HOLD_MS = 400;
-/** 켜 있는 동안 화면이 바뀌면 이만큼(ms) 뒤 다시 뜸 */
+/** 켜 있는 동안 화면이 바뀌면 멈춘 뒤 이만큼(ms) 지나 다시 뜸 */
 export const LOUPE_REFRESH_MS = 500;
 /** 화면 끝과 원 사이 여백(px) — 테두리가 안 잘리게 */
 export const LOUPE_EDGE = 4;
@@ -242,11 +243,12 @@ export function initLoupe(
 /** 원 · 복제 · 다시 뜨기를 맡음 — `sourceOf()` 가 뜰 영역 */
 export function createLoupeView(
   win: Window,
-  sourceOf: () => Element | null = () => win.document.getElementById("app"),
+  sourceOf: () => Element | null = () => win.document.body,
 ): LoupeView {
   const doc = win.document;
   let root: HTMLElement | null = null;
-  let stage: HTMLElement | null = null;
+  let stage: HTMLElement | null = null; // 이동만(합성층)
+  let scaler: HTMLElement | null = null; // 배율만 · 복제를 담음
   let label: HTMLElement | null = null;
   let zoom = LOUPE_ZOOM;
   let at: [number, number] = [0, 0]; // 마지막 커서 — 배율만 바뀔 때 다시 놓음
@@ -263,23 +265,28 @@ export function createLoupeView(
     root.style.width = root.style.height = `${LOUPE_DIAMETER}px`;
     stage = doc.createElement("div");
     stage.className = "ui-loupe__stage";
+    scaler = doc.createElement("div");
+    scaler.className = "ui-loupe__scale";
+    stage.append(scaler);
     const cross = doc.createElement("div");
     cross.className = "ui-loupe__cross";
     root.append(stage, cross);
     label = doc.createElement("div");
     label.className = "ui-loupe__zoom";
     label.setAttribute("aria-hidden", "true");
-    doc.body.append(root, label);
+    // body 밖 — body 를 뜨고 지켜보므로 원이 자기 복제 · 자기 움직임 관찰에 안 걸림
+    doc.documentElement.append(root, label);
   };
   const capture = (): void => {
     const source = sourceOf();
     const t0 = win.performance?.now() ?? 0;
-    stage!.replaceChildren();
-    if (source) sync = captureInto(source, stage!, win);
+    scaler!.replaceChildren();
+    if (source) sync = captureInto(source, scaler!, win);
     root!.dataset.captureMs = String(Math.round((win.performance?.now() ?? 0) - t0));
   };
+  /** 다시 뜨기 미룸 — 바뀜 · 스크롤 · 움직임마다 처음부터(멈춘 뒤 한 번 · 374-1) */
   const refresh = (): void => {
-    if (refreshTimer) return;
+    win.clearTimeout(refreshTimer);
     refreshTimer = win.setTimeout(() => {
       refreshTimer = 0;
       if (observer) capture();
@@ -316,16 +323,18 @@ export function createLoupeView(
     move(x, y) {
       if (!root || !stage || !label) return;
       at = [x, y];
+      if (refreshTimer) refresh(); // 움직이는 동안 안 뜸
       const { left, top } = loupeOrigin(x, y, win.innerWidth, win.innerHeight);
       const r = LOUPE_DIAMETER / 2;
       root.style.transform = `translate(${left}px, ${top}px)`;
-      stage.style.transform = `translate(${r - zoom * x}px, ${r - zoom * y}px) scale(${zoom})`;
+      stage.style.transform = `translate(${r - zoom * x}px, ${r - zoom * y}px)`;
       const labelTop = Math.min(top + LOUPE_DIAMETER + 4, win.innerHeight - LOUPE_LABEL_H - 4);
       label.style.transform = `translate(${left + r}px, ${labelTop}px) translateX(-50%)`;
     },
     setZoom(z) {
       zoom = z;
       if (label) label.textContent = `×${z}`;
+      if (scaler) scaler.style.transform = `scale(${z})`;
       view.move(...at);
     },
     hide() {
@@ -336,7 +345,7 @@ export function createLoupeView(
       win.cancelAnimationFrame(syncFrame);
       syncFrame = 0;
       win.removeEventListener("scroll", onScroll, true);
-      stage?.replaceChildren(); // 복제를 지움
+      scaler?.replaceChildren(); // 복제를 지움
       if (root) root.hidden = label!.hidden = true;
     },
   };