/* ==========================================================================
   127 · 기미 / 색소 / 잡티 / 홍조 (slug: pigment-care) 전용 CSS
   모든 셀렉터는 .fs-p-127 스코프. 색은 --fs-* 토큰만 사용한다(새 hex 0개).
   ========================================================================== */

/* --- A01 · 3분할 스트립 히어로 (84 계열) ---------------------------------
   2026-08-31 · 승인자 지시 「127 의 헤더도 84 페이지의 헤더를 참조해서 다시 만들어줘」.
   같은 날 오전에 넣었던 «투명 오버레이 헤더 + 모델 히어로»(143 계열)를 걷어내고
   84 의 .fs-skin-hero 와 같은 «흰 면 가운데 카피 + 전폭 3분할 세로 스트립» 으로 바꿨다.
   오버레이 헤더 규칙(--fs-header-overlay-bg · .fs-header--overlay 잉크 변형)도
   같이 걷어냈다 — 헤더가 다시 흰 막대라 fs.css 기본값이 맞다. */
.fs-p-127 .fs-pig-hero {
  min-height: 0;
  align-items: stretch;
  background: var(--fs-white);
  color: var(--fs-ink);
  overflow: visible;
}
.fs-p-127 .fs-pig-hero__wrap {
  display: grid;
  gap: clamp(24px, 20.2px + 1.058vw, 42px);
  padding-block-start: clamp(28px, 23.8px + 1.170vw, 48px);
}
.fs-p-127 .fs-pig-hero .fs-hero__copy { gap: clamp(8px, 6.3px + 0.481vw, 16px); }
.fs-p-127 .fs-pig-hero .fs-hero__kicker {
  color: var(--fs-teal-dk);
  letter-spacing: 0.04em;
}
.fs-p-127 .fs-pig-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-127 .fs-pig-hero__rule {
  width: clamp(48px, 42.4px + 1.554vw, 74px);
  height: 3px;
  background: var(--fs-teal);
}
.fs-p-127 .fs-pig-hero__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 2.3px + 0.481vw, 12px);
}
.fs-p-127 .fs-pig-hero__cell {
  position: relative;
  overflow: hidden;
  height: clamp(230px, 149.4px + 22.4vw, 500px);
  background: var(--fs-cream-2);
}
/* 셀은 가로로 눕고(1920 에서 ≈635x500) 사진은 세로(694x925)라 cover 가 세로 일부만
   보여준다. 위치는 컷마다 얼굴 높이가 달라 «에셋마다 실측해서» 넣는다. */
.fs-p-127 .fs-pig-hero__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* --- 증상 칩 5종 (기미 / 잡티 / 홍조 / 검버섯 / 피부톤 정리) --------------- */
.fs-p-127 .fs-pig-sym {
  display: grid; gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: clamp(28px, 22.5px + 1.53vw, 51px);
}
@media (min-width: 600px)  { .fs-p-127 .fs-pig-sym { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-127 .fs-pig-sym { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fs-p-127 .fs-pig-sym__item { display: grid; }
.fs-p-127 .fs-pig-sym__box {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: var(--fs-cream-2);
}
.fs-p-127 .fs-pig-sym__box img { width: clamp(62px, 47.6px + 4vw, 106px); height: auto; }

/* --- 시그니처: 피부 단면 깊이별 레이저 매칭 -------------------------------
   원본(20260210/7eca61ed0e771.jpg)의 단면 도해를 그대로 쓰되, 구워져 있던
   지시선·지시점·분홍 배경은 지우고 지시점과 지시선을 HTML/CSS 로 다시 얹었다. */
.fs-p-127 .fs-pig-depth {
  display: grid; gap: clamp(30px, 24px + 1.67vw, 55px);
  margin-block-start: clamp(34px, 26.6px + 2.05vw, 65px);
}
.fs-p-127 .fs-pig-depth__fig {
  position: relative; justify-self: center; width: min(100%, 308px);
}
.fs-p-127 .fs-pig-depth__fig img { display: block; width: 100%; height: auto; }
.fs-p-127 .fs-pig-depth__dot {
  position: absolute; width: 14px; height: 14px;
  border-radius: var(--fs-radius-round);
  border: 3px solid var(--fs-teal-dk); background: var(--fs-white);
}
.fs-p-127 .fs-pig-depth__dot--outer { inset-block-start: 4%;  inset-inline-start: 16%; }
.fs-p-127 .fs-pig-depth__dot--inner { inset-block-start: 45%; inset-inline-start: 26%; }
.fs-p-127 .fs-pig-depth__side { display: grid; align-content: start; gap: var(--fs-sp-3); }
.fs-p-127 .fs-pig-depth__side .fs-pill { justify-self: start; }
.fs-p-127 .fs-pig-depth__name {
  font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head);
}
.fs-p-127 .fs-pig-depth__chip {
  display: grid; width: min(100%, 244px); margin-block-start: var(--fs-sp-4);
}
.fs-p-127 .fs-pig-depth__chip img { display: block; width: 100%; height: auto; }

/* 모바일에서는 도해를 먼저 보여주고 그 아래에 겉색소 → 속색소 설명을 쌓는다 */
@media (max-width: 1023px) {
  .fs-p-127 .fs-pig-depth__fig { order: -1; }
}

@media (min-width: 1024px) {
  .fs-p-127 .fs-pig-depth {
    grid-template-columns: minmax(0, 1fr) 308px minmax(0, 1fr);
    align-items: start; column-gap: 40px;
  }
  .fs-p-127 .fs-pig-depth__side--outer { text-align: end; }
  .fs-p-127 .fs-pig-depth__side--outer .fs-pill { justify-self: end; }
  .fs-p-127 .fs-pig-depth__side--outer .fs-pig-depth__chip { justify-self: end; }
  .fs-p-127 .fs-pig-depth__side--inner { padding-block-start: 104px; }
  /* 지시선 — 도해의 지시점에서 좌·우 여백 쪽으로 뻗는다 */
  .fs-p-127 .fs-pig-depth__dot::before {
    content: ""; position: absolute; inset-block-start: 9px;
    height: 2px; background: var(--fs-teal-dk);
  }
  .fs-p-127 .fs-pig-depth__dot--outer::before { inset-inline-end: calc(100% + 5px); width: 78px; }
  .fs-p-127 .fs-pig-depth__dot--inner::before { inset-inline-start: calc(100% + 5px); width: 243px; }
}

/* --- 색소 질환 4종 룰 카드 (사진 + 라벨바 + 설명) -------------------------- */
.fs-p-127 .fs-pig-dz__fig { display: grid; width: min(100%, 188px); }
.fs-p-127 .fs-pig-dz__fig img { display: block; width: 100%; height: auto; }
.fs-p-127 .fs-pig-dz__text { display: grid; gap: var(--fs-sp-2); align-content: start; }
@media (min-width: 1024px) {
  .fs-p-127 .fs-pig-dz {
    grid-template-columns: 188px minmax(0, 1fr);
    align-items: start; column-gap: var(--fs-gap-col);
  }
}

/* --- 보유장비 5종 타일 ---------------------------------------------------- */
.fs-p-127 .fs-pig-dev { display: grid; }
.fs-p-127 .fs-pig-dev__box { display: block; background: var(--fs-white); }
.fs-p-127 .fs-pig-dev__box img { display: block; width: 100%; height: auto; }
.fs-p-127 .fs-pig-dev__cap { display: grid; }
.fs-p-127 .fs-pig-dev__tag {
  padding-block-start: var(--fs-sp-3);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
  color: var(--fs-muted); text-align: center;
}

/* --- A09 다크 스테이트먼트 ------------------------------------------------
   .fs-section > .fs-container 만 z-index 를 받으므로 직계 그리드에 직접 준다. */
.fs-p-127 .fs-pig-statement .fs-section__bg { opacity: .16; }
.fs-p-127 .fs-pig-statement__grid {
  position: relative; z-index: 1;
  gap: 0;                                  /* 두 면이 맞붙어야 밴드가 한 장으로 읽힌다 */
  --fs-split-align: center;
}
.fs-p-127 .fs-pig-statement__fig { display: block; height: 100%; }
.fs-p-127 .fs-pig-statement__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-p-127 .fs-pig-statement__copy {
  display: grid; align-content: center; gap: var(--fs-sp-6);
  padding: clamp(52px, 38.5px + 3.75vw, 100px) var(--fs-gutter);
}

/* --- A21 시술정보 --------------------------------------------------------- */
.fs-p-127 .fs-pig-info__fig { display: block; }
.fs-p-127 .fs-pig-info__fig img { display: block; width: 100%; height: auto; }
.fs-p-127 .fs-pig-info__table { align-self: center; }

/* ==========================================================================
   ▼▼▼ V70 「틀 안에서의 재구성」 + 진단·수정 패스 — 2026-08-27
   근거 = _design/V70-ROLLOUT.md(127 = B1 · E2) · _design/QA/48.md 의 검증된 처방.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. [V70-B] A09 다크 밴드 — 50:50 하드컷 → 62:38 비대칭 + 카피 패널이 사진 위로
   시안 상태는 사진 960 / 카피 960 의 정확한 반반이라 «맞붙은 두 장» 으로 읽힌다.
   사진 열을 62% 로 키우고 카피 패널을 가로 음수 마진으로 그 위에 끌어당긴다.
   패널은 세로로 짧으므로(align-self:center) 겹침 구간의 위·아래로 사진이 드러나
   「패널이 사진 위에 얹힌」 것으로 읽힌다.

   ★ 겹침이 성립하는 근거 — statement.jpg 평균 휘도 **168.3** (PIL 실측, 기준 110).
   ★ 음수 마진은 **PC 가로 방향으로만**. 세로로 주면 섹션이 통째로 끌려 올라간다(48 함정).
   ★ 이 도해에는 라벨바가 없으므로 겹침이 라벨바를 먹지 않는다(LOCK 2 안전).
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .fs-p-127 .fs-pig-statement__grid {
    --fs-split: minmax(0, 62fr) minmax(0, 38fr);
    --fs-split-align: stretch;            /* 사진은 밴드 높이를 채운다 */
  }
  .fs-p-127 .fs-pig-statement__fig { position: relative; z-index: 1; }
  .fs-p-127 .fs-pig-statement__copy {
    align-self: center;                   /* 카피만 가운데 — 위아래로 사진이 남는다 */
    position: relative;
    z-index: 3;                           /* .fs-section__bg 위, 사진 위 */
    margin-inline-start: clamp(-160px, -8vw, -80px);
    background: var(--fs-ink-band);       /* 겹치는 부분에서 글자가 사진에 묻지 않게 */
    padding-inline: clamp(36px, 2.6vw, 60px) var(--fs-gutter);
  }
}

/* --------------------------------------------------------------------------
   2. [V70-E] A07 색소 질환 4종 — 크림 밴드 위 흰 카드 4장 → 헤어라인 열
   흰 상자 4개가 크림 위에 20px 간격으로 놓여 «상자의 나열» 로 읽힌다.
   상자를 지우고 `.fs-card--rule` 이 이미 갖고 있는 2px 틸 세로선만 남기면
   그 선이 열 구분자가 되고 밀도가 올라간다(about-promise 실측 패턴과 같은 형태).
   행 사이만 헤어라인으로 끊는다.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .fs-p-127 .fs-pig-dz-list { gap: 0; }
  .fs-p-127 .fs-pig-dz {
    position: relative;
    background: transparent;              /* 상자를 지운다 */
    padding: clamp(26px, 1.6vw, 38px) clamp(24px, 1.8vw, 40px);
  }
  /* 행 구분 헤어라인 — 첫 줄을 제외한 모든 줄 위에 */
  .fs-p-127 .fs-pig-dz:nth-child(n+3)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 1px;
    background: var(--fs-line-input);
  }
}

/* --------------------------------------------------------------------------
   3. 태블릿 고아 카드 — 보유장비 5장이 2열에서 마지막 줄에 1장만 남는다
   fs.css:334 가 600~1023 구간에서 `.fs-grid--5` 를 2열로 만든다 → 2+2+1.
   48 과 같은 처방으로 3열(3+2)로 나눈다. 같은 구간의 `.fs-pig-sym` 도 이미 3열이라
   두 그리드의 리듬이 맞는다.
   -------------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-127 .fs-pig-dev-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. 섹션 제목 뒤 70px 틸 선 (delay .5s)
   ★ 48 함정 — 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 `.fs-reveal` 클래스 자체를 붙이지 않는다.
     → 기본을 «그어진 상태» 로 두고 `.fs-reveal:not(.is-in)` 에만 초기 은닉을 건다.
   -------------------------------------------------------------------------- */

.fs-p-127 .fs-nose-head h2,
.fs-p-127 .fs-sec-head__title { position: relative; }

.fs-p-127 .fs-nose-head h2::after,
.fs-p-127 .fs-sec-head__title::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;
}
/* 가운데정렬 헤드(A15)에서는 선도 가운데에서 자란다 */
.fs-p-127 .fs-sec-head--center .fs-sec-head__title::after {
  margin-inline: auto;
  transform-origin: center;
}
:root.fs-js .fs-p-127 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-127 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   5. 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 쓰지 않는다.
   틸트가 걸린 A15·A06 은 제외한다(두 모션이 겹치면 산만하다).
   ★ `.fs-pig-dz__fig` 는 img 와 라벨바가 형제 그리드 행이라 확대된 사진이
     라벨바를 덮는다. 라벨바를 z-index 로 위에 올려 사진이 그 «뒤» 로 흐르게 한다.
   -------------------------------------------------------------------------- */

.fs-p-127 .fs-pig-dz__fig,
.fs-p-127 .fs-pig-info__fig { overflow: hidden; }
.fs-p-127 .fs-pig-dz__fig .fs-labelbar { position: relative; z-index: 1; }
.fs-p-127 .fs-pig-dz__fig img,
.fs-p-127 .fs-pig-info__fig img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-127 .fs-pig-dz:hover .fs-pig-dz__fig img,
  .fs-p-127 .fs-pig-info__fig:hover img { transform: scale(1.045); }
  /* 라벨바는 사진과 함께 커지면 안 된다 — 글자가 흔들린다. 색만 한 단계 */
  .fs-p-127 .fs-pig-dz: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-127 .fs-nose-head h2::after,
  .fs-p-127 .fs-sec-head__title::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-127 .fs-pig-dz__fig img,
  .fs-p-127 .fs-pig-info__fig img { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   7. A09 고스트 배경 — 「강하게 블러된 인물 사진」으로
   `statement-ghost.jpg` 는 블러가 전혀 안 걸린 정면 인물컷이다(엣지 에너지 3.01,
   확정 시안 57 의 `nose/compare-bg.jpg` 는 0.46). 다크 밴드 위 .16 불투명도로 깔면
   질감이 아니라 «패널 뒤에 반쯤 가려진 두번째 얼굴» 로 읽힌다. 6번 항목에서
   밴드를 키우면서 노출 면적이 더 커졌다.
   확정 시안의 처방(spec-nose[3] 「단색 위에 강하게 블러된 인물 사진」)을 그대로
   CSS 로 건다 — 에셋은 그대로 두므로 되돌리려면 이 블록만 지우면 된다.
   -------------------------------------------------------------------------- */

.fs-p-127 .fs-pig-statement .fs-section__bg img { filter: blur(24px); }

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-127-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   줄바꿈: 원인 리드 「… 생기는 / 색소성 질환은」 · 종류 h2·리드 · 종류 카드 설명 · 진단 리드(「치료도 달라져야」) · 장비 용도 → balance.
   배치(<600, MOBILE_RULES §2 A):
   · 보유장비 5장 1열(장당 ≈340px) → 2열, 마지막 홀수 장은 반 폭 가운데(5 = 2+2+1).
   · 색소케어 장점 POINT 4장 1열 → 2×2(57 POINT 2×2 와 같은 판단).
   · 증상 칩 5종(원래 2열)은 마지막 「피부톤 정리」 가 왼쪽에 혼자 매달려 있었다 → 반 폭 가운데. */
.fs-p-127 #depth .fs-nose-lead,
.fs-p-127 #types .fs-h2,
.fs-p-127 #types .fs-nose-lead,
.fs-p-127 #types .fs-card__desc,
.fs-p-127 #question .fs-lead,
.fs-p-127 .fs-pig-dev__tag { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-127 .fs-pig-dev-list,
  .fs-p-127 #merits .fs-nose-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-127 .fs-pig-dev-list > li:last-child:nth-child(odd),
  .fs-p-127 .fs-pig-sym > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--fs-gap-card)) / 2);
  }
  /* POINT 2×2 값은 57.css 의 같은 패턴(<600) 그대로 — 아이콘 64 · 캡션 14px · 좌우 6px. 칸 150px 에서 캡션이 3줄로 접혀
     한 줄의 두 카드 바닥이 어긋났다 → li 를 grid 로 늘려 같은 줄 카드 높이를 맞춘다. */
  .fs-p-127 #merits .fs-nose-cards { gap: var(--fs-sp-3); }
  .fs-p-127 #merits .fs-nose-cards > li { display: grid; }
  .fs-p-127 #merits .fs-nose-point { gap: var(--fs-sp-3); padding: var(--fs-sp-3) 6px var(--fs-sp-5); }
  .fs-p-127 #merits .fs-nose-point .fs-card__icon { width: 64px; }
  .fs-p-127 #merits .fs-nose-point .fs-card__caption { font-size: 14px; }
}