feat(b05·b06): 종단 누가토량 알약 — 바탕 불투명 · 두 테마 글자 대비 4.5 넘음(붉은 계통 그대로) · 그래프 영역 안 끌어 옮김(마우스 · 손가락 pointer 한 길 · 끝 막힘 · 자리 = 영역 안 비율 · 화면 설정 한 칸 B05 · B06 공용) · 끈 뒤 click 삼킴 · 바닥 서브패널 위 (309)

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

common_util/common_util_mass_haul.css

@@ -382,29 +382,35 @@
   /* Y축 띠(고정 축) 오른쪽에 놓는다 — 8px 로 두면 축 라벨 위에 겹쳐 값이 잘린다
      (2026-09-06 실측). 축 폭이 다른 화면은 이 변수를 덮어쓴다. */
   left: var(--mass-haul-badge-left, 86px);
-  z-index: 4;
+  /* 바닥 서브패널(유토곡선 · 테이블 5) · 손잡이(6) 위 — 어디로 끌어도 보이고 다시 잡힘(309-2) */
+  z-index: 7;
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-4, 4px);
   /* 큰 알약(289) — 글자 · 여백 한 단 위 */
   padding: var(--spacing-4, 4px) var(--spacing-12, 12px);
-  /* 붉은 계통(289-2) — 테두리 · 글자 · 옅은 바탕 = 위험색 섞음(밝음 · 어두움 같이) */
+  /* 붉은 계통(289-2) — 테두리 · 글자 · 옅은 바탕 = 위험색 섞음(밝음 · 어두움 같이)
+     바탕은 불투명(309-1) — 그래프 선 · 채움이 비치지 않게 · 글자 대비 = 두 테마 모두 4.5 : 1 넘음 */
   border: 1px solid color-mix(in srgb, var(--color-danger) 55%, transparent);
   border-radius: var(--radius-pills, 999px);
-  background: color-mix(
-    in srgb,
-    var(--color-danger) 6%,
-    color-mix(in srgb, var(--color-surface-raised) 88%, transparent)
-  );
+  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface-raised));
   color: color-mix(in srgb, var(--color-danger) 70%, var(--color-text-body));
   font-size: var(--pill-font-size-lg);
   line-height: var(--leading-body-sm);
   white-space: nowrap;
   pointer-events: auto;
+  /* 그래프 안 끌어 옮기기(309-2) — 손가락 끌기가 화면 밀기 · 글 고름으로 새지 않게 */
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.mass-haul-badge.is-dragging {
+  cursor: grabbing;
 }
 
 .mass-haul-badge em {
-  color: color-mix(in srgb, var(--color-danger) 55%, var(--color-text-secondary));
+  color: color-mix(in srgb, var(--color-danger) 55%, var(--color-text-body));
   font-style: normal;
 }