.compare-tool{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}


.compare-toolbar{
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0,0,0,.03);
}


.compare-title{ font-weight:700; margin-right:8px; }
.compare-left,.compare-mid,.compare-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }


.compare-btn{
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}


.compare-zoom{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.compare-zoom input[type="range"]{ width:220px; }


.compare-tune{ font-size:14px; }
.compare-tune label{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.compare-tune input[type="range"]{ width:180px; }
.compare-hint{ margin:8px 0 0; font-size:12px; opacity:.75; }


.compare-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: #fff;
}


@media (max-width: 700px){
  .compare-toolbar{ grid-template-columns: 1fr; }
  .compare-zoom input[type="range"]{ width:100%; }
  .compare-grid{ grid-template-columns: 1fr; }
}


.compare-pane{ margin:0; position:relative; }


.compare-viewport{
  width:100%;
  /* ブロック属性で上書きされる（JSで反映） */
  aspect-ratio: 4 / 3;
  background:#111;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  touch-action:none;
}


.compare-viewport img{
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  transform: translate(0px,0px) scale(1);
  transform-origin: 0 0;
  will-change: transform;
  cursor: grab;
}


.compare-tool.is-zoomed .compare-viewport img{ cursor: grab; }
.compare-tool.is-zoomed .compare-viewport img:active{ cursor: grabbing; }


.compare-label{
  position:absolute;
  left:10px;
  top:10px;
  background: rgba(0,0,0,.55);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  pointer-events:none;
}