/* ==========================================================================
   [135] 비용상담 — 페이지 전용 CSS
   전용 컴포넌트 3종
     .fs-cc-hero  … 폼 우선 2단 히어로(좌 사진 풀블리드 / 우 크림 패널에서 폼 시작)
     .fs-cc-chip  … 상담부위 15종 칩 셀렉터 (라디오 + 썸네일 + 라벨바, JS 0줄)
     .fs-cc-cost  … 부위별 비급여 진료비용 카드 (썸네일 + 라벨바 + 미니표)
   색은 전부 var(--fs-*) 토큰. 새 hex 없음.
   ========================================================================== */

/* ---------- A01 · 폼 우선 2단 히어로 ---------------------------------- */
.fs-p-135 .fs-cc-hero {
  min-height: clamp(360px, 336px + 1.667vw, 440px);
  background: var(--fs-cream);
  color: var(--fs-ink);
  /* fs.css:1092 의 .fs-hero{align-items:center} 를 되돌린다. 그대로 두면 min-height
     에서 남는 높이가 그리드 위아래로 갈려 «사진 위·아래에 크림 띠»가 생긴다
     (실측 1920 = 16px · 1024 = 28px). 사진과 폼 패널은 밴드를 꽉 채워야 한다. */
  align-items: stretch;
}
.fs-p-135 .fs-cc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}
.fs-p-135 .fs-cc-hero__visual {
  position: relative;
  isolation: isolate;
  min-height: clamp(240px, 216px + 6.667vw, 420px);
}
.fs-p-135 .fs-cc-hero__visual picture { position: absolute; inset: 0; z-index: 1; display: block; }
/* 2026-09-01 · 인테리어 컷 → 모델컷(hero-model.jpg 1600x900). 승인자 지시.
   46% 는 인테리어용 값이었다 — 모델은 머리끝이 원본 17.9% 라 46% 로 두면 1920(2.87:1 상자)에서
   보이는 띠가 15%~77% 가 되어 정수리가 잘린다. 30% 면 11.4%~73.4% 로 정수리·상반신이 다 들어온다. */
.fs-p-135 .fs-cc-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fs-p-135 .fs-cc-hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .5) 42%, rgba(255, 255, 255, 0) 76%);
}
.fs-p-135 .fs-cc-hero__copy {
  position: relative; z-index: 3;
  display: grid; gap: clamp(6px, 4.8px + 0.333vw, 12px);
  padding: clamp(24px, 21px + 0.833vw, 40px) var(--fs-gutter) var(--fs-sp-5);
}
.fs-p-135 .fs-cc-hero .fs-hero__kicker { color: var(--fs-teal-text); font-weight: 500; }
.fs-p-135 .fs-cc-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-135 .fs-cc-hero__panel {
  background: var(--fs-cream);
  padding: clamp(28px, 24px + 1.111vw, 56px) var(--fs-gutter);
  display: grid; align-content: start; gap: clamp(16px, 14px + 0.556vw, 30px);
}
.fs-p-135 .fs-cc-hero__lead { color: var(--fs-muted); }
.fs-p-135 .fs-cc-tel { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.fs-p-135 .fs-cc-tel__sep { color: var(--fs-muted); font-size: var(--fs-t-sm); }

@media (min-width: 1024px) {
  .fs-p-135 .fs-cc-hero__grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
  .fs-p-135 .fs-cc-hero__visual { min-height: 100%; }
  .fs-p-135 .fs-cc-hero__scrim {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .34) 46%, rgba(255, 255, 255, 0) 78%);
  }
  .fs-p-135 .fs-cc-hero__copy { padding-inline: clamp(40px, 24px + 1.111vw, 60px); }
  .fs-p-135 .fs-cc-hero__panel { padding-inline: clamp(36px, 20px + 1.667vw, 60px); }
}

/* ---------- A25 · 폼 본문 --------------------------------------------- */
.fs-p-135 fieldset.fs-form__row { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.fs-p-135 fieldset.fs-form__row > legend { padding: 0; }
.fs-p-135 .fs-cc-form__grid .fs-form__actions { justify-content: center; }
.fs-p-135 .fs-cc-form__grid .fs-btn--submit { min-width: clamp(180px, 168px + 0.833vw, 240px); }
.fs-p-135 .fs-cc-form__grid { display: grid; gap: clamp(30px, 26px + 1.111vw, 52px); }
.fs-p-135 .fs-cc-policy { height: clamp(200px, 188px + 0.833vw, 260px); }
.fs-p-135 .fs-cc-policy p + p { margin-block-start: var(--fs-sp-3); }
.fs-p-135 .fs-cc-agree { margin-block-start: var(--fs-sp-4); }
.fs-p-135 .fs-cc-form__note { margin-block-start: var(--fs-sp-3); }

/* 상담부위 칩 셀렉터 — 라디오 15개, 드롭다운 없음 */
.fs-p-135 .fs-cc-chips {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; border: 0;
}
@media (min-width: 600px)  { .fs-p-135 .fs-cc-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-135 .fs-cc-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.fs-p-135 .fs-cc-chip { display: block; cursor: pointer; }
.fs-p-135 .fs-cc-chip__box {
  display: grid; grid-template-rows: auto auto;
  outline: 1px solid var(--fs-line);
  outline-offset: -1px;
  transition: outline-color var(--fs-dur-fast) var(--fs-ease), outline-width var(--fs-dur-fast) var(--fs-ease);
}
.fs-p-135 .fs-cc-chip__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.fs-p-135 .fs-cc-chip__media img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-135 .fs-cc-chip__bar { min-height: clamp(34px, 32px + 0.556vw, 44px); }
.fs-p-135 .fs-cc-chip input:checked ~ .fs-cc-chip__box { outline: 3px solid var(--fs-teal-dk); }
.fs-p-135 .fs-cc-chip input:checked ~ .fs-cc-chip__box .fs-cc-chip__bar { background: var(--fs-ink); }
.fs-p-135 .fs-cc-chip input:focus-visible ~ .fs-cc-chip__box { outline: 3px solid var(--fs-teal-dk); }

/* ---------- A05 · 접수 안내 인용 ------------------------------------- */
.fs-p-135 .fs-cc-guide__fig { display: grid; }
.fs-p-135 .fs-cc-guide__fig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.fs-p-135 .fs-cc-guide__body { display: grid; align-content: center; gap: clamp(18px, 16px + 0.556vw, 28px); }
.fs-p-135 .fs-cc-dialog { border: 1px solid var(--fs-line-input); background: var(--fs-white); }
.fs-p-135 .fs-cc-dialog__msg {
  padding: clamp(24px, 21px + 0.833vw, 34px) var(--fs-sp-5);
  text-align: center; font-size: var(--fs-t-lead); font-weight: 600; color: var(--fs-ink);
}
.fs-p-135 .fs-cc-dialog__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--fs-line-input); }
.fs-p-135 .fs-cc-dialog__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; font-size: var(--fs-t-sm); font-weight: 600;
  color: var(--fs-muted);
}
.fs-p-135 .fs-cc-dialog__btn + .fs-cc-dialog__btn {
  border-inline-start: 1px solid var(--fs-line-input);
  background: var(--fs-teal-text); color: var(--fs-white);
}
.fs-p-135 .fs-cc-steps { display: grid; gap: var(--fs-sp-3); }

/* ---------- A21 · 부위별 비급여 진료비용 카드 ------------------------ */
.fs-p-135 .fs-cc-cost { display: grid; gap: var(--fs-gap-card); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px)  { .fs-p-135 .fs-cc-cost { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 4열은 1280 부터다. 1024 에서 4열로 가면 카드가 193px 이 되고 「명칭」 칸이 70px 로
   좁아져 «콧대 / (보형물) / +코끝 / 성형술» 처럼 한 항목이 네 줄로 쪼개진다.
   1024~1279 는 3열(카드 ≈ 310px)로 두면 1280 의 4열(≈282px)과 같은 밀도가 된다. */
@media (min-width: 1024px) { .fs-p-135 .fs-cc-cost { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .fs-p-135 .fs-cc-cost { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 카드 바닥은 행 단위로 맞춘다. align-self:start 로 두면 표의 행 수가 다른 만큼
   테두리 상자의 아래끝이 어긋난다(실측 1920 = 한 행 안에서 최대 133px).
   표 영역이 남는 높이를 흡수하고, 주석 띠는 카드 맨 아래에 붙는다. */
.fs-p-135 .fs-cc-cost__card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--fs-line);
}
.fs-p-135 .fs-cc-cost__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.fs-p-135 .fs-cc-cost__media img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-135 .fs-cc-cost__table { font-size: var(--fs-t-xs); }
.fs-p-135 .fs-cc-cost__table th,
.fs-p-135 .fs-cc-cost__table td { padding: var(--fs-sp-2) var(--fs-sp-3); }
.fs-p-135 .fs-cc-cost__table thead th { font-size: var(--fs-t-xs); white-space: nowrap; }
/* 비용 칸은 text-align:end 인데 머리글은 상속값 start 라 칸과 어긋나 보인다. */
.fs-p-135 .fs-cc-cost__table thead th + th { text-align: end; }
.fs-p-135 .fs-cc-cost__table td { text-align: end; white-space: nowrap; }
.fs-p-135 .fs-cc-cost__table tbody th { font-weight: 500; }
.fs-p-135 .fs-cc-cost__note {
  padding: var(--fs-sp-3);
  color: var(--fs-muted);            /* #7D7D7D(4.12:1) → 보정된 #6E6E6E(5.0:1) */
  border-block-start: 1px solid var(--fs-line);
  align-self: end;                   /* 카드가 늘어나도 주석 띠는 맨 아래에 */
}
.fs-p-135 .fs-cc-cost__foot { display: grid; gap: var(--fs-sp-5); justify-items: start; margin-block-start: clamp(28px, 25px + 0.833vw, 38px); }

/* ==========================================================================
   마이크로 인터랙션 — 48 에서 검증된 처방 2종
   ========================================================================== */

/* --- 1. 섹션 제목 뒤 70px 틸 선 (delay .5s) --------------------------- */
.fs-p-135 .fs-nose-head h2,
.fs-p-135 .fs-cc-guide__body h2{ position: relative; }

.fs-p-135 .fs-nose-head h2::after,
.fs-p-135 .fs-cc-guide__body h2::after{
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform-origin: left center;
  /* ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 안 된다. fs.js:235 는 첫 화면 안에
     있던 대상에는 .fs-reveal 클래스 자체를 안 붙인다(inFirstView 게이트).
     기본을 「그어진 상태」로 두고, 실제 리빌 대상에만 초기 은닉을 건다. */
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-135 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-135 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --- 2. 호버 — 프레임은 고정, 사진만 움직인다 (그림자는 쓰지 않는다) --- */
/* 두 미디어 상자는 자기 overflow:hidden 을 가지고 있어 확대된 사진이
   아래 라벨바를 덮지 않는다. 라벨바가 붙지 않은 .fs-cc-guide__fig 는
   클립 상자가 없어 확대분이 바 위로 올라오므로 대상에서 뺐다. */
.fs-p-135 .fs-cc-chip__media img,
.fs-p-135 .fs-cc-cost__media img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-135 .fs-cc-chip:hover .fs-cc-chip__media img,
  .fs-p-135 .fs-cc-cost__card:hover .fs-cc-cost__media img { transform: scale(1.045); }

  /* 15칸짜리 선택지라 «지금 어느 칸 위인가»가 보여야 한다. 고른 칸(3px teal-dk)과
     섞이지 않도록 아직 고르지 않은 칸의 헤어라인 색만 한 단계 올린다. */
  .fs-p-135 .fs-cc-chip:hover input:not(:checked) ~ .fs-cc-chip__box {
    outline-color: var(--fs-teal-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-p-135 .fs-cc-chip__box { transition: none; }
  .fs-p-135 .fs-cc-chip__media img,
  .fs-p-135 .fs-cc-cost__media img { transition: none; }
  .fs-p-135 .fs-nose-head h2::after,
  .fs-p-135 .fs-cc-guide__body h2::after{ transition: none; transform: scaleX(1); }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-135-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   줄바꿈: balance(상담부위 리드, 주소 — 360 「…본관 / 8층 /」) — HTML 무변경.
   배치: 무변경 — 상담부위 15칸은 이미 2열, 폼은 한 열. 개인정보 처리방침 스크롤 상자 법문은 손대지 않음(43 과 같은 판단).
   ========================================================================== */
.fs-p-135 #consult .fs-nose-lead,
.fs-p-135 .fs-address { text-wrap: balance; }