/* ── page / ribfit-autologous — RIBFIT™ Autologous Implant ──────────
   J컬 서브페이지와 섹션 구성이 1:1 이다. 히어로·CTA·리스트는 subpage.css
   프리미티브(.page-hero .cta-band)와 layout.css(.grid .card .tabs .accordion
   .badge-num .tag .link-more)로 처리하고, 여기에는 그것으로 안 되는 것만 둔다. */

/* 가운데 정렬 리드 — 한 줄이 너무 길어지지 않게만 잡는다 (.prose 와 같은 900) */
.ribfit-autologous__lead{max-width:900px}

/* ── Sec_1 히어로 ──────────────────────────────────────────────────
   J컬 히어로와 같은 두 마디 부제. 구분자는 같은 색 50%. */
.ribfit-autologous__sep{opacity:.5}

/* ── Sec_2 What is RIBFIT™? ────────────────────────────────────────
   J컬 Sec_2 의 다이어그램 + 알약 라벨 + 정의/보충 구성. */
.ribfit-autologous__concept{margin-top:var(--sp-block)}

/* 원본 1020×375, 흰 바탕 사진이라 액자 없이 그대로 가운데 놓는다 */
.ribfit-autologous__concept-media{max-width:1020px;margin-inline:auto}
.ribfit-autologous__concept-img{display:block;width:100%;height:auto}

.ribfit-autologous__caption{max-width:640px;margin-inline:auto;text-align:center}

/* 핑크 알약 라벨 — 시술명(32/700) + 괄호 설명(18/500) 한 줄 */
.ribfit-autologous__pill{
  max-width:520px;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;
}
.ribfit-autologous__pill strong{font-weight:700;color:var(--brand)}
.ribfit-autologous__pill span{font-weight:500;font-size:var(--fs-18);color:var(--text-tertiary)}

.ribfit-autologous__def{
  margin-top:20px;
  font-weight:600;font-size:var(--fs-20);line-height:1.6;
  color:var(--text-primary);word-break:keep-all;
}
.ribfit-autologous__note{
  margin-top:14px;
  font-size:var(--fs-18);line-height:1.6;
  color:var(--text-secondary);word-break:keep-all;
}

/* ── Sec_1b 번호 카드 4개 — 히어로 바로 아래 띠 ────────────────────
   열 수는 공용 .grid--4 가 처리한다(≤1023 2열, <768 1열).
   여기서는 간격을 0 으로 두고 칸 사이를 1px 선으로 나눈다(J컬 Sec_2 와 같다). */
.ribfit-autologous__points{
  gap:0;
  border-block:1px solid var(--line-soft);
}
/* 위에서부터 쌓는다 — 칸마다 제목 줄 수가 달라도 배지가 한 줄로 맞는다
   (가운데 정렬이면 1줄짜리 '04' 칸만 배지가 내려앉는다) */
.ribfit-autologous__point{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:260px;
  padding:60px 24px var(--sp-stack);
  text-align:center;
  border-left:1px solid var(--line-soft);
}
.ribfit-autologous__point:last-child{border-right:1px solid var(--line-soft)}

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

.ribfit-autologous__point-title{
  margin-top: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;
}
@media (max-width:1023px){
  .ribfit-autologous__point{min-height:220px;padding-block:var(--sp-stack)}
  .ribfit-autologous__point:nth-child(2n){border-right:1px solid var(--line-soft)}
  .ribfit-autologous__point:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media (max-width:767px){
  .ribfit-autologous__point{min-height:0;border-right:1px solid var(--line-soft)}
  .ribfit-autologous__point + .ribfit-autologous__point{border-top:1px solid var(--line-soft)}
  .ribfit-autologous__num{width:48px;height:48px}
}

/* ── Sec_3 STEP 원 4개 ────────────────────────────────────────────
   원문은 네 단계를 원으로 늘어놓는다(01 흰 / 02·03 핑크 / 04 흰).
   J컬 Sec_3 다이어그램과 같은 기하로 옮긴다:
   지름 350/1280 = 27.34375%, 겹침 40/1280 = 3.125%. */
.ribfit-autologous__flow{
  margin-top:var(--sp-block);
  display:flex;justify-content:center;
  position:relative;z-index:0;          /* 흰 테두리(z-index:1)를 안에 가둔다 */
}
.ribfit-autologous__flow-step{
  position:relative;
  flex:0 0 27.34375%;max-width:27.34375%;
  aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding-inline:12px;
  text-align:center;
  font-weight:700;font-size:var(--fs-24);line-height:1.4;
  letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.ribfit-autologous__flow-step + .ribfit-autologous__flow-step{margin-left:-3.125%}
.ribfit-autologous__flow-step--light{background:var(--surface);color:var(--brand)}
.ribfit-autologous__flow-step--brand{background:var(--brand);color:var(--text-inverse)}
/* 2px 흰 테두리가 옆 원 위로 올라와 경계를 만든다 (J컬 Sec_3 과 같다).
   여기는 01 흰 / 02·03 핑크 / 04 흰 이라 핑크끼리 붙는 02|03 경계도 있다 —
   네 원 모두에 두면 경계마다 흰 호가 하나씩 보인다(흰 원 위에서는 보이지 않는다). */
.ribfit-autologous__flow-step::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--surface);
  pointer-events:none;
}
/* 태블릿: 한 줄에 4개면 지름이 글자보다 빨리 줄어 라벨이 원 밖으로 넘친다 → 2×2 */
@media (max-width:1023px){
  .ribfit-autologous__flow{--rfa-flow-d:min(52.5%,380px);flex-wrap:wrap;row-gap:var(--sp-gap)}
  .ribfit-autologous__flow-step{flex-basis:var(--rfa-flow-d);max-width:var(--rfa-flow-d)}
  .ribfit-autologous__flow-step + .ribfit-autologous__flow-step{margin-left:calc(var(--rfa-flow-d) * -0.114)}
  .ribfit-autologous__flow-step:nth-child(3){margin-left:0}
}
/* 모바일: 1열. 겹침을 세로로 돌린다(세로 %마진도 컨테이너 '폭' 기준이라 같은 식이 맞다) */
@media (max-width:767px){
  .ribfit-autologous__flow{--rfa-flow-d:min(72%,280px);flex-direction:column;align-items:center;flex-wrap:nowrap;gap:0}
  .ribfit-autologous__flow-step{flex-basis:auto;width:var(--rfa-flow-d);max-width:var(--rfa-flow-d)}
  .ribfit-autologous__flow-step + .ribfit-autologous__flow-step{margin-left:0;margin-top:calc(var(--rfa-flow-d) * -0.114)}
}

/* ── Sec_4 차별점 원 4개 (라벨 + 본문 한 쌍) ───────────────────────
   원문은 한 원 안에 작은 라벨과 굵은 문장을 위아래로 둔다.
   원 기하·채움/테두리 교차는 J컬 Sec_4 와 같다. */
.ribfit-autologous__circles{
  margin-top:var(--sp-block);
  display:flex;justify-content:center;
  position:relative;z-index:0;
}
.ribfit-autologous__circle{
  position:relative;
  flex:0 0 27.34375%;max-width:27.34375%;
  aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-inline:calc(3.125% + 8px);   /* 겹침(3.125%)과 같은 컨테이너 폭 기준 백분율 — 글자가 옆 원 선 8px 안으로 못 들어온다 */
  text-align:center;
}
.ribfit-autologous__circle + .ribfit-autologous__circle{margin-left:-3.125%}
.ribfit-autologous__circle--fill{z-index:0;background:var(--surface-muted)}
.ribfit-autologous__circle--line{z-index:1;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-mid)}

.ribfit-autologous__circle-label{
  font-size:var(--fs-18);line-height:1.5;
  color:var(--text-secondary);word-break:keep-all;
}
.ribfit-autologous__circle-title{
  margin-top:6px;
  font-weight:700;font-size:var(--fs-24);line-height:1.4;
  letter-spacing:var(--ls-tight);word-break:keep-all;
}
.ribfit-autologous__circle--fill .ribfit-autologous__circle-title{color:var(--brand)}
.ribfit-autologous__circle--line .ribfit-autologous__circle-title{color:var(--text-primary)}

/* 한 줄 4개는 1100 아래에서 글자가 원을 넘는다 → 2×2, 768 아래는 1열 */
@media (max-width:1099px){
  .ribfit-autologous__circles{flex-wrap:wrap;row-gap:var(--sp-gap)}
  .ribfit-autologous__circle{flex-basis:52.5%;max-width:52.5%;padding-inline:calc(5% + 8px)}   /* 겹침 5% + 8 */
  .ribfit-autologous__circle + .ribfit-autologous__circle{margin-left:-5%}
  .ribfit-autologous__circle:nth-child(3){margin-left:0}
}
@media (max-width:767px){
  .ribfit-autologous__circles{flex-direction:column;align-items:center;row-gap:0}
  .ribfit-autologous__circle{flex-basis:auto;width:100%;max-width:300px;padding-inline:14px}   /* 겹침이 세로라 좌우는 원래 여백 */
  .ribfit-autologous__circle + .ribfit-autologous__circle{margin-left:0;margin-top:-30px}
  .ribfit-autologous__circle:nth-child(3){margin-left:0}
}

/* ── Sec_5 STEP 탭 (어두운 배경) ───────────────────────────────────
   .tabs/.tab 프리미티브는 밝은 배경 기준이라 어두운 위에서 쓸 색만 바꾼다. */
.ribfit-autologous__tabs{
  margin-top:var(--sp-stack);
  flex-wrap:wrap;justify-content:center;gap:12px;
  overflow:visible;                 /* 줄바꿈으로 넘긴다 — 가로 스크롤 대신 */
}
.ribfit-autologous__tab{
  flex:0 0 auto;
  min-height:47px;padding-inline:25px;
  font-weight:600;
  color:var(--line-mid);
  box-shadow:inset 0 0 0 1px var(--line-outline);
}
.ribfit-autologous__tab:hover{color:var(--text-inverse);box-shadow:inset 0 0 0 1px var(--text-inverse)}
.ribfit-autologous__tab[aria-selected="true"]{
  background:var(--brand);color:var(--text-inverse);box-shadow:none;
}

.ribfit-autologous__panels{margin-top:var(--sp-block)}

/* 탭을 바꿔도 아래가 흔들리지 않게 카드 높이의 하한을 둔다(J컬 Sec_5 와 같다) */
.ribfit-autologous__panel{
  padding:var(--sp-block);
  min-height:300px;
  color:var(--text-primary);
}
.ribfit-autologous__step{
  font-weight:700;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:var(--ls-tight);color:var(--brand);
}
.ribfit-autologous__step-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;
}
.ribfit-autologous__step-text{
  margin-top:25px;
  font-size:var(--fs-18);line-height:1.6;
  color:var(--text-secondary);word-break:keep-all;
}
@media (max-width:767px){
  .ribfit-autologous__panel{padding:var(--sp-stack) var(--sp-gap);min-height:0}
}

/* ── Sec_6 유튜브 — 큰 플레이어 + 목록 4 ──────────────────────────── */
.ribfit-autologous-sec_6{padding-block:calc(var(--sp-section) + 20px)}   /* 메인 Sec_6 과 같은 상·하 여백 140 */
/* 제목 줄: 유튜브 아이콘 + H2 (메인 Sec_6 과 같다 — 66px 행, 아이콘 간격 10) */
.ribfit-autologous__tv-title{
  margin-top:0;
  display:flex;align-items:center;justify-content:center;
  gap:10px;min-height:66px;
}
.ribfit-autologous__tv-icon{flex:none;width:58px;height:40px}

/* 리드 박스 32px — 행간 27px 를 그 안에서 가운데 정렬 (메인 Sec_6 과 같다) */
.ribfit-autologous__tv-lead{
  width:100%;min-height:32px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}

.ribfit-autologous__tv{
  display:grid;
  grid-template-columns:685fr 565fr;   /* J컬 Sec_6 과 같은 비율 (685+30+565=1280) */
  gap:var(--sp-gap);
  align-items:start;
}
.ribfit-autologous__feature{margin:0}
.ribfit-autologous__stage{
  aspect-ratio:16/9;
  border-radius:var(--radius-card);
  background:var(--surface-dark);
}
.ribfit-autologous__stage img{width:100%;height:100%;object-fit:cover}
.ribfit-autologous__stage iframe{border:0}   /* 클릭 시 site.js 가 끼워 넣는다 */

.ribfit-autologous__vlist{border-top:1px solid var(--text-primary)}
.ribfit-autologous__vlink{
  display:flex;align-items:center;gap:20px;
  padding-block:12px;
  box-shadow:inset 0 -1px 0 var(--icon-muted);
}
.ribfit-autologous__thumb{
  flex:none;width:150px;height:84px;
  object-fit:cover;border-radius:var(--radius-sm);
}
.ribfit-autologous__vtitle{
  font-weight:500;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:normal;          /* 메인 Sec_6 목록 제목과 같은 크기·자간 */
  color:var(--text-primary);word-break:break-word;
}
.ribfit-autologous__vlink:hover .ribfit-autologous__vtitle{color:var(--brand)}

/* 1200 이상: 목록 4행이 영상 박스(16:9) 높이를 나눠 가져 위·아래 선이 박스와 맞는다.
   height:0 + min-height 로 목록은 행 높이를 키우지 않고 박스 높이만 따른다. */
@media (min-width:1200px){
  .ribfit-autologous__vlist{height:0;min-height:100%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}   /* 내용(썸네일 원본 크기)이 행을 키우지 못하게 */
  .ribfit-autologous__vlink{height:100%;padding-block:0}
  .ribfit-autologous__thumb{width:auto;height:calc(100% - 12px);aspect-ratio:16/9}   /* 행 − 위아래 6 — 1440 에서 시안 84 */
  .ribfit-autologous__vtitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}
/* 1200 미만: 한 줄에 두면 행이 썸네일(84)보다 낮아진다 — 영상 위 · 목록 아래로 쌓는다 */
@media (max-width:1199px){
  .ribfit-autologous__tv{grid-template-columns:1fr}
}

@media (max-width:767px){
  .ribfit-autologous__tv-title{gap:8px;min-height:0}
  .ribfit-autologous__tv-icon{width:40px;height:28px}
  .ribfit-autologous__vlink{gap:var(--sp-tight)}
  .ribfit-autologous__thumb{width:120px;height:67px}
}

/* ── Sec_7 FAQ ────────────────────────────────────────────────────
   J컬 Sec_7 과 같은 아코디언. 버튼·셰브런·패널은 공용 프리미티브
   (.accordion/.accordion__btn/__chev/__panel)를 그대로 쓰고 여기서는
   가운데 정렬 섹션 안에서 왼쪽 정렬로 돌리는 것만 한다. */
.ribfit-autologous__faq{margin-top:var(--sp-block);text-align:left}
.ribfit-autologous__faq-label{font-weight:600;word-break:keep-all}

/* ── 칼럼 — J컬 Sec_8 과 같은 디자인: 좌 COLUMNS·제목·리드 / 우 버튼, 1:1 카드 3개 ── */
.ribfit-autologous-sec_8{padding-block:calc(var(--sp-section) + 20px)}   /* J컬 Sec_8 상하 140 */
.ribfit-autologous__col-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-stack)}
.ribfit-autologous__col-intro{max-width:886px}   /* 시안 텍스트 블록 폭 — 리드가 2줄로 끊긴다 */
.ribfit-autologous__col-more{flex:none;min-width:260px}   /* 시안 CTA 260×56 */
.ribfit-autologous__cols{margin-top:var(--sp-block)}   /* 시안 타이틀 아래 60 */
.ribfit-autologous__col{display:flex;flex-direction:column;height:100%}
.ribfit-autologous__col-body{flex:1 1 auto;display:flex;flex-direction:column;padding:var(--sp-gap)}
.ribfit-autologous__col-tags{gap:10px}
.ribfit-autologous__col-tag{height:40px;padding-inline:17px;border-radius:var(--radius-pill);font-size:var(--fs-16);line-height:1}
/* 칩 아래 10 / 제목 박스 아래 34 — 기록자 줄은 카드 바닥에 붙는다 */
.ribfit-autologous__col-title{margin-top:10px;margin-bottom:34px}
.ribfit-autologous__col-meta{margin-top:auto;line-height:1.4}
@media (max-width:767px){
  .ribfit-autologous__col-head{flex-direction:column;align-items:stretch;gap:var(--sp-gap)}
  .ribfit-autologous__col-more{align-self:flex-start}
}

/* ── Sec_9 관련 시술 ─────────────────────────────────────────────── */
.ribfit-autologous__rels{margin-top:var(--sp-block);gap:var(--sp-stack)}
.ribfit-autologous__rel{height:100%;padding:48px 40px}
.ribfit-autologous__rel-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;
}
.ribfit-autologous__rel-name{
  margin-top:20px;
  font-weight:600;font-size:var(--fs-32);line-height:1.2;
  letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.ribfit-autologous__rel-desc{
  margin-top:20px;
  font-size:var(--fs-18);line-height:1.5;
  color:var(--text-secondary);word-break:keep-all;
}
.ribfit-autologous__rel-more{margin-top:20px;color:var(--text-tertiary)}
@media (max-width:767px){
  .ribfit-autologous__rel{padding:28px 24px}
}

/* ── Sec_10 상담 CTA 안의 의료광고 고지 ──────────────────────────
   .disclaimer 의 회색(--text-tertiary)은 핑크 밴드 위에서 읽히지 않는다.
   흰색 알파는 토큰에 없어 여기서만 쓴다. */
.ribfit-autologous__note-cta{color:rgba(255,255,255,.85)}