/* ==========================================================================
   [150] 버츄RF — 페이지 전용 CSS
   · 모든 셀렉터는 .fs-p-150 스코프.  · 색은 --fs-* 토큰만 사용(새 hex 0개).
   · 전용 컴포넌트: fs-virtue-rf-strip / -steps / -tech / -hp / -depth /
                    -ind / -target
   ========================================================================== */

.fs-p-150 { --vrf-lift: clamp(44px, 32.4px + 3.2vw, 94px); }

/* --- 1. 히어로 — 밝은 사진이라 카피를 잉크색으로 내린다(57 방식) ---------- */
/* 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면. 히어로 좌측은 딥 차콜이라
   흰 GNB 가 상단 전 구간에서 6:1 이상이다 — fs.css 기본 틴트·스크림은 옅게 다시 깐다. */
.fs-p-150 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색 — 화면은 그대로지만 흰 번쩍임과
   qa.py 의 «흰 GNB 1:1» 오탐이 사라진다. */
.fs-p-150 .fs-page--overlay { background: #33302B; }
/* 렌더 픽셀 실측: 스크림 없이 4.07:1 (AA 4.5 미달). 아래 값이면 전 폭 5:1 이상이다. */
/* 2026-09-11 승인자 지시 「56 처럼 상단 메뉴바 그라디에이션」 — 위 검정 스크림은 사진 상단이 이미
   밝기 20 대라 눈에 안 보였다. 보이는 효과는 밝은 안개뿐 — 80·82 와 같은 흰 .30 (높이는 fs.css 기본). */
.fs-p-150 .fs-header--overlay::before { background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.15) 55%, rgba(255,255,255,0) 100%); }
.fs-p-150 .fs-gnb__link { font-weight: 400; opacity: .92; }
.fs-p-150 .fs-gnb__link:hover,
.fs-p-150 .fs-gnb__link:focus-visible { opacity: 1; }
.fs-p-150 .fs-util__link { opacity: .8; }
.fs-p-150 .fs-util__link:hover { opacity: 1; }
.fs-p-150 .fs-util__sep { opacity: .3; }

.fs-p-150 .fs-virtue-rf-hero { background: #33302B; }
.fs-p-150 .fs-virtue-rf-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-p-150 .fs-virtue-rf-hero .fs-hero__bg img { object-position: 50% 4%; }
/* 600~1023 은 세로 컷이 위쪽만 잘려 모델 얼굴이 하단에서 반토막 난다.
   30% 내리면 카피가 앉는 빈 벽은 남고 얼굴 전체가 프레임 안에 든다. */
@media (max-width: 1023px) {
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg img { object-position: 50% 30%; }
}
.fs-p-150 .fs-virtue-rf-hero .fs-hero__copy {
  justify-items: start;
  text-align: start;
  gap: clamp(14px, 10.2px + 1.06vw, 30px);
  max-inline-size: min(100%, 42ch);
}
.fs-p-150 .fs-virtue-rf-hero .fs-hero__kicker {
  display: flex; flex-wrap: wrap; gap: var(--fs-sp-3) var(--fs-sp-5);
  letter-spacing: var(--fs-ls-wide);
  font-weight: 600;
  color: var(--fs-on-dark);
}
/* 해시태그가 '#' 뒤에서 쪼개지지 않게 태그 단위로 묶는다 */
.fs-p-150 .fs-virtue-rf-hero .fs-hero__kicker span { white-space: nowrap; }
.fs-p-150 .fs-virtue-rf-hero .fs-hero__title {
  font-size: var(--fs-t-display);
  color: var(--fs-on-dark);
}
/* 모바일 세로 컷은 인물이 아래 절반에 있다 — 카피를 가운데 두면 얼굴 위로 올라온다.
   위쪽 빈 벽면에 붙이고 헤더 높이만큼만 내린다. */
@media (max-width: 1023px) {
  .fs-p-150 .fs-virtue-rf-hero { align-items: start; }
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__inner {
    padding-block-start: calc(var(--fs-header-h) + clamp(20px, 12.5px + 2.08vw, 40px));
  }
}
.fs-p-150 .fs-virtue-rf-hero__lead {
  font-size: var(--fs-t-lead);
  line-height: var(--fs-lh-body);
  color: var(--fs-on-dark);
  opacity: .88;
}

/* --- 2. 히어로 하단 걸침 핸드피스 스트립 ---------------------------------
   flow-root 로 부모–자식 마진 상쇄를 끊어야 섹션째 끌려 올라가지 않는다. */
.fs-p-150 .fs-virtue-rf-intro { padding-block-start: 0; }
.fs-p-150 .fs-virtue-rf-intro > .fs-container { display: flow-root; }
.fs-p-150 .fs-virtue-rf-strip {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 3.7px + 0.64vw, 16px);
  max-width: min(100%, 760px); margin-inline: auto;
  margin-block: calc(-1 * var(--vrf-lift)) clamp(40px, 30.7px + 2.56vw, 80px);
}
.fs-p-150 .fs-virtue-rf-strip__card {
  display: grid; align-content: start;
  background: var(--fs-white);
  border: 1px solid var(--fs-line); border-block-end: 0;
  color: inherit; text-decoration: none;
}
.fs-p-150 .fs-virtue-rf-strip__card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.fs-p-150 .fs-virtue-rf-strip__card .fs-labelbar { background: var(--fs-teal-text); }
.fs-p-150 .fs-virtue-rf-strip__card:hover .fs-labelbar,
.fs-p-150 .fs-virtue-rf-strip__card:focus-visible .fs-labelbar { background: var(--fs-teal-dk); }

/* --- 3. 정의 2단 --------------------------------------------------------- */
.fs-p-150 .fs-virtue-rf-clip { display: block; overflow: hidden; }
.fs-p-150 .fs-virtue-rf-intro__fig { display: grid; background: var(--fs-white); }
.fs-p-150 .fs-virtue-rf-intro__fig img { display: block; width: 100%; height: auto; }
.fs-p-150 .fs-virtue-rf-effects {
  display: flex; flex-wrap: wrap; gap: var(--fs-sp-3);
  margin-block-start: clamp(20px, 15.4px + 1.28vw, 40px);
}

/* --- 4. 시술원리 4단계 --------------------------------------------------- */
.fs-p-150 .fs-virtue-rf-steps {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 600px)  { .fs-p-150 .fs-virtue-rf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-150 .fs-virtue-rf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-p-150 .fs-virtue-rf-step {
  position: relative;
  display: grid; align-content: start;
  background: var(--fs-white);
}
.fs-p-150 .fs-virtue-rf-step__fig { display: grid; margin: 0; }
.fs-p-150 .fs-virtue-rf-step__fig img { display: block; width: 100%; height: auto; }
.fs-p-150 .fs-virtue-rf-step__txt {
  padding: clamp(14px, 11.7px + 0.64vw, 24px) var(--fs-sp-5) clamp(18px, 14.3px + 1.02vw, 34px);
  text-align: center;
}
@media (min-width: 1024px) {
  .fs-p-150 .fs-virtue-rf-step:not(:last-child)::after {
    content: ""; position: absolute;
    inset-inline-end: -15px; inset-block-start: 27%;
    width: 11px; height: 11px;
    border-block-start: 2px solid var(--fs-teal);
    border-inline-end: 2px solid var(--fs-teal);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* --- 5. 4가지 독자적 기술 POINT 카드 ------------------------------------- */
.fs-p-150 .fs-virtue-rf-tech {
  background: var(--fs-cream);
  gap: clamp(14px, 11.5px + 0.7vw, 26px);
  padding-block: clamp(22px, 18.3px + 1.02vw, 38px) clamp(24px, 19.4px + 1.28vw, 44px);
}
.fs-p-150 .fs-virtue-rf-tech .fs-card__icon { width: clamp(84px, 76.6px + 2.05vw, 116px); }
.fs-p-150 .fs-virtue-rf-tech .fs-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-150 .fs-virtue-rf-tech__name {
  font-size: var(--fs-t-h3); font-weight: 700; line-height: 1.25;
  text-align: center; color: var(--fs-teal-dk);
}
.fs-p-150 .fs-virtue-rf-tech .fs-card__caption { margin-block-start: var(--fs-sp-3); color: var(--fs-ink-soft); }

/* --- 6. 핸드피스 3종 셀렉터 (시그니처) -----------------------------------
   fs.js 가 [data-fs-carousel-dots] 안의 <button> 을 그대로 도트로 배선한다.
   기본 도트(원형 14px + radial-gradient)를 전부 눌러 탭 스트립으로 되돌린다. */
.fs-p-150 .fs-virtue-rf-hp { position: relative; margin-block-start: var(--fs-gap-title); }
.fs-p-150 .fs-virtue-rf-hp__tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 3.7px + 0.64vw, 16px);
  margin-block: 0 clamp(26px, 20.5px + 1.54vw, 50px);
  justify-content: stretch; align-items: stretch;
}
.fs-p-150 .fs-virtue-rf-hp__tabs .fs-virtue-rf-hp__tab,
.fs-p-150 .fs-virtue-rf-hp__tabs .fs-carousel__dot {
  display: grid; align-content: start;
  width: auto; aspect-ratio: auto; padding: 0;
  border: 2px solid var(--fs-line);
  border-radius: var(--fs-radius-0);
  background: var(--fs-white); background-image: none; box-shadow: none;
  cursor: pointer; opacity: .68;
  transition: opacity var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease);
}
.fs-p-150 .fs-virtue-rf-hp__tabs .fs-virtue-rf-hp__tab.is-active,
.fs-p-150 .fs-virtue-rf-hp__tabs .fs-carousel__dot.is-active {
  width: auto; opacity: 1;
  border-color: var(--fs-teal);
  background: var(--fs-white); background-image: none; box-shadow: none;
}
.fs-p-150 .fs-virtue-rf-hp__tab img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.fs-p-150 .fs-virtue-rf-hp__tab .fs-labelbar { background: var(--fs-fill-gray); }
.fs-p-150 .fs-virtue-rf-hp__tabs .fs-carousel__dot.is-active .fs-labelbar,
.fs-p-150 .fs-virtue-rf-hp__tab.is-active .fs-labelbar { background: var(--fs-teal-text); }

.fs-p-150 .fs-virtue-rf-hp__viewport { overflow: hidden; }
.fs-p-150 .fs-virtue-rf-hp__track { display: flex; align-items: stretch; }
.fs-p-150 .fs-virtue-rf-hp__slide { flex: 0 0 100%; max-width: 100%; min-width: 0; }
.fs-p-150 .fs-virtue-rf-hp__inner { display: grid; gap: var(--fs-gap-col); align-items: start; }
@media (min-width: 1024px) {
  .fs-p-150 .fs-virtue-rf-hp__inner { grid-template-columns: minmax(0, 660fr) minmax(0, 700fr); }
}
.fs-p-150 .fs-virtue-rf-hp__figs { display: grid; gap: var(--fs-sp-3); }
@media (min-width: 600px) {
  .fs-p-150 .fs-virtue-rf-hp__figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.fs-p-150 .fs-virtue-rf-hp__fig { display: grid; margin: 0; background: var(--fs-white); }
/* 종횡비가 제각각인 제품컷을 같은 4:3 상자에 contain 으로 앉혀 라벨바 높이를 맞춘다 */
.fs-p-150 .fs-virtue-rf-hp__fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: contain; background: var(--fs-white);
}
.fs-p-150 .fs-virtue-rf-hp__num { color: var(--fs-teal-dk); }
.fs-p-150 .fs-virtue-rf-hp__name {
  margin-block-start: var(--fs-sp-1);
  font-size: var(--fs-t-h2); font-weight: 700; line-height: 1.2;
  letter-spacing: var(--fs-ls-tight);
}
.fs-p-150 .fs-virtue-rf-hp__desc { margin-block-start: clamp(12px, 10.2px + 0.51vw, 20px); }
.fs-p-150 .fs-virtue-rf-hp__indhead { margin-block-start: clamp(20px, 15.4px + 1.28vw, 40px); }
.fs-p-150 .fs-virtue-rf-hp__nav {
  display: flex; gap: var(--fs-sp-3);
  margin-block-start: clamp(22px, 18.3px + 1.02vw, 38px);
  justify-content: center;
}

/* --- 7. 적응증 아이콘 칩 -------------------------------------------------- */
.fs-p-150 .fs-virtue-rf-ind {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--fs-sp-3); margin-block-start: var(--fs-sp-4);
}
.fs-p-150 .fs-virtue-rf-ind > li {
  display: grid; justify-items: center; align-content: start; gap: var(--fs-sp-2);
  padding: var(--fs-sp-5) var(--fs-sp-3);
  background: var(--fs-white);
  border-block-end: 2px solid var(--fs-teal);
}
.fs-p-150 .fs-virtue-rf-ind img { display: block; width: clamp(46px, 41.4px + 1.28vw, 66px); height: auto; }
.fs-p-150 .fs-virtue-rf-ind__label {
  font-size: var(--fs-t-sm); font-weight: 600; text-align: center;
  color: var(--fs-ink-soft); letter-spacing: -0.025em;
}

/* --- 8. 니들 깊이 눈금자 -------------------------------------------------- */
.fs-p-150 .fs-virtue-rf-depth {
  display: grid; gap: var(--fs-gap-col); align-items: center;
  max-width: min(100%, 880px); margin-inline: auto;
  margin-block-start: clamp(40px, 30.7px + 2.56vw, 80px);
  padding: clamp(24px, 19.4px + 1.28vw, 44px);
  background: var(--fs-white);
}
@media (min-width: 600px) {
  .fs-p-150 .fs-virtue-rf-depth { grid-template-columns: auto minmax(0, 1fr); }
}
.fs-p-150 .fs-virtue-rf-depth__rail {
  position: relative; display: flex; gap: var(--fs-sp-4);
  margin: 0; padding-block: var(--fs-sp-2);
}
.fs-p-150 .fs-virtue-rf-depth__needle { display: block; width: 24px; height: 320px; }
.fs-p-150 .fs-virtue-rf-depth__ticks { position: relative; width: 92px; height: 320px; }
.fs-p-150 .fs-virtue-rf-depth__ticks > li {
  position: absolute; inset-inline-start: 0; inset-block-start: var(--fs-vrf-t, 0%);
  transform: translateY(-50%);
  display: flex; align-items: center; gap: var(--fs-sp-1);
  font-size: var(--fs-t-sm); font-weight: 700; color: var(--fs-ink-soft);
  white-space: nowrap;
}
.fs-p-150 .fs-virtue-rf-depth__tick { display: block; width: 18px; height: 2px; background: var(--fs-teal); }
.fs-p-150 .fs-virtue-rf-depth__ticks > li:first-child,
.fs-p-150 .fs-virtue-rf-depth__ticks > li:last-child { color: var(--fs-teal-dk); }

/* --- 9. 시술대상 --------------------------------------------------------- */
.fs-p-150 .fs-virtue-rf-target-sec .fs-virtue-rf-target-grid {
  display: grid; gap: var(--fs-gap-col); align-items: start;
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 1024px) {
  .fs-p-150 .fs-virtue-rf-target-sec .fs-virtue-rf-target-grid {
    grid-template-columns: minmax(0, 470fr) minmax(0, 890fr);
  }
}
.fs-p-150 .fs-virtue-rf-target__photo { display: grid; margin: 0; }
.fs-p-150 .fs-virtue-rf-target__photo img { display: block; width: 100%; height: auto; }
.fs-p-150 .fs-virtue-rf-target-list { display: grid; gap: var(--fs-sp-5); }
.fs-p-150 .fs-virtue-rf-target {
  display: grid; gap: var(--fs-sp-4);
  padding: clamp(18px, 15.2px + 0.77vw, 30px) var(--fs-sp-5);
  background: var(--fs-cream-2);
  border-block-start: 2px solid var(--fs-teal);
}
@media (min-width: 600px) {
  .fs-p-150 .fs-virtue-rf-target {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center; column-gap: var(--fs-gap-col);
    border-block-start: 0; border-inline-start: 2px solid var(--fs-teal);
  }
}
.fs-p-150 .fs-virtue-rf-target__icon { display: grid; place-items: center start; }
@media (min-width: 600px) { .fs-p-150 .fs-virtue-rf-target__icon { place-items: center; } }
.fs-p-150 .fs-virtue-rf-target__icon img { display: block; width: clamp(64px, 56.6px + 2.05vw, 96px); height: auto; }
.fs-p-150 .fs-virtue-rf-target > span:last-child {
  display: grid; justify-items: start; gap: var(--fs-sp-3);
}
.fs-p-150 .fs-virtue-rf-target__txt {
  display: block;
  font-size: var(--fs-t-lead); line-height: 1.5; letter-spacing: -0.025em;
}

/* --- 11. 모션 무효화 ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-150 .fs-virtue-rf-hp__tabs .fs-virtue-rf-hp__tab,
  .fs-p-150 .fs-virtue-rf-hp__tabs .fs-carousel__dot,
  .fs-p-150 .fs-virtue-rf-strip__card .fs-labelbar { transition: none !important; }
}

/* ==========================================================================
   V70 · 진단·수정 패스 — 2026-08-27
   검출 결과: D x1(인접 섹션의 도해가 같은 쪽) · E x2(밝은 밴드 위 흰 카드 4장 이상)
   + vibecheck L5 WARN(다크 밴드 0개, 시술 상세는 필수).
   정보는 하나도 빼지 않는다. 문구·에셋 무변경.
   ========================================================================== */

/* --------------------------------------------------------------------------
   V1. 다크 밴드 — 「4가지 독자적 기술」이 페이지 중반을 끊는다   [LOCK 5]
   8개 섹션이 흰–크림–흰–크림… 으로만 이어져 다크 밴드가 0개였다.
   4번째 섹션에 놓는다 — 확정 시안 57(9개 중 4번째)·91(8개 중 4번째)과 같은 자리다.
   ★ POINT 카드는 애초에 크림 면(--fs-cream)이라 카드 «안쪽» 은 한 줄도 손대지 않는다.
     이름(--fs-teal-dk on 크림 6.17:1) · 캡션(--fs-ink-soft) · 필 · 틸 아이콘 전부 그대로다.
   ★ 킥커는 fs.css:2669 가 --ink2 밴드에서 #49BCBD(4.77:1)로 자동 전환한다.
   ★ 대제목을 .fs-h2 로 두면 LOCK 7(d)「.fs-h2 는 color rgb(17,17,17)」에 걸린다.
     57 .fs-nose-compare-title · 91 .about-system__title 과 같이 «다크 밴드 대제목» 으로 뺐다.
   여백은 57 의 다크 밴드(.fs-nose-compare-sec)와 같은 대칭 --fs-sec-pb 다.
   -------------------------------------------------------------------------- */
.fs-p-150 .fs-virtue-rf-tech-sec { padding-block: var(--fs-sec-pb); }
/* 다크 면 위에서는 카드 아랫변이 어긋난 게 바로 보인다 —
   1024px 에서 「통합 펄스 고주파 시스템」만 2줄이라 2·4번 카드가 더 길었다.
   .fs-card--point 는 align-content:center 라 높이를 채워도 내용은 가운데에 남는다. */
.fs-p-150 .fs-virtue-rf-tech-sec .fs-nose-cards > li { display: grid; }
.fs-p-150 .fs-virtue-rf-tech { height: 100%; }
/* 60px 디스플레이에서 .fs-mark 기본 패딩(2px 4px)은 글자에 달라붙는다 — 57 실측값 */
.fs-p-150 .fs-virtue-rf-hl { padding: 2px 10px; line-height: 1; }

/* --------------------------------------------------------------------------
   V2. 시술대상 — 좌우 축 반전                                     [V70 D]
   앞 섹션(핸드피스)이 「좌 도해 / 우 카피」인데 시술대상도 「좌 사진 / 우 목록」이라
   두 섹션이 같은 리듬으로 붙어 단조롭다. 여기서 축을 뒤집어 리듬을 끊는다.
   (48 §4 와 같은 처방 — 겹침·비대칭은 주지 않는다. 축 반전만으로 충분하다)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-150 .fs-virtue-rf-target-sec .fs-virtue-rf-target-grid {
    grid-template-columns: minmax(0, 890fr) minmax(0, 470fr);
  }
  .fs-p-150 .fs-virtue-rf-target__photo { order: 2; }
  .fs-p-150 .fs-virtue-rf-target-list   { order: 1; }
}

/* --------------------------------------------------------------------------
   V3. 적응증 — 흰 칩 상자 → 세로 헤어라인 열                      [V70 E x2]
   크림 밴드 위 흰 상자가 탭 3 + 도해 2 + 적응증 3~4 + 눈금자 1 로 쌓여
   「상자의 나열」로 읽혔다. 적응증만 상자를 지우면 .fs-virtue-rf-hp__inner 안의
   흰 카드가 5장 → 2장(라벨바가 붙어야 하는 제품컷)으로 떨어진다.
   틸 강조선은 칸마다 4줄이 아니라 행 전체에 «한 줄» 로 남긴다.
   (48 §5 와 같은 처방. 모바일은 폭이 좁아 상자를 유지한다)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-150 .fs-virtue-rf-ind {
    gap: 0;
    border-block-end: 2px solid var(--fs-teal);
  }
  .fs-p-150 .fs-virtue-rf-ind > li {
    position: relative;
    background: transparent;
    border-block-end: 0;
    padding: var(--fs-sp-4) var(--fs-sp-3);
  }
  .fs-p-150 .fs-virtue-rf-ind > li + li::before {
    content: "";
    position: absolute;
    inset-block: var(--fs-sp-2);
    inset-inline-start: 0;
    width: 1px;
    background: var(--fs-line-input);
  }
}

/* --------------------------------------------------------------------------
   V4. 타이포 리듬 — 제목 뒤에 그어지는 70px 틸 선                  [48 B]
   ★ 초기 은닉을 「.is-in 이면 보이기」로 짜면 안 된다. fs.js 는 첫 화면 안에 있던
     대상에 .fs-reveal 클래스 자체를 붙이지 않아 첫 제목의 선이 영원히 안 그어진다.
     → 기본을 「그어진 상태」로 두고, .fs-reveal:not(.is-in) 에만 초기 은닉을 건다.
   -------------------------------------------------------------------------- */
.fs-p-150 .fs-nose-head h2,
.fs-p-150 .fs-virtue-rf-intro h2 { position: relative; }

.fs-p-150 .fs-nose-head h2::after,
.fs-p-150 .fs-virtue-rf-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;
}
:root.fs-js .fs-p-150 :where(.fs-reveal:not(.is-in)) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   V5. 호버 — 프레임은 고정, 사진만 움직인다                        [48 D]
   그림자는 쓰지 않는다(2차 규칙). 라벨바는 사진과 함께 커지면 글자가 흔들리므로
   색만 한 단계 내린다.
   ★ 확대는 data-fs-tilt-inner 의 «자식 img» 에만 건다. 틸트가 쓰는 inner 의
     transform 과 겹치지 않는다.
   -------------------------------------------------------------------------- */
.fs-p-150 .fs-virtue-rf-strip__card,
.fs-p-150 .fs-virtue-rf-step__fig { overflow: hidden; }

.fs-p-150 .fs-virtue-rf-clip img,
.fs-p-150 .fs-virtue-rf-strip__card img,
.fs-p-150 .fs-virtue-rf-step__fig img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-150 .fs-virtue-rf-intro__fig:hover .fs-virtue-rf-clip img,
  .fs-p-150 .fs-virtue-rf-target__photo:hover .fs-virtue-rf-clip img,
  .fs-p-150 .fs-virtue-rf-strip__card:hover img,
  .fs-p-150 .fs-virtue-rf-step:hover .fs-virtue-rf-step__fig img { transform: scale(1.045); }

  .fs-p-150 .fs-virtue-rf-intro__fig:hover > .fs-labelbar,
  .fs-p-150 .fs-virtue-rf-target__photo:hover > .fs-labelbar,
  .fs-p-150 .fs-virtue-rf-step:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --------------------------------------------------------------------------
   V6. reduced-motion — 선은 그어진 채로, 확대는 없앤다
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-150 .fs-nose-head h2::after,
  .fs-p-150 .fs-virtue-rf-intro h2::after { transform: scaleX(1) !important; transition: none !important; }

  .fs-p-150 .fs-virtue-rf-clip img,
  .fs-p-150 .fs-virtue-rf-strip__card img,
  .fs-p-150 .fs-virtue-rf-step__fig img { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   2026-09-11 승인자 지시 「히어로 속 모델이 너무 안 보여 — zoom out 하거나 올려서 얼굴이 안 잘리게」
   cover 풀블리드는 폭 주도라 1280 에서는 머리가 헤더에 먹히고 2560 에서는 크롭이 더 내려가
   얼굴이 잘렸다(object-position 의 % 값은 넘침에 비례해 폭마다 다른 곳을 보여 준다).
   → «줌아웃»: 사진 상자를 원본 비율(1.791) 그대로 히어로 높이에 맞춰 오른쪽에 붙인다.
     상자 비율 = 원본 비율이라 cover 가 사실상 contain — 어느 폭에서도 사진이 통째로 보인다.
     비어 있는 왼쪽은 히어로 배경색(사진 왼변 실측 #292823)이 채우고, 사진 왼변 16% 를 마스크로
     녹여 이음매를 없앤다. 56 의 «오른쪽 사진 / 왼쪽 카피» 구도와 같은 구조가 된다.
   위 여백 70px — 이 사진은 «원본 파일부터» 머리 꼭대기가 잘려 있다(첫 행이 머리카락). 어떤
   크롭으로도 못 살리므로 사진 상단을 헤더 띠 아래로 내려 이마가 메뉴 글자에 안 걸리게 한다.
   빈 띠는 배경색이라 머리 절단면이 배경에 묻힌다(다크 히어로라 가능한 처방).
   높이·모바일(<1024) 스택 배치는 그대로다.
   ========================================================================== */
@media (min-width: 1024px) {
  .fs-p-150 .fs-virtue-rf-hero { background: #292823; }
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg {
    inset-block-start: 70px;
    height: calc(100% - 70px);
    inset-inline-start: auto; inset-inline-end: 0px;
    width: calc((clamp(520px, 380px + 12vw, 720px) - 70px) * 1.7910);
  }
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg picture,
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg img { width: 100%; height: 100%; }
  /* 2026-09-14 사진 윗변 — 안개 구간(헤더 2배) 한가운데 y=70 에서 배경→사진으로 계단이 생겨
     오른쪽(사진)만 «그라디에이션이 없는» 것으로 보였다. 위 140px 를 배경으로 녹인다(머리 절단면도 같이).
     img 의 90deg 마스크와 곱해지도록 picture 에 건다(mask-composite 불필요). */
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg picture {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px);
            mask-image: linear-gradient(180deg, transparent 0, #000 140px);
  }
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg img {
    object-fit: cover;
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%, transparent 100%);
  }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 상단 메뉴바 ↔ 히어로 «그라디에이션 연결» (승인자 지시 2회, 56 스크린샷 · 80·82·150·140)
   1차(같은 날 오전): 56 의 크림 안개(.84→.46→0)를 그대로 얹고 헤더를 잉크로 뒤집었다 → 승인자 반려
   「상단에 그라디에이션이 안 된 부분이 있고, 그라디에이션이 히어로 메인 색과 안 맞는다」.
     · 크림 안개는 다크 히어로 위에서 «회색 바» 로 읽히고(히어로 색과 다른 계열),
     · 오른쪽 모델 사진의 밝은 배경 위에서는 안개가 사진 밝기와 같아 «안 깔린 것처럼» 보였다.
   2차(이 블록): 안개 색을 히어로의 계열(토프 다크 --fs-teal-dk #6B564E)로 — 어두운 왼쪽에서는 한 단 밝은
   갈색 띠로, 밝은 사진 위에서는 갈색으로 눌러 전 폭이 «같은 띠» 로 읽힌다. 헤더 글자는 다시 흰색(로고 white),
   09-14 오전의 잉크 뒤집기 규칙은 이 블록으로 대체됐다. 높이는 헤더 2배 · 4단 스톱으로 띠 끝선을 지운다.
   대비 실측(글자 뒤 픽셀·글리프 마스크)은 아래 주석.
   ========================================================================== */
.fs-p-150 .fs-header--overlay::before {
  block-size: calc(var(--fs-header-h) * 2);
  background: linear-gradient(180deg,
    rgba(107,86,78,.92) 0%, rgba(107,86,78,.58) 45%, rgba(107,86,78,.22) 78%, rgba(107,86,78,0) 100%);
}
.fs-p-150 .fs-gnb__link { opacity: 1; }

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 쁘띠/레이저 = 라이트 로즈 #F3E3E0 (body.fs-cat-petit), 다크 히어로 → 라이트 + 컬러 워시
   승인자 지시 「150·140·151 세 페이지의 히어로만 라이트 로즈 gradually warms into a soft glow behind her, wide feathered falloff, no split」.
   사진: i2i «인물 그대로, 어두운 배경을 라이트 로즈 #F3E3E0 → 모델 뒤 웜 화이트 #FBF5F3 글로우로» → hero-model-duo(-mo).jpg.
   이 사진은 원본부터 머리 꼭대기가 잘려 있어 위 120행을 비워 보내 머리를 완성시켰다(완성본 위 98행을 더 잘라 1920×1094, 크라운 row 60) —
   그래서 09-11 «70px 내려 앉히고 위 140px 페이드» 처방은 폐기: 상자 비율 1920/1094, 오프셋 40px(1838 에서 크라운 y≈71 · 배율은 이전 +4%), 위 페이드 없음.
   헤더: 밝은 변형 다섯 곳 + 원본 로고(HTML). 카피: 킥커 흰 → teal-dk, 제목 잉크, 리드 ink-soft. 안개·후광·바탕은 공용 블록.
   09-14 오전의 갈색 안개 블록은 위에 기록으로 남는다(색은 공용 (0,2,2) 가 이기고 높이 2배만 남는다 — 80·82 와 같음).
   ========================================================================== */
.fs-p-150 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-150 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-150 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-150 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); opacity: 1; }
.fs-p-150 .fs-header--overlay .fs-util__link:hover,
.fs-p-150 .fs-header--overlay .fs-util__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-150 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-150 .fs-util__sep { opacity: .4; }
.fs-p-150 .fs-virtue-rf-hero { color: var(--fs-ink); }
.fs-p-150 .fs-virtue-rf-hero .fs-hero__kicker { color: var(--fs-teal-dk); }
.fs-p-150 .fs-virtue-rf-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-150 .fs-virtue-rf-hero__lead { color: var(--fs-ink-soft); opacity: 1; }
/* 카피 쪽 스크림 — 사진 상자 왼변(16% 마스크)을 틴트로 한 번 더 녹인다. 상자 기준 40% 까지. */
.fs-p-150 .fs-virtue-rf-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 (min-width: 1024px) {
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg {
    inset-block-start: 40px;
    height: calc(100% - 40px);
    width: calc((clamp(520px, 380px + 12vw, 720px) - 40px) * 2.3400);   /* 2026-09-14 승인자 「143 과 같은 자리로」 — 오른쪽 640px 아웃페인트(2560×1094), 머리 중심 69vw */
  }
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg picture { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 1023px) {
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg::after { content: none; }
}
/* 2026-09-14 승인자 「150·140·151 모델 위치를 143(겹주름 교정)과 같게 — 위치만」. 143 은 cover 사진이라 어느 폭에서든 머리 중심 x = 69.2vw.
   우측 정렬 상자는 폭에 따라 위치가 달라지므로(1440 에서 63%) 왼쪽 좌표로 앉힌다: left = 69.2vw − (머리 중심 비율 .5635 × 상자폭). 배율·높이 무변경. */
@media (min-width: 1024px) {
  .fs-p-150 .fs-virtue-rf-hero .fs-hero__bg {
    inset-inline-start: calc(69.2vw - 1.3186 * (clamp(520px, 380px + 12vw, 720px) - 40px)); inset-inline-end: auto;
  }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 승인자 캡처 「여기 히어로 포맷도 형제 히어로 포맷이랑 비슷하게, 위에 영어, 시술명, 설명, 해시태그」
   규정 = 09-21 히어로 통일(81 코재수술 포맷, no-implant.css 같은 날 블록) + 무보형물 해시태그 글줄(no-implant.css P2):
   영문 킥커 VIRTUE RF(페이지 아래 「FOURSEASONS · VIRTUE RF」 의 영문명) → 제목 → 줄 요소 → 리드 → 해시태그.
   전엔 해시태그가 킥커 자리(맨 위, 큰 글자 flex)에 있었다. 값은 09-21 규정 그대로 —
   킥커 21/500/.02em(teal-dk) · 제목 58/700/1.22 · 요소 간격 10px · 줄 아래 8px · 리드 --fs-t-lead/1.5/잉크 · 해시태그 본문 크기 500 ink-soft.
   줄 요소의 폭·두께·색은 fs.css 정본([class*="hero__rule"]) — 요소가 있으면 제목 ::after 는 꺼진다. 사진·카피 상자 위치는 그대로.
   ========================================================================== */
.fs-p-150 .fs-virtue-rf-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-150 .fs-virtue-rf-hero .fs-hero__kicker {
  display: block;
  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-150 .fs-virtue-rf-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-150 .fs-virtue-rf-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-150 .fs-virtue-rf-hero__lead {
  max-width: 34em; font-size: var(--fs-t-lead); font-weight: 400; line-height: 1.5; color: var(--fs-ink);
}
.fs-p-150 .fs-virtue-rf-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-sp-1) var(--fs-sp-3);
  margin: var(--fs-sp-2) 0 0;
  font-size: var(--fs-t-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fs-ink-soft);
}
.fs-p-150 .fs-virtue-rf-hero__tags span { white-space: nowrap; }

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-150-1022-mo(같은 날 히어로 카피 포맷 변경 뒤 상태) · 실측 _design/momeasure.py 360/390/540/768.
   줄바꿈: balance(원리 리드, 핸드피스 리드·니들 설명 2, 주소) — HTML 무변경.
   고아 줄(전): 360·390 「…적응증을 / 확인하세요.」 · 390 원리 리드 「…시술이 / 가능하도록 합니다.」 · 540 「…시술 / 가능」.
   배치(<600): 시술원리 4단계 도해 1열(360 단계당 ≈270px) → 2열 — 600~1023 과 같은 짜임(§2 A). 라벨바는 칸 폭이라 balance.
   ========================================================================== */
.fs-p-150 #principle .fs-nose-lead,
.fs-p-150 #handpiece .fs-nose-lead,
.fs-p-150 #handpiece .fs-lead,
.fs-p-150 #handpiece .fs-body,
.fs-p-150 .fs-virtue-rf-step__fig .fs-labelbar,
.fs-p-150 .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-150 .fs-virtue-rf-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-sp-4);
  }
  .fs-p-150 .fs-virtue-rf-step__txt { padding-inline: var(--fs-sp-2); font-size: var(--fs-t-body); word-break: keep-all; }
  /* 「2. 마이크로니들 접촉」「3. 고주파 에너지 전달」 만 두 줄 — 한 행 두 장의 바 높이를 두 줄로 맞춘다 */
  .fs-p-150 .fs-virtue-rf-step__fig .fs-labelbar { word-break: keep-all; min-height: calc(2lh + var(--fs-sp-2)); }
}