feat(ui): 공용 단추 작은 크기 size sm 추가 · M01 표 단추 · M02 단추 적용 · M02 상세 머리 이름 줄바꿈

- createButton 에 size: "sm"(글자 캡션 크기 · 위아래 여백 2px) — 다섯 모양 모두에 먹음 · 기본은 그대로
- M01 표 안 단추는 sm 으로 바꾸고 M01 자체 축소 규칙 삭제
- M02 좌측 새로 · 본떠 만들기 · 지우기 · 카드 수정 단추에 sm
- M02 상세 화면 머리 번호 + 이름 잘림 없이 줄바꿈 · 집계표 카드 머리는 번호 · 수정 한 줄 + 이름 아래 전체 폭

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NWHNLQYPZN7kKf1rzrrRZq

ui_template/ui_template_elements.ts

@@ -24,11 +24,14 @@ export { el } from "./ui_template_elements_base";
  * -------------------------------------------------------------------------- */
 
 export type ButtonVariant = "filled" | "ghost" | "pill" | "danger" | "glass";
+export type ButtonSize = "md" | "sm";
 
 export interface ButtonOptions {
   /** 표시 텍스트 (i18n 결과 문자열을 전달) */
   label: string;
   variant?: ButtonVariant;
+  /** 크기 — 기본 md · sm = 표 칸·카드 머리용 작은 단추(글자 캡션 크기) */
+  size?: ButtonSize;
   /** 이벤트 핸들러 (frontend.md §4: on[페이지]_[기능]_[액션] 명명) */
   onClick?: (ev: MouseEvent) => void;
   disabled?: boolean;
@@ -40,7 +43,7 @@ export interface ButtonOptions {
 export function createButton(opts: ButtonOptions): HTMLButtonElement {
   const variant = opts.variant ?? "filled";
   const btn = el("button", {
-    className: `ui-btn ui-btn--${variant}`,
+    className: `ui-btn ui-btn--${variant}${opts.size === "sm" ? " ui-btn--sm" : ""}`,
     attrs: { type: opts.type ?? "button" },
   });
   if (opts.iconStart) {

ui_template/ui_template_elements_styles.ts

@@ -33,6 +33,12 @@ const BASE_CSS = `
 .ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .ui-btn__icon { display: inline-flex; width: 16px; height: 16px; }
 
+/* 작은 크기 — 다섯 모양 모두에 먹음(padding · 글자만 바꿈) */
+.ui-btn--sm {
+  padding: 2px var(--spacing-8);
+  font-size: var(--text-caption);
+}
+
 .ui-btn--filled {
   background-color: var(--color-primary);
   color: var(--color-primary-text);