/* ── /ribfit — RIBFIT™ 허브 ────────────────────────────────────
   히어로·번호카드·허브카드·CTA 밴드는 subpage.css 프리미티브 그대로 쓴다.
   이 파일에는 이 페이지에만 있는 세 가지만 둔다.
     1) 실리콘 ↔ RIBFIT 3열 비교표 (프리미티브 .infotable 은 2열 전용)
     2) 허브카드 안 한 줄 소개문 (kicker · 제목 · 소개문 · 본문 4단 구성)
     3) 핑크 CTA 밴드 위 의료광고 고지문 (.disclaimer 는 회색이라 대비가 안 난다)
   ─────────────────────────────────────────────────────────── */

.page-ribfit__compare{
  /* 셀 좌우 여백 — 토큰에 없는 값. 좁은 폭에서만 줄인다. */
  --rf-cell-x:24px;
}

/* ── 비교표 ──────────────────────────────────────────────────
   table-layout:fixed 로 열 폭을 고정해 어떤 폭에서도 표가 넘치지 않게 한다.
   오른쪽(RIBFIT) 열만 브랜드 틴트로 띄운다. */
.page-ribfit__cmp{
  width:100%;
  table-layout:fixed;
  border-top:1px solid var(--line-strong);
}
.page-ribfit__cmp th,
.page-ribfit__cmp td{
  padding:20px var(--rf-cell-x);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-16);
  line-height:1.7;
  letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.page-ribfit__cmp thead th{
  font-weight:700;
  font-size:var(--fs-18);
  line-height:1.4;
  color:var(--text-primary);
}
.page-ribfit__cmp thead th:last-child{color:var(--brand)}

/* 항목 이름 열 — 시안 .infotable 의 220 을 3열에 맞게 200 으로 */
.page-ribfit__cmp thead th:first-child,
.page-ribfit__cmp tbody th{width:200px}
.page-ribfit__cmp tbody th{
  font-weight:700;
  color:var(--text-primary);
}
.page-ribfit__cmp td{color:var(--text-secondary)}
.page-ribfit__cmp td:last-child{
  background:var(--brand-tint-2);
  color:var(--text-primary);
}

/* 모바일에서만 쓰는 셀 라벨. 데스크톱에서는 열 머리가 대신한다. */
.page-ribfit__cmp-label{display:none}

@media (max-width:1023px){
  .page-ribfit__compare{--rf-cell-x:14px}
  .page-ribfit__cmp thead th:first-child,
  .page-ribfit__cmp tbody th{width:150px}
}

/* 모바일: 행 하나를 카드 하나로 세운다 */
@media (max-width:767px){
  .page-ribfit__cmp,
  .page-ribfit__cmp tbody,
  .page-ribfit__cmp tr,
  .page-ribfit__cmp th,
  .page-ribfit__cmp td{display:block;width:auto}
  .page-ribfit__cmp{border-top:0}
  .page-ribfit__cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .page-ribfit__cmp tr{
    padding:20px;
    background:var(--surface);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
  }
  .page-ribfit__cmp tr + tr{margin-top:var(--sp-gap)}
  .page-ribfit__cmp tbody th{
    width:auto;
    padding:0 0 14px;
    border-bottom:1px solid var(--line-soft);
  }
  .page-ribfit__cmp td{padding:14px 0 0;border-bottom:0;background:none}
  .page-ribfit__cmp td:last-child{background:none}
  .page-ribfit__cmp-label{
    display:block;
    margin-bottom:4px;
    font-weight:700;
    color:var(--text-tertiary);
  }
  .page-ribfit__cmp td:last-child .page-ribfit__cmp-label{color:var(--brand)}
}

/* ── 허브카드 안 한 줄 소개문 ─────────────────────────────────
   .hubcard__title(24/700) 과 .hubcard__text(16/400) 사이에 들어가는 줄.
   J컬 Sec_9 카드의 desc(18/400) 와 같은 급으로 둔다. */
.page-ribfit__card-lede{
  margin-top:14px;
  font-weight:700;
  font-size:var(--fs-18);
  line-height:1.5;
  letter-spacing:var(--ls-tight);
  color:var(--text-secondary);
  word-break:keep-all;
}

/* ── CTA 밴드 위 고지문 ───────────────────────────────────────
   .disclaimer 는 --text-tertiary 라 핑크 위에서 읽히지 않는다.
   같은 크기·행간으로 두고 색만 흰색 80% 로 바꾼다. */
.page-ribfit__note{
  max-width:900px;
  margin:var(--sp-stack) auto 0;
  font-weight:400;
  font-size:var(--fs-14);
  line-height:1.6;
  letter-spacing:var(--ls-tight);
  color:rgba(255,255,255,.8);
  text-align:center;
  word-break:keep-all;
}