@charset "utf-8";

/* ==========================================================================
    MEMBER COMMON
   ========================================================================== */
.member-container {
    position: relative;
    max-width: var(--main-width); margin: 40px auto; padding: 0 40px;
    &.board-grid{max-width: var(--board-width);}
    .terms-container{padding-top: 20px;}
    @media (width <= 860px) {
        padding: 0 20px; margin: 30px auto;
    }
    @media (width <= 640px) {
        .terms-container{padding-top: 0;}
    }
}
/* ==========================================================================
    약관동의 - 회원가입
   ========================================================================== */
.terms-container {
    color: var(--basic-color);
    .policy-section:not(:last-child){margin-bottom: 40px;}
    .policy-title{font-size: 18px; font-weight: 600; margin-bottom: 20px;}
    .policy-title span{padding-left: 28px; background: url('/assets/site/img/common/ico-check03.svg') no-repeat 0 center;}
    .policy-body{height: 258px; padding: 24px; border: 1px solid var(--border-color02); background: var(--form-bg); border-radius: var(--radius01); overflow-y:auto; }
    .policy-content{line-height: 1.6; white-space:pre-wrap; word-break:break-all;}
    @media (width <= 860px) {
        .policy-title{font-size: 17px; margin-bottom: 15px;}
        .policy-body{height: 220px; padding: 20px;}
        .policy-content{font-size: 15px;}
    }
    @media (width <= 640px) {
        .policy-body{height: 180px; padding: 14px;}
    }
}

/* ==========================================================================
    MEMBER BOX
   ========================================================================== */
.member-tab {
    position: relative; display: flex; background: #f0f0f0; border-radius: 100px; margin-bottom: 40px;
    .tab-indicator { position: absolute; top: 0; left: 0; height: 100%; background: var(--point-color01); border-radius: 100px; transition: transform .25s ease-out; }
    .tab-btn { position: relative; z-index: 1; flex: 1; height: 46px; font-size: 16px; color: var(--desc-color); text-align: center; border-radius: 100px; transition: color .25s ease-out; }
    .tab-btn.is-active { font-weight: 600; color: #fff; }
    &.board-tab{max-width: 470px; width: 100%; margin: 0 auto 40px;}
    @media (width <= 1024px) {
        .tab-btn{font-size: 15px;}
        &.board-tab{max-width: 420px;}
    }
    @media (width <= 640px) {
        margin-bottom: 30px;
        .tab-btn {height: 42px;}
    }
}
.form-wrap { display: none; }
.form-wrap.is-active { display: block; }
/*로그인, 비밀번호 찾기 등 공통*/
.member-box {
    position: relative; max-width: 640px;
    padding: 39px 84px; border: 1px solid var(--border-color02); background: #fff; border-radius: var(--radius01);
    overflow: hidden; margin: 0 auto;
    .ip-member{height: 46px;}
    .login-wrap{display: flex; gap: 15px;}
    .form-list{flex: 1; display: flex; flex-direction: column; gap: 15px;}
    .form-list li{display: flex; align-items: center;}
    .form-list .ip-label{width: 80px; font-size: 14px; color: #222; flex-shrink: 0;}
    .btn-login{width: 137px;}
    .btn-login input{ width: 100%; height: 100%; font-size: 16px; font-weight: 600; color: #fff; background-color: var(--basic-color01); border-radius: 5px;}
    .login-util{display: flex; justify-content: space-between; align-items: center; margin-top: 15px;}
    .login-find { display: flex; align-items: center; gap: 0; font-size: 14px; color: var(--desc-color);}
    .login-find a { display: inline-block; transition: .15s ease-out;}
    .login-find a::after{content: ""; display: inline-block; width: 1px; height: 10px; background: #d4d8e1; margin: 0 9px;}
    .login-find a:last-child::after{display: none;}
    .login-find a:hover { color: #000; }
    .form-actions{margin: 40px 0 0;}
    .form-actions .form-button{width: 160px;}
    &.join-box {max-width: var(--board-width); padding: 4px 25px;}
    @media (width <= 860px) {
        padding: 39px 60px;
    }
    @media (width <= 640px) {
        padding: 0; border: 0; border-radius: 0;
        &:has(.member-result){padding: 34px 20px; border: 1px solid var(--border-color02); border-radius: 10px;}
        .member-tab {
            margin-bottom: 24px;
            .tab-btn{height: 45px;  font-size: 15px;}
            &.board-tab{margin: 0 auto 24px;}
        }
        .login-wrap,
        .form-list{gap: 10px;}
        .form-list .ip-label{width: 65px;}
        .btn-login{width: 106px;}
        .form-chk01 {
            .chk-item{width: 22px; height: 22px;}
            .chk-item:checked{background-size: 12px auto;}
        }
        .form-actions{margin: 32px 0 0;}
        &.join-box {padding: 0;}
    }
}

/* ==========================================================================
    아이디 찾기 결과
   ========================================================================== */
.member-result {
    color: var(--black-color); text-align: center;
    .result-title{font-size: 20px; font-weight: 600; line-height: 30px;}
    .result-desc{font-size: 15px; color: #666; line-height: 23px; margin-top: 16px;}
    .item-wrap {display:inline-block; margin: 18px 0 0 0; padding: 8px 24px; background: #FFF6F7; border-radius: 5px;}
    .item-wrap dl {display: flex; font-size: 15px; font-weight: 500; overflow: hidden;}
    .item-wrap dl dd::before {content: ''; display: inline-block; width: 1px; height: 10px; background: #E1D4D4; margin: 0 11px;}
}

/* ==========================================================================
    회원가입 완료
   ========================================================================== */
.join-result {
    position: relative; max-width: 640px;
    padding: 35px 40px; overflow: hidden; margin: 0 auto;
    border: 1px solid var(--border-color02); background: var(--form-bg); border-radius: var(--radius01);
    .result-text{text-align: center}
    .result-title{font-size: 20px; font-weight: 600; color: var(--black-color);}
    .result-desc{font-size: 15px; color: var(--desc-color); line-height: 20px; margin-top: 16px;}
    &.white{background-color: #fff;}
    @media (width <= 640px) {
        padding: 30px 20px;
        .result-desc{margin-top: 14px;}
        + .form-actions{margin-top: 40px;}
    }
}



/***************** 공통 하단 가이트 - 개인정보처리방침 / 이용약관 *****************/
.guide{margin-top: 40px;}
.guide .full {background: #f9f9f9; padding: 40px;}

.guide .con_text {}
.guide .con_text .top {margin-bottom: 50px;}
.guide .con_text ol > li {margin-top: 50px;}
.guide .con_text ol > li:first-child {margin-top: 0;}
.guide .con_text ol > li > div.tit {font-size: 20px; font-weight: 700; margin-bottom: 10px;}


/* 공통 뎁스 */
.guide .con_text .depth {margin-top: 15px;}
.guide .con_text .depth strong {font-weight: 600;}
.guide .con_text .depth li {margin-top: 15px; padding-left: 15px;}
.guide .con_text .depth li > .mark {display: inline-block; margin-left: -15px; margin-right: 3px;}
.guide .con_text .depth li > .tit {display: inline;}

/*ul margin 조절*/
.guide .con_text .depth_lim {margin-top: 5px;}

/*ul 내 li margin 조절*/
.guide .con_text .lim li {margin-top: 5px;}


@media all and (max-width:860px){
    .guide{margin-top: 30px; font-size: 15px;}
    .guide .full {padding: 30px 20px;}
    .guide .con_text .top {margin-bottom: 40px;}
    .guide .con_text ol > li {margin-top: 40px;}
    .guide .con_text ol > li > div.tit {font-size: 15px;}
    .pg-terms .main-grid{padding: 0;}
}



/* ==========================================================================
    마이페이지
   ========================================================================== */
/*관심회원*/
.mypage-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 20px; color: var(--black-color);
    padding: 40px; background: var(--basic-color02); border-radius: 12px; margin-bottom: 38px;
    .summary-user { display: flex; align-items: center; gap: 20px; flex: 1; }
    .summary-thumb { width: 122px; flex-shrink: 0;}
    .summary-thumb .user-img { aspect-ratio: 122 / 100; border-radius: var(--radius01); overflow: hidden; background: url("/assets/site/img/common/user-blank.svg") no-repeat center / cover;}
    .summary-thumb .user-name{display: none; font-size: 17px; font-weight: bold; text-align: center; margin-top: 8px;}
    .summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .summary-name { display: block; font-size: 22px; font-weight: 700;  line-height: 30px; }
    .summary-desc { font-size: 14px; line-height: 22px; color: var(--desc-color); margin-top: 4px; }
    .status-summary { display: grid; grid-template-columns: repeat(4, 152px);}
    .summary-item { text-align: center; }
    .summary-item:not(:last-child) { border-right: 2px solid var(--border-color03); }
    .summary-item .ico { display: inline-block; width: 40px; aspect-ratio: 1; background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: 3px; }
    .summary-item .ico-like{background-image: url("/assets/site/img/common/ico-mp0101.svg");}
    .summary-item .ico-schedule{background-image: url("/assets/site/img/common/ico-mp0102.svg");}
    .summary-item .ico-send{background-image: url("/assets/site/img/common/ico-mp0103.svg");}
    .summary-item .ico-heart{background-image: url("/assets/site/img/common/ico-mp0104.svg");}
    .summary-item .ico-mail01{background-image: url("/assets/site/img/common/ico-mp0105.svg");}
    .summary-item .ico-mail02{background-image: url("/assets/site/img/common/ico-mp0106.svg");}
    .summary-item .ico-cup{background-image: url("/assets/site/img/common/ico-mp0107.svg");}
    .summary-item .ico-heartbk{background-image: url("/assets/site/img/common/ico-mp0108.svg");}
    .summary-label { display: block; font-size: 18px; font-weight: 600; color: var(--basic-color01); white-space: nowrap; margin-bottom: 9px;}
    .summary-count { font-size: 35px; font-weight: 400; line-height: 1;}
    .summary-count span { position: relative; top: -1px; font-size: 14px; font-weight: 400; color: var(--desc-color); margin-left: 5px; }
    &.manager {
        .status-summary{grid-template-columns: repeat(6, 1fr); width: 100%;}
    }
    @media (width <= 1420px) {
        .status-summary{grid-template-columns: repeat(4, 145px);}
        .summary-name{font-size: 20px;}
        .summary-item:not(:last-child) { border-right: 1px solid var(--border-color03); }
        .summary-label{font-size: 17px;}
        .summary-count { font-size: 33px;}
    }
    @media (width <= 1280px) {
        justify-content: center;
        .status-summary{grid-template-columns: repeat(4, 156px);}
        .summary-user{flex: 0 1 auto;}
        .summary-info{display: none;}
        .summary-thumb .user-name{display: block;}
        &.manager {
            padding: 40px 20px;
        }
    }
    @media (width <= 1024px) {
        gap: 0; padding: 30px 20px;
        .summary-thumb .user-name{font-size: 16px;}
        .summary-item .ico{width: 36px;}
        .status-summary{grid-template-columns: repeat(4, 148px);}
        .summary-label{font-size: 16px;}
        .summary-count { font-size: 30px;}
        &.manager {
            .status-summary{grid-template-columns: repeat(3, 1fr);}
            .summary-item{padding: 24px 0;}
            .summary-item:nth-child(3) { border-right: 0; }
            .summary-item:nth-child(-n + 3){padding-top: 0; border-bottom: 1px solid var(--border-color03);}
            .summary-item:nth-child(n + 3){padding-bottom: 0;}
        }
    }
    @media (width <= 860px) {
        gap: 40px;
        .summary-user{display: none;}
        .summary-info{display: block;}
        .summary-thumb .user-name{display: none;}
        .summary-thumb{width: 114px;}
        .summary-name{font-size: 19px;}
        .status-summary{grid-template-columns: repeat(4, 136px);}
    }
    @media (width <= 640px) {
        padding: 20px; gap: 34px;
        .summary-user{flex: 0 0 100%;}
        .status-summary{flex: 0 0 100%; grid-template-columns: repeat(2, 1fr);}
        .summary-item{padding: 24px 0;}
        .summary-item:nth-child(2) { border-right: 0; }
        .summary-item:nth-child(-n + 2){padding-top: 0; border-bottom: 1px solid var(--border-color03);}
        .summary-item:nth-child(n + 2){padding-bottom: 0;}
        .summary-user{gap: 14px;}
        .summary-thumb{width: 90px;}
        .summary-name{font-size: 18px; line-height: 26px;}
        .summary-item .ico{width: 32px; margin-bottom: 0;}
        .summary-label{font-size: 15px;}
        .summary-count { font-size: 26px;}
        &.manager {
            padding: 0;
            .status-summary{grid-template-columns: repeat(3, 1fr);}
            .summary-item:nth-child(2) { border-right: 1px solid var(--border-color03); }
            .summary-item:nth-child(-n + 3){padding-top: 24px;}
            .summary-item:nth-child(n + 3){padding-bottom: 24px;}
            .summary-name{font-size: 16px;}
            .summary-count { font-size: 24px;}
        }
    }
}
/*매칭 상태 바*/
.status-bar {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 26px 40px; background-color: var(--basic-color02); border-radius: var(--radius01);
    margin-bottom: 40px;
    .ico-circle {
        display: flex; justify-content: center; align-items: center; width: 70px; aspect-ratio: 1;
        background: #FFD4D4; border-radius: 50%;
        .ico{display: inline-block; width: 32px; aspect-ratio: 1; background-repeat: no-repeat; background-position: center; background-size: contain; }
        .ico-mail01{background-image: url("/assets/site/img/common/ico-mp0105.svg");}
        .ico-mail02{background-image: url("/assets/site/img/common/ico-mp0106.svg");}
        .ico-cup{background-image: url("/assets/site/img/common/ico-mp0107.svg");}
        .ico-heartbk{background-image: url("/assets/site/img/common/ico-mp0108.svg");}
    }
    .status-info{line-height: 1.4; letter-spacing: -2%;}
    .is-status{font-size: 18px; font-weight: bold; color: var(--point-color01);}
    .desc{color: var(--bb-color); margin-top: 7px;}
    &.has-event {
        background-color: #f1f8ff;
        .is-status{color: var(--bb-color);}
        .ico-circle {background-color: #00306d;}
    }
    @media (width <= 1024px) {
        padding: 22px 30px; margin-bottom: 30px;
        .is-status{font-size: 17px;}
        .desc{font-size: 15px; margin-top: 5px;}
    }
    @media (width <= 860px) {
        padding: 22px 20px; margin-bottom: 20px;
    }
    @media (width <= 640px) {
        padding: 22px 19px; margin-bottom: 30px;
        .ico-circle{display: none;}
        .is-status{font-size: 16px;}
        .desc{font-size: 14px; margin-top: 5px;}
        .desc br{display: none;}
    }
}
/*알림리스트*/
.alim-list {
    display: flex; flex-direction: column; gap: 20px;
    .alim-bar {
        background-color: var(--basic-color02); border-radius: var(--radius01);
        > a{display: flex; align-items: flex-start; gap: 14px;  padding: 20px;}
        .ico-circle {display: flex; justify-content: center; align-items: center; width: 40px; aspect-ratio: 1;}
        .ico-circle img{width: 100%;}
        .status-info{line-height: 1.4; letter-spacing: -2%;}
        .is-status{font-size: 18px; font-weight: bold; color: var(--point-color01);}
        .date{color: var(--bb-color); margin-top: 5px;}
        &.has-good {
            background-color: #FFF8E8;
            .is-status{color: #FF9D00;}
        }
        &.has-event {
            background-color: #F2F8FF;
            .is-status{color: var(--bb-color);}
        }
        &.is-read{filter: grayscale(1) saturate(.2); opacity: .7;}
    }
    @media (width <= 1024px) {
        .alim-bar {
            .is-status{font-size: 17px;}
            .date{font-size: 15px;}
        }
    }
    @media (width <= 640px) {
        .alim-bar {
            > a{padding: 17px 20px;}
            .ico-circle{display: none;}
            .is-status{font-size: 16px;}
            .date{font-size: 14px;}
        }
    }
}
/*프로필 관리*/
.profile-point {
    display: grid; grid-template-columns: minmax(0, 1fr) 247px; align-items: start; gap: 20px;
    letter-spacing: -4%;
    .point-group,
    .register-group{min-width:0;}
    .point-title{font-size: 18px; font-weight: 600; color: var(--basic-color01); line-height:1.4; margin-bottom: 18px;}

    .point-list{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;}

    .point-item{display: flex; flex-direction: column; min-height: 152px;  padding: 15px; border: 1px solid var(--border-color01); border-radius:var(--radius01); background:#fff;}

    .point-icon{margin-bottom: 10px;}
    .point-icon img{width:28px;}
    .point-name{display:block; font-size:18px; font-weight:600; color: var(--black-color); line-height: 1.5; margin-bottom: 11px;}
    .point-desc{font-size:14px; color:var(--desc-color); line-height: 22px;}

    .register-card{display:flex; justify-content:center; align-items:center; width:100%; min-height: 152px; font-size: 18px; font-weight:700; color:#fff; border-radius:var(--radius01); background:var(--point-color01);}
    .register-card span{padding-left: 32px; background:url("/assets/site/img/common/ico-pen01.svg") no-repeat 0 center / 24px auto;}
    .register-card:hover{color: #fff; filter: brightness(.92);}

    @media (width <= 1280px) {
        grid-template-columns: minmax(0, 1fr) 220px; gap: 16px;
    }
    @media (width <= 1200px) {
        grid-template-columns: minmax(0, 1fr) 200px; gap: 14px;
        .point-title{font-size: 17px; margin-bottom: 14px;}
        .point-name,
        .register-card{font-size: 17px;}
    }

    @media (width <= 1024px) {
        grid-template-columns:1fr; gap: 40px;
        .register-group{display: flex; flex-direction: column; justify-content: center; text-align: center;}
        .register-card{width: 260px; min-height: 50px; border-radius: var(--form-radius); margin: 0 auto;}
    }

    @media (width <= 860px) {
        gap: 30px;
        .point-list{grid-template-columns:repeat(2, minmax(0, 1fr));}
    }

    @media (width <= 640px) {
        margin-top:36px;
        .point-list{grid-template-columns:1fr; gap: 12px;}
        .point-item{min-height:auto; }
        .point-desc br{display:none;}
        .register-card{width: 100%; min-height: 52px; font-size: 16px;}
        .register-card span{padding-left:28px; background-size:20px auto;}
    }
}