@ceed/ads 1.35.1 → 1.36.0

package/dist/components/surfaces/Card.md

@@ -7,14 +7,19 @@ The Card component is a UI element that groups related content and actions withi
 Card is composed of five subcomponents: `Card`, `CardContent`, `CardCover`, `CardActions`, and `CardOverflow`.
 
 ```tsx
-<Card {...args} sx={{
-  maxWidth: 320
-}}>
-<CardContent>
-  <Typography level="title-md">Card Title</Typography>
-  <Typography level="body-sm">이것은 카드의 내용입니다. 여기에 다양한 정보를 표시할 수 있습니다.</Typography>
-</CardContent>
-</Card>
+<Card
+    {...args}
+    sx={{
+      maxWidth: 320
+    }}
+  >
+    <CardContent>
+      <Typography level="title-md">Card Title</Typography>
+      <Typography level="body-sm">
+        이것은 카드의 내용입니다. 여기에 다양한 정보를 표시할 수 있습니다.
+      </Typography>
+    </CardContent>
+  </Card>
 ```
 
 | Field   | Description | Default    |
@@ -45,16 +50,18 @@ function MyComponent() {
 The most basic card with a title and body text.
 
 ```tsx
-<Card sx={{
-  maxWidth: 300
-}}>
-<CardContent>
-  <Typography level="title-lg">기본 카드</Typography>
-  <Typography level="body-md">
-    이것은 가장 기본적인 카드 형태입니다. 제목과 내용으로 구성되어 있습니다.
-  </Typography>
-</CardContent>
-</Card>
+<Card
+    sx={{
+      maxWidth: 300
+    }}
+  >
+    <CardContent>
+      <Typography level="title-lg">기본 카드</Typography>
+      <Typography level="body-md">
+        이것은 가장 기본적인 카드 형태입니다. 제목과 내용으로 구성되어 있습니다.
+      </Typography>
+    </CardContent>
+  </Card>
 ```
 
 ## Variants
@@ -63,19 +70,28 @@ Four visual styles are available: `solid`, `soft`, `outlined` (default), and `pl
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  {(['solid', 'soft', 'outlined', 'plain'] as const).map(variant => <Card key={variant} variant={variant} sx={{
-    width: 200
-  }}>
-  <CardContent>
-    <Typography level="title-md" sx={{
-      textTransform: 'capitalize'
-    }}>
-    {variant}
-  </Typography>
-  <Typography level="body-sm">{variant} 스타일 카드</Typography>
-</CardContent>
-</Card>)}
-</Stack>
+    {(["solid", "soft", "outlined", "plain"] as const).map((variant) => (
+      <Card
+        key={variant}
+        variant={variant}
+        sx={{
+          width: 200
+        }}
+      >
+        <CardContent>
+          <Typography
+            level="title-md"
+            sx={{
+              textTransform: "capitalize"
+            }}
+          >
+            {variant}
+          </Typography>
+          <Typography level="body-sm">{variant} 스타일 카드</Typography>
+        </CardContent>
+      </Card>
+    ))}
+  </Stack>
 ```
 
 ## Colors
@@ -84,19 +100,29 @@ Apply a color scheme to match your UI context.
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  {(['primary', 'neutral', 'danger', 'success', 'warning'] as const).map(color => <Card key={color} color={color} variant="soft" sx={{
-    width: 180
-  }}>
-  <CardContent>
-    <Typography level="title-md" sx={{
-      textTransform: 'capitalize'
-    }}>
-    {color}
-  </Typography>
-  <Typography level="body-sm">{color} 색상 카드</Typography>
-</CardContent>
-</Card>)}
-</Stack>
+    {(["primary", "neutral", "danger", "success", "warning"] as const).map((color) => (
+      <Card
+        key={color}
+        color={color}
+        variant="soft"
+        sx={{
+          width: 180
+        }}
+      >
+        <CardContent>
+          <Typography
+            level="title-md"
+            sx={{
+              textTransform: "capitalize"
+            }}
+          >
+            {color}
+          </Typography>
+          <Typography level="body-sm">{color} 색상 카드</Typography>
+        </CardContent>
+      </Card>
+    ))}
+  </Stack>
 ```
 
 ## Sizes
@@ -105,31 +131,40 @@ Three sizes control the card's internal padding: `sm`, `md` (default), and `lg`.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="flex-start" flexWrap="wrap">
-  <Card size="sm" sx={{
-    width: 220
-  }}>
-  <CardContent>
-    <Typography level="title-sm">Small</Typography>
-    <Typography level="body-xs">작은 크기의 카드입니다.</Typography>
-  </CardContent>
-</Card>
-<Card size="md" sx={{
-  width: 260
-}}>
-<CardContent>
-  <Typography level="title-md">Medium</Typography>
-  <Typography level="body-sm">중간 크기의 카드입니다.</Typography>
-</CardContent>
-</Card>
-<Card size="lg" sx={{
-  width: 300
-}}>
-<CardContent>
-  <Typography level="title-lg">Large</Typography>
-  <Typography level="body-md">큰 크기의 카드입니다.</Typography>
-</CardContent>
-</Card>
-</Stack>
+    <Card
+      size="sm"
+      sx={{
+        width: 220
+      }}
+    >
+      <CardContent>
+        <Typography level="title-sm">Small</Typography>
+        <Typography level="body-xs">작은 크기의 카드입니다.</Typography>
+      </CardContent>
+    </Card>
+    <Card
+      size="md"
+      sx={{
+        width: 260
+      }}
+    >
+      <CardContent>
+        <Typography level="title-md">Medium</Typography>
+        <Typography level="body-sm">중간 크기의 카드입니다.</Typography>
+      </CardContent>
+    </Card>
+    <Card
+      size="lg"
+      sx={{
+        width: 300
+      }}
+    >
+      <CardContent>
+        <Typography level="title-lg">Large</Typography>
+        <Typography level="body-md">큰 크기의 카드입니다.</Typography>
+      </CardContent>
+    </Card>
+  </Stack>
 ```
 
 ## Horizontal Layout
@@ -137,57 +172,92 @@ Three sizes control the card's internal padding: `sm`, `md` (default), and `lg`.
 Set `orientation="horizontal"` to arrange the card's children in a row. Combine with `CardOverflow` for a side-by-side image and text layout.
 
 ```tsx
-<Stack spacing={2} sx={{
-  maxWidth: 500
-}}>
-<Card orientation="horizontal" variant="outlined">
-  <CardOverflow>
-    <AspectRatio ratio="1" sx={{
-      width: 140
-    }}>
-    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=280" loading="lazy" alt="Shoes" />
-  </AspectRatio>
-</CardOverflow>
-<CardContent>
-  <Typography level="title-md">운동화</Typography>
-  <Typography level="body-sm">편안하고 스타일리시한 운동화입니다.</Typography>
-  <Stack direction="row" spacing={1} alignItems="center" sx={{
-    mt: 'auto'
-  }}>
-  <Chip variant="outlined" color="primary" size="sm">무료배송</Chip>
-  <Typography level="title-sm" color="primary">₩129,000</Typography>
-</Stack>
-</CardContent>
-<CardActions sx={{
-  flexDirection: 'column',
-  gap: 0.5
-}}>
-<Button size="sm" variant="solid" color="primary">구매</Button>
-<IconButton size="sm" variant="outlined" color="neutral">
-  <BookmarkAddIcon />
-</IconButton>
-</CardActions>
-</Card>
+<Stack
+    spacing={2}
+    sx={{
+      maxWidth: 500
+    }}
+  >
+    <Card orientation="horizontal" variant="outlined">
+      <CardOverflow>
+        <AspectRatio
+          ratio="1"
+          sx={{
+            width: 140
+          }}
+        >
+          <img
+            src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=280"
+            loading="lazy"
+            alt="Shoes"
+          />
+        </AspectRatio>
+      </CardOverflow>
+      <CardContent>
+        <Typography level="title-md">운동화</Typography>
+        <Typography level="body-sm">편안하고 스타일리시한 운동화입니다.</Typography>
+        <Stack
+          direction="row"
+          spacing={1}
+          alignItems="center"
+          sx={{
+            mt: "auto"
+          }}
+        >
+          <Chip variant="outlined" color="primary" size="sm">
+            무료배송
+          </Chip>
+          <Typography level="title-sm" color="primary">
+            ₩129,000
+          </Typography>
+        </Stack>
+      </CardContent>
+      <CardActions
+        sx={{
+          flexDirection: "column",
+          gap: 0.5
+        }}
+      >
+        <Button size="sm" variant="solid" color="primary">
+          구매
+        </Button>
+        <IconButton size="sm" variant="outlined" color="neutral">
+          <BookmarkAddIcon />
+        </IconButton>
+      </CardActions>
+    </Card>
 
-<Card orientation="horizontal" variant="outlined">
-  <CardOverflow>
-    <AspectRatio ratio="1" sx={{
-      width: 120
-    }}>
-    <img src="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?auto=format&fit=crop&w=240" loading="lazy" alt="Breakfast" />
-  </AspectRatio>
-</CardOverflow>
-<CardContent>
-  <Typography level="title-sm">맛있는 아침식사</Typography>
-  <Typography level="body-xs" startDecorator={<LocationOnIcon />}>서울, 한국</Typography>
-  <Typography level="body-xs" sx={{
-    mt: 0.5
-  }}>
-  건강하고 맛있는 아침 식사로 하루를 시작해보세요.
-</Typography>
-</CardContent>
-</Card>
-</Stack>
+    <Card orientation="horizontal" variant="outlined">
+      <CardOverflow>
+        <AspectRatio
+          ratio="1"
+          sx={{
+            width: 120
+          }}
+        >
+          <img
+            src="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?auto=format&fit=crop&w=240"
+            loading="lazy"
+            alt="Breakfast"
+          />
+        </AspectRatio>
+      </CardOverflow>
+      <CardContent>
+        <Typography level="title-sm">맛있는 아침식사</Typography>
+        <Typography level="body-xs" startDecorator={<LocationOnIcon />}>
+          서울, 한국
+        </Typography>
+        <Typography
+          level="body-xs"
+          sx={{
+            mt: 0.5
+          }}
+        >
+          건강하고 맛있는 아침 식사로 하루를 시작해보세요.
+        </Typography>
+      </CardContent>
+    </Card>
+  </Stack>
 ```
 
 ## Inverted Colors
@@ -196,25 +266,40 @@ The `invertedColors` prop automatically applies an inverted color scheme to chil
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  {(['primary', 'neutral', 'danger'] as const).map(color => <Card key={color} variant="solid" color={color} invertedColors sx={{
-    width: 260
-  }}>
-  <CardContent>
-    <Typography level="title-md" sx={{
-      textTransform: 'capitalize'
-    }}>{color}</Typography>
-    <Typography level="body-sm">
-      invertedColors를 사용하면 자식 컴포넌트가 자동으로 반전된 색상을 적용받습니다.
-    </Typography>
-  </CardContent>
-  <CardActions>
-    <Button variant="soft" size="sm">Action</Button>
-    <IconButton variant="soft" size="sm">
-      <OpenInNewIcon />
-    </IconButton>
-  </CardActions>
-</Card>)}
-</Stack>
+    {(["primary", "neutral", "danger"] as const).map((color) => (
+      <Card
+        key={color}
+        variant="solid"
+        color={color}
+        invertedColors
+        sx={{
+          width: 260
+        }}
+      >
+        <CardContent>
+          <Typography
+            level="title-md"
+            sx={{
+              textTransform: "capitalize"
+            }}
+          >
+            {color}
+          </Typography>
+          <Typography level="body-sm">
+            invertedColors를 사용하면 자식 컴포넌트가 자동으로 반전된 색상을 적용받습니다.
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button variant="soft" size="sm">
+            Action
+          </Button>
+          <IconButton variant="soft" size="sm">
+            <OpenInNewIcon />
+          </IconButton>
+        </CardActions>
+      </Card>
+    ))}
+  </Stack>
 ```
 
 ## Full Image Card
@@ -223,74 +308,100 @@ Use `CardOverflow` to fill the entire card with an image, then overlay `CardCont
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  <Card component="a" href="#" sx={{
-    width: 280,
-    height: 360,
-    boxShadow: 'lg',
-    textDecoration: 'none',
-    '&:hover img': {
-      transform: 'scale(1.05)'
-    },
-    transition: 'box-shadow 0.3s',
-    '&:hover': {
-      boxShadow: 'xl'
-    }
-  }} onClick={e => e.preventDefault()}>
-  <CardCover>
-    <img src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=560&h=720" loading="lazy" alt="Mountain Peak" style={{
-      transition: 'transform 0.4s'
-    }} />
-  </CardCover>
-  <CardCover sx={{
-    background: 'linear-gradient(to top, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0) 60%)'
-  }} />
-  <CardContent sx={{
-    justifyContent: 'flex-end'
-  }}>
-  <Typography level="title-lg" textColor="#fff">
-    Mountain Peak
-  </Typography>
-  <Typography level="body-sm" textColor="neutral.300">
-    Majestic mountain landscape
-  </Typography>
-</CardContent>
-</Card>
+    <Card
+      component="a"
+      href="#"
+      sx={{
+        width: 280,
+        height: 360,
+        boxShadow: "lg",
+        textDecoration: "none",
+        "&:hover img": {
+          transform: "scale(1.05)"
+        },
+        transition: "box-shadow 0.3s",
+        "&:hover": {
+          boxShadow: "xl"
+        }
+      }}
+      onClick={(e) => e.preventDefault()}
+    >
+      <CardCover>
+        <img
+          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=560&h=720"
+          loading="lazy"
+          alt="Mountain Peak"
+          style={{
+            transition: "transform 0.4s"
+          }}
+        />
+      </CardCover>
+      <CardCover
+        sx={{
+          background: "linear-gradient(to top, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0) 60%)"
+        }}
+      />
+      <CardContent
+        sx={{
+          justifyContent: "flex-end"
+        }}
+      >
+        <Typography level="title-lg" textColor="#fff">
+          Mountain Peak
+        </Typography>
+        <Typography level="body-sm" textColor="neutral.300">
+          Majestic mountain landscape
+        </Typography>
+      </CardContent>
+    </Card>
 
-<Card component="button" sx={{
-  width: 280,
-  height: 360,
-  border: 'none',
-  boxShadow: 'lg',
-  '&:hover img': {
-    transform: 'scale(1.05)'
-  },
-  '&:focus-visible': {
-    outline: '3px solid',
-    outlineColor: 'primary.500',
-    outlineOffset: 2
-  },
-  cursor: 'pointer'
-}}>
-<CardCover>
-  <img src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=560&h=720" loading="lazy" alt="Night view" style={{
-    transition: 'transform 0.4s'
-  }} />
-</CardCover>
-<CardCover sx={{
-  background: 'linear-gradient(to top, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 50%)'
-}} />
-<CardContent sx={{
-  justifyContent: 'flex-end'
-}}>
-<Typography level="title-lg" textColor="#fff">
-  Night View
-</Typography>
-<Typography level="body-sm" textColor="neutral.300">
-  A stunning cityscape
-</Typography>
-</CardContent>
-</Card>
-</Stack>
+    <Card
+      component="button"
+      sx={{
+        width: 280,
+        height: 360,
+        border: "none",
+        boxShadow: "lg",
+        "&:hover img": {
+          transform: "scale(1.05)"
+        },
+        "&:focus-visible": {
+          outline: "3px solid",
+          outlineColor: "primary.500",
+          outlineOffset: 2
+        },
+        cursor: "pointer"
+      }}
+    >
+      <CardCover>
+        <img
+          src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=560&h=720"
+          loading="lazy"
+          alt="Night view"
+          style={{
+            transition: "transform 0.4s"
+          }}
+        />
+      </CardCover>
+      <CardCover
+        sx={{
+          background: "linear-gradient(to top, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 50%)"
+        }}
+      />
+      <CardContent
+        sx={{
+          justifyContent: "flex-end"
+        }}
+      >
+        <Typography level="title-lg" textColor="#fff">
+          Night View
+        </Typography>
+        <Typography level="body-sm" textColor="neutral.300">
+          A stunning cityscape
+        </Typography>
+      </CardContent>
+    </Card>
+  </Stack>
 ```
 
 ## CardContent
@@ -312,50 +423,70 @@ Use `CardOverflow` to fill the entire card with an image, then overlay `CardCont
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  <Card sx={{
-    width: 320,
-    boxShadow: 'lg'
-  }}>
-  <CardCover>
-    <img src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=640" loading="lazy" alt="Night view" />
-  </CardCover>
-  <CardCover sx={{
-    background: 'linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 200px)'
-  }} />
-  <CardContent sx={{
-    justifyContent: 'flex-end'
-  }}>
-  <Typography level="title-lg" textColor="#fff">
-    Beautiful Night View
-  </Typography>
-  <Typography level="body-sm" textColor="neutral.300">
-    A stunning cityscape at night
-  </Typography>
-</CardContent>
-</Card>
+    <Card
+      sx={{
+        width: 320,
+        boxShadow: "lg"
+      }}
+    >
+      <CardCover>
+        <img
+          src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=640"
+          loading="lazy"
+          alt="Night view"
+        />
+      </CardCover>
+      <CardCover
+        sx={{
+          background: "linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 200px)"
+        }}
+      />
+      <CardContent
+        sx={{
+          justifyContent: "flex-end"
+        }}
+      >
+        <Typography level="title-lg" textColor="#fff">
+          Beautiful Night View
+        </Typography>
+        <Typography level="body-sm" textColor="neutral.300">
+          A stunning cityscape at night
+        </Typography>
+      </CardContent>
+    </Card>
 
-<Card sx={{
-  width: 320,
-  boxShadow: 'lg'
-}}>
-<CardCover>
-  <img src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=640" loading="lazy" alt="Mountain" />
-</CardCover>
-<CardCover sx={{
-  background: 'linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 200px)'
-}} />
-<CardContent sx={{
-  justifyContent: 'flex-end'
-}}>
-<Typography level="title-lg" textColor="#fff">
-  Mountain Peak
-</Typography>
-<Typography level="body-sm" textColor="neutral.300">
-  Majestic mountain landscape
-</Typography>
-</CardContent>
-</Card>
-</Stack>
+    <Card
+      sx={{
+        width: 320,
+        boxShadow: "lg"
+      }}
+    >
+      <CardCover>
+        <img
+          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=640"
+          loading="lazy"
+          alt="Mountain"
+        />
+      </CardCover>
+      <CardCover
+        sx={{
+          background: "linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 200px)"
+        }}
+      />
+      <CardContent
+        sx={{
+          justifyContent: "flex-end"
+        }}
+      >
+        <Typography level="title-lg" textColor="#fff">
+          Mountain Peak
+        </Typography>
+        <Typography level="body-sm" textColor="neutral.300">
+          Majestic mountain landscape
+        </Typography>
+      </CardContent>
+    </Card>
+  </Stack>
 ```
 
 ```tsx
@@ -375,53 +506,63 @@ Use `CardOverflow` to fill the entire card with an image, then overlay `CardCont
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  <Card sx={{
-    width: 320
-  }}>
-  <CardContent>
-    <Typography level="title-lg">게시물</Typography>
-    <Typography level="body-md">
-      이것은 액션 버튼이 있는 카드입니다. 하단에 다양한 액션을 수행할 수 있는 버튼들이 있습니다.
-    </Typography>
-  </CardContent>
-  <CardActions>
-    <Button variant="soft" size="sm">
-      좋아요
-    </Button>
-    <Button variant="soft" size="sm">
-      공유하기
-    </Button>
-    <Button variant="soft" size="sm">
-      더보기
-    </Button>
-  </CardActions>
-</Card>
+    <Card
+      sx={{
+        width: 320
+      }}
+    >
+      <CardContent>
+        <Typography level="title-lg">게시물</Typography>
+        <Typography level="body-md">
+          이것은 액션 버튼이 있는 카드입니다. 하단에 다양한 액션을 수행할 수 있는 버튼들이 있습니다.
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button variant="soft" size="sm">
+          좋아요
+        </Button>
+        <Button variant="soft" size="sm">
+          공유하기
+        </Button>
+        <Button variant="soft" size="sm">
+          더보기
+        </Button>
+      </CardActions>
+    </Card>
 
-<Card sx={{
-  width: 320
-}}>
-<CardContent>
-  <Typography level="title-lg">설정</Typography>
-  <Typography level="body-md">설정을 변경하시겠습니까? 이 작업은 되돌릴 수 없습니다.</Typography>
-</CardContent>
-<CardActions buttonFlex={1}>
-  <Button variant="outlined" color="neutral">
-    취소
-  </Button>
-  <Button variant="solid" color="primary">
-    확인
-  </Button>
-</CardActions>
-</Card>
-</Stack>
+    <Card
+      sx={{
+        width: 320
+      }}
+    >
+      <CardContent>
+        <Typography level="title-lg">설정</Typography>
+        <Typography level="body-md">
+          설정을 변경하시겠습니까? 이 작업은 되돌릴 수 없습니다.
+        </Typography>
+      </CardContent>
+      <CardActions buttonFlex={1}>
+        <Button variant="outlined" color="neutral">
+          취소
+        </Button>
+        <Button variant="solid" color="primary">
+          확인
+        </Button>
+      </CardActions>
+    </Card>
+  </Stack>
 ```
 
 ```tsx
 <Card>
   <CardContent>...</CardContent>
   <CardActions buttonFlex={1}>
-    <Button variant="outlined" color="neutral">Cancel</Button>
-    <Button variant="solid" color="primary">Confirm</Button>
+    <Button variant="outlined" color="neutral">
+      Cancel
+    </Button>
+    <Button variant="solid" color="primary">
+      Confirm
+    </Button>
   </CardActions>
 </Card>
 ```
@@ -432,113 +573,164 @@ Use `CardOverflow` to fill the entire card with an image, then overlay `CardCont
 
 ```tsx
 <Stack direction="row" spacing={3} alignItems="flex-start" flexWrap="wrap">
-  <Box>
-    <Typography level="body-sm" sx={{
-      mb: 2,
-      textAlign: 'center'
-    }}>
-    일반 Card (패딩 있음)
-  </Typography>
-  <Card variant="outlined" sx={{
-    width: 260
-  }}>
-  <CardContent sx={{
-    bgcolor: 'background.level1'
-  }}>
-  <AspectRatio ratio="16/9" sx={{
-    borderRadius: 'xs'
-  }}>
-  <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=520" loading="lazy" alt="Profile" />
-</AspectRatio>
-</CardContent>
-<CardContent>
-  <Typography level="title-md">John Doe</Typography>
-  <Typography level="body-sm">Software Engineer</Typography>
-</CardContent>
-<CardActions>
-  <Button size="sm" variant="soft">팔로우</Button>
-  <Button size="sm" variant="solid">메시지</Button>
-</CardActions>
-</Card>
-</Box>
-
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 2,
-    textAlign: 'center'
-  }}>
-  CardOverflow 사용 (패딩 무시)
-</Typography>
-<Card variant="outlined" sx={{
-  width: 260
-}}>
-<CardOverflow>
-  <AspectRatio ratio="16/9">
-    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=520" loading="lazy" alt="Profile" />
-  </AspectRatio>
-</CardOverflow>
-<CardContent>
-  <Typography level="title-md">John Doe</Typography>
-  <Typography level="body-sm">Software Engineer</Typography>
-</CardContent>
-<CardOverflow variant="soft" sx={{
-  bgcolor: 'background.level1'
-}}>
-<CardActions buttonFlex={1}>
-  <Button size="sm" variant="soft">팔로우</Button>
-  <Button size="sm" variant="solid">메시지</Button>
-</CardActions>
-</CardOverflow>
-</Card>
-</Box>
-
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 2,
-    textAlign: 'center'
-  }}>
-  다양한 CardOverflow 활용
-</Typography>
-<Card variant="outlined" sx={{
-  width: 260
-}}>
-<CardOverflow>
-  <AspectRatio ratio="3">
-    <Box sx={{
-      background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-    <Typography level="title-lg" textColor="white">
-      HEADER OVERFLOW
-    </Typography>
-  </Box>
-</AspectRatio>
-</CardOverflow>
-<CardContent sx={{
-  textAlign: 'center'
-}}>
-<Typography level="title-md">카드 제목</Typography>
-<Typography level="body-sm">
-  CardOverflow를 사용하면 카드의 패딩을 무시하고 전체 너비를 활용할 수 있습니다.
-</Typography>
-</CardContent>
-<CardOverflow variant="plain" sx={{
-  bgcolor: 'warning.50'
-}}>
-<Divider inset="context" />
-<CardContent sx={{
-  py: 1.5
-}}>
-<Typography level="body-xs" textAlign="center" color="warning">
-  이 영역도 CardOverflow로 만들어졌습니다
-</Typography>
-</CardContent>
-</CardOverflow>
-</Card>
-</Box>
-</Stack>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 2,
+          textAlign: "center"
+        }}
+      >
+        일반 Card (패딩 있음)
+      </Typography>
+      <Card
+        variant="outlined"
+        sx={{
+          width: 260
+        }}
+      >
+        <CardContent
+          sx={{
+            bgcolor: "background.level1"
+          }}
+        >
+          <AspectRatio
+            ratio="16/9"
+            sx={{
+              borderRadius: "xs"
+            }}
+          >
+            <img
+              src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=520"
+              loading="lazy"
+              alt="Profile"
+            />
+          </AspectRatio>
+        </CardContent>
+        <CardContent>
+          <Typography level="title-md">John Doe</Typography>
+          <Typography level="body-sm">Software Engineer</Typography>
+        </CardContent>
+        <CardActions>
+          <Button size="sm" variant="soft">
+            팔로우
+          </Button>
+          <Button size="sm" variant="solid">
+            메시지
+          </Button>
+        </CardActions>
+      </Card>
+    </Box>
+
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 2,
+          textAlign: "center"
+        }}
+      >
+        CardOverflow 사용 (패딩 무시)
+      </Typography>
+      <Card
+        variant="outlined"
+        sx={{
+          width: 260
+        }}
+      >
+        <CardOverflow>
+          <AspectRatio ratio="16/9">
+            <img
+              src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=520"
+              loading="lazy"
+              alt="Profile"
+            />
+          </AspectRatio>
+        </CardOverflow>
+        <CardContent>
+          <Typography level="title-md">John Doe</Typography>
+          <Typography level="body-sm">Software Engineer</Typography>
+        </CardContent>
+        <CardOverflow
+          variant="soft"
+          sx={{
+            bgcolor: "background.level1"
+          }}
+        >
+          <CardActions buttonFlex={1}>
+            <Button size="sm" variant="soft">
+              팔로우
+            </Button>
+            <Button size="sm" variant="solid">
+              메시지
+            </Button>
+          </CardActions>
+        </CardOverflow>
+      </Card>
+    </Box>
+
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 2,
+          textAlign: "center"
+        }}
+      >
+        다양한 CardOverflow 활용
+      </Typography>
+      <Card
+        variant="outlined"
+        sx={{
+          width: 260
+        }}
+      >
+        <CardOverflow>
+          <AspectRatio ratio="3">
+            <Box
+              sx={{
+                background: "linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <Typography level="title-lg" textColor="white">
+                HEADER OVERFLOW
+              </Typography>
+            </Box>
+          </AspectRatio>
+        </CardOverflow>
+        <CardContent
+          sx={{
+            textAlign: "center"
+          }}
+        >
+          <Typography level="title-md">카드 제목</Typography>
+          <Typography level="body-sm">
+            CardOverflow를 사용하면 카드의 패딩을 무시하고 전체 너비를 활용할 수 있습니다.
+          </Typography>
+        </CardContent>
+        <CardOverflow
+          variant="plain"
+          sx={{
+            bgcolor: "warning.50"
+          }}
+        >
+          <Divider inset="context" />
+          <CardContent
+            sx={{
+              py: 1.5
+            }}
+          >
+            <Typography level="body-xs" textAlign="center" color="warning">
+              이 영역도 CardOverflow로 만들어졌습니다
+            </Typography>
+          </CardContent>
+        </CardOverflow>
+      </Card>
+    </Box>
+  </Stack>
 ```
 
 ```tsx
@@ -558,36 +750,45 @@ Clickable cards with hover effects using CSS transitions.
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  <Card variant="outlined" sx={{
-    width: 320,
-    cursor: 'pointer',
-    transition: 'box-shadow 0.2s, border-color 0.2s',
-    '&:hover': {
-      boxShadow: 'md',
-      borderColor: 'primary.outlinedHoverBorder'
-    }
-  }}>
-  <CardContent>
-    <Typography level="title-md">클릭 가능한 카드</Typography>
-    <Typography level="body-sm">이 카드를 클릭하면 액션이 실행됩니다. 호버 효과도 확인해보세요.</Typography>
-  </CardContent>
-</Card>
+    <Card
+      variant="outlined"
+      sx={{
+        width: 320,
+        cursor: "pointer",
+        transition: "box-shadow 0.2s, border-color 0.2s",
+        "&:hover": {
+          boxShadow: "md",
+          borderColor: "primary.outlinedHoverBorder"
+        }
+      }}
+    >
+      <CardContent>
+        <Typography level="title-md">클릭 가능한 카드</Typography>
+        <Typography level="body-sm">
+          이 카드를 클릭하면 액션이 실행됩니다. 호버 효과도 확인해보세요.
+        </Typography>
+      </CardContent>
+    </Card>
 
-<Card variant="soft" color="primary" sx={{
-  width: 320,
-  cursor: 'pointer',
-  transition: 'transform 0.2s, box-shadow 0.2s',
-  '&:hover': {
-    transform: 'translateY(-2px)',
-    boxShadow: 'md'
-  }
-}}>
-<CardContent>
-  <Typography level="title-md">호버 애니메이션</Typography>
-  <Typography level="body-sm">마우스를 올리면 카드가 살짝 올라갑니다.</Typography>
-</CardContent>
-</Card>
-</Stack>
+    <Card
+      variant="soft"
+      color="primary"
+      sx={{
+        width: 320,
+        cursor: "pointer",
+        transition: "transform 0.2s, box-shadow 0.2s",
+        "&:hover": {
+          transform: "translateY(-2px)",
+          boxShadow: "md"
+        }
+      }}
+    >
+      <CardContent>
+        <Typography level="title-md">호버 애니메이션</Typography>
+        <Typography level="body-sm">마우스를 올리면 카드가 살짝 올라갑니다.</Typography>
+      </CardContent>
+    </Card>
+  </Stack>
 ```
 
 ## Media Cards
@@ -596,93 +797,145 @@ Product and food cards combining `CardOverflow`, `CardContent`, and `CardActions
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  <Card sx={{
-    width: 320,
-    boxShadow: 'lg'
-  }}>
-  <CardOverflow>
-    <AspectRatio sx={{
-      minWidth: 200
-    }}>
-    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=640" loading="lazy" alt="Shoes" />
-  </AspectRatio>
-</CardOverflow>
-<CardContent>
-  <Typography level="title-lg">운동화</Typography>
-  <Typography level="body-sm">편안하고 스타일리시한 운동화입니다.</Typography>
-  <Typography level="title-lg" color="primary" sx={{
-    mt: 0.5
-  }}>
-  ₩129,000
-</Typography>
-</CardContent>
-<CardOverflow>
-  <Divider inset="context" />
-  <CardContent orientation="horizontal" sx={{
-    justifyContent: 'space-between'
-  }}>
-  <Typography level="body-xs" color="neutral">무료배송</Typography>
-  <Typography level="body-xs" color="neutral">1,204 리뷰</Typography>
-</CardContent>
-</CardOverflow>
-</Card>
+    <Card
+      sx={{
+        width: 320,
+        boxShadow: "lg"
+      }}
+    >
+      <CardOverflow>
+        <AspectRatio
+          sx={{
+            minWidth: 200
+          }}
+        >
+          <img
+            src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=640"
+            loading="lazy"
+            alt="Shoes"
+          />
+        </AspectRatio>
+      </CardOverflow>
+      <CardContent>
+        <Typography level="title-lg">운동화</Typography>
+        <Typography level="body-sm">편안하고 스타일리시한 운동화입니다.</Typography>
+        <Typography
+          level="title-lg"
+          color="primary"
+          sx={{
+            mt: 0.5
+          }}
+        >
+          ₩129,000
+        </Typography>
+      </CardContent>
+      <CardOverflow>
+        <Divider inset="context" />
+        <CardContent
+          orientation="horizontal"
+          sx={{
+            justifyContent: "space-between"
+          }}
+        >
+          <Typography level="body-xs" color="neutral">
+            무료배송
+          </Typography>
+          <Typography level="body-xs" color="neutral">
+            1,204 리뷰
+          </Typography>
+        </CardContent>
+      </CardOverflow>
+    </Card>
 
-<Card sx={{
-  width: 320,
-  boxShadow: 'lg'
-}}>
-<CardOverflow>
-  <AspectRatio sx={{
-    minWidth: 200
-  }}>
-  <img src="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?auto=format&fit=crop&w=640" loading="lazy" alt="Breakfast" />
-</AspectRatio>
-<IconButton variant="solid" color="danger" size="md" sx={{
-  position: 'absolute',
-  zIndex: 2,
-  borderRadius: '50%',
-  right: '1rem',
-  bottom: 0,
-  transform: 'translateY(50%)'
-}}>
-<FavoriteIcon />
-</IconButton>
-</CardOverflow>
-<CardContent>
-  <Stack direction="row" justifyContent="space-between" alignItems="center">
-    <Typography level="title-lg">맛있는 아침식사</Typography>
-    <IconButton variant="plain" color="neutral" size="sm">
-      <MoreVertIcon />
-    </IconButton>
+    <Card
+      sx={{
+        width: 320,
+        boxShadow: "lg"
+      }}
+    >
+      <CardOverflow>
+        <AspectRatio
+          sx={{
+            minWidth: 200
+          }}
+        >
+          <img
+            src="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?auto=format&fit=crop&w=640"
+            loading="lazy"
+            alt="Breakfast"
+          />
+        </AspectRatio>
+        <IconButton
+          variant="solid"
+          color="danger"
+          size="md"
+          sx={{
+            position: "absolute",
+            zIndex: 2,
+            borderRadius: "50%",
+            right: "1rem",
+            bottom: 0,
+            transform: "translateY(50%)"
+          }}
+        >
+          <FavoriteIcon />
+        </IconButton>
+      </CardOverflow>
+      <CardContent>
+        <Stack direction="row" justifyContent="space-between" alignItems="center">
+          <Typography level="title-lg">맛있는 아침식사</Typography>
+          <IconButton variant="plain" color="neutral" size="sm">
+            <MoreVertIcon />
+          </IconButton>
+        </Stack>
+        <Typography level="body-xs" startDecorator={<LocationOnIcon />}>
+          서울, 한국
+        </Typography>
+        <Typography
+          level="body-sm"
+          sx={{
+            mt: 0.5
+          }}
+        >
+          건강하고 맛있는 아침 식사로 하루를 시작해보세요.
+        </Typography>
+      </CardContent>
+      <CardOverflow>
+        <Divider inset="context" />
+        <CardContent
+          orientation="horizontal"
+          sx={{
+            justifyContent: "space-between"
+          }}
+        >
+          <Typography
+            level="body-xs"
+            startDecorator={
+              <FavoriteIcon
+                sx={{
+                  fontSize: 16
+                }}
+              />
+            }
+          >
+            1.2K
+          </Typography>
+          <Typography
+            level="body-xs"
+            startDecorator={
+              <ShareIcon
+                sx={{
+                  fontSize: 16
+                }}
+              />
+            }
+          >
+            공유
+          </Typography>
+        </CardContent>
+      </CardOverflow>
+    </Card>
   </Stack>
-  <Typography level="body-xs" startDecorator={<LocationOnIcon />}>
-    서울, 한국
-  </Typography>
-  <Typography level="body-sm" sx={{
-    mt: 0.5
-  }}>
-  건강하고 맛있는 아침 식사로 하루를 시작해보세요.
-</Typography>
-</CardContent>
-<CardOverflow>
-  <Divider inset="context" />
-  <CardContent orientation="horizontal" sx={{
-    justifyContent: 'space-between'
-  }}>
-  <Typography level="body-xs" startDecorator={<FavoriteIcon sx={{
-    fontSize: 16
-  }} />}>
-  1.2K
-</Typography>
-<Typography level="body-xs" startDecorator={<ShareIcon sx={{
-  fontSize: 16
-}} />}>
-공유
-</Typography>
-</CardContent>
-</CardOverflow>
-</Card>
-</Stack>
 ```
 
 ## Complex Layout
@@ -690,227 +943,359 @@ Product and food cards combining `CardOverflow`, `CardContent`, and `CardActions
 A social-media-style card with avatar, text, inline image, and engagement buttons.
 
 ```tsx
-<Card sx={{
-  width: 400,
-  maxWidth: '100%'
-}}>
-<CardContent>
-  <Stack direction="row" spacing={1.5} alignItems="center" sx={{
-    mb: 1.5
-  }}>
-  <Avatar size="sm" src="https://i.pravatar.cc/40?img=1" />
-  <Box sx={{
-    flex: 1
-  }}>
-  <Typography level="title-sm">김철수</Typography>
-  <Typography level="body-xs" color="neutral">5분 전</Typography>
-</Box>
-<IconButton variant="plain" color="neutral" size="sm">
-  <MoreVertIcon />
-</IconButton>
-</Stack>
-<Typography level="body-md">
-  오늘 정말 좋은 하루였습니다! 새로운 프로젝트를 시작했는데 너무 흥미진진해요. 팀원들과의 협업도 잘 되고 있고,
-  앞으로가 기대됩니다.
-</Typography>
-</CardContent>
-<CardOverflow>
-  <AspectRatio ratio="2">
-    <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=800" loading="lazy" alt="Team work" />
-  </AspectRatio>
-</CardOverflow>
-<CardContent>
-  <Stack direction="row" spacing={1} alignItems="center">
-    <IconButton variant="plain" color="neutral" size="sm">
-      <FavoriteIcon />
-    </IconButton>
-    <Typography level="body-xs">12</Typography>
-    <IconButton variant="plain" color="neutral" size="sm">
-      <ShareIcon />
-    </IconButton>
-    <Typography level="body-xs" sx={{
-      ml: 'auto'
-    }} color="neutral">댓글 3개</Typography>
-  </Stack>
-</CardContent>
-</Card>
+<Card
+    sx={{
+      width: 400,
+      maxWidth: "100%"
+    }}
+  >
+    <CardContent>
+      <Stack
+        direction="row"
+        spacing={1.5}
+        alignItems="center"
+        sx={{
+          mb: 1.5
+        }}
+      >
+        <Avatar size="sm" src="https://i.pravatar.cc/40?img=1" />
+        <Box
+          sx={{
+            flex: 1
+          }}
+        >
+          <Typography level="title-sm">김철수</Typography>
+          <Typography level="body-xs" color="neutral">
+            5분 전
+          </Typography>
+        </Box>
+        <IconButton variant="plain" color="neutral" size="sm">
+          <MoreVertIcon />
+        </IconButton>
+      </Stack>
+      <Typography level="body-md">
+        오늘 정말 좋은 하루였습니다! 새로운 프로젝트를 시작했는데 너무 흥미진진해요. 팀원들과의
+        협업도 잘 되고 있고, 앞으로가 기대됩니다.
+      </Typography>
+    </CardContent>
+    <CardOverflow>
+      <AspectRatio ratio="2">
+        <img
+          src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=800"
+          loading="lazy"
+          alt="Team work"
+        />
+      </AspectRatio>
+    </CardOverflow>
+    <CardContent>
+      <Stack direction="row" spacing={1} alignItems="center">
+        <IconButton variant="plain" color="neutral" size="sm">
+          <FavoriteIcon />
+        </IconButton>
+        <Typography level="body-xs">12</Typography>
+        <IconButton variant="plain" color="neutral" size="sm">
+          <ShareIcon />
+        </IconButton>
+        <Typography
+          level="body-xs"
+          sx={{
+            ml: "auto"
+          }}
+          color="neutral"
+        >
+          댓글 3개
+        </Typography>
+      </Stack>
+    </CardContent>
+  </Card>
 ```
 
 ## Product Card
 
 ```tsx
-<Card sx={{
-  width: 320,
-  maxWidth: '100%',
-  boxShadow: 'lg'
-}}>
-<CardOverflow>
-  <AspectRatio sx={{
-    minWidth: 200
-  }}>
-  <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=640" loading="lazy" alt="Shoes" />
-</AspectRatio>
-</CardOverflow>
-<CardContent>
-  <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
-    <Typography level="title-lg">운동화</Typography>
-    <IconButton variant="plain" color="neutral" size="sm">
-      <BookmarkAddIcon />
-    </IconButton>
-  </Stack>
-  <Typography level="body-sm">편안하고 스타일리시한 운동화입니다.</Typography>
-  <Typography level="title-lg" color="primary" sx={{
-    mt: 1
-  }}>
-  ₩129,000
-</Typography>
-</CardContent>
-<CardOverflow>
-  <Button variant="solid" color="primary" size="lg" sx={{
-    borderRadius: 0
-  }}>
-  구매하기
-</Button>
-</CardOverflow>
-</Card>
+<Card
+    sx={{
+      width: 320,
+      maxWidth: "100%",
+      boxShadow: "lg"
+    }}
+  >
+    <CardOverflow>
+      <AspectRatio
+        sx={{
+          minWidth: 200
+        }}
+      >
+        <img
+          src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=640"
+          loading="lazy"
+          alt="Shoes"
+        />
+      </AspectRatio>
+    </CardOverflow>
+    <CardContent>
+      <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
+        <Typography level="title-lg">운동화</Typography>
+        <IconButton variant="plain" color="neutral" size="sm">
+          <BookmarkAddIcon />
+        </IconButton>
+      </Stack>
+      <Typography level="body-sm">편안하고 스타일리시한 운동화입니다.</Typography>
+      <Typography
+        level="title-lg"
+        color="primary"
+        sx={{
+          mt: 1
+        }}
+      >
+        ₩129,000
+      </Typography>
+    </CardContent>
+    <CardOverflow>
+      <Button
+        variant="solid"
+        color="primary"
+        size="lg"
+        sx={{
+          borderRadius: 0
+        }}
+      >
+        구매하기
+      </Button>
+    </CardOverflow>
+  </Card>
 ```
 
 ## Profile Card
 
 ```tsx
-<Card sx={{
-  width: 300,
-  maxWidth: '100%',
-  boxShadow: 'lg'
-}}>
-<CardOverflow>
-  <AspectRatio ratio="3">
-    <Box sx={{
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-    }} />
-  </AspectRatio>
-</CardOverflow>
-<CardContent sx={{
-  alignItems: 'center',
-  textAlign: 'center',
-  mt: -5
-}}>
-<Avatar size="lg" src="https://i.pravatar.cc/80?img=3" sx={{
-  '--Avatar-size': '64px',
-  border: '3px solid',
-  borderColor: 'background.surface'
-}} />
-<Typography level="title-lg" sx={{
-  mt: 1
-}}>Jane Smith</Typography>
-<Typography level="body-sm" color="neutral">Product Designer</Typography>
-<Stack direction="row" spacing={3} sx={{
-  mt: 1
-}}>
-<Box sx={{
-  textAlign: 'center'
-}}>
-<Typography level="title-sm">128</Typography>
-<Typography level="body-xs" color="neutral">게시물</Typography>
-</Box>
-<Box sx={{
-  textAlign: 'center'
-}}>
-<Typography level="title-sm">1.2K</Typography>
-<Typography level="body-xs" color="neutral">팔로워</Typography>
-</Box>
-<Box sx={{
-  textAlign: 'center'
-}}>
-<Typography level="title-sm">342</Typography>
-<Typography level="body-xs" color="neutral">팔로잉</Typography>
-</Box>
-</Stack>
-</CardContent>
-<CardActions buttonFlex={1}>
-  <Button size="sm" variant="soft">팔로우</Button>
-  <Button size="sm" variant="solid">메시지</Button>
-</CardActions>
-</Card>
+<Card
+    sx={{
+      width: 300,
+      maxWidth: "100%",
+      boxShadow: "lg"
+    }}
+  >
+    <CardOverflow>
+      <AspectRatio ratio="3">
+        <Box
+          sx={{
+            background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+          }}
+        />
+      </AspectRatio>
+    </CardOverflow>
+    <CardContent
+      sx={{
+        alignItems: "center",
+        textAlign: "center",
+        mt: -5
+      }}
+    >
+      <Avatar
+        size="lg"
+        src="https://i.pravatar.cc/80?img=3"
+        sx={{
+          "--Avatar-size": "64px",
+          border: "3px solid",
+          borderColor: "background.surface"
+        }}
+      />
+      <Typography
+        level="title-lg"
+        sx={{
+          mt: 1
+        }}
+      >
+        Jane Smith
+      </Typography>
+      <Typography level="body-sm" color="neutral">
+        Product Designer
+      </Typography>
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          mt: 1
+        }}
+      >
+        <Box
+          sx={{
+            textAlign: "center"
+          }}
+        >
+          <Typography level="title-sm">128</Typography>
+          <Typography level="body-xs" color="neutral">
+            게시물
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            textAlign: "center"
+          }}
+        >
+          <Typography level="title-sm">1.2K</Typography>
+          <Typography level="body-xs" color="neutral">
+            팔로워
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            textAlign: "center"
+          }}
+        >
+          <Typography level="title-sm">342</Typography>
+          <Typography level="body-xs" color="neutral">
+            팔로잉
+          </Typography>
+        </Box>
+      </Stack>
+    </CardContent>
+    <CardActions buttonFlex={1}>
+      <Button size="sm" variant="soft">
+        팔로우
+      </Button>
+      <Button size="sm" variant="solid">
+        메시지
+      </Button>
+    </CardActions>
+  </Card>
 ```
 
 ## News Card
 
 ```tsx
-<Card sx={{
-  width: 400,
-  maxWidth: '100%'
-}}>
-<CardOverflow>
-  <AspectRatio ratio="2">
-    <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=800" loading="lazy" alt="Tech news" />
-  </AspectRatio>
-</CardOverflow>
-<CardContent>
-  <Stack direction="row" spacing={1} sx={{
-    mb: 0.5
-  }}>
-  <Chip variant="soft" color="primary" size="sm">Tech</Chip>
-  <Typography level="body-xs" color="neutral" sx={{
-    alignSelf: 'center'
-  }}>2 hours ago</Typography>
-</Stack>
-<Typography level="title-md">
-  <Link overlay underline="none" color="neutral" href="#" onClick={e => e.preventDefault()}>
-    새로운 프로젝트 시작
-  </Link>
-</Typography>
-<Typography level="body-sm">
-  팀원들과 협업하며 새로운 기술을 도입한 프로젝트가 성공적으로 시작되었습니다.
-</Typography>
-</CardContent>
-</Card>
+<Card
+    sx={{
+      width: 400,
+      maxWidth: "100%"
+    }}
+  >
+    <CardOverflow>
+      <AspectRatio ratio="2">
+        <img
+          src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=800"
+          loading="lazy"
+          alt="Tech news"
+        />
+      </AspectRatio>
+    </CardOverflow>
+    <CardContent>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          mb: 0.5
+        }}
+      >
+        <Chip variant="soft" color="primary" size="sm">
+          Tech
+        </Chip>
+        <Typography
+          level="body-xs"
+          color="neutral"
+          sx={{
+            alignSelf: "center"
+          }}
+        >
+          2 hours ago
+        </Typography>
+      </Stack>
+      <Typography level="title-md">
+        <Link overlay underline="none" color="neutral" href="#" onClick={(e) => e.preventDefault()}>
+          새로운 프로젝트 시작
+        </Link>
+      </Typography>
+      <Typography level="body-sm">
+        팀원들과 협업하며 새로운 기술을 도입한 프로젝트가 성공적으로 시작되었습니다.
+      </Typography>
+    </CardContent>
+  </Card>
 ```
 
 ## Dashboard Widget
 
 ```tsx
 <Stack direction="row" spacing={2} flexWrap="wrap">
-  <Card variant="soft" color="primary" sx={{
-    width: 200
-  }}>
-  <CardContent>
-    <Typography level="body-sm">총 사용자</Typography>
-    <Typography level="h2">1,234</Typography>
-    <Chip variant="soft" color="success" size="sm" startDecorator={<TrendingUpIcon sx={{
-      fontSize: 16
-    }} />}>
-    +12%
-  </Chip>
-</CardContent>
-</Card>
-<Card variant="soft" color="success" sx={{
-  width: 200
-}}>
-<CardContent>
-  <Typography level="body-sm">완료된 주문</Typography>
-  <Typography level="h2">856</Typography>
-  <Chip variant="soft" color="success" size="sm" startDecorator={<TrendingUpIcon sx={{
-    fontSize: 16
-  }} />}>
-  +5%
-</Chip>
-</CardContent>
-</Card>
-<Card variant="soft" color="warning" sx={{
-  width: 200
-}}>
-<CardContent>
-  <Typography level="body-sm">대기 중</Typography>
-  <Typography level="h2">42</Typography>
-  <Chip variant="soft" color="danger" size="sm" startDecorator={<TrendingDownIcon sx={{
-    fontSize: 16
-  }} />}>
-  -3%
-</Chip>
-</CardContent>
-</Card>
-</Stack>
+    <Card
+      variant="soft"
+      color="primary"
+      sx={{
+        width: 200
+      }}
+    >
+      <CardContent>
+        <Typography level="body-sm">총 사용자</Typography>
+        <Typography level="h2">1,234</Typography>
+        <Chip
+          variant="soft"
+          color="success"
+          size="sm"
+          startDecorator={
+            <TrendingUpIcon
+              sx={{
+                fontSize: 16
+              }}
+            />
+          }
+        >
+          +12%
+        </Chip>
+      </CardContent>
+    </Card>
+    <Card
+      variant="soft"
+      color="success"
+      sx={{
+        width: 200
+      }}
+    >
+      <CardContent>
+        <Typography level="body-sm">완료된 주문</Typography>
+        <Typography level="h2">856</Typography>
+        <Chip
+          variant="soft"
+          color="success"
+          size="sm"
+          startDecorator={
+            <TrendingUpIcon
+              sx={{
+                fontSize: 16
+              }}
+            />
+          }
+        >
+          +5%
+        </Chip>
+      </CardContent>
+    </Card>
+    <Card
+      variant="soft"
+      color="warning"
+      sx={{
+        width: 200
+      }}
+    >
+      <CardContent>
+        <Typography level="body-sm">대기 중</Typography>
+        <Typography level="h2">42</Typography>
+        <Chip
+          variant="soft"
+          color="danger"
+          size="sm"
+          startDecorator={
+            <TrendingDownIcon
+              sx={{
+                fontSize: 16
+              }}
+            />
+          }
+        >
+          -3%
+        </Chip>
+      </CardContent>
+    </Card>
+  </Stack>
 ```
 
 ## Props and Customization