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

   전용 컴포넌트
     .fs-cn-hero   흰 배경 도해 스플릿 히어로 (좌 카피 / 우 4유형 2×2 프리뷰)
     .fs-cn-axis   휜코 4유형 판별 축선 스트립 ★ 시그니처
     .fs-cn-type   4유형 판별 탭 카드 (라디오 라벨 + 도해 + 라벨바)
     .fs-cn-tx     수술방법 3분할 도해 카드 (2~3컷 시퀀스 + 원형 커넥터)
     .fs-cn-spec   수술정보 표 (행 머리에 아이콘)
     .fs-cn-who    수술대상 (좌 모델 / 우 아이콘 체크 카드)
     .fs-cn-feat   포시즌 휜코 특징 룰 카드 (.fs-card--rule 확장 + 아이콘)
     .fs-cn-promise 대형 인용 약속 블록

   상태 배선 : <main> 직계 자식인 라디오 4개(.fs-cn-pick)를 형제 결합자로 읽어
               #type 의 탭과 #tx 의 술식 카드를 동시에 물린다. JS 없음.
   ========================================================================== */

/* --- 공통 -------------------------------------------------------------- */
.fs-p-55 .fs-cn-fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--fs-white);
}
.fs-p-55 .fs-cn-fig > img {
  justify-self: center;
  align-self: end;
  width: 100%;
  height: auto;
}

/* --- A01 · 도해 스플릿 히어로 -------------------------------------------
   사진이 없는 히어로라 .fs-hero 기본값(타우프 배경 + 흰 글자)을 되돌린다. */
.fs-p-55 .fs-cn-hero {
  background: var(--fs-white);
  color: var(--fs-ink);
  min-height: clamp(340px, 313.3px + 7.4vw, 456px);
  padding-block: var(--fs-sp-9) var(--fs-sp-10);
}
.fs-p-55 .fs-cn-hero__grid {
  display: grid;
  gap: var(--fs-sp-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.fs-p-55 .fs-cn-hero__copy {
  justify-items: start;
  text-align: start;
  gap: var(--fs-sp-4);
}
.fs-p-55 .fs-cn-hero .fs-hero__kicker { color: var(--fs-teal-dk); font-weight: 600; }
.fs-p-55 .fs-cn-hero .fs-hero__title { color: var(--fs-ink); line-height: 1.3; }
.fs-p-55 .fs-cn-hero__rule {
  display: block;
  width: clamp(56px, 47.7px + 2.3vw, 92px);
  height: 3px;
  background: var(--fs-teal);
}
.fs-p-55 .fs-cn-hero__sub { color: var(--fs-teal-dk); font-weight: 600; }
.fs-p-55 .fs-cn-hero__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 5.2px + 0.78vw, 20px);
}
/* ★ LOCK 2 — 폭을 img 가 아니라 figure 에 준다.
   img 에만 주면 figcaption(라벨바)이 그리드 칸을 꽉 채워 도해보다 넓어진다
   (실측 1920: 도해 190px / 바 340.5px · 360: 78px / 156px). */
.fs-p-55 .fs-cn-hero__tiles .fs-cn-fig {
  width: min(100%, 254px);          /* 254 = 원본 도해 폭. 그 이상은 확대다 */
  margin-inline: auto;
}
.fs-p-55 .fs-cn-hero__tiles .fs-labelbar {
  min-height: clamp(26px, 23.7px + 0.64vw, 36px);
  font-size: clamp(12px, 11.31px + 0.192vw, 15px);   /* 360 에서 11px 로 떨어졌다 */
  padding-inline: var(--fs-sp-1);
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .fs-p-55 .fs-cn-hero__grid {
    grid-template-columns: minmax(0, 640fr) minmax(0, 660fr);
    column-gap: clamp(32px, 4.6px + 2.85vw, 80px);
  }
}

/* --- ★ 시그니처 · 휜코 4유형 판별 축선 스트립 ---------------------------
   원본 도해에 그려진 코 중심축(검은 곡선)만 뽑아 틸로 다시 그린 글리프.
   점선은 곧은 기준축이다. 4칸이 곧 #type 탭의 미리보기다. */
.fs-p-55 .fs-cn-axis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 3.2px + 0.78vw, 18px);
  margin-block-start: var(--fs-gap-title);
  border-block: 1px solid var(--fs-line);
  padding-block: var(--fs-sp-5);
}
.fs-p-55 .fs-cn-axis__cell {
  display: grid;
  justify-items: center;
  gap: var(--fs-sp-2);
  padding-block-end: var(--fs-sp-2);
  border-block-end: 3px solid transparent;
}
.fs-p-55 .fs-cn-axis__cell img {
  width: clamp(44px, 30.7px + 3.7vw, 100px);
  height: auto;
  opacity: .45;
  transition: opacity var(--fs-dur) var(--fs-ease);
}
.fs-p-55 .fs-cn-axis__name {
  font-size: clamp(12px, 11.31px + 0.192vw, 15px);   /* 360 에서 11px 로 떨어졌다 */
  font-weight: 600;
  color: var(--fs-muted);
  text-align: center;
  line-height: 1.3;
}
.fs-p-55 .fs-cn-axis__hint {
  margin-block-start: var(--fs-sp-3);
  color: var(--fs-muted);
}

/* --- A06 · 4유형 판별 탭 카드 ------------------------------------------ */
.fs-p-55 .fs-cn-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-sp-9);
}
@media (min-width: 1024px) {
  .fs-p-55 .fs-cn-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fs-p-55 .fs-cn-type {
  display: grid;
  align-content: start;
  background: var(--fs-white);
  border: 2px solid var(--fs-white);
  padding: var(--fs-sp-3);
  transition: border-color var(--fs-dur) var(--fs-ease);
}
.fs-p-55 .fs-cn-type__label {
  display: grid;
  gap: var(--fs-sp-2);
  cursor: pointer;
}
/* ★ LOCK 2 — 위와 같은 이유. 실측 1920: 도해 234px / 바 321px */
.fs-p-55 .fs-cn-type__fig {
  width: min(100%, 254px);
  margin-inline: auto;
}
.fs-p-55 .fs-cn-type__cta { display: grid; padding-block-start: var(--fs-sp-1); }
.fs-p-55 .fs-cn-type__cta > span {
  grid-area: 1 / 1;
  text-align: center;
  font-size: var(--fs-t-sm);
  font-weight: 600;
  padding-block: var(--fs-sp-2);
  line-height: 1.3;
}
.fs-p-55 .fs-cn-type__cta-off { color: var(--fs-muted); }
.fs-p-55 .fs-cn-type__cta-on { color: var(--fs-teal-dk); visibility: hidden; }

/* --- A21 · 수술정보 표 -------------------------------------------------- */
.fs-p-55 .fs-cn-spec .fs-table th[scope="row"] {
  width: 42%;
  white-space: nowrap;
}
.fs-p-55 .fs-cn-spec__key {
  display: flex;
  align-items: center;
  gap: var(--fs-sp-4);
  font-weight: 700;
}
.fs-p-55 .fs-cn-spec__key img {
  flex: 0 0 auto;
  width: clamp(30px, 26.5px + 0.96vw, 44px);
  height: auto;
}
.fs-p-55 .fs-cn-spec .fs-table td { font-weight: 600; }

/* --- A23 · 수술대상 ----------------------------------------------------- */
.fs-p-55 .fs-cn-who__grid {
  display: grid;
  gap: var(--fs-gap-col);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1024px) {
  .fs-p-55 .fs-cn-who__grid {
    grid-template-columns: minmax(0, 500fr) minmax(0, 840fr);
    column-gap: clamp(32px, 4.6px + 2.85vw, 80px);
    align-items: stretch;
  }
  .fs-p-55 .fs-cn-who__list { align-content: space-between; }
}
.fs-p-55 .fs-cn-who__photo img { width: 100%; height: auto; display: block; }
.fs-p-55 .fs-cn-who__list { display: grid; gap: var(--fs-sp-5); }
.fs-p-55 .fs-cn-who__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--fs-sp-5);
  border-block-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-5) var(--fs-sp-4);
  background: var(--fs-white);
}
.fs-p-55 .fs-cn-who__ill {
  width: clamp(58px, 49.6px + 2.3vw, 94px);
  height: auto;
}
.fs-p-55 .fs-cn-who__txt { display: grid; gap: 2px; }
.fs-p-55 .fs-cn-who__no {
  font-size: var(--fs-t-sm);
  font-weight: 700;
  color: var(--fs-teal-dk);
  letter-spacing: var(--fs-ls-wide);
}
.fs-p-55 .fs-cn-who__line { font-size: var(--fs-t-lead); line-height: 1.45; }
.fs-p-55 .fs-cn-who__line strong { font-weight: 700; }

/* --- A11 · 수술방법 3분할 도해 카드 -------------------------------------
   fs.css 의 .fs-nose-dz__cards 는 모든 폭에서 3열 고정이라 텍스트가 든 카드는
   좁은 폭에서 두 글자씩 쪼개진다. 여기서는 자체 그리드를 쓴다. */
.fs-p-55 .fs-cn-tx__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-gap-card);
  align-items: stretch;             /* 흰 상자 3장의 바닥을 맞춘다 */
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 1024px) {
  .fs-p-55 .fs-cn-tx__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 2컷 카드는 3컷 카드보다 도해를 크게 잡아 열끼리 무게를 맞춘다 */
.fs-p-55 .fs-cn-tx__item--bone-mild .fs-cn-tx__fig { max-width: 210px; }
.fs-p-55 .fs-cn-tx__item {
  display: grid;
  align-content: start;
  gap: var(--fs-sp-5);
  padding: var(--fs-sp-6) var(--fs-sp-5) var(--fs-sp-6);
  border-block-start: 3px solid var(--fs-line);
  transition: border-color var(--fs-dur) var(--fs-ease);
}
.fs-p-55 .fs-cn-tx__head {
  display: flex;
  align-items: center;
  gap: var(--fs-sp-4);
  flex-wrap: wrap;
}
.fs-p-55 .fs-cn-tx__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: 1.25; }
.fs-p-55 .fs-cn-tx__seq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  column-gap: var(--fs-sp-2);
  row-gap: var(--fs-sp-3);
}
.fs-p-55 .fs-cn-tx__fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
}
.fs-p-55 .fs-cn-tx__fig > img { width: 100%; height: auto; display: block; }
.fs-p-55 .fs-cn-tx__fig .fs-labelbar {
  min-height: clamp(26px, 23.7px + 0.64vw, 34px);
  font-size: clamp(12px, 11.31px + 0.192vw, 15px);   /* 〃 */
}
.fs-p-55 .fs-cn-tx__fig--lead {
  grid-column: 1 / -1;
  width: min(62%, 240px);
}
.fs-p-55 .fs-cn-tx__arrow { align-self: center; margin-block-start: -12%; }
.fs-p-55 .fs-cn-tx__arrow--down { grid-column: 1 / -1; margin-block-start: 0; }
.fs-p-55 .fs-cn-tx__arrow--down svg { transform: rotate(90deg); }
.fs-p-55 .fs-cn-tx__desc { color: var(--fs-muted); }
.fs-p-55 .fs-cn-tx__state {
  justify-self: start;
  visibility: hidden;
}

/* --- 상태 배선 : 라디오 4개 → 탭 카드 + 술식 카드 ------------------------
   #cn-normal 은 대응 술식이 없다(교정 대상이 아닌 기준 형태). */
.fs-p-55 main:has(#cn-normal:checked) #type .fs-cn-type--normal,
.fs-p-55 main:has(#cn-c:checked) #type .fs-cn-type--c,
.fs-p-55 main:has(#cn-s:checked) #type .fs-cn-type--s,
.fs-p-55 main:has(#cn-oblique:checked) #type .fs-cn-type--oblique { border-color: var(--fs-teal-dk); }

.fs-p-55 main:has(#cn-normal:checked) #type .fs-cn-type--normal  .fs-cn-type__cta-on,
.fs-p-55 main:has(#cn-c:checked) #type .fs-cn-type--c       .fs-cn-type__cta-on,
.fs-p-55 main:has(#cn-s:checked) #type .fs-cn-type--s       .fs-cn-type__cta-on,
.fs-p-55 main:has(#cn-oblique:checked) #type .fs-cn-type--oblique .fs-cn-type__cta-on { visibility: visible; }
.fs-p-55 main:has(#cn-normal:checked) #type .fs-cn-type--normal  .fs-cn-type__cta-off,
.fs-p-55 main:has(#cn-c:checked) #type .fs-cn-type--c       .fs-cn-type__cta-off,
.fs-p-55 main:has(#cn-s:checked) #type .fs-cn-type--s       .fs-cn-type__cta-off,
.fs-p-55 main:has(#cn-oblique:checked) #type .fs-cn-type--oblique .fs-cn-type__cta-off { visibility: hidden; }

.fs-p-55 main:has(#cn-normal:checked) #type .fs-cn-axis__cell--normal,
.fs-p-55 main:has(#cn-c:checked) #type .fs-cn-axis__cell--c,
.fs-p-55 main:has(#cn-s:checked) #type .fs-cn-axis__cell--s,
.fs-p-55 main:has(#cn-oblique:checked) #type .fs-cn-axis__cell--oblique { border-block-end-color: var(--fs-teal-dk); }

.fs-p-55 main:has(#cn-normal:checked) #type .fs-cn-axis__cell--normal  img,
.fs-p-55 main:has(#cn-c:checked) #type .fs-cn-axis__cell--c       img,
.fs-p-55 main:has(#cn-s:checked) #type .fs-cn-axis__cell--s       img,
.fs-p-55 main:has(#cn-oblique:checked) #type .fs-cn-axis__cell--oblique img { opacity: 1; }

.fs-p-55 main:has(#cn-normal:checked) #type .fs-cn-axis__cell--normal  .fs-cn-axis__name,
.fs-p-55 main:has(#cn-c:checked) #type .fs-cn-axis__cell--c       .fs-cn-axis__name,
.fs-p-55 main:has(#cn-s:checked) #type .fs-cn-axis__cell--s       .fs-cn-axis__name,
.fs-p-55 main:has(#cn-oblique:checked) #type .fs-cn-axis__cell--oblique .fs-cn-axis__name { color: var(--fs-teal-dk); }

/* C형·S형 → 03 비중격 연골이 휜 경우 / 사형 → 01·02 코뼈가 휜 경우 */
.fs-p-55 main:has(#cn-c:checked) #tx .fs-cn-tx__item--septum,
.fs-p-55 main:has(#cn-s:checked) #tx .fs-cn-tx__item--septum,
.fs-p-55 main:has(#cn-oblique:checked) #tx .fs-cn-tx__item--bone-mild,
.fs-p-55 main:has(#cn-oblique:checked) #tx .fs-cn-tx__item--bone-severe { border-block-start-color: var(--fs-teal-dk); }

.fs-p-55 main:has(#cn-c:checked) #tx .fs-cn-tx__item--septum      .fs-cn-tx__state,
.fs-p-55 main:has(#cn-s:checked) #tx .fs-cn-tx__item--septum      .fs-cn-tx__state,
.fs-p-55 main:has(#cn-oblique:checked) #tx .fs-cn-tx__item--bone-mild   .fs-cn-tx__state,
.fs-p-55 main:has(#cn-oblique:checked) #tx .fs-cn-tx__item--bone-severe .fs-cn-tx__state { visibility: visible; }

/* 키보드 포커스가 보이도록 — 라디오는 화면 밖이라 라벨이 대신 받는다 */
.fs-p-55 #cn-normal:focus-visible  ~ #type .fs-cn-type--normal,
.fs-p-55 #cn-c:focus-visible       ~ #type .fs-cn-type--c,
.fs-p-55 #cn-s:focus-visible       ~ #type .fs-cn-type--s,
.fs-p-55 #cn-oblique:focus-visible ~ #type .fs-cn-type--oblique {
  outline: 3px solid var(--fs-teal-dk);
  outline-offset: 2px;
}

/* --- A07 · 포시즌 휜코 특징 룰 카드 ------------------------------------- */
.fs-p-55 .fs-cn-feat {
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-55 .fs-cn-feat__card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--fs-sp-5);
  row-gap: var(--fs-sp-3);
  border-block-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-5);
  background: var(--fs-white);
}
.fs-p-55 .fs-cn-feat__ill { width: clamp(64px, 55.6px + 2.3vw, 100px); height: auto; }
.fs-p-55 .fs-cn-feat__no {
  font-size: clamp(20px, 18.8px + 0.321vw, 25px);
  font-weight: 700;
  color: var(--fs-teal-dk);        /* 흰 면 위 --fs-teal 은 2.28:1 (LOCK 3-b) */
}
.fs-p-55 .fs-cn-feat__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: 1.3; }
@media (min-width: 768px) {
  .fs-p-55 .fs-cn-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-p-55 .fs-cn-feat__card {
    border-block-start: 0;
    border-inline-start: 2px solid var(--fs-teal);
    padding-block: var(--fs-sp-6);
  }
}

/* --- A05 · 대형 인용 약속 블록 ------------------------------------------ */
.fs-p-55 .fs-cn-promise {
  max-width: 1020px;
  margin-inline: auto;
  text-align: center;
}
.fs-p-55 .fs-cn-promise__kicker {
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-kicker);
  font-weight: 700;
  letter-spacing: var(--fs-ls-wide);
  color: var(--fs-teal-dk);
}
.fs-p-55 .fs-cn-promise__title { margin-block-start: var(--fs-sp-3); }
.fs-p-55 .fs-cn-promise__rule {
  display: block;
  width: 92px;
  height: 3px;
  background: var(--fs-teal);
  margin: var(--fs-sp-6) auto 0;
}
.fs-p-55 .fs-cn-promise__list {
  display: grid;
  gap: var(--fs-sp-4);
  margin-block-start: var(--fs-sp-8);
  text-align: start;
  justify-items: start;
  justify-content: center;
}
.fs-p-55 .fs-cn-promise__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--fs-sp-4);
  align-items: baseline;
}
.fs-p-55 .fs-cn-promise__no {
  font-size: var(--fs-t-lead);
  font-weight: 700;
  color: var(--fs-teal-dk);
  white-space: nowrap;
}
.fs-p-55 .fs-cn-promise__txt { font-size: var(--fs-t-lead); line-height: 1.6; }
.fs-p-55 .fs-cn-promise__note {
  margin-block-start: var(--fs-sp-9);
  padding: var(--fs-sp-5) var(--fs-sp-5);
  background: var(--fs-teal-dk);
  color: var(--fs-white);
  font-size: var(--fs-t-sm);
  font-weight: 600;
}

/* --- A05 · 약속 블록 = 이 페이지의 «유일한» 다크 밴드  [LOCK 5] ----------
   전제: index.html 의 #promise 가 `fs-section--ink2 fs-section--flush` 다.
   시술 상세 페이지는 다크 밴드가 필수인데(적용 범위 행렬) 이 페이지는 0개였다.
   여기를 고른 이유 두 가지 —
     ① 대제목이 `.fs-h2` 가 아니라 `.fs-display` 라 LOCK 7(d) 판정 대상 밖이다.
        (57 의 `.fs-nose-compare-title` · 91 의 `.about-system__title` 과 같은 자리)
        `.fs-h2` 섹션을 다크로 올리면 「제목 color === rgb(17,17,17)」 조항을 반드시 어긴다.
     ② 이미 A09 스테이트먼트 형태(킥커 + 대제목 + 선언문 5줄)라 새 카피가 필요 없다.
   밴드 안 강조는 91 방식(네온 글자)을 쓴다. `--fs-teal #49BCBD` 는 쓰지 않는다
   — LOCK 5 가 다크 밴드 안 rgb(73,188,189) 글자를 FAIL 로 규정한다. 선은 장식이라 예외. */
.fs-p-55 .fs-cn-promise {
  padding-block: var(--fs-sec-pt) var(--fs-sec-pb);   /* --flush 로 죽은 섹션 패딩을 되살린다 */
}
.fs-p-55 #promise .fs-cn-promise__kicker { color: var(--fs-teal-neon); }
.fs-p-55 #promise .fs-cn-promise__title { color: var(--fs-on-dark); }
/* fs.css AA 보정이 .fs-teal-fg 를 #00787F 로 덮는다 — 다크 위 2.07:1 이라 다시 올린다 */
.fs-p-55 #promise .fs-cn-promise__title .fs-teal-fg { color: var(--fs-teal-neon); }
.fs-p-55 #promise .fs-cn-promise__no { color: var(--fs-teal-neon); }
/* 채운 틸 상자는 다크 밴드 위에서 «어두운 면 위의 어두운 면» 이 된다. 선으로 바꾼다 */
.fs-p-55 #promise .fs-cn-promise__note {
  background: transparent;
  border: 1px solid var(--fs-teal);
  color: var(--fs-on-dark);
}

/* --- A03 · 휜코란? 좌 도해 / 우 본문 ------------------------------------ */
.fs-p-55 .fs-cn-def__figs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  column-gap: var(--fs-sp-3);
}
.fs-p-55 .fs-cn-def__fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; }
.fs-p-55 .fs-cn-def__fig > img { width: 100%; height: auto; display: block; }
.fs-p-55 .fs-cn-def__arrow { align-self: center; margin-block-start: -14%; }
.fs-p-55 .fs-cn-def__caption {
  margin-block-start: var(--fs-sp-5);
  color: var(--fs-muted);
  font-size: var(--fs-t-sm);
  text-align: center;
}
.fs-p-55 .fs-cn-def__body { margin-block-start: var(--fs-sp-5); }
.fs-p-55 .fs-cn-def__quote { color: var(--fs-teal-dk); }


/* ==========================================================================
   마이크로 인터랙션 — 48 에서 검증된 두 가지만 얹는다
   ========================================================================== */

/* B. 제목 뒤 70px 틸 선 (delay .5s)
   ★ 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다 —
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉을 건다.
   ★ 전제: index.html 의 #type·#spec·#who·#tx·#feature 는 .fs-nose-head 에,
     #about 은 조상 div 에 data-fs-reveal 이 걸려 있다. 그 속성을 지우면 이 선이 죽는다.
   가운데 정렬인 #promise 의 대제목에는 걸지 않는다(왼쪽 정렬 선이 어긋나 보인다). */
.fs-p-55 .fs-nose-head h2 { position: relative; }
.fs-p-55 .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;
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-55 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-55 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* D. 호버 — 프레임은 고정, 사진만 움직인다. 그림자는 쓰지 않는다.
   수술대상 인물컷은 원래 data-fs-tilt 였는데 라벨바가 tilt-inner 밖이라
   사진만 3D 로 돌고 틸 바가 제자리에 남았다(호버에서만 LOCK 2 가 깨진다).
   틸트를 걷어내고 48 에서 검증된 프레임 고정 + scale 로 바꿨다. */
.fs-p-55 .fs-cn-who__photo .fs-doctor__frame { overflow: hidden; }
.fs-p-55 .fs-cn-who__photo img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
.fs-p-55 .fs-cn-who__photo .fs-labelbar { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .fs-p-55 .fs-cn-who__photo:hover img { transform: scale(1.045); }
  /* 유형 탭은 누를 수 있는 라벨인데 호버 피드백이 하나도 없었다 */
  .fs-p-55 .fs-cn-type:hover { border-color: var(--fs-line); }
  .fs-p-55 .fs-cn-type:hover .fs-cn-type__cta-off { color: var(--fs-teal-dk); }
  /* 선택 상태는 ID 선택자(#cn-*:checked)라 명시도가 높아 호버가 덮지 못한다 */
}

/* --- 모션 무효화 -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-55 .fs-cn-type,
  .fs-p-55 .fs-cn-tx__item,
  .fs-p-55 .fs-cn-axis__cell img,
  .fs-p-55 .fs-cn-who__photo img { transition: none !important; }
  .fs-p-55 .fs-nose-head h2::after { transition: none !important; transform: scaleX(1) !important; }
  .fs-p-55 .fs-cn-who__photo:hover img { transform: none; }
}

/* ==========================================================================
   55 개편 (2026-08-28 승인자 지시)
   ========================================================================== */

/* --- ① 히어로 → 1mm 결 -----------------------------------------------------
   전: 크림 밴드에 좌 카피 / 우 유형 타일 4장. 사진이 없었다(52·56 과 같은 경우).
   ★ <img> 로 넣으면 alt 이 새 문구라 R1 에 걸린다 → CSS background (마크업 변경 0).
   ★ 타일이 사진 위 우측에 놓이면 얼굴을 덮는다(52 에서 겪은 것) → 카피·타일을 왼쪽 한 축으로. */
.fs-p-55 .fs-cn-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(246,241,236,.92) 0%, rgba(246,241,236,.84) 26%,
      rgba(246,241,236,.58) 42%, rgba(246,241,236,.24) 58%,
      rgba(246,241,236,0)   78%),
    url("/draft1_builder/assets/crooked-nose/hero.jpg?v=7e74dae8") 72% 26% / cover no-repeat,
    var(--fs-cream);
  color: var(--fs-ink);
  min-height: clamp(520px, 380px + 12vw, 720px);
  padding-block: clamp(96px, 60px + 4vw, 150px) clamp(64px, 40px + 3vw, 110px);
  display: grid;
  align-items: center;
}
.fs-p-55 .fs-cn-hero .fs-hero__kicker { color: var(--fs-teal-dk); font-weight: 700; }
.fs-p-55 .fs-cn-hero .fs-hero__title {
  color: var(--fs-ink);
  font-size: clamp(28px, 19px + 1.8vw, 50px);
  line-height: 1.12;
}
@media (min-width: 1024px) {
  .fs-p-55 .fs-cn-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 56%);
    gap: clamp(20px, 14px + 0.9vw, 34px);
  }
}
@media (max-width: 599px) {
  .fs-p-55 .fs-cn-hero {
    align-items: start;
    min-height: clamp(560px, 440px + 26vw, 700px);
    background:
      linear-gradient(180deg,
        rgba(246,241,236,.93) 0%, rgba(246,241,236,.80) 30%,
        rgba(246,241,236,.28) 52%, rgba(246,241,236,0) 70%),
      url("/draft1_builder/assets/crooked-nose/hero-mo.jpg?v=0467d065") center 28% / cover no-repeat,
      var(--fs-cream);
  }
}
.fs-p-55 .fs-header--overlay { color: var(--fs-ink); background: transparent; }
.fs-p-55 .fs-header--overlay::before {
  background: linear-gradient(180deg, rgba(246,241,236,.84) 0%, rgba(246,241,236,.46) 55%, rgba(246,241,236,0) 100%);
}
.fs-p-55 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-55 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }

/* --- ② 축 도해 스트립 제거 -------------------------------------------------
   「이미 밑에 그걸 표현해주는 이미지가 있는데?」 — 맞다. .fs-cn-axis 의 4장은
   바로 아래 유형 카드(type-normal/c/s/oblique)와 같은 것을 선으로 한 번 더 보여준다.
   ★ DOM 에서 지우지 않는다 — 축 이름·힌트가 심의 문구다. */
.fs-p-55 .fs-cn-axis { display: none; }

/* --- ③ 유형 선택 → 수술방법으로 이동 ---------------------------------------
   라디오를 #tx 안으로 옮겼다(HTML). 라벨을 누르면 포커스가 그 라디오로 가고
   브라우저가 «거기로» 스크롤한다 — JS 없이 이동이 된다.
   오버레이 헤더에 가리지 않도록 여백을 준다. */
.fs-p-55 .fs-cn-pick { scroll-margin-block-start: calc(var(--fs-header-h) + clamp(24px, 16px + 1vw, 48px)); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- ④ 수술정보 표 가운데 정렬 ---------------------------------------------
   ★ 머리와 몸통을 같이 옮겨야 어긋나지 않는다. */
.fs-p-55 .fs-cn-spec .fs-table thead th,
.fs-p-55 .fs-cn-spec .fs-table th[scope="row"],
.fs-p-55 .fs-cn-spec .fs-table td { text-align: center; }
.fs-p-55 .fs-cn-spec .fs-table th[scope="row"] { justify-content: center; }

/* --- ⑤ #tx 레이아웃 개편 (2026-08-28 승인자 지시) --------------------------
   전: 3열 균등 그리드. 실제 결함 —
     ① 카드마다 시퀀스 행 수가 다르다(01 은 1행, 02·03 은 2행) → 1열이 크게 빈다
     ② 열이 좁아 도해가 작고, 「선택한 유형의 수술방법」 필이 바닥에 떠 있었다
   후: 행 기반 — 좌 = 번호·제목·설명·상태 / 우 = 도해 시퀀스.
       카드마다 높이가 달라도 어긋나지 않고, 도해가 넓어진다.
       .fs-cn-tx__item 의 3px 상단선이 그대로 행 구분선이 된다.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .fs-p-55 .fs-cn-tx__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .fs-p-55 .fs-cn-tx__item {
    grid-template-columns: minmax(0, 460fr) minmax(0, 880fr);
    /* 도해가 3행을 통째로 늘려 좌측의 제목·설명이 벌어졌다.
       앞 두 행을 내용 크기로 고정하고 남는 높이를 3행이 먹게 한다. */
    grid-template-rows: auto auto 1fr;
    column-gap: var(--fs-gap-col);
    row-gap: var(--fs-sp-4);
    align-content: center;
    align-items: start;
    padding: clamp(34px, 26px + 1.2vw, 58px) 0;
  }
  .fs-p-55 .fs-cn-tx__head  { grid-column: 1; grid-row: 1; }
  .fs-p-55 .fs-cn-tx__desc  { grid-column: 1; grid-row: 2; }
  .fs-p-55 .fs-cn-tx__state { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; }
  .fs-p-55 .fs-cn-tx__seq   { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  /* 열이 넓어졌으니 도해도 키운다 — 3열 시절의 210px 상한을 푼다 */
  .fs-p-55 .fs-cn-tx__item--bone-mild .fs-cn-tx__fig { max-width: 300px; }
  .fs-p-55 .fs-cn-tx__fig { max-width: 320px; }
}

/* 히어로 타일 — 좌측 56% 안에서 2×2 로 접혀 히어로가 과하게 길어졌다.
   한 줄 4칸으로 조여 «미리보기» 크기로 되돌린다. */
@media (min-width: 1024px) {
  .fs-p-55 .fs-cn-hero__tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 5px + 0.5vw, 14px);
  }
  .fs-p-55 .fs-cn-hero__ill { width: 100%; height: auto; }
  .fs-p-55 .fs-cn-hero__tiles .fs-labelbar {
    min-height: clamp(24px, 21px + 0.5vw, 32px);
    font-size: clamp(10px, 9px + 0.25vw, 13px);
    padding-inline: 4px;
  }
}

/* --- ⑥ 약속 섹션 틸 글자 차분하게 (2026-08-28 승인자 지시) ------------------
   전: --fs-teal(#49BCBD)이 다크 밴드 위에서 전기적인 시안으로 튀었다.
       특히 「하나·두울·세엣…」 다섯 줄이 반복돼 파란 노이즈로 읽혔다.
   ★ 더 어두운 틸 토큰은 이 밴드에서 AA 를 못 넘는다 —
     --fs-teal-btn-aa 2.41:1 · --fs-teal-dk 1.57:1 (--fs-teal 은 4.77:1).
   ★ 진짜 주범은 --fs-teal-neon(#13F2E6) 이었다. 이 페이지 CSS 가 430·433·434 행에서
     킥커·제목·번호에 네온을 직접 쓰고 있었다. 「파란색」으로 읽힌 이유다.
   → 새 hex 를 만들지 않고 **기존 토큰 둘을 섞어** 채도만 내린다.
     --fs-line(웜 라이트그레이)과 55:45 → rgb(144,205,203)
     채도 47% → 38% · 대비 4.77 → 6.10:1 (둘 다 개선된다)
   color-mix 미지원 브라우저는 앞줄의 --fs-teal 로 폴백한다.
   ------------------------------------------------------------------------- */
.fs-p-55 #promise .fs-cn-promise__no,
.fs-p-55 #promise .fs-cn-promise__kicker,
.fs-p-55 #promise .fs-cn-promise__title .fs-teal-fg,
.fs-p-55 #promise .fs-teal-fg {
  color: var(--fs-teal);
  color: color-mix(in srgb, var(--fs-teal) 55%, var(--fs-line));
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px/767px/1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-55-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · nbsp 1(수술정보 수술시간 「~ 2시간」 — 360 「약 1시간30분 ~ / 2시간」). balance: 유형 안내 · 정의 인용·본문 · 수술방법 리드·설명 · 약속 문장 · 주의문 · 표 값.
   · 배치 무변경 — 유형 고르기 · 정의 도해는 이미 <600 2열, 수술대상은 아이콘 + 글 행이다.
   ========================================================================== */
.fs-p-55 .fs-cn-axis__hint,
.fs-p-55 .fs-cn-def__quote,
.fs-p-55 .fs-cn-def__body,
.fs-p-55 .fs-nose-lead,
.fs-p-55 .fs-cn-tx__desc,
.fs-p-55 .fs-cn-promise__txt,
.fs-p-55 .fs-cn-promise__note,
.fs-p-55 .fs-table td { text-wrap: balance; }