.gbx-alert{padding:8px 10px;border-radius:8px;margin-bottom:12px;font-size:14px}
.gbx-alert.success{background:#ecfdf5;border:1px solid #a7f3d0}
.gbx-alert.warn{background:#fff7ed;border:1px solid #fed7aa}

.gbx-row{margin:12px 0}
.gbx-label{display:block;font-weight:600;margin-bottom:6px}
.gbx-input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px}
.gbx-input--qty{width:64px;text-align:center}

.gbx-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gbx-meta-hint{margin-top:8px;display:flex;gap:16px;color:#6b7280;font-size:13px;align-items:flex-end}

.gbx-zone{margin:18px 0;padding:12px;border:1px solid #f3f4f6;border-radius:10px}
.gbx-zone__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.gbx-zone__title{margin:0;font-size:16px}
.gbx-zone__meta{display:flex;gap:10px;color:#6b7280;font-size:12px}

.gbx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gbx-item{display:grid;grid-template-columns:24px 60px 1fr auto auto;gap:10px;align-items:center;padding:8px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa}
.gbx-drag{cursor:grab;color:#9ca3af}
.gbx-thumb__ph{display:inline-block;width:60px;height:60px;background:#e5e7eb;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#6b7280}
.gbx-thumb-img{width:60px;height:60px;object-fit:cover;border-radius:6px}

.gbx-title{font-size:14px}
.gbx-qty{display:flex;align-items:center;gap:6px}
.gbx-btn{padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer}
.gbx-btn--qty{min-width:36px}
.gbx-btn--del{color:#ef4444;border-color:#fecaca}

.gbx-actions{margin-top:16px;display:flex;gap:10px}
.gbx-btn--primary{background:#111827;color:#fff;border-color:#111827}
.gbx-btn--danger{background:#ef4444;color:#fff;border-color:#ef4444}

@media (max-width:800px){
  .gbx-item{grid-template-columns:20px 48px 1fr auto auto}
}


@media (max-width:800px){
  .gbxdeck-card{grid-template-columns:56px 1fr}
  .gbxdeck-thumb__img,.gbxdeck-thumb__ph{width:56px;height:56px}
}




/* GBX Deck UI (conflict-safe, gbxdeck-*) */
:root {
  --gbxdeck-bg:#fff; --gbxdeck-fg:#111; --gbxdeck-muted:#6b7280; --gbxdeck-border:#e5e7eb; --gbxdeck-shadow:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
  --gbxdeck-primary:#2563eb; --gbxdeck-primary-fg:#fff; --gbxdeck-primary-hover:#1e40af;
  --gbxdeck-danger:#dc2626; --gbxdeck-danger-fg:#fff; --gbxdeck-danger-hover:#b91c1c;
  --gbxdeck-acc:#10b981; --gbxdeck-acc-fg:#fff; --gbxdeck-acc-hover:#059669;
  --gbxdeck-radius:12px; --gbxdeck-radius-pill:999px;
  --gbxdeck-pad-sm:.5rem; --gbxdeck-font-sm:.875rem; --gbxdeck-font:1rem; --gbxdeck-font-lg:1.125rem; --gbxdeck-trans:.18s cubic-bezier(.22,.61,.36,1);
}
@media(prefers-color-scheme:dark){
  :root{
    --gbxdeck-bg:#0b0f14; --gbxdeck-fg:#e5e7eb; --gbxdeck-muted:#9ca3af; --gbxdeck-border:#1f2937;
    --gbxdeck-primary:#3b82f6; --gbxdeck-primary-hover:#1d4ed8; --gbxdeck-danger:#ef4444; --gbxdeck-danger-hover:#dc2626; --gbxdeck-acc:#34d399; --gbxdeck-acc-hover:#10b981;
  }
}

/* Card */
.gbxdeck__results,
.gbxdeck__list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 1枚の最小幅 */
  gap: 14px;                                                   /* カード間隔 */
}
.gbxdeck-card,
.gbxdeck-fallback{
  width: 100%;
  background:var(--gbxdeck-bg);
  border:1px solid var(--gbxdeck-border);
  border-radius:var(--gbxdeck-radius);
  box-shadow:var(--gbxdeck-shadow);
  box-sizing: border-box;
  padding: 15px;
  overflow:hidden;
}
.gbxdeck-card__title a{ color:inherit; text-decoration:none; }
.gbxdeck-card__meta{ color:var(--gbxdeck-muted); font-size:var(--gbxdeck-font-sm); }
.price{ margin:.25rem 0 0; text-align:right; }

/* Unique thumbnail block */
.gbxdeck-thumb{
  width:100%;
  height: auto;
  background:var(--gbxdeck-bg);
  place-items:center;
  padding-bottom: 10px;
}
.gbxdeck-thumb__img{
  width:65% !important;
  height: auto !important;
  display:block;
}

/* Add / Qty controls */
.gbxdeck__add{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:fit-content; min-height:40px; padding:.5rem .9rem; margin:.5rem auto 0;
  border-radius:var(--gbxdeck-radius-pill); border:1px solid transparent;
  background:var(--gbxdeck-primary); color:var(--gbxdeck-primary-fg);
  font-weight:700; letter-spacing:.02em;
  transition:transform var(--gbxdeck-trans), background var(--gbxdeck-trans), box-shadow var(--gbxdeck-trans);
  box-shadow:0 6px 14px rgba(37,99,235,.18); cursor:pointer;
}
.gbxdeck__add:hover{ background:var(--gbxdeck-primary-hover); transform:translateY(-1px); }
.gbxdeck__add .gbxdeck-ico{ font-weight:800; transform:translateY(-1px); color: #fff; }
.gbxdeck__add .gbxdeck-label{ font-size:var(--gbxdeck-font-sm); color: #fff; }

.gbxdeck__qty{
  display:flex; align-items:center; justify-content:center; gap:.25rem;
  height:40px; padding:0 .25rem; margin:.5rem auto 0;
}
.gbxdeck__qty .gbxdeck__dec,
.gbxdeck__qty .gbxdeck__inc{
  width:36px; height:36px; display:inline-grid; place-items:center;
  border-radius:var(--gbxdeck-radius-pill);
  border:1px solid var(--gbxdeck-border);
  background:var(--gbxdeck-bg); color:var(--gbxdeck-fg);
  font-size:16px; cursor:pointer;
}
.gbxdeck__qty .num{ min-width:2.4rem; height:36px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.gbxdeck__qty .gbxdeck__rm{
  width:36px; height:36px; display:inline-grid; place-items:center;
  border-radius:var(--gbxdeck-radius-pill);
  border:1px solid var(--gbxdeck-danger);
  background:var(--gbxdeck-danger); color:var(--gbxdeck-danger-fg);
  font-weight:800; cursor:pointer;
}
.gbxdeck__qty .gbxdeck__rm:hover{ background:var(--gbxdeck-danger-hover); }

/* Zones & Builder */
.gbxdeck__zones{ display:grid; gap:1rem; margin-top:1rem; }
.gbxdeck__zone{ border:1px solid var(--gbxdeck-border); border-radius:var(--gbxdeck-radius); background:var(--gbxdeck-bg); box-shadow:var(--gbxdeck-shadow); }
.gbxdeck__zone>h4{ display:flex; align-items:baseline; gap:.5rem; padding:.75rem 1rem; margin:0; border-bottom:1px solid var(--gbxdeck-border); font-size:var(--gbxdeck-font-lg); }
.gbxdeck__zone.is-target>h4::after{
  content:"追加先"; margin-left:auto; font-size:var(--gbxdeck-font-sm);
  color:var(--gbxdeck-acc-fg); background:var(--gbxdeck-acc);
  border-radius:var(--gbxdeck-radius-pill); padding:.15rem .5rem;
}
.gbxdeck__list{ padding:.75rem; display:grid; gap:.5rem; }

.gbxdeck__search{ display:flex; gap:.5rem; align-items:center; margin:.75rem 0 1rem; }
.gbxdeck__search input[type="text"]{
  flex:1; padding:.65rem .85rem; border:1px solid var(--gbxdeck-border);
  border-radius:var(--gbxdeck-radius); background:var(--gbxdeck-bg); color:var(--gbxdeck-fg);
}
.gbxdeck__searchbtn{
  width:44px; height:44px; border-radius:var(--gbxdeck-radius);
  border:1px solid var(--gbxdeck-primary); background:var(--gbxdeck-primary);
  color:var(--gbxdeck-primary-fg); cursor:pointer;
}
.gbxdeck__status{ color:var(--gbxdeck-muted); font-size:var(--gbxdeck-font-sm); margin-top:.25rem; }

.gbxdeck-ptgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:.5rem; margin-bottom:.5rem; }
.gbxdeck-ptbtn{ border:1px solid var(--gbxdeck-border); background:var(--gbxdeck-bg); border-radius:var(--gbxdeck-radius); height:56px; display:grid; place-items:center; cursor:pointer; }
.gbxdeck-ptic{ width:32px; height:32px; object-fit:contain; }
.gbxdeck-pttxt{ font-size:var(--gbxdeck-font-sm); color:var(--gbxdeck-muted); }
.gbxdeck-ptbtn.is-active{ border-color:var(--gbxdeck-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }

.gbxdeck-pager{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.85rem 0 0; padding-top:.35rem; border-top:1px dashed var(--gbxdeck-border); }
.gbxdeck-pager__btn{ min-width:36px; height:36px; padding:0 .6rem; border-radius:var(--gbxdeck-radius-pill); border:1px solid var(--gbxdeck-border); background:var(--gbxdeck-bg); color:var(--gbxdeck-fg); font-weight:600; font-size:var(--gbxdeck-font-sm); cursor:pointer; }
.gbxdeck-pager__btn.is-active{ background:var(--gbxdeck-primary); color:var(--gbxdeck-primary-fg); border-color:var(--gbxdeck-primary); }
.gbxdeck-pager__sep{ align-self:center; color:var(--gbxdeck-muted); padding:0 .25rem; }

.gbxdeck__actions{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1rem; }
.gbxdeck__title{ flex:1; min-width:220px; padding:.6rem .8rem; border:1px solid var(--gbxdeck-border); border-radius:var(--gbxdeck-radius); background:var(--gbxdeck-bg); color:var(--gbxdeck-fg); }
.gbxdeck__privacy{ padding:.55rem .7rem; border:1px solid var(--gbxdeck-border); border-radius:var(--gbxdeck-radius); background:var(--gbxdeck-bg); color:var(--gbxdeck-fg); }
.gbxdeck__save,.gbxdeck__reset{
  padding:.6rem .9rem; border-radius:var(--gbxdeck-radius);
  border:1px solid var(--gbxdeck-acc); background:var(--gbxdeck-acc);
  color:var(--gbxdeck-acc-fg); font-weight:700; cursor:pointer;
}
.gbxdeck__reset{ border-color:var(--gbxdeck-danger); background:var(--gbxdeck-danger); }

.gbxdeck-card .price {
  font-size: 1.2em;
  font-weight: bold;
  color: #FF0000;
  line-height: 1em;
}
.gbxdeck-card .price span {
  font-size: .8em;
  color: #FF0000;
  font-weight: normal;
}

/* === 画像そのものがボタン（フルブリード） === */
.gbxdeck-ptgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
  gap:.6rem;
  margin:.5rem 0 .75rem;
}

/* 視覚的に隠す（フォーカス可） */
.gbxdeck-ptinput{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden;
}

/* 画像ラベル＝そのままボタン */
.gbxdeck-ptimg{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1;               /* 正方形。必要なら 4/3 等へ */
  border-radius:12px;
  overflow:hidden;
  background:var(--gbxdeck-bg);
  border:1px solid var(--gbxdeck-border);
  cursor:pointer; user-select:none;
  transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s, border-color .18s;
}
.gbxdeck-ptimg:hover{ transform:translateY(-1px); }
.gbxdeck-ptimg:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.25); border-color:var(--gbxdeck-primary); }

/* 画像はフルサイズで内側に収める */
.gbxdeck-ptimg__img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block;
  background:linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02));
}

/* 選択状態（input:checked + label） */
.gbxdeck-ptinput:checked + .gbxdeck-ptimg{
  border-color:var(--gbxdeck-primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
}
/* 右上にチェックバッジ */
.gbxdeck-ptinput:checked + .gbxdeck-ptimg::after{
  content:"✓";
  position:absolute;
  top:6px; right:6px;
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--gbxdeck-primary);
  color:#fff; font-weight:800; font-size:12px;
}

/* === Reorder controls === */
.gbxdeck__move{
  display:flex;
  gap:4px;
  margin-left:8px;
}
.gbxdeck__mv{
  border:1px solid var(--gbxdeck-border);
  background:var(--gbxdeck-bg);
  color:var(--gbxdeck-fg);
  padding:2px 6px;
  line-height:1;
  border-radius:6px;
  font-size:.9em;
  cursor:pointer;
}
.gbxdeck__mv:disabled{
  opacity:.45;
  cursor:default;
  pointer-events:none;
}


/* Myデッキリスト */
.gbxdeck--mylist .gbxdeck__myhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.gbxdeck__mylist{ display:grid; gap:8px; }
.gbxdeck__myrow{ display:grid; grid-template-columns: 1fr auto auto; gap:8px; align-items:center; padding:8px; border:1px solid var(--gbxdeck-border,#ddd); border-radius:8px; background:#fff; }
.gbxdeck__myrow .t{ font-weight:600; }
.gbxdeck__myrow .m{ font-size:.9em; color:#666; display:flex; gap:8px; }
.gbxdeck__myrow .a .btn{ display:inline-block; border:1px solid #ddd; padding:4px 8px; margin-left:6px; border-radius:6px; text-decoration:none; }

/* デッキ編集はビルダーの既存スタイルを流用 */



.gbxdeck-add{margin-top:10px;padding:10px;border:1px dashed #e5e7eb;border-radius:8px}
.gbxdeck-add__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gbxdeck-add__qty{width:72px}
.gbxdeck-add__actions{display:flex;gap:6px}
.gbxdeck-add__btn{padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer}
.gbxdeck-add__label{display:block;font-weight:600;margin-bottom:6px}
.gbxdeck-add__msg{margin-top:6px;font-size:13px}