From 5eed5e801cf05647f86faaf685b973d66342d813 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Fri, 21 Aug 2026 16:21:09 +0900
Subject: [PATCH] =?UTF-8?q?fix(B06):=20=EA=B8=B0=EC=8A=AD=EB=A7=89?=
 =?UTF-8?q?=EC=9D=B4=20=ED=81=B4=EB=A6=AD=EC=9D=B4=20=EA=B4=80=EC=97=90=20?=
 =?UTF-8?q?=EB=A8=B9=ED=9E=88=EB=8D=98=20=EB=AC=B8=EC=A0=9C=C2=B7=EA=B0=95?=
 =?UTF-8?q?=EC=A1=B0=20=EC=83=89=20=ED=86=A0=ED=81=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

화면 확인에서 나온 두 가지:
- 그리기 순서가 벽 → 관 → 보호공이라 관 폴리곤이 벽 가운데를 덮어, 벽을 눌러도
  관이 먼저 클릭을 먹었다. 그리기 순서는 그대로 두고 **투명 판정면**을 맨 마지막에
  얹어 벽 전체가 눌리게 했다.
- 선택 강조가 존재하지 않는 --color-accent를 참조하고 있었다. 면적 밴드와 같은
  규칙으로 --color-royal-amethyst를 쓰고, 규칙 위치도 기슭막이 기본 스타일 옆
  (_Style_Cross_Areas.css)으로 옮겼다.

검증(공용 브라우저, 13+15.7 카드): 벽 클릭 → 강조·화살표 노출, ◀ 2회 이동 반영,
↺ 자동 자리 정확 복귀. tsc 통과, pytest 148 pass.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 B06_Section/B06_Section_UI_Cross_Culvert.ts   | 27 ++++++++++++++-----
 B06_Section/B06_Section_UI_Style_Cross.css    | 12 ---------
 .../B06_Section_UI_Style_Cross_Areas.css      | 19 +++++++++++++
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/B06_Section/B06_Section_UI_Cross_Culvert.ts b/B06_Section/B06_Section_UI_Cross_Culvert.ts
index c6bcb169..96045660 100644
--- a/B06_Section/B06_Section_UI_Cross_Culvert.ts
+++ b/B06_Section/B06_Section_UI_Cross_Culvert.ts
@@ -117,13 +117,7 @@ export function appendCulvertOverlay(
         ` · 근입 ${REVET_EMBED_DEPTH_M.toFixed(2)}m(실무 기초콘크리트 H=0.5 — 법정 규정 없음)` +
         (wall.lengthM ? ` · 연장 ${wall.lengthM.toFixed(1)}m` : ""),
     );
-    if (onSelectRevet) {
-      revetShape.classList.add("is-selectable");
-      revetShape.addEventListener("click", (event) => {
-        event.stopPropagation();
-        onSelectRevet(wall.role);
-      });
-    }
+    if (onSelectRevet) revetShape.classList.add("is-selectable");
     revetShapes.set(wall.role, revetShape);
     layer.append(revetShape);
     // 평행사변형 띠와 사다리꼴 사이 대각 이음선(내부 경계 — 사용자 스케치의 가운데 선):
@@ -285,6 +279,25 @@ export function appendCulvertOverlay(
   }
   drawPitching();
 
+  // 클릭 판정용 투명 겹면 — **맨 마지막에** 얹는다. 관·보호공이 벽 위를 지나가 그리기
+  // 순서상 벽 가운데를 덮으므로, 벽 폴리곤에 직접 핸들러를 달면 가운데를 눌러도 관이
+  // 먼저 먹는다(2026-08-21 화면 확인). 그리기 순서(벽 → 관 → 보호공)는 그대로 두고
+  // 판정면만 위로 올린다. 관 자체의 툴팁은 벽 밖 구간에서 그대로 뜬다.
+  if (onSelectRevet) {
+    for (const wall of wallsInOrder) {
+      const hit = polygon(
+        wall.points.map((p) => [x(p.offset), toDisplayY(p.elevation)] as [number, number]),
+        "b06-chart__culvert-revet-hit",
+        `${roleLabel(wall.role)} 기슭막이 선택 — 카드 하단 ◀/▶로 자리 조절`,
+      );
+      hit.addEventListener("click", (event) => {
+        event.stopPropagation();
+        onSelectRevet(wall.role);
+      });
+      layer.append(hit);
+    }
+  }
+
   // 강조는 클래스만 갈아 끼운다 — 카드를 다시 그리면 휠 줌·팬이 초기화된다.
   return (key) => {
     for (const [role, shape] of revetShapes) shape.classList.toggle("is-active", role === key);
diff --git a/B06_Section/B06_Section_UI_Style_Cross.css b/B06_Section/B06_Section_UI_Style_Cross.css
index b900345a..c45c3193 100644
--- a/B06_Section/B06_Section_UI_Style_Cross.css
+++ b/B06_Section/B06_Section_UI_Style_Cross.css
@@ -597,15 +597,3 @@
   color: var(--color-text);
   background: var(--color-surface);
 }
-
-/* 기슭막이 선택 — 구조물 선택이 절·성토 면적 강조보다 우선한다(2026-08-21 사용자 ①).
-   색은 토큰만 쓰고 하드코딩하지 않는다. */
-.b06-chart__culvert-revet.is-selectable {
-  cursor: pointer;
-}
-
-.b06-chart__culvert-revet.is-active {
-  stroke: var(--color-accent, currentColor);
-  stroke-width: 2;
-  filter: brightness(1.15);
-}
diff --git a/B06_Section/B06_Section_UI_Style_Cross_Areas.css b/B06_Section/B06_Section_UI_Style_Cross_Areas.css
index e156ea3c..2f2b9e08 100644
--- a/B06_Section/B06_Section_UI_Style_Cross_Areas.css
+++ b/B06_Section/B06_Section_UI_Style_Cross_Areas.css
@@ -186,6 +186,25 @@
   stroke-linejoin: round;
 }
 
+/* 기슭막이 선택(2026-08-21) — 구조물 선택이 절·성토 면적 강조보다 우선한다.
+   강조 색은 면적 밴드와 같은 규칙으로 토큰만 쓴다. */
+.b06-chart__culvert-revet.is-selectable {
+  cursor: pointer;
+}
+
+.b06-chart__culvert-revet.is-active {
+  fill: color-mix(in srgb, var(--color-royal-amethyst) 45%, transparent);
+  stroke: var(--color-royal-amethyst);
+  stroke-width: 2.2;
+}
+
+/* 클릭 판정용 투명 겹면 — 관·보호공보다 위에 얹혀 벽 가운데도 눌린다. */
+.b06-chart__culvert-revet-hit {
+  fill: transparent;
+  stroke: none;
+  cursor: pointer;
+}
+
 .b06-chart__culvert-apron {
   fill: color-mix(in srgb, var(--color-text-secondary) 22%, transparent);
   stroke: var(--color-text-secondary);