/* ==========================================================================
   rb2026 메인 히어로 Concept 1 — 자연 요소 (2026-09-17 시안 「Diva Beauty in the Right Timing」 참고)
   잎 그림자(배경 구석) · 흐르는 곡선(아주 옅게, 아치 뒤) 두 가지뿐이다. 앞쪽 꽃은 2026-09-18 제거.
   2026-09-20: 모델 사진 교체(c1-model-tall)와 사진 아래 여백 메우기는 뺐다 — 인물 크롭은 hero-c1.css 가 이미 맞추고
   아치 바닥 붙임도 거기 .is-pin 규칙이 한다(중복되면 아치가 한 번 더 내려간다).
   스위치: inc/palette.php 의 dv_hero_nature() — 미리보기 ?dvnature=1 · 전환 touch ko/rb2026/NATURE · 롤백 rm
   마크업 sections/hero-c1.php(스위치 켜졌을 때만). 움직임은 hero-c1.js 가 이미 넣는 --head·--widen 만 쓴다.
   이미지: c1-leafshadow-*.webp(그림자만 알파)
   ========================================================================== */

/* 잎 그림자가 화면 끝까지 닿아도 가로 스크롤이 생기지 않게. clip 은 스크롤 컨테이너를 만들지 않아 sticky 가 유지된다 */
.dv-c1{overflow-x:clip}
.dv-c1-stage{isolation:isolate}   /* 아래 z-index:-1 장식이 섹션 아이보리 면 위, 글자·사진 아래에 오도록 */

/* ---- 잎 그림자: 왼쪽 위(헤드라인 뒤)와 오른쪽 아래(180° 돌림), 화면 끝 기준 ---- */
.dv-c1-leaf{position:absolute;z-index:-1;display:block;height:auto;pointer-events:none;user-select:none;--c1-leaf-x:18px}
.dv-c1 .dv-c1-leaf{max-width:none}   /* diva.css 의 .dv-root img{max-width:100%} (0,1,1) 보다 강해야 한다 — 아니면 아래 vw 폭이 스테이지 폭에서 잘린다 */
/* 화면 끝보다 --c1-leaf-x 만큼 더 바깥에서 시작하고 그만큼 넓다 — 아래 흐름(안쪽으로 --c1-leaf-x)에서 가장자리가 드러나지 않게.
   이미지가 파일 끝에서 뚝 잘려 있어 그냥 밀면 화면 가에 맨 크림 띠가 생긴다(1440 에서 18px, 밝기 236→244 로 눈에 띈다) */
.dv-c1-leaf--tl{top:0;left:calc(50% - 50vw - var(--c1-leaf-x));width:calc(min(64vw,1150px) + var(--c1-leaf-x))}
.dv-c1-leaf--br{bottom:0;right:calc(50% - 50vw - var(--c1-leaf-x));width:calc(min(48vw,860px) + var(--c1-leaf-x));rotate:180deg}   /* transform 은 hero-c1.css 등장 규칙이 none 으로 덮는다 */
.dv-c1-leaf--tl{--c1-leaf-op:.42}
.dv-c1-leaf--br{--c1-leaf-op:.34}
.dv-c1 .dv-c1-leaf{opacity:var(--c1-leaf-op)}
.dv-c1.is-motion .dv-c1-leaf{opacity:0}
.dv-c1.is-loaded .dv-c1-leaf{opacity:var(--c1-leaf-op);transition:opacity 1.6s var(--dv-ease) var(--d,0s)}
/* 스크롤 동안 아주 천천히 흐른다 */
.dv-c1.is-pin .dv-c1-leaf--tl{translate:calc(var(--widen,0) * var(--c1-leaf-x)) calc(var(--widen,0) * -22px)}
.dv-c1.is-pin .dv-c1-leaf--br{translate:calc(var(--widen,0) * -1 * var(--c1-leaf-x)) calc(var(--widen,0) * 22px)}

/* ---- 흐르는 곡선: 오른쪽 위 → 아치 뒤 → 왼쪽 아래. 화면 끝까지, 선 굵기는 늘어나지 않게 ---- */
.dv-c1-curve{
  position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;height:100%;
  overflow:visible;pointer-events:none;opacity:.55;
}
.dv-c1-curve path{fill:none;stroke:var(--dv-rose);stroke-width:1;vector-effect:non-scaling-stroke}   /* Champagne */
.dv-c1.is-motion .dv-c1-curve path{stroke-dasharray:2;stroke-dashoffset:2}   /* non-scaling-stroke 는 대시를 화면 길이로 재서 1 이면 끝이 덜 그려진다 */
.dv-c1.is-loaded .dv-c1-curve path{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--dv-ease) .8s}   /* 그려지듯 */
.dv-c1.is-pin .dv-c1-curve{opacity:calc(.55 - var(--widen,0) * .7)}   /* 아치가 넓어지면 옅어진다 */

/* ---- SCROLL 안내: 1024~1279 는 버튼 줄과 붙어 숨긴다 ---- */
@media (min-width:1024px) and (max-width:1279px){
  .dv-c1.is-pin .dv-c1-cue{display:none}
}

/* ==========================================================================
   태블릿·모바일(<1024): 2026-09-20 부터 PC 와 같은 구성(잎 그림자 두 장 + 곡선)을 쓴다.
   화면이 좁고 세로로 길어 같은 폭으로는 구석이 비므로 잎을 키우고, 대신 농도를 낮춘다
   (좁은 화면에서는 같은 농도가 더 짙게 읽히고, 글자가 면 전체를 덮어 대비가 떨어진다).
   가로 오버플로는 위쪽 .dv-c1{overflow-x:clip} 이 막는다.
   ========================================================================== */
@media (max-width:1023px){
  .dv-c1-leaf--tl{width:calc(110vw + var(--c1-leaf-x));--c1-leaf-op:.32}
  .dv-c1-leaf--br{width:calc(88vw + var(--c1-leaf-x));--c1-leaf-op:.24}
  .dv-c1-curve{opacity:.4}
}
@media (max-width:767px){
  .dv-c1-leaf--tl{width:calc(132vw + var(--c1-leaf-x));--c1-leaf-op:.28}
  .dv-c1-leaf--br{width:calc(108vw + var(--c1-leaf-x));--c1-leaf-op:.2}
  .dv-c1-curve{opacity:.3}
}