style(B05): 숫자 조정칸을 [－][숫자][＋] 한 덩어리로 만든다

2026-08-29 사용자 지시 — 가운데 숫자, 좌 －·우 ＋가 테두리 하나를 나눠 쓰는
하나의 컨트롤로 보이게 한다.
- DOM 순서를 [－][input][＋]로 바꿈
- 테두리·배경·모서리는 묶음(.b05-structure__stepper)이 갖고, 안쪽 입력은 테두리
  없이 가운데 정렬. 버튼은 가르는 선 하나씩만 갖는다. 포커스는 묶음 테두리로 표시.

검증: 순서 BUTTON－/INPUT/BUTTON＋, 묶음 테두리 1px·radius 8px, 입력 테두리 0·
가운데 정렬, ＋ 10.0→11.0 · － 11.0→10.0 동작 확인.

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;
 }
 

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);
 }
 
 /* 구조물 배치 폼의 숫자 칸 — 브라우저 기본 증감 화살표(스피너)를 없앤다