diff --git a/A00_Common/b_page_tabs.ts b/A00_Common/b_page_tabs.ts
new file mode 100644
index 000000000..179ac8c5c
--- /dev/null
+++ b/A00_Common/b_page_tabs.ts
@@ -0,0 +1,46 @@
+/* =============================================================================
+ * b_page_tabs.ts
+ * 페이지 탭 줄 — 부품 「탭」(`ui_template_tabs`)을 이미 있는 줄 요소 안에 채움(553-3 · B08 · B09 · ☰ [설정]).
+ *
+ *   쓰기 = `fillTabs(줄, { tabs, value, onChange, kind: "pill", data: "b08Tab" })` — 칸마다 `data-<data>` = 탭 열쇠
+ *   줄 요소는 페이지가 정함(클래스 · 자리) · 칸 모양 · 크기 · 고름 표시는 부품 몫 · 누른 칸이 지금 칸이면 안 부름
+ *   탭 이름이 바뀌면 다시 부르면 됨(줄을 통째로 다시 채움)
+ * ========================================================================== */
+
+import type { UiSize } from "@ui/ui_template_button";
+import { createTabs, type TabItem } from "@ui/ui_template_tabs";
+
+export interface PageTabsOptions {
+  tabs: TabItem[];
+  value: string;
+  onChange: (key: string) => void;
+  /** line = 위 탭(밑줄) · pill = 보조 탭(작은 알약) */
+  kind?: "line" | "pill";
+  size?: UiSize;
+  /** 칸에 붙일 data 이름(camelCase · 예: b08Tab → data-b08-tab) */
+  data: string;
+  /** 칸 풍선 */
+  title?: (key: string) => string | undefined;
+}
+
+export function fillTabs(host: HTMLElement, opts: PageTabsOptions): HTMLElement[] {
+  const tabs = createTabs({
+    tabs: opts.tabs,
+    value: opts.value,
+    kind: opts.kind,
+    size: opts.size,
+    onChange: (key) => key !== opts.value && opts.onChange(key),
+  });
+  const buttons = [...tabs.root.querySelectorAll<HTMLElement>("[data-tab]")];
+  for (const button of buttons) {
+    const key = button.dataset.tab ?? "";
+    button.dataset[opts.data] = key;
+    const title = opts.title?.(key);
+    if (title) button.title = title;
+  }
+  host.classList.add(...tabs.root.classList);
+  host.dataset.size = tabs.root.dataset.size ?? "";
+  host.setAttribute("role", "tablist");
+  host.replaceChildren(...tabs.root.childNodes);
+  return buttons;
+}
diff --git a/A00_Common/spreadsheet/spreadsheet_tabs.ts b/A00_Common/spreadsheet/spreadsheet_tabs.ts
index f4cc8a551..efdb0fe82 100644
--- a/A00_Common/spreadsheet/spreadsheet_tabs.ts
+++ b/A00_Common/spreadsheet/spreadsheet_tabs.ts
@@ -12,7 +12,7 @@
  * ========================================================================== */
 
 import { createMapContextMenu, type MapContextMenuItem } from "@ui/ui_template_context_menu";
-import { el, showConfirmDialog, showToast } from "@ui/ui_template_elements";
+import { createIconButton, el, showConfirmDialog, showToast } from "@ui/ui_template_elements";
 import { emptySheet } from "./spreadsheet_commands";
 import { hideSheet, unhideSheet } from "./spreadsheet_sheet_extra";
 import { st } from "./spreadsheet_text";
@@ -164,11 +164,13 @@ export function mountTabs(ctx: SpreadsheetContext): PartHandle {
   }
 
   function addButton(): HTMLElement {
-    const btn = el("button", {
-      className: "ss-tabs__add",
-      text: "+",
-      attrs: { type: "button", title: st("SheetAdd") },
+    const btn = createIconButton({
+      glyph: "+",
+      title: st("SheetAdd"),
+      variant: "outline",
+      size: 22,
     });
+    btn.classList.add("ss-tabs__add");
     btn.addEventListener("click", () => {
       const name = nextSheetName(ctx.book, "Sheet");
       const sheet = emptySheet(nextSheetId(ctx.book), name);
diff --git a/A00_Common/spreadsheet/spreadsheet_toolbar.css b/A00_Common/spreadsheet/spreadsheet_toolbar.css
index fc0ffa84f..92606abe7 100644
--- a/A00_Common/spreadsheet/spreadsheet_toolbar.css
+++ b/A00_Common/spreadsheet/spreadsheet_toolbar.css
@@ -27,24 +27,10 @@
   border-right: 0;
 }
 
-.ss-toolbar .ui-btn {
-  padding: 4px 8px;
-  font-size: 0.82rem;
-}
-
+/* 단추 · 칸 = 부품 단추(24) · 입력 · 고르기(28) — 여기는 켬 · 폭만(553-6) */
 .ss-toolbar .ui-btn.is-on {
-  background: var(--color-mist-violet);
-  box-shadow: inset 0 0 0 1px var(--color-royal-amethyst);
-}
-
-.ss-toolbar__select {
-  height: 28px;
-  padding: 0 4px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-canvas);
-  color: var(--color-text-body);
-  font-size: 0.8rem;
+  background: var(--color-accent-soft);
+  box-shadow: inset 0 0 0 1px var(--color-accent);
 }
 
 .ss-toolbar__select option {
@@ -53,14 +39,7 @@
 }
 
 .ss-toolbar__input {
-  height: 28px;
   width: 72px;
-  padding: 0 4px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-canvas);
-  color: var(--color-text-body);
-  font-size: 0.8rem;
 }
 
 .ss-toolbar__input--font {
@@ -85,15 +64,6 @@
   cursor: pointer;
 }
 
-.ss-toolbar__clear {
-  padding: 0 4px;
-  border: 0;
-  background: none;
-  color: var(--color-text-secondary);
-  font-size: 0.72rem;
-  cursor: pointer;
-}
-
 .ss-toolbar__popover {
   position: absolute;
   top: calc(100% + 4px);
@@ -138,7 +108,7 @@
 .ss-toolbar__unit-label {
   margin-bottom: var(--spacing-4);
   color: var(--color-text-muted);
-  font-size: 0.72rem;
+  font-size: var(--text-caption);
 }
 
 .ss-toolbar__unit-grid {
@@ -147,9 +117,9 @@
   gap: var(--spacing-4);
 }
 
-.ss-toolbar__unit-btn {
+.ss-toolbar__unit-grid > .ui-btn[data-size] {
   min-width: 0;
-  padding: 4px 2px;
+  padding-inline: 2px;
 }
 
 .ss-toolbar__hint {
@@ -232,15 +202,6 @@
   font: inherit;
 }
 
-.ss-tabs__add {
-  padding: 2px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-canvas);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-}
-
 /* ── 우클릭 메뉴(그리드 · 탭 공용, `ui_template_context_menu.ts`) — 모양 · 자리는 공용 `.ui-ctx-menu` ── */
 
 .ss__context-menu-item.is-danger {
@@ -261,7 +222,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgb(0 0 0 / 35%);
+  background: var(--color-scrim);
 }
 
 .ss-comment-editor__panel {
diff --git a/A00_Common/spreadsheet/spreadsheet_toolbar.ts b/A00_Common/spreadsheet/spreadsheet_toolbar.ts
index d9fccdb72..7ebda5a32 100644
--- a/A00_Common/spreadsheet/spreadsheet_toolbar.ts
+++ b/A00_Common/spreadsheet/spreadsheet_toolbar.ts
@@ -10,7 +10,7 @@
  * 스스로 구독하지 않음. `destroy()` 는 부품을 뗄 때.
  * ========================================================================== */
 
-import { createButton, el } from "@ui/ui_template_elements";
+import { createButton, createIconButton, el, setUiSize } from "@ui/ui_template_elements";
 import { confirmMerge } from "./spreadsheet_actions";
 import { colName, rangeToA1, toA1 } from "./spreadsheet_address";
 import { shownHAlign, shownVAlign } from "./spreadsheet_cellstyle";
@@ -144,14 +144,25 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   };
 
   // ── 되돌리기 · 다시 ────────────────────────────────────────────────────
-  const undoBtn = createButton({ label: "↶", variant: "ghost", onClick: () => ctx.undo() });
+  const undoBtn = createButton({
+    label: "↶",
+    variant: "ghost",
+    size: 24,
+    onClick: () => ctx.undo(),
+  });
   undoBtn.title = st("Undo");
-  const redoBtn = createButton({ label: "↷", variant: "ghost", onClick: () => ctx.redo() });
+  const redoBtn = createButton({
+    label: "↷",
+    variant: "ghost",
+    size: 24,
+    onClick: () => ctx.redo(),
+  });
   redoBtn.title = st("Redo");
   // 손가락 — 우클릭 대신 활성 칸 메뉴를 여는 ⋯(기기대응 3-5 · 터치 모드에서만 보임)
   const moreBtn = createButton({
     label: "⋯",
     variant: "ghost",
+    size: 24,
     onClick: () => {
       const { r, c } = ctx.selection.활성;
       const { box } = ctx.grid.editorSlot(r, c);
@@ -175,7 +186,7 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
 
   // ── 글꼴 · 크기 ────────────────────────────────────────────────────────
   const fontInput = el("input", {
-    className: "ss-toolbar__input ss-toolbar__input--font",
+    className: "ui-input ss-toolbar__input ss-toolbar__input--font",
     attrs: { list: "ss-toolbar-fonts", "aria-label": st("FontName") },
   }) as HTMLInputElement;
   const fontList = el("datalist", {
@@ -187,7 +198,7 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   fontInput.addEventListener("change", commitFont);
 
   const sizeInput = el("input", {
-    className: "ss-toolbar__input ss-toolbar__input--size",
+    className: "ui-input ss-toolbar__input ss-toolbar__input--size",
     attrs: { type: "number", min: "1", max: "409", step: "0.5", "aria-label": st("FontSize") },
   }) as HTMLInputElement;
   sizeInput.addEventListener("change", () => {
@@ -196,13 +207,13 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   });
 
   // ── 굵게 · 기울임 · 밑줄 · 취소선 ──────────────────────────────────────
-  const boldBtn = createButton({ label: "B", variant: "ghost" });
+  const boldBtn = createButton({ label: "B", variant: "ghost", size: 24 });
   boldBtn.title = st("Bold");
-  const italicBtn = createButton({ label: "I", variant: "ghost" });
+  const italicBtn = createButton({ label: "I", variant: "ghost", size: 24 });
   italicBtn.title = st("Italic");
-  const underlineBtn = createButton({ label: "U", variant: "ghost" });
+  const underlineBtn = createButton({ label: "U", variant: "ghost", size: 24 });
   underlineBtn.title = st("Underline");
-  const strikeBtn = createButton({ label: "S", variant: "ghost" });
+  const strikeBtn = createButton({ label: "S", variant: "ghost", size: 24 });
   strikeBtn.title = st("Strike");
   const toggles: [HTMLButtonElement, keyof CellStyle][] = [
     [boldBtn, "굵게"],
@@ -220,11 +231,8 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
     attrs: { type: "color", "aria-label": st("TextColor"), value: "#000000" },
   }) as HTMLInputElement;
   textColor.addEventListener("change", () => patch({ 글자색: textColor.value }));
-  const textColorClear = el("button", {
-    className: "ss-toolbar__clear",
-    text: "✕",
-    attrs: { type: "button", title: st("ColorClear") },
-  });
+  const textColorClear = createIconButton({ glyph: "✕", title: st("ColorClear"), size: 18 });
+  textColorClear.classList.add("ss-toolbar__clear");
   textColorClear.addEventListener("click", () => patch({ 글자색: null }));
 
   const fillColor = el("input", {
@@ -232,11 +240,8 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
     attrs: { type: "color", "aria-label": st("FillColor"), value: "#ffffff" },
   }) as HTMLInputElement;
   fillColor.addEventListener("change", () => patch({ 채움: fillColor.value }));
-  const fillColorClear = el("button", {
-    className: "ss-toolbar__clear",
-    text: "✕",
-    attrs: { type: "button", title: st("ColorClear") },
-  });
+  const fillColorClear = createIconButton({ glyph: "✕", title: st("ColorClear"), size: 18 });
+  fillColorClear.classList.add("ss-toolbar__clear");
   fillColorClear.addEventListener("click", () => patch({ 채움: null }));
 
   // ── 가로 · 세로 정렬 · 줄 바꿈 ─────────────────────────────────────────
@@ -255,7 +260,7 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   } as const;
 
   const hAlignSelect = el("select", {
-    className: "ss-toolbar__select",
+    className: "ui-select ss-toolbar__select",
     attrs: { "aria-label": st("HAlign") },
     children: (Object.keys(HALIGN_LABEL) as (keyof typeof HALIGN_LABEL)[]).map((v) =>
       el("option", { attrs: { value: v }, text: HALIGN_LABEL[v] }),
@@ -266,7 +271,7 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   );
 
   const vAlignSelect = el("select", {
-    className: "ss-toolbar__select",
+    className: "ui-select ss-toolbar__select",
     attrs: { "aria-label": st("VAlign") },
     children: (Object.keys(VALIGN_LABEL) as (keyof typeof VALIGN_LABEL)[]).map((v) =>
       el("option", { attrs: { value: v }, text: VALIGN_LABEL[v] }),
@@ -276,11 +281,11 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
     patch({ 세로: vAlignSelect.value as CellStyle["세로"] }),
   );
 
-  const wrapBtn = createButton({ label: st("Wrap"), variant: "ghost" });
+  const wrapBtn = createButton({ label: st("Wrap"), variant: "ghost", size: 24 });
   wrapBtn.addEventListener("click", () => patch({ 줄바꿈: !wrapBtn.classList.contains("is-on") }));
 
   // ── 병합 ───────────────────────────────────────────────────────────────
-  const mergeBtn = createButton({ label: st("Merge"), variant: "ghost" });
+  const mergeBtn = createButton({ label: st("Merge"), variant: "ghost", size: 24 });
   mergeBtn.addEventListener("click", async () => {
     const range = ctx.selection.범위[0];
     if (!range) return;
@@ -290,10 +295,10 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   });
 
   // ── 테두리 ───────────────────────────────────────────────────────────
-  const borderBtn = createButton({ label: st("Border"), variant: "ghost" });
+  const borderBtn = createButton({ label: st("Border"), variant: "ghost", size: 24 });
   const borderPop = el("div", { className: "ss-toolbar__popover", attrs: { hidden: "true" } });
   const lineSelect = el("select", {
-    className: "ss-toolbar__select",
+    className: "ui-select ss-toolbar__select",
     children: BORDER_LINES.map((v) => el("option", { attrs: { value: v }, text: v })),
   }) as HTMLSelectElement;
   const lineColor = el("input", {
@@ -314,6 +319,7 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
     const b = createButton({
       label,
       variant: "ghost",
+      size: 24,
       onClick: () => {
         applyBorderPreset(preset);
         borderPop.hidden = true;
@@ -393,7 +399,7 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
 
   // ── 숫자 형식 ─────────────────────────────────────────────────────────
   const numfmtInput = el("input", {
-    className: "ss-toolbar__input ss-toolbar__input--numfmt",
+    className: "ui-input ss-toolbar__input ss-toolbar__input--numfmt",
     attrs: {
       list: "ss-toolbar-numfmt",
       "aria-label": st("NumberFormat"),
@@ -414,7 +420,7 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   numfmtInput.addEventListener("change", () => patch({ 형식: numfmtInput.value || null }));
 
   // ── 단위 기호 ─────────────────────────────────────────────────────────
-  const unitBtn = createButton({ label: `${st("Unit")} ▾`, variant: "ghost" });
+  const unitBtn = createButton({ label: `${st("Unit")} ▾`, variant: "ghost", size: 24 });
   const unitPop = el("div", {
     className: "ss-toolbar__popover ss-toolbar__unit-pop",
     attrs: { hidden: "true" },
@@ -472,7 +478,12 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
     recentGrid.textContent = "";
     recentSection.hidden = list.length === 0;
     for (const u of list) {
-      const b = createButton({ label: u, variant: "ghost", onClick: () => insertUnit(u) });
+      const b = createButton({
+        label: u,
+        variant: "ghost",
+        size: 24,
+        onClick: () => insertUnit(u),
+      });
       b.className += " ss-toolbar__unit-btn";
       recentGrid.append(b);
     }
@@ -483,7 +494,12 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
   for (const [labelKey, items] of UNIT_GROUPS) {
     const grid = el("div", { className: "ss-toolbar__unit-grid" });
     for (const u of items) {
-      const b = createButton({ label: u, variant: "ghost", onClick: () => insertUnit(u) });
+      const b = createButton({
+        label: u,
+        variant: "ghost",
+        size: 24,
+        onClick: () => insertUnit(u),
+      });
       b.className += " ss-toolbar__unit-btn";
       grid.append(b);
     }
@@ -536,6 +552,8 @@ export function mountToolbar(ctx: SpreadsheetContext): PartHandle {
     group(unitBtn, unitPop),
     formulaHint,
   );
+  // 칸 크기 단(553-6) — 단추 24 · 칸 28
+  for (const f of root.querySelectorAll<HTMLElement>(".ui-input, .ui-select")) setUiSize(f, 28);
 
   function refresh(): void {
     undoBtn.disabled = !ctx.history.canUndo();
diff --git a/A01_Home/A01_Home_UI_Page.ts b/A01_Home/A01_Home_UI_Page.ts
index 110f0c492..53cb011d7 100644
--- a/A01_Home/A01_Home_UI_Page.ts
+++ b/A01_Home/A01_Home_UI_Page.ts
@@ -5,12 +5,15 @@
  * 제약 준수:
  *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
  *   - 색상/간격은 A01_Home_UI_Style.css + theme.css 변수만 사용.
- *   - 공통 컴포넌트(createButton/createCard/createTag) 우선 사용.
+ *   - 공통 부품(createPublicFrame/createCard/createBadge/createButton) 우선 사용.
  *   - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
  * ========================================================================== */
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
-import { createButton, createCard, createTag } from "@ui/ui_template_elements";
+import { createBadge } from "@ui/ui_template_badge";
+import { createButton, createCard } from "@ui/ui_template_elements";
+import { createPublicFrame } from "@ui/ui_template_public_layout";
+import { createText } from "@ui/ui_template_text";
 import { navigateTo } from "../A00_Common/router";
 import { ROUTES } from "@config/config_frontend";
 import "./A01_Home_UI_Style.css";
@@ -49,57 +52,12 @@ function onA01_Home_Explore_Click(): void {
 /* -----------------------------------------------------------------------------
  * 섹션 빌더
  * -------------------------------------------------------------------------- */
-function buildHero(): HTMLElement {
-  const hero = document.createElement("section");
-  hero.className = "a01-hero";
-
-  const inner = document.createElement("div");
-  inner.className = "a01-hero__inner";
-
-  const title = document.createElement("h1");
-  title.className = "a01-hero__title";
-  title.textContent = L("A01_Home_Title");
-
-  const subtitle = document.createElement("p");
-  subtitle.className = "a01-hero__subtitle";
-  subtitle.textContent = L("A01_Home_Hero_Subtitle");
-
-  const ctas = document.createElement("div");
-  ctas.className = "a01-hero__ctas";
-  ctas.append(
-    createButton({
-      label: L("A01_Home_Hero_CtaPrimary"),
-      variant: "filled",
-      onClick: onA01_Home_GetStarted_Click,
-    }),
-    createButton({
-      label: L("A01_Home_Hero_CtaSecondary"),
-      variant: "ghost",
-      onClick: onA01_Home_Explore_Click,
-    }),
-  );
-
-  inner.append(title, subtitle, ctas);
-  hero.append(inner);
-  return hero;
-}
-
 function buildNews(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a01-section";
-
-  const heading = document.createElement("h2");
-  heading.className = "a01-section__title";
-  heading.textContent = L("A01_Home_News_SectionTitle");
-
   const list = document.createElement("div");
   list.className = "a01-news-list";
 
   for (const item of MOCK_NEWS) {
-    const row = document.createElement("div");
-    row.className = "a01-news-row";
-
-    const tag = createTag(L("A01_Home_News_Tag"), "accent");
+    const tag = createBadge(L("A01_Home_News_Tag"), "accent");
     const titleEl = document.createElement("span");
     titleEl.className = "a01-news-row__title";
     titleEl.textContent = item.title;
@@ -107,22 +65,14 @@ function buildNews(): HTMLElement {
     dateEl.className = "a01-news-row__date";
     dateEl.textContent = item.date;
 
-    row.append(tag, titleEl, dateEl);
+    const row = createCard({ body: [tag, titleEl, dateEl] });
+    row.classList.add("a01-news-row");
     list.append(row);
   }
-
-  section.append(heading, list);
-  return section;
+  return list;
 }
 
 function buildFeatures(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a01-section";
-
-  const heading = document.createElement("h2");
-  heading.className = "a01-section__title";
-  heading.textContent = L("A01_Home_Features_SectionTitle");
-
   const grid = document.createElement("div");
   grid.className = "a01-feature-grid";
 
@@ -133,24 +83,34 @@ function buildFeatures(): HTMLElement {
   ];
 
   for (const [titleKey, descKey] of features) {
-    const desc = document.createElement("p");
-    desc.className = "a01-feature__desc";
-    desc.textContent = L(descKey);
-    const card = createCard({ title: L(titleKey), body: [desc] });
+    const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
     card.classList.add("a01-feature-card");
     grid.append(card);
   }
-
-  section.append(heading, grid);
-  return section;
+  return grid;
 }
 
 /* -----------------------------------------------------------------------------
  * 페이지 진입점
  * -------------------------------------------------------------------------- */
 export function renderA01Home(root: HTMLElement): void {
-  const page = document.createElement("div");
-  page.className = "a01-home";
-  page.append(buildHero(), buildNews(), buildFeatures());
-  root.append(page);
+  const frame = createPublicFrame({
+    title: L("A01_Home_Title"),
+    lead: L("A01_Home_Hero_Subtitle"),
+    actions: [
+      createButton({
+        label: L("A01_Home_Hero_CtaPrimary"),
+        variant: "filled",
+        onClick: onA01_Home_GetStarted_Click,
+      }),
+      createButton({
+        label: L("A01_Home_Hero_CtaSecondary"),
+        variant: "ghost",
+        onClick: onA01_Home_Explore_Click,
+      }),
+    ],
+  });
+  frame.addSection(L("A01_Home_News_SectionTitle")).append(buildNews());
+  frame.addSection(L("A01_Home_Features_SectionTitle")).append(buildFeatures());
+  root.append(frame.root);
 }
diff --git a/A01_Home/A01_Home_UI_Style.css b/A01_Home/A01_Home_UI_Style.css
index bd3a21451..bc3bf0878 100644
--- a/A01_Home/A01_Home_UI_Style.css
+++ b/A01_Home/A01_Home_UI_Style.css
@@ -1,66 +1,8 @@
 /* =============================================================================
  * A01_Home_UI_Style.css
- * 홈 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
+ * 홈 페이지 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
  * ========================================================================== */
 
-.a01-home {
-  display: flex;
-  flex-direction: column;
-  gap: var(--section-gap);
-  padding-bottom: var(--spacing-64);
-}
-
-/* --- Hero --- */
-.a01-hero {
-  /* 라벤더 그라디언트는 흰 표면 아래에만: 히어로 배경으로 사용 */
-  background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
-  padding: var(--spacing-96) var(--spacing-32);
-}
-.a01-hero__inner {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--spacing-24);
-}
-.a01-hero__title {
-  font-size: var(--text-heading-lg);
-  line-height: var(--leading-heading-lg);
-  color: var(--color-deep-iris);
-  max-width: 14ch;
-}
-.a01-hero__subtitle {
-  font-size: var(--text-body);
-  line-height: var(--leading-body);
-  color: var(--color-slate);
-  max-width: 52ch;
-  margin: 0;
-}
-.a01-hero__ctas {
-  display: flex;
-  gap: var(--spacing-16);
-  margin-top: var(--spacing-8);
-}
-
-/* --- 공통 섹션 --- */
-.a01-section {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  width: 100%;
-  padding: 0 var(--spacing-32);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-24);
-}
-.a01-section__title {
-  font-size: var(--text-heading-sm);
-  line-height: var(--leading-heading-sm);
-  color: var(--color-deep-iris);
-  text-align: center;
-}
-
 /* --- News --- */
 .a01-news-list {
   display: flex;
@@ -68,21 +10,20 @@
   gap: var(--spacing-8);
 }
 .a01-news-row {
-  display: flex;
+  padding: var(--spacing-16) var(--spacing-24);
+}
+.a01-news-row > .ui-card__body {
+  flex-direction: row;
   align-items: center;
   gap: var(--spacing-16);
-  padding: var(--spacing-16) var(--spacing-24);
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
 }
 .a01-news-row__title {
   flex: 1;
-  color: var(--color-charcoal);
+  color: var(--color-text);
   font-size: var(--text-body-sm);
 }
 .a01-news-row__date {
-  color: var(--color-ash);
+  color: var(--color-text-muted);
   font-size: var(--text-caption);
 }
 
@@ -95,18 +36,9 @@
 .a01-feature-card {
   min-height: 140px;
 }
-.a01-feature__desc {
-  margin: 0;
-  color: var(--color-slate);
-  font-size: var(--text-body-sm);
-  line-height: var(--leading-body-sm);
-}
 
 @media (max-width: 900px) {
   .a01-feature-grid {
     grid-template-columns: 1fr;
   }
-  .a01-hero__title {
-    font-size: var(--text-heading);
-  }
 }
diff --git a/A02_ProgDetail/A02_ProgDetail_UI_Page.ts b/A02_ProgDetail/A02_ProgDetail_UI_Page.ts
index 595fd2494..d87533d79 100644
--- a/A02_ProgDetail/A02_ProgDetail_UI_Page.ts
+++ b/A02_ProgDetail/A02_ProgDetail_UI_Page.ts
@@ -5,12 +5,14 @@
  * 제약 준수:
  *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
  *   - 색상/간격은 A02_ProgDetail_UI_Style.css + theme.css 변수만 사용.
- *   - 공통 컴포넌트(createButton/createCard) 우선 사용.
+ *   - 공통 부품(createPublicFrame/createCard/createButton) 우선 사용.
  *   - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
  * ========================================================================== */
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
 import { createButton, createCard } from "@ui/ui_template_elements";
+import { createPublicFrame } from "@ui/ui_template_public_layout";
+import { createText } from "@ui/ui_template_text";
 import { navigateTo } from "../A00_Common/router";
 import { ROUTES } from "@config/config_frontend";
 import "./A02_ProgDetail_UI_Style.css";
@@ -30,40 +32,7 @@ function onA02_ProgDetail_Start_Click(): void {
 /* -----------------------------------------------------------------------------
  * 섹션 빌더
  * -------------------------------------------------------------------------- */
-function buildHero(): HTMLElement {
-  const hero = document.createElement("section");
-  hero.className = "a02-hero";
-
-  const inner = document.createElement("div");
-  inner.className = "a02-hero__inner";
-
-  const title = document.createElement("h1");
-  title.className = "a02-hero__title";
-  title.textContent = L("A02_ProgDetail_Title");
-
-  const subtitle = document.createElement("p");
-  subtitle.className = "a02-hero__subtitle";
-  subtitle.textContent = L("A02_ProgDetail_Hero_Subtitle");
-
-  const cta = createButton({
-    label: L("A02_ProgDetail_Hero_Cta"),
-    variant: "filled",
-    onClick: onA02_ProgDetail_Start_Click,
-  });
-
-  inner.append(title, subtitle, cta);
-  hero.append(inner);
-  return hero;
-}
-
 function buildWorkflow(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a02-section";
-
-  const heading = document.createElement("h2");
-  heading.className = "a02-section__title";
-  heading.textContent = L("A02_ProgDetail_Workflow_SectionTitle");
-
   const list = document.createElement("div");
   list.className = "a02-workflow-list";
 
@@ -77,9 +46,6 @@ function buildWorkflow(): HTMLElement {
   ];
 
   steps.forEach(([titleKey, descKey], index) => {
-    const row = document.createElement("div");
-    row.className = "a02-workflow-row";
-
     const badge = document.createElement("span");
     badge.className = "a02-workflow-row__badge";
     badge.textContent = String(index + 1);
@@ -91,27 +57,15 @@ function buildWorkflow(): HTMLElement {
     stepTitle.className = "a02-workflow-row__title";
     stepTitle.textContent = L(titleKey);
 
-    const stepDesc = document.createElement("p");
-    stepDesc.className = "a02-workflow-row__desc";
-    stepDesc.textContent = L(descKey);
-
-    text.append(stepTitle, stepDesc);
-    row.append(badge, text);
+    text.append(stepTitle, createText(L(descKey), "muted", 14));
+    const row = createCard({ body: [badge, text] });
+    row.classList.add("a02-workflow-row");
     list.append(row);
   });
-
-  section.append(heading, list);
-  return section;
+  return list;
 }
 
 function buildTech(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a02-section";
-
-  const heading = document.createElement("h2");
-  heading.className = "a02-section__title";
-  heading.textContent = L("A02_ProgDetail_Tech_SectionTitle");
-
   const grid = document.createElement("div");
   grid.className = "a02-tech-grid";
 
@@ -122,24 +76,31 @@ function buildTech(): HTMLElement {
   ];
 
   for (const [titleKey, descKey] of techs) {
-    const desc = document.createElement("p");
-    desc.className = "a02-tech__desc";
-    desc.textContent = L(descKey);
-    const card = createCard({ title: L(titleKey), body: [desc] });
+    const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
     card.classList.add("a02-tech-card");
     grid.append(card);
   }
-
-  section.append(heading, grid);
-  return section;
+  return grid;
 }
 
 /* -----------------------------------------------------------------------------
  * 페이지 진입점
  * -------------------------------------------------------------------------- */
 export function renderA02ProgDetail(root: HTMLElement): void {
-  const page = document.createElement("div");
-  page.className = "a02-prog-detail";
-  page.append(buildHero(), buildWorkflow(), buildTech());
-  root.append(page);
+  const frame = createPublicFrame({
+    title: L("A02_ProgDetail_Title"),
+    lead: L("A02_ProgDetail_Hero_Subtitle"),
+    actions: [
+      createButton({
+        label: L("A02_ProgDetail_Hero_Cta"),
+        variant: "filled",
+        onClick: onA02_ProgDetail_Start_Click,
+      }),
+    ],
+    wide: true,
+  });
+  frame.root.classList.add("a02-prog-detail");
+  frame.addSection(L("A02_ProgDetail_Workflow_SectionTitle")).append(buildWorkflow());
+  frame.addSection(L("A02_ProgDetail_Tech_SectionTitle")).append(buildTech());
+  root.append(frame.root);
 }
diff --git a/A02_ProgDetail/A02_ProgDetail_UI_Style.css b/A02_ProgDetail/A02_ProgDetail_UI_Style.css
index 0e6d57f2c..7b8d85415 100644
--- a/A02_ProgDetail/A02_ProgDetail_UI_Style.css
+++ b/A02_ProgDetail/A02_ProgDetail_UI_Style.css
@@ -1,58 +1,11 @@
 /* =============================================================================
  * A02_ProgDetail_UI_Style.css
- * 프로그램 상세 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
+ * 프로그램 상세 페이지 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
  * ========================================================================== */
 
-.a02-prog-detail {
-  display: flex;
-  flex-direction: column;
-  gap: var(--section-gap);
-  padding-bottom: var(--spacing-64);
-}
-
-/* --- Hero --- */
-.a02-hero {
-  background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
-  padding: var(--spacing-96) var(--spacing-32);
-}
-.a02-hero__inner {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--spacing-24);
-}
-.a02-hero__title {
-  font-size: var(--text-heading-lg);
-  line-height: var(--leading-heading-lg);
-  color: var(--color-deep-iris);
-  max-width: 18ch;
-}
-.a02-hero__subtitle {
-  font-size: var(--text-body);
-  line-height: var(--leading-body);
-  color: var(--color-slate);
-  max-width: 56ch;
-  margin: 0;
-}
-
-/* --- 공통 섹션 --- */
-.a02-section {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  width: 100%;
-  padding: 0 var(--spacing-32);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-24);
-}
-.a02-section__title {
-  font-size: var(--text-heading-sm);
-  line-height: var(--leading-heading-sm);
-  color: var(--color-deep-iris);
-  text-align: center;
+/* 단추 하나뿐인 머리 — 단추 줄 위 여백 없음 */
+.a02-prog-detail .ui-public-frame__actions {
+  margin-top: 0;
 }
 
 /* --- Workflow (번호 배지 + 텍스트) --- */
@@ -61,14 +14,10 @@
   flex-direction: column;
   gap: var(--spacing-16);
 }
-.a02-workflow-row {
-  display: flex;
+.a02-workflow-row > .ui-card__body {
+  flex-direction: row;
   align-items: flex-start;
   gap: var(--spacing-24);
-  padding: var(--spacing-24);
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
 }
 .a02-workflow-row__badge {
   flex-shrink: 0;
@@ -90,15 +39,9 @@
 }
 .a02-workflow-row__title {
   font-size: var(--text-body);
-  color: var(--color-charcoal);
+  color: var(--color-text);
   margin: 0;
 }
-.a02-workflow-row__desc {
-  margin: 0;
-  color: var(--color-slate);
-  font-size: var(--text-body-sm);
-  line-height: var(--leading-body-sm);
-}
 
 /* --- Tech --- */
 .a02-tech-grid {
@@ -109,18 +52,9 @@
 .a02-tech-card {
   min-height: 140px;
 }
-.a02-tech__desc {
-  margin: 0;
-  color: var(--color-slate);
-  font-size: var(--text-body-sm);
-  line-height: var(--leading-body-sm);
-}
 
 @media (max-width: 900px) {
   .a02-tech-grid {
     grid-template-columns: 1fr;
   }
-  .a02-hero__title {
-    font-size: var(--text-heading);
-  }
 }
diff --git a/A03_CompDetail/A03_CompDetail_UI_Page.ts b/A03_CompDetail/A03_CompDetail_UI_Page.ts
index 0e1bb5bf8..024508d5e 100644
--- a/A03_CompDetail/A03_CompDetail_UI_Page.ts
+++ b/A03_CompDetail/A03_CompDetail_UI_Page.ts
@@ -5,11 +5,13 @@
  * 제약 준수:
  *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
  *   - 색상/간격은 A03_CompDetail_UI_Style.css + theme.css 변수만 사용.
- *   - 공통 컴포넌트(createCard) 우선 사용.
+ *   - 공통 부품(createPublicFrame/createCard) 우선 사용.
  * ========================================================================== */
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
 import { createCard } from "@ui/ui_template_elements";
+import { createPublicFrame } from "@ui/ui_template_public_layout";
+import { createText } from "@ui/ui_template_text";
 import "./A03_CompDetail_UI_Style.css";
 
 /** locale 헬퍼 */
@@ -20,50 +22,14 @@ function L(key: keyof typeof ui_locales): string {
 /* -----------------------------------------------------------------------------
  * 섹션 빌더
  * -------------------------------------------------------------------------- */
-function buildHero(): HTMLElement {
-  const hero = document.createElement("section");
-  hero.className = "a03-hero";
-
-  const inner = document.createElement("div");
-  inner.className = "a03-hero__inner";
-
-  const title = document.createElement("h1");
-  title.className = "a03-hero__title";
-  title.textContent = L("A03_CompDetail_Title");
-
-  const subtitle = document.createElement("p");
-  subtitle.className = "a03-hero__subtitle";
-  subtitle.textContent = L("A03_CompDetail_Hero_Subtitle");
-
-  inner.append(title, subtitle);
-  hero.append(inner);
-  return hero;
-}
-
 function buildMission(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a03-section";
-
-  const heading = document.createElement("h2");
-  heading.className = "a03-section__title";
-  heading.textContent = L("A03_CompDetail_Mission_SectionTitle");
-
   const body = document.createElement("p");
   body.className = "a03-mission__body";
   body.textContent = L("A03_CompDetail_Mission_Body");
-
-  section.append(heading, body);
-  return section;
+  return body;
 }
 
 function buildValues(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a03-section";
-
-  const heading = document.createElement("h2");
-  heading.className = "a03-section__title";
-  heading.textContent = L("A03_CompDetail_Value_SectionTitle");
-
   const grid = document.createElement("div");
   grid.className = "a03-value-grid";
 
@@ -74,40 +40,31 @@ function buildValues(): HTMLElement {
   ];
 
   for (const [titleKey, descKey] of values) {
-    const desc = document.createElement("p");
-    desc.className = "a03-value__desc";
-    desc.textContent = L(descKey);
-    const card = createCard({ title: L(titleKey), body: [desc] });
+    const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
     card.classList.add("a03-value-card");
     grid.append(card);
   }
-
-  section.append(heading, grid);
-  return section;
+  return grid;
 }
 
 function buildContact(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a03-section";
-
-  const heading = document.createElement("h2");
-  heading.className = "a03-section__title";
-  heading.textContent = L("A03_CompDetail_Contact_SectionTitle");
-
   const email = document.createElement("p");
   email.className = "a03-contact__email";
   email.textContent = L("A03_CompDetail_Contact_Email");
-
-  section.append(heading, email);
-  return section;
+  return email;
 }
 
 /* -----------------------------------------------------------------------------
  * 페이지 진입점
  * -------------------------------------------------------------------------- */
 export function renderA03CompDetail(root: HTMLElement): void {
-  const page = document.createElement("div");
-  page.className = "a03-comp-detail";
-  page.append(buildHero(), buildMission(), buildValues(), buildContact());
-  root.append(page);
+  const frame = createPublicFrame({
+    title: L("A03_CompDetail_Title"),
+    lead: L("A03_CompDetail_Hero_Subtitle"),
+    wide: true,
+  });
+  frame.addSection(L("A03_CompDetail_Mission_SectionTitle")).append(buildMission());
+  frame.addSection(L("A03_CompDetail_Value_SectionTitle")).append(buildValues());
+  frame.addSection(L("A03_CompDetail_Contact_SectionTitle")).append(buildContact());
+  root.append(frame.root);
 }
diff --git a/A03_CompDetail/A03_CompDetail_UI_Style.css b/A03_CompDetail/A03_CompDetail_UI_Style.css
index 5fb77e907..97ac0c55f 100644
--- a/A03_CompDetail/A03_CompDetail_UI_Style.css
+++ b/A03_CompDetail/A03_CompDetail_UI_Style.css
@@ -1,66 +1,14 @@
 /* =============================================================================
  * A03_CompDetail_UI_Style.css
- * 회사 상세 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
+ * 회사 상세 페이지 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
  * ========================================================================== */
 
-.a03-comp-detail {
-  display: flex;
-  flex-direction: column;
-  gap: var(--section-gap);
-  padding-bottom: var(--spacing-64);
-}
-
-/* --- Hero --- */
-.a03-hero {
-  background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
-  padding: var(--spacing-96) var(--spacing-32);
-}
-.a03-hero__inner {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--spacing-24);
-}
-.a03-hero__title {
-  font-size: var(--text-heading-lg);
-  line-height: var(--leading-heading-lg);
-  color: var(--color-deep-iris);
-  max-width: 18ch;
-}
-.a03-hero__subtitle {
-  font-size: var(--text-body);
-  line-height: var(--leading-body);
-  color: var(--color-slate);
-  max-width: 56ch;
-  margin: 0;
-}
-
-/* --- 공통 섹션 --- */
-.a03-section {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  width: 100%;
-  padding: 0 var(--spacing-32);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-24);
-}
-.a03-section__title {
-  font-size: var(--text-heading-sm);
-  line-height: var(--leading-heading-sm);
-  color: var(--color-deep-iris);
-  text-align: center;
-}
-
 /* --- Mission --- */
 .a03-mission__body {
   margin: 0 auto;
   max-width: 60ch;
   text-align: center;
-  color: var(--color-slate);
+  color: var(--color-text-secondary);
   font-size: var(--text-body);
   line-height: var(--leading-body);
 }
@@ -74,18 +22,12 @@
 .a03-value-card {
   min-height: 140px;
 }
-.a03-value__desc {
-  margin: 0;
-  color: var(--color-slate);
-  font-size: var(--text-body-sm);
-  line-height: var(--leading-body-sm);
-}
 
 /* --- Contact --- */
 .a03-contact__email {
   margin: 0;
   text-align: center;
-  color: var(--color-charcoal);
+  color: var(--color-text);
   font-size: var(--text-body);
 }
 
@@ -93,7 +35,4 @@
   .a03-value-grid {
     grid-template-columns: 1fr;
   }
-  .a03-hero__title {
-    font-size: var(--text-heading);
-  }
 }
diff --git a/A04_NewsHistory/A04_NewsHistory_UI_Page.ts b/A04_NewsHistory/A04_NewsHistory_UI_Page.ts
index ab4dbadab..d237b8275 100644
--- a/A04_NewsHistory/A04_NewsHistory_UI_Page.ts
+++ b/A04_NewsHistory/A04_NewsHistory_UI_Page.ts
@@ -5,12 +5,15 @@
  * 제약 준수:
  *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
  *   - 색상/간격은 A04_NewsHistory_UI_Style.css + theme.css 변수만 사용.
- *   - 공통 컴포넌트(createTag) 우선 사용.
+ *   - 공통 부품(createPublicFrame/createCard/createBadge) 우선 사용.
  *   - Mock 데이터는 나중에 GET /api/a04/history로 교체.
  * ========================================================================== */
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
-import { createTag, type TagVariant } from "@ui/ui_template_elements";
+import { createBadge, type BadgeTone } from "@ui/ui_template_badge";
+import { createCard } from "@ui/ui_template_elements";
+import { createEmpty } from "@ui/ui_template_empty";
+import { createPublicFrame } from "@ui/ui_template_public_layout";
 import "./A04_NewsHistory_UI_Style.css";
 
 /** locale 헬퍼 */
@@ -38,7 +41,7 @@ const MOCK_HISTORY: HistoryItem[] = [
 ];
 
 /** 이력 종류별 태그 변형/라벨 매핑 */
-const KIND_META: Record<HistoryKind, { variant: TagVariant; labelKey: keyof typeof ui_locales }> = {
+const KIND_META: Record<HistoryKind, { variant: BadgeTone; labelKey: keyof typeof ui_locales }> = {
   feature: { variant: "accent", labelKey: "A04_NewsHistory_Tag_Feature" },
   fix: { variant: "success", labelKey: "A04_NewsHistory_Tag_Fix" },
   notice: { variant: "neutral", labelKey: "A04_NewsHistory_Tag_Notice" },
@@ -47,47 +50,14 @@ const KIND_META: Record<HistoryKind, { variant: TagVariant; labelKey: keyof type
 /* -----------------------------------------------------------------------------
  * 섹션 빌더
  * -------------------------------------------------------------------------- */
-function buildHero(): HTMLElement {
-  const hero = document.createElement("section");
-  hero.className = "a04-hero";
-
-  const inner = document.createElement("div");
-  inner.className = "a04-hero__inner";
-
-  const title = document.createElement("h1");
-  title.className = "a04-hero__title";
-  title.textContent = L("A04_NewsHistory_Title");
-
-  const subtitle = document.createElement("p");
-  subtitle.className = "a04-hero__subtitle";
-  subtitle.textContent = L("A04_NewsHistory_Hero_Subtitle");
-
-  inner.append(title, subtitle);
-  hero.append(inner);
-  return hero;
-}
-
 function buildTimeline(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a04-section";
+  if (MOCK_HISTORY.length === 0) return createEmpty({ text: L("A04_NewsHistory_Empty") });
 
   const list = document.createElement("div");
   list.className = "a04-timeline";
-
-  if (MOCK_HISTORY.length === 0) {
-    const empty = document.createElement("p");
-    empty.className = "a04-timeline__empty";
-    empty.textContent = L("A04_NewsHistory_Empty");
-    section.append(empty);
-    return section;
-  }
-
   for (const item of MOCK_HISTORY) {
     const meta = KIND_META[item.kind];
-    const row = document.createElement("div");
-    row.className = "a04-timeline-row";
-
-    const tag = createTag(L(meta.labelKey), meta.variant);
+    const tag = createBadge(L(meta.labelKey), meta.variant);
 
     const titleEl = document.createElement("span");
     titleEl.className = "a04-timeline-row__title";
@@ -97,20 +67,22 @@ function buildTimeline(): HTMLElement {
     dateEl.className = "a04-timeline-row__date";
     dateEl.textContent = item.date;
 
-    row.append(tag, titleEl, dateEl);
+    const row = createCard({ body: [tag, titleEl, dateEl] });
+    row.classList.add("a04-timeline-row");
     list.append(row);
   }
-
-  section.append(list);
-  return section;
+  return list;
 }
 
 /* -----------------------------------------------------------------------------
  * 페이지 진입점
  * -------------------------------------------------------------------------- */
 export function renderA04NewsHistory(root: HTMLElement): void {
-  const page = document.createElement("div");
-  page.className = "a04-news-history";
-  page.append(buildHero(), buildTimeline());
-  root.append(page);
+  const frame = createPublicFrame({
+    title: L("A04_NewsHistory_Title"),
+    lead: L("A04_NewsHistory_Hero_Subtitle"),
+    wide: true,
+  });
+  frame.addSection().append(buildTimeline());
+  root.append(frame.root);
 }
diff --git a/A04_NewsHistory/A04_NewsHistory_UI_Style.css b/A04_NewsHistory/A04_NewsHistory_UI_Style.css
index 4cb55bcd8..2562fc2db 100644
--- a/A04_NewsHistory/A04_NewsHistory_UI_Style.css
+++ b/A04_NewsHistory/A04_NewsHistory_UI_Style.css
@@ -1,54 +1,8 @@
 /* =============================================================================
  * A04_NewsHistory_UI_Style.css
- * 최신소식/개선이력 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
+ * 최신소식 · 개선 이력 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
  * ========================================================================== */
 
-.a04-news-history {
-  display: flex;
-  flex-direction: column;
-  gap: var(--section-gap);
-  padding-bottom: var(--spacing-64);
-}
-
-/* --- Hero --- */
-.a04-hero {
-  background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
-  padding: var(--spacing-96) var(--spacing-32);
-}
-.a04-hero__inner {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--spacing-24);
-}
-.a04-hero__title {
-  font-size: var(--text-heading-lg);
-  line-height: var(--leading-heading-lg);
-  color: var(--color-deep-iris);
-  max-width: 18ch;
-}
-.a04-hero__subtitle {
-  font-size: var(--text-body);
-  line-height: var(--leading-body);
-  color: var(--color-slate);
-  max-width: 56ch;
-  margin: 0;
-}
-
-/* --- 공통 섹션 --- */
-.a04-section {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  width: 100%;
-  padding: 0 var(--spacing-32);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-24);
-}
-
 /* --- Timeline --- */
 .a04-timeline {
   display: flex;
@@ -56,31 +10,19 @@
   gap: var(--spacing-8);
 }
 .a04-timeline-row {
-  display: flex;
+  padding: var(--spacing-16) var(--spacing-24);
+}
+.a04-timeline-row > .ui-card__body {
+  flex-direction: row;
   align-items: center;
   gap: var(--spacing-16);
-  padding: var(--spacing-16) var(--spacing-24);
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
 }
 .a04-timeline-row__title {
   flex: 1;
-  color: var(--color-charcoal);
+  color: var(--color-text);
   font-size: var(--text-body-sm);
 }
 .a04-timeline-row__date {
-  color: var(--color-ash);
+  color: var(--color-text-muted);
   font-size: var(--text-caption);
 }
-.a04-timeline__empty {
-  text-align: center;
-  color: var(--color-slate);
-  font-size: var(--text-body);
-}
-
-@media (max-width: 900px) {
-  .a04-hero__title {
-    font-size: var(--text-heading);
-  }
-}
diff --git a/A05_EduDetail/A05_EduDetail_UI_Page.ts b/A05_EduDetail/A05_EduDetail_UI_Page.ts
index 2012da88e..b12a561ae 100644
--- a/A05_EduDetail/A05_EduDetail_UI_Page.ts
+++ b/A05_EduDetail/A05_EduDetail_UI_Page.ts
@@ -5,12 +5,14 @@
  * 제약 준수:
  *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
  *   - 색상/간격은 A05_EduDetail_UI_Style.css + theme.css 변수만 사용.
- *   - 공통 컴포넌트(createButton/createCard) 우선 사용.
+ *   - 공통 부품(createPublicFrame/createCard/createButton) 우선 사용.
  *   - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
  * ========================================================================== */
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
 import { createButton, createCard } from "@ui/ui_template_elements";
+import { createPublicFrame } from "@ui/ui_template_public_layout";
+import { createText } from "@ui/ui_template_text";
 import { navigateTo } from "../A00_Common/router";
 import { ROUTES } from "@config/config_frontend";
 import "./A05_EduDetail_UI_Style.css";
@@ -30,34 +32,7 @@ function onA05_EduDetail_Inquiry_Click(): void {
 /* -----------------------------------------------------------------------------
  * 섹션 빌더
  * -------------------------------------------------------------------------- */
-function buildHero(): HTMLElement {
-  const hero = document.createElement("section");
-  hero.className = "a05-hero";
-
-  const inner = document.createElement("div");
-  inner.className = "a05-hero__inner";
-
-  const title = document.createElement("h1");
-  title.className = "a05-hero__title";
-  title.textContent = L("A05_EduDetail_Title");
-
-  const subtitle = document.createElement("p");
-  subtitle.className = "a05-hero__subtitle";
-  subtitle.textContent = L("A05_EduDetail_Hero_Subtitle");
-
-  inner.append(title, subtitle);
-  hero.append(inner);
-  return hero;
-}
-
 function buildCourses(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a05-section";
-
-  const heading = document.createElement("h2");
-  heading.className = "a05-section__title";
-  heading.textContent = L("A05_EduDetail_Course_SectionTitle");
-
   const grid = document.createElement("div");
   grid.className = "a05-course-grid";
 
@@ -68,38 +43,31 @@ function buildCourses(): HTMLElement {
   ];
 
   for (const [titleKey, descKey] of courses) {
-    const desc = document.createElement("p");
-    desc.className = "a05-course__desc";
-    desc.textContent = L(descKey);
-    const card = createCard({ title: L(titleKey), body: [desc] });
+    const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
     card.classList.add("a05-course-card");
     grid.append(card);
   }
-
-  section.append(heading, grid);
-  return section;
-}
-
-function buildCta(): HTMLElement {
-  const section = document.createElement("section");
-  section.className = "a05-section a05-cta";
-
-  section.append(
-    createButton({
-      label: L("A05_EduDetail_Cta"),
-      variant: "filled",
-      onClick: onA05_EduDetail_Inquiry_Click,
-    }),
-  );
-  return section;
+  return grid;
 }
 
 /* -----------------------------------------------------------------------------
  * 페이지 진입점
  * -------------------------------------------------------------------------- */
 export function renderA05EduDetail(root: HTMLElement): void {
-  const page = document.createElement("div");
-  page.className = "a05-edu-detail";
-  page.append(buildHero(), buildCourses(), buildCta());
-  root.append(page);
+  const frame = createPublicFrame({
+    title: L("A05_EduDetail_Title"),
+    lead: L("A05_EduDetail_Hero_Subtitle"),
+    wide: true,
+  });
+  frame.addSection(L("A05_EduDetail_Course_SectionTitle")).append(buildCourses());
+  const cta = frame.addSection();
+  cta.classList.add("a05-cta");
+  cta.append(
+    createButton({
+      label: L("A05_EduDetail_Cta"),
+      variant: "filled",
+      onClick: onA05_EduDetail_Inquiry_Click,
+    }),
+  );
+  root.append(frame.root);
 }
diff --git a/A05_EduDetail/A05_EduDetail_UI_Style.css b/A05_EduDetail/A05_EduDetail_UI_Style.css
index cc025e28b..c36e0df2b 100644
--- a/A05_EduDetail/A05_EduDetail_UI_Style.css
+++ b/A05_EduDetail/A05_EduDetail_UI_Style.css
@@ -1,60 +1,8 @@
 /* =============================================================================
  * A05_EduDetail_UI_Style.css
- * 교육 상세 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
+ * 교육 상세 페이지 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
  * ========================================================================== */
 
-.a05-edu-detail {
-  display: flex;
-  flex-direction: column;
-  gap: var(--section-gap);
-  padding-bottom: var(--spacing-64);
-}
-
-/* --- Hero --- */
-.a05-hero {
-  background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
-  padding: var(--spacing-96) var(--spacing-32);
-}
-.a05-hero__inner {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--spacing-24);
-}
-.a05-hero__title {
-  font-size: var(--text-heading-lg);
-  line-height: var(--leading-heading-lg);
-  color: var(--color-deep-iris);
-  max-width: 18ch;
-}
-.a05-hero__subtitle {
-  font-size: var(--text-body);
-  line-height: var(--leading-body);
-  color: var(--color-slate);
-  max-width: 56ch;
-  margin: 0;
-}
-
-/* --- 공통 섹션 --- */
-.a05-section {
-  max-width: var(--page-max-width);
-  margin: 0 auto;
-  width: 100%;
-  padding: 0 var(--spacing-32);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-24);
-}
-.a05-section__title {
-  font-size: var(--text-heading-sm);
-  line-height: var(--leading-heading-sm);
-  color: var(--color-deep-iris);
-  text-align: center;
-}
-
 /* --- Courses --- */
 .a05-course-grid {
   display: grid;
@@ -64,12 +12,6 @@
 .a05-course-card {
   min-height: 140px;
 }
-.a05-course__desc {
-  margin: 0;
-  color: var(--color-slate);
-  font-size: var(--text-body-sm);
-  line-height: var(--leading-body-sm);
-}
 
 /* --- CTA --- */
 .a05-cta {
@@ -80,7 +22,4 @@
   .a05-course-grid {
     grid-template-columns: 1fr;
   }
-  .a05-hero__title {
-    font-size: var(--text-heading);
-  }
 }
diff --git a/A05_EduDetail/guide/B03/_scenes.json b/A05_EduDetail/guide/B03/_scenes.json
index a3d912b18..3d6328975 100644
--- a/A05_EduDetail/guide/B03/_scenes.json
+++ b/A05_EduDetail/guide/B03/_scenes.json
@@ -38,11 +38,11 @@
       },
       {
         "n": 6,
-        "sel": ".b03-file__columns > :nth-child(1) .b03-file__group-title"
+        "sel": ".b03-file__columns > :nth-child(1) .ui-panel-head__title"
       },
       {
         "n": 7,
-        "sel": ".b03-file__columns > :nth-child(2) .b03-file__group-title"
+        "sel": ".b03-file__columns > :nth-child(2) .ui-panel-head__title"
       }
     ]
   },
@@ -215,7 +215,7 @@
         "wait": ".b03-file__lasfree"
       },
       {
-        "click": ".b03-file__lasfree input"
+        "click": ".b03-file__lasfree"
       },
       {
         "wait_ms": 800
diff --git a/A06_Login/A06_Login_UI_Auth_Page.ts b/A06_Login/A06_Login_UI_Auth_Page.ts
index 45e92a9af..36497618f 100644
--- a/A06_Login/A06_Login_UI_Auth_Page.ts
+++ b/A06_Login/A06_Login_UI_Auth_Page.ts
@@ -2,6 +2,7 @@ import { ROUTES } from "@config/config_frontend";
 import { isBlank, isValidEmail } from "@util/common_util_validate";
 import {
   createButton,
+  createCard,
   createInputField,
   hideLoadingOverlay,
   showLoadingOverlay,
@@ -67,8 +68,6 @@ function clearOtpPending(): void {
 export function renderA06Login(root: HTMLElement): void {
   const page = document.createElement("div");
   page.className = "a06-login";
-  const card = document.createElement("div");
-  card.className = "a06-login__card";
   const title = document.createElement("h1");
   title.className = "a06-login__title";
   title.textContent = L("A06_Login_Title");
@@ -215,7 +214,8 @@ export function renderA06Login(root: HTMLElement): void {
     variant: "ghost",
     onClick: () => navigateTo(ROUTES.A07_REGISTER),
   });
-  card.append(title, form, register);
+  const card = createCard({ body: [title, form, register] });
+  card.classList.add("a06-login__card");
   page.append(card);
   root.append(page);
 
diff --git a/A06_Login/A06_Login_UI_Style.css b/A06_Login/A06_Login_UI_Style.css
index b88717ea5..9a56c358f 100644
--- a/A06_Login/A06_Login_UI_Style.css
+++ b/A06_Login/A06_Login_UI_Style.css
@@ -1,6 +1,6 @@
 /* =============================================================================
  * A06_Login_UI_Style.css
- * 로그인 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
+ * 로그인 페이지 고유 배치 — 카드 겉은 공용 부품(카드)이 냄.
  * ========================================================================== */
 
 .a06-login {
@@ -13,29 +13,16 @@
 .a06-login__card {
   width: 100%;
   max-width: 400px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
   padding: var(--spacing-40);
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  box-shadow: var(--shadow-sm);
 }
 
 .a06-login__title {
   font-size: var(--text-heading-sm);
   line-height: var(--leading-heading-sm);
-  color: var(--color-deep-iris);
+  color: var(--color-text);
   text-align: center;
   margin: 0;
 }
-.a06-login__subtitle {
-  font-size: var(--text-body-sm);
-  color: var(--color-slate);
-  text-align: center;
-  margin: 0 0 var(--spacing-8);
-}
 
 .a06-login__form {
   display: flex;
@@ -50,10 +37,3 @@
 .a06-login__otp-actions > .ui-btn {
   flex: 1;
 }
-.a06-login__submit {
-  width: 100%;
-  margin-top: var(--spacing-8);
-}
-.a06-login__link {
-  width: 100%;
-}
diff --git a/A07_Register/A07_Register_UI_Auth_Page.ts b/A07_Register/A07_Register_UI_Auth_Page.ts
index 4dd8a8097..a86591cfd 100644
--- a/A07_Register/A07_Register_UI_Auth_Page.ts
+++ b/A07_Register/A07_Register_UI_Auth_Page.ts
@@ -2,11 +2,14 @@ import { ROUTES } from "@config/config_frontend";
 import { hasMinLength, isBlank, isValidEmail } from "@util/common_util_validate";
 import {
   createButton,
+  createCard,
   createInputField,
   hideLoadingOverlay,
   showLoadingOverlay,
   showToast,
 } from "@ui/ui_template_elements";
+import { createCheckbox } from "@ui/ui_template_checkbox";
+import { attachCollapsible } from "@ui/ui_template_collapsible";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { navigateTo } from "../A00_Common/router";
 import { requestRegistration, verifyRegistration } from "./A07_Register_Api_Fetch";
@@ -22,38 +25,29 @@ interface AgreementField {
 
 function checkboxWithAccordion(label: string, contentText: string): AgreementField {
   const container = document.createElement("div");
-  container.className = "a07-register__agreement";
+  container.className = "ui-collapsible is-collapsed a07-register__agreement";
 
   const summary = document.createElement("div");
-  summary.className = "a07-register__agreement-summary";
+  summary.className = "ui-collapsible__title a07-register__agreement-summary";
 
-  const input = document.createElement("input");
-  input.type = "checkbox";
+  const box = createCheckbox("");
+  // 체크 상자를 누를 땐 접힘이 바뀌지 않게 — 줄의 나머지를 누르면 약관이 펴짐
+  box.root.addEventListener("click", (e) => e.stopPropagation());
 
   const labelSpan = document.createElement("span");
   labelSpan.className = "a07-register__agreement-label";
   labelSpan.textContent = label;
 
-  summary.append(input, labelSpan);
+  summary.append(box.root, labelSpan);
 
-  const details = document.createElement("details");
-  details.className = "a07-register__agreement-details";
+  const content = document.createElement("div");
+  content.className = "a07-register__agreement-content";
+  content.textContent = contentText;
 
-  const detailsContent = document.createElement("div");
-  detailsContent.className = "a07-register__agreement-content";
-  detailsContent.textContent = contentText;
+  container.append(summary, content);
+  attachCollapsible(container);
 
-  details.appendChild(detailsContent);
-
-  summary.addEventListener("click", (e) => {
-    if (e.target !== input) {
-      details.open = !details.open;
-    }
-  });
-
-  container.append(summary, details);
-
-  return { root: container, input };
+  return { root: container, input: box.input };
 }
 
 async function loadAgreementText(filename: string): Promise<string> {
@@ -69,8 +63,6 @@ async function loadAgreementText(filename: string): Promise<string> {
 export function renderA07Register(root: HTMLElement): void {
   const page = document.createElement("div");
   page.className = "a07-register";
-  const card = document.createElement("div");
-  card.className = "a07-register__card";
   const title = document.createElement("h1");
   title.className = "a07-register__title";
   title.textContent = L("A07_Register_Title");
@@ -210,7 +202,8 @@ export function renderA07Register(root: HTMLElement): void {
       variant: "ghost",
       onClick: () => navigateTo(ROUTES.A06_LOGIN),
     });
-    card.append(title, form, login);
+    const card = createCard({ body: [title, form, login] });
+    card.classList.add("a07-register__card");
     page.append(card);
     root.append(page);
   });
diff --git a/A07_Register/A07_Register_UI_Page.ts b/A07_Register/A07_Register_UI_Page.ts
deleted file mode 100644
index c9adb23be..000000000
--- a/A07_Register/A07_Register_UI_Page.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-/* =============================================================================
- * A07_Register_UI_Page.ts
- * 로그인 전 07: 회원가입 (회사명 + 이름 + 이메일 + 비밀번호 폼)
- *
- * 제약 준수:
- *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
- *   - 색상/간격은 A07_Register_UI_Style.css + theme.css 변수만 사용.
- *   - 공통 컴포넌트(createButton/createInputField) 우선 사용.
- *   - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
- *   - 백엔드 전송 전 1차 유효성 검사 (frontend.md §4).
- * ========================================================================== */
-
-import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
-import { createButton, createInputField } from "@ui/ui_template_elements";
-import { isBlank, isValidEmail, hasMinLength } from "@util/common_util_validate";
-import { navigateTo } from "../A00_Common/router";
-import { ROUTES } from "@config/config_frontend";
-import "./A07_Register_UI_Style.css";
-
-/** locale 헬퍼 */
-function L(key: keyof typeof ui_locales): string {
-  return ui_locales[key][currentLanguageIndex];
-}
-
-/** 비밀번호 최소 길이 */
-const PASSWORD_MIN_LENGTH = 8;
-
-/* -----------------------------------------------------------------------------
- * 페이지 진입점
- * -------------------------------------------------------------------------- */
-export function renderA07Register(root: HTMLElement): void {
-  const page = document.createElement("div");
-  page.className = "a07-register";
-
-  const card = document.createElement("div");
-  card.className = "a07-register__card";
-
-  const title = document.createElement("h1");
-  title.className = "a07-register__title";
-  title.textContent = L("A07_Register_Title");
-
-  const subtitle = document.createElement("p");
-  subtitle.className = "a07-register__subtitle";
-  subtitle.textContent = L("A07_Register_Subtitle");
-
-  // 입력 필드
-  const companyField = createInputField({
-    label: L("A07_Register_Field_Company"),
-    placeholder: L("A07_Register_Field_Company_Placeholder"),
-    type: "text",
-    required: true,
-  });
-  const nameField = createInputField({
-    label: L("A07_Register_Field_Name"),
-    placeholder: L("A07_Register_Field_Name_Placeholder"),
-    type: "text",
-    required: true,
-  });
-  const emailField = createInputField({
-    label: L("A07_Register_Field_Email"),
-    placeholder: L("A07_Register_Field_Email_Placeholder"),
-    type: "email",
-    required: true,
-  });
-  const passwordField = createInputField({
-    label: L("A07_Register_Field_Password"),
-    placeholder: L("A07_Register_Field_Password_Placeholder"),
-    type: "password",
-    required: true,
-  });
-
-  const form = document.createElement("form");
-  form.className = "a07-register__form";
-  form.noValidate = true;
-
-  const submitBtn = createButton({
-    label: L("A07_Register_Submit"),
-    variant: "filled",
-    type: "submit",
-  });
-  submitBtn.classList.add("a07-register__submit");
-
-  /* 이벤트 핸들러: 제출 시 1차 유효성 검사 */
-  function onA07_Register_Submit_Click(event: Event): void {
-    event.preventDefault();
-    [companyField, nameField, emailField, passwordField].forEach((f) => f.setError());
-
-    const company = companyField.input.value;
-    const name = nameField.input.value;
-    const email = emailField.input.value;
-    const password = passwordField.input.value;
-
-    // 필수값 검사
-    let hasError = false;
-    if (isBlank(company)) {
-      companyField.setError(L("A07_Register_Error_Required"));
-      hasError = true;
-    }
-    if (isBlank(name)) {
-      nameField.setError(L("A07_Register_Error_Required"));
-      hasError = true;
-    }
-    if (isBlank(email)) {
-      emailField.setError(L("A07_Register_Error_Required"));
-      hasError = true;
-    }
-    if (isBlank(password)) {
-      passwordField.setError(L("A07_Register_Error_Required"));
-      hasError = true;
-    }
-    if (hasError) return;
-
-    // 형식 검사
-    if (!isValidEmail(email)) {
-      emailField.setError(L("A07_Register_Error_Email"));
-      return;
-    }
-    if (!hasMinLength(password, PASSWORD_MIN_LENGTH)) {
-      passwordField.setError(L("A07_Register_Error_Password"));
-      return;
-    }
-
-    // TODO: POST /api/a07/register 연동. 성공 시 로그인 페이지로.
-    navigateTo(ROUTES.A06_LOGIN);
-  }
-
-  form.addEventListener("submit", onA07_Register_Submit_Click);
-  form.append(companyField.root, nameField.root, emailField.root, passwordField.root, submitBtn);
-
-  // 로그인 링크
-  const toLogin = createButton({
-    label: L("A07_Register_ToLogin"),
-    variant: "ghost",
-    onClick: () => navigateTo(ROUTES.A06_LOGIN),
-  });
-  toLogin.classList.add("a07-register__link");
-
-  card.append(title, subtitle, form, toLogin);
-  page.append(card);
-  root.append(page);
-}
diff --git a/A07_Register/A07_Register_UI_Style.css b/A07_Register/A07_Register_UI_Style.css
index baa1c21bb..745d864f7 100644
--- a/A07_Register/A07_Register_UI_Style.css
+++ b/A07_Register/A07_Register_UI_Style.css
@@ -1,6 +1,6 @@
 /* =============================================================================
  * A07_Register_UI_Style.css
- * 회원가입 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
+ * 회원가입 페이지 고유 배치 — 카드 · 체크 · 접이 겉은 공용 부품이 냄.
  * ========================================================================== */
 
 .a07-register {
@@ -13,49 +13,22 @@
 .a07-register__card {
   width: 100%;
   max-width: 420px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
   padding: var(--spacing-40);
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  box-shadow: var(--shadow-sm);
 }
 
 .a07-register__title {
   font-size: var(--text-heading-sm);
   line-height: var(--leading-heading-sm);
-  color: var(--color-deep-iris);
+  color: var(--color-text);
   text-align: center;
   margin: 0;
 }
-.a07-register__subtitle {
-  font-size: var(--text-body-sm);
-  color: var(--color-slate);
-  text-align: center;
-  margin: 0 0 var(--spacing-8);
-}
 
 .a07-register__form {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
 }
-.a07-register__submit {
-  width: 100%;
-  margin-top: var(--spacing-8);
-}
-.a07-register__link {
-  width: 100%;
-}
-.a07-register__check {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  color: var(--color-text);
-  font-size: var(--text-body-sm);
-}
 
 .a07-register__agreement {
   border: 1px solid var(--color-border);
@@ -64,17 +37,9 @@
 }
 
 .a07-register__agreement-summary {
-  display: flex;
-  align-items: center;
   gap: var(--spacing-8);
   padding: var(--spacing-12) var(--spacing-16);
   background-color: var(--color-canvas);
-  cursor: pointer;
-  user-select: none;
-}
-
-.a07-register__agreement-summary input[type="checkbox"] {
-  flex-shrink: 0;
 }
 
 .a07-register__agreement-label {
@@ -83,20 +48,14 @@
   color: var(--color-text);
 }
 
-.a07-register__agreement-details {
-  border-top: 1px solid var(--color-border);
-}
-
-.a07-register__agreement-details[open] {
-  padding: var(--spacing-12) var(--spacing-16);
-}
-
 .a07-register__agreement-content {
   max-height: 200px;
   overflow-y: auto;
+  padding: var(--spacing-12) var(--spacing-16);
+  border-top: 1px solid var(--color-border);
   white-space: pre-wrap;
   word-break: break-word;
   font-size: var(--text-body-sm);
-  color: var(--color-slate);
+  color: var(--color-text-secondary);
   line-height: var(--leading-relaxed);
 }
diff --git a/A08_Support/A08_Support_UI_Page.ts b/A08_Support/A08_Support_UI_Page.ts
index 3f050a1eb..43d4ca2df 100644
--- a/A08_Support/A08_Support_UI_Page.ts
+++ b/A08_Support/A08_Support_UI_Page.ts
@@ -5,13 +5,14 @@
  * 제약 준수:
  *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
  *   - 색상/간격은 A08_Support_UI_Style.css + theme.css 변수만 사용.
- *   - 공통 컴포넌트(createButton/createInputField) 우선 사용.
+ *   - 공통 부품(createCard/createBanner/createInputField/createButton) 우선 사용.
  *   - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
  *   - 백엔드 전송 전 1차 유효성 검사 (frontend.md §4).
  * ========================================================================== */
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
-import { createButton, createInputField } from "@ui/ui_template_elements";
+import { createBanner } from "@ui/ui_template_banner";
+import { createButton, createCard, createInputField } from "@ui/ui_template_elements";
 import { isBlank, isValidEmail } from "@util/common_util_validate";
 import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
 import "./A08_Support_UI_Style.css";
@@ -21,48 +22,6 @@ function L(key: keyof typeof ui_locales): string {
   return ui_locales[key][currentLanguageIndex];
 }
 
-/** 문의내용 textarea 핸들 (createInputField와 유사한 형태로 에러 슬롯 포함) */
-interface TextAreaHandle {
-  root: HTMLDivElement;
-  textarea: HTMLTextAreaElement;
-  setError: (msg?: string) => void;
-}
-
-/** 여러 줄 입력용 textarea 필드 생성 (공통 .ui-field/.ui-input 스타일 상속). */
-function createTextAreaField(label: string, placeholder: string): TextAreaHandle {
-  const root = document.createElement("div");
-  root.className = "ui-field";
-
-  const labelEl = document.createElement("label");
-  labelEl.className = "ui-field__label";
-  labelEl.textContent = label;
-
-  const textarea = document.createElement("textarea");
-  textarea.className = "ui-input a08-support__textarea";
-  textarea.placeholder = placeholder;
-  textarea.rows = 6;
-
-  const errorSlot = document.createElement("span");
-  errorSlot.className = "ui-field__error";
-  errorSlot.setAttribute("role", "alert");
-
-  root.append(labelEl, textarea, errorSlot);
-
-  const setError = (msg?: string): void => {
-    if (msg) {
-      textarea.classList.add("ui-input--error");
-      errorSlot.textContent = msg;
-      errorSlot.classList.add("is-visible");
-    } else {
-      textarea.classList.remove("ui-input--error");
-      errorSlot.textContent = "";
-      errorSlot.classList.remove("is-visible");
-    }
-  };
-
-  return { root, textarea, setError };
-}
-
 /* -----------------------------------------------------------------------------
  * 페이지 진입점
  * -------------------------------------------------------------------------- */
@@ -70,9 +29,6 @@ export function renderA08Support(root: HTMLElement): void {
   const page = document.createElement("div");
   page.className = "a08-support";
 
-  const card = document.createElement("div");
-  card.className = "a08-support__card";
-
   const title = document.createElement("h1");
   title.className = "a08-support__title";
   title.textContent = L("A08_Support_Title");
@@ -82,9 +38,7 @@ export function renderA08Support(root: HTMLElement): void {
   subtitle.textContent = L("A08_Support_Subtitle");
 
   // 성공 메시지 슬롯 (제출 성공 시 표시)
-  const successMsg = document.createElement("p");
-  successMsg.className = "a08-support__success";
-  successMsg.textContent = L("A08_Support_Success");
+  const successMsg = createBanner({ tone: "success", text: L("A08_Support_Success") });
   successMsg.hidden = true;
 
   // 입력 필드
@@ -113,10 +67,11 @@ export function renderA08Support(root: HTMLElement): void {
     type: "text",
     required: true,
   });
-  const messageField = createTextAreaField(
-    L("A08_Support_Field_Message"),
-    L("A08_Support_Field_Message_Placeholder"),
-  );
+  const messageField = createInputField({
+    label: L("A08_Support_Field_Message"),
+    placeholder: L("A08_Support_Field_Message_Placeholder"),
+    multiline: 6,
+  });
 
   const form = document.createElement("form");
   form.className = "a08-support__form";
@@ -142,7 +97,7 @@ export function renderA08Support(root: HTMLElement): void {
     const email = emailField.input.value;
     const phone = phoneField.input.value;
     const subject = subjectField.input.value;
-    const message = messageField.textarea.value;
+    const message = messageField.input.value;
 
     // 필수값 검사
     let hasError = false;
@@ -184,7 +139,7 @@ export function renderA08Support(root: HTMLElement): void {
           throw new Error(error.detail ?? "요청 실패");
         }
         form.reset();
-        messageField.textarea.value = "";
+        messageField.input.value = "";
         successMsg.hidden = false;
       } catch (err) {
         const msg = err instanceof Error ? err.message : "오류 발생";
@@ -203,7 +158,8 @@ export function renderA08Support(root: HTMLElement): void {
     submitBtn,
   );
 
-  card.append(title, subtitle, successMsg, form);
+  const card = createCard({ body: [title, subtitle, successMsg, form] });
+  card.classList.add("a08-support__card");
   page.append(card);
   root.append(page);
 
diff --git a/A08_Support/A08_Support_UI_Style.css b/A08_Support/A08_Support_UI_Style.css
index 07eaf5c2e..eb636bfad 100644
--- a/A08_Support/A08_Support_UI_Style.css
+++ b/A08_Support/A08_Support_UI_Style.css
@@ -1,6 +1,6 @@
 /* =============================================================================
  * A08_Support_UI_Style.css
- * 기술지원 요청 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
+ * 기술지원 요청 페이지 고유 배치 — 카드 · 알림 · 칸 겉은 공용 부품이 냄.
  * ========================================================================== */
 
 .a08-support {
@@ -13,50 +13,28 @@
 .a08-support__card {
   width: 100%;
   max-width: 520px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
   padding: var(--spacing-40);
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  box-shadow: var(--shadow-sm);
 }
 
 .a08-support__title {
   font-size: var(--text-heading-sm);
   line-height: var(--leading-heading-sm);
-  color: var(--color-deep-iris);
+  color: var(--color-text);
   text-align: center;
   margin: 0;
 }
 .a08-support__subtitle {
   font-size: var(--text-body-sm);
-  color: var(--color-slate);
+  color: var(--color-text-secondary);
   text-align: center;
   margin: 0 0 var(--spacing-8);
 }
 
-.a08-support__success {
-  margin: 0;
-  padding: var(--spacing-16);
-  text-align: center;
-  color: var(--color-success);
-  background-color: var(--color-mist-violet);
-  border-radius: var(--radius-cards);
-  font-size: var(--text-body-sm);
-}
-
 .a08-support__form {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
 }
-.a08-support__textarea {
-  resize: vertical;
-  min-height: 120px;
-  font-family: inherit;
-}
 .a08-support__submit {
   width: 100%;
   margin-top: var(--spacing-8);
diff --git a/A09_Security/A09_Security_UI_Page.ts b/A09_Security/A09_Security_UI_Page.ts
index d4c028ae6..814893194 100644
--- a/A09_Security/A09_Security_UI_Page.ts
+++ b/A09_Security/A09_Security_UI_Page.ts
@@ -1,3 +1,4 @@
+import { createCard } from "@ui/ui_template_elements";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { SECURITY_TERMS_VERSION, securityTerms } from "./A09_Security_Terms";
 import "./A09_Security_UI_Style.css";
@@ -5,13 +6,11 @@ import "./A09_Security_UI_Style.css";
 const L = (key: keyof typeof ui_locales): string => ui_locales[key][currentLanguageIndex];
 
 export function renderA09Security(root: HTMLElement): void {
-  const page = document.createElement("article");
-  page.className = "a09-security";
   const title = document.createElement("h1");
   title.textContent = L("A09_Security_Title");
   const version = document.createElement("p");
   version.textContent = `${L("A09_Security_Version")} ${SECURITY_TERMS_VERSION}`;
-  page.append(title, version);
+  const blocks: HTMLElement[] = [title, version];
   const sections = [
     ["A09_Security_Terms", securityTerms.terms],
     ["A09_Security_Privacy", securityTerms.privacy],
@@ -24,7 +23,9 @@ export function renderA09Security(root: HTMLElement): void {
     const paragraph = document.createElement("p");
     paragraph.textContent = body[currentLanguageIndex];
     section.append(heading, paragraph);
-    page.append(section);
+    blocks.push(section);
   }
+  const page = createCard({ body: blocks });
+  page.classList.add("a09-security");
   root.append(page);
 }
diff --git a/A09_Security/A09_Security_UI_Style.css b/A09_Security/A09_Security_UI_Style.css
index 4b92c170b..d130ac6d2 100644
--- a/A09_Security/A09_Security_UI_Style.css
+++ b/A09_Security/A09_Security_UI_Style.css
@@ -1,12 +1,13 @@
+/* 약관 문서 — 카드 겉은 공용 부품(카드) · 여기는 폭 · 여백 · 글 흐름만 */
 .a09-security {
   max-width: 800px;
   margin: var(--spacing-64) auto;
   padding: var(--spacing-40);
   color: var(--color-text);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  box-shadow: var(--shadow-sm);
+}
+
+.a09-security > .ui-card__body {
+  display: block;
 }
 
 .a09-security section {
diff --git a/B01_Dashboard/B01_Dashboard_UI_PageKit.ts b/B01_Dashboard/B01_Dashboard_UI_PageKit.ts
index 8982c2417..2877dd00b 100644
--- a/B01_Dashboard/B01_Dashboard_UI_PageKit.ts
+++ b/B01_Dashboard/B01_Dashboard_UI_PageKit.ts
@@ -5,7 +5,7 @@
  *   아이콘 = `ui_template_icons`(552-2 에 여섯을 옮김).
  * ========================================================================== */
 
-import { createButton, createTag, showConfirmDialog } from "@ui/ui_template_elements";
+import { createButton, createTag } from "@ui/ui_template_elements";
 import { createEmpty } from "@ui/ui_template_empty";
 import { icon, type IconName } from "@ui/ui_template_icons";
 import type { BadgeTone } from "./logic/B01_Dashboard_Logic_Pages";
@@ -70,107 +70,16 @@ export function pageFrame(host: HTMLElement, title: string, desc: string): PageF
   };
 }
 
-export type Cell = string | Node;
-
-export interface RowMenuItem {
-  label: string;
-  onClick: () => void;
-  /** 삭제 · 빼기 = 빨강 + 확인창 */
-  danger?: boolean;
-  /** 확인창 글(danger 일 때) */
-  confirm?: string;
-  /** 누르면 열리는 모달이 확인을 맡음 — 빨강만 · 확인창 없음 */
-  ownConfirm?: boolean;
-}
-
-/** 줄 끝 ⋯ — 열면 항목 · 밖을 누르면 닫힘 · danger 는 확인 뒤 실행 */
-export function rowMenu(items: RowMenuItem[]): HTMLElement {
-  const wrap = node("div", "b01-pg-menu");
-  if (!items.length) return wrap;
-  const trigger = node("button", "b01-pg-menu__btn");
-  trigger.type = "button";
-  trigger.title = trigger.ariaLabel = "더 보기";
-  trigger.setAttribute("aria-haspopup", "menu");
-  trigger.setAttribute("aria-expanded", "false");
-  trigger.append(kitIcon("dots", 18));
-  const pop = node("div", "b01-pg-menu__pop");
-  pop.setAttribute("role", "menu");
-  pop.hidden = true;
-  const setOpen = (open: boolean): void => {
-    pop.hidden = !open;
-    trigger.setAttribute("aria-expanded", String(open));
-    wrap.classList.toggle("is-open", open);
-  };
-  for (const item of items) {
-    const b = node("button", `b01-pg-menu__item${item.danger ? " is-danger" : ""}`, item.label);
-    b.type = "button";
-    b.setAttribute("role", "menuitem");
-    b.addEventListener("click", () => {
-      setOpen(false);
-      if (!item.danger || item.ownConfirm) return item.onClick();
-      void showConfirmDialog(item.confirm ?? `${item.label} 하시겠습니까?`, item.label).then(
-        (ok) => ok && item.onClick(),
-      );
-    });
-    pop.append(b);
-  }
-  trigger.addEventListener("click", (e) => {
-    e.stopPropagation();
-    setOpen(pop.hidden === true);
-  });
-  const outside = (e: MouseEvent): void => {
-    if (!wrap.isConnected) document.removeEventListener("click", outside);
-    else if (!wrap.contains(e.target as Node)) setOpen(false);
-  };
-  document.addEventListener("click", outside);
-  wrap.addEventListener("keydown", (e) => e.key === "Escape" && setOpen(false));
-  wrap.append(trigger, pop);
-  return wrap;
-}
-
-export interface Column {
-  label: string;
-  /** 칸 너비(CSS) — 없으면 나눠 가짐 */
-  width?: string;
-  align?: "end";
-}
-
-/** 표 껍데기 — 머리 + 빈 tbody (줄은 호출 쪽이 채움 · 펼침 줄 같은 것을 끼우려고 떼어 둠) */
-export function tableShell(columns: Column[]): { root: HTMLElement; tbody: HTMLElement } {
-  const table = node("table", "b01-pg-table");
-  const head = node("thead", "");
-  const hr = node("tr", "");
-  for (const col of columns) {
-    const th = node("th", col.align ? "is-end" : "", col.label);
-    if (col.width) th.style.width = col.width;
-    hr.append(th);
-  }
-  head.append(hr);
-  const tbody = node("tbody", "");
-  table.append(head, tbody);
-  const root = node("div", "b01-pg-card b01-pg-scroll");
-  root.append(table);
-  return { root, tbody };
-}
-
-/** 한 줄 — 칸 수는 columns 와 같게 · label "" 인 칸 = ⋯ 칸 */
-export function tableRow(columns: Column[], cells: Cell[]): HTMLElement {
-  const tr = node("tr", "");
-  cells.forEach((cell, i) => {
-    const col = columns[i];
-    const td = node("td", col?.align ? "is-end" : col?.label === "" ? "b01-pg-menucell" : "");
-    td.append(cell);
-    tr.append(td);
-  });
-  return tr;
-}
-
-/** 표 — 줄 높이 40 · 세로선 없음 · 마지막 칸 = ⋯ (columns 에 label "" 로) */
-export function dataTable(columns: Column[], rows: Cell[][]): HTMLElement {
-  const { root, tbody } = tableShell(columns);
-  tbody.append(...rows.map((cells) => tableRow(columns, cells)));
-  return root;
-}
+// 부품(552-3) — 표 · 줄 끝 ⋯ · 설정 줄 = ui_template 부품 · 부름 꼴 그대로
+export { createRowMenu as rowMenu, type RowMenuItem } from "@ui/ui_template_context_menu";
+export {
+  createTable as dataTable,
+  tableRow,
+  tableShell,
+  type Cell,
+  type Column,
+} from "@ui/ui_template_table";
+export { settingCard, settingRow, valueText } from "@ui/ui_template_setting_row";
 
 export interface EmptyOptions {
   icon: IconName | KitIconName;
@@ -235,22 +144,6 @@ export function tabBar(
   };
 }
 
-/** 설정 카드 한 줄(Linear 꼴) — 제목 · 설명 왼쪽 · 값 · 조작 오른쪽 */
-export function settingRow(title: string, desc: string, right: Node): HTMLElement {
-  const row = node("div", "b01-pg-row");
-  const left = node("div", "b01-pg-row__text");
-  left.append(node("strong", "", title));
-  if (desc) left.append(node("span", "b01-pg-row__desc", desc));
-  const side = node("div", "b01-pg-row__side");
-  side.append(right);
-  row.append(left, side);
-  return row;
-}
-
-/** 값 글 — 없으면 「-」 */
-export const valueText = (v: string | number | null | undefined): HTMLElement =>
-  node("span", "b01-pg-row__value", v === null || v === undefined || v === "" ? "-" : String(v));
-
 /** 줄 첫 칸 — 이름 + (작은 글) 보조 */
 export function nameCell(name: string, sub?: string | null): HTMLElement {
   const cell = node("div", "b01-pg-name");
@@ -258,10 +151,3 @@ export function nameCell(name: string, sub?: string | null): HTMLElement {
   if (sub) cell.append(node("span", "b01-pg-name__sub", sub));
   return cell;
 }
-
-/** 카드 묶음 — 설정 줄을 둥근 상자 한 개에 */
-export function settingCard(rows: HTMLElement[]): HTMLElement {
-  const card = node("div", "b01-pg-card b01-pg-settings");
-  card.append(...rows);
-  return card;
-}
diff --git a/B01_Dashboard/B01_Dashboard_UI_Profile.ts b/B01_Dashboard/B01_Dashboard_UI_Profile.ts
index 474dfdab7..c894a03e6 100644
--- a/B01_Dashboard/B01_Dashboard_UI_Profile.ts
+++ b/B01_Dashboard/B01_Dashboard_UI_Profile.ts
@@ -31,7 +31,8 @@ function input(value: string, type = "text", label = ""): HTMLInputElement {
 /** 입력 줄 아래에 오류 글 — 비우면 지움 */
 function fieldError(row: HTMLElement, message?: string): void {
   row.querySelector(".b01-sys-error")?.remove();
-  if (message) row.querySelector(".b01-pg-row__text")?.append(el("span", "b01-sys-error", message));
+  if (message)
+    row.querySelector(".ui-setting-row__text")?.append(el("span", "b01-sys-error", message));
 }
 
 export function buildProfileCard(user: DashboardUser): HTMLElement {
diff --git a/B01_Dashboard/B01_Dashboard_UI_Style_Pages.css b/B01_Dashboard/B01_Dashboard_UI_Style_Pages.css
index 98ad71bd5..e7c68b51e 100644
--- a/B01_Dashboard/B01_Dashboard_UI_Style_Pages.css
+++ b/B01_Dashboard/B01_Dashboard_UI_Style_Pages.css
@@ -45,53 +45,6 @@
   border: 1px solid var(--b01-line);
   border-radius: var(--b01-radius);
 }
-.b01-pg-scroll {
-  overflow-x: auto;
-}
-.b01-pg-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-.b01-pg-table th {
-  height: 36px;
-  padding: 0 12px;
-  text-align: left;
-  font-weight: 600;
-  font-size: 12px;
-  color: var(--b01-muted);
-  border-bottom: 1px solid var(--b01-line);
-  white-space: nowrap;
-}
-.b01-pg-table td {
-  height: 40px;
-  padding: 0 12px;
-  border-bottom: 1px solid var(--b01-line);
-  vertical-align: middle;
-}
-.b01-pg-table tbody tr:last-child td {
-  border-bottom: 0;
-}
-.b01-pg-table tbody tr:hover {
-  background: var(--b01-hover);
-}
-.b01-pg-table .is-end {
-  text-align: right;
-}
-.b01-pg-table td.b01-pg-menucell {
-  width: 44px;
-  padding: 0 8px;
-  text-align: right;
-}
-.b01-pg-table tr.is-sub > td {
-  height: auto;
-  padding: 0;
-  background: var(--b01-bg);
-}
-.b01-pg-table tr.is-sub:hover {
-  background: var(--b01-bg);
-}
-
 /* 이름 칸 */
 .b01-pg-name {
   display: flex;
@@ -127,60 +80,6 @@
   white-space: nowrap;
 }
 
-/* 줄 끝 ⋯ */
-.b01-pg-menu {
-  position: relative;
-  display: inline-block;
-}
-.b01-pg-menu__btn {
-  display: grid;
-  place-items: center;
-  width: 28px;
-  height: 28px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  color: var(--b01-muted);
-  cursor: pointer;
-}
-.b01-pg-menu__btn:hover,
-.b01-pg-menu.is-open .b01-pg-menu__btn {
-  background: var(--b01-hover);
-  color: var(--b01-text);
-}
-.b01-pg-menu__pop {
-  position: absolute;
-  right: 0;
-  top: 30px;
-  z-index: 20;
-  min-width: 132px;
-  padding: 4px;
-  background: var(--b01-card);
-  border: 1px solid var(--b01-line);
-  border-radius: 8px;
-  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
-  text-align: left;
-}
-.b01-pg-menu__item {
-  display: block;
-  width: 100%;
-  padding: 7px 10px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  color: var(--b01-text);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.b01-pg-menu__item:hover {
-  background: var(--b01-hover);
-}
-.b01-pg-menu__item.is-danger {
-  color: var(--b01-alert);
-}
-
 /* 탭 */
 .b01-pg-tabs {
   display: flex;
@@ -222,46 +121,6 @@
   display: none;
 }
 
-/* 설정 줄(Linear 꼴) */
-.b01-pg-settings {
-  overflow: hidden;
-}
-.b01-pg-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 52px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--b01-line);
-}
-.b01-pg-row:last-child {
-  border-bottom: 0;
-}
-.b01-pg-row__text {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.b01-pg-row__desc {
-  font-size: 12px;
-  color: var(--b01-muted);
-}
-.b01-pg-row__side {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: none;
-  max-width: 55%;
-}
-.b01-pg-row__side .ui-field__label:empty {
-  display: none;
-}
-.b01-pg-row__value {
-  text-align: right;
-  overflow-wrap: anywhere;
-}
-
 .b01-pg-link {
   border: 0;
   background: none;
@@ -460,7 +319,7 @@
   outline: 2px solid var(--b01-accent);
   outline-offset: 0;
 }
-.b01-pg-row__side .b01-sys-input {
+.ui-setting-row__side .b01-sys-input {
   width: 240px;
 }
 .b01-sys-count {
diff --git a/B02_ProjRegister/B02_ProjRegister_UI_Style.css b/B02_ProjRegister/B02_ProjRegister_UI_Style.css
index 4186b3f80..b3f6ebcfc 100644
--- a/B02_ProjRegister/B02_ProjRegister_UI_Style.css
+++ b/B02_ProjRegister/B02_ProjRegister_UI_Style.css
@@ -19,23 +19,6 @@
   gap: var(--spacing-16);
 }
 
-/* select는 공통 .ui-input 상속 + 드롭다운 화살표 여백 확보 */
-.b02-proj__select {
-  appearance: none;
-  cursor: pointer;
-  background-image:
-    linear-gradient(45deg, transparent 50%, var(--color-slate) 50%),
-    linear-gradient(135deg, var(--color-slate) 50%, transparent 50%);
-  background-position:
-    calc(100% - 18px) 50%,
-    calc(100% - 13px) 50%;
-  background-size:
-    5px 5px,
-    5px 5px;
-  background-repeat: no-repeat;
-  padding-right: var(--spacing-32);
-}
-
 @media (max-width: 640px) {
   .b02-proj__grid {
     grid-template-columns: 1fr;
diff --git a/B03_FileInput/B03_FileInput_State.ts b/B03_FileInput/B03_FileInput_State.ts
index 5e26d331b..eae8fa787 100644
--- a/B03_FileInput/B03_FileInput_State.ts
+++ b/B03_FileInput/B03_FileInput_State.ts
@@ -1,3 +1,5 @@
+import { createBanner } from "@ui/ui_template_banner";
+
 export type B03AnalysisStatus = "pending" | "in_progress" | "completed" | "failed";
 
 export interface B03StoredFileState {
@@ -78,9 +80,9 @@ export function restoreB03ProjectState(options: {
   const state = loadB03ProjectState(options.projectId);
   if (!state) return;
   options.container.replaceChildren();
-  const message = document.createElement("span");
-  message.textContent = `${options.label}: ${state.analysisProgress}%`;
-  options.container.append(message);
+  options.container.append(
+    createBanner({ tone: "info", text: `${options.label}: ${state.analysisProgress}%` }),
+  );
   options.container.classList.add("is-visible");
   if (state.analysisStatus === "in_progress" || state.analysisStatus === "pending") {
     void options.poll(options.projectId).then((completed) => {
diff --git a/B03_FileInput/B03_FileInput_UI_Page.ts b/B03_FileInput/B03_FileInput_UI_Page.ts
index f9de843c3..4a63ac235 100644
--- a/B03_FileInput/B03_FileInput_UI_Page.ts
+++ b/B03_FileInput/B03_FileInput_UI_Page.ts
@@ -5,7 +5,12 @@ import {
   UPLOAD_MAX_FILES,
 } from "@config/config_frontend";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
-import { createButton, createTag } from "@ui/ui_template_elements";
+import { createBanner } from "@ui/ui_template_banner";
+import { createButton, createIconButton, createTag } from "@ui/ui_template_elements";
+import { createPanelHead } from "@ui/ui_template_panel_head";
+import { createProgressBar, type ProgressBarHandle } from "@ui/ui_template_progress";
+import { createText } from "@ui/ui_template_text";
+import { createToggle } from "@ui/ui_template_toggle";
 import { createGeneralLayout } from "@ui/ui_template_general_layout";
 import { createWorkflowOverlays } from "@ui/ui_template_overlay";
 import { createStepBar, WORKFLOW_STEP_ICONS } from "@ui/ui_template_workflow_layout";
@@ -63,6 +68,7 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
   // 대시보드 임시 보관함에서 가져올 자료 선택기 — 선택되면 [업로드]가 이동을 수행한다.
   const tempPicker = createTempPicker(() => updateUploadButton());
   const cardMap = new Map<FileSlot, HTMLElement>();
+  const progressMap = new Map<FileSlot, ProgressBarHandle>();
   let uploadButton: HTMLButtonElement;
   let resumeBanner: HTMLDivElement;
   let activeProjectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
@@ -75,9 +81,8 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
     ? localStorage.getItem(`b03_las_free_${activeProjectId}`) === "1"
     : false;
 
-  const subtitle = document.createElement("p");
-  subtitle.className = "b03-file__subtitle";
-  subtitle.textContent = L("B03_File_Subtitle");
+  const subtitle = createText(L("B03_File_Subtitle"), "muted", 14);
+  subtitle.classList.add("b03-file__subtitle");
 
   const fileInput = document.createElement("input");
   fileInput.type = "file";
@@ -94,7 +99,7 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
   dropzone.append(dropzoneLabel, fileInput);
 
   const pageError = document.createElement("p");
-  pageError.className = "b03-file__error";
+  pageError.className = "ui-text ui-text--error b03-file__error";
   pageError.setAttribute("role", "alert");
 
   // 업로드 버튼 안에서 도는 원 — 공용 스피너를 버튼 크기로 줄여 쓴다.
@@ -200,11 +205,11 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
 
     const fileName = card.querySelector<HTMLSpanElement>(".b03-file__file-name");
     const fileSize = card.querySelector<HTMLSpanElement>(".b03-file__file-size");
-    const progress = card.querySelector<HTMLDivElement>(".b03-file__progress-bar");
+    const progress = progressMap.get(slot);
     const progressBytes = card.querySelector<HTMLSpanElement>(".b03-file__progress-bytes");
     const progressSpeed = card.querySelector<HTMLSpanElement>(".b03-file__progress-speed");
     const progressEta = card.querySelector<HTMLSpanElement>(".b03-file__progress-eta");
-    const error = card.querySelector<HTMLDivElement>(".b03-file__error-message");
+    const error = card.querySelector<HTMLElement>(".b03-file__error-message .ui-banner__text");
     const remove = card.querySelector<HTMLButtonElement>(".b03-file__card-remove");
 
     const percent = state.file ? Math.min(100, (state.progressBytes / state.file.size) * 100) : 0;
@@ -217,7 +222,7 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
           ? `${state.serverUploaded.sizeMb.toFixed(2)} MB`
           : "";
     }
-    if (progress) progress.style.width = `${percent}%`;
+    progress?.set(percent / 100);
     if (progressBytes) {
       progressBytes.textContent = `${L("B03_File_Progress_Bytes")}: ${formatBytes(
         state.progressBytes,
@@ -413,26 +418,27 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
       const lock = overview.analysis_lock;
       if (lock?.running) {
         const who = lock.name ?? lock.email ?? null;
-        const busy = document.createElement("p");
-        busy.className = "b03-file__overview-lock";
-        busy.textContent = who
-          ? `${who} 님이 올린 자료를 분석하는 중입니다 — 끝난 뒤에 새 자료를 올릴 수 있습니다.`
-          : "다른 자리에서 올린 자료를 분석하는 중입니다 — 끝난 뒤에 새 자료를 올릴 수 있습니다.";
-        notes.push(busy);
+        notes.push(
+          createBanner({
+            tone: "warning",
+            text: who
+              ? `${who} 님이 올린 자료를 분석하는 중입니다 — 끝난 뒤에 새 자료를 올릴 수 있습니다.`
+              : "다른 자리에서 올린 자료를 분석하는 중입니다 — 끝난 뒤에 새 자료를 올릴 수 있습니다.",
+          }),
+        );
       }
       if (overview.required_complete && overview.analysis_complete) {
-        const complete = document.createElement("p");
-        complete.className = "b03-file__overview-complete";
-        complete.textContent = L("B03_File_Overview_Complete");
-        notes.push(complete);
+        notes.push(createBanner({ tone: "success", text: L("B03_File_Overview_Complete") }));
       }
       for (const session of overview.pending_sessions) {
-        const pending = document.createElement("p");
-        pending.className = "b03-file__overview-pending";
-        pending.textContent =
-          `${session.original_filename} — ${session.progress_percent}% ` +
-          L("B03_File_Overview_Pending");
-        notes.push(pending);
+        notes.push(
+          createBanner({
+            tone: "info",
+            text:
+              `${session.original_filename} — ${session.progress_percent}% ` +
+              L("B03_File_Overview_Pending"),
+          }),
+        );
       }
       if (notes.length) {
         overviewBanner.append(...notes);
@@ -453,18 +459,30 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
     renderExtensionLabel(card, state);
     const input = card.querySelector<HTMLInputElement>(".b03-file__slot-input")!;
     input.accept = state.extensions.join(",");
-    const select = card.querySelector<HTMLButtonElement>(".b03-file__card-select")!;
-    select.textContent = L("B03_File_Card_Select");
+    const select = createButton({ label: L("B03_File_Card_Select"), variant: "ghost", size: 24 });
+    select.classList.add("b03-file__card-select");
+    card.querySelector('[data-slot="select"]')!.replaceWith(select);
     select.addEventListener("click", () => input.click());
     input.addEventListener("change", () => {
       onFileSelected(input.files ? Array.from(input.files) : [], state.slot);
       input.value = "";
     });
-    const remove = card.querySelector<HTMLButtonElement>(".b03-file__card-remove")!;
-    remove.textContent = "×";
-    remove.title = L("B03_File_Card_Remove");
-    remove.setAttribute("aria-label", L("B03_File_Card_Remove"));
-    remove.addEventListener("click", () => removeFile(state.slot));
+    const remove = createIconButton({
+      glyph: "×",
+      title: L("B03_File_Card_Remove"),
+      variant: "outline",
+      size: 24,
+      onClick: () => removeFile(state.slot),
+    });
+    remove.classList.add("b03-file__card-remove");
+    card.querySelector('[data-slot="remove"]')!.replaceWith(remove);
+    const progress = createProgressBar({ thick: 6 });
+    progress.root.classList.add("b03-file__progress");
+    card.querySelector('[data-slot="progress"]')!.replaceWith(progress.root);
+    progressMap.set(state.slot, progress);
+    const errorBanner = createBanner({ tone: "danger", text: "" });
+    errorBanner.classList.add("b03-file__error-message");
+    card.querySelector('[data-slot="error"]')!.replaceWith(errorBanner);
     cardMap.set(state.slot, card);
     return card;
   }
@@ -478,18 +496,7 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
     const group = document.createElement("section");
     group.className = "b03-file__group";
     if (modifier) group.classList.add(modifier);
-    if (title) {
-      const groupTitle = document.createElement("h3");
-      groupTitle.className = "b03-file__group-title";
-      groupTitle.textContent = title;
-      group.append(groupTitle);
-    }
-    if (hint) {
-      const groupHint = document.createElement("p");
-      groupHint.className = "b03-file__group-hint";
-      groupHint.textContent = hint;
-      group.append(groupHint);
-    }
+    if (title) group.append(createPanelHead({ title, sub: hint }).root);
     const content = document.createElement("div");
     content.className = "b03-file__group-content";
     for (const slot of groupSlots) {
@@ -560,7 +567,8 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
   pickRow.append(dropzone, tempPicker.root, uploadButton);
 
   const uploadControlPanel = document.createElement("div");
-  uploadControlPanel.className = "b03-file__control-panel";
+  uploadControlPanel.dataset.pad = "16";
+  uploadControlPanel.className = "ui-card b03-file__control-panel";
   uploadControlPanel.append(subtitle, pickRow, resumeBanner, pageError);
 
   // 자료의 출처가 둘로 갈린다 — 원청이 준 계획노선, 측량이 준 지형(LAS·래스터).
@@ -581,16 +589,17 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
   );
 
   // LAS 없는 설계 토글 — 켜면 포인트클라우드 카드를 비활성화하고 필수에서 뺀다.
-  const lasFreeRow = document.createElement("label");
-  lasFreeRow.className = "b03-file__lasfree";
+  const lasFreeToggle = createToggle({
+    label: L("B03_File_LasFree_Toggle"),
+    checked: lasFreeDesign,
+    size: 36,
+    onChange: onLasFreeChange,
+  });
+  const lasFreeRow = lasFreeToggle.root;
+  lasFreeRow.classList.add("b03-file__lasfree");
   lasFreeRow.title = L("B03_File_LasFree_Hint");
-  const lasFreeCheck = document.createElement("input");
-  lasFreeCheck.type = "checkbox";
-  const lasFreeText = document.createElement("span");
-  lasFreeText.textContent = L("B03_File_LasFree_Toggle");
-  lasFreeRow.append(lasFreeCheck, lasFreeText);
   function applyLasFreeState(): void {
-    lasFreeCheck.checked = lasFreeDesign;
+    lasFreeToggle.set(lasFreeDesign);
     terrainGroup.classList.toggle("b03-file__group--disabled", lasFreeDesign);
     for (const slot of TERRAIN_SLOTS) {
       const card = cardMap.get(slot);
@@ -608,8 +617,8 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
       if (lasFreeDesign && slots.get(slot)?.file) removeFile(slot);
     }
   }
-  lasFreeCheck.addEventListener("change", () => {
-    lasFreeDesign = lasFreeCheck.checked;
+  function onLasFreeChange(checked: boolean): void {
+    lasFreeDesign = checked;
     if (activeProjectId) {
       localStorage.setItem(`b03_las_free_${activeProjectId}`, lasFreeDesign ? "1" : "0");
     }
@@ -619,19 +628,21 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
     // 골라 놓고도 [파일 업로드]가 잠긴 채 남는다(2026-09-03 실측: 파일을 먼저 고르고
     // 토글을 나중에 켠 순서에서 재현).
     updateUploadButton();
-  });
+  }
 
   // LAS 토글은 **파일 입력 컨테이너**의 것이다(2026-09-03 사용자 지시) — 무엇을 받을지
   // 정하는 스위치라 고르는 자리 옆에 선다. 켜면 지형 컨테이너가 통째로 잠긴다.
   uploadControlPanel.insertBefore(lasFreeRow, resumeBanner);
 
   const routePanel = document.createElement("div");
-  routePanel.className = "b03-file__control-panel b03-file__cards-container-panel";
+  routePanel.dataset.pad = "16";
+  routePanel.className = "ui-card b03-file__control-panel b03-file__cards-container-panel";
   routePanel.append(routeGroup);
   mountPlanImport(routePanel, uploadControlPanel, () => void applyUploadOverview());
 
   const terrainPanel = document.createElement("div");
-  terrainPanel.className = "b03-file__control-panel b03-file__cards-container-panel";
+  terrainPanel.dataset.pad = "16";
+  terrainPanel.className = "ui-card b03-file__control-panel b03-file__cards-container-panel";
   terrainPanel.append(terrainGroup);
 
   const cardsContainer = document.createElement("div");
diff --git a/B03_FileInput/B03_FileInput_UI_Page_Flow.ts b/B03_FileInput/B03_FileInput_UI_Page_Flow.ts
index bc8c31045..d00b1902a 100644
--- a/B03_FileInput/B03_FileInput_UI_Page_Flow.ts
+++ b/B03_FileInput/B03_FileInput_UI_Page_Flow.ts
@@ -8,6 +8,7 @@
  * ========================================================================== */
 
 import { CURRENT_PROJECT_ID_KEY, type RoutePath } from "@config/config_frontend";
+import { createBanner } from "@ui/ui_template_banner";
 import { createButton, showToast } from "@ui/ui_template_elements";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { navigateTo } from "../A00_Common/router";
@@ -81,16 +82,16 @@ export function createUploadFlow(ctx: UploadFlowContext): UploadFlowHandle {
       state.uploadSessionId = session.uploadSessionId;
       state.progressBytes = session.completedChunks * session.chunkSizeBytes;
       ctx.renderSlot(state.slot);
-      const text = document.createElement("span");
-      text.textContent = `${L("B03_File_Status_Detected")}: ${session.fileName}`;
       const resume = createButton({
         label: L("B03_File_Resume_Button"),
         variant: "ghost",
+        size: 24,
         onClick: () => void startChunkedUpload([state]),
       });
       const fresh = createButton({
         label: L("B03_File_New_Button"),
         variant: "ghost",
+        size: 24,
         onClick: () => {
           localStorage.removeItem(session.key);
           state.uploadSessionId = undefined;
@@ -100,7 +101,13 @@ export function createUploadFlow(ctx: UploadFlowContext): UploadFlowHandle {
           ctx.resumeBanner.classList.remove("is-visible");
         },
       });
-      ctx.resumeBanner.append(text, resume, fresh);
+      ctx.resumeBanner.append(
+        createBanner({
+          tone: "info",
+          text: `${L("B03_File_Status_Detected")}: ${session.fileName}`,
+          actions: [resume, fresh],
+        }),
+      );
       ctx.resumeBanner.classList.add("is-visible");
       break;
     }
diff --git a/B03_FileInput/B03_FileInput_UI_PlanImport.ts b/B03_FileInput/B03_FileInput_UI_PlanImport.ts
index 9c26aac8b..548f660b8 100644
--- a/B03_FileInput/B03_FileInput_UI_PlanImport.ts
+++ b/B03_FileInput/B03_FileInput_UI_PlanImport.ts
@@ -8,6 +8,7 @@
  * ========================================================================== */
 
 import { API_BASE_URL, CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
+import { createBanner } from "@ui/ui_template_banner";
 import {
   createButton,
   el,
@@ -17,6 +18,7 @@ import {
   showToast,
 } from "@ui/ui_template_elements";
 import { t } from "@ui/ui_template_locale";
+import { createListRow } from "@ui/ui_template_list_row";
 import { openModal } from "@ui/ui_template_modal";
 
 interface AssignedRoute {
@@ -99,7 +101,7 @@ export function mountPlanImport(
   const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
   if (!projectId) return;
   const lasFree = (): boolean => localStorage.getItem(`b03_las_free_${projectId}`) === "1";
-  const banner = el("div", { className: "b03-file__overview-pending b03-file__plan-update" });
+  const banner = el("div", { className: "b03-file__plan-update" });
   banner.hidden = true;
   bannerHost.prepend(banner);
 
@@ -117,12 +119,17 @@ export function mountPlanImport(
     if (!source?.update_available || source.assignee_id === undefined) return;
     const assigneeId = source.assignee_id;
     banner.replaceChildren(
-      el("span", { text: `${t("D04_Update_Banner")} (${source.plan_name} ${source.year}) — ` }),
-      createButton({
-        label: t("D04_Update_Reimport"),
-        variant: "ghost",
-        size: "sm",
-        onClick: () => void done(assigneeId),
+      createBanner({
+        tone: "info",
+        text: `${t("D04_Update_Banner")} (${source.plan_name} ${source.year})`,
+        actions: [
+          createButton({
+            label: t("D04_Update_Reimport"),
+            variant: "ghost",
+            size: 24,
+            onClick: () => void done(assigneeId),
+          }),
+        ],
       }),
     );
   }
@@ -149,20 +156,17 @@ export function mountPlanImport(
             ? ` · ${t("D04_Linked")}: ${route.linked_project_name}`
             : "";
           body.append(
-            el("div", {
-              className: "b03-file__plan-pick",
-              children: [
-                el("span", { text: `${route.project_name} · ${route.year}${linked}` }),
-                createButton({
-                  label: t("D04_Import_Btn"),
-                  variant: "filled",
-                  size: "sm",
-                  onClick: () => {
-                    close();
-                    void done(route.assignee_id);
-                  },
-                }),
-              ],
+            createListRow({
+              label: `${route.project_name} · ${route.year}${linked}`,
+              trailing: createButton({
+                label: t("D04_Import_Btn"),
+                variant: "filled",
+                size: 24,
+                onClick: () => {
+                  close();
+                  void done(route.assignee_id);
+                },
+              }),
             }),
           );
         }
diff --git a/B03_FileInput/B03_FileInput_UI_Style.css b/B03_FileInput/B03_FileInput_UI_Style.css
index fb01e0657..ae9a2ca63 100644
--- a/B03_FileInput/B03_FileInput_UI_Style.css
+++ b/B03_FileInput/B03_FileInput_UI_Style.css
@@ -1,10 +1,6 @@
 .b03-file {
   min-height: calc(100dvh - var(--app-header-height, 0px));
-  background: linear-gradient(
-    180deg,
-    var(--color-canvas, #ffffff) 0%,
-    var(--color-mist-violet, #edecff) 100%
-  );
+  background: linear-gradient(180deg, var(--color-canvas) 0%, var(--color-accent-soft) 100%);
   padding: 0 var(--spacing-24) var(--spacing-48) var(--spacing-24); /* 상단 여백은 main-layout 마진으로 조정하므로 padding-top은 0 */
 }
 
@@ -27,31 +23,17 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
-  background: var(--color-canvas, #ffffff);
-  /* 여백 32 → 16 (2026-09-03) — 고르는 자리만 남기고 안내를 좌측 패널로 뺐다.
-     `--spacing-20`은 테마에 없는 토큰이라 선언째 무효가 된다(패딩이 통째로 사라짐). */
-  padding: var(--spacing-16);
-  border-radius: var(--radius-large, 24px); /* Wiza 24px 대형 둥글기 */
-  border: 1px solid var(--color-mist, #e6e2e3);
-  box-shadow: var(--shadow-lg);
 }
 
 .b03-file__cards-container-panel {
   margin-top: 0; /* 단일 layout gap에 의해 제어되도록 설정 */
 }
 
-.b03-file__subtitle {
-  font-size: var(--text-body-sm, 14px);
-  color: var(--color-slate, #615e6e);
-  margin: 0 0 var(--spacing-8) 0;
-}
-
 .b03-file__native-input,
 .b03-file__slot-input {
   display: none;
 }
 
-/* Wiza 스타일 가이드의 Lavender Glow 그라데이션 및 soft purple border hover */
 /* 고르는 자리 한 줄 — [입력 파일 선택] · [임시 보관함] · [파일 업로드](2026-09-03).
    좁아지면 아래로 접히되, 선택 영역이 남는 폭을 먹는다. */
 /* 셋을 같은 폭·같은 높이로 나눈다 — 열 1:1:1(2026-09-03 사용자 지시).
@@ -80,9 +62,9 @@
    패널로 갔으므로 여기는 「끌어 놓거나 눌러서 고르는 자리」 표시만 한다. */
 .b03-file__dropzone {
   padding: var(--spacing-12) var(--spacing-16);
-  border: 1px dashed var(--color-mist, #e6e2e3);
-  border-radius: var(--radius-cards, 8px);
-  background: var(--color-paper, #f6f7fa);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -92,100 +74,54 @@
   cursor: pointer;
   text-align: center;
   transition:
-    background var(--transition-base, 0.2s),
-    border-color var(--transition-base, 0.2s),
-    box-shadow var(--transition-base, 0.2s);
+    background var(--transition-base),
+    border-color var(--transition-base),
+    box-shadow var(--transition-base);
 }
 
 .b03-file__dropzone:hover {
-  background: var(--color-mist-violet, #edecff);
-  border-color: var(--color-royal-amethyst, #3e0079);
+  background: var(--color-accent-soft);
+  border-color: var(--color-accent);
 }
 
 .b03-file__dropzone:focus-visible,
 .b03-file__dropzone.is-dragging {
   outline: none;
-  background: var(--color-mist-violet, #edecff);
-  border-color: var(--color-royal-amethyst, #3e0079);
-  box-shadow: 0 0 0 4px rgba(62, 0, 121, 0.15);
+  background: var(--color-accent-soft);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent);
 }
 
 .b03-file__dropzone strong {
-  color: var(--color-deep-iris, #26114a);
-  font-size: var(--text-body-sm, 14px);
-  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text);
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-medium);
 }
 
 .b03-file__dropzone span {
-  font-size: var(--text-body-sm, 14px);
-  color: var(--color-slate, #615e6e);
-}
-
-/* 빈 오류 줄이 자리를 잡고 있으면 토글 아래가 통째로 비어 보인다 — 글자가 있을 때만
-   자리를 차지한다(2026-09-03 사용자 지시). */
-.b03-file__error {
-  color: var(--color-danger, #dc2626);
-  font-size: var(--text-body-sm, 14px);
-  margin: 0;
+  font-size: var(--text-body-sm);
+  color: var(--color-text-secondary);
 }
 
+/* 빈 오류 줄이 자리를 잡고 있으면 토글 아래가 통째로 비어 보인다 — 글자가 있을 때만 자리를 차지한다. */
 .b03-file__error:empty {
   display: none;
 }
 
-.b03-file__resume {
-  display: none;
-  align-items: center;
-  gap: var(--spacing-8);
-  flex-wrap: wrap;
-  padding: var(--spacing-12) var(--spacing-16);
-  border: 1px solid var(--color-mist, #e6e2e3);
-  border-radius: var(--radius-cards, 8px);
-  background: var(--color-paper, #f6f7fa);
-  color: var(--color-deep-iris, #26114a);
-  font-size: var(--text-body-sm, 14px);
-  margin-top: var(--spacing-8);
-}
-
-.b03-file__resume.is-visible {
-  display: flex;
-}
-
-/* 재접속 현황(서버 정본) 배너 — 완료 안내와 중단 세션 이어올리기 안내를 담는다. */
+/* 띠 알림(부품)을 담는 자리 — 글이 있을 때(is-visible)만 선다. */
+.b03-file__resume,
 .b03-file__overview {
   display: none;
   flex-direction: column;
   gap: var(--spacing-4);
   margin-top: var(--spacing-8);
-  padding: var(--spacing-12) var(--spacing-16);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards, 8px);
-  background: var(--color-surface);
-  font-size: var(--text-body-sm, 14px);
 }
 
+.b03-file__resume.is-visible,
 .b03-file__overview.is-visible {
   display: flex;
 }
 
-.b03-file__overview-complete {
-  margin: 0;
-  color: var(--color-success, #3fbb6f);
-  font-weight: 600;
-}
-
-.b03-file__overview-pending {
-  margin: 0;
-  color: var(--color-text-secondary);
-}
-
-/* 잠금 표시 — 지금 누가 올리는 중인지. 막힌 까닭이라 눈에 띄게 둔다. */
-.b03-file__overview-lock {
-  margin: 0;
-  color: var(--color-warning, #d98324);
-  font-weight: 600;
-}
-
 /* 완료 슬롯 재업로드 확인 모달 — 페이지 위를 덮는 단순 확인창. */
 .b03-file__modal-backdrop {
   position: fixed;
@@ -194,7 +130,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgb(0 0 0 / 45%);
+  background: var(--color-scrim);
 }
 
 .b03-file__modal {
@@ -204,9 +140,9 @@
   max-width: 420px;
   padding: var(--spacing-24);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards, 8px);
+  border-radius: var(--radius-cards);
   background: var(--color-surface-raised);
-  box-shadow: 0 12px 32px rgb(0 0 0 / 30%);
+  box-shadow: var(--shadow-lg);
 }
 
 .b03-file__modal p {
@@ -221,12 +157,6 @@
   justify-content: flex-end;
 }
 
-.b03-file__cards-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-32);
-}
-
 /* 계획노선 | 지형(LAS) — 컨테이너를 둘로 나눈다(2026-08-31 사용자 지시).
    노선은 카드 5장(shapefile 한 벌), 지형은 4장이라 폭을 5:4 비슷하게 준다.
 
@@ -241,39 +171,9 @@
   align-items: start;
 }
 
-/* LAS 없이 설계 토글 — 파일 입력 컨테이너의 스위치(2026-09-03 사용자 지시).
-   B04 좌측 패널의 체크 줄(`b04-surface__check`)과 같은 서식이다. */
+/* LAS 없이 설계 — 켜기 부품(스위치) · 자리만 정함 */
 .b03-file__lasfree {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
   align-self: flex-start;
-  padding: var(--spacing-8) var(--spacing-12);
-  border: 1px solid var(--color-mist, #e6e2e3);
-  border-radius: var(--radius-buttons, 8px);
-  font-size: var(--text-body-sm, 14px);
-  color: var(--color-deep-iris, #26114a);
-  cursor: pointer;
-  transition: border-color var(--transition-base, 0.2s);
-}
-
-.b03-file__lasfree:hover {
-  border-color: var(--color-royal-amethyst, #3e0079);
-}
-
-.b03-file__lasfree input {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--color-royal-amethyst, #3e0079);
-  cursor: pointer;
-}
-
-/* 켜져 있으면 스위치 자신도 켜진 티를 낸다 — 지형 컨테이너가 왜 잠겼는지의 근거. */
-.b03-file__lasfree:has(input:checked) {
-  border-color: var(--color-royal-amethyst, #3e0079);
-  background: var(--color-mist-violet, #edecff);
-  font-weight: var(--font-weight-medium, 500);
 }
 
 /* LAS 없이 설계를 켜면 지형 컨테이너는 받지 않는다 — 잠긴 것이 보이게 흐린다. */
@@ -282,7 +182,7 @@
 }
 
 .b03-file__card--disabled {
-  background: var(--color-paper, #f6f7fa);
+  background: var(--color-surface);
   border-style: dashed;
 }
 
@@ -324,20 +224,6 @@
   gap: var(--spacing-12);
 }
 
-.b03-file__group-hint {
-  font-size: var(--text-body-sm, 14px);
-  color: var(--color-slate, #615e6e);
-  margin: calc(var(--spacing-8) * -1) 0 0 0;
-}
-
-/* 제목 24px → 본문 크기(2026-09-03) — 컨테이너가 둘뿐이라 큰 제목이 자리만 먹었다. */
-.b03-file__group-title {
-  font-size: var(--text-body, 16px);
-  color: var(--color-deep-iris, #26114a);
-  font-family: var(--font-britti-sans, inherit);
-  margin: 0;
-}
-
 /* 카드가 좁아지면 한 줄에 제목·상태·[선택]이 못 들어가 제목이 글자 단위로 접힌다
    (2026-09-03 실측: 안내 패널을 연 상태에서 카드 폭 210px). 폭이 모자라면 열을 줄인다. */
 /* ⚠ `minmax(260px, …)` 는 **칸이 260px 보다 좁아질 수 없다**는 뜻이라, 컨테이너가
diff --git a/B03_FileInput/B03_FileInput_UI_Style_Card.css b/B03_FileInput/B03_FileInput_UI_Style_Card.css
index 74cc766e2..4c65d3139 100644
--- a/B03_FileInput/B03_FileInput_UI_Style_Card.css
+++ b/B03_FileInput/B03_FileInput_UI_Style_Card.css
@@ -14,50 +14,34 @@
   width: 14px;
   height: 14px;
   border-width: 2px;
-  border-color: rgb(255 255 255 / 40%);
+  border-color: color-mix(in srgb, var(--color-primary-text) 40%, transparent);
   border-top-color: var(--color-primary-text);
 }
 
-/* Wiza 8px radius 카드 */
-/* 카드 한 장 = 파일 한 칸. 빈 칸은 **한 줄**로 끝난다(2026-09-03 사용자 지시) —
-   파일이 붙거나 올라가는 중에만 아래 내용(파일명·진행바)이 펼쳐진다. */
+/* 카드 한 장 = 파일 한 칸(카드 부품) · 빈 칸은 **한 줄**로 끝난다(2026-09-03 사용자 지시) —
+   파일이 붙거나 올라가는 중에만 아래 내용(파일명·진행바)이 펼쳐진다. 상태는 선 색으로 가른다. */
 .b03-file__card {
-  padding: var(--spacing-12) var(--spacing-16);
-  border: 1px solid var(--color-mist, #e6e2e3);
-  border-radius: var(--radius-cards, 8px);
-  background: var(--color-canvas, #ffffff);
-  box-shadow: var(--shadow-sm);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-8);
-  transition:
-    transform var(--transition-base, 0.2s),
-    border-color var(--transition-base, 0.2s),
-    box-shadow var(--transition-base, 0.2s);
-}
-
-.b03-file__card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-  border-color: var(--color-royal-amethyst, #3e0079);
 }
 
 .b03-file__card--selected {
-  border-color: var(--color-royal-amethyst, #3e0079);
-  background: var(--color-paper, #f6f7fa);
+  border-color: var(--color-accent);
+  background: var(--color-surface);
 }
 
 .b03-file__card--uploading {
-  border-color: var(--color-royal-amethyst, #3e0079);
-  box-shadow: var(--shadow-lg-2);
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-lg);
 }
 
 .b03-file__card--completed {
-  border-color: #10b981; /* Success Green */
+  border-color: var(--color-success);
 }
 
 .b03-file__card--error {
-  border-color: var(--color-danger, #dc2626);
+  border-color: var(--color-danger);
 }
 
 /* 카드가 좁아졌다(컨테이너 2열 × 카드 2열, 2026-08-31). 격자로 고정하면 제목이
@@ -83,13 +67,13 @@
   flex: 0 0 auto;
   width: 28px;
   height: 28px;
-  border-radius: var(--radius-icons, 8px);
+  border-radius: var(--radius-icons);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-royal-amethyst, #3e0079);
-  background: var(--color-mist-violet, #edecff);
-  font-size: var(--text-body-sm, 14px);
+  color: var(--color-accent);
+  background: var(--color-accent-soft);
+  font-size: var(--text-body-sm);
   margin-right: var(--spacing-8); /* 아이콘 우측 마진 추가 (아이콘 좌측 여유 확대 효과) */
 }
 
@@ -102,9 +86,9 @@
 }
 
 .b03-file__card-label {
-  color: var(--color-deep-iris, #26114a);
-  font-size: var(--text-body-sm, 14px);
-  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text);
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-medium);
   /* 제목은 한 줄로 두고 모자라면 말줄임 — 접히면 카드가 세로로 길어진다(2026-09-03). */
   white-space: nowrap;
   overflow: hidden;
@@ -114,8 +98,8 @@
 .b03-file__card-ext,
 .b03-file__file-size,
 .b03-file__progress-info {
-  color: var(--color-slate, #615e6e);
-  font-size: var(--text-caption, 12px);
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption);
 }
 
 .b03-file__card-badge-container {
@@ -125,28 +109,9 @@
   margin-right: var(--spacing-4);
 }
 
-.b03-file__card-remove {
-  width: 24px;
-  height: 24px;
-  border: 1px solid var(--color-mist, #e6e2e3);
-  border-radius: var(--radius-buttons, 8px);
-  color: var(--color-slate, #615e6e);
-  background: var(--color-canvas, #ffffff);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--text-body-sm, 14px);
-  line-height: 1;
-  padding: 0;
-  margin-left: var(--spacing-8); /* 취소 버튼 좌측 여유 추가 (취소 버튼 우측 여유 확보) */
-  transition: all var(--transition-base, 0.2s);
-}
-
-.b03-file__card-remove:hover {
-  color: var(--color-danger, #dc2626);
-  border-color: var(--color-danger, #dc2626);
-  background: #fef2f2;
+/* 파일 없는 칸에서는 지움 단추를 접는다(아이콘 단추 부품은 hidden 보다 display 가 앞섬) */
+.b03-file__card-remove[hidden] {
+  display: none;
 }
 
 .b03-file__card-content {
@@ -160,24 +125,6 @@
   display: none;
 }
 
-/* [선택]은 제목 줄 오른쪽 끝의 작은 버튼 — 종전 전폭 40px 버튼이 카드 높이를 키웠다. */
-.b03-file__card-select {
-  flex: 0 0 auto;
-  min-height: 26px;
-  padding: 0 var(--spacing-8);
-  border: 1px solid var(--color-mist, #e6e2e3);
-  border-radius: var(--radius-buttons, 8px);
-  color: var(--color-deep-iris, #26114a);
-  background: var(--color-canvas, #ffffff);
-  font-weight: var(--font-weight-medium, 500);
-  font-size: var(--text-caption, 12px);
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    background var(--transition-base, 0.2s),
-    border-color var(--transition-base, 0.2s);
-}
-
 .b03-file__file-info {
   display: flex;
   flex-direction: column;
@@ -186,9 +133,9 @@
 }
 
 .b03-file__file-name {
-  color: var(--color-deep-iris, #26114a);
-  font-size: var(--text-body-sm, 14px);
-  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text);
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-medium);
   overflow-wrap: anywhere;
 }
 
@@ -204,36 +151,15 @@
   display: flex;
 }
 
-.b03-file__progress-bar-container {
-  width: 100%;
-  height: 6px;
-  overflow: hidden;
-  border-radius: var(--radius-pills, 1440px);
-  background: var(--color-mist, #e6e2e3);
-}
-
-.b03-file__progress-bar {
-  width: 0;
-  height: 100%;
-  border-radius: var(--radius-pills, 1440px);
-  background: var(--color-royal-amethyst, #3e0079);
-  transition: width var(--transition-base, 0.2s);
-}
-
 .b03-file__progress-info {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
-.b03-file__error-message {
+/* 오류 띠(띠 알림 부품)는 오류 난 카드에서만 보인다 */
+.b03-file__card .b03-file__error-message {
   display: none;
-  padding: var(--spacing-8) var(--spacing-12);
-  border-radius: var(--radius-cards, 8px);
-  color: var(--color-danger, #dc2626);
-  background: #fef2f2;
-  font-size: var(--text-caption, 12px);
-  border: 1px solid rgba(220, 38, 38, 0.15);
 }
 
 .b03-file__card--empty .b03-file__file-info,
@@ -260,9 +186,9 @@
   width: 100%;
   height: 120px;
   overflow: hidden;
-  border: 1px solid var(--color-border, #dcdce6);
-  border-radius: var(--radius-cards, 8px);
-  background: var(--color-surface, #fff);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface);
 }
 
 .b03-file__preview svg {
@@ -274,7 +200,7 @@
 /* 라이다 탑뷰 점 그림 — 점이 5천 개라 선 하나로 묶어 그린다. */
 .b03-file__preview-cloud {
   fill: none;
-  stroke: var(--color-text-muted, #5a5a72);
+  stroke: var(--color-text-muted);
   stroke-linecap: round;
   stroke-opacity: 0.55;
   stroke-width: 0.7;
@@ -286,7 +212,7 @@
 .b03-file__preview-thumb {
   max-width: 100%;
   max-height: 100%;
-  border: 1px dashed var(--color-border, #9aa);
+  border: 1px dashed var(--color-border);
   image-rendering: pixelated;
   object-fit: contain;
 }
@@ -302,24 +228,24 @@
 }
 
 .b03-file__preview-fact {
-  color: var(--color-text, #1c1c28);
+  color: var(--color-text);
   font-size: var(--text-body, 15px);
   font-weight: 600;
 }
 
 .b03-file__preview-fact-sub {
-  color: var(--color-text-muted, #5a5a72);
-  font-size: var(--text-caption, 12px);
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
 }
 
 .b03-file__preview-empty {
-  color: var(--color-text-muted, #8a8aa0);
-  font-size: var(--text-caption, 12px);
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
 }
 
 .b03-file__preview-extent {
-  fill: color-mix(in srgb, var(--color-border, #9aa) 12%, transparent);
-  stroke: var(--color-border, #9aa);
+  fill: color-mix(in srgb, var(--color-border) 12%, transparent);
+  stroke: var(--color-border);
   stroke-dasharray: 4 3;
   stroke-width: 1;
 }
@@ -328,7 +254,7 @@
   fill: none;
   /* 계획노선 선 색 — 녹색(2026-09-04 사용자 지시). 지형 범위를 벗어나면 아래에서
      붉은색으로 덮어써 경고로 쓴다. */
-  stroke: var(--color-success, #16a34a);
+  stroke: var(--color-success);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 1.5;
@@ -336,11 +262,11 @@
 
 /* 계획노선이 지형 자료 범위를 벗어난 경우 — 눈으로 바로 잡히게 경고색. */
 .b03-file__preview.is-warning .b03-file__preview-route {
-  stroke: var(--color-danger, #d33);
+  stroke: var(--color-danger);
 }
 
 .b03-file__preview.is-warning .b03-file__preview-extent {
-  stroke: var(--color-danger, #d33);
+  stroke: var(--color-danger);
   stroke-dasharray: 3 2;
 }
 
@@ -355,7 +281,7 @@
 }
 
 .b03-file__card--error .b03-file__error-message {
-  display: block;
+  display: flex;
 }
 
 .b03-file__card--error .b03-file__progress-section {
diff --git a/B03_FileInput/B03_FileInput_UI_Style_Temp.css b/B03_FileInput/B03_FileInput_UI_Style_Temp.css
index 11edd0e06..c9aa2a262 100644
--- a/B03_FileInput/B03_FileInput_UI_Style_Temp.css
+++ b/B03_FileInput/B03_FileInput_UI_Style_Temp.css
@@ -68,7 +68,7 @@
 
 .b03-file__temp-option.is-selected {
   border-color: var(--color-primary);
-  background: var(--color-mist-violet);
+  background: var(--color-accent-soft);
 }
 
 .b03-file__temp-option-files {
diff --git a/B03_FileInput/B03_FileInput_UI_Support.ts b/B03_FileInput/B03_FileInput_UI_Support.ts
index 9caaa008f..79f7b3891 100644
--- a/B03_FileInput/B03_FileInput_UI_Support.ts
+++ b/B03_FileInput/B03_FileInput_UI_Support.ts
@@ -227,7 +227,7 @@ export function createFileCardTemplate(): HTMLTemplateElement {
   const template = document.createElement("template");
   template.id = "file-card-template";
   template.innerHTML = `
-    <article class="b03-file__card b03-file__card--empty">
+    <article class="ui-card b03-file__card b03-file__card--empty" data-pad="12">
       <div class="b03-file__card-header">
         <span class="b03-file__card-icon" aria-hidden="true"></span>
         <div class="b03-file__card-heading">
@@ -235,8 +235,8 @@ export function createFileCardTemplate(): HTMLTemplateElement {
           <span class="b03-file__card-ext"></span>
         </div>
         <div class="b03-file__card-badge-container"></div>
-        <button class="b03-file__card-select" type="button"></button>
-        <button class="b03-file__card-remove" type="button"></button>
+        <span data-slot="select"></span>
+        <span data-slot="remove"></span>
       </div>
       <div class="b03-file__card-content">
         <input class="b03-file__slot-input" type="file" />
@@ -246,16 +246,14 @@ export function createFileCardTemplate(): HTMLTemplateElement {
         </div>
         <div class="b03-file__preview"></div>
         <div class="b03-file__progress-section">
-          <div class="b03-file__progress-bar-container">
-            <div class="b03-file__progress-bar"></div>
-          </div>
+          <span data-slot="progress"></span>
           <div class="b03-file__progress-info">
             <span class="b03-file__progress-bytes"></span>
             <span class="b03-file__progress-speed"></span>
             <span class="b03-file__progress-eta"></span>
           </div>
         </div>
-        <div class="b03-file__error-message" role="alert"></div>
+        <span data-slot="error"></span>
       </div>
     </article>
   `;
diff --git a/B10_Payment/B10_Payment_UI_Page.ts b/B10_Payment/B10_Payment_UI_Page.ts
index 3a6ddb7ef..973278451 100644
--- a/B10_Payment/B10_Payment_UI_Page.ts
+++ b/B10_Payment/B10_Payment_UI_Page.ts
@@ -1,4 +1,6 @@
-import { createButton, createTag } from "@ui/ui_template_elements";
+import { createBadge } from "@ui/ui_template_badge";
+import { createBanner } from "@ui/ui_template_banner";
+import { createButton } from "@ui/ui_template_elements";
 import { section, table, text } from "@ui/ui_template_general_blocks";
 import { createGeneralLayout } from "@ui/ui_template_general_layout";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
@@ -13,15 +15,13 @@ export function renderB10Payment(root: HTMLElement): void {
   invoiceBody.className = "b10-payment__summary";
   const invoiceDescription = document.createElement("p");
   invoiceDescription.textContent = L("B10_Payment_Invoice_Description");
-  invoiceBody.append(invoiceDescription, createTag(L("B10_Payment_Invoice_Status"), "neutral"));
+  invoiceBody.append(invoiceDescription, createBadge(L("B10_Payment_Invoice_Status"), "neutral"));
 
   const invoiceSection = section(L("B10_Payment_Invoice_Title"), invoiceBody, true, [
     createButton({ label: L("B10_Payment_Invoice_Request"), disabled: true }),
   ]);
 
-  const depositNote = document.createElement("p");
-  depositNote.className = "b10-payment__note";
-  depositNote.textContent = L("B10_Payment_Deposit_Note");
+  const depositNote = createBanner({ tone: "info", text: L("B10_Payment_Deposit_Note") });
   const depositBody = document.createElement("div");
   depositBody.className = "b10-payment__summary";
   depositBody.append(
diff --git a/B10_Payment/B10_Payment_UI_Style.css b/B10_Payment/B10_Payment_UI_Style.css
index 76d5a4378..c016deb8a 100644
--- a/B10_Payment/B10_Payment_UI_Style.css
+++ b/B10_Payment/B10_Payment_UI_Style.css
@@ -4,11 +4,3 @@
   gap: var(--spacing-16);
   color: var(--color-text-body);
 }
-
-.b10-payment__note {
-  padding: var(--spacing-16);
-  border-radius: var(--radius-cards);
-  background: var(--color-surface);
-  color: var(--color-text-secondary);
-  font-size: var(--text-body-sm);
-}
diff --git a/B11_Status/B11_Status_UI_Page.ts b/B11_Status/B11_Status_UI_Page.ts
index b4f079f26..ec50067ab 100644
--- a/B11_Status/B11_Status_UI_Page.ts
+++ b/B11_Status/B11_Status_UI_Page.ts
@@ -1,4 +1,5 @@
-import { createButton, createTag } from "@ui/ui_template_elements";
+import { createBadge } from "@ui/ui_template_badge";
+import { createButton, createCard } from "@ui/ui_template_elements";
 import { section } from "@ui/ui_template_general_blocks";
 import { createGeneralLayout } from "@ui/ui_template_general_layout";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
@@ -9,8 +10,9 @@ function L(key: keyof typeof ui_locales): string {
 }
 
 function buildStatusFlow(): HTMLElement {
-  const flow = document.createElement("ol");
+  const flow = document.createElement("div");
   flow.className = "b11-status__flow";
+  flow.setAttribute("role", "list");
   const steps = [
     L("B11_Status_Step_Request"),
     L("B11_Status_Step_Issue"),
@@ -18,11 +20,14 @@ function buildStatusFlow(): HTMLElement {
     L("B11_Status_Step_Complete"),
   ];
   for (const label of steps) {
-    const item = document.createElement("li");
-    item.className = "b11-status__step";
     const title = document.createElement("strong");
     title.textContent = label;
-    item.append(title, createTag(L("B11_Status_NotStarted"), "neutral"));
+    const item = createCard({
+      body: [title, createBadge(L("B11_Status_NotStarted"), "neutral")],
+      pad: 16,
+    });
+    item.classList.add("b11-status__step");
+    item.setAttribute("role", "listitem");
     flow.append(item);
   }
   return flow;
diff --git a/B11_Status/B11_Status_UI_Style.css b/B11_Status/B11_Status_UI_Style.css
index 9d87977fe..03ca7bb8b 100644
--- a/B11_Status/B11_Status_UI_Style.css
+++ b/B11_Status/B11_Status_UI_Style.css
@@ -2,20 +2,10 @@
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--spacing-16);
-  margin: 0;
-  padding: 0;
-  list-style: none;
 }
 
-.b11-status__step {
-  display: flex;
-  flex-direction: column;
+.b11-status__step > .ui-card__body {
   gap: var(--spacing-12, var(--spacing-8));
-  padding: var(--spacing-16);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  background: var(--color-surface);
-  color: var(--color-text-body);
 }
 
 .b11-status__download {
diff --git a/resources/tester/helper_130_b07_plan_manage.cjs b/resources/tester/helper_130_b07_plan_manage.cjs
index 38666947f..2fddd1fbe 100644
--- a/resources/tester/helper_130_b07_plan_manage.cjs
+++ b/resources/tester/helper_130_b07_plan_manage.cjs
@@ -236,6 +236,7 @@ const { loadTs } = makeLoader({
         openDrawing: (item) => API.fetchDesignDrawing("p1", item.id),
         syncDrawings: (_, list) => calls.push(["sync", list.length]),
       };
+    if (request.endsWith(".css")) return {}; // 부품 CSS(552-3) — 트랜스파일 안 함
     if (request.startsWith(".")) return loadTs(path.join(path.dirname(full), `${request}.ts`));
     throw new Error(`stub 없음: ${request}`);
   },
diff --git a/resources/tester/helper_153_b07_cross_layout.cjs b/resources/tester/helper_153_b07_cross_layout.cjs
index 5077e3c5c..fa5829c05 100644
--- a/resources/tester/helper_153_b07_cross_layout.cjs
+++ b/resources/tester/helper_153_b07_cross_layout.cjs
@@ -94,6 +94,7 @@ const { loadTs } = makeLoader({
         currentLanguageIndex: 0,
         ui_locales: new Proxy({}, { get: (_, key) => [String(key)] }),
       };
+    if (request.endsWith(".css")) return {}; // 부품 CSS(552-3) — 트랜스파일 안 함
     if (request.startsWith(".")) {
       const target = path.join(path.dirname(full), `${request}.ts`);
       return fs.existsSync(target) ? loadTs(target) : {};
diff --git a/resources/tester/helper_280_5_b07_settings.cjs b/resources/tester/helper_280_5_b07_settings.cjs
index e4fe87368..eb47a7b6c 100644
--- a/resources/tester/helper_280_5_b07_settings.cjs
+++ b/resources/tester/helper_280_5_b07_settings.cjs
@@ -206,6 +206,7 @@ const { loadTs } = makeLoader({
     if (STUBS[request]) return STUBS[request];
     if (request === "@ui/ui_template_collapsible")
       return loadTs(path.join(UI, "ui_template_collapsible.ts"));
+    if (request.endsWith(".css")) return {}; // 부품 CSS(552-3) — 트랜스파일 안 함
     if (request.startsWith(".")) {
       const target = path.join(path.dirname(full), `${request}.ts`);
       return fs.existsSync(target) ? loadTs(target) : {};
diff --git a/resources/tester/helper_311_panel_folded.cjs b/resources/tester/helper_311_panel_folded.cjs
index 1f07b89b8..bcb97353f 100644
--- a/resources/tester/helper_311_panel_folded.cjs
+++ b/resources/tester/helper_311_panel_folded.cjs
@@ -140,6 +140,7 @@ const { loadTs } = makeLoader({
     if (request === "@ui/ui_template_collapsible")
       return loadTs(path.join(ROOT, "ui_template", "ui_template_collapsible.ts"));
     if (request.endsWith(".css")) return {};
+    if (request.endsWith(".css")) return {}; // 부품 CSS(552-3) — 트랜스파일 안 함
     if (request.startsWith(".")) return loadTs(`${path.resolve(path.dirname(full), request)}.ts`);
     return require(request);
   },
diff --git a/resources/tester/test_290_1_project_purge.py b/resources/tester/test_290_1_project_purge.py
index bc5e4311a..5b0e27f4f 100644
--- a/resources/tester/test_290_1_project_purge.py
+++ b/resources/tester/test_290_1_project_purge.py
@@ -60,5 +60,7 @@ def test_빈_초안은_고침_아님_취향은_둠(out):
 def test_공용_이동_한_곳에서_부름():
     nav = (ROOT / "A00_Common/b_workflow_nav.ts").read_text(encoding="utf-8")
     assert "return enterProject(" in nav and "./b_project_switch" in nav
-    ui = (ROOT / "ui_template/ui_template_elements.ts").read_text(encoding="utf-8")
-    assert 'cancelLabel = "취소"' in ui and "label: cancelLabel" in ui
+    ui = (ROOT / "ui_template/ui_template_modal.ts").read_text(
+        encoding="utf-8"
+    )  # 확인창 = 부품(552-3)
+    assert 'cancelLabel = "취소"' in ui and "okLabel: confirmLabel, cancelLabel" in ui
diff --git a/resources/tester/test_505_2_save_pick.py b/resources/tester/test_505_2_save_pick.py
index 06fc40d80..af2974ee5 100644
--- a/resources/tester/test_505_2_save_pick.py
+++ b/resources/tester/test_505_2_save_pick.py
@@ -82,8 +82,8 @@ def test_1_가림막_저장도_도중_고침_검사() -> None:
     assert "const touched = !route && designSignature(ctx.projectId) !== sent;" in save
     assert "if (touched && locked)" in save and "저장 중 고친 값은 아직 저장 안 됨" in save
     assert "!locked && designSignature" not in save
-    elements = _read("ui_template/ui_template_elements.ts")
-    assert "keydown" not in elements[elements.index("function ensureOverlay") :][:1200]
+    toast = _read("ui_template/ui_template_toast.ts")  # 가림막 = 부품 「알림」(552-3)
+    assert "keydown" not in toast[toast.index("function ensureOverlay") :][:1200]
 
 
 def test_8_저장_중_초기화_막음() -> None:
diff --git a/resources/tester/test_552_3_banner.py b/resources/tester/test_552_3_banner.py
index f3f7691eb..fd30f9f4f 100644
--- a/resources/tester/test_552_3_banner.py
+++ b/resources/tester/test_552_3_banner.py
@@ -22,4 +22,4 @@ def test_banner():
     assert 'tone === "success" ? "✓ "' in ts  # 색만으로 안 가름
     for tone in ("warning", "danger", "success"):
         assert f".ui-banner--{tone}" in css
-    assert '"aria-label": "닫기"' in ts
+    assert 'createIconButton({ icon: "x", title: "닫기", size: 20 })' in ts  # 단추 부품(552-2)
diff --git a/resources/tester/test_552_3_drop.py b/resources/tester/test_552_3_drop.py
new file mode 100644
index 000000000..83ce37c2f
--- /dev/null
+++ b/resources/tester/test_552_3_drop.py
@@ -0,0 +1,20 @@
+"""552-3 부품 「파일 놓기 칸」 지킴 시험 — 끌어 옴(.is-over) · 고르기 단추(단추 부품 28) · 진행 · 오류 · 막힘."""
+
+from test_552_3_card import _text, check_part
+
+
+def test_drop():
+    check_part(
+        "drop",
+        "ui_template_drop.ts",
+        ["ui_template_drop.css"],
+        ["createDrop"],
+        ["ui-drop", "ui-drop__text", "ui-drop__hint", "ui-drop__error", "is-over"],
+    )
+    ts, css = _text("ui_template_drop.ts"), _text("ui_template_drop.css")
+    assert 'label: "파일 고르기"' in ts and "size: 28" in ts
+    assert 'input.value = ""' in ts  # 같은 파일 다시 고름
+    assert "createProgressBar({ thick: 6 })" in ts
+    assert '.ui-drop:is(.is-over, [data-state="hover"])' in css
+    assert '.ui-drop:is(.is-error, [data-state="error"])' in css
+    assert "min-height: 48px" in css
diff --git a/resources/tester/test_552_3_modal.py b/resources/tester/test_552_3_modal.py
new file mode 100644
index 000000000..7b2cd7172
--- /dev/null
+++ b/resources/tester/test_552_3_modal.py
@@ -0,0 +1,32 @@
+"""552-3 부품 「모달 · 확인창」 지킴 시험 — 폭 단 · 확인 · 위험 확인 · 글 묻기(prompt 대신) · 옛 부름 꼴 · 가림막 색."""
+
+from test_552_3_card import _text, check_part
+
+
+def test_modal():
+    check_part(
+        "modal",
+        "ui_template_modal.ts",
+        ["ui_template_modal.css"],
+        ["openModal", "buildModal", "confirmPanel", "askConfirm", "askText", "showConfirmDialog"],
+        [
+            "ui-modal",
+            "ui-modal__top",
+            "ui-modal__body",
+            "ui-modal--wide",
+            "ui-confirm",
+            "ui-confirm__input",
+        ],
+    )
+    ts, css = _text("ui_template_modal.ts"), _text("ui_template_modal.css")
+    assert 'width?: "24rem" | "40rem" | "960px"' in ts
+    for w in ("24rem", "40rem", "960px"):
+        assert f'.ui-modal[data-width="{w}"]' in css
+    assert 'variant: opts.danger ? "danger" : "filled"' in ts
+    assert "r.ok ? r.text : null" in ts  # 취소 = null(prompt 와 같음)
+    assert "background-color: var(--color-scrim);" in css and "rgba(" not in css
+    elements = _text("ui_template_elements.ts")
+    assert (
+        'export { askConfirm, askText, showConfirmDialog } from "./ui_template_modal";' in elements
+    )
+    assert "export function showConfirmDialog" not in elements  # 한 벌
diff --git a/resources/tester/test_552_3_row_menu.py b/resources/tester/test_552_3_row_menu.py
new file mode 100644
index 000000000..b7fe5b5a0
--- /dev/null
+++ b/resources/tester/test_552_3_row_menu.py
@@ -0,0 +1,25 @@
+"""552-3 부품 「⋯ · 오른쪽 메뉴」 지킴 시험 — 아이콘 단추 28 · 위험 = 확인창 · 한 번에 하나 장부 · 대시보드 rowMenu 가 부품을 씀."""
+
+from test_552_3_card import ROOT, _text
+
+
+def test_row_menu():
+    ts = _text("ui_template_context_menu.ts")
+    head = ts[ts.index("부품 「⋯ · 오른쪽 메뉴」") :].split("*/", 1)[0]
+    for word in ("꼴", "크기", "상태", "쓰는 법", "대신하는"):
+        assert word in head, word
+    assert "export function createRowMenu" in ts
+    assert 'createIconButton({ icon: "dots", title: "더 보기", size: 28 })' in ts
+    assert "if (open) enterMenu(entry);" in ts and "showConfirmDialog(" in ts
+    css = _text("ui_template_context_menu.css")
+    mine = css[css.index("(552-3)") :]
+    assert "rgb" not in mine and "#" not in mine and "--b01-" not in mine
+    assert '.ui-row-menu__item:is(:hover, [data-state="hover"]):not(:disabled)' in mine
+    assert ".ui-row-menu__item.is-danger" in mine and ".ui-row-menu__item:disabled" in mine
+    kit = (ROOT / "B01_Dashboard" / "B01_Dashboard_UI_PageKit.ts").read_text(encoding="utf-8")
+    assert "createRowMenu as rowMenu, type RowMenuItem" in kit
+    from test_552_3_card import kit_line
+
+    line = kit_line("row-menu")
+    assert 'file: "ui_template_context_menu.ts"' in line and "demo:" in line
+    assert "legacy: true" not in line
diff --git a/resources/tester/test_552_3_setting_row.py b/resources/tester/test_552_3_setting_row.py
new file mode 100644
index 000000000..46d877c99
--- /dev/null
+++ b/resources/tester/test_552_3_setting_row.py
@@ -0,0 +1,22 @@
+"""552-3 부품 「설정 줄」 지킴 시험 — 줄 52 · 오른쪽 55 % · 빈 값 「-」 · 대시보드 settingRow 가 부품을 씀."""
+
+from test_552_3_card import ROOT, _text, check_part
+
+
+def test_setting_row():
+    check_part(
+        "setting-row",
+        "ui_template_setting_row.ts",
+        ["ui_template_setting_row.css"],
+        ["settingRow", "settingCard"],
+        ["ui-setting-row", "ui-setting-row__text", "ui-setting-row__side", "ui-setting-card"],
+    )
+    css = _text("ui_template_setting_row.css")
+    assert "min-height: 52px" in css and "max-width: 55%" in css
+    b01 = ROOT / "B01_Dashboard"
+    kit = (b01 / "B01_Dashboard_UI_PageKit.ts").read_text(encoding="utf-8")
+    assert (
+        'export { settingCard, settingRow, valueText } from "@ui/ui_template_setting_row";' in kit
+    )
+    profile = (b01 / "B01_Dashboard_UI_Profile.ts").read_text(encoding="utf-8")
+    assert ".ui-setting-row__text" in profile and ".b01-pg-row" not in profile
diff --git a/resources/tester/test_552_3_table.py b/resources/tester/test_552_3_table.py
new file mode 100644
index 000000000..ff8bb6a68
--- /dev/null
+++ b/resources/tester/test_552_3_table.py
@@ -0,0 +1,23 @@
+"""552-3 부품 「표」 지킴 시험 — 일반 40 · 데이터 28 · ⋯ 칸 · 빈 줄 · 줄 상태 · 대시보드 dataTable 이 부품을 씀."""
+
+from test_552_3_card import ROOT, _text, check_part
+
+
+def test_table():
+    check_part(
+        "table",
+        "ui_template_table.ts",
+        ["ui_template_table.css"],
+        ["createTable", "tableShell", "tableRow", "emptyRow"],
+        ["ui-table", "ui-table--data", "ui-table-wrap", "ui-table__menucell", "ui-table__empty"],
+    )
+    css = _text("ui_template_table.css")
+    assert "height: 40px" in css and "height: 28px" in css
+    for state in (".is-active", ".is-changed", ".is-removed", "tr.is-sub"):
+        assert state in css, state
+    kit = (ROOT / "B01_Dashboard" / "B01_Dashboard_UI_PageKit.ts").read_text(encoding="utf-8")
+    assert "createTable as dataTable," in kit  # 한 벌 · 부름 꼴 그대로
+    pages = (ROOT / "B01_Dashboard" / "B01_Dashboard_UI_Style_Pages.css").read_text(
+        encoding="utf-8"
+    )
+    assert ".b01-pg-table" not in pages
diff --git a/resources/tester/test_553_1_pages.py b/resources/tester/test_553_1_pages.py
new file mode 100644
index 000000000..8d28ada8d
--- /dev/null
+++ b/resources/tester/test_553_1_pages.py
@@ -0,0 +1,59 @@
+"""553-1 B02 · B03 · B04 · B07 페이지 부품 옮김 지킴 시험 — 자체 변종이 부품으로 바뀐 자리 · 가이드 촬영 선택자 · 날 색 없음."""
+
+import json
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+OLD_ALIAS = re.compile(r"--color-(royal-amethyst|deep-iris|mist-violet|plum-velvet|lavender-wash)")
+RAW_COLOR = re.compile(r"#[0-9a-fA-F]{3,8}\b|\brgba?\(")
+
+
+def _src(folder: str, suffix: str) -> dict[str, str]:
+    return {p.name: p.read_text(encoding="utf-8") for p in (ROOT / folder).glob(f"*{suffix}")}
+
+
+def _guide_selectors(page: str, prefix: str) -> set[str]:
+    text = (ROOT / f"A05_EduDetail/guide/{page}/_scenes.json").read_text(encoding="utf-8")
+    return set(re.findall(rf"\.{re.escape(prefix)}[a-z0-9_-]+", text))
+
+
+def _defined(folder: str, name: str) -> bool:
+    body = "".join(_src(folder, ".ts").values()) + "".join(_src(folder, ".css").values())
+    return name.lstrip(".") in body
+
+
+def test_b03_guide_selectors_alive():
+    """가이드 촬영 장면이 잡는 B03 클래스는 소스에 살아 있어야 함."""
+    for sel in _guide_selectors("B03", "b03-file__"):
+        assert _defined("B03_FileInput", sel), f"가이드 선택자 {sel} 가 B03 소스에 없음"
+
+
+def test_b03_uses_parts():
+    ts = "".join(_src("B03_FileInput", ".ts").values())
+    for part in (
+        "createBanner",
+        "createProgressBar",
+        "createToggle",
+        "createPanelHead",
+        "createIconButton",
+        "createText",
+    ):
+        assert part in ts, f"B03 이 부품 {part} 를 안 씀"
+    support = _src("B03_FileInput", ".ts")["B03_FileInput_UI_Support.ts"]
+    assert "<button" not in support  # 날 단추 없음 — 단추는 부품이 만듦
+    assert 'class="ui-card b03-file__card' in support  # 파일 카드 = 카드 부품
+
+
+def test_b03_css_common_values_only():
+    for name, css in _src("B03_FileInput", ".css").items():
+        assert not OLD_ALIAS.search(css), f"{name}: 옛 보라 별칭"
+        body = re.sub(r"/\*.*?\*/", "", css, flags=re.S)
+        assert not RAW_COLOR.search(body), f"{name}: 날 색"
+
+
+def test_b02_no_dead_select_and_no_raw_widgets():
+    css = "".join(_src("B02_ProjRegister", ".css").values())
+    assert "b02-proj__select" not in css  # 안 쓰던 고르기 화살표 CSS — 고르기 부품이 냄
+    ts = "".join(_src("B02_ProjRegister", ".ts").values())
+    assert "<button" not in ts and 'createElement("button")' not in ts
diff --git a/resources/tester/test_553_7_public_pages.py b/resources/tester/test_553_7_public_pages.py
new file mode 100644
index 000000000..5a46c8aa8
--- /dev/null
+++ b/resources/tester/test_553_7_public_pages.py
@@ -0,0 +1,117 @@
+"""553-7 공개 화면(A01~A09) · 로그인 · B10 · B11 부품 옮김 지킴 시험 — 서버 · 화면 없이 소스로.
+
+· A01~A05 = 공개 화면 틀(createPublicFrame) 한 벌 — 페이지마다 hero · section 복제 CSS 없음
+· 카드 = createCard · 알림 = createBanner · 배지 = createBadge · 여러 줄 = createInputField(multiline)
+· 페이지 CSS 에 날 색(#hex · rgb · 옛 보라 이름) 없음 · 죽은 A07_Register_UI_Page 없음
+"""
+
+from __future__ import annotations
+
+import re
+from pathlib import Path
+
+import pytest
+
+ROOT = Path(__file__).resolve().parents[2]
+
+PUBLIC_PAGES = {
+    "A01_Home/A01_Home_UI_Page.ts": ("A01_Home/A01_Home_UI_Style.css", "a01"),
+    "A02_ProgDetail/A02_ProgDetail_UI_Page.ts": (
+        "A02_ProgDetail/A02_ProgDetail_UI_Style.css",
+        "a02",
+    ),
+    "A03_CompDetail/A03_CompDetail_UI_Page.ts": (
+        "A03_CompDetail/A03_CompDetail_UI_Style.css",
+        "a03",
+    ),
+    "A04_NewsHistory/A04_NewsHistory_UI_Page.ts": (
+        "A04_NewsHistory/A04_NewsHistory_UI_Style.css",
+        "a04",
+    ),
+    "A05_EduDetail/A05_EduDetail_UI_Page.ts": ("A05_EduDetail/A05_EduDetail_UI_Style.css", "a05"),
+}
+CARD_PAGES = [
+    "A06_Login/A06_Login_UI_Auth_Page.ts",
+    "A07_Register/A07_Register_UI_Auth_Page.ts",
+    "A08_Support/A08_Support_UI_Page.ts",
+    "A09_Security/A09_Security_UI_Page.ts",
+]
+CSS_FILES = [css for css, _ in PUBLIC_PAGES.values()] + [
+    "A06_Login/A06_Login_UI_Style.css",
+    "A07_Register/A07_Register_UI_Style.css",
+    "A08_Support/A08_Support_UI_Style.css",
+    "A09_Security/A09_Security_UI_Style.css",
+    "B10_Payment/B10_Payment_UI_Style.css",
+    "B11_Status/B11_Status_UI_Style.css",
+]
+RAW_COLOR = re.compile(
+    r"#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(|var\(--(?:b01|draw)-|"
+    r"var\(--color-(?:deep-iris|mist-violet|slate|charcoal|ash|plum-velvet)\)"
+)
+
+
+def _text(rel: str) -> str:
+    return (ROOT / rel).read_text(encoding="utf-8")
+
+
+def _no_comments(css: str) -> str:
+    return re.sub(r"/\*.*?\*/", "", css, flags=re.S)
+
+
+@pytest.mark.parametrize("page", PUBLIC_PAGES)
+def test_public_page_uses_frame(page: str) -> None:
+    src = _text(page)
+    assert "createPublicFrame" in src
+    for tag in ("hero", "__inner", "__subtitle", "__ctas"):
+        assert tag not in src, f"{page}: 손 hero 조각 {tag} 남음"
+
+
+@pytest.mark.parametrize("page", PUBLIC_PAGES)
+def test_public_css_has_no_hero_copy(page: str) -> None:
+    css = _no_comments(_text(PUBLIC_PAGES[page][0]))
+    prefix = PUBLIC_PAGES[page][1]
+    assert f".{prefix}-hero" not in css
+    assert f".{prefix}-section" not in css
+
+
+@pytest.mark.parametrize("page", CARD_PAGES)
+def test_card_pages_use_card_part(page: str) -> None:
+    assert "createCard" in _text(page)
+
+
+@pytest.mark.parametrize("css", CSS_FILES)
+def test_page_css_no_raw_color(css: str) -> None:
+    assert not RAW_COLOR.search(_no_comments(_text(css)))
+
+
+def test_a07_agreement_uses_checkbox_and_collapsible() -> None:
+    src = _text("A07_Register/A07_Register_UI_Auth_Page.ts")
+    assert "createCheckbox" in src and "attachCollapsible" in src
+    assert "<details" not in src and 'createElement("details")' not in src
+    assert 'type = "checkbox"' not in src
+
+
+def test_a08_uses_banner_and_multiline_input() -> None:
+    src = _text("A08_Support/A08_Support_UI_Page.ts")
+    assert "createBanner" in src and "multiline" in src
+    assert "createTextAreaField" not in src and 'createElement("textarea")' not in src
+
+
+def test_b10_b11_use_parts() -> None:
+    b10 = _text("B10_Payment/B10_Payment_UI_Page.ts")
+    b11 = _text("B11_Status/B11_Status_UI_Page.ts")
+    assert "createBanner" in b10 and "createBadge" in b10 and "createTag" not in b10
+    assert "createCard" in b11 and "createBadge" in b11 and "createTag" not in b11
+    assert ".b10-payment__note" not in _text("B10_Payment/B10_Payment_UI_Style.css")
+    assert ".b11-status__step {" not in _text("B11_Status/B11_Status_UI_Style.css")
+
+
+def test_dead_register_page_gone() -> None:
+    assert not (ROOT / "A07_Register/A07_Register_UI_Page.ts").exists()
+
+
+def test_public_frame_wide_option() -> None:
+    ts = _text("ui_template/ui_template_public_layout.ts")
+    css = _text("ui_template/ui_template_public_layout.css")
+    assert "wide?: boolean" in ts
+    assert "[data-wide] .ui-public-frame__title" in css
diff --git a/ui_template/ui_template_banner.css b/ui_template/ui_template_banner.css
index 6955ea3c9..b1cb1f764 100644
--- a/ui_template/ui_template_banner.css
+++ b/ui_template/ui_template_banner.css
@@ -14,6 +14,9 @@
   font-size: 13px;
   line-height: 1.45;
 }
+.ui-banner[hidden] {
+  display: none;
+}
 .ui-banner--warning {
   --banner-tone: var(--color-warning);
 }
@@ -51,19 +54,4 @@
 }
 .ui-banner__close {
   flex: none;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: none;
-  color: var(--color-text-muted);
-  font: inherit;
-  font-size: var(--text-caption);
-  line-height: 20px;
-  cursor: pointer;
-}
-.ui-banner__close:is(:hover, [data-state="hover"]) {
-  background: var(--color-hover);
-  color: var(--color-text);
 }
diff --git a/ui_template/ui_template_banner.ts b/ui_template/ui_template_banner.ts
index 58b2d10e9..7e78d5ecf 100644
--- a/ui_template/ui_template_banner.ts
+++ b/ui_template/ui_template_banner.ts
@@ -2,7 +2,7 @@
  * ui_template_banner.ts
  * 부품 「띠 알림」(552-3 · 목록 25) — 화면 안에 머무는 알림 줄(토스트처럼 사라지지 않음).
  *   꼴   = 왼쪽 색 띠 + 옅은 바탕 · 갈래 넷(정보 · 경고 · 위험 · 성공 — 성공은 ✓ 같이) · 제목(굵게) · 펼침(`details` → 「자세히」)
- *          · 안 단추(`actions`) · 닫기(`onClose` → ✕)
+ *          · 안 단추(`actions`) · 닫기(`onClose` → ✕ 아이콘 단추 20)
  *   크기 = 글 13 · 줄 최소 32 · 여백 8 / 12
  *   상태 = 기본만
  *   쓰는 법 = `createBanner({ tone: "warning", text: "저장 안 한 고침이 있음", actions: [createButton(…)] })`
@@ -10,6 +10,7 @@
  *          · M01 `m01-master__notice` · `m01lab__warn` · M02 `m02-main__notice` · `m02-sod__banner` …(약 20 벌 · 목록 4장)
  * ========================================================================== */
 
+import { createIconButton } from "./ui_template_button";
 import { el } from "./ui_template_elements_base";
 import "./ui_template_banner.css";
 
@@ -50,11 +51,8 @@ export function createBanner(opts: BannerOptions): HTMLElement {
     root.append(el("div", { className: "ui-banner__actions", children: opts.actions }));
   if (opts.onClose) {
     const onClose = opts.onClose;
-    const close = el("button", {
-      className: "ui-banner__close",
-      text: "✕",
-      attrs: { type: "button", title: "닫기", "aria-label": "닫기" },
-    });
+    const close = createIconButton({ icon: "x", title: "닫기", size: 20 });
+    close.classList.add("ui-banner__close");
     close.addEventListener("click", () => {
       root.remove();
       onClose();
diff --git a/ui_template/ui_template_context_menu.css b/ui_template/ui_template_context_menu.css
index f688d3f96..14b30400e 100644
--- a/ui_template/ui_template_context_menu.css
+++ b/ui_template/ui_template_context_menu.css
@@ -62,3 +62,57 @@
   margin: var(--spacing-4) 0;
   background: var(--color-border);
 }
+
+/* ⋯ 줄 끝 메뉴(552-3) — 대시보드 꼴(단추 28 · 판 132 · 항목 줄 32) */
+.ui-row-menu {
+  position: relative;
+  display: inline-block;
+}
+.ui-row-menu__btn {
+  display: grid;
+  --ui-size-icon: 18px;
+}
+.ui-row-menu.is-open .ui-row-menu__btn {
+  background: var(--color-hover);
+  color: var(--color-text);
+}
+.ui-row-menu__pop {
+  position: absolute;
+  right: 0;
+  top: 30px;
+  z-index: var(--z-dropdown);
+  min-width: 132px;
+  padding: var(--spacing-4);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  text-align: left;
+}
+.ui-row-menu__item {
+  display: block;
+  width: 100%;
+  min-height: 32px;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--color-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ui-row-menu__item:is(:hover, [data-state="hover"]):not(:disabled) {
+  background: var(--color-hover);
+}
+.ui-row-menu__item:is(:active, [data-state="active"]):not(:disabled) {
+  background: var(--color-surface-sunken);
+}
+.ui-row-menu__item:disabled {
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+}
+.ui-row-menu__item.is-danger {
+  color: var(--color-danger);
+}
diff --git a/ui_template/ui_template_context_menu.ts b/ui_template/ui_template_context_menu.ts
index 514413a6c..79d58cc86 100644
--- a/ui_template/ui_template_context_menu.ts
+++ b/ui_template/ui_template_context_menu.ts
@@ -11,7 +11,9 @@
  * 모양은 공용 CSS 한 벌(`ui_template_context_menu.css` · `.ui-ctx-menu`) — 나무 메뉴와 같음(계획서 39-9b).
  * ========================================================================== */
 
+import { createIconButton } from "./ui_template_button";
 import "./ui_template_context_menu.css";
+import { showConfirmDialog } from "./ui_template_modal";
 
 /** 평면 항목 = [문구, 동작]. 하위 메뉴 항목 = {label, children} — 「글 ▸」 한 줄 · 올리거나 누르면
  *  오른쪽 옆 새 판(하위 메뉴 · 화면 오른쪽 끝이면 왼쪽) · → 열기 · ← 닫기(PLAN 246-2).
@@ -223,3 +225,74 @@ export function createMapContextMenu(blockClass: string): MapContextMenu {
     contains: (target) => target instanceof Node && element.contains(target),
   };
 }
+
+/* =============================================================================
+ * 부품 「⋯ · 오른쪽 메뉴」(552-3 · 목록 20)
+ *   꼴   = 줄 끝 ⋯(`createRowMenu` · 아이콘 단추 28 → 아래 판) · 오른쪽 누름 메뉴(`createMapContextMenu` · 위 · 하위판 ▸ · 구분선)
+ *          · 위험 항목(`danger` → 빨강 + 확인창 · `ownConfirm` 이면 확인창 없이)
+ *   크기 = ⋯ 단추 28(아이콘 18) · 항목 줄 32 · 판 최소 폭 132(⋯) / 160(오른쪽 누름)
+ *   상태 = 기본 · 마우스(항목 바탕) · 눌림(.is-open · 단추 바탕) · 막힘(항목 disabled)
+ *   쓰는 법 = `createRowMenu([{ label: "열기", onClick: open }, { label: "삭제", danger: true, onClick: drop }])`
+ *   대신하는 옛 변종 = B01 `rowMenu`(`.b01-pg-menu`) · `.b01-proj-menu__context-menu` · 시트 `.ss-toolbar__popover` · B06 `b06-design__more` · CAD `.cad-ribbon-overflow`
+ *   한 번에 하나 · 밖 누름 · Esc 로 닫힘 = 위 장부(enterMenu · leaveMenu)를 같이 씀
+ * ========================================================================== */
+
+export interface RowMenuItem {
+  label: string;
+  onClick: () => void;
+  /** 삭제 · 빼기 = 빨강 + 확인창 */
+  danger?: boolean;
+  /** 확인창 글(danger 일 때) */
+  confirm?: string;
+  /** 누르면 열리는 모달이 확인을 맡음 — 빨강만 · 확인창 없음 */
+  ownConfirm?: boolean;
+  disabled?: boolean;
+}
+
+/** 줄 끝 ⋯ — 열면 항목 · 밖을 누르면 닫힘 · danger 는 확인 뒤 실행 */
+export function createRowMenu(items: RowMenuItem[]): HTMLElement {
+  const wrap = document.createElement("div");
+  wrap.className = "ui-row-menu";
+  if (!items.length) return wrap;
+  const trigger = createIconButton({ icon: "dots", title: "더 보기", size: 28 });
+  trigger.classList.add("ui-row-menu__btn");
+  trigger.setAttribute("aria-haspopup", "menu");
+  trigger.setAttribute("aria-expanded", "false");
+  const pop = document.createElement("div");
+  pop.className = "ui-row-menu__pop";
+  pop.setAttribute("role", "menu");
+  pop.hidden = true;
+  const entry: MenuEntry = {
+    close: () => setOpen(false),
+    contains: (target) => target instanceof Node && wrap.contains(target),
+  };
+  function setOpen(open: boolean): void {
+    pop.hidden = !open;
+    trigger.setAttribute("aria-expanded", String(open));
+    wrap.classList.toggle("is-open", open);
+    if (open) enterMenu(entry);
+    else leaveMenu(entry);
+  }
+  for (const item of items) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = `ui-row-menu__item${item.danger ? " is-danger" : ""}`;
+    b.textContent = item.label;
+    b.disabled = !!item.disabled;
+    b.setAttribute("role", "menuitem");
+    b.addEventListener("click", () => {
+      setOpen(false);
+      if (!item.danger || item.ownConfirm) return item.onClick();
+      void showConfirmDialog(item.confirm ?? `${item.label} 하시겠습니까?`, item.label).then(
+        (ok) => ok && item.onClick(),
+      );
+    });
+    pop.append(b);
+  }
+  trigger.addEventListener("click", (e) => {
+    e.stopPropagation();
+    setOpen(pop.hidden === true);
+  });
+  wrap.append(trigger, pop);
+  return wrap;
+}
diff --git a/ui_template/ui_template_drop.css b/ui_template/ui_template_drop.css
new file mode 100644
index 000000000..ce496ac9b
--- /dev/null
+++ b/ui_template/ui_template_drop.css
@@ -0,0 +1,52 @@
+/* 파일 놓기 칸(552-3) — 점선 칸 · 끌어 오면 강조 · 오류 빨강 */
+.ui-drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-height: 48px;
+  padding: var(--spacing-16);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface-raised);
+  color: var(--color-text);
+  text-align: center;
+  transition:
+    border-color var(--transition-fast),
+    background-color var(--transition-fast);
+}
+.ui-drop__icon {
+  color: var(--color-text-muted);
+}
+.ui-drop__text,
+.ui-drop__hint,
+.ui-drop__error {
+  margin: 0;
+}
+.ui-drop__text {
+  font-size: var(--text-body-sm);
+}
+.ui-drop__hint {
+  font-size: var(--text-caption);
+  color: var(--color-text-muted);
+}
+.ui-drop .ui-progress {
+  align-self: stretch;
+}
+.ui-drop:is(.is-over, [data-state="hover"]) {
+  border-color: var(--color-accent);
+  background: var(--color-accent-soft);
+}
+.ui-drop:is(.is-over, [data-state="hover"]) .ui-drop__icon {
+  color: var(--color-accent);
+}
+.ui-drop[aria-disabled="true"] {
+  opacity: 0.5;
+}
+.ui-drop:is(.is-error, [data-state="error"]) {
+  border-color: var(--color-danger);
+}
+.ui-drop__error {
+  font-size: var(--text-caption);
+  color: var(--color-danger);
+}
diff --git a/ui_template/ui_template_drop.ts b/ui_template/ui_template_drop.ts
new file mode 100644
index 000000000..46319100e
--- /dev/null
+++ b/ui_template/ui_template_drop.ts
@@ -0,0 +1,104 @@
+/* =============================================================================
+ * ui_template_drop.ts
+ * 부품 「파일 놓기 칸」(552-3 · 목록 34) — 파일을 끌어 놓거나 [파일 고르기]로 고르는 점선 칸.
+ *   꼴   = 점선 칸(올림 아이콘 · 한 줄 · 고르기 단추 · 받는 꼴 안내) · 진행(`setProgress` → 진행 막대) · 오류(`setError` → 빨간 글)
+ *   크기 = 칸 최소 48 · 단추 28
+ *   상태 = 기본 · 마우스(파일을 끌어 옴 = .is-over) · 막힘(`disabled`) · 오류(.is-error)
+ *   쓰는 법 = `const drop = createDrop({ accept: ".las,.laz", onFiles: (files) => upload(files) }); host.append(drop.root)`
+ *   대신하는 옛 변종 = B03 `b03-file__dropzone` · CAD `body.cad-file-dragging::after` · 숨은 file + 단추(B01 · B08 · M02 · cad_host · help_edit)
+ * ========================================================================== */
+
+import { createButton } from "./ui_template_button";
+import { el } from "./ui_template_elements_base";
+import { icon } from "./ui_template_icons";
+import { createProgressBar } from "./ui_template_progress";
+import "./ui_template_drop.css";
+
+export interface DropOptions {
+  onFiles: (files: File[]) => void;
+  /** input accept 글(`.las,.laz` · `image/*`) */
+  accept?: string;
+  multiple?: boolean;
+  text?: string;
+  /** 받는 꼴 · 크기 안내 */
+  hint?: string;
+  disabled?: boolean;
+}
+
+export interface DropHandle {
+  root: HTMLElement;
+  /** 진행 막대 — null 이면 숨김 */
+  setProgress: (ratio: number | null, label?: string) => void;
+  /** 오류 글 — null 이면 지움 */
+  setError: (message: string | null) => void;
+  setDisabled: (on: boolean) => void;
+}
+
+export function createDrop(opts: DropOptions): DropHandle {
+  const input = el("input", { attrs: { type: "file" } });
+  input.hidden = true;
+  if (opts.accept) input.accept = opts.accept;
+  input.multiple = !!opts.multiple;
+  const pick = createButton({
+    label: "파일 고르기",
+    variant: "ghost",
+    size: 28,
+    onClick: () => input.click(),
+  });
+  const bar = createProgressBar({ thick: 6 });
+  bar.root.hidden = true;
+  const error = el("p", { className: "ui-drop__error" });
+  error.hidden = true;
+  const root = el("div", {
+    className: "ui-drop",
+    children: [
+      el("span", { className: "ui-drop__icon", children: [icon("upload", 24)] }),
+      el("p", { className: "ui-drop__text", text: opts.text ?? "파일을 여기에 끌어 놓거나" }),
+      pick,
+      input,
+    ],
+  });
+  if (opts.hint) root.append(el("p", { className: "ui-drop__hint", text: opts.hint }));
+  root.append(bar.root, error);
+
+  const give = (list: FileList | null | undefined): void => {
+    const files = [...(list ?? [])];
+    if (files.length && !pick.disabled) opts.onFiles(opts.multiple ? files : files.slice(0, 1));
+  };
+  input.addEventListener("change", () => {
+    give(input.files);
+    input.value = ""; // 같은 파일을 다시 골라도 change
+  });
+  const over = (on: boolean): boolean => root.classList.toggle("is-over", on && !pick.disabled);
+  root.addEventListener("dragover", (ev) => {
+    ev.preventDefault();
+    over(true);
+  });
+  root.addEventListener("dragleave", (ev) => {
+    if (!root.contains(ev.relatedTarget as Node | null)) over(false);
+  });
+  root.addEventListener("drop", (ev) => {
+    ev.preventDefault();
+    over(false);
+    give(ev.dataTransfer?.files);
+  });
+
+  const setDisabled = (on: boolean): void => {
+    pick.disabled = on;
+    root.setAttribute("aria-disabled", String(on));
+  };
+  setDisabled(!!opts.disabled);
+  return {
+    root,
+    setProgress: (ratio, label) => {
+      bar.root.hidden = ratio === null;
+      if (ratio !== null) bar.set(ratio, label);
+    },
+    setError: (message) => {
+      error.hidden = !message;
+      error.textContent = message ?? "";
+      root.classList.toggle("is-error", !!message);
+    },
+    setDisabled,
+  };
+}
diff --git a/ui_template/ui_template_elements.ts b/ui_template/ui_template_elements.ts
index 467a2c2a4..4d9425a5c 100644
--- a/ui_template/ui_template_elements.ts
+++ b/ui_template/ui_template_elements.ts
@@ -10,7 +10,6 @@
  * ========================================================================== */
 
 import { el } from "./ui_template_elements_base";
-import { createButton } from "./ui_template_button";
 
 // 차트·기본 스타일 조각은 파일이 700줄을 넘어 떼어냈다(2026-09-04).
 // 여기서 그대로 다시 내보내 호출부의 import 경로는 불변이다.
@@ -69,43 +68,8 @@ export {
  * 확인을 받아 어느 실행 환경에서도 같은 동작을 보장한다.
  * -------------------------------------------------------------------------- */
 
-/** 확인/취소 모달 — 확인이면 true. 네이티브 confirm 대신 반드시 이것을 쓴다. */
-export function showConfirmDialog(
-  message: string,
-  confirmLabel = "확인",
-  cancelLabel = "취소",
-): Promise<boolean> {
-  return new Promise((resolve) => {
-    const overlay = el("div", { className: "ui-confirm" });
-    const panel = el("div", { className: "ui-confirm__panel" });
-    const text = el("p", { className: "ui-confirm__message", text: message });
-    const actions = el("div", { className: "ui-confirm__actions" });
-    const back = document.activeElement as HTMLElement | null; // 닫힐 때 초점을 돌려놓을 자리
-    const done = (result: boolean): void => {
-      overlay.remove();
-      if (back?.isConnected && back !== document.body) back.focus({ preventScroll: true });
-      resolve(result);
-    };
-    const cancel = createButton({
-      label: cancelLabel,
-      variant: "ghost",
-      onClick: () => done(false),
-    });
-    actions.append(
-      cancel,
-      createButton({ label: confirmLabel, variant: "danger", onClick: () => done(true) }),
-    );
-    overlay.addEventListener("keydown", (ev) => {
-      if (ev.key !== "Escape") return;
-      ev.stopPropagation(); // 뒤 창 · 페이지 Esc 까지 닫지 않음
-      done(false);
-    });
-    panel.append(text, actions);
-    overlay.append(panel);
-    document.body.append(overlay);
-    cancel.focus(); // 창에 초점 — 뒤 칸에 글이 들어가지 않고 Esc 가 먹음
-  });
-}
+// 부품 「모달 · 확인창」(552-3) = ui_template_modal.ts — 부름 꼴 그대로
+export { askConfirm, askText, showConfirmDialog } from "./ui_template_modal";
 
 /* -----------------------------------------------------------------------------
  * 7. 워크플로우 3단 레이아웃 셸 (frontend.md §2)
diff --git a/ui_template/ui_template_modal.css b/ui_template/ui_template_modal.css
index e104fc91e..ac1b4bc67 100644
--- a/ui_template/ui_template_modal.css
+++ b/ui_template/ui_template_modal.css
@@ -1,11 +1,11 @@
 .ui-modal__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: var(--z-modal);
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  background-color: rgba(38, 17, 74, 0.35); /* 공용 확인 창(.ui-confirm)과 같이 뒤를 가림 */
+  background-color: var(--color-scrim); /* 공용 확인 창(.ui-confirm)과 같이 뒤를 가림 */
 }
 
 /* 위에서 고정 거리 — 최대 높이일 때 가운데 자리에 윗변을 붙이고 아래로만 늘고 줆(찾기 칸이 안 움직임).
@@ -64,3 +64,25 @@
   flex-direction: column;
   gap: var(--spacing-8);
 }
+
+/* 모달 · 확인창(552-3) — 폭 단 · 확인창 제목 · 글 묻기 칸 */
+.ui-modal[data-width="24rem"] {
+  width: min(24rem, 92vw);
+}
+.ui-modal[data-width="40rem"] {
+  width: min(40rem, 92vw);
+}
+.ui-modal[data-width="960px"] {
+  width: min(960px, 92vw);
+}
+.ui-confirm__title {
+  margin: 0 0 var(--spacing-8);
+  font-size: var(--text-body);
+  font-weight: 700;
+  color: var(--color-text);
+}
+.ui-confirm__input {
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: var(--spacing-16);
+}
diff --git a/ui_template/ui_template_modal.ts b/ui_template/ui_template_modal.ts
index 77fb4fa25..1ff244181 100644
--- a/ui_template/ui_template_modal.ts
+++ b/ui_template/ui_template_modal.ts
@@ -1,14 +1,20 @@
 /* =============================================================================
  * ui_template_modal.ts
- * 공용 모달 겉틀 — 배경 · 제목줄 · 닫기 · Esc · 포커스. 몸은 `mount` 가 채움.
- * 바깥 누르기 = 누름 · 뗌 둘 다 배경일 때만 닫음(칸 끌기로 안 닫힘).
- * M01 · M02 가 함께 씀 — `dialogClass` · `backdropClass` 로 화면별 겉모양을 덧붙임.
- * 곁값 — `actions`(머리 [닫기] 바로 왼쪽 단추 · mount 셋째 인자 자리에 넣어도 됨) · `wide`(큰 창 96vw × 94vh).
- * 안 넘긴 창은 지금 꼴 그대로.
+ * 부품 「모달 · 확인창」(552-3 · 목록 22) — 화면을 가리고 위에 뜨는 창.
+ *   꼴   = 모달(`openModal` · 제목줄 · 닫기 · 몸은 `mount`) · 넓음(`wide` · 96vw × 94vh) · 폭 단(`width`: 24rem · 40rem · 960px · 기본 720)
+ *          · 확인창(`askConfirm`) · 위험 확인(`danger` · 확인 단추 빨강 = `showConfirmDialog`) · 글 묻기(`askText` · window.prompt 대신)
+ *   크기 = 모달 여백 16 · 둥글기 12 · 확인창 폭 300 ~ 420 · 단추 = 단추 부품 기본
+ *   상태 = 기본만 · Esc = 닫기(한글 조합 중 · 몸이 막은 Esc 는 안 닫음) · 바깥 누르기 = 누름 · 뗌 둘 다 배경일 때만
+ *   쓰는 법 = `openModal({ title: "구조물", closeLabel: "닫기", mount: (body) => body.append(form) })`
+ *          · `if (await askConfirm({ message: "지울까요?", danger: true })) …` · `const name = await askText({ message: "블록 이름" })`
+ *   대신하는 옛 변종 = 시트 `.ss-dialog` · `.ss-fmtdlg` · B03 `b03-file__modal` · M01 `m01-logic__pick` · `m01lab__modal` · CAD `window.confirm` · `window.prompt`(갈아 끼우기 = 553)
+ *   M01 · M02 가 함께 씀 — `dialogClass` · `backdropClass` 로 화면별 겉모양을 덧붙임 · 안 넘긴 창은 지금 꼴 그대로.
+ *   확인창 모양 `.ui-confirm*` = `ui_template_elements_styles.ts`(주입 차례가 페이지 CSS 뒤라 그대로 둠) · 덧붙임 = 이 파일 CSS.
  * ========================================================================== */
 
 import "./ui_template_modal.css";
-import { createButton, el } from "./ui_template_elements";
+import { createButton } from "./ui_template_button";
+import { el } from "./ui_template_elements_base";
 
 export interface ModalOptions {
   title: string;
@@ -20,32 +26,44 @@ export interface ModalOptions {
   actions?: HTMLElement[];
   /** 큰 창 — 96vw × 94vh · 몸 넘침만 스크롤 */
   wide?: boolean;
+  /** 폭 단 — 없으면 720 */
+  width?: "24rem" | "40rem" | "960px";
   backdropClass?: string;
   /** 닫기 단추 · Esc · 바깥 누르기 전에 물음 — false 면 안 닫음(몸의 `close` 는 묻지 않고 닫음) */
   beforeClose?: () => boolean | Promise<boolean>;
 }
 
-export function openModal(opts: ModalOptions): { close: () => void } {
+/** 모달 판 — 뒤 가림막 없이 판만(부품 모음 견본도 씀) · 머리 단추는 mount 뒤에 붙임 */
+export function buildModal(
+  opts: Pick<ModalOptions, "title" | "closeLabel" | "actions" | "wide" | "width" | "dialogClass">,
+  onClose: () => void,
+): { dialog: HTMLElement; body: HTMLElement; actions: HTMLElement; closeButton: HTMLElement } {
   const body = el("div", { className: "ui-modal__body" });
   const actions = el("div", { className: "ui-modal__actions", children: opts.actions ?? [] });
   const closeButton = createButton({
     label: opts.closeLabel,
     variant: "ghost",
-    onClick: () => void ask(),
+    onClick: onClose,
   });
   const top = el("div", {
     className: "ui-modal__top",
     children: [el("h3", { text: opts.title }), closeButton],
   });
-  const close = (): void => backdrop.remove();
-  const ask = async (): Promise<void> => {
-    if (!opts.beforeClose || (await opts.beforeClose())) close();
-  };
   const dialog = el("div", {
     className: `ui-modal ${opts.wide ? "ui-modal--wide " : ""}${opts.dialogClass ?? ""}`.trim(),
     attrs: { role: "dialog", "aria-label": opts.title },
     children: [top, body],
   });
+  if (opts.width) dialog.dataset.width = opts.width;
+  return { dialog, body, actions, closeButton };
+}
+
+export function openModal(opts: ModalOptions): { close: () => void } {
+  const { dialog, body, actions, closeButton } = buildModal(opts, () => void ask());
+  const close = (): void => backdrop.remove();
+  const ask = async (): Promise<void> => {
+    if (!opts.beforeClose || (await opts.beforeClose())) close();
+  };
   const backdrop = el("div", {
     className: `ui-modal__backdrop ${opts.backdropClass ?? ""}`.trim(),
     children: [dialog],
@@ -69,3 +87,104 @@ export function openModal(opts: ModalOptions): { close: () => void } {
   (body.querySelector<HTMLElement>("input, textarea, select") ?? dialog).focus();
   return { close };
 }
+
+/* -----------------------------------------------------------------------------
+ * 확인창 · 글 묻기 — window.confirm · window.prompt 대신
+ *
+ * 공용 헤드 브라우저(playwright 연결)는 네이티브 confirm/alert를 자동 취소해
+ * 버려 [초기화] 같은 버튼이 죽은 것처럼 보였다(2026-08-19 진단). 화면 안 창으로
+ * 확인을 받아 어느 실행 환경에서도 같은 동작을 보장한다.
+ * -------------------------------------------------------------------------- */
+
+export interface AskOptions {
+  message: string;
+  title?: string;
+  okLabel?: string;
+  cancelLabel?: string;
+  /** 위험 확인 — 확인 단추 빨강 */
+  danger?: boolean;
+}
+
+export interface AskField {
+  value?: string;
+  placeholder?: string;
+}
+
+/** 확인창 판 — 가림막(.ui-confirm) 없이 판만(부품 모음 견본도 씀) · `field` = 글 묻기 칸 */
+export function confirmPanel(
+  opts: AskOptions & { field?: AskField },
+  done: (ok: boolean, text: string) => void = () => {},
+): { panel: HTMLElement; first: HTMLElement } {
+  const panel = el("div", { className: "ui-confirm__panel", attrs: { role: "dialog" } });
+  if (opts.title) panel.append(el("h3", { className: "ui-confirm__title", text: opts.title }));
+  panel.append(el("p", { className: "ui-confirm__message", text: opts.message }));
+  let input: HTMLInputElement | null = null;
+  if (opts.field) {
+    const box = el("input", {
+      className: "ui-input ui-confirm__input",
+      attrs: { type: "text", placeholder: opts.field.placeholder ?? "" },
+    });
+    box.value = opts.field.value ?? "";
+    box.addEventListener("keydown", (ev) => {
+      if (ev.key !== "Enter" || ev.isComposing) return;
+      ev.preventDefault();
+      done(true, box.value);
+    });
+    panel.append(box);
+    input = box;
+  }
+  const cancel = createButton({
+    label: opts.cancelLabel ?? "취소",
+    variant: "ghost",
+    onClick: () => done(false, ""),
+  });
+  const ok = createButton({
+    label: opts.okLabel ?? "확인",
+    variant: opts.danger ? "danger" : "filled",
+    onClick: () => done(true, input?.value ?? ""),
+  });
+  panel.append(el("div", { className: "ui-confirm__actions", children: [cancel, ok] }));
+  return { panel, first: input ?? cancel };
+}
+
+function ask(opts: AskOptions, field?: AskField): Promise<{ ok: boolean; text: string }> {
+  return new Promise((resolve) => {
+    const overlay = el("div", { className: "ui-confirm" });
+    const back = document.activeElement as HTMLElement | null; // 닫힐 때 초점을 돌려놓을 자리
+    const done = (ok: boolean, text: string): void => {
+      overlay.remove();
+      if (back?.isConnected && back !== document.body) back.focus({ preventScroll: true });
+      resolve({ ok, text });
+    };
+    const { panel, first } = confirmPanel({ ...opts, field }, done);
+    overlay.addEventListener("keydown", (ev) => {
+      if (ev.key !== "Escape" || ev.isComposing) return;
+      ev.stopPropagation(); // 뒤 창 · 페이지 Esc 까지 닫지 않음
+      done(false, "");
+    });
+    overlay.append(panel);
+    document.body.append(overlay);
+    first.focus(); // 창에 초점 — 뒤 칸에 글이 들어가지 않고 Esc 가 먹음
+  });
+}
+
+/** 확인창 — 확인이면 true */
+export function askConfirm(opts: AskOptions): Promise<boolean> {
+  return ask(opts).then((r) => r.ok);
+}
+
+/** 글 묻기 — 확인이면 칸 글 · 취소면 null */
+export function askText(opts: AskOptions & AskField): Promise<string | null> {
+  return ask(opts, { value: opts.value, placeholder: opts.placeholder }).then((r) =>
+    r.ok ? r.text : null,
+  );
+}
+
+/** 위험 확인(옛 부름 꼴) — 확인이면 true. 네이티브 confirm 대신 반드시 이것을 쓴다. */
+export function showConfirmDialog(
+  message: string,
+  confirmLabel = "확인",
+  cancelLabel = "취소",
+): Promise<boolean> {
+  return askConfirm({ message, okLabel: confirmLabel, cancelLabel, danger: true });
+}
diff --git a/ui_template/ui_template_public_layout.css b/ui_template/ui_template_public_layout.css
index 7f537a983..98c35c3d4 100644
--- a/ui_template/ui_template_public_layout.css
+++ b/ui_template/ui_template_public_layout.css
@@ -8,7 +8,7 @@
 
 .ui-public-frame__hero {
   padding: var(--spacing-96) var(--spacing-32);
-  border-bottom: 1px solid var(--color-border);
+  box-shadow: inset 0 -1px 0 var(--color-border);
   background: linear-gradient(to bottom, var(--color-accent-soft), var(--color-canvas));
 }
 
@@ -35,6 +35,14 @@
   line-height: var(--leading-heading-lg);
 }
 
+.ui-public-frame__hero[data-wide] .ui-public-frame__title {
+  max-width: 18ch;
+}
+
+.ui-public-frame__hero[data-wide] .ui-public-frame__lead {
+  max-width: 56ch;
+}
+
 .ui-public-frame__lead {
   max-width: 52ch;
   margin: 0;
@@ -66,6 +74,7 @@
   color: var(--color-text);
   font-size: var(--text-heading-sm);
   line-height: var(--leading-heading-sm);
+  text-align: center;
 }
 
 .ui-public-frame__section-body {
diff --git a/ui_template/ui_template_public_layout.ts b/ui_template/ui_template_public_layout.ts
index 29b9120c8..edf92c797 100644
--- a/ui_template/ui_template_public_layout.ts
+++ b/ui_template/ui_template_public_layout.ts
@@ -3,7 +3,7 @@
  * 공개 화면 틀 `public-frame`(552-4 틀) — 로그인 전 공개 페이지(A01 ~ A09) 몸통: 머리 띠(hero) · 구역 · 본문.
  *   꼴   = 머리 띠(제목 · 설명 · 주 단추 줄 · 가운데 / 왼쪽 맞춤) · 구역(제목 + 몸) 여럿
  *          공개 머리(로고 · 메뉴)와 바닥글(`.app-footer`)은 앱 셸 몫 — 이 틀은 그 사이 본문만
- *   크기 = 폭 = --page-max-width · 제목 = --text-heading-lg(좁으면 --text-heading) · 구역 제목 = --text-heading-sm
+ *   크기 = 폭 = --page-max-width · 제목 = --text-heading-lg(좁으면 --text-heading · `wide` = 18 자) · 구역 제목 = --text-heading-sm(가운데)
  *   상태 = 없음
  *   쓰는 법 = const f = createPublicFrame({ title: "임도 설계", lead: "…", actions: [btn] }); f.addSection("기능").append(grid)
  *   대신하는 옛 변종 = A01 ~ A05 `.a0N-hero` · `__inner` · `__title` · `__subtitle` · `__ctas` 다섯 벌 · `.a0N-section(__title)`
@@ -17,6 +17,8 @@ export interface PublicFrameOptions {
   actions?: HTMLElement[];
   /** 머리 띠 맞춤 — 기본 가운데 */
   align?: "center" | "start";
+  /** 제목 18 자 · 설명 56 자 폭(기본 14 · 52) */
+  wide?: boolean;
 }
 
 export interface PublicFrame {
@@ -41,6 +43,7 @@ export function createPublicFrame(opts: PublicFrameOptions): PublicFrame {
   const root = node("div", "ui-public-frame");
   const hero = node("section", "ui-public-frame__hero");
   hero.dataset.align = opts.align ?? "center";
+  if (opts.wide) hero.dataset.wide = "";
   const inner = node("div", "ui-public-frame__hero-inner");
   inner.append(node("h1", "ui-public-frame__title", opts.title));
   if (opts.lead) inner.append(node("p", "ui-public-frame__lead", opts.lead));
diff --git a/ui_template/ui_template_setting_row.css b/ui_template/ui_template_setting_row.css
new file mode 100644
index 000000000..4bbf3f7f5
--- /dev/null
+++ b/ui_template/ui_template_setting_row.css
@@ -0,0 +1,42 @@
+/* 설정 줄(552-3) — 대시보드 꼴(줄 52 · 아래 선 · 카드 하나) */
+.ui-setting-card {
+  overflow: hidden;
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+}
+.ui-setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+  min-height: 52px;
+  padding: var(--spacing-8) var(--spacing-16);
+  border-bottom: 1px solid var(--color-border);
+}
+.ui-setting-row:last-child {
+  border-bottom: 0;
+}
+.ui-setting-row__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.ui-setting-row__desc {
+  font-size: var(--text-caption);
+  color: var(--color-text-muted);
+}
+.ui-setting-row__side {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex: none;
+  max-width: 55%;
+}
+.ui-setting-row__side .ui-field__label:empty {
+  display: none;
+}
+.ui-setting-row__value {
+  text-align: right;
+  overflow-wrap: anywhere;
+}
diff --git a/ui_template/ui_template_setting_row.ts b/ui_template/ui_template_setting_row.ts
new file mode 100644
index 000000000..0cfb25cd0
--- /dev/null
+++ b/ui_template/ui_template_setting_row.ts
@@ -0,0 +1,36 @@
+/* =============================================================================
+ * ui_template_setting_row.ts
+ * 부품 「설정 줄」(552-3 · 목록 33) — 왼쪽 제목 · 설명 / 오른쪽 값 · 조작 한 줄(Linear 꼴) · 여러 줄은 둥근 상자 하나에.
+ *   꼴   = 값 줄(`valueText` · 없으면 「-」) · 조작 줄(오른쪽에 입력 · 고르기 · 켜기 · 단추) · 설명 없는 줄
+ *   크기 = 줄 최소 52 · 여백 8 / 16 · 오른쪽 칸 최대 55 %
+ *   상태 = 기본만(조작 부품이 저마다 상태를 가짐)
+ *   쓰는 법 = `settingCard([settingRow("회사 이름", "보고서 머리에 들어감", valueText("산림설계"))])`
+ *   대신하는 옛 변종 = B01 `settingRow` · `settingCard`(`.b01-pg-row` · `.b01-pg-settings`) · `.b01-dashboard__setting-card` · E02 `e02-field` · E06 `e06-setting` · B08 `b08-hydro__row`
+ * ========================================================================== */
+
+import { el } from "./ui_template_elements_base";
+import "./ui_template_setting_row.css";
+
+/** 한 줄 — 제목 · 설명 왼쪽 · 값 · 조작 오른쪽 */
+export function settingRow(title: string, desc: string, right: Node): HTMLElement {
+  const left = el("div", {
+    className: "ui-setting-row__text",
+    children: [el("strong", { text: title })],
+  });
+  if (desc) left.append(el("span", { className: "ui-setting-row__desc", text: desc }));
+  const side = el("div", { className: "ui-setting-row__side" });
+  side.append(right);
+  return el("div", { className: "ui-setting-row", children: [left, side] });
+}
+
+/** 값 글 — 없으면 「-」 */
+export const valueText = (v: string | number | null | undefined): HTMLElement =>
+  el("span", {
+    className: "ui-setting-row__value",
+    text: v === null || v === undefined || v === "" ? "-" : String(v),
+  });
+
+/** 설정 줄 묶음 — 둥근 상자 한 개 */
+export function settingCard(rows: HTMLElement[]): HTMLElement {
+  return el("div", { className: "ui-setting-card", children: rows });
+}
diff --git a/ui_template/ui_template_table.css b/ui_template/ui_template_table.css
new file mode 100644
index 000000000..26914c069
--- /dev/null
+++ b/ui_template/ui_template_table.css
@@ -0,0 +1,83 @@
+/* 표(552-3) — 대시보드 꼴(줄 40 · 세로선 없음 · 카드 테두리) · 데이터표 = 줄 28 */
+.ui-table-wrap {
+  overflow-x: auto;
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+}
+.ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  color: var(--color-text);
+}
+.ui-table th {
+  height: 36px;
+  padding: 0 12px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
+}
+.ui-table td {
+  height: 40px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: middle;
+}
+.ui-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.ui-table tbody tr:is(:hover, [data-state="hover"]) {
+  background: var(--color-hover);
+}
+.ui-table .is-end {
+  text-align: right;
+}
+.ui-table td.ui-table__menucell {
+  width: 44px;
+  padding: 0 8px;
+  text-align: right;
+}
+
+/* 데이터표 — 줄 28 · 글 12 */
+.ui-table--data {
+  font-size: var(--text-caption);
+}
+.ui-table--data th {
+  height: 28px;
+  padding: 0 8px;
+}
+.ui-table--data td {
+  height: 28px;
+  padding: 0 8px;
+}
+
+/* 줄 상태 — 고름 · 바뀜 · 지움 */
+.ui-table tbody tr:is(.is-active, [aria-selected="true"]) {
+  background: var(--color-accent-soft);
+}
+.ui-table tbody tr.is-changed > td:first-child {
+  box-shadow: inset 3px 0 0 var(--color-warning);
+}
+.ui-table tbody tr.is-removed {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+}
+
+/* 빈 줄 · 펼침 줄 */
+.ui-table td.ui-table__empty {
+  height: 64px;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+.ui-table tr.is-sub > td {
+  height: auto;
+  padding: 0;
+  background: var(--color-bg);
+}
+.ui-table tbody tr.is-sub:is(:hover, [data-state="hover"]) {
+  background: var(--color-bg);
+}
diff --git a/ui_template/ui_template_table.ts b/ui_template/ui_template_table.ts
new file mode 100644
index 000000000..e7bd8ec9b
--- /dev/null
+++ b/ui_template/ui_template_table.ts
@@ -0,0 +1,81 @@
+/* =============================================================================
+ * ui_template_table.ts
+ * 부품 「표」(552-3 · 목록 18) — 머리 줄 + 줄들 · 세로선 없음 · 카드 테두리 · 넘치면 가로 스크롤.
+ *   꼴   = 일반표(줄 40 · 기본) · 데이터표(`density: "data"` · 줄 28 · 글 12) · ⋯ 칸(columns 의 label "" — 줄 끝 `createRowMenu`)
+ *          · 한글 배지 칸(칸에 배지 요소) · 오른쪽 맞춤 칸(`align: "end"` · 수) · 빈 줄(`emptyRow`) · 펼침 줄(tr.is-sub)
+ *   크기 = 줄 40 / 28 · 머리 36 / 28
+ *   상태 = 줄 마우스(옅은 바탕) · 고름(tr.is-active / aria-selected) · 바뀜(tr.is-changed) · 지움(tr.is-removed · 줄 그음)
+ *   쓰는 법 = `createTable([{ label: "이름" }, { label: "", width: "44px" }], [["임도 1", createRowMenu([…])]])`
+ *          · 줄을 나중에 채우면 `const { root, tbody } = tableShell(columns); tbody.append(tableRow(columns, cells))`
+ *   대신하는 옛 변종 = B01 `dataTable` · `tableShell`(`.b01-pg-table`) · `.b01-proj-table` · `.ui-general-block__table` · D04 · E02 · E03 · E06 · E07 손 표 · M01 · M02 표(목록 4장)
+ *   옛 `.ui-data-table`(끌어 고치는 큰 표 · `ui_template_data_table.ts`)은 따로 그대로.
+ * ========================================================================== */
+
+import { el } from "./ui_template_elements_base";
+import "./ui_template_table.css";
+
+export type Cell = string | Node;
+
+export interface Column {
+  label: string;
+  /** 칸 너비(CSS) — 없으면 나눠 가짐 */
+  width?: string;
+  align?: "end";
+}
+
+export interface TableOptions {
+  /** 데이터표(줄 28 · 글 12) */
+  density?: "data";
+}
+
+/** 표 껍데기 — 머리 + 빈 tbody (줄은 호출 쪽이 채움 · 펼침 줄 같은 것을 끼우려고 떼어 둠) */
+export function tableShell(
+  columns: Column[],
+  opts: TableOptions = {},
+): { root: HTMLElement; tbody: HTMLElement } {
+  const table = el("table", {
+    className: `ui-table${opts.density === "data" ? " ui-table--data" : ""}`,
+  });
+  const hr = el("tr");
+  for (const col of columns) {
+    const th = el("th", { className: col.align ? "is-end" : "", text: col.label });
+    if (col.width) th.style.width = col.width;
+    hr.append(th);
+  }
+  const tbody = el("tbody");
+  table.append(el("thead", { children: [hr] }), tbody);
+  return { root: el("div", { className: "ui-table-wrap", children: [table] }), tbody };
+}
+
+/** 한 줄 — 칸 수는 columns 와 같게 · label "" 인 칸 = ⋯ 칸 */
+export function tableRow(columns: Column[], cells: Cell[]): HTMLTableRowElement {
+  const tr = el("tr");
+  cells.forEach((cell, i) => {
+    const col = columns[i];
+    const td = el("td", {
+      className: col?.align ? "is-end" : col?.label === "" ? "ui-table__menucell" : "",
+    });
+    td.append(cell);
+    tr.append(td);
+  });
+  return tr;
+}
+
+/** 빈 줄 — 칸을 다 합쳐 한 줄 안내 */
+export function emptyRow(columns: Column[], text: string): HTMLTableRowElement {
+  const td = el("td", { className: "ui-table__empty", text });
+  td.colSpan = columns.length;
+  return el("tr", { children: [td] });
+}
+
+/** 표 — 줄이 없으면 `empty` 글 한 줄 */
+export function createTable(
+  columns: Column[],
+  rows: Cell[][],
+  opts: TableOptions & { empty?: string } = {},
+): HTMLElement {
+  const { root, tbody } = tableShell(columns, opts);
+  tbody.append(...rows.map((cells) => tableRow(columns, cells)));
+  if (!rows.length && opts.empty) tbody.append(emptyRow(columns, opts.empty));
+  return root;
+}
diff --git a/ui_template/ui_template_ui_kit_parts.ts b/ui_template/ui_template_ui_kit_parts.ts
index 5bbadb761..d77d99933 100644
--- a/ui_template/ui_template_ui_kit_parts.ts
+++ b/ui_template/ui_template_ui_kit_parts.ts
@@ -28,16 +28,13 @@ import { createSegment } from "./ui_template_segment";
 import { createTabs } from "./ui_template_tabs";
 import { createText } from "./ui_template_text";
 import { createToggle } from "./ui_template_toggle";
-import {
-  badge,
-  dataTable,
-  rowMenu,
-  settingCard,
-  settingRow,
-  valueText,
-} from "../B01_Dashboard/B01_Dashboard_UI_PageKit";
 // 552-3 묶음 부품
 import { createBanner } from "./ui_template_banner";
+import { createRowMenu, type RowMenuItem } from "./ui_template_context_menu";
+import { createDrop } from "./ui_template_drop";
+import { buildModal, confirmPanel } from "./ui_template_modal";
+import { settingCard, settingRow, valueText } from "./ui_template_setting_row";
+import { createTable, type Column } from "./ui_template_table";
 import { createCard } from "./ui_template_card";
 import { createPanelCard } from "./ui_template_collapsible";
 import { createBarChart, createDonut, createLineChart } from "./ui_template_elements_chart";
@@ -110,6 +107,31 @@ const row = (...children: HTMLElement[]): HTMLElement => {
 
 const noop = (): void => {};
 
+/** 552-3 견본 — 표 칸 · 줄 · ⋯ 메뉴 항목 · 펼친 ⋯ 판 */
+const KIT_COLS: Column[] = [{ label: "노선" }, { label: "", width: "44px" }];
+const KIT_DATA: Column[] = [{ label: "노선" }, { label: "연장", align: "end" }];
+const KIT_MENU: RowMenuItem[] = [
+  { label: "이름 바꾸기", onClick: noop },
+  { label: "삭제", danger: true, onClick: noop },
+];
+const kitRows = (): (string | HTMLElement)[][] => [
+  ["1", createRowMenu(KIT_MENU)],
+  ["2", createRowMenu(KIT_MENU)],
+];
+const dataRows = [
+  ["1", "1,080"],
+  ["2", "640"],
+];
+const openMenu = (s: KitState, items = KIT_MENU): HTMLElement => {
+  const menu = createRowMenu(items);
+  menu.classList.add("is-open");
+  const pop = menu.querySelector<HTMLElement>(".ui-row-menu__pop")!;
+  pop.hidden = false;
+  pop.style.position = "static";
+  markState(pop.querySelector<HTMLElement>(".ui-row-menu__item")!, s);
+  return menu;
+};
+
 /** 세로로 쌓기(552-3 견본) */
 const col = (...children: HTMLElement[]): HTMLElement => {
   const box = row(...children);
@@ -230,13 +252,19 @@ export const KIT_PARTS: KitPart[] = [
   { key: "collapsible", name: "접이 카드", group: "compound", kinds: "패널 카드 · 구역 · 캐럿 ▾ ▸ · ⚙ 곁값", file: "ui_template_collapsible.ts",
     demo: (s) => { if (s !== "default" && s !== "hover") return null; const open = createPanelCard("구조물 배치", false, noop); open.append(row(createInputField({ placeholder: "측점" }).root));
       if (s === "hover") { markState(open.querySelector<HTMLElement>(".ui-collapsible__title")!, s); return open; } return col(open, createPanelCard("접힌 카드")); } },
-  { key: "table", name: "표", group: "compound", kinds: "데이터표(28 · 밀도) · 일반표(40) · ⋯ 칸 · 한글 배지 · 빈 줄", file: "ui_template_table.ts", legacy: true,
-    demo: (s) => (s === "default" ? dataTable([{ label: "이름" }, { label: "상태", width: "90px" }, { label: "연장", width: "80px", align: "end" }, { label: "", width: "44px" }], [["임도 1 노선", badge("진행 중", "accent"), "1,080 m", rowMenu([{ label: "열기", onClick: noop }])], ["임도 2 노선", badge("완료", "success"), "640 m", rowMenu([{ label: "열기", onClick: noop }])]]) : null) },
-  { key: "row-menu", name: "⋯ · 오른쪽 메뉴", group: "compound", kinds: "줄 끝 ⋯ · 오른쪽 누름 메뉴 · 위험 항목", file: "ui_template_context_menu.ts", legacy: true,
-    demo: (s) => (s === "default" ? rowMenu([{ label: "이름 바꾸기", onClick: noop }, { label: "삭제", danger: true, onClick: noop }]) : null) },
+  { key: "table", name: "표", group: "compound", kinds: "일반표(줄 40) · 데이터표(줄 28) · ⋯ 칸 · 한글 배지 · 빈 줄 · 줄 고름 · 바뀜 · 지움", file: "ui_template_table.ts",
+    demo: (s) => { if (s === "disabled" || s === "error") return null; const t = s === "default" ? createTable(KIT_COLS, kitRows()) : createTable(KIT_DATA, dataRows, { density: "data" });
+      const first = t.querySelector<HTMLElement>("tbody tr")!; if (s === "hover") markState(first, s); if (s === "active") first.classList.add("is-active");
+      if (s !== "default") return t; const data = createTable(KIT_DATA, dataRows, { density: "data" }); const rows = data.querySelectorAll("tbody tr"); rows[0].classList.add("is-changed"); rows[1].classList.add("is-removed");
+      return col(t, data, createTable(KIT_DATA, [], { empty: "노선 없음" })); } },
+  { key: "row-menu", name: "⋯ · 오른쪽 메뉴", group: "compound", kinds: "줄 끝 ⋯(28) · 펼친 판 · 위험 항목(빨강 + 확인창) · 막힌 항목", file: "ui_template_context_menu.ts",
+    demo: (s) => { if (s === "error") return null; if (s === "default") return createRowMenu(KIT_MENU); if (s === "hover") { const m = createRowMenu(KIT_MENU); markState(m.querySelector<HTMLElement>(".ui-row-menu__btn")!, s); return m; }
+      return openMenu(s, s === "disabled" ? [{ label: "내보내기", onClick: noop, disabled: true }, ...KIT_MENU] : KIT_MENU); } },
   { key: "empty", name: "빈 상태", group: "compound", kinds: "선 아이콘 · 한 줄 · 주 단추 · 사용법 · 작은 꼴", file: "ui_template_empty.ts",
     demo: (s) => (s === "default" ? col(createEmpty({ icon: "folder", text: "아직 프로젝트가 없음", hint: "새 프로젝트를 만들어 시작", action: createButton({ label: "새 프로젝트", onClick: noop }), onGuide: noop }), createEmpty({ text: "고른 측점 없음", small: true })) : null) },
-  { key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통 · 넓음 · 확인 · 위험 확인", file: "ui_template_modal.ts" },
+  { key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통(720) · 넓음 · 폭 단 24rem · 40rem · 960 · 확인 · 위험 확인 · 글 묻기(prompt 대신)", file: "ui_template_modal.ts",
+    demo: (s) => { if (s !== "default") return null; const m = buildModal({ title: "구조물 고르기", closeLabel: "닫기", width: "40rem" }, noop); m.body.append("몸 — 표 · 양식이 들어감"); m.dialog.style.margin = "0";
+      return col(m.dialog, confirmPanel({ message: "노선을 저장할까요?" }).panel, confirmPanel({ title: "삭제", message: "임도 2 노선을 지울까요? 되돌릴 수 없음", okLabel: "삭제", danger: true }).panel, confirmPanel({ message: "블록 이름", field: { placeholder: "예: 배수관" } }).panel); } },
   { key: "toast", name: "알림", group: "compound", kinds: "토스트 4꼴(성공 · 오류 · 정보 · 경고) · 로딩 가림막 · 진행 가림막", file: "ui_template_toast.ts",
     demo: (s) => (s === "default" ? col(toastNode("저장됨", "success"), toastNode("저장 못 함 — 다시 시도", "error"), toastNode("노선을 불러옴", "info"), toastNode("측점 간격이 넓음", "warning")) : null) },
   { key: "banner", name: "띠 알림", group: "compound", kinds: "왼쪽 띠 · 정보 · 경고 · 위험 · 성공(✓) · 펼침 · 안 단추 · 닫기", file: "ui_template_banner.ts",
@@ -252,9 +280,12 @@ export const KIT_PARTS: KitPart[] = [
     demo: (s) => (s === "default" ? col(createBarChart([{ label: "산림설계", value: 12 }, { label: "녹색기술", value: 7 }, { label: "그 밖 3 곳", value: 4 }]), createDonut([{ label: "임도", value: 5 }, { label: "예정노선", value: 3 }, { label: "안정성", value: 2 }]), createLineChart({ series: [{ name: "CPU", values: [20, 35, 30, 50, 42, 60], colorIndex: 0 }], height: 120 })) : null) },
   { key: "legend", name: "범례", group: "compound", kinds: "색 칩 · 선 · 점선 · 점 · 꺼짐 · 세로", file: "ui_template_flow_legend.ts",
     demo: (s) => (s === "default" ? col(createLegend([{ label: "임도", color: "var(--color-chart-0)" }, { label: "설계선", color: "var(--color-chart-2)", kind: "line" }, { label: "원지반선", color: "var(--color-chart-1)", kind: "dash" }, { label: "관", color: "var(--color-chart-3)", kind: "dot" }, { label: "꺼진 층", color: "var(--color-chart-0)", off: true }], { onToggle: noop }), createLegend([{ label: "절토", color: "var(--color-danger)" }, { label: "성토", color: "var(--color-info)" }], { vertical: true })) : null) },
-  { key: "setting-row", name: "설정 줄", group: "compound", kinds: "제목 · 설명 · 오른쪽 값 · 조작", file: "ui_template_setting_row.ts", legacy: true,
-    demo: (s) => (s === "default" ? settingCard([settingRow("회사 이름", "보고서 머리에 들어감", valueText("산림설계")), settingRow("단위", "", valueText(null))]) : null) },
-  { key: "drop", name: "파일 놓기 칸", group: "compound", kinds: "끌어 놓기 · 고르기 단추 · 진행", file: "ui_template_drop.ts" },
+  { key: "setting-row", name: "설정 줄", group: "compound", kinds: "제목 · 설명 왼쪽 · 오른쪽 값 · 조작 · 줄 52", file: "ui_template_setting_row.ts",
+    demo: (s) => (s === "default" ? settingCard([settingRow("회사 이름", "보고서 머리에 들어감", valueText("산림설계")), settingRow("단위", "", valueText(null)), settingRow("기본 노폭", "새 노선에 먼저 들어감", createInputField({ placeholder: "3.0 m" }).root), settingRow("글꼴 파일", "", createButton({ label: "바꾸기", variant: "ghost", size: 28, onClick: noop }))]) : null) },
+  { key: "drop", name: "파일 놓기 칸", group: "compound", kinds: "끌어 놓기 · 고르기 단추 · 받는 꼴 안내 · 진행 · 오류", file: "ui_template_drop.ts",
+    demo: (s) => { if (s === "active") return null; const d = createDrop({ accept: ".las,.laz", hint: "LAS · LAZ · 2 GB 까지", onFiles: noop, disabled: s === "disabled" });
+      if (s === "error") d.setError("LAS · LAZ 파일만 받음"); if (s === "hover" || s === "error") markState(d.root, s);
+      if (s !== "default") return d.root; const busy = createDrop({ onFiles: noop }); busy.setProgress(0.4, "40 %"); return col(d.root, busy.root); } },
   // ── 552-4 틀 ───────────────────────────────────────────────
   { key: "work-frame", name: "작업 화면 틀", group: "frame", kinds: "왼쪽 패널(흰 판 · 1 px 선) · 본문 · 아래 단추 줄 · [?][<][>] · 머리 줄 없음 · ☰ 서랍", file: "ui_template_overlay.ts",
     demo: FRAME_DEMOS["work-frame"] },