.main-container { position: relative; width: 835px; height: 530px; padding: 0; box-sizing: border-box; margin-left: auto; }
.main-image { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #000; }
.main-image img { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; transition: opacity 0.5s ease-in-out; object-fit: cover; opacity: 0; }
.main-image img.show { z-index: 2; opacity: 1; }
.main-image img.fade-out { z-index: 1; opacity: 0; }
.overlay-text { position: absolute; right: 20px; bottom: 20px; z-index: 3; padding: 8px 16px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); font-size: 1.2rem; font-weight: 500; color: white; }
.thumbnails { display: flex; gap: 10px; justify-content: space-between; width: auto; white-space: nowrap; scroll-behavior: smooth; margin-top: 15px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }

.thumbnails.log {justify-content: flex-end; width:auto; gap:20px;}
.thumbnails.log img {width:100%; height:100px; object-fit: cover;}

/* 스크롤바 트랙 (배경) */
.thumbnails::-webkit-scrollbar {
  height: 6px;               /* ✅ 세로가 아닌 가로 스크롤바이므로 height */
}

/* 스크롤바 손잡이 (움직이는 부분) */
.thumbnails::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.4);  /* ✅ 은은한 회색 */
  border-radius: 3px;                    /* ✅ 둥글게 */
  transition: background 0.3s;
}

.thumbnails::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.6);  /* ✅ 마우스 올렸을 때 약간 진해짐 */
}

/* 스크롤바 트랙 투명하게 */
.thumbnails::-webkit-scrollbar-track {
  background: transparent;
}


.thumbnails img { display:table; max-width:120px; width:auto; border-radius: 6px; transition: 0.3s; cursor: pointer; opacity: 0.5; }
.thumbnails img.active { border: 0px solid #ff6600; opacity: 1; transform: scale(1.05); }

/* ✅ 반응형 처리 */
@media screen and (max-width:1024px) {
 .main-container { width: 100%; height: auto; margin: 0 auto; }
 .main-image { height: auto; aspect-ratio: 16/9; }
 .main-image img { position: relative; height: auto; }
 .overlay-text { right: 10px; bottom: 10px; padding: 6px 12px; font-size: 1rem; }
 .thumbnails.log {justify-content: space-between;  width:auto; gap:10px;}
 .thumbnails.log img { width: 100px; height:auto;}
 .thumbnails img { width: 100px; height:auto;}
 }
@media screen and (max-width:768px) {
 .thumbnails img { width: 80px; object-fit: cover;}
 .overlay-text { font-size: 0.9rem; }
 }
@media screen and (max-width:480px) {
  .thumbnails {height:60px; }
 .thumbnails img { width: 60px; object-fit: cover;}

 .thumbnails.log img { width: 60px; object-fit: cover;}

 .overlay-text { font-size: 0.8rem; }
 }