.page-login {min-height: calc(var(--vh, 1vh) * 100);display: flex;flex-direction: column;background: var(--color-bg);}

.page-login_wrap {flex: 1;display: grid;align-items: center;
    padding: calc(var(--sp-20) + var(--safe-top)) var(--sp-15)
            calc(var(--sp-20) + var(--safe-bottom)) var(--sp-15);
}
.login-card {width: 100%;max-width: 420px;margin: 0 auto;}
.login {display: grid;gap: 1rem;}
.login-txt{display: grid;gap: 0.5rem}
.login_logo img{height: 50px;}
.login_title {font-size: var(--fs-26);font-weight: var(--fw-700);line-height: var(--lh-tight);}

.login_desc {font-size: var(--fs-16);color: var(--color-muted);line-height: var(--lh-relaxed);}

.login-form {display: grid;gap: 50px;margin-top: 40px;}

.login-field_wrap {display: grid;gap: 24px;}
.login-label {font-size: var(--fs-12);color: var(--color-muted);}
.login-input {width: 100%;min-height: var(--tap-min);border-bottom: 1px solid var(--color-border);background: #fff;font-size: 16px;line-height: 1;}
.login-input::placeholder {color: rgba(0,0,0,.35);}
.login-input:focus {border-color: rgba(0,0,0,.25);}
.login-inputwrap {position: relative;}
.login-inputwrap .login-input {padding-right: 52px;}
.login-eye {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);height: 36px;background: #fff;font-size: var(--fs-12);font-weight: var(--fw-700);padding: 0;}
.login-options {display: flex;align-items: center;justify-content: space-between;gap: 10px;margin-top: 16px;}
.login-check {display: inline-flex;align-items: center;gap: 4px;font-size: var(--fs-14);color: rgba(0,0,0,.8);}
.login-check input[type="checkbox"] {appearance: none;-webkit-appearance: none;width: 18px;height: 18px;border-radius: 4px;border: 1px solid var(--color-border);background-color: #fff;position: relative;display: inline-block;vertical-align: middle;cursor: pointer;}
.login-check input[type="checkbox"]:checked {border-color: var(--color-primary);background-color: var(--color-primary);}
.login-check input[type="checkbox"]:checked::after {content: "";position: absolute;top: 50%;left: 50%;width: 6px;height: 6px;border-radius: 2px;background-color: #fff;transform: translate(-50%, -50%);}
.login-link {font-size: var(--fs-14);color: rgba(0,0,0,.8);}
.login-message {display: none;padding: 5px;font-size: var(--fs-13);line-height: var(--lh-relaxed);}
.login-message.is-show {display: block;}
.login-message.is-error {color: var(--redColor);position: absolute;}
.login-message.is-success {border-color: rgba(0, 100, 255, .28);background: rgba(0, 100, 255, .08);}
.login-actions {display: grid;gap: 10px;}
.login-btn {min-height: var(--tap-min);width: 100%;border-radius: 8px;border: 1px solid var(--color-border);background: #fff;font-weight: var(--fw-700);}
.login-btn[disabled] {opacity: .45;}
.login-btn.is-loading {position: relative;pointer-events: none;opacity: .8;}
.login-error-icon {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);width: 18px;height: 18px;border-radius: 999px;background: #fff;border: 1px solid var(--color-danger);color: var(--color-danger);font-size: 12px;font-weight: 700;line-height: 18px;text-align: center;display: none;}

.login-error-icon.pass-error{right: 38px;}
.login-field {position: relative;}
.login-field.is-error .login-error-icon {display: block;}
.login-field.is-error .login-input {border-color: var(--color-danger);}

.login-inputwrap.is-error .login-error-icon {display: block;}
.login-inputwrap.is-error .login-input {border-color: var(--color-danger);}
.login-btn.is-loading::after {content: "";width: 16px;height: 16px;border-radius: 999px;border: 2px solid rgba(255,255,255,.55);border-top-color: rgba(255,255,255,1);position: absolute;right: 14px;top: 50%;transform: translateY(-50%);animation: spin 0.7s linear infinite;}
.login-bottom .join{display: flex; font-size: var(--fs-14); justify-content: center; align-items: center; color: var(--color-muted);;}

.join-btn {min-height: var(--tap-min);width: 100%;border-radius: 8px;border: 1px solid var(--color-border);background: #fff;font-weight: var(--fw-700);}
.join-btn[disabled]{background: #EBEEF2 !important; color: #6B7684  !important; border-color: #EBEEF2 !important;}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.login-foot {margin-top: 14px;text-align: center;font-size: var(--fs-12);color: var(--color-muted);line-height: var(--lh-relaxed);}

@supports (-webkit-touch-callout: none) {
  .page-login_wrap {
      padding-top: calc(var(--sp-16) + var(--safe-top));
  }
}



/* 로그인 후 메인 */

.page-main_wrap{gap: 24px;display: grid;}
.main-top {display: flex;align-items: center;justify-content: space-between;gap: 12px;}
.main-title {font-size: var(--fs-16);font-weight: var(--fw-700);line-height: 1.2;}
.main-title span{margin-right: 2px;}
.main-sub {margin-top: 4px;}

.noti-btn{position: relative;}
.noti-btn_icon {font-size: 20px;line-height: 1;}
.noti-dot {position: absolute;top: 0;right: 2px;width: 4px;height: 4px;border-radius: 999px;background: var(--color-danger);display: none;}

.noti-btn.has-badge .noti-dot {display: block;}
.reserve {display: grid;gap: 8px;}
.reserve .btn {width: 100%;display: flex;justify-content: space-between;align-items: center;}
.reserve .btn span{margin-right: 8px;}

.history{display: grid;gap: 16px;}
.history-head {align-items: baseline;}
.history-title {margin: 0;font-size: var(--fs-22);font-weight: var(--fw-700);}
.history-number {font-size: 12px;color: rgba(0,0,0,.6);}
.history-card_top {display: flex;align-items: flex-start;justify-content: space-between;gap: 10px;}
.history-card_title {font-size: 15px;font-weight: 700;}
.history-card_meta {margin-top: 8px;font-size: var(--fs-22);font-weight: 600;}
.history-card_bottom {display: flex;align-items: center;justify-content: space-between;gap: 10px;}

.history-list {display: grid;gap: 10px;}

.card_wrap.wash{border: 1px solid var(--color-primary);}
.card_wrap .btn{width: 100%;border: 0;border-top: 1px solid var(--color-border);border-top-left-radius: 0;border-top-right-radius: 0;font-size: var(--fs-14);height: 40px;font-weight: var(--fw-500);color: var(--color-primary);}
.card_wrap.wash .btn{background: var(--color-primary);border-top: 1px solid var(--color-primary);color: #fff;}
.card_wrap.wash-completed,
.card_wrap.cancel,
.card_wrap.reject{
  background-color: #F2F4F6;
}
.card_wrap.wash-completed .history-card_meta,
.card_wrap.cancel .history-card_meta,
.card_wrap.reject .history-card_meta,
.card_wrap.wash-completed .row,
.card_wrap.cancel .row,
.card_wrap.reject .row{
  opacity: 0.3;
}

.history-info {margin-top: 8px;display: grid;gap: 5px;}
.history-info:first-child{margin-top: 0;}
.history-info_label {font-size: 12px;color: rgba(0,0,0,.55);}
.history-info div{font-size: 16px;font-weight: 500;display: flex;align-items: center;color: #4E5968;}
.history-info_value span{padding-right: 9px;position: relative;margin-right: 8px;}
.history-info_value span:last-child{margin-right: 0; padding-right: 0;}
.history-info_value span:last-child::after{display: none;}
.history-info_value span::after{content: ''; width: 1px; height: 12px; background: #D1D6DB;position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.history-info_value::before{content: '';background: url(/img/ico_car-d1b27e709164ea1f1803a8daf8ed38c5.png) no-repeat;width: 24px;height: 24px;display: block;margin-right: 8px;}
.history-info_map::before{content: '';background: url(/img/ico_map-91669a30dd5d6469a9c7e3f506b58295.png) no-repeat;width: 24px;height: 24px;display: block;margin-right: 8px;}
.history-info_action::before{content: '';background: url(/img/ico_key-b1bcf585da5cfb3a1728e2bc27c2fbae.png) no-repeat;width: 24px;height: 24px;display: block;margin-right: 8px;}
.history-info_request::before{content: '';background: url(/img/ico_request-14b45d495726c193715c45e9a7531713.png) no-repeat;width: 24px;height: 24px;display: block;margin-right: 8px;}

.notice-item_desc{margin-top: 5px;}

.message{ font-size: var(--fs-14);color: #8B95A1;text-align: center;}

/* 세차 예약하기 */
.nodt_wrap.nodt_car{text-align: center;}
.select-card .history-info{display: flex; align-items: center; justify-content: space-between; width: 100%;}
.select-card .history-info .history-info_value{display: flex; flex-direction: column; align-items: start; gap:4px}
.select-card .history-info .history-info_value .color-b{font-weight: 600;}
.select-card .history-info::before{content: '';background: url(/img/ico_car_color-94ad77a3803339e822d95fc1bfd2ad43.png) no-repeat;width: 24px;height: 24px;display: block;margin-right: 8px;}
.select-card .history-info .history-info_value::before{display: none;}
.select-card .history-info .btn-s{max-width: 44px;margin-left: auto;}
.select-card.card_item{padding: 16px; border: 1px solid #EBEEF2; border-radius: 8px;}
.select-card.select-card.on{    border: 1px solid var(--color-primary);}
.select-card.select-card.on .btn-s{color: #fff !important; background: var(--color-primary) !important; border-color: var(--color-primary) !important;}

.tab_cont{display: none;}
.tab_cont.on{display: block;}
.tab_cont .make li{padding: 13px 16px; background: #fff;}
.tab_cont .make li span{display: flex; align-items: center;}
.tab_cont .make li span img{margin-right: 8px;}
.tab_cont .make li.on{background: #EFF6FF;}

.car-info .car-info_item{margin-top: 24px;}
.car-info .car-info_item:first-child{margin-top: 0;}
.car-info .car-info_item .gu{font-size: var(--fs-12); color: var(--color-primary);}
.car-info .car-info_item.req .gu::after {display: inline-block; content: "*"; font-size: 0.8125rem;}
.car-info .car-info_item .nae{font-weight: 700;}
.car-info .car-info_item .nae input{width: 100%; padding: 13px 0; border-bottom: 1px solid #D1D6DB;}
.car-info .car-info_item .nae input::placeholder{font-weight: 500;}
.car-info .car-info_item .nae span{font-weight: 500;}

.car-message{margin-top: 8px; color: #D22030; font-size: var(--fs-14);}

/* 방법 */
.car-info_box{display: flex; flex-wrap: wrap;gap: 8px;}
.car-info_box .btn_wrap{ display: inline-block; }
.car-info_box .btn_wrap input{display: none;}
.car-info_box .btn_wrap label{display: block; padding: 8px 12px; border: 1px solid #D1D6DB;border-radius: 8px;}
.car-info_box .btn_wrap input:checked + label {background: #EFF6FF;border-color: var(--color-primary);color: var(--color-primary);}
.input-other{display: none;}

/* 요청사항 */
.request-info .tit{font-size: var(--fs-16);font-weight: 700;}
.request-info .small{font-size: var(--fs-12); color: var(--color-primary);}
.request-info .nae input{width: 100%;padding: 13px 0;border-bottom: 1px solid #D1D6DB;}
.request-info .request-info_item{margin-top: 16px;}
.request-info .pre{margin-top: 24px; color: #8B95A1; font-size: var(--fs-12); display: flex; align-items: center;}
.request-info .pre::before{content: ''; background: url(/img/ico_pre-a375da7d32b55267683876216576056a.png) no-repeat;width: 16px;height: 16px;display: inline-block;margin-right: 2px;}

/* 예약 확정 */
.history-result .history-info{display: flex;align-items: center;justify-content: space-between;width: 100%;}
.history-result .history-info .btn-s { width: auto; margin-left: auto;}
.history-result .time_date span{font-size: var(--fs-20); font-weight: 700;}

/* 나의예약 */
.status_tab{display: flex;font-size: var(--fs-14); justify-content: space-between;}
.status_tab li{padding: 10px 0; width: 100%; text-align: center;border-bottom: 1px solid #D1D6DB; position: relative;}
.status_tab li.active{font-weight: 700;}
.status_tab li.active::after {content: '';background: #000;width: 100%;height: 2px;position: absolute;bottom: 0;left: 0;}

/* 예약상세 */
.step{display: flex; justify-content: space-between;width: auto; margin: 0 10px;}
.step li{display: flex; flex-direction: column; align-items: center; position: relative; min-width: 46px; gap: 8px; font-size: var(--fs-14); color: #D1D6DB;}
.step li.on{color: var(--color-primary);}
.step .cancel.on{color: #E42939;}
.step li::before{content: ''; width: 50px; height: 2px; background: #EBEEF2; position: absolute; right: 100%; top: 12px;}
.step li:first-child:before{display: none;}

/* 마이페이지 */
.my-info{display: grid; gap: 24px;}
.my-info_item .tit{font-size: var(--fs-14); color: #8B95A1;margin-bottom: 8px;}
.my-info_item ul{display: grid; gap: 8px;}
.my-info_item ul li{display: flex; justify-content: space-between;}
.my-info_item ul li .nae{color: #8B95A1; font-weight: 500;}

/* 비밀번호 변경 */
.password_info .gu{color: var(--color-primary);}
.password_info .nae input {width: 100%;padding: 13px 0;border-bottom: 1px solid #D1D6DB;}
.password_info .pre{margin-top: 24px; color: #8B95A1; font-size: var(--fs-12);display: grid; gap: 3px;}

/* 마이페이지 - 알림 관리 */
.my-alarm-info .my-alarm-item{display: flex; justify-content: space-between; align-items: center;padding: 13px 0;}
.my-alarm-info .my-alarm-item .tit{font-size: var(--fs-20);}
.my-alarm-info .pre {margin-top: 24px;color: #8B95A1;font-size: var(--fs-12);}
.my-alarm-info .pre::before{content: '';background: url(/img/ico_pre-a375da7d32b55267683876216576056a.png) no-repeat;width: 16px;height: 16px;display: block;margin-bottom: 8px;}

/* 마이페이지 - 리뷰 관리 */
.reveiw-wrap{display: grid; gap: 20px; display: none;}
.reveiw-number{font-size: 12px; color: rgba(0, 0, 0, .6);}
.reveiw-head{justify-content: right;}
.reveiw-item{padding: 16px 0; background: #fff; border-bottom: 1px solid #EBEEF2; position: relative;}
.reveiw-item:last-child{border-bottom: 0;}
.reveiw-item .review-desc{margin: 16px 0;}
.reveiw-item .review-star{display: flex; justify-content: space-between; align-items: center;}
.reveiw-item .review-star .star{display: flex; align-items: center;margin-bottom: 0;}
.reveiw-item .review-desc input{border: 1px solid #D1D6DB; width: 100%; border-radius: 8px; padding: 8px 12px;}
.reveiw-item .review-info{display: grid; gap: 4px;}
.reveiw-item .review-info .history-info .time_date{font-weight: 700;}
.reveiw-item .review-info .history-info_value::before{display: none;}
.review-write .star{margin-bottom: 16px;display: flex; gap: 4px;}
.review-write textarea{width: 100%; border: 1px solid #D1D6DB; border-radius: 8px;padding: 16px; min-height: 100px;}
.review-write textarea::placeholder{font-weight: 400;}

/* 날짜 선택 */
.schedule-picker {display: grid;gap: 12px;}
.schedule-header {display: flex;align-items: center;justify-content: center;margin-bottom: 12px;gap: 8px;}
.month-label {font-size: 16px;font-weight: 600;}
.month-btn {width: 32px;display: inline-flex;align-items: center;justify-content: center;margin-bottom: 1px;}
.schedule-weekdays {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;font-size: var(--fs-14);color: #000;}
.schedule-weekdays span:first-child{color: #D22030;}
.schedule-weekdays span:last-child{color: var(--color-primary);}
.schedule-day.is-sun {color: #D22030;}
.schedule-day.is-sat {color: var(--color-primary);}
.schedule-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 4px;}
.schedule-day {height: 40px;border-radius: 8px;display: inline-flex;align-items: center;justify-content: center;font-size: 14px;cursor: pointer;}
.schedule-day.is-empty {cursor: default;}

.schedule-day.is-selected {background: #EFF6FF;border: 1px solid var(--color-primary);color: #000;position: relative;}
.schedule-day.is-selected::after{content: '';background: var(--color-primary);width: 5px;height: 5px;border-radius: 10px;top: 8px;right: 8px;position: absolute;}
.schedule-tit{font-size: var(--fs-16);font-weight: 700;}

.time-select {margin-top: 8px;display: none; }
.time-select_label {font-size: var(--fs-16);font-weight: 700;margin-bottom: 16px;}

.time-select_buttons {display: flex;gap: 8px;}

.time-btn {flex: 1;height: 44px;border-radius: 12px;border: 1px solid var(--color-border);background: var(--color-surface);font-size: 14px;font-weight: 700;}

.time-btn.is-selected {background: #EFF6FF;border-color: var(--color-primary);color: var(--color-primary);}

/* 스켈레톤 */
.skeleton {display: none;width: 100%;}
body.is-loading .skeleton {display: block;}
body.is-loading .history,
body.is-loading .step,
body.is-loading .app-tit,
body.is-loading .history-result,
body.is-loading .comp_wrap,
body.is-loading .nodt_wrap{
  display: none;
}

.skel {position: relative;overflow: hidden;background: rgba(0,0,0,.06);border-radius: 0.6rem;}
.skel::before {content: "";position: absolute;inset: 0;background: linear-gradient(  90deg,  rgba(255,255,255,0) 0%,  rgba(255,255,255,.8) 50%,  rgba(255,255,255,0) 100%);transform: translateX(-100%);animation: skel-move 1.2s infinite;}

@keyframes skel-move {100% {  transform: translateX(100%);}}

.skel-line {height: 1.2rem;margin-bottom: 2%;}
.skel-line-80 { width: 80%; }
.skel-line-60 { width: 60%; }
.skel-line-40 { width: 40%; }
.skel-line-30 { width: 30%; }
.skel-line-20 { width: 20%; }
.history-skel-list {margin-top: 4%;display: grid;gap: 4%;}
.skel-card {padding: 4%;border-radius: 1rem;border: 0.1rem solid rgba(0,0,0,.08);background: rgba(255,255,255,.6);display: grid;gap: 2%;}
.skel-badge {width: 28%;height: 1.6rem;border-radius: 2rem;margin-bottom: 2%;}
.skel-block {width: 100%;height: 2.4rem;border-radius: 0.8rem;}
.skel-btn {width: 100%;height: 3.4rem;border-radius: 0.8rem;}
.reserve .history-skel-steps {display: grid;grid-template-columns: repeat(4, 1fr);column-gap: 3%;row-gap: 0;}
.reserve .skel-steps {display: grid;grid-template-columns: repeat(2, 1fr);column-gap: 3%;row-gap: 0;}
.reserve .history-skel-body {display: grid;row-gap: 3%;}
.reserve .history-skel-row {display: flex;align-items: center;justify-content: space-between;column-gap: 4%;}
.reserve .history-skel-row .skel-btn {width: 26%;height: 2.4rem;border-radius: 1.2rem;}
.reserve .review-skel-tabs {display: grid;grid-template-columns: 1fr 1fr;column-gap: 4%;}

.terms-check {display: flex;align-items: center;gap: 10px;}
.terms-check input[type="checkbox"] {position: absolute;opacity: 0;pointer-events: none;}
.terms-check_box {width: 20px;height: 20px;border-radius: 4px;border: 0.1rem solid var(--color-border);;background: #ffffff;display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;box-sizing: border-box;}

.terms-check input[type="checkbox"]:checked + .terms-check_box {border-color: var(--color-primary, #0064ff);background: var(--color-primary, #0064ff);}
.terms-check input[type="checkbox"]:checked + .terms-check_box::after {content: "";width: 8px;height: 8px;border-radius: 3px;background: #ffffff;}
.terms-check_label {font-size: var(--fs-15);color: var(--color-text, #111);display: flex;align-items: center;}

.terms-badge {display: inline-flex;align-items: center;justify-content: center;padding: 2px 8px;margin-left: 0.4rem;border-radius: 0.8rem;font-size: 0.7rem;font-weight: 700;}
.terms-badge_required {color: #ffffff;background: var(--color-primary);}
.terms-badge_optional {color: #ffffff;background: #a0a0a0;}

.terms-all{padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid var(--color-border);;}
.terms-list {display: grid;gap: 12px;}
.terms-item {display: flex;align-items: center;justify-content: space-between;column-gap: 0.8rem;}
.terms-link {border: none;background: transparent;color: var(--color-primary, #0064ff);font-size: 0.85rem;text-decoration: underline;padding: 0;flex-shrink: 0;}

.login-inputwrap {position: relative;}
.field-check {position: absolute;right: 0.6rem;top: 50%;transform: translateY(-50%);display: none;}
.field-check img {width: 1.2rem;height: 1.2rem;}
.login-inputwrap.is-valid .field-check {display: inline-flex;}