refactor(B06): 줌 · 조정창 단추 · 머리 알약 · 알림 칩 · 접이 넷 · 띠 알림 · 빈 상태를 부품으로 (PLAN 553-2)

- 줌 [+ − ⤢] = 아이콘 단추 22 · 상세 [칸에 넣기] = 단추 22 · [여럿] = 켜기 칩 22 · 사이 금 지움
- 구조물 조정창 십자 · 9키 · 단 수 [－][＋] = 아이콘 단추(선) 22 · ✕ = 고스트 · 옵션 연동 · 경사 = 켜기 칩 24(유입 · 유출 칸 꼴은 그대로)
- 카드 머리 단면유형 = 배지(정보) 20 · 구조물 = 배지(강조) 20
- 알림 칩 = 단추(고스트) 20(색만 경고 / 정보) · 측점 목록 날 단추 = 단추(고스트) 20
- 날 details 넷(변수 위치 안내 · 상세값 · 다른 프로젝트 불러오기 · 횡단 조정) = 접이 구역(ui-collapsible) · 가이드 장면 선택자 `details.` 뗌
- 측점 없는 구조물 줄 · 표준 미반영 알림 = 띠 알림(경고) — 날 색 #fff8e6 · #e0b872 · #7a5a12 · #8a6a22 · 폴백 #d98324 지움
- 빈 그림 자리 = 빈 상태 · 선 치수 글 옛 보라 이름 → --color-accent
- 흉내 DOM 시험 · 서버 Node 묶음이 끄는 파일이라 부품 함수 대신 클래스 · data-size 계약 + 부품 CSS 직접 실음(묶음 셋 빌드 정상)
- 시험 넷 기대 고침 — 108(닫기 클래스) · 179-1(줌 사이 금 규칙 없음) · 196-1(칩 클래스) · 207-1(칩 반경 = 부품)
- 그대로 둔 것 — 수량 산출표(b06-detail__qtable · B07 산출서 병합 칸 · 세로선 = 부품 표에 없는 꼴) · 조정창 고르기 · 암 절토 칸(작은 단 없음) · 조정창 · ⋯ · 측점 목록 떠 있는 판

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

A05_EduDetail/guide/B06/_scenes.json

@@ -518,15 +518,15 @@
   "callouts": [
    {
     "n": 1,
-    "sel": "details.b06-std__diagram"
+    "sel": ".b06-std__diagram"
    },
    {
     "n": 2,
-    "sel": "details.b06-std__group"
+    "sel": ".b06-std__group"
    },
    {
     "n": 3,
-    "sel": "details.b06-std__loader"
+    "sel": ".b06-std__loader"
    },
    {
     "n": 4,
@@ -556,7 +556,7 @@
     "click": "section.ui-collapsible:has(> .ui-collapsible__title:text-is('표준 횡단면 설정')) > .ui-collapsible__title"
    }
   ],
-  "clip": "details.b06-std__diagram",
+  "clip": ".b06-std__diagram",
   "callouts": [],
   "viewport": [
    1600,
@@ -581,7 +581,7 @@
     "click": "section.ui-collapsible:has(> .ui-collapsible__title:text-is('표준 횡단면 설정')) > .ui-collapsible__title"
    }
   ],
-  "clip": "details.b06-std__group",
+  "clip": ".b06-std__group",
   "callouts": [],
   "viewport": [
    1600,

B06_Section/B06_Section_UI_Adjust_Dock.ts

@@ -14,7 +14,7 @@
  * 그래서 [횡단 조정] 상자 자체는 화면에 서지 않는다(사본을 담아 두는 자리로만 남음).
  * ========================================================================== */
 
-let dockRoot: HTMLDetailsElement | null = null;
+let dockRoot: HTMLElement | null = null;
 let slot: HTMLElement | null = null;
 let placeholder: HTMLElement | null = null;
 /** 유입구·유출구·추가 기슭막이 그룹의 이식 자리(2026-08-29 지시 4, 2026-08-30 지시 4).
@@ -246,12 +246,12 @@ function relocateSideRows(panelRoot: HTMLElement, scroll = true): void {
 
 function ensureDock(): void {
   if (dockRoot) return;
-  dockRoot = document.createElement("details");
-  dockRoot.className = "b06-adjust-dock";
-  dockRoot.open = true;
+  dockRoot = document.createElement("section"); // 부품 접이 구역(553-2)
+  dockRoot.className = "ui-collapsible b06-adjust-dock";
   // 줄은 모두 폼 칸으로 옮겨 가므로 상자는 서지 않는다(24-4a).
   dockRoot.hidden = true;
-  const summary = document.createElement("summary");
+  const summary = document.createElement("h4");
+  summary.className = "ui-collapsible__title";
   summary.textContent = "횡단 조정";
   placeholder = document.createElement("p");
   placeholder.className = "b06-adjust-dock__empty";

B06_Section/B06_Section_UI_Cross_Card_Chrome.ts

@@ -16,6 +16,7 @@ import {
   stationLabel,
   structureDisplayName,
 } from "./B06_Section_UI_Section_Common";
+import "@ui/ui_template_badge.css"; // 알약 = 부품 배지 클래스(553-2)
 
 /**
  * 성토사면 경사길이 표기 칸 — 성토측이 없으면 null.
@@ -96,7 +97,10 @@ export function appendCardHeader(
 
   // 단면유형 pill(자동 판정, 읽기 전용) — 구조물 pill과 동일 표기, 좌측 배치(E-3).
   const modePill = document.createElement("span");
-  modePill.className = "b06-cross-card__mode";
+  // 부품 배지(알약 · 정보) 20(553-2) — 클래스 · data-size 계약(흉내 DOM 시험이 @ui 를 안 풂)
+  modePill.className =
+    "ui-badge ui-badge--pill ui-badge--info ui-tag ui-tag--info b06-cross-card__mode";
+  modePill.setAttribute("data-size", "20");
   modePill.textContent = sectionModeLabel(section.design?.section_mode);
   modePill.title = L("B06_Design_Mode_Legend");
 
@@ -121,7 +125,9 @@ export function appendCardHeader(
   const structureName = section.structure;
   if (structureName) {
     const structure = document.createElement("span");
-    structure.className = "b06-cross-card__structure";
+    structure.className =
+      "ui-badge ui-badge--pill ui-badge--accent ui-tag ui-tag--accent b06-cross-card__structure"; // 배지 20
+    structure.setAttribute("data-size", "20");
     // 배수관은 관종·관경(`파형강관 D1200`)이 아니라 표시 이름 하나로 적는다
     // (2026-09-03 사용자 지시). 관종·관경은 툴팁에 남긴다.
     structure.textContent = structureDisplayName(structureName);

B06_Section/B06_Section_UI_Cross_Detail_Select.ts

@@ -343,7 +343,8 @@ export function attachDetailSelect(input: {
   label.className = "b06-cross-card__line-dims b06-detail__measure";
   const put = document.createElement("button");
   put.type = "button";
-  put.className = "b06-cross-card__zoom-btn b06-detail__commit";
+  put.className = "ui-btn ui-btn--ghost b06-cross-card__zoom-btn b06-detail__commit"; // 부품 단추 22
+  put.setAttribute("data-size", "22");
   put.textContent = "칸에 넣기";
   put.title = "고른 선을 칸에 넣음(Enter)";
   put.addEventListener("click", (event) => {
@@ -355,7 +356,8 @@ export function attachDetailSelect(input: {
   let multi = false;
   const multiBtn = document.createElement("button");
   multiBtn.type = "button";
-  multiBtn.className = "b06-cross-card__zoom-btn ui-touch-only";
+  multiBtn.className = "ui-toggle ui-toggle--chip b06-cross-card__zoom-btn ui-touch-only"; // 켜기 칩 22
+  multiBtn.setAttribute("data-size", "22");
   multiBtn.textContent = "여럿";
   multiBtn.title = "선 여럿 고르기 (Shift 누르고 누르기와 같음)";
   multiBtn.setAttribute("aria-pressed", "false");
@@ -363,7 +365,6 @@ export function attachDetailSelect(input: {
     event.stopPropagation();
     multi = !multi;
     multiBtn.setAttribute("aria-pressed", String(multi));
-    multiBtn.classList.toggle("is-on", multi);
   });
 
   const show = (): void => {

B06_Section/B06_Section_UI_Cross_Notice_Chips.ts

@@ -53,7 +53,9 @@ export function createNoticeChips(
       ...items.map((item) => {
         const chip = document.createElement("button");
         chip.type = "button";
-        chip.className = `b06-section__notice-chip b06-section__notice-chip--${item.tone}`;
+        // 부품 단추(고스트) 20(553-2) — 클래스 · data-size 계약 · 경고 / 정보 색은 페이지
+        chip.className = `ui-btn ui-btn--ghost b06-section__notice-chip b06-section__notice-chip--${item.tone}`;
+        chip.setAttribute("data-size", "20");
         chip.dataset.noticeKey = item.key;
         chip.setAttribute("aria-expanded", String(item === open));
         chip.textContent = `${item.label} ${item.rows.length}`;
@@ -67,6 +69,8 @@ export function createNoticeChips(
       ...(open?.rows ?? []).map((row) => {
         const button = document.createElement("button");
         button.type = "button";
+        button.className = "ui-btn ui-btn--ghost"; // 부품 단추(고스트) 20
+        button.setAttribute("data-size", "20");
         button.textContent = row.text;
         button.dataset.stationId = row.stationId;
         button.classList.toggle("is-selected", row.stationId === picked);

B06_Section/B06_Section_UI_Cross_Panel_Base.ts

@@ -12,11 +12,13 @@
 
 import { FILL_SLOPE_RATIO_MIN } from "./logic/B06_Section_UI_Cross_Culvert_Const";
 
-/** 조작 버튼 하나 — 클릭이 카드 선택·팬으로 번지지 않게 막는다. */
+/** 조작 버튼 하나 — 클릭이 카드 선택·팬으로 번지지 않게 막는다.
+ *  부품 아이콘 단추(선) 22(553-2) — 클래스 · data-size 계약(흉내 DOM 시험이 @ui 를 안 풂). */
 export function makeButton(label: string, title: string, onClick: () => void): HTMLButtonElement {
   const button = document.createElement("button");
   button.type = "button";
-  button.className = "b06-structure-panel__btn";
+  button.className = "ui-icon-btn ui-icon-btn--outline b06-structure-panel__btn";
+  button.setAttribute("data-size", "22");
   button.textContent = label;
   button.title = title;
   button.addEventListener("click", (event) => {

B06_Section/B06_Section_UI_Cross_Structure_Panel.ts

@@ -393,7 +393,10 @@ export function buildStructurePanel(
   const makeToggle = (label: string, title: string, onToggle: (on: boolean) => void) => {
     const button = document.createElement("button");
     button.type = "button";
-    button.className = "b06-structure-panel__btn b06-structure-panel__toggle";
+    // 부품 켜기 칩 24(553-2) — 꼴은 유입 · 유출 그룹 칸(b05-structure__adjust-slot)이 덮음
+    button.className =
+      "ui-toggle ui-toggle--chip b06-structure-panel__btn b06-structure-panel__toggle";
+    button.setAttribute("data-size", "24");
     button.textContent = label;
     button.title = title;
     let on = true;

B06_Section/B06_Section_UI_Cross_View_Zoom.ts

@@ -76,7 +76,9 @@ export function buildZoomControls(handle: ZoomPanHandle, width?: CrossWidthActio
   const add = (label: string, title: string, action: () => void): void => {
     const button = document.createElement("button");
     button.type = "button";
-    button.className = "b06-cross-card__zoom-btn";
+    // 부품 아이콘 단추 22(553-2) — 클래스 · data-size 계약(흉내 DOM 시험이 @ui 를 안 풂)
+    button.className = "ui-icon-btn ui-icon-btn--ghost b06-cross-card__zoom-btn";
+    button.setAttribute("data-size", "22");
     button.textContent = label;
     button.title = title;
     button.addEventListener("click", (event) => {

B06_Section/B06_Section_UI_Missing_Stations.ts

@@ -21,6 +21,7 @@ import { useDesignStore } from "../A00_Common/design/design_store";
 import { savingDesign } from "../A00_Common/design/design_save";
 import { pageRouteId } from "../A00_Common/design/design_page_route";
 import { invalidateSectionDetail, loadSectionDetail } from "./B06_Section_Section_Store";
+import "@ui/ui_template_banner.css"; // 줄 = 부품 띠 알림 클래스(553-2)
 
 interface MissingStation {
   chainage_m: number;
@@ -67,9 +68,11 @@ export async function mountMissingStationNotice(
   if (!missing.length) return;
 
   const box = document.createElement("div");
-  box.className = "b06-missing-stations";
+  // 부품 띠 알림(경고 · 553-2) — 클래스 계약(흉내 DOM 시험이 띠 부품 파일을 안 풂)
+  box.className = "ui-banner ui-banner--warning b06-missing-stations";
+  box.role = "status";
   const text = document.createElement("p");
-  text.className = "b06-missing-stations__text";
+  text.className = "ui-banner__text b06-missing-stations__text";
   const where = missing
     .slice(0, 6)
     .map((item) => `${item.chainage_m.toFixed(2)}m ${item.label}`)

B06_Section/B06_Section_UI_Section_Common.ts

@@ -25,6 +25,7 @@ export {
   inferStationInterval,
   stationLabel,
 } from "@util/common_util_svg";
+import "@ui/ui_template_empty.css"; // emptyView = 부품 빈 상태 클래스(553-2)
 
 export const LONG_WIDTH = 1200;
 export const LONG_HEIGHT = 220;
@@ -317,10 +318,14 @@ export function windowElevationRange(
   return min <= max ? { min, max } : undefined;
 }
 
+/** 빈 상태 = 부품 빈 상태(553-2) — 클래스 계약(서버 Node 묶음이 끄는 파일이라 부품 파일을 안 부름). */
 export function emptyView(message: string): HTMLElement {
   const empty = document.createElement("div");
-  empty.className = "b06-section__empty";
-  empty.textContent = message;
+  empty.className = "ui-empty b06-section__empty";
+  const text = document.createElement("p");
+  text.className = "ui-empty__text";
+  text.textContent = message;
+  empty.append(text);
   return empty;
 }
 

B06_Section/B06_Section_UI_Standard_Diagram.ts

@@ -33,11 +33,11 @@ function text(x: number, y: number, value: string, cls: string, anchor = "middle
  * 좌표 규약(+offset=좌)에 맞춰 절토측(측구 방향)을 왼쪽에 둔다.
  */
 export function buildStandardDiagram(): HTMLElement {
-  const wrap = document.createElement("details");
-  wrap.className = "b06-std__diagram";
-  wrap.open = true;
-  const summary = document.createElement("summary");
-  summary.className = "b06-std__diagram-summary";
+  // 부품 접이 구역(553-2) — 제목 줄 누름은 패널 attachCollapsible 위임이 받음
+  const wrap = document.createElement("section");
+  wrap.className = "ui-collapsible b06-std__diagram";
+  const summary = document.createElement("h4");
+  summary.className = "ui-collapsible__title b06-std__diagram-summary";
   summary.textContent = L("B06_Std_Diagram_Title");
   summary.title = L("B06_Std_Diagram_Toggle");
   wrap.append(summary);

B06_Section/B06_Section_UI_Standard_Panel.ts

@@ -36,6 +36,7 @@ import {
   type StandardCrossKey,
   type StandardCrossSection,
 } from "./B06_Section_Api_Fetch";
+import "@ui/ui_template_banner.css"; // 미반영 알림 = 부품 띠 알림 클래스(553-2)
 
 function L(key: keyof typeof ui_locales): string {
   return ui_locales[key][currentLanguageIndex];
@@ -328,7 +329,7 @@ export function createStandardPanel(
   //   ⓘ 실측 예 — 측점 20.0m 절토 계 3.33㎡(저장분) ↔ 3.90㎡(패널 초안: 암 측구 상폭 0.69→0.9).
   let applied = baseline();
   const pending = document.createElement("p");
-  pending.className = "b06-std__pending";
+  pending.className = "ui-banner ui-banner--warning b06-std__pending"; // 부품 띠 알림(경고 · 553-2)
   pending.textContent =
     "고친 값이 측점에 아직 안 실렸습니다 — [전체 측점 반영]을 누르면 바로 따라오고, " +
     "[저장]·[>](확정) 때도 전 측점이 이 값으로 다시 섭니다. 그전에 카드를 만지면 그 측점만 먼저 바뀝니다.";
@@ -417,11 +418,11 @@ export function createStandardPanel(
 
   /** 「표준횡단면 상세값」 한 컨테이너 — 공통 → 암 → 포장 순, 구분선으로 나눈다. */
   const buildDetails = (): HTMLElement => {
-    const fieldset = document.createElement("details");
-    fieldset.className = "b06-std__group";
-    fieldset.open = true;
-    const legend = document.createElement("summary");
-    legend.className = "b06-std__legend";
+    // 부품 접이 구역(553-2) — 제목 줄 누름은 패널 attachCollapsible 위임이 받음
+    const fieldset = document.createElement("section");
+    fieldset.className = "ui-collapsible b06-std__group";
+    const legend = document.createElement("h4");
+    legend.className = "ui-collapsible__title b06-std__legend";
     legend.textContent = L("B06_Std_Detail_Title");
     fieldset.append(
       legend,
@@ -513,10 +514,11 @@ function buildProjectLoader(
   projectId: string,
   onApply: (source: StandardCrossSection) => void,
 ): HTMLElement {
-  const wrap = document.createElement("details");
-  wrap.className = "b06-std__loader";
-  const summary = document.createElement("summary");
-  summary.className = "b06-std__loader-summary";
+  // 부품 접이 구역(553-2) — 처음 접힘
+  const wrap = document.createElement("section");
+  wrap.className = "ui-collapsible is-collapsed b06-std__loader";
+  const summary = document.createElement("h4");
+  summary.className = "ui-collapsible__title b06-std__loader-summary";
   summary.textContent = L("B06_Std_Load_Title");
   wrap.append(summary);
 

B06_Section/B06_Section_UI_Style.css

@@ -153,12 +153,14 @@
   padding: var(--spacing-8);
 }
 
-.b06-std__diagram-summary {
-  cursor: pointer;
+/* 접이 구역 제목 = 부품 접이 제목 줄(553-2) — 글 꼴만 */
+.b06-std__diagram-summary,
+.b06-std__loader-summary,
+.b06-std__legend {
+  margin: 0;
   font-size: var(--text-caption);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
-  user-select: none;
 }
 
 .b06-std__diagram-svg {
@@ -178,14 +180,6 @@
   padding: var(--spacing-8);
 }
 
-.b06-std__loader-summary {
-  cursor: pointer;
-  font-size: var(--text-caption);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-secondary);
-  user-select: none;
-}
-
 .b06-std__loader-status {
   margin: 0;
   font-size: var(--text-caption);
@@ -266,18 +260,6 @@
   background-color: var(--color-surface);
 }
 
-.b06-std__legend {
-  font-size: var(--text-caption);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-secondary);
-}
-
-/* 구간 그룹 접기(N-4-1) — details/summary. 기본 ▶ 마커로 접힘/펼침 표시. */
-.b06-std__group > summary.b06-std__legend {
-  cursor: pointer;
-  user-select: none;
-}
-
 .b06-std__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -324,14 +306,9 @@
   gap: var(--spacing-8);
 }
 
-/* 고친 값이 아직 측점에 안 실렸다는 알림 — [전체 측점 반영] 바로 위. */
+/* 고친 값이 아직 측점에 안 실렸다는 알림 — [전체 측점 반영] 바로 위 · 꼴 = 부품 띠 알림(경고 · 553-2). */
 .b06-std__pending {
   margin: var(--spacing-8) 0 0;
-  padding: var(--spacing-8);
-  border-left: 3px solid var(--color-warning, #d98324);
-  background: var(--color-surface-muted, rgb(217 131 36 / 8%));
-  font-size: 0.85em;
-  line-height: 1.45;
 }
 
 /* --- 우측 결과 --- */

B06_Section/B06_Section_UI_Style_Cross.css

@@ -179,16 +179,11 @@ html.is-bm-route .b06-section__notice-bar {
   gap: var(--spacing-4);
 }
 
+/* 칩 = 부품 단추(고스트) 20 — 둥근 사각(207-1 · 알약 아님) · 색만 경고 / 정보(553-2) */
 .b06-section__notice-chip {
-  padding: 2px var(--spacing-8);
-  border: 1px solid currentColor;
-  /* 둥근 사각(207-1) — 공용 단추 반경 · 알약 아님 */
-  border-radius: var(--radius-buttons);
-  background: transparent;
+  border-color: currentColor;
   color: var(--color-warning);
-  font-size: var(--text-caption);
   white-space: nowrap;
-  cursor: pointer;
 }
 
 /* 소단 검토 — 정보(경고 색 아님 · 2026-09-15 브레인 ③). */
@@ -228,7 +223,6 @@ html.is-bm-route .b06-section__notice-bar {
 }
 
 .b06-section__notice-list > button {
-  font-size: var(--text-caption);
   white-space: nowrap;
 }
 
@@ -311,15 +305,9 @@ html.is-bm-route .b06-section__notice-bar {
   border-left: 1px solid var(--color-border);
 }
 
-/* 단면유형 pill(E-3) — 구조물 pill과 동일 표기. */
+/* 단면유형 pill(E-3) = 부품 배지(정보) 20 · 구조물 pill = 배지(강조) 20(553-2). */
 .b06-cross-card__mode {
   flex: 0 0 auto;
-  padding: 1px 6px;
-  border-radius: var(--radius-pills);
-  background: color-mix(in srgb, var(--color-info, rgb(37 99 235)) 14%, transparent);
-  color: var(--color-info, rgb(37 99 235));
-  font-size: var(--text-caption);
-  white-space: nowrap;
 }
 
 /* 단면유형 pill을 지반유형 우측·우측 맞춤으로 밀어 붙인다(1번). meta는 그 뒤에 따라온다. */
@@ -338,16 +326,6 @@ html.is-bm-route .b06-section__notice-bar {
   font-size: var(--text-body);
 }
 
-/* 비정규 측점의 구조물 라벨 — kind(일반측점/BP/EP) 좌측에 자수정색 pill로 표기. */
-.b06-cross-card__structure {
-  padding: 1px 6px;
-  border-radius: var(--radius-pills);
-  background: color-mix(in srgb, var(--color-royal-amethyst, rgb(109 40 217)) 16%, transparent);
-  color: var(--color-royal-amethyst, rgb(109 40 217));
-  font-size: var(--text-caption);
-  white-space: nowrap;
-}
-
 .b06-cross-card > footer {
   border-top: 1px solid var(--color-border);
 }
@@ -357,13 +335,8 @@ html.is-bm-route .b06-section__notice-bar {
   content: "\200b";
 }
 
+/* 꼴 = 부품 빈 상태(553-2) — 페이지는 높이 · 가운데만 */
 .b06-section__empty {
-  display: flex;
   min-height: 180px;
-  align-items: center;
   justify-content: center;
-  padding: var(--spacing-24);
-  border: 1px dashed var(--color-text-muted);
-  color: var(--color-text-muted);
-  background: var(--color-surface);
 }

B06_Section/B06_Section_UI_Style_Cross_Areas.css

@@ -463,27 +463,22 @@
 }
 
 /* 「측점 없는 관 N개」 알림 — 조용히 빠지던 것을 드러내는 줄(계획서 3-14 ㉯). */
+/* 꼴 = 부품 띠 알림(경고 · 553-2) — 페이지는 배치만 */
 .b06-missing-stations {
   align-items: center;
-  background: #fff8e6;
-  border: 1px solid #e0b872;
-  border-radius: 6px;
-  display: flex;
   flex-wrap: wrap;
-  gap: 8px 12px;
-  margin: 0 0 12px;
-  padding: 10px 12px;
+  gap: var(--spacing-8) var(--spacing-12);
+  margin: 0 0 var(--spacing-12);
 }
 
 .b06-missing-stations__text {
-  color: #7a5a12;
   flex: 1 1 320px;
   margin: 0;
 }
 
 .b06-missing-stations__reason {
-  color: #8a6a22;
   flex: 1 1 100%;
-  font-size: 12px;
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption);
   margin: 0;
 }

B06_Section/B06_Section_UI_Style_Cross_Controls.css

@@ -27,19 +27,6 @@
   gap: 2px;
 }
 
-.b06-structure-panel__toggle {
-  width: auto;
-  padding: 0 var(--spacing-8);
-}
-
-/* 켜짐 색은 **주 액션 색**이다(2026-08-30 사용자: 붉은 채움이 경고처럼 보인다).
- * 경고·삭제 자리를 비워 두고, 옵션이 켜졌다는 사실만 조용히 알린다. */
-.b06-structure-panel__toggle.is-on {
-  border-color: var(--color-primary);
-  background: var(--color-primary);
-  color: var(--color-primary-text);
-}
-
 .b06-structure-panel.is-hidden,
 .b06-structure-panel__value span.is-hidden,
 .b06-structure-panel__btn.is-hidden,
@@ -105,15 +92,6 @@
   grid-area: equal;
 }
 
-.b06-structure-panel__controls .b06-structure-panel__btn {
-  box-sizing: border-box;
-  width: 26px;
-  height: 22px;
-  padding: 0;
-  text-align: center;
-  line-height: 1;
-}
-
 .b06-structure-panel__hval {
   box-sizing: border-box;
   width: 3.5em;
@@ -187,24 +165,8 @@
   font-size: var(--text-caption);
 }
 
-.b06-structure-panel__btn {
-  padding: 0 var(--spacing-8);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-inputs);
-  background: var(--color-surface);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  font-size: var(--text-caption);
-  line-height: 1.6;
-}
-
-.b06-structure-panel__btn:hover {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
-}
-
+/* 단추 = 부품 아이콘 단추(선) 22 · 닫기 ✕ 만 고스트(553-2) */
 .b06-structure-panel__close {
-  padding: 0 4px;
   border-color: transparent;
   background: transparent;
 }
@@ -225,7 +187,7 @@
 .b06-cross-card__line-dims {
   align-self: center;
   padding: 1px var(--spacing-4);
-  color: var(--color-royal-amethyst);
+  color: var(--color-accent);
   font-size: 0.75rem;
   line-height: 1.25;
   text-align: right;
@@ -236,27 +198,9 @@
   display: none;
 }
 
-.b06-cross-card__zoom-btn {
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: none;
-  border-left: 1px solid var(--color-border);
-  background: none;
-  color: var(--color-text-secondary);
-  font-size: 0.8rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.b06-cross-card__zoom-btn:first-child,
-.b06-cross-card__line-dims[hidden] + .b06-cross-card__zoom-btn {
-  border-left: none;
-}
-
-.b06-cross-card__zoom-btn:hover {
-  color: var(--color-text);
-  background: var(--color-surface);
+/* 줌 단추 = 부품 아이콘 단추 22 · [칸에 넣기] = 단추 22 · [여럿] = 켜기 칩 22(553-2) — 부품 display 가 hidden 을 덮음 */
+.b06-cross-card__zoom-btn[hidden] {
+  display: none;
 }
 
 /* ── 좌측 [횡단 조정] 사본(2026-08-29 B05/B06 일원화) ─────────────────────
@@ -288,11 +232,11 @@
   border-top: 1px solid var(--color-border);
 }
 
-.b06-adjust-dock > summary {
+.b06-adjust-dock > .ui-collapsible__title {
+  margin: 0;
   color: var(--color-text-body);
   font-size: var(--text-caption);
   font-weight: var(--font-weight-medium);
-  cursor: pointer;
 }
 
 .b06-adjust-dock__empty {

B06_Section/B06_Section_UI_Style_Cross_Detail.css

@@ -232,9 +232,6 @@
 
 /* 고른 것 값(카드 179-1 꼴) · [칸에 넣기] — [+ − ⤢] 왼쪽 */
 .b06-detail__commit {
-  width: auto;
-  padding: 0 var(--spacing-4);
-  color: var(--color-accent);
   white-space: nowrap;
 }
 

resources/tester/test_108_drag_box_hit.py

@@ -115,7 +115,8 @@ def test_조정창은_제목과_단추만(out) -> None:
     """머리줄 = 제목 · 닫기(집수정 ↺ 없음) · BOX 오버레이 읽기 줄 = 끄는 중 미리 보기 하나."""
     assert out["wall"]["diag1"]["overlayHead"] == [
         "b06-structure-panel__title",
-        "b06-structure-panel__btn b06-structure-panel__close",
+        # 553-2 — 닫기 = 부품 아이콘 단추(선) 22 + 고스트 덮음
+        "ui-icon-btn ui-icon-btn--outline b06-structure-panel__btn b06-structure-panel__close",
     ]
     assert out["box"]["left"]["value"] == ["b06-structure-panel__drag"]
     assert out["ford"]["diag"]["value"] == ["b06-structure-panel__drag"]

resources/tester/test_179_1_line_dims_left.py

@@ -17,11 +17,10 @@ def _src(rel: str) -> str:
 def test_좁은_카드_내림_규칙_없음():
     css = _src("B06_Section/B06_Section_UI_Style_Cross_Controls.css")
     assert "@container" not in css
-    # 치수 칸 규칙은 기본 꼴 · 숨김(+ 옆 단추) 뿐 — 절대 자리 · 왼선 지움 규칙 없음
+    # 치수 칸 규칙은 기본 꼴 · 숨김 뿐 — 절대 자리 · 왼선 지움 규칙 없음(553-2 줌 단추 = 부품 · 사이 금 없음)
     assert re.findall(r"\.b06-cross-card__line-dims[^{,;]*\{", css) == [
         ".b06-cross-card__line-dims {",
         ".b06-cross-card__line-dims[hidden] {",
-        ".b06-cross-card__line-dims[hidden] + .b06-cross-card__zoom-btn {",
     ]
 
 

resources/tester/test_196_1_b06_notice_chips.py

@@ -90,8 +90,17 @@ out.tags = chipsRow.children.map((c) => [c.tag, c.type]);
 """
     )
     assert got["v"]["chips"] == [
-        ["성토 5m↑ 3", "false", "b06-section__notice-chip b06-section__notice-chip--warn"],
-        ["소단 검토 5", "false", "b06-section__notice-chip b06-section__notice-chip--info"],
+        # 553-2 — 칩 = 부품 단추(고스트) 20
+        [
+            "성토 5m↑ 3",
+            "false",
+            "ui-btn ui-btn--ghost b06-section__notice-chip b06-section__notice-chip--warn",
+        ],
+        [
+            "소단 검토 5",
+            "false",
+            "ui-btn ui-btn--ghost b06-section__notice-chip b06-section__notice-chip--info",
+        ],
     ]
     assert got["tags"] == [["button", "button"], ["button", "button"]]
     assert got["v"]["panelHidden"] is True and got["v"]["rows"] == []

resources/tester/test_207_1_b06_notice_overlay.py

@@ -39,9 +39,11 @@ const marks = () => panel2.children.map((b) => [b.dataset.stationId, b.classList
 
 
 def test_칩은_둥근_사각_공용_단추_반경_알약_아님():
+    # 553-2 — 칩 = 부품 단추(고스트 · 둥근 사각) · 페이지는 색만
     chip = _rule(".b06-section__notice-chip")
-    assert "border-radius: var(--radius-buttons)" in chip
-    assert "radius-pills" not in chip and "radius-sm" not in chip
+    assert "border-radius" not in chip and "radius-pills" not in chip
+    chips = (B06 / "B06_Section_UI_Cross_Notice_Chips.ts").read_text(encoding="utf-8")
+    assert "`ui-btn ui-btn--ghost b06-section__notice-chip" in chips
 
 
 def test_내용_칸은_흐름_밖_카드_위에_겹침():