@charset "utf-8";
/* ==========================================================================
   assets/page/press.css — [press] 언론보도 전용 규칙
   2026-09-10 신설. 병원 요청서(리뷰티 수정(병원소개).pptx 슬라이드 1 · 9번 커뮤니티)에
   「언론보도」가 들어오면서 만든 자리다. 원본·클론·관리자 백업 어디에도 기사 자료가
   없어 내용은 「준비 중」 안내로 두고, 대체 경로 3종(리얼후기·전후사진·포시즌유튜브)만
   연결한다. 자료가 들어오면 A03 자리를 기사 목록으로 바꾸면 된다.
   전용 컴포넌트 : .fs-press-hero / .fs-press-ready / .fs-press-alt
   색·간격·글자는 전부 기존 --fs-* 토큰만 쓴다 (새 hex 0개).
   ========================================================================== */

/* --- 1. 히어로 (사진 배경 + 스크림) --------------------------------------
   정본은 105 의 .fs-price-hero 다. 배경·글자색은 셸의 .fs-section--ink 가 준다 —
   직접 칠하면 fs.css 의 .fs-kicker AA 보정 3단 분기(:not() 3연발 · 특정성 (0,4,0))에
   안 걸려 킥커가 --fs-teal-text(#00787F) 로 남고 #111 위에서 3.59:1 이 된다.
   사진(리셉션 전경)은 상단이 흰 천장이라 그대로 두면 흰 글자가 죽는다 → 스크림 필수.
   3층을 명시한다 — 사진 z-index 0 / 스크림 1 / 카피 2. */
.fs-p-press .fs-press-hero { position: relative; isolation: isolate; overflow: hidden; }
.fs-p-press .fs-press-hero__bg { position: absolute; inset: 0; z-index: 0; }
.fs-p-press .fs-press-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-p-press .fs-press-hero__bg img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
.fs-p-press .fs-press-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(17, 17, 17, .88) 0%, rgba(17, 17, 17, .82) 55%, rgba(17, 17, 17, .88) 100%);
}
.fs-p-press .fs-press-hero > .fs-container { position: relative; z-index: 2; }
.fs-p-press .fs-press-hero__title {
  font-size: var(--fs-t-h1);
  line-height: var(--fs-lh-tight);
  font-weight: 700;
  color: var(--fs-on-dark);
  margin-block-start: var(--fs-sp-3);
}
.fs-p-press .fs-press-hero .fs-muted { color: var(--fs-white); }
.fs-p-press .fs-press-hero__lead { max-width: 46ch; margin-block-start: var(--fs-sp-4); }
.fs-p-press .fs-press-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-sp-7);
  align-items: end;
}
.fs-p-press .fs-press-hero__meta { display: grid; gap: var(--fs-sp-1); }
@media (min-width: 900px) {
  .fs-p-press .fs-press-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--fs-gap-col);
  }
  .fs-p-press .fs-press-hero__meta { text-align: end; justify-items: end; }
}

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

/* --- 3. 대체 경로 3종 ------------------------------------------------------
   카드 전체를 링크로 만들 때 .fs-labelbar 가 따라오도록 <a> 자신을 그리드로 쓴다
   (position:absolute 스트레치드링크는 라벨바를 덮는다).
   li 안의 <a> 는 기본적으로 늘어나지 않으므로 height:100% 를 명시한다 —
   크림 밴드 위에서 흰 상자 바닥이 어긋나 보인다. */
.fs-p-press .fs-press-alt__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-press .fs-press-alt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-press .fs-press-alt__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-press .fs-press-alt__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-press .fs-press-alt__item { display: grid; }
.fs-p-press .fs-press-alt__card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: var(--fs-white);
  color: inherit;
  text-decoration: none;
}
.fs-p-press .fs-press-alt__fig { margin: 0; display: grid; }
.fs-p-press .fs-press-alt__fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.fs-p-press .fs-press-alt__text {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted-2);
  padding: var(--fs-sp-5);
}
.fs-p-press .fs-press-alt__cta { margin-block-start: var(--fs-sp-9); }

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-press-1022-mo · 실측 _design/momeasure.py 360/390/540. 스텁 prep.css 와 같은 처방.
   · 줄바꿈: 준비중 제목 「… 준비 / 중입니다」 → 「준비&nbsp;중」 + balance · 리드 4줄 끝 「있습니다.」 외톨이 · 대체 경로 카드 설명 · 주소 balance.
   · 배치: 대체 경로 3장 <600 1열(정사각 사진 전폭, 장당 ≈480px) → «사진+라벨바 왼쪽 · 설명 오른쪽» 행(MOBILE_RULES §2 B). */
.fs-p-press .fs-press-ready__title,
.fs-p-press .fs-press-ready__lead,
.fs-p-press .fs-press-alt__text,
.fs-p-press .fs-labelbar,
.fs-p-press .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-press .fs-press-alt__grid { gap: var(--fs-sp-4); }
  .fs-p-press .fs-press-alt__card {
    grid-template-columns: min(42%, 200px) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
  }
  .fs-p-press .fs-press-alt__text {
    padding: var(--fs-sp-4);
    font-size: var(--fs-t-sm);
  }
}