/* ==========================================================================
   60 · 광대축소술 (slug: cheekbone-reduction) — 페이지 전용 CSS
   모든 셀렉터는 .fs-p-60 스코프. 색은 --fs-* 토큰만 사용.
   예외 2개 — 히어로 에셋 상단색(PC #EBEDE8 · 모바일 #F3F2ED). 토큰에 없는 사진
   실측값이라 143·146·61·59 정본과 같은 방식으로 직접 쓴다. 그 밖의 새 hex 0개.

     .fs-cheek-hero     1mm 계열 투명 헤더 오버레이 + 풀블리드 모델 히어로
                        (<1024px 는 카피 밴드 위 / 세로 사진 아래로 스택)
     .fs-cheek-def      '광대축소술이란?' 3키워드 칩 (아이콘 + 라벨바)
     .fs-cheek-spec     수술정보 6칸 (아이콘 + 항목 + 값)
     .fs-cheek-who      수술대상 (좌 모델 누끼 / 우 4룰카드 + 아이콘)
     .fs-cheek-op       수술방법 4스텝 원형 도해 시퀀스 (커넥터 화살표는 CSS)
     .fs-cheek-fm       「왜 포시즌의 광대축소술일까?」 — 글/사진 2단 + A+B+C 등식 행
     .fs-cheek-gauge    ★ 시그니처 — 3각도 얼굴 폭 게이지
     .fs-cheek-feat     다크 밴드 특징 4원
     .fs-cheek-promise  다크 밴드 약속 블록
   ========================================================================== */

/* --- A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ---------------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 히어로 상단이 전 폭
   아이보리~연세이지라 흰 글자가 아니라 «잉크 글자» 를 쓴다(밝은 변형).
   구조는 143·146·61·59 정본과 같고 스코프만 .fs-p-60 이다. */
.fs-p-60 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-60 .fs-page--overlay { background: #EBEDE8; }
.fs-p-60 .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-60 .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%); }
.fs-p-60 .fs-gnb__link:not([aria-current="page"]) { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-60 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-60 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
/* --fs-muted-2(#7D7D7D)는 밝은 히어로 위에서 AA 미달이다 */
.fs-p-60 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); opacity: 1; }
.fs-p-60 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-60 .fs-util__sep { opacity: .35; }
/* fs.css:3002 의 «호버 시 흰 글자» 도 다크 히어로 전제다 — 밝은 헤더에선 사라진다 */
.fs-p-60 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }

/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다(57 은 .fs-nose-hero 로 해결). */
.fs-p-60 .fs-cheek-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 에셋 정수리가 25.0%(1072 중 268px). 29% 로 내려 잘라야 1920 에서 머리끝이 y≈176 으로
   올라와 형제 정본 143(≈178)·81(≈176)과 맞는다. 1326px 미만은 세로가 딱 맞아 무효다. */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=271 라 29% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-60 .fs-cheek-hero .fs-hero__bg img { object-position: 50% 51%; }

.fs-p-60 .fs-cheek-hero { background: #EBEDE8; color: var(--fs-ink); }
.fs-p-60 .fs-cheek-hero__copy { max-width: min(100%, 46vw); gap: var(--fs-sp-4); }
.fs-p-60 .fs-cheek-hero .fs-hero__kicker {
  color: var(--fs-teal-dk);
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em;
  font-weight: 600;
}
.fs-p-60 .fs-cheek-hero .fs-hero__title {
  color: var(--fs-ink);
  font-size: clamp(28px, 20.6px + 2.05vw, 52px);
  font-weight: 700;
  line-height: 1.28;
}
.fs-p-60 .fs-cheek-hero__rule {
  display: block;
  width: clamp(56px, 47.7px + 2.3vw, 92px);
  height: 3px;
  background: var(--fs-teal-dk);
}
.fs-p-60 .fs-cheek-hero__sub { color: var(--fs-teal-dk); font-weight: 600; }

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

/* --- A05 · 광대축소술이란? 3키워드 칩 ------------------------------------ */
.fs-p-60 .fs-cheek-def {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-60 .fs-cheek-def__fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  background: var(--fs-cream-2);
}
.fs-p-60 .fs-cheek-def__fig img {
  display: block;
  justify-self: center; align-self: center;
  width: clamp(92px, 76.4px + 1.73vw, 130px); height: auto;
  padding-block: clamp(22px, 16.5px + 0.61vw, 34px);
}
@media (min-width: 600px) {
  .fs-p-60 .fs-cheek-def { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- A21 · 수술정보 6칸 -------------------------------------------------- */
.fs-p-60 .fs-cheek-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: var(--fs-gap-title);
  background: var(--fs-line);
  border: 1px solid var(--fs-line);
}
.fs-p-60 .fs-cheek-spec__item {
  display: grid; justify-items: center; align-content: start;
  gap: var(--fs-sp-2);
  padding: clamp(20px, 15.4px + 0.51vw, 28px) var(--fs-sp-3);
  background: var(--fs-white);
  text-align: center;
}
.fs-p-60 .fs-cheek-spec__item img {
  display: block;
  width: clamp(38px, 33.4px + 0.51vw, 46px); height: auto;
  margin-block-end: var(--fs-sp-2);
}
.fs-p-60 .fs-cheek-spec__key {
  display: grid; justify-items: center; gap: var(--fs-sp-1);
  font-size: var(--fs-t-sm); color: var(--fs-muted);
}
.fs-p-60 .fs-cheek-spec__val { font-size: var(--fs-t-lead); font-weight: 700; color: var(--fs-ink); }
@media (min-width: 600px)  { .fs-p-60 .fs-cheek-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-60 .fs-cheek-spec { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* --- A23 · 수술대상 ------------------------------------------------------ */
.fs-p-60 .fs-cheek-who__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-sp-8);
  align-items: center;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-60 .fs-cheek-who__photo { justify-self: center; width: min(100%, 360px); }
.fs-p-60 .fs-cheek-who__photo img { display: block; width: 100%; height: auto; }
.fs-p-60 .fs-cheek-who__list { display: grid; gap: var(--fs-sp-5); }
.fs-p-60 .fs-cheek-who__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--fs-sp-5);
  padding: clamp(16px, 12.9px + 0.35vw, 22px) clamp(16px, 9.1px + 0.77vw, 28px);
  background: var(--fs-cream);
  border-inline-start: 2px solid var(--fs-teal);
}
.fs-p-60 .fs-cheek-who__card img {
  display: block;
  width: clamp(48px, 42.5px + 0.61vw, 58px); height: auto;
}
.fs-p-60 .fs-cheek-who__card > span { display: grid; gap: 2px; }
.fs-p-60 .fs-cheek-who__num {
  font-size: clamp(20px, 18.8px + 0.32vw, 25px); font-weight: 700;
  color: var(--fs-teal-dk); line-height: 1.2;
}
.fs-p-60 .fs-cheek-who__txt { font-size: var(--fs-t-lead); line-height: 1.45; color: var(--fs-ink); }
.fs-p-60 .fs-cheek-who__txt strong { font-weight: 700; }
@media (min-width: 1024px) {
  .fs-p-60 .fs-cheek-who__grid { grid-template-columns: minmax(0, 430fr) minmax(0, 900fr); gap: var(--fs-sp-12); }
  .fs-p-60 .fs-cheek-who__photo { justify-self: start; width: 100%; }
}

/* --- A12 · 수술방법 4스텝 ------------------------------------------------ */
.fs-p-60 .fs-cheek-op {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 30.8px + 1.02vw, 58px);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-60 .fs-cheek-op__item { position: relative; display: grid; gap: var(--fs-sp-5); align-content: start; }
.fs-p-60 .fs-cheek-op__fig { display: grid; gap: 0; }
.fs-p-60 .fs-cheek-op__disc {
  display: block;
  width: min(100%, 300px); aspect-ratio: 1;
  justify-self: center;
  margin-block-end: clamp(14px, 10.9px + 0.35vw, 20px);
  background: var(--fs-cream-2);
  border-radius: var(--fs-radius-round);
}
.fs-p-60 .fs-cheek-op__disc img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fs-p-60 .fs-cheek-op__txt {
  font-size: var(--fs-t-lead); line-height: 1.5; text-align: center; color: var(--fs-ink);
}
/* 스텝 사이 커넥터 화살표 — 모바일 아래방향 / PC 오른쪽방향 */
.fs-p-60 .fs-cheek-op__item + .fs-cheek-op__item::before {
  content: "";
  position: absolute;
  inset-block-start: clamp(-30px, -22.7px - 0.81vw, -22px);
  inset-inline-start: 50%;
  width: 13px; height: 13px;
  border-block-start: 2px solid var(--fs-teal);
  border-inline-end: 2px solid var(--fs-teal);
  transform: translate(-50%, -50%) rotate(135deg);
}
@media (min-width: 1024px) {
  .fs-p-60 .fs-cheek-op { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(30px, 2.6vw, 48px); }
  .fs-p-60 .fs-cheek-op__item + .fs-cheek-op__item::before {
    inset-block-start: clamp(90px, 6.5vw, 132px);
    inset-inline-start: calc(-1 * clamp(15px, 1.3vw, 24px));
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

/* --- A11 · 「왜 포시즌의 광대축소술일까?」 -------------------------------
   옛 구성은 좌측 400px 글 열 «안에» 수술실 사진이 매달리고, 본문 문단이 카드판과
   게이지판 사이에 가운데로 떠 있었다 — 글이 세 군데로 흩어지고 사진은 제 자리가
   없었다. 글을 한 열로 모으고 사진에 열을 주고, 카드 3장은 리드 문장이 말하는
   그대로 «A + B + C» 등식 한 줄로 편다. */
.fs-p-60 .fs-cheek-fm { background: var(--fs-white); }
.fs-p-60 .fs-cheek-fm__head {
  display: grid;
  gap: var(--fs-sp-8);
  margin-block-start: var(--fs-gap-title);
  align-items: center;
}
@media (min-width: 900px) {
  .fs-p-60 .fs-cheek-fm__head {
    grid-template-columns: minmax(0, 560fr) minmax(0, 780fr);
    gap: clamp(32px, 12.6px + 2.02vw, 64px);
  }
}
.fs-p-60 .fs-cheek-fm__lead { margin-block-start: var(--fs-sp-6); }
.fs-p-60 .fs-cheek-fm__body {
  margin-block-start: var(--fs-sp-6);
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-loose);
  color: var(--fs-ink-soft);
}
.fs-p-60 .fs-cheek-fm__photo img { display: block; width: 100%; height: auto; }
.fs-p-60 .fs-cheek-fm__card { background: var(--fs-cream-2); }
.fs-p-60 .fs-cheek-fm__ill { width: clamp(150px, 120px + 8.33vw, 230px); }

/* 등식 행 — + 를 카드 사이 간격 한가운데에 놓는다. 배지를 «오른쪽 카드의 왼쪽 변»에
   앵커하므로 열 폭이 어떻게 변해도 어긋나지 않는다(58 .fs-jr-orbit 과 같은 방식이고
   subgrid 로 열을 손으로 박을 필요가 없다). 세로는 카드 절반이 아니라 «도해 영역»
   가운데다 — 카드 아래에 라벨바가 붙어 있으므로 그 절반만큼 올려 준다. */
.fs-p-60 .fs-cheek-fm__eq {
  --fs-eq-gap: clamp(30px, 13.7px + 1.7vw, 62px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fs-eq-gap);
  align-items: stretch;
  margin-block-start: clamp(40px, 27.7px + 1.28vw, 64px);
}
.fs-p-60 .fs-cheek-fm__eq > li { position: relative; }
.fs-p-60 .fs-cheek-fm__eq > li + li::before {
  content: "+";
  position: absolute;
  inset-inline-start: calc(-1 * var(--fs-eq-gap) / 2);
  top: calc(50% - clamp(28px, 26.5px + 0.449vw, 50px) / 2);
  transform: translate(-50%, -50%);
  font-size: clamp(22px, 14.6px + 0.77vw, 34px);
  font-weight: 400;
  line-height: 1;
  color: var(--fs-teal-dk);
}

/* --- ★ 시그니처 · 3각도 얼굴 폭 게이지 ----------------------------------- */
.fs-p-60 .fs-cheek-gauge {
  max-width: 1120px;
  margin-block-start: clamp(48px, 35.7px + 1.37vw, 72px);
  margin-inline: auto;
  padding: clamp(24px, 15.8px + 0.91vw, 40px) clamp(16px, 4.9px + 1.23vw, 38px) clamp(20px, 13.2px + 0.76vw, 33px);
  background: var(--fs-cream);
}
.fs-p-60 .fs-cheek-gauge__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 0.9px + 0.79vw, 20px);
  align-items: end;
}
.fs-p-60 .fs-cheek-gauge__plot { display: grid; justify-items: center; }
.fs-p-60 .fs-cheek-gauge__plot img {
  display: block;
  width: clamp(90px, 64.6px + 7.05vw, 200px); height: auto;
}
.fs-p-60 .fs-cheek-gauge__axis {
  height: 2px;
  margin-block-start: -1px;
  background: var(--fs-teal);
}
.fs-p-60 .fs-cheek-gauge__labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 0.9px + 0.79vw, 20px);
  margin-block-start: var(--fs-sp-3);
}
.fs-p-60 .fs-cheek-gauge__note {
  margin-block-start: clamp(16px, 12.9px + 0.35vw, 22px);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
  color: var(--fs-muted); text-align: center;
}

/* --- A09 · 다크 밴드 (특징 4원 + 약속) ---------------------------------- */
.fs-p-60 .fs-cheek-band .fs-section__bg img { opacity: 0.34; }
.fs-p-60 .fs-cheek-feat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 6.9px + 0.79vw, 28px);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-60 .fs-cheek-feat > li { display: grid; justify-items: center; }
.fs-p-60 .fs-cheek-feat__disc {
  display: grid; justify-items: center; align-content: center;
  gap: var(--fs-sp-2);
  width: min(100%, 268px); aspect-ratio: 1;
  padding: var(--fs-sp-4);
  border-radius: var(--fs-radius-round);
  background: var(--fs-white);
  text-align: center;
}
.fs-p-60 .fs-cheek-feat__num {
  font-size: clamp(18px, 16.8px + 0.32vw, 23px); font-weight: 700;
  font-style: italic; color: var(--fs-teal-dk); line-height: 1;
}
.fs-p-60 .fs-cheek-feat__disc img {
  display: block;
  width: clamp(44px, 42px + 1.6vw, 72px); height: auto;
}
.fs-p-60 .fs-cheek-feat__txt {
  font-size: clamp(13px, 11.2px + 0.51vw, 21px); line-height: 1.4;
  font-weight: 500; color: var(--fs-ink);
}
@media (min-width: 1024px) {
  .fs-p-60 .fs-cheek-feat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fs-p-60 .fs-cheek-promise {
  margin-block-start: clamp(52px, 36.6px + 1.71vw, 90px);
  align-items: center;
}
.fs-p-60 .fs-cheek-promise__photo img { display: block; width: 100%; height: auto; }
.fs-p-60 .fs-cheek-promise__kicker { color: var(--fs-on-dark); letter-spacing: var(--fs-ls-wide); }
.fs-p-60 .fs-cheek-promise__list {
  display: grid; gap: var(--fs-sp-3);
  margin-block-start: var(--fs-sp-6);
}
.fs-p-60 .fs-cheek-promise__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-4);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
}
.fs-p-60 .fs-cheek-promise__ord { font-weight: 700; color: var(--fs-on-dark); white-space: nowrap; }
.fs-p-60 .fs-cheek-promise__note {
  margin-block-start: clamp(34px, 26.7px + 0.81vw, 52px);
  padding: var(--fs-sp-4) var(--fs-sp-5);
  border-block-start: 1px solid var(--fs-teal);
  font-size: var(--fs-t-sm); line-height: var(--fs-lh-body);
  text-align: center;
}

/* --- 모션 무효화 (레이아웃 동일 보장) ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-60 .fs-cheek-op__item,
  .fs-p-60 .fs-cheek-feat__disc,
  .fs-p-60 .fs-cheek-gauge__plot { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   렌더 실측으로 확인한 결함 3건 + 48 에서 검증된 마이크로 인터랙션 2건.
   구조(V70)는 손대지 않는다 — 적합도 0 · 구조 신호 0.
   ========================================================================== */

/* --- [결함 1] 다크 밴드 고스트가 또렷하다 --------------------------------
   band-ghost.jpg 는 헤드램프를 쓴 집도의가 그대로 읽혀서 대제목
   「포시즌 광대축소술 특징」 뒤에 «반쯤 가려진 두 번째 얼굴» 이 생기고
   흰 원 4개가 그 얼굴을 잘라 놓는다. 확정 시안 57 의 compare-bg.jpg 는
   애초에 흐리게 구워진 판이다.
   이 에셋은 19개 페이지 공유물이라 손대지 않고 이 페이지에서만 흐린다
   (50·127 과 같은 처방). 블러가 가장자리를 투명하게 만들므로 상자보다
   크게 잡아 밖으로 밀고, 크기는 width/height/margin 으로만 준다 —
   transform 을 쓰면 fs.js 의 패럴랙스가 죽는다. */
.fs-p-60 .fs-cheek-band .fs-section__bg img {
  display: block;
  max-width: none;              /* fs.css 의 img{max-width:100%} 가 폭 보정을 먹는다 */
  width: calc(100% + 140px);
  height: calc(100% + 140px);
  margin: -70px;
  filter: blur(20px);
}

/* --- [결함 2] 공식 카드 3열이 360 에서 100px 로 짜부라진다 ----------------
   360 실측 카드폭 100px — 라벨바가 「앞광대 입체 / 볼륨」처럼 두 글자씩
   쪼개지고, .fs-cheek-fm__ill 이 선언한 최소 150px 도 fs.css 의
   img{max-width:100%} 에 눌려 100px 로 죽는다.
   600 이상은 174px 이상이라 한 줄에 들어가므로 600 미만만 세로 스택으로
   되돌린다(46·64·81·131 과 같은 처방). */
@media (max-width: 599px) {
  .fs-p-60 .fs-cheek-fm__eq { grid-template-columns: minmax(0, 1fr); }
  .fs-p-60 .fs-cheek-fm__ill { width: min(60%, 230px); }
  /* 세로로 쌓이면 «다음 형제» 인 + 가 카드 왼쪽 허공에 매달린다 */
  .fs-p-60 .fs-cheek-fm__eq > li + li::before { content: none; }
}

/* --- [모션 1] 섹션 제목 뒤 70px 틸 선 (48 검증분) ------------------------
   가운데정렬 제목(#about-title · #feature-title · #cta-title)에는 걸지 않는다 —
   가운데 제목 아래 왼쪽에 매달린 선은 축이 어긋나 보인다. */
.fs-p-60 .fs-nose-head h2,
.fs-p-60 .fs-cheek-fm__intro h2 { position: relative; }

.fs-p-60 .fs-nose-head h2::after,
.fs-p-60 .fs-cheek-fm__intro 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;
}

/* ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 안 된다 — fs.js 는 첫 화면 안에
   있던 대상에 .fs-reveal 클래스 자체를 붙이지 않아 그 제목의 선은 영원히
   안 그어진다. 기본을 「그어진 상태」로 두고 실제 리빌 대상에만 은닉을 건다.
   :where() 로 감싸 특정성을 0 으로 낮추지 않는다 — 여기 대상엔 ID 선택자로
   덮인 ::after 가 없고, 오히려 위 기본 규칙을 이겨야 한다. */
:root.fs-js .fs-p-60 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-60 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --- [모션 2] 호버 — 프레임은 고정, 사진만 움직인다 (48 검증분) ----------
   그림자는 쓰지 않는다(2차 규칙). 누끼 PNG(.fs-cheek-who__photo)와 이미
   틸트가 걸린 히어로 타일·공식 카드에는 걸지 않는다. */
/* .fs-cheek-op__disc 는 원형 프레임 자체가 확대를 잡아 줘야 한다 —
   overflow 가 visible 이면 사진만 원 밖으로 자라 프레임이 따라 커진 것처럼
   읽힌다. (에셋 op-01~04 는 이미 투명 원형 컷아웃이라 정지 상태에서는
   삐져나오는 것이 없다 — 이 선언은 순전히 호버용이다.) */
.fs-p-60 .fs-cheek-op__disc,
.fs-p-60 .fs-cheek-fm__photo,
.fs-p-60 .fs-cheek-promise__photo { overflow: hidden; }

.fs-p-60 .fs-cheek-op__disc img,
.fs-p-60 .fs-cheek-fm__photo img,
.fs-p-60 .fs-cheek-promise__photo img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-60 .fs-cheek-op__item:hover .fs-cheek-op__disc img,
  .fs-p-60 .fs-cheek-fm__photo:hover img,
  .fs-p-60 .fs-cheek-promise__photo:hover img { transform: scale(1.045); }

  /* 라벨바는 사진과 함께 커지면 안 된다 — 글자가 흔들린다. 대신 색만 한 단계 */
  .fs-p-60 .fs-cheek-op__item:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --- reduced-motion — 위에서 새로 만든 전이를 전부 정지 상태로 확정 ------ */
@media (prefers-reduced-motion: reduce) {
  .fs-p-60 .fs-nose-head h2::after,
  .fs-p-60 .fs-cheek-fm__intro h2::after {
    transform: scaleX(1) !important; transition: none !important;
  }
  .fs-p-60 .fs-cheek-op__disc img,
  .fs-p-60 .fs-cheek-fm__photo img,
  .fs-p-60 .fs-cheek-promise__photo img {
    transform: none !important; transition: 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-full-duo(-mo).jpg (모바일은 데스크톱 결과의 크롭). 모델 오른쪽 → 왼→오 스크림(0 @58%). 킥커는 이미 teal-dk. 다음 섹션 #about 흰색(LOCK 4 OK).
   ========================================================================== */
.fs-p-60 .fs-cheek-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) 27%, rgba(var(--fs-cat), .50) 45%, rgba(var(--fs-cat), 0) 58%);
}
@media (max-width: 1023px) {
  .fs-p-60 .fs-cheek-hero .fs-hero__bg::after { content: none; }
  .fs-p-60 .fs-cheek-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}
/* 2026-09-14 승인자 「광대뼈 모델 위치도 허브·이중턱·T절골·사각턱과 같게」 — 얼굴 중심(피부 실측, 1920): 59 63.5 · 141 65.4 · 61 69.2 · 58 70.2vw(평균 67.1),
   60 은 74.0vw 로 가장 오른쪽. cover 풀블리드는 폭 주도라 object-position 으로는 못 옮긴다 → 상자를 같은 폭 그대로 6.9vw 왼쪽으로(배율 불변).
   드러나는 오른쪽 띠(6.9vw)는 히어로 틴트, 사진 오른변 12% 는 마스크로 녹인다(모델 오른끝 84% → 안 걸린다). */
@media (min-width: 1024px) {
  .fs-p-60 .fs-cheek-hero .fs-hero__bg { inset-inline-start: -6.9vw; inset-inline-end: 6.9vw; }
  .fs-p-60 .fs-cheek-hero .fs-hero__bg img {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }
}

/* ==========================================================================
   ▼▼▼ 2026-09-17 · 승인자 「이 히어로도 규정(81 코재수술 포맷)에 맞게」 — 영문 시술명 킥커 → 한글 시술명 제목 → 줄 → 리드(기존 한국어 문구).
   값은 81.css 1절: 킥커 21/500/.02em · 제목 58/700/1.22 · 요소 간격 10px · 줄 아래 8px · 리드 20/1.5/#111. 사진·위치·스크림은 그대로.
   ========================================================================== */
.fs-p-60 .fs-cheek-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-60 .fs-cheek-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-60 .fs-cheek-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-60 .fs-cheek-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-60 .fs-cheek-hero .fs-cheek-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/767px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-60-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 정의 리드 <br> 문장 블록 1곳(390·768 「볼 / 수 있으며」) + 스텝 설명 4곳(두 구 설계를 블록으로 — 행 칸에서 구마다 balance). balance: 특징 본문 · 게이지 주석 · 약속 문장 · 주의문.
   · 수술방법 4스텝 <1024: 1열 «원형 도해 + 라벨바 + 설명» 세로(장당 ≈450px, 600~1023 도 1열) → §2 B «도해+라벨바 좌 · 설명 우» 행.
     스텝 사이 ↓ 커넥터는 도해 열 가운데로 옮긴다. ≥1024 4열·→ 커넥터 무변경.
   ========================================================================== */
.fs-p-60 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-60 .fs-cheek-fm__body,
.fs-p-60 .fs-cheek-gauge__note,
.fs-p-60 .fs-cheek-promise__row > span:last-child,
.fs-p-60 .fs-cheek-promise__note { text-wrap: balance; }
@media (max-width: 1023px) {
  .fs-p-60 .fs-cheek-op { gap: var(--fs-sp-9); }
  .fs-p-60 .fs-cheek-op__item {
    grid-template-columns: min(42%, 300px) minmax(0, 1fr);
    column-gap: var(--fs-sp-5);
    align-items: center;
  }
  .fs-p-60 .fs-cheek-op__txt { text-align: start; font-size: var(--fs-t-body); }   /* §2 H — 186px 칸에서 lead 크기면 「연부조직을 앞 / 광대쪽으로 이동,」 4줄 */
  .fs-p-60 .fs-cheek-op__item + .fs-cheek-op__item::before {
    inset-block-start: calc(var(--fs-sp-9) / -2);
    inset-inline-start: calc(min(42%, 300px) / 2);
  }
}
