Merge remote-tracking branch 'origin/dev' into sub_laptop_7

common_util/common_util_mass_haul.css

@@ -386,19 +386,25 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-4, 4px);
-  padding: 2px var(--spacing-8, 8px);
-  border: 1px solid var(--color-border);
+  /* 큰 알약(289) — 글자 · 여백 한 단 위 */
+  padding: var(--spacing-4, 4px) var(--spacing-12, 12px);
+  /* 붉은 계통(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);
-  font-size: var(--text-caption);
-  line-height: 1.3;
+  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;
   pointer-events: auto;
 }
 
 .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;
 }
 
@@ -406,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));
 }