/* ==========================================================================
   84 · 피부 (카테고리 랜딩) — 이 페이지 전용 CSS
   전용 컴포넌트 4종
     .fs-skin-hero    3분할 인물 스트립 히어로
     .fs-skin-key     필수 영양소 4키워드 카드 (아이콘 + 라벨바)
     .fs-skin-matrix  ★시그니처 — 다섯 시술 통합 시술정보 매트릭스
     .fs-skin-dev     보유장비 타일
     .fs-skin-check   판단 기준 인용 카드
   색은 전부 --fs-* 토큰. 새 hex 없음.
   ========================================================================== */

/* --- A01 · 3분할 인물 스트립 히어로 ------------------------------------ */
.fs-p-84 .fs-skin-hero {
  min-height: 0;
  align-items: stretch;
  background: var(--fs-white);
  color: var(--fs-ink);
  overflow: visible;
}
.fs-p-84 .fs-skin-hero__wrap {
  display: grid;
  gap: clamp(24px, 20.2px + 1.058vw, 42px);
  padding-block-start: clamp(28px, 23.8px + 1.170vw, 48px);
}
.fs-p-84 .fs-skin-hero .fs-hero__kicker {
  color: var(--fs-teal-dk);
  letter-spacing: 0.04em;
}
.fs-p-84 .fs-skin-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-84 .fs-skin-hero .fs-hero__copy { gap: clamp(8px, 6.3px + 0.481vw, 16px); }
.fs-p-84 .fs-skin-hero__rule {
  width: clamp(48px, 42.4px + 1.554vw, 74px);
  height: 3px;
  background: var(--fs-teal);
}
.fs-p-84 .fs-skin-hero__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 2.3px + 0.481vw, 12px);
}
.fs-p-84 .fs-skin-hero__cell {
  position: relative;
  overflow: hidden;
  height: clamp(230px, 149.4px + 22.4vw, 500px);
  background: var(--fs-cream-2);
}
.fs-p-84 .fs-skin-hero__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* --- A04 · 파노라마 인트로 --------------------------------------------- */
.fs-p-84 .fs-skin-lead__fig { margin-block-start: var(--fs-gap-title); }
.fs-p-84 .fs-skin-lead__split { margin-block-start: var(--fs-gap-title); }
.fs-p-84 .fs-skin-lead__label { color: var(--fs-teal-dk); font-weight: 600; }

/* --- A06 · 필수 영양소 4키워드 ----------------------------------------- */
.fs-p-84 .fs-skin-keys {
  margin-block-start: var(--fs-gap-title);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fs-p-84 .fs-skin-key { display: grid; grid-template-rows: 1fr auto; }
.fs-p-84 .fs-skin-key__card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(16px, 12.8px + 0.897vw, 30px);
  padding: clamp(22px, 17.4px + 1.282vw, 42px) var(--fs-sp-5);
  background: var(--fs-cream);
}
.fs-p-84 .fs-skin-key__icon {
  display: grid;
  place-items: center;
  width: clamp(108px, 84.2px + 6.6vw, 184px);
  aspect-ratio: 300 / 202;
}
.fs-p-84 .fs-skin-key__icon img { width: 100%; height: 100%; object-fit: contain; }

/* --- A18 · 다섯 갈래 라인업 카드 --------------------------------------- */
.fs-p-84 .fs-skin-line {
  margin-block-start: var(--fs-gap-title);
  grid-template-columns: minmax(0, 1fr);
}
.fs-p-84 .fs-skin-line .fs-card__title { padding-inline-end: clamp(48px, 45.7px + 0.641vw, 58px); }
.fs-p-84 .fs-skin-line__media { position: relative; display: block; overflow: hidden; }
/* 600~1023 에서만 카드 바닥이 li 바닥보다 23~45px 짧다 — li 는 늘어나는데 안쪽 카드가
   따라 늘지 않아서다. 크림 밴드 위 흰 카드라 왼쪽·오른쪽 카드 바닥이 눈에 띄게 어긋난다.
   li 를 grid 로 만들면 자식이 stretch 로 따라 늘어난다.
   ※ 이번 링크 변경(article→a) 때문이 아니다 — 백업으로 A/B 를 돌려 수치가 같은 것을 확인했다.
   ※ 1024+ 는 이미 편차 0 이고 패널이 카드 밖으로 떨어지는 구조(--fs-panel-drop)라 제외한다. */
@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-84 .fs-skin-line > li { display: grid; }
}

/* 2026-08-31 · 승인자 지시 「이 세션의 카드들 누르면 해당 페이지로 이동 안 되고 있어」.
   링크가 우상단 + 버튼에만 걸려 있었다. 카드 면 전체를 <a> 로 바꿔 어디를 눌러도 넘어간다.
   ※ stretched-link(::after inset:0)는 못 쓴다 — fs.css 가 .fs-plusbtn 을 position:absolute 로
     잡아 놔서 ::after 가 버튼 크기로만 퍼진다. 버튼은 표시만 남은 <span> 이라
     자기 :hover 로는 안 변하므로 카드 호버·포커스를 따라가게 옮긴다. */
.fs-p-84 a.fs-card--panel:focus-visible .fs-plusbtn { background: var(--fs-teal-dk); }
@media (hover: hover) and (pointer: fine) {
  .fs-p-84 .fs-skin-line > li:hover .fs-plusbtn { background: var(--fs-teal-dk); }
}
.fs-p-84 .fs-skin-line__media img { width: 100%; height: auto; display: block; }
.fs-p-84 .fs-skin-line .fs-card__panel { gap: var(--fs-sp-3); }
.fs-p-84 .fs-skin-line__desc {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
  padding-inline-end: clamp(44px, 41.7px + 0.641vw, 54px);
}

/* --- ★ 시그니처 · 통합 시술정보 매트릭스 -------------------------------- */
.fs-p-84 .fs-skin-matrix-sec { position: relative; isolation: isolate; }
.fs-p-84 .fs-skin-matrix-sec > .fs-container { position: relative; z-index: 2; }
.fs-p-84 .fs-skin-matrix-sec .fs-section__bg { z-index: 0; opacity: 0.11; }
.fs-p-84 .fs-skin-matrix-sec .fs-section__bg img { object-position: 72% 22%; }
.fs-p-84 .fs-skin-matrix-wrap { margin-block-start: var(--fs-gap-title); }
.fs-p-84 .fs-skin-matrix { min-width: 660px; }
.fs-p-84 .fs-skin-matrix caption { caption-side: top; }
.fs-p-84 .fs-skin-matrix thead th {
  background: var(--fs-teal-text);
  color: var(--fs-white);
  white-space: nowrap;
}
.fs-p-84 .fs-skin-matrix tbody th,
.fs-p-84 .fs-skin-matrix tbody td { color: var(--fs-on-dark); }
.fs-p-84 .fs-skin-matrix tbody th { font-weight: 700; }
.fs-p-84 .fs-skin-matrix tbody tr + tr { border-block-start: 1px solid var(--fs-arrow-soft); }
.fs-p-84 .fs-skin-matrix__keep { color: var(--fs-teal-neon); font-weight: 700; }
.fs-p-84 .fs-skin-matrix__note {
  margin-block-start: var(--fs-sp-5);
  display: grid;
  gap: var(--fs-sp-1);
  color: var(--fs-white);
}

/* --- 보유장비 타일 ------------------------------------------------------ */
.fs-p-84 .fs-skin-dev {
  margin-block-start: var(--fs-gap-title);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fs-p-84 .fs-skin-dev__fig { display: grid; }
.fs-p-84 .fs-skin-dev__fig img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--fs-white);
}
.fs-p-84 .fs-skin-dev__meta {
  display: grid;
  gap: var(--fs-sp-1);
  margin-block-start: var(--fs-sp-4);
}
.fs-p-84 .fs-skin-dev__use { font-size: var(--fs-t-body); color: var(--fs-ink-soft); }
.fs-p-84 .fs-skin-dev__src { font-size: var(--fs-t-xs); color: var(--fs-muted-2); }

/* --- 판단 기준 인용 카드 ------------------------------------------------ */
.fs-p-84 .fs-skin-check {
  margin-block-start: var(--fs-gap-title);
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
}
.fs-p-84 .fs-skin-check__item {
  display: grid;
  gap: var(--fs-sp-5);
  align-content: start;
  background: var(--fs-white);
  padding: clamp(16px, 13.5px + 0.705vw, 28px);
}
.fs-p-84 .fs-skin-check__fig { display: grid; }
.fs-p-84 .fs-skin-check__fig img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 700 / 432;
  object-fit: cover;
  background: var(--fs-cream-2);
}
.fs-p-84 .fs-skin-check__fig img.fs-skin-check__ill {
  object-fit: contain;
  padding: var(--fs-sp-5) var(--fs-sp-3);
}
.fs-p-84 .fs-skin-check__quote {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-loose);
  color: var(--fs-ink-soft);
}
.fs-p-84 .fs-skin-check__shapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fs-sp-3) var(--fs-sp-2);
  background: var(--fs-cream-2);
  padding: var(--fs-sp-4) var(--fs-sp-3);
}
.fs-p-84 .fs-skin-check__shape { display: grid; gap: var(--fs-sp-1); justify-items: center; }
.fs-p-84 .fs-skin-check__shape img { width: 100%; max-width: 74px; height: auto; display: block; }
.fs-p-84 .fs-skin-check__shapecap {
  font-size: var(--fs-t-xs);
  line-height: 1.3;
  text-align: center;
  color: var(--fs-ink-soft);
}
.fs-p-84 .fs-skin-check__src {
  font-size: var(--fs-t-xs);
  font-weight: 700;
  color: var(--fs-teal-dk);
  letter-spacing: var(--fs-ls-wide);
}

@media (min-width: 600px) {
  .fs-p-84 .fs-skin-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-84 .fs-skin-line  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .fs-p-84 .fs-skin-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-p-84 .fs-skin-dev  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-p-84 .fs-skin-check { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-p-84 .fs-skin-line {
    row-gap: calc(var(--fs-gap-card) + var(--fs-panel-drop, 72px));
    padding-block-end: var(--fs-panel-drop, 72px);
  }
  .fs-p-84 .fs-skin-line > li { --fs-panel-w: 340px; --fs-panel-drop: 62px; }
}

@media (min-width: 1280px) {
  .fs-p-84 .fs-skin-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-p-84 .fs-skin-line > li { --fs-panel-w: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-p-84 .fs-skin-hero__cell img,
  .fs-p-84 .fs-skin-matrix-sec .fs-section__bg img { transform: none !important; }
}


/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   근거는 _design/QA/84.md. 아래 4블록만 추가하고 위 정의부는 손대지 않았다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. [접근성] 보유장비 출처 라벨 AA 미달 — 6건
   --fs-muted-2(#7D7D7D)는 fs.css:2716 의 AA 보정 대상에서 빠져 있어
   흰 섹션 위에서 4.12:1 이다(기준 4.5). 같은 「출처 페이지」 역할인
   .fs-skin-check__src 가 이미 쓰는 --fs-teal-dk(#00646B · 6.92:1)로 맞춘다.
   -------------------------------------------------------------------------- */
.fs-p-84 .fs-skin-dev__src { color: var(--fs-teal-dk); }

/* --------------------------------------------------------------------------
   B. [구조 · V70 E] 「고르기 전에 확인할 것」 5칸 균등 격자 깨기
   .fs-skin-check__item--wide 는 HTML(84/index.html:426)에만 있고 CSS 규칙이
   없어 죽은 클래스였다. 그 결과
     · 1024+ 3열 → 마지막 줄이 2칸 + 빈 칸 1개
     · 600–1023 2열 → 마지막 줄에 1장만 남는 고아
     · 흉터 도해 6개가 1/3 열(1024 실측 309px)에 갇혀 캡션이 접힘
       (실측 1024: 「켈로이드형 흉터」만 2줄 34px, 나머지 17px — 줄 높이가 들쭉날쭉)
   의도대로 2열을 먹이면 격자가 3+2 균등에서 벗어나 비대칭이 되고,
   위 세 결함이 한 번에 사라진다. 흰 상자는 지우지 않는다 — 사진 자체가
   밝은 배경을 갖고 있어 상자를 지워도 크림 위에 흰 사각형이 그대로 남는다.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .fs-p-84 .fs-skin-check__item--wide { grid-column: span 2; }
  /* 도해 스트립은 옆 사진(700/432)보다 낮아서, 칸 높이를 맞추는 stretch 때문에
     카드 아래쪽에 흰 여백이 1920 실측 160px 남는다. 남는 높이를 도해 판에 주고
     아이콘을 그 안에서 세로 가운데로 놓는다. 라벨바는 판 바닥에 그대로 붙는다. */
  .fs-p-84 .fs-skin-check__item--wide {
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .fs-p-84 .fs-skin-check__item--wide .fs-skin-check__fig { grid-template-rows: minmax(0, 1fr) auto; }
  .fs-p-84 .fs-skin-check__item--wide .fs-skin-check__shapes { align-content: center; }
}
/* 도해가 넓어진 만큼 6개를 한 줄 스트립으로 편다.
   600–767 은 제외한다 — 한 칸이 84px 로 좁아져 「켈로이드형 흉터」만 2줄로 접힌다
   (실측 600: CAP5=34px vs 나머지 25px). 768 부터는 110px 이라 전부 1줄이다. */
@media (min-width: 768px) {
  .fs-p-84 .fs-skin-check__item--wide .fs-skin-check__shapes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  /* 한 칸이 110→152px 로 넓어졌다. 원본이 260x260 이라 96px 까지 업스케일 0 이다 */
  .fs-p-84 .fs-skin-check__item--wide .fs-skin-check__shape img { max-width: 96px; }
}
/* 2열 구간에서는 2칸 = 한 줄이라 그대로 두면 앞뒤로 빈 칸이 두 개 생긴다.
   맨 뒤로 돌려 [1][2] / [3][5] / [4 4] 로 채운다.
   이 li 안에는 포커스 가능한 요소가 없어 order 가 탭 순서를 어긋내지 않는다. */
@media (min-width: 600px) and (max-width: 1023px) {
  .fs-p-84 .fs-skin-check__item--wide { order: 1; }
}

/* --------------------------------------------------------------------------
   C. [마이크로] 섹션 제목 뒤 70px 틸 선 — 48 검증분과 같은 처방
   ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 을 아예 안 붙인다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 은닉을 건다.
   -------------------------------------------------------------------------- */
.fs-p-84 .fs-h2 { position: relative; }
.fs-p-84 .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;
}
/* 은닉 쪽에는 트랜지션을 끊는다 — fs.js 가 첫 페인트 뒤에 .fs-reveal 을 붙이면
   1→0 이 「그어졌다 지워지는」 역재생으로 보인다. */
:root.fs-js .fs-p-84 .fs-reveal:not(.is-in) .fs-h2::after,
:root.fs-js .fs-p-84 .fs-h2.fs-reveal:not(.is-in)::after {
  transform: scaleX(0);
  transition: none;
}

/* --------------------------------------------------------------------------
   D. [마이크로] 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 안 쓴다.
   라벨바는 사진과 같이 커지면 글자가 흔들리므로 색만 한 단계 내린다.
   -------------------------------------------------------------------------- */
.fs-p-84 .fs-skin-check__fig { overflow: hidden; }
.fs-p-84 .fs-skin-check__fig .fs-labelbar { position: relative; z-index: 1; }
.fs-p-84 .fs-skin-line__media img,
.fs-p-84 .fs-skin-check__fig img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-84 .fs-skin-line > li:hover .fs-skin-line__media img,
  .fs-p-84 .fs-skin-check__item:hover .fs-skin-check__fig > img { transform: scale(1.045); }

  .fs-p-84 .fs-skin-check__item:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-p-84 .fs-h2::after { transform: scaleX(1) !important; transition: none !important; }
  .fs-p-84 .fs-skin-line__media img,
  .fs-p-84 .fs-skin-check__fig img { transition: none !important; transform: none !important; }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치 변경 없음. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-84-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   360·390 고아 줄: 「…네 / 가지입니다.」(→ &nbsp;) · 다섯 갈래 설명 · 표 주의문 · 장비 용도 「… 주근깨 / / 오타모반」 · 고르기 전 인용 · 리드 본문 → balance.
   다섯 갈래 · 고르기 전 카드(각 5장 세로)는 틸트 패널 카드라 배치는 그대로(§4-4). */
.fs-p-84 #lead .fs-body,
.fs-p-84 #keys .fs-nose-lead,
.fs-p-84 .fs-skin-line__desc,
.fs-p-84 #matrix .fs-xs,
.fs-p-84 .fs-skin-dev__use,
.fs-p-84 .fs-skin-check__quote { text-wrap: balance; }