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/dialogs/FlowButtonGroupDialog.tsx

@@ -61,7 +61,7 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
               <div className="flex items-center space-x-3">
                 <RadioGroupItem value="horizontal" id="direction-horizontal" />
                 <Label htmlFor="direction-horizontal" className="flex items-center gap-2 text-sm font-normal">
-                  <ArrowRight className="h-4 w-4 text-blue-600" />
+                  <ArrowRight className="h-4 w-4 text-primary" />
                   <span>가로 정렬</span>
                   <Badge variant="secondary" className="ml-2 text-xs">
                     ← →
@@ -71,7 +71,7 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
               <div className="flex items-center space-x-3">
                 <RadioGroupItem value="vertical" id="direction-vertical" />
                 <Label htmlFor="direction-vertical" className="flex items-center gap-2 text-sm font-normal">
-                  <ArrowDown className="h-4 w-4 text-blue-600" />
+                  <ArrowDown className="h-4 w-4 text-primary" />
                   <span>세로 정렬</span>
                   <Badge variant="secondary" className="ml-2 text-xs">
                     ↑ ↓
@@ -161,9 +161,9 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
           </div>
 
           {/* 미리보기 */}
-          <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
-            <p className="mb-3 text-xs font-medium text-blue-900">설정 미리보기</p>
-            <div className="space-y-2 text-xs text-blue-700">
+          <div className="rounded-lg border border-primary/20 bg-primary/10 p-4">
+            <p className="mb-3 text-xs font-medium text-primary">설정 미리보기</p>
+            <div className="space-y-2 text-xs text-primary">
               <div className="flex items-center gap-2">
                 {direction === "horizontal" ? <ArrowRight className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />}
                 <span>