@charset "utf-8";

/* =====================================================
   비포/애프터 게시판 스킨 (skin/board/bfaf)
   PC 1920 기준 1rem = 10px, 모바일 375 기준
   목록 : 2열 카드 갤러리 (연세우리집 bfLst 형태) · 상세 : Before/After 위아래
   ===================================================== */
.bfaf .inner {width: 94rem; margin: 0 auto;}

/* 비주얼 */
.bfaf .sv {position: relative; height: 78rem; padding-top: 40.4rem; background: url(img/sv.jpg) no-repeat center / cover; color: #fff; text-align: center;}
.bfaf .sv::before {content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3);}
.bfaf .sv .tit {position: relative; font-size: 4.8rem; font-weight: 700; line-height: 6rem; text-shadow: 0 0 1rem rgba(0,0,0,0.4);}

/* 분류 탭 */
.bfaf .cases {width: 113.6rem; margin: 0 auto; padding: 10rem 0 19.5rem;}
.bfaf .cate {display: flex; justify-content: center; gap: 2rem;}
.bfaf .cate a {display: flex; align-items: center; justify-content: center; width: 16.4rem; height: 5.2rem; border-radius: 3rem; background: #f2f2f2; font-size: 2rem; font-weight: 700; color: #131313; transition: background 0.2s, color 0.2s;}
.bfaf .cate a.on, .bfaf .cate a:hover {background: #2e2e2e; color: #fff;}

/* 관리자 버튼 */
.bfaf .admin {display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 4rem;}
.bfaf .btn {display: inline-block; min-width: 9rem; height: 4rem; padding: 0 2rem; border: 1px solid #bebebe; border-radius: 0.6rem; background: #fff; font-size: 1.4rem; font-weight: 500; line-height: 3.8rem; color: #333; text-align: center;}
.bfaf .btn.navy {border-color: #222664; background: #222664; color: #fff;}
.bfaf .empty {margin-top: 9.8rem; padding: 12rem 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 1.8rem; color: #999; text-align: center;}

/* 목록 카드 */
.bfaf .lst {display: grid; grid-template-columns: repeat(2, 54.8rem); gap: 8rem 4rem; margin-top: 9.8rem;}
.bfaf .admin + .lst {margin-top: 3rem;}
.bfaf .lst a {display: block; border-radius: 1.6rem; overflow: hidden;}
.bfaf .lst .img {position: relative; height: 32rem; background: #e9e9e9; overflow: hidden;}
.bfaf .lst .img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s;}
.bfaf .lst a:hover .img img {transform: scale(1.05);}
.bfaf .lst .noImg {display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.2em; color: #bbb;}
.bfaf .lst .ca {position: absolute; left: 1.8rem; top: 1.8rem; display: flex; align-items: center; justify-content: center; height: 3.8rem; padding: 0 2rem; border-radius: 3rem; background: #fff; font-size: 1.8rem; font-weight: 700; color: #131313;}
.bfaf .lst .lock {position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 5rem 1rem 1.8rem; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.55)); font-size: 1.6rem; font-weight: 500; line-height: 2.2rem; color: #fff; text-align: center; text-shadow: 0 0 0.6rem rgba(0,0,0,0.5);}
.bfaf .lst .box {height: 23rem; padding: 4.8rem 3.4rem 0; background: #f8f8f8;}
.bfaf .lst .subt {font-size: 1.8rem; font-weight: 500; line-height: 2.2rem; letter-spacing: 0.2em; color: #222664;}
.bfaf .lst .tt {overflow: hidden; font-size: 3.4rem; font-weight: 700; line-height: 4.8rem; color: #131313; white-space: nowrap; text-overflow: ellipsis;}
.bfaf .lst .txt {display: -webkit-box; width: 45rem; margin-top: 1.9rem; overflow: hidden; font-size: 1.6rem; line-height: 2.4rem; color: #505050; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* 페이지네이션 (notice 스킨과 동일 톤) */
.bfaf .pg_wrap {display: block; float: none; width: 100%; margin: 8rem 0 0; padding: 0; text-align: center;}
.bfaf .pg {display: flex; justify-content: center; align-items: center; gap: 0.4rem;}
.bfaf .pg_page, .bfaf .pg_current {display: block; min-width: 2.6rem; height: 2.6rem; margin: 0; padding: 0 0.6rem; border: 0; border-radius: 0.4rem; background: #e9e9e9; font-size: 1.4rem; font-weight: 400; line-height: 2.6rem; color: #222; text-align: center; text-decoration: none;}
.bfaf .pg_current {background: #222664; color: #fff;}
.bfaf .pg_start, .bfaf .pg_prev, .bfaf .pg_next, .bfaf .pg_end {width: 2.6rem; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 2.4rem;}
.bfaf .pg_prev {background-image: url(img/ic_arrow.svg);}
.bfaf .pg_start {background-image: url(img/ic_arrow2.svg);}
.bfaf .pg_next {background-image: url(img/ic_arrow.svg); transform: scaleX(-1);}
.bfaf .pg_end {background-image: url(img/ic_arrow2.svg); transform: scaleX(-1);}
.bfaf .pg .sound_only {display: none;}

/* 상세 케이스 */
.bfaf .caseWrap {position: relative; width: 104rem; margin: 6rem auto 0;}
.bfaf .case {text-align: center;}
.bfaf .case .tit {font-size: 4.2rem; font-weight: 700; line-height: 5.2rem; color: #090909; word-break: keep-all;}
.bfaf .case .desc {margin-top: 2.2rem; font-size: 2rem; line-height: 3rem; color: #090909; word-break: keep-all;}
.bfaf .case .thumb {margin-top: 3rem;}
.bfaf .case .thumb img {max-width: 100%; height: auto; border-radius: 0.4rem;}
.bfaf .pair {position: relative; margin-top: 3.4rem; border-radius: 0.4rem; overflow: hidden;}
.bfaf .pair .row {position: relative; background: #ddd;}
.bfaf .pair .row.after {margin-top: 0.2rem;}
.bfaf .pair .row:first-child {margin-top: 0;}
.bfaf .pair .img {overflow: hidden; background: #e9e9e9;}
.bfaf .pair .img img {display: block; width: 100%; height: auto;}
.bfaf .pair .row.locked .img img {filter: blur(1.6rem); transform: scale(1.06); pointer-events: none;}
.bfaf .pair .lock {position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: rgba(0,0,0,0.35); color: #fff; text-align: center;}
.bfaf .pair .lock strong {font-size: 2.2rem; font-weight: 700; line-height: 3.2rem; text-shadow: 0 0 0.8rem rgba(0,0,0,0.4);}
.bfaf .pair .lock span {display: inline-block; height: 4rem; padding: 0 2.4rem; border-radius: 2rem; background: #fff; font-size: 1.5rem; font-weight: 700; line-height: 4rem; color: #222664;}
.bfaf .pair .lb {position: absolute; left: 1.4rem; top: 0.8rem; z-index: 1; font-size: 2.6rem; line-height: 3.4rem; color: #fff; text-shadow: 0 0 0.8rem rgba(0,0,0,0.5);}
.bfaf .pair .mid {position: relative; z-index: 2; display: block; width: 5.6rem; height: 5.6rem; margin: -2.8rem auto; border-radius: 50%; background: #fff; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.2);}
.bfaf .pair .mid::after {content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -0.5rem 0 0 -1rem; border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-top: 1.4rem solid #222664;}
.bfaf .case .caption {margin-top: 4.3rem; font-size: 1.8rem; line-height: 2.8rem; color: #434343;}
.bfaf .vbtns {display: flex; justify-content: center; gap: 0.6rem; margin-top: 6rem;}

/* 등록 폼 */
.bfaf .wform {padding: 9.5rem 0 12rem; background: #f5f5f5;}
.bfaf .wform .inner {text-align: center;}
.bfaf .wform .small {font-size: 1.4rem; font-weight: 500; line-height: 1.4rem; letter-spacing: 0.1em; color: #161616;}
.bfaf .wform .tit {margin-top: 1.1rem; font-size: 3.6rem; font-weight: 700; line-height: 3.6rem; color: #222664;}
.bfaf .card {margin-top: 2.65rem; padding: 4.6rem 6rem; border-radius: 1.2rem; background: #fff; text-align: left;}
.bfaf .card .row + .row {margin-top: 2.4rem;}
.bfaf .card .row.half {display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;}
.bfaf .card label {display: block; margin-bottom: 0.8rem; font-size: 1.5rem; font-weight: 600; color: #161616;}
.bfaf .card label b {color: #d0452d; font-weight: 600;}
.bfaf .card .hint {margin-left: 0.6rem; font-size: 1.3rem; font-weight: 400; color: #888;}
.bfaf .card .warn {margin: -0.2rem 0 1rem; font-size: 1.3rem; color: #d0452d;}
.bfaf .card .frm_input {display: block; width: 100%; height: 4.4rem; padding: 0 1.4rem; border: 1px solid #c9c9c9; border-radius: 0.6rem; background: #fff; font-family: inherit; font-size: 1.5rem; color: #161616;}
.bfaf .card .frm_input:focus {outline: none; border-color: #222664;}
.bfaf .card select.frm_input {cursor: pointer;}
.bfaf .card .slots {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem 2rem;}
.bfaf .card .slot {padding: 1.4rem 1.6rem; border: 1px solid #e3e3e3; border-radius: 0.8rem; background: #fafafa;}
/* .bfaf .card .slot.after {background: #f2f3f9;}
.bfaf .card .slot.thumb {background: #fff8ec;} */
.bfaf .card .slot label {margin-bottom: 0.6rem; font-size: 1.4rem;}
.bfaf .card .frm_file {display: block; width: 100%; font-size: 1.3rem;}
.bfaf .card .slot .chk {display: flex; align-items: center; gap: 0.4rem; margin: 0.8rem 0 0; font-size: 1.3rem; font-weight: 400; color: #666;}
.bfaf .card .wr_content textarea {display: block; width: 100%; height: 18rem; padding: 1.4rem; border: 1px solid #c9c9c9; border-radius: 0.6rem; font-family: inherit; font-size: 1.5rem; line-height: 1.7; color: #161616; resize: vertical;}
.bfaf .card .wr_content textarea:focus {outline: none; border-color: #222664;}
.bfaf .wform .btns {display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.9rem;}
.bfaf .btn_submit {display: inline-block; width: 22.8rem; height: 4.8rem; padding: 0; border: 0; border-radius: 0.8rem; background: #222664; font-family: inherit; font-size: 1.6rem; font-weight: 500; line-height: 4.8rem; color: #fff; text-align: center; cursor: pointer;}
.bfaf .btn_submit:disabled {opacity: 0.6; cursor: default;}
.bfaf .btn_cancel {display: inline-block; width: 12rem; height: 4.8rem; border: 1px solid #bebebe; border-radius: 0.8rem; background: #fff; font-size: 1.6rem; font-weight: 500; line-height: 4.6rem; color: #333; text-align: center;}

@media all and (max-width: 880px){
    .bfaf .inner {width: auto; margin: 0 2.75rem;}
    .bfaf .sv {display: flex; flex-direction: column; justify-content: center; height: 90vh; padding: 0; background-image: url(img/sv_mo.jpg);}
    .bfaf .sv .tit {font-size: 3rem; line-height: 4.2rem;}

    .bfaf .cases {width: auto; margin: 0 2.2rem; padding: 6rem 0 9rem;}
    .bfaf .cate {flex-wrap: wrap; gap: 0.8rem;}
    .bfaf .cate li {flex: 0 0 calc(50% - 0.4rem);}
    .bfaf .cate a {width: 100%; height: 4rem; font-size: 1.4rem;}
    .bfaf .admin {margin-top: 2.4rem;}
    .bfaf .empty {margin-top: 5rem; padding: 8rem 0;}

    .bfaf .lst {grid-template-columns: 100%; gap: 2.1rem; margin-top: 5rem;}
    .bfaf .admin + .lst {margin-top: 2rem;}
    .bfaf .lst .img {height: 23rem;}
    .bfaf .lst .ca {left: 1.4rem; top: 1.4rem; height: 3rem; padding: 0 1.4rem; font-size: 1.4rem;}
    .bfaf .lst .lock {padding: 3.6rem 1rem 1.5rem; font-size: 1.4rem; line-height: 2rem;}
    .bfaf .lst .box {height: auto; min-height: 20rem; padding: 3rem 2.1rem 3.2rem;}
    .bfaf .lst .subt {font-size: 1.4rem;}
    .bfaf .lst .tt {display: -webkit-box; margin-top: 0.2rem; overflow: hidden; font-size: 2.4rem; line-height: 3.4rem; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
    .bfaf .lst .txt {width: 100%; margin-top: 0.8rem; font-size: 1.4rem; line-height: 2.2rem; -webkit-line-clamp: 3;}
    .bfaf .pg_wrap {margin-top: 5rem;}

    .bfaf .caseWrap {width: 100%; margin-top: 4rem;}
    .bfaf .case .tit {padding: 0 0.5rem; font-size: 2.6rem; line-height: 3.6rem;}
    .bfaf .case .desc {margin-top: 1.6rem; padding: 0 0.5rem; font-size: 1.5rem; line-height: 2.4rem;}
    .bfaf .case .thumb {margin-top: 2rem;}
    .bfaf .pair {margin-top: 2.6rem; border-radius: 0;}
    .bfaf .pair .row.after {margin-top: 0.1rem;}
    .bfaf .pair .lb {left: 1rem; top: 0.4rem; font-size: 1.4rem; line-height: 2rem;}
    .bfaf .pair .lock {gap: 0.8rem;}
    .bfaf .pair .lock strong {font-size: 1.3rem; line-height: 1.9rem;}
    .bfaf .pair .lock span {height: 2.6rem; padding: 0 1.4rem; border-radius: 1.3rem; font-size: 1.1rem; line-height: 2.6rem;}
    .bfaf .pair .mid {width: 3.2rem; height: 3.2rem; margin: -1.6rem auto;}
    .bfaf .pair .mid::after {margin: -0.3rem 0 0 -0.6rem; border-left-width: 0.6rem; border-right-width: 0.6rem; border-top-width: 0.9rem;}
    .bfaf .case .caption {margin-top: 2.4rem; padding: 0 0.5rem; font-size: 1.4rem; line-height: 2.2rem;}
    .bfaf .vbtns {flex-wrap: wrap; margin-top: 4rem;}

    .bfaf .wform {padding: 7.7rem 0 8rem;}
    .bfaf .wform .tit {font-size: 3.4rem; line-height: 3.4rem;}
    .bfaf .card {margin: 2.6rem 0 0; padding: 3rem 2rem;}
    .bfaf .card .row.half {grid-template-columns: 1fr; gap: 2.4rem;}
    .bfaf .card .slots {grid-template-columns: 1fr;}
}