<Asset shape="rounded" size={64} src="/artwork.jpg" />
<Asset shape="circle" size={64} src="/artist.jpg" />
<Asset shape="square" size={64} src="/gallery.jpg" />

<Asset shape="square" />   {/* 갤러리 썸네일 */}
<Asset shape="rounded" />  {/* 작품 이미지, 기본값 */}
<Asset shape="circle" />   {/* 작가 프로필 */}

<Asset size={24} />  {/* 인라인 아이콘 */}
<Asset size={36} />  {/* 리스트 아이템 */}
<Asset size={48} />  {/* 카드 썸네일 */}
<Asset size={64} />  {/* 상세 프로필 */}
<Asset size={96} />  {/* 히어로 프로필 */}

<!-- 이니셜 fallback -->
<Asset src="/broken.jpg" fallback="initial" name="박수근" />

<!-- 아이콘 fallback -->
<Asset src="/broken.jpg" fallback="icon" />

<!-- 빈 placeholder -->
<Asset src="/broken.jpg" fallback="empty" />

<Paragraph scale="t3">
  <Paragraph.Text>박수근 — 빨래터</Paragraph.Text>
</Paragraph>
<Paragraph scale="t5" color="secondary">
  <Paragraph.Text>한국 근현대 미술의...</Paragraph.Text>
  <Paragraph.Link href="/detail">더 알아보기</Paragraph.Link>
</Paragraph>

<Paragraph scale="t1">...</Paragraph>  {/* 28px, Bold, 제목 */}
<Paragraph scale="t5">...</Paragraph>  {/* 15px, Regular, 본문, 기본값 */}
<Paragraph scale="t7">...</Paragraph>  {/* 11px, Regular, 라벨 */}

<Paragraph>
  <Paragraph.Icon name="diamond" />
  <Paragraph.Text>추천 작품</Paragraph.Text>
  <Paragraph.Badge color="green">New</Paragraph.Badge>
  <Paragraph.Link href="/more">자세히</Paragraph.Link>
</Paragraph>

<Paragraph ellipsis={1}>...</Paragraph>  {/* 1줄 후 잘라냄 */}
<Paragraph ellipsis={2}>...</Paragraph>  {/* 2줄 후 잘라냄 */}

{/* aria-label에 전체 텍스트를 반드시 제공하세요 */}

<ListRow>
  <ListRow.Prefix>
    <Asset shape="rounded" size={40} />
  </ListRow.Prefix>
  <ListRow.Text title="작품 제목" subtitle="작가명 · 유화" />
  <ListRow.Suffix><ChevronIcon /></ListRow.Suffix>
</ListRow>

<ListRow.Prefix>
  <Asset shape="rounded" size={40} icon={<DiamondIcon />} />
</ListRow.Prefix>

<ListRow.Prefix>
  <Asset shape="circle" size={40} name="박수근" fallback="initial" />
</ListRow.Prefix>

<ListRow.Text
  title="빨래터"
  subtitle="박수근 · 유화"
  badge={<Badge color="green">Available</Badge>}
/>

<ListRow.Suffix><ChevronIcon /></ListRow.Suffix>
<ListRow.Suffix><span>₩ 2,400,000</span></ListRow.Suffix>
<ListRow.Suffix><Button size="small">팔로우</Button></ListRow.Suffix>

<ListHeader
  titleType="paragraph"
  title="추천 작품"
  description="CHAART가 선별한 이번 주 추천 작품입니다"
/>

<ListHeader titleType="paragraph" title="추천 작품" />
<ListHeader titleType="paragraph" title="추천 작품" description="..." />

<ListHeader
  titleType="textButton"
  title="인기 작품"
  buttonText="더보기"
  onButtonClick={() => navigate('/popular')}
/>

<ListHeader
  titleType="selector"
  title="작품 목록"
  selectorValue="최신순"
  selectorOptions={['최신순', '인기순', '가격순']}
  onSelectorChange={(v) => setSortBy(v)}
/>

<ListHeader descriptionPosition="top" description="Park Soo-keun Collection" />
<ListHeader descriptionPosition="bottom" description="CHAART가 선별한 추천" />

<Top
  title="빨래터"
  subtitle="박수근, 1954 · 유화"
  subtitlePosition="bottom"
  badge={{ color: 'green', children: 'Available' }}
>
  <Top.SubtitleParagraph position="top">
    Park Soo-keun Collection
  </Top.SubtitleParagraph>
</Top>

<Top title="페이지 제목" />

<Top title="페이지 제목" subtitle="카테고리" subtitlePosition="top" />
<Top title="빨래터" subtitle="박수근, 1954" subtitlePosition="bottom" />

<Top
  title="빨래터"
  subtitle="박수근, 1954 · 유화"
  badge={{ color: 'green', children: 'Available' }}
/>

<Top
  title="컬렉션"
  subtitle="12개 작품"
  rightAsset={<Asset shape="rounded" size={48} />}
  lowerCTA={{ children: '컬렉션 관리 →', variant: 'weak' }}
/>

<ArtworkCard
  image="/artwork.jpg"
  title="빨래터"
  artist="박수근"
  medium="유화"
  price="₩ 2,400,000"
  badge={{ color: 'green', children: 'Available' }}
  onWishlist={() => toggleWishlist(id)}
/>

<ArtworkCard layout="vertical" />  {/* 기본값 */}
{/* 그리드: grid-template-columns: repeat(2, 1fr) */}

<ArtworkCard layout="horizontal" />
{/* 이미지 80×80, 텍스트 flex: 1 */}

<ArtworkCard
  badge={{ color: 'green', children: 'Available' }}
  secondaryBadge={{ color: 'blue', children: 'VIP' }}
  isWishlisted={true}
  onWishlist={() => toggleWishlist(id)}
/>

<BoardRow
  thumbnail="/images/artwork-01.jpg"
  title="빨래터"
  description="박수근 · 유화 · 45.5 x 38cm"
  price="12,000,000원"
  date="2일 전"
/>

<!-- 썸네일 포함 -->
<BoardRow thumbnail="/images/art.jpg" title="해질녘" />

<!-- 썸네일 없음 (게시판형) -->
<BoardRow title="[공지] 2월 경매 일정 안내" showThumbnail={false} />

<BoardRow highlight="new" title="군상" />
<BoardRow highlight="hot" title="산수화 병풍" />

<GridList columns={2} gap={12}>
  <ArtworkCard title="빨래터" artist="박수근" price="₩12,000,000" />
  <ArtworkCard title="해질녘" artist="김환기" price="₩8,500,000" />
</GridList>

<GridList columns={2}>...</GridList>  {/* 작품 갤러리 */}
<GridList columns={3}>...</GridList>  {/* 작가 목록, 카탈로그 */}

<GridList columns={2} masonry>
  {artworks.map(art => (
    <ArtworkCard key={art.id} {...art} />
  ))}
</GridList>

이 작품의 감정가는 <Highlight>12,000,000원</Highlight>이며,
<Highlight>박수근</Highlight> 작가의 대표작입니다.

<Highlight variant="background" color="red">₩12,000,000</Highlight>
<Highlight variant="background" color="green">-15%</Highlight>
<Highlight variant="background" color="blue">경매 진행중</Highlight>

<Highlight variant="underline" color="red">박수근</Highlight>
<Highlight variant="underline" color="orange">₩12,000,000</Highlight>

<Highlight variant="bold" color="red">30%</Highlight>
<Highlight variant="bold" color="dark">김환기</Highlight>
<Highlight variant="bold" color="blue">한정 판매</Highlight>

<List>
  {items.map(item => <ListItem key={item.id} {...item} />)}
  <ListFooter type="more" onMore={handleLoadMore} />
</List>

<ListFooter
  type="pagination"
  currentPage={1}
  totalPages={12}
  onPageChange={handlePageChange}
/>

<ListFooter type="loading" message="작품을 불러오는 중…" />

<Post
  author={{ name: "아트스페이스 갤러리", avatar: "/gallery.jpg" }}
  timestamp="2시간 전"
  content="다음 주 금요일, 신진 작가 3인의 그룹전이 오픈합니다."
  likes={24}
  comments={8}
/>

<Post
  author={{ name: "작가 이수연", avatar: "/artist.jpg" }}
  timestamp="어제"
  content="새 작업실에서의 첫 번째 작품이 완성되었습니다."
  images={["/studio.jpg"]}
  likes={56}
  comments={12}
/>

<Post
  author={{ name: "전시 리뷰어 박지현", avatar: "/reviewer.jpg" }}
  timestamp="3일 전"
  content="서울 아트페어 2026 현장 스케치입니다."
  images={["/fair1.jpg", "/fair2.jpg", "/fair3.jpg", ...moreImages]}
  likes={142}
  comments={31}
/>

<TableRow
  cells={["무제 No.203", "김환기", "₩85,000,000", "판매중"]}
  onClick={() => openDetail(id)}
/>