/* ==========================================================================
   assets/page/46.css — [46] 트임 (앞·뒤·밑) 전용 확장
   전부 .fs-p-46 스코프. 색은 --fs-* 토큰만 쓴다(새 hex 0개).
   전용 컴포넌트
     .fs-canthoplasty-hero  오버레이 히어로(모델컷 좌 / 카피 우)
     .fs-canthoplasty-def   앞·뒤·밑 정의 카드 (도해 + 라벨바 + 정의문)
     .fs-canthoplasty-need  '필요한 경우' 도해 스트립 + 4열 대조표
     .fs-canthoplasty-tx    ★ 시그니처 — 술식 전환 캐러셀 (STEP 2×2 도해 그리드)
   ========================================================================== */

/* --- 1mm 계열 오버레이 헤더 (밝은 히어로용 «잉크» 변형) ------------------
   2026-08-28 · 흰 막대 헤더를 걷어내고 사진 위에 얹었다. fs.css 의
   .fs-header--overlay 는 «흰 글자 + 어두운 스크림» 전제(다크 히어로용)라
   히어로 상단이 전 폭 크림~민트인 이 페이지에서는 네 곳을 같이 뒤집어야 한다
   (53 · 81 과 같은 처방). */
.fs-p-46 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 렌더는 그대로지만
   사진 로딩 전 흰 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-46 .fs-page--overlay { background: #EDEDE4; }
.fs-p-46 .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-46 .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-46 .fs-gnb__link { font-weight: 400; }
.fs-p-46 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-46 .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-46 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-46 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-46 .fs-header--overlay .fs-allmenu { color: var(--fs-ink); }
.fs-p-46 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-46 .fs-util__sep { opacity: .35; }

/* --- A01 · 오버레이 히어로 (모델컷 «좌» / 카피 «우») ---------------------
   1mm 서브페이지가 «사진 좌 / 카피 우» 다. 81 은 그 축을 뒤집어 놨으므로
   이 페이지는 원본 축 그대로 가서 형제 페이지와 결이 갈리게 한다.
   에셋 hero-model.jpg 는 인물이 좌 44% 안에 들어가고 머리 위로 화면의 25% 가
   비어 있게 생성했다 — 그래서 투명 헤더 띠가 머리카락에 안 걸린다. */
.fs-p-46 .fs-canthoplasty-hero { background: #F2ECE0; }
/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다(57 은 .fs-nose-hero 로 해결) */
.fs-p-46 .fs-canthoplasty-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. «위 고정»(0%)이면 에셋의 머리 위 여백 297px 이 그대로 남아
   1920 에서 머리끝이 y=297 — 헤더 띠(100px) 아래로 200px 가 빈 화면이 된다.
   38% 로 내려 위쪽을 잘라내면 머리끝이 y≈177 로 올라와 형제 페이지 81(≈176)과 맞는다.
   더 내리면 헤더 띠에 머리카락이 걸린다. 1326px 미만은 세로가 딱 맞아 이 값이 무효다. */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=298 라 38% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-46 .fs-canthoplasty-hero .fs-hero__bg img { object-position: 50% 57%; }
.fs-p-46 .fs-canthoplasty-hero__copy { gap: var(--fs-sp-3); color: var(--fs-ink); }
.fs-p-46 .fs-canthoplasty-hero .fs-hero__kicker {
  font-family: var(--fs-font-en);
  font-size: clamp(14px, 12.6px + 0.39vw, 20px);
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--fs-teal-dk);
}
.fs-p-46 .fs-canthoplasty-hero .fs-hero__title {
  font-size: var(--fs-t-hero);
  font-weight: 700;
  line-height: 1.22;
  color: var(--fs-ink);
}
.fs-p-46 .fs-canthoplasty-hero__rule {
  display: block; width: 56px; height: 2px;
  margin-block: var(--fs-sp-2);
  background: var(--fs-teal);
}
.fs-p-46 .fs-canthoplasty-hero__lead { color: var(--fs-ink-soft); }

@media (min-width: 1024px) {
  /* 인물이 왼쪽 44% 를 차지하므로 카피를 컨테이너 오른쪽 끝으로 민다.
     460px 는 1024 에서도 인물(좌 450px)과 안 겹치는 최대 폭이다. */
  .fs-p-46 .fs-canthoplasty-hero__copy { width: min(100%, 460px); margin-inline-start: auto; }
}

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

/* --- A05 · 선언 + 3술식 아이콘 인덱스 ------------------------------------ */
.fs-p-46 .fs-canthoplasty-promise__copy { display: grid; align-content: center; }
.fs-p-46 .fs-canthoplasty-promise__title { margin-block-start: var(--fs-sp-3); }

/* --- A11 · 앞·뒤·밑 정의 카드 -------------------------------------------- */
.fs-p-46 .fs-canthoplasty-def .fs-card { display: grid; align-content: start; }
.fs-p-46 .fs-canthoplasty-def__fig { display: grid; }
.fs-p-46 .fs-canthoplasty-def__fig img { display: block; width: 100%; height: auto; }
.fs-p-46 .fs-canthoplasty-def__body {
  display: grid; gap: var(--fs-sp-3);
  padding-block-start: var(--fs-sp-5);
}
.fs-p-46 .fs-canthoplasty-def__title {
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: var(--fs-lh-head);
}
.fs-p-46 .fs-canthoplasty-def__title .fs-teal-fg { color: var(--fs-teal-text); }
/* fs.css 의 .fs-nose-dz__cards 는 모든 폭에서 3열 고정이라, 정의문이 든 카드는
   1023px 이하에서 두 글자씩 쪼개진다. 세로 스택으로 되돌린다. */
@media (max-width: 1023px) {
  .fs-p-46 .fs-canthoplasty-def .fs-nose-dz__cards { grid-template-columns: minmax(0, 1fr); }
  .fs-p-46 .fs-canthoplasty-def__fig img { max-width: 420px; margin-inline: auto; }
  .fs-p-46 .fs-canthoplasty-def__fig .fs-labelbar { max-width: 420px; margin-inline: auto; width: 100%; }
}

/* --- A21 · '필요한 경우' 도해 스트립 + 대조표 ---------------------------- */
.fs-p-46 .fs-canthoplasty-need__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 3.08px + 1.923vw, 40px);
  max-width: 900px;
  margin-block: var(--fs-gap-title) var(--fs-sp-9);
  margin-inline: auto;
}
.fs-p-46 .fs-canthoplasty-need__fig { display: grid; }
.fs-p-46 .fs-canthoplasty-need__fig img { display: block; width: 100%; height: auto; }
/* PC 에서는 아래 대조표의 3개 데이터 열과 도해를 정확히 맞춘다
   (표 1열 78px + 셀 좌우 패딩 --fs-sp-5) */
@media (min-width: 1024px) {
  .fs-p-46 .fs-canthoplasty-need__strip {
    max-width: none;
    margin-inline: 0;
    padding-inline-start: 78px;
    gap: 0;
  }
  .fs-p-46 .fs-canthoplasty-need__strip > li { padding-inline: var(--fs-sp-5); }
  .fs-p-46 .fs-canthoplasty-need__fig { max-width: 300px; }
}
.fs-p-46 .fs-canthoplasty-need__table { min-width: 680px; table-layout: fixed; }
.fs-p-46 .fs-canthoplasty-need__table th:first-child { width: 78px; }
/* 표가 화면보다 넓어 가로로 밀어 봐야 하는 폭에서만 안내한다 */
.fs-p-46 .fs-canthoplasty-need__scroll { display: none; }
@media (max-width: 767px) {
  .fs-p-46 .fs-canthoplasty-need__scroll { display: block; margin-block-start: var(--fs-sp-2); }
}
.fs-p-46 .fs-canthoplasty-need__table tbody th {
  font-family: var(--fs-font-en);
  font-weight: 700;
  color: var(--fs-teal-text);
  white-space: nowrap;
}
.fs-p-46 .fs-canthoplasty-need__table td { vertical-align: top; }
.fs-p-46 .fs-canthoplasty-need__table :is(th, td) { text-align: center; }
.fs-p-46 .fs-canthoplasty-need__table :is(th, td) + :is(th, td) { border-inline-start: 1px solid var(--fs-line); }
.fs-p-46 .fs-canthoplasty-need__table thead th + th { border-inline-start-color: rgba(255, 255, 255, .25); }

/* --- A17 · ★ 시그니처: 술식 전환 캐러셀 --------------------------------- */
.fs-p-46 .fs-canthoplasty-tx__head { align-items: start; }
/* 모바일은 fs.css:893 의 overflow:hidden 그대로. PC 처방은 파일 끝 「LOCK 6」 참조. */
.fs-p-46 .fs-canthoplasty-tx .fs-carousel__viewport { overflow: hidden; }
.fs-p-46 .fs-canthoplasty-tx__slide {
  display: grid;
  row-gap: var(--fs-sp-9);
  column-gap: clamp(24px, 12.6px + 3.17vw, 60px);
  align-items: start;
}
@media (min-width: 1024px) {
  .fs-p-46 .fs-canthoplasty-tx__slide {
    grid-template-columns: minmax(0, 760fr) minmax(0, 540fr);
    align-items: center;
  }
}
.fs-p-46 .fs-canthoplasty-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 3.08px + 1.923vw, 30px);
}
.fs-p-46 .fs-canthoplasty-step { display: grid; align-content: start; }
.fs-p-46 .fs-canthoplasty-step__fig { display: grid; }
.fs-p-46 .fs-canthoplasty-step__fig img { display: block; width: 100%; height: auto; }
.fs-p-46 .fs-canthoplasty-step__fig .fs-labelbar {
  min-height: clamp(34px, 30.3px + 1.03vw, 46px);
  line-height: 1.25;
}
.fs-p-46 .fs-canthoplasty-step__desc {
  padding-block-start: var(--fs-sp-3);
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
}
.fs-p-46 .fs-canthoplasty-tx__panel { display: grid; align-content: center; gap: var(--fs-sp-3); }
.fs-p-46 .fs-canthoplasty-tx__panel .fs-num { margin-block-end: var(--fs-sp-1); }
.fs-p-46 .fs-canthoplasty-tx__title {
  font-size: var(--fs-t-h2);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  letter-spacing: var(--fs-ls-tight);
}
.fs-p-46 .fs-canthoplasty-tx__lead { margin-block-start: var(--fs-sp-2); }
/* ★ 패널 글줄은 열 오른쪽 끝에 닿으면 안 된다.
   아래 「LOCK 6」 처방으로 1024px 이상에서 뷰포트가 overflow:visible 이라 «다음 슬라이드»가
   컨테이너 오른쪽 끝에서 곧바로 그려진다(--fs-slide-gap 기본 0). 슬라이드 폭 = 컨테이너 폭
   이므로 패널 열의 오른쪽 끝 = 컨테이너 오른쪽 끝 = 다음 슬라이드의 왼쪽 끝이고,
   문서 순서상 뒤에 오는 다음 슬라이드가 이 글줄 «위에» 그려진다.
   실측 1536px 에서 앞트임 리드 1행 끝 「시간이」가 다음 슬라이드 사진에 잘려 나갔다.
   (슬라이드 폭은 fs.js:554 가 clientWidth 로 계산하므로 뷰포트 폭·gap 을 건드리면 안 된다 —
   패널 «안쪽» 여백으로만 떨어뜨린다.) */
@media (min-width: 1024px) {
  .fs-p-46 .fs-canthoplasty-tx__panel { padding-inline-end: clamp(28px, 12.9px + 1.57vw, 58px); }
}

/* --- A26 뒤 CTA ---------------------------------------------------------- */
.fs-p-46 .fs-canthoplasty-cta { margin-block-start: var(--fs-gap-title); }

/* ==========================================================================
   진단·수정 패스 (2026-08-27) — 아래는 전부 이 라운드에서 추가한 것이다.
   ========================================================================== */

/* --- 1. A21 · 가로 스크롤 안내문 명도 대비 -------------------------------
   .fs-muted-2 (#7D7D7D) 는 fs.css:2599~ 의 AA 보정 밖이라 크림 밴드 위에서
   3.67:1 이었다(360px, 13px 글자). 같은 섹션의 ※ 주석과 같은 --fs-muted 로
   맞춘다(fs.css:2647 보정 후 #6E6E6E). */
.fs-p-46 .fs-canthoplasty-need__scroll { color: var(--fs-muted); }

/* --- 2. LOCK 6 · 캐러셀은 콘텐츠 폭 밖으로 흘려 잘리게 둔다 ---------------
   뷰포트를 1440 에서 잘라내면 「한 화면에 딱 맞는 캐러셀」이 되어 다음 슬라이드가
   x1679 에서 딱 끊긴다 — DESIGN_SYSTEM 6항이 명시적으로 금지하는 모양이다.
   확정 시안 57 의 .fs-nose-tx__viewport(fs.css:1543) 와 같은 처방:
   뷰포트 «폭» 은 1440 그대로 두고(fs.js:554 가 clientWidth 로 슬라이드 폭을
   계산하므로 폭을 건드리면 시안 수치가 어긋난다) 잘림만 html/body 의
   overflow-x:clip(fs.css:211·219)에 맡긴다. */
@media (min-width: 1024px) {
  .fs-p-46 .fs-canthoplasty-tx .fs-carousel__viewport { overflow: visible; }
  /* 2026-09-23 승인자 「전 슬라이드 텍스트가 튀어나와 가독성을 떨어뜨린다」 → A안.
     이 캐러셀은 슬라이드 오른쪽 열이 설명 글이라, 2·3번째 장에서 «지나간 장» 의 글줄이
     왼쪽 거터(1920 에서 240px)에 그대로 비쳤다. 왼쪽만 뷰포트 경계에서 자르고
     오른쪽 «다음 장» 흘림(LOCK 6 의 넘김 신호 — 사진·라벨바 조각)은 그대로 둔다.
     inset 의 음수 값은 위·아래·오른쪽으로 잘림 상자를 넓혀 준다(세로로는 안 자른다). */
  .fs-p-46 .fs-canthoplasty-tx .fs-carousel__viewport { clip-path: inset(-100vh -100vw -100vh 0); }
}

/* --- 3·4. A09 고스트 블러 · V70-B 다크 밴드 겹침 — 2026-09-22 삭제 --------
   병원 지시(pptx 슬라이드 8)로 #statement 섹션 자체가 없어져 두 처방 모두 고아가 됐다.
   회귀가 아니라 요소 삭제다. 원문은 backup-46-0922-pptx/46.css.bak 에 있다. */

/* --- 5. 모바일 캐러셀 화살표 정렬 ----------------------------------------
   fs.css:421 의 기본값은 justify-self:center 라 좌측정렬 제목·부제 아래에서
   화살표만 가운데로 떠 있었다. 57 의 처방(fs.css:1538)을 그대로 쓴다. */
@media (max-width: 1023px) {
  .fs-p-46 .fs-canthoplasty-tx__head .fs-sec-head__action { justify-self: start; }
}

/* --- 6. 제목 뒤 70px 틸 선 ----------------------------------------------
   ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다 —
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   ★ 선택자는 전부 클래스다(ID 를 열거하면 은닉 규칙이 명시도로 져서
     선이 «항상 그어진 채» 굳는다).
   .fs-sec-head__title 은 뺐다 — 부제가 13px 아래 붙어 있어 선이 제목과 부제를
   갈라놓는다. 나머지 셋은 뒤가 .fs-lead / 아이콘 타일이라 리듬이 살아난다. */
.fs-p-46 .fs-canthoplasty-promise__title,
.fs-p-46 .fs-nose-dz__text h2,
.fs-p-46 .fs-nose-head h2 { position: relative; }

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

/* --- 7. 호버 — 프레임은 고정, 사진만 움직인다 ----------------------------
   그림자는 쓰지 않는다(2차 규칙). 라벨바는 사진과 같이 커지면 글자가 흔들리므로
   색만 한 단계 내린다. 확대분은 프레임의 overflow:hidden 이 잘라내고,
   아래로 자란 부분은 문서 순서상 뒤에 오는 라벨바가 덮는다. */
.fs-p-46 .fs-canthoplasty-def__fig,
.fs-p-46 .fs-canthoplasty-need__fig,
.fs-p-46 .fs-canthoplasty-step__fig { overflow: hidden; }
.fs-p-46 .fs-canthoplasty-def__fig img,
.fs-p-46 .fs-canthoplasty-need__fig img,
.fs-p-46 .fs-canthoplasty-step__fig img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
.fs-p-46 .fs-canthoplasty-def .fs-card:hover .fs-canthoplasty-def__fig img,
.fs-p-46 .fs-canthoplasty-need__strip > li:hover .fs-canthoplasty-need__fig img,
.fs-p-46 .fs-canthoplasty-step:hover .fs-canthoplasty-step__fig img { transform: scale(1.045); }

  .fs-p-46 .fs-canthoplasty-def .fs-card:hover .fs-canthoplasty-def__fig .fs-labelbar,
  .fs-p-46 .fs-canthoplasty-step:hover .fs-canthoplasty-step__fig .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --- 8. reduced-motion — 레이아웃은 최종 상태로 고정 ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-46 .fs-canthoplasty-promise__title::after,
  .fs-p-46 .fs-nose-dz__text h2::after,
  .fs-p-46 .fs-nose-head h2::after { transform: scaleX(1) !important; transition: none !important; }

  .fs-p-46 .fs-canthoplasty-def__fig img,
  .fs-p-46 .fs-canthoplasty-need__fig img,
  .fs-p-46 .fs-canthoplasty-step__fig img,
  .fs-p-46 .fs-canthoplasty-promise__fig img { transition: none !important; transform: none !important; }
}

/* 검사기 사슬 교정 — 화면은 0픽셀 바뀌지 않는다.
   이 페이지의 «배경이 그라데이션인 섹션»(background-image 로 칠하므로 backgroundColor 는
   transparent)이 qa.py 의 bgOf 를 통과시켜, 그 위 글자 배경으로 .fs-page--overlay 의
   히어로색이 잡힌다. main 에 실제로 칠해지는 색을 명시해 사슬을 그 앞에서 끊는다.
   지금은 대부분의 문단이 children.length 게이트로 아예 안 재어지지만(후보의 23%만 측정),
   재게 됐을 때 처음부터 맞는 값이 나오게 하려는 줄이다. 상세: overlay-wrapper-bg-leaks */
.fs-p-46 .fs-page--overlay > main { background: var(--fs-white); }


/* ==========================================================================
   [45] 복합트임 이관분 — 2026-09-10
   병원 지시 「45 복합트임을 46 트임성형에 넣어줘. 내용은 건들이지 말고 합치기만」.
   45 의 6개 섹션(복합트임이란·SURGERY INFORMATION·필요한 경우·수술방법·
   뒤트임 VS 복합트임·포시즌만의 복합트임)을 46 의 스테이트먼트 뒤에 그대로 이식했다.
   스코프 .fs-p-45 → .fs-p-46. 컴포넌트 클래스 .fs-combo-* 는 마크업과 짝이라 그대로 둔다.
   45 전용 히어로(.fs-combo-hero*) 규칙 16개는 46 히어로를 쓰게 되어 걷어냈다.
   ========================================================================== */
/* ==========================================================================
   45 · 복합트임 — 페이지 전용 CSS
   · 모든 셀렉터는 .fs-p-46 스코프 안에만 둔다.
   · 색은 --fs-* 토큰만. 새 hex 없음.
   · 전용 컴포넌트: fs-combo-def / fs-spec-strip(10-23) / fs-combo-case /
                    fs-combo-step / fs-combo-merit
   ========================================================================== */

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

/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
/* 가로 크롭은 «위 고정» — 가운데로 두면 모델 머리가 헤더 띠로 올라온다 */

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 아이보리 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은
   페이드로 녹여 이음매를 없앤다. (81 과 같은 처리) */

/* --- 1. fs-combo-def — 뒷트임 ＋ 눈꼬리내리기 = 복합트임 합성 도해 ------- */
.fs-p-46 .fs-combo-def { display: grid; gap: clamp(6px, 5.1px + 0.26vw, 10px); }
.fs-p-46 .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-46 .fs-combo-def__fig { display: grid; }
.fs-p-46 .fs-combo-def__fig img { display: block; width: 100%; height: auto; }
.fs-p-46 .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-46 .fs-combo-def__plus svg { width: 44%; height: 44%; }
.fs-p-46 .fs-combo-def__sum { min-height: clamp(34px, 30.5px + 0.96vw, 49px); }

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

/* --- 2. 정의 섹션 체크 3종 ---------------------------------------------- */
.fs-p-46 .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-46 .fs-combo-check { display: grid; justify-items: center; align-content: start; gap: var(--fs-sp-4); }
.fs-p-46 .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-46 .fs-combo-checks { grid-template-columns: minmax(0, 1fr); }
}

/* --- 3. SURGERY INFORMATION ------------------------------------------- */
/* --- 수술정보 — 아이콘 가로줄 5칸 (fs-spec-strip) ----------------------------
   2026-10-23 승인자 「상단 메뉴에 있는거 레이아웃 맞춰줘」 — 51 상안검 수술정보 판(67·134 와 같은 처리).
   51.css P3·P10 값 그대로 — 위아래 가는 선 · 원형 아이콘(ic-*-c.png 를 브라운 #6B564E 로 물들임) · 라벨 작게 · 값 브라운 굵게 · PC 칸 사이 세로선.
   흰 섹션은 원 크림 · 선 --fs-line, 크림 섹션은 원 흰색 · 선 --fs-line-input(51 과 같은 구분).
   5칸: ≥1024 한 줄 · 600~1023 6열 span 2 + 넷째 2열부터(3 + 가운데 2) · <600 2열 + 다섯째 전폭(MOBILE_RULES §2 A).
   옛 규칙: _src/build/backup-46-1023-spec/46.css */
.fs-p-46 .fs-spec-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: var(--fs-sp-7); column-gap: var(--fs-sp-3);
  margin: clamp(28px, 23.4px + 1.28vw, 48px) 0 0;
  padding-block: clamp(24px, 21.2px + 0.77vw, 36px);
  border-block: 1px solid var(--fs-line);
}
.fs-p-46 .fs-spec-strip__item { display: grid; justify-items: center; align-content: start; gap: var(--fs-sp-2); text-align: center; }
.fs-p-46 .fs-spec-strip__item { grid-column: span 2; }
.fs-p-46 .fs-spec-strip__item:nth-child(4) { grid-column: 2 / span 2; }
.fs-p-46 .fs-spec-strip 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-46 .fs-spec-strip dd {
  margin: 0; font-size: var(--fs-t-sub); font-weight: 700; line-height: var(--fs-lh-head); color: var(--fs-teal-dk);
  text-wrap: balance;
}
.fs-p-46 .fs-spec-strip__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-46 .fs-spec-strip__ic img { width: 62%; height: auto;   /* 96x96, 그림 bbox 가운데 */
  filter: brightness(0) invert(20%) sepia(25%) saturate(600%) hue-rotate(338deg); }
.fs-p-46 #spec .fs-spec-strip { border-color: var(--fs-line-input); }
.fs-p-46 #spec .fs-spec-strip__ic { background: var(--fs-white); }
@media (min-width: 1024px) {
  .fs-p-46 .fs-spec-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fs-p-46 .fs-spec-strip__item,
  .fs-p-46 .fs-spec-strip__item:nth-child(4) { grid-column: auto; }
  .fs-p-46 .fs-spec-strip__item + .fs-spec-strip__item { border-inline-start: 1px solid var(--fs-line); }
  .fs-p-46 #spec .fs-spec-strip__item + .fs-spec-strip__item { border-inline-start-color: var(--fs-line-input); }
  /* 머리는 51 처럼 ≥1024 만 가운데(같은 페이지 다른 머리는 왼쪽 그대로) — #spec 이라 위 제목 선 규칙(0,2,1)보다 세다 */
  .fs-p-46 #spec .fs-nose-head { justify-items: center; text-align: center; }
  .fs-p-46 #spec .fs-nose-head h2::after { margin-inline: auto; transform-origin: center; }
}
@media (max-width: 599px) {
  .fs-p-46 .fs-spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-46 .fs-spec-strip__item,
  .fs-p-46 .fs-spec-strip__item:nth-child(4) { grid-column: auto; }
  .fs-p-46 .fs-spec-strip__item:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }   /* 홀수 마지막 전폭 */
}

/* --- 4. fs-combo-case — 복합트임이 필요한 경우 ------------------------- */
.fs-p-46 .fs-combo-indication { display: grid; row-gap: clamp(30px, 25.4px + 1.28vw, 50px); }
.fs-p-46 .fs-combo-indication__photo { display: grid; align-content: start; }
.fs-p-46 .fs-combo-indication__photo img { display: block; width: 100%; height: auto; }
.fs-p-46 .fs-combo-cases {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card); align-content: start;
}
.fs-p-46 .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-46 .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-46 .fs-combo-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .fs-p-46 .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-46 .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-46 .fs-combo-step { display: grid; align-content: start; width: 100%; max-width: 436px; }
.fs-p-46 .fs-combo-step__fig { position: relative; display: grid; }
.fs-p-46 .fs-combo-step__fig img { display: block; width: 100%; height: auto; }
.fs-p-46 .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-46 .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-46 .fs-combo-step__arrow svg { width: 46%; height: 46%; }
@media (min-width: 900px) {
  .fs-p-46 .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-46 .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-46 .fs-combo-cmp-sec { padding-block: var(--fs-sec-pb); }
/* 09-23 · 패럴랙스가 배경 레이어를 아래로 밀면 섹션색(#3C3D3F)이 위에 띠로 드러났다(스크롤 중 30~40px).
   레이어 상자를 위아래 8% 씩 키우고 섹션에서 잘라 사진이 이동 범위 전체를 덮게 한다. */
.fs-p-46 .fs-combo-cmp-sec { overflow: clip; }
.fs-p-46 .fs-combo-cmp-sec .fs-section__bg { inset-block: -8%; }
.fs-p-46 .fs-combo-cmp-title { line-height: 1.19; }
.fs-p-46 .fs-combo-hl { color: var(--fs-ink); padding: 2px 10px; line-height: 1; }
.fs-p-46 .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-46 .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-46 .fs-combo-ghost { display: block; } }

/* --- 7. fs-combo-merit — 포시즌만의 복합트임 (아이콘 룰 카드) ---------- */
.fs-p-46 .fs-combo-strength { display: grid; row-gap: clamp(30px, 25.4px + 1.28vw, 50px); }
.fs-p-46 .fs-combo-strength__photo { display: grid; align-content: start; }
.fs-p-46 .fs-combo-strength__photo img { display: block; width: 100%; height: auto; }
.fs-p-46 .fs-combo-merits { display: grid; gap: var(--fs-gap-card); align-content: start; }
.fs-p-46 .fs-combo-merit { background: var(--fs-white); align-content: start; }
.fs-p-46 .fs-combo-merit__head { display: flex; align-items: center; gap: var(--fs-sp-4); }
@media (min-width: 600px) {
  .fs-p-46 .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-46 .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-46 .fs-combo-merit .fs-card__desc { grid-column: 2; }
  .fs-p-46 .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-46 .fs-combo-strength__photo { order: 2; }
  .fs-p-46 .fs-combo-strength__col { order: 1; }
}

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

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

/* (V70-A·B — 옛 POINT 카드 5장의 열 처리. 10-23 아이콘 가로줄로 바꾸며 3절로 흡수했다) */

/* --- V70-C. 섹션 제목 뒤 짧은 틸 선 -------------------------------------
   ★ 초기 은닉을 :root.fs-js 로 통째로 걸면 안 된다. fs.js 는 첫 화면 안에 있던
   대상에는 .fs-reveal 클래스 자체를 붙이지 않으므로 «.is-in 이면 보이기» 로 짜면
   첫 화면 제목의 선이 영원히 안 그어진다.
   → 기본을 「그어진 상태」로 두고, fs.js 가 실제로 리빌 대상으로 표시한
     .fs-reveal 에만 초기 은닉을 건다.
   #compare 의 대제목(.fs-combo-cmp-title)과 sr-only 제목은 대상이 아니다. */
.fs-p-46 .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-46 .fs-nose-head h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-46 .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-46 strong,
.fs-p-46 b { font-weight: 700; }

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


/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 눈성형 = 블루그레이 #DDE4EB (fs.css «카테고리 틴트» 블록 + body.fs-cat-eye)
   승인자 결정: 웜 축의 유일한 쿨 예외(48 사진 상단색 계열). 공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개·글자 후광을 정한다.
   모델 왼쪽(x 16~38%) · 카피 우측 → 오른쪽에서 왼쪽으로 · 사진 i2i · LOCK 4: #promise 크림 → 흰
   ========================================================================== */
.fs-p-46 .fs-canthoplasty-hero .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(270deg, 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-46 .fs-canthoplasty-hero .fs-hero__bg::after { content: none; }
  .fs-p-46 .fs-canthoplasty-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}
.fs-p-46 #promise { background: var(--fs-white); }

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

/* ==========================================================================
   ▼▼▼ 2026-09-22 · 병원 요청 「리뷰티 수정(트임성형).pptx」 13슬라이드 반영
   계획서 _design/PLAN-46-0922-pptx.md · 백업 _src/build/backup-46-0922-pptx/
   승인자 결정: 도해 26장 전부 일러스트로(복합트임 포함) · 표시색은 사이트 액센트 ·
   #spec 은 문구를 안 바꾸고 위치만 이동 · 수치 유지.
   ========================================================================== */

/* 슬3 — #promise 는 아이콘 타일 3개와 우측 모델컷이 빠져 «중앙 정렬 선언 블록» 이 됐다.
   .fs-center 만 붙이면 상위 격자의 justify-items:start 가 이기는 자리가 있어
   (47·81 에서 같은 함정) 블록 자체의 축을 직접 푼다. */
.fs-p-46 #promise .fs-canthoplasty-promise__copy {
  justify-items: center; text-align: center;
  max-width: 900px; margin-inline: auto; gap: var(--fs-sp-3);
}
.fs-p-46 #promise .fs-canthoplasty-promise__title::after { margin-inline: auto; }
.fs-p-46 .fs-canthoplasty-promise__def {
  color: var(--fs-ink-soft);
  margin-block-start: var(--fs-sp-4);
  max-width: 34em;
}

/* 슬4 — 정의 카드 제목에서 「이란?」 을 빼고 앞트임에 (윗트임) 을 병기했다.
   제목 강조는 LOCK 7 의 «문장 반쪽을 틸로» 를 유지해야 하므로 병기는 w300 으로 받는다. */
.fs-p-46 .fs-canthoplasty-def__title .fs-w300 { color: var(--fs-ink-soft); }

/* 슬11 — #about 본문 두 줄의 글자 크기를 같게 (「폰트 크기 동일하게」) */
.fs-p-46 #about .fs-quote,
.fs-p-46 #about .fs-body { font-size: var(--fs-t-lead); line-height: 1.6; }

/* 슬11 — 체크 3항목: 아이콘 삭제 · 「박스색 연하게」 · 「폰트크기도 키워주세요」.
   --fs-fill-gray(#777778) 는 감광 없이도 4.47:1 이라 안 쓴다.
   --fs-beige(#F0E2D5) + --fs-ink(#111) = 14.1:1 — 47 비교표 가운데 열과 같은 처방. */
.fs-p-46 .fs-combo-check .fs-labelbar {
  background: var(--fs-beige);
  color: var(--fs-ink);
  font-size: var(--fs-t-lead);
  font-weight: 500;
  min-height: clamp(56px, 51.2px + 1.28vw, 76px);
}

/* 슬9·10 — #indication 을 「좌 대형 인물컷 / 우 목록」으로 푼다.
   참고로 받은 타사 화면에서는 «구조» 만 가져왔다(그 페이지를 베끼지 않는다).
   아이콘 4개가 빠지고 라벨바가 본문 줄이 되므로 흰 카드·틸 상단선도 같이 걷는다. */
.fs-p-46 .fs-combo-cases { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fs-p-46 .fs-combo-case {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: var(--fs-sp-5);
  height: auto; background: transparent;
  border-block-start: 0;
  border-block-end: 1px solid var(--fs-line);
  padding-block: clamp(18px, 14.2px + 1.06vw, 30px);
}
.fs-p-46 .fs-combo-case:last-child { border-block-end: 0; }
.fs-p-46 .fs-combo-case__txt { color: var(--fs-ink); text-wrap: balance; } /* 09-23 한 줄 문장 — 360 에서만 접히니 고아 낱말 없이 반으로 */
@media (max-width: 599px) {
  .fs-p-46 .fs-combo-case { grid-template-columns: minmax(0, 1fr); gap: var(--fs-sp-3); }
}
@media (min-width: 1024px) {
  .fs-p-46 .fs-combo-indication { grid-template-columns: minmax(0, 560fr) minmax(0, 800fr); }
}

/* 슬12 — 「색이 칙칙해서 잘 안보여요, 튀고 잘보이는 컬러로」.
   기존 강조는 --fs-teal(#97796E) 상자라 #3C3D3F 다크 밴드 위에서 «어두운 면 위 어두운 면» 이었다.
   fs.css 가 다크 밴드 강조용으로 따로 둔 --fs-teal-neon(#E6B8A8) + --fs-ink = 10.8:1.
   LOCK 5 의 FAIL 조항(밴드 안 rgb(73,188,189) 글자)과 무관하다. */
.fs-p-46 .fs-combo-hl { background: var(--fs-teal-neon); color: var(--fs-ink); }

/* 슬12 — 「수술 방법 상자 삭제」. 캡션이 빠져 패널 아래가 비므로 닫는다.
   어느 쪽인지는 위의 필(일반 뒤트임 / 포시즌 복합트임)이 그대로 알려준다. */
.fs-p-46 .fs-nose-compare__panel { margin-block-end: 0; }

/* 슬13 — 룰 카드 아이콘 4개 삭제 → 번호 · 제목 한 줄 */
.fs-p-46 .fs-combo-merit__head { gap: 0; }

/* 슬5 — 「일러스트랑 중앙이 되도록 정렬」. 도해에 max-width:300px 가 걸려 있어
   셀 안에서 왼쪽으로 붙어 있었다. 표의 데이터 열 3개와 축을 맞춘다. */
@media (min-width: 1024px) {
  .fs-p-46 .fs-canthoplasty-need__fig { margin-inline: auto; }
}

/* 슬9·10 — 목록이 인물컷보다 짧아 아래가 비었다. 두 열을 가운데로 맞춘다. */
@media (min-width: 1024px) {
  .fs-p-46 .fs-combo-indication { align-items: center; }
}

/* 슬12 — 배경 사진을 원장 수술컷(cmp-bg-0922)으로 갈면서 고스트(ghost-or)는 걷어냈다.
   그 JPEG 은 «옛 배경색으로 눌러 구운» 판이라 새 배경 위에서는 좌하단에 밝은 직사각형으로
   떠오른다(엣지 0.04 라 블러로도 안 감춰진다). 새 배경 자체가 질감을 갖고 있어 역할이 겹친다.
   파일은 45 가 그대로 쓰므로 남겨 둔다 — 46 의 마크업에서만 뺐다. */

/* ==========================================================================
   ▼▼▼ 2026-09-23 · 모바일 최적화(승인자 「…47 다음 46」) — 줄바꿈은 전 폭, 배치는 599px/1023px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-46-0923-mo/ · 실측 _design/momeasure.py 360/390/540
   ========================================================================== */
/* --- 줄바꿈 — 선언 리드 <br> 2·술식 단계 설명 <br> 12 → 문장 블록(.fs-lead__s, <br> 과 픽셀 동일). 짧은 블록은 balance(줄 수 불변).
   360/390/540 실측 고아 줄: 히어로 「눈매」 · 선언 「주어」「수술입니다.」 · 수술정보 리드 「기간입니다.」 · 정의 본문 「성형입니다.」 ·
   대조표 칸 「경우」 · 단계 설명 「고려하여」「트임하고」 · 단계 라벨바 「확인」 · 복합트임 본문 「있습니다.」 · 수술방법 리드 「있습니다.」 · 주의문 「있습니다.」 · 주소 「8층」 */
.fs-p-46 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-46 .fs-canthoplasty-hero__lead,
.fs-p-46 #spec .fs-nose-lead,
.fs-p-46 .fs-canthoplasty-def__body .fs-body,
.fs-p-46 .fs-canthoplasty-need__table td,
.fs-p-46 .fs-canthoplasty-step__fig .fs-labelbar,
.fs-p-46 .fs-canthoplasty-tx__lead,
.fs-p-46 #about .fs-quote,
.fs-p-46 #about .fs-body,
.fs-p-46 #combo-method .fs-lead,
.fs-p-46 .fs-nose-compare__txt,
.fs-p-46 .fs-combo-cmp__note,
.fs-p-46 .fs-address { text-wrap: balance; }

@media (max-width: 599px) {
}

@media (max-width: 1023px) {
  /* --- 술식 캐러셀 — 제목 아래 왼쪽에 있던 화살표(도트보다 ≈700px 위)를 도트 줄 양끝으로(81 재료·47 과 같은 처방). DOM 그대로. */
  .fs-p-46 .fs-canthoplasty-tx { position: relative; }
  .fs-p-46 .fs-canthoplasty-tx__head .fs-sec-head__action {
    position: absolute; inset-inline: 0; inset-block-end: -13px;   /* 40px 버튼 중심 = 14px 도트 줄 중심 */
    justify-self: stretch;
  }
  .fs-p-46 .fs-canthoplasty-tx .fs-carousel__nav { justify-content: space-between; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 히어로 «모델 ↔ 카피» 시각 보정 — 승인자 「여유증처럼 반대된 히어로도 이 규칙 적용」(131.css 같은 날짜 절)
   규칙: 제목 모델 쪽 끝 ↔ 모델 윤곽 25% 분위, 카피 글자 끝 ↔ 모델 윤곽 25% 분위를 형제 중앙값과 견줘 «텍스트만» 옮긴다.
   46 은 131 과 반대로 가까웠다(오른쪽 카피 · 왼쪽 정렬이라 제목이 모델 쪽 끝): 두 기준 평균 1920 −123 · 1700 −127 · 1440 −142 · 1280 −158 · 1024 −189.
   → 상자 폭을 줄여 글자 시작점을 오른쪽으로(리드는 두 줄로 고르게 나뉜다). 1024~1699 는 리드 두 줄째가 고정 퀵메뉴(top 359) 높이로 내려와
     글자 오른끝이 퀵메뉴 왼끝 −12px 를 넘지 않게 오른쪽 여백 max(0, 8vw − 82px)(1024 0 · 1280 20 · 1440 33 · 1699 54) — 글자 묶음(≈219px)이 상자(280px)보다
     좁아서 이 여백이면 퀵메뉴와 안 겹친다(1024 은 마지막 줄 아래 348 < 퀵메뉴 위 359).
   ========================================================================== */
@media (min-width: 1024px) {
  .fs-p-46 .fs-canthoplasty-hero__lead { text-wrap: balance; }
}
@media (min-width: 1700px) {
  .fs-p-46 .fs-canthoplasty-hero__copy { width: min(100%, 335px); }
}
@media (min-width: 1024px) and (max-width: 1699px) {
  .fs-p-46 .fs-canthoplasty-hero__copy { width: min(100%, 280px); margin-inline-end: max(0px, 8vw - 82px); }
}

/* ==========================================================================
   ▼▼▼ 2026-10-07 · 모바일 배치 — A11 앞·뒤·밑트임 정의 카드(승인자 「이 섹션도 모바일로 봤을 때 더 좋았으면」 → 시안 3안 중 「a로 진행」)
   시안 _review/46-define-mo-options.html · 백업 _src/build/backup-46-1007-define-mo/ · 규칙은 767px 이하만 — PC·태블릿 무변경.
   거의 같은 눈 도해가 폭 가득 세 번(390 섹션 1,491px) → «도해 썸네일 42% + 이름 옆 · 정의문 아래 전폭» 행, 카드 사이 헤어라인.
   정의문은 지금과 같은 폭·같은 줄. 본문 상자를 display:contents 로 풀어 제목·정의문을 카드 격자에 올린다(리빌 대상은 li 라 §2 J 함정 밖).
   헤어라인은 --fs-line-input — 흰 위 --fs-line(#EDEDED)은 1.17:1 로 사라진다.
   ========================================================================== */
@media (max-width: 767px) {
  .fs-p-46 .fs-canthoplasty-def .fs-nose-dz__cards { gap: 0; }
  .fs-p-46 .fs-canthoplasty-def .fs-card {
    grid-template-columns: min(42%, 240px) minmax(0, 1fr);
    column-gap: var(--fs-sp-5); align-items: center;
    padding-block: var(--fs-sp-6);
    border-block-start: 1px solid var(--fs-line-input);
  }
  .fs-p-46 .fs-canthoplasty-def .fs-card:last-child { border-block-end: 1px solid var(--fs-line-input); }
  .fs-p-46 .fs-canthoplasty-def__fig img { max-width: none; }
  .fs-p-46 .fs-canthoplasty-def__body { display: contents; }
  .fs-p-46 .fs-canthoplasty-def__title { grid-column: 2; grid-row: 1; }
  .fs-p-46 .fs-canthoplasty-def__body .fs-body { grid-column: 1 / -1; grid-row: 2; margin-block-start: var(--fs-sp-4); }
}
