/* ==========================================================================
   45 · 복합트임 — 페이지 전용 CSS
   · 모든 셀렉터는 .fs-p-45 스코프 안에만 둔다.
   · 색은 --fs-* 토큰만. 새 hex 없음.
   · 전용 컴포넌트: fs-combo-def / fs-combo-spec / fs-combo-case /
                    fs-combo-step / fs-combo-merit
   ========================================================================== */

/* --- 0. 히어로 — 1mm 계열 «투명 헤더 + 우측 모델 / 좌측 잉크 카피» ------- */
/* 2026-08-28 · 다크 수술실 풀블리드를 걷어내고 81 과 같은 밝은 모델 히어로로 바꿨다.
   헤더를 흰 막대로 세우지 않고 사진 위에 얹는다. 히어로 상단은 전 폭이 아이보리라
   흰 글자가 아니라 «잉크 글자» 를 쓴다. 모델 머리는 사진 높이의 17% 아래에서
   시작하므로 헤더 띠(최대 100px)에 안 걸린다. */
.fs-p-45 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색 — 사진 로딩 전 번쩍임을 막고
   qa.py 가 배경을 흰 body 로 오판하지 않게 한다. */
.fs-p-45 .fs-page--overlay { background: #FEF5E2; }
.fs-p-45 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-45 .fs-header--overlay::before { content: none; }
.fs-p-45 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-45 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-45 .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-45 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-45 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-45 .fs-util__sep { opacity: .35; }

.fs-p-45 .fs-combo-hero { background: #FEF5E2; }
/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-45 .fs-combo-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 가로 크롭은 «위 고정» — 가운데로 두면 모델 머리가 헤더 띠로 올라온다 */
.fs-p-45 .fs-combo-hero .fs-hero__bg img { object-position: 50% 0%; }
.fs-p-45 .fs-combo-hero .fs-hero__copy {
  justify-items: start; text-align: start; max-width: 40rem; gap: var(--fs-sp-3);
}
.fs-p-45 .fs-combo-hero .fs-hero__kicker,
.fs-p-45 .fs-combo-hero .fs-hero__title,
.fs-p-45 .fs-combo-hero__lead { color: var(--fs-ink); }
.fs-p-45 .fs-combo-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-45 .fs-combo-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22;
}
.fs-p-45 .fs-combo-hero__rule {
  display: block; width: 56px; height: 2px;
  margin-block: var(--fs-sp-2);
  background: var(--fs-teal);
}
.fs-p-45 .fs-combo-hero__lead { max-width: 34em; color: var(--fs-ink-soft); }

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

/* --- 1. fs-combo-def — 뒷트임 ＋ 눈꼬리내리기 = 복합트임 합성 도해 ------- */
.fs-p-45 .fs-combo-def { display: grid; gap: clamp(6px, 5.1px + 0.26vw, 10px); }
.fs-p-45 .fs-combo-def__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(8px, 5.1px + 0.83vw, 21px);
}
.fs-p-45 .fs-combo-def__fig { display: grid; }
.fs-p-45 .fs-combo-def__fig img { display: block; width: 100%; height: auto; }
.fs-p-45 .fs-combo-def__plus {
  display: grid; place-items: center;
  width: clamp(30px, 26.5px + 0.96vw, 45px); aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal-dk); color: var(--fs-white);
}
.fs-p-45 .fs-combo-def__plus svg { width: 44%; height: 44%; }
.fs-p-45 .fs-combo-def__sum { min-height: clamp(34px, 30.5px + 0.96vw, 49px); }

.fs-p-45 .fs-combo-about__col .fs-h2 { margin-block-start: clamp(9px, 7.5px + 0.42vw, 16px); }
.fs-p-45 .fs-combo-about__col .fs-quote { margin-block-start: clamp(14px, 11.2px + 0.77vw, 26px); }
.fs-p-45 .fs-combo-about__col .fs-body { margin-block-start: clamp(12px, 10.2px + 0.51vw, 20px); color: var(--fs-muted); }

/* --- 2. 정의 섹션 체크 3종 ---------------------------------------------- */
.fs-p-45 .fs-combo-checks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: clamp(30px, 23.5px + 1.79vw, 58px);
}
.fs-p-45 .fs-combo-check { display: grid; justify-items: center; align-content: start; gap: var(--fs-sp-4); }
.fs-p-45 .fs-combo-check__ic { display: block; width: clamp(112px, 102.8px + 2.56vw, 152px); height: clamp(78px, 71.6px + 1.79vw, 106px); }
.fs-p-45 .fs-combo-check__ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fs-p-45 .fs-combo-check .fs-labelbar {
  width: 100%; min-height: clamp(44px, 40.5px + 0.96vw, 59px);
  line-height: 1.35; padding-block: var(--fs-sp-1);
}
@media (max-width: 599px) {
  .fs-p-45 .fs-combo-checks { grid-template-columns: minmax(0, 1fr); }
}

/* --- 3. fs-combo-spec — SURGERY INFORMATION 카드 (하단 풀폭 라벨바) ----- */
.fs-p-45 .fs-combo-specs { margin-block-start: clamp(30px, 25.4px + 1.28vw, 50px); }
.fs-p-45 .fs-combo-spec {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%;
  background: var(--fs-white); text-align: center;
}
.fs-p-45 .fs-combo-spec__body {
  display: grid; justify-items: center; align-content: center;
  gap: clamp(13px, 10.2px + 0.77vw, 25px);
  padding: clamp(22px, 18.3px + 1.03vw, 38px) var(--fs-sp-5);
}
.fs-p-45 .fs-combo-spec__ic { display: block; width: clamp(78px, 68.8px + 2.56vw, 118px); height: clamp(78px, 68.8px + 2.56vw, 118px); }
.fs-p-45 .fs-combo-spec__ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fs-p-45 .fs-combo-spec__val { font-size: var(--fs-t-lead); font-weight: 600; line-height: 1.4; }
.fs-p-45 .fs-combo-spec .fs-labelbar { min-height: clamp(34px, 31.7px + 0.64vw, 44px); }

/* --- 4. fs-combo-case — 복합트임이 필요한 경우 ------------------------- */
.fs-p-45 .fs-combo-indication { display: grid; row-gap: clamp(30px, 25.4px + 1.28vw, 50px); }
.fs-p-45 .fs-combo-indication__photo { display: grid; align-content: start; }
.fs-p-45 .fs-combo-indication__photo img { display: block; width: 100%; height: auto; }
.fs-p-45 .fs-combo-cases {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card); align-content: start;
}
.fs-p-45 .fs-combo-case {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%;
  background: var(--fs-white); border-block-start: 2px solid var(--fs-teal);
}
.fs-p-45 .fs-combo-case__body {
  display: grid; justify-items: center; align-content: center; gap: var(--fs-sp-5);
  padding: clamp(18px, 15.2px + 0.77vw, 30px) var(--fs-sp-5);
}
.fs-p-45 .fs-combo-case__ic { display: block; width: clamp(120px, 108.5px + 3.21vw, 170px); height: clamp(84px, 76.0px + 2.24vw, 119px); }
.fs-p-45 .fs-combo-case__ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fs-p-45 .fs-combo-case .fs-labelbar {
  min-height: clamp(52px, 48.5px + 0.96vw, 67px);
  line-height: 1.35; padding-block: var(--fs-sp-1);
}
@media (max-width: 599px) {
  .fs-p-45 .fs-combo-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .fs-p-45 .fs-combo-indication {
    grid-template-columns: minmax(0, 420fr) minmax(0, 940fr);
    column-gap: clamp(30px, -6.9px + 2.56vw, 60px); row-gap: 0; align-items: start;
  }
}

/* --- 5. fs-combo-step — 수술방법 4단계 사진 스트립 --------------------- */
.fs-p-45 .fs-combo-steps {
  --fs-combo-step-gap: clamp(14px, 8.9px + 1.41vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; row-gap: var(--fs-combo-step-gap);
  margin-block-start: clamp(32px, 26.5px + 1.54vw, 56px);
}
.fs-p-45 .fs-combo-step { display: grid; align-content: start; width: 100%; max-width: 436px; }
.fs-p-45 .fs-combo-step__fig { position: relative; display: grid; }
.fs-p-45 .fs-combo-step__fig img { display: block; width: 100%; height: auto; }
.fs-p-45 .fs-combo-step__txt {
  font-size: var(--fs-t-lead); line-height: 1.5; text-align: center;
  margin-block-start: clamp(12px, 10.2px + 0.51vw, 20px);
}
.fs-p-45 .fs-combo-step__arrow {
  position: absolute; z-index: 1;
  inset-block-start: 0; inset-inline-start: 50%;
  margin-block-start: calc(-1 * var(--fs-combo-step-gap) / 2);
  transform: translate(-50%, -50%) rotate(90deg);
  display: grid; place-items: center;
  width: clamp(24px, 20.6px + 0.96vw, 39px); aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-ink); color: var(--fs-white);
}
.fs-p-45 .fs-combo-step__arrow svg { width: 46%; height: 46%; }
@media (min-width: 900px) {
  .fs-p-45 .fs-combo-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--fs-combo-step-gap); row-gap: 0; align-items: start;
  }
  /* 사진 비율이 436:232 이므로 사진의 세로 중심 = figure 인라인 폭의 26.6%.
     퍼센트 마진은 컨테이닝 블록의 인라인 크기를 기준으로 하므로 폭이 변해도 따라온다. */
  .fs-p-45 .fs-combo-step__arrow {
    inset-inline-start: 0;
    margin-block-start: 26.6%;
    margin-inline-start: calc(-1 * var(--fs-combo-step-gap) / 2);
    transform: translate(-50%, -50%);
  }
}

/* --- 6. 다크 비교 밴드 (시그니처) -------------------------------------- */
.fs-p-45 .fs-combo-cmp-sec { padding-block: var(--fs-sec-pb); }
.fs-p-45 .fs-combo-cmp-title { line-height: 1.19; }
.fs-p-45 .fs-combo-hl { color: var(--fs-ink); padding: 2px 10px; line-height: 1; }
.fs-p-45 .fs-combo-cmp__cap { width: 100%; }
.fs-p-45 .fs-combo-cmp__cap--gray { background: var(--fs-fill-gray); }
.fs-p-45 .fs-combo-cmp__note {
  margin-block-start: clamp(20px, 17.2px + 0.77vw, 32px);
  font-size: clamp(16px, 15.8px + 0.06vw, 17px); line-height: 1.5; text-align: center;
}
/* 다크 밴드가 밋밋해지지 않도록 깔아 두는 고스트. 밴드색으로 눌러 구운 JPEG 이라
   CSS filter 를 쓰지 않는다. .fs-section__bg 와 같은 z-index 0 이고 DOM 뒤라 위에 얹힌다. */
.fs-p-45 .fs-combo-ghost {
  display: none; position: absolute; z-index: 0; pointer-events: none;
  inset-block-end: 0; inset-inline-start: 0;
  width: clamp(260px, 80px + 15vw, 470px); height: auto;
}
@media (min-width: 1200px) { .fs-p-45 .fs-combo-ghost { display: block; } }

/* --- 7. fs-combo-merit — 포시즌만의 복합트임 (아이콘 룰 카드) ---------- */
.fs-p-45 .fs-combo-strength { display: grid; row-gap: clamp(30px, 25.4px + 1.28vw, 50px); }
.fs-p-45 .fs-combo-strength__photo { display: grid; align-content: start; }
.fs-p-45 .fs-combo-strength__photo img { display: block; width: 100%; height: auto; }
.fs-p-45 .fs-combo-merits { display: grid; gap: var(--fs-gap-card); align-content: start; }
.fs-p-45 .fs-combo-merit { background: var(--fs-white); align-content: start; }
.fs-p-45 .fs-combo-merit__head { display: flex; align-items: center; gap: var(--fs-sp-4); }
.fs-p-45 .fs-combo-merit__ic { flex: 0 0 auto; display: block; width: clamp(48px, 43.4px + 1.28vw, 68px); height: clamp(34px, 30.6px + 0.94vw, 48px); }
.fs-p-45 .fs-combo-merit__ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 600px) {
  .fs-p-45 .fs-combo-merits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* 범용 .fs-card--rule 의 PC 3열(auto/1fr/1.1fr)은 이 좁은 트랙에서 설명문이 눌린다.
     번호+제목 한 줄 / 설명 한 줄의 2열 배치로 확장한다. */
  .fs-p-45 .fs-combo-merit {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start; row-gap: var(--fs-sp-3);
    border-inline-start: 2px solid var(--fs-teal);
  }
  .fs-p-45 .fs-combo-merit .fs-card__desc { grid-column: 2; }
  .fs-p-45 .fs-combo-strength {
    grid-template-columns: minmax(0, 940fr) minmax(0, 420fr);
    column-gap: clamp(30px, -6.9px + 2.56vw, 60px); row-gap: 0; align-items: start;
  }
  .fs-p-45 .fs-combo-strength__photo { order: 2; }
  .fs-p-45 .fs-combo-strength__col { order: 1; }
}

/* --- 8. 모션 무효화 (새 모션을 넣지 않았지만 규약대로 최종 상태를 못박는다) */
@media (prefers-reduced-motion: reduce) {
  .fs-p-45 .fs-combo-step__arrow { transition: none; }
}

/* ==========================================================================
   V70 승격분 — 45 복합트임
   ========================================================================== */

/* --- V70-A. «5열 균등 → 비대칭 2행» 은 이 페이지에 적용하지 않는다 -------
   48 의 KEY POINT 5장은 「최적의 솔루션 제공」(총론) → 각론 이라는 위계가 있었고
   앞 2장이 모델 인물컷이라 16/10 크롭이 성립했다.
   45 의 #spec 5장은 수술시간·마취방법·실밥제거·내원치료·회복기간 —
   한 장의 스펙 시트를 이루는 대등한 다섯 사실이다. 여기서 POINT 01 을 와이드로
   올리면 「수술시간이 회복기간보다 중요하다」는 없는 위계를 날조하게 된다.
   게다가 다섯 칸의 그림은 전부 선화 아이콘(도해)이라 크롭 비율을 바꿀 대상이 없다.
   → 비대칭은 하지 않는다. 대신 아래 V70-B 로 «열 수만» 손본다. */

/* --- V70-B. 태블릿 고아 카드 제거 --------------------------------------
   fs.css 의 .fs-grid--5 는 600~1023 에서 2열이라 5장이 2/2/1 로 끊기고
   마지막 줄에 POINT 05 한 장만 왼쪽에 남는다.
   6트랙 위에 span 2 로 얹어 3+2 로 나누고, 뒷줄 2장을 가운데로 민다.
   순서·비율·위계는 그대로다(열 수만 바꾼다). */
@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-45 .fs-combo-specs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fs-p-45 .fs-combo-specs > li { grid-column: span 2; }
  .fs-p-45 .fs-combo-specs > li:nth-child(4) { grid-column: 2 / span 2; }
}

/* --- V70-C. 섹션 제목 뒤 짧은 틸 선 -------------------------------------
   ★ 초기 은닉을 :root.fs-js 로 통째로 걸면 안 된다. fs.js 는 첫 화면 안에 있던
   대상에는 .fs-reveal 클래스 자체를 붙이지 않으므로 «.is-in 이면 보이기» 로 짜면
   첫 화면 제목의 선이 영원히 안 그어진다.
   → 기본을 「그어진 상태」로 두고, fs.js 가 실제로 리빌 대상으로 표시한
     .fs-reveal 에만 초기 은닉을 건다.
   #compare 의 대제목(.fs-combo-cmp-title)과 sr-only 제목은 대상이 아니다. */
.fs-p-45 .fs-nose-head 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;
}
:root.fs-js .fs-p-45 .fs-nose-head h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-45 .fs-reveal:not(.is-in) .fs-nose-head h2::after {
  transform: scaleX(0);
  /* fs.js 가 첫 페인트 뒤에 .fs-reveal 을 붙이므로, 은닉 쪽에 트랜지션이 살아 있으면
     선이 1→0 으로 «그어졌다 지워지는» 역재생이 생긴다. 53 과 같은 처리다. */
  transition: none;
}

/* --- V70-D. 굵기 정규화 — <strong>/<b> 는 700 으로 못박는다 --------------
   UA 기본 bolder 는 상속 굵기에 따라 800/900 으로 튈 수 있다. */
.fs-p-45 strong,
.fs-p-45 b { font-weight: 700; }

/* --- V70-E. reduced-motion — 선은 그어진 상태로 확정 -------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-45 .fs-nose-head h2::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-45-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · SURGERY INFORMATION 5칸: <600 세로 스택(1,468px) → 2열 · 다섯째 전폭 — 46 트임성형(같은 .fs-combo-specs, 09-23)과 같은 처방(§2 A).
   · balance(전 폭): 수술방법 리드(「…장점이 / 있습니다.」) · 수술정보 리드 · 소개 인용·본문 · 포시즌만의 카드 설명·제목.
   ========================================================================== */
.fs-p-45 #method .fs-lead,
.fs-p-45 main .fs-nose-lead,
.fs-p-45 #about .fs-quote,
.fs-p-45 #about .fs-body,
.fs-p-45 #strength .fs-card__desc,
.fs-p-45 #strength .fs-card__title { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-45 .fs-combo-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-45 .fs-combo-specs > li:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }
}