* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  background-color: #fff;
  overflow: hidden;
}

:root {
  --fastest-duration: 18s;
  --slowest-duration: 23s;
}

/* 전체 컨테이너 및 4행 레이아웃 (간격 5px) */
.opening-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 행 간의 간격 5px */
  padding: 5px 0;
}

/* 각 행 스타일 */
.marquee-row {
  flex: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

/* 무한 애니메이션 트랙 (사진 사이 간격 5px) */
.track {
  display: flex;
  height: 100%;
  gap: 5px; /* 이미지 간의 가로 간격 5px */
  width: max-content;
}

/* 이미지 링크 박스 */
.img-wrapper {
  flex: 0 0 calc(37.5vh - 9.375px);
  aspect-ratio: 3 / 2;
  display: block;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

.blank-tile {
  background-color: #fff;
  cursor: default;
}

.img-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.img-wrapper:hover img {
  opacity: 0.3;
}

/* ==========================================
   방향 및 속도 컨트롤 (CSS Keyframes)
   ========================================== */

/* 왼쪽 이동 애니메이션 */
.move-left .track {
  animation-name: scrollLeft;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 오른쪽 이동 애니메이션 */
.move-right .track {
  animation-name: scrollRight;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Keyframes 정의 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}