.thumbnail-preview {
    position: fixed;
    top: 30vh; /* viewport height의 50% */
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 999992; /* 다른 요소들 위에 표시 */
}

.swipe-indicator {
  z-index: 999992;
  opacity: 1;
  transition: opacity 0.5s ease; /* ← 여기 추가 */
}

.thumbnail-preview.left {
    left: -70px;
}

.thumbnail-preview.right {
    right: -70px;
}

/* 상호작용 클래스들 */
.swipe-indicator.prev .thumbnail-preview.left {
    opacity: 1;
    left: 16px;
    color: white;
    /* background-color: var(--point-color); */
}

.swipe-indicator.next .thumbnail-preview.right {
    opacity: 1;
    right: 16px;
    color: white;
    /* background-color: var(--point-color); */
}

.swipe-indicator {
  z-index: 999992;
}

.swipe-indicator.fade-out {
  opacity: 0;
}