/* 지점 페이지 전용 스타일 — style.css는 수정하지 않고 이 파일에서만 덮어씁니다 */
/* 상단: 왼쪽 의료진 사진(배경에 녹아듦) + 오른쪽 문구. 글꼴·색은 시안 .hero 스타일을 그대로 씀 */
.bp-hero { position: relative; overflow: hidden; padding: 0; }
.bp-bust { position: absolute; left: calc(8% + 30px); top: 0; bottom: 0; height: 100%; width: auto; max-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 72%, transparent); mask-image: linear-gradient(to right, transparent, #000 16%, #000 72%, transparent); }
.bp-name { position: absolute; left: calc(8% + 70px); bottom: 18px; z-index: 2; display: inline-flex; align-items: baseline; gap: 6px; background: #fff; border-radius: 999px; padding: 9px 18px; box-shadow: 0 6px 16px rgba(15, 23, 42, .15); }
.bp-name b { font-size: 16px; color: var(--ink); }
.bp-name small { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.bp-name span { margin-left: 6px; font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.bp-hero-grid { display: grid; grid-template-columns: 34% 1fr; }
.bp-hero-txt { grid-column: 2; padding: 44px 0 44px 24px; position: relative; z-index: 1; }
.bp-hero h1 { font-size: 40px; margin: 0 0 12px; }
.bp-hero .breadcrumb { margin-bottom: 10px; }
.bp-hero .lead { font-size: 17px; margin: 0 0 20px; }
.bp-hero .actions { margin: 0 0 18px; }
.bp-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.bp-facts li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.bp-facts li.off { color: var(--accent-ink); }


.bp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.bp-two .card h3 { margin-bottom: 14px; }
.bp-visit { align-items: stretch; }
.bp-loc { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.bp-loc-sub { color: var(--ink-2); font-size: 15px; margin: 0 0 4px; }
.btn-tel { display: inline-flex; align-items: center; gap: 8px; }
.btn-tel svg { flex: 0 0 auto; }
.bp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.bp-note { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; text-wrap: pretty; }
.sec-lead { max-width: 880px; text-wrap: balance; }

.bp-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.bp-sum .card ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.bp-more { margin-top: 26px; }

.bp-route { display: grid; grid-template-columns: 56px 1fr; gap: 10px 8px; margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.bp-route dt { font-weight: 800; color: var(--ink-3); font-size: 13px; padding-top: 1px; }
.bp-route dd { margin: 0; }
.bp-dr { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.bp-dr-photo { margin: 0; }
.bp-dr-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; border-radius: 18px; display: block; background: var(--bg-soft); }
.bp-dr-name { margin: 6px 0 14px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.bp-dr-name small { font-size: 15px; font-weight: 700; color: var(--ink-3); margin-left: 6px; }
.bp-acc { border-top: 1px solid var(--line); }
.bp-acc:last-child { border-bottom: 1px solid var(--line); }
.bp-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-size: 17px; font-weight: 800; color: var(--ink); }
.bp-acc summary::-webkit-details-marker { display: none; }
.bp-acc summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; color: var(--accent-ink); font-weight: 400; line-height: 1; }
.bp-acc[open] summary::after { content: "−"; }
.bp-acc ul { list-style: none; margin: 0; padding: 0 4px 20px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.bp-acc li { position: relative; padding-left: 14px; margin-bottom: 6px; }
.bp-acc li::before { content: "·"; position: absolute; left: 0; color: var(--brand-strong); font-weight: 900; }

.bp-h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 40px 0 10px; }
.bp-p { color: var(--ink-2); font-size: 15px; line-height: 1.75; margin: 0 0 18px; max-width: 880px; text-wrap: balance; }
.bp-list { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.bp-list li, .bp-sum .card li { margin-bottom: 6px; }
.card .bp-note { font-size: 13.5px; line-height: 1.6; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.bp-sum3 { grid-template-columns: repeat(3, 1fr); }
.bp-viz { margin-top: 16px; }
.bp-viz .card h3 { margin-bottom: 16px; }
.bp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); }
.bp-legend li { display: flex; align-items: center; gap: 6px; }
.bp-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.osi-row { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.osi-bar { height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: flex-end; padding: 0 14px; font-size: 14px; font-weight: 800; color: #fff; min-width: 90px; }
.osi-before { background: #9AA3B2; }
.osi-after { background: var(--brand-strong); }
.bp-viz .ad-bar { height: 40px; }
.bp-viz .ad-bar span { font-size: 13px; }
.bp-chain { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; counter-reset: ch; }
.bp-chain li { counter-increment: ch; display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); }
.bp-chain li::before { content: counter(ch); width: 22px; height: 22px; border-radius: 50%; background: var(--brand-strong); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.bp-chain li:not(:last-child)::after { content: "→"; color: var(--ink-3); margin-left: 4px; }
.bp-src { margin-top: 4px; }
.age-tabs { margin: 4px 0 18px; }
.bp-sum3 > .card > p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.bp-tx .card ul { list-style: none; padding: 0; }
.bp-tx .card li { margin-bottom: 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.bp-tx .card li b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.bp-qa { display: grid; gap: 12px; margin-top: 4px; }
.bp-q { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 24px; }
.bp-q summary { cursor: pointer; list-style: none; position: relative; padding: 20px 32px 20px 0; }
.bp-q summary::-webkit-details-marker { display: none; }
.bp-q summary h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.bp-q summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--accent-ink); font-weight: 400; line-height: 1; }
.bp-q[open] summary::after { content: "−"; }
.bp-ans { padding: 0 0 22px; }
.bp-a { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.bp-a b { color: var(--ink); font-weight: 800; }
.bp-ans .bp-sum .card, .bp-ans .research-figs .fig { background: var(--bg-soft); box-shadow: none; }
.bp-ans .age-tabs { margin-top: 0; }
.bp-flow { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.bp-flow li { margin-bottom: 6px; }

.bp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.bp-col { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; padding-bottom: 16px; transition: box-shadow .2s, transform .2s; }
.bp-col:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, .10); transform: translateY(-2px); }
.bp-col-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.bp-col b { padding: 6px 16px 0; font-size: 16px; color: var(--ink); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bp-col-meta { padding: 0 16px; font-size: 13px; color: var(--ink-3); }

.bp-care { grid-template-columns: repeat(3, 1fr); } /* 스테로이드 감량 카드를 다시 넣으면 4열로 되돌린다 */
.bp-care a span { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
.bp-branch-label { margin: 28px 0 0; font-size: 14px; font-weight: 800; color: var(--ink-3); }
.bp-branches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bp-branches a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-2); background: #fff; }
.bp-branches a:hover { border-color: var(--brand); color: var(--brand-ink); }

@media (max-width: 900px) {
  .bp-bust { position: relative; left: auto; display: block; height: 280px; margin: 0 auto; }
  .bp-name { left: 50%; transform: translateX(-50%); bottom: auto; top: 236px; white-space: nowrap; }
  .bp-hero-grid { display: block; }
  .bp-hero-txt { padding: 26px 0 32px; }
  .bp-hero h1 { font-size: 30px; }
  .bp-two, .bp-sum, .bp-sum3, .bp-cols, .bp-care { grid-template-columns: 1fr; }
  .bp-dr { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .bp-dr-photo { max-width: 260px; }
}

/* 올 화이트 배경 (되돌리려면 body의 bp-white 클래스를 제거) */
.bp-white .hero, .bp-white section.soft { background: #fff; }
.bp-white section + section { border-top: 1px solid var(--line); }
.bp-white .cta-band { border-top: 0; }

/* FAQ 탭 */
.faq[hidden] { display: none; }
.bp-faq-tabs { display: flex; width: fit-content; margin: 14px auto 22px; }
.faq .bp-note { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
.faq .bp-ans { padding: 0 0 20px; }
.faq .bp-ans .bp-chain { margin-bottom: 4px; }

/* 오시는 길 지도: 왼쪽 진료시간 카드와 세로 길이를 맞춤 */
.bp-visit > .card:last-child { display: flex; flex-direction: column; }
.bp-map { flex: 1 1 auto; min-height: 220px; margin-top: 18px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft); }
.bp-map iframe { width: 100%; height: 100%; min-height: 220px; border: 0; display: block; }
.bp-map-link { align-self: flex-start; margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--accent-ink); }
@media (max-width: 900px) { .bp-map, .bp-map iframe { min-height: 260px; } }
.bp-visit > .card:first-child { display: flex; flex-direction: column; }
.bp-visit > .card:first-child .bp-actions { margin-top: auto; padding-top: 18px; }
.bp-map, .bp-map iframe { min-height: 170px; }
/* 버튼을 안내 문구 바로 아래로 (중간 빈 공간 제거) */
.bp-visit > .card:first-child .bp-actions { margin-top: 18px; padding-top: 0; }
/* 지도는 오른쪽 카드 높이를 채워, 두 카드 하단이 지도 하단과 맞게 */
.bp-map, .bp-map iframe { min-height: 150px; }


/* 요약 박스: 연구 기간 배지 + 치료 전후 막대 */



/* C안: 박스 제목 = 연구 라벨 */

/* 연구 박스는 의료진 카드 아래, 진료 섹션 첫 소제목은 위쪽 간격 없음 */
.bp-h3.bp-first { margin-top: 4px; }

.bp-h3.bp-first { margin-top: 0; }
.bp-h3.bp-first { margin-top: 30px; }

/* 칼럼 카드 4개: 데스크톱 4열, 중간 폭 2열 */
.bp-cols { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bp-col b { font-size: 15px; -webkit-line-clamp: 4; }
@media (max-width: 1100px) { .bp-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bp-cols { grid-template-columns: 1fr; } }

/* 칼럼 카드 이미지: 정사각에 가까운 5:4 */
.bp-col-img { aspect-ratio: 5 / 4; }
/* 모바일: 칼럼 카드 2열 */
@media (max-width: 640px) {
  .bp-cols { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bp-col { gap: 6px; padding-bottom: 12px; border-radius: 14px; }
  .bp-col b { font-size: 13.5px; padding: 4px 11px 0; -webkit-line-clamp: 4; line-height: 1.45; }
  .bp-col-meta { padding: 0 11px; font-size: 12px; }
}

/* 인근 항목 추가분만큼 지도가 줄어들 수 있게 최소 높이를 낮춤 (모바일은 유지) */
.bp-map, .bp-map iframe { min-height: 120px; }
@media (max-width: 900px) { .bp-map, .bp-map iframe { min-height: 260px; } }

/* 칼럼 카드 제목: 화면에는 두 줄까지만 (전체 글은 소스에 그대로 있음) */
.bp-col b { -webkit-line-clamp: 2; }
@media (max-width: 640px) { .bp-col b { -webkit-line-clamp: 3; } }

/* 칼럼: 한 줄 가로 슬라이드 (스크롤 스냅 + 화살표). 데스크톱 4개 / 태블릿 3개 / 모바일 2.3개가 보임 */
.bp-slider { position: relative; margin-top: 22px; }
.bp-slider .bp-cols { display: flex; grid-template-columns: none; gap: 16px; margin-top: 0; padding: 4px 2px 16px; margin-bottom: -16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.bp-slider .bp-cols::-webkit-scrollbar { display: none; }
.bp-slider .bp-col { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; }
.bp-slide-btn { position: absolute; top: 34%; z-index: 2; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, .14); display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.bp-slide-btn.prev { left: -14px; }
.bp-slide-btn.next { right: -14px; }
.bp-slide-btn[disabled] { opacity: 0; pointer-events: none; }
.bp-slide-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 1100px) { .bp-slider .bp-col { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 640px) {
  .bp-slider .bp-cols { gap: 12px; }
  .bp-slider .bp-col { flex-basis: calc((100% - 12px) / 2.3); }
  .bp-slide-btn { display: none; }
}

/* 하단 상담 영역: 1줄 네이버 예약·카카오톡 문의, 2줄 지점·대표 전화. 같은 너비의 2x2 */
.bp-cta-btns { display: grid; grid-template-columns: repeat(2, 184px); justify-content: start; gap: 10px; }
.bp-cta-btns { gap: 8px; }
.bp-cta-btns .btn { justify-content: center; text-align: center; white-space: nowrap; padding: 9px 14px; font-size: 14px; border-radius: 10px; gap: 6px; }
.bp-cta-btns .btn svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .bp-cta-btns { grid-template-columns: minmax(0, 240px); } }

/* 카카오톡 문의 버튼: 카카오 브랜드 노란색 + 말풍선 아이콘 */
.btn-kakao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #FEE500; color: #3C1E1E; border-color: transparent; }
.btn-kakao:hover { filter: brightness(.96); }
.btn-kakao svg { flex: 0 0 auto; }

/* 원장 2명 이상(인천): 히어로에 의료진 카드 사진을 나란히. 사진 가장자리는 기존처럼 서서히 사라짐 */
.bp-hero-multi .bp-busts { position: absolute; left: clamp(8px, calc(8% - 50px), 90px); top: 0; bottom: 0; display: flex; }
.bp-hero-multi .bp-bust-item { position: relative; width: 270px; height: 100%; }
.bp-hero-multi .bp-bust-item + .bp-bust-item { margin-left: -26px; }
.bp-hero-multi .bp-bust { left: 0; width: 100%; object-fit: cover; object-position: center top; }
.bp-hero-multi .bp-name { left: 50%; transform: translateX(-50%); bottom: 14px; white-space: nowrap; }
.bp-hero-multi .bp-hero-grid { grid-template-columns: 540px 1fr; }
@media (max-width: 1100px) {
  .bp-hero-multi .bp-bust-item { width: 200px; }
  .bp-hero-multi .bp-hero-grid { grid-template-columns: 440px 1fr; }
  .bp-hero-multi .bp-name { padding: 8px 14px; }
}
@media (max-width: 900px) {
  .bp-hero-multi .bp-busts { position: relative; left: auto; justify-content: center; height: 280px; }
  .bp-hero-multi .bp-bust-item { width: 200px; }
  .bp-hero-multi .bp-bust { position: absolute; height: 100%; margin: 0; }
  .bp-hero-multi .bp-name { top: auto; bottom: 10px; padding: 7px 12px; }
  .bp-hero-multi .bp-hero-grid { display: block; }
}