diff --git a/B06_Section/B06_Section_UI_Cross_Box.ts b/B06_Section/B06_Section_UI_Cross_Box.ts index 95fd3b8b..1fccfe0b 100644 --- a/B06_Section/B06_Section_UI_Cross_Box.ts +++ b/B06_Section/B06_Section_UI_Cross_Box.ts @@ -148,7 +148,10 @@ export function appendBoxOverlay( { offset: outer, elevation: bottom }, { offset: midOffset, elevation: bottom }, ], - "b06-chart__culvert-revet-hit", + // 강조용 클래스를 하나 더 단다 — 고른 끝을 옅게 칠한다(2026-08-30 사용자: + // BOX암거는 선택해도 아무 표시가 없었다). 구체 부재는 좌·우가 한 몸이라 + // 그쪽을 칠하면 어느 끝을 고른 것인지 되레 흐려진다. + "b06-chart__culvert-revet-hit b06-chart__box-hit", "", ); hit.addEventListener("click", (event) => { diff --git a/B06_Section/B06_Section_UI_Style_Cross_Areas.css b/B06_Section/B06_Section_UI_Style_Cross_Areas.css index 798a0e6f..a2c430b5 100644 --- a/B06_Section/B06_Section_UI_Style_Cross_Areas.css +++ b/B06_Section/B06_Section_UI_Style_Cross_Areas.css @@ -250,6 +250,16 @@ cursor: pointer; } +/* BOX암거 끝 선택 강조 — 고른 절반을 옅게 칠하고 테두리를 두른다 + (2026-08-30 사용자: 선택해도 하이라이트가 없었다). 색은 기슭막이·집수정 강조와 + 같은 계열이되, 면이 넓어 채도를 낮춘다. */ +.b06-chart__box-hit.is-active { + fill: color-mix(in srgb, var(--color-danger) 16%, transparent); + stroke: var(--color-danger); + stroke-width: 1.6; + stroke-dasharray: 4 3; +} + .b06-chart__culvert-apron { fill: color-mix(in srgb, var(--color-text-secondary) 22%, transparent); stroke: var(--color-text-secondary);