/* beautyz 明洞 중문판 커스텀 페이지 (이벤트·공지·문의) — 사이트 톤(레드 포인트) 유지 */
:root { --bo-red: #7C6D54; --bo-dark: #1a1a1a; --bo-line: #e8e8ec; --bo-muted: #8a8a92; }

.bo-page { max-width: 1200px; margin: 0 auto; padding: 140px 20px 90px; }
@media (max-width: 1199px) { .bo-page { padding-top: 90px; } }

.bo-page-head { text-align: center; margin-bottom: 46px; }
.bo-page-head h2 { font-size: 32px; font-weight: 700; letter-spacing: 0.02em; }
.bo-page-head p { margin-top: 10px; color: var(--bo-muted); font-size: 15px; }

/* 이벤트 카드 그리드 */
.bo-event-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
@media (max-width: 1023px) { .bo-event-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } }
@media (max-width: 559px)  { .bo-event-grid { grid-template-columns: 1fr; } }
.bo-event-grid.small { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .bo-event-grid.small { grid-template-columns: repeat(2, 1fr); } }

.bo-event-card a { display: block; text-decoration: none; color: inherit; }
.bo-card-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 12px; background: #f4f4f6; }
.bo-card-thumb img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease; }
.bo-event-card a:hover .bo-card-thumb img { transform: scale(1.05); }
.bo-thumb-empty { display: flex; align-items: center; justify-content: center;
  height: 100%; color: #ccc; font-weight: 700; letter-spacing: .1em; }
.bo-tag { position: absolute; top: 10px; left: 10px; background: var(--bo-red);
  color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.bo-tag.inline { position: static; display: inline-block; margin-bottom: 12px; }

.bo-card-body { padding: 14px 4px 0; }
.bo-card-title { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bo-card-sub { margin-top: 6px; color: var(--bo-muted); font-size: 13.5px; line-height: 1.5;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.bo-price { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bo-sale-pct { color: #d62c2c; font-weight: 800; font-size: 18px; }
.bo-price-origin { color: #b5b5bc; text-decoration: line-through; font-size: 14px; }
.bo-price-sale { font-weight: 800; font-size: 18px; }
.bo-price.big .bo-sale-pct, .bo-price.big .bo-price-sale { font-size: 26px; }

.bo-empty { grid-column: 1 / -1; text-align: center; color: var(--bo-muted); padding: 80px 0; }

/* 상세 */
.bo-detail { max-width: 860px; }
.bo-detail-head { text-align: center; margin-bottom: 30px; }
.bo-detail-head h2 { font-size: 27px; font-weight: 700; line-height: 1.4; }
.bo-detail-head .bo-price { justify-content: center; margin-top: 14px; }
.bo-detail-hero { width: 100%; border-radius: 14px; margin-bottom: 26px; }
.bo-detail-body { font-size: 15.5px; line-height: 1.8; color: #333; }
.bo-detail-body img { max-width: 100%; display: block; margin: 14px auto; border-radius: 10px; }
.bo-detail-cta { text-align: center; margin-top: 44px; padding-top: 30px;
  border-top: 1px solid var(--bo-line); }
.bo-detail-cta p { color: var(--bo-muted); font-size: 13px; margin-bottom: 16px; }
.bo-btn { display: inline-block; background: var(--bo-red); color: #fff; font-weight: 700;
  padding: 13px 34px; border-radius: 30px; text-decoration: none; margin: 0 5px; }
.bo-btn.ghost { background: #fff; color: var(--bo-dark); border: 1px solid #d5d5da; }
.bo-others { margin-top: 60px; }
.bo-others h3 { font-size: 19px; margin-bottom: 18px; }

/* 이벤트 v2: 탭 필터 + 이미지 카드 + 가격 펼침 (블리비 패턴, 자체 구현) */
.bo-ev-page { max-width: 1200px; }
.bo-ev-search { max-width: 480px; margin: 0 auto 26px; }
.bo-ev-search input { width: 100%; padding: 12px 20px; border: 1px solid #d5d5da;
  border-radius: 6px; font-size: 14.5px; outline: none; }
.bo-ev-search input:focus { border-color: var(--bo-red); }

/* 탭: 격자형 세그먼트 바 (아이콘+라벨, 활성 = 하단 언더라인) */
.bo-ev-tabs { display: grid; grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--bo-line); border-right: 0; margin-bottom: 40px; background: #fff; }
@media (max-width: 1023px) { .bo-ev-tabs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 599px)  { .bo-ev-tabs { grid-template-columns: repeat(4, 1fr); } }
.bo-ev-tabs button { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 6px 16px; border: 0; border-right: 1px solid var(--bo-line);
  border-bottom: 3px solid transparent; background: #fff; cursor: pointer;
  font-size: 14px; color: #555; }
.bo-ev-tabs button i { font-style: normal; font-size: 24px; line-height: 1;
  filter: grayscale(35%); }
.bo-ev-tabs button span { white-space: nowrap; }
.bo-ev-tabs button:hover { color: var(--bo-red); }
.bo-ev-tabs button.on { color: var(--bo-red); font-weight: 700;
  border-bottom-color: var(--bo-red); }
.bo-ev-tabs button.on i { filter: none; }

.bo-ev-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 34px; align-items: start; }
@media (max-width: 1023px) { .bo-ev-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } }
@media (max-width: 599px)  { .bo-ev-grid { grid-template-columns: 1fr; } }
.bo-ev-card { background: #fff; }
.bo-ev-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f4f6; }
.bo-ev-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bo-ev-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 클릭 재생 카드의 재생 버튼 — 원본 .video-play-btn 방식 (Icon_videoPlay.svg) */
.bo-ev-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; border: 0; padding: 0; cursor: pointer;
  background: url(/static/resources/images/common/Icon_videoPlay.svg) no-repeat center center;
  background-size: cover; transition: opacity .25s, transform .2s; }
@media (max-width: 767px) { .bo-ev-play { width: 72px; height: 72px; } }
.bo-ev-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.bo-ev-play.playing { opacity: 0; pointer-events: none; }
.bo-ev-thumb:hover .bo-ev-play.playing { opacity: .85; pointer-events: auto; }
.bo-ev-badge { position: absolute; bottom: 10px; right: 10px; background: var(--bo-red);
  color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; opacity: .92; }
.bo-ev-body { padding: 16px 2px 0; }
.bo-ev-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bo-ev-meta .chip { border: 1px solid #c9c9cf; color: #666; font-size: 12px; padding: 3px 10px; }
.bo-ev-meta .until { color: #999; font-size: 12.5px; }
.bo-ev-title { font-size: 19px; font-weight: 700; color: var(--bo-red); line-height: 1.4; }
.bo-ev-desc { margin-top: 6px; color: #777; font-size: 13.5px; line-height: 1.55;
  padding-bottom: 14px; border-bottom: 1px solid var(--bo-line); }
.bo-ev-rep { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bo-line); }
.bo-ev-rep-name { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.bo-ev-rep-price { margin-top: 4px; display: flex; align-items: baseline; gap: 7px; }
.bo-ev-rep-price .pct { color: #d62c2c; font-weight: 800; font-size: 19px; }
.bo-ev-rep-price .sale { font-weight: 800; font-size: 18px; }
.bo-ev-rep-price .origin { color: #b5b5bc; text-decoration: line-through; font-size: 13px; }
.bo-ev-more { display: block; width: 100%; margin-top: 12px; padding: 11px;
  border: 1px solid #d5d5da; background: #fff; border-radius: 8px; font-size: 13.5px;
  cursor: pointer; color: var(--bo-dark); }
.bo-ev-more .arr { display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  border-right: 2px solid #999; border-bottom: 2px solid #999;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.bo-ev-card.open .bo-ev-more .arr { transform: rotate(-135deg) translateY(-2px); }
.bo-ev-options { display: none; margin-top: 10px; max-height: 420px; overflow-y: auto;
  border-top: 1px solid var(--bo-line); }
.bo-ev-card.open .bo-ev-options { display: block; }
.bo-ev-options ul { list-style: none; margin: 0; padding: 0; }
.bo-ev-options li { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 10px 2px; border-bottom: 1px solid #f1f1f4; }
.bo-ev-options .opt-text span { font-size: 13px; font-weight: 500; line-height: 1.45; display: block; }
.bo-ev-options .opt-link { text-decoration: none; color: inherit; }
.bo-ev-options .opt-link:hover span { color: var(--bo-red); }
.bo-ev-options .opt-link em { font-style: normal; color: var(--bo-red); font-size: 11.5px; font-weight: 700; }
/* 옵션 행 클릭 (전 카테고리): ① 행 전체 클릭 ② 详情 pill 버튼 ③ 호버/터치 피드백 */
.bo-ev-options li.linked { padding: 0; }
.bo-ev-options .opt-row { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; width: 100%; padding: 10px 8px 10px 6px; text-decoration: none; color: inherit;
  cursor: pointer; border-radius: 8px; transition: background .15s; }
.bo-ev-options .opt-row:hover, .bo-ev-options .opt-row:active { background: rgba(124, 109, 84, .06); }
.bo-ev-options .opt-row:hover .opt-text span { color: var(--bo-red); }
.bo-ev-options .opt-row .opt-text { flex: 1 1 auto; min-width: 0; }
.bo-ev-options .opt-pill { flex: 0 0 auto; border: 1.5px solid var(--bo-red); color: var(--bo-red);
  border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; transition: background .15s, color .15s; }
.bo-ev-options .opt-row:hover .opt-pill, .bo-ev-options .opt-row:active .opt-pill {
  background: var(--bo-red); color: #fff; }
/* 시술 상세: 좌 설명 + 우 가격 패널 (원본 레이아웃, 체크박스 없는 열람 전용) */
/* 가격 패널 유무에 따라 컬럼 자동 조정 (원장 지시: 들어온 시술 가격만 → 패널 없을 땐 본문 전폭) */
.bo-proc-layout:not(:has(.bo-proc-prices)) { display: block; }
.bo-proc-layout:not(:has(.bo-proc-prices)) .bo-proc-main { max-width: 900px; margin: 0 auto; }
/* 단일 가격 카드 */
.bo-proc-price-single .pi-single { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.bo-proc-price-single .pi-text span { font-size: 14.5px; font-weight: 700; display: block; line-height: 1.4; }
.bo-proc-price-single .pi-text small { color: #8a8a92; font-size: 12px; display: block; margin-top: 3px; }
.bo-proc-price-single .pi-price { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; }
.bo-proc-price-single .pi-price em { font-style: normal; color: #d62c2c; font-weight: 700; font-size: 14px; }
.bo-proc-price-single .pi-price del { color: #b5b5bc; font-size: 12px; }
.bo-proc-price-single .pi-price b { font-size: 18px; color: #7C6D54; }
.bo-proc-layout { display: grid; grid-template-columns: 1fr 380px; gap: 34px;
  max-width: 1280px; margin: 0 auto; padding: 0 20px; align-items: start; }
@media (max-width: 1023px) { .bo-proc-layout { grid-template-columns: 1fr; } }
.bo-proc-main { min-width: 0; }
.bo-proc-prices { position: sticky; top: 90px; border: 1px solid #e8e8ec;
  border-radius: 14px; background: #fff; padding: 20px 18px;
  max-height: calc(100vh - 120px); overflow-y: auto; }
@media (max-width: 1023px) { .bo-proc-prices { position: static; max-height: none; } }
.bo-proc-prices h4 { font-size: 16px; font-weight: 800; margin: 0 0 12px;
  padding-bottom: 10px; border-bottom: 2px solid #1a1a1a; }
.bo-proc-prices h4 small { color: #8a8a92; font-weight: 400; font-size: 12px; }
.bo-proc-prices ul { list-style: none; margin: 0; padding: 0; }
.bo-proc-prices li { display: flex; justify-content: space-between; gap: 10px;
  align-items: center; padding: 10px 6px; border-bottom: 1px solid #f1f1f4; }
.bo-proc-prices li.cur { background: rgba(110, 0, 148, 0.06);
  border-left: 3px solid #7C6D54; border-radius: 4px; }
.bo-proc-prices .pi-text span { font-size: 13px; font-weight: 500; line-height: 1.45; display: block; }
.bo-proc-prices .pi-text small { color: #8a8a92; font-size: 11.5px; display: block; margin-top: 2px; }
.bo-proc-prices .pi-price { flex: 0 0 auto; display: flex; align-items: baseline; gap: 5px; }
.bo-proc-prices .pi-price em { font-style: normal; color: #d62c2c; font-weight: 700; font-size: 13px; }
.bo-proc-prices .pi-price del { color: #b5b5bc; font-size: 11.5px; }
.bo-proc-prices .pi-price b { font-size: 14px; }
.bo-proc-prices .pi-price .ask { color: #8a8a92; font-size: 12.5px; }
.bo-proc-prices .pi-note { margin-top: 12px; font-size: 12px; color: #8a8a92; text-align: center; }
.bo-proc-prices .pi-note a { color: #7C6D54; font-weight: 700; text-decoration: none; }

/* 시술 상세 페이지 (원본 priceDetail.css 골격 위에 여백만 보정) */
.bo-proc-wrap { padding-top: 130px; }
@media (max-width: 1199px) { .bo-proc-wrap { padding-top: 80px; } }
.bo-proc-wrap video { max-width: 100%; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; background: #000; display: block; }
.bo-vid-wrap { position: relative; display: block; }
.bo-proc-wrap img { max-width: 100%; height: auto; }
.bo-proc-wrap .bo-detail-cta { max-width: 900px; margin: 40px auto 80px; text-align: center;
  padding-top: 30px; border-top: 1px solid #e8e8ec; }
.bo-ev-options .opt-text small { color: var(--bo-muted); font-size: 11.5px; line-height: 1.4; display: block; margin-top: 2px; }
.bo-ev-options .opt-price { flex: 0 0 auto; display: flex; align-items: baseline; gap: 5px; }
.bo-ev-options .pct { color: #d62c2c; font-weight: 700; font-size: 13px; }
.bo-ev-options .origin { color: #b5b5bc; text-decoration: line-through; font-size: 11.5px; }
.bo-ev-options .sale { font-weight: 700; font-size: 14px; }
.bo-ev-options .ask { color: var(--bo-muted); font-size: 12.5px; }

/* 이벤트: 카테고리 탭 + 가격 리스트 */
.bo-event-page { max-width: 1000px; }
.bo-cat-tabs { position: sticky; top: 0; z-index: 20; background: #fff;
  display: flex; gap: 6px; overflow-x: auto; padding: 12px 4px;
  border-bottom: 1px solid var(--bo-line); -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.bo-cat-tabs::-webkit-scrollbar { display: none; }
.bo-cat-tabs a { flex: 0 0 auto; padding: 8px 16px; border-radius: 30px;
  border: 1px solid var(--bo-line); font-size: 13.5px; text-decoration: none;
  color: var(--bo-dark); white-space: nowrap; }
.bo-cat-tabs a.on, .bo-cat-tabs a:hover { background: var(--bo-red);
  border-color: var(--bo-red); color: #fff; }
.bo-cat-section { margin-top: 46px; scroll-margin-top: 90px; }
.bo-cat-title { font-size: 20px; font-weight: 700; padding-bottom: 12px;
  border-bottom: 2px solid var(--bo-dark); }
.bo-price-list { list-style: none; margin: 0; padding: 0; }
.bo-price-list > li { border-bottom: 1px solid var(--bo-line); }
.bo-row { display: flex; justify-content: space-between; align-items: center;
  gap: 18px; padding: 15px 6px; text-decoration: none; color: inherit; }
a.bo-row:hover strong { color: var(--bo-red); }
.bo-row-text strong { font-size: 15px; font-weight: 600; line-height: 1.5; }
.bo-row-text p { margin-top: 4px; color: var(--bo-muted); font-size: 12.5px; line-height: 1.55; }
.bo-row-price { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; text-align: right; }
.bo-row-price .bo-sale-pct { font-size: 15px; }
.bo-row-price .bo-price-origin { font-size: 12.5px; }
.bo-row-price .bo-price-sale { font-size: 16px; }
.bo-price-ask { color: var(--bo-muted); font-size: 13.5px; }
@media (max-width: 559px) {
  .bo-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bo-row-price { align-self: flex-end; }
}

/* 검색 */
.bo-search-form { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.bo-search-form input { flex: 1; padding: 13px 18px; border: 2px solid var(--bo-red);
  border-radius: 30px; font-size: 15px; outline: none; }
.bo-search-form .bo-btn { margin: 0; }

/* 공지 */
.bo-notice-list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px;
  border-top: 2px solid var(--bo-dark); }
.bo-notice-list li a { display: flex; justify-content: space-between; gap: 16px;
  padding: 18px 8px; border-bottom: 1px solid var(--bo-line); text-decoration: none; color: inherit; }
.bo-notice-list li a:hover .bo-notice-title { color: var(--bo-red); }
.bo-notice-title { font-size: 15.5px; font-weight: 600; }
.bo-notice-date { color: var(--bo-muted); font-size: 13.5px; white-space: nowrap; }

/* 문의 */
.bo-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 767px) { .bo-contact-grid { grid-template-columns: 1fr; } }
.bo-contact-card { border: 1px solid var(--bo-line); border-radius: 16px; padding: 34px 28px; text-align: center; }
.bo-contact-card h3 { font-size: 18px; margin-bottom: 18px; color: var(--bo-red); }
.bo-contact-card p { font-size: 14.5px; line-height: 1.7; margin: 6px 0; }
.bo-qr { width: 180px; height: 180px; object-fit: contain; border-radius: 10px;
  border: 1px solid var(--bo-line); margin-bottom: 12px; }
.bo-tel a { font-size: 24px; font-weight: 800; color: var(--bo-dark); text-decoration: none; }
.bo-hours { margin: 14px auto 4px; border-collapse: collapse; font-size: 14px; }
.bo-hours td { padding: 6px 14px; border-bottom: 1px solid var(--bo-line); }
.bo-hours td:first-child { color: var(--bo-muted); }
.bo-muted { color: var(--bo-muted); font-size: 13px; }

/* 검색 결과 행 링크화 (QA 2026-08-12): 행 전체 클릭 + pill + 호버 */
.bo-row-link { text-decoration: none; color: inherit; cursor: pointer;
  border-radius: 8px; transition: background .15s; }
.bo-row-link:hover { background: rgba(124, 109, 84, .06); }
.bo-row-link:hover .bo-row-text strong { color: #7C6D54; }
.bo-row-link .opt-pill { margin-left: 10px; }

/* 이벤트 옵션 행 배지 칩 (관리자 배지 토글과 연동, 2026-08-12) */
.bo-ev-options .opt-tag { font-style: normal; display: inline-block; border: 1px solid #7C6D54;
  color: #7C6D54; font-size: 10.5px; font-weight: 700; border-radius: 10px; padding: 1px 7px;
  margin-right: 6px; vertical-align: 1px; white-space: nowrap; }

/* 언어 스위처 (ko/ja/en, build_pages_kje.py 산출 헤더) — 구분자 + 현재 언어 강조 */
.bo-lang-switch, .bo-lang-switch-m { display: inline-flex; align-items: center; font-size: 12.5px; }
.bo-lang-switch a, .bo-lang-switch-m a { color: var(--bo-muted); text-decoration: none;
  font-weight: 500; letter-spacing: .02em; }
.bo-lang-switch a:not(:first-child)::before, .bo-lang-switch-m a:not(:first-child)::before {
  content: " · "; color: var(--bo-line); }
.bo-lang-switch a.on, .bo-lang-switch-m a.on { color: var(--bo-red); font-weight: 700; }
.bo-lang-switch a:hover, .bo-lang-switch-m a:hover { color: var(--bo-red); }
/* 모바일 드로어(전체메뉴) 최상단 언어 항목 — 헤더 슬롯은 테마 JS가 뒤로가기 버튼으로 덮어써서 여기로 노출.
   테마가 .m-nav-li 를 세로 스택으로 강제하므로 row + 알약 버튼으로 되돌린다(!important 필요). */
.bo-lang-li { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px;
  padding: 12px 20px !important; border-bottom: 1px solid var(--bo-line); }
.bo-lang-li a { width: auto !important; height: auto !important; min-height: 0 !important;
  padding: 7px 15px !important; border: 1px solid var(--bo-line); border-radius: 999px;
  color: var(--bo-muted); text-decoration: none; font-size: 13px; font-weight: 600;
  line-height: 1.2; letter-spacing: .04em; background: none; }
.bo-lang-li a.on { background: var(--bo-red); border-color: var(--bo-red); color: #fff; font-weight: 700; }
.bo-lang-li a::before, .bo-lang-li a::after { content: none !important; }
.head-left-wrap .bo-lang-switch-m { display: none !important; }

/* 시술상세 모바일 겹침 수정 — 테마가 .left-top(시술명+메인영상)을 absolute 로 띄우는데
   원본은 옆 가격패널 기준 레이아웃이라 우리 구조에선 자리가 안 생겨 블록 목록과 겹쳤다.
   PC 에서는 이미 static 이므로 전 폭에서 일반 흐름으로 고정한다. */
.detail-wrap .left-top { position: static !important; }

/* ── 우측 플로팅 상담 채널 (원장 요청 2026-08-19: 카톡·라인·위챗·왓츠앱 4채널) ──
   라인·위챗은 QR 팝업(테마 함수 openSnsImagePopup), 카톡·왓츠앱은 딥링크.
   현재 언어의 주 채널이 맨 위로 온다(빌더 apply_cta). */
.bo-float { position: fixed; right: 26px; bottom: 110px; z-index: 8000;
  display: flex; flex-direction: column; gap: 11px; }
.bo-float-btn { width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: transform .15s ease; }
.bo-float-btn:hover { transform: scale(1.06); }
.bo-float-btn img { width: 27px; height: 27px; object-fit: contain; }
.bo-f-kakao { background: #FEE500; }
.bo-f-line { background: #06C755; }
.bo-f-wechat { background: #2DC100; }
.bo-f-whatsapp { background: #25D366; }
.bo-f-tel { background: #fff; border: 1px solid #e2ddd3; }
.bo-f-top { background: #fff; border: 1px solid #e2ddd3; font-size: 11.5px;
  font-weight: 800; color: #7C6D54; letter-spacing: .03em; }
@media (max-width: 1023px) {
  .bo-float { right: 12px; bottom: 84px; gap: 8px; }
  .bo-float-btn { width: 44px; height: 44px; }
  .bo-float-btn img { width: 22px; height: 22px; }
  .bo-f-top { font-size: 10.5px; }
}

/* 채널 QR 팝업(basic-popup) — 원본은 4개 × 400px = 1600px 고정폭이라 1440 화면에서 横스크롤이 난다.
   1200-1650px 구간에서만 뷰포트 비례로 줄여 4개가 한 줄에 들어가게 한다. */
@media (min-width: 1200px) and (max-width: 1650px) {
  .basic-popup { width: 100vw; }
  .basic-popup .basic-popup-con { width: 25vw; height: auto; }
  .basic-popup .basic-popup-con.order1 { left: 0; }
  .basic-popup .basic-popup-con.order2 { left: 25vw; }
  .basic-popup .basic-popup-con.order3 { left: 50vw; }
  .basic-popup .basic-popup-con.order4 { left: 75vw; }
  .basic-popup img { width: 100%; height: auto; }
}

/* ── 언어 선택 국기 드롭다운 (원본 테마 .select-wrap 구조 재사용) ── */
.bo-lang-drop { position: relative; display: flex; align-items: center; }
.bo-lang-drop .select-wrap { position: relative; display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; color: #444; white-space: nowrap; }
.bo-lang-drop .select-wrap > span { display: flex; align-items: center; gap: 6px; }
.bo-lang-drop .select-wrap img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
/* (아래 '언어 드롭다운 최종' 블록으로 통합) */
.bo-lang-drop .select-wrap.on .header-option-list,
.bo-lang-drop .select-wrap:hover .header-option-list { display: block; }
.bo-lang-drop .option-item { display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; font-size: 13.5px; color: #444; cursor: pointer; }
.bo-lang-drop .option-item:hover { background: #f7f4ee; }
.bo-lang-drop .option-item.on { color: var(--bo-red); font-weight: 700; }
/* 모바일 드로어 알약 안 국기 */
.bo-lang-li a { display: inline-flex !important; align-items: center; gap: 6px; }
.bo-lang-li a img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.bo-lang-drop-m { display: none; }

/* 채널 QR 팝업은 PC 전용. 모바일에선 원본 테마가 4개를 같은 자리에 겹쳐 쌓고(실측),
   애초에 자기 폰 화면의 QR은 스캔할 수 없다. 모바일은 플로팅 딥링크(카톡·왓츠앱)로 대체. */
@media (max-width: 1199px) {
  .basic-popup { display: none !important; }
}
.bo-lang-drop .option-item a { display: flex; align-items: center; gap: 9px; width: 100%;
  color: inherit; text-decoration: none; }

/* ── 버그 수정 3종 (2026-08-19 원장 지적) ────────────────────────────────
   원인은 하나로 수렴: 이벤트 팝업의 .popup-mask 가 z-index 9000 으로 화면 전체를
   덮어 (1) 언어 선택 클릭이 마스크에 먹히고 (2) QR 팝업이 마스크 뒤에 깔렸다.
   게다가 테마 JS 가 붙이는 클래스는 .active 인데 CSS 는 .on 을 보고 있어 목록이 안 열렸다. */

/* (1) 언어 드롭다운 — 테마가 붙이는 .active 대응 + 마스크 위로 */
/* (아래 '언어 드롭다운 최종' 블록으로 통합) */
header .container { position: relative; z-index: 9100; }
.bo-lang-drop { position: relative; z-index: 9200; }
.bo-lang-drop .header-option-list { z-index: 9300; }

/* (2) 채널 QR 팝업 — 마스크(9000) 위로. 원본 CSS 는 100/1000 이라 항상 가려졌다 */
.basic-popup { z-index: 9100 !important; }

/* (3) 시술 상세 상단 여백 축소 — 원본은 헤더 높이 기준 130px/112px 로 과하다 */
.detail-wrap { margin-top: 96px !important; }
@media (max-width: 1199px) { .detail-wrap { margin-top: 68px !important; } }
.bo-proc-wrap { padding-top: 0; }

/* 헤더가 z-index:6 로 자체 stacking context 를 만들어 자식 z-index 가 마스크(9000)를
   못 넘는다 → 헤더 자체를 마스크 위로. 팝업이 떠 있어도 언어 선택·전화는 눌려야 한다. */
header { z-index: 9600 !important; }  /* QR 팝업(9100)·마스크(9000)보다 위 — 헤더 조작은 항상 가능해야 한다 */
/* 원본이 .select-wrap 을 position:initial 로 덮어써서 드롭다운 기준점이 사라진다 */
header .bo-lang-drop .select-wrap { position: relative !important; }
.bo-lang-drop .header-option-list { min-width: 168px; padding: 6px 0; }
.bo-lang-drop .option-item { min-height: 40px; }

/* ── 언어 드롭다운 최종 정리 (2026-08-19) ───────────────────────────────
   테마 원본은 .header-option-list 를 height:0 + overflow:hidden 으로 접어두고
   JS 가 height 를 올려 여는 구조다. display 토글만 해서는 14px 로 찌그러진다(실측).
   위치도 left:calc(50% - 15px) + translateX(-50%) 중앙정렬이라 트리거와 96px 어긋났다.
   그리고 이벤트 팝업이 z-index 10001 이라 헤더(9600)를 덮어 항목 클릭이 막혔다. */
header { z-index: 10100 !important; }
.bo-lang-drop .header-option-list {
  display: block; height: 0; overflow: hidden;
  left: auto !important; right: 0 !important; transform: none !important;
  top: 34px !important; min-width: 168px; padding: 0; }
/* (아래 '언어 드롭다운 최종' 블록으로 통합) */
.bo-lang-drop .header-option-list > ul { display: flex; flex-direction: column; gap: 0; padding: 0; }
.bo-lang-drop .option-item { min-height: 38px; height: auto; }
.bo-lang-drop .option-item a { padding: 9px 14px !important; }

/* 플로팅 상담 CTA 는 팝업(10001)·마스크(9000) 위로 — 병원 사이트에서 상담·전화는
   어떤 상황에서도 눌려야 한다. 팝업 닫기 전까지 전환이 막히는 손실을 없앤다. */
.bo-float { z-index: 10200 !important; }

/* ── 언어 드롭다운 최종 (2026-08-19 원장 재지적) ─────────────────────────
   (1) 호버로 열리지 않게 — 클릭(테마 JS 가 .active 부여)으로만 연다.
   (2) 닫힘 상태에서 흰 실선 잔상 제거 — 테마가 height:0 + overflow:hidden 으로만
       접어서 배경·테두리·그림자가 1px 선처럼 남았다. display:none 으로 완전히 숨긴다. */
.bo-lang-drop .header-option-list {
  display: none !important; height: auto !important; overflow: visible !important;
  position: absolute; left: auto !important; right: 0 !important; transform: none !important;
  top: 34px !important; min-width: 168px; padding: 6px 0 !important;
  background: #fff; border: 1px solid var(--bo-line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.bo-lang-drop .select-wrap.active .header-option-list,
.bo-lang-drop .select-wrap.on .header-option-list { display: block !important; }
.bo-lang-drop .select-wrap { cursor: pointer; }

/* 플로팅 버튼을 브랜드 컬러로 통일 (원장 요청 2026-08-19).
   채널별 고유색(카톡 노랑·라인 초록 등) 대신 브라운 단색 + 흰 아이콘. */
.bo-f-kakao, .bo-f-line, .bo-f-wechat, .bo-f-whatsapp, .bo-f-tel {
  background: var(--bo-red) !important; border: 0 !important; }
.bo-f-top { background: var(--bo-red) !important; border: 0 !important; color: #fff !important; }
.bo-float-btn:hover { filter: brightness(1.08); }

/* 네이버 지도 컨테이너 (키가 있을 때만 렌더 — app/config.py NAVER_MAP_CLIENT_ID) */
.bo-nmap { width: 100%; height: 100%; min-height: 320px; }
.bo-map-note { margin-top: 8px; font-size: 12.5px; color: var(--bo-muted); text-align: center; }

/* 테마 자체 TOP 버튼(검은색, #pageTop) 제거 — 우측 플로팅 스택의 TOP 하나만 쓴다 */
#pageTop { display: none !important; }

/* 모바일 검색 오버레이는 헤더(10100)·플로팅(10200)보다 위에 와야 한다.
   테마 기본값 9000 이라 열어도 헤더 로고가 검색 입력창을 덮었다. */
.m-search.result { z-index: 10400 !important; }
.m-search.result.active ~ .bo-float,
body:has(.m-search.result.active) .bo-float { display: none !important; }

/* ── 모바일 언어 선택 (좌측 상단) ──
   마크업(.head-left-wrap > .bo-lang-drop-m)은 이미 있으나 display:none 이라 안 보였다.
   PC 는 헤더 우측 .bo-lang-drop 을 쓰므로 여기서는 모바일 폭에서만 노출한다. */
@media (max-width: 1199px) {
  /* 언어 버튼은 .head-left-wrap 형제로 두고 직접 배치한다 (테마가 그 안을 뒤로가기 버튼으로 덮어씀) */
  .bo-lang-drop-m { display: block !important; position: absolute !important;
    left: 14px; top: 50%; transform: translateY(-50%); z-index: 5; }
  /* 하위 페이지에서 뒤로가기 버튼이 들어오면 그 오른쪽으로 밀어준다 */
  header .container:has(.m-btn-goback) .bo-lang-drop-m { left: 52px; }
  .bo-lang-drop-m .select-wrap { display: flex !important; align-items: center; gap: 3px;
    cursor: pointer; padding: 4px 2px; }
  .bo-lang-drop-m .select-wrap > span { display: flex; align-items: center; gap: 4px;
    font-size: 0; }                                   /* 헤더에서는 국기만 (로고와 겹침 방지) */
  .bo-lang-drop-m .select-wrap > span::after { content: ""; width: 0; height: 0; font-size: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid #8a8a92; }
  .bo-lang-drop-m .select-wrap > span img { width: 22px; height: 22px; border-radius: 50%; }
  .bo-lang-drop-m .m-lang-list { display: none !important; position: absolute; left: 0; top: 34px;
    min-width: 150px; padding: 0; z-index: 10500; }
  .bo-lang-drop-m .select-wrap.active .m-lang-list,
  .bo-lang-drop-m .select-wrap.on .m-lang-list { display: block !important; }
  .bo-lang-drop-m .m-lang-list { height: auto !important; max-height: none !important;
    overflow: visible !important; }
  .bo-lang-drop-m .m-lang-list ul { margin: 0; padding: 6px 0; list-style: none;
    background: #fff; border: 1px solid #e8e8ec; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); }
  .bo-lang-drop-m .m-lang-list li { height: auto; }
  .bo-lang-drop-m .m-lang-list li a { display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; font-size: 14px; color: #1a1a1a; white-space: nowrap; }
  .bo-lang-drop-m .m-lang-list li a img { width: 18px; height: 18px; border-radius: 50%; }
  .bo-lang-drop-m .m-lang-list li.on a { font-weight: 700; }
}