/* ============================================================
   Text Field — 入力
   フォーカス時の枠は署名色 --brand。手紙系は明朝で組む。
   ============================================================ */

.field .lab { font-size: 12px; color: var(--ash); letter-spacing: .1em; margin-bottom: 8px; display: block; }

.tf {
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface);
  min-height: var(--tap-main); padding: 12px 14px;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.tf::placeholder { color: var(--ash); opacity: .7; }
.tf:focus { outline: none; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

.tf.area  { min-height: 72px; resize: vertical; line-height: 1.9; }
.tf.serif { font-family: var(--font-serif); }
.tf.err   { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.tf:disabled { opacity: .5; cursor: not-allowed; background: var(--paper); }

.tf-msg { font-size: 11.5px; margin-top: 6px; color: var(--ash); }
.tf-msg.err { color: var(--err); }
.tf-count { font-size: 11.5px; color: var(--ash); text-align: right; margin-top: 4px; font-feature-settings: "tnum"; }