/* =========================
   Spacing (margin)
========================= */
.m-0 { margin: 0 !important; }
.m-1 { margin: 4px !important; }
.m-2 { margin: 8px !important; }
.m-3 { margin: 12px !important; }
.m-4 { margin: 16px !important; }
.m-5 { margin: 20px !important; }

.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 20px !important; }

.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 20px !important; }

.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 12px !important; }

.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 12px !important; }


/* =========================
   Padding
========================= */
.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 12px !important; }
.p-4 { padding: 16px !important; }
.p-5 { padding: 20px !important; }

.pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 12px !important; }

.pb-1 { padding-bottom: 4px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 12px !important; }

.pl-1 { padding-left: 4px !important; }
.pr-1 { padding-right: 4px !important; }


/* =========================
   Flex
========================= */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }

.flex-center {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex !important;
  flex-direction: column;
}


/* =========================
   Text
========================= */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-bold { font-weight: bold; }

.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }


/* =========================
   Width / Height
========================= */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }


/* =========================
   Border / Radius
========================= */
.rounded { border-radius: 6px !important; }
.rounded-sm { border-radius: 4px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-pill { border-radius: 999px !important; }

.border { border: 1px solid #e5e5e5; }
.border-none { border: none !important; }


/* =========================
   Color
========================= */
.text-muted { color: #777; }
.text-primary { color: #7b2ff7; }
.text-white { color: #fff; }

.bg-light { background: #f8f9fa; }
.bg-white { background: #fff; }


/* =========================
   Cursor
========================= */
.cursor-pointer { cursor: pointer; }



/* border */
.border { border: 1px solid #ddd; }

/* 방향별 */
.border-top    { border-top: 1px solid #ddd; }
.border-bottom { border-bottom: 1px solid #ddd; }
.border-left   { border-left: 1px solid #ddd; }
.border-right  { border-right: 1px solid #ddd; }

/* 제거 */
.border-0 { border: none !important; }