fix(b05,b06): 종단도 누가토량 알약 한 단 크게 — 공용 토큰 · 측점 ▲ 줄 아래로 (289)

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

A00_Common/design/design_profile_overlays.ts

@@ -28,8 +28,8 @@ export function createProfileOverlays(deps: ProfileOverlaysDeps) {
   /** 유토곡선 총괄값 — **그래프 좌측 상단 배지**가 보인다(2026-09-06 사용자 지시).
    *  유토곡선을 접어도 이 값은 남아야 한다. */
   const massBadge = createMassHaulBadge();
-  // 그래프 위에 도구줄(상단줄)이 한 줄 있다 — 그 아래로 내려 겹치지 않게 한다.
-  massBadge.root.style.setProperty("--mass-haul-badge-top", "34px");
+  // 그래프 위 도구줄 · 측점 ▲ 줄(바닥 47px) 아래로 내려 겹치지 않게 한다(289).
+  massBadge.root.style.setProperty("--mass-haul-badge-top", "52px");
   bodyWrap.append(massBadge.root);
   let massHaulSummary: MassHaulSummaryValues | null = null;
   // 유토 배분은 **서버가 만든다**(2026-09-06) — 편집이 멈추면 뒤에서 받아 두고, 도착하면

common_util/common_util_mass_haul.css

@@ -386,13 +386,14 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-4, 4px);
-  padding: 2px var(--spacing-8, 8px);
+  /* 큰 알약(289) — 글자 · 여백 한 단 위 */
+  padding: var(--spacing-4, 4px) var(--spacing-12, 12px);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-pills, 999px);
   background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
   color: var(--color-text-body);
-  font-size: var(--text-caption);
-  line-height: 1.3;
+  font-size: var(--pill-font-size-lg);
+  line-height: var(--leading-body-sm);
   white-space: nowrap;
   pointer-events: auto;
 }

resources/tester/test_289_1_mass_badge_size.py

@@ -0,0 +1,39 @@
+"""289 종단도 누가토량 알약 크게 · 측점 ▲ 줄 아래로.
+
+- 테마 토큰 `--pill-font-size-lg` = 글자 한 단 위(14px · 공용 알약 12px)
+- 배지(B05 · B06 한 벌 `common_util_mass_haul.css`) = 토큰 글자 · 줄 간격 · 여백 4/12
+- 자리 = 위에서 52px(▲ 줄 바닥 47px 아래 · 잰 값) · 종단 오버레이 한 곳(`design_profile_overlays.ts`)
+"""
+
+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 test_token_one_step_up():
+    theme = _read("ui_template/ui_template_theme.css")
+    assert "--pill-font-size-lg: var(--text-body-sm);" in theme
+
+
+def test_badge_uses_large_pill():
+    badge = _block(_read("common_util/common_util_mass_haul.css"), ".mass-haul-badge")
+    assert "font-size: var(--pill-font-size-lg)" in badge
+    assert "line-height: var(--leading-body-sm)" in badge
+    assert "padding: var(--spacing-4, 4px) var(--spacing-12, 12px)" in badge
+
+
+def test_badge_below_up_buttons():
+    overlays = _read("A00_Common/design/design_profile_overlays.ts")
+    m = re.search(r'"--mass-haul-badge-top", "(\d+)px"', overlays)
+    assert m and int(m.group(1)) > 47  # 측점 ▲ 줄 바닥(top 30 + 17)

ui_template/ui_template_theme.css

@@ -170,6 +170,8 @@
   --btn-bar-font-size: var(--text-caption);
   /* 보조 탭 단추 높이 — B08 · B09 보조 탭 줄(.ui-subtabs) 한 꼴 */
   --subtab-height: 24px;
+  /* 큰 알약 글자 — 공용 알약(.ui-tag · 12px) 한 단 위 · 종단 누가토량 배지가 씀 */
+  --pill-font-size-lg: var(--text-body-sm);
 
   /* ---------------------------------------------------------------------------
    * 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity)