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/StepProgress.tsx

@@ -19,7 +19,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
   onStepChange,
 }) => {
   return (
-    <div className="bg-white border-b border-gray-200 px-6 py-4">
+    <div className="bg-white border-b border-border px-6 py-4">
       <div className="flex items-center justify-between">
         {steps.map((step, index) => (
           <React.Fragment key={step.id}>
@@ -32,10 +32,10 @@ export const StepProgress: React.FC<StepProgressProps> = ({
               <div
                 className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-200 ${
                   step.id < currentStep
-                    ? "bg-green-500 text-white"
+                    ? "bg-emerald-500 text-white"
                     : step.id === currentStep
-                    ? "bg-orange-500 text-white"
-                    : "bg-gray-200 text-muted-foreground"
+                    ? "bg-amber-500 text-white"
+                    : "bg-muted/80 text-muted-foreground"
                 }`}
               >
                 {step.id < currentStep ? (
@@ -47,12 +47,12 @@ export const StepProgress: React.FC<StepProgressProps> = ({
               
               <div>
                 <h3 className={`text-sm font-medium ${
-                  step.id <= currentStep ? "text-gray-900" : "text-gray-500"
+                  step.id <= currentStep ? "text-foreground" : "text-muted-foreground"
                 }`}>
                   {step.title}
                 </h3>
                 <p className={`text-xs ${
-                  step.id <= currentStep ? "text-muted-foreground" : "text-gray-400"
+                  step.id <= currentStep ? "text-muted-foreground" : "text-muted-foreground/70"
                 }`}>
                   {step.description}
                 </p>
@@ -60,7 +60,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
             </div>
             
             {index < steps.length - 1 && (
-              <ArrowRight className="w-4 h-4 text-gray-400 mx-4" />
+              <ArrowRight className="w-4 h-4 text-muted-foreground/70 mx-4" />
             )}
           </React.Fragment>
         ))}