/* ==========================================================================
   [62] 리프팅 (카테고리 랜딩) 전용 CSS
   · 모든 셀렉터는 .fs-p-62 스코프 안에만 둔다.
   · 색은 전부 var(--fs-*) 토큰. 새 hex 0개.
   · 전용 컴포넌트 5종
       .fs-lifting-hero      풀블리드 --tall 히어로(밝은 모델컷 → 잉크 카피)
       .fs-lifting-cause     노화의 원인 3카드 (아이콘 + 라벨바 + 원문)
       .fs-lifting-aging     조직별 노화 3×3 매트릭스 ★
       .fs-lifting-spectrum  레이저→실→거상술 강도 스펙트럼 바 ★ 시그니처
       .fs-lifting-menu      리프팅 6개 시술 패널 카드 (A18 치수 조정)
   ========================================================================== */

/* --- 셸 · 1. 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 -------------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 이 페이지 히어로 상단은
   전 폭이 샴페인 골드(#E4CDA8)라 흰 글자(1.9:1)가 아니라 «잉크 글자»(12:1)를 쓴다.
   모델 머리는 사진 높이의 37.3% 아래에서 시작하므로 헤더 띠(최대 16%)에 안 걸린다.
   ------------------------------------------------------------------------- */
.fs-p-62 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-62 .fs-page--overlay { background: #E4CDA8; }
.fs-p-62 .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-62 .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%); }
/* :not() 로 감싼다 — fs.css:495 의 [aria-current] 700 과 특정성이 같아
   «이 페이지가 곧 대분류» 일 때 굵게 표시가 조용히 죽는다 (2026-09-10 카테고리 재편) */
.fs-p-62 .fs-gnb__link:not([aria-current="page"]) { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-62 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-62 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-62 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-62 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-62 .fs-util__sep { opacity: .35; }

.fs-p-62 .fs-lifting-hero { background: #E4CDA8; }
.fs-p-62 .fs-lifting-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치 — 위 고정이면 모델이 박스 아래쪽으로 내려앉는다 */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=402 라 36% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-62 .fs-lifting-hero .fs-hero__bg img { object-position: 50% 81%; }
.fs-p-62 .fs-lifting-hero .fs-hero__kicker { color: var(--fs-ink-soft); }
.fs-p-62 .fs-lifting-hero .fs-hero__title  { color: var(--fs-ink); }
.fs-p-62 .fs-lifting-hero .fs-hero__copy   { max-width: 34rem; gap: clamp(8px, 6.6px + 0.385vw, 14px); }

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

/* --- 2. 노화의 원인 3카드 ------------------------------------------------ */
.fs-p-62 .fs-lifting-cause {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 768px) {
  .fs-p-62 .fs-lifting-cause { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 틸트 대상은 카드 «전체» 다. inner 를 figure 에 두면 아이콘+라벨바만 4deg 돌고
   번호 필과 본문은 평면에 남아, 광택도 카드의 45% 에만 뜬다. → 내용 전체를 감싼다. */
.fs-p-62 .fs-lifting-cause__card { display: grid; }
.fs-p-62 .fs-lifting-cause__inner {
  display: grid; align-content: start; justify-items: center;
  gap: var(--fs-sp-5);
  padding: var(--fs-sp-6) var(--fs-sp-5) clamp(24px, 20.2px + 1.058vw, 40px);
}
/* [LOCK 2] 바 폭 === 도해 폭. 이전 값은 아이콘 123px 아래 바 427px(3.5배) + 간격 29.5px 라
   「띠 위에 동그라미가 뜬」 모양이었다. 도해를 바 폭까지 키우고(원본 240px 이내라 확대 아님)
   간격을 0 으로 붙인다. */
.fs-p-62 .fs-lifting-cause__fig {
  inline-size: clamp(140px, 126.15px + 3.846vw, 200px);
  display: grid; justify-items: center; overflow: hidden;
}
.fs-p-62 .fs-lifting-cause__icon {
  width: 100%; height: auto;
  margin-block-end: 0;
}
.fs-p-62 .fs-lifting-cause__fig .fs-labelbar { width: 100%; }
.fs-p-62 .fs-lifting-cause__txt { text-align: center; }

/* --- 3. 다크 스테이트먼트 밴드 ------------------------------------------
   .fs-section__bg 는 z-index:0 이라 .fs-split 직계 자식이 배경 사진에 덮인다
   (.fs-section > .fs-container 에만 z-index:1 이 걸려 있다). 여기서 되살린다. */
/* 2026-08-28 — 50:50 하드컷 + 좌측 인셋 여백 구조를 버렸다.
   사진이 밴드 안에서 레터박스처럼 떠 보이고 가운데 이음매가 그대로 읽혔다.
   → 인물을 «우측 끝까지 풀블리드·풀하이트» 로 깔고, 안쪽 모서리만 밴드색으로
     녹여 이음매를 지운다. 카피는 좌측 컨테이너 안에서 세로 가운데. */
.fs-p-62 .fs-lifting-dark {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(420px, 297.7px + 12.74vw, 640px);
}
.fs-p-62 .fs-lifting-dark__photo {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  z-index: 1;                       /* .fs-section__bg(0) 위 · 카피(2) 아래 */
  width: 46%; margin: 0;
}
.fs-p-62 .fs-lifting-dark__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 46% 28%;
}
/* 사진 안쪽(왼쪽) 모서리를 밴드색으로 녹인다 — 세로 하드컷이 사라진다 */
.fs-p-62 .fs-lifting-dark__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    var(--fs-ink-band-2) 0%,
    color-mix(in srgb, var(--fs-ink-band-2) 62%, transparent) 24%,
    transparent 58%);
}
.fs-p-62 .fs-lifting-dark > .fs-container { position: relative; z-index: 2; }
.fs-p-62 .fs-lifting-dark__copy {
  display: grid; gap: var(--fs-sp-5);
  max-width: 40rem;
  padding-block: var(--fs-sp-13);
}
.fs-p-62 .fs-lifting-dark__copy .fs-mega { line-height: 1.15; }
@media (max-width: 1023px) {
  /* 좁은 폭에서는 겹칠 자리가 없다 — 사진을 위에 통째로 깔고 카피를 아래로 */
  .fs-p-62 .fs-lifting-dark { min-height: 0; }
  .fs-p-62 .fs-lifting-dark__photo {
    position: static; width: 100%; aspect-ratio: 4 / 3; grid-row: 1;
  }
  .fs-p-62 .fs-lifting-dark__photo::after {
    background: linear-gradient(180deg, transparent 52%, var(--fs-ink-band-2) 100%);
  }
  .fs-p-62 .fs-lifting-dark > .fs-container { grid-row: 2; }
  .fs-p-62 .fs-lifting-dark__copy { max-width: 100%; padding-block: var(--fs-sp-9) var(--fs-sp-11); }
}

/* --- 4. 조직별 노화 매트릭스 ★ ------------------------------------------
   원본 보드(ce7eb467ffc6f.png) 안 3×3 도해를 낱개로 잘라 세 줄로 다시 세웠다.
   한 줄 = 한 조직, 왼쪽에서 오른쪽으로 노화가 진행된다. */
.fs-p-62 .fs-lifting-aging { display: grid; gap: var(--fs-sp-5); }
.fs-p-62 .fs-lifting-aging__row { display: grid; gap: 0; }
.fs-p-62 .fs-lifting-aging__strip {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(5px, 3.2px + 0.513vw, 13px);
  background: var(--fs-white);
}
.fs-p-62 .fs-lifting-aging__strip img { display: block; width: 100%; height: auto; }
.fs-p-62 .fs-lifting-aging__arrow { border-width: 0; }
.fs-p-62 .fs-lifting-aging__arrow svg { width: 56%; height: 56%; }
.fs-p-62 .fs-lifting-aging__row .fs-labelbar { width: 100%; }
.fs-p-62 .fs-lifting-aging__notes { display: grid; gap: var(--fs-sp-5); margin-block-start: var(--fs-sp-6); }
@media (min-width: 1024px) {
  .fs-p-62 .fs-lifting-aging__notes { grid-auto-rows: 1fr; margin-block-start: 0; }
}
.fs-p-62 .fs-lifting-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: var(--fs-sp-5);
  border-inline-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-6) var(--fs-sp-6);
  background: var(--fs-cream);
}
.fs-p-62 .fs-lifting-note__icon { width: clamp(60px, 53.1px + 1.923vw, 90px); height: auto; }
.fs-p-62 .fs-lifting-note__name { display: block; font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-p-62 .fs-lifting-note__desc { display: block; font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted); }

/* --- 5. 리프팅 타이밍 (2026-08-28 재구성) --------------------------------
   1440x520 파노라마 위에 두 줄 인용만 얹혀 있어 왼쪽 절반이 통째로 비어 보였다.
   → 좌 «인용 + 번호 목록» / 우 «세로 인물» 2단으로 바꿔 무게를 맞춘다. */
/* align-items:stretch — 사진이 카피 열 높이에 맞춰 늘어난다.
   center 로 두면 세로 인물(3:4)이 카피보다 300px 넘게 길어져 좌측이 다시 비어 보인다. */
.fs-p-62 .fs-lifting-timing {
  display: grid; gap: var(--fs-gap-col); align-items: stretch;
}
@media (min-width: 1024px) {
  .fs-p-62 .fs-lifting-timing { grid-template-columns: minmax(0, 780fr) minmax(0, 540fr); }
}
.fs-p-62 .fs-lifting-timing__copy { display: grid; gap: var(--fs-sp-9); align-content: center; }
.fs-p-62 .fs-lifting-timing__quote {
  position: relative;
  padding-block-end: var(--fs-sp-6);
  font-size: clamp(22px, 19.5px + 0.7vw, 33px);
  font-weight: 700;
  line-height: var(--fs-lh-head);
}
.fs-p-62 .fs-lifting-timing__quote::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 70px; height: 3px; background: var(--fs-teal);
}
.fs-p-62 .fs-lifting-timing__list { display: grid; gap: var(--fs-gap-card); }
.fs-p-62 .fs-lifting-timing__item {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center; column-gap: var(--fs-sp-5);
  border-inline-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-7) var(--fs-sp-6);
  background: var(--fs-white);
}
.fs-p-62 .fs-lifting-timing__no {
  font-family: var(--fs-font-en); font-size: var(--fs-t-h3); font-weight: 700;
  letter-spacing: .02em; color: var(--fs-teal-dk);
}
.fs-p-62 .fs-lifting-timing__icon { width: clamp(52px, 46.1px + 1.64vw, 78px); height: auto; }
/* 사진을 «절대 배치» 로 띄운다. width:100% + height:100% 만 주면 img 의 고유
   비율(1000x1333)이 살아 있어 그 700px 가 행 높이를 결정해 버린다 —
   그러면 stretch 를 걸어도 좌측 카피 열만 다시 비어 보인다. */
.fs-p-62 .fs-lifting-timing__fig {
  margin: 0; position: relative; overflow: hidden; min-height: 340px;
}
.fs-p-62 .fs-lifting-timing__fig img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 16%;
}
@media (max-width: 1023px) {
  /* 1열로 떨어지면 늘릴 상대가 없다 — 비율을 직접 준다 */
  .fs-p-62 .fs-lifting-timing__fig { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 599px) {
  .fs-p-62 .fs-lifting-timing__item { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--fs-sp-3); }
  .fs-p-62 .fs-lifting-timing__item .fs-body { grid-column: 1 / -1; }
}

/* --- 6. 리프팅 6개 시술 패널 카드 (A18) ---------------------------------- */
.fs-p-62 .fs-lifting-menu { --fs-panel-w: 79%; --fs-panel-drop: 56px; }
.fs-p-62 .fs-lifting-menu__inner { position: relative; display: block; }
.fs-p-62 .fs-lifting-menu__photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1000 / 543; object-fit: cover;
}
.fs-p-62 .fs-lifting-menu__title { font-size: clamp(18px, 17.5px + 0.128vw, 20px); font-weight: 600; line-height: var(--fs-lh-head); }
.fs-p-62 .fs-lifting-menu__desc  { font-size: clamp(14px, 13.6px + 0.109vw, 15.7px); line-height: var(--fs-lh-body); color: var(--fs-muted); }
@media (min-width: 1024px) { .fs-p-62 .fs-lifting-menu__desc { min-block-size: calc(2 * var(--fs-lh-body) * 1em); } }
.fs-p-62 .fs-lifting-menu .fs-card__panel { gap: var(--fs-sp-2); padding-inline-end: clamp(44px, 40px + 1.1vw, 62px); }
@media (min-width: 1024px) {
  /* 캡션 패널이 사진 아래로 56px 삐져나오므로 행 간격과 하단 여백으로 받아준다 */
  .fs-p-62 .fs-lifting-menu { row-gap: calc(var(--fs-gap-card) + 56px); padding-block-end: 56px; }
}
/* 2026-09-09 · 「리프팅 재수술」이 옮겨와 6장 → 7장이 됐다. 3열·2열 어느 쪽이든
   마지막 한 장이 고아로 남으므로, 트랙을 2배로 쪼개고 카드를 span 2 로 둔 뒤
   홀수로 끝나는 마지막 장만 가운데 칸으로 보낸다(폭 계산은 3열·2열과 동일하다). */
@media (min-width: 600px) {
  .fs-p-62 .fs-lifting-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-p-62 .fs-lifting-menu > li { grid-column: span 2; }
  .fs-p-62 .fs-lifting-menu > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) {
  .fs-p-62 .fs-lifting-menu { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fs-p-62 .fs-lifting-menu > li:last-child:nth-child(odd) { grid-column: 3 / span 2; }
}

/* --- 7. 강도 스펙트럼 바 ★ 시그니처 -------------------------------------
   원본 문장 "레이저부터 실, 거상술까지!" 를 가로 축으로 삼고, 원본이 나열한
   장비·실 6종 + 거상술을 그 위 노드로 세운다. 강도·효과·기간 수치는 붙이지 않는다
   (원본에 없다). 각 노드는 해당 상세 페이지로 가는 링크다. */
.fs-p-62 .fs-lifting-spectrum { margin-block-start: var(--fs-gap-title); }
.fs-p-62 .fs-lifting-spectrum__list {
  position: relative;
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fs-p-62 .fs-lifting-spectrum__node { position: relative; display: grid; }
.fs-p-62 .fs-lifting-spectrum__link {
  display: grid; align-content: start;
  color: inherit; text-decoration: none;
}
.fs-p-62 .fs-lifting-spectrum__fig { display: grid; overflow: hidden; background: var(--fs-white); }
.fs-p-62 .fs-lifting-spectrum__fig img { display: block; width: 100%; height: auto; }
.fs-p-62 .fs-lifting-spectrum__fig .fs-labelbar {
  width: 100%; line-height: 1.25;
  /* [LOCK 2] 바 높이 균일. 7개 라벨 중 「튠페이스 (악센트프라임)」 하나만 2줄로 접혀
     360·600·1024 에서 그 바만 6~7px 아래로 내려와 색면 띠 줄이 어긋났다
     (768·1280·1920 은 한 줄이라 편차 0 — 그래서 눈에 안 띄는 폭이 섞여 있다).
     vibecheck L2 는 라벨바의 margin-top·border-top 만 재므로 이걸 못 본다.
     2줄분(line-height 1.25 × 2 = 2.5em)을 미리 잡아 두되, fs.css 의 min-height
     클램프보다 «작아지지» 않도록 max() 로 감싼다. */
  min-block-size: max(clamp(28px, 26.5px + 0.449vw, 50px), 2.5em);
  transition: background-color var(--fs-dur) var(--fs-ease);
}
.fs-p-62 .fs-lifting-spectrum__link:hover .fs-labelbar { background: var(--fs-teal-dk); }
@media (min-width: 600px) {
  .fs-p-62 .fs-lifting-spectrum__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-p-62 .fs-lifting-spectrum__list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(8px, 1.4px + 0.641vw, 18px);
    padding-block-start: 46px;
  }
  /* 가로 축 — 노드 상단을 관통하는 2px 틸 선 */
  .fs-p-62 .fs-lifting-spectrum__list::before {
    content: ""; position: absolute;
    inset-inline: 7%; inset-block-start: 15px;
    height: 2px; background: var(--fs-teal);
  }
  /* 축 위 노드 점 */
  .fs-p-62 .fs-lifting-spectrum__node::before {
    content: ""; position: absolute;
    inset-inline-start: 50%; inset-block-start: -37px;
    width: 14px; height: 14px; margin-inline-start: -7px;
    border-radius: var(--fs-radius-round);
    background: var(--fs-teal-dk);
  }
}

/* --- 9. 모션 무효화 — 새로 넣은 전환은 여기서 전부 끈다 ------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-62 .fs-lifting-spectrum__fig .fs-labelbar { transition: none !important; }
}

/* --- 10. 블록 간 수직 리듬 (인라인 style 대신 여기서) --------------------- */
.fs-p-62 #cause .fs-h2                  { margin-block-start: var(--fs-sp-4); }
.fs-p-62 .fs-lifting-aging-split        { margin-block-start: var(--fs-gap-title); }
.fs-p-62 .fs-lifting-timing             { margin-block-start: var(--fs-gap-title); }
.fs-p-62 .fs-lifting-menu               { margin-block-start: var(--fs-gap-title); }
.fs-p-62 #lineup .fs-lead               { margin-block-start: var(--fs-sp-4); }

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-27
   근거: _design/DESIGN_SYSTEM.md 6장(VIBE LOCK) · assets/page/48.css 「V70 승격분」
   ========================================================================== */

/* --- B. 섹션 제목 뒤 70px 틸 선 (48 검증분) -------------------------------
   ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 을 아예 안 붙인다.
     → 기본은 「그어진 상태」, .fs-reveal:not(.is-in) 에만 초기 은닉. */
.fs-p-62 .fs-h2,
.fs-p-62 .fs-lifting-dark__copy .fs-mega { position: relative; }
.fs-p-62 .fs-h2::after,
.fs-p-62 .fs-lifting-dark__copy .fs-mega::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-5);
  background: var(--fs-teal);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
.fs-p-62 .fs-center .fs-h2::after,
.fs-p-62 .fs-h2.fs-center::after { margin-inline: auto; transform-origin: center; }
:root.fs-js .fs-p-62 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-62 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --- C. 호버 — 프레임은 고정, 사진만 움직인다 (48 검증분) ------------------
   스펙트럼 노드는 상세 페이지로 가는 «링크» 라 호버 피드백이 의미가 있다.
   그림자는 쓰지 않는다(2차 규칙). 라벨바는 사진과 함께 커지면 안 된다 — 색만 한 단계.
   ★ 변형된 img 는 합성 레이어를 만들어 정적 figcaption 의 «배경 위» 에 그려진다.
     쌓임 순서를 명시하지 않으면 확대된 사진이 라벨바를 먹는다. */
.fs-p-62 .fs-lifting-spectrum__fig img {
  position: relative; z-index: 0;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
.fs-p-62 .fs-lifting-spectrum__fig .fs-labelbar { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .fs-p-62 .fs-lifting-spectrum__link:hover .fs-lifting-spectrum__fig img { transform: scale(1.045); }
}

/* --- D. reduced-motion — 위에서 새로 넣은 전환을 전부 정지 상태로 확정 ------ */
@media (prefers-reduced-motion: reduce) {
  .fs-p-62 .fs-h2::after,
  .fs-p-62 .fs-lifting-dark__copy .fs-mega::after { transform: scaleX(1) !important; transition: none !important; }
  .fs-p-62 .fs-lifting-spectrum__fig img { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 포유리프팅 = 허니 베이지 #E8D8C2 (fs.css «카테고리 틴트» 블록 + body.fs-cat-lifting)
   공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개(연한색 #F8F3ED)·글자 후광을 정한다. 여기서는 사진에 맞춘 «위치» 만.
   사진: i2i «인물·프레이밍 그대로, 배경만 왼쪽 #E8D8C2 → 모델 뒤 연한 크림 #F5EEE4 글로우, wide feathered falloff, no split»
   → hero-model-duo(-mo).jpg (모바일은 데스크톱 결과의 3:4 크롭). 모델 오른쪽(x 62~84%) · 카피 왼쪽 → 왼→오 스크림. 킥커 ink-soft → teal-dk(틴트 L .84). LOCK 4: #cause 크림 → 흰(다음 #structure 는 잉크2).
   ========================================================================== */

.fs-p-62 .fs-lifting-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) 28%, rgba(var(--fs-cat), .50) 46%, rgba(var(--fs-cat), 0) 58%);
}
.fs-p-62 .fs-lifting-hero .fs-hero__kicker { color: var(--fs-teal-dk); }
@media (max-width: 1023px) {
  .fs-p-62 .fs-lifting-hero .fs-hero__bg::after { content: none; }
  .fs-p-62 .fs-lifting-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}
.fs-p-62 #cause { background: var(--fs-white); }


/* ==========================================================================
   ▼▼▼ 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-62 .fs-lifting-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-62 .fs-lifting-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-62 .fs-lifting-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-62 .fs-lifting-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-62 .fs-lifting-hero .fs-lifting-hero__lead {
  max-width: 34em; font-size: var(--fs-t-lead); font-weight: 400; line-height: 1.5; color: var(--fs-ink);
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-62-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   114(리프팅 클리닉)와 원문이 같다 — 같은 날 같은 처리(114.css 같은 블록).
   · balance(전 폭): 원인 설명 · 노화 4조직 li · 타이밍 본문 · 시술 메뉴 설명 · 구조 킥커·리드 · 라벨바 · 섹션 h2·리드.
     br 든 h2·리드(「이십대 피부처럼 주름을 / 없애도」 「…시술 해본 / 후」)는 크롬이 br 앞 첫 구간만 고르게 나눈다 — 그 구간이 접히던 것이라 그대로 맞는다.
   · 레이저~거상술 7노드: <600 2열의 마지막 한 칸(거상술)이 왼쪽 고아 → 가운데.
   · 시술 메뉴 7장은 세로 유지 — 2열이면 155px 칸에 + 버튼 자리(44px)를 빼고 86px 만 남아 제목이 쪼개진다(§4-4 사진 카드).
   ========================================================================== */
.fs-p-62 .fs-lifting-cause__txt,
.fs-p-62 .fs-lifting-note,
.fs-p-62 #timing .fs-body,
.fs-p-62 .fs-lifting-menu__desc,
.fs-p-62 #structure .fs-kicker--lg,
.fs-p-62 #structure .fs-lead,
.fs-p-62 main .fs-labelbar,
.fs-p-62 main .fs-h2,
.fs-p-62 main .fs-nose-lead,
.fs-p-62 #lineup .fs-lead { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-62 .fs-lifting-spectrum__node:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; inline-size: calc((100% - var(--fs-gap-card)) / 2);
  }
}