feat(B05/B06/ui): 패널 손잡이·리사이저·편집 버튼 시인성 정리(16·18~20)

- 16: 편집 버튼 전체(▲▼·↺·⬆⬇) 21×17 통일, 겹침 간격 23px, X축 라벨 상향 19px
- 18: 유토곡선 손잡이가 오버레이 위 경계를 따라 이동(펼침 시 테이블 영역 침범 허용)
- 19: 손잡이 테두리 강조색 --panel-handle-border(라이트 파랑 #2563eb / 다크 노랑
  #e0b64a) + 이름표 옵션 — B05 '종단'·'유토곡선'·세로 '배수유역', B06 '종단/유토곡선'
- 20: 공용 리사이저 상시 표시선(1px, 같은 강조색) — hover/드래그 시 3px

Playwright: 버튼 3종 21×17, 라벨·테두리색·세로 writing-mode, 리사이저 1px/0.75,
손잡이 bottom=오버레이 top 일치, 콘솔 오류 0. typecheck 통과.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

ui_template/ui_template_resizer.css

@@ -1,18 +1,57 @@
 /* 공통 스플리터(드래그 리사이저) — 패널 경계에 얹는 얇은 손잡이.
-   레이아웃을 밀지 않도록 경계 위에 절대배치하고, 평소에는 보이지 않다가
-   마우스를 얹거나 끌 때만 색이 들어온다. */
+   레이아웃을 밀지 않도록 경계 위에 절대배치한다.
+
+   조절 가능한 패널이 여러 곳(B05 3곳·B06 1곳)인데 hover 전에는 보이지 않아 구분이
+   안 됐다(2026-08-04 사용자 지시) — 손잡이 테두리와 같은 강조색(--panel-handle-border)
+   의 **얇은 줄을 상시 표시**하고, 얹거나 끌 때 굵어진다. 히트 영역(6px)은 그대로다. */
 
 .ui-resizer {
   position: absolute;
   z-index: 1;
   background: transparent;
-  transition: background var(--transition-fast);
   touch-action: none;
 }
 
-.ui-resizer:hover,
-.ui-resizer.is-dragging {
-  background: var(--color-primary);
+/* 상시 보이는 얇은 표시줄 — 히트 영역 가운데 1px. */
+.ui-resizer::before {
+  content: "";
+  position: absolute;
+  background: var(--panel-handle-border, var(--color-primary));
+  opacity: 0.75;
+  transition:
+    opacity var(--transition-fast),
+    background var(--transition-fast);
+}
+
+.ui-resizer--vertical::before {
+  top: 50%;
+  right: 0;
+  left: 0;
+  height: 1px;
+  transform: translateY(-50%);
+}
+
+.ui-resizer--horizontal::before {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+}
+
+.ui-resizer:hover::before,
+.ui-resizer.is-dragging::before {
+  opacity: 1;
+}
+
+.ui-resizer--vertical:hover::before,
+.ui-resizer--vertical.is-dragging::before {
+  height: 3px;
+}
+
+.ui-resizer--horizontal:hover::before,
+.ui-resizer--horizontal.is-dragging::before {
+  width: 3px;
 }
 
 /* 위아래로 끌어 높이를 조절 — 패널 위쪽 경계에 가로로 눕는다. */