From b3e9085cb5b17b4870ed9012c5013e83dabb49fc Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Sat, 29 Aug 2026 15:36:58 +0900
Subject: [PATCH] =?UTF-8?q?style(B05):=20=EC=88=AB=EC=9E=90=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95=EC=B9=B8=EC=9D=84=20[=EF=BC=8D][=EC=88=AB=EC=9E=90][?=
 =?UTF-8?q?=EF=BC=8B]=20=ED=95=9C=20=EB=8D=A9=EC=96=B4=EB=A6=AC=EB=A1=9C?=
 =?UTF-8?q?=20=EB=A7=8C=EB=93=A0=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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_UI_Drainage_Facility_Fields.ts |  4 +-
 .../B05_Profile_UI_Style_Structures.css       | 58 ++++++++++++++-----
 2 files changed, 46 insertions(+), 16 deletions(-)

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