7. 폼 입력 필드 세트
Design a form input system with all states:
**Text Input**:
- Height: 44px (touch-friendly)
- Padding: 12px horizontal
- Border: 1px gray-300, radius 8px
- Font: 16px (prevents iOS zoom)
- Placeholder: gray-400
**States**:
- Focus: border-brand-500, ring-2 ring-brand-500/20
- Error: border-red-500, ring-red-500/20, red helper text
- Success: border-green-500, green checkmark icon
- Disabled: gray-100 background, gray-400 text
**Label**:
- Position: Above input, 8px margin-bottom
- Font: 14px, font-weight 500, gray-700
- Required indicator: red asterisk
**Helper/Error Text**:
- Position: Below input, 4px margin-top
- Font: 13px, gray-500 (helper) or red-600 (error)
- Error icon: 16px, inline before text
**Variants**:
- With leading icon (search, email, etc.)
- With trailing action (password toggle, clear)
- Textarea: min-height 120px, resize-y
- Select dropdown with custom chevron
**Accessibility**:
- Proper label association (htmlFor)
- aria-describedby for helper text
- aria-invalid for error state
Tech: React + React Hook Form + Tailwind