/* ==========================================================================
   assets/page/47.css — [47] 눈매교정 전용 추가 CSS
   모든 셀렉터는 .fs-p-47 스코프 안에만 둔다. 색은 --fs-* 토큰만 쓴다(새 hex 0).
   전용 컴포넌트 4종
     .fs-ptosis-cmp    비절개 VS 절개 비교 — 좌우 필 + 원형 도해 패널 + 중앙 라벨 표
     .fs-ptosis-merit  '장점' 도해 2컷 + 비교표
     .fs-ptosis-seq    수술방법 원형 4컷 시퀀스 + 화살표 배지
     .fs-ptosis-target 다크 밴드 수술대상 번호 리스트
   ========================================================================== */

.fs-p-47 {
  /* 수술방법 원형 도해 지름 — 1024부터 4컷이 한 줄에 선다 */
  --fs-p47-dia: clamp(150px, 16.667vw, 240px);
  /* 수술정보 픽토그램 박스 */
  --fs-p47-ico: clamp(72px, 67.4px + 1.282vw, 92px);
}

/* 이 페이지는 도해 밀도가 높아 섹션 상하 여백을 시안 기준에서 한 단계 좁힌다 */
.fs-p-47 .fs-section:not(.fs-section--flush):not(.fs-section--tight):not(.fs-nose-contact) {
  padding-block: clamp(50px, 36.6px + 3.718vw, 108px) clamp(48px, 35.5px + 3.462vw, 102px);
}

/* --- 1mm 계열 오버레이 헤더 (밝은 히어로용 «잉크» 변형) ------------------
   2026-08-28 · 흰 막대 헤더를 걷어내고 사진 위에 얹었다. fs.css 의
   .fs-header--overlay 는 «흰 글자 + 어두운 스크림» 전제(다크 히어로용)라
   히어로 상단이 전 폭 옅은 아쿠아인 이 페이지에서는 네 곳을 같이 뒤집는다
   (53 · 81 과 같은 처방). */
.fs-p-47 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 렌더는 그대로지만
   사진 로딩 전 흰 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-47 .fs-page--overlay { background: #DDE4EB; }   /* 2026-09-21 — 새 히어로(hero-model-0921) 왼쪽에 실제로 깔리는 색 = 눈성형 틴트 */
.fs-p-47 .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-47 .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-47 .fs-gnb__link { font-weight: 400; }
.fs-p-47 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-47 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-47 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-47 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-47 .fs-header--overlay .fs-allmenu { color: var(--fs-ink); }
.fs-p-47 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-47 .fs-util__sep { opacity: .35; }

/* --- 1. A01 · 오버레이 히어로 (카피 «좌» / 모델컷 «우») ------------------
   에셋 hero-model.jpg 는 인물이 우 44% 안에 들어가고 머리 위로 화면의 19% 가
   비어 있게 생성했다 — 그래서 투명 헤더 띠가 머리카락에 안 걸린다.
   배경이 밝은 아쿠아라 흰 글자가 안 뜬다 → 잉크색(57 방식) 그대로 간다. */
.fs-p-47 .fs-ptosis-hero { background: #ECECF2; }   /* 2026-09-21 — 새 히어로 사진의 배경색(근백색 쿨) */
/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-47 .fs-ptosis-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. «위 고정»(0%)이면 에셋의 머리 위 여백 249px 이 그대로 남아
   1920 에서 머리끝이 y=249 — 헤더 띠(100px) 아래로 150px 가 빈 화면이 된다.
   22% 로 내려 위쪽을 잘라내면 머리끝이 y≈179 로 올라와 형제 페이지 81(≈176)과 맞는다.
   더 내리면 헤더 띠에 머리카락이 걸린다. 1326px 미만은 세로가 딱 맞아 이 값이 무효다. */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=251 라 22% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-47 .fs-ptosis-hero .fs-hero__bg img { object-position: 50% 0%; }
.fs-p-47 .fs-ptosis-hero .fs-hero__copy {
  gap: var(--fs-sp-3);
  max-width: min(100%, 640px);
  color: var(--fs-ink);
}
/* 히어로가 --sub 에서 --tall 로 바뀌어 fs.css:1127 의 기본 킥커(19→38px)가 적용된다.
   원문 두 줄 문장에는 너무 커서 서브 히어로 크기(18→20px)로 되돌린다. */
.fs-p-47 .fs-ptosis-hero .fs-hero__kicker {
  font-size: clamp(18px, 17.5px + 0.128vw, 20px);
  letter-spacing: 0.02em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fs-ink-soft);
}
.fs-p-47 .fs-ptosis-hero .fs-hero__title {
  font-size: var(--fs-t-hero);
  font-weight: 700;
  line-height: 1.22;
  color: var(--fs-ink);
}
.fs-p-47 .fs-ptosis-hero__rule {
  display: block; width: 56px; height: 2px;
  margin-block-start: var(--fs-sp-2);
  background: var(--fs-teal);
}

/* <1024px — 히어로가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 아쿠아 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다(53 · 81 과 같은 처리). */
@media (max-width: 1023px) {
  /* --fs-teal-dk 킥커가 #B2D6D0 위에서 4.42:1 로 AA 미달이었다 → 밴드를 한 단계 올려 5.12:1.
     사진 윗단 96px 마스크 페이드가 #ADD5CF 로 이어 주므로 이음매는 안 생긴다. */
  .fs-p-47 .fs-ptosis-hero { min-height: 0; background: #D1C2BD; }
  .fs-p-47 .fs-ptosis-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-47 .fs-ptosis-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 100%;
    /* 2026-09-23 모바일 최적화 — 81·80 과 같게 페이드 96 → 60px */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px);
            mask-image: linear-gradient(180deg, transparent 0, #000 60px);
  }
  .fs-p-47 .fs-ptosis-hero .fs-hero__inner {
    grid-row: 1; background: #D1C2BD;
    /* 2026-09-23 모바일 최적화 — 81·80 과 같게 위 40 → 20 · 아래 56 → 30 */
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-5)) var(--fs-sp-7);
  }
  .fs-p-47 .fs-ptosis-hero .fs-hero__copy { max-width: 100%; }
}

/* --- 2. 눈매교정이란? + 수술정보 -------------------------------------- */
.fs-p-47 .fs-ptosis-intro { align-items: center; }
.fs-p-47 .fs-ptosis-intro__fig { display: grid; }
.fs-p-47 .fs-ptosis-intro__fig img { width: 100%; height: auto; }
.fs-p-47 .fs-ptosis-intro__col > * + * { margin-block-start: clamp(12px, 9.7px + 0.641vw, 22px); }
.fs-p-47 .fs-ptosis-intro__col .fs-quote { margin-block-start: clamp(16px, 12.5px + 0.962vw, 31px); }

.fs-p-47 .fs-ptosis-spec-head { margin-block-start: clamp(30px, 24.9px + 1.410vw, 52px); }
.fs-p-47 .fs-ptosis-spec { margin-block-start: clamp(20px, 16.8px + 0.897vw, 34px); }
.fs-p-47 .fs-ptosis-spec > li { display: grid; }
.fs-p-47 .fs-ptosis-spec .fs-card { height: 100%; background: var(--fs-white); }
/* aspect-ratio 는 그리드 아이템의 min-height:auto 에 밀린다 — 높이를 명시해 세로형 아이콘(내원치료)이 카드를 밀지 않게 한다 */
.fs-p-47 .fs-ptosis-spec .fs-card__icon {
  width: var(--fs-p47-ico); height: var(--fs-p47-ico); aspect-ratio: auto;
}
/* 퍼센트 높이는 그리드 행 크기와 순환 참조가 되어 세로형 아이콘이 박스를 밀어낸다 — 실제 px 로 고정 */
.fs-p-47 .fs-ptosis-spec .fs-card__icon img {
  width: var(--fs-p47-ico); height: var(--fs-p47-ico); object-fit: contain;
}
.fs-p-47 .fs-ptosis-spec .fs-card--point {
  gap: clamp(13px, 11.2px + 0.513vw, 21px);
  padding-block: clamp(14px, 12.2px + 0.513vw, 22px) clamp(16px, 13.7px + 0.641vw, 26px);
}
/* 원본 수술정보는 6칸 가로 스트립이다 — 넓은 화면에서 한 줄로 세운다 */
@media (min-width: 1280px) {
  .fs-p-47 .fs-ptosis-spec { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- 3. 수술대상 다크 밴드 -------------------------------------------- */
.fs-p-47 .fs-ptosis-tg { overflow: hidden; }
.fs-p-47 .fs-ptosis-tg__grid { position: relative; align-items: center; }
.fs-p-47 .fs-ptosis-tg__fig { display: block; }
.fs-p-47 .fs-ptosis-tg__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-47 .fs-ptosis-tg__copy {
  padding: clamp(46px, 34.5px + 3.205vw, 96px) var(--fs-gutter);
}
.fs-p-47 .fs-ptosis-target {
  display: grid;
  gap: clamp(16px, 13.2px + 0.769vw, 28px);
  margin-block-start: clamp(26px, 20.9px + 1.410vw, 48px);
}
.fs-p-47 .fs-ptosis-target__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(13px, 11.2px + 0.513vw, 21px);
}
.fs-p-47 .fs-ptosis-target__num {
  display: grid; place-items: center;
  width: clamp(42px, 38.3px + 1.026vw, 58px);
  aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal-text); color: var(--fs-on-dark);
  font-size: var(--fs-t-body); font-weight: 700; line-height: 1;
}
.fs-p-47 .fs-ptosis-target__txt { font-size: var(--fs-t-lead); line-height: 1.5; }
@media (min-width: 1024px) {
  .fs-p-47 .fs-ptosis-tg__copy { padding-inline: clamp(40px, 4.1px + 3.5vw, 80px) var(--fs-gutter); }
}

/* --- 4. 비절개 VS 절개 ------------------------------------------------ */
.fs-p-47 .fs-ptosis-cmp {
  max-width: 1020px; margin-inline: auto;
  margin-block-start: clamp(30px, 24.5px + 1.538vw, 54px);
}
.fs-p-47 .fs-ptosis-cmp__head {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 8.0px + 1.667vw, 40px);
}
.fs-p-47 .fs-ptosis-cmp__group { display: grid; justify-items: center; align-content: start; }
.fs-p-47 .fs-ptosis-cmp__fig {
  display: grid; justify-items: center; width: 100%;
  margin-block-start: clamp(14px, 11.2px + 0.769vw, 26px);
}
.fs-p-47 .fs-ptosis-cmp__fig img {
  width: clamp(118px, 82.9px + 9.744vw, 234px); height: auto;
}
/* 2026-09-21 병원 요청(pptx 슬라이드 5) 「박스 빼고 글씨만」 — 색면 라벨바를 걷어낸 캡션.
   LOCK 2 는 도해 캡션을 색면 바로 못박지만 병원 지시라 예외로 둔다(80 의 술식 라벨 삭제와 같은 처리). */
.fs-p-47 .fs-ptosis-cmp__cap {
  width: 100%; text-align: center; line-height: 1.4;
  margin-block-start: clamp(12px, 9.2px + 0.769vw, 24px);
  min-height: 2.8em;                    /* 좌우 줄 수가 달라도 아래 표가 어긋나지 않게 */
  font-size: var(--fs-t-pill); font-weight: 700; color: var(--fs-ink);
}
/* 좁은 폭에서 좌우 캡션 줄 수가 달라 높이가 어긋나는 것을 막는다 */
@media (max-width: 599px) { .fs-p-47 .fs-ptosis-cmp__cap { min-height: 5.6em; } }
.fs-p-47 .fs-ptosis-cmp .fs-table-wrap { margin-block-start: clamp(24px, 19.4px + 1.282vw, 44px); }
/* 모바일에서 세 번째 열이 살짝 보이도록 최소폭을 낮춘다 — 가로 스크롤 힌트 */
.fs-p-47 .fs-ptosis-cmp .fs-table { min-width: 430px; table-layout: fixed; }
@media (min-width: 600px) { .fs-p-47 .fs-ptosis-cmp .fs-table { min-width: 520px; } }
.fs-p-47 .fs-ptosis-cmp .fs-table td,
.fs-p-47 .fs-ptosis-cmp .fs-table th { padding-block: clamp(10px, 8.6px + 0.385vw, 16px); }
.fs-p-47 .fs-ptosis-cmp .fs-table td {
  width: 38%; text-align: center; color: var(--fs-ink);
  font-size: var(--fs-t-body); line-height: 1.4;
}
/* 2026-09-21 병원 요청(pptx 슬라이드 5) 「중앙정렬」 — fs.css:906 의 text-align:start 를 덮는다 */
.fs-p-47 .fs-ptosis-cmp .fs-table thead th { text-align: center; }
/* 2026-09-21 병원 요청 「컬러가 다 똑같아서 연한컬러로」 — 머리행과 가운데 열이 둘 다
   --fs-teal-text(#80665D) 라 구분이 안 됐다. 가운데 열만 베이지 + 잉크 글자(14.1:1). */
.fs-p-47 .fs-ptosis-cmp .fs-table th[scope="row"] {
  width: 24%; text-align: center;
  background: var(--fs-beige); color: var(--fs-ink);
  font-size: var(--fs-t-pill); font-weight: 700; line-height: 1.2;
}
.fs-p-47 .fs-ptosis-cmp .fs-table tbody tr + tr th[scope="row"] { border-block-start: 2px solid var(--fs-white); }

/* --- 5. '장점' — 도해 2컷 + 비교표 -----------------------------------
   2026-09-21 병원 요청(pptx 슬라이드 6) 「원말고 표 형식으로」. 위성 원 다이어그램
   (__side/__ring/__cell/__core)을 걷어내고 4절 비교표와 같은 폭·같은 부품으로 세웠다.
   표 머리는 도해 아래 라벨바가 대신하므로 <th> 는 sr-only 다. */
.fs-p-47 .fs-ptosis-merit__head { justify-items: center; text-align: center; }
.fs-p-47 .fs-ptosis-merit {
  display: grid;
  gap: clamp(18px, 14.8px + 0.897vw, 32px);
  margin-block-start: clamp(24px, 19.9px + 1.154vw, 42px);
  max-width: 1020px; margin-inline: auto;
}
.fs-p-47 .fs-ptosis-merit__heads {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 8.0px + 1.667vw, 40px);
}
.fs-p-47 .fs-ptosis-merit__fig {
  display: grid; justify-items: center;
  width: clamp(118px, 110.2px + 2.179vw, 152px);
  margin-inline: auto;
}
.fs-p-47 .fs-ptosis-merit__fig img { width: 100%; height: auto; }
.fs-p-47 .fs-ptosis-merit__fig .fs-labelbar { width: 100%; }
/* 4절 표와 같은 최소폭 — 모바일에서 가로 스크롤 힌트.
   행 구분선 --fs-line(#EDEDED)은 크림 밴드 위에서 안 보인다 — 4절 비교표처럼 흰 판을 깐다. */
.fs-p-47 .fs-ptosis-merit__table { min-width: 430px; table-layout: fixed; background: var(--fs-white); }
.fs-p-47 .fs-ptosis-merit__table td {
  width: 50%; text-align: center; color: var(--fs-ink);
  font-size: var(--fs-t-body); line-height: 1.4;
  padding-block: clamp(10px, 8.6px + 0.385vw, 16px);
}

/* --- 6. 수술방법 원형 시퀀스 ------------------------------------------ */
.fs-p-47 .fs-ptosis-seq__viewport { overflow: hidden; }
.fs-p-47 .fs-ptosis-seq__track { display: flex; }
.fs-p-47 .fs-ptosis-seq__slide { display: grid; row-gap: clamp(18px, 14.8px + 0.897vw, 32px); }
.fs-p-47 .fs-ptosis-seq__title { display: grid; justify-items: center; }
.fs-p-47 .fs-ptosis-seq__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: clamp(20px, 15.4px + 1.282vw, 40px) clamp(10px, 8.2px + 0.513vw, 18px);
}
.fs-p-47 .fs-ptosis-seq__step { display: grid; justify-items: center; width: 100%; max-width: 240px; }
.fs-p-47 .fs-ptosis-seq__fig { display: grid; width: 100%; margin-block-start: clamp(10px, 8.2px + 0.513vw, 18px); }
.fs-p-47 .fs-ptosis-seq__fig img { width: 100%; height: auto; }
/* 2026-09-21 병원 요청(pptx 슬라이드 7) 「브라운상자 빼고 텍스트만」 */
.fs-p-47 .fs-ptosis-seq__cap {
  min-height: clamp(42px, 39.2px + 0.769vw, 54px);
  text-align: center;
  font-size: var(--fs-t-body); font-weight: 700; line-height: 1.3;
  color: var(--fs-ink);
  margin-block-start: clamp(8px, 6.6px + 0.385vw, 14px);
}
.fs-p-47 .fs-ptosis-seq__arrow { display: none; }
.fs-p-47 .fs-ptosis-seq .fs-carousel__dots { margin-block-start: clamp(18px, 13.4px + 1.282vw, 36px); }
@media (min-width: 1024px) {
  .fs-p-47 .fs-ptosis-seq__row {
    grid-template-columns: repeat(3, auto auto) auto;
    justify-content: center;
    column-gap: clamp(8px, 0.1px + 0.769vw, 18px);
  }
  .fs-p-47 .fs-ptosis-seq__step { width: var(--fs-p47-dia); max-width: none; }
  .fs-p-47 .fs-ptosis-seq__arrow {
    display: grid; align-self: start;
    margin-block-start: calc(var(--fs-p47-dia) / 2 + 14px);
  }
}

/* --- 리빌 모션이 꺼져도 레이아웃은 같아야 한다 ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fs-p-47 .fs-ptosis-seq__track { transition: none !important; }
}

/* --- 9. 연락처 — 이 페이지의 좁힌 리듬에 맞춘 하단 여백 -------------- */
.fs-p-47 .fs-nose-contact { padding-block: clamp(26px, 18.6px + 2.051vw, 58px) clamp(48px, 35.5px + 3.462vw, 102px); }

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

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-27
   근거: _design/DESIGN_SYSTEM.md 6장 · _design/QA/48.md · v70fit 검출
        (이 페이지의 실측 검출값 = B=1 E=1, A·C·D 는 0 이라 손대지 않는다)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. [LOCK 2-d] 비교 도해의 라벨바 폭 = 도해 폭
   이 페이지의 라벨바 12개 중 11개는 「바 폭 === 도해 폭」인데
   .fs-ptosis-cmp__fig 만 도해 234px / 바 490px 이었다(1920 실측).
   바가 도해보다 2배 넓어 「도해에 붙은 캡션」이 아니라
   「넓은 띠 위에 동그라미가 떠 있는」 모양으로 읽힌다.
   도해를 원본 해상도(310x310)까지 키워 바와 폭을 맞춘다 — 업스케일 0.
   -------------------------------------------------------------------------- */
.fs-p-47 .fs-ptosis-cmp__fig { width: min(100%, 310px); margin-inline: auto; }
.fs-p-47 .fs-ptosis-cmp__fig img { width: 100%; }

/* --------------------------------------------------------------------------
   B. [V70 E] 수술정보 — 크림 밴드 위 흰 상자 6개 → 헤어라인 열
   v70fit: E:fs-grid×6@S2. 원본 수술정보는 «6칸 가로 스트립» 이고
   (이 파일 첫 블록 주석) 흰 상자는 그 스트립을 카드로 옮기며 생긴 잔재다.
   48 의 QA 가 「스펙 띠가 카드 시절의 잔재로 떠 보인다」로 미해결로 남긴 것과
   같은 자리다. 상자를 지우고 1px 선으로만 나눈다.
   -------------------------------------------------------------------------- */
.fs-p-47 .fs-ptosis-spec { gap: 0; }
.fs-p-47 .fs-ptosis-spec .fs-card { background: transparent; }

/* ★ 열 수가 바뀔 때마다 «전체 재설정 → 예외» 순으로 다시 쓴다.
   각 브레이크포인트의 재설정 규칙에 :nth-child(n) 를 붙여 명시도를 (0,3,1) 로
   맞추지 않으면, 앞 블록의 :nth-child(odd)·(3n+1) 이 뒤 블록의 밋밋한 li 를
   이겨서 «6열인데 3열 선이 남는» 상태가 된다(실측으로 걸렸다). */
/* 1열 (–599) */
.fs-p-47 .fs-ptosis-spec > li:nth-child(n) {
  border-block-start: 1px solid var(--fs-line-input); border-inline-start: 0;
}
.fs-p-47 .fs-ptosis-spec > li:nth-child(1) { border-block-start: 0; }

/* 2열 (600–1023) */
@media (min-width: 600px) {
  .fs-p-47 .fs-ptosis-spec > li:nth-child(n) {
    border-block-start: 1px solid var(--fs-line-input);
    border-inline-start: 1px solid var(--fs-line-input);
  }
  .fs-p-47 .fs-ptosis-spec > li:nth-child(odd)  { border-inline-start: 0; }
  .fs-p-47 .fs-ptosis-spec > li:nth-child(-n+2) { border-block-start: 0; }
}
/* 3열 (1024–1279) */
@media (min-width: 1024px) {
  .fs-p-47 .fs-ptosis-spec > li:nth-child(n) {
    border-block-start: 1px solid var(--fs-line-input);
    border-inline-start: 1px solid var(--fs-line-input);
  }
  .fs-p-47 .fs-ptosis-spec > li:nth-child(3n+1) { border-inline-start: 0; }
  .fs-p-47 .fs-ptosis-spec > li:nth-child(-n+3) { border-block-start: 0; }
}
/* 6열 (1280+) — 원본과 같은 한 줄 스트립. 세로선만 남는다 */
@media (min-width: 1280px) {
  .fs-p-47 .fs-ptosis-spec > li:nth-child(n) {
    border-block-start: 0; border-inline-start: 1px solid var(--fs-line-input);
  }
  .fs-p-47 .fs-ptosis-spec > li:nth-child(1) { border-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   C. [V70 B] 수술대상 다크 밴드 — 50:50 하드컷 → 56:44 + 사진/글 겹침
   v70fit: B:fs-split@S3 · BPHOTO=target-model.jpg (평균 L=152, 밝은 사진이라
   겹침이 효과를 낸다 — 어두운 사진이면 하지 말라는 조건에 걸리지 않는다).
   1920 실측은 960px/960px 정확한 반반이라 «두 장을 맞붙인» 모양이었다.
   사진을 56% 로 넓히고 카피 패널을 그 위로 끌어와, 겹치는 구간에서
   패널 배경이 투명 → 밴드색으로 번지며 이음매를 지운다.
   ★ 겹침은 PC 가로 방향으로만 준다(음수 세로 마진 금지).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-47 .fs-ptosis-tg__grid {
    --p47-lap: clamp(72px, 7.8vw, 150px);
    --fs-split: minmax(0, 56fr) minmax(0, 44fr);
    align-items: stretch;                       /* 사진이 밴드 높이를 다 채우게 */
  }
  .fs-p-47 .fs-ptosis-tg__fig { overflow: hidden; }
  .fs-p-47 .fs-ptosis-tg__copy {
    position: relative;
    z-index: 2;                                 /* 사진 위 */
    display: grid;
    align-content: center;                      /* 패널은 전체 높이, 글자는 가운데 */
    margin-inline-start: calc(-1 * var(--p47-lap));
    padding-inline: calc(var(--p47-lap) + clamp(40px, 4.1px + 3.5vw, 80px)) var(--fs-gutter);
    background: linear-gradient(to right, transparent 0, var(--fs-cream) var(--p47-lap));
  }
}

/* --------------------------------------------------------------------------
   D. 섹션 제목 뒤 70px 틸 선 (delay .5s)
   ★ 48 에서 걸린 함정: 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이
     영원히 안 그어진다 — fs.js 는 첫 화면 대상에 .fs-reveal 을 안 붙인다.
     → 기본을 «그어진 상태» 로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   -------------------------------------------------------------------------- */
.fs-p-47 .fs-ptosis-intro__col h2,
.fs-p-47 .fs-nose-head > h2,
.fs-p-47 .fs-nose-head > h3,
.fs-p-47 .fs-h2.fs-center,
.fs-p-47 .fs-ptosis-tg__copy h2 { position: relative; }

.fs-p-47 .fs-ptosis-intro__col h2::after,
.fs-p-47 .fs-nose-head > h2::after,
.fs-p-47 .fs-nose-head > h3::after,
.fs-p-47 .fs-h2.fs-center::after,
.fs-p-47 .fs-ptosis-tg__copy 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;
}
/* 가운데정렬 제목은 선도 가운데로 */
.fs-p-47 .fs-ptosis-merit__head > h2::after,
.fs-p-47 .fs-h2.fs-center::after { margin-inline: auto; transform-origin: center; }

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

/* --------------------------------------------------------------------------
   E. 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 쓰지 않는다.
   대상은 «인물·공간 사진» 뿐이다. 해부 도해·수술기법 일러스트에는 걸지 않는다.
   -------------------------------------------------------------------------- */
.fs-p-47 .fs-ptosis-tg__fig { overflow: hidden; }
.fs-p-47 .fs-ptosis-intro__fig img,
.fs-p-47 .fs-ptosis-tg__fig img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-47 .fs-ptosis-intro__fig:hover img,
  .fs-p-47 .fs-ptosis-tg__fig:hover img { transform: scale(1.045); }
}

/* --------------------------------------------------------------------------
   F. reduced-motion — 위에서 얹은 것은 전부 정지 상태로 확정
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-47 .fs-ptosis-intro__col h2::after,
  .fs-p-47 .fs-nose-head > h2::after,
  .fs-p-47 .fs-nose-head > h3::after,
  .fs-p-47 .fs-h2.fs-center::after,
  .fs-p-47 .fs-ptosis-tg__copy h2::after { transform: scaleX(1) !important; transition: none !important; }

  .fs-p-47 .fs-ptosis-intro__fig img,
  .fs-p-47 .fs-ptosis-tg__fig img { transition: none !important; transform: none !important; }
}


/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 눈성형 = 블루그레이 #DDE4EB (fs.css «카테고리 틴트» 블록 + body.fs-cat-eye)
   승인자 결정: 웜 축의 유일한 쿨 예외(48 사진 상단색 계열). 공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개·글자 후광을 정한다.
   모델 오른쪽(x 51%~) · 사진 i2i · 킥커 ink-soft → teal-dk 통일 · LOCK 4: #about 크림 → 흰
   ========================================================================== */
.fs-p-47 .fs-ptosis-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) 24%, rgba(var(--fs-cat), .50) 40%, rgba(var(--fs-cat), 0) 50%);
}
@media (max-width: 1023px) {
  .fs-p-47 .fs-ptosis-hero .fs-hero__bg::after { content: none; }
  .fs-p-47 .fs-ptosis-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}
.fs-p-47 .fs-ptosis-hero .fs-hero__kicker { color: var(--fs-teal-dk); }
.fs-p-47 #about { background: var(--fs-white); }

/* ==========================================================================
   ▼▼▼ 2026-09-17 · 승인자 「이 히어로도 규정(81 코재수술 포맷)에 맞게 — 영문을 위에 추가, 지금 한국어 문구를 밑으로」
   영문 킥커(PTOSIS CORRECTION) → 제목 → 줄 → 리드(옛 킥커 문장). 값은 81.css 1절: 킥커 21/500/.02em · 제목 58/700/1.22 · 줄 아래 8px ·
   리드 20/1.5/#111 · 요소 간격 10px. 사진·위치·스크림은 그대로.
   ========================================================================== */
.fs-p-47 .fs-ptosis-hero .fs-hero__kicker {
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em; font-weight: 500; line-height: 1.25; color: var(--fs-teal-dk);
}
.fs-p-47 .fs-ptosis-hero .fs-hero__title { font-size: clamp(30px, 21.4px + 2.39vw, 58px); }
.fs-p-47 .fs-ptosis-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-47 .fs-ptosis-hero .fs-ptosis-hero__lead { max-width: 34em; line-height: 1.5; color: var(--fs-ink); }

/* ==========================================================================
   ▼▼▼ 2026-09-23 · 모바일 최적화(승인자 「…97 다음 47」) — 줄바꿈은 전 폭, 배치는 599px/1023px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-47-0923-mo/ · 실측 _design/momeasure.py 360/390/540
   ========================================================================== */
/* --- 줄바꿈 — 「눈매교정이란」 본문 <br> 3개·비교 캡션 <br> 2개 → 문장 블록(.fs-lead__s, <br> 과 픽셀 동일).
   360 실측 고아 줄: 본문 「눈동자를 가리는 경우,」「만들어주는 수술입니다.」 · 비교 캡션 「근육을」 · 수술대상 「경우」 · 비교표 칸 「눈」「가능」「비슷」 · 주소 「8층」 */
.fs-p-47 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-47 .fs-ptosis-target__txt,
.fs-p-47 .fs-ptosis-cmp .fs-table td,
.fs-p-47 .fs-ptosis-cmp .fs-table th,
.fs-p-47 .fs-ptosis-merit__table td,
.fs-p-47 .fs-address { text-wrap: balance; }

@media (max-width: 599px) {
  /* --- 수술정보 6칸 — 1열 세로 스택 1,130px → 2열 3행(≈570px). 헤어라인은 600~1023 의 2열 규칙과 같은 식(재설정 → 예외 순). */
  .fs-p-47 .fs-ptosis-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-47 .fs-ptosis-spec > li:nth-child(n) {
    border-block-start: 1px solid var(--fs-line-input);
    border-inline-start: 1px solid var(--fs-line-input);
  }
  .fs-p-47 .fs-ptosis-spec > li:nth-child(odd)  { border-inline-start: 0; }
  .fs-p-47 .fs-ptosis-spec > li:nth-child(-n+2) { border-block-start: 0; }
  /* 캡션(19px)이 160px 칸에서 「부분마취 / +수면마취」로 갈라졌다 → 본문 크기(16px)·한 줄 고정·칸 좌우 여백 20 → 8 */
  .fs-p-47 .fs-ptosis-spec .fs-card--point { padding-inline: var(--fs-sp-2); }
  .fs-p-47 .fs-ptosis-spec .fs-card__caption { font-size: var(--fs-t-body); white-space: nowrap; }

  /* --- 비교표 2종 — min-width 430 은 «셋째 열 살짝 보이기» 힌트였지만 비교표는 한눈에 세 열이 보여야 읽힌다.
     320px 안에 들이고(칸 122·77·122) 글자 15px, 칸은 2~3줄로 접힌다. 가로 스크롤 없음. */
  .fs-p-47 .fs-ptosis-cmp .fs-table,
  .fs-p-47 .fs-ptosis-merit__table { min-width: 0; }
  .fs-p-47 .fs-ptosis-cmp .fs-table td,
  .fs-p-47 .fs-ptosis-cmp .fs-table thead th,
  .fs-p-47 .fs-ptosis-merit__table td { font-size: var(--fs-t-sm); padding-inline: var(--fs-sp-2); }
  .fs-p-47 .fs-ptosis-cmp .fs-table th[scope="row"] { font-size: var(--fs-t-sm); padding-inline: var(--fs-sp-1); }
}

@media (max-width: 1023px) {
  /* --- 수술방법 — 부제 아래 가운데 떠 있던 화살표(도트보다 ≈700px 위)를 도트 줄 양끝으로(81 재료와 같은 처방). DOM 그대로. */
  .fs-p-47 .fs-ptosis-seq { position: relative; }
  .fs-p-47 .fs-ptosis-seq .fs-sec-head__action {
    position: absolute; inset-inline: 0; inset-block-end: -13px;   /* 40px 버튼 중심 = 14px 도트 줄 중심 */
    justify-self: stretch;
  }
  .fs-p-47 .fs-ptosis-seq .fs-carousel__nav { justify-content: space-between; }
}
