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_overlay.css

@@ -84,7 +84,9 @@
 
 .ui-workflow-overlay__handle {
   position: absolute;
-  border: 1px solid var(--color-border);
+  /* 배경과 같은 무채색 테두리는 손잡이가 묻혀 안 보였다(2026-08-04 사용자 지시).
+     테마별 강조색 테두리 — 라이트: 파랑, 다크: 노랑(--panel-handle-border, 테마 정의). */
+  border: 1px solid var(--panel-handle-border, var(--color-border));
   background: var(--color-surface-raised);
   color: var(--color-text);
   box-shadow: var(--shadow-lg);
@@ -103,6 +105,49 @@
   transition: transform var(--transition-fast);
 }
 
+/* 이름표 달린 손잡이 — 화살표+텍스트를 나란히 담도록 고정 폭을 푼다. */
+.ui-workflow-overlay__handle.is-labeled {
+  display: flex;
+  gap: var(--spacing-4);
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workflow-overlay__handle-label {
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* bottom 손잡이: 화살표 오른쪽에 가로 이름표 — 폭은 내용에 맞춘다(최소 64px 유지). */
+.ui-workflow-overlay__handle--bottom.is-labeled {
+  width: auto;
+  min-width: var(--spacing-64);
+  padding: 0 var(--spacing-8);
+}
+
+.ui-workflow-overlay__handle--bottom.is-labeled .ui-workflow-overlay__handle-icon {
+  margin: 0;
+}
+
+/* side 손잡이: 화살표 위쪽에 90° 세로 이름표 — 높이는 내용에 맞춘다(최소 64px 유지). */
+.ui-workflow-overlay__handle--side.is-labeled {
+  flex-direction: column;
+  height: auto;
+  min-height: var(--spacing-64);
+  padding: var(--spacing-8) 0;
+}
+
+.ui-workflow-overlay__handle--side.is-labeled .ui-workflow-overlay__handle-icon {
+  margin: 0;
+}
+
+.ui-workflow-overlay__handle--side.is-labeled .ui-workflow-overlay__handle-label {
+  writing-mode: vertical-rl;
+}
+
 /* title 패널 우측 가장자리 세로 중앙 핸들 — 닫히면 이 버튼만 화면 왼쪽에 남음 */
 .ui-workflow-overlay__handle--side {
   top: 50%;