@charset "UTF-8";
:root {
    --top-offset: 55px;        /* 헤더+필터 높이 */
    --vh: 1vh;                /* 모바일 주소창 대응용 */
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.wrap {
    min-height: 647px;
    margin-bottom: 100px;
}

.sub_wrap {
    min-height: 647px;
    padding-bottom: 50px;
}


/* Font Weight */
.fw_100 {
    font-weight: 100;
}

.fw_200 {
    font-weight: 200;
}

.fw_300 {
    font-weight: 300;
}

.fw_400 {
    font-weight: 400;
}

.fw_500 {
    font-weight: 500;
}

.fw_600 {
    font-weight: 600;
}

.fw_700 {
    font-weight: 700;
}

.fw_800 {
    font-weight: 800;
}

.fw_900 {
    font-weight: 900;
}

.mw-50 { max-width: 50px !important; }
.mw-100 { max-width: 100px !important; }
.mw-150 { max-width: 150px !important; }
.mw-200 { max-width: 200px !important; }
.mw-250 { max-width: 250px !important; }
.mw-300 { max-width: 300px !important; }
.mw-350 { max-width: 350px !important; }
.mw-400 { max-width: 400px !important; }
.mw-450 { max-width: 450px !important; }
.mw-500 { max-width: 500px !important; }


/*no drag*/
.no_drag {
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}


/*
 * 로그인/회원가입
 */

.auth-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.auth-top {
    flex: 1;              /* 남는 공간 차지 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수직 가운데 정렬 */
}

.auth-sns-btns {
    padding-bottom:55px;
}
.auth-sns-btns ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
}

.auth-sns-btns ul li {
}

.auth-sns-btns a.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50rem;
    text-transform:capitalize;
    padding:10px;
}

.auth-sns-btns a.btn.border-text-naver {
    color: #000 !important;
    background-color: #00C300 !important;
}

.auth-sns-btns a.btn.border-text-kakao {
    color: #000 !important;
    background-color: #FEE500 !important;
}

.auth-sns-btns a.btn.border-text-apple {
    color: #fff !important;
    background-color: #000 !important;
}

.auth-sns-btns a.btn.border-text-google {
    color: #000 !important;
    background-color: #FFF !important;
    border-color: #000 !important;
}

.auth-sns-btns img.auth-btns-icon {
    width: 15px;
    height: 15px;
}

@media (min-width: 575.98px) {
    .auth-sns-btns a.btn {
        /*gap: 10px;*/
    }
}


.auth-logo {
    text-align: center;
    max-width:150px;
    margin:0 auto 2rem;
}
.auth-logo a {
    display: block;
}

.seller-compl-logo {
    text-align: center;
    max-width:80px;
    margin:0 auto 2rem;
}


.login_cont {
    width:100%;
}

.join_cont {
    padding: 0 10px;
}


.mandatory {
    border-bottom: 1px solid #333333;
}

.mandatory p {
    color: #333;
    font-weight: bold;
    font-size: 1.1rem
}

/* Form */


.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}


.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: none;
}

.successText {
    color: #756EF0;
}

.errText {
    color: #F6163C;
}

.login_cont input,
.login_cont select,
.login_cont textarea,
.join_cont input,
.join_cont select,
.join_cont textarea {
    font-size: 14px !important;
}

.ip_wr {
    margin-bottom: 10px;
}

.input-group {
    margin-bottom: 10px;
}

.ip_tit {
    margin-bottom: 2px;
    font-weight: 400;
}

.ip_tit h5 {
    font-size: 0.8rem;
    color: #333;
}

.ip_wr .form-control {
    border-radius: 6px !important;
    border: 1px solid #e1e1e1;
}

.ip_wr .form-select {
    border-radius: 6px !important;
    border: 1px solid #e1e1e1;
}

.input-group:not(.has-validation) > .form-control:not(:last-child) {
    margin-right: 10px;
    resize: none;
}

.counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    margin-bottom: 8px !important;
}

.account-num {
    display: flex;
    gap: 5px;
    align-items: center;
}

.radios label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radios input {
    display: none;
}

.radios input:checked + .ic_box {
    border: 2px solid var(--bs-primary);
    background-color: #fff;
}

.radios input:checked + .ic_box:after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--bs-primary);
    border-radius: 50%;
}

.radios .ic_box {
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #fff;
    color: var(--input_placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    border-radius: 20px;
}

.checks label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 5px;
    margin: 0;
}

.checks input {
    display: none;
}

.checks .ic_box {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    flex-shrink: 0;
    background-image: url(../../assets/images/design/check01_off.png);
}

.checks input:checked + .ic_box {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background-image: url(../../assets/images/design/check01_on.png);
    background-color: var(--bs-primary);
}
.checks.flex{display: flex; justify-content: space-between; align-items: center;}
.checks.flex button{font-size: 14px; border: 0;  background-color: #fff;  color: #707070;  font-weight: 300;    box-shadow: none;}


.checks .ic_chk_all_box {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 20px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ccc;
    color: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    flex-shrink: 0;
    background-image: url(../../assets/images/design/check01_off.png);
}

.checks input:checked + .ic_chk_all_box {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background-image: url(../../assets/images/design/check01_on.png);
    background-color: var(--bs-primary);
}


.checks .ic_chk_box {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 20px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid transparent;
    color: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    flex-shrink: 0;
    background-image: url(../../assets/images/design/check01_off.png);
}

.checks input:checked + .ic_chk_box {
    background-image: url(../../assets/images/design/check01_on_new.png);
}

input ~ .chk_p {
    font-weight: 300;
    font-size: 14px;
}

.ico_check_circle {
    width:50px;
    height:50px;
    padding:10px;
    border-radius: 50%;
    display: flex;justify-content: center;align-items: center;
    margin:0 auto;
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.ico_check_circle img {max-width: 100%}

.image_del {
    text-align: center;
    color: #fff;
    position: absolute;
    display: none;
    right: 5px;
    top: 5px;
    padding: 5px;
}


.image_upload_wrap {
    display: inline-block;
    position: relative;
}
.upload_sr_box {
    width: 205px;
    height: 205px;
    margin:0 auto;
    max-width: 205px;
    max-height: 205px;
    overflow: hidden;
    cursor: pointer;
    background: #F5F5F5;
    border-radius: 10px;
    position: relative;
}

.upload_sr_box::before {
    content: "\F220";
    font-family: "bootstrap-icons";
    font-size: 3rem;
    color: #B3B3B3;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 정중앙 */
}



.image_upload {
    display: inline-block;
    position: relative;
    margin-right: 1.0rem;
}

.upload_box {
    width: 105px;
    height: 105px;
    max-width: 105px;
    max-height: 105px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    cursor: pointer;
    background: url(../../assets/images/design/btn_add_img.png) no-repeat center top 50% / 40px;
    border-radius: 10px;
    position: relative;
}

.upload_box label {
    display: inline-block;
    margin-bottom: 0;
}

.rect {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.rect:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.rect img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image_upload.on .upload_del {
    display: flex;
}

.upload_del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: transparent;
    padding: 0 !important;
    display: none;
}


.terms-body * {font-size:12px;}

/* _offcanvas */
.oc-con {
    max-height: calc(100vh - 200px); overflow-x: hidden; overflow-y: auto;scrollbar-width: thin;
}

.oc-body {
    padding: 10px;background-color: #f5f5f5;border-radius: 6px;
}



.mySwiper .sld_pc {
}
.mySwiper .sld_mb {
    display: none;
}

@media (max-width: 575.98px) {
    .mySwiper .sld_pc {
        display: none;
    }

    .mySwiper .sld_mb {
        display: block;
    }
}



.tab-category-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}


.tab-category-container .tab {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    scrollbar-width: none;
    border-bottom: 0 none;
}

.tab-category-container .tab::-webkit-scrollbar {
    display: none;
}


.tab-category-container .tab .tab__item {
    flex: 0 0 auto;
    cursor: pointer;
}

.tab-category-container .tab .tab__item a {
    display: flex;
    align-items: center;
}

.tab-category-container .tab .tab__item a > img {
    height:25px;
}


.tab-category-container .tab .tab__item a p {
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 400;
}

.tab-category-container .tab .tab__item.active {
    border-bottom: 1px solid #C80000;
}

.tab-category-container .tab .tab__item.active a p {
    color: #000;
}

.tab__content-wrapper .tab__content {
    border: 0 none;
}

.map_category {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    z-index: 999;
}

.map-category-container {
    position: relative;
    overflow: hidden;
    margin: 0 10px;
}


.map-category-container .tab {
    display: flex;
    flex-wrap:nowrap;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    scrollbar-width: none;
    border-bottom: 0 none;
}

.map-category-container .tab::-webkit-scrollbar {
    display: none;
}


.map-category-container .tab .tab__item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 5px 20px;
    border: 1px solid #000;
    border-radius: 20px;
    background-color: #fff;
    cursor: pointer;
}

.map-category-container .tab .tab__item a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.map-category-container .tab .tab__item a > img {
    height: 25px;
}

.map-category-container .tab .tab__item a p {
    font-size: 12px;
    font-weight: 400;
}

.map-category-container .tab .tab__item.active {
    border: 1px solid #fd3939;
}

.map-category-container .tab .tab__item.active a p {
    color: #fd3939;
}

.map-scroll-btn {
    position: absolute;
    top: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}


.map-category-container:hover .map-scroll-btn {
    display: block;
}


.map-scroll-btn.left {
    left: 10px;
}

.map-scroll-btn.right {
    right: 10px;
}



.map_wrap {
    position: relative;
    width: 100%;
    background-color: #eee;
    height: calc(var(--vh) * 100 - var(--top-offset));
    overflow: hidden;
}
.map_wrap .hTrack {
    position: absolute;
    right: 10px;
    top: 55px;
    z-index: 10;
}
.map_wrap .hTrack .track-btn {
    width:40px;
    height:40px;
    padding: 0;
    background: #fff;
    color:#333;
    font-size: 1.2rem;
    border:0 none;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}




#map {
    -webkit-overflow-scrolling: auto !important;
    -webkit-user-select: none;
    touch-action: manipulation !important;
}

.store_map_wrap {
    position: relative;
    width: 100%;
    height: 150px;
}

@media screen and (min-width: 768px) {
    .map_wrap {

    }
}


.order_map_wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 450px);
    background-color: #fff;
}

@media screen and (min-width: 768px) {
    .order_map_wrap {
        height: calc(100vh - 550px);
    }
}



/* 지도-목록 */
.offcanvas-slide {
    position: absolute;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    background: white;
    z-index: 1000;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    will-change: top;
    touch-action: auto;
    overflow: hidden;
    transition: top 0.3s ease;
}

.offcanvas-slide.is-animating {
    transition: transform .18s ease-in-out;
}


.offcanvas-slide.dragging {
    transition: none !important;
    opacity: 0.95;
}

/* 데이터 없음 메시지 */
.no-data-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--gray2);
}

.no-data-message .icon {
    font-size: 40px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.no-data-message .text {
    font-size: 1.1rem;
    font-weight: 500;
}

.no-data-message .sub-text {
    font-size: 1.0rem;
    margin-top: 8px;
    opacity: 0.7;
}


.touch_bar {
    height: 30px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
}

.touch-sc-btn {
    background-color: #d9d9d9;
    width: 85px;
    height: 4px;
    display: block;
    border: 0 none;
    border-radius: 10px;
}

.scroll-area {
    overflow-y: auto;
    padding: 0 10px;
    /* JS가 인라인 max-height 넣을 거라 폴백만 남겨둠 */
    max-height: calc(100vh - 214px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* 엣지 스크롤시 시트만 움직이게 */
    touch-action: pan-y;
}




.user-marker {
    display: none;
    width: 20px;
    height: 20px;
    background: var(--bs-primary);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    position: absolute;
    z-index: 999;
}


.tooltip-bubble {
    position: absolute;
    width:36px;
    height:50px;
    background-image: url(../images/marker/sample.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}


.tooltip-group {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--bs-primary);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    z-index: 999;
}

.tooltip-group .clu-count {
    color:#fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}





.fancybox__container {
    z-index: 9999 !important;
}

.req-photo {
    width:80px; height:80px; object-fit:cover; border-radius:8px; border:1px solid #ddd;
}


.sch_location_wrap .frm_info {
    text-align: center;
    padding: 6px 5px;
    font-size: 13px;
    font-weight: 300;
    color: #111;
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    top: 30px;
    margin: 0 auto;
    z-index: 10;
    border-radius: 20px;
    background-color: #d3e8ff;
    box-shadow: 0px 0px 5px #00000030;
}

.icon_marker {
    position: absolute;
    top: calc(50% - 0px);
    left:  calc(50% - 11px);
    transform: translate(-50%, -50%);
    width:10px;
    z-index: 9;
}

.map_gps{
    color: #ff8282;
}


.custom-marker {
    position: relative;
    left: -10px;
    top: 0px;
}

.marker-content {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%; /* 원형 */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--bs-primary); /* 테두리 색상 (주황) */
}

/* 원 안의 이미지 스타일 */
.marker-content img {
    width: 43px;
    height: 43px;
    object-fit: cover; /* 가로로 긴 이미지도 원형 안에 꽉 채우기 */
    border-radius: 50%;
}


.marker-content::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* 삼각형 모양 정의 */
    width: 30px;
    height: 13px;
    background-color: var(--bs-primary);
    z-index: -1;
}


.infowindow {
    position: absolute;
    top: -38px;
    left: 50%;
    margin-left: -90px;
    display: flex;
    flex-direction: column;
    width: 180px;
    height: auto;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}
.infowindow .info-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.infowindow .iw-body {
    padding: 5px 0;
    flex-grow: 1; /* 남은 공간을 모두 차지 */
    display: flex; /* 내부 콘텐츠를 정렬하기 위해 flexbox 사용 */
    flex-direction: column; /* 자식 요소를 세로 정렬 */
    justify-content: space-between; /* 공간을 고르게 배분 */
    align-items: flex-start; /* 기본 정렬 (필요시 변경 가능) */
}
.infowindow p {
    margin: 0;
    padding: 0;
    color: #555;
    white-space: normal;
    font-size:1.0rem;
}
.infowindow small {
    font-size:0.875rem;
}
.infowindow .close-btn {
    display: inline-block;
    width: auto;
    padding: 5px;
    font-size: 12px;
    color: white;
    background-color: #eb5a5a;
    border: none;
    border-radius: 4px;
}
/*.infowindow::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: -10px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    clip-path: polygon(0% 0%, 100% 0%, 50% 100%); !* 삼각형 모양 정의 *!*/
/*    width: 12px;*/
/*    height: 10px;*/
/*    background-color: white; !* 삼각형 색상 *!*/
/*}*/
/*.infowindow::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: -10px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    clip-path: polygon(0% 0%, 100% 0%, 50% 100%); !* 삼각형 모양 정의 *!*/
/*    width: 12px;*/
/*    height: 10px;*/
/*    background-color: white; !* 삼각형 색상 *!*/
/*}*/


.offcanvas-custom {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 576px;
    height: 75vh; /* 최대 높이 (3/4 화면) */
    background: white;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 15px 15px 0 0;
    transform: translate(-50%, 50%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
}

.offcanvas-cover {
    position: relative;
    margin: 0 20px 20px 20px;
}

/* 버튼 위치 및 스타일 */
.offcanvas-header {
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
}
.offcanvas-header .drag-btn {
    display: flex;
    padding: 0;
    height: 10px;
    justify-content: center;
    cursor: grab;
    background: #a1a1a1;
    border-radius: 10px;
    width: 100px;
    margin: 0 auto;
    position: relative;
    z-index: 11;
}

.offcanvas-header i {
    font-size: 24px;
}

/* 버튼 클릭 시 올라가는 상태 */
.offcanvas-custom.open {
    transform: translate(-50%, 0%);
}

.offcanvas-custom .offcanvas-body {
    max-height: 50vh;
    overflow-y: auto;
    padding: 10px;
}

.offcanvas-custom.open .offcanvas-body {
    max-height: 60vh;
}

.offcanvas-custom.dragging {
    transition: none !important;
}

/* 부드러운 스크롤바 스타일 (선택사항) */
.offcanvas-body::-webkit-scrollbar {
    width: 6px; /* 스크롤바 너비 */
}

.offcanvas-body::-webkit-scrollbar-thumb {
    background-color: #ccc; /* 스크롤바 색상 */
    border-radius: 6px;
}

.offcanvas-body::-webkit-scrollbar-track {
    background: #f1f1f1; /* 스크롤바 트랙 배경 */
}


.offcanvas.offcanvas-bottom {
    max-width: 576px;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 100%);
    border-radius: 1.3rem 1.3rem 0 0;
}

.offcanvas.showing, .offcanvas.show:not(.hiding) {
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}


.calendar-container {
    text-align: center;
    max-width: 400px;
    margin: auto;
}

.calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    margin-bottom: 10px;
}

.calendar-table .ct-ym {
    display: flex;
    align-items: center;
}
.calendar-table .ct-ym .dropdown-btn {
    margin-left: 10px;
    padding: 5px;
}
.calendar-table table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.calendar-table th {
    text-align: center;
}
.calendar-table th,
.calendar-table td {
    width: 14.28%;
    border: 0 none;
    padding: 3px;
}
.calendar-table .sat {
    color: #57a4ff !important;
}
.calendar-table .sun {
    color: #eb5a5a !important;
}
.calendar-table .tc-date {

    display: flex;
    width: 100%;
    min-height: 50px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    padding: 5px;
    z-index: 1;
}

.calendar-table .tc-date.today {
    background-color: #ffb1ad;
}

.calendar-table .tc-date.selected {
    background-color: #d42d25;
}



.calendar-table .tc-date button.tc-day {
    border:0 none;
}

.calendar-table .tc-date button.today-circle {
    border-radius: 50%;
    background-color: #ffb1ad;
}


.calendar-table .tc-date.prevday button.tc-day {
    /*border:0 none;*/
}


.calendar-table .tc-date .date-num {
    color: #31394f;
}

.calendar-table .tc-date.prevday .date-num {
    color: #e3e3e3 !important;
}

.calendar-table .tc-date.today .date-num{
    color: #31394f;
}

.calendar-table .tc-date.selected .date-num {
    color: #fff !important;
}

.calendar-table .tc-date .date-text {
    color: #31394f;
    font-weight: bold;
    font-size: 0.6rem;
    line-height: 1;
}

.step-btn {
    position: relative;
    display:grid;
    margin:30px auto;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
    font-size:1.0rem !important;
}
.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title img {
    height: 20px;
}

/* 리뷰별점 */
.star-box .star {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(../../assets/images/ico/ico_empty_star_50.png) no-repeat center/contain;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.star-box .star.on {
    background: url(../../assets/images/ico/ico_full_star_50.png) no-repeat center/contain;
}

.star-box.small .star{
    width: 20px;
    height: 20px;
}


.no-search{white-space: pre-line; text-align: center; padding: 80px 0;}

.payment_agreement{padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
}
.payment_agreement button{font-size: 15px;  font-weight: 300;  background-color: #fff;  border: 0;  color: #707070;}
.payment_agreement .checks label{align-items: flex-start; line-height: normal;}


.sns_share li{width:5.0rem;overflow:hidden;}
.sns_share li img {max-width: 100%;display: block;height: auto;}


.notice-con{border-top:1px solid #333;}
.notice-con > div{line-height: normal; padding:30px 0;}
.notice-con article{font-size: 15px; font-weight: 300; padding:30px 0;  border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;}
.notice-con article img {max-width: 100%;display: block;height: auto}
.wh-pre { white-space: pre-line;}
.one-line {display:inline-block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.modal-dialog {
    width: 300px;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
}


#customer_req_modal {
    z-index: 1055; /* 기본값에서 조금 높임 */
}

/* 2번째 모달 (수락/거절 모달) */
#accept-modal,
#reject-modal {
    z-index: 1080; /* 요청모달보다 높게 설정 */
}


#customer_req_modal .modal-dialog {
    width: auto;
    height: 100vh; /* 구형 브라우저 호환성 (fallback) */
    height: 100dvh; /* 최신 브라우저 적용 (우선 적용됨) */
    min-height: 100vh;
    min-height: 100dvh;
}

#accept-modal .modal-dialog,
#reject-modal .modal-dialog {
    width: auto;
    align-items: end;
}

#accept-modal .modal-content {
    height: calc(100vh - 70px);
    border-radius: var(--bs-modal-border-radius);
}

#reject-modal .modal-content {
    border-radius: var(--bs-modal-border-radius);
}

#accept-modal.modal.fade .modal-dialog,
#reject-modal.modal.fade .modal-dialog{
    transform: translateY(50px);
    transition: transform 0.3s ease-out;
}

#accept-modal.modal.fade.show .modal-dialog,
#reject-modal.modal.fade.show .modal-dialog {
    transform: translateY(0);
}


.modal-backdrop.second-backdrop {
    z-index: 1070 !important; /* 요청 모달과 수락/거절 모달 사이 정확히 배치 */
    opacity: 0.5 !important;
    display: block !important;
}


@media (min-width: 576px) {
    .modal-dialog {
        width: auto;
    }
}


/*.modal.show + .modal.show {*/
/*    z-index: 1060; !* 두 번째 모달을 더 높게 *!*/
/*}*/

/*.modal-backdrop.show + .modal-backdrop.show {*/
/*    z-index: 1056; !* 두 번째 모달의 배경을 조정 *!*/
/*}*/

.modal-backdrop {
    max-width: 576px;
    left: 50%;
    transform: translateX(-50%);
}



.swiper-pagination-popup {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10
}



#preloader-dev {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99998;
    transition: all 200ms ease;
}

#preloader-dev .spinner-border {
    z-index: 99999;
    opacity: 1;
}

#preloader-dev.hide {
    opacity: 0;
    pointer-events: none;
    transition: all 150ms ease !important;
}

#preloader-dev.hidden {
    display: none;
}


/*
 * 메인검색창
 */

.search_placeholder {
    position: absolute;
    top: 50%;
    left: 23px;
    transform: translateY(-50%);
    width: calc(100% - 20px);
    color: #999;
    font-size: clamp(16px, 3vw, 18px);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40px;
}

.swiper-container {
    width: 100%;
    height: 40px;
    overflow: hidden;
}

.refresh-count-down {
    position: fixed;
    bottom: 70px;
    width: 42px;
    height: 42px;
    right: 10px;
    padding: 0;
    z-index: 999;
}


.qa-register-btn {
    position: fixed;
    bottom: 84px;
    width: 42px;
    height: 42px;
    right: 10px;
    padding: 0;
    z-index: 999;
}


.cd-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ui-timepicker-standard {
    z-index: 10 !important;
}

.cke_notifications_area {
    display: none !important;
}

.plus-input {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 140px;
    height: 140px;
    font-size: 24px;
    color: #c0c6d1;
    border: 1px dashed #ddd;
}
.plus-input i {
    line-height: 140px;
}
.plus-input img {
    object-fit: cover;
    width: 140px;
    height: 140px;
}
.plus-input-small {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100px;
    height: 100px;
    font-size: 24px;
    color: #c0c6d1;
    border: 1px dashed #ddd;
}
.plus-input-small i {
    line-height: 100px;
}
.plus-input-small img {
    object-fit: cover;
    width: 100px;
    height: 100px;
}
.preview-image-del {
    text-align: center;
    padding: 5px 10px;
    background: #000;
    opacity: 0.3;
    color: #fff;
    position: absolute;
    display: none;
}


.fixed-register-btn {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(246px);
    z-index: 1000;
}
.fixed-register-btn .btn {
    font-size: 2.0rem;
    line-height: 1;
}

@media (max-width: 576px) {
    .fixed-register-btn {
        left: auto;
        right: 16px;
        transform: none;
    }
}



.fixed-register-service-btn {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(168px);
    z-index: 1000;
}


@media (max-width: 576px) {
    .fixed-register-service-btn {
        left: auto;
        right: 16px;
        transform: none;
    }
}

.btn-extended {
    padding: 0.5rem 1rem;
    font-size: 1.0rem;
    border-radius: 0.5rem;
}



.address-tooltip-backdrop {
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: transparent; /* or rgba(0,0,0,0.1); */
    z-index: 1039; /* 부트스트랩 모달 기본이 1050 → 그보다 아래 */
}


.address-tooltip-box {
    position: absolute;
    top: 50px;
    left: 10px;
    background: #d42d25;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.address-tooltip-box::after {
    content: '';
    position: absolute;
    top: -16px; /* 화살표 위쪽에 배치 */
    left: 40px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #d42d25 transparent;
}

.cart-box {
    z-index: 100;
    padding:0 10px;
}

.cart-box .badge {
    top:8px;
    right:-17px;
}


.btn-no-effect:hover,
.btn-no-effect:active,
.btn-no-effect:focus {
    box-shadow: none !important;
    background-color: transparent !important;
    outline: none !important;
    color: inherit; !important;
}

.store-service-cart-btn {
    position: absolute;
    bottom: 24px;
    right: 5px;
    background-color: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1;
    outline: 0;
    border: 0 none;
}
.store-service-cart-btn i {
    font-size: 1.0rem;
    color:#333 !important;
}

.cnt-cart.hidden {
    display: none !important;
}



.cart-row-delete-btn {
    position: absolute;
    bottom: 25px;
    right: 5px;
    background-color: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1;
    outline: 0;
    border: 0 none;
}
.cart-row-delete-btn i {
    font-size: 0.8rem;
    color:#333 !important;
}

.cart-store-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-store-avatar .thumb {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    overflow: hidden;
    border: 0 none;
    flex-shrink: 0;
}

.cart-store-avatar .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-row-box {
    cursor: default;
    text-decoration: none;
    color: inherit;
}




#modal_full2 .modal-content {
    border-radius: 20px;
}

#modal_full2 .modal-dialog {
    width:85%;
}

/* 기본 라벨 버튼 스타일 */
.order-btn-group label {
    font-weight: 600;
    padding: 0.6rem 0;
    border-width: 1px; /* 버튼 테두리 두께 강화 */
    transition: all 0.2s ease-in-out;
    background-color: #fff;
}

/* hover 시 */
.order-btn-group label:hover {
    background-color: #f8f9fa;
    border-color: #d42d25;
    color: #d42d25;
}

/* 선택(active) 시 */
.order-btn-group input:checked + label {
    background-color: #fff !important;
    border-color: transparent !important;
    color: #d42d25 !important;
}

/* 아이콘 + 텍스트 정렬용 */
.order-btn-group label i {
    /*margin-right: 6px;*/
    /*font-size: 1rem;*/
}


#ct_third_wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
}

/* 기본 버튼 스타일 */
#ct_third_wrap label.btn {
    border-width: 0;
    color: var(--bs-dark);
    background: #fff;
    padding: .75rem .9rem .75rem 2.2rem;
    font-weight: 600;
    border-radius: 999px;
    display: flex;
    align-items: center;
    position: relative;
    transition: all .18s ease-in-out;
}

#ct_third_wrap .btn-check + label::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    border: 1px solid var(--bs-dark);
    border-radius: 50%;
    background: #fff;
}

/* 체크 표시 */
#ct_third_wrap .btn-check:checked + label::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 48%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px; height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* 선택(active) 상태 */
#ct_third_wrap .btn-check:checked + label {
}

/* 선택(active) 시 원 채우기 */
#ct_third_wrap .btn-check:checked + label::before {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

#ct_third_wrap label.btn { line-height: 1.2; }


#ct_second_wrap {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none; /* Firefox */
}
#ct_second_wrap::-webkit-scrollbar { display: none; } /* Chrome, Safari */
#ct_second_wrap label.btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

.map-page-content {
    background: #fff;
    padding-top: 55px;
    position: relative;
}

.list-ul-wrap .list_con .list {
    position: relative;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}
.list-ul-wrap .list_con .list:first-child {
    padding-top: 0;
}
.list-ul-wrap .list_con .list a {
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}
.list-ul-wrap .list_con .list a .info {
    overflow-x: hidden;
}
.list-ul-wrap .list_con .list a .info .cate {
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 400;
    color: #fd3939;
}
.list-ul-wrap .list_con .list a .info .tit {
    margin-bottom: 10px;
    gap: 5px;
}
.list-ul-wrap .list_con .list a .info .tit p {
    word-break: break-all !important;
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 700;
}
.list-ul-wrap .list_con .list a .info .tit img {
    width: 15px;
}
.list-ul-wrap .list_con .list a .info .line {
    gap: 15px;
    overflow-x: scroll;
}
.list-ul-wrap .list_con .list a .info .line .rating {
    gap: 5px;
    flex-shrink: 0;
    color: #000;
}
.list-ul-wrap .list_con .list a .info .line .rating .num {
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 700;
}
.list-ul-wrap .list_con .list a .info .line .rating .num::after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
    top: 9%;
    left: 0;
    background: url("../images/ico/ico_full_star_20x20.png") no-repeat center/cover;
}
.list-ul-wrap .list_con .list a .info .line .rating .num span {
    font-weight: 300;
}
.list-ul-wrap .list_con .list a .info .line .distance {
    position: relative;
    flex-shrink: 0;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 700;
    color: #fd3939;
}
.list-ul-wrap .list_con .list a .info .line .distance::before {
    content: "·";
    position: absolute;
    display: block;
    top: 0;
    left: -9px;
    color: #585858;
}
.list-ul-wrap .list_con .list a .info .line .major {
    position: relative;
    flex-shrink: 0;
    font-size: clamp(12px, 3vw, 14px);
}
.list-ul-wrap .list_con .list a .info .line .major::before {
    content: "·";
    position: absolute;
    display: block;
    top: 0;
    left: -9px;
}
.list-ul-wrap .list_con .list a .info .shop_txt {
    margin-bottom: 15px;
    word-break: break-all !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 300;
}
.list-ul-wrap .list_con .list a .info .badge_con ul {
    gap: 5px;
    padding-bottom: 1px;
    overflow-x: scroll;
}
.list-ul-wrap .list_con .list a .info .badge_con ul li {
    flex-shrink: 0;
}
.list-ul-wrap .list_con .list a .info .badge_con ul li .badge_sty {
    font-size: clamp(12px, 3vw, 14px);
}
.list-ul-wrap .list_con .list a .img_con {
    position: relative;
    width: 120px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 15px;
}
.list-ul-wrap .list_con .list a .img_con::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.list-ul-wrap .list_con .list a .img_con img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
}
.list-ul-wrap .list_con .list.disable .img_con::after {
    content: "예약불가";
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    border-radius: 16px;
    line-height: 50%;
    text-align: center;
    color: #fff;
}
@media (max-width: 480px) {
    .list-ul-wrap .list_con .list a .info .line .rating .num::after {
        width: 13px;
        height: 13px;
    }
    .list-ul-wrap .list_con .list a .img_con {
        width: 80px;
    }
    .list-ul-wrap .list_con .list a .img_con img {
        border-radius: 5px;
    }
    .list-ul-wrap .list_con .list a .img_con::after {
        border-radius: 5px;
        font-size: 12px;
    }
    .list-ul-wrap .list_con .list.disable a .img_con img {
        border-radius: 5px;
    }
    .list-ul-wrap .list_con .list.disable a .img_con::after {
        border-radius: 5px;
        font-size: 12px;
    }
}
#ct_second_wrap  {
    height:36px;
}
.filter-img-btn {
    border-radius: 50%;
}
.filter-img-btn:active, .filter-img-btn:hover {
    background-color: transparent !important;
}

.filter-img-btn img {
    width:18px;height:18px;
}


.offcanvas-bottom {
    background-color: #fff;
    --bs-offcanvas-height: auto;
    max-height: 90svh; /* 화면을 넘지 않도록 상한 ; iOS 안전뷰포트 */
}

/* 2) 내부 스크롤 제거 */
.offcanvas-body {
    overflow-y: visible; /* 또는 hidden */
}


.btn-ccr {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: #ffb0b0;
    --bs-btn-border-color: #ffb0b0;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: #ffb0b0;
    --bs-btn-hover-border-color: #ffb0b0;
    --bs-btn-focus-shadow-rgb: 215, 48, 48;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: #ffb0b0;
    --bs-btn-active-border-color: #ffb0b0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: #ffb0b0;
    --bs-btn-disabled-border-color: #ffb0b0;
}


.req-info {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.req-info .req-item {
    position: relative;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(165, 124, 124,0.1);
}
.req-info .req-item:last-child {
    border-bottom: 0 none;
}

.req-info .lbel {
    font-size: 0.8125rem;
    color: #a57c7c;
}

.req-info .rval {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.req-info .rval2 {
    display: flex;
    justify-content: start;
    align-items: center;
}
.req-info .req-name {
    font-size: 1rem;
}

.req-info .req-coupon-msg {
    font-size: 0.75rem; /* 12px 정도 */
    color: #a57c7c;
}

.req-info .req-service {
    font-size: 1rem;
}

.req-info .badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    border-radius: 0.25rem;
    background-color: #ff8080;
    color: #fff;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.req-info .req-item-name {
    font-size: 1rem;
}

.req-info .req-date {
    font-size: 1rem;
}

.req-info .price-total {
    font-size: 1rem;
}

.req-info .price-discount {
    font-size: 0.8125rem;
    color: #a57c7c;
}



/* 기본 숨김 */
.custom-modal {
    display: none;
    position: absolute;
    top:-50%; right:0;
    width:150px;
    z-index: 1000;
}

/* 모달 박스 */
.custom-modal-content {
    background:#fff;
    border-radius:5px;
    width:100%;
    padding:10px;
    box-shadow:0 0.5rem 1.2rem rgba(0,0,0,0.2);
}

/* 리스트 */
.service-list {
    list-style:none;
    padding:0;
    margin:0 0 5px;
    overflow:hidden;
}
.service-list li {
    position: relative;
    padding:0.325rem 0;
    border-bottom:1px solid #eee;
}
.service-list li div.sert-nm {
    position: relative;
    padding:0;
    font-size:0.875rem;

}
.service-list li div.sert-op {
    position: relative;
    padding:0 0 0 0.75rem;
    font-size:0.875rem;
    color:#6c757d;
}
.service-list li div.sert-op::before {
    content: '';
    position: absolute;
    top:50%;left:4px;
    transform: translate(0, -50%);
    width:3px;height:1px;
    border-radius: 50%;
    background-color: #333;
}
.service-list li:last-child { border-bottom:none; }

/* 닫기 버튼 */
.btn-close-block {
    display:block;
    width:100%;
    border:0;
    border-radius:5px;
    padding:5px;
    background:#ff8080;
    color:#fff;
    font-size:0.6875rem;
    cursor:pointer;
}

/* “더보기” 버튼 */
.badge-btn {
    display:inline-block;
    margin-left:0.4rem;
    padding:0.125rem 0.375rem;
    font-size:0.6875rem;
    line-height:1;
    border-radius:0.25rem;
    background:#e74c3c;
    color:#fff;
    border:0;
    cursor:pointer;
}


.page-recomm-wrapper {
    position: relative;
    overflow-x: hidden;
    transition: all 250ms ease;
    padding-top: calc(55px + (env(safe-area-inset-top)) * 0.8) !important;
    padding-bottom: calc(60px + (env(safe-area-inset-bottom)) * 1.1);
    height: 100vh;
    background-color: #feebeb;
}




.tit_bubble_con{
    display:flex;
    justify-content:center;
    padding:12px 0;
    background: #feebeb;
    margin-bottom: 30px;
}

.tit_bubble_wrap{
    position: relative;
    display: inline-block;
}

/* 말풍선 본체 */
.tit_bubble_wrap .bubble{
    position: relative;
    z-index: 2;
    display:inline-block;
    background: #F25757;
    color:#fff;
    padding:14px 20px;
    border-radius:12px;
    font-size:15px;
    line-height:1.5;
    text-align:center;
    box-shadow:0 2px 5px rgba(0,0,0,.1);
}

/* 꼬리: 말풍선색 원 */
.tit_bubble_wrap::before{
    content:"";
    position:absolute;
    bottom:-6px;      /* 말풍선 아래로 살짝 */
    left:18px;        /* 왼쪽 하단 위치 */
    width:18px;
    height:18px;
    background: #F25757;
    border-radius:50%;
    z-index:1;        /* 말풍선 아래 */
}

/* 꼬리: 배경색 원으로 덮어 초승달 모양 */
.tit_bubble_wrap::after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:26px;        /* 살짝 오른쪽으로 이동해 겹치기 */
    width:18px;
    height:18px;
    background: #feebeb; /* 배경색과 동일 */
    border-radius:50%;
    z-index:1;        /* before 위지만 말풍선 아래 */
}


.top_recomm {margin:0;padding: 5rem 0}

.top_recomm .recommSwiper {overflow: visible !important;padding:0 10px;}

.top_recomm .swiper-slide {
    width: 40%;
    border:1px solid #FF8D8D;
    background: #fff;
    position: relative;
    padding: 10px;
}


.top_recomm .swiper-slide .distance {
    position: absolute;
    top: -16px;
    right: -10px;
    background: #FF8D8D;
    z-index: 10;
    border-radius: 5px;
}

.top_recomm .swiper-slide .distance span {
    font-weight: bold;
    color:#fff;
    display: inline-block;
    padding:5px;
}


.top_recomm .swiper-slide .img_con {
    position: relative;
}

.top_recomm .swiper-slide .img_con::before {
    content: "";
    display: block;
    padding-bottom: 70%;
}

.top_recomm .swiper-slide .img_con img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    border: 1px solid #ececec;
}

.top_recomm .swiper-slide .txt_con {
    margin-top: 15px;
}

.top_recomm .swiper-slide .txt_con .txt01 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 700;
    color: #000;
}

.top_recomm .swiper-slide .txt_con .txt02 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: clamp(12px, 3vw, 13px);
    color: #000;
}


.top_recomm .swiper-slide .txt_con .scope {
    align-items: center;
}

.top_recomm .swiper-slide .txt_con .scope img {
    width: inherit;
}

.top_recomm .swiper-slide .txt_con .scope p {
    margin-left: 5px;
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 300;
}

.top_recomm .swiper-slide .txt_con .scope p b {
    font-weight: 700;
}

.top_recomm .swiper-slide .txt_con .shop_info {
    margin-bottom: 5px;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 300;
}


.top_recomm .swiper-slide .txt_con .badge_con {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.top_recomm .swiper-slide .txt_con .badge_con ul {
    display: inline-flex;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.top_recomm .swiper-slide .txt_con .badge_con::-webkit-scrollbar {
    height: 6px;
}

.top_recomm .swiper-slide .txt_con .badge_con::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* 스크롤바 전체 (트랙) */
.top_recomm .swiper-horizontal>.swiper-scrollbar,
.top_recomm .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: relative;
    height: 3px;          /* 높이 */
    border-radius: 3px;
    width:60%;
    margin: 30px auto 0;
}


.top_recomm .swiper-scrollbar-drag {
    border-radius: 3px;
    transition: background 0.3s;
}

.loading-map {
    display: none;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: rgba(255,255,255,0.95);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}


.coupon-img img {
    display: block;
    width: 100%;          /* 반응형 대응 */
    max-width: 880px;     /* 권장 최대 폭 */
    height: auto;         /* 비율 유지 */
    aspect-ratio: 880/400; /* 지원 브라우저에서 비율 유지 */
    object-fit: cover;    /* 크롭 방식 (빈 공간 없이 꽉 채움) */
    border-radius: 8px;   /* 살짝 라운드 (선택사항) */
}

.profile_bg_cover {
    position: relative;
    width: 100%;
    height: 200px;
    background: url("../assets/images/ico/ico_camera.png") no-repeat center center;
}

.profile_bg_cover .bg_upload {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #fff;
}

.srt_profile_img {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 125px;
    height: 125px;

}


.srt_profile_img .img_con {
    position: relative;
    width: 125px;
    height: 125px;
    overflow: hidden;
    border-radius: 15px;
}


.srt_profile_img .img_con img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}


.srt_profile_img .upload {
    position: absolute;
    bottom: -8px;
    right: -16px;
    width: 35px;
    height: 35px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #fff;
}

.my-menu-ico {
    display: flex !important;
    align-items: center;
    justify-content: start;
}

.my-menu-ico .ico-img {
    width:42px;
}

.my-menu-ico .txt {
    position: relative;
    padding-left: 10px;
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 500;
    color: #585858;
}



/*
파일 업로드
*/
.upload-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0px;
}

.upload-box {
    width: 105px;
    height: 105px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.upload-box.hidden {
    display: none;
}

.upload-box .plus {
    font-size: 24px;
    margin-bottom: 5px;
}

.upload-box .text {
    color: #333;
}

.upload-box .upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-box .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.preview-box {
    width: 105px;
    height: 105px;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
    cursor: move;
}

.preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-box a {
    display: block;
    width: 100%;
    height: 100%;
}

.remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.sortable-ghost {
    opacity: 0.5;
}

.filepond--root {
    display: none;
}

.shop_profile_box {
    position: relative;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}

.shop_profile_box:first-child {
    padding-top: 0;
}

.shop_profile_box .store-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.shop_profile_box .store-item .info {
    overflow-x: hidden;
}

.shop_profile_box .store-item .info .cate {
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 400;
    color: #fd3939;
}

.shop_profile_box .store-item .info .tit {
    margin-bottom: 10px;
    gap: 5px;
}

.shop_profile_box .store-item .info .tit p {
    word-break: break-all !important;
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 700;
}

.shop_profile_box .store-item .info .tit img {
    width: 15px;
}

.shop_profile_box .store-item .info .line {
    gap: 15px;
    overflow-x: scroll;
}

.shop_profile_box .store-item .info .line .rating {
    gap: 5px;
    flex-shrink: 0;
    color: #000;
}

.shop_profile_box .store-item .info .line .rating .num {
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 700;
}

.shop_profile_box .store-item .info .line .rating .num::after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
    top: 9%;
    left: 0;
    background: url("../../../assets/images/ico/ico_full_star_20x20.png") no-repeat center/cover;
}

.shop_profile_box .store-item .info .line .rating .num span {
    font-weight: 300;
}

.shop_profile_box .store-item .info .line .distance {
    position: relative;
    flex-shrink: 0;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 700;
    color: #fd3939;
}

.shop_profile_box .store-item .info .line .distance::before {
    content: "·";
    position: absolute;
    display: block;
    top: 0;
    left: -9px;
    color: #585858;
}

.shop_profile_box .store-item .info .line .major {
    position: relative;
    flex-shrink: 0;
    font-size: clamp(12px, 3vw, 14px);
}

.shop_profile_box .store-item .info .line .major::before {
    content: "·";
    position: absolute;
    display: block;
    top: 0;
    left: -9px;
}

.shop_profile_box .store-item .info .shop_txt {
    margin-bottom: 15px;
    word-break: break-all !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 300;
}

.shop_profile_box .store-item .info .badge_con ul {
    gap: 5px;
    padding-bottom: 1px;
    overflow-x: scroll;
}

.shop_profile_box .store-item .info .badge_con ul li {
    flex-shrink: 0;
}

.shop_profile_box .store-item .info .badge_con ul li .badge_sty {
    font-size: clamp(12px, 3vw, 14px);
}

.shop_profile_box .store-item .img_content {
    position: relative;
    width: 120px;
    flex-shrink: 0;
    border: 1px solid #eee;
    border-radius: 15px;
    margin-right: 10px;

}

.shop_profile_box .store-item .img_content::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}


.srt_preview_profile {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;

}


.srt_preview_profile .img_con {
    position: relative;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 15px;
}


.srt_preview_profile .img_con img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}


.srt_preview_profile .upload {
    position: absolute;
    bottom: -8px;
    right: -16px;
    width: 35px;
    height: 35px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #fff;
}

.crop-container {
    margin: 20px auto;
    max-width: 640px;
}

.crop-container img {
    max-width: 100%;
}

#cropWrap {
    position: relative;
    width: 100%;
    max-width: 576px;
    margin-top: 10px;
    height: 200px; /* 권장 높이 비슷하게 제한 */
    overflow: hidden;
}
#cropWrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 배경 cover 와 동일 */
    object-position: center;    /* background-position: center 와 동일 */
}

.crop_img_banner {
    position: relative;
    width:100%;
    height:200px;
}

.service-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: #f08883;
    color: #fff;
    padding: 5px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.service-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #f08883 transparent transparent transparent;
}


.fixed_bottom {
    position: fixed;
    left: 50%;
    bottom:0;
    transform: translateX(-50%);
    width:576px;
    max-width: 100%;
    padding: 1.4rem 1.4rem;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    z-index: 15;
}

.fixed_bottom .btn:disabled {
    background-color: var(--bs-gray);
    border-color: var(--bs-gray);
}




#certi_hp {
    display: flex;          /* 가로 배치 */
    align-items: stretch;   /* 세로 맞춤 */
    gap: 0.5rem;            /* ✅ input과 버튼 사이 간격 */
}

#certi_hp .position-relative {
    flex: 1;                /* ✅ 남은 공간 모두 차지 */
}

#certi_hp .input-group-btn button {
    width: 90px;            /* ✅ 버튼 고정 폭 */
}


.cert_time_txt {
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 1.0rem;
    font-weight: 500;
    color: #f23f3f;
}

.cert_hp_time_txt {
    position: absolute;
    top: 50%;
    right: 3.5rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 1.0rem;
    font-weight: 500;
    color: #f23f3f;
}

.price-card.card {
    border: 0 none;
}
.price-card.card .card-body {
    padding:0;border: 0 none;
}
.price-card.card .card-body .btn:hover {
    opacity: inherit;
    color: inherit;
}

.step.is-hidden {
    display: none; /* jQuery slideDown/Up과 호환 */
}

.step.is-active {
    display: block;
}

/* 살짝의 페이드/슬라이드 느낌 추가 (선택 사항) */
.step.revealing {
    opacity: 0;
    transform: translateY(-8px);
}
.step.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
}

.pwd-toggle {
    position: relative;
}

.pwd-toggle .form-control {

}

.pwd-toggle .btn-show-hide {
    position: absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
    margin-right: 1rem;
    border:0 none;
    color:#999ea2 !important;
    z-index: 10;
}

.already_has_id {
    color:#B0B0B0;
    border-bottom: 1px solid #B0B0B0;
    padding-bottom: 0.25rem;
}



.erase-input {
    position: relative;
}


.erase-input .form-control {
    border-radius: 0;
    border-color: #F6163C;
    border-width: 0 0 1px;
    padding-left: 0;
    padding-right: 0;
}

.erase-input .form-control[readonly] {
    background-color: transparent;
    opacity: 1;
}


.erase-input .form-select {
    /*background-image:none;*/
}

.erase-input .form-select[readonly] {

}

.erase-input .btn-erase-input {
    position: absolute;
    top:50%;
    right:4px;
    transform: translateY(-70%);
    margin-right:0;
    font-size: 1.1rem;
    border:0 none;
    color:#999ea2 !important;
    background: #fff;
    z-index: 10;
}

.erase-input .btn-erase-input.ty50 {
    transform: translateY(-50%);
}

.erase-input .btn-pass-input {
    position: absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
    margin-right:0;
    font-size: 1.1rem;
    border:0 none;
    color:#999ea2 !important;
    z-index: 10;
}

.btn-preview-input {
    border:0 none;
    color:#333 !important;
    background-color: #eee;
    z-index: 10;
}


.group-input-btn-set {
    position: relative;
}
.group-input-btn-set .form-control {
    border-radius: 0;
    border-color: #F6163C;
    border-width: 0 0 1px;
    padding-left:0;
    padding-right:0;
}

.group-input-btn-set .form-control[readonly] {
    background-color: transparent;
    opacity: 1;
}

.group-input-btn-set .btn {
    position: absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: normal;
    margin-right:0.5rem;
    z-index: 10;
}

.media-container {
    max-width: 640px;
}

.bg-srt-box {
    position: relative;

    height:200px;
}

.bg-srt-img {
    position: relative;
    width: 100%;
    max-width: 576px;
    height: 200px;
    text-align: center;
    overflow: hidden;
    border-radius: 20px;
    background-color: #f5f5f5;
}

.bg-srt-img #image {
    height: 100%;       /* 세로 꽉 채움 (200px) */
    width: auto;        /* 가로는 비율대로 */
    object-fit: cover;  /* 시각적으로 꽉 차게 */
    max-width: 100%;
}


.srt-bg-upload-btn {
    background-color: #717171;
    width:40px;height:40px;
    border-radius: 50%;
    background-image: url(../../assets/images/ico/ico_pen.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
}

.prof-srt-box {
    position: absolute;
    bottom: -30px;
    left: 10px;
    width:120px;
    height:120px;
    border-radius: 50%;
    background-color: #D6D6D6;
}

.prof-srt-img {
    position: relative;
    width: 100%;
    height:120px;
    overflow: hidden;
    border:10px solid #fff;
    border-radius: 50%;
    text-align: center;
}

.prof-srt-img img {
    height: 100%;       /* 세로 꽉 채움 (200px) */
    width: auto;        /* 가로는 비율대로 */
    object-fit: cover;  /* 시각적으로 꽉 차게 */
}


.srt-prof-upload-btn {
    background-color: #717171;
    width:40px;height:40px;
    border-radius: 50%;
    background-image: url(../../assets/images/ico/ico_pen.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    position: absolute;
    bottom: -3px;
    right: 0;
    cursor: pointer;
}



.sr_list .li-item {
    margin-bottom: 50px;
}

.sr_list .li-item:last-child {
    margin-bottom: 0;
}

.sr_list .li-item .info {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.sr_list .li-item .info .img_con {
    position: relative;
    flex: 0 0 40%;
    aspect-ratio: 1 / 1;     /* 정사각 비율, 필요 시 4/3 등으로 변경 */
}

.sr_list .li-item .info .img_con::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.sr_list .li-item .info .img_con img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
}

.sr_list .li-item .info .txt_con {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
}

.sr_list .li-item .info .txt_con .tit {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
}

.sr_list .li-item .info .txt_con .txt01 {
    font-size: 14px;
    font-weight: 400;
    color: #585858;
}

.sr_list .li-item .info .badge_con {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.sr_list .li-item .info .badge_con .btn:hover {
    opacity: inherit;
    color: inherit;
}


.sr_list .li-item .btn_con {
}

.sr_list .li-item .btn_con .btn {
    width: 100%;
}

.sr_list .li-item .btn_con .btn.disable {
    border: 1px solid #aaa;
}

.sr_list .li-item .btn_con .btn.disable span {
    color: #aaa;
}


@media (max-width: 480px) {
    .sr_list .li-item {
        margin-bottom: 40px;
    }
    .sr_list .li-item .info .img_con {
        flex-shrink: 0;
    }
}


/* ========================================
   메인페이지 헤더 상단 고정
   ======================================== */
.main_page .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 98;
    background-color: #fff;
    max-width: 576px;
    margin: 0 auto;
    padding-top: 8px;
    padding-top: calc(8px + env(safe-area-inset-top));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 헤더 높이만큼 콘텐츠 상단 여백 추가 */
.page-content.main_page {
    padding-top: 64px;
    padding-top: calc(64px + env(safe-area-inset-top));
}