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>
2026-10-26 23:08:13 +09:00
parent 913122ac4e
commit e2b3a87828
21 changed files with 107 additions and 182 deletions
@@ -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";
@@ -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);
@@ -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 => {
@@ -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);
@@ -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) => {
@@ -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;
@@ -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) => {
@@ -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}`)
@@ -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;
 }

@@ -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);
@@ -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);

@@ -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;
 }

 /* --- 우측 결과 --- */
@@ -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);
 }
@@ -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;
 }
@@ -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 {
@@ -232,9 +232,6 @@

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