/* Before-and-after gallery: a drag-to-compare slider over two same-size screenshots. */
.ba { position: relative; max-width: 1040px; margin: 30px auto 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(16, 16, 16, 0.18); aspect-ratio: 8 / 5; background: #eef0f6; --pos: 50%; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 16, 0.15); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(16, 16, 16, 0.28); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ba-knob svg { width: 26px; height: 26px; fill: #0f6f9b; }
.ba-tag { position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.ba-tag.is-before { left: 14px; background: rgba(16, 16, 16, 0.72); color: #fff; }
.ba-tag.is-after { right: 14px; background: #0f6f9b; color: #fff; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.ba-range:focus-visible + .ba-knob { outline: 3px solid #43b8ea; outline-offset: 3px; }
.ba-hint { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--lp-text); }

.ba-case { max-width: 1040px; margin: 0 auto; }
.ba-case h2 { margin-bottom: 6px; }
.ba-place { margin: 0 0 22px; text-align: center; color: var(--lp-blue-dark); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ba-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.ba-notes > div { background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; padding: 20px 22px; }
.ba-notes h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.ba-notes .is-before h3 { color: #5b6470; }
.ba-notes .is-after h3 { color: #0f6f9b; }
.ba-notes ul { margin: 0; padding-left: 18px; list-style: disc; }
.ba-notes li { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.ba-links { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin-top: 22px; }
.ba-jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px 0 0; padding: 0; list-style: none; }
.ba-jump a { display: inline-block; padding: 8px 16px; border: 1px solid #d6e9f3; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.ba-jump a:hover { border-color: #43b8ea; }

@media (max-width: 767px) {
  .ba { border-radius: 12px; margin-top: 22px; }
  .ba-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .ba-tag { top: 10px; font-size: 11px; padding: 4px 9px; }
  .ba-tag.is-before { left: 10px; }
  .ba-tag.is-after { right: 10px; }
  .ba-notes { grid-template-columns: 1fr; }
}