/* RTL 자동 반전본 — 원본: /en/assets/css/sections/jcurl-sec_5.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=69b89f511d488c39ef8b7603d680ba3c */
/* ── jcurl / Sec_5 — PROCESS ────────────────────────────────────
   시안 아트보드 1920×825 (b1.html 221–259행).
   진료실 사진 위 남색 90% 오버레이 → 제목 → STEP 알약 탭 → 흰 카드.

   시안 좌표 → 간격 환산 (섹션 상단 0 기준, 컨테이너 1280 / left 320)
     140  eyebrow(20/1.5) 중심 153
     182  H2(50) 중심 215
     278  Tab 47                → sec-head 바닥 244 에서 34
     385  Card 1280×300         → Tab 바닥 325 에서 60(= --sp-block)
     685  Card 바닥             → 섹션 바닥까지 140
   카드 안: pad 60 / 57·56, STEP 27 ─6─ H3 48 ─25─ 본문 27×3 = 187 */

.jcurl-sec_5{
  /* 시안 탭 테두리·비활성 글자 rgb(184 184 184). tokens.css 의 회색 5종
     주석에는 있으나 토큰으로는 빠져 있다(--line-soft/-mid/-strong/-outline 만).
     가장 가까운 --line-mid 는 3단위 어두워 임의 대체하지 않고 섹션 안에서만 쓴다. */
  --jc5-tab-line:rgb(184 184 184);

  position:relative;
  overflow:hidden;
  color:var(--text-inverse);
  /* 시안 세로: 위 138(eyebrow 광학중심 153 기준) / 아래 140 */
  padding-block:calc(var(--sp-section) + 18px) calc(var(--sp-section) + 20px);
  background:url('https://channel-static.rebeauty.co.kr/kowonps/renewal/en/assets/img/jcurl-sec_5-1.jpg') center / cover no-repeat var(--surface-navy);
}

/* 남색 오버레이 — 시안 rgba(20,29,51,.9) = --surface-navy 90%.
   토큰에 알파 변형이 없어 opacity 로 같은 합성 결과를 만든다. */
.jcurl-sec_5::before{
  content:"";
  position:absolute;inset:0;
  background:var(--surface-navy);
  opacity:.9;
  pointer-events:none;
}

.jcurl-sec_5__inner{position:relative;z-index:1}

/* ── STEP 알약 탭 ───────────────────────────────────────────
   시안: 폭 512 안에 117/119/120/120, 간격 12, 높이 47, radius 60.
   좁은 폭에서는 줄바꿈으로 넘긴다(가로 스크롤 대신). */
.jcurl-sec_5__tabs{
  margin-top:calc(var(--sp-gap) + 4px);   /* 시안 34 */
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  overflow:visible;
}

.jcurl-sec_5__tab{
  flex:0 0 auto;
  min-height:47px;
  padding-inline:25px;
  font-weight:600;
  color:var(--jc5-tab-line);
  box-shadow:inset 0 0 0 1px var(--jc5-tab-line);
}
.jcurl-sec_5__tab:hover{color:var(--text-inverse);box-shadow:inset 0 0 0 1px var(--text-inverse)}

.jcurl-sec_5__tab[aria-selected="true"]{
  background:var(--brand);
  color:var(--text-inverse);
  font-weight:600;
  box-shadow:none;
}

/* ── 단계 설명 카드 ─────────────────────────────────────────
   시안 1280×300, radius 20, 그림자 없음. */
.jcurl-sec_5__panels{margin-top:var(--sp-block)}

.jcurl-sec_5__card{
  /* 시안 pad 57/60/56/60 — --sp-stack·--sp-block 에 얹어 브레이크포인트에서 함께 줄인다 */
  padding:calc(var(--sp-stack) + 17px) var(--sp-block) calc(var(--sp-stack) + 16px);
  /* 시안 카드는 300 고정 프레임. 본문이 2줄인 STEP 02·04 는 273 으로 줄어
     탭을 바꿀 때마다 아래가 27px 흔들린다. 시안 높이를 하한으로 둬 막는다.
     좁은 폭에서는 내용이 이미 300 을 넘어 영향이 없다. */
  min-height:300px;
  color:var(--text-primary);
}

.jcurl-sec_5__step{
  font-weight:700;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:var(--ls-tight);color:var(--brand);
}

.jcurl-sec_5__title{
  margin-top:6px;
  font-weight:700;font-size:var(--fs-32);line-height:1.5;
  letter-spacing:var(--ls-tight);color:var(--text-primary);
  word-break:keep-all;
}

.jcurl-sec_5__text{
  margin-top:25px;
  font-weight:400;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:var(--ls-tight);color:var(--text-secondary);
  word-break:keep-all;
}