/* 아이콘 폰트(Phosphor) — 화면 27개가 각자 <script> 로더를 들고 있어 버전을 올리려면
   전부 고쳐야 했다. 여기 한 곳에 둔다. @import 는 규칙보다 앞에 와야 한다(맨 위에 두는 이유).

   <script> 로더는 굵기 6종(regular·thin·light·bold·fill·duotone)을 전부 받아왔다.
   앱이 실제로 쓰는 것은 셋뿐이라(ph 268곳 · ph-fill 24곳 · ph-bold 4곳) 그만 가져온다.
   새 굵기를 쓰려면 여기에 한 줄 더한다.
   저장소 안(static/vendor/phosphor)에서 가져온다 — 외부 CDN 이 죽으면 아이콘이 전부 깨졌었다(2026-09-22). */
@import url("../vendor/phosphor/regular.css");
@import url("../vendor/phosphor/fill.css");
@import url("../vendor/phosphor/bold.css");

/* =========================================
   이음 소비자 앱 — 공통 디자인 토큰 + 공용 유틸
   모든 페이지 CSS보다 먼저 로드한다.
   (색·간격·반경은 반드시 이 토큰을 사용 — hex 직접 입력 금지)
   아이콘 폰트는 위 @import 가 가져온다 — 페이지마다 <script> 를 넣지 않는다.
========================================= */
: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;

  /* 안내 창 바탕 워시 — 두 색이 카드 위쪽에서 섞여 아래로 가며 흰색으로 풀린다.
     기존 -50 색(#EEF1FF 등)은 너무 옅어 한 색으로 깔면 회색 판처럼 보였다.
     한 번 채도를 낮춰 봤다가 되돌렸다 — 흐려지니 카드가 바랜 것처럼 보였다 */
  --wash-sky:#c7e2ff; --wash-lilac:#cdc3f7;
  --wash-peach:#ffdcd2; --wash-rose:#ffc6d5;


  /* 소셜 로그인 브랜드 */
  --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}
/* [hidden] 은 브라우저 기본(UA) 스타일이라 .btn{display:inline-flex} 같은 작성자 규칙에 밀린다.
   JS 에서 el.hidden = true 로 감춰도 안 감춰지는 원인이다 — 화면마다 `.foo[hidden]{display:none}`
   을 따로 적어 오다가 스무 번 넘게 반복됐고, 적지 않은 곳은 그대로 새어 나왔다.
   어드민은 이미 같은 규칙을 두고 있다(admin/css/common/common.css). 앱도 여기서 한 번에 눌러 둔다 */
[hidden]{display:none !important}
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)}

/* ---------- 체크박스 ----------
   브라우저 기본 체크박스는 크기(13px)도 색도 기기마다 달라 앱 안에서 혼자 논다.
   input 을 그대로 두고 겉모양만 바꾼다 — 키보드·스크린리더·label 클릭이 그대로 산다.
   누르는 자리는 줄(.srow 44px)이 갖고 있으므로 여기서 더 키우지 않는다.

   같은 자리에 쓰는 곳: 마케팅 수신 채널 시트.
   약관 동의(menu.css .agree)와 검색 필터(search.css .fcheck)는 아직 accent-color 만 준
   기본 체크박스다 — 그쪽을 손댈 때 이 클래스로 옮긴다 */
.chk{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:22px;height:22px;cursor:pointer;
  border:1.5px solid var(--g300);border-radius:7px;background:var(--white);
  display:grid;place-items:center;transition:background .15s,border-color .15s}
/* 체크 표시는 테두리 두 변을 기울여 그린다 — 아이콘 폰트를 기다리지 않아 깜빡이지 않는다 */
.chk::after{content:"";width:11px;height:6px;margin-top:-3px;
  border-left:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:rotate(-45deg);opacity:0;transition:opacity .12s}
.chk:checked{background:var(--blue-500);border-color:var(--blue-500)}
.chk:checked::after{opacity:1}
.chk:disabled{background:var(--g100);border-color:var(--g200);cursor:default}
.chk:disabled:checked{background:var(--g300);border-color: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)}

/* ---------- 라인 탭 (공통 — 모든 탭 동일) ----------
   · 탭 폭 = 글자 + 좌우 14px (글자 간격 28px 일정) · 좌측 정렬 · 첫 탭 글자는 16px 에서 시작(줄 좌우 2px + 14px)
   · 기본: 넘치면 가로 스크롤
   · Swiper: 줄에 .swiper, 안쪽 .swiper-wrapper, 탭에 .swiper-slide → app.js 가 자동 초기화
     (넘칠 때만 스와이프 · 선택 탭이 가려지면 보이게 밀기 · 페이지에 Swiper 로드 필요)
   · 줄 컨테이너: .ltabs/.rtabs(헤더 아래 sticky) · .ttabs(섹션 안 — 페이지 CSS 에서 좌우 음수 마진으로 전체폭) */
.ltabs,.rtabs,.ttabs{display:flex;height:44px;padding:0 2px;background:var(--white);border-bottom:1px solid var(--g91);
  overflow-x:auto;scrollbar-width:none}
.ltabs::-webkit-scrollbar,.rtabs::-webkit-scrollbar,.ttabs::-webkit-scrollbar{display:none}
.ltabs,.rtabs{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:10}
.ltabs--static{position:static}
.ltab,.rtab,.ttab{flex:none;display:flex;align-items:center;justify-content:center;padding:0 14px;white-space:nowrap;
  font-size:16px;font-weight:500;letter-spacing:-.375px;color:var(--g500);border-bottom:2px solid transparent;cursor:pointer}
.ltab--on,.rtab--on,.ttab--on{color:var(--blue-500);border-bottom-color:var(--blue-500)}
/* Swiper 구조 — 스크롤 대신 Swiper 로 이동 · Swiper 기본 auto 마진 해제(폭 넘침 방지) */
.ltabs.swiper,.rtabs.swiper,.ttabs.swiper{display:block;overflow:hidden;margin-left:0;margin-right:0}
.ltabs .swiper-slide,.rtabs .swiper-slide,.ttabs .swiper-slide{width:auto;height:100%}

/* ---------- 상태 배지 ---------- */
.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}
/* 아웃라인 알약 태그 (홈 즐길거리 카드 — 표시용) */
.tag--line{display:inline-flex;align-items:center;height:30px;padding:0 15px;border:1px solid var(--g300);
  border-radius:var(--radius-full);background:var(--white);color:var(--g700);font-size:14px;letter-spacing:-.35px}

/* ---------- 가격 표기 (취소선 원가 → 할인율 → 최종가) ---------- */
.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)}
/* 즐길거리 대표 이미지는 mp4 클립일 수 있다(EUM.media.tag) — video 에도 같은 크기를 준다.
   img 에만 주면 클립이 원본 크기로 나와 카드가 터진다 */
.vcard__img img,.vcard__img video{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)}
/* 가격이 없는 카드(즐길거리)의 같은 자리 — 금액처럼 보이지 않게 회색 작은 글씨다 */
.vcard__kind{margin-top:3px;line-height:16px}
@media (min-width:600px){
  .vcard--scroll{width:170px}
  .vcard--scroll .vcard__img{height:170px}
}

/* ---------- 인원·수량 스텝퍼 ---------- */
.counts{display:flex;flex-direction:column;padding:0 16px}
/* 인원 선택 아래 안내 한 줄 — .counts(16) + .count(12) 를 더해 '성인' 글자와 왼쪽을 맞춘다.
   맨몸 <p> 로 두었더니 화면 끝에 붙었다 */
.count-hint{padding:2px 28px 12px;font-size:13px;line-height:18px;letter-spacing:-.3px;color:var(--g500)}
.count-hint.is-warn{color:var(--red-500)}
.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 — 반투명 blur 알약형 플로팅 바 (홈 · 예약 · MY) ---------- */
.gnb{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;padding:6px;border-radius:var(--radius-full);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 24px rgba(17,17,17,.12),0 1px 3px rgba(17,17,17,.06)}
.gnb__item{width:68px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:var(--radius-full);color:var(--g500);transition:background .2s,color .2s}
.gnb__item i{font-size:22px}
.gnb__item span{font-size:12px;font-weight:500;letter-spacing:-.3px;line-height:14px}
.gnb__item--on{background:rgba(17,17,17,.06);color:var(--g900)}
.gnb__item--on span{font-weight:600}
/* blur 미지원 브라우저 — 배경 불투명도만 올려 가독성 확보 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gnb{background:rgba(255,255,255,.95)}
}

/* ===== 최소 터치 영역 확보 (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-primary 쪽에 있다) */
.btn-outline-blue:disabled,.btn-outline-blue.is-disabled,
.btn-outline-gray:disabled,.btn-outline-gray.is-disabled{border-color:var(--g200);color:var(--g400)}
.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}
/* display 를 준 요소는 hidden 속성만으로 안 사라진다 — 감추기는 여기서 한 번에 정한다 */
.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)}

/* ---------- 공용 빈 상태 ---------- */
/* 서버가 준 약관·정책 전문 — 줄바꿈이 있는 순수 텍스트다(terms.body).
   pre-line 이 없으면 조 전체가 한 문단으로 붙어 나온다. 결제 약관 시트가 실제로 그랬다 */
.rich-body{font-size:15px;color:var(--g700);letter-spacing:-.35px;line-height:1.7;white-space:pre-line;word-break:break-word}

.empty{display:none;flex-direction:column;align-items:center;gap:10px;padding:72px 16px;text-align:center}
/* 자식 선택자다 — .empty i 로 두면 아래 .empty__cta 안의 아이콘까지 44px 이 된다 */
.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__head — 아이콘·제목·닫기)와 몸(.cfm__body — 설명·버튼)으로 나눈다.
   좌우 여백은 28px 한 값으로 맞춘다 — 예전에는 위 28 / 좌우 16 / 아래 16 이라
   글과 버튼이 모서리에 붙고 위만 비어 있었다.
   버튼은 앱 공용 버튼(.btn-cta .btn-block)을 그대로 쓴다 — 여기서 크기를 따로 두지 않는다. */
.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}
/* 바탕은 카드 전체가 갖는다 — 머리에만 주면 몸통과 만나는 자리에서 한 번 끝나 카드가 두 조각으로 보인다.
   한 색을 선형으로 깔면 판이 죽어서, <b>두 색을 위 양쪽 모서리에서 번지게 해 섞는다</b> —
   왼쪽 위 하늘색과 오른쪽 위 라벤더가 가운데서 만나고 아래로 가며 흰색으로 풀린다 */
.cfm{width:100%;max-width:340px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-pop);
  background:
    radial-gradient(130% 78% at 10% -12%, var(--wash-sky) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(135% 82% at 92% -8%, var(--wash-lilac) 0%, rgba(255,255,255,0) 60%),
    var(--white);
  transform:translateY(12px) scale(.97);transition:transform .24s cubic-bezier(.32,.72,0,1)}
.cfm-backdrop.on .cfm{transform:none}

/* 머리 — 아이콘 배지와 제목을 가운데로 세운다(바탕은 카드가 준다).
   카드 바깥 여백은 네 변이 모두 24 다 — 머리 위 24 · 좌우 24 · 몸 아래 24.
   머리 아래와 몸 위는 0 이다. 제목과 설명은 한 덩어리로 읽히는 말이라 떼어 놓지 않는다 —
   사이를 벌리면 두 개의 다른 말처럼 보인다. 간격은 설명과 버튼 사이에만 준다 */
.cfm__head{position:relative;padding:28px 28px 0;text-align:center}
/* 배지는 테두리 없는 흰 사각이다 — 바탕이 색을 갖고 있어 흰 판과 그림자만으로 떠오른다.
   테두리를 두르면 배지가 아니라 빈 상자처럼 보인다 */
.cfm__icon{width:68px;height:68px;margin:0 auto 16px;border-radius:20px;background:var(--white);
  display:flex;align-items:center;justify-content:center;color:var(--blue-strong);box-shadow:var(--shadow-pop)}
.cfm__icon i{font-size:32px}
.cfm__title{font-size:20px;font-weight:700;color:var(--blue-strong);letter-spacing:-.5px;line-height:28px;word-break:keep-all}
/* 닫기는 취소와 같은 동작이다. 제목 줄과 겹치지 않게 머리 오른쪽 위에 얹는다 */
.cfm__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:var(--radius-full);
  background:var(--g100);color:var(--g700);display:flex;align-items:center;justify-content:center}
.cfm__close i{font-size:18px}

/* 되돌릴 수 없는 확인 — 같은 방식으로 섞되 따뜻한 쪽이다. 붉은색은 바탕과 아이콘에만 쓴다.
   버튼까지 붉게 하면 한 창에 경고가 세 번 나와 정작 읽어야 할 제목이 묻힌다 */
.cfm--danger{background:
  radial-gradient(130% 78% at 10% -12%, var(--wash-peach) 0%, rgba(255,255,255,0) 58%),
  radial-gradient(135% 82% at 92% -8%, var(--wash-rose) 0%, rgba(255,255,255,0) 60%),
  var(--white)}
.cfm--danger .cfm__icon{color:var(--red-500)}

.cfm__body{padding:0 28px 28px}
.cfm__desc{font-size:14px;color:var(--g600);letter-spacing:-.35px;line-height:21px;text-align:center;
  white-space:pre-line;word-break:keep-all}
.cfm__btns{display:flex;flex-direction:column;gap:8px;margin-top:28px}
/* 설명이 없으면 제목 바로 아래가 버튼이다 — 그때는 이 간격이 제목과 버튼을 뗀다 */
.cfm__body > .cfm__btns:first-child{margin-top:24px}

/* 버튼은 <b>채운 것 하나와 글씨만 하나</b>다. 경고 창이라고 버튼 색을 붉게 바꾸지 않는다 —
   채운 버튼은 언제나 권장하는 쪽(`돌아가기`·`이어서 예약할게요`)인데, 붉히면 사람들이 아는
   '붉은 버튼 = 되돌릴 수 없는 일'과 뜻이 거꾸로 붙는다. 경고는 바탕과 아이콘이 이미 말하고 있다.
   그래서 채운 쪽은 두 창 모두 앱 파랑(.btn-primary 그대로)이다.

   잃는 쪽은 바탕을 비우고 테두리만 남긴다 — 회색으로 채우면 버튼 둘이 나란히 서서 어느 쪽이
   권장인지 한 박자 늦게 읽히고, 테두리까지 걷으면 누를 수 있는 것인지가 흐려진다.
   바탕을 흰색이 아니라 투명으로 두는 것은 카드의 바탕색이 그대로 비쳐야 하기 때문이다.
   누를 자리는 그대로다(.btn-cta 높이 52) */
.cfm .btn-outline-gray{background:transparent;color:var(--g600)}
/* 안내 창(EUM.alert)은 버튼이 하나뿐이다 — 채우지 않고 흰 바탕에 테두리만 둔다.
   하나뿐인 버튼을 채우면 고를 것이 있는 확인 창처럼 보인다.
   여기서는 바탕을 흰색으로 둔다 — 버튼이 카드 위쪽에 붙어 아직 색이 남은 자리에 선다 */
.cfm--alert .btn-outline-gray{background:var(--white)}

/* ---------- 앱 하단 푸터 (약관 링크 · 사업자 정보 · 통신판매중개자 고지) ----------
   사용: .app 의 직계 자식으로 페이지 맨 아래(GNB 앞)에 마크업만 붙여넣으면 됨.
   - 페이지 CSS 의존 없음(이 파일만 필요) · 배경 투명(흰/회색 배경 페이지 모두 대응)
   - 사업자 정보 접기/펼치기는 <details> 기본 동작(JS 불필요)
   - GNB 가림 방지는 각 페이지 .app 의 padding-bottom 이 담당(기존 규칙 그대로) */
.appfoot{margin-top:40px;padding:24px 20px 32px;border-top:1px solid var(--g200);
  font-size:13px;line-height:19px;letter-spacing:-.3px;color:var(--g500);word-break:keep-all;overflow-wrap:anywhere}
.appfoot__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.appfoot__links a{display:inline-flex;align-items:center;gap:12px;min-height:32px;color:var(--g700);font-weight:500}
.appfoot__links a + a::before{content:"";width:1px;height:10px;background:var(--g300)}
/* 개인정보처리방침은 다른 링크보다 눈에 띄게 */
.appfoot__links .appfoot__strong{color:var(--g900);font-weight:700}
.appfoot__biz{margin-top:8px}
.appfoot__summary{display:inline-flex;align-items:center;gap:4px;min-height:44px;cursor:pointer;list-style:none;
  color:var(--g700);font-weight:600}
.appfoot__summary::-webkit-details-marker{display:none}
.appfoot__summary i{font-size:14px;color:var(--g500);transition:transform .2s}
.appfoot__biz[open] .appfoot__summary i{transform:rotate(180deg)}
.appfoot__info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:4px 0 8px}
.appfoot__info dt{color:var(--g500);white-space:nowrap}
.appfoot__info dd{color:var(--g700);min-width:0}
.appfoot__notice{margin-top:12px}
.appfoot__copy{margin-top:12px;color:var(--g400)}

/* =========================================
   광고 배너·팝업 (APP-PLAN B-3) — js/promo.js 가 그린다
   홈과 검색 첫 화면이 같은 것을 쓰므로 공통에 둔다.
   배너 한 장의 겉모양(.mice / .adbanner)은 각 화면 CSS 가 그대로 갖고,
   여기서는 사진을 깔고 글씨를 그 위에 올리는 부분만 더한다.
========================================= */
.promo{position:relative;overflow:hidden}
.promo__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 밝은 사진 위의 흰 글씨는 그냥 두면 안 읽힌다 — 운영자가 켜면 어둡게 깐다 */
.promo--dim::after{content:"";position:absolute;inset:0;background:rgba(17,17,17,.38)}
.promo__txt{position:relative;z-index:1;min-width:0}
/* 안쪽 p 들이 제 색(.fs-label 등)을 갖고 있어 부모에만 주면 상속이 덮인다 */
.promo .promo__bg ~ .promo__txt,
.promo .promo__bg ~ .promo__txt *{color:var(--white)}
.promo__sub{margin-top:4px}

/* 팝업 — 시트(아래에서)와 모달(가운데) 두 가지. 운영자가 고른다.
   수치는 마스터 미리보기(admin/css/master/content.css 의 .pv-popup / .pv-bsheet)와 맞춘다 —
   운영자는 그 화면을 보고 만든다. 앱이 다르게 그리면 만든 것과 다른 것이 나간다. */
.promopop-backdrop{position:fixed;inset:0;z-index:120;background:var(--scrim);display:flex;
  justify-content:center;opacity:0;transition:opacity .28s ease}
.promopop-backdrop.on{opacity:1}
.promopop{width:100%;max-width:var(--app-max);background:var(--white);display:flex;flex-direction:column;
  overflow:hidden;transition:transform .28s cubic-bezier(.32,.72,0,1)}
.promopop__body{display:block;position:relative}
/* 팝업 속 한 장 — 링크가 걸려 있으면 이 자리가 <a> 다.
   같은 자리에 걸린 팝업이 둘 이상이면 .promoslide 가 이 장들을 옆으로 넘긴다(배너와 같은 방식).
   점은 사진 위에 얹는다 — 아래에 두면 사진 높이가 고정이라 버튼과 겹친다 */
.promopop__pane{display:block}
.promopop__body .promoslide__dots{position:absolute;left:0;right:0;bottom:10px;margin:0}
.promopop__body .promoslide__dot{background:rgba(255,255,255,.6)}
.promopop__body .promoslide__dot.on{background:var(--white)}
/* <b>높이를 고정하고 잘라 담는다.</b> height:auto 로 두면 세로로 긴 원본이 그대로 늘어나
   화면을 넘고 아래 버튼이 밖으로 밀려난다(실제로 겪었다) */
.promopop__img{display:block;width:100%;object-fit:cover;background:var(--g200)}
.promopop__img--none{background:var(--g200)}
.promopop__foot{flex:none;display:flex;border-top:1px solid var(--g100);
  padding-bottom:env(safe-area-inset-bottom)}
.promopop__today,.promopop__close{background:none;font-size:14px;letter-spacing:-.35px;cursor:pointer}
.promopop__today{color:var(--g500)}

/* 시트 — 아래에서 올라오고 위 모서리만 둥글다. 발은 양끝 정렬 52px (.pv-bsheet-foot) */
.promopop-backdrop:has(.promopop--sheet){align-items:flex-end}
.promopop--sheet{border-radius:20px 20px 0 0;transform:translateY(100%)}
.on .promopop--sheet{transform:translateY(0)}
.promopop--sheet .promopop__img{height:300px}
.promopop--sheet .promopop__foot{align-items:center;justify-content:space-between;padding:0 20px;height:52px}
.promopop--sheet .promopop__foot button{height:52px}
.promopop--sheet .promopop__close{color:var(--g900);font-weight:600}

/* 모달 — 가운데에서 살짝 커지며 뜬다. 발은 두 칸을 반씩 나눈다 (.pv-popup-foot) */
.promopop-backdrop:has(.promopop--modal){align-items:center;padding:0 24px}
.promopop--modal{border-radius:18px;transform:scale(.94)}
.on .promopop--modal{transform:scale(1)}
.promopop--modal .promopop__img{height:280px}
.promopop--modal .promopop__foot button{flex:1;text-align:center;padding:14px 0;font-weight:700}
.promopop--modal .promopop__close{color:var(--blue-500)}

/* 화면이 낮으면(가로로 눕힌 폰·작은 기기) 사진을 줄여서라도 버튼이 화면 안에 남게 한다 */
@media (max-height:640px){
  .promopop--sheet .promopop__img{height:46vh}
  .promopop--modal .promopop__img{height:44vh}
}

/* 배너 자리 — 정해질 때까지 감춘다. 기본 배너가 먼저 보였다가 광고로 바뀌면 화면이 덜컥인다.
   자리는 그대로 두고 보이기만 감춘다(display:none 이면 아래가 올라왔다 내려간다) */
.promo-wait{visibility:hidden}

/* 배너가 둘 이상일 때 — 스크롤 스냅으로 옆으로 넘긴다(라이브러리 없이) */
.promoslide{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.promoslide::-webkit-scrollbar{display:none}
.promoslide__item{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.promoslide__dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.promoslide__dot{width:6px;height:6px;border-radius:50%;background:var(--g300);transition:background .2s ease}
.promoslide__dot.on{background:var(--g700)}