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 {