style(cad_host): CAD 탭 × · + 를 아이콘 단추 꼴로 · 도각 편집 단추 24 · 날 그림자 · 보라 별칭 → 공통 값 (PLAN 553-6)

- 탭 줄 × = 아이콘 단추(18) · + = 아이콘 단추(22) — 문서 탭 꼴은 그대로 · 자체 단추 CSS 지움
- 도각 편집 띠 [완료 · 파일 불러오기 · 기본 도각 복원 · 취소] = 부품 단추 24(자체 여백 · 글 크기 지움)
- 불러오는 중 상자 그림자 = --shadow-lg · 오류 색 날 값 지움 · 시트 표(ui-sheet) 켬 색 · 안내 글 = 공통 값
- 시험 test_cad_host_tabs 가 클래스 여럿 붙은 단추를 찾게 고침 · B07 전후 촬영 CAD 안 배치 0 바뀜 · 바탕 색 같음

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

resources/tester/test_cad_host_tabs.py

@@ -81,7 +81,7 @@ const tabsMod = load("ui_template/cad_host/cad_host_tabs.ts", { "@ui/ui_template
   out.fixedX = tabNode("a").kids.length; // 고정 탭 = 글만(지우기 없음)
   // ③ 지우기 — 물음 뒤 · 지금 탭이면 다음 탭을 실음
   await tabs.select("c");
-  const xc = tabNode("c").kids.find((k) => k.className === "cad-tabs__x");
+  const xc = tabNode("c").kids.find((k) => k.className.split(" ").includes("cad-tabs__x"));
   await xc.on.click({ stopPropagation() {} });
   out.afterRemove = { ids: tabs.tabs().map((t) => t.id), active: tabs.active().id, confirms: confirms.length };
   // ④ [+] — create 없으면 아무것도 안 함 · 닫기 기능(B07) = 미저장 탭만 물음
@@ -97,7 +97,7 @@ const tabsMod = load("ui_template/cad_host/cad_host_tabs.ts", { "@ui/ui_template
   await closer.open({ id: "d1", name: "종단" });
   const before = confirms.length;
   const d2 = closer.element.kids.find((k) => k.dataset.tabId === "d2");
-  await d2.kids.find((k) => k.className === "cad-tabs__x").on.click({ stopPropagation() {} });
+  await d2.kids.find((k) => k.className.split(" ").includes("cad-tabs__x")).on.click({ stopPropagation() {} });
   const last = closer.element.kids.find((k) => k.dataset.tabId === "d1").kids.length; // 마지막 탭 = 닫기 없음
   out.b07 = { log: b07, asked: confirms.length - before, ids: closer.tabs().map((t) => t.id), last };
 
@@ -137,7 +137,7 @@ const tabsMod = load("ui_template/cad_host/cad_host_tabs.ts", { "@ui/ui_template
   });
   await new Promise((r) => setTimeout(r, 5));
   const bar = host.kids[0].kids.find((k) => k.className === "cad-tabs");
-  const plus = bar.kids.find((k) => k.className === "cad-tabs__add");
+  const plus = bar.kids.find((k) => k.className.split(" ").includes("cad-tabs__add"));
   await plus.on.click();
   await new Promise((r) => setTimeout(r, 5));
   inCad = { ...inCad, entities: [...inCad.entities, { type: "Circle" }] }; // 새 장에 하나 그림

ui_template/cad_host/cad_host.css

@@ -24,7 +24,7 @@
   padding: 10px 18px;
   border-radius: var(--radius-cards);
   background-color: var(--color-surface);
-  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
+  box-shadow: var(--shadow-lg);
   color: var(--color-text);
   font-size: 13px;
 }
@@ -38,10 +38,10 @@
   transform: translateX(-50%);
   max-width: 70%;
   padding: 8px 16px;
-  border: 1px solid var(--color-danger, #d33);
+  border: 1px solid var(--color-danger);
   border-radius: var(--radius-cards);
   background-color: var(--color-surface);
-  color: var(--color-danger, #d33);
+  color: var(--color-danger);
   font-size: 12px;
 }
 
@@ -86,7 +86,7 @@
 }
 
 .cad-frame-edit__label {
-  font-size: 0.78rem;
+  font-size: var(--text-caption);
   line-height: 1.4;
   color: var(--color-text);
 }
@@ -99,8 +99,6 @@
 .cad-frame-edit__buttons > button {
   flex: 1 1 0;
   min-width: 0;
-  padding: 4px 8px;
-  font-size: 0.78rem;
 }
 
 /* 작도 영역 숫자 칸 넷(169-1 · `cad_host_area.ts`) — 두 줄 두 칸 */

ui_template/cad_host/cad_host_frame_edit.ts

@@ -86,6 +86,7 @@ export function createFrameTemplateEditor<D extends CadHostDrawing>(
   const finishButton = createButton({
     label: "완료",
     variant: "filled",
+    size: 24,
     onClick: () => void finish(),
   });
   /**
@@ -95,6 +96,7 @@ export function createFrameTemplateEditor<D extends CadHostDrawing>(
   const resetButton = createButton({
     label: "기본 도각 복원",
     variant: "ghost",
+    size: 24,
     onClick: () => void resetToDefault(),
   });
   /**
@@ -111,12 +113,14 @@ export function createFrameTemplateEditor<D extends CadHostDrawing>(
   const importButton = createButton({
     label: "파일 불러오기",
     variant: "ghost",
+    size: 24,
     onClick: () => fileInput.click(),
   });
 
   const cancelButton = createButton({
     label: "취소",
     variant: "ghost",
+    size: 24,
     onClick: () => leave(),
   });
   const bannerButtons = document.createElement("div");

ui_template/cad_host/cad_host_tabs.css

@@ -66,28 +66,10 @@
   font: inherit;
 }
 
-.cad-tabs__x,
-.cad-tabs__add {
-  padding: 0 4px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.cad-tabs__x:hover,
-.cad-tabs__add:hover {
-  background: var(--color-surface-raised);
-  color: var(--color-text);
-}
-
+/* × · + = 아이콘 단추 부품(18 · 22) — 여기는 자리만(553-6) */
 .cad-tabs__add {
   align-self: center;
   margin-left: 2px;
-  font-size: 16px;
 }
 
 .cad-tabs[data-busy="true"] .cad-tabs__tab {

ui_template/cad_host/cad_host_tabs.ts

@@ -233,7 +233,8 @@ export function createCadTabs<D>(options: CadTabsOptions<D>): CadTabs<D> {
         if ((features.remove || (features.close && list.length > 1)) && !tab.fixed) {
           const x = document.createElement("button");
           x.type = "button";
-          x.className = "cad-tabs__x";
+          x.className = "ui-icon-btn ui-icon-btn--ghost cad-tabs__x"; // 아이콘 단추 부품 꼴(553-6)
+          x.dataset.size = "18";
           x.textContent = "×";
           x.title = x.ariaLabel = features.remove ? text.remove : text.close;
           x.addEventListener("click", (event) => {
@@ -272,7 +273,8 @@ export function createCadTabs<D>(options: CadTabsOptions<D>): CadTabs<D> {
     if (features.add) {
       const plus = document.createElement("button");
       plus.type = "button";
-      plus.className = "cad-tabs__add";
+      plus.className = "ui-icon-btn ui-icon-btn--ghost cad-tabs__add";
+      plus.dataset.size = "22";
       plus.textContent = "+";
       plus.title = plus.ariaLabel = text.add;
       plus.disabled = busy;

ui_template/sheet/ui_template_sheet.css

@@ -18,13 +18,13 @@
 }
 
 .ui-sheet__toolbar .ui-btn.is-on {
-  background: var(--color-mist-violet);
+  background: var(--color-accent-soft);
 }
 
 .ui-sheet__hint {
   margin: 0;
   color: var(--color-text-secondary); /* muted 는 작은 글에 대비 3:1 — 모자람 */
-  font-size: 0.8rem;
+  font-size: var(--text-caption);
 }
 
 .ui-sheet__scroll {