/* RTL 자동 반전본 — 원본: /en/assets/css/sections/jcurl-sec_3.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=35436b461536eda73f471adba2ecec45 */
/* ── jcurl / Sec_3 — KOWON's surgical approach ──────────────────
   시안 아트보드 1920×844 (b1.html 123–153행).
   실크 배경 위에 제목·리드, 그 아래 서로 겹치는 원 4개(흰/핑크 교차).

   시안 좌표 → 간격 환산 (섹션 top 0 기준)
     140  Title 프레임 top / 236 리드 top / 294 Title 프레임 아래
     294 ─60(--sp-block)─ 354 Img_diagram top
     354+350=704 원 아래 ─140─ 844 섹션 끝
   → 위·아래 여백이 모두 140. --sp-section(120)+20 으로 만든다.

   원 배치(Img_diagram 1280×350): 지름 350, 피치 310, 겹침 40.
   4*350 - 3*40 = 1280 이므로 컨테이너 폭 대비 비율로 그대로 옮긴다.
     지름 350/1280 = 27.34375%   겹침 40/1280 = 3.125%
   절대좌표 대신 flex + 음수 마진으로 재작성했다.

   쌓임 순서는 시안 그대로 1→2→3→4 (뒤 원이 앞 원을 덮는다).
   흰 원(1·3)의 2px 흰 테두리만 그 위에 얹힌다(시안 Ellipse 5·6). */

.jcurl-sec_3{
  padding-block:calc(var(--sp-section) + 20px);
  overflow:hidden;
  /* 실크 배경. 시안은 1920×844 를 cover 로 채운다(원본 4096×2731). */
  background:url('https://channel-static.rebeauty.co.kr/kowonps/renewal/en/assets/img/jcurl-sec_3-1.jpg') center / cover no-repeat;
}

/* 분홍 베일 — 시안 rgba(255,230,241,.45) = --brand-tint-3 를 45% 로 올린 것.
   토큰 색을 그대로 쓰려고 별도 레이어 + opacity 로 만든다. */
.jcurl-sec_3::before{
  content:"";
  position:absolute;inset:0;
  background:var(--brand-tint-3);
  opacity:.45;
}
/* 베일보다 본문이 위에 오도록 (둘 다 z-index:auto, 트리 순서로 결정) */
.jcurl-sec_3__inner{position:relative}

/* ── 제목 / 리드 ─────────────────────────────────────────────
   H2 는 export 대로 50/1.5 (줄상자 75). 시안이 적은 박스 높이 66 은
   Figma 의 hug 값이라 글자 위치와 무관하다 — 1.5 로 둬야 시안과 겹친다.
   리드는 18/1.6 = 28.8 × 2줄 = 57.6 ≈ 시안 58.
   시안 세로: 140 H2 top / 236 리드 top → 사이 간격 236-(140+75) = 21. */
.jcurl-sec_3__title{
  margin-top:0;
  line-height:1.5;
}
.jcurl-sec_3__lead{
  margin-top:21px;
  line-height:1.6;
}

/* ── 겹치는 원 4개 ──────────────────────────────────────────── */
.jcurl-sec_3__diagram{
  margin-top:var(--sp-block);
  display:flex;
  justify-content:center;
  /* 흰 테두리(z-index:1)를 이 안에 가둔다 */
  position:relative;z-index:0;
}

.jcurl-sec_3__step{
  position:relative;
  flex:0 0 27.34375%;   /* 350 / 1280 */
  max-width:27.34375%;
  aspect-ratio:1;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding-inline:6px;
  text-align:center;
  font-weight:700;font-size:var(--fs-24);line-height:1.4;
  letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.jcurl-sec_3__step + .jcurl-sec_3__step{margin-right:-3.125%}  /* 겹침 40 / 1280 */

.jcurl-sec_3__step--light{background:var(--surface);color:var(--brand)}
.jcurl-sec_3__step--brand{background:var(--brand);color:var(--text-inverse)}

/* 흰 원의 2px 흰 테두리는 옆 핑크 원 위로 올라온다 (시안 Ellipse 5·6) */
.jcurl-sec_3__step--light::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--surface);
  pointer-events:none;
}

/* 겹침은 어느 구간에서나 시안 비율 40/350 = 0.114 × 지름 으로 계산한다.
   지름을 컨테이너 폭 %로만 묶으면 브레이크포인트 위쪽 끝에서 원이 과도하게
   커진다(2열 1023 → 503px, 1열 767 → 523px). 폭 비율은 그대로 두고
   상한만 px 로 막는다. 상한에 걸리지 않는 768 / 390 은 값이 그대로다. */

/* ── 태블릿 768–1023: 원 4개를 한 줄에 두면 지름이 글자보다 빨리 줄어
   라벨이 옆 원에 가린다. 2×2 로 접는다(겹침은 가로로 유지). ────── */
@media (max-width:1023px){
  .jcurl-sec_3__diagram{--jcurl-sec_3-d:min(52.5%,380px);flex-wrap:wrap;row-gap:var(--sp-gap)}
  .jcurl-sec_3__step{flex-basis:var(--jcurl-sec_3-d);max-width:var(--jcurl-sec_3-d)}
  .jcurl-sec_3__step + .jcurl-sec_3__step{margin-right:calc(var(--jcurl-sec_3-d) * -0.114)}
  .jcurl-sec_3__step:nth-child(3){margin-right:0}
}

/* ── 모바일 <768: 1열. 겹침을 세로로 돌린다.
   지름 72%(390 에서 252), 세로 %마진도 컨테이너 '폭' 기준이라 같은 식이 맞다. */
@media (max-width:767px){
  .jcurl-sec_3__diagram{--jcurl-sec_3-d:min(72%,280px);flex-direction:column;align-items:center;flex-wrap:nowrap;gap:0}
  .jcurl-sec_3__step{flex-basis:auto;width:var(--jcurl-sec_3-d);max-width:var(--jcurl-sec_3-d)}
  .jcurl-sec_3__step + .jcurl-sec_3__step{margin-right:0;margin-top:calc(var(--jcurl-sec_3-d) * -0.114)}
}