feat(B07): 269-1 좌측 패널 컨테이너 공용 양식(구조물 배치 기준) · 공용 카드 함수

- ui_template: .ui-panel-form(칸 26px · 라벨 틈 2px · 캡션 글자 · 단추 크기) · .ui-panel-btn · createPanelCard - 칸 높이 · 라벨 틈 토큰 = theme 한 곳 · 「구조물 배치」도 같은 토큰 - B07 평면도 · 횡단도 묶음 = 공용 카드 · 도면 단추 = .ui-panel-btn · 페이지 덧칠 걷음 - 시험 test_269_panel_form · 212-3 기대값 · 130 · 153 헬퍼 공용 카드 연결 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QND7Co43B24zK2P937rdxt
2026-10-11 16:42:57 +09:00
parent ff738b7a3c
commit 3939cd11f9
11 changed files with 210 additions and 72 deletions
@@ -357,11 +357,11 @@

 /* ── 조작 컨트롤 높이 템플릿(2026-08-29 사용자 지시) ──────────────────────
 * 「구조물 배치」 섹션 안의 입력·셀렉트·스텝 묶음·이식 행이 **한 높이**를 쓴다.
- * 값을 바꾸려면 이 변수 하나만 고치면 된다. 기준은 조정창에서 옮겨 온 행의
+ * 값은 theme `--panel-control-h` 한 곳(좌측 패널 공용 양식이 함께 씀 · 269). 기준은 조정창에서 옮겨 온 행의
 * 컨트롤 높이(26px)다 — 사용자가 그 크기를 기준으로 정했다. */
 .b05-structure-section,
 .b05-drainage__facility {
-  --b05-control-h: 26px;
+  --b05-control-h: var(--panel-control-h);
 }

 .b05-structure-section input:not([type="checkbox"]),
@@ -409,7 +409,7 @@
 /* 제목(라벨)과 항목 사이 간격도 한 변수로 묶는다(2026-08-29 사용자 지시) — 기준은
   조정창에서 옮겨 온 행(2px·작은 글자). 측점 행은 가로 배치라 열 간격을 그대로 둔다. */
 .b05-structure-section {
-  --b05-label-gap: 2px;
+  --b05-label-gap: var(--panel-label-gap);
 }

 .b05-structure-section .b05-route__field {
@@ -6,7 +6,7 @@
 * DOM 만 만들고 상태는 갖지 않는다 — 고르기 동작은 인자로 받은 콜백에 넘긴다.
 * ========================================================================== */

-import { attachCollapsible } from "@ui/ui_template_collapsible";
+import { attachCollapsible, createPanelCard } from "@ui/ui_template_collapsible";
 import { createButton, createInputField, showToast } from "@ui/ui_template_elements";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import type { CrossDesignInfo, DesignDrawingItem } from "./B07_DesignDetail_Api_Fetch";
@@ -79,7 +79,7 @@ export function buildDrawingSidePanel(
  const drawingButton = (drawing: DesignDrawingItem, label: string): HTMLButtonElement => {
    const button = document.createElement("button");
    button.type = "button";
-    button.className = "b07-drawing-button";
+    button.className = "b07-drawing-button ui-panel-btn";
    button.dataset.drawingId = drawing.id;
    button.dataset.confirmed = String(drawing.confirmed);
    const name = document.createElement("span");
@@ -114,7 +114,7 @@ export function buildDrawingSidePanel(
      if (!drawing) {
        const placeholder = document.createElement("button");
        placeholder.type = "button";
-        placeholder.className = "b07-drawing-button";
+        placeholder.className = "b07-drawing-button ui-panel-btn";
        placeholder.disabled = true;
        placeholder.title = "준비 중";
        placeholder.dataset.pending = "true";
@@ -132,14 +132,10 @@ export function buildDrawingSidePanel(
      panel.append(button);
      continue;
    }
-    const section = document.createElement("section");
-    // ui-sidebar-section: 사이드 컨테이너 공통 외곽선(B04~B06과 통일, 2026-08-06 사용자 지시).
-    section.className = "b07-drawing-group ui-collapsible ui-sidebar-section";
+    // 컨테이너 = 좌측 패널 공용 카드(269 · B05/B06 「구조물 배치」 양식).
+    const section = createPanelCard(`${group.label} ${items.length}`);
+    section.classList.add("b07-drawing-group");
    if (group.kind) section.dataset.kind = group.kind;
-    const sectionTitle = document.createElement("h3");
-    sectionTitle.className = "ui-collapsible__title";
-    sectionTitle.textContent = `${group.label} ${items.length}`;
-    section.append(sectionTitle);
    if (cross) {
      // 표준 횡단면도 = 맨 위 한 줄(전체 폭) · 개수는 횡단 장만.
      for (const standard of drawings.filter((item) => item.kind === "cross_standard"))
@@ -9,6 +9,7 @@
 * ========================================================================== */

 import { createCheckbox } from "@ui/ui_template_checkbox";
+import { createPanelCard } from "@ui/ui_template_collapsible";
 import { createSelectField, showToast } from "@ui/ui_template_elements";
 import { stationFields } from "../B05_Profile/B05_Profile_UI_Structures_Fields";
 import {
@@ -257,9 +258,10 @@ export function buildPlanSection(
  makeButton: (drawing: DesignDrawingItem, label: string) => HTMLButtonElement,
  onManage?: () => void,
 ): HTMLElement {
-  const section = el("section", "b07-drawing-group b07-plan ui-collapsible ui-sidebar-section");
+  // 컨테이너 = 좌측 패널 공용 카드(269)
+  const section = createPanelCard(`평면도 ${items.length}`);
+  section.classList.add("b07-drawing-group", "b07-plan");
  section.dataset.kind = "plan";
-  section.append(el("h3", "ui-collapsible__title", `평면도 ${items.length}`));

  for (const { kindId, name, sheets } of groupPlanSheets(items)) {
    const block = el("div", "b07-plan-kind");
@@ -273,7 +275,7 @@ export function buildPlanSection(

  if (onManage) {
    // 종류 · 대피소 자리 · 장 미리보기는 모달 한 곳(좌측 공간 · 접근 혼돈 — 130-1).
-    const manage = el("button", "b07-plan-tools__button b07-plan-manage-open", "평면도 관리");
+    const manage = el("button", "ui-panel-btn b07-plan-manage-open", "평면도 관리");
    manage.type = "button";
    manage.addEventListener("click", onManage);
    section.append(manage);
@@ -40,15 +40,6 @@
  font-size: var(--text-body-sm);
 }

-.b07-drawing-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  /* 테두리 색·두께는 공통 ui-sidebar-section이 준다 — 여기선 형태(라운드·안쪽 여백)만. */
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-8);
-}
-
 /* 횡단도는 2열 배치 — 단, **칸이 좁아지면 1열로 접는다**(2026-09-08).
   좌측 패널이 320 고정이던 동안은 2열이 늘 128.8px 라 문제가 없었으나, 공용
   오버레이가 좁은 폭에서 패널을 280·227·182 로 물리면서 칸이 108.8 → 82.4 → 60px
@@ -62,13 +53,6 @@
  gap: var(--spacing-4);
 }

-.b07-drawing-group h3 {
-  margin: var(--spacing-8) 0 var(--spacing-4);
-  color: var(--color-text-muted);
-  font-size: var(--text-caption);
-  font-weight: 600;
-}
-
 /* 아직 내용이 없는 도면 — 눌리기는 하고 도각만 나온다(2026-09-01). 옅게 두되
   못 누르는 것처럼 보이지 않게 커서는 그대로 둔다. */
 .b07-drawing-button[data-pending="true"] {
@@ -94,22 +78,13 @@
  /* 격자 칸의 기본 최소폭은 글자 길이라, 이름이 길면 칸이 패널을 밀어내 단추가
     오른쪽으로 튀어나갔다(2026-09-04 실측 14px). 0으로 풀면 이름이 `…`로 잘린다. */
  min-width: 0;
-  min-height: 34px;
-  padding: var(--spacing-4) var(--spacing-8);
-  /* 경계가 뚜렷하도록 배경색과 유사하지만 조금 짙은 톤 + 은은한 테두리 */
-  border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
-  /* 확정 여부를 나타내는 좌측 색 띠 (미확정: 투명) */
+  /* 크기 · 테두리 · 바탕 · 글자 = 공용 `.ui-panel-btn`(269) · 여기선 확정 여부 좌측 색 띠(미확정: 투명)만 */
  border-left: 3px solid transparent;
-  border-radius: var(--radius-buttons);
-  background: color-mix(in srgb, var(--color-surface) 84%, #000);
-  color: var(--color-text);
-  cursor: pointer;
  text-align: center;
 }

 .b07-drawing-button__name {
  overflow: hidden;
-  font-size: var(--text-body-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
 }
@@ -227,7 +202,7 @@

 /* 횡단 장 배치(153-1 · 212-3) — 횡단도 묶음 맨 아래 전체 폭 · 한 줄에 한 일:
   배치 열 · 행 / [이 장] [모든 장] / 표 배율 [배율 적용] / [안내선 숨기기].
-   단추 · 숫자 칸 = 줄 위 작은 단추 한 규격(`--btn-bar-*` · 높이 16) · 한 줄 안 같은 너비 · 오류 자리는 접음. */
+   단추 · 숫자 칸 크기 = 좌측 패널 공용 양식(`.ui-panel-form` · 269) · 한 줄 안 같은 너비. */
 .b07-cross-layout-slot {
  grid-column: 1 / -1;
 }
@@ -260,17 +235,8 @@
  gap: var(--spacing-4);
 }

-.b07-cross-layout .ui-btn,
-.b07-cross-layout .ui-field .ui-input {
-  height: auto;
-  padding: var(--btn-bar-padding);
-  font-size: var(--btn-bar-font-size);
-  line-height: 1;
-}
-
 .b07-cross-layout .ui-field__label {
  margin: 0;
-  font-size: var(--btn-bar-font-size);
  white-space: nowrap;
 }

@@ -279,10 +245,6 @@
  min-width: 0;
 }

-.b07-cross-layout .ui-field__error {
-  display: none;
-}
-
 /* 확정을 건너뛴 개발 상태 알림 — 눈에 띄되 도면 목록을 밀어내지 않게 한 줄만. */
 .b07-drawing-list__bypass {
  margin: var(--spacing-4) 0 0;
@@ -315,10 +277,6 @@
  font-size: var(--text-caption);
 }

-.b07-plan-manage-open {
-  margin-top: var(--spacing-4);
-}
-
 /* [평면도 관리] 모달(130-1) — 왼쪽 종류 · 자리 · 장 목록 / 오른쪽 미리보기 · 공용 모달에 자기 class 로 큰 창 */
 .ui-modal.b07-plan-manage {
  width: min(1320px, 96vw);
@@ -140,7 +140,6 @@ const STUBS = {
      return cad;
    },
  },
-  "@ui/ui_template_collapsible": { attachCollapsible: () => {} },
  "@ui/ui_template_locale": {
    currentLanguageIndex: 0,
    ui_locales: new Proxy({}, { get: (_, key) => [String(key)] }),
@@ -233,6 +232,9 @@ function loadTs(file) {
  cache.set(full, box.exports);
  const localRequire = (request) => {
    if (STUBS[request]) return STUBS[request];
+    // 공용 카드(269) = 진짜 모듈(가짜 그릇 위에서 돎)
+    if (request === "@ui/ui_template_collapsible")
+      return loadTs(path.join(ROOT, "ui_template", "ui_template_collapsible.ts"));
    if (request === "./B07_DesignDetail_Api_Fetch") return API;
    if (request.startsWith(".")) return loadTs(path.join(path.dirname(full), `${request}.ts`));
    throw new Error(`stub 없음: ${request}`);
@@ -78,7 +78,9 @@ function loadTs(file) {
        ...loadTs(path.join(UI, "ui_template_elements.ts")),
        showToast: (message, kind) => toasts.push([kind, message]),
      };
-    if (request === "@ui/ui_template_collapsible") return { attachCollapsible: () => {} };
+    // 공용 카드(269) = 진짜 모듈
+    if (request === "@ui/ui_template_collapsible")
+      return loadTs(path.join(UI, "ui_template_collapsible.ts"));
    if (request === "@ui/ui_template_locale")
      return {
        currentLanguageIndex: 0,
@@ -4,7 +4,7 @@
 못박는 것
  - 줄 = 「배치 열 · 행」 · 「[이 장] [모든 장]」 · 「표 배율 [배율 적용]」
    · [안내선 숨기기](부르는 쪽).
-  - 단추 · 숫자 칸 · 이름 = 줄 위 작은 단추 토큰(187 `--btn-bar-*` · 높이 16) · 한 줄 안 같은 너비.
+  - 단추 · 숫자 칸 · 이름 = 좌측 패널 공용 양식(269 `.ui-panel-form`) · 한 줄 안 같은 너비.
  - 옛 한 줄 감기(flex-wrap) · 숫자 칸 48px 고정 없음.
  - [안내선 숨기기] 뒤 남는 검은 선 = 인쇄 칸선(도각 층 도면 개체 · 회청 `#8ea0b5`
    · 밝은 바탕에서 짙게 그려짐) — 안내선(겹판)과 다른 것이라 지우지 않음 · 단추는 겹판만 끔.
@@ -40,16 +40,13 @@ def _decl(block: str, prop: str) -> str:


 def test_단추_숫자_칸_한_규격_토큰():
-    shared = _block(".b07-cross-layout .ui-btn,\n.b07-cross-layout .ui-field .ui-input")
-    assert _decl(shared, "padding") == "var(--btn-bar-padding)"
-    assert _decl(shared, "font-size") == "var(--btn-bar-font-size)"
-    assert _decl(shared, "line-height") == "1"
-    assert _decl(shared, "height") == "auto"  # 공용 작은 칸 30px 를 풀어 단추 높이에 맞춤
+    # 269 — 크기는 좌측 패널 공용 양식(`.ui-panel-form`)이 줌 · B07 덧칠(줄 위 작은 단추 토큰) 없음
+    assert ".b07-cross-layout .ui-btn" not in CSS
+    assert ".b07-cross-layout .ui-field .ui-input {" in CSS  # 폭만
+    assert "height" not in _block(".b07-cross-layout .ui-field .ui-input")
    label = _block(".b07-cross-layout .ui-field__label")
-    assert _decl(label, "font-size") == "var(--btn-bar-font-size)"
-    # 토큰은 theme 한 곳(187)
-    assert "--btn-bar-padding: 1px var(--spacing-8);" in THEME
-    assert "--btn-bar-font-size: var(--text-caption);" in THEME
+    assert "font-size" not in label
+    assert "createPanelCard(" in PANELS  # 배치 칸이 사는 횡단도 묶음 = 공용 카드


 def test_한_줄에_한_일_같은_너비():
@@ -0,0 +1,96 @@
+# -*- coding: utf-8 -*-
+"""269 좌측 패널 컨테이너 공용 양식 — 기준 = B05/B06 「구조물 배치」.
+
+못박는 것
+  - 공용 양식 = ui_template 한 곳(`.ui-panel-form` · `.ui-panel-btn` · 카드 `createPanelCard`) ·
+    칸 높이 · 라벨 틈 토큰 = theme 한 곳 · 「구조물 배치」도 같은 토큰.
+  - B07 컨테이너 = 공용 카드 · 도면 단추 = `.ui-panel-btn` · 페이지 덧칠(크기 · 글자 · 바탕) 없음.
+"""
+
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+
+
+def _read(rel: str) -> str:
+    return (ROOT / rel).read_text(encoding="utf-8")
+
+
+THEME = _read("ui_template/ui_template_theme.css")
+OVERLAY = _read("ui_template/ui_template_overlay.css")
+COLLAPSIBLE = _read("ui_template/ui_template_collapsible.ts")
+B05_STRUCT_CSS = _read("B05_Profile/B05_Profile_UI_Style_Structures.css")
+B07_CSS = _read("B07_DesignDetail/B07_DesignDetail_UI_Style.css")
+B07_PANELS = _read("B07_DesignDetail/B07_DesignDetail_UI_Panels.ts")
+B07_PLAN = _read("B07_DesignDetail/B07_DesignDetail_UI_PlanKinds.ts")
+
+
+def _block(css: str, selector: str) -> str:
+    m = re.search(r"(?:^|\n)" + re.escape(selector) + r"\s*\{([^}]*)\}", css)
+    assert m, selector
+    return m.group(1)
+
+
+def test_공용_양식_토큰은_theme_한_곳_구조물_배치도_같은_토큰():
+    assert "--panel-control-h: 26px;" in THEME
+    assert "--panel-label-gap: 2px;" in THEME
+    assert "--b05-control-h: var(--panel-control-h);" in B05_STRUCT_CSS
+    assert "--b05-label-gap: var(--panel-label-gap);" in B05_STRUCT_CSS
+
+
+def test_공용_양식_칸_라벨_단추_규칙():
+    field = _block(
+        OVERLAY,
+        '.ui-panel-form input:not([type="checkbox"], [type="radio"], [type="range"]),\n'
+        ".ui-panel-form select",
+    )
+    assert "height: var(--panel-control-h);" in field
+    assert "padding: 0 6px;" in field
+    assert "font-size: var(--text-caption);" in field
+    label = _block(OVERLAY, ".ui-panel-form .ui-field,\n.ui-panel-form .b05-route__field")
+    assert "gap: var(--panel-label-gap);" in label
+    assert "display: none;" in _block(OVERLAY, ".ui-panel-form .ui-field__error:not(.is-visible)")
+    button = _block(OVERLAY, ".ui-panel-form .ui-btn:not(.ui-help-btn)")
+    # 「구조물 배치」 단추(b05-route__irregular-btn)와 같은 크기
+    assert "padding: var(--spacing-8);" in button
+    assert "font-size: var(--text-caption);" in button
+    assert "border-radius: var(--radius-inputs);" in button
+    raw = _block(OVERLAY, ":where(.ui-panel-btn)")
+    for decl in (
+        "padding: var(--spacing-8);",
+        "border-radius: var(--radius-inputs);",
+        "background: var(--color-surface);",
+        "font-size: var(--text-caption);",
+    ):
+        assert decl in raw, decl
+    # 아래 단추 묶음은 컨테이너 밖 — 공용 양식이 `.ui-sidebar-actions` 를 겨누지 않음
+    form_rules = OVERLAY[OVERLAY.index("좌측 패널 컨테이너 공용 양식(269)") :]
+    form_rules = form_rules[: form_rules.index("/* 카드 안에 다시 카드")]
+    assert "ui-sidebar-actions {" not in form_rules and "ui-sidebar-actions ." not in form_rules
+
+
+def test_공용_카드_함수():
+    assert "export function createPanelCard(" in COLLAPSIBLE
+    assert "ui-collapsible ui-sidebar-section ui-sidebar-card ui-panel-form" in COLLAPSIBLE
+
+
+def test_B07_컨테이너_공용_카드_도면_단추_공용_꼴():
+    assert "createPanelCard(`${group.label} ${items.length}`)" in B07_PANELS
+    assert "createPanelCard(`평면도 ${items.length}`)" in B07_PLAN
+    for src in (B07_PANELS, B07_PLAN):
+        assert "ui-collapsible ui-sidebar-section" not in src  # 손으로 짠 카드 없음
+    assert B07_PANELS.count('"b07-drawing-button ui-panel-btn"') == 2
+    assert '"ui-panel-btn b07-plan-manage-open"' in B07_PLAN
+
+
+def test_B07_페이지_덧칠_없음():
+    assert not re.search(r"(?:^|\n)\.b07-drawing-group\s*\{", B07_CSS)
+    assert ".b07-drawing-group h3 {" not in B07_CSS
+    assert ".b07-plan-manage-open {" not in B07_CSS
+    button = _block(B07_CSS, ".b07-drawing-button")
+    for prop in ("min-height", "padding", "border-radius", "background", "font-size"):
+        assert not re.search(r"(?:^|\s)" + prop + r"\s*:", button), prop
+    assert "font-size" not in _block(B07_CSS, ".b07-drawing-button__name")
+    assert ".b07-cross-layout .ui-btn" not in B07_CSS
+    assert ".b07-cross-layout .ui-field__error" not in B07_CSS
@@ -11,6 +11,17 @@
 * 스타일은 전역 `ui_template_theme.css`에 있어 어떤 페이지에서도 클래스만 붙이면 동작한다.
 * ========================================================================== */

+/** 좌측 패널 컨테이너 공용 카드(269) — 접는 제목 + 공용 양식(`ui-panel-form`) · 내용은 카드에 바로 붙임. */
+export function createPanelCard(title: string, collapsed = false): HTMLElement {
+  const section = document.createElement("section");
+  section.className = `ui-collapsible ui-sidebar-section ui-sidebar-card ui-panel-form${collapsed ? " is-collapsed" : ""}`;
+  const heading = document.createElement("h3");
+  heading.className = "ui-collapsible__title";
+  heading.textContent = title;
+  section.append(heading);
+  return section;
+}
+
 /** root 아래 `.ui-collapsible__title` 클릭을 위임 처리해 해당 컨테이너를 접거나 편다. */
 export function attachCollapsible(root: HTMLElement): void {
  root.addEventListener("click", (event) => {
@@ -415,6 +415,77 @@
  font-size: var(--text-body-sm);
 }

+/* 좌측 패널 컨테이너 공용 양식(269) — 기준 = B05/B06 「구조물 배치」(칸 높이 · 라벨 · 글자 · 단추).
+   B05~B09 좌측 컨테이너가 `.ui-panel-form`(카드는 `createPanelCard`)을 붙임 · 아래 단추 묶음
+   (`.ui-sidebar-actions`)은 컨테이너 밖이라 안 먹음 · 날 단추는 `.ui-panel-btn`. */
+:where(.ui-sidebar-card.ui-panel-form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.ui-panel-form .ui-field,
+.ui-panel-form .b05-route__field {
+  gap: var(--panel-label-gap);
+}
+
+.ui-panel-form .ui-field__label,
+.ui-panel-form .b05-route__field > span {
+  font-size: var(--text-caption);
+  line-height: 1.2;
+}
+
+.ui-panel-form .ui-field__error:not(.is-visible) {
+  display: none;
+}
+
+.ui-panel-form input:not([type="checkbox"], [type="radio"], [type="range"]),
+.ui-panel-form select {
+  box-sizing: border-box;
+  height: var(--panel-control-h);
+  padding: 0 6px;
+  font-size: var(--text-caption);
+  line-height: normal;
+}
+
+.ui-panel-form select.ui-select {
+  padding-right: 24px;
+  background-position: right 6px center;
+  background-size: 12px;
+}
+
+/* 숫자 칸 증감 화살표 없음 — 「구조물 배치」와 같게 */
+.ui-panel-form input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.ui-panel-form input[type="number"]::-webkit-outer-spin-button,
+.ui-panel-form input[type="number"]::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+/* 단추 크기 = 「구조물 배치」 단추(`b05-route__irregular-btn`) · 색은 단추 갈래(filled · ghost) 그대로 */
+.ui-panel-form .ui-btn:not(.ui-help-btn) {
+  padding: var(--spacing-8);
+  border-radius: var(--radius-inputs);
+  font-size: var(--text-caption);
+  line-height: normal;
+}
+
+/* 날 <button>(도면 단추 등) — 「구조물 배치」 단추 꼴 · 낮은 우선순위라 페이지 상태 표시(띠 · 고름)가 덮음 */
+:where(.ui-panel-btn) {
+  padding: var(--spacing-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-inputs);
+  background: var(--color-surface);
+  color: var(--color-text-body);
+  font-size: var(--text-caption);
+  cursor: pointer;
+}
+
 /* 카드 안에 다시 카드(M02 도면 안 구조물 도면 묶음) — 앞 목록과 간격 */
 .ui-sidebar-card .ui-sidebar-card {
  margin-top: var(--spacing-8);
@@ -161,6 +161,9 @@
  /* 입력칸 · 고르기칸 높이 — 크기마다 한 값(같은 줄이면 위아래가 맞음) */
  --control-height: 42px;
  --control-height-sm: 30px;
+  /* 좌측 패널 컨테이너 칸 높이 · 라벨 틈 — 기준 = B05/B06 「구조물 배치」 · 공용 양식 `.ui-panel-form` 이 씀 */
+  --panel-control-h: 26px;
+  --panel-label-gap: 2px;

  /* 줄 위 작은 단추 한 규격 — 종단 머리 줄 [초기화]~▼ · [배수유역도] · [새 창] 이 함께 씀(높이 = 글자 12 + 여백 2 + 테두리 2) */
  --btn-bar-padding: 1px var(--spacing-8);