diff --git a/B06_Section/B06_Section_UI_Cross_Structure_Panel.ts b/B06_Section/B06_Section_UI_Cross_Structure_Panel.ts index cb9b2d4b..b58527ad 100644 --- a/B06_Section/B06_Section_UI_Cross_Structure_Panel.ts +++ b/B06_Section/B06_Section_UI_Cross_Structure_Panel.ts @@ -219,29 +219,21 @@ export function buildStructurePanel(deps: StructurePanelDeps): StructurePanelHan }); structureParts.controls.append(select); - // 다단 기슭막이 단 수(2026-08-22 사용자) — 숫자 입력 + +/- 병행(스피너는 CSS 제거). + // 다단 기슭막이 단 수(2026-08-22 사용자) — 높이 행과 같은 형식(- 값 +), + // 직접 입력 없음. 현재 단 수는 show()가 채운다. const extraParts = makeRow(L("B06_Cross_Extra_Count")); const extraRow = extraParts.row; - const countInput = document.createElement("input"); - countInput.type = "number"; - countInput.min = "0"; - countInput.max = "9"; - countInput.step = "1"; - countInput.className = "b06-structure-panel__count"; - const clampCount = (value: number): number => - Math.max(0, Math.min(9, Math.round(Number.isFinite(value) ? value : 0))); - countInput.addEventListener("change", () => { - const requested = clampCount(Number(countInput.value)); - countInput.value = String(requested); - deps.setExtraCount(requested); - }); + const countValue = document.createElement("span"); + countValue.className = "b06-structure-panel__hval"; + let currentCount = 0; + const clampCount = (value: number): number => Math.max(0, Math.min(9, Math.round(value))); const countMinus = makeButton("-", L("B06_Cross_Extra_Remove"), () => - deps.setExtraCount(clampCount(Number(countInput.value) - 1)), + deps.setExtraCount(clampCount(currentCount - 1)), ); const countPlus = makeButton("+", L("B06_Cross_Extra_Add"), () => - deps.setExtraCount(clampCount(Number(countInput.value) + 1)), + deps.setExtraCount(clampCount(currentCount + 1)), ); - extraParts.controls.append(countMinus, countInput, countPlus); + extraParts.controls.append(countMinus, countValue, countPlus); const closeButton = makeButton("✕", L("B06_Cross_Revet_Close"), () => deps.close()); closeButton.classList.add("b06-structure-panel__close"); @@ -293,7 +285,8 @@ export function buildStructurePanel(deps: StructurePanelDeps): StructurePanelHan // 나타났다 사라지면 레이아웃이 널뛴다). const extra = deps.extraState(); extraRow.classList.toggle("is-hidden", key !== "outlet"); - countInput.value = String(extra.count); + currentCount = extra.count; + countValue.textContent = `${extra.count}단`; const adjust = deps.adjustFor(key); // 조작 요약 — 0이면 "자동". 좌우는 안/바깥, 상하는 위/아래로 적는다. const parts: string[] = []; diff --git a/B06_Section/B06_Section_UI_Style_Cross.css b/B06_Section/B06_Section_UI_Style_Cross.css index 253ee9f8..04e3e732 100644 --- a/B06_Section/B06_Section_UI_Style_Cross.css +++ b/B06_Section/B06_Section_UI_Style_Cross.css @@ -637,28 +637,20 @@ display: none; } -/* 숫자 입력의 브라우저 스피너 제거(2026-08-22 사용자 — +/- 버튼으로 조작). */ -.b06-structure-panel__count::-webkit-inner-spin-button, -.b06-structure-panel__count::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; -} - -.b06-structure-panel__count { - -moz-appearance: textfield; - appearance: textfield; +/* 값 조작 버튼은 정사각 고정 폭 — 높이·단 수·십자 이동의 행열이 맞는다 + (2026-08-22 사용자 — 버튼 행열 정렬). */ +.b06-structure-panel__controls .b06-structure-panel__btn { + box-sizing: border-box; + width: 26px; + height: 22px; + padding: 0; text-align: center; - width: 2.5em; - padding: 0 4px; - 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); + line-height: 1; } .b06-structure-panel__hval { - min-width: 3em; + box-sizing: border-box; + width: 3.5em; text-align: center; color: var(--color-text-body); font-size: var(--text-caption);