/* ==========================================================================
   assets/page/51.css — [51] 중년눈성형 전용 추가 규칙
   모든 셀렉터는 .fs-p-51 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).
   전용 컴포넌트
     .fs-mid-concern  고민별 수술법 체크리스트 카드 3장(10-08 신설)
     .fs-mid-zonemap  「나에게 맞는 수술법은?」 사진 지도(사진 + SVG 지시선 + 핫스팟 필 → 술식 섹션)  ← 시그니처
     .fs-mid-op       술식 섹션(소개 + 수술정보 아이콘 줄 + 수술방법 STEP 4) — 상안검 · 하안검 · 눈썹밑거상술
     .fs-mid-tx       STEP 도해 칸(정사각 일러스트 + 라벨바 + 캡션)
     .fs-mid-feat     술식별 특징 3열(수술 후 일러스트 + 번호 리스트)
   2026-10-08 병원 PPT 반영 — 인트로 · 대조표 · 캐러셀은 마크업째 지웠고 그 규칙도 걷었다(백업 _src/build/backup-51-1008-pptx).
   ========================================================================== */

/* --- 1. 셸 · A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 -------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 이 페이지의 히어로 상단은
   전 폭이 아이보리(#FAF3E3)라 흰 글자가 아니라 «잉크 글자» 를 쓴다 — 17:1.
   에셋 실측: 모델 최상단이 사진 높이의 23.3%(1072 중 250px) 라 헤더 띠가 사진에서
   차지하는 최대 구간(1280 폭에서 145px = 13.5%)에 안 걸린다. */
.fs-p-51 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-51 .fs-page--overlay { background: #FAF3E3; }
.fs-p-51 .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-51 .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-51 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-51 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-51 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
/* --fs-muted-2(#7D7D7D)는 아이보리 위에서 3.67:1 이라 AA 미달이다 */
.fs-p-51 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-51 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-51 .fs-util__sep { opacity: .35; }
/* fs.css:3002 의 «호버 시 흰 글자» 도 다크 히어로 전제다 — 밝은 헤더에선 사라진다 */
.fs-p-51 .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-51 .fs-mid-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. «위 고정»(0%)이면 에셋의 머리 위 여백 251px 가 그대로 남아
   1920 에서 머리끝이 y=251 — 헤더 띠(100px) 아래가 통째로 빈 화면이 된다.
   23% 로 내려 위쪽을 잘라내면 머리끝이 y≈178 로 올라와 형제 페이지 81(≈176)과 맞는다.
   더 내리면 헤더 띠에 머리카락이 걸린다. 1326px 미만은 세로가 딱 맞아 이 값이 무효다. */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=252 라 23% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-51 .fs-mid-hero .fs-hero__bg img { object-position: 66% 50%; }   /* 10-08 오후 hero-1008w 4800x1200(4:1) — 늘 높이 맞춤, 얼굴 중심(캔버스 66%)을 화면 66% 에. 형제 눈성형과 같은 구도 */
.fs-p-51 .fs-mid-hero .fs-hero__copy { max-width: 34rem; gap: var(--fs-sp-3); }
.fs-p-51 .fs-mid-hero .fs-hero__kicker,
.fs-p-51 .fs-mid-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-51 .fs-mid-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-51 .fs-mid-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22;
}

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

/* --- 5. STEP 도해 칸 — 정사각 일러스트(10-08) + 라벨바 + 캡션 ---------------- */
.fs-p-51 .fs-mid-tx__steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 6.5px + 0.96vw, 25px);
}
.fs-p-51 .fs-mid-tx__steps > li { display: grid; }
.fs-p-51 .fs-mid-tx__step { display: grid; grid-template-rows: auto auto 1fr; }
.fs-p-51 .fs-mid-tx__box { display: block; aspect-ratio: 1 / 1; background: var(--fs-cream); }
.fs-p-51 .fs-mid-tx__ill { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-51 .fs-mid-tx__cap {
  padding: var(--fs-sp-3) var(--fs-sp-2) 0;
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft);
}
@media (min-width: 1024px) {
  .fs-p-51 .fs-mid-tx__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- 6. 포시즌 술식별 특징 ----------------------------------------------- */
.fs-p-51 .fs-mid-feat { margin-block-start: var(--fs-gap-title); }
.fs-p-51 .fs-mid-feat__col { display: grid; align-content: start; }
.fs-p-51 .fs-mid-feat__fig { display: grid; }
.fs-p-51 .fs-mid-feat__box {
  display: grid; place-items: center;
  background: var(--fs-white); aspect-ratio: 160 / 105;
}
.fs-p-51 .fs-mid-feat__box img { width: min(100%, 210px); height: auto; }
.fs-p-51 .fs-mid-feat__list { display: grid; gap: var(--fs-sp-2); margin-block-start: var(--fs-sp-5); }
.fs-p-51 .fs-mid-feat__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-3); align-items: baseline;
  border-inline-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-3) var(--fs-sp-3) var(--fs-sp-3) var(--fs-sp-5);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
}
.fs-p-51 .fs-mid-feat__no { font-weight: 700; color: var(--fs-teal-dk); }

/* --- 9. 모션 무효화 — 새로 추가한 transition 은 여기서 전부 끈다 --------- */

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-27
   근거: _design/DESIGN_SYSTEM.md 6장 · _design/QA/47.md·48.md ·
        v70fit 검출(B=1 @다크밴드 fs-split · D=1 @S2+S3 축 동일)
   문구·alt·속성은 손대지 않았다(R1). 마크업 변경 0 — 전부 이 파일에서 처리한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. [LOCK 2-d] 술식별 특징 — 라벨바 폭 === 도해 폭
   1920 실측: 도해 210px 인데 라벨바가 467px 였다(2.2배).
   게다가 도해 아래끝(4862)과 바 위끝(4910) 사이가 48px 벌어져 있었다.
   .fs-mid-feat__box 는 흰 배경인데 이 섹션도 흰 섹션이라 상자가 안 보인다 →
   화면에서는 「넓은 띠 위에 동그라미가 떠 있는」 모양으로 읽힌다.
   (47 의 .fs-ptosis-cmp__fig 와 같은 결함, 같은 처방)
   원본이 288x288 이므로 상자를 300px 로 묶어 업스케일 없이 폭을 맞춘다.
   -------------------------------------------------------------------------- */
.fs-p-51 .fs-mid-feat__fig { justify-items: center; }
.fs-p-51 .fs-mid-feat__box {
  width: min(100%, 300px);
  aspect-ratio: 1 / 1;                    /* 160/105 세로 여백이 간격을 만들었다 */
  overflow: hidden;                       /* 호버 확대를 프레임 안에 가둔다 */
}
.fs-p-51 .fs-mid-feat__box img { width: 100%; height: 100%; object-fit: cover; }   /* 10-08 정사각 일러스트 */
.fs-p-51 .fs-mid-feat__fig .fs-labelbar { width: min(100%, 300px); }

/* --------------------------------------------------------------------------
   B. [LOCK 4-d] 배경 밴드 리듬 — 흰 섹션 3연속을 끊는다
   HTML 은 3구역 맵 섹션에 fs-section--cream 을 선언해 두었는데
   fs.css:1451 의 .fs-nose-dz 가 흰→#FDFCFB 그라데이션으로 덮어써서
   실제로는 intro(흰) · zones(흰) · spec(흰) 이 2524px 동안 이어졌다.
   vibecheck 는 그라데이션을 단색 집합과 비교하지 않아 이걸 못 잡는다.
   선언된 크림을 되살린다 — 밴드 아래끝 여백도 그라데이션용 축소값에서 되돌린다.
   부수 효과: 흰 .fs-card 3장이 크림 위에서 비로소 상자로 읽힌다(2차 규칙).
   -------------------------------------------------------------------------- */
.fs-p-51 .fs-mid-zones {
  background: var(--fs-cream);
  padding-block-end: var(--fs-sec-pb);
}

/* --------------------------------------------------------------------------
   F. 제목 뒤 70px 틸 선 — 48 에서 검증된 마이크로 인터랙션
   ★ «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     → 기본을 「그어진 상태」로, .fs-reveal:not(.is-in) 에만 초기 은닉.
   -------------------------------------------------------------------------- */
.fs-p-51 .fs-nose-head h2{ position: relative; }

.fs-p-51 .fs-nose-head h2::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-51 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-51 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   G. 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 쓰지 않는다.
   틸트가 걸린 카드(인트로 인물컷 · 3구역 도해)는 대상에서 뺀다 —
   틸트 회전과 확대가 겹치면 고정 프레임 안에서 도해가 잘린다.
   -------------------------------------------------------------------------- */
.fs-p-51 .fs-mid-tx__box { overflow: hidden; }
.fs-p-51 .fs-mid-tx__ill,
.fs-p-51 .fs-mid-feat__box img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-51 .fs-mid-tx__step:hover .fs-mid-tx__ill,
  .fs-p-51 .fs-mid-feat__fig:hover img { transform: scale(1.045); }

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

/* --------------------------------------------------------------------------
   I. 이 패스에서 추가한 모션 무효화
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-51 .fs-nose-head h2::after {
    transition: none !important;
    transform: scaleX(1) !important;
  }
  .fs-p-51 .fs-mid-tx__ill,
  .fs-p-51 .fs-mid-feat__box img {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 라운드 #2 — 2026-08-27
   1차 패스(위 A~I)가 통과시킨 뒤에도 남은 4건. 전부 렌더 실측으로 잡았다.
   검사기가 못 보는 자리들이다 —
     · vibecheck 는 LOCK 6(캐러셀 풀블리드)을 아예 판정하지 않는다
     · vibecheck 의 L2 는 라벨바 배경색이 «허용 집합 안인가»만 보고
       「그 색이 자기가 얹힌 밴드와 같은 색인가」는 보지 않는다
     · 에셋에 구워진 흰 여백은 어느 검사기도 못 본다
   문구·alt·속성 변경 0(R1) · 마크업 변경 0 · 에셋 변경 0 · 새 hex 0.
   ========================================================================== */

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 눈성형 = 블루그레이 #DDE4EB (fs.css «카테고리 틴트» 블록 + body.fs-cat-eye)
   승인자 결정: 웜 축의 유일한 쿨 예외(48 사진 상단색 계열). 공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개·글자 후광을 정한다.
   모델 오른쪽(x 48%~) · 사진 i2i
   ========================================================================== */
.fs-p-51 .fs-mid-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) 22%, rgba(var(--fs-cat), .50) 38%, rgba(var(--fs-cat), 0) 47%);
}
@media (max-width: 1023px) {
  .fs-p-51 .fs-mid-hero .fs-hero__bg::after { content: none; }
  .fs-p-51 .fs-mid-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-51 .fs-mid-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-51 .fs-mid-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-51 .fs-mid-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-51 .fs-mid-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-51 .fs-mid-hero .fs-mid-hero__lead { max-width: 34em; line-height: 1.5; color: var(--fs-ink); }

/* ==========================================================================
   ▼▼▼ 2026-10-08 · 병원 PPT 「홈페이지 수정(중년눈성형).pptx」 14장 — 계획 _design/PLAN-51-1008-pptx.md
   순서: hero · concern(신설) · zones · upper · lower · brow · features · soof
   밴드: 흰 · 크림 · 흰 · 크림 · 흰 · 크림 · 잉크. 색은 --fs-* 토큰만(새 hex 0).
   ========================================================================== */

/* --- P1. 고민별 수술법 체크리스트(슬 3) — 흰 섹션 위 크림 카드 3장 · 필 머리 · 체크 목록 --- */
.fs-p-51 .fs-mid-concern__cards { margin-block-start: var(--fs-gap-title); }
.fs-p-51 .fs-mid-concern__card {
  display: grid; align-content: start; justify-items: center; gap: var(--fs-sp-6);
  background: var(--fs-cream);
  padding: clamp(28px, 24.3px + 1.03vw, 44px) clamp(20px, 15.4px + 1.28vw, 40px);
}
.fs-p-51 .fs-mid-concern__head { font-size: inherit; line-height: 1; }
.fs-p-51 .fs-mid-concern__head .fs-pill { font-size: var(--fs-t-h3); font-weight: 700; padding: .42em 1.3em; }   /* 10-08 오후 승인자 「시술명 더 크게」 — 18~20 → 20~27px */
.fs-p-51 .fs-mid-concern__list { display: grid; gap: var(--fs-sp-4); justify-self: stretch; }
.fs-p-51 .fs-mid-concern__list li {
  display: grid; grid-template-columns: 22px 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);
}
/* 체크 원 — 글자 첫 줄 가운데에 맞춘다(16~17px · 행간 1.5 → 첫 줄 높이 24~25.5px) */
.fs-p-51 .fs-mid-concern__list li::before {
  content: ""; width: 22px; height: 22px; margin-block-start: 1px; border-radius: 50%;
  background: var(--fs-teal-dk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.fs-p-51 .fs-mid-concern__note {
  margin-block-start: clamp(24px, 19.4px + 1.28vw, 44px);
  text-align: center; text-wrap: balance; color: var(--fs-ink-soft);
}

/* --- P2. 「나에게 맞는 수술법은?」 사진 지도(슬 5·6) — 사진 전체를 가운데에, 이름표 → 술식 섹션 ---
   좌표는 전부 사진(1600x1120) 기준 % — 지시선 SVG 도 같은 viewBox 라 모든 폭에서 같은 점을 가리킨다.
   과녁(모델 왼눈): 눈썹 아래 945,345 · 윗눈꺼풀 910,370 · 아랫눈꺼풀 915,430 (_src/gen/51-pptx 격자 크롭으로 읽음)
   이름표는 얼굴 오른쪽 바탕(x 70%) — 세로 간격 130 이라 390 폭에서도 안 겹친다. 지시선은 과녁에서 x 1010 까지 수평, 거기서 이름표로 꺾는다(A안). */
.fs-p-51 .fs-mid-zonemap { margin: var(--fs-gap-title) auto 0; max-width: 1040px; }
.fs-p-51 .fs-mid-zonemap__fig { position: relative; display: block; container-type: inline-size; }
.fs-p-51 .fs-mid-zonemap__fig img { display: block; width: 100%; height: auto; }
.fs-p-51 .fs-mid-zonemap__lines {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
}
/* 10-08 오후 승인자 「a로 해줘」(시안 _review/51-1008-zonemap-options.jpg A) — 부채꼴 직선 → 꺾은선 정렬 · 큰 흰 점 → 작은 갈색 점 + 흰 후광 · 갈색 이름표 → 흰 이름표 + 「›」 */
.fs-p-51 .fs-mid-zonemap__lines polyline { fill: none; stroke: var(--fs-white); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fs-p-51 .fs-mid-zonemap__lines .halo { fill: rgb(255 255 255 / .45); stroke: none; }
.fs-p-51 .fs-mid-zonemap__lines .dot { fill: var(--fs-teal-dk); stroke: var(--fs-white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fs-p-51 .fs-mid-zonemap__hot {
  position: absolute; inset-inline-start: 70%; translate: 0 -50%;
  font-size: clamp(12px, 1.65cqw, 17px); font-weight: 700; padding: .45em 1.1em;
  white-space: nowrap; text-decoration: none;
  background: var(--fs-white); color: var(--fs-teal-dk);
  border: 1px solid rgb(107 86 78 / .18);
  box-shadow: 0 4px 14px rgb(87 69 63 / .18);
  transition: background-color var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease);
}
.fs-p-51 .fs-mid-zonemap__hot::after { content: " \203A"; font-weight: 400; }
.fs-p-51 .fs-mid-zonemap__hot:hover,
.fs-p-51 .fs-mid-zonemap__hot:focus-visible { background: var(--fs-teal-dk); color: var(--fs-white); }
.fs-p-51 .fs-mid-zonemap__hot--brow  { inset-block-start: 22.32%; }   /* y 250 / 1120 */
.fs-p-51 .fs-mid-zonemap__hot--upper { inset-block-start: 33.93%; }   /* y 380 */
.fs-p-51 .fs-mid-zonemap__hot--lower { inset-block-start: 45.54%; }   /* y 510 */
/* <600 — 「눈썹밑거상술 ›」 가 390 에서 2px · 360 에서 11px 사진 밖으로 넘쳤다 → 조금 왼쪽 · 좌우 여백 줄임(선 끝 69% 는 이름표 밑으로 들어간다) */
@media (max-width: 599px) {
  .fs-p-51 .fs-mid-zonemap__hot { inset-inline-start: 68%; padding-inline: .8em; }
}
/* 이름표를 누르면 술식 섹션 머리가 오버레이 헤더 밑으로 숨지 않게 */
.fs-p-51 .fs-mid-op { scroll-margin-block-start: var(--fs-header-h); }

/* --- P3. 술식 섹션(슬 8~13) — 소개 · 수술정보 아이콘 줄 6칸 · 수술방법 STEP 4 --- */
.fs-p-51 .fs-mid-op__lead { max-width: 58em; text-wrap: pretty; }
.fs-p-51 .fs-mid-op__spec {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--fs-sp-7); column-gap: var(--fs-sp-3);
  margin-block-start: clamp(28px, 23.4px + 1.28vw, 48px);
  padding-block: clamp(24px, 21.2px + 0.77vw, 36px);
  border-block: 1px solid var(--fs-line);
}
.fs-p-51 .fs-mid-op.fs-section--cream .fs-mid-op__spec { border-color: var(--fs-line-input); }
.fs-p-51 .fs-mid-op__spec-item { display: grid; justify-items: center; align-content: start; gap: var(--fs-sp-2); text-align: center; }
.fs-p-51 .fs-mid-op__spec dt {
  display: grid; justify-items: center; gap: var(--fs-sp-3);
  font-size: var(--fs-t-sm); line-height: var(--fs-lh-head); color: var(--fs-muted-2);
}
.fs-p-51 .fs-mid-op__spec dt img { width: clamp(46px, 41.4px + 1.28vw, 64px); height: auto; filter: brightness(.55); }   /* ic-*.png 는 #999 선 아이콘 — 표 칸에선 됐지만 단독 줄에선 흐리다 → #545454 */
.fs-p-51 .fs-mid-op__spec dd {
  margin: 0; font-size: var(--fs-t-sub); font-weight: 700; line-height: var(--fs-lh-head); color: var(--fs-ink);
  text-wrap: balance;
}
.fs-p-51 .fs-mid-op__sub {
  margin-block-start: clamp(44px, 36.6px + 2.05vw, 76px);
  font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); letter-spacing: var(--fs-ls-tight);
}
.fs-p-51 .fs-mid-op__steps { margin-block-start: clamp(18px, 15.2px + 0.77vw, 30px); }
@media (min-width: 1024px) {
  .fs-p-51 .fs-mid-op__spec { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .fs-p-51 .fs-mid-zonemap__hot { transition: none !important; }
}

/* --- P4. 10-08 오후 승인자 캡처 「텍스트 좀 크게」 — 특징 목록 16~17 → 19~21px(번호도 같이) --- */
.fs-p-51 .fs-mid-feat__list li { font-size: var(--fs-t-lead); padding-block: var(--fs-sp-4); }

/* --- P5. 타이포 5항 점검(10-08 오후 · 위계/크기·굵기/행간/자간/정렬·줄 길이) — 실측 1920 · 390 ---
   ① 위계: 특징 열 머리(라벨바 17/700)가 목록(P4 로 키운 21/400)보다 작아 뒤집혔다 → 머리를 h3 토큰(20~27)으로.
      결과 1920 h2 40 > 특징 머리 27 > 목록 21 · 390 28 > 20 > 19.
   ③ 행간·⑤ 줄 길이: 술식 소개 리드 1920 한 줄 최대 61자(3줄) · 390 9줄, 지도 리드 한 줄 77자 → 42em(≈42자)로 묶고 행간 1.5 → 1.65.
   ② 굵기 400/500/700 세 단(최대 700) · ④ 자간 제목 −0.01~−0.025em · 본문 −0.01em · 필 +0.02em — 그대로. */
.fs-p-51 .fs-mid-feat__fig .fs-labelbar { font-size: var(--fs-t-h3); padding-block: .45em; }
/* 10-08 모바일 패스 정정 — 42em 은 웹폰트 없는 렌더(대체 글꼴)로 잰 값이었다. Pretendard 실측 21px 한 글자 ≈ 14.7px 라 42em 에 57~60자가 들어갔다 → 34em(≈48자) */
.fs-p-51 .fs-mid-op__lead,
.fs-p-51 #zones .fs-nose-lead { max-width: 34em; line-height: 1.65; text-wrap: pretty; }

/* --- P6. SOOF LIFT(10-08 오후 승인자 「블랙박스 말고 그냥 무난한걸로」) — 잉크 밴드 · 고스트 · 사진에 겹친 검은 패널 →
   흰 섹션 2단: 좌 사진 + 라벨바 · 우 제목(h2 40, 다른 섹션과 같은 크기 + 70px 선) · 인용 · 리드. 밴드 = 크림(특징) 뒤 흰.
   soof-face.jpg 는 700x709 중 내용이 (8,83)~(631,706) 뿐이고 나머지가 순백 — 프레임 안에서 scale 1.18 · 원점 21% 89% 로 흰 여백만 덜어낸다(옛 K 와 같은 값, 네 변 1.7~2.8% 여유). */
.fs-p-51 .fs-mid-soof__fig { display: grid; align-content: start; }
.fs-p-51 .fs-mid-soof__frame { display: block; overflow: hidden; }
.fs-p-51 .fs-mid-soof__frame img { display: block; width: 100%; height: auto; transform: scale(1.18); transform-origin: 21% 89%; }
.fs-p-51 .fs-mid-soof__copy { display: grid; justify-items: start; }
.fs-p-51 .fs-mid-soof__copy .fs-quote { margin-block-start: clamp(20px, 16.3px + 1.03vw, 36px); }
.fs-p-51 .fs-mid-soof__copy .fs-lead { margin-block-start: clamp(12px, 10.2px + 0.51vw, 20px); max-width: 34em; line-height: 1.65; text-wrap: pretty; }
@media (max-width: 1023px) {
  .fs-p-51 .fs-mid-soof__fig { max-width: 460px; }
}
/* 390 에서 「…진행할 수 / 있는 / SOOF LIFT」 — 「있는」 외톨이 줄 → 첫 줄을 고르게 */
.fs-p-51 #soof-title { text-wrap: balance; }

/* ==========================================================================
   ▼▼▼ 2026-10-08 · 모바일 최적화(승인자 「페이지 줄바꿈 확인 및 모바일 최적화」) — 줄바꿈은 전 폭, 배치는 599px 이하만.
   백업 _src/build/backup-51-1008-mo · 실측 _design/momeasure.py 360/390/540/768 + 1024/1440/1920(웹폰트 주입).
   before 외톨이: 360 14 · 390 14 · 540 8 · 768 5 · 1024 14 · 1440/1920 7 — 캡션 「…당겨 / 봉합」「…보이는 / 경우」 · 리드 끝 「…수 있습니다.」 ·
   수술정보 「부분마취 / +수면마취」(3열 103px) · h2 「…수술법도 / 달라집니다.」(390) · 특징 「…어려보이는 / 눈매」.
   ========================================================================== */
/* P7-1. 줄바꿈(전 폭) — 짧은 블록 balance(§1-5). 긴 리드도 balance(48 과 같다 — pretty 는 2어절 끝줄을 고아로 안 본다, 6줄 넘으면 크롬이 무시) */
.fs-p-51 .fs-h2,
.fs-p-51 .fs-mid-tx__cap,
.fs-p-51 .fs-mid-concern__list li,
.fs-p-51 .fs-mid-feat__list li > span:last-child,
.fs-p-51 .fs-mid-op__lead,
.fs-p-51 #zones .fs-nose-lead,
.fs-p-51 .fs-mid-soof__copy .fs-lead,
.fs-p-51 .fs-address { text-wrap: balance; }

/* P7-2. 배치(<600) */
@media (max-width: 599px) {
  /* 수술정보 6칸 3열 → 2열(§2 A) — 3열 칸 103px(360)에서 값이 「부분마취 / +수면마취」 로 갈렸다. 2열 칸 ≈170px 에 한 줄 */
  .fs-p-51 .fs-mid-op__spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-51 .fs-mid-op__spec dd { white-space: nowrap; }
  /* 목록 칸이 360 에서 ≈150px — 19px 면 「눈 밑 / 애교살을 살려 / 어려보이는 눈매」 3줄 → 본문 크기(PC 는 P4 의 21px 그대로) */
  .fs-p-51 .fs-mid-feat__list li { font-size: var(--fs-t-body); }
  .fs-p-51 .fs-mid-feat__fig .fs-labelbar { font-size: var(--fs-t-body); padding-inline: var(--fs-sp-2); }
}
/* 특징 3장 세로(390 1,728px) → «도해+라벨바 좌 38% · 목록 우» 행(§2 B) — 라벨바는 도해 바로 아래(LOCK 2).
   처음엔 <600 만이었는데, 600~1023 은 fs-grid--3 이 2열이라 셋째 카드가 혼자 한 줄 → 같은 날 「옆으로 expand」 때 <1024 로 넓혔다(한 열 행 셋).
   그림은 3:2(P8) — 행에서는 정사각 상자 cover 로 가운데만(전과 같은 크롭). */
@media (max-width: 1023px) {
  .fs-p-51 .fs-mid-feat { grid-template-columns: minmax(0, 1fr); row-gap: var(--fs-sp-9); }
  .fs-p-51 .fs-mid-feat__col {
    grid-template-columns: 38% minmax(0, 1fr); column-gap: var(--fs-sp-5); align-items: center;
  }
  .fs-p-51 .fs-mid-feat__fig { justify-items: stretch; }
  .fs-p-51 .fs-mid-feat__box,
  .fs-p-51 .fs-mid-feat__fig .fs-labelbar { width: 100%; }
  .fs-p-51 .fs-mid-feat__list { margin-block-start: 0; }
  .fs-p-51 .fs-mid-feat__list li { padding-inline: var(--fs-sp-3) 0; }
}

/* --- P8. 특징 그림 칸 폭 가득(10-08 승인자 「vertical 맞게 이미지를 옆으로 expand」) — 291px 정사각이 칸(1024 312 · 1440 447 · 1920 470) 가운데 떠서
   목록 왼쪽 선과 세로축이 어긋났다 → 그림을 같은 베이스에서 3:2 로 넓게 다시 잘라(draw51.py BOX_W, 생성 없음) 칸 폭 100% · 라벨바도 100%. */
@media (min-width: 1024px) {
  .fs-p-51 .fs-mid-feat__fig { justify-items: stretch; }
  .fs-p-51 .fs-mid-feat__box,
  .fs-p-51 .fs-mid-feat__fig .fs-labelbar { width: 100%; }
  .fs-p-51 .fs-mid-feat__box { aspect-ratio: 3 / 2; }
}

/* --- P9. 섹션 머리 가운데 정렬(10-08 승인자 「가운데 정렬하고, 하면서 줄바꿈 다시 확인」 — 시안 _review/51-1008-ophead-options.jpg C)
   ≥1024 만, 술식 3(상안검 · 하안검 · 눈썹밑거상술) 머리의 제목 · 70px 선 · 리드. 아래 아이콘 줄이 이미 가운데라 축이 하나가 된다.
   SOOF(사진 | 글 2단)는 글 칸 왼쪽 그대로. <1024 는 왼쪽 그대로 — 리드가 모바일 8~10줄이라 가운데면 줄 머리가 들쭉날쭉해진다.
   .fs-nose-head 는 justify-items:start 라 text-align 만으로는 상자가 왼쪽에 남는다(fs-nose-head-center-trap) — justify-items 까지. 선은 가운데서 양쪽으로 그어진다. */
/* 같은 날 후속 「다 중앙 정렬 말고, 시술 수술 설명하는 부분만 … 여기 빼고 다 원래대로」(캡처 3장 = 술식 3 머리) —
   체크리스트 · 지도 · 특징 머리와 「○○ 수술방법」 소제목은 왼쪽으로 되돌림. 술식 머리(제목 · 선 · 문장 블록 리드)만 가운데. */
@media (min-width: 1024px) {
  .fs-p-51 .fs-mid-op .fs-nose-head { justify-items: center; text-align: center; }
  .fs-p-51 .fs-mid-op .fs-nose-head h2::after { margin-inline: auto; transform-origin: center; }
  /* 같은 날 후속 「문장 짧게 짧게말고 조금 길게해서 줄바꿈 안되나?」 — 34em(≈48자) 폭 제한을 풀어 문장 블록이 컨테이너 폭까지.
     넓은 화면은 한 문장 한 줄, 좁은 PC(1024~1280)에서 넘치는 문장만 두 줄(블록 balance). */
  .fs-p-51 .fs-mid-op__lead { max-width: none; }
}
/* P9-2. 술식 리드 문장 블록(사이트 표준 .fs-lead__s — 80·91·144). 가운데 정렬에서 문장 안 구 갈림(「답답해 / 보일 수 있습니다.」)을 nbsp 로는 못 막아 문장마다 새 줄 + balance. 전 폭(§1-3). */
.fs-p-51 .fs-lead__s { display: block; text-wrap: balance; }

/* --- P10. 수술정보 아이콘 줄 포인트(10-08 승인자 캡처 3장 「섹션들 중 이 부분만 약간의 포인트 추가 가능?」)
   회색 선 아이콘 + 검정 값뿐이라 밋밋했다 → 아이콘을 원형 바탕(흰 섹션 크림 · 크림 섹션 흰색) 안에, 아이콘·값을 포인트 브라운(--fs-teal-dk #6B564E), PC 는 칸 사이 가는 세로선.
   아이콘 PNG 는 #999 · 알파 최대 .82 라 필터로 물들인다 — 렌더 실측 (107,89,80) ≈ #6B564E. 필터가 배경까지 물들여 원은 감싸는 span(.fs-mid-op__ic)에. */
.fs-p-51 .fs-mid-op__ic {
  display: grid; place-items: center;
  width: clamp(62px, 55px + 1.4vw, 82px); aspect-ratio: 1; border-radius: 50%;
  background: var(--fs-cream);
}
.fs-p-51 .fs-mid-op.fs-section--cream .fs-mid-op__ic { background: var(--fs-white); }
.fs-p-51 .fs-mid-op__spec dt img { width: 62%; height: auto;   /* 10-08 ic-*-c.png 96x96(그림 bbox 가운데) */
  filter: brightness(0) invert(20%) sepia(25%) saturate(600%) hue-rotate(338deg); }
.fs-p-51 .fs-mid-op__spec dd { color: var(--fs-teal-dk); }
@media (min-width: 1024px) {
  .fs-p-51 .fs-mid-op__spec-item + .fs-mid-op__spec-item { border-inline-start: 1px solid var(--fs-line); }
  .fs-p-51 .fs-mid-op.fs-section--cream .fs-mid-op__spec-item + .fs-mid-op__spec-item { border-inline-start-color: var(--fs-line-input); }
}

/* --- P11. STEP 캡션 크게(10-08 승인자 캡처 3장 「텍스트 사이즈 좀 키워줘」) — 16~17 → 18~20px(--fs-t-sub). 휴대폰 2열 칸(390 167px)은 본문 크기 그대로. */
.fs-p-51 .fs-mid-tx__cap { font-size: var(--fs-t-sub); }
@media (max-width: 599px) {
  .fs-p-51 .fs-mid-tx__cap { font-size: var(--fs-t-body); }
}

/* --- P12. 고민 체크리스트 카드 3장 색 구분(10-08 승인자 캡처 「3개 다 박스별로 컬러를 다르게」) — 바탕 · 이름 필 · 체크 원을 카드마다 한 계열로.
   같은 날 승인자 「홈페이지 컬러 팔레트에서 완전 크게 안 벌어지는 색상 3개로」 — 옛 블루그레이 · 로즈 · 세이지(색상 216° · 4° · 86°)를 팔레트 웜 계열(14~36°)로 좁혔다.
   상안검 토프(--fs-teal #97796E 계열) · 하안검 로즈 클레이(--fs-teal-neon #E6B8A8 계열) · 눈썹밑거상술 골드(--fs-gold #9B7843 계열) — 팔레트 색상(H)은 그대로 두고 명도만 옮겼다.
   그레이지(--fs-taupe)는 토프와 나란히 두면 같은 색으로 읽혀 뺐다. 페이지 전용 hex 6개(이 블록만 — 토큰 규칙의 예외, 42 --ev-live 와 같은 처리).
   대비: 흰 글자/필 4.65 · 4.62 · 4.64(옛 토프 필 3.98 보다 높다) · 본문 #3F3F3F/바탕 9.2 · 바탕/흰 섹션 1.14~1.15(옛 크림 바탕과 같은 층). */
.fs-p-51 .fs-mid-concern__card { --mid-card-bg: var(--fs-cream); --mid-card-ac: var(--fs-teal-dk); background: var(--mid-card-bg); }
.fs-p-51 .fs-mid-concern__card:nth-child(1) { --mid-card-bg: #F4EFED; --mid-card-ac: #8B6E64; }
.fs-p-51 .fs-mid-concern__card:nth-child(2) { --mid-card-bg: #F9EDEA; --mid-card-ac: #A7634F; }
.fs-p-51 .fs-mid-concern__card:nth-child(3) { --mid-card-bg: #F6EFE6; --mid-card-ac: #906F3E; }
.fs-p-51 .fs-mid-concern__head .fs-pill { background: var(--mid-card-ac); }
.fs-p-51 .fs-mid-concern__list li::before { background-color: var(--mid-card-ac); }