/* ==========================================================================
   assets/page/122.css — [122] 튠페이스 (악센트프라임) 전용
   전 셀렉터가 .fs-p-122 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).
   ========================================================================== */

/* --- A01 · 크림 밴드 + 장비 세로 컷아웃 히어로 --------------------------- */
.fs-p-122 .fs-tuneface-hero {
  min-height: clamp(400px, 348.7px + 14.25vw, 620px);
  color: var(--fs-ink);
  background: var(--fs-cream);
  align-items: end;
}
.fs-p-122 .fs-tuneface-hero .fs-hero__inner {
  padding-block: clamp(40px, 30.7px + 2.58vw, 80px);
}
.fs-p-122 .fs-tuneface-hero .fs-hero__copy {
  position: relative;
  z-index: 1;
  max-width: min(100%, 620px);
  padding-inline-end: clamp(150px, 80px + 19.4vw, 230px);
  gap: clamp(12px, 10.1px + 0.53vw, 20px);
}
.fs-p-122 .fs-tuneface-hero .fs-hero__kicker { color: var(--fs-teal-dk); }
.fs-p-122 .fs-tuneface-hero .fs-hero__title  { color: var(--fs-ink); }
.fs-p-122 .fs-tuneface-hero__sub {
  font-size: var(--fs-t-kicker-lg);
  font-weight: 500;
  color: var(--fs-ink-soft);
}
.fs-p-122 .fs-tuneface-hero__badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(84px, 76.6px + 2.05vw, 116px);
  aspect-ratio: 209 / 194;
  margin-block-start: var(--fs-sp-2);
}
.fs-p-122 .fs-tuneface-hero__laurel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fs-p-122 .fs-tuneface-hero__badge span {
  position: relative;
  font-family: var(--fs-font-en);
  font-size: clamp(10px, 9.5px + 0.13vw, 12px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--fs-gold);
}
.fs-p-122 .fs-tuneface-hero__device {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: 0;
  width: clamp(154px, 60px + 26.1vw, 460px);
  height: auto;
}
@media (min-width: 1024px) {
  .fs-p-122 .fs-tuneface-hero__device {
    inset-inline-end: max(var(--fs-gutter), calc((100% - var(--fs-container)) / 2));
  }
}

/* --- 공통 · 도해 피겨 ---------------------------------------------------- */
.fs-p-122 .fs-tuneface-fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.fs-p-122 .fs-tuneface-fig img {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.fs-p-122 .fs-tuneface-fig .fs-labelbar { margin-block-start: var(--fs-sp-5); }

/* --- A03 · 장비 정의 2단 ------------------------------------------------- */
.fs-p-122 .fs-tuneface-device__main {
  justify-self: center;
  width: 100%;
  max-width: clamp(240px, 128.6px + 30.9vw, 460px);
  background: var(--fs-white);
  padding: var(--fs-sp-5);
}
.fs-p-122 .fs-tuneface-device__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: clamp(24px, 20.3px + 1.03vw, 40px);
}
.fs-p-122 .fs-tuneface-device__pair .fs-tuneface-fig { background: var(--fs-white); padding: var(--fs-sp-3); }
.fs-p-122 .fs-tuneface-device__note { margin-block-start: var(--fs-sp-5); }

/* --- A05 · 콜라겐 SEM VS 비교 -------------------------------------------- */
.fs-p-122 .fs-tuneface-vs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 36.6px + 2.05vw, 76px);
  margin-block-start: clamp(32px, 25.5px + 1.79vw, 60px);
}
.fs-p-122 .fs-tuneface-vs__mark {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(36px, 31.4px + 1.28vw, 56px);
  aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-ink);
  color: var(--fs-white);
  font-family: var(--fs-font-en);
  font-size: clamp(12px, 11.1px + 0.26vw, 16px);
  font-weight: 700;
}
.fs-p-122 .fs-tuneface-vs figure { display: grid; justify-items: center; }
.fs-p-122 .fs-tuneface-vs figure img {
  width: 100%;
  max-width: clamp(200px, 141.5px + 16.3vw, 380px);
  height: auto;
}
.fs-p-122 .fs-tuneface-vs .fs-labelbar { width: 100%; max-width: clamp(200px, 141.5px + 16.3vw, 380px); }
.fs-p-122 .fs-tuneface-vs .fs-labelbar { margin-block-start: 0; }

/* --- A11 · 진피 단면 3분할 + 범례 ---------------------------------------- */
.fs-p-122 .fs-tuneface-stage__fig { padding-block-start: 0; }
.fs-p-122 .fs-tuneface-stage__ill { width: 100%; max-width: 100%; }
.fs-p-122 .fs-tuneface-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 10.5px + 1.54vw, 40px);
  margin-block-start: clamp(24px, 20.3px + 1.03vw, 40px);
  padding-block: var(--fs-sp-4);
  border-block-start: 1px solid var(--fs-line);
}
.fs-p-122 .fs-tuneface-legend li {
  display: flex;
  align-items: center;
  gap: var(--fs-sp-2);
  font-size: var(--fs-t-body);
  font-weight: 500;
  color: var(--fs-ink-soft);
}
.fs-p-122 .fs-tuneface-legend img { width: auto; height: 22px; }

/* --- 시그니처 · 연령대별 노화 진행 스케일 -------------------------------- */
.fs-p-122 .fs-tuneface-aging__grid {
  display: grid;
  row-gap: clamp(28px, 23.4px + 1.28vw, 48px);
  margin-block-start: clamp(32px, 25.5px + 1.79vw, 60px);
}
.fs-p-122 .fs-tuneface-aging__figwrap {
  display: grid;
  align-content: start;
  justify-self: center;
  width: 100%;
  max-width: clamp(260px, 175.8px + 23.4vw, 440px);
}
.fs-p-122 .fs-tuneface-aging__frame { position: relative; display: grid; }
.fs-p-122 .fs-tuneface-aging__frame img { display: block; width: 100%; height: auto; }
.fs-p-122 .fs-tuneface-aging__figwrap .fs-labelbar { margin-block-start: var(--fs-sp-5); }
.fs-p-122 .fs-tuneface-aging__lines {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  color: var(--fs-teal-dk);
  pointer-events: none;
}
.fs-p-122 .fs-tuneface-aging__spots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-sp-1);
  margin-block-start: var(--fs-sp-4);
}
.fs-p-122 .fs-tuneface-aging__spots li {
  padding: 6px 12px;
  background: var(--fs-white);
  border: 1px solid var(--fs-line-input);
  font-size: var(--fs-t-sm);
  font-weight: 600;
  color: var(--fs-teal-dk);
}
.fs-p-122 .fs-tuneface-aging__scale {
  display: grid;
  justify-items: stretch;
  gap: var(--fs-sp-2);
  align-content: start;
}
.fs-p-122 .fs-tuneface-aging__cap {
  display: flex;
  align-items: center;
  gap: var(--fs-sp-1);
  font-size: var(--fs-t-quote);
  font-weight: 700;
  color: var(--fs-ink);
}
.fs-p-122 .fs-tuneface-aging__cap::after {
  content: "";
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid var(--fs-teal-dk);
}
.fs-p-122 .fs-tuneface-aging__steps { display: grid; gap: 4px; }
.fs-p-122 .fs-tuneface-aging__steps li {
  position: relative;
  padding: clamp(11px, 9.2px + 0.51vw, 18px) var(--fs-sp-4);
  text-align: center;
  font-size: var(--fs-t-pill);
  font-weight: 700;
  color: var(--fs-on-dark);
  background: var(--fs-teal-mid);
}
.fs-p-122 .fs-tuneface-aging__steps li:nth-child(2) { background: var(--fs-teal-text); }
.fs-p-122 .fs-tuneface-aging__steps li:nth-child(3) { background: var(--fs-teal-dk); }
.fs-p-122 .fs-tuneface-aging__steps li:nth-child(4) { background: var(--fs-ink-band-2); }
.fs-p-122 .fs-tuneface-aging__steps li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: -4px;
  transform: translate(-50%, -100%);
  width: 0;
  height: 0;
  border-inline: 6px solid transparent;
  border-block-start: 7px solid var(--fs-teal-dk);
}
.fs-p-122 .fs-tuneface-aging__axis {
  margin-block-start: var(--fs-sp-2);
  font-size: var(--fs-t-sm);
  font-weight: 600;
  letter-spacing: var(--fs-ls-wide);
  color: var(--fs-muted);
  text-align: center;
}
@media (min-width: 1024px) {
  .fs-p-122 .fs-tuneface-aging__grid {
    grid-template-columns: minmax(0, 598px) minmax(0, 250px);
    column-gap: clamp(24px, -3.4px + 2.78vw, 56px);
    align-items: stretch;
    justify-content: center;
  }
  .fs-p-122 .fs-tuneface-aging__figwrap {
    justify-self: stretch;
    max-width: none;
    width: 100%;
    padding-inline-start: 158px;
  }
  .fs-p-122 .fs-tuneface-aging__spots {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 100%;
    display: block;
    width: 158px;
    margin-block-start: 0;
  }
  .fs-p-122 .fs-tuneface-aging__spots li {
    position: absolute;
    inset-inline-end: 22px;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fs-t-body);
    font-weight: 700;
    white-space: nowrap;
  }
  .fs-p-122 .fs-tuneface-aging__spots li::after {
    content: "";
    position: absolute;
    inset-inline-end: -14px;
    inset-block-start: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%);
    border-radius: var(--fs-radius-round);
    background: var(--fs-teal-dk);
  }
  .fs-p-122 .fs-tuneface-aging__spots li:nth-child(1) { inset-block-start: 18.4%; }
  .fs-p-122 .fs-tuneface-aging__spots li:nth-child(2) { inset-block-start: 31.1%; }
  .fs-p-122 .fs-tuneface-aging__spots li:nth-child(3) { inset-block-start: 38.0%; }
  .fs-p-122 .fs-tuneface-aging__spots li:nth-child(4) { inset-block-start: 43.6%; }
  .fs-p-122 .fs-tuneface-aging__spots li:nth-child(5) { inset-block-start: 51.6%; }
  .fs-p-122 .fs-tuneface-aging__scale { align-content: space-between; }
}
@media (max-width: 1023px) {
  .fs-p-122 .fs-tuneface-aging__lines { display: none; }
}

/* --- A13 · 시술 단계 도해 캐러셀 치수 (세로형 도해에 맞춘 박스) ---------- */
.fs-p-122 .fs-nose-tx { margin-block-start: clamp(46px, 37.8px + 2.31vw, 82px); }
.fs-p-122 .fs-nose-tx__box { aspect-ratio: 320 / 380; }
.fs-p-122 .fs-nose-tx__ill,
.fs-p-122 .fs-nose-tx__card:last-of-type .fs-nose-tx__ill {
  height: 86%;
  max-width: 94%;
  margin-block-end: clamp(8px, 6.2px + 0.51vw, 16px);
}
@media (min-width: 1024px) {
  .fs-p-122 .fs-nose-tx__box { aspect-ratio: 320 / 380; }
}

/* --- 원리 · 4단계 흐름 아이콘 -------------------------------------------- */
.fs-p-122 .fs-tuneface-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: clamp(30px, 24.5px + 1.54vw, 54px);
}
.fs-p-122 .fs-tuneface-flow > li { display: grid; }
.fs-p-122 .fs-tuneface-flow__card {
  display: grid;
  justify-items: center;
  gap: var(--fs-sp-4);
  height: 100%;
  padding: clamp(20px, 16.3px + 1.03vw, 36px) var(--fs-sp-4) 0;
  background: var(--fs-white);
}
.fs-p-122 .fs-tuneface-flow__card .fs-labelbar { width: 100%; align-self: end; }
.fs-p-122 .fs-tuneface-flow__icon {
  width: clamp(58px, 50.6px + 2.05vw, 90px);
  height: auto;
}
.fs-p-122 .fs-tuneface-flow__num {
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-sm);
  font-weight: 700;
  letter-spacing: var(--fs-ls-wide);
  color: var(--fs-teal-dk);
}
@media (min-width: 768px) {
  .fs-p-122 .fs-tuneface-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- A18 · 2대 효과 패널 ------------------------------------------------- */
.fs-p-122 .fs-tuneface-duo {
  display: grid;
  gap: var(--fs-gap-card);
  margin-block-start: clamp(32px, 25.5px + 1.79vw, 60px);
}
.fs-p-122 .fs-tuneface-duo__card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(20px, 15.4px + 1.28vw, 40px);
}
.fs-p-122 .fs-tuneface-duo__fig { display: grid; justify-items: center; }
.fs-p-122 .fs-tuneface-duo__logo {
  width: clamp(150px, 136.2px + 3.85vw, 210px);
  height: auto;
}
.fs-p-122 .fs-tuneface-duo__photo {
  width: clamp(160px, 137.1px + 6.35vw, 260px);
  height: auto;
  margin-block-start: var(--fs-sp-4);
}
.fs-p-122 .fs-tuneface-duo__fig .fs-labelbar {
  width: 100%;
  margin-block-start: var(--fs-sp-5);
}
.fs-p-122 .fs-tuneface-duo__title {
  margin-block-start: clamp(20px, 16.3px + 1.03vw, 36px);
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  color: var(--fs-ink);
}
.fs-p-122 .fs-tuneface-list {
  display: grid;
  gap: var(--fs-sp-2);
  margin-block-start: var(--fs-sp-5);
}
.fs-p-122 .fs-tuneface-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--fs-sp-3);
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}
.fs-p-122 .fs-tuneface-check {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin-block-start: 5px;
}
.fs-p-122 .fs-tuneface-check::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 1px;
  width: 11px;
  height: 6px;
  border-inline-start: 2px solid var(--fs-teal-dk);
  border-block-end: 2px solid var(--fs-teal-dk);
  transform: rotate(-45deg);
}
@media (min-width: 768px) {
  .fs-p-122 .fs-tuneface-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-p-122 .fs-tuneface-duo__card {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: clamp(24px, 12.6px + 1.11vw, 40px);
    align-items: start;
  }
  .fs-p-122 .fs-tuneface-duo__title { margin-block-start: 0; }
}

/* --- A07 · 튠페이스를 선택한 이유 카드 ----------------------------------- */
.fs-p-122 .fs-tuneface-reasons {
  display: grid;
  gap: var(--fs-gap-card);
  margin-block-start: clamp(32px, 25.5px + 1.79vw, 60px);
}
.fs-p-122 .fs-tuneface-reason {
  display: grid;
  gap: var(--fs-sp-4);
  align-content: start;
  padding: clamp(20px, 16.3px + 1.03vw, 36px);
  background: var(--fs-white);
  border-block-start: 2px solid var(--fs-teal);
}
.fs-p-122 .fs-tuneface-reason__media { display: grid; justify-items: center; gap: var(--fs-sp-4); }
.fs-p-122 .fs-tuneface-reason__media img {
  width: clamp(120px, 106.2px + 3.85vw, 180px);
  height: auto;
}
.fs-p-122 .fs-tuneface-reason__media .fs-labelbar { width: 100%; }
.fs-p-122 .fs-tuneface-reason__title {
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  color: var(--fs-ink);
}
.fs-p-122 .fs-tuneface-reason__desc {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
}
@media (min-width: 600px) {
  .fs-p-122 .fs-tuneface-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .fs-p-122 .fs-tuneface-reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- A21 · 3장비 비교 칩 + 표 -------------------------------------------- */
.fs-p-122 .fs-tuneface-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 6.3px + 1.03vw, 26px);
  max-width: 660px;
  margin-block: clamp(30px, 24.5px + 1.54vw, 54px) clamp(20px, 16.3px + 1.03vw, 36px);
  margin-inline: auto;
}
.fs-p-122 .fs-tuneface-chips figure { display: grid; }
.fs-p-122 .fs-tuneface-chips img {
  justify-self: center;
  width: clamp(84px, 76.6px + 2.05vw, 116px);
  height: auto;
}
.fs-p-122 .fs-tuneface-chips .fs-labelbar { margin-block-start: var(--fs-sp-3); }
/* 4열 표는 360px 에서 셀이 한 글자씩 쪼개진다 — 최소폭을 주고 래퍼가 가로 스크롤하게 한다 */
.fs-p-122 .fs-tuneface-table { min-width: 680px; }
.fs-p-122 .fs-tuneface-table th,
.fs-p-122 .fs-tuneface-table td { overflow-wrap: normal; }
.fs-p-122 .fs-tuneface-table th[scope="row"] { white-space: nowrap; }
.fs-p-122 .fs-tuneface-table__note {
  margin-block-start: var(--fs-sp-3);
  font-size: var(--fs-t-xs);
  color: var(--fs-muted-2);
}

/* --- 다크 비교 밴드 보정 -------------------------------------------------- */
.fs-p-122 .fs-tuneface-compare__panel { background: var(--fs-white); }
.fs-p-122 .fs-tuneface-compare__panel img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- 모션: reduced-motion 무효화 ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-122 .fs-tuneface-hero__device { transform: none !important; }
  .fs-p-122 .fs-tuneface-aging__lines { transition: none !important; }
}

/* ── 2026-08-27 · VIBE LOCK 스윕 ─────────────────────────────────── */
/* LOCK 2 — 라벨바는 도해에 «간격 0» 으로 붙는다.
   위반이 확인된 래퍼만 지운다(아이콘 크기 도해의 라벨바는 규칙 대상이 아니라 그대로 둔다). */
.fs-p-122 .fs-tuneface-aging__figwrap .fs-labelbar,
.fs-p-122 .fs-tuneface-duo__fig .fs-labelbar,
.fs-p-122 .fs-tuneface-fig .fs-labelbar { margin-block-start: 0; border-block-start: 0; }

/* ══════════════════════════════════════════════════════════════════
   2026-08-27 · 진단·수정 패스
   ══════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------------
   1. [LOCK 2 · 폭 조항] 라벨바 폭 === 도해 폭

   vibecheck 의 L2 는 라벨바의 margin-top·border-top 만 잰다. 「폭이 같은가」는
   안 보므로 1920 렌더에서 직접 실측했다:

     .fs-tuneface-reason__media   도해 180px  ↔  바 273px  (Δ93)  × 4곳
     .fs-tuneface-duo__fig        사진 259px  ↔  바 300px  (Δ41)  × 2곳

   둘 다 47 에서 걸린 것과 같은 「띠 위에 동그라미가 뜬」 모양이다. 360px 에서는
   원형 도해 150px 에 바가 280px 라 더 심하게 읽힌다.
   원본을 다시 자르지 않는다 — 표시 폭만 바에 맞춘다(원본 482 / 450px 이라 확대 없음).
   ------------------------------------------------------------------ */
.fs-p-122 .fs-tuneface-reason__media { row-gap: 0; }
.fs-p-122 .fs-tuneface-reason__media img { width: 100%; max-width: 100%; }

.fs-p-122 .fs-tuneface-duo__photo,
.fs-p-122 .fs-tuneface-duo__fig .fs-labelbar { width: 100%; max-width: 300px; }

/* ------------------------------------------------------------------
   2. [접근성] 연령대 스케일 1단이 AA 미달 · LOCK 3(c) 이탈

   .fs-tuneface-aging__steps li 가 --fs-teal-mid(#008E98) 를 «토큰째» 써서
   흰 글자 대비 3.95:1 이 됐다(qa.py 1920·360 둘 다 검출).
   fs.css:2626 의 AA 보정은 `.fs-labelbar` 같은 «부품 선택자»에만 걸리므로
   토큰을 직접 부르면 보정을 그대로 건너뛴다.
   LOCK 3(c) 의 「흰 글자 틸 면」 허용 집합에도 #008E98 은 없다.

   → 4단 램프를 허용 집합 안에서 다시 짠다(새 hex 0개, 명도는 계속 어두워진다):
     #00787F(5.26:1) → #00646B(6.92:1) → #3C3D3F(10.5:1) → #111111(18.9:1)
   ------------------------------------------------------------------ */
.fs-p-122 .fs-tuneface-aging__steps li { background: var(--fs-teal-text); }
.fs-p-122 .fs-tuneface-aging__steps li:nth-child(2) { background: var(--fs-teal-dk); }
.fs-p-122 .fs-tuneface-aging__steps li:nth-child(3) { background: var(--fs-ink-band-2); }
.fs-p-122 .fs-tuneface-aging__steps li:nth-child(4) { background: var(--fs-ink-band); }

/* 표 안내문 — --fs-muted-2(#7D7D7D) 는 흰 배경에서 4.12:1 로 AA 미달(360px 검출) */
.fs-p-122 .fs-tuneface-table__note { color: var(--fs-ink-soft); }

/* ------------------------------------------------------------------
   3. [마이크로 인터랙션] 섹션 제목 뒤 70px 틸 선 — 48·53 에서 검증된 구현

   ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   다크 밴드 대제목(#compare-title)에는 걸지 않는다 — 틸 하이라이트 박스가 이미 강조다.
   ------------------------------------------------------------------ */
/* ★ 선택자를 :where() 로 감싼다. ID 를 그대로 쓰면 명시도가 (1,1,1) 이 되어
     아래 초기 은닉 규칙 (0,5,2) 을 이겨 버리고, 선이 «항상 그어진 채» 굳는다
     (실측으로 확인 — 은닉이 안 걸려 delay .5s 의 0→1 이 재생되지 않았다).
     :where() 는 명시도 0 이라 48·53 의 클래스 기반 규칙과 같은 순서가 된다. */
.fs-p-122 :where(#device-title, #cause-title, #collagen-title, #aging-title,
                 #principle-title, #effect-title, #reason-title)::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;
}
/* 가운데정렬 섹션은 선도 가운데에서 자란다 */
.fs-p-122 :where(#cause-title, #reason-title)::after {
  margin-inline: auto;
  transform-origin: center;
}
/* 초기 은닉 — 은닉 쪽 트랜지션은 끊는다(1→0 역재생 방지, 53 에서 확인) */
:root.fs-js .fs-p-122 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-122 .fs-reveal:not(.is-in) h2::after {
  transform: scaleX(0);
  transition: none;
}

/* ------------------------------------------------------------------
   4. [마이크로 인터랙션] 호버 — 프레임은 고정, 사진만 scale(1.045)
   그림자는 쓰지 않는다(2차 규칙). 라벨바는 불투명이라 사진이 그 아래로 들어간다.
   ※ .fs-tuneface-device__main 은 제외한다 — data-fs-tilt 의 inner 가 <img> 자신이라
     fs.js 가 그 img 에 인라인 transform 을 걸어 CSS scale 이 죽는다.
   ------------------------------------------------------------------ */
.fs-p-122 .fs-tuneface-device__pair .fs-tuneface-fig,
.fs-p-122 .fs-tuneface-duo__fig,
.fs-p-122 .fs-tuneface-reason__media,
.fs-p-122 .fs-tuneface-chips figure { overflow: hidden; }

.fs-p-122 .fs-tuneface-device__pair .fs-tuneface-fig img,
.fs-p-122 .fs-tuneface-duo__photo,
.fs-p-122 .fs-tuneface-reason__media img,
.fs-p-122 .fs-tuneface-chips img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-122 .fs-tuneface-device__pair .fs-tuneface-fig:hover img,
  .fs-p-122 .fs-tuneface-duo__card:hover .fs-tuneface-duo__photo,
  .fs-p-122 .fs-tuneface-reason:hover .fs-tuneface-reason__media img,
  .fs-p-122 .fs-tuneface-chips li:hover img { transform: scale(1.045); }
}

/* ------------------------------------------------------------------
   5. reduced-motion — 제목 선은 「그어진 상태」로 고정, 호버 확대는 끈다
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fs-p-122 :where(#device-title, #cause-title, #collagen-title, #aging-title,
                   #principle-title, #effect-title, #reason-title)::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-122 .fs-tuneface-device__pair .fs-tuneface-fig img,
  .fs-p-122 .fs-tuneface-duo__photo,
  .fs-p-122 .fs-tuneface-reason__media img,
  .fs-p-122 .fs-tuneface-chips img { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   2026-09-11 승인자 지시 「56 처럼 상단 메뉴바 그라디에이션」
   이 페이지는 헤더가 히어로 «위» 에 흰 막대로 얹혀 있어 그라디에이션을 줄 자리가 없었다.
   56 과 같은 오버레이 헤더(투명 · 히어로 위에 겹침 · fs.css:458)로 바꾸고, 밝은 히어로용
   변형(잉크 글자 · 흰 안개 .72→.38→0)을 47 등 19장과 같은 처방으로 깐다.
   HTML 변경은 <header> 의 클래스 하나뿐(fs-header--overlay). 문구 변경 0.
   히어로는 이제 y=0 부터 시작해 헤더 100px 이 그 위에 겹친다 — 56·47 과 같은 구조.
   ========================================================================== */
.fs-p-122 .fs-header--overlay { color: var(--fs-ink); background: transparent; }
.fs-p-122 .fs-header--overlay::before { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,0) 100%); }
.fs-p-122 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-122 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-122 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-122 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-122 .fs-header--overlay .fs-allmenu { color: var(--fs-ink); }
.fs-p-122 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-122 .fs-util__sep { opacity: .35; }

/* 오버레이 헤더가 되면서 히어로가 y=0 부터 시작 → 바닥에 붙은 장비 컷아웃 위쪽이 헤더 띠(100px) 밑으로
   들어갔다. 세로 상한을 «히어로 − 헤더 − 16px» 로 걸어 장비 머리가 메뉴 아래에서 시작하게 한다.
   width/height 를 auto 로 풀고 max-* 두 축을 같이 주면 <img> 가 비율을 지키며 둘 다 만족한다. */
@media (min-width: 1024px) {
  .fs-p-122 .fs-tuneface-hero__device {
    width: auto;
    height: auto;
    max-inline-size: clamp(154px, 60px + 26.1vw, 460px);
    max-block-size: calc(100% - var(--fs-header-h) - 16px);
  }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 승인자 「튠페이스 히어로 속 기기 이미지가 깨져 있다 — 수정. 기기 사진 위치도 써마지·버츄·슈링크의 모델 위치와 같게」
   원인: 장비가 «세로 컷아웃 PNG(531×649, 원본부터 하반신이 잘린 저해상 스티커)» 라 밴드 바닥에서 본체·케이블이 뚝 잘리고 가장자리가 거칠었다.
   처방: 컷아웃을 로즈 캔버스에 같은 크기·자리로 얹어 i2i(«exactly this device, identical; body continues down out of the frame; backdrop light rose
   #F3E3E0 → 장비 뒤 웜 화이트 #FBF5F3 글로우, wide feathered falloff, no split»)로 «사진» 으로 다시 굽고(3장 중 2안), 오른쪽 640px 는 행별 가장자리색 → 틴트로
   수학적으로 늘려 2560×1080. 이제 151·150·140 과 같은 «오른쪽 사진 상자» 구조: 높이 = 히어로, 본체 중심(사진의 53.9%) = 69.2vw (143·151·150·140 과 같은 자리),
   상자 오른변은 뷰포트 밖으로 넘겨 이음매 없음. 카테고리 틴트(body.fs-cat-petit)로 바탕·안개·후광은 공용 블록. 크림 바탕 → 라이트 로즈.
   <1024: 컷아웃 자리(우하단 작은 상자)는 사진에 안 맞아 카피 아래에 3:4 사진을 쌓는다(151 모바일과 같은 구조).
   ========================================================================== */
.fs-p-122 .fs-tuneface-hero__photo { display: contents; }   /* 절대배치 상자는 뷰포트 폭에 캡된다(1024 에서 1233→1024, translate % 가 어긋남) → <img>(치환 요소, 비율로 폭 확정) 자체를 배치 */
.fs-p-122 .fs-tuneface-hero__device {
  position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 0;
  width: auto; height: 100%; max-inline-size: none; max-block-size: none; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
@media (min-width: 1024px) {
  .fs-p-122 .fs-tuneface-hero__device {
    /* 본체 중심 = 69.2vw. 히어로 실제 높이가 min-height 보다 커지는 폭(1024 등)이 있어 calc(H) 로는 어긋난다 →
       left 를 69.2vw 에 두고 사진 자신의 폭 기준 translate(-53.93%). `translate` 는 fs.js 패럴랙스의 transform 과 독립이라 안 부딪힌다. */
    inset-inline-start: 69.2vw; inset-inline-end: auto; translate: -53.93% 0;
    width: auto; height: 100%; max-inline-size: none; max-block-size: none;
  }
}
@media (max-width: 1023px) {
  .fs-p-122 .fs-tuneface-hero { align-items: start; }
  .fs-p-122 .fs-tuneface-hero__photo { display: block; order: 2; width: 100%; }
  .fs-p-122 .fs-tuneface-hero__device {
    position: static; inset: auto; translate: none;
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px);
            mask-image: linear-gradient(180deg, transparent 0, #000 72px);
  }
  .fs-p-122 .fs-tuneface-hero .fs-hero__inner { padding-block: calc(var(--fs-header-h) + var(--fs-sp-8)) var(--fs-sp-6); }
  .fs-p-122 .fs-tuneface-hero .fs-hero__copy { padding-inline-end: 0; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-122-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   줄바꿈: balance(원인 리드·본문, 콜라겐 리드, 장비 설명, 원리 리드·부제·단계 설명, 효과 체크 항목, 특징 킥커·설명, 비교표 칸, 주소) ·
           nbsp 6(라벨바 「Accent Prime」 · 「만나는 리프팅입니다」 · 「피부 처짐 등」 · 「이 중요하다」 · 「채워주는 가장 이상적인」 — 제목 <br> 은 그대로, 줄 수 무변화).
   고아 줄(전): 360 「…피부 처짐 / 등」「…콜라겐이 / 중요하다」「…채워주는 / 가장 이상적인 /」「…만나는 / 리프팅입니다」「(Accent / Prime)」 ·
               390~768 단계 설명 「…40.68MHz 에너지 / 전달」 · 특징 설명 4곳 · 비교표 「…에너지 / 전달」.
   배치: 무변경 — 특징 원형 도해 4장(360 ≈560px 씩)은 도해라 줄이지 않는다(§4-4).
   ========================================================================== */
.fs-p-122 #cause .fs-lead,
.fs-p-122 #cause .fs-body,
.fs-p-122 #collagen .fs-nose-lead,
.fs-p-122 .fs-tuneface-device__note,
.fs-p-122 #principle .fs-nose-lead,
.fs-p-122 .fs-sec-head__sub,
.fs-p-122 #principle .fs-body,
.fs-p-122 .fs-tuneface-duo__card li > span:last-child,
.fs-p-122 #reason .fs-kicker,
.fs-p-122 .fs-tuneface-reason__desc,
.fs-p-122 .fs-tuneface-table td,
.fs-p-122 .fs-address { text-wrap: balance; }