/* ==========================================================================
   [109] 뷰티코드 — 페이지 전용 CSS
   전용 컴포넌트 5종
     .fs-bc-hero    하프 스플릿 히어로(좌 크림 타이포 / 우 흰 면 해부 도해)
     .fs-bc-layers  부위별 얼굴 선 도해 6분할 그리드
     .fs-bc-axis    Past → Now 진행 축
     .fs-bc-map     얼굴 코드 9포인트 맵(HTML 핫스팟) + .fs-bc-groups 범례
     .fs-bc-codes   그룹별 코드 썸네일 열
   색은 전부 --fs-* 토큰. 새 hex 없음.
   ========================================================================== */

/* ---------- 셸 · A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ----------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 이 페이지의 히어로 상단은
   전 폭이 연한 라일락(#E3E2EA)이라 흰 글자가 아니라 «잉크 글자» 를 쓴다.
   에셋 실측: 모델 최상단이 사진 높이의 25.9%(1072 중 278px) 라 헤더 띠가 사진에서
   차지하는 최대 구간(1280 폭에서 ≈11.5%)에 안 걸린다. */
.fs-p-109 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-109 .fs-page--overlay { background: #E3E2EA; }
.fs-p-109 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-109 .fs-header--overlay::before { content: none; }
.fs-p-109 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-109 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-109 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
/* --fs-muted-2(#7D7D7D)는 라일락 위에서 3.5:1 이라 AA 미달이다 */
.fs-p-109 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-109 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-109 .fs-util__sep { opacity: .35; }
/* fs.css:3052 의 «호버 시 흰 글자» 도 다크 히어로 전제다 — 밝은 헤더에선 사라진다 */
.fs-p-109 .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }

/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-109 .fs-bc-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치. 0% 면 1920 에서 머리끝이 y=278 이라 헤더 띠(100px) 아래가 넓게 빈다.
   32% 로 내려 위쪽을 잘라내면 머리끝이 y≈177 로 올라와 형제 페이지 143(≈178)과 맞는다. */
.fs-p-109 .fs-bc-hero .fs-hero__bg img { object-position: 50% 32%; }
.fs-p-109 .fs-bc-hero__copy {
  max-width: min(100%, 50vw);
  gap: clamp(10px, 8.3px + 0.481vw, 18px);
  justify-items: start; text-align: start;
}
.fs-p-109 .fs-bc-hero__copy .fs-hero__kicker {
  color: var(--fs-teal-dk); font-weight: 500;
  font-size: clamp(15px, 13.5px + 0.42vw, 21px); letter-spacing: 0.04em;
}
.fs-p-109 .fs-bc-hero__copy .fs-hero__title {
  color: var(--fs-ink); line-height: var(--fs-lh-head);
  font-size: var(--fs-t-h1); font-weight: 700;
}
.fs-p-109 .fs-bc-hero__name {
  margin-block-start: var(--fs-sp-3);
  color: var(--fs-teal-dk); font-weight: 700;
}
.fs-p-109 .fs-bc-hero__lead { color: var(--fs-ink-soft); }

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 라일락 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은 페이드로
   녹여 이음매를 없앤다. 밴드색은 세로 에셋 상단 실측값(#E6E3EA). */
@media (max-width: 1023px) {
  .fs-p-109 .fs-bc-hero { min-height: 0; background: #E6E3EA; }
  .fs-p-109 .fs-bc-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-109 .fs-bc-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px);
            mask-image: linear-gradient(180deg, transparent 0, #000 72px);
  }
  .fs-p-109 .fs-bc-hero .fs-hero__inner {
    grid-row: 1; background: #E6E3EA;
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-9)) var(--fs-sp-11);
  }
  .fs-p-109 .fs-bc-hero__copy { max-width: 100%; }
}

/* ---------- A03 · 부위별 얼굴 선 도해 6분할 ---------- */
.fs-p-109 .fs-bc-layers {
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) {
  .fs-p-109 .fs-bc-layers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-109 .fs-bc-layers__fig { display: grid; }
.fs-p-109 .fs-bc-layers__fig img {
  display: block; width: 100%; height: auto;
  background: var(--fs-white);
}
.fs-p-109 .fs-bc-define .fs-h2 { margin-block-start: var(--fs-sp-3); }
.fs-p-109 .fs-bc-define .fs-nose-lead { margin-block-start: var(--fs-sp-6); }
.fs-p-109 .fs-bc-define .fs-body { margin-block-start: var(--fs-sp-5); }
.fs-p-109 .fs-bc-elements {
  display: flex; flex-wrap: wrap; gap: var(--fs-sp-1);
  margin-block-start: var(--fs-sp-6);
}

/* ---------- A05 · Past → Now 진행 축 ---------- */
.fs-p-109 .fs-bc-axis {
  display: grid;
  gap: var(--fs-sp-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-block-start: clamp(32px, 27.5px + 1.25vw, 52px);
}
.fs-p-109 .fs-bc-axis__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-sp-3);
  border-inline-start: 2px solid var(--fs-teal);
  padding-inline-start: var(--fs-sp-5);
}
.fs-p-109 .fs-bc-axis__item {
  display: flex; align-items: center; gap: var(--fs-sp-3);
  font-size: var(--fs-t-lead); color: var(--fs-ink-soft);
}
.fs-p-109 .fs-bc-axis__dot {
  flex: 0 0 auto; width: 11px; height: 11px;
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal);
}
.fs-p-109 .fs-bc-axis__item--now { color: var(--fs-ink); font-weight: 700; }
.fs-p-109 .fs-bc-axis__item--now .fs-bc-axis__dot { background: var(--fs-teal-dk); }
.fs-p-109 .fs-bc-axis__cap { justify-self: start; }
@media (min-width: 768px) {
  .fs-p-109 .fs-bc-axis { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--fs-sp-6); }
  .fs-p-109 .fs-bc-axis__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-inline-start: 0;
    border-block-start: 2px solid var(--fs-teal);
    padding-inline-start: 0;
    padding-block-start: var(--fs-sp-5);
  }
  .fs-p-109 .fs-bc-axis__item { flex-direction: column; align-items: center; text-align: center; gap: var(--fs-sp-2); }
  .fs-p-109 .fs-bc-axis__dot { margin-block-start: calc(var(--fs-sp-5) * -1 - 11px); }
  .fs-p-109 .fs-bc-axis__cap { justify-self: center; }
}

/* ---------- 시그니처 · 얼굴 코드 9포인트 맵 ---------- */
.fs-p-109 .fs-bc-mapwrap { margin-block-start: var(--fs-gap-title); }
.fs-p-109 .fs-bc-map { display: grid; }
.fs-p-109 .fs-bc-map__stage { position: relative; display: block; background: var(--fs-white); }
.fs-p-109 .fs-bc-map__stage img { display: block; width: 100%; height: auto; }
.fs-p-109 .fs-bc-map__pin {
  position: absolute;
  left: var(--fs-x); top: var(--fs-y);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: clamp(24px, 20.6px + 0.962vw, 40px);
  height: clamp(24px, 20.6px + 0.962vw, 40px);
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal-text); color: var(--fs-white);
  font-size: var(--fs-t-pill); font-weight: 700; line-height: 1;
}
.fs-p-109 .fs-bc-groups { display: grid; gap: var(--fs-sp-6); }
.fs-p-109 .fs-bc-group__bar { justify-content: flex-start; padding-inline: var(--fs-sp-5); }
.fs-p-109 .fs-bc-group__list {
  display: grid; gap: var(--fs-sp-1);
  margin-block-start: var(--fs-sp-4);
  padding-inline-start: var(--fs-sp-2);
}
.fs-p-109 .fs-bc-group__item {
  display: flex; align-items: center; gap: var(--fs-sp-3);
  font-size: var(--fs-t-lead); color: var(--fs-ink);
}
.fs-p-109 .fs-bc-num {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1.5px solid var(--fs-teal-dk);
  border-radius: var(--fs-radius-round);
  color: var(--fs-teal-dk);
  font-size: var(--fs-t-sm); font-weight: 700; line-height: 1;
}

/* ---------- 그룹별 코드 썸네일 ---------- */
.fs-p-109 .fs-bc-codes {
  display: grid; gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 1024px) {
  .fs-p-109 .fs-bc-codes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.fs-p-109 .fs-bc-codes__set {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--fs-sp-5);
}
.fs-p-109 .fs-bc-codes__fig { display: grid; }
.fs-p-109 .fs-bc-codes__box { position: relative; display: block; }
.fs-p-109 .fs-bc-codes__box img { display: block; width: 100%; height: auto; }
.fs-p-109 .fs-bc-codes__pin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal-text); color: var(--fs-white);
  font-size: var(--fs-t-pill); font-weight: 700; line-height: 1;
}

/* ---------- A10 · 다크 비교 밴드 ---------- */
.fs-p-109 .fs-bc-hl { color: var(--fs-ink); padding: 2px 10px; line-height: 1; }
.fs-p-109 .fs-bc-compare .fs-nose-compare__head { margin-block-end: var(--fs-sp-5); }
.fs-p-109 .fs-bc-compare .fs-nose-compare__group > .fs-pill { margin-block-end: 0; }
/* 승인자 지시 — 비교표 내용을 가운데로. fs.css:897·909 가 좌열은 우정렬, 우열은 좌정렬이다. */
.fs-p-109 .fs-bc-compare .fs-compare__cell { justify-content: center; text-align: center; }
.fs-p-109 .fs-bc-basis {
  display: grid; gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: clamp(40px, 33.1px + 1.923vw, 72px);
}
@media (min-width: 1024px) {
  .fs-p-109 .fs-bc-basis { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; }
}
.fs-p-109 .fs-bc-basis__list { display: grid; gap: var(--fs-sp-5); margin-block-start: var(--fs-sp-5); }
.fs-p-109 .fs-bc-basis__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-5); align-items: start;
  border-block-start: 1px solid var(--fs-line-control);
  padding-block-start: var(--fs-sp-5);
}
.fs-p-109 .fs-bc-basis__txt { font-size: var(--fs-t-lead); line-height: var(--fs-lh-body); }
.fs-p-109 .fs-bc-aging {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fs-p-109 .fs-bc-aging__fig { display: grid; }
.fs-p-109 .fs-bc-aging__fig img { display: block; width: 100%; height: auto; }

/* ---------- A24 · 마무리 3그룹 리캡 ---------- */
.fs-p-109 .fs-bc-recap {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 600px) {
  .fs-p-109 .fs-bc-recap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-109 .fs-bc-recap__fig { display: grid; }
.fs-p-109 .fs-bc-recap__fig img { display: block; width: 100%; height: auto; }

/* ---------- 모션(리빌은 fs.js 공용). 새 모션 없음 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-109 .fs-bc-map__pin,
  .fs-p-109 .fs-bc-codes__pin { transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   렌더로 확인한 결함만 고친다. 새 색 없음(전부 --fs-* 토큰), 문구 무변경.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. [결함] A10 다크 밴드 고스트가 «반쯤 가려진 두번째 얼굴» 로 읽힌다
      ghost.jpg 는 이미 어둡게(평균 밝기 60 · 밴드 #3C3D3F 와 거의 같음) 구워져
      있지만 **선명하다**. 눈·눈썹·근육 화살표가 그대로 판독돼, 비교표 왼쪽에서
      얼굴 반쪽이 표 뒤로 숨은 것처럼 보인다(실측: 표준편차 3.3 인데 윤곽은 살아 있음).
      57 의 compare-bg 는 「단색 위에 강하게 블러된 인물」이 시안 규정이다.
      → 블러로 질감만 남긴다. 127.css:284 · 128.css:200 과 같은 처방.
      ★ scale 은 개별 프로퍼티로 준다 — fs.js 패럴랙스가 transform 을 통째로
        덮어쓰므로(fs.css:1232) transform 으로 주면 스크롤 시 사라진다.
        blur 가 가장자리에서 투명을 빨아들이는 만큼만 오버스캔한다.
   -------------------------------------------------------------------------- */
.fs-p-109 .fs-nose-compare-sec .fs-section__bg img {
  filter: blur(26px);
  scale: 1.12;
}

/* --------------------------------------------------------------------------
   2. [결함] 모바일에서 비교표 좌열(기존필러)이 통째로 사라진다
      fs.css:850 `.fs-compare__cell--left { display:none }` + fs.css:1444
      `.fs-nose-compare__group--left { display:none }` 이 <1024 에서 좌열을 숨긴다.
      이 페이지의 다크 밴드는 대제목부터가 「기존필러 = 단순 볼륨 시술」이라
      **대비 자체가 내용**이고, 좌열이 빠지면 360 에서 뷰티코드 쪽만 남아
      「무엇과 비교하는지」가 사라진다.
      → 82.css:281~290 에서 검증된 처방 그대로: 모바일에서 세로로 쌓아 되살린다.
        라벨(필러/시술)을 맨 위로 올려 「항목 → 기존필러 → 뷰티코드」 순으로 읽힌다.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .fs-p-109 .fs-bc-compare .fs-nose-compare__group--left { display: flex; }
  /* 두 필을 나란히 두어 «회색=기존필러 / 틸=뷰티코드» 범례로 읽히게 한다 */
  .fs-p-109 .fs-bc-compare .fs-nose-compare__head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-sp-3);
  }
  .fs-p-109 .fs-bc-compare .fs-compare__row { grid-template-columns: minmax(0, 1fr); }
  .fs-p-109 .fs-bc-compare .fs-compare__cell--left {
    display: flex;
    justify-content: flex-start; text-align: start;
    padding-inline: var(--fs-sp-5);
  }
  .fs-p-109 .fs-bc-compare .fs-compare__cell--label { order: -1; }
  /* 행 경계선은 흰 셀에만 남긴다 — 회색·틸 면 위에서는 보이지 않으면서
     흰 셀 위에만 그어져 「반 칸만 그어진 선」이 되던 것을 없앤다. */
  .fs-p-109 .fs-bc-compare .fs-compare__row + .fs-compare__row .fs-compare__cell {
    border-block-start: 0;
  }
  .fs-p-109 .fs-bc-compare .fs-compare__row + .fs-compare__row { margin-block-start: var(--fs-sp-4); }
}

/* --------------------------------------------------------------------------
   3. [결함] 코드 열의 그룹 헤더가 자기 썸네일 캡션과 같은 색이라 헤더로 안 읽힌다
      「눈주변 · 볼 · 얼굴 라인」은 이 페이지에서 세 번 나오는데
      범례(.fs-bc-group__bar)와 리캡(A24)은 --deep(#00646B), 코드 열만 기본 틸
      (#00787F)이었다. 코드 열에서는 바로 아래 썸네일 캡션이 같은 #00787F 라
      3단 위계(그룹 → 지점)가 평평해진다. 같은 이름은 같은 단으로 통일한다.
      (HTML 쪽 클래스로 처리 — 여기서는 근거만 남긴다)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. [마이크로] 섹션 제목 뒤 70px 틸 선 (48·110 검증분, delay .5s)
      ★ «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다 —
        fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다(fs.js:194).
        → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
      가운데정렬 제목(볼륨만 채우는 필러 NO! · 기존필러 = … · 눈주변·볼·얼굴 라인)
      에는 걸지 않는다 — 왼쪽에서 자라는 선이 가운데정렬과 어긋난다.
   -------------------------------------------------------------------------- */
.fs-p-109 .fs-bc-define > .fs-h2,
.fs-p-109 .fs-nose-head > .fs-h2 { position: relative; }

.fs-p-109 .fs-bc-define > .fs-h2::after,
.fs-p-109 .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: scaleX(1);
  transform-origin: left center;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-109 .fs-reveal:not(.is-in) > .fs-h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   5. [마이크로] 호버 — 프레임 고정 + 사진만 scale(1.045). 그림자는 쓰지 않는다.
      **코드 썸네일에만 건다.** 근거:
        · 핀(.fs-bc-codes__pin)이 상자의 정중앙(50%/50%)에 있고 확대도 중심 기준
          이라 동심 확대다 — 확대해도 핀이 가리키는 지점이 어긋나지 않는다.
        · 반대로 9포인트 맵(.fs-bc-map)의 핀은 %좌표 9개가 제각각이라
          사진만 확대하면 핀과 시술 지점이 통째로 어긋난다 → 걸지 않는다.
        · 해부 도해(.fs-bc-layers) · 노화 도해(.fs-bc-aging) · 리캡(.fs-bc-recap)은
          가장자리까지 정보가 차 있는 의학 도해다. 프레임 크롭 금지 → 걸지 않는다.
      라벨바는 사진과 함께 커지면 안 된다(글자가 흔들린다) — 색만 한 단계.
   -------------------------------------------------------------------------- */
.fs-p-109 .fs-bc-codes__box { overflow: hidden; }
.fs-p-109 .fs-bc-codes__box img { transition: transform var(--fs-dur-slow) var(--fs-ease-out); }

@media (hover: hover) and (pointer: fine) {
  .fs-p-109 .fs-bc-codes__fig:hover .fs-bc-codes__box img { transform: scale(1.045); }
  .fs-p-109 .fs-bc-codes__fig:hover > .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --------------------------------------------------------------------------
   6. reduced-motion — 위에서 얹은 모션을 전부 정지 상태로 확정
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-109 .fs-bc-define > .fs-h2::after,
  .fs-p-109 .fs-nose-head > .fs-h2::after {
    transition: none !important;
    transform: none !important;
  }
  .fs-p-109 .fs-bc-codes__box img { transition: none !important; }
  .fs-p-109 .fs-bc-codes__fig:hover .fs-bc-codes__box img { transform: none !important; }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 무변경. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-109-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 정의 리드(4줄)·코드 리드(2줄)는 한 문장을 PC 줄 경계에서 <br> 로 자른 것 → MOBILE_RULES §1-7: 옛 경계에 <br class="fs-pc-only">(앞에 공백) —
     1024 이상은 그대로, 그 아래는 한 문단으로 흐르며 balance(360 「… 표정의 변화를 / 고려하여」 외톨이 해소).
   · 코드 제목 「… 얼굴 / 코드 9」 → 「얼굴&nbsp;코드&nbsp;9」 + balance. 정의 보조문 · 근거 3줄 · 주소 balance.
   · 놔둔 것: 히어로 h1 <br>(디자인 줄바꿈) · 비교 대제목 <br> · 눈주변/볼/얼굴 라인 인물컷 세로 3장(§4-4). */
.fs-p-109 .fs-nose-lead,
.fs-p-109 .fs-h2,
.fs-p-109 .fs-body.fs-muted,
.fs-p-109 .fs-bc-basis__txt,
.fs-p-109 .fs-address { text-wrap: balance; }