@charset "utf-8";

/* ==========================================================================
    Element
   ========================================================================== */
.round-button {
    display: inline-flex; justify-content: center; align-items: center;
    width: 90px; aspect-ratio: 1;
    border-radius: 50%; background: var(--point-color01);
    font-size: 14px; color: #fff; text-align: center;
    transition: .15s ease-out;
    .btn-txt{display: flex; flex-direction: column; gap: 4px; line-height: 1;}
    .btn-txt strong{font-size: 20px; font-weight: 600;}
    .btn-txt span{font-size: 16px; font-weight: 300;}
    &:hover{background: var(--point-color01); color: #fff;}
    @media (width <= 1024px) {
        width: 84px;
        .btn-txt strong{font-size: 18px;}
        .btn-txt span{font-size: 15px;}
    }
}
/* 상단 버튼 컨트롤 */
.sw-nav01 {
    .swiper-button-prev,
    .swiper-button-next{width: 55px; height: auto; aspect-ratio: 1; background: var(--point-color01) url("/assets/site/img/common/arr01.svg") no-repeat center; transition: .2s ease-out; margin-top: 0;}
    .swiper-button-prev{left: 0;}
    .swiper-button-next{right: 0; rotate: 180deg;}
    .swiper-button-prev:hover{background-position: calc(50% - 3px);}
    .swiper-button-next:hover{background-position: calc(50% - 3px);}
    @media (width <= 1420px) {
        .swiper-button-prev,
        .swiper-button-next{width: 40px;}
    }
    @media (width <= 1280px) {
        .swiper-button-prev{left: 20px;}
        .swiper-button-next{right: 20px;}
    }
    @media (width <= 860px) {
        .swiper-button-prev{left: 0;}
        .swiper-button-next{right: 0;}
    }
    @media (width <= 640px) {
        display: none;
    }
}
/*라운드 태그*/
.filter-tag {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 8px 0 12px; border: 1px solid #F8CECE; border-radius: 20px; background: #FDF2F2;
    .filter-tag-text{font-size: 14px; font-weight: 600; color: var(--point-color01);}
    .filter-tag-remove { flex: 0 0 auto; width: 20px; height: 20px; border: 0; background: url('/assets/site/img/common/ico-x01.svg') no-repeat center / 100% auto; cursor: pointer; }
}
.b-label {
    display:inline-flex; justify-content:center; align-items:center; min-height: 26px; padding: 0 9px; font-size: 14px; font-weight:600; line-height: 1; letter-spacing: -4%; border: 1px solid currentColor; border-radius: 14px;
    &.is-green{color: #36BE8F; background: rgba(54, 190, 143, 0.1);}
    &.is-blue{color: #6FC9FA; background: rgba(111, 201, 250, 0.1);}
    &.is-pink{color: #F298F6; background: #FCEFFC;}
    &.is-orange{color:#F3B200; background: rgba(255, 187, 4, 0.1);}
    &.is-gray{color:#9E9E9E; background:#F5F5F5;}
    &.is-purple{color:#A4ADFF; background:#F0F2FF;}
}

.event-badge{
    display: flex; gap: 6px;
    .e-badge{display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 5px; font-size: 15px; color: #fff; background-color: #222;}
    .badge-loc.loc-ko{background-color: #1E3A5F;}
    .badge-loc.loc-jp{background-color: #222;}
    .badge-status.status-open{background-color: #DF2727;}
    .badge-status.status-soon{background-color: #FF9800;}
    .badge-status.status-closed{background-color: #757575;}
    @media (width <= 1280px) {
        .e-badge{height: 28px; font-size: 14px;}
    }
}
.kakao-btn{display: inline-flex; align-items: center; height: 32px; padding: 0 14px; font-size: 14px; color: #371D1E; letter-spacing: -5%; background: #FAE100; border-radius: 16px; margin-left: 10px;}
.kakao-btn span{display: inline-block; padding-right: 23px; background: url('/assets/site/img/board/logo-kakao.svg') no-repeat right center / 19px auto;}

/*기본 탭*/
.js-tab-cont{
    display: none;
    &.active{display: block;}
}
/* ==========================================================================
   CARDS
   ========================================================================== */
/*프로필 카드*/
.profile-card {
    position: relative; height: 100%;
    border: 1px solid var(--border-color01); border-radius: var(--radius01);
    background: #fff; overflow: hidden;
    .profile-link{display: block;}
    .profile-inner{display: flex; flex-direction: column; height: 100%;}
    .profile-thumb {position: relative;}
    .user-img {width: 100%; aspect-ratio: 310 / 240; overflow: hidden;}
    .user-img img{transition: .22s ease-out;}
    .like-button {position: absolute; top: 19px; right: 19px; width: 24px; aspect-ratio: 1; background: url("/assets/site/img/common/heart.svg"); z-index: 1;}
    .like-button.fill{background-image: url("/assets/site/img/common/heart-fill.svg");}
    .profile-marker {position: absolute; top: 13px; left: 20px;}
    .profile-info {display: flex; flex-direction: column; flex: 1; padding: 20px 19px 24px; border-top: 1px solid var(--border-color01);}
    .profile-name {display: flex; align-items: flex-start; gap: 7px; line-height: 1;}
    .profile-summary{font-size: 12px; color: #999; line-height: 1.2; margin-top: 4px;}
    .profile-summary span:not(:last-child)::after{content: ""; display: inline-block; width: 3px; aspect-ratio: 1; background-color: #D9D9D9; border-radius: 50%; vertical-align: middle; margin: 0 2px 0 6px;}
    .rank {position: relative; top: 2px; display: flex; align-items: center; gap: 4px; font-size: 19px; font-weight: 600; color: #888;}
    .rank::after {content: ""; display: block; width: 1px; height: 12px; background: #D8D8D8; margin-left: 6px;}
    .name {font-size: 19px; font-weight: 600; line-height: 26px; word-break: break-all}
    .flag {position: relative; top: 2px; min-width: 27px;}
    .profile-text {font-size: 13px; font-weight: 700; color: #757575; line-height: 20px; margin-top: 9px;}
    .profile-tags {display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;}
    .profile-tags li {font-size: 13px; color: #757575;}
    .profile-tags li::before{content: "#";}
    .profile-badges {display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 24px;}
    .badge {display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #475067; line-height: 14px; padding: 5px 8px 5px 25px; background-color: #f5f6fa; background-repeat: no-repeat; background-position: 7px center; border-radius: 3px;}
    .badge-bubble{background-image: url("/assets/site/img/common/ico-badge-bubble.svg");}
    .badge-heart{background-image: url("/assets/site/img/common/ico-badge-heart.svg");}
    .badge-home{background-image: url("/assets/site/img/common/ico-badge-home.svg");}
    .badge-air{background-image: url("/assets/site/img/common/ico-badge-air.svg");}
    .profile-btn{margin-top: auto;}

    &:hover .user-img img{scale: 1.1;}
    @media (width > 1460px) {
        &.horizontal {
            .profile-inner{height: 252px;}
        }
    }
    @media (width > 1200px) {
        &.horizontal {
            .profile-inner{flex-wrap: wrap; flex-direction: row;}
            .profile-thumb,
            .profile-info{flex: 0 0 50%;}
            .profile-info{border-top: 0;}
            .profile-thumb .profile-link{height: 100%;}
            .user-img {position: absolute; aspect-ratio: auto; height: 100%;}
        }
    }
    @media (width <= 1420px) and (width > 1200px) {
        &.horizontal {
            .profile-info{padding: 18px 19px 20px;}
            .profile-badges{margin: 18px 0 20px;}
            .profile-btn{height: 36px;}
        }
    }
    @media (width <= 640px) {
        .name {font-size: 20px;}
        .profile-text,
        .profile-tags li {font-size: 14px;}
    }
}

.profile-list {
    > ul{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
    @media (width > 1200px) {
        > ul.dv2{grid-template-columns: repeat(2, minmax(0, 1fr));}
    }
    @media (width <= 1200px) {
        > ul{grid-template-columns: repeat(3, minmax(0, 1fr));}
    }
    @media (width <= 860px) {
        > ul{grid-template-columns: repeat(2, minmax(0, 1fr));}
    }
    @media (width <= 640px) {
        > ul{grid-template-columns: minmax(0, 1fr);}
    }
}

.basic-card {
    position: relative; height: 100%;
    border-radius: var(--radius01) var(--radius01) 0 0; background: #fff; overflow: hidden;
    > a{display: flex; flex-direction: column; height: 100%;}
    .basic-thumb {position: relative;}
    .thumb-img {width: 100%; aspect-ratio: 417 / 280; overflow: hidden;}
    .basic-info {display: flex; flex-direction: column; flex: 1; padding: 23px 19px 24px; border: 1px solid var(--border-color01); border-radius: 0 0 var(--radius01) var(--radius01);}
    .cate{font-size: 13px; font-weight: 500; color: var(--point-color01); margin-bottom: 13px;}
    .date{font-size: 14px; font-weight: 500; color: rgba(14,22,22,.5); margin: 16px 0 20px;}
    .card-title {display: flex; align-items: flex-start; gap: 7px;}
    .card-title strong{font-size: 19px; font-weight: 600; line-height: 26px; word-break: break-all;}
    .basic-btn{margin-top: auto;}
    &:hover .basic-btn{background: var(--point-color01); color: #fff;}
}

/* ==========================================================================
   회원 상세 & 이벤트
   ========================================================================== */
.member-section {
    &:not(:last-child){margin-bottom: 40px;}
    .member-head{position: relative; margin-bottom: 20px;}
    .member-title{padding-left: 12px; font-size: 20px; font-weight: 600; line-height: 1;}
    .member-title::before{content: ""; position: absolute; top: 50%; left: 0; width: 4px; height: 16px; background-color: var(--point-color01); transform: translateY(-50%); border-radius: 2px;}
    @media (width <= 1280px) {
        .member-title{font-size: 19px;}
    }
    @media (width <= 1200px) {
        .member-title{font-size: 18px; padding-left: 10px;}
        .member-title::before{width: 3px; height: 14px;}
    }
}

/*팝업에도 사용*/
.member-data {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border-color01);
    .data-item{display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); min-height: 60px; border-bottom: 1px solid var(--border-color01); line-height: 1.45;}
    .data-item.is-wide{grid-column: 1 / -1; grid-template-columns: minmax(120px, 19%) minmax(0, 1fr);}
    .data-item dt,
    .data-item dd{display: flex; align-items: center; padding: 18px 20px;}
    .data-item dt{font-weight: 400; color: #616161; background: #f9f9f9;}
    .data-item dd{min-width: 0; font-weight: 500; color: var(--basic-color01); word-break: break-word;}
    .field-input{height: 44px;}
    .ht01{height: 108px;}
    .ht02{height: 316px;}
}

.member-textbox {
    padding: 38px 34px; border: 1px solid var(--border-color01); border-radius: var(--radius01);
    color: var(--bb-color); line-height: 24px; letter-spacing: -2%;
    .member-textbox-title{display: block; font-size: 17px; font-weight: 700; margin-bottom: 17px; }
    .member-textbox-rating {display: flex; align-items: center; gap: 6px; margin-bottom: 22px;}
    .member-textbox-rating img{width: 20px;}
    &.manager,
    &.gray{background: #f9f9f9; border-color: #f9f9f9;}
}
/*진행이력*/
.history-list {
    padding-left: 40px;
    .history-item {
        position: relative; padding-bottom: 34px;
        &:not(:last-child)::before{content: ""; position: absolute; left: -26px; top: 8px; bottom: -8px; width: 2px; background: #ec8484;}
        &::after{content: ""; position: absolute; left: -25px; top: 10px; transform: translate(-50%,-50%); width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--point-color01);}
        &:last-child{padding-bottom: 0;}
        .history-text{line-height: 1.4; color: #222;}
        .history-date{display: block; font-size: 12px; font-weight: 600; color: #9E9E9E; line-height: 1; margin-top: 6px;}
        &:last-child{
            &::after{width: 20px; border: 5px solid #df111d; background: #fff;}
            /*.history-text{color: #e51926;}*/
        }
    }
    @media (width <= 860px) {
        .history-item{
            padding-bottom: 25px;
            .history-text{font-size: 15px;}
        }
    }
}

.member-layout {
    display: grid; grid-template-columns: 30.76923% minmax(0, 1fr); align-items: start; gap: 60px;
    font-size: 16px;
    &.left-point {
        grid-template-columns: 420px minmax(0, 1fr);
    }
    .member-side {
        position: sticky; top: calc(var(--header-height, 0px) + 24px); min-width: 0;
        &.manager-side {
            top: var(--header-height, 0px);
            .profile-card {
                .user-img{aspect-ratio: 40 / 33;}
                .detail-btns{display: none;}
            }
            .manager-menu{display: flex;}
        }
    }
    .member-content {display: flex; flex-direction: column; gap: 40px; min-width: 0; color: var(--bb-color);}
    .profile-card {
        height: auto; border: 0; border-radius: 0;
        .profile-inner{flex-wrap: wrap;}
        .like-button{display: none;}
        .user-img{aspect-ratio: 400 / 530; border: 1px solid var(--border-color01); border-radius: var(--radius01);}
        .profile-inner{gap: 20px;}
        .profile-info{border: 1px solid var(--border-color01); border-radius: var(--radius01);}
        .profile-badges{margin: 18px 0 0;}
        .detail-btns {
            display: flex; gap: 12px; margin-top: 24px;
            .profile-btn{font-weight: bold; line-height: 20px;}
            .like-btn,
            .like-btn:hover{color: #616161; border-color: var(--border-color01); background: #fff;}
            .like-btn span{padding-left: 26px; background: url("/assets/site/img/common/heart01.svg") no-repeat 0 center / 20px auto;}
            .like-btn.fill span{background-image: url("/assets/site/img/common/heart01-fill.svg")}
            .matching-btn{color: #fff; background-color: var(--point-color01);}
        }
    }
    .manager-menu{display: none; flex-direction: column; gap: 20px;}
    .member-nav {
        padding: 10px; background: #fff5f5; border-radius: var(--radius01);
        ul{display: flex; flex-direction: column; gap: 4px;}
        .member-btn{position: relative; display: flex; align-items: center; width: 100%; height: 48px; padding: 0 20px 0 30px; font-size: 18px; color: #757575; border-radius: 5px;}
        .member-btn::before{content: ""; position: absolute; left: 18px; width: 4px; aspect-ratio: 1; background: #bdbdbd; border-radius: 50%;}
        .member-btn.active{font-weight: 600; color: var(--point-color01); background: #ffdfe2;}
        .member-btn.active::before{background: var(--point-color01);}
    }
    .in-box {
        letter-spacing: -2%;
        border: 1px solid var(--border-color01); border-radius: var(--radius01); overflow: hidden;
        .title-bar{padding: 13px 19px;border-bottom: 1px solid var(--border-color01); background-color: #f9f9f9;}
        .title-bar .title{font-size: 20px; font-weight: 600; color: var(--bb-color);}
        .box-cont{min-height: 50px;}
        + .member-actions{margin-top: 40px;}
        .matching-member {
            padding: 16px 19px 21px;
            &:not(:last-child){border-bottom: 1px solid var(--border-color01);}
            .mem-tit{font-size: 18px; font-weight: 600; color: var(--bb-color); margin-bottom: 10px;}
            .mem-tit span{color: #9E9E9E;}
        }
        .history-wrap{padding: 25px 19px;}
        .form-container {
            padding: 14px 42px 30px;
            .form-row{grid-template-columns: 160px 1fr; padding: 8px 0;}
            .form-row:not(:last-child){border-bottom: 0;}
        }
        .member-side & .profile-card {
            .profile-inner {flex-wrap: nowrap; flex-direction: row; height: auto; gap: 16px;}
            .profile-thumb{flex: 0 0 120px;}
            .user-img{border:0; aspect-ratio: 1; border-radius: 5px;}
            .profile-info{padding: 0; border: 0; border-radius: 0;}
            .btn-wrap{margin-top: 16px;}
            .profile-btn{height: 42px; font-size: 15px; color: var(--bb-color); border-color: var(--bb-color);}
            .profile-btn:hover{color: #fff; background-color: var(--bb-color);}
        }
    }

    .consult-write-btn{
        height: 64px; font-size: 18px; font-weight: 600; color: var(--point-color01);
        border: 1px solid var(--point-color01); border-radius: var(--form-radius);
        span{padding-left: 30px; background: url("/assets/site/img/common/ico-pen.svg") no-repeat 0 center / 24px auto;}
        &:hover{color: #fff;}
        &:hover span{background-image: url("/assets/site/img/common/ico-pen-w.svg");}
    }
    .status-summary {
        display: grid; grid-template-columns: repeat(4, 1fr);
        padding: 15px 20px; background-color: var(--basic-color02); border-radius: var(--radius01);
        .summary-item { text-align: center; padding: 11px 0; }
        .summary-item:not(:last-child) { border-right: 1px 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-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; }
    }
    .member-box-list {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
        &.dv3{grid-template-columns: repeat(3, minmax(0, 1fr));}
        .box-item{display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 122px; padding: 14px; text-align: center; border: 1px solid var(--border-color01); border-radius: 5px;}
        .box-item .box-icon{margin-bottom: 12px;}
        .box-item .box-icon img{width: 28px;}
        .box-item dt{font-weight: 500; color: #616161;}
        .box-item dd{font-weight: 600; line-height: 24px;}
    }
    .member-tag-list {
        > ul{display: flex; flex-wrap: wrap; gap: 10px;}
        .tag-item { display: inline-flex; align-items: center; height: 36px; color: var(--point-color01); line-height: 1; padding: 0 15px; border: 1px solid #F8CECE; border-radius: 20px; background: #FDF2F2;}
    }
    .member-tag-box{
        padding: 10px 14px; border: 1px solid var(--border-color01); border-radius: var(--form-radius);
        > ul{display: flex; flex-wrap: wrap; gap: 10px;}
        .tag-input-item{flex:1; min-width: 140px;}
        .tag-input{width:100%; height:36px; padding:0; color:var(--basic-color01); line-height:24px; border:0; background:transparent; outline:0;}
        .tag-input::placeholder{color: #9e9e9e;}
    }
    .single-form {
        textarea{height: 296px;}
    }
    .member-actions {
        display: flex; justify-content: center; gap: 10px;
        .member-action-btn{display: inline-flex; width: 160px; height: 44px; font-size: 16px; font-weight: 500; color: var(--point-color01); border-radius: var(--form-radius);}
        .member-action-btn:hover,
        .red-btn{color: #fff; background: var(--point-color01);}
        .black-btn,
        .black-btn:hover{color: #fff; border-color: var(--bb-color); background: var(--bb-color);}
    }
    .register-side {
        .profile-upload-wrap{display: flex; flex-direction: column; gap: 20px;}
        .profile-upload{position:relative;}
        .profile-upload-input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;}
        .profile-upload-box{position: relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; aspect-ratio: 400 / 530; text-align: center; color: #424242; padding: 20px; border: 2px dashed #424242; border-radius: var(--radius01); background:#f9f9f9; overflow: hidden; cursor:pointer; transition:.15s ease-out;}
        .profile-upload-box:hover{color: var(--bb-color); border-color:var(--point-color01); background:#fffafa;}
        .profile-upload-input:focus-visible + .profile-upload-box{outline:2px solid var(--point-color01); outline-offset:3px;}
        .profile-upload-box .profile-img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
        .profile-upload-icon{display:flex; justify-content:center; align-items:center; width: 40px; aspect-ratio:1; margin-bottom: 20px;}
        .profile-upload-icon img{width: 100%;}
        .profile-upload-title{font-size: 20px; font-weight: 600; line-height: 1;}
        .profile-upload-desc{font-size: 15px; line-height: 24px; margin-top: 8px;}
        .profile-guide{flex: 1; font-size: 14px; padding: 20px; border: 1px solid var(--border-color01); border-radius: var(--radius01); background: #fff;}
        .profile-guide-title{position:relative; display:block; padding-left:22px; font-weight:600; line-height:20px; margin-bottom: 16px;}
        .profile-guide-title::before{content:"!"; position:absolute; top: 2px; left:0; display:flex; justify-content:center; align-items:center; width:16px; aspect-ratio:1; font-size:12px; font-weight:700; color:#fff; line-height:1; border-radius:50%; background:var(--point-color01);}
        .profile-guide-list{display:flex; flex-direction:column; gap: 14px;}
        .profile-guide-list li{position: relative; color:#555; line-height: 1.6; padding-left: 11px; text-indent: -11px;}
        .profile-guide-list li::before{content:"※ "; }
        &.event-side .profile-upload-box{aspect-ratio: 400 / 225;}
    }

    .field-wrap {
        width: 100%;
        > .field-input{width:100%;}
        .file-upload{margin-top: 16px;}
    }
    .member-guide {
        display: flex; flex-direction: column; gap: 4px;
        font-size: 14px; color: #003F85; line-height: 1.6; letter-spacing: -2%;
        margin-top: 14px;
        .guide-item{position: relative; padding-left: 14px;}
        .guide-item::before{content: "※ "; position: absolute; top: 0; left: 0;}
    }
    /*상담 기록*/
    .member-consult .bo_top{margin-bottom: 40px;}
    .consult-history {
        color: var(--bb-color);
        .consult-month + .consult-month{margin-top: 40px;}
        .consult-month-head{position:relative; display: flex; align-items: center; width: 100%; height: 72px; padding: 0 40px; font-size: 20px; border-radius:var(--form-radius); background: #F5F5F5; cursor:pointer;}
        .consult-month-head::-webkit-details-marker{display:none;}
        .consult-month-head::marker{content:"";}
        .consult-month-head strong{font-weight:600;}
        .consult-month-head strong span{color: var(--point-color01);}
        .consult-month-head::after{content:""; position:absolute; top:50%; right: 26px; width: 10px; aspect-ratio:1; border-right: 2px solid #868686; border-bottom: 2px solid #868686; transform:translateY(-65%) rotate(45deg); transition:transform .15s ease-out;}
        .consult-month[open] .consult-month-head::after{transform:translateY(-35%) rotate(225deg);}
        .consult-month-body{padding-top:20px;}
        .consult-day-list{display:flex; flex-direction:column; gap:20px;}
        .consult-day{display: flex; flex-direction: column; gap: 40px; padding: 34px; border:1px solid var(--border-color01); border-radius:var(--radius01); background:#fff;}
        .consult-title{display:block; font-size: 18px; font-weight:700; line-height:24px; margin-top: 17px;}
        .consult-content{line-height: 24px; letter-spacing: -2%; word-break: break-all; margin-top: 17px;}
        .consult-date{display:block; font-size: 14px; color: #757575; line-height:20px; margin-top: 14px;}
    }
    @media (width <= 1480px) {
        gap: 40px;
        .register-side {
            .profile-upload-icon{width: 36px; margin-bottom: 18px;}
            .profile-upload-title{font-size: 19px;}
            .profile-upload-desc{font-size: 14px;}
        }
    }
    @media (width <= 1420px) {
        &.left-point{grid-template-columns: 380px minmax(0, 1fr);}

    }
    @media (width <= 1280px) {
        font-size: 15px;
        &.left-point{grid-template-columns: 360px minmax(0, 1fr);}
        .member-nav a{height: 42px; font-size: 16px;}
        .consult-write-btn{height: 50px; font-size: 17px;}
        .consult-write-btn span{padding-left: 26px; background-size: 20px auto;}
        .in-box {
            .form-container {
                padding: 10px 30px 20px;
                .form-row{grid-template-columns: 140px 1fr;}
            }
            .member-side & .profile-card {
                .profile-thumb{ flex: 0 0 100px;}
            }
        }
        .status-summary {
            padding: 15px 0;
            .summary-item .ico{width: 34px;}
            .summary-label{font-size: 17px; margin-bottom: 5px;}
            .summary-count{font-size: 28px;}
        }
        .member-data {
            .data-item{grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);}
            .data-item.is-wide{grid-template-columns: minmax(120px, 17%) minmax(0, 1fr);}
            .data-item dt,
            .data-item dd{padding: 14px 12px;}
            .field-input{height: 42px; font-size: 15px;}
        }
        .member-tag-box .tag-input{font-size: 14px;}
        .member-textbox{padding: 26px 28px; line-height: 22px;}
        .member-consult .bo_top{margin-bottom: 30px;}
        .consult-history {
            .consult-month + .consult-month{margin-top: 30px;}
            .consult-month-head{height: 64px; font-size: 19px; padding: 0 30px;}
            .consult-day{padding: 30px;}
        }
    }
    @media (width <= 1200px) {
        &.left-point{grid-template-columns: 320px minmax(0, 1fr)}
        .status-summary {
            padding: 15px 0;
            .summary-item .ico{width: 32px; margin-bottom: 0;}
            .summary-label{font-size: 16px; margin-bottom: 5px;}
            .summary-count{font-size: 26px;}
            .summary-count span{font-size: 13px;}
        }
        .member-tag-list > ul,
        .member-tag-box > ul{gap: 8px;}
        .member-data .ht02{height: 260px;}
        .member-textbox {
            .member-textbox-rating{gap: 4px;}
            .member-textbox-rating img{width: 18px;}
        }
        .single-form textarea{height: 240px;}
    }
    @media (width <= 1200px) and (width > 1024px) {
        .consult-write-btn{height: 48px; font-size: 16px;}
        .in-box {
            .title-bar{padding: 12px 19px;}
            .title-bar .title{font-size: 18px;}
            .matching-member .mem-tit{font-size: 17px; margin-bottom: 7px;}
            .form-container {
                .form-row{grid-template-columns: 100px 1fr;}
                .select-group{gap: 10px 18px;}
            }
        }
        .profile-card {
            .profile-inner,
            .manager-menu{gap: 14px;}
        }
        .member-data {
            .data-item{grid-template-columns: minmax(120px, 32%) minmax(0, 1fr);}
            .data-item.is-wide{grid-template-columns: minmax(120px, 16%) minmax(0, 1fr);}
            .data-item dt,
            .data-item dd{padding: 12px;}
        }
        .member-box-list {
            .box-item .box-icon{margin-bottom: 8px;}
            .box-item .box-icon img{width: 26px;}
        }
    }
    @media (width <= 1024px) {
        grid-template-columns: 1fr;
        &.left-point {
            grid-template-columns: 1fr; gap: 30px;
            .member-content{gap: 30px;}
        }
        .in-box {
            .title-bar{padding: 14px 19px;}
            .title-bar .title{font-size: 19px;}
            .matching-members{display: flex;}
            + .member-actions{margin-top: 30px;}
            .matching-member {
                flex: 1;
                &:not(:last-child){border-bottom: 0;}
            }
            .member-side & .profile-card {
                .profile-thumb{flex: 0 0 120px;}
            }
        }
        .consult-write-btn{height: 45px; font-size: 15px; margin-top: auto;}
        .profile-card {
            .profile-inner{flex-direction: row;}
            .profile-thumb{flex: 0 0 196px;}
            .user-img{aspect-ratio: 16 / 19;}
            .detail-btns .profile-btn{max-width: 168px;}
        }
        .member-nav a{height: 40px; font-size: 15px;}
        .member-side{
            position: relative; top: auto;
            &.manager-side {
                top: auto;
                .profile-card .profile-thumb{flex: 0 0 170px;}
                .manager-menu{gap: 0; min-width: 170px; height: 170px;}
            }
        }
        .register-side {
            .profile-upload-wrap{flex-direction: row;}
            .profile-upload{flex: 0 0 170px;}
            .profile-upload-box{aspect-ratio: 1;}
            .profile-upload-icon{width: 30px; margin-bottom: 14px;}
            .profile-upload-title{font-size: 17px;}
            .profile-upload-desc{font-size: 13px; margin-top: 5px;}
            &.event-side {
                .profile-upload{flex: 0 0 260px;}
                .profile-upload-box{aspect-ratio: 40 / 28;}
            }
        }
        .member-data {
            .ht01{height: 90px;}
            .ht02{height: 220px;}
        }
    }
    @media (width <= 860px) {
        .profile-card .profile-inner{gap: 14px;}
        .in-box {
            .title-bar{padding: 12px 19px;}
            .title-bar .title{font-size: 18px;}
            .matching-members{display: block;}
            .matching-member {
                &:not(:last-child){border-bottom: 1px solid var(--border-color01);}
            }
            .form-container {
                padding: 4px 19px 20px;
                .form-row{grid-template-columns: 84px 1fr;}
                .select-group{gap: 10px 8px;}
            }
            .member-side & .profile-card {
                .profile-btn{height: 40px;}
            }
        }
        .member-nav {
            padding: 0; background: transparent; border-radius: 0;
            > ul{flex-direction: row}
            > ul > li{flex: 1;}
            a{height: 40px; font-size: 15px;}
        }
        .single-form textarea{height: 200px;}
        .member-side {
            &.manager-side {
                top: auto;
                .profile-card .profile-thumb{flex: 0 0 170px;}
                .manager-menu{flex: 0 0 100%; gap: 14px; height:auto;}
            }
        }
        .register-side {
            .profile-upload{flex: 0 0 176px;}
            .profile-upload-box{aspect-ratio: 16 / 18;}
            .profile-upload-icon{width: 28px; margin-bottom: 12px;}
            .profile-guide-title{margin-bottom: 12px;}
            &.event-side {
                .profile-upload{flex: 0 0 150px;}
                .profile-upload-box{aspect-ratio: 16 / 18;}
                .profile-upload-title{line-height: 1.3;}
            }
        }
        .status-summary {
            .summary-item .ico{width: 30px;}
            .summary-label{font-size: 15px;}
            .summary-count{font-size: 25px;}
        }
        .member-data .ht02{height: 200px;}
        .member-box-list{grid-template-columns: repeat(3, minmax(0, 1fr))}
        .member-textbox{
            padding: 22px 24px;
            .member-textbox-rating{margin-bottom: 18px;}
            .member-textbox-rating img{width: 17px;}
        }
        .consult-history {
            .consult-month + .consult-month{margin-top: 20px;}
            .consult-month-head{height: 60px; font-size: 18px; padding: 0 20px;}
            .consult-day{padding: 20px;}
            .b-label{font-size: 13px;}
            .consult-title{font-size: 17px; margin-top: 14px;}
            .consult-content{margin-top: 12px;}
            .consult-date{font-size: 13px; margin-top: 10px;}
        }
    }
    @media (width <= 640px) {
        &.left-point {
            gap: 20px;
            .member-content{gap: 20px;}
        }
        .in-box {
            .matching-member .mem-tit{font-size: 17px; margin-bottom: 5px;}
            + .member-actions{margin-top: 20px;}
            .form-container {
                padding: 4px 19px 14px; border-top: 0;
                .form-row{grid-template-columns: 1fr;}
                .form-row:last-child{border-bottom: 0;}
                .select-group{gap: 10px 14px; font-size: 14px;}
            }
            .member-side & .profile-card {
                .profile-thumb{flex: 0 0 96px;}
            }
        }
        .profile-card {
            .profile-inner{flex-direction: column;}
            .user-img {aspect-ratio: 1;}
        }
        .single-form textarea{height: 160px;}
        .register-side {
            .profile-upload-wrap {flex-direction: column; align-items: center; gap: 40px;}
            .profile-upload{width: 170px;}
            &.event-side {
                .profile-upload{flex: 1; width: 260px;}
                .profile-upload-box{aspect-ratio: 400 / 225;}
            }
        }
        .status-summary {
            grid-template-columns: repeat(2, 1fr);
            padding: 20px 0;
            .summary-item{padding: 20px 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;}
        }
        .member-sections {font-size: 14px;}
        .member-box-list,
        .member-box-list.dv3{grid-template-columns: repeat(2, minmax(0, 1fr))}
        .member-tag-list {
            > ul{gap: 6px;}
            .tag-item{height: 32px;}
        }
        .member-tag-box {
            > ul{gap: 6px;}
            .filter-tag{height: 32px;}
        }
        .field-wrap .file-upload{margin-top: 10px;}
        .member-data{
            grid-template-columns: 1fr;
            .data-item,
            .data-item.is-wide{grid-template-columns: 100px minmax(0, 1fr)}
            .data-item dt,
            .data-item dd{padding: 12px;}
            .field-input{height: 40px;}
            .ht02{height: 160px;}
            .select-group {gap: 12px 18px;}
            &.m-wide {
                .data-item{grid-template-columns: 1fr;}
                .data-item dd{padding: 12px 0 30px; border-top: 1px solid var(--border-color01);}
            }
        }
        .member-actions .member-action-btn{flex: 1;}
        .member-consult .bo_top{margin-bottom: 20px;}
        .consult-history .consult-month-head{height: 56px; font-size: 17px; padding: 0 20px;}
    }
    @media (width <= 480px) {
        .profile-card .user-img {aspect-ratio: 400 / 480;}
    }
}

/* ==========================================================================
   Slider
   ========================================================================== */
/* Grid Slider - 신규회원 */
.grid-slider {
    position: relative;
    .swiper{ width: 100%; }
    .swiper-slide{height: auto !important;}
}
/* Center Slider - 추천회원 */
.center-slider {
    position: relative; overflow: hidden;
    padding: 30px 0 0;
    .swiper { width: 100%; padding: 0 0 20px; overflow: hidden; }
    .swiper-wrapper { align-items: center; }
    .swiper-slide{ width: 100%; opacity: .4; transform: scale(.7); transform-origin: center center; transition: transform .32s ease, opacity .32s ease; /*will-change: transform, opacity;*/ box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.08);}
    .swiper-slide-prev,
    .swiper-slide-next { opacity: .7; transform: scale(.8); }
    .swiper-slide-active {opacity: 1; transform: scale(1); }
    @media (width <= 860px) {
        padding-top: 0;
        .swiper-slide-prev,
        .swiper-slide-next { opacity: .5; transform: scale(.8); }
    }
    @media (width <= 640px) {
        .swiper-wrapper { align-items: stretch; }
        .swiper-slide-prev,
        .swiper-slide-next { opacity: 1; transform: scale(1); }
        .swiper-slide{box-shadow: none;}
    }
}
/* Basic Slider - 이벤트 */
.basic-slider {
    position: relative;
    .swiper { width: 100%; padding: 0 0 20px;}
    .swiper-slide{height: auto !important;}
    @media (width <= 1024px) {
        .swiper-slide{max-width: 340px;}
    }
    @media (width <= 640px) {
        .swiper-slide{max-width: 100%;}
    }
}

/* ==========================================================================
   COMPONENT
   ========================================================================== */
/* Synced Slider - 공지사항 */
.article-list {
    width: 100%;
    .article-item {
        position: relative;
        border-bottom: 1px solid var(--border-color01);
        button{display: flex; align-items: center; gap: 20px; width: 100%; height: 69px;}
        .article-title {flex: 1; display: flex; align-items: center; gap: 7px; overflow: hidden;}
        .article-title strong{min-width: 0; display: block; font-size: 19px; font-weight: 500;  letter-spacing: -0.5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: left;}
        .article-title i{flex-shrink: 0; width: 20px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: #fff; background-color: var(--point-color01); border-radius: 50%;}
        .article-date {font-size: 16px; font-weight: 500; color: rgba(0,0,0,.5); text-align: right;}
        &::after{content: ""; display: block; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background-color: transparent;}
        &.active {
            border-color: var(--point-color01);
            &::after{background-color: var(--point-color01);}
            .article-title strong{font-weight: 700;}
        }
    }
}

.synced-slider {
    .slider-container:has(.thumb-slider) {position: relative; width: 100%; min-width: 0; overflow: hidden;}
    .thumb-slider {
        width: 100%; min-width: 0; overflow: hidden;
        .image img{border-radius: var(--radius01);}
    }
    @media (width <= 1580px) {
        .article-list .article-item {
            button{height: 60px;}
            .article-title strong{font-size: 18px;}
        }
    }
    @media (width <= 1420px) {
        .article-list .article-item button{height: 56px;}
    }
    @media (width <= 1280px) {
        .article-list .article-item button{height: 54px;}
    }
    @media (width <= 1200px) {
        .article-list .article-item {
            button{height: 47px;}
            .article-title strong{font-size: 16px;}
            .article-date{font-size: 14px;}
            &::after{display: none;}
        }
    }
    @media (width <= 1024px) and (width > 860px) {
        .article-list .article-item {
            button{height: 46px;}
            .article-title strong{font-size: 16px;}
            .article-date{display: none;}
        }
        .thumb-slider .image{height: 232px;}
    }
    @media (width <= 640px) {
        .article-list .article-item {
            button{height: 52px;}
            .article-title strong{font-size: 16px;}
            .article-date{display: none;}
        }
    }
}

/* ==========================================================================
   회원 상세 검색 필터
   ========================================================================== */
.search-filter {
    font-size: 14px; color: var(--basic-color01); z-index: 10;
    margin-top: 32px;
    .filter-table { border: 1px solid var(--border-color01); background-color: #fff; border-radius: var(--radius01); overflow: hidden; }
    .filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .filter-col {
        min-width: 0;
        display: flex; flex-direction: column;
        &:not(:nth-child(6n)) { border-right: 1px solid var(--border-color01); }
        .col-title { border-top: 1px solid var(--border-color01); }
        .col-toggle { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 42px; font-weight: 600; padding: 0 12px 0 22px; background: #fafafa; }
        .col-toggle::after { content: ""; flex: 0 0 auto; width: 16px; aspect-ratio: 1; background: url('/assets/site/img/common/arr-fliter.svg') no-repeat center; transition: rotate .15s; }
        .col-body {flex: 1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .15s ease-out;}
        .col-body-inner {min-height: 0; overflow: hidden;}
        .col-body-content {max-height: 260px; overflow-y: auto; }
        .col-body-content::-webkit-scrollbar{width: 6px;}
        .col-body-content::-webkit-scrollbar-track{background: #F0F2F6;}
        .col-body-content::-webkit-scrollbar-thumb{background: #B8BDC9; border-radius: 3px;}
        &.is-open {
            .col-toggle::after { rotate: 180deg; }
            .col-body { grid-template-rows: 1fr; border-top: 1px solid var(--border-color01);}
        }
        &.is-first-row {
            .col-title{border-top: 0;}
            .col-body { grid-template-rows: 1fr; transition: none; border-top: 1px solid var(--border-color01);}
            .col-toggle::after { display: none; }
            .col-toggle { cursor: default; }
        }
        &.is-active {
           .col-toggle { background: var(--point-color01); color: #fff; }
           .col-toggle::after { filter: brightness(0) invert(1); rotate: 180deg; }
           .col-body { background-color: #fefaf9; }
           .col-body-content::-webkit-scrollbar-thumb{background: #000;}
        }
    }
    .filter-footer {
        display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
        padding: 20px 24px; border-top: 1px solid #e5e5e5;
        .filter-tag-list { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
        .filter-footer-actions { display: flex; gap: 8px; }
        .filter-footer-btn{display: inline-flex; justify-content: center; align-items: center; width: 156px; height: 44px; font-size: 16px; color: #555; letter-spacing: -4%; border: 1px solid #e5e5e5; background: #fff; border-radius: var(--form-radius);}
        .filter-reset span { padding-left: 25px; background: url('/assets/site/img/common/ico-refresh.svg') no-repeat 0 center / 16px auto; }
        .filter-submit {font-weight: 600; color: #fff; border-color: var(--point-color01); background: var(--point-color01);}
    }
    /*세부 내용*/
    .filter-option-list {
        display: flex; flex-direction: column; gap: 4px; padding: 16px 20px;
        .cate-option{font-size: 12px; font-weight: bold; color: var(--basic-color01); line-height: 34px; letter-spacing: -2%;}
        li:has(.filter-option) + li:has(.cate-option){margin-top: 8px;}
        .filter-option { display: flex; align-items: center; gap: 6px; width: 100%; line-height: 36px;}
        .filter-option::after { content: ""; flex: 0 0 auto; width: 16px; aspect-ratio: 1; background: url('/assets/site/img/common/ico-check04.svg') no-repeat right center; opacity: 0; }
        .filter-option.is-selected { color: var(--point-color01); font-weight: 700; }
        .filter-option.is-selected::after { opacity: 1; }
    }
    .filter-range {
        display: flex; flex-direction: column; gap: 4px; padding: 10px;
        .filter-range-field { position: relative; display: flex; align-items: center; gap: 10px; }
        .filter-range-label { flex: 0 0 24px; font-weight: 600; }
        .filter-range-tilde { text-align: center;}
        .filter-unit {position: absolute; right: 12px;}
        .filter-input { flex: 1; min-width: 0; height: 36px; padding: 0 32px 0 10px; font-size: 14px; border-radius: 18px;}
        .filter-input::placeholder { color: #bdbdbd; }
        .filter-input:focus { outline: none; border-color: var(--point-color01); }
    }
    + .board-container {margin-top: 80px;}
    @media (width <= 1280px) {
        .filter-footer .filter-footer-btn{width: 140px; height: 42px; font-size: 15px;}
    }
    @media (width <= 1200px) {
        .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .filter-col {
            &:not(:nth-child(6n)) { border-right: 0; }
            &:not(:nth-child(3n)) { border-right: 1px solid var(--border-color01); }
        }
        .filter-footer {
            padding: 20px;
            .filter-footer-btn{width: 126px; height: 40px;}
        }
    }
    @media (width <= 1024px) {
        .filter-footer {
            flex-direction: column;
            .filter-footer-actions{align-self: flex-end;}
        }
        + .board-container {margin-top: 60px;}
    }
    @media (width <= 860px) {
        .filter-grid { grid-template-columns: 1fr; }
        .filter-col {
            border-right: 0 !important;
            &:first-child .col-title{ border-top: 0; }
        }
        .filter-footer {
            padding: 20px 12px;
            .filter-tag-text{font-size: 13px;}
            .filter-footer-btn{width: 118px; height: 38px; font-size: 14px;}
        }
        .filter-option-list{gap: 0;}
    }
    @media (width <= 640px) {
        .filter-footer {
            gap: 30px;
            .filter-tag-list{justify-content: center;}
            .filter-tag{height: 30px; padding: 0 4px 0 8px}
            .filter-footer-actions{align-self: center;}
        }
        + .board-container {margin-top: 40px;}
    }
}

.m-search-filter {
    display: none; margin: 0 calc(var(--main-gap) * -1 ); overflow: hidden;
     padding-right: var(--main-gap); border-bottom: 1px solid var(--border-color01);
    .filter-bar {display: flex; justify-content: space-between; align-items: center;}
    .filter-grid{display: flex; gap: 8px; padding: 10px 10px 10px var(--main-gap); overflow-x: auto;}
    .filter-toggle{
        position: relative;
        height: 36px; padding: 0 28px 0 11px;
        border: 1px solid var(--border-color01); border-radius: 4px;
        font-size: 14px; font-weight: 500; color: var(--bb-color); text-align: left;
        &::after{content: ""; position: absolute; top: 50%; right: 10px; translate: 0 -50%; width: 8px; height: 6px; background: url('/assets/site/img/common/arr-mfilter.svg') no-repeat 0 0 / 100% auto; transition: .2s ease-out;}
        &.is-active::after{rotate: 180deg}
    }
    .filter-actions {
        display: flex; gap: 10px;
        .filter-all{width: 36px; aspect-ratio: 1; font-size: 0; border-color: #f4f5f9; background: #f4f5f9 url('/assets/site/img/common/ico-filter.svg') no-repeat center;}
    }
}
.m-filter-sheet{
    display: none;
    .m-filter-dim{position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: .25s ease;}
    .m-filter-panel {position: fixed; left: 0; bottom: 0; z-index: 301; width: 100%; max-height: 75dvh; background: #fff; border-radius: 16px 16px 0 0; translate: 0 100%; transition: translate .3s ease;}
    .m-filter-head{display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 var(--main-gap); border-bottom: 1px solid var(--border-color01);}
    .m-filter-title{font-size: 17px; font-weight: 600;}
    .m-filter-close{position: relative; width: 32px; height: 32px; font-size: 0;}
    .m-filter-close::before,.m-filter-close::after{content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 1px; background: var(--bb-color);}
    .m-filter-close::before{rotate: 45deg;}
    .m-filter-close::after{rotate: -45deg;}
    .m-filter-content {
        max-height: calc(75dvh - 126px); padding: 20px var(--main-gap); overflow-y: auto;
        .filter-option-list{padding: 0; display: grid; grid-template-columns: repeat(2, 1fr);}
        .filter-range{padding: 0; flex-direction: row; justify-content: center; align-items: center; gap: 8px;}
    }
    .filter-footer {
        display: flex; flex-direction: row; justify-content: center; gap: 8px;
        padding: 10px var(--main-gap); border-top: 1px solid var(--border-color01);
        background: #fff;
        .filter-footer-btn{font-size: 15px;}

    }
    &.is-open{
        .m-filter-dim{opacity: 1; visibility: visible;}
        .m-filter-panel{translate: 0 0;}
    }
}
.m-filter-all{
    display: none;
    .m-filter-all-dim{position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: .25s ease;}
    .m-filter-all-panel{position: fixed; top: 0; left: 0; z-index: 301; width: 100%; height: 100dvh; background: #fff; translate: -100% 0; transition: translate .3s ease;}
    .m-filter-all-head{display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 var(--main-gap); border-bottom: 1px solid var(--border-color01);}
    .m-filter-all-title{font-size: 17px; font-weight: 600;}
    .m-filter-all-close{position: relative; width: 32px; height: 32px; font-size: 0;}
    .m-filter-all-close::before,.m-filter-all-close::after{content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 1px; background: var(--bb-color);}
    .m-filter-all-close::before{rotate: 45deg;}
    .m-filter-all-close::after{rotate: -45deg;}
    .m-filter-all-content{height: calc(100dvh - 126px); padding: 0; overflow-y: auto;}
    .filter-footer{display: flex; flex-direction: row; justify-content: center; gap: 8px; padding: 10px var(--main-gap); border-top: 1px solid var(--border-color01); background: #fff;}

    &.is-open{
        .m-filter-all-dim{opacity: 1; visibility: visible;}
        .m-filter-all-panel{translate: 0 0;}
    }
}
.pg-match {
    @media (width <= 860px) {
        &.sub_container{padding: 0 0 60px;}
        .pg-title{display: none}
        .search-filter{display: none;}
        .m-search-filter{display: block;}
        .m-filter-sheet{display: block;}
        .m-filter-all{display: block;}
    }
}

/* ==========================================================================
   DESIGN
   ========================================================================== */
/*이용권 안내*/
.pass-list {
    --inner-gap: 40px;
    display: flex; justify-content: center; gap: 26px;
    .pass-item{position: relative; flex: 0 1 312px; min-width: 0; border-radius: var(--radius02); background: #fff6f6; transition: border-color .2s;}
    .pass-item::before,
    .pass-item::after{content: ""; position: absolute; inset: 0; margin: -1px; border-radius: var(--radius02); pointer-events: none;}
    .pass-item::before{border: 1px solid var(--border-color01);}
    .pass-item::after{border: 2px solid transparent; transition: .2s ease-out;}
    .pass-item:hover::after{border-color: var(--point-color01);}
    .pass-head{padding: 37px var(--inner-gap) 34px;}
    .pass-name{font-size: 26px; font-weight: 600; line-height: 1; margin-bottom: 17px; }
    .pass-price{font-size: 32px; font-weight: 800; line-height: 1;}
    .pass-price strong{font-weight: 800;}
    .pass-summary{font-size: 18px; font-weight: 400; line-height: 1.45; margin-top: 26px;}
    .pass-btns{display: flex; flex-direction: column; gap: 7px; margin-top: 23px;}
    .pass-btns button{height: 45px; font-size: 16px;}
    .pass-body{padding: 34px var(--inner-gap) 30px; background-color: #fff;}
    .pass-info-list{display: flex; flex-direction: column; gap: 34px;}
    .pass-info-title{display: block; font-size: 16px; font-weight: 700; line-height: 1; margin-bottom: 13px; }
    .pass-info-text{display: flex; gap: 12px; font-size: 18px; line-height: 24px;}
    .icon-check{position: relative; display: block; flex: 0 0 20px; width: 20px; aspect-ratio: 1;}
    .icon-check::before{content: ""; position: absolute; left: 7px; top: 3px; width: 9px; height: 14px; border-right: 3px solid #e60000; border-bottom: 3px solid #e60000; border-radius: 2px; transform: rotate(45deg);}

    @media (width <= 860px) {
        --inner-gap: 30px;
        .pass-price{font-size: 30px;}
        .pass-summary{font-size: 17px; margin-top: 24px;}
        .pass-info-text{font-size: 17px;}
    }
    @media (width <= 640px) {
        --inner-gap: 20px;
        flex-wrap: wrap; gap: 40px;
        .pass-item{flex: 0 0 100%;}
        .pass-head{padding: 27px var(--inner-gap);}
        .pass-name{font-size: 23px; margin-bottom: 10px; }
        .pass-price{font-size: 26px;}
        .pass-summary{font-size: 16px; margin-top: 18px;}
        .pass-btns{flex-direction: row; gap: 8px; margin-top: 18px;}
        .pass-btns button{height: 40px; font-size: 15px;}

        .pass-body{padding: 27px var(--inner-gap);}

        .pass-info-list{gap: 28px;}
        .pass-info-title{margin-bottom: 12px; }
        .pass-info-text{gap: 10px; font-size: 16px;}

        .icon-check::before{left: 7px; top: 3px; width: 9px; height: 14px; border-right: 3px solid #e60000; border-bottom: 3px solid #e60000; border-radius: 0; transform: rotate(45deg);}
    }

}