/* ── jcurl / Sec_4 — Why consider J-Curl + Before & After ──────────
   시안 아트보드 1920×2099 (b1.html 154–220행). 배경은 흰색(시안 Rectangle 12
   = 흰색 50% 베일, 뒤가 흰 바탕이라 결과는 --surface 와 같다).

   시안 좌표 → 간격 환산 (섹션 top 0 기준)
       140  Contents1(Title) top          Title 프레임 108
       308  Img_diagram top  ─ 350 ─ 658  (위 Title 과 60 = --sp-block)
       798  Contents2(Title) top          (원 아래 140)
       966  Card top                      (Title 과 60)
       966  | 소제목 36  ─15─ 1017  이미지 스트립 358.4 ─ 1375.4
      1435.4 | 소제목 36  ─15─ 1486.4 이미지 스트립 358.4 ─ 1844.8  (프레임 간 60)
      1904.8 고지 54 ─ 1958.8            (스트립과 60)
      2099  섹션 끝                       → 위·아래 여백 140

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

   쌓임 순서: 시안은 Ellipse7(테두리 원)이 맨 위에 한 번 더 깔려 있어
   결과적으로 '테두리 원'이 '회색 채움 원' 위에 온다. z-index 0/1 로 재현.
   채움 원은 분홍 글자, 테두리 원은 회색 글자(시안 교차 배치 그대로). */

.jcurl-sec_4{
  padding-block:calc(var(--sp-section) + 20px);   /* 시안 상하 140 */
  background:var(--surface);
}

/* 시안 Title 프레임 높이 108 = eyebrow 26 + 16(--sp-tight) + H2 66.
   Figma 텍스트 박스 높이를 행간으로 환산: 26/20 = 1.3, 66/50 = 1.32.
   이러면 두 글줄의 세로 중심이 시안(13 / 75)과 그대로 맞는다. */
.jcurl-sec_4 .eyebrow{line-height:1.3}
.jcurl-sec_4 .jcurl-sec_4__title{line-height:1.32}

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

.jcurl-sec_4__circle{
  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:calc(3.125% + 8px);   /* 겹침(3.125%)과 같은 컨테이너 폭 기준 백분율 — 글자가 옆 원 선 8px 안으로 못 들어온다 */
}
.jcurl-sec_4__circle + .jcurl-sec_4__circle{margin-left:-3.125%}  /* 겹침 40 / 1280 */

.jcurl-sec_4__circle--fill{z-index:0;background:var(--surface-muted)}
.jcurl-sec_4__circle--line{z-index:1;box-shadow:inset 0 0 0 1px var(--line-mid)}

.jcurl-sec_4__circle-text{
  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_4__circle--fill .jcurl-sec_4__circle-text{color:var(--brand)}
.jcurl-sec_4__circle--line .jcurl-sec_4__circle-text{color:var(--text-secondary)}

/* ── Before & After ───────────────────────────────────────── */
.jcurl-sec_4__results{margin-top:calc(var(--sp-section) + 20px)}  /* 시안 원 아래 140 */

.jcurl-sec_4__cases{margin-top:var(--sp-block)}
.jcurl-sec_4__case + .jcurl-sec_4__case{margin-top:var(--sp-block)}

/* 시안 소제목: 24/700, 분홍 막대 3×21 이 컨테이너 왼쪽에서 3px 안쪽,
   막대와 글자 사이 14px (시안 픽셀 실측 x=323..325 / 글자 x=340). */
.jcurl-sec_4 .jcurl-sec_4__case-label{
  padding-left:3px;
  gap:14px;
  font-size:var(--fs-24);line-height:1.5;
}
.jcurl-sec_4 .jcurl-sec_4__case-label::before{width:3px;height:.875em;border-radius:0}

/* 이미지 스트립: 시안 1280×358.4, 라운드 20 (--radius-card).
   시안은 원본을 컨테이너보다 크게 잡아 가장자리를 잘라 쓴다.
   Figma 수치를 백분율로 옮겨 폭이 줄어도 같은 크롭이 유지되게 했다. */
.jcurl-sec_4__strip{
  margin-top:15px;                  /* 시안 소제목 아래 15 */
  position:relative;
  aspect-ratio:25/7;                /* 1280 / 358.4 */
  overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--surface-muted);
}
.jcurl-sec_4__strip img{
  position:absolute;
  max-width:none;                   /* base.css 의 max-width:100% 해제 */
  height:auto;
}
/* 시안 image 10: left -27.1059 / top -19.5765 / width 1370.35 (of 1280×358.4) */
.jcurl-sec_4__case:nth-child(1) .jcurl-sec_4__strip img{
  width:107.0586%;left:-2.11765%;top:-5.46219%;
}
/* 시안 image 11: left -21.0824 / top -19.5765 / width 1386.92 */
.jcurl-sec_4__case:nth-child(2) .jcurl-sec_4__strip img{
  width:108.35313%;left:-1.64706%;top:-5.46219%;
}

/* 고지 — 시안 18/400 --text-secondary, 스트립 아래 60 */
.jcurl-sec_4 .jcurl-sec_4__note{
  margin-top:var(--sp-block);
  font-size:var(--fs-18);line-height:1.5;color:var(--text-secondary);
}

/* ── 1200 미만: 원 4개를 한 줄에 두면 지름이 글자보다 빨리 줄어
   라벨이 원 밖으로 넘친다. 좌우 여백이 겹침(3.125%) + 8 이라 글자 폭이
   0.2109 × 컨테이너 폭까지만 쓸 수 있고, 1100 부근에서 줄 수가 늘어 윗줄이
   원 테두리에 닿는다. 코실제거·보형물 없는 코 페이지와 같게 1200 에서 2×2 로 접는다. */
@media (max-width:1199px){
  .jcurl-sec_4__diagram{flex-wrap:wrap;row-gap:var(--sp-gap)}
  .jcurl-sec_4__circle{flex-basis:52.5%;max-width:52.5%;padding-inline:calc(5% + 8px)}   /* 겹침 5% + 8 */
  .jcurl-sec_4__circle + .jcurl-sec_4__circle{margin-left:-5%}
  .jcurl-sec_4__circle:nth-child(3){margin-left:0}
}

/* ── 768 미만: 2열로도 지름이 모자란다. 1열로 세우고 겹침만 남긴다 */
@media (max-width:767px){
  .jcurl-sec_4__diagram{flex-direction:column;align-items:center;row-gap:0}
  .jcurl-sec_4__circle{flex-basis:auto;width:100%;max-width:360px;padding-inline:12px}   /* 겹침이 세로라 좌우는 원래 여백 */
  .jcurl-sec_4__circle + .jcurl-sec_4__circle{margin-left:0;margin-top:-40px}
  .jcurl-sec_4__circle:nth-child(3){margin-left:0}
}