@charset "utf-8";

/* **************************************** *
* 마이페이지
* **************************************** */
#content.mypage{padding-bottom: 80rem; background-color: var(--bg); height: 100vh;}
#content.mypage.edit{background: transparent;}
.mypage-profile{position:relative; padding: 40rem 0; text-align:center;}
.mypage-profile .cmn-thum{width:130rem; height:130rem; margin: 0 auto 18rem; background-size:40rem; border-radius:140rem; border: 5rem solid var(--f); box-shadow: 0 0 15rem rgba(0, 0, 0, .07);}
.mypage-profile strong{display: block; margin-bottom: 2rem; font-size:20rem; font-weight: 700; color:var(--b-01);}
.mypage-profile .btn-edit {left: 60%; bottom: 20rem;}

.mapage .sec-line{margin:20rem 0rem;}
.mypage .sec-line{margin-top:20rem;margin-bottom:20rem;}
.mypage-match + .sec-line{margin-bottom:0;}
.mypage-tit-wrap{display:flex; justify-content:space-between; align-items:center; margin-bottom:12rem;}
.mypage-tit-wrap > button{width:auto; color:#bdbdbd;}
.mypage-tit{font-size:16rem; color:var(--b-01);}
.match-slider .swiper-slide{display:flex; align-items:flex-start; width:292rem; padding:17rem; border:1px solid #eee; border-radius:6rem; flex-direction:column;}
.match-slider__info + p{display:block;}
.match-slider .swiper-slide > strong{margin-top:30rem;font-size:15rem;color:var(--b-01);word-break: keep-all;}
.match-slider .swiper-container{overflow:visible;}
.match-state{position:absolute; top:20rem; right:19rem; padding:2rem 9rem; border:1px solid #cfcfcf; font-size:12rem; color:#bfbfbf; border-radius:30rem;}
.match-slider__info em{display:block; line-height:1.2; font-weight:700; font-size:14rem;}
.match-slider__info > i{font-weight:300; font-size:13rem; color:#b3b3b3;}
.mypage-profile strong{font-size:18rem; color:var(--b-01);}
.mypage-profile p{color: #666;}

/* 마이페이지 메뉴 */
.mypage-menu {padding: 0 20rem; background: #fff; border-radius: 7rem; box-shadow: 3rem 3rem 15rem rgba(0, 0, 0, .05);}
.mypage-menu > li {position: relative; padding: 30rem 20rem; padding-left: 80rem;}
.mypage-menu > li:not(:last-child) {border-bottom: 1px solid #eee;}
.mypage-menu > li figure {position: absolute; lefT:0; top:50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; margin-right: 20rem; border-radius: 7rem; transform: translateY(-50%);}
.mypage-menu > li figure img {max-width: 30rem; max-height: 30rem;}
.mypage-menu > li:nth-child(1) figure img {margin-left: 5rem;}
.mypage-menu > li strong {display: block; margin-bottom: 3rem; font-size: 16rem; font-weight: 600; color: var(--b-01);}
.mypage-menu > li p {color: #666;}
.mypage-menu > li i {position: absolute; right: 2rem; top: 50%; content:''; width: 8rem; height: 8rem; border: solid var(--b-01); border-width: 0 2rem 2rem 0; transform:translateY(-50%) rotate(-45deg);}


/* 게시판 */
#content.mypage:has(.board-filter){padding-top:56rem;}
.board-filter{padding:10rem 20rem; background:#f9f9f9;}
.board-filter span{font-weight:400; font-size:13rem;}
.board-list li{padding:20rem 0rem;}
.board-list li + li{border-top:1px solid #ededed;}
.board-list li > strong{display: flex;font-weight:400;color:var(--b-01);align-items: center;font-size: 14rem;}
.board-list li > i{font-size:12rem; color:#b1b1b1;}
.board-list li .new{display:flex; justify-content:center; align-items:center; position:relative; width:17rem; height:17rem; margin-right:3rem; background:var(--c-01); font-size:10rem; color:#fff; border-radius:3rem;}
.board-filter span i{font-weight:600;}

/* 게시판 뷰 */
.view-tit{padding-bottom:20rem;border-bottom: 1px solid #e5e5e5;padding-top: 10rem;}
.view-tit strong{display:block;font-weight: 500;font-size:16rem;color:var(--b-01);}
.view-tit  > i{font-weight:300; font-size:13rem; color:#bfbfbf;}
.view-cont{padding:15rem 0rem;}
.board-view .btn-basic--line{height:52rem; border-radius:0;}
.view-cont img{margin: 20rem 0rem;}

/* 게시판 텝 */
.board-tab > li{padding:10rem 0rem; font-weight:500; font-size:14rem; color:#5d5d5d; text-align:center; flex:auto;}
.board-tab > li.on{border-bottom:2px solid var(--c-01); font-weight:700; color:var(--c-01);}

/* 내 게시글 */
#content.mypage .cmn-info__user {opacity: 0;display: none;}
#content.mypage .commu-main-list__info > strong{margin-top: 11rem;}

/* 회원정보수정 */
.mypage-edit .cmn-thum{position:relative;}
.mypage-edit .mypage-profile{display:flex; justify-content:center; align-items:center; padding-bottom: 0; padding-left:0;}
.edit-list li{position:relative; padding:14rem 0rem;}
.edit-list li button{position:absolute; top:24rem; right:0; width:auto; padding:5rem 11rem; border:1px solid; font-weight:700; font-size:13rem; color:var(--c-01); border-radius:3rem;}
.edit-list{margin-top:16rem;}
.edit-list li strong{font-weight:400; font-size:13rem; color:#c7c7c7;}
.edit-list li + li{border-top:1px solid #ebebeb;}
.edit-list li p{color:var(--b-01);}

/* 회원탈퇴 */
.join-caption{margin-top:7rem; padding:12rem 15rem; background:#f5f5f5; font-size:13rem; border-radius:6rem;}
.join-caption li{margin-bottom:5rem; color:#898989;}
.join-textarea strong{display:block; margin-bottom:5rem; font-size:14rem; color:var(--b-01);}
.join-textarea{margin-top: 21rem;}

/* 결제내역 */
:is(.shop-item__profile,
.pay-form--profile) .cmn-thum{position:absolute; top:0; left:0; width:80rem; height:80rem; border:1px solid #ededed;}
.shop-item__profile{display:flex; align-items:center; position:relative; /* height:80rem; */ padding-left:92rem;}
.shop-item__inr{display:flex; align-items:flex-start; flex-direction:column;}
.shop-item__inr i{font-size:13rem; color:#bfbfbf;}
.shop-item__inr strong{line-height:1.4; margin-top:7rem; font-size:16rem; color:var(--b-01);}
.shop-item__inr em{font-weight:600; font-size:12rem;}
.shop-item__inr .match-state{top:0; right:0;}
.shop-item__tit{display:block; margin-top:15rem; padding-top:15rem; border-top:1px solid #ededed; color:var(--b-01);}
.shop-item__tit i{display:block; display:none; font-weight:500; font-size:13rem; color:#bbb;}
.shop-item{padding:20rem; border:1px solid #eee; border-radius:10rem;}

.shop-pay .sec-line{margin-top:30rem; margin-bottom:30rem;}
.shop-pay .shop-item__inr > i{font-weight:500; color:#a1a1a1;}
.shop-pay .shop-item__inr  strong > i{margin-left:3rem; color:var(--b-01);}
.shop-pay .shop-item__inr strong{font-size:14rem;}
.shop-pay .shop-item__inr em{display:block; margin-top:1rem; font-weight:800; font-size:15rem;}
.shop-pay .shop-item__inr em i{margin-left:4rem; font-weight:400; text-decoration:line-through;}

.payment_price{display:flex; justify-content:space-between; align-items:center; margin-top:13rem; padding:14rem 20rem; border-radius:5rem;}
.payment_price *{font-size:14rem;}
.payment_price p{font-weight:500; color:var(--b-01);}
.pay-tit{display:block; margin-bottom:16rem; font-size:16rem; color:var(--b-01);}
.form-con > em{display:block; margin-bottom:6rem; font-weight:600; font-size:14rem; color:var(--b-01);}
.form-con + .form-con{margin-top:16rem;}
.form-con input + input{margin-top: 4rem;}
.form-con:has(#pay-bank),
.form-con:has(#same-info){display:flex; margin-top:-4rem; margin-bottom:22rem !important; gap:17rem;}
.form-con > i{display:block; margin-top:5rem; font-weight:600; font-size:13rem;}
.form-caption{margin-top:14rem; padding:18rem; border-radius:10rem;}
.form-caption strong{display:block; margin-bottom:7rem; font-size:13rem; color:var(--b-01);}
.form-caption ul li,
.form-caption p{margin-bottom:5rem; font-weight:300; font-size:13rem; color:#a9a9a9;}
.pay-form input[type="checkbox"] + label{padding-left:28rem; font-size:14rem; color:var(--b-01);}
.pay-form .solution-list{margin:0; padding-top:0; border-top:0;}
.pay-form + button{margin-top:30rem;}