/* ==========================================================================
Spacing Utilities (패딩 & 마진 시스템)
- 단위: rem (루트 폰트 크기 기준)
- 스케일: 0 ~ 8까지 전부 제공
========================================================================== */

:root {
--space-0:   0rem;
--space-05:  0.5rem;
--space-1:   1rem;
--space-15:  1.5rem;
--space-2:   2rem;
--space-25:  2.5rem;
--space-3:   3rem;
--space-4:   4rem;
--space-5:   5rem;
--space-6:   6rem;
--space-7:   7rem;
--space-8:   8rem;
--space-12:   12rem;
--space-16:   16rem;
--space-32:   32rem;
}

/* ── 패딩 (모든 방향) ── */
.p-0   { padding:          var(--space-0); }
.p-05  { padding:          var(--space-05); }
.p-1   { padding:          var(--space-1); }
.p-15  { padding:          var(--space-15); }
.p-2   { padding:          var(--space-2); }
.p-25  { padding:          var(--space-25); }
.p-3   { padding:          var(--space-3); }
.p-4   { padding:          var(--space-4); }
.p-5   { padding:          var(--space-5); }
.p-6   { padding:          var(--space-6); }
.p-7   { padding:          var(--space-7); }
.p-8   { padding:          var(--space-8); }

/* ── 패딩 수평 (좌우) ── */
.px-0  { padding-left: var(--space-0);  padding-right: var(--space-0); }
.px-05 { padding-left: var(--space-05); padding-right: var(--space-05); }
.px-1  { padding-left: var(--space-1);  padding-right: var(--space-1); }
.px-15 { padding-left: var(--space-15); padding-right: var(--space-15); }
.px-2  { padding-left: var(--space-2);  padding-right: var(--space-2); }
.px-3  { padding-left: var(--space-3);  padding-right: var(--space-3); }
.px-4  { padding-left: var(--space-4);  padding-right: var(--space-4); }
.px-5  { padding-left: var(--space-5);  padding-right: var(--space-5); }
.px-6  { padding-left: var(--space-6);  padding-right: var(--space-6); }
.px-8  { padding-left: var(--space-8);  padding-right: var(--space-8); }

/* ── 패딩 수직 (상하) ── */
.py-0  { padding-top: var(--space-0);    padding-bottom: var(--space-0); }
.py-05 { padding-top: var(--space-05);   padding-bottom: var(--space-05); }
.py-1  { padding-top: var(--space-1);    padding-bottom: var(--space-1); }
.py-2  { padding-top: var(--space-2);    padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3);    padding-bottom: var(--space-3); }
.py-4  { padding-top: var(--space-4);    padding-bottom: var(--space-4); }
.py-5  { padding-top: var(--space-5);    padding-bottom: var(--space-5); }
.py-6  { padding-top: var(--space-6);    padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8);    padding-bottom: var(--space-8); }

/* ── 단일 방향 패딩 ── */

/* padding-top */
.pt-0   { padding-top:    var(--space-0); }
.pt-05  { padding-top:    var(--space-05); }
.pt-1   { padding-top:    var(--space-1); }
.pt-15  { padding-top:    var(--space-15); }
.pt-2   { padding-top:    var(--space-2); }
.pt-25  { padding-top:    var(--space-25); }
.pt-3   { padding-top:    var(--space-3); }
.pt-4   { padding-top:    var(--space-4); }
.pt-5   { padding-top:    var(--space-5); }
.pt-6   { padding-top:    var(--space-6); }
.pt-7   { padding-top:    var(--space-7); }
.pt-8   { padding-top:    var(--space-8); }
.pt-12   { padding-top:    var(--space-12); }
.pt-16   { padding-top:    var(--space-16); }

/* padding-right */
.pr-0   { padding-right:  var(--space-0); }
.pr-05  { padding-right:  var(--space-05); }
.pr-1   { padding-right:  var(--space-1); }
.pr-15  { padding-right:  var(--space-15); }
.pr-2   { padding-right:  var(--space-2); }
.pr-25  { padding-right:  var(--space-25); }
.pr-3   { padding-right:  var(--space-3); }
.pr-4   { padding-right:  var(--space-4); }
.pr-5   { padding-right:  var(--space-5); }
.pr-6   { padding-right:  var(--space-6); }
.pr-7   { padding-right:  var(--space-7); }
.pr-8   { padding-right:  var(--space-8); }

/* padding-bottom */
.pb-0   { padding-bottom: var(--space-0); }
.pb-05  { padding-bottom: var(--space-05); }
.pb-1   { padding-bottom: var(--space-1); }
.pb-15  { padding-bottom: var(--space-15); }
.pb-2   { padding-bottom: var(--space-2); }
.pb-25  { padding-bottom: var(--space-25); }
.pb-3   { padding-bottom: var(--space-3); }
.pb-4   { padding-bottom: var(--space-4); }
.pb-5   { padding-bottom: var(--space-5); }
.pb-6   { padding-bottom: var(--space-6); }
.pb-7   { padding-bottom: var(--space-7); }
.pb-8   { padding-bottom: var(--space-8); }
.pb-12   { padding-bottom: var(--space-12); }
.pb-16   { padding-bottom: var(--space-16); }
.pb-32   { padding-bottom: var(--space-32); }

/* padding-left */
.pl-0   { padding-left:   var(--space-0); }
.pl-05  { padding-left:   var(--space-05); }
.pl-1   { padding-left:   var(--space-1); }
.pl-15  { padding-left:   var(--space-15); }
.pl-2   { padding-left:   var(--space-2); }
.pl-25  { padding-left:   var(--space-25); }
.pl-3   { padding-left:   var(--space-3); }
.pl-4   { padding-left:   var(--space-4); }
.pl-5   { padding-left:   var(--space-5); }
.pl-6   { padding-left:   var(--space-6); }
.pl-7   { padding-left:   var(--space-7); }
.pl-8   { padding-left:   var(--space-8); }

/* ── 마진 (필요한 만큼만 예시 – 위 패딩과 동일한 패턴으로 확장 가능) ── */
.m-0   { margin: var(--space-0); }
.m-1   { margin: var(--space-1); }
.m-2   { margin: var(--space-2); }
.m-3   { margin: var(--space-3); }
.m-4   { margin: var(--space-4); }
.m-5   { margin: var(--space-5); }
.m-6   { margin: var(--space-6); }
.m-8   { margin: var(--space-8); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ── 그리드/플렉스용 gap 유틸리티 ── */
.gap-0   { gap: var(--space-0); }
.gap-05  { gap: var(--space-05); }
.gap-1   { gap: var(--space-1); }
.gap-15  { gap: var(--space-15); }
.gap-2   { gap: var(--space-2); }
.gap-25  { gap: var(--space-25); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-7   { gap: var(--space-7); }
.gap-8   { gap: var(--space-8); }

/* ── 자주 쓰는 조합 예시 (선택적으로 사용) ── */
.my-4  { margin-top:    var(--space-4); margin-bottom: var(--space-4); }
.my-6  { margin-top:    var(--space-6); margin-bottom: var(--space-6); }
.my-8  { margin-top:    var(--space-8); margin-bottom: var(--space-8); }