
.acg-compare{--acg-accent:#d21123;--acg-ink:#1a1613;--acg-paper:#fff;position:relative;display:block;width:100%;max-width:100%;
  aspect-ratio:3/2;overflow:hidden;background:var(--acg-paper);user-select:none;-webkit-user-select:none;touch-action:pan-y;
  border:1px solid var(--acg-ink);box-sizing:border-box}
.acg-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;margin:0}
.acg-compare .acg-compare-b{clip-path:inset(0 0 0 var(--acg-pos,50%))}
.acg-compare .acg-compare-bar{position:absolute;top:0;bottom:0;left:var(--acg-pos,50%);width:2px;margin-left:-1px;background:var(--acg-accent);
  box-shadow:0 0 0 1px rgba(255,255,255,.75)}
.acg-compare .acg-compare-knob{position:absolute;top:50%;left:var(--acg-pos,50%);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:var(--acg-accent);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:ew-resize;padding:0;
  display:flex;align-items:center;justify-content:center;color:#fff;font:700 14px/1 system-ui,sans-serif;letter-spacing:-1px}
.acg-compare .acg-compare-knob:focus-visible{outline:3px solid #ffd400;outline-offset:2px}
.acg-compare .acg-compare-knob.is-pointer-focus:focus-visible{outline:none}
.acg-compare .acg-compare-label{position:absolute;bottom:8px;padding:3px 8px;font:700 11px/1.3 system-ui,"Noto Sans JP",sans-serif;
  letter-spacing:.08em;color:#fff;background:rgba(26,22,19,.82);pointer-events:none}
.acg-compare .acg-compare-label.a{left:8px}.acg-compare .acg-compare-label.b{right:8px}
.acg-compare.is-dragging{cursor:ew-resize}
.acg-compare.is-stacked{aspect-ratio:auto;overflow:visible;border:0;background:transparent;touch-action:auto;
  display:flex;flex-direction:column;align-items:flex-start}
.acg-compare.is-stacked img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:3/2;border:1px solid var(--acg-ink);box-sizing:border-box;
  clip-path:none;pointer-events:auto;cursor:zoom-in}
.acg-compare.is-stacked .acg-compare-a{order:1}
.acg-compare.is-stacked .acg-compare-label.a{order:2}
.acg-compare.is-stacked .acg-compare-b{order:3;margin-top:12px}
.acg-compare.is-stacked .acg-compare-label.b{order:4}
.acg-compare.is-stacked .acg-compare-bar,.acg-compare.is-stacked .acg-compare-knob{display:none}
.acg-compare.is-stacked .acg-compare-label{position:static;display:inline-block;margin:4px 0 0;background:var(--acg-ink)}
.acg-lightbox{position:fixed;inset:0;z-index:2147483000;background:rgba(10,8,7,.92);display:none;align-items:center;justify-content:center;padding:16px}
.acg-lightbox.is-open{display:flex}
.acg-lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.acg-lightbox img{max-width:100%;max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);width:auto;height:auto;display:block;background:#fff}
.acg-lightbox figcaption{color:#fff;font:700 13px/1.4 system-ui,"Noto Sans JP",sans-serif;letter-spacing:.08em}
.acg-lightbox .acg-lightbox-close{position:absolute;top:12px;right:12px;width:48px;height:48px;border:2px solid #fff;border-radius:50%;
  background:rgba(26,22,19,.9);color:#fff;font:700 26px/1 system-ui,sans-serif;cursor:pointer;padding:0}
.acg-lightbox .acg-lightbox-close:focus-visible{outline:3px solid #ffd400}
html.acg-lightbox-open,html.acg-lightbox-open body{overflow:hidden}
/* The SVG shares the comparison origin. Its reverse leaf extends left over A;
   its tapered silhouette clips A, while B remains the full sheet underneath. */
.acg-compare.is-flip{--acg-grip:22px;--acg-hand-size:128px;--acg-hand-x:-6%;--acg-hand-y:64%;--acg-hand-angle:20deg;
  --acg-contact-x:calc(var(--acg-pos,78%) + var(--acg-hand-x));cursor:grab;touch-action:none;isolation:isolate}
.acg-compare.is-flip.is-dragging{cursor:grabbing}
.acg-compare.is-flip .acg-compare-a{clip-path:var(--acg-edge,inset(0 calc(100% - var(--acg-pos,78%)) 0 0));z-index:2}
.acg-compare.is-flip .acg-compare-b{clip-path:none;z-index:1}
.acg-compare.is-flip .acg-compare-bar{inset:0;width:auto;margin:0;background:none;box-shadow:none;pointer-events:none;
  transform:translateX(var(--acg-pos,78%));z-index:4}
.acg-compare-curl{display:block;width:100%;height:100%;overflow:visible;
  transform:scaleX(var(--acg-roll,1));transform-origin:0 50%;pointer-events:none}
.acg-paper-print{transform:translateX(calc(0% - var(--acg-pos,78%)));filter:grayscale(1)}
.acg-compare-control{position:absolute;inset:0;z-index:5;pointer-events:none;transform:translate(var(--acg-contact-x),var(--acg-hand-y))}
/* Only a fully closed leaf has no contact to follow; keep its button reachable. */
.acg-compare.is-flip.is-all-a,.acg-compare.is-flip.is-all-b{
  --acg-contact-x:clamp(var(--acg-grip),calc(var(--acg-pos,78%) + var(--acg-hand-x)),calc(100% - var(--acg-grip)))}
.acg-compare.is-flip .acg-compare-knob{position:absolute;left:0;top:0;width:44px;height:44px;margin:0;transform:translate(-50%,-50%)}
.acg-compare.is-flip .acg-compare-knob{
  border:0;border-radius:18px;background:transparent;box-shadow:none;cursor:grab;pointer-events:auto;letter-spacing:normal;-webkit-tap-highlight-color:transparent}
.acg-compare.is-flip .acg-compare-knob:focus-visible{outline-offset:-4px}
.acg-hand-frames{position:absolute;left:50%;top:50%;width:var(--acg-hand-size);height:var(--acg-hand-size);
  transform:rotate(calc(var(--acg-hand-angle) - 22deg));transform-origin:0 0;pointer-events:none}
/* 400px source coordinates: open (326,99), grab (300,68). Both map to (0,0).
   Fade only the cut-off forearm; the supplied bitmaps and fingertips stay intact. */
.acg-compare .acg-compare-hand{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;
  mask-image:linear-gradient(45deg,transparent 20%,#000 36%);
  pointer-events:auto;transition:opacity 290ms cubic-bezier(.2,.7,.25,1)}
.acg-hand-open{transform:translate(-81.5%,-24.75%);opacity:1}
.acg-hand-grab{transform:translate(-75%,-17%);opacity:0}
.acg-compare.is-dragging .acg-compare-hand{transition-duration:130ms}
.acg-compare.is-dragging .acg-hand-open{opacity:0}
.acg-compare.is-dragging .acg-hand-grab{opacity:1}
.acg-compare.is-flip.is-dragging .acg-compare-knob{cursor:grabbing}
.acg-compare-hint{opacity:0;position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:6px 9px;border-radius:20px;background:rgba(255,254,247,.96);color:#49453b;box-shadow:0 1px 4px #221c1629;
  font:500 10px/1.2 system-ui,"Noto Sans JP",sans-serif;letter-spacing:.04em;pointer-events:none;transition:opacity 180ms ease}
.acg-compare.is-flip .acg-compare-hint{top:calc(50% + var(--acg-hand-size) * .8)}
.acg-compare-hint::before{content:"↔";margin-right:5px;font-size:13px}
.acg-compare.is-inviting .acg-compare-hint,.acg-compare-knob:hover .acg-compare-hint,.acg-compare-knob:focus-visible .acg-compare-hint{opacity:1}
.acg-compare.has-interacted .acg-compare-hint,.acg-compare.is-dragging .acg-compare-hint{opacity:0}
.acg-compare.is-flip .acg-compare-label{z-index:6;background:rgba(255,254,247,.93);color:#28261f;border-radius:3px;
  padding:5px 9px;box-shadow:0 1px 3px #1c181326;font-weight:600;letter-spacing:.06em}
.acg-compare.is-flip .acg-compare-label::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:#54534e;vertical-align:1px}
.acg-compare.is-flip .acg-compare-label.a::before{background:var(--acg-accent)}
.acg-compare.is-flip.is-all-a:not(.is-stacked) .acg-compare-label.b,.acg-compare.is-flip.is-all-b:not(.is-stacked) .acg-compare-label.a{opacity:0}
.acg-compare.is-small .acg-compare-knob{width:26px;height:26px;margin:-13px 0 0 -13px;font-size:9px;border-width:1.5px}
.acg-compare.is-small.is-flip{--acg-hand-size:56px}
.acg-compare.is-small.is-flip .acg-compare-knob{width:44px;height:44px;margin:0;border:0}
.acg-compare.is-small .acg-compare-hint{display:none}
.acg-compare.is-small .acg-compare-label{font-size:8px;padding:2px 5px;bottom:4px}
.acg-compare.is-small .acg-compare-label::before{width:4px;height:4px;margin-right:4px;vertical-align:1px}
.acg-compare.is-small .acg-compare-label.a{left:4px}.acg-compare.is-small .acg-compare-label.b{right:4px}
.acg-compare.is-stacked{cursor:auto;touch-action:auto}
.acg-compare.is-stacked .acg-compare-a,.acg-compare.is-stacked .acg-compare-b{clip-path:none}
.acg-compare.is-stacked .acg-compare-control,.acg-compare.is-stacked .acg-compare-bar{display:none}
.acg-compare.is-stacked .acg-compare-label{box-shadow:none;background:transparent;padding:5px 0}
.acg-compare.is-stacked img:focus-visible{outline:3px solid #ffd400;outline-offset:2px}
.acg-compare[data-zoom="off"].is-stacked img{cursor:default}
@media(prefers-reduced-motion:reduce){
  .acg-compare-hand,.acg-compare-hint{transition:none!important;animation:none!important}
}
@media print{
  .acg-compare .acg-compare-label{opacity:1!important}
  .acg-compare,.acg-compare.is-stacked{aspect-ratio:auto;overflow:visible;border:0;background:none;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 6px;break-inside:avoid}
  .acg-compare img,.acg-compare.is-stacked img{position:static;width:100%;height:auto;aspect-ratio:auto;
    clip-path:none!important;border:.7px solid var(--acg-ink);box-sizing:border-box;order:0!important;margin:0!important;grid-row:1}
  .acg-compare .acg-compare-bar,.acg-compare .acg-compare-knob,.acg-compare .acg-compare-control{display:none}
  .acg-compare .acg-compare-label,.acg-compare.is-stacked .acg-compare-label{position:static;order:0;grid-row:2;box-shadow:none;
    margin:0;background:none;color:var(--acg-ink);padding:2px 0}
  .acg-compare .acg-compare-a,.acg-compare .acg-compare-label.a{grid-column:1}
  .acg-compare .acg-compare-b,.acg-compare .acg-compare-label.b{grid-column:2}
  .acg-lightbox.is-open{display:none}
  html.acg-lightbox-open,html.acg-lightbox-open body{overflow:visible}
}
