From 351d19e70dd2045d49e7364900ddbc1697557820 Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 3 Aug 2026 13:51:01 +0900
Subject: [PATCH] =?UTF-8?q?[style]=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A0=95=EB=8F=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 변경 유형: style
- 주된 영역: index.html 외 1개
- 변경 의도: index.html 외 1개의 시각 표현, 레이아웃, 접근성을 더 읽기 좋게 다듬습니다.

Co-authored-by: Codex
---
 index.html | 11 ++++++++---
 styles.css | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

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) {