/*.gbx-own-browser{border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;background:#fff}.gbx-own-controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-bottom:1rem}.gbx-own-fieldset{border:1px solid #eee;border-radius:.5rem;padding:.5rem .75rem}.gbx-own-fieldset legend{font-weight:600;font-size:.95rem;padding:0 .25rem}.gbx-own-fieldset label{display:block;margin:.25rem 0;cursor:pointer}.gbx-own-results .gbx-own-loading{padding:1rem;text-align:center;opacity:.8}.gbx-own-pagination{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.gbx-own-pager .disabled{opacity:.5;pointer-events:none}　*/

/* ルート色（必要なら好みで上書き） */
:root {
  --gbx-own-on:    #4144f7; /* 所持中（青） */
  --gbx-own-off:   #f81d1d; /* 追加前（赤） */
  --gbx-own-text:  #fff;
  --gbx-own-ring:  rgba(99,102,241,.35);
}

/* ボタン共通 */
.gbx-own-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .3em .6em;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 14px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
  color: var(--gbx-own-text);
  background: var(--gbx-own-off);
  cursor: pointer;
  transition: transform .08s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
  white-space: nowrap;
}
@media screen and (max-device-width: 799.98px){ .gbx-own-btn{font-size: 1em !important; margin-bottom: 10px;} }

/* OFF → ON の見た目切替（JSが aria-pressed を切り替えます） */
.gbx-own-btn[aria-pressed="true"] {
  background: var(--gbx-own-on);
}

/* ホバー/活性化 */
.gbx-own-btn:hover { transform: translateY(-1px); }
.gbx-own-btn:active { transform: translateY(0); }

/* フォーカスリング（キーボード操作の視認性） */
.gbx-own-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--gbx-own-ring);
}

/* 無効や処理中の見た目 */
.gbx-own-btn[disabled],
.gbx-own-btn[data-busy="1"] {
  opacity: .7;
  cursor: progress;
}

/* 先頭アイコン（OFFは＋、ONは✓） */
.gbx-own-btn::before {
  font-weight: 800;
  font-size: .9em;
  line-height: 1;
}
.gbx-own-btn[aria-pressed="true"]::before {
}

/* スピナー（トグル中） */
@keyframes gbxspin { to { transform: rotate(360deg); } }
.gbx-own-btn[data-busy="1"]::after {
  content: "";
  width: 1em; height: 1em;
  border-radius: 50%;
  border: .2em solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: gbxspin .8s linear infinite;
  position: absolute; right: .5em;
}

/* コンパクト版（任意で .is-compact クラスをボタンへ） */
.gbx-own-btn.is-compact { padding: .35em .6em; font-size: 13px; }
.gbx-own-btn.is-compact::after { right: .4em; }

/* カウントのピル（外付け表示用） */
.gbx-own-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9em; height: 1.9em;
  padding: 0 .5em; margin-left: .4em;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #334155; background: #e2e8f0; border-radius: 999px;
}

/* ダークモード配慮（必要なら） */
@media (prefers-color-scheme: dark) {
  :root { --gbx-own-ring: rgba(16,185,129,.35); }
  .gbx-own-count { color: #e5e7eb; background: #334155; }
}




/* ====== Select2風ベース（単一セレクト） ====== */
.gbx-s2 {
  position: relative;
  display: inline-block;
  width: 100%;               /* 任意: 固定にしたいときは 240px 等に */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.gbx-s2__select {
  appearance: none;          /* 各ブラウザのデフォを消す */
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  height: 36px;              /* Select2 のデフォに近い高さ */
  line-height: 36px;
  padding: 0 2.25rem 0 .75rem;  /* 右は▼分の余白 */
  font-size: 14px;
  color: #222;
  background: #fff;
  border: 1px solid #aaa;    /* Select2 default-ish */
  border-radius: 4px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* hover */
.gbx-s2__select:hover {
  border-color: #888;
}

/* focus（Select2っぽい青リング） */
.gbx-s2__select:focus {
  outline: none;
  border-color: #5897fb;
  box-shadow: 0 0 0 3px rgba(88, 151, 251, .25);
}

/* disabled */
.gbx-s2__select:disabled {
  background: #f5f6f7;
  color: #9aa3af;
  cursor: not-allowed;
}

/* ▼アイコン（右側）― ラッパーの ::after で描く */
.gbx-s2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .6rem;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  /* 下向きシェブロン（SVG）*/
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .85;
}

/* 小さめバリアント（任意で .gbx-s2--sm をラッパーに付ける） */
.gbx-s2.gbx-s2--sm .gbx-s2__select {
  height: 32px;
  line-height: 32px;
  font-size: 13px;
  padding-right: 2rem;
}
.gbx-s2.gbx-s2--sm::after { right: .5rem; }

/* 幅いっぱい使いたいフォーム段に合わせる時 */
.gbx-s2.gbx-s2--full { width: 100%; }

/* ダークモード軽微調整 */
@media (prefers-color-scheme: dark) {
  .gbx-s2__select { background: #0b0f14; color: #e5e7eb; border-color: #46505a; }
  .gbx-s2__select:hover { border-color: #5a6673; }
  .gbx-s2__select:focus { border-color: #6aa0ff; box-shadow: 0 0 0 3px rgba(106,160,255,.25); }
  .gbx-s2::after { filter: invert(75%); opacity: .9; }
}