/* ==========================================================================
   59 · 윤곽 (카테고리 랜딩) — 페이지 전용 CSS
   모든 셀렉터는 .fs-p-59 스코프. 색은 --fs-* 토큰만 쓴다.
   예외 2개 — 히어로 에셋 상단색(PC #F5E9D9 · 모바일 #F8F2EB). 토큰에 없는 사진 실측값이라
   143·146·61 정본과 같은 방식으로 직접 쓴다. 그 밖의 새 hex 0개.

   전용 컴포넌트
     1) .fs-contour-hero    1mm 계열 투명 헤더 오버레이 + 풀블리드 모델 히어로
                            (<1024px 는 베이지 카피 밴드 위 / 세로 사진 아래로 스택)
     2) .fs-contour-zone    ★ 시그니처 — 정면 뼈 도해 3부위 셀렉터 (라디오, JS 없음)
     3) .fs-contour-card    A18 패널 카드 + 사진 좌하단 틸 라벨바
     4) .fs-contour-spec    3시술 통합 수술정보표 (항목열에 틸 아이콘)
     5) .fs-contour-gallery 다크 밴드 코버플로우 도해 갤러리
     6) .fs-contour-promise 약속 5조 룰 카드 + 좌측 사진
   ========================================================================== */

/* --- 1. 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 -----------------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 히어로 상단이 전 폭
   웜 베이지~아이보리라 흰 글자가 아니라 «잉크 글자» 를 쓴다(밝은 변형).
   구조는 143·146·61 정본과 같고 스코프만 .fs-p-59 이다. */
.fs-p-59 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-59 .fs-page--overlay { background: #F5E9D9; }
.fs-p-59 .fs-header--overlay { color: var(--fs-ink); }
/* 2026-09-11 승인자 지시 「56 처럼 상단 메뉴바 그라디에이션」 — fs.css:468 기본 ::before(검정 스크림)를
   content:none 으로 껐던 것을 되살리고 배경만 밝은 안개로. 다른 18장과 같은 흰 알파. */
.fs-p-59 .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-59 .fs-gnb__link:not([aria-current="page"]) { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-59 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-59 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
/* --fs-muted-2(#7D7D7D)는 베이지 위에서 AA 미달이다 */
.fs-p-59 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); opacity: 1; }
.fs-p-59 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-59 .fs-util__sep { opacity: .35; }
/* fs.css:3002 의 «호버 시 흰 글자» 도 다크 히어로 전제다 — 밝은 헤더에선 사라진다 */
.fs-p-59 .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-59 .fs-contour-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 에셋 정수리가 25.0%(1072 중 268px). 29% 로 내려 잘라야 1920 에서 머리끝이 y≈176 으로
   올라와 형제 정본 143(≈178)·81(≈176)과 맞는다. 1326px 미만은 세로가 딱 맞아 무효다. */
.fs-p-59 .fs-contour-hero .fs-hero__bg img { object-position: 50% 29%; }

.fs-p-59 .fs-contour-hero { background: #F5E9D9; color: var(--fs-ink); }
.fs-p-59 .fs-contour-hero .fs-hero__copy { max-width: min(100%, 46vw); gap: var(--fs-sp-3); }
/* 베이지 위에서 --fs-teal-text(#00787F)는 4.14:1 로 AA 미달이다
   (fs.css:2660 의 보정 표가 같은 값을 적어 두었다). 한 단 더 어두운
   --fs-teal-dk(#00646B)는 5.45:1 로 통과한다. */
.fs-p-59 .fs-contour-hero .fs-hero__kicker {
  color: var(--fs-teal-dk);
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em;
  font-weight: 600;
}
.fs-p-59 .fs-contour-hero .fs-hero__title {
  color: var(--fs-ink);
  font-size: clamp(28px, 20.6px + 2.05vw, 52px);
  font-weight: 700;
  line-height: 1.28;
}

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

/* --- 2. 인트로 --------------------------------------------------------- */
.fs-p-59 .fs-contour-intro__note {
  margin-block-start: var(--fs-sp-5);
  font-size: var(--fs-t-sub);
  font-weight: 600;
  color: var(--fs-teal-dk);
}

/* --- 3. 시술 카드 (A18 + 좌하단 라벨바) --------------------------------- */
.fs-p-59 .fs-contour-cards {
  --fs-panel-w: 58%;
  --fs-panel-drop: 58px;
  padding-block-end: 58px;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-59 .fs-contour-card__media { position: relative; display: block; overflow: hidden; }
.fs-p-59 .fs-contour-card__media img { display: block; width: 100%; height: auto; }
.fs-p-59 .fs-contour-card .fs-labelbar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 42%;
  justify-content: flex-start;
  padding-inline: var(--fs-sp-5);
}
.fs-p-59 .fs-contour-card .fs-card__panel { gap: var(--fs-sp-3); }
.fs-p-59 .fs-contour-card .fs-card__desc { padding-inline-end: clamp(0px, -8px + 2.2vw, 34px); }

/* --- 4. ★ 시그니처 · 윤곽 3부위 셀렉터 ---------------------------------- */
.fs-p-59 .fs-contour-zone { position: relative; margin-block-start: var(--fs-gap-title); }
.fs-p-59 .fs-contour-zone__grid { display: grid; gap: var(--fs-gap-col); }

.fs-p-59 .fs-contour-zone__stage {
  position: relative;
  justify-self: center;
  width: min(340px, 100%);
  background: var(--fs-ink-band-2);
}
.fs-p-59 .fs-contour-zone__stage img { display: block; width: 100%; height: auto; }

.fs-p-59 .fs-contour-zone__hot {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-inline: var(--fs-sp-3);
  font-size: var(--fs-t-pill);
  font-weight: 700;
  color: var(--fs-white);
  background: var(--fs-pill-gray);
  border-radius: var(--fs-radius-pill);
  cursor: pointer;
  transition: background-color var(--fs-dur) var(--fs-ease);
}
.fs-p-59 .fs-contour-zone__hot--cheek { inset-block-start: 34%; inset-inline-start: 2%; }
.fs-p-59 .fs-contour-zone__hot--jaw   { inset-block-start: 58%; inset-inline-end: 2%; }
.fs-p-59 .fs-contour-zone__hot--chin  { inset-block-end: 1%; inset-inline-start: 50%; transform: translateX(-50%); }

.fs-p-59 .fs-contour-zone__panel { display: none; }
.fs-p-59 #cz-chin:checked  ~ .fs-contour-zone__grid .fs-contour-zone__panel--chin,
.fs-p-59 #cz-jaw:checked   ~ .fs-contour-zone__grid .fs-contour-zone__panel--jaw,
.fs-p-59 #cz-cheek:checked ~ .fs-contour-zone__grid .fs-contour-zone__panel--cheek { display: grid; }

.fs-p-59 #cz-chin:checked  ~ .fs-contour-zone__grid .fs-contour-zone__hot--chin,
.fs-p-59 #cz-jaw:checked   ~ .fs-contour-zone__grid .fs-contour-zone__hot--jaw,
.fs-p-59 #cz-cheek:checked ~ .fs-contour-zone__grid .fs-contour-zone__hot--cheek { background: var(--fs-teal-text); }

.fs-p-59 #cz-chin:focus-visible  ~ .fs-contour-zone__grid .fs-contour-zone__hot--chin,
.fs-p-59 #cz-jaw:focus-visible   ~ .fs-contour-zone__grid .fs-contour-zone__hot--jaw,
.fs-p-59 #cz-cheek:focus-visible ~ .fs-contour-zone__grid .fs-contour-zone__hot--cheek {
  outline: 2px solid var(--fs-white);
  outline-offset: 2px;
}

.fs-p-59 .fs-contour-zone__panel { align-content: start; gap: var(--fs-sp-5); }
.fs-p-59 .fs-contour-zone__kicker { font-size: var(--fs-t-kicker); font-weight: 700; letter-spacing: var(--fs-ls-wide); color: var(--fs-teal-dk); }
.fs-p-59 .fs-contour-zone__specs {
  display: grid;
  gap: 0;
  margin-block-start: var(--fs-sp-2);
  border-block-start: 2px solid var(--fs-teal);
}
.fs-p-59 .fs-contour-zone__row {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
  gap: var(--fs-sp-5);
  padding-block: var(--fs-sp-4);
  border-block-end: 1px solid var(--fs-line);
}
.fs-p-59 .fs-contour-zone__dt { font-size: var(--fs-t-body); font-weight: 600; color: var(--fs-muted); }
.fs-p-59 .fs-contour-zone__dd { font-size: var(--fs-t-body); font-weight: 700; color: var(--fs-ink); }
.fs-p-59 .fs-contour-zone__more { justify-self: start; margin-block-start: var(--fs-sp-4); }

@media (min-width: 1024px) {
  .fs-p-59 .fs-contour-zone__grid {
    grid-template-columns: minmax(0, 420fr) minmax(0, 900fr);
    align-items: center;
  }
  .fs-p-59 .fs-contour-zone__stage { justify-self: start; width: 100%; max-width: 380px; }
}

/* --- 5. 통합 수술정보표 -------------------------------------------------- */
.fs-p-59 .fs-contour-spec-wrap { margin-block-start: var(--fs-gap-title); }
.fs-p-59 .fs-contour-spec { min-width: 660px; }
.fs-p-59 .fs-contour-spec thead th { text-align: center; }
.fs-p-59 .fs-contour-spec thead th:first-child { text-align: start; }
.fs-p-59 .fs-contour-spec td { text-align: center; font-weight: 600; }
.fs-p-59 .fs-contour-spec tbody th { background: var(--fs-cream-2); }
.fs-p-59 .fs-contour-spec__item { display: flex; align-items: center; gap: var(--fs-sp-3); }
.fs-p-59 .fs-contour-spec__icon { flex: 0 0 auto; width: 28px; height: 28px; }
.fs-p-59 .fs-contour-spec__label { font-size: var(--fs-t-body); font-weight: 700; white-space: nowrap; }

/* --- 6. 다크 밴드 도해 갤러리 ------------------------------------------- */
.fs-p-59 .fs-contour-gallery {
  margin-block-start: var(--fs-gap-title);
}
.fs-p-59 .fs-contour-gallery .fs-carousel__viewport { overflow: hidden; }
/* LOCK 6 — 다음/이전 도해가 콘텐츠 경계(1920 기준 x240/x1679) 밖으로 이어지다
   화면 끝에서 잘려야 한다. 잘림은 html/body{overflow-x:clip}(fs.css:211·219)이 맡는다.
   뷰포트 «폭» 은 건드리지 않는다 — fs.js:554 가 viewport.clientWidth 로 슬라이드 폭을
   계산하므로 폭을 줄이면 시안 수치가 통째로 어긋난다.
   1700px 미만에서는 노출 폭 (W-1440)/2 가 30px 대라 «잘린 조각»이 아니라
   «어긋난 여백»으로 읽히므로 게이트한다(1440 = 34px · 1024 = 29px · 1920 = 240px). */
@media (min-width: 1700px) {
  .fs-p-59 .fs-contour-gallery .fs-carousel__viewport { overflow: visible; }
}
.fs-p-59 .fs-contour-gallery__fig { display: grid; }
.fs-p-59 .fs-contour-gallery__fig img { display: block; width: 100%; height: auto; }
.fs-p-59 .fs-contour-gallery .fs-labelbar { min-height: clamp(34px, 30.5px + 1.05vw, 46px); }
.fs-p-59 .fs-contour-gallery .fs-carousel__dot { --fs-dot: var(--fs-line); }
.fs-p-59 .fs-contour-gallery .fs-carousel__dot.is-active { --fs-dots-bg: var(--fs-ink-band-2); --fs-dot-on: var(--fs-teal); }
.fs-p-59 .fs-contour-gallery__nav { justify-content: flex-end; margin-block-start: var(--fs-sp-6); }
/* 고스트는 마스크·헤드램프까지 또렷한 인물컷이다(엣지 에너지 1.84 — 확정 시안 57 의
   assets/nose/compare-bg.jpg 는 0.46 으로 블러가 에셋에 구워져 있다).
   .24 로 깔면 도해 뒤에 «반쯤 가려진 두번째 얼굴»로 읽히므로 CSS 로만 흐린다.
   에셋은 건드리지 않는다 — 다른 페이지와 공유될 수 있다. */
.fs-p-59 .fs-contour-gallery__ghost img { opacity: .24; filter: blur(24px); }

/* --- 7. 약속 5조 -------------------------------------------------------- */
.fs-p-59 .fs-contour-promise__grid { margin-block-start: var(--fs-gap-title); align-items: stretch; }
.fs-p-59 .fs-contour-promise__fig { display: block; height: 100%; min-height: 240px; }
.fs-p-59 .fs-contour-promise__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-59 .fs-contour-promise .fs-card--rule { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.fs-p-59 .fs-contour-promise .fs-card__num { white-space: nowrap; }
.fs-p-59 .fs-contour-promise__note {
  margin-block-start: var(--fs-sp-8);
  padding: var(--fs-sp-4) var(--fs-sp-5);
  background: var(--fs-white);
  border-inline-start: 2px solid var(--fs-teal);
  font-size: var(--fs-t-sm);
  color: var(--fs-muted);
}

/* --- 9. 마이크로 인터랙션 ------------------------------------------------
   ① 섹션 제목 뒤 70px 틸 선 (delay .5s) — 46·48 에서 검증된 구현을 그대로 옮겼다.
      기본을 「그어진 상태」로 두고 :root.fs-js 아래 .fs-reveal:not(.is-in) 일 때만 감춘다.
      「.is-in 이면 보이기」로 짜면 fs.js 가 첫 화면 대상에는 .fs-reveal 클래스 자체를
      안 붙이므로 첫 화면 제목의 선이 영원히 안 그어진다.
      ※ 이 블록의 전제 — 59/index.html 의 #intro-title · #procedures-title · #spec-title ·
        #gallery-title · #promise-title 에 data-fs-reveal 이 붙어 있어야 «그어지는 애니메이션»이
        산다. 속성을 지우면 선은 남고 진입 모션만 조용히 죽는다.
   ② 호버 — 프레임은 고정, 그림자는 쓰지 않는다.
      시술 카드의 사진은 두개골 «수술 도해»라 scale 확대로 가장자리를 자르면 안 된다.
      대신 라벨바 색만 한 단 내린다. 확대는 임상 자료가 아닌 약속 섹션 인물컷에만 건다.
   -------------------------------------------------------------------------- */
.fs-p-59 .fs-nose-head h2,
.fs-p-59 .fs-sec-head__title { position: relative; }

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

.fs-p-59 .fs-contour-card .fs-labelbar { transition: background-color var(--fs-dur) var(--fs-ease); }
.fs-p-59 .fs-contour-promise__fig { overflow: hidden; }
.fs-p-59 .fs-contour-promise__fig img { transition: transform var(--fs-dur-slow) var(--fs-ease-out); }

/* 카드 전체가 링크다(<a class="fs-card">). + 버튼은 <span> 으로 내려 중첩 앵커를 피했으므로
   fs.css:? 의 `.fs-plusbtn:hover` 가 더는 안 걸린다 — 호버·포커스를 카드에서 옮겨 준다. */
.fs-p-59 a.fs-contour-card:focus-visible .fs-plusbtn,
.fs-p-59 a.fs-contour-card:focus-visible .fs-labelbar { background: var(--fs-teal-dk); }

@media (hover: hover) and (pointer: fine) {
  .fs-p-59 .fs-contour-card:hover .fs-labelbar { background: var(--fs-teal-dk); }
  .fs-p-59 a.fs-contour-card:hover .fs-plusbtn { background: var(--fs-teal-dk); }
  .fs-p-59 .fs-contour-promise__fig:hover img { transform: scale(1.045); }
}

/* --- 10. reduced-motion — 새로 넣은 전환만 끈다 (레이아웃은 원래 동일) --- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-59 .fs-contour-zone__hot { transition: none !important; }
  .fs-p-59 .fs-nose-head h2::after,
  .fs-p-59 .fs-sec-head__title::after { transform: scaleX(1) !important; transition: none !important; }
  .fs-p-59 .fs-contour-card .fs-labelbar { transition: none !important; }
  .fs-p-59 .fs-contour-promise__fig img { transform: none !important; transition: none !important; }

  /* fs.css 는 reduced-motion 에서 코버플로우 슬라이드를 transform:none 으로 눕힌다.
     그러면 모션을 끈 사용자만 다른 화면(평면 필름스트립)을 보게 된다.
     정지 상태의 3D 원근은 '모션'이 아니므로 그대로 두고, 움직임(트랜지션)만 끈 상태를
     유지한다 — 이렇게 해야 모션 on/off 렌더가 픽셀 단위로 같아진다. */
  .fs-p-59 .fs-contour-gallery.fs-carousel--cover .fs-carousel__slide {
    transform: rotateY(var(--fs-cover-rot)) translateZ(var(--fs-cover-z)) !important;
  }
  .fs-p-59 .fs-contour-gallery.fs-carousel--cover .fs-carousel__slide.is-prev {
    transform: rotateY(calc(-1 * var(--fs-cover-rot))) translateZ(var(--fs-cover-z)) !important;
  }
  .fs-p-59 .fs-contour-gallery.fs-carousel--cover .fs-carousel__slide.is-active {
    transform: rotateY(0deg) translateZ(0) !important;
  }
}

/* ==========================================================================
   2026-09-11 승인자 지시 「히어로 속 모델이 너무 안 보여 — zoom out 하거나 올려서 얼굴이 안 잘리게」
   cover 풀블리드는 폭 주도라 1280 에서는 머리가 헤더에 먹히고 2560 에서는 크롭이 더 내려가
   얼굴이 잘렸다(object-position 의 % 값은 넘침에 비례해 폭마다 다른 곳을 보여 준다).
   → «줌아웃»: 사진 상자를 원본 비율(1.791) 그대로 히어로 높이에 맞춰 오른쪽에 붙인다.
     상자 비율 = 원본 비율이라 cover 가 사실상 contain — 어느 폭에서도 사진이 통째로 보인다.
     비어 있는 왼쪽은 히어로 배경색(사진 왼변 실측 #FDF3E2)이 채우고, 사진 왼변 16% 를 마스크로
     녹여 이음매를 없앤다. 56 의 «오른쪽 사진 / 왼쪽 카피» 구도와 같은 구조가 된다.
   우측 오프셋 60px — 원본에서 얼굴이 우변에 붙어 있어 어느 폭에서도 고정 퀵바(우측 70px) 뒤로
   들어갔다. 사진을 그만큼 왼쪽으로 물려 얼굴을 퀵바 앞으로 낸다(1280 실측 확인).
   높이·모바일(<1024) 스택 배치는 그대로다.
   ========================================================================== */
@media (min-width: 1024px) {
  .fs-p-59 .fs-contour-hero { background: #FDF3E2; }
  .fs-p-59 .fs-contour-hero .fs-hero__bg {
    inset-block-start: 0px;
    height: calc(100% - 0px);
    inset-inline-start: auto; inset-inline-end: 60px;
    width: calc((clamp(520px, 380px + 12vw, 720px) - 0px) * 1.7910);
  }
  .fs-p-59 .fs-contour-hero .fs-hero__bg picture,
  .fs-p-59 .fs-contour-hero .fs-hero__bg img { width: 100%; height: 100%; }
  .fs-p-59 .fs-contour-hero .fs-hero__bg img {
    object-fit: cover;
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 86%, transparent 100%);
  }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 윤곽성형 = 아이보리 #F1EADC (fs.css «카테고리 틴트» 블록 + body.fs-cat-contour)
   공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개(연한색 #FBF9F4)·글자 후광을 정한다. 여기서는 사진에 맞춘 «위치» 만.
   사진: i2i «인물·프레이밍 그대로, 왼쪽 #F1EADC → 모델 뒤 연한 민트 #DFF1E8 글로우(61 의 원래 배경 계열, 승인자 지시),
   gradually … wide feathered falloff, no split» → hero-full-duo(-mo).jpg (모바일은 데스크톱 결과의 크롭). 모델 x 65~91% → 상자 기준 왼→오 스크림(0 @58%).
   승인자 「허브 모델은 위치만(크기는 두고)」 — 09-11 상자(우측 60px 오프셋)에서 머리 중심이 83.7vw 였다. 81 기준 66.7vw 로:
   left = 66.7vw − (0.78 × 상자폭 1.791H) = 66.7vw − 1.397×히어로높이 → 1920 에서 428px(상자 1092 → 428~1520). 세로는 두었다 —
   상자 높이 = 히어로라 크라운(153)을 올리려면 사진 아래를 잘라야 하고, 사진 바닥이 몸통이라 그 아래 바탕이 드러난다.
   ========================================================================== */

@media (min-width: 1024px) {
  .fs-p-59 .fs-contour-hero .fs-hero__bg {
    inset-inline-end: auto;
    inset-inline-start: calc(66.667vw - 1.397 * clamp(520px, 380px + 12vw, 720px));
  }
}
.fs-p-59 .fs-contour-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) 27%, rgba(var(--fs-cat), .50) 45%, rgba(var(--fs-cat), 0) 58%);
}
@media (max-width: 1023px) {
  .fs-p-59 .fs-contour-hero .fs-hero__bg::after { content: none; }
  .fs-p-59 .fs-contour-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}


/* ==========================================================================
   ▼▼▼ 2026-09-21 · 승인자 「코성형·포유리프팅·윤곽성형·바디성형 히어로 통일」 — 규정 = 81 코재수술 포맷.
   영문 시술명 킥커 → 한글 제목 → 줄 → 리드(기존 한국어 문구). 값은 81.css 1절:
   킥커 21/500/.02em(틸) · 제목 58/700/1.22 · 요소 간격 10px · 줄 아래 8px · 리드 --fs-t-lead/1.5/#111.
   사진·카피 상자 위치·스크림은 그대로 둔다(33 선례 「모델 위치는 그대로 텍스트 부분만」).
   줄 요소의 폭(48~72)·두께·색은 fs.css:3485 정본 규칙이 정한다 — 여기서는 아래 여백만 준다.
   ========================================================================== */
.fs-p-59 .fs-contour-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-59 .fs-contour-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-59 .fs-contour-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-59 .fs-contour-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-59 .fs-contour-hero .fs-contour-hero__lead {
  max-width: 34em; font-size: var(--fs-t-lead); font-weight: 400; line-height: 1.5; color: var(--fs-ink);
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/767px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-59-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 소개 리드 <br> 문장 블록 1곳(360 「좌우됩니다.」 외톨이). nbsp 1(히어로 「얼굴 완성」 — 360 「완성」 혼자). 약속 제목 «형광 칸 + 드립니다» 한 덩어리(§7-19).
   · balance: 소개 주석 · 카드 설명 · 셀렉터 리드·본문 · 갤러리 리드 · 약속 설명 · 주의문. 갤러리 라벨바는 코버플로우라 측정값이 회전 상태 — 손대지 않음.
   · 윤곽 시술 안내 3장 <600: 1열 «정사각 도해 + 흰 패널» 세로(장당 ≈460px) → §2 B «도해 좌 42% · 제목·설명 우» 행.
     라벨바는 사진 폭의 42% 짜리 떠 있는 바라 134px 도해에서는 56px 가 된다 → 행에서는 도해 폭 전체.
   ========================================================================== */
.fs-p-59 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-59 .fs-contour-intro__note,
.fs-p-59 .fs-contour-card .fs-card__desc,
.fs-p-59 #spec .fs-nose-lead,
.fs-p-59 #spec .fs-body,
.fs-p-59 #gallery .fs-nose-lead,
.fs-p-59 .fs-contour-promise .fs-card__desc,
.fs-p-59 .fs-contour-promise__note { text-wrap: balance; }
.fs-p-59 .fs-p59-keep { white-space: nowrap; }
@media (max-width: 599px) {
  .fs-p-59 .fs-contour-card { grid-template-columns: 42% minmax(0, 1fr); align-items: stretch; }
  .fs-p-59 .fs-contour-card__media { align-self: center; }
  .fs-p-59 .fs-contour-card .fs-labelbar { width: 100%; justify-content: center; padding-inline: var(--fs-sp-2); }
  .fs-p-59 .fs-contour-card .fs-card__panel { align-content: center; gap: var(--fs-sp-2); padding: var(--fs-sp-4) var(--fs-sp-5); }
  .fs-p-59 .fs-contour-card .fs-card__desc { padding-inline-end: 0; }
}