/* ==========================================================================
   98 전후사진 — 페이지 전용 CSS
   · 색은 전부 --fs-* 토큰. 새 hex 0개.
   · 모든 셀렉터를 .fs-p-98 스코프 안에 둔다.
   · 시그니처: 원본 게시판 86건을 그대로 옮긴 전후사진 격자.
     원본은 좌 Before / 우 After 가 «한 장» 인 합성컷이라 라벨바를 2칸으로 쪼개
     한 장 아래에 Before(--mid) / After(--dark) 를 나란히 붙인다.
   전용 컴포넌트 5종
     .fs-before-after-board-hero   사진 0장 · 크림2 중앙 정렬 히어로
     .fs-ba-card                   전후 합성컷 카드 (사진 + 2칸 라벨바 + 수술명)
     .fs-before-after-board-tabs   카테고리 필 바 (라디오 4개로 목록을 거른다)
     .fs-before-after-board-caution 의료광고 주의 한 줄 (10-12 다크 밴드를 접었다)
     .fs-before-after-board-steps  원본 게시판 열람 3스텝
   ========================================================================== */


/* ==========================================================================
   §1 · 히어로 (.fs-before-after-board-hero)
   기본 .fs-hero 는 타우프 배경 + 흰 글자다. 이 페이지는 배너 사진이 없으므로
   크림2 바탕 · 잉크 글자로 내린다.
   ========================================================================== */
.fs-p-98 .fs-before-after-board-hero {
  background: var(--fs-cream-2);
  color: var(--fs-ink);
  perspective: none;
}
.fs-p-98 .fs-before-after-board-hero .fs-hero__copy {
  gap: clamp(10px, 8.4px + 0.449vw, 18px);
}
.fs-p-98 .fs-before-after-board-hero__en {
  font-family: var(--fs-font-en);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fs-teal-dk);
}
.fs-p-98 .fs-before-after-board-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-98 .fs-before-after-board-hero__rule {
  width: clamp(48px, 41.2px + 1.897vw, 76px);
  height: 2px;
  background: var(--fs-teal);
}
.fs-p-98 .fs-before-after-board-hero__sub { color: var(--fs-muted); }
/* 히어로 버튼 둘 — 10-12 병원 PPT 슬 4(제목 「전후사진」). 100 리얼후기 §9-1 과 같은 버튼이고
   이 히어로는 가운데 정렬이라 줄도 가운데. 카카오 = #FEE500 · #191919(13.6:1). */
.fs-p-98 .fs-before-after-board-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fs-sp-3);
  margin-block-start: clamp(4px, 1.7px + 0.641vw, 14px);
}
.fs-p-98 .fs-before-after-board-hero__cta .fs-btn {
  min-inline-size: 150px;
  justify-content: center;
}
.fs-p-98 .fs-before-after-board-hero__kakao {
  gap: var(--fs-sp-2);
  border-color: #FEE500;
  background: #FEE500;
  color: #191919;
}
.fs-p-98 .fs-before-after-board-hero__kakao img { inline-size: 18px; block-size: auto; }
@media (max-width: 599px) {
  .fs-p-98 .fs-before-after-board-hero__cta { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; }
  .fs-p-98 .fs-before-after-board-hero__cta .fs-btn { min-inline-size: 0; }
}


/* ==========================================================================
   §2 · 전후사진 카드 (.fs-ba-card) ★ 시그니처
   사진 한 장 = Before|After 합성컷. 그래서 라벨바도 «한 줄을 2칸으로» 나눈다.
   ★ 사진에 구워져 있던 BEFORE(검정)/AFTER(주황) 띠는 _src/ba_bake.py 가 잘라냈다.
     주황은 시안 팔레트에 없고(LOCK 3) 시안 라벨바와 두 겹이 된다.
   ========================================================================== */
.fs-p-98 .fs-ba-card { display: block; }
.fs-p-98 .fs-ba-card__fig {
  margin: 0;
  display: block;
  overflow: hidden;                     /* 호버 확대분을 프레임 안에서 자른다 */
  background: var(--fs-cream);
}
.fs-p-98 .fs-ba-card__img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
/* 라벨바는 사진 «위» 층에 둔다 — 안 그러면 호버 확대분이 바를 덮는다. */
.fs-p-98 .fs-ba-card__bars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 4열 격자에서 한 칸이 385px(1920) 다. 기본 바(최대 50px)는 사진 높이의 22% 라
   너무 굵다 — 이 페이지의 격자 카드에서만 낮춘다. 색·글자색·정렬은 그대로다. */
.fs-p-98 .fs-ba-card__bars .fs-labelbar {
  min-height: clamp(24px, 22.2px + 0.481vw, 32px);
  font-size: var(--fs-t-xs);
  letter-spacing: 0.06em;
}
.fs-p-98 .fs-ba-card__title {
  margin-block-start: var(--fs-sp-4);
  min-block-size: 3.4em;
  font-size: var(--fs-t-sm);
  font-weight: 600;
  line-height: var(--fs-lh-body);
  color: var(--fs-ink);
  word-break: keep-all;
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-98 .fs-ba-card__fig:hover .fs-ba-card__img { transform: scale(1.045); }
}

/* 86건짜리 격자다 — 360px 에서 1열로 두면 페이지가 28,000px 가 된다(실측).
   컨택트시트 성격이므로 좁은 폭에서도 2열로 둔다. fs-grid--4 의 기본(1열)을 덮어쓴다. */
.fs-p-98 .fs-before-after-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .fs-p-98 .fs-before-after-board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-98 .fs-before-after-board-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 대표 2건 — 격자 카드(340px)와 위계를 벌린다. 1920 에서 한 장 790px 로 2.3배다.
   ★ 왜 «2건» 인가: 86 − 2 = 84 는 2·3·4 로 모두 나누어떨어진다. 1건만 빼면
     격자가 85장이 되어 1920(4열)에서 마지막 줄에 한 장만 남는 고아 칸이 생긴다. */
.fs-p-98 .fs-before-after-board-lead {
  list-style: none;
  margin: 0 0 clamp(30px, 25.4px + 1.282vw, 50px);
  padding: 0;
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .fs-p-98 .fs-before-after-board-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fs-p-98 .fs-ba-card--lead .fs-ba-card__bars .fs-labelbar {
  min-height: clamp(28px, 26.5px + 0.449vw, 50px);
  font-size: var(--fs-t-pill);
}
.fs-p-98 .fs-ba-card--lead .fs-ba-card__title {
  min-block-size: 0;
  text-align: center;
  font-size: var(--fs-t-body);
}


/* 회원 전용 표시는 2026-10-12 병원 PPT 슬 5(승인자 D1 = B)로 화면에서 뺐다.
   회원 전용 요건 자체는 그대로다 — 아래 #steps 가 로그인 안내를 맡는다. */


/* ==========================================================================
   §3 · 카테고리 필 바 + 분류 필터 (.fs-before-after-board-tabs)
   ★ 배선은 <main> 직계 라디오 4개 + 형제 결합자(~) — JS 0줄, 100 과 같은 처방.
     라디오가 #board «밖»(형)에 있어야 ~ 가 닿는다. 안으로 옮기면 조용히 죽는다.
   ========================================================================== */
.fs-p-98 .fs-before-after-board-cat {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.fs-p-98 .fs-before-after-board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-sp-3);
  /* 10-12 PPT 슬 5 「여백 넣어주세요」 — 전엔 탭과 사진이 붙어 있었다 */
  margin-block-end: var(--fs-sp-10);
}
@media (max-width: 599px) {
  .fs-p-98 .fs-before-after-board-tabs { margin-block-end: var(--fs-sp-7); }
}
.fs-p-98 .fs-before-after-board-tabs__pill {
  cursor: pointer;
  transition: background-color var(--fs-dur) var(--fs-ease),
              color var(--fs-dur) var(--fs-ease);
}
.fs-p-98 .fs-before-after-board-tabs__note {
  margin-block-start: var(--fs-sp-6);
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
}
.fs-p-98 .fs-before-after-board-count {
  margin-block: var(--fs-sp-9) var(--fs-sp-7);
  font-size: var(--fs-t-sub);
  font-weight: 700;
  letter-spacing: var(--fs-ls-tight);
  color: var(--fs-ink);
}
/* <b>·<strong> 의 기본값 bolder 는 700 부모 안에서 900 으로 풀린다 — LOCK 7 상한 위반. */
.fs-p-98 .fs-before-after-board-count b { color: var(--fs-teal-dk); font-weight: inherit; }
.fs-p-98 .fs-before-after-board-tabs__note strong { font-weight: 700; }
.fs-p-98 .fs-before-after-board-count > span { display: none; }
.fs-p-98 .fs-before-after-board-scope > span { display: none; }

/* --- 배선 ① 제목의 틸 낱말이 고른 분류를 따라간다 ----------------------- */
.fs-p-98 #ba-all:checked  ~ #board .fs-before-after-board-scope > .is-all,
.fs-p-98 #ba-nose:checked ~ #board .fs-before-after-board-scope > .is-nose,
.fs-p-98 #ba-eye:checked  ~ #board .fs-before-after-board-scope > .is-eye,
.fs-p-98 #ba-etc:checked  ~ #board .fs-before-after-board-scope > .is-etc { display: inline; }

/* --- 배선 ② 건수 ------------------------------------------------------- */
.fs-p-98 #ba-all:checked  ~ #board .fs-before-after-board-count > .is-all,
.fs-p-98 #ba-nose:checked ~ #board .fs-before-after-board-count > .is-nose,
.fs-p-98 #ba-eye:checked  ~ #board .fs-before-after-board-count > .is-eye,
.fs-p-98 #ba-etc:checked  ~ #board .fs-before-after-board-count > .is-etc { display: inline; }

/* --- 배선 ③ 고른 분류만 남긴다 (대표 카드도 같은 규칙을 받는다) --------- */
.fs-p-98 #ba-nose:checked ~ #board .fs-ba-card:not(.is-nose),
.fs-p-98 #ba-eye:checked  ~ #board .fs-ba-card:not(.is-eye),
.fs-p-98 #ba-etc:checked  ~ #board .fs-ba-card:not(.is-etc) { display: none; }

/* --- 배선 ④ 활성 필 ---------------------------------------------------- */
.fs-p-98 #ba-all:checked  ~ #board .fs-before-after-board-tabs__pill[for="ba-all"],
.fs-p-98 #ba-nose:checked ~ #board .fs-before-after-board-tabs__pill[for="ba-nose"],
.fs-p-98 #ba-eye:checked  ~ #board .fs-before-after-board-tabs__pill[for="ba-eye"],
.fs-p-98 #ba-etc:checked  ~ #board .fs-before-after-board-tabs__pill[for="ba-etc"] {
  background: var(--fs-teal-text);
  color: var(--fs-white);
}

/* --- 배선 ⑤ 화면 밖 라디오라 포커스 링이 안 보인다 — 짝 라벨에 그린다 --- */
.fs-p-98 #ba-all:focus-visible  ~ #board .fs-before-after-board-tabs__pill[for="ba-all"],
.fs-p-98 #ba-nose:focus-visible ~ #board .fs-before-after-board-tabs__pill[for="ba-nose"],
.fs-p-98 #ba-eye:focus-visible  ~ #board .fs-before-after-board-tabs__pill[for="ba-eye"],
.fs-p-98 #ba-etc:focus-visible  ~ #board .fs-before-after-board-tabs__pill[for="ba-etc"] {
  outline: 2px solid var(--fs-teal-dk);
  outline-offset: 2px;
}

/* 비활성 필 호버 — 활성 필(위 ④, id 를 가져 더 강하다)에는 안 걸린다 */
@media (hover: hover) and (pointer: fine) {
  .fs-p-98 .fs-before-after-board-tabs__pill:hover { background: var(--fs-teal-dk); }
}

.fs-p-98 .fs-before-after-board-grid__cap {
  margin-block-start: clamp(20px, 16.9px + 0.865vw, 33px);
  color: var(--fs-muted);
  text-align: center;
}


/* ==========================================================================
   §4 · 의료광고 주의 한 줄 (.fs-before-after-board-caution)
   2026-10-12 병원 PPT 슬 3(승인자 D2 = 예, 100 과 같은 모양) — 다크 밴드는
   지우고 한 줄만 사진 캡션 아래 «연한 글씨로 조그맣게».
   ========================================================================== */
.fs-p-98 .fs-before-after-board-caution {
  margin-block-start: var(--fs-sp-5);
  font-size: var(--fs-t-xs);
  line-height: var(--fs-lh-body);
  text-align: center;
  color: var(--fs-muted);
}


/* ==========================================================================
   §5 · 원본 게시판 열람 3스텝 (.fs-before-after-board-steps)
   fs.css 는 5단계 기준이라 1400px 부터 가로로 펴진다. 3단계뿐이므로
   1024px 부터 가로로 세운다(원 지름·커넥터 치수는 그대로).
   ========================================================================== */
@media (min-width: 1024px) {
  .fs-p-98 .fs-before-after-board-steps { flex-direction: row; justify-content: center; }
  .fs-p-98 .fs-before-after-board-steps .fs-steps__link { width: clamp(24px, -13.3px + 3.646vw, 70px); height: 3px; }
  .fs-p-98 .fs-before-after-board-steps .fs-steps__link--active {
    background: linear-gradient(90deg, var(--fs-teal) 0%, var(--fs-teal-btn) 100%);
  }
}
.fs-p-98 .fs-before-after-board-steps .fs-step { gap: var(--fs-sp-3); }
.fs-p-98 .fs-before-after-board-steps__icon {
  display: block;
  width: clamp(44px, 39.4px + 1.282vw, 64px);
}
.fs-p-98 .fs-before-after-board-steps__icon img { display: block; width: 100%; height: auto; }
.fs-p-98 .fs-before-after-board-cta { margin-block-start: clamp(30px, 25.4px + 1.282vw, 50px); }
.fs-p-98 .fs-before-after-board-head { margin-block-end: var(--fs-gap-title); }


/* ==========================================================================
   §6 · 마이크로 — 섹션 제목 뒤 70px 틸 선 (delay .5s), 48 에서 검증된 것
   ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 안에 있던 대상에는 .fs-reveal 클래스 자체를 붙이지 않는다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal 에만 초기 은닉을 건다. (48.css 와 동일)
   ★ 기본 규칙에 #id 를 쓰면 은닉 규칙(클래스만)이 져서 선이 «항상 그어진 채» 굳는다.
     그래서 대상 지정을 클래스로만 한다.
   가운데정렬 .fs-display(다크 밴드)는 제외 — 왼쪽에서 자라는 선은 축이 어긋난다.
   ========================================================================== */
.fs-p-98 .fs-before-after-board-gal .fs-sec-head__title,
.fs-p-98 .fs-before-after-board-head h2 { position: relative; }

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


/* ==========================================================================
   §7 · reduced-motion — 이 파일이 새로 넣은 전환을 끈다.
   레이아웃에 관여하는 transform 은 이 파일에 없으므로 최종 상태 = 기본 상태.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fs-p-98 .fs-before-after-board-tabs__pill { transition: none !important; }
  .fs-p-98 .fs-before-after-board-gal .fs-sec-head__title::after,
  .fs-p-98 .fs-before-after-board-head h2::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-98 .fs-ba-card__img {
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   ▼▼▼ 2026-10-12 · 모바일 최적화(승인자 「오늘 수정한 페이지들 다 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측). 실측 _design/momeasure.py 360/390/540.
   백업 _src/build/backup-98-1012-mo/ (재현은 apply.py --from-backup).
   고아 줄(360/390, 전): 히어로 설명 「수술 전 · / 후」(→ nbsp 로 묶음) · 사진 캡션 두 문장(<br> → .fs-lead__s) ·
   주의 한 줄 · 로그인 안내 h2 「… 열람하실 / 수 있습니다」 · 리드 · 주소 · 시술명 캡션(2열 155px 칸에서 «+» 마다 갈림).
   배치는 그대로 — 사진 격자는 원래 좁은 폭 2열이고, 로그인 3단계 원은 80 처럼 둔다(MOBILE_RULES «놔둔 것»).
   ========================================================================== */
.fs-p-98 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-98 .fs-before-after-board-hero__sub,
.fs-p-98 .fs-ba-card__title,
.fs-p-98 .fs-before-after-board-caution,
.fs-p-98 #steps-title,
.fs-p-98 #steps .fs-nose-lead,
.fs-p-98 .fs-address { text-wrap: balance; }