/* 1. 전체 화면 설정 */
body {
  margin: 0;
  overflow: hidden;
  background-color: #f0f0f0;
}

/* 2. 가로 스크롤 컨테이너 */
.container {
  display: flex;
  flex-direction: row;
  align-items: center; /* 수직 중앙 정렬 핵심 */
  gap: 20px;
  padding: 0 100px;
  width: 100%;
  box-sizing: border-box; /* 추가: 패딩을 전체 너비에 포함시킴 */
  height: 100vh;
  overflow-x: scroll; /* 스크롤바 활성화 */
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; /* 얇은 스크롤바 표시 */
}

.container::after {
  content: "";
  flex: 0 0 70px; /* gap(30px) + 70px = 100px의 우측 여백 효과 */
}

/* 3. 공통 아이템 설정 (배너와 헤더 박스의 키를 맞춤) */
.item {
  flex: 0 0 auto;
  height: 65vh; /* 모든 칸의 높이를 통일 */
  scroll-snap-align: center;
}

/* 4. 헤더(화살표) 전용 박스 설정 */
.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;         /* 변경: 120px 고정 해제 (내용물 길이에 맞춤) */
  padding: 0 0px;     /* 추가: 좌우 여백 확보 (원하는 간격으로 조절) */
}

/* 화살표 이미지 자체는 너무 커지지 않게 제한 */
.group-header {
  /*height: 30px;        !* 변경: 모든 화살표의 세로 길이를 동일하게 고정 (수치 조절 가능) *!*/
  height: clamp(20px, 5vh, 60px); /* 변경: 최소 30px, 기본 화면 높이의 5%, 최대 60px */
  width: auto;
  object-fit: contain;
  pointer-events: none;
}

/* 5. 배너 이미지 설정 */
.banner {
  width: auto;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* 배너에만 호버 효과 적용 (화살표는 안 움직임) */
/* 변경: 껍데기에 마우스를 올렸을 때 내부 이미지만 위로 이동 */
.banner-wrapper:hover .banner {
  transform: translateY(-30px);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
}

/* 새로 추가: 호버 인식 영역을 고정해주는 껍데기 역할 */
.banner-wrapper {
  display: flex;
  align-items: center; /* 이미지가 부모 컨테이너 내에서 중앙을 유지하도록 */
}

/* 메인 박스 1:1 비율 */
.main-box {
  /*aspect-ratio: 1 / 1;*/
  width: auto;         /* 추가: 가로 늘어짐 방지 */
  object-fit: contain;   /* 추가: 1:1 비율에 맞춰 이미지 꽉 채우기 (여백을 남기려면 contain 사용) */
}

/* 반응형 처리 */
@media (max-height: 500px) {
  .item {
    height: 80vh;
  }
}

.cat-link {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: #a0a0a0; /* 눈에 띄지 않는 옅은 회색 */
  font-size: 12px;
  text-decoration: none;
  z-index: 1000; /* 다른 요소들 위로 올라오도록 설정 */
  transition: color 0.3s ease;
}

.cat-link:hover {
  color: #333; /* 마우스를 올렸을 때만 진해지도록 */
  text-decoration: underline;
}