feat(b09): 운반 단가 창 왼쪽 폭 줄임 · 단가산출근거 박스보기 머리 줄 = 입력값 · 중간값 칸 (278-1·2)

- 운반 단가 창 몸 두 칸 비율 — 왼쪽(옵션 값) 약 0.8 배
- 단가산출근거 [박스보기] 머리 줄 = 운반 창 ③ 칸과 같은 꼴(이름 · 값 오른쪽 굵게 · 식 작게) · 출처 = 칸 맨 위
- 줄 나눔 · 그리기 한 벌 — Haul_Steps headSteps 내보내 같이 씀 · 공용 묶음 카드 = 선택 몸 위 칸(top)
- 호표 줄 · 총계 · 표 보기 · 다른 탭 카드 그대로

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

ui_template/ui_template_group_cards.ts

@@ -8,6 +8,7 @@
  *   접기 없음 — 묶음 모두 펼친 박스 · 같은 가로 줄 카드 = 높이 같음(200-1 · 합계 줄은 아래 붙음)
  *   줄 번호(`at`) = 부르는 쪽 표 줄 번호 — 누름 = `onPick(at)` · 이동해 온 줄 = 그 박스 붉은 외곽선
  *   (`is-pick`) + 스크롤만(248-1 빨강 하나) · 누름 = 빨강 풂 · 누른 줄만 고름(`is-focus`)
+ *   몸 위 칸(`top` · 선택) = 부르는 쪽이 그린 것 그대로(278-2)
  * ========================================================================== */
 
 import "./ui_template_group_cards.css";
@@ -53,6 +54,8 @@ export interface GroupCard {
   sum?: number | null;
   lines: GroupLine[];
   foot?: GroupFoot | null;
+  /** 몸 위 칸(부르는 쪽이 그림 · 줄 `data-at` = 누름 · 고름 같음 · 예 278-2 산근 머리 줄) */
+  top?: HTMLElement | null;
 }
 
 export interface GroupCardsOptions {
@@ -166,6 +169,7 @@ function card(g: GroupCard, o: Required<Pick<GroupCardsOptions, "money" | "qty">
   );
   const body = document.createElement("div");
   body.className = "ui-group-card__body";
+  if (g.top) body.append(g.top);
   if (g.lines.length) body.append(linesTable(g, o));
   box.append(head, body);
   if (g.foot) box.append(footRow(g.foot, o.money));