input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
textarea, select, input, button { outline: none; }
::-webkit-scrollbar {display: none;}

.bgbk {display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; overflow: hidden; background-image: url('/garage/images/op50.png'); z-index: 500}
.bgbk_content {display: none; position: fixed; bottom: 0px; left: 0px; width: 100%; min-height: 20vh; max-height: 80vh; overflow-y: scroll; background-color: white; z-index: 501}


img {border: 0px; padding: 0px; margin: 0px}
body {font-size: 16px; color: black; margin: 0px; padding: 0px; font-family: 'Noto Sans KR', 'sans-serif'; background-color: #F2f2f2}
a {text-decoration: none}
.clear {clear: both}
.pad25 {padding: 2.5%}
.pad5 {padding: 5%}

.bgwhite {background-color: white}

.no_dis {display: none;}
.vct20 {height: 20px}
.i_100 {width: 100%}

.bgcover {background-size: cover; background-position: center; background-repeat: no-repeat;}
.bgwhite {background: white;}

.tab_w {height: 44px; background: white; padding: 0px 2.5%}
.tab3 {float: left; width: 33.3%; height: 44px; line-height: 44px; font-size: 16px; font-weight: 500; color: #888888; text-align: center;}
.tab3_s {float: left; width: 33.3%; height: 40px; line-height: 44px; font-size: 16px; font-weight: 500; color: #EF5A98; text-align: center; border-bottom: 4px solid #EF5A98}

.tab2 {float: left; width: 50%; height: 44px; line-height: 44px; font-size: 16px; font-weight: 500; color: #888888; text-align: center;}
.tab2_s {float: left; width: 50%; height: 40px; line-height: 44px; font-size: 16px; font-weight: 500; color: #EF5A98; text-align: center; border-bottom: 4px solid #EF5A98}



.bds {margin: 10px 0px 0px 0px; padding: 5%; box-shadow: 0px 0px 5px #c5c5c5; background-color: white;}


.meet_logo {width: 138px; height: 128px; margin: 40% auto 0px auto; background-image: url('/garage/images/meet_logo.png'); background-size: contain; background-position: center; background-repeat: no-repeat;}
.meet_logo_txt {width: 164px; height: 58px; margin: 20px auto; background-image: url('/garage/images/meet_logo_txt.png'); background-size: contain; background-position: center; background-repeat: no-repeat;}
.meet_title {margin: 20px auto; font-size: 26px; font-weight: 700; color: white; text-align: center;}
.meet_title_se {margin: 16px auto; font-size: 19px; font-weight: 400; color: white; text-align: center;}
.meet_loading {position: relative; width: 200px; height: 2px; border-radius: 1px; background-color: #fbb0cf; margin: 170px auto 10px auto}
.meet_loading_bar {position: absolute; top: 0px; left: 0px; width: 10%; height: 2px; border-radius: 1px; background-color: white; animation: fill-progress 3s ease-in-out forwards;}
@keyframes fill-progress {0% {width: 0%;} 100% {width: 100%;}}
.meet_loading_txt {text-align: center; font-size: 18px; opacity: 0.7; color: white;}


.header {width: 95%; background-color: white; padding: 2.5%; box-shadow: 0px 0px 10px #dfdfdf; position: relative}
.header_title {float: left; height: 40px; line-height: 40px; font-size: 22px; font-weight: 700;}
.header_logo {float: left; height: 40px; display: flex; align-items: center; gap: 8px;}
.header_logo_icon {width: 32px; height: 32px; background-color: #EF5A98; border-radius: 8px; padding: 4px; box-sizing: border-box;}
.header_logo_text {font-size: 20px; font-weight: 800; color: #EF5A98; font-family: Arial, sans-serif; letter-spacing: -0.5px; line-height: 40px;}
.header_noti {position: relative; float: right; width: 26px; height: 26px; margin: 7px 0px; background-image: url('/garage/images/header_noti.png'); background-size: contain; background-position: center; background-repeat: no-repeat;}
.header_noti.has-unread::after {content: ''; position: absolute; top: 0px; right: 2px; width: 8px; height: 8px; background-color: #ff3b30; border-radius: 50%; border: 1.5px solid #fff;}
.header_searching {float: right; width: 26px; height: 26px; margin: 7px 0px; background-image: url('/garage/images/header_searching.png'); background-size: contain; background-position: center; background-repeat: no-repeat;}
.header_search {width: 100%; height: 56px; background-color: #f2f2f2; border-radius: 28px; margin: 10px 0px 0px 0px}
.header_search_ipt {width: calc(100% - 60px); height: 56px; border: 0px;  border-radius: 28px; padding: 0px 0px 0px 60px; background-image: url('/garage/images/header_search_ipt.png'); background-size: 30px; background-position: 15px center; background-repeat: no-repeat; background-color: #f2f2f2; font-size: 18px}

.header_clear {position: fixed; top: 0px; left: 0px; width: 95%; height: 44px; line-height: 44px; padding: 2.5%; box-shadow: 0px 0px 10px #dfdfdf}
.header_clear_back {float: left; width: 44px; height: 44px; border-radius: 50%; background-image: url('/garage/images/header_clear_back.png'); background-size: 100%; background-position: center; background-repeat: no-repeat;}
.header_clear_fav {float: right; width: 44px; height: 44px; border-radius: 50%; background-image: url('/garage/images/header_fav.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; margin: 0px 10px}
.header_clear_fav_s {float: right; width: 44px; height: 44px; border-radius: 50%; background-image: url('/garage/images/header_fav_s.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; margin: 0px 10px}
.header_clear_more {float: right; width: 44px; height: 44px; border-radius: 50%; background-image: url('/garage/images/header_more.png'); background-size: 100%; background-position: center; background-repeat: no-repeat;}

.header_back {float: left; width: 44px; height: 44px; background-image: url('/garage/images/ic_header_back.png'); position: relative; z-index: 1}
.header_text {position: absolute; left: 0px; width: 100%; height: 44px; line-height: 44px; text-align: center; font-size: 18px; font-weight: 600; z-index: 0}
.header_search_se {float: right; width: calc(100% - 90px); height: 40px; line-height: 40px; border: 2px solid #EF5A98; border-radius: 22px; background-image: url('/garage/images/ic_header_search_se.png'); background-size: 20px; background-position: 10px center; background-repeat: no-repeat; padding: 0px 0px 0px 40px; font-size: 16px}
.header_community {position: relative; float: right; height: 36px; line-height: 36px; background-color: #EF5A98; border-radius: 18px; padding: 0px 15px; color: white; font-size: 14px; margin: 4px 0px}

.header_filter {float: right; width: 44px; height: 44px; border-radius: 50%; background-image: url('/garage/images/header_filter.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; margin: 0px 10px; position: relative; z-index: 1}

.footer {position: fixed; left: 0px; bottom: 0px; width: 100%; height: 75px; background-color: white; border-top: 1px solid #dfdfdf; z-index: 100}
.footer_m {float: left; width: 20%; color: #AAAAAA}
.footer_m_s {float: left; width: 20%; color: #EF5A98}
.footer_mp {width: 26px; height: 26px; margin: 10px auto; background-size: cover; background-position: center; background-repeat: no-repeat}
.footer_mc {text-align: center; font-size: 15px;}

.footer_vct {height: 100px}

.common_title {margin: 10% 0px 5% 0px; line-height: 30px;}
.common_title_txt {float: left; font-size: 20px; font-weight: 700; margin: 0px 0px 5px 0px}
.common_title_more {float: right; font-size: 14px; color: #EF5A98}

.idx_menu {margin: 5% 0px; width: 95%; padding: 5% 2.5%; background-color: white; border-radius: 20px; box-shadow: 0px 0px 10px #dfdfdf;}
.idx_menu_m {float: left; width: 25%; margin: 0px 0px 20px 0px}
.idx_menu_mp {width: 56px; height: 56px; margin: 0px auto 10px auto; background-size: cover; background-position: center; background-repeat: no-repeat;}
.idx_menu_mc {text-align: center; font-size: 13px; font-weight: 500px;}

.idx_procedure {width: 100%; height: 265px; overflow-x: scroll;}
.idx_procedure_inner {width: 5000px; height: 265px}
.idx_hospital {}


.procedure_m {float: left; width: 180px; height: 257px; border-radius: 15px; box-shadow: 0px 0px 7px #dfdfdf; background: white; margin: 0px 10px 0px 0px}
.procedure_mp {width: 180px; height: 110px; border-top-left-radius: 15px; border-top-right-radius: 15px;}
.procedure_mc {padding: 10px 10px 5px 10px; font-size: 18px; font-weight: 700; overflow: hidden;}
.procedure_mb {padding: 0px 10px; font-size: 14px; font-weight: 400px; color: #888888; overflow: hidden;}
.procedure_mprice {padding: 5px 10px; font-size: 14px; color: #888888}
div.procedure_mprice span {color: #EF5A98; font-size: 21px; font-weight: 700;}
.procedure_mstar {font-size: 15px; color: #888888; padding: 0px 10px}

.hospital_m {width: 100%; border-radius: 15px; margin: 0px 0px 20px 0px; background: white}
.hospital_mp {padding: 0px 0px 100% 0px; border-top-left-radius: 15px; border-top-right-radius: 15px}
.hospital_mc {padding: 10px 10px 10px 10px; font-size: 21px; font-weight: 700;}
.hospital_mcategory {padding: 0px 10px}
.hospital_mcategory_m {float: left; line-height: 30px; background-color: #FFF0F7; color: #EF5A98; padding: 0px 10px; border-radius: 5px; margin: 0px 5px 0px 0px; font-size: 14px;}
.hospital_mstar {padding: 10px; font-size: 16px; color: #888888}
div.hospital_mstar span {font-size: 19px; font-weight: 700; color: black;}
.hospital_mmap {height: 18px; margin: 5px 10px; padding: 0px 0px 0px 25px; line-height: 18px; background-image: url('/garage/images/ic_map.png'); background-size: 18px; background-repeat: no-repeat; background-position: left center; font-size: 16px}
.hospital_mtime {height: 18px; margin: 10px 10px; padding: 0px 0px 0px 25px; line-height: 18px; background-image: url('/garage/images/ic_time.png'); background-size: 18px; background-repeat: no-repeat; background-position: left center; font-size: 16px}
div.hospital_mtime span {color: #00A854; font-weight: 700;}
.hospital_mline {height: 1px; width: 90%; margin: 5%; background-color: #efefef}
.hospital_mfav {float: left; width: 44px; height: 44px; background-size: 24px; background-image: url('/garage/images/ic_fav.png'); background-position: center; background-repeat: no-repeat; margin: 0px 0px 0px 10px}
.hospital_mfav_s {float: left; width: 44px; height: 44px; background-size: 24px; background-image: url('/garage/images/ic_zzim.png'); background-position: center; background-repeat: no-repeat; margin: 0px 0px 0px 10px}
.hospital_monline {float: right; width: 90px; height: 42px; line-height: 42px; border: 1px solid #EF5A98; border-radius: 22px; font-size: 16px; font-weight: 500; color: #EF5A98; text-align: center; margin: 0px 10px 5% 0px}
.hospital_mreservation {float: right; width: 90px; height: 42px; line-height: 42px; border: 1px solid #EF5A98; background: #EF5A98; border-radius: 22px; font-size: 16px; font-weight: 500; color: white; text-align: center; margin: 0px 10px 5% 0px}
.hospital_mai {float: right; width: 50px; height: 42px; padding: 0px 0px 0px 25px; line-height: 42px; background-color: #FFF0F7; border-radius: 36px; color:#F7327A; margin: 0px 10px 0px 0px; background-image: url('/garage/images/ai_icon.png'); background-size: 20px; background-position: 10px center; background-repeat: no-repeat; text-align: center}

.zzim_m {height: 100px; border-radius: 10px; background-color: white; margin: 0px 0px 10px 0px}
.zzim_mp {float: left; width: 100px; height: 100px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.zzim_mc {float: left; width: calc(100% - 120px); padding: 10px}
.zzim_mct {float: left; height: 30px; line-height: 30px; font-size: 16px; font-weight: 700;}
.zzim_mct_fav {float: right; width: 20px; height: 20px; margin: 5px 0px; background-image: url('/garage/images/ic_zzim.png');}
.zzim_mcc {line-height: 24px; font-size: 13px; font-weight: 400; color: #888888; margin: 4px 0px}
.zzim_mb_star {float: left; font-size: 13px; color: #555555}
.zzim_mb_time {float: right; color: #AAAAAA; font-size: 12px}

.searchhis_m {float: left; border-radius: 19px; height: 36px; line-height: 36px; border: 1px solid #e0e0e0; color: #555; font-size: 15px; padding: 0px 10px; margin: 5px 5px 0px 0px}

.searchrank_m {height: 48px; line-height: 48px;}
.searchrank_ml {float: left; width: 24px; height: 24px; line-height: 24px; font-size: 17px; font-weight: 700; margin: 12px 0px; color: #888888}
.searchrank_ml_s {float: left; width: 24px; height: 24px; line-height: 24px; font-size: 17px; font-weight: 700; margin: 12px 0px; color: #EF5A98}
.searchrank_mc {float: left; font-size: 16px; font-weight: 500; color: #1A1A1A;}
.searchrank_mr {float: right; height: 22px; line-height: 22px; padding: 0px 5px; margin: 13px 0px; background-color: #FFF0F7; color: #EF5A98; border-radius: 5px; font-size: 12px;}

.searchcate_l {float: left; width: calc(50% - 35px); height: 76px; line-height: 76px; font-size: 17px; font-weight: 700; padding: 0px 15px; margin: 10px 10px 0px 0px; background-color: #FFE4F0; border-radius: 10px;}
.searchcate_r {float: right; width: calc(50% - 35px); height: 76px; line-height: 76px; font-size: 17px; font-weight: 700; padding: 0px 15px; margin: 10px 0px 0px 0px; background-color: #D9F7F0; border-radius: 10px;}


.show_search_res {padding: 5%}


.procedure_card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 3%;
    margin: 0px 0px 5% 0px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f3f5;
    position: relative;
}
/* 왼쪽 시술 썸네일 이미지 공간 */
.procedure_img {float: left; width: 100px; height: 100px; border-radius: 12px; background-size: cover; background-position: center; background-repeat: no-repeat}
.procedure_info {float: right; width: calc(100% - 115px)}
.procedure_info_title {font-size: 16px; font-weight: 700; margin: 0px 0px 5px 0px}
.procedure_info_text {font-size: 13px; font-weight: 700; color: #868686}

/* 태그 리스트 */
.tag_container {margin: 5px 0px 0px 0px}
.tag {
    font-size: 11px;
    font-weight: 500;
    color: #e6397b;
    background-color: #ffecf2;
    padding: 3px 8px;
    border-radius: 6px;
}
/* 가격 정보 */
.price_box {
    font-size: 18px;
    font-weight: 800;
    color: #e6397b;
    display: flex;
    align-items: baseline;
    margin: 10px 0px 0px 0px
}
/* 우측 하단 예약 버튼 */
.book_btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: 1px solid #e6397b;
    background-color: #ffffff;
    color: #e6397b;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.book_btn:hover {
    background-color: #e6397b;
    color: #ffffff;
}


   /* --- 2. 필터 조건 칩 영역 (가로 스크롤) --- */
.filter-wrap {
    background-color: white;
    border-bottom: 1px solid #eee;
    padding: 5%;
}

.filter-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    width: 100%;
}

.filter-container::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    border: 1px solid #e0e0e0;
    background-color: white;
    color: #666;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 선택된 핑크색 필터 칩 스타일 */
.filter-chip.active {
    background-color: #ff5293;
    color: white;
    border-color: #ff5293;
}

.filter-chip i {
    font-size: 10px;
    color: #999;
}

.filter-chip.active i {
    color: white;
}





.hosp_pic {position: relative; width: 90%; height: 80px; padding: 50% 5% 5% 5%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1}
.hosp_pic_title {line-height: 30px; margin: 10px 0px; font-size: 26px; color: white; font-weight: 700; text-shadow: 0px 0px 5px black;}
.hosp_pic_info {line-height: 30px; height: 30px; font-size: 16px; color: white; text-shadow: 0px 0px 5px black;}

.hosp_info_lef {float: left; width: 33%;}
.hosp_info_cent {float: left; width: calc(34% - 2px); border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf}
.hosp_info_rig {float: right; width: 33%;}

.hosp_info_title {font-size: 24px; font-weight: 700; text-align: center; line-height: 36px;}
.hosp_info_name {font-size: 14px; font-weight: 400; text-align: center; color: #888888; line-height: 24px;}

.hosp_tag_1 {float: left; height: 30px; line-height: 30px; border-radius: 15px; color: #EF5A98; background-color: #FFF0F7; font-size: 14px; font-weight: 700; margin: 0px 10px 0px 0px; padding: 0px 7px;}
.hosp_tag_2 {float: left; height: 30px; line-height: 30px; border-radius: 15px; color: #1A6BC4; background-color: #EBF3FF; font-size: 14px; font-weight: 700; margin: 0px 10px 0px 0px; padding: 0px 7px;}
.hosp_tag_3 {float: left; height: 30px; line-height: 30px; border-radius: 15px; color: black; background-color: #FFE600; font-size: 14px; font-weight: 700; margin: 0px 10px 0px 0px; padding: 0px 7px;}

.hosp_tab {float: left; width: 20%; height: 53px; line-height: 53px; text-align: center; font-size: 16px; font-weight: 400; background: white; margin: 0px 0px 2px 0px}
.hosp_tab_s {float: left; width: 20%; height: 53px; line-height: 53px; text-align: center; font-size: 16px; font-weight: 700; background: white; margin: 0px 0px 2px 0px; color: #EF5A98}

.hosp_title {font-size: 19px; font-weight: 700; margin: 0px 0px 2.5% 0px;}


.cm_category_m {float: left; line-height: 36px; color: black; background-color: #F5F5F5; padding: 0px 10px; border-radius: 18px; color: #555555; font-size: 14px; margin: 5px 5px 0px 0px}
.cm_category_m_s {float: left; line-height: 36px; color: black; background-color: #EF5A98; padding: 0px 10px; border-radius: 18px; color: white; font-size: 14px; margin: 5px 5px 0px 0px}

.cm_tags_m {float: left; line-height: 34px; color: black; border: 1px solid #dfdfdf; padding: 0px 10px; border-radius: 18px; color: #555555; font-size: 14px; margin: 5px 5px 0px 0px}
.cm_tags_m_s {float: left; line-height: 36px; color: black; background-color: #EF5A98; padding: 0px 10px; border-radius: 18px; color: white; font-size: 14px; margin: 5px 5px 0px 0px}

.cm_prev_photos {float: left; width: 80px; height: 80px; border-radius: 10px; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 10px 10px 0px 0px}



.input-area {
        display: flex;
        align-items: center;
        padding: 2.5%;
        background-color: white;
        border-top: 1px solid #ebebeb;
        gap: 12px;
        width: 95%;
        position: fixed; 
        left: 0px; 
        bottom: 5px;
    }