/* =========================================
   Bootstrap 5 gap utilities for Bootstrap 4
   ========================================= */

/*  基本 gap（XとY両方に適用） */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }  /* 約4px */
.gap-2 { gap: 0.5rem !important; }   /* 約8px */
.gap-3 { gap: 1rem !important; }     /* 約16px */
.gap-4 { gap: 1.5rem !important; }   /* 約24px */
.gap-5 { gap: 3rem !important; }     /* 約48px */

/*  gap-x（左右方向のみ） */
.gap-x-0 { column-gap: 0 !important; }
.gap-x-1 { column-gap: 0.25rem !important; }
.gap-x-2 { column-gap: 0.5rem !important; }
.gap-x-3 { column-gap: 1rem !important; }
.gap-x-4 { column-gap: 1.5rem !important; }
.gap-x-5 { column-gap: 3rem !important; }

/*  gap-y（上下方向のみ） */
.gap-y-0 { row-gap: 0 !important; }
.gap-y-1 { row-gap: 0.25rem !important; }
.gap-y-2 { row-gap: 0.5rem !important; }
.gap-y-3 { row-gap: 1rem !important; }
.gap-y-4 { row-gap: 1.5rem !important; }
.gap-y-5 { row-gap: 3rem !important; }
/* --------------------------------------------------
   Bootstrap 4 用 gap クラス再現（g, gx, gy）
   Bootstrap 5 の spacingスケールに準拠（1単位 = 0.25rem）
   **既存 .row に影響を与えない**ように scoped 実装
-------------------------------------------------- */

/* ---- 変数定義：g / gx / gy 各クラスに設定 ---- */
.g-0, .gx-0, .gy-0 { --bs-gutter-x: 0;    --bs-gutter-y: 0; }
.g-1, .gx-1, .gy-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
.g-2, .gx-2, .gy-2 { --bs-gutter-x: .5rem;  --bs-gutter-y: .5rem; }
.g-3, .gx-3, .gy-3 { --bs-gutter-x: 1rem;   --bs-gutter-y: 1rem; }
.g-4, .gx-4, .gy-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5, .gx-5, .gy-5 { --bs-gutter-x: 3rem;   --bs-gutter-y: 3rem; }

/* -------------------------------------------------
   注意：以下のルールは **.row.g-* / .row.gx-* / .row.gy-***
   にのみ適用。通常の .row には何も影響しない。
-------------------------------------------------- */

/* -------------------------
   横方向の間隔（g と gx に対応）
   ------------------------- */
/* .row.g-* セット（g があれば横も縦も効く）、および .row.gx-* */
.row.g-0 > [class*='col-'], .row.g-0 > .col,
.row.g-1 > [class*='col-'], .row.g-1 > .col,
.row.g-2 > [class*='col-'], .row.g-2 > .col,
.row.g-3 > [class*='col-'], .row.g-3 > .col,
.row.g-4 > [class*='col-'], .row.g-4 > .col,
.row.g-5 > [class*='col-'], .row.g-5 > .col,

.row.gx-0 > [class*='col-'], .row.gx-0 > .col,
.row.gx-1 > [class*='col-'], .row.gx-1 > .col,
.row.gx-2 > [class*='col-'], .row.gx-2 > .col,
.row.gx-3 > [class*='col-'], .row.gx-3 > .col,
.row.gx-4 > [class*='col-'], .row.gx-4 > .col,
.row.gx-5 > [class*='col-'], .row.gx-5 > .col
{
  /* gx / g の --bs-gutter-x を使って左右パディングを与える */
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left:  calc(var(--bs-gutter-x) / 2);
}

/* -------------------------
   縦方向の間隔（g と gy に対応）
   ------------------------- */
/* ネガティブマージンは「該当する .row のみ」に適用 */
.row.g-0, .row.g-1, .row.g-2, .row.g-3, .row.g-4, .row.g-5,
.row.gy-0, .row.gy-1, .row.gy-2, .row.gy-3, .row.gy-4, .row.gy-5 {
  margin-top: calc(-1 * var(--bs-gutter-y));
}

/* 各カラムに縦マージンを与える（g / gy がある row のみ） */
.row.g-0 > [class*='col-'], .row.g-0 > .col,
.row.g-1 > [class*='col-'], .row.g-1 > .col,
.row.g-2 > [class*='col-'], .row.g-2 > .col,
.row.g-3 > [class*='col-'], .row.g-3 > .col,
.row.g-4 > [class*='col-'], .row.g-4 > .col,
.row.g-5 > [class*='col-'], .row.g-5 > .col,

.row.gy-0 > [class*='col-'], .row.gy-0 > .col,
.row.gy-1 > [class*='col-'], .row.gy-1 > .col,
.row.gy-2 > [class*='col-'], .row.gy-2 > .col,
.row.gy-3 > [class*='col-'], .row.gy-3 > .col,
.row.gy-4 > [class*='col-'], .row.gy-4 > .col,
.row.gy-5 > [class*='col-'], .row.gy-5 > .col
{
  margin-top: var(--bs-gutter-y);
}

/* -------------------------
   補足（任意）
   - もし .col の他に直接 .row の直下に他要素がある場合は
     必要に応じてセレクタを拡張。
   - もし既存で .col にカスタム margin/padding があるなら
     競合しないか確認（優先度の調整は可能）。
   ------------------------- */