style(B05): 종단 그래프 머리 [초기화]~▼ 단추 크기 = [배수유역도] · [새 창] 크기 · 공용 줄 단추 토큰(187-1)

- 왼쪽 단추 높이 17 · 글자 9 · 좌우 여백 3 → 높이 16 · 글자 12 · 좌우 여백 8
- theme 토큰 --btn-bar-padding · --btn-bar-font-size 하나로 세 곳이 씀
- test_187_1 신규

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015sDZSjFvoiDjdGpgj3muc3

A00_Common/design/design_page.css

@@ -51,8 +51,8 @@
 }
 
 .b05-route-profile__trailing > .b05-route-profile__popout {
-  padding: 1px var(--spacing-8);
-  font-size: var(--text-caption);
+  padding: var(--btn-bar-padding);
+  font-size: var(--btn-bar-font-size);
 }
 
 /* 횡단 조정(카드 조정창 사본 · 폼 칸에 옮겨 붙은 행)은 횡단 보기 몫 — 종단 보기에서는 한 벌 폼

B05_Profile/B05_Profile_UI_Profile_Tools.ts

@@ -3,8 +3,8 @@
  * 종단 계획선 도구줄 — [초기화] · [↶][↷] · [직선화] · [쉬프트] · [▲][▼].
  * ([초기화]는 2026-09-03 추가 — 마지막 [저장] 시점 기준이며 전체 초기화가 아니다.)
  *
- * 자리는 절·성토 요약줄의 **맨 앞**(최대 기울기 칩 왼쪽)이고, 버튼 크기는 그래프 위
- * 틸팅 버튼과 같다(`b05-profile-edit__btn` 계열 크기를 CSS에서 공유).
+ * 자리는 절·성토 요약줄의 **맨 앞**(최대 기울기 칩 왼쪽)이고, 버튼 크기는 같은 줄 오른쪽
+ * [배수유역도] · [새 창] 과 같다(공용 토큰 `--btn-bar-*`).
  *
  * 선택 흐름:
  *   [직선화] → 측점 2개를 그래프에서 고름 → 두 측점의 라운드에 탄젠트한 직선으로 대체.

B05_Profile/B05_Profile_UI_Style.css

@@ -566,8 +566,8 @@
   text-overflow: ellipsis;
 }
 
-/* 도구줄 — 요약줄 맨 앞(최대 기울기 칩 왼쪽). 버튼 크기는 그래프 위 틸팅 버튼과 같다
-   (21×17px, 2026-09-02 사용자 지시). */
+/* 도구줄 — 요약줄 맨 앞(최대 기울기 칩 왼쪽). 단추 크기는 같은 줄 오른쪽 [배수유역도] · [새 창]
+   과 같은 공용 토큰(`--btn-bar-*`). */
 .b05-route-profile__tools {
   display: inline-flex;
   flex: 0 0 auto;
@@ -577,14 +577,13 @@
 }
 
 .b05-route-profile__tool {
-  height: 17px;
-  min-width: 21px;
-  padding: 0 3px;
+  padding: var(--btn-bar-padding);
   border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
   border-radius: 3px;
   background: color-mix(in srgb, var(--color-surface-raised) 80%, transparent);
   color: var(--color-text);
-  font-size: 9px;
+  font-family: var(--font-body);
+  font-size: var(--btn-bar-font-size);
   line-height: 1;
   cursor: pointer;
 }

B05_Profile/B05_Profile_UI_Style_Table.css

@@ -457,8 +457,8 @@
 }
 
 .b05-route-profile__trailing > .b05-drainage__toggle {
-  padding: 1px var(--spacing-8);
-  font-size: var(--text-caption);
+  padding: var(--btn-bar-padding);
+  font-size: var(--btn-bar-font-size);
 }
 
 .b05-profile__zoom-btn {

resources/tester/test_187_1_b05_head_button_size.py

@@ -0,0 +1,93 @@
+"""187-1 B05 종단 그래프 머리 줄 — [초기화]~▼ 단추 크기 = 오른쪽 [배수유역도] · [새 창] 크기.
+
+- 기준값 = 오른쪽 두 단추의 계산 크기(`.ui-btn` 바탕 + 줄 단추 토큰) — 높이 16 · 글자 12 · 좌우 여백 8
+- 왼쪽 단추(`b05-route-profile__tool`) = 같은 토큰 · 고정 높이 · 최소 너비 없음
+"""
+
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+
+
+def _read(rel: str) -> str:
+    return (ROOT / rel).read_text(encoding="utf-8")
+
+
+def _block(css: str, selector: str) -> str:
+    m = re.search(re.escape(selector) + r"\s*\{([^}]*)\}", css)
+    assert m, selector
+    return m.group(1)
+
+
+def _decl(block: str, prop: str) -> str:
+    m = re.search(r"(?:^|;|\s)" + re.escape(prop) + r"\s*:\s*([^;]+);", block)
+    assert m, prop
+    return m.group(1).strip()
+
+
+THEME = _read("ui_template/ui_template_theme.css")
+BASE = _read("ui_template/ui_template_elements_styles.ts")
+LEFT = _block(_read("B05_Profile/B05_Profile_UI_Style.css"), ".b05-route-profile__tool")
+TOGGLE = _block(
+    _read("B05_Profile/B05_Profile_UI_Style_Table.css"),
+    ".b05-route-profile__trailing > .b05-drainage__toggle",
+)
+POPOUT = _block(
+    _read("A00_Common/design/design_page.css"),
+    ".b05-route-profile__trailing > .b05-route-profile__popout",
+)
+
+
+def _px(value: str) -> int:
+    return int(re.fullmatch(r"(\d+)px", value).group(1))
+
+
+def _token(name: str) -> str:
+    return _decl(THEME, name)
+
+
+def _size(block: str) -> dict:
+    """계산 크기 — padding · font-size 를 토큰으로 풀고 line-height 1 · 테두리 1px 로 높이를 셈."""
+    pad = _decl(block, "padding")
+    font = _decl(block, "font-size")
+    if pad == "var(--btn-bar-padding)":
+        pad = _token("--btn-bar-padding")
+    if font == "var(--btn-bar-font-size)":
+        font = _token("--btn-bar-font-size")
+    v = re.fullmatch(r"(\d+)px var\(--spacing-8\)", pad).group(1)
+    spacing8 = _px(_token("--spacing-8"))
+    caption = _px(_token("--text-caption")) if font == "var(--text-caption)" else _px(font)
+    return {"padV": int(v), "padH": spacing8, "font": caption, "height": caption + 2 * int(v) + 2}
+
+
+def test_기준값_오른쪽_단추_16_12_8():
+    for block in (TOGGLE, POPOUT):
+        assert _size(block) == {"padV": 1, "padH": 8, "font": 12, "height": 16}
+    # 높이 계산의 바탕 = .ui-btn 줄 높이 1 · 테두리 1px
+    assert re.search(r"\.ui-btn \{[^}]*line-height: 1;[^}]*border: 1px solid", BASE)
+
+
+def test_왼쪽_단추_높이_글자_여백이_오른쪽_기준값과_같음():
+    assert _size(LEFT) == _size(TOGGLE) == _size(POPOUT)
+    assert _decl(LEFT, "line-height") == "1"
+    assert re.search(r"border:\s*1px solid", LEFT)
+
+
+def test_왼쪽_단추에_옛_고정_크기_없음():
+    assert "height:" not in LEFT.replace("line-height", "")
+    assert "min-width" not in LEFT
+    assert "9px" not in LEFT
+
+
+def test_세_단추_모두_같은_토큰():
+    for block in (LEFT, TOGGLE, POPOUT):
+        assert _decl(block, "padding") == "var(--btn-bar-padding)"
+        assert _decl(block, "font-size") == "var(--btn-bar-font-size)"
+    assert _decl(LEFT, "font-family") == "var(--font-body)"  # .ui-btn 바탕과 같은 글꼴
+
+
+def test_토큰은_theme_한_곳():
+    assert _token("--btn-bar-padding") == "1px var(--spacing-8)"
+    assert _token("--btn-bar-font-size") == "var(--text-caption)"
+    assert _px(_token("--spacing-8")) == 8 and _px(_token("--text-caption")) == 12

ui_template/ui_template_theme.css

@@ -162,6 +162,10 @@
   --control-height: 42px;
   --control-height-sm: 30px;
 
+  /* 줄 위 작은 단추 한 규격 — 종단 머리 줄 [초기화]~▼ · [배수유역도] · [새 창] 이 함께 씀(높이 = 글자 12 + 여백 2 + 테두리 2) */
+  --btn-bar-padding: 1px var(--spacing-8);
+  --btn-bar-font-size: var(--text-caption);
+
   /* ---------------------------------------------------------------------------
    * 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity)
    * ------------------------------------------------------------------------ */