feat(b09): 운반 단가 창 오른쪽 계산 칸 나눔 · 운반거리 칸 자동계산 단추 (277-1~4)

- 오른쪽 글 상자 → 칸 차례(거리 · 사이클 8-2-8 · 단가산출) · 칸마다 제목 · 몸 · 바닥 결과
- 사이클 칸 = Cm · 사이클시간 · t2 받는 로직만 · 조합 = 담은 로직 줄마다 미리보기 · 하위 산근 이어 붙임
- logic-preview 응답에 blocks(머리 · 호표 줄 · 계 · 출처) 더함 · 셈 · lines 그대로
- 값 칸 숫자 칸 = ui-input--sm(고르기 칸과 같은 높이) · 「거리에서」 → 「자동계산」 단추

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

B09_Estimation/B09_Estimation_UI_Haul_Steps.css

@@ -0,0 +1,81 @@
+/* 「운반 단가」 창 오른쪽 계산 칸(PLAN 277) — 칸마다 제목 줄 · 몸 · 바닥 결과(굵게) · 테마 변수만 */
+.b09-haulsteps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+}
+.b09-haulstep {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background-color: var(--color-surface-raised);
+  color: var(--color-text-body);
+  font-size: var(--text-body-sm);
+}
+.b09-haulstep.is-stale {
+  opacity: 0.5;
+}
+.b09-haulstep__head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4) var(--spacing-8);
+  align-items: baseline;
+  padding: var(--spacing-8) var(--spacing-12);
+  border-bottom: 1px solid var(--color-border);
+}
+.b09-haulstep__title {
+  color: var(--color-text);
+  font-weight: 600;
+}
+.b09-haulstep__sub,
+.b09-haulstep__formula,
+.b09-haulstep__group {
+  color: var(--color-text-secondary);
+  font-size: var(--text-caption);
+}
+.b09-haulstep__sub {
+  margin-left: auto;
+}
+.b09-haulstep__body {
+  padding: var(--spacing-4) var(--spacing-12);
+}
+.b09-haulstep__group {
+  margin: var(--spacing-8) 0 var(--spacing-4);
+}
+.b09-haulstep__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0 var(--spacing-12);
+  padding: 2px 0;
+}
+.b09-haulstep__value {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text);
+}
+.b09-haulstep__formula {
+  grid-column: 1 / -1;
+  white-space: pre-line;
+  word-break: break-all;
+}
+.b09-haulstep__foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4) var(--spacing-12);
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--spacing-8) var(--spacing-12);
+  border-top: 1px solid var(--color-border);
+  font-weight: 700;
+  color: var(--color-text);
+}
+.b09-haulstep__foot .b09-haulstep__value {
+  margin-left: auto;
+}
+.b09-haulstep__foot .b09-haulstep__formula {
+  flex-basis: 100%;
+  text-align: right;
+  font-weight: 400;
+}
+.b09-haulstep__bad {
+  color: var(--color-danger);
+}