fix(M02): 단추를 공용 기본 단추로 · 알약 꼴은 진짜 알약에만

- 공용 작은 단추(ui-btn--sm) 모서리 8px → 4px — 낮은 키에 8px 이면 알약 꼴
- 층 단추 · 고르기 창 출처 단추 · 나무 「+」 = createButton(켜짐 filled · 나머지 ghost) · 전용 단추 꼴 CSS 지움
- 데이터 흐름 입력 패널 갈래 · 방식 단추 pill → ghost
- 연결 알약 · 다이어그램 알약 · 칩 · 이름표는 그대로
- 시험: 층 단추 글 찾기 들여쓰기 맞춤 · 화면 시나리오 45-1 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016PSXsvyDxjNmufteN5bqmt

M02_MasterTemplete/M02_MasterTemplete_TreePanel.ts

@@ -10,7 +10,13 @@
  * ========================================================================== */
 
 import "./M02_MasterTemplete_TreePanel.css";
-import { createInputField, el, showConfirmDialog, showToast } from "@ui/ui_template_elements";
+import {
+  createButton,
+  createInputField,
+  el,
+  showConfirmDialog,
+  showToast,
+} from "@ui/ui_template_elements";
 import { loadingError, showLoading } from "@ui/ui_template_loading";
 import { t as L } from "@ui/ui_template_locale";
 import {
@@ -141,13 +147,15 @@ export function createTreePanel(opt: TreePanelOptions): TreePanelHandle {
   const root = el("div", { className: "m02-tree", children: [body] });
   search.root.classList.add("m02-tree__search");
   // 층 단추 옆 「+」 — 맨 위에 폴더 · 항목 더하기(뿌리 줄 오른쪽 클릭을 갈음)
-  const add = el("button", {
-    className: "m02-tree__add",
-    text: "+",
-    attrs: { type: "button", title: L("M02_TreeAddTop"), "aria-label": L("M02_TreeAddTop") },
+  const add = createButton({
+    label: "+",
+    variant: "ghost",
+    onClick: (event) => openTreeMenu(event, topMenu()),
   });
+  add.classList.add("m02-tree__add");
+  add.title = L("M02_TreeAddTop");
+  add.setAttribute("aria-label", L("M02_TreeAddTop"));
   add.hidden = !opt.canEdit;
-  add.addEventListener("click", (event) => openTreeMenu(event, topMenu()));
   // 「N개 고름」 · 「+」 — 층 단추 줄 오른쪽 끝(30-2 · 부르는 쪽이 붙임)
   const status = el("span", { className: "m02-tree__picked", attrs: { hidden: "" } });
   const tools = el("span", { className: "m02-tree__tools", children: [status, add] });