/* ===== 본문 비교 ===== */
.img-comp-container {
  position: relative;
  max-width: 1200px;
  margin: 30px auto;
  user-select: none;
}

.img-comp-img {
  position: absolute;
  inset: 0;
}

.img-comp-img img {
  width: 100%;
  display: block;
  pointer-events: none;
}

/* ===== 슬라이더 ===== */
.img-comp-slider {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .25s ease;
}

.img-comp-container:hover .img-comp-slider,
.img-comp-container.dragging .img-comp-slider {
  opacity: 1;
}

/* ===== 목록 미리보기 ===== */
.list-compare-thumb {
  position: relative;
}

.list-compare-thumb img.overlay {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}


.compare-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: transform .2s ease, opacity .2s ease;
}

.compare-btn:hover {
  opacity: 1;
  transform: scale(1.08);
}

.compare-btn svg circle,
.compare-btn svg path {
  transition: stroke .2s ease;
}

.compare-btn:hover svg circle,
.compare-btn:hover svg path {
  stroke: #000;
}

.compare-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: .85;
  transition: transform .2s ease, opacity .2s ease;
}

.compare-btn:hover {
  opacity: 1;
  transform: scale(1.08);
}