/* 欄のまとまり：欄の名前（頭側に必須・任意の札、右に i の印）・欄・補足・誤りの文。名前は太く、入れた中身はふつうの太さで見分ける。縦に並べる。横に並べる時は .hk-fields を使う。 */
.hk-field { box-sizing: border-box; display: grid; gap: var(--hk-sp-2); min-width: 0; font-family: var(--hk-font); }
.hk-field-label { display: block; word-break: auto-phrase; font-size: var(--hk-fs-sm); font-weight: var(--hk-fw-bold); color: var(--hk-text-2); line-height: var(--hk-lh-snug); }
/* 必須・任意は札（tag）で、欄の名前の頭側に置く。間隔は全部の欄で同じ */
.hk-field-label > .hk-tag:first-child { margin: -2px var(--hk-sp-2) 0 0; }
.hk-field-hint { margin: 0; font-size: var(--hk-fs-sm); color: var(--hk-muted); line-height: var(--hk-lh-snug); }
.hk-field-error { margin: 0; font-size: var(--hk-fs-sm); color: var(--hk-danger); font-weight: var(--hk-fw-md); line-height: var(--hk-lh-snug); }
/* 欄を横に並べる（狭い幅では縦に落ちる）。4つの段（名前・欄・補足・誤り）を並んだ欄の間で共有し、
   名前が2行になった欄や補足の無い欄があっても、欄の上端は行ごとにそろう */
.hk-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hk-field-min, 200px)), 1fr)); column-gap: var(--hk-sp-6); row-gap: 0; align-items: start; }
.hk-fields > .hk-field { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--hk-sp-2); margin-bottom: var(--hk-sp-6); }
.hk-fields > .hk-field > .hk-field-label { grid-row: 1; align-self: end; }
.hk-fields > .hk-field > :not(.hk-field-label, .hk-field-hint, .hk-field-error) { grid-row: 2; }
.hk-fields > .hk-field > .hk-field-hint { grid-row: 3; }
.hk-fields > .hk-field > .hk-field-error { grid-row: 4; }