:root {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #000000;
    --color-muted: rgba(0,0,0,.55);
    --color-border: rgba(0,0,0,.08);

    --color-primary: var(--mainColor);
    --color-danger: var(--redColor);

    --sp-2: 2px;
    --sp-4: 4px;
    --sp-6: 6px;
    --sp-8: 8px;
    --sp-10: 10px;
    --sp-12: 12px;
    --sp-14: 14px;
    --sp-15: 15px;
    --sp-16: 16px;
    --sp-20: 20px;
    --sp-24: 24px;

    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-26: 26px;

    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --lh-tight: 1.34;
    --lh-base: 1.4;
    --lh-relaxed: 1.6;

    --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
    --shadow-md: 0 10px 30px rgba(0,0,0,.12);

    --ease-out: cubic-bezier(.2,.8,.2,1);
    --dur-1: 120ms;
    --dur-2: 220ms;
    --dur-3: 320ms;

    --tap-min: 50px; 

    --header-h: 24px;
    --tabbar-h: 64px;
    --radius-sm: 10px;
    --radius-md: 14px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

.gap-8{gap: 8px !important;}
.gap-12{gap: 12px !important;}
.gap-16{gap: 16px !important;}
.gap-24{gap: 24px !important;}

.mt-0{margin-top: 0 !important;}
.mt-16{margin-top: 16px !important;}
.mt-24{margin-top: 24px !important;}
.mt-40{margin-top: 40px !important;}

.mb-16{margin-bottom: 16px !important;}

.ml-8{margin-left: 8px !important;}

.app {min-height: calc(var(--vh, 1vh) * 100);background: var(--color-bg);padding-top: var(--safe-top);padding-left: var(--safe-left);padding-right: var(--safe-right);display: flex;flex-direction: column;}
.app-header {max-width: 420px; width: 100%; margin:0 auto; position: sticky;top: 0;z-index: 20;display: flex;align-items: center;justify-content: space-between;padding: 16px 16px 8px;background: rgba(255,255,255,.92);backdrop-filter: blur(14px);}
.app-header_btn {padding-left: 0;height: var(--header-h);width: 20px;}
.app-tit{display: flex;justify-content: space-between; align-items: center;}

.app-main {flex: 1;width: 100%;max-width: 420px;margin: 0 auto;padding: 1rem;
    padding-bottom: calc(
        14px + var(--tabbar-h) + var(--safe-bottom)
    );
}
.app-tabbar {position: fixed;left: 0;right: 0;bottom: 0;z-index: 30;height: calc(var(--tabbar-h) + var(--safe-bottom));padding-bottom: var(--safe-bottom);background: rgba(255,255,255,.94);backdrop-filter: blur(16px);border: 1px solid var(--color-border);display: grid;grid-template-columns: repeat(4, 1fr);border-top-left-radius: 16px;border-top-right-radius: 16px;max-width: 420px;width: 100%;margin: 0 auto;}

.app-tabbar_item {height: var(--tabbar-h);display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 4px;font-size: 10px;color: var(--color-muted);}

.app-tabbar_item[aria-current="page"] {color: var(--color-primary);font-weight: 700;}

.top_wrap{position: sticky;top: 0;background: var(--color-bg);padding: 16px 16px 8px;z-index: 20;width: 100%;max-width: 420px;margin: 0 auto;}
.page-tit{font-size: var(--fs-22);font-weight: var(--fw-700);}
.card_wrap{border-radius: var(--radius-md);border: 1px solid var(--color-border);}
.card_item {padding: 16px 16px 22px;}
.section {margin-bottom: 16px;}
.stack {display: grid;gap: 8px;}
.row {display: flex;align-items: center;justify-content: space-between;gap: 12px;}
.text-muted {color: var(--color-muted);font-size: 13px;}
.status-badge {display: inline-flex;align-items: center;font-size: 12px;font-weight: 700;white-space: nowrap;color: #6B7684;}

.btn {width: 100%;height: 50px;padding: 0 16px;border-radius: var(--radius-sm);border: 1px solid var(--color-border);font-weight: 700;display: inline-flex;align-items: center;justify-content: center;}
.btn-s{width: inherit;height: inherit;padding: 4px 8px;border: none;font-size: var(--fs-12);border-radius: 8px;}
.btn-primary {background: var(--color-primary) !important;border-color: var(--color-primary) !important;color: #fff !important;}
.btn-gray {background: #EBEEF2 !important;border-color:#EBEEF2 !important;color: var(--color-primary) !important;}
.btn-danger {background: var(--color-danger) !important;border-color: var(--color-danger) !important;color: #fff !important;}
.btn[disabled] {opacity: .45;cursor: not-allowed;}

.bottom-action {width: 100%; max-width: 420px; margin: 0 auto; position: fixed;left: 0;right: 0;bottom: 0;z-index: 50;background: #fff;padding: 10px 16px calc(10px + var(--safe-bottom));display: flex;gap: 8px;}
.bottom-action .btn[disabled]{background: #EBEEF2 !important; border: 1px solid #EBEEF2 !important; color: #6B7684 !important;}
.bottom-action .btn {  width: 100%;  height: 50px;}

.view-state {min-height: 48vh;display: none;align-items: center;justify-content: center;text-align: center;}
.view-state.is-active {display: flex;}
.view-state_box {max-width: 360px;padding: 16px;border-radius: var(--radius-md);background: var(--color-surface);border: 1px solid var(--color-border);}

.toast {position: fixed;left: 50%;transform: translateX(-50%);bottom: calc(14px + var(--tabbar-h) + var(--safe-bottom));z-index: 100;max-width: min(92vw, 420px);padding: 10px 12px;border-radius: 12px;background: rgba(0,0,0,.9);color: #fff;font-size: 13px;line-height: 1.4;display: none;}
.toast.is-show {display: block;}

.sheet {position: fixed;left: 0;right: 0;bottom: 0;z-index: 90;background: var(--color-surface);border-radius: 18px 18px 0 0;border: 1px solid var(--color-border);padding: 12px 14px calc(12px + var(--safe-bottom));transform: translateY(110%);transition: transform .25s ease;}
.sheet-backdrop {position: fixed;inset: 0;z-index: 80;background: rgba(0,0,0,.36);display: none;}
.sheet-backdrop.is-open {display: block;}
.sheet.is-open {transform: translateY(0);}
.sheet_grab {width: 52px;height: 5px;margin: 2px auto 10px;border-radius: 999px;background: rgba(0,0,0,.18);}

.color-b{color: #000 !important;}

/* 스플래쉬 */
.splash {position: fixed;inset: 0;z-index: 9999;display: flex;align-items: center;justify-content: center;background: #ffffff;}
.splash-logo {width: 50%;max-width: 12rem;height: 100dvh;object-fit: contain;user-select: none;}
body.no-scroll {overflow: hidden;height: 100%;touch-action: none;}

/* 뱃지 */
.badge{font-size: var(--fs-14);border-radius: 8px;background: gray;color: #fff;height: var(--sp-24);display: inline-block;padding: 4px 10px;}
.wash .badge{color: #fff;background: var(--mainColor);}
.wash-completed .badge{color: #028450;background: #E8F7EF;}
.res-completed .badge{color: #1957C2;background: #EFF6FF}
.cancel .badge{color: #F2F4F6;background: #6B7684}
.reject .badge{color: #BC1B2A;background: #FFEEEE}
.sign-completed .badge{color: #8A6D1D;background: #FFF7E0}

/* 지도 미입력시 */
.nodt_map{color: var(--color-primary) !important;}

/* 데이터 없을때 */
.nodt_wrap{padding: 16px 0;}
.nodt_wrap .nodt_tit{margin-top: 1rem;font-size: var(--fs-20);font-weight: var(--fw-700); line-height: var(--lh-base);}
.nodt_wrap .nodt_txt{font-size: var(--fs-14);margin-top: 5px;}

/* 신청 완료 */
.comp_wrap{padding: 40px 0;}
.comp_wrap .comp_tit{margin-top: 1rem;font-size: var(--fs-20);font-weight: var(--fw-700); line-height: var(--lh-base);}
.comp_wrap .comp_txt{font-size: var(--fs-14);margin-top: 5px;}
.comp_wrap.join_comp{padding-top: 0;}
.comp_wrap.join_comp .comp_tit{font-size: var(--fs-26);}
.comp_wrap.join_comp .comp_txt{font-size: var(--fs-16);}
.main-color{color: var(--mainColor);}

/* 탭메뉴 */
.tab_menu{display: flex; justify-content: space-between; align-items: center;}
.tab_menu li{width: 50%; position: relative; text-align: center; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 16px 0; max-height: 50px;border-bottom: 1px solid #D1D6DB;}
.tab_menu li.on{font-weight: 700;}
.tab_menu li.on::after{content: ''; background: #000; width: 100%; height: 2px; position: absolute;bottom: 0;}
.tab_list{width: 100%; position: relative; text-align: center; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 16px 0; max-height: 50px;border-bottom: 1px solid #D1D6DB;}

/* 토글버튼 */
.toggle {display: inline-flex;align-items: center;gap: 8px;cursor: pointer;-webkit-tap-highlight-color: transparent;}
.toggle_input {position: absolute;opacity: 0;pointer-events: none;}
.toggle_track {position: relative;width: 60px;height: 34px;border-radius: 999px;background: rgba(0,0,0,.18);transition: background .18s ease;}
.toggle_thumb {position: absolute;top: 3px;left: 3px;width: 28px;height: 28px;border-radius: 999px;background: #fff;box-shadow: 0 1px 3px rgba(0,0,0,.35);transition: transform .18s ease;}
.toggle_input:checked + .toggle_track {  background: #15C47E}
.toggle_input:checked + .toggle_track .toggle_thumb {transform: translateX(26px);}
.toggle_input:disabled + .toggle_track {opacity: .4;cursor: not-allowed;}
.toggle_input:disabled ~ .toggle_text {opacity: .6;}

.center-popup-backdrop,
.bottom-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.4);
  display: none;
}

/* 열릴 때 */
.center-popup-backdrop.is-open,
.bottom-popup-backdrop.is-open {
  display: flex;
}

/* ✅ 센터 팝업 */
.center-popup-backdrop {
  align-items: center;
  justify-content: center;
}

.center-popup {
    width: 90%;
  max-width: 420px;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.center-popup_body {
  padding: 24px 24px 0px
}

.center-popup_title {
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: var(--lh-base);
}

.center-popup_text {
  font-size: 0.9rem;
  color: rgba(0,0,0,.75);
  line-height: 1.5;
}

.center-popup_footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.6rem;
  padding: 16px 24px 24px;
}

.one_btn{
    width: 100%;
}

.one_btn .btn{width: inherit; padding: 16px 24px; justify-content: right; height: inherit; background: inherit !important; border: inherit !important; color: var(--color-primary) !important;}

.center-popup_footer .btn {
  height: 2.6rem;
  font-size: 0.9rem;
}


/* ✅ 하단 팝업(바텀 시트) */
.bottom-popup-backdrop {
  align-items: flex-end;
  justify-content: center;
}

.bottom-popup {
    width: 90%;
      max-width: 420px;
    position: fixed;
  border-radius: 16px;
      left: 50%;
    right: 0;
    bottom: 10px;
    z-index: 50;
    transform: translateX(-50%);
  background: #fff;
padding: 10px 16px calc(10px + var(--safe-bottom));
  box-shadow: 0 -0.3rem 1.2rem rgba(0,0,0,.2);
}

/* 열릴 때 위로 올라오게 */
.bottom-popup-backdrop.is-open .bottom-popup {
  transform: translateY(0);
}

/* 그랩바 */
.bottom-popup_grab {
  width: 50px;
  height: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  margin: 0 auto 24px;
}

.bottom-popup_title {
  font-size: var(--fs-20);
  font-weight: 700;
  margin-bottom: 16px;
  text-align: center;
}

.bottom-popup_text {
  font-size: 0.9rem;
  color: rgba(0,0,0,.8);
  line-height: 1.5;
}

.bottom-popup_footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.6rem;
}

.bottom-popup_footer .btn {
  height: 40px;
  font-size: 14px;
}

.popup-info .row{
    justify-content: center;
}

.popup-info .history-info_value::before{
    display: none;
}

.popup-info .time_date{margin-bottom: 3px; font-weight: 700;}
.popup-desc input{background-color: #EFF6FF;width: 100%; border-radius: 8px; padding: 13px 16px; border: 1px solid var(--color-primary);}

.bottom-popup .review-write .star{justify-content: center;}