diff --git a/index.html b/index.html
index eb667b1..e2bda73 100644
--- a/index.html
+++ b/index.html
@@ -315,10 +315,15 @@ <h2 id="dialogs-title">Dialog & Accordion</h2>
         </article>
       </section>
 
-      <dialog id="confirm-dialog">
+      <dialog
+        id="confirm-dialog"
+        class="native-dialog floating-surface"
+        aria-labelledby="confirm-dialog-title"
+        aria-describedby="confirm-dialog-description"
+      >
         <form method="dialog">
-          <h2>네이티브 dialog</h2>
-          <p>이 예제는 commandfor 지원 브라우저에서 JavaScript 없이 열립니다.</p>
+          <h2 id="confirm-dialog-title">네이티브 dialog</h2>
+          <p id="confirm-dialog-description">이 예제는 commandfor 지원 브라우저에서 JavaScript 없이 열립니다.</p>
           <button value="close">닫기</button>
         </form>
       </dialog>
diff --git a/styles.css b/styles.css
index 7bfacd9..a1dcc0d 100644
--- a/styles.css
+++ b/styles.css
@@ -213,6 +213,7 @@
 
   .command-dialog {
     width: min(560px, calc(100vw - 32px));
+    max-width: none;
     padding: clamp(20px, 4vw, 30px);
   }
 
@@ -732,6 +733,37 @@
   dialog::backdrop {
     background: rgba(15, 23, 42, 0.45);
   }
+
+  .native-dialog {
+    width: min(420px, calc(100vw - 32px));
+    max-width: none;
+    padding: 0;
+  }
+
+  .native-dialog form {
+    display: grid;
+    gap: 16px;
+    padding: clamp(22px, 5vw, 30px);
+  }
+
+  .native-dialog h2,
+  .native-dialog p {
+    margin: 0;
+  }
+
+  .native-dialog h2 {
+    font-size: clamp(24px, 6vw, 30px);
+    line-height: 1.2;
+  }
+
+  .native-dialog p {
+    color: var(--color-muted);
+    line-height: 1.65;
+  }
+
+  .native-dialog button {
+    justify-self: start;
+  }
 }
 
 @media (max-width: 820px) {