/* ========== Spacing (Margin / Padding) ========== */
/* ================================
   Spacing Utilities (Margin / Padding)
   scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem
   ================================ */

:root {
  --main-color: #111a38; /* 변수 선언 */
}

/* --- Margin All --- */
.m-0   { margin: 0; }
.m-1   { margin: 0.25rem; }
.m-2   { margin: 0.5rem; }
.m-4   { margin: 1rem; }
.m-6   { margin: 1.5rem; }
.m-8   { margin: 2rem; }

/* --- Margin Top --- */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }

/* --- Margin Right --- */
.mr-0  { margin-right: 0; }
.mr-1  { margin-right: 0.25rem; }
.mr-2  { margin-right: 0.5rem; }
.mr-4  { margin-right: 1rem; }
.mr-6  { margin-right: 1.5rem; }
.mr-8  { margin-right: 2rem; }

/* --- Margin Bottom --- */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }

/* --- Margin Left --- */
.ml-0  { margin-left: 0; }
.ml-1  { margin-left: 0.25rem; }
.ml-2  { margin-left: 0.5rem; }
.ml-4  { margin-left: 1rem; }
.ml-6  { margin-left: 1.5rem; }
.ml-8  { margin-left: 2rem; }

/* --- Margin X (Left + Right) --- */
.mx-0  { margin-left: 0; margin-right: 0; }
.mx-1  { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2  { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-4  { margin-left: 1rem; margin-right: 1rem; }
.mx-6  { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8  { margin-left: 2rem; margin-right: 2rem; }

/* --- Margin Y (Top + Bottom) --- */
.my-0  { margin-top: 0; margin-bottom: 0; }
.my-1  { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2  { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4  { margin-top: 1rem; margin-bottom: 1rem; }
.my-6  { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8  { margin-top: 2rem; margin-bottom: 2rem; }

/* ================================
   Padding Utilities
   ================================ */

/* --- Padding All --- */
.p-0   { padding: 0; }
.p-1   { padding: 0.25rem; }
.p-2   { padding: 0.5rem; }
.p-4   { padding: 1rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }

/* --- Padding Top --- */
.pt-0  { padding-top: 0; }
.pt-1  { padding-top: 0.25rem; }
.pt-2  { padding-top: 0.5rem; }
.pt-4  { padding-top: 1rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-8  { padding-top: 2rem; }

/* --- Padding Right --- */
.pr-0  { padding-right: 0; }
.pr-1  { padding-right: 0.25rem; }
.pr-2  { padding-right: 0.5rem; }
.pr-4  { padding-right: 1rem; }
.pr-6  { padding-right: 1.5rem; }
.pr-8  { padding-right: 2rem; }

/* --- Padding Bottom --- */
.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: 0.25rem; }
.pb-2  { padding-bottom: 0.5rem; }
.pb-4  { padding-bottom: 1rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-8  { padding-bottom: 2rem; }

/* --- Padding Left --- */
.pl-0  { padding-left: 0; }
.pl-1  { padding-left: 0.25rem; }
.pl-2  { padding-left: 0.5rem; }
.pl-4  { padding-left: 1rem; }
.pl-6  { padding-left: 1.5rem; }
.pl-8  { padding-left: 2rem; }

/* --- Padding X (Left + Right) --- */
.px-0  { padding-left: 0; padding-right: 0; }
.px-1  { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8  { padding-left: 2rem; padding-right: 2rem; }

/* --- Padding Y (Top + Bottom) --- */
.py-0  { padding-top: 0; padding-bottom: 0; }
.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }


/* ========== Text Alignment & Font ========== */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-light  { font-weight: 300; }

.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

/* ========== Colors ========== */
.text-white { color: #fff; }
.text-black { color: #000; }
.text-gray { color: #6b7280; }

.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-gray  { background-color: #f3f4f6; }
.bg-blue  { background-color: #3b82f6; }

/* ========== Flexbox / Layout ========== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

/* ========== Border & Radius ========== */
.rounded { border-radius: 1rem; }
.rounded-md { border-radius: 1.5rem; }
.rounded-lg { border-radius: 2rem; }
.rounded-full { border-radius: 9999px; }

.border { border: 1px solid #e5e7eb; }
.border-0 { border: 0; }

/* ========== Shadow ========== */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow    { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.1); }

/* ========== Width / Height ========== */
.w-full { width: 100%; }
.w-1-2 { width: 50%; }
.w-1-3 { width: 33.3333%; }
.w-2-3 { width: 66.6667%; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }

.d-none {display: none;}