feat(757-1): 그리기 칸 긋기 단추 걷음 · 방식 넷 켬끔 = 긋기 시작 · 끝

- 분할 고르기 부품에 풂 꼴(clearable) · 부품 모음 견본에 더함
- 방식 칸(map_draw_kind)에 켬끔 꼴(onActive · setActive) — 켬 = 긋기 시작 · 고른 방식 다시 누름 = 긋기 끝 · 긋는 중 다른 방식 = 방식만 바뀜
- D03 · B05 그리기 칸 [긋기] 단추 걷음 · 긋기가 Enter · Esc · 붙어 끝나도 칸 켬 맞춤 · 노드 판은 그대로
- 시험 757_1 새로

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

ui_template/ui_template_segment.ts

@@ -5,6 +5,7 @@
  *   꼴   = 글 · 아이콘(+ title) · 글 + 아이콘
  *   크기 = data-size 20 · 24 · 28 · 32(기본 28)
  *   줄   = 한 줄(기본) · `columns: 2` = 2 × 2 처럼 여러 줄 칸(긴 이름 넷 · 599-1 D03 긋기 방식)
+ *   풂   = `clearable: true` — 고른 칸을 다시 누르면 모두 풀림(`onChange("")` · 켬끔 고르기 · 589-9 긋기 방식 = 켜면 긋기 시작)
  *   상태 = 마우스 `:hover` · 눌림 `:active` · 막힘 `disabled` · 고름 = aria-checked — CSS 는 `[data-state]` 로도 받음
  *   쓰기 = `createSegment({ options: [{ value: "list", label: "목록" }, { value: "card", label: "카드" }], value: "list", onChange })`
  *   대신 = B01 `.b01-sys-seg` · `.b01-home__seg` · `.b01-proj-seg` · B04 `b04-surface__sheet-method` · B05 `b05-routerec__pills` ·
@@ -40,6 +41,8 @@ export function createSegment(opts: {
   ariaLabel?: string;
   /** 한 줄 칸 수 — 넘으면 다음 줄(없음 = 한 줄) */
   columns?: number;
+  /** 고른 칸을 다시 누르면 풂 — `onChange("")` */
+  clearable?: boolean;
 }): SegmentHandle {
   const root = document.createElement("div");
   root.className = "ui-segment";
@@ -63,7 +66,11 @@ export function createSegment(opts: {
     if (o.title && !o.label) b.setAttribute("aria-label", o.title);
     b.disabled = o.disabled ?? false;
     b.addEventListener("click", () => {
-      if (current === o.value) return;
+      if (current === o.value) {
+        if (!opts.clearable) return;
+        set("");
+        return opts.onChange?.("");
+      }
       set(o.value);
       opts.onChange?.(o.value);
     });