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/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx

@@ -102,8 +102,8 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
             <div
               className={cn(
                 "h-6 w-11 rounded-full transition-colors",
-                isChecked ? "bg-blue-600" : "bg-gray-300",
-                "peer-focus:ring-2 peer-focus:ring-blue-200",
+                isChecked ? "bg-primary" : "bg-muted/60",
+                "peer-focus:ring-2 peer-focus:ring-primary/20",
               )}
             >
               <div
@@ -114,7 +114,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
               />
             </div>
           </div>
-          <span className="text-sm text-gray-900">{componentConfig.checkboxLabel || component.text || "스위치"}</span>
+          <span className="text-sm text-foreground">{componentConfig.checkboxLabel || component.text || "스위치"}</span>
         </label>
       );
     }
@@ -168,7 +168,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
       {component.label && (component.style?.labelDisplay ?? true) && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}