@charset "utf-8";
/* ==========================================================================
   fs.css — 포시즌성형외과 초안1 v2 공용 디자인 시스템
   목표 디자인 = PDF 시안 (comp-1..6). 모든 값은 _src/pick.py 실측 또는
   _src/spec-main.json / spec-about.json / spec-nose.json 실측값이다.
   레거시 assets/style.css 와 충돌하지 않도록 전 클래스에 fs- 접두사를 쓴다.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- 1.1 배경 서피스 (pick.py 실측) --------------------------------- */
  --fs-white:      #FFFFFF;   /* 기본 페이지 배경 (3개 시안 pageBg) */
  --fs-cream:      #F6F1EC;   /* 따뜻한 서피스 — 3개 시안 최빈 밴드 */
  --fs-cream-2:    #F9F6F2;   /* nose y4340 그라데이션 지점 */
  --fs-beige:      #F0E2D5;   /* main FS TV 밴드 y2485–3258 (모드값) */
  --fs-taupe:      #AFA79A;   /* main 히어로 y100–1079 */
  --fs-ink-band:   #111111;   /* about 다크 밴드 y3322–3925 */
  --fs-ink-band-2: #3C3D3F;   /* nose 다크 밴드 y2253–3409 */
  --fs-gray:       #F9F9F9;   /* 푸터 */
  --fs-step-bg:    #F3F3F3;   /* nose 스텝 원 2~5번 채움 */

  /* --- 1.2 텍스트 잉크 ------------------------------------------------ */
  --fs-ink:         #111111;  /* 본문 기본 (3개 시안 공통) */
  --fs-ink-soft:    #3F3F3F;
  --fs-muted:       #939393;  /* 부제·설명문 회색 */
  /* 2026-09-01: #7D7D7D 은 흰 위 4.12:1 · 크림 위 3.67:1 로 AA(4.5) 미달이었다.
     이 토큰이 «약관 본문» 말고도 부작용 고지 문구(53 .fs-muted-2 · 61 .fs-chin-note)와
     동의 상자 본문(.fs-policy)까지 물고 있어, 법적으로 가장 중요한 문장이 그 페이지에서
     가장 흐린 글자가 돼 있었다. 이미 팔레트에 있는 AA 안전 회색과 같은 값으로 올린다
     (--fs-pill-gray #6D6D6D · 흰 5.15:1 · 크림 4.59:1). 확정 시안 index·57·91 은
     이 토큰을 쓰지 않아 픽셀이 바뀌지 않는다. */
  --fs-muted-2:     #6D6D6D;  /* 약관 본문 · 고지 문구 (AA 보정) */
  --fs-placeholder: #A6A6A6;
  --fs-on-dark:     #FFFFFF;

  /* --- 1.3 액센트 (pick.py 실측 최빈값) -------------------------------- */
  /* 2026-09-11 색감 변경 — PPT「리뷰티 수정(병원소개)」2번: 「청록색 말고 #97796e 이런 색감으로 (전체적으로)」.
     토큰 이름(--fs-teal*)은 44장의 CSS 가 물고 있어 그대로 두고 값만 토프로 갈았다.
     #97796E 의 색상(H16°)을 고정하고 원래 토큰과 «같은 역할·같은 대비»가 되도록 명도만 옮긴 값이다.
     시안 청록 원값은 각 줄 뒤 주석. ★ 되돌리기: 아래 8개 토큰(+ --fs-dot-on · --fs-shadow-focus ·
     --fs-teal-text · --fs-teal-btn-aa · .fs-steps__link--active · 문서 끝 «색감 변경» 블록)을 원값으로. */
  --fs-teal:      #97796E;    /* 주 액센트 — 장식 선·테두리 (청록 #49BCBD · 흰 위 3.98) */
  --fs-teal-mid:  #97796E;    /* nose 치료 전 라벨바 (청록 #008E98) */
  --fs-teal-dk:   #6B564E;    /* 활성 도트·아이콘 선·강조 텍스트 (청록 #00646B · 흰 위 6.85) */
  --fs-teal-btn:  #97796E;    /* about 오시는길 좌측 버튼 (청록 #3AB8B7) */
  --fs-teal-neon: #E6B8A8;    /* 다크밴드 강조 글자 (청록 #13F2E6 · #111 위 10.6 · #3C3D3F 위 6.1) */
  --fs-teal-ink:  #57453F;    /* about 손그림 낙서 스트로크 (청록 #125551) */
  --fs-orange:    #E5533E;    /* about 오시는길 우측 버튼 */
  --fs-yellow:    #FFE626;    /* nose 채팅 말풍선 */
  --fs-gold:      #9B7843;    /* 로고 엠블럼 */
  --fs-red:       #F24747;    /* 폼 필수 표시 점 */

  /* --- 1.4 선·구분·컨트롤 --------------------------------------------- */
  --fs-line:         #EDEDED; /* 표 행 구분선 */
  --fs-line-input:   #E3D8CE; /* 폼 인풋 테두리 */
  --fs-line-control: #B8AB9D; /* 라디오·체크박스 테두리 */
  --fs-line-ink:     #111111; /* 버튼 아웃라인 */
  --fs-arrow-soft:   #767575; /* nose 캐러셀 화살표 원 선색 */
  --fs-fill-gray:    #777778; /* nose 비교표 좌열 배경 */
  --fs-pill-gray:    #6D6D6D; /* '일반 코성형' 필 */
  --fs-step-idle:    #C8C8C8; /* 스텝 2~5 필 */

  --fs-dot:        #CFCFCF;   /* 비활성 도트 (흰 배경) */
  --fs-dot-cream:  #C8C4C0;   /* 비활성 도트 (크림 배경) */
  --fs-dot-beige:  #C5B7AC;   /* 비활성 도트 (베이지 배경) */
  --fs-dot-on:     #6B564E;   /* 활성 도트 링 (청록 #00646B) */

  /* --- 1.5 폰트 스택 --------------------------------------------------- */
  --fs-font:    Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo",
                "Malgun Gothic", "맑은 고딕", sans-serif;
  --fs-font-en: "Montserrat", Pretendard, system-ui, sans-serif;
  --fs-font-gm: "GmarketSans", Pretendard, system-ui, sans-serif;

  /* --- 1.6 타이포 스케일 -----------------------------------------------
     clamp(모바일360 실측, 선형보간, PC1920 실측). 보간식 = MO + (PC-MO)/15.6 vw
     ------------------------------------------------------------------- */
  --fs-t-hero:      clamp(38px, 29.00px + 2.500vw, 77px); /* main 히어로 h1 38→77 */
  --fs-t-display:   clamp(28px, 20.62px + 2.051vw, 60px); /* nose 비교표 대제목 28→60 */
  --fs-t-mega:      clamp(27px, 19.85px + 1.987vw, 58px); /* about 다크밴드 27→58 */
  --fs-t-en:        clamp(33px, 29.77px + 0.897vw, 47px); /* about INTERIOR 영문 33→47 */
  --fs-t-num:       clamp(30px, 26.77px + 0.897vw, 44px); /* about core 번호 30→44 */
  --fs-t-h1:        clamp(24px, 20.31px + 1.026vw, 40px); /* 서브 히어로 h1 24→40 */
  --fs-t-h2:        clamp(28px, 25.23px + 0.769vw, 40px); /* 섹션 제목 28→40 (최빈) */
  --fs-t-tel:       clamp(23px, 19.54px + 0.962vw, 38px); /* 대표전화 23→38 */
  --fs-t-h3:        clamp(20px, 18.38px + 0.449vw, 27px); /* 카드 제목·의료진 이름 20→27 */
  --fs-t-quote:     clamp(21px, 20.08px + 0.256vw, 25px); /* nose 인트로 강조본문 21→25 (2026-09-21 +1) */
  --fs-t-kicker-lg: clamp(18px, 16.85px + 0.321vw, 23px); /* about 의료진/핵심 킥커 18→23 */
  --fs-t-lead:      clamp(19px, 18.54px + 0.128vw, 21px); /* nose 리드 본문 19→21 (2026-09-21 +1) */
  --fs-t-sub:       clamp(18px, 17.54px + 0.128vw, 20px); /* 섹션 부제 18→20 (2026-09-21 +1) */
  --fs-t-kicker:    clamp(16px, 15.54px + 0.128vw, 18px); /* 소형 킥커 16→18 (2026-09-21 +1) */
  --fs-t-body:      clamp(16px, 15.77px + 0.064vw, 17px); /* 본문 16→17 (최빈 · 2026-09-21 +1) */
  --fs-t-pill:      clamp(15px, 14.54px + 0.128vw, 17px); /* 필 라벨 15→17 (2026-09-21 +1) */
  --fs-t-sm:        clamp(15px, 14.77px + 0.064vw, 16px); /* 라벨·버튼 15→16 (2026-09-21 +1) */
  --fs-t-xs:        13px;                                  /* 약관·캡션 */
  --fs-t-footer:    14px;                                  /* 푸터 (PC/MO 동일 실측) */
  --fs-t-footer-lb: 13px;                                  /* 푸터 GUIDE/SOCIAL 라벨 */

  --fs-lh-tight: 1.15;
  --fs-lh-head:  1.25;
  --fs-lh-body:  1.5;   /* 16/24 · 20/30 실측 */
  --fs-lh-loose: 1.75;  /* 16/28 진료시간 */
  --fs-ls-tight: -0.025em;
  --fs-ls-wide:  0.06em;

  /* --- 1.7 간격 스케일 -------------------------------------------------- */
  --fs-sp-1:  4px;
  --fs-sp-2:  8px;
  --fs-sp-3:  10px;
  --fs-sp-4:  13px;
  --fs-sp-5:  20px;   /* 카드 gap — 3개 시안 최빈 */
  --fs-sp-6:  24px;
  --fs-sp-7:  30px;
  --fs-sp-8:  36px;
  --fs-sp-9:  40px;   /* 컬럼 gap — 3개 시안 최빈 */
  --fs-sp-10: 48px;
  --fs-sp-11: 56px;
  --fs-sp-12: 64px;
  --fs-sp-13: 80px;
  --fs-sp-14: 100px;
  --fs-sp-15: 130px;

  --fs-gap-card:  20px;                                    /* 카드 사이 (전 시안 20) */
  --fs-gap-col:   clamp(20px, 15.38px + 1.282vw, 40px);    /* 컬럼 사이 20→40 */
  --fs-gap-title: clamp(36px, 31.38px + 1.282vw, 56px);    /* 제목→본문 36→56 */
  --fs-sec-pt:    clamp(62px, 44.92px + 4.744vw, 136px);   /* 섹션 상단 62→136 */
  --fs-sec-pb:    clamp(60px, 43.85px + 4.487vw, 130px);   /* 섹션 하단 60→130 */

  /* --- 1.8 컨테이너 (스펙 실측: 3개 시안 모두 1440 / 모바일 320+20) ------ */
  --fs-container:      1440px;
  --fs-container-wide: 1920px;                             /* 헤더 전용 */
  --fs-gutter:      clamp(20px, 15.38px + 1.282vw, 40px);  /* 1920에서 40 → 콘텐츠 x240 */
  --fs-gutter-wide: clamp(20px,  1.54px + 5.128vw, 100px); /* 1920에서 100 → 헤더 x100 */

  /* --- 1.9 셸 치수 ------------------------------------------------------ */
  --fs-header-h:    clamp(60px, 50.77px + 2.564vw, 100px); /* 60 → 100 */
  --fs-logo-w:      clamp(151px, 139.7px + 3.141vw, 200px);
  --fs-logo-h:      clamp(36px,  33.2px + 0.769vw, 48px);
  /* 1920 에서는 시안 실측값(16px / 38px)을 그대로 쓰고, 좁아질수록 축소한다.
     헤더는 ≥1200px 에서 grid 이고 GNB 열이 auto 라 줄지 않으므로, 고정 16px 로 두면
     1200–1600px 구간에서 GNB 15항목이 유틸(로그인·회원가입) 위로 넘쳐 겹친다. */
  --fs-gnb-fz:      clamp(13px, 8px + 0.4167vw, 16px);      /* 시안 GNB 실측: 메뉴 잉크 폭 403–1516 (3개 시안 동일).
                                                              1920=16px 고정, 1200=13px — 14항목이 유틸 링크를 밀지 않는 하한 */
  --fs-gnb-ls:      -0.04em;
  --fs-gnb-gap:     clamp(6px, -47.3px + 4.444vw, 38px);  /* 1920에서 38 실측, 1200에서 6 */
  --fs-footer-py:   clamp(40px, 37.7px + 0.641vw, 50px);   /* 40 → 50 */
  --fs-footer-row:  26px;                                  /* 정보 행 피치 */
  --fs-footer-link: 30px;                                  /* GUIDE 링크 피치 */
  --fs-header-overlay-bg: rgba(0, 0, 0, .14);              /* 히어로 위 헤더 틴트 실측 */

  /* --- 1.10 반경 -------------------------------------------------------- */
  --fs-radius-0:     0;      /* 시안 카드·표·패널은 전부 직각 */
  --fs-radius-sm:    4px;
  --fs-radius-pill:  999px;  /* View More / POINT 필 */
  --fs-radius-round: 50%;

  /* --- 1.11 그림자 (시안 카드는 그림자 없음 — 모션 전용) ----------------- */
  --fs-shadow-none: none;
  --fs-shadow-card: 0 2px 10px rgba(17, 17, 17, .06);
  --fs-shadow-lift: 0 18px 40px rgba(17, 17, 17, .14);
  --fs-shadow-focus: 0 0 0 3px rgba(151, 121, 110, .45);   /* 청록 rgba(73,188,189) */

  /* --- 1.12 모션 -------------------------------------------------------- */
  --fs-dur-fast:   180ms;
  --fs-dur:        320ms;
  --fs-dur-slow:   700ms;
  --fs-dur-reveal: 1200ms;   /* 10-12 900 → 1200 (스크롤 모션 D2) */
  --fs-ease:       cubic-bezier(.22, .61, .36, 1);
  --fs-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --fs-ease-inout: cubic-bezier(.65, .05, .36, 1);
  --fs-perspective: 1000px;
  --fs-tilt-max:    6deg;
  --fs-cover-rot:   22deg;
  --fs-cover-z:     -120px;
  --fs-reveal-rx:   8deg;
  --fs-reveal-y:    28px;
  --fs-reveal-z:    -40px;

  --fs-z-header: 50;
  --fs-z-nav:    20;
  --fs-z-over:   10;

  color-scheme: light;
}

/* ==========================================================================
   2. @font-face — assets/fonts/ 실파일명 (외부 CDN 0건)
   ========================================================================== */
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 200;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/Pretendard-ExtraLight.woff2?v=d02d9989") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 300;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/Pretendard-Light.woff2?v=95c11eca") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/Pretendard-Regular.woff2?v=ff9fe69d") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/Pretendard-Medium.woff2?v=b4062666") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/Pretendard-SemiBold.woff2?v=a381c8f3") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/Pretendard-Bold.woff2?v=d6e45731") format("woff2"); }

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/montserrat-regular.woff2?v=01d088fd") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/montserrat-bold.woff2?v=d3db9969") format("woff2"); }

@font-face { font-family: "GmarketSans"; font-style: normal; font-weight: 300;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/GmarketSansTTFLight.woff2?v=c427da0d") format("woff2"); }
@font-face { font-family: "GmarketSans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/GmarketSansTTFMedium.woff2?v=2b07632c") format("woff2"); }
@font-face { font-family: "GmarketSans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/draft1_builder/assets/fonts-subset/GmarketSansTTFBold.woff2?v=ef47ccfc") format("woff2"); }

/* ==========================================================================
   3. RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* 가로 스크롤 원천 차단 — 풀블리드(.fs-bleed)가 100vw 를 써도 잘라낸다.
     clip 은 sticky/fixed 를 깨지 않는다. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--fs-white);
  color: var(--fs-ink);
  font-family: var(--fs-font);
  font-size: var(--fs-t-body);
  font-weight: 400;
  line-height: var(--fs-lh-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--fs-line); margin: 0; }
:where(main, section, article, aside, header, footer, nav) { display: block; }

/* 그리드/플렉스 자식 넘침 방지 — 가로 스크롤 예방의 핵심 */
:where(.fs-grid, .fs-split, .fs-stack) > * { min-width: 0; }

/* 포커스 링 유지 */
:focus-visible {
  outline: 2px solid var(--fs-teal-dk);
  outline-offset: 2px;
}
.fs-header--overlay :focus-visible,
.fs-section--ink :focus-visible,
.fs-section--ink2 :focus-visible { outline-color: var(--fs-white); }

.fs-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fs-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--fs-ink); color: var(--fs-white);
  border-radius: var(--fs-radius-sm); font-size: var(--fs-t-sm);
  transition: top var(--fs-dur-fast) var(--fs-ease);
}
.fs-skip:focus { top: 8px; }

/* ==========================================================================
   4. LAYOUT — 컨테이너 · 섹션 · 그리드
   ========================================================================== */
.fs-container {
  width: 100%;
  max-width: calc(var(--fs-container) + var(--fs-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--fs-gutter);
}
/* 헤더 전용 광폭 컨테이너 — 1920에서 좌우 100px */
.fs-container--wide {
  max-width: var(--fs-container-wide);
  padding-inline: var(--fs-gutter-wide);
}
.fs-container--narrow { max-width: calc(1020px + var(--fs-gutter) * 2); }

/* 컨테이너 안에서 화면 전폭으로 탈출 */
.fs-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* 좌측만 화면 끝까지 (main 상담폼 인테리어 사진) */
.fs-bleed-start { margin-inline-start: calc(50% - 50vw); }
.fs-bleed-end   { margin-inline-end:   calc(50% - 50vw); }

.fs-section {
  position: relative;
  padding-block: var(--fs-sec-pt) var(--fs-sec-pb);
  background: var(--fs-white);
}
.fs-section--flush { padding-block: 0; }
.fs-section--tight { padding-block: calc(var(--fs-sec-pt) * .6) calc(var(--fs-sec-pb) * .6); }
.fs-section--cream  { background: var(--fs-cream); }
.fs-section--cream2 { background: var(--fs-cream-2); }
.fs-section--beige  { background: var(--fs-beige); }
.fs-section--taupe  { background: var(--fs-taupe); color: var(--fs-on-dark); }
.fs-section--gray   { background: var(--fs-gray); }
.fs-section--ink    { background: var(--fs-ink-band);   color: var(--fs-on-dark); }
.fs-section--ink2   { background: var(--fs-ink-band-2); color: var(--fs-on-dark); }
.fs-section--fade-cream {           /* nose y3910→4549 · about doctors 그라데이션 */
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-cream) 100%);
}
.fs-section--ink  :is(.fs-h2, .fs-h3, .fs-body, p),
.fs-section--ink2 :is(.fs-h2, .fs-h3, .fs-body, p),
.fs-section--taupe:is(.fs-h2, .fs-h3, .fs-body, p) { color: inherit; }

/* 다크 밴드 위 배경 사진 레이어 */
.fs-section__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.fs-section__bg img { width: 100%; height: 100%; object-fit: cover; }
.fs-section > .fs-container,
.fs-section > .fs-bleed { position: relative; z-index: 1; }

.fs-grid { display: grid; gap: var(--fs-gap-card); grid-template-columns: minmax(0, 1fr); }
.fs-grid--gap-col { gap: var(--fs-gap-col); }
@media (min-width: 600px) {
  .fs-grid--2, .fs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-grid--3, .fs-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 2컬럼 스플릿 — 기본 1fr 1fr, --fs-split 로 비율 지정 (예: 700fr 700fr) */
.fs-split { display: grid; gap: var(--fs-gap-col); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .fs-split { grid-template-columns: var(--fs-split, minmax(0, 1fr) minmax(0, 1fr)); align-items: var(--fs-split-align, start); }
  .fs-split--center { align-items: center; }
  /* 모바일에서 텍스트가 먼저, PC에서 사진이 먼저인 경우 */
  .fs-split--swap > :first-child { order: 2; }
  .fs-split--swap > :nth-child(2) { order: 1; }
}
.fs-stack { display: grid; gap: var(--fs-gap-title); }
.fs-stack--sm { gap: var(--fs-sp-5); }
.fs-stack--xs { gap: var(--fs-sp-2); }

.fs-center { text-align: center; }
.fs-left   { text-align: left; }
.fs-right  { text-align: right; }
.fs-mo-only { display: revert; }
.fs-pc-only { display: none; }
@media (min-width: 1024px) {
  .fs-mo-only { display: none; }
  .fs-pc-only { display: revert; }
}

/* ==========================================================================
   5. TYPOGRAPHY 컴포넌트
   ========================================================================== */
.fs-kicker {
  font-size: var(--fs-t-kicker); font-weight: 700; line-height: 1.3;
  letter-spacing: var(--fs-ls-wide); color: var(--fs-teal);
}
.fs-kicker--lg { font-size: var(--fs-t-kicker-lg); letter-spacing: 0; }
.fs-kicker--en { font-family: var(--fs-font-en); text-transform: uppercase; font-weight: 400; }
.fs-kicker--light { color: var(--fs-on-dark); }

.fs-h1 { font-size: var(--fs-t-h1); font-weight: 700; line-height: var(--fs-lh-head); letter-spacing: var(--fs-ls-tight); }
.fs-h2 { font-size: var(--fs-t-h2); font-weight: 700; line-height: var(--fs-lh-head); letter-spacing: var(--fs-ls-tight); }
.fs-h3 { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-hero-title { font-size: var(--fs-t-hero); font-weight: 600; line-height: var(--fs-lh-tight); letter-spacing: var(--fs-ls-tight); }
.fs-display { font-size: var(--fs-t-display); font-weight: 700; line-height: var(--fs-lh-tight); letter-spacing: var(--fs-ls-tight); }
.fs-mega    { font-size: var(--fs-t-mega);    font-weight: 700; line-height: var(--fs-lh-head); }
.fs-en      { font-family: var(--fs-font-en); font-size: var(--fs-t-en); font-weight: 700;
              line-height: var(--fs-lh-head); letter-spacing: -0.02em; text-transform: uppercase; }
.fs-num     { font-size: var(--fs-t-num); font-weight: 500; line-height: 1; color: var(--fs-teal); }
.fs-tel     { font-size: var(--fs-t-tel); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }

.fs-lead  { font-size: var(--fs-t-lead); line-height: 1.5; }
.fs-sub   { font-size: var(--fs-t-sub);  line-height: 1.45; font-weight: 500; }
.fs-body  { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); }
.fs-quote { font-size: var(--fs-t-quote); font-weight: 700; line-height: 1.5; letter-spacing: var(--fs-ls-tight); }
.fs-sm    { font-size: var(--fs-t-sm); }
.fs-xs    { font-size: var(--fs-t-xs); }

.fs-muted    { color: var(--fs-muted); }
.fs-muted-2  { color: var(--fs-muted-2); }
.fs-teal-fg  { color: var(--fs-teal); }
.fs-teal-dk-fg { color: var(--fs-teal-dk); }
.fs-neon-fg  { color: var(--fs-teal-neon); }
.fs-white-fg { color: var(--fs-on-dark); }
.fs-strong   { font-weight: 700; }
.fs-w300 { font-weight: 300; } .fs-w400 { font-weight: 400; }
.fs-w500 { font-weight: 500; } .fs-w600 { font-weight: 600; } .fs-w700 { font-weight: 700; }

/* 형광펜식 인라인 하이라이트 (nose intro-chat / compare-table) */
.fs-mark {
  display: inline-block;
  padding: 2px 4px;
  background: var(--fs-teal);
  color: var(--fs-on-dark);
}
.fs-mark--block { padding: 4px 10px; }

/* 섹션 헤더줄: 좌 제목 / 우 액션. 모바일은 세로 스택 + 액션이 아래로 */
.fs-sec-head {
  display: grid;
  gap: var(--fs-sp-5);
  margin-block-end: var(--fs-gap-title);
}
.fs-sec-head__title { font-size: var(--fs-t-h2); font-weight: 700; line-height: var(--fs-lh-head); letter-spacing: var(--fs-ls-tight); }
.fs-sec-head__sub   { font-size: var(--fs-t-sub); font-weight: 500; color: inherit; margin-block-start: var(--fs-sp-4); }
.fs-sec-head__action { justify-self: center; }
.fs-sec-head--center { text-align: center; }
@media (min-width: 1024px) {
  .fs-sec-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--fs-gap-col);
  }
  .fs-sec-head__action { justify-self: end; }
  .fs-sec-head--center { grid-template-columns: minmax(0, 1fr); }
  .fs-sec-head--center .fs-sec-head__action { position: absolute; right: var(--fs-gutter); }
  .fs-sec-head--stack { grid-template-columns: minmax(0, 1fr); }
  .fs-sec-head--stack .fs-sec-head__action { justify-self: start; }
}

/* ==========================================================================
   6. 공용 셸 — 헤더
   ========================================================================== */
.fs-header {
  position: relative;
  z-index: var(--fs-z-header);
  background: var(--fs-white);
  color: var(--fs-ink);
}
/* 다크 히어로 위 투명 오버레이 변형 (메인) */
.fs-header--overlay {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  background: var(--fs-header-overlay-bg);
  color: var(--fs-on-dark);
}
/* 2026-08-20 추가: 히어로 사진 상단이 밝아 흰 GNB 대비가 3.06~3.35:1 로 AA(4.5:1) 미달이었다.
   틴트를 전체적으로 올리면 시안의 밝은 인상이 죽으므로, 헤더 높이만큼만 위에서 아래로
   사라지는 스크림을 깔아 글자 뒤만 어둡게 한다. 사진 자체의 노출은 건드리지 않는다. */
.fs-header--overlay::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: calc(var(--fs-header-h) * 1.6);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 100%);
}
.fs-header--overlay > * { position: relative; z-index: 1; }
.fs-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, -1.33px + 1.111vw, 20px);
  min-height: var(--fs-header-h);
}

.fs-logo { display: flex; align-items: center; gap: var(--fs-sp-3); flex: 0 0 auto; }
.fs-logo__img  { width: var(--fs-logo-w); height: var(--fs-logo-h); object-fit: contain; object-position: left center; }
.fs-logo__mark { width: var(--fs-logo-h); height: var(--fs-logo-h); color: var(--fs-gold); flex: 0 0 auto; }
.fs-logo__text { display: grid; gap: 2px; line-height: 1.05; }
.fs-logo__ko   { font-size: clamp(15px, 13.8px + 0.32vw, 20px); font-weight: 700; letter-spacing: -0.03em; }
.fs-logo__en   { font-family: var(--fs-font-en); font-size: clamp(8px, 7.3px + 0.19vw, 11px);
                 font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }

.fs-gnb { display: none; }
.fs-gnb__list { display: flex; align-items: center; gap: var(--fs-gnb-gap); }
.fs-gnb__link {
  display: inline-block;
  padding-block: 6px;
  font-size: var(--fs-gnb-fz);
  font-weight: 500;
  letter-spacing: var(--fs-gnb-ls);
  white-space: nowrap;
  transition: color var(--fs-dur-fast) var(--fs-ease), opacity var(--fs-dur-fast) var(--fs-ease);
}
.fs-gnb__link:hover { color: var(--fs-teal-dk); }
.fs-header--overlay .fs-gnb__link:hover { color: var(--fs-white); opacity: .75; }
.fs-gnb__link[aria-current="page"] { font-weight: 700; }

.fs-util { display: none; align-items: center; gap: var(--fs-sp-3); margin-inline-start: auto; flex: 0 0 auto; }
.fs-util__link { font-size: var(--fs-t-sm); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.fs-util__link:hover { color: var(--fs-teal-dk); }
.fs-header--overlay .fs-util__link:hover { color: var(--fs-white); opacity: .75; }
.fs-util__sep { color: currentColor; opacity: .4; }
/* flex:0 0 auto 가 없으면 유틸 열이 좁아질 때 국기가 가로로만 눌려
   1600에서 22x35, 1440 이하에서는 폭 0 으로 사라진다. */
.fs-lang { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; flex: 0 0 auto; }
.fs-lang > * { flex: 0 0 auto; }
.fs-lang__flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; }
.fs-lang__caret { width: 8px; height: 8px; border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); }

/* 모바일 헤더 — 햄버거 버튼(시안 실측 24x14, 2px 바 3줄, 피치 6px).
   ※ 열린 드로어 화면은 시안에 없으므로 fs.js 는 드로어를 만들지 않는다. */
.fs-burger {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 24px; height: 14px; margin-inline-start: auto; flex: 0 0 auto;
}
.fs-burger__bar {
  display: block; width: 24px; height: 2px; background: currentColor;
  transition: transform var(--fs-dur) var(--fs-ease), opacity var(--fs-dur) var(--fs-ease);
}

@media (min-width: 1200px) {
  /* GNB 를 페이지 중앙에 고정 (시안 실측: GNB 잉크 x403–1515, 중심 959 ≈ 960) */
  .fs-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  .fs-gnb  { display: block; }
  .fs-gnb__list { justify-content: center; }
  .fs-util { display: flex; justify-self: end; margin-inline-start: 0; }
  .fs-burger { display: none; }
}

/* 히어로가 헤더 아래로 깔리는 메인 페이지용 */
.fs-page--overlay { position: relative; }

/* ==========================================================================
   7. 공용 셸 — 푸터
   ========================================================================== */
.fs-footer {
  background: var(--fs-gray);
  color: var(--fs-ink);
  padding-block: var(--fs-footer-py);
  font-size: var(--fs-t-footer);
  line-height: 1.5;
}
.fs-footer__inner { display: grid; gap: var(--fs-sp-8); }
.fs-footer__logo { width: var(--fs-logo-w); height: var(--fs-logo-h); object-fit: contain; object-position: left center; }
.fs-footer__brand { display: grid; gap: var(--fs-sp-3); }
.fs-footer__info { display: grid; }
.fs-footer__line { min-height: var(--fs-footer-row); color: var(--fs-ink); }
.fs-footer__copy { min-height: var(--fs-footer-row); color: var(--fs-ink); }
.fs-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-sp-5); }
.fs-footer__col { display: grid; align-content: start; }
.fs-footer__label {
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-footer-lb); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin-block-end: var(--fs-sp-6);
}
.fs-footer__links { display: grid; }
.fs-footer__link { display: block; min-height: var(--fs-footer-link); }
.fs-footer__link:hover { color: var(--fs-teal-dk); text-decoration: underline; }
.fs-social { display: flex; gap: var(--fs-sp-5); }
.fs-social__link {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--fs-radius-round);
  color: var(--fs-ink);
  transition: transform var(--fs-dur-fast) var(--fs-ease), color var(--fs-dur-fast) var(--fs-ease);
}
.fs-social__link:hover { color: var(--fs-teal-dk); transform: translateY(-2px); }
.fs-social__link svg, .fs-social__link img { width: 22px; height: 22px; }

/* MO 시안 실측(3개 시안 공통): 브랜드블록→GUIDE 19, 라벨→링크 9, 하단 패딩 29.
   기본값(36/24/40)이면 모바일 푸터가 40~44px 길어진다. */
@media (max-width: 1023px) {
  .fs-footer { padding-block: var(--fs-footer-py) 29px; }
  .fs-footer__inner { gap: 19px; }
  .fs-footer__label { margin-block-end: 9px; }
}

@media (min-width: 1024px) {
  .fs-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: clamp(40px, 209px - 12.5vw, 209px);
    align-items: start;
  }
  .fs-footer__cols { display: contents; }
  .fs-social { gap: var(--fs-sp-6); }
}

/* ==========================================================================
   8. 버튼 · 필 · 아이콘 버튼
   ========================================================================== */
.fs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--fs-sp-5);
  min-height: clamp(40px, 37.9px + 0.577vw, 49px);
  padding-inline: clamp(16px, 14.8px + 0.32vw, 21px);
  font-size: var(--fs-t-sm); font-weight: 600; letter-spacing: -0.02em;
  white-space: nowrap;
  border: 1px solid var(--fs-line-ink);
  border-radius: var(--fs-radius-pill);
  background: transparent;
  color: var(--fs-ink);
  transition: background-color var(--fs-dur) var(--fs-ease),
              color var(--fs-dur) var(--fs-ease),
              border-color var(--fs-dur) var(--fs-ease),
              transform var(--fs-dur) var(--fs-ease);
}
.fs-btn:hover { background: var(--fs-ink); color: var(--fs-white); transform: translateY(-2px); }
/* View More 필 — PC 152x49 / MO 137x40 (시안 실측) */
.fs-btn--more { min-width: clamp(137px, 133.5px + 0.962vw, 152px); }
.fs-btn__plus { position: relative; width: 15px; height: 15px; flex: 0 0 auto; }
.fs-btn__plus::before,
.fs-btn__plus::after {
  content: ""; position: absolute; background: currentColor;
}
.fs-btn__plus::before { inset-block: 0; inset-inline-start: 7px; width: 1.5px; }
.fs-btn__plus::after  { inset-inline: 0; inset-block-start: 7px; height: 1.5px; }

.fs-btn--light { border-color: var(--fs-white); color: var(--fs-white); }
.fs-btn--light:hover { background: var(--fs-white); color: var(--fs-ink); }
.fs-btn--fill { background: var(--fs-teal); border-color: var(--fs-teal); color: var(--fs-white); }
.fs-btn--fill:hover { background: var(--fs-teal-dk); border-color: var(--fs-teal-dk); color: var(--fs-white); }
.fs-btn--submit { min-width: clamp(108px, 107.5px + 0.128vw, 110px); font-weight: 500; font-size: var(--fs-t-body); }
.fs-btn--block { display: flex; width: 100%; }

/* 오시는길 하단 버튼 바 — PC 425+425 / MO 세로 스택 (about contact 실측) */
.fs-btnbar { display: grid; grid-template-columns: minmax(0, 1fr); }
.fs-btnbar__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding-inline: var(--fs-sp-5);
  font-size: var(--fs-t-sub); font-weight: 700; color: var(--fs-white);
  transition: filter var(--fs-dur) var(--fs-ease);
}
.fs-btnbar__btn:hover { filter: brightness(1.08); }
.fs-btnbar__btn--teal   { background: var(--fs-teal-btn); }
.fs-btnbar__btn--orange { background: var(--fs-orange); }
/* 2026-09-09 · 카카오톡 상담 버튼은 카카오 브랜드 색으로 간다 (병원 요청, 79 부터).
   --fs-orange 는 건드리지 않는다 — 다른 페이지의 「오시는길」 버튼이 계속 쓴다.
   #191919 on #FEE500 = 13.6:1 이라 아래 AA 보정 블록의 대상이 아니다. */
.fs-btnbar__btn--kakao  { background: #FEE500; color: #191919; gap: 8px; }
/* 2026-09-14 · 오시는길 길찾기 버튼은 각 지도 서비스의 브랜드 색으로 (승인자 지시, 91 → 전 페이지 통일).
   네이버 지도 = 네이버 그린 #03C75A + 흰 글자 — 브랜드 관례이지만 2.2:1 이라 AA(4.5) 밖이다(승인자 결정, 기록).
   카카오맵 = 위 --kakao(#FEE500 · #191919, 13.6:1). --teal/--orange 는 전화·상담 버튼이 계속 쓰므로 그대로. */
.fs-btnbar__btn--naver  { background: #03C75A; }
.fs-btnbar__ico { flex: 0 0 auto; width: 22px; height: 24px; object-fit: contain; }
@media (min-width: 600px) { .fs-btnbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* POINT / 라벨 필 — 실측 107x35(PC) 103x31(MO), radius pill */
.fs-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: clamp(30px, 29.1px + 0.256vw, 35px);
  padding-inline: clamp(12px, 11.1px + 0.256vw, 16px);
  font-size: var(--fs-t-pill); font-weight: 700; letter-spacing: 0.02em;
  color: var(--fs-white); background: var(--fs-teal);
  border-radius: var(--fs-radius-pill);
}
.fs-pill--gray { background: var(--fs-pill-gray); }
.fs-pill--idle { background: var(--fs-step-idle); }
.fs-pill--deep { background: var(--fs-teal-dk); }
.fs-pill--square { border-radius: var(--fs-radius-0); }

/* 원형 아웃라인 화살표 — PC 50 / MO 40 */
.fs-iconbtn {
  display: inline-grid; place-items: center;
  width: clamp(40px, 37.7px + 0.641vw, 50px);
  aspect-ratio: 1;
  border: 1px solid var(--fs-line-ink);
  border-radius: var(--fs-radius-round);
  color: var(--fs-ink);
  background: transparent;
  transition: background-color var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease);
}
.fs-iconbtn:hover { background: var(--fs-ink); color: var(--fs-white); }
.fs-iconbtn:disabled { opacity: .35; cursor: default; }
.fs-iconbtn--soft { border-color: var(--fs-arrow-soft); border-width: 1.5px; color: var(--fs-arrow-soft); }
.fs-iconbtn--soft:hover { background: var(--fs-arrow-soft); color: var(--fs-white); }
.fs-iconbtn--light { border-color: var(--fs-white); color: var(--fs-white); }
.fs-iconbtn--light:hover { background: var(--fs-white); color: var(--fs-ink); }
.fs-iconbtn--dark { width: clamp(24px, 20.31px + 1.026vw, 40px); background: var(--fs-ink); border-color: var(--fs-ink); color: var(--fs-white); }
.fs-iconbtn--dark:hover { background: var(--fs-teal-dk); border-color: var(--fs-teal-dk); }
.fs-iconbtn svg { width: 40%; height: 40%; }

/* 정사각 틸 플러스 버튼 (main FS SIGNATURE 캡션 패널) */
.fs-plusbtn {
  display: grid; place-items: center;
  width: clamp(40px, 37.7px + 0.641vw, 50px);
  aspect-ratio: 1;
  background: var(--fs-teal); color: var(--fs-white);
  transition: background-color var(--fs-dur) var(--fs-ease);
}
.fs-plusbtn:hover { background: var(--fs-teal-dk); }
.fs-plusbtn svg { width: 40%; height: 40%; }

/* ==========================================================================
   9. 카드 · 피겨 · 의료진 · 스텝
   ========================================================================== */
.fs-card {
  position: relative;
  background: var(--fs-white);
  border-radius: var(--fs-radius-0);
  box-shadow: var(--fs-shadow-none);
}
.fs-card__body { padding: clamp(16px, 13.7px + 0.641vw, 26px); }
.fs-card__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-card__sub   { font-size: var(--fs-t-sub); font-weight: 500; }
.fs-card__num   { font-size: clamp(20px, 18.8px + 0.321vw, 25px); font-weight: 700; color: var(--fs-teal); }
.fs-card__desc  { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted); }
.fs-card__media { display: block; width: 100%; }
.fs-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* POINT 카드 — 흰 정사각(PC 345x345) / 모바일 가로형(320x256). aspect 고정 금지. */
.fs-card--point {
  display: grid; justify-items: center; align-content: center;
  gap: clamp(21px, 19.1px + 0.513vw, 41px);
  padding: clamp(11px, 8.9px + 0.577vw, 20px) var(--fs-sp-5) clamp(25px, 20.3px + 1.31vw, 45px);
}
.fs-card__icon {
  display: grid; place-items: center;
  width: clamp(100px, 95.4px + 1.282vw, 120px);
  aspect-ratio: 1;
  color: var(--fs-teal-dk);
}
.fs-card__icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 3; fill: none; }
.fs-card__caption { font-size: var(--fs-t-lead); line-height: 1.5; text-align: center; }
/* PC 에서만 정사각(345x345). 모바일은 320x256 가로형이라 aspect 를 걸면 안 된다. */
@media (min-width: 1024px) { .fs-card--square { aspect-ratio: 1; } }

/* 청록 룰 카드 — PC 좌측 세로선 2px / 모바일 상단 가로선 (about promise 실측) */
.fs-card--rule {
  display: grid; gap: var(--fs-sp-2);
  border-block-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-5);
}
@media (min-width: 1024px) {
  .fs-card--rule {
    border-block-start: 0;
    border-inline-start: 2px solid var(--fs-teal);
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    column-gap: var(--fs-gap-col);
    padding: var(--fs-sp-5) var(--fs-sp-5) var(--fs-sp-5) var(--fs-sp-5);
  }
}

/* 사진 + 흰 캡션 패널 (main FS SIGNATURE) */
.fs-card--panel { display: grid; }
.fs-card__panel {
  position: relative;
  background: var(--fs-white);
  padding: clamp(18px, 16.3px + 0.481vw, 26px) clamp(21px, 18.9px + 0.577vw, 30px);
  display: grid; gap: var(--fs-sp-5);
}
.fs-card__panel .fs-plusbtn { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
@media (min-width: 1024px) {
  .fs-card--panel { position: relative; }
  .fs-card--panel .fs-card__panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: calc(-1 * var(--fs-panel-drop, 72px));
    width: var(--fs-panel-w, 440px);
    max-width: 100%;
  }
}

.fs-figure { display: grid; gap: var(--fs-sp-4); }
.fs-figure__img { width: 100%; }
.fs-figure__img img { width: 100%; height: 100%; object-fit: cover; }
.fs-figure__cap { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); }

/* 회복 집중관리 2단 — 호박즙 · 냉온 찜질팩 (.fs-care) ------------------------
   33·49·About 에만 있던 「수술 후 회복까지」 블록을 눈·코 수술 페이지 공용 부품으로
   옮긴 것이다(2026-08-31 승인자 지시). 세 페이지의 원본 구현은 각자 페이지 CSS 에
   그대로 두고, 새로 넓히는 17장만 이 부품을 쓴다.
   흰 카드를 쓰지 않는다 — 「사진 + 라벨바 + 설명」이라 흰 섹션과 크림 밴드
   양쪽에서 산다. A18 패널 카드로 만들면 흰 섹션에서 상자가 증발해(같은 색)
   밴드색을 크림으로 못 박게 되고, 그러면 앞 섹션이 이미 크림인 페이지에서
   LOCK 4 (c)(모디파이어 6개) 를 밀어 올린다. */
.fs-care {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin: var(--fs-gap-title) 0 0;
  padding: 0;
  list-style: none;
}
.fs-care > li { display: grid; align-content: start; gap: var(--fs-sp-3); }
.fs-care__item { display: grid; margin: 0; }
/* 원본 두 장이 모두 700×480 이라 비율을 그대로 잡는다 — cover 가 아무것도 안 자른다 */
.fs-care__box {
  display: block; overflow: hidden;
  aspect-ratio: 35 / 24;
  background: var(--fs-white);
  /* 두 사진 모두 흰 바탕이라 흰 섹션에서는 사진 면이 배경에 녹는다 — 헤어라인으로 가둔다.
     크림 밴드(#F6F1EC)에서는 #EDEDED 가 거의 안 보여 따로 분기할 필요가 없다. */
  border: 1px solid var(--fs-line);
}
.fs-care__box img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
.fs-care__desc { color: var(--fs-muted); }
@media (hover: hover) and (pointer: fine) {
  .fs-care__item:hover .fs-care__box img { transform: scale(1.045); }
  /* 라벨바는 사진과 같이 커지면 안 된다(글자가 흔들린다) — 색만 한 단계 */
  .fs-care__item:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fs-care__box img { transform: none !important; transition: none !important; }
}

/* 일러스트 카드 하단 컬러 라벨 바 */
.fs-labelbar {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(28px, 26.5px + 0.449vw, 50px);
  padding-inline: var(--fs-sp-3);
  font-size: var(--fs-t-pill); font-weight: 700; text-align: center;
  color: var(--fs-white); background: var(--fs-teal);
}
.fs-labelbar--mid  { background: var(--fs-teal-mid); }
.fs-labelbar--deep { background: var(--fs-teal-dk); }
.fs-labelbar--dark { background: var(--fs-ink); }
.fs-labelbar--lg   { font-size: var(--fs-t-lead); }

/* 정사각 셀피 썸네일 */
.fs-thumb { display: block; aspect-ratio: 1; overflow: hidden; }
.fs-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 의료진 카드 */
.fs-doctor { display: grid; gap: var(--fs-sp-5); }
.fs-doctor__photo { width: 100%; }
/* 3D 틸트를 받는 래퍼. 광택 하이라이트가 사진 밖으로 새지 않도록 잘라낸다. */
.fs-doctor__frame { display: block; overflow: hidden; }
.fs-doctor__photo img { width: 100%; height: auto; object-fit: cover; }
.fs-doctor__name { font-size: var(--fs-t-h3); font-weight: 700; line-height: 1.2; }
.fs-doctor__role { font-size: var(--fs-t-sm); font-weight: 600; color: var(--fs-muted); }
.fs-doctor__bio { display: grid; gap: 2px; font-size: var(--fs-t-body); line-height: var(--fs-lh-body); }

/* 스텝 다이어그램 — 원 지름 248px(PC/MO 동일 실측), PC 가로 5열 / MO 세로 스택 */
/* MO 시안 실측: 원(248) → 커넥터(30) → 원 이 여백 없이 맞닿는다. 피치 278px */
.fs-steps {
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
}
.fs-step {
  display: grid; justify-items: center; align-content: center; gap: var(--fs-sp-7);
  width: min(248px, 100%); aspect-ratio: 1;
  padding: var(--fs-sp-5);
  border-radius: var(--fs-radius-round);
  background: var(--fs-step-bg);
  text-align: center;
}
.fs-step--active { background: var(--fs-white); border: 3px solid var(--fs-teal); }
.fs-step__text { font-size: var(--fs-t-lead); line-height: 1.5; }
.fs-steps__link { width: 3px; height: 30px; background: var(--fs-step-bg); flex: 0 0 auto; }
.fs-steps__link--active { background: linear-gradient(180deg, #97796E 0%, #D8CBC5 100%); }  /* 청록 #4FBDBE→#B1DDDE */
@media (min-width: 1400px) {
  .fs-steps { flex-direction: row; justify-content: space-between; gap: 0; }
  .fs-steps__link { width: 42px; height: 3px; }
  .fs-steps__link--active { background: linear-gradient(90deg, #97796E 0%, #D8CBC5 100%); }
}

/* Before/After 비교 블록 */
.fs-ba { display: grid; gap: var(--fs-sp-5); justify-items: center; }
.fs-ba__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
/* 캡션 줄 수가 달라도 사진·라벨바는 위에서 정렬(시안: 두 라벨바 y·높이 동일) */
.fs-ba__item { display: grid; align-content: start; }
.fs-ba__item picture { display: block; }
.fs-ba__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.fs-ba__cap { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); text-align: center; padding: var(--fs-sp-4) var(--fs-sp-2) 0; }
.fs-ba__badge {
  display: inline-flex; align-items: center; gap: var(--fs-sp-3);
  min-height: clamp(38px, 35.2px + 0.769vw, 50px);
  padding-inline: 3px clamp(14px, 12.6px + 0.385vw, 20px);
  border-radius: var(--fs-radius-pill);
  background: var(--fs-teal-dk); color: var(--fs-white);
  font-size: var(--fs-t-quote); font-weight: 700;
}
.fs-ba__badge-num {
  display: grid; place-items: center;
  width: clamp(30px, 28.2px + 0.513vw, 38px); aspect-ratio: 1;
  border: 2px solid var(--fs-white); border-radius: var(--fs-radius-round);
  font-size: var(--fs-t-body);
}

/* ==========================================================================
   10. 표
   ========================================================================== */
.fs-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fs-table { width: 100%; font-size: var(--fs-t-body); line-height: var(--fs-lh-body); }
.fs-table th, .fs-table td { padding: var(--fs-sp-4) var(--fs-sp-5); text-align: start; vertical-align: middle; }
.fs-table thead th { background: var(--fs-teal); color: var(--fs-white); font-weight: 700; }
.fs-table tbody tr + tr { border-block-start: 1px solid var(--fs-line); }

/* 3열 비교표 (nose compare-table) — PC 466/90/464, 모바일은 좌열 숨김 */
.fs-compare { max-width: 1020px; margin-inline: auto; }
.fs-compare__row {
  display: grid;
  grid-template-columns: var(--fs-compare-cols-mo, 90px minmax(0, 1fr));
}
.fs-compare__cell { display: flex; align-items: center; padding: var(--fs-sp-5) var(--fs-sp-3); }
.fs-compare__cell--left {
  display: none;
  justify-content: flex-end; text-align: end;
  background: var(--fs-fill-gray); color: var(--fs-white);
  padding-inline-end: var(--fs-sp-7);
}
.fs-compare__cell--label {
  justify-content: center; text-align: center;
  background: var(--fs-teal); color: var(--fs-white);
  font-size: var(--fs-t-quote); font-weight: 700; line-height: 1.2;
  padding-inline: var(--fs-sp-2);
}
.fs-compare__cell--right {
  background: var(--fs-white); color: var(--fs-ink);
  padding-inline-start: clamp(10px, 5.15px + 1.346vw, 31px);
}
.fs-compare__row + .fs-compare__row .fs-compare__cell { border-block-start: 1px solid var(--fs-line); }
.fs-compare__rule { height: 2px; background: var(--fs-teal); }
.fs-compare__panels { display: grid; grid-template-columns: var(--fs-compare-cols-mo, 90px minmax(0, 1fr)); align-items: end; }
.fs-compare__panel { display: block; }
.fs-compare__panel img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .fs-compare__row,
  .fs-compare__panels { grid-template-columns: minmax(0, 466fr) 90px minmax(0, 464fr); }
  .fs-compare__cell--left { display: flex; }
  .fs-compare__cell { padding-block: var(--fs-sp-6); }
}

/* 진료시간 2열표 — 라벨 열 고정폭 + 양끝맞춤 (실측 PC 54px / MO 50px) */
.fs-hours { display: grid; gap: 0; font-size: var(--fs-t-body); }
.fs-hours__row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(41px, 40.8px + 0.064vw, 42px); min-height: clamp(27px, 26.8px + 0.064vw, 28px); align-items: center; }
.fs-hours__label {
  width: clamp(50px, 49.1px + 0.256vw, 54px);
  text-align: justify;
  text-align-last: justify;
  font-weight: 500;
}
.fs-hours__value { font-weight: 500; }

/* ==========================================================================
   11. 캐러셀 (JS 없이도 1번 슬라이드가 정상 노출된다)
   ========================================================================== */
.fs-carousel { position: relative; }
.fs-carousel__viewport {
  overflow: hidden;
  perspective: var(--fs-perspective);
  perspective-origin: 50% 50%;
}
.fs-carousel__track {
  display: flex;
  gap: var(--fs-slide-gap, 0px);
  transform: translate3d(var(--fs-track-x, 0px), 0, 0);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
  transform-style: preserve-3d;
}
.fs-carousel__slide {
  flex: 0 0 var(--fs-slide-w, 100%);
  max-width: var(--fs-slide-w, 100%);
  transform-style: preserve-3d;
}
.fs-carousel.is-dragging .fs-carousel__track,
.fs-carousel.is-jumping .fs-carousel__track { transition: none; }
/* 드래그·스와이프 — 세로 스크롤과 핀치 확대는 브라우저에 그대로 넘긴다
   (pan-y 만 주면 확대가 막혀 WCAG 1.4.4 에 걸린다) */
.fs-carousel--drag .fs-carousel__viewport { touch-action: pan-y pinch-zoom; cursor: grab; }
.fs-carousel--drag.is-dragging { user-select: none; }
.fs-carousel--drag.is-dragging .fs-carousel__viewport,
.fs-carousel--drag.is-dragging .fs-carousel__viewport * { cursor: grabbing; }
/* 초기 배치(=애니메이션 없는 확정) 동안은 캐러셀 내부 전체 트랜지션을 끊는다 */
.fs-carousel.is-preinit,
.fs-carousel.is-preinit *,
.fs-carousel.is-preinit *::before,
.fs-carousel.is-preinit *::after { transition: none !important; }

/* 3D 코버플로우 변형 */
.fs-carousel--cover .fs-carousel__slide {
  opacity: var(--fs-cover-fade, .55);
  transform: rotateY(var(--fs-cover-rot)) translateZ(var(--fs-cover-z));
  transition: transform var(--fs-dur-slow) var(--fs-ease-out),
              opacity var(--fs-dur-slow) var(--fs-ease-out);
}
.fs-carousel--cover .fs-carousel__slide.is-prev { transform: rotateY(calc(-1 * var(--fs-cover-rot))) translateZ(var(--fs-cover-z)); }
.fs-carousel--cover .fs-carousel__slide.is-next { transform: rotateY(var(--fs-cover-rot)) translateZ(var(--fs-cover-z)); }
.fs-carousel--cover .fs-carousel__slide.is-active {
  opacity: 1;
  transform: rotateY(0deg) translateZ(0);
}

/* 페이드 변형 (한 장씩 교체) */
.fs-carousel--fade .fs-carousel__track { display: grid; transform: none; }
.fs-carousel--fade .fs-carousel__slide {
  grid-area: 1 / 1; max-width: 100%; flex: none;
  opacity: 0; visibility: hidden;
  transition: opacity var(--fs-dur-slow) var(--fs-ease-out);
}
.fs-carousel--fade .fs-carousel__slide.is-active { opacity: 1; visibility: visible; }

.fs-carousel__nav { display: flex; gap: var(--fs-sp-2); }
.fs-carousel__nav--float {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  z-index: var(--fs-z-nav);
}
.fs-carousel__nav--side { position: static; }
@media (min-width: 1024px) {
  .fs-carousel__nav--side {
    position: absolute; inset-block-start: 50%; inset-inline: 0;
    transform: translateY(-50%);
    justify-content: space-between;
    pointer-events: none;
  }
  .fs-carousel__nav--side > * { pointer-events: auto; }
}

/* 도트 — 활성 링 PC 16 / MO 14, 비활성 PC 10 / MO 8, 피치 PC 26 / MO 22 */
.fs-carousel__dots {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 13.1px + 0.256vw, 16px);
  margin-block-start: var(--fs-sp-9);
}
.fs-carousel__dot {
  width: clamp(8px, 7.5px + 0.128vw, 10px);
  aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-dot);
  transition: background-color var(--fs-dur) var(--fs-ease),
              width var(--fs-dur) var(--fs-ease),
              box-shadow var(--fs-dur) var(--fs-ease);
}
.fs-carousel__dot.is-active {
  width: clamp(14px, 13.1px + 0.256vw, 16px);
  background: var(--fs-dot-on);
  box-shadow: inset 0 0 0 3px var(--fs-dots-bg, var(--fs-white));
}
.fs-section--cream  .fs-carousel__dot { background: var(--fs-dot-cream); }
.fs-section--cream  .fs-carousel__dot.is-active,
.fs-section--cream2 .fs-carousel__dot.is-active { --fs-dots-bg: var(--fs-cream); background: var(--fs-dot-on); }
.fs-section--beige  .fs-carousel__dot { background: var(--fs-dot-beige); }
.fs-section--beige  .fs-carousel__dot.is-active { --fs-dots-bg: var(--fs-beige); background: var(--fs-dot-on); }

/* ==========================================================================
   12. 폼
   ========================================================================== */
.fs-form { display: grid; gap: clamp(23px, 21.1px + 0.513vw, 27px); }
/* display 를 선언한 author 규칙이 UA 의 [hidden]{display:none} 을 이긴다.
   접수 완료 패널과 교대로 감출 때 폼이 그대로 남으므로 여기서 되돌린다. */
.fs-form[hidden] { display: none; }
.fs-form__row { display: grid; gap: 15px; }
.fs-form__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-t-sm); font-weight: 600;
}
.fs-form__req {
  width: 4px; height: 4px; border-radius: var(--fs-radius-round);
  background: var(--fs-red); flex: 0 0 auto;
}
.fs-input, .fs-select, .fs-textarea {
  width: 100%;
  min-height: clamp(44px, 43.1px + 0.256vw, 48px);
  padding: 10px clamp(16px, 14.8px + 0.32vw, 21px);
  background: var(--fs-white);
  border: 1px solid var(--fs-line-input);
  border-radius: var(--fs-radius-0);
  font-size: var(--fs-t-sm); font-weight: 500;
  transition: border-color var(--fs-dur-fast) var(--fs-ease), box-shadow var(--fs-dur-fast) var(--fs-ease);
}
.fs-textarea { min-height: 90px; resize: vertical; }
.fs-input::placeholder, .fs-textarea::placeholder { color: var(--fs-placeholder); }
.fs-select { appearance: none; color: var(--fs-placeholder);
  background-image: linear-gradient(45deg, transparent 50%, var(--fs-ink) 50%),
                    linear-gradient(135deg, var(--fs-ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat; }
.fs-select:valid, .fs-select.is-filled { color: var(--fs-ink); }
.fs-input:focus, .fs-select:focus, .fs-textarea:focus {
  outline: none; border-color: var(--fs-teal); box-shadow: var(--fs-shadow-focus);
}

.fs-radio-group { display: flex; flex-wrap: wrap; gap: var(--fs-sp-6) clamp(30px, 27.7px + 0.641vw, 40px); }
.fs-radio, .fs-check { display: inline-flex; align-items: center; gap: var(--fs-sp-3); cursor: pointer; }
.fs-radio input, .fs-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fs-radio__mark, .fs-check__mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 1px solid var(--fs-line-control);
  background: var(--fs-white);
  border-radius: var(--fs-radius-round);
  transition: border-color var(--fs-dur-fast) var(--fs-ease), background-color var(--fs-dur-fast) var(--fs-ease);
}
.fs-check__mark { width: 18px; height: 18px; border-radius: var(--fs-radius-0); }
.fs-radio__mark::after {
  content: ""; width: 10px; height: 10px; border-radius: var(--fs-radius-round);
  background: var(--fs-teal-dk); transform: scale(0);
  transition: transform var(--fs-dur-fast) var(--fs-ease);
}
.fs-check__mark::after {
  content: ""; width: 10px; height: 6px;
  border-inline-start: 2px solid var(--fs-white);
  border-block-end: 2px solid var(--fs-white);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--fs-dur-fast) var(--fs-ease);
}
.fs-radio input:checked + .fs-radio__mark { border-color: var(--fs-teal-dk); }
.fs-radio input:checked + .fs-radio__mark::after { transform: scale(1); }
.fs-check input:checked + .fs-check__mark { background: var(--fs-teal-dk); border-color: var(--fs-teal-dk); }
.fs-check input:checked + .fs-check__mark::after { transform: rotate(-45deg) scale(1); }
.fs-radio input:focus-visible + .fs-radio__mark,
.fs-check input:focus-visible + .fs-check__mark { outline: 2px solid var(--fs-teal-dk); outline-offset: 2px; }
.fs-radio__label, .fs-check__label { font-size: var(--fs-t-body); font-weight: 600; }

.fs-policy {
  height: 120px; overflow-y: auto;
  padding: var(--fs-sp-3);
  background: var(--fs-white);
  border: 1px solid var(--fs-line-input);
  font-size: var(--fs-t-xs); line-height: 17px; color: var(--fs-muted-2);
}
.fs-policy strong { color: var(--fs-ink); font-weight: 700; }
.fs-form__actions { display: flex; justify-content: center; margin-block-start: clamp(31px, 30.1px + 0.256vw, 35px); }
@media (min-width: 1024px) { .fs-form__actions { justify-content: flex-start; } }
.fs-form__note { font-size: var(--fs-t-xs); color: var(--fs-muted-2); }

/* 검증 오류 — fs.js 의 initConsultForm 이 [data-fs-err] 에 문구를 넣고 hidden 을 푼다.
   필수표시 점의 --fs-red #F24747 은 크림 위 3.24:1 / 흰 위 3.64:1 로 본문 글자에는 못 쓴다.
   색상·채도는 두고 명도만 내린 --fs-red-aa 를 글자 전용으로 둔다(크림 4.67 · 흰 5.24).
   --fs-orange-aa / --fs-teal-btn-aa 와 같은 방식이다. */
:root { --fs-red-aa: #CE2B2B; }
.fs-form__err {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-t-xs); font-weight: 500; line-height: 1.45;
  color: var(--fs-red-aa);
}
.fs-form__err::before { content: "!"; flex: 0 0 auto; font-weight: 700; }
.fs-form__err[hidden] { display: none; }
.fs-input[aria-invalid="true"],
.fs-select[aria-invalid="true"],
.fs-textarea[aria-invalid="true"] { border-color: var(--fs-red-aa); }

/* ==========================================================================
   13. 오시는길 / 연락처 블록
   ========================================================================== */
.fs-contact { display: grid; gap: clamp(38px, 34.5px + 0.962vw, 53px); }
.fs-contact__col { display: grid; align-content: start; gap: clamp(38px, 34.5px + 0.962vw, 53px); }
.fs-contact__group { display: grid; gap: clamp(16px, 13.8px + 0.609vw, 26px); }
.fs-contact__label { font-size: var(--fs-t-sub); font-weight: 700; line-height: 1.2; }
.fs-contact__tel { font-size: var(--fs-t-tel); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.fs-contact__tel a:hover { color: var(--fs-teal-dk); }
.fs-address { font-size: var(--fs-t-body); font-weight: 500; line-height: var(--fs-lh-body); }
.fs-map { display: block; width: 100%; overflow: hidden; }
.fs-map img { width: 100%; height: 100%; object-fit: cover; }
.fs-map--pc { aspect-ratio: 850 / 360; }
.fs-map--mo { aspect-ratio: 320 / 260; }
@media (max-width: 1023px) { .fs-map--pc { aspect-ratio: 320 / 260; } }
.fs-map iframe { display: block; width: 100%; height: 100%; border: 0; }   /* 카카오맵 퍼가기(assets/map/kakao.html), 2026-10-20 */
@media (min-width: 1024px) {
  .fs-contact { grid-template-columns: minmax(0, 592fr) minmax(0, 848fr); gap: var(--fs-gap-col); }
}

/* ==========================================================================
   14. 히어로 · 진행바
   ========================================================================== */
.fs-hero {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--fs-on-dark);
  background: var(--fs-taupe);
  perspective: var(--fs-perspective);
  perspective-origin: 50% 50%;
}
.fs-hero--tall { min-height: clamp(740px, 671.2px + 4.359vw, 1080px); }
.fs-hero--sub  { min-height: clamp(320px, 287.7px + 8.974vw, 460px); }
.fs-hero__bg { position: absolute; inset: 0; z-index: -1; }
.fs-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.fs-hero__inner { position: relative; width: 100%; }
.fs-hero__copy { display: grid; gap: clamp(17px, 14.6px + 0.673vw, 32px); max-width: 100%; }
.fs-hero--center .fs-hero__copy { justify-items: center; text-align: center; }
.fs-hero__kicker { font-size: clamp(19px, 14.6px + 1.218vw, 38px); font-weight: 500; line-height: 1.25; }
.fs-hero--sub .fs-hero__kicker { font-size: clamp(18px, 17.5px + 0.128vw, 20px); letter-spacing: 0.1em; font-weight: 400; }
.fs-hero__title { font-size: var(--fs-t-hero); font-weight: 600; line-height: 1.05; letter-spacing: var(--fs-ls-tight); }
.fs-hero--sub .fs-hero__title { font-size: var(--fs-t-h1); font-weight: 700; }

.fs-progress { display: flex; align-items: center; gap: clamp(10px, 9.1px + 0.256vw, 14px); }
.fs-progress__num { font-size: clamp(14px, 13.1px + 0.256vw, 18px); font-weight: 700; }
.fs-progress__track {
  position: relative; height: 2px; flex: 0 0 auto;
  width: clamp(100px, 93.3px + 1.859vw, 129px);
  background: rgba(255, 255, 255, .32);
}
.fs-progress__fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: var(--fs-progress, 0%);
  background: var(--fs-white);
  transition: width var(--fs-dur-slow) linear;
}
/* 시안에서는 장식이던 ‖ 표시를 실제 재생/멈춤 버튼으로 쓴다.
   음수 마진으로 클릭 영역만 넓히고 시안의 잉크 위치는 그대로 둔다. */
.fs-progress__pause {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  appearance: none; background: none; border: 0; color: inherit;
  /* 잉크(2px 막대 2개 + 간격 = 7px)는 시안 좌표 그대로 두고, 히트 영역만 33x32 로 넓힌다.
     음수 마진이 넓힌 만큼을 정확히 되돌리므로 플렉스 배치는 7px 짜리와 동일하다. */
  min-width: 33px; min-height: 32px; padding: 0; margin: -10px -13px;
  cursor: pointer; line-height: 0;
}
.fs-progress__pause::before,
.fs-progress__pause::after { content: ""; width: 2px; height: 12px; background: currentColor; }
/* 수동 넘기기 화살표 — 페이저 잉크 높이(12px) 안에 들어가도록 얇게.
   히트 영역은 32px 를 확보하되 음수 마진으로 되돌려 진행바 줄 높이는 그대로 둔다. */
.fs-progress__nav { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 6px; }
.fs-progress__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; background: none; border: 0; color: inherit;
  min-width: 32px; min-height: 32px; padding: 0;
  margin-block: -10px; margin-inline: -7px;
  cursor: pointer; line-height: 0; opacity: .7;
  transition: opacity var(--fs-dur) var(--fs-ease);
}
.fs-progress__arrow:hover,
.fs-progress__arrow:focus-visible { opacity: 1; }
.fs-progress__arrow:disabled { opacity: .3; cursor: default; }
.fs-progress__arrow svg { width: 15px; height: 15px; }

/* 멈춤 상태 = 재생 삼각형 */
.fs-progress__pause.is-paused { gap: 0; }
.fs-progress__pause.is-paused::after { display: none; }
.fs-progress__pause.is-paused::before {
  width: 0; height: 0; background: none;
  border-block: 6px solid transparent;
  border-inline-start: 10px solid currentColor;
}

/* ==========================================================================
   15. 모션 대응 규칙 (fs.js 와 짝)
   —— JS 미탑재/미실행 시에는 전부 최종 정적 상태로 남는다.
   ========================================================================== */

/* 15.1 섹션 진입 3D 리빌 ------------------------------------------------ */
.fs-reveal {
  transition: opacity var(--fs-dur-reveal) var(--fs-ease-out),
              transform var(--fs-dur-reveal) var(--fs-ease-out);
  transition-delay: var(--fs-delay, 0ms);
}
:root.fs-js .fs-reveal {
  opacity: 0;
  transform: perspective(var(--fs-perspective))
             rotateX(var(--fs-reveal-rx))
             translate3d(0, var(--fs-reveal-y), var(--fs-reveal-z));
  transform-origin: 50% 50%;
}
:root.fs-js .fs-reveal.is-in {
  opacity: 1;
  transform: perspective(var(--fs-perspective)) rotateX(0deg) translate3d(0, 0, 0);
}
/* 방향 변형 */
:root.fs-js .fs-reveal--left  { transform: perspective(var(--fs-perspective)) rotateY(calc(-1 * var(--fs-reveal-rx))) translate3d(calc(-1 * var(--fs-reveal-y)), 0, var(--fs-reveal-z)); }
:root.fs-js .fs-reveal--right { transform: perspective(var(--fs-perspective)) rotateY(var(--fs-reveal-rx)) translate3d(var(--fs-reveal-y), 0, var(--fs-reveal-z)); }
:root.fs-js .fs-reveal--fade  { transform: none; }
/* flip: 카드가 바닥에 눕혀져 있다가 세워지는 진입. 카드 행(스텝·포인트)에 쓴다.
   회전축을 아래 모서리(50% 100%)에 두어야 '세워진다'로 읽힌다. */
:root.fs-js .fs-reveal--flip {
  transform-origin: 50% 100%;
  transform: perspective(var(--fs-perspective))
             rotateX(calc(3 * var(--fs-reveal-rx)))
             translate3d(0, calc(0.4 * var(--fs-reveal-y)), var(--fs-reveal-z));
}
:root.fs-js .fs-reveal--left.is-in,
:root.fs-js .fs-reveal--right.is-in,
:root.fs-js .fs-reveal--flip.is-in { transform: perspective(var(--fs-perspective)) rotateY(0deg) rotateX(0deg) translate3d(0, 0, 0); }
/* 최초 화면 안에 있던 대상은 애니메이션 없이 최종 상태로 확정한다 */
.fs-reveal--instant { transition: none !important; }

/* 15.2 카드 3D 틸트 ------------------------------------------------------ */
.fs-tilt { position: relative; }
.fs-tilt__inner {
  position: relative;
  transform: perspective(var(--fs-perspective))
             rotateX(var(--fs-tilt-x, 0deg))
             rotateY(var(--fs-tilt-y, 0deg))
             translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transition: transform var(--fs-dur) var(--fs-ease);
}
.fs-tilt.is-tilting .fs-tilt__inner { transition-duration: 80ms; }
.fs-tilt__gloss {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: var(--fs-gloss-o, 0);
  background: radial-gradient(
    circle at var(--fs-gloss-x, 50%) var(--fs-gloss-y, 50%),
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 255, 255, 0) 55%);
  transition: opacity var(--fs-dur) var(--fs-ease);
}

/* 15.3 히어로 패럴랙스 깊이 --------------------------------------------- */
.fs-parallax { perspective: var(--fs-perspective); perspective-origin: 50% 50%; }
.fs-parallax__layer { transform-origin: 50% 50%; }
/* 변형은 실제로 움직이는 동안(fs-anim-active)만 건다. 정지 상태에서 3D 변형을
   걸어 두면 합성 레이어가 만들어져, 뷰포트/웹폰트 확정 전 래스터가 그대로 남는
   유령 이미지가 생긴다(모바일 렌더에서 재현). */
.fs-parallax__layer.fs-anim-active {
  transform: translate3d(0, var(--fs-py, 0px), var(--fs-pz, 0px))
             rotateX(var(--fs-prx, 0deg))
             scale(var(--fs-ps, 1));
}

/* 15.4 카운트업 ---------------------------------------------------------- */
.fs-count { font-variant-numeric: tabular-nums; }

/* 15.5 will-change 는 JS 가 애니메이션 구간에만 부여한다 ------------------ */
.fs-anim-active { will-change: transform, opacity; }

/* 15.6 스크롤 모션 (2026-10-12, _design/PLAN-scroll-motion-1012.md) ----------
   fs.js 가 붙이는 클래스에만 묶여 있다 — JS 가 없거나 동작 줄이기면 아무것도 숨지 않는다.
   transform 계열(translate·scale)과 opacity 만 움직인다. 히어로 사진은 움직이지 않는다(승인자 10-12). */

/* 15.6.1 섹션 제목 등장 — 라틴 한 줄은 글자마다, 그 밖은 블록째 마스크 안에서. 끝나면 fs.js 가 원래 노드로 되돌린다. */
.fs-title-anim--latin .fs-split__w { display: inline-block; white-space: nowrap; }
.fs-title-anim--latin .fs-split__c { display: inline-block; opacity: 0; translate: 0 .55em; }
.fs-title-anim--latin.is-play .fs-split__c {
  opacity: 1; translate: 0 0;
  transition: opacity 800ms var(--fs-ease-out), translate 800ms var(--fs-ease-out);
  transition-delay: calc(var(--fs-td, 0ms) + var(--fs-cd, 0ms));
}
.fs-title-anim--block .fs-mask { display: block; overflow: clip; padding-block: .14em; margin-block: -.14em; }
.fs-title-anim--block .fs-mask__in { display: block; translate: 0 112%; }
.fs-title-anim--block.is-play .fs-mask__in {
  translate: 0 0;
  transition: translate 1000ms var(--fs-ease-out) var(--fs-td, 0ms);
}

/* 15.6.2 사진 펼침 + 줌 정착 [data-fs-unveil] — 상자를 애니메이션 동안만 잘라 두고(overflow:clip — 서식 문맥을 안 바꾼다)
   안의 층을 상자 폭만큼 밀어 넣는다. ="rtl" 이면 오른쪽에서. [data-fs-unveil-nozoom] 은 줌 없이(사진 위에 선·핀이 얹힌 도해). */
.fs-unveil:not(.is-done) { overflow: clip; }
.fs-unveil:not(.is-done) > :not(figcaption) {
  transition: translate 1100ms var(--fs-ease-out) var(--fs-delay, 0ms),
              opacity 900ms var(--fs-ease-out) var(--fs-delay, 0ms);
}
.fs-unveil:not(.is-in) > :not(figcaption) { translate: calc(-1 * var(--fs-uw, 100%)) 0; }
.fs-unveil.fs-unveil--rtl:not(.is-in) > :not(figcaption) { translate: var(--fs-uw, 100%) 0; }
/* img 가 곧 상자의 자식인 경우가 많다 — 이 규칙이 위 규칙보다 특정성이 높아 transition 을 통째로 덮으므로 셋을 같이 적는다 */
.fs-unveil:not(.is-done):not([data-fs-unveil-nozoom]) img {
  transition: translate 1100ms var(--fs-ease-out) var(--fs-delay, 0ms),
              opacity 900ms var(--fs-ease-out) var(--fs-delay, 0ms),
              scale 1800ms var(--fs-ease-out) var(--fs-delay, 0ms);
}
.fs-unveil:not(.is-in):not([data-fs-unveil-nozoom]) img { scale: 1.12; }
.fs-unveil:not(.is-done) > figcaption.fs-labelbar { transition: opacity 600ms var(--fs-ease) calc(var(--fs-delay, 0ms) + 600ms); }
.fs-unveil:not(.is-in) > figcaption.fs-labelbar { opacity: 0; }
.fs-unveil.fs-reveal--instant,
.fs-unveil.fs-reveal--instant * { transition: none !important; }

/* 15.6.3 스티키 이야기 열 [data-fs-sticky] — 기능형 sticky(LOCK 10 허용). 정지 화면에는 영향이 없다. */
@media (min-width: 1024px) {
  [data-fs-sticky] { position: sticky; top: calc(var(--fs-header-h) + 24px); }
}

/* 15.6.4 덮는 밴드 — [data-fs-stick] 이 화면 바닥에 닿으면 멈추고 같은 .fs-stick-scope 안의 뒤 칸이 덮는다.
   범위 감싸개가 없으면 sticky 가 main 끝까지 남아 위치 지정 안 된 칸(모바일 빠른상담)이 그 밑에 깔려 비친다. */
:root.fs-js .fs-stick { position: sticky; top: var(--fs-stick-top, 0px); z-index: 0; }
:root.fs-js .fs-stick-scope > .fs-stick ~ * { position: relative; z-index: 1; }

/* 15.6.5 헤더 고정 — 내려가면 흰 바로 화면 위에 붙고(.is-stuck) 내릴 때 숨는다(.is-hidden). 오버레이 변형의 색을 전부 덮는다.
   평상시 transform:none — 헤더 안의 고정 서랍(.fs-drawer)이 헤더를 기준으로 잡히지 않게. 그림자 대신 헤어라인(2차 배제: 그림자). */
:root .fs-header.is-stuck {
  position: fixed !important;
  inset-block-start: 0; inset-inline: 0;
  background: rgba(255, 255, 255, .97) !important;
  color: var(--fs-ink) !important;
  border-block-end: 1px solid var(--fs-line);
  transition: transform 400ms var(--fs-ease-out);
}
:root .fs-header.is-stuck::before { display: none !important; }
:root .fs-header.is-stuck :is(.fs-gnb__link, .fs-util__link, .fs-util__sep, .fs-allmenu, .fs-lang, .fs-burger) {
  color: var(--fs-ink) !important; text-shadow: none !important;
}
:root .fs-header.is-stuck :is(.fs-gnb__link, .fs-util__link, .fs-allmenu):hover { color: var(--fs-teal-dk) !important; opacity: 1 !important; }
:root .fs-header.is-stuck.is-hidden { transform: translateY(-100%); }
:root .fs-header.fs-hdr-init { transition: none !important; }

/* ==========================================================================
   16. 반응형 보정 — 가로 스크롤 방지 최종 방어선
   ========================================================================== */
img, picture, video, table, pre { max-width: 100%; }
.fs-table-wrap, .fs-scroll-x { max-width: 100%; overflow-x: auto; }
@media (max-width: 599px) {
  .fs-btnbar__btn { min-height: 46px; }
  .fs-card__body { padding: var(--fs-sp-5); }
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* ==========================================================================
   17. prefers-reduced-motion — 모션 전부 무효화, 최종 정적 상태로 고정
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* 리빌: 항상 최종 상태 */
  :root.fs-js .fs-reveal,
  :root.fs-js .fs-reveal.is-in,
  :root.fs-js .fs-reveal--left,
  :root.fs-js .fs-reveal--right,
  :root.fs-js .fs-reveal--fade {
    opacity: 1 !important;
    transform: none !important;
  }

  /* 틸트: 기울기·광택 제거 */
  .fs-tilt__inner { transform: none !important; }
  .fs-tilt__gloss { opacity: 0 !important; }

  /* 패럴랙스: 원위치 */
  .fs-parallax__layer { transform: none !important; }

  /* 코버플로우: 3D 회전 없이 평면으로, 활성 슬라이드만 선명 */
  .fs-carousel--cover .fs-carousel__slide,
  .fs-carousel--cover .fs-carousel__slide.is-prev,
  .fs-carousel--cover .fs-carousel__slide.is-next,
  .fs-carousel--cover .fs-carousel__slide.is-active {
    transform: none !important;
  }
  .fs-carousel--cover .fs-carousel__slide { opacity: .55; }
  .fs-carousel--cover .fs-carousel__slide.is-active { opacity: 1; }
  .fs-carousel--fade .fs-carousel__slide { transition: none !important; }
  .fs-carousel__track { transition: none !important; }

  /* 호버 이동 제거 */
  .fs-btn:hover, .fs-social__link:hover { transform: none !important; }
  .p-main .ev-banner img,
  .p-main .sf-item .fs-thumb img { transition: none !important; }
  .p-main .ev-banner:hover img,
  .p-main .ev-banner:focus-visible img,
  .p-main .sf-item .fs-thumb:hover img,
  .p-main .sf-item .fs-thumb:focus-visible img { transform: none !important; }

  .fs-anim-active { will-change: auto !important; }

  /* 15.6 스크롤 모션 (10-12) — fs.js 도 이 경우 클래스를 안 붙인다. 덮는 밴드는 멈추지 않는다. */
  .fs-title-anim--latin .fs-split__c,
  .fs-title-anim--block .fs-mask__in,
  .fs-unveil > *, .fs-unveil img { opacity: 1 !important; translate: none !important; scale: none !important; }
  :root.fs-js .fs-stick { position: static; }
}

/* ==========================================================================
   === nose 확장 === — 3D-CT 기능코성형 (draft1/57/index.html) 페이지 스코프
   모든 값은 _src/spec-nose.json 실측(PC 1920 / MO 360) 사이의 선형 보간이다.
   보간식: clamp(MO값, (MO - 360*k)px + (k*100)vw, PC값),  k = (PC-MO)/1560
   ========================================================================== */

/* --- 공통 -------------------------------------------------------------- */
/* 그리드 자식 min-content 팽창 방지 (중간 폭에서 카드가 트랙을 넘는 것을 막는다) */
.fs-nose-intro__grid > *, .fs-nose-dz__grid > *, .fs-nose-dz__cards > *,
.fs-nose-compare__head > *, .fs-nose-compare__group > *,
.fs-nose-tx__slide > *, .fs-nose-tx__cards > *, .fs-nose-tx__card > *,
.fs-nose-contact__grid > * { min-width: 0; }

.fs-page-nose .fs-h2,
.fs-page-nose .fs-sec-head__title { line-height: 1.2; letter-spacing: -0.01em; }  /* 실측 48/40 · 34/28, 자간 실측 */

.fs-nose-head { display: grid; justify-items: start; }
.fs-nose-head .fs-nose-lead { margin-block-start: 12px; }    /* 제목 박스 → 본문 12px */

.fs-nose-arrow { color: var(--fs-arrow-soft); }              /* 링 #111 / 화살표 #767575 */

/* 본문 자간 — 시안 잉크 폭 실측이 Pretendard 기본보다 약 2% 좁다 */
.fs-page-nose .fs-lead,
.fs-page-nose .fs-body,
.fs-page-nose .fs-card__caption,
.fs-page-nose .fs-step__text,
.fs-page-nose .fs-labelbar,
.fs-page-nose .fs-ba__cap,
.fs-page-nose .fs-address,
.fs-page-nose .fs-hours__value,
.fs-page-nose .fs-nose-compare__txt,
.fs-page-nose .fs-nose-ba__note { letter-spacing: -0.025em; }

/* --- 헤더 국기 드롭다운 ------------------------------------------------- */
.fs-nose-lang { padding: 0; }
.fs-nose-lang img { width: clamp(34px, 3px + 2.639vw, 53px); height: auto; aspect-ratio: 53 / 35; }

/* --- 헤더 GNB·유틸 글자 크기 (시안 잉크 폭 실측) ------------------------ */
/* --fs-gnb-fz 를 16px 로 고정하지 않는다. :root 의 유동 곡선이 1920 에서
   똑같이 16px 이고, 그 아래에서만 줄어들어야 「이벤트」가 「로그인」을 덮지 않는다. */
.fs-page-nose .fs-util__link { font-size: 12px; }

/* --- 캐러셀 도트 (시안: 활성 = 틸 링 2px + 흰 링 2px + 틸 코어, 중심 피치 26px) */
.fs-page-nose .fs-carousel__dots { gap: clamp(8px, 7.54px + 0.128vw, 10px); }
.fs-page-nose .fs-carousel__dot {
  width: clamp(14px, 13.1px + 0.256vw, 16px);
  background: none;
  background-image: radial-gradient(circle closest-side at 50% 50%,
    var(--fs-dot) 0 62%, transparent 64%);
}
.fs-page-nose .fs-carousel__dot.is-active {
  width: clamp(14px, 13.1px + 0.256vw, 16px);
  box-shadow: none;
  background-image: radial-gradient(circle closest-side at 50% 50%,
    var(--fs-dot-on) 0 50%, var(--fs-dots-bg, var(--fs-white)) 52% 75%,
    var(--fs-dot-on) 78% 98%, transparent 100%);
}

/* --- 1. 히어로 (y100–559 / MO 60–379) ---------------------------------- */
.fs-nose-hero { background: #D8C9C4; }   /* 2026-09-11 토프 — 히어로 사진 배경을 같은 함수로 옮긴 값 (청록 시절 #D0EBE4 · 구 사진은 #837D77) */
/* 모바일에서 인물이 화면 오른쪽에 오도록 (시안: 얼굴 x150–330) */
.fs-nose-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-nose-hero .fs-hero__bg img { object-position: 56% center; }                       /* 사진 배경 실측 */
@media (max-width: 1023px) { .fs-nose-hero .fs-hero__bg img { object-position: center; } }
.fs-nose-hero .fs-hero__copy { gap: clamp(3px, 0.92px + 0.577vw, 12px); }

/* 히어로 사진 교체(시안 원본이 4배 업스케일 + 문구 지운 손상이라 사용 불가)에 따른 카피 색.
   교체본은 밝은 그레이지 배경이라 흰 글자가 2.14:1 로 떨어진다. 페이지의 다른 제목과
   같은 잉크색으로 내리면 8.5:1 로 AA 를 넘고, 밝고 산뜻한 사진의 결도 살릴 수 있다.
   ★ 되돌리기: 이 블록을 지우면 시안대로 흰 글자로 돌아간다. */
.fs-nose-hero .fs-hero__kicker { color: var(--fs-ink-soft); }
.fs-nose-hero .fs-hero__title  { color: var(--fs-ink); }

/* --- 2. 포시즌의 '코'성형 (y560–1477) ---------------------------------- */
.fs-nose-intro { padding-block: clamp(60px, 44.77px + 4.231vw, 126px) clamp(34px, 36.46px - 0.128vw, 36px); }  /* CT 박스 하단 1443 → 섹션 끝 1477 */
.fs-nose-intro__grid { display: grid; justify-items: center; row-gap: 34px; }
.fs-nose-phone { width: min(100%, 425px); }
/* 모바일 시안의 폰 목업은 콘텐츠 폭(320)보다 살짝 넓다 — 잉크 x18–340 */
@media (max-width: 1023px) { .fs-nose-phone { width: min(325px, 100vw - 30px); } }
.fs-nose-phone img { width: 100%; height: auto; }
.fs-nose-intro__col { display: grid; justify-items: center; text-align: center; }
.fs-nose-intro__h2 { margin-block-start: clamp(18px, 12.92px + 1.410vw, 40px); }
.fs-nose-intro__col .fs-quote { margin-block-start: clamp(11px, 8.92px + 0.577vw, 20px); }
.fs-nose-intro__ct {
  width: clamp(279px, 247.38px + 8.782vw, 416px);
  height: auto;
  margin-block-start: clamp(31px, 26.62px + 1.218vw, 50px);
}
.fs-nose-mark { line-height: 1.05; padding: 2px 4px; }       /* 하이라이트 박스 148×30 */
.fs-nose-ghost {                                             /* 우측 화면 밖 고스트 장비 */
  display: none;
  position: absolute; inset-block-start: 139px; inset-inline-end: 0;
  z-index: 0; width: 430px; height: auto; pointer-events: none;
}
@media (min-width: 1024px) {
  .fs-nose-intro__grid {
    grid-template-columns: 425px minmax(0, 512px);
    column-gap: 48px; justify-content: center; justify-items: start; align-items: start;
    padding-inline-start: 5px;              /* 블록 중심 x962.5 (시안 실측) */
  }
  .fs-nose-intro__col { justify-items: start; text-align: start; padding-block-start: 82px; }
  /* 시안 줄바꿈(2행) 유지 — 폰트 메트릭 차이로 512px 트랙에서 조기 줄바꿈되는 것을 막는다. */
  .fs-nose-intro__col .fs-quote { width: max-content; max-width: 560px; }
  .fs-nose-intro__ct { margin-inline-start: 26px; }
}
/* 2026-09-21 · --fs-t-quote 24→25px 로 max-content 가 539px 가 되어 1024 에서 컨테이너(967px)를
   50px 넘었다(qa 「요소 삐져나감」 2건). 1024~1199 에서만 자동 줄바꿈으로 되돌린다 —
   위 「2행 유지」 처방은 1200+ 전제이고, 1440·1920 은 이미 560px 상한에 걸려 3행이다. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .fs-nose-intro__col .fs-quote { width: auto; }
}
@media (min-width: 1200px) { .fs-nose-ghost { display: block; } }

/* --- 3. 3D-CT 코성형의 중요성 (y1478–2252) ----------------------------- */
.fs-nose-points { padding-block: var(--fs-sec-pb); }
.fs-nose-cards { margin-block-start: clamp(30px, 25.38px + 1.282vw, 50px); }
.fs-nose-point {
  gap: clamp(21px, 17.65px + 0.929vw, 35.5px);
  padding-block: clamp(11px, 8.92px + 0.577vw, 20px) clamp(18px, 12.92px + 1.410vw, 40px);
}
.fs-nose-point .fs-card__icon img { width: 100%; height: 100%; object-fit: contain; }

/* --- 4. 일반 코성형과의 비교 (y2253–3409) ------------------------------ */
.fs-nose-compare-sec { padding-block: var(--fs-sec-pb); }
.fs-nose-compare-title { line-height: 1.19; }                /* 행 피치 71.5/60 */
.fs-nose-hl { color: var(--fs-ink); padding: 2px 10px; line-height: 1; }
.fs-nose-compare { margin-block-start: clamp(32px, 27.50px + 1.250vw, 51.5px); }
.fs-nose-compare__head { display: grid; align-items: end; }
.fs-nose-compare__group { display: flex; flex-direction: column; align-items: center; }
.fs-nose-compare__group > .fs-pill { margin-block-end: 21px; }
.fs-nose-compare__panel { width: 100%; }
.fs-nose-compare__panel img { display: block; width: 100%; height: auto; }  /* 인라인 베이스라인 6px 제거 */
.fs-nose-compare__panel--left { background: var(--fs-fill-gray); padding: 10px; }
.fs-nose-compare__panel--right { background: var(--fs-white); }
.fs-nose-compare .fs-compare__cell { min-height: 78.75px; padding-block: 10px; }  /* 4행 합계 313px 실측 */
.fs-nose-compare__txt { display: block; width: 100%; }
.fs-nose-compare .fs-compare__cell--left,
.fs-nose-compare .fs-compare__cell--right { font-size: var(--fs-t-lead); line-height: 1.5; }
@media (max-width: 1023px) { .fs-nose-compare__group--left { display: none; } }
@media (min-width: 1024px) {
  .fs-nose-compare__head { grid-template-columns: minmax(0, 466fr) minmax(0, 554fr); }
  .fs-nose-compare .fs-compare__cell { padding-block: 8px; }
}

/* --- 5. 실비 보험 적용 질환 (y3410–3909, 5·6 이 하나의 그라데이션) ----- */
.fs-nose-dz {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFCFB 100%);
  padding-block: var(--fs-sec-pb) clamp(30px, 21.69px + 2.308vw, 66px);
}
.fs-nose-dz__grid { display: grid; row-gap: 40px; }
.fs-nose-dz__text .fs-nose-lead { margin-block-start: clamp(18px, 16.38px + 0.449vw, 25px); }
.fs-nose-dz__cards {
  display: grid; align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 3.08px + 1.923vw, 40px);
}
.fs-nose-dz__cards .fs-card { display: grid; }
.fs-nose-dz__fig {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%;
  padding-block-start: clamp(0px, -5.54px + 1.538vw, 24px);   /* 도해 행 높이 보정 */
}
.fs-nose-dz__ill {
  align-self: end; justify-self: center; height: auto;
  margin-block-end: clamp(15px, 6.46px + 2.372vw, 52px);
}
.fs-nose-dz__ill--1 { width: clamp(65px, 32.69px + 8.974vw, 205px); }
.fs-nose-dz__ill--2 { width: clamp(67px, 32.38px + 9.615vw, 217px); }
.fs-nose-dz__ill--3 { width: clamp(47px, 23.92px + 6.410vw, 147px); }
/* 도해마다 라벨바까지 띄운 거리가 다르다 (시안 실측 47 / 41 / 37px) */
.fs-nose-dz__ill--2 { margin-block-end: clamp(13px, 6.08px + 1.923vw, 43px); }
.fs-nose-dz__ill--3 { margin-block-end: clamp(12px, 5.31px + 1.859vw, 41px); }
.fs-nose-dz__fig .fs-labelbar { min-height: 40px; font-size: var(--fs-t-body); line-height: 1.3; }
@media (min-width: 1024px) {
  .fs-nose-dz__grid {
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 60px; row-gap: 0; align-items: start;
  }
  .fs-nose-dz__fig .fs-labelbar { min-height: 35px; }
}

/* --- 6. 코 내부 구조 질환의 치료법 (y3910–4549) ------------------------ */
.fs-nose-tx-sec {
  background: linear-gradient(180deg, #FDFCFB 0%, #F6F1EC 100%);
  padding-block: clamp(30px, 21.69px + 2.308vw, 66px) clamp(60px, 56.77px + 0.897vw, 74px);
}
.fs-nose-tx__head { gap: 16px; margin-block-end: clamp(30px, 25.62px + 1.218vw, 49px); }
/* 시안(PC·MO 공통)의 다음 슬라이드는 3D 회전도 반투명도 없는 평면·불투명이다.
   이 두 줄이 원래 min-width:1024 블록 안에만 있어서, <1024 에서는 코버플로우
   rotateY 가 살아 있었다. 회전한 2번 슬라이드의 모서리가 뷰포트 안쪽으로 밀려
   들어와 제목 '비밸…' 이 음절 중간에서 잘린 조각으로 새어 나왔다. */
.fs-nose-tx.fs-carousel--cover .fs-carousel__slide { opacity: 1; transform: none; }
/* MO 시안은 다음 슬라이드 노출이 없다(x339 밖으로 잉크 0) → 뷰포트에서 잘라낸다.
   PC(≥1024)에서만 overflow:visible 로 풀어 화면 오른쪽 노출을 만든다. */
.fs-nose-tx__viewport { overflow: hidden; }
.fs-nose-tx__track { display: flex; }
.fs-nose-tx__slide { display: grid; row-gap: 44px; }
.fs-nose-tx__cards {
  position: relative; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, 3.08px + 0.256vw, 10px);
}
.fs-nose-tx__card { display: grid; }
/* 라벨바 PC 50 / MO 28 (fs-labelbar 기본 clamp 는 1920에서 35까지만 오른다) */
/* 라벨 바 PC 50 / MO 28 (fs-labelbar 기본 clamp 는 1920에서 35까지만 오른다)
   폰트도 시안대로 20→16 으로 줄인다. --lg 의 18px 고정을 그대로 두면 360px 에서
   '곧게 펴진 비중격 연골' 이 2줄로 접혀 바 높이가 40 vs 54 로 어긋났다. */
.fs-nose-tx__card .fs-labelbar {
  min-height: clamp(28px, 22.92px + 1.410vw, 50px);
  font-size: clamp(16px, 15.08px + 0.256vw, 20px);
}
.fs-nose-tx__box {
  display: grid; place-items: end center;
  background: var(--fs-white); aspect-ratio: 158 / 86;
}
/* 시안: 일러스트는 가운데가 아니라 박스 하단에서 40px 띄워 놓여 있다 */
.fs-nose-tx__ill {
  height: 68%; width: auto; max-width: 86%; object-fit: contain;
  margin-block-end: clamp(11.5px, 4.92px + 1.827vw, 40px);
}
.fs-nose-tx__card:last-of-type .fs-nose-tx__ill { height: 65%; }   /* 치료 후 도해 195/300 */
.fs-nose-tx__mid {
  position: absolute; inset-inline-start: 50%; inset-block-start: 27%;
  transform: translate(-50%, -50%);
}
.fs-nose-tx__panel { display: grid; justify-items: start; }
.fs-nose-tx__title {
  font-size: var(--fs-t-h2); font-weight: 700; line-height: 1.2;
  letter-spacing: var(--fs-ls-tight);
}
.fs-nose-tx__panel .fs-body:first-of-type { margin-block-start: clamp(12px, 10.15px + 0.513vw, 20px); }
.fs-nose-tx__pill { margin-block-start: clamp(20px, 15.38px + 1.282vw, 40px); }
.fs-nose-tx__pill + .fs-body { margin-block-start: clamp(9px, 7.96px + 0.288vw, 13.5px); }
.fs-nose-tx .fs-carousel__dots { margin-block-start: clamp(21px, 16.62px + 1.218vw, 40px); }
@media (max-width: 1023px) { .fs-nose-tx__head .fs-sec-head__action { justify-self: start; } }
@media (min-width: 1024px) {
  /* 시안: 다음 슬라이드가 콘텐츠 폭(x1679) 밖으로 이어져 화면 오른쪽에서 잘린다.
     뷰포트를 잘라내지 않고 html/body 의 overflow-x:clip 에 맡긴다.
     (슬라이드 폭은 뷰포트 clientWidth 기준이므로 뷰포트는 1440 그대로 둔다) */
  .fs-nose-tx__viewport { overflow: visible; }
  .fs-nose-tx__slide {
    grid-template-columns: minmax(0, 850fr) minmax(0, 549fr);
    column-gap: 41px; align-items: start;
  }
  .fs-nose-tx__cards { order: 1; }
  .fs-nose-tx__panel { order: 2; padding-block-start: 40px; }
  .fs-nose-tx__box { aspect-ratio: 420 / 300; }
  .fs-nose-tx__mid { inset-block-start: 42.8%; }
}

/* --- 7. 질병 개선과 미용적 개선을 함께 (y4550–5463) -------------------- */
.fs-nose-ba-sec {
  padding-block: clamp(85px, 74.85px + 2.821vw, 129px) clamp(46px, 40.46px + 1.538vw, 70px);
}
.fs-nose-ba__head { margin-block-end: clamp(30px, 25.62px + 1.218vw, 49px); }
.fs-nose-ba__note {
  margin-block-start: 13px;
  font-size: clamp(15px, 14.77px + 0.064vw, 16px); line-height: 1.5;
}
.fs-nose-ba__viewport { overflow: hidden; }
.fs-nose-ba__track { display: flex; }

.fs-nose-ba .fs-labelbar { min-height: clamp(32px, 28.77px + 0.897vw, 46px); }
.fs-nose-ba .fs-ba__cap {
  padding-block-start: 13px;
  padding-inline: var(--fs-sp-2);
  font-size: clamp(15px, 14.77px + 0.064vw, 16px); line-height: 1.5;
}
.fs-nose-ba .fs-carousel__dots { margin-block-start: clamp(15px, 9.69px + 1.474vw, 38px); }
.fs-nose-ba__nav { display: none; }
@media (min-width: 1024px) {
  .fs-nose-ba__nav { display: flex; inset-block-start: 55%; inset-inline: 0; }
}
@media (min-width: 1700px) { .fs-nose-ba__nav { inset-inline: -90px; } }

/* --- 8. 실비보험 청구 절차 (y5464–6070) -------------------------------- */
.fs-nose-steps-sec {
  padding-block: clamp(40.7px, 36.02px + 1.301vw, 61px) clamp(32px, 23.92px + 2.244vw, 67px);
}
/* 제목 잉크 → 설명 잉크 36px (importance 24.5px 와 다르다) */
.fs-nose-steps-sec .fs-nose-lead { margin-block-start: clamp(12px, 9.23px + 0.769vw, 24px); }
.fs-nose-steps { margin-block-start: clamp(30.5px, 26px + 1.250vw, 50px); }
.fs-nose-step { align-content: start; gap: 25px; padding-block-start: 30px; }
.fs-nose-step .fs-pill { min-height: 35px; font-size: 16px; }
.fs-nose-step .fs-step__text { font-size: 20px; line-height: 1.5; }

/* --- 9. 대표전화 · 진료시간 · 오시는길 (y6071–6727) -------------------- */
/* 2026-09-14 · 승인자 「연락 섹션을 전 페이지 91(병원소개)과 같게 통일」 — 위 여백을 91(.about-contact)과 같은 값으로,
   지도 아래에 네이버/카카오 길찾기 바(.fs-nose-contact__btns)를 91 처럼 지도에 붙인다(열 row-gap 0, 지도만 20px 띄움). */
.fs-nose-contact { padding-block: clamp(57px, 40.615385px + 4.551282vw, 128px) var(--fs-sec-pb); }
/* 2026-09-15 · 승인자 「연락 섹션 색상을 푸터 배경색으로」 — 106장 연락 섹션 3종(.fs-nose-contact · .p-contact · .about-contact) 공통.
   모디파이어 클래스를 늘리지 않고 id 로 건다(LOCK 4 (c) 개수 불변). 푸터(.fs-footer)와 한 면으로 이어진다. */
#contact.fs-section { background: var(--fs-gray); }
.fs-nose-contact .fs-contact__col { gap: clamp(32px, 26.38px + 1.538vw, 52px); }
.fs-nose-contact .fs-nose-contact__col--map { gap: 0; }
.fs-nose-contact .fs-nose-contact__col--map > .fs-map { margin-block-start: 20px; }
.fs-nose-contact .fs-contact__group { gap: clamp(10px, 8.62px + 0.385vw, 16px); }
.fs-nose-contact .fs-contact__label { font-size: clamp(18px, 17.54px + 0.128vw, 20px); line-height: 1.2; }
.fs-nose-contact .fs-contact__tel { font-size: clamp(24px, 20.31px + 1.026vw, 40px); line-height: 1.05; }
.fs-nose-contact .fs-hours__label,
.fs-nose-contact .fs-hours__value { font-weight: 600; }
/* '점심시간' 4자가 라벨 열(54px)에서 줄바꿈되지 않게 한다 — 값 열 시작 x334 유지 */
.fs-nose-contact .fs-hours__label { white-space: nowrap; }
/* 라벨 열 53px 고정 + 41px → 값 열 x334 (시안 실측) */
@media (min-width: 1024px) {
  .fs-nose-contact .fs-hours__row { grid-template-columns: 53px minmax(0, 1fr); column-gap: 41px; }
  .fs-nose-contact .fs-nose-contact__col--map .fs-contact__group { gap: 13px; }
  .fs-nose-contact .fs-nose-contact__col--map { gap: 18px; }
}

/* --- 푸터 (시안 실측 보정: 글자 크기·정보행 굵기·우측 컬럼 간격) -------- */
.fs-page-nose .fs-footer { font-size: 13px; }          /* 2026-08-20: 시안 역산 11.8px 는 판독 불가 → 13px */
.fs-page-nose .fs-footer__label { font-size: 12.5px; }
.fs-page-nose .fs-footer__brand { gap: 32px; }         /* 로고 잉크 → 1행 잉크 34px */
.fs-page-nose .fs-footer__copy {
  min-height: 0;                                       /* 마지막 행은 행높이만 (푸터 274px) */
  /* MO 시안 카피라이트는 정보행보다 작은 1행. 11.8px 고정이면 360에서 2행으로 넘친다 */
  font-size: clamp(9px, 8.22px + 0.192vw, 11.8px);
}
.fs-page-nose .fs-footer__line,
.fs-page-nose .fs-footer__copy { font-weight: 600; }
@media (min-width: 1024px) {
  .fs-page-nose .fs-footer__inner { column-gap: clamp(40px, 6.4px + 5.450vw, 111px); }
}
.fs-nose-contact .fs-map picture { display: block; height: 100%; }
@media (min-width: 1024px) {
  .fs-nose-contact__grid { grid-template-columns: minmax(0, 591fr) minmax(0, 849fr); gap: 0; }
}

/* ==========================================================================
   === about 확장 === — draft1/91/index.html (병원소개) 페이지 스코프
   값은 전부 _src/spec-about.json 실측 + _src/pick.py 스포이드 결과다.
   보간식: v = MO360 + (PC1920 - MO360)/15.6 * vw
   ========================================================================== */
.fs-page-about {
  --about-content: min(calc(100vw - var(--fs-gutter) * 2), var(--fs-container));
  /* 콘텐츠(1440) 밖에 남는 한쪽 여백 — 캐러셀이 여기로 이웃 슬라이드를 흘린다(LOCK 6).
     1920=240 · 1700=130 · 1440=33.9 · 1024=28.5 */
  --about-peek: max(0px, calc((100vw - var(--about-content)) / 2));
  /* 섹션 제목 39px(PC) / 27px(MO) — 공통 --fs-t-h2(40/28)와 다른 about 전용 값 */
  --about-t-h2:     clamp(27px, 24.230769px + 0.769231vw, 39px);
  /* 부제·다크밴드 본문 20px(PC) — 시안 실측 폭 기준으로 공통 19px 를 덮는다
     (핵심/약속/인테리어 부제·시스템 본문이 모두 렌더에서 5% 좁았다) */
  --fs-t-sub:       clamp(18px, 17.307692px + 0.192308vw, 21px);
  --about-t-role:   clamp(19px, 18.076923px + 0.256410vw, 23px);
  --about-lh-body:  clamp(23px, 22.769231px + 0.064103vw, 24px);
  --about-lh-sub:   clamp(27px, 26.307692px + 0.192308vw, 30px);
}

/* --- 1. 히어로 --------------------------------------------------------- */
.about-hero {
  min-height: clamp(200px, 163.076923px + 10.256410vw, 360px);
  background: #8A827A;                       /* 사진 로딩 전 평균색(실측) */
}
.about-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
.about-hero .fs-hero__copy { gap: clamp(7px, 4.692308px + 0.641026vw, 17px); }
.fs-hero--sub .about-hero__kicker {
  font-family: var(--fs-font-en);
  font-size: clamp(20px, 19.538462px + 0.128205vw, 22px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fs-hero--sub .about-hero__title {
  font-size: clamp(23px, 19.538462px + 0.961538vw, 38px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0;
}

/* --- 2. 인트로 --------------------------------------------------------- */
.about-intro {
  /* 상단 131px(PC) — 공통 --fs-sec-pt(136) 보다 5px 작다(시안 실측) */
  padding-block: clamp(61px, 45.076923px + 4.423077vw, 130px) clamp(56px, 38.461538px + 4.871795vw, 132px);
}
.about-intro__title {
  font-size: var(--about-t-h2);
  font-weight: 700;
  line-height: clamp(34px, 30.769231px + 0.897436vw, 48px);
  letter-spacing: 0;
}
.about-intro__figure { margin-block-start: clamp(19px, 12.076923px + 1.923077vw, 49px); }
.about-intro__figure img { width: 100%; height: auto; aspect-ratio: 320 / 140; object-fit: cover; }
.about-intro__body { margin-block-start: clamp(30px, 24.923077px + 1.410256vw, 52px); display: grid; gap: 16px; }
.about-intro__sub {
  font-size: clamp(20px, 19.076923px + 0.256410vw, 24px);
  font-weight: 700; line-height: 1.25; letter-spacing: 0;
}
.about-intro__text {
  font-size: var(--fs-t-body);
  font-weight: 500;                      /* 시안 본문 획 두께 실측 */
  line-height: var(--about-lh-body);
  letter-spacing: var(--fs-ls-tight);
}
@media (min-width: 1024px) {
  .about-intro__figure img { aspect-ratio: 1440 / 340; }
  .about-intro__body { grid-template-columns: minmax(0, 578fr) minmax(0, 822fr); column-gap: 40px; row-gap: 0; }
}

/* --- 3. 의료진 --------------------------------------------------------- */
/* 2026-09-01 재조판 — 1mm Plastic Surgery «Medical Team» 의 조판 구조를 번안했다.
   가져온 것 ① 이름을 섹션 제목보다 크게 세우고 그 위에 액센트 킥커 한 줄
             ② 약력은 불릿 없는 소본문 그룹, 그룹 사이는 빈 줄로만 나눈다
             ③ 학회 목록은 접이식 행으로 내려 첫 화면을 비운다
             ④ 인물컷을 플랫 색면 위에 세운다 — about/doctor-p*.jpg 는 세 컷의
                스튜디오 배경을 같은 웜 그레이지 rgb(232,228,222) 로 맞춰 구운 것이다.
   번안한 것 둥근 모서리·그림자는 안 쓰고(LOCK 1 · 2차규칙 「그림자 0」),
             액센트는 틸 한 색(LOCK 3), 접이 표시는 원형 1px 아웃라인(LOCK 9 어휘)이다. */
.about-doctors {
  padding-block: clamp(61px, 45.769231px + 4.230769vw, 127px) var(--fs-sec-pb);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 16%, #F6F1EC 100%);
  /* 이름 30→49. 섹션 제목(--about-t-h2 39)보다 크지만 LOCK 7(d) 판정 대상 선택자가 아니다 */
  --about-t-name: clamp(30px, 25.62px + 1.217949vw, 49px);
}
.about-doctor { display: grid; gap: clamp(26px, 22.31px + 1.025641vw, 42px); }
.about-doctor + .about-doctor { margin-block-start: clamp(58px, 44.15px + 3.846154vw, 118px); }

/* 인물컷 = 플랫 색면 카드. 라벨바는 프레임 «안» 에 둔다 —
   fs.js 는 [data-fs-tilt-inner] 하나만 돌리므로 밖에 두면 바만 제자리에 남는다. */
.about-doctor__frame { display: block; position: relative; overflow: hidden; }
.about-doctor__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.about-doctor__bar {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 2;
  justify-content: flex-start; text-align: start;
  padding-inline: clamp(14px, 12.15px + 0.512821vw, 22px);
}
.about-doctor__role {
  font-size: var(--fs-t-pill);
  font-weight: 700; line-height: 1.2; letter-spacing: var(--fs-ls-wide);
  color: var(--fs-teal);          /* 문서 말미 AA 보정이 --fs-teal-text #00787F 로 덮는다 */
}
.about-doctor__name {
  margin-block-start: clamp(10px, 8.15px + 0.512821vw, 18px);
  font-size: var(--about-t-name);
  font-weight: 700; line-height: 1.15; letter-spacing: var(--fs-ls-tight);
}
.about-doctor__name--solo { margin-block-start: 0; }
.about-doctor__bio {
  margin-block-start: clamp(24px, 19.38px + 1.282051vw, 44px);
  font-size: var(--fs-t-body);
  font-weight: 400;
  line-height: var(--about-lh-body);
  letter-spacing: var(--fs-ls-tight);
}
.about-doctor__group + .about-doctor__group { margin-block-start: clamp(20px, 19.076923px + 0.256410vw, 24px); }

/* 학회 목록 접이 행 — <details> 라 fs.js 를 건드리지 않고 열린다.
   선은 --fs-line(#EDEDED) 이 아니라 --fs-line-input(#E3D8CE) 이다. 이 섹션은 아래로 갈수록
   크림(#F6F1EC)이라 #EDEDED 는 마지막 원장 블록에서 배경에 묻힌다. */
.about-doctor__acc {
  margin-block-start: clamp(24px, 20.31px + 1.025641vw, 40px);
  border-block: 1px solid var(--fs-line-input);
}
.about-doctor__accsum {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fs-sp-5);
  padding-block: clamp(14px, 12.15px + 0.512821vw, 22px);
  list-style: none; cursor: pointer;
  font-size: var(--fs-t-sub); font-weight: 700;
  line-height: 1.3; letter-spacing: var(--fs-ls-tight);
}
.about-doctor__accsum::-webkit-details-marker { display: none; }
.about-doctor__accmark {
  position: relative; flex: none;
  width: clamp(28px, 27.077px + 0.256410vw, 32px); aspect-ratio: 1;
  border: 1px solid var(--fs-line-ink);
  border-radius: var(--fs-radius-round);
  transition: background-color var(--fs-dur) var(--fs-ease);
}
.about-doctor__accmark::before,
.about-doctor__accmark::after {
  content: ""; position: absolute; inset-inline: 30%;
  inset-block-start: calc(50% - 0.5px); height: 1px;
  background: var(--fs-ink);
  transition: background-color var(--fs-dur) var(--fs-ease),
              transform var(--fs-dur) var(--fs-ease);
}
.about-doctor__accmark::after { transform: rotate(90deg); }
.about-doctor__acc[open] .about-doctor__accmark::after { transform: rotate(0deg); }
.about-doctor__accsum:hover .about-doctor__accmark { background: var(--fs-ink); }
.about-doctor__accsum:hover .about-doctor__accmark::before,
.about-doctor__accsum:hover .about-doctor__accmark::after { background: var(--fs-white); }
.about-doctor__acclist { padding-block-end: clamp(16px, 13.69px + 0.641026vw, 26px); }

/* 김다빈 원장은 킥커가 없고 모바일에서 이름→약력 간격이 더 좁다(시안 실측 15px) */
@media (max-width: 1023px) {
  .about-doctor__name--solo + .about-doctor__bio { margin-block-start: 15px; }
  .about-doctor__photo { max-width: min(100%, 440px); }
}
@media (min-width: 1024px) {
  .about-doctors { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 21%, #F6F1EC 100%); }
  .about-doctor {
    grid-template-columns: minmax(0, 440fr) minmax(0, 960fr);
    column-gap: var(--fs-sp-9);
    align-items: start;
  }
}

/* --- 4. 시스템 다크 밴드 ------------------------------------------------ */
.about-system__grid { display: grid; }
.about-system__photo { overflow: hidden; aspect-ratio: 360 / 227; }
.about-system__photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.about-system__copy {
  padding-block: 60px 61px;
  padding-inline: var(--fs-gutter);
}
.about-system__title {
  display: grid;
  font-size: var(--fs-t-mega);
  font-weight: 700; line-height: 1.24; letter-spacing: 0;
}
.about-system__l2 { color: var(--fs-teal-neon); }
.about-system__body {
  margin-block-start: clamp(37px, 35.153846px + 0.512821vw, 45px);
  /* MO 18 / PC 20 — 공통 부제(17/20)와 다르다(시안 잉크폭 실측) */
  font-size: clamp(18px, 17.538462px + 0.128205vw, 20px);
  font-weight: 500;
  line-height: var(--about-lh-sub);
  letter-spacing: var(--fs-ls-tight);
}
@media (min-width: 1024px) {
  .about-system__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .about-system__photo { aspect-ratio: 960 / 604; }
  .about-system__copy { padding: 38px 40px 36px 80px; }
  .about-system__body { margin-block-start: 49px; }
}

/* 손그림 낙서 — 시안 스트로크 #125551, 글자는 실제 HTML 텍스트 */
.about-scribble { position: relative; display: inline-block; }
.about-scribble__mark {
  position: absolute; z-index: 0;
  inset-inline: -0.13em -0.10em;
  inset-block: -0.20em -0.24em;
  width: auto; height: auto;
  overflow: visible;
  pointer-events: none;
}
.about-scribble__mark path {
  fill: none;
  stroke: var(--fs-teal-ink);
  stroke-width: clamp(2px, 1.538462px + 0.128205vw, 4px);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.about-scribble__t { position: relative; z-index: 1; }

/* --- 도트 (core / interior 공통 형태) ------------------------------------
   PC: 활성 16px 단색 / 비활성 10px, 피치 26 — MO: 활성 8px+2px 링 / 비활성 8px, 피치 22
   ---------------------------------------------------------------------- */
.about-core__dots,
.about-interior__dots {
  display: flex; justify-content: center; align-items: center;
  gap: 0;
  margin-block-start: clamp(17px, 12.615385px + 1.217949vw, 36px);
}
.about-dot,
/* .is-active 까지 함께 잡아 .fs-section--cream .fs-carousel__dot.is-active (배경 채움)
   보다 명시도를 높인다 — core 도트는 링 모양을 ::before 로만 그린다. */
.about-core__dots .fs-carousel__dot,
.about-core__dots .fs-carousel__dot.is-active,
.about-interior__dots .fs-carousel__dot {
  display: grid; place-items: center;
  width: clamp(22px, 21.076923px + 0.256410vw, 26px);
  height: clamp(22px, 21.076923px + 0.256410vw, 26px);
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.about-dot::before,
.about-core__dots .fs-carousel__dot::before,
.about-interior__dots .fs-carousel__dot::before {
  content: ""; display: block;
  width: 8px; height: 8px;
  border-radius: var(--fs-radius-round);
  background: var(--fs-dot-cream);
  transition: width var(--fs-dur) var(--fs-ease), height var(--fs-dur) var(--fs-ease),
              background-color var(--fs-dur) var(--fs-ease), box-shadow var(--fs-dur) var(--fs-ease);
}
.about-interior__dots .fs-carousel__dot::before { background: var(--fs-dot); }
.about-dot.is-active::before,
.about-core__dots .fs-carousel__dot.is-active::before,
.about-interior__dots .fs-carousel__dot.is-active::before {
  background: var(--fs-dot-on);
  box-shadow: 0 0 0 1px var(--fs-cream), 0 0 0 3px var(--fs-dot-on);
}
.about-interior__dots .fs-carousel__dot.is-active::before { box-shadow: 0 0 0 1px var(--fs-white), 0 0 0 3px var(--fs-dot-on); }
.about-dot--pc { display: none; }
@media (min-width: 1024px) {
  .about-dot::before,
  .about-core__dots .fs-carousel__dot::before,
  .about-interior__dots .fs-carousel__dot::before { width: 10px; height: 10px; }
  /* PC 시안 실측(x900–915 · y4610–4625): 코어 10px + 배경색 갭 1px + 틸 링 2px = 16px */
  .about-dot.is-active::before,
  .about-core__dots .fs-carousel__dot.is-active::before,
  .about-interior__dots .fs-carousel__dot.is-active::before { width: 10px; height: 10px; }
  .about-dot.is-active::before,
  .about-core__dots .fs-carousel__dot.is-active::before { box-shadow: 0 0 0 1px var(--fs-cream), 0 0 0 3px var(--fs-dot-on); }
  .about-interior__dots .fs-carousel__dot.is-active::before { box-shadow: 0 0 0 1px var(--fs-white), 0 0 0 3px var(--fs-dot-on); }
  .about-dot--pc { display: grid; }
}

/* --- 5. 포시즌의 핵심 ---------------------------------------------------- */
.about-core {
  padding-block: clamp(58px, 41.615385px + 4.551282vw, 129px) clamp(17px, 9.384615px + 2.115385vw, 50px);
}
.about-core__head { display: grid; gap: 31px; }
.about-core__h2,
.about-promise__h2 {
  font-size: var(--about-t-h2);
  font-weight: 700; line-height: 1.25; letter-spacing: 0;
}
.about-core__sub,
.about-promise__sub,
.about-interior__sub {
  margin-block-start: 9px;
  font-size: var(--fs-t-sub);
  line-height: var(--about-lh-sub);
  letter-spacing: var(--fs-ls-tight);
}
.about-core__sub { font-weight: 400; margin-block-start: 10px; }
.about-promise__sub, .about-interior__sub { font-weight: 500; }
.about-core__nav { display: flex; gap: 8px; }

.about-core__stage { position: relative; margin-block-start: clamp(31px, 27.538462px + 0.961538vw, 46px); }
.about-core__viewport { overflow: hidden; }
.about-core__slide { display: grid; gap: 30px; }
.about-core__photo { order: 2; }
.about-core__text  { order: 1; }
.about-core__frame { display: block; overflow: hidden; }
.about-core__photo img { width: 100%; height: auto; aspect-ratio: 640 / 380; object-fit: cover; }
.about-core__num {
  font-size: clamp(27px, 23.076923px + 1.089744vw, 44px);
  font-weight: 500; line-height: 1; letter-spacing: 0;
  color: var(--fs-teal);
}
.about-core__kicker {
  margin-block-start: clamp(31px, 26.153846px + 1.346154vw, 52px);
  font-size: var(--about-t-role);
  font-weight: 700; line-height: 1.25; letter-spacing: 0;
}
.about-core__title {
  margin-block-start: 4px;
  font-size: clamp(23px, 19.307692px + 1.025641vw, 39px);
  font-weight: 700; line-height: 1.25; letter-spacing: 0;
}
.about-core__body {
  margin-block-start: clamp(17px, 15.615385px + 0.384615vw, 23px);
  font-size: var(--fs-t-body);
  line-height: var(--about-lh-body);
  letter-spacing: var(--fs-ls-tight);
}
/* 슬라이드 꼬리 스트립 — 그 «슬라이드 자신의» 사진을 세로 조각으로 한 번 더 둔다.
   빈 본문 열 끝에 절대배치하므로 활성 장에서는(opacity 0) 안 보이고, 한 칸 뒤로 밀려
   .is-prev 가 되면 화면 왼쪽 끝에 «이전 슬라이드 사진» 으로 정확히 걸린다.
   2026-09-01 이전에는 이 자리에 core-peek-prev/next.jpg 두 장이 «정적 <img>» 로 박혀 있어서
   화살표를 눌러도 좌우 조각만 그대로 남았다(승인자 지적). 이제 트랙과 함께 움직인다. */
.about-core__strip { display: none; }
@media (min-width: 1024px) {
  .about-core__head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
  .about-core__nav { margin-inline-end: 20px; align-self: start; margin-block-start: 35px; }
  .about-core__slide { grid-template-columns: minmax(0, 640fr) minmax(0, 750fr); column-gap: 50px; align-items: start; }
  .about-core__photo { order: 0; }
  .about-core__num { margin-block-start: 52px; }
  /* LOCK 6 — 잘림은 뷰포트가 아니라 html/body 의 overflow-x:clip 이 맡는다.
     뷰포트 폭(1440)은 건드리지 않는다. fs.js:554 가 이 값으로 슬라이드 폭을 잡는다. */
  .about-core__viewport { overflow: visible; }
  .about-core__slide { position: relative; }
  .about-core__strip {
    display: block; position: absolute; inset-block-start: 0; z-index: 0;
    inset-inline-end: 0; width: var(--about-peek);
    height: calc(var(--about-content) * 0.263889);   /* = 사진 높이 380 @1920 */
    overflow: hidden; opacity: 0;
    transition: opacity var(--fs-dur-slow) var(--fs-ease-out);
  }
  .about-core__strip img { width: 100%; height: 100%; object-fit: cover; }
  .about-core__slide.is-prev .about-core__strip { opacity: 1; }
  /* 감광은 .fs-carousel__slide 기본값이 아니라 .is-prev/.is-next 에 건다 —
     기본값에 걸면 fs.js 실행 전과 JS 없는 환경에서 캐러셀 전체가 흐리게 굳는다. */
  .about-core__slide.is-prev,
  .about-core__slide.is-next {
    opacity: var(--fs-cover-fade, .55);
    transition: opacity var(--fs-dur-slow) var(--fs-ease-out);
  }
}

/* --- 6. 포시즌의 3가지 약속 ---------------------------------------------- */
.about-promise { padding-block: clamp(16px, 9.538462px + 1.794872vw, 44px) clamp(60px, 43.846154px + 4.487179vw, 130px); }
.about-promise__body {
  margin-block-start: clamp(19px, 12.538462px + 1.794872vw, 47px);
  display: grid; gap: 21px;
}
.about-promise__photo { order: 2; }
.about-promise__photo img { width: 100%; height: auto; aspect-ratio: 700 / 436; object-fit: cover; }
.about-promise__cards { order: 1; display: grid; gap: 20px; }
.about-promise__card { position: relative; background: var(--fs-white); }
.about-promise__inner {
  display: grid;
  padding: 18px 20px;
  border-block-start: 2px solid var(--fs-teal);
}
.about-promise__num {
  font-size: clamp(20px, 18.846154px + 0.320513vw, 25px);
  font-weight: 700; line-height: 1; letter-spacing: 0;
  color: var(--fs-teal);
}
.about-promise__headline { display: grid; margin-block-start: 20px; }
.about-promise__cardsub {
  /* 카드 소제목은 섹션 부제(20px)와 달리 19px — 시안 잉크폭 실측 */
  font-size: clamp(16px, 15.307692px + 0.192308vw, 19px);
  font-weight: 500; line-height: clamp(24px, 23.538462px + 0.128205vw, 26px); letter-spacing: 0;
}
.about-promise__cardtitle {
  margin-block-start: 4px;
  font-size: clamp(19px, 17.153846px + 0.512821vw, 27px);
  font-weight: 700; line-height: 1.25; letter-spacing: 0;
}
.about-promise__desc {
  margin-block-start: 13px;
  font-size: var(--fs-t-body);
  line-height: var(--about-lh-body);
  letter-spacing: var(--fs-ls-tight);
  color: var(--fs-muted);
}
@media (min-width: 1024px) {
  .about-promise__body { grid-template-columns: minmax(0, 700fr) minmax(0, 700fr); column-gap: 40px; align-items: start; }
  .about-promise__photo { order: 0; }
  .about-promise__cards { order: 0; }
  .about-promise__inner {
    grid-template-columns: auto minmax(0, 248fr) minmax(0, 348fr);
    column-gap: 28px;
    align-items: center;
    min-height: 132px;
    padding: 20px 0 20px 18px;
    border-block-start: 0;
    border-inline-start: 2px solid var(--fs-teal);
  }
  .about-promise__headline { margin-block-start: 0; }
  .about-promise__cardtitle { margin-block-start: 0; }
  .about-promise__desc { margin-block-start: 0; }
}

/* --- 7. FOUR SEASONS INTERIOR ------------------------------------------- */
.about-interior { padding-block: clamp(59px, 42.62px + 4.551vw, 130px) clamp(58px, 42.31px + 4.359vw, 126px); }
.about-interior__title {
  font-family: var(--fs-font);
  font-size: var(--fs-t-en);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.06em;              /* 시안 장체 재현: 실측 폭 518px @47px */
  text-transform: uppercase;
}
.about-interior__sub { margin-block-start: 8px; font-size: clamp(18px, 17.538462px + 0.128205vw, 20px); }
/* 화살표 — 「핵심」 캐러셀과 같은 배치(제목 우측). 2026-09-01 신설:
   이 캐러셀에는 도트만 있고 화살표가 «HTML 에 아예 없어서» 안 보였다(승인자 지적). */
.about-interior__head { display: grid; gap: clamp(20px, 17.69px + 0.641026vw, 30px); }
.about-interior__nav { display: flex; gap: var(--fs-sp-2); }
.about-interior__carousel { margin-block-start: clamp(28px, 23.85px + 1.154vw, 46px); }
.about-interior__viewport { overflow: hidden; }
.about-interior__track { align-items: flex-end; }
.about-interior__slide { position: relative; }
.about-interior__slide img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fs-page-about .about-interior .fs-carousel__slide {
  opacity: 1;
  transform: none;
  align-self: flex-end;
}
@media (min-width: 1024px) {
  .about-interior__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--fs-sp-5); }
  .about-interior__nav { align-self: end; }
  .about-interior__carousel { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
  /* 슬라이드 기본폭 = 활성 슬라이드 실측폭 720px(per-view 2.61944 / gap 21).
     활성은 변형 없이 원본 배율로 그려야 사진이 뭉개지지 않는다. */
  .fs-page-about .about-interior .fs-carousel__slide {
    transform: scale(0.644444);          /* 464 / 720 — 시안 이웃 슬라이드 실측 */
    transform-origin: 0 100%;
    transition: transform var(--fs-dur-slow) var(--fs-ease-out);
  }
  /* 시안 필름스트립은 활성 이웃 바깥부터 피치 484px(=464+20) 로 균일하다.
     기본 트랙 피치는 741px 이므로 한 칸 멀어질 때마다 257.5px 씩 당겨온다. */
  .fs-page-about .about-interior .fs-carousel__slide.is-prev { transform-origin: 100% 100%; }
  .fs-page-about .about-interior .fs-carousel__slide.is-prev {
    transform: translateX(calc(var(--about-strip-k, 0) * 257.5px)) scale(0.644444);
  }
  .fs-page-about .about-interior .fs-carousel__slide.is-next {
    transform: translateX(calc(var(--about-strip-k, 0) * -257.5px)) scale(0.644444);
  }
  .fs-page-about .about-interior .fs-carousel__slide.is-prev:has(+ .is-prev) { --about-strip-k: 1; }
  .fs-page-about .about-interior .fs-carousel__slide.is-prev:has(+ .is-prev + .is-prev) { --about-strip-k: 2; }
  .fs-page-about .about-interior .fs-carousel__slide.is-next + .is-next { --about-strip-k: 1; }
  .fs-page-about .about-interior .fs-carousel__slide.is-next + .is-next + .is-next { --about-strip-k: 2; }
  .fs-page-about .about-interior .fs-carousel__slide.is-active {
    transform: none;
    z-index: 2;
  }
  .about-interior__slide::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(255, 255, 255, .6);  /* 시안 이웃 슬라이드 흰색 60% 페이드(실측) */
    transition: opacity var(--fs-dur-slow) var(--fs-ease-out);
  }
  .about-interior__slide.is-active::after { opacity: 0; }
}

/* --- 8. 대표전화 / 진료시간 / 오시는길 ------------------------------------ */
.about-contact { padding-block: clamp(57px, 40.615385px + 4.551282vw, 128px) var(--fs-sec-pb); }
.about-contact__grid { display: grid; gap: 32px; }
.about-contact__col--info { display: grid; align-content: start; gap: clamp(32px, 27.153846px + 1.346154vw, 53px); }
.about-contact__label {
  font-size: var(--fs-t-sub);
  font-weight: 700; line-height: 1.2; letter-spacing: 0;
}
.about-contact__tel {
  margin-block-start: clamp(12px, 10.846154px + 0.320513vw, 17px);
  font-size: var(--fs-t-tel);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
}
.about-contact__tel a:hover { color: var(--fs-teal-dk); }
.about-contact__hours { margin-block-start: clamp(7px, 4.923077px + 0.576923vw, 16px); }
.fs-page-about .fs-hours__row { column-gap: 40px; min-height: clamp(27px, 26.769231px + 0.064103vw, 28px); }
.fs-page-about .fs-hours__label,
.fs-page-about .fs-hours__value { font-weight: 500; letter-spacing: var(--fs-ls-tight); }
/* 라벨 열 폭 = '점심시간' 자연폭 (MO 15px→52 / PC 16px→56). 좁으면 折行된다. */
/* 라벨 4자 양끝정렬 — 시안 실측 폭 MO 50 / PC 53.
   CJK 2~3자에는 text-align-last:justify 가 동작하지 않아 글자별 flex 로 재현한다. */
.fs-page-about .fs-hours__label {
  display: flex;
  justify-content: space-between;
  width: clamp(52px, 51.307692px + 0.192308vw, 55px);
  text-align: start;
  text-align-last: auto;
}
.about-contact__address {
  font-weight: 500;
  margin-block-start: 13px;
  font-size: 16px;                 /* 시안 실측: PC/MO 동일 16px/24 (본문 15px과 다름) */
  font-weight: 400;
  line-height: 24px;
  letter-spacing: var(--fs-ls-tight);
}
.about-contact__map { margin-block-start: 20px; }
.about-contact__map img { width: 100%; height: auto; object-fit: cover; }
.about-contact__map-pc { display: none; }
.about-contact__map-mo { aspect-ratio: 320 / 260; }
.fs-page-about .fs-btnbar__btn {
  min-height: 44px;
  font-size: var(--fs-t-sub);
  font-weight: 700;
  letter-spacing: var(--fs-ls-tight);
}
@media (min-width: 1024px) {
  .about-contact__grid { grid-template-columns: minmax(0, 592fr) minmax(0, 848fr); column-gap: 0; }
  .about-contact__map-pc { display: block; aspect-ratio: 848 / 360; }
  .about-contact__map-mo { display: none; }
  .fs-page-about .fs-btnbar__btn { min-height: 50px; }
}

/* --- 푸터 (시안 실측 컬럼 위치) ------------------------------------------ */
.about-footer {
  font-size: 12px;                                    /* 시안 실측: 주소 잉크 폭 256px */
  letter-spacing: -0.02em;
  padding-block: var(--fs-footer-py) clamp(29px, 25.538462px + 0.961538vw, 44px);
}
.about-footer .fs-footer__inner { gap: 19px; }
.about-footer .fs-footer__copy { font-size: clamp(12px, 11.6px + 0.1vw, 13px); }
.about-footer .fs-footer__brand { gap: clamp(14px, 10.307692px + 1.025641vw, 30px); }
.about-footer .fs-footer__label { margin-block-end: clamp(9px, 7.615385px + 0.384615vw, 15px); }
.about-footer .fs-footer__cols { grid-template-columns: minmax(0, 131fr) minmax(0, 189fr); gap: 0; }
.about-footer__sep { margin-inline: 6px; color: #C9C9C9; }
@media (min-width: 1024px) {
  .about-footer .fs-footer__inner {
    /* SOCIAL 열은 아이콘 4개(22px)+간격 3개(22px)=154px 아래로 줄면 넘치므로 최소폭 고정 */
    grid-template-columns: minmax(0, 1073fr) minmax(0, 209fr) minmax(158px, 158fr);
    column-gap: 0;
  }
  .about-footer .fs-social { gap: 22px; }
}

/* --- 헤더 국기 드롭다운(시안 실측: 50x32 회색 필 + 24px 원형 국기) --------- */
.fs-page-about .fs-lang {
  gap: 4px;
  width: 50px; height: 32px;
  padding: 0 6px 0 4px;
  background: #E0E0E0;
  border-radius: var(--fs-radius-pill);
}
.fs-page-about .fs-lang__flag { width: 24px; height: 24px; border-radius: var(--fs-radius-round); }
.fs-page-about .fs-lang__caret { width: 7px; height: 7px; border-width: 1.4px; }
.fs-page-about .fs-util { gap: clamp(8px, -1.9px + 0.833vw, 14px); }
.fs-page-about .fs-util__link { font-size: clamp(12px, 7px + 0.4167vw, var(--fs-t-sm)); }

/* --- 구조 훅 --------------------------------------------------------------
   마크업 앵커(BEM 가독성 · data-fs-reveal 대상 지정)로만 쓰는 클래스.
   min-width:0 은 그리드/플렉스 자식 넘침(가로 스크롤) 예방용이며 레이아웃은 그대로다. */
.about-intro__inner,
.about-doctors__list,
.about-doctor__info,
.about-system,
.about-system__l1,
.about-core__headtext,
.about-core__arrow,
.about-promise__head,
.about-interior__head,
.about-interior__headtext,
.about-interior__nav,
.about-contact__col,
.about-contact__col--map,
.about-contact__group,
.about-contact__btns { min-width: 0; }

/* ==========================================================================
   === main 확장 ===  draft1/index.html 전용 (.p-main 스코프)
   모든 값은 comp-1(PC 1920) · comp-2(MO 360) 실측 + _src/spec-main.json.
   보간식 clamp(MO360, a + b·vw, PC1920) — b = (PC−MO)/15.6
   ========================================================================== */
.p-main {
  --fs-t-h2:  clamp(32px, 29.01px + 0.833vw, 45px);  /* 메인 섹션 제목 32→45(잉크 실측) */
  --fs-logo-w: clamp(151px, 139.4px + 3.205vw, 201px);
  --fs-gnb-fz:  clamp(12px, 7px + 0.4167vw, 15px);
  --fs-gnb-gap: clamp(6px, -47.3px + 4.444vw, 38px);
  --fs-header-overlay-bg: rgba(0, 0, 0, .177);       /* 히어로 헤더 밴드 실측(×0.823) */
  --fs-progress: 56%;                                 /* 진행바 흰 구간 69 / 트랙 123 */
  --p-inset: max(var(--fs-gutter), calc((100vw - var(--fs-container)) / 2));
}

/* --- 헤더 -------------------------------------------------------------- */
.p-main .fs-header__inner > * { min-width: 0; }
.p-main .fs-logo__img { width: var(--fs-logo-w); }
.p-main .fs-lang {
  gap: 6px; padding-inline: 6px; min-height: 32px;
  background: rgba(0, 0, 0, .14); border-radius: var(--fs-radius-pill);
}
.p-main .fs-lang__flag { width: 22px; height: 22px; border-radius: var(--fs-radius-round); }

/* --- 공통 버튼/제목 ----------------------------------------------------- */
.p-main .fs-btn { font-size: clamp(13px, 12.54px + 0.128vw, 15px); }
.p-main .p-sec__title,
.p-main .m-head__title {
  /* 잉크 실측: 시안 제목은 Pretendard 45px + 트래킹 -0.035em 에 가장 근접.
     행 높이는 41px×1.25=51.24px 를 유지해 섹션 높이가 흔들리지 않게 한다. */
  font-size: var(--fs-t-h2); font-weight: 700;
  line-height: 1.139; letter-spacing: -0.035em;
}
.p-main .p-sec__title--center { text-align: center; }

/* --- 1. 히어로 ---------------------------------------------------------- */
.p-main .fs-hero__copy  { gap: 0; }
.p-main .fs-hero__bg picture { display: block; width: 100%; height: 100%; position: relative; z-index: 0; }

/* 7장 페이드 슬라이더. 히어로 높이는 min-height 가 혼자 정하므로 슬라이더를 통째로 덮어도 안전하다 */
.p-main .fs-hero__slider { position: absolute; inset: 0; }
.p-main .fs-hero__slider .fs-carousel__viewport,
.p-main .fs-hero__slider .fs-carousel__track { height: 100%; }
.p-main .fs-hero__slider .fs-carousel__slide { display: grid; align-items: center; height: 100%; }

/* 스크림 — 모델 사진 배경이 전부 밝은 파스텔이라 흰 카피가 2.2:1 까지 떨어진다(실측).
   PC 는 좌→우, 모바일은 아래→위로 깔아 카피가 앉는 자리만 눌러준다. */
.p-main .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .34) 30%, rgba(0, 0, 0, .20) 48%, rgba(0, 0, 0, 0) 68%);
}
@media (max-width: 1023px) {           /* MO 는 모델 얼굴이 상단을 채워 카피를 아래로 내린다 */
  .p-main .fs-hero { align-items: end; }
  .p-main .fs-hero__slider .fs-carousel__slide { align-items: end; }
  .p-main .fs-hero__inner { padding-block-end: 58px; }
  .p-main .fs-hero__bg::after {
    background: linear-gradient(to top,
      rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .42) 22%, rgba(0, 0, 0, 0) 56%);
  }
}
/* 슬라이드마다 해당 시술 페이지로. 시안에 버튼이 없으므로 카피 자체를 링크로 쓰고
   평상시 모양은 그대로 둔다. justify-self:start 로 클릭 영역을 카피 폭까지만 잡는다. */
.p-main .fs-hero__link {
  display: grid; justify-self: start; max-width: 100%;
  color: inherit; text-decoration: none;
}
.p-main .fs-hero__link:hover .fs-hero__title,
.p-main .fs-hero__link:focus-visible .fs-hero__title {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.1em;
}

/* 잉크 실측: 킥카피 39.5px · 타이틀 80.5px */
.p-main .fs-hero__kicker { font-size: clamp(19px, 15.31px + 1.245vw, 39.2px); letter-spacing: -0.01em;
  margin-block-start: 4px; }
.p-main .fs-hero__title { font-size: clamp(38px, 29.63px + 2.724vw, 80.5px);
  margin-block-start: clamp(8px, 6.42px + 0.449vw, 17px); }
.p-main .fs-progress    { margin-block-start: clamp(31px, 24.31px + 1.859vw, 56px); }

/* --- 섹션 헤더줄(.m-head) — PC 좌제목/우버튼, MO 중앙 + 버튼이 본문 아래로 --- */
.p-main .m-head {
  display: grid; position: relative;
  grid-template-areas: "title" "sub" "body" "action";
  justify-items: center; text-align: center;
}
.p-main .m-head__title  { grid-area: title; }
.p-main .m-head__sub    { grid-area: sub; margin-block-start: 1px;
  /* 잉크 실측 152/122×19 → 24px */
  font-size: clamp(19px, 17.72px + 0.321vw, 24px); font-weight: 500; color: var(--fs-muted); }
.p-main .m-head__body   { grid-area: body; width: 100%; }
.p-main .m-head__action { grid-area: action; margin-block-start: 31px; }
@media (min-width: 1024px) {
  .p-main .m-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title action" "sub action" "body body";
    justify-items: start; align-items: center; text-align: left;
  }
  .p-main .m-head__action { justify-self: end; margin-block-start: 0; }
  .p-main .m-head--center {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "sub" "body";
    justify-items: center; text-align: center;
  }
  .p-main .m-head--center .m-head__action {
    position: absolute; inset-inline-end: 0;
    inset-block-start: calc(var(--fs-t-h2) * .88);
  }
}

/* --- 섹션 상·하 여백 (comp 실측) ---------------------------------------- */
.p-main .p-event     { padding-block: clamp(58px, 36.08px + 6.09vw, 153px)  clamp(32px, 20.92px + 3.077vw, 80px); }
.p-main .p-selfie    { padding-block: clamp(26px, 20.92px + 1.41vw, 48px)   clamp(59px, 42.62px + 4.551vw, 130px); }
.p-main .p-fstv      { padding-block: clamp(58px, 37.23px + 5.769vw, 148px) clamp(60px, 45.46px + 4.038vw, 123px); }
.p-main .p-shorts    { padding-block: clamp(57px, 32.54px + 6.795vw, 163px) clamp(58px, 41.38px + 4.615vw, 130px); }
.p-main .p-signature { padding-block: clamp(58px, 41.85px + 4.487vw, 128px) clamp(92px, 83.23px + 2.436vw, 130px); }
.p-main .p-doctors   { padding-block: clamp(58px, 41.85px + 4.487vw, 128px) clamp(58px, 41.13px + 4.679vw, 132px); }
.p-main .p-contact   { padding-block: clamp(64px, 49px + 4.167vw, 129px) clamp(0px, -30px + 8.333vw, 130px); }

/* --- 2. FS EVENT -------------------------------------------------------- */
.p-main .p-event .m-head__body { margin-block-start: clamp(29px, 24.39px + 1.282vw, 49px); }
.p-main .ev-stage    { display: flex; justify-content: center; }
.p-main .ev-viewport { overflow: visible; width: clamp(280px, 169.23px + 30.769vw, 760px); }
.p-main .ev-carousel .fs-carousel__slide { padding-inline: clamp(0px, -2.31px + 0.641vw, 10px); }
.p-main .ev-banner     { display: block; overflow: hidden; }
.p-main .ev-banner img { width: 100%; aspect-ratio: 740 / 447; object-fit: cover;
                         transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.p-main .ev-banner:hover img,
.p-main .ev-banner:focus-visible img { transform: scale(1.06); }
.p-main .ev-carousel .fs-carousel__dots { margin-block-start: clamp(21px, 19.92px + 0.256vw, 25px); }

/* 이벤트 좌우 화살표 (2026-09-01 지시) — 셀피 줄(.sf-nav)과 같은 형태로 배너 띠 위에 얹는다.
   ★ 화살표는 캐러셀 루트(.ev-carousel) «안» 에 있어야 fs.js 가 배선한다. .ev-stage 는
     flex 라 위치 기준이 필요해 relative 를 준다(절대배치라 flex 흐름에는 안 낀다). */
.p-main .ev-stage { position: relative; }
.p-main .ev-nav {
  position: absolute; inset-block-start: 50%;
  /* 배너 띠는 .ev-viewport 의 overflow:visible 로 화면 끝까지 삐져나온다.
     .ev-stage 폭(=컨테이너)에 맞추면 화살표가 가운데 배너에 딱 붙어 그림 위에 얹힌다.
     그래서 화면 폭으로 되돌려 셀피 줄(.sf-nav)과 같은 자리에 세운다. */
  inset-inline: calc(50% - 50vw);
  transform: translateY(-50%);
  justify-content: space-between;
  padding-inline: clamp(10px, 4.23px + 1.603vw, 35px);
  z-index: var(--fs-z-nav);
  pointer-events: none;
}
.p-main .ev-nav > * { pointer-events: auto; }
.p-main .ev-nav .fs-iconbtn {
  width: clamp(34px, 31.7px + 0.641vw, 44px);
  background: var(--fs-white);
}

/* --- 3. FS SELFIE REVIEW ------------------------------------------------ */
.p-main .p-selfie .m-head__body { margin-block-start: clamp(21px, 15.23px + 1.603vw, 46px); }
/* JS 전(캐러셀이 붙기 전)에는 시안처럼 가운데로 모아 두고, 캐러셀이 붙은 뒤에는
   flex-start 로 돌린다 — 넘치는 트랙에 justify-content 가 걸리면 그 정렬
   오프셋만큼 transform 위치가 통째로 어긋난다. 중앙 정렬은 캐러셀이 한다. */
.p-main .sf-row { display: flex; justify-content: center; gap: var(--fs-gap-col); }
.p-main .fs-carousel .sf-row { justify-content: flex-start; }
.p-main .sf-item { flex: 0 0 clamp(180px, 158.77px + 5.897vw, 272px); max-width: none; }
.p-main .sf-item .fs-thumb { width: 100%; }
.p-main .sf-item .fs-thumb img { transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.p-main .sf-item .fs-thumb:hover img,
.p-main .sf-item .fs-thumb:focus-visible img { transform: scale(1.06); }
/* 사진 위에 얹히는 화살표 — 투명 버튼은 안 보여서 흰 원으로 채운다 */
.p-main .sf-nav {
  position: absolute; inset-block-start: 50%; inset-inline: 0;
  transform: translateY(-50%);
  justify-content: space-between;
  padding-inline: clamp(10px, 4.23px + 1.603vw, 35px);
  pointer-events: none;
}
.p-main .sf-nav > * { pointer-events: auto; }
.p-main .sf-nav .fs-iconbtn {
  width: clamp(34px, 31.7px + 0.641vw, 44px);
  background: var(--fs-white);
}

/* --- 4. FS TV ----------------------------------------------------------- */
.p-main .p-fstv { --tv-cap-h: clamp(50px, 47.69px + 0.641vw, 60px); --tv-grow: 1; }
.p-main .tv-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.p-main .tv-stage { min-width: 0; }
.p-main .tv-text {
  margin-block-start: clamp(16px, 15.31px + 0.192vw, 19px);
  font-size: clamp(14px, 13.66px + 0.111vw, 15.8px); font-weight: 600;
  line-height: clamp(23px, 22.77px + 0.064vw, 24px);
}
.p-main .tv-more  { margin-block-start: clamp(28px, 22.23px + 1.603vw, 53px); }
.p-main .tv-stage { margin-block-start: 31px; }
.p-main .tv-viewport { overflow: hidden; }
.p-main .tv-track    { align-items: flex-end; }
.p-main .tv-card__link  { display: block; }
.p-main .tv-card__thumb { display: block; }
.p-main .tv-card__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.p-main .tv-card--cut .tv-card__thumb img { object-fit: contain; object-position: left center; }
.p-main .tv-card__cap { display: none; }
.p-main .tv-card.is-active .tv-card__cap {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tv-cap-h); padding-inline: var(--fs-sp-5);
  background: var(--fs-white); color: var(--fs-ink);
  font-size: clamp(17px, 16.54px + 0.128vw, 19px); font-weight: 700; text-align: center;
}
.p-main .tv-card:not(.is-active) { margin-block-end: var(--tv-cap-h); }
/* 도트 + 좌우 화살표를 한 줄로. 폭은 활성 카드에 맞춰 도트가 카드 아래
   가운데 오도록 (PC 는 왼쪽 정렬이라 margin-inline 을 푼다) */
.p-main .tv-controls {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 8.15px + 0.513vw, 18px);
  width: calc(var(--fs-slide-w, 320px) * var(--tv-grow));
  margin-inline: auto; margin-block-start: 20px;
}
.p-main .tv-controls .fs-iconbtn { width: clamp(32px, 30.62px + 0.385vw, 38px); }
.p-main .tv-dots { margin-block-start: 0; }
@media (min-width: 1024px) {
  .p-main .p-fstv  { --tv-grow: 1.5517; }
  .p-main .tv-grid { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
  /* 오른쪽으로 흘러나가는 필름스트립은 시안대로 살리고, 왼쪽으로 나온
     루프 클론만 잘라낸다 — 안 자르면 왼쪽 카피 위를 카드가 덮는다.
     overflow 로는 양쪽이 같이 잘려서 clip-path 로 왼쪽만 막는다. */
  .p-main .tv-viewport { overflow: visible; clip-path: inset(-100vh -100vw -100vh 0); }
  .p-main .tv-stage    { margin-block-start: 2px; }
  .p-main .tv-card.is-active {
    flex-basis: calc(var(--fs-slide-w) * var(--tv-grow));
    max-width:  calc(var(--fs-slide-w) * var(--tv-grow));
  }
  .p-main .tv-controls { margin-inline: 0; }
}

/* --- 5. FS Shorts ------------------------------------------------------- */
.p-main .p-shorts .m-head__body { margin-block-start: clamp(30px, 25.44px + 1.25vw, 49px); }
.p-main .sh-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fs-gap-card); }
.p-main .sh-card { display: block; }
.p-main .sh-card img { width: 100%; aspect-ratio: 272 / 498; object-fit: cover; }
@media (max-width: 1023px) {
  .p-main .sh-row {
    display: flex; width: 100vw; max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--fs-gutter), calc((100vw - 272px) / 2));
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .p-main .sh-row::-webkit-scrollbar { display: none; }
  .p-main .sh-item { flex: 0 0 272px; scroll-snap-align: center; }
}

/* --- 6. FS SIGNATURE ---------------------------------------------------- */
.p-main .sg-carousel { position: relative; margin-block-start: clamp(29px, 24.62px + 1.218vw, 48px); }
.p-main .sg-card        { --fs-panel-w: 62.86%; --fs-panel-drop: 72px; }
.p-main .sg-card__inner { position: relative; }
.p-main .sg-card__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.p-main .sg-card .fs-card__panel { gap: 11px; padding-block: clamp(15px, 13.24px + 0.38vw, 20.5px) clamp(21px, 19.03px + 0.598vw, 30.5px); }
.p-main .sg-card__title { font-size: clamp(18px, 17.73px + 0.089vw, 19.7px); font-weight: 600; line-height: 1.25; }
.p-main .sg-card__desc  { font-size: clamp(14px, 13.6px + 0.107vw, 15.7px); line-height: var(--fs-lh-body); color: var(--fs-muted); }
.p-main .sg-nav  { display: none; }
/* 시안 실측: 화살표 잉크 21x14px (원 50px 안) — 기본 40%(20px)로는 축이 짧다 */
.p-main .sg-nav .fs-iconbtn svg { width: 49%; height: 49%; }
.p-main .sg-dots { margin-block-start: 21px; }
@media (min-width: 1024px) {
  .p-main .sg-card__photo { aspect-ratio: 700 / 380; }
  /* 캡션 패널이 사진 아래로 72px 삐져나오므로 세로 패딩으로 클리핑을 피한다 */
  .p-main .sg-carousel .fs-carousel__viewport { padding-block-end: 72px; margin-block-end: -72px; }
  /* 2026-08-20 수정: -90px 은 컨테이너 좌우 여백(20~40px)보다 커서 1024~1620px 구간에서
     화살표가 화면 밖(x=-56)으로 나가 조작이 불가능했다. 57 의 fs-nose-ba__nav 와 같은 방식으로
     컨테이너 안쪽에 두고, 여백이 충분한 1700px 이상에서만 바깥으로 뺀다. */
  .p-main .sg-nav  { display: flex; inset-inline: 0; inset-block-start: calc(50% - 36px); }
  /* 점은 시안대로 ≥1024 에서 숨긴다 — 뷰포트의 margin-block-end:-72px 때문에
     흐름에 두면 캡션 패널과 겹친다. 화살표가 컨테이너 안으로 들어와 조작은 가능해졌다. */
  .p-main .sg-dots { display: none; }
  .p-main .p-signature { padding-block-end: calc(clamp(60px, 43.85px + 4.487vw, 130px) + 72px); }
}

@media (min-width: 1700px) {
  .p-main .sg-nav  { inset-inline: -90px; }   /* 시안(1920) 렌더는 여기서 그대로 재현된다 */
}

/* --- 7. FS DOCTORS ------------------------------------------------------ */
.p-main .dr-grid {
  display: grid; row-gap: 32px;
  column-gap: clamp(20px, 13.54px + 1.795vw, 48px);
  margin-block-start: clamp(29px, 24.68px + 1.186vw, 47px);
}
.p-main .dr-item { gap: 0; text-align: center; }
.p-main .fs-doctor__photo img { width: 100%; aspect-ratio: 448 / 580; object-fit: cover; }
.p-main .fs-doctor__name { margin-block-start: 20px; font-size: clamp(23px, 22.08px + 0.256vw, 27px); }
.p-main .fs-doctor__role { margin-block-start: 10px; }
@media (min-width: 1024px) { .p-main .dr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- 8. 온라인 상담 폼 ---------------------------------------------------
   2026-08-28 재구축. 시안(spec-main[7])은 라벨-인풋 1열 스택 + 'FS DOCTORS' 제목이었다.
   승인자 지시로 운영 사이트(4seasonsps.com «상담신청» = 비용상담 게시판)의 필드 구성을
   가져오되 조판은 이 시스템 어휘로 다시 짰다. 시안 대비 의도적 차이:
     · 제목 'FS DOCTORS' → 킥커 + 「온라인 상담신청」 (시안은 7번 섹션과 제목이 중복이었다)
     · 이름·연락처 / 상담부위·초재진 을 2열로 접어 세로 길이를 줄였다
     · 초/재진 원형 라디오 → 세그먼트 필 (LOCK 1 의 pill 허용 반경)
     · 셀렉트 캐럿 복원(시안은 화살표가 없어 셀렉트로 안 읽힌다)
     · 제출 버튼 아웃라인 '작성' → .fs-btn--fill 「상담 신청하기」
   ------------------------------------------------------------------------ */
.p-main .cs-split { display: grid; }
.p-main .cs-photo { overflow: hidden; }
.p-main .cs-photo img { width: 100%; height: 100%; object-fit: cover; }
.p-main .cs-form  { padding-block: clamp(38px, 24.15px + 3.846vw, 98px) clamp(57px, 47.08px + 2.756vw, 100px); }
.p-main .cs-kicker { margin-block-end: 10px; }
.p-main .cs-form .p-sec__title { margin-block-end: 14px; }
.p-main .cs-lead {
  margin-block-end: clamp(26px, 22.5px + 0.96vw, 41px);
  font-size: var(--fs-t-sm); line-height: 1.72; color: var(--fs-ink-soft);
}
.p-main .cs-fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.p-main .cs-fieldset > legend { padding: 0; }
.p-main .fs-form__label { font-size: var(--fs-t-body); }
.p-main .fs-policy { padding-block: 17px 10px; padding-inline: clamp(10px, 7.69px + 0.641vw, 20px); font-size: 13.6px; line-height: 17px; }
.p-main .fs-policy p + p { margin-block-start: 5px; }
.p-main .fs-btn--submit { min-height: clamp(46px, 45.1px + 0.256vw, 50px); }
.p-main .cs-form .fs-form__actions { justify-content: center; margin-block-start: -2px; }
@media (min-width: 1024px) { .p-main .cs-form .fs-form__actions { justify-content: flex-start; } }
.p-main .fs-form     { gap: clamp(20px, 19.05px + 0.256vw, 24px); }   /* 컨트롤→다음 라벨 */
.p-main .fs-form__row { gap: 11px; }                                  /* 라벨→컨트롤 */
.p-main .fs-form__label,
.p-main .fs-check__label { line-height: 1.25; }

/* 2열 접기 — 이름·연락처 / 상담부위·초재진 */
.p-main .cs-row2 { display: grid; gap: clamp(20px, 19.05px + 0.256vw, 24px); }
@media (min-width: 600px) {
  .p-main .cs-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* 초/재진 세그먼트 필 — 높이를 인풋과 맞춰 좌우 열 바닥이 어긋나지 않게 한다 */
.p-main .cs-seg { display: flex; gap: var(--fs-sp-2); }
.p-main .cs-seg__item { flex: 1 1 0; min-width: 0; }
.p-main .cs-seg__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-main .cs-seg__label {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(44px, 43.1px + 0.256vw, 48px);
  padding-inline: var(--fs-sp-3);
  border: 1px solid var(--fs-line-control);
  border-radius: var(--fs-radius-pill);
  background: var(--fs-white);
  font-size: var(--fs-t-sm); font-weight: 600; color: var(--fs-ink);
  cursor: pointer;
  transition: background-color var(--fs-dur-fast) var(--fs-ease),
              border-color var(--fs-dur-fast) var(--fs-ease),
              color var(--fs-dur-fast) var(--fs-ease);
}
.p-main .cs-seg__item input:checked + .cs-seg__label {
  background: var(--fs-teal-text); border-color: var(--fs-teal-text); color: var(--fs-white);
}
.p-main .cs-seg__item input:focus-visible + .cs-seg__label {
  outline: 2px solid var(--fs-teal-dk); outline-offset: 2px;
}

/* 글자수 카운터 */
.p-main .cs-count { margin-block-start: -3px; text-align: right; font-size: var(--fs-t-xs); color: var(--fs-pill-gray); }

/* 동의 고지 상자 — 시안의 --fs-muted-2 는 크림 위 3.67:1 이라 AA 미달이다. 이 상자만 올린다. */
.p-main .cs-policy { height: clamp(132px, 127.4px + 1.28vw, 152px); color: var(--fs-pill-gray); }
.p-main .cs-policy__sum { display: grid; gap: 4px; margin-block-end: 12px; }
.p-main .cs-policy__pair { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
.p-main .cs-policy__pair dt { font-weight: 700; color: var(--fs-ink); }
.p-main .cs-policy__more { margin-block-start: 12px; }
.p-main .cs-policy__more a { color: var(--fs-teal-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.p-main .cs-agree { margin-block-start: 13px; }

/* 제출 · 전화 · 시안 고지 */
.p-main .cs-actions { flex-wrap: wrap; gap: 14px clamp(16px, 14.8px + 0.32vw, 21px); align-items: center; }
.p-main .cs-submit { min-width: clamp(168px, 160.6px + 2.05vw, 200px); }
.p-main .cs-actions__tel { font-size: var(--fs-t-sm); color: var(--fs-ink-soft); }
.p-main .cs-actions__tel a { font-weight: 700; color: var(--fs-ink); }
.p-main .cs-actions__tel a:hover { color: var(--fs-teal-dk); }
/* 2026-09-01: 접수 완료 패널·시안 고지를 43(온라인상담)·135(비용상담) 에서도 쓴다.
   :is() 는 특정성이 «가장 강한 인자» 로 잡히므로 .p-main 한 개 클래스와 값이 같다
   — 확정 시안 메인 페이지의 계산 결과는 그대로다(픽셀 회귀로 확인). */
:is(.p-main, .fs-p-43, .fs-p-135) .cs-draft-note {
  margin-block-start: 18px; padding-block-start: 15px;
  border-block-start: 1px solid var(--fs-line-input);
  font-size: var(--fs-t-xs); line-height: 1.6; color: var(--fs-pill-gray);
}

/* 접수 완료 패널 — 폼과 교대로 뜬다 */
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done[hidden] { display: none; }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done { display: grid; justify-items: start; gap: 0; }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done:focus-visible { outline: 2px solid var(--fs-teal-dk); outline-offset: 6px; }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--fs-radius-round);
  background: var(--fs-teal-text); color: var(--fs-white);
}
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__title { margin-block-start: 20px; font-size: var(--fs-t-h3); font-weight: 700; letter-spacing: var(--fs-ls-tight); }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__lead  { margin-block-start: 12px; font-size: var(--fs-t-sm); line-height: 1.72; color: var(--fs-ink-soft); }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__sum {
  width: 100%; margin-block-start: 26px; padding: 20px clamp(16px, 14.8px + 0.32vw, 21px);
  background: var(--fs-white); border: 1px solid var(--fs-line-input);
  display: grid; gap: 9px; font-size: var(--fs-t-sm);
}
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__sum > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__sum dt { font-weight: 600; color: var(--fs-pill-gray); }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__sum dd { font-weight: 600; color: var(--fs-ink); overflow-wrap: anywhere; }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__warn {
  margin-block-start: 22px; padding: 14px clamp(14px, 13.1px + 0.256vw, 18px);
  background: var(--fs-white); border-inline-start: 3px solid var(--fs-red-aa);
  font-size: var(--fs-t-xs); line-height: 1.65; color: var(--fs-ink-soft);
}
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__warn strong { color: var(--fs-red-aa); font-weight: 700; }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__warn a { font-weight: 700; color: var(--fs-ink); text-decoration: underline; text-underline-offset: 2px; }
:is(.p-main, .fs-p-43, .fs-p-135) .cs-done__actions { margin-block-start: 26px; }
@media (max-width: 1023px) {
  .p-main .cs-photo { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
  .p-main .cs-photo picture { display: block; }
  .p-main .cs-photo img { aspect-ratio: 360 / 260; height: auto; }
  .p-main .cs-form  { padding-inline: var(--p-inset); }
  /* MO 시안에도 아주 흐린 배경 사진이 있으나(시안 (320,1620) #D0C0B4), PC 배경 크롭을
     어떤 위치로 넣어도 평면 베이지(배경영역 평균차 9.42)보다 나쁘다(최선 12.52). 평면 유지. */
  .p-main .p-fstv .fs-section__bg { display: none; }
}
@media (min-width: 1024px) {
  .p-main .cs-split {
    grid-template-columns: minmax(0, 832fr) minmax(0, 748fr);
    column-gap: 100px; padding-inline-end: var(--p-inset); align-items: stretch;
  }
}

/* --- 9. 대표전화 · 진료시간 · 오시는길 ------------------------------------ */
.p-main .ct-grid  { row-gap: 29px; column-gap: 0; }
.p-main .ct-col   { display: grid; align-content: start; gap: clamp(33px, 27.92px + 1.41vw, 55px); }
.p-main .ct-group { display: grid; align-content: start; }
/* 잉크폭 실측 — 라벨 67/64×19, 번호 259/249×38, 진료시간·주소 186/190×16 */
.p-main .fs-contact__label { font-size: clamp(17px, 16.35px + 0.18vw, 19.8px); }
.p-main .fs-contact__tel   { font-size: clamp(23px, 19.68px + 1.058vw, 39.5px); }
.p-main .fs-hours__label,
.p-main .fs-hours__value { font-size: clamp(14px, 13.65px + 0.096vw, 15.5px); }
.p-main .ct-addr { font-size: 15.7px; }
.p-main .ct-group--tel   .fs-contact__tel { margin-block-start: clamp(10px, 8.62px + 0.385vw, 16px); }
.p-main .ct-group--hours .fs-hours { margin-block-start: clamp(6px, 3.62px + 0.641vw, 14px); }
.p-main .ct-col--map { gap: 0; }
.p-main .ct-addr { margin-block-start: 14px; }
.p-main .ct-map  { margin-block-start: 21px; }
.p-main .ct-map picture { display: block; height: 100%; }
@media (min-width: 1024px) { .p-main .ct-grid { grid-template-columns: minmax(0, 592fr) minmax(0, 848fr); } }

/* --- 푸터 --------------------------------------------------------------- */
/* 잉크폭 실측 256/304×14 = 11.8px (라벨 40/47×13 = 11.1px) */
.p-main .fs-footer { font-size: 13px; }   /* 2026-08-20: 11.8 → 13 */
.p-main .fs-footer__label { font-size: 12.5px; }
.p-main .fs-footer__brand { gap: clamp(15px, 11.62px + 0.962vw, 32px); }
.p-main .fs-footer__logo  { width: var(--fs-logo-w); }
.p-main .fs-footer__copy  { font-size: clamp(12px, 11.6px + 0.1vw, 13px); }
.p-main .fs-footer__cols  { grid-template-columns: auto minmax(0, 1fr); column-gap: 51px; }
.p-main .fs-social { gap: 22px; }
.p-main .fs-social__link { width: 22px; height: 24px; border-radius: 0; }
.p-main .fs-social__link img { width: 22px; height: 24px; object-fit: contain; }
@media (min-width: 1024px) {
  .p-main .fs-footer__inner { column-gap: clamp(40px, -0.98px + 6.823vw, 131px); }
}
.p-main .p-sec  { position: relative; }
.p-main .tv-copy { align-content: start; }
/* fs.css의 --tall 보간식 오류 보정 (1920에서 755px → 실측 1080px) */
.p-main .fs-hero--tall { min-height: clamp(740px, 661.54px + 21.795vw, 1080px); }
.p-main .fs-textarea { height: 90px; resize: none; }         /* 시안 실측 90px · 리사이즈 핸들 없음 */
/* 진료시간 항목명 — 시안 원문이 '평 일' '토 요 일' 처럼 공백을 넣어 3글자 폭을 맞춘다.
   공백이 text-align-last:justify 의 정렬 기회가 되고, keep-all 이 4글자 라벨의 줄바꿈을 막는다. */
.p-main .fs-hours__label { word-break: keep-all; overflow-wrap: normal; }


/* ====================================================================
   === 공용 확장 === 모바일 전체메뉴 드로어

   시안(PDF)에는 모바일 메뉴 화면이 없다. 그러나 <1200px 에서 .fs-gnb 가
   display:none 이고 .fs-burger 는 무동작이라 주메뉴 15항목에 도달할 수단이
   전무했다(실측). 최소 기능만 신설한다.

   시안 충실도 보호: 기본 닫힘(hidden) + ≥1200px 에서 드로어·버거 완전 비활성.
   → PC 렌더 픽셀에 영향 0. 되돌리려면 이 블록과 각 페이지의 <nav class="fs-drawer">,
     fs.js 의 initDrawer() 를 지우면 된다.
   ==================================================================== */

.fs-drawer[hidden] { display: none; }

.fs-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.fs-drawer__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(17, 17, 17, 0.48);
  opacity: 0;
  transition: opacity var(--fs-dur-2, 320ms) var(--fs-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  cursor: pointer;
}

.fs-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(86vw, 20rem);
  display: flex;
  flex-direction: column;
  background: var(--fs-white);
  box-shadow: -0.5rem 0 2rem rgba(17, 17, 17, 0.16);
  transform: translateX(100%);
  transition: transform var(--fs-dur-2, 320ms) var(--fs-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fs-drawer.is-open .fs-drawer__scrim { opacity: 1; }
.fs-drawer.is-open .fs-drawer__panel { transform: translateX(0); }

.fs-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.75rem;
  padding-inline: 1.25rem;
  border-block-end: 1px solid var(--fs-line);
}

.fs-drawer__title {
  margin: 0;
  font-family: var(--fs-font-en, inherit);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--fs-teal-mid);
}

.fs-drawer__close {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--fs-ink);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.fs-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0;
  flex: 1 1 auto;
}

.fs-drawer__list a {
  display: block;
  padding: 0.8125rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fs-ink);
  text-decoration: none;
  border-block-end: 1px solid var(--fs-line);
}

.fs-drawer__list a:hover,
.fs-drawer__list a:focus-visible { color: var(--fs-teal-mid); }

.fs-drawer__list a[aria-current="page"] {
  color: var(--fs-teal-mid);
  font-weight: 700;
}

.fs-drawer__foot {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem 1.5rem;
  font-size: 0.8125rem;
}

.fs-drawer__foot a { color: var(--fs-muted-2); text-decoration: none; }
.fs-drawer__foot a:hover { color: var(--fs-teal-mid); }
.fs-drawer__foot span { color: var(--fs-line-control); }

.fs-drawer__tel {
  margin-inline-start: auto;
  font-weight: 700;
  color: var(--fs-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
  .fs-drawer__scrim,
  .fs-drawer__panel { transition: none; }
}

/* ≥1200px: GNB 가 보이므로 드로어·버거 모두 불필요 */
@media (min-width: 75rem) {
  .fs-drawer { display: none !important; }
}


/* ====================================================================
   === 공용 확장 === 명도대비 보정 (WCAG 2.1 AA)

   시안 실측 브랜드 틸 #49BCBD 는 흰 글자·흰 배경 양쪽에서 대비 2.28:1 로
   AA 기준 4.5:1 에 크게 미달한다(POINT 필, 라벨바, 비교표 헤더, 숫자 캡션 등).
   글자가 얹히는 곳만 #00787F(흰 5.26:1 · 크림 4.69:1) 로 올리고, 선·테두리 등 순수 장식 틸은
   시안 값 그대로 둔다. 색상 계열(청록)과 채도 인상은 유지된다.

   ★ 되돌리기: 아래 --fs-teal-text 값을 #49BCBD 로 바꾸면 시안과 100% 동일해진다.
   ==================================================================== */
:root { --fs-teal-text: #80665D; }   /* 2026-09-11 토프 — 흰 5.28 · 크림 4.71 (청록 AA 값 #00787F) */

/* 틸 글자 on 밝은 배경 */
.fs-num,
.fs-teal-fg,
.fs-card__num,
.about-doctor__role,
.about-core__num,
.about-promise__num { color: var(--fs-teal-text); }

/* 흰 글자 on 틸 배경 */
.fs-mark,
.fs-btn--fill,
.fs-pill,
.fs-plusbtn,
.fs-labelbar,
.fs-table thead th,
.fs-compare__cell--label { background: var(--fs-teal-text); }

.fs-btn--fill { border-color: var(--fs-teal-text); }

/* 비활성 필의 흰 글자 (회색 #C8C8C8 위 1.67:1) — 글자를 어둡게 해 4.6:1 확보 */
.fs-pill--idle { color: var(--fs-ink-soft); }

/* --------------------------------------------------------------------------
   2026-08-27 · 오시는길 CTA 버튼 AA 보정 — 「A안 최소 변경」 승인
   버튼 글자는 흰색 700, 크기는 --fs-t-sub clamp(17px,…,19px) 다.
   WCAG 는 18.66px 이상 굵은 글자만 「큰 글자」(3:1)로 보므로
   1920px 에서만 3:1 이 적용되고 1440px 이하는 4.5:1 이 적용된다.

     버튼        현행        대비      → A안        대비
     전화 상담   #3AB8B7    2.41:1    → #298382    4.50:1
     카톡 상담   #E5533E    3.72:1    → #DE361E    4.51:1

   색상(hue)·채도는 그대로 두고 명도만 기준까지 낮춘 값이다.
   ※ 토큰(--fs-teal-btn / --fs-orange)을 직접 바꾸지 않는다 —
     --fs-teal-btn 은 98 의 그라데이션 끝점으로도 쓰여 그쪽까지 바뀐다.
   ★ 되돌리기: 아래 두 줄을 지우면 시안색으로 돌아간다.
   -------------------------------------------------------------------------- */
:root { --fs-teal-btn-aa: #80665D; --fs-orange-aa: #DE361E; }   /* 2026-09-11 토프 (청록 #298382) */
.fs-btnbar__btn--teal   { background: var(--fs-teal-btn-aa); }
.fs-btnbar__btn--orange { background: var(--fs-orange-aa); }


/* --------------------------------------------------------------------------
   2026-08-27 · .fs-kicker AA 보정 — 배경별로 갈라야 한다.
   AA 보정 1차 때 .fs-kicker 가 목록에서 빠져 흰·크림 위에서 2.03~2.28:1 로 남아 있었다
   (52개 페이지 해당). 그런데 한 값으로 덮으면 안 된다 — 실측 대비:

     색            흰     크림   베이지   다크#111  다크2#3C3D3F
     #49BCBD      2.28✗  2.03✗  1.80✗    8.28✓     4.77✓
     #00787F      5.26✓  4.69✓  4.14△    3.59△     2.07✗
     #00646B      6.92✓  6.17✓  5.45✓    —         —

   .fs-kicker 는 밝은 배경 54곳과 다크 밴드 19곳에 함께 쓰인다. 그래서 배경별 3단으로 나눈다.
   (--light / --neon-fg / --white-fg 는 스스로 색을 갖고 있으므로 건드리지 않는다)
   -------------------------------------------------------------------------- */
.fs-kicker:not(.fs-kicker--light):not(.fs-neon-fg):not(.fs-white-fg) { color: var(--fs-teal-text); }
.fs-section--beige .fs-kicker:not(.fs-kicker--light):not(.fs-neon-fg):not(.fs-white-fg) { color: var(--fs-teal-dk); }
.fs-section--ink  .fs-kicker:not(.fs-kicker--light):not(.fs-neon-fg):not(.fs-white-fg),
.fs-section--ink2 .fs-kicker:not(.fs-kicker--light):not(.fs-neon-fg):not(.fs-white-fg) { color: var(--fs-teal); }

/* --------------------------------------------------------------------------
   2026-08-27 · 탭 타깃 히트영역 확장 — 시각 변화 0.
   시안 실측 간격을 지키기 위해 요소 크기는 그대로 두고 ::before 로 클릭 영역만 넓힌다.
   -------------------------------------------------------------------------- */

/* GNB — 「눈」·「코」처럼 한 글자면 폭이 13px 다.
   좌우로 «간격의 절반»까지만 넓혀 이웃 링크와 히트영역이 겹치지 않게 한다. */
.fs-gnb__link { position: relative; }
.fs-gnb__link::before {
  content: "";
  position: absolute;
  inset-block: -4px;
  inset-inline: calc(var(--fs-gnb-gap) / -2 + 2px);
}

/* 버거 — 24×14 는 단독 버튼이라 44×44 로 넓혀도 겹칠 이웃이 없다 */
.fs-burger { position: relative; }
.fs-burger::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* 푸터 링크 — 피치가 --fs-footer-link(30px) 로 이미 맞닿아 있어
   더 넓히면 이웃 링크를 먹는다. 행 전체를 히트영역으로 만드는 선에서 멈춘다. */
.fs-footer__link { position: relative; }
.fs-footer__link::before { content: ""; position: absolute; inset-block: 0; inset-inline: -6px; }


/* 위 일괄 규칙(.fs-pill / .fs-labelbar)이 같은 명시도라 뒤에 오는 쪽이 이겨서
   변형 클래스의 배경색을 전부 덮어썼다. 그 결과 회색이어야 할 '일반 코성형' 필과
   POINT 02~05 필이 틸로, 검정이어야 할 After 라벨바가 Before 와 같은 틸로 나왔다
   (특히 --idle 은 어두운 글자 × 어두운 틸 = 1.98:1). 변형값을 다시 세운다.
   여기 적힌 값은 모두 각자의 글자색과 AA(4.5:1) 이상이다. */
.fs-pill--gray     { background: var(--fs-pill-gray); }  /* #6D6D6D · 흰 글자 5.26:1 */
.fs-pill--idle     { background: var(--fs-step-idle); }  /* #C8C8C8 · #3F3F3F 4.60:1 */
.fs-pill--deep,
.fs-labelbar--deep { background: var(--fs-teal-dk); }    /* #00646B · 흰 글자 6.92:1 */
.fs-labelbar--dark { background: var(--fs-ink); }        /* #111111 · 흰 글자 18.9:1 */
/* --mid 시안값 #008E98 은 흰 글자 3.95:1 로 AA 미달이라 기본 틸(#00787F)을 그대로 둔다.
   --mid 가 인접하는 상대는 --deep(치료법) 과 --dark(전후) 뿐이라 구분은 유지된다. */

/* 보조 설명문 #939393(3.07:1) → #6E6E6E(5.0:1) */
:root { --fs-muted: #6E6E6E; }

/* ---- 전후 사례 도트: PC 는 페이지 단위 ----
   시안 실측 — PC 도트 2개(per-view 2 × 4사례 = 2페이지), 모바일 도트 4개(per-view 1).
   도트는 슬라이드와 1:1 로 배선돼 있으므로, PC 에서는 페이지 수를 넘는 도트를 숨긴다. */
@media (min-width: 64rem) {
  .fs-nose-ba [data-fs-carousel-dots] > .fs-carousel__dot:nth-child(n+3) { display: none; }
}

/* 카피라이트의 ⓒ(U+24B8)는 Pretendard 에 글리프가 없어 시스템 폰트로 떨어진다.
   이미 로드된 GmarketSans 가 이 글자를 가지고 있으므로 폴백을 그쪽으로 넘긴다. */
.fs-footer__copy {
  font-family: Pretendard, "GmarketSans", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
}

/* ---- FS SIGNATURE 카드 패널 정렬 ----
   시안이 크롭해 준 카드 2장은 설명이 2줄, 기존 홈페이지에서 가져온 3장은 1줄이라
   패널 높이가 23px 어긋나 캐러셀에서 제목·버튼 줄이 맞지 않았다(실측 패널top 307 vs 330).
   설명 영역이 항상 2줄을 차지하게 해 5장 전부 같은 위치에 오도록 한다. */
.p-main .sg-card__desc { min-block-size: calc(2 * var(--fs-lh-desc, 1.5em)); }


/* ====================================================================
   === 공용 확장 === 2단 메뉴판 — GNB 드롭다운 + 드로어 아코디언
   2026-08-28 · 구성은 _src/build/menu.json (운영 사이트 실제 메뉴 복제).

   닫힌 상태 픽셀 영향 0:
     · 패널은 position:absolute + visibility:hidden 이라 흐름에서 빠진다.
     · <li> 에 position:relative 만 얹으므로 GNB 자간·폭·중심은 그대로다.
   되돌리려면 이 블록과 각 페이지의 .fs-gnb__panel / .fs-drawer__acc 를 지운다.
   ==================================================================== */

/* ---- PC(≥1200px) 드롭다운 ---- */
.fs-gnb__item { position: relative; }

/* 패널 자체는 «투명 브리지» 다. 링크 아래 14px 를 패널이 덮고 있어야
   커서가 링크→카드로 넘어가는 동안 :hover 가 끊기지 않는다. */
.fs-gnb__panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  z-index: 1;
  padding-block-start: 14px;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fs-dur-fast) var(--fs-ease),
              visibility 0s linear var(--fs-dur-fast);
}
.fs-gnb__item:hover    > .fs-gnb__panel,
.fs-gnb__item:focus-within > .fs-gnb__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.fs-gnb__sub {
  min-inline-size: 9.5rem;
  padding-block: 0.5rem;
  background: var(--fs-white);
  color: var(--fs-ink);
  border-block-start: 2px solid var(--fs-teal-mid);
  box-shadow: 0 0.75rem 2rem rgba(17, 17, 17, 0.16);
  transform: translateY(-6px);
  transition: transform var(--fs-dur-fast) var(--fs-ease);
}
.fs-gnb__item:hover    > .fs-gnb__panel > .fs-gnb__sub,
.fs-gnb__item:focus-within > .fs-gnb__panel > .fs-gnb__sub { transform: translateY(0); }

/* 2026-09-10 · 카테고리 재편으로 「쁘띠/레이저」 하위가 18개가 됐다. 한 줄로 세우면 패널이
   700px 넘게 내려와 폴드를 먹는다. 13개 이상이면 2단으로 흘린다 — 9행이면 기존
   「코」 패널(8행)과 같은 높이다. 항목 수로 판별하므로 메뉴가 다시 바뀌어도 따라온다. */
.fs-gnb__panel:has(> .fs-gnb__sub > li:nth-child(13)) > .fs-gnb__sub {
  columns: 2; column-gap: 1.75rem; min-inline-size: 21rem;
}
.fs-gnb__panel:has(> .fs-gnb__sub > li:nth-child(13)) > .fs-gnb__sub > li {
  break-inside: avoid;
}

.fs-gnb__sublink {
  display: block;
  padding: 0.4375rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--fs-ink-soft);
  white-space: nowrap;
  transition: color var(--fs-dur-fast) var(--fs-ease),
              background-color var(--fs-dur-fast) var(--fs-ease);
}
.fs-gnb__sublink:hover,
.fs-gnb__sublink:focus-visible { color: var(--fs-teal-dk); background: var(--fs-cream); }
.fs-gnb__sublink[aria-current="page"] { color: var(--fs-teal-dk); font-weight: 700; }

/* 오버레이 헤더(메인)에서도 카드는 흰 바탕 — 헤더의 흰 글자색을 상속받지 않게 못박는다 */
.fs-header--overlay .fs-gnb__sub { color: var(--fs-ink); }
.fs-header--overlay .fs-gnb__sublink { color: var(--fs-ink-soft); }
.fs-header--overlay .fs-gnb__sublink:hover,
.fs-header--overlay .fs-gnb__sublink:focus-visible { color: var(--fs-teal-dk); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fs-gnb__panel, .fs-gnb__sub { transition: none; }
  .fs-gnb__sub { transform: none; }
}

/* ---- 모바일 드로어 아코디언 ---- */
.fs-drawer__acc { border-block-end: 1px solid var(--fs-line); }

.fs-drawer__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8125rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fs-ink);
  cursor: pointer;
  list-style: none;
}
.fs-drawer__sum::-webkit-details-marker { display: none; }
.fs-drawer__sum:hover { color: var(--fs-teal-mid); }
.fs-drawer__sum.is-current { color: var(--fs-teal-mid); font-weight: 700; }

/* 셰브런 — 열리면 180° */
.fs-drawer__caret {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  flex: 0 0 auto;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--fs-dur-fast) var(--fs-ease);
}
.fs-drawer__acc[open] .fs-drawer__caret { transform: rotate(-135deg) translate(-1px, -1px); }

.fs-drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.625rem;
  background: var(--fs-cream);
}
/* .fs-drawer__list a 의 구분선·크기를 하위 링크에서만 되돌린다 */
.fs-drawer__list .fs-drawer__sub a {
  padding: 0.5rem 1.25rem 0.5rem 2.125rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--fs-ink-soft);
  border-block-end: 0;
}
.fs-drawer__list .fs-drawer__sub a:hover,
.fs-drawer__list .fs-drawer__sub a:focus-visible { color: var(--fs-teal-mid); }
.fs-drawer__list .fs-drawer__sub a[aria-current="page"] { color: var(--fs-teal-mid); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .fs-drawer__caret { transition: none; }
}


/* ====================================================================
   === 공용 확장 === 전체보기 — 헤더 아래로 내려오는 전체메뉴 판
   2026-08-28 · 배선은 fs.js 의 initAllMenu().

   PC 전용이다. <1200px 에서는 .fs-allmenu · .fs-megamenu 를 모두 끄고
   드로어의 「전체 열기」 토글이 같은 일을 한다.
   ==================================================================== */

/* ---- 트리거 버튼 (.fs-util 의 마지막 자식) ---- */
.fs-allmenu {
  display: none;                      /* ≥1200px 에서만 켠다 */
  align-items: center;
  gap: 0.4375rem;
  padding: 0.25rem 0.125rem;
  font-size: var(--fs-t-sm);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fs-dur-fast) var(--fs-ease), opacity var(--fs-dur-fast) var(--fs-ease);
}
.fs-allmenu:hover { color: var(--fs-teal-dk); }
.fs-header--overlay .fs-allmenu:hover { color: var(--fs-white); opacity: .75; }

.fs-allmenu__icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  inline-size: 15px;
  block-size: 11px;
  flex: 0 0 auto;
}
.fs-allmenu__icon > span {
  display: block;
  block-size: 1.5px;
  background: currentColor;
  transition: transform var(--fs-dur-fast) var(--fs-ease), opacity var(--fs-dur-fast) var(--fs-ease);
}
/* 열리면 ✕ 로 — 위·아래 막대를 가운데로 모아 교차시킨다 */
.fs-allmenu[aria-expanded="true"] .fs-allmenu__icon > span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.fs-allmenu[aria-expanded="true"] .fs-allmenu__icon > span:nth-child(2) { opacity: 0; }
.fs-allmenu[aria-expanded="true"] .fs-allmenu__icon > span:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); }

/* ---- 전체메뉴 판 ---- */
.fs-megamenu[hidden] { display: none; }

.fs-megamenu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: 2;
  padding-block: clamp(28px, 12px + 1.33vw, 48px) clamp(24px, 8px + 1.33vw, 44px);
  background: var(--fs-white);
  color: var(--fs-ink);
  border-block-start: 1px solid var(--fs-line);
  box-shadow: 0 1.25rem 2.5rem rgba(17, 17, 17, 0.14);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--fs-dur) var(--fs-ease), transform var(--fs-dur) var(--fs-ease);
}
.fs-megamenu.is-open { opacity: 1; transform: translateY(0); }

/* 15개 대분류 — 그리드가 아니라 다단(column) 이다.
   grid 로 깔면 행 높이가 그 행에서 제일 긴 열(코 8개)에 맞춰져서
   「여유증」·「바디」 밑에 200px 씩 빈다. 실측 판 높이 970px → 폴드를 넘겼다.
   다단은 블록을 세로로 채워 붙이므로 같은 내용이 520px 안에 들어온다. */
.fs-megamenu__grid {
  column-count: 4;
  column-gap: clamp(16px, 0px + 1.33vw, 36px);
}
@media (min-width: 90rem) {
  .fs-megamenu__grid { column-count: 5; }
}
.fs-megamenu__col {
  break-inside: avoid;
  margin-block-end: clamp(22px, 6px + 1.33vw, 40px);
}

.fs-megamenu__head {
  display: block;
  padding-block-end: 0.625rem;
  margin-block-end: 0.75rem;
  border-block-end: 1px solid var(--fs-line);
  font-size: clamp(15px, 13.8px + 0.1vw, 17px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--fs-ink);
  transition: color var(--fs-dur-fast) var(--fs-ease);
}
.fs-megamenu__head:hover { color: var(--fs-teal-dk); }
.fs-megamenu__head[aria-current="page"] { color: var(--fs-teal-mid); }

.fs-megamenu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1875rem; }
.fs-megamenu__list a {
  display: block;
  padding-block: 0.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--fs-ink-soft);
  transition: color var(--fs-dur-fast) var(--fs-ease);
}
.fs-megamenu__list a:hover,
.fs-megamenu__list a:focus-visible { color: var(--fs-teal-dk); }
.fs-megamenu__list a[aria-current="page"] { color: var(--fs-teal-mid); font-weight: 700; }

/* 판이 열려 있는 동안에는 항목별 드롭다운을 재운다 — 둘이 겹쳐 뜨면 읽을 수 없다 */
.fs-header.is-mega-open .fs-gnb__panel { display: none; }

/* ---- 드로어 「전체 열기」 토글 ---- */
.fs-drawer__tools {
  display: flex;
  justify-content: flex-end;
  padding: 0.625rem 1.25rem 0;
}
.fs-drawer__expand {
  padding: 0.3125rem 0.5625rem;
  border: 1px solid var(--fs-line-input);
  background: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fs-ink-soft);
  white-space: nowrap;
  cursor: pointer;
}
.fs-drawer__expand[aria-pressed="true"] {
  border-color: var(--fs-teal-mid);
  color: var(--fs-teal-mid);
}

@media (min-width: 75rem) {
  .fs-allmenu { display: inline-flex; }
}
/* <1200px: 전체메뉴 판은 드로어가 대신한다 */
@media (max-width: 74.99rem) {
  .fs-megamenu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-megamenu { transition: none; transform: none; }
  .fs-allmenu__icon > span { transition: none; }
}


/* ====================================================================
   === 색감 변경 === 2026-09-11 · 청록 → 토프(#97796E 계열) 후속 보정
   토큰 값만 갈면 두 군데가 깨진다.
   (1) 「수술 후」 검정 라벨바 — 순검정 #111 은 청록 곁에서는 «결과 강조»였지만 토프 곁에서는
       혼자 튄다(승인자 지적, 80). 같은 H16° 의 가장 어두운 단계로 내린다.
       수술 전 #80665D → 수술 후 #3D302B 명도비 2.4:1 · 흰 글자 12.7:1.
   (2) 다크 밴드 킥커 — 청록 #49BCBD 는 #3C3D3F 위 4.77:1 이었지만 토프 #97796E 는 2.7:1 로
       AA 미달. 다크 밴드에서는 밝은 단계(--fs-teal-neon #E6B8A8 · 6.1:1)로 올린다.
   ★ 되돌리기: 이 블록을 지운다.
   ==================================================================== */
.fs-labelbar--dark { background: #3D302B; }
.fs-section--ink  .fs-kicker:not(.fs-kicker--light):not(.fs-neon-fg):not(.fs-white-fg),
.fs-section--ink2 .fs-kicker:not(.fs-kicker--light):not(.fs-neon-fg):not(.fs-white-fg) { color: var(--fs-teal-neon); }


/* ====================================================================
   === 공용 확장 === 오른쪽 고정 퀵메뉴 (.fs-quickbar)
   2026-09-11 · PPT「리뷰티 수정(병원소개)」1번 「오른쪽 작은버튼 – 인스타그램, 유튜브,
   카톡상담, 네이버예약, 이벤트」. 처음엔 헤더 .fs-util 안 원형 버튼 5개로 넣었다가
   같은 날 승인자 지시로 «스크롤해도 보이는 오른쪽 퀵메뉴» 로 옮겼다 — 헤더는 원상복구
   (그리드 minmax(0,1fr) 그대로, GNB 정중앙 그대로).

   마크업은 </header> 바로 뒤 <nav class="fs-quickbar"> (<!-- fs:quick:start/end --> 센티널,
   주입은 _src/build/menuapply.py:quickbar()). 아이콘 20px + 라벨 10.5px 세로 5칸, 크림 판.
   화면 세로 중앙·오른쪽 가장자리에 fixed. z 40 — 헤더(50)·메가패널·드로어(200) 아래.
   ≥1024px 는 오른쪽 세로 판. <1024 는 2026-10-02 지시로 화면 아래 가로 판(이 블록 끝).
   ★ 되돌리기: 이 블록을 지우고 페이지의 fs:quick 블록을 걷어낸다.
   ==================================================================== */
.fs-quickbar {
  display: none;                      /* ≥1024px 에서만 켠다 */
  position: fixed;
  inset-inline-end: clamp(12px, -12px + 1.875vw, 24px);   /* 1280→12 · 1920→24 */
  inset-block-start: 50%;
  transform: translateY(calc(-50% - 4px));   /* 2026-09-11 4차: «1mm 위로» ≈ 4px */
  z-index: 40;
}
/* 2026-09-11 (같은 날 2차 지시) — «전체 1mm 정도 작게, 블랙&화이트 말고 토프·아이보리로».
   판 74×301 → 68×274 (칸 60×57 → 56×52, 아이콘 22 → 20). 색은 전부 팔레트 토큰:
   판 밝은 아이보리 #FFFEFC · 선 --fs-line-input(웜 라인) · 글자·아이콘 --fs-teal-dk(6.5:1)
   · hover --fs-teal-dk 채움 + 크림 글자. */
.fs-quickbar__list {
  display: grid;
  margin: 0;
  padding: 5px;
  list-style: none;
  /* 2026-09-11 3차 — 판이 --fs-cream(#F6F1EC) 이면 크림 밴드 위에서 판째 사라진다(승인자 스크린샷,
     81 원인 그리드). 밴드보다 한 단 밝은 아이보리로 띄우고 그림자를 조금 더 준다. 흰 본문 위에서는
     헤어라인+그림자가 구분한다. */
  background: #FFFEFC;   /* 4차: «조금 더 밝게» #FDFBF8 → #FFFEFC (흰색에 웜 톤만 남긴 값) */
  border: 1px solid var(--fs-line-input);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(107, 86, 78, .2);
}
.fs-quickbar__list > li + li { border-block-start: 1px solid var(--fs-line-input); }
.fs-quickbar__item {
  display: grid;
  justify-items: center;
  gap: 4px;
  inline-size: 56px;
  padding: 9px 4px 8px;
  border-radius: 10px;
  color: var(--fs-teal-dk);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--fs-dur-fast) var(--fs-ease), color var(--fs-dur-fast) var(--fs-ease);
}
.fs-quickbar__icon { display: grid; place-items: center; inline-size: 20px; block-size: 20px; }
.fs-quickbar__icon svg { inline-size: 100%; block-size: 100%; display: block; }
.fs-quickbar__item:hover,
.fs-quickbar__item:focus-visible {
  background: var(--fs-teal-dk);
  color: var(--fs-cream);
}

@media (min-width: 64rem) {
  .fs-quickbar { display: block; }
}
/* 2026-10-02 승인자 「포시즌 모바일에도 이렇게 퀵메뉴가 떠 있었으면 좋겠어」(참고 캡처: 화면 아래 둥근 흰 판 · 아이콘+글자 한 줄).
   <1024 에서는 같은 마크업(5칸)을 화면 아래 가로 판으로 띄운다 — 좌우·아래 10px(+아이폰 홈 막대 safe-area), 600 이상은 가운데 최대 520px.
   색·판·선은 PC 퀵메뉴 그대로(아이보리 판 · 토프 아이콘). 본문 끝(푸터)이 판에 안 가리게 body 아래 여백 = 판 높이 + 20.
   z 40 그대로 — 드로어(200)가 열리면 그 아래로 숨는다. VIBE LOCK 10(고정 CTA) 예외는 PC 퀵메뉴와 같은 승인자 지시. */
@media (max-width: 63.99rem) {
  .fs-quickbar {
    display: block;
    inset-block: auto calc(10px + env(safe-area-inset-bottom, 0px));
    inset-inline: 10px;
    max-inline-size: 520px;
    margin-inline: auto;
    transform: none;
  }
  .fs-quickbar__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 5px;
    border-radius: 16px;
  }
  .fs-quickbar__list > li + li { border-block-start: 0; }
  .fs-quickbar__item {
    inline-size: auto;
    gap: 5px;
    padding: 8px 2px 7px;
    font-size: clamp(11px, 3.1vw, 12px);
  }
  .fs-quickbar__icon { inline-size: 22px; block-size: 22px; }
  body:has(.fs-quickbar) { padding-block-end: calc(86px + env(safe-area-inset-bottom, 0px)); }   /* 판 ≈66 + 아래 10 + 숨 10 */
}

@media (prefers-reduced-motion: reduce) {
  .fs-quickbar__item { transition: none; }
}

/* ==========================================================================
   === 공용 확장 === 이벤트 바로가기 떠 있는 버튼(.fs-evbtn) — 2026-10-01 승인자 「이벤트 아이콘 모든 페이지에 적용」
   메인 main.css 1절(09-30 「renovow 이벤트 버튼처럼 · 우선 메인에만」 → 10-01 4season_event.png 로 교체)을 그대로 옮겼다.
   마크업 = _src/build/menuapply.py 의 evbtn() — 퀵메뉴 센티널(fs:quick) 안 </nav> 바로 뒤. 문구는 menuapply.py 의 EVB_LINE1/2 를 고치고 다시 돌린다.
   사진 = assets/main/event-button-2.webp(원 + 모델 누끼, 구운 글자 지운 판 · _src/gen/main-evbtn2/), 글자 = SVG <textPath> 두 줄(아치형).
   자리 = 퀵메뉴 아래 끝 + 16px, 오른쪽 변 = 퀵메뉴. 크기 --evb = 원 지름(96~180) — 하단 빠른 상담 바(--qc-h, :root)를 비켜 계산한다.
   ≥1024 전용(퀵메뉴와 같은 이유). VIBE LOCK 10-e(고정 CTA 금지) 예외 — 퀵메뉴와 같은 승인자 지시 예외.
   ========================================================================== */
.fs-evbtn { display: none; }

@media (min-width: 64rem) {
  .fs-evbtn {
    /* 위 = 퀵메뉴 아래 끝 + 16px. 퀵메뉴는 top 50% · translateY(−50% − 4px) · 판 높이 274px(칸 5개)라 아래 끝 = 50vh + 133px.
       ★ 퀵메뉴 칸 수가 바뀌면 133 을 (판 높이 / 2 − 4)로 같이 고쳐라.
       --evb = 원 지름 = 사진 폭. 10-01 새 버튼은 원 위로 머리가, 원 아래로 「EVENT」 가 나와 전체 높이가 지름의 552/381 = 1.449배다
       (옛 버튼은 1.18배). 창 아래 12px + 빠른 상담 바(--qc-h 72)를 남기려면 지름 ≤ (50vh − 149 − 84) / 1.449 = 34.507vh − 160.8px.
       1080 창 180 · 900 150 · 800 115 · 745 미만은 아래 폴백. */
    --evb: clamp(96px, 34.507vh - 160.8px, 180px);
    position: fixed;
    z-index: 40;                                                  /* 퀵메뉴와 같은 층 — 헤더(50)·드로어(200) 아래 */
    inset-inline-end: clamp(12px, -12px + 1.875vw, 24px);        /* 퀵메뉴와 같은 오른쪽 변 */
    inset-block-start: calc(50vh + 133px + 16px);
    display: block;
    inline-size: var(--evb);
    padding-block-end: calc(var(--evb) * 50 / 381);              /* 사진(502) 아래로 걸친 「EVENT」 자리 = 552 − 502 — 눌리는 상자에 넣는다 */
    text-decoration: none;
    /* renovow 의 bounce-in-top 키프레임을 «한 번만» — 무한 반복은 WCAG 2.2.2 에 걸린다.
       퀵메뉴 바로 밑으로 온 뒤(09-30 후속) 30px 로 튀면 라인상담 칸을 덮어서 높이를 14 → 7 → 2px 로 줄였다(간격 16 안).
       → 10-12 승인자 「팝업처럼 계속 통통 튀는 모션」 — 첫 착지(2.4s) 0.6초 뒤부터 fs-evbtn-hop 을 무한 반복한다(아래 키프레임).
         WCAG 2.2.2 는 마우스 올림·키보드 포커스 때 멈춤(아래 :hover) + reduced-motion 끔으로 대신한다. */
    animation: fs-evbtn-bounce 1.6s .8s 1 backwards, fs-evbtn-hop 2.2s 3s infinite;
    transform-origin: 50% 100%;                                   /* 10-02 착지 눌림은 아래 변 기준 */
    transition: translate var(--fs-dur-fast) var(--fs-ease);
  }
  .fs-evbtn__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    filter: drop-shadow(0 6px 14px rgba(107, 86, 78, .28));      /* 퀵메뉴 판 그림자 계열 — 누끼 윤곽을 따라간다 */
  }
  /* 글자 SVG — viewBox 는 사진 좌표(381 폭) 그대로라 지름이 바뀌어도 같이 줄고 는다. 좌우로 조금 넘치는 「EVENT」 는 overflow 로 보인다. */
  .fs-evbtn__txt {
    position: absolute; inset-inline-start: 0; inset-block-start: 0;
    inline-size: 100%; block-size: auto;
    overflow: visible;
    font-family: var(--fs-font-gm); font-weight: 700;
    stroke-linejoin: round;
  }
  .fs-evbtn__halo  { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 34; }            /* 포시즌 흰 테두리(외곽선 밖 11) */
  .fs-evbtn__edge1 { fill: #6F6458; stroke: #6F6458; stroke-width: 12; }            /* 포시즌 외곽선(3.5) */
  .fs-evbtn__l1    { fill: url(#evb-fill1); stroke: url(#evb-fill1); stroke-width: 5; }   /* 굵기 +2.5 */
  .fs-evbtn__edge2 { fill: #F9EC96; stroke: #F9EC96; stroke-width: 15; }            /* EVENT 외곽선(5.5) */
  .fs-evbtn__l2    { fill: #5F5449; stroke: #5F5449; stroke-width: 4; }             /* 굵기 +2 */
  .fs-evbtn:hover { translate: 0 -3px; }
  .fs-evbtn:hover, .fs-evbtn:focus-visible { animation-play-state: paused; }   /* 누르려는 순간엔 안 튄다 */
  .fs-evbtn:focus-visible { outline: 2px solid var(--fs-teal-dk); outline-offset: 4px; border-radius: 12px; }
}
/* 창 높이 745px 미만(1366×657 노트북 · 125% 배율 등)에서는 원을 최소(96px)로 줄여도 퀵메뉴 밑과 하단 상담 바 사이에 안 들어간다
   (필요 높이 = 50vh + 149 + 1.449 × 96 + 12 + 바 72). 그때는 바 바로 위(16px)에 붙이고 퀵메뉴 열 왼쪽으로 비킨다 — 퀵메뉴 판 68px + 간격 12px.
   (옛 버튼은 1.18배라 693px 미만이었다.) */
@media (min-width: 64rem) and (max-height: 744px) {
  .fs-evbtn {
    inset-block-start: auto; inset-block-end: calc(var(--qc-h, 0px) + 16px);
    inset-inline-end: calc(clamp(12px, -12px + 1.875vw, 24px) + 80px);
  }
}

/* 10-01 승인자 「이벤트 버튼 옆에 조금 깨진 거 같지 않아?」 — 창이 낮아 지름이 작아지면(785 창 110px) 「포시즌」 짙은 외곽선(3.5 단위)이
   1px 아래로 얇아져 사라지고, 노란 글자가 흰 테두리에 번져 뭉개져 보였다(원본 PNG 를 같은 크기로 줄이면 외곽선이 또렷하다).
   지름이 줄어드는 높이에서만 외곽선을 단계적으로 굵혀 화면에서 약 1.6~2px 를 지킨다. 흰 테두리는 외곽선 + 22 그대로. 900 이상(지름 150~180)은 원본 비율. */
@media (min-width: 64rem) and (max-height: 899px) {
  .fs-evbtn__edge1 { stroke-width: 15; }
  .fs-evbtn__halo  { stroke-width: 37; }
}
@media (min-width: 64rem) and (max-height: 819px) {
  .fs-evbtn__edge1 { stroke-width: 18; }
  .fs-evbtn__halo  { stroke-width: 40; }
}

/* 2026-10-02 승인자 「이벤트 버튼은 처음에 통통 튀는거 조금 더 강하게」 — 14 → 7 → 2px 를 26 → 12 → 4px 로(약 2배) + 착지할 때 살짝 눌렸다 펴짐.
   26px 이면 꼭대기에서 퀵메뉴 판 아래 여백(「라인상담」 글자 아래 14px)에 0~11px 걸치지만 글자는 안 덮는다(실측 여유 15~20px + 14px).
   눌림은 아래 변 기준(transform-origin) — 위로는 안 커져 판에 더 안 닿는다. */
@keyframes fs-evbtn-bounce {
  0%, 20%  { transform: translateY(0) scale(1, 1);       animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  40%, 43% { transform: translateY(-26px) scale(1, 1);   animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  53%      { transform: translateY(0) scale(1.05, .93);  animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  58%      { transform: translateY(-3px) scale(1, 1);    animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  70%      { transform: translateY(-12px) scale(1, 1);   animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  80%      { transform: translateY(0) scale(1.03, .96);  animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  84%      { transform: translateY(-1px) scale(1, 1);    animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  90%      { transform: translateY(-4px) scale(1, 1);    animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  100%     { transform: translateY(0) scale(1, 1); }
}

/* 2026-10-12 승인자 「팝업처럼 계속 통통 튀는 모션」 — 첫 튐(26px) 뒤에 2.2초마다 16 → 6px 두 번 + 착지 눌림, 남은 1초는 쉰다.
   높이 16px 는 퀵메뉴와의 간격(16px) 안이라 반복해도 판에 안 닿는다.
   쉬는 구간(56~100%)이 가상시간 9초(지연 3s + 6s ≡ 1.6s/2.2s = 73%)에 걸리게 잡았다 — RM diff 렌더가 착지 상태를 찍는다. */
@keyframes fs-evbtn-hop {
  0%       { transform: translateY(0) scale(1, 1);       animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  16%      { transform: translateY(-16px) scale(1, 1);   animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  31%      { transform: translateY(0) scale(1.04, .95);  animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  36%      { transform: translateY(-2px) scale(1, 1);    animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  44%      { transform: translateY(-6px) scale(1, 1);    animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
  52%      { transform: translateY(0) scale(1.02, .97);  animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
  56%, 100% { transform: translateY(0) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .fs-evbtn { animation: none; transition: none; }
}

/* ==========================================================================
   === 공용 확장 === 서브 히어로 규격 통일 (2026-09-11 승인자 지시)

   「홈페이지 각 페이지의 히어로 사이즈를 56 의 히어로와 같은 사이즈로 통일하고,
     히어로 타이틀 텍스트 밑에 줄이 있는 형식도 통일해줘.
     단 91 · 119 · 94 · 97 은 크기도 형식도 건드리지 말 것」

   정본은 56(콧볼축소) `.fs-alar-hero` 다 — 승인자가 스크린샷으로 지목한 그 히어로:
     높이  min-height: clamp(520px, 380px + 12vw, 720px)
           → 1024:520 · 1280:534 · 1440:553 · 1838:601 · 1920:610
     밑줄  block 2px · --fs-teal · inline-size clamp(48px, 42.5px + 1.538vw, 72px)
           · margin-block-start clamp(4px, 2.6px + 0.385vw, 10px)

   ★ 왜 page CSS 가 아니라 여기인가 — 히어로 높이는 105장이 각자 자기 CSS 에 적어 놨고,
     그중 32장은 `.fs-hero--tall` 기본값(1920 에서 755px)에 기대고 있었다. 페이지마다
     고치면 100번 넘게 손대야 하고 페이지가 늘 때마다 또 어긋난다. 한 곳에서 건다.
   ★ 특정성 — page CSS 는 fs.css «뒤에» 로드되므로 (0,2,0) 인 `.fs-p-NN .fs-xx-hero` 를
     이겨야 한다. body 의 :not() 5개로 (0,6,0) 을 만든다. !important 는 쓰지 않았다.
   ★ 제외 식별자 — 91 은 `.fs-p-91` 이 없고 `body.fs-page-about` 이 유일 식별자다(91 전용).
     메인(`body.p-main`)은 전체화면 슬라이드쇼라 archetype 자체가 달라 같이 뺐다.
     57 은 반대로 body 에 `fs-page-nose` 뿐이라 개별 지정이 불가능한데, 승인자가
     「57 도 포함」으로 답했으므로 일반 규칙에 그대로 걸린다.
   ★ 높이는 1024px 이상만 건다 — 그 아래에서는 32장이 «카피 위 / 사진 아래» 로 스택되는
     다른 배치이고(page CSS 가 min-height:0 으로 풀어 둔다) 높이를 강제하면 빈 면이 생긴다.
     밑줄은 폭 제한 없이 전 구간에 건다(형식이라 폭과 무관하다).
   ★ min-height 는 «바닥» 이라 내용이 더 긴 히어로(42 이벤트 캐러셀 등)는 그대로 더 높다.
     height 로 박으면 내용이 잘리므로 그렇게 하지 않았다.
   ========================================================================== */

@media (min-width: 1024px) {
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
  :is(.fs-hero, .fs-price-hero, .fs-press-hero, .fs-prep-hero,
      .fs-events-hero, .fs-facelift-hero, .fs-ulthera-hero) {
    min-height: clamp(520px, 380px + 12vw, 720px);
    /* 33(쌍꺼풀)은 히어로에 height:755px 와 aspect-ratio:1920/755 를 박아 뒀다.
       둘 다 min-height 를 덮으므로 초기값으로 되돌린다(다른 페이지엔 무영향). */
    height: auto;
    aspect-ratio: auto;
  }
  /* `.fs-hero` 는 fs.css:1173 에서 이미 grid + align-items:center 다.
     `.fs-section` 을 히어로로 쓰는 6종(105 · press · 시술준비 8장 · 42 · 134 · 152)은
     블록이라 늘어난 높이만큼 카피가 위로 붙는다 — 같은 «가운데» 축으로 맞춘다. */
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
  :is(.fs-price-hero, .fs-press-hero, .fs-prep-hero,
      .fs-events-hero, .fs-facelift-hero, .fs-ulthera-hero) {
    display: grid;
    align-items: center;
  }
}

/* 타이틀 밑줄 — 줄 요소가 «없는» 82장은 마크업을 안 건드리고 ::after 로 그린다.
   (HTML 100장을 고치면 R1 게이트를 100번 통과시켜야 한다 — CSS 면 문구 변경 0건이다) */
body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
:is(.fs-hero__title, .fs-price-hero__title, .fs-press-hero__title, .fs-prep-hero__title,
    .fs-events-hero__title, .fs-facelift-hero__title, .fs-ulthera-hero__title,
    .fs-body-hero__title)::after {
  content: "";
  display: block;
  inline-size: clamp(48px, 42.5px + 1.538vw, 72px);
  block-size: 2px;
  margin-block-start: clamp(4px, 2.6px + 0.385vw, 10px);
  background: var(--fs-teal);
}

/* 이미 줄 «요소» 를 가진 23장은 그 요소를 정본 스펙으로 맞춘다.
   (폭 56~92px · 두께 2~3px · 색 --fs-teal / --fs-teal-dk 로 제각각이었다) */
body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
[class*="hero__rule"] {
  display: block;
  inline-size: clamp(48px, 42.5px + 1.538vw, 72px);
  block-size: 2px;
  margin-block-start: clamp(4px, 2.6px + 0.385vw, 10px);
  background: var(--fs-teal);
}

/* 줄이 두 개가 되지 않게 — 요소가 있는 히어로에서는 ::after 를 끈다.
   :has() 가 (0,2,0) 이라 위 ::after 규칙 (0,6,0) 보다 한 단 높다(0,7,0). */
body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
:is(.fs-hero, .fs-price-hero, .fs-press-hero, .fs-prep-hero,
    .fs-events-hero, .fs-facelift-hero, .fs-ulthera-hero):has([class*="hero__rule"])
:is(.fs-hero__title, .fs-price-hero__title, .fs-press-hero__title, .fs-prep-hero__title,
    .fs-events-hero__title, .fs-facelift-hero__title, .fs-ulthera-hero__title,
    .fs-body-hero__title)::after {
  content: none;
}

/* 가운데 정렬 히어로에서는 줄도 가운데로. 단 56(정본)과 149 는 `--center` 이면서도
   카피를 좌측 축으로 되돌려 쓰므로(page CSS) 줄도 왼쪽에 둔다 — 정본의 모습이다. */
body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
.fs-hero--center:not(.fs-alar-hero):not(.fs-laser-lifting-hero)
:is(.fs-hero__title, .fs-body-hero__title)::after,
body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
.fs-hero--center:not(.fs-alar-hero):not(.fs-laser-lifting-hero)
[class*="hero__rule"] {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   위 규칙은 min-height(=바닥)라 «내용이 더 긴» 히어로 9장은 601px 를 넘겨 남았다.
   실측(1838px): 84·127 693 · 142 737 · 145 738 · 130 703 · 152 695 · 52 693 · 55 769 · 42 994.
   그 9장의 «넘치는 원인» 만 골라 깎는다. 전부 이 통일 작업 때문에 생긴 규칙이라
   page CSS 로 흩지 않고 여기 모아 둔다(되돌릴 때도 한 덩이다).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* ① 84 · 127 · 142 · 145 — «가운데 카피 + 3컷 스트립» 한 archetype.
     스트립 칸이 height:clamp(…,500px) 로 박혀 있어 카피와 무관하게 히어로를 밀어 올린다.
     칸 높이를 «통일 높이 − 240px» 로 매어 둔다. 240 은 네 장의 나머지(카피+여백+간격)
     최댓값 238 을 덮는 값이라, 어느 폭에서도 내용이 통일 높이를 넘지 않는다
     → 항상 min-height 가 높이를 정한다(= 601px @1838). 칸은 overflow:hidden +
     object-fit:cover 라 줄어든 만큼 사진이 잘릴 뿐 비율은 안 망가진다.
     실측 나머지 — 84·127 154/174/193 · 142 184/211/237 · 145 193/216/238 (1024/1440/1838) */
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
  :is(.fs-skin-hero__cell, .fs-pig-hero__cell, .fs-cb-hero__cell, .fs-pas-hero__cell) {
    height: calc(clamp(520px, 380px + 12vw, 720px) - 240px);
  }

  /* ② 52 · 55 — 오버레이 헤더용 위 여백(133.5px)은 그대로 둬야 카피가 헤더 뒤로 안 들어간다.
     아래 여백(95.1px)만 걷는다. `.fs-hero` 가 align-items:center 라 아래를 비워도 축은 유지된다. */
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
  :is(.fs-bulb-hero, .fs-cn-hero) {
    padding-block-end: 0;
  }
  /* 55 는 그래도 673px 이다 — 카피(217) 밑 도해 4칸이 292px 을 먹는다.
     칸은 이미 191px 폭이라 폭 상한을 낮춰도 안 줄고, 세로로 긴 도해가 높이를 정한다.
     도해 «높이» 에 상한을 주고 object-fit:contain 으로 비율을 지킨다 — 그림만 작아진다.
     라벨바는 figure 폭(191px)을 그대로 쓰므로 LOCK 2(바 폭 = 도해 폭)는 안 깨진다. */
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
  .fs-cn-hero__ill {
    block-size: clamp(120px, 87px + 5.3vw, 184px);
    inline-size: 100%;
    object-fit: contain;
  }

  /* ③ 130 — 두 열이 stretch 라 «사진 열의 고유 비율» 이 행 높이를 정한다(703px).
     카피 여백만 줄여서는 안 바뀐다(실측 확인). 사진 열에 통일 높이를 직접 매고,
     카피 여백은 그 안에서 숨 쉴 만큼만 남긴다. img 는 이미 height:100%+cover 다. */
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
  .fs-body-hero__media { block-size: clamp(520px, 380px + 12vw, 720px); min-height: 0; }
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
  .fs-body-hero__copy { padding-block: clamp(28px, 20px + 0.6vw, 40px); }

  /* ④ 152 — 그리드 자체의 위아래 여백(72.5+65.6)이 601 을 넘긴다. */
  body:not(.p-main):not(.fs-page-about):not(.fs-p-119):not(.fs-p-94):not(.fs-p-97)
  .fs-ulthera-hero__grid { padding-block: clamp(16px, 12px + 0.3vw, 24px); }
}

/* ==========================================================================
   === 공용 확장 === 카테고리 틴트 (2026-09-14 · 파일럿 바디성형 → 2단계 확산, 첫 카테고리 = 재수술)
   승인자 지시 「91·119 의 색 공식으로 시술 7카테고리의 히어로 색감을 카테고리마다 하나로」.
   계획·틴트 근거·결정 이력은 _design/HERO_TINT_PLAN.md (§0 공식 · §6 결정). 값은 웜 브라운 축(hue 15~45°) · 채도 ≤ .15 · 밝은 톤.
   배선: <body class="… fs-cat-<카테고리>"> — menu.json 의 상위 항목이 정본(카테고리별 확산 시 menuapply 가 주입).

   이 블록이 정하는 것(파일럿 7차에서 확정된 공식):
     · 오버레이 헤더 뒤 바탕 · 히어로 바탕색 = 틴트(--fs-cat-hex)
     · 메뉴바 안개 = 틴트를 흰색으로 70% 희석한 «연한색»(--fs-cat-light) .62 → .34 → 0, 높이 헤더 1.6배 — About·48 처럼
       «사진이 메뉴까지 이어짐» 으로 읽히는 세기. 위→아래 띠(.94)·방사 글로우(.92)·프로스트 글라스는 승인자 반려.
     · 메뉴 글자 후광(text-shadow 연한색 4겹) — 머리카락 위 잉크 GNB 를 10:1 로.
   페이지 CSS 가 정하는 것: 카피 쪽 가로 스크림(틴트 .92 → 0 @62%, 모델 반대편, 사진마다 위치가 다르다) · <1024 스택 밴드 —
   둘 다 var(--fs-cat)/var(--fs-cat-hex) 를 쓴다. 모델 위치(object-position)는 09-11 값 유지(내리지 않는다).
   특정성 (0,2,1)/(0,3,1) 로 페이지 CSS 의 .fs-p-NN 규칙(0,2,0)/(0,3,0)을 이긴다.
   ========================================================================== */
body.fs-cat-eye      { --fs-cat: 221,228,235; --fs-cat-hex: #DDE4EB; --fs-cat-light: 242,245,248; }   /* 눈성형   블루그레이 — 승인자 결정(09-14): 웜 축의 유일한 쿨 예외, 48 사진 상단색 계열 */
body.fs-cat-contour  { --fs-cat: 241,234,220; --fs-cat-hex: #F1EADC; --fs-cat-light: 251,249,244; }   /* 윤곽성형 아이보리 */
body.fs-cat-revision { --fs-cat: 227,221,214; --fs-cat-hex: #E3DDD6; --fs-cat-light: 247,245,243; }   /* 재수술   웜 그레이 */
body.fs-cat-body     { --fs-cat: 233,221,208; --fs-cat-hex: #E9DDD0; --fs-cat-light: 252,249,246; }   /* 바디성형 베이지 (파일럿) */
body.fs-cat-petit    { --fs-cat: 243,227,224; --fs-cat-hex: #F3E3E0; --fs-cat-light: 251,246,245; }   /* 쁘띠/레이저 라이트 로즈 — 09-14 승인자: 코 로즈그레이지와 겹치지 않게 밝게(ΔE 6.9→9.4) */
body.fs-cat-lifting  { --fs-cat: 232,216,194; --fs-cat-hex: #E8D8C2; --fs-cat-light: 248,243,237; }   /* 포유리프팅 허니 베이지 */
body.fs-cat-nose     { --fs-cat: 216,201,196; --fs-cat-hex: #D8C9C4; --fs-cat-light: 243,239,237; }   /* 코성형   로즈 그레이지 (57 확정색) */

body[class*="fs-cat-"] .fs-page--overlay { background: var(--fs-cat-hex); }
body[class*="fs-cat-"] .fs-hero { background-color: var(--fs-cat-hex); }
body[class*="fs-cat-"] .fs-header--overlay::before {
  content: "";
  background: linear-gradient(180deg, rgba(var(--fs-cat-light), .62) 0%, rgba(var(--fs-cat-light), .34) 55%, rgba(var(--fs-cat-light), 0) 100%);
}
body[class*="fs-cat-"] .fs-header--overlay .fs-gnb__link,
body[class*="fs-cat-"] .fs-header--overlay .fs-util__link,
body[class*="fs-cat-"] .fs-header--overlay .fs-util__sep,
body[class*="fs-cat-"] .fs-header--overlay .fs-allmenu {
  text-shadow: 0 0 2px rgba(var(--fs-cat-light), 1), 0 0 8px rgba(var(--fs-cat-light), 1),
               0 0 18px rgba(var(--fs-cat-light), .95), 0 0 28px rgba(var(--fs-cat-light), .8);
}
/* 코성형 킥커 — 틴트가 가장 진해 --fs-teal-dk 가 4.3:1. 승인자 결정 B: 색은 유지하고 «큰 글자»(19px+ · 700)로 → 큰 글자 기준 3:1 통과.
   (36 허브가 이미 이 방식.) 코성형 페이지 확산 시 여기서 한 번에 건다. */
body.fs-cat-nose .fs-hero .fs-hero__kicker { color: var(--fs-teal-dk); font-size: clamp(19px, 17.5px + 0.42vw, 23px); font-weight: 700; }

/* ====================================================================
   === 공용 확장 === 빠른 상담 바(.p-quick) — 2026-10-01 승인자 「빠른 상담 신청이 모든 페이지에 가게」
   메인 main.css 5절(PPT 8, 참고 1mmps.com 하단 바)을 범위만 풀어 옮겼다(.p-main → 전역). 마크업은 전 페이지
   <!-- fs:qconsult --> 블록 = _src/build/qconsult-apply.py 가 _src/build/qconsult.tpl.html 로 넣는다(연락 섹션 바로 위).
   ≥1024  화면 하단 고정 한 줄 바(높이 --qc-h). 바가 있는 페이지(body:has(.p-quick))만 본문 아래 여백을 같은 만큼 준다.
   <1024  연락 섹션 위의 보통 블록(세로로 쌓인 폼).
   검증·완료 패널 = fs.js initConsultForm([data-fs-form]). 전송은 아직 없다(접수 연결 전).
   z-index 45 = 퀵메뉴·이벤트 버튼(40) 위 · 헤더(50) 아래. 이벤트 버튼은 --qc-h 만큼 위로 비킨다(이 파일 「이벤트 바로가기 떠 있는 버튼」 절 · 10-01 전 페이지).
   우선순위: 상담 바 규칙은 전부 .p-quick 아래로 건다(0,2,0↑) — 메인에는 옛 상담 폼용 .p-main .fs-form{gap}·.p-main .fs-form__row{gap}(0,2,0)가
   남아 있어 범위만 푼 .qc-form(0,1,0)이 져서 모바일 블록이 50px 벌어졌다. 같은 특정성이면 이 블록이 파일 끝이라 이긴다.
   체크 라벨 줄 간격 1.25 · 버튼 글자 clamp(13~15px) 는 메인에서 .p-main 규칙으로 먹던 값을 명시한 것(서브페이지도 같게).
   ==================================================================== */
/* 10-15 승인자 「하단 상담바 fbf8f2 박스컬러 · 6f6c67 폰트컬러」 — 짙은 바(rgba 52,42,37,.95) → 밝은 바. 버튼·오류색·칸 테두리를 같이 뒤집었다 */
:root { --qc-h: 72px; --qc-bg: #FBF8F2; --qc-ink: #6F6C67; --qc-ph: #8F8A84; }   /* --qc-ph 웜그레이 안내문구 3.42:1 (옛 #A6A6A6 2.43:1) */
.p-quick { background: var(--qc-bg); color: var(--qc-ink); }
.p-quick .qc-inner {
  max-inline-size: calc(var(--fs-container) + var(--fs-gutter) * 2); margin-inline: auto;
  padding-inline: var(--fs-gutter);
}
.p-quick .qc-title { margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--qc-ink); }
.p-quick .qc-form { margin: 0; }
.p-quick .qc-field { position: relative; gap: 6px; }
.p-quick .qc-form .fs-input,
.p-quick .qc-form .fs-select { border-color: var(--fs-line-control); border-width: 2px; font-size: 15px; }   /* 흰 칸이 밝은 바에 녹지 않게 · 10-15 「조금 두껍게」 1→2px · 색은 체크박스와 통일 */
/* 10-15 타이포 점검 — 안내문구 웜그레이 · ▾ 화살표와 선택값을 바 글자색으로(검정 #111 이 바에서 가장 진한 점이었다) */
.p-quick .qc-form .fs-input::placeholder { color: var(--qc-ph); }
/* 10-15 「자간도 맞춰줘」 — 폼 컨트롤·button 은 body 의 -0.01em 을 상속하지 않아 0 이었다. 본문급은 -0.01em, 굵은 제목·버튼은 -0.02em(사이트 규칙) */
.p-quick .qc-form .fs-input, .p-quick .qc-form .fs-select, .p-quick .qc-policy-btn,
.p-quick .qc-agree .fs-check__label { letter-spacing: -0.01em; }   /* 동의 문구는 부모 17px 의 -0.17px 를 물려받아 -0.012em 이었다 */
.p-quick .qc-form .fs-select {
  color: var(--qc-ph);
  background-image: linear-gradient(45deg, transparent 50%, var(--qc-ink) 50%),
                    linear-gradient(135deg, var(--qc-ink) 50%, transparent 50%);
}
.p-quick .qc-form .fs-select:valid, .p-quick .qc-form .fs-select.is-filled { color: var(--qc-ink); }
.p-quick .qc-agree .fs-check__label { color: var(--qc-ink); font-size: 14px; font-weight: 500; line-height: 1.25; }
.p-quick .qc-agree .fs-check__mark { border-width: 2px; }       /* 10-15 「체크박스 테두리도 두껍게」 1→2px — 입력칸과 맞춤 */
.p-quick .qc-policy-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; color: var(--qc-ink); text-decoration: underline; text-underline-offset: 3px;
}
.p-quick .qc-submit {
  justify-content: center; min-block-size: 44px; padding-inline: 24px; font-size: 15px;   /* 10-15 clamp(13~15) → 15 고정: 모바일에서 동의 문구(14)보다 작아지던 위계 역전 */
  background: var(--qc-ink); border: 0; color: var(--fs-white); font-weight: 700; white-space: nowrap;
}
.p-quick .qc-submit:hover, .p-quick .qc-submit:focus-visible { background: var(--fs-ink); }
.p-quick .qc-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.p-quick .qc-done[hidden] { display: none; }                       /* 저자 display 가 hidden 을 이긴다 */
.p-quick .qc-done__title { margin: 0; font-weight: 700; }
.p-quick .qc-done__warn { margin: 0; font-size: 13px; color: var(--qc-ink); }
.p-quick .qc-done__warn strong { color: var(--qc-ink); }
.p-quick .qc-done__again { min-block-size: 40px; background: var(--qc-ink); color: var(--fs-white); border: 0; }
/* 개인정보 동의 요약 — Popover(JS 없이 열고 닫힌다) */
.p-quick .qc-policy {
  inline-size: min(92vw, 520px); padding: 26px 26px 22px;
  border: 1px solid var(--fs-line-input); background: var(--fs-white); color: var(--fs-ink);
  font-size: var(--fs-t-sm); line-height: 1.6;
}
.p-quick .qc-policy::backdrop { background: rgba(0, 0, 0, .38); }
.p-quick .qc-policy__title { margin: 0 0 14px; font-weight: 700; font-size: 17px; }
.p-quick .qc-policy p { margin: 0 0 10px; color: var(--fs-muted-2); }
.p-quick .qc-policy .cs-policy__more a { color: var(--fs-teal-dk); text-decoration: underline; }
.p-quick .qc-policy__close { margin-block-start: 6px; min-block-size: 40px; }

@media (min-width: 1024px) {
  body:has(.p-quick) { padding-block-end: var(--qc-h); }          /* 푸터 끝이 바에 가리지 않게 */
  .p-quick {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;   /* 퀵메뉴·이벤트(40) 위 · 헤더(50) 아래 */
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-block-start: 2px solid var(--fs-line-input);           /* 밝은 바가 흰 본문 위에서 경계를 잃지 않게 · 10-15 「이쪽 선도 두껍게」 1→2px */
  }
  .p-quick .qc-inner { display: flex; align-items: center; gap: 18px; min-block-size: var(--qc-h); }
  .p-quick .qc-title { flex: 0 0 auto; font-size: 17px; white-space: nowrap; }
  .p-quick .qc-form { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-inline-size: 0; }
  .p-quick .qc-form .fs-input,
  .p-quick .qc-form .fs-select { min-block-size: 44px; padding-block: 8px; padding-inline: 14px; }
  .p-quick .qc-field--name  { flex: 0 1 130px; }
  .p-quick .qc-field--tel   { flex: 0 1 150px; }
  .p-quick .qc-field--area  { flex: 0 1 170px; }
  .p-quick .qc-field--msg   { flex: 1 1 160px; min-inline-size: 90px; }
  .p-quick .qc-field--agree { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
  .p-quick .qc-agree .fs-check__label { white-space: nowrap; }
  .p-quick .qc-submit { margin-inline-start: 14px; }   /* 10-15 동의 묶음 ↔ 버튼 10→24px — 「내용 보기」가 버튼에 붙어 읽혔다 */
  /* 오류는 칸 위 말풍선 — 바 높이가 흔들리지 않게 */
  .p-quick .qc-err {
    position: absolute; inset-inline-start: 0; inset-block-end: calc(100% + 8px);
    padding: 5px 9px; background: var(--fs-red-aa); color: var(--fs-white); white-space: nowrap;
  }
  .p-quick .qc-done { flex: 1 1 auto; }
}
/* 1024~1279 — 제목까지 한 줄에 넣으면 폼이 넘친다. 제목은 화면에서만 숨기고(낭독은 유지) 칸을 조금 줄인다 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .p-quick .qc-title {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .p-quick .qc-field--name { flex-basis: 104px; }
  .p-quick .qc-field--tel  { flex-basis: 124px; }
  .p-quick .qc-field--area { flex-basis: 136px; }
  .p-quick .qc-submit { padding-inline: 16px; }
}
@media (max-width: 1023px) {
  .p-quick { padding-block: clamp(40px, 33px + 1.8vw, 56px); }
  .p-quick .qc-inner { display: grid; gap: 18px; max-inline-size: calc(560px + var(--fs-gutter) * 2); }
  .p-quick .qc-title { font-size: var(--fs-t-h3); text-align: center; }
  .p-quick .qc-form { display: grid; gap: 10px; }
  .p-quick .qc-field--agree { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .p-quick .qc-err { color: var(--fs-red-aa); }                   /* 밝은 바(10-15) 위 AA — 옛 짙은 판용 #FFB4A8 은 안 읽힌다 */
  .p-quick .qc-submit { inline-size: 100%; min-block-size: 50px; margin-block-start: 6px; }
}
/* 개인정보 동의 요약 칸 — 메인 옛 상담 폼의 .p-main .cs-policy__* 를 팝업 안 범위로 */
.p-quick .qc-policy .cs-policy__sum { display: grid; gap: 4px; margin-block-end: 12px; }
.p-quick .qc-policy .cs-policy__pair { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
.p-quick .qc-policy .cs-policy__pair dt { font-weight: 700; color: var(--fs-ink); }
.p-quick .qc-policy .cs-policy__more { margin-block-start: 12px; }

/* ====================================================================
   === 공용 확장 === 오버레이 헤더 «옅은 상자» — 2026-10-08 승인자 「옅은 상자로 전체 적용」(메인 · main.css 10절) → 「페이지 전체에 적용」
   밝은 히어로 위 잉크 헤더 47장(카테고리 31 + 아래 16)의 흐려지는 안개(::before — 카테고리색 .62→.34→0 · 크림 .84 · 흰 .72)와
   메뉴 글자 후광(text-shadow, 승인자 「테두리 없게」)을 걷고, 헤더 높이만큼 옅은 상자(헤더 배경 · 진하기 .30)를 깐다.
   색 = 히어로 위 띠의 벽 색(밝은 60% 화소 중앙값, 안개·글자 끄고 1920 실측)을 흰 쪽으로 60% 섞은 톤 — 메인과 같은 방법.
   카테고리 페이지는 실측값이 --fs-cat-light 와 채널당 ≤8(진하기 .30 이면 ≤2.4단계)이라 그 변수를 쓰고, 나머지 16장은 아래에 박았다 — 히어로를 갈면 다시 뽑아라.
   대상은 :is() 목록으로만 건다(새 오버레이 페이지는 목록에 넣어야 걸린다). 메인(.p-main, main.css 가 따로)·49(검은 히어로·흰 글자)는 뺐다.
   ≥1024 만(메인과 같다) — <1024 는 메뉴 글자가 버거 안에 있고 헤더 뒤가 대개 단색이라 그대로 둔다.
   메뉴 뒤가 검은 머리인 자리는 대비가 2~3:1 로 떨어진다 — 메인에서 승인자가 그 수치를 보고 고른 상태. 올리려면 진하기 ≈.6.
   특정성 :root :is(body…) .fs-header--overlay(::before) = (0,3,1)/(0,3,2) — 페이지 CSS(.fs-p-NN 0,2,1 · body.fs-page-nose 0,2,2)와
   위 카테고리 규칙(0,2,2)을 이긴다. 되돌리기 = 이 절 통째 삭제(백업 _src/build/backup-hdrbox-all-1008/fs.css).
   ==================================================================== */
body[class*="fs-cat-"] { --fs-hdr-box: var(--fs-cat-light); }
body.fs-p-109 { --fs-hdr-box: 245, 244, 247; }   /* 벽 229,228,236 */
body.fs-p-110 { --fs-hdr-box: 244, 242, 240; }   /* 벽 227,223,217 */
body.fs-p-113 { --fs-hdr-box: 251, 245, 239; }   /* 벽 244,231,214 */
body.fs-p-114 { --fs-hdr-box: 245, 243, 240; }   /* 벽 230,224,217 */
body.fs-p-146 { --fs-hdr-box: 253, 250, 247; }   /* 벽 249,243,234 */
body.fs-p-45  { --fs-hdr-box: 255, 251, 244; }   /* 벽 254,246,227 */
body.fs-p-50  { --fs-hdr-box: 246, 243, 241; }   /* 벽 232,226,219 */
body.fs-p-52  { --fs-hdr-box: 246, 243, 239; }   /* 벽 232,224,216 */
body.fs-p-53  { --fs-hdr-box: 253, 250, 246; }   /* 벽 249,242,232 */
body.fs-p-54  { --fs-hdr-box: 241, 242, 244; }   /* 벽 221,222,227 */
body.fs-p-55  { --fs-hdr-box: 246, 245, 243; }   /* 벽 233,230,225 */
body.fs-p-74  { --fs-hdr-box: 253, 251, 247; }   /* 벽 251,244,236 */
body.fs-p-75  { --fs-hdr-box: 243, 233, 231; }   /* 벽 226,200,196 */
body.fs-p-76  { --fs-hdr-box: 233, 227, 225; }   /* 벽 199,186,180 */
body.fs-p-77  { --fs-hdr-box: 246, 243, 240; }   /* 벽 233,226,218 */
body.fs-p-78  { --fs-hdr-box: 252, 246, 240; }   /* 벽 247,233,218 */
@media (min-width: 1024px) {
  :root :is(body[class*="fs-cat-"], body.fs-p-109, body.fs-p-110, body.fs-p-113, body.fs-p-114, body.fs-p-146, body.fs-p-45, body.fs-p-50, body.fs-p-52, body.fs-p-53, body.fs-p-54, body.fs-p-55, body.fs-p-74, body.fs-p-75, body.fs-p-76, body.fs-p-77, body.fs-p-78) .fs-header--overlay { background: rgba(var(--fs-hdr-box), .30); }
  :root :is(body[class*="fs-cat-"], body.fs-p-109, body.fs-p-110, body.fs-p-113, body.fs-p-114, body.fs-p-146, body.fs-p-45, body.fs-p-50, body.fs-p-52, body.fs-p-53, body.fs-p-54, body.fs-p-55, body.fs-p-74, body.fs-p-75, body.fs-p-76, body.fs-p-77, body.fs-p-78) .fs-header--overlay::before { display: none; }
  :root :is(body[class*="fs-cat-"], body.fs-p-109, body.fs-p-110, body.fs-p-113, body.fs-p-114, body.fs-p-146, body.fs-p-45, body.fs-p-50, body.fs-p-52, body.fs-p-53, body.fs-p-54, body.fs-p-55, body.fs-p-74, body.fs-p-75, body.fs-p-76, body.fs-p-77, body.fs-p-78) .fs-header--overlay :is(.fs-gnb__link, .fs-util__link, .fs-util__sep, .fs-allmenu) { text-shadow: none; }
}