@charset "utf-8";
/* ═════════════════════════════════════════════════════════════
   서브 갈래 C — 03_지방흡입_06~09 (복부/허벅지/아래팔·종아리/재수술)
   [DIR-03 좌표계] s3/s3_6.html↔.s3_6↔bg_s306* · s3/s3_7.html↔.s3_7↔bg_s307* ·
                   s3/s3_8.html↔.s3_8↔bg_s308* · s3/s3_9.html↔.s3_9↔bg_s309*
   피그마 노드 747:5144(1920×3887)·747:5592(1920×3726)·750:5998(1920×2939)·750:7475(1920×3209)
   공용 부품(사진 아님 — 헤더 배경·물결·아젠다 텍스처)은 4장이 동일 자산을 공유하므로
   bg_s3hero, bg_s3wave, bg_s3band_tex, bg_s3band_photo, bg_s3promise_tex 로 그룹 공용 이름을 썼다(개별 사진은 DIR-03 그대로 img_s{N}{M}NN).
   병렬 제작(GD-23) — 이 파일은 s3_6~s3_9 전용, s3_1~s3_5(다른 담당)와 공통 CSS 5종은 건드리지 않는다.
   자체 @media 없음(P-03) — 반응형은 퍼피-2 몫.
═════════════════════════════════════════════════════════════ */

/* ── 2단메뉴(lnb) 위치·줄배분 오버라이드(3차 회차 · 지적 B-02) : S ──
   공통 css/sub.css:119 의 top:604 · :134 의 flex-wrap 자동 줄바꿈은 다른 갈래(s3_1~s3_5)와
   공유하므로 여기서 고치지 않고 이 4장만 스코프로 되돌린다.
   시안(747:5243 등) — 프레임 x240 y536 1440×124, 1행 5개(지방흡입~위팔) + 2행 4개(복부~재수술).
   flex-wrap 로 한 <ul> 에 9개를 다 넣으면 폭 합만으로 줄이 나뉘어 6+3 으로 잘못 접힌다(margin-left:100%
   같은 강제 줄바꿈 트릭도 시도했으나 그 항목 자체가 줄 끝으로 튕겨나가 위치가 깨졌다 — 1차 시도 실패,
   §측정 기록 참조). 시안 자체가 Frame 1590(5개)·Frame 1591(4개) **두 개의 프레임**이므로 마크업도
   `<ul>` 두 개로 나눠 각각 자연스럽게 한 줄에 담는다(공통 `.lnb ul{flex-wrap}` 규칙은 그대로 재사용 —
   각 ul 이 개별 폭 안에서만 감싸므로 더 이상 필요 없다). */
.s3_6 .lnb,
.s3_7 .lnb,
.s3_8 .lnb,
.s3_9 .lnb{top:536px;}
.s3_6 .lnb ul + ul,
.s3_7 .lnb ul + ul,
.s3_8 .lnb ul + ul,
.s3_9 .lnb ul + ul{margin-top:8px;}
/* ── 2단메뉴 오버라이드 : E ────────────────────────────────────── */

/* ── 헤더 배경(type2 오버라이드, 4장 공용 사진) : S ─────────────── */
/* 공통 `css/sub.css:20 .page-header.type2{background-image:s-visual0N.jpg}`
 가 4장 전부에 그대로 걸려 있었다 — `.hero-bg` <img> 레이어가 시각적으로는 덮었지만
 getComputedStyle(.page-header).backgroundImage 는 여전히 골격 placeholder 였다(렌더 계산값 실측).
 공통 sub.css 는 고치지 않고(다른 갈래 s3_1~s3_5 가 같은 선언을 쓴다) 이 스코프에서만 끈다. */
.s3_6 .page-header,
.s3_7 .page-header,
.s3_8 .page-header,
.s3_9 .page-header{
	height:722px;
	margin-top:calc(-1 * var(--h-header));
	background-image:none;
}
.s3_6 .page-header:after,
.s3_7 .page-header:after,
.s3_8 .page-header:after,
.s3_9 .page-header:after{content:none;} /* [FIG-06] 시안에 별도 오버레이 지정 없음(sub_v3 자체 그라디언트로 대체) */
/* [3차 회차 · R-06] 히어로 톤 불일치의 원인 — 공통 `.page-header{background-size:cover;
   background-position:50% 50%}`(sub.css:16)는 원본 크롭과 다른 부분을 노출해 장식 원이 실제보다
   크게 드러난다. 시안 747:5156 이미지 레이어의 실측 크롭(get_design_context) —
   left:-34.23% top:-10.64% width:159.12% height:130.33% — 를 <img> 로 그대로(FIG-04 리터럴) 재현.
   background-image 는 껐고(위 규칙) 이 레이어가 그 자리를 대신한다. */
.s3_6 .page-header .hero-bg,
.s3_7 .page-header .hero-bg,
.s3_8 .page-header .hero-bg,
.s3_9 .page-header .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.s3_6 .page-header .hero-bg img,
.s3_7 .page-header .hero-bg img,
.s3_8 .page-header .hero-bg img,
.s3_9 .page-header .hero-bg img{
	position:absolute;left:-34.23%;top:-10.64%;width:159.12%;height:130.33%;max-width:none;
}
/* [3차 회차 · R-06 재정정] 위에서 겨냥했던 `.page-header .container` 는 이 4장 마크업에 애초에
   없는 요소였다 — 죽은 선택자라 그라디언트가 한 번도 걸린 적이 없었던 것이 진짜 원인(크롭이 아니라
   오버레이 자체 미적용). 새 빈 요소를 추가하지 않고(HTM-07) `.hero-bg::after` 가상요소로 옮겨
   실제로 걸리게 한다 — 값은 그대로 리터럴(FIG-04, 노드 747:5155 그라디언트 페인트). */
.s3_6 .page-header .hero-bg:after,
.s3_7 .page-header .hero-bg:after,
.s3_8 .page-header .hero-bg:after,
.s3_9 .page-header .hero-bg:after{
	content:'';position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 18.42%),
	           linear-gradient(90deg,rgba(43,28,18,.3) 0%,rgba(43,28,18,.3) 100%);
}
/* [G-14] 노드 x243 y381 실측 — 공통 lede 는 x240 y381 이라 3px 차, 시안 절대값 그대로 유지 */
.s3_6 .type2 .lede,
.s3_7 .type2 .lede,
.s3_8 .type2 .lede,
.s3_9 .type2 .lede{left:243px;max-width:640px;font-weight:600;}
/* ── 헤더 배경 : E ──────────────────────────────────────────────── */

/* ── 01_section 히어로(다크 오버레이 s_title, 노드 747:5245 등) : S ── */
.s3-hero{
	position:relative;width:100%;height:642px;overflow:hidden;
	background:#452e07; /* [G-14] backdrop-blur(0.5px)+rgba(69,46,7,.42) 원본 실측 근사 solid fallback */
}
.s3-hero .bg{position:absolute;inset:0;z-index:0;}
.s3-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.2;}
.s3-hero .tex{position:absolute;inset:0;z-index:0;}
.s3-hero .tex img{width:100%;height:100%;object-fit:cover;}
.s3-hero .veil{position:absolute;inset:0;z-index:1;background:rgba(69,46,7,.42);backdrop-filter:blur(.5px);}
.s3-hero .wrap{
	position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
	gap:80px;padding-top:95px;text-align:center;color:#fff;
}
.s3-hero .s-title{display:flex;flex-direction:column;align-items:center;gap:90px;}
/* [6차 회차 · 행간 전수] eyebrow leading-[1.5](747:5249) 누락분 보강 */
.s3-hero .s-title .eyebrow{margin:0;font-family:"Poppins","Pretendard",sans-serif;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-.32px;color:var(--c-accent);}
/* h2 leading-[normal](T48(r) lineHeight:100%) — 선언 없음이 곧 시안값(normal)과 일치, 추가하지 않는다 */
.s3-hero .s-title h2{margin:13px 0 0;font-size:48px;font-weight:400;letter-spacing:-.96px;color:#fff;white-space:nowrap;}
.s3-hero .s-title .line{width:68px;height:1px;margin:0;background:rgba(255,255,255,.5);border:0;}
.s3-hero .lead{font-size:40px;font-weight:600;letter-spacing:-.8px;line-height:34.9px;max-width:1100px;}
.s3-hero .lead em{font-style:normal;font-weight:800;}
.s3-hero .desc{margin-top:36px;font-size:18px;line-height:1.7;letter-spacing:-.36px;font-weight:400;}
/* ── 01_section 히어로 : E ──────────────────────────────────────── */
.s3-band{
	position:relative;width:100%;height:642px;overflow:hidden;
	display:flex;align-items:flex-start;justify-content:center;text-align:center;color:#fff;
}
.s3-band .bg{position:absolute;inset:0;z-index:0;}
.s3-band .bg img{width:100%;height:100%;object-fit:cover;}
.s3-band:after{content:'';position:absolute;inset:0;z-index:1;background:rgba(69,46,7,.42);backdrop-filter:blur(.5px);}
/* [22차 회차 · 지휘자 재측 — s_title(582:911) y817 = 밴드 top(722)+95 고정.
   기존 align-items:center 가 하단 본문 길이(장마다 다름)에 따라 eyebrow 위치를 밀어
   s3_1 +113 · 나머지 +97 로 제각각이었다. flex-start + 고정 padding-top:95px 로 전환. */
.s3-band__inner{position:relative;z-index:2; padding:95px 0 0;}
.s3-band .eyebrow{margin:0;font-size:16px;line-height:1.5;font-weight:500;letter-spacing:-.32px;color:var(--c-accent,#edb629);}
.s3-band h2{position:relative;margin:13px 0 0; font-size:48px;line-height:1.1875;font-weight:400;letter-spacing:-.96px;}
.s3-hero-divider{display:block;margin:90px auto 0;}
/* [7차 회차 · P5A-05 반려 해소] 시안(582:892 상당 Line 2 — s_title 부품 공통) 구분선은 금색
   계열이다 — 흰색 반투명으로 잘못 넣어 사실상 안 보였다. eyebrow 와 같은 accent 색으로 교체. */
/* .s3-band h2:after{content:'';position:absolute;left:50%;bottom:0;width:68px;height:1px;background:var(--c-accent,#edb629);transform:translateX(-50%);} */
.s3-band p{margin-top:36px;font-size:18px;line-height:1.7;letter-spacing:-.36px;}
.s3-band p.s3-lead{margin-top: 80px; font-weight: 100; font-size: 40px; color: #fff; line-height: 1.45;}
.s3-band p.s3-lead .fw {font-weight: 600;}

/* ── 서브타이틀(노드 747:5253 등) : S ─────────────────────────────── */
.s3-subtitle{
	display:flex;flex-direction:column;align-items:center;gap:46px;
	margin-top:140px;text-align:center;
}
.s3-subtitle h3{margin:0;font-size:40px;font-weight:500;line-height:1.6;letter-spacing:-.8px;color:#1e1e1e;}
.s3-subtitle .arrow{width:18px;height:76px;}
.s3-subtitle .arrow img{width:100%;height:100%;object-fit:contain;}

.s3_2 .s3-subtitle{margin-top: 0;}

/* ── 서브타이틀 : E ──────────────────────────────────────────────── */

/* ── 본문내용(제목+불릿, 774:5100 세트) : S ───────────────────────── */
.s3-body{margin-top:60px;}
.s3-body__head{display:flex;align-items:center;gap:10px;}
.s3-body__head .ico{width:19px;height:19px;flex:0 0 auto;}
.s3-body__head .ico img{width:100%;height:100%;}
/* [6차 회차 · 행간 전수] 시안(774:5100 T30(m)) leading-[1.5] 누락 — h4 title 계열은 line-height 자체가 없었다 */
.s3-body__head h4{margin:0;font-size:30px;font-weight:500;line-height:1.5;letter-spacing:-.6px;color:#1e1e1e;}
.s3-body__list{margin-top:16px;}
.s3-body__list li{position:relative;margin-top:12px;padding-left:27px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:#1e1e1e;}
.s3-body__list li:first-child{margin-top:0;}
.s3-body__list li:before{content:'';position:absolute;left:8px;top:.75em;width:5px;height:5px;border-radius:50%;background:#1e1e1e;}
/* ── 본문내용 : E ──────────────────────────────────────────────── */

/* ── 텍스트+이미지 2단(복부·허벅지·아래팔) : S ────────────────────── */
/* [2차 회차 수정] margin-top 이 이중으로 잡혀 있었다(여기 90 + 안쪽 .s3-body 60 + 페이지별 오버라이드 150).
   시안 실측 — 서브타이틀 하단부터 본문 제목까지 간격은 어느 프레임이나 60px 로 같다(1·2줄 subtitle 모두 동일 —
   subtitle 자체 높이가 다를 뿐). .s3-body 의 margin-top:60 하나면 충분하다. */
.s3-split{display:flex;gap:60px;align-items:flex-start;margin-top:0;}
/* [4차 회차 · N-01] 시안(792:6953/6963/6976) 본문 블록 x323~324 — 컨테이너 좌측(240) 대비 +84px.
   .s3-split__text 전체(본문+콜아웃 공용 부모)에 padding-left 로 준다 — 반올림 없이 실측 평균값. */
.s3-split__text{width:1%;flex:1 1 auto;padding-left:84px;box-sizing:border-box;}
/* [G-14] 노드 747:5590(top1828 h891)·747:5591(top2142 h672) 실측 — 두 사진이 스택이 아니라
   314px 어긋나게 겹친다. 세로로 단순 스택하면 +600px 가 더 붙어 문서 높이가 시안보다 훨씬 길어진다. */
/* [주의] 자식 선택자(>)만 쓴다 — descendant(공백) 선택자를 쓰면 .s3-round 안의(중첩) img 까지
   물려서 s3_8 원형 사진이 깨진다(2차 회차 지적 사항 — s3_8 푸터 뒤 278px 여백의 원인). */
/* [2차 회차] 시안 절대좌표 — 이 컬럼은 본문(.s3-split__text)과 같은 y0 에서 출발하지 않는다.
   복부: split 상단 대비 이미지1 시작 오프셋 138px(747:5590 top1828 − split top1690) ·
        겹침 314px(747:5591 top2142 − 747:5590 top1828) · 이미지1 891 · 이미지2 672 → 컬럼 총높이 1124 */
.s3-split__media{position:relative;flex:0 0 574px;height:1124px;padding-top:138px;box-sizing:border-box;overflow:visible;}
.s3-split__media > img{position:absolute;left:0;width:100%;border-radius:var(--r-lg);object-fit:cover;}
.s3-split__media > img:first-child{top:138px;height:891px;}
.s3-split__media > img:last-child{top:452px;height:672px;}
/* [3차 회차 · R-02] 시안 747:5590/747:5591 은 X 축도 서로 다르게 어긋난 대각선 배치다 —
   media 박스 기준 doc-x1106(컨테이너 240 + 574 폭 박스 우측정렬) 대비
   사진1(x1021)=−85px · 사진2(x407)=−699px. 박스 밖으로 크게 나가므로 overflow:visible 필요. */
.s3_6 .s3-split{display:flex;gap:60px;align-items:flex-start;margin-top:0;}
.s3_6 .s3-split__text{width:1%;flex:1 1 auto;padding-left:84px;box-sizing:border-box;}
.s3_6 .s3-split__media{position:relative;flex:0 0 574px;height:1124px;padding-top:138px;box-sizing:border-box;overflow:visible;}
.s3_6 .s3-split__media > img{position: absolute; display:block;width:100%;height:100%;border-radius:var(--r-lg);object-fit:cover;}
.s3_6 .s3-split__media > img:first-child{top:138px;right:0; height:891px;}
.s3_6 .s3-split__media > img:last-child{top:452px;left:-615px;height:672px;}
/* 허벅지(747:5592) — split 상단 대비 세로사진 시작 오프셋 89px(747:5590 top1843 − split top1754) ·
   세로사진 511×598 · 원형사진 400×400(단면 사진 대비 418px 어긋남) → 컬럼 총높이 907
   [3차 회차 · R-03] 아래 `--single > img` 규칙이 위 `.s3-split__media > img:first-child`(동일
   detailancy)에 밀려 무시되고 있었다(898px 로 렌더 — 둘 다 class(1)+타입(1) 이지만 첫번째 규칙에
   pseudo-class 가 하나 더 붙어 우선순위가 더 높다). 결합 선택자로 우선순위를 올려 되살렸다. */
.s3-split__media--single{height:907px;padding-top:89px;box-sizing:border-box;}
.s3-split__media.s3-split__media--single > img{position:static;height:598px;width:511px;left:auto;}
/* 시안 750:7472 x1046 — media 박스 doc-x1106 대비 −60px(static 배치라 margin-left 로 이동) */
.s3-split__media--single > img{margin-left:-60px;}
.s3-split__media--single .s3-round{position:absolute;left:-287px;top:507px;margin:0;}
/* [3차 회차 · R-03] 시안 750:6415 원형은 400×400(기본 .s3-round 466×466 은 s3_8 전용) */
.s3_7 .s3-round{width:400px;height:400px;}
/* 아래팔/종아리(750:5998) — split 상단 대비 원형사진 오프셋 67px(796:8982 top1821 − split top1754) */
.s3-split__media--circle{position:static;flex:0 0 466px;height:533px;padding-top:67px;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:center;}
/* [3차 회차 · R-04] justify-content:center 로 두면 우측 정렬 컬럼(doc-x1214)에 그대로 얹혀
   시안(x1091, −123px)보다 오른쪽에 찍힌다 — 원 자체를 좌측으로 밀어 시안 절대값에 맞춘다. */
.s3-split__media--circle .s3-round{position:relative;left:-123px;}
/* ── 텍스트+이미지 2단 : E ──────────────────────────────────────── */

/* ── 허벅지 전용 보라 콜아웃(796:9009) : S ─────────────────────────── */
/* [4차 회차 · N-02] 시안(796:9009) x328 — 부모 .s3-split__text 의 padding-left:84 에 margin-left:4
   를 더해 88px(240+88=328) 로 맞춘다. h373(현재 329 · +44)은 N-03 화살표 삽입분으로 채운다. */
.s3-callout{margin-top:auto;margin-left:4px;width:100%;max-width:394px;text-align:center; margin-top: 100px;}
/* [3차 회차 · R-05] 시안 796:9009 머리는 남색(--c-primary)이 아니라 보라 알약 — 2단메뉴 선택 pill 과
   같은 토큰(--c-pill-active #6423b8, G-14 리터럴 그대로). 리스트는 가운데가 아니라 좌측 정렬. */
/* [6차 회차 · 행간 전수] 시안(796:8965 body20(b)) leading-[1.6] 누락 */
.s3-callout__head{display:flex;align-items:center;justify-content:center;height:43px;border-radius:22px;background:var(--c-pill-active);color:#fff;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:-.4px;}
.s3-callout__list{margin-top:18px;padding:0 20px;text-align:left;}
.s3-callout__list li{padding:12px 0;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:#1e1e1e;list-style:none;position:relative;padding-left:19px;}
/* [4차 회차 · N-05] 시안(796:8969/8971/8973/8975) — 점선 4줄, 각 항목 아래(마지막 항목 아래도 있다).
   기존 실선·:not(:first-child) 상단 선을 걷어내고 항목마다 하단 점선으로 바꾼다. */
.s3-callout__list li{border-bottom:1px dashed var(--c-line);}
.s3-callout__list li:before{content:'';position:absolute;left:0;top:23px;width:5px;height:5px;border-radius:50%;background:#1e1e1e;}
/* [4차 회차 · N-03] 시안(796:9001) Vector 19×18 보라 화살표 — 리스트와 맺음문 사이(gap27). FIG-04:
   피그마 노드 렌더를 그대로 추출한 SVG(ico_s3callout_arrow.svg, fill #6423B8 = --c-pill-active) */
.s3-callout__arrow{width:19px;height:18px;margin:27px auto 0;}
.s3-callout__arrow img{width:100%;height:100%;display:block;}
/* [4차 회차 · N-04] 시안(796:9002) 맺음문 색 #1b2d55(리터럴, G-14) — 공통 토큰(--c-text-alt)이 아니다 */
/* [6차 회차 · 행간 전수] 시안(796:9002 body20(b)) leading-[1.6] 누락 */
.s3-callout__foot{margin-top:27px;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:-.4px;color:#1b2d55;}
/* ── 허벅지 콜아웃 : E ─────────────────────────────────────────── */

/* ── 아래팔/종아리 원형 사진(796:8982) : S ───────────────────────── */
.s3-round{width:466px;height:466px;border-radius:50%;overflow:hidden;margin:0 auto;}
.s3-round img{width:100%;height:100%;object-fit:cover;}
/* ── 아래팔/종아리 원형 사진 : E ──────────────────────────────────── */

/* ── 물결(웨이브 배경, 노드 747:5154 등) : S ─────────────────────── */
/* [확인 사항] 원본은 절대좌표 오버레이(top:1364 height:643 — 본문 위에 겹치는 배경층)라
   문서 흐름에 별도 높이로 더하면 실제보다 문서가 훨씬 길어진다(실측 — 흐름에 추가했을 때
   +643px 초과). 흐름을 깨지 않는 CSS 배경(그 절만큼은 근사)으로 옮겼다 — arti02 자체 배경. */
/* [2차 회차 · 지휘자 지적 반영] CSS background-image 근사를 걷어내고 피그마 노드(bg_s3wave)를
   실제 <img> 로 배치한다 — FIG-06 「CSS 로 그린 모양도 제작」을 피하려면 노드 자산을 그대로 쓰는
   쪽이 배경 프로퍼티보다 명확하다. .arti02 높이만큼 덮고(inset:0 · object-fit:cover), 흐름 높이는
   추가하지 않는다(물결은 배경층이지 별도 섹션이 아니다 — 원본도 절대좌표 오버레이). */
.arti02{position:relative;}
/* [3차 회차 · B-03] 시안 747:5154 는 x0 y1364 1920×643 — .container(1440, x240) 안이 아니라
   풀블리드(전폭) 오버레이다. .arti02 는 1440 컨테이너 안에 있어(HTML 구조는 그대로 두고 — 새 래퍼
   추가 없음, FIG-06) 가운데 정렬된 박스를 뷰포트 폭으로 다시 튀어나오게 하는 표준 풀블리드 기법
   (left:50%+translateX(-50%)+100vw)으로 x0/1920 폭을 재현한다. 높이는 원본처럼 643px 고정 —
   100% 로 두면 arti02 전체 높이만큼 늘어나 시안과 달라진다(2차 회차까지의 결함). */
/* [4차 회차 · B-03 재반려 반증 수용] 「문서 높이 ±0 이므로 결함 아님」 판정을 기각한다 —
   절대 오버레이는 흐름 높이에 0 을 기여하므로 ±0 은 y 를 못 가른다(퍼피-5 §2-2). 같은 프레임의
   서브타이틀 인스턴스가 시안·구현 모두 y1504 로 같은 좌표계임이 확인됐고, 그 축 위에서 물결은
   시안 y1364(01_section y722 h642 의 끝값 — 서브타이틀을 140px 먼저 덮는 배치) · 구현은 .arti02
   top(=y1504) 기준 top:0 이라 140px 차이가 났다. .arti02 기준 top:-140px 로 앵커만 옮긴다(신규
   래퍼 없음 · FIG-06). */
.arti02 .wave-bg{
	position:absolute;left:50%;top:-140px;z-index:0;overflow:hidden;pointer-events:none;
	width:100vw;max-width:1920px;height:643px;transform:translateX(-50%);
}
/* 전 폭(1920~375) 공통: 100vw 는 세로 스크롤바 폭까지 포함해 계산되어, 이 풀블리드 물결 배경이
   화면 좌우로 스크롤바 폭의 절반만큼씩 실제로 삐져나가 가로 스크롤을 만든다(측정 — scrollWidth
   가 clientWidth 보다 7px 큼, 전 폭에서 재현). body 에만 overflow-x:hidden 을 걸어봤으나
   document.documentElement.scrollWidth 는 그대로였다(body 의 overflow 가 html 로 전파되지
   않는 경우가 있음 — 실측으로 확인) — html 자체에 걸어야 실제로 잘린다. 이 파일은 s3_6~s3_9
   4장에만 로드되므로(다른 페이지는 이 파일을 참조하지 않음) 여기 두어도 다른 페이지에는
   적용되지 않는다. */
html{overflow-x:hidden;}
.arti02 .wave-bg img{position:absolute;left:0;top:-16.28%;width:100%;height:168.04%;object-fit:cover;}
.arti02 .wave-bg:after{
	content:'';position:absolute;inset:0;
	/* [FIG-04] 노드 747:5154 페인트 그라디언트 리터럴 그대로(발명 아님) */
	background:linear-gradient(180deg,rgba(255,255,255,0) 50.078%,#fff 83.748%),
	           linear-gradient(90deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.02) 100%);
}
.arti02 > *:not(.wave-bg){position:relative;z-index:1;}
/* ── 물결 : E ─────────────────────────────────────────────────── */

/* ── promise 안내 박스(복부·허벅지 전용, 747:5147 등) : S ─────────── */
.s3-promise{
	position:relative;width:100%;height:492px;overflow:hidden;background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.s3-promise .tex{position:absolute;inset:0;opacity:.65;}
.s3-promise .tex img{width:100%;height:100%;object-fit:cover;}
.s3-promise .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;max-width:1100px;}
/* [6차 회차 · 행간 전수] 시안(747:5149 body18(sb)_po) leading-[1.7] 누락 */
.s3-promise .eyebrow{margin:0;font-family:"Poppins","Pretendard",sans-serif;font-size:18px;font-weight:600;line-height:1.7;letter-spacing:-.36px;color:var(--c-accent);}
.s3-promise .head{margin:0;font-size:30px;font-weight:500;letter-spacing:-.6px;line-height:1.5;color:#1e1e1e;}
.s3-promise .line{width:53px;height:4px;margin:0;background:#EDB629;border:0;}
.s3-promise .body{font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-alt);}
/* [6차 회차 · 행간 전수] 시안(747:5152 "수술시 멍 :"/"부기 :" 라벨) leading-[1.5] — 부모 .body 의 1.7 을
   그대로 상속하고 있었다(불일치, 누락이 아니라 오상속). 22px 라벨만 따로 1.5 로 되돌린다. */
.s3-promise .body strong{font-size:22px;font-weight:600;line-height:1.5;letter-spacing:-.44px;}
/* ── promise 안내 박스 : E ────────────────────────────────────────── */

/* ── 재수술 6장(750:7895 컴포넌트) : S ───────────────────────────── */
.s3-recover{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:60px;}
/* [4차 회차 · N-07] 시안(750:7905) 카드 프레임 180×223 — 현재 211(−12). x·개수·gap20 은 이미 일치
   (750:7905 절대 x370=컨테이너240+130, 카드 6장 justify-content:center 로 이미 재현됨).
   내부 노드(750:7896)는 사진 160×160(보더 제외)+텍스트 32 조합이라 정확한 여백 분해까지는 못 재
   (효과 관찰 — 총 높이차만 gap 로 보정, 세부 확인 필요로 남긴다). */
.s3-recover__item{display:flex;flex-direction:column;align-items:center;gap:31px;width:180px;}
.s3-recover__pic{width:160px;height:160px;border:8px solid #fff;border-radius:var(--r-lg);box-shadow:0 0 19px rgba(0,0,0,.15);overflow:hidden;background:#fff;}
.s3-recover__pic img{width:100%;height:100%;object-fit:cover;}
.s3-recover__item ol{margin:0;padding:0;list-style:none;}
/* [6차 회차 · 행간 전수] 시안(750:7896 body20(b)) leading-[1.6] 누락 — N-07 높이차의 실제 성분 중 하나였다 */
.s3-recover__item li{font-size:20px;font-weight:700;line-height:1.6;letter-spacing:-.4px;color:#333;text-align:center;}
/* ── 재수술 6장 : E ──────────────────────────────────────────────── */

/* ── 재수술 솔루션 리드(792:7131) : S ─────────────────────────────── */
/* [6차 회차 · 행간 전수] 시안(792:7030 body20(b)) leading-[1.6] 누락 */
.s3-solution-lead{margin-top:21px;padding:0 34px;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:-.4px;color:var(--c-primary);}
/* ── 재수술 솔루션 리드 : E ────────────────────────────────────────── */

/* ── s3_6 복부 페이지별 간격(747:5144 실측) : S ───────────────────── */
.s3_6 .real-cont{padding:0;}
.s3_6 .arti01{padding:0;}
/* [2차 회차] 시안 747:5146(promise) top3087 · 본문 이미지 하단(747:5590/5591 겹침) 2814 실측 —
   본문~promise 간격 273px. 값은 §4-2 절 표 그대로, 임의 반올림 없음. */
.s3_6 .s3-promise{margin-top:273px;}
/* ── s3_6 : E ─────────────────────────────────────────────────── */

/* ── s3_7 허벅지 페이지별 배치(747:5592 실측) : S ─────────────────── */
.s3_7 .real-cont{padding:0;}
.s3_7 .arti01{padding:0;}
.s3_7 .s3-split{align-items:stretch;}
/* [2차 회차] 시안 promise(747:5599 등) top2928 · 콜아웃 하단(796:9002 실측) 대비 간격 §4-2 실측값 */
.s3_7 .s3-promise{margin-top:265px;}
/* ── s3_7 : E ─────────────────────────────────────────────────── */

/* ── s3_8 아래팔/종아리 페이지별 배치(750:5998 실측 — promise 밴드 없음) : S ── */
.s3_8 .real-cont{padding:0; padding-bottom: 300px;}
.s3_8 .arti01{padding:0;}
.s3_8 .arti02 .s3-split{ display: flex; gap: 110px; align-items: center;}
.s3_8 .arti02 .s3-round {max-width: 466px; width: 100%;}
/* [2차 회차] footer 시작(2631) 기준 역산 — 본문 하단~footer 간격 */
/* .s3_8 .arti02{padding-bottom:344px;} */
/* ── s3_8 : E ─────────────────────────────────────────────────── */

/* ── s3_9 재수술/부작용 복원 페이지별 배치(750:7475 실측 — promise 밴드 없음) : S ── */
.s3_9 .real-cont{padding:0; padding-bottom: 300px;}
.s3_9 .arti01{padding:0;}
/* [4차 회차 · N-01 재반려] 시안(792:7131 · 792:6992) 본문·솔루션 헤드 모두 x324 — 컨테이너
   중앙정렬(max-width:700+margin:auto → x610)이 원인이었다. s3_6~8 과 같은 +84px 좌측 인셋으로
   바꾼다(s3_9 는 .s3-split 래퍼가 없어 .s3-body 에 직접 준다 — 이중 적용 아님). */
/* [4차 회차 재실측 · 회귀 수정] max-width:700(border-box) 그대로 두고 padding-left:84 만 얹었더니
   본문 폭이 616 으로 좁아져 줄바꿈이 늘어 문서 높이가 +104px 회귀했다(3313≠3209). 콘텐츠 폭은
   700 그대로 유지해야 하므로 max-width 를 84 만큼 늘려 상쇄한다(784=700+84). */
.s3_9 .s3-body{padding-left:84px;max-width:784px;box-sizing:border-box;}
/* [7차 회차 · N-09 잔여 +20 원인] 검수 「지워 보기」재현 — h4×2+solution-lead 되돌림은 −34 만
   설명했고 잔여 +20 은 여기 있었다. 둘째 `.s3-body`(솔루션 리스트, 노드 792:6992)는 첫째 body
   (792:7131)와 폭이 다르다 — 792:7131 width **700** / 792:6992 width **887**. 위 공통 규칙이
   두 블록에 같은 max-width:784(=700+84)를 씌워 둘째 블록 리스트가 887 이 아니라 700 폭으로
   좁게 줄바꿈되고 있었다. max-width:784 를 지워 971(=887+84)로 재보니 docH 3263→**3202**
   (−61, 검수가 못 채운 20 을 포함해 전부 여기였다). 둘째 블록만 971 로 분리한다. */
.s3_9 .arti02 > .s3-body:last-child{max-width:971px;}
/* [2차 회차] 노드 실측 그대로 재적용 — 재수술 카드열(750:7905) top1946 · 솔루션 헤드(792:6992) top2270 */
.s3_9 .s3-recover{margin-top:61px;}
.s3_9 .arti02 > .s3-body:last-child{margin-top:113px;}
/* [7차 회차 · N-10] 시안 리터럴 — 둘째 본문(792:6992) 바닥 y2652 · footer 시작 y2901 → 갭 249.
   250(반올림)이 아니라 249 그대로(G-14 ±2px 는 판정오차이지 반올림 허가가 아니다). */
/* .s3_9 .arti02{padding-bottom:249px;} */
/* ── s3_9 : E ─────────────────────────────────────────────────── */

/* ── 반응형(s3_6~s3_9, 1024 이하) : S ──────────────────────────────
   .s3-split 는 텍스트+사진을 좌우 flex 로 배치하고, 사진 쪽(.s3-split__media)이
   574px 고정폭(+ 절대좌표 오프셋 사진)이라 1024 이하에서 좁아지는 폭을 전부 먹어
   텍스트 칸이 부서진다(768 실측 — 텍스트 칸 실폭 89px). 새 요소 추가 없이 같은
   두 자식을 좌우에서 위아래로 접는다. 겹쳐 있던 사진 2장(s3_6)은 위아래로 순서만
   바꿔 쌓고, 원(.s3-round)과 세로사진(s3_7 --single)은 가운데 정렬로 되돌린다.
   [확인 사항] s3_6 사진 2장의 대각선 겹침(314px)은 시안에 하위 폭 기준이 없어
   단순 스택으로 근사했다 — 겹침을 유지할지는 디자인 판단이 필요하면 별도 확인. */
@media (max-width:1024px){
	.s3_6 .s3-split,.s3_7 .s3-split,.s3_8 .s3-split{flex-wrap:wrap;gap:32px;}
	.s3_6 .s3-split__text,.s3_7 .s3-split__text,.s3_8 .s3-split__text{
		width:100%;flex:1 1 100%;padding-left:0;
	}
	.s3_6 .s3-split__media{
		position:relative;width:100%;max-width:574px;flex:0 0 auto;
		height:auto;padding-top:0;margin:0 auto;overflow:hidden;
	}
	.s3_6 .s3-split__media>img{position:static;width:100%;height:auto !important;left:auto;}
	.s3_6 .s3-split__media>img+img{margin-top:16px;}

	.s3_7 .s3-split__media--single{
		flex:0 0 auto;width:100%;max-width:511px;height:auto;padding-top:0;margin:0 auto;
	}
	.s3_7 .s3-split__media--single>img{width:100%;height:auto;margin-left:0;}
	.s3_7 .s3-split__media--single .s3-round{position:static;left:auto;top:auto;margin:24px auto 0;}
	.s3_7 .s3-round{width:min(100%,400px);height:auto;aspect-ratio:1/1;}

	.s3_8 .s3-split__media--circle{
		position:static;width:100%;max-width:466px;height:auto;padding-top:0;
		margin:0 auto;flex:0 0 auto;justify-content:center;
	}
	.s3_8 .s3-split__media--circle .s3-round{position:static;left:auto;}
	.s3_8 .s3-round{width:min(100%,466px);height:auto;aspect-ratio:1/1;}
}
/* ── 반응형(s3_6~s3_9, 1024 이하) : E ──────────────────────────────── */


@media (max-width: 1440px){
    .s3-band h2 {font-size: clamp(28px, 4.2vw, 48px);} 
}

@media (max-width: 1024px){
   .s3-band p.s3-lead {font-size: 30px;}
   .s3-subtitle h3 {font-size: 30px;}
   .s3-body__head h4 {font-size: 26px;}
}

@media (max-width: 768px){
   .s3-hero-divider {margin-top: 40px;}
   .s3-band p.s3-lead {font-size: 26px; margin-top: 40px;}
   .s3-band__inner {padding: 90px 15px 0;}
   .s3-subtitle h3 {font-size: 26px;}
   .s3-subtitle h3 br {display: none;}
   .s3-subtitle {margin-top: 50px;}
   .s3-body__head h4 {font-size: 20px;}
   .s3-promise .head {font-size: 26px; padding: 0 15px;}
   .s3-promise .head br {display: none;}
   .s3_6 .s3-promise {margin-top: 150px;}
}

@media (max-width: 480px){
   .s3-band p.s3-lead {font-size: 22px;}
   .s3-subtitle h3 {font-size: 22px;}
   .s3-body__head h4 {font-size: 18px;}
   .s3-body__list li {font-size: 16px;}
   .s3-promise {padding: 40px 0 80px;}
   .s3-promise .head {font-size: 22px;}
   .s3-promise .body strong {font-size: 18px;}
   .s3-promise .body {font-size: 16px;}
   .s3-callout__head {font-size: 18px;}
   .s3-callout__list li {font-size: 16px; padding: 10px 0 10px 19px;}
   .s3_9 .s3-body {padding-left: 0;}
   .s3-solution-lead {padding: 0; font-size: 18px;}
   .s3-recover__item {gap: 20px; flex: 0 0 calc(50% - 10px); width: 1%;}
   .s3-recover__item li {font-size: 16px;}
   
}