/* ==========================================================================
   assets/page/48.css — [48] 눈밑지방 클리닉 전용 CSS
   · 모든 셀렉터를 .fs-p-48 스코프 안에 둔다 (다른 72장에 영향 0)
   · 색은 --fs-* 토큰만 사용. 새 hex 없음
   · 전용 컴포넌트: .fs-lef-hero / .fs-lef-keyl / .fs-lef-def / .fs-lef-checks / .fs-lef-stage
                    .fs-lef-cause / .fs-lef-aegyo / .fs-lef-tree / .fs-lef-op
   · 2026-10-06 병원 pptx 10장 반영 — 다크 스테이트먼트(.fs-lef-eq)·대조표(.fs-lef-spec)·스펙 상자 삭제
   ========================================================================== */

/* --- 셸 · A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ---------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 이 페이지 히어로 상단은
   전 폭이 파우더블루(#DAE4ED)라 흰 글자가 아니라 «잉크 글자» 를 쓴다 — 14:1.
   모델 머리는 사진 높이의 28.6% 아래에서 시작하므로 헤더 띠(최대 16%)에 안 걸린다.
   ------------------------------------------------------------------------- */
.fs-p-48 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-48 .fs-page--overlay { background: #DAE4ED; }
.fs-p-48 .fs-header--overlay { color: var(--fs-ink); }
/* 2026-09-11 승인자 지시 「56 처럼 메뉴바 그라디에이션」 — fs.css:468 기본 ::before(검정 스크림)를
   content:none 으로 껐던 것을 되살리고 배경만 밝은 안개로 바꾼다. 56 은 크림(246,241,236)인데
   이 계열 19장은 히어로 틴트가 제각각(세이지·라벤더·블루그레이…)이라 크림을 얹으면 색이 물든다 —
   흰색 알파는 어느 틴트 위에서도 «빛 번짐» 으로 읽힌다(47·64·67·48 비교 렌더로 확인).
   위치·높이(헤더 1.6배)·pointer-events 는 fs.css 기본값 그대로다. */
.fs-p-48 .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-48 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-48 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-48 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-48 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-48 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-48 .fs-util__sep { opacity: .35; }

.fs-p-48 .fs-lef-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. 0%(위 고정)면 모델이 박스 40.6% 지점까지 내려앉아 머리 위가 텅 빈다.
   40% 로 내리면 머리가 23.8% 로 올라오고, 헤더 띠가 덮는 원본 행(127~249)은 여전히
   머리 시작(307) 위쪽이라 잉크 GNB 가 머리카락에 걸리지 않는다. */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=311 라 40% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-48 .fs-lef-hero .fs-hero__bg img { object-position: 50% 60%; }
.fs-p-48 .fs-lef-hero .fs-hero__copy {
  max-width: 34rem;
  gap: clamp(10px, 7.6px + 0.67vw, 20px);
}
.fs-p-48 .fs-lef-hero .fs-hero__kicker {
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-kicker);
  font-weight: 400;
  letter-spacing: var(--fs-ls-wide);
  /* --fs-teal-text(#00787F)는 파우더블루(#DAE4ED) 위에서 4.08:1 로 AA 미달 → 5.37:1 */
  color: var(--fs-teal-dk);
}
.fs-p-48 .fs-lef-hero .fs-hero__title {
  font-size: var(--fs-t-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--fs-ls-tight);
  color: var(--fs-ink);
}
.fs-p-48 .fs-lef-hero__lead {
  max-width: 22em;      /* 2026-10-06 새 리드는 짧아서 30em 이면 1024 에서 한 줄로 펴져 끝 낱말이 모델 머리카락에 닿는다 */
  text-wrap: balance;   /* 1920 에서 「개선」 한 낱말만 둘째 줄에 남았다 */
  color: var(--fs-ink-soft);
  margin-block-start: var(--fs-sp-4);
}

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 파우더블루 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은
   페이드로 녹여 이음매를 없앤다. */
@media (max-width: 1023px) {
  .fs-p-48 .fs-lef-hero { min-height: 0; background: #DAE4ED; }
  .fs-p-48 .fs-lef-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-48 .fs-lef-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-06 모바일 96 → 60 (MOBILE_RULES §1-8) */
            mask-image: linear-gradient(180deg, transparent 0, #000 60px);
  }
  .fs-p-48 .fs-lef-hero .fs-hero__inner {
    grid-row: 1; background: #DAE4ED;
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-5)) var(--fs-sp-7);   /* 2026-10-06 모바일 40/56 → 20/30 (§1-8 「사진을 첫 화면에」) */
  }
  .fs-p-48 .fs-lef-hero .fs-hero__copy { max-width: 100%; }
}

/* --- 2. A23 · KEY POINT — 좌 모델컷 / 우 목록 ------------------------------
   2026-10-06 pptx 슬3 「트임성형 – 복합트임이 필요한 경우 포맷과 동일하게」. 46.css 4절 + 슬9·10 처방을
   48 이름으로 옮겼다. 사진은 기존 KEY POINT 모델(key-03 · 46 과 같은 «턱에 손» 포즈).
   46 은 한 줄 문장이지만 여기는 승인자 지시로 제목·설명 2단을 그대로 둔다.
   필 「KEY POINT 0N」 은 숫자 폭이 달라 본문 열이 어긋나므로 tabular-nums 로 맞춘다. */
.fs-p-48 .fs-lef-keyl {
  display: grid;
  row-gap: clamp(30px, 25.4px + 1.28vw, 50px);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-48 .fs-lef-keyl__photo { display: grid; align-content: start; margin: 0; }
.fs-p-48 .fs-lef-keyl__photo img { display: block; width: 100%; height: auto; }
.fs-p-48 .fs-lef-keyl__list { display: grid; list-style: none; }
.fs-p-48 .fs-lef-keyl__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: var(--fs-sp-5);
  padding-block: clamp(18px, 14.2px + 1.06vw, 30px);
  border-block-end: 1px solid var(--fs-line);
}
.fs-p-48 .fs-lef-keyl__item:last-child { border-block-end: 0; }
.fs-p-48 .fs-lef-keyl__item > .fs-pill { justify-self: start; font-variant-numeric: tabular-nums; }
.fs-p-48 .fs-lef-keyl__body { display: grid; gap: var(--fs-sp-2); }
.fs-p-48 .fs-lef-keyl__title {
  font-size: var(--fs-t-lead);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  color: var(--fs-ink);
  text-wrap: balance;
}
.fs-p-48 .fs-lef-keyl__desc {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}
@media (max-width: 599px) {
  .fs-p-48 .fs-lef-keyl__item { grid-template-columns: minmax(0, 1fr); gap: var(--fs-sp-3); }
}
@media (min-width: 1024px) {
  .fs-p-48 .fs-lef-keyl {
    grid-template-columns: minmax(0, 560fr) minmax(0, 800fr);
    column-gap: clamp(30px, -6.9px + 2.56vw, 60px); row-gap: 0; align-items: center;
  }
}

/* --- 3. 눈밑지방재배치란? — 좌 도해 2(＋) / 우 정의 / 하단 칩 3 ---------------
   2026-10-06 pptx 슬4 「46 복합트임 레이아웃과 동일하게 추가」. 46.css 1·2절 + 슬11 처방
   (본문 두 단락 같은 크기 · 칩 --fs-beige + --fs-ink 14.1:1)을 옮겼다. 합계 바는 지시로 뺐다.
   도해에는 틸트를 걸지 않는다 — figure 에 바로 걸면 사진만 돌고 라벨바가 제자리에 남는다.
   슬5 로 지운 다크 스테이트먼트(원형 3항)의 후임 자리라 KEY POINT 바로 뒤에 둔다. */
.fs-p-48 .fs-lef-def__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(8px, 5.1px + 0.83vw, 21px);
}
.fs-p-48 .fs-lef-def__fig { display: grid; margin: 0; }
.fs-p-48 .fs-lef-def__fig img { display: block; width: 100%; height: auto; }
.fs-p-48 .fs-lef-def__plus {
  display: grid; place-items: center;
  width: clamp(30px, 26.5px + 0.96vw, 45px); aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal-dk); color: var(--fs-white);
}
.fs-p-48 .fs-lef-def__plus svg { width: 44%; height: 44%; }
.fs-p-48 .fs-lef-about__col .fs-kicker { text-wrap: balance; }   /* 360 에서 「SURGERY」 한 낱말만 둘째 줄에 남았다 */
.fs-p-48 .fs-lef-about__col .fs-h2 { margin-block-start: clamp(9px, 7.5px + 0.42vw, 16px); }
.fs-p-48 .fs-lef-about__col .fs-quote { margin-block-start: clamp(14px, 11.2px + 0.77vw, 26px); }
.fs-p-48 .fs-lef-about__col .fs-body { margin-block-start: clamp(12px, 10.2px + 0.51vw, 20px); color: var(--fs-muted); }
.fs-p-48 .fs-lef-about__col .fs-quote,
.fs-p-48 .fs-lef-about__col .fs-body { font-size: var(--fs-t-lead); line-height: 1.6; }
.fs-p-48 .fs-lef-checks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: clamp(30px, 23.5px + 1.79vw, 58px);
  list-style: none;
}
.fs-p-48 .fs-lef-check { display: grid; }
.fs-p-48 .fs-lef-check .fs-labelbar {
  width: 100%; min-height: clamp(56px, 51.2px + 1.28vw, 76px);
  line-height: 1.35; padding-block: var(--fs-sp-1);
  background: var(--fs-beige); color: var(--fs-ink);
  font-size: var(--fs-t-lead); font-weight: 500;
}
@media (max-width: 599px) {
  .fs-p-48 .fs-lef-checks { grid-template-columns: minmax(0, 1fr); }
}

/* --- 4. A11 · 발생 원인(좌 도해 / 우 설명) + 발생과정 3단 도해 ---------- */
.fs-p-48 .fs-lef-cause__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 20.5px + 2.64vw, 70px);
  align-items: center;
}
.fs-p-48 .fs-lef-cause__copy { display: grid; align-content: center; gap: var(--fs-sp-4); }
.fs-p-48 .fs-lef-cause__fig { display: grid; justify-items: center; margin: 0; }
.fs-p-48 .fs-lef-cause__fig img { display: block; width: 100%; max-width: 440px; height: auto; }
.fs-p-48 .fs-lef-cause__fig .fs-labelbar { width: 100%; max-width: 440px; margin-block-start: var(--fs-sp-2); }
.fs-p-48 .fs-lef-cause__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-sp-3);
}
.fs-p-48 .fs-lef-cause__card { border: 1px solid var(--fs-line); }
.fs-p-48 .fs-lef-cause__head {
  padding: var(--fs-sp-3) var(--fs-sp-5);
  background: var(--fs-teal-text);
  color: var(--fs-white);
  font-size: var(--fs-t-body);
  font-weight: 700;
  text-align: center;
}
.fs-p-48 .fs-lef-cause__list {
  display: grid; gap: var(--fs-sp-2);
  padding: var(--fs-sp-5);
  list-style: none;
  counter-reset: leffs;
}
.fs-p-48 .fs-lef-cause__list li {
  display: grid;
  grid-template-columns: auto 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);
  counter-increment: leffs;
}
.fs-p-48 .fs-lef-cause__list li::before {
  content: counter(leffs, decimal-leading-zero);
  font-weight: 700;
  color: var(--fs-teal-text);
}
@media (min-width: 600px) {
  .fs-p-48 .fs-lef-cause__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-p-48 .fs-lef-cause__grid { grid-template-columns: minmax(0, 440fr) minmax(0, 900fr); }
}

/* --- 5. 발생과정 3단 도해 → 3행 ------------------------------------------
   2026-10-06 pptx 슬6 「일러스트 크기 70%정도 줄이고 세로로 일괄 왼쪽 정렬 · 오른쪽에 문구 왼쪽정렬」.
   도해 폭 = 3열 시절 실측(offsetWidth)의 70% — 1920 467→327 · 1440 444→311 · 1024 309→216 · 768 226→158.
   <600 은 옆 칸이 80px 밖에 안 남아 도해(320→224) 아래로 문구를 쌓는다. */
.fs-p-48 .fs-lef-stage { margin-block-start: clamp(50px, 33.9px + 4.47vw, 118px); }
.fs-p-48 .fs-lef-stage__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
  list-style: none;
}
.fs-p-48 .fs-lef-stage__cards { row-gap: clamp(30px, 23.5px + 1.79vw, 58px); }   /* 행으로 쌓이니 카드 간격(20px)으로는 라벨바가 다음 도해에 붙는다 */
.fs-p-48 .fs-lef-stage__card {
  --lef-stage-w: 224px;
  display: grid; align-content: start; justify-items: start; gap: var(--fs-sp-4);
}
.fs-p-48 .fs-lef-stage__fig { display: grid; width: var(--lef-stage-w); max-width: 100%; margin: 0; }
.fs-p-48 .fs-lef-stage__ill {
  display: block; width: 100%; height: auto;
  background: var(--fs-cream-2);
}
.fs-p-48 .fs-lef-stage__notes { display: grid; gap: var(--fs-sp-3); list-style: none; }
.fs-p-48 .fs-lef-stage__notes li {
  display: grid;
  grid-template-columns: auto 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-48 .fs-lef-stage__notes li::before {
  content: "";
  inline-size: 6px; block-size: 6px;
  margin-block-start: 0.6em;
  background: var(--fs-teal-text);
}
@media (min-width: 600px) {
  .fs-p-48 .fs-lef-stage__card {
    --lef-stage-w: clamp(150px, -17.9px + 22.84vw, 327px);
    grid-template-columns: var(--lef-stage-w) minmax(0, 1fr);
    align-items: center; justify-items: stretch;
    column-gap: clamp(24px, 13.5px + 2.92vw, 68px);
  }
}

/* --- 6. A03 · 눈밑지방과 애교살 ----------------------------------------- */
.fs-p-48 .fs-lef-aegyo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 20.5px + 2.64vw, 70px);
  align-items: center;
}
.fs-p-48 .fs-lef-aegyo__fig { display: grid; justify-items: center; margin: 0; }
.fs-p-48 .fs-lef-aegyo__fig img {
  display: block; width: 100%; max-width: 420px; height: auto;
}
.fs-p-48 .fs-lef-aegyo__fig .fs-labelbar { width: 100%; max-width: 420px; margin-block-start: var(--fs-sp-2); }
.fs-p-48 .fs-lef-aegyo__copy { display: grid; align-content: center; gap: var(--fs-sp-4); }
/* 2026-10-06 승인자 「이미지에 비해 텍스트가 너무 작다 — 텍스트든 이미지든 조정」.
   1920 실측 도해+라벨바 545px vs 글 321px(본문 17px). 본문을 리드 크기로 키우고(위 「눈밑지방재배치란?」과 같은 처리)
   도해는 460→420px + 원 아래 구워진 빈 띠(87px)를 잘라 라벨바를 원에 붙였다. */
.fs-p-48 .fs-lef-aegyo__copy .fs-body { font-size: var(--fs-t-lead); line-height: 1.6; }
@media (min-width: 1024px) {
  .fs-p-48 .fs-lef-aegyo__grid { grid-template-columns: minmax(0, 540fr) minmax(0, 820fr); }
}

/* --- 7. ★ 시그니처 · 유형별 눈밑지방 수술 라우팅 트리 ------------------- */
.fs-p-48 .fs-lef-tree {
  --lef-rail: clamp(26px, 14.4px + 1.21vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lef-rail);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-48 .fs-lef-tree__col { position: relative; display: grid; gap: var(--fs-sp-2); list-style: none; }
.fs-p-48 .fs-lef-tree__cell { position: relative; display: grid; align-items: center; }
.fs-p-48 .fs-lef-tree__node {
  display: flex; align-items: center; justify-content: center;
  gap: var(--fs-sp-2);
  min-height: clamp(46px, 41.3px + 1.32vw, 66px);
  padding: var(--fs-sp-2) var(--fs-sp-4);
  background: var(--fs-cream);
  color: var(--fs-ink);
  font-size: var(--fs-t-body);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.fs-p-48 .fs-lef-tree__node--root { font-weight: 700; }
.fs-p-48 .fs-lef-tree__dots { display: none; }   /* 2026-10-07 기준 색 동그라미 — <1024 에서만 보인다(② 분기도 끝) */
/* 원본의 연령 색 구분(주황/남색)을 시안 팔레트로 치환 — 같은 색이 곧 같은 연령대 경로다 */
.fs-p-48 .fs-lef-tree__node--a { background: var(--fs-teal-text); color: var(--fs-white); font-weight: 700; }
/* 2026-10-06 승인자 「검은색 좀 별로이지 않아?」 — 순검정 #111 이 토프 곁에서 혼자 튀었다. fs.css 09-11 «수술 후 라벨바» 처방과 같은
   H16° 가장 어두운 단계 #3D302B 로 내린다(20대 경로 #80665D 와 명도비 2.4:1 — 두 경로가 여전히 갈린다 · 흰 글자 12.7:1). */
.fs-p-48 .fs-lef-tree__node--b { background: #3D302B; color: var(--fs-on-dark); font-weight: 700; }
.fs-p-48 a.fs-lef-tree__node {
  justify-content: flex-start;
  text-align: start;
  text-decoration: none;
  transition: background var(--fs-dur-fast) var(--fs-ease);
}
.fs-p-48 a.fs-lef-tree__node:hover,
.fs-p-48 a.fs-lef-tree__node:focus-visible { background: var(--fs-teal-dk); }
.fs-p-48 .fs-lef-tree__num {
  flex: 0 0 auto;
  padding-inline-end: var(--fs-sp-2);
  border-inline-end: 1px solid currentColor;
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-pill);
  font-weight: 400;
  color: inherit;
}
@media (min-width: 1024px) {
  .fs-p-48 .fs-lef-tree {
    grid-template-columns: minmax(0, 200fr) minmax(0, 200fr) minmax(0, 220fr) minmax(0, 380fr);
    column-gap: calc(var(--lef-rail) * 2);
    align-items: stretch;
  }
  .fs-p-48 .fs-lef-tree__col { grid-auto-rows: 1fr; gap: 0; }
  .fs-p-48 .fs-lef-tree__cell { padding-block: var(--fs-sp-1); }
  /* 세로 레일 */
  .fs-p-48 .fs-lef-tree__col:not(:first-child) .fs-lef-tree__cell::before {
    content: "";
    position: absolute; inset-block: 0;
    inset-inline-start: calc(-1 * var(--lef-rail));
    width: 1px;
    background: var(--fs-line-control);
  }
  .fs-p-48 .fs-lef-tree__col:not(:first-child) .fs-lef-tree__cell:first-child::before { inset-block-start: 50%; }
  .fs-p-48 .fs-lef-tree__col:not(:first-child) .fs-lef-tree__cell:last-child::before { inset-block-end: 50%; }
  /* 레일 → 노드 진입선 */
  .fs-p-48 .fs-lef-tree__col:not(:first-child) .fs-lef-tree__cell::after {
    content: "";
    position: absolute; inset-block-start: 50%;
    inset-inline-start: calc(-1 * var(--lef-rail));
    width: var(--lef-rail); height: 1px;
    background: var(--fs-line-control);
  }
  /* 노드 → 다음 레일 진출선 */
  .fs-p-48 .fs-lef-tree__col:not(:last-child) .fs-lef-tree__node::after {
    content: "";
    position: absolute; inset-block-start: 50%;
    inset-inline-start: 100%;
    width: var(--lef-rail); height: 1px;
    background: var(--fs-line-control);
  }
  .fs-p-48 .fs-lef-tree__node { position: relative; }
}
@media (max-width: 1023px) {
  /* 모바일 — 세로 계층 스택 + 가운데 커넥터 */
  .fs-p-48 .fs-lef-tree__col:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    width: 1px; height: var(--lef-rail);
    background: var(--fs-line-control);
  }
  .fs-p-48 .fs-lef-tree__col--leaf { gap: var(--fs-sp-2); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-48 .fs-lef-tree__col--age,
  .fs-p-48 .fs-lef-tree__col--axis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-48 .fs-lef-tree__col--leaf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 8. A06 · 8가지 술식 카드 ------------------------------------------ */
.fs-p-48 .fs-lef-ops {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
  list-style: none;
}
.fs-p-48 .fs-lef-op {
  display: grid; align-content: start;
  gap: var(--fs-sp-4);
  padding: var(--fs-sp-6) var(--fs-sp-6) var(--fs-sp-5);
  background: var(--fs-white);
  border-block-start: 2px solid var(--fs-teal);
  scroll-margin-block-start: clamp(80px, 62.5px + 4.86vw, 154px);
}
.fs-p-48 .fs-lef-op > .fs-pill { justify-self: start; }
.fs-p-48 .fs-lef-op__title {
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  color: var(--fs-ink);
}
.fs-p-48 .fs-lef-op__desc {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
}
.fs-p-48 .fs-lef-op__label {
  font-size: var(--fs-t-kicker);
  font-weight: 700;
  letter-spacing: var(--fs-ls-wide);
  color: var(--fs-teal-text);
}
.fs-p-48 .fs-lef-op__targets { display: grid; gap: var(--fs-sp-2); list-style: none; }
.fs-p-48 .fs-lef-op__targets li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-3);
  align-items: start;
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}
.fs-p-48 .fs-lef-op__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px;
  border-radius: var(--fs-radius-round);
  background: #3D302B;   /* 2026-10-06 순검정 → 진갈색(위 분기도 40대 경로와 같은 값) */
  color: var(--fs-white);
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-xs);
  font-weight: 700;
}
@media (min-width: 900px) {
  .fs-p-48 .fs-lef-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 10. reduced-motion — 새 모션은 없으나 방어적으로 고정 -------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-48 a.fs-lef-tree__node { transition: none !important; }
}


/* ==========================================================================
   ▼▼▼ V70 「틀 안에서의 재구성」 승격분 — 2026-08-27
   Phase 2 방향 선택 결과 V70 확정. variants/v90/v90.css + variants/v70/v70.css 를
   이 파일 뒤에 이어 붙인 것이다(원본은 _src/build/backup-v70-promote/ 에 있다).
   근거·이유는 _design/DESIGN_DECISIONS.md 2·3장.
   ========================================================================== */
/* ==========================================================================
   A. VIBE LOCK 위반 수정 — vibecheck.py 가 기준 페이지에서 잡아낸 것
   ========================================================================== */

/* A-1 [LOCK 2] 라벨바는 사진에 «간격 0» 으로 붙어야 한다.
   48.css:144·232 가 margin-block-start: var(--fs-sp-2) 로 8px 를 벌려 놓았다.
   원형 도해라 그 8px 가 「바가 허공에 뜬」 것처럼 읽힌다. */
.fs-p-48 .fs-lef-cause__fig .fs-labelbar,
.fs-p-48 .fs-lef-aegyo__fig .fs-labelbar { margin-block-start: 0; }

/* A-2 [LOCK 7] <strong> 의 UA 기본값 bolder 는 부모 700 위에서 900 으로 계산된다.
   Pretendard 서브셋에는 900 페이스가 없어 조용히 700 으로 폴백되지만,
   계산값이 상한을 넘는 상태 자체를 없앤다. */
.fs-p-48 strong,
.fs-p-48 b { font-weight: 700; }

/* ==========================================================================
   B. 타이포 리듬 — 제목 뒤에 그어지는 짧은 선  [R#1]
   에이펙스: 제목이 올라온 뒤 70px 선이 delay .5s 로 scaleX(0→1)
   ========================================================================== */

.fs-p-48 .fs-nose-head h2,
.fs-p-48 .fs-lef-about__col h2,
.fs-p-48 .fs-lef-cause__copy h2,
.fs-p-48 .fs-lef-aegyo__copy h2 { position: relative; }

.fs-p-48 .fs-nose-head h2::after,
.fs-p-48 .fs-lef-about__col h2::after,
.fs-p-48 .fs-lef-cause__copy h2::after,
.fs-p-48 .fs-lef-aegyo__copy h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform-origin: left center;
}

/* ★ 초기 은닉을 :root.fs-js 로 걸면 안 된다.
   fs.js 는 첫 화면 안에 있던 대상에는 .fs-reveal 클래스 자체를 붙이지 않고
   .is-in 도 주지 않는다(첫화면 게이트). 그래서 «.is-in 이면 보이기» 로 짜면
   첫 화면 제목의 선은 영원히 안 그어진다.
   → 기본을 「그어진 상태」로 두고, fs.js 가 실제로 리빌 대상으로 표시한
     .fs-reveal 에만 초기 은닉을 건다. */
.fs-p-48 .fs-nose-head h2::after,
.fs-p-48 .fs-lef-about__col h2::after,
.fs-p-48 .fs-lef-cause__copy h2::after,
.fs-p-48 .fs-lef-aegyo__copy h2::after {
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-48 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-48 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* ==========================================================================
   C. 진입 모션 — 시차와 팝인
   ========================================================================== */

/* C-1 [R#4] 아래 요소일수록 이동거리를 키워 시차를 만든다.
   공용 --fs-reveal-y 는 28px. 카드 그리드 안에서만 단계적으로 키운다. */
.fs-p-48 .fs-lef-stage__card:nth-child(n+2) { --fs-reveal-y: 36px; }

/* ==========================================================================
   D. 호버 — 프레임은 고정, 사진만 움직인다  [R#9]
   그림자는 쓰지 않는다(2차 규칙).
   ========================================================================== */

.fs-p-48 .fs-lef-stage__fig { overflow: hidden; }
/* 사진이 1.045배로 커질 때 라벨바를 덮지 않게 바를 한 층 올린다 */
.fs-p-48 .fs-lef-stage__fig .fs-labelbar { position: relative; z-index: 1; }

.fs-p-48 .fs-lef-stage__fig img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-48 .fs-lef-stage__card:hover .fs-lef-stage__fig img { transform: scale(1.045); }

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

/* ==========================================================================
   F. 반응형 디테일 — 태블릿 구간
   DESIGN_SYSTEM 3.5: 768px 분기가 0건이라 콘텐츠 717.54px 에서 모든 그리드가
   일률 2열이 되고, 5열짜리 KEY POINT 는 마지막 줄에 1장만 남는다.
   V90 은 순서·비율을 바꾸지 않으므로 「열 수만」 손본다.
   ========================================================================== */

@media (min-width: 600px) and (max-width: 1023px) {
  /* KEY POINT 는 지그재그 «행» 이라 열 처방이 필요 없다(2026-08-28 레이아웃 교체) */
  /* 발생과정은 2026-10-06 슬6 으로 3행이 됐다 — 태블릿 3열 처방은 걷었다 */
}

/* ==========================================================================
   H. reduced-motion — 전부 정지 상태로 확정
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fs-p-48 .fs-nose-head h2::after,
  .fs-p-48 .fs-lef-about__col h2::after,
  .fs-p-48 .fs-lef-cause__copy h2::after,
  .fs-p-48 .fs-lef-aegyo__copy h2::after { transform: scaleX(1) !important; transition: none !important; }

  .fs-p-48 .fs-lef-stage__fig img { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   3. 발생 원인 — 좌 도해를 스티키 컬럼으로
   시안은 align-items:center 라 도해와 카피가 «가운데에서 만나는» 정적 구성이다.
   도해를 고정하고 설명이 그 옆을 흐르게 하면 «원인 → 유형 → 과정» 이
   한 도해를 계속 참조하는 형태로 읽힌다.
   ========================================================================== */

@media (min-width: 1024px) {
  .fs-p-48 .fs-lef-cause__grid {
    grid-template-columns: minmax(0, 380fr) minmax(0, 960fr);
    align-items: start;
  }
  .fs-p-48 .fs-lef-cause__fig {
    position: sticky;
    top: calc(var(--fs-header-h) + var(--fs-sp-6));
  }
}

/* ==========================================================================
   4. 애교살 — 좌우 반전 + 정의 카드 2장이 도해와 가로로 겹친다
   시안은 「좌 도해 / 우 카피」가 앞 섹션과 똑같은 배치라 두 섹션이
   같은 리듬으로 붙어 단조롭다. 여기서 축을 뒤집어 리듬을 끊는다.
   ========================================================================== */

@media (min-width: 1024px) {
  .fs-p-48 .fs-lef-aegyo__grid {
    /* 2026-10-06 승인자 「빈 공간이 너무 많아. 레이아웃 손봐줘」(1864 스크린샷) — 820fr:540fr 는 글 칸 826 · 도해 칸 544 였다.
       글은 2~3줄짜리 균형 문단이라 칸을 못 채우고, 420 도해는 칸 가운데라 둘 사이가 230~480px 비었다.
       → 칸을 내용 폭(글 560 · 도해 420)으로 줄이고 묶음을 컨테이너 가운데에, 둘을 세로 가운데로 맞춘다.
       글 칸 560 = 균형 줄바꿈 문단의 실제 줄 길이(≈520). 640 이면 칸 안에 다시 빈 띠가 남고, balance 를 풀면 1280↑ 에서 고아 줄이 생긴다. */
    grid-template-columns: minmax(0, 560px) minmax(0, 420px);
    justify-content: center;
    column-gap: clamp(56px, 10.3px + 4.464vw, 96px);
    align-items: center;
  }
  .fs-p-48 .fs-lef-aegyo__fig  { order: 2; }
  .fs-p-48 .fs-lef-aegyo__copy { order: 1; }

  /* ★ 여기서 정의 2장을 음수 마진으로 끌어올리려다 두 가지가 깨졌다.
     ① 겹침이 원형 도해의 «눈밑지방과 애교살» 라벨바를 통째로 먹었다.
        (겹침은 라벨바가 붙은 도해 위로 절대 올라오면 안 된다 — LOCK 2)
     ② 정의 2장을 820:540 비대칭으로 만들었더니 두 임상 클로즈업의
        높이가 달라져 그 아래 설명 캡션이 서로 어긋났다.
     축 반전만으로도 리듬은 충분히 끊긴다. 겹침과 비대칭은 되돌린다. */
}

/* ==========================================================================
   5. 수술방법과 수술대상 — 흰 카드 상자 → 세로 헤어라인 2열
   상자를 지우고 가는 세로선만으로 나누면 크림 밴드 위에서 밀도가 올라가고
   카드 8장이 만드는 «상자의 반복»이 사라진다. (그림자 0 원칙과도 맞는다)
   ========================================================================== */

@media (min-width: 1024px) {
  .fs-p-48 .fs-lef-ops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .fs-p-48 .fs-lef-op {
    position: relative;
    background: transparent;                   /* 상자를 지운다 */
    border-block-start: 0;
    padding: clamp(28px, 2vw, 44px) clamp(24px, 1.8vw, 40px);
  }
  /* 세로 구분선 — 홀수 칸 오른쪽에만 */
  .fs-p-48 .fs-lef-op:nth-child(odd)::after {
    content: "";
    position: absolute;
    inset-block: clamp(28px, 2vw, 44px);
    inset-inline-end: 0;
    width: 1px;
    background: var(--fs-line-input);
  }
  /* 가로 구분선 — 첫 줄을 제외한 모든 줄 위에 */
  .fs-p-48 .fs-lef-op:nth-child(n+3)::before {
    content: "";
    position: absolute;
    inset-inline: clamp(24px, 1.8vw, 40px);
    inset-block-start: 0;
    height: 1px;
    background: var(--fs-line-input);
  }
  /* 번호 필은 상자가 사라진 만큼 더 또렷해야 한다 */
  .fs-p-48 .fs-lef-op > .fs-pill { margin-block-end: var(--fs-sp-1); }
}

/* ==========================================================================
   6. reduced-motion — 스티키는 모션이 아니므로 유지, 겹침도 정적이라 유지
   (이 파일에는 트랜지션이 없다)
   ========================================================================== */


/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 눈성형 = 블루그레이 #DDE4EB (fs.css «카테고리 틴트» 블록 + body.fs-cat-eye)
   승인자 결정: 웜 축의 유일한 쿨 예외(48 사진 상단색 계열). 공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개·글자 후광을 정한다.
   모델 오른쪽(x 54%~) · 사진은 원래 블루그레이라 유지
   ========================================================================== */
.fs-p-48 .fs-lef-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), .90) 26%, rgba(var(--fs-cat), .50) 42%, rgba(var(--fs-cat), 0) 52%);
}
@media (max-width: 1023px) {
  .fs-p-48 .fs-lef-hero .fs-hero__bg::after { content: none; }
  .fs-p-48 .fs-lef-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 줄바꿈(승인자 「페이지 전체적인 줄바꿈 확인 및 모바일 줄바꿈 확인」) — 줄바꿈은 전 폭, 배치 무변경.
   PC 요소 위치 무변화(1024·1280·1440·1920 rect 실측 0). 백업 _src/build/backup-48-1006-lb/ · 실측 _design/momeasure.py 360·390·412·540·768·1024·1280·1440·1920
   before 고아 줄 66블록(분기도 번호·주소 둘째 줄 가짜 포함) → balance 전 폭 + nbsp 31(15종) + WJ 3(물결표 「20대~40대」 양쪽) + 인용 <br> 블록화 1.
   남긴 것(구 경계): 히어로 킥커 「LOWER EYELID / FAT REPOSITIONING」(360) · KEY POINT h2 「…클리닉 / KEY POINT」 ·
   「3중 복합 치료법(지방제거 / +지방재배치+격막 강화)」(360·390 — 괄호 덩어리가 칸보다 길다) · 주소 「(쥬디스태화 신관 주차)」
   ========================================================================== */
.fs-p-48 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-48 .fs-hero__kicker,
.fs-p-48 .fs-lef-keyl__title,
.fs-p-48 .fs-lef-keyl__desc,
.fs-p-48 .fs-lef-about__col .fs-quote,
.fs-p-48 .fs-lef-about__col .fs-body,
.fs-p-48 #stage .fs-lead,
.fs-p-48 #stage .fs-body,
.fs-p-48 .fs-lef-cause__list li,
.fs-p-48 .fs-lef-stage__notes li,
.fs-p-48 #aegyo .fs-body,
.fs-p-48 #types .fs-lead,
.fs-p-48 .fs-lef-op__desc,
.fs-p-48 .fs-lef-op__targets li,
.fs-p-48 .fs-labelbar,
.fs-p-48 .fs-address { text-wrap: balance; }

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 발생과정 = 단계 타임라인 (2차)
   승인자 「레이아웃 손봐줘」 → 1차 크림 패널 반려 → 타임라인 1차 「타임라인 좋은데 아직도 내용이 잘 안 읽혀」.
   안 읽힌 이유 3가지와 처방:
   ① 지금 무슨 단계인지가 글 옆에 없었다 — 단계 이름이 도해 밑 라벨바에만 있었다.
      → 라벨바 글을 글 열의 소제목(h4)으로 «옮겼다»(문구 동일 · 도해 라벨바 3개는 없어짐 — LOCK 2 이탈 3, 이름이 바로 옆 소제목으로 갔다).
   ② 글의 시작점이 418px 도해의 세로 가운데에 떠 번호와 어긋났다 → 번호 원 · 소제목 · 도해 윗변을 한 줄에 맞추고 글은 위에서부터.
   ③ 진행 정도가 안 보였다 → 소제목 아래 3칸 진행도 막대(1/3 · 2/3 · 3/3, 글자 없는 장식)와 단계 색(토프 → 진한 토프 → 진갈색).
   읽는 순서 = 번호 → 소제목 → 진행도 → 상태 문장(굵게) → 이유 문장. <600 은 소제목이 도해 위로 온다.
   pptx 슬6(도해 70% · 세로 · 도해 왼쪽 · 오른쪽 문구 왼쪽 정렬)은 그대로. 번호는 CSS 카운터(R1 무관).
   백업 _src/build/backup-48-1006-stage2/ (1차 타임라인)
   ========================================================================== */
.fs-p-48 .fs-lef-stage__cards {
  counter-reset: lefstage;
  --lef-rail: clamp(44px, 37.6px + 1.79vw, 72px);     /* 축 칸 — 10-06 「넘버링 사이즈 조금 키우자」 32~42 → 44~72 */
  --lef-dot: clamp(40px, 36.3px + 1.03vw, 56px);      /* 번호 원 30~38 → 40~56 */
  --lef-stage-gap: clamp(44px, 32.7px + 3.14vw, 84px);
  --lef-track: var(--fs-line-input);
  row-gap: var(--lef-stage-gap);
}
.fs-p-48 .fs-lef-stage__card {
  --lef-c: var(--fs-teal-text);                            /* 단계 색 — 흰 위 5.28 */
  --lef-s1: var(--lef-c); --lef-s2: var(--lef-track); --lef-s3: var(--lef-track);
  counter-increment: lefstage;
  position: relative;
  display: grid;
  grid-template-columns: var(--lef-rail) minmax(0, 1fr);
  grid-template-areas: "dot title" ". fig" ". notes";
  align-items: start; justify-items: stretch;
  column-gap: clamp(14px, 9.2px + 1.33vw, 32px);
  row-gap: var(--fs-sp-4);
}
.fs-p-48 .fs-lef-stage__card:nth-child(2) { --lef-c: var(--fs-teal-dk); --lef-s2: var(--lef-c); }                       /* 6.85 */
.fs-p-48 .fs-lef-stage__card:nth-child(3) { --lef-c: #3D302B; --lef-s2: var(--lef-c); --lef-s3: var(--lef-c); }        /* 12.7 — 분기도 40대 경로와 같은 진갈색 */
.fs-p-48 .fs-lef-stage__fig   { grid-area: fig; justify-self: start; }
.fs-p-48 .fs-lef-stage__notes { grid-area: notes; }

/* 번호 원 + 잇는 선 */
.fs-p-48 .fs-lef-stage__card::before {
  content: counter(lefstage, decimal-leading-zero);
  grid-area: dot; justify-self: center; align-self: start;
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--lef-dot); aspect-ratio: 1;
  border: clamp(2px, 1.7px + 0.08vw, 3px) solid var(--lef-c); border-radius: var(--fs-radius-round);
  background: var(--lef-c); color: var(--fs-white);
  font-family: var(--fs-font-en); font-size: clamp(15px, 13.6px + 0.38vw, 20px); font-weight: 700; line-height: 1; letter-spacing: 0;
}
.fs-p-48 .fs-lef-stage__card:first-child::before { background: var(--fs-white); color: var(--lef-c); }
.fs-p-48 .fs-lef-stage__card:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  inset-inline-start: calc(var(--lef-rail) / 2 - 1px);
  inset-block-start: calc(var(--lef-dot) / 2);
  height: calc(100% + var(--lef-stage-gap));
  width: 2px;
  background: linear-gradient(var(--lef-c), var(--fs-line-input));
  pointer-events: none;
}

/* 소제목 — 번호 원과 같은 높이에서 시작 */
.fs-p-48 .fs-lef-stage__title {
  grid-area: title;
  display: flex; align-items: center; min-height: var(--lef-dot);
  font-size: clamp(19px, 17.6px + 0.38vw, 24px); font-weight: 700; line-height: 1.3;
  letter-spacing: var(--fs-ls-tight); color: var(--lef-c);
  text-wrap: balance;
}

/* 진행도 막대 3칸 + 두 문장 위계 */
.fs-p-48 .fs-lef-stage__notes { display: grid; gap: var(--fs-sp-3); align-content: start; }
.fs-p-48 .fs-lef-stage__notes::before {
  content: ""; display: block;
  width: clamp(96px, 87.7px + 2.3vw, 132px); height: 6px;
  margin-block-end: var(--fs-sp-1);
  background: linear-gradient(90deg,
    var(--lef-s1) 0 31%, transparent 31% 34.5%,
    var(--lef-s2) 34.5% 65.5%, transparent 65.5% 69%,
    var(--lef-s3) 69% 100%);
}
.fs-p-48 .fs-lef-stage__notes li { grid-template-columns: minmax(0, 1fr); }
.fs-p-48 .fs-lef-stage__notes li::before { content: none; }
.fs-p-48 .fs-lef-stage__notes li:first-child {
  font-size: var(--fs-t-lead); font-weight: 600; line-height: 1.5;
  letter-spacing: var(--fs-ls-tight); color: var(--fs-ink);
}
.fs-p-48 .fs-lef-stage__notes li:last-child {
  font-size: clamp(16px, 15.4px + 0.16vw, 18px); line-height: 1.65; color: var(--fs-ink-soft);
}

@media (min-width: 600px) {
  .fs-p-48 .fs-lef-stage__card {
    grid-template-columns: var(--lef-rail) var(--lef-stage-w) minmax(0, 1fr);
    grid-template-areas: "dot fig title" ". fig notes";
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(16px, 7.5px + 1.42vw, 40px);
    row-gap: var(--fs-sp-4);
  }
}
@media (min-width: 1024px) {
  .fs-p-48 .fs-lef-stage { max-width: 960px; margin-inline: auto; }   /* 번호 축이 넓어진 만큼 920 → 960(글 칸 폭 유지) */
  .fs-p-48 .fs-lef-stage__notes { gap: var(--fs-sp-4); }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 타이포 점검(승인자 체크리스트 5항: 위계 · 크기/굵기 · 행간 · 자간 · 정렬/줄 길이)
   실측 1920·1440·1024·360. 위계(h1 60 > h2 40 > h3 27 > 리드 21 > 본문 17)·굵기(400~700)·행간(1.5 = 시안 실측 표준)은 통과.
   걸린 것 2건만 고친다 — 페이지 안에서 끝나는 것.
   ========================================================================== */
/* 자간 — 한글 「수술대상」에 영문 킥커용 +0.06em 이 걸려 글자가 흩어졌다 */
.fs-p-48 .fs-lef-op__label { letter-spacing: 0; }
/* 줄 길이 — 「발생하는 원인」 본문이 1440~1920 에서 한 줄 60자(공백 포함). 40em = 리드 ≈40자 · 본문 ≈44자 */
.fs-p-48 .fs-lef-cause__copy > p { max-width: 40em; }

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 「눈밑지방의 발생과정」 제목을 섹션 제목 규격으로(승인자 「사이즈가 너무 작지 않나? 눈에 잘 안 들어와서」)
   h3(.fs-h3 27/20px)였던 것을 .fs-h2(40/28px) + 뒤 반쪽 토프 + 70px 제목 선(다른 h2 와 같은 리빌). 요소는 h3 그대로(문서 구조).
   ========================================================================== */
.fs-p-48 .fs-lef-stage__head { position: relative; }
.fs-p-48 .fs-lef-stage__head::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-48 .fs-reveal:not(.is-in) .fs-lef-stage__head::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .fs-p-48 .fs-lef-stage__head::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 「눈밑지방과 애교살」 강조 — 핵심 2곳만
   승인자 「하이라이터·밑줄·동그라미 등으로 강조」 → 5곳 → 「너무 정신 없지 않게 진짜 핵심만」 으로 2곳.
   ◯ 「해부학적으로」(섹션 주장의 핵심어 · 기존 strong) · 형광펜 「애교살을 없애지 않고 그대로 보존」(포시즌의 결론).
   색은 팔레트 안: 원 --fs-teal-text(#80665D) · 형광 --fs-teal-neon(#E6B8A8) 60%. 섹션 리빌(.is-in) 때 원 .5s → 형광 1s.
   리빌 전에만 숨긴다(:not(.is-in)) · reduced-motion 은 처음부터 그어진 상태.
   ========================================================================== */
/* 형광펜 — 글자 아래 40% 를 반투명 피치로. 두 줄에 걸치면 줄을 따라 차례로 칠해진다(slice). */
.fs-p-48 .fs-lef-em--hl {
  background: linear-gradient(transparent 56%, rgba(230, 184, 168, .6) 56% 94%, transparent 94%) 0 0 / 100% 100% no-repeat;
  transition: background-size .9s var(--fs-ease-out) 1s;
}
/* 동그라미 — 낱말 둘레를 손으로 두른 타원. 선은 상자 가장자리 8% 안쪽만 지나 글자를 가로지르지 않는다. */
.fs-p-48 .fs-lef-em--circle { position: relative; display: inline-block; margin-inline: .3em .2em; }
.fs-p-48 .fs-lef-em--circle::after {
  content: ""; position: absolute; inset: -.42em -.62em -.36em -.6em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M34 9 C 90 2, 160 4, 186 18 C 199 26, 199 52, 184 63 C 160 78, 60 79, 24 68 C 4 61, 1 34, 14 22 C 22 14, 40 8, 70 6' fill='none' stroke='%2380665D' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path .8s var(--fs-ease-out) .5s;
  pointer-events: none;
}
:root.fs-js .fs-p-48 .fs-reveal:not(.is-in) .fs-lef-em--hl { background-size: 0% 100%; }
:root.fs-js .fs-p-48 .fs-reveal:not(.is-in) .fs-lef-em--circle::after { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) {
  .fs-p-48 .fs-lef-em--hl { transition: none !important; background-size: 100% 100% !important; }
  .fs-p-48 .fs-lef-em--circle::after { transition: none !important; clip-path: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 분기도 → 술식 카드 도착 표시
   승인자 「누르고 내려가면 해당 시술 설명 테두리를 한번 쭉 둘러두는 효과」 → 「하이라이트 되고, 몇 초 뒤에 효과가 사라지는 식으로」.
   분기도 01~08 은 #op-0N 앵커라 브라우저 기본 이동 + CSS smooth 스크롤이다(fs.js 가 가로채지 않는다) → 목적지 :target 으로 JS 없이.
   (:has(:target) 은 크롬에서 스타일이 안 먹는다 — 메모 has-target-vs-scroll-timeline. 목적지 쪽 :target 은 정상.)
   흐름(4.3s, 스크롤 도착 뒤 .55s 시작): 흰 바탕 + 진한 토프 2px 선을 위 → 오른쪽 → 아래 → 왼쪽 한 바퀴(1.5s) → 2s 머묾 → .8s 동안 선·바탕이 사라진다.
   선은 배경 4겹 크기 애니메이션(카드의 ::before/::after 는 ≥1024 헤어라인 구분선이 쓰고 있다), 사라짐은 @property 로 등록한 색 변수.
   바탕색은 마지막 키프레임에서 빼 두어 카드 원래 값(≥1024 투명 · <1024 흰색)으로 돌아간다.
   같은 칸을 다시 누르면 해시가 안 바뀌어 다시 안 그려진다(페이지 JS 금지라 감수).
   ========================================================================== */
@property --lef-op-line { syntax: '<color>'; inherits: false; initial-value: transparent; }
/* 10-06 후속 「아이슈링크 재배치만 오래 걸린다」 실측 — 선은 모든 카드가 클릭 후 .67s 에 시작하는데, 카드 목록 리빌(90ms 계단 + .9s)이
   이동 중에 걸려 03~07 은 1.8~3.6s 에야 보였다(04 = 2.2s). 이동해 온 카드는 리빌을 건너뛰고 바로 보인다. */
:root.fs-js .fs-p-48 .fs-lef-op.fs-reveal:target { opacity: 1; transform: none; transition: none; }
.fs-p-48 .fs-lef-op:target {
  background-image:
    linear-gradient(var(--lef-op-line), var(--lef-op-line)),
    linear-gradient(var(--lef-op-line), var(--lef-op-line)),
    linear-gradient(var(--lef-op-line), var(--lef-op-line)),
    linear-gradient(var(--lef-op-line), var(--lef-op-line));
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  animation: lef-op-trace 4.3s ease-in-out .55s both;
}
@keyframes lef-op-trace {
  0%    { --lef-op-line: var(--fs-teal-dk); background-color: var(--fs-white); background-size: 0 2px,    2px 0,    0 2px,    2px 0; }
  10.5% { background-size: 100% 2px, 2px 0,    0 2px,    2px 0; }
  17.5% { background-size: 100% 2px, 2px 100%, 0 2px,    2px 0; }
  28%   { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; }
  35%   { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
  81%   { --lef-op-line: var(--fs-teal-dk); background-color: var(--fs-white); background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
  100%  { --lef-op-line: transparent; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}
@media (prefers-reduced-motion: reduce) {
  /* 움직임 없이 — 도착한 카드에 선만 고정해 둔다 */
  .fs-p-48 .fs-lef-op:target { animation: none; --lef-op-line: var(--fs-teal-dk); }
}
/* 호버(승인자 「커서를 올렸을 때도 · 커서 올려서 생긴 건 안 없어지게」) — 같은 선을 .9s 에 한 바퀴 긋고 올려 두는 동안 그대로.
   커서가 떠나면 원래 카드. :target 보다 뒤에 두어 도착 직후 카드에 올려도 호버가 이긴다(사라지는 중이어도 다시 그어진다).
   마우스가 있는 기기만 — 헤드리스 기본은 (hover:hover) 가 false 라 검증은 hover 에뮬레이션으로 했다. */
@media (hover: hover) and (pointer: fine) {
  .fs-p-48 .fs-lef-ops:not(.is-hover-off) .fs-lef-op:hover {
    background-image:
      linear-gradient(var(--lef-op-line), var(--lef-op-line)),
      linear-gradient(var(--lef-op-line), var(--lef-op-line)),
      linear-gradient(var(--lef-op-line), var(--lef-op-line)),
      linear-gradient(var(--lef-op-line), var(--lef-op-line));
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    animation: lef-op-trace-in .9s ease-in-out both;
  }
}
@keyframes lef-op-trace-in {
  0%   { --lef-op-line: var(--fs-teal-dk); background-color: var(--fs-white); background-size: 0 2px,    2px 0,    0 2px,    2px 0; }
  30%  { background-size: 100% 2px, 2px 0,    0 2px,    2px 0; }
  50%  { background-size: 100% 2px, 2px 100%, 0 2px,    2px 0; }
  80%  { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; }
  100% { --lef-op-line: var(--fs-teal-dk); background-color: var(--fs-white); background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .fs-p-48 .fs-lef-ops:not(.is-hover-off) .fs-lef-op:hover { animation: none; --lef-op-line: var(--fs-teal-dk); background-color: var(--fs-white); }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 모바일 최적화(승인자 「모바일로 볼 때도 고려해서 PC는 건들이지 말고 모바일 레이아웃 한 번 손 봐줘」)
   배치는 1023px/599px 이하만 — PC(1024·1440·1920) 요소 위치 무변화. 줄바꿈 정리는 같은 날 앞 블록(「줄바꿈」)에서 끝났다.
   백업 _src/build/backup-48-1006-mo/ · 실측 _design/momeasure.py 360/390/540/768 + 1024/1440/1920
   ① 히어로 20/30/60 — 위 <1024 히어로 블록에서 제자리 수정(§1-8)
   ② 유형별 분기도 — 한 줄로 풀려 «어느 연령이 어느 술식으로» 가 색으로만 이어졌다 → 연령 묶음 아래로 술식을 들여 잇는다
   ③ 원인 도해 — 원 아래 구워진 빈 띠(80px) 때문에 라벨바가 떨어져 보였다 → <1024 만 아래를 잘라 붙인다
   ④ 제목·킥커 끝 낱말 떨어짐(「…발생하는 / 원인」 「…EYELID / FAT」) — balance(전 폭, 한 줄인 PC 는 그대로)
   ========================================================================== */
.fs-p-48 .fs-h2,
.fs-p-48 .fs-kicker { text-wrap: balance; }

@media (max-width: 1023px) {
  /* ③ 원인 도해 — 520×568 중 원은 20~487행. 아래 60px 빈 띠를 잘라 라벨바를 원에 붙인다 */
  .fs-p-48 .fs-lef-cause__fig img { aspect-ratio: 520 / 508; object-fit: cover; object-position: 50% 0; }

  /* ② 분기도 — 2026-10-07 승인자 「이렇게 정리하면 유형이랑 시술이랑 안 묶이지 않아?」 → 「아니면 컬러 코딩을 다시해서 pc 정보를 모바일에서도 볼 수 있게」.
     PC 의 네 기둥(유형 → 연령 → 기준 → 술식)을 왼→오 대신 위→아래 네 단으로 그대로 쌓는다. 단 사이는 PC 와 같은 갈래선(가운데 줄기 + 가로 막대).
     연령 색 = 술식 색(PC 와 같은 코딩): 술식은 두 열로 나눠 20대 ~ 40대 초(토프) 아래에 01~04, 40대 이상(짙은 갈색) 아래에 05~08 — 색과 자리가 같이 묶는다.
     기준 3칸은 PC 처럼 두 연령 모두에서 들어와 술식 8개 모두로 나간다(특정 술식에 짝짓지 않는다 — 원본에 없는 대응을 만들지 않는다).
     격자 6열(2·3 의 공배수) · 열 래퍼 display:contents(분기도는 리빌 대상이 아니다 — §2 J ⚠). 옛 판(10-06 연령 묶음 · 10-07 오전 나무 잇기)은
     _src/build/backup-48-1007-tree-mo/ · backup-48-1007-tree-connected/ */
  .fs-p-48 .fs-lef-tree {
    --t-gap: var(--fs-sp-2);                         /* 같은 단 안 간격 */
    --t-lv: var(--fs-sp-6);                          /* 단 사이 추가 간격 — 갈래선 자리 */
    --t-half: calc((var(--t-gap) + var(--t-lv)) / 2); /* 단 사이 가운데 = 가로 막대 높이 */
    --t-line: var(--fs-line-control);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--t-gap);
  }
  .fs-p-48 .fs-lef-tree__col { display: contents; }
  .fs-p-48 .fs-lef-tree__col::after,
  .fs-p-48 .fs-lef-tree__col:not(:last-child)::after { content: none; }   /* 옛 세로 커넥터 — 옛 규칙이 :not() 로 특정성이 높아 같이 적는다 */
  /* 1단 유형 · 2단 연령 · 3단 기준 · 4~7행 술식 두 열 */
  .fs-p-48 .fs-lef-tree__col--root .fs-lef-tree__cell { grid-column: 1 / -1; grid-row: 1; }
  .fs-p-48 .fs-lef-tree__col--age .fs-lef-tree__cell { grid-row: 2; margin-block-start: var(--t-lv); }
  .fs-p-48 .fs-lef-tree__col--age .fs-lef-tree__cell:nth-child(1) { grid-column: 1 / 4; }
  .fs-p-48 .fs-lef-tree__col--age .fs-lef-tree__cell:nth-child(2) { grid-column: 4 / 7; }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell { grid-row: 3; margin-block-start: var(--t-lv); }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:nth-child(1) { grid-column: 1 / 3; }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:nth-child(2) { grid-column: 3 / 5; }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:nth-child(3) { grid-column: 5 / 7; }
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__cell:nth-child(-n+4) { grid-column: 1 / 4; }
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__cell:nth-child(n+5) { grid-column: 4 / 7; }
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__cell:nth-child(4n+1) { grid-row: 4; margin-block-start: var(--t-lv); }
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__cell:nth-child(4n+2) { grid-row: 5; }
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__cell:nth-child(4n+3) { grid-row: 6; }
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__cell:nth-child(4n)   { grid-row: 7; }
  /* 판단 기준 칩 — 세 칸이 한 줄, 글자가 길면 두 줄로 고르게 */
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__node {
    min-height: 0; height: 100%;
    padding: var(--fs-sp-2) var(--fs-sp-1);
    font-size: var(--fs-t-sm); text-wrap: balance;
  }
  /* 술식 — 반 폭 칸이라 번호를 이름 위로 올린다(이름이 한 줄에 서도록) */
  .fs-p-48 a.fs-lef-tree__node { flex-wrap: wrap; align-content: center; row-gap: 2px; padding-inline: var(--fs-sp-3); }
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__cell { align-items: stretch; }   /* 같은 줄 두 상자(01·05 …)의 높이를 맞춘다 — 이름이 두 줄인 쪽에 */
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__num { flex-basis: 100%; padding-inline-end: 0; border-inline-end: 0; font-size: var(--fs-t-xs); }
  /* 갈래선 — 위 단 가운데에서 내려온 줄기(↓)가 가로 막대를 만나 아래 단 가운데로 내려간다(PC 의 왼→오 갈래를 세로로).
     가로 막대는 두 단 중 더 넓게 퍼진 쪽이 긋는다: 유형→연령·연령→기준은 아래 단(::before), 기준→술식은 기준(::after) */
  .fs-p-48 .fs-lef-tree__cell::before,
  .fs-p-48 .fs-lef-tree__cell::after { content: none; position: absolute; pointer-events: none; }
  /* 아래로 내리는 줄기만 — 유형 · 연령 */
  .fs-p-48 .fs-lef-tree__col--root .fs-lef-tree__cell::after,
  .fs-p-48 .fs-lef-tree__col--age .fs-lef-tree__cell::after {
    content: ""; inset-block-start: 100%; block-size: var(--t-half);
    inset-inline-start: 50%; inline-size: 1px; background: var(--t-line);
  }
  /* 위로 올리는 줄기 + 가로 막대(위쪽) — 연령(유형에서) · 기준(연령에서) */
  .fs-p-48 .fs-lef-tree__col--age .fs-lef-tree__cell::before,
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell::before,
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell::after {
    content: "";
    inset-block-start: calc(-1 * var(--t-half)); block-size: var(--t-half);
    inset-inline: calc(-1 * var(--t-gap));
    background:
      linear-gradient(var(--t-line), var(--t-line)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--t-line), var(--t-line)) 0 0 / 100% 1px no-repeat;
  }
  /* 기준 → 술식: 기준 아래로 줄기 + 가로 막대(아래쪽) */
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell::after {
    inset-block-start: 100%;
    background:
      linear-gradient(var(--t-line), var(--t-line)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--t-line), var(--t-line)) 0 100% / 100% 1px no-repeat;
  }
  /* 막대 끝 — 첫 칸은 가운데에서 오른쪽으로, 끝 칸은 왼쪽에서 가운데까지(줄기는 상자 끝 = 칸 가운데) */
  .fs-p-48 .fs-lef-tree__col--age .fs-lef-tree__cell:first-child::before,
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:first-child::before,
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:first-child::after { inset-inline-start: 50%; background-position: 0 0, 0 0; }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:first-child::after { background-position: 0 0, 0 100%; }
  .fs-p-48 .fs-lef-tree__col--age .fs-lef-tree__cell:last-child::before,
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:last-child::before,
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:last-child::after { inset-inline-end: 50%; background-position: 100% 0, 0 0; }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:last-child::after { background-position: 100% 0, 0 100%; }
  /* 술식 두 열 머리(01 · 05)로 올리는 줄기 */
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__cell:nth-child(4n+1)::before {
    content: ""; inset-block-start: calc(-1 * var(--t-half)); block-size: var(--t-half);
    inset-inline-start: 50%; inline-size: 1px; background: var(--t-line);
  }
  /* 기준 색 동그라미 — 2026-10-07 승인자 「지방돌출은 베이지, 해당 시술도 베이지, 눈물고랑은 더 진한색」 → 시안 4안(_review/48-criteria-color-options.html)
     → 표 배치(A2)는 「아냐 전으로 돌아가」 → 「그냥 지금 표에 색 동그라미 한걸로」 = A안: 배치는 그대로, 기준 칸을 베이지 → 캐러멜 → 진한 갈색으로 칠하고
     술식 번호 줄 오른쪽에 해당 기준 색 동그라미 1~2개(술식 상자는 연령 색 그대로). 동그라미는 aria-hidden — 짝은 링크 끝 .fs-sr-only 글로 읽힌다(approved-48).
     ★ 기준 ↔ 술식 짝은 원본에 없다 — 술식 카드 「수술대상」 에서 읽은 가안(병원 확인 전). 진한 갈색은 연령 토프 #80665D 와 갈리게 채도를 올렸다(흰 글자 5.2:1). */
  .fs-p-48 .fs-lef-tree { --t-c1: #EBD9C3; --t-c2: #D2A97E; --t-c3: #96603C; }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:nth-child(1) .fs-lef-tree__node { background: var(--t-c1); color: var(--fs-ink); }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:nth-child(2) .fs-lef-tree__node { background: var(--t-c2); color: var(--fs-ink); }
  .fs-p-48 .fs-lef-tree__col--axis .fs-lef-tree__cell:nth-child(3) .fs-lef-tree__node { background: var(--t-c3); color: var(--fs-white); }
  /* 번호 줄 = 번호 왼쪽 · 동그라미 오른쪽(번호 칸 안에 넣어 상자 높이가 늘어나도 번호와 같은 줄에 선다) */
  .fs-p-48 .fs-lef-tree__col--leaf .fs-lef-tree__num { display: flex; align-items: center; justify-content: space-between; gap: var(--fs-sp-2); }
  .fs-p-48 .fs-lef-tree__dots { display: flex; gap: 5px; }   /* 흰 링 1.5px 둘이 닿지 않게 */
  .fs-p-48 .fs-lef-tree__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--fs-white); }   /* 흰 링 — 짙은 갈색 상자 위 진한 갈색 점도 보이게 · 10-07 「조금 더 작게」 12 → 9px */
  .fs-p-48 .fs-lef-tree__dot--c1 { background: var(--t-c1); }
  .fs-p-48 .fs-lef-tree__dot--c2 { background: var(--t-c2); }
  .fs-p-48 .fs-lef-tree__dot--c3 { background: var(--t-c3); }
}