@charset "utf-8";
/* ==========================================================================
   151.css — 써마지 FLX (slug: thermage) 페이지 전용
   모든 셀렉터는 .fs-p-151 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).

   전용 컴포넌트
     .fs-thermage-hero    1mm 계열 밝은 모델 히어로(투명 헤더 + 잉크 카피) + 모바일 스택
     .fs-thermage-tip     ★ 시그니처 — 팁 면적 스펙 스트립(3cm²→4cm² 실비율 도형)
     .fs-thermage-pulse   고주파 에너지 조사 알고리즘 4단 스트립
     .fs-thermage-spec    장비 특장점 3열 도해 카드
     .fs-thermage-zone    시술 부위 존 맵(사진 + HTML 라벨 + SVG 연결선)
     .fs-thermage-tl      효과 타임라인 보조 카드
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. A01 · 히어로 — 1mm 계열 «투명 헤더 + 우측 모델 / 좌측 잉크 카피»
   -------------------------------------------------------------------------- */
/* 2026-08-28 · 아이보리 배너 히어로를 걷어내고 81 과 같은 밝은 모델 히어로로 바꿨다.
   헤더를 흰 막대로 세우지 않고 사진 위에 얹는다. 히어로 상단은 전 폭이 아이보리라
   흰 글자가 아니라 «잉크 글자» 를 쓴다. 모델 머리는 사진 높이의 16.5% 아래에서
   시작하므로 헤더 띠(최대 100px)에 안 걸린다. */
.fs-p-151 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색 — 사진 로딩 전 번쩍임을 막고
   qa.py 가 배경을 흰 body 로 오판하지 않게 한다. */
.fs-p-151 .fs-page--overlay { background: #EBE5D5; }
.fs-p-151 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-151 .fs-header--overlay::before { content: none; }
.fs-p-151 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-151 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-151 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
/* --fs-muted-2(#7D7D7D)는 아이보리 위에서 3.67:1 이라 AA 미달이다 */
.fs-p-151 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-151 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-151 .fs-util__sep { opacity: .35; }

.fs-p-151 .fs-thermage-hero { background: #EBE5D5; }
/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-151 .fs-thermage-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 가로 크롭은 «위 고정» — 가운데로 두면 모델 머리가 헤더 띠로 올라온다 */
.fs-p-151 .fs-thermage-hero .fs-hero__bg img { object-position: 50% 0%; }
.fs-p-151 .fs-thermage-hero .fs-hero__copy { max-width: 40rem; gap: var(--fs-sp-3); }
.fs-p-151 .fs-thermage-hero .fs-hero__kicker,
.fs-p-151 .fs-thermage-hero .fs-hero__title,
.fs-p-151 .fs-thermage-hero__lead { color: var(--fs-ink); }
.fs-p-151 .fs-thermage-hero .fs-hero__kicker {
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em; font-weight: 500; color: var(--fs-teal-dk);
}
.fs-p-151 .fs-thermage-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22;
}
.fs-p-151 .fs-thermage-hero__rule {
  display: block; width: 56px; height: 2px;
  margin-block: var(--fs-sp-2);
  background: var(--fs-teal);
}
.fs-p-151 .fs-thermage-hero__lead { max-width: 34em; color: var(--fs-ink-soft); }

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 아이보리 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은
   페이드로 녹여 이음매를 없앤다. (81 과 같은 처리) */
@media (max-width: 1023px) {
  .fs-p-151 .fs-thermage-hero { min-height: 0; background: #EBE5D5; }
  .fs-p-151 .fs-thermage-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-151 .fs-thermage-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-151 .fs-thermage-hero .fs-hero__inner {
    grid-row: 1; background: #EBE5D5;
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-9)) var(--fs-sp-11);
  }
  .fs-p-151 .fs-thermage-hero .fs-hero__copy { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   2. A03 · 좌 장비 / 우 정의
   -------------------------------------------------------------------------- */
/* 틸트 호스트는 도해 «전체»(사진 + 라벨바)를 감싼다.
   figcaption 은 figure 의 직계여야 해서 안쪽을 따로 묶을 수 없다 —
   figure 를 통째로 __inner 로 지정하고 바깥 div 가 호스트를 맡는다.
   (감싸지 않으면 fs.js 가 firstElementChild = <img> 를 집어
    호버에서 사진만 기울고 라벨바가 제자리에 남는다) */
.fs-p-151 .fs-thermage-intro__tilt { display: grid; justify-self: center; }
/* ★ 폭의 단일 출처는 figure 다. 예전에는 img 에 clamp, 바에 min(100%,296px) 를
   따로 걸어 1024px 에서 도해 243px 에 바가 296px 로 «띠 위에 장비가 뜬» 모양이
   됐다(360px 에서는 186px 대 296px). LOCK 2 「바 폭 === 도해 폭」. */
.fs-p-151 .fs-thermage-intro__fig {
  margin: 0; display: grid;
  inline-size: clamp(186px, 130px + 11vw, 296px);
}
.fs-p-151 .fs-thermage-intro__fig img { display: block; inline-size: 100%; block-size: auto; }
.fs-p-151 .fs-thermage-intro__fig .fs-labelbar { inline-size: 100%; }
.fs-p-151 .fs-thermage-intro__copy > * + * { margin-block-start: var(--fs-sp-5); }
.fs-p-151 .fs-nose-head.fs-center { justify-items: center; }

/* --------------------------------------------------------------------------
   3. A06 · 3대 효과 POINT 카드 + 콜라겐 도해 띠
   -------------------------------------------------------------------------- */
.fs-p-151 .fs-thermage-point { margin-block-start: var(--fs-gap-title); align-items: stretch; }
.fs-p-151 .fs-thermage-point .fs-card { block-size: 100%; }
.fs-p-151 .fs-thermage-point .fs-card__icon img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: contain;
}
.fs-p-151 .fs-thermage-band { margin: var(--fs-gap-title) 0 0; }
.fs-p-151 .fs-thermage-band img { display: block; inline-size: 100%; block-size: auto; }

/* --------------------------------------------------------------------------
   4. ★ 시그니처 — 팁 면적 스펙 스트립
   -------------------------------------------------------------------------- */
.fs-p-151 .fs-thermage-tip {
  display: grid; gap: var(--fs-gap-col);
  background: var(--fs-cream-2); padding: clamp(20px, 12px + 2.2vw, 44px);
}
@media (min-width: 1024px) {
  .fs-p-151 .fs-thermage-tip { grid-template-columns: minmax(0, 640fr) minmax(0, 700fr); align-items: center; }
}
.fs-p-151 .fs-thermage-tip__media { margin: 0; }
.fs-p-151 .fs-thermage-tip__media img { display: block; inline-size: 100%; block-size: auto; }
.fs-p-151 .fs-thermage-tip__head {
  margin-block-start: var(--fs-sp-3);
  font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); color: var(--fs-ink);
}
.fs-p-151 .fs-thermage-tip__grid {
  margin-block-start: var(--fs-sp-7);
  display: grid; gap: var(--fs-gap-card); align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
}
.fs-p-151 .fs-thermage-tip__area { inline-size: clamp(132px, 108px + 5vw, 190px); block-size: auto; color: var(--fs-teal-dk); }
.fs-p-151 .fs-thermage-tip__nums { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fs-sp-5); }
.fs-p-151 .fs-thermage-tip__nums li {
  display: grid; gap: var(--fs-sp-1);
  padding-inline-start: var(--fs-sp-5); border-inline-start: 2px solid var(--fs-teal);
}
.fs-p-151 .fs-thermage-tip__nums b {
  font-family: var(--fs-font); font-size: var(--fs-t-num); font-weight: 700;
  line-height: 1; letter-spacing: var(--fs-ls-tight); color: var(--fs-teal-dk);
}
.fs-p-151 .fs-thermage-tip__nums span { font-size: var(--fs-t-sm); color: var(--fs-ink-soft); }
.fs-p-151 .fs-thermage-tip__note { margin-block-start: var(--fs-sp-6); color: var(--fs-ink-soft); }

/* --------------------------------------------------------------------------
   5. 장비 특장점 3열 도해 카드
   -------------------------------------------------------------------------- */
.fs-p-151 .fs-thermage-spec { list-style: none; margin: var(--fs-gap-title) 0 0; padding: 0; display: grid; gap: var(--fs-gap-card); }
@media (min-width: 600px) { .fs-p-151 .fs-thermage-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fs-p-151 .fs-thermage-spec__item { display: grid; align-content: start; }
.fs-p-151 .fs-thermage-spec__fig { margin: 0; display: grid; }
.fs-p-151 .fs-thermage-spec__fig img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 5 / 3; object-fit: cover;
  background: var(--fs-cream-2);
}
.fs-p-151 .fs-thermage-spec__title {
  margin-block-start: var(--fs-sp-6);
  font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); color: var(--fs-ink);
}
.fs-p-151 .fs-thermage-spec__desc { margin-block-start: var(--fs-sp-3); color: var(--fs-muted); }

/* --------------------------------------------------------------------------
   6. 고주파 에너지 조사 알고리즘 4단 스트립
   -------------------------------------------------------------------------- */
.fs-p-151 .fs-thermage-pulse { margin-block-start: var(--fs-sp-11); }
.fs-p-151 .fs-thermage-pulse__title {
  font-size: var(--fs-t-h3); font-weight: 700; color: var(--fs-ink); text-align: center;
}
.fs-p-151 .fs-thermage-pulse__list {
  list-style: none; margin: var(--fs-sp-7) 0 0; padding: 0;
  display: grid; gap: var(--fs-gap-card); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .fs-p-151 .fs-thermage-pulse__list {
    grid-template-columns: minmax(0, 84fr) minmax(0, 90fr) minmax(0, 472fr) minmax(0, 108fr);
    align-items: end;
  }
}
.fs-p-151 .fs-thermage-pulse__fig { margin: 0; display: grid; }
.fs-p-151 .fs-thermage-pulse__box { display: flex; align-items: flex-end; justify-content: center; }
.fs-p-151 .fs-thermage-pulse__fig img { display: block; inline-size: 100%; block-size: auto; }
@media (max-width: 767px) {
  .fs-p-151 .fs-thermage-pulse__list { align-items: end; }
  .fs-p-151 .fs-thermage-pulse__box { block-size: 150px; }
  .fs-p-151 .fs-thermage-pulse__fig img {
    inline-size: auto; block-size: auto; max-block-size: 100%; max-inline-size: 100%;
  }
}
.fs-p-151 .fs-thermage-pulse__foot {
  margin-block-start: var(--fs-sp-5);
  display: flex; flex-wrap: wrap; gap: var(--fs-sp-3) var(--fs-sp-6);
  align-items: center; justify-content: center;
  font-size: var(--fs-t-sm); color: var(--fs-muted);
}
.fs-p-151 .fs-thermage-pulse__foot .fs-thermage-arrow {
  flex: 0 0 auto; inline-size: clamp(80px, 40px + 8vw, 180px); block-size: auto; color: var(--fs-teal-dk);
}

/* --------------------------------------------------------------------------
   7. A12 · 효과 타임라인 (3단계) + 기대 효과 카드
   -------------------------------------------------------------------------- */
.fs-p-151 .fs-thermage-steps { margin-block-start: var(--fs-gap-title); }
@media (min-width: 1024px) {
  .fs-p-151 .fs-thermage-steps { flex-direction: row; align-items: center; justify-content: center; }
  .fs-p-151 .fs-thermage-steps .fs-steps__link { inline-size: clamp(28px, 4px + 2.4vw, 62px); block-size: 3px; }
}
.fs-p-151 .fs-thermage-steps .fs-step__text b { display: block; font-weight: 700; color: var(--fs-ink); }
.fs-p-151 .fs-thermage-tl { list-style: none; margin: var(--fs-gap-title) 0 0; padding: 0; display: grid; gap: var(--fs-gap-card); }
@media (min-width: 600px) { .fs-p-151 .fs-thermage-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 라벨바는 카드 «아래 끝»에 붙는 색면이다. 예전에는 20px 안쪽으로 들어온 채
   13px 떠 있어 카드 안에 놓인 버튼처럼 읽혔다 — 간격 0 · 풀폭으로 붙인다. */
.fs-p-151 .fs-thermage-tl__item {
  display: grid; justify-items: stretch; gap: 0;
  background: var(--fs-white); padding: 0;
}
.fs-p-151 .fs-thermage-tl__item img {
  display: block; justify-self: center;
  inline-size: clamp(70px, 58px + 2.4vw, 100px); block-size: auto;
  margin-block: var(--fs-sp-6);
}
.fs-p-151 .fs-thermage-tl__item .fs-labelbar { inline-size: 100%; }

/* --------------------------------------------------------------------------
   8. A05 · 시술 부위 존 맵
   -------------------------------------------------------------------------- */
.fs-p-151 .fs-thermage-zone { display: grid; gap: var(--fs-gap-col); align-items: center; }
@media (min-width: 1024px) {
  .fs-p-151 .fs-thermage-zone { grid-template-columns: minmax(0, 640fr) minmax(0, 700fr); }
}
.fs-p-151 .fs-thermage-zone__copy .fs-thermage-zone__list {
  list-style: none; margin: var(--fs-sp-9) 0 0; padding: 0;
  display: grid; gap: var(--fs-gap-card); grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fs-p-151 .fs-thermage-zone__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--fs-sp-4);
  padding: var(--fs-sp-4) var(--fs-sp-5);
  background: var(--fs-cream-2); border-inline-start: 2px solid var(--fs-teal);
}
.fs-p-151 .fs-thermage-zone__list img { display: block; inline-size: clamp(38px, 30px + 1.6vw, 56px); block-size: auto; }
.fs-p-151 .fs-thermage-zone__list span { font-size: var(--fs-t-sm); font-weight: 600; color: var(--fs-ink-soft); }
.fs-p-151 .fs-thermage-zone__copy .fs-quote { margin-block-start: var(--fs-sp-6); }
.fs-p-151 .fs-thermage-zone__fig { position: relative; margin: 0; inline-size: 100%; max-inline-size: 560px; justify-self: center; }
.fs-p-151 .fs-thermage-zone__fig img { display: block; inline-size: 100%; block-size: auto; }
.fs-p-151 .fs-thermage-zone__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: var(--fs-teal-dk); }
.fs-p-151 .fs-thermage-zone__tag {
  position: absolute; margin: 0; transform: translateY(-50%); white-space: nowrap;
  /* 360px 에서 11px 로 떨어져 qa 「12px 미만」에 걸렸다 — 하한만 12px 로 올린다 */
  font-size: clamp(12px, 8.6px + 0.94vw, 17px); font-weight: 700; color: var(--fs-teal-dk);
}
.fs-p-151 .fs-thermage-zone__tag--eye  { inset-inline-start: 82.0%; inset-block-start: 39.1%; }
.fs-p-151 .fs-thermage-zone__tag--nas  { inset-inline-start: 82.0%; inset-block-start: 63.7%; }
.fs-p-151 .fs-thermage-zone__tag--chk  { inset-inline-end: 82.0%;  inset-block-start: 53.9%; }
.fs-p-151 .fs-thermage-zone__tag--mth  { inset-inline-end: 82.0%;  inset-block-start: 68.8%; }
.fs-p-151 .fs-thermage-zone__tag--jaw  { inset-inline-end: 82.0%;  inset-block-start: 78.1%; }

.fs-p-151 .fs-thermage-zone__thumbs {
  list-style: none; margin: var(--fs-gap-title) 0 0; padding: 0;
  display: grid; gap: var(--fs-gap-card); grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px)  { .fs-p-151 .fs-thermage-zone__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-151 .fs-thermage-zone__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fs-p-151 .fs-thermage-zone__thumbs figure { margin: 0; display: grid; }
.fs-p-151 .fs-thermage-zone__thumbs img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 6 / 5; object-fit: cover;
}

/* --------------------------------------------------------------------------
   9. A17 · 설계 원칙 캐러셀
   -------------------------------------------------------------------------- */
.fs-p-151 .fs-thermage-principle__text .fs-num { color: var(--fs-teal-dk); }
.fs-p-151 .fs-thermage-principle__text > * + * { margin-block-start: var(--fs-sp-4); }
.fs-p-151 .fs-thermage-principle__quote {
  margin-block-start: var(--fs-sp-7); padding-inline-start: var(--fs-sp-5);
  border-inline-start: 2px solid var(--fs-teal);
  font-size: var(--fs-t-quote); font-weight: 600; color: var(--fs-teal-dk);
}
.fs-p-151 .fs-thermage-principle__fig { margin: 0; }
.fs-p-151 .fs-thermage-principle__fig img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover;
}

/* --------------------------------------------------------------------------
   10. A24 · 울써마지 PICK + CTA
   -------------------------------------------------------------------------- */
.fs-p-151 .fs-thermage-pick { list-style: none; margin: var(--fs-gap-title) 0 0; padding: 0; display: grid; gap: var(--fs-gap-card); }
@media (min-width: 600px) { .fs-p-151 .fs-thermage-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fs-p-151 .fs-thermage-pick__item {
  display: grid; justify-items: center; gap: var(--fs-sp-4);
  background: var(--fs-white); padding: var(--fs-sp-8) var(--fs-sp-5) 0;
}
.fs-p-151 .fs-thermage-pick__item img {
  display: block; inline-size: auto; block-size: clamp(150px, 118px + 6.4vw, 230px); max-inline-size: 100%;
}
/* 카드 아래 끝에 붙는 색면 — 안쪽 여백을 음수 마진으로 되돌려 풀폭으로 만든다.
   (안쪽으로 들어온 채 떠 있으면 바로 아래 CTA 버튼과 같은 모양이 된다) */
.fs-p-151 .fs-thermage-pick__item .fs-labelbar {
  justify-self: stretch;
  margin-block-start: var(--fs-sp-5);
  margin-inline: calc(var(--fs-sp-5) * -1);
}
.fs-p-151 .fs-thermage-pick__cap { font-size: var(--fs-t-sm); color: var(--fs-muted); text-align: center; }
.fs-p-151 .fs-thermage-cta { margin-block-start: var(--fs-gap-title); }

/* --------------------------------------------------------------------------
   11. A05 존 맵 = 이 페이지의 다크 밴드  [LOCK 5]
       9개 섹션 중 6번째. 시술 상세 페이지는 다크 밴드가 필수인데 0개였다.
       자리를 여기로 잡은 근거: 형제 페이지 149(레이저리프팅)가 같은 문구
       (「많이 쏘는 것이 중요한 것이 아니라」 + 얼굴 비율 분석·처짐 방향 파악·
       피부 두께와 탄력 밀도·볼륨 감소 부위 확인)를 다크 밴드로 쓴다.
       A06 을 다크로 돌리는 선택지는 버렸다 — POINT 카드는 2차 규칙상
       「크림 밴드 위 흰 정사각」이다.
   -------------------------------------------------------------------------- */
/* 항목 칩은 밝은 면을 유지한다. 아이콘이 --fs-teal-dk 선화 PNG 라
   다크 밴드에 그대로 얹으면 대비 1.5:1 로 사라진다(색을 바꿀 수 없는 래스터). */
.fs-p-151 .fs-thermage-zone-sec .fs-thermage-zone__list li { background: var(--fs-cream-2); }
/* 사진 위 라벨은 밴드가 아니라 «사진» 위에 얹힌다 — 틸을 유지한다.
   fs.css 의 .fs-section--ink2 :is(p){color:inherit} 와 명시도가 같아(0,2,0)
   나중에 오는 이 규칙이 이긴다. 순서에 기대므로 값을 다시 못박아 둔다. */
.fs-p-151 .fs-thermage-zone-sec .fs-thermage-zone__tag { color: var(--fs-teal-dk); }

/* --------------------------------------------------------------------------
   12. A17 캐러셀은 콘텐츠 폭 밖으로 흘려 잘리게 둔다  [LOCK 6]
       뷰포트를 1440 으로 잘라내면 「한 화면에 딱 맞는 캐러셀」이 되어
       이 사이트의 모양이 아니다. 57 의 .fs-nose-tx__viewport 와 같은 처리 —
       뷰포트 폭(=슬라이드 폭 계산 기준)은 그대로 두고 overflow 만 푼다.
       잘림은 fs.css:211·219 의 html/body overflow-x: clip 이 맡는다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-151 .fs-carousel__viewport { overflow: visible; }
}

/* --------------------------------------------------------------------------
   13. 마이크로 인터랙션 — 48 에서 검증된 두 가지
   -------------------------------------------------------------------------- */

/* 13-1 섹션 제목 뒤 70px 틸 선 (delay .5s) */
.fs-p-151 .fs-nose-head h2,
.fs-p-151 .fs-thermage-intro__copy h2,
.fs-p-151 .fs-thermage-zone__copy h2,
.fs-p-151 .fs-sec-head__title { position: relative; }

.fs-p-151 .fs-nose-head h2::after,
.fs-p-151 .fs-thermage-intro__copy h2::after,
.fs-p-151 .fs-thermage-zone__copy h2::after,
.fs-p-151 .fs-sec-head__title::after {
  content: "";
  display: block;
  inline-size: 70px;
  block-size: 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;
}
/* 가운데정렬 헤드에서는 선도 가운데에서 자란다 */
.fs-p-151 .fs-nose-head.fs-center h2::after {
  margin-inline: auto;
  transform-origin: center;
}
/* ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
   fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
   → 기본은 「그어진 상태」, 실제 리빌 대상에만 초기 은닉. */
:root.fs-js .fs-p-151 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-151 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* 13-2 호버 — 프레임 고정, 사진만 scale(1.045). 그림자는 쓰지 않는다.
   틸트가 걸린 도해 카드는 대상에서 뺀다(한 요소에 두 호버 반응을 겹치지 않는다).
   transform-origin 을 바닥으로 두는 것이 핵심이다 — 가운데로 두면 사진이
   아래로 6px 자라 라벨바를 덮어 LOCK 2 의 「간격 0」이 호버에서만 깨진다. */
.fs-p-151 .fs-thermage-tip__media { overflow: hidden; }
.fs-p-151 .fs-thermage-tip__media img {
  transform-origin: 50% 100%;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-151 .fs-thermage-tip__media:hover img { transform: scale(1.045); }

  /* 라벨바는 사진과 같이 커지면 안 된다 — 글자가 흔들린다. 색만 한 단계 */
  .fs-p-151 .fs-thermage-spec__item:hover .fs-labelbar,
  .fs-p-151 .fs-thermage-zone__thumbs li:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --------------------------------------------------------------------------
   14. reduced-motion — 얹은 모션을 전부 정지 상태로 확정한다.
        (리빌·틸트 자체는 fs.css 가 무효화한다)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-151 .fs-nose-head h2::after,
  .fs-p-151 .fs-thermage-intro__copy h2::after,
  .fs-p-151 .fs-thermage-zone__copy h2::after,
  .fs-p-151 .fs-sec-head__title::after { transform: scaleX(1) !important; transition: none !important; }

  .fs-p-151 .fs-thermage-tip__media img { transform: none !important; transition: none !important; }
}

/* ==========================================================================
   2026-09-11 승인자 지시 「히어로 속 모델이 너무 안 보여 — zoom out 하거나 올려서 얼굴이 안 잘리게」
   cover 풀블리드는 폭 주도라 1280 에서는 머리가 헤더에 먹히고 2560 에서는 크롭이 더 내려가
   얼굴이 잘렸다(object-position 의 % 값은 넘침에 비례해 폭마다 다른 곳을 보여 준다).
   → «줌아웃»: 사진 상자를 원본 비율(1.791) 그대로 히어로 높이에 맞춰 오른쪽에 붙인다.
     상자 비율 = 원본 비율이라 cover 가 사실상 contain — 어느 폭에서도 사진이 통째로 보인다.
     비어 있는 왼쪽은 히어로 배경색(사진 왼변 실측 #EBE8D9)이 채우고, 사진 왼변 16% 를 마스크로
     녹여 이음매를 없앤다. 56 의 «오른쪽 사진 / 왼쪽 카피» 구도와 같은 구조가 된다.
   우측 오프셋 130px — 원본에서 얼굴이 우변에 붙어 있어 어느 폭에서도 고정 퀵바(우측 70px) 뒤로
   들어갔다. 사진을 그만큼 왼쪽으로 물려 얼굴을 퀵바 앞으로 낸다(1280 실측 확인).
   높이·모바일(<1024) 스택 배치는 그대로다.
   ========================================================================== */
@media (min-width: 1024px) {
  .fs-p-151 .fs-thermage-hero { background: #EBE8D9; }
  .fs-p-151 .fs-thermage-hero .fs-hero__bg {
    inset-block-start: 0px;
    height: calc(100% - 0px);
    inset-inline-start: auto; inset-inline-end: 130px;
    width: calc((clamp(520px, 380px + 12vw, 720px) - 0px) * 1.7910);
  }
  .fs-p-151 .fs-thermage-hero .fs-hero__bg picture,
  .fs-p-151 .fs-thermage-hero .fs-hero__bg img { width: 100%; height: 100%; }
  .fs-p-151 .fs-thermage-hero .fs-hero__bg img {
    object-fit: cover;
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 86%, transparent 100%);
  }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 쁘띠/레이저 = 라이트 로즈 #F3E3E0 (body.fs-cat-petit) + 컬러 워시
   승인자 지시 「150·140·151 세 페이지의 히어로만 …」. 사진: i2i «인물 그대로, 크림/민트 배경을 라이트 로즈 → 모델 뒤 웜 화이트 글로우로»
   → hero-model-duo(-mo).jpg (구도 동일). 아이보리 바탕(#EBE5D5/#EBE8D9)·헤더 안개 없음(content:none) 은 공용 블록 (0,2,2) 가 틴트·안개로 덮는다.
   킥커 잉크 → teal-dk(카테고리 통일). <1024 스택 밴드 #EBE5D5 → 틴트. 줌아웃 상자(비율 1.791 · 우측 130px · 16%/86% 마스크)는 그대로.
   ========================================================================== */
.fs-p-151 .fs-thermage-hero .fs-hero__kicker { color: var(--fs-teal-dk); }
.fs-p-151 .fs-thermage-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), .70) 16%, rgba(var(--fs-cat), .30) 30%, rgba(var(--fs-cat), 0) 42%);
}
@media (max-width: 1023px) {
  .fs-p-151 .fs-thermage-hero .fs-hero__bg::after { content: none; }
  .fs-p-151 .fs-thermage-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}
/* 2026-09-14 승인자 「150·140·151 모델 위치를 143(겹주름 교정)과 같게 — 위치만」. 143 은 머리 중심 x = 69.2vw.
   상자를 왼쪽으로 밀면 모델 오른쪽(팔꿈치·상의)이 상자 변에서 잘리므로 사진 오른쪽을 300px 아웃페인트(2220×1072, i2i «빈 띠만 채워라»)해
   폭만 넓힌다 — 배율(H/1072)·우측 130px·마스크 그대로, 모델은 300×배율만큼 왼쪽으로. 78% → 69%. */
@media (min-width: 1024px) {
  .fs-p-151 .fs-thermage-hero .fs-hero__bg { width: calc((clamp(520px, 380px + 12vw, 720px) - 0px) * 2.0709); }
}
/* 위와 같은 지시 — 우측 130px 정렬 대신 왼쪽 좌표: left = 69.2vw − (머리 중심 비율 .6443 × 상자폭). 배율·높이 무변경. */
@media (min-width: 1024px) {
  .fs-p-151 .fs-thermage-hero .fs-hero__bg {
    inset-inline-start: calc(69.2vw - 1.3342 * clamp(520px, 380px + 12vw, 720px)); inset-inline-end: auto;
  }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-151-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   줄바꿈: balance(인트로 인용·리드, 팁 설명, 스펙 제목·설명, 섹션 부제, 원칙 본문·인용, PICK 리드·캡션) ·
           nbsp 4(「리프팅 장비입니다」 · 「약 6~12개월」 · 「먼저 봅니다」 · 「적용하지 않습니다」 — 줄 수 무변화) ·
           문장 가운데 <br> 4곳 → 공백 + <br class="fs-pc-only">(§1-7 — 스펙 설명 3 · PICK 리드, PC 는 그대로).
   고아 줄(전): 360 「…전달하는 / 시술이 아닙니다.」「…해석해야 하는 / 리프팅입니다.」「…설계하는지 / 가 핵심입니다.」(.fs-mark inline-block, §7-19) ·
               390 「…리프팅 / 장비입니다.」 · 768 「…에너지 전달이 / 가능합니다.」「…경험할 수 / 있습니다.」.
   배치(<600): ① 존 4칸 — 아이콘 옆 글 칸이 70px 라 「피부 / 두께와 / 탄력 밀도」 3줄 → 아이콘 위 · 글 아래.
               ② PICK 장비 2장 1열(560px) → 2열(600 이상과 같은 짜임, §2 A) — 캡션 1·2줄이 섞여 라벨바가 3px 어긋나 캡션 행을 1fr 로.
               ③ 존 인용의 형광 칸은 inline 으로 풀어 칸 안에서 접히게(뒤 「가 핵심입니다」 가 혼자 떨어지지 않게, 줄마다 칸 복제).
   ========================================================================== */
.fs-p-151 #intro .fs-quote,
.fs-p-151 #intro .fs-nose-lead,
.fs-p-151 .fs-thermage-tip__note,
.fs-p-151 .fs-thermage-spec__title,
.fs-p-151 .fs-thermage-spec__desc,
.fs-p-151 .fs-sec-head__sub,
.fs-p-151 .fs-thermage-principle__text .fs-body,
.fs-p-151 .fs-thermage-principle__quote,
.fs-p-151 #pick .fs-nose-lead,
.fs-p-151 .fs-thermage-zone__list span,
.fs-p-151 .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-151 .fs-thermage-zone__list li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--fs-sp-2);
  }
  .fs-p-151 .fs-thermage-zone__list span { word-break: keep-all; }
  .fs-p-151 .fs-thermage-zone .fs-quote .fs-mark {
    display: inline;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
  }
  .fs-p-151 .fs-thermage-pick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-sp-4);
  }
  /* 캡션 줄 수가 다른 두 장의 라벨바 높이를 맞춘다 — 캡션 행이 남는 높이를 먹고 바는 맨 아래 */
  .fs-p-151 .fs-thermage-pick__item { padding: var(--fs-sp-6) var(--fs-sp-3) 0; grid-template-rows: auto 1fr auto; }
  .fs-p-151 .fs-thermage-pick__cap { align-self: start; }
  .fs-p-151 .fs-thermage-pick__item .fs-labelbar { margin-inline: calc(var(--fs-sp-3) * -1); }
  .fs-p-151 .fs-thermage-pick__cap { word-break: keep-all; }
}