/* 유틸리티 클래스==================================================== */

/* display 관련*/

/* display flex */

.flex {
  display: flex;
}

/* 중앙 정렬 */

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

/* gap 5px */
.flex-gap-5 {
  gap: 5px;
}

/* gap 10px */
.flex-gap-10 {
  gap: 10px;
}

/* gap 20px */
.flex-gap-20 {
  gap: 20px;
}

/* text bold */
.text-bold {
  font-weight: bold;
}

/* margin */

/* 왼쪽 margin */
.margin-left-10 {
  margin-left: 10px;
}

.margin-left-5 {
  margin-left: 5px;
}

/* position */

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

/* position left */
.left0 {
  left: 0;
}

/* potision right */
.right30 {
  right: 30px;
}

/* position top */
.top0 {
  top: 0;
}

/* 가로(width) */

.width100px {
  width: 100px;
}

/* 세로(height) */

.height40px {
  height: 40px;
}

/* z-index */

.z-index-0 {
  z-index: 0;
}

.z-index-5 {
  z-index: 5;
}

/* opacity */

.opacity-100 {
  opacity: 100%;
}

.opacity-0 {
  opacity: 0%;
}

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

/* 둥글기 */

.border-radius-10 {
  border-radius: 10px;
}

.border-radius-100per {
  border-radius: 100%;
}

/* transition */

.transition-all-0-3 {
  transition: all 0.3s;
}

/* 배경색 */

/* 글자색 */

.text-color-fff {
  color: #fff;
}

/* transform */

.scale-up-1-05 {
  transform: scale(1.05);
}
/*
  [파일 역할]
  - 자주 쓰는 단일 목적 유틸리티 클래스(flex, gap, position, z-index 등)를 모아둔 파일.

  [왜 필요한가]
  - 중복 CSS 작성을 줄이고, HTML에서 클래스 조합만으로 빠르게 레이아웃을 구성할 수 있다.

  [핵심 기능]
  - 레이아웃: .flex, .align-center, .flex-gap-*
  - 간격/크기: .margin-left-*, .width100px, .height40px
  - 위치/레이어: .relative, .absolute, .left0, .top0, .z-index-*
  - 인터랙션/표현: .cursor-pointer, .transition-all-0-3, .scale-up-1-05
*/