카드 디스플레이 표시개선

frontend/lib/registry/components/card-display/CardDisplayComponent.tsx

@@ -823,28 +823,29 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     display: "grid",
     gridTemplateColumns: `repeat(${componentConfig.cardsPerRow || 3}, 1fr)`, // 기본값 3 (한 행당 카드 수)
     gridAutoRows: "min-content", // 자동 행 생성으로 모든 데이터 표시
-    gap: `${componentConfig.cardSpacing || 32}px`, // 간격 대폭 증가로 여유로운 느낌
-    padding: "32px", // 패딩 대폭 증가
+    gap: `${componentConfig.cardSpacing || 16}px`, // 카드 간격
+    padding: "16px", // 패딩
     width: "100%",
     height: "100%",
-    background: "#f8fafc", // 연한 하늘색 배경 (채도 낮춤)
+    background: "transparent", // 배경색 제거
     overflow: "auto",
-    borderRadius: "12px", // 컨테이너 자체도 라운드 처리
+    borderRadius: "0", // 라운드 제거
   };
 
   // 카드 스타일 - 컴팩트한 디자인
   const cardStyle: React.CSSProperties = {
-    backgroundColor: "white",
-    border: "1px solid #e5e7eb",
+    backgroundColor: "hsl(var(--card))",
+    border: "1px solid hsl(var(--border))",
     borderRadius: "8px",
     padding: "16px",
-    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)",
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
     transition: "all 0.2s ease",
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
     position: "relative",
     cursor: isDesignMode ? "pointer" : "default",
+    width: "100%", // 전체 너비 차지
   };
 
   // 텍스트 자르기 함수