[refactor] 구현 구조 정리

index.html

@@ -80,7 +80,7 @@ <h1>브라우저가 이미 가진 UI 계약을 다시 씁니다.</h1>
           <h2 id="interaction-map-title">브라우저가 넘겨주는 상호작용</h2>
           <p>각 예제가 제공하는 초점 이동과 닫기 동작을 같은 밀도로 비교합니다.</p>
         </div>
-        <article class="component-card matrix-card">
+        <article class="component-card component-flow matrix-card">
           <table class="interaction-matrix">
             <caption>주요 native UI 동작</caption>
             <thead>
@@ -141,7 +141,7 @@ <h3>Profile menu</h3>
           <h2 id="forms-title">Forms</h2>
           <p>브라우저 기본 validation과 CSS 상태 선택자로 입력 흐름을 만든다.</p>
         </div>
-        <form class="component-card form-card" action="#forms">
+        <form class="component-card component-flow form-card" action="#forms">
           <p class="form-note">
             입력 전에는 helper text를 보여주고, 제출 또는 편집 후에는 브라우저 validation 상태에 맞춰 성공/오류 문구가 나타납니다.
           </p>
@@ -219,7 +219,7 @@ <h2 id="forms-title">Forms</h2>
           <h2 id="files-title">File Input</h2>
           <p>운영체제 파일 선택기와 브라우저의 선택 상태를 별도 업로드 코드 없이 사용합니다.</p>
         </div>
-        <article class="component-card file-card">
+        <article class="component-card component-flow file-card">
           <div>
             <p class="component-kicker">local source review</p>
             <h3>예제 파일 선택</h3>
@@ -257,7 +257,7 @@ <h3>예제 파일 선택</h3>
           <h2 id="selectors-title">Selectors</h2>
           <p>fieldset, radio, checkbox, color/date picker로 선택 흐름을 구성합니다.</p>
         </div>
-        <article class="component-card stack choice-card">
+        <article class="component-card component-flow">
           <h3>검토 옵션</h3>
           <fieldset>
             <legend>검증 범위</legend>
@@ -302,7 +302,7 @@ <h3>검토 옵션</h3>
           <h2 id="dialogs-title">Dialog & Accordion</h2>
           <p>지원 브라우저에서는 commandfor로 dialog를 선언적으로 열 수 있습니다.</p>
         </div>
-        <article class="component-card stack">
+        <article class="component-card component-flow">
           <button commandfor="confirm-dialog" command="show-modal">확인 dialog 열기</button>
           <details name="kit" open>
             <summary>접근성</summary>

styles.css

@@ -162,6 +162,13 @@
     box-shadow: var(--shadow-card);
   }
 
+  .component-flow {
+    --component-flow-gap: 14px;
+
+    display: grid;
+    gap: var(--component-flow-gap);
+  }
+
   .component-card h3,
   dialog h2 {
     margin: 0 0 14px;
@@ -320,15 +327,8 @@
     }
   }
 
-  .form-card,
-  .stack {
-    display: grid;
-    gap: 14px;
-  }
-
   .file-card {
-    display: grid;
-    gap: 18px;
+    --component-flow-gap: 18px;
   }
 
   .file-card h3 {
@@ -412,8 +412,7 @@
   }
 
   .matrix-card {
-    display: grid;
-    gap: 16px;
+    --component-flow-gap: 16px;
   }
 
   .interaction-matrix {