/* 表の列の表示と並びを選ぶパネル（中央・地方・南関で共通・2026-10-15）。col-picker.js と対で使う。
   見た目は「出走馬を絞り込む」画面（central-search）に合わせる: 白地・紺の文字・角丸 8px・選んだ四角は紺で塗る・下に解除と紺の確定 */
#colPickerPanel.cpk-panel{
  position:absolute;top:100%;right:0;z-index:100;margin-top:4px;
  width:320px;max-width:calc(100vw - 16px);max-height:min(72vh,600px);
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  background:#fff;color:#19224d;border:1px solid #dfe3ef;border-radius:8px;
  box-shadow:0 6px 20px rgba(25,34,77,.14);font-size:14px;text-align:left
}
#colPickerPanel .cpk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 8px;flex:none}
#colPickerPanel .cpk-top h2{margin:0;font-size:17px;font-weight:500;color:#19224d}
#colPickerPanel .cpk-close{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#f3f5fb;color:#19224d;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
#colPickerPanel .cpk-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 14px 12px;-webkit-overflow-scrolling:touch}
#colPickerPanel .cpk-sec{margin:14px 0 8px;font-size:12px;font-weight:700;color:#19224d}
#colPickerPanel .cpk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#colPickerPanel .cpk-tile{min-height:40px;padding:0 6px;border:1px solid #dfe3ef;border-radius:8px;background:#fff;color:#19224d;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#colPickerPanel .cpk-tile[aria-pressed="true"]{background:#293174;border-color:#293174;color:#fff}
#colPickerPanel .cpk-list{list-style:none;margin:0;padding:0;border-top:1px solid #e6e8f0}
#colPickerPanel .cpk-row{display:flex;align-items:center;gap:8px;min-height:48px;border-bottom:1px solid #e6e8f0;background:#fff;user-select:none;-webkit-user-select:none}
#colPickerPanel .cpk-row.is-hidden .cpk-check span{color:#6b7090}
#colPickerPanel .cpk-row.is-dragging{box-shadow:0 4px 14px rgba(25,34,77,.18);position:relative;z-index:1;border-color:transparent}
#colPickerPanel .cpk-check{flex:1;display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font-size:14px;min-width:0}
#colPickerPanel .cpk-check span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#colPickerPanel .cpk-check input{flex:none;width:20px;height:20px;margin:0;accent-color:#293174;cursor:pointer}
#colPickerPanel .cpk-handle{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:#9aa0b8;cursor:grab;touch-action:none;border-radius:8px}
#colPickerPanel .cpk-row.is-dragging .cpk-handle{cursor:grabbing;color:#293174}
#colPickerPanel .cpk-foot{flex:none;display:flex;gap:10px;padding:10px 14px;border-top:1px solid #e6e8f0;background:#fff}
#colPickerPanel .cpk-reset,#colPickerPanel .cpk-done{min-height:44px;border-radius:8px;font-size:14px;cursor:pointer}
#colPickerPanel .cpk-reset{flex:none;padding:0 18px;background:#f6f7fb;border:1px solid #e6e8f0;color:#6b7090}
#colPickerPanel .cpk-done{flex:1;background:#293174;border:1px solid #293174;color:#fff;font-weight:700}
#colPickerPanel .cpk-handle:focus-visible,#colPickerPanel .cpk-tile:focus-visible,#colPickerPanel button:focus-visible{outline:2px solid #293174;outline-offset:2px}

/* スマホ: 画面下からのシート（絞り込み画面と同じく下に大きな確定ボタン） */
.cpk-backdrop{position:fixed;inset:0;z-index:999;background:rgba(25,34,77,.32)}
@media (max-width:640px){
  #colPickerPanel.cpk-panel{position:fixed;top:auto;left:0;right:0;bottom:0;margin:0;width:auto;max-width:none;max-height:82vh;z-index:1000;
    border-radius:12px 12px 0 0;border-width:1px 0 0;box-shadow:0 -4px 20px rgba(25,34,77,.16)}
  #colPickerPanel .cpk-top{padding:14px 16px 6px}
  #colPickerPanel .cpk-body{padding:0 16px 12px}
  #colPickerPanel .cpk-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  #colPickerPanel .cpk-reset,#colPickerPanel .cpk-done{min-height:48px;font-size:15px}
  body.cpk-open{overflow:hidden}
}

/* 暗い表示 */
body.dark #colPickerPanel.cpk-panel{background:#22232e;color:#ececf0;border-color:#363748;box-shadow:0 6px 24px rgba(0,0,0,.5)}
body.dark #colPickerPanel .cpk-top h2,body.dark #colPickerPanel .cpk-sec{color:#ececf0}
body.dark #colPickerPanel .cpk-close{background:#2c2d3c;color:#ececf0}
body.dark #colPickerPanel .cpk-tile{background:#22232e;border-color:#3a3c52;color:#d6d8e8}
body.dark #colPickerPanel .cpk-tile[aria-pressed="true"]{background:#3b4597;border-color:#3b4597;color:#fff}
body.dark #colPickerPanel .cpk-list,body.dark #colPickerPanel .cpk-row,body.dark #colPickerPanel .cpk-foot{border-color:#363748}
body.dark #colPickerPanel .cpk-row,body.dark #colPickerPanel .cpk-foot{background:#22232e}
body.dark #colPickerPanel .cpk-row.is-hidden .cpk-check span{color:#8a8da6}
body.dark #colPickerPanel .cpk-check input{accent-color:#6a74c8}
body.dark #colPickerPanel .cpk-handle{color:#7a7e96}
body.dark #colPickerPanel .cpk-reset{background:#2a2b3a;border-color:#3a3c52;color:#a0a3bc}
body.dark #colPickerPanel .cpk-done{background:#3b4597;border-color:#3b4597}
body.dark .cpk-backdrop{background:rgba(0,0,0,.5)}