/* ==========================================================================
   page/About.css — [About] 눈 (카테고리 랜딩) 전용 추가 CSS
   · 셀렉터는 전부 .fs-p-About 스코프 안에만 둔다 (다른 페이지 영향 0)
   · 색은 fs.css :root 의 --fs-* 토큰만 쓴다. 새 hex 없음
   · fs.css / fs-sub.css 뒤에 로드된다
   · 전용 컴포넌트 접두사는 .fs-eye-* (slug = eye)
   ========================================================================== */

/* --- 1mm 계열 오버레이 헤더 (밝은 히어로용 «잉크» 변형) ------------------
   2026-08-28 · 흰 막대 헤더를 걷어내고 사진 위에 얹었다. fs.css 의
   .fs-header--overlay 는 «흰 글자 + 어두운 스크림» 전제(다크 히어로용)라
   히어로 상단이 전 폭 그레이지인 이 페이지에서는 네 곳을 같이 뒤집는다
   (53 · 81 과 같은 처방). */
.fs-p-About {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 렌더는 그대로지만
   사진 로딩 전 흰 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-About .fs-page--overlay { background: #D9CFC6; }
.fs-p-About .fs-header--overlay { color: var(--fs-ink); }
/* 2026-09-11 승인자 지시 「56 처럼 메뉴바 그라디에이션」 — fs.css:468 기본 ::before(검정 스크림)를
   content:none 으로 껐던 것을 되살리고 배경만 밝은 안개로 바꾼다. 56 은 크림(246,241,236)인데
   이 계열 19장은 히어로 틴트가 제각각(세이지·라벤더·블루그레이…)이라 크림을 얹으면 색이 물든다 —
   흰색 알파는 어느 틴트 위에서도 «빛 번짐» 으로 읽힌다(47·64·67·48 비교 렌더로 확인).
   위치·높이(헤더 1.6배)·pointer-events 는 fs.css 기본값 그대로다. */
.fs-p-About .fs-header--overlay::before { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,0) 100%); }
/* :not() 로 감싼다 — fs.css:495 의 [aria-current] 700 과 특정성이 같아
   «이 페이지가 곧 대분류» 일 때 굵게 표시가 조용히 죽는다 (2026-09-10 카테고리 재편) */
.fs-p-About .fs-gnb__link:not([aria-current="page"]) { font-weight: 400; }
.fs-p-About .fs-header--overlay .fs-gnb__link:hover,
.fs-p-About .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-About .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-About .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-About .fs-header--overlay .fs-allmenu { color: var(--fs-ink); }
.fs-p-About .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-About .fs-util__sep { opacity: .35; }

/* --- 1. A01 · 오버레이 히어로 (카피 «좌» / 모델컷 «우» / 하단 시술 칩 바) ---
   .fs-hero--sub(320→460) 보다 크고 .fs-hero--tall 보다 큰 랜딩 전용 높이.
   이 페이지에만 필요한 값이라 clamp 로 직접 잡는다 (MO 560 → PC 1000).
   에셋 hero-model.jpg 는 인물이 우 45% 안에 들어가고 머리 위로 화면의 19% 가
   비어 있게 생성했다 — 그래서 투명 헤더 띠가 머리카락에 안 걸린다. */
.fs-p-About .fs-p-About-hero {
  min-height: clamp(560px, 458.5px + 28.205vw, 755px);
  align-items: stretch;
  /* 사진 로딩 전에만 보이는 색. «사진 전체 상단 평균»(#D5CBC2)으로 잡았더니 실제 카피 자리
     (#D9CFC6)보다 어두워, 그 전환 상태에서만 킥커가 4.33:1 로 미달이었다. 실측값으로 맞춘다.
     렌더된 화면은 사진이 덮으므로 변화 0. */
  background: #D9CFC6;
}
/* fs.css 의 .fs-hero__bg img 규칙은 <picture> 를 건너뛴다 */
.fs-p-About .fs-p-About-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭은 «위 고정» — 가운데로 두면 모델 머리가 헤더 띠로 올라온다 */
/* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=201 라 0% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-About .fs-p-About-hero .fs-hero__bg img { object-position: 50% 36%; }
/* 배경이 밝은 그레이지라 흰 글자가 AA 에 못 미친다 → 57 과 같이 잉크색으로 내린다 */
.fs-p-About .fs-p-About-hero .fs-hero__kicker {
  font-family: var(--fs-font-en);
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.06em;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fs-teal-dk);
}
.fs-p-About .fs-p-About-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--fs-ink);
}
/* 카피·칩 열 폭 — 사진 속 인물이 가로 55% 지점에서 시작하므로 그 앞에서 끊는다.
   1024 에서 640px 를 그대로 쓰면 칩 마지막 줄이 모델 옷 위로 올라간다(실측). */
.fs-p-About .fs-p-About-hero .fs-hero__copy {
  gap: var(--fs-sp-5);
  max-width: min(100%, 50vw, 640px);
}
.fs-p-About .fs-p-About-hero__inner > nav { max-width: min(100%, 50vw); }

.fs-p-About .fs-p-About-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--fs-sp-9);
  /* 투명 헤더가 위를 덮으므로 카피는 헤더 높이만큼 내려서 시작한다 */
  padding-block: calc(var(--fs-header-h) + clamp(28px, 20.62px + 2.051vw, 60px))
                 clamp(28px, 20.62px + 2.051vw, 60px);
}
/* <1024px — 히어로가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피 + 칩을 그레이지 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다
   (53 · 81 과 같은 처리). */
@media (max-width: 1023px) {
  .fs-p-About .fs-p-About-hero { min-height: 0; background: #B9ACA3; }
  .fs-p-About .fs-p-About-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-About .fs-p-About-hero .fs-hero__bg img {
    height: auto; aspect-ratio: 3 / 4; object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px);
            mask-image: linear-gradient(180deg, transparent 0, #000 96px);
  }
  .fs-p-About .fs-p-About-hero .fs-hero__inner { grid-row: 1; background: #B9ACA3; }
  /* 킥커는 PC 에선 틸(#00646B)이지만 이 밴드(#B9ACA3) 위에서는 3.13:1 로 AA 미달이다.
     밴드는 사진 최상단색과 맞춰야 이음매가 안 생기므로 밴드를 못 밝힌다 → 글자를 내린다.
     --fs-ink-soft 는 4.76:1 로 여유가 0.26 뿐이라 --fs-ink(8.54:1)로 간다.
     ※ qa.py 는 이 문단을 건너뛴다 — <br> 이 있으면 통째로 빠진다(qa-contrast-skips-children).
       1024 게이트 아래에서만 나는 결함이라 폭 스윕도 게이트 양쪽을 걸쳐야 잡힌다. */
  .fs-p-About .fs-p-About-hero .fs-hero__kicker { color: var(--fs-ink); }
  .fs-p-About .fs-p-About-hero .fs-hero__copy,
  .fs-p-About .fs-p-About-hero__inner > nav { max-width: 100%; }
}

/* 시술 8종 앵커 칩 바 — 이 페이지의 시그니처(칩 ↔ 카드가 같은 8개를 가리킨다) */
.fs-p-About .fs-p-About-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fs-p-About .fs-p-About-chip {
  transition: background-color var(--fs-dur) var(--fs-ease);
}
.fs-p-About .fs-p-About-chip:hover { background: var(--fs-teal-dk); }

/* --- 2. 파노라마 인트로 + 선언 3분할 (전용 컴포넌트 .fs-eye-triad) ------ */
.fs-p-About .fs-p-About-wide { margin-block-start: var(--fs-gap-title); }
.fs-p-About .fs-p-About-wide .fs-figure__img { aspect-ratio: 1440 / 340; }
.fs-p-About .fs-p-About-lead-split { margin-block-start: var(--fs-gap-title); }

/* 선언문 3행을 사진 3장 + 틸 라벨바로 다시 조판한 랜딩 전용 부품 */
.fs-p-About .fs-eye-triad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-card);
  margin: var(--fs-sp-5) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .fs-p-About .fs-eye-triad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-About .fs-eye-triad__fig { display: grid; margin: 0; }
.fs-p-About .fs-eye-triad__box {
  display: block;
  overflow: hidden;
  aspect-ratio: 640 / 420;
}
.fs-p-About .fs-eye-triad__box img { width: 100%; height: 100%; object-fit: cover; }

/* --- 3. 진단 4요소 도해 카드 (.fs-eye-dx) ------------------------------- */
.fs-p-About .fs-eye-dx { margin-block-start: var(--fs-gap-title); }
.fs-p-About .fs-eye-dx__card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(14px, 11.6px + 0.641vw, 24px);
  margin: 0;
  padding: clamp(18px, 15.2px + 0.769vw, 30px) var(--fs-sp-5) 0;
  height: 100%;
  grid-template-rows: auto 1fr auto;
}
.fs-p-About .fs-eye-dx__ill {
  display: grid;
  place-items: center;
  width: clamp(96px, 89.2px + 1.795vw, 124px);
  aspect-ratio: 1;
}
.fs-p-About .fs-eye-dx__ill img { width: 100%; height: 100%; object-fit: contain; }
/* 라벨바는 카드 좌우 패딩을 무시하고 바닥에 꽉 차게 (57 의 도해 리듬) */
.fs-p-About .fs-eye-dx__card .fs-labelbar {
  width: calc(100% + var(--fs-sp-5) * 2);
  margin-inline: calc(-1 * var(--fs-sp-5));
  margin-block-start: clamp(14px, 11.6px + 0.641vw, 24px);
}

/* --- 4. 눈 시술 8종 지도 (겹친 패널 카드 + 시술 도해) ------------------- */
.fs-p-About .fs-p-About-map {
  --fs-panel-w: 64%;
  --fs-panel-drop: 72px;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-About .fs-p-About-card__inner { position: relative; display: block; }
/* 카드 전체가 시술 페이지로 가는 링크다(플러스 버튼만 누르던 것을 카드 면 전체로 넓혔다).
   버튼은 표시만 남은 <span> 이라 자기 :hover 로는 안 변한다 — 카드 호버·포커스를 따라간다. */
.fs-p-About a.fs-p-About-card__inner:focus-visible .fs-plusbtn { background: var(--fs-teal-dk); }
@media (hover: hover) and (pointer: fine) {
  .fs-p-About a.fs-p-About-card__inner:hover .fs-plusbtn { background: var(--fs-teal-dk); }
}
.fs-p-About .fs-p-About-card__inner > img { display: block; width: 100%; height: auto; }
.fs-p-About .fs-p-About-map .fs-card__panel { align-content: center; }
/* 패널 우상단 플러스 버튼과 제목이 겹치지 않게 */
.fs-p-About .fs-p-About-map .fs-card__title { padding-inline-end: clamp(48px, 45.5px + 0.705vw, 59px); }
@media (min-width: 1024px) {
  /* 패널이 카드 아래로 72px 삐져나오므로 행 간격과 섹션 하단을 그만큼 벌린다 */
  .fs-p-About .fs-p-About-map {
    row-gap: calc(var(--fs-panel-drop) + var(--fs-gap-card));
    padding-block-end: var(--fs-panel-drop);
  }
}
/* 패널 안 : 시술 도해 + 번호/시술명 */
.fs-p-About .fs-eye-map__panel {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 9.6px + 0.641vw, 22px);
}
.fs-p-About .fs-eye-map__ill {
  display: grid;
  place-items: center;
  width: clamp(48px, 42.9px + 1.346vw, 69px);
  aspect-ratio: 1;
}
.fs-p-About .fs-eye-map__ill img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-About .fs-eye-map__txt { display: grid; gap: 2px; }

/* --- 5. 다크 스테이트먼트 밴드 + 고스트 -------------------------------- */
.fs-p-About .fs-p-About-statement {
  --fs-split: minmax(0, 1fr) minmax(0, 1fr);
  --fs-split-align: stretch;
  gap: 0;
  position: relative;
  z-index: 1;                 /* 고스트 위로 올린다 */
}
.fs-p-About .fs-p-About-statement > figure { display: block; }
.fs-p-About .fs-p-About-statement > figure img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-About .fs-p-About-statement__copy {
  display: grid;
  align-content: center;
  gap: var(--fs-sp-5);
  padding: var(--fs-sp-13) var(--fs-gutter);
}
/* 다크 밴드가 밋밋해지지 않도록 아주 낮은 대비로 깔리는 질감 사진 */
.fs-p-About .fs-eye-ghost {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 50%;
  overflow: hidden;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.fs-p-About .fs-eye-ghost img { width: 100%; height: 100%; object-fit: cover; }

/* --- 6. 3기둥 + 룰 카드 6 (.fs-eye-pillar) ----------------------------- */
.fs-p-About .fs-eye-pillars {
  display: grid;
  gap: var(--fs-gap-title);
  margin: var(--fs-gap-title) 0 0;
  padding: 0;
  list-style: none;
}
.fs-p-About .fs-eye-pillar {
  display: grid;
  gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .fs-p-About .fs-eye-pillar {
    grid-template-columns: minmax(0, 300fr) minmax(0, 1100fr);
    align-items: start;
  }
}
.fs-p-About .fs-eye-pillar__fig { display: grid; margin: 0; }
.fs-p-About .fs-eye-pillar__box {
  display: block;
  overflow: hidden;
  aspect-ratio: 440 / 300;
}
.fs-p-About .fs-eye-pillar__box img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-About .fs-eye-pillar__rules { margin: 0; padding: 0; list-style: none; }
.fs-p-About .fs-eye-pillar__rules .fs-card--rule { background: var(--fs-white); }

/* --- 7. 3가지 약속 (.fs-eye-merit) ------------------------------------- */
.fs-p-About .fs-eye-merit { margin-block-start: var(--fs-gap-title); }
.fs-p-About .fs-eye-merit > li { display: grid; align-content: start; gap: var(--fs-sp-5); }
.fs-p-About .fs-eye-merit__card { display: grid; margin: 0; }
.fs-p-About .fs-eye-merit__box {
  display: block;
  overflow: hidden;
  aspect-ratio: 600 / 400;
}
.fs-p-About .fs-eye-merit__box img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-About .fs-eye-merit__desc { color: var(--fs-muted); }

/* --- 8. 회복 집중관리 (.fs-eye-care) ----------------------------------- */
.fs-p-About .fs-eye-care {
  display: grid;
  gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: clamp(48px, 40.3px + 2.147vw, 80px);
  padding-block-start: clamp(36px, 30.2px + 1.603vw, 60px);
  border-block-start: 2px solid var(--fs-teal);
}
@media (min-width: 1024px) {
  .fs-p-About .fs-eye-care {
    grid-template-columns: minmax(0, 560fr) minmax(0, 840fr);
    align-items: center;
  }
}
.fs-p-About .fs-eye-care__head { display: grid; gap: var(--fs-sp-3); align-content: start; }
.fs-p-About .fs-eye-care__head .fs-lead { color: var(--fs-muted); }
.fs-p-About .fs-eye-care__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fs-p-About .fs-eye-care__list > li { display: grid; align-content: start; gap: var(--fs-sp-3); }
.fs-p-About .fs-eye-care__item { display: grid; margin: 0; }
.fs-p-About .fs-eye-care__box { display: block; }
.fs-p-About .fs-eye-care__inner {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--fs-white);
}
.fs-p-About .fs-eye-care__inner img { width: 100%; height: 100%; object-fit: cover; }
.fs-p-About .fs-eye-care__desc { color: var(--fs-muted); }

/* --- 9. 셀피 타일 ------------------------------------------------------ */
.fs-p-About .fs-p-About-head .fs-kicker { margin-block-end: var(--fs-sp-2); }
.fs-p-About .fs-p-About-tiles { margin-block-start: var(--fs-gap-title); }
/* 8장이 <600px 에서 1열로 서면 스크롤이 지나치게 길어진다 → 모바일도 2열 */
@media (max-width: 599px) {
  .fs-p-About .fs-p-About-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fs-p-About .fs-nose-ba__note { margin-block-start: var(--fs-sp-6); text-align: center; }

/* --- 모션 무효화 (새 transition 을 넣었으므로 짝으로 끈다) -------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-About .fs-p-About-chip { transition: none !important; }
}

/* ── 2026-08-27 · VIBE LOCK 스윕 ─────────────────────────────────── */
/* LOCK 2 — 라벨바는 도해에 «간격 0» 으로 붙는다.
   위반이 확인된 래퍼만 지운다(아이콘 크기 도해의 라벨바는 규칙 대상이 아니라 그대로 둔다). */
.fs-p-About .fs-eye-dx__card .fs-labelbar { margin-block-start: 0; border-block-start: 0; }

/* ══ 2026-08-27 · 진단·수정 패스 ═════════════════════════════════════ */

/* --- A. 다크 밴드 고스트 — 블러 부재 + 모바일 세로 이음매 --------------
   `assets/eye/statement-ghost.jpg` 의 엣지 에너지는 6.94 다
   (확정 시안 57 의 `assets/nose/compare-bg.jpg` = 0.46 — spec-nose[3] 의
   「단색 위에 강하게 블러된 인물 사진」이 에셋에 구워져 있다).
   .14 로 깔아도 왼쪽 사진과 같은 «루페 쓴 의료진» 이 그대로 읽혀
   질감이 아니라 「반쯤 가려진 두번째 얼굴」이 된다. 에셋은 건드리지 않고
   페이지 CSS 에서만 흐린다(되돌리기가 한 줄 — 워커 간 해시 충돌 없음).
   ★ 상자보다 크게 잡아 블러의 가장자리 페이드를 상쇄하는 처방(음수 마진)은
     여기서 쓰지 않는다 — `.fs-eye-ghost` 는 `.fs-section__bg` 가 아니라서
     qa.py 의 SKIP 목록(qa.py:45)에 없고, 삐져나간 rect 가 그대로 「요소
     삐져나감」으로 잡힌다. 대신 페이드가 실제로 보이는지 픽셀로 확인했다 —
     1920 렌더의 밴드 우측 절반에서 열평균 최솟값이 17.6/255 로, 순수
     밴드색 #111(=17) 과 일치하는 열이 0개다(우측 끝 열은 20.3). 즉
     .14 불투명도에서 페이드는 비네트로 읽히고 색 띠는 생기지 않는다. */
.fs-p-About .fs-eye-ghost img { filter: blur(22px); }
/* .fs-split 은 1023px 이하에서 세로로 쌓인다(fs.css:344).
   그 폭에서 고스트의 width:50% 는 카피 위를 세로로 가르는 이음매가 된다. */
@media (max-width: 1023px) {
  .fs-p-About .fs-eye-ghost { width: 100%; }
}

/* --- B. 제목 뒤에 그어지는 70px 틸 선 (48 검증 구현 이식) --------------
   .fs-h2 는 이 페이지에서 정확히 «본문 섹션 제목 6개» 만 가리킨다
   (다크 밴드 대제목은 .fs-mega, CTA·오시는길 제목은 .fs-sr-only 다).
   ★ 초기 은닉을 「.is-in 이면 보이기」로 짜면 안 된다 — fs.js 는 첫 화면
     안에 있던 대상에 .fs-reveal 클래스 자체를 붙이지 않아 첫 화면 제목의
     선이 영원히 안 그어진다. 기본을 「그어진 상태」로 두고 fs.js 가 실제로
     리빌 대상으로 표시한 것에만 은닉을 건다. */
.fs-p-About .fs-h2 { position: relative; }
.fs-p-About .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-About h2.fs-h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-About .fs-reveal:not(.is-in) .fs-h2::after { transform: scaleX(0); }

/* --- C. 호버 — 프레임은 고정, 사진만 움직인다 (그림자는 쓰지 않는다) ----
   틀(overflow:hidden)은 위 1~9 절에서 이미 잡혀 있다. 여기서는 사진만 민다.
   A18 지도 카드(.fs-p-About-card__inner)는 제외한다 — 패널이 카드 밖으로
   72px 삐져나오는 구조라 틀에 overflow:hidden 을 걸 수 없다. */
.fs-p-About .fs-eye-triad__box img,
.fs-p-About .fs-eye-pillar__box img,
.fs-p-About .fs-eye-merit__box img,
.fs-p-About .fs-eye-care__inner img,
.fs-p-About .fs-p-About-tiles .fs-thumb img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-About .fs-eye-triad__fig:hover .fs-eye-triad__box img,
  .fs-p-About .fs-eye-pillar__fig:hover .fs-eye-pillar__box img,
  .fs-p-About .fs-eye-merit__card:hover .fs-eye-merit__box img,
  .fs-p-About .fs-eye-care__box:hover .fs-eye-care__inner img,
  .fs-p-About .fs-p-About-tiles .fs-thumb:hover img,
  .fs-p-About .fs-p-About-tiles .fs-thumb:focus-visible img { transform: scale(1.045); }

  /* 라벨바는 사진과 같이 커지면 안 된다(글자가 흔들린다) — 색만 한 단계.
     --fs-teal-dk 는 #00646B 로 LOCK 2 의 허용 3색 안에 있다. */
  .fs-p-About .fs-eye-triad__fig:hover .fs-labelbar,
  .fs-p-About .fs-eye-pillar__fig:hover .fs-labelbar,
  .fs-p-About .fs-eye-merit__card:hover .fs-labelbar,
  .fs-p-About .fs-eye-care__item:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --- D. 모션 무효화 — 위에서 새로 넣은 것들의 짝 ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-About .fs-h2::after { transition: none !important; transform: scaleX(1) !important; }
  .fs-p-About .fs-eye-triad__box img,
  .fs-p-About .fs-eye-pillar__box img,
  .fs-p-About .fs-eye-merit__box img,
  .fs-p-About .fs-eye-care__inner img,
  .fs-p-About .fs-p-About-tiles .fs-thumb img { transition: none !important; transform: none !important; }
}


/* 2026-09-10 · 복합트임(45)이 트임성형(46)에 합쳐지면서 카드가 8장 → 7장이 됐다.
   fs-grid--2 에 홀수면 마지막 한 장이 왼쪽에 홀로 남는다. 트랙을 2배로 쪼개고
   카드를 span 2 로 두면 폭 계산은 2열과 픽셀까지 같으면서 고아만 가운데로 간다
   ((W-3g)/4*2+g == (W-g)/2). 다시 짝수가 되면 규칙이 저절로 꺼진다. */
@media (min-width: 600px) {
  .fs-p-About .fs-p-About-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-p-About .fs-p-About-map > li { grid-column: span 2; }
  .fs-p-About .fs-p-About-map > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}


/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 눈성형 = 블루그레이 #DDE4EB (fs.css «카테고리 틴트» 블록 + body.fs-cat-eye)
   승인자 결정: 웜 축의 유일한 쿨 예외(48 사진 상단색 계열). 공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개·글자 후광을 정한다.
   모델 오른쪽(x 63%~) · 사진 i2i(웜 토프→블루그레이)
   ========================================================================== */
.fs-p-About .fs-p-About-hero .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--fs-cat), .92) 0%, rgba(var(--fs-cat), .90) 28%, rgba(var(--fs-cat), .50) 46%, rgba(var(--fs-cat), 0) 60%);
}
@media (max-width: 1023px) {
  .fs-p-About .fs-p-About-hero .fs-hero__bg::after { content: none; }
  .fs-p-About .fs-p-About-hero .fs-hero__inner { background: var(--fs-cat-hex); }
}