/* 文字の欄（1行・数・複数行）。高さはボタン・選ぶ欄・日付の欄と同じ（並べた時に上下がそろう）。 */
.hk-input { box-sizing: border-box; display: inline-block; width: 100%; max-width: 100%; height: var(--hk-ctl-h); margin: 0; padding: 0 var(--hk-sp-4);
  border: var(--hk-bw) solid var(--hk-line-ctl); border-radius: var(--hk-radius); background: var(--hk-surface); color: var(--hk-text);
  font-family: var(--hk-font); font-size: var(--hk-fs-md); line-height: var(--hk-lh-tight); vertical-align: middle;
  transition: border-color var(--hk-t-fast) var(--hk-ease-out), box-shadow var(--hk-t-fast) var(--hk-ease-out); }
.hk-input::placeholder { color: var(--hk-muted); opacity: 1; }
.hk-input:hover { border-color: var(--hk-text-2); }
.hk-input:focus { outline: none; border-color: var(--hk-accent); box-shadow: 0 0 0 1px var(--hk-accent); }
.hk-input:disabled { background: var(--hk-surface-3); color: var(--hk-muted); border-color: var(--hk-line-strong); }
/* 編集できないが読める欄（readonly）：灰色の地。読み上げ・選んで写すことはできる。中身は読めるよう補足の文字の濃さ */
.hk-input[readonly] { background: var(--hk-surface-3); color: var(--hk-text-2); border-color: var(--hk-line-strong); cursor: default; }
.hk-input[readonly]:hover { border-color: var(--hk-line-strong); }
.hk-input[aria-invalid="true"] { border-color: var(--hk-danger-dot); }
.hk-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--hk-danger-dot); }
.hk-input-num { text-align: right; font-variant-numeric: tabular-nums; }
.hk-input-num:placeholder-shown { text-align: left; }   /* 未入力の時の日本語の例は左にそろえる */
textarea.hk-input { height: auto; min-height: calc(var(--hk-ctl-h) * 2.5); padding: var(--hk-sp-3) var(--hk-sp-4); line-height: var(--hk-lh); resize: vertical; }