@charset "utf-8";
/* ==========================================================================
   assets/page/prep.css — 「준비 중」 스텁 페이지 공용 규칙
   2026-09-10 신설. 병원 요청서(리뷰티 수정(병원소개).pptx 슬라이드 1 · 5번 포유리프팅)에
   미니거상술·목리프팅·실리프팅 세 시술이 새로 들어왔는데 원본·클론·관리자 백업 어디에도
   본문이 없다(62·114 는 meta 키워드에만 나온다). 승인자 지시대로 「빈 자리」로 세운다.
   세 장이 같은 뼈대라 페이지마다 CSS 를 따로 두지 않고 이 한 벌을 공유한다 —
   본문에 .fs-p-prep 를 슬러그 클래스와 «함께» 붙인다.
     <body class="fs-page-nose fs-p-prep fs-p-mini-lift">
   전용 컴포넌트 : .fs-prep-hero / .fs-prep-ready / .fs-prep-sib
   색·간격·글자는 전부 기존 --fs-* 토큰만 쓴다 (새 hex 0개).
   ========================================================================== */

/* --- 1. 크림 문서형 히어로 (사진 0장 · 틸 세로 룰) -------------------------
   내용이 없는 페이지에 시술 모델컷을 얹으면 그 사진이 그 시술의 결과처럼 읽힌다.
   그래서 사진을 쓰지 않는다 — 96·105 의 「사진 0장 히어로」와 같은 판단이다.
   밴드색은 크림, 바로 다음 섹션은 흰색이라 LOCK 4 (b) 리듬이 산다. */
.fs-p-prep .fs-prep-hero { position: relative; }
.fs-p-prep .fs-prep-hero__inner {
  display: grid;
  justify-items: start;
  gap: var(--fs-sp-4);
  border-inline-start: 2px solid var(--fs-teal);
  padding-inline-start: clamp(18px, 14.3px + 1.026vw, 34px);
}
.fs-p-prep .fs-prep-hero__title {
  font-size: var(--fs-t-h1);
  line-height: var(--fs-lh-tight);
  font-weight: 700;
}
.fs-p-prep .fs-prep-hero__lead { max-width: 46ch; }

/* --- 2. 준비중 안내 -------------------------------------------------------- */
.fs-p-prep .fs-prep-ready__icon { display: block; width: clamp(84px, 76.8px + 2vw, 120px); margin-inline: auto; }
.fs-p-prep .fs-prep-ready__icon img { display: block; width: 100%; height: auto; }
.fs-p-prep .fs-prep-ready__title { margin-block-start: var(--fs-sp-6); }
.fs-p-prep .fs-prep-ready__lead { max-width: 52ch; margin-inline: auto; margin-block-start: var(--fs-sp-4); }
.fs-p-prep .fs-prep-ready__meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fs-sp-3);
  margin-block-start: var(--fs-sp-6);
}
.fs-p-prep .fs-prep-ready__cta { margin-block-start: var(--fs-sp-9); }

/* --- 3. 포유리프팅 형제 시술 ----------------------------------------------
   카드 전체를 링크로 쓰되 <a> 자신을 그리드로 둔다 — absolute 스트레치드링크는
   라벨바를 덮는다. li 안의 <a> 는 기본적으로 안 늘어나므로 height:100% 를 명시한다.
   사진·라벨 짝은 62 의 .fs-lifting-menu 에서 그대로 가져왔다(같은 시술 = 같은 컷). */
.fs-p-prep .fs-prep-sib__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-col);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-prep .fs-prep-sib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-prep .fs-prep-sib__item:last-child { grid-column: span 2; max-width: calc(50% - (var(--fs-gap-col) / 2)); margin-inline: auto; }
}
@media (min-width: 1024px) {
  .fs-p-prep .fs-prep-sib__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-prep .fs-prep-sib__item { display: grid; }
.fs-p-prep .fs-prep-sib__card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: var(--fs-white);
  color: inherit;
  text-decoration: none;
}
.fs-p-prep .fs-prep-sib__fig { margin: 0; display: grid; }
.fs-p-prep .fs-prep-sib__fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.fs-p-prep .fs-prep-sib__text {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted-2);
  padding: var(--fs-sp-5);
}

/* 2026-09-14 · 카테고리 틴트 — 준비중 스텁의 크림 히어로 밴드를 카테고리 틴트로 (body.fs-cat-* 가 있을 때만). 사진 없는 밴드라 색만. */
body[class*="fs-cat-"] .fs-prep-hero { background: var(--fs-cat-hex); }

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   스텁 7장 공용(mini-lift · neck-lift · nose-thread · skincare · thread-lift · botox · filler). 백업 _src/build/backup-prep-1022-mo · 실측 _design/momeasure.py 360/390/540.
   · 줄바꿈: 준비중 제목 「… 준비 / 중입니다」 → 「준비&nbsp;중」(HTML 7장) + balance · 리드 4줄 끝 「답변드립니다.」 외톨이 · 히어로 리드 · 형제 카드 설명 · 주소 balance.
   · 배치: 형제 시술 3장 <600 1열(사진 4:3 전폭 + 설명, 장당 ≈400px) → «사진+라벨바 왼쪽 · 설명 오른쪽» 행(MOBILE_RULES §2 B — no-implant 유형별 6장과 같은 꼴). */
.fs-p-prep .fs-prep-ready__title,
.fs-p-prep .fs-prep-ready__lead,
.fs-p-prep .fs-prep-hero__lead,
.fs-p-prep .fs-prep-sib__text,
.fs-p-prep .fs-labelbar,
.fs-p-prep .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-prep .fs-prep-sib__grid { gap: var(--fs-sp-4); }
  .fs-p-prep .fs-prep-sib__card {
    grid-template-columns: min(42%, 200px) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
  }
  .fs-p-prep .fs-prep-sib__text {
    padding: var(--fs-sp-4);
    font-size: var(--fs-t-sm);
  }
}