@charset "utf-8";

/* *************************************************************************************
*
* 로그인
* 
* **************************************************************************************/
/* 공통 */
.page_member .box_inner {max-width: 52rem; padding: 5rem 2rem; margin: 0 auto;}
.page_member .dot_ul {margin: 0.8rem 0;}
.page_member .dot_ul li {color: #555; font-weight: 500;}
.page_member .notice {margin-bottom: 2.5rem;}
.page_member .notice .desc {font-weight: 500; word-break: keep-all;}

/* SNS 버튼 */
.page_member .social_btn {display: flex; gap: 1.2rem; flex-wrap: wrap;}
.page_member .social_btn .btn {display: block; text-align: center; font-size: 1.8rem; font-weight: 600; border-radius: 1rem;}
.page_member .social_btn .naver {background-color: #0ec75b; color: #fff;}
.page_member .social_btn .kakao {background-color: #fee403;}
.page_member .social_btn .google {background-color: #e6e8ea;}
.page_member .social_btn .normal {background-color: #EEEAF8;}
.page_member .social_btn .btn span {display: inline-block; padding-left: 3rem; background-position: left center; background-size: 2rem; background-repeat: no-repeat;}
.page_member .social_btn .naver span {background-image: url("../images/common/logo_naver.png");}
.page_member .social_btn .kakao span {background-image: url("../images/common/logo_kakao.png");}
.page_member .social_btn .google span {background-image: url("../images/common/logo_google.png");}
.page_member .social_btn .normal span {background-image: url("../images/common/logo_sns_normal.png");}
.page_member .social_btn.top_logo .btn span {padding-left: 0; padding-top: 3.2rem; background-position: top center; background-size: 3rem; background-repeat: no-repeat;}

/* 로그인 - 간편로그인 */
.page_member .social_login {position: relative; text-align: center;}
.page_member .social_login p {display: inline-block; margin-bottom: 2rem; background-color: #fff; font-size: 1.8rem; font-weight: 600; text-align: center;}
.page_member .social_login p::before {position: absolute; left: 0; top: 1.2rem; width: 100%; height: 1px; background-color: var(--border-color); content: ''; z-index: -1;}
.page_member .social_login .social_btn .btn {width: calc(100% / 3 - 0.8rem); height: 9.5rem; padding: 2rem;}
.page_member .social_login .social_btn.column {flex-direction: column;}
.page_member .social_login .social_btn.column .btn {width: 100%; height: 7rem; line-height: 7rem; padding: 0 2rem;}

/* 로그인 - 아이디저장, 아이디찾기 */
.page_member .login_box {width: 100%; max-width: 72rem; margin: 3rem auto; border: 2px solid var(--border-color); border-radius: 2rem;}
.page_member .login_box .basic_form {padding: 0; border: 0;}
.page_member .login_box .basic_form .item {margin-bottom: 1.2rem;}
.page_member .login_save {margin-top: 1.5rem; margin-bottom: 1.5rem;}
.page_member .find_btn {margin-top: 3rem; margin-bottom: 4rem; display: flex; justify-content: center; gap: 1rem 0.8rem; flex-wrap: wrap;}
.page_member .find_btn li {width: 14rem; height: 4rem; line-height: 4rem;}
.page_member .find_btn a {display: block; width: 100%; padding: 0 1.2rem; font-size: 1.6rem; font-weight: 500; text-align: center; border: 1px solid var(--border-color); border-radius: 5rem;}
.page_member .login_info {color: #222; font-size: 1.8rem; font-weight: 500; text-align: center;}
.page_member .login_info .result {margin: 2rem 0 3rem; padding: 3rem; font-size: 3rem; font-weight: 600; background-color: #f7f8fa; border-radius: 1.5rem;}
.page_member .login_info .underline {text-decoration: underline; text-underline-offset: 0.5rem;}
.page_member .login_info .ico {display: inline-block; margin-bottom: 2.5rem;}
.page_member .login_info .ico.complete img {width: 8rem;}
.page_member .login_info .title {display: block; margin-bottom: 1.2rem; font-size: 2.8rem; word-break: keep-all;}
.page_member .login_info .desc {word-break: keep-all;}
.page_member .login_btn {margin-top: 3rem; text-align: center; border-radius: 1rem; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); overflow: hidden;}
.page_member .login_btn .btn {display: block; width: 100%; height: 5.5rem; line-height: 5.5rem; font-size: 1.8rem; font-weight: 600; background-color: #333333; color: #fff;}
.page_member .login_btn .btn.disable {background-color: #8A949E;}

/* *************************************************************************************
*
* 회원가입
* 
* **************************************************************************************/
/* 가입단계 */
.page_member .step_list {margin: 6rem auto 8rem; display: flex; justify-content: center; gap: 2rem 4rem; flex-wrap: wrap;}
.page_member .step_list > li {position: relative; width: 18rem; height: 6rem; line-height: 6rem; background-color: #fff; color: #555; font-size: 1.8rem; font-weight: 500; text-align: center; border-radius: 5rem; box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);}
.page_member .step_list > li.on {background-color: #846cdd; color: #fff;}
.page_member .step_list > li::before {position: absolute; right: -4.5rem; top: 50%; transform: translateY(-50%); width: 1.5em; height: 1.5rem; background: url("../images/icon/arr_right.svg") no-repeat; background-size: 0.8rem; content: '';}
.page_member .step_list > li:last-child:before {content: none;}

/* 회원구분 선택 */
.page_member .box {max-width: 85rem; margin: 0 auto; border: 2px solid var(--border-color); border-radius: 2rem;}
.page_member .member_type {display: flex; gap: 1.5rem; max-width: 1100px; margin: 3rem auto;}
.page_member .member_type .title {display: flex; align-items: center; justify-content: center; width: 21.5rem; text-align: center; font-size: 2rem; font-weight: bold; border-radius: 1rem;}
.page_member .member_type .title span {display: inline-block; padding-top: 6rem; background-size: 5.5rem; background-position: top center; background-repeat: no-repeat;}
.page_member .personal {background-color: #f5eeff;}
.page_member .personal span {background-image: url("../images/icon/ico_member_person.png");}
.page_member .company {background-color: #edfce9;}
.page_member .company span {background-image: url("../images/icon/ico_member_company.png");}
.page_member .member_list {width: calc(100% - 23rem);}
.page_member .member_list > li {display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 2.5rem 3rem; border: 2px solid var(--border-color); border-radius: 1rem;}
.page_member .member_list > li + li {margin-top: 1.5rem;}
.page_member .member_list .info {font-size: 1.8rem;}
.page_member .guide_list > li {color: #555;}
.page_member .guide_list > li + li {margin-top: 1.5rem;}
.page_member .guide_list b {font-weight: 500;}
.page_member .guide_title {display: block; color: #222; font-size: 2rem;}

/* 개인정보 입력 */
.page_member .agree_list {padding-bottom: 1rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--border-color);}
.page_member .agree_list > li {height: 4rem; margin-bottom: 0.8rem; display: flex; align-items: end; justify-content: space-between;}
.page_member .agree_list .form_label {font-weight: 600;}
.page_member .agree_list .view_btn {width: 10rem; height: 4rem; background-color: #fff; border: 1px solid var(--primary-color); color: var(--primary-color); text-align: center; font-weight: 600; border-radius: 1rem;}
.page_member .agreement_wrap {max-width: 110rem; margin: 0 auto 3rem; padding: 2rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);}
.page_member .agreement_wrap > li {position: relative; height: auto; min-height: 4.8rem; padding: 0.4rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;}
.page_member .agreement_wrap .check_box {display: flex; align-items: center; gap: 1rem; font-size: 1.8rem; font-weight: 600;}
.page_member .agreement_wrap input[type="checkbox"] {width: 2.6rem; height: 2.6rem; accent-color: var(--primary-color);}
.page_member .agreement_wrap label {cursor: pointer;}
.page_member .agreement_wrap label .point {color: #e84655;}
.page_member .agreement_wrap .agreement_content {display: none; width: 100%; margin-top: 1rem;}
.page_member .agreement_wrap .agreement_content.text-danger {display: block; color: #e84655; font-size: 1.4rem;}
.page_member .agreement_wrap .agreement_box {max-height: 32rem; padding: 2rem; overflow-y: auto; background-color: #f7f8fa; border: 1px solid var(--border-color); border-radius: 1rem;}
.page_member .agreement_wrap .scrollY {line-height: 1.7;}
.page_member .login_btn_group {max-width: 75rem; margin: 3rem auto 0; display: flex; gap: 1.2rem;}
.page_member .login_btn_group .m-btn {display: flex; align-items: center; justify-content: center; width: 50%; min-height: 5.5rem; border: 1px solid var(--primary-color); border-radius: 0.8rem; font-size: 1.7rem; font-weight: 600;}
.page_member .login_btn_group .prpl-line {background-color: #fff; color: var(--primary-color);}
.page_member .login_btn_group .prpl-bg {background-color: var(--primary-color); color: #fff;}
.page_member .member_form {max-width: 110rem; margin: 0 auto; }
.page_member .member_form .form_list {max-width: 75rem;}

/* *************************************************************************************
*
* 마이페이지
* 
* **************************************************************************************/
.mypage .dashboard {margin-bottom: 3rem; padding: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 4rem 2rem; flex-wrap: wrap; background-color: #f8f9fe; border-radius: var(--border-radius-base);}
.mypage .dashboard .member_info {width: 38rem; display: flex; align-items: center; flex-wrap: wrap; gap: 2rem;}
.mypage .dashboard .tag_group {margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;}
.mypage .dashboard .member_tag {display: inline-block; padding: 0 1.5rem; height: 3.5rem; line-height: 3.2rem; font-size: 1.5rem; background-color: #fff; border: 2px solid #ddd; border-radius: 5rem;}
.mypage .dashboard .social_tag {display: inline-block; width: 3.5rem; height: 3.5rem; border-radius: 50%; background-size: 1.7rem; background-position: center; background-repeat: no-repeat;}
.mypage .dashboard .social_tag.naver {background-color: #0ec75b; color: #fff; background-image: url("../images/common/logo_naver.png"); background-size: 1.5rem;}
.mypage .dashboard .social_tag.kakao {background-color: #fee403; background-image: url("../images/common/logo_kakao.png");}
.mypage .dashboard .social_tag.google {background-color: #e6e8ea; background-image: url("../images/common/logo_google.png");}
.mypage .dashboard .social_tag.normal {background-color: #EEEAF8; background-image: url("../images/common/logo_sns_normal.png"); background-size: 1.5rem;}
.mypage .dashboard .name_group {padding-left: 0.5rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;}
.mypage .dashboard .user_name {font-size: 2rem; font-weight: 600;}
.mypage .dashboard .edit_btn {width: 2.8rem; height: 2.8rem; background: url("../images/icon/ico_edit.png") center no-repeat; background-size: 1.7rem;}
.mypage .dashboard_list {width: calc(100% - 40rem); display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;}
.mypage .dashboard_list > li {position: relative; width: calc(100% / 4 - 1.875rem); padding: 2rem 1.5rem; border-radius: var(--border-radius-base); text-align: center;}
.mypage .dashboard_list > li::before {content: ''; position: absolute; left: 50%; top: 2.5rem; transform: translateX(-50%); width: 7.5rem; height: 7.5rem; border-radius: 50%; background-color: #000; opacity: 0.27; filter: blur(15px);}
.mypage .dashboard_list .location {background-color: #31a784; color: #fff;}
.mypage .dashboard_list .like {background-color: #846cde; color: #fff;}
.mypage .dashboard_list .platform {background-color: #fbe687; color: #514f45;}
.mypage .dashboard_list .post {background-color: #ec587c; color: #fff;}
.mypage .dashboard_list .ico {position: relative; display: inline-block; width: 7.5rem; height: 7.5rem; background-size: 7.5rem; background-position: bottom center; background-repeat: no-repeat;}
.mypage .dashboard_list .location .ico {background-image: url("../images/sub/dashboard_location.png");}
.mypage .dashboard_list .like .ico {background-image: url("../images/sub/dashboard_like.png");}
.mypage .dashboard_list .platform .ico {background-image: url("../images/sub/dashboard_platform.png");}
.mypage .dashboard_list .post .ico {background-image: url("../images/sub/dashboard_post.png");}
.mypage .dashboard_list .txt span {display: block; margin-bottom: 0.6rem; font-size: 1.8rem; font-weight: 500;}
.mypage .dashboard_list .txt strong {display: block; font-size: 2rem;}
.mypage .member_form {max-width: 75rem;}
.mypage-reservation-list .user-tit {display: flex; margin-bottom: 2rem; align-items: flex-end; justify-content: space-between; text-align: left;}
.mypage-reservation-list .user-tit h3 {font-size: 2.8rem; font-weight: 700;}
.mypage-reservation-list .user-tit h3 span {margin-left: 0.8rem; color: var(--primary-color); font-size: 1.6rem; font-weight: 500;}
.mypage-reservation-list .reservation-table {width: 100%; overflow-x: auto; border-top: 2px solid var(--primary-color);}
.mypage-reservation-list .respon-th,
.mypage-reservation-list .respon-td {display: flex; width: 100%; min-width: 100rem; border-bottom: 1px solid var(--border-color);}
.mypage-reservation-list .respon-th {background-color: #f7f8fc;}
.mypage-reservation-list .respon-th > li,
.mypage-reservation-list .respon-td > li {display: flex; min-height: 6rem; padding: 1.5rem 1rem; align-items: center; justify-content: center; text-align: center;}
.mypage-reservation-list .respon-th > li {color: #333; font-weight: 600;}
.mypage-reservation-list .reservation-row {transition: background-color 0.2s;}
.mypage-reservation-list .reservation-row:hover {background-color: #faf9ff;}
.mypage-reservation-list .reservation-row .tit {color: #222; font-weight: 600; text-decoration: underline; text-underline-offset: 0.4rem;}
.mypage-reservation-list .reservation-row .tit:hover,
.mypage-reservation-list .reservation-row .tit:focus {color: var(--primary-color);}
.mypage-reservation-list .rental-state {display: inline-flex; min-width: 8.5rem; min-height: 3.4rem; padding: 0.5rem 1rem; align-items: center; justify-content: center; border-radius: 4rem; background-color: #eef0f5; color: #555; font-size: 1.4rem; font-weight: 600;}
.mypage-reservation-list .rental-state.RS20,
.mypage-reservation-list .rental-state.RS30 {background-color: #fff4dc; color: #8a6200;}
.mypage-reservation-list .rental-state.RS40 {background-color: #e9f8f1; color: #087a52;}
.mypage-reservation-list .rental-state.RS51,
.mypage-reservation-list .rental-state.RS52,
.mypage-reservation-list .rental-state.RS53 {background-color: #fff0f3; color: #c62f58;}
.mypage-reservation-list .colw-10 {width: 10%;}
.mypage-reservation-list .colw-15 {width: 15%;}
.mypage-reservation-list .colw-20 {width: 20%;}
.mypage-reservation-list .mobile-tit {display: none;}

/* *************************************************************************************
*
* 반응형
* 
* **************************************************************************************/
@media all and (max-width:1280px){ 
    .container:has(.page_member) .navigation {display: none;}

    /* 마이페이지 */
    .mypage .dashboard {padding: 3rem 2rem;}
    .mypage .dashboard .member_info {width: 100%;}
    .mypage .dashboard_list {width: 100%; gap: 1rem;}
    .mypage .dashboard_list > li {width: calc(50% - 0.5rem);}
    .mypage .dashboard_list .txt span {font-size: 1.5rem;}
    .mypage .dashboard_list .txt strong {font-size: 1.8rem;}
}

@media all and (max-width:780px){ 
    /* 회원가입 */
    .page_member .step_list {background-color: #F5F5F5; border-radius: 1rem; overflow: hidden; gap: 0;}
    .page_member .step_list > li {width: calc(100% / 4); background-color: #F5F5F5; font-size: 1.4rem; box-shadow: none;}
    .page_member .step_list > li.on {border-radius: 1rem;}
    .page_member .member_type {flex-wrap: wrap;}
    .page_member .member_type .title {width: 100%; padding: 2rem;}
    .page_member .member_type .title span {padding-top: 0; background-image: none;}
    .page_member .member_list {width: 100%;}
    .page_member .member_list > li {padding: 2rem; flex-wrap: wrap;}
    .page_member .member_list .info {width: 100%;}
    .page_member .member_list .primary_btn {margin-left: auto;}

    /* 마이페이지 */
    .mypage .user_profile img {width: 7rem;}
    .mypage .dashboard .user_name {font-size: 1.7rem;}
    .mypage .dashboard_list > li::before {width: 4.5rem; height: 4.5rem;}
    .mypage .dashboard_list .ico {width: 4.5rem; height: 4.5rem; background-size: 4.5rem;}
    .mypage .dashboard_list .txt span {font-size: 1.4rem;}
    .mypage .dashboard_list .txt strong {font-size: 1.5rem;}
	.mypage-reservation-list .reservation-table {overflow: visible; border-top: 0;}
	.mypage-reservation-list .respon-th {display: none;}
	.mypage-reservation-list .respon-td {min-width: 0; margin-bottom: 1.5rem; padding: 1rem 1.5rem; flex-wrap: wrap; border: 1px solid var(--border-color); border-radius: 1.2rem;}
	.mypage-reservation-list .respon-td > li {display: flex; width: 100%; min-height: auto; padding: 0.8rem 0; justify-content: flex-start; text-align: left;}
	.mypage-reservation-list .mobile-tit {display: inline-block; width: 9rem; flex: 0 0 9rem; font-weight: 600;}
}

@media all and (max-width:480px){ 
    .page_member .box_inner {padding: 3rem 2rem;}
    .page_member .dot_ul li {font-size: 1.4rem;}
}