260723_7

ui_template/ui_template_theme.css

@@ -331,6 +331,33 @@
   }
 }
 
+/* ─── 공용 접기 컨테이너 (ui_template_collapsible.ts) ─────────────────────────
+   컨테이너에 `ui-collapsible`, 제목에 `ui-collapsible__title`을 주면 제목 행 전체가
+   클릭 영역이 되고, 접히면 제목을 뺀 직속 자식이 숨겨진다. 펼침 ▾ / 접힘 ▸ 캐럿 표시. */
+.ui-collapsible__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8, 8px);
+  cursor: pointer;
+  user-select: none;
+}
+
+.ui-collapsible__title::after {
+  content: "▾";
+  flex: 0 0 auto;
+  color: var(--color-text-muted);
+  font-size: 0.8em;
+}
+
+.ui-collapsible.is-collapsed > .ui-collapsible__title::after {
+  content: "▸";
+}
+
+.ui-collapsible.is-collapsed > :not(.ui-collapsible__title) {
+  display: none;
+}
+
 html,
 body {
   margin: 0;