/* ==========================================================================
   assets/page/53.css — [53] 들창코 / 짧은코 전용
   전용 컴포넌트
     .fs-short-ratio   얼굴 3분할 비율 눈금 (시그니처)
     .fs-short-thirds  3분할 구간 도해 3연
     .fs-short-tx      수술방법 4술식 타일 (전 → 후 도해 2컷)
   색은 전부 --fs-* 토큰. 새 hex 없음.
   ========================================================================== */

/* 섹션 제목 중앙 정렬 — .fs-nose-head 가 justify-items:start 라 .fs-center 만으로는 안 먹는다 */
.fs-p-53 .fs-nose-head.fs-center { justify-items: center; }

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

.fs-p-53 .fs-short-hero .fs-hero__kicker,
.fs-p-53 .fs-short-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-53 .fs-short-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭은 «위 고정» — 가운데로 두면 모델 머리가 헤더 띠로 올라온다 */
.fs-p-53 .fs-short-hero .fs-hero__bg img { object-position: 50% 0%; }
.fs-p-53 .fs-short-hero .fs-hero__copy { max-width: 38rem; }
.fs-p-53 .fs-short-hero .fs-hero__kicker {
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em; font-weight: 500; color: var(--fs-teal-dk);
}
.fs-p-53 .fs-short-hero .fs-hero__title {
  font-size: clamp(28px, 20.6px + 2.06vw, 52px);
  font-weight: 700; line-height: 1.25;
}

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

/* --- A03 · 얼굴 3분할 비율 눈금 (시그니처) ------------------------------- */
/* 라벨바는 «사진 폭» 과 같아야 한다 — figure 폭에 맞추면 눈금표 자리(오른쪽 패딩)만큼
   바가 사진보다 넓어진다. 스테이지와 바에 같은 여백을 주고 gap 을 0 으로 붙인다. */
.fs-p-53 .fs-short-ratio {
  display: grid; gap: 0;
  --fs-ratio-tagw: clamp(58px, 50.7px + 2.03vw, 82px);
  max-width: 420px;
}
.fs-p-53 .fs-short-ratio .fs-labelbar { margin-inline-end: var(--fs-ratio-tagw); }
.fs-p-53 .fs-short-ratio__stage {
  position: relative;
  padding-inline-end: var(--fs-ratio-tagw);
}
.fs-p-53 .fs-short-ratio__ill {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
/* 가운데 1/3(미간 → 코끝) 구간만 채운다.
   ※ 도해가 실사 사진으로 바뀌면서 밴드·눈금이 사진 «위» 로 와야 한다 —
     .fs-short-ratio__ill 이 z-index:1 이라 z 를 안 주면 사진 뒤로 숨는다.
   눈금 위치는 사진에서 실측한 값이다: 이마선 29 · 미간 43 · 코끝 57 · 턱끝 71
   (세 구간이 정확히 14%씩이라 «얼굴 전체의 1/3» 이 눈으로 맞아떨어진다). */
.fs-p-53 .fs-short-ratio__band {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-start: 43%;
  height: 14%;
  background: color-mix(in srgb, var(--fs-beige) 52%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-teal-dk) 30%, transparent);
}
.fs-p-53 .fs-short-ratio__rule {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  height: 1px;
  background: var(--fs-teal-dk);
}
.fs-p-53 .fs-short-ratio__rule--1 { inset-block-start: 29%; }
.fs-p-53 .fs-short-ratio__rule--2 { inset-block-start: 43%; height: 2px; }
.fs-p-53 .fs-short-ratio__rule--3 { inset-block-start: 57%; height: 2px; }
.fs-p-53 .fs-short-ratio__rule--4 { inset-block-start: 71%; }
.fs-p-53 .fs-short-ratio__tag {
  position: absolute;
  z-index: 2;
  inset-inline-end: 0;
  transform: translateY(-50%);
  font-size: var(--fs-t-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fs-teal-dk);
}
.fs-p-53 .fs-short-ratio__tag--1 { inset-block-start: 29%; }
.fs-p-53 .fs-short-ratio__tag--2 { inset-block-start: 43%; }
.fs-p-53 .fs-short-ratio__tag--3 { inset-block-start: 57%; }
.fs-p-53 .fs-short-ratio__tag--4 { inset-block-start: 71%; }

/* 눈금이 위에서 아래로 그어지고 가운데 구간이 채워진다 (JS 실행 시에만 은닉) */
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal .fs-short-ratio__rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .62s var(--fs-ease);
}
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal .fs-short-ratio__band {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .62s var(--fs-ease) .28s;
}
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal .fs-short-ratio__tag {
  opacity: 0;
  transition: opacity .5s var(--fs-ease) .42s;
}
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__rule--1 { transform: scaleX(1); transition-delay: 0s; }
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__rule--2 { transform: scaleX(1); transition-delay: .12s; }
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__rule--3 { transform: scaleX(1); transition-delay: .24s; }
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__rule--4 { transform: scaleX(1); transition-delay: .36s; }
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__band { transform: scaleY(1); }
:root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__tag { opacity: 1; }

/* --- A03 · 3분할 구간 도해 3연 ------------------------------------------ */
.fs-p-53 .fs-short-thirds {
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 600px) {
  .fs-p-53 .fs-short-thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-53 .fs-short-thirds__fig { display: grid; align-content: start; }
.fs-p-53 .fs-short-thirds__box {
  display: grid;
  place-items: center;
  padding: var(--fs-sp-5);
  background: var(--fs-cream-2);
}
.fs-p-53 .fs-short-thirds__shot { position: relative; display: block; width: 100%; max-width: 230px; }
.fs-p-53 .fs-short-thirds__shot img { display: block; width: 100%; height: auto; }
/* 네 눈금은 세 장에 모두 그리고, 채워지는 구간만 카드마다 옮긴다 */
.fs-p-53 .fs-short-thirds__rule {
  position: absolute; z-index: 3; inset-inline: 0;
  inset-block-start: var(--fs-y); height: 1px; background: var(--fs-teal-dk);
}
.fs-p-53 .fs-short-thirds__band {
  position: absolute; z-index: 2; inset-inline: 0;
  inset-block-start: var(--fs-y); height: 14%;
  background: color-mix(in srgb, var(--fs-beige) 52%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-teal-dk) 30%, transparent);
}
.fs-p-53 .fs-short-thirds__fig--mid .fs-short-thirds__box { background: var(--fs-cream); }

/* --- A21 · 수술정보 표 아이콘 ------------------------------------------- */
/* 머리행과 칸을 «같이» 가운데로 보낸다. 한쪽만 가운데면 넓은 글자 열에서 칸과 어긋난다. */
.fs-p-53 .fs-short-spec .fs-table :is(th, td) { text-align: center; }
.fs-p-53 .fs-short-spec th[scope="row"] { white-space: nowrap; }
.fs-p-53 .fs-short-spec__ico {
  display: inline-grid;
  place-items: center;
  width: clamp(26px, 23.1px + 0.81vw, 38px);
  aspect-ratio: 1;
  margin-inline-end: var(--fs-sp-3);
  vertical-align: middle;
}
.fs-p-53 .fs-short-spec__ico img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- A07 · 수술대상 -------------------------------------------------------- */
.fs-p-53 .fs-short-who__box {
  display: block;
  aspect-ratio: 668 / 1000;
  overflow: hidden;
}
.fs-p-53 .fs-short-who__box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.fs-p-53 .fs-short-who__ico { display: block; justify-self: start; width: clamp(64px, 52.9px + 3.08vw, 100px); }
.fs-p-53 .fs-short-who__ico img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .fs-p-53 .fs-short-who__card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fs-p-53 .fs-short-who__ico { justify-self: end; }
}

/* --- A15 · 수술방법 4술식 타일 (다크 밴드) -------------------------------- */
.fs-p-53 .fs-short-tx {
  display: grid;
  gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 1024px) {
  .fs-p-53 .fs-short-tx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fs-p-53 .fs-short-tx__tile {
  display: grid;
  gap: var(--fs-sp-4);
  align-content: start;
  justify-items: stretch;
  border-block-start: 2px solid var(--fs-teal);
  padding-block-start: var(--fs-sp-5);
}
.fs-p-53 .fs-short-tx__tile > .fs-pill { justify-self: start; }
.fs-p-53 .fs-short-tx__name {
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--fs-on-dark);
}
.fs-p-53 .fs-short-tx__name span { font-size: var(--fs-t-body); font-weight: 500; }
.fs-p-53 .fs-short-tx__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--fs-sp-3);
  margin-block-start: var(--fs-sp-2);
}
.fs-p-53 .fs-short-tx__card { display: grid; align-content: start; }
.fs-p-53 .fs-short-tx__box { display: block; }
.fs-p-53 .fs-short-tx__box img { display: block; width: 100%; height: auto; }
.fs-p-53 .fs-short-tx__mid { flex: 0 0 auto; }
.fs-p-53 .fs-short-tx__desc { color: var(--fs-on-dark); }

/* 다크 밴드 안 자가연골 2연 */
.fs-p-53 .fs-short-mat {
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 520px;
  margin-block-start: var(--fs-sp-11);
  margin-inline: auto;
}
.fs-p-53 .fs-short-mat__fig { display: grid; align-content: start; }
.fs-p-53 .fs-short-mat__fig img { display: block; width: 100%; height: auto; }

/* --- A23 · 약속 ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-53 .fs-short-promise__card { grid-template-columns: auto minmax(0, 1fr); }
}
.fs-p-53 .fs-short-promise__photo { display: block; }
.fs-p-53 .fs-short-promise__photo img { display: block; width: 100%; height: auto; }
.fs-p-53 .fs-short-promise__note { margin-block-start: var(--fs-sp-6); }

/* --- 모션 무효화 --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal .fs-short-ratio__rule,
  :root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal .fs-short-ratio__band,
  :root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__rule,
  :root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__band {
    transform: none !important;
    transition: none !important;
  }
  :root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal .fs-short-ratio__tag,
  :root.fs-js .fs-p-53 .fs-short-ratio.fs-reveal.is-in .fs-short-ratio__tag {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ==========================================================================
   ▼▼▼ V70 「틀 안에서의 재구성」 승격분 — 2026-08-27
   기준 구현은 assets/page/48.css 의 같은 블록. 그대로 옮기지 않고 이 페이지
   구조에 맞는 선택자로 다시 썼다. 적용/보류 근거는 각 항목 주석에 적는다.

   ★ 보류 — 48 의 「다크 밴드 50:50 하드컷 → 비대칭 겹침」(B).
     48 의 .fs-lef-clinic 은 «좌 사진 / 우 카피 패널» 단일 분할이라 패널을
     사진 위로 끌어당길 수 있었다. 53 의 다크 밴드 #tx 안 .fs-short-tx 는
     1440px 실측 [669/669] 2열 × 2행 = 4술식 타일의 반복 그리드이고,
     각 타일이 «전 도해 → 후 도해 + 설명» 을 스스로 완결한다.
     겹칠 상대(사진 면)가 없고, 01→04 는 위계가 아니라 병렬·단계 나열이라
     한 칸을 크게 만들면 술식의 무게를 왜곡한다. 그래서 B 대신
     「열 사이 결속(F항)」으로 밴드를 손봤다.
   ========================================================================== */

/* ==========================================================================
   B. 타이포 리듬 — 제목 뒤에 그어지는 짧은 틸 선
   .fs-nose-head 안의 h2 6개가 대상. 좌정렬 4개 / .fs-center 2개.
   ========================================================================== */

.fs-p-53 .fs-nose-head h2 { position: relative; }

.fs-p-53 .fs-nose-head h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform-origin: left center;
  /* ★ 기본을 「그어진 상태」로 둔다. fs.js 는 첫 화면 안에 있던 대상에는
     .fs-reveal 을 붙이지 않으므로 «.is-in 이면 보이기» 로 짜면 첫 화면
     제목의 선이 영원히 안 그어진다. 초기 은닉은 아래 :not(.is-in) 에만. */
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
/* 가운데 정렬 제목은 선도 가운데에서 좌우로 */
.fs-p-53 .fs-nose-head.fs-center h2::after {
  margin-inline: auto;
  transform-origin: center;
}
:root.fs-js .fs-p-53 .fs-reveal:not(.is-in) .fs-nose-head h2::after,
:root.fs-js .fs-p-53 .fs-nose-head.fs-reveal:not(.is-in) h2::after {
  transform: scaleX(0);
  /* ★ 은닉 쪽에는 트랜지션을 끊는다. fs.js 가 .fs-reveal 을 첫 페인트 뒤에
     붙이면 1→0 이 «그어졌다 지워지는» 역재생으로 보이기 때문이다.
     .is-in 이 붙는 순간 이 규칙이 빠지면서 위의 트랜지션이 0→1 을 그린다. */
  transition: none;
}

/* ==========================================================================
   E. 크림 밴드 위 흰 카드 → 세로 헤어라인 4열   [#feature]
   ★ 근거 정정(감사 실측) — 「흰 상자가 크림 밴드 위에서 안 보인다」는 과장이었다.
   백업 CSS 를 물린 수정 전 렌더에서 #FFF 카드와 #F6F1EC 밴드 경계는 또렷이 읽힌다.
   진짜 근거는 이것이다: 1024px 에서 POINT 02 캡션이 3줄로 접혀 그 카드만 길어지고
   .fs-card--square 정사각이 무너진다. 상자를 지우고 세로선만 남기면 카드 폭이
   328 → 343px 로 늘어 캡션이 2줄로 정리되고 네 칸 높이가 같아진다. 그림자는 쓰지 않는다.
   ========================================================================== */

@media (min-width: 1024px) {
  .fs-p-53 .fs-nose-cards { gap: 0; }
  .fs-p-53 .fs-nose-cards > li { position: relative; }
  .fs-p-53 .fs-nose-cards > li + li::before {
    content: "";
    position: absolute;
    inset-block: clamp(20px, 1.6vw, 34px);
    inset-inline-start: 0;
    width: 1px;
    background: var(--fs-line-input);
  }
  .fs-p-53 .fs-nose-point {
    background: transparent;
    padding-inline: clamp(20px, 1.6vw, 34px);
  }

  /* ★ 상자를 지웠으면 틸트도 같이 꺼야 한다.
     li 에 data-fs-tilt-gloss 가 붙어 있어 PC 호버에서 fs.js 가
     .fs-tilt__gloss 를 주입하고 fs.css 가 rgba(255,255,255,.55) 를 칠한다.
     담을 흰 상자가 없어진 지금은 그 광택이 크림 밴드 위 «흰 얼룩» 이 되고
     옆 칸 헤어라인까지 씻어낸다. 3D 회전도 프레임 없는 글자를 통째로 기울여
     지우려던 유령 상자가 호버 때만 되돌아온다. */
  .fs-p-53 .fs-nose-point .fs-tilt__gloss { opacity: 0 !important; }
  .fs-p-53 .fs-nose-cards > li.fs-tilt .fs-tilt__inner { transform: none; }
}

/* ==========================================================================
   F. 다크 밴드 #tx — 두 열을 하나의 판으로 결속
   실측 [669/669] 에 거터가 33.8px 뿐이라 왼쪽 타일의 설명문 끝(x703)과
   오른쪽 타일의 틸 룰 시작(x737) 이 34px 만에 맞붙는다. 네 타일이
   «2×2 표» 가 아니라 «떠 있는 네 조각» 으로 읽히는 원인이다.
   거터를 벌리고 그 한가운데에 가는 세로선을 넣어 열을 묶는다.
   겹침(음수 마진)은 쓰지 않는다 — 라벨바가 붙은 도해를 먹는다.
   ========================================================================== */

@media (min-width: 1024px) {
  .fs-p-53 .fs-short-tx {
    column-gap: clamp(48px, 3.4vw, 72px);
    row-gap: clamp(44px, 3.2vw, 64px);
  }
  .fs-p-53 .fs-short-tx__tile { position: relative; }
  .fs-p-53 .fs-short-tx__tile:nth-child(even)::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(clamp(48px, 3.4vw, 72px) / -2);
    width: 1px;
    background: var(--fs-arrow-soft);
  }
}

/* ==========================================================================
   G. reduced-motion — 새로 넣은 선 애니메이션만 정지
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fs-p-53 .fs-nose-head h2::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/767px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-53-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · HTML: 수술대상 제목 nbsp 2(「보이는 경우」 — 제목이 부제와 한 줄로 이어지는 inline 이라 balance 가 안 먹는다, 360 「… 보이는 / 경우」). balance(전 폭): 정의 리드·본문 · 수술대상 제목 · 수술방법 설명 · 약속 카드 제목 · 주의문
     (360 「… 보이는 / 경우」「… 코 / 끝도 들려보이는데」「… 맞춤 / 수술을 시행합니다.」).
   · 배치 무변경 — 정의 도해 3장(얼굴 비율선)은 축소하면 선이 안 읽힌다(§4-4), POINT 4장은 정사각 카드라 2열이면 155px 칸에 내용이 안 든다.
   ========================================================================== */
.fs-p-53 .fs-nose-lead,
.fs-p-53 #about .fs-body,
.fs-p-53 .fs-card__title,
.fs-p-53 .fs-short-tx__desc,
.fs-p-53 .fs-short-promise__note { text-wrap: balance; }