/* ── main / Sec_1 — 히어로 ─────────────────────────────────────
   시안 아트보드 1920×980 (b0.html 23–103행). 절대좌표를 세로 flex 로
   옮겼고, ≥1280 에서 시안과 같은 자리에 떨어지도록 간격만 시안값으로 고정한다.

   시안 좌표 → 간격 환산 (Title 프레임 1280×467, 섹션 top 258 기준)
     H1 188 ─40─ eyebrow 28 ─0─ 원장명 48 ─25─ 배지 22 ─60─ CTA 56  = 467
   섹션 세로: 위 258 / 아래 255 → 3px 비대칭. padding 으로 만든다. */

.main-sec_1{
  /* 시안 adadad(배지) · acacac(Diretor). tokens.json _needs_decision
     '본문 회색 유사값' 으로 남은 값이라 토큰이 없다. 두 값 차가 1단계라
     섹션 안에서 하나로 쓴다. */
  --sec1-muted:rgb(173 173 173);

  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  min-height:980px;
  /* 상단은 헤더(--header-h) 아래로 콘텐츠를 밀어내는 역할도 겸한다.
     +3px 이 시안의 258/255 비대칭을 만든다. */
  padding-block:calc(var(--header-h) + 3px) var(--header-h);
  overflow:hidden;
  color:var(--text-inverse);
  text-align:center;

  /* 어두운 오버레이 + 수술실 사진. export 는 1920×1440 / 0 -383.3px 로
     적혀 있는데, 1920×980 에서 cover + center 83.33% 와 같은 결과다. */
  background-image:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/5937b88596495129-w1920.webp');
  background-size:100% 100%,cover;
  background-position:0 0,center 83.33%;
  background-repeat:no-repeat,no-repeat;
}

/* 히어로 영상 — 기존 배경(gradient + hero.jpg) 위에 깔고 준비되면 1s 페이드로 올린다.
   .7 검은 막을 래퍼 안에 넣어야(::after) 영상과 한 덩어리로 합성돼서
   페이드 중간에 밝기가 튀지 않는다. JS 가 안 붙으면 opacity 0 그대로라
   지금의 스틸이 그대로 보인다 — 모션 축소·no-JS 폴백을 겸한다. */
.main-sec_1__media{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.main-sec_1__media::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.7)}
.main-sec_1__video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.main-sec_1.is-video-ready .main-sec_1__media{opacity:1}
/* 모션 축소 — 영상을 아예 감춘다(내려받기는 site.js 가 따로 막는다) */
@media (prefers-reduced-motion:reduce){
  .main-sec_1__media{display:none}
}

.main-sec_1__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
}

/* H1 — Italiana 80. export 의 line-height:1 은 Figma 고정높이 텍스트박스
   (2줄 188px)를 잃은 값이라 PNG 역산값 1.175 를 쓴다.
   줄바꿈은 시안 그대로 두되 좁은 폭에서는 추가로 접히게 pre-wrap. */
.main-sec_1__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-80);line-height:1.175;letter-spacing:var(--ls-tight);
  -webkit-text-stroke:.8px currentColor;paint-order:stroke fill;
  white-space:pre-wrap;word-break:keep-all;
}

.main-sec_1__eyebrow{
  margin-top:var(--sp-stack);
  display:flex;align-items:center;justify-content:center;
  min-height:28px;
  color:var(--brand);
  font-weight:600;font-size:var(--fs-20);line-height:1;letter-spacing:var(--ls-tight);
}

.main-sec_1__doctor{
  font-weight:400;font-size:var(--fs-32);line-height:1.5;letter-spacing:var(--ls-tight);
}
.main-sec_1__role{font-size:var(--fs-20);color:var(--sec1-muted)}

/* 배지 3개 — 시안 간격 30(=--sp-gap), 원장명과의 거리 25 는 토큰에 없는 값 */
.main-sec_1__badges{
  margin-top:25px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-gap);
}
.main-sec_1__badge{
  display:flex;align-items:center;gap:4px;
  color:var(--sec1-muted);
  font-weight:500;font-size:var(--fs-18);line-height:1;letter-spacing:var(--ls-tight);
}
.main-sec_1__badge-icon{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  color:var(--brand);
}
.main-sec_1__badge-icon--lg{width:22px;height:22px}
.main-sec_1__badge-icon svg{display:block;overflow:visible}

/* CTA — .actions(gap 10 / 가운데)를 그대로 쓰고 버튼 폭만 시안에 맞춘다.
   .btn 기본 padding 35 은 시안(220/176)보다 넓다. Chrome 렌더 텍스트 폭이
   173 / 116(아이콘 20 + 4 + 92)이라 좌우 여백을 23.5 / 30 으로 잡으면
   시안과 같은 220px · 176px 가 된다. */
.main-sec_1__cta{margin-top:var(--sp-block)}
.main-sec_1__cta .btn--primary-ink{padding-inline:23.5px}
.main-sec_1__cta .btn--outline-light{gap:4px;padding-inline:30px}
.main-sec_1__cta .btn--outline-light img{width:20px;height:20px;flex:none}

/* SCROLL 인디케이터 — 시안 left 932 / top 883 / 59×47, 아래 여백 50 */
.main-sec_1__scroll{
  position:absolute;left:50%;bottom:50px;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.main-sec_1__scroll span{
  font-weight:600;font-size:var(--fs-16);line-height:1.3;letter-spacing:var(--ls-tight);
  color:rgba(255,255,255,.9);
}
.main-sec_1__scroll img{width:11.4286px;height:16px}

/* 태블릿·모바일: 아트보드 높이를 그대로 끌고 가지 않는다 */
@media (max-width:1023px){
  .main-sec_1{min-height:640px}
}
@media (max-width:767px){
  /* 폰에서는 콘텐츠 480 + 패딩 63/60 = 603 이 540 을 넘어 폭마다 높이가 달라진다.
     603 으로 고정해 서브페이지 히어로(.page-hero / .jcurl-sec_1)와 같은 높이로 맞춘다. */
  .main-sec_1{min-height:603px}
  .main-sec_1__badges{margin-top:var(--sp-tight)}
  .main-sec_1__cta{width:100%;max-width:360px;margin-inline:auto}
  .main-sec_1__scroll{display:none}
}

@media (max-width:767px){.main-sec_1{background-image:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/5937b88596495129-w1080.webp')}}