/* 예약 탭 1안(2026-11-10 사용자 승인): 영상 스크롤은 그대로 두고, 영상 위 손님의 말·예약 칸과 영상 뒤 마무리를 다시 짠다.
   값은 account.css :root 규격 이름만 쓴다. */

/* ---- 영상 장면 글씨: 붉은 선 + 굵은 흰 제목 ---- */
.visit-renewal .film-copy .eyebrow{display:flex;align-items:center;gap:var(--mg-space-10);color:var(--mg-white);font-weight:var(--mg-weight-semibold)}
.visit-renewal .film-copy .eyebrow::before{content:'';flex:none;width:24px;height:2px;background:var(--mg-red)}
.visit-renewal .film-copy h1,.visit-renewal .film-copy h2{font-weight:var(--mg-weight-heavy);letter-spacing:-.045em}

/* ---- 장면마다 손님의 말 한 줄(누르면 사진과 전체 후기 창) ---- */
.scene-review{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--mg-space-12);align-items:center;width:min(420px,100%);margin:var(--mg-space-20) 0 0;padding:var(--mg-space-10) var(--mg-space-16) var(--mg-space-10) var(--mg-space-10);border:1px solid color-mix(in srgb,var(--mg-white) 14%,transparent);border-radius:var(--mg-radius-md);background:color-mix(in srgb,var(--mg-black) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--mg-white);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--mg-dur-fast) var(--mg-ease),transform var(--mg-dur-fast) var(--mg-ease)}
.scene-review:hover{background:color-mix(in srgb,var(--mg-black) 72%,transparent)}
.scene-review:active{transform:var(--mg-press)}
.scene-review img{width:52px;height:52px;border-radius:var(--mg-radius-sm);object-fit:cover;display:block}
.scene-review-copy{display:grid;gap:2px;min-width:0}
.scene-review-copy b{font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-bold);line-height:var(--mg-leading-snug)}
.scene-review-quote{font-size:var(--mg-fs-xs);line-height:var(--mg-leading-snug);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-review-copy small{font-size:var(--mg-fs-2xs);opacity:.65}
.scene-quote-link{display:inline-flex;align-items:center;gap:var(--mg-space-8);min-height:44px;margin-top:var(--mg-space-8);padding:0 var(--mg-space-4);border-bottom:1px solid color-mix(in srgb,var(--mg-white) 45%,transparent);color:var(--mg-white);font-size:var(--mg-fs-sm);text-decoration:none}
.scene-quote-link b{font-weight:var(--mg-weight-bold)}
.visit-renewal .scene-quote-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}

/* ---- 영상 중 예약 칸(공통 장면 버튼 줄을 흰 예약 칸으로) ---- */
.visit-renewal .chapter-controls{width:min(600px,calc(100% - 48px));padding:0;border:0;border-radius:0;background:none;box-shadow:none;bottom:calc(24px + env(safe-area-inset-bottom))}
.visit-renewal .chapter-controls .story-scroll-hint{display:none}
.visit-renewal .chapter-controls .chapter-apply{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--mg-space-20);min-height:0;padding:var(--mg-space-12) var(--mg-space-12) var(--mg-space-12) var(--mg-space-24);border:0;border-radius:var(--mg-radius-lg);background:var(--mg-white);color:var(--mg-black)!important;box-shadow:var(--mg-shadow-3);text-decoration:none}
.visit-renewal .chapter-controls .chapter-apply:hover{background:var(--mg-white)}
.booking-bar-copy{display:grid;gap:2px;min-width:0}
.booking-bar-copy b{font-size:var(--mg-fs-lg);font-weight:var(--mg-weight-heavy);letter-spacing:-.02em;line-height:var(--mg-leading-tight)}
.booking-bar-copy small{font-size:var(--mg-fs-sm);color:var(--mg-gray);line-height:var(--mg-leading-snug)}
.booking-bar-go{display:inline-flex;align-items:center;gap:var(--mg-space-12);min-height:52px;padding:0 var(--mg-space-20);border-radius:var(--mg-radius-md);background:var(--mg-red);color:var(--mg-white);font-size:var(--mg-fs-md);font-weight:var(--mg-weight-bold);transition:background-color var(--mg-dur-fast) var(--mg-ease)}
.visit-renewal .chapter-apply:hover .booking-bar-go{background:var(--mg-red-strong)}
.visit-renewal .chapter-apply:active .booking-bar-go{transform:var(--mg-press)}
.visit-renewal .chapter-controls .chapter-apply svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:1.8}

/* ---- PC 장면 목차: 위쪽 바(76px)와 아래 상담 버튼 사이 가운데, 낮은 화면은 바 바로 아래부터 ---- */
.visit-renewal .chapter-rail{top:calc(50% - 23px)}
.visit-renewal .chapter-rail [aria-current] span{color:var(--mg-red)}
@media(min-width:1025px) and (max-height:720px){.visit-renewal .chapter-rail{top:92px;transform:none}}

/* ---- 영상 뒤: 검은 마무리 ---- */
.visit-renewal .visit-afterglow{background:var(--mg-black)}
.booking-wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.booking-end{padding-block:clamp(64px,9vw,128px);background:var(--mg-black);color:var(--mg-ink);word-break:keep-all}
.booking-end-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mg-space-64);align-items:start}
.booking-eyebrow{display:flex;align-items:center;gap:var(--mg-space-10);margin:0 0 var(--mg-space-16);color:var(--mg-red);font-size:var(--mg-fs-xs);font-weight:var(--mg-weight-semibold);letter-spacing:.02em}
.booking-eyebrow::before{content:'';width:24px;height:2px;background:var(--mg-red)}
.booking-end h2{margin:0;color:var(--mg-white);font-size:clamp(34px,4.4vw,60px);line-height:var(--mg-leading-tight);font-weight:var(--mg-weight-heavy);letter-spacing:-.045em}
.booking-lead{margin:var(--mg-space-20) 0 0;font-size:var(--mg-fs-lg);line-height:var(--mg-leading-body);color:var(--mg-muted)}
.booking-promises{list-style:none;margin:var(--mg-space-32) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--mg-space-24) var(--mg-space-40)}
.booking-promises li{display:grid;gap:var(--mg-space-4)}
.booking-promises b{color:var(--mg-white);font-size:var(--mg-fs-4xl);line-height:var(--mg-leading-tight);font-weight:var(--mg-weight-heavy);letter-spacing:-.04em}
.booking-promises span{font-size:var(--mg-fs-sm);color:var(--mg-muted)}
.booking-call{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--mg-space-4) var(--mg-space-16);align-items:center;margin:var(--mg-space-32) 0 0;padding-top:var(--mg-space-20);border-top:1px solid color-mix(in srgb,var(--mg-white) 16%,transparent)}
.booking-call>span{font-size:var(--mg-fs-sm);color:var(--mg-muted)}
.booking-call a{display:inline-flex;align-items:center;min-height:44px;justify-self:start;color:var(--mg-white);font-size:var(--mg-fs-2xl);font-weight:var(--mg-weight-heavy);letter-spacing:-.01em;text-decoration:none}
.booking-call em{grid-column:2;font-style:normal;font-size:var(--mg-fs-xs);color:var(--mg-muted)}
.booking-end h3{margin:0 0 var(--mg-space-20);color:var(--mg-white);font-size:var(--mg-fs-xl);line-height:var(--mg-leading-tight);font-weight:var(--mg-weight-bold);letter-spacing:-.02em}
.booking-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--mg-space-16);counter-reset:step}
.booking-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--mg-space-12);align-items:start;font-size:var(--mg-fs-md);line-height:var(--mg-leading-snug);counter-increment:step}
.booking-steps li::before{content:counter(step);display:grid;place-items:center;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;font-size:var(--mg-fs-xs);font-weight:var(--mg-weight-bold)}
.booking-note{margin:var(--mg-space-16) 0 0;font-size:var(--mg-fs-sm);line-height:var(--mg-leading-body);color:var(--mg-muted)}
.visit-renewal .booking-apply{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-space-16);width:100%;min-height:60px;margin-top:var(--mg-space-24);padding:0 var(--mg-space-24);border:0;border-radius:var(--mg-radius-md);background:var(--mg-red);color:var(--mg-white);font-size:var(--mg-fs-lg);font-weight:var(--mg-weight-bold);text-decoration:none;box-shadow:none;transition:background-color var(--mg-dur-fast) var(--mg-ease),transform var(--mg-dur-fast) var(--mg-ease)}
.visit-renewal .booking-apply:hover{background:var(--mg-red-strong)}
.visit-renewal .booking-apply:active{transform:var(--mg-press)}
.visit-renewal .booking-apply svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.booking-regions{display:grid;gap:var(--mg-space-8);margin:var(--mg-space-20) 0 0}
.booking-regions div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--mg-space-12);align-items:center;padding:var(--mg-space-12) var(--mg-space-16);border:1px solid color-mix(in srgb,var(--mg-white) 16%,transparent);border-radius:var(--mg-radius-md)}
.booking-regions dt{font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-bold);color:var(--mg-white)}
.booking-regions dd{margin:0;font-size:var(--mg-fs-sm);color:var(--mg-muted)}

/* ---- 신청 전에 더 알아보기: 견적·쇼룸·블로그 ---- */
.booking-more{grid-column:1/-1;padding-top:var(--mg-space-40);border-top:1px solid color-mix(in srgb,var(--mg-white) 16%,transparent)}
.booking-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mg-space-20)}
.booking-card{display:grid;align-content:start;gap:var(--mg-space-6);min-width:0;color:var(--mg-ink);text-decoration:none;transition:transform var(--mg-dur-fast) var(--mg-ease)}
.booking-card-img{display:block;aspect-ratio:16/10;margin-bottom:var(--mg-space-10);overflow:hidden;border-radius:var(--mg-radius-md);background:var(--mg-black-3)}
.booking-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--mg-dur-slow) var(--mg-ease)}
.booking-card:hover img{transform:scale(1.04)}
.booking-card:active{transform:var(--mg-press)}
.booking-card small{font-size:var(--mg-fs-xs);color:var(--mg-muted)}
.booking-card b{display:flex;align-items:center;gap:var(--mg-space-8);color:var(--mg-white);font-size:var(--mg-fs-xl);font-weight:var(--mg-weight-bold)}
.visit-renewal .booking-card svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.booking-card-text{font-size:var(--mg-fs-sm);line-height:var(--mg-leading-body);color:var(--mg-muted)}

/* ---- 자주 묻는 질문(흰 바탕) + 블로그 더 읽기 ---- */
.booking-faq{padding-block:var(--mg-space-80);background:var(--mg-white);color:var(--mg-black);word-break:keep-all}
.booking-faq h2{margin:0 0 var(--mg-space-24);font-size:var(--mg-fs-2xl);line-height:var(--mg-leading-tight);font-weight:var(--mg-weight-bold);letter-spacing:-.03em}
.booking-faq details{border-top:1px solid var(--mg-paper-3)}
.booking-faq details:last-child{border-bottom:1px solid var(--mg-paper-3)}
.booking-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-space-16);min-height:72px;list-style:none;cursor:pointer;font-size:var(--mg-fs-lg);font-weight:var(--mg-weight-semibold)}
.booking-faq summary::-webkit-details-marker{display:none}
.visit-renewal .booking-faq summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform var(--mg-dur-fast) var(--mg-ease)}
.booking-faq details[open] summary svg{transform:rotate(45deg)}
.booking-faq details p{max-width:760px;margin:0 0 var(--mg-space-24);font-size:var(--mg-fs-md);line-height:var(--mg-leading-body);color:var(--mg-gray)}
.booking-read{display:inline-grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--mg-space-16);max-width:100%;margin:0 0 var(--mg-space-24);padding:var(--mg-space-12) var(--mg-space-16);border:1px solid var(--mg-paper-3);border-radius:var(--mg-radius-md);color:var(--mg-black);text-decoration:none;transition:border-color var(--mg-dur-fast) var(--mg-ease),transform var(--mg-dur-fast) var(--mg-ease)}
.booking-read:hover{border-color:var(--mg-black)}
.booking-read:active{transform:var(--mg-press)}
.booking-read small{grid-column:1;font-size:var(--mg-fs-2xs);color:var(--mg-gray)}
.booking-read span{grid-column:1;font-size:var(--mg-fs-sm);font-weight:var(--mg-weight-semibold)}
.visit-renewal .booking-read svg{grid-column:2;grid-row:1/3;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}

@media(max-width:900px){
 .booking-end-grid{grid-template-columns:1fr;gap:var(--mg-space-40)}
}
@media(max-width:700px){
 .scene-review{grid-template-columns:40px minmax(0,1fr);gap:var(--mg-space-10);width:100%;margin-top:var(--mg-space-12);padding:var(--mg-space-8) var(--mg-space-10) var(--mg-space-8) var(--mg-space-8)}
 .scene-review img{width:40px;height:40px}
 .scene-review-quote{display:none}
 .scene-quote-link{margin-top:var(--mg-space-4);font-size:var(--mg-fs-xs)}
 .visit-renewal .chapter-controls{width:calc(100% - 24px);bottom:calc(12px + env(safe-area-inset-bottom))}
 .visit-renewal .chapter-controls .chapter-apply{gap:var(--mg-space-12);padding:var(--mg-space-10) var(--mg-space-10) var(--mg-space-10) var(--mg-space-16)}
 .booking-bar-copy b{font-size:var(--mg-fs-md)}
 .booking-bar-copy small{font-size:var(--mg-fs-xs)}
 .booking-bar-go{min-height:48px;padding:0 var(--mg-space-16);font-size:var(--mg-fs-sm);gap:var(--mg-space-8)}
 .booking-lead{font-size:var(--mg-fs-md)}
 .booking-promises{gap:var(--mg-space-16) var(--mg-space-24)}
 .booking-promises b{font-size:var(--mg-fs-2xl)}
 .booking-cards{grid-template-columns:1fr;gap:var(--mg-space-16)}
 .booking-card{grid-template-columns:96px minmax(0,1fr);column-gap:var(--mg-space-16)}
 .booking-card-img{grid-row:1/4;aspect-ratio:1/1;margin:0}
 .booking-card b{font-size:var(--mg-fs-lg)}
 .booking-card-text{grid-column:1/-1;margin-top:var(--mg-space-4)}
 .booking-regions div{grid-template-columns:72px minmax(0,1fr)}
 .booking-faq summary{min-height:64px;font-size:var(--mg-fs-md)}
}
@media(prefers-reduced-motion:reduce){
 .scene-review,.booking-bar-go,.visit-renewal .booking-apply,.booking-card,.booking-card-img img,.booking-read{transition:none}
}
@media print{.scene-review,.scene-quote-link{display:none!important}}