/* 로그인 */
.login_wrap{ padding: var(--ref-spacing-500, 40px) var(--container-side, 16px); flex-grow: 1; display: flex; flex-direction: column; align-items: center;}
.login_wrap .login{flex-grow: 1; width: 100%;}
.login_wrap .default{display: flex;	padding: var(--container-padding, 16px) 0px; flex-direction: column; align-items: center; gap: var(--spacing-vertical-xl, 24px);}
.login_wrap .input_wrap{ display: flex;	flex-direction: column; gap: var(--spacing-vertical-lg, 16px); width: 100%;}
.login_wrap .more{display: flex; justify-content: center; align-items: center; gap: var(--spacing-horizontal-md, 12px);}
.login_wrap .more a{ display: flex;	height: var(--ref-sizing-450, 36px); align-items: center; font: var(--sys-font-body-5); gap: var(--spacing-horizontal-md, 12px);}
.login_wrap .more a:not(:last-child):after{content: ''; display: block; width: var(--ref-sizing-10, 1px); height: var(--ref-sizing-150, 12px); background: var(--border-frame-light, #E6E6E6);}
.login_wrap .social{ display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; align-items: center; gap: var(--spacing-vertical-xl, 24px);}
.login_wrap .social h6{font: var(--sys-font-subtitle-4);}
.login_wrap .social ul{	display: flex; gap: var(--spacing-horizontal-lg, 16px);}
.login_wrap .social li{ display: flex; width: var(--ref-sizing-650, 52px); height: var(--ref-sizing-650, 52px);	border-radius: var(--ref-radius-full, 360px); justify-content: center; align-items: center;}
.login_wrap .social li.google, .login_wrap .social li.apple{border: 1px solid var(--border-frame-light, #E6E6E6);}
.login_wrap .social li.kakao{background: #F9E54D;}
.login_wrap .social li.naver{background: #19CE60;}
.login_wrap .inquiry{flex-shrink: 0; font: var(--sys-font-body-5); color: var(--text-subdued, #595959); border-bottom: 1px solid var(--text-subdued, #595959);}
.login_wrap .social li a {display:flex;}

/* 회원가입 */
.join_wrap{	display: flex; position: relative;	padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-sm, 8px); flex-grow: 1;}
.join_wrap .title{padding: var(--container-padding, 16px) 0px; display: flex; flex-direction: column;align-items: flex-start; gap: var(--ref-spacing-100, 8px);}
.join_wrap .title h2{font: var(--sys-font-title-1);}
.join_wrap .title p{font: var(--sys-font-body-5); color: var(--text-subdued, #595959);}
.join_wrap .progress_wrap{position: absolute; left: 0; top: 0; display: flex; background-color: var(--background-onsurface, #FFF); width: 100%;  height: var(--ref-sizing-50, 4px);}
.join_wrap .progress_wrap li{flex-grow: 1; flex-basis: 0; background: var(--brand-lighter, rgba(245, 123, 0, 0.10));}
.join_wrap .progress_wrap li.on{background: var(--brand-standard, #F57B00);}


/* 회원가입 > 약관동의 */
.agreement_wrap{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.agreement_wrap .agree_all{border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.agreement_wrap .chk_list{display: flex; flex-direction: column;}

/* 회원가입 > 본인인증 */
.agreement_wrap .input_wrap{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.agreement_wrap .input{position: relative;}
.agreement_wrap [class*="button"]{position: absolute; right: 6px; top: 6px;}
.agreement_wrap .time{position: absolute; right: 12px; top: 18px; font: var(--sys-font-detail-3); color: var(--state-negative-standard, #FA3848);}

/* 회원가입 > 정보입력 */
.information_wrap{	display: flex; position: relative; flex-direction: column; gap: var(--spacing-vertical-sm, 8px); flex-grow: 1;}
.information_wrap .input_wrap{display: flex; flex-direction: column; gap: var(--spacing-vertical-xl, 24px); padding: var(--container-padding, 16px) var(--container-side, 16px);}
.information_wrap dl{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.information_wrap dt{font: var(--sys-font-body-6); color: var(--text-subdued, #595959);}
.information_wrap dd{ display: flex;	flex-direction: column;	gap: var(--spacing-vertical-sm, 8px);}
.information_wrap .id{display: flex; gap: var(--spacing-horizontal-sm, 8px); align-items: center;}
.information_wrap .id span{display: flex; width: var(--ref-sizing-300, 24px); height: var(--ref-sizing-300, 24px); justify-content: center; align-items: center; border-radius: var(--ref-radius-full, 360px);}
.information_wrap .id img{width: 18px;}
.information_wrap .id .google, .information_wrap .id .apple{border: 1px solid var(--border-frame-light, #E6E6E6);}
.information_wrap .id .kakao{background: #F9E54D;}
.information_wrap .id .naver{background: #19CE60;}
.information_wrap .input{position: relative; display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.information_wrap .input [class*="button"]{position: absolute; right: 6px; top: 6px;}
.information_wrap .info{color: var(--content-information-standard, #1F9EDE); font: var(--sys-font-detail-3);}
.information_wrap .pw_comment{color: var(--content-information-standard, #1F9EDE); font: var(--sys-font-detail-3);}
.information_wrap .pw_comment.red{color: var(--state-negative-standard, #FA3848);}
.information_wrap .birthday{flex-direction: row; gap: var(--spacing-horizontal-sm, 8px);}
.information_wrap .birthday select{flex-grow: 1; flex-basis: 0;}

/* 회원가입 > 회원가입 완료 */
.join_ok{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; flex-grow: 1;}
.join_ok h6{font: var(--sys-font-title-2);}

/* 아이디 찾기 */
.find_id_ok{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; flex-grow: 1; font: var(--sys-font-body-1);}
.find_id_ok strong{font: var(--sys-font-title-2);}

/* 홈 */
/*.index_wrap{display: flex; flex-direction: column;}*/
.index_wrap{display: flex; flex-direction: column; overflow-y: auto; height: auto; flex-grow: 1}
.index_wrap .banner a{width: 100% !important;}
.index_wrap .banner img{width: 100%; vertical-align: top;}
.index_wrap .banner .swiper_fraction{position: absolute; left: auto; top: auto; right: 8px; bottom: 8px; display: flex; justify-content: center; width: var(--ref-sizing-500, 40px); height: 22px; border-radius: var(--ref-radius-200, 16px); background: rgba(0, 0, 0, 0.50); font-size: 11px; font-weight: 500; color: var(--ref-color-grey-white, #FFF); gap: 3px; line-height: 24px;}
.index_wrap .my_car{display: flex; padding: var(--spacing-vertical-lg, 16px) 0px; background: var(--background-light, #FAFAFA); flex-direction: column; align-items: center; gap: var(--spacing-vertical-lg, 16px);}
.index_wrap .my_car .card_wrap{width: 100%; padding:  var(--spacing-vertical-sm, 8px) 0;}
.index_wrap .my_car .card{ display: flex; padding: var(--ref-spacing-500, 40px) 0px; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12); background: var(--ref-color-grey-white, #FFF); flex-direction: column; align-items: center;	gap: var(--spacing-vertical-lg, 16px); width: calc(100% - 48px) !important;}
.index_wrap .my_car .car_info{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--spacing-vertical-lg, 16px);}
.index_wrap .my_car .car_name{font: var(--sys-font-subtitle-2);}
.index_wrap .my_car .btn_initial{margin-bottom: var(--spacing-vertical-xl, 24px);}
.index_wrap .my_car .btn_additional{margin-bottom: var(--spacing-vertical-sm, 8px);}
.index_wrap .store_wrap{ display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); background: var(--background-onsurface, #FFF); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.index_wrap .store_wrap:nth-child(even){background: var(--background-light, #FAFAFA);}
.index_wrap .store_wrap h2{font: var(--sys-font-title-3);}
.index_wrap .store_wrap .list_wrap{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.index_wrap .store_wrap .comp-store-list{border: 1px solid var(--border-frame-light, #E6E6E6); }
.index_wrap .store_wrap .no_data{height: 172px; display: flex; justify-content: center; align-items: center; color: var(--text-disabled, #999); font: var(--sys-font-detail-1);}

/* 차량 등록 */
.car_regist{flex-grow: 1; display: flex; flex-direction: column;}
.car_regist .select_wrap{display: flex; padding: var(--ref-spacing-50, 4px) var(--container-side, 16px); flex-direction: column;}
.car_regist dl{display: flex; padding: var(--spacing-vertical-xl, 24px) 0px; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.car_regist dt{font: var(--sys-font-title-4);}
.car_regist dd{display: flex; flex-wrap: wrap; gap: var(--spacing-vertical-sm, 8px);}
.car_regist dd label{flex-basis: calc(33.3% - 5.3px);}
.car_regist .origin dd{gap: 0;}
.car_regist .origin dd label{flex-basis: 50%;}
.car_regist .direct_wrap{border-top: 8px solid var(--border-divider, #FAFAFA);}
.car_regist .direct_wrap .comp-list{padding: 0px var(--container-side, 16px); border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.car_regist .direct_wrap .guide{color: var(--text-subdued, #595959); font: var(--sys-font-body-6); text-align: center; margin-top: var(--spacing-vertical-xl, 24px);}
.car_regist .direct_wrap .input_wrap{ display: flex; padding: 0 var(--container-side, 16px) 0; flex-direction: column;}
.car_regist .direct_wrap select{width: 100%;}

@media(max-width: 360px){
	.car_regist dd label{flex-basis: calc(50% - 4px);}
}

/* 예약 정보 */
.reserve_list.swiper-container{width: 100%; display: flex; flex-direction: column; padding: var(--container-padding, 16px) 0 0; flex-grow: 1;}
.reserve_list .swiper-wrapper{height: 0; flex-grow: 1;}
.reserve_list .card{display: flex; width: calc(100% - 48px) !important; overflow: hidden; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12); background: var(--background-onsurface, #FFF); flex-direction: column; flex-grow: 1; overflow-y: auto;}
.reserve_list .card > :not(:first-child){border-top: 1px solid var(--border-frame-light, #E6E6E6);}
.reserve_list .card > :not([class*='button']){padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); display: flex; flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.reserve_list .card dt{font: var(--sys-font-title-4); display: flex; justify-content: space-between; align-items: center;}
.reserve_list .card .shop_info{gap: var(--spacing-vertical-xl, 24px); display: flex; flex-direction: column;}
.reserve_list .card .shop_info .text{display: flex; flex-direction: column; gap: var(--ref-spacing-50, 4px);}
.reserve_list .card .shop_info .text strong{font: var(--sys-font-title-2);}
.reserve_list .card .shop_info .text p{color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}
.reserve_list .card .shop_info .btn_wrap{display: flex; gap: var(--spacing-horizontal-sm, 8px);}
.reserve_list .card .shop_info .btn_wrap > *{flex-basis: 0; flex-grow: 1;}
.reserve_list .card > [class*='button']{border: none; flex-shrink: 0;}
.reserve_list .card .detail dd{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.reserve_list .card .detail dd dl{display: flex; gap: var(--spacing-horizontal-sm, 8px);}
.reserve_list .card .detail dd dt{color: var(--text-subdued, #595959); font: var(--sys-font-body-6);}
.reserve_list .card .detail dd dd{font: var(--sys-font-body-6);}
.reserve_list .card .order ul{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.reserve_list .card .order li{display: flex; align-items: center; display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); }
.reserve_list .card .order li p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6); display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); flex-grow: 1;}
.reserve_list .card .order li p:after{content: ''; display: block; width: 1px; flex-grow: 1; height: 1px; border-top: 1px dashed  var(--border-frame-dark, #D9D9D9);}
.reserve_list .card .order li strong{font: var(--sys-font-detail-1);}
.reserve_list .card .amount ul{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.reserve_list .card .amount li{display: flex; justify-content: space-between; align-items: center;}
.reserve_list .card .amount p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6);}
.reserve_list .card .amount strong{font: var(--sys-font-detail-1);}
.reserve_list .card .amount .total{ display: flex; padding-top: var(--spacing-vertical-md, 12px); border-top: 1px solid var(--border-frame-light, #E6E6E6); justify-content: space-between; align-items: center;}
.reserve_list .card .amount .total p{font: var(--sys-font-subtitle-3);}
.reserve_list .card .amount .total strong{font: var(--sys-font-title-2); color: var(--brand-standard, #F57B00);}
.reserve_list .card .payment dd{color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}

.reserve_list .swiper-pagination{position: static; padding: var(--spacing-vertical-xl, 24px) 0px; display: flex; gap: var(--spacing-horizontal-sm, 8px); justify-content: center; align-items: center; flex-shrink: 0;}
.reserve_list .swiper-pagination-current{color: var(--brand-standard, #F57B00); font: var(--sys-font-title-4);}

/* 이용 내역 */
.history{display: flex; flex-direction: column;}
.history .years{ display: flex; padding: var(--container-padding, 16px) 0px; justify-content: center; align-items: center; gap: var(--spacing-horizontal-sm, 8px); border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.history .years button{display: flex; width: var(--ref-sizing-500, 40px); height: var(--ref-sizing-500, 40px); justify-content: center; align-items: center; border: none; background-color: transparent;}
.history .years button span{display: flex; width: var(--ref-sizing-400, 32px); height: var(--ref-sizing-400, 32px); border-radius: var(--ref-radius-full, 360px); border: 1px solid var(--border-frame-light, #E6E6E6); align-items: center; justify-content: center;}
.history .years button span img{width: var(--ref-sizing-200, 16px); height: var(--ref-sizing-200, 16px);}
.history .years strong{font: var(--sys-font-subtitle-1);}
.history .list_wrap{display: flex; flex-direction: column;}
.history .list{ display: flex; padding: var(--ref-spacing-200, 16px) var(--container-side, 16px); border-bottom: 1px solid var(--border-frame-light, #E6E6E6); background: var(--background-onsurface, #FFF); flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.history .list .top{display: flex; justify-content: space-between; align-items: center;}
.history .list .top .left{display: flex; align-items: center; gap: var(--spacing-horizontal-sm, 8px);}
.history .list .top .state{font: var(--sys-font-body-6);}
.history .list .top .state.reserve{color: var(--state-positive-standard, #39C674);}
.history .list .top .state.cancel{color: var(--state-negative-standard, #FA3848);}
.history .list .top .state.complete{color: var(--text-disabled, #999);}
.history .list .top .date{font: var(--sys-font-body-5); color: var(--text-disabled, #999);}
.history .list .top .detail{display: flex; height: var(--ref-sizing-300, 24px); align-items: center; font: var(--sys-font-detail-1); color: var(--text-subdued, #595959);}
.history .list .top .detail img{width: 14px; opacity: 0.3;}
.history .list .title{display: flex; flex-direction: column;}
.history .list .title strong{font: var(--sys-font-subtitle-2);}
.history .list .title p{color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}

/* 이용 내역 상세 */
.history_detail{width: 100%; display: flex; flex-direction: column; padding: var(--container-padding, 16px) var(--container-side, 16px); gap: var(--spacing-vertical-lg, 16px);}
.history_detail > :not([class*='button']){ display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.history_detail dt{font: var(--sys-font-title-4); display: flex; justify-content: space-between; align-items: center;}
.history_detail .shop_info{gap: var(--spacing-vertical-xl, 24px); display: flex; flex-direction: column;}
.history_detail .shop_info .text{display: flex; flex-direction: column; gap: var(--ref-spacing-50, 4px);}
.history_detail .shop_info .text strong{font: var(--sys-font-title-2);}
.history_detail .shop_info .text p{color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}
.history_detail .shop_info .btn_wrap{display: flex; gap: var(--spacing-horizontal-sm, 8px);}
.history_detail .shop_info .btn_wrap > *{flex-basis: 0; flex-grow: 1;}
.history_detail .detail dd{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.history_detail .detail dd dl{display: flex; gap: var(--spacing-horizontal-sm, 8px);}
.history_detail .detail dd dt{color: var(--text-subdued, #595959); font: var(--sys-font-body-6);}
.history_detail .detail dd dd{font: var(--sys-font-body-6);}
.history_detail .order ul{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.history_detail .order li{display: flex; align-items: center; display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); }
.history_detail .order li p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6); display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); flex-grow: 1;}
.history_detail .order li p:after{content: ''; display: block; width: 1px; flex-grow: 1; height: 1px; border-top: 1px dashed  var(--border-frame-dark, #D9D9D9);}
.history_detail .order li strong{font: var(--sys-font-detail-1);}
.history_detail .amount ul{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.history_detail .amount li{display: flex; justify-content: space-between; align-items: center;}
.history_detail .amount p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6);}
.history_detail .amount strong{font: var(--sys-font-detail-1);}
.history_detail .amount .total{ display: flex; padding-top: var(--spacing-vertical-md, 12px); border-top: 1px solid var(--border-frame-light, #E6E6E6); justify-content: space-between; align-items: center;}
.history_detail .amount .total p{font: var(--sys-font-subtitle-3);}
.history_detail .amount .total strong{font: var(--sys-font-title-2); color: var(--brand-standard, #F57B00);}
.history_detail .payment dd{color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}

/* 리뷰 작성 */
.review_write{display: flex; flex-direction: column; flex-grow: 1;}
.review_write .select_wrap{ display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.review_write .select_wrap strong{font: var(--sys-font-subtitle-2); text-align: center;}
.review_write .select_wrap ul{display: flex; justify-content: center; gap: var(--ref-spacing-50, 4px);}
.review_write .select_wrap li{width: var(--ref-sizing-500); height: var(--ref-sizing-500); cursor: pointer; background: url('/html/img/icon/star.svg')no-repeat; background-size: contain;}
.review_write .select_wrap li.on{background: url('/html/img/icon/star_fill.svg')no-repeat; background-size: contain;}
.review_write .input_wrap{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); border-top: 8px solid var(--border-divider, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-sm, 8px); flex-grow: 1;}
.review_write .input_wrap p{font: var(--sys-font-body-6); color: var(--text-subdued, #595959);}
.review_write .photo_wrap{ display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); gap: var(--spacing-horizontal-sm, 8px);}
.review_write .photo_wrap li{display: flex; width: var(--ref-sizing-900, 72px); height: var(--ref-sizing-900, 72px); border: 1px solid var(--border-control, #CCC); justify-content: center; align-items: center; background: url('/html/img/icon/camera_disabled.svg')no-repeat center; position: relative;}
.review_write .photo_wrap .review_upload{display: flex; width: var(--ref-sizing-900, 72px); height: var(--ref-sizing-900, 72px); border: 1px solid var(--border-control, #CCC); justify-content: center; align-items: center; background: url('/html/img/icon/camera_disabled.svg')no-repeat center; position: relative;}
.review_write .photo_wrap input[type="file"]{display: none;}
.review_write .photo_wrap label{width: 100%; height: 100%;}
.review_write .photo_wrap .img_preview{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.review_write .photo_wrap .img_preview img{width: 100%; height: 100%; object-fit: cover; background-color: var(--background-onsurface);}
.review_write .photo_wrap .img_preview .delete{width: 100%; height: 100%; font-size: 0; background-color: transparent; border: none; position: absolute; left: 0; top: 0; padding: var(--ref-spacing-50); display: flex; justify-content: flex-end;}
.review_write .photo_wrap .img_preview .delete:before{content: ''; width: var(--ref-sizing-300, 24px); height: var(--ref-sizing-300, 24px); justify-content: center; border-radius: var(--ref-radius-full, 360px); background: url('/html/img/icon/close_white.svg') no-repeat center var(--background-dim, rgba(0, 0, 0, 0.50)); background-size: var(--ref-sizing-200, 16px);}
.review_write .btn_wrap{display: flex; padding: var(--ref-spacing-200, 16px) var(--container-side, 16px) var(--ref-spacing-300, 24px) var(--container-side, 16px); background: var(--background-onsurface, #FFF);}
.review_write .btn_wrap [class*="button"]{flex-grow: 1;}

/* coupon */
.coupon_wrap{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.coupon_wrap .note{display: flex; justify-content: center; align-items: center; gap: var(--ref-spacing-50, 4px); font: var(--sys-font-body-6); color: var(--text-subdued, #595959);}
.coupon_wrap .note img{width: var(--ref-sizing-250); height: var(--ref-sizing-250);}
.coupon_wrap ul{display: flex; flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.comp-coupon{display: flex; background: var(--background-onsurface, #FFF); border: 1px solid var(--border-frame-light, #E6E6E6); height: 118px; gap: 0 !important;}
.comp-coupon .left{flex-grow: 1; display: flex; padding: var(--spacing-vertical-lg, 16px) var(--container-side, 16px); flex-direction: column; justify-content: space-between; position: relative;}
.comp-coupon .line{border-left: 1px dashed var(--border-frame-light, #E6E6E6); height: calc(100% - 28px); align-self: center;}
.comp-coupon .right{width: 88px; display: flex; justify-content: center; align-items: center; color: var(--brand-standard, #F57B00); font: var(--sys-font-subtitle-4); position: relative;}
.comp-coupon .title{display: flex; flex-direction: column;}
.comp-coupon .title .discount{font: var(--sys-font-title-2); color: var(--brand-standard, #F57B00);}
.comp-coupon .title .name{font: var(--sys-font-detail-2);}
.comp-coupon .date{font: var(--sys-font-body-5); color: var(--text-subdued, #595959);}
.comp-coupon .left:before, .comp-coupon .left:after{content: ''; display: block; width: var(--ref-sizing-150, 12px); height: var(--ref-sizing-150, 12px); border-radius: var(--ref-radius-full, 360px); background-color: var(--background-onsurface, #FFF); border: 1px solid var(--border-frame-light, #E6E6E6); position: absolute; right: -6px;}
.comp-coupon .left:before{top: -6px;}
.comp-coupon .left:after{bottom: -6px;}
.comp-coupon .right:before, .comp-coupon .right:after{content: ''; display: block; width: var(--ref-sizing-150, 12px); height: 6px; background-color: var(--background-onsurface, #FFF);  position: absolute; left: -7px;}
.comp-coupon .right:before{top: -7px;}
.comp-coupon .right:after{bottom: -7px;}
.comp-coupon.end{opacity: 0.5; background: var(--background-dark, #F2F2F2);;}
.comp-coupon.end .right{color: var(--text-disabled, #999);}


/* 마일리지 */
.mileage_wrap{display: flex; flex-direction: column;}
.mileage_wrap .summary{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.mileage_wrap .summary dl{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); background: var(--background-light, #FAFAFA); justify-content: space-between; align-items: center;}
.mileage_wrap .summary dt{font: var(--sys-font-subtitle-3);}
.mileage_wrap .summary dd{display: flex; align-items: center; color: var(--brand-standard, #F57B00);}
.mileage_wrap .summary .mileage{font: var(--sys-font-title-2);}
.mileage_wrap .summary .refund{display: flex; height: var(--ref-sizing-450, 36px); align-items: center; font: var(--sys-font-detail-3); align-self: flex-end;}
.mileage_wrap .summary .refund img{width: var(--ref-sizing-150, 12px); height: var(--ref-sizing-150, 12px);}
.mileage_wrap .history{ display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);  border-top: 8px solid var(--border-divider, #FAFAFA);}
.mileage_wrap .history h4{font: var(--sys-font-title-4);}
.mileage_wrap .history ul{border-top: 1px solid var(--border-frame-light, #E6E6E6); display: flex; flex-direction: column;}
.mileage_wrap .history li{display: flex; padding: var(--ref-spacing-250, 20px) 0px;	gap: var(--spacing-vertical-sm, 8px); border-bottom: 1px solid var(--border-frame-light, #E6E6E6); align-items: center;}
.mileage_wrap .history li .left{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px); flex-grow: 1;}
.mileage_wrap .history li strong{font: var(--sys-font-subtitle-3);}
.mileage_wrap .history li span{color: var(--text-disabled, #999); font: var(--sys-font-body-5);}
.mileage_wrap .history li .amount{font: var(--sys-font-title-4); color: var(--content-information-standard, #1F9EDE);}
.mileage_wrap .history li .amount.subtract{color: var(--state-negative-standard, #FA3848);}

/* 마일리지 충전 */
.mileage_recharge{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.mileage_recharge section{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px); background: var(--background-light, #FAFAFA);}
.mileage_recharge section h2{font: var(--sys-font-title-4);}
.mileage_recharge .charge .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.mileage_recharge .charge .input_wrap{display: flex; align-items: center; gap: var(--ref-spacing-50, 4px);}
.mileage_recharge .charge .input_wrap input{text-align: right;}
.mileage_recharge .charge .info{text-align: right; color: var(--content-information-standard, #1F9EDE); font: var(--sys-font-detail-3);}
.mileage_recharge .amount strong{font: var(--sys-font-title-2); color: var(--brand-standard, #F57B00);}
.mileage_recharge .amount strong.caution{color: var(--state-negative-standard, #FA3848); font: var(--sys-font-title-4); opacity: 0.7;}
.mileage_recharge .payment .no_bankbook{display: flex; flex-direction: column; gap: var(--ref-spacing-50, 4px);} 
.mileage_recharge .payment .input_wrap{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.mileage_recharge .payment .input_wrap dl{display: flex; gap: var(--ref-spacing-250, 20px); align-items: center;}
.mileage_recharge .payment .input_wrap dt{width: var(--ref-sizing-700, 56px); color: var(--text-subdued, #595959); font: var(--sys-font-body-6); flex-shrink: 0;}
.mileage_recharge .payment .input_wrap dd{display: flex; flex-grow: 1;}
.mileage_recharge .payment .input_wrap select{width: 100%;}
.mileage_recharge .payment .input_wrap input{width: 100%;}

@media(max-width: 390px){
	.mileage_recharge .payment .input_wrap dl{flex-direction: column; align-items: flex-start; gap: var(--spacing-vertical-sm, 8px);}
	.mileage_recharge .payment .input_wrap dt{flex-basis: auto;}
	.mileage_recharge .payment .input_wrap dd{width: 100%;}
}

/* 마일리지 선물 */
.mileage_gift{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.mileage_gift section{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px); background: var(--background-light, #FAFAFA);}
.mileage_gift section h2{font: var(--sys-font-title-4); display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.mileage_gift section h2 p{color: var(--text-subdued, #595959); font: var(--sys-font-detail-1);}
.mileage_gift .mileage{flex-direction: row; align-items: center; justify-content: space-between;}
.mileage_gift .mileage h2{font: var(--sys-font-subtitle-3);}
.mileage_gift .mileage .contents{display: flex; align-items: center; color: var(--brand-standard, #F57B00);}
.mileage_gift .mileage .contents strong{font: var(--sys-font-title-2);}
.mileage_gift .gift .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.mileage_gift .gift .input_wrap{display: flex; align-items: center; gap: var(--ref-spacing-50, 4px);}
.mileage_gift .gift .input_wrap input{text-align: right;}
.mileage_gift .gift .info{text-align: right; color: var(--content-information-standard, #1F9EDE); font: var(--sys-font-detail-3);}
.mileage_gift .member_info .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.mileage_gift .member_info .input_wrap{position: relative;}
.mileage_gift .member_info .input_wrap button{border: none; background: url('/html/img/icon/search_primary.svg')no-repeat center; width: var(--ref-sizing-600, 48px); height: var(--ref-sizing-600, 48px); font-size: 0; position: absolute; right: 0; top: 4px; cursor: pointer;}
.mileage_gift .member_info .member_card{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); border-radius: var(--ref-radius-sm, 4px); border: 1px solid var(--brand-standard, #F57B00); background: var(--ref-color-grey-white, #FFF); flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.mileage_gift .member_info .member_card li{ display: flex; gap: var(--spacing-vertical-sm, 8px); font: var(--sys-font-body-5);}
.mileage_gift .member_info .member_card strong{color: var(--text-subdued, #595959); width: var(--ref-sizing-800, 64px);}

/* 마일리지 환불 */
.mileage_refund{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.mileage_refund section{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px); background: var(--background-light, #FAFAFA);}
.mileage_refund section h2{font: var(--sys-font-title-4); display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.mileage_refund section h2 p{color: var(--text-subdued, #595959); font: var(--sys-font-detail-1);}
.mileage_refund .mileage{flex-direction: row; align-items: center; justify-content: space-between;}
.mileage_refund .mileage h2{font: var(--sys-font-subtitle-3);}
.mileage_refund .mileage .contents{display: flex; align-items: center; color: var(--brand-standard, #F57B00);}
.mileage_refund .mileage .contents strong{font: var(--sys-font-title-2);}
.mileage_refund .refund .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.mileage_refund .refund .input_wrap{display: flex; align-items: center; gap: var(--ref-spacing-50, 4px);}
.mileage_refund .refund .input_wrap input{text-align: right;}
.mileage_refund .refund .info{text-align: right; color: var(--content-information-standard, #1F9EDE); font: var(--sys-font-detail-3);}
.mileage_refund .amount .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.mileage_refund .amount li{display: flex; align-items: center; justify-content: space-between;}
.mileage_refund .amount li p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6);}
.mileage_refund .amount li strong{font: var(--sys-font-detail-1);}
.mileage_refund .amount li:last-child{padding-top: var(--spacing-vertical-md, 12px); border-top: 1px solid var(--border-frame-light, #E6E6E6);}
.mileage_refund .amount li:last-child p{color: var(--text-default, #1A1A1A); font: var(--sys-font-subtitle-3);}
.mileage_refund .amount li:last-child strong{color: var(--text-default, #1A1A1A); font: var(--sys-font-title-2); color: var(--brand-standard, #F57B00);}
.mileage_refund .account_info .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.mileage_refund .account_info dl{display: flex; gap: var(--ref-spacing-250, 20px); align-items: center;}
.mileage_refund .account_info dt{width: var(--ref-sizing-700, 56px); color: var(--text-subdued, #595959); font: var(--sys-font-body-6); flex-shrink: 0;}
.mileage_refund .account_info dd{display: flex; flex-grow: 1;}
.mileage_refund .account_info select{width: 100%;}
.mileage_refund .account_info input{width: 100%;}


/* 이벤트 */
.event_wrap {display: flex; flex-direction: column;}
.event_wrap .list_wrap{display: flex; flex-direction: column; border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.event_wrap .list{display: flex; padding: var(--ref-spacing-250, 20px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-sm, 8px); cursor: pointer; user-select: none;}
.event_wrap .list .date{color: var(--text-disabled, #999); font: var(--sys-font-body-5);}
.event_wrap .list .strong{font: var(--sys-font-subtitle-3);}
.event_wrap .contents{display: flex; padding: 0px var(--container-side, 16px) var(--ref-spacing-250, 20px) var(--container-side, 16px); color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}

/* 공지사항 */
.notice_wrap {display: flex; flex-direction: column;}
.notice_wrap .list_wrap{display: flex; flex-direction: column; border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.notice_wrap .list{display: flex; padding: var(--ref-spacing-250, 20px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-sm, 8px); cursor: pointer; user-select: none;}
.notice_wrap .list .date{color: var(--text-disabled, #999); font: var(--sys-font-body-5);}
.notice_wrap .list .strong{font: var(--sys-font-subtitle-3);}
.notice_wrap .contents{display: flex; padding: 0px var(--container-side, 16px) var(--ref-spacing-250, 20px) var(--container-side, 16px); color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}

/* PUSH 알림 설정 */
.setting_wrap{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column;}

/* 1:1 문의 */
.inquiry_wrap{display: flex; flex-direction: column;}
.inquiry_wrap .write_wrap{padding: var(--container-padding, 16px) var(--container-side, 16px); border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.inquiry_wrap .list_wrap{display: flex; flex-direction: column; border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.inquiry_wrap .list{display: flex; padding: var(--ref-spacing-250, 20px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-sm, 8px); cursor: pointer; user-select: none;}
.inquiry_wrap .list .top{display: flex; align-items: center; gap: var(--spacing-horizontal-sm, 8px);}
.inquiry_wrap .list .top .state{font: var(--sys-font-body-6);}
.inquiry_wrap .list .top .state.waiting{color: var(--state-caution-standard, #FA0);}
.inquiry_wrap .list .top .state.complete{color: var(--state-positive-standard, #39C674);}
.inquiry_wrap .list .top .date{color: var(--text-disabled, #999); font: var(--sys-font-body-5);}
.inquiry_wrap .list .title{font: var(--sys-font-subtitle-3);}
.inquiry_wrap .contents{display: flex; padding: 0px var(--container-side, 16px) var(--ref-spacing-250, 20px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.inquiry_wrap .contents p{color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}
.inquiry_wrap .contents .btn_wrap{display: flex; justify-content: flex-end; gap: var(--spacing-horizontal-sm, 8px);}
.inquiry_wrap .contents .answer{display: flex; padding: var(--container-side, 16px) var(--container-padding, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.inquiry_wrap .contents .answer .top{display: flex; align-items: center; justify-content: space-between;}
.inquiry_wrap .contents .answer .top strong{font: var(--sys-font-body-6);}
.inquiry_wrap .contents .answer .top .date{font: var(--sys-font-body-5); color: var(--text-disabled, #999);}
.inquiry_wrap .contents .answer p{color: var(--text-default, #1A1A1A);}

.inquiry_write_wrap .input_wrap{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-xl, 24px);}
.inquiry_write_wrap dl{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.inquiry_write_wrap dt{color: var(--text-subdued, #595959); font: var(--sys-font-body-6);}

/* 약관 */
.agree_contents{padding: var(--container-padding, 16px) var(--container-side, 16px); font: var(--sys-font-body-5);}

/* 내 주변 세차장 */
.car_wash_wrap .filter{position: fixed; top: var(--header-height); display: flex; padding: var(--ref-spacing-50, 4px) var(--container-side, 16px) var(--container-padding, 16px) var(--container-side, 16px); align-items: center;gap: var(--ref-spacing-100, 8px); background: var(--background-onsurface, #FFF); margin: -1px 0 0 0; z-index: 1000; width: 100%; overflow-x: auto; max-width: 1024px;}
.car_wash_wrap .filter{position: fixed; top: var(--header-height); display: flex; padding: var(--ref-spacing-50, 4px) var(--container-side, 16px) var(--container-padding, 16px) var(--container-side, 16px); align-items: center;gap: var(--ref-spacing-100, 8px); background: var(--background-onsurface, #FFF); margin: -1px 0 0 0; z-index: 1000; width: 100%; overflow-x: auto;}
.car_wash_wrap .list_wrap{width: 100%; max-width: 1024px; padding-top: var(--ref-spacing-200, 16px); border-radius: 16px 16px 0px 0px; background: var(--background-onsurface, #FFF); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12); padding-bottom: var(--navigation-height); margin-top: 1px;}
.car_wash_wrap .list_wrap .comp-store-list:not(:last-child){border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}


/* 지도 맵 선택 */
.choose_map_app ul{display: flex;}
.choose_map_app ul li {display: flex;}
.choose_map_app li {flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column; align-items: center; gap: var(--ref-spacing-100, 8px); font: var(--sys-font-button-xs);}
.choose_map_app li button {display:flex; outline: none; border: none; background: none; flex-direction: column; align-items: center; gap: var(--ref-spacing-100, 8px); font: var(--sys-font-button-xs); color:var(--text-default);}
.choose_map_app li button img{border-radius: var(--ref-radius-200, 16px); width: var(--ref-sizing-650, 52px); border: 1px solid var(--border-frame-light, #E6E6E6);}

/* 세차장 검색 */
.search_wrap{position: fixed; width: 100%; max-width: 1024px; height: 100%; background: var(--background-onsurface, #FFF); z-index: 10001;}
.search_wrap .header .header_fixed{border-bottom: none; padding: 0px var(--container-side, 16px) 0px var(--ref-spacing-100, 8px);}
.search_wrap .container {flex-grow: 1; display: flex; flex-direction: column;}
.search_wrap .contents{display: flex; padding: 0px var(--container-side, 16px); flex-direction: column;}
.search_wrap .contents li{display: flex; padding: var(--ref-spacing-150, 12px) 0px; justify-content: space-between; align-items: center;}
.search_wrap .contents li p{font: var(--sys-font-body-3);}
.search_wrap .contents li span{font: var(--sys-font-body-5); color: var(--text-subdued, #595959);}

/* 마이페이지 */
.mypage_wrap{display: flex; flex-direction: column; padding-bottom: var(--ref-spacing-800, 0px);}
.mypage_wrap .profile{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.mypage_wrap .profile strong{font: var(--sys-font-title-2);}
.mypage_wrap .profile strong span{font: var(--sys-font-subtitle-1);}
.mypage_wrap .profile .benefits{display: flex; gap: var(--spacing-horizontal-md, 12px); align-items: center;}
.mypage_wrap .profile .benefits hr{width: 1px; height: var(--ref-sizing-250, 20px); background: var(--border-frame-dark, #D9D9D9); border: none;}
.mypage_wrap .profile .benefits dl{flex-grow: 1; flex-basis: 0; display: flex; align-items: center; justify-content: space-between;}
.mypage_wrap .profile .benefits dt{color: var(--text-subdued, #595959); font: var(--sys-font-detila-2);}
.mypage_wrap .profile .benefits dd{color: var(--brand-standard, #F57B00); font: var(--sys-font-body-5); display: flex; align-items: center;}
.mypage_wrap .profile .benefits dd a{font: var(--sys-font-title-3); border-bottom: 1px solid var(--brand-standard, #F57B00);}
.mypage_wrap .non_member{display: flex; padding: var(--spacing-vertical-md, 12px) var(--container-side, 16px) var(--spacing-vertical-xl, 24px) var(--container-side, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-xl, 24px);}
.mypage_wrap .non_member strong{font: var(--sys-font-subtitle-1);}
.mypage_wrap .non_member .btn_wrap{display: flex; gap: var(--spacing-horizontal-md, 12px);}
.mypage_wrap .non_member .btn_wrap [class*="button"]{flex-grow: 1; flex-basis: 0;}
.mypage_wrap ul{display: flex; padding: var(--ref-spacing-100, 8px) 0px;flex-direction: column;}
.mypage_wrap ul:not(:nth-of-type(1)){border-top: 8px solid var(--border-divider, #FAFAFA);}
.mypage_wrap li{display: flex; height: var(--ref-sizing-650, 52px); padding: 0px var(--container-side, 16px); align-items: center;}
.mypage_wrap li a{flex-grow: 1; height: 100%; display: flex; align-items: center;}

/* 세차장 정보 */
.store_view{display: flex; flex-direction: column;}
.store_view .shop_img{position: relative; width: 100%;}
.store_view .shop_img .swiper_fraction{position: absolute; left: auto; top: auto; right: 8px; bottom: 8px; display: flex; justify-content: center; width: var(--ref-sizing-500, 40px); height: 22px; border-radius: var(--ref-radius-200, 16px); background: rgba(0, 0, 0, 0.50); font-size: 11px; font-weight: 500; color: var(--ref-color-grey-white, #FFF); gap: 3px; line-height: 24px;}
.store_view .shop_img img{width: 100%; /*height: 260px;*/height: 335.66px; object-fit: cover; vertical-align: top;}
.store_view section{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); border-top: 8px solid var(--border-divider, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.store_view section h2{font: var(--sys-font-title-3);}
.store_view section .contents{display: flex; flex-direction: column;}
.store_view .fee_detail{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.store_view .fee_detail li{display: flex; align-items: center; display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); }
.store_view .fee_detail li p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6); display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); flex-grow: 1;}
.store_view .fee_detail li p:after{content: ''; display: block; width: 1px; flex-grow: 1; height: 1px; border-top: 1px dashed  var(--border-frame-dark, #D9D9D9);}
.store_view .fee_detail li strong{font: var(--sys-font-detail-1);}

.store_view .summary{display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px) var(--spacing-vertical-md, 12px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-sm, 8px); border: none;}
.store_view .summary .service{display: flex; gap: 4px var(--ref-spacing-50, 4px); flex-wrap: wrap;}
.store_view .summary .service li{display: flex; height: var(--ref-sizing-300, 24px); padding: 0px var(--ref-spacing-100, 8px); border-radius: var(--ref-radius-50, 4px); background: var(--background-dark, #F2F2F2); justify-content: center; align-items: center; font: var(--sys-font-button-xs); color: var(--text-subdued, #595959);}
.store_view .summary .service li.partner{background: var(--content-accent-light, #B447EB); color: var(--ref-color-grey-white, #FFF);}
.store_view .summary .info{display: flex; flex-direction: column;}
.store_view .summary .info li{display: flex; padding: var(--spacing-vertical-md, 12px) 0px; gap: var(--ref-spacing-100, 8px); color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}
.store_view .summary .info li:not(:last-child){border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.store_view .summary .info li img{width: 18px; flex-shrink: 0;}
.store_view .summary .info li a{color: var(--brand-standard, #F57B00); display: flex; align-items: center;}
.store_view .summary .info li a img{width: var(--ref-sizing-150, 12px); height: var(--ref-sizing-150, 12px);}

.store_view .fee_info .my_car_info{display: flex; flex-direction: column; padding-bottom: var(--ref-spacing-100, 0px);}
.store_view .fee_info .card{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--ref-spacing-250, 20px);}
.store_view .fee_info .card .title{display: flex; align-items: center; justify-content: space-between;}
.store_view .fee_info .card .title strong{font: var(--sys-font-subtitle-4);}
.store_view .fee_info .card .title p{color: var(--text-disabled, #999); font: var(--sys-font-detail-3);}
.store_view .fee_info .card ul{display: flex; flex-direction: column; gap: var(--ref-spacing-200, 16px);}
.store_view .fee_info .card li{display: flex; gap: var(--ref-spacing-100, 8px);}
.store_view .fee_info .card li span{color: var(--text-disabled, #999); font: var(--sys-font-body-5);}
.store_view .fee_info .card li span{color: var(--text-disabled, #999); font: var(--sys-font-body-5);}
.store_view .fee_info .my_car_info .fee_detail{padding: var(--container-padding, 16px) 0px;}

.store_view .rate_table{display: flex; padding: var(--ref-spacing-300, 24px) 0px; border-top: 1px solid var(--border-frame-light, #E6E6E6); flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.store_view .rate_table .contents{gap: var(--spacing-vertical-xl, 24px);}
.store_view .rate_table h3{font: var(--sys-font-title-4);}
.store_view .rate_table .rate_cate{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.store_view .rate_table .rate_cate dl{display: flex; flex-direction: column;}
.store_view .rate_table .rate_cate dt{font: var(--sys-font-body-4);}
.store_view .rate_table .rate_cate dd{color: var(--text-subdued, #595959); font: var(--sys-font-detail-1);}
.store_view .rate_table table tr{border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.store_view .rate_table table th, .store_view .rate_table table td{padding: var(--ref-spacing-100, 8px); font: var(--sys-font-detail-3); text-align: center;}
.store_view .rate_table .domestic th{background: var(--content-information-lighter, #E9F5FC);}
.store_view .rate_table .domestic tr:first-child th:first-child{background: var(--content-information-light, #D2ECF9)}
.store_view .rate_table .income th{background: var(--content-accent-standard, #F9F1FD);}
.store_view .rate_table .income tr:first-child th:first-child{background: var(--content-accent-lighter, #ECD1FA);}
.store_view .rate_table .fee_detail{padding-top: var(--ref-spacing-50, 4px);}

.store_view .store_info .contents{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--ref-spacing-250, 20px); font: var(--sys-font-body-5); white-space: normal;}

/* 세차장 상세, 리뷰 페이지 공통 */
.review{display: flex; flex-direction: column; padding: var(--spacing-vertical-xl, 24px) 0px; gap: var(--spacing-vertical-md, 12px);}
.review h2{padding: 0px var(--container-side, 16px);}
.review .review_score{margin: 0px var(--container-side, 16px); display: flex; align-items: center; justify-content: center; background: var(--background-light, #FAFAFA); gap: 0px var(--spacing-horizontal-sm, 8px); flex-wrap: wrap; padding: var(--ref-spacing-250, 20px) 0px;}
.review .review_score .star{display: flex; position: relative;}
.review .review_score .star .fill{position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; object-position: left;}
.review .review_score .score_wrap{display: flex; justify-content: center; align-items: center; gap: var(--spacing-horizontal-sm, 8px); color: var(--text-disabled, #999); font: var(--sys-font-title-2);}
.review .review_score .score_wrap .score{color: var(--text-default, #1A1A1A);}
.review .list_wrap{border-top: 1px solid var(--border-frame-light, #E6E6E6);}
.review [class*="button"]{margin: 0px var(--container-side, 16px);}


/* 예약 */
.reservation_write{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-xl, 24px);}
.reservation_write section{ display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.reservation_write section h2{display: flex; align-items: center; justify-content: space-between; font: var(--sys-font-title-4);}
.reservation_write section h2 strong{display: flex; align-items: center; gap: var(--ref-spacing-50, 4px);}
.reservation_write section h2 span{color: var(--text-disabled, #999); font: var(--sys-font-body-6);}
.reservation_write .my_car_wrap .contents{display: flex; gap: var(--spacing-horizontal-sm, 8px);}
.reservation_write .my_car_wrap select{flex-grow: 1; flex-basis: 0;}
.reservation_write .car_wash_wrap .contents{display: flex; flex-direction: column; gap: var(--ref-spacing-200, 16px);}
.reservation_write .car_wash_wrap li{display: flex; align-items: center; gap: var(--ref-spacing-50, 4px);}
.reservation_write .car_wash_wrap li span{color: var(--text-disabled, #999); font: var(--sys-font-body-5)}
.reservation_write .date_wrap .contents{display: flex; padding: var(--ref-spacing-100, 8px) 0px;}
.reservation_write .date_wrap label{flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-vertical-sm, 8px); cursor: pointer;}
.reservation_write .date_wrap label span{color: var(--text-subdued, #595959); font: var(--sys-font-subtitle-4);}
.reservation_write .date_wrap label strong{font: var(--sys-font-subtitle-1); width: var(--ref-sizing-500, 40px); height: var(--ref-sizing-500, 40px); display: flex; align-items: center; justify-content: center; border-radius: var(--ref-radius-300, 24px);}
.reservation_write .date_wrap input[type="radio"]:checked + label span{color: var(--brand-standard, #F57B00);}
.reservation_write .date_wrap input[type="radio"]:checked + label strong{background: var(--brand-standard, #F57B00); color: var(--ref-color-grey-white, #FFF);}
.reservation_write .date_wrap label:before, .reservation_write .date_wrap label:after{display: none;}
.reservation_write .time_wrap .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-xl, 24px);}
.reservation_write .time_wrap .time{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.reservation_write .time_wrap .time p{color: var(--text-subdued, #595959); font: var(--sys-font-detail-2);}
.reservation_write .time_wrap .time .list{display: flex; flex-wrap: wrap; gap: var(--spacing-horizontal-sm, 8px);}
.reservation_write .time_wrap .time .list label{flex-basis: calc(25% - 6px); padding: 0;}
.reservation_write .sum_wrap .contents{display: flex; flex-direction: column; gap: var(--ref-spacing-200, 16px);}
.reservation_write .fee_detail{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.reservation_write .fee_detail li{display: flex; align-items: center; display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); }
.reservation_write .fee_detail li p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6); display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); flex-grow: 1;}
.reservation_write .fee_detail li p:after{content: ''; display: block; width: 1px; flex-grow: 1; height: 1px; border-top: 1px dashed  var(--border-frame-dark, #D9D9D9);}
.reservation_write .fee_detail li strong{font: var(--sys-font-detail-1);}
.reservation_write .amount_wrap{display: flex; padding-top: var(--spacing-vertical-md, 12px); border-top: 1px solid var(--border-frame-light, #E6E6E6); justify-content: flex-end; color: var(--brand-standard, #F57B00); font: var(--sys-font-subtitle-2);}
.reservation_write .amount_wrap strong{margin-left: 3px;}

@media(max-width: 360px){
	.reservation_write .my_car_wrap .contents{flex-direction: column;}
	.reservation_write .my_car_wrap select{flex-basis: auto;}

	.reservation_write .time_wrap .time .list label{flex-basis: calc(33.3% - 5.3px);}
}

/* 결제 */
.order{display: flex; padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}
.order section{ display: flex; padding: var(--spacing-vertical-xl, 24px) var(--container-side, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.order section h2{display: flex; align-items: center; justify-content: space-between; font: var(--sys-font-title-4);}
.order .fee_detail{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.order .fee_detail li{display: flex; align-items: center; display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); }
.order .fee_detail li p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6); display: flex; align-items: center; gap: var(--ref-spacing-150, 12px); flex-grow: 1;}
.order .fee_detail li p:after{content: ''; display: block; width: 1px; flex-grow: 1; height: 1px; border-top: 1px dashed  var(--border-frame-dark, #D9D9D9);}
.order .fee_detail li strong{font: var(--sys-font-detail-1);}
.order .date .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.order .date .contents dl{display: flex; align-items: center; gap: var(--spacing-horizontal-sm, 8px); font: var(--sys-font-body-6);}
.order .date .contents dt{color: var(--text-subdued, #595959); }
.order .discount .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.order .discount dl{display: flex; align-items: center; gap: var(--ref-spacing-250, 20px);}
.order .discount dt{color: var(--text-subdued, #595959); font: var(--sys-font-body-6); flex-shrink: 0;}
.order .discount dd{display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing-horizontal-sm, 8px); flex-grow: 1;}
.order .discount .price{display: flex; align-items: center; font: var(--sys-font-body-6);}
.order .discount .apply_coupon{display: flex; height: var(--ref-sizing-400, 32px); padding: 0px var(--spacing-horizontal-sm, 8px) 0px var(--spacing-horizontal-md, 12px); justify-content: center; align-items: center; gap: var(--ref-spacing-50, 4px); border-radius: var(--ref-radius-sm, 4px); background: var(--background-dark, #F2F2F2); cursor: pointer; user-select: none;}
.order .discount .apply_coupon:after{content: ''; display: block; width: 16px; height: 16px; background: url('/html/img/icon/close.svg')no-repeat; background-size: contain;}
.order .discount [class*="button"]{flex-shrink: 0;}
.order .discount .mileage{display: flex; flex-direction: column; gap: var(--spacing-vertical-sm, 8px);}
.order .discount .mileage .price{gap: var(--ref-spacing-50, 4px); position: relative; display: flex; flex-direction: column; align-items: flex-end;}
.order .discount .mileage .price .unit{position: absolute; right: 8px; top: 10px;}
.order .discount .mileage input{height: var(--ref-sizing-550, 44px);}
.order .discount .mileage .info{display: flex; flex-direction: column; align-items: flex-end; font: var(--sys-font-detail-3); color: var(--text-subdued, #595959);}
.order .discount .mileage .info .min{color: var(--content-information-standard, #1F9EDE);}
.order .discount .mileage .info .caution{color: var(--state-negative-standard);}
.order .sum_wrap .contents{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.order .sum_wrap ul{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.order .sum_wrap li{display: flex; align-items: center; justify-content: space-between;}
.order .sum_wrap li p{color: var(--text-subdued, #595959); font: var(--sys-font-body-6);}
.order .sum_wrap li strong{font: var(--sys-font-detail-1);}
.order .sum_wrap .amount{display: flex; padding-top: var(--spacing-vertical-md, 12px); border-top: 1px solid var(--border-frame-light, #E6E6E6); justify-content: space-between; align-items: center;}
.order .sum_wrap .amount p{font: var(--sys-font-subtitle-3);}
.order .sum_wrap .amount strong{color: var(--brand-standard, #F57B00); font: var(--sys-font-title-2);}
.order .payment .input_wrap{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.order .payment .input_wrap dl{display: flex; gap: var(--ref-spacing-250, 20px); align-items: center;}
.order .payment .input_wrap dt{width: var(--ref-sizing-700, 56px); color: var(--text-subdued, #595959); font: var(--sys-font-body-6); flex-shrink: 0;}
.order .payment .input_wrap dd{display: flex; flex-grow: 1;}
.order .payment .input_wrap select{width: 100%;}
.order .payment .input_wrap input{width: 100%;}
.order_coupon{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.order_coupon input[type="radio"]+label:before, .order_coupon input[type="radio"]+label:after{display: none;}

@media(max-width: 390px){
	.order .payment .input_wrap dl{flex-direction: column; align-items: flex-start; gap: var(--spacing-vertical-sm, 8px);}
	.order .payment .input_wrap dt{flex-basis: auto;}
	.order .payment .input_wrap dd{width: 100%;}
}
@media(max-width: 500px){
    .store_view .shop_img img {height: 67vw;}
}

/* 결제 완료 */
.order_end{display: flex; position: relative;	padding: var(--container-padding, 16px) var(--container-side, 16px); flex-direction: column; flex-grow: 1; align-items: center; justify-content: center; text-align: center;}
.order_end h6{font: var(--sys-font-title-2);}
.order_end p{color: var(--text-subdued, #595959); color: var(--sys-font-body-5); margin-top: var(--spacing-vertical-md, 12px);}