/* ==========================================================================
   77 · 흉터수술 — 페이지 전용 CSS
   모든 셀렉터는 .fs-p-77 스코프. 색은 --fs-* 토큰만 사용한다.
   ========================================================================== */

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

/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-77 .fs-scar-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. 0% 면 1920 에서 머리끝이 y=221 이라 헤더 띠(100px) 아래가 넓게 빈다.
   15% 로 내려 위쪽을 잘라내면 머리끝이 y≈173 으로 올라와 형제 페이지 143(≈178)과 맞는다. */
.fs-p-77 .fs-scar-hero .fs-hero__bg img { object-position: 50% 15%; }
.fs-p-77 .fs-scar-hero .fs-hero__copy {
  max-width: min(100%, 50vw);
  gap: clamp(12px, 9.6px + 0.673vw, 22px);
  justify-items: start; text-align: start;
}
.fs-p-77 .fs-scar-hero .fs-hero__kicker {
  color: var(--fs-teal-dk);
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.fs-p-77 .fs-scar-hero .fs-hero__title {
  color: var(--fs-ink);
  font-size: var(--fs-t-h1);
  line-height: 1.2;
}
.fs-p-77 .fs-scar-hero__rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--fs-teal);
}

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

/* --- 2. .fs-scar-types — 흉터의 종류 5종 원형 타일 ---------------------- */
.fs-p-77 .fs-scar-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-77 .fs-scar-types__item {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--fs-sp-4);
  text-align: center;
  border: 2px solid var(--fs-teal);
  border-radius: var(--fs-radius-round);
  background: var(--fs-white);
  font-size: var(--fs-t-lead);
  font-weight: 600;
  color: var(--fs-ink);
  line-height: 1.35;
}
.fs-p-77 .fs-scar-types__item:nth-child(odd) {
  background: var(--fs-teal-text);
  border-color: var(--fs-teal-text);
  color: var(--fs-on-dark);
}
@media (max-width: 599px) {
  /* 5개 중 마지막 한 칸이 혼자 좌측에 남는 것을 가운데로 */
  .fs-p-77 .fs-scar-types__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--fs-gap-card) / 2);
  }
}
@media (min-width: 600px) {
  .fs-p-77 .fs-scar-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-p-77 .fs-scar-types { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- 3. .fs-scar-spec — 좌 수술실 사진 / 우 수술정보 표 ----------------- */
.fs-p-77 .fs-scar-spec {
  display: grid;
  gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-block-start: var(--fs-gap-title);
}
/* 틸트 호스트(__fig)와 기울어지는 판(__plate)을 나눈다 — 판 안에 사진과
   라벨바가 함께 들어가야 호버에서 바가 사진을 두고 떨어지지 않는다.
   (57 의 .fs-nose-dz__fig 가 같은 구조다: 도해 + figcaption 이 한 inner) */
.fs-p-77 .fs-scar-spec__fig { display: grid; }
.fs-p-77 .fs-scar-spec__plate { display: grid; }
.fs-p-77 .fs-scar-spec__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.fs-p-77 .fs-scar-spec__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.fs-p-77 .fs-scar-spec__label {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-sp-1);
}
.fs-p-77 .fs-scar-spec__label img { width: 30px; height: 30px; flex: 0 0 auto; }
.fs-p-77 .fs-scar-spec__table td { font-weight: 600; color: var(--fs-ink); }
/* 승인자 지시 — 표 안 글자를 가운데로. fs.css:886 의 `text-align: start` 를 덮는다.
   라벨 6개가 전부 네 글자라 아이콘 묶음(inline-flex)을 그냥 가운데로 두면 세로로 맞는다. */
.fs-p-77 .fs-scar-spec__table th,
.fs-p-77 .fs-scar-spec__table td { text-align: center; }
@media (min-width: 1024px) {
  /* 표가 사진보다 길어 좌측 아래가 비었다 — 사진을 표 높이에 맞춰 늘린다 */
  .fs-p-77 .fs-scar-spec {
    grid-template-columns: minmax(0, 440fr) minmax(0, 940fr);
    align-items: stretch;
  }
  .fs-p-77 .fs-scar-spec__plate { grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
  .fs-p-77 .fs-scar-spec__frame { aspect-ratio: auto; height: 100%; }
  .fs-p-77 .fs-scar-spec__label img { width: 40px; height: 40px; }
}

/* --- 4. .fs-scar-timing — 다크 스테이트먼트 밴드 ------------------------ */
.fs-p-77 .fs-scar-timing > .fs-split { position: relative; z-index: 1; }
.fs-p-77 .fs-scar-timing .fs-section__bg { opacity: 0.14; }
/* 고스트는 «질감»이지 «두번째 사진»이 아니다. 블러 없이 깔면 우측 절반에
   책상·모니터 윤곽이 그대로 읽혀 반쯤 가려진 사진 한 장으로 보인다.
   scale 은 블러가 만드는 가장자리 후광을 밴드 밖으로 밀어낸다. */
.fs-p-77 .fs-scar-timing .fs-section__bg img { filter: blur(24px); transform: scale(1.06); }
.fs-p-77 .fs-scar-timing__fig { margin: 0; align-self: stretch; }
.fs-p-77 .fs-scar-timing__fig img {
  width: 100%; height: 100%;
  min-height: clamp(260px, 216.2px + 12.18vw, 450px);
  object-fit: cover;
  display: block;
}
.fs-p-77 .fs-scar-timing__copy {
  padding: var(--fs-sp-12) var(--fs-gutter);
  display: grid;
  gap: var(--fs-sp-5);
  align-content: center;
}
.fs-p-77 .fs-scar-timing__copy .fs-lead { color: var(--fs-on-dark); }
.fs-p-77 .fs-scar-timing__rule {
  display: block;
  width: 48px; height: 2px;
  background: var(--fs-teal);
}
@media (min-width: 1024px) {
  .fs-p-77 .fs-scar-timing__copy { padding: var(--fs-sp-13) clamp(40px, 4vw, 80px); }
}

/* --- 5. .fs-scar-tx — 3컷 원형 시퀀스 캐러셀 (시그니처) ----------------- */
.fs-p-77 .fs-scar-tx__head { margin-block-end: clamp(30px, 25.62px + 1.218vw, 49px); }
.fs-p-77 .fs-scar-tx__viewport { overflow: hidden; }
.fs-p-77 .fs-scar-tx__track { display: flex; }
.fs-p-77 .fs-scar-tx__slide { display: grid; row-gap: var(--fs-sp-9); align-content: start; }
.fs-p-77 .fs-scar-tx__seq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--fs-sp-3);
}
.fs-p-77 .fs-scar-tx__fig {
  display: grid;
  align-content: start;
  width: 100%;
  max-width: 320px;
}
.fs-p-77 .fs-scar-tx__disc {
  display: block;
  aspect-ratio: 1;
  background: var(--fs-cream-2);
  border-radius: var(--fs-radius-round);
  overflow: hidden;
}
.fs-p-77 .fs-scar-tx__disc img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.fs-p-77 .fs-scar-tx__fig .fs-labelbar {
  min-height: clamp(28px, 22.92px + 1.410vw, 44px);
  width: 100%;
}
.fs-p-77 .fs-scar-tx__arrow {
  display: grid;
  place-items: center;
  color: var(--fs-teal-text);
  transform: rotate(90deg);
}
.fs-p-77 .fs-scar-tx__arrow svg { width: 26px; height: 26px; display: block; }
.fs-p-77 .fs-scar-tx__panel { display: grid; align-content: start; justify-items: start; gap: var(--fs-sp-3); }
.fs-p-77 .fs-scar-tx__title {
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--fs-ls-tight);
}
.fs-p-77 .fs-scar-tx__panel .fs-body { color: var(--fs-muted); }
.fs-p-77 .fs-scar-tx .fs-carousel__dots { margin-block-start: clamp(21px, 16.62px + 1.218vw, 40px); }
@media (min-width: 600px) {
  .fs-p-77 .fs-scar-tx__seq {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(6px, 2.4px + 1vw, 18px);
  }
  .fs-p-77 .fs-scar-tx__arrow { transform: none; margin-block-start: 22%; }
}
@media (min-width: 1024px) {
  /* LOCK 6 — 다음 슬라이드는 콘텐츠 폭(1920 기준 x1679) 밖으로 이어지다
     화면 끝에서 잘려야 한다. 잘림은 뷰포트가 아니라 html/body 의
     overflow-x:clip 에 맡긴다(뷰포트는 1440 을 유지해야 슬라이드 폭 계산이
     시안과 같아진다). 57 의 .fs-nose-tx__viewport 와 같은 처방이다. */
  .fs-p-77 .fs-scar-tx__viewport { overflow: visible; }
  .fs-p-77 .fs-scar-tx__slide {
    grid-template-columns: minmax(0, 900fr) minmax(0, 460fr);
    column-gap: clamp(24px, 0.8px + 2.4vw, 46px);
    row-gap: 0;
  }
  .fs-p-77 .fs-scar-tx__panel { align-content: center; padding-block-end: var(--fs-sp-10); }
}

/* --- 6. .fs-scar-cut — 절개선·봉합선 비교 (시그니처) -------------------- */
.fs-p-77 .fs-scar-cut {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-col);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-77 .fs-scar-cut__col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fs-sp-3);
  align-items: start;
}
.fs-p-77 .fs-scar-cut__name { grid-column: 1 / -1; justify-self: start; }
.fs-p-77 .fs-scar-cut__fig { display: grid; }
.fs-p-77 .fs-scar-cut__box {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--fs-white);
}
.fs-p-77 .fs-scar-cut__box img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
  .fs-p-77 .fs-scar-cut { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 7. .fs-scar-feat — 사진 + 룰 카드 (포시즌 흉터수술 특징) ----------- */
.fs-p-77 .fs-scar-feats { margin-block-start: var(--fs-gap-title); }
.fs-p-77 .fs-scar-feat { padding: 0; align-items: stretch; }
.fs-p-77 .fs-scar-feat__fig { display: grid; margin: 0; }
.fs-p-77 .fs-scar-feat__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.fs-p-77 .fs-scar-feat__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-p-77 .fs-scar-feat__body {
  display: grid;
  gap: var(--fs-sp-2);
  align-content: center;
  padding: var(--fs-sp-6) var(--fs-sp-5) var(--fs-sp-7);
}
.fs-p-77 .fs-scar-feat__body .fs-card__title { line-height: 1.35; }
/* 번호 열이 auto 라 «01»(27.9px)과 «04»(32.6px)의 폭 차이가 그대로 사진 열과
   본문 열을 밀어 4장의 열이 서로 어긋났다. Pretendard 서브셋에 tnum 이 있다. */
.fs-p-77 .fs-scar-feat .fs-card__num { font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) {
  /* 카드 패딩이 0 이라 번호만 좌측 끝에 붙어 제목과 어긋났다 */
  .fs-p-77 .fs-scar-feat .fs-card__num { padding: var(--fs-sp-5) var(--fs-sp-5) 0; }
  .fs-p-77 .fs-scar-feat__body { padding-block-start: var(--fs-sp-2); }
}
.fs-p-77 .fs-scar-feat__note {
  margin-block-start: var(--fs-sp-8);
  /* --fs-muted-2(#7D7D7D)는 크림 밴드 위에서 3.67:1 로 AA 미달이다.
     fs.css:2716 이 보정한 --fs-muted(#6E6E6E)는 크림 위 4.54:1 로 통과한다. */
  color: var(--fs-muted);
  font-size: var(--fs-t-xs);
}
@media (min-width: 1024px) {
  .fs-p-77 .fs-scar-feat {
    grid-template-columns: minmax(0, 300fr) auto minmax(0, 330fr);
    column-gap: var(--fs-sp-5);
    align-items: center;
  }
  .fs-p-77 .fs-scar-feat__body { padding: var(--fs-sp-6) var(--fs-sp-5) var(--fs-sp-6) 0; }
}

/* --- 8. 타이포 리듬 — 섹션 제목 뒤에 그어지는 70px 틸 선 --------------- */
.fs-p-77 .fs-center > .fs-h2,
.fs-p-77 .fs-nose-head > h2,
.fs-p-77 .fs-sec-head__title { position: relative; }

.fs-p-77 .fs-center > .fs-h2::after,
.fs-p-77 .fs-nose-head > h2::after,
.fs-p-77 .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;
  /* ★ 기본은 「그어진 상태」다. «.is-in 이면 보이기» 로 짜면 첫 화면 제목의
     선이 영원히 안 그어진다 — fs.js 는 첫 화면 대상에 .fs-reveal 클래스
     자체를 붙이지 않는다(fs.js:222 의 inFirstView 필터). */
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
.fs-p-77 .fs-center > .fs-h2::after { margin-inline: auto; transform-origin: center; }

/* 초기 은닉은 fs.js 가 실제로 리빌 대상으로 표시한 것에만 건다.
   reduced-motion 이면 :root.fs-js 자체가 안 붙어(fs.js:52) 선은 처음부터 그어져 있다. */
:root.fs-js .fs-p-77 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-77 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --- 9. 호버 — 프레임은 고정, 사진만 움직인다 -------------------------- */
/* 대상은 «사진»뿐이다. .fs-scar-cut__box 의 의학 도해는 「같은 배율로
   비교했습니다」라는 본문과 직결돼 있어 배율을 건드리지 않는다. */
.fs-p-77 .fs-scar-spec__frame img,
.fs-p-77 .fs-scar-feat__frame img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-77 .fs-scar-spec__fig:hover .fs-scar-spec__frame img,
  .fs-p-77 .fs-scar-feat:hover .fs-scar-feat__frame img { transform: scale(1.045); }
}

/* --- 10. reduced-motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fs-p-77 .fs-scar-tx__arrow { transition: none; }
  .fs-p-77 .fs-center > .fs-h2::after,
  .fs-p-77 .fs-nose-head > h2::after,
  .fs-p-77 .fs-sec-head__title::after { transform: scaleX(1); transition: none; }
  .fs-p-77 .fs-scar-spec__frame img,
  .fs-p-77 .fs-scar-feat__frame img { transition: none; }
  .fs-p-77 .fs-scar-spec__fig:hover .fs-scar-spec__frame img,
  .fs-p-77 .fs-scar-feat:hover .fs-scar-feat__frame img { transform: none; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-77-1022-mo · 실측 _design/momeasure.py 360/390/540/768/1024/1440/1920.
   · 히어로 §1-8 20/30/60 — <1024 스택 블록 제자리 수정(페이드 72 → 60).
   · 정의 리드: 한 문장을 PC 줄 경계에서 끊은 `<br>` → `<br class="fs-pc-only">`(§1-7) + balance. 360 에서 「것으로」 가 혼자 셋째 줄이었다. 번역 키 그대로.
   · balance(전 폭): 시기 리드 · 본문 · 섹션 부제 · 술식 리드 · 특징 카드 제목 · 주의문 · 주소 — 360 「방법」「비교했습니다.」「접근과 치료」「진행」「주의가 필요합니다.」, 1440 카드 제목 「노하우」「수술 진행」.
   ========================================================================== */
.fs-p-77 .fs-lead,
.fs-p-77 .fs-body,
.fs-p-77 .fs-sec-head__sub,
.fs-p-77 .fs-card__title,
.fs-p-77 .fs-scar-feat__note,
.fs-p-77 .fs-address { text-wrap: balance; }
:root:not(:lang(ko)) .fs-p-77 br.fs-pc-only { display: none; }

/* 배치(§2 B) — 포시즌 흉터수술 특징 4장: 600 미만은 사진(3:2)+라벨바 위 · 번호 · 제목이 세로로 쌓여 장당 ≈330px →
   «사진+라벨바 왼쪽 42% · 번호와 제목 오른쪽» 행. 라벨바는 사진 바로 아래 그대로(figure 째 왼쪽 열 · LOCK 2).
   제목은 오른쪽 칸(≈165px)에 맞게 본문 크기(§2 H). 600~1023(2열 카드)·≥1024(가로 행)는 그대로. */
@media (max-width: 599px) {
  .fs-p-77 .fs-scar-feat {
    grid-template-columns: min(42%, 220px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--fs-sp-5);
    align-items: center;
    align-content: center;
  }
  .fs-p-77 .fs-scar-feat__fig { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .fs-p-77 .fs-scar-feat .fs-card__num { grid-column: 2; grid-row: 1; align-self: end; padding: 0; }
  .fs-p-77 .fs-scar-feat__body { grid-column: 2; grid-row: 2; align-self: start; padding: var(--fs-sp-1) var(--fs-sp-5) 0 0; }
  .fs-p-77 .fs-scar-feat__body .fs-card__title { font-size: var(--fs-t-body); }
}