@charset "utf-8";
/* ==========================================================================
   [110] 이중턱 근육묶기 — 페이지 전용 CSS
   모든 셀렉터는 .fs-p-110 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).
   전용 컴포넌트
     .fs-dcp-hero    A01  크림2 밴드 + 우측 세로 모델 타일(다음 섹션에 걸침)
     .fs-dcp-cause   A03  이중턱 발생원인 3분할 도해 카드
     .fs-dcp-check   A10  다크 밴드 자가진단 2군 사진 패널
     .fs-dcp-op      A12  수술과정 3스텝 도해 + 틸 커넥터
     .fs-dcp-grain   A05  ★시그니처 — 턱밑 단면 + 실사 지방알갱이 원형 인서트 + SVG 연결선
     .fs-dcp-merit   A07  포시즌만의 특별함 사진 룰 카드
     .fs-dcp-caution A23  수술 후 주의사항 좌 사진 / 우 번호 카드
   ========================================================================== */

.fs-p-110 { --fs-dcp-drop: clamp(48px, 24px + 2.5vw, 96px); }

/* --- A01 히어로 — 풀블리드 인물 (2026-08-28 개편) --------------------------
   전: 크림2 밴드 좌측 카피 + 우측 320px 세로 타일. 1440 실측에서 좌측 절반이
       빈 크림면이라 카피가 «떠 있고», 사진은 히어로가 아니라 삽화로 읽혔다.
   후: 확정 시안 메인과 같은 아키타입 — 사진이 화면 끝까지 깔리고 그 위에 카피.
       <figure> 를 그대로 배경으로 승격시켜 figcaption(라벨바)을 잃지 않는다.
       ★ 텍스트 노드·alt 는 하나도 건드리지 않았다. 이미지 «파일만» 교체했고
         alt 가 명시한 「그레이지 배경 · 고개를 돌려 턱선과 목선이 드러난」을 그대로 지켰다.
   --------------------------------------------------------------------------- */
.fs-p-110 .fs-dcp-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;                 /* 풀블리드 사진이 넘치지 않게 — 겹침은 없앴다 */
  background: var(--fs-cream-2);    /* 사진 로드 전 바탕 */
  color: var(--fs-ink);
  padding-block: 0;
  min-height: clamp(520px, 380px + 12vw, 720px);
  display: grid;
  align-items: center;
}
/* ★ .fs-hero__inner 는 fs.css 에서 position:relative 다. 그대로 두면
   ① 타일의 inset:0 이 «컨테이너» 기준이 되어 풀블리드가 안 되고(1512px 에 갇힌다)
   ② 같은 스태킹 맥락에서 positioned 타일이 static 카피를 덮어 글자가 사라진다.
   → inner 를 static 으로 풀고, z 는 카피에 직접 준다. */
.fs-p-110 .fs-dcp-hero .fs-hero__inner { position: static; }
/* figure 를 히어로 배경으로 승격 */
.fs-p-110 .fs-dcp-hero__tile {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  margin: 0;
}
.fs-p-110 .fs-dcp-hero__tile picture { display: block; block-size: 100%; }
.fs-p-110 .fs-dcp-hero__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% 14%;         /* 인물이 우측 상단 — 납작한 크롭에서 얼굴을 지킨다 */
}
/* 카피 뒤 크림 스크림 — 사진은 그대로 두고 «글자 뒤만» 밝힌다.
   실측: 스크림 없이는 그레이지(167,175,164) 위 --fs-teal-dk 가 3.07:1 로 AA 미달이었다.
   (킥커 «#두꺼비턱…» 과 리드 «지방은 쏙!빼고…» 가 틸이다)
   ::after 로 img 위·라벨바 아래에 깔아 사진의 노출 자체는 건드리지 않는다. */
.fs-p-110 .fs-dcp-hero__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(246,241,236,.88) 0%,
    rgba(246,241,236,.80) 26%,
    rgba(246,241,236,.42) 46%,
    rgba(246,241,236,0)   64%);
}
@media (max-width: 599px) {
  /* 모바일은 카피가 위 — 스크림도 세로로 돌린다 */
  .fs-p-110 .fs-dcp-hero__tile::after {
    background: linear-gradient(180deg,
      rgba(246,241,236,.92) 0%,
      rgba(246,241,236,.78) 30%,
      rgba(246,241,236,.30) 50%,
      rgba(246,241,236,0)   68%);
  }
}

/* 히어로 캡션 — 화면에서는 걷어낸다 (2026-08-28 승인자 지시).
   ★ DOM 에서 지우지 않는다. 「갸름한 얼굴과 슬림한 목라인」은 의료광고 심의를
     거친 문구라 삭제하면 R1 게이트가 FAIL 이다. fs.css 의 .fs-sr-only 와 같은
     방식으로 시각적으로만 숨기고 스크린리더·문서에는 그대로 남긴다.
     풀블리드 사진이 섹션 아래 끝까지 이어져 1mm 의 «끊김 없는 인물면» 이 된다. */
.fs-p-110 .fs-dcp-hero__tile .fs-labelbar {
  position: absolute !important;
  inset-block-end: 0; inset-inline-start: 0;
  width: 1px; height: 1px;
  padding: 0;
  /* ★ .fs-sr-only 의 margin:-1px 을 그대로 쓰면 vibecheck L2 가
     「라벨바가 사진에서 1px 떠 있다」로 읽어 3개 폭에서 위반이 뜬다.
     이미 absolute 라 음수 마진이 레이아웃상 필요하지도 않다. */
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fs-p-110 .fs-dcp-hero__grid { display: grid; gap: 0; }
.fs-p-110 .fs-dcp-hero__copy {
  position: relative;
  z-index: 1;
  max-width: min(100%, 36ch);
  padding-block: clamp(96px, 60px + 4vw, 150px) clamp(64px, 40px + 3vw, 110px);
}
.fs-p-110 .fs-dcp-hero .fs-hero__kicker {
  color: var(--fs-teal-dk); font-weight: 600; letter-spacing: 0.02em;
}
.fs-p-110 .fs-dcp-hero .fs-hero__title {
  color: var(--fs-ink);
  /* 풀블리드 히어로는 --sub 의 h1 스케일로는 사진에 눌린다.
     확정 시안 메인의 --fs-t-hero 쪽으로 한 단계 올린다. */
  font-size: clamp(32px, 22px + 2.1vw, 62px);
  line-height: 1.08;
}
.fs-p-110 .fs-dcp-hero__eyebrow {
  display: block;
  font-size: var(--fs-t-lead); font-weight: 500; line-height: 1.4;
  color: var(--fs-ink-soft);
  margin-block-end: clamp(6px, 4.6px + 0.385vw, 12px);
}
.fs-p-110 .fs-dcp-hero__note { color: var(--fs-teal-dk); font-weight: 600; }

/* 헤더를 사진 위로 띄운다 — fs.css 의 --overlay 는 «어두운 히어로» 전제라
   흰 글자 + 검은 스크림이다. 이 히어로는 좌측이 밝은 그레이지라 그대로 쓰면
   회색 얼룩이 되고 대비도 뒤집힌다. 글자는 잉크로, 스크림은 흰색으로 되돌린다. */
.fs-p-110 .fs-header--overlay {
  color: var(--fs-ink);
  /* fs.css 의 --overlay 는 rgba(0,0,0,.14) 틴트를 깐다 — 어두운 히어로 전제다.
     밝은 그레이지 히어로에서는 그게 상단에 회색 띠로 보인다. 틴트는 걷고
     아래 크림 스크림만으로 글자 뒤를 받친다. */
  background: transparent;
}
.fs-p-110 .fs-header--overlay::before {
  background: linear-gradient(180deg, rgba(246,241,236,.82) 0%, rgba(246,241,236,.45) 55%, rgba(246,241,236,0) 100%);
}
.fs-p-110 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-110 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }

@media (max-width: 599px) {
  /* 모바일은 세로컷 — 카피가 위, 인물이 아래 */
  .fs-p-110 .fs-dcp-hero { min-height: clamp(520px, 420px + 26vw, 640px); align-items: start; }
  .fs-p-110 .fs-dcp-hero__tile img { object-position: center 30%; }
  .fs-p-110 .fs-dcp-hero__copy { max-width: 100%; padding-block: clamp(78px, 62px + 4vw, 104px) 0; }
}

/* --- A03 발생원인 -------------------------------------------------------- */
.fs-p-110 .fs-dcp-cause__fig { display: grid; }
.fs-p-110 .fs-dcp-cause__fig img { display: block; width: 100%; height: auto; }
.fs-p-110 .fs-dcp-cause__col { display: grid; justify-items: start; gap: clamp(12px, 9.7px + 0.641vw, 22px); }
.fs-p-110 .fs-dcp-cause__col .fs-quote { margin-block-start: 2px; }
.fs-p-110 .fs-dcp-cause {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-110 .fs-dcp-cause > li { min-width: 0; }
@media (min-width: 600px) {
  .fs-p-110 .fs-dcp-cause { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-110 .fs-dcp-cause__card {
  display: grid; align-content: space-between; height: 100%;
  background: var(--fs-cream-2);
}
.fs-p-110 .fs-dcp-cause__top {
  display: grid; justify-items: center; gap: clamp(14px, 11.4px + 0.705vw, 25px);
  padding: clamp(18px, 14.5px + 0.962vw, 33px) var(--fs-sp-5);
}
.fs-p-110 .fs-dcp-cause__ill {
  display: block; width: clamp(88px, 63.7px + 6.7vw, 145px); height: auto;
}
.fs-p-110 .fs-dcp-cause__card .fs-labelbar { min-height: clamp(38px, 34px + 1.1vw, 52px); }

/* --- A10 자가진단 다크 밴드 ---------------------------------------------- */
.fs-p-110 .fs-dcp-check-sec { padding-block: var(--fs-sec-pb); }
.fs-p-110 .fs-dcp-check-sec .fs-section__bg img { opacity: .5; }
.fs-p-110 .fs-dcp-check__kicker { color: var(--fs-teal-neon); }
.fs-p-110 .fs-dcp-check-title { line-height: 1.19; margin-block-start: clamp(8px, 6px + 0.3vw, 14px); }
.fs-p-110 .fs-dcp-hl { color: var(--fs-ink); padding: 2px 10px; line-height: 1; }
.fs-p-110 .fs-dcp-check { margin-block-start: clamp(32px, 27.5px + 1.25vw, 51.5px); }
.fs-p-110 .fs-dcp-check__head { display: grid; gap: var(--fs-sp-6); align-items: end; }
.fs-p-110 .fs-dcp-check__head > * { min-width: 0; }
.fs-p-110 .fs-dcp-check__group { display: grid; justify-items: center; gap: var(--fs-sp-4); }
.fs-p-110 .fs-dcp-check__group > .fs-pill { margin-block-end: clamp(8px, 5px + 0.8vw, 17px); }
.fs-p-110 .fs-dcp-check__pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: 100%;
}
.fs-p-110 .fs-dcp-check__pair img {
  display: block; width: 100%; height: auto; aspect-ratio: 640 / 703; object-fit: cover;
}
.fs-p-110 .fs-dcp-check__group .fs-labelbar { width: 100%; }
.fs-p-110 .fs-dcp-check__note { margin-block-start: clamp(24px, 19.4px + 1.28vw, 44px); }
.fs-p-110 .fs-dcp-check .fs-compare__cell { min-height: clamp(56px, 48px + 2.2vw, 82px); }
.fs-p-110 .fs-dcp-check .fs-compare__cell--left,
.fs-p-110 .fs-dcp-check .fs-compare__cell--right { font-size: var(--fs-t-lead); line-height: 1.5; }
@media (min-width: 768px) {
  .fs-p-110 .fs-dcp-check__head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-gap-col); }
}
@media (min-width: 1024px) {
  .fs-p-110 .fs-dcp-check__head { grid-template-columns: minmax(0, 466fr) minmax(0, 554fr); }
}

/* --- A06 추천대상 -------------------------------------------------------- */
.fs-p-110 .fs-dcp-target { margin-block-start: var(--fs-gap-title); }
.fs-p-110 .fs-dcp-target__card { background: var(--fs-white); }
.fs-p-110 .fs-dcp-target__card .fs-card__icon img { width: 100%; height: 100%; object-fit: contain; }

/* --- A12 수술과정 -------------------------------------------------------- */
.fs-p-110 .fs-dcp-op {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 22.5px + 1.5vw, 52px);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-110 .fs-dcp-op__step {
  position: relative; display: grid; justify-items: center;
  gap: clamp(14px, 11.4px + 0.705vw, 25px); min-width: 0;
}
.fs-p-110 .fs-dcp-op__fig { display: grid; width: 100%; }
.fs-p-110 .fs-dcp-op__box {
  display: block; background: var(--fs-cream-2); padding: clamp(8px, 6px + 0.5vw, 16px);
}
.fs-p-110 .fs-dcp-op__box img { display: block; width: 100%; height: auto; }
.fs-p-110 .fs-dcp-op__text { text-align: center; }
/* 스텝 커넥터 — 틸 막대 (MO 세로 / PC 가로) */
.fs-p-110 .fs-dcp-op__step + .fs-dcp-op__step::before {
  content: ""; position: absolute; background: var(--fs-teal);
  inset-block-start: calc(-1 * clamp(20px, 16px + 1.1vw, 36px));
  inset-inline-start: 50%; width: 3px; height: clamp(14px, 11px + 0.8vw, 24px);
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .fs-p-110 .fs-dcp-op { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-p-110 .fs-dcp-op__step + .fs-dcp-op__step::before {
    inset-block-start: clamp(60px, 40px + 2.6vw, 100px);
    inset-inline-start: calc(-1 * clamp(20px, 16px + 1.1vw, 36px));
    width: clamp(14px, 11px + 0.8vw, 24px); height: 3px; transform: none;
  }
}

/* --- A05 ★시그니처 : 지방알갱이 인서트 ----------------------------------- */
.fs-p-110 .fs-dcp-grain { padding-block-end: clamp(52px, 48px + 1.1vw, 66px); }
.fs-p-110 .fs-dcp-grain__stage { position: relative; width: 100%; }
.fs-p-110 .fs-dcp-grain__anat { display: block; width: 59.5%; height: auto; }
.fs-p-110 .fs-dcp-grain__lens {
  position: absolute; inset-block-start: 35.17%; inset-inline-start: 49.15%;
  width: 50.85%; margin: 0;
}
.fs-p-110 .fs-dcp-grain__lens img { display: block; width: 100%; height: auto; }
.fs-p-110 .fs-dcp-grain__lens .fs-labelbar { min-height: clamp(34px, 30px + 1.1vw, 48px); }
.fs-p-110 .fs-dcp-grain__link {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 59.5%; height: auto; aspect-ratio: 1; color: var(--fs-teal-dk); pointer-events: none;
}
.fs-p-110 .fs-dcp-grain__col { display: grid; justify-items: start; gap: clamp(12px, 9.7px + 0.641vw, 22px); }

/* --- A14 전후 사례 ------------------------------------------------------- */
.fs-p-110 .fs-dcp-ba-sec { padding-block: var(--fs-sec-pb); }
.fs-p-110 .fs-nose-ba .fs-ba__pair { gap: 2px; }

/* --- A07 포시즌만의 특별함 ----------------------------------------------- */
.fs-p-110 .fs-dcp-merit { margin-block-start: var(--fs-gap-title); }
.fs-p-110 .fs-dcp-merit__card { display: grid; align-content: start; gap: 0; min-width: 0; }
.fs-p-110 .fs-dcp-merit__fig { display: grid; }
.fs-p-110 .fs-dcp-merit__fig img { display: block; width: 100%; height: auto; }
.fs-p-110 .fs-dcp-merit__body {
  display: grid; gap: var(--fs-sp-3);
  border-inline-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-5) var(--fs-sp-5) 0;
}
.fs-p-110 .fs-dcp-merit__card .fs-labelbar { min-height: clamp(38px, 34px + 1.1vw, 52px); }

/* --- A23 수술 후 주의사항 ------------------------------------------------ */
.fs-p-110 .fs-dcp-caution__aside { display: grid; justify-items: start; gap: clamp(14px, 11.4px + 0.705vw, 25px); }
.fs-p-110 .fs-dcp-caution__fig { display: grid; width: 100%; margin-block-start: var(--fs-sp-3); }
.fs-p-110 .fs-dcp-caution__fig img { display: block; width: 100%; height: auto; }
.fs-p-110 .fs-dcp-caution__list { align-content: start; }
.fs-p-110 .fs-dcp-caution__list .fs-card--rule { background: var(--fs-white); }
@media (min-width: 1024px) {
  .fs-p-110 .fs-dcp-caution__list .fs-card--rule {
    grid-template-columns: auto minmax(0, 1fr); align-items: start;
  }
  .fs-p-110 .fs-dcp-caution__list .fs-card__num { padding-block-start: 2px; }
}

/* --- 모션 무효화 (새 모션 없음 — 레이아웃 동일 보장) --------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-110 .fs-dcp-hero__tile,
  .fs-p-110 .fs-dcp-grain__lens,
  .fs-p-110 .fs-dcp-cause__card { transform: none !important; opacity: 1 !important; }
}

/* --- A12 마무리 : 지방흡입 × 근육묶기 배지 ------------------------------- */
.fs-p-110 .fs-dcp-duo {
  display: grid; justify-content: center; align-items: stretch;
  grid-template-columns: minmax(0, 220px) auto minmax(0, 220px);
  gap: clamp(10px, 6px + 1.1vw, 26px);
  margin-block-start: clamp(34px, 27px + 1.9vw, 64px);
}
.fs-p-110 .fs-dcp-duo__item { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: var(--fs-sp-4); width: 100%; }
.fs-p-110 .fs-dcp-duo__disc {
  display: grid; place-items: center;
  width: clamp(112px, 78px + 9.4vw, 192px); aspect-ratio: 1;
  border: 2px solid var(--fs-teal);
  border-radius: var(--fs-radius-round);
  background: var(--fs-cream-2);
}
.fs-p-110 .fs-dcp-duo__ill { display: block; width: 58%; height: auto; }
.fs-p-110 .fs-dcp-duo__item .fs-labelbar { width: 100%; }
.fs-p-110 .fs-dcp-duo__x {
  display: grid; place-items: center; align-self: start; color: var(--fs-ink-soft);
  width: clamp(20px, 14px + 1.7vw, 34px); aspect-ratio: 1;
  margin-block-start: clamp(46px, 32px + 3.9vw, 79px);
}
.fs-p-110 .fs-dcp-duo__x svg { width: 100%; height: 100%; }
.fs-p-110 .fs-dcp-duo__note {
  margin-block-start: clamp(20px, 15px + 1.4vw, 40px); color: var(--fs-teal-dk); font-weight: 600;
}

/* --- 다크 밴드 고스트 (D6) ------------------------------------------------ */
.fs-p-110 .fs-dcp-check__ghost {
  display: none; position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: 6%; inset-inline-end: 0;
  width: clamp(220px, 120px + 11vw, 330px); height: auto;
  opacity: .18;
}
@media (min-width: 1200px) { .fs-p-110 .fs-dcp-check__ghost { display: block; } }

/* --- 특별함 섹션 고스트 (D6) --------------------------------------------- */
.fs-p-110 .fs-dcp-merit-sec { overflow: hidden; }
.fs-p-110 .fs-dcp-merit__ghost {
  display: none; position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: 4%; inset-inline-start: 0;
  width: clamp(180px, 90px + 9.4vw, 280px); height: auto;
  opacity: .10;
}
@media (min-width: 1200px) { .fs-p-110 .fs-dcp-merit__ghost { display: block; } }

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-27
   1920 / 1024 / 768 / 360 렌더 실측으로 잡은 결함만 고친다.
   마크업·문구 변경 0건(R1). 새 색 0개 — 기존 --fs-* 토큰만 쓴다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. [LOCK 2 · 폭 조항] 「지방흡입 × 근육묶기」 배지 — 바가 도해보다 넓고 떠 있다
      실측(1920) 원 도해 192px · 라벨바 220px · 그 사이 13px.
      바가 도해보다 넓고 떨어져 있으면 «띠 위에 동그라미가 얹힌» 모양으로 읽힌다
      (vibecheck L2 는 margin-top·border-top 만 재므로 이건 안 잡힌다).
      이 페이지가 이미 쓰는 A03 원인 카드와 같은 형태로 맞춘다 —
      크림2 패널 안에 도해를 담고, 라벨바는 패널 폭 그대로 바닥에 붙인다.
   -------------------------------------------------------------------------- */
.fs-p-110 {
  --fs-dcp-duo-r:   clamp(112px, 78px + 9.4vw, 192px);   /* 원 도해 지름 = 기존 값 */
  --fs-dcp-duo-x:   clamp(20px, 14px + 1.7vw, 34px);     /* × 아이콘 크기 = 기존 값 */
  --fs-dcp-duo-pad: clamp(14px, 10.6px + 0.9vw, 28px);
}
.fs-p-110 .fs-dcp-duo__item {
  gap: var(--fs-dcp-duo-pad);
  padding-block-start: var(--fs-dcp-duo-pad);
  background: var(--fs-cream-2);
}
.fs-p-110 .fs-dcp-duo__disc { width: var(--fs-dcp-duo-r); }
/* × 는 패널이 생긴 뒤에도 원의 세로 중심에 온다 */
.fs-p-110 .fs-dcp-duo__x {
  margin-block-start: calc(var(--fs-dcp-duo-pad) + (var(--fs-dcp-duo-r) - var(--fs-dcp-duo-x)) / 2);
}

/* --------------------------------------------------------------------------
   2. [구조] 자가진단 2군 패널이 위로 어긋나고 아래 비교표와 열이 안 맞는다
      실측 1024 = 필 1635 vs 1679 (44px) · 1920 = 2117 vs 2163 (46px).
      원인: head 를 466fr : 554fr(=90+464) 로 잡아 놓고 그 사이에
      --fs-gap-col(40px) 을 넣어 실제 열이 447.7 : 532.3 이 됐다.
      바로 아래 .fs-compare__row 는 466px | 90px | 464px 이므로 열이 어긋난다.
      → head 를 비교표와 «같은» 3열로 잡고 가운데(90px) 를 비운다.
        두 군의 사진 폭이 466:464 로 같아져 필·사진·라벨바가 한 줄에 선다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-110 .fs-dcp-check__head {
    grid-template-columns: minmax(0, 466fr) 90px minmax(0, 464fr);
    column-gap: 0;
  }
  .fs-p-110 .fs-dcp-check__group:nth-child(1) { grid-column: 1; }
  .fs-p-110 .fs-dcp-check__group:nth-child(2) { grid-column: 3; }
}

/* --------------------------------------------------------------------------
   3. [V70 · E] 추천대상 — 크림 밴드 위 흰 카드 4장이 «상자의 나열» 로 읽힌다
      게다가 .fs-card--square 가 1920 에서 345px 정사각을 강제해 카드마다
      아래쪽 약 66px 가 빈다. 상자를 지우고 세로 헤어라인으로만 나눈다.
      ★ 배경을 지웠으면 틸트도 같이 꺼야 한다 — 담을 흰 상자가 없으면
        fs.js 가 주입하는 .fs-tilt__gloss 가 크림 밴드 위 «흰 얼룩» 이 되고
        3D 회전이 프레임 없는 글자를 통째로 기울인다.
        헤드리스는 FINE_POINTER 게이트에 걸려 스크린샷에 안 잡힌다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-110 .fs-dcp-target { gap: 0; }
  .fs-p-110 .fs-dcp-target > li { position: relative; }
  .fs-p-110 .fs-dcp-target > li + li::before {
    content: "";
    position: absolute;
    inset-block: clamp(10px, 0.8vw, 18px);
    inset-inline-start: 0;
    width: 1px;
    background: var(--fs-line-input);
  }
  .fs-p-110 .fs-dcp-target__card {
    background: transparent;
    aspect-ratio: auto;                 /* .fs-card--square 정사각 강제 해제 */
    padding-inline: clamp(24px, 1.8vw, 40px);
  }
  .fs-p-110 .fs-dcp-target .fs-tilt__inner { transform: none !important; }
  .fs-p-110 .fs-dcp-target .fs-tilt__gloss { opacity: 0 !important; }
}

/* --------------------------------------------------------------------------
   4. [반응형] 특별함 3장이 태블릿에서 마지막 줄에 1장만 남는다
      실측 768·900 — .fs-grid--3 이 2열이 되어 3번 카드가 왼쪽 아래 홀로 떨어진다.
      48 의 「3단은 태블릿에서도 3열을 유지한다」와 같은 처방 — 3 특별함은
      병렬 항목이라 한 장만 키우면 없던 위계가 생긴다. 사진은 재크롭하지 않는다.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-110 .fs-dcp-merit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   5. [마이크로] 섹션 제목 뒤 70px 틸 선 (48 검증분)
      ★ «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
        fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
        → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
      가운데정렬 제목(자가진단·추천대상·B&A·특별함)에는 걸지 않는다.
   -------------------------------------------------------------------------- */
.fs-p-110 .fs-dcp-cause__col h2,
.fs-p-110 .fs-dcp-op-sec .fs-nose-head h2,
.fs-p-110 .fs-dcp-grain__col h2,
.fs-p-110 .fs-dcp-caution__aside h2 { position: relative; }

.fs-p-110 .fs-dcp-cause__col h2::after,
.fs-p-110 .fs-dcp-op-sec .fs-nose-head h2::after,
.fs-p-110 .fs-dcp-grain__col h2::after,
.fs-p-110 .fs-dcp-caution__aside h2::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;
}
:root.fs-js .fs-p-110 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-110 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   6. [마이크로] 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 쓰지 않는다.
      해부도·수술기법 도해(원인 카드·수술과정 도해)에는 걸지 않는다.
   -------------------------------------------------------------------------- */
/* ★ 히어로는 뺐다 — 풀블리드 배경이 된 뒤로는 호버 확대가
   「첫 화면 전체가 움찔하는」 동작이 된다. */
.fs-p-110 .fs-dcp-merit__fig { overflow: hidden; }

.fs-p-110 .fs-dcp-merit__fig img,
.fs-p-110 .fs-dcp-caution__fig .fs-doctor__frame img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-110 .fs-dcp-merit__card:hover .fs-dcp-merit__fig img,
  .fs-p-110 .fs-dcp-caution__fig:hover .fs-doctor__frame img { transform: scale(1.045); }

  /* 라벨바는 사진과 함께 커지면 안 된다 — 글자가 흔들린다. 색만 한 단계. */
  .fs-p-110 .fs-dcp-merit__card:hover .fs-labelbar,
  .fs-p-110 .fs-dcp-caution__fig:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --------------------------------------------------------------------------
   7. [구조] 특별함 섹션 고스트가 «회색 사각형» 으로 읽힌다
      merit-ghost.jpg 는 검은 배경 + 밝은 인물이다. 흰 밴드 위에 10% 로 얹으면
      정작 인물은 흰색에 묻혀 사라지고 검은 배경만 rgb(229,229,229) 회색 면으로
      남아 첫 카드 왼쪽 위로 삐져나온 하드엣지 사각형이 된다(실측).
      명암을 뒤집어 배경을 흰색(=밴드와 같은 색)으로, 인물만 옅은 회색으로 만든다.
      새 색은 없다 — grayscale 을 먼저 걸어 무채색 반전으로만 쓴다.
   -------------------------------------------------------------------------- */
.fs-p-110 .fs-dcp-merit__ghost {
  filter: grayscale(1) invert(1);
  opacity: .16;
}

/* --------------------------------------------------------------------------
   8. reduced-motion — 위에서 새로 얹은 모션을 전부 정지 상태로 확정
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-110 .fs-dcp-cause__col h2::after,
  .fs-p-110 .fs-dcp-op-sec .fs-nose-head h2::after,
  .fs-p-110 .fs-dcp-grain__col h2::after,
  .fs-p-110 .fs-dcp-caution__aside h2::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-110 .fs-dcp-hero__tile img,
  .fs-p-110 .fs-dcp-merit__fig img,
  .fs-p-110 .fs-dcp-caution__fig .fs-doctor__frame img {
    transition: none !important;
    transform: none !important;
  }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-110-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 줄바꿈: 한 문장을 PC 줄 경계에서 <br> 로 자른 곳(원인 본문 · 자가진단 설명 · 수술과정 리드 두 문장) → §1-7 <br class="fs-pc-only">(앞 공백) ·
     수술과정 리드는 두 문장 블록(.fs-lead__s) · 전후 주의문 두 줄 블록화 · h2 · 카드 설명 · 라벨바 · 지방알갱이 본문 · 주소 balance.
   · 배치(<600): 원인 3장 1열 → 2열 + 홀수 마지막 전폭(§2 A) · 추천대상 4장 1열 → 2×2(§2 A, 정사각 강제 해제 — PC ≥1024 와 같은 처방) ·
     수술과정 3단계 1열(도해 전폭, 장당 ≈480px) → «도해+라벨바 왼쪽 44% · STEP 필+설명 오른쪽» 행(§2 B — 141 수술과정과 같은 꼴), 커넥터는 도해 열 가운데.
   · 추천대상 캡션 4 · 단계 설명 3 은 두 구를 <br> 로 나눈 캡션인데 2열 칸(≈135px)·행 글 칸(≈170px)에서 구마다 다시 접혀 「… 주사 / 등」「파악 / 후」「가운데로 / 모아」
     외톨이가 났다 → 같은 §1-7(<br class="fs-pc-only">) + balance. 1024 이상은 그대로 두 줄.
   · 놔둔 것: 히어로 카피·사진 · 자가진단 비교(사진 2장 짝) · 특별함 3장 사진 · 전후 캐러셀. */
.fs-p-110 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-110 .fs-h2,
.fs-p-110 .fs-dcp-check__note,
.fs-p-110 .fs-dcp-cause__col .fs-body,
.fs-p-110 .fs-dcp-grain-sec .fs-body,
.fs-p-110 .fs-dcp-grain-sec .fs-lead,
.fs-p-110 #caution .fs-lead,
.fs-p-110 .fs-card__desc,
.fs-p-110 .fs-card__caption,
.fs-p-110 .fs-dcp-op__text,
.fs-p-110 .fs-labelbar,
.fs-p-110 .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  /* 히어로 — 360 에서 리드 「지방은 쏙!빼고 근육을 확!묶고」(teal-dk)가 모델 정수리 머리카락 위에 얹혀 읽히지 않았다.
     세로컷을 위로 붙여(30% → 0%, 머리가 ≈37px 내려간다) 스크림을 리드 줄까지 한 단 더 밝게 잡는다. 사진 파일 무변경. */
  .fs-p-110 .fs-dcp-hero__tile img { object-position: center 0%; }
  .fs-p-110 .fs-dcp-hero__tile::after {
    background: linear-gradient(180deg,
      rgba(246,241,236,.92) 0%,
      rgba(246,241,236,.84) 34%,
      rgba(246,241,236,.40) 50%,
      rgba(246,241,236,0)   66%);
  }
  .fs-p-110 .fs-dcp-cause { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-sp-4); }
  .fs-p-110 .fs-dcp-cause > li:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }
  .fs-p-110 .fs-dcp-cause__top { padding: var(--fs-sp-5) var(--fs-sp-3); }

  .fs-p-110 .fs-dcp-target { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-sp-4); }
  .fs-p-110 .fs-dcp-target__card { aspect-ratio: auto; padding-inline: var(--fs-sp-2); }
  .fs-p-110 .fs-dcp-target__card .fs-card__caption { font-size: var(--fs-t-sm); word-break: keep-all; }

  .fs-p-110 .fs-dcp-op { gap: var(--fs-sp-8); }
  .fs-p-110 .fs-dcp-op__step {
    grid-template-columns: 40% minmax(0, 1fr);
    column-gap: var(--fs-sp-5);
    row-gap: var(--fs-sp-3);
    justify-items: start;
  }
  .fs-p-110 .fs-dcp-op__fig { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .fs-p-110 .fs-dcp-op__fig .fs-labelbar { font-size: var(--fs-t-sm); }
  .fs-p-110 .fs-dcp-op__step > .fs-pill { grid-column: 2; grid-row: 1; align-self: end; }
  .fs-p-110 .fs-dcp-op__text {
    grid-column: 2; grid-row: 2; align-self: start;
    text-align: start; font-size: var(--fs-t-body); word-break: keep-all;
  }
  .fs-p-110 .fs-dcp-op__step + .fs-dcp-op__step::before {
    inset-block-start: calc(-1 * (var(--fs-sp-8) - 6px));
    inset-inline-start: 20%;
    height: calc(var(--fs-sp-8) - 12px);
  }
}
@media (max-width: 419px) {
  /* 360~419 는 0% 로도 정수리가 리드 줄에 닿는다 — 사진을 48px 더 내린다. 위에 드러나는 띠는 히어로 바탕(크림2)이고
     그 자리는 .92 크림 스크림 아래라 경계가 안 보인다(360·390·414 실측). */
  .fs-p-110 .fs-dcp-hero__tile img { object-position: center 48px; }
}