From 1e1a4894a27b8daa4eb13fbf2b7fa00a67db20b6 Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 29 Jun 2026 17:25:19 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=ED=83=88=EC=B6=9C=20=EC=A7=84?=
 =?UTF-8?q?=ED=96=89=20=ED=9E=8C=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 변경 유형: feat
- 주된 영역: index.html 외 1개
- 변경 의도: index.html 외 1개에 작고 검증 가능한 사용자 기능 개선을 추가합니다.

Co-authored-by: Codex
---
 index.html | 35 +++++++++++++++++++++++++
 styles.css | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+)

diff --git a/index.html b/index.html
index 6741def..2408ede 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,41 @@ <h2 id="forms-title">Forms</h2>
             실험 이름
             <input name="name" required minlength="3" placeholder="예: 선언형 메뉴" />
           </label>
+          <div class="field-group">
+            <div class="field-heading">
+              <label for="review-email">검토자 이메일</label>
+              <button
+                type="button"
+                class="help-trigger"
+                popovertarget="email-help"
+                aria-label="이메일 검증 도움말"
+              >
+                ?
+              </button>
+            </div>
+            <input
+              id="review-email"
+              name="email"
+              type="email"
+              required
+              autocomplete="email"
+              placeholder="ui@example.com"
+              aria-describedby="email-hint email-invalid email-valid"
+            />
+            <p id="email-hint" class="field-hint">
+              제출 전 브라우저가 필수 입력과 이메일 형식을 검증합니다.
+            </p>
+            <p id="email-invalid" class="validation-message validation-message-invalid">
+              필수 이메일 형식을 확인하세요.
+            </p>
+            <p id="email-valid" class="validation-message validation-message-valid">
+              이메일 형식이 유효합니다.
+            </p>
+            <div id="email-help" class="help-popover" popover>
+              <strong>Native validation</strong>
+              <p>required와 type=email만으로 빈 값과 이메일 형식 오류를 브라우저가 처리합니다.</p>
+            </div>
+          </div>
           <label>
             컴포넌트 후보
             <input
diff --git a/styles.css b/styles.css
index 7a2a9d6..6b7c0c8 100644
--- a/styles.css
+++ b/styles.css
@@ -189,6 +189,18 @@
       left: anchor(left);
       margin: 8px 0 0;
     }
+
+    button[popovertarget='email-help'] {
+      anchor-name: --email-help-trigger;
+    }
+
+    #email-help:popover-open {
+      position-anchor: --email-help-trigger;
+      inset: auto;
+      top: anchor(bottom);
+      right: anchor(right);
+      margin: 8px 0 0;
+    }
   }
 
   .form-card,
@@ -215,6 +227,71 @@
     line-height: 1.6;
   }
 
+  .field-group {
+    display: grid;
+    gap: 8px;
+  }
+
+  .field-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .field-heading label {
+    display: block;
+  }
+
+  .help-trigger {
+    width: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    padding: 0;
+    border-radius: 50%;
+    font-weight: 900;
+    line-height: 1;
+  }
+
+  .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 {
+    margin: 8px 0 0;
+    color: var(--color-muted);
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  .validation-message {
+    display: none;
+    margin: -2px 0 0;
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 1.55;
+  }
+
+  .validation-message-invalid {
+    color: var(--color-invalid);
+  }
+
+  .validation-message-valid {
+    color: var(--color-valid);
+  }
+
+  @supports selector(.field-group:has(input:user-invalid)) {
+    .field-group:has(input:user-invalid) .validation-message-invalid,
+    .field-group:has(input:user-valid) .validation-message-valid {
+      display: block;
+    }
+  }
+
   input:not([type='radio']):not([type='checkbox']),
   select {
     min-height: 44px;