/* 「利用可能なメニュー」ボタン（.plan-info-btn）と、そのモーダル内一覧の外枠（.plan-info-list）。
   01_product_select.html・02_gift_detail.html・payment/03_share.htmlの3画面で完全一致していた分だけを
   共通化した（refactor-all追加分、2026-09-28）。
   .plan-info-list li・.plan-info-emptyはpayment/03_share.htmlだけ文字サイズが異なる（14px/16pxではなく
   13px/14px）ため対象外。.modal・.modal__close・.modal__title・.modal-backdropは値こそ同じだが、
   01_product_select.htmlだけ他のモーダル（設定・通知設定）と同じクラス名が同一画面上で衝突しないよう
   #plan-info-modal-backdrop配下に意図的にスコープしており（同ファイルのコメント参照）、
   3画面で無条件に共有できないため対象外。 */
.plan-info-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
  background: #fff; border: 2px solid var(--c-ink-400); border-radius: 999px;
  padding: 4px 11px; font-size: 13px; font-weight: 700; color: var(--c-ink-700); cursor: pointer;
  vertical-align: middle;
}
.plan-info-btn:hover { background: var(--c-line-soft); }
.plan-info-btn .material-symbols-outlined { font-size: 14px; }
.plan-info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }