설명

6블록 벤토 기능 컴포넌트 3종입니다. 데스크톱에서 6칼럼 그리드를 깔고 큰 블록에 col-span-4 · row-span-2, 중간 블록 둘에 col-span-2, 작은 블록 셋에 col-span-2를 줘서 18칸을 빈틈 없이 채웁니다. 태블릿에서는 2칼럼, 모바일에서는 1칼럼으로 풀리며 마지막 작은 블록만 2칸을 먹어 홀수 잔여를 없앱니다. 큰 블록에는 그라디언트 면적 채움과 그리기 애니메이션을 넣은 인라인 SVG 라인 차트, 그 아래 지표 3개를 정의목록으로 붙였습니다. 변형 01은 화이트 카드 + 딥 올리브 대형 블록, 변형 02는 딥 올리브 판 위에 화이트 5% 유리 카드와 라임 액센트, 변형 03은 채움을 걷어낸 아웃라인 컴팩트입니다. 폰트는 제목 Outfit · 본문 Inter로 분리했고, 아이콘은 전부 인라인 SVG(stroke 2 · round cap), 사진 자리는 그라디언트 플레이스홀더로 대체했습니다. 호버 시 카드가 1px 떠오르고 링 색이 진해지며, 배경 글로우 · 차트 드로잉 · 막대 상승 모션은 prefers-reduced-motion에서 즉시 정지합니다.

섹션 구성

1. 01변형 01 · 라이트 — 제목·리드·CTA
2. 02라이트 벤토 그리드 6블록 (대형 1 + 중형 2 + 소형 3)
3. 03변형 02 · 딥 올리브 — 제목·리드
4. 04다크 벤토 그리드 6블록 (대형 1 + 중형 2 + 소형 3)
5. 05변형 03 · 아웃라인 컴팩트 — 제목·리드
6. 06아웃라인 벤토 그리드 6블록 (대형 1 + 중형 2 + 소형 3)
7. 07문의 스트립
8. 08데모용 가상 정보 고지

변경 이력