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/screen/config-panels/ImprovedButtonControlConfigPanel.tsx

@@ -214,7 +214,7 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
           {/* 제어 목록 헤더 */}
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-2">
-              <Workflow className="h-4 w-4 text-green-600" />
+              <Workflow className="h-4 w-4 text-emerald-600" />
               <Label>제어 목록 (순서대로 실행)</Label>
             </div>
             <Button variant="outline" size="sm" onClick={handleAddControl} className="h-8">
@@ -226,8 +226,8 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
           {/* 제어 목록 */}
           {flowControls.length === 0 ? (
             <div className="rounded-md border border-dashed p-6 text-center">
-              <Workflow className="mx-auto h-8 w-8 text-gray-400" />
-              <p className="mt-2 text-sm text-gray-500">등록된 제어가 없습니다</p>
+              <Workflow className="mx-auto h-8 w-8 text-muted-foreground/70" />
+              <p className="mt-2 text-sm text-muted-foreground">등록된 제어가 없습니다</p>
               <Button variant="outline" size="sm" onClick={handleAddControl} className="mt-3">
                 <Plus className="mr-1 h-3 w-3" />첫 번째 제어 추가
               </Button>
@@ -254,10 +254,10 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
 
           {/* 안내 메시지 */}
           {flowControls.length > 0 && (
-            <div className="rounded bg-blue-50 p-3">
+            <div className="rounded bg-primary/10 p-3">
               <div className="flex items-start space-x-2">
-                <Info className="mt-0.5 h-4 w-4 text-blue-600" />
-                <div className="text-xs text-blue-800">
+                <Info className="mt-0.5 h-4 w-4 text-primary" />
+                <div className="text-xs text-primary">
                   <p className="font-medium">다중 제어 실행 정보:</p>
                   <p className="mt-1">• 제어는 위에서 아래 순서대로 순차 실행됩니다</p>
                   <p>• 각 제어는 독립 트랜잭션으로 처리됩니다</p>
@@ -314,9 +314,9 @@ const FlowControlItem: React.FC<{
             </SelectTrigger>
             <SelectContent>
               {loading ? (
-                <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
               ) : flows.length === 0 ? (
-                <div className="p-2 text-center text-xs text-gray-500">플로우가 없습니다</div>
+                <div className="p-2 text-center text-xs text-muted-foreground">플로우가 없습니다</div>
               ) : (
                 flows.map((flow) => (
                   <SelectItem key={flow.flowId} value={flow.flowId.toString()}>
@@ -350,7 +350,7 @@ const FlowControlItem: React.FC<{
         <Button
           variant="ghost"
           size="icon"
-          className="h-8 w-8 text-red-500 hover:bg-red-50 hover:text-red-600"
+          className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
           onClick={onRemove}
         >
           <Trash2 className="h-4 w-4" />