/* チェック・ラジオと文字。印を文字の1行目の真ん中にそろえる（文字が2行になっても印は1行目の横）。
   印はブラウザの標準の見た目を使わず、この部品が描く（label の ::before が箱・丸、::after がレ点・中の点。色は案件の色）。
   本物の input は印の上に透明で重ね、押す・Space・矢印・Tab・読み上げはブラウザのまま使う（JS 無し。React でもそのまま）。
   押せる所は文字まで含める（label で包む）。狭い画面（480px 以下）は1行の高さを 44px にする（台帳 C2-076）。 */
.hk-check { --hk-check-box: 18px; --hk-check-pad: 0px; --hk-check-top: calc(var(--hk-check-pad) + (var(--hk-fs-md) * var(--hk-lh) - var(--hk-check-box)) / 2);
  box-sizing: border-box; position: relative; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--hk-sp-3); align-items: start;
  padding-block: var(--hk-check-pad);
  font-family: var(--hk-font); font-size: var(--hk-fs-md); line-height: var(--hk-lh); color: var(--hk-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hk-check::before { content: ""; box-sizing: border-box; grid-column: 1; grid-row: 1; width: var(--hk-check-box); height: var(--hk-check-box);
  margin-top: calc(var(--hk-check-top) - var(--hk-check-pad));
  border: 1.5px solid var(--hk-line-ctl); border-radius: var(--hk-radius-sm); background: var(--hk-surface);
  transition: background-color var(--hk-t-fast) var(--hk-ease-out), border-color var(--hk-t-fast) var(--hk-ease-out); }
.hk-check::after { content: ""; position: absolute; left: 0; top: var(--hk-check-top); width: var(--hk-check-box); height: var(--hk-check-box); pointer-events: none;
  background: var(--hk-on-accent); opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.4l3 3 6-6.6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.4l3 3 6-6.6'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
/* 本物の input は印と同じ位置・大きさで透明に重ねる（見えるのは上の印だけ） */
.hk-check > input { position: absolute; left: 0; top: var(--hk-check-top); width: var(--hk-check-box); height: var(--hk-check-box); margin: 0; opacity: 0; cursor: pointer; }
.hk-check:hover::before { border-color: var(--hk-accent); }
.hk-check:has(> input:checked)::before, .hk-check:has(> input:indeterminate)::before { background: var(--hk-accent); border-color: var(--hk-accent); }
.hk-check:has(> input:checked)::after { opacity: 1; }
/* どちらとも言えない（indeterminate）は横線 */
.hk-check:has(> input[type="checkbox"]:indeterminate)::after { opacity: 1;
  -webkit-mask: linear-gradient(#000 0 0) center / 10px 2.2px no-repeat; mask: linear-gradient(#000 0 0) center / 10px 2.2px no-repeat; }
.hk-check:has(> input:focus-visible)::before { outline: var(--hk-focus); outline-offset: 2px; }
/* ラジオは丸と中の点 */
.hk-check:has(> input[type="radio"])::before { border-radius: 50%; }
.hk-check:has(> input[type="radio"])::after { -webkit-mask: radial-gradient(circle, #000 0 3.5px, transparent 4px); mask: radial-gradient(circle, #000 0 3.5px, transparent 4px); }
.hk-check:has(> input:disabled) { color: var(--hk-muted); cursor: default; }
.hk-check:has(> input:disabled) > input { cursor: default; }
.hk-check:has(> input:disabled)::before { background: var(--hk-surface-3); border-color: var(--hk-line-strong); }
.hk-check:has(> input:disabled:checked)::before { background: var(--hk-mark); border-color: var(--hk-mark); }
.hk-check-hint { grid-column: 2; font-size: var(--hk-fs-sm); line-height: var(--hk-lh-snug); color: var(--hk-muted); }
/* 縦に並べる・横に並べる */
.hk-checks { display: grid; gap: var(--hk-sp-3); }
.hk-checks[data-dir="row"] { display: flex; flex-wrap: wrap; gap: var(--hk-sp-3) var(--hk-sp-7); }
/* 狭い画面：1行の高さを 44px にし（文字の上下に余白）、並べた間は詰める（見た目の間隔は今とほぼ同じ） */
@media (max-width: 480px) {
  .hk-check { --hk-check-pad: calc((var(--hk-ctl-h) - var(--hk-fs-md) * var(--hk-lh)) / 2); min-height: var(--hk-ctl-h); }   /* --hk-ctl-h は狭い画面で 44px */
  .hk-checks { gap: 0; }
  .hk-checks[data-dir="row"] { gap: 0 var(--hk-sp-7); }
}