/* ==========================================================================
   assets/page/114.css — 리프팅 클리닉 (draft1/114/index.html) 전용
   모든 셀렉터는 .fs-p-114 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).
   전용 컴포넌트
     1) .fs-lifting-clinic-hero   좌 크림 타이포 / 우 정사각 모델 스플릿 히어로
     2) .fs-lifting-clinic-heart  하트라인 반전 다이어그램 ★ 시그니처
     3) .fs-lifting-clinic-aging  조직별 노화 진행 3행 × 3단계 매트릭스
     4) .fs-lifting-clinic-skin   연령별 피부 단면 3연 + 범례
     5) .fs-lifting-clinic-steps  3단계 스텝(1024부터 가로)
     6) .fs-lifting-clinic-lineup 라인업 캐러셀 + 이름 탭 도트
   ========================================================================== */

/* --- 1. 스플릿 히어로 --------------------------------------------------- */
.fs-p-114 .fs-lifting-clinic-hero {
  align-items: stretch;
  color: var(--fs-ink);
  background: var(--fs-cream);
  min-height: clamp(360px, 313.8px + 12.821vw, 560px);
}
.fs-p-114 .fs-lifting-clinic-hero__grid {
  --fs-split-align: stretch;
  gap: 0;
  width: 100%;
}
.fs-p-114 .fs-lifting-clinic-hero__copy {
  align-content: center;
  padding: clamp(40px, 30.8px + 2.564vw, 80px) var(--fs-gutter);
}
.fs-p-114 .fs-lifting-clinic-hero__copy .fs-hero__kicker { color: var(--fs-teal-text); }
.fs-p-114 .fs-lifting-clinic-hero__copy .fs-hero__title { color: var(--fs-ink); }
.fs-p-114 .fs-lifting-clinic-hero__lead { color: var(--fs-ink-soft); }
.fs-p-114 .fs-lifting-clinic-hero__rule {
  width: clamp(48px, 41.1px + 1.923vw, 78px);
  height: 3px;
  background: var(--fs-teal);
}
.fs-p-114 .fs-lifting-clinic-hero__figure { position: relative; overflow: hidden; }
.fs-p-114 .fs-lifting-clinic-hero__figure img {
  width: 100%; height: 100%;
  aspect-ratio: 1;
  object-fit: cover; object-position: 50% 32%;
}
@media (min-width: 1024px) {
  .fs-p-114 .fs-lifting-clinic-hero__copy {
    padding-inline-start: max(var(--fs-gutter), calc((100vw - var(--fs-container)) / 2 + var(--fs-gutter)));
    padding-inline-end: clamp(24px, 12.5px + 1.121vw, 60px);
  }
  .fs-p-114 .fs-lifting-clinic-hero__figure { height: clamp(460px, 277.1px + 17.857vw, 620px); }
  .fs-p-114 .fs-lifting-clinic-hero__figure img { aspect-ratio: auto; }
}

/* --- 2. 하트라인 반전 다이어그램 ★ 시그니처 ---------------------------- */
.fs-p-114 .fs-lifting-clinic-heart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 6.9px + 0.865vw, 24px);
}
.fs-p-114 .fs-lifting-clinic-heart__panel { display: grid; align-content: start; }
.fs-p-114 .fs-lifting-clinic-heart__frame {
  position: relative;
  display: block;
  overflow: hidden;
}
.fs-p-114 .fs-lifting-clinic-heart__frame img { display: block; width: 100%; height: auto; }
.fs-p-114 .fs-lifting-clinic-heart__mark {
  position: absolute;
  inset-block-start: 39.3%;
  inset-inline-start: 9%;
  width: 80.5%;
  height: 59%;
  color: var(--fs-teal-dk);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform var(--fs-dur-slow, .8s) var(--fs-ease-out);
}
.fs-p-114 .fs-lifting-clinic-heart__mark--flip {
  inset-block-start: 39.3%;
  inset-inline-start: 10.4%;
  width: 80%;
  height: 50%;
  transform: rotate(180deg);
}
/* 뒤집힘은 부모 블록(.fs-lifting-clinic-heart)의 리빌에 얹는다. SVG 에 직접 data-fs-reveal 을
   걸면 opacity:0 인 독립 리빌 단위가 하나 더 생겨 교차를 놓쳤을 때 하트가 사라진다.
   리빌 배선이 실제로 걸린 경우에만 진입 전 각도를 세워 둔다 — 첫 화면 안에 있던 블록은
   fs-reveal 클래스 자체가 붙지 않으므로 기본값(180deg)이 그대로 최종 상태가 된다. */
:root.fs-js .fs-p-114 .fs-reveal .fs-lifting-clinic-heart__mark--flip { transform: rotate(0deg); }
:root.fs-js .fs-p-114 .fs-reveal.is-in .fs-lifting-clinic-heart__mark--flip { transform: rotate(180deg); }
.fs-p-114 .fs-lifting-clinic-heart__cap {
  padding-block-start: var(--fs-sp-3);
  color: var(--fs-muted);
  text-align: center;
}
.fs-p-114 .fs-lifting-clinic-heart-sec__copy { display: grid; justify-items: start; }
.fs-p-114 .fs-lifting-clinic-heart-sec__copy .fs-h2 { margin-block-start: var(--fs-sp-3); }
.fs-p-114 .fs-lifting-clinic-heart-sec__copy .fs-quote { margin-block-start: var(--fs-sp-6); }
.fs-p-114 .fs-lifting-clinic-heart-sec__copy .fs-body { margin-block-start: var(--fs-sp-5); }
.fs-p-114 .fs-lifting-clinic-heart-sec__note {
  margin-block-start: var(--fs-sp-8);
  padding-inline-start: var(--fs-sp-5);
  border-inline-start: 2px solid var(--fs-teal);
  color: var(--fs-ink-soft);
}

/* --- 3. 조직별 노화 진행 매트릭스 -------------------------------------- */
.fs-p-114 .fs-lifting-clinic-aging__list {
  display: grid;
  gap: clamp(24px, 19.4px + 1.282vw, 44px);
}
.fs-p-114 .fs-lifting-clinic-aging__seq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(6px, 4.2px + 0.513vw, 14px);
  margin-block-end: clamp(10px, 8.2px + 0.513vw, 18px);
}
.fs-p-114 .fs-lifting-clinic-aging__cell { display: block; }
.fs-p-114 .fs-lifting-clinic-aging__cell img { display: block; width: 100%; height: auto; }
.fs-p-114 .fs-lifting-clinic-aging__num {
  display: inline-grid; place-items: center;
  min-width: clamp(26px, 24.2px + 0.513vw, 34px);
  min-height: clamp(26px, 24.2px + 0.513vw, 34px);
  margin-block-end: var(--fs-sp-3);
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal-dk); color: var(--fs-white);
  font-size: var(--fs-t-sm); font-weight: 700;
}
.fs-p-114 .fs-lifting-clinic-aging__cause { display: grid; justify-items: start; gap: var(--fs-sp-1); }
.fs-p-114 .fs-lifting-clinic-aging__causes {
  display: grid;
  gap: var(--fs-sp-6);
  margin-block-start: clamp(24px, 20.9px + 0.865vw, 38px);
}
@media (max-width: 599px) {
  .fs-p-114 .fs-lifting-clinic-aging__seq {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .fs-p-114 .fs-lifting-clinic-aging__badge { display: none; }
}

/* --- 4. 연령별 피부 단면 + 범례 ---------------------------------------- */
.fs-p-114 .fs-lifting-clinic-skin { margin-block-start: clamp(30px, 25.4px + 1.282vw, 50px); }
.fs-p-114 .fs-lifting-clinic-skin__item { display: grid; align-content: start; }
.fs-p-114 .fs-lifting-clinic-skin__box {
  display: grid; place-items: center;
  background: var(--fs-white);
  padding: var(--fs-sp-3);
}
.fs-p-114 .fs-lifting-clinic-skin__box img { display: block; width: 100%; height: auto; }
.fs-p-114 .fs-lifting-clinic-skin__legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fs-sp-4) clamp(20px, 13.1px + 1.923vw, 50px);
  margin-block-start: clamp(20px, 17.7px + 0.641vw, 30px);
}
.fs-p-114 .fs-lifting-clinic-skin__legend li {
  display: flex; align-items: center; gap: var(--fs-sp-3);
  font-size: var(--fs-t-body); font-weight: 600; color: var(--fs-ink-soft);
}
.fs-p-114 .fs-lifting-clinic-skin__legend img {
  display: block;
  width: clamp(32px, 29.2px + 0.769vw, 44px);
  height: auto;
}

/* --- 5. 3단계 스텝 (1024부터 가로) ------------------------------------- */
.fs-p-114 .fs-lifting-clinic-steps { margin-block-start: clamp(30px, 26px + 1.25vw, 50px); }
@media (min-width: 1024px) {
  .fs-p-114 .fs-lifting-clinic-steps { flex-direction: row; justify-content: center; }
  .fs-p-114 .fs-lifting-clinic-steps .fs-steps__link { width: clamp(30px, -3.6px + 3.27vw, 72px); height: 3px; }
  .fs-p-114 .fs-lifting-clinic-steps .fs-steps__link--active {
    background: linear-gradient(90deg, var(--fs-teal) 0%, var(--fs-step-bg) 100%);
  }
}
.fs-p-114 .fs-lifting-clinic-closing {
  margin-block-start: clamp(36px, 30.4px + 1.538vw, 60px);
  color: var(--fs-teal-text);
}

/* --- 6. 라인업 캐러셀 + 이름 탭 도트 ----------------------------------- */
.fs-p-114 .fs-lifting-clinic-lineup__viewport { overflow: hidden; }
.fs-p-114 .fs-lifting-clinic-lineup__track { display: flex; }
.fs-p-114 .fs-lifting-clinic-lineup__slide { display: block; }
.fs-p-114 .fs-lifting-clinic-lineup__figure { display: grid; align-content: start; }
.fs-p-114 .fs-lifting-clinic-lineup__box {
  display: grid; place-items: center;
  background: var(--fs-white);
  padding: clamp(14px, 10.9px + 0.865vw, 28px);
}
.fs-p-114 .fs-lifting-clinic-lineup__box img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.fs-p-114 .fs-lifting-clinic-lineup__text { display: grid; justify-items: start; }
.fs-p-114 .fs-lifting-clinic-lineup__text .fs-num { color: var(--fs-teal-text); }
.fs-p-114 .fs-lifting-clinic-lineup__name { margin-block-start: var(--fs-sp-3); }
.fs-p-114 .fs-lifting-clinic-lineup__mark {
  margin-block-start: var(--fs-sp-4);
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-sm);
  letter-spacing: var(--fs-ls-wide);
  color: var(--fs-muted);
}
.fs-p-114 .fs-lifting-clinic-lineup__kind { margin-block-start: var(--fs-sp-6); }
.fs-p-114 .fs-lifting-clinic-lineup__tabs {
  flex-wrap: wrap;
  gap: var(--fs-sp-2);
  margin-block-start: clamp(24px, 20.9px + 0.865vw, 38px);
}
.fs-p-114 .fs-lifting-clinic-lineup__tabs .fs-carousel__dot {
  width: auto;
  aspect-ratio: auto;
  min-height: clamp(30px, 28.8px + 0.321vw, 35px);
  padding-inline: clamp(10px, 7.7px + 0.641vw, 20px);
  border: 1px solid var(--fs-line-control);
  border-radius: var(--fs-radius-pill);
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--fs-ink-soft);
  font-size: var(--fs-t-pill);
  font-weight: 600;
  line-height: 1.2;
}
.fs-p-114 .fs-lifting-clinic-lineup__tabs .fs-carousel__dot.is-active {
  width: auto;
  border-color: var(--fs-teal-text);
  background: var(--fs-teal-text);
  background-image: none;
  box-shadow: none;
  color: var(--fs-white);
  font-weight: 700;
}
.fs-p-114 .fs-lifting-clinic-lineup__status {
  margin-block-start: var(--fs-sp-6);
  font-family: var(--fs-font-en);
  letter-spacing: var(--fs-ls-wide);
}
@media (min-width: 1024px) {
  .fs-p-114 .fs-lifting-clinic-lineup__text { align-content: center; height: 100%; }
}

/* --- 7. 라인업 요약표 --------------------------------------------------- */
.fs-p-114 .fs-lifting-clinic-table { margin-block-start: clamp(30px, 25.4px + 1.282vw, 50px); }
.fs-p-114 .fs-lifting-clinic-table .fs-table th[scope="row"] {
  width: clamp(90px, 76.2px + 3.846vw, 150px);
  color: var(--fs-teal-text);
  font-weight: 700;
}

/* --- 8. reduced-motion — 새 모션 전부 최종 상태로 고정 ------------------ */
@media (prefers-reduced-motion: reduce) {
  .fs-p-114 .fs-lifting-clinic-heart__mark--flip,
  :root.fs-js .fs-p-114 .fs-reveal .fs-lifting-clinic-heart__mark--flip,
  :root.fs-js .fs-p-114 .fs-reveal.is-in .fs-lifting-clinic-heart__mark--flip {
    transform: rotate(180deg) !important;
    transition: none !important;
  }
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   렌더로 확인한 결함만 고친다. 새 색 0개(--fs-* 토큰만) · 문구 무변경.
   근거·판정은 _design/QA/114.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   F1 [LOCK 5] 다크 밴드 0개 → A11 노화 매트릭스를 --ink2 밴드로 올린다.
   서브페이지(시술 상세)는 다크 밴드가 «필수» 인데(DESIGN_SYSTEM 6장 적용 범위 행렬)
   이 페이지는 1920 에서 7823px 가 전부 흰색·크림이라 리듬이 한 번도 끊기지 않았다.
   자리는 3번째 섹션 — 확정 시안 57(4번째)·91(4번째)과 같은 페이지 중반이다.
   HTML 은 `fs-section--fade-cream` → `fs-section--ink2` 한 글자만 바꿨다.

   이 섹션을 고른 이유: 사이트의 다크 밴드 관용구는 «도해 + 라벨바 + 글» 이고
   흰 카드(.fs-card)를 담은 다크 밴드는 코퍼스에 0장이다. A06 POINT 4장을
   다크로 올리면 fs.css:317 이 카드 «안» 의 <p> 까지 흰색으로 만들어
   흰 카드 위 흰 글자가 된다. 이 섹션은 흰 카드가 없어 그 함정이 없다.
   -------------------------------------------------------------------------- */

/* 노화 도해 9장은 자기 배경이 밝은 회색(가장자리 평균 197~204)이라
   다크 밴드 위에서 그대로 «밝은 타일» 로 선다. 별도 프레임을 주지 않는다. */

/* 번호 배지 — #00646B 원은 #3C3D3F 밴드 위에서 1.6:1 로 묻힌다.
   틸 순색 면 + 잉크 글자로 바꾼다(확정 시안 57 의 .fs-nose-hl 과 같은 처방).
   흰 글자를 담은 틸 면이 아니므로 LOCK 3 (c) 대상이 아니다 — 대비 8.2:1. */
.fs-p-114 .fs-lifting-clinic-aging.fs-section--ink2 .fs-lifting-clinic-aging__num {
  background: var(--fs-teal);
  color: var(--fs-ink);
}

/* 단계 화살표 — .fs-iconbtn--dark 는 #111 면이라 다크 밴드에서 «검은 구멍» 이 된다.
   밴드 위에서는 아웃라인 흰 화살표(.fs-iconbtn--light 규격)로 되돌린다. */
.fs-p-114 .fs-lifting-clinic-aging.fs-section--ink2 .fs-lifting-clinic-aging__badge {
  background: transparent;
  border-color: var(--fs-white);
  color: var(--fs-white);
}

/* --------------------------------------------------------------------------
   F2 [LOCK 2] 라벨바가 도해에서 18px 떠 있다.
   __seq 의 margin-block-end 가 만든 간격이라 vibecheck 의 L2 (b-2)
   (「라벨바 자신의 margin-top·border-top 만 본다」)를 그대로 통과했다.
   규칙 문장은 「바와 사진 사이에 여백을 넣지 않는다」다 — 눈으로 잡힌다.
   행 사이 간격은 .fs-lifting-clinic-aging__list 의 gap(24~44px)이 이미 맡고 있다.
   -------------------------------------------------------------------------- */
.fs-p-114 .fs-lifting-clinic-aging__seq { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   F3 제목이 3줄로 쪼개져 「사람만」이 고아 줄이 된다.
   원문은 "리프팅은 피부가 처진 사람만<br>하는건가요?" 로 2줄을 의도하는데
   좌 컬럼이 400fr = 418px 이고 그 한 줄의 실측 폭이 436.3px 라 19px 이 모자랐다.
   440fr 로 올리면 460px — 우 컬럼은 982 → 940 으로 줄지만 도해 한 칸은
   282 → 268px 이고 원본이 185px 이라 오히려 확대율이 내려간다(152% → 145%).
   인라인 style 의 --fs-split 은 var() 로 못 이기므로 grid-template-columns 를 직접 준다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-114 .fs-lifting-clinic-aging .fs-split {
    grid-template-columns: minmax(0, 440fr) minmax(0, 900fr);
  }
}
/* 태블릿 구간(1024~1399)은 제목이 줄어드는 속도보다 컨테이너가 빨리 줄어
   같은 고아 줄이 다시 생긴다. 이 구간만 좌 컬럼을 한 단계 더 넓힌다.
   도해 한 칸은 153px 로 원본 185px 아래 — 확대가 아니라 축소라 선명도는 오히려 는다. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .fs-p-114 .fs-lifting-clinic-aging .fs-split {
    grid-template-columns: minmax(0, 540fr) minmax(0, 800fr);
  }
}

/* --------------------------------------------------------------------------
   F4 [LOCK 6] 캐러셀이 1440 안에서 «딱 맞게» 끝난다.
   .fs-lifting-clinic-lineup__viewport 가 overflow:hidden 이라 다음 장이
   콘텐츠 경계(x1679) 밖으로 이어지지 않는다. vibecheck 에는 L6 판정 코드가 없어
   7개 폭 전부 ✓ 로 통과했지만 판정법 (b) 는 「뷰포트의 overflow:hidden → FAIL」이다.
   잘림은 fs.css:211·219 의 html/body{overflow-x:clip} 에 맡긴다.
   뷰포트 «폭» 은 건드리지 않는다 — fs.js:554 가 clientWidth 로 슬라이드 폭을 잡는다.

   노출 폭은 (뷰포트폭 − 1440)/2 라 1440 에서는 34px 밖에 안 나와
   「잘린 다음 장」이 아니라 「어긋난 여백」으로 읽힌다. 1700 부터만 흘린다.
   slide 모드는 코버플로우 같은 감광이 없어 흘러나온 조각이 «현재 장의 연장» 으로
   읽히므로, HTML 에 data-fs-carousel-gap="40" 을 주고(pv=1 이라 슬라이드 폭은
   안 변하고 이동량만 sw+gap 이 된다) 비활성 장을 감광한다. 3D 회전은 빌리지 않는다.
   -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  .fs-p-114 .fs-lifting-clinic-lineup__viewport { overflow: visible; }
  .fs-p-114 .fs-lifting-clinic-lineup__slide {
    opacity: var(--fs-cover-fade, .55);
    transition: opacity var(--fs-dur-slow) var(--fs-ease-out);
  }
  .fs-p-114 .fs-lifting-clinic-lineup__slide.is-active { opacity: 1; }
}

/* --------------------------------------------------------------------------
   F5 [태블릿] 연령별 피부 단면 3연이 600~1023 에서 2+1 로 쪼개진다.
   fs.css:334 가 .fs-grid--3 를 그 구간에서 2열로 접어 「50대 이상」한 장만
   마지막 줄에 남는다. 20대 → 30~40대 → 50대 이상은 «과정» 이라 3열이 유지돼야
   순서로 읽힌다(48 의 .fs-lef-stage__cards 와 같은 판단). 원본 353px 아래로
   줄어들 뿐이라 확대 흐림도 없다.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-114 ul.fs-grid--3.fs-lifting-clinic-skin {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   F6 제목 뒤 70px 틸 선 (48 에서 검증된 마이크로 인터랙션)
   ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   -------------------------------------------------------------------------- */
.fs-p-114 .fs-nose-head > h2,
.fs-p-114 .fs-lifting-clinic-heart-sec__copy > h2,
.fs-p-114 .fs-sec-head__title { position: relative; }

.fs-p-114 .fs-nose-head > h2::after,
.fs-p-114 .fs-lifting-clinic-heart-sec__copy > h2::after,
.fs-p-114 .fs-sec-head__title::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-114 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-114 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   F7 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 쓰지 않는다(2차 규칙).
   흰 상자가 프레임 노릇을 하는 두 곳에만 건다. 하트라인 도해는 제외했다 —
   SVG 하트가 얼굴 좌표에 절대배치돼 있어 사진만 커지면 주석이 어긋난다.
   -------------------------------------------------------------------------- */
.fs-p-114 .fs-lifting-clinic-skin__box,
.fs-p-114 .fs-lifting-clinic-lineup__box { overflow: hidden; }

.fs-p-114 .fs-lifting-clinic-skin__box img,
.fs-p-114 .fs-lifting-clinic-lineup__box img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-114 .fs-lifting-clinic-skin__item:hover .fs-lifting-clinic-skin__box img,
  .fs-p-114 .fs-lifting-clinic-lineup__figure:hover .fs-lifting-clinic-lineup__box img {
    transform: scale(1.045);
  }
  /* 라벨바는 사진과 함께 커지면 안 된다(글자가 흔들린다). 색만 한 단계 내린다 —
     #00646B 는 LOCK 2 (a) 의 허용 3색 안에 있다. */
  .fs-p-114 .fs-lifting-clinic-skin__item:hover .fs-labelbar,
  .fs-p-114 .fs-lifting-clinic-lineup__figure:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --------------------------------------------------------------------------
   F8 reduced-motion — 이 패스에서 더한 모션을 전부 최종 상태로 못박는다.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-114 .fs-nose-head > h2::after,
  .fs-p-114 .fs-lifting-clinic-heart-sec__copy > h2::after,
  .fs-p-114 .fs-sec-head__title::after,
  :root.fs-js .fs-p-114 h2.fs-reveal:not(.is-in)::after,
  :root.fs-js .fs-p-114 .fs-reveal:not(.is-in) h2::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-114 .fs-lifting-clinic-skin__box img,
  .fs-p-114 .fs-lifting-clinic-lineup__box img { transition: none !important; transform: none !important; }
  .fs-p-114 .fs-lifting-clinic-lineup__slide { transition: none !important; }
}

/* ==========================================================================
   히어로 개편 — 1mm 결 (2026-08-28 승인자 지시 · 2차 수정)
   1차에서 카피를 사진 «아래» 밴드로 내렸으나 승인자 확인 —
   「이 부분 원래 헤로 이미지 안에 있을 내용이 아닌가?」
   → 카피는 사진 «위» 에 얹힌다. 110·134 와 같은 구조다.
   전: 좌 크림 타이포 / 우 정사각 모델 스플릿.
   후: 사진 풀블리드 + 그 위 카피 + GNB 오버레이.
   ★ DOM 순서(카피 → 사진)는 안 건드린다. 사진을 absolute 로 배경에 깔았다.
   ========================================================================== */
.fs-p-114 .fs-lifting-clinic-hero {
  position: relative;
  overflow: hidden;
  background: var(--fs-cream);
  color: var(--fs-ink);
  min-height: clamp(520px, 380px + 12vw, 720px);
  display: grid;
  align-items: center;
  padding: 0;
}
.fs-p-114 .fs-lifting-clinic-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(100%, var(--fs-container, 1440px));
  margin-inline: auto;
  padding-inline: var(--fs-gutter);
}
/* 사진을 히어로 배경으로 승격 */
.fs-p-114 .fs-lifting-clinic-hero__figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  height: auto;
}
.fs-p-114 .fs-lifting-clinic-hero__figure picture { display: block; block-size: 100%; }
.fs-p-114 .fs-lifting-clinic-hero__figure img {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 68% 26%;      /* 인물을 오른쪽으로 밀어 좌측에 카피 자리를 낸다 */
}
/* 카피 뒤 크림 스크림 — 사진 노출은 그대로, 글자 뒤만 밝힌다 */
.fs-p-114 .fs-lifting-clinic-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(246,241,236,.92) 0%,
    rgba(246,241,236,.84) 26%,
    rgba(246,241,236,.58) 42%,
    rgba(246,241,236,.24) 58%,
    rgba(246,241,236,0)   78%);
}
.fs-p-114 .fs-lifting-clinic-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  text-align: start;
  align-content: center;
  gap: clamp(12px, 9px + 0.5vw, 20px);
  max-width: min(100%, 40ch);
  padding: clamp(96px, 60px + 4vw, 150px) 0 clamp(64px, 40px + 3vw, 110px);
}
.fs-p-114 .fs-lifting-clinic-hero__copy .fs-hero__kicker { color: var(--fs-teal-dk); font-weight: 700; }
.fs-p-114 .fs-lifting-clinic-hero__copy .fs-hero__title {
  color: var(--fs-ink);
  font-size: clamp(30px, 20px + 2.0vw, 56px);
  line-height: 1.08;
}
.fs-p-114 .fs-lifting-clinic-hero__lead { color: var(--fs-ink-soft); max-width: 34ch; }
@media (max-width: 599px) {
  /* 모바일은 세로컷 — 카피가 위, 인물이 아래. 스크림도 세로로 돌린다 */
  .fs-p-114 .fs-lifting-clinic-hero { min-height: clamp(540px, 430px + 26vw, 660px); align-items: start; }
  .fs-p-114 .fs-lifting-clinic-hero__figure img { object-position: center 28%; }
  .fs-p-114 .fs-lifting-clinic-hero__figure::after {
    background: linear-gradient(180deg,
      rgba(246,241,236,.93) 0%,
      rgba(246,241,236,.80) 30%,
      rgba(246,241,236,.28) 52%,
      rgba(246,241,236,0)   70%);
  }
  .fs-p-114 .fs-lifting-clinic-hero__copy { max-width: 100%; padding-block: clamp(78px, 62px + 4vw, 104px) 0; }
}
@media (min-width: 1024px) {
  .fs-p-114 .fs-lifting-clinic-hero__copy { padding-inline: 0; }
}

/* GNB 를 사진 위로 — fs.css 의 --overlay 는 어두운 히어로 전제(흰 글자 + 검은 스크림)라
   밝은 그레이지 사진에서는 회색 얼룩이 되고 대비가 뒤집힌다. 잉크 + 크림 스크림으로. */
.fs-p-114 .fs-header--overlay {
  color: var(--fs-ink);
  background: transparent;
}
.fs-p-114 .fs-header--overlay::before {
  background: linear-gradient(180deg, rgba(246,241,236,.84) 0%, rgba(246,241,236,.46) 55%, rgba(246,241,236,0) 100%);
}
.fs-p-114 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-114 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }

/* --- 라인업 표 가운데 정렬 (2026-08-28 승인자 지시) ------------------------
   fs.css 의 .fs-table 은 th·td 가 text-align:start.
   ★ 머리(thead)와 몸통을 «같이» 옮겨야 한다 — 한쪽만 옮기면 어긋난다. */
.fs-p-114 #lineup-table .fs-table thead th,
.fs-p-114 #lineup-table .fs-table th[scope="row"],
.fs-p-114 #lineup-table .fs-table td { text-align: center; }

/* GNB 를 사진 위로 — 1mm 처럼 헤더가 인물 밴드에 얹힌다.
   fs.css 의 --overlay 는 어두운 히어로 전제(흰 글자 + 검은 스크림)라
   밝은 그레이지 사진에서는 회색 얼룩이 되고 대비가 뒤집힌다. 잉크 + 크림 스크림으로. */
.fs-p-114 .fs-header--overlay {
  color: var(--fs-ink);
  background: transparent;
}
.fs-p-114 .fs-header--overlay::before {
  background: linear-gradient(180deg, rgba(246,241,236,.84) 0%, rgba(246,241,236,.46) 55%, rgba(246,241,236,0) 100%);
}
.fs-p-114 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-114 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
/* 헤더가 사진 위로 올라가므로 인물이 헤더에 가리지 않게 조금 내려 잡는다 */
.fs-p-114 .fs-lifting-clinic-hero__figure img { object-position: 50% 30%; }

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-114-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   62(포시즌 리프팅)와 원문이 같다 — 같은 날 같은 처리(62.css 같은 블록).
   · 하트라인 본문 `<br>` 두 문장 → 문장 블록 .fs-lead__s(MOBILE_RULES §1-4, index.html) — 390 「…하트라인으로 / 표현,」 두 번.
   · balance(전 폭): 하트 캡션 · 본문 · 섹션 h2·리드 · 노트 · 라벨바.
   · 히어로는 그대로 — 360 에서 리드가 머리카락 위에 얹히지만 08-28 승인자 「카피는 히어로 이미지 안」(아래 히어로 개편 주석) 결정이라
     스택형으로 바꾸지 않았다. 승인자 확인 대기. 시술정보 4장 · 타이밍 원 3개는 세로 유지(원 안 2줄 글 — §4-4).
   ========================================================================== */
.fs-p-114 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-114 .fs-lifting-clinic-heart__cap,
.fs-p-114 main .fs-body,
.fs-p-114 main .fs-h2,
.fs-p-114 main .fs-nose-lead,
.fs-p-114 main .fs-labelbar,
.fs-p-114 main .fs-card__caption { text-wrap: balance; }
