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/node-editor/nodes/NodeWithValidation.tsx

@@ -44,16 +44,16 @@ export const NodeWithValidation = memo(
       if (hasError) {
         return {
           Icon: AlertCircle,
-          bgColor: "bg-red-500",
-          textColor: "text-red-700",
-          borderColor: "border-red-500",
-          hoverBgColor: "hover:bg-red-600",
+          bgColor: "bg-destructive",
+          textColor: "text-destructive",
+          borderColor: "border-destructive",
+          hoverBgColor: "hover:bg-destructive",
         };
       }
       if (hasWarning) {
         return {
           Icon: AlertTriangle,
-          bgColor: "bg-yellow-500",
+          bgColor: "bg-amber-500",
           textColor: "text-yellow-700",
           borderColor: "border-yellow-500",
           hoverBgColor: "hover:bg-yellow-600",
@@ -61,10 +61,10 @@ export const NodeWithValidation = memo(
       }
       return {
         Icon: Info,
-        bgColor: "bg-blue-500",
-        textColor: "text-blue-700",
-        borderColor: "border-blue-500",
-        hoverBgColor: "hover:bg-blue-600",
+        bgColor: "bg-primary",
+        textColor: "text-primary",
+        borderColor: "border-primary",
+        hoverBgColor: "hover:bg-primary",
       };
     };
 
@@ -97,7 +97,7 @@ export const NodeWithValidation = memo(
               <div className={`rounded-lg border-2 ${borderColor} bg-white p-3 shadow-lg`}>
                 <div className="mb-2 flex items-center gap-2">
                   <Icon className={`h-4 w-4 ${textColor}`} />
-                  <span className="font-semibold text-gray-900">
+                  <span className="font-semibold text-foreground">
                     {hasError
                       ? "오류"
                       : hasWarning
@@ -109,16 +109,16 @@ export const NodeWithValidation = memo(
                   {nodeValidations.map((validation, index) => (
                     <div
                       key={index}
-                      className="rounded border-l-2 border-gray-300 bg-gray-50 p-2"
+                      className="rounded border-l-2 border-input bg-muted p-2"
                     >
-                      <div className="mb-1 text-xs font-medium text-gray-500">
+                      <div className="mb-1 text-xs font-medium text-muted-foreground">
                         {validation.type}
                       </div>
-                      <div className="text-sm text-gray-700">
+                      <div className="text-sm text-foreground">
                         {validation.message}
                       </div>
                       {validation.affectedNodes && validation.affectedNodes.length > 1 && (
-                        <div className="mt-1 text-xs text-gray-500">
+                        <div className="mt-1 text-xs text-muted-foreground">
                           영향받는 노드: {validation.affectedNodes.length}개
                         </div>
                       )}