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/number-input/NumberInputComponent.tsx

@@ -120,13 +120,13 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         {component.label && component.style?.labelDisplay !== false && (
           <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>
         )}
 
         <div className="box-border flex h-full w-full items-center gap-1">
           {/* 통화 기호 */}
-          <span className="pl-2 text-base font-semibold text-green-600">₩</span>
+          <span className="pl-2 text-base font-semibold text-emerald-600">₩</span>
 
           {/* 숫자 입력 */}
           <input
@@ -143,7 +143,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
                 onFormDataChange(component.columnName, numericValue);
               }
             }}
-            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-green-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-emerald-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
             style={inputFontSize ? { fontSize: inputFontSize } : undefined}
           />
         </div>
@@ -159,7 +159,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         {component.label && component.style?.labelDisplay !== false && (
           <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>
         )}
 
@@ -182,12 +182,12 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
                 onFormDataChange(component.columnName, numericValue);
               }
             }}
-            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-blue-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-primary"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
             style={inputFontSize ? { fontSize: inputFontSize } : undefined}
           />
 
           {/* 퍼센트 기호 */}
-          <span className="pr-2 text-base font-semibold text-blue-600">%</span>
+          <span className="pr-2 text-base font-semibold text-primary">%</span>
         </div>
       </div>
     );
@@ -199,7 +199,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <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>
       )}
 
@@ -222,7 +222,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         min={componentConfig.min}
         max={componentConfig.max}
         step={step}
-        className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+        className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-foreground"} placeholder:text-muted-foreground/70 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
         style={inputFontSize ? { fontSize: inputFontSize } : undefined}
         onClick={handleClick}
         onDragStart={onDragStart}