fix(ui-kit): 부품 흠 둘 — 숨김이 부품 display 를 이김 · 모달 머리 [닫기] 한 줄 (PLAN 552-6)

- 부품 CSS 37 파일: display 를 주는 ui-* 클래스마다 같은 파일에 [hidden] { display: none !important } (공용 기본 꼴 없는 곳 · 페이지 꾸밈 위에서도) · 옛 숨김 규칙 일곱 파일 !important 로 · 접이 카드 머리는 collapsible.css - 모달 머리: 제목 한 줄 말줄임(전체 글 = title) · [닫기] · 머리 단추 flex: none · nowrap - 부품 모음 모달 견본에 긴 제목 24rem 한 칸 - 지킴 시험 test_552_6_part_fixes Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-27 00:07:37 +09:00
parent e9ff94a0d4
commit 54410dd26a
42 changed files with 350 additions and 16 deletions
@@ -0,0 +1,64 @@
+"""552-6 부품 흠 둘 지킴 시험 — 화면 실측은 Playwright · ORCA(부품 모음 · M01 · M02 · B06 모달).
+
+① [hidden] — 부품 CSS 마다 display 를 주는 ui-* 클래스는 숨김 규칙(!important)이 같은 파일에 있음
+   (공용 기본 꼴 `[hidden]` 이 안 실린 곳 · 페이지 꾸밈 위에서도 숨김이 이김)
+② 모달 머리 — 긴 제목 = 한 줄 말줄임 · [닫기] · 머리 단추는 안 줄고 안 꺾임
+"""
+
+from __future__ import annotations
+
+import re
+from pathlib import Path
+
+UI = Path(__file__).resolve().parents[2] / "ui_template"
+SKIP = {"ui_template_theme.css", "ui_template_ui_kit.css"}  # 공통 값 · 부품 모음 화면 자체
+STATE = re.compile(r":(hover|focus|active|checked|disabled)|\[data-|\[aria-|:not")
+
+
+def _css(path: Path) -> str:
+    s = re.sub(r"/\*.*?\*/", "", path.read_text(encoding="utf-8"), flags=re.S)
+    return re.sub(r"@[^{;]+\{", "", s)  # @media 겉 떼어 냄
+
+
+def _missing(path: Path) -> list[str]:
+    hidden, shown = set(), set()
+    for sel, body in re.findall(r"([^{}]+)\{([^{}]*)\}", _css(path)):
+        if "[hidden]" in sel:
+            if "!important" in body:
+                hidden.update(re.findall(r"\.(ui-[\w-]+)", sel))
+            continue
+        m = re.search(r"(?<![\w-])display\s*:\s*([\w-]+)", body)
+        if not m or m.group(1) == "none":
+            continue
+        for one in sel.split(","):
+            last = re.split(r"[\s>+~]+", one.strip())[-1]
+            if not STATE.search(last):
+                shown.update(re.findall(r"\.(ui-[\w-]+)", last))
+    return sorted(shown - hidden)
+
+
+def test_숨김이_부품_display_를_이김():
+    miss = {p.name: _missing(p) for p in sorted(UI.glob("*.css")) if p.name not in SKIP}
+    assert {k: v for k, v in miss.items() if v} == {}
+    # 접이 카드 머리 = theme.css 의 display → 숨김은 접이 카드 파일에
+    assert ".ui-collapsible__title[hidden]" in (UI / "ui_template_collapsible.css").read_text(
+        encoding="utf-8"
+    )
+
+
+def test_모달_머리_닫기_한_줄():
+    css = (UI / "ui_template_modal.css").read_text(encoding="utf-8")
+    h3 = re.search(r"\.ui-modal__top > h3 \{([^}]*)\}", css).group(1)
+    for d in (
+        "min-width: 0;",
+        "overflow: hidden;",
+        "text-overflow: ellipsis;",
+        "white-space: nowrap;",
+    ):
+        assert d in h3
+    assert "flex: none;" in re.search(r"\.ui-modal__top > :not\(h3\) \{([^}]*)\}", css).group(1)
+    assert re.search(r"\.ui-modal__top > button,[^{]*\{[^}]*white-space: nowrap;", css)
+    ts = (UI / "ui_template_modal.ts").read_text(encoding="utf-8")
+    assert (
+        'el("h3", { text: opts.title, attrs: { title: opts.title } })' in ts
+    )  # 말줄임 = 전체 글은 title
@@ -79,3 +79,8 @@
  border-radius: 50%;
  background: var(--badge-tone);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-badge[hidden] {
+  display: none !important;
+}
@@ -14,8 +14,9 @@
  font-size: 13px;
  line-height: 1.45;
 }
-.ui-banner[hidden] {
-  display: none;
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-banner, .ui-banner__body, .ui-banner__actions)[hidden] {
+  display: none !important;
 }
 .ui-banner--warning {
  --banner-tone: var(--color-warning);
@@ -66,3 +66,8 @@
  opacity: 0.5;
  cursor: not-allowed;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-card, .ui-card--select, .ui-card__actions, .ui-card__head)[hidden] {
+  display: none !important;
+}
@@ -73,3 +73,8 @@
 .ui-checkbox--chip:has(.ui-checkbox__input:disabled) {
  opacity: 0.5;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-checkbox[hidden] {
+  display: none !important;
+}
@@ -2,3 +2,8 @@
 .ui-collapsible__title:is(:hover, [data-state="hover"])::after {
  color: var(--color-text);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-collapsible__title[hidden] {
+  display: none !important;
+}
@@ -22,7 +22,7 @@
 }

 .ui-ctx-menu[hidden] {
-  display: none;
+  display: none !important;
 }

 .ui-ctx-menu__item {
@@ -116,3 +116,8 @@
 .ui-row-menu__item.is-danger {
  color: var(--color-danger);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-row-menu, .ui-row-menu__btn, .ui-row-menu__item)[hidden] {
+  display: none !important;
+}
@@ -289,3 +289,8 @@
  background: var(--color-canvas);
  box-shadow: none;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-data-table__icon[hidden] {
+  display: none !important;
+}
@@ -52,3 +52,8 @@
  font-size: var(--text-caption);
  color: var(--color-danger);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-drop[hidden] {
+  display: none !important;
+}
@@ -30,3 +30,8 @@
  font-weight: 700;
  fill: var(--color-text);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-mini-bars, .ui-mini-donut-row)[hidden] {
+  display: none !important;
+}
@@ -53,3 +53,8 @@
  font-size: var(--text-caption);
  color: var(--color-text-muted);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-empty, .ui-empty__icon)[hidden] {
+  display: none !important;
+}
@@ -71,3 +71,8 @@
  overflow: hidden;
  text-overflow: ellipsis;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-find, .ui-find__filters, .ui-find__list, .ui-find__row)[hidden] {
+  display: none !important;
+}
@@ -54,3 +54,8 @@
 .ui-float-panel.is-dragging {
  opacity: 0.92;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-float-panel, .ui-float-panel__head)[hidden] {
+  display: none !important;
+}
@@ -19,7 +19,7 @@
 }

 .ui-flow-legend[hidden] {
-  display: none;
+  display: none !important;
 }

 /* 색띠 자체 — 아래가 적음(파랑), 위가 많음(빨강). */
@@ -106,3 +106,8 @@ button.ui-legend__item:is(:hover, [data-state="hover"]) {
  height: 8px;
  border-radius: 50%;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-flow-legend__ticks, .ui-legend, .ui-legend__item)[hidden] {
+  display: none !important;
+}
@@ -162,3 +162,19 @@ html.is-bm-route .ui-general-layout__header {
 html.is-bm-route .ui-general-block__section {
  scroll-margin-top: var(--app-burger-inset);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(
+  .ui-btn-group,
+  .ui-general-block__actions,
+  .ui-general-block__section-header,
+  .ui-general-layout__content,
+  .ui-general-layout__header,
+  .ui-page-frame,
+  .ui-page-frame__action,
+  .ui-page-frame__body,
+  .ui-page-frame__head,
+  .ui-subtabs__tools
+)[hidden] {
+  display: none !important;
+}
@@ -165,3 +165,17 @@
 .ui-group-card__sum {
  font-weight: var(--font-weight-bold);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(
+  .ui-group-card,
+  .ui-group-card__foot,
+  .ui-group-card__head,
+  .ui-group-cards,
+  .ui-group-cards__actions,
+  .ui-group-cards__bar,
+  .ui-group-cards__cols,
+  .ui-group-cards__grid
+)[hidden] {
+  display: none !important;
+}
@@ -212,3 +212,16 @@
  color: var(--color-warning);
  font-size: 0.9em;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(
+  .ui-help-figure__empty,
+  .ui-help-head,
+  .ui-help-note,
+  .ui-help__edit,
+  .ui-help__grid,
+  .ui-help__subs,
+  .ui-help__toc
+)[hidden] {
+  display: none !important;
+}
@@ -21,7 +21,7 @@
 }

 .ui-hover-info[hidden] {
-  display: none;
+  display: none !important;
 }

 /* 제자리 상자(tooltipBox · 552-2) — 흐름 안 · 그림 위 설명은 부르는 쪽이 absolute 로 놓음 */
@@ -29,3 +29,8 @@
  position: static;
  display: inline-block;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-hover-info--inline[hidden] {
+  display: none !important;
+}
@@ -4,3 +4,8 @@
  place-items: center;
  flex: none;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-icon[hidden] {
+  display: none !important;
+}
@@ -100,3 +100,8 @@ textarea.ui-input {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-input-unit, .ui-slider)[hidden] {
+  display: none !important;
+}
@@ -64,14 +64,14 @@

 .ui-item-picker__table-wrap[hidden],
 .ui-item-picker__table[hidden] {
-  display: none;
+  display: none !important;
 }

 .ui-item-picker__cols[hidden],
 .ui-item-picker__actions[hidden],
 .ui-item-picker .ui-modal__actions[hidden],
 .ui-item-picker__edit-host[hidden] {
-  display: none;
+  display: none !important;
 }

 .ui-item-picker__head {
@@ -303,3 +303,23 @@
 .ui-item-picker__labor-line.is-warn {
  color: var(--color-danger);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(
+  .ui-item-picker__cards,
+  .ui-item-picker__detail,
+  .ui-item-picker__edit,
+  .ui-item-picker__edit-body,
+  .ui-item-picker__edit-cad,
+  .ui-item-picker__edit-inputs,
+  .ui-item-picker__edit-sheet,
+  .ui-item-picker__edit-top,
+  .ui-item-picker__folder,
+  .ui-item-picker__head,
+  .ui-item-picker__layers,
+  .ui-item-picker__left,
+  .ui-item-picker__status,
+  .ui-item-picker__tree
+)[hidden] {
+  display: none !important;
+}
@@ -41,3 +41,8 @@
 .ui-kv__mark.is-bad {
  color: var(--color-danger);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-kv, .ui-kv__row)[hidden] {
+  display: none !important;
+}
@@ -114,3 +114,8 @@
  box-shadow: inset 3px 0 0 var(--ui-list-row-stripe, var(--color-border));
  border-radius: 0 var(--radius-buttons) var(--radius-buttons) 0;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-list-row__no, .ui-list-row__text, .ui-list-row__trailing, .ui-sidebar-row)[hidden] {
+  display: none !important;
+}
@@ -34,3 +34,8 @@
    animation-duration: 2.4s;
  }
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-loading[hidden] {
+  display: none !important;
+}
@@ -21,7 +21,7 @@
 }

 .ui-loupe[hidden] {
-  display: none;
+  display: none !important;
 }

 /* 복제를 놓는 판 — 화면(뷰포트) 크기 · 움직임은 translate 만(합성층 · 374-1) */
@@ -72,7 +72,7 @@
 }

 .ui-loupe__zoom[hidden] {
-  display: none;
+  display: none !important;
 }

 /* 가운데 십자 — 작게 */
@@ -33,9 +33,22 @@
  gap: var(--spacing-8);
 }

-/* 머리 단추 자리(곁값 actions) — 제목이 남는 폭을 먹고 단추는 [닫기] 바로 왼쪽 */
+/* 머리 단추 자리(곁값 actions) — 제목이 남는 폭을 먹고 단추는 [닫기] 바로 왼쪽 ·
+   긴 제목 = 한 줄 말줄임(전체 글 = title) · [닫기] · 머리 단추는 안 줄고 안 꺾임 */
 .ui-modal__top > h3 {
+  flex: 1 1 auto;
+  min-width: 0;
  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-modal__top > :not(h3) {
+  flex: none;
+}
+.ui-modal__top > button,
+.ui-modal__top > .ui-modal__actions > button {
+  white-space: nowrap;
 }

 .ui-modal__actions {
@@ -86,3 +99,8 @@
  width: 100%;
  margin-bottom: var(--spacing-16);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-modal, .ui-modal__actions, .ui-modal__backdrop, .ui-modal__body, .ui-modal__top)[hidden] {
+  display: none !important;
+}
@@ -47,7 +47,7 @@ export function buildModal(
  });
  const top = el("div", {
    className: "ui-modal__top",
-    children: [el("h3", { text: opts.title }), closeButton],
+    children: [el("h3", { text: opts.title, attrs: { title: opts.title } }), closeButton],
  });
  const dialog = el("div", {
    className: `ui-modal ${opts.wide ? "ui-modal--wide " : ""}${opts.dialogClass ?? ""}`.trim(),
@@ -546,3 +546,23 @@ html.is-bm-route[data-touch="on"]
  > .ui-workflow-overlay__header {
  min-height: calc(var(--spacing-8) * 2 + 44px);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(
+  .ui-panel-form,
+  .ui-sidebar-actions,
+  .ui-sidebar-card,
+  .ui-sidebar-fill,
+  .ui-sidebar-list,
+  .ui-sidebar-panel,
+  .ui-sidebar-scroll,
+  .ui-sidebar-split,
+  .ui-workflow-overlay__body,
+  .ui-workflow-overlay__handle,
+  .ui-workflow-overlay__handle-icon,
+  .ui-workflow-overlay__header,
+  .ui-workflow-overlay__panel,
+  .ui-workflow-overlay__scrim
+)[hidden] {
+  display: none !important;
+}
@@ -47,3 +47,8 @@
 .ui-panel-head__actions:empty {
  display: none;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-panel-head, .ui-panel-head__actions, .ui-panel-head__text)[hidden] {
+  display: none !important;
+}
@@ -139,3 +139,14 @@
 .ui-progress__label:empty {
  display: none;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(
+  .ui-progress,
+  .ui-progress-circle,
+  .ui-progress-circle__percent,
+  .ui-progress__fill,
+  .ui-progress__track
+)[hidden] {
+  display: none !important;
+}
@@ -88,3 +88,14 @@
    font-size: var(--text-heading);
  }
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(
+  .ui-public-frame,
+  .ui-public-frame__actions,
+  .ui-public-frame__hero-inner,
+  .ui-public-frame__section,
+  .ui-public-frame__section-body
+)[hidden] {
+  display: none !important;
+}
@@ -47,3 +47,8 @@
  opacity: 0.5;
  cursor: not-allowed;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-segment, .ui-segment__item)[hidden] {
+  display: none !important;
+}
@@ -56,3 +56,8 @@
 .ui-setting-row[data-size="compact"] strong {
  font-weight: inherit;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-setting-row, .ui-setting-row__side, .ui-setting-row__text)[hidden] {
+  display: none !important;
+}
@@ -10,7 +10,7 @@
 }

 .ui-side-panels-row[hidden] {
-  display: none;
+  display: none !important;
 }

 .ui-side-panels-row > :first-child {
@@ -87,7 +87,7 @@
 }

 .ui-side-panels__panel[hidden] {
-  display: none;
+  display: none !important;
 }

 /* 왼쪽 경계 — 끌기 · 화살표 키 */
@@ -168,3 +168,8 @@ html:is([data-size="compact"], [data-size="medium"])
 html:is([data-size="compact"], [data-size="medium"]) .ui-side-panels__grip {
  display: none;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-side-panels, .ui-side-panels__handles, .ui-side-panels__head)[hidden] {
+  display: none !important;
+}
@@ -68,3 +68,8 @@
 .ui-stat.is-bad .ui-stat__fill {
  background: var(--color-danger-fill);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-stat, .ui-stat-grid, .ui-stat__fill)[hidden] {
+  display: none !important;
+}
@@ -64,5 +64,10 @@
  text-align: center;
 }
 .ui-tabs__count[hidden] {
-  display: none;
+  display: none !important;
+}
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-tabs, .ui-tabs__tab)[hidden] {
+  display: none !important;
 }
@@ -35,3 +35,8 @@
  margin-right: 4px;
  vertical-align: middle;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-text[hidden] {
+  display: none !important;
+}
@@ -84,3 +84,8 @@
  opacity: 0.5;
  cursor: not-allowed;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-toggle[hidden] {
+  display: none !important;
+}
@@ -39,3 +39,8 @@
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+.ui-toolbar[hidden] {
+  display: none !important;
+}
@@ -61,3 +61,8 @@
  position: fixed;
  z-index: 1100;
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-tree__branch, .ui-tree__caret, .ui-tree__icon, .ui-tree__kids, .ui-tree__label)[hidden] {
+  display: none !important;
+}
@@ -270,9 +270,10 @@ export const KIT_PARTS: KitPart[] = [
      return openMenu(s, s === "disabled" ? [{ label: "내보내기", onClick: noop, disabled: true }, ...KIT_MENU] : KIT_MENU); } },
  { key: "empty", name: "빈 상태", group: "compound", kinds: "선 아이콘 · 한 줄 · 주 단추 · 사용법 · 작은 꼴", file: "ui_template_empty.ts",
    demo: (s) => (s === "default" ? col(createEmpty({ icon: "folder", text: "아직 프로젝트가 없음", hint: "새 프로젝트를 만들어 시작", action: createButton({ label: "새 프로젝트", onClick: noop }), onGuide: noop }), createEmpty({ text: "고른 측점 없음", small: true })) : null) },
-  { key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통(720) · 넓음 · 폭 단 24rem · 40rem · 960 · 확인 · 위험 확인 · 글 묻기(prompt 대신)", file: "ui_template_modal.ts",
+  { key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통(720) · 넓음 · 폭 단 24rem · 40rem · 960 · 긴 제목 = 한 줄 말줄임 · 확인 · 위험 확인 · 글 묻기(prompt 대신)", file: "ui_template_modal.ts",
    demo: (s) => { if (s !== "default") return null; const m = buildModal({ title: "구조물 고르기", closeLabel: "닫기", width: "40rem" }, noop); m.body.append("몸 — 표 · 양식이 들어감"); m.dialog.style.margin = "0";
-      return col(m.dialog, confirmPanel({ message: "노선을 저장할까요?" }).panel, confirmPanel({ title: "삭제", message: "임도 2 노선을 지울까요? 되돌릴 수 없음", okLabel: "삭제", danger: true }).panel, confirmPanel({ message: "블록 이름", field: { placeholder: "예: 배수관" } }).panel); } },
+      const long = buildModal({ title: "배수관 · 횡배수관 · 측구 · 집수정 · 옹벽 구조물을 한꺼번에 고르기", closeLabel: "닫기", width: "24rem" }, noop); long.body.append("[닫기] 는 한 줄 · 제목은 말줄임"); long.dialog.style.margin = "0";
+      return col(m.dialog, long.dialog, confirmPanel({ message: "노선을 저장할까요?" }).panel, confirmPanel({ title: "삭제", message: "임도 2 노선을 지울까요? 되돌릴 수 없음", okLabel: "삭제", danger: true }).panel, confirmPanel({ message: "블록 이름", field: { placeholder: "예: 배수관" } }).panel); } },
  { key: "toast", name: "알림", group: "compound", kinds: "토스트 4꼴(성공 · 오류 · 정보 · 경고) · 로딩 가림막 · 진행 가림막", file: "ui_template_toast.ts",
    demo: (s) => (s === "default" ? col(toastNode("저장됨", "success"), toastNode("저장 못 함 — 다시 시도", "error"), toastNode("노선을 불러옴", "info"), toastNode("측점 간격이 넓음", "warning")) : null) },
  { key: "banner", name: "띠 알림", group: "compound", kinds: "왼쪽 띠 · 정보 · 경고 · 위험 · 성공(✓) · 펼침 · 안 단추 · 닫기", file: "ui_template_banner.ts",
@@ -156,3 +156,8 @@ html.is-bm-route .ui-workflow-layout.is-options-open {
    --wf-burger-pad: var(--app-burger-inset);
  }
 }
+
+/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
+:is(.ui-workflow-layout__step, .ui-workflow-layout__steps)[hidden] {
+  display: none !important;
+}