/* ==========================================================================
   assets/page/96.css — [96] 병원둘러보기 전용
   모든 셀렉터는 .fs-p-96 스코프. 색은 --fs-* 토큰만 사용(새 hex 0).
   전용 컴포넌트 4종
     ① .fs-interior-strip  — 인테리어 디테일 4열 그리드(라벨바 캡션)
     ② .fs-interior-gal / .fs-interior-tabs — 코버플로우 갤러리 + 공간명 라벨 탭
     ③ .fs-interior-doors  — 시그니처: 세로 도어 스트립 3열
     ④ .fs-interior-sign   — 다크 사인 밴드(좌 풀블리드 사진 / 우 카피 + 마감 3컷)
   ========================================================================== */

/* ---------- A01 · 크림 타이포 히어로 (사진 0장) ---------- */
/* 2026-08-28 · 글자만 있던 크림 밴드를 걷어내고 138(핵심경쟁력)과 같은
   «다크 인테리어 풀블리드 + 네온 스크립트 + 대제목» 히어로로 바꿨다.
   사진은 리셉션 정면 원본을 138 히어로 밴드(밝기 49 / 대비 30)에 맞춰 그레이딩한 것. */
.fs-p-96 .fs-interior-hero {
  min-height: clamp(420px, 372.3px + 13.2vw, 626px);
  background: var(--fs-ink-band);
  color: var(--fs-on-dark);
}
.fs-p-96 .fs-interior-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-p-96 .fs-interior-hero .fs-hero__bg img { object-position: 50% 46%; }
/* 스크림 — 사진 한가운데가 흰 리셉션 데스크와 네온 사인이라 카피가 앉는 띠만 눌러준다 */
.fs-p-96 .fs-interior-hero .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .52) 42%, rgba(0, 0, 0, .52) 68%, rgba(0, 0, 0, .30) 100%);
}
.fs-p-96 .fs-interior-hero .fs-hero__copy { gap: clamp(12px, 8.2px + 1.06vw, 28px); }
.fs-p-96 .fs-interior-hero__logotype {
  display: block;
  width: clamp(220px, 116.1px + 28.9vw, 660px);
  height: auto;
}
/* ★ [LOCK 8-f] .fs-en 을 그대로 두면 --fs-t-en(1920 = 47px) 몬세라트 대문자가 된다.
   판정법 (f) 는 「라틴 대문자 제목 font-size >= 33px 인데 서체 첫 항목이 Montserrat」를
   FAIL 로 본다(확정 시안 91 은 같은 크기의 라틴을 fs.css:1964~1971 에서 Pretendard
   장체로 되돌린다). 다만 이 줄은 «제목» 이 아니라 h1 위 킥커이므로 장체가 아니라
   A01 서브 히어로 킥커 정본 규격(fs.css:1109 — 18~20px · ls 0.1em · w400)으로 되돌린다.
   47px 라틴이 40px 한글 h1 을 눌러 위계가 뒤집혀 있던 것도 함께 풀린다. */
.fs-p-96 .fs-interior-hero__en {
  font-family: var(--fs-font-en);
  letter-spacing: 0.26em;
  color: var(--fs-on-dark);
  opacity: .82;
}
.fs-p-96 .fs-interior-hero .fs-hero__title {
  position: relative;
  color: var(--fs-on-dark);
  padding-block-start: clamp(12px, 9.8px + 0.61vw, 22px);
}
/* 138 과 같은 «제목 위 짧은 흰 선» */
.fs-p-96 .fs-interior-hero .fs-hero__title::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: clamp(56px, 47.4px + 2.4vw, 94px);
  height: 1px;
  background: var(--fs-on-dark);
  opacity: .55;
  transform: translateX(-50%);
}
.fs-p-96 .fs-interior-hero__lead { color: var(--fs-on-dark); opacity: .88; }

/* ---------- A04 · 와이드 파노라마 인트로 ---------- */
.fs-p-96 .fs-interior-lead__title { max-width: 22em; }
.fs-p-96 .fs-interior-pano { gap: 0; margin-block-start: var(--fs-gap-title); }
.fs-p-96 .fs-interior-pano__img { display: block; aspect-ratio: 1912 / 680; overflow: hidden; }
.fs-p-96 .fs-interior-pano__img picture { display: block; width: 100%; height: 100%; }
.fs-p-96 .fs-interior-pano__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .fs-p-96 .fs-interior-pano__img { aspect-ratio: 1070 / 680; } }

.fs-p-96 .fs-interior-lead__split { margin-block-start: var(--fs-sp-9); }
.fs-p-96 .fs-interior-lead__label {
  font-family: var(--fs-font-en);
  letter-spacing: 0.08em;
  color: var(--fs-teal-text);
}

/* ---------- ① 인테리어 디테일 그리드 ---------- */
.fs-p-96 .fs-interior-strip { margin-block-start: clamp(44px, 34px + 2.8vw, 88px); }
.fs-p-96 .fs-interior-strip__title {
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-kicker-lg);
  letter-spacing: 0.1em;
  color: var(--fs-teal-text);
  padding-block-end: var(--fs-sp-3);
  border-block-end: 1px solid var(--fs-line);
}
.fs-p-96 .fs-interior-strip__grid {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--fs-sp-6);
  list-style: none; padding: 0;
}
@media (min-width: 1024px) {
  .fs-p-96 .fs-interior-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fs-p-96 .fs-interior-strip__fig { position: relative; display: grid; }
.fs-p-96 .fs-interior-strip__fig img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}

/* --- 디테일 8컷 «클릭하면 크게» -----------------------------------------
   확대 버튼은 사진 면 전체를 덮는다(라벨바는 덮지 않는다 — 캡션이 눌리면 라벨바가
   버튼처럼 읽힌다). 평상시에는 투명하고, 호버·포커스에서만 돋보기 배지가 뜬다.
   틸트 광택(.fs-tilt__gloss, z-index 2)보다 아래(z 1)에 두어 광택을 가리지 않는다.
   ------------------------------------------------------------------------ */
.fs-p-96 .fs-interior-strip__zoom {
  /* figure 가 grid 라 «사진과 같은 칸» 에 얹으면 라벨바 높이를 계산할 필요가 없다 */
  grid-row: 1; grid-column: 1; z-index: 1;
  display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: rgba(17, 17, 17, 0);
  cursor: zoom-in;
  transition: background var(--fs-dur) var(--fs-ease);
}
.fs-p-96 .fs-interior-strip__zoomic {
  display: grid; place-items: center;
  inline-size: 48px; block-size: 48px;
  color: var(--fs-white);
  background: rgba(17, 17, 17, .58);
  opacity: 0;
  transform: scale(.86);
  transition: opacity var(--fs-dur) var(--fs-ease), transform var(--fs-dur) var(--fs-ease);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-96 .fs-interior-strip__zoom:hover { background: rgba(17, 17, 17, .18); }
  .fs-p-96 .fs-interior-strip__zoom:hover .fs-interior-strip__zoomic { opacity: 1; transform: none; }
}
.fs-p-96 .fs-interior-strip__zoom:focus-visible { outline: 3px solid var(--fs-teal-dk); outline-offset: -3px; }
.fs-p-96 .fs-interior-strip__zoom:focus-visible .fs-interior-strip__zoomic { opacity: 1; transform: none; }

/* --- 확대 패널 (Popover) ------------------------------------------------- */
/* 미지원 브라우저에서는 :popover-open 규칙이 안 걸려 패널이 계속 숨는다 — 안전한 폴백. */
.fs-p-96 .fs-lightbox {
  display: none;
  position: fixed; inset: 0;
  inline-size: 100%; block-size: 100%; max-inline-size: 100%; max-block-size: 100%;
  margin: 0; padding: clamp(16px, 8px + 2.4vw, 56px); border: 0;
  overflow: hidden;
  background: transparent;
}
.fs-p-96 .fs-lightbox:popover-open { display: grid; place-items: center; }
.fs-p-96 .fs-lightbox::backdrop { background: rgba(17, 17, 17, .93); }
/* 바깥 클릭으로 닫기 — .fs-drawer__scrim 과 같은 방식(투명 버튼을 뒤에 깐다) */
.fs-p-96 .fs-lightbox__scrim {
  position: absolute; inset: 0; z-index: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent;
  cursor: zoom-out;
}
.fs-p-96 .fs-lightbox__fig {
  position: relative; z-index: 1;
  display: grid; justify-items: stretch;
  /* 원본이 560~960px 라 무한정 키우면 뭉갠다. «원본의 1.75배» 를 상한으로 둔다
     — 폭은 각 패널의 --fs-lb-w(원본 폭) 에서 온다. */
  inline-size: min(94vw, 1180px, calc(var(--fs-lb-w, 1180px) * 1.75));
}
.fs-p-96 .fs-lightbox__fig img {
  display: block;
  inline-size: 100%; block-size: auto;
  max-block-size: min(78vh, 900px);
  object-fit: contain;
  background: var(--fs-ink-band);
}
.fs-p-96 .fs-lightbox__close {
  position: absolute; z-index: 2;
  inset-block-start: clamp(12px, 6px + 1.6vw, 28px);
  inset-inline-end: clamp(12px, 6px + 1.6vw, 28px);
  display: grid; place-items: center;
  inline-size: 46px; block-size: 46px;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  color: var(--fs-white);
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background var(--fs-dur) var(--fs-ease);
}
.fs-p-96 .fs-lightbox__close:hover { background: rgba(255, 255, 255, .24); }
.fs-p-96 .fs-lightbox__close:focus-visible { outline: 3px solid var(--fs-white); outline-offset: 2px; }

/* ---------- ② 코버플로우 갤러리 + 공간명 라벨 탭 ---------- */
.fs-p-96 .fs-interior-gal__head { margin-block-end: var(--fs-gap-title); }
/* ★ [LOCK 6] 「캐러셀은 1440 밖으로 흘려 잘리게 둔다」.
   뷰포트를 컨테이너(1440) 안에 두고 overflow:hidden 하면 1920 에서 트랙 오른쪽 끝이
   x1593 — 콘텐츠 경계 x1679 «안쪽» 에서 끝나 「한 화면에 딱 맞는 캐러셀」이 된다.
   확정 시안 91 의 같은 부품(FOUR SEASONS INTERIOR)이 쓰는 방법을 그대로 쓴다:
   뷰포트만 100vw 로 풀블리드시키고 잘림은 화면 끝에 맡긴다(fs.css:1985).
   머리(제목·화살표)와 라벨 탭은 컨테이너에 그대로 남는다.
   뷰포트 «폭» 을 줄이면 안 된다 — fs.js 가 viewport.clientWidth 로 슬라이드 폭을 잡는다. */
.fs-p-96 .fs-interior-gal__viewport { overflow: hidden; }
@media (min-width: 1024px) {
  .fs-p-96 .fs-interior-gal__viewport {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}
.fs-p-96 .fs-interior-gal__track { display: flex; list-style: none; padding: 0; }
.fs-p-96 .fs-interior-gal__fig { display: grid; }
.fs-p-96 .fs-interior-gal__fig img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
.fs-p-96 .fs-interior-tabs {
  flex-wrap: wrap;
  gap: var(--fs-sp-2);
  margin-block-start: var(--fs-sp-8);
}
.fs-p-96 .fs-interior-tabs .fs-carousel__dot {
  width: auto; height: auto; aspect-ratio: auto;
  padding: 7px 15px;
  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);
  background: none; background-image: none; box-shadow: none;
}
.fs-p-96 .fs-interior-tabs .fs-carousel__dot.is-active {
  width: auto;
  color: var(--fs-white);
  background: var(--fs-teal-text); background-image: none;
  border-color: var(--fs-teal-text);
  box-shadow: none;
}

/* ---------- ③ 시그니처 · 세로 도어 스트립 ---------- */
.fs-p-96 .fs-interior-doors {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
  list-style: none; padding: 0;
}
@media (min-width: 600px) {
  .fs-p-96 .fs-interior-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-96 .fs-interior-doors__item { display: grid; gap: var(--fs-gap-card); align-content: start; }
.fs-p-96 .fs-interior-doors__fig { display: grid; }
.fs-p-96 .fs-interior-doors__frame { display: block; overflow: hidden; aspect-ratio: 2 / 3; }
.fs-p-96 .fs-interior-doors__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- ④ 다크 사인 밴드 ---------- */
.fs-p-96 .fs-interior-sign { gap: 0; align-items: stretch; }
.fs-p-96 .fs-interior-sign__photo {
  position: relative; overflow: hidden;
  min-height: clamp(240px, 190px + 14vw, 470px);
}
.fs-p-96 .fs-interior-sign__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-96 .fs-interior-sign__copy {
  display: grid; align-content: center; gap: var(--fs-sp-5);
  padding: var(--fs-sp-12) clamp(20px, 12px + 2.4vw, 88px);
}
.fs-p-96 .fs-interior-sign__strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fs-sp-3);
  margin-block-start: var(--fs-sp-3);
  list-style: none; padding: 0;
}
.fs-p-96 .fs-interior-sign__strip figure { display: grid; }
.fs-p-96 .fs-interior-sign__strip img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
.fs-p-96 .fs-interior-sign__strip .fs-labelbar {
  min-height: clamp(26px, 24px + 0.4vw, 34px);
  font-size: var(--fs-t-xs);
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   근거 · 판단 이력은 _design/QA/96.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   V70-B · 다크 사인 밴드 50:50 하드컷 → 비대칭 + 카피 패널이 사진 위로 겹친다
   검출: B:fs-split (어두운 밴드 안의 50:50 2열). 실측 1920 에서 photo 0..960 /
   copy 960..1920 으로 정확히 반반이라 「맞붙은 두 장」으로 읽힌다.
   겹침 게이트: band-marble.jpg 평균 휘도 133.8 (>= 110) — 통과.
   구현은 48 의 V70-B(48.css 「2. 다크 밴드」)와 같다. 이 밴드는 .fs-section__bg
   고스트가 없는 순색 --ink2 라 카피에 밴드색 면을 깔아도 이음매 단차가 0 이다.
   겹침은 **PC 가로 방향으로만** 준다 — 모바일 음수 세로 마진은 섹션을 끌어올린다.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-96 .fs-interior-sign { --fs-split: minmax(0, 62fr) minmax(0, 38fr); }

  /* 사진은 62% 까지 흘려 보내고 */
  .fs-p-96 .fs-interior-sign__photo { position: relative; z-index: 1; }

  /* 카피 패널을 그 위로 끌어당긴다 — 가로 음수 마진만.
     배경은 밴드와 «같은» 토큰이라 겹치는 경계에 세로 줄이 생기지 않는다. */
  .fs-p-96 .fs-interior-sign__copy {
    position: relative;
    z-index: 3;
    margin-inline-start: clamp(-120px, -6vw, -60px);
    background: var(--fs-ink-band-2);
  }
}

/* --------------------------------------------------------------------------
   타이포 리듬 · 섹션 제목 뒤에 그어지는 70px 틸 선 (delay .5s)
   ★ 초기 은닉을 「.is-in 이면 보이기」로 짜면 안 된다 — fs.js:234 는 첫 화면 안에
     있던 대상에는 .fs-reveal 클래스 자체를 붙이지 않는다(inFirstView 조기 return).
     기본을 「그어진 상태」로 두고 fs.js 가 실제로 표시한 .fs-reveal 에만 은닉을 건다.
   -------------------------------------------------------------------------- */
.fs-p-96 .fs-interior-lead__title,
.fs-p-96 .fs-interior-gal__head .fs-sec-head__title,
.fs-p-96 .fs-nose-head .fs-h2 { position: relative; }

.fs-p-96 .fs-interior-lead__title::after,
.fs-p-96 .fs-interior-gal__head .fs-sec-head__title::after,
.fs-p-96 .fs-nose-head .fs-h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-96 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-96 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   호버 · 프레임은 고정, 사진만 움직인다 (그림자는 쓰지 않는다)
   대상은 「자기 클리핑 프레임이 있고 다른 변형이 걸려 있지 않은」 사진뿐이다:
     · A04 파노라마              — .fs-interior-pano__img
   제외: 디테일 그리드 8컷(data-fs-tilt 가 이미 걸려 있다) ·
        도어 세로 3컷(.fs-parallax__layer 의 transform 을 덮으면 스크롤 중 튄다) ·
        갤러리 9컷(코버플로우 변형) · 다크 밴드 마감 3컷(클리핑 프레임이 없다).
   -------------------------------------------------------------------------- */
.fs-p-96 .fs-interior-pano__img img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-96 .fs-interior-pano:hover .fs-interior-pano__img img { transform: scale(1.045); }
}

/* ---------- 모션 무효화 (새로 넣은 전환은 여기서 전부 끈다) ---------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-96 .fs-interior-tabs .fs-carousel__dot { transition: none !important; }

  .fs-p-96 .fs-interior-lead__title::after,
  .fs-p-96 .fs-interior-gal__head .fs-sec-head__title::after,
  .fs-p-96 .fs-nose-head .fs-h2::after { transform: scaleX(1) !important; transition: none !important; }

  .fs-p-96 .fs-interior-pano__img img { transition: none !important; transform: none !important; }

  .fs-p-96 .fs-interior-strip__zoom,
  .fs-p-96 .fs-lightbox__close { transition: none !important; }
  .fs-p-96 .fs-interior-strip__zoomic { transition: none !important; transform: none !important; }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치 변경 없음. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-96-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   360·390 고아 줄: 히어로 리드 「… / 제공합니다.」 · 리드 h2(PC 줄바꿈 br 은 fs-pc-only) · 본문 「FOUR SEASONS PLASTIC / SURGERY」(→ PLASTIC SURGERY) ·
   동선 리드 「… 세 / 공간입니다.」(→ 세 공간) · 사인 리드 「… / 블랙 마블 마감.」 → balance.
   갤러리 라벨바 고아는 화면 밖 캐러셀 슬라이드의 측정값(가짜). 상세 2열 · 갤러리 캐러셀 · 세 공간 세로 사진은 그대로. */
.fs-p-96 .fs-interior-hero__lead,
.fs-p-96 .fs-interior-lead__title,
.fs-p-96 #lead .fs-body,
.fs-p-96 #doors .fs-nose-lead,
.fs-p-96 #sign .fs-lead { text-wrap: balance; }