From 9c5a0d33231b15d5ae6a0ddf93ca436ef4ef3c06 Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 6 Jul 2026 18:51:05 +0900
Subject: [PATCH] Clarify native validation guidance

---
 index.html |  3 +++
 styles.css | 11 +++++++++++
 2 files changed, 14 insertions(+)

diff --git a/index.html b/index.html
index 2408ede..f5945a2 100644
--- a/index.html
+++ b/index.html
@@ -53,6 +53,9 @@ <h2 id="forms-title">Forms</h2>
           <p>브라우저 기본 validation과 CSS 상태 선택자로 입력 흐름을 만든다.</p>
         </div>
         <form class="component-card form-card" action="#forms">
+          <p class="form-note">
+            입력 전에는 helper text를 보여주고, 제출 또는 편집 후에는 브라우저 validation 상태에 맞춰 성공/오류 문구가 나타납니다.
+          </p>
           <label>
             실험 이름
             <input name="name" required minlength="3" placeholder="예: 선언형 메뉴" />
diff --git a/styles.css b/styles.css
index 6b7c0c8..a2cac18 100644
--- a/styles.css
+++ b/styles.css
@@ -213,6 +213,17 @@
     justify-self: start;
   }
 
+  .form-note {
+    margin: 0;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-frame);
+    padding: 12px 14px;
+    background: var(--color-surface-muted);
+    color: var(--color-muted);
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
   label {
     display: grid;
     gap: 8px;