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>

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 {