refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

447+ 파일, 4500+ 줄 변경:
- gray-* → border/bg-muted/text-foreground/text-muted-foreground
- blue-* → primary/ring
- red-* → destructive
- green-* → emerald (일관성)
- indigo-* → primary
- yellow/orange → amber (통일)
- dark mode 변형도 시맨틱 토큰으로 변환

Made-with: Cursor

frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx

@@ -293,7 +293,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                   .map((column) => (
                     <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                       <div className="flex items-center gap-2">
-                        <span className="text-green-600">📥</span>
+                        <span className="text-emerald-600">📥</span>
                         <span>{column.displayName || column.columnName}</span>
                         <Badge variant="outline" className="text-xs">
                           {column.webType || column.dataType}
@@ -419,7 +419,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
 
           {/* 선택된 숫자 타입에 대한 설명 */}
           {mapping.value?.startsWith("#") && mapping.value !== "#custom" && (
-            <div className="text-muted-foreground rounded bg-green-50 p-2 text-xs">
+            <div className="text-muted-foreground rounded bg-emerald-50 p-2 text-xs">
               {mapping.value === "#AUTO_INCREMENT" && "🔢 데이터베이스에서 자동으로 증가하는 값이 할당됩니다"}
               {mapping.value === "#RANDOM_INT" && "🎲 1부터 1000 사이의 랜덤한 정수가 생성됩니다"}
               {mapping.value === "#ZERO" && "0️⃣ 0 값이 저장됩니다"}
@@ -514,7 +514,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                             .map((column) => (
                               <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                                 <div className="flex items-center gap-2">
-                                  <span className="text-green-600">📥</span>
+                                  <span className="text-emerald-600">📥</span>
                                   <span>{column.displayName || column.columnName}</span>
                                 </div>
                               </SelectItem>
@@ -642,7 +642,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                                       .map((column) => (
                                         <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                                           <div className="flex items-center gap-2">
-                                            <span className="text-green-600">📥</span>
+                                            <span className="text-emerald-600">📥</span>
                                             <span>{column.displayName || column.columnName}</span>
                                           </div>
                                         </SelectItem>
@@ -698,9 +698,9 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
           <CardContent className="space-y-3">
             {/* 매핑되지 않은 필드가 없는 경우 */}
             {getUnmappedToColumns().length === 0 ? (
-              <div className="rounded-lg border bg-green-50 p-4 text-center">
-                <div className="mb-2 text-green-600">✅ 모든 필드가 매핑되었습니다</div>
-                <p className="text-sm text-green-700">
+              <div className="rounded-lg border bg-emerald-50 p-4 text-center">
+                <div className="mb-2 text-emerald-600">✅ 모든 필드가 매핑되었습니다</div>
+                <p className="text-sm text-emerald-700">
                   컬럼 매핑으로 모든 TO 테이블 필드가 처리되고 있어 별도의 기본값 설정이 필요하지 않습니다.
                 </p>
               </div>