/* 원장 소개 v7 · 약력 다음 ‘SPECIALIST DOCTOR’ 띠 (2026-10-19 3차) · doctor.v7.html · doctor.v7.preview.html · 생성기 ~/tmp/renewal-src/build/doctor-1017c/spec.py
   참고: 코원 성형외과 ‘SPECIALIST DOCTOR’ 띠(흑백 망점 사진 + 가운데 엠블럼 · 큰 자간 영문) — 이 페이지 톤(웜 그레이 · 금색 · Pretendard)으로.
   4차: 작은 영문 줄(Conservative Dentistry) 삭제 · SPECIALIST DOCTOR 는 어느 폭에서나 한 줄(nowrap) · 띠 높이 늘림.
   PC: 왼쪽 58% 흑백 진료 사진(오른쪽으로 흐려짐) + 오른쪽 가운데 정렬 글. 모바일: 사진이 띠 전체, 아래쪽을 어둡게 덮고 그 위에 글.
   위아래 경계는 곧은 직선. 화면에 들어오면(p-doc.js [data-rv] → .is-in) 사진이 천천히 물러나고 로고 둘레 금색 고리가 그려진 뒤 글이 차례로 올라온다. */
.v7-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; }
.dv-js .v7-sp[data-rv]:not(.is-in) { opacity: 1; transform: none; }   /* 띠 자체는 그대로, 안쪽만 움직인다 */
.v7-sp__ph { position: absolute; inset: 0 auto 0 0; width: 58%; margin: 0; }
.v7-sp__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 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); }
/* 망점(참고 띠처럼 화면 전체에 고운 점) + 웜 톤 */
.v7-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; }
.v7-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; }
.v7-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) */
.v7-sp__mark { position: relative; display: block; width: 96px; height: 96px; margin: 0 auto; }
.v7-sp__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #d0ab62; stroke-width: 1; transform: rotate(-90deg); }
.v7-sp__mark circle { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .3s; }
.v7-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; }
.v7-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; }
.v7-sp__nm { margin: 26px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: #e2c27f; }
.v7-sp__q { position: relative; margin: 30px auto 0; padding-top: 28px; max-width: 30em; }
.v7-sp__q::before { content: ""; position: absolute; left: 50%; top: 0; width: 36px; height: 1px; margin-left: -18px; background: rgba(208,171,98,.75); }
.v7-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; }
.v7-sp__in > :not(.v7-sp__mark) { transition: opacity .9s ease, translate 1s var(--sp-e); }
.v7-sp__in > .v7-sp__t { transition-delay: .8s; }
.v7-sp__in > .v7-sp__nm { transition-delay: .95s; }
.v7-sp__in > .v7-sp__q { transition-delay: 1.1s; }

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

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