/* ==========================================================================
   page/143.css — [143] 겹주름교정 전용 추가 CSS
   · 셀렉터는 전부 .fs-p-143 스코프 안에만 둔다 (다른 페이지 영향 0)
   · 색·간격·타이포는 fs.css :root 의 --fs-* 토큰만 쓴다. 새 hex 없음
   · fs.css / fs-sub.css 뒤에 로드된다
   ========================================================================== */

/* --- 0. 반복 간격 유틸 (인라인 style 을 없애기 위한 최소 셋) -------------- */
.fs-p-143 .fs-crease-mt-title { margin-block-start: var(--fs-gap-title); }
.fs-p-143 .fs-crease-mt-md    { margin-block-start: var(--fs-sp-9); }

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

/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다(57 은 .fs-nose-hero 로 해결). */
.fs-p-143 .fs-crease-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. «위 고정»(0%)이면 에셋의 머리 위 여백 271px 가 그대로 남아
   1920 에서 머리끝이 y=271 — 헤더 띠(100px) 아래가 통째로 빈 화면이 된다.
   29% 로 내려 위쪽을 잘라내면 머리끝이 y≈178 로 올라와 형제 페이지 81(≈176)과 맞는다.
   더 내리면 헤더 띠에 머리카락이 걸린다. 1326px 미만은 세로가 딱 맞아 이 값이 무효다. */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=274 라 29% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-143 .fs-crease-hero .fs-hero__bg img { object-position: 50% 52%; }
.fs-p-143 .fs-crease-hero .fs-hero__copy { max-width: 34rem; gap: var(--fs-sp-3); }
.fs-p-143 .fs-crease-hero .fs-hero__kicker,
.fs-p-143 .fs-crease-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-143 .fs-crease-hero .fs-hero__kicker {
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em; font-weight: 500; color: var(--fs-teal-dk);
}
.fs-p-143 .fs-crease-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22;
}

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 크림 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은 페이드로
   녹여 이음매를 없앤다. 밴드색은 세로 에셋 상단 실측값(#F6E6DE). */
@media (max-width: 1023px) {
  .fs-p-143 .fs-crease-hero { min-height: 0; background: #F6E6DE; }
  .fs-p-143 .fs-crease-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-143 .fs-crease-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 65%;
    /* 2026-09-23 모바일 최적화 — 81·80·47·46 과 같게 페이드 96 → 60px */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px);
            mask-image: linear-gradient(180deg, transparent 0, #000 60px);
  }
  .fs-p-143 .fs-crease-hero .fs-hero__inner {
    grid-row: 1; background: #F6E6DE;
    /* 2026-09-23 모바일 최적화 — 81·80·47·46 과 같게 위 40 → 20 · 아래 56 → 30 */
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-5)) var(--fs-sp-7);
  }
  .fs-p-143 .fs-crease-hero .fs-hero__copy { max-width: 100%; }
}

/* --- 2. 정의 인용 + 근거 도해 ------------------------------------------- */
.fs-p-143 .fs-crease-def { display: grid; justify-items: center; gap: var(--fs-sp-5); }
.fs-p-143 .fs-crease-def__quote { max-width: 62rem; }

/* 도해·사진 공용 피겨 (라벨바가 항상 바닥에 붙는다) */
.fs-p-143 .fs-crease-fig {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  height: 100%; margin: 0; background: var(--fs-white);
}
.fs-p-143 .fs-crease-fig__img { display: block; overflow: hidden; }
.fs-p-143 .fs-crease-fig__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A05 와이드 일러스트 (2026-09-22) — 1440x600 생성본 한 장 */
/* 2026-09-22 승인자 「사이즈를 조금만 줄여줘」 — 컨테이너 전폭(1440)에서 1200 으로,
   같은 날 2차 지시로 1000 까지. 1040px 미만 화면에서는 컨테이너가 이미 더 좁아 변화가 없다.
   ★ margin-block-start 를 여기에 다시 적는 이유 — 위 `.fs-crease-fig { margin: 0 }` 이
     같은 특정성(0,2,0)이면서 **뒤에** 오기 때문에 1절의 `.fs-crease-mt-title` 이 죽는다.
     실측으로 인용문과 사진 사이 간격이 0px 이었다(승인자 「텍스트랑 이미지 사이에 gap」).
     단축속성이 롱핸드를 덮는 같은 계열의 사고 — page CSS 안에서 «뒤» 에 다시 선언해 되살린다. */
.fs-p-143 .fs-crease-illust {
  max-width: 1000px; margin-inline: auto;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-143 .fs-crease-illust .fs-crease-fig__img { aspect-ratio: 1440 / 600; }
.fs-p-143 .fs-crease-illust .fs-crease-fig__img img { width: 100%; height: 100%; object-fit: cover; }

.fs-p-143 .fs-crease-fig .fs-labelbar {
  min-height: clamp(34px, 31px + 0.83vw, 46px);
  font-size: var(--fs-t-sm); line-height: 1.3;
}

/* --- 3. 원인 POINT 카드 -------------------------------------------------- */
.fs-p-143 .fs-crease-causes { margin-block-start: var(--fs-gap-title); }
.fs-p-143 .fs-crease-cause {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%; margin: 0; background: var(--fs-white);
}
.fs-p-143 .fs-crease-cause > .fs-pill {
  justify-self: center;
  margin-block-start: clamp(14px, 11.5px + 0.69vw, 24px);
}
.fs-p-143 .fs-crease-cause__ill {
  display: grid; place-items: center;
  padding: clamp(12px, 8.5px + 0.97vw, 27px) var(--fs-sp-3);
}
.fs-p-143 .fs-crease-cause__ill img {
  display: block; width: clamp(74px, 58.5px + 4.3vw, 140px); height: auto;
}
.fs-p-143 .fs-crease-cause .fs-labelbar {
  min-height: clamp(40px, 36.5px + 0.97vw, 55px);
  font-size: var(--fs-t-sm); line-height: 1.3;
}

/* --- 4. ★ 전용 컴포넌트 2 : 지시선 콜아웃 사진 fs-crease-callout ----------
   원본 눈 클로즈업에 구워져 있던 '과도한 지방 / 졸린눈 / 피부처짐' 라벨을
   실제 HTML 텍스트로 되살린다. 사진에는 지시점·지시선만 남기고, 글자는
   지시선이 끝나는 지점에 맞춰 우측 여백에 올려 조판한다. */
.fs-p-143 .fs-crease-callouts {
  /* 태그 자리와 사진 폭을 한 곳에서 잡는다 — 사진은 네이티브 365px 을 절대 넘기지 않는다.
     (그냥 두면 섹션 전폭으로 늘어나 1.85배, 행 폭만 고정하면 좁은 폭에서 1.1배가 된다) */
  --fs-crease-tag: clamp(112px, 96px + 2.2vw, 140px);     /* 22px 글자로 「과도한 지방」이 한 줄 */
  --fs-crease-gap: clamp(10px, 7.4px + 0.72vw, 24px);   /* 2026-09-22 「두 사진을 더 가깝게」 */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-crease-gap);
  width: 100%;
  max-width: calc(365px + var(--fs-crease-tag));          /* 1열 구간 */
  margin-inline: auto;
}
.fs-p-143 .fs-crease-callout {
  position: relative; margin: 0;
  padding-inline-end: var(--fs-crease-tag);
}
.fs-p-143 .fs-crease-callout__img { display: block; overflow: hidden; }
.fs-p-143 .fs-crease-callout__img img { display: block; width: 100%; height: auto; }
.fs-p-143 .fs-crease-callout__tag {
  position: absolute; inset-inline-end: 0;
  width: var(--fs-crease-tag);
  padding-inline-start: var(--fs-sp-1);
  transform: translateY(-50%);
  /* 2026-09-22 승인자 「글자 크게」 2차 — 원본에 구워져 있던 라벨 실측이 **글자 높이 23px**
     (졸린눈 y427~449)이라 그 크기에 맞춘다. 13px → 16px → 최대 22px. */
  font-size: clamp(17px, 13.6px + 0.44vw, 22px); font-weight: 700; line-height: 1.25;
  letter-spacing: -0.03em; color: var(--fs-ink);
}
/* 2026-09-22 재크롭(365x473 · 원본 타일 x150~880 · 이음선 515 실측)에서 지시선 y=176 · y=338 */
/* 2026-09-22 승인자 「과도한 지방·졸린눈을 왼쪽으로」 — 좌측 컷만 지시선·라벨을 좌우 반전한다.
   사진은 미러하지 않는다(오른쪽 눈이 왼쪽 눈으로 바뀌므로). 구워진 지시선만 왼쪽으로 다시 그었다
   (_src/gen/143-assets/flip_leader.py). 두 컷의 라벨이 바깥쪽으로 나가면서 사진이 서로 붙는다. */
.fs-p-143 .fs-crease-callout--flip {
  padding-inline-end: 0; padding-inline-start: var(--fs-crease-tag);
}
.fs-p-143 .fs-crease-callout--flip .fs-crease-callout__tag {
  inset-inline-end: auto; inset-inline-start: 0;
  padding-inline-start: 0; padding-inline-end: var(--fs-sp-1);
  text-align: right;
}
.fs-p-143 .fs-crease-callout__tag--a { inset-block-start: 37.2%; }
.fs-p-143 .fs-crease-callout__tag--b { inset-block-start: 71.5%; }
@media (min-width: 600px) {
  .fs-p-143 .fs-crease-callouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: calc(365px * 2 + var(--fs-crease-tag) * 2 + var(--fs-crease-gap));
  }
}

/* --- 5. 포시즌 맞춤 교정 POINT : 룰 카드 (2026-09-22 도해 칸 삭제 — 병원 지시) ---
   도해가 빠지면서 fs.css:751 의 룰 카드 정본 3열(auto 1fr 1.1fr)로 되돌아간다. */
.fs-p-143 .fs-crease-points { margin-block-start: var(--fs-gap-title); }
/* --- 6. (삭제) 조건 분기(IF) 술식 선택 도해 ------------------------------
   2026-09-22 승인자 지시 — 알약 트리를 마크업째 걷어냈다(기존 홈페이지에 없는 파생본).
   같은 문구가 라벨바·본문 필에 그대로 남아 정보 손실은 없다. */

/* --- 7. 술식 2블록 : 기존 홈페이지 배치 ----------------------------------
   2026-09-22 승인자 지시 「이 부분 기존 홈페이지 배치처럼」.
   1뷰 캐러셀 + 겹침 패널(다음 슬라이드가 34~240px 삐져나오던 구조)을 걷고
   라이브(4seasonsps.com/143)와 같이 «가운데 제목 → 도해 → 가운데 본문» 으로 쌓는다.
   ★ 도해 네이티브 폭이 514px 이라 열을 그보다 넓게 주면 업스케일이 보인다 → 행에 max-width. */
.fs-p-143 .fs-crease-txhead { justify-items: center; text-align: center; }
.fs-p-143 .fs-crease-txhead .fs-h2::after { margin-inline: auto; }

.fs-p-143 .fs-crease-txrow {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 11.4px + 1.28vw, 36px);
  width: 100%; max-width: 1000px;            /* 482 × 2 + gap 36 */
  margin-inline: auto; margin-block-start: var(--fs-gap-title);
}
.fs-p-143 .fs-crease-txrow--solo {
  grid-template-columns: minmax(0, 1fr); max-width: 482px;
}
@media (max-width: 599px) {
  .fs-p-143 .fs-crease-txrow { grid-template-columns: minmax(0, 1fr); max-width: 482px; }
}

.fs-p-143 .fs-crease-txfig {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  margin: 0; background: var(--fs-white);
}
.fs-p-143 .fs-crease-txfig__img { position: relative; display: block; overflow: hidden; }
.fs-p-143 .fs-crease-txfig__img img { display: block; width: 100%; height: auto; }
/* 원본 도해에 «구워져 있던» 한글 라벨을 지우고(45px 미디언 2패스) 그 자리에 HTML 로 다시 얹는다.
   좌표는 지운 글자 상자의 중심 — tx-excise(482x345) · tx-relower(480x345) 실측. */
.fs-p-143 .fs-crease-txfig__tag {
  position: absolute; transform: translateY(-50%);
  font-size: clamp(13px, 3px + 0.78vw, 18px); font-weight: 700; line-height: 1.25;
  letter-spacing: -0.03em; color: var(--fs-ink); white-space: nowrap;
}
.fs-p-143 .fs-crease-txfig__tag--a { inset-inline-start: 71.4%; inset-block-start: 56.5%; }
.fs-p-143 .fs-crease-txfig__tag--b { inset-inline-start: 70.0%; inset-block-start: 53.3%; }
.fs-p-143 .fs-crease-txfig__tag--c { inset-inline-start: 70.0%; inset-block-start: 63.8%; }

/* 2026-09-22 승인자 지시 「기존 홈페이지 참고해서 수정」 — 라이브 사이트 실측에 맞춘다.
   원본(콘텐츠 폭 1877): 사진 500×371 · 라벨바 68px · 바 글자 ≈28px · 사진 안 태그 ≈18px
   직전 상태            : 사진 482×345 · 라벨바 36px · 바 글자  21px · 태그 13px
   ★ 사진 폭은 에셋 네이티브(482)를 지킨다 — 500 으로 늘리면 1.037배 업스케일이라 도해의
     흰 점선이 뭉갠다(같은 날 A06 콜아웃이 1.85배로 흐려진 전례). 18px 차이는 눈에 안 보이고,
     실제로 원본과 달라 보이던 것은 라벨바 높이(36 vs 68)와 글자 크기였다. */
.fs-p-143 .fs-crease-txfig .fs-labelbar {
  min-height: clamp(44px, 3.44vw, 66px);         /* 1280→44 · 1920→66 (원본 68 × 482/500) */
  font-size: clamp(21px, 7px + 1.09vw, 28px);    /* 1280→21 · 1920→28 */
}

.fs-p-143 .fs-crease-txbody {
  display: grid; justify-items: center; text-align: center;
  gap: var(--fs-sp-4); margin-block-start: var(--fs-gap-title);
}
/* 2026-09-22 승인자 「텍스트 사이즈 키워줘」 — A13a·A13b 가운데 본문.
   원본 라이브 PC 는 이 문단이 22px(line-height 2) 다. 기본 --fs-t-body(16→17)로는
   위 라벨바(21→28)에 눌려 작아 보인다. 토큰 밖 임의값을 새로 만들지 않고
   본문 계열 최상단 토큰 --fs-t-lead(19→21)로 올린다 — 1920 에서 원본 22px 에 근접. */
.fs-p-143 .fs-crease-txbody .fs-body {
  font-size: var(--fs-t-lead);
  letter-spacing: 0.02em;   /* 2026-09-22 「자간도 조금만」 — 전역 본문은 -0.01em 이고
                               원본 라이브는 자간 지정이 없다(=0). 두 블록 같은 값. */
}

/* --- 8. 겹주름교정 효과 -------------------------------------------------- */
.fs-p-143 .fs-crease-effects { display: grid; gap: var(--fs-sp-5); }
.fs-p-143 .fs-crease-effect {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(12px, 9.2px + 0.77vw, 24px);
  background: var(--fs-white);
  border-inline-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-5) var(--fs-sp-5) var(--fs-sp-5) var(--fs-sp-5);
}
.fs-p-143 .fs-crease-effect__txt {
  font-size: var(--fs-t-lead); font-weight: 500;
  line-height: 1.4; letter-spacing: var(--fs-ls-tight);
}
.fs-p-143 .fs-crease-effect__media { display: grid; align-content: start; }

/* --- 9. 모션 -------------------------------------------------------------
   이 파일에는 새 애니메이션/트랜지션이 없다. 위의 transform 두 곳
   (.fs-crease-callout__tag · .fs-crease-txfig__tag 의 translateY)은
   정적 배치용이라 prefers-reduced-motion 에서도 그대로 유지해야 레이아웃이 같다.
   fs.css 의 reduce 블록이 리빌·틸트·패럴랙스를 이미 최종 상태로 고정한다. */


/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   판정 근거·실측치는 _design/QA/143.md
   ========================================================================== */

/* --- B. 틸트 정리 — 라벨바가 사진에서 떨어져 나가는 결함 -----------------
   .fs-crease-fig 3장(A05 눈매 클로즈업 · A05 도해 · A23 모델컷)은 호스트가
   <figure> 자신이라 data-fs-tilt-inner 를 사진 span 에 걸 수밖에 없었다.
   그러면 fs.js:318 이 «사진만» 4deg 돌리고 <figcaption class="fs-labelbar"> 는
   평면에 남는다 → 호버 상태에서만 LOCK 2 「간격 0 · 폭 일치」가 깨진다.
   <figcaption> 은 <figure> 직계여야 해서 안쪽 래퍼로는 둘을 못 묶는다.
   → 틸트 3종 속성을 걷어내고 48 에서 검증된 「프레임 고정 + 사진만 확대」로 갈았다.
     프레임은 .fs-crease-fig__img 의 overflow:hidden 이 이미 잡고 있다.
   .fs-card--rule 3장은 inner 가 210px 도해라 1440px 짜리 행 어디를 호버해도
   그 작은 의학 도해만 3D 로 돌았다. 확정 시안 57 은 rule 카드에 틸트를 안 건다.
   POINT 카드 4장(li 호스트 + 카드 전체가 inner)은 57:160~183 과 같은 배선이라 유지. */
.fs-p-143 .fs-crease-fig .fs-crease-fig__img img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-143 .fs-crease-fig:hover .fs-crease-fig__img img {
    transform: scale(1.045);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fs-p-143 .fs-crease-fig .fs-crease-fig__img img { transition: none; transform: none; }
}

/* --- C. [V70 · E] 겹주름교정 효과 : 흰 카드 4장 → 헤어라인 열 -------------
   v70fit 검출 E:fs-split×4@S7. A06 원인(크림 위 흰 POINT 카드 4장)과
   A23 효과(크림 위 흰 상자 4장)가 같은 리듬을 두 번 써서 「상자의 나열」이 된다.
   POINT 카드는 2차 규칙에 명시된 정본 부품이므로 그대로 두고, 효과 쪽 상자를 지운다.
   상자를 지우면 크림 밴드 위 밀도가 올라가고 왼쪽 모델컷이 이 섹션의 유일한 면이 된다.
   (48 §5 와 같은 처방. 이 li 에는 data-fs-tilt 가 없어 53 의 «광택 얼룩» 위험은 0) */
@media (min-width: 1024px) {
  .fs-p-143 .fs-crease-effects { gap: 0; }
  .fs-p-143 .fs-crease-effect {
    background: transparent;
    border-inline-start: 0;
    padding: clamp(20px, 12.3px + 0.77vw, 30px) 0;
  }
  .fs-p-143 .fs-crease-effect + .fs-crease-effect {
    border-block-start: 1px solid var(--fs-line-input);
  }
  /* 상자를 지우면 첫 행 윗패딩이 왼쪽 모델컷 상단선과 어긋난다 — 두 열의 시작선을 맞춘다 */
  .fs-p-143 .fs-crease-effect:first-child { padding-block-start: 0; }
}

/* --- D. 섹션 제목 뒤 70px 틸 선 (delay .5s) ------------------------------
   ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다(첫화면 게이트).
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉을 건다.
   ★ 대상을 ID 로 열거하면 (1,1,1) 이 은닉 규칙 (0,5,2) 를 이겨 선이 굳는다.
     클래스로만 잡는다. */
.fs-p-143 .fs-h2,
.fs-p-143 .fs-sec-head__title { position: relative; }
.fs-p-143 .fs-h2::after,
.fs-p-143 .fs-sec-head__title::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-143 .fs-reveal:not(.is-in) .fs-h2::after,
:root.fs-js .fs-p-143 .fs-h2.fs-reveal:not(.is-in)::after { transform: scaleX(0); }

/* --- E. (삭제) 조건 분기 도해 접힘 보정 — 도해 자체가 없어졌다(위 6절). */



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

/* ==========================================================================
   ▼▼▼ 2026-09-17 · 승인자 「이 히어로도 규정(81 코재수술 포맷)에 맞게」 — 영문 시술명 킥커 → 제목 → 줄 → 리드(한국어 문구).
   값은 81.css 1절: 킥커 21/500/.02em · 제목 58/700/1.22 · 요소 간격 10px · 줄 아래 8px · 리드 20/1.5/#111. 사진·위치·스크림은 그대로.
   ========================================================================== */
.fs-p-143 .fs-crease-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-143 .fs-crease-hero .fs-hero__kicker {
  font-family: inherit; 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-143 .fs-crease-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22; color: var(--fs-ink);
}
.fs-p-143 .fs-crease-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-143 .fs-crease-hero .fs-crease-hero__lead { max-width: 34em; line-height: 1.5; color: var(--fs-ink); }

/* ==========================================================================
   ▼▼▼ 2026-09-23 · 모바일 최적화(승인자 「…46 다음 143」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-143-0923-mo/ · 실측 _design/momeasure.py 360/390/540
   ========================================================================== */
/* --- 줄바꿈 — 정의 인용 <br> 1 · POINT 리드 <br> 1 · 룰 카드 설명 <br> 7 · 술식 본문 <br> 10 → 문장 블록(.fs-lead__s, <br> 과 픽셀 동일). 짧은 블록은 balance(줄 수 불변).
   360/390/540 실측 고아 줄: 인용 「이상으로 겹쳐 보이면서」「수술입니다.」 · POINT 리드 「맞춤 수술을 진행하며」「결과를 추구합니다.」 · 카드 제목 「교정」 ·
   카드 설명 「라인 조정은」「있습니다.」「경우가 많습니다.」 · 술식 본문 「높은 경우」「과정이 중요합니다.」「고르지 않은 경우」「수 있습니다.」 · 효과 「개선」 · 주소 「8층」 */
.fs-p-143 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-143 .fs-crease-hero__lead,
.fs-p-143 .fs-labelbar,
.fs-p-143 .fs-card__title,
.fs-p-143 .fs-crease-effect__txt,
.fs-p-143 .fs-address { text-wrap: balance; }

@media (max-width: 599px) {
  /* --- 원인 POINT 카드 4장 — 세로 스택 4×202px → 2열(fs.css 의 .fs-grid--4 는 600 미만이 1열). 칸 150px 에 필·아이콘 74·라벨바가 들어간다. */
  .fs-p-143 .fs-crease-causes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   ▼▼▼ 2026-10-07 · A13a·A13b 술식 본문 강조 — 섹션당 2곳(승인자 「하이라이터·밑줄·동그라미를 중요한 부분에만 · 너무 글만 있어서」)
   48 의 승인 판(10-06 「너무 정신 없지 않게 진짜 핵심만」 → 2곳)을 같은 눈성형 팔레트·모션으로 옮겼다.
   A13a 형광 「기존 라인을 조정하는 과정」(술식의 요지) · 손밑줄 「무리한 피부 절제 없이」(차별점)
   A13b ◯ 「볼륨」(진단 기준) · 형광 「꺼짐이나 과도한 부풀음 없이」(결과).
   색: 선·원 --fs-teal-text(#80665D) · 형광 --fs-teal-neon(#E6B8A8) 60%. 본문이 리빌(.is-in)될 때 .4s → .9s 차례로 그어진다.
   은닉은 .fs-reveal:not(.is-in) 에만(첫 화면·헤드리스는 그어진 채) · reduced-motion 은 처음부터 그어진 상태.
   ========================================================================== */
/* 형광펜 — 글자 아래 40% 를 반투명 피치로. 두 줄에 걸치면 줄을 따라 차례로 칠해진다(slice). */
.fs-p-143 .fs-crease-em--hl {
  background: linear-gradient(transparent 56%, rgba(230, 184, 168, .6) 56% 94%, transparent 94%) 0 0 / 100% 100% no-repeat;
}
/* 손밑줄 — 살짝 흔들리는 붓선(SVG). 인라인이라 좁은 폭에서 줄이 갈려도 선이 따라간다. */
.fs-p-143 .fs-crease-em--line {
  padding-block-end: .2em;   /* 글자 밑동에 붙으면 일반 밑줄처럼 보인다 — 한 단 내려 붓선으로 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 4, 120 12, 200 8 S 330 5, 397 8' fill='none' stroke='%2380665D' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% .36em no-repeat;
}
/* 동그라미 — 낱말 둘레를 손으로 두른 타원. 겹치는 꼬리는 왼쪽 위 바깥.
   본문 행간이 1.5 라 48 의 인용(상자 기준 바깥 .4em)을 그대로 쓰면 위아래 줄 글자에 닿는다 → 글자 가운데 기준 1.3em 높이로,
   좌우는 원이 넘는 만큼(.45em) 여백을 둬 앞뒤 낱말 「의」「상」에 선이 닿지 않게. */
.fs-p-143 .fs-crease-em--circle { position: relative; display: inline-block; margin-inline: .45em; }
.fs-p-143 .fs-crease-em--circle::after {
  content: ""; position: absolute; inset: auto -.45em; top: 50%; height: 1.3em; translate: 0 -50%;
  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);
  pointer-events: none;
}
/* 전환은 리빌(.is-in) 때만 — 기본에 두면 fs.js 가 로드 직후 .fs-reveal 을 붙일 때 그어진 선이 거꾸로 지워지는 전환이 2초 가까이 돈다 */
.fs-p-143 .fs-crease-txbody.is-in .fs-crease-em--hl,
.fs-p-143 .fs-crease-txbody.is-in .fs-crease-em--line { transition: background-size .9s var(--fs-ease-out) var(--em-d, .4s); }
.fs-p-143 .fs-crease-txbody.is-in .fs-crease-em--circle::after { transition: clip-path .8s var(--fs-ease-out) var(--em-d, .4s); }
/* 섹션마다 둘째 표시(마지막 문단)는 첫째가 끝날 즈음 */
.fs-p-143 .fs-crease-txbody .fs-body:last-child .fs-crease-em { --em-d: .9s; }
:root.fs-js .fs-p-143 .fs-crease-txbody.fs-reveal:not(.is-in) .fs-crease-em--hl { background-size: 0% 100%; }
:root.fs-js .fs-p-143 .fs-crease-txbody.fs-reveal:not(.is-in) .fs-crease-em--line { background-size: 0% .36em; }
:root.fs-js .fs-p-143 .fs-crease-txbody.fs-reveal:not(.is-in) .fs-crease-em--circle::after { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) {
  .fs-p-143 .fs-crease-em--hl { transition: none !important; background-size: 100% 100% !important; }
  .fs-p-143 .fs-crease-em--line { transition: none !important; background-size: 100% .36em !important; }
  .fs-p-143 .fs-crease-em--circle::after { transition: none !important; clip-path: none !important; }
}