feat: integrate latest HMDesign design system updates

src/components/button.stories.tsx

@@ -25,7 +25,7 @@ const rolesFor = (appearance: ButtonAppearance) =>
     appearance === "brand"
       ? ["primary", "secondary", "modify"].includes(role)
       : appearance === "solid"
-        ? role !== "destructive"
+        ? true
         : ["primary", "secondary", "destructive", "cancel"].includes(role),
   )
 
@@ -45,7 +45,7 @@ const meta = {
     variant: {
       control: "select",
       options: roles.map(([role]) => role),
-      description: "역할(Role): primary Green, secondary Brown, modify Orange, destructive Red, cancel Gray. destructive는 outline만, modify는 brand/solid만, cancel은 solid/outline만 지원합니다. docs/components/button.md §6.1 참조.",
+      description: "역할(Role): primary Green, secondary Brown, modify Orange, destructive Red, cancel Gray. destructive는 solid/outline, modify는 brand/solid만, cancel은 solid/outline만 지원합니다. docs/components/button.md §6.1 참조.",
     },
     appearance: {
       control: "inline-radio",
@@ -205,10 +205,10 @@ function LongLabelBoard() {
 function DestructiveBoard() {
   return (
     <div className={row}>
-      <Button variant="cancel" appearance="outline">
+      <Button variant="cancel" appearance="solid">
         Cancel
       </Button>
-      <Button variant="destructive" appearance="outline">
+      <Button variant="destructive" appearance="solid">
         Delete
       </Button>
     </div>
@@ -282,7 +282,7 @@ export const Destructive: Story = {
   tags: ["verification"],
   render: () => <DestructiveBoard />,
   parameters: {
-    docs: { description: { story: "검증 전용 삭제·취소 세트: Cancel은 Gray Outline, Delete는 Red Outline이며 appearance와 size를 통일합니다. Red Hover/Pressed 면은 Red 8%입니다." } },
+    docs: { description: { story: "검증 전용 삭제·취소 세트: Cancel은 Gray Solid, Delete는 Red Solid이며 appearance와 size를 통일합니다. Solid Hover/Pressed는 기존 Black 20% overlay이며 Red 토큰을 사용합니다." } },
   },
 }