@charset "utf-8";

/* **************************************** *
* 마이페이지
* **************************************** */
/* #content.mypage{padding-bottom: 80rem;} */
.mypage .main-header h2 {font-size: 17rem; font-weight: 700;} 

.mypage .profile-wrap {display: flex; justify-content: space-between; align-items: center;} 
.mypage .profile-wrap > .profile-left {display: flex; align-items: center;} 

.mypage .profile-wrap > .profile-left > strong {font-size: clamp(16rem, 1.5vw, 17rem); font-weight: 700; color: var(--c-02);}
.mypage .profile-wrap > .profile-left span {font-size: clamp(16rem, 1.5vw, 17rem); font-weight: 700; color: var(--b-01);}
.mypage-profile .cmn-thum{width:50rem; height: 50rem; background-color: var(--c-05); background-image: url(../img/none_profile.png); background-size:30rem; border-radius:140rem; border: 1px solid var(--c-04);}
.mypage-profile .mypage_edit__but {width: fit-content; height: fit-content; position: relative; padding: 4rem 22rem 4rem 8rem; font-size: 11rem; font-weight: 500; border-radius: 50rem; color: var(--b-02); border: 1px solid var(--b-05); background-color: #fff;}

.mypage-profile .mypage_edit__but > span {display: inline-block; position: absolute; top: 50%; right: 0; transform: translate(-6rem, -50%); width: 13rem; height: 13rem; background-image: url(../img/mypage_edit_ic.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}


.mypage-profile .btn-edit {left: 57%; bottom: 5rem;}

.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:3rem; right:-5rem; padding:3rem 9rem 2rem; 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;}


.my_button_wrap {margin-top: 20rem; border-top: 1px dashed var(--b-05);}
.my_button_wrap > ul {display: flex; border-radius: 7rem; background-color: #fff;}
.my_button_wrap > ul > li {width: calc(100% / 2); position: relative; padding: 20rem; cursor: pointer; text-align: center;}
.my_button_wrap > ul > li:first-child::after{content: ''; position: absolute; display: block; width: 1px; height: 50rem; top: 50%; right: 0; transform: translateY(-50%); background-color: var(--b-05);}
.my_button_wrap > ul > li i {display: inline-block; width: 20rem; height: auto;}
.my_button_wrap > ul > li i > img {width: 100%; height: auto; display: block; object-fit: cover;}
.my_button_wrap > ul > li p {display: block; font-weight: 600; color: var(--b-01);}
.my_button_wrap > ul > li b {font-size: 16rem; font-weight: 800; color: var(--c-02);}




/* 마이페이지 메뉴 */
.mypage-menu {background: #fff; border-radius: 7rem; padding: 10rem 0;}
.mypage-menu > li {position: relative; padding: 16rem 0 16rem; display: flex; justify-content: space-between; align-items: center;}
.mypage-menu > li:nth-child(1) {border: 0;}
.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 p {color: var(--g-01); font-size: 16rem; font-weight: 600;}
.mypage-menu > li i {display: inline-block; width: 18rem; height: 18rem;}
.mypage-menu > li i > img {display: block; width: 100%; height: auto; object-fit: cover; }


/* 예약현황 */
.reserve-list {padding-top: 5rem;}
.reserve-list__item {display: flex; align-items: center; padding: 30rem 0;}
.reserve-list__item.v2 {margin-top: 30rem; padding: 10rem; border-radius: 7rem; border: 1px solid var(--l-01);}
.reserve-list__item:not(:last-child) {border-bottom: 1px solid var(--l-01);}
.reserve-list__item strong {font-size: 15rem; color: var(--b-01);}
.reserve-list__thum {overflow: hidden; flex-shrink: 0; width: 35%; height: 110rem; margin-right: 20rem; border-radius: 7rem;}
.reserve-list__item .case-list__price {line-height: 1; font-size: 16rem;}
.reserve-list__item .case-list__price span {margin-top: 1px;}

.reserve-item {margin-top: 20rem; padding: 20rem; border-radius: 10rem; border: 1px solid var(--l-01);}
.reserve-item__profile {position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100rem; padding-left: 120rem;}
.reserve-item__numb {display: flex; align-items: center; padding-top: 5rem; font-weight: 600; color: var(--g-02);}
.reserve-item__numb span {display: block; margin-right: 3rem; font-weight: 600;}
.reserve-item__thum {overflow: hidden; position: absolute; left:0; top: 0; width: 100rem; height: 100rem; border-radius: 7rem;}
.reserve-item__tit {font-size: 16rem; color: var(--b-01);}
.reserve-item__list {margin-top: 20rem; padding-top: 12rem; border-top: 1px dashed var(--l-01);}
.reserve-item__list li {display: flex; align-items: center; justify-content: space-between; margin: 5rem 0; color: var(--g-02);}
.reserve-item__list li i {color: var(--g-01);}
.reserve-detail__top {position: relative; margin-top: 20rem; padding: 15rem 20rem; border-radius: 5rem; background: #f5f5f5;}
.reserve-detail__top .reserve-item__numb {padding-top: 0;}
.reserve-detail__top .match-state {right: 15rem; top: 13rem;}


/* 게시판 */
#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; width: 100rem; height: 100rem;}
.mypage-edit .mypage-profile{display:flex; justify-content:center; align-items:center; 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;}


.edit .content-header h2 {justify-content: center}
.edit .edit-list__pw > input:last-child{margin-top: 8rem;}
.edit .phone-input {display: flex; gap: 8rem;}
.edit .select-filter {width: calc(100% / 3);}
.edit .select-filter .select-btn {width: 100%; height: 100%;  border-radius: 7rem; }
.edit .select-filter .select-btn::before {display: none;}
/* .select-filter .select-btn::after {top: 20rem;} */
.edit .phone-input input {width: 100%;}
.edit .content-wrap {padding-bottom: 10rem;}

.edit-list .select-option {gap: 0;}
.edit-list .select-option > li {padding: 12rem 0rem;}
.edit-list li button.select-btn__complete {width: 100%; position: unset; }

/* 주문내역 */
.payment .shop-item__thum {display: flex; align-items: center; padding-bottom: 20rem;}
.payment .shop-item__thum .cmn-thum {width: 100rem; height: 100rem; flex: 1; border-radius: 7rem;}
.payment .shop-item__thum .shop-item__inr {flex: 2;}
.payment .sec-line {margin: 25rem 0;}
.payment .sec-line.tab-sec-line {margin: 0 0 20rem;}
.payment .shop-item__inr {display: flex; flex-direction: column;}
.payment .shop-item__top ,
.payment .shop-item__bot {display: flex; justify-content: space-between;}
.payment .shop-item__top {padding: 0 0 4rem;}
.payment .shop-item__bot {padding: 16rem 0 0; border-top:  1px solid #e1e1e1;}
.payment .shop-item__bot > p {color: #aaa;}
.payment .shop-item__inr > strong { display: -webkit-box;/* Flexbox 설정 */ -webkit-box-orient: vertical;/* 세로 방향으로 정렬 */ -webkit-line-clamp: 2; /* 표시할 줄 수 */overflow: hidden;/* 넘치는 부분 숨김 */text-overflow: ellipsis;}
.payment .shop-item__inr > small {color: var(--g-02); display: -webkit-box;/* Flexbox 설정 */ -webkit-box-orient: vertical;/* 세로 방향으로 정렬 */ -webkit-line-clamp: 1; /* 표시할 줄 수 */overflow: hidden;/* 넘치는 부분 숨김 */text-overflow: ellipsis; }
.payment .shop-item__mid {padding-bottom: 8rem;}
.payment .shop-item__mid > p {color: var(--c-03); font-weight: 500;}


.payment .shop-item-none {height: 100%;}
.payment .shop-item-none {text-align: center; padding: 180rem 0;}
.payment .shop-item-none > b {color: var(--g-02);}


/* 주문내역 상세보기 */
.shop-pay-detail .content-wrap {padding-bottom: 70rem;}
.payment .shop-item + .shop-item{margin-top: 12rem;}
.line{display: block; width: 100%; height: 1px; border-top: 1px solid #eee; margin-top: 30rem; margin-bottom: 23rem;}
.shop-pay-detail .payment-list li{display: flex; justify-content: space-between;}
.shop-pay-detail .payment-list li em{font-weight: 700; color: #aaa; font-size: 13rem; display: block;}
.shop-pay-detail .payment-list li p{font-weight: 400; color: var(--b-01); font-weight: 13rem;}
.shop-pay-detail .payment-list li:first-child{padding-top: 0;}
.shop-pay-detail .payment-list li:last-child{padding-bottom: 0;}
.shop-pay-detail .pay-tit {display: block; padding-bottom: 16rem; font-size: 15rem;}
.shop-pay-detail .mypage-payment {padding-top: 20rem;}
/* .shop-pay-detail .payment-list {padding-bottom: 20rem;} */
.shop-pay-detail .payment_price {display: flex; justify-content: space-between; padding: 20rem 0;}
.shop-pay-detail .payment_price > strong {font-size: 18rem; color: #111 !important;}
.shop-pay-detail .between-list li > i {width: 74%; text-align: right;}



.pay-form__tit_wrap {display: flex; justify-content: space-between;}
.address__first {display: flex; width: 100%; gap: 8rem;}
.address__first > input {width: 70%;}
.address__first > button {width: 30%; font-size: 14rem; font-weight: 600; border: 1px solid #aaa; background-color: #F1F2F3; border-radius: 7rem;}

.vir_pay_box > p {display: flex; gap: 4rem;}
.vir_pay_box > p > small {color: var(--g-02);}
.vir_pay_box > p > span {}
.vir_pay_box > p > span::after {content: '-'; font-weight: 300; color: var(--g-02); display: block; top: -3rem; position: relative;}

.payment-list {display: flex; flex-direction: column; gap: 8rem;}


.growth-list__item{ background-color: #fff; border-radius: 7rem; border: 1px solid var(--b-05);}
.growth-list__title{justify-content:space-between; align-items:center; padding:16rem 16rem;}
.growth-list__cont{display:none; padding:15rem 20rem; border-top:1px dashed #eee;}
.growth-list__btn{display:flex; justify-content:center; align-items:center; position:relative; padding:12rem; border-top:1px dashed var(--b-05); font-size:12rem; color:var(--b-03);}
.growth-list__btn::after{content:""; width:8rem; height:8rem; background:url(../img/common/ic-toggle.svg);}
.growth-list__item:has(.growth-list__btn.on) .growth-list__cont{display:block;}
.growth-list__title > strong{display:flex; align-items:center; font-weight:400;}
.growth-list__title > p{font-weight:400;}
.growth-list{display:grid; gap:16rem;}
.growth-list__title > strong i{display:block; width:17rem; height:17rem; margin-left:6rem; background:var(--bd-01); background-size:9rem; background-position:50%50%; border-radius:100%; background-image:url(../img/common/ic-check_w.svg); background-repeat:no-repeat;}
.growth-list__title.on > strong i{background-color:var(--c-01);}
.growth-list__title.on > strong{font-weight:500; color:var(--b-01);}
.growth-list__btn::after{content:""; display:block; width:10rem; height:10rem; margin-left:8rem; background:url(../img/common/ic-toggle.svg) no-repeat 50% 50%; background-size:9rem; transform:rotate(180deg);}
.growth-list__btn.on::after{transform:rotate(0deg);}
.growth-list__btn.on{background:#f9f9f9;}
.growth-list__title > p{display: flex; flex-direction: column; line-height:1; font-size:15rem; font-weight: 600; color:var(--b-01);}
.growth-list__title > p > small {color: #999;}
.growth-list__cont p{text-align: center; margin-top:14rem; padding-top:14rem; padding-bottom:10rem; border: 1px solid var(--c-01); background-color: var(--c-05); color: var(--c-01); border-radius: 7rem; font-size:13rem;}

.growth-list__number {padding: 16rem 16rem 0rem; display: flex; justify-content: space-between;}
.growth-list__number > small {font-size: 10rem; border-radius: 3rem; background-color: var(--b-06); color: var(--b-03); padding: 4rem; border: 1px solid var(--b-05);}

/* 마이페이지 상담 내역 */
.mypage .growth-list__number > strong i{display:none;}
.mypage .growth-list__number > strong{font-size:13rem;}
.mypage .growth-list__number > strong{padding:3rem 9rem; border:1px solid; font-size:12rem; color:var(--c-01); border-radius:40rem;}

.mypage .growth-list__number > strong.counsel_application {background-color: var(--c-01); color: #fff;}
.mypage .growth-list__number > strong.counsel_confirmed {border: 1px solid rgb(0, 212, 177); background-color: rgb(0, 212, 177); color: #fff;}
.mypage .growth-list__number > strong.counsel_end {border: 1px solid var(--b-05); background-color: var(--b-05); color: var(--b-03);}

.mypage .growth-list__title > p i{display:block; margin-bottom:5rem; font-size:11rem; color: var(--b-03);}
.form-item__btn{display:flex; margin-top:15rem; gap:5rem;}
.form-item__btn button{margin-top:0rem !important;}
.form-item__btn button:last-child{background:var(--c-01); color:#fff;}
.mypage .between-list li i { color: var(--b-01); font-weight: 400;}

.history_view .history_box_wrap {display: flex; flex-direction: column; gap: 30rem;}
.history_view .history_box {background-color: #fff; border: 1px solid var(--b-05); border-radius: 7rem; overflow: hidden;}
.history_view .history_box ul {display: flex; flex-direction: column; padding: 0 16rem 16rem;}
.history_view .history_box ul > li {display: flex; justify-content: space-between; align-items: center; padding: 16rem 0; border-bottom: 1px dashed var(--b-05);}
.history_view .history_box ul > li:last-child {border-bottom: 0;}
.history_view .history_box ul > li > small {font-size: 13rem; color: #aaa;}
.history_view .history_box ul > li > p {font-size: 13rem; color: var(--b-01); font-weight: 500;}
.history_view .pay-tit.slide-tit {position: relative; display: block; width: 100%; padding: 16rem; background-color: var(--b-06); font-weight: 500;}
.history_view .history_box ul > li.diffrent_style {flex-direction: column; align-items: flex-start;}
.history_view .history_box ul > li.diffrent_style > div {margin-top: 8rem;}
.history_view .history_box ul > li > .recipe_img_box {width: 100%; border-radius: 7rem; overflow: hidden;}
.history_view .history_box ul > li > .recipe_img_box > img {width: 100%; height: auto; object-fit: cover; object-position: center;}
.history_view .pay-tit.slide-tit:after{content: ''; position: absolute; display: block; top: 50%; right: 16rem; transform: translateY(-50%) rotate(135deg); width: 8rem; height: 8rem; border-top: 1px solid #999; border-right: 1px solid #999; transition: all .15s;}
.history_view .pay-tit.slide-tit.rotate:after{transform: translateY(-50%) rotate(-45deg);}

.hap_box {margin-bottom: 14rem;}