/* 진료 페이지 ‘Specialist’ 띠 (2026-10-20 · anesthesia · ceramic · replant · transplant 미리보기) — doctor.html ‘SPECIALIST DOCTOR’ 띠와 같은 디자인
   아래 규칙은 css/p-doc-v7-sp.css 를 그대로 옮기고 이름만 .v7-sp → .bp-sp, 등장 표시 .dv-js → .bp-spjs(js/p-r2-spec.js) 로 바꿈.
   페이지마다 사진 · 영문 제목 · 인용문이 다르고, 사진 위치는 style="--sp-pos · --sp-pos-m" 으로 페이지별. 생성 batch-1019/round2.py spec_band() */
.bp-sp { --sp-e: cubic-bezier(.2, .7, .2, 1); --sp-bg: #605b53; position: relative; display: flex; align-items: center; min-height: clamp(620px, 46vw, 880px); overflow: hidden; background: var(--sp-bg); color: #fff; }
.bp-sp__ph { position: absolute; inset: 0 auto 0 0; width: 58%; margin: 0; }
.bp-sp__ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sp-pos, 40% 28%); filter: grayscale(1) contrast(1.06) brightness(.97);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
  transition: transform 2.6s var(--sp-e); }
/* 망점(참고 띠처럼 화면 전체에 고운 점) + 웜 톤 */
.bp-sp::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(circle, rgba(20,18,16,.36) 0 .9px, transparent 1.25px); background-size: 4px 4px; }
.bp-sp::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(120,96,58,.14), rgba(40,36,31,.16)); mix-blend-mode: multiply; }
.bp-sp__in { position: relative; z-index: 2; width: min(52%, 900px); margin-left: auto; margin-right: max(4vw, calc((100% - 1400px) / 2 + 40px)); padding: 72px 0; text-align: center; }

/* 로고: 금색 고리(그려짐) 안에 판교 최용훈치과의원 로고 모양(치아 + 1) */
.bp-sp__mark { position: relative; display: block; width: 96px; height: 96px; margin: 0 auto; }
.bp-sp__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #d0ab62; stroke-width: 1; transform: rotate(-90deg); }
.bp-sp__mark circle { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .3s; }
.bp-sp__mark i { position: absolute; inset: 24px; background: #fff; -webkit-mask: url(https://channel-static.rebeauty.co.kr/savetooth123/renewal/ko-ver3/assets/img/mark-512.png) center / contain no-repeat; mask: url(https://channel-static.rebeauty.co.kr/savetooth123/renewal/ko-ver3/assets/img/mark-512.png) center / contain no-repeat; transition: opacity .9s ease .9s, transform 1.1s var(--sp-e) .9s; }
.bp-sp__t { margin: 34px 0 0; font-size: clamp(28px, 1.6vw + 12px, 46px); line-height: 1.2; font-weight: 300; letter-spacing: .34em; margin-right: -.34em; white-space: nowrap; text-transform: uppercase; color: #fff; }
.bp-sp__nm { margin: 26px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: #e2c27f; }
.bp-sp__q { position: relative; margin: 30px auto 0; padding-top: 28px; max-width: 30em; }
.bp-sp__q::before { content: ""; position: absolute; left: 50%; top: 0; width: 36px; height: 1px; margin-left: -18px; background: rgba(208,171,98,.75); }
.bp-sp__q p { font-size: 18px; line-height: 1.8; font-weight: 400; letter-spacing: -0.02em; color: rgba(255,255,255,.9); word-break: keep-all; }
.bp-sp__in > :not(.bp-sp__mark) { transition: opacity .9s ease, translate 1s var(--sp-e); }
.bp-sp__in > .bp-sp__t { transition-delay: .8s; }
.bp-sp__in > .bp-sp__nm { transition-delay: .95s; }
.bp-sp__in > .bp-sp__q { transition-delay: 1.1s; }

.bp-spjs .bp-sp:not(.is-in) .bp-sp__ph img { transform: scale(1.12); }
.bp-spjs .bp-sp:not(.is-in) .bp-sp__mark circle { stroke-dashoffset: 100; }
.bp-spjs .bp-sp:not(.is-in) .bp-sp__mark i { opacity: 0; transform: scale(.82); }
.bp-spjs .bp-sp:not(.is-in) .bp-sp__in > :not(.bp-sp__mark) { opacity: 0; translate: 0 18px; }

@media (max-width: 1023px) {
  .bp-sp { flex-direction: column; align-items: stretch; min-height: 0; }
  .bp-sp__ph { position: relative; flex: none; width: 100%; height: clamp(380px, 118vw, 680px); }
  .bp-sp__ph img { object-position: var(--sp-pos-m, 34% 16%); -webkit-mask-image: none; mask-image: none; }
  .bp-sp__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(96,91,83,0) 58%, var(--sp-bg) 100%); }
  .bp-sp__in { width: auto; margin: -64px 0 0; padding: 0 20px 104px; }
  .bp-sp__mark { width: 80px; height: 80px; }
  .bp-sp__mark i { inset: 20px; }
  .bp-sp__t { margin-top: 28px; font-size: clamp(19px, 5.4vw, 30px); letter-spacing: .2em; margin-right: -.2em; }
  .bp-sp__nm { margin-top: 20px; font-size: 16px; }
  .bp-sp__q { margin-top: 24px; padding-top: 24px; }
  .bp-sp__q p { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-sp__ph img, .bp-sp__mark i, .bp-sp__in > :not(.bp-sp__mark) { transition: opacity .6s linear; }
  .bp-sp__mark circle { transition: none; }
  .bp-spjs .bp-sp:not(.is-in) .bp-sp__ph img, .bp-spjs .bp-sp:not(.is-in) .bp-sp__mark i { transform: none; }
  .bp-spjs .bp-sp:not(.is-in) .bp-sp__mark circle { stroke-dashoffset: 0; }
  .bp-spjs .bp-sp:not(.is-in) .bp-sp__in > :not(.bp-sp__mark) { translate: none; }
}