/* ============================================================
   ガチャ系ページの共通スタイル (gacha-common.css)
   読み込むページ: gacha.html / box-gacha.html（JS は js/gacha-common.js の ROMGacha.stepper）

   数量スイッチ（− 値 ＋）
     <div class="qty-switch"><button class="qb">−</button><span class="qval">1</span><button class="qb">＋</button></div>
   ボタンの色は各ページの --sky-btn、数字は --f-num（未定義なら Barlow）。
   ボタンは指で押しやすいよう 32px 四方（以前の box-gacha は 28px）。
   ============================================================ */
.qty-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #c8d4eb;
  border-radius: 999px;
  padding: 4px 8px;
}
.qty-switch .qb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e4edfb, #c9d8f0);
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--sky-ink);
}
.qty-switch .qb:hover { filter: brightness(1.05); }
.qty-switch .qb:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-switch .qval {
  font-family: var(--f-num, "Barlow", sans-serif);
  font-weight: 700;
  min-width: 36px;
  text-align: center;
  font-size: 15px;
}