@charset "utf-8";
/* ==========================================================================
   main.css — 메인(index.html, body.p-main) 전용 추가분
   fs.css 를 안 건드리려고 따로 둔다(fs.css ?v= 가 바뀌면 106장 HTML 을 전부 다시 찍어야 한다).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. (이전) 이벤트 바로가기 떠 있는 버튼 — 2026-10-01 승인자 「이벤트 아이콘 모든 페이지에 적용」 으로
      fs.css 「공용 확장 · 이벤트 바로가기 떠 있는 버튼」 절로 옮겼다(마크업은 menuapply.py evbtn()). 이 절의 옛 기록도 그쪽 머리 주석에 있다.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   2~5. 메인 섹션 재구성 — 2026-09-30 승인자 PPT 「리뷰티 수정(메인)」 + 지시
   「온라인 상담 삭제 → 빠른 상담신청칸 · 이벤트는 지금 이미지를 사각형으로 재구성 · 삭제할 것 삭제 · 섹션 순서 ·
    리뷰·전후사진 섹션은 빈 프레임」. 순서·삭제는 index.html(재구성 스크립트 _src/build/main-0930-sections.py).
   fs.css 의 .p-main 규칙(0,2,0)보다 뒤에 실려 같은 특정성으로 덮는다. 백업 _src/build/backup-main-0930-sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. FS EVENT — 정사각 카드가 옆으로 자동으로 흐르는 줄(PPT 3, 참고 designps.co.kr DESIGN EVENT)
      옛 «가운데 큰 배너 1장 + 양옆 조각» → 셀피 리뷰 줄과 같은 풀블리드 타일 줄. 사진은 event-sq-0N.jpg(정사각 재구성).
      「사계절 아름다움을 위한 특별한 혜택」(PPT 문구 그대로) — 처음엔 제목 위 eyebrow 였다가 10-01 승인자 「제목 밑으로」 →
      다른 섹션과 같은 부제(.m-head__sub, fs.css) 자리. 같은 날 「화살표는 없이」 로 .ev-nav 를 지웠다(fs.css 의 .ev-nav 규칙은 공용 파일이라 남겨 둔다).
   -------------------------------------------------------------------------- */
.p-main .ev-carousel { position: relative; }
/* JS 전에는 가운데로 모아 두고 캐러셀이 붙으면 flex-start — 셀피 줄(.sf-row)과 같은 이유(fs.css 3절 주석) */
.p-main .ev-row { display: flex; justify-content: center; gap: clamp(12px, 6px + 1.563vw, 36px); }
.p-main .fs-carousel .ev-row { justify-content: flex-start; }                 /* fs.js 가 루트에 .fs-carousel 을 붙인다 */
.p-main .ev-carousel .fs-carousel__slide { padding-inline: 0; }
.p-main .ev-item { flex: 0 0 clamp(200px, 60px + 15.625vw, 360px); max-width: none; }   /* 1920 360 · 1440 285 · 1024 220 */
.p-main .ev-banner img { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   3. FS REVIEW — 네이버 방문자 리뷰 카드(PPT 4 + 10-01 승인자 designps DESIGN REVIEW 캡처 「이거 처럼」)
      짙은 밴드 위 흰 둥근 카드 5×2 격자 — 참고처럼 셋째 칸(.rv-pair)에만 사진 없는 짧은 카드 두 장이 쌓인다.
      카드 높이는 줄마다 같게(격자 늘림) · 글 7줄까지(말줄임) · 사진은 카드 바닥. 처음 메이슨리(columns)로 했더니 열 바닥이 185px 까지 들쭉날쭉했다.
      밴드 색: 참고는 순검정이지만 토프 곁 순검정은 혼자 튄다(09-11 라벨바 승인자 지적) → 사이트에서 가장 어두운 웜 단계 #3D302B
      (전후 「수술 후」 라벨바 색 · 흰 글자 12.7:1). 카드 모서리 14px 는 VIBE LOCK 1 예외 — 승인자 캡처 지시(SIGNATURE 둥근 모서리와 같은 근거).
      머리줄 = 네이버 originType 「영수증」·「예약」(승인자 「아이디는 영수증 리뷰 / 예약 리뷰로」). 아바타는 네이버 기본 프로필 같은 둥근 판(CSS 배경).
      PC 5열 10칸(11장) · 600~1023 3열 앞 6칸 · <600 2열 앞 4칸.
   -------------------------------------------------------------------------- */
.p-main .p-review {
  --rv-band: #3D302B; --rv-gap: clamp(10px, 7.69px + 0.641vw, 20px);
  padding-block: clamp(58px, 36.08px + 6.09vw, 153px) clamp(59px, 42.62px + 4.551vw, 130px);
  background: var(--rv-band);
}
.p-main .p-review .m-head__title { color: var(--fs-white); }
.p-main .p-review .m-head__sub { color: rgba(255, 255, 255, .74); }       /* 밴드 위 8.0:1 */
.p-main .p-review .m-head__body { margin-block-start: clamp(21px, 15.23px + 1.603vw, 46px); }
.p-main .p-review .m-head { grid-template-columns: minmax(0, 1fr); }   /* <1024 의 auto 열이 캐러셀 트랙(% 폭) 내용만큼 늘어 화면 밖 1400px 이 됐다 — ≥1024 는 원래 이 값 */
/* 10-20 승인자 「이 섹션 안에서 자체 scrolling 되면서 모든 리뷰가 보이게끔 — scrolling 화살표」 → 한 줄 캐러셀(index.html .rv-carousel, fs.js).
   한 화면 장 수 --rv-n: <600 2 · 600~1023 3 · 1024~1279 4 · ≥1280 5. per-view="auto" 라 폭은 여기서 정하고 fs.js 는 잰 폭으로 넘긴다.
   10칸(11장)이 전부 돈다 — 격자 때는 600~1023 앞 6칸 · <600 앞 4칸만 보였다. 카드 높이는 트랙(flex)이 가장 큰 장에 맞춘다. */
.p-main .rv-grid {
  --rv-n: 2;
  gap: var(--rv-gap);
  margin: 0; padding: 0; list-style: none;
  text-align: start;                                              /* .m-head--center 의 가운데 정렬을 끊는다 */
}
.p-main .rv-grid > li { flex: 0 0 calc((100% - (var(--rv-n) - 1) * var(--rv-gap)) / var(--rv-n)); max-width: none; }
@media (min-width: 600px)  { .p-main .rv-grid { --rv-n: 3; } }
@media (min-width: 1024px) { .p-main .rv-grid { --rv-n: 4; } }
@media (min-width: 1280px) { .p-main .rv-grid { --rv-n: 5; } }
/* 카드가 26px 위에서 떨어지는 진입(16절)이 뷰포트(overflow:hidden) 위 변에 잘리지 않게 */
.p-main .rv-carousel .fs-carousel__viewport { padding-block-start: 26px; margin-block-start: -26px; }
/* 무한 반복용 복제 카드 — fs.js 리빌은 시작할 때 있던 카드만 띄우므로 복제본은 투명한 채 남는다 → 처음부터 보이게 */
:root.fs-js .p-main .rv-grid > [data-fs-carousel-clone].fs-reveal,
:root.fs-js .p-main .rv-grid > [data-fs-carousel-clone] .fs-reveal { opacity: 1; transform: none; transition: none; }
/* 화살표 — <1024 줄 아래 가운데 · 1024~1699 카드 밖 좌우(뷰포트를 들인다) · ≥1700 컨테이너 밖 -90px(SIGNATURE 와 같은 자리).
   ≥1024 의 space-between 은 fs.css 11절을 되풀이한다 — 아래 «가운데» 규칙의 명시도가 이겨 두 버튼이 가운데 붙는다(42 에서 실제로 겪었다) */
.p-main .rv-nav { justify-content: center; margin-block-start: var(--fs-sp-6); }
@media (min-width: 1024px) {
  .p-main .rv-carousel { padding-inline: clamp(56px, 46.86px + 0.893vw, 64px); }
  .p-main .rv-nav { justify-content: space-between; margin-block-start: 0; inset-inline: 0; }
}
@media (min-width: 1700px) {
  .p-main .rv-carousel { padding-inline: 0; }
  .p-main .rv-nav { inset-inline: -90px; }
}
.p-main .rv-pair { display: flex; flex-direction: column; gap: var(--rv-gap); }
.p-main .rv-pair > .rv-card { flex: 1 1 auto; }
.p-main .rv-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(12px, 10.85px + 0.321vw, 17px);
  background: var(--fs-white); color: var(--fs-ink-soft);
  border-radius: 14px;
}
.p-main .rv-card__src {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: var(--fs-muted);
}
.p-main .rv-card__src::before {
  content: ""; flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: #EFE6DE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='8.6' r='3.7' fill='%23C2B1A4'/%3E%3Cpath d='M4.3 20c.8-3.8 3.5-5.9 6.7-5.9s5.9 2.1 6.7 5.9' fill='%23C2B1A4'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.p-main .rv-card__body {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden;
  font-size: clamp(13px, 12.77px + 0.064vw, 14px); line-height: 1.65;
  white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere;
}
.p-main .rv-card__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: auto; padding-block-start: 2px; }
.p-main .rv-card__photos img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1.07; object-fit: cover; }
.p-main .rv-card__photos--one { grid-template-columns: minmax(0, 1fr); }
.p-main .rv-card__photos--one img { aspect-ratio: 2 / 1.07; }

/* --------------------------------------------------------------------------
   4. FS BEFORE & AFTER — 전후사진 캐러셀(PPT 5 + 10-01 「이런 식으로」, 참고 designps.co.kr 메인 전후 줄)
      카드 = 전후 한 장(800x467, 왼쪽 전 · 오른쪽 후) + 아래 모카 띠(BEFORE · 시술명 · AFTER — BEFORE/AFTER 는 CSS 글자).
      전 절반은 흐림 + 로그인 안내로 가린다. PC 3장 · 600~1023 2장 · MO 1장(fs.js per-view).
      진행 막대 = 스크롤바 — 트랙 위에 «지금 보이는 장»만큼의 막대 하나가 미끄러진다(승인자 10-01 「늘어나는 게 아니라 스와이프 위치」).
      전후사진 페이지는 98(로그인 전용). 베이지 밴드는 지운 FS TV 자리의 밴드.
   -------------------------------------------------------------------------- */
.p-main .p-ba { padding-block: clamp(58px, 37.23px + 5.769vw, 148px) clamp(60px, 45.46px + 4.038vw, 123px); }
.p-main .p-ba .m-head__body { margin-block-start: clamp(24px, 18.46px + 1.538vw, 48px); }
/* 부제 --fs-muted(AA 보정 #6E6E6E)는 베이지 밴드 위 4.02:1(qa 실측) — 23.9px 라 4.5 가 기준. --fs-muted-2 도 4.08 이라
   밴드와 같은 웜 계열 토프 --fs-teal-dk(베이지 위 5.39:1)로 */
.p-main .p-ba .m-head__sub { color: var(--fs-teal-dk); text-wrap: balance; }   /* 360·390 에서 「있습니다.」 한 단어 줄 */
/* <1024 의 .m-head 는 열 정의가 없어(fs.css) 칸이 내용 폭을 따라간다 — fs.js 가 그 폭으로 슬라이드 폭을 다시 정해
   서로 키우다 1,600만 px 까지 터진다. 열을 묶는다(≥1024 는 fs.css 가 이미 minmax(0, 1fr)) */
@media (max-width: 1023px) { .p-main .p-ba .m-head { grid-template-columns: minmax(0, 1fr); } }
.p-main .ba-row { margin: 0; padding: 0; list-style: none; }
/* 시술명이 두 줄로 접히는 장이 있어도 띠 바닥을 맞춘다 — 슬라이드는 트랙 높이로 늘고 띠가 남는 높이를 먹는다.
   띠 색 — 순검정은 토프 곁에서 혼자 튄다(승인자, 09-11 라벨바 때와 같은 지적). 짙은 모카 --fs-teal-dk(#6B564E):
   흰 시술명 6.85:1 · BEFORE/AFTER(흰 80%) 5.08:1. #80665D 는 작은 BEFORE/AFTER 가 4.05 로 미달, #3D302B 는 검정으로 읽힌다 */
.p-main .ba-card { display: grid; grid-template-rows: auto 1fr; background: var(--fs-teal-dk); }
.p-main .ba-card__photo { position: relative; overflow: hidden; }
.p-main .ba-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 467; object-fit: cover; }
.p-main .ba-card__gate {
  position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 50%;
  display: grid; place-content: center; justify-items: center; gap: clamp(10px, 7.69px + 0.641vw, 20px);
  padding: 12px; text-align: center; color: var(--fs-white);
  background: rgba(17, 17, 17, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.p-main .ba-card__gate-text { font-size: clamp(14px, 13.31px + 0.192vw, 17px); font-weight: 600; line-height: 1.6; }
.p-main .ba-card__login {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: clamp(34px, 31.69px + 0.641vw, 44px); min-inline-size: clamp(96px, 88.15px + 2.179vw, 130px);
  padding-inline: 20px; border-radius: var(--fs-radius-pill);
  background: var(--fs-white); color: var(--fs-ink);
  font-family: var(--fs-font-en); font-size: clamp(13px, 12.08px + 0.256vw, 17px); font-weight: 500;
  transition: background-color var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease);
}
.p-main .ba-card__login:hover { background: var(--fs-teal-dk); color: var(--fs-white); }
/* 띠 — <1600 은 BEFORE·AFTER 한 줄 위에 시술명, ≥1600(카드 473 고정)은 레퍼런스처럼 한 줄.
   1280~1599 에서 한 줄로 두면 시술명 6개 중 3개가 「+」로 시작하는 둘째 줄로 접힌다(실측) */
.p-main .ba-card__bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "before . after" "title title title";
  align-items: center; align-content: center; gap: 6px 12px;
  margin: 0; padding: 12px 14px 14px;
  color: var(--fs-white); text-align: center;
}
.p-main .ba-card__bar::before,
.p-main .ba-card__bar::after {
  font-family: var(--fs-font-en); font-size: 11px; font-weight: 600;
  letter-spacing: .35em; color: rgba(255, 255, 255, .8);
}
.p-main .ba-card__bar::before { content: "BEFORE"; grid-area: before; }
.p-main .ba-card__bar::after  { content: "AFTER"; grid-area: after; margin-inline-end: -.35em; }
.p-main .ba-card__title {
  grid-area: title;
  font-size: clamp(15px, 13.85px + 0.321vw, 20px); font-weight: 600; line-height: 1.35;
  word-break: keep-all; text-wrap: balance;
}
@media (min-width: 1600px) {
  .p-main .ba-card__bar { grid-template-areas: "before title after"; padding-block: 16px; }
}
/* 진행 막대 — 스크롤바처럼 트랙 위 막대 하나. 길이 = 보이는 장 수 / 전체(PC 3/6 · 600~1023 2/6 · MO 1/6),
   위치 = 활성 도트 순번(fs.js .is-active)을 :has 로 --ba-i 에 옮겨 left 로 미끄러뜨린다(트랙과 같은 시간·곡선).
   도트 6개는 투명한 클릭 칸으로 남아 막대의 그 자리를 누르면 그 장으로 간다. ★ 장 수를 바꾸면 --ba-n 과 --ba-i 규칙을 같이 */
.p-main .ba-progress {
  --ba-n: 6; --ba-pv: 1; --ba-i: 0;
  position: relative; gap: 0; margin-block-start: clamp(28px, 21.08px + 1.923vw, 58px);
}
@media (min-width: 600px)  { .p-main .ba-progress { --ba-pv: 2; } }
@media (min-width: 1024px) { .p-main .ba-progress { --ba-pv: 3; } }
.p-main .ba-progress:has(> .fs-carousel__dot:nth-child(2).is-active) { --ba-i: 1; }
.p-main .ba-progress:has(> .fs-carousel__dot:nth-child(3).is-active) { --ba-i: 2; }
.p-main .ba-progress:has(> .fs-carousel__dot:nth-child(4).is-active) { --ba-i: 3; }
.p-main .ba-progress:has(> .fs-carousel__dot:nth-child(5).is-active) { --ba-i: 4; }
.p-main .ba-progress:has(> .fs-carousel__dot:nth-child(6).is-active) { --ba-i: 5; }
.p-main .ba-progress::before,
.p-main .ba-progress::after {
  content: ""; position: absolute; inset-block-start: 50%; pointer-events: none;
}
.p-main .ba-progress::before { inset-inline: 0; block-size: 2px; margin-block-start: -1px; background: var(--fs-dot-beige); }
.p-main .ba-progress::after {
  inset-inline-start: calc(100% * var(--ba-i) / var(--ba-n));
  inline-size: calc(100% * var(--ba-pv) / var(--ba-n));
  block-size: 4px; margin-block-start: -2px; background: var(--fs-teal-dk);
  transition: inset-inline-start var(--fs-dur-slow) var(--fs-ease-out);
}
.p-main .ba-progress .fs-carousel__dot {
  flex: 1 1 0; width: auto; height: 20px; aspect-ratio: auto;
  padding: 0; border-radius: 0; background: none; box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. 빠른 상담신청 — 2026-10-01 전 페이지 공용으로 옮겼다: 스타일 assets/fs.css «공용 확장 — 빠른 상담 바», 마크업 <!-- fs:qconsult --> 블록
      (_src/build/qconsult-apply.py). 메인 이벤트 버튼(1절)이 쓰는 --qc-h 도 fs.css :root 로 갔다.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .p-main .ev-banner img { transition: none; }
}

/* --------------------------------------------------------------------------
   6. FS SIGNATURE — 세로형 카드가 옆으로 자동으로 흐르는 줄(PPT 7, 참고 shinsangps.com Signature) — 2026-10-01
      옛 «가로 사진 + 흰 캡션 패널, 2장씩» → FS EVENT 와 같은 풀블리드 자동 줄(3초 · 무한 루프)에 3:5 세로 카드 6장.
      제목·해시태그는 사진 아래쪽 스크림 위 흰 글자(가운데). 모서리 직각(VIBE LOCK 1). 카드 전체가 링크.
      옛 .sg-* 규칙(fs.css 6절)은 클래스가 바뀌어 안 걸린다 — 패널이 72px 삐져나오던 몫의 아래 패딩만 되돌린다.
      밴드는 크림 그대로 — 흰색이면 SIGNATURE·EVENT·REVIEW 가 흰 3연속(VIBE LOCK 4 d).
   -------------------------------------------------------------------------- */
.p-main .sgv-carousel { position: relative; margin-block-start: clamp(29px, 24.62px + 1.218vw, 48px); }
.p-main .sgv-row { display: flex; justify-content: center; gap: clamp(12px, 6px + 1.563vw, 36px); }   /* 간격 = EVENT 줄 */
.p-main .fs-carousel .sgv-row { justify-content: flex-start; }
.p-main .sgv-carousel .fs-carousel__slide { padding-inline: 0; }
.p-main .sgv-item { flex: 0 0 clamp(200px, 100px + 10.417vw, 300px); max-width: none; }   /* 1920 300 · 1440 250 · 1024 207 · <960 200 */
.p-main .sgv-card {
  position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 5;
  color: var(--fs-white);
  /* 배경색 없음 — 10-01 승인자 「이런 검은 선 지워줘」: 카드에 --fs-ink 를 깔아 두면 화면 배율 125·150% 에서 카드가 소수점 위치일 때
     둥근 테두리 안티에일리어싱 한 픽셀 열에 검정이 비쳐 나왔다(실측 사진 191 → 변 169). 투명이면 191 → 203 → 243 으로 바로 이어진다. */
  /* 둥근 모서리 — 10-01 승인자 「shinsangps.com 시그니처처럼 이미지 테두리 둥글게」. VIBE LOCK 1(0 · 50% · pill) 의 승인자 예외.
     반경 ≈ 카드 폭의 10%(참고 282px 카드에 30px): 1920 30 · 1440 24 · 1024 19 · <960 18.
     translateZ(0) — WebKit 이 호버 확대(transform) 중인 자식을 둥근 overflow 로 못 자르는 버그 회피 */
  border-radius: clamp(18px, 6px + 1.25vw, 30px);
  transform: translateZ(0);
}
.p-main .sgv-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.p-main .sgv-card:hover img,
.p-main .sgv-card:focus-visible img { transform: scale(1.06); }
/* 스크림 — 흰 옷 위에서도 제목 자리(캡션 아래에서 55%)가 불투명도 .6 이상이라 흰 글자 4.5:1 을 넘는다 */
.p-main .sgv-card__cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 56px 14px clamp(18px, 14px + 0.417vw, 26px);
  background: linear-gradient(to top, rgb(17 17 17 / .78) 0%, rgb(17 17 17 / .62) 55%, rgb(17 17 17 / 0) 100%);
}
.p-main .sgv-card__title { margin: 0; font-size: clamp(17px, 15px + 0.313vw, 21px); font-weight: 600; line-height: 1.3; color: inherit; }
.p-main .sgv-card__tags  { margin: 0; font-size: clamp(12px, 11px + 0.156vw, 14px); line-height: 1.45; color: inherit;
  word-break: keep-all; text-wrap: balance; }
.p-main .sgv-card__tags > span { white-space: nowrap; }   /* 「#」 뒤에서 끊기지 않게(390 에서 「#포시즌기능코 #」/「무보형물코성형」) */
/* 화살표 — 카드 줄 아래 가운데. 10-01 승인자 「옆 퀵메뉴 때문에 위치가 애매 — 위로 아님 밑으로, 보기 편한 곳으로」.
   예전엔 EVENT 줄처럼 줄 양끝 사진 위에 얹었고, 오른쪽은 퀵메뉴(오른쪽 고정 판) 왼쪽으로 비켜 서 카드 한가운데에 떠 있었다.
   위(제목 옆)는 제목이 가운데 정렬이라 오른쪽에 두면 다시 퀵메뉴 쪽이다 → 아래 가운데. 크기는 사이트 기본 .fs-iconbtn(40~50px, 테두리 원). */
.p-main .sgv-nav {
  justify-content: center; gap: 12px;
  margin-block-start: clamp(20px, 15.38px + 1.282vw, 40px);
}
.p-main .sgv-nav .fs-iconbtn { background: var(--fs-white); }
/* 위 흰 배경(0,3,0)이 .fs-iconbtn:hover(0,2,0) 의 잉크 배경을 이겨 호버 때 «흰 바탕에 흰 화살표» 로 사라졌다 — 호버 배경을 되살린다 */
.p-main .sgv-nav .fs-iconbtn:hover { background: var(--fs-ink); }
@media (min-width: 1024px) {
  .p-main .p-signature { padding-block-end: clamp(60px, 43.85px + 4.487vw, 130px); }
}
@media (prefers-reduced-motion: reduce) {
  .p-main .sgv-card img { transition: none; }
  .p-main .sgv-card:hover img,
  .p-main .sgv-card:focus-visible img { transform: none; }
}

/* --------------------------------------------------------------------------
   7. 섹션 배경 리듬 — 2026-10-01 승인자 「시그니처부터 쇼츠까지 배경색을 보기 좋게」 → 4안 중 「B로 해줘」
      SIGNATURE 흰 · EVENT 크림 · REVIEW 흰 · B&A 크림 · Shorts 흰 교대(index.html 의 fs-section--cream 2개).
      옛 순서 크림·흰·흰·베이지·흰은 EVENT·REVIEW 가 흰 2연속으로 한 면이 됐고, 크림·베이지 두 웜톤이 섞였다.
      히어로 다음 흰(LOCK 4 원칙) · Shorts 흰 → 연락 #F9F9F9 로 웜→무채 경계가 없다. 비교 _review/main-section-bg-options.jpg
      (처음 반영한 A 크림 교대 = 크림·흰·크림·흰·크림, 백업 _src/build/backup-main-1001-bandbg-a/)
      EVENT 아래 여백 80 → 130(REVIEW 아래와 같은 식): EVENT 가 크림 띠가 되자 위 153 · 아래 80 으로
      배너 줄 바로 밑에서 띠가 끝났다.
   -------------------------------------------------------------------------- */
.p-main .p-event { padding-block-end: clamp(59px, 42.62px + 4.551vw, 130px); }

/* --------------------------------------------------------------------------
   8. 히어로 스크림 — 2026-10-01 히어로 8장 교체(메인.zip). 새 사진은 흰·연보라·연하늘 벽이라 옛 베이지 벽보다 훨씬 밝다.
      fs.css 「1. 히어로」 의 스크림(.42→0)으로는 카피 대비가 글자 픽셀 최악 1.84 · 중앙값 2.75, 흰 GNB 중앙값 3.58 까지 떨어졌다
      (옛 7장: 카피 3.5 / 4.8 · GNB 5.3). 좌→우를 짙게 오래 끌고(카피가 끝나는 ≈55% 까지 .40 이상), 헤더 띠에 위→아래 한 겹을 더했다.
      실측(8장 × 1920·1440·1024·390, 글자 마스크): 카피 최악 ≥3.32 · 중앙값 ≥4.52 · GNB 중앙값 ≥5.32 · MO 카피 최악 4.31.
      얼굴은 76% 부터 0 이라 안 덮인다. 재는 법 = 글자 있는/없는 렌더 차로 글자 마스크를 떠서 그 아래 사진 픽셀.
   -------------------------------------------------------------------------- */
.p-main .fs-hero__bg::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .30) 0, rgba(0, 0, 0, .12) 90px, rgba(0, 0, 0, 0) 170px),
    linear-gradient(to right, rgba(0, 0, 0, .54) 0%, rgba(0, 0, 0, .50) 30%, rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, .20) 62%, rgba(0, 0, 0, 0) 76%);
}
@media (max-width: 1023px) {
  .p-main .fs-hero__bg::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, 0) 110px),
      linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .50) 24%, rgba(0, 0, 0, 0) 58%);
  }
}

/* --------------------------------------------------------------------------
   9. 히어로 전체 클릭 — 2026-10-01 PPT 2 「메인 이미지도 눌렀을때 관련 페이지로 넘어갈수 있도록」.
      슬라이드마다 사진 위에 같은 주소의 투명 링크(.fs-hero__hit)를 깔고, 그 위 카피 층(.fs-hero__inner · __copy 가 화면 폭을 덮는다)은
      글 링크와 진행 바(일시정지·화살표)만 클릭을 받는다. 키보드·낭독은 기존 글 링크 하나뿐(투명 링크 = tabindex −1 · aria-hidden).
      페이드 캐러셀이라 드래그와 안 부딪히고, 안 보이는 슬라이드는 visibility:hidden 이라 클릭을 못 가로챈다.
      자동 넘김 멈춤은 그대로 글 링크 호버만(data-fs-carousel-hover-pause=".fs-hero__link") — 사진 위에 커서를 둬도 계속 넘어간다.
   -------------------------------------------------------------------------- */
.p-main #hero .fs-hero__hit { position: absolute; inset: 0; z-index: 0; }
.p-main #hero .fs-hero__inner { pointer-events: none; }
.p-main #hero .fs-hero__link,
.p-main #hero .fs-progress { pointer-events: auto; }

/* --------------------------------------------------------------------------
   10. 밝은 히어로(PC ≥1024) — 2026-10-01 병원 피드백 「이 부분 전체적으로 너무 어두워서 밝게 가능할까요? 폰트색은 흰색이 아니어도 괜찮습니다」.
      새 사진 8장 중 1~7 은 벽이 밝아(카피 자리 어두운 5% 휘도 156~238) 스크림 없이 잉크 글자가 6.9:1↑ 이다 → 8절 스크림·헤더 어둠 띠를 걷고
      카피·진행 표시·헤더를 잉크로(overlay-header-light-variant 다섯 곳 + 헤더 틴트·로고). 8 학회활동(.fs-hero__slide--dark)은 사진이 어두워
      지금처럼 흰 글자 + 스크림 — 그 슬라이드가 떠 있는 동안은 헤더도 흰 변형으로 돌아간다(:has).
      <1024 는 그대로 — 모바일은 카피가 사진 아래쪽(옷·머리카락) 위라 3·5·7 이 어두워 잉크 글자가 0.9~1.8:1 이다.
      로고: 흰 로고(main/logo-white.png)와 잉크 로고(common/logo.png, 낭독 숨김)를 둘 다 두고 바꿔 보인다.
   -------------------------------------------------------------------------- */
.p-main .fs-logo__img--ink { display: none; }
@media (min-width: 1024px) {
  /* 밝은 7장 — 스크림 없음, 잉크 카피 */
  /* (8절 스크림 자리 .fs-hero__bg::after 는 아래 «바깥 약한 블러» 층으로 쓴다 — 어둠 막은 없다) */
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__inner { color: var(--fs-ink); }
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__kicker { color: var(--fs-ink); }   /* ink-soft 는 2(연보라 벽)에서 3.6:1 */
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-progress__track { background: rgba(17, 17, 17, .18); }
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-progress__fill { background: var(--fs-ink); }
  /* 카피 뒤만 흐리게 — 같은 날 승인자 「텍스트 쪽에만 약간의 배경 블러, 학회 활동은 빼고」 → 「텍스트 뒤 배경에 블러를 넣어서 조금 더 읽기 편하게」.
     ★ 블러는 카피 쪽이 아니라 «사진 레이어 안»(picture::after)에 깐다. 슬라이드·트랙이 transform-style: preserve-3d(히어로 3D 패럴랙스)라
       카피 쪽 요소의 backdrop-filter 는 크롬이 아예 그리지 않았다(켜든 끄든 픽셀 0 차이 — 1차 8px·2차 18px 의 «효과» 는 흰 막뿐이었다).
       3D 를 풀면 그려지지만 스크롤 패럴랙스 화면이 27만 px 바뀌어 기각. 사진과 같은 평면 안이면 그려진다.
     자리 = 카피 상자(컨테이너 왼쪽 축 · 세로 가운데)를 감싸는 타원. 블러 18px + 아주 옅은 흰 막(.22, 잉크 글자 대비 ↑). 패럴랙스 때 사진과 같이 움직인다. */
  /* 같은 날 후속 「블러 범위 조금 더 넓게 · 더 자연스럽게 outline 을 흐트려」 — 한 겹 블러를 마스크로만 빼면 경계에서 흐린 줄·선명한 줄이 반씩 겹쳐
     «윤곽선» 으로 읽혔다(2 기능코 세로 줄무늬). → 두 겹 점진 블러: 안쪽 picture::after 18px(+흰 막) · 바깥 bg::after 8px, 같은 중심.
     범위는 안쪽 ≈1.15배 · 바깥 ≈1.6배로 넓히고, 마스크는 여러 단으로 길게 빼 «선명 → 약간 흐림 → 많이 흐림» 이 이어지게. */
  /* 같은 날 3차 — 넓힌 바깥 층이 1·2·5·6·7 의 머리카락·볼 윤곽까지 흐렸다(1920 에서 카피 끝 ↔ 머리카락 ≈50px — 타원으로는 못 피한다).
     → 두 층 모두 히어로 전체를 덮고, 마스크 = «카피 둘레 타원» ∩ «인물 제외»(사진마다 hero2-0N-veil.png, 인물 = 투명 · 경계 14→80px 로 페이드).
       veil 은 사진과 같은 cover + object-position 으로 깔려 화면 폭·높이·패럴랙스가 바뀌어도 인물에 붙어 다닌다.
       원천: _src/gen/main-hero-veil/veil.py. 사진을 바꾸면 그 장의 veil 도 다시 굽는다 — 없으면 타원만 걸린다(아래 var() 기본값). */
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__bg {
    --hb-cx: calc(max(var(--fs-gutter), (100% - var(--fs-container)) / 2) + clamp(220px, 15.6vw, 300px));   /* 카피 가운데 ≈ 컨테이너 왼쪽 축 + 카피 반폭 */
  }
  .p-main #hero .fs-hero__bg:has(img[src*="/hero2-01."]) { --hb-veil: url("../main/hero2-01-veil.png?v=039b6fe4"); }
  .p-main #hero .fs-hero__bg:has(img[src*="/hero2-02."]) { --hb-veil: url("../main/hero2-02-veil.png?v=d526b0b9"); }
  .p-main #hero .fs-hero__bg:has(img[src*="/hero2-03."]) { --hb-veil: url("../main/hero2-03-veil.png?v=b2e1cf19"); }
  .p-main #hero .fs-hero__bg:has(img[src*="/hero2-04."]) { --hb-veil: url("../main/hero2-04-veil.png?v=b4e8465c"); --hb-veil-x: 70%; }   /* img 인라인 object-position(70% 50%)과 같게 */
  .p-main #hero .fs-hero__bg:has(img[src*="/hero2-05."]) { --hb-veil: url("../main/hero2-05-veil.png?v=9bf2ee51"); }
  .p-main #hero .fs-hero__bg:has(img[src*="/hero2-06."]) { --hb-veil: url("../main/hero2-06-veil.png?v=11bb1dc0"); }
  .p-main #hero .fs-hero__bg:has(img[src*="/hero2-07."]) { --hb-veil: url("../main/hero2-07-veil.png?v=d6e5c685"); }
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__bg picture::after,
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__bg::after {
    -webkit-mask: var(--hb-shape) 0 0 / 100% 100% no-repeat, var(--hb-veil, linear-gradient(#000 0 0)) calc(var(--hb-veil-x, 50%) + var(--hb-veil-dx, 0px)) 50% / cover no-repeat;
            mask: var(--hb-shape) 0 0 / 100% 100% no-repeat, var(--hb-veil, linear-gradient(#000 0 0)) calc(var(--hb-veil-x, 50%) + var(--hb-veil-dx, 0px)) 50% / cover no-repeat;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    transition: -webkit-mask-position 1.5s ease, mask-position 1.5s ease;   /* 11절 img 와 같은 곡선 · 루프 점프(is-preinit *::after)에선 fs.css 가 끈다 */
  }
  /* 11절 와이프는 img 만 ±50% 옮긴다(블러 두 겹은 장을 따라간다) → veil 도 img 와 같이 옮겨야 넘기는 1.5초 동안 들어오는 장 인물이
     블러에 안 걸린다(옮기기 전 실측: 진행 80% 프레임에서 2 의 머리카락 왼쪽이 블러 안). 50vw = img 폭의 절반(스크롤바 폭의 절반만큼 오차, 움직일 때만). */
  @media (prefers-reduced-motion: no-preference) {
    .p-main #hero .fs-carousel__slide.is-prev .fs-hero__bg { --hb-veil-dx: 50vw; }
    .p-main #hero .fs-carousel__slide.is-next .fs-hero__bg { --hb-veil-dx: -50vw; }
  }
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__bg picture::after {   /* 안쪽 18px + 흰 막 */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    --hb-shape: radial-gradient(calc(clamp(720px, 52vw, 1100px) / 2) calc(clamp(400px, 32vw, 620px) / 2) at var(--hb-cx) 50%,
      #000 38%, rgba(0, 0, 0, .78) 58%, rgba(0, 0, 0, .40) 78%, rgba(0, 0, 0, .12) 92%, transparent 100%);
  }
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__bg::after {             /* 바깥 8px */
    inset: 0;
    background: none;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    --hb-shape: radial-gradient(calc(clamp(1040px, 76vw, 1560px) / 2) calc(clamp(600px, 50vw, 900px) / 2) at var(--hb-cx) 50%,
      #000 30%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, .25) 80%, transparent 100%);
  }

  /* 헤더 — 밝은 슬라이드가 떠 있을 때 잉크 변형 */
  .p-main:not(:has(#hero .fs-hero__slide--dark.is-active)) .fs-header--overlay {
    color: var(--fs-ink); background: transparent;
  }
  .p-main .fs-header--overlay { transition: color var(--fs-dur-slow) var(--fs-ease), background-color var(--fs-dur-slow) var(--fs-ease); }
  /* 어둠 띠(::before)는 밝은 장에서 끈다 */
  .p-main .fs-header--overlay::before { transition: opacity var(--fs-dur-slow) var(--fs-ease); }
  .p-main:not(:has(#hero .fs-hero__slide--dark.is-active)) .fs-header--overlay::before { opacity: 0; }
  /* 헤더 뒤 옅은 상자 — 2026-10-08 병원 「위에 흰색 번짐」 → 5안 비교(_src/build/haze-preview.py) 끝에 승인자 「옅은 상자로 전체 적용」.
     옛 흰 안개(::after · 흰 .80→.58→0 · 헤더×1.6, 백업 _src/build/backup-main-1008-headerbox)를 걷고,
     8 학회활동 헤더의 반투명 상자(--fs-header-overlay-bg)와 같은 방식으로 헤더 높이만큼 상자를 깐다.
     색 = 장마다 헤더 띠의 벽 색(밝은 60% 화소 중앙값)을 흰 쪽으로 60% 섞은 톤 · 진하기 .30. 장이 바뀌면 위 background-color transition 으로 같이 바뀐다.
     글자 후광은 승인자 「테두리 없게」로 뺐다 — 메뉴 뒤가 검은 머리인 자리는 대비 최악 2.1~2.8:1(AA 미달)이고, 승인자가 그 수치를 보고 골랐다. 올리려면 진하기 ≈.6.
     히어로 사진을 갈면 그 장의 색을 다시 뽑아라(hero2-0N 파일명으로 건다 — 없으면 상자 없이 투명). */
  .p-main:has(#hero .fs-carousel__slide.is-active img[src*="/hero2-01."]) .fs-header--overlay { background: rgba(240, 235, 234, .30); }
  .p-main:has(#hero .fs-carousel__slide.is-active img[src*="/hero2-02."]) .fs-header--overlay { background: rgba(232, 232, 237, .30); }
  .p-main:has(#hero .fs-carousel__slide.is-active img[src*="/hero2-03."]) .fs-header--overlay { background: rgba(243, 247, 251, .30); }
  .p-main:has(#hero .fs-carousel__slide.is-active img[src*="/hero2-04."]) .fs-header--overlay { background: rgba(217, 222, 229, .30); }
  .p-main:has(#hero .fs-carousel__slide.is-active img[src*="/hero2-05."]) .fs-header--overlay { background: rgba(246, 245, 250, .30); }
  .p-main:has(#hero .fs-carousel__slide.is-active img[src*="/hero2-06."]) .fs-header--overlay { background: rgba(249, 249, 251, .30); }
  .p-main:has(#hero .fs-carousel__slide.is-active img[src*="/hero2-07."]) .fs-header--overlay { background: rgba(240, 233, 231, .30); }
  .p-main:not(:has(#hero .fs-hero__slide--dark.is-active)) .fs-header--overlay .fs-gnb__link:hover,
  .p-main:not(:has(#hero .fs-hero__slide--dark.is-active)) .fs-header--overlay .fs-util__link:hover,
  .p-main:not(:has(#hero .fs-hero__slide--dark.is-active)) .fs-header--overlay .fs-allmenu:hover { color: var(--fs-teal-dk); opacity: 1; }
  .p-main:not(:has(#hero .fs-hero__slide--dark.is-active)) .fs-header--overlay .fs-util__link { color: var(--fs-ink); }   /* ink-soft 는 머리카락 위에서 3.6:1 */
  .p-main:not(:has(#hero .fs-hero__slide--dark.is-active)) .fs-logo__img:not(.fs-logo__img--ink) { display: none; }
  .p-main:not(:has(#hero .fs-hero__slide--dark.is-active)) .fs-logo__img--ink { display: block; }
}
@media (max-width: 1023px) {
  /* 모바일 — 흰 카피 뒤 사진만 흐리게(사진 레이어 안 · 8절 스크림 아래). 흰 막은 흰 글자 대비를 깎으므로 없음. 학회활동 제외 */
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__bg picture::after {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    inset-inline: -18%; inset-block-end: -6%; height: 58%;                 /* 46% → 58% · 경계는 여러 단으로 길게 */
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);   /* 14px 는 5 인중오목술 킥커 4.42:1 */
    -webkit-mask-image: radial-gradient(closest-side, #000 42%, rgba(0, 0, 0, .75) 62%, rgba(0, 0, 0, .35) 82%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 42%, rgba(0, 0, 0, .75) 62%, rgba(0, 0, 0, .35) 82%, transparent 100%);
  }
}

/* --------------------------------------------------------------------------
   11. 캐러셀 넘김 — designps 처럼(2026-10-01 승인자 「히어로·시그니처·이벤트 다 저 시안 사이트랑 비슷하게」)
       designps.co.kr(Swiper 7.3.1) 실측: speed 1500 · 곡선 CSS 기본 ease · autoplay delay 3800 → 5.3초 주기,
       메인 비주얼은 data-swiper-parallax-x="50%"(틀은 화면 폭만큼, 사진은 절반만 → 경계가 사진 위를 쓸고 가는 와이프).
       · 주기 5300(시작-시작 간격)은 index.html 의 data-fs-carousel-autoplay. 히어로는 fade → slide.
       · fs.js 는 넘김 끝(settle·루프 점프)을 트랙의 computed transition-duration 으로 재므로 여기서 1.5s 로 늘려도 점프가 안 튄다.
         끌기·점프 중 transition:none(fs.css) 은 transition-property 를 none 으로 두므로 아래 duration 이 이겨도 그대로 꺼진다.
       · 히어로 와이프 — 사진 층(picture)은 그대로 두고 그 안의 img 만 ±50% 옮기고 picture 상자로 자른다.
         picture 자체를 옮기면 10절 블러 바깥 층(.fs-hero__bg::after · bg 좌표)이 사진과 어긋나고, 3D 문맥에서 따로 떨어진 평면이 돼
         backdrop-filter 가 안 그려질 수 있다(1c 세션 지적). img 만 옮기면 블러 두 겹은 글자처럼 장을 따라 움직이고 사진만 그 밑을 절반 속도로 미끄러진다.
         fs.js 가 넘김 시작에 is-prev / is-active / is-next 를 바꾸므로 같은 1.5s ease 로 트랙과 함께 움직이고, 루프 점프(is-preinit)는 트랜지션이 꺼져 즉시 맞춰진다.
         검증: 블러 켬/끔 차이(>2) 2번 장 391,374 → 아래 적용 뒤 같은 값이어야 한다(_design 메모 backdrop-filter 평면).
   -------------------------------------------------------------------------- */
.p-main #hero .fs-carousel__track,
.p-main .sgv-carousel .fs-carousel__track,
.p-main .ev-carousel .fs-carousel__track { transition-duration: 1.5s; transition-timing-function: ease; }
.p-main #hero .fs-hero__bg picture { overflow: hidden; }
.p-main #hero .fs-hero__bg img { transition: transform 1.5s ease; }
.p-main #hero .fs-carousel__slide.is-prev .fs-hero__bg img { transform: translateX(50%); }
.p-main #hero .fs-carousel__slide.is-next .fs-hero__bg img { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .p-main #hero .fs-hero__bg img { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   12. 히어로 — 스크롤하면 옆 장이 가장자리로 삐져나오던 것(2026-10-01 승인자 「스크롤하면 히어로가 넘어가? 히어로가 왜 저래」)
       11절에서 fade → slide 로 바뀌며 옆 장이 바로 옆에 붙었다. 스크롤 패럴랙스(fs.js)가 사진 층을 translateZ 로 뒤로 밀고 scale 로 되돌리는데
       원근 중심이 뷰포트 가운데라 옆 장은 가운데 쪽으로 끌려 들어오고(1898×903 스크롤 250 → 46px · 500 → 90px), DOM 순서상 다음 장이 위에 그려졌다.
       (페이드 시절엔 옆 장이 투명이라 안 보였다.) → 활성 장을 위로. 활성 장 사진은 늘 히어로를 덮으므로 들어온 옆 장은 그 밑에 숨는다.
       ✗ 장마다 overflow:hidden 으로 자르기 — 3D 가 평면화되며 10절 블러 마스크가 풀려 스크롤 중 사진 전체가 흐려졌다.
       ✗ 활성 장 translateZ(1px) — 깊이 정렬이 장마다 달라 2 에서 남았다.
       넘기는 동안엔 들어오는 장(is-active 가 넘김 시작에 바뀐다)이 위 — 와이프 방향과 같다. 정지 화면은 픽셀 0 차이.
   -------------------------------------------------------------------------- */
.p-main #hero .fs-carousel__slide { position: relative; }
.p-main #hero .fs-carousel__slide.is-active { z-index: 1; }

/* --------------------------------------------------------------------------
   13. 히어로 — 끄는 동안 옆 장에 토프색 빈 칸(2026-10-02 승인자 「히어로 커서로 땡기면 왜 이렇게 돼 옆에 토프색 block이 생겨」)
       원인: 11절 와이프는 is-prev / is-next 장의 img 를 ±50% 옮겨 두는데, fs.js 는 끄는 동안 트랙만 움직이고 클래스는 놓을 때 바꾼다.
       그래서 끌려 들어오는 장은 사진이 반 폭 비켜난 채 들어와, 반 화면 넘게 끌면 (끈 거리 − 반 화면)만큼 사진 상자가 비어
       밴드색(토프)이 드러났다 — 1864 에서 0.7폭 373px · 한 폭이면 ≈930px(승인자 캡처), 390 에서 78px. 자동 넘김·화살표는 넘김 시작에
       클래스가 바뀌어 사진이 같이 0 으로 오므로 안 보였다.
       → 끄는 동안(.is-dragging)은 사진을 제 상자에 붙이고(이동·전환 없음) 블러 veil 도 0 으로. 놓으면 fs.js 가 클래스를 다시 매기고
         11절 1.5s 와이프가 그대로 이어진다(나가는 장 사진이 0 → ±50% 로 밀리며 빠지는 동안 빈 쪽은 화면 밖 — 계산·실측 0px).
       실측(헤드리스 마우스 끌기 ±0.25·0.5·0.7폭, 1864·390): 끄는 중·놓고 0.4s·2.2s 빈 폭 전부 0. 백업 _src/build/backup-main-1002-herodrag.
   -------------------------------------------------------------------------- */
.p-main #hero .fs-hero__slider.is-dragging .fs-carousel__slide .fs-hero__bg img,
.p-main #hero .fs-hero__slider.is-dragging .fs-carousel__slide .hb-blur .hb-blur__img { transform: none; transition: none; }   /* 흐린 사진 층(15절)도 사진과 같이 */

/* --------------------------------------------------------------------------
   14. 히어로 — 놓은 뒤 «느려진다»(2026-10-02 승인자 「히어로로 옆으로 잡고 당기면 넘어가는 속도가 느려지는데」)
       원인: 끌다 놓으면 fs.js 가 남은 거리만 11절 넘김(1.5s ease)으로 보낸다. 얼마나 끌었든 남은 거리에 1.5초 —
       0.3폭 끌면 1305px, 0.6폭이면 746px 를 1.5초(getAnimations 실측). ease 는 첫 기울기가 평균 속도의 0.4배라
       놓는 순간 손 속도(1~4px/ms)가 0.2~0.35px/ms 로 뚝 떨어진 뒤 천천히 흘러간다.
       → fs.js 가 놓은 순간부터 정착까지 붙이는 .is-released 동안만 0.6s ease-out(첫 기울기 2.8배 — 1305px 면 6px/ms 로 출발해 감속).
         사진 와이프(11절 img)·블러 veil(10절)도 같은 곡선으로 같이 끝낸다. 자동 넘김·화살표는 그대로 1.5s ease(designps).
   -------------------------------------------------------------------------- */
.p-main #hero .fs-hero__slider.is-released .fs-carousel__track,
.p-main .sgv-carousel.is-released .fs-carousel__track,                /* 같은 날 「끌었다 놓으면 느려지는 거 다 수정」 — SIGNATURE */
.p-main .ev-carousel.is-released .fs-carousel__track,                 /* EVENT. 커서를 올리면 잠깐 멈추는 hover-move 는 그대로(승인자 「유지」) */
.p-main #hero .fs-hero__slider.is-released .fs-carousel__slide .fs-hero__bg img,
.p-main #hero .fs-hero__slider.is-released .fs-carousel__slide .hb-blur .hb-blur__img {
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   15. 히어로 블러 — 실시간 → «미리 흐린 사진»(2026-10-02 승인자 「히어로가 페이지하면 좀 덜거덕」 → 진단 → 「1번으로」)
       원인: 10절 backdrop-filter 두 겹(18·8px)이 히어로 전체 크기라 넘기는 동안 화면에 걸친 두 장 × 두 겹을 매 프레임 다시 흐렸다
       (헤드리스 비교 넘김 1.7초 프레임: 블러 켬 7~11 · 끔 44~47). → 같은 마스크(카피 타원 ∩ 인물 제외 veil) 아래 «미리 흐린 사진» 을 깐다.
       사진: _src/gen/main-hero-blur/blur.py — PC blur-a(18px 위 8px = 19.7 + 흰 막 .22 구움) · blur-b(8px) · MO mo-blur(22px), 기준 cover 배율 PC .64 · MO .55.
       층 순서를 바꿨다: 실시간 때는 위의 바깥 층이 아래 안쪽 층까지 다시 흐렸지만 흐린 사진은 위에 놓인 쪽이 이긴다 →
       picture::after = 바깥 8px(넓은 타원) · bg::after = 안쪽 19.7px + 흰 막(좁은 타원)이 위.
       흐린 사진은 veil 과 같은 식(calc(x + dx) 50% / cover)으로 깔려 11절 와이프(±50%)·13절 끌기·14절 놓기를 그대로 따라간다.
       사진(hero2-0N.jpg)을 바꾸면 blur.py 를 다시 돌리고 아래 ?v= 를 갱신 — 파일이 없으면 그 장은 블러·흰 막이 빠진다(var() 무효 → 배경 없음).
   -------------------------------------------------------------------------- */
.p-main #hero .fs-hero__bg:has(img[src*="/hero2-01."]) { --hb-blur-a: url("../main/hero2-01-blur-a.jpg?v=810ef738"); --hb-blur-b: url("../main/hero2-01-blur-b.jpg?v=6e9531c9"); --hb-blur-mo: url("../main/hero2-01-mo-blur.jpg?v=4294e48b"); }
.p-main #hero .fs-hero__bg:has(img[src*="/hero2-02."]) { --hb-blur-a: url("../main/hero2-02-blur-a.jpg?v=edef77bf"); --hb-blur-b: url("../main/hero2-02-blur-b.jpg?v=634f6c8c"); --hb-blur-mo: url("../main/hero2-02-mo-blur.jpg?v=1723dae1"); }
.p-main #hero .fs-hero__bg:has(img[src*="/hero2-03."]) { --hb-blur-a: url("../main/hero2-03-blur-a.jpg?v=03916753"); --hb-blur-b: url("../main/hero2-03-blur-b.jpg?v=04fbad5a"); --hb-blur-mo: url("../main/hero2-03-mo-blur.jpg?v=88b30467"); }
.p-main #hero .fs-hero__bg:has(img[src*="/hero2-04."]) { --hb-blur-a: url("../main/hero2-04-blur-a.jpg?v=0b98c068"); --hb-blur-b: url("../main/hero2-04-blur-b.jpg?v=d8e3405f"); --hb-blur-mo: url("../main/hero2-04-mo-blur.jpg?v=85c84ec4"); --hb-veil-x: 70%; }
.p-main #hero .fs-hero__bg:has(img[src*="/hero2-05."]) { --hb-blur-a: url("../main/hero2-05-blur-a.jpg?v=3fe38b56"); --hb-blur-b: url("../main/hero2-05-blur-b.jpg?v=5f3d9b94"); --hb-blur-mo: url("../main/hero2-05-mo-blur.jpg?v=620275aa"); }
.p-main #hero .fs-hero__bg:has(img[src*="/hero2-06."]) { --hb-blur-a: url("../main/hero2-06-blur-a.jpg?v=1f4b7a52"); --hb-blur-b: url("../main/hero2-06-blur-b.jpg?v=8ced3f91"); --hb-blur-mo: url("../main/hero2-06-mo-blur.jpg?v=62201b98"); }
.p-main #hero .fs-hero__bg:has(img[src*="/hero2-07."]) { --hb-blur-a: url("../main/hero2-07-blur-a.jpg?v=88c044fe"); --hb-blur-b: url("../main/hero2-07-blur-b.jpg?v=281c7998"); --hb-blur-mo: url("../main/hero2-07-mo-blur.jpg?v=505e6e6e"); }
/* 같은 날 후속 — 「1번(스크롤 입체 효과) 없애고 흐린 사진 이동 방식 고쳐줘」(승인자 「텍스트랑 이미지가 따로 가는 효과는 좋아」 = 11절 와이프는 그대로).
   ::after 의 background-position·mask-position 으로 옮기면 넘기는 1.5초 내내 두 장 × 두 층을 메인 스레드가 다시 그렸다(스크롤 패럴랙스와 겹치면 덜거덕).
   → 흐린 사진을 작은 층으로 뺐다(index.html, 밝은 7장): .hb-blur(바깥) = 고정된 «카피 타원» 마스크 · .hb-blur__img(안쪽) = 흐린 사진 + 인물 제외 veil,
     사진(img)과 똑같이 transform ±50%(11절) → 합성기만 일한다. 이동 거리도 50vw 근사가 아니라 사진과 같은 50%.
   옛 ::after 두 층은 끈다(10절 규칙은 남아 있지만 display:none). 스크롤 패럴랙스는 index.html 에서 data-fs-parallax* 를 뺐다(9·12절 주석의 3D 는 이제 없다). */
.p-main #hero .fs-hero__bg picture::after { display: none; }
@media (min-width: 1024px) {
  .p-main #hero .fs-carousel__slide:not(.fs-hero__slide--dark) .fs-hero__bg::after { display: none; }   /* 밝은 장 PC 의 bg::after 는 블러 층이었다(스크림 없음) */
}
.p-main #hero .hb-blur { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.p-main #hero .hb-blur__img {
  position: absolute; inset: 0;
  background: var(--hb-blur-b) var(--hb-veil-x, 50%) 50% / cover no-repeat;
  transition: transform 1.5s ease;                                      /* 11절 img 와 같은 곡선 */
}
.p-main #hero .fs-carousel__slide.is-prev .hb-blur__img { transform: translateX(50%); }
.p-main #hero .fs-carousel__slide.is-next .hb-blur__img { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .p-main #hero .hb-blur__img { transition: none; transform: none; }
}
@media (min-width: 1024px) {
  .p-main #hero .hb-blur {
    -webkit-mask: var(--hb-shape) 0 0 / 100% 100% no-repeat;
            mask: var(--hb-shape) 0 0 / 100% 100% no-repeat;
  }
  .p-main #hero .hb-blur--b {                                           /* 바깥 8px · 넓은 타원 */
    --hb-shape: radial-gradient(calc(clamp(1040px, 76vw, 1560px) / 2) calc(clamp(600px, 50vw, 900px) / 2) at var(--hb-cx) 50%,
      #000 30%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, .25) 80%, transparent 100%);
  }
  .p-main #hero .hb-blur--a {                                           /* 안쪽 19.7px + 흰 막 · 좁은 타원(위) */
    --hb-shape: radial-gradient(calc(clamp(720px, 52vw, 1100px) / 2) calc(clamp(400px, 32vw, 620px) / 2) at var(--hb-cx) 50%,
      #000 38%, rgba(0, 0, 0, .78) 58%, rgba(0, 0, 0, .40) 78%, rgba(0, 0, 0, .12) 92%, transparent 100%);
  }
  .p-main #hero .hb-blur--a .hb-blur__img { background-image: var(--hb-blur-a); }
  .p-main #hero .hb-blur__img {
    -webkit-mask: var(--hb-veil, linear-gradient(#000 0 0)) var(--hb-veil-x, 50%) 50% / cover no-repeat;
            mask: var(--hb-veil, linear-gradient(#000 0 0)) var(--hb-veil-x, 50%) 50% / cover no-repeat;
  }
}
@media (max-width: 1023px) {
  /* 모바일 한 겹 — 10절 띠(좌우 -18% · 아래 -6% · 높이 58% 상자의 closest-side 타원)를 사진 상자 % 로(68% 29% at 50% 77%). veil 없음(옛 모바일과 같다) */
  .p-main #hero .hb-blur--a { display: none; }
  .p-main #hero .hb-blur--b {
    -webkit-mask-image: radial-gradient(68% 29% at 50% 77%, #000 42%, rgba(0, 0, 0, .75) 62%, rgba(0, 0, 0, .35) 82%, transparent 100%);
            mask-image: radial-gradient(68% 29% at 50% 77%, #000 42%, rgba(0, 0, 0, .75) 62%, rgba(0, 0, 0, .35) 82%, transparent 100%);
  }
  .p-main #hero .hb-blur--b .hb-blur__img { background-image: var(--hb-blur-mo); }
}

/* --------------------------------------------------------------------------
   16. FS REVIEW 진입 — 2026-10-02 승인자 「리뷰는 처음에 스크롤해서 내려가면 리뷰들이 촤라락하고 위에서부터 아래로」
       fs.js 리빌(index.html .rv-grid data-fs-reveal-stagger="70" · 대상 .rv-card 10장, 셋째 칸 두 장 포함) — DOM 순서 = 윗줄 → 아랫줄.
       fs.css 기본 리빌(아래에서 올라오며 3D 로 세워짐)을 이 줄만 «위에서 살짝 떨어지며» 로 뒤집고, 장당 0.6초로 짧게(«촤라락», 전체 ≈1.2초).
       첫 화면에 이미 보이는 카드·동작 줄이기에서는 fs.js 가 리빌을 안 건다(그대로 보인다).
   -------------------------------------------------------------------------- */
.p-main .rv-card.fs-reveal { transition-duration: .6s; }
:root.fs-js .p-main .rv-card.fs-reveal { transform: translate3d(0, -26px, 0); }
:root.fs-js .p-main .rv-card.fs-reveal.is-in { transform: none; }

/* --------------------------------------------------------------------------
   17. FS Shorts — 누르면 그 자리에서 바로 재생(2026-10-08 승인자 「클릭했을때 바로 재생되도록」)
       index.html 끝 스크립트가 카드 <a>(.sh-card) 를 이 iframe 으로 갈아끼운다(다른 카드를 누르면 앞 장은 썸네일로 복귀).
       카드 비율 272:498 그대로 — 9:16 영상이라 위아래 8px 남짓 검은 띠가 생긴다(줄 높이를 안 흔들려고 일부러).
   -------------------------------------------------------------------------- */
.p-main .sh-frame { width: 100%; height: auto; aspect-ratio: 272 / 498; border: 0; background: #000; }

/* --------------------------------------------------------------------------
   18. 진입 팝업 — 카톡상담 · 라인상담 탭 한 장
       (10-21 LINE 「현지화」 → 10-22 「모든 언어에 두 장」 → 같은 날 「참고 화면 같은 버튼 형태로, 누르면 그 팝업」)
       index.html <dialog id="p-popups"> 안에 창(.p-popup) 하나: X · 이미지 두 장(.p-popup__panel, 고른 하나만 .is-on) · 탭 칸 · 오늘 하루 보지 않기.
       4초마다 저절로 다음 장(끝 스크립트) — 두 장을 한 칸에 겹쳐 두고 들어오는 장만 0.5초 동안 서서히 나타난다.
       참고 화면 실측색: 탭 칸 #191919(칸 사이 1px #222) · 고른 칸 #ECEDEF 에 검은 글자 · 맨 아래 막대 #4B4A49.
       이미지 16:9(카카오 1671x941 · LINE 1920x1080). 1023 이하는 폰용 세로(카카오 720x1070 · LINE 1083x1610 — 같은 비율이라 탭을 바꿔도 창이 안 튄다).
       폭은 화면 높이에도 묶는다(X 48 · 탭 49 · 막대 44 · 위아래 여백).
   -------------------------------------------------------------------------- */
.p-popups {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; overflow: hidden;
}
.p-popups[open] { display: grid; place-items: center; }
.p-popups::backdrop { background: rgba(0, 0, 0, .55); }
.p-popups:focus { outline: none; }
.p-popup { position: relative; width: min(800px, 100vw - 64px, (100dvh - 200px) * 16 / 9); margin-top: 48px; background: var(--fs-ink); }
.p-popup__panels { display: grid; }
/* 나가는 장은 들어오는 장이 다 덮을 때까지(0.5초) 그대로 둔다 — 둘 다 같이 흐려지면 사이에 검은 바탕이 비친다 */
.p-popup__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0s .5s, visibility 0s .5s; }
.p-popup__panel.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .5s; }
@media (prefers-reduced-motion: reduce) { .p-popup__panel, .p-popup__panel.is-on { transition: none; } }
.p-popup__link, .p-popup img { display: block; width: 100%; height: auto; }
.p-popup__link:focus:not(:focus-visible) { outline: none; }
/* 닫기 — 창 위 오른쪽 바깥에 흰 원 테두리 X */
.p-popup__x {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 8px;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  color: var(--fs-white); background: none; border: 2px solid currentColor; border-radius: 50%; cursor: pointer;
}
.p-popup__x svg { width: 20px; height: 20px; }
.p-popup__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; background: #222; border-top: 1px solid #222; }
.p-popup__tab {
  min-height: 48px; padding: 6px 12px;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--fs-white);
  background: #191919; border: 0; cursor: pointer;
}
.p-popup__tab:hover { background: #2A2A2A; }
.p-popup__tab[aria-selected="true"] { color: #191919; font-weight: 700; background: #ECEDEF; }
/* 오늘 하루 보지 않기 — 참고 화면처럼 흰 네모 체크칸 + 글자를 막대 가운데에. 누르면 바로 닫힌다 */
.p-popup__today {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  font-size: 14px; color: var(--fs-white); background: #4B4A49; cursor: pointer;
}
.p-popup__today input { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; background: var(--fs-white); border: 0; border-radius: 0; cursor: pointer; }
@media (max-width: 1023px) {
  .p-popup { width: min(420px, 100vw - 32px, (100dvh - 190px) * 720 / 1070); }
}