From 0832e7b6ebf698c32bc63a983ecf784dfb44bb8c Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Tue, 16 Dec 2025 18:06:15 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EB=94=94=EC=8A=A4?=
 =?UTF-8?q?=ED=94=8C=EB=A0=88=EC=9D=B4=20=ED=91=9C=EC=8B=9C=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../card-display/CardDisplayComponent.tsx         | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
index 5594d266..e8afb3b3 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
+++ b/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%", // 전체 너비 차지
   };
 
   // 텍스트 자르기 함수