.yc-ba{background:#fafaf7;padding:44px max(16px,4vw);font-family:Montserrat,sans-serif;color:#2c2418;box-sizing:border-box}
.yc-ba *{box-sizing:border-box}
.yc-ba-inner{max-width:760px;margin:0 auto}
.yc-ba h2{font-family:Cormorant,serif;font-weight:700;font-size:clamp(26px,3.6vw,40px);line-height:1.1;margin:0 0 12px;text-align:center;overflow-wrap:break-word}
.yc-ba-text{color:#7b7264;line-height:1.55;margin:0 0 22px;text-align:center;font-size:15px}
.yc-ba-text p{margin:0 0 8px}
.yc-ba-frame{position:relative;border-radius:16px;overflow:hidden;background:#efe9df;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.yc-ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yc-ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.yc-ba-divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.25)}
.yc-ba-handle{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.28);display:grid;place-items:center;pointer-events:none}
.yc-ba-handle svg{width:22px;height:22px;stroke:#2c2418}
.yc-ba-label{position:absolute;bottom:16px;padding:8px 14px;border-radius:8px;background:rgba(20,20,20,.85);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;pointer-events:none}
.yc-ba-label-before{left:16px}
.yc-ba-label-after{right:16px}
.yc-ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;border:0}
.yc-ba-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:52px;height:52px;border-radius:50%;cursor:ew-resize}
.yc-ba-range::-moz-range-thumb{width:52px;height:52px;border:0;border-radius:50%;background:transparent;cursor:ew-resize}
.yc-ba-range:focus{outline:none}
.yc-ba-frame:focus-within .yc-ba-handle{box-shadow:0 0 0 3px #2d5a3d,0 2px 12px rgba(0,0,0,.28)}
@media (max-width:640px){
.yc-ba{padding:28px 16px}
.yc-ba h2{font-size:26px}
.yc-ba-text{font-size:14px;margin-bottom:16px}
.yc-ba-handle{width:38px;height:38px}
.yc-ba-handle svg{width:19px;height:19px}
.yc-ba-label{bottom:12px;font-size:11px;padding:6px 11px}
.yc-ba-label-before{left:12px}
.yc-ba-label-after{right:12px}
}
@media (prefers-reduced-motion:reduce){.yc-ba-frame{scroll-behavior:auto}}