/* ==========================================================================
   57 · 포시즌 기능코성형(코성형 허브) — 페이지 전용 CSS
   확정 시안이라 원래 page CSS 가 없었다(스타일 전부 fs.css). 2026-09-11 승인자 지시로
   히어로 규격 통일에 이어 오버레이 헤더까지 받으면서 처음 생긴 파일이다.
   body 에 fs-p-57 이 없어 스코프는 body.fs-page-nose 다 — 이 파일은 57 만 링크하므로 충돌 없음.
   ========================================================================== */
/* ==========================================================================
   2026-09-11 승인자 지시 「56 처럼 상단 메뉴바 그라디에이션」
   이 페이지는 헤더가 히어로 «위» 에 흰 막대로 얹혀 있어 그라디에이션을 줄 자리가 없었다.
   56 과 같은 오버레이 헤더(투명 · 히어로 위에 겹침 · fs.css:458)로 바꾸고, 밝은 히어로용
   변형(잉크 글자 · 흰 안개 .72→.38→0)을 47 등 19장과 같은 처방으로 깐다.
   HTML 변경은 <header> 의 클래스 하나뿐(fs-header--overlay). 문구 변경 0.
   히어로는 이제 y=0 부터 시작해 헤더 100px 이 그 위에 겹친다 — 56·47 과 같은 구조.
   ========================================================================== */
body.fs-page-nose .fs-header--overlay { color: var(--fs-ink); background: transparent; }
body.fs-page-nose .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%); }
body.fs-page-nose .fs-header--overlay .fs-gnb__link:hover,
body.fs-page-nose .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
body.fs-page-nose .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
body.fs-page-nose .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
body.fs-page-nose .fs-header--overlay .fs-allmenu { color: var(--fs-ink); }
body.fs-page-nose .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
body.fs-page-nose .fs-util__sep { opacity: .35; }

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 코성형 = 로즈 그레이지 #D8C9C4 (body.fs-cat-nose) — 확정 시안 57 변경 기록
   사진(nose/hero.jpg)은 배경이 이미 #D8C9C4 + 모델 뒤 흰 글로우라 컬러 워시 형태 그대로 — 재발주 없음.
   공용 블록이 바꾸는 것: 메뉴 안개 흰 → 연한 로즈(.62/.34/0) + 글자 후광 · 킥커 --fs-ink-soft → --fs-teal-dk 큰 글자(승인자 결정 B).
   카피 쪽(오른쪽, fs-hero--center) 스크림은 배경이 틴트와 같은 색이라 시각 변화 0 — 카테고리 규격 통일 목적으로만 둔다.
   ========================================================================== */
.fs-nose-hero .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(270deg, rgba(var(--fs-cat), .60) 0%, rgba(var(--fs-cat), .40) 35%, rgba(var(--fs-cat), 0) 60%);
}
@media (max-width: 1023px) { .fs-nose-hero .fs-hero__bg::after { content: none; } }

/* ==========================================================================
   ▼▼▼ 2026-10-13 · 병원 PPT 「리뷰티 수정(기능코).pptx」 반영 — 계획 _design/PLAN-57-1013-pptx.md
   이 블록은 _src/gen/57-pptx/new-block.css 가 원본이다. 57.css 를 직접 고치지 말고 거기 고친 뒤 css_build.py → finalize.py.
   ========================================================================== */
.fs-page-nose .fs-lead__s { display: block; text-wrap: balance; }   /* <br> 대신 문장 블록(MOBILE_RULES 1-4) */

/* --- P1. 히어로(슬 1) — 지급 사진은 모델이 화면 왼쪽(본인 오른쪽)을 본다.
   2차(같은 날) 승인자 「모델이 왼쪽 (좌우반전해줘) 그리고 텍스트가 오른쪽, 텍스트는 기존 히어로 포맷처럼 영문 위에」
   → 사진째 좌우반전(hero_build.py MIRROR) · 카피 상자를 컨테이너 52% 에서 시작 · 영문 킥커 / h1(정본 줄) / 슬 1 문구 리드.
   hero-1013.jpg 는 4:1 캔버스라 어느 폭이든 높이 맞춤 — object-position x 가 «얼굴 기준점 = 캔버스 34%» 를 화면 34% 에 둔다.
   <600 은 같은 캔버스를 x800~3100 만 자른 hero-1013-mo.jpg. 스크림은 09-14 블록의 270deg(카피 쪽 = 오른쪽) 그대로. */
.fs-nose-hero .fs-hero__bg img { object-position: 34% center; }
@media (max-width: 1023px) { .fs-nose-hero .fs-hero__bg img { object-position: 34% center; } }
@media (max-width: 599px)  { .fs-nose-hero .fs-hero__bg img { object-position: 62% center; } }
.fs-nose-hero .fs-hero__copy { margin-inline-start: 52%; }
/* <600 — 칸이 168px 라 h1 이 「포시즌 / 기능코성형」 으로 갈렸다 → 모델을 27px 왼쪽(62%)으로 밀고 카피를 46% 에서 */
@media (max-width: 599px)  { .fs-nose-hero .fs-hero__copy { margin-inline-start: 46%; } }
/* 영문 킥커 — no-implant 「NO IMPLANT RHINOPLASTY」 와 같은 크기·자간(코성형 B 규칙 0,3,1 을 같은 특정성·뒤 순서로) */
body.fs-cat-nose .fs-nose-hero .fs-hero__kicker {
  font-size: clamp(15px, 13.5px + 0.42vw, 21px); letter-spacing: 0.02em; font-weight: 500; line-height: 1.25;
}
.fs-nose-hero .fs-fx-hero__lead { margin-block-start: var(--fs-sp-2); font-size: var(--fs-t-lead); line-height: 1.5; color: var(--fs-ink); text-wrap: balance; }

/* --- P2. 포시즌 기능코성형 소개(슬 2) — 작은 「포시즌」 위 · 큰 「기능코성형」 아래 + 수술정보 6칸(51 P3·P10 과 같은 모양) --- */
.fs-fx-overview__brand { display: block; margin-block-end: .2em; font-size: .52em; font-weight: 600; letter-spacing: 0; color: var(--fs-ink-soft); }
.fs-fx-overview__lead { max-width: 58em; }
.fs-fx-spec {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--fs-sp-7); column-gap: var(--fs-sp-3);
  margin-block: clamp(28px, 23.4px + 1.28vw, 48px) 0;
  padding-block: clamp(24px, 21.2px + 0.77vw, 36px);
  border-block: 1px solid var(--fs-line);
}
.fs-fx-spec__item { display: grid; justify-items: center; align-content: start; gap: var(--fs-sp-2); text-align: center; }
.fs-fx-spec 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-fx-spec__ic {
  display: grid; place-items: center;
  width: clamp(62px, 55px + 1.4vw, 82px); aspect-ratio: 1; border-radius: 50%;
  background: var(--fs-cream);
}
.fs-fx-spec dt img { width: 62%; height: auto;   /* ic-*-c.png 96x96 #999 선 → 포인트 브라운(51 과 같은 필터) */
  filter: brightness(0) invert(20%) sepia(25%) saturate(600%) hue-rotate(338deg); }
.fs-fx-spec 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-fx-spec__note { margin-block-start: var(--fs-sp-3); font-size: var(--fs-t-sm); line-height: 1.5; color: var(--fs-muted-2); }
@media (min-width: 1024px) {
  .fs-fx-spec { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fs-fx-spec__item + .fs-fx-spec__item { border-inline-start: 1px solid var(--fs-line); }
}
@media (max-width: 599px) {
  .fs-fx-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 3열 칸 103px(360)이면 값이 갈린다 — 51 §2 A */
}

/* --- P3. 실비 보험 질환(슬 4) — 새 화풍 도해(800x600 판째 구운 PNG)를 카드 폭 가득 · 리드는 카드 아래 작은 주석 --- */
.fs-fx-dz .fs-nose-dz__fig { padding-block-start: 0; }
.fs-fx-dz .fs-nose-dz__ill { width: 100%; align-self: start; margin-block-end: 0; }
.fs-fx-dz__note { margin-block-start: clamp(16px, 13.7px + 0.64vw, 26px); font-size: var(--fs-t-sm); line-height: 1.6; color: var(--fs-muted-2); }
@media (min-width: 1024px) {
  .fs-fx-dz__note { grid-column: 2; }
}

/* --- P4. 치료법(슬 5 「배치 변경」) — 참고 화면(topps.co.kr/htm/nose_05_01.php 「기능코성형 수술방법」)처럼 질환마다 «제목 · 짧은 설명» 아래 번호 도해 줄.
   10-13 3차 승인자 「레이아웃 여기 참고, 코 내부 구조 질환의 치료법 섹션」 → 참고 화면 실측(1920): 컨테이너 가득 3열 · 큰 판 · 블록 사이 넓게 · 설명은 제목 바로 아래 한 덩어리 · 모바일 1열.
   ≥1024 3열(그림 2 · 3 · 4장 — 비염 4장은 «관상 단면 쌍 / 아래에서 본 쌍» 두 줄로 2+2) · 600~1023 2열 · <600 1열. 판 모서리는 사이트 규칙대로 직각. --- */
.fs-fx-tx__h2 { margin-block-end: clamp(34px, 26.6px + 2.05vw, 66px); }
.fs-fx-tx__block + .fs-fx-tx__block { margin-block-start: clamp(64px, 46.5px + 4.87vw, 140px); }
.fs-fx-tx__text { display: grid; justify-items: start; }
.fs-fx-tx__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); letter-spacing: var(--fs-ls-tight); }
.fs-fx-tx__desc { margin-block-start: clamp(10px, 8.2px + 0.51vw, 18px); color: var(--fs-ink-soft); }
/* 「치료법」 필은 첫 문장 앞에 붙이고 문장 블록은 오른쪽 열로 — 설명과 한 덩어리로 읽히게(참고 화면은 설명 2줄뿐) */
.fs-fx-tx__how {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--fs-sp-3); align-items: start;
  margin-block-start: clamp(8px, 6.6px + 0.38vw, 14px); color: var(--fs-ink-soft);
}
.fs-fx-tx__pill { grid-row: 1 / span 2; margin-block-start: .1em; }
.fs-fx-tx__how .fs-lead__s { grid-column: 2; }
.fs-fx-tx__row {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 24.3px + 1.03vw, 44px) clamp(16px, 8.1px + 2.18vw, 50px);
  margin: clamp(22px, 17.4px + 1.28vw, 42px) 0 0; padding: 0; list-style: none;
}
.fs-fx-tx__row > li { display: grid; min-width: 0; }
.fs-fx-tx__card { display: grid; grid-template-rows: auto 1fr; gap: clamp(12px, 10.2px + 0.51vw, 20px); margin: 0; }
.fs-fx-tx__ill { display: block; width: 100%; height: auto; }
.fs-fx-tx__cap { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
.fs-fx-tx__num { font-family: var(--fs-font-en); font-size: var(--fs-t-sm); font-weight: 700; line-height: 1.3; color: var(--fs-teal-dk); font-variant-numeric: tabular-nums; }
.fs-fx-tx__name { font-size: var(--fs-t-sub); font-weight: 700; line-height: var(--fs-lh-head); color: var(--fs-ink); text-wrap: balance; }
@media (min-width: 600px) {
  .fs-fx-tx__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-fx-tx__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-fx-tx__row--4 > li:nth-child(3) { grid-column: 1; }   /* 비염 4장 = 관상 단면 쌍 / 아래에서 본 쌍 */
}

/* --- P5. 실비보험 청구 절차(슬 6) — 제목만 가운데 · 리드는 원 아래 가운데 한 줄 · 5단계 모두 POINT 01 모양(마크업 fs-step--active) ---
   .fs-nose-head 의 justify-items:start 를 같은 특정성·뒤 순서로 이긴다(.fs-center 만으로는 못 이긴다). */
.fs-fx-steps__head { justify-items: center; text-align: center; }
.fs-nose-steps-sec .fs-fx-steps__lead { margin-block-start: clamp(26px, 21.4px + 1.28vw, 46px); text-align: center; }

/* --- P6. 줄바꿈(10-13 momeasure 360 · 390 · 768) — 청구 절차 리드 끝 「있습니다.」 외톨이 → balance ·
   질환 카드 라벨바가 360 칸 100px 에서 「비중격만곡 / 증」 으로 갈렸다(옛 57 도 같았다 [[fs-nose-dz-cards-3col]]) → <600 한 단 작게 + 어절 단위 --- */
.fs-nose-steps-sec .fs-fx-steps__lead { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-fx-dz .fs-nose-dz__fig .fs-labelbar { font-size: var(--fs-t-sm); padding-inline: 4px; word-break: keep-all; text-wrap: balance; }
}

/* --- P7. 타이포 6항 점검(10-13 승인자 체크리스트 「위계 · 크기·굵기 · 행간 · 자간 · 정렬·줄 길이 · 시각 보정」, typo.py 1920·1440·1024·390·360 실측) ---
   ① 히어로 h1 40px 이 섹션 h2(40)와 같아 위계가 안 섰다 — 같은 «영문 킥커 위» 포맷인 81 · no-implant 는 58. 같은 상한 58 로,
      모바일은 카피 칸(360 173px · 390 189px)에 「포시즌 기능코성형」(≈7em) 한 줄이 들어가는 크기에서 멈춘다(360 24.4 · 390 25.1 · 1024 41.6 · ≥1654 58).
   ⑤ 소개 리드 한 줄 67자(1920) — 사이트 리드 폭 34em(≈48자, 51 · no-implant)으로 묶는다.
   ⑥ 「치료법」 필(33px)이 첫 줄(25.5px) 위 끝에 맞춰 6.6px 아래로 처졌다 — 줄 가운데로(−0.22em). */
.fs-nose-hero .fs-hero__title { font-size: clamp(24px, 15px + 2.6vw, 58px); line-height: 1.15; }
.fs-fx-overview__lead { max-width: 34em; }
.fs-fx-tx__pill { margin-block-start: -0.22em; }

/* --- P8. 전후 사례 도트 = 사례 수(10-14 승인자 「사진 갯수에 맞게 맞춰줘」) ---
   fs.css 는 PC(≥64rem)에서 3번째 이후 도트를 숨겨 2개만 보였는데, 도트는 사례와 1:1 배선이라
   3·4번 사례를 보는 동안에는 켜진 도트가 하나도 없었다. 마크업에 data-fs-carousel-loop 를 걸어
   어느 사례든 왼쪽 칸에 올 수 있게 하고(4번 다음 칸은 1번), 도트 4개를 PC 에서도 다 보인다. */
@media (min-width: 64rem) {
  .fs-nose-ba [data-fs-carousel-dots] > .fs-carousel__dot:nth-child(n+3) { display: inline-block; }
}

/* --- P9. 모바일 최적화(10-14 승인자 「모바일 최적화도 진행」, MOBILE_RULES §1-5 · 1-7) — 마크업 몫은 mobile_1014.py ---
   확정 시안에서 온 섹션은 줄바꿈만. 외톨이(momeasure 360 · 390 · 540): 비교 대제목 「확연하게 / 차이나는」 · 전후 제목 「개선을 / 함께」 ·
   전후 주의문 540 「… 있으니 / 주의해야합니다.」 · 비교표 오른칸(<br> 을 PC 만 끊게 바꾼 뒤 줄 길이 고르기). 전 폭 — PC 는 모두 한 줄 덩어리라 rect 그대로. */
.fs-nose-compare-title, #ba-title, .fs-nose-ba__note, .fs-nose-compare__txt { text-wrap: balance; }

/* --- P10. 모바일 히어로 통일(10-14 승인자 「히어로 모바일로 봤을 때도 다른 페이지랑 똑같게 통일」) ---
   390 실측 105장 중 시술 페이지 34장이 «카피 밴드 위 / 3:4 세로 사진 아래» 스택인데 57 만 겹침형(323px · 카피가 오른쪽 189px 칸)이었다.
   값은 코성형 히어로 규정인 81 코재수술(09-21 승인자 「코성형 … 히어로 통일 — 규정 = 81 포맷」) + MOBILE_RULES §1-8(밴드 20/30 · 페이드 60) 그대로:
   밴드 = 카테고리 틴트 · 요소 간격 10 · 킥커 한 줄 · 제목 30.7px(390)/1.22 · 사진 3:4 아래 고정. 사진은 hero-1013-mo.jpg(1080x1440, hero_build.py).
   PC(≥1024)는 무변경 — 전부 이 미디어쿼리 안. P1 의 <1024 · <600 object-position · 카피 46% 는 여기서 덮는다. */
@media (max-width: 1023px) {
  .fs-nose-hero { min-height: 0; }
  .fs-nose-hero .fs-hero__bg { position: static; inset: auto; z-index: 0; grid-row: 2; }
  .fs-nose-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px);
            mask-image: linear-gradient(180deg, transparent 0, #000 60px);
  }
  .fs-nose-hero .fs-parallax__layer { transform: none !important; }   /* static 사진이 카피 위로 밀려 올라오지 않게(패럴랙스 배선은 PC 몫) */
  .fs-nose-hero .fs-hero__inner {
    grid-row: 1; background: var(--fs-cat-hex);
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-5)) var(--fs-sp-7);
  }
  .fs-nose-hero .fs-hero__copy { max-width: 100%; margin-inline-start: 0; gap: var(--fs-sp-3); }
  .fs-nose-hero .fs-hero__title { font-size: clamp(30px, 21.4px + 2.39vw, 58px); line-height: 1.22; }
  /* 밑줄 — 81 은 줄이 별도 요소라 «제목 → 간격 10 → 줄(위 4~6) → 아래 8 → 간격 10 → 리드», 57 은 fs.css 공용 ::after 라 첫 간격 10 이 없었다.
     공용 규칙(fs.css «서브 히어로 규격 통일», 0,7,2)과 같은 선택자 머리 · 뒤 순서로 위 여백에 간격 하나를 더한다. 리드 위 8 은 P1 그대로. */
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97) .fs-nose-hero .fs-hero__title::after {
    margin-block-start: calc(clamp(4px, 2.6px + 0.385vw, 10px) + var(--fs-sp-3));
  }
}

/* --- P11. 모바일 «PC 처럼»(10-14 승인자 캡처 「모바일에서도 pc처럼 보이게. 전체적으로 모바일 레이아웃 다시 봐줘」) ---
   확정 시안 섹션의 «줄바꿈만» 원칙(P9)을 승인자가 이 지시로 풀었다. PC(≥1024)는 무변경 — ④ 의 PC 값은 옛 per-view 2 · gap 40 과 같은 수. */

/* ① 비교표 — fs.css 는 <1024 에서 왼쪽 군(일반 코성형 사진)과 왼칸(회색)을 숨겨 «3D-CT 만» 남았다(원본 모바일 시안). PC 와 같은 3열 · 두 사진으로.
   head 를 표와 같은 3열로 잡고 왼쪽 군 = 1열 · 오른쪽 군 = 2~3열(PC 의 466 : 90+464 와 같은 짝, [[compare-head-gap-misaligns]]). */
@media (max-width: 1023px) {
  .fs-nose-compare__head,
  .fs-nose-compare .fs-compare__row { grid-template-columns: minmax(0, 1fr) clamp(52px, 36.6px + 4.28vw, 90px) minmax(0, 1fr); column-gap: 0; }
  .fs-nose-compare__group--left { display: flex; grid-column: 1; }
  .fs-nose-compare__group:not(.fs-nose-compare__group--left) { grid-column: 2 / -1; }
  .fs-nose-compare__group > .fs-pill { margin-block-end: var(--fs-sp-3); }
  .fs-nose-compare__panel--left { padding: clamp(5px, 2.3px + 0.75vw, 10px); }
  .fs-nose-compare .fs-compare__cell--left { display: flex; padding-inline: var(--fs-sp-3); }
  .fs-nose-compare .fs-compare__cell--right { padding-inline: var(--fs-sp-3); }
  .fs-nose-compare .fs-compare__cell--left,
  .fs-nose-compare .fs-compare__cell--right { font-size: clamp(14px, 11.36px + 0.733vw, 17px); line-height: 1.5; }
  .fs-nose-compare .fs-compare__cell--label { font-size: clamp(16px, 13.7px + 0.63vw, 21px); padding-inline: 2px; }
}

/* ② 3D-CT 코성형의 중요성 POINT 4장 — <600 한 줄 한 장(1,355px) → PC 처럼 한눈에 2×2. 아이콘 · 캡션만 한 단 작게. */
@media (max-width: 599px) {
  .fs-nose-points .fs-nose-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-sp-3); }
  .fs-nose-point { gap: var(--fs-sp-3); padding: var(--fs-sp-3) 6px var(--fs-sp-5); }
  .fs-nose-point .fs-card__icon { width: 64px; }
  .fs-nose-point .fs-card__caption { font-size: 14px; }
}

/* ③ 청구 절차 원 5개 — <1024 세로 1,617px(360) → PC 처럼 가로 한 줄 + 밀어 보기(§2 C, 진행 바). 원 200px · 연결선 가로.
   진행 바는 원 줄 아래 리드 위(리드 ::before) — 스크롤 상자 밖이라 같이 밀리지 않는다. */
@media (max-width: 1023px) {
  .fs-nose-steps-sec > .fs-container { timeline-scope: --p57-steps; }
  .fs-nose-steps-sec .fs-nose-steps {
    flex-direction: row; align-items: center; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--fs-gutter);
    margin-inline: calc(-1 * var(--fs-gutter)); padding-inline: var(--fs-gutter);
    scroll-timeline: --p57-steps inline;
  }
  .fs-nose-steps-sec .fs-nose-steps::-webkit-scrollbar { display: none; }
  .fs-nose-steps-sec .fs-nose-step { flex: 0 0 auto; width: 200px; scroll-snap-align: start; gap: 14px; padding: 26px 12px 12px; }
  .fs-nose-steps-sec .fs-nose-step .fs-pill { min-height: 28px; font-size: 13px; }
  .fs-nose-steps-sec .fs-nose-step .fs-step__text { font-size: 15px; }
  .fs-nose-steps-sec .fs-steps__link { width: 24px; height: 3px; }
  .fs-nose-steps-sec .fs-steps__link--active { background: linear-gradient(90deg, #97796E 0%, #D8CBC5 100%); }
  .fs-nose-steps-sec .fs-fx-steps__lead::before {
    content: ""; display: block; height: 2px; margin-block-end: var(--fs-sp-6);
    background-color: var(--fs-line-input);
    background-image: linear-gradient(var(--fs-teal), var(--fs-teal)); background-repeat: no-repeat;
    background-size: 40% 100%; background-position: 0% 0;
    animation: p57-steps-bar linear both; animation-timeline: --p57-steps;
  }
  .fs-nose-steps-sec .fs-fx-steps__lead { margin-block-start: var(--fs-sp-6); }
}
@keyframes p57-steps-bar { from { background-position-x: 0%; } to { background-position-x: 100%; } }

/* ④ 전후 사례 — §2 N(141 승인 패턴): <1024 는 다음 사례가 옆에 걸쳐 보이고(85% · 12px, 보이는 장 밖은 흐리게) 도트 양옆에 이전·다음 화살표.
   간격은 트랙에 직접(변수로 주면 fs.js 가 호스트에 인라인으로 박아 창 크기를 바꿀 때 옛 값이 남는다). */
.fs-fx-ba-peek { --fs-slide-w: calc((100% - 40px) / 2); }
.fs-fx-ba-peek .fs-carousel__track { gap: 40px; }
@media (max-width: 1023px) {
  .fs-fx-ba-peek { --fs-slide-w: 85%; }
  .fs-fx-ba-peek .fs-carousel__track { gap: 12px; }
  .fs-fx-ba-peek .fs-carousel__slide { transition: opacity var(--fs-dur-slow) var(--fs-ease-out); }
  .fs-fx-ba-peek .fs-carousel__slide:not(.is-active) { opacity: .45; }
  .fs-fx-ba-peek {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    column-gap: 14px; row-gap: clamp(15px, 9.69px + 1.474vw, 38px);
  }
  .fs-fx-ba-peek > .fs-nose-ba__viewport { grid-column: 1 / -1; }
  .fs-fx-ba-peek > .fs-nose-ba__nav { display: contents; }
  .fs-fx-ba-peek [data-fs-carousel-prev] { grid-row: 2; grid-column: 2; }
  .fs-fx-ba-peek > .fs-carousel__dots { grid-row: 2; grid-column: 3; margin-block-start: 0; }
  .fs-fx-ba-peek [data-fs-carousel-next] { grid-row: 2; grid-column: 4; }
}