/* ==========================================================================
   58 · 사각턱축소술 (jaw-reduction) — 이 페이지에만 필요한 규칙
   전부 .fs-p-58 스코프. 색은 --fs-* 토큰만 쓴다(새 hex 0).

   전용 컴포넌트
     .fs-jr-fig      도해 프레임 (이미지 + 하단 라벨바) — 페이지 공통 리듬
     .fs-jr-hero     1mm 계열 모델 히어로 (투명 헤더 + 좌 잉크 카피 + 틸 룰)
     .fs-jr-about    좌 모델컷 / 우 정의 + 아래 아래턱뼈 도해 2컷
     .fs-jr-spec     수술정보 표 (행 머리에 아이콘)
     .fs-jr-target   수술대상 (좌 모델 / 우 2×2 아이콘 카드 + 라벨바)
     .fs-jr-point    POINT 01~03 캐러셀 (좌 도해 2컷 / 우 서술)
     .fs-jr-cut      ★ 시그니처 · 절제 범위 오버레이 (라디오 탭 + SVG 2겹)
     .fs-jr-orbit    사각턱축소술 특징 4 원형
     .fs-jr-promise  약속 5줄 인용 블록

   상태 배선 : #cut 의 .fs-container 직계 라디오 2개(.fs-jr-pick)를 형제
               결합자로 읽어 두 절제 범위 패널을 토글한다. JS 없음.
   ========================================================================== */

/* --- 공통 도해 프레임 ---------------------------------------------------- */
.fs-p-58 .fs-jr-fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--fs-white);
}
.fs-p-58 .fs-jr-fig > img { display: block; width: 100%; height: auto; }

/* --- A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 --------------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 이 페이지의 히어로 상단은
   전 폭이 웜 크림(#F5F1E7)이라 흰 글자가 아니라 «잉크 글자» 를 쓴다.
   에셋 실측: 모델 최상단이 사진 높이의 24.9%(1072 중 267px) 라 헤더 띠가 사진에서
   차지하는 최대 구간(1280 폭에서 145px = 13.5%)에 안 걸린다. 53·143 과 같은 형식. */
.fs-p-58 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-58 .fs-page--overlay { background: #F5F1E7; }
.fs-p-58 .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-58 .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-58 .fs-gnb__link:not([aria-current="page"]) { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-58 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-58 .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-58 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-58 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-58 .fs-util__sep { opacity: .35; }
/* fs.css:3141 의 «호버 시 흰 글자» 도 다크 히어로 전제다 — 밝은 헤더에선 사라진다 */
.fs-p-58 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }

.fs-p-58 .fs-jr-hero { background: #F5F1E7; color: var(--fs-ink); }
/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-58 .fs-jr-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. 0%(위 고정)면 머리 위 여백 267px 가 그대로 남아 헤더 아래가 통째로
   빈 화면이 된다. 29% 로 내리면 1920 에서 머리끝이 y≈175 — 형제 페이지 81(≈176)과 맞는다.
   1326px 미만은 세로가 딱 맞아 이 값이 무효다. */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=269 라 29% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-58 .fs-jr-hero .fs-hero__bg img { object-position: 50% 51%; }
/* 카피 열은 «인물 시작 지점»(에셋 x 57%)에서 끊는다 — 고정 px 로 두면 폭마다 어긋난다 */
.fs-p-58 .fs-jr-hero__copy {
  max-width: min(100%, 50vw);
  gap: var(--fs-sp-4); justify-items: start; text-align: start;
}
.fs-p-58 .fs-jr-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-58 .fs-jr-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-58 .fs-jr-hero__rule {
  display: block; height: 3px; background: var(--fs-teal);
  width: clamp(56px, 47.7px + 2.3vw, 92px);
}
.fs-p-58 .fs-jr-hero__sub { color: var(--fs-teal-dk); font-weight: 600; }

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 크림 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은 페이드로
   녹여 이음매를 없앤다. 밴드색은 세로 에셋 상단 실측값(#F9EEDF). */
@media (max-width: 1023px) {
  .fs-p-58 .fs-jr-hero { min-height: 0; background: #F9EEDF; }
  .fs-p-58 .fs-jr-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-58 .fs-jr-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px);   /* 2026-10-22 모바일 §1-8 48 → 60 */
            mask-image: linear-gradient(180deg, transparent 0, #000 60px);
  }
  .fs-p-58 .fs-jr-hero .fs-hero__inner {
    grid-row: 1; background: #F9EEDF;
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-5)) var(--fs-sp-7);   /* 2026-10-22 모바일 §1-8 40/56 → 20/30 */
  }
  .fs-p-58 .fs-jr-hero__copy { max-width: 100%; }
}

/* --- A03 · 정의 + 아래턱뼈 도해 2컷 ------------------------------------- */
.fs-p-58 .fs-jr-about__photo .fs-doctor__frame { display: block; overflow: hidden; }
.fs-p-58 .fs-jr-about__photo img { display: block; width: 100%; height: auto; }
.fs-p-58 .fs-jr-about__lead { margin-block-start: var(--fs-sp-6); }
.fs-p-58 .fs-jr-about__body { margin-block-start: var(--fs-sp-3); color: var(--fs-muted); }
.fs-p-58 .fs-jr-about__figs {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 600px) {
  .fs-p-58 .fs-jr-about__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- A21 · 수술정보 표 --------------------------------------------------- */
.fs-p-58 .fs-jr-spec__table { width: 100%; }
.fs-p-58 .fs-jr-spec__key { display: inline-flex; align-items: center; gap: var(--fs-sp-3); }
.fs-p-58 .fs-jr-spec__key img {
  flex: 0 0 auto; width: clamp(26px, 22.7px + 0.9vw, 40px); height: auto;
}
.fs-p-58 .fs-jr-spec .fs-nose-lead { color: var(--fs-muted); }
/* 두 열 모두 «머리와 칸» 을 같은 가운데 정렬로 둔다. 머리만 가운데로 두면 칸이 열 왼쪽에
   붙어 머리와 값이 다른 열처럼 읽힌다(105 에서 최대 150px). */
.fs-p-58 .fs-jr-spec__table th,
.fs-p-58 .fs-jr-spec__table td { text-align: center; }
.fs-p-58 .fs-jr-spec__key { justify-content: center; }

/* --- A06 · 수술대상 ------------------------------------------------------ */
.fs-p-58 .fs-jr-target__grid {
  display: grid; gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
  align-items: stretch;
}
.fs-p-58 .fs-jr-target__model { justify-self: center; width: 100%; max-width: 350px; }
.fs-p-58 .fs-jr-target__model .fs-doctor__frame { display: block; overflow: hidden; }
.fs-p-58 .fs-jr-target__model img { display: block; width: 100%; height: auto; }
.fs-p-58 .fs-jr-target__cards {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.fs-p-58 .fs-jr-target__card {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  justify-items: center; gap: var(--fs-sp-5);
  padding: var(--fs-sp-7) var(--fs-sp-4) 0;
  background: var(--fs-cream-2);
}
.fs-p-58 .fs-jr-target__fig {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  justify-items: stretch; align-items: center; gap: var(--fs-sp-5);
  width: 100%; align-self: stretch;
}
/* 아이콘의 «미디어 상자» 는 카드 폭 = 라벨바 폭이다. 상자만 넓히고 글리프는
   object-fit: contain 으로 지금 크기 그대로 가운데 둔다 — LOCK 2 (d) 의
   「캡션 폭 === 사진 폭」을 만족시키면서 렌더 픽셀은 바뀌지 않는다. */
.fs-p-58 .fs-jr-target__fig img {
  width: 100%;
  height: clamp(76px, 51.3px + 6.9vw, 184px);
  object-fit: contain;
}
.fs-p-58 .fs-jr-target__fig .fs-labelbar { line-height: 1.35; padding-block: 6px; }
@media (min-width: 1024px) {
  .fs-p-58 .fs-jr-target__grid { grid-template-columns: minmax(0, 350fr) minmax(0, 940fr); gap: var(--fs-sp-13); }
  .fs-p-58 .fs-jr-target__model { justify-self: start; }
}

/* --- A17 · POINT 01~03 캐러셀 ------------------------------------------- */
.fs-p-58 .fs-jr-point__viewport { overflow: hidden; margin-block-start: var(--fs-sp-8); }
.fs-p-58 .fs-jr-point__track { display: flex; }
.fs-p-58 .fs-jr-point__slide {
  flex: 0 0 100%; min-width: 0;
  display: grid; gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.fs-p-58 .fs-jr-point__figs {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
}
.fs-p-58 .fs-jr-point__text > * + * { margin-block-start: var(--fs-sp-3); }
.fs-p-58 .fs-jr-point__text .fs-num { color: var(--fs-teal-dk); line-height: 1; }
.fs-p-58 .fs-jr-point__title { margin-block-start: var(--fs-sp-2); }
.fs-p-58 .fs-jr-point__text .fs-body { color: var(--fs-muted); line-height: var(--fs-lh-loose); }
@media (min-width: 600px) {
  .fs-p-58 .fs-jr-point__figs { grid-template-columns: minmax(0, 1397fr) minmax(0, 1000fr); align-items: start; }
}
@media (min-width: 1024px) {
  .fs-p-58 .fs-jr-point__slide { grid-template-columns: minmax(0, 780fr) minmax(0, 560fr); }
}

/* --- ★ 시그니처 · 절제 범위 오버레이 ------------------------------------ */
.fs-p-58 .fs-jr-cut-sec .fs-section__bg img { opacity: .18; }
.fs-p-58 .fs-jr-cut__title { line-height: 1.19; }
.fs-p-58 .fs-jr-cut { margin-block-start: clamp(32px, 27.5px + 1.25vw, 51.5px); }
.fs-p-58 .fs-jr-cut__hint { color: var(--fs-on-dark); opacity: .72; text-align: center; }
.fs-p-58 .fs-jr-cut__tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fs-sp-2); margin-block-start: var(--fs-sp-3);
}
.fs-p-58 .fs-jr-cut__tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: clamp(30px, 29.5px + 0.128vw, 35px);
  padding-inline: var(--fs-sp-5);
  font-size: var(--fs-t-pill); font-weight: 700;
  color: var(--fs-on-dark); background: var(--fs-pill-gray);
  border-radius: var(--fs-radius-pill); cursor: pointer;
  transition: background var(--fs-dur) var(--fs-ease);
}
.fs-p-58 .fs-jr-cut__panels {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-block-start: var(--fs-sp-6);
}
.fs-p-58 .fs-jr-cut__panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.fs-p-58 .fs-jr-cut__stage { position: relative; display: block; }
.fs-p-58 .fs-jr-cut__stage img { display: block; width: 100%; height: auto; }
.fs-p-58 .fs-jr-cut__ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-p-58 .fs-jr-cut__line {
  fill: none; stroke: var(--fs-teal); stroke-width: 9; stroke-linecap: round;
  opacity: .45; transition: opacity var(--fs-dur) var(--fs-ease);
}
.fs-p-58 .fs-jr-cut__rest {
  fill: none; stroke: var(--fs-on-dark); stroke-width: 4;
  stroke-linecap: round; stroke-dasharray: 10 12; opacity: .35;
}
.fs-p-58 .fs-jr-cut__mark {
  fill: none; stroke: var(--fs-teal); stroke-width: 5; opacity: 0;
  transition: opacity var(--fs-dur) var(--fs-ease);
}
.fs-p-58 .fs-jr-cut__flag {
  position: absolute; left: 20%; top: 66%;
  padding: 4px 10px;
  font-size: var(--fs-t-xs); font-weight: 700;
  color: var(--fs-on-dark); background: var(--fs-teal-dk);
  opacity: 0; transition: opacity var(--fs-dur) var(--fs-ease);
}
.fs-p-58 .fs-jr-cut__vs {
  justify-self: center; align-self: center;
  font-family: var(--fs-font-en); font-size: var(--fs-t-h3); font-weight: 700;
  color: var(--fs-on-dark); opacity: .6;
}
/* 선택 상태 — 라디오 형제 결합자 */
.fs-p-58 #jr-cut-old:checked ~ .fs-jr-cut .fs-jr-cut__tab--old,
.fs-p-58 #jr-cut-fs:checked  ~ .fs-jr-cut .fs-jr-cut__tab--fs { background: var(--fs-teal-text); }
.fs-p-58 #jr-cut-old:checked ~ .fs-jr-cut .fs-jr-cut__panel--old .fs-jr-cut__line,
.fs-p-58 #jr-cut-fs:checked  ~ .fs-jr-cut .fs-jr-cut__panel--fs  .fs-jr-cut__line { opacity: 1; }
.fs-p-58 #jr-cut-old:checked ~ .fs-jr-cut .fs-jr-cut__panel--old .fs-jr-cut__mark,
.fs-p-58 #jr-cut-old:checked ~ .fs-jr-cut .fs-jr-cut__panel--old .fs-jr-cut__flag { opacity: 1; }
.fs-p-58 .fs-jr-pick:focus-visible + .fs-jr-pick + .fs-jr-cut .fs-jr-cut__tab--old,
.fs-p-58 .fs-jr-pick:focus-visible ~ .fs-jr-cut .fs-jr-cut__tab--fs { outline: 2px solid var(--fs-on-dark); outline-offset: 2px; }
@media (min-width: 1024px) {
  .fs-p-58 .fs-jr-cut__panels { grid-template-columns: minmax(0, 466fr) 124px minmax(0, 464fr); gap: 0; }
  .fs-p-58 .fs-jr-cut { max-width: 1020px; margin-inline: auto; }
}

/* --- A10 · 비교표 -------------------------------------------------------- */
.fs-p-58 .fs-jr-compare { margin-block-start: var(--fs-sp-8); --fs-compare-cols-mo: 106px minmax(0, 1fr); }
.fs-p-58 .fs-jr-compare .fs-compare__cell { min-height: 78.75px; padding-block: 10px; }
.fs-p-58 .fs-jr-compare__txt { display: block; width: 100%; font-size: var(--fs-t-body); line-height: 1.5; }
.fs-p-58 .fs-jr-compare .fs-compare__cell--label .fs-jr-compare__txt { font-size: var(--fs-t-quote); font-weight: 700; }
.fs-p-58 .fs-jr-compare__txt--icon { display: flex; align-items: center; gap: var(--fs-sp-3); }
.fs-p-58 .fs-jr-compare__txt--icon img { flex: 0 0 auto; width: 34px; height: 34px; }
.fs-p-58 .fs-jr-compare .fs-compare__cell--left .fs-jr-compare__txt--icon { justify-content: flex-end; }
@media (min-width: 1024px) {
  .fs-p-58 .fs-jr-compare__txt { font-size: var(--fs-t-lead); }
  .fs-p-58 .fs-jr-compare .fs-compare__row { grid-template-columns: minmax(0, 466fr) 124px minmax(0, 464fr); }
}

/* --- 특징 4 원형 오빗 ---------------------------------------------------- */
.fs-p-58 .fs-jr-orbit {
  display: grid; gap: var(--fs-sp-5);
  grid-template-columns: repeat(2, minmax(0, 240px));
  justify-content: start;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-58 .fs-jr-orbit__item {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: var(--fs-sp-2);
  aspect-ratio: 1;
  padding: var(--fs-sp-4);
  text-align: center;
  border: 1px solid var(--fs-teal);
  border-radius: var(--fs-radius-round);
  background: var(--fs-cream-2);
}
.fs-p-58 .fs-jr-orbit__num {
  font-family: var(--fs-font-en); font-size: var(--fs-t-kicker-lg); font-weight: 700;
  color: var(--fs-teal-dk); line-height: 1;
}
.fs-p-58 .fs-jr-orbit__item img { width: clamp(38px, 30.9px + 1.9vw, 62px); height: auto; }
.fs-p-58 .fs-jr-orbit__txt { font-size: var(--fs-t-body); font-weight: 600; line-height: 1.4; }
.fs-p-58 .fs-jr-orbit__item + .fs-jr-orbit__item::before {
  content: "+";
  position: absolute; inset-inline-start: calc(-1 * var(--fs-sp-5) / 2 - 13px); top: 50%;
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-block-start: -13px;
  font-size: var(--fs-t-sm); font-weight: 700;
  color: var(--fs-on-dark); background: var(--fs-ink);
  border-radius: var(--fs-radius-round);
}
.fs-p-58 .fs-jr-orbit__item:nth-child(3)::before { content: none; }
/* 틸트 호스트(div)와 기울어지는 카드(figure)를 나눈다 — 57 의
   `<li data-fs-tilt><figure data-fs-tilt-inner>` 와 같은 짜임이다.
   inner 가 figure 전체이므로 사진과 라벨바가 «함께» 기운다. */
.fs-p-58 .fs-jr-feat__photo { justify-self: center; width: 100%; max-width: 380px; }
@media (min-width: 1024px) { .fs-p-58 .fs-jr-feat__photo { justify-self: end; } }
.fs-p-58 .fs-jr-feat__card  { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.fs-p-58 .fs-jr-feat__photo .fs-doctor__frame { display: block; overflow: hidden; }
.fs-p-58 .fs-jr-feat__photo img { display: block; width: 100%; height: auto; }

/* --- A05 · 약속 인용 블록 ------------------------------------------------ */
/* .fs-en(--fs-t-en 33→47px 몬세라트 대문자)은 «about INTERIOR 대형 라틴»용이라
   킥커에 쓰면 바로 아래 h2(40px)보다 커져 위계가 뒤집힌다. LOCK 8 (f) 도
   「33px 이상 라틴 대문자는 몬세라트 금지」다. 정본 라틴 킥커로 되돌린다. */
.fs-p-58 .fs-jr-promise__kicker { color: var(--fs-teal-dk); letter-spacing: 0.14em; font-weight: 700; }
.fs-p-58 .fs-jr-promise {
  display: grid; gap: var(--fs-sp-4);
  margin-block-start: var(--fs-gap-title);
  padding-block: var(--fs-sp-7);
  border-block: 2px solid var(--fs-teal);
}
.fs-p-58 .fs-jr-promise__item {
  display: grid; gap: var(--fs-sp-1) var(--fs-sp-5);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
}
.fs-p-58 .fs-jr-promise__key {
  font-size: var(--fs-t-lead); font-weight: 700; color: var(--fs-teal-dk);
}
.fs-p-58 .fs-jr-promise__txt { font-size: var(--fs-t-lead); line-height: 1.5; }
.fs-p-58 .fs-jr-promise__note {
  margin-block-start: var(--fs-sp-6);
  font-size: var(--fs-t-sm); color: var(--fs-muted); text-align: center;
}
.fs-p-58 .fs-jr-contact__btns { margin-block-start: var(--fs-sp-6); }

/* --- 모션 무효화 -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-58 .fs-jr-cut__tab,
  .fs-p-58 .fs-jr-cut__line,
  .fs-p-58 .fs-jr-cut__mark,
  .fs-p-58 .fs-jr-cut__flag { transition: none !important; }
}

/* ==========================================================================
   ▼ 진단·수정 패스 — 2026-08-28
   근거는 _design/QA/58.md. 위 본문 규칙을 직접 고친 것 5건은 그 자리에 주석을 달았고,
   여기는 «새로 얹은 것» 만 모았다.
   ========================================================================== */

/* --- V70 [D] 인접 섹션의 축 반전 -----------------------------------------
   v70fit 검출 `D:S4+S5 둘 다 Ll` — 수술대상(S4)과 POINT 캐러셀(S5)이 잇달아
   「도해 왼쪽 / 글 오른쪽」이었다. 앞뒤 섹션의 무게중심은 수술정보(표 오른쪽) →
   수술대상(모델 왼쪽) → POINT → 특징(사진 오른쪽) 순이므로, POINT 를 뒤집으면
   L → R → L → (다크 밴드) → R 로 어느 이웃과도 같은 쪽이 겹치지 않는다.
   PC 가로에서만 뒤집는다. 모바일 세로 스택은 도해가 먼저 오는 지금 순서가 맞다.
   ★ DOM 을 실제로 맞바꾸면 textdiff 가 「문구는 동일, 순서만 다름」으로 WARN 을 낸다.
     R1 게이트는 PASS 여야 하므로 48 과 같이 order 로만 뒤집는다(48.css 의
     .fs-lef-aegyo__fig{order:2} 와 같은 처방). data-fs-reveal 방향도 맞춰 뒤집었다. */
@media (min-width: 1024px) {
  .fs-p-58 .fs-jr-point__slide { grid-template-columns: minmax(0, 560fr) minmax(0, 780fr); }
  .fs-p-58 .fs-jr-point__figs  { order: 2; }
  .fs-p-58 .fs-jr-point__text  { order: 1; }
}

/* --- 마이크로 인터랙션 1 · 섹션 제목 뒤 70px 틸 선 -----------------------
   48 에서 검증된 처방. ★ 「.is-in 이면 보이기」로 짜면 안 된다 — fs.js 는 첫 화면
   안에 있던 대상에 .fs-reveal 자체를 붙이지 않아 그 선이 영원히 안 그어진다.
   기본을 「그어진 상태」로 두고, 실제 리빌 대상에만 초기 은닉을 건다.
   .fs-jr-about 은 제외한다 — h2 바로 아래가 .fs-mark 가 든 인용문이라
   제목과 인용문을 묶어 읽어야 하는 자리에 선이 끼어든다. */
.fs-p-58 .fs-jr-spec .fs-nose-head h2,
.fs-p-58 .fs-jr-target .fs-nose-head h2,
.fs-p-58 .fs-jr-feat-sec .fs-nose-head h2,
.fs-p-58 .fs-jr-point .fs-sec-head__title,
.fs-p-58 .fs-jr-promise-sec .fs-center h2 { position: relative; }

.fs-p-58 .fs-jr-spec .fs-nose-head h2::after,
.fs-p-58 .fs-jr-target .fs-nose-head h2::after,
.fs-p-58 .fs-jr-feat-sec .fs-nose-head h2::after,
.fs-p-58 .fs-jr-point .fs-sec-head__title::after,
.fs-p-58 .fs-jr-promise-sec .fs-center 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;
}
/* 가운데정렬 제목은 선도 가운데에서 자란다 */
.fs-p-58 .fs-jr-promise-sec .fs-center h2::after {
  margin-inline: auto;
  transform-origin: center;
}
:root.fs-js .fs-p-58 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-58 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --- 마이크로 인터랙션 2 · 프레임 고정 + 사진만 확대 ----------------------
   .fs-doctor__frame 이 overflow:hidden 이므로 프레임은 그대로 있고 사진만 커진다.
   그림자는 쓰지 않는다. 인물컷 3장에만 건다 — 해부 도해에 걸면 호버 때
   도해가 잘려 「재크롭」이 된다. */
.fs-p-58 .fs-jr-about__photo img,
.fs-p-58 .fs-jr-target__model img,
.fs-p-58 .fs-jr-feat__photo img { transition: transform var(--fs-dur-slow) var(--fs-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .fs-p-58 .fs-jr-about__photo:hover img,
  .fs-p-58 .fs-jr-target__model:hover img,
  .fs-p-58 .fs-jr-feat__photo:hover img { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  .fs-p-58 .fs-jr-spec .fs-nose-head h2::after,
  .fs-p-58 .fs-jr-target .fs-nose-head h2::after,
  .fs-p-58 .fs-jr-feat-sec .fs-nose-head h2::after,
  .fs-p-58 .fs-jr-point .fs-sec-head__title::after,
  .fs-p-58 .fs-jr-promise-sec .fs-center h2::after { transition: none !important; transform: scaleX(1) !important; }
  .fs-p-58 .fs-jr-about__photo img,
  .fs-p-58 .fs-jr-target__model img,
  .fs-p-58 .fs-jr-feat__photo img { transition: none !important; }
  .fs-p-58 .fs-jr-about__photo:hover img,
  .fs-p-58 .fs-jr-target__model:hover img,
  .fs-p-58 .fs-jr-feat__photo:hover img { transform: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 윤곽성형 = 아이보리 #F1EADC (fs.css «카테고리 틴트» 블록 + body.fs-cat-contour)
   공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개(연한색 #FBF9F4)·글자 후광을 정한다. 여기서는 사진에 맞춘 «위치» 만.
   사진: i2i «인물·프레이밍 그대로, 왼쪽 #F1EADC → 모델 뒤 연한 민트 #DFF1E8 글로우(61 의 원래 배경 계열, 승인자 지시),
   gradually … wide feathered falloff, no split» → hero-model-duo(-mo).jpg (모바일은 데스크톱 결과의 크롭). 모델 오른쪽 → 왼→오 스크림(0 @56%). 킥커는 이미 teal-dk. 다음 섹션 #about 흰색(LOCK 4 OK).
   ========================================================================== */
.fs-p-58 .fs-jr-hero .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--fs-cat), .92) 0%, rgba(var(--fs-cat), .90) 26%, rgba(var(--fs-cat), .50) 44%, rgba(var(--fs-cat), 0) 56%);
}
@media (max-width: 1023px) {
  .fs-p-58 .fs-jr-hero .fs-hero__bg::after { content: none; }
  .fs-p-58 .fs-jr-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}

/* ==========================================================================
   ▼▼▼ 2026-09-17 · 승인자 「이 히어로도 규정(81 코재수술 포맷)에 맞게」 — 영문 시술명 킥커 → 한글 시술명 제목 → 줄 → 리드(기존 한국어 문구).
   값은 81.css 1절: 킥커 21/500/.02em · 제목 58/700/1.22 · 요소 간격 10px · 줄 아래 8px · 리드 20/1.5/#111. 사진·위치·스크림은 그대로.
   ========================================================================== */
.fs-p-58 .fs-jr-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-58 .fs-jr-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-58 .fs-jr-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-58 .fs-jr-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-58 .fs-jr-hero .fs-jr-hero__sub { max-width: 34em; font-size: var(--fs-t-lead); font-weight: 400; line-height: 1.5; color: var(--fs-ink); }

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-58-1022-mo · 실측 _design/momeasure.py 360/390/540/768/1024/1440/1920.
   · 히어로 §1-8 20/30/60 — <1024 스택 블록 제자리 수정(페이드 48 → 60).
   · balance(전 폭): 정의·POINT 본문 · 수술정보 리드 · 약속 5줄 · 주소 — 360 외톨이 「드립니다.」「수 있습니다.」「것입니다.」「퇴원합니다.」「합니다.」「8층」.
   · 수술대상 라벨바 3곳 「보이는&nbsp;경우」「발달된&nbsp;경우」 — 360 에서 「경우」 혼자 셋째 줄로 떨어졌다(줄 수 동일, PC 는 두 줄 그대로).
   ========================================================================== */
.fs-p-58 .fs-body,
.fs-p-58 .fs-nose-lead,
.fs-p-58 .fs-jr-promise__txt,
.fs-p-58 .fs-address { text-wrap: balance; }