/* RTL 자동 반전본 — 원본: /en/assets/css/sections/jcurl-sec_9.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=7f44c42968b3c5181bf0e95f1895294c */
/* ── jcurl / Sec_9 — Related procedures ────────────────────────────
   시안 아트보드 1920×726 (b1.html 448–485행).
   배경: 인물 사진 + 흰색 60% 오버레이 → 밝은 회색(235~250 레벨).
   가운데 제목('Related' 만 핑크) 아래 흰 카드 2개.

   시안 세로 좌표 (섹션 top 기준)
     140 ─ 제목 프레임 66 ─ 60 ─ 카드 320 ─ 140  = 726
   카드: 620×320 / radius 20 / 그림자 없음 / 사이 40
     안쪽 여백 53(상하)·61(좌우), 본문 블록 498×214
     kicker 27 ─20─ 이름 76(32/1.2 2줄) ─20─ 설명 27 ─20─ Read more 24 */

.jcurl-sec_9{
  /* 시안 카드 안쪽 여백 53/61 — 토큰에 없는 값. 좁은 폭에서만 줄인다. */
  --jc9-pad-y:53px;
  --jc9-pad-x:61px;
  /* 카드 안 텍스트 사이 간격. 시안 전부 20 (--sp-tight 16 과 다르다) */
  --jc9-row:20px;
  /* 카드 이름 색 — 시안은 순수 검정. tokens 의 --text-primary 보다 진하다. */
  --jc9-ink:rgb(0 0 0);

  /* 시안 상하 여백 140px = --sp-section(120) + 20 */
  padding-block:calc(var(--sp-section) + 20px);

  background-color:var(--surface);
  background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),url('https://channel-static.rebeauty.co.kr/kowonps/renewal/en/assets/img/jcurl-sec_9-1.jpg');
  background-size:100% 100%,cover;
  background-position:100% 0,center;
  background-repeat:no-repeat,no-repeat;
}

/* 제목 — .sec-title(50/700/--text-primary) 그대로. eyebrow 가 없으니 위 여백만 지운다.
   시안 텍스트 프레임 66px = 50 × 1.32 (export 의 1.5 는 Figma 고정높이라
   실제 렌더와 다르다. 1.32 로 해야 베이스라인이 시안과 겹친다). */
.jcurl-sec_9__title{
  margin-top:0;
  line-height:1.32;
}

/* 시안 카드 사이 40 = --sp-stack. 제목 아래 60 = --sp-block. */
.jcurl-sec_9__cards{
  margin-top:var(--sp-block);
  gap:var(--sp-stack);
}

.jcurl-sec_9__card{
  height:100%;
  padding:var(--jc9-pad-y) var(--jc9-pad-x);
}

/* 핑크 라벨 — .eyebrow(Italiana/20/대문자)와 다른 Pretendard 18/700 */
.jcurl-sec_9__kicker{
  font-weight:700;
  font-size:var(--fs-18);
  line-height:1.5;
  letter-spacing:var(--ls-tight);
  color:var(--brand);
  word-break:keep-all;
}

/* 시술명 — .card__title(20/700)과 달리 시안은 32/600 */
.jcurl-sec_9__name{
  margin-top:var(--jc9-row);
  font-weight:600;
  font-size:var(--fs-32);
  line-height:1.2;
  letter-spacing:var(--ls-tight);
  color:var(--jc9-ink);
  word-break:keep-all;
}

.jcurl-sec_9__desc{
  margin-top:var(--jc9-row);
  font-weight:400;
  font-size:var(--fs-18);
  line-height:1.5;
  color:var(--text-secondary);
  word-break:keep-all;
}

/* .link-more 프리미티브(16/500 + 밑줄) 에서 색만 시안의 --text-tertiary 로 */
.jcurl-sec_9__more{
  margin-top:var(--jc9-row);
  color:var(--text-tertiary);
}

@media (max-width:1023px){
  .jcurl-sec_9{--jc9-pad-y:40px;--jc9-pad-x:40px}
}

/* 박스 3개(.grid--3)는 1024 이상에서 한 줄. 2열로 접히는 768–1023 에서는
   남는 한 칸이 비지 않도록 마지막 박스가 한 줄을 다 쓴다. */
@media (min-width:768px) and (max-width:1023px){
  .jcurl-sec_9__cards.grid--3 > li:last-child:nth-child(odd){grid-column:1 / -1}
}

@media (max-width:767px){
  .jcurl-sec_9{--jc9-pad-y:28px;--jc9-pad-x:24px}
}