/* venus-ba — before/after comparison engine styles (pairs with venus-ba.js).
   Standalone layer loaded AFTER venus-v2.css; never modifies it.
   Tokens (Venus design language): cream #f5efe6 · parchment #e9e4db ·
   wine #7a2530 · champagne/gold #c9a24b · ink #5c1a1e · Cinzel labels. */

/* ── v2-ba ─────────────────────────────────────────────────────────── */
.v2-ba{position:relative;overflow:hidden;aspect-ratio:4/3;background:#e9e4db;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.v2-ba:focus-visible{outline:2px solid #c9a24b;outline-offset:3px}

/* layers — AFTER underneath, BEFORE clipped on top (clip-path set by JS) */
.v2-ba-pane{position:absolute;inset:0}
.v2-ba-pane>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.v2-ba-pane>image-slot,.v2-ba-pane>div,.v2-ba-pane>picture{position:absolute;inset:0;width:100%;height:100%}
.v2-ba-pane>picture>img{width:100%;height:100%;object-fit:cover}
.v2-ba-pane-before{clip-path:inset(0 50% 0 0);-webkit-clip-path:inset(0 50% 0 0);transition:clip-path .45s cubic-bezier(.16,1,.3,1);will-change:clip-path}

/* gold divider + circular handle */
.v2-ba-divider{position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:#c9a24b;box-shadow:0 0 0 .5px rgba(92, 26, 30,.22),0 0 22px rgba(201, 162, 75,.55);pointer-events:none;transition:left .45s cubic-bezier(.16,1,.3,1)}
.v2-ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(245, 239, 230,.94);border:1px solid #c9a24b;box-shadow:0 12px 28px -12px rgba(46,32,24,.6);color:#7a2530;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.v2-ba-handle svg{display:block}
.v2-ba:hover .v2-ba-handle,.v2-ba:focus-visible .v2-ba-handle{transform:translate(-50%,-50%) scale(1.05)}
.v2-ba.is-dragging .v2-ba-handle{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 16px 34px -12px rgba(46,32,24,.72)}

/* drag / scripted sweep: position must track the pointer with no lag */
.v2-ba.is-dragging .v2-ba-pane-before,.v2-ba.is-anim .v2-ba-pane-before,
.v2-ba.is-dragging .v2-ba-divider,.v2-ba.is-anim .v2-ba-divider{transition:none}

/* Cinzel corner labels — mirror the cases.html badge language */
.v2-ba-label{position:absolute;top:12px;z-index:2;padding:5px 10px;font-family:Cinzel,serif;font-size:10px;font-weight:600;letter-spacing:.22em;text-indent:.22em;pointer-events:none;transition:opacity .4s}
.v2-ba-label-before{left:12px;background:rgba(92, 26, 30,.8);color:#e9d79e}
.v2-ba-label-after{right:12px;background:#7a2530;color:#f5efe6}

/* optional 의료법 제56조 notice line under a viewer */
.v2-ba-note{margin-top:12px;font-size:11.5px;font-weight:300;line-height:1.9;letter-spacing:.02em;color:#8A7F76}

/* dark chapters ([data-venus-dark] scope from venus-v2.css) */
[data-venus-dark] .v2-ba-handle{background:rgba(92, 26, 30,.88);color:#c9a24b}
[data-venus-dark] .v2-ba-note{color:rgba(245, 239, 230,.55)}

/* reduced motion: no transitions anywhere (the JS intro sweep is already
   gated off in venus-ba.js under the same media query) */
@media (prefers-reduced-motion:reduce){
  .v2-ba-pane-before,.v2-ba-divider,.v2-ba-handle,.v2-ba-label{transition:none}
}