/* before-after.css — ベースライン(自動読込)。最低限の見た目を保証する。
   上書き・拡張はページ側/custom側で行い、このファイルと同名クラスをゼロから書き直さないこと。 */
.ba { position: relative; overflow: hidden; border-radius: var(--radius, 8px); user-select: none; touch-action: none; }
.ba-before img, .ba-after img { display: block; width: 100%; height: auto; pointer-events: none; }
.ba-after { position: absolute; inset: 0; }
.ba-after img { width: 100%; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--color-accent); transform: translateX(-50%); pointer-events: none; }
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2.25rem; height: 2.25rem;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--color-accent); color: var(--color-on-accent, #fff);
}
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-label {
  position: absolute; top: .75rem; padding: .25rem .75rem; font-size: .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 75%, transparent); color: var(--color-text);
}
.ba-label-before { left: .75rem; }
.ba-label-after { right: .75rem; }

/* セクションの器。 */
.results {
  padding: clamp(2rem, 5vw, 4rem) 0;
}