디자인 리소스
Card
컨테이너 카드는 배경색(bg) 기반으로 구분하며, border를 사용하지 않습니다. 단, 반복 리스트 아이템(ListCard 등)은 항목 간 경계 표시를 위해 border를 사용합니다.
기본 스타일
Light: bg-white-80 on bg-bg-2 · Dark: bg-white-10 on bg-dark-1
Light Mode
Dark Mode
className="rounded-[var(--radius-card)] bg-white-80 dark:bg-white-10 p-[var(--spacing-padding-card)]"Content Card vs Container Card
Content 카드는 독립 정보 단위, Container 카드는 하위 요소를 그룹핑
content Card — 각 카드가 독립적인 정보를 담고 있음
크기별 비교
Large
--radius-card-lg (20px)
메인 카드, 모달, 팝오버
Default
--radius-card (8px)
일반 카드, 패널
Small
--radius-card (8px)
칩, 태그, 작은 카드
Nested
--radius-card-nested (6px)
카드 내부의 중첩 요소
다크모드
동일한 카드를 라이트/다크 모드로 렌더링
Light
Dark
금지 패턴
아래 패턴은 디자인 시스템에서 사용하지 않습니다
✕ 컨테이너 카드에 border — bg 기반으로 구분
✕ bg 다중 중첩 — 최대 1단계
✕ 높이 불일치 — 같은 행은 동일 높이