@charset "utf-8";
/* ==========================================================================
   assets/page/76.css — [76] 큐오필 전용 레이어
   모든 셀렉터는 .fs-p-76 스코프. 색·간격은 기존 --fs-* 토큰만 사용한다.
   제목 선·사진 확대 두 가지 전환이 있다 → 맨 아래 reduced-motion 블록에서 무효화한다.
   ========================================================================== */

/* --- 1. 모델 풀블리드 히어로 + 투명 오버레이 헤더 ------------------------
   승인자가 1mmpsglobal.com/en 의 헤더를 지목했다 — 투명 헤더 + 전면 모델컷 +
   좌측 잉크 카피. 143·53·121·146 과 같은 계열이고 이 사이트 서브 히어로의 정본이다.
   전에는 잉크 밴드에 좌 카피 / 우 원형 제품컷 2장 + 모델컷이었는데, 그 제품컷 2장은
   바로 아래 #about 방정식에 같은 사진이 다시 나와 «두 번 싣는» 구성이었다.
   ------------------------------------------------------------------------ */

/* fs.css 의 .fs-header--overlay 는 «흰 글자» 전제다. 이 히어로는 민트→크림이라
   다섯 곳을 같이 뒤집는다(로고는 원본 금색+먹 그대로 쓴다).
   ★ 이 변수를 빠뜨리면 fs.css 의 기본값 rgba(0,0,0,.14) 가 살아나 밝은 히어로 위
   헤더 100px 에만 검은 틴트가 깔린다 — 1920 렌더에 가로 이음매로 찍힌다. */
.fs-p-76 {
  --fs-header-overlay-bg: transparent;
}
.fs-p-76 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-76 .fs-header--overlay::before { content: none; }
/* 최상위 aria-current 는 fs.css 의 700 을 살려 둔다 — :not() 없이 통째로 400 으로
   내리면 「현재 메뉴」 표시가 조용히 죽는다(146 에서 확인). */
.fs-p-76 .fs-gnb__link:not([aria-current="page"]) { font-weight: 400; }
.fs-p-76 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-76 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
/* --fs-muted-2(#7D7D7D)는 밝은 배경에서 3.6:1 이라 AA 미달이다 */
.fs-p-76 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-76 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-76 .fs-util__sep { opacity: .35; }
/* fs.css 의 «호버 시 흰 글자» 도 다크 전제 — 밝은 헤더에선 사라진다 */
.fs-p-76 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
/* qa.py 는 오버레이 헤더 «뒤» 를 못 봐서 흰 GNB 1:1 오탐을 낸다 — 래퍼에 색을 선언해 둔다 */
.fs-p-76 .fs-page--overlay { background: var(--fs-cream-2); }

.fs-p-76 .fs-qofill-hero { color: var(--fs-ink); }
/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다(143·121·146 과 같은 처방) */
.fs-p-76 .fs-qofill-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 승인자 지적 「모델이 너무 밑에 있다」 — 1920 에서 정수리가 헤더 아래 194px 이었다.
   0% 는 사진 위쪽을 그대로 보여 준다. 35% 로 내려 창을 111px 아래로 옮기면 정수리가
   헤더 아래 84px 로 올라온다(형제 146 은 148px). 세로 크롭이 생기는 폭에서만 듣는다 —
   1326px 미만에서는 넘침이 없어 값이 화면을 안 바꾼다. */
.fs-p-76 .fs-qofill-hero .fs-hero__bg img { object-position: 50% 35%; }
.fs-p-76 .fs-qofill-hero .fs-hero__copy {
  max-width: min(100%, 52vw);
  gap: clamp(12px, 9.5px + 0.705vw, 22px);
  justify-items: start; text-align: start;
}
/* 카피가 앉는 좌측 실측 rgb(211,227,224) — 잉크 14.2:1 로 스크림이 필요 없다.
   다만 --fs-teal-text(#00787F)는 3.97:1 로 미달이라 킥커는 --fs-teal-dk(5.22:1)로 쓴다. */
.fs-p-76 .fs-qofill-hero .fs-hero__kicker {
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: var(--fs-ls-wide); font-weight: 600;
  color: var(--fs-teal-dk);
}
.fs-p-76 .fs-qofill-hero .fs-hero__title {
  font-size: clamp(34px, 22.3px + 3.269vw, 72px);
  font-weight: 700; line-height: var(--fs-lh-tight); color: var(--fs-ink);
}
.fs-p-76 .fs-qofill-hero__lead {
  font-size: var(--fs-t-lead); line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}

/* <1024px — 히어로 상자가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 크림 밴드로 «위» 에 쌓고 세로 크롭 사진을 아래에 붙인다(143·121·146 과 같은 방식). */
@media (max-width: 1023px) {
  .fs-p-76 .fs-qofill-hero { min-height: 0; background: var(--fs-cream-2); }
  .fs-p-76 .fs-qofill-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-76 .fs-qofill-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px);   /* 2026-10-22 모바일 §1-8 96 → 60 */
            mask-image: linear-gradient(180deg, transparent 0, #000 60px);
  }
  .fs-p-76 .fs-qofill-hero .fs-hero__inner {
    grid-row: 1; background: var(--fs-cream-2);
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-5)) var(--fs-sp-7);   /* 2026-10-22 모바일 §1-8 40/56 → 20/30 */
  }
  .fs-p-76 .fs-qofill-hero .fs-hero__copy { max-width: 100%; }
}

/* --- 1-b. 중앙 정렬 섹션 헤드 ------------------------------------------- */
.fs-p-76 .fs-qofill-head--c { justify-items: center; text-align: center; }

/* --- 2. 성분 합성 방정식 (시그니처) -------------------------------------- */
.fs-p-76 .fs-qofill-eq {
  display: grid;
  gap: var(--fs-sp-5);
  justify-items: center; align-items: center;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-76 .fs-qofill-eq__fig {
  display: grid; margin: 0;
  width: 100%; max-width: 320px;
}
.fs-p-76 .fs-qofill-eq__disc {
  display: block; width: 100%; aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  overflow: hidden;
  margin-block-end: var(--fs-sp-4);
}
.fs-p-76 .fs-qofill-eq__disc img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-76 .fs-qofill-eq__op {
  display: grid; place-items: center;
  width: clamp(34px, 31.5px + 0.769vw, 46px); aspect-ratio: 1;
  font-size: var(--fs-t-h2); font-weight: 300; line-height: 1;
  color: var(--fs-teal-text);
}
.fs-p-76 .fs-qofill-eq__ring {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  border: 2px solid var(--fs-teal);
  border-radius: var(--fs-radius-round);
  margin-block-end: var(--fs-sp-4);
  padding: var(--fs-sp-5);
  text-align: center;
}
.fs-p-76 .fs-qofill-eq__word {
  font-size: var(--fs-t-h2); font-weight: 700; line-height: 1.15;
  color: var(--fs-teal-text);
}
.fs-p-76 .fs-qofill-eq__sub {
  font-size: var(--fs-t-sm); font-weight: 600; color: var(--fs-muted);
  letter-spacing: var(--fs-ls-wide);
}
.fs-p-76 .fs-qofill-about__body {
  display: grid; gap: var(--fs-sp-5);
  max-width: 900px; margin-inline: auto;
  margin-block-start: clamp(30px, 25.4px + 1.282vw, 50px);
  text-align: center;
}
@media (min-width: 900px) {
  .fs-p-76 .fs-qofill-eq {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(12px, 1.7px + 1.146vw, 28px);
    /* 폴백 — subgrid 가 없으면 열 전체(원 + 라벨바) 기준 가운데. start 로 두면
       연산자가 원 «꼭대기» 옆에 붙어 균형이 깨진다(승인자 지적). */
    align-items: center;
  }
}
/* + 와 = 는 «원의» 세로 가운데에 놓는다. 열 전체 기준으로 가운데를 잡으면
   라벨바 높이의 절반만큼 아래로 내려간다 — 그래서 판을 2행(원 / 라벨바)으로 쪼개고
   figure 를 subgrid 로 얹어 연산자를 «1행» 안에서만 가운데 정렬한다.
   ★ 열은 반드시 손으로 박아야 한다. figure 가 2행을 차지하는 순간 자동 배치가
     연산자를 앞 열로 당겨 판이 통째로 어긋난다(실제로 그렇게 나왔다).
   ★ row-gap 은 0 이어야 한다. 안 그러면 라벨바가 사진에서 떨어져 LOCK 2 를 깬다. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .fs-p-76 .fs-qofill-eq {
      grid-template-rows: auto auto;
      row-gap: 0;
      align-items: start;
    }
    .fs-p-76 .fs-qofill-eq > :nth-child(1) { grid-column: 1; }
    .fs-p-76 .fs-qofill-eq > :nth-child(2) { grid-column: 2; }
    .fs-p-76 .fs-qofill-eq > :nth-child(3) { grid-column: 3; }
    .fs-p-76 .fs-qofill-eq > :nth-child(4) { grid-column: 4; }
    .fs-p-76 .fs-qofill-eq > :nth-child(5) { grid-column: 5; }
    .fs-p-76 .fs-qofill-eq__fig {
      grid-row: 1 / span 2;
      grid-template-rows: subgrid;
    }
    .fs-p-76 .fs-qofill-eq__op { grid-row: 1; align-self: center; }
  }
}

/* --- 3. POINT 카드 — 하단 꽉 찬 라벨바 ----------------------------------- */
.fs-p-76 .fs-qofill-pt {
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  gap: clamp(16px, 13.7px + 0.641vw, 26px);
  padding-block-end: 0;
}
.fs-p-76 .fs-qofill-pt .fs-card__icon { align-self: center; }
.fs-p-76 .fs-qofill-pt .fs-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-76 .fs-qofill-pt .fs-labelbar {
  align-self: end;
  width: calc(100% + (2 * var(--fs-sp-5)));
  margin-inline: calc(-1 * var(--fs-sp-5));
  line-height: 1.3;
}

/* --- 4. 시술대상 — 인물 + 6항목 ----------------------------------------- */
.fs-p-76 .fs-qofill-target {
  display: grid; gap: clamp(28px, 24.5px + 0.962vw, 43px);
  align-items: center;
  margin-block-start: clamp(40px, 31.8px + 2.276vw, 75px);
}
.fs-p-76 .fs-qofill-target__photo {
  display: block; margin: 0; width: 100%; aspect-ratio: 1; overflow: hidden;
}
.fs-p-76 .fs-qofill-target__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%;
}
.fs-p-76 .fs-qofill-target__body { display: grid; gap: var(--fs-sp-5); }
.fs-p-76 .fs-qofill-target__list { display: grid; gap: 0; }
.fs-p-76 .fs-qofill-target__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--fs-sp-5); align-items: center;
  padding-block: var(--fs-sp-4);
  border-block-end: 1px solid var(--fs-line);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
}
.fs-p-76 .fs-qofill-target__no {
  font-size: var(--fs-t-sub); font-weight: 700; color: var(--fs-teal-text);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .fs-p-76 .fs-qofill-target__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fs-sp-9); }
}
@media (min-width: 1024px) {
  /* 사진을 340 → 440px 로 키웠다. 교체 전 에셋이 560×1169 짜리 «좁고 긴» 크롭이라
     340px 상자에서 얼굴이 작게 눌렸다(승인자 지적). 새 에셋은 900×1125(4:5)다. */
  .fs-p-76 .fs-qofill-target { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: clamp(32px, 12.5px + 1.905vw, 56px); }
  .fs-p-76 .fs-qofill-target__photo { aspect-ratio: 4 / 5; }
}

/* --- 5. 시술부위 — 부위 표시 인물컷 + 목록 · 다크 밴드 -------------------
   LOCK 5 는 시술 상세에 풀블리드 다크 밴드 1개를 요구하는데 이 페이지는 0개였다
   (잉크 히어로는 4항 (b-1) 로 「밴드」가 아니라 히어로 연출로 센다). 8개 섹션 중
   4번째인 이 섹션이 유일하게 흰 카드 없이 사진만으로 서 있어 여기를 밴드로 올린다.
   ★ 2026-08-31 — 승인자가 1mm 의 「Botox Treatment area」 판을 지목했다.
     디테일 컷 5장 격자 → «부위를 점으로 찍은 인물컷 한 장 + 번호 목록» 으로 바꿨다.
     인물컷은 배경까지 딥 차콜로 생성해 밴드에 녹인다(흰 배경이면 검은 판에 흰 슬래브가
     박힌다). 점 좌표는 에셋 기준 백분율이라 사진 상자의 비율을 3/4 로 «고정» 해야 한다 —
     비율이 바뀌면 cover 크롭이 들어가 점이 얼굴에서 밀린다.
   ------------------------------------------------------------------------- */
.fs-p-76 .fs-qofill-area {
  display: grid; gap: clamp(28px, 23.4px + 1.282vw, 48px);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-76 .fs-qofill-area__photo { position: relative; margin: 0; }
.fs-p-76 .fs-qofill-area__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
}
.fs-p-76 .fs-qofill-area__dot {
  position: absolute; z-index: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: clamp(30px, 27.1px + 0.795vw, 42px); aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal); color: var(--fs-ink);
  font-size: var(--fs-t-pill); font-weight: 700; line-height: 1;
}
/* 좌표는 area-model.jpg(900×1200) 위에서 실측한 얼굴 기준점이다 */
.fs-p-76 .fs-qofill-area__dot--01 { inset-inline-start: 40.0%; inset-block-start: 25.8%; }  /* 미간 */
.fs-p-76 .fs-qofill-area__dot--02 { inset-inline-start: 36.1%; inset-block-start: 43.2%; }  /* 팔자주름 */
.fs-p-76 .fs-qofill-area__dot--03 { inset-inline-start: 40.6%; inset-block-start: 17.9%; }  /* 이마 */
.fs-p-76 .fs-qofill-area__dot--04 { inset-inline-start: 52.0%; inset-block-start: 36.0%; }  /* 앞볼 */
.fs-p-76 .fs-qofill-area__dot--05 { inset-inline-start: 43.5%; inset-block-start: 54.8%; }  /* 무턱 */
/* 번호는 «장식» 이라 CSS 로 넣는다 — 목록의 01~05 와 같은 글자를 DOM 에 한 번 더
   싣지 않기 위해서다(R1 텍스트 대조가 중복 추가로 잡는다). */
.fs-p-76 .fs-qofill-area__dot--01::before { content: "01"; }
.fs-p-76 .fs-qofill-area__dot--02::before { content: "02"; }
.fs-p-76 .fs-qofill-area__dot--03::before { content: "03"; }
.fs-p-76 .fs-qofill-area__dot--04::before { content: "04"; }
.fs-p-76 .fs-qofill-area__dot--05::before { content: "05"; }

.fs-p-76 .fs-qofill-area__list {
  display: grid; gap: clamp(18px, 15.2px + 0.769vw, 30px);
  align-content: center;
}
.fs-p-76 .fs-qofill-area__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 12.2px + 0.513vw, 22px);
  row-gap: clamp(4px, 3.4px + 0.192vw, 8px);
  align-items: start;
}
.fs-p-76 .fs-qofill-area__item .fs-pill { grid-row: span 2; align-self: start; }
.fs-p-76 .fs-qofill-area__name {
  font-size: var(--fs-t-h3); font-weight: 700; line-height: 1.25;
  color: var(--fs-on-dark);
}
.fs-p-76 .fs-qofill-area__desc {
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
  color: var(--fs-on-dark);
}
/* 다크 밴드 위 제목 강조 — fs.css 의 .fs-teal-fg 는 #00787F 라 #111 위에서 3.59:1 이다.
   .fs-kicker 가 이미 쓰는 배경별 3단(fs.css:2670)과 같은 처방으로 시안 틸(8.28:1)로 올린다. */
.fs-p-76 .fs-qofill-area-sec .fs-teal-fg { color: var(--fs-teal); }
@media (min-width: 1024px) {
  /* 설명이 두 줄로 짧아 800fr 로 두면 오른쪽 300px 이 빈다 — 두 열을 좁혀
     판 전체를 가운데로 모은다. */
  .fs-p-76 .fs-qofill-area {
    grid-template-columns: minmax(0, 500fr) minmax(0, 540fr);
    column-gap: clamp(40px, 12.5px + 2.679vw, 80px);
    justify-content: center;
    align-items: center;
  }
}

/* --- 6. 큐오필 VS 일반 필러 VS 지방이식 ---------------------------------- */
.fs-p-76 .fs-qofill-vs__legend {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-76 .fs-qofill-vs__card {
  display: grid; align-content: start; justify-items: stretch;
  background: var(--fs-white);
  padding-block-start: clamp(20px, 17.7px + 0.641vw, 30px);
}
.fs-p-76 .fs-qofill-vs__ic {
  justify-self: center;
  display: grid; place-items: center;
  width: clamp(64px, 58.5px + 1.538vw, 88px); aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal-text);
  margin-block-end: clamp(16px, 13.7px + 0.641vw, 26px);
}
.fs-p-76 .fs-qofill-vs__ic img { width: 54%; height: 54%; }
.fs-p-76 .fs-qofill-vs__card--own .fs-qofill-vs__ic { background: var(--fs-teal-dk); }
.fs-p-76 .fs-qofill-vs__note {
  padding: var(--fs-sp-5) var(--fs-sp-5) var(--fs-sp-6);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft); text-align: center;
}
.fs-p-76 .fs-qofill-vs__tablewrap { margin-block-start: clamp(28px, 23.4px + 1.282vw, 48px); }
.fs-p-76 .fs-qofill-vs__tablewrap .fs-table { min-width: 660px; background: var(--fs-white); }
.fs-p-76 .fs-qofill-vs__tablewrap .fs-table th,
.fs-p-76 .fs-qofill-vs__tablewrap .fs-table td { text-align: center; }
.fs-p-76 .fs-qofill-vs__tablewrap .fs-table thead th:nth-child(2) { background: var(--fs-teal-dk); }
.fs-p-76 .fs-qofill-vs__rowhead {
  display: flex; align-items: center; gap: var(--fs-sp-3);
  font-weight: 600;
}
.fs-p-76 .fs-qofill-vs__rowhead img { flex: 0 0 auto; width: 26px; height: 26px; }
.fs-p-76 .fs-qofill-vs__hl {
  background: var(--fs-teal-text); color: var(--fs-white); font-weight: 700;
}
@media (min-width: 768px) {
  .fs-p-76 .fs-qofill-vs__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 7. 시술과정 4단계 --------------------------------------------------- */
.fs-p-76 .fs-qofill-steps {
  --q-disc: clamp(140px, 108.5px + 3.269vw, 190px);
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-76 .fs-qofill-step {
  position: relative;
  display: grid; justify-items: center; gap: var(--fs-sp-5);
  width: 100%; max-width: 320px;
}
.fs-p-76 .fs-qofill-step__disc {
  display: grid; place-items: center;
  width: var(--q-disc); aspect-ratio: 1;
  border: 3px solid transparent;
  border-radius: var(--fs-radius-round);
  background: var(--fs-step-bg);
}
.fs-p-76 .fs-qofill-step--active .fs-qofill-step__disc {
  background: var(--fs-white); border-color: var(--fs-teal);
}
.fs-p-76 .fs-qofill-step__disc img { width: 48%; height: 48%; }
.fs-p-76 .fs-qofill-step .fs-labelbar {
  width: 100%; line-height: 1.3;
  min-block-size: clamp(44px, 40.3px + 1.026vw, 60px);
}
@media (min-width: 1024px) {
  .fs-p-76 .fs-qofill-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-p-76 .fs-qofill-step { max-width: none; }
  .fs-p-76 .fs-qofill-step::after {
    content: ""; position: absolute;
    inset-block-start: calc(var(--q-disc) / 2 - 1.5px);
    inset-inline-start: calc(50% + (var(--q-disc) / 2));
    width: calc(100% - var(--q-disc) + var(--fs-gap-card));
    height: 3px; background: var(--fs-step-bg);
  }
  .fs-p-76 .fs-qofill-step--active::after { background: var(--fs-teal); }
  .fs-p-76 .fs-qofill-step:last-child::after { content: none; }
}

/* --- 8. 정품 시술 병원 인증 ---------------------------------------------- */
.fs-p-76 .fs-qofill-cert {
  display: grid; gap: clamp(28px, 24.5px + 0.962vw, 43px);
  align-items: center;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-76 .fs-qofill-cert__figwrap { display: grid; }
.fs-p-76 .fs-qofill-cert__fig { display: grid; margin: 0; }
.fs-p-76 .fs-qofill-cert__fig img { display: block; width: 100%; height: auto; }
.fs-p-76 .fs-qofill-cert__doc {
  display: grid; gap: var(--fs-sp-4);
  background: var(--fs-white);
  padding: clamp(22px, 18.2px + 1.058vw, 38px);
}
.fs-p-76 .fs-qofill-cert__line {
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft);
}
.fs-p-76 .fs-qofill-cert__meta {
  display: grid; gap: var(--fs-sp-1);
  padding-block-start: var(--fs-sp-4);
  border-block-start: 1px solid var(--fs-line);
  font-size: var(--fs-t-sm); color: var(--fs-muted);
}
@media (min-width: 1024px) {
  .fs-p-76 .fs-qofill-cert { grid-template-columns: minmax(0, 760fr) minmax(0, 560fr); column-gap: clamp(32px, 12.5px + 1.905vw, 56px); }
}

/* ==========================================================================
   9. 태블릿 5장 격자 — 마지막 줄에 1장만 남던 것을 가운데로
   POINT 5장(.fs-grid--5)과 시술부위 5장은 600~1023px 에서 2열이 되어
   5번째가 왼쪽에 홀로 남고 오른쪽에 카드 한 장 크기의 구멍이 생겼다.
   4열 격자에 2칸씩 태우면 카드 폭은 2열 때와 같고, 마지막 한 장만
   2열째부터 놓여 정확히 가운데에 선다(좌 1칸 + 우 1칸).
   ========================================================================== */

@media (min-width: 600px) and (max-width: 1023.98px) {
  .fs-p-76 .fs-nose-cards,
  .fs-p-76 .fs-qofill-area__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .fs-p-76 .fs-nose-cards > li,
  .fs-p-76 .fs-qofill-area__card { grid-column: span 2; }

  .fs-p-76 .fs-nose-cards > li:nth-child(5),
  .fs-p-76 .fs-qofill-area__card:nth-child(5) { grid-column: 2 / span 2; }
}

/* ==========================================================================
   10. 제목 뒤 70px 틸 선 — 48 에서 검증된 구현
   ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 안에 있던 대상에 .fs-reveal 을 아예 붙이지 않는다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   ========================================================================== */

.fs-p-76 .fs-nose-head h2 { position: relative; }
.fs-p-76 .fs-nose-head 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;
}
/* 가운데 정렬 헤드에서는 선도 가운데로 — 아니면 h2 상자 왼쪽 끝에 붙는다 */
.fs-p-76 .fs-qofill-head--c h2::after { margin-inline: auto; transform-origin: center; }

:root.fs-js .fs-p-76 .fs-nose-head h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-76 .fs-reveal:not(.is-in) .fs-nose-head h2::after,
:root.fs-js .fs-p-76 .fs-nose-head.fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* ==========================================================================
   11. 호버 — 프레임은 고정, 사진만 1.045 확대. 그림자는 쓰지 않는다(2차 규칙).
   틸트가 걸린 카드(POINT·시술부위·인증서)에는 얹지 않는다 — 회전 위에 확대를
   겹치면 두 모션이 싸운다. 상호작용이 하나도 없던 두 사진에만 건다.
   ========================================================================== */

.fs-p-76 .fs-qofill-target__photo img,
.fs-p-76 .fs-qofill-eq__disc img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-76 .fs-qofill-target__photo:hover img,
  .fs-p-76 .fs-qofill-eq__fig:hover .fs-qofill-eq__disc img { transform: scale(1.045); }
}

/* ==========================================================================
   12. reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fs-p-76 .fs-nose-head h2::after { transform: scaleX(1) !important; transition: none !important; }
  .fs-p-76 .fs-qofill-target__photo img,
  .fs-p-76 .fs-qofill-eq__disc img { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-76-1022-mo · 실측 _design/momeasure.py 360/390/540/768/1024/1440/1920.
   · 히어로 §1-8 20/30/60 — <1024 스택 블록 제자리 수정(페이드 96 → 60).
   · 문장 가운데 PC 줄 경계 `<br>` → `<br class="fs-pc-only">`(§1-7): 정의 본문 2문단(한 문장씩) · 정품 리드 첫 문장. ≥1024 는 같은 자리에서 끊긴다.
     정의 본문은 텍스트 노드·번역 키가 그대로다(br 의 class 는 키에 안 들어간다).
   · 문장 블록(.fs-lead__s): 특징 리드(「— 」 앞뒤 두 구) · 정품 리드(두 문장). 360 에서 「큐오필의 특징입니다.」「확인하세요!」 가 짧은 줄.
   · balance(전 폭): 인용 · 인증 문구 · 비교/정품 제목 · 주소 — 360 「시너지 효과!」「사용합니다.」「고유시술명입니다.」 · 「지방이식」 혼자 둘째 줄, 1440 인용 「병원입니다”」.
   ========================================================================== */
.fs-p-76 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-76 .fs-body,
.fs-p-76 .fs-quote,
.fs-p-76 .fs-qofill-cert__line,
.fs-p-76 #vs-title,
.fs-p-76 #genuine-title,
.fs-p-76 .fs-address { text-wrap: balance; }
:root:not(:lang(ko)) .fs-p-76 br.fs-pc-only { display: none; }

/* 배치(§2 A) — 5가지 장점 POINT 5장: 600 미만 1열(장당 ≈230px) → 2열. 600~1023 은 fs.css 2열인데 5번째가 왼쪽에 혼자 남았다 —
   4열 격자에 장마다 2칸, 홀수 마지막은 2~3열(가운데)에(memory five-card-grid-tablet-orphan 과 같은 처방).
   시술과정 4단계: <1024 에서 지름 140~190 원이 한 줄에 하나씩(≈1,000px) → 2×2, 원 지름은 칸에 맞게(360 에서 97px).
   PC 의 가로 4단계·연결선(≥1024)은 그대로. */
@media (max-width: 1023px) {
  .fs-p-76 .fs-nose-cards:has(.fs-qofill-pt) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--fs-sp-4);
  }
  .fs-p-76 .fs-nose-cards:has(.fs-qofill-pt) > li { grid-column: span 2; }
  .fs-p-76 .fs-nose-cards:has(.fs-qofill-pt) > li:nth-child(odd):last-child { grid-column: 2 / span 2; }
  .fs-p-76 .fs-qofill-steps {
    --q-disc: clamp(96px, 27vw, 160px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fs-sp-4);
  }
}