/* 選ぶ欄。OS の標準のメニューは使わず、全部この1つにそろえる（依頼の元：Rootline・リビンで標準と独自が混ざっていた）。
   元の <select> は値の持ち主として残し、見えなくする（select.js が隣にボタンを置き、押すと一覧を開く）。
   <select> を別の要素へ移さないので、React が描いた select にも使える。 */
select[data-hk-on] { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%) !important; overflow: hidden !important; }
.hk-select { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--hk-sp-3); max-width: 100%; min-width: 0; width: var(--hk-select-w, auto);
  height: var(--hk-ctl-h); margin: 0; padding: 0 var(--hk-sp-4); vertical-align: middle; text-align: left; cursor: pointer;
  border: var(--hk-bw) solid var(--hk-sel-bd, var(--hk-line-ctl)); border-radius: var(--hk-radius); background: var(--hk-sel-bg, var(--hk-surface)); color: var(--hk-sel-fg, var(--hk-text));
  font-family: var(--hk-font); font-size: var(--hk-fs-sm); font-weight: var(--hk-sel-fw, var(--hk-fw-md)); line-height: var(--hk-lh-tight); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--hk-t-fast) var(--hk-ease-out), border-color var(--hk-t-fast) var(--hk-ease-out); }
.hk-select:hover { background: var(--hk-sel-bg-hover, var(--hk-surface-3)); border-color: var(--hk-sel-bd-hover, var(--hk-text-2)); }
.hk-select:focus-visible { outline: var(--hk-focus); outline-offset: 2px; }
.hk-select[aria-expanded="true"] { border-color: var(--hk-accent); box-shadow: 0 0 0 1px var(--hk-accent); }
.hk-select:disabled { cursor: default; color: var(--hk-muted); background: var(--hk-surface-3); border-color: var(--hk-line-strong); }
.hk-select-v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-select-chev { flex: none; width: 7px; height: 7px; margin-right: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform var(--hk-t-fast) var(--hk-ease-out); }
.hk-select[aria-expanded="true"] .hk-select-chev { transform: translateY(1px) rotate(225deg); }
.hk-select[data-size="sm"] { height: var(--hk-ctl-h-sm); padding: 0 var(--hk-sp-3); }
.hk-select[data-full] { display: flex; width: 100%; }
/* 状態を選ぶ欄（表の「状態」の列など）。札と同じ色の組 */
.hk-select[data-tone="accent"] { --hk-sel-bd: var(--hk-accent); --hk-sel-bd-hover: var(--hk-accent); --hk-sel-fg: var(--hk-accent-strong); --hk-sel-bg: var(--hk-accent-soft); --hk-sel-bg-hover: var(--hk-accent-soft); --hk-sel-fw: var(--hk-fw-bold); }
.hk-select[data-tone="ok"] { --hk-sel-bd: var(--hk-ok-dot); --hk-sel-bd-hover: var(--hk-ok-dot); --hk-sel-fg: var(--hk-ok); --hk-sel-bg: var(--hk-ok-soft); --hk-sel-bg-hover: var(--hk-ok-soft); --hk-sel-fw: var(--hk-fw-bold); }
.hk-select[data-tone="warn"] { --hk-sel-bd: var(--hk-warn-dot); --hk-sel-bd-hover: var(--hk-warn-dot); --hk-sel-fg: var(--hk-warn); --hk-sel-bg: var(--hk-warn-soft); --hk-sel-bg-hover: var(--hk-warn-soft); --hk-sel-fw: var(--hk-fw-bold); }
.hk-select[data-tone="danger"] { --hk-sel-bd: var(--hk-danger-dot); --hk-sel-bd-hover: var(--hk-danger-dot); --hk-sel-fg: var(--hk-danger); --hk-sel-bg: var(--hk-danger-soft); --hk-sel-bg-hover: var(--hk-danger-soft); --hk-sel-fw: var(--hk-fw-bold); }

/* 開いた一覧。画面に固定して重ねる（周りを押し下げない・スクロールの枠で切れない） */
.hk-select-list { box-sizing: border-box; position: fixed; z-index: 1300; margin: 0; padding: var(--hk-sp-1); overflow-y: auto; overscroll-behavior: contain;
  background: var(--hk-surface); color: var(--hk-text); border: var(--hk-bw) solid var(--hk-line-strong); border-radius: var(--hk-radius-lg); box-shadow: var(--hk-shadow-2);
  font-family: var(--hk-font); font-size: var(--hk-fs-md); }
.hk-select-list:focus { outline: none; }
.hk-select-list [role="option"] { display: flex; align-items: center; gap: var(--hk-sp-3); min-height: var(--hk-ctl-h); padding: var(--hk-sp-2) var(--hk-sp-4); border-radius: var(--hk-radius); cursor: pointer; line-height: 1.4; }
.hk-select-list .hk-ck { flex: none; width: 14px; color: var(--hk-accent); font-weight: var(--hk-fw-heavy); }
.hk-select-list [role="option"].hk-act { background: var(--hk-accent-soft); box-shadow: inset 0 0 0 2px var(--hk-accent); }
.hk-select-list [role="option"][aria-disabled="true"] { color: var(--hk-mark); cursor: default; }
.hk-select-list .hk-grp { padding: var(--hk-sp-2) var(--hk-sp-4) 2px; font-size: var(--hk-fs-xs); font-weight: var(--hk-fw-bold); color: var(--hk-muted); }