/* ─────────────────────────────────────────────
   INPUT — SLUR Design System × slur-guidelines
   field(래퍼) + input_text(컨트롤). 오류/성공은
   data-state, 크기는 m_. 높이·패딩은 rem(텍스트와
   함께 확대), 공유 컨트롤 높이 2/2.5/3rem.
   ───────────────────────────────────────────── */

/* 필드 래퍼 — 라벨/도움말 포함 */
.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field .i_label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.field .i_help { font-size: var(--text-xs); color: var(--color-text-muted); }
.field[data-state="error"] .i_help { color: var(--color-danger); }
.field[data-state="success"] .i_help { color: var(--color-success); }
.field[data-state="disabled"] .i_label { color: var(--color-text-muted); }

/* 텍스트 컨트롤 — input/textarea/select 공통 */
.input_text { height: 2.5rem; padding: 0 var(--space-12); border: 1px solid var(--color-border-default); border-radius: var(--radius-8); background: var(--color-surface-card); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.input_text:hover { border-color: var(--color-border-strong); }
.input_text:focus { border-color: var(--color-border-focus); box-shadow: var(--color-focus-ring); }
.input_text::placeholder { color: var(--color-text-muted); opacity: 1; }
.input_text:disabled { border-color: var(--color-border-subtle); background: var(--color-surface-sunken); color: var(--color-text-muted); cursor: not-allowed; }
.input_text:read-only { border-color: var(--color-border-subtle); background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.input_text[data-state="error"] { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-soft); }
.input_text[data-state="success"] { border-color: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-soft); }

/* 크기 변형 */
.input_text.m_small { height: 2rem; padding: 0 var(--space-8); font-size: var(--text-xs); }
.input_text.m_large { height: 3rem; padding: 0 var(--space-16); font-size: var(--text-base); }

/* 텍스트에리어 변형 */
.input_text.m_textarea { height: auto; padding: var(--space-8) var(--space-12); resize: vertical; }

/* 아이콘 포함 래퍼 */
.input_wrap { display: flex; width: 100%; align-items: center; position: relative; }
.input_wrap .input_text { width: 100%; }
.input_wrap .i_icon { display: inline-flex; color: var(--color-text-muted); position: absolute; left: var(--space-12); pointer-events: none; }
.input_wrap .i_icon svg { width: 1.125em; height: 1.125em; }
.input_wrap .input_text.m_icon_left { padding-left: 2.25rem; }

/* 오른쪽 액션 — 비밀번호 보기·지우기 같은 버튼을 컨트롤 안에. 버튼은 i_action(아이콘 전용, aria-label·aria-pressed 필수) */
.input_wrap .input_text.m_icon_right { padding-right: 2.5rem; }
.input_wrap .i_action { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; border-radius: var(--radius-4); background: transparent; color: var(--color-text-muted); position: absolute; right: var(--space-4); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
.input_wrap .i_action:hover { color: var(--color-text-primary); }
.input_wrap .i_action svg { width: 1.125em; height: 1.125em; }