From c91106ab19cf27460cfcf363f526cd4b31f5b640 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Thu, 8 Oct 2026 19:41:21 +0900
Subject: [PATCH] =?UTF-8?q?feat(B05):=20=EA=B3=84=ED=9A=8D=EB=85=B8?=
 =?UTF-8?q?=EC=84=A0=20=ED=8E=B8=EC=A7=91=20=EA=B2=89=ED=8B=80=20=3D=20?=
 =?UTF-8?q?=EA=B3=B5=EC=9A=A9=20=EB=AA=A8=EB=8B=AC=20=EC=A1=B0=EA=B0=81=20?=
 =?UTF-8?q?=E2=80=94=20=EB=B0=B0=EA=B2=BD=20ui-modal=5F=5Fbackdrop=20?=
 =?UTF-8?q?=C2=B7=20=EC=A0=9C=EB=AA=A9=EC=A4=84=20ui-modal=5F=5Ftop=20?=
 =?UTF-8?q?=C2=B7=20=EA=B2=B9=EC=B9=98=EB=8A=94=20CSS=20=EC=A7=80=EC=9B=80?=
 =?UTF-8?q?=20=C2=B7=20=ED=9A=A1=EB=8B=A8=20=EC=8B=9C=ED=97=98=20=ED=95=98?=
 =?UTF-8?q?=EB=84=A4=EC=8A=A4=20ResizeObserver=20=EB=8C=80=EC=B2=B4(127-1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

openModal 은 안 씀 — 바깥 누름 · Esc 닫기 · 제목줄 단추 묶음 · 오른쪽 횡단 칸을 못 담음.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NPJGtfXo6GMbcpiboQC4uK
---
 .../B05_Profile_UI_RouteEdit_Chrome.ts        | 10 ++--
 .../B05_Profile_UI_Style_RouteEdit.css        | 18 ++-----
 .../helper_b05_routeedit_cross_width.cjs      |  5 ++
 .../tester/test_b05_routeedit_chrome_modal.py | 48 +++++++++++++++++++
 4 files changed, 65 insertions(+), 16 deletions(-)
 create mode 100644 resources/tester/test_b05_routeedit_chrome_modal.py

diff --git a/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts b/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts
index eb9f18ab7..2a4ae3fda 100644
--- a/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts
+++ b/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts
@@ -1,4 +1,5 @@
 import { createButton } from "@ui/ui_template_elements";
+import "@ui/ui_template_modal.css";
 
 /* =============================================================================
  * B05_Profile_UI_RouteEdit_Chrome.ts
@@ -10,6 +11,9 @@ import { createButton } from "@ui/ui_template_elements";
  * **배치**(2026-09-12 사용자 지시 ⑩~⑬·⑱) — 아래 정보행을 없애고 지도 위 오버레이로 옮겼다.
  * 단추는 제목행 오른쪽, 조작 설명은 지도 왼쪽 위 2열, 상태·범례는 왼쪽 아래, 잰 값은 오른쪽
  * 아래. 메인 창은 왼쪽으로 밀고 오른쪽 세로 칸에 횡단 두 판이 앉는다.
+ *
+ * 겉틀 — 배경 · 제목줄은 공용 모달 조각(`ui-modal__backdrop` · `ui-modal__top`). `openModal` 은
+ * 안 씀 — 바깥 누름 · Esc 로 닫혀 고치던 노선을 날리고, 제목줄에 단추 묶음 · 오른쪽 횡단 칸이 못 앉음.
  * ========================================================================== */
 
 /** 회전 단추 아이콘 — **반만 도는 화살표**(2026-09-12 사용자 지시 ㉙). 한 바퀴를 다 그린
@@ -37,11 +41,11 @@ export interface RouteEditChrome {
 /** 모달을 만들어 `document.body` 에 붙이고, 자주 쓰는 요소를 집어 돌려준다. */
 export function createRouteEditChrome(): RouteEditChrome {
   const overlay = document.createElement("div");
-  overlay.className = "b05-routeedit";
+  overlay.className = "ui-modal__backdrop b05-routeedit";
   overlay.innerHTML = `
     <div class="b05-routeedit__box" role="dialog" aria-label="계획노선 편집">
-      <div class="b05-routeedit__head">
-        <strong>계획노선 편집</strong>
+      <div class="ui-modal__top b05-routeedit__head">
+        <h3>계획노선 편집</h3>
         <span class="b05-routeedit__rec-now" data-rec-now></span>
         <span class="b05-routeedit__actions">
           <button type="button" class="ui-btn ui-btn--ghost" data-act="recommend" disabled
diff --git a/B05_Profile/B05_Profile_UI_Style_RouteEdit.css b/B05_Profile/B05_Profile_UI_Style_RouteEdit.css
index 45cb046a5..941650876 100644
--- a/B05_Profile/B05_Profile_UI_Style_RouteEdit.css
+++ b/B05_Profile/B05_Profile_UI_Style_RouteEdit.css
@@ -1,16 +1,10 @@
 /* 계획노선 편집 모달 — 큰 모달 하나. 계산이 오래 걸리는 조작이라 화면을 통째로 덮는다
-   (2026-09-06 사용자 확정). 색은 전부 테마 토큰을 쓴다. */
+   (2026-09-06 사용자 확정). 색은 전부 테마 토큰을 쓴다.
+   배경(덮기 · 겹 · 색)은 공용 `.ui-modal__backdrop` — 여기는 칸 사이 · 가장자리만. */
 
 .b05-routeedit {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal, 1000);
-  display: flex;
   gap: var(--spacing-12);
-  align-items: center;
-  justify-content: center;
   padding: var(--spacing-12);
-  background: rgb(0 0 0 / 55%);
 }
 
 /* 메인 창은 **왼쪽**, 횡단 두 판은 오른쪽 세로 칸(2026-09-12 사용자 지시 ⑱).
@@ -24,16 +18,14 @@
   height: 100%;
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-16, 12px);
+  border-radius: var(--radius-xl);
   background: var(--color-surface-raised);
-  box-shadow: 0 12px 40px rgb(0 0 0 / 45%);
+  box-shadow: var(--shadow-lg);
 }
 
+/* 제목줄 꼴(가로 · 가운데 · 간격)은 공용 `.ui-modal__top` — 여기는 띠 테두리만. */
 .b05-routeedit__head {
-  display: flex;
   flex: none;
-  align-items: center;
-  gap: var(--spacing-12);
   padding: var(--spacing-12) var(--spacing-16);
   border-bottom: 1px solid var(--color-border);
 }
diff --git a/resources/tester/helper_b05_routeedit_cross_width.cjs b/resources/tester/helper_b05_routeedit_cross_width.cjs
index 8b914607d..a610047b4 100644
--- a/resources/tester/helper_b05_routeedit_cross_width.cjs
+++ b/resources/tester/helper_b05_routeedit_cross_width.cjs
@@ -50,6 +50,11 @@ const fakeEl = () => ({
   getBoundingClientRect: () => ({ width: 300, height: 200 }),
 });
 globalThis.document = { createElement: fakeEl };
+// node 에는 ResizeObserver 가 없음 — 횡단 판 크기 따라가기는 이 시험 밖
+globalThis.ResizeObserver = class {
+  observe() {}
+  disconnect() {}
+};
 
 const asked = [];
 const STUBS = {
diff --git a/resources/tester/test_b05_routeedit_chrome_modal.py b/resources/tester/test_b05_routeedit_chrome_modal.py
new file mode 100644
index 000000000..6c4a2d0bf
--- /dev/null
+++ b/resources/tester/test_b05_routeedit_chrome_modal.py
@@ -0,0 +1,48 @@
+"""계획노선 편집 겉틀 = 공용 모달 조각(PLAN 127-1) — 배경 · 제목줄은 공용 클래스, 닫기 규칙은 그대로."""
+
+from __future__ import annotations
+
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+PAGE = ROOT / "B05_Profile"
+
+
+def _block(css: str, selector: str) -> str:
+    found = re.search(rf"^{re.escape(selector)} \{{([^}}]*)\}}", css, re.M)
+    assert found, selector
+    return found.group(1)
+
+
+def test_겉틀은_공용_모달_조각():
+    chrome = (PAGE / "B05_Profile_UI_RouteEdit_Chrome.ts").read_text(encoding="utf-8")
+    assert 'import "@ui/ui_template_modal.css";' in chrome
+    assert '"ui-modal__backdrop b05-routeedit"' in chrome
+    assert '<div class="ui-modal__top b05-routeedit__head">' in chrome
+    assert "<h3>계획노선 편집</h3>" in chrome
+    assert "<strong>계획노선 편집</strong>" not in chrome
+    # 시험 · 배선이 집는 자리는 남김
+    for hook in (
+        'data-act="apply"',
+        'data-act="cancel"',
+        "b05-routeedit__close",
+        "b05-routeedit__measure-close",
+    ):
+        assert hook in chrome
+
+
+def test_겹치는_CSS는_공용에_맡김():
+    css = (PAGE / "B05_Profile_UI_Style_RouteEdit.css").read_text(encoding="utf-8")
+    overlay = _block(css, ".b05-routeedit")
+    for prop in ("position:", "z-index:", "background:", "align-items:"):
+        assert prop not in overlay
+    head = _block(css, ".b05-routeedit__head")
+    for prop in ("display:", "align-items:", "gap:"):
+        assert prop not in head
+
+
+def test_바깥_누름_Esc_로_안_닫힘():
+    main = (PAGE / "B05_Profile_UI_RouteEdit.ts").read_text(encoding="utf-8")
+    assert "openModal" not in main
+    assert "Escape" not in main