/* ==========================================================================
   assets/page/33.css — [33] 쌍꺼풀 전용
   전부 .fs-p-33 스코프. 색은 --fs-* 토큰만 쓴다(새 hex 0개).
   전용 컴포넌트
     .fs-double-eyelid-hero    모델 풀블리드 히어로 (투명 오버레이 헤더)
     .fs-double-eyelid-tx      4가지 술식 카드 2×2 격자 (설명 + 적합 리스트)
     .fs-double-eyelid-scar    흉터 비교 2보드 (BEFORE/AFTER 라벨바)
     .fs-double-eyelid-matrix  4술식 x 4스펙 매트릭스 (시그니처)
     .fs-double-eyelid-care    회복 집중관리 2단 카드
     .fs-double-eyelid-tv      4seasons TV 영상 타일 4연 (썸네일 + 재생 버튼)
   ========================================================================== */

/* --- 셸 · A01 · 1mm 계열 «투명 헤더 + 모델 풀블리드 히어로» --------------
   헤더를 흰 막대로 세우지 않고 히어로 사진 위에 얹는다. 이 페이지 히어로의
   상단 띠는 전 폭이 배경면(좌 민트 #D8EDE7 ~ 우 아이보리 #FBF4E8)이라
   흰 글자가 아니라 «잉크 글자» 를 쓴다 — 16:1 이상.
   모델 머리는 사진 높이의 17% 아래에서 시작하므로 헤더 띠(1920 에서 10%)에 안 걸린다.
   ------------------------------------------------------------------------ */
.fs-p-33 { --fs-header-overlay-bg: transparent; }
/* 오버레이 헤더 뒤에 실제로 깔리는 색. 사진이 그 위를 덮으므로 화면은 그대로지만
   사진 로딩 전 번쩍임이 없고, qa.py 가 배경을 흰 body 로 오판하지 않는다. */
.fs-p-33 .fs-page--overlay { background: var(--fs-cream); }
.fs-p-33 .fs-header--overlay { color: var(--fs-ink); }
/* 2026-09-11 승인자 지시 「56 처럼 메뉴바 그라디에이션」 — fs.css:468 기본 ::before(검정 스크림)를
   content:none 으로 껐던 것을 되살리고 배경만 밝은 안개로 바꾼다. 56 은 크림(246,241,236)인데
   이 계열 19장은 히어로 틴트가 제각각(세이지·라벤더·블루그레이…)이라 크림을 얹으면 색이 물든다 —
   흰색 알파는 어느 틴트 위에서도 «빛 번짐» 으로 읽힌다(47·64·67·48 비교 렌더로 확인).
   위치·높이(헤더 1.6배)·pointer-events 는 fs.css 기본값 그대로다. */
.fs-p-33 .fs-header--overlay::before { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,0) 100%); }
.fs-p-33 .fs-gnb__link { font-weight: 400; }
/* fs.css 의 오버레이 규칙은 «흰 글자» 전제라 호버가 흰색이다 — 밝은 헤더에선 반대로 */
.fs-p-33 .fs-header--overlay .fs-gnb__link:hover,
.fs-p-33 .fs-header--overlay .fs-gnb__link:focus-visible { color: var(--fs-teal-dk); opacity: 1; }
/* --fs-muted-2(#7D7D7D)는 아이보리 위에서 3.67:1 이라 AA 미달이다 */
.fs-p-33 .fs-header--overlay .fs-util__link { color: var(--fs-ink-soft); }
.fs-p-33 .fs-header--overlay .fs-util__link:hover { color: var(--fs-teal-dk); opacity: 1; }
.fs-p-33 .fs-util__sep { opacity: .35; }

.fs-p-33 .fs-double-eyelid-hero {
  background: var(--fs-cream);
  color: var(--fs-ink);
}
.fs-p-33 .fs-double-eyelid-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-p-33 .fs-double-eyelid-hero .fs-hero__kicker {
  font-size: clamp(13px, 12.15px + 0.24vw, 17px);
  /* 사진 위라 --fs-teal-text(#00787F)는 배경 최저 화소에서 4.42:1 로 AA 를 아슬하게
     밑돈다. 53 의 히어로 킥커와 같이 --fs-teal-dk(#00646B, 5.3:1~6.3:1)를 쓴다. */
  letter-spacing: 0.16em; font-weight: 500; color: var(--fs-teal-dk);
}
.fs-p-33 .fs-double-eyelid-hero .fs-hero__title { color: var(--fs-ink); font-weight: 700; }
.fs-p-33 .fs-double-eyelid-hero .fs-hero__copy { gap: clamp(12px, 9.2px + 0.77vw, 24px); }
.fs-p-33 .fs-double-eyelid-hero__rule {
  width: 60px; height: 2px; background: var(--fs-teal);
}
.fs-p-33 .fs-double-eyelid-hero__lead {
  max-width: 30ch;
  font-size: var(--fs-t-lead); line-height: var(--fs-lh-body); color: var(--fs-ink-soft);
}

/* <1024px — 히어로 박스가 가로로 길어져 오버레이로는 카피가 모델 얼굴에 얹힌다.
   카피를 크림 밴드로 위에 쌓고(헤더 높이만큼 위 여백) 세로 크롭 사진을 아래에 붙인다. */
@media (max-width: 1023px) {
  .fs-p-33 .fs-double-eyelid-hero { min-height: 0; }
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg {
    position: static; inset: auto; z-index: 0; grid-row: 2;
  }
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg img { height: auto; aspect-ratio: 3 / 4; }
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__inner {
    grid-row: 1;
    padding-block: calc(var(--fs-header-h) + var(--fs-sp-8)) var(--fs-sp-10);
  }
}

/* 1024px 이상 — 사진 원본 비율(1920×1000)을 그대로 쓴다. cover 로 잘라내지 않으므로
   모델 머리 위 여백(17%)이 폭에 상관없이 유지되고 헤더와 겹치지 않는다.
   ★ width:100% 를 반드시 같이 준다. 안 주면 폭이 «자동» 이라 max-height 가 걸리는
     순간(뷰포트 1935px 초과) 브라우저가 aspect-ratio 로 폭을 «역산» 해 히어로가
     1920px 에서 멈춘다 — 오른쪽에 페이지 배경이 그대로 드러난다(2026-08-31 지적).
     폭을 확정해 두면 비율로 높이를 잡고 max-height 가 그 높이만 자른다. */
@media (min-width: 1024px) {
  .fs-p-33 .fs-double-eyelid-hero { width: 100%; aspect-ratio: 1920 / 755; max-height: 755px; }
  /* 2026-09-11 승인자 지시 「히어로 속 모델 위치를 56 처럼」 — 56 은 머리 꼭대기가 히어로 위에서 41px(1838 창).
   이 사진은 크라운이 원본 y=146 라 0% 로는 아래 에 떠 있었다. 통일 높이 601 · cover 배율 1838/1920 로 역산한 값.
   모바일(<1024) 스택 배치의 object-position 은 별개라 그대로 둔다. */
.fs-p-33 .fs-double-eyelid-hero .fs-hero__bg img { object-position: 50% 81%; }
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__inner { padding-block-start: var(--fs-header-h); }
  /* 모델이 왼쪽 42% 를 쓰므로 카피는 오른쪽 여백에 붙인다(1mm 서브 히어로와 같은 축) */
  .fs-p-33 .fs-double-eyelid-hero__copy { max-width: 34rem; margin-inline-start: auto; }
}

/* --- A03 · 인트로 좌측 2단 비주얼 --------------------------------------- */
.fs-p-33 .fs-double-eyelid-intro__media { display: grid; gap: var(--fs-sp-5); }
.fs-p-33 .fs-double-eyelid-intro__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-p-33 .fs-double-eyelid-intro__shot { display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.fs-p-33 .fs-double-eyelid-intro__inner { display: block; width: 100%; height: 100%; overflow: hidden; }
/* 아래 붙어 있던 눈 클로즈업 띠를 걷어냈다(승인자 지시, 2026-08-28).
   한 장만 남으면 왼쪽 열이 허전하므로 2단이 되는 폭에서만 세로 크롭으로 세우고
   글 열은 .fs-split--center 로 사진 높이에 맞춰 가운데 정렬한다.
   ※ 768~1023 은 .fs-split 가 1열이라 여기서 4/5 를 쓰면 사진이 700px 넘게 눕는다. */
@media (min-width: 1024px) {
  .fs-p-33 .fs-double-eyelid-intro__shot { aspect-ratio: 4 / 5; }
  .fs-p-33 .fs-double-eyelid-intro__shot img { object-position: 55% 42%; }
}
.fs-p-33 .fs-double-eyelid-intro__copy > * + * { margin-block-start: var(--fs-sp-5); }
.fs-p-33 .fs-double-eyelid-intro__copy .fs-h2 { margin-block-start: var(--fs-sp-3); }
.fs-p-33 .fs-double-eyelid-intro__copy .fs-quote { margin-block-start: var(--fs-sp-7); }

/* --- A07 · 4가지 술식 카드 (2×2 격자) ------------------------------------
   원래는 1,360px 을 가로지르는 3열(250:480:360) 행 4줄이었다. 카드가 «표의 행»
   으로 읽혀 술식끼리 비교가 되지 않았다(승인자 지시, 2026-08-28 «레이아웃이
   마음에 안 든다»). 같은 폭을 2열로 접어 카드 4장을 격자로 세운다.
     · 카드 = 흰 상자 + 상단 2px 틸선, 직각 — LOCK 1·3 은 그대로다.
     · 적합 리스트는 카드 바닥의 크림 패널로 분리한다. 제목이 두 줄로 접히는
       칸이 있으므로 margin-block-start:auto 로 밀어 4장의 패널 윗선을 맞춘다
       (그래서 이 카드만 grid 가 아니라 flex 열이다 — auto 마진이 필요하다).
   ------------------------------------------------------------------------ */
.fs-p-33 .fs-double-eyelid-txs { display: grid; gap: var(--fs-gap-card); }
@media (min-width: 768px) {
  .fs-p-33 .fs-double-eyelid-txs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fs-p-33 .fs-double-eyelid-tx {
  display: flex; flex-direction: column; gap: var(--fs-sp-4);
  border-block-start: 2px solid var(--fs-teal);
  padding: clamp(24px, 20.5px + 0.962vw, 39px) var(--fs-sp-6) var(--fs-sp-6);
  background: var(--fs-white);
  transition: border-color var(--fs-dur) var(--fs-ease);
}
.fs-p-33 .fs-double-eyelid-tx__head { display: grid; gap: var(--fs-sp-2); justify-items: start; }
.fs-p-33 .fs-double-eyelid-tx__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-p-33 .fs-double-eyelid-tx__sub { font-size: var(--fs-t-sub); font-weight: 600; color: var(--fs-teal-dk); }
.fs-p-33 .fs-double-eyelid-tx__desc { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft); }

/* 적합 리스트는 흰 카드 «안» 의 크림 패널이다.
   ★ 카드 폭을 꽉 채우게 되물리면 패널색(#F9F6F2)이 섹션 밴드(#F6F1EC)와 거의 같아
     카드 아래 절반이 배경에 녹아 «흰 상자가 반만 있는» 것처럼 보인다.
     흰 여백을 사방에 남겨 패널로 읽히게 둔다. */
.fs-p-33 .fs-double-eyelid-tx__fitbox {
  margin-block-start: auto;
  padding: var(--fs-sp-5) var(--fs-sp-5) var(--fs-sp-5);
  background: var(--fs-cream-2);
}
.fs-p-33 .fs-double-eyelid-tx__fitlabel {
  display: block; margin-block-end: var(--fs-sp-3);
  font-size: var(--fs-t-sm); font-weight: 700; color: var(--fs-ink);
}
.fs-p-33 .fs-double-eyelid-tx__fit { display: grid; gap: var(--fs-sp-1); }
.fs-p-33 .fs-double-eyelid-tx__fit li {
  position: relative;
  padding-inline-start: var(--fs-sp-5);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted);
}
.fs-p-33 .fs-double-eyelid-tx__fit li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em;
  width: 7px; height: 7px; background: var(--fs-teal);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-33 .fs-double-eyelid-tx:hover { border-block-start-color: var(--fs-teal-dk); }
}

/* --- 흉터 비교 2보드 ---------------------------------------------------- */
.fs-p-33 .fs-double-eyelid-scar { display: grid; gap: var(--fs-gap-col); }
.fs-p-33 .fs-double-eyelid-scar__item { display: grid; gap: var(--fs-sp-4); align-content: start; justify-items: start; }
.fs-p-33 .fs-double-eyelid-scar__pair { width: 100%; }
.fs-p-33 .fs-double-eyelid-scar__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-p-33 .fs-double-eyelid-scar__fig { display: grid; align-content: start; }
.fs-p-33 .fs-double-eyelid-scar__fig img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
.fs-p-33 .fs-double-eyelid-scar__cap {
  font-size: var(--fs-t-lead); font-weight: 700; line-height: var(--fs-lh-head); color: var(--fs-ink);
}
@media (min-width: 768px) {
  .fs-p-33 .fs-double-eyelid-scar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- A21 · 시그니처 4술식 x 4스펙 매트릭스 ------------------------------ */
.fs-p-33 .fs-double-eyelid-matrix { min-width: 720px; border-collapse: collapse; }
.fs-p-33 .fs-double-eyelid-matrix thead th { vertical-align: bottom; }
.fs-p-33 .fs-double-eyelid-matrix thead th:first-child {
  background: var(--fs-teal-dk);
  font-size: var(--fs-t-sm);
}
.fs-p-33 .fs-double-eyelid-matrix__col { display: grid; gap: var(--fs-sp-1); }
.fs-p-33 .fs-double-eyelid-matrix__no {
  font-family: var(--fs-font-en); font-size: var(--fs-t-sm); font-weight: 700; opacity: .85;
}
.fs-p-33 .fs-double-eyelid-matrix__name { font-size: var(--fs-t-sub); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-p-33 .fs-double-eyelid-matrix tbody th {
  background: var(--fs-cream-2);
  width: 25%;
}
.fs-p-33 .fs-double-eyelid-matrix__rowhead {
  display: flex; align-items: center; gap: var(--fs-sp-3);
  font-size: var(--fs-t-lead); font-weight: 700; color: var(--fs-ink);
}
.fs-p-33 .fs-double-eyelid-matrix__rowhead img {
  flex: 0 0 auto; width: clamp(34px, 31.7px + 0.641vw, 44px); height: auto;
}
.fs-p-33 .fs-double-eyelid-matrix tbody td {
  text-align: center;
  font-size: var(--fs-t-lead); font-weight: 600; color: var(--fs-ink);
}
.fs-p-33 .fs-double-eyelid-matrix tbody tr + tr th,
.fs-p-33 .fs-double-eyelid-matrix tbody tr + tr td { border-block-start: 1px solid var(--fs-line); }
.fs-p-33 .fs-double-eyelid-matrix tbody td + td { border-inline-start: 1px solid var(--fs-line); }
/* --- A14 · 전후 사례 9건: PC 도트를 전부 노출한다 -----------------------
   fs.css 는 4사례(2페이지) 기준으로 3번째 도트부터 숨긴다. 여기는 9사례라
   숨기면 5번째 이후 위치가 표시되지 않는다. */
.fs-p-33 .fs-nose-ba [data-fs-carousel-dots] > .fs-carousel__dot:nth-child(n+3) { display: block; }
.fs-p-33 .fs-double-eyelid-ba__group {
  display: inline-flex; align-items: center;
  min-height: clamp(28px, 26.5px + 0.449vw, 36px);
  padding-inline: var(--fs-sp-3);
  background: var(--fs-cream);
  font-size: var(--fs-t-pill); font-weight: 700; color: var(--fs-teal-dk);
}

/* --- A05 · 약속 3항목 아이콘 카드 --------------------------------------- */
.fs-p-33 .fs-double-eyelid-promise { display: grid; gap: var(--fs-gap-card); }
.fs-p-33 .fs-double-eyelid-promise__card {
  display: grid; justify-items: center; align-content: start; gap: var(--fs-sp-5);
  padding: clamp(24px, 20.5px + 0.962vw, 39px) var(--fs-sp-5) clamp(26px, 22.5px + 0.962vw, 41px);
  background: var(--fs-white);
  border-block-start: 2px solid var(--fs-teal);
  text-align: center;
}
.fs-p-33 .fs-double-eyelid-promise__icon {
  display: grid; place-items: center;
  width: clamp(84px, 79.4px + 1.282vw, 104px); aspect-ratio: 1;
}
.fs-p-33 .fs-double-eyelid-promise__icon img { width: 100%; height: 100%; object-fit: contain; }
.fs-p-33 .fs-double-eyelid-promise__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-p-33 .fs-double-eyelid-promise__desc { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted); }
@media (min-width: 600px) {
  .fs-p-33 .fs-double-eyelid-promise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- A23 · 회복 집중관리 ------------------------------------------------ */
.fs-p-33 .fs-double-eyelid-care { display: grid; gap: var(--fs-gap-col); }
.fs-p-33 .fs-double-eyelid-care__item {
  display: grid; align-content: start;
  background: var(--fs-white);
}
.fs-p-33 .fs-double-eyelid-care__fig { display: grid; }
.fs-p-33 .fs-double-eyelid-care__fig img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--fs-white);
}
.fs-p-33 .fs-double-eyelid-care__body {
  display: grid; gap: var(--fs-sp-3);
  padding: var(--fs-sp-6) var(--fs-sp-5) var(--fs-sp-7);
}
.fs-p-33 .fs-double-eyelid-care__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-p-33 .fs-double-eyelid-care__desc { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted); }
@media (min-width: 768px) {
  .fs-p-33 .fs-double-eyelid-care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- A15 · 4seasons TV — 영상 타일 4연 -----------------------------------
   전에는 사례마다 «수술전 / 3개월차» 크롭 2장을 흰 카드에 담은 2×2 타일이라
   «영상» 으로 읽히지 않았다. 승인자 지시(2026-08-28)로 유튜브 채널의 실제
   영상 썸네일을 포스터로 세우고 재생 버튼을 얹는다. 배치는 1mmpsglobal 의
   «1mm YouTube Short» 처럼 한 줄로 늘어세운 4연이다.
   (tv-0*-before/after.jpg 8장은 이 썸네일에서 잘라낸 크롭이라 정보 손실이 없다.)

   ★ iframe 임베드를 쓰지 않은 이유 — 이 4편은 현재 유튜브에서 «비공개» 다.
     i.ytimg.com 썸네일이 4편 모두 404 이고(같은 채널의 다른 29편은 200),
     youtube-nocookie 임베드는 «This video is private» 오류판을 띄운다.
     영상이 다시 공개되면 .fs-double-eyelid-tv__media 안의 <img> 를
     97/index.html:847 과 같은 <iframe> 으로 바꾸기만 하면 된다.
   ------------------------------------------------------------------------ */
.fs-p-33 .fs-double-eyelid-tv { display: grid; gap: var(--fs-gap-col); }
.fs-p-33 .fs-double-eyelid-tv__card { display: grid; align-content: start; gap: var(--fs-sp-4); color: inherit; }
.fs-p-33 .fs-double-eyelid-tv__media {
  position: relative; display: block; overflow: hidden;
  background: var(--fs-ink);
}
.fs-p-33 .fs-double-eyelid-tv__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
/* 재생 버튼 — 정원은 LOCK 1 이 허용하는 두 곡률 중 하나다 */
.fs-p-33 .fs-double-eyelid-tv__play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: clamp(48px, 43.4px + 1.282vw, 68px); aspect-ratio: 1;
  border-radius: var(--fs-radius-round);
  background: var(--fs-white);
  color: var(--fs-teal-dk);
  transition: background var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease);
}
.fs-p-33 .fs-double-eyelid-tv__play svg { width: 58%; height: 58%; }
.fs-p-33 .fs-double-eyelid-tv__body { display: grid; gap: var(--fs-sp-2); }
.fs-p-33 .fs-double-eyelid-tv__title { font-size: var(--fs-t-sub); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-p-33 .fs-double-eyelid-tv__meta { font-size: var(--fs-t-sm); line-height: var(--fs-lh-body); color: var(--fs-muted); }
.fs-p-33 .fs-double-eyelid-tv__note {
  margin-block-start: var(--fs-sp-6);
  font-size: var(--fs-t-xs); line-height: var(--fs-lh-body); color: var(--fs-muted);
}
@media (min-width: 600px) {
  .fs-p-33 .fs-double-eyelid-tv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fs-p-33 .fs-double-eyelid-tv { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-sp-5); }
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-33 .fs-double-eyelid-tv__card:hover .fs-double-eyelid-tv__media img { transform: scale(1.045); }
  .fs-p-33 .fs-double-eyelid-tv__card:hover .fs-double-eyelid-tv__play {
    background: var(--fs-teal-dk); color: var(--fs-white);
  }
  .fs-p-33 .fs-double-eyelid-tv__card:hover .fs-double-eyelid-tv__title { color: var(--fs-teal-dk); }
}

/* --- 공통 미세 조정 ----------------------------------------------------- */
.fs-p-33 .fs-double-eyelid-gap { margin-block-start: var(--fs-gap-title); }
.fs-p-33 .fs-double-eyelid-gap-sm { margin-block-start: var(--fs-sp-9); }

/* 새 모션은 없다(리빌·틸트·패럴랙스는 전부 fs.js 기본 배선).
   그래도 위 레이아웃이 모션 무효화 환경에서 동일하게 보이도록 못을 박아 둔다. */
@media (prefers-reduced-motion: reduce) {
  .fs-p-33 .fs-double-eyelid-promise__card,
  .fs-p-33 .fs-double-eyelid-tx {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   근거: _design/QA/33.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. [LOCK 5] 다크 밴드 0개 → A05 약속 섹션을 유일한 다크 밴드로

   9,783px 짜리 시술 상세 페이지인데 흰-크림-흰-크림 리듬이 끝까지 한 번도
   끊기지 않았다(vibecheck L5 = WARN). 코퍼스 75장 중 54장이 다크 밴드를 갖고
   그중 51장이 «정확히 1개» 다. 위치는 9개 섹션 중 6번째 — 실측 최빈값이다.

   이 섹션을 고른 이유 세 가지:
     ① 성격이 스테이트먼트다(인용 + .fs-mark 하이라이트). 91 의 다크 밴드와 같다.
     ② (옛 근거 — 밴드를 가르던 밝은 사진 promise-model.jpg 는 2026-10-22 승인자 지시로 뺐다.)
     ③ 세 아이콘 PNG 의 불투명 화소 평균이 RGB(62,85,86) — 다크 밴드에 직접
        놓으면 사라진다. 그래서 카드는 «흰 상자» 로 유지한다.
        57 의 다크 밴드도 흰 .fs-compare__cell 을 담고 있다(같은 처방).
   -------------------------------------------------------------------------- */

/* --flush 로 지운 세로 여백을 컨테이너가 되받는다 */
.fs-p-33 .fs-double-eyelid-promise-sec > .fs-container {
  padding-block: var(--fs-sec-pt) var(--fs-sec-pb);
}

/* ★ fs.css:317~319 는 다크 밴드 안의 h2/h3/p 를 color:inherit 으로 만든다.
   흰 카드 안에서 그대로 두면 제목이 «흰 글자 on 흰 상자» 로 증발한다. */
.fs-p-33 .fs-double-eyelid-promise__card { color: var(--fs-ink); }
.fs-p-33 .fs-double-eyelid-promise__title { color: var(--fs-ink); }
.fs-p-33 .fs-double-eyelid-promise__desc  { color: var(--fs-muted); }

/* --------------------------------------------------------------------------
   2. [호버·틸트] A05 약속 카드의 틸트를 걷어냈다 (HTML 쪽 처리)

   data-fs-tilt-inner 가 444x289 카드가 아니라 98x98 아이콘 span 에 붙어 있어
   fs.js 가 «아이콘만» 4도 돌리고 그 위에만 .fs-tilt__gloss 를 깔았다.
   카드 면적 대비 7%, 게다가 아이콘 PNG 는 불투명 화소가 10% 뿐이라
   광택이 아이콘이 아니라 «흰 얼룩» 으로 뜬다(53 에서 터진 것과 같은 구조).
   감쌀 요소가 없는 형제 구조라 확정 시안대로 틸트를 제거했다.
   혹시라도 어딘가에서 되살아나도 얼룩이 나지 않도록 못을 박아 둔다. */
.fs-p-33 .fs-double-eyelid-promise__card .fs-tilt__gloss { opacity: 0 !important; }
.fs-p-33 .fs-double-eyelid-promise__icon.fs-tilt__inner  { transform: none !important; }

/* --------------------------------------------------------------------------
   3. 타이포 리듬 — 제목 뒤 70px 틸 선 (48 에서 검증된 구현)

   ★ «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 붙이지 않는다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   가운데정렬 제목(.fs-center · A14/A05)에는 걸지 않는다 — 좌측 기점 선이
   가운데 제목 아래에서 축이 어긋난 것처럼 읽힌다.
   -------------------------------------------------------------------------- */

.fs-p-33 .fs-nose-head h2,
.fs-p-33 .fs-double-eyelid-intro__copy h2 { position: relative; }

.fs-p-33 .fs-nose-head h2::after,
.fs-p-33 .fs-double-eyelid-intro__copy h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-33 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-33 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   4. 호버 — 프레임은 고정, 사진만 scale(1.045). 그림자는 쓰지 않는다.
   틸트가 걸린 카드(흉터 비교 · TV 타일 · 인트로)에는 겹쳐 걸지 않는다.
   A23 회복 집중관리 2장만 이 처방을 받는다.
   -------------------------------------------------------------------------- */

.fs-p-33 .fs-double-eyelid-care__fig { overflow: hidden; }
.fs-p-33 .fs-double-eyelid-care__fig img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-33 .fs-double-eyelid-care__item:hover .fs-double-eyelid-care__fig img {
    transform: scale(1.045);
  }
  /* 라벨바는 사진과 함께 커지면 안 된다 — 글자가 흔들린다. 색만 한 단계. */
  .fs-p-33 .fs-double-eyelid-care__item:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --------------------------------------------------------------------------
   5. reduced-motion — 위에서 새로 얹은 전환을 전부 정지 상태로 확정
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-33 .fs-nose-head h2::after,
  .fs-p-33 .fs-double-eyelid-intro__copy h2::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-33 .fs-double-eyelid-care__fig img {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   2026-09-11 승인자 지시 「히어로 속 모델이 너무 안 보여 — zoom out 하거나 올려서 얼굴이 안 잘리게」
   cover 풀블리드는 폭 주도라 1280 에서는 머리가 헤더에 먹히고 2560 에서는 크롭이 더 내려가
   얼굴이 잘렸다(object-position 의 % 값은 넘침에 비례해 폭마다 다른 곳을 보여 준다).
   → «줌아웃»: 사진 상자를 원본 비율(2.543) 그대로 히어로 높이에 맞춰 왼쪽에 붙인다.
     상자 비율 = 원본 비율이라 cover 가 사실상 contain — 어느 폭에서도 사진이 통째로 보인다.
     비어 있는 오른쪽은 히어로 배경색(사진 오른변 실측 #F3EBDE)이 채우고, 사진 오른변 16% 를 마스크로
     녹여 이음매를 없앤다. 56 의 «오른쪽 사진 / 왼쪽 카피» 구도와 같은 구조가 된다.
   높이·모바일(<1024) 스택 배치는 그대로다.
   ========================================================================== */
@media (min-width: 1024px) {
  .fs-p-33 .fs-double-eyelid-hero { background: #F3EBDE; }
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg {
    inset-block-start: 0px;
    height: calc(100% - 0px);
    inset-inline-end: auto; inset-inline-start: 0;
    width: calc((clamp(520px, 380px + 12vw, 720px) - 0px) * 2.5430);
  }
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg picture,
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg img { width: 100%; height: 100%; }
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg img {
    object-fit: cover;
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%);
  }
}


/* ==========================================================================
   ▼▼▼ 2026-09-14 · 카테고리 틴트 2단계 — 눈성형 = 블루그레이 #DDE4EB (fs.css «카테고리 틴트» 블록 + body.fs-cat-eye)
   승인자 결정: 웜 축의 유일한 쿨 예외(48 사진 상단색 계열). 공용 블록이 헤더 뒤 바탕·히어로 바탕·메뉴 안개·글자 후광을 정한다.
   모델 왼쪽(x 14~43%) · 카피 우측(margin auto) → 오른쪽에서 왼쪽으로 · 사진 i2i 후 2.54:1 로 재크롭(크라운 45px, 원본과 같은 «위 절단» 구도)
   ========================================================================== */
.fs-p-33 .fs-double-eyelid-hero .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(270deg, rgba(var(--fs-cat), .92) 0%, rgba(var(--fs-cat), .90) 25%, rgba(var(--fs-cat), .50) 42%, rgba(var(--fs-cat), 0) 55%);
}
@media (max-width: 1023px) {
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg::after { content: none; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 승인자 「46 트임성형의 모델 크기·위치를 참고해 33 을 맞춰라」
   기존 hero-wide-duo.jpg 는 2.54:1 로 얼굴만 남긴 타이트 크롭(크라운 45행·턱이 바닥) 이라 어떤 배치로도 46 처럼 «머리+어깨» 가
   안 나온다. 같은 사진을 /v1/edit i2i 로 «같은 인물·조명, 왼쪽 40% 안, 크라운 위 여백 30%, 가슴선 컷» 으로 다시 프레이밍하고
   (3장 중 1안 채택 — 1장은 백엔드 오류, 1장은 머리 위 고스트), 배경만 duo 에셋과 같은 «중성 그레이 → 블루그레이» 로 재틴트
   → hero-wide-duo-room.jpg (1920×1072 · 크라운 316 · 턱 760 · 머리 x 265~767).
   46 실측(1920): 크라운 y58 · 턱 y460(머리 402px) · 머리 중심 x 530 = 27.6vw. → 배율 0.901(상자 1920/677), 위 225px 크롭(63%),
   left = 27.6vw − (516/1920)×상자폭 = 27.6vw − 0.763×히어로높이 → 1920 에서 65px. 09-11 블록의 상자 규칙을 여기서 덮는다.
   ========================================================================== */
@media (min-width: 1024px) {
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg {
    inset-inline-start: calc(27.6vw - 0.763 * clamp(520px, 380px + 12vw, 720px)); inset-inline-end: auto;
    width: auto; max-width: none; aspect-ratio: 1920 / 677;
  }
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__bg img {
    object-position: 50% 63%;
    /* 왼쪽 여백(틴트 221,228,235 vs 사진 왼변 232,231,231)도 10% 녹인다. 모델 머리카락 왼끝은 14% 라 안 걸린다. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 84%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 84%, transparent 100%);
  }
}
/* 1024~1279: 카피 상자(34rem, 왼쪽 정렬)의 왼끝이 x≈452 로 모델 머리카락 오른끝(≈505)에 걸린다 — 상자만 26rem 으로 좁혀 오른쪽으로 민다. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .fs-p-33 .fs-double-eyelid-hero__copy { max-width: 26rem; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 승인자 「히어로에 duotone diagonal gradient」
   두 톤 = duo 에셋의 배경 두 색(웜 아이보리 241,234,229 ↔ 블루그레이 219,226,237, 눈성형 틴트 계열)을 좌상→우하 대각으로.
   사진 위에도 이어지도록 «CSS 오버레이 + darken» 으로 깐다 — darken 은 채널별 min 이라 사진의 밝은 배경(재굽기: 249,247,245 근백색)만
   그라데이션 색으로 바뀌고 피부·머리카락·상의(어두운 쪽)는 그대로다. 사진 상자와 히어로 바탕을 같은 오버레이가 칠하므로 이음매가 없다.
   그래서 히어로 바탕은 흰색에 가깝게(틴트 단색은 min 에서 그라데이션을 덮어 버린다), 오른쪽 틴트 스크림(::after)은 끈다.
   ========================================================================== */
body.fs-p-33.fs-cat-eye .fs-double-eyelid-hero { background-color: #F8F6F4; }
.fs-p-33 .fs-double-eyelid-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(135deg, #F1EAE5 0%, #E8E8E8 50%, #DBE2ED 100%);
  mix-blend-mode: darken;
}
.fs-p-33 .fs-double-eyelid-hero .fs-hero__bg::after { content: none; }
@media (max-width: 1023px) {
  /* 스택 배치: 카피 밴드(틴트 단색)도 같은 그라데이션을 받도록 밴드 바탕을 밝게 */
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__inner { background: #F8F6F4; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-17 · 승인자 「모델 얼굴이 반대 방향(왼쪽)이어도 81 코재수술 히어로 포맷을 쓰고 싶다 — 모델 위치는 그대로, 텍스트 부분만」
   81.css 1절의 카피 값을 그대로 옮긴다: 킥커 21/500/자간 .02em · 제목 58/700/행간 1.22 · 줄 아래 8px · 리드 20/1.5/#111 · 카피 요소 간격 10px,
   ≥1024 에서 카피를 히어로 세로 가운데에(81 은 헤더 높이 위 여백이 없다). 카피 상자 위치(오른쪽 · 34rem, 1024~1279 26rem)와
   왼쪽 정렬, 사진·duotone 배경은 그대로 — 81 을 좌우만 바꾼 배치. <1024 스택 밴드 여백도 81 값(sp-9 / sp-11).
   ========================================================================== */
.fs-p-33 .fs-double-eyelid-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-33 .fs-double-eyelid-hero .fs-hero__kicker {
  font-size: clamp(15px, 13.5px + 0.42vw, 21px);
  letter-spacing: 0.02em; font-weight: 500; color: var(--fs-teal-dk);
}
.fs-p-33 .fs-double-eyelid-hero .fs-hero__title {
  font-size: clamp(30px, 21.4px + 2.39vw, 58px);
  font-weight: 700; line-height: 1.22; color: var(--fs-ink);
}
.fs-p-33 .fs-double-eyelid-hero__rule { margin-block-end: var(--fs-sp-2); }
.fs-p-33 .fs-double-eyelid-hero .fs-double-eyelid-hero__lead { max-width: 34em; line-height: 1.5; color: var(--fs-ink); }
@media (min-width: 1024px) {
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__inner { padding-block-start: 0; }
}
@media (max-width: 1023px) {
  .fs-p-33 .fs-double-eyelid-hero .fs-hero__inner { padding-block: calc(var(--fs-header-h) + var(--fs-sp-9)) var(--fs-sp-11); }
}

/* ==========================================================================
   ▼▼▼ 2026-10-06 · 히어로 «모델 ↔ 카피» 시각 보정 — 승인자 「여유증처럼 반대된 히어로도 이 규칙 적용」(131.css 같은 날짜 절)
   규칙: 끝점이 아니라 «덩어리» 로 거리를 본다 — 제목 모델 쪽 끝 ↔ 모델 윤곽 25% 분위, 카피 글자 끝 ↔ 모델 윤곽 25% 분위를
   형제 15장(121·71·81·80·47·143·58·61·62·64·36·151·150·140 · 131) 중앙값과 견줘 «텍스트만» 옮긴다.
   33 은 131 과 반대로 가까웠다(카피는 오른쪽이지만 글자가 왼쪽 정렬이라 제목이 모델 쪽 끝에 붙는다):
   두 기준 평균 1920 −177 · 1700 −192 · 1440 −217 · 1280 −242 · 1024 −161.
   → 상자의 오른쪽 끝(컨테이너)은 두고 폭만 줄여 글자 시작점을 오른쪽으로. 1024 는 마지막 줄 아래가 퀵메뉴 위(359)라 여유 안에서만.
   ========================================================================== */
@media (min-width: 1440px) {
  .fs-p-33 .fs-double-eyelid-hero__copy { max-width: calc(207px + 8.33vw); }   /* 1440 327 · 1700 349 · 1920 367 */
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .fs-p-33 .fs-double-eyelid-hero__copy { max-width: calc(78px + 17.3vw); }    /* 1024 255 · 1280 299 */
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 1023px 이하만.
   PC 요소 위치 무변화(1024·1440·1920 실측). 백업 _src/build/backup-33-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 회복 리드 `<br>` 두 문장 → 문장 블록 .fs-lead__s(§1-4, index.html) — 360 「…마지막까지 / 함께 합니다.」.
   · balance(전 폭): 술식 설명·부제 · 「이런 고민…」 li · 약속 설명·제목 · 회복 설명 · TV 주의문 · 소개 본문 · 리드.
   · 술식 매트릭스(가로 스크롤 표, min-width 720): 1023 이하 칸이 좁아 「METHOD / 01」「수면 / +부분」 으로 쪼개졌다 → 번호·값 nowrap.
   ========================================================================== */
.fs-p-33 .fs-lead__s { display: block; text-wrap: balance; }
.fs-p-33 .fs-double-eyelid-tx__desc,
.fs-p-33 .fs-double-eyelid-tx__sub,
.fs-p-33 .fs-double-eyelid-tx__fit li,
.fs-p-33 .fs-double-eyelid-promise__desc,
.fs-p-33 .fs-double-eyelid-promise__title,
.fs-p-33 .fs-double-eyelid-care__desc,
.fs-p-33 .fs-double-eyelid-tv__note,
.fs-p-33 #intro .fs-body,
.fs-p-33 main .fs-nose-lead { text-wrap: balance; }
@media (max-width: 1023px) {
  .fs-p-33 .fs-double-eyelid-matrix__no,
  .fs-p-33 .fs-double-eyelid-matrix td { white-space: nowrap; }
}