1. 레이아웃 · 반응형
PC
- 최대 콘텐츠 너비: 1280px
- GNB 높이: 72px
- 상품 그리드: 4열 (1024px+)
- 유틸리티 바 + 카테고리 탭 (SSG 패턴)
- 검색바: pill 형태, GNB 중앙
Mobile
- 기준 뷰포트: 390 × 844
- GNB: 56px
- 하단 탭: 56px (Kurly형)
- 상품 그리드: 2열
- 패딩: 16px
Breakpoints: 640px (sm) · 768px (md) · 1024px (lg)
2. 컬러
Primary
#4885FF
CTA, 링크, GNB 포인트
Primary Dark
#4785FF
호버
Primary Light
#EFF6FF
배지, 선택 배경
Text
#222222
본문
Text Secondary
#666666
보조 텍스트
Border
#E5E7EB
구분선, 입력 테두리
Danger
#DC2626
할인율, 경고
Success
#15803D
완료, 재고
3. 타이포그래피
Font: Pretendard (친누.fig 스펙)
Display / H1 — 30~36px ExtraBold
Section Title — 22~24px Bold
Product Name — 14~16px Bold
Body — 14~15px Regular
Caption — 11~12px
4. 컴포넌트
Button
Input · Search
Badge
BEST한정명장
Tabs
Product Card (Kurly 스타일)
5. 레퍼런스 매핑
| 싼타몰 요소 | Kurly | SSG |
|---|---|---|
| 상품 카드 · hover 장바구니 | ○ | △ |
| Pill 검색바 | ○ | △ |
| 유틸바 + 카테고리 탭 GNB | △ | ○ |
| 카테고리 칩 필터 | △ | ○ |
| 메가푸터 | ○ | ○ |
| MO 하단 5탭 | ○ | ○ |