/* ==========================================================================
   assets/page/78.css — [78] 보조개 (slug: dimple) 전용 스타일
   · 모든 셀렉터는 .fs-p-78 스코프. 다른 페이지에 영향 0.
   · 색은 --fs-* 토큰만 사용한다 (새 hex 0개).
   · 전용 컴포넌트
       .fs-dimple-hero    투명 헤더 + 우측 모델 / 좌측 잉크 카피 (1mm 계열)
       .fs-dimple-fig     사진 + 라벨바 프레임 (섹션마다 비율만 다르다)
       .fs-dimple-spec    수술정보 6카드 (A06 POINT 카드 + 하단 틸 라벨바)
       .fs-dimple-flow    구강 내 시술 4단계 실사 원형 시퀀스 시그니처
       .fs-dimple-target  수술대상 아이콘 타일
       .fs-dimple-promise 약속 5항목 리스트
   · 새 모션 없음(리빌·틸트는 fs.js 공용 배선). 그래도 reduced-motion 안전판을 둔다.
   ========================================================================== */

/* --- 1. 셸 · A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ---------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 이 페이지의 히어로 상단은
   전 폭이 따뜻한 크림(#F2E4D6)이라 흰 글자가 아니라 «잉크 글자» 를 쓴다.
   에셋 실측: 모델 최상단이 사진 높이의 17.4%(1072 중 187px) 라 헤더 띠가 사진에서
   차지하는 최대 구간(1280 폭에서 ≈11.5%)에 안 걸린다. */
.fs-p-78 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-78 .fs-page--overlay { background: #F2E4D6; }
.fs-p-78 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-78 .fs-header--overlay::before { content: none; }
.fs-p-78 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-78 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-78 .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-78 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-78 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-78 .fs-util__sep { opacity: .35; }
/* fs.css:3052 의 «호버 시 흰 글자» 도 다크 히어로 전제다 — 밝은 헤더에선 사라진다 */
.fs-p-78 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }

/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-78 .fs-dimple-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. 위 고정(0%)이면 머리끝이 히어로 안에서 y≈187 로 앉아 헤더 띠(100px)
   아래 87px 가 남는다. 더 내리면 헤더 띠에 머리카락이 걸린다. */
.fs-p-78 .fs-dimple-hero .fs-hero__bg img { object-position: 50% 0%; }
.fs-p-78 .fs-dimple-hero .fs-hero__copy {
  max-width: min(100%, 34rem);
  gap: var(--fs-sp-3);
  justify-items: start;
  text-align: start;
}
.fs-p-78 .fs-dimple-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-78 .fs-dimple-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22; color: var(--fs-ink);
}

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 크림 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은 페이드로
   녹여 이음매를 없앤다. 밴드색은 세로 에셋 상단 실측값(#FAE9DC). */
@media (max-width: 1023px) {
  .fs-p-78 .fs-dimple-hero { min-height: 0; background: #FAE9DC; }
  .fs-p-78 .fs-dimple-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-78 .fs-dimple-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px);   /* 2026-10-22 모바일 §1-8 72 → 60 */
            mask-image: linear-gradient(180deg, transparent 0, #000 60px);
  }
  .fs-p-78 .fs-dimple-hero .fs-hero__inner {
    grid-row: 1; background: #FAE9DC;
    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-78 .fs-dimple-hero .fs-hero__copy { max-width: 100%; }
}

/* --- 2. 사진 + 라벨바 프레임 -------------------------------------------- */
.fs-p-78 .fs-dimple-fig { display: grid; }
.fs-p-78 .fs-dimple-fig__frame { display: block; width: 100%; overflow: hidden; }
.fs-p-78 .fs-dimple-fig__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-78 .fs-dimple-fig--intro  .fs-dimple-fig__frame { aspect-ratio: 770 / 675; }
.fs-p-78 .fs-dimple-fig--kind   .fs-dimple-fig__frame { aspect-ratio: 700 / 868; }
.fs-p-78 .fs-dimple-fig--pos    .fs-dimple-fig__frame { aspect-ratio: 700 / 525; }
.fs-p-78 .fs-dimple-fig--target .fs-dimple-fig__frame { aspect-ratio: 700 / 1000; }
.fs-p-78 .fs-dimple-fig--design { justify-self: start; width: min(360px, 100%); }
.fs-p-78 .fs-dimple-fig--design .fs-dimple-fig__frame { aspect-ratio: 520 / 390; }

/* --- 2-1. 공통 리듬 유틸 ------------------------------------------------ */
.fs-p-78 .fs-dimple-block { margin-block-start: clamp(16px, 13.1px + 0.8vw, 28px); }

/* --- 3. 보조개 수술정보 6카드 (A06 확장) -------------------------------- */
.fs-p-78 .fs-dimple-specs {
  display: grid;
  gap: clamp(24px, 20.4px + 1.0vw, 40px);
  margin-block-start: clamp(48px, 39.8px + 2.28vw, 84px);
}
.fs-p-78 .fs-dimple-spec { display: grid; align-content: start; }
.fs-p-78 .fs-dimple-spec__card {
  overflow: hidden;
  gap: clamp(14px, 11.5px + 0.69vw, 25px);
  padding-block: clamp(18px, 15.1px + 0.8vw, 30px) clamp(16px, 13.1px + 0.8vw, 28px);
}
.fs-p-78 .fs-dimple-spec .fs-card__icon { width: clamp(64px, 57.6px + 1.79vw, 92px); }
.fs-p-78 .fs-dimple-spec .fs-card__caption { font-weight: 700; }
.fs-p-78 .fs-dimple-spec__card { min-height: clamp(150px, 136.2px + 3.85vw, 210px); align-content: center; }
.fs-p-78 .fs-dimple-spec .fs-labelbar { width: 100%; }

/* --- 4. 보조개수술의 종류 — 좌 모델 / 우 번호 룰 카드 -------------------- */
.fs-p-78 .fs-dimple-kind { margin-block-start: clamp(24px, 20.4px + 1.0vw, 40px); }
.fs-p-78 .fs-dimple-kind .fs-card--rule { padding-inline: var(--fs-sp-5) 0; }
@media (min-width: 1024px) {
  /* 91 의 3열 룰 카드는 설명이 오른쪽 끝으로 밀려 빈 띠가 생긴다.
     보조개 4종은 「이름 → 인상」 이 붙어 읽혀야 해서 2열 + 세로 스택으로 다시 짠다. */
  .fs-p-78 .fs-dimple-kind .fs-card--rule {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: 4px;
  }
  .fs-p-78 .fs-dimple-kind .fs-card__num { grid-row: span 2; align-self: center; }
}

/* --- 5. 시그니처 · 구강 내 시술 4단계 실사 원형 시퀀스 ----------------- */
.fs-p-78 .fs-dimple-steps {
  --fs-dimple-disc: min(248px, 100%);
  margin-block-start: clamp(34px, 28.4px + 1.556vw, 58px);
}
.fs-p-78 .fs-dimple-flow {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 10.2px + 0.5vw, 20px);
  width: var(--fs-dimple-disc);
}
.fs-p-78 .fs-dimple-flow__fig { display: grid; justify-items: stretch; gap: 0; width: 100%; }
/* .fs-step 의 회색 원을 그대로 쓰되 안쪽을 실사로 채운다 (대체가 아니라 채움) */
.fs-p-78 .fs-dimple-step {
  width: 100%;
  padding: 0;
  gap: 0;
  overflow: hidden;
  justify-items: stretch;
  align-content: stretch;
}
.fs-p-78 .fs-dimple-step img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-78 .fs-dimple-flow .fs-labelbar {
  width: 100%;
  margin-block-start: clamp(10px, 8.2px + 0.5vw, 18px);
  min-height: clamp(50px, 45.4px + 1.28vw, 70px);
  padding-block: 6px;
  line-height: 1.35;
}
.fs-p-78 .fs-dimple-method__head { justify-items: center; text-align: center; }
.fs-p-78 .fs-dimple-steps .fs-steps__link { align-self: center; }
@media (min-width: 900px) {
  .fs-p-78 .fs-dimple-steps {
    --fs-dimple-disc: clamp(148px, 3.5px + 16.1vw, 248px);
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .fs-p-78 .fs-dimple-steps .fs-steps__link {
    width: clamp(14px, -8.7px + 2.53vw, 42px);
    height: 3px;
    align-self: flex-start;
    /* 필(35) + 갭(20) 아래에 원이 오므로 원 중심 = 55 + 지름/2 */
    margin-block-start: calc(var(--fs-dimple-disc) / 2 + 53px);
  }
}

/* --- 6. 포시즌 보조개수술 특징 4카드 ------------------------------------ */
.fs-p-78 .fs-dimple-feats {
  display: grid;
  gap: clamp(24px, 20.4px + 1.0vw, 40px);
  margin-block-start: clamp(48px, 39.8px + 2.28vw, 84px);
}
.fs-p-78 .fs-dimple-feat__card { overflow: hidden; }
.fs-p-78 .fs-card__icon img { width: 100%; height: 100%; object-fit: contain; }

/* --- 7. 보조개 수술대상 아이콘 타일 ------------------------------------- */
.fs-p-78 .fs-dimple-target {
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: clamp(22px, 18.4px + 1.0vw, 38px);
}
@media (min-width: 600px) {
  .fs-p-78 .fs-dimple-target { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fs-p-78 .fs-dimple-target__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 12.2px + 0.5vw, 22px);
  background: var(--fs-white);
  border-block-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-5);
}
.fs-p-78 .fs-dimple-target__icon {
  display: grid;
  place-items: center;
  width: clamp(48px, 42.5px + 1.54vw, 72px);
  aspect-ratio: 1;
  color: var(--fs-teal-dk);
}
.fs-p-78 .fs-dimple-target__icon img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-78 .fs-dimple-target__txt { display: grid; gap: 3px; }

/* --- 8. 포시즌성형외과가 약속드립니다 ----------------------------------- */
.fs-p-78 .fs-dimple-promise {
  display: grid;
  gap: clamp(14px, 11.7px + 0.64vw, 24px);
  margin-block-start: clamp(40px, 33.1px + 1.92vw, 70px);
  padding-block-start: clamp(28px, 23.4px + 1.28vw, 48px);
  border-block-start: 1px solid var(--fs-line);
}
.fs-p-78 .fs-dimple-promise__list { display: grid; gap: clamp(8px, 6.8px + 0.32vw, 13px); }
.fs-p-78 .fs-dimple-promise__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(10px, 8.2px + 0.5vw, 18px);
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
}
.fs-p-78 .fs-dimple-promise__no { font-weight: 700; color: var(--fs-teal-text); white-space: nowrap; }

/* --- 9. reduced-motion 안전판 (새 모션은 없지만 최종 상태를 못박는다) ---- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-78 .fs-dimple-flow,
  .fs-p-78 .fs-dimple-spec,
  .fs-p-78 .fs-dimple-target__item {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

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


/* ==========================================================================
   ▼▼▼ 2026-08-27 · 진단·수정 패스 (V70 「틀 안에서의 재구성」)
   근거: _design/DESIGN_SYSTEM.md 6장 · _design/QA/78.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 접근성 — 면책 고지문이 크림2(#F9F6F2) 위에서 3.82:1 이었다.
   --fs-muted-2(#7D7D7D) 는 fs.css 의 AA 보정 밴드가 손대지 않은 토큰이다.
   같은 회색 계열의 --fs-muted(보정 후 #6E6E6E, fs.css:2716)로 한 단 내려 4.8:1 을 만든다.
   새 색은 만들지 않는다.
   -------------------------------------------------------------------------- */
.fs-p-78 .fs-dimple-promise .fs-muted-2 { color: var(--fs-muted); }

/* --------------------------------------------------------------------------
   B. [LOCK 5] 다크 밴드가 0개였다 — 시술 상세 페이지는 「필수」다.
   1920 에서 6900px 이 흰·크림만으로 이어져 리듬이 한 번도 끊기지 않았다.
   A12 수술방법(7개 섹션 중 5번째)을 이 페이지의 «유일한» 다크 밴드로 세운다.
   · --ink2(#3C3D3F) = nose 계열 다크 밴드색. 이 페이지는 fs-page-nose 다.
   · LOCK 5 는 밴드에 --flush 또는 .fs-section__bg 를 요구한다 → --flush 를 쓰고
     세로 패딩은 컨테이너가 직접 갖는다.
   · 덤: STEP 02 는 흰 배경 사진이라 흰 섹션에서는 원형 프레임이 보이지 않았다.
     다크 위에서는 네 원이 전부 원으로 읽힌다.
   -------------------------------------------------------------------------- */
.fs-p-78 .fs-dimple-method > .fs-container {
  padding-block: var(--fs-sec-pt) var(--fs-sec-pb);
}

/* --------------------------------------------------------------------------
   C. [V70 D] 인접 섹션의 축 반전 — 축 반전 자체는 fs.css 의 .fs-split--swap 이
   처리한다(HTML). 여기서는 뒤집힌 뒤의 리듬만 손본다.
   about(좌 도해) → kinds(우 도해) → position(좌 도해) → method(중앙) → target(좌 도해)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   D. [V70 E] 특징 4카드 — 크림 밴드 위 흰 정사각 상자 4개가 「상자의 나열」로 읽힌다.
   상자를 지우고 세로 헤어라인만 남긴다(48 에서 검증된 처방).
   ★ 배경을 지웠으므로 이 카드의 data-fs-tilt / -gloss 는 HTML 에서 함께 걷어냈다.
     담을 흰 상자 없이 광택만 남으면 크림 위 「흰 얼룩」이 된다(53 에서 실제로 터진 것).
   ★ 2열이 되는 1024 미만에서는 흰 카드를 그대로 둔다 — 좁은 폭에서 헤어라인 2열은
     구분이 아니라 잘린 표처럼 읽힌다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-78 .fs-dimple-feats .fs-grid--4 { gap: 0; }
  .fs-p-78 .fs-dimple-feat { position: relative; }
  .fs-p-78 .fs-dimple-feat__card {
    background: transparent;
    aspect-ratio: auto;                        /* .fs-card--square 의 정사각 강제를 푼다 */
    padding-block: clamp(24px, 1.8vw, 40px);
  }
  .fs-p-78 .fs-dimple-feat + .fs-dimple-feat::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 1px;
    background: var(--fs-line-input);
  }
}

/* --------------------------------------------------------------------------
   E. 제목 뒤에 그어지는 70px 틸 선 (delay .5s) — 48 에서 검증된 것.
   ★ ID 선택자를 base 에 쓰면 «항상 그어진 채» 굳는다(은닉 규칙이 명시도에서 진다).
     그래서 base 는 클래스만으로 짜고, 은닉은 :root.fs-js 로 명시도를 올려 건다.
   ★ 기본을 「그어진 상태」로 둔다 — fs.js 는 첫 화면 대상에 .fs-reveal 을 붙이지
     않으므로 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
   -------------------------------------------------------------------------- */
.fs-p-78 :is(.fs-h2, .fs-nose-head > .fs-h3) { position: relative; }
.fs-p-78 :is(.fs-h2, .fs-nose-head > .fs-h3)::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
/* 가운데 정렬 헤드에서는 선도 가운데로 */
.fs-p-78 .fs-dimple-method__head :is(.fs-h2, .fs-h3)::after {
  margin-inline: auto;
  transform-origin: center;
}
:root.fs-js .fs-p-78 :is(.fs-h2, .fs-h3).fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-78 .fs-reveal:not(.is-in) :is(.fs-h2, .fs-h3)::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   F. 호버 — 프레임은 고정, 사진만 움직인다. 그림자는 쓰지 않는다.
   틸트 inner 는 .fs-dimple-fig__frame 이고 여기서 움직이는 것은 그 «안의 img» 다.
   서로 다른 요소라 리빌·틸트 트랜지션을 덮지 않는다.
   -------------------------------------------------------------------------- */
.fs-p-78 .fs-dimple-fig__frame img,
.fs-p-78 .fs-dimple-step img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-78 .fs-dimple-fig:hover .fs-dimple-fig__frame img,
  .fs-p-78 .fs-dimple-flow:hover .fs-dimple-step img { transform: scale(1.045); }
}

/* --------------------------------------------------------------------------
   G. reduced-motion — 새로 얹은 두 모션(제목 선·사진 확대)을 최종 상태로 못박는다.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-78 :is(.fs-h2, .fs-h3)::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-78 .fs-dimple-fig__frame img,
  .fs-p-78 .fs-dimple-step img {
    transition: none !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   H. 호버 틸트가 라벨바를 두고 가는 것 — 4° 기울면 사진 아랫변이 색면 바에서
   떨어져 LOCK 2 의 「간격 0」이 호버 중에만 깨졌다.
   확정 시안은 이 형태를 만들지 않는다 — 57 의 POINT 카드에는 라벨바가 없고,
   91 의 틸트 figure 에는 figcaption 이 없다. 즉 틸트 대상은 «시각 단위 전체» 다.
   · 수술정보 6카드 → 카드+바를 감싸는 __inner 를 틸트 대상으로 삼는다(HTML).
   · 사진 figure 4장 → figcaption 은 figure 의 직계여야 해서 감쌀 수 없다.
     틸트를 걷어내고 처방된 호버(F. 프레임 고정 + 사진만 scale)만 남겼다(HTML).
   -------------------------------------------------------------------------- */
.fs-p-78 .fs-dimple-spec__inner { display: grid; align-content: start; }

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-78-1022-mo · 실측 _design/momeasure.py 360/390/540/768/1024/1440/1920.
   · 히어로 §1-8 20/30/60 — <1024 스택 블록 제자리 수정(페이드 72 → 60).
   · balance(전 폭): 정의·위치 본문 · 방법 라벨바 · 수술대상 문장 · 약속 5줄 · 주의문 · 주소 — 360 「묶음」「싶은 경우」「시행합니다.」「상담하고 수술합니다.」「진료를 합니다.」「주의가 필요합니다.」,
     1440 본문 「경우도 있으며…」「어울리는 위치를…」 · 라벨바 「조직을 묶음」.
   · 위치 카드 캡션 「입 속 최소절개로 / 흉터가 없음」 류는 디자인 두 줄(`<br>`) — 그대로.
   ========================================================================== */
.fs-p-78 .fs-dimple-block,
.fs-p-78 .fs-labelbar,
.fs-p-78 .fs-dimple-target__txt .fs-body,
.fs-p-78 .fs-dimple-promise__list li > span:last-child,
.fs-p-78 .fs-xs,
.fs-p-78 .fs-address { text-wrap: balance; }

/* 배치(§2 A) — 수술정보 6칸 · 특징 POINT 4장: fs.css .fs-grid--3/--4 가 600 미만 1열이라 칸마다 ≈145~190px 한 줄씩 → 2열.
   값 칸(「부분마취+수면마취」「일상생활 바로 가능」)은 본문 크기 · 좌우 여백을 줄여 155px 칸에 맞춘다(§2 H). 600~1023 은 원래 2열. */
@media (max-width: 599px) {
  .fs-p-78 .fs-dimple-specs .fs-grid--3,
  .fs-p-78 .fs-dimple-feats .fs-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fs-sp-4);
  }
  .fs-p-78 .fs-dimple-spec__card { padding-inline: var(--fs-sp-2); }
  .fs-p-78 .fs-dimple-spec .fs-card__caption { font-size: var(--fs-t-body); word-break: keep-all; text-wrap: balance; }
  .fs-p-78 .fs-dimple-feat__card { padding-inline: var(--fs-sp-2); }
  .fs-p-78 .fs-dimple-feat .fs-card__caption { font-size: var(--fs-t-sm); }
}
