/* ── jcurl / Sec_1 — J컬 히어로 ─────────────────────────────────
   시안 아트보드 1920×650 (b1.html 23–54행). 다만 높이는 전 서브페이지 통일
   요청으로 메인 히어로(main-sec_1, 시안 1920×980)와 같은 980 / 640 / 603 을 쓴다.
   헤더는 공용 파샬이 얹으므로 여기서는 그 자리만 padding 으로 비워 둔다.

   시안 좌표 → 간격 환산 (Title 프레임 1280×170)
     eyebrow 24 ─25─ H1 72 ─25─ 부제 24  = 170
   프레임 안쪽 간격만 시안값이고, 세로 위치는 980 안의 중앙정렬로 떨어진다.
   위/아래 padding 의 4px 비대칭(헤더 100 + 4 / 100)은 시안 그대로 둔다. */

.jcurl-sec_1{
  /* 시안 부제 회색 rgb(173 173 173). tokens.json 의 '본문 회색 유사값'
     미결정 항목이라 토큰이 없다. 구분자 '|' 는 같은 색 50%
     (시안 rgba(173,173,173,.5)) 이라 opacity 로 만든다. */
  --jc1-muted:rgb(173 173 173);

  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  min-height:980px;
  padding-block:calc(var(--header-h) + 4px) var(--header-h);
  overflow:hidden;
  color:var(--text-inverse);
  text-align:center;

  /* 어두운 오버레이 68% + 인물 사진. export 는 1920×2881 / 0 -1737px.
     원본이 853×1280 이라 1920 폭에서 cover 와 같은 배율이다. 시안 높이 650
     에서는 세로 오프셋 1737/(2881-650) = 77.9% 가 그 구간이었는데, 높이가
     980 으로 커지면 같은 77.9% 가 인물을 위로 밀어 올린다. 시안과 같은 곳
     (원본 1280 기준 중심 917px)이 계속 가운데 오도록 82.7% 로 다시 잡는다.
       (2881-980) × 82.7% = 1572 → 보이는 구간 1572~2552 의 중심 2062. */
  background-image:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),url('https://channel-static.rebeauty.co.kr/kowonps/renewal/en/assets/img/jcurl-sec_1-1.jpg');
  background-size:100% 100%,cover;
  background-position:0 0,center 82.7%;
  background-repeat:no-repeat,no-repeat;
}

.jcurl-sec_1__inner{
  display:flex;flex-direction:column;align-items:center;
}

/* eyebrow — .eyebrow 프리미티브(Italiana/핑크)를 쓰되 시안은 22px·대문자
   변환 없음·박스높이 24(=line-height 24/22). 그 세 가지만 덮어쓴다. */
.jcurl-sec_1__eyebrow{
  font-size:var(--fs-22);
  line-height:1.0909;
  text-transform:none;
}

/* H1 — Pretendard 700/60. export 의 line-height:1 은 Figma 고정높이
   텍스트박스(72px)를 잃은 값이라 72/60 = 1.2 를 쓴다.
   흰 글자 위 0.8px 흰 스트로크도 시안 그대로. */
.jcurl-sec_1__title{
  margin-top:25px;
  font-weight:700;font-size:var(--fs-60);line-height:1.2;letter-spacing:var(--ls-tight);
  -webkit-text-stroke:.8px currentColor;paint-order:stroke fill;
  word-break:keep-all;
}

.jcurl-sec_1__lead{
  margin-top:25px;
  color:var(--jc1-muted);
  font-weight:500;font-size:var(--fs-18);line-height:1.3333;letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.jcurl-sec_1__sep{opacity:.5}

/* SCROLL 인디케이터 — 시안 left 932 / top 554 / 59×47, 아래 여백 49 */
.jcurl-sec_1__scroll{
  position:absolute;left:50%;bottom:49px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.jcurl-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);
}
.jcurl-sec_1__scroll img{width:11.4286px;height:16px}

/* 태블릿·모바일: 아트보드 높이를 그대로 끌고 가지 않는다 */
@media (max-width:1023px){
  .jcurl-sec_1{min-height:640px}
}
@media (max-width:767px){
  .jcurl-sec_1{min-height:603px}
  /* 부제가 2~3줄로 접히므로 행간만 풀어 준다 (폰트 크기는 토큰이 줄인다) */
  .jcurl-sec_1__lead{line-height:1.5}
  .jcurl-sec_1__scroll{display:none}
}