fix(B05): 367-6 유토곡선 범례 = 손잡이 오른쪽부터 · 좁으면 줄 바꿈 — 손잡이가 범례 단추 덮음 없앰

배수유역 판이 펼쳐 종단 열이 좁을 때 ▲유토곡선 손잡이가 [횡단 기준]을 덮던 것 · 넓을 땐 지금 한 줄 그대로.
시험 test_367_6 = 폭 넷에서 범례 단추 셋 · 손잡이 elementFromPoint = 자기.

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

B05_Profile/B05_Profile_UI_Style_MassHaul.css

@@ -143,18 +143,26 @@
 }
 
 /* 범례 오버레이 — 유토곡선 우상단에 절대배치(B06과 같은 문법). 요약 막대 아래에 앉힌다.
-   공용 범례(.b06-masshaul__legend)가 이미 absolute + right 배치라 top만 이 래퍼가 정한다. */
+   공용 범례(.b06-masshaul__legend)가 이미 absolute + right 배치라 top만 이 래퍼가 정한다.
+   왼쪽 끝 = 손잡이(중앙 +44 · 폭 72) 오른쪽 — 좁으면 범례가 줄을 바꿔 손잡이를 피함(367-6). */
 .b05-profile__masshaul-legend {
   position: absolute;
   top: 4px;
   right: 0;
-  left: 0;
+  left: calc(50% + 92px);
   z-index: 3;
   height: 0;
   pointer-events: none;
 }
 
 .b05-profile__masshaul-legend .b06-masshaul__legend {
+  left: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  pointer-events: none;
+}
+
+.b05-profile__masshaul-legend .b06-masshaul__legend > * {
   pointer-events: auto;
 }
 

resources/tester/test_367_6_masshaul_legend_handle.py

@@ -0,0 +1,55 @@
+"""367-6 유토곡선 손잡이 · 범례 안 겹침 — 실제 브라우저(서버 없이 · 진짜 CSS).
+
+유토 판 머리줄(손잡이 = 중앙 +44)과 범례(오른쪽 붙임)를 진짜 CSS 로 세우고 판 폭마다
+범례 단추 셋 · 손잡이 가운데 elementFromPoint = 그 단추. 좁은 폭 = 배수유역 판이 펼친 B06 ·
+B05 종단 열(≈ 434px) · 더 좁은 열 · 넓은 폭 = 배수유역 접은 칸(1162px) — 넓을 땐 한 줄 그대로.
+"""
+
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+CSS = [
+    "ui_template/ui_template_theme.css",
+    "ui_template/ui_template_overlay.css",
+    "common_util/common_util_mass_haul.css",
+    "B05_Profile/B05_Profile_UI_Style_MassHaul.css",
+]
+BUTTONS = ["도형 위치 초기화", "횡단 기준", "토량 분배"]
+HTML = """
+<div class="b05-profile__masshaul-overlay" style="width:{w}px;margin-top:40px">
+  <div class="b05-profile__masshaul-head"><div class="b05-profile__masshaul-handle">
+    <button class="ui-workflow-overlay__handle ui-workflow-overlay__handle--bottom is-labeled">
+      <span class="ui-workflow-overlay__handle-icon"></span>
+      <span class="ui-workflow-overlay__handle-label">유토곡선</span></button>
+  </div></div>
+  <div class="b05-profile__masshaul-scroll"></div>
+  <div class="b05-profile__masshaul-legend"><div class="b06-masshaul__legend">
+    <button class="b06-masshaul__legend-item b06-masshaul__legend-item--reset">도형 위치 초기화</button>
+    <button class="b06-masshaul__legend-item"><span class="b06-masshaul__legend-swatch"></span><span>횡단 기준</span></button>
+    <button class="b06-masshaul__legend-item"><span class="b06-masshaul__legend-swatch"></span><span>토량 분배</span></button>
+  </div></div>
+</div>
+"""
+PROBE = """() => [...document.querySelectorAll('button')].map((b) => {
+  const r = b.getBoundingClientRect();
+  const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);
+  return [b.textContent.trim(), b === hit || b.contains(hit), Math.round(r.top)];
+})"""
+
+
+def test_legend_buttons_clear_of_handle():
+    from playwright.sync_api import sync_playwright
+
+    css = "\n".join((ROOT / p).read_text(encoding="utf-8") for p in CSS)
+    with sync_playwright() as p:
+        browser = p.chromium.launch(channel="msedge", headless=True)
+        page = browser.new_page(viewport={"width": 1300, "height": 600})
+        for width in (360, 434, 700, 1162):
+            page.set_content(f"<style>body{{margin:0}}{css}</style>{HTML.format(w=width)}")
+            rows = page.evaluate(PROBE)
+            assert [r[0] for r in rows] == ["유토곡선", *BUTTONS]
+            assert all(r[1] for r in rows), (width, rows)
+            if width == 1162:
+                # 넓을 땐 지금 모양 — 범례 한 줄
+                assert len({r[2] for r in rows[1:]}) == 1, rows
+        browser.close()