From f062e38529d92086ad82991a4fa6716dcda0c393 Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 3 Aug 2026 12:50:13 +0900
Subject: [PATCH] =?UTF-8?q?[refactor]=20=EA=B5=AC=ED=98=84=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 변경 유형: refactor
- 주된 영역: index.html 외 1개
- 변경 의도: index.html 외 1개의 구조를 정리해 이후 기능 개선과 검증 비용을 낮춥니다.

Co-authored-by: Codex
---
 index.html | 10 +++++++---
 styles.css | 17 ++++++-----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index fea419e..6a77f68 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,11 @@
       </div>
     </header>
 
-    <dialog id="component-finder" class="command-dialog" aria-labelledby="component-finder-title">
+    <dialog
+      id="component-finder"
+      class="command-dialog floating-surface"
+      aria-labelledby="component-finder-title"
+    >
       <div class="command-dialog-content">
         <div class="command-dialog-heading">
           <div>
@@ -123,7 +127,7 @@ <h2 id="menus-title">Menus & Popovers</h2>
         <article class="component-card">
           <h3>Profile menu</h3>
           <button popovertarget="profile-menu">프로필 메뉴</button>
-          <div id="profile-menu" class="menu" popover>
+          <div id="profile-menu" class="menu floating-surface" popover>
             <a href="#forms">계정 설정</a>
             <a href="#dialogs">확인 dialog</a>
             <a href="#top">맨 위로</a>
@@ -174,7 +178,7 @@ <h2 id="forms-title">Forms</h2>
             <p id="email-valid" class="validation-message validation-message-valid">
               이메일 형식이 유효합니다.
             </p>
-            <div id="email-help" class="help-popover" popover>
+            <div id="email-help" class="help-popover floating-surface" popover>
               <strong>Native validation</strong>
               <p>required와 type=email만으로 빈 값과 이메일 형식 오류를 브라우저가 처리합니다.</p>
             </div>
diff --git a/styles.css b/styles.css
index a827194..ea31fc3 100644
--- a/styles.css
+++ b/styles.css
@@ -204,15 +204,18 @@
     background: var(--color-primary);
   }
 
-  .command-dialog {
-    width: min(560px, calc(100vw - 32px));
+  .floating-surface {
     border: 1px solid var(--color-border);
     border-radius: var(--radius-frame);
-    padding: clamp(20px, 4vw, 30px);
     background: var(--color-surface);
     box-shadow: var(--shadow-popover);
   }
 
+  .command-dialog {
+    width: min(560px, calc(100vw - 32px));
+    padding: clamp(20px, 4vw, 30px);
+  }
+
   .command-dialog::backdrop {
     background: rgb(15 23 42 / 42%);
     backdrop-filter: blur(3px);
@@ -277,11 +280,7 @@
 
   .menu {
     width: 220px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-frame);
     padding: 10px;
-    background: var(--color-surface);
-    box-shadow: var(--shadow-popover);
   }
 
   .menu a {
@@ -447,11 +446,7 @@
 
   .help-popover {
     width: min(280px, calc(100vw - 32px));
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-frame);
     padding: 14px 16px;
-    background: var(--color-surface);
-    box-shadow: var(--shadow-popover);
   }
 
   .help-popover p {