/* ==========================================================================
   assets/page/113.css — 자가늑 코재수술 전용 (.fs-p-113 스코프)
   · 색은 --fs-* 토큰만 사용. 새 hex 0개.
   · 새 모션마다 prefers-reduced-motion 무효화 규칙을 짝으로 둔다(파일 끝).

   전용 컴포넌트
     .fs-p-113-hero   누끼 모델이 히어로 경계를 넘는 오프셋 히어로
     .fs-p-113-dia    늑연골 채취 부위 도해 스테이지 (시그니처)
     .fs-p-113-chip   7 · 8 · 9 번 늑연골 낱장 도해 칩
     .fs-p-113-point  라벨바가 바닥에 꽉 차게 붙는 POINT 카드
     .fs-p-113-bio    아이콘 + 라벨바 + 부연 2줄의 생체 적합성 카드
   ========================================================================== */

.fs-p-113 {
  --fs-p-113-overhang: clamp(0px, -40px + 7vw, 92px);
}

/* --- A01 · 누끼 모델 오프셋 히어로 -------------------------------------- */
/* 밝은 크림2 배경이라 흰 카피가 읽히지 않는다 → 57 과 같은 잉크 예외 규칙. */
/* --- 셸 · A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ---------------
   누끼 모델이 크림 밴드를 넘어 걸쳐 있던 오프셋 히어로였다. 헤더를 흰 막대로
   세우지 않고 모델 사진 위에 그대로 얹는다. 히어로 상단은 전 폭이 웜 크림
   (#F0E1D0)이라 «잉크 글자»(14.9:1)를 쓴다. 모델 머리는 사진 높이의 20%
   아래에서 시작해 헤더 띠(최대 16%)에 안 걸린다.
   ------------------------------------------------------------------------- */
.fs-p-113 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-113 .fs-page--overlay { background: #F0E1D0; }
.fs-p-113 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-113 .fs-header--overlay::before { content: none; }
.fs-p-113 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-113 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-113 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-113 .fs-header--overlay .fs-util__link { color: var(--fs-ink); }
.fs-p-113 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-113 .fs-util__sep { opacity: .4; }

.fs-p-113 .fs-p-113-hero { background: #F0E1D0; color: var(--fs-ink); }
.fs-p-113 .fs-p-113-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 사진을 1.965:1 로 잘라 구웠다 — 인물을 오른쪽 끝(0.95)에 붙이고 머리끝을 20% 에 놓아
   헤더 띠 아래가 통째로 빈 배경이다. 그래서 오버레이 헤더에 스크림이 필요 없다. */
.fs-p-113 .fs-p-113-hero .fs-hero__bg img { object-position: 50% 0%; }
/* 크림 배경 위에서도 사이트의 틸 토큰은 큰 글자 기준(3:1)을 못 넘는다. 잉크로 간다. */
.fs-p-113 .fs-p-113-hero .fs-hero__kicker { color: var(--fs-ink); letter-spacing: 0; font-weight: 700; font-size: clamp(19px, 17.5px + 0.42vw, 23px); }
.fs-p-113 .fs-p-113-hero .fs-hero__title  { color: var(--fs-ink); font-size: var(--fs-t-display); line-height: 1.1; }
.fs-p-113 .fs-p-113-hero__lead { color: var(--fs-ink); }
.fs-p-113 .fs-p-113-hero__copy { max-width: min(100%, 34rem); gap: clamp(10px, 7px + 0.8vw, 18px); }

/* <1024px — 세로 컷(900x1613)의 위 35% 가 빈 배경이라 카피를 사진 «위» 에 얹는다.
   앞서 쓰던 «클레이 밴드에 카피 + 아래 사진» 쌓기를 걷어냈다 — PC 와 결이 갈렸다. */
@media (max-width: 1023px) {
  .fs-p-113 .fs-p-113-hero .fs-hero__bg img { object-position: 50% 0%; }
  /* align-items 는 .fs-hero 그리드에 걸려 있다 — __inner 에 주면 안 먹는다. */
  .fs-p-113 .fs-p-113-hero { align-items: start; }
  .fs-p-113 .fs-p-113-hero .fs-hero__inner {
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-6)) var(--fs-sp-9);
  }
  .fs-p-113 .fs-p-113-hero .fs-hero__copy { max-width: 100%; }
}
/* 600~1023 은 세로 컷을 위아래로 잘라낸 전용 판(900x1050)을 <source> 로 따로 준다.
   높이를 폭에 비례시켜 늘리는 방법도 재 봤지만 1023 에서 히어로가 1500px 를 넘어
   모델이 화면 두 장 아래로 내려간다. */

/* --- A03 · 늑연골 채취 부위 도해 (시그니처) ---------------------------- */
.fs-p-113 .fs-p-113-about { padding-block-start: var(--fs-sec-pt); }
.fs-p-113 .fs-p-113-dia { display: grid; gap: var(--fs-sp-6); justify-items: center; }
.fs-p-113 .fs-p-113-dia__stage {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1;
}
/* 원본의 분홍 원반을 토큰 색 크림 원반으로 치환한다 */
.fs-p-113 .fs-p-113-dia__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--fs-radius-round);
  background: var(--fs-cream);
}
.fs-p-113 .fs-p-113-dia__art,
.fs-p-113 .fs-p-113-dia__hl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fs-p-113 .fs-p-113-dia__hl {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--fs-dur) var(--fs-ease);
}

.fs-p-113 .fs-p-113-dia__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fs-p-113 .fs-p-113-dia__ring circle {
  fill: none;
  stroke: var(--fs-teal);
  stroke-width: 0.32;
  stroke-dasharray: 310;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--fs-ease);
}

/* 도해에 남은 지시선 스텁(71.2%)을 라벨(85.5%)까지 이어 준다 */
.fs-p-113 .fs-p-113-dia__lead {
  position: absolute;
  z-index: 1;
  inset-inline-start: 71.2%;
  width: 14.3%;
  height: 1.5px;
  background: var(--fs-teal);
  transform-origin: left center;
  transition: transform 520ms var(--fs-ease);
}
.fs-p-113 .fs-p-113-dia__lead--7 { inset-block-start: 46.9%; transition-delay: 420ms; }
.fs-p-113 .fs-p-113-dia__lead--8 { inset-block-start: 58.8%; transition-delay: 600ms; }
.fs-p-113 .fs-p-113-dia__lead--9 { inset-block-start: 70.7%; transition-delay: 780ms; }

.fs-p-113 .fs-p-113-tag {
  position: absolute;
  z-index: 2;
  inset-inline-start: 85.5%;
  transform: translate(-50%, -50%);
  min-height: clamp(26px, 24px + 0.6vw, 32px);
  padding-inline: var(--fs-sp-3);
  font-size: var(--fs-t-pill);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 520ms var(--fs-ease),
              transform 520ms var(--fs-ease),
              background-color var(--fs-dur) var(--fs-ease);
}
.fs-p-113 .fs-p-113-tag--7 { inset-block-start: 46.9%; transition-delay: 480ms, 480ms, 0ms; }
.fs-p-113 .fs-p-113-tag--8 { inset-block-start: 58.8%; transition-delay: 660ms, 660ms, 0ms; }
.fs-p-113 .fs-p-113-tag--9 { inset-block-start: 70.7%; transition-delay: 840ms, 840ms, 0ms; }
.fs-p-113 .fs-p-113-tag:is(:hover, :focus-visible) { background: var(--fs-teal-dk); }

.fs-p-113 .fs-p-113-tag--7:is(:hover, :focus-visible) ~ .fs-p-113-dia__hl--7,
.fs-p-113 .fs-p-113-tag--8:is(:hover, :focus-visible) ~ .fs-p-113-dia__hl--8,
.fs-p-113 .fs-p-113-tag--9:is(:hover, :focus-visible) ~ .fs-p-113-dia__hl--9 { opacity: 1; }

/* 스크롤 진입 전 = 링이 안 그려지고 라벨·지시선이 숨는다.
   fs.js 가 첫 화면 요소는 건너뛰므로 반드시 .fs-reveal 을 함께 요구한다. */
:root.fs-js .fs-p-113 .fs-p-113-dia.fs-reveal:not(.is-in) .fs-p-113-dia__ring circle { stroke-dashoffset: 310; }
:root.fs-js .fs-p-113 .fs-p-113-dia.fs-reveal:not(.is-in) .fs-p-113-dia__lead { transform: scaleX(0); }
:root.fs-js .fs-p-113 .fs-p-113-dia.fs-reveal:not(.is-in) .fs-p-113-tag {
  opacity: 0;
  transform: translate(calc(-50% - 16px), -50%);
}

.fs-p-113 .fs-p-113-dia__cap {
  display: flex;
  align-items: center;
  gap: var(--fs-sp-4);
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--fs-t-body);
  color: var(--fs-ink-soft);
}
.fs-p-113 .fs-p-113-dia__scale {
  flex: 0 0 auto;
  width: clamp(72px, 60px + 3vw, 110px);
  height: auto;
  fill: none;
  stroke: var(--fs-teal);
  stroke-width: 1.4;
}
.fs-p-113 .fs-p-113-dia__capTxt strong { color: var(--fs-teal-dk); font-weight: 700; }

.fs-p-113 .fs-p-113-about__text { display: grid; justify-items: start; gap: var(--fs-sp-4); }
.fs-p-113 .fs-p-113-about__title { margin-block-start: var(--fs-sp-1); }
.fs-p-113 .fs-p-113-facts {
  display: grid;
  gap: var(--fs-sp-5);
  width: 100%;
  margin-block-start: var(--fs-sp-6);
}
.fs-p-113 .fs-p-113-facts__item {
  display: grid;
  gap: var(--fs-sp-2);
  padding-inline-start: var(--fs-sp-5);
  border-inline-start: 2px solid var(--fs-teal);
}
.fs-p-113 .fs-p-113-facts__k {
  font-size: var(--fs-t-kicker);
  font-weight: 700;
  letter-spacing: var(--fs-ls-wide);
  color: var(--fs-teal-dk);
}
.fs-p-113 .fs-p-113-facts__v { color: var(--fs-ink-soft); }

/* 7 · 8 · 9 번 낱장 도해 칩 */
.fs-p-113 .fs-p-113-chips { margin-block-start: clamp(32px, 22px + 2.2vw, 64px); }
.fs-p-113 .fs-p-113-chip { display: grid; gap: 0; }
.fs-p-113 .fs-p-113-chip__box {
  display: block;
  background: var(--fs-cream-2);
  padding: clamp(10px, 6px + 1vw, 22px) clamp(10px, 4px + 1.6vw, 34px);
}
.fs-p-113 .fs-p-113-chip__box img { display: block; width: 100%; height: auto; }
.fs-p-113 .fs-p-113-chip .fs-labelbar { width: 100%; }

/* --- A06 · POINT 5 카드 (라벨바 부착형) -------------------------------- */
.fs-p-113 .fs-p-113-points { margin-block-start: clamp(30px, 25px + 1.3vw, 50px); }
.fs-p-113 .fs-p-113-point {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: center;
  height: 100%;
  gap: clamp(12px, 9px + 0.8vw, 20px);
  padding: clamp(16px, 12px + 1vw, 26px) 0 0;
  background: var(--fs-white);
}
.fs-p-113 .fs-p-113-point__icon {
  display: grid;
  place-items: center;
  width: clamp(78px, 58px + 4.4vw, 108px);
  height: clamp(78px, 58px + 4.4vw, 108px);
}
.fs-p-113 .fs-p-113-point__icon img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-113 .fs-p-113-point__cap {
  align-self: start;
  padding-inline: var(--fs-sp-5);
  font-size: var(--fs-t-body);
  line-height: 1.5;
  color: var(--fs-muted);
  text-align: center;
}
.fs-p-113 .fs-p-113-point .fs-labelbar { width: 100%; align-self: end; }

/* --- A05 · Q / A 말풍선 ------------------------------------------------ */
.fs-p-113 .fs-p-113-qa__fig img { display: block; width: 100%; height: auto; }
.fs-p-113 .fs-p-113-qa__text { display: grid; gap: var(--fs-sp-7); }
.fs-p-113 .fs-p-113-bubble {
  position: relative;
  display: grid;
  gap: var(--fs-sp-4);
  padding: clamp(20px, 16px + 1vw, 32px) clamp(20px, 15px + 1.2vw, 36px);
  padding-inline-start: clamp(58px, 46px + 2.6vw, 86px);
  background: var(--fs-white);
  border: 1px solid var(--fs-teal);
}
.fs-p-113 .fs-p-113-bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: clamp(30px, 24px + 1.4vw, 46px);
  border-inline: 11px solid transparent;
  border-block-start: 13px solid var(--fs-teal);
}
.fs-p-113 .fs-p-113-bubble--a {
  background: var(--fs-cream);
  border-color: var(--fs-cream);
}
.fs-p-113 .fs-p-113-bubble--a::after { display: none; }
.fs-p-113 .fs-p-113-bubble__mark {
  position: absolute;
  inset-block-start: clamp(18px, 14px + 1vw, 30px);
  inset-inline-start: clamp(20px, 15px + 1.2vw, 34px);
  font-family: var(--fs-font-en);
  font-size: clamp(22px, 18px + 1.1vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--fs-teal-dk);
}
.fs-p-113 .fs-p-113-bubble__mark--a { color: var(--fs-ink); }

/* --- A11 · 와핑 저감 3분할 도해 + 코 라인 3컷 -------------------------- */
.fs-p-113 .fs-p-113-how { background: var(--fs-cream-2); }
.fs-p-113 .fs-p-113-how .fs-card { background: var(--fs-white); }
.fs-p-113 .fs-p-113-how .fs-nose-dz__ill {
  width: clamp(88px, 58px + 6.4vw, 168px);
  margin-block-end: clamp(16px, 8px + 2vw, 44px);
}
.fs-p-113 .fs-p-113-how .fs-nose-dz__fig { padding-inline: var(--fs-sp-3); }
.fs-p-113 .fs-p-113-how .fs-nose-dz__fig .fs-labelbar { margin-inline: calc(-1 * var(--fs-sp-3)); }

.fs-p-113 .fs-p-113-lines { margin-block-start: clamp(40px, 26px + 2.8vw, 84px); }
.fs-p-113 .fs-p-113-lines__item { display: block; overflow: hidden; }
.fs-p-113 .fs-p-113-lines__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.fs-p-113 .fs-p-113-lines__hand {
  margin-block-start: clamp(22px, 16px + 1.2vw, 40px);
  color: var(--fs-teal-dk);
}

@media (max-width: 599px) {
  .fs-p-113 .fs-p-113-how .fs-nose-dz__fig .fs-labelbar {
    min-height: 66px;
    font-size: var(--fs-t-xs);
  }
}

/* --- A07 · 생체 적합성 (사진 + 3 카드) --------------------------------- */
.fs-p-113 .fs-p-113-bio__frame { display: block; overflow: hidden; }
.fs-p-113 .fs-p-113-bio__fig img { display: block; width: 100%; height: auto; }
.fs-p-113 .fs-p-113-bio__cards { margin-block-start: clamp(32px, 22px + 2.2vw, 64px); }
.fs-p-113 .fs-p-113-bio__desc:last-child { align-self: start; }
.fs-p-113 .fs-p-113-bio__card {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  height: 100%;
  background: var(--fs-cream-2);
}
.fs-p-113 .fs-p-113-bio__fig2 {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 9px + 0.8vw, 20px);
  padding-block-start: clamp(20px, 14px + 1.4vw, 36px);
}
.fs-p-113 .fs-p-113-bio__icon {
  display: grid;
  place-items: center;
  width: clamp(78px, 58px + 4.4vw, 108px);
  height: clamp(78px, 58px + 4.4vw, 108px);
}
.fs-p-113 .fs-p-113-bio__icon img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-113 .fs-p-113-bio__sub {
  font-size: var(--fs-t-body);
  color: var(--fs-muted);
  text-align: center;
  padding-inline: var(--fs-sp-5);
}
.fs-p-113 .fs-p-113-bio__fig2 .fs-labelbar { width: 100%; }
.fs-p-113 .fs-p-113-bio__desc {
  padding: clamp(16px, 12px + 1vw, 26px) clamp(16px, 10px + 1.4vw, 30px) clamp(20px, 14px + 1.4vw, 34px);
  color: var(--fs-ink-soft);
}

/* --- A23 · 적응증 체크리스트 ------------------------------------------- */
/* 선그림 아이콘 → 3D 코 옆모습 렌더로 교체했다. 앞서 «번호·아이콘·제목» 을 한 줄에
   늘어놓았더니 도해가 146px 썸네일이 되어 정작 «코의 상태» 가 안 보였다.
   2열 가로 나열 → 4열 세로 카드(번호 / 큰 도해 / 제목)로 바꾼다. */
.fs-p-113 .fs-p-113-who { margin-block-start: var(--fs-gap-title); }
.fs-p-113 .fs-p-113-who__item {
  background: transparent;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-content: start;
  justify-items: start;
  row-gap: var(--fs-sp-4);
  padding: var(--fs-sp-5) 0 0;
}
.fs-p-113 .fs-p-113-who__icon {
  display: block; overflow: hidden;
  width: 100%; aspect-ratio: 1 / 1;
}
.fs-p-113 .fs-p-113-who__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- A09 · 다크 스테이트먼트 ------------------------------------------- */
/* fs.css 의 .fs-section__bg 는 .fs-container / .fs-bleed 만 위로 올려 준다.
   .fs-split 을 섹션 직계 자식으로 두므로 여기서 직접 z-index 를 준다. */
.fs-p-113 .fs-p-113-statement__grid { position: relative; z-index: 1; gap: 0; }
.fs-p-113 .fs-p-113-statement .fs-section__bg img { opacity: 0.5; object-fit: cover; }
.fs-p-113 .fs-p-113-statement__fig { overflow: hidden; }
.fs-p-113 .fs-p-113-statement__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-113 .fs-p-113-statement__copy {
  display: grid;
  gap: var(--fs-sp-5);
  align-content: center;
  padding: clamp(48px, 30px + 4vw, 100px) var(--fs-gutter);
}
.fs-p-113 .fs-p-113-statement__kicker { color: var(--fs-on-dark); }

/* --- A24 · CTA -------------------------------------------------------- */
.fs-p-113 .fs-p-113-cta__note { margin-block-start: var(--fs-sp-5); text-align: center; }

/* --- 모션 무효화 (레이아웃은 동일해야 한다) ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-113 .fs-p-113-dia__ring circle {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .fs-p-113 .fs-p-113-dia__lead {
    transform: none !important;
    transition: none !important;
  }
  .fs-p-113 .fs-p-113-tag {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
  }
  .fs-p-113 .fs-p-113-dia__hl { transition: none !important; }
}


/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-27
   근거: _design/QA/113.md. 48.css 「V70 승격분」·122.css 에서 검증된 패턴을 옮겼다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   F1 [접근성] CTA 각주가 흰 배경에서 4.12:1 (AA 4.5 미달 · 1920·360 양쪽 검출)
   --fs-muted-2 #7D7D7D 는 «약관 본문» 용이고 그 4.12:1 은 흰 배경 전제값이다.
   통과하는 텍스트 잉크 토큰은 ink / ink-soft 뿐이므로 ink-soft(10.5:1)로 올린다.
   -------------------------------------------------------------------------- */
.fs-p-113 .fs-p-113-cta__note { color: var(--fs-ink-soft); }

/* --------------------------------------------------------------------------
   F2 [구조] 태블릿 마지막 줄 고아 카드
   fs.css:332~335 는 600~1023 구간에서 --3 · --5 를 일률 2열로 만든다.
     · POINT 5장 → 2+2+1 로 POINT 05 가 혼자 남는다
     · 7·8·9 번 늑연골 칩 3장 → 2+1 로 «9번» 만 떨어져 나가 연번으로 안 읽힌다
   둘 다 열 수만 손본다(순서·비율은 그대로). 48.css 의 3+2 처방과 같다.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-113 .fs-p-113-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-p-113 .fs-p-113-chips  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   F3 [V70 · E] 「누가 해야하나요」 크림 밴드 위 흰 카드 4장 → 헤어라인 2열
   흰 상자 4개가 2x2 로 반복돼 «상자의 나열» 로 읽힌다. 상자를 지우면 크림 밴드
   위에서 밀도가 올라가고 .fs-card--rule 의 2px 틸 세로선이 그대로 열 표시가 된다.
   ★ 세로 헤어라인은 넣지 않는다 — 둘째 칸의 틸 룰(2px)과 1px 선이 나란히 겹쳐
     이중선으로 읽힌다. 열 구분은 틸 룰이, 행 구분은 가로 헤어라인이 맡는다.
   ★ 이 카드에는 data-fs-tilt 가 없다 — 53 의 «배경 지운 카드에 흰 광택» 은
     구조적으로 발생하지 않는다(glosscheck 로 확인).
   -------------------------------------------------------------------------- */
/* fs-grid 는 600 미만에서 1열이다. 도해 4장이 전폭으로 쌓이면 섹션이 2078px 가 되고
   비슷한 옆모습이 네 번 반복돼 지친다. 태블릿과 같은 2x2 로 맞춘다. */
@media (max-width: 599px) {
  .fs-p-113 .fs-p-113-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* .fs-card--rule 은 1024 이상에서 «왼쪽 세로선 + 3열» 로 바뀐다 — 세로 카드에선
   위쪽 틸 선을 그대로 쓰는 게 맞다. 열 정의도 되돌린다. */
@media (min-width: 1024px) {
  .fs-p-113 .fs-p-113-who__item {
    border-inline-start: 0;
    border-block-start: 2px solid var(--fs-teal);
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    padding: var(--fs-sp-5) 0 0;
  }
}

/* --------------------------------------------------------------------------
   F4 [V70 · B] 다크 밴드 50:50 하드컷 → 56:44 비대칭 + 카피 패널 가로 겹침
   statement.jpg 평균 휘도 153.6 (PIL 실측 · 기준 110) — 밝은 사진이라 겹침이 먹는다.
   ★ 겹침은 PC 가로 방향으로만 준다. 모바일에서 음수 세로 마진을 주면
     섹션이 통째로 끌려 올라간다(48 실측).
   ★ 인라인 --fs-split-align: center 는 grid-template-columns / align-items 를
     직접 덮어 무력화한다. center 로 두면 사진이 밴드 아래끝까지 차지 않는다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-113 .fs-p-113-statement__grid {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    align-items: stretch;
  }
  .fs-p-113 .fs-p-113-statement__fig { position: relative; z-index: 1; }
  /* ★ align-self:center 로 두면 패널이 밴드 높이보다 짧아져 위·아래 모서리가
     고스트로 밝아진 밴드 위에 «검은 상자» 로 떠 보인다(실측 995x302 / 밴드 676).
     밴드 높이로 늘리고 안쪽 글자만 가운데로 — 그러면 사진 위 왼쪽 모서리
     하나만 보이고 그것이 곧 겹침의 형태가 된다.
     ※ 콘텐츠 경계(x1680)에서 끊어 오른쪽에 고스트 밴드를 240px 남겨도 봤다.
       그 자리의 고스트는 거의 균일해서 «패널이 끝까지 안 간» 회색 띠로만 읽혔다. 버렸다.
     ※ 고스트는 죽은 레이어가 아니다 — 이 배경 override 는 PC(≥1024) 에만 걸리고
       모바일은 사진 아래로 카피가 쌓이면서 고스트가 그대로 뒤에 깔린다. */
  .fs-p-113 .fs-p-113-statement__copy {
    position: relative;
    z-index: 3;                                /* .fs-section__bg(0) · 사진(1) 위 */
    align-self: stretch;
    margin-inline-start: clamp(-150px, -7.8vw, -80px);
    padding: clamp(48px, 3vw, 80px) var(--fs-gutter)
             clamp(48px, 3vw, 80px) clamp(44px, 3.2vw, 68px);
    background: var(--fs-ink-band);            /* 겹치는 부분에서 글자가 사진에 묻지 않게 */
  }
}

/* --------------------------------------------------------------------------
   F5 [구조] 생체 적합성 — 축 반전 + 재균형
   시안 470:890 은 오른쪽 890px 열에 2줄 제목(300px)과 리드 1줄만 들어가
   x1064~1680 에 616px 의 빈 면이 남는다(실측). 게다가 이 페이지의 다른 h2 는
   전부 x240 에서 시작하는데 이 제목만 x764 라 아래 3열 카드와도 어긋나 있었다.
   앞선 A03·A05 가 모두 «좌 사진 / 우 글» 이라 축도 세 번째 반복이었다.
   → 축을 뒤집어 제목을 x240 으로 되돌리고, 남던 여백을 사진 폭으로 돌린다.
     겹침·음수 마진은 쓰지 않는다(48 에서 라벨바를 먹었다).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-113 .fs-p-113-bio .fs-split {
    grid-template-columns: minmax(0, 540fr) minmax(0, 800fr);
  }
  .fs-p-113 .fs-p-113-bio__fig { order: 2; }
  .fs-p-113 .fs-p-113-bio .fs-nose-head { order: 1; }
}

/* --------------------------------------------------------------------------
   F6 [마이크로] 섹션 제목 뒤 70px 틸 선 (delay .5s) — 48·53·122 검증분
   ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   ★ 선택자는 :where() 로 감싼다. ID 를 그대로 쓰면 (1,1,1) 이 되어 초기 은닉
     규칙을 이겨 버리고 선이 «항상 그어진 채» 굳는다.
   제외 — #statement-title(다크 밴드 대제목, 네온 강조가 이미 있다) ·
         #warp-title(틸 테두리 말풍선 안이라 선이 테두리와 겹쳐 읽힌다) ·
         #cta-title · #contact-title(.fs-sr-only).
   -------------------------------------------------------------------------- */
.fs-p-113 :where(#about-title, #why-title, #warp-how-title,
                 #biocompat-title, #who-title)::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;
}
/* 초기 은닉 — 은닉 쪽 트랜지션은 끊는다(1→0 역재생 방지) */
:root.fs-js .fs-p-113 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-113 .fs-reveal:not(.is-in) h2::after {
  transform: scaleX(0);
  transition: none;
}

/* --------------------------------------------------------------------------
   F7 [마이크로] 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 안 쓴다.
   ※ 대상은 전부 «프레임의 자식 img» 다. .fs-p-113-lines__item ·
     .fs-p-113-bio__frame 은 data-fs-tilt-inner 호스트라 fs.js 가 그 요소에
     인라인 transform 을 건다 — 자식 img 를 키워야 틸트와 충돌하지 않는다.
   ※ 칩·POINT·와핑 도해는 제외한다. 여백 있는 색면 상자 안의 선화라 확대하면
     상자 밖으로 잘려 나간다.
   -------------------------------------------------------------------------- */
.fs-p-113 .fs-p-113-qa__fig { overflow: hidden; }
.fs-p-113 .fs-p-113-qa__fig img,
.fs-p-113 .fs-p-113-lines__item img,
.fs-p-113 .fs-p-113-bio__frame img,
.fs-p-113 .fs-p-113-statement__fig img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-113 .fs-p-113-qa__fig:hover img,
  .fs-p-113 .fs-p-113-lines__item:hover img,
  .fs-p-113 .fs-p-113-bio__frame:hover img,
  .fs-p-113 .fs-p-113-statement__fig:hover img { transform: scale(1.045); }
}

/* --------------------------------------------------------------------------
   모션 무효화 — F6 · F7 짝. 레이아웃(F2~F5)은 모션이 아니므로 그대로 둔다.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-113 :where(#about-title, #why-title, #warp-how-title,
                   #biocompat-title, #who-title)::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-113 .fs-p-113-qa__fig img,
  .fs-p-113 .fs-p-113-lines__item img,
  .fs-p-113 .fs-p-113-bio__frame img,
  .fs-p-113 .fs-p-113-statement__fig img {
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   F8 [정렬] .fs-card__num 은 tabular 가 아니다
   「누가 해야하나요」 룰 카드의 번호 폭이 01=28 · 02=31 · 03=32 · 04=33px 로
   달라 그 오른쪽 아이콘 열이 x310 / x314 / x1033 / x1035 로 어긋난다(실측).
   상자를 지운 F3 이후에는 카드 배경이 가려 주지 않아 그대로 드러난다.
   -------------------------------------------------------------------------- */
.fs-p-113 .fs-p-113-who__item .fs-card__num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/767px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-113-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 정의 리드 <br> 문장 블록 1곳(360 「합니다.」 외톨이). nbsp 2(「변형되지 않나요?」 · 「와핑 현상을」 — 360 「… 변형되지 / 않나요?」「… 와핑 / 현상을 줄여」).
   · balance: 채취·사용 부위 값 · 와핑 본문·리드 · 수술대상 제목 · 주의문.
   · 특징 POINT 5장 <600: fs-grid--5 가 1열(장당 ≈170px) → 2열 + 홀수 마지막 전폭(§2 A).
     배치 무변경: 늑연골 도해 3장(§4-4) · 와핑 3칸(이미 3열) · 인물컷.
   ========================================================================== */
.fs-p-113 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-113 .fs-p-113-facts__v,
.fs-p-113 #warp .fs-body,
.fs-p-113 #warp .fs-quote,
.fs-p-113 .fs-nose-lead,
.fs-p-113 .fs-card__title,
.fs-p-113 .fs-p-113-cta__note { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-113 .fs-p-113-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-sp-4); }
  .fs-p-113 .fs-p-113-points > li:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }
  .fs-p-113 .fs-p-113-point__cap { word-break: keep-all; text-wrap: balance; }
}