diff --git a/B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts b/B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts index c43d7700..278c5860 100644 --- a/B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts +++ b/B05_Profile/B05_Profile_UI_Drainage_Facility_Fields.ts @@ -101,7 +101,9 @@ export function stepper(input: HTMLInputElement, stepM: number): HTMLElement { element.addEventListener("click", nudge(delta)); return element; }; - wrap.append(input, button("-", -stepM), button("+", stepM)); + // 배치는 [-][숫자][+] — 셋이 테두리 하나를 나눠 쓰는 한 덩어리로 보인다 + // (2026-08-29 사용자 지시). + wrap.append(button("-", -stepM), input, button("+", stepM)); return wrap; } diff --git a/B05_Profile/B05_Profile_UI_Style_Structures.css b/B05_Profile/B05_Profile_UI_Style_Structures.css index 850c4b4f..9caaece7 100644 --- a/B05_Profile/B05_Profile_UI_Style_Structures.css +++ b/B05_Profile/B05_Profile_UI_Style_Structures.css @@ -246,37 +246,65 @@ /* 숫자 칸 + [-][+] 묶음(2026-08-29 사용자 지시 2) — 유입구·유출구 폼에서도 조정창처럼 눈금으로 고친다. 여백 0이라 기존 2열 격자 폭·간격은 그대로다. */ +/* [-][숫자][+]가 테두리 하나를 나눠 쓰는 한 덩어리(2026-08-29 사용자 지시). + 바깥 여백은 0이라 2열 격자 폭·간격은 그대로다. */ .b05-structure__stepper { display: flex; min-width: 0; align-items: stretch; margin: 0; padding: 0; - gap: 2px; -} - -.b05-structure__stepper > input { - min-width: 0; - flex: 1 1 auto; -} - -.b05-structure__step { - flex: none; - /* 손가락·마우스로 집기 쉽게 넓힌다(2026-08-29 사용자 지시). 입력칸은 남는 폭을 - 차지하므로 이 값이 곧 버튼 폭이다. */ - width: 28px; - padding: 0; border: 1px solid var(--color-border, #3a3f4a); border-radius: var(--radius-inputs, 4px); background: var(--color-surface); + gap: 0; + overflow: hidden; +} + +.b05-structure__stepper:focus-within { + border-color: var(--color-royal-amethyst, rgb(109 40 217)); +} + +/* 가운데 숫자칸은 자기 테두리·배경을 버리고 덩어리 안에 녹는다. */ +.b05-structure__stepper > input { + min-width: 0; + flex: 1 1 auto; + border: 0; + border-radius: 0; + background: transparent; + text-align: center; +} + +.b05-structure__stepper > input:focus { + outline: none; +} + +/* 좌우 끝 버튼 — 덩어리 안에서는 가르는 선 하나씩만 갖는다. */ +.b05-structure__step { + flex: none; + /* 손가락·마우스로 집기 쉽게 넓힌다(2026-08-29 사용자 지시). 숫자칸이 남는 폭을 + 차지하므로 이 값이 곧 버튼 폭이다. */ + width: 28px; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; color: var(--color-text-body); font-size: 12px; line-height: 1; cursor: pointer; } +.b05-structure__step:first-child { + border-right: 1px solid var(--color-border, #3a3f4a); +} + +.b05-structure__step:last-child { + border-left: 1px solid var(--color-border, #3a3f4a); +} + .b05-structure__step:hover { - border-color: var(--color-royal-amethyst, rgb(109 40 217)); + background: color-mix(in srgb, var(--color-royal-amethyst, rgb(109 40 217)) 14%, transparent); } /* 구조물 배치 폼의 숫자 칸 — 브라우저 기본 증감 화살표(스피너)를 없앤다