/* ==========================================================================
   [119] 포시즌소개 — 페이지 전용 CSS  (slug: philosophy)
   모든 셀렉터는 .fs-p-119 스코프. 색은 기존 --fs-* 토큰만 쓴다(새 hex 0개).
   전용 컴포넌트
     .fs-philo-hero   풀블리드 브랜드 히어로(밝은 사진 → 잉크 카피)
     .fs-philo-creed  엠블럼 워터마크 선언 밴드
     .fs-philo-keys   신조 키워드 타일 4종
     .fs-philo-rule   ★ 시그니처 — 원칙 01–04 번호 캐러셀(좌 사진 / 우 서술)
     .fs-philo-band   다크 스테이트먼트 밴드 + 3단계 아이콘
   ========================================================================== */

/* ── A01 · 히어로 ────────────────────────────────────────────────────── */
.fs-p-119 .fs-philo-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-p-119 .fs-philo-hero .fs-hero__bg img { object-position: 64% center; }
.fs-p-119 .fs-philo-hero .fs-hero__copy { gap: clamp(10px, 7.7px + 0.64vw, 20px); }
.fs-p-119 .fs-philo-hero .fs-hero__kicker {
  font-family: var(--fs-font-en);
  font-size: clamp(13px, 11.4px + 0.45vw, 20px);
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--fs-on-dark);
}
.fs-p-119 .fs-philo-hero .fs-hero__title { color: var(--fs-on-dark); }
/* 2026-09-11 · 히어로 카피 검정(--fs-ink) → 흰 글자 + 좌측 웜 스크림 (B안).
   순검정은 따뜻한 파스텔 사진과 색온도가 어긋나고, 안개꽃 줄기·목 그늘의 어두운
   픽셀과 섞여 최악 5% 대비 2.28:1 이었다. 흰 글자에 다크 토프(#4A3A34) 스크림을
   왼쪽에서만 깔면 2.88 / 중앙값 7.02 로 오르고 사진과 한 톤이 된다.
   다크 토프 글자만 두는 안(A)은 줄기 색과 같아 1.09 — 쓰지 않았다.
   스크림은 .fs-hero 스태킹 컨텍스트 안에서 bg(z:-1) 위·inner(문서순 뒤) 아래. */
.fs-p-119 .fs-philo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(74, 58, 52, .66) 0%, rgba(74, 58, 52, .42) 36%, rgba(74, 58, 52, 0) 66%);
}
@media (max-width: 1023px) {
  .fs-p-119 .fs-philo-hero { min-height: clamp(430px, 384.5px + 12.6vw, 600px); }
  .fs-p-119 .fs-philo-hero .fs-hero__bg img { object-position: 58% center; }
}

/* ── A05 · 엠블럼 워터마크 선언 밴드 ─────────────────────────────────── */
.fs-p-119 .fs-philo-creed { position: relative; z-index: 0; }
.fs-p-119 .fs-philo-creed__mark {
  position: absolute;
  z-index: 0;
  inset-block-start: clamp(-26px, -14.6px - 3.2vw, -6px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: clamp(180px, 134.6px + 12.6vw, 350px);
  height: auto;
  opacity: 0.3;
  pointer-events: none;
}
.fs-p-119 .fs-philo-creed__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--fs-sp-6);
  text-align: center;
}
.fs-p-119 .fs-philo-creed__lines {
  display: grid;
  gap: var(--fs-sp-2);
  max-width: 76ch;
}

/* 신조 키워드 타일 */
.fs-p-119 .fs-philo-keys { margin-block-start: var(--fs-gap-title); }
.fs-p-119 .fs-philo-keys > li > figure { display: grid; gap: 0; }
.fs-p-119 .fs-philo-keys img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── A03 · 원칙 01–04 번호 캐러셀 (좌 사진 / 우 서술) ────────────────
   요청(PPT 3): 「번호 페이지 달아서 가로로 넘어가도록」 · 「아이콘삭제」
   · 「RULE 말고 POINT 01」 · 「사진 왼쪽, 글 오른쪽으로 통일」.
   같은 페이지 A17(.fs-strengths-core)과 같은 배선 — fs.js 의 도트 상자에
   <button> 을 직접 써서 번호 탭으로 쓴다. */
.fs-p-119 .fs-philo-rule__viewport { overflow: hidden; }
/* [LOCK 6] 다음 슬라이드는 1440 콘텐츠 경계 밖으로 흘려 화면 끝에서 잘리게
   둔다. 뷰포트 폭은 1440 그대로(=fs.js 의 슬라이드 폭 계산 기준), 잘림만
   html/body 의 overflow-x: clip 에 맡긴다. 좁은 폭에서는 거터만큼만 나와
   「어긋난 여백」으로 읽히므로 1024 이상에서만 푼다(138.css 와 같은 처방). */
@media (min-width: 1024px) {
  .fs-p-119 .fs-philo-rule__viewport { overflow: visible; }
}
.fs-p-119 .fs-philo-rule__track { display: flex; }
.fs-p-119 .fs-philo-rule__slide {
  display: grid;
  gap: var(--fs-gap-col);
  align-content: start;
}
@media (min-width: 1024px) {
  .fs-p-119 .fs-philo-rule__slide {
    grid-template-columns: minmax(0, 780fr) minmax(0, 620fr);
    align-items: center;
  }
}
.fs-p-119 .fs-philo-rule__fig { display: grid; gap: 0; }
.fs-p-119 .fs-philo-rule__frame { display: block; overflow: hidden; }
.fs-p-119 .fs-philo-rule__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.fs-p-119 .fs-philo-rule__fig .fs-labelbar { min-height: clamp(34px, 30.6px + 0.96vw, 50px); }
.fs-p-119 .fs-philo-rule__copy {
  display: grid;
  gap: var(--fs-sp-5);
  align-content: start;
}
.fs-p-119 .fs-philo-rule__pill { justify-self: start; }

/* 페이지네이션 — 참고(더페이스 about/theface)의 「‹ 1 · 6 ›」 한 줄 포맷.
   슬라이드와 «같은 2열 그리드» 위에 얹어 두 번째 칸(서술 열)에 넣으면
   PC 에서 글 아래에 정확히 정렬된다. fs.js 는 도트 상자의 <button> 만 도트로
   배선하므로(fs.js:509) 사이의 구분점 <span> 은 그대로 통과한다. */
.fs-p-119 .fs-philo-rule__pager {
  display: grid;
  margin-block-start: clamp(22px, 18.4px + 1vw, 38px);
}
@media (min-width: 1024px) {
  .fs-p-119 .fs-philo-rule__pager {
    grid-template-columns: minmax(0, 780fr) minmax(0, 620fr);
    column-gap: var(--fs-gap-col);
  }
  .fs-p-119 .fs-philo-rule__pager-inner { grid-column: 2; }
}
.fs-p-119 .fs-philo-rule__pager-inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 8.6px + 0.39vw, 16px);
}
.fs-p-119 .fs-philo-rule__arrow {
  width: clamp(34px, 31.2px + 0.78vw, 44px);
  height: clamp(34px, 31.2px + 0.78vw, 44px);
  flex: 0 0 auto;
}
.fs-p-119 .fs-philo-rule__nums {
  display: flex;
  align-items: center;
  gap: clamp(6px, 5.2px + 0.23vw, 10px);
  /* fs.css:1025 가 도트 상자에 margin-block-start: var(--fs-sp-9) 를 준다 —
     여기서는 화살표와 «같은 줄»이므로 그만큼 숫자만 내려앉는다. 0 으로 되돌린다. */
  margin-block-start: 0;
}
/* 구분점은 «문구»가 아니라 장식이다 — 텍스트 노드로 두면 R1 textdiff 가
   새 문구로 잡는다. 빈 <span> + content 로 넣어 문구 집합을 건드리지 않는다. */
.fs-p-119 .fs-philo-rule__sep {
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-sm);
  color: var(--fs-muted);
  line-height: 1;
}
.fs-p-119 .fs-philo-rule__sep::before { content: "\00B7"; }
.fs-p-119 .fs-philo-rule__nums .fs-carousel__dot,
.fs-p-119 .fs-philo-rule__nums .fs-carousel__dot.is-active {
  width: auto;
  height: auto;
  min-width: 32px;
  min-height: 32px;
  aspect-ratio: auto;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-body);
  font-weight: 500;
  line-height: 1;
  color: var(--fs-muted);
  transition: color var(--fs-dur) var(--fs-ease);
}
.fs-p-119 .fs-philo-rule__nums .fs-carousel__dot.is-active {
  font-weight: 700;
  color: var(--fs-teal-text);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-119 .fs-philo-rule__nums .fs-carousel__dot:hover { color: var(--fs-ink); }
}

/* ── A09 · 다크 스테이트먼트 밴드 ────────────────────────────────────── */
.fs-p-119 .fs-philo-band-sec { overflow: hidden; }
.fs-p-119 .fs-philo-band { position: relative; z-index: 1; }
.fs-p-119 .fs-philo-band__fig { height: 100%; }
.fs-p-119 .fs-philo-band__fig img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(300px, 251.5px + 13.5vw, 510px);
  object-fit: cover;
}
.fs-p-119 .fs-philo-band__copy {
  display: grid;
  align-content: center;
  gap: var(--fs-sp-6);
  padding: var(--fs-sec-pt) var(--fs-gutter) var(--fs-sec-pb);
}
@media (min-width: 1024px) {
  .fs-p-119 .fs-philo-band__copy { padding-inline: clamp(40px, 21.5px + 1.8vw, 76px) var(--fs-gutter); }
}
.fs-p-119 .fs-philo-band__ghost {
  position: absolute;
  z-index: 0;
  inset-block-end: clamp(10px, 4px + 0.4vw, 18px);
  inset-inline-end: clamp(10px, 4px + 0.4vw, 18px);
  width: clamp(140px, 102.6px + 10.4vw, 300px);
  height: auto;
  opacity: 0.07;
  pointer-events: none;
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-27
   근거·검증은 _design/QA/119.md
   ========================================================================== */

/* ── B. 제목 뒤 70px 틸 선 (48 검증분) ──────────────────────────────────
   ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     → 기본을 「그어진 상태」로, .fs-reveal:not(.is-in) 에만 초기 은닉. */
.fs-p-119 .fs-philo-rule__copy h2 { position: relative; }
.fs-p-119 .fs-philo-rule__copy 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-119 .fs-philo-rule__copy.fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* ── C. 호버 — 프레임 고정, 사진만 scale(1.045) (48 검증분) ─────────────
   그림자는 쓰지 않는다(2차 규칙).
   `.fs-philo-rule__frame` 이 overflow:hidden 으로 사진을 가두고,
   라벨바는 z-index 를 올려 넘친 4.5% 에 덮이지 않게 둔다. */
.fs-p-119 .fs-philo-rule__fig > .fs-labelbar { position: relative; z-index: 1; }
.fs-p-119 .fs-philo-rule__frame img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-119 .fs-philo-rule__fig:hover .fs-philo-rule__frame img { transform: scale(1.045); }

  /* 라벨바는 사진과 함께 커지면 안 된다 — 글자가 흔들린다. 대신 색만 한 단계 */
  .fs-p-119 .fs-philo-rule__fig:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* ── D. 다크 밴드의 50:50 하드컷 완화 (48 검증분) ───────────────────────
   `.fs-philo-band` 은 좌 사진 / 우 다크 패널이 정확히 x960 에서 맞붙는다.
   실측: 사진 우측단 rgb(76~88,75~87,71~83) vs 패널 rgb(60,61,63) —
   ΔL≈20 의 세로 이음매가 794px 내내 「맞붙은 두 장」으로 읽힌다.
   사진 쪽 가장자리에만 패널색으로 수렴하는 얇은 레이어를 얹어 지운다.
   (색은 --fs-ink-band-2 #3C3D3F 의 알파 0/1 두 정지점뿐 — 새 색 아님)
   PC 가로 배치일 때만. 1023 이하는 사진이 카피 «위»에 쌓여 방향이 다르다.
   ★ 사진 평균 휘도 105.75 < 110 이라 V70 의 「사진 위로 글을 겹치기」는
     하지 않았다. 이음매만 지운다. */
@media (min-width: 1024px) {
  .fs-p-119 .fs-philo-band__fig { position: relative; }
  .fs-p-119 .fs-philo-band__fig::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: clamp(40px, 5vw, 96px);
    background: linear-gradient(to right, rgba(60, 61, 63, 0), var(--fs-ink-band-2));
    pointer-events: none;
  }
}

/* ── E. reduced-motion — 새로 얹은 것 전부 정지 상태로 확정 ───────────── */
@media (prefers-reduced-motion: reduce) {
  .fs-p-119 .fs-philo-rule__copy h2::after { transform: scaleX(1) !important; transition: none !important; }
  .fs-p-119 .fs-philo-rule__frame img { transition: none !important; transform: none !important; }
}

/* 2026-09-11 색감 변경(청록→토프)은 fs.css 토큰으로 전 사이트에 적용됐다 — 이 파일에 있던
   .fs-p-119 토큰 오버라이드는 fs.css 로 올라가 지웠다. 아이콘 11장도 원본 SVG 를 직접
   토프로 구워 -taupe 사본은 없앴다. */

/* ==========================================================================
   2026-09-21 · A07 「포시즌성형외과가 약속드립니다」 — 47 눈매교정에서 이관
   근거: 병원 요청 「리뷰티 수정(눈매교정).pptx」 슬라이드 8.
   47.css 7절을 그대로 옮기되 병원 지시 「폰트크기 크게」로 선언문만 한 단 올렸다
   (--fs-t-body 15~16 → --fs-t-lead 18~20). 색·굵기는 건드리지 않는다.
   밴드는 흰색 — 바로 위 #duty 가 크림이라 리듬을 끊고, LOCK 4 (c) 모디파이어도 4개로 유지된다.
   ========================================================================== */
.fs-p-119 .fs-philo-promise__grid { align-items: center; }
.fs-p-119 .fs-philo-promise__media { display: grid; gap: var(--fs-gap-card); }
.fs-p-119 .fs-philo-promise__fig { display: grid; }
.fs-p-119 .fs-philo-promise__fig img { width: 100%; height: auto; }
.fs-p-119 .fs-philo-promise__list { margin-block-start: clamp(20px, 16.3px + 1.026vw, 36px); }
.fs-p-119 .fs-philo-promise__list .fs-card--rule { padding-block: clamp(14px, 12.2px + 0.513vw, 22px); }
.fs-p-119 .fs-philo-promise__list .fs-card__num { white-space: nowrap; }
/* 병원 요청 「폰트크기 크게」 */
.fs-p-119 .fs-philo-promise__list .fs-card__desc { font-size: var(--fs-t-lead); }
@media (min-width: 1024px) {
  .fs-p-119 .fs-philo-promise__list .fs-card--rule { grid-template-columns: auto minmax(0, 1fr); }
  /* 흰 밴드에서는 흰 카드가 배경과 같은 색이라 행 구분이 사라진다 — 헤어라인으로 가둔다.
     <1024 는 fs.css:744 가 행마다 틸 상단선을 그으므로 건드리지 않는다. */
  .fs-p-119 .fs-philo-promise__list .fs-card--rule + .fs-card--rule { border-block-start: 1px solid var(--fs-line); }
}

/* ==========================================================================
   ▼▼▼ 2026-09-23 · 모바일 최적화(승인자 「81·80·91 다음 119」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-119-0923-mo/ · 실측 _design/momeasure.py 360/390/540
   ========================================================================== */
/* --- 줄바꿈 — 원칙 설명 4·원칙 03 리드·다크 밴드 리드·핵심 본문 5 의 <br> 19개 → 문장 블록(.fs-lead__s, <br> 과 픽셀 동일).
   짧은 블록은 balance 로 줄 길이만 고르게(줄 수 불변). 360/390/540 실측 고아 줄: 신조 리드 「완성하겠습니다.」「생각합니다.」「변화로」 ·
   원칙 「고려해」「합니다.」「안정적인 회복과」 · 다크 밴드 「과정을 책임지는」「만들어갑니다.」 · 핵심 「중요합니다.」「의술이 만나」 ·
   대리수술 「준수합니다.」 · 약속 「시행합니다.」「수술합니다.」「제공합니다.」 · 주소 「8층」 · 히어로 킥커 「SURGERY」 */
.fs-p-119 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-119 .fs-philo-creed__lines .fs-lead,
.fs-p-119 .fs-philo-rule__copy .fs-lead,
.fs-p-119 .fs-sec-head__sub,
.fs-p-119 .fs-strengths-zero__body .fs-lead,
.fs-p-119 .fs-strengths-duty .fs-card__desc,
.fs-p-119 .fs-philo-promise__list .fs-card__desc,
.fs-p-119 .fs-philo-hero .fs-hero__kicker,
.fs-p-119 .fs-address { text-wrap: balance; }

/* --- 배치 — 신조 키워드 타일 4장: 세로 스택 1,160px → <600 2열(타일 150px, 인물컷 840x630 이라 화질 여유). 나머지 섹션은 그대로. */
@media (max-width: 599px) {
  .fs-p-119 .fs-philo-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}