@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap");
/* ↑ 롤링 띠 제목 전용 디스플레이 세리프. 로고 워드마크(BEAUTY Z CLINIC)의 세리프 결과 맞춘다.
   본문은 테마 기본(Pretendard) 유지 — 세리프는 이 제목 한 곳에만 쓴다. */
/* 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; } }
/* 🚨 min-width:0 — 그리드 아이템의 기본 min-width:auto(=min-content) 가 트랙을 밀어내는 것을 막는다.
   iOS Safari 실측(2026-09-18 원장 신고): 옵션 제목이 안 접히면 카드가 765px 로 부풀어 뷰포트(390) 밖으로
   잘렸다. 트랙은 전 카드 공용이라 한 카드만 열어도 19장이 전부 커진다. 지우지 마라. */
.bo-ev-card { background: #fff; min-width: 0; }
.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; }
/* 옵션 행 = 세로 스택 (원장 지시 2026-08-26, 레퍼런스 5번 이미지):
   1행 시술명(전폭) · 2행 부제 · 3행 [할인율 현재가 정가] + 우측 끝 상세.
   좌우 2단이면 시술명이 좁아 3줄로 접힌다 — 제목에 행 전체 폭을 준다. */
.bo-ev-options li { display: block; padding: 13px 10px; border-bottom: 1px solid #f1f1f4; }
.bo-ev-options li:nth-child(even) { background: #fafafa; }
.bo-ev-options li > .opt-text { display: block; }
/* 🚨 overflow-wrap 은 break-word 가 아니라 anywhere 다. break-word 는 「넘칠 때만 끊는다」라
   min-content 계산에 반영되지 않아, 공백 없는 제목(기간한정[스킨케어EVENT]압출(얼굴전체)+…)이
   keep-all 과 만나면 한 줄 폭 그대로 부모를 밀어낸다. WebKit(iOS) 에서 실제로 밀렸다.
   앞줄 break-word 는 anywhere 를 모르는 구형 엔진(iOS 15.3 이하)용 폴백이다 — 지우지 마라. */
.bo-ev-options .opt-text span { font-size: 14.5px; font-weight: 600; line-height: 1.5; display: block;
  word-break: keep-all; overflow-wrap: break-word; overflow-wrap: anywhere; }
.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: block; width: 100%; padding: 13px 10px;
  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 { display: block; }
.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;
  overflow-wrap: break-word; overflow-wrap: anywhere; }
.bo-ev-options .opt-priceline { display: flex; align-items: baseline; gap: 8px;
  margin-top: 7px; width: 100%; flex-wrap: nowrap; }
.bo-ev-options .pct { color: #d62c2c; font-weight: 800; font-size: 16px; }
.bo-ev-options .sale { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.bo-ev-options .origin { color: #b5b5bc; text-decoration: line-through; font-size: 13px; }
.bo-ev-options .ask { color: var(--bo-muted); font-size: 14px; }
.bo-ev-options .opt-priceline .opt-pill { margin-left: auto; align-self: center; }
/* 모바일: 우측 고정 CTA(.bo-float, 44px, x=334~378)가 상세 버튼을 덮어 안 눌렸다
   (2026-08-26 히트테스트 실측 — blocker: DIV.bo-float). 행 오른쪽을 그만큼 비운다. */
@media (max-width: 1023px) {
  .bo-ev-options li, .bo-ev-options li.linked { padding-right: 34px; }
  .bo-ev-options .opt-row { padding-right: 4px; }
  .bo-ev-options .sale { font-size: 18px; }
  .bo-ev-options .pct { font-size: 15px; }
}

/* 이벤트: 카테고리 탭 + 가격 리스트 */
.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; }
/* 🚨 2026-09-10 QA — 320-430px 에서 English 만 세로로 어긋나 보이던 원인.
   테마 CSS 가 img 를 display:block 으로 깔아 **아이콘이 한 줄을 먹고 글자가 그 아래로** 떨어졌다.
   CJK 3개는 글자 폭이 12-14px 라 접혀 버튼이 2줄(62px)이 되고, English 는 47px 로 넓어
   접히지 않아 1줄(31px)로 남는다 → align-items:center 가 그 하나만 가운데로 띄운다.
   480px 부터는 CJK 도 안 접혀 4개가 같아지므로 「화면 크기에 따라」 로 보였다.
   고치는 지점은 정렬이 아니라 **아이콘의 display 와 줄바꿈**이다. */
.bo-lang-li a { display: inline-flex !important; align-items: center; gap: 5px;
  white-space: nowrap !important; }
.bo-lang-li a img { display: inline-block !important; width: 16px; height: 16px;
  flex: 0 0 auto; vertical-align: middle; margin: 0 !important; }
/* 좁은 폭에서 4개가 한 줄에 안 들어가면 줄바꿈하되 버튼 높이는 유지한다(가로 넘침 방지) */
.bo-lang-li { flex-wrap: wrap !important; row-gap: 8px; }
/* 480px 미만에서는 3+1 로 감겨 마지막 하나만 떨어졌다(실측 360-430).
   좌우 여백·버튼 패딩·자간을 줄여 4개를 한 줄에 넣는다. 폰트 크기는 건드리지 않는다. */
@media (max-width: 479px) {
  /* 🚨 여백·패딩을 줄여 「필요폭 < 가용폭」을 맞추는 방식은 불안정했다 —
     360px 에서 계산상 13px 여유가 있는데도 감겼다(실측). 폭 계산에 의존하지 않고
     4개를 균등 분할해 항상 한 줄에 들어가게 한다. 글자는 nowrap 이라 접히지 않는다. */
  .bo-lang-li { padding-left: 12px !important; padding-right: 12px !important;
    gap: 5px; flex-wrap: nowrap !important; }
  .bo-lang-li a { flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 7px 4px !important; letter-spacing: 0; font-size: 12px; }
  .bo-lang-li a img { width: 14px; height: 14px; }
  /* 2026-10-02 — 繁體中文 이 붙어 5개가 됐다. 390px 에서 칸당 69px 인데 「아이콘+繁體中文」은 75px 라 잘렸다(qa_interact L6).
     좁은 폭의 드로어 알약에서만 아이콘을 뗀다(글자만 56px). PC 드롭다운·480px 이상은 아이콘 유지. */
  .bo-lang-li a img { display: 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; }
}

/* ── beautyz 로고 (2026-08-20 수령) ──
   구 로고는 가로로 긴 워드마크(비율 6:1)였고 새 로고는 비율 1.91:1 로 컴팩트하다.
   height 만 지정된 상태로 두면 너무 작아 보이므로 표시 높이를 키운다. */
header .container a.logo,
header .container a.logo img { height: 58px !important; width: auto !important; }
@media (max-width: 1199px) {
  header .container a.logo,
  header .container a.logo img { height: 42px !important; }
}
footer img[src*="/logo/bottom-"], .footer img[src*="/logo/bottom-"] {
  height: 34px !important; width: auto !important; }

/* 헤더 로고 v2 (하단 한글 줄 제거판) — 요청대로 더 크게 */
header .container a.logo,
header .container a.logo img { height: 74px !important; width: auto !important; }
@media (max-width: 1199px) {
  header .container a.logo,
  header .container a.logo img { height: 50px !important; }
}

/* ── 메인 검색창 아래 롤링 이미지 띠 (원장 요청 2026-08-26) ──
   항목이 적으면 2벌 복제만으로는 화면 끝에 빈 구간이 생긴다. 그래서 칸 크기를 CSS로 고정하고
   (이미지 로딩을 기다리지 않고 폭을 계산할 수 있게) site-extra.js 가 화면 폭을 채울 때까지
   한 벌을 반복해 만든 뒤 그 한 벌을 정확히 두 번 이어 붙인다 → -50% 이동이 항상 seamless.
   ⚠️ 이동량 보정은 `-50% - (gap / 2)` 다. gap 을 바꾸면 키프레임도 같이 바꿔야 이음매가 어긋나지 않는다.
   타일 크기는 리진의원 레퍼런스 실측(가로 = 화면의 52%, 비율 1.8:1)을 기준으로 잡았다. */
.bo-strip-wrap { --tile-w: min(52vw, 900px); --tile-h: calc(min(52vw, 900px) / 1.8);
  --tile-gap: 22px; background: #fff; padding: 104px 0 108px; overflow: hidden; }
.bo-strip-head { text-align: center; padding: 0 20px; margin-bottom: 54px; }
.bo-strip-head h2 { font-family: "Cormorant Garamond", "Nanum Myeongjo", Georgia, serif;
  font-weight: 300; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.16;
  letter-spacing: 0.01em; color: var(--bo-dark); }
.bo-strip-head p { margin-top: 20px; font-size: 15.5px; line-height: 1.95;
  color: #6f6f78; letter-spacing: -0.01em;
  /* 한국어는 기본 줄바꿈이 글자 단위라 '공간입니 / 다.' 처럼 낱글자가 떨어진다 → 어절 단위로. */
  word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
.bo-strip { overflow: hidden; width: 100%; -webkit-mask-image:
  linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.bo-strip-track { display: flex; align-items: center; gap: var(--tile-gap); width: max-content;
  margin: 0; padding: 0; list-style: none; }
.bo-strip-track.is-rolling { animation: bo-strip-scroll linear infinite; }
/* 호버 일시정지는 뺐다 — 띠가 화면 절반을 차지해 커서가 얹히기만 해도 멈춘 것처럼 보인다.
   띠 안에 누를 것도 없어서 멈출 이유가 없다 (원장 지적 2026-08-26). */
.bo-strip-track li { flex: 0 0 auto; margin: 0; width: var(--tile-w); }
.bo-strip-track img { display: block; width: var(--tile-w); height: var(--tile-h);
  max-width: none; border-radius: 14px; object-fit: cover; background: #f4f3f1; }
@keyframes bo-strip-scroll { from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - 11px), 0, 0); } }
@media (max-width: 1023px) {
  .bo-strip-wrap { --tile-w: min(78vw, 430px); --tile-h: calc(min(78vw, 430px) / 1.55);
    --tile-gap: 12px; padding: 62px 0 66px; }
  /* 좌우 56px: 우측 고정 CTA(.bo-float)가 가운데정렬 소제목을 덮던 문제 (N10과 같은 유형).
     가운데정렬이라 한쪽만 비울 수 없어 대칭으로 준다 — 실측 텍스트 우측 끝 332px < 플로팅 334px. */
  /* 우측 62px: 고정 CTA(.bo-float)가 가운데정렬 소제목을 덮던 문제 (N10과 같은 유형).
     좌우를 똑같이 비우면 소제목이 5줄로 흩어져서, 오른쪽만 더 비우고 왼쪽은 24px로 둔다
     (실측 390·430px 폭에서 3줄 유지 + 플로팅과 겹침 0). */
  .bo-strip-head { margin-bottom: 32px; padding: 0 62px 0 24px; }
  .bo-strip-head p { margin-top: 14px; font-size: 13.5px; line-height: 1.85; }
  .bo-strip-track img { border-radius: 10px; }
  @keyframes bo-strip-scroll { from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-50% - 6px), 0, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  .bo-strip-track.is-rolling { animation: none; }
  .bo-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ── 플로팅 버튼: 여러 항목 펼침 패널 (2026-09-10 원장 요청) ──
   버튼 하나에 QR·링크가 2개 이상이면 눌러서 펼친다. 레일 왼쪽에 붙는다.
   🚨 여기에 `.bo-float { position: relative; }` 를 두지 마라 (2026-09-12 장애 원인).
   패널 기준점을 만들려고 넣었는데, 위(347행)의 `position: fixed` 를 같은 특정도·뒤 순서로
   덮어버려서 레일이 일반 흐름으로 떨어졌다 — 실측: 문서 맨 아래(y=2929)로 밀려 화면에서
   사라지고, 남아 있던 `right: 26px` 가 relative 오프셋으로 해석돼 x=-26 으로 왼쪽에 잘렸다.
   fixed 도 absolute 자식의 컨테이닝 블록이라 relative 는 애초에 필요 없다
   (검증: 패널이 모바일·PC 양쪽에서 레일 왼쪽에 정상 부착). */
.bo-float-panel {
  position: absolute; right: 100%; margin-right: 10px;
  min-width: 190px; max-width: 78vw;
  background: #fff; border: 1px solid #e4e0d8; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: 14px; z-index: 60;
  text-align: center;
}
.bo-float-panel-tit { margin: 0 0 10px; font-weight: 700; font-size: 14px; color: #33302b; }
.bo-float-panel-item { margin-bottom: 12px; }
.bo-float-panel-item:last-child { margin-bottom: 0; }
.bo-float-panel-item img { width: 132px; height: 132px; object-fit: contain; display: block; margin: 0 auto 6px; }
.bo-float-panel-item span { display: block; font-size: 13px; font-weight: 600; color: #33302b; }
.bo-float-panel-item small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; color: #8a8578; }
.bo-float-panel-link {
  display: block; width: 100%; margin-bottom: 8px; padding: 9px 12px;
  border: 1px solid #e4e0d8; border-radius: 8px; background: #faf8f4;
  font-size: 13px; font-weight: 600; color: #33302b; text-decoration: none; cursor: pointer;
}
.bo-float-panel-link:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .bo-float-panel { right: 0; left: auto; top: auto; bottom: 100%; margin: 0 0 10px; }
  .bo-float-panel-item img { width: 116px; height: 116px; }
}

/* ── 예약 신청 폼 (/contact) ───────────────────────────────── */
/* 왼쪽 = 예약 신청 · 오른쪽 = 카톡 상담 + 전화·오시는 길(합침) */
.bo-contact-grid { grid-template-columns: 1.08fr 0.92fr; align-items: start; max-width: 1040px; gap: 26px; }
@media (max-width: 900px) { .bo-contact-grid { grid-template-columns: 1fr; } }
.bo-contact-card.bo-reserve { text-align: left; padding: 34px 30px 30px; }
.bo-reserve-head { text-align: center; margin-bottom: 22px; }
.bo-reserve-head h3 { font-size: 18px; color: var(--bo-red); }
.bo-rv-alert { background: #fdf1f1; border: 1px solid #f0c6c6; color: #a02525; border-radius: 9px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
.bo-rv-field { margin-bottom: 18px; }
.bo-rv-field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: #333; }
.bo-rv-field label em { font-style: normal; color: var(--bo-red); font-size: 12px; font-weight: 700; margin-left: 5px; }
.bo-rv-field input[type=text], .bo-rv-field input[type=tel], .bo-rv-field input[type=email], .bo-rv-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #d5d5da; border-radius: 10px;
  font-size: 14.5px; font-family: inherit; color: #333; background: #fff; outline: none;
  height: 46px; box-sizing: border-box; }
.bo-rv-field textarea { height: auto; min-height: 84px; resize: vertical; line-height: 1.6; }
.bo-rv-field input::placeholder, .bo-rv-field textarea::placeholder { color: #b5b5bc; }
.bo-rv-field input:focus, .bo-rv-field textarea:focus { border-color: var(--bo-red); }
.bo-rv-hp { position: absolute; left: -9999px; }
/* 휴대폰 문자 인증(국문 예약 폼) — 입력 + 버튼 한 줄 */
.bo-otp-row { display: flex; gap: 8px; }
.bo-otp-row[hidden] { display: none; }
.bo-otp-row input { flex: 1; min-width: 0; }
.bo-otp-row + .bo-otp-row { margin-top: 8px; }
.bo-otp-btn { flex: none; height: 46px; padding: 0 16px; border: 1px solid var(--bo-red); background: #fff;
  color: var(--bo-red); border-radius: 10px; font-size: 13.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap; }
.bo-otp-btn:disabled { border-color: #d5d5da; color: #9a9aa2; cursor: default; }
.bo-otp-status:empty { display: none; }
.bo-otp-status.ok { color: #1f8a4c; }
.bo-otp-status.bad { color: #a02525; }
.bo-rv-field input[readonly] { background: #f6f6f8; color: #666; }
/* 내 예약 확인·변경·취소(/reserve/my, 국문) */
.bo-contact-grid.bo-my { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.bo-rv-ok { background: #eef8f1; border: 1px solid #bfe3cb; color: #1f6b3a; border-radius: 9px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
.bo-my-item { border: 1px solid #e4e4e8; border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.bo-my-when { font-size: 16px; font-weight: 700; color: #222; }
.bo-my-who { font-size: 13.5px; color: #666; margin-top: 4px; }
.bo-my-state { font-size: 13.5px; color: #a0522d; margin-top: 10px; font-weight: 700; }
.bo-my-act { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.bo-my-act form { margin: 0; }
.bo-my-act .bo-btn { margin: 0; }
.bo-my-now { font-size: 14px; margin-bottom: 16px; }
.bo-rv-link { text-align: center; font-size: 13.5px; margin: -6px 0 18px; }
.bo-rv-link a { color: var(--bo-red); text-decoration: underline; }
/* 국가번호 + 번호 한 줄(일·영 예약 폼) */
.bo-cc-row { display: flex; gap: 8px; }
.bo-cc-row select { flex: 0 1 44%; min-width: 0; height: 46px; padding: 0 10px; border: 1px solid #d5d5da;
  border-radius: 10px; font-size: 14px; font-family: inherit; color: #333; outline: none;
  /* 테마 common.css 가 폼 요소 appearance 를 죽여 화살표가 없다 — 드롭다운인 줄 모른다. 직접 그린다 */
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; }
.bo-cc-row select:focus { border-color: var(--bo-red); }
.bo-cc-row input { flex: 1; min-width: 0; }

/* 달력 */
.bo-cal { border: 1px solid #e3e3e8; border-radius: 12px; padding: 14px 14px 10px; }
.bo-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bo-cal-title { font-size: 15px; font-weight: 700; color: #333; }
.bo-cal-nav { width: 30px; height: 30px; border: 1px solid #e3e3e8; border-radius: 8px;
  background: #fff; color: #555; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.bo-cal-nav:hover { border-color: var(--bo-red); color: var(--bo-red); }
.bo-cal-nav[disabled] { opacity: .35; cursor: default; }
.bo-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.bo-cal-dow span { text-align: center; font-size: 12px; color: var(--bo-muted); padding: 6px 0; }
.bo-cal-dow .sun { color: #c2554f; } .bo-cal-dow .sat { color: #4f6fb0; }
.bo-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bo-cal-grid button { aspect-ratio: 1 / 1; border: 0; background: none; border-radius: 50%;
  font-size: 14px; font-family: inherit; color: #333; cursor: pointer; padding: 0; }
.bo-cal-grid button:hover:not([disabled]) { background: #f3efe9; }
.bo-cal-grid button[disabled] { color: #cfcfd5; cursor: default; }
/* :hover 특이도가 높아 선택 표시를 덮는다 — hover 까지 같이 지정해 이긴다 */
.bo-cal-grid button.on, .bo-cal-grid button.on:hover:not([disabled]) {
  background: var(--bo-red); color: #fff; font-weight: 700; }
.bo-cal-grid button.today:not(.on) { box-shadow: inset 0 0 0 1px #d8cfc0; }
.bo-cal-grid .pad { aspect-ratio: 1 / 1; }

/* 시간 선택 */
.bo-time-empty { font-size: 13px; color: var(--bo-muted); padding: 14px 0 2px; }
.bo-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.bo-time-grid button { padding: 10px 0; border: 1px solid #d5d5da; border-radius: 9px;
  background: #fff; font-size: 13.5px; font-family: inherit; color: #333; cursor: pointer; }
.bo-time-grid button:hover { border-color: var(--bo-red); color: var(--bo-red); }
.bo-time-grid button.on { background: var(--bo-red); border-color: var(--bo-red); color: #fff; font-weight: 700; }
@media (max-width: 400px) { .bo-time-grid { grid-template-columns: repeat(3, 1fr); } }

/* 동의·제출 */
.bo-rv-agree { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--bo-line); }
.bo-rv-agree label { display: flex; align-items: flex-start; gap: 9px; font-size: 13px;
  font-weight: 400; color: #444; line-height: 1.6; cursor: pointer; }
/* 테마 common.css 가 checkbox 의 appearance 를 none 으로 죽여 아예 안 보인다 — 직접 그린다 */
.bo-rv-agree input { appearance: none; -webkit-appearance: none; width: 19px; height: 19px;
  margin: 1px 0 0; flex: none; border: 1px solid #c2c2c9; border-radius: 5px; background: #fff;
  cursor: pointer; position: relative; }
.bo-rv-agree input:checked { background: var(--bo-red); border-color: var(--bo-red); }
.bo-rv-agree input:checked::after { content: ""; position: absolute; left: 6px; top: 2.5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bo-rv-agree a { color: var(--bo-red); text-decoration: underline; }
.bo-rv-submit { text-align: center; margin-top: 22px; }
.bo-rv-submit button { width: 100%; background: var(--bo-red); color: #fff; font-weight: 700;
  font-size: 15.5px; border: 0; border-radius: 999px; padding: 15px 0; cursor: pointer;
  font-family: inherit; letter-spacing: .02em; }
.bo-rv-note { text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--bo-muted); line-height: 1.7; }

/* 오른쪽 카드 — 카톡/전화 두 덩어리 사이 구분선. 테마가 hr 폭을 짧게 잡아 토막이 된다 */
.bo-contact-card .bo-cc-sep { display: block; width: 100%; height: 0; margin: 28px 0 26px;
  border: 0; border-top: 1px solid var(--bo-line); background: none; }
.bo-contact-card .bo-cc-part > h3 { margin-top: 0; }

@media (max-width: 767px) { .bo-contact-card.bo-reserve { padding: 26px 18px 24px; } }

/* 예약 신청 완료 화면 */
.bo-rv-done { max-width: 560px; margin: 0 auto; text-align: center; padding: 20px 0 10px; }
.bo-rv-done-mark { width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--bo-red); color: #fff; font-size: 30px; line-height: 62px; font-weight: 700; }
.bo-rv-done h2 { font-size: 24px; font-weight: 700; margin-bottom: 14px; }
.bo-rv-done p { font-size: 15px; line-height: 1.75; color: #444; margin-bottom: 10px; }
.bo-rv-done .bo-muted { font-size: 13px; }
.bo-rv-done .bo-btn { margin-top: 22px; }

/* 예약 폼 — 방문 구분(초진·재진) */
.bo-rv-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-rv-visit label { display: block; margin: 0; cursor: pointer; }
.bo-rv-visit input { position: absolute; opacity: 0; width: 0; height: 0; }
.bo-rv-visit span { display: block; text-align: center; padding: 12px 0; border: 1px solid #d5d5da;
  border-radius: 10px; font-size: 14.5px; font-weight: 400; color: #333; background: #fff; }
.bo-rv-visit label:hover span { border-color: var(--bo-red); color: var(--bo-red); }
.bo-rv-visit input:checked + span { background: var(--bo-red); border-color: var(--bo-red);
  color: #fff; font-weight: 700; }
.bo-rv-visit input:focus-visible + span { outline: 2px solid var(--bo-red); outline-offset: 2px; }
.bo-rv-hint { display: block; margin-top: 7px; font-size: 12.5px; color: var(--bo-muted); line-height: 1.5; }

/* ── 대만판(zh-Tw) 번체 서체 (2026-10-02) ──
   테마 common.css 의 `*{font-family:"Pretendard JP",…}` 는 한자를 일본식 자형으로 그린다(Pretendard JP 내장 한자).
   :where() 로 특이도 0 — `*` 와 같은 급이라 뒤에 오는 이 파일이 이기고, .eng·.num(Montserrat)은 그대로 둔다. */
:where(html:lang(zh-Hant)) * {
  font-family: "Pretendard Variable", Pretendard, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
               "Heiti TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 외화 참고 환산 (2026-10-07, app/fx.py) — 원장 레퍼런스(velyB) 꼴: 원화 가격 바로 옆 같은 줄에 연회색 `9.65 USD`.
   폭이 모자라면 줄째 넘어간다(가격 줄 flex-wrap). 그룹 머리엔 `1,000 KRW = 0.74 USD`. 한국어 사이트엔 안 붙는다 */
.bo-fx { color: #a3a3ab; font-weight: 700; font-size: 15px; white-space: nowrap; letter-spacing: -0.01em; }
.bo-ev-options .opt-priceline { flex-wrap: wrap; row-gap: 2px; }
.bo-ev-options .bo-fx { font-size: 16px; }
.bo-detail-head .bo-fx { font-size: 20px; }
.bo-row-price { flex-wrap: wrap; justify-content: flex-end; }
.bo-row-price .bo-fx { font-size: 14px; }
.bo-ev-rep-price { flex-wrap: wrap; }
/* 시술가격 박스는 옆 제목 칸이 좁아지지 않게 외화를 가격 아래 줄로 */
.bo-proc-price-single .pi-price { flex-wrap: wrap; justify-content: flex-end; max-width: 58%; }
.bo-proc-price-single .pi-price .bo-fx { flex-basis: 100%; text-align: right; }
.bo-fx-rate { color: #8a8a92; font-size: 12.5px; text-align: right; margin: 6px 0 0; }
.bo-fx-note { color: #8a8a92; font-size: 12px; margin-top: 6px; }
@media (max-width: 1023px) {
  .bo-ev-options .bo-fx { font-size: 15px; }
  .bo-fx-rate { text-align: left; }
  .bo-proc-price-single .pi-price .bo-fx { padding-right: 46px; }   /* 우측 고정 CTA(.bo-float)가 오른쪽 끝을 덮는다(375 실측) */
}

/* 2026-10-12 벤트릭스 · 영어 시술 페이지 보이는 H1(종전 h2 와 같은 모양) + 같은 그룹 세부 시술 링크 */
.detail-title h1{font-size:var(--font-size-regular5);font-weight:var(--font-weight-bold);color:#111;margin-bottom:4px;line-height:1.3}
@media(max-width:1199px){.detail-title h1{font-size:var(--font-size-regular3)}}
.bo-proc-sibs{max-width:1000px;margin:34px auto 0;padding:0 20px}
.bo-proc-sibs h3{font-size:18px;font-weight:700;color:#333;margin:0 0 14px}
.bo-proc-sibs .bo-rel-list{display:flex;flex-wrap:wrap;gap:10px}
.bo-proc-sibs .bo-rel-list a,.bo-proc-sibs .bo-rel-list span{display:inline-block;border:1px solid #dccfb9;background:#f8f4ec;color:#7C6D54;border-radius:99px;padding:9px 16px;font-size:14px;text-decoration:none;line-height:1.4}
.bo-proc-sibs .bo-rel-list a:hover{background:#7C6D54;color:#fff}
.bo-proc-sibs .bo-rel-list span.on{background:#7C6D54;color:#fff;border-color:#7C6D54}

/* 2026-10-12 벤트릭스 · 영어 구조: 정적 페이지 H1(종전 h4.tit 모양) · 홈 허브 · 시술 목록 · 메뉴 */
h1.tit{font-size:var(--font-size-big);font-weight:var(--font-weight-bold);margin-bottom:10px;line-height:1.3}
@media(max-width:1199px){h1.tit{font-size:var(--font-size-regular5);margin-bottom:6px}}
.bo-treat-menu{max-height:70vh;overflow-y:auto}
.bo-home-hub{padding:72px 20px 24px;background:#fff}
.bo-home-hub-in{max-width:1000px;margin:0 auto}
.bo-home-hub h1{font-size:34px;font-weight:700;color:#111;line-height:1.25;margin:0 0 14px;text-align:center}
.bo-home-lead{font-size:17px;color:#555;line-height:1.7;text-align:center;max-width:720px;margin:0 auto 44px}
.bo-home-h2{font-size:22px;font-weight:700;color:#333;margin:0 0 16px}
.bo-home-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 52px;padding:0;list-style:none}
.bo-home-groups a{display:block;height:100%;border:1px solid #e6dccb;background:#faf7f1;color:#5f533f;border-radius:12px;padding:16px 14px;font-size:15px;font-weight:600;text-decoration:none;line-height:1.35;transition:background .2s,color .2s}
.bo-home-groups a:hover{background:#7C6D54;color:#fff}
.bo-home-groups li.all a{background:#7C6D54;color:#fff;border-color:#7C6D54}
.bo-faq{display:flex;flex-direction:column;gap:10px}
.bo-faq-item{border:1px solid #e6dccb;border-radius:12px;background:#fff;padding:0 18px}
.bo-faq-item summary{cursor:pointer;list-style:none;padding:17px 28px 17px 0;font-size:16px;font-weight:600;color:#222;position:relative}
.bo-faq-item summary::-webkit-details-marker{display:none}
.bo-faq-item summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:22px;color:#7C6D54;font-weight:400}
.bo-faq-item[open] summary::after{content:"\2212"}
.bo-faq-item p{margin:0 0 18px;font-size:15px;line-height:1.75;color:#555}
.bo-proc-index{max-width:1000px;margin:150px auto 0;padding:0 20px}
.bo-proc-index h1{font-size:32px;font-weight:700;color:#111;line-height:1.25;margin:0 0 12px}
.bo-proc-index-lead{font-size:16px;color:#555;line-height:1.7;margin:0 0 26px}
.bo-proc-index-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px}
.bo-proc-index-jump a{border:1px solid #e6dccb;background:#faf7f1;color:#5f533f;border-radius:99px;padding:8px 14px;font-size:14px;text-decoration:none}
.bo-proc-index-jump a:hover{background:#7C6D54;color:#fff}
.bo-proc-group{padding:0 0 34px;scroll-margin-top:140px}
.bo-proc-group h2{font-size:22px;font-weight:700;margin:0 0 6px}
.bo-proc-group h2 a{color:#222;text-decoration:none}
.bo-proc-group h2 a:hover{color:#7C6D54}
.bo-proc-group-sub{font-size:14px;color:#777;margin:0 0 12px;line-height:1.6}
.bo-proc-group ul{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0;padding:0;list-style:none}
.bo-proc-group li a{display:block;border:1px solid #eee;border-radius:10px;padding:12px 14px;font-size:14.5px;color:#333;text-decoration:none;line-height:1.4;background:#fff}
.bo-proc-group li a:hover{border-color:#7C6D54;color:#7C6D54}
@media(max-width:1023px){
  .bo-home-hub{padding:48px 16px 16px}
  .bo-home-hub h1{font-size:26px}
  .bo-home-lead{font-size:15.5px;margin-bottom:32px}
  .bo-home-groups{grid-template-columns:repeat(2,1fr)}
  .bo-proc-index{margin-top:110px;padding:0 16px}
  .bo-proc-index h1{font-size:26px}
  .bo-proc-group ul{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.bo-proc-group ul{grid-template-columns:1fr}}

/* 2026-10-12 벤트릭스 · 영어 이벤트·연락·이벤트 상세 H1(종전 h2 와 같은 모양) */
.bo-page-head h1 { font-size: 32px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; }
.bo-detail-head h1 { font-size: 27px; font-weight: 700; line-height: 1.4; }

/* 2026-10-12 벤트릭스 · 영어 오시는 길 영상 */
.bo-way{padding:20px 20px 70px}
.bo-way-in{max-width:1000px;margin:0 auto;display:flex;gap:44px;align-items:center}
.bo-way-vid{flex:0 0 300px}
.bo-way-vid video{width:100%;aspect-ratio:9/16;border-radius:16px;background:#eee;display:block;object-fit:cover}
.bo-way-txt h2{font-size:24px;font-weight:700;color:#222;margin:0 0 22px;line-height:1.35}
.bo-way-steps{list-style:none;margin:0;padding:0;counter-reset:way}
.bo-way-steps li{counter-increment:way;position:relative;padding:0 0 22px 52px}
.bo-way-steps li::before{content:counter(way);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:#7C6D54;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.bo-way-steps b{display:block;font-size:16px;color:#222;margin:4px 0 4px}
.bo-way-steps span{font-size:15px;color:#555;line-height:1.6}
@media(max-width:1023px){.bo-way-in{flex-direction:column;gap:28px}.bo-way-vid{flex:none;width:min(300px,80vw)}.bo-way-txt h2{font-size:21px}}

/* 2026-10-12 벤트릭스 5차 · 시술 위치 표시·핵심 정보 · 홈 카드·투어·장비 · 가격표 시술별 · 길안내 영상 */
.bo-crumbs{max-width:1200px;margin:140px auto 0;padding:0 20px;font-size:13.5px;color:#888;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bo-crumbs a{color:#7C6D54;text-decoration:none}.bo-crumbs a:hover{text-decoration:underline}.bo-crumbs i{font-style:normal;color:#bbb}
.bo-keyfacts{max-width:1200px;margin:14px auto 0;padding:0 20px;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bo-keyfacts li{background:#faf7f1;border:1px solid #ece3d3;border-radius:12px;padding:12px 14px}
.bo-keyfacts b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#9a8b72;margin-bottom:4px}
.bo-keyfacts span{font-size:15px;font-weight:600;color:#222;line-height:1.4}
.bo-proc-sibs-top{max-width:1200px;margin:14px auto 0;padding:0 20px}
.bo-crumbs + .bo-keyfacts ~ .bo-proc-wrap{margin-top:0}
.bo-home-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 14px;padding:0;list-style:none}
.bo-home-cards a{display:flex;flex-direction:column;height:100%;border:1px solid #ece3d3;border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;transition:box-shadow .2s,transform .2s}
.bo-home-cards a:hover{box-shadow:0 6px 18px rgba(124,109,84,.18);transform:translateY(-2px)}
.bo-home-cards .img{display:block;aspect-ratio:16/9;background:#f6f2ec;overflow:hidden}
.bo-home-cards .img img{width:100%;height:100%;object-fit:contain;display:block}
.bo-home-cards .txt{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.bo-home-cards b{font-size:15.5px;color:#222}
.bo-home-cards small{font-size:13px;color:#777;line-height:1.45}
.bo-home-cards em{font-style:normal;font-size:13.5px;font-weight:700;color:#7C6D54;margin-top:2px}
.bo-home-all{margin:0 0 52px;text-align:right}.bo-home-all a{color:#7C6D54;font-weight:600;text-decoration:none}.bo-home-all a:hover{text-decoration:underline}
.bo-home-tour{display:flex;gap:36px;align-items:center;margin:0 0 20px}
.bo-home-tour-vid{flex:0 0 280px}.bo-home-tour-vid video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:#eee;display:block}
.bo-home-tour-txt p{font-size:16px;color:#444;line-height:1.75;margin:0 0 12px}.bo-home-tour-txt a{color:#7C6D54;font-weight:600}
.bo-home-devices{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 12px;padding:0;list-style:none}
.bo-home-devices li{border:1px solid #eee;border-radius:12px;padding:10px;background:#fff;text-align:center}
.bo-home-devices img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;margin:0 0 8px}
.bo-home-devices b{display:block;font-size:13.5px;color:#222}.bo-home-devices span{display:block;font-size:12px;color:#888;margin-top:2px}
.bo-proc-group-head{display:flex;gap:18px;align-items:center}
.bo-proc-group-img{flex:0 0 240px;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#f6f2ec}
.bo-proc-group-img img{width:100%;height:100%;object-fit:contain;display:block}
.bo-proc-group-price{font-size:14px;font-weight:700;color:#7C6D54;margin:0}
.bo-ev-bytreat{margin:0 0 34px}
.bo-ev-bytreat h2{font-size:22px;font-weight:700;margin:0 0 14px;color:#222}
.bo-ev-bytreat ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;margin:0;padding:0}
.bo-ev-bytreat a{display:block;text-decoration:none;color:#333;text-align:center}
.bo-ev-bytreat img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:12px;display:block;margin:0 0 6px;background:#f6f2ec}
.bo-ev-bytreat span{font-size:13.5px;font-weight:600;line-height:1.3;display:block}
.bo-way-more{max-width:1000px;margin:10px auto 0}
.bo-way-more h3{font-size:20px;font-weight:700;color:#222;margin:0 0 14px}
.bo-way-more ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.bo-way-more li{flex:0 0 240px}.bo-way-more video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#eee;display:block}
.bo-way-more span{display:block;font-size:14px;color:#555;margin-top:8px}
@media(max-width:1023px){
  .bo-crumbs{margin-top:76px;padding:0 16px}
  .bo-keyfacts{grid-template-columns:1fr 1fr;padding:0 16px}
  .bo-proc-sibs-top{padding:0 16px}
  .bo-home-cards{grid-template-columns:1fr 1fr;gap:10px}
  .bo-home-tour{flex-direction:column;gap:18px}.bo-home-tour-vid{flex:none;width:min(280px,78vw)}
  .bo-home-devices{grid-template-columns:repeat(3,1fr)}
  .bo-proc-group-head{flex-direction:column;align-items:flex-start}.bo-proc-group-img{flex:none;width:100%}
  .bo-ev-bytreat ul{grid-template-columns:repeat(2,1fr)}
  .bo-way-more li{flex:0 0 calc(50% - 10px)}
}

/* 5차 보정: 위치 표시 바로 아래 제목, 그 아래 핵심 정보·같은 그룹(본문 칼럼 안) */
.bo-keyfacts.in{max-width:none;margin:0 0 14px;padding:0 20px 0 10px}
.bo-proc-sibs-top.in{max-width:none;margin:0 0 22px;padding:0 20px 0 10px}
@media(max-width:1199px){.bo-keyfacts.in,.bo-proc-sibs-top.in{padding:0 20px}}

/* 2026-10-12 벤트릭스 6차 · 예약 버튼 줄 · 의료진 카드 · Why Beauty Z */
.bo-keyfacts .kf-link{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:#7C6D54;text-decoration:none}
.bo-keyfacts .kf-link:hover{text-decoration:underline}
.bo-book{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.bo-book.in{margin:0 0 22px;padding:0 20px 0 10px}
.bo-book a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:99px;font-size:15px;font-weight:700;text-decoration:none;border:1px solid transparent}
.bo-book .wa{background:#25D366;color:#fff}.bo-book .ln{background:#06C755;color:#fff}
.bo-book .bk{background:#7C6D54;color:#fff}.bo-book .gr{background:#fff;color:#333;border-color:#ddd}
.bo-book a:hover{filter:brightness(.95)}
.bo-docs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 12px}
.bo-doc{display:flex;gap:14px;align-items:center;border:1px solid #ece3d3;border-radius:14px;padding:14px;background:#fff;text-decoration:none;color:#333}
.bo-doc img{width:92px;height:110px;object-fit:cover;object-position:top;border-radius:10px;flex:0 0 auto;background:#f3eee6}
.bo-doc b{display:block;font-size:16px;color:#222}.bo-doc small{display:block;font-size:13px;color:#7C6D54;margin:2px 0 6px;font-weight:600}
.bo-doc em{display:block;font-style:normal;font-size:13px;color:#666;line-height:1.5}
.bo-proc-docs{max-width:1000px;margin:34px auto 0;padding:0 20px}
.bo-proc-docs h3{font-size:18px;font-weight:700;color:#333;margin:0 0 14px}
.bo-why{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 52px;padding:0;list-style:none}
.bo-why li{background:#faf7f1;border:1px solid #ece3d3;border-radius:14px;padding:16px}
.bo-why b{display:block;font-size:15.5px;color:#222;margin-bottom:6px}.bo-why span{font-size:13.5px;color:#666;line-height:1.55}
@media(max-width:1023px){
  .bo-book.in{padding:0 20px}
  .bo-book a{flex:1 1 calc(50% - 10px)}
  .bo-docs{grid-template-columns:1fr}
  .bo-proc-docs{padding:0 16px}
  .bo-why{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.bo-why{grid-template-columns:1fr}}

/* 6차 보정: 위치 표시 = 제목 영역 안(본문과 같은 왼쪽 선) */
.detail-title .txt-area .bo-crumbs{max-width:none;margin:0 0 10px;padding:0}
.bo-book.in{padding:0 20px}
.bo-keyfacts.in{padding:0 20px}
.bo-book a{white-space:nowrap}
@media(max-width:480px){.bo-book a{font-size:14px;padding:0 12px}}

/* 2026-10-12 벤트릭스 7차 · 사진·영상 보강 */
.bo-proc-media{max-width:1000px;margin:34px auto 0;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bo-proc-media figure{margin:0;border:1px solid #ece3d3;border-radius:14px;overflow:hidden;background:#fff}
.bo-proc-device img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#f6f2ec;display:block}
.bo-proc-gvid video{width:100%;aspect-ratio:16/9;background:#111;display:block;object-fit:contain}
.bo-proc-media figcaption{padding:10px 14px;font-size:14px;color:#555}
.bo-proc-sibcards,.bo-proc-interior{max-width:1000px;margin:34px auto 0;padding:0 20px}
.bo-proc-sibcards h3,.bo-proc-interior h3{font-size:18px;font-weight:700;color:#333;margin:0 0 14px}
.bo-proc-sibcards ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;margin:0;padding:0}
.bo-proc-sibcards a{display:block;border:1px solid #ece3d3;border-radius:12px;overflow:hidden;text-decoration:none;color:#333;background:#fff;height:100%}
.bo-proc-sibcards .img{display:block;aspect-ratio:16/9;background:#f6f2ec}.bo-proc-sibcards img{width:100%;height:100%;object-fit:contain;display:block}
.bo-proc-sibcards b{display:block;padding:9px 11px;font-size:13.5px;line-height:1.35}
.bo-proc-interior ul,.bo-home-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;list-style:none;margin:0 0 12px;padding:0}
.bo-home-gallery{grid-template-columns:repeat(5,1fr);margin:0 0 52px}
.bo-proc-interior img,.bo-home-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;background:#f3eee6}
.bo-home-videos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;margin:0 0 52px;padding:0}
.bo-home-videos video{width:100%;aspect-ratio:16/9;background:#111;border-radius:10px;display:block;object-fit:contain}
.bo-home-videos a{display:block;font-size:13.5px;font-weight:600;color:#333;margin-top:6px;text-decoration:none}
.bo-home-videos li,.bo-proc-sibcards li,.bo-way-photos li{height:auto;display:flex;flex-direction:column}
.bo-home-videos{row-gap:20px}
.bo-way-photos{max-width:1000px;margin:24px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;padding:0}
.bo-way-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.bo-way-photos span{display:block;font-size:14px;color:#555;margin-top:6px}
@media(max-width:1023px){
  .bo-proc-media{grid-template-columns:1fr;padding:0 16px}
  .bo-proc-sibcards,.bo-proc-interior{padding:0 16px}
  .bo-proc-sibcards ul{grid-template-columns:1fr 1fr}
  .bo-proc-interior ul{grid-template-columns:repeat(3,1fr)}
  .bo-home-gallery{grid-template-columns:repeat(3,1fr)}
  .bo-home-videos{grid-template-columns:1fr 1fr}
  .bo-way-photos{grid-template-columns:1fr;padding:0 4px}
}

/* 2026-10-12 8차 · 홈 인스타 카드(사이트 안 이미지 → 인스타 링크) */
.bo-home-insta{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;list-style:none;margin:0 0 12px;padding:0}
.bo-home-insta a{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:9/16;background:#eee}
.bo-home-insta img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.bo-home-insta a:hover img{transform:scale(1.03)}
.bo-home-insta i{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-style:normal;font-size:13px;display:flex;align-items:center;justify-content:center}
@media(max-width:1023px){.bo-home-insta{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.bo-home-insta{grid-template-columns:1fr 1fr}}

/* 2026-10-12 9차 · 홈 길안내 영상 3 */
.bo-home-walk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:0 0 52px;padding:0}
.bo-home-walk li{display:flex;flex-direction:column}
.bo-home-walk video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#eee;display:block}
.bo-home-walk span{font-size:14px;color:#555;margin-top:8px}
@media(max-width:1023px){.bo-home-walk{grid-template-columns:1fr 1fr}}

/* 15차 · 시술 한눈에 보는 가이드 */
.bo-guide{margin:26px 0 30px;padding:0 20px 0 10px}
.bo-guide h2{font-size:22px;font-weight:700;color:#222;margin:0 0 14px}
.bo-guide h3{font-size:18px;font-weight:700;color:#333;margin:26px 0 10px}
.bo-guide p{font-size:15.5px;line-height:1.75;color:#444;margin:0 0 10px}
.bo-guide-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:0}
.bo-guide-facts div{border:1px solid #ece3d3;border-radius:12px;padding:12px 14px;background:#fff}
.bo-guide-facts dt{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#9a8b72;margin:0 0 4px}
.bo-guide-facts dd{margin:0;font-size:14.5px;font-weight:600;color:#222;line-height:1.45}
.bo-guide-steps{list-style:none;counter-reset:gs;margin:0;padding:0}
.bo-guide-steps li{counter-increment:gs;position:relative;padding:0 0 14px 44px}
.bo-guide-steps li::before{content:counter(gs);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:#7C6D54;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.bo-guide-steps b{display:block;font-size:15.5px;color:#222;margin:3px 0 3px}.bo-guide-steps span{font-size:15px;color:#555;line-height:1.6}
.bo-guide-list{margin:0 0 6px 20px;padding:0}.bo-guide-list li{font-size:15.5px;line-height:1.7;color:#444}
.bo-guide-src{font-size:13px!important;color:#888!important;margin-top:18px!important}.bo-guide-src a{color:#7C6D54}
@media(max-width:1199px){.bo-guide{padding:0 20px}.bo-guide-facts{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.bo-guide-facts{grid-template-columns:1fr}}

/* 15c차 · 가이드 목록 점·관련 시술 링크 */
.bo-guide-list{list-style:disc}.bo-guide-list li{margin:0 0 4px}
.bo-guide-steps b{margin-top:5px}
.bo-guide-links{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0!important}
.bo-guide-links a{display:inline-block;border:1px solid #d9ccb4;border-radius:999px;padding:7px 14px;font-size:14px;color:#5e5240;text-decoration:none;background:#fff}
.bo-guide-links a:hover{background:#f6f0e6}

/* 16차 · 단기 방문 일정·자주 묻는 질문 */
.bo-guide-trip{margin:18px 0 6px;padding:16px 18px;border-radius:14px;background:#f7f2e9}
.bo-guide-trip h3{margin:0 0 6px!important;font-size:16.5px!important}
.bo-guide-trip p{margin:0!important}
.bo-guide-faq{margin:0}
.bo-guide-faq dt{font-size:15.5px;font-weight:700;color:#222;margin:14px 0 4px}
.bo-guide-faq dd{margin:0;font-size:15px;line-height:1.7;color:#444}

/* 23차 · 본문 사이사이 사진 */
.bo-body-fig{margin:24px 0 26px;padding:0}
.bo-body-fig img{display:block;width:100%;height:auto;border-radius:16px;background:#f3eee6}
.bo-body-fig.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bo-body-fig img.light{border:1px solid #ece3d3;background:#fff}
.bo-body-fig.vid video{display:block;width:100%;aspect-ratio:16/9;background:#111;border-radius:16px;object-fit:cover}
.bo-guide .bo-body-fig{margin-left:0;margin-right:0}
ul.pro-detail>li.bo-body-li{list-style:none;padding:0 20px 0 10px;margin:0;border:0;background:none}
@media(max-width:1199px){ul.pro-detail>li.bo-body-li{padding:0 20px}}
@media(max-width:600px){.bo-body-fig{margin:18px 0 20px}.bo-body-fig img{border-radius:12px}}

/* 24차 · 하단 원내·의료진 사진 크게 */
.bo-proc-interior ul{grid-template-columns:1fr 1fr;gap:14px}
.bo-proc-interior li a{display:block;height:100%}
.bo-proc-interior img{aspect-ratio:3/2;border-radius:14px}
.bo-docs{gap:16px}
.bo-doc{align-items:flex-start;gap:20px;padding:16px}
.bo-doc img{width:200px;height:250px;border-radius:12px}
.bo-doc b{font-size:18px;margin-top:4px}.bo-doc small{font-size:14px}.bo-doc em{font-size:14px}
@media(max-width:1023px){
  .bo-proc-interior ul{grid-template-columns:1fr 1fr;gap:10px}
  .bo-doc img{width:150px;height:188px}
}
@media(max-width:480px){.bo-doc{flex-direction:column}.bo-doc img{width:100%;height:auto;aspect-ratio:4/5}}

/* 29차 · 바탕색 명시(투명 바탕은 다크 테마 창·일부 앱 내 브라우저에서 검게 비침) */
html,body{background:#fff;color-scheme:light}

/* 30차 · 상담 단추 = 페이지 끝 한 줄 */
.bo-proc-wrap .bo-book-end{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1000px;margin:44px auto 80px;padding:30px 20px 0}
.bo-book-end a{min-width:150px}
@media(max-width:600px){.bo-book-end a{flex:1 1 calc(50% - 10px);min-width:0}}

/* 32차 · 가격 = 시술 요약 첫 칸 · 언어·위치·영업일 = 페이지 끝 */
.bo-guide-price dd a{display:inline-block;margin-left:6px;font-size:13px;font-weight:600;color:#7C6D54;text-decoration:none}
.bo-guide-price dd a:hover{text-decoration:underline}
.bo-proc-wrap .bo-keyfacts-end{max-width:1000px;margin:44px auto 0;padding:0 20px;grid-template-columns:repeat(3,1fr)}
.bo-proc-wrap .bo-keyfacts-end + .bo-book-end{margin-top:14px;padding-top:0;border-top:0}
@media(max-width:600px){.bo-proc-wrap .bo-keyfacts-end{grid-template-columns:1fr;gap:10px;padding:0 16px}.bo-proc-wrap .bo-book-end{padding-left:16px;padding-right:16px}}

/* 33차 · 본문 굵은 글씨 = 문장 안 보통 글자(공통 css 의 inline-block 이 줄을 끊음) */
html[lang="en"] ul.pro-detail li > div b,html[lang="en"] ul.pro-detail li > div strong{display:inline;white-space:normal}

/* 34차 · PC 본문 칸 가운데(아래 섹션과 같은 축) */
@media(min-width:1200px){html[lang="en"] .bo-proc-main section.detail-wrap .container{justify-content:center}}

/* 44차: 영어 이벤트 머리 환율 줄 가운데 */
html[lang="en"] .bo-page-head .bo-fx-rate{text-align:center;margin-top:6px}

/* 53차: 홈 장비 카드 이름 잘림 */
.bo-home-devices li{display:flex;flex-direction:column;min-width:0}.bo-home-devices img{height:auto;flex:none}

/* 53차: 가격표 위 시술 바로가기 = 글자 단추(아래 카드 사진과 겹침 방지) */
.bo-ev-bytreat-chips ul{display:flex!important;flex-wrap:wrap;gap:8px;grid-template-columns:none}.bo-ev-bytreat-chips li{width:auto}.bo-ev-bytreat-chips a{display:inline-block;padding:8px 14px;border:1px solid #e4d9c6;border-radius:999px;background:#fbf8f3;color:#5b4d3c;font-size:14px;text-decoration:none}.bo-ev-bytreat-chips a span{display:inline}

/* 53차: 그룹 카드 잘림 방지 */
html[lang="en"] img[src*="-group-card-en"]{object-fit:contain!important;background:#efe8dc}

/* 54차: 영어 장비 화면 휴대폰 2열 */
@media (max-width:767px){html[lang="en"] .equip-wrap{grid-template-columns:1fr 1fr!important;gap:14px 10px!important}html[lang="en"] .equip-wrap .equip-text{font-size:13px;letter-spacing:.02em}}

/* 58차: 영어 홈 첫 사진 = 스크립트 전에도 화면 폭에 맞는 쪽을 바로 보여 아래 내용이 밀리지 않게 */
html[lang="en"] .main-wrap .swiper-slide img{width:100%;height:auto}
@media (min-width:1200px){html[lang="en"] .main-wrap>.pc-main{display:block}}
@media (max-width:1199px){html[lang="en"] .main-wrap>.mobile-main{display:block}}
html[lang="en"] .main-wrap .swiper:not(.swiper-initialized) .swiper-slide:first-child{opacity:1!important}

/* 58차: 영어 화면 언어 메뉴(한국어·日本語·简体字·繁體中文) = 기기 글꼴 → 한글·한자 글꼴 파일을 받지 않게 */
html[lang="en"] .bo-nolang,html[lang="en"] .bo-nolang *{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR",sans-serif!important}

/* 60차(2026-10-14) 영어 홈 첫 화면: 이벤트 띠 · 병원 이름 블록 */
.bo-ev-band{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1000px;margin:0 auto;padding:12px 20px;background:#7C6D54;color:#fff;text-decoration:none}
@media(min-width:1024px){.bo-ev-band{max-width:none;padding:12px max(20px,calc(50vw - 480px))}}
.bo-ev-band .t{display:flex;flex-direction:column;min-width:0}
.bo-ev-band b{font-size:15px;font-weight:700;line-height:1.3}
.bo-ev-band small{font-size:12.5px;opacity:.85;line-height:1.4}
.bo-ev-band em{flex:none;font-style:normal;font-size:13.5px;font-weight:700;background:#fff;color:#7C6D54;border-radius:99px;padding:7px 14px}
.bo-ev-band em::after{content:" \203A"}
.bo-ev-band:hover em{filter:brightness(.96)}
.bo-hero{max-width:1000px;margin:0 auto;padding:30px 20px 34px;text-align:center;background:#fff}
.bo-hero-eye{display:inline-block;margin:0 0 12px;padding:5px 12px;border:1px solid #e6dccb;border-radius:99px;background:#faf7f1;color:#7C6D54;font-size:13px;font-weight:600;letter-spacing:.01em}
.bo-hero h1{font-size:34px;font-weight:700;color:#111;line-height:1.22;margin:0 0 12px}
.bo-hero .bo-home-lead{margin:0 auto 20px}
.bo-hero-cta{justify-content:center;margin:0}
.bo-home-hub{padding-top:40px}
@media(max-width:1023px){
  .bo-hero{padding:22px 16px 26px}
  .bo-hero h1{font-size:27px}
  .bo-hero .bo-home-lead{font-size:15px;line-height:1.6;margin-bottom:16px}
  .bo-hero-cta a{flex:1 1 0;padding:0 10px}
  .bo-home-hub{padding-top:28px}
  .bo-hero-eye{font-size:12px;padding:5px 10px;max-width:100%}
  html.bo-hero-on .bo-float{opacity:0;pointer-events:none}   /* 첫 화면 상담 버튼이 보이는 동안 떠 있는 버튼 줄은 숨김(겹침 방지) */
}
