.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }


/* flex */

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

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

.items-center       { align-items: center; }

.box-border { box-sizing: border-box; }

/* width */
.w-1 { width: 0.25rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem !important; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem !important; }
.w-32 { width: 8rem !important; }
.w-40 { width: 10rem !important; }
.w-48 { width: 12rem; }
.w-56 { width: 14rem !important; }
.w-64 { width: 16rem !important; }
.w-128 { width: 32rem !important; }

.w-rem-9 { width: 9rem; }
.w-80 { width: 80%; }
.w-100 { width: 100%; }

.w-p-50 { width: 50%; }

.w-full { width: 100% !important; }

/* height */
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem !important; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-32 { height: 8rem; }
.h-48 { height: 12rem; }
.h-64 { height: 16rem; }
.h-auto {height: auto !important; }

.h-full { height: 100% !important; }

.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }

/* margin */
.m-0 {margin: 0;}
.m-1 {margin: .25rem;}

.mt-0 { margin-top: 0;          }
.mt-1 { margin-top: .25rem;     }
.mt-2 { margin-top: .5rem;      }
.mt-3 { margin-top: .75rem;     }
.mt-4 { margin-top: 1rem;       }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem !important;  }
.mb-2 { margin-bottom: .5rem !important;   }
.mb-3 { margin-bottom: .75rem !important;  }
.mb-4 { margin-bottom: 1rem !important;    }
.mb-8 { margin-bottom: 2rem !important;    }
.mb-16 { margin-bottom: 3rem !important;    }
.mb-24 { margin-bottom: 3.5rem !important;    }
.mb-32 { margin-bottom: 4rem !important;    }

.ml-1 { margin-left: .25rem;    }
.ml-2 { margin-left: .5rem;     }
.ml-3 { margin-left: .75rem;    }
.ml-4 { margin-left: 1rem;      }

.mr-1 { margin-right: .25rem !important;   }
.mr-2 { margin-right: .5rem !important;    }
.mr-3 { margin-right: .75rem !important;   }
.mr-4 { margin-right: 1rem !important;     }

.mx-1 { margin-left: .25rem; margin-right: .25rem;  }
.mx-2 { margin-left: .5rem; margin-right: .5rem;    }
.mx-3 { margin-left: .75rem; margin-right: .75rem;  }
.mx-4 { margin-left: 1rem; margin-right: 1rem;      }

.my-1 { margin-bottom: .25rem; margin-top: .25rem;  }
.my-2 { margin-bottom: .5rem; margin-top: .5rem;    }
.my-3 { margin-bottom: .75rem; margin-top: .75rem;  }
.my-4 { margin-bottom: 1rem; margin-top: 1rem;      }

/* padding */

.p-0 { padding: 0 !important; }
/* 모든 면(All sides) 패딩 */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.50rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }

.pt-0 { padding-top: 0 !important; }
/* 위쪽(Top) 패딩 */
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.50rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }

/* 아래쪽(Bottom) 패딩 */
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.50rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }

/* 왼쪽(Left) 패딩 */
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.50rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }

/* 오른쪽(Right) 패딩 */
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.50rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }

/* 좌우(X-axis) 패딩 */
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.50rem; padding-right: 0.50rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

/* 상하(Y-axis) 패딩 */
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.50rem; padding-bottom: 0.50rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.border-1 { border-width: 1px; border-style: solid; }
.broder-2 { border-width: 2px; border-style: solid; }

.rounded        { border-radius: 0.25rem; }
.rounded-md     { border-radius: 0.375rem; }
.rounded-lg     { border-radius: 0.5rem; }
.rounded-xl     { border-radius: 0.75rem; }
.rounded-2xl    { border-radius: 1rem; }

.border-zinc-100 { border-color: rgb(244 244 245); }
.border-gray-100 { border-color: rgb(243 244 246); }
.border-zinc-200 { border-color: rgb(228 228 231); }
.border-black-100 { border-color: #000000; }

/* font-size */
.font-size-1 { font-size: .25rem; }
.font-size-2 { font-size: .5rem; }
.font-size-3 { font-size: .75rem; }
.font-size-4 { font-size: 1rem; }
.font-size-5 { font-size: 1.25rem; }

.font-xl { font-size: 1.25rem; line-height: 1.75rem; }
.font-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-3xl    { font-size: 1.875rem; line-height: 2.25rem; }

/* Font Weight */
.font-weight-thin { font-weight: 100; }
.font-weight-extra-light { font-weight: 200; }
.font-weight-light { font-weight: 300; }
.font-weight-normal { font-weight: 400; }
.font-weight-medium { font-weight: 500; }
.font-weight-semi-bold { font-weight: 600; }
.font-weight-bold { font-weight: 700; }
.font-weight-extra-bold { font-weight: 800; }
.font-weight-black {font-weight: 900; }

/* object-fit */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/***** Button Color *****/

.button-red-50      { color: #fff !important; background-color: #f2f2f2; }

.button-red-100     { color: #fff !important; background-color: #fee2e2; }

.button-red-200     { color: #fff !important; background-color: #fecaca; }

.button-red-300     { color: #fff !important; background-color: #fca5a5; }

.button-red-400     { color: #fff !important; background-color: #f87171; }

.button-red-500     { color: #fff !important; background-color: #ef4444; }

.button-red-600     { color: #fff !important; background-color: #dc2626; }

.button-red-700     { color: #fff !important; background-color: #b91c1c; }

.button-red-800     { color: #fff !important; background-color: #991b1b; }

.button-red-900     { color: #fff !important; background-color: #7f1d1d; }

.button-green-50    { color: #fff !important; background-color: #f0fdf4; }

.button-green-100   { color: #fff !important; background-color: #dcfce7; }

.button-green-200   { color: #fff !important; background-color: #bbf7d0; }

.button-green-300   { color: #fff !important; background-color: #86efac; }

.button-green-400   { color: #fff !important; background-color: #4ade80; }

.button-green-500   { color: #fff !important; background-color: #22c55e; }

.button-green-600   { color: #fff !important; background-color: #16a34a; }

.button-green-700   { color: #fff !important; background-color: #15803d; }

.button-green-800   { color: #fff !important; background-color: #166534; }

.button-green-900   { color: #fff !important; background-color: #14532d; }

/***** Text Color *****/

.text-white { color: rgb(255 255 255) !important; }

.text-gray-600 { color: rgb(75 85 99) !important; }

.text-green-600 { color: rgb(22 163 74) !important; }

.text-blue-600 { color: rgb(37 99 235) !important; }

.text-red-400 { color: rgb(248 113 113) !important; }

.text-red-600 { color: rgb(220 38 38) !important; }