/* 중문판 폰트 오버라이드 — 웹폰트(구글/jsdelivr) 차단 대응, 중국어 시스템 폰트 스택 */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, div {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "Noto Sans SC", "Source Han Sans SC",
    "Helvetica Neue", Arial, sans-serif !important;
}
/* 중문 조판 미세조정: 한국어 대비 자간 0, 줄간 소폭 확대 */
body { letter-spacing: 0 !important; }

/* 텍스트 선택 허용 — 원본의 복사방지(user-select:none) 전체 해제
   (중국 고객이 주소·위챗ID·전화번호를 복사해 지도앱/위챗에 붙여넣는 동선 필수) */
*, *::before, *::after {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}

/* 빌더 테마 변수 — 원본은 동적 테마 CSS로 주입되나 미러에 없어 직접 정의 (라이브 실측값) */
:root {
  --header-bg-color: #ffffff;
  --gradient-color: linear-gradient(90deg, #9A8A6F, #7C6D54);
  --import-color: #d62c2c;
  --main-color: #7C6D54;
  --sub-color: #9A8A6F;
  --main-opacity: rgba(110, 0, 148, 0.22);
}

/* 드래그 하이라이트 — 원본은 var(--main-opacity) 참조인데 변수 미주입 시 투명이 되므로 명시 */
::selection { background: rgba(110, 0, 148, 0.25); }

/* 活动介绍 버튼 — 히어로(투명 헤더) 외에는 브랜드 그라데이션으로 항상 보이게 */
header:not(.trans-state) .color-btn,
body:not(.trans) header .color-btn {
  background-image: var(--gradient-color);
  color: #fff;
  border: 0;
}

/* 상담 팝업 위챗 QR */
.contact-pop .wechat-qr-area { text-align: center; margin: 14px 0 6px; }
.contact-pop .wechat-qr-area img { width: 200px; height: auto; border: 1px solid #eee; border-radius: 8px; }
.contact-pop .wechat-qr-area p { margin-top: 8px; font-size: 14px; }
.contact-pop .wechat-qr-area b { color: #7C6D54; }
.contact-pop .tel-contact { display: block !important; }

/* 약도: 빌더 원래 높이(600px/모바일 350px) 유지 — aspect-ratio로 키우면 홈에서 아래 콘텐츠를 덮어 드래그를 막음 */
/* 지도 위 주소 카드가 약도 이미지에 가려지지 않도록 */
.map-wrap .txt, .map .txt, .map-wrap .footer-txt { position: relative; z-index: 2; }
#map img { position: relative; z-index: 0; }

/* location 연락 아이콘: 카카오 → 위챗(초록+말풍선), 전화 아이콘 보장
   ⚠ 앵커 전체가 아니라 .icon(28px)에만 칠한다 — 全部分类 서랍에선 앵커가 행 전체(340px)라 로고가 늘어남 (모바일 QA 실측 2026-08-10) */
.m-kakao a { background: none !important; }
.m-kakao a::before { background-image: none !important; }
.m-kakao a .icon { background: #2DC100 url(/static/img/wechat_glyph.svg) center/62% no-repeat !important;
  border-radius: 7px; }
/* .icon 없는 구형 마크업 대비: 앵커에 아이콘 크기로만 */
.m-kakao a:not(:has(.icon)) { background: #2DC100 url(/static/img/wechat_glyph.svg) center/58% no-repeat !important;
  border-radius: 50%; }

/* 위챗 QR 팝업: 작은 화면 잘림 방지 + 이벤트 팝업 위 (모바일 QA 2026-08-10) */
.sns-image-popup { z-index: 2147483000 !important; }
.sns-image-popup-content { max-height: 92vh !important; overflow-y: auto !important; }
.sns-image-popup-img { max-height: 52vh !important; }
.sns-image-popup-img img { max-height: 52vh !important; max-width: 100% !important; width: auto !important;
  display: block; margin: 0 auto; }

/* 시술 상세: 빌더의 absolute 제목(.left-top)이 본문(.pro-detail)과 겹침 — 문서 흐름으로 복귀.
   실측(2026-08-12): 901~1199px 구간(창 반쪽·브라우저 줌)에서 빌더 CSS가 자리 확보 없이 absolute 유지
   → 겹침 425~619px. ≥1200px은 빌더 자체 정상이므로 1199px까지 적용 */
@media (max-width: 1199px) {
  .bo-proc-main .left-top { position: static !important; height: auto !important; margin-bottom: 18px; }
}
@media (max-width: 900px) {
  /* 오프캔버스 메뉴(m-nav) 등으로 인한 미세 가로 스크롤 차단 */
  html, body { overflow-x: hidden; }
}
.m-tel a .icon { background-color: #7C6D54 !important;
  background-image: url(/static/resources/images/main/Icon_callWhite.svg) !important;
  background-position: center !important; background-repeat: no-repeat !important;
  background-size: 50% !important; border-radius: 50%; }

/* 우측 플로팅 위젯 (카톡·위챗·TOP — 자체 구현) */
.bo-float { position: fixed; right: 26px; bottom: 110px; z-index: 8000;
  display: flex; flex-direction: column; gap: 12px; }
.bo-float-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.22); padding: 0; }
.bo-float-btn img { width: 28px; height: 28px; }
.bo-f-kakao { background: #FEE500; }
.bo-f-wechat { background: #2DC100; }
.bo-f-top { background: #ffffff; border: 1px solid #d5d5da; font-size: 12px;
  font-weight: 800; color: #555; }
@media (max-width: 767px) {
  .bo-float { right: 14px; bottom: 90px; }
  .bo-float-btn { width: 48px; height: 48px; }
}

/* 오시는 방법 패널 (location) */
.bo-way-panel { background: #7C6D54; color: #fff; border-radius: 14px;
  padding: 28px 30px; margin-top: 22px; position: static; }
.bo-way-panel * { color: #fff; }
.bo-way-panel h4 { font-size: 20px; font-weight: 800; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.25); }
.bo-way-panel ul { list-style: none; margin: 0; padding: 0; }
.bo-way-panel li { display: flex; gap: 14px; align-items: flex-start;
  padding: 9px 0; font-size: 14.5px; line-height: 1.65; }
.bo-way-panel li b { flex: 0 0 128px; font-weight: 700; }
.bo-way-panel li span { flex: 1; color: rgba(255,255,255,.92); }
.bo-way-panel li em { font-style: normal; background: #d62c2c; padding: 1px 8px;
  border-radius: 12px; font-weight: 700; }
@media (max-width: 599px) {
  .bo-way-panel li { flex-direction: column; gap: 4px; }
  .bo-way-panel li b { flex: none; }
}

/* 고덕지도 버튼 (원장 요청 2026-08-13) — POI: beautyz 明洞皮肤科.
   네이버/카카오와 동일한 225×60 솔리드 블록, 고덕 브랜드 블루 (아이콘은 자체 제작 핀) */
.map-service .amap { display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 60px; cursor: pointer; border: 0; border-radius: 0;
  background: linear-gradient(135deg, #00a9ff, #0287fa);
  font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .5px; }
.map-service .amap::before { content: ''; width: 26px; height: 26px; flex: 0 0 auto;
  background: url(/static/img/amap_icon.png) center/contain no-repeat; border-radius: 6px; }
.map-service .amap:hover { filter: brightness(1.06); }

/* 홈 交通指南 지도 버튼: 구글맵 제거 → 고덕지도 (알약형, 네이버/카카오와 동일 규격) */
.map-con .map-btn-area .amap-map { display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; background: linear-gradient(135deg, #00a9ff, #0287fa) !important; border-color: #0287fa !important;
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .3px; cursor: pointer; }
.map-con .map-btn-area .amap-map::before { content: ''; width: 19px; height: 19px; flex: 0 0 auto;
  background: url(/static/img/amap_icon.png) center/contain no-repeat; border-radius: 4px; }
@media (max-width: 767px) {
  .map-con .map-btn-area .amap-map { font-size: 12px; gap: 4px; }
  .map-con .map-btn-area .amap-map::before { width: 16px; height: 16px; }
}

/* 플로팅 4채널 확장 (2026-08-19) */
.bo-f-line { background: #06C755; }
.bo-f-whatsapp { background: #25D366; }

/* 팝업 마스크(9000)·팝업(10001) 위로 — 헤더 조작과 상담 CTA 는 항상 눌려야 한다
   (한일영 사이트와 동일 기준, 2026-08-19 QA) */
header { z-index: 10100 !important; }
.bo-float { z-index: 10200 !important; }