/* ==========================================================================
   105 · 비급여 진료수가 — 페이지 전용 CSS
   색은 전부 --fs-* 토큰. 셀렉터는 전부 .fs-p-105 스코프.
   전용 컴포넌트 5종:
     .fs-price-hero  크림 좌정렬 히어로(사진 0장)
     .fs-price-cats  진료과목 인덱스 카드
     .fs-price-rail  sticky 앵커 레일  ← signature move
     .fs-price-group 과목 블록(플레이트 + 표)
     .fs-price-table 수가표 확장
     .fs-price-note  특이사항 카드
   ========================================================================== */

/* --- 1. 히어로 (사진 배경 + 스크림) ------------------------------------
   2026-09-01 승인자 지시 — 「헤더의 적절한 이미지 하나를 배경으로」.
   크림 단색 밴드에 비용상담(consult-cost) 히어로 사진을 깔았다.
   · 3층을 명시한다 — 사진 z-index 0 / 스크림 1 / 카피 2.
   · 사진에 「FOR YOUR FOREVER…」 네온이 원본 y≈500~545 에 구워져 있다.
     밴드가 얇아 세로로 크게 잘리므로 object-position 78% 로 내려 소파·대리석 바닥
     구간(원본 y 730~1060)만 보이게 했다 — 어느 폭에서도 네온이 프레임 밖이다.
   · 글자는 전부 흰 계열로 뒤집었다. --fs-teal-text(#00787F)·--fs-muted 는
     밝은 배경 전용이라 여기서는 AA 미달이다(107·106 과 같은 함정). */
/* 배경·글자색은 셸의 .fs-section--ink 가 준다(마크업에 클래스로 붙였다).
   직접 칠하면 fs.css 의 .fs-kicker AA 보정 3단 분기(--beige/--ink/--ink2)에
   안 걸려 킥커가 --fs-teal-text(#00787F) 로 남고 #111 위에서 3.59:1 이 된다.
   그 규칙은 :not() 3연발이라 특정성 (0,4,0) — 페이지 CSS (0,3,0) 로는 못 이긴다. */
.fs-p-105 .fs-price-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fs-p-105 .fs-price-hero__bg { position: absolute; inset: 0; z-index: 0; }
.fs-p-105 .fs-price-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-p-105 .fs-price-hero__bg img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 78%;
}
.fs-p-105 .fs-price-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(17, 17, 17, .86) 0%, rgba(17, 17, 17, .82) 55%, rgba(17, 17, 17, .88) 100%);
}
.fs-p-105 .fs-price-hero > .fs-container { position: relative; z-index: 2; }
.fs-p-105 .fs-price-hero__title { color: var(--fs-on-dark); }
.fs-p-105 .fs-price-hero .fs-muted { color: var(--fs-white); }
.fs-p-105 .fs-price-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-sp-7);
  align-items: end;
}
.fs-p-105 .fs-price-hero__title {
  margin-block-start: var(--fs-sp-3);
  font-size: var(--fs-t-h1);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  letter-spacing: var(--fs-ls-tight);
}
.fs-p-105 .fs-price-hero__lead { margin-block-start: var(--fs-sp-5); max-width: 46ch; }
.fs-p-105 .fs-price-hero__meta {
  display: grid;
  gap: var(--fs-sp-1);
  border-inline-start: 2px solid var(--fs-teal);
  padding-inline-start: var(--fs-sp-5);
}
@media (min-width: 1024px) {
  .fs-p-105 .fs-price-hero__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .fs-p-105 .fs-price-hero__meta {
    text-align: end;
    border-inline-start: 0;
    border-inline-end: 2px solid var(--fs-teal);
    padding-inline: 0 var(--fs-sp-5);
  }
}

/* --- 2. 진료과목 인덱스 카드 ------------------------------------------- */
.fs-p-105 .fs-price-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
  list-style: none;
}
@media (min-width: 600px)  { .fs-p-105 .fs-price-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-105 .fs-price-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-p-105 .fs-price-cats__link {
  display: grid;
  grid-template-rows: 1fr auto auto;
  height: 100%;
  border: 1px solid var(--fs-line);
  background: var(--fs-white);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--fs-dur) var(--fs-ease);
}
.fs-p-105 .fs-price-cats__link:hover,
.fs-p-105 .fs-price-cats__link:focus-visible { border-color: var(--fs-teal); }
/* 호버는 «프레임 고정 + 아이콘만 확대» 다(48·107 검증분). 카드째 들어올리면
   그림자 없는 시스템에서 «떠 있는 상자» 의 문법을 빌려 쓰게 된다 — 2차 규칙 「그림자 0」. */
.fs-p-105 .fs-price-cats__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fs-sp-6) var(--fs-sp-5);
  background: var(--fs-cream-2);
  overflow: hidden;
}
.fs-p-105 .fs-price-cats__plate img {
  width: clamp(52px, 40px + 3vw, 82px);
  height: clamp(52px, 40px + 3vw, 82px);
  object-fit: contain;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
.fs-p-105 .fs-price-cats__link:hover .fs-price-cats__plate img,
.fs-p-105 .fs-price-cats__link:focus-visible .fs-price-cats__plate img { transform: scale(1.045); }
.fs-p-105 .fs-price-cats__count {
  padding: var(--fs-sp-3) var(--fs-sp-4) var(--fs-sp-5);
  font-size: var(--fs-t-sm);
  color: var(--fs-muted);
  text-align: center;
}

/* --- 3. sticky 앵커 레일 (signature move) ------------------------------ */
.fs-p-105 .fs-price-rail {
  margin-block: var(--fs-gap-title) var(--fs-sp-10);
  padding-block: var(--fs-sp-3);
  border-block: 1px solid var(--fs-line);
  background: var(--fs-white);
}
.fs-p-105 .fs-price-rail__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-sp-2);
  list-style: none;
}
.fs-p-105 .fs-price-rail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-sp-1);
  min-height: 34px;
  padding-inline: var(--fs-sp-5);
  border: 1px solid var(--fs-line-control);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-t-pill);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fs-ink-soft);
  text-decoration: none;
  transition: background-color var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease), border-color var(--fs-dur) var(--fs-ease);
}
.fs-p-105 .fs-price-rail__link:hover,
.fs-p-105 .fs-price-rail__link:focus-visible {
  border-color: var(--fs-teal-text);
  color: var(--fs-teal-dk);
}
.fs-p-105 .fs-price-rail__ic {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}
@media (min-width: 1024px) {
  .fs-p-105 .fs-price-rail {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--fs-z-nav);
  }
}
/* 필을 누르면 그 필이 채워진다 (:target + :has) — «다른 엔진용 보조 표시»다.
   Chrome 은 :has() 안의 :target 을 스타일 적용 경로에서 무시한다(matches() 는 true 인데
   computed 는 transparent). Chrome 에서 실제로 도는 현재 항목 표시는 아래 view-timeline 쪽이다.
   목적지 쪽 :target(.fs-price-group:target …)은 :has() 밖이라 정상 동작한다. */
.fs-p-105:has(#g-eye:target)      .fs-price-rail__link[href="#g-eye"],
.fs-p-105:has(#g-nose:target)     .fs-price-rail__link[href="#g-nose"],
.fs-p-105:has(#g-lift:target)     .fs-price-rail__link[href="#g-lift"],
.fs-p-105:has(#g-contour:target)  .fs-price-rail__link[href="#g-contour"],
.fs-p-105:has(#g-fat:target)      .fs-price-rail__link[href="#g-fat"],
.fs-p-105:has(#g-inject:target)   .fs-price-rail__link[href="#g-inject"],
.fs-p-105:has(#g-skin:target)     .fs-price-rail__link[href="#g-skin"],
.fs-p-105:has(#g-hair:target)     .fs-price-rail__link[href="#g-hair"],
.fs-p-105:has(#g-care:target)     .fs-price-rail__link[href="#g-care"],
.fs-p-105:has(#g-material:target) .fs-price-rail__link[href="#g-material"],
.fs-p-105:has(#g-drug:target)     .fs-price-rail__link[href="#g-drug"],
.fs-p-105:has(#g-cert:target)     .fs-price-rail__link[href="#g-cert"] {
  border-color: var(--fs-teal-dk);
  background: var(--fs-cream);
  color: var(--fs-teal-dk);
}


/* 스크롤 위치에 따른 현재 과목 표시 — 스크롤 타임라인(지원 브라우저 한정, 미지원 시 무시된다) */
.fs-p-105 {
  timeline-scope:
    --tl-g-eye,
    --tl-g-nose,
    --tl-g-lift,
    --tl-g-contour,
    --tl-g-fat,
    --tl-g-inject,
    --tl-g-skin,
    --tl-g-hair,
    --tl-g-care,
    --tl-g-material,
    --tl-g-drug,
    --tl-g-cert;
}
.fs-p-105 #g-eye { view-timeline-name: --tl-g-eye; view-timeline-axis: block; }
.fs-p-105 #g-nose { view-timeline-name: --tl-g-nose; view-timeline-axis: block; }
.fs-p-105 #g-lift { view-timeline-name: --tl-g-lift; view-timeline-axis: block; }
.fs-p-105 #g-contour { view-timeline-name: --tl-g-contour; view-timeline-axis: block; }
.fs-p-105 #g-fat { view-timeline-name: --tl-g-fat; view-timeline-axis: block; }
.fs-p-105 #g-inject { view-timeline-name: --tl-g-inject; view-timeline-axis: block; }
.fs-p-105 #g-skin { view-timeline-name: --tl-g-skin; view-timeline-axis: block; }
.fs-p-105 #g-hair { view-timeline-name: --tl-g-hair; view-timeline-axis: block; }
.fs-p-105 #g-care { view-timeline-name: --tl-g-care; view-timeline-axis: block; }
.fs-p-105 #g-material { view-timeline-name: --tl-g-material; view-timeline-axis: block; }
.fs-p-105 #g-drug { view-timeline-name: --tl-g-drug; view-timeline-axis: block; }
.fs-p-105 #g-cert { view-timeline-name: --tl-g-cert; view-timeline-axis: block; }
@keyframes fs-price-pill-on {
  from, to { border-color: var(--fs-teal-dk); background: var(--fs-cream); color: var(--fs-teal-dk); }
}
.fs-p-105 .fs-price-rail__link[href="#g-eye"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-eye; }
.fs-p-105 .fs-price-rail__link[href="#g-nose"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-nose; }
.fs-p-105 .fs-price-rail__link[href="#g-lift"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-lift; }
.fs-p-105 .fs-price-rail__link[href="#g-contour"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-contour; }
.fs-p-105 .fs-price-rail__link[href="#g-fat"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-fat; }
.fs-p-105 .fs-price-rail__link[href="#g-inject"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-inject; }
.fs-p-105 .fs-price-rail__link[href="#g-skin"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-skin; }
.fs-p-105 .fs-price-rail__link[href="#g-hair"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-hair; }
.fs-p-105 .fs-price-rail__link[href="#g-care"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-care; }
.fs-p-105 .fs-price-rail__link[href="#g-material"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-material; }
.fs-p-105 .fs-price-rail__link[href="#g-drug"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-drug; }
.fs-p-105 .fs-price-rail__link[href="#g-cert"] { animation: fs-price-pill-on linear; animation-duration: auto; animation-timeline: --tl-g-cert; }

/* --- 4. 과목 블록 ------------------------------------------------------ */
/* :target — 이동해 온 과목을 표시한다 */
.fs-p-105 .fs-price-group:target .fs-price-group__plate .fs-labelbar { background: var(--fs-teal-dk); }
.fs-p-105 .fs-price-group:target .fs-price-group__plate img { background: var(--fs-cream); }
/* VIBE LOCK 7-(e) — 제목에 밑줄·그라데이션을 걸지 않는다. 강조는 「글자를 틸로」다.
   밝은 면 위 틸 글자는 --fs-teal-text(#00787F) 여야 한다(LOCK 3-b). */
.fs-p-105 .fs-price-group:target .fs-h3 { color: var(--fs-teal-text); }

/* 레일이 붙는 폭에서는 레일 실측 높이(1024~1919 전부 98px) + 여백만큼 내려서 착지시킨다.
   96px 이면 과목 블록 머리가 레일 밑 2px 에 걸린다. */
.fs-p-105 .fs-price-group { scroll-margin-block-start: var(--fs-sp-5); }
@media (min-width: 1024px) {
  .fs-p-105 .fs-price-group { scroll-margin-block-start: calc(98px + var(--fs-sp-5)); }
}
.fs-p-105 .fs-price-group + .fs-price-group { margin-block-start: var(--fs-sp-10); }
.fs-p-105 .fs-price-group__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-5);
  align-items: center;
  margin-block-end: var(--fs-sp-5);
}
.fs-p-105 .fs-price-group__plate { width: clamp(76px, 64px + 2.4vw, 104px); }
.fs-p-105 .fs-price-group__plate img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  padding: var(--fs-sp-3);
  background: var(--fs-cream-2);
}
.fs-p-105 .fs-price-group__plate--light img { background: var(--fs-white); }
.fs-p-105 .fs-price-group__plate .fs-labelbar { min-height: 28px; font-size: var(--fs-t-xs); }

/* --- 5. 수가표 --------------------------------------------------------- */
.fs-p-105 .fs-price-table {
  min-width: 740px;
  font-variant-numeric: tabular-nums;
}
.fs-p-105 .fs-price-table--care { min-width: 780px; }
.fs-p-105 .fs-price-table--mat  { min-width: 620px; }
.fs-p-105 .fs-price-table--drug,
.fs-p-105 .fs-price-table--cert { min-width: 420px; }
.fs-p-105 .fs-price-table th,
.fs-p-105 .fs-price-table td {
  overflow-wrap: normal;
  word-break: keep-all;
  vertical-align: middle;
}
/* 머리 정렬은 그 열 «칸» 의 정렬을 따라간다 — 글자 열 start · 금액 열 end · O/X 열 center.
   center 를 기본으로 두면 「특이사항」(폭 317px) · 「항목」(778px) 처럼 넓은 글자 열에서
   머리와 칸이 최대 150px 어긋나 열이 두 줄로 읽힌다. 공용 .fs-table 도 start 가 기본이다(fs.css:838). */
.fs-p-105 .fs-price-table thead th {
  font-size: var(--fs-t-sm);
  line-height: 1.25;
  text-align: start;
  white-space: nowrap;
}
.fs-p-105 .fs-price-table thead th.fs-price-table__mark { text-align: center; }
.fs-p-105 .fs-price-table tbody th { font-weight: 500; font-size: var(--fs-t-body); }
.fs-p-105 .fs-price-table tbody td { color: var(--fs-ink-soft); }
.fs-p-105 .fs-price-table thead th.fs-price-table__num { text-align: end; }
.fs-p-105 .fs-price-table__num  { text-align: end; white-space: nowrap; }
.fs-p-105 .fs-price-table__mark { text-align: center; width: 92px; }
.fs-p-105 .fs-price-table__memo {
  display: flex;
  align-items: center;
  gap: var(--fs-sp-2);
  font-size: var(--fs-t-sm);
}
.fs-p-105 .fs-price-table__memoic {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* --fs-muted-2(#7D7D7D)는 흰 배경에서 4.12:1 로 AA 미달이다. --fs-muted 는 보정 후 #6E6E6E · 5.06:1. */
.fs-p-105 .fs-price-table__nil  { color: var(--fs-muted); }

/* 열 폭 — 표마다 열 수가 달라 thead 기준으로 잡는다 */
.fs-p-105 .fs-price-table thead th:nth-child(1) { width: 30%; }
.fs-p-105 .fs-price-table thead th:nth-child(2) { width: 14%; }
.fs-p-105 .fs-price-table thead th:nth-child(3) { width: 14%; }
.fs-p-105 .fs-price-table thead th:nth-child(4) { width: 10%; }
.fs-p-105 .fs-price-table thead th:nth-child(5) { width: 10%; }
.fs-p-105 .fs-price-table thead th:nth-child(6) { width: 22%; }
.fs-p-105 .fs-price-table--nomemo { min-width: 620px; }
.fs-p-105 .fs-price-table--nomemo thead th:nth-child(1) { width: 38%; }
.fs-p-105 .fs-price-table--nomemo thead th:nth-child(2) { width: 18%; }
.fs-p-105 .fs-price-table--nomemo thead th:nth-child(3) { width: 18%; }
.fs-p-105 .fs-price-table--nomemo thead th:nth-child(4) { width: 13%; }
.fs-p-105 .fs-price-table--nomemo thead th:nth-child(5) { width: 13%; }
.fs-p-105 .fs-price-table--care thead th:nth-child(1) { width: 12%; }
.fs-p-105 .fs-price-table--care thead th:nth-child(2) { width: 18%; }
.fs-p-105 .fs-price-table--care thead th:nth-child(3) { width: 34%; }
.fs-p-105 .fs-price-table--care thead th:nth-child(4) { width: 18%; }
.fs-p-105 .fs-price-table--care thead th:nth-child(5) { width: 18%; }
.fs-p-105 .fs-price-table--mat thead th:nth-child(1)  { width: 20%; }
.fs-p-105 .fs-price-table--mat thead th:nth-child(2)  { width: 54%; }
.fs-p-105 .fs-price-table--mat thead th:nth-child(3)  { width: 26%; }
.fs-p-105 .fs-price-table--drug thead th:nth-child(1),
.fs-p-105 .fs-price-table--cert thead th:nth-child(1) { width: 68%; }
.fs-p-105 .fs-price-table--drug thead th:nth-child(2),
.fs-p-105 .fs-price-table--cert thead th:nth-child(2) { width: 32%; }
.fs-p-105 .fs-price-table__name { display: inline; }
.fs-p-105 .fs-price-table__code {
  display: inline-block;
  margin-inline-start: var(--fs-sp-2);
  padding-inline: 6px;
  border: 1px solid var(--fs-line-control);
  font-size: var(--fs-t-xs);
  font-weight: 400;
  color: var(--fs-muted);
  white-space: nowrap;
  vertical-align: 1px;
}
.fs-p-105 .fs-price-hint {
  margin-block-start: var(--fs-sp-3);
  font-size: var(--fs-t-xs);
  color: var(--fs-muted);
}

/* --- 6. 특이사항 카드 -------------------------------------------------- */
.fs-p-105 .fs-price-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
  list-style: none;
}
@media (min-width: 600px)  { .fs-p-105 .fs-price-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fs-p-105 .fs-price-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fs-p-105 .fs-price-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-5);
  align-items: start;
  border: 1px solid var(--fs-line);
  padding: var(--fs-sp-5);
}
.fs-p-105 .fs-price-note__fig { width: 76px; }
.fs-p-105 .fs-price-note__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  padding: var(--fs-sp-2);
  background: var(--fs-cream-2);
}
.fs-p-105 .fs-price-note__fig .fs-labelbar { min-height: 24px; font-size: var(--fs-t-xs); }
.fs-p-105 .fs-price-note__txt {
  font-size: var(--fs-t-lead);
  font-weight: 600;
  line-height: var(--fs-lh-head);
  color: var(--fs-ink);
}
.fs-p-105 .fs-price-note__body > .fs-sm { margin-block-start: var(--fs-sp-3); }
.fs-p-105 .fs-price-sub { margin-block-start: var(--fs-sp-12); }
.fs-p-105 .fs-price-howto { margin-block-start: var(--fs-sp-6); }
.fs-p-105 .fs-price-howto .fs-price-note__txt { font-size: var(--fs-t-sub); }

/* --- 7. 다크 CTA 밴드 -------------------------------------------------- */
.fs-p-105 .fs-price-cta__bar { margin-block-start: var(--fs-sp-9); }
.fs-p-105 .fs-price-cta__tel { margin-block-start: var(--fs-sp-6); }
.fs-p-105 .fs-price-cta__tel a { color: var(--fs-on-dark); text-decoration: none; }
.fs-p-105 .fs-price-cta__tel a:hover { text-decoration: underline; }

/* --- 8. 섹션 제목 뒤 70px 틸 선 (48·107·116 검증분) ----------------------
   표와 글자만으로 이어지는 문서형 페이지라 섹션의 시작점을 눈으로 짚을 표시가 없었다.
   ★ 기본값은 「그어진 상태」다. fs.js 는 첫 화면 대상에 .fs-reveal 을 아예 안 붙이므로
     «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영영 안 그어진다(48 함정).
     초기 은닉은 fs.js 가 실제로 리빌 대상으로 고른 .fs-reveal 에만 건다.
     이 페이지의 제목 컨테이너는 전부 .fs-nose-head 라 ID 로 열거하지 않는다 —
     ID 선택자가 섞이면 (1,1,1) 이 은닉 규칙 (0,5,2) 를 이겨 선이 굳는다. */
.fs-p-105 .fs-nose-head h2 { position: relative; }
.fs-p-105 .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-105 .fs-nose-head.fs-reveal:not(.is-in) h2::after,
:root.fs-js .fs-p-105 .fs-reveal:not(.is-in) .fs-nose-head h2::after { transform: scaleX(0); }

/* --- 9. reduced-motion — 이동을 만드는 모션만 무효화한다.
   레일 필의 스크롤 연동 표시는 위치를 바꾸지 않는 색 상태라 두 모드가 같은 화면이 되도록 그대로 둔다. */
@media (prefers-reduced-motion: reduce) {
  .fs-p-105 .fs-price-cats__link,
  .fs-p-105 .fs-price-cats__plate img,
  .fs-p-105 .fs-price-rail__link { transition: none !important; }
  .fs-p-105 .fs-price-cats__link:hover .fs-price-cats__plate img,
  .fs-p-105 .fs-price-cats__link:focus-visible .fs-price-cats__plate img { transform: none !important; }
  .fs-p-105 .fs-nose-head h2::after { transform: scaleX(1) !important; transition: none !important; }
}

/* 10-12 스크롤 모션 — 위로 스크롤해 고정 헤더가 나타나면(:root.fs-hdr-on, fs.js initHeader) 레일이 헤더 높이만큼 비킨다. transform 만. */
@media (min-width: 1024px) {
  .fs-p-105 .fs-price-rail { transition: translate 400ms var(--fs-ease-out); }
  :root.fs-hdr-on .fs-p-105 .fs-price-rail { translate: 0 var(--fs-header-h); }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈만, 배치 무변경. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-105-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 특이사항 「비용 / 추가」 → 「비용 추가」 · 대상 시술 줄의 「 · 」 앞  (가운뎃점이 줄 머리로 가지 않게 — 라우터가 번역문에 하는 처리와 같다) ·
     분류 카드 라벨바 · 리드 · h2 · 특이사항 글 · 히어로 리드 · 주소 balance.
   · 놔둔 것: 수가표 5열(항목·최저·최고·재료대·약제비)은 min-width + 가로 스크롤 + 「표를 옆으로 밀면…」 안내 그대로(MOBILE_RULES §2 F — 4열 이상은 스크롤 유지). */
.fs-p-105 .fs-labelbar,
.fs-p-105 .fs-nose-lead,
.fs-p-105 .fs-h2,
.fs-p-105 .fs-price-note__txt,
.fs-p-105 .fs-price-note__body .fs-sm,
.fs-p-105 .fs-price-hero__lead,
.fs-p-105 .fs-address { text-wrap: balance; }