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

@@ -19,7 +19,7 @@ export const ProcedureCallActionNode = memo(
     return (
       <div
         className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-          selected ? "border-violet-500 shadow-lg" : "border-gray-200"
+          selected ? "border-violet-500 shadow-lg" : "border-border"
         }`}
       >
         {/* 입력 핸들 */}
@@ -43,14 +43,14 @@ export const ProcedureCallActionNode = memo(
         <div className="space-y-2 p-3">
           {/* DB 소스 */}
           <div className="flex items-center gap-2">
-            <Database className="h-3 w-3 text-gray-400" />
-            <span className="text-xs text-gray-600">
+            <Database className="h-3 w-3 text-muted-foreground/70" />
+            <span className="text-xs text-muted-foreground">
               {data.dbSource === "external" ? (
                 <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-700">
                   {data.connectionName || "외부 DB"}
                 </span>
               ) : (
-                <span className="rounded bg-blue-100 px-2 py-0.5 text-blue-700">
+                <span className="rounded bg-primary/10 px-2 py-0.5 text-primary">
                   내부 DB
                 </span>
               )}
@@ -68,39 +68,39 @@ export const ProcedureCallActionNode = memo(
 
           {/* 프로시저명 */}
           <div className="flex items-center gap-2 text-xs">
-            <Workflow className="h-3 w-3 text-gray-400" />
+            <Workflow className="h-3 w-3 text-muted-foreground/70" />
             {hasProcedure ? (
-              <span className="font-mono text-green-600 truncate">
+              <span className="font-mono text-emerald-600 truncate">
                 {data.procedureSchema && data.procedureSchema !== "public"
                   ? `${data.procedureSchema}.`
                   : ""}
                 {data.procedureName}()
               </span>
             ) : (
-              <span className="text-orange-500">프로시저 선택 필요</span>
+              <span className="text-amber-500">프로시저 선택 필요</span>
             )}
           </div>
 
           {/* 파라미터 수 */}
           {hasProcedure && inParams.length > 0 && (
-            <div className="text-xs text-gray-500">
+            <div className="text-xs text-muted-foreground">
               입력 파라미터: {inParams.length}개
             </div>
           )}
 
           {/* 반환 필드 */}
           {hasProcedure && outParams.length > 0 && (
-            <div className="mt-1 space-y-1 border-t border-gray-100 pt-1">
-              <div className="text-[10px] font-medium text-green-600">
+            <div className="mt-1 space-y-1 border-t border-border pt-1">
+              <div className="text-[10px] font-medium text-emerald-600">
                 반환 필드:
               </div>
               {outParams.map((p) => (
                 <div
                   key={p.name}
-                  className="flex items-center justify-between rounded bg-green-50 px-2 py-0.5 text-[10px]"
+                  className="flex items-center justify-between rounded bg-emerald-50 px-2 py-0.5 text-[10px]"
                 >
-                  <span className="font-mono text-green-700">{p.name}</span>
-                  <span className="text-gray-400">{p.dataType}</span>
+                  <span className="font-mono text-emerald-700">{p.name}</span>
+                  <span className="text-muted-foreground/70">{p.dataType}</span>
                 </div>
               ))}
             </div>