/* =========================================================================
   assets/page/131.css — 여유증(여성형 유방증) 전용
   모든 셀렉터는 .fs-p-131 스코프. 색은 --fs-* 토큰만 쓴다(새 hex 0).

   전용 컴포넌트
     .fs-gyn-claim  선언문 + 세로 이미지 2단 (10-06 병원 수정본)
     .fs-gyn-test   Self Test 체크 카드 (번호 · 체크박스 · 문장)
     .fs-gyn-grade  단계별 진단가이드 보험 구간 스케일  ★ 시그니처
     .fs-gyn-care   사진 + (CHECK 필 · 제목 · 3줄 설명) 룰 카드
     .fs-gyn-ba     전후 2뷰(정면·측면) 페어 그리드
   ========================================================================= */

/* ---------- A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ----------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 히어로 상단이 전 폭에 걸쳐
   밝은 쿨 오프화이트라 흰 글자가 아니라 «잉크 글자» 를 쓴다.
   에셋 실측: 모델 최상단이 사진 높이의 33.8% — 헤더 띠가 사진에서 차지하는 최대 구간
   (1280 폭에서 145px = 13.5%)에 한참 못 미친다. 53·143·58 과 같은 형식.
   이 페이지는 «사진 좌 / 카피 우» 축이다 — 1mm 원본과 같은 쪽이고, 뒤집힌 81 계열을
   기준으로 되돌리지 마라. */
.fs-p-131 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-131 .fs-page--overlay { background: #E2E2E3; }
/* ★ 화면을 위한 줄이 아니라 «검사기가 진실을 읽게 하는» 줄이다. 픽셀은 0 바뀐다
   (이 줄을 뺀 사본으로 따로 구워 #type 내부를 재면 두 판 다 (254.5,254.5,254.5) 다).
   fs.css:1518 의 .fs-nose-dz 는 `background: linear-gradient(#FFF, #FDFCFB)` 라
   «background-image 로» 흰색을 칠하고 backgroundColor 는 transparent 로 남는다.
   qa.py 의 bgOf 는 backgroundColor 만 보며 조상을 타므로 이 섹션을 건너뛰고
   .fs-page--overlay 색(228,237,240)을 배경으로 집어와, 그 위 킥커
   (--fs-teal-text #00787F)를 4.43:1 로 «유령 AA 미달» 판정한다.
   main 에 실제로 칠해지는 색(흰색)을 명시해 사슬을 그 전에서 끊는다.
   킥커 색을 내려 통과시키지 마라 — 화면에 없는 문제를 고치는 것이 된다. */
.fs-p-131 .fs-page--overlay > main { background: var(--fs-white); }
.fs-p-131 .fs-header--overlay { color: var(--fs-ink); }
/* 2026-09-11 승인자 지시 「56 처럼 메뉴바 그라디에이션」 — fs.css:468 기본 ::before(검정 스크림)를
   content:none 으로 껐던 것을 되살리고 배경만 밝은 안개로 바꾼다. 56 은 크림(246,241,236)인데
   이 계열 19장은 히어로 틴트가 제각각(세이지·라벤더·블루그레이…)이라 크림을 얹으면 색이 물든다 —
   흰색 알파는 어느 틴트 위에서도 «빛 번짐» 으로 읽힌다(47·64·67·48 비교 렌더로 확인).
   위치·높이(헤더 1.6배)·pointer-events 는 fs.css 기본값 그대로다. */
.fs-p-131 .fs-header--overlay::before { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,0) 100%); }
/* aria-current 를 빼지 않으면 fs.css:495 의 700 을 같은 특정성으로 덮어 죽인다 */
.fs-p-131 .fs-gnb__link:not([aria-current="page"]) { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-131 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-131 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
/* --fs-muted-2(#7D7D7D)는 밝은 배경 위에서 3.6:1 이라 AA 미달이다 */
.fs-p-131 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-131 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-131 .fs-util__sep { opacity: .35; }
/* fs.css:3141 의 «호버 시 흰 글자» 도 다크 히어로 전제다 — 밝은 헤더에선 사라진다 */
.fs-p-131 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }

.fs-p-131 .fs-gyn-hero { background: #E2E2E3; color: var(--fs-ink); align-items: center; }
/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-131 .fs-gyn-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. 히어로 박스는 사진 높이의 70% 만 보여 준다(1072 중 755).
   0%(위 고정)면 머리 위 여백 363px 가 그대로 남아 헤더 아래가 통째로 빈 화면이 된다.
   61% 로 내리면 1920 에서 머리끝이 y≈174 — 형제 페이지 81(≈176)·58(≈175)과 맞고
   아래로는 배꼽까지 들어와 이 페이지의 주제인 가슴이 크게 보인다. */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=364 라 61% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-131 .fs-gyn-hero .fs-hero__bg img { object-position: 50% 72%; }
/* 카피 열은 «인물이 끝나는 지점»(에셋 x 42%)에서 시작한다 */
.fs-p-131 .fs-gyn-hero__copy {
  max-width: min(100%, 46vw); margin-inline-start: auto;
  gap: var(--fs-sp-4); justify-items: end; text-align: end;
}
.fs-p-131 .fs-gyn-hero .fs-hero__kicker {
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em; font-weight: 600; color: var(--fs-teal-dk);
}
.fs-p-131 .fs-gyn-hero .fs-hero__title {
  color: var(--fs-ink);
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22;
}
.fs-p-131 .fs-gyn-hero__lead { color: var(--fs-ink-soft); font-weight: 500; }

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은 페이드로
   녹여 이음매를 없앤다. 밴드색은 세로 에셋 상단 실측값(#E4E5E5). */
@media (max-width: 1023px) {
  .fs-p-131 .fs-gyn-hero { min-height: 0; background: #E4E5E5; align-items: start; }
  .fs-p-131 .fs-gyn-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-131 .fs-gyn-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px);
            mask-image: linear-gradient(180deg, transparent 0, #000 48px);
  }
  .fs-p-131 .fs-gyn-hero .fs-hero__inner {
    grid-row: 1; background: #E4E5E5;
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-9)) var(--fs-sp-11);
  }
  .fs-p-131 .fs-gyn-hero__copy { max-width: 100%; margin-inline-start: 0; justify-items: start; text-align: start; }
}

/* ---------- A05 유선조직 선언 — 글 좌 / 세로 이미지 우 ----------
   2026-10-06 병원 수정본(pptx 3) + 승인자 「한 장으로, 가로 말고 세로로, 레이아웃도 맞게」 —
   와이드 셔츠컷 + 유선조직 근접컷 2단 스트립을 걷고 워커 생성 3:4 세로컷 1장과 선언문을 2단으로 세웠다.
   <1024 는 글 → 사진 순으로 쌓고 가운데 정렬(기존 화면과 같은 글 정렬). */
.fs-p-131 .fs-gyn-claim__head { display: grid; justify-items: center; gap: var(--fs-sp-4); text-align: center; }
.fs-p-131 .fs-gyn-claim__quote { line-height: 1.45; }
/* 두 문장을 블록으로(<br> 대신) — 2단이 된 뒤 글 칸이 좁은 1024~1440 에서 「유선조직은」 한 단어만 줄로 떨어지던 것을 문장마다 고르게 나눈다 */
.fs-p-131 .fs-gyn-claim__s { display: block; text-wrap: balance; }
.fs-p-131 .fs-gyn-claim__split { --fs-split: minmax(0, 1fr) minmax(0, 480px); }
.fs-p-131 .fs-gyn-claim__media { display: grid; justify-items: center; }
.fs-p-131 .fs-gyn-claim__photo { display: grid; width: 100%; max-width: 440px; }
.fs-p-131 .fs-gyn-claim__frame { display: block; overflow: hidden; aspect-ratio: 3 / 4; }
.fs-p-131 .fs-gyn-claim__frame img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
  .fs-p-131 .fs-gyn-claim__head { justify-items: start; text-align: start; }
  .fs-p-131 .fs-gyn-claim__photo { max-width: none; }
}

/* ---------- A23 Self Test ---------- */
.fs-p-131 .fs-gyn-test__head { justify-items: center; margin-block-end: var(--fs-gap-title); }
.fs-p-131 .fs-gyn-test__list { align-items: stretch; }
.fs-p-131 .fs-gyn-test__item { align-content: center; background: var(--fs-white); }
.fs-p-131 .fs-gyn-test__txt { font-size: var(--fs-t-lead); line-height: 1.5; }
.fs-p-131 .fs-gyn-test__txt strong { font-weight: 700; color: var(--fs-teal-dk); }

@media (min-width: 600px) {
  .fs-p-131 .fs-gyn-test__item {
    align-items: center;
    border-block-start: 0;
    border-inline-start: 2px solid var(--fs-teal);
  }
}

/* 2026-10-06 병원 수정본(pptx 4) 「아이콘 삭제, 문항 체크할 수 있도록」 — 도해 아이콘 칸에 fs.css .fs-check 체크박스.
   카드 전체가 <label> 이라 글이나 번호를 눌러도 체크된다(카드 padding 을 label 로 옮긴 이유).
   체크 칸 테두리는 fs.css 기본(--fs-line-control · 흰 위 2.1:1)이 WCAG 1.4.11 3:1 미달이라 --fs-teal(3.98:1)·2px 로.
   체크된 카드는 크림 + 안쪽 2px 윤곽(아래 «테스트답게» 절). */
.fs-p-131 .fs-gyn-test__item { grid-template-columns: minmax(0, 1fr); padding: 0; }   /* transition 금지 — data-fs-reveal 의 전환을 덮는다(page-css-transition-clobbers-reveal) */
.fs-p-131 .fs-gyn-test__item:has(input:checked) { background: var(--fs-cream); }
.fs-p-131 .fs-gyn-test__label {
  position: relative;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
  column-gap: var(--fs-sp-4);
  block-size: 100%;
  padding: var(--fs-sp-5);
}
.fs-p-131 .fs-gyn-test__label .fs-check__mark {
  width: clamp(24px, 22.85px + 0.32vw, 29px); height: clamp(24px, 22.85px + 0.32vw, 29px);
  border: 2px solid var(--fs-teal);
}
.fs-p-131 .fs-gyn-test__label .fs-check__mark::after { width: 12px; height: 7px; margin-block-start: -3px; }
.fs-p-131 .fs-gyn-test__result {
  justify-self: center;
  margin-block-start: var(--fs-sp-4);
  padding: var(--fs-sp-3) var(--fs-sp-5);
  font-size: var(--fs-t-lead); font-weight: 700; line-height: 1.5; text-align: center; text-wrap: balance;
  color: var(--fs-teal-dk);
  transition: background-color var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease);
}

/* --- 2026-10-06 승인자 「Self Test 를 조금 더 살리고 싶어 — 배경이나 요소를 추가, Self Test 처럼」 ---
   ① 밴드: 흰(A05) → 베이지 → 크림(A06) — LOCK 4 허용 집합의 --fs-beige #F0E2D5, 3연속 없음.
      «검사지» 느낌의 옅은 모눈은 ::before 로 깐다(섹션 배경 자체는 단색이라 L4 판정 그대로). 가장자리로 갈수록 마스크로 사라진다.
   ② 체크한 카드: 크림 + 안쪽 2px 윤곽(--fs-teal-dk). outline 이라 그림자 0 규칙과 무관하고 레이아웃이 안 흔들린다.
   ③ 점수 줄: 6칸 게이지 + 「n / 6」(페이지 스크립트가 data-count 를 단다). 3개 이상(.is-hit)이면 게이지와 안내 문구가 주황(--gyn-hi).
      스크립트가 없으면 0 / 6 에 멈추고 체크는 그대로 된다. 새 문구는 숫자뿐이다. */
.fs-p-131 .fs-gyn-test { position: relative; isolation: isolate; }   /* 배경은 HTML 의 fs-section--beige(킥커 AA 색도 fs.css 가 같이 바꾼다 — 페이지 CSS 로 칠하면 4.16:1) */
.fs-p-131 .fs-gyn-test::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(151, 121, 110, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 121, 110, .09) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000 35%, transparent 100%);
}
.fs-p-131 .fs-gyn-test .fs-container { display: grid; }
.fs-p-131 .fs-gyn-test__item:has(input:checked) { outline: 2px solid var(--fs-teal-dk); outline-offset: -2px; }
.fs-p-131 .fs-gyn-test__score {
  display: flex; align-items: center; justify-content: center; gap: var(--fs-sp-4);
  margin-block-start: var(--fs-sp-9);
}
.fs-p-131 .fs-gyn-test__meter { display: flex; gap: 4px; }
.fs-p-131 .fs-gyn-test__meter i {
  display: block; width: clamp(26px, 22.5px + 0.96vw, 41px); height: 10px;
  background: rgba(151, 121, 110, .28);
  transition: background-color var(--fs-dur) var(--fs-ease);
}
.fs-p-131 .fs-gyn-test[data-count="1"] .fs-gyn-test__meter i:nth-child(-n+1),
.fs-p-131 .fs-gyn-test[data-count="2"] .fs-gyn-test__meter i:nth-child(-n+2),
.fs-p-131 .fs-gyn-test[data-count="3"] .fs-gyn-test__meter i:nth-child(-n+3),
.fs-p-131 .fs-gyn-test[data-count="4"] .fs-gyn-test__meter i:nth-child(-n+4),
.fs-p-131 .fs-gyn-test[data-count="5"] .fs-gyn-test__meter i:nth-child(-n+5),
.fs-p-131 .fs-gyn-test[data-count="6"] .fs-gyn-test__meter i { background: var(--fs-teal-dk); }
.fs-p-131 .fs-gyn-test.is-hit[data-count="3"] .fs-gyn-test__meter i:nth-child(-n+3),
.fs-p-131 .fs-gyn-test.is-hit[data-count="4"] .fs-gyn-test__meter i:nth-child(-n+4),
.fs-p-131 .fs-gyn-test.is-hit[data-count="5"] .fs-gyn-test__meter i:nth-child(-n+5),
.fs-p-131 .fs-gyn-test.is-hit[data-count="6"] .fs-gyn-test__meter i { background: var(--gyn-hi); }
.fs-p-131 .fs-gyn-test__count {
  font-size: var(--fs-t-lead); font-weight: 700; line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--fs-ink-soft);
}
.fs-p-131 .fs-gyn-test__n { color: var(--fs-teal-dk); }
.fs-p-131 .fs-gyn-test.is-hit .fs-gyn-test__n { color: var(--gyn-hi); }
.fs-p-131 .fs-gyn-test.is-hit .fs-gyn-test__result { background: var(--gyn-hi); color: var(--fs-white); }
@media (min-width: 1024px) {
  .fs-p-131 .fs-gyn-test__label { column-gap: var(--fs-gap-col); }
}
@media (min-width: 1024px) {
  .fs-p-131 .fs-gyn-test__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 2026-10-06 승인자 — 2단에서 번호를 세로로 읽게: 왼쪽 열 01·02·03 → 오른쪽 열 04·05·06(원본 imweb 은 줄 단위 01 02 / 03 04).
     DOM 순서는 01→06 그대로라 1열(모바일)·화면낭독·리빌 stagger 순서는 안 바뀐다. */
  .fs-p-131 .fs-gyn-test__list { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
}

/* ---------- A06 사이먼그레이드 · 보험 구간 스케일 ★ 시그니처 ---------- */
.fs-p-131 .fs-gyn-grade__head { justify-items: center; }
.fs-p-131 .fs-gyn-grade__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--fs-gap-card);
  row-gap: var(--fs-sp-3);
  margin-block-start: clamp(30px, 25.4px + 1.28vw, 50px);
}
.fs-p-131 .fs-gyn-grade__range {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(38px, 35.2px + 0.77vw, 50px);
  padding-inline: var(--fs-sp-3);
  font-size: var(--fs-t-pill); font-weight: 700; text-align: center;
  color: var(--fs-on-dark);
}
.fs-p-131 .fs-gyn-grade__range--out { background: var(--fs-fill-gray); grid-row: 1; }
.fs-p-131 .fs-gyn-grade__range--in  { background: var(--fs-teal-text); grid-row: 3; }
.fs-p-131 .fs-gyn-grade__card:nth-of-type(1) { grid-row: 2; }
.fs-p-131 .fs-gyn-grade__card:nth-of-type(2) { grid-row: 4; }
.fs-p-131 .fs-gyn-grade__card:nth-of-type(3) { grid-row: 5; }
.fs-p-131 .fs-gyn-grade__card:nth-of-type(4) { grid-row: 6; }

/* 카드는 틸트 호스트(프레임), 안의 figure 가 «통째로 기울어지는 면» 이다.
   figure 에 data-fs-tilt-inner 가 없으면 fs.js 가 firstElementChild(=도해 img)를
   집어서 그림만 기울고 라벨바·설명이 평평하게 남는다. index.html 의 구조가 전제다. */
.fs-p-131 .fs-gyn-grade__card { display: grid; background: var(--fs-white); }
.fs-p-131 .fs-gyn-grade__fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  block-size: 100%;
}
.fs-p-131 .fs-gyn-grade__ill {
  align-self: end; justify-self: center;
  width: clamp(160px, 121.5px + 10.7vw, 320px); max-width: 100%; height: auto;
  margin-block: var(--fs-sp-3) var(--fs-sp-4);
}

/* [LOCK 2 · 폭] 1024 미만에서 보드가 1열로 접히면 카드가 밴드 폭까지 늘어나는데
   도해는 clamp 에 묶여 있어 «218px 그림 아래 846px 라벨바»(3.9배)가 깔린다.
   실측 바÷도해 — 1920 1.08 / 1024 1.00 / 900 3.89 / 768 3.52 / 600 2.98 / 360 2.00.
   57 정본(.fs-nose-dz__fig)의 1.38~3.11 을 900·768 이 넘는다. 카드를 통째로 묶고
   도해를 카드 폭까지 키워 PC 와 같은 1.08 로 되돌린다(도해 원본 440px, 확대 없음). */
@media (max-width: 1023px) {
  .fs-p-131 .fs-gyn-grade__board { max-width: 440px; margin-inline: auto; }
  .fs-p-131 .fs-gyn-grade__ill { width: 100%; max-width: 408px; }
}
.fs-p-131 .fs-gyn-grade__meta { display: grid; }
.fs-p-131 .fs-gyn-grade__cap {
  display: block;
  padding: var(--fs-sp-4) var(--fs-sp-3) var(--fs-sp-5);
  font-size: var(--fs-t-body); line-height: 1.5; text-align: center;
}

@media (min-width: 1024px) {
  .fs-p-131 .fs-gyn-grade__board { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--fs-sp-5); }
  .fs-p-131 .fs-gyn-grade__range--out { grid-row: 1; grid-column: 1 / 2; }
  .fs-p-131 .fs-gyn-grade__range--in  { grid-row: 1; grid-column: 2 / 5; }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(1) { grid-row: 2; grid-column: 1 / 2; }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(2) { grid-row: 2; grid-column: 2 / 3; }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(3) { grid-row: 2; grid-column: 3 / 4; }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(4) { grid-row: 2; grid-column: 4 / 5; }
}

/* ---------- A11 타입 3분할 — 도해 · 라벨바(타입명) · 비율 줄 ----------
   2026-10-06 병원 수정본(pptx 6) 「유선조직+지방 … 잘보이도록 상자에서 빼주시고 전체적으로 폰트크기 키워주세요」 —
   비율(13px)을 라벨바 밖 별도 줄로 빼고, 타입명 17 → 21 · 비율 13 → 21 (둘 다 --fs-t-lead).
   도해는 워커 재생성본(글자 없음) — 「지방」「유선조직」 표지는 HTML(.fs-gyn-type__tag, 좌표는 도해마다 실측 %). */
.fs-p-131 .fs-gyn-type__frame {
  position: relative; display: block;
  align-self: end; justify-self: center;
  width: 100%;
  max-width: clamp(150px, 88.5px + 17.1vw, 306px);
  margin-block-end: clamp(12px, 8.5px + 0.96vw, 27px);
}
.fs-p-131 .fs-gyn-type__frame .fs-nose-dz__ill { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.fs-p-131 .fs-gyn-type__meta { display: grid; }
.fs-p-131 .fs-gyn-type__bar { font-size: var(--fs-t-lead); font-weight: 700; }
.fs-p-131 .fs-gyn-type__ratio {
  display: block; padding-block: var(--fs-sp-4) var(--fs-sp-2);
  font-size: var(--fs-t-lead); font-weight: 700; line-height: 1.3; text-align: center;
  color: var(--fs-teal-dk);
}
/* 표지 — 점 + 가는 선 + 글자. 점이 가리키는 조직 위치가 (--x, --y)(도해의 %, 프레임 = 도해 크기),
   글자는 프레임 오른쪽 끝에 붙고 선이 그 사이를 채운다 — 도해가 줄어도 글자가 밖으로 안 나간다. */
.fs-p-131 .fs-gyn-type__tag {
  position: absolute; left: var(--x); right: 0; top: var(--y);
  display: flex; align-items: center; gap: 4px;
  transform: translate(-3.5px, -50%);
  font-size: clamp(12px, 10.85px + 0.32vw, 17px); font-weight: 700; line-height: 1; white-space: nowrap;
  color: var(--fs-ink);
}
.fs-p-131 .fs-gyn-type__tag::before {
  content: ""; flex: 1 1 auto; min-width: 12px; height: 7px;
  background:
    radial-gradient(circle at 3.5px 50%, var(--fs-ink) 3px, transparent 3.5px),
    linear-gradient(var(--fs-ink), var(--fs-ink)) 0 50% / 100% 1px no-repeat;
}
@media (max-width: 599px) {
  .fs-p-131 .fs-nose-dz__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- A07 수술이 망설여 진다면 — 사진 룰 카드 ---------- */
.fs-p-131 .fs-gyn-care__list { margin-block-start: var(--fs-gap-title); }
.fs-p-131 .fs-gyn-care__item { align-items: center; background: var(--fs-white); }
.fs-p-131 .fs-gyn-care__fig { display: grid; width: 100%; }
.fs-p-131 .fs-gyn-care__fig img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.fs-p-131 .fs-gyn-care__body {
  display: grid; justify-items: start; align-content: center; gap: var(--fs-sp-5);
  padding-block: var(--fs-sp-3);
}
.fs-p-131 .fs-gyn-care__desc { font-size: var(--fs-t-quote); line-height: 1.6; }
.fs-p-131 .fs-gyn-care__desc strong { font-weight: 700; color: var(--fs-teal-dk); }

@media (min-width: 600px) {
  .fs-p-131 .fs-gyn-care__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--fs-gap-col);
    border-block-start: 0;
    border-inline-start: 2px solid var(--fs-teal);
  }
}

/* ---------- A14 전후 2뷰 ---------- */
.fs-p-131 .fs-gyn-ba__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 24.2px + 1.6vw, 54px);
  margin-block-start: clamp(24px, 20.5px + 0.96vw, 39px);
}
.fs-p-131 .fs-gyn-ba__view .fs-ba__pair { gap: 2px; }
.fs-p-131 .fs-gyn-ba__foot { margin-block-start: clamp(30px, 24.2px + 1.6vw, 54px); }

@media (min-width: 1024px) {
  .fs-p-131 .fs-gyn-ba__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   M1. 타이포 리듬 — 섹션 제목 뒤에 그어지는 70px 틸 선 (48 검증분)
   ★ 전제: index.html 의 아래 네 곳에 data-fs-reveal 이 있어야 «그어지는» 모션이
     산다 — #selftest·#grade·#care 의 .fs-nose-head, #ba 의 .fs-nose-ba__head.
     (#claim 은 .fs-gyn-claim__head, #type 은 .fs-nose-dz__text 가 이미 리빌 대상)
     속성을 지우면 선은 남지만 진입 모션만 조용히 죽는다.
   ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 안 된다. fs.js 는 첫 화면 안의
     대상에 .fs-reveal 자체를 안 붙여서(fs.js inFirstView) 첫 제목의 선이
     영원히 안 그어진다. 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 건다.
   ========================================================================== */

.fs-p-131 .fs-nose-head h2,
.fs-p-131 .fs-nose-ba__head h2,
.fs-p-131 .fs-nose-dz__text h2,
.fs-p-131 .fs-gyn-claim__head h2 { position: relative; }

.fs-p-131 .fs-nose-head h2::after,
.fs-p-131 .fs-nose-ba__head h2::after,
.fs-p-131 .fs-nose-dz__text h2::after,
.fs-p-131 .fs-gyn-claim__head h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
/* 가운데정렬 제목(A23·A06·A14·A05)은 선도 가운데에서 자란다 */
.fs-p-131 .fs-center h2::after,
.fs-p-131 .fs-gyn-claim__head h2::after {
  margin-inline: auto;
  transform-origin: center;
}
:root.fs-js .fs-p-131 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-131 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* ==========================================================================
   M2. 호버 — 프레임은 고정, 사진만 scale(1.045)  (그림자는 쓰지 않는다)
   전후사진(.fs-ba)과 도해(.fs-gyn-grade__ill · .fs-nose-dz__ill)는 제외한다 —
   임상 근거 이미지라 가장자리를 잘라 보이면 안 된다.
   ========================================================================== */

.fs-p-131 .fs-gyn-care__fig { overflow: hidden; }
.fs-p-131 .fs-gyn-care__fig img,
.fs-p-131 .fs-gyn-claim__frame img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-131 .fs-gyn-care__item:hover .fs-gyn-care__fig img,
  .fs-p-131 .fs-gyn-claim__photo:hover .fs-gyn-claim__frame img { transform: scale(1.045); }
}

/* ---------- 모션 무효화 (레이아웃은 항상 최종 상태) ---------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-131 .fs-gyn-grade__card,
  .fs-p-131 .fs-gyn-test__item,
  .fs-p-131 .fs-gyn-care__item,
  .fs-p-131 .fs-gyn-ba__view {
    transform: none !important; opacity: 1 !important; transition: none !important;
  }
  .fs-p-131 .fs-nose-head h2::after,
  .fs-p-131 .fs-nose-ba__head h2::after,
  .fs-p-131 .fs-nose-dz__text h2::after,
  .fs-p-131 .fs-gyn-claim__head h2::after {
    transform: scaleX(1) !important; transition: none !important;
  }
  .fs-p-131 .fs-gyn-care__fig img,
  .fs-p-131 .fs-gyn-claim__frame img { transform: none !important; transition: none !important; }
  .fs-p-131 .fs-gyn-test__meter i,
  .fs-p-131 .fs-gyn-test__result { transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 파일럿 (바디성형 = 베이지, fs.css «카테고리 틴트» 블록 + body.fs-cat-body)
   사진: 무채 회색 배경(#E2E2E3)이라 틴트 계열이 아니었다 → 전역 화이트밸런스(상단 띠 → 틴트, 게인 1.03/0.97/0.91)로
   hero-model-beige(-mo).jpg 를 새로 구움(흰 셔츠가 배경과 12 밖에 안 떨어져 마스킹 불가 — photo-backdrop-recolor 판별식).
   공용 블록이 헤더 안개·바탕·히어로 바탕을 정하므로 여기서는 <1024 스택 밴드만 틴트로.
   LOCK 4: 히어로 다음 #claim 이 크림이라 흰으로 — 리듬 베이지(사진) → 흰 → 흰(selftest) → 크림 → 흰 → 크림 → 흰 → 흰.
   ========================================================================== */
@media (max-width: 1023px) {
  .fs-p-131 .fs-gyn-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}
.fs-p-131 .fs-gyn-claim { background: var(--fs-white); }

/* 3차 (2026-09-14) — 131 은 모델이 왼쪽·카피가 오른쪽이라 스크림을 우→좌로. 사진은 hero-model-glow(-mo).jpg:
   베이지 배경에 모델 주변 방사형 글로우(+7.5%)를 구워 «연한 글로우(모델) → 베이지(카피 쪽)» 가 생기게 했다.
   헤더 안개(위→아래)는 fs.css 에서 껐다. */
.fs-p-131 .fs-gyn-hero .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(var(--fs-cat), .88) 0%, rgba(var(--fs-cat), .80) 28%, rgba(var(--fs-cat), .40) 46%, rgba(var(--fs-cat), 0) 60%);
}
@media (max-width: 1023px) { .fs-p-131 .fs-gyn-hero .fs-hero__bg::after { content: none; } }
/* 4차(모델 내리기 · 글로우 반대편) 는 승인자 지시로 5차에서 롤백 — object-position 은 위 원래 값(09-11)으로 돌아간다.
   「모델을 내리는 게 아니라 사진이 상단 메뉴로 연장되는 느낌」 → 안개 처방은 fs.css 카테고리 블록(5차) 참조. */
/* 4차 덤 — 우측 정렬 카피가 1024~1699 에서 고정 퀵메뉴(.fs-quickbar, 우측 12~24px + 68px) 아래로 들어가 「여유증」 의 「증」 이
   가려졌다(1440 · 1200 실측 겹침 49px). 09-11 퀵메뉴 추가 이후의 기존 상태. 1700 이상은 컨테이너 여백이 커서 안 겹친다. */
@media (min-width: 1024px) and (max-width: 1699px) { .fs-p-131 .fs-gyn-hero__copy { margin-inline-end: 96px; } }


/* ==========================================================================
   ▼▼▼ 2026-09-21 · 승인자 「코성형·포유리프팅·윤곽성형·바디성형 히어로 통일」 — 규정 = 81 코재수술 포맷.
   영문 시술명 킥커 → 한글 제목 → 줄 → 리드(기존 한국어 문구). 값은 81.css 1절:
   킥커 21/500/.02em(틸) · 제목 58/700/1.22 · 요소 간격 10px · 줄 아래 8px · 리드 --fs-t-lead/1.5/#111.
   사진·카피 상자 위치·스크림은 그대로 둔다(33 선례 「모델 위치는 그대로 텍스트 부분만」).
   줄 요소의 폭(48~72)·두께·색은 fs.css:3485 정본 규칙이 정한다 — 여기서는 아래 여백만 준다.
   ========================================================================== */
.fs-p-131 .fs-gyn-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-131 .fs-gyn-hero .fs-hero__kicker {
  font-family: inherit; font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em; font-weight: 500; line-height: 1.25; color: var(--fs-teal-dk);
}
.fs-p-131 .fs-gyn-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22; color: var(--fs-ink);
}
.fs-p-131 .fs-gyn-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-131 .fs-gyn-hero .fs-gyn-hero__lead {
  max-width: 34em; font-size: var(--fs-t-lead); font-weight: 400; line-height: 1.5; color: var(--fs-ink);
}


/* ==========================================================================
   ▼▼▼ 2026-10-06 · 병원 수정본 「리뷰티 수정(여유증).pptx」 9장 — 계획서 _design/PLAN-131-1006-pptx.md
   위쪽 절(A05·A23·A11·A07)에서 고친 것 외에 새로 더한 규칙만 여기 모은다.
   ========================================================================== */
/* 문장 블록 — <br> 대신 문장을 블록으로(81.css:24 와 같은 한 줄). 히어로 리드 · B&A 리드 */
.fs-p-131 .fs-lead__s { display: block; text-wrap: balance; }

/* A05 — 1024 이상은 글이 왼쪽 정렬이라 제목 선도 왼쪽에서 자란다 */
@media (min-width: 1024px) {
  .fs-p-131 .fs-gyn-claim__head h2::after { margin-inline: 0; transform-origin: left center; }
}

/* A06 — 「보험 적용 가능 범위」 다른 컬러로 잘보이게(pptx 5): 주황 #C75000(흰 글자 4.59:1, AA) — 승인자 「추천색으로」.
   10-02 42 이벤트에서 AA 로 골랐던 값이다(42 는 그 뒤 승인자 지정 #FC6614 로 바뀌었다 · 흰 글자 2.98:1). 맞추려면 --gyn-hi 한 줄.
   비급여 띠는 --fs-fill-gray(흰 글자 4.47:1 · AA 미달)에서 --fs-pill-gray #6D6D6D(5.2:1)로 한 단계. 수술전 라벨과 같은 회색. */
.fs-p-131 { --gyn-hi: #C75000; }
.fs-p-131 .fs-gyn-grade__range--in  { background: var(--gyn-hi); }
.fs-p-131 .fs-gyn-grade__range--out { background: var(--fs-pill-gray); }

/* A07 — 제목 2줄(히어로에서 옮긴 문구) · CHECK 필 옆 제목(사진 라벨바에서 옮김, pptx 7 화살표) */
.fs-p-131 .fs-gyn-care__line { display: block; }
.fs-p-131 .fs-gyn-care__tag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-sp-3) var(--fs-sp-4); }
.fs-p-131 .fs-gyn-care__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); color: var(--fs-ink); }

/* A14 — 81 Before & After 머리글 형식(리드 위 20px · 주의문 13px) · 라벨 띠 수술전 회색 / 수술직후 주황(pptx 9) */
.fs-p-131 .fs-gyn-ba .fs-nose-ba__head .fs-nose-lead { margin-block-start: var(--fs-sp-5); }
.fs-p-131 .fs-gyn-ba .fs-gyn-ba__before { background: var(--fs-pill-gray); }
.fs-p-131 .fs-gyn-ba .fs-gyn-ba__after  { background: var(--gyn-hi); }
@media (max-width: 1023px) {
  .fs-p-131 .fs-gyn-ba .fs-nose-ba__note { text-wrap: balance; }
}

/* 2026-10-06 히어로 «모델 ↔ 카피» 간격 — 시각 보정(승인자 「수치상 같아도 공백이 다른 페이지보다 넓어 보인다」 → 「모델 말고 텍스트를 이동」).
   1차는 «모델 윤곽 끝 ↔ 카피 글자 끝» 최소 거리로 형제 15장(121·71·81·80·47·143·46·58·61·62·64·36·151·150·140)과 맞췄다(1920 580 / 563).
   그런데 눈은 끝점이 아니라 «덩어리» 로 거리를 느낀다:
   · 제목 「여유증」이 세 글자(170px · 형제 중앙값 302px)라 오른쪽 정렬에서 모델과 가장 먼 쪽에 붙는다 — 제목 ↔ 모델 윤곽 25% 분위 1920 841 / 722(+119)
   · 모델 윤곽 25% 분위(얼굴·머리 덩어리)도 1920 679 / 649(+30) · 얼굴이 카피 반대쪽을 향한다(측정 밖, 같은 방향)
   → 1700 이상만 카피를 모델 쪽으로 min(4vw, 77px). 카피 바깥 여백은 240 → 317(1920)로 형제(240)와 달라지지만 승인자가 고른 쪽이다.
   1699 이하는 위 퀵메뉴 회피(margin-inline-end 96px)로 이미 들어와 있어 보정 전이 균형이다(1440 제목 +19 · 덩어리 −22 / 1280 +10 · −24). */
@media (min-width: 1700px) {
  .fs-p-131 .fs-gyn-hero__copy { margin-inline-end: min(4vw, 77px); }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · A07 「남자다움, 당당함, 자신감」 강조 + 타이포 점검(승인자 「하이라이터·동그라미·밑줄로 강조 · 위계/크기·굵기/행간/자간/정렬 확인」)
   · 제목은 LOCK 7(e) — 밑줄·그라데이션 금지, 강조는 문장 반쪽을 포인트색(.fs-teal-fg)으로만 → 둘째 줄 「포시즌이 찾아드립니다!」.
   · 본문 강조 3종: 결론 줄 형광펜(.fs-gyn-hl, 카드 3장 공통) · 방법 낱말 직선 밑줄(.fs-gyn-mark--ul) · 수치 손글씨 동그라미(.fs-gyn-mark--circle).
     색은 이 페이지의 주황(--gyn-hi) 하나. 카드가 리빌로 들어올 때 그어진다 — 은닉은 .fs-reveal:not(.is-in) 에만(첫 화면·헤드리스는 그어진 채).
   · 위계: 카드 제목 27 / 설명 25(1920) · 20 / 21(360)로 모바일은 설명이 제목보다 컸다(설명이 «제목 없던 카드» 의 quote 크기 그대로)
     → 설명을 --fs-t-lead(1920 21) · <600 --fs-t-body(16)로 내려 제목과 두 단 차이. 행간 1.6 · 자간 −0.01em · 줄 길이(<br> 3줄)는 유지.
   ========================================================================== */
.fs-p-131 { --gyn-hl: rgba(199, 80, 0, .2); }
.fs-p-131 .fs-gyn-care__desc { font-size: var(--fs-t-lead); }
@media (max-width: 599px) {
  .fs-p-131 .fs-gyn-care__desc { font-size: var(--fs-t-body); }
}
/* 형광펜 — 글자 아래 40% 띠. 여러 줄로 접혀도 줄마다 칠한다(box-decoration-break) */
.fs-p-131 .fs-gyn-hl {
  padding-inline: 3px;
  background: linear-gradient(transparent 50%, var(--gyn-hl) 50%, var(--gyn-hl) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .9s var(--fs-ease-out) .35s;
}
/* 손글씨 밑줄·동그라미 — 낱말을 감싼 상자 위에 SVG 를 겹친다(장식이라 aria-hidden) */
.fs-p-131 .fs-gyn-mark { position: relative; }
/* 밑줄 낱말 + 뒤 어미(「정교하게 접근」+「하여」)를 한 덩어리로 — 모바일에서 「하여」 만 떨어지거나 밑줄 낱말이 두 줄로 갈려 선이 사라지던 것.
   (inline-block 마크만 쓰면 뒤 어미 앞에 줄바꿈 기회가 생기고 WJ 로도 안 막힌다. nowrap 은 LOCK 8(e) 신규 금지라 묶음 상자로) */
.fs-p-131 .fs-gyn-keep { display: inline-block; }
.fs-p-131 .fs-gyn-mark__svg { position: absolute; max-width: none; overflow: visible; pointer-events: none; fill: none; }   /* fs.css:247 svg{max-width:100%} 가 폭을 낱말 폭에 묶는다 */
.fs-p-131 .fs-gyn-mark__svg path {
  stroke: var(--gyn-hi); stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-width: 2.4px;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s var(--fs-ease-out) .5s;
}
.fs-p-131 .fs-gyn-mark--ul .fs-gyn-mark__svg { left: -2%; bottom: -.24em; width: 104%; height: .42em; }
.fs-p-131 .fs-gyn-mark--circle .fs-gyn-mark__svg { left: -22%; top: -32%; width: 144%; height: 164%; }
.fs-p-131 .fs-gyn-mark--circle { margin-inline: .15em; }
:root.fs-js .fs-p-131 .fs-gyn-care__item.fs-reveal:not(.is-in) .fs-gyn-hl { background-size: 0 100%; }
:root.fs-js .fs-p-131 .fs-gyn-care__item.fs-reveal:not(.is-in) .fs-gyn-mark__svg path { stroke-dashoffset: 1; }
@media (prefers-reduced-motion: reduce) {
  .fs-p-131 .fs-gyn-hl, .fs-p-131 .fs-gyn-mark__svg path { transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 모바일 배치 — A06 단계별 진단가이드 · A11 나는 어떤 타입일까 (승인자 「모바일 레이아웃 별로 · PC 는 안 건드림」)
   MOBILE_RULES §2 B «사진 좌 · 글 우» 행. 규칙은 전부 1023 / 599 이하 미디어쿼리 안 — PC(≥1024) 무변경.
   · A06: 도해 카드 4장 세로 스택(360 섹션 2,209px, 같은 큰 도해가 화면을 네 번 채운다) → 카드마다 «도해+라벨바 좌 40% · 설명 우» 한 줄.
     라벨바는 도해 바로 아래 같은 폭(LOCK 2) — figcaption 을 display:contents 로 풀어 바는 왼쪽 열, 설명만 오른쪽 열로 보낸다.
     보험 구간 띠(비급여 → 1단계 / 보험 → 2A·2B·3)와 읽는 순서는 그대로.
   · A11(<600): 1열 카드에서 도해 150px · 라벨바 카드 전폭(바가 도해보다 2배 넓다 — LOCK 2 폭 어긋남) → «도해+라벨바 좌 44% · 비율 우».
   ========================================================================== */
@media (max-width: 1023px) {
  .fs-p-131 .fs-gyn-grade__head .fs-kicker { text-wrap: balance; }
  .fs-p-131 .fs-gyn-grade__board { max-width: 560px; row-gap: var(--fs-sp-3); }
  .fs-p-131 .fs-gyn-grade__fig {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }
  .fs-p-131 .fs-gyn-grade__meta { display: contents; }
  .fs-p-131 .fs-gyn-grade__ill { grid-column: 1; grid-row: 1; align-self: end; width: 100%; max-width: none; margin: 0; }
  .fs-p-131 .fs-gyn-grade__meta .fs-labelbar { grid-column: 1; grid-row: 2; align-self: start; }
  .fs-p-131 .fs-gyn-grade__cap {
    grid-column: 2; grid-row: 1 / 3;
    padding: var(--fs-sp-3) var(--fs-sp-4) var(--fs-sp-3) var(--fs-sp-5);
    text-align: start; text-wrap: balance;
  }
}
@media (max-width: 599px) {
  .fs-p-131 .fs-gyn-type .fs-nose-dz__fig {
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding-block-start: 0;
  }
  .fs-p-131 .fs-gyn-type__meta { display: contents; }
  .fs-p-131 .fs-gyn-type__frame { grid-column: 1; grid-row: 1; align-self: end; max-width: none; margin: 0; }
  .fs-p-131 .fs-gyn-type__bar { grid-column: 1; grid-row: 2; align-self: start; }
  .fs-p-131 .fs-gyn-type__ratio { grid-column: 2; grid-row: 1 / 3; padding: var(--fs-sp-3) var(--fs-sp-4); }
}
/* A06 설명의 <br> → 문장 블록(.fs-lead__s)은 모바일 balance 용이다. 1024 이상은 승인자 「PC 는 안 건드림」 — 블록 자체는 <br> 과 픽셀 동일이고 balance 만 끈다
   (켜면 1024 에서 「…발달한 / 경우」 외톨이가 「…주변만 / 발달한 경우」 로 고르게 바뀐다 — 필요하면 이 줄을 지우면 된다). */
@media (min-width: 1024px) {
  .fs-p-131 .fs-gyn-grade__cap .fs-lead__s { text-wrap: wrap; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · A06 모바일 «단계별 점진적 진화» (승인자 「모바일에서도 단계별 진화를 레이아웃에서 더 보여줬으면」) — <1024 만, 새 문구 0
   ① 진행 레일: 카드 왼쪽 30px 거터에 세로선 + 단계 점. 점은 단계마다 커지고(10 → 13 → 16 → 19px) 회색(비급여) → 주황 옅게 → 진하게(--gyn-hi)로 짙어진다.
      선도 앞 단계 색 → 이 단계 색 그라데이션. 구간 띠(비급여 / 보험)는 전폭 그대로라 레일이 띠에서 끊겨 «구간» 이 읽힌다.
   ② 심화 게이지: 설명 위 4칸(18px) — 1/4 · 2/4 · 3/4 · 4/4. 카드 리빌 때 왼→오로 차오른다(카드 stagger 순서 = 단계 순서).
   ③ 도해는 같은 자리·같은 크기로 세로 정렬(위 B 변형) — 스크롤하면 가슴 윤곽이 점점 내려온다.
   ========================================================================== */
@media (max-width: 1023px) {
  .fs-p-131 .fs-gyn-grade { --gyn-rail: 30px; --gyn-track: rgba(151, 121, 110, .22); }
  .fs-p-131 .fs-gyn-grade__card { position: relative; margin-inline-start: var(--gyn-rail); }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(1) { --gyn-dot: 10px; --gyn-c0: var(--fs-pill-gray); --gyn-c: var(--fs-pill-gray); --gyn-p: 25%; }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(2) { --gyn-dot: 13px; --gyn-c0: var(--fs-pill-gray); --gyn-c: color-mix(in srgb, var(--gyn-hi) 50%, #fff); --gyn-p: 50%; }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(3) { --gyn-dot: 16px; --gyn-c0: color-mix(in srgb, var(--gyn-hi) 50%, #fff); --gyn-c: color-mix(in srgb, var(--gyn-hi) 75%, #fff); --gyn-p: 75%; }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(4) { --gyn-dot: 19px; --gyn-c0: color-mix(in srgb, var(--gyn-hi) 75%, #fff); --gyn-c: var(--gyn-hi); --gyn-p: 100%; }
  /* 레일 조각 — 카드 위·아래 간격까지 이어 붙인다(첫 카드는 점부터, 마지막 카드는 점까지) */
  .fs-p-131 .fs-gyn-grade__card::before {
    content: ""; position: absolute; z-index: 0;
    inset-inline-start: calc(var(--gyn-rail) / -2 - 1px); width: 2px;
    top: calc(-1 * var(--fs-sp-3)); bottom: calc(-1 * var(--fs-sp-3));
    background: linear-gradient(var(--gyn-c0), var(--gyn-c));
  }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(1)::before { top: 50%; }
  .fs-p-131 .fs-gyn-grade__card:nth-of-type(4)::before { bottom: 50%; }
  /* 단계 점 — 섹션 크림으로 테를 둘러 선 위에 떠 보이게 */
  .fs-p-131 .fs-gyn-grade__card::after {
    content: ""; position: absolute; z-index: 1; top: 50%;
    inset-inline-start: calc(var(--gyn-rail) / -2);
    width: var(--gyn-dot); height: var(--gyn-dot);
    border: 3px solid var(--fs-cream); border-radius: 50%;
    background: var(--gyn-c);
    transform: translate(-50%, -50%);
  }
  /* 심화 게이지 4칸 */
  .fs-p-131 .fs-gyn-grade__cap::before {
    content: ""; display: block; width: 72px; height: 6px; margin-block-end: var(--fs-sp-3);
    background:
      linear-gradient(var(--gyn-c), var(--gyn-c)) no-repeat 0 0 / var(--gyn-p) 100%,
      linear-gradient(var(--gyn-track), var(--gyn-track)) no-repeat 0 0 / 100% 100%;
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 18px);
            mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 18px);
    transition: background-size .7s var(--fs-ease-out) .45s;
  }
  :root.fs-js .fs-p-131 .fs-gyn-grade__card.fs-reveal:not(.is-in) .fs-gyn-grade__cap::before { background-size: 0 100%, 100% 100%; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .fs-p-131 .fs-gyn-grade__cap::before { transition: none; }
}