/* 
 * BookingCast ユーティリティクラス
 * Bootstrap/Tailwind風のスペーシングシステム
 * 4の倍数ルール（8の法則）に準拠
 */

/* ==========================================================================
   スペーシングスケール（4の倍数）
   ========================================================================== */
/* 
 * bc-*-0: 0px
 * bc-*-1: 8px
 * bc-*-2: 12px
 * bc-*-3: 16px
 * bc-*-4: 20px (var(--booking-spacing))
 * bc-*-5: 24px
 * bc-*-6: 30px (var(--booking-spacing-large))
 */

/* ==========================================================================
   マージンユーティリティ
   ========================================================================== */

/* 全方向マージン */
.bc-m-0  { margin: 0 !important; }
.bc-m-1  { margin: 8px !important; }
.bc-m-2  { margin: 12px !important; }
.bc-m-3  { margin: 16px !important; }
.bc-m-4  { margin: 20px !important; }  /* var(--booking-spacing) */
.bc-m-5  { margin: 24px !important; }
.bc-m-6  { margin: 30px !important; }  /* var(--booking-spacing-large) */

/* マージントップ */
.bc-mt-0 { margin-top: 0 !important; }
.bc-mt-1 { margin-top: 8px !important; }
.bc-mt-2 { margin-top: 12px !important; }
.bc-mt-3 { margin-top: 16px !important; }
.bc-mt-4 { margin-top: 20px !important; }
.bc-mt-5 { margin-top: 24px !important; }
.bc-mt-6 { margin-top: 30px !important; }

/* マージンボトム */
.bc-mb-0 { margin-bottom: 0 !important; }
.bc-mb-1 { margin-bottom: 8px !important; }
.bc-mb-2 { margin-bottom: 12px !important; }
.bc-mb-3 { margin-bottom: 16px !important; }
.bc-mb-4 { margin-bottom: 20px !important; }
.bc-mb-5 { margin-bottom: 24px !important; }
.bc-mb-6 { margin-bottom: 30px !important; }

/* マージンレフト */
.bc-ml-0 { margin-left: 0 !important; }
.bc-ml-1 { margin-left: 8px !important; }
.bc-ml-2 { margin-left: 12px !important; }
.bc-ml-3 { margin-left: 16px !important; }
.bc-ml-4 { margin-left: 20px !important; }
.bc-ml-5 { margin-left: 24px !important; }
.bc-ml-6 { margin-left: 30px !important; }

/* マージンライト */
.bc-mr-0 { margin-right: 0 !important; }
.bc-mr-1 { margin-right: 8px !important; }
.bc-mr-2 { margin-right: 12px !important; }
.bc-mr-3 { margin-right: 16px !important; }
.bc-mr-4 { margin-right: 20px !important; }
.bc-mr-5 { margin-right: 24px !important; }
.bc-mr-6 { margin-right: 30px !important; }

/* マージン水平方向 */
.bc-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.bc-mx-1 { margin-left: 8px !important; margin-right: 8px !important; }
.bc-mx-2 { margin-left: 12px !important; margin-right: 12px !important; }
.bc-mx-3 { margin-left: 16px !important; margin-right: 16px !important; }
.bc-mx-4 { margin-left: 20px !important; margin-right: 20px !important; }
.bc-mx-5 { margin-left: 24px !important; margin-right: 24px !important; }
.bc-mx-6 { margin-left: 30px !important; margin-right: 30px !important; }

/* マージン垂直方向 */
.bc-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.bc-my-1 { margin-top: 8px !important; margin-bottom: 8px !important; }
.bc-my-2 { margin-top: 12px !important; margin-bottom: 12px !important; }
.bc-my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
.bc-my-4 { margin-top: 20px !important; margin-bottom: 20px !important; }
.bc-my-5 { margin-top: 24px !important; margin-bottom: 24px !important; }
.bc-my-6 { margin-top: 30px !important; margin-bottom: 30px !important; }

/* 自動マージン */
.bc-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ==========================================================================
   パディングユーティリティ
   ========================================================================== */

/* 全方向パディング */
.bc-p-0  { padding: 0 !important; }
.bc-p-1  { padding: 8px !important; }
.bc-p-2  { padding: 12px !important; }
.bc-p-3  { padding: 16px !important; }
.bc-p-4  { padding: 20px !important; }  /* var(--booking-spacing) */
.bc-p-5  { padding: 24px !important; }
.bc-p-6  { padding: 30px !important; }  /* var(--booking-spacing-large) */

/* パディングトップ */
.bc-pt-0 { padding-top: 0 !important; }
.bc-pt-1 { padding-top: 8px !important; }
.bc-pt-2 { padding-top: 12px !important; }
.bc-pt-3 { padding-top: 16px !important; }
.bc-pt-4 { padding-top: 20px !important; }
.bc-pt-5 { padding-top: 24px !important; }
.bc-pt-6 { padding-top: 30px !important; }

/* パディングボトム */
.bc-pb-0 { padding-bottom: 0 !important; }
.bc-pb-1 { padding-bottom: 8px !important; }
.bc-pb-2 { padding-bottom: 12px !important; }
.bc-pb-3 { padding-bottom: 16px !important; }
.bc-pb-4 { padding-bottom: 20px !important; }
.bc-pb-5 { padding-bottom: 24px !important; }
.bc-pb-6 { padding-bottom: 30px !important; }

/* パディングレフト */
.bc-pl-0 { padding-left: 0 !important; }
.bc-pl-1 { padding-left: 8px !important; }
.bc-pl-2 { padding-left: 12px !important; }
.bc-pl-3 { padding-left: 16px !important; }
.bc-pl-4 { padding-left: 20px !important; }
.bc-pl-5 { padding-left: 24px !important; }
.bc-pl-6 { padding-left: 30px !important; }

/* パディングライト */
.bc-pr-0 { padding-right: 0 !important; }
.bc-pr-1 { padding-right: 8px !important; }
.bc-pr-2 { padding-right: 12px !important; }
.bc-pr-3 { padding-right: 16px !important; }
.bc-pr-4 { padding-right: 20px !important; }
.bc-pr-5 { padding-right: 24px !important; }
.bc-pr-6 { padding-right: 30px !important; }

/* パディング水平方向 */
.bc-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.bc-px-1 { padding-left: 8px !important; padding-right: 8px !important; }
.bc-px-2 { padding-left: 12px !important; padding-right: 12px !important; }
.bc-px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.bc-px-4 { padding-left: 20px !important; padding-right: 20px !important; }
.bc-px-5 { padding-left: 24px !important; padding-right: 24px !important; }
.bc-px-6 { padding-left: 30px !important; padding-right: 30px !important; }

/* パディング垂直方向 */
.bc-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.bc-py-1 { padding-top: 8px !important; padding-bottom: 8px !important; }
.bc-py-2 { padding-top: 12px !important; padding-bottom: 12px !important; }
.bc-py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.bc-py-4 { padding-top: 20px !important; padding-bottom: 20px !important; }
.bc-py-5 { padding-top: 24px !important; padding-bottom: 24px !important; }
.bc-py-6 { padding-top: 30px !important; padding-bottom: 30px !important; }

/* ==========================================================================
   Gapユーティリティ（Flexbox/Grid用）
   ========================================================================== */

.bc-gap-0 { gap: 0 !important; }
.bc-gap-1 { gap: 8px !important; }
.bc-gap-2 { gap: 12px !important; }
.bc-gap-3 { gap: 16px !important; }
.bc-gap-4 { gap: 20px !important; }
.bc-gap-5 { gap: 24px !important; }
.bc-gap-6 { gap: 30px !important; }

/* Row Gap */
.bc-row-gap-0 { row-gap: 0 !important; }
.bc-row-gap-1 { row-gap: 8px !important; }
.bc-row-gap-2 { row-gap: 12px !important; }
.bc-row-gap-3 { row-gap: 16px !important; }
.bc-row-gap-4 { row-gap: 20px !important; }
.bc-row-gap-5 { row-gap: 24px !important; }
.bc-row-gap-6 { row-gap: 30px !important; }

/* Column Gap */
.bc-column-gap-0 { column-gap: 0 !important; }
.bc-column-gap-1 { column-gap: 8px !important; }
.bc-column-gap-2 { column-gap: 12px !important; }
.bc-column-gap-3 { column-gap: 16px !important; }
.bc-column-gap-4 { column-gap: 20px !important; }
.bc-column-gap-5 { column-gap: 24px !important; }
.bc-column-gap-6 { column-gap: 30px !important; }

/* ==========================================================================
   レスポンシブ（タブレット: 768px以下）
   ========================================================================== */

@media (max-width: 768px) {
    /* マージン */
    .bc-m-md-0  { margin: 0 !important; }
    .bc-m-md-2  { margin: 12px !important; }
    .bc-m-md-3  { margin: 16px !important; }
    
    .bc-mt-md-0 { margin-top: 0 !important; }
    .bc-mt-md-2 { margin-top: 12px !important; }
    .bc-mt-md-3 { margin-top: 16px !important; }
    
    .bc-mb-md-0 { margin-bottom: 0 !important; }
    .bc-mb-md-2 { margin-bottom: 12px !important; }
    .bc-mb-md-3 { margin-bottom: 16px !important; }
    
    .bc-ml-md-0 { margin-left: 0 !important; }
    .bc-mr-md-0 { margin-right: 0 !important; }
    
    .bc-mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .bc-my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    
    /* パディング */
    .bc-p-md-0  { padding: 0 !important; }
    .bc-p-md-2  { padding: 12px !important; }
    .bc-p-md-3  { padding: 16px !important; }
    
    .bc-pt-md-0 { padding-top: 0 !important; }
    .bc-pt-md-2 { padding-top: 12px !important; }
    .bc-pt-md-3 { padding-top: 16px !important; }
    
    .bc-pb-md-0 { padding-bottom: 0 !important; }
    .bc-pb-md-2 { padding-bottom: 12px !important; }
    .bc-pb-md-3 { padding-bottom: 16px !important; }
    
    .bc-px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .bc-px-md-3 { padding-left: 16px !important; padding-right: 16px !important; }
    
    .bc-py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .bc-py-md-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
    
    /* Gap */
    .bc-gap-md-2 { gap: 12px !important; }
    .bc-gap-md-3 { gap: 16px !important; }
}

/* ==========================================================================
   レスポンシブ（スマホ: 600px以下）
   ========================================================================== */

@media (max-width: 600px) {
    /* マージン */
    .bc-m-sm-0  { margin: 0 !important; }
    .bc-m-sm-2  { margin: 12px !important; }
    .bc-m-sm-3  { margin: 16px !important; }
    
    .bc-mt-sm-0 { margin-top: 0 !important; }
    .bc-mt-sm-2 { margin-top: 12px !important; }
    .bc-mt-sm-3 { margin-top: 16px !important; }
    
    .bc-mb-sm-0 { margin-bottom: 0 !important; }
    .bc-mb-sm-2 { margin-bottom: 12px !important; }
    .bc-mb-sm-3 { margin-bottom: 16px !important; }
    
    .bc-ml-sm-0 { margin-left: 0 !important; }
    .bc-mr-sm-0 { margin-right: 0 !important; }
    
    .bc-mx-sm-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .bc-my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    
    /* パディング */
    .bc-p-sm-0  { padding: 0 !important; }
    .bc-p-sm-2  { padding: 12px !important; }
    .bc-p-sm-3  { padding: 16px !important; }
    
    .bc-pt-sm-0 { padding-top: 0 !important; }
    .bc-pt-sm-2 { padding-top: 12px !important; }
    .bc-pt-sm-3 { padding-top: 16px !important; }
    
    .bc-pb-sm-0 { padding-bottom: 0 !important; }
    .bc-pb-sm-2 { padding-bottom: 12px !important; }
    .bc-pb-sm-3 { padding-bottom: 16px !important; }
    
    .bc-px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .bc-px-sm-2 { padding-left: 12px !important; padding-right: 12px !important; }
    
    .bc-py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .bc-py-sm-2 { padding-top: 12px !important; padding-bottom: 12px !important; }
    
    /* Gap */
    .bc-gap-sm-2 { gap: 12px !important; }
    .bc-gap-sm-3 { gap: 16px !important; }
}