:root{
  color-scheme: light;
  /* ==== v16: 디자인 리뉴얼 - 촌스러운 짙은 주황(테라코타) 톤을 걷어내고,
     차분한 딥그린(에메랄드) 브랜드 컬러 + 정갈한 뉴트럴 배경으로 교체.
     명도/채도를 낮춘 세미틱 색상, 더 부드러운 그림자와 더 큰 모서리
     반경으로 최신 웰니스/SaaS 제품 느낌을 냅니다. ==== */
  --page:#f5f6f1;
  --surface:#ffffff;
  --surface-2:#eef1ea;
  --ink:#171a17;
  --ink-2:#4b524c;
  --ink-muted:#8a9187;
  --line:#e2e6dc;
  --border:rgba(23,26,23,0.09);
  --brand:#2f6f5c;
  --brand-dark:#1f5443;
  --brand-soft:#e1f0e8;
  --good:#1f9d5c;
  --good-soft:#e3f7ec;
  --critical:#e0483f;
  --critical-soft:#fdeceb;
  --warning:#c98a1f;
  --warning-soft:#fbf1de;
  --radius:18px;
  --shadow:0 1px 2px rgba(23,26,23,.05), 0 10px 28px rgba(23,26,23,.07);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  background:var(--page);
  color:var(--ink);
  line-height:1.5;
  padding-bottom:60px;
  -webkit-font-smoothing:antialiased;
}
header.top{
  background:linear-gradient(135deg,#123a2e,#2f6f5c 55%,#4a9179);
  color:#fff;
  padding:22px 24px 60px;
  position:relative;
}
header.top h1{margin:0 0 4px;font-size:22px;letter-spacing:-.2px;font-weight:800;padding-right:0;}
header.top p{margin:0;font-size:13px;opacity:.85;}

/* Language switcher */
.lang-switch{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.lang-switch button{
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;
}
.lang-switch button.active{background:#fff;color:var(--brand-dark);border-color:#fff;}
.lang-switch button:hover{background:rgba(255,255,255,.28);}
.lang-switch button.active:hover{background:#fff;}

/* Mini language switcher shown inside modal headers, so the language can be
   changed without closing the modal (the header's own switcher sits behind
   the modal backdrop while a modal is open). */
.m-head > div{min-width:0;}
.lang-switch-mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.lang-switch-mini button{
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);font-size:10.5px;font-weight:600;cursor:pointer;
}
.lang-switch-mini button.active{background:var(--brand);color:#fff;border-color:var(--brand-dark);}
.nav{
  max-width:1080px;margin:-38px auto 0;padding:0 20px;
  display:flex;gap:8px;position:relative;z-index:5;
}
.nav button{
  flex:1;padding:12px 14px;border-radius:16px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow);transition:.15s;
}
.nav button.active{background:var(--brand);color:#fff;border-color:var(--brand);}
/* v23: "관리자" 버튼을 하단 탭 바에서 헤더 우측 상단의 작은 버튼으로 이동.
   로그인 중에는 로그아웃 버튼도 같은 코너에 나란히 표시되어야 하므로,
   두 버튼을 공용 래퍼(.header-corner)로 묶어 절대 위치를 한 번만 지정하고,
   버튼 자체는 flex 정렬로 서로 겹치지 않게 한다 (언어별 라벨 길이가 달라도 안전). */
.header-corner{
  position:absolute;top:18px;right:20px;z-index:6;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;
  max-width:calc(100% - 40px);
}
.admin-corner-btn, #headerLogoutBtn{
  padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;
  white-space:nowrap;
}
.admin-corner-btn:hover, #headerLogoutBtn:hover{background:rgba(255,255,255,.28);}
.admin-corner-btn.active{background:#fff;color:var(--brand-dark);border-color:#fff;}
/* ==== v28: "마사지사 지원하기" 버튼 - <a> 태그라 기본으로는 밑줄이 붙고
   inline이라 패딩이 어색하게 보일 수 있어 버튼처럼 보이도록 보정 ==== */
.apply-masseuse-btn{text-decoration:none;display:inline-block;}
/* 좁은 화면(모바일)에서는 코너 버튼(관리자/로그아웃)이 언어 선택 버튼 줄과
   같은 위치에서 절대 위치로 겹칠 수 있으므로, 이 너비 이하에서는 절대 위치를
   해제하고 언어 버튼 줄 위에 별도의 줄로 자연스럽게 배치한다. */
@media (max-width:480px){
  .header-corner{position:static;justify-content:flex-start;max-width:100%;margin-bottom:8px;}
}
.wrap{max-width:1080px;margin:24px auto 0;padding:0 20px;}
.view{display:none;}
.view.active{display:block;}
section.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow);
}
section.panel h2{margin:0 0 4px;font-size:16px;}
section.panel .sub{margin:0 0 14px;color:var(--ink-muted);font-size:12.5px;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.row-between h2{margin:0;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:13px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--ink);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:.15s;
}
.btn:hover{filter:brightness(0.97);}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand-dark);}
.btn.primary:hover{background:var(--brand-dark);}
.btn.ghost{background:transparent;}
.btn.danger{background:var(--critical-soft);color:var(--critical);border-color:transparent;}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:10px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* Massage type menu (customer) */
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.type-card{
  border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--surface-2);
  overflow:hidden;transition:.15s;cursor:pointer;
}
.type-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.type-card .type-photo{
  width:calc(100% + 28px);margin:-12px -14px 10px;aspect-ratio:16/9;background:var(--surface);
  overflow:hidden;
}
.type-card .type-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* ==== v42: 서비스 메뉴 2열/3열 밀도 전환 - 마사지 종류가 많은 업체의 모바일
   스크롤을 줄이기 위함. 3열에서는 사진 비율은 유지하되(자동으로 작아짐)
   카드 여백/글자 크기를 줄이고 "시간당" 단위 표기는 숨겨 공간을 아낍니다. ==== */
.type-grid.density-2{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));}
.type-grid.density-3{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;}
.type-grid.density-3 .type-card{border-radius:12px;padding:8px 9px;}
.type-grid.density-3 .type-card .type-photo{width:calc(100% + 18px);margin:-8px -9px 7px;}
.type-grid.density-3 .type-card .name{font-size:11.5px;margin-bottom:2px;}
.type-grid.density-3 .type-card .price{font-size:11.5px;}
.type-grid.density-3 .type-card .unit{display:none;}

@media (max-width:480px){
  .type-grid.density-2{grid-template-columns:repeat(2,1fr);}
  .type-grid.density-3{grid-template-columns:repeat(3,1fr);}
}
.type-card .name{font-weight:700;font-size:14px;margin-bottom:4px;}
.type-card .price{color:var(--brand-dark);font-weight:700;font-size:14px;}
.type-card .unit{color:var(--ink-muted);font-size:11.5px;font-weight:400;}

/* Type photo thumbnail (admin table) */
.type-thumb{
  width:48px;height:48px;border-radius:10px;overflow:hidden;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;
  border:1px solid var(--border);flex-shrink:0;
}
.type-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.type-thumb .overlay-sm{
  position:absolute;inset:0;background:rgba(11,11,11,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:.15s;
}
.type-thumb:hover .overlay-sm{opacity:1;}

/* Masseuse grid */
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.m-card{
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.15s;position:relative;
}
.m-card:hover{transform:translateY(-2px);}
.m-card .info{padding:10px 12px 12px;}
.m-card .name{font-weight:700;font-size:14.5px;}
.m-card .age{color:var(--ink-muted);font-size:12.5px;margin-top:1px;}
.m-card .age .muted{color:var(--ink-muted);opacity:.65;font-style:italic;}
.m-card .badge{
  position:absolute;top:8px;left:8px;background:rgba(11,11,11,.55);color:#fff;
  font-size:11px;padding:3px 8px;border-radius:999px;
}
.m-card .hint{font-size:11.5px;color:var(--brand-dark);margin-top:6px;font-weight:600;}

/* ==== v27: 손님용 마사지사 목록 화면 밀도(2열/3열) 전환 - 마사지사가 많은
   업체(예: 100명)에서 한 명씩 크게만 나오면 스크롤이 매우 길어진다는 피드백에
   따라, "한 화면에 몇 명 보여줄지"를 손님이 직접 고를 수 있게 했습니다.
   density-3(많이 보기)일 때는 카드 안 정보도 함께 압축합니다. ==== */
/* ==== v28 버그 수정: repeat(2,1fr)/repeat(3,1fr)로 컬럼 "개수"를 고정했더니,
   화면이 넓은 PC·노트북·10인치 이상 태블릿에서는 그 2~3개 칸이 화면 전체
   너비로 늘어나 버려서 오히려 카드가 더 커지는 문제가 있었습니다(모바일에서만
   의도대로 동작). auto-fill + minmax로 되돌리되, 카드의 "최소 너비"만
   밀도별로 다르게 주는 방식으로 바꿨습니다 - 화면이 좁은 휴대폰에서는 그
   최소 너비 때문에 자연스럽게 2열/3열이 되고(요청하신 대로), 화면이 넓어질
   수록 같은 카드 크기를 유지한 채 컬럼 수만 자동으로 늘어나서 PC/태블릿에서
   지금까지처럼 알맞은 크기로 여러 명이 보입니다. ==== */
.m-grid.density-2{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
.m-grid.density-3{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;}
.m-grid.density-3 .m-card{border-radius:12px;}
.m-grid.density-3 .m-card .info{padding:6px 7px 7px;}
.m-grid.density-3 .m-card .name{font-size:12px;}
.m-grid.density-3 .m-card .age{font-size:10.5px;}
.m-grid.density-3 .m-card .hint{display:none;}
.m-grid.density-3 .m-card .badge{font-size:9.5px;padding:2px 6px;top:5px;left:5px;}

/* ==== v29 버그 수정: 휴대폰에서 3열(압축 보기)이 2열로만 나오던 문제 ====
   auto-fill+minmax는 "카드 최소 너비"와 "실제 화면 너비"의 나눗셈으로 컬럼 수가
   정해지는 방식이라, PC/태블릿처럼 넓은 화면에서는 잘 늘어나지만 화면이 좁을
   때는 딱 그 경계값에서 의도한 컬럼 수보다 하나 적게 떨어질 수 있습니다.
   실제로 안드로이드 폰의 가장 흔한 너비인 360px(그리고 320px 구형 기종)에서는
   density-3(3열)의 카드 최소 너비 92px가 아주 살짝 넘쳐서 3열이 아니라 2열로
   떨어지고, density-2(2열)도 320px에서는 1열로 떨어지는 문제가 있었습니다.
   그래서 휴대폰 화면(480px 이하 - 이 파일에서 이미 "모바일 기준"으로 쓰고
   있는 값과 동일)에서는 폭 계산에 기대지 않고 컬럼 "개수"를 2열/3열로 못박아,
   기종에 따라 컬럼 수가 흔들리지 않도록 했습니다. 480px보다 넓은 화면
   (태블릿·PC)에서는 그대로 auto-fill+minmax를 써서 v28에서 고친 대로 화면이
   넓어질수록 컬럼 수만 자동으로 늘어나고 카드 크기는 커지지 않습니다. */
@media (max-width:480px){
  .m-grid.density-2{grid-template-columns:repeat(2,1fr);}
  .m-grid.density-3{grid-template-columns:repeat(3,1fr);}
}

.density-toggle{display:flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px;flex-shrink:0;}
.density-btn{
  padding:7px 9px;border-radius:999px;border:none;background:transparent;color:var(--ink-2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.density-btn.active{background:var(--brand);color:#fff;}
.density-icon{display:grid;gap:2px;width:18px;height:14px;}
.density-icon.d2{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);}
.density-icon.d3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);}
.density-icon i{background:currentColor;border-radius:2px;display:block;font-style:normal;}

/* ==== v27: 마사지사 이름 검색 - 인원이 많은 업체에서 사진만으로 특정 사람을
   찾기 어렵다는 피드백에 따라 추가했습니다. 서버 재요청 없이 이미 불러온
   목록을 그 자리에서 필터링합니다 (renderMasseuseGrids 참고). ==== */
.m-search-wrap{position:relative;margin:12px 0 14px;}
.m-search-input{
  width:100%;padding:10px 14px 10px 38px;border-radius:999px;border:1px solid var(--line);
  font-size:14px;background:var(--surface-2);color:var(--ink);font-family:inherit;
}
.m-search-input:focus{outline:2px solid var(--brand);outline-offset:1px;}
.m-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.55;pointer-events:none;}

/* Photo box - 세로형 인물사진 (증명사진 스타일, 3:4 비율) */
.photo-box{
  width:100%;aspect-ratio:3/4;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.photo-box img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-box .placeholder{color:var(--ink-muted);}
/* ==== v25: 고객 화면 사진 비공개 토글의 이모티콘 placeholder ==== */
.photo-box .placeholder.hidden-photo{background:var(--surface-2);}
.photo-box .hidden-photo-emoji{font-size:38px;line-height:1;opacity:.6;}
.photo-box.editable{cursor:pointer;}
.photo-box.editable .overlay{
  position:absolute;inset:0;background:rgba(11,11,11,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
  opacity:0;transition:.15s;text-align:center;padding:6px;
}
.photo-box.editable:hover .overlay{opacity:1;}

/* Admin masseuse card extras */
.m-card.admin .info{padding-bottom:10px;}
/* ==== v25: PR(프리랜서) 표시 배지 ==== */
.freelance-badge{
  display:inline-block;padding:1px 7px;border-radius:999px;background:var(--brand-soft,#f6e9da);
  color:var(--brand-dark,#8f4f16);font-size:10.5px;font-weight:800;vertical-align:middle;
}
.m-card.admin .actions{display:flex;gap:6px;padding:0 12px 12px;}
.add-card{
  border:2px dashed var(--line);border-radius:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;min-height:200px;cursor:pointer;
  color:var(--ink-muted);background:var(--surface-2);
}
.add-card:hover{color:var(--brand-dark);border-color:var(--brand);}
.add-card .plus{font-size:30px;line-height:1;}

/* Admin type management - responsive card grid (replaces the old table,
   which broke badly on narrow/mobile screens: a squeezed table cell with no
   spaces in the Korean name caused the browser to wrap between every single
   character, producing a long vertical column of single characters). */
.type-admin-grid{display:flex;flex-direction:column;gap:10px;}
.type-admin-card{
  display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface-2);flex-wrap:wrap;
}
.type-admin-card .type-thumb-lg{
  width:84px;height:84px;border-radius:13px;overflow:hidden;background:var(--surface);
  display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;
  border:1px solid var(--border);flex-shrink:0;
}
.type-admin-card .type-thumb-lg img{width:100%;height:100%;object-fit:cover;display:block;}
.type-admin-card .type-thumb-lg .overlay-sm{
  position:absolute;inset:0;background:rgba(11,11,11,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;opacity:0;transition:.15s;
}
.type-admin-card .type-thumb-lg:hover .overlay-sm{opacity:1;}
.type-admin-card .type-info{flex:1;min-width:120px;}
.type-admin-card .type-info .name{font-weight:700;font-size:15px;word-break:keep-all;overflow-wrap:break-word;}
.type-admin-card .type-info .price{color:var(--brand-dark);font-weight:700;font-size:13.5px;margin-top:2px;}
.type-admin-card .actions{display:flex;gap:6px;flex-shrink:0;margin-left:auto;}
@media (max-width:480px){
  .type-admin-card{gap:10px;}
  .type-admin-card .type-thumb-lg{width:64px;height:64px;}
  .type-admin-card .actions{width:100%;margin-left:0;justify-content:flex-end;}
}

/* Revenue */
.rev-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px;
}
.stat-tile{
  background:var(--brand-soft);border:1px solid var(--border);border-radius:16px;padding:14px 16px;
}
.stat-tile .label{font-size:12px;color:var(--ink-2);margin-bottom:4px;}
.stat-tile .value{font-size:22px;font-weight:800;color:var(--brand-dark);}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.rev-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--surface-2);}
.rev-card .head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.rev-card .head img.thumb, .rev-card .head .thumb-ph{
  width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-muted);flex-shrink:0;border:1px solid var(--border);
}
.rev-card .head .name{font-weight:700;font-size:14px;}
.rev-card .head .count{font-size:12px;color:var(--ink-muted);}
.rev-card ul{list-style:none;margin:0;padding:0;font-size:12.5px;}
.rev-card li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);color:var(--ink-2);}
.rev-card .total{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-weight:700;font-size:13.5px;}
.rev-card .total .v{color:var(--brand-dark);}
/* v19: 출장비 포함/선결제 예약금 안내 - rev-card 총액 아래 작은 참고 줄 */
.memo-line{font-size:12px;color:var(--ink-muted);margin-top:4px;}
/* v22: 결제 완료 확인 + 영수증 썸네일 - staff_lookup.php에서 입력한 내용을 관리자 예약 목록에 표시 */
.payment-confirm-box{display:flex;align-items:center;gap:8px;margin-top:8px;}
.payment-confirm-box .badge{background:var(--brand-soft, #e6f4ea);color:var(--brand-dark, #1f7a3d);font-size:11.5px;padding:3px 9px;border-radius:20px;font-weight:600;}
.receipt-admin-thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;}
.empty{color:var(--ink-muted);font-size:13px;padding:20px 0;text-align:center;}

/* Sub nav (admin tabs) */
.subnav{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.subnav button{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;
}
.subnav button.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* Modal */
.modal-backdrop{
  display:none;position:fixed;inset:0;background:rgba(11,11,11,.5);
  align-items:center;justify-content:center;z-index:100;padding:16px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--surface);border-radius:20px;max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal .m-head{
  display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2;
}
.modal .m-head h3{margin:0;font-size:15.5px;}
.modal .m-body{padding:16px 18px;}
.modal .m-foot{padding:12px 18px 18px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--line);}
.close-x{background:none;border:none;font-size:18px;color:var(--ink-muted);cursor:pointer;line-height:1;padding:4px;}

/* ==== v26: 종류(서비스) 추가/수정 모달에서 언어별 이름+소개 문구를 한 묶음으로
   보여주는 그룹 상자 - "제목 5개 → 설명 5개" 순서가 헷갈린다는 피드백에 따라,
   한 언어의 이름/소개 문구가 같은 상자 안에 붙어 있도록 시각적으로 묶었습니다. ==== */
.lang-group{
  border:1px solid var(--line);border-radius:14px;padding:12px 12px 2px;margin-bottom:12px;background:var(--surface-2);
}
.lang-group-head{font-size:12.5px;font-weight:700;color:var(--brand-dark);margin-bottom:8px;}

/* ==== v26: 손님용 "서비스 종류 소개" 모달 (customerTypeGrid 카드 클릭 시) ==== */
.type-info-photo{width:100%;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;border-radius:20px 20px 0 0;}
.type-info-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.type-info-photo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px;}
.type-info-name{margin:0 0 8px;font-size:17px;}
.type-info-desc{margin:0 0 14px;white-space:pre-line;line-height:1.6;}
.type-info-price{color:var(--brand-dark);font-weight:700;font-size:16px;}
.type-info-close{
  position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);border-radius:50%;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;z-index:2;
}
/* ==== v26: 상품 소개 모달 전용 미니 언어 전환 버튼 - 사진 좌측 상단에 떠 있어서,
   손님이 모달을 닫지 않고도 그 자리에서 바로 다른 언어의 소개 문구를 볼 수
   있습니다 (기존 bookingModal의 lang-switch-mini와 동일한 패턴). ==== */
.type-info-lang-switch{
  position:absolute;top:10px;left:10px;z-index:2;margin-top:0;
  background:rgba(255,255,255,.85);padding:5px;border-radius:12px;
}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.field input[type=text],.field input[type=number],.field input[type=date],.field input[type=tel],.field input[type=password],.field textarea{
  width:100%;padding:10px 12px;border-radius:11px;border:1px solid var(--line);font-size:14px;background:var(--surface);color:var(--ink);
  font-family:inherit;
}
.field textarea{resize:vertical;line-height:1.6;}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  padding:8px 12px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);
  font-size:13px;cursor:pointer;font-weight:600;color:var(--ink-2);
}
.chip.selected{background:var(--brand);color:#fff;border-color:var(--brand-dark);}
.chip small{display:block;font-weight:400;font-size:10.5px;opacity:.85;}

.time-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.time-slot{
  padding:8px 2px;text-align:center;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;
}
.time-slot.selected{background:var(--good);color:#fff;border-color:var(--good);}
.time-slot.disabled{background:var(--surface);color:var(--ink-muted);text-decoration:line-through;cursor:not-allowed;border-color:var(--line);opacity:.55;}

.summary-box{
  background:var(--brand-soft);border-radius:13px;padding:12px 14px;font-size:13.5px;margin-top:14px;
}
.summary-box .line{display:flex;justify-content:space-between;padding:2px 0;color:var(--ink-2);}
.summary-box .line.total{font-weight:800;font-size:15px;color:var(--brand-dark);border-top:1px dashed var(--border);margin-top:6px;padding-top:8px;}

.photo-upload-row{display:flex;align-items:center;gap:12px;}
.photo-upload-row .photo-box{width:120px;flex-shrink:0;}

/* Toast */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:13px;font-size:13.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.2s;z-index:200;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.lock-note{font-size:11.5px;color:var(--ink-muted);margin-top:2px;}
input[type=file].hidden-input{display:none;}

/* Work hours (masseuse admin modal) */
.work-hours-row{display:flex;align-items:center;gap:8px;}
.work-hours-row select{
  flex:1;padding:10px 12px;border-radius:11px;border:1px solid var(--line);font-size:14px;
  background:var(--surface);color:var(--ink);
}
.work-hours-row span{color:var(--ink-muted);}

/* SNS contact channel chips (booking modal) */
.sns-row{display:flex;flex-wrap:wrap;gap:8px;}
.sns-chip{
  display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface-2);font-size:12.5px;cursor:pointer;font-weight:600;color:var(--ink-2);
}
.sns-chip svg{width:16px;height:16px;flex-shrink:0;}
.sns-chip.selected{background:var(--brand);color:#fff;border-color:var(--brand-dark);}
.sns-chip.selected svg{color:#fff;}

/* Revenue - period toggle + cumulative banner */
.cumulative-banner{
  background:linear-gradient(135deg,#123a2e,#2f6f5c 55%,#4a9179);color:#fff;border-radius:18px;
  padding:16px 18px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;
}
.cumulative-banner .days{font-size:14px;font-weight:600;opacity:.92;}
.cumulative-banner .total{font-size:20px;font-weight:800;}
.cumulative-banner .total .lbl{font-size:12px;font-weight:600;opacity:.8;margin-right:6px;}
.period-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px;}
.period-toggle{display:flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px;}
.period-toggle button{
  padding:7px 16px;border-radius:999px;border:none;background:transparent;color:var(--ink-2);
  font-size:12.5px;font-weight:600;cursor:pointer;
}
.period-toggle button.active{background:var(--ink);color:#fff;}
.field-hint{color:var(--ink-muted);font-size:11.5px;line-height:1.5;margin-top:8px;}
.customer-privacy-footer{text-align:center;padding:18px 0 8px;}
.customer-privacy-footer a{color:var(--ink-muted);font-size:11.5px;text-decoration:underline;}
.customer-privacy-footer a:hover{color:var(--brand-dark);}
.admin-manual-footer{text-align:center;padding:22px 0 10px;margin-top:10px;border-top:1px solid var(--line);}
.admin-manual-footer a{display:inline-block;color:var(--brand-dark);font-size:12.5px;font-weight:600;text-decoration:none;background:var(--brand-soft);padding:7px 14px;border-radius:999px;}
.admin-manual-footer a:hover{background:var(--brand);color:#fff;}
.rev-range{font-size:12px;color:var(--ink-muted);margin-bottom:12px;}

/* v4: referral (여행사/추천인) 소개 안내 박스, 예약 관리 안내, 예약 목록 */
.referral-notice{
  margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--good-soft);color:#0d5c0d;
  font-size:12.5px;font-weight:600;line-height:1.5;
}
/* v19: 출장 예약금(선결제) 사전 안내 - 예약 요약(bookingSummary)에서
   출장 + 예약금 필수 조건일 때 미리 보여주는 안내 박스 */
.deposit-pre-notice{
  margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--warning-soft);color:#8a5c0f;
  font-size:12.5px;font-weight:600;line-height:1.5;
}

/* v20: 위치/연락처 정보 블록 - 일반형(index.html)의 출장 섹션 아래에
   표시되는 카드. home.php는 자체 CSS로 별도 렌더링합니다. */
.contact-info-panel .contact-map-box{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius);
  background:var(--brand-soft);text-decoration:none;color:var(--ink);margin-top:6px;transition:.15s;
}
.contact-info-panel .contact-map-box:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.contact-info-panel .contact-map-box .pin{font-size:22px;line-height:1;}
.contact-info-panel .contact-map-box .map-text{display:flex;flex-direction:column;gap:2px;}
.contact-info-panel .contact-map-box .map-title{font-weight:700;font-size:14px;color:var(--brand-dark);}
.contact-info-panel .contact-map-box .map-address{font-size:12.5px;color:var(--ink-2);}
.contact-info-panel .contact-address-plain{margin-top:6px;font-size:13.5px;color:var(--ink-2);}
.contact-info-panel .contact-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.contact-info-panel .contact-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);text-decoration:none;
  font-size:13px;font-weight:600;transition:.15s;
}
.contact-info-panel .contact-chip:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);}
/* v23: 출장 섹션 아래 푸터 문구 (슈퍼관리자가 업체별로 설정, 비어있으면 자동으로 숨겨짐) */
.outcall-footer-text{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink-muted);text-align:center;}
.outcall-footer-text:empty{display:none;margin:0;padding:0;border:none;}
.admin-entry-note{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);margin-bottom:6px;
}
.booking-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.channel-breakdown, .referrer-settle-summary{margin-top:8px;}
.referrer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}

/* ==== v27: 직원 관리 탭 - 마사지사 접속 코드/정산 방식 표 ==== */
.staff-table-wrap{overflow-x:auto;margin-top:14px;}
.staff-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
.staff-table th, .staff-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);}
.staff-table th{color:var(--ink-muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;}
.staff-table td .staff-code{font-weight:700;letter-spacing:1px;}
.staff-table td .staff-code.muted{color:var(--ink-muted);font-weight:500;letter-spacing:0;}
.staff-table td .actions{display:flex;gap:6px;flex-wrap:wrap;}

/* ==== v27: 예약 관리 카드 - 테라피스트 실시간 작업 상태 배지 ==== */
.job-status-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;background:#f0f0f0;color:#666;margin-left:6px;}
.job-status-badge.status-en_route{background:#fff3cd;color:#856404;}
.job-status-badge.status-in_progress{background:#e3ecfb;color:#1a4a9c;}
.job-status-badge.status-completed{background:#eafaf0;color:#2a7a3a;}

@media (max-width:480px){
  .time-grid{grid-template-columns:repeat(4,1fr);}
}

/* v9: 구독/결제 관리 - 배너, 요금제 안내 박스, 결제 내역 목록 */
.subscription-banner, .billing-banner{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 14px;border-radius:13px;background:#fff3cd;color:#856404;
  font-size:12.5px;font-weight:600;margin:10px 0;
}
.subscription-banner.blocked{background:#fbecec;color:#b02a2a;}
.billing-banner{justify-content:center;text-align:center;}
.sub-status-line{font-size:13.5px;font-weight:600;color:var(--ink-2);margin:2px 0 14px;}
.plan-info-box{
  background:var(--surface-2);border:1px solid var(--line);border-radius:13px;
  padding:12px 14px;font-size:13px;line-height:1.8;color:var(--ink-2);
}
.sub-payment-row{
  display:grid;grid-template-columns:90px 1fr 1fr auto;gap:8px;align-items:center;
  padding:8px 4px;border-bottom:1px solid var(--line);font-size:12.5px;
}
.sub-payment-status{font-weight:600;padding:2px 8px;border-radius:20px;font-size:11.5px;text-align:center;}
.sub-payment-status.status-pending{background:#e3ecfb;color:#1a4a9c;}
.sub-payment-status.status-confirmed{background:var(--good-soft);color:#0d5c0d;}
.sub-payment-status.status-rejected{background:#fbecec;color:#b02a2a;}

/* v10: 결제 QR 이미지 / 출장 예약금(디파짓) */
.qr-preview{
  display:block;max-width:180px;width:100%;border:1px solid var(--line);border-radius:13px;
  padding:8px;background:#fff;margin:10px 0;
}
.checkbox-label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;cursor:pointer;}
.checkbox-label input[type=checkbox]{width:17px;height:17px;}
.payment-qr-panel{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);margin-bottom:14px;
}
.payment-qr-panel .qr-preview{max-width:90px;margin:0;padding:4px;}
.deposit-submitted-box{
  padding:12px 14px;border-radius:13px;background:var(--good-soft);color:#0d5c0d;
  font-size:13px;font-weight:600;line-height:1.6;margin-top:10px;
}
.deposit-review-box{
  margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--line);font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
}
.deposit-review-box .badge{
  font-weight:700;padding:2px 9px;border-radius:20px;font-size:11.5px;background:#fff3cd;color:#856404;
}
.deposit-review-box.status-deposit_expired .badge{background:#fbecec;color:#b02a2a;}
.deposit-review-box.status-deposit_rejected .badge{background:#fbecec;color:#b02a2a;}
.deposit-review-box .actions{display:flex;gap:6px;margin-left:auto;}

/* v11: 구독료 결제 QR - 통화별(라오 낍/미국 달러/태국 바트) 3종 */
.platform-qr-row{display:flex;gap:14px;flex-wrap:wrap;}
.platform-qr-item{text-align:center;}
.platform-qr-item .qr-preview{max-width:110px;margin:4px 0;padding:5px;}
.qr-currency-label{font-weight:700;font-size:12px;color:var(--ink-2);}

/* v12: 통화별 QR 아래에 표시되는 환산 결제 금액 */
.qr-amount{font-weight:700;font-size:12.5px;color:var(--ink);margin-top:2px;}
.qr-amount:empty{display:none;}

/* v12: 업체 정보 탭 - 3가지 통화 결제 QR / 직원 조회 PIN */
.biz-qr-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
.biz-qr-item{text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:10px;min-width:130px;}
.biz-qr-item .qr-preview{max-width:110px;margin:6px auto;padding:5px;}
.biz-qr-item .qr-empty{font-size:11.5px;color:var(--ink-2);padding:14px 4px;}

/* v12: 예약 요약 / 예약금 안내에 붙는 통화별 QR+금액 블록 */
.summary-qr-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.summary-qr-item{text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:8px;}
.summary-qr-item .qr-preview{max-width:100px;margin:4px auto;padding:4px;}