/* ==========================================================================
   page/81.css — 코재수술 (draft1/81/index.html) 전용 확장
   · 모든 셀렉터는 .fs-p-81 스코프 안에만 있다. 다른 페이지에 영향 0.
   · 색은 --fs-* 토큰만 쓴다. 새 hex 없음. 라운드·그림자 없음.
   · 전용 컴포넌트 : .fs-p81-need (체크 칩)
   · 2026-09-15 병원 요청(리뷰티 수정(코재수술).pptx 3·6·7)으로 닥터스 SAY · 부작용 · 코 구조의 이해 ·
     적절한 시기 섹션을 지우면서 그 전용 규칙(.fs-p81-say/risk/anat/bands/part/point/tip/timing/sub)도 걷어냈다.
   ========================================================================== */

/* --- 공통 세로 리듬 ------------------------------------------------------ */
/* fs.css 는 h/p 마진을 전부 0 으로 리셋한다. 간격은 여기서만 준다. */
.fs-p-81 .fs-p81-gap    { margin-block-start: var(--fs-gap-title); }
.fs-p-81 .fs-p81-gap-sm { margin-block-start: var(--fs-sp-9); }
.fs-p-81 .fs-p81-gap-xs { margin-block-start: var(--fs-sp-5); }
.fs-p-81 .fs-p81-block + .fs-p81-block { margin-block-start: var(--fs-sp-11); }

/* --- 리드 문장 단위 균형 줄바꿈 (모바일) --------------------------------- */
/* 리드는 문장마다 <br> 로 끊어 둔다. 1920 은 한 문장이 한 줄이라 의도대로 보이지만,
   폭이 좁아지면 그 한 문장이 다시 접히면서 «아닙니다.» 처럼 한 단어만 남는 고아 줄이
   생긴다(2026-09-22 병원 지적, 폭 540 실측). <br> 대신 문장을 블록으로 세우면 블록당
   줄 수가 적어져 text-wrap:balance 가 줄 길이를 고르게 나눈다 — <br> 가 든 긴 문단째로는
   크롬이 첫 문장만 균형을 잡고 만다. 1024 이상은 손대지 않아 확정된 PC 화면은 그대로다.
   balance 미지원 브라우저(iOS 17.5 미만)는 블록만 남아 지금과 같은 줄바꿈이 된다. */
.fs-p-81 .fs-lead__s { display: block; text-wrap: balance; }   /* <br> 과 같은 줄바꿈 — 전 폭. balance 도 전 폭(2026-09-23 승인자 「진행해줘」: 1024~1180 태블릿 가로에서 접히는 리드, ≥1280 은 한 줄이라 무변화) */
@media (max-width: 1023px) {
  /* 2026-09-23 모바일 줄바꿈 2차 — 리드 밖 짧은 글 블록(2~3줄)도 고아 줄이 남는다(360/390/540 실측):
     «중요한 것» 캡션 540 「합니다.」·B&A 주의문 540 「필요합니다.」·«어려운 이유» 설명 360 「많습니다.」·
     재료 설명 360/540 「적합합니다.」「재료입니다.」·주소 360 「8층」. 같은 balance 로 줄 길이를 고르게 나눈다.
     ≥1024 는 이 블록 밖이라 PC 줄바꿈은 그대로다. */
  .fs-p-81 .fs-p81-plan__cap .fs-body,
  .fs-p-81 .fs-p81-ba__note,
  .fs-p-81 .fs-p81-hard__desc,
  .fs-p-81 .fs-p81-mat__desc,
  .fs-p-81 .fs-address { text-wrap: balance; }
}
/* 2026-09-23 승인자 「풀어도 돼」 — 중요한 것 캡션은 PC 에서도 balance(02 「…내릴 수 / 있어야 합니다.」, 1440~1920 실측). 09-15 보류된 지정 줄바꿈·글씨 키우기와는 별개. */
.fs-p-81 .fs-p81-plan__cap .fs-body { text-wrap: balance; }

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

/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다(57 은 .fs-nose-hero 로 해결). */
.fs-p-81 .fs-p81-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 가로 크롭은 «위 고정» — 가운데로 두면 모델 머리가 헤더 띠로 올라온다 */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=180 라 0% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
/* 2026-09-15 병원 요청(pptx 1·2) 모델 교체 — hero-model-0915.jpg(1920x743)는 사진 아래끝 = 파일 아래끝이라 «위 고정».
   1920 에서 원본 0~3999행(정수리~가슴 아래)이 히어로 610px 에 든다(승인자 선택 C안). 옛 31% 는 1920x1072 파일 기준값이었다.
   <1024 스택 배치는 아래 @media 규칙(50% 100% · 3/4)이 그대로 이긴다. */
.fs-p-81 .fs-p81-hero .fs-hero__bg img { object-position: 50% 0%; }
.fs-p-81 .fs-p81-hero .fs-hero__copy { max-width: 40rem; gap: var(--fs-sp-3); }
.fs-p-81 .fs-p81-hero .fs-hero__kicker,
.fs-p-81 .fs-p81-hero .fs-hero__title,
.fs-p-81 .fs-p81-hero .fs-p81-hero__lead { color: var(--fs-ink); }
.fs-p-81 .fs-p81-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-81 .fs-p81-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22;
}
.fs-p-81 .fs-p81-hero__rule {
  display: block; width: 56px; height: 2px;
  margin-block: var(--fs-sp-2);
  background: var(--fs-teal);
}
.fs-p-81 .fs-p81-hero__lead { max-width: 34em; color: var(--fs-ink-soft); }

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 아이보리 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은
   페이드로 녹여 이음매를 없앤다. (53 과 같은 처리) */
@media (max-width: 1023px) {
  .fs-p-81 .fs-p81-hero { min-height: 0; background: #FAF3E6; }
  .fs-p-81 .fs-p81-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-81 .fs-p81-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 100%;
    /* 2026-09-23 승인자 「사진을 첫 화면에」 — 페이드 96 → 60px, 아래 밴드 여백과 같이 얼굴을 위로 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px);
            mask-image: linear-gradient(180deg, transparent 0, #000 60px);
  }
  .fs-p-81 .fs-p81-hero .fs-hero__inner {
    grid-row: 1; background: #FAF3E6;
    /* 2026-09-23 승인자 「사진을 첫 화면에」 — 위 40 → 20 · 아래 56 → 30 (360 에서 사진 시작 341 → 295px) */
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-5)) var(--fs-sp-7);
  }
  .fs-p-81 .fs-p81-hero .fs-hero__copy { max-width: 100%; }
}

/* --- 5. 코재수술이 필요한 경우 — 그룹 헤드 + 증상 일러스트 카드 (v2) ------- */
/* 2026-09-15 병원 요청(pptx 8·9) → 승인자 「처음부터 다시 · 그림이 제이오와 달라요 · 증상이 잘 안 읽혀요」.
   제이오 코재수술 「원인에 따른 수술방법」의 구조(큰 그림 카드 3열 · Case 필 · 제목)만 따른다. 그림은 제이오 이미지를
   입력으로 쓰지 않고 자체 기본형(_src/gen/81-need-v2/)에서 파생 — 코가 카드를 채우는 클로즈업 + 증상 과장.
   ≥1024 3열(6트랙 · 2칸씩, 8장 묶음 끝줄 2장은 2/span 2 로 가운데) · 600~1023 2열 · <600 가로 스와이프(그림을 줄이지 않는다). */
.fs-p-81 .fs-p81-need__head {
  margin-block-end: var(--fs-sp-7);
  border-block-end: 1px solid var(--fs-line-input); padding-block-end: var(--fs-sp-4);
}
.fs-p-81 .fs-p81-need__cards {
  display: grid; gap: var(--fs-sp-4);
  grid-auto-flow: column; grid-auto-columns: 80%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--fs-gutter) * -1); padding-inline: var(--fs-gutter); scroll-padding-inline: var(--fs-gutter);
}
.fs-p-81 .fs-p81-need__cards::-webkit-scrollbar { display: none; }
.fs-p-81 .fs-p81-need__cards > li { scroll-snap-align: start; }
.fs-p-81 .fs-p81-need__card { display: grid; grid-template-rows: auto 1fr; align-content: start; }
/* 그림 칸 높이는 4:3 스페이서 — aspect-ratio 는 grid stretch 를 이겨 흰 띠를 만든다(v1 768·360 실측). */
.fs-p-81 .fs-p81-need__fig { position: relative; margin: 0; overflow: hidden; }
.fs-p-81 .fs-p81-need__fig::before { content: ""; display: block; padding-block-start: 75%; }
.fs-p-81 .fs-p81-need__fig img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-81 .fs-p81-need__body { display: grid; gap: var(--fs-sp-2); align-content: start; }
.fs-p-81 .fs-p81-need__case {
  justify-self: start; display: inline-flex; align-items: center;
  min-height: 26px; padding-inline: 12px;
  border: 1px solid var(--fs-teal-dk); border-radius: var(--fs-radius-pill);
  font-family: var(--fs-font-en); font-size: var(--fs-t-sm); font-weight: 700; line-height: 1;
  color: var(--fs-teal-dk); letter-spacing: 0.02em;
}
.fs-p-81 .fs-p81-need__card .fs-card__title { word-break: keep-all; }
@media (min-width: 600px) {
  .fs-p-81 .fs-p81-need__cards {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0;
  }
}
@media (min-width: 1024px) {
  .fs-p-81 .fs-p81-need__cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--fs-gap-card); }
  .fs-p-81 .fs-p81-need__cards > li { grid-column: span 2; }
  .fs-p-81 .fs-p81-need__cards--8 > li:nth-child(7) { grid-column: 2 / span 2; }
}

/* --- 6. 코재수술이 어려운 이유 (다크 밴드) -------------------------------- */
.fs-p-81 .fs-p81-hard__fig { overflow: hidden; aspect-ratio: 16 / 9; }
.fs-p-81 .fs-p81-hard__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fs-p-81 .fs-p81-hard__copy { padding: var(--fs-sec-pt) var(--fs-gutter) var(--fs-sec-pb); }
/* 2026-09-15 병원 요청(pptx 5) — 아이콘을 빼고 세 항목을 드래그로 한 장씩(fs.js 캐러셀 slide · per-view 1).
   한 장이 글 칸 전폭(≈1100px)이면 문장 한 줄이 너무 길어 캐러셀 폭을 묶는다. */
.fs-p-81 .fs-p81-hard__car { margin-block-start: var(--fs-gap-title); max-width: 44rem; }
.fs-p-81 .fs-p81-hard__item { display: grid; gap: var(--fs-sp-3); align-content: start; }
/* 도트 — 기본색(비활성 #CFCFCF 점 · 활성 #6B564E 링)은 밝은 밴드 전제라 다크 밴드에서 활성 링이 사라진다.
   비활성 = 반투명 흰 점(밴드 위 ≈4:1), 활성 = 흰 링 + 밴드색 틈. 글 칸이 왼쪽 정렬이라 도트도 왼쪽. */
.fs-p-81 .fs-p81-hard__car .fs-carousel__dots { justify-content: flex-start; margin-block-start: var(--fs-sp-8); }
.fs-p-81 .fs-p81-hard__car .fs-carousel__dot { --fs-dot: rgba(255,255,255,.5); }
.fs-p-81 .fs-p81-hard__car .fs-carousel__dot.is-active { --fs-dot-on: var(--fs-on-dark); --fs-dots-bg: var(--fs-ink-band-2); }
.fs-p-81 .fs-p81-hard__item .fs-kicker--lg {
  color: var(--fs-on-dark);
  border-block-end: 1px solid var(--fs-arrow-soft); padding-block-end: var(--fs-sp-3);
}
/* 2026-09-15 승인자 — 항목마다 «순번 · 요점 한 줄 · 이유 두 줄»(세번째는 A안: 원문 어순만 바꿈), 글씨 키우기.
   순번은 요점과 경쟁하지 않게 23 → 17px, 요점 24px/700, 설명 16 → 18px(1920). 설명 줄바꿈은 ≥1024 만(.fs-pc-only) —
   가장 긴 설명 줄 18px 480px 로 1024 글 칸 565px 안, 360 은 자연 접힘. 요점은 360 에서 19px 한 줄(329px@20 이 320 을 넘는다). */
.fs-p-81 .fs-p81-hard__item .fs-kicker--lg { font-size: clamp(15px, 14.54px + 0.1282vw, 17px); }
.fs-p-81 .fs-p81-hard__head {
  margin: 0; font-size: clamp(19px, 17.85px + 0.3205vw, 24px); font-weight: 700; line-height: 1.4;
  letter-spacing: -0.02em; color: var(--fs-on-dark);
}
.fs-p-81 .fs-p81-hard__desc { font-size: clamp(16px, 15.54px + 0.1282vw, 18px); line-height: 1.6; }
@media (min-width: 1024px) {
  .fs-p-81 .fs-p81-hard__fig { aspect-ratio: auto; height: 100%; }
  .fs-p-81 .fs-p81-hard__copy { padding-inline: var(--fs-sp-13); }
  /* 2026-09-16 승인자 「사진/텍스트가 왼쪽으로 치우쳐 있다, 오른쪽으로」 A안 — 사진·글 묶음을 본문 격자(1440) 왼쪽 선으로 들인다.
     글 폭은 ≈700px 로 묶여 있는데 사진이 화면 끝에 붙어 남는 폭이 전부 오른쪽에 쌓였다(1920 551px · 2560 1000px).
     1440 이하는 인셋 0 · 사진 열은 옛 560fr:1360fr 과 같은 29.17% 라 그대로, 넓어지면 사진 560px 에서 멈춘다.
     인라인 --fs-split 은 var() 로 못 이겨서 grid-template-columns 를 직접 준다. 인셋은 padding — 패럴랙스 img 가 안에서 움직여도 안전하다. */
  .fs-p-81 .fs-p81-hard > .fs-split {
    grid-template-columns: min(29.1667vw, 560px) minmax(0, 1fr);
    padding-inline-start: max(0px, calc((100% - var(--fs-container)) / 2));
  }
}

/* --- 8. 코재수술에서 중요한 것 — 사진 타일 + 번호 라벨바 ------------------ */
.fs-p-81 .fs-p81-plan__frame { display: block; overflow: hidden; }
.fs-p-81 .fs-p81-plan__frame img { width: 100%; height: auto; }
.fs-p-81 .fs-p81-plan__cap { display: grid; gap: var(--fs-sp-4); }
.fs-p-81 .fs-p81-plan__cap .fs-body { text-align: center; }
/* 2026-09-15 병원 요청(pptx 4) 가운데 정렬 — .fs-center 는 text-align 뿐이고
   fs.css 의 .fs-nose-head { justify-items: start } 가 상자를 왼쪽에 붙여 둔다. */
.fs-p-81 .fs-nose-head.fs-center { justify-items: center; }

/* --- 9. 사용되는 재료 — 캐러셀 ------------------------------------------- */
.fs-p-81 .fs-p81-mat__slide { padding-block-start: var(--fs-sp-6); }
.fs-p-81 .fs-p81-mat__fig { display: grid; }
.fs-p-81 .fs-p81-mat__box { display: block; overflow: hidden; background: var(--fs-white); }
.fs-p-81 .fs-p81-mat__box img { width: 100%; height: auto; }
/* 2026-09-15 병원 요청(리뷰티 수정(코재수술).pptx 11) — 「빈 여백과 글씨가 너무 작아요, 2~3줄로 나눠 키워 주세요」 ·
   라벨바를 도해 아래에서 글 칸 맨 위(번호 위)로 옮긴다. 바 폭은 옮기기 전(도해 열 330px)과 같게 둔다 —
   그리드 칸에서는 전폭으로 늘어난다. 설명은 본문(16px) → 17~24px, 28em 으로 묶어 1920 에서 2줄.
   2026-09-16 승인자 가안 — 번호(01) 자리에 재료명, 라벨바에는 번호(같은 페이지 「중요한 것」 카드의 번호 바와 같은 모양).
   재료명은 옛 번호와 같은 크기(--fs-t-num 30→44)·토프 글자색, 제목이라 700. */
.fs-p-81 .fs-p81-mat__text { display: grid; align-content: center; justify-items: start; gap: var(--fs-sp-5); }
.fs-p-81 .fs-p81-mat__no { inline-size: min(100%, 330px); margin-block-start: 0; border-block-start: 0; }
.fs-p-81 .fs-p81-mat__name {
  font-size: var(--fs-t-num); font-weight: 700; line-height: 1.2; letter-spacing: var(--fs-ls-tight);
  color: var(--fs-teal-text);
}
.fs-p-81 .fs-p81-mat__desc {
  max-width: 28em;
  font-size: clamp(17px, 14.6px + 0.52vw, 24px); line-height: 1.6; word-break: keep-all;
}
.fs-p-81 .fs-p81-mat__nav { justify-content: flex-end; }
.fs-p-81 .fs-p81-mat .fs-carousel__dots { margin-block-start: var(--fs-sp-8); }



/* ==========================================================================
   2026-09-15 · 병원 요청(리뷰티 수정(코재수술).pptx 13) — 113 자가늑 코재수술 이관분(09-10)과
   회복관리 섹션을 본문에서 지우면서 그 전용 규칙(.fs-p-113-* · 진단·수정 패스 F1~F8)을 걷어냈다.
   아래 셸 규칙만 남긴다 — 이관 때 같이 들어와 위 1절의 헤더 규칙을 덮어쓰고 있는 «현재 화면» 이라
   지우면 헤더 유틸 글자색·바탕색이 바뀐다.
   ========================================================================== */
/* --- 셸 · A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ---------------
   누끼 모델이 크림 밴드를 넘어 걸쳐 있던 오프셋 히어로였다. 헤더를 흰 막대로
   세우지 않고 모델 사진 위에 그대로 얹는다. 히어로 상단은 전 폭이 웜 크림
   (#F0E1D0)이라 «잉크 글자»(14.9:1)를 쓴다. 모델 머리는 사진 높이의 20%
   아래에서 시작해 헤더 띠(최대 16%)에 안 걸린다.
   ------------------------------------------------------------------------- */
.fs-p-81 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-81 .fs-page--overlay { background: #F0E1D0; }
.fs-p-81 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-81 .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-81 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-81 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-81 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-81 .fs-header--overlay .fs-util__link { color: var(--fs-ink); }
.fs-p-81 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-81 .fs-util__sep { opacity: .4; }

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 재수술 = 웜 그레이 #E3DDD6 (fs.css «카테고리 틴트» 블록 + body.fs-cat-revision)
   공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개·글자 후광을 정한다. 여기서는:
   · 카피 쪽(왼쪽) 가로 스크림 — 틴트 .92 → 0 @60% (모델은 x 60%~)
   · <1024 스택 밴드(아이보리 #FAF3E6) → 틴트
   ========================================================================== */
.fs-p-81 .fs-p81-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) 30%, rgba(var(--fs-cat), .50) 48%, rgba(var(--fs-cat), 0) 60%);
}
@media (max-width: 1023px) {
  .fs-p-81 .fs-p81-hero .fs-hero__bg::after { content: none; }
  .fs-p-81 .fs-p81-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}

/* ==========================================================================
   ▼▼▼ 2026-09-15 · Before & After (병원 요청 pptx 10 · 승인자 「koclub 코재수술 Before & after 섹션 참고해서 재구성」)
   구조만 따른다 — 카드 3장 · 카드마다 «나눠보기 ⟷ 겹쳐보기» 스위치 · 사진 위 Before/After · 아래 수술 기간.
   코클럽의 둥근 모서리는 LOCK 1(직각)에 맞춰 버렸다. 사진은 병원 게시판 원본(1280x819)을 반으로 갈라 전·후를 맞춰 굽고
   환자 사진이라 .jpgx(draft1 Basic 인증 뒤)로 둔다. 스위치는 체크박스 + 형제 결합자(JS 없음),
   겹쳐보기 손잡이만 페이지 끝 인라인 스크립트가 --ba-pos 를 옮긴다(스크립트가 없으면 50% 에 멈춘다).
   ========================================================================== */
.fs-p-81 .fs-p81-ba__grid {
  display: grid; gap: var(--fs-sp-10) var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  max-width: 600px; margin-inline: auto;
}
@media (min-width: 1024px) {
  .fs-p-81 .fs-p81-ba__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}
.fs-p-81 .fs-p81-ba__card { position: relative; display: grid; gap: var(--fs-sp-5); align-content: start; }

/* 스위치 — 체크박스는 보이지 않게 두고 라벨이 누른다(키보드 포커스는 체크박스가 받는다) */
.fs-p-81 .fs-p81-ba__toggle {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  width: 1px; height: 1px; opacity: 0; margin: 0;
}
.fs-p-81 .fs-p81-ba__switch {
  justify-self: center; display: inline-flex; align-items: center; gap: var(--fs-sp-4);
  min-height: 36px; cursor: pointer; user-select: none;
  font-size: var(--fs-t-sm); color: var(--fs-muted);
}
.fs-p-81 .fs-p81-ba__track {
  position: relative; flex: 0 0 auto; width: 46px; height: 24px;
  border-radius: var(--fs-radius-pill); background: var(--fs-teal);
  transition: background-color var(--fs-dur) var(--fs-ease);
}
.fs-p-81 .fs-p81-ba__track::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px; border-radius: var(--fs-radius-round); background: var(--fs-white);
  transition: transform var(--fs-dur) var(--fs-ease);
}
.fs-p-81 .fs-p81-ba__toggle:not(:checked) + .fs-p81-ba__switch .fs-p81-ba__opt--split,
.fs-p-81 .fs-p81-ba__toggle:checked + .fs-p81-ba__switch .fs-p81-ba__opt--over { color: var(--fs-ink); font-weight: 700; }
.fs-p-81 .fs-p81-ba__toggle:checked + .fs-p81-ba__switch .fs-p81-ba__track { background: var(--fs-teal-dk); }
.fs-p-81 .fs-p81-ba__toggle:checked + .fs-p81-ba__switch .fs-p81-ba__track::after { transform: translateX(22px); }
.fs-p-81 .fs-p81-ba__toggle:focus-visible + .fs-p81-ba__switch .fs-p81-ba__track { box-shadow: var(--fs-shadow-focus); }

/* 사진 틀 — 나눠보기: 전·후 두 칸 / 겹쳐보기: 한 칸에 겹치고 손잡이로 가른다. 틀 크기는 두 모드가 같다(레이아웃 점프 없음). */
.fs-p-81 .fs-p81-ba__fig { margin: 0; display: grid; gap: var(--fs-sp-4); }
.fs-p-81 .fs-p81-ba__frame {
  --ba-pos: 50%;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  aspect-ratio: 1240 / 728; background: var(--fs-cream-2);   /* 세 케이스 반쪽 비율 평균(609x716 · 629x736 · 621x728 ×2) */
}
.fs-p-81 .fs-p81-ba__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-81 .fs-p81-ba__img--before { grid-column: 1; grid-row: 1; }
.fs-p-81 .fs-p81-ba__img--after  { grid-column: 2; grid-row: 1; }
/* 사진 받기 전 빈 자리(09-15 「우선은 프레임만」) — 전·후 두 칸이 구분되게 톤만 나눈다. 사진이 오면 <img> 로 되돌리면 이 규칙은 안 걸린다. */
.fs-p-81 .fs-p81-ba__img--ph.fs-p81-ba__img--before { background: var(--fs-cream); }
.fs-p-81 .fs-p81-ba__img--ph.fs-p81-ba__img--after  { background: var(--fs-cream-2); box-shadow: inset 1px 0 0 var(--fs-line-input); }
.fs-p-81 .fs-p81-ba__tag {
  position: absolute; inset-block-start: var(--fs-sp-3); z-index: 3;
  padding: 3px 10px; border-radius: var(--fs-radius-pill);
  font-family: var(--fs-font-en); font-size: var(--fs-t-xs); font-weight: 600; line-height: 1.4; letter-spacing: .02em;
  color: var(--fs-white); background: rgba(17, 17, 17, .55);
  pointer-events: none;
}
.fs-p-81 .fs-p81-ba__tag--before { inset-inline-start: var(--fs-sp-3); }
.fs-p-81 .fs-p81-ba__tag--after  { inset-inline-end: var(--fs-sp-3); }
.fs-p-81 .fs-p81-ba__handle,
.fs-p-81 .fs-p81-ba__range { display: none; }

.fs-p-81 .fs-p81-ba__toggle:checked ~ .fs-p81-ba__fig .fs-p81-ba__frame { display: block; }
.fs-p-81 .fs-p81-ba__toggle:checked ~ .fs-p81-ba__fig .fs-p81-ba__img {
  position: absolute; inset: 0; object-position: 50% 42%;
}
.fs-p-81 .fs-p81-ba__toggle:checked ~ .fs-p81-ba__fig .fs-p81-ba__img--after { clip-path: inset(0 0 0 var(--ba-pos)); }
.fs-p-81 .fs-p81-ba__toggle:checked ~ .fs-p81-ba__fig .fs-p81-ba__handle {
  display: block; position: absolute; inset-block: 0; inset-inline-start: var(--ba-pos); z-index: 2;
  width: 2px; margin-inline-start: -1px; background: var(--fs-white); pointer-events: none;
}
.fs-p-81 .fs-p81-ba__handle::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: var(--fs-radius-round); background: var(--fs-white);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .12);
  /* 좌우 화살표 ‹ › — 그라디언트 화살표는 40px 원 안에서 점 하나로 뭉개졌다(렌더 실측) */
  content: "\2039\00a0\203A"; display: grid; place-items: center;
  font-family: var(--fs-font-en); font-size: 20px; font-weight: 600; line-height: 1; color: var(--fs-teal-dk);
}
.fs-p-81 .fs-p81-ba__toggle:checked ~ .fs-p81-ba__fig .fs-p81-ba__range {
  display: block; position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y;
}
.fs-p-81 .fs-p81-ba__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 48px; height: 100vh; }
.fs-p-81 .fs-p81-ba__range::-moz-range-thumb { width: 48px; height: 100vh; border: 0; }
.fs-p-81 .fs-p81-ba__range:focus-visible ~ .fs-p81-ba__handle::after { box-shadow: var(--fs-shadow-focus); }

.fs-p-81 .fs-p81-ba__cap { text-align: center; font-size: var(--fs-t-body); color: var(--fs-ink-soft); }
/* 2026-09-17 승인자 「80 눈재수술 Before & After 머리부를 참고해 맞춰라」 — 섹션 아래에 있던 주의 문구를 리드 아래로(80 의 ※ 주의 문구와 같은 fs.css .fs-nose-ba__note),
   제목 아래 70px 선(80.css G 절과 같은 값·같은 리빌 배선), 리드 위 간격 12 → 20px(80 .fs-p-80-sub). 1920 제목→리드 82 · 리드→주의 13px 로 80 과 같다. */
.fs-p-81 .fs-p81-ba-sec .fs-nose-head .fs-nose-lead { margin-block-start: var(--fs-sp-5); }
.fs-p-81 .fs-p81-ba-sec .fs-nose-head > h2::after {
  content: ""; display: block; width: 70px; height: 1px;
  margin: var(--fs-sp-4) auto 0; background: var(--fs-teal);
  transform-origin: center; transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-81 .fs-p81-ba-sec .fs-reveal:not(.is-in) > h2::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .fs-p-81 .fs-p81-ba-sec .fs-nose-head > h2::after { transform: scaleX(1) !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-p-81 .fs-p81-ba__track,
  .fs-p-81 .fs-p81-ba__track::after { transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-23 · 모바일 배치(1023px 이하) — 승인자 「81 부터 모바일 최적화」. PC(≥1024) 는 미디어쿼리 밖이라 무변경.
   백업 _src/build/backup-81-0923-mobr/ · 실측 _design/momeasure.py 360/390/540/768
   ========================================================================== */
/* --- 2026-09-23 모바일 배치 — 중요한 것 · 필요한 경우 · 재료 (1023px 이하만, PC 무변경) --- */
@media (max-width: 599px) {
  /* 중요한 것 — 사진 4장 세로 스택(2,360px)을 «사진 좌 · 번호바+문구 우» 행으로. 01→04 가 세로로 읽히고 952px. */
  .fs-p-81 #plan .fs-grid--4 { gap: var(--fs-sp-7); }
  .fs-p-81 #plan .fs-figure { display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: var(--fs-sp-5); align-items: center; }
  .fs-p-81 #plan .fs-p81-plan__cap { margin-block-start: 0; gap: var(--fs-sp-3); }
  .fs-p-81 #plan .fs-p81-plan__cap .fs-body { text-align: left; }

  /* 필요한 경우 — 가로 스와이프에 진행 바. 글자 없이(R1) 스크롤 타임라인으로 틸 썸이 움직인다.
     미지원 브라우저는 썸이 0% 에 멈춘 정적 바(옆 카드 조각과 함께 «더 있다» 힌트). */
  .fs-p-81 .fs-p81-block { timeline-scope: --p81-need; }
  .fs-p-81 .fs-p81-need__cards { scroll-timeline: --p81-need inline; }
  .fs-p-81 .fs-p81-block:has(.fs-p81-need__cards--8) { --p81-need-n: 8; }
  .fs-p-81 .fs-p81-block:has(.fs-p81-need__cards--6) { --p81-need-n: 6; }
  .fs-p-81 .fs-p81-block::after {
    content: ""; display: block; height: 2px; margin-block-start: var(--fs-sp-5);
    background-color: var(--fs-line-input);
    background-image: linear-gradient(var(--fs-teal), var(--fs-teal));
    background-repeat: no-repeat;
    background-size: calc(100% * 1.1 / var(--p81-need-n, 8)) 100%;   /* 보이는 폭 ≈ 카드 1.1장 */
    background-position: 0% 0;
    animation: p81-need-bar linear both;
    animation-timeline: --p81-need;
  }
}
@keyframes p81-need-bar { from { background-position-x: 0%; } to { background-position-x: 100%; } }

@media (max-width: 1023px) {
  /* 재료 — 헤드 아래 가운데 떠 있던 화살표(캐러셀보다 570px 위)를 도트 줄 양끝으로. DOM 은 그대로(포커스 순서 유지). */
  .fs-p-81 .fs-p81-mat .fs-container { position: relative; }
  .fs-p-81 .fs-p81-mat .fs-sec-head__action {
    position: absolute; inset-inline: var(--fs-gutter); inset-block-end: -13px;   /* 40px 버튼 중심 = 14px 도트 줄 중심 */
    justify-self: stretch;   /* fs.css 의 center 는 abspos 상자도 줄여 가운데로 모은다(768 실측) */
  }
  .fs-p-81 .fs-p81-mat__nav { justify-content: space-between; }
}