/* ============================================
   縮圖預覽 — DOM 等比縮放
   ============================================ */

.thumbnail {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}

.thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 2px solid var(--color-thumb-idle);
  pointer-events: none;
  z-index: 5;
  transition: border-color var(--transition-fast), border-width var(--transition-fast);
}

.thumbnail:hover::after {
  border-color: #aaa;
}

.thumbnail.is-active {
  background: rgba(226, 45, 42, 0.04);
}

.thumbnail.is-active::after {
  border: 3px solid var(--cover-red, #e22d2a);
}

.thumbnail.is-active:hover::after {
  border-color: var(--cover-red, #e22d2a);
}

.thumbnail-viewport {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: #fff;
}

.thumbnail-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 22px;
  height: 22px;
  background: rgba(2, 21, 38, 0.35);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  pointer-events: none;
  transition: background var(--transition-fast), font-weight var(--transition-fast);
}

.thumbnail.is-active .thumbnail-badge {
  background: var(--cover-red, #e22d2a);
  font-weight: 700;
}

.thumbnail-canvas {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.thumbnail-canvas > .slide {
  position: absolute;
  inset: 0;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  background: var(--color-slide);
}

.thumbnail-canvas .slide-content {
  width: 100%;
  height: 100%;
}

.thumbnail-canvas [data-animate] {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

.thumbnail-canvas .mockup-page__thumb-poster {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}