/* rb2026 메인 히어로 — 덮임 전환(2026-09-29 프리뷰 ?dvcover=1 · 전환 touch COVER). header.php 가 dv_hero_cover() 일 때 hero-c1.css 뒤에 싣는다.
   고정 무대(.dv-c1-stage, sticky)는 그대로 두고 트랙을 --c1-cover 만큼 더 늘린 뒤, 다음 섹션(DIVA Signature)을 같은 양의 음수 margin 으로 끌어올려
   무대 위(z-index 2)로 올라오게 한다. 덮이는 동안 무대는 살짝 위로 밀리며 옅어진다(--cover 는 js/hero-c1.js). 고정이 없는 경우(.is-pin 없음: 모션 끔·JS 실패)는 전부 무시된다.
   모바일도 MOPIN 고정이면 같은 문법(트랙 140svh + 덮임 100svh). */
:root{--c1-cover:120svh}   /* 형제(.dv-sig2)도 읽어야 하므로 루트에 — .dv-c1 에 두면 상속이 안 돼 margin 이 0 이 된다. v3: PC 는 1.2 화면(제목이 무대 위를 충분히 지나가도록) */
.dv-c1.is-cover{z-index:1}
.dv-c1.is-pin.is-cover .dv-c1-track{height:calc(160svh + var(--c1-cover))}
.dv-c1.is-pin.is-cover .dv-c1-stage{--c1-fade:clamp(0,calc(1 - (var(--cover,0) - .5) / .35),1);--c1-tfade:clamp(0,calc(1 - var(--cover,0) / .4),1);--c1-blur:calc(var(--cover,0) * 14px);transform:translate3d(0,calc(var(--cover,0) * -5svh),0)}   /* v5(사용자 「걸쳐졌을 때 지저분하다 → 흐릿하게」): 심도(depth) 전환 — 뒤 층(히어로)은 덮이는 만큼 흐려지고, 앞 층(Signature)은 항상 선명. 글은 제목과 겹치기 전(0→40%)에 먼저 사라지고 인물은 흐려지며 50→85% 에 사라진다. 위로 스크롤하면 같은 식이 거꾸로 돌아 초점이 히어로로 돌아온다 */
.dv-c1.is-pin.is-cover .dv-c1-intro,.dv-c1.is-pin.is-cover .dv-c1-manifesto,.dv-c1.is-pin.is-cover .dv-c1-cta{filter:blur(calc(var(--c1-blur,0px) * .6)) opacity(var(--c1-tfade,1));will-change:filter}   /* opacity 대신 filter — 등장 transition(opacity .9s)에 걸려 늦게 사라지는 것을 피한다 */
.dv-c1.is-pin.is-cover .dv-c1-portrait{filter:blur(var(--c1-blur,0px)) opacity(var(--c1-fade,1));will-change:filter}
.dv-c1.is-pin.is-cover .dv-c1-cue,.dv-c1.is-pin.is-cover a.dv-c1-go{opacity:calc(1 - var(--cover,0) * 4);transition:none;pointer-events:none}   /* 덮임이 시작되면 「대표 시술 살펴보기」 큐는 바로 사라진다 — Signature 소개 문장과 겹치던 것 */
.dv-c1.is-pin.is-cover ~ section{position:relative;z-index:2}   /* 히어로 뒤 섹션 전부가 한 장의 '시트'로 무대 위에 — 폰에서 Signature 가 화면보다 짧아 그 아래로 무대가 비치던 것 */
.dv-c1.is-pin.is-cover + .dv-sig2{margin-top:calc(-1 * var(--c1-cover));padding-top:12svh;isolation:isolate;background:linear-gradient(180deg,rgba(247,243,237,0) 0,rgba(247,243,237,0) 22svh,var(--dv-cream-2) 60svh,var(--dv-cream-2) 78%,var(--dv-cream) 100%)}   /* v4: 위 22svh 투명(무대의 잎·아이보리가 비침) → 히어로와 같은 아이보리 → 맨 아래만 크림(다음 Story 아이보리와 구분) */
.dv-c1.is-pin.is-cover + .dv-sig2::before{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw - 18px);bottom:-4%;width:calc(min(58vw,1040px) + 18px);aspect-ratio:1600/893;background:url(https://channel-static.rebeauty.co.kr/diva/ko/rb2026/img/hero/c1-leafshadow-1600.webp) center/100% 100% no-repeat;opacity:.26;rotate:180deg;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 70% 78% at 62% 38%,#000 34%,transparent 74%);mask-image:radial-gradient(ellipse 70% 78% at 62% 38%,#000 34%,transparent 74%)}   /* 히어로 오른쪽 아래 잎 그림자가 Signature 왼쪽 아래로 이어진다(같은 파일, 180°). 파일 가장자리가 화면 안에 오므로 타원 마스크로 사방을 흐린다(마스크 중심은 180° 돌린 뒤의 왼쪽 아래 = 파일의 62%/38%) */
@media (max-width:1023px){
  :root{--c1-cover:100svh}
  .dv-c1.is-pin.is-cover .dv-c1-track{height:calc(140svh + var(--c1-cover))}
  .dv-c1.is-pin.is-cover .dv-c1-stage{--c1-fade:clamp(0,calc(1 - (var(--cover,0) - .45) / .3),1);--c1-tfade:clamp(0,calc(1 - var(--cover,0) / .35),1);--c1-blur:calc(var(--cover,0) * 10px);transform:translate3d(0,calc(var(--cover,0) * -4svh),0)}   /* 폰: 글 0→35%, 인물 흐림 최대 10px, 45~75% 에 사라짐 */
  .dv-c1.is-pin.is-cover .dv-c1-cta,.dv-c1.is-pin.is-cover .dv-c1-head{opacity:calc(1 - var(--cover,0) * 4);transition:none}   /* 폰: 무대 맨 아래 문장·버튼(「하루 단 3명…」)이 올라오는 제목과 교차하므로 덮임 시작과 함께 숨김 */
  .dv-c1.is-pin.is-cover + .dv-sig2{padding-top:10svh;background:linear-gradient(180deg,rgba(247,243,237,0) 0,rgba(247,243,237,0) 18svh,var(--dv-cream-2) 50svh,var(--dv-cream-2) 80%,var(--dv-cream) 100%)}
  .dv-c1.is-pin.is-cover + .dv-sig2::before{width:calc(96vw + 18px);opacity:.2}
}