From 42673f57a0967389f7a07cadc72cf84dbb238438 Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Tue, 10 Mar 2026 11:27:48 +0900
Subject: [PATCH] [agent-pipeline] pipe-20260310020928-52l9 round-3

---
 frontend/app/globals.css          | 92 +++++++++++++++++++++++++++++++
 frontend/components/ui/button.tsx |  4 ++
 2 files changed, 96 insertions(+)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index d4bff573..db7530b5 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -442,3 +442,95 @@ select {
 }
 
 /* ===== End of Global Styles ===== */
+
+/* ===== Dark Mode Compatibility Layer ===== */
+/* 하드코딩된 Tailwind 색상 → 다크 모드 자동 변환 */
+/* 개별 컴포넌트 수정 없이, 이 한 곳에서 전체 프로젝트 커버 */
+
+/* --- 1. 배경색: white/gray → 시맨틱 토큰 --- */
+.dark .bg-white { background-color: hsl(var(--card)) !important; }
+.dark .bg-gray-50 { background-color: hsl(var(--muted)) !important; }
+.dark .bg-gray-100 { background-color: hsl(var(--muted)) !important; }
+.dark .bg-gray-200 { background-color: hsl(var(--accent)) !important; }
+
+/* --- 2. 텍스트: gray → 시맨틱 토큰 --- */
+.dark .text-gray-400 { color: hsl(var(--muted-foreground)) !important; }
+.dark .text-gray-500 { color: hsl(var(--muted-foreground)) !important; }
+.dark .text-gray-600 { color: hsl(var(--foreground) / 0.7) !important; }
+.dark .text-gray-700 { color: hsl(var(--foreground) / 0.8) !important; }
+.dark .text-gray-800 { color: hsl(var(--foreground) / 0.9) !important; }
+.dark .text-gray-900 { color: hsl(var(--foreground)) !important; }
+
+/* --- 3. 보더: gray → 시맨틱 토큰 --- */
+.dark .border-gray-100 { border-color: hsl(var(--border)) !important; }
+.dark .border-gray-200 { border-color: hsl(var(--border)) !important; }
+.dark .border-gray-300 { border-color: hsl(var(--border)) !important; }
+.dark .divide-gray-200 > * + * { border-color: hsl(var(--border)) !important; }
+
+/* --- 4. 호버: gray → 시맨틱 토큰 --- */
+.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--muted)) !important; }
+.dark .hover\:bg-gray-100:hover { background-color: hsl(var(--accent)) !important; }
+.dark .hover\:bg-gray-200:hover { background-color: hsl(var(--accent)) !important; }
+
+/* --- 5. Emerald (성공/완료 상태) --- */
+.dark .bg-emerald-50 { background-color: hsl(142 40% 12%) !important; }
+.dark .bg-emerald-100 { background-color: hsl(142 40% 15%) !important; }
+.dark .text-emerald-600 { color: hsl(142 70% 55%) !important; }
+.dark .text-emerald-700 { color: hsl(142 70% 50%) !important; }
+.dark .text-emerald-800 { color: hsl(142 70% 60%) !important; }
+.dark .text-emerald-900 { color: hsl(142 70% 65%) !important; }
+.dark .border-emerald-200 { border-color: hsl(142 40% 25%) !important; }
+.dark .border-emerald-300 { border-color: hsl(142 40% 30%) !important; }
+.dark .ring-emerald-200 { --tw-ring-color: hsl(142 40% 25%) !important; }
+
+/* --- 6. Amber/Yellow (경고/주의 상태) --- */
+.dark .bg-amber-50 { background-color: hsl(38 40% 12%) !important; }
+.dark .bg-amber-100 { background-color: hsl(38 40% 15%) !important; }
+.dark .bg-yellow-50 { background-color: hsl(48 40% 12%) !important; }
+.dark .bg-yellow-100 { background-color: hsl(48 40% 15%) !important; }
+.dark .text-amber-600 { color: hsl(38 90% 58%) !important; }
+.dark .text-amber-700 { color: hsl(38 90% 55%) !important; }
+.dark .text-amber-800 { color: hsl(38 90% 60%) !important; }
+.dark .text-amber-900 { color: hsl(38 90% 65%) !important; }
+.dark .text-yellow-600 { color: hsl(48 90% 55%) !important; }
+.dark .text-yellow-700 { color: hsl(48 90% 50%) !important; }
+.dark .text-yellow-800 { color: hsl(48 90% 60%) !important; }
+.dark .border-amber-200 { border-color: hsl(38 40% 25%) !important; }
+.dark .border-amber-300 { border-color: hsl(38 40% 30%) !important; }
+.dark .border-yellow-200 { border-color: hsl(48 40% 25%) !important; }
+.dark .ring-amber-200 { --tw-ring-color: hsl(38 40% 25%) !important; }
+
+/* --- 7. Blue (정보/프라이머리 상태) --- */
+.dark .bg-blue-50 { background-color: hsl(217 40% 12%) !important; }
+.dark .bg-blue-100 { background-color: hsl(217 40% 15%) !important; }
+.dark .text-blue-600 { color: hsl(217 90% 65%) !important; }
+.dark .text-blue-700 { color: hsl(217 90% 60%) !important; }
+.dark .text-blue-800 { color: hsl(217 90% 65%) !important; }
+.dark .border-blue-200 { border-color: hsl(217 40% 25%) !important; }
+.dark .ring-blue-200 { --tw-ring-color: hsl(217 40% 25%) !important; }
+
+/* --- 8. Red (에러/삭제 상태) --- */
+.dark .bg-red-50 { background-color: hsl(0 40% 12%) !important; }
+.dark .bg-red-100 { background-color: hsl(0 40% 15%) !important; }
+.dark .text-red-600 { color: hsl(0 75% 60%) !important; }
+.dark .text-red-700 { color: hsl(0 75% 55%) !important; }
+.dark .text-red-800 { color: hsl(0 75% 60%) !important; }
+.dark .border-red-200 { border-color: hsl(0 40% 25%) !important; }
+.dark .ring-red-200 { --tw-ring-color: hsl(0 40% 25%) !important; }
+
+/* --- 9. Green (성공 - emerald 변형) --- */
+.dark .bg-green-50 { background-color: hsl(142 40% 12%) !important; }
+.dark .bg-green-100 { background-color: hsl(142 40% 15%) !important; }
+.dark .text-green-600 { color: hsl(142 70% 55%) !important; }
+.dark .text-green-700 { color: hsl(142 70% 50%) !important; }
+.dark .border-green-200 { border-color: hsl(142 40% 25%) !important; }
+
+/* --- 10. Slate (gray 변형) --- */
+.dark .bg-slate-50 { background-color: hsl(var(--muted)) !important; }
+.dark .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
+.dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
+.dark .text-slate-600 { color: hsl(var(--foreground) / 0.7) !important; }
+.dark .text-slate-700 { color: hsl(var(--foreground) / 0.8) !important; }
+.dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
+
+/* ===== End Dark Mode Compatibility Layer ===== */
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 36cbf4ad..e265cc57 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -17,6 +17,10 @@ const buttonVariants = cva(
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
+        success:
+          "bg-success text-success-foreground shadow-xs hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40",
+        warning:
+          "bg-warning text-warning-foreground shadow-xs hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",