/* =========================================
   이음 소비자 앱 — 공통 디자인 토큰 + 공용 유틸
   모든 페이지 CSS보다 먼저 로드한다.
   (색·간격·반경은 반드시 이 토큰을 사용 — hex 직접 입력 금지)
========================================= */
:root{
  /* 브랜드 */
  --blue-500:#3E68FF; --blue-600:#2C5AFF; --blue-100:#D2DCFF; --blue-50:#EEF1FF;
  --blue-strong:#191b24;
  --teal-500:#1ECAD3;
  --red-500:#fa0037; --red-100:#ffb9b9; --red-50:#fff0f0;

  /* 소셜 로그인 브랜드 */
  --kakao:#FEE500; --kakao-txt:#181600;

  /* 그레이 */
  --g900:#111111; --g700:#505050; --g600:#5c5d63; --g500:#767676;
  --g400:#999999; --g300:#cfcfcf; --g200:#e5e5ec; --g100:#f3f3f4;
  --g91:#e8e8e9; --g50:#f7f7fb; --white:#fff;

  /* 간격 (8px 그리드) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* 반경 */
  --radius-sm:4px; --radius-base:8px; --radius-md:12px; --radius-lg:20px; --radius-full:9999px;

  /* 그림자 */
  --shadow-flat:2px 2px 8px rgba(17, 17, 17, .04), 0px 1px 1.5px rgba(17, 17, 17, .06);
  --shadow-pop:0px 8px 24px rgba(17,17,17,.12),0px 2px 6px rgba(17,17,17,.06);

  /* 레이아웃 */
  --app-max:768px;
  --app-bg:#e9edf2;
  --scrim:rgba(17,17,17,.45);

  /* 다크모드 미지원 — 라이트 강제 */
  color-scheme:light;
}

/* ---------- 공통 리셋 (전 페이지 공통 — 페이지 CSS에서 반복 금지) ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--app-bg)}
body{font-family:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;color:var(--g900);-webkit-font-smoothing:antialiased}
img{display:block}
a{text-decoration:none;color:inherit;cursor:pointer}
button{border:0;background:none;font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* 키보드 포커스만 링 표시 (마우스 클릭 시엔 안 보임) */
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:var(--radius-sm)}
:focus:not(:focus-visible){outline:none}

/* iOS 사파리 input 포커스 자동확대 방지 (16px 미만 입력 금지) */
input,textarea,select{font-size:max(16px,1em)}

/* ---------- 앱 컨테이너 공통 (배경·하단 패딩은 페이지 CSS에서 오버라이드) ---------- */
.app{max-width:var(--app-max);margin:0 auto;background:var(--white);min-height:100dvh;position:relative;overflow-x:clip}

/* ---------- 아이콘 공통 ---------- */
i[class*="ph-"]{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ic12{font-size:12px}.ic14{font-size:14px}.ic16{font-size:16px}.ic18{font-size:18px}.ic20{font-size:20px}.ic24{font-size:24px}

/* ---------- 공통 폰트 스타일 ----------
   전 페이지에서 반복되는 텍스트 스타일. 마크업은 아래 클래스를 사용하고
   페이지 CSS에는 폰트/색을 다시 쓰지 않는다 (레이아웃 보정만 허용). */
/* line-height·letter-spacing은 Figma 타이포 스펙(자간 -0.025em, 사이즈별 고정 line-height) 기준 */
.fs-title,.shead__title,.mhead__title,.rhead__title,.dhead__title,.sechead h2{font-size:18px;font-weight:700;color:var(--g900);letter-spacing:-.45px;line-height:26px}    /* Subtitle-lg / 페이지·섹션 제목 (헤더·섹션 타이틀 통합) */
.fs-subtitle{font-size:16px;font-weight:700;color:var(--g900);letter-spacing:-.4px;line-height:24px}  /* Subtitle-md / 카드 내 소제목 */
.fs-name,.wcard__name{font-size:16px;font-weight:600;color:var(--blue-strong);letter-spacing:-.4px;line-height:24px} /* 고택·상품 이름, 가격 */
.fs-body{font-size:15px;color:var(--g900);letter-spacing:-.375px;line-height:22px}    /* body-lg / 본문 */
.fs-body-b,.count__name,.fs-label,.field__label{font-size:15px;font-weight:500;color:var(--g900);letter-spacing:-.375px;line-height:22px}  /* 본문 강조(값·행 제목) */

.fs-sub,.sechead a{font-size:15px;color:var(--g700);letter-spacing:-.35px;line-height:20px}                      /* body-md / 보조 설명 */
.fs-cap{font-size:14px;color:var(--g500);letter-spacing:-.325px;line-height:18px}                       /* body-sm / 캡션·메타 */
.fs-cap-b{font-size:14px;font-weight:600;color:var(--g900);letter-spacing:-.325px;line-height:18px}     /* 캡션 강조 */
/* 색 유틸 — fs-* 뒤에 붙여 색만 교체 */
.c-txt{color:var(--g900)}.c-info{color:var(--g500)}.c-sub{color:var(--g700)}.c-dim{color:var(--g600)}
.c-faint{color:var(--g400)}.c-blue{color:var(--blue-500)}.c-strong{color:var(--blue-strong)}.c-white{color:var(--white)}
/* 한 줄 말줄임 */
.ellip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 스크롤바 숨김(스크롤 기능은 유지) — 미리보기 폰 등 */
.noscrollbar{scrollbar-width:none;-ms-overflow-style:none}
.noscrollbar::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- 바텀시트 핸들 (공통 pill — 위치만 페이지 CSS에서 지정) ---------- */
.sheet__handle{width:100px;height:8px;border-radius:27px;background:var(--g300)}

/* ---------- 페이지 헤더 (뒤로가기 · 제목 · 액션) ---------- */
.shead,.mhead,.rhead,.dhead{position:sticky;top:0;z-index:20;background:var(--white);height:calc(56px + env(safe-area-inset-top));
  display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 16px 0}
.shead__btn,.mhead__btn,.rhead__btn,.dhead__btn{width:20px;height:20px;display:grid;place-items:center;color:var(--g900)}

/* ---------- 라인 탭 ---------- */
.ltabs,.rtabs{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:10;display:flex;background:var(--white);
  border-bottom:1px solid var(--g91);height:44px}
.ltab,.rtab,.ttab{flex:1;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;
  letter-spacing:-.375px;color:var(--g500);border-bottom:2px solid transparent;margin-bottom:-1px}
.ltab--on,.rtab--on,.ttab--on{color:var(--blue-500);border-bottom-color:var(--blue-500)}

/* ---------- 상태 배지 ---------- */
.badge{min-width:60px;height:24px;padding:0 9px;border-radius:var(--radius-full);border:1px solid;display:inline-flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;letter-spacing:-.3px}
.badge--blue{border-color:var(--blue-100);color:var(--blue-500)}
.badge--gray{border-color:var(--g300);color:var(--g600)}
.badge--red{border-color:var(--red-100);color:var(--red-500)}
/* 사진 위 BEST 배지 (카드 썸네일 좌상단) */
.badge-best{position:absolute;left:10px;top:10px;background:var(--blue-500);color:var(--white);font-size:13px;
  font-weight:600;letter-spacing:-.3px;padding:2px 6px;border-radius:var(--radius-sm);line-height:16px}
/* D-day 강조 배지 (파랑 솔리드) */
.badge-dday{background:var(--blue-500);color:var(--white);font-size:13px;font-weight:700;letter-spacing:-.275px;
  height:20px;padding:0 8px;border-radius:6px;display:inline-flex;align-items:center}
/* 카운트 배지 (틸 원형 — 메뉴 알림 수 등) */
.badge-n{background:var(--teal-500);color:var(--white);font-size:13px;font-weight:700;letter-spacing:-.35px;
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center}
/* 회색 사각 배지 (인증마크·로고 칩) */
.badge-gray{background:var(--g50);border-radius:var(--radius-sm);height:25px;min-width:80px;padding:4px 8px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--g600)}
.badge-gray img{height:17px;width:auto;object-fit:contain}
/* D-day 보조 배지 (회색/당일 빨강) */
.dday{height:16px;padding:0 8px;border-radius:6px;background:var(--g50);color:var(--g500);
  font-size:13px;font-weight:700;letter-spacing:-.3px;display:inline-flex;align-items:center}
.dday--today{padding:0 4px;border-radius:var(--radius-sm);background:var(--red-50);color:var(--red-500);font-weight:600}

/* ---------- 태그 (고택 특성 칩 — 독채/한옥스테이 등) ---------- */
.tags{display:flex;gap:8px}
.tag{background:var(--g100);color:var(--g600);font-size:13px;letter-spacing:-.325px;padding:2px 6px;
  border-radius:var(--radius-sm);line-height:18px}

/* ---------- 가격 표기 (취소선 원가 → 할인율 → 최종가) ---------- */
.price{display:flex;align-items:center;gap:8px}
.price__old{font-size:13px;color:var(--g400);text-decoration:line-through;line-height:16.5px}
.price__rate{font-size:13px;font-weight:600;color:var(--blue-500)}
.price__now{font-size:16px;font-weight:600;color:var(--blue-strong);line-height:16px}
.price__now--off{color:var(--g400)}
.price__per{font-size:13px;color:var(--g400)}

/* ---------- 필터 칩 ---------- */
.chip{flex:none;display:inline-flex;align-items:center;gap:4px;padding:6px 16px;border-radius:var(--radius-full);
  background:var(--g50);color:var(--g500);font-size:15px;letter-spacing:-.35px;border:0;font-family:inherit;cursor:pointer}
.chip--on{background:var(--g900);color:var(--white)}
/* 아웃라인 선택 칩 (필터 시트) */
.chip--line{height:40px;padding:0 16px;background:var(--white);border:1px solid var(--g200);color:var(--g700);font-weight:500}
.chip--line.on{border-color:var(--blue-500);color:var(--blue-600);background:var(--blue-50);font-weight:600}
/* 소프트 선택 칩 (작성 폼 카테고리) */
.chip--pick{padding:8px 14px;border:1px solid transparent}
.chip--pick.on{background:var(--blue-50);color:var(--blue-500);border-color:var(--blue-100);font-weight:600}

/* ---------- 아이콘 원형 배경 (아바타·알림·완료 아이콘) ---------- */
.icirc{flex:none;display:grid;place-items:center;border-radius:var(--radius-full);overflow:hidden;
  background:var(--blue-50);color:var(--blue-500)}
.icirc--20{width:20px;height:20px;font-size:12px}
.icirc--24{width:24px;height:24px;font-size:14px}
.icirc--32{width:32px;height:32px;font-size:16px}
.icirc--36{width:36px;height:36px;font-size:18px}
.icirc--40{width:40px;height:40px;font-size:18px}
.icirc--44{width:44px;height:44px;font-size:20px}
.icirc--56{width:56px;height:56px;font-size:24px}
.icirc--64{width:64px;height:64px;font-size:34px}
.icirc--line{background:var(--white);border:1px solid var(--g200)}
/* .icirc 안에 카드형 3D 아이콘(png) 사용 시 */
.icirc__img{width:76%;height:76%;object-fit:contain}
.icirc--solid{background:var(--blue-500);color:var(--white)}
.icirc--dark{background:rgba(17,17,17,.4);color:var(--white)}
/* 사각 라운드 아이콘 배경 (테마 카테고리 등) */
.icbox{flex:none;display:grid;place-items:center;background:var(--g50)}
.icbox--56{width:56px;height:56px;border-radius:var(--radius-lg)}

/* ---------- 썸네일 (정사각 라운드 이미지 박스) ---------- */
.thumb{position:relative;flex:none;border-radius:var(--radius-base);overflow:hidden;background:var(--g100)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb--48{width:48px;height:48px}
.thumb--56{width:56px;height:56px}
.thumb--60{width:60px;height:60px}
.thumb--70{width:70px;height:70px}
.thumb--72{width:72px;height:72px}

/* ---------- 오버레이 하트(찜) 버튼 — 이미지 위 우상단 기본 ---------- */
.heart{position:absolute;right:10px;top:10px;width:24px;height:24px;display:grid;place-items:center;color:var(--g500)}
.heart--br{top:auto;right:8px;bottom:8px}
/* 외곽선 + 반투명 검정 채운 하트 (원형 배경 없음) */
.heart i{color:rgba(0,0,0,.4);-webkit-text-stroke:1.2px var(--white);filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
.heart i::before{font-family:"Phosphor-Fill" !important}
.heart i.heart-liked{color:var(--red-500)}
/* 하트 클릭 팝 모션 (모든 찜 버튼 공통) */
@keyframes heart-pop{
  0%{transform:scale(1) rotate(0)}
  25%{transform:scale(.7) rotate(0)}
  50%{transform:scale(1.35) rotate(-12deg)}
  68%{transform:scale(1.05) rotate(10deg)}
  84%{transform:scale(1.18) rotate(-6deg)}
  100%{transform:scale(1) rotate(0)}
}
.heart-animate{animation:heart-pop .5s ease-in-out}
.heart-liked{color:var(--red-500) !important}

/* ---------- 섹션 헤더 (제목 + 우측 링크) ---------- */
.sechead{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ---------- 고택 와이드 리스트 카드 (사진 갤러리 + 정보) ---------- */
.wcard{display:flex;flex-direction:column;gap:12px}
.wcard__gallery{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.wcard__gallery::-webkit-scrollbar{display:none}
.wcard__photo{position:relative;flex:none;width:140px;height:140px;border-radius:var(--radius-base);overflow:hidden;background:var(--g50)}
.wcard__photo--lead{width:240px}
.wcard__photo img{width:100%;height:100%;object-fit:cover}
.wcard__count{position:absolute;right:10px;bottom:10px;background:rgba(17,17,17,.4);color:var(--white);font-size:13px;
  padding:2px 6px;border-radius:var(--radius-sm)}
.wcard__more{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;
  border-radius:var(--radius-full);background:rgba(0,0,0,.4);color:var(--white);display:grid;place-items:center}
.wcard__info{display:flex;flex-direction:column;gap:8px}
.wcard__area{font-size:14px;color:var(--g500);letter-spacing:-.35px;line-height:20px}
@media (min-width:600px){
  .wcard__photo{width:170px;height:170px}
  .wcard__photo--lead{width:300px}
}

/* ---------- 고택 세로 카드 (2열 그리드·가로 스크롤 겸용) ---------- */
.vcard{display:flex;flex-direction:column;gap:12px}
.vcard--scroll{flex:none;width:140px}
.vcard__img{position:relative;width:100%;height:140px;border-radius:var(--radius-base);overflow:hidden;background:var(--g50)}
.vcard__img img{width:100%;height:100%;object-fit:cover}
.vcard__body{display:flex;flex-direction:column;gap:3px}
.vcard__area{font-size:13px;color:var(--g500);letter-spacing:-.325px;line-height:16.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard__name{font-size:16px;font-weight:600;color:var(--blue-strong);letter-spacing:-.4px;line-height:20px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard__old{font-size:13px;color:var(--g400);text-decoration:line-through;line-height:16.5px;margin-top:3px}
.vcard__price{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:600;color:var(--blue-strong);line-height:16px}
.vcard__price .rate{font-size:13px;color:var(--blue-500)}
@media (min-width:600px){
  .vcard--scroll{width:170px}
  .vcard--scroll .vcard__img{height:170px}
}

/* ---------- 인원·수량 스텝퍼 ---------- */
.counts{display:flex;flex-direction:column;padding:0 16px}
.count{display:flex;align-items:center;justify-content:space-between;padding:12px}
.count--line{border-bottom:1px solid var(--g200)}
.count__desc{font-size:14px;color:var(--g700);letter-spacing:-.3px;margin-top:2px}
.stepper{display:flex;align-items:center;gap:16px}
.stepper__btn{width:24px;height:24px;border:1px solid var(--g200);border-radius:var(--radius-full);display:grid;
  place-items:center;color:var(--g900);background:var(--white)}
.stepper__btn:disabled{color:var(--g300);cursor:default}
.stepper__val{min-width:20px;text-align:center;font-size:13px;color:var(--g900);letter-spacing:-.325px}

/* ---------- 하단 GNB ---------- */
.gnb{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:var(--app-max);
  background:rgba(255,255,255,.9);backdrop-filter:blur(2px);display:flex;align-items:center;
  justify-content:space-between;padding:8px 16px calc(24px + env(safe-area-inset-bottom));z-index:50}
.gnb__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--g900);
  height:48px;justify-content:center}
.gnb__item span{font-size:13px;font-weight:600;letter-spacing:-.3px}
.gnb__item--on{color:var(--g900)}

/* ===== 최소 터치 영역 확보 (iOS 44pt / Android 48dp) =====
   버튼의 시각 크기는 그대로 두고, 투명 ::after 로 탭 영역만 48×48 이상으로 넓힌다.
   (세로로 촘촘히 쌓이는 요소는 겹침 방지 위해 이 방식 대신 min-height 사용) */
.shead__btn,.mhead__btn,.rhead__btn,.dhead__btn,.thead__btn,
.stepper__btn,.sheet__like,.cthread__back,.cmt__more,.tchip-ic,
.sheet__sort,.review__help,.panel__more,.pe-avatar__btn,.cmt__reply,.sbox__cell,[data-more-review]{position:relative}
.shead__btn::after,.mhead__btn::after,.rhead__btn::after,.dhead__btn::after,
.thead__btn::after,.heart::after,.stepper__btn::after,.sheet__like::after,
.cthread__back::after,.cmt__more::after,.tchip-ic::after,
.sheet__sort::after,.review__help::after,.panel__more::after,.pe-avatar__btn::after,
.cmt__reply::after,.sbox__cell::after,[data-more-review]::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:48px;min-height:48px}

/* ---------- 공통 버튼 (admin css/common 과 동일 명명: .btn + 크기 + 변형) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  height:48px;padding:0 16px;border-radius:var(--radius-base);font-family:inherit;font-size:16px;font-weight:700;
  letter-spacing:-.4px;white-space:nowrap;cursor:pointer;border:0;transition:.15s}
.btn i{font-size:20px}
.btn:disabled,.btn.is-disabled{cursor:default;pointer-events:none}
/* 크기 */
.btn-36{min-height:44px;padding:0 12px;font-size:14px;font-weight:600;border-radius:6px;gap:4px}
.btn-44{height:44px;padding:0 16px;font-size:15px;border-radius:var(--radius-base)}
.btn-48{height:48px;padding:0 16px;font-size:16px;border-radius:var(--radius-base)}
.btn-cta{height:52px;padding:0 16px;font-size:16px;font-weight:700;border-radius:var(--radius-base)}
.btn-block{width:100%}
/* 변형 */
.btn-primary{background:var(--blue-500);color:var(--white)}
.btn-primary:disabled,.btn-primary.is-disabled{background:var(--g300)}
.btn-secondary{background:var(--blue-50);color:var(--blue-600)}
.btn-outline-blue{background:var(--white);border:1px solid var(--blue-100);color:var(--blue-500)}
.btn-outline-gray{background:var(--white);border:1px solid var(--g200);color:var(--g700)}
.btn-danger{background:var(--white);border:1px solid var(--g200);color:var(--red-500)}
.btn-danger:disabled,.btn-danger.is-disabled{color:var(--g400)}
/* 로딩 스피너 */
@keyframes btn-spin{to{transform:rotate(360deg)}}
.btn.is-loading{position:relative;color:transparent;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:var(--radius-full);
  border:2px solid rgba(255,255,255,.4);border-top-color:var(--white);animation:btn-spin .7s linear infinite}
/* 버튼 나란히 두는 행 (양쪽 균등 분할) */
.btn-row{display:flex;gap:8px}
.btn-row>.btn{flex:1}

/* ---------- 공통 입력·셀렉트 ---------- */
.input-field{width:100%;height:48px;padding:0 14px;border:1px solid var(--g200);border-radius:var(--radius-base);
  background:var(--white);color:var(--g900);letter-spacing:-.375px}
.input-field::placeholder{color:var(--g400)}
.input-field:focus{outline:none;border-color:var(--blue-500)}
.input-field.is-error{border-color:var(--red-500)}
textarea.input-field{height:auto;min-height:120px;padding:12px 14px;line-height:1.5;resize:none}
/* 커스텀 셀렉트(네이티브 select 대신 표시용 박스 + caret) */
.select-field{width:100%;height:48px;padding:0 14px;border:1px solid var(--g200);border-radius:var(--radius-base);
  background:var(--white);display:flex;align-items:center;justify-content:space-between;gap:8px;
  color:var(--g900);font-size:15px;letter-spacing:-.375px}
.select-field__ph{color:var(--g400)}
.select-field__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-field__val b{color:var(--blue-500)}
.select-field i{color:var(--g500);flex:none}
/* 폼 라벨 + 필드 묶음 */
.field{display:flex;flex-direction:column;gap:6px}
.field__label em{font-style:normal;color:var(--red-500)}
.field__msg{display:none;font-size:13px;color:var(--red-500);letter-spacing:-.3px}
.field.is-error .field__msg{display:block}

/* ---------- 접근성 ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 작은 아이콘 버튼의 터치 히트영역을 44px로 확장 */
.tapx{position:relative}
.tapx::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:var(--radius-full)}

/* ---------- 공용 빈 상태 ---------- */
.empty{display:none;flex-direction:column;align-items:center;gap:10px;padding:72px 16px;text-align:center}
.empty i{font-size:44px;color:var(--g300)}
.empty p{font-size:14px;color:var(--g500);letter-spacing:-.35px;line-height:20px}
.empty .empty__cta{margin-top:4px;height:40px;padding:0 20px;border:1px solid var(--g200);border-radius:var(--radius-base);
  background:var(--white);font-size:14px;font-weight:600;color:var(--g700);display:inline-flex;align-items:center;gap:4px}
.empty--show{display:flex}

/* ---------- 이미지 스켈레톤 ---------- */
@keyframes eum-skel{0%{background-position:120% 0}100%{background-position:-20% 0}}
.img-skel{background:linear-gradient(100deg,var(--g100) 40%,var(--g50) 50%,var(--g100) 60%) var(--g100);
  background-size:250% 100%;animation:eum-skel 1.4s ease infinite}

/* ---------- 공용 로딩 인디케이터 (three-body — Uiverse.io by dovatgabriel, 프라이머리 컬러 적용) ---------- */
.loading-backdrop{position:fixed;inset:0;z-index:320;background:rgba(255,255,255,.62);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
.loading-backdrop.on{opacity:1}
.three-body{--uib-size:35px;--uib-speed:.8s;--uib-color:var(--blue-500);
  position:relative;display:inline-block;height:var(--uib-size);width:var(--uib-size);
  animation:tb-spin calc(var(--uib-speed) * 2.5) infinite linear}
.three-body__dot{position:absolute;height:100%;width:30%}
.three-body__dot::after{content:'';position:absolute;height:0%;width:100%;padding-bottom:100%;
  background-color:var(--uib-color);border-radius:50%}
.three-body__dot:nth-child(1){bottom:5%;left:0;transform:rotate(60deg);transform-origin:50% 85%}
.three-body__dot:nth-child(1)::after{bottom:0;left:0;
  animation:tb-wobble1 var(--uib-speed) infinite ease-in-out;animation-delay:calc(var(--uib-speed) * -0.3)}
.three-body__dot:nth-child(2){bottom:5%;right:0;transform:rotate(-60deg);transform-origin:50% 85%}
.three-body__dot:nth-child(2)::after{bottom:0;left:0;
  animation:tb-wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out}
.three-body__dot:nth-child(3){bottom:-5%;left:0;transform:translateX(116.666%)}
.three-body__dot:nth-child(3)::after{top:0;left:0;animation:tb-wobble2 var(--uib-speed) infinite ease-in-out}
@keyframes tb-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes tb-wobble1{0%,100%{transform:translateY(0%) scale(1);opacity:1}50%{transform:translateY(-66%) scale(.65);opacity:.8}}
@keyframes tb-wobble2{0%,100%{transform:translateY(0%) scale(1);opacity:1}50%{transform:translateY(66%) scale(.65);opacity:.8}}

/* ---------- 토스트 ---------- */
.eum-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,8px);
  max-width:calc(min(100vw,var(--app-max)) - 32px);background:rgba(17,17,17,.88);color:var(--white);
  font-size:14px;font-weight:500;letter-spacing:-.35px;line-height:20px;padding:12px 20px;border-radius:var(--radius-base);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:300;text-align:center}
.eum-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 공용 확인 다이얼로그 (중앙 모달형) ---------- */
.cfm-backdrop{position:fixed;inset:0;z-index:200;background:var(--scrim);display:flex;align-items:center;justify-content:center;
  padding:0 24px;opacity:0;transition:opacity .24s ease}
.cfm-backdrop.on{opacity:1}
.cfm-backdrop[hidden]{display:none}
.cfm{width:100%;max-width:340px;background:var(--white);border-radius:var(--radius-lg);
  padding:28px 16px 16px;display:flex;flex-direction:column;gap:8px;
  transform:translateY(12px) scale(.97);transition:transform .24s cubic-bezier(.32,.72,0,1)}
.cfm-backdrop.on .cfm{transform:none}
.cfm__title{font-size:17px;font-weight:700;color:var(--g900);letter-spacing:-.425px;line-height:24px}
.cfm__desc{font-size:14px;color:var(--g700);letter-spacing:-.35px;line-height:20px;white-space:pre-line}
.cfm__btns{display:flex;gap:8px;margin-top:16px}
.cfm__btn{flex:1;height:48px;border-radius:var(--radius-base);font-size:15px;font-weight:600;letter-spacing:-.375px;
  display:flex;align-items:center;justify-content:center}
.cfm__btn--ghost{border:1px solid var(--g200);background:var(--white);color:var(--g700)}
.cfm__btn--primary{background:var(--blue-500);color:var(--white)}
/* 위험 액션(전체삭제 등) — 예약취소 버튼(.rvd-cancel)과 동일한 아웃라인+레드 텍스트 */
.cfm__btn--danger{border:1px solid var(--g200);background:var(--white);color:var(--red-500)}