/* jcurl / Sec_2 — What is J-Curl Rhinoplasty?
   시안 1920×1555: 가운데 정렬 한 줄기.
   로고(163×80) → H2 → 3줄 리드 → 비순각 다이어그램(732×320) → 핑크 알약 라벨(460×78)
   → 정의/보충 설명 → 테두리로 나뉜 번호 카드 4개(1280×280).
   Figma 의 절대좌표는 전부 세로 흐름 + margin 으로 옮겼다. */

/* 시안 상하 여백 140px (--sp-section 120 + 20).
   140 + 로고 80 … 카드 280 + 140 = 1555 로 시안 높이와 맞는다. */
.jcurl-sec_2{
  padding-block:calc(var(--sp-section) + 20px);
  background:var(--surface);
}

/* ── 머리말 ───────────────────────────────────────────────── */
/* 시안 163×80. 원본 512×251(비 2.0398)을 cover 로 담아 세로 80 을 정확히 맞춘다 */
.jcurl-sec_2__logo{width:163px;height:80px;object-fit:cover}

/* 시안: 로고 아래 220 → 제목 텍스트박스 250 = 30px */
.jcurl-sec_2__title{margin-top:var(--sp-gap);line-height:1.5}

/* 시안 리드는 행간 1.6(28.8px). 제목 박스 바닥 325 → 리드 346 = 21px */
.jcurl-sec_2__lead{
  margin-top:calc(var(--sp-tight) + 5px);
  line-height:1.6;
}

/* ── 비순각 다이어그램 ─────────────────────────────────────── */
/* 시안 리드 박스 높이는 반올림값(28.8×3 = 86.4 → 87)이라 1px 을 되돌려준다 */
.jcurl-sec_2__concept{margin-top:calc(var(--sp-block) + 1px)}

/* 시안은 732×320 창에 원본(640×256)을 800×320 으로 키워 (-15.95, 7) 에 놓았다.
   = 좌우 여백을 잘라내는 크롭. 비율로 옮겨 어느 폭에서나 같은 크롭이 된다.
   left -15.95/732, top 7/320, width 800/732. */
.jcurl-sec_2__diagram{
  position:relative;
  width:100%;max-width:732px;margin-inline:auto;
  aspect-ratio:732 / 320;
  overflow:hidden;
}
.jcurl-sec_2__diagram img{
  position:absolute;
  left:-2.1789%;top:2.1875%;
  width:109.2896%;max-width:none;height:auto;
}

/* ── 알약 라벨 + 설명 ──────────────────────────────────────── */
.jcurl-sec_2__caption{
  max-width:500px;margin-inline:auto;
  text-align:center;
}

/* 시안 알약 460×78, radius 60, 배경 --brand-tint-2.
   32px × 1.5 = 48 행상자 + 상하 15 = 78.
   flex 로 가운데 정렬하면 두 span 사이 공백이 사라지므로 블록 + text-align 으로 둔다. */
.jcurl-sec_2__pill{
  max-width:460px;margin:var(--sp-block) auto 0;
  padding:15px 20px;
  border-radius:var(--radius-pill);
  background:var(--brand-tint-2);
  font-size:var(--fs-32);line-height:1.5;
  word-break:keep-all;
}
.jcurl-sec_2__pill strong{font-weight:700;color:var(--brand)}
.jcurl-sec_2__pill span{
  font-weight:500;font-size:var(--fs-18);color:var(--text-tertiary);
}

/* 시안: 알약 바닥 951 → 971 = 20px */
.jcurl-sec_2__def{
  margin-top:calc(var(--sp-tight) + 4px);
  font-weight:600;font-size:var(--fs-20);line-height:1.6;
  color:var(--text-primary);word-break:keep-all;
}

/* 시안: 정의 박스 바닥 1003 → 1017 = 14px */
.jcurl-sec_2__note{
  margin-top:calc(var(--sp-tight) - 2px);
  font-weight:400;font-size:var(--fs-18);line-height:1.6;
  color:var(--text-secondary);word-break:keep-all;
}
/* 좁은 폭에서 각도 범위가 en dash 뒤에서 끊기지 않게 한다 */
.jcurl-sec_2__nb{white-space:nowrap}

/* ── 번호 카드 4개 ─────────────────────────────────────────── */
/* 시안은 칸마다 inset box-shadow 로 1px 선을 그렸다 — 칸의 왼쪽 선 + 마지막 칸의
   오른쪽 선 + 묶음의 위아래 선으로 옮긴다. 이렇게 해야 칸 폭이 정확히 320 씩이라
   구분선이 시안과 같은 x(640·960·1280)에 떨어진다. */
/* 열 수는 공용 .grid--4 가 처리한다(≤1023 2열, <768 1열). 여기서는 간격만 0 으로. */
.jcurl-sec_2__points{
  margin-top:var(--sp-block);
  gap:0;
  border-block:1px solid var(--line-soft);
}

.jcurl-sec_2__item{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:278px;                 /* 시안 카드 280 − 위아래 테두리 2px */
  /* 위 여백은 시안 값(Frame 89/90 top:74 − 테두리 1px = 73)으로 고정한다.
     1024–1279 에서는 칸이 236–308 로 좁아져 제목이 3줄로 접히는 칸이 생기는데,
     세로 가운데 정렬이면 칸마다 배지 높이가 73 / 59 로 어긋난다.
     좌우 24: 시안 텍스트 프레임 260 + 좌우 30 이지만 브라우저 자간이 살짝 넓다. */
  padding:73px 24px var(--sp-stack);
  text-align:center;
  border-left:1px solid var(--line-soft);
}
.jcurl-sec_2__item:last-child{border-right:1px solid var(--line-soft)}

/* 공용 .badge-num(44px/--fs-18) 을 시안 치수(56px/--fs-24)로만 키운다 */
.jcurl-sec_2__num{width:56px;height:56px;font-size:var(--fs-24);line-height:1.5}

.jcurl-sec_2__item-title{
  margin-top:calc(var(--sp-tight) + 4px);   /* 시안 배지 바닥 → 제목 20px */
  font-weight:700;font-size:var(--fs-20);line-height:1.4;
  letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}

/* ── 1024–1279 : 컨테이너만 유동. 리드 강제 줄바꿈은 아직 유지 ───── */

/* ── 태블릿 768–1023 : 카드 4열 → 2열, 리드 강제 줄바꿈 해제 ──── */
@media (max-width:1023px){
  .jcurl-sec_2__br{display:none}
  /* 2열에서는 네 칸 모두 제목이 <br> 대로 2줄이라 가운데 정렬로 되돌린다 */
  .jcurl-sec_2__item{min-height:238px;justify-content:center;padding-block:var(--sp-stack)}
  .jcurl-sec_2__item:nth-child(2n){border-right:1px solid var(--line-soft)}
  .jcurl-sec_2__item:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ── 모바일 <768 : 카드 1열, 세로 구분선 → 가로 구분선 ─────────── */
@media (max-width:767px){
  .jcurl-sec_2__item{
    min-height:0;padding-block:var(--sp-stack);
    border-right:1px solid var(--line-soft);
  }
  .jcurl-sec_2__item + .jcurl-sec_2__item{border-top:1px solid var(--line-soft)}
  .jcurl-sec_2__num{width:48px;height:48px}
}