/* ==========================================================================
   54 · 화살코 / 긴코 (droopy-nose) — 이 페이지에만 필요한 규칙
   전부 .fs-p-54 스코프. 색은 --fs-* 토큰만 쓴다(새 hex 0).

   전용 컴포넌트
     .fs-droopy-hero   A01 정본 서브 히어로 — 사진 위에 카피를 얹는다(2026-08-27 수정)
     .fs-droopy-dx     화살코 판독 4칸 (도해 + 라벨바)
     .fs-droopy-spec   수술정보 6칸 아이콘 스트립
     .fs-droopy-who    수술대상 (좌 모델 / 우 4카드)
     .fs-droopy-tx     술식 카드 — 도해 스트립 + 겹친 흰 패널(A18 확장)
     .fs-droopy-rot    ★시그니처 — 코끝 회전 도해(도해 2컷 크로스페이드 + 틸 호)
     .fs-droopy-ft     특징 룰 카드(.fs-card--rule 확장 + 원형 번호 배지 + 아이콘)
     .fs-droopy-promise  약속 2단
   ========================================================================== */

/* --- 셸 · A01 · 1mm 계열 «투명 헤더 + 모델 히어로» 첫 화면 ---------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 이 페이지 히어로 상단은
   전 폭이 쿨 그레이(#AFB1BD)라 흰 글자(2.1:1)가 아니라 «잉크 글자»(8.8:1)를 쓴다.
   모델 머리는 사진 높이의 34.6% 아래에서 시작하므로 헤더 띠(최대 16%)에 안 걸린다.
   ------------------------------------------------------------------------- */
.fs-p-54 {
  --fs-header-overlay-bg: transparent;
}
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-54 .fs-page--overlay { background: #AFB1BD; }
.fs-p-54 .fs-header--overlay { color: var(--fs-ink); }
.fs-p-54 .fs-header--overlay::before { content: none; }
.fs-p-54 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-54 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-54 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-54 .fs-header--overlay .fs-util__link { color: var(--fs-ink); }
.fs-p-54 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-54 .fs-util__sep { opacity: .4; }

.fs-p-54 .fs-droopy-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 위치 — 위 고정이면 모델이 박스 아래쪽으로 내려앉는다 */
.fs-p-54 .fs-droopy-hero .fs-hero__bg img { object-position: 50% 34%; }
.fs-p-54 .fs-droopy-hero .fs-hero__copy {
  max-width: 34rem;
  gap: clamp(9px, 7.2px + 0.51vw, 17px);
}
.fs-p-54 .fs-droopy-hero .fs-hero__kicker {
  color: var(--fs-ink);
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.fs-p-54 .fs-droopy-hero .fs-hero__title {
  color: var(--fs-ink);
  font-size: clamp(30px, 21.4px + 2.39vw, 68px);
  font-weight: 700;
  line-height: 1.15;
}
/* 히어로 배경이 사진이라 슬래시 뒤 색이 폭마다 달라진다(#AFB1BD~#D1D4DB).
   가장 어두운 쪽에서 --fs-teal-text 가 2.5:1 로 미달이라 잉크로 두고 굵기로만 구분한다. */
.fs-p-54 .fs-droopy-hero__slash { color: var(--fs-ink); font-weight: 300; }
.fs-p-54 .fs-droopy-hero__rule {
  display: block;
  width: clamp(56px, 47.7px + 2.31vw, 92px);
  height: 3px;
  background: var(--fs-teal-dk);
  margin-block-start: var(--fs-sp-3);
}

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피와 모델이 겹친다.
   카피를 그레이 밴드로 위에 쌓고 세로 크롭 사진을 아래에 붙인다. 사진 윗단은
   페이드로 녹여 이음매를 없앤다. */
@media (max-width: 1023px) {
  .fs-p-54 .fs-droopy-hero { min-height: 0; background: #D1D4DB; }
  .fs-p-54 .fs-droopy-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-54 .fs-droopy-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-54 .fs-droopy-hero .fs-hero__inner {
    grid-row: 1; background: #D1D4DB;
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-9)) var(--fs-sp-11);
  }
  .fs-p-54 .fs-droopy-hero .fs-hero__copy { max-width: 100%; }
}

/* --- A02 · 화살코 판독 4칸 ------------------------------------------------ */
.fs-p-54 .fs-droopy-about__lead { max-width: 66ch; }
.fs-p-54 .fs-droopy-dx {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
  list-style: none;
}
@media (min-width: 768px) {
  .fs-p-54 .fs-droopy-dx { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fs-p-54 .fs-droopy-dx__fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  background: var(--fs-cream-2);
}
.fs-p-54 .fs-droopy-dx__ill {
  justify-self: center; align-self: center;
  width: clamp(96px, 74.5px + 5.96vw, 190px);
  height: auto;
  padding-block: clamp(14px, 10.5px + 0.96vw, 29px);
}
.fs-p-54 .fs-droopy-dx__fig .fs-labelbar {
  min-height: clamp(34px, 31.2px + 0.77vw, 46px);
  line-height: 1.3;
  padding-inline: var(--fs-sp-2);
}

/* --- A21 · 수술정보 6칸 아이콘 스트립 ------------------------------------- */
.fs-p-54 .fs-droopy-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--fs-line);
  border: 1px solid var(--fs-line);
}
@media (min-width: 600px) { .fs-p-54 .fs-droopy-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-54 .fs-droopy-spec { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fs-p-54 .fs-droopy-spec__item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--fs-sp-3);
  padding: clamp(18px, 14.5px + 0.96vw, 33px) var(--fs-sp-3) clamp(16px, 13.2px + 0.77vw, 28px);
  background: var(--fs-white);
  text-align: center;
}
.fs-p-54 .fs-droopy-spec__icon {
  width: clamp(52px, 44.5px + 2.08vw, 84px);
  height: auto;
}
.fs-p-54 .fs-droopy-spec__item .fs-labelbar {
  width: 100%;
  min-height: clamp(26px, 24.1px + 0.51vw, 34px);
}
.fs-p-54 .fs-droopy-spec__value {
  font-size: var(--fs-t-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fs-ink);
}

/* --- A06 · 수술대상 (좌 모델 / 우 4카드) ---------------------------------- */
.fs-p-54 .fs-droopy-who {
  display: grid;
  gap: var(--fs-gap-col);
  margin-block-start: var(--fs-gap-title);
  align-items: start;
}
@media (min-width: 1024px) {
  .fs-p-54 .fs-droopy-who { grid-template-columns: minmax(0, 470fr) minmax(0, 890fr); align-items: stretch; }
  .fs-p-54 .fs-droopy-who__cards { grid-auto-rows: minmax(0, 1fr); }
}
.fs-p-54 .fs-droopy-who__photo { margin: 0; }
.fs-p-54 .fs-droopy-who__photo img { display: block; width: 100%; height: auto; }
.fs-p-54 .fs-droopy-who__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin: 0; padding: 0;
  list-style: none;
}
.fs-p-54 .fs-droopy-who__card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  justify-items: center;
  gap: var(--fs-sp-3);
  padding: clamp(16px, 13.2px + 0.77vw, 28px) var(--fs-sp-3) 0;
  background: var(--fs-cream-2);
}
.fs-p-54 .fs-droopy-who__sub {
  font-size: var(--fs-t-body);
  line-height: 1.4;
  color: var(--fs-muted);
  text-align: center;
}
.fs-p-54 .fs-droopy-who__fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  margin: 0;
}
.fs-p-54 .fs-droopy-who__ill {
  justify-self: center; align-self: center;
  width: clamp(92px, 76.2px + 4.39vw, 161px);
  height: auto;
  padding-block: var(--fs-sp-2);
}
.fs-p-54 .fs-droopy-who__fig .fs-labelbar {
  min-height: clamp(38px, 34.3px + 1.03vw, 54px);
  line-height: 1.3;
  padding-inline: var(--fs-sp-2);
}

/* --- A18 확장 · 술식 카드 -------------------------------------------------
   범용 .fs-card--panel 은 사진 1장 + 겹친 패널이다. 여기는 도해가 2~3컷이라
   미디어 자리를 도해 스트립으로 바꾸고 패널 폭·돌출량만 다시 잡는다. */
.fs-p-54 .fs-droopy-tx {
  display: grid;
  gap: clamp(56px, 34.5px + 5.96vw, 150px);
  margin-block-start: var(--fs-gap-title);
  padding: 0;
  list-style: none;
}
.fs-p-54 .fs-droopy-tx__card {
  position: relative;
  display: grid;
  gap: var(--fs-gap-card);
}
.fs-p-54 .fs-droopy-tx__strip {
  display: grid;
  justify-items: center; align-items: center;
  gap: clamp(6px, 2.5px + 0.96vw, 21px);
  grid-template-columns: minmax(0, 1fr);
  background: var(--fs-white);
  padding: clamp(18px, 14.5px + 0.96vw, 33px) clamp(12px, 7.4px + 1.28vw, 32px);
}
@media (min-width: 600px) {
  .fs-p-54 .fs-droopy-tx__strip    { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .fs-p-54 .fs-droopy-tx__strip--3 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
}
.fs-p-54 .fs-droopy-tx__fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  margin: 0;
}
.fs-p-54 .fs-droopy-tx__ill {
  justify-self: center; align-self: center;
  width: 100%;
  max-width: clamp(120px, 76.2px + 12.18vw, 310px);
  height: auto;
}
.fs-p-54 .fs-droopy-tx__fig .fs-labelbar {
  margin-block-start: var(--fs-sp-2);
  min-height: clamp(32px, 29.2px + 0.77vw, 44px);
  line-height: 1.3;
  padding-inline: var(--fs-sp-2);
}
/* 360~599: 도해가 세로로 쌓이므로 화살표도 아래를 향하게 눕힌다. */
.fs-p-54 .fs-droopy-tx__mid { transform: rotate(90deg); }
@media (min-width: 600px) { .fs-p-54 .fs-droopy-tx__mid { transform: none; } }
.fs-p-54 .fs-droopy-tx__panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: var(--fs-sp-3);
  background: var(--fs-cream);
  padding: clamp(20px, 16.5px + 0.96vw, 35px) clamp(20px, 15.4px + 1.28vw, 40px);
}
/* PC — 도해 스트립(흰 면) 위로 크림 패널이 안쪽 모서리만 걸치게 겹친다.
   스트립 쪽에 그만큼 안쪽 여백을 더 줘서 도해가 패널에 가리지 않게 한다. */
@media (min-width: 1024px) {
  .fs-p-54 .fs-droopy-tx__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    align-items: center;
    gap: 0;
  }
  .fs-p-54 .fs-droopy-tx__strip { padding-inline-end: var(--fs-sp-9); }
  .fs-p-54 .fs-droopy-tx__panel { margin-inline-start: calc(-1 * var(--fs-sp-9)); }

  /* 두 번째 술식은 좌우를 뒤집어 같은 카드가 반복돼 보이지 않게 한다. */
  .fs-p-54 .fs-droopy-tx__card:nth-child(2) { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); }
  .fs-p-54 .fs-droopy-tx__card:nth-child(2) .fs-droopy-tx__strip {
    order: 2;
    padding-inline: var(--fs-sp-9) clamp(12px, 7.4px + 1.28vw, 32px);
  }
  .fs-p-54 .fs-droopy-tx__card:nth-child(2) .fs-droopy-tx__panel {
    order: 1;
    margin-inline: 0 calc(-1 * var(--fs-sp-9));
  }
}
.fs-p-54 .fs-droopy-tx__title {
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  color: var(--fs-ink);
}
.fs-p-54 .fs-droopy-tx__desc {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}

/* --- ★ 시그니처 · 코끝 회전 도해 ------------------------------------------
   도해 2컷을 같은 자리에 겹쳐 두고 진입할 때 크로스페이드시키면서,
   그 위에 --fs-teal 호 하나를 시계 반대방향으로 그린다.
   각도 수치는 원본에 없으므로 표기하지 않고 방향만 보여준다.
   JS 가 없거나 reduced-motion 이면 항상 최종 상태(회전 후 + 호 완성)로 보인다. */
.fs-p-54 .fs-droopy-rot { display: grid; margin: 0; width: 100%; }
.fs-p-54 .fs-droopy-rot__stage {
  position: relative;
  display: block;
  width: 100%;
  max-width: clamp(200px, 129.2px + 19.68vw, 507px);
  justify-self: center;
}
.fs-p-54 .fs-droopy-rot__ill { display: block; width: 100%; height: auto; }
.fs-p-54 .fs-droopy-rot__ill--a {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
}
.fs-p-54 .fs-droopy-rot__arc {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--fs-teal-dk);
  pointer-events: none;
}
.fs-p-54 .fs-droopy-rot__arc path { stroke-dasharray: 260; stroke-dashoffset: 0; }
.fs-p-54 .fs-droopy-rot .fs-labelbar {
  width: 100%;
  max-width: clamp(200px, 129.2px + 19.68vw, 507px);
  justify-self: center;
  margin-block-start: var(--fs-sp-2);
}
/* 초기 상태는 fs.js 가 **실제로 리빌을 배선한 요소**(.fs-reveal)에만 건다.
   fs.js 는 최초 화면에 이미 들어와 있는 요소를 배선에서 제외하므로,
   .fs-reveal 없이 :not(.is-in) 만으로 숨기면 그 요소가 영구히 초기 상태에 갇힌다. */
:root.fs-js .fs-p-54 .fs-droopy-rot__ill { transition: opacity 900ms var(--fs-ease) 380ms; }
:root.fs-js .fs-p-54 .fs-droopy-rot__arc path { transition: stroke-dashoffset 1100ms var(--fs-ease) 160ms; }
:root.fs-js .fs-p-54 .fs-droopy-rot.fs-reveal:not(.is-in) .fs-droopy-rot__ill--a { opacity: 1; }
:root.fs-js .fs-p-54 .fs-droopy-rot.fs-reveal:not(.is-in) .fs-droopy-rot__ill--b { opacity: 0; }
:root.fs-js .fs-p-54 .fs-droopy-rot.fs-reveal:not(.is-in) .fs-droopy-rot__arc path { stroke-dashoffset: 260; }

.fs-p-54 .fs-droopy-rot-sec {
  display: grid;
  gap: var(--fs-gap-col);
  align-items: center;
}
@media (min-width: 1024px) {
  .fs-p-54 .fs-droopy-rot-sec { grid-template-columns: minmax(0, 560fr) minmax(0, 800fr); }
}
.fs-p-54 .fs-droopy-rot-sec__note {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
  margin-block-start: var(--fs-sp-3);
}

/* --- A07 확장 · 포시즌 화살코/긴코 특징 -----------------------------------
   원본은 흰 원 4개가 + 로 이어진 그림이다. 그 원을 이미지가 아니라
   CSS 원형 배지로 되살리고, 나머지는 범용 룰 카드를 그대로 쓴다. */
.fs-p-54 .fs-droopy-ft {
  display: grid;
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .fs-p-54 .fs-droopy-ft { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fs-p-54 .fs-droopy-ft__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(14px, 10.5px + 0.96vw, 29px);
  row-gap: var(--fs-sp-2);
  background: var(--fs-cream-2);
  padding: clamp(16px, 13.2px + 0.77vw, 28px) clamp(18px, 14.5px + 0.96vw, 33px);
}
@media (min-width: 1024px) {
  .fs-p-54 .fs-droopy-ft__card {
    border-block-start: 0;
    border-inline-start: 2px solid var(--fs-teal);
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.fs-p-54 .fs-droopy-ft__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(84px, 68.2px + 4.39vw, 153px);
  aspect-ratio: 1;
  border: 1px solid var(--fs-teal);
  border-radius: var(--fs-radius-round);
  background: var(--fs-white);
}
.fs-p-54 .fs-droopy-ft__icon {
  width: 72%;
  height: auto;
}
.fs-p-54 .fs-droopy-ft__no {
  position: absolute;
  inset-block-start: calc(-1 * var(--fs-sp-2));
  inset-inline-start: calc(-1 * var(--fs-sp-2));
}
.fs-p-54 .fs-droopy-ft__sub {
  display: block;
  font-size: var(--fs-t-body);
  line-height: 1.45;
  color: var(--fs-muted);
}
.fs-p-54 .fs-droopy-ft__title {
  display: block;
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  color: var(--fs-ink);
  margin-block-start: var(--fs-sp-1);
}

/* --- A23 · 약속 2단 ------------------------------------------------------- */
.fs-p-54 .fs-droopy-promise { --fs-split-align: start; }
.fs-p-54 .fs-droopy-promise__photo { margin: 0; display: grid; }
.fs-p-54 .fs-droopy-promise__photo img { display: block; width: 100%; height: auto; }
.fs-p-54 .fs-droopy-promise__list { margin-block-start: var(--fs-gap-title); padding: 0; list-style: none; }
.fs-p-54 .fs-droopy-promise__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--fs-sp-3);
  align-items: baseline;
  padding-block: var(--fs-sp-2);
  border-block-end: 1px solid var(--fs-line);
}
.fs-p-54 .fs-droopy-promise__no {
  font-size: var(--fs-t-body);
  font-weight: 700;
  color: var(--fs-teal-text);
  white-space: nowrap;
}
.fs-p-54 .fs-droopy-promise__note { margin-block-start: var(--fs-sp-5); }

/* --- 모션 비활성 환경 보정 ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fs-p-54 .fs-droopy-rot__ill--a { opacity: 0 !important; transition: none !important; }
  .fs-p-54 .fs-droopy-rot__ill--b { opacity: 1 !important; transition: none !important; }
  .fs-p-54 .fs-droopy-rot__arc path { stroke-dashoffset: 0 !important; transition: none !important; }
}

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

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/767px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-54-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 정의 리드 <br> 문장 블록 1곳(390 「위로 올라가 있어서」 외톨이). nbsp 2(수술시간 「1시간 30분」「~ 2시간」 — 360 「약 1시간 30분 ~ / 2시간」, 앞 nbsp 없이 balance 만 걸면 「약 1시간 / 30분 ~2시간」).
   · balance: 수술시간 값 · 라벨바 · 회전 본문·주석 · 술식 설명 · 약속 본문 · 주의문. 약속 제목 «형광 칸 + 드립니다» 한 덩어리(§7-19).
   · 배치 무변경 — 정의 도해·수술대상은 이미 <600 2열, 특징은 원형 썸네일 + 글 행이다.
   ========================================================================== */
.fs-p-54 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-54 .fs-droopy-spec__value,
.fs-p-54 .fs-labelbar,
.fs-p-54 #tx .fs-body,
.fs-p-54 .fs-droopy-rot-sec__note,
.fs-p-54 .fs-droopy-tx__desc,
.fs-p-54 .fs-droopy-promise .fs-body,
.fs-p-54 .fs-nose-ba__note { text-wrap: balance; }
.fs-p-54 .fs-p54-keep { white-space: nowrap; }