diff --git a/A00_Common/design/design_structure_form.ts b/A00_Common/design/design_structure_form.ts index bcaa84741..58e1507e0 100644 --- a/A00_Common/design/design_structure_form.ts +++ b/A00_Common/design/design_structure_form.ts @@ -136,6 +136,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = { ): HTMLElement => { if (item.kind === "select") { const select = document.createElement("select"); + select.className = "ui-select"; const choices = choicesOf(item, values); const now = values[item.id] ?? ""; const drawn = choices.find((ch) => ch.value === now); @@ -154,6 +155,7 @@ export function createSpecForm(links: SpecLinks | null, hooks: SpecFormHooks = { } if (item.kind === "text") { const input = document.createElement("input"); + input.className = "ui-input"; input.type = "text"; input.maxLength = TEXT_MAX; input.value = values[item.id] ?? ""; diff --git a/B05_Profile/B05_Profile_UI_Drainage_Facility.ts b/B05_Profile/B05_Profile_UI_Drainage_Facility.ts index 14e7ebcea..733118175 100644 --- a/B05_Profile/B05_Profile_UI_Drainage_Facility.ts +++ b/B05_Profile/B05_Profile_UI_Drainage_Facility.ts @@ -402,6 +402,7 @@ export function createFacilityOptionsForm( // 바꿔 단다(`setRevetSideLabels`) — 값은 언제나 그 채널 키로 오간다. // 설치 측 = 필수 칸 — 빈 보기 없음(54-43 · 빈 옛 값 = 양쪽) const revetSide = document.createElement("select"); + revetSide.className = "ui-select"; revetSide.replaceChildren(...["양쪽", "좌", "우"].map((v) => new Option(v, v))); const revetTopRow = grid(labeled("설치 측", revetSide, "side")); const revetInlet = createRevetSideGroup(INLET_REVET_KEYS); diff --git a/B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts b/B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts index d614f25f1..5ead44669 100644 --- a/B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts +++ b/B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts @@ -81,6 +81,7 @@ export function labeled( export function numberInput(step: string, min = "0", placeholder = ""): HTMLInputElement { const input = document.createElement("input"); + input.className = "ui-input"; input.type = "number"; input.step = step; input.min = min; @@ -147,6 +148,7 @@ export function putNumber(target: Record, key: string, * 확정으로 굳지 않게. 기본값이 있는 칸은 부르는 쪽이 값을 넣음(그것은 따로 차례). */ export function optionalSelect(choices: ReadonlyArray): HTMLSelectElement { const element = document.createElement("select"); + element.className = "ui-select"; element.replaceChildren( new Option("", ""), ...choices.map((choice) => new Option(choice, choice)), @@ -220,6 +222,7 @@ export interface RevetSideGroup { export function createRevetSideGroup(keys: RevetmentKeys): RevetSideGroup { const box = group("기슭막이"); const kind = document.createElement("select"); + kind.className = "ui-select"; kind.replaceChildren(new Option("기슭막이", "기슭막이")); // 높이는 기본값 없음 — 설계자 입력(계획홍수위 + 여유고 · 2026-09-14 브레인 판정). const fields = createRevetmentFields(keys); @@ -258,6 +261,7 @@ export interface RevetmentFields { export function createRevetmentFields(keys: RevetmentKeys): RevetmentFields { // 형태 = 필수 칸 — 빈 보기 없음(54-43 · 값은 부르는 쪽이 정의 기본값으로 채움) const form = document.createElement("select"); + form.className = "ui-select"; form.replaceChildren(...REVET_FORMS.map((value) => new Option(value, value))); const length = keys.length ? numberInput("0.1", "0") : null; // 빈 칸 = 그냥 빈 칸(54-43 · 자리표시 글 없음) diff --git a/B05_Profile/B05_Profile_UI_IrregularStations.ts b/B05_Profile/B05_Profile_UI_IrregularStations.ts index c5678d42e..11c57897d 100644 --- a/B05_Profile/B05_Profile_UI_IrregularStations.ts +++ b/B05_Profile/B05_Profile_UI_IrregularStations.ts @@ -140,6 +140,7 @@ function field(labelText: string, input: HTMLElement): HTMLLabelElement { function numberInput(step: string, min: string): HTMLInputElement { const input = document.createElement("input"); + input.className = "ui-input"; input.type = "number"; input.step = step; input.min = min; @@ -148,6 +149,7 @@ function numberInput(step: string, min: string): HTMLInputElement { function selectInput(options: ReadonlyArray): HTMLSelectElement { const select = document.createElement("select"); + select.className = "ui-select"; select.replaceChildren(...options.map((value) => new Option(value, value))); return select; } @@ -175,8 +177,10 @@ export function createIrregularStationsSection( const typeSelect = selectInput(["", ...STRUCTURE_TYPES]); const pipeTypeSelect = selectInput(PIPE_TYPES); const diameterSelect = document.createElement("select"); + diameterSelect.className = "ui-select"; const widthSelect = selectInput(ESCAPE_ROUTE_WIDTHS_M.map((width) => width.toFixed(1))); const nameField = document.createElement("input"); + nameField.className = "ui-input"; nameField.type = "text"; nameField.placeholder = STRUCTURE_ETC_DEFAULT_NAME; diff --git a/B05_Profile/B05_Profile_UI_Panel_Fields.ts b/B05_Profile/B05_Profile_UI_Panel_Fields.ts index 7c886b8b3..8798a38fa 100644 --- a/B05_Profile/B05_Profile_UI_Panel_Fields.ts +++ b/B05_Profile/B05_Profile_UI_Panel_Fields.ts @@ -66,6 +66,7 @@ export function numberField(label: string, value = ""): WrappedInput { const caption = document.createElement("span"); caption.textContent = label; const input = document.createElement("input"); + input.className = "ui-input"; input.type = "number"; input.step = "0.01"; input.value = value; diff --git a/B05_Profile/B05_Profile_UI_RouteEdit_Label.ts b/B05_Profile/B05_Profile_UI_RouteEdit_Label.ts index 378add39f..322734aef 100644 --- a/B05_Profile/B05_Profile_UI_RouteEdit_Label.ts +++ b/B05_Profile/B05_Profile_UI_RouteEdit_Label.ts @@ -181,6 +181,7 @@ export function createCurveLabel( const radiusField = numberField("반지름"); radiusField.wrapper.className = "b05-routeedit__curve-field"; radiusField.classList.add("b05-routeedit__curve-radius"); + radiusField.setAttribute("data-size", "24"); // 부품 입력 단 24(553-2) radiusField.min = "1"; radiusField.step = "0.5"; const radius = radiusField as HTMLInputElement; @@ -195,6 +196,7 @@ export function createCurveLabel( const arcField = numberField("곡선 길이"); arcField.wrapper.className = "b05-routeedit__curve-field"; arcField.classList.add("b05-routeedit__curve-arc"); + arcField.setAttribute("data-size", "24"); arcField.min = "1"; arcField.step = "0.5"; const arc = arcField as HTMLInputElement; diff --git a/B05_Profile/B05_Profile_UI_Structures_Fields.ts b/B05_Profile/B05_Profile_UI_Structures_Fields.ts index 4879405f3..c8326c629 100644 --- a/B05_Profile/B05_Profile_UI_Structures_Fields.ts +++ b/B05_Profile/B05_Profile_UI_Structures_Fields.ts @@ -24,6 +24,7 @@ export function field(labelText: string, input: HTMLElement): HTMLLabelElement { export function numberInput(step = "0.1", min = "0"): HTMLInputElement { const input = document.createElement("input"); + input.className = "ui-input"; input.type = "number"; input.step = step; input.min = min; @@ -32,6 +33,7 @@ export function numberInput(step = "0.1", min = "0"): HTMLInputElement { export function select(options: ReadonlyArray<[string, string]>): HTMLSelectElement { const element = document.createElement("select"); + element.className = "ui-select"; element.replaceChildren(...options.map(([value, label]) => new Option(label, value))); return element; } @@ -84,7 +86,10 @@ export function optionControl( } const element = option.input === "number" ? numberInput("0.1", "0") : document.createElement("input"); - if (option.input !== "number") element.type = "text"; + if (option.input !== "number") { + element.type = "text"; + element.className = "ui-input"; + } element.value = value; if (tip) element.title = tip; const limit = option.warn_above; diff --git a/B05_Profile/B05_Profile_UI_Structures_Form.ts b/B05_Profile/B05_Profile_UI_Structures_Form.ts index 7c23f88de..986ce9c63 100644 --- a/B05_Profile/B05_Profile_UI_Structures_Form.ts +++ b/B05_Profile/B05_Profile_UI_Structures_Form.ts @@ -92,6 +92,7 @@ export function buildStructuresForm(options: { const anchorFields = stationFields("기준 측점", options.getInterval); const endFields = stationFields("종료 측점", options.getInterval); const memoField = document.createElement("input"); + memoField.className = "ui-input"; memoField.type = "text"; memoField.placeholder = "메모(선택)"; diff --git a/B05_Profile/B05_Profile_UI_Structures_Panel_Options.ts b/B05_Profile/B05_Profile_UI_Structures_Panel_Options.ts index 7ffd8e5dc..558015e75 100644 --- a/B05_Profile/B05_Profile_UI_Structures_Panel_Options.ts +++ b/B05_Profile/B05_Profile_UI_Structures_Panel_Options.ts @@ -168,6 +168,7 @@ export function renderOptionFields( for (const option of type.options) { if (!SPLIT_ROLE[option.key] || option.visible !== false) continue; const input = document.createElement("input"); + input.className = "ui-input"; input.value = values[option.key] === undefined ? "" : String(values[option.key]); all.push({ wrap: document.createElement("div"), @@ -299,6 +300,7 @@ export function paintStale( body.className = "b05-structure__grid"; for (const [key, value] of stale) { const input = document.createElement("input"); + input.className = "ui-input"; input.type = "text"; input.readOnly = true; input.value = String(value); diff --git a/B05_Profile/B05_Profile_UI_Structures_Summary_Row.ts b/B05_Profile/B05_Profile_UI_Structures_Summary_Row.ts index 5d73409d2..a15ff0a2a 100644 --- a/B05_Profile/B05_Profile_UI_Structures_Summary_Row.ts +++ b/B05_Profile/B05_Profile_UI_Structures_Summary_Row.ts @@ -36,7 +36,7 @@ export function buildSummaryRow(): SummaryRow { const name = document.createElement("input"); name.type = "text"; name.readOnly = true; - name.className = "b05-structure__summary-name"; + name.className = "ui-input b05-structure__summary-name"; name.dataset.b05Summary = "pick"; const clear = document.createElement("button"); clear.type = "button"; diff --git a/B05_Profile/B05_Profile_UI_Style.css b/B05_Profile/B05_Profile_UI_Style.css index b60d85b8b..90572c671 100644 --- a/B05_Profile/B05_Profile_UI_Style.css +++ b/B05_Profile/B05_Profile_UI_Style.css @@ -329,16 +329,12 @@ html.is-bm-route .b05-route__view-controls { font-size: var(--text-caption); } +/* 칸 = 부품 입력 · 고르기(553-2 · 꼴 · 색은 부품 · 높이는 좌측 패널 양식) — 폭만 */ .b05-route__field input, .b05-route__field select, .b05-route__panel-section > select { width: 100%; min-width: 0; - padding: var(--spacing-8); - border: 1px solid var(--color-border); - border-radius: var(--radius-inputs); - background: var(--color-surface); - color: var(--color-text-body); } /* ─── 비정규 측점(구조물) 섹션 ─────────────────────────────────────────── */ diff --git a/B05_Profile/B05_Profile_UI_Style_RouteEdit.css b/B05_Profile/B05_Profile_UI_Style_RouteEdit.css index a7da0314e..d8fd0a8c2 100644 --- a/B05_Profile/B05_Profile_UI_Style_RouteEdit.css +++ b/B05_Profile/B05_Profile_UI_Style_RouteEdit.css @@ -479,15 +479,10 @@ white-space: nowrap; } -.b05-routeedit__curve-radius, -.b05-routeedit__curve-arc { +/* 반지름 · 곡선 길이 칸 = 부품 입력 단 24(553-2) — 폭 · 오른쪽 맞춤만 */ +.b05-routeedit__curve-radius.ui-input, +.b05-routeedit__curve-arc.ui-input { width: 5rem; - padding: 2px 6px; - border: 1px solid var(--color-border); - border-radius: var(--radius-4, 4px); - background: var(--color-surface); - color: var(--color-text-body); - font: inherit; text-align: right; } diff --git a/B05_Profile/B05_Profile_UI_Style_Structures.css b/B05_Profile/B05_Profile_UI_Style_Structures.css index 46e035862..2f7a30828 100644 --- a/B05_Profile/B05_Profile_UI_Style_Structures.css +++ b/B05_Profile/B05_Profile_UI_Style_Structures.css @@ -361,6 +361,15 @@ height: var(--b05-control-h); padding: 0 6px; font-size: var(--text-caption); + line-height: normal; +} + +/* 부품 고르기 화살표 자리 — 좌측 패널 양식(.ui-panel-form select.ui-select)과 같은 값 */ +.b05-structure-section select.ui-select, +.b05-drainage__facility select.ui-select { + padding-right: 24px; + background-position: right 6px center; + background-size: 12px; } /* 스텝 묶음과 그 안의 버튼·숫자칸도 같은 높이로 선다. */