@charset "utf-8";

#atc_before_after{position:relative;padding:var(--sec-pad) 0;width:100%;min-width:var(--main-size);background-color:#fff}
#atc_before_after .ba_wrap{margin:60px auto 0;width:var(--wrap);max-width:calc(100% - var(--wrap-gap) * 2)}

/* 카테고리 탭 */
#atc_before_after .ba_filter{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
#atc_before_after .ba_filter ul{display:flex;align-items:center;gap:8px}
#atc_before_after .ba_filter li button{display:flex;justify-content:center;align-items:center;height:44px;padding:0 24px;border:none;border-radius:22px;font-size:16px;font-weight:600;font-family:var(--k-font);color:#666;background-color:#f2f2f2;cursor:pointer;transition:all .3s}
#atc_before_after .ba_filter li button:hover{color:var(--primary);background-color:#ebf7f9}
#atc_before_after .ba_filter li.on button{color:#fff;background-color:var(--primary)}
#atc_before_after .ba_filter li.on button:hover{color:#fff;background-color:var(--primary)}
#atc_before_after .ba_filter_desc{font-size:15px;font-weight:400;color:#999}

/* 전후 카드 — 얼굴 전체가 아닌 헤어라인 부위만 노출 */
#atc_before_after .ba_grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:30px}
#atc_before_after .ba_card{overflow:hidden;border:1px solid #eee;border-radius:10px;background-color:#fff;transition:all .3s}
#atc_before_after .ba_card:hover{border-color:var(--primary);box-shadow:0 10px 30px rgb(17, 17, 17, 0.08)}
#atc_before_after .ba_pair{display:flex;align-items:flex-start}
#atc_before_after .ba_pair > div{position:relative;width:50%;aspect-ratio:3 / 2;overflow:hidden;background-color:#f2f4f5}
#atc_before_after .ba_before{border-right:1px solid #fff}
#atc_before_after .ba_pair img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.9);transform-origin:50% 0;display:block}
#atc_before_after .ba_pair span{position:absolute;left:12px;bottom:12px;z-index:3;padding:5px 12px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:0.06em;color:#fff;background-color:rgb(17, 17, 17, 0.6)}
#atc_before_after .ba_after span{background-color:var(--primary)}

/* 애프터 잠금 (의료법) */
#atc_before_after .ba_lock{display:none}
#atc_before_after.is-locked .ba_after img{filter:blur(12px)}
#atc_before_after.is-locked .ba_lock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:0;border:none;font-family:var(--k-font);color:#fff;background-color:rgb(17, 17, 17, 0.4);cursor:pointer;transition:background-color .3s}
#atc_before_after.is-locked .ba_lock:hover{background-color:rgb(17, 17, 17, 0.56)}
#atc_before_after.is-locked .ba_lock svg{width:22px;height:22px;stroke-width:2px}
#atc_before_after.is-locked .ba_lock em{font-size:13px;font-weight:600;font-style:normal;letter-spacing:-0.02em}

/* 분류 결과 없음 */
#atc_before_after .ba_empty{padding:80px 0;font-size:16px;font-weight:400;text-align:center;color:#999}
#atc_before_after .ba_info{padding:22px 24px 26px}
#atc_before_after .ba_info h3{font-size:19px;font-weight:700;letter-spacing:-0.02em;color:var(--black)}
#atc_before_after .ba_info p{margin-top:8px;font-size:15px;font-weight:400;color:#888}

/* 고지문 */
#atc_before_after .ba_notice{margin-top:36px;padding-top:26px;border-top:1px solid #eee;font-size:14px;font-weight:400;line-height:1.7;text-align:center;color:#999}

/* CTA */
#atc_before_after .ba_btns{display:flex;justify-content:center;gap:14px;margin-top:44px}
#atc_before_after .ba_btns a{display:flex;justify-content:center;align-items:center;gap:10px;height:60px;padding:0 36px;border:2px solid var(--primary);border-radius:30px;font-size:17px;font-weight:600;transition:all .3s}
#atc_before_after .ba_btns svg{width:18px;height:18px;stroke-width:2px}
#atc_before_after .ba_btn_line{color:var(--primary);background-color:#fff}
#atc_before_after .ba_btn_line:hover{color:#fff;background-color:var(--primary)}
#atc_before_after .ba_btn_fill{color:#fff;background-color:var(--primary)}
#atc_before_after .ba_btn_fill:hover{color:var(--primary);background-color:#fff}

@media (max-width:1980px){
#atc_before_after .ba_grid{gap:24px}
#atc_before_after .ba_info{padding:18px 20px 22px}
#atc_before_after .ba_info h3{font-size:17px}
}