/* ==========================================================================
   rb2026 메인 히어로 — Concept 1 Editorial Reveal (2026-09 brief)
   스위치: inc/palette.php 의 dv_hero1() — 미리보기 ?dvhero=1 · 전환 touch ko/rb2026/HERO · 롤백 rm
   마크업 sections/hero-c1.php · 동작 js/hero-c1.js. 색은 --dv-* 토큰만 쓴다(PALETTE·FONT·LAYOUT 켜짐 여부와 무관).
   기본값 = 정적 배치(모션 끔·JS 없음). .dv-c1.is-motion 에서만 고정 + 스크롤 연출.
   JS 가 stage 에 넣는 변수: --head(헤드라인 퇴장 0→1) --widen(아치 확장 0→1), 선언문 줄마다 --in(0→1)
   ========================================================================== */

/* ---- 헤더: 밝은 히어로 위에서도 진한 글자·원래 로고색. 투명 면과 스크롤 후 흰 면 전환은 그대로 ---- */
body.dv-home .dv-header:not(.is-solid){color:var(--dv-ink)}
body.dv-home .dv-header:not(.is-solid) a.dv-brand img{filter:none}
body.dv-home .dv-header:not(.is-solid) .dv-nav-item:hover>a.dv-nav-a,
body.dv-home .dv-header:not(.is-solid) .dv-nav-item:focus-within>a.dv-nav-a{color:var(--dv-olive-dp)}
body.dv-home .dv-header:not(.is-solid) .dv-lang-btn:hover,
body.dv-home .dv-header:not(.is-solid) a.dv-tel:hover{background:rgba(47,43,40,.06)}

/* ==========================================================================
   정적 배치 — 왼쪽 헤드라인·문장·버튼, 오른쪽 아치 인물, 선언문은 아래 한 블록
   ========================================================================== */
.dv-c1{position:relative;background:var(--dv-cream-2);color:var(--dv-ink)}
.dv-c1-stage{
  position:relative;display:grid;
  grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  grid-template-rows:minmax(0,1fr) auto auto;
  column-gap:clamp(28px,3.4vw,64px);
  max-width:calc(var(--dv-wrap) + var(--dv-gut)*2);margin-inline:auto;
  --c1-padb:clamp(28px,5svh,64px);
  --c1-lift:5svh;   /* 왼쪽 글 묶음을 위로 당기는 양(PC) — 헤드라인 위 빈 면을 줄인다 */
  padding:calc(var(--dv-hdr) + clamp(16px,3svh,40px)) var(--dv-gut) var(--c1-padb);
}

/* 헤드라인 — 글자 크기는 왼쪽 칸 폭(cqi)과 화면 높이(svh) 중 작은 쪽 */
.dv-c1-intro{grid-column:1;grid-row:1;align-self:end;container-type:inline-size}
.dv-c1-label{
  display:flex;align-items:center;gap:14px;margin:0;
  font-family:var(--dv-serif);font-style:italic;font-weight:500;font-size:clamp(19px,1.45vw,25px);line-height:1.2;color:var(--dv-ink-2);   /* 2026-09-18: 17~22 → 19~25. 인트로가 align-self:end 라 커지면 위로 자라고 헤드라인은 제자리 */
}   /* 대문자 자간 키커 대신 세리프 이탤릭 바이라인 */
.dv-c1-label::before{content:"";width:44px;height:1px;background:var(--dv-rose)}   /* Champagne 헤어라인 */
.dv-c1-title{
  margin:clamp(14px,1.6vw,26px) 0 0;
  font-family:var(--dv-serif);font-weight:500;line-height:.9;letter-spacing:0;color:var(--dv-ink-2);
  font-size:min(11vw,17svh,190px);
  font-size:min(21.5cqi,17svh,190px);   /* 컨테이너 단위 미지원이면 윗줄 */
}
.dv-c1-title>span{display:block;white-space:nowrap}
.dv-c1-l1{margin-left:-.04em;text-transform:uppercase}
.dv-c1-title>.dv-c1-l2{margin:-.023em 0 .12em 1.63em;font-size:.35em;font-style:italic;font-weight:400;line-height:1}   /* 2026-09-18: .3em→.35em. 커진 만큼 위 여백을 줄여(.16em→-.023em) 아래 RIGHT TIMING 은 제자리, 위로만 자란다. 들여쓰기는 1.9em→1.63em 으로 보정해 시각 위치 유지 */
.dv-c1-title>.dv-c1-l3{font-size:.52em;line-height:1;text-transform:uppercase;letter-spacing:.01em;color:var(--dv-olive-dp)}   /* 큰 글자라 Olive Dark 허용 */

/* 문장 + 버튼 — 스크롤 연출 내내 남는다 */
.dv-c1-cta{grid-column:1;grid-row:2;padding-top:clamp(28px,5svh,60px)}
.dv-c1-head{
  margin:0;font-family:var(--dv-serif-kr,var(--dv-ff));font-weight:600;
  font-size:clamp(18px,1.3vw,24px);line-height:1.5;letter-spacing:-.02em;color:var(--dv-ink);
}
.dv-c1-actions{margin-top:clamp(16px,1.6vw,26px);gap:10px 12px}

/* 아치 인물 */
.dv-c1-portrait{grid-column:2;grid-row:1 / span 2;display:flex;margin:0;min-height:max(420px,calc(100svh - var(--dv-hdr) - clamp(60px,9svh,110px)));container-type:inline-size}   /* 정적: 선언문은 첫 화면 아래 */
.dv-c1-frame{position:relative;flex:1;overflow:hidden;border-radius:2000px 2000px 0 0;background:var(--dv-beige)}
.dv-c1-zoom,.dv-c1-zoom img{position:absolute;inset:0;display:block;width:100%;height:100%}
.dv-c1-zoom img{object-fit:cover;object-position:54% 48%}   /* 세로 3:4 원본 — 얼굴(눈 높이 42%)이 틀 40% 근처에 오게 */

/* 선언문 */
.dv-c1-manifesto{grid-column:1 / -1;grid-row:3;padding-top:clamp(72px,7vw,120px)}
.dv-c1-m{
  margin:0 0 0 -.12em;padding:0 .12em .06em;overflow:hidden;
  font-family:var(--dv-serif);font-style:italic;font-weight:400;
  font-size:clamp(44px,min(5.4vw,9svh),104px);line-height:1.02;color:var(--dv-ink-2);
}
.dv-c1-m>span{display:block}
.dv-c1-m--accent{color:var(--dv-olive-dp)}
.dv-c1-m-kr{
  margin:clamp(16px,1.8vw,28px) 0 0;font-family:var(--dv-serif-kr,var(--dv-ff));font-weight:500;
  font-size:clamp(16px,1.15vw,20px);line-height:1.75;letter-spacing:-.01em;color:var(--dv-ink);
}
.dv-c1-cue{display:none}

/* ==========================================================================
   모션 — 로드 순차 등장 + 고정 구간 3프레임 스토리보드 (2026-09-18 brief, 2026-09-20 에 250vh → 160svh)
   Frame 1(정지) 헤드라인 + 아치 인물 + 앞쪽 꽃 → Frame 2 헤드라인 퇴장·아치가 조금 열리며 인물 미세 푸시인
   → Frame 3(정지) 같은 인물 화면 위 선언문. 진폭은 낮게, 구간은 길게 — 구간 값은 js/hero-c1.js.
   ========================================================================== */
.dv-c1.is-motion .dv-c1-rv{opacity:0;transform:translate3d(0,24px,0)}
.dv-c1.is-motion .dv-c1-fade{opacity:0}
.dv-c1.is-motion .dv-c1-zoom{transform:scale(1.02)}
.dv-c1.is-loaded .dv-c1-rv,.dv-c1.is-loaded .dv-c1-fade{
  opacity:1;transform:none;
  transition:opacity .9s var(--dv-ease) var(--d,0s),transform 1.1s var(--dv-ease) var(--d,0s);
}
.dv-c1.is-loaded .dv-c1-zoom{transform:none;transition:transform 1.8s var(--dv-ease) .5s}   /* 인물 102% → 100% */

.dv-c1.is-pin .dv-c1-track{height:160svh}   /* 섹션 총 높이 = 무대 100svh + 전환 60svh. 별도 스페이서 없음 */
.dv-c1.is-pin .dv-c1-stage{position:sticky;top:0;height:100svh;min-height:0;grid-template-rows:minmax(0,1fr) auto}   /* 무대는 뷰포트를 넘지 않는다(헤더는 padding-top 으로 이미 계산됨) */

.dv-c1.is-pin .dv-c1-intro{
  opacity:calc(1 - var(--head,0) * 2);
  transform:translate3d(0,calc(var(--head,0) * -9svh),0);   /* 저진폭: 이동보다 '사라짐'으로 읽히게 */
}
.dv-c1.is-pin .dv-c1-manifesto{grid-column:1;grid-row:1;align-self:end;padding:0}
.dv-c1.is-pin .dv-c1-m{opacity:var(--in,0)}
.dv-c1.is-pin .dv-c1-m>span{transform:translate3d(0,calc((1 - var(--in,0)) * 125%),0)}   /* 세리프 윗부분이 줄 상자 위로 나와 105% 로는 꼭지가 비친다 */
.dv-c1.is-pin .dv-c1-m-kr{opacity:var(--in,0);transform:translate3d(0,calc((1 - var(--in,0)) * 14px),0)}

.dv-c1.is-pin .dv-c1-portrait{min-height:0;margin-bottom:calc(-1 * var(--c1-padb))}   /* 아래가 각진 아치는 섹션 바닥에 닿아 잘려야 하는 형태 — 무대 하단 여백만큼 흘린다 */
.dv-c1.is-motion .dv-c1-zoom img{transform:scale(calc(1.06 + var(--widen,0) * .02))}   /* clip-path 는 '드러낼' 뿐이라 인물은 제자리 — 2% 푸시인만 더한다 */
/* 아치: 72% 폭 반원 → 85% 폭 반원. 창 모서리로 바뀌지 않고 같은 아치가 조금 넓어질 뿐이다(프레임 간 연결감). 좌우 여백·반경은 figure 폭(cqi) 기준이라 JS 가 재지 않는다 */
@supports (width:1cqi){
  .dv-c1.is-motion .dv-c1-frame{
    --c1-side:calc((1 - var(--widen,0) * .45) * 14cqi);   /* 14 → 7.7cqi: 레이아웃이 바뀌는 게 아니라 같은 화면이 조금 열리는 정도 */
    --c1-rad:calc(35.8cqi + var(--widen,0) * 6.3cqi);   /* 클립된 폭의 절반(=50cqi - side)을 따라가 끝까지 정확한 반원 아치. 반폭보다 0.2 작게 — 넘치면 반경이 재조정돼 곡선 끝에 1px 턱이 생긴다 */
    border-radius:0;
    clip-path:inset(0 var(--c1-side) 0 var(--c1-side) round var(--c1-rad) var(--c1-rad) 0 0);
  }
}

/* ---- 왼쪽 글 묶음 위로 1cm(38px) — 2026-09-18 요청. 2026-09-20 에 --c1-lift(5svh) 를 더해 헤드라인 위 빈 면을 줄였다.
        아치·인물은 그대로 두고 글만 올린다.
        선언문도 같은 값만큼 올려야 헤드라인이 있던 자리와 어긋나지 않는다(프레임 간 연결감).
        모바일은 헤드라인이 위에 붙는 배치라 제외 ---- */
@media (min-width:1024px){
  /* transform 이 아니라 top 으로 올린다 — .dv-c1-cta 는 .dv-c1-rv(등장 애니메이션)를 겸하고 있어
     .dv-c1.is-loaded .dv-c1-rv{transform:none} 이 transform 을 덮는다. 헤드라인의 --head 이동도 건드리지 않는다 */
  .dv-c1-intro,.dv-c1-cta,.dv-c1.is-pin .dv-c1-manifesto{position:relative;top:calc(-38px - var(--c1-lift))}
}

.dv-c1.is-pin .dv-c1-cue{
  position:absolute;left:50%;bottom:clamp(14px,2.4svh,28px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dv-ink-2);
  opacity:calc(1 - var(--head,0) * 6);
}
.dv-c1.is-pin .dv-c1-cue::after{
  content:"";width:1px;height:36px;background:var(--dv-rose);
  animation:dv-c1-cue-line 2.4s var(--dv-ease) infinite;   /* 위에서 아래로 차올랐다 아래로 빠진다 — 방향(아래)을 알려준다 */
}
/* origin 이 top 인 동안 자라고, 다 자란 순간(scaleY:1) 에 bottom 으로 바꿔 아래로 빠지게 한다.
   45~55% 구간은 scaleY 가 1 이라 origin 이 바뀌어도 보이지 않는다 */
@keyframes dv-c1-cue-line{
  0%  {transform:scaleY(0);transform-origin:top}
  45% {transform:scaleY(1);transform-origin:top}
  55% {transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media (prefers-reduced-motion:reduce){
  .dv-c1.is-pin .dv-c1-cue::after{animation:none}
}

/* ==========================================================================
   히어로 단일 액션 큐 링크(dv_hero_cue) — 버튼 2개를 대신한다. 마크업은 무대 직계 자식.
   글자 Espresso(#453832, 배경 #F7F3ED 대비 10.1:1) · 선+화살촉 Olive Dark(#7F8E45, 3.12:1 — 기본 올리브는 1.97:1 로 미달).
   상시 반복 애니메이션 없음. 등장 1회(.dv-c1-fade) + 호버·포커스에서 화살표만 4px 내려간다.
   #signature 이동은 html 의 scroll-behavior·scroll-padding-top 이 처리하므로 JS 를 쓰지 않는다.
   ========================================================================== */
.dv-c1 a.dv-c1-go{
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 16px;   /* 타깃 확장 — 아래 배치 규칙에서 같은 값만큼 되돌려 보이는 위치는 유지한다 */
  font-family:var(--dv-serif-kr,var(--dv-ff));font-weight:600;
  font-size:clamp(14px,1.05vw,16px);line-height:1.3;letter-spacing:-.01em;
  color:var(--dv-ink-2);text-decoration:none;   /* Espresso. .dv-root a 보다 명시도가 높아야 Charcoal 로 덮이지 않는다 */
}
.dv-c1-go svg{
  width:8px;height:30px;overflow:visible;fill:none;
  stroke:var(--dv-olive-dp);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--dv-ease);
}
.dv-c1-go:hover svg,.dv-c1-go:focus-visible svg{transform:translateY(4px)}
@media (prefers-reduced-motion:reduce){
  .dv-c1-go svg{transition:none}
}

/* PC: 무대 하단 중앙. 가운데 정렬은 transform 이 아니라 translate 로 한다 —
   .dv-c1.is-loaded .dv-c1-fade{transform:none} 이 transform 을 덮어 가운데 정렬이 풀린다 */
@media (min-width:1024px){
  .dv-c1 a.dv-c1-go{position:absolute;left:50%;bottom:clamp(2px,1.4svh,16px);translate:-50% 0}
}

/* ==========================================================================
   태블릿·모바일(<1024) — 헤드라인 → 인물 → 문장·버튼 세로 배치, 하단 고정바 자리 비움
   ========================================================================== */
@media (max-width:1023px){
  .dv-c1-stage{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;row-gap:clamp(16px,2.6svh,28px);
    padding-top:calc(var(--dv-hdr) + clamp(12px,2.4svh,28px));
    padding-bottom:calc(var(--dv-mbar) + env(safe-area-inset-bottom,0px) + clamp(12px,2svh,20px));   /* 하단 고정바가 버튼을 가리지 않게 */
  }
  .dv-c1-intro{grid-row:1;align-self:start}
  .dv-c1-label{font-size:16px;gap:10px}
  .dv-c1-label::before{width:28px}
  .dv-c1-title{margin-top:10px;font-size:min(21vw,15svh,150px);font-size:min(21.5cqi,15svh,150px)}
  /* 아치 높이: 폭 기준 96vw 가 기본이되, 화면이 짧거나(=100svh - --c1-mo-rest) 넓으면 먼저 줄여
     헤드라인·문장·버튼이 첫 화면 안에 남게 한다. --c1-mo-rest = 헤더+제목+문장+버튼+하단 고정바가 쓰는 세로 자리 */
  .dv-c1-stage{--c1-mo-rest:430px}
  .dv-c1-portrait{grid-column:1;grid-row:2;min-height:min(96vw,64svh,calc(100svh - var(--c1-mo-rest)))}
  /* 아치만 거터 밖으로 — 글은 거터를 지키고 사진은 화면 가장자리 12px 까지 쓴다(2026-09-20).
     거터가 20 → 57.8px 로 넓어지며 보이는 아치가 화면의 68% → 53% 로 줄어든 것을 되돌린다 */
  .dv-c1-portrait{margin-inline:calc(12px - var(--dv-gut))}
  .dv-c1-cta{grid-row:3;padding-top:0}
  .dv-c1-head{font-size:clamp(16px,4.3vw,20px)}
  .dv-c1-actions{margin-top:12px}
  .dv-c1-actions .dv-btn{flex:1 0 auto;height:48px;padding-inline:14px;font-size:14.5px;white-space:nowrap}   /* 한 줄에 들어가면 나란히, 긴 번역 문구면 한 줄씩 */
  @media (max-width:379px){   /* 좁은 폰: 거터가 넓어 칸이 244px 남짓 — 여기서 버튼이 두 줄이 되면 하단 고정바에 가린다 */
    .dv-c1-actions .dv-btn{padding-inline:9px;font-size:13.5px;gap:6px}
  }
  /* 큐 링크는 문장 아래 한 행을 새로 쓴다(선언문은 그만큼 뒤로) — PC 의 절대배치를 여기서 해제한다 */
  .dv-c1-stage{grid-template-rows:auto auto auto auto auto}
  .dv-c1.is-pin .dv-c1-stage{grid-template-rows:auto minmax(0,1fr) auto auto}
  .dv-c1 a.dv-c1-go{
    grid-column:1;grid-row:4;justify-self:center;align-self:start;
    padding-block:10px;   /* 세로 쌓기(기본값)를 그대로 — PC 와 같은 인상. 아치 높이를 그만큼 쓴다.
                             좌우 거터가 대칭이라 칸 가운데 = 화면 가운데다(음수 margin 을 두면 그만큼 밀린다) */
  }
  .dv-c1-go svg{width:8px;height:18px}
  .dv-c1-manifesto{grid-row:5;padding-top:clamp(28px,7vw,48px)}
  /* 선언문은 두 줄(Not more. Not less. / Just right for you.)로 압축 — 첫 화면을 차지하지 않는 2차 메시지 */
  .dv-c1-m{display:inline-block;vertical-align:top;font-size:min(11vw,6svh,60px)}
  /* 등장은 PC 와 같은 스톱모션 비트 — 고정 없이 js/hero-c1.js 의 updateFlow() 가 블록 위치로 --in 을 만든다.
     .is-motion 은 인라인 스크립트가 첫 페인트 전에 붙이므로 보였다 숨는 깜빡임이 없고, 모션 끔이면 클래스가 없어 그냥 보인다 */
  .dv-c1.is-motion .dv-c1-m{opacity:var(--in,0)}
  .dv-c1.is-motion .dv-c1-m>span{transform:translate3d(0,calc((1 - var(--in,0)) * 115%),0)}
  .dv-c1.is-motion .dv-c1-m-kr{opacity:var(--in,0);transform:translate3d(0,calc((1 - var(--in,0)) * 12px),0)}
  .dv-c1-m>span{display:inline-block}
  .dv-c1-m--accent{display:block}
  .dv-c1-m-kr{margin-top:10px;font-size:min(15px,4vw);line-height:1.6}

  /* ---- 모바일 고정 스크롤(미리보기 ?dvmopin=1 · 전환 touch MOPIN). 꺼져 있으면 .is-pin 이 여기까지 오지 않아 전부 무시된다.
          섹션 140svh = 무대 100svh + 전환 40svh. 선언문이 헤드라인 자리에 겹쳐 두 줄로 들어온다 ---- */
  .dv-c1.is-pin .dv-c1-track{height:140svh}
  .dv-c1.is-pin .dv-c1-stage{grid-template-rows:auto minmax(0,1fr) auto}
  .dv-c1.is-pin .dv-c1-intro{transform:translate3d(0,calc(var(--head,0) * -6svh),0)}   /* PC(-9svh)보다 낮은 진폭 */
  .dv-c1.is-pin .dv-c1-manifesto{grid-row:1;align-self:start;padding-top:0}
  .dv-c1.is-pin .dv-c1-portrait{margin-bottom:0}   /* PC 의 아치 바닥 흘림은 여기선 하단 고정바 뒤로 들어간다 */
  .dv-c1.is-pin .dv-c1-cue{display:none}
  body.dv-c1-pin .dv-top.is-on{opacity:0;transform:translateY(8px);pointer-events:none}   /* 고정 구간에서 TOP 버튼이 '대표 시술 보기'를 가린다 */

  /* 짧은 화면(≤700px): 한 화면에 헤더·제목·사진·버튼·하단바가 다 들어가야 해 아치에 남는 높이가 적다.
     제목 묶음을 한 단계 줄여 그 차이를 아치로 넘긴다 — 늘리는 게 아니라 위에서 덜 쓰는 방식이라 버튼이 하단바에 가리지 않는다 */
  @media (max-height:700px){
    .dv-c1-label{font-size:14px}
    .dv-c1-title{margin-top:6px;font-size:min(17cqi,12svh,150px)}
    /* 고정(.is-pin)에서는 선언문이 제목과 같은 칸을 쓰고 둘 중 큰 쪽이 칸 높이를 정한다 —
       짧은 화면에서는 선언문이 더 커서 제목만 줄이면 아치에 넘어가는 높이가 없다. 같이 줄인다 */
    .dv-c1-m{font-size:min(9vw,5svh,48px)}
    .dv-c1-m-kr{margin-top:8px;font-size:13.5px;line-height:1.5}
  }

  /* 태블릿(600~1023): 폭이 넓어 21.5cqi 제목과 96vw 아치가 첫 화면을 넘긴다 — 높이 기준으로 한 번 더 조인다 */
  @media (min-width:600px){
    .dv-c1-title{font-size:min(15cqi,11svh,132px)}
    .dv-c1-portrait{min-height:min(62vw,calc(100svh - var(--c1-mo-rest)))}
  }

  /* 아치 확장은 모바일에서도 유지한다 — 고정 구간 없이 js/hero-c1.js 가 히어로 스크롤량으로 --widen 을 만든다.
     비율만 모바일 값(12cqi / 37.8cqi)으로, 폭 기준은 PC 와 같다 */
  @supports (width:1cqi){
    .dv-c1.is-motion .dv-c1-frame{--c1-side:calc((1 - var(--widen,0) * .45) * 5cqi);--c1-rad:calc(44.8cqi + var(--widen,0) * 2.25cqi)}
  }
}