/* 서브페이지 CTA → doctor.html CTA 디자인 (2026-10-19 cases, 10-20 video · news · ceramic · anesthesia · story 미리보기)
   아래는 css/p-doc-v7.css ‘5 CTA’ 부분을 그대로 복사 — p-doc-v7.css 를 통째로 부르지 않으려고. 3D 값은 js/p-batch-cta.js. */
.bp-cta { --v7-gl: #c9a35a; }
/* ═══════════ 5 CTA · 진료실 사진 + 검은 블러 판 + 3D ═══════════
   층마다 따로 원근 변환을 준다: 사진은 반대로 · 판은 기울어짐 · 글은 평면 이동만(정지하면 원래 자리 = 글자가 선명). 값은 js/p-doc-v7.js 가 --v7-* 로 넣는다 */
.v7-cta { position: relative; display: grid; place-items: center; height: 720px; min-height: 620px; overflow: hidden; color: #fff; background: #141210; }
.v7-cta__bg { position: absolute; inset: -7%; margin: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  transform: perspective(1400px) rotateX(calc(var(--v7-rx, 0deg) * .5)) rotateY(calc(var(--v7-ry, 0deg) * .5)) translate3d(calc(var(--v7-tx, 0px) * -1.6), calc(var(--v7-ty, 0px) * -1.6), 0) scale(var(--v7-z, 1)); }
.v7-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.v7-cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.66) 0%, rgba(20,18,16,.5) 45%, rgba(20,18,16,.72) 100%); }
.v7-cta__card { position: relative; width: min(880px, calc(100% - var(--gut) * 2)); }
.v7-cta__glass { position: absolute; inset: 0; overflow: hidden; background: rgba(10,9,8,.5); -webkit-backdrop-filter: blur(18px) saturate(.85); backdrop-filter: blur(18px) saturate(.85);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 60px 100px -40px rgba(0,0,0,.85), 0 24px 40px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
  transform: perspective(1400px) rotateX(var(--v7-rx, 0deg)) rotateY(var(--v7-ry, 0deg)) translate3d(calc(var(--v7-tx, 0px) * .4), calc(var(--v7-ty, 0px) * .4), 0);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity 1s ease; }
.v7-cta__sheen { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--v7-mx, 50%) var(--v7-my, 0%), rgba(255,255,255,.1), rgba(255,255,255,0) 70%); opacity: var(--v7-sh, .6); transition: opacity .6s; }
.v7-cta__in { position: relative; padding: 78px 64px 74px; text-align: center; transform: translate(var(--v7-tx, 0px), var(--v7-ty, 0px)); transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s ease .3s; }
.v7-cta__mark { display: block; width: 34px; height: 34px; margin: 0 auto 22px; fill: none; stroke: var(--v7-gl); stroke-width: 2; overflow: visible; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.v7-cta__mark path { vector-effect: non-scaling-stroke; }
.v7-cta .s-h2 { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.55); }
.v7-cta .s-h2 strong { font-weight: 600; color: var(--v7-gl); }
.v7-cta__btns { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.v7-cta__btns .btn { box-shadow: 0 14px 28px -14px rgba(0,0,0,.7); }
/* 화면에 들어오기 전(스크립트가 html.v7-3d 를 붙였을 때만): 판은 뒤로 눕혀져 있고 글은 아래에 — 들어오면 판이 일어서고 글이 떠오른다 */
.v7-3d .v7-cta:not(.is-in) .v7-cta__glass { opacity: 0; transform: perspective(1400px) translate3d(0, 60px, -220px) rotateX(30deg); }
.v7-3d .v7-cta:not(.is-in) .v7-cta__in { opacity: 0; transform: translateY(36px); }
.v7-3d .v7-cta.is-in .v7-cta__glass { transition-duration: 1.4s, 1s; }
@media (max-width: 1023px) {
  .v7-cta { height: 600px; min-height: 540px; }
  .v7-cta__bg img { object-position: 68% 50%; }
  .v7-cta__in { padding: 54px 24px 50px; }
  .v7-cta__mark { width: 28px; height: 28px; }
  .v7-cta .s-h2 { font-size: 24px; line-height: 1.5; }
  .v7-cta__btns { flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; }
  .v7-cta__btns .btn { width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .v7-cta__bg, .v7-cta__glass, .v7-cta__in { transform: none !important; transition: none; }
}