[feat] 파일 입력 예시 추가

index.html

@@ -22,6 +22,7 @@
         <nav aria-label="컴포넌트">
           <a href="#menus">Menus</a>
           <a href="#forms">Forms</a>
+          <a href="#files">Files</a>
           <a href="#selectors">Selectors</a>
           <a href="#dialogs">Dialogs</a>
         </nav>
@@ -213,6 +214,44 @@ <h2 id="forms-title">Forms</h2>
         </form>
       </section>
 
+      <section id="files" class="component-grid" aria-labelledby="files-title">
+        <div class="section-copy">
+          <h2 id="files-title">File Input</h2>
+          <p>운영체제 파일 선택기와 브라우저의 선택 상태를 별도 업로드 코드 없이 사용합니다.</p>
+        </div>
+        <article class="component-card file-card">
+          <div>
+            <p class="component-kicker">local source review</p>
+            <h3>예제 파일 선택</h3>
+          </div>
+          <label class="file-field" for="source-files">
+            HTML·CSS 파일
+            <input
+              id="source-files"
+              class="file-input"
+              name="source-files"
+              type="file"
+              accept=".html,.css,text/html,text/css"
+              multiple
+              aria-describedby="source-file-hint source-file-context"
+            />
+          </label>
+          <p id="source-file-hint" class="field-hint">
+            HTML과 CSS 파일을 여러 개 선택할 수 있습니다. 선택한 파일은 이 데모 밖으로 전송되지 않습니다.
+          </p>
+          <dl id="source-file-context" class="file-context">
+            <div>
+              <dt>선택 상태</dt>
+              <dd>브라우저가 파일 이름과 선택 개수를 표시합니다.</dd>
+            </div>
+            <div>
+              <dt>키보드</dt>
+              <dd>Tab으로 이동한 뒤 Enter 또는 Space로 파일 선택기를 엽니다.</dd>
+            </div>
+          </dl>
+        </article>
+      </section>
+
       <section id="selectors" class="component-grid" aria-labelledby="selectors-title">
         <div class="section-copy">
           <h2 id="selectors-title">Selectors</h2>

styles.css

@@ -325,6 +325,91 @@
     gap: 14px;
   }
 
+  .file-card {
+    display: grid;
+    gap: 18px;
+  }
+
+  .file-card h3 {
+    margin: 0;
+  }
+
+  .component-kicker {
+    margin: 0 0 6px;
+    color: var(--color-focus);
+    font-size: 11px;
+    font-weight: 900;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .file-field {
+    gap: 10px;
+  }
+
+  .file-input {
+    width: 100%;
+    min-height: 60px;
+    border-style: dashed;
+    padding: 8px;
+    color: var(--color-muted);
+    background: var(--color-surface-muted);
+    cursor: pointer;
+    transition:
+      border-color var(--motion-standard),
+      background var(--motion-standard);
+  }
+
+  .file-input:hover {
+    border-color: var(--color-focus);
+    background: var(--color-surface-selected);
+  }
+
+  .file-input::file-selector-button {
+    min-height: 42px;
+    margin-right: 12px;
+    border: 0;
+    border-radius: 6px;
+    padding: 0 14px;
+    color: var(--color-primary-ink);
+    background: var(--color-primary);
+    font: inherit;
+    font-weight: 800;
+    cursor: pointer;
+    transition: background var(--motion-standard);
+  }
+
+  .file-input:hover::file-selector-button {
+    background: var(--color-primary-hover);
+  }
+
+  .file-context {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    margin: 0;
+  }
+
+  .file-context div {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-frame);
+    padding: 12px;
+    background: var(--color-surface-muted);
+  }
+
+  .file-context dt {
+    margin-bottom: 4px;
+    font-size: 13px;
+    font-weight: 900;
+  }
+
+  .file-context dd {
+    margin: 0;
+    color: var(--color-muted);
+    font-size: 13px;
+    line-height: 1.55;
+  }
+
   .matrix-card {
     display: grid;
     gap: 16px;
@@ -479,7 +564,7 @@
     }
   }
 
-  input:not([type='radio']):not([type='checkbox']),
+  input:not([type='radio']):not([type='checkbox']):not([type='file']),
   select {
     min-height: 44px;
     border: 1px solid var(--color-border-strong);
@@ -694,4 +779,8 @@
   .command-links {
     grid-template-columns: 1fr;
   }
+
+  .file-context {
+    grid-template-columns: 1fr;
+  }
 }