/* ============================================================
   Radio / Check — 単一・複数選択
   マークは署名色 --brand で、満ちるように現れる。
   ラジオは再タップで解除しない（単一選択の保証）。
   ============================================================ */

.opt { display: flex; align-items: center; gap: 12px; padding: 11px 4px; font-size: 14px; color: var(--ink); cursor: pointer; }

.radio, .check {
  width: 22px; height: 22px; border: 1.5px solid var(--line); flex: none; position: relative;
  transition: border-color var(--dur-mid) var(--ease);
}
.radio { border-radius: 50%; }
.check { border-radius: 6px; }

.radio::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--brand); transform: scale(0); opacity: 0;
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease);
}
.check::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 6px; height: 11px; border: solid var(--brand); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); opacity: 0; transform-origin: center;
  transition: transform var(--dur-mid) var(--ease), opacity .3s var(--ease);
}

.opt[aria-checked="true"] .radio,
.opt[aria-checked="true"] .check { border-color: var(--brand); }
.opt[aria-checked="true"] .radio::after { transform: scale(1); opacity: 1; }
.opt[aria-checked="true"] .check::after { transform: rotate(45deg) scale(1); opacity: 1; }