/* BASIC css start */
/* -----------------------------
   스와이프 컨테이너 (전체 감싸는 박스)
------------------------------ */
.swipe-wrapper-container {
  position: relative;         /* 버튼 위치를 위한 상대 위치 */
  display: flex;
  align-items: center;        /* 세로 중앙 정렬 */
  width: 400px;
  margin-top: 15px;
  user-select: none;          /* 전체 선택 방지 */
}

/* -----------------------------
   스와이프 버튼
------------------------------ */
.swipe-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 세로 중앙 정렬 */
  z-index: 10;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  width: 20px;
  height: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 기본 숨김 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 마우스 오버 시 버튼 나타남 */
.swipe-wrapper-container:hover .swipe-btn {
  opacity: 1;
}

/* 버튼 위치 */
.swipe-btn.left { left: 0; }
.swipe-btn.right { right: 0; }

/* -----------------------------
   스와이프 영역
------------------------------ */
.swipe-container {
  overflow-x: auto;        /* 가로 스크롤 */
  overflow-y: hidden;      /* 세로 스크롤 제거 */
  scroll-behavior: smooth; /* 부드러운 스크롤 */
  cursor: grab;            /* 드래그 커서 */

  /* 스크롤바 숨김 */
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none;    /* Firefox */
}
.swipe-container::-webkit-scrollbar { display: none; }

/* 스와이프 아이템 래퍼 */
.swipe-wrapper {
  display: flex;
  gap: 1px;       /* 아이템 간 간격 */
  flex-wrap: nowrap; /* 한 줄로 고정 */
}

/* -----------------------------
   카테고리 아이템
------------------------------ */
.cate-item {
  flex: 0 0 auto;         /* 너비 고정 */
  width: 80px;
  display: flex;           /* block → flex 변경 */
  flex-direction: column;  /* 세로 배치 */
  align-items: center;     /* 가로 중앙 정렬 */
  justify-content: center; /* 세로 중앙 정렬 */
  text-align: center;      /* 텍스트 중앙 정렬 */
  gap: 6px;                /* 이미지와 텍스트 간격 */
  user-select: none;       /* 텍스트 선택 방지 */
  -webkit-user-drag: none; /* 이미지/텍스트 드래그 방지 */
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 이미지 스타일 */
.cate-item img {
  width: 65px;
  height: 65px;
  border-radius: 50%;      /* 원형 */
  object-fit: cover;       /* 비율 유지하며 채움 */
  display: block;
  user-select: none;       /* 드래그 방지 */
  -webkit-user-drag: none;
  pointer-events: none;    /* 클릭/드래그 차단 */
}

/* 텍스트 */
.text-wrap p {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;    /* 한글 깨짐 방지 */
  margin: 0;               /* gap으로 간격 조절 */
  user-select: none;       /* 텍스트 선택 방지 */
  -webkit-user-drag: none;
  pointer-events: none;    /* 클릭/드래그 차단 */
}
/* BASIC css end */