/* =========================================================
   치료사례 Before / After
   ========================================================= */
.ba-case{
    --ba-navy:#1a2242;          /* 포인트(네이비) */
    --ba-yellow:#fff04d;        /* 제목 하이라이트 */
    --ba-text:#111;
    --ba-desc:#555;
    --ba-gray:#888;
    --ba-ratio:1400 / 680;      /* 이미지 비율 (ba_case.php thumb_w/thumb_h와 맞춤) */
    --ba-gap:24px;
    --ba-label-fs:clamp(14px, 1.05vw, 20px);
    --ba-label-gap:clamp(12px, .95vw, 14px);
    --ba-cap:calc(var(--ba-label-gap) + var(--ba-label-fs) * 1.4);
    --ba-head-gap:clamp(40px, 4.2vw, 80px);   /* 제목 영역 ~ 사진 간격 */
    --ba-side:0px;                              /* 좌우 여백 */

    position:relative;
    width:100%;
    margin:0 auto;
    color:var(--ba-text);
    word-break:keep-all;
    box-sizing:border-box;
    padding: 17rem 0;
    background-color: #F5F5F5;
}
.ba-case *,
.ba-case *::before,
.ba-case *::after{box-sizing:border-box;}
.ba-case figure{margin:0;}
.ba-case img{display:block; max-width:none;}

/* ---------- 헤더 (제목은 사이트 공통 .tit-wrap.cmn 스타일 사용) ---------- */
.ba-case__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:var(--ba-head-gap);
}
.ba-case__head > :not(.ba-case__ctrl){flex:1 1 auto; min-width:0; margin-bottom:0;}  /* 공통 타이틀 하단 여백과 겹치지 않게 */

/* 슬라이드 컨트롤 (3개 이상) */
.ba-case__ctrl{display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto;}
.ba-case__count{
    margin:0 clamp(10px, 1.2vw, 24px) 0 0;
    font-size:clamp(15px, 1.05vw, 20px);
    color:#999;
    letter-spacing:.02em;
}
.ba-case__current{font-weight:500; color:var(--ba-text);}
.ba-case__nav{
    display:flex; align-items:center; justify-content:center;
    width:clamp(44px, 3.15vw, 60px); height:clamp(44px, 3.15vw, 60px);
    padding:0; border:1px solid var(--ba-text); border-radius:50%;
    background:transparent; color:var(--ba-text);
    cursor:pointer; transition:background .2s, color .2s, border-color .2s, opacity .2s;
}
.ba-case__nav svg{width:42%; height:42%;}
.ba-case__nav:hover{background:var(--ba-navy); border-color:var(--ba-navy); color:#fff;}
.ba-case__nav.swiper-button-disabled{opacity:.25; cursor:default; background:transparent; color:var(--ba-text); border-color:var(--ba-text);}
.ba-case__nav.swiper-button-lock{display:none;}

/* ---------- 2개 / 슬라이드 ---------- */
.ba-case--double .ba-case__list{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--ba-gap);}
.ba-case--slide .ba-case__viewport{overflow:hidden;}
.ba-case--slide .ba-case__item{height:auto;}

/* ---------- 비교 슬라이더 ---------- */
.ba-compare{
    position:relative;
    cursor:ew-resize;
    user-select:none; -webkit-user-select:none;
    touch-action:pan-y;           /* 세로 스크롤 허용, 가로 드래그는 비교 */
    -webkit-tap-highlight-color:transparent;
}
.ba-compare__media{
    position:relative;
    aspect-ratio:var(--ba-ratio);
    overflow:hidden;
    background:#1c1c1c;
}
.ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba-img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);}

.ba-handle{
    position:absolute; top:0; bottom:0; left:var(--pos); z-index:2;
    width:2px; margin-left:-1px;
    background:#fff;
    outline:none;
}
.ba-handle__btn{
    position:absolute; left:50%; bottom:0;
    display:flex; align-items:center; justify-content:center;
    width:clamp(70px, 4.9vw, 94px); height:clamp(32px, 2.3vw, 44px);
    border-radius:999px;
    background:var(--ba-navy); color:#fff;
    transform:translate(-50%, 50%);
    transition:transform .2s, box-shadow .2s;
}
.ba-handle__btn svg{width:46%; height:auto;}
.ba-compare.is-dragging .ba-handle__btn{transform:translate(-50%, 50%) scale(1.06);}
.ba-handle:focus-visible .ba-handle__btn{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ba-navy);}

.ba-labels{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:var(--ba-label-gap);
    font-size:var(--ba-label-fs);
    line-height:1.4;
}
.ba-labels__before{color:var(--ba-gray);}
.ba-labels__after{font-weight:700; color:var(--ba-navy);}

/* ---------- 1개 ---------- */
.ba-single{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--ba-gap);}
.ba-single__img{position:relative; aspect-ratio:var(--ba-ratio); overflow:hidden; background:#1c1c1c;}
.ba-single__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ba-single figcaption{
    height:var(--ba-cap);
    padding-top:var(--ba-label-gap);
    font-size:var(--ba-label-fs);
    line-height:1.4;
}
.ba-single__item--before figcaption{text-align:right; color:var(--ba-gray);}
.ba-single__item--after  figcaption{text-align:left; font-weight:700; color:var(--ba-navy);}
.ba-single__arrow{
    position:absolute; left:50%; top:calc((100% - var(--ba-cap)) / 2); z-index:2;
    display:flex; align-items:center; justify-content:center;
    width:clamp(44px, 3.15vw, 60px); height:clamp(44px, 3.15vw, 60px);
    border-radius:50%;
    background:var(--ba-navy); color:#fff;
    transform:translate(-50%, -50%);
}
.ba-single__arrow svg{width:30%; height:auto; margin-left:8%;}

/* ---------- 하단 안내바 ---------- */
.ba-case__notice{
    margin-top:clamp(30px, 2.3vw, 44px);
    padding:clamp(14px, 1vw, 18px) 20px;
    background:var(--ba-navy);
    text-align:center;
}
.ba-case__notice strong{
    display:block;
    font-size:clamp(15px, 1vw, 19px);
    font-weight:700;
    line-height:1.45;
    color:#fff;
}
.ba-case__notice p{
    margin:3px 0 0;
    font-size:clamp(12px, .78vw, 15px);
    line-height:1.5;
    color:rgba(255,255,255,.55);
}

/* ---------- 반응형 ---------- */
@media (max-width:1480px){
    /* 페이지에 이미 좌우 여백이 있다면 아래 두 줄 삭제 */
    .ba-case{--ba-side:20px; padding-left:var(--ba-side); padding-right:var(--ba-side);}
}
@media (max-width:768px){
    .ba-case{--ba-gap:16px;}
    .ba-case{--ba-head-gap:28px;}
    .ba-case__head{flex-direction:column; align-items:stretch; gap:20px;}
    .ba-case__ctrl{justify-content:flex-end;}

    .ba-case--double .ba-case__list{grid-template-columns:1fr; gap:36px;}

    .ba-single{grid-template-columns:1fr; gap:0;}
    .ba-single figcaption{text-align:left !important;}
    .ba-single__arrow{
        position:static;
        margin:0 auto 14px;
        transform:rotate(90deg);
    }
    .ba-case__notice p{word-break:keep-all;}
}