@charset "UTF-8";
/* 커뮤니티 (도제 뉴스 / BEFORE&AFTER / 리뷰)
 *
 * 퍼블 원본: 00.외주/00DOJE/resources/css/sub.css 의 "공통(paging, writeBtn)" · "커뮤니티-*" 부분.
 * 원본의 이미지 경로(/resources/image/...)만 테마 경로로 바꿨다.
 * 원본에 없는 보완은 맨 아래 [doje] 블록에 모았다.
 * 서브 공통(subNavi, subContainer)은 sub.css 에 있으며 함께 로드된다 (theme/basic/head.sub.php).
 */

/*공통*/
.paging{display: flex; flex-direction: row; align-items: center; justify-content: flex-end; column-gap: 6px;margin-bottom: 20px;}
.paging li{width: 36px; height: 36px; background: #EDEDED; border: 1px solid transparent; position: relative; transition: all 0.3s ease;}
.paging li a{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color:#BCBCBC;  transition: all 0.3s ease;}
.paging li.on{border-color:#B98E71; background: #fff;}
.paging li.on a{color:#B98E71;}
.paging li.prev:after,
.paging li.next:after{content:''; display: block; width: 7px; height: 7px; border-top: 1px solid #BCBCBC; border-right:1px solid #BCBCBC; position: absolute; top:50%; left: 50%; pointer-events: none;}
.paging li.prev:after{ transform: translate(-50%, -50%) rotate(-135deg);}
.paging li.next:after{ transform: translate(-50%, -50%) rotate(45deg);}
.paging li:not(.on):has( a:hover){background:#fff;}
.paging li:not(.on) a:hover{color:#B98E71}

.writeBtn{display: flex; flex-wrap: wrap; align-items: stretch; justify-content: end;margin-bottom: 20px;}
.writeBtn a{max-width: 200px; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; color:#fff; background: #B98E71; }
.writeBtn a:hover{background:#a67656 }

/*커뮤니티-공통*/
.subContainer:has(.community_sec){background: #F9F8F7; }
.community_sec .titl_wrap{display: flex; flex-direction: column; row-gap:30px;margin-bottom :14px; }
.community_sec .titl_wrap .titl{text-align: start; font-family: 'marcellus'; color:#B98E71; font-size: 22px;  font-weight: 300;;}
.community_sec .titl_wrap .search_list{display: flex; flex-direction: row; align-items: center; justify-content: end; column-gap: 20px;;}
.community_sec .titl_wrap .search_list li{position: relative}
.community_sec .titl_wrap .search_list li:not(:last-child):after{content:''; display: block; width: 1px; height: 12px; background: #BEBEBE; position: absolute; top:50%; right: -10px; transform:translateY(-50%)}
.community_sec .titl_wrap .search_list li a{background:transparent; border:0; color:#BEBEBE;}

.community_sec .titl_wrap .search_cate{display: flex; flex-direction: row; align-items: center; justify-content: flex-start; column-gap: 10px; flex-wrap: wrap; row-gap: 8px;}
.community_sec .titl_wrap .search_cate li{ display: block; background: #fff; padding: 6px 14px; width: auto; min-width: 100px; max-width: none; white-space: nowrap; border:1px solid transparent; transition: all 0.3s ease;}
.community_sec .titl_wrap .search_cate li a{display: flex; justify-content: center; align-items: center;color:#BCBCBC;transition: all 0.3s ease;}
.community_sec .titl_wrap .search_cate li.on{background: #B98E71;}
.community_sec .titl_wrap .search_cate li:not(.on):has(a:hover){border-color: #B98E71;}
.community_sec .titl_wrap .search_cate li.on a{color:#fff;}

/*도제뉴스 comm_news*/
.news_conts .item{margin-bottom: 20px;display: flex; flex-direction: row; background:#fff; }
.news_conts .item .img_box{width: 40%}
.news_conts .item .txt_box{width: 60%; padding: 36px 44px; display: flex; flex-direction: column; row-gap: 20px;;}
.news_conts .item .txt_box .titl{font-size: 24px; font-weight: 500; color:#000; line-height: 1.3; display: block ;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.news_conts .item .txt_box .subs{font-size: 18px; color:#000; width: 70%; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis;margin-bottom: 34px}
.news_conts .item .txt_box .moreBtn{color:#fff; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 200px; height: 60px; background: #B98E71;margin-left: auto;}

/*비포애프터 comm_befaf*/
.befaf_conts{display: flex; flex-wrap: wrap; gap: 30px 20px; margin-bottom: 30px;}
.befaf_conts .item{width: calc(50% - 10px); background:#fff; ;}
.befaf_conts .item a{display: block; width: 100%; height: 100%;}
.befaf_conts .item .befaf_img{display: flex; flex-direction: row; align-items: stretch;}
.befaf_conts .item .befaf_img .img_box{width: 50%; aspect-ratio: 2/3; ;}
.befaf_conts .item .txt_box{padding: 20px 30px;}
.befaf_conts .item .txt_box .titl{color:#BA8F71; font-weight: 500; font-size: 24px; margin-bottom: 10px;;}
.befaf_conts .item .txt_box .subs{display:flex; flex-wrap: wrap; gap: 4px 40px;}
.befaf_conts .item .txt_box .subs dl{display: flex; flex-direction: row; align-items: baseline; font-size: 17px; column-gap: 15px; min-width: fit-content}
.befaf_conts .item .txt_box .subs dt{font-weight: 600;min-width: fit-content;}
.befaf_conts .item .txt_box .subs dd{color:#454545;}

/*리뷰 comm_revw*/
.comm_revw .titl_wrap{row-gap: 6px;;}
.comm_revw .titl_wrap .logo{max-width: 150px; filter: brightness(0) saturate(100%);margin-bottom: 10px; }
.comm_revw .titl_wrap .titl{font-family: 'marcellus';}

.revw_conts .item .hrtBtn{position: absolute; top: 20px; left:20px; width: 40px; height: 40px;
    background-color:transparent; background-image: url(../../theme/basic/doje/image/contents/ico_hrt.png); background-repeat: no-repeat; background-size: contain; background-position: center center;; border:0; z-index: 1;cursor: pointer;transition: all 0.3s ease;}
.revw_conts .item .hrtBtn:hover{ transform: translateY(-10px);}
.revw_conts .item .hrtBtn.on{background-image: url(../../theme/basic/doje/image/contents/ico_hrt_on.png);}
.revw_top{padding: 50px 0; background: #EFE6DF; position: relative;}
.revw_top .item .img_box{position: relative; aspect-ratio: 9/16;;}
.revw_top .revw_owl .owl-nav button{position: absolute; top: 50%; transform: translateY(-50%);z-index: 3;width: 48px; height: 48px; background: rgba(255,255,255,0.7); border-radius: 50%; }
.revw_top .revw_owl .owl-nav button span{display: none;}
.revw_top .revw_owl .owl-nav button.owl-prev{left: 10px; }
.revw_top .revw_owl .owl-nav button.owl-next{right: 10px; }
.revw_top .revw_owl .owl-nav button:after{content:''; display: block; width: 10px; height: 10px; background: transparent; border-top:2px solid #000; border-right: 2px solid #000; position: absolute; top:50%; left:50%; }
.revw_top .revw_owl .owl-nav button.owl-prev:after{transform: translate(calc(-50% + 2px), -50%) rotate(225deg);}
.revw_top .revw_owl .owl-nav button.owl-next:after{transform: translate(calc(-50% - 2px), -50%) rotate(45deg)}

.revw_bottom .inner_sm{display: flex; flex-wrap: wrap; gap: 30px 20px; padding-top: 50px; padding-bottom: 30px;;}
.revw_bottom .item{width: calc(25% - 15px);position: relative}
.revw_bottom .item .img_box{display: block; aspect-ratio: 9/16; }
.revw_bottom .item .hrtBtn{width: 34px; height: 34px;}

@media screen and (max-width: 1024px) {
    .news_conts .item .txt_box .titl,
    .befaf_conts .item .txt_box .titl{font-size:22px; }
    .news_conts .item .txt_box .subs{font-size:17px; width: 80%; }

    .revw_conts .item .hrtBtn{top: 10px; left: 10px;width: 30px ;height: 30px;}
    .revw_bottom .item .hrtBtn{width: 22px; height: 22px;}
    .revw_bottom .inner_sm{gap: 26px 12px;}
    .revw_bottom .item{width: calc(25% - 10px)}
}

@media screen and (max-width: 768px) {
    .news_conts .item .img_box{width: 45%}
    .news_conts .item .txt_box{padding: 26px 30px;width: 55%}
    .news_conts .item .txt_box .titl{font-size: 20px; }
    .news_conts .item .txt_box .subs{font-size: 16px; width: 100%; }
    .news_conts .item .txt_box .moreBtn{max-width: 150px; font-size: 15px; height: 46px;;}

    .befaf_conts .item{width: 100%;}
    .befaf_conts .item .txt_box .titl{font-size: 20px; margin-bottom: 5px;}
    .befaf_conts .item .txt_box .subs dl{font-size: 15px; }

    .revw_bottom .item{width: calc(33% - 7px)}
}

@media screen and (max-width: 575px){
    .paging,
    .writeBtn{justify-content: center;}
    .paging li{width: 24px; height: 24px;}
    .paging li a{font-size: 14px;}

    .community_sec .titl_wrap{row-gap: 12px;}
    .community_sec .titl_wrap .titl{text-align: center;;}
    .community_sec .titl_wrap .search_cate{justify-content: center; ;}
    .community_sec .titl_wrap .search_cate li{width: auto; max-width: unset; min-width: 0; padding: 6px 4px; background: transparent; }
    .community_sec .titl_wrap .search_cate li.on{background: transparent;;}
    .community_sec .titl_wrap .search_cate li a{font-size: 13px;;}
    .community_sec .titl_wrap .search_cate li.on a{color: #BA8F71;position: relative;}
    .community_sec .titl_wrap .search_cate li.on a:after{content:''; display: block; width: 100%; height: 2px; background: #BA8F71; position: absolute; bottom:0; left:0; ;}
    .community_sec .titl_wrap .search_cate li:not(.on):has(a:hover){border:0;}

    .news_conts .item{flex-direction: column; padding: 20px;}
    .news_conts .item .img_box{width: 100%; aspect-ratio: 2/1.4;}
    .news_conts .item .txt_box{padding: 26px 0;;width: 100%; }
    .news_conts .item .txt_box .titl{color:#BA8F71; font-weight: 500; white-space: unset; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;-webkit-box-orient: vertical;;}
    .news_conts .item .txt_box .subs{font-size: 15px; margin-bottom: 0; -webkit-line-clamp: 3; line-clamp: 3;}
    .news_conts .item .txt_box .moreBtn{background: transparent; width: auto; height: auto; position: relative;padding: 10px; }
    .news_conts .item .txt_box .moreBtn span{display: none;}
    .news_conts .item .txt_box .moreBtn::before{content:'더보기'; display: block; font-size: 13px; color:#afafaf;}
    .news_conts .item .txt_box .moreBtn::after{content:''; display: block; width: 4px; height: 4px; border-top: 1px solid #afafaf; border-right: 1px solid #afafaf; position: absolute; top: 50%; right: 2px; transform: translateY(-50%) rotate(45deg);}

    .befaf_conts .item .txt_box{padding: 15px 20px;}
    .befaf_conts .item .txt_box .titl{font-size: 17px; }
    .befaf_conts .item .txt_box .subs{column-gap: 24px;}
    .befaf_conts .item .txt_box .subs dl{font-size: 14px;}

    .comm_revw .titl_wrap .logo{max-width: 100px;margin-left: auto; margin-right: auto; margin-bottom: 0;}
    .comm_revw .titl_wrap .subs{text-align: center; ;margin-top:-10px;}
    .revw_bottom .item{width: calc(50% - 7px)}
    .revw_top .inner_sm{width: calc(100% + 20px); margin-right: -20px;}
}

/* ================================================================
   [doje] 퍼블 보완 - 실데이터 연결에 필요한 것들
   ================================================================ */

/* 서브메뉴 현재 항목 표시는 sub.css 공통으로 옮김 */

/* 이미지 칸 - 실제 사진 비율이 제각각이므로 칸을 채우고 잘라낸다 */
.news_conts .item .img_box,
.befaf_conts .item .befaf_img .img_box,
.revw_conts .item .img_box{overflow: hidden; background: #EFE6DF;}
.news_conts .item .img_box a{display: block; height: 100%;}
.news_conts .item .img_box img,
.befaf_conts .item .befaf_img .img_box img,
.revw_conts .item .img_box img{display: block; width: 100%; height: 100%; object-fit: cover;}
.news_conts .item .img_box{aspect-ratio: 4/3;}
.news_conts .item .txt_box .titl a{color: inherit;}
.revw_top .item{position: relative;}
.revw_top .item .img_box{display: block;}

/* 정렬(최신순/등록순) 현재 항목 */
.community_sec .titl_wrap .search_list li.on a{color: #B98E71;}

/* 이미지 없음 */
.doje-noimg{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: 'marcellus'; font-size: 20px; letter-spacing: .1em; color: #c9b3a2;}

/* 목록이 비었을 때 */
.comm_empty{width: 100%; padding: 100px 20px; background: #fff; text-align: center; color: #9a9a9a; font-size: 16px;}
.revw_bottom .comm_empty{background: transparent;}

/* 리뷰 하트 - 누른 직후 살짝 튀는 효과 */
.revw_conts .item .hrtBtn.is-pop{animation: doje-hrt .35s ease;}
@keyframes doje-hrt{50%{transform: scale(1.25);}}

/* 보기·글쓰기 화면 - 서브 레이아웃 안에서 기존 게시판 스킨(doje_gallery)을 쓴다 */
.community_sec .doje-bo{max-width: none; padding: 0 0 20px; font-size: 16px;}
.community_sec .doje-view__head{padding-top: 0;}

/* 퍼블 layout.css 의 header{position:fixed} / .isSub header{background:#fff} 가
   게시판 보기 화면의 <header class="doje-view__head"> 에도 걸리므로 되돌린다 */
.community_sec header{position: static; z-index: auto; width: auto; background: transparent; backdrop-filter: none;}

/* BEFORE&AFTER 보기 - 시술 전/후 한 줄 비교 (skin/board/doje_ba/view.skin.php) */
.doje-ba-pair{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 36px;}
.doje-ba-pair__item{margin: 0; min-width: 0;}
.doje-ba-pair__img{display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; overflow: hidden; background: #EFE6DF;}
.doje-ba-pair__img img{display: block; width: 100%; height: 100%; object-fit: contain;}   /* 자르지 않고 틀 안에 */
.doje-ba-pair__img.is-lock a{display: block; width: 100%; height: 100%;}
.doje-ba-pair__img.is-lock img{object-fit: cover;}
.doje-ba-pair__img.is-empty span{font-family: 'marcellus'; font-size: 22px; letter-spacing: .12em; color: #c9b3a2;}
.doje-ba-pair figcaption{display: flex; align-items: baseline; gap: 8px; padding: 12px 2px 0; font-size: 15px; color: #454545;}
.doje-ba-pair figcaption b{font-family: 'marcellus'; font-weight: 400; color: #B98E71; letter-spacing: .06em;}
.doje-ba-pair figcaption span{margin-left: auto; font-size: 14px; color: #8a8a8a;}
@media screen and (max-width: 575px){
    .doje-ba-pair{gap: 8px; margin-bottom: 24px;}
    .doje-ba-pair figcaption{flex-wrap: wrap; gap: 2px 6px; font-size: 13px;}
    .doje-ba-pair figcaption span{margin-left: 0; width: 100%; font-size: 12px;}
}