fix(b05,b06): 종단도 누가토량 알약 테두리 · 글자 · 바탕 붉은 계통 · 음수는 더 진하게 (289-2)

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

@@ -388,10 +388,15 @@
   gap: var(--spacing-4, 4px);
   /* 큰 알약(289) — 글자 · 여백 한 단 위 */
   padding: var(--spacing-4, 4px) var(--spacing-12, 12px);
-  border: 1px solid var(--color-border);
+  /* 붉은 계통(289-2) — 테두리 · 글자 · 옅은 바탕 = 위험색 섞음(밝음 · 어두움 같이) */
+  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-surface-raised) 88%, transparent);
-  color: var(--color-text-body);
+  background: color-mix(
+    in srgb,
+    var(--color-danger) 6%,
+    color-mix(in srgb, var(--color-surface-raised) 88%, transparent)
+  );
+  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;
@@ -399,7 +404,7 @@
 }
 
 .mass-haul-badge em {
-  color: var(--color-text-secondary);
+  color: color-mix(in srgb, var(--color-danger) 55%, var(--color-text-secondary));
   font-style: normal;
 }
 
@@ -407,6 +412,12 @@
   font-weight: var(--font-weight-bold, 700);
 }
 
+/* 음수 = 더 진하게 — 테두리 = 위험색 그대로 · 바탕 짙게 · 값 = 위험색 더 많이(대비 4.5 : 1 지킴) */
+.mass-haul-badge.is-over {
+  border-color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface-raised));
+}
+
 .mass-haul-badge.is-over strong {
-  color: var(--color-danger, #f43f5e);
+  color: color-mix(in srgb, var(--color-danger) 85%, var(--color-text-body));
 }