diff --git a/B03_FileInput/B03_FileInput_UI_Guide.ts b/B03_FileInput/B03_FileInput_UI_Guide.ts index dfa389d3..f0e40830 100644 --- a/B03_FileInput/B03_FileInput_UI_Guide.ts +++ b/B03_FileInput/B03_FileInput_UI_Guide.ts @@ -7,25 +7,28 @@ * 같은 자리 — 공용 오버레이의 좌측 패널(`createWorkflowOverlays.optionsContent`) — 로 * 옮기고, 본문은 고르는 자리만 남긴다. * - * 문단 구획은 공용 `ui-sidebar-section`을 쓴다(B04·B05 좌측 패널과 같은 테두리·간격). + * 패널 양식은 **B04~B07과 같은 공용 양식**을 그대로 쓴다(2026-09-03 사용자 지시): + * 패널 루트 `{page}__form`, 문단은 `ui-collapsible ui-sidebar-section` + 제목에 + * `ui-collapsible__title`. 제목 행을 누르면 접히는 동작·캐럿·외곽선이 전부 공용 것이다. * ========================================================================== */ +import { attachCollapsible } from "@ui/ui_template_collapsible"; import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale"; function L(key: keyof typeof ui_locales): string { return ui_locales[key][currentLanguageIndex]; } -/** 안내 문단 하나 — 제목 + 항목 목록. */ +/** 안내 문단 하나 — 공용 접기 컨테이너(B06 `buildGroup`과 같은 조립). */ function section( titleKey: keyof typeof ui_locales, itemKeys: (keyof typeof ui_locales)[], ): HTMLElement { const group = document.createElement("section"); - group.className = "ui-sidebar-section b03-file__guide-group"; + group.className = "b03-file__guide-group ui-collapsible ui-sidebar-section"; const title = document.createElement("h3"); - title.className = "b03-file__guide-title"; + title.className = "b03-file__guide-legend ui-collapsible__title"; title.textContent = L(titleKey); const list = document.createElement("ul"); @@ -49,7 +52,7 @@ function section( */ export function createInputGuide(statusNote?: HTMLElement): HTMLElement { const guide = document.createElement("div"); - guide.className = "b03-file__guide"; + guide.className = "b03-file__form"; const howTo = section("B03_Guide_How_Title", [ "B03_Guide_How_Drop", "B03_Guide_How_Card", @@ -69,5 +72,6 @@ export function createInputGuide(statusNote?: HTMLElement): HTMLElement { "B03_Guide_Notes_LasFree", ]), ); + attachCollapsible(guide); return guide; } diff --git a/B03_FileInput/B03_FileInput_UI_Style.css b/B03_FileInput/B03_FileInput_UI_Style.css index e654bc45..ce3677b2 100644 --- a/B03_FileInput/B03_FileInput_UI_Style.css +++ b/B03_FileInput/B03_FileInput_UI_Style.css @@ -232,26 +232,33 @@ } } -/* --- 좌측 안내 패널 (2026-09-03) — 본문에서 뺀 설명이 사는 자리. --- */ -.b03-file__guide { +/* --- 좌측 안내 패널 (2026-09-03) — 본문에서 뺀 설명이 사는 자리. + 양식은 B04~B07 좌측 패널과 **같은 공용 양식**이다: 루트 `__form`, 문단은 + `ui-collapsible ui-sidebar-section`(외곽선·접힘·캐럿은 공용 CSS 몫), 제목은 + `__group-legend` 크기. 여기서는 값만 맞추고 새로 만들지 않는다. --- */ +.b03-file__form { display: flex; flex-direction: column; - gap: var(--spacing-12); - padding: var(--spacing-12); + gap: var(--spacing-16); + padding: var(--spacing-16); } .b03-file__guide-group { display: flex; flex-direction: column; gap: var(--spacing-8); - padding: var(--spacing-12); + margin: 0; + padding: var(--spacing-16); + border-radius: var(--radius-cards); + background-color: var(--color-surface-raised); } -.b03-file__guide-title { +.b03-file__guide-legend { margin: 0; - font-size: var(--text-body-sm, 14px); - font-weight: var(--font-weight-medium, 500); - color: var(--color-text, #26114a); + padding: 0 var(--spacing-8); + font-size: var(--text-caption); + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); } .b03-file__guide-list {