/* before-after carousel — detail page (1회 작성, 2026-05-08).
   build-page.py:build_before_after() 마크업과 동기. promo-carousel CSS 패턴 차용. */
.ba-wrap{position:relative;overflow:hidden;padding:0 24px;margin:24px 0}
.ba-car{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 4px}
.ba-car::-webkit-scrollbar{display:none}
.ba-slide{flex:0 0 380px;scroll-snap-align:start;border:1px solid var(--border,#ddd);border-radius:8px;overflow:hidden;background:var(--cream,#faf8f3);transition:all .3s;display:flex;flex-direction:column}
.ba-slide:hover{border-color:var(--gold,#c9a96e);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.ba-slide img{width:100%;height:auto;display:block;object-fit:cover;background:#eee}
.ba-lbl{padding:12px 16px;font-size:13px;color:var(--text,#333);text-align:center;font-weight:600;background:var(--cream,#faf8f3)}
.ba-arr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(26,26,26,.15);border:1px solid rgba(201,169,110,.25);color:rgba(201,169,110,.85);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:all .3s}
.ba-arr:hover{background:rgba(201,169,110,.6);color:var(--white,#fff);border-color:var(--gold,#c9a96e)}
.ba-arr.prev{left:-8px}
.ba-arr.next{right:-8px}
.ba-disc{text-align:center;margin-top:16px;font-size:12px;color:var(--text-muted,#777);font-style:italic;letter-spacing:.3px}
@media(max-width:1024px){.ba-slide{flex:0 0 320px}}
@media(max-width:768px){.ba-slide{flex:0 0 280px}.ba-arr{width:36px;height:36px;font-size:16px}.ba-arr.prev{left:4px}.ba-arr.next{right:4px}}
@media(max-width:480px){.ba-slide{flex:0 0 240px}}