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/card-display/CardDisplayComponent.tsx

@@ -792,7 +792,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
       >
         <div className="text-muted-foreground text-center">
           <div className="text-lg mb-2">좌측에서 항목을 선택해주세요</div>
-          <div className="text-sm text-gray-400">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
+          <div className="text-sm text-muted-foreground/70">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
         </div>
       </div>
     );
@@ -1084,7 +1084,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         <img 
                           src={imageUrl} 
                           alt={titleValue || "이미지"}
-                          className="h-16 w-16 rounded-lg object-cover border border-gray-200"
+                          className="h-16 w-16 rounded-lg object-cover border border-border"
                           onError={(e) => {
                             // 이미지 로드 실패 시 기본 아이콘으로 대체
                             e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23e0e7ff' rx='8'/%3E%3Ctext x='32' y='40' text-anchor='middle' fill='%236366f1' font-size='24'%3E👤%3C/text%3E%3C/svg%3E";
@@ -1144,7 +1144,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                       <div className="mt-2 flex justify-end space-x-2">
                         {(componentConfig.cardStyle?.showViewButton ?? true) && (
                           <button 
-                            className="text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                            className="text-xs text-primary hover:text-primary transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardView(data);
@@ -1166,7 +1166,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         )}
                         {(componentConfig.cardStyle?.showDeleteButton ?? false) && (
                           <button 
-                            className="text-xs text-red-500 hover:text-red-700 transition-colors"
+                            className="text-xs text-destructive hover:text-destructive transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardDelete(data, index);