/* -------------------------------------------------
  6) 스크롤 인디케이터
------------------------------------------------- */
/* product-area 내부에서 sticky로 맨 아래에 고정 */
.scroll-indicator {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;  /* 원하는 크기로 조정 */
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 10;
  background: transparent;
  pointer-events: none;
}

/* arrow-container: 어두운 회색 배경 유지하되 크기 더 키움 */
.arrow-container {
  background: rgba(40, 40, 40, 0.85);
  backdrop-filter: blur(6px);
  border-radius: 9999px;
  padding: 24px;                     /* 여백을 크게 늘려 화살표가 크게 보여지도록 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

/* arrow-down (chevron 아이콘): 크기를 훨씬 키움 */
.arrow-down {
  font-size: 60px;                   /* 기존 32px → 60px으로 대폭 확대 */
  color: #ffffff;
  text-shadow: none;
  animation: chevron-bounce 1s infinite ease-in-out;
  display: block;
}

/* chevron 바운스 애니메이션 */
@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(12px); } /* 이동 거리도 살짝 늘림 */
}

/* 숨김 상태: opacity만 조절 */
.scroll-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}


/* 카테고리 패널이 sticky 기준이 되게 부모에 설정 */
.category-panel {
  position: relative;
  overflow-y: auto;
}

/* sticky → bottom만 지정, 전체 너비 확보 후 중앙 정렬 */
#categoryScrollIndicator {
  position: sticky;
  bottom: 16px;
  width: 100%;
  /* 방법1: 텍스트 중앙정렬 */
  text-align: center;

  /* 또는 방법2: flex 중앙정렬
  display: flex;
  justify-content: center;
  */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: auto;
}

/* 화살표 컨테이너는 transform 없이 그대로 */
#categoryScrollIndicator .arrow-container {
  display: inline-block;  /* 방법1일 때 */
  /* display:flex; justify-content:center; 일 때는 제거해도 됩니다 */
  background: rgba(40, 40, 40, 0.85);
  backdrop-filter: blur(6px);
  border-radius: 9999px;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transform: none;
}

/* 아래 방향 화살표 유지 */
#categoryScrollIndicator .arrow-down {
  font-size: 40px;
  color: #ffffff;
  animation: chevron-bounce 1s infinite ease-in-out;
  transform: none;
}

/* toggle */
#categoryScrollIndicator.hidden {
  opacity: 0;
  pointer-events: none;
}
#categoryScrollIndicator:not(.hidden) {
  opacity: 1;
}