/* === Gallery Thumbs Track (A/B 공통, compact ver.) === */

/* 1. 리스트 전체 (그리드 컨테이너 역할) */
.gallery-thumb-list {
  display: grid;
  grid-template-columns: repeat(auto-fill,
      minmax(37px, 1fr));
  /* 90px → 72px로 축소 */
  gap: clamp(4px, 0.6vw, 10px);
  /* gap도 약간 줄임 */
  overflow-y: auto;
  padding-bottom: var(--wf-grid-gutter);
  max-height: 38vh;
  /* 트랙 전체 높이 제한 (A/B 동일 비율) */
}

/* 2. 개별 아이템 (썸네일 셀) */
.gallery-thumb-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. 이미지 자체 스타일 */
.thumb-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

/* 4. 상위 wrapper — 필요시만 스크롤 제어 가능 */
.gallery-thumb-wrapper {
  overflow: hidden;
  height: auto;
}

/* -------------------------------------------------------------------------
   모바일(≤767.98px) 썸네일 트랙 축소
   - 한 행에 더 많은 썸네일이 들어가도록 최소 폭과 간격을 줄임
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .gallery-thumb-list {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: clamp(2px, 0.8vw, 6px);
  }
}

.gallery-thumbs-trackC.trackC--small {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: clamp(3px, 0.4vw, 8px);
  /* gap도 약간 줄임 → 비례 유지 */
}

.gallery-thumbs-trackC.trackC--small .yt-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: scale(0.7);
  /* 이미지 자체 70% 축소 */
}