/* ===================================
   SPACING UTILITIES
   월명동 반응형 여백 유틸리티 클래스
   작성일: 2025-12-03
   =================================== */

/* ----- Margin Top ----- */
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }
.mt-200 { margin-top: 200px; }

/* ----- Margin Bottom ----- */
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }
.mb-200 { margin-bottom: 200px; }

/* ----- Margin Left ----- */
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-50 { margin-left: 50px; }
.ml-60 { margin-left: 60px; }
.ml-80 { margin-left: 80px; }
.ml-100 { margin-left: 100px; }

/* ----- Margin Right ----- */
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-50 { margin-right: 50px; }
.mr-60 { margin-right: 60px; }
.mr-80 { margin-right: 80px; }
.mr-100 { margin-right: 100px; }

/* ----- Margin (all sides) ----- */
.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-20 { margin: 20px; }
.m-30 { margin: 30px; }
.m-40 { margin: 40px; }
.m-50 { margin: 50px; }
.m-60 { margin: 60px; }
.m-80 { margin: 80px; }
.m-100 { margin: 100px; }

/* ----- Margin Left & Right ----- */
.mx-5 { margin-left: 5px; margin-right: 5px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-15 { margin-left: 15px; margin-right: 15px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-30 { margin-left: 30px; margin-right: 30px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }
.mx-50 { margin-left: 50px; margin-right: 50px; }
.mx-60 { margin-left: 60px; margin-right: 60px; }
.mx-80 { margin-left: 80px; margin-right: 80px; }
.mx-100 { margin-left: 100px; margin-right: 100px; }

/* ----- Margin Top & Bottom ----- */
.my-5 { margin-top: 5px; margin-bottom: 5px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-15 { margin-top: 15px; margin-bottom: 15px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }
.my-30 { margin-top: 30px; margin-bottom: 30px; }
.my-40 { margin-top: 40px; margin-bottom: 40px; }
.my-50 { margin-top: 50px; margin-bottom: 50px; }
.my-60 { margin-top: 60px; margin-bottom: 60px; }
.my-80 { margin-top: 80px; margin-bottom: 80px; }
.my-100 { margin-top: 100px; margin-bottom: 100px; }

/* ----- Padding Top ----- */
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-80 { padding-top: 80px; }
.pt-100 { padding-top: 100px; }

/* ----- Padding Bottom ----- */
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-80 { padding-bottom: 80px; }
.pb-100 { padding-bottom: 100px; }

/* ----- Padding Left ----- */
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.pl-60 { padding-left: 60px; }
.pl-80 { padding-left: 80px; }
.pl-100 { padding-left: 100px; }

/* ----- Padding Right ----- */
.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-30 { padding-right: 30px; }
.pr-40 { padding-right: 40px; }
.pr-50 { padding-right: 50px; }
.pr-60 { padding-right: 60px; }
.pr-80 { padding-right: 80px; }
.pr-100 { padding-right: 100px; }

/* ----- Padding (all sides) ----- */
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }
.p-60 { padding: 60px; }
.p-80 { padding: 80px; }
.p-100 { padding: 100px; }

/* ----- Padding Left & Right ----- */
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-30 { padding-left: 30px; padding-right: 30px; }
.px-40 { padding-left: 40px; padding-right: 40px; }
.px-50 { padding-left: 50px; padding-right: 50px; }
.px-60 { padding-left: 60px; padding-right: 60px; }
.px-80 { padding-left: 80px; padding-right: 80px; }
.px-100 { padding-left: 100px; padding-right: 100px; }

/* ----- Padding Top & Bottom ----- */
.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-30 { padding-top: 30px; padding-bottom: 30px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-50 { padding-top: 50px; padding-bottom: 50px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }

/* ===================================
   RESPONSIVE VARIANTS
   =================================== */

/* ----- Mobile Only (768px 이하) ----- */
.sm-only { display: none; }

@media (max-width: 768px) {
  .sm-only { display: inline; }
  .sm-mt-0 { margin-top: 0; }
  .sm-mt-5 { margin-top: 5px; }
  .sm-mt-10 { margin-top: 10px; }
  .sm-mt-15 { margin-top: 15px; }
  .sm-mt-20 { margin-top: 20px; }
  .sm-mt-30 { margin-top: 30px; }
  .sm-mt-40 { margin-top: 40px; }
  .sm-mt-50 { margin-top: 50px; }
  .sm-mt-60 { margin-top: 60px; }

  .sm-mb-0 { margin-bottom: 0; }
  .sm-mb-5 { margin-bottom: 5px; }
  .sm-mb-10 { margin-bottom: 10px; }
  .sm-mb-15 { margin-bottom: 15px; }
  .sm-mb-20 { margin-bottom: 20px; }
  .sm-mb-30 { margin-bottom: 30px; }
  .sm-mb-40 { margin-bottom: 40px; }
  .sm-mb-50 { margin-bottom: 50px; }
  .sm-mb-60 { margin-bottom: 60px; }
  .sm-mb-80 { margin-bottom: 80px; }
  .sm-mb-100 { margin-bottom: 100px; }

  .sm-pt-0 { padding-top: 0; }
  .sm-pt-5 { padding-top: 5px; }
  .sm-pt-10 { padding-top: 10px; }
  .sm-pt-15 { padding-top: 15px; }
  .sm-pt-20 { padding-top: 20px; }
  .sm-pt-30 { padding-top: 30px; }
  .sm-pt-40 { padding-top: 40px; }
  .sm-pt-50 { padding-top: 50px; }

  .sm-pb-5 { padding-bottom: 5px; }
  .sm-pb-10 { padding-bottom: 10px; }
  .sm-pb-15 { padding-bottom: 15px; }
  .sm-pb-20 { padding-bottom: 20px; }
  .sm-pb-30 { padding-bottom: 30px; }
  .sm-pb-40 { padding-bottom: 40px; }
  .sm-pb-50 { padding-bottom: 50px; }

  .sm-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .sm-px-10 { padding-left: 10px; padding-right: 10px; }
  .sm-px-15 { padding-left: 15px; padding-right: 15px; }
  .sm-px-20 { padding-left: 20px; padding-right: 20px; }

  .sm-p-0 { padding: 0; }

  .sm-py-0 { padding-top: 0; padding-bottom: 0; }
  .sm-py-5 { padding-top: 5px; padding-bottom: 5px; }
  .sm-py-10 { padding-top: 10px; padding-bottom: 10px; }
  .sm-py-15 { padding-top: 15px; padding-bottom: 15px; }
  .sm-py-20 { padding-top: 20px; padding-bottom: 20px; }
  .sm-py-30 { padding-top: 30px; padding-bottom: 30px; }

  .sm-my-0 { margin-top: 0; margin-bottom: 0; }
  .sm-my-10 { margin-top: 10px; margin-bottom: 10px; }
  .sm-my-20 { margin-top: 20px; margin-bottom: 20px; }
  .sm-my-30 { margin-top: 30px; margin-bottom: 30px; }
}

/* ----- Tablet & Desktop (769px+) ----- */
@media (min-width: 769px) {
  .md-mt-10 { margin-top: 10px; }
  .md-mt-20 { margin-top: 20px; }
  .md-mt-30 { margin-top: 30px; }
  .md-mt-40 { margin-top: 40px; }
  .md-mt-50 { margin-top: 50px; }
  .md-mt-60 { margin-top: 60px; }
  .md-mt-80 { margin-top: 80px; }
  .md-mt-100 { margin-top: 100px; }
  .md-mt-120 { margin-top: 120px; }
  .md-mt-200 { margin-top: 200px; }

  .md-mb-10 { margin-bottom: 10px; }
  .md-mb-20 { margin-bottom: 20px; }
  .md-mb-30 { margin-bottom: 30px; }
  .md-mb-40 { margin-bottom: 40px; }
  .md-mb-50 { margin-bottom: 50px; }
  .md-mb-80 { margin-bottom: 80px; }
  .md-mb-100 { margin-bottom: 100px; }
  .md-mb-200 { margin-bottom: 200px; }

  .md-pt-10 { padding-top: 10px; }
  .md-pt-20 { padding-top: 20px; }
  .md-pt-50 { padding-top: 50px; }
  .md-pt-80 { padding-top: 80px; }
  .md-pt-100 { padding-top: 100px; }

  .md-pb-10 { padding-bottom: 10px; }
  .md-pb-20 { padding-bottom: 20px; }
  .md-pb-50 { padding-bottom: 50px; }
  .md-pb-80 { padding-bottom: 80px; }
  .md-pb-100 { padding-bottom: 100px; }
}

/* ----- Large Desktop (970px+) ----- */
@media (min-width: 970px) {
  .lg-mt-10 { margin-top: 10px; }
  .lg-mt-20 { margin-top: 20px; }
  .lg-mt-50 { margin-top: 50px; }
  .lg-mt-80 { margin-top: 80px; }
  .lg-mt-100 { margin-top: 100px; }
  .lg-mt-120 { margin-top: 120px; }
  .lg-mt-200 { margin-top: 200px; }

  .lg-mb-10 { margin-bottom: 10px; }
  .lg-mb-20 { margin-bottom: 20px; }
  .lg-mb-50 { margin-bottom: 50px; }
  .lg-mb-80 { margin-bottom: 80px; }
  .lg-mb-100 { margin-bottom: 100px; }
  .lg-mb-200 { margin-bottom: 200px; }

  .lg-pt-50 { padding-top: 50px; }
  .lg-pt-80 { padding-top: 80px; }
  .lg-pt-100 { padding-top: 100px; }

  .lg-pb-50 { padding-bottom: 50px; }
  .lg-pb-80 { padding-bottom: 80px; }
  .lg-pb-100 { padding-bottom: 100px; }
}

/* ===================================
   DEPRECATED CLASSES
   하위 호환성 유지 - 향후 제거 예정

   Note: .mar, .mar_mini, .mab, .mb200은 이미 common.css에 정의되어 있으므로
   여기서는 중복 정의하지 않습니다.

   향후 마이그레이션 완료 후 common.css에서 제거 예정:
   - .mar (margin-top: 40px) → .mt-120 사용 권장
   - .mar_mini (margin-top: 20px) → .mt-60 사용 권장
   - .mab (margin-bottom: 80px) → .mb-40 사용 권장
   - .mb200 (margin-bottom: 200px) → .mb-200 사용 권장
   =================================== */