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_Roots.ts

@@ -9,7 +9,7 @@
  * 누르면 `go`(부르는 쪽이 해시로 다시 엶).
  * ========================================================================== */
 
-import { el } from "@ui/ui_template_elements";
+import { createButton, el } from "@ui/ui_template_elements";
 import { t as L } from "@ui/ui_template_locale";
 import { createTreeRow } from "@ui/ui_template_tree";
 import type { SessionUser } from "../A06_Login/A06_Login_Api_Fetch";
@@ -67,15 +67,17 @@ export function createLayerBar(opt: LayerBarOptions): HTMLElement {
           : "M02_PickerPersonal",
     );
     const current = root === active.root && (root !== "personal" || people || !active.owner);
-    const b = el("button", {
-      className: `m02-layers__btn${current ? " is-active" : ""}`,
-      text: readOnly ? `${name} · ${L("M02_RootReadOnly")}` : name,
-      attrs: { type: "button", "data-root": root, "aria-pressed": String(current) },
-    });
-    b.addEventListener("click", () => {
-      if (!current) opt.go(root, owner);
-      else opt.reselect?.();
+    const b = createButton({
+      label: readOnly ? `${name} · ${L("M02_RootReadOnly")}` : name,
+      variant: current ? "filled" : "ghost",
+      onClick: () => {
+        if (!current) opt.go(root, owner);
+        else opt.reselect?.();
+      },
     });
+    b.classList.add("m02-layers__btn");
+    b.dataset.root = root;
+    b.setAttribute("aria-pressed", String(current));
     return b;
   }