@charset "utf-8";
/*
	css/_sub-s45.css — s4(거상 3장) + s5(보험수술 3장) 전용 CSS.
	[일하는 규칙 24 · GD-23] 병렬 조각 전용 파일 — css/sub.css(공통, 퍼피-1 소유)는 건드리지 않는다.
	클래스 접두 — 페이지별 좌표는 .s4_1~.s4_3/.s5_1~.s5_3, 신규 공용 컴포넌트는 .s45- 접두.
	공통 골격(.page-header/.lnb/.s-title/.real-cont/.arti0N)은 css/sub.css 정의를 그대로 재사용한다.
	담당 경계 — 이 파일의 구조·자산·1920 값은 마크업 담당(퍼피-1D). 1400px 이하 반응형은 퍼피-2 몫(미착수).
*/

/* ── page-header(type2) 페이지별 배경 — sub_v4(거상)/sub_v5(보험수술), 노드 750:7949 등 1920×722 ── */
.s4_1 .page-header,
.s4_2 .page-header,
.s4_3 .page-header,
.s5_1 .page-header,
.s5_2 .page-header,
.s5_3 .page-header{
	height:722px;margin-top:calc(-1 * var(--h-header));
}
/* [S45-12·5차→S45-15·6차 정정] 예전 override(이 6장 전용, `content:none`)는 지웠지만 공통 sub.css:96~98
   `.page-header.type2:after{content:none}`(범용 typeN 룰, 내 6장도 markup 상 `class="page-header type2"`
   라 여기 걸린다 — 공통 파일이라 손대지 않음)가 그대로 살아 있어 지워도 오버레이가 안 살아났다
   (지워보고 확인, 1차 시도 실패 → content:'' 를 이 파일에서 명시적으로 되살림, 2차).
   [S45-15·6차] 5차에서는 sub.css:18 공통값(rgba(0,0,0,.3), 순검정)을 그대로 썼는데, 검수가 방향이
   반대로 과했다고 지적(+44.0 → −5.9~−6.1) — `get_design_context` 로 750:7950 "Rectangle 17" 의
   실제 합성을 열어보니 배경사진 위에 ① `linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 18.421%)`
   (상단 비네트) ② `rgba(43,28,18,.3)` 단색(순검정이 아니라 웜브라운) 두 겹이 있었다. `background-color`
   대신 `background`(gradient) 로 이 두 겹을 그대로 옮긴다. */
.s4_1 .page-header:after,
.s4_2 .page-header:after,
.s4_3 .page-header:after,
.s5_1 .page-header:after,
.s5_2 .page-header:after,
.s5_3 .page-header:after{content:'';background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 18.421%),rgba(43,28,18,.3); z-index: 0;}
.s4_1 .page-header *,
.s4_2 .page-header *,
.s4_3 .page-header *,
.s5_1 .page-header *,
.s5_2 .page-header *,
.s5_3 .page-header * {z-index: 2;}
.s4_1 .page-header{background-image:url(../images/sub/bg_s401.jpg);}
.s4_2 .page-header{background-image:url(../images/sub/bg_s402.jpg);}
.s4_3 .page-header{background-image:url(../images/sub/bg_s403.jpg);}
.s5_1 .page-header{background-image:url(../images/sub/bg_s501.jpg);}
.s5_2 .page-header{background-image:url(../images/sub/bg_s502.jpg);}
.s5_3 .page-header{background-image:url(../images/sub/bg_s503.jpg);}
/* [DIR-03] type2 h1(x240 y278) + .lede(x240 y381 · 18px SemiBold) 좌표·글자는 css/sub.css 범용 정의 그대로.
   단 [S45-13·5차 회차] 폭(max-width)만 공통 기본값 420px 에 눌려 6장 전부 2줄(설계)이 3줄로 밀렸다
   (공통 26장 중 s4·s5 만 걸림 — 지휘자 실측). 공통 sub.css 는 건드리지 않고 여기서 페이지 시안 폭으로 덮는다.
   Figma 실측 — s4 전 3장 w531(750:8024·774:4761·784:5508) · s5 전 3장 w561(784:5896·787:6984 계열·787:7468). */
.s4_1 .page-header.type2 .lede,.s4_2 .page-header.type2 .lede,.s4_3 .page-header.type2 .lede{max-width:531px;left:243px;} /* 공통 sub.css:114 `.page-header.type2 .lede`(specificity 3class) 와 동률+캐스케이드 순서로 이겨야 해서 선택자를 맞춤. [S45-17·6차] left 240→243(시안 750:8024 등 x243) */
.s5_1 .page-header.type2 .lede,.s5_2 .page-header.type2 .lede,.s5_3 .page-header.type2 .lede{max-width:561px;left:243px;} /* [S45-17] 동일 — 시안 784:5896 등 x243 */
/* [S45-16·6차] 위 줄바꿈(자동 wrap)이 시안보다 한참 뒤에서 끊겨(폭이 맞아도 글꼴 자간이 달라 자동
   줄바꿈 위치가 다르다 — 글꼴 라이선스 확인 전까지 못 건드리는 부분) HTML 에 문장 경계 `<br>` 을
   직접 넣어 시안과 같은 지점에서 줄이 바뀌게 했다(6장 모두 `.lede` 텍스트가 정확히 두 문장이라
   첫 문장 끝에 br 삽입 — 시안 750:8024 등 텍스트도 두 문장 그대로, 창작 아님). */

/* ── 2단메뉴 활성탭 — .lnb 좌표/치수는 sub.css 범용, 여기선 재정의 없음(이미 현재위치 스타일 상속) ── */

/* ── s45-quote : 서브 비주얼 하단(y722, h642) 배경사진+블러 오버레이 위 s_title+리드문 블록 ──
   [DIR-03] 노드 "중앙text영역"(예 750:8434) — 신규 공용 컴포넌트, s4/s5 전 페이지 동일 구조 반복(FIG-06 반복 허용) */
.s45-quote{position:relative;width:100%;height:642px;overflow:hidden;color:#fff;text-align:center;}
.s45-quote .bg{position:absolute;inset:0;opacity:.2;z-index:0;}
.s45-quote .bg img{width:100%;height:100%;object-fit:cover;}
.s45-quote:before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.02);z-index:0;}
.s45-quote .navy{position:absolute;inset:0;z-index:0;overflow:hidden;} /* [S45-37·9차] 시안 750:8436 형제(Rectangle132) — 히어로 사진(.bg, opacity.2) 위를 덮는 진한 남색 전면 이미지. 이게 없어서 8회차 동안 판이 밝은 회색으로 보였다(y900 대역 스캔에서만 잡힘 — 높이·좌표·글자·콘솔은 전부 통과했었다) */
.s45-quote .navy img{width:100%;height:100%;object-fit:cover;}
.s45-quote .overlay{position:absolute;inset:0;z-index:0;background:rgba(0,15,72,.28);backdrop-filter:blur(1.15px);}
.s45-quote .container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:80px;width:100%;padding-top:95px;}
.s45-quote .lead{font-size:40px;font-weight:100;line-height:34.9px;letter-spacing:-.8px;}
.s45-quote .lead strong{font-weight:600;}
.s45-quote .desc{margin-top:36px;font-size:18px;font-weight:400;line-height:1.7;letter-spacing:-.36px;}

/* ── 서브타이틀(노드 738:3912 컴포넌트 · 1093×250, x414 y1504) — 리드문 2줄 + 세로 점선(imgFrame1582) ── */
.s45-subhead{width:1093px;margin:0 auto;padding-top:132px;text-align:center;}  /* [G-14] page-header(722)~서브타이틀(1504) 간격 실측 */
.s45-subhead p{font-size:40px;font-weight:500;line-height:1.6;letter-spacing:-.8px;color:var(--c-text-alt);}
.s45-subhead .tick{display:block;width:18px;height:76px;margin:46px auto 0;}
.s45-subhead .tick img{width:100%;height:100%;object-fit:contain;}

/* ── 본문내용(노드 774:5092/5093 컴포넌트) — 소제목(30px)+불릿 리스트(18px), 전 arti 공통 ── */
.s45-body{padding-top:68px;}  /* [2차 회차 재실측] 서브타이틀 실제 렌더 하단(1746)~본문(1814.26) 간격 = 68.26 · 1차값 190 은 근거 없는 추정치였다(정정) */
.s45-body .blk{display:flex;flex-direction:column;gap:20px;}
.s45-body .blk + .blk{margin-top:20px;}
.s45-body .blk h3{display:flex;align-items:center;gap:10px;font-size:30px;font-weight:500;letter-spacing:-.6px;color:var(--c-text-alt);line-height:1.5;} /* [S45-10·5차 회차] 전역 수정 — line-height 미지정(30px) → 45px, 시안 「본문내용」 instance 792:7072·792:7134·792:7157·792:7174·792:7220 h45 전부 확인. .blk+.blk margin 은 반증(대상 0)이라 손대지 않음 */
.s45-body .blk h3 img{width:19px;height:19px;}
.s45-body .blk ul{padding-left:20px;}
/* [S45-18·6차 회차] 차단 — 지금까지 `.blk ul` 이 부모 `.container`(1440px) 폭을 그대로 물려받아
   시안보다 넓었고, 그래서 줄이 적게 접혀 블록 높이가 짧았다(s4_3 −31.4·s5_1 −53·s5_2 −138·s5_3 −14/−51).
   그 결손을 quote2 padding-top·real-cont padding-bottom 역산값으로 메워 문서 높이만 ±0 으로 보이게
   했던 것이 5차까지의 상쇄다 — 이번에 그 역산값을 걷어내고(아래 §, 원상 복구) 여기서 원인을 고친다.
   폭은 시안 컨테이너 프레임 폭 그대로(문단 텍스트 개별 인스턴스 폭 아님) — s4_1 블록1=709(792:7034)·
   블록2=1071(792:7052) · s4_2 전 블록=1234(792:7073·792:7085·792:7089·792:7093·792:7097) ·
   s4_3=1234(792:7104) · s5_1=700(792:7135) · s5_2=657(792:7143) · s5_3 3블록 전부=1234(792:7158·792:7178·792:7222). */
.s4_1 .arti01.s45-body .blk:nth-of-type(1) ul{max-width:749px;} /* [S45-27·8차] li 자기 박스폭 = ul max-width − ul.padding-left(20) − li.margin-left(20) = −40. 709(li 목표)+40=749 (기존 709 를 그대로 넣어 li 가 669 밖에 안 됐다) */
.s4_1 .arti01.s45-body .blk:nth-of-type(2) ul{max-width:1111px;} /* 1071(li 목표)+40=1111 */
.s4_2 .arti01.s45-body .blk ul{max-width:1281px;} /* [S45-23·7차] 컨테이너(1234)+들여쓰기(47) — 대부분 li 는 1234 폭에서 자연 줄바꿈(br 없음/br 로 지정), li1 만 597 폭으로 더 좁음(아래) */
.s4_2 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(1){max-width:644px;} /* 792:7074 li1 폭597+47 */
.s4_2 .arti01.s45-body .blk:nth-of-type(2){margin-top:66px;} /* [S45-24·7차] 사진그룹1(796:9159)↔본문B(796:9161) 시안 간격 66 — 구현 0 이던 것 */
.s4_3 .arti01.s45-body .blk ul{max-width:810px;} /* [S45-23·7차] li 자기 인스턴스 폭(792:7105) 763 + ul/li 들여쓰기(padding-left 20 + margin-left 20 + padding-left 7 = 47) = 810, 안 그러면 763 을 li 안 텍스트 가용폭으로 착각해 3줄로 더 접힌다(1차 시도 실패 → 재측정으로 발견) — br 도 함께 삽입(위 HTML) */
.s5_1 .arti01.s45-body .blk ul{max-width:700px;}
.s5_2 .arti01.s45-body .blk ul{max-width:697px;} /* [S45-35·9차] 657(li 목표)+40(들여쓰기, S45-27 과 같은 공식) — 이전 회차엔 이 +40 을 안 넣었었다 */
.s5_2 .arti01.s45-body .blk ul li + li{margin-top:16px;} /* [S45-34·9차] 시안 li 간격 16 (12 아님) */
/* [S45-42·11차] 위 line-height:1.722 는 반증됐다 — 시안 토큰은 1.7 이고 다른 5장 전부 1.700 이다. 삭제하고 전역 1.7 로 되돌린다(역산이 margin→line-height 로 옮겨간 것이었다). 3.66 잔차는 다른 원인을 찾을 때까지 미해소로 남긴다. */
.s5_3 .arti01.s45-body .blk ul{max-width:1234px;}
/* [S45-28·8차] 블록1(지방종) 의 4개 li 는 컨테이너(1234) 가 아니라 각자 노드 폭(792:7159 471·792:7195 1118·792:7198 1009·792:7201 678) — 매 li 폭 + 40(ul.padding-left20+li.margin-left20) */
.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(1){max-width:511px;}
.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(2){max-width:1158px;}
.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(3){max-width:1049px;}
.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(4){max-width:718px;}
.s45-body .blk ul li{position:relative;padding-left:7px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text);list-style:disc;margin-left:20px;}
.s45-body .blk ul li + li{margin-top:12px;}
/* [S45-30·8차] s4_2 두 블록 모두 시안 li 간격이 12 가 아니라 20 이다(Frame1642→1643 y65+31=96→116, gap20 · Frame1644→1645→1646 동일하게 20). 전역 12 는 그대로 두고(다른 페이지 재검증 예산 없음) 이 페이지만 스코프. */
.s4_2 .arti01.s45-body .blk ul li + li{margin-top:20px;}
/* [S45-29 부수] s5_3 블록1(지방종) 은 시안 gap 이 16(get_design_context 확인) — 이 블록만 스코프. */
.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li + li{margin-top:16px;}
.s45-body .note{padding:0 34px;font-size:20px;font-weight:700;letter-spacing:-.4px;color:var(--c-text-alt);line-height:1.6;} /* [S45-07] s5_1 inline style 이관 — CSS-10(GD-16) · [S45-41·11차] line-height 미지정(다섯 번째 재발) → 1.6(792:7136 h32/font20) */
.s5_1 .s45-body .note {color: #1B2D55; margin-top: 20px;}

/* [S45-09·4차] s4_1 전용 — .blk+.blk 간격(20px, 코드)이 Figma 792:7069 내부 gap 50(y0→y146) 보다
   30px 좁아 .s45-hands 가 61px 위로 밀림. h3 line-height 는 [S45-10·5차] 로 전역 수정됨(위 .s45-body .blk h3 참고,
   검수가 반증 — 다른 5장은 .blk 이 1개뿐이거나 인접 형제가 아니라 이 margin 은 대상 0). 아래로 밀려난 61px 은
   `.s45-quote2--s41` 에서 되돌려 문서 높이 3795 ±0 을 유지한다. */
.s45-body--s41 .blk + .blk{margin-top:50px;} /* 792:7069 내부 gap(146−96) */

/* ── 손모양 5분할(s4_1 전용, 노드 774:4590 Group1207 · 1225.68×456.32) — [3차 회차 S45-05·S45-07]
   사진(li) 좌표는 Group1196~1200 실측과 이미 ±0 이라 유지한다. left/top 은 CSS-10(GD-16, inline style
   금지) 위반이라 li[style] 를 걷어내고 여기 nth-child 로 옮긴다(사진 위치값 자체는 그대로).
   Group1196 x347y2277 · Group1197 x768.89y2277 · Group1198 x1190.79y2277 · Group1199 x546y2522 · Group1200 x967.89y2522,
   전부 그룹 원점(x347y2251) 기준 환산. */
.s45-hands{position:relative;width:1225.68px;height:456.32px;margin:164px auto 0;}
.s45-hands li{position:absolute;width:381.89px;height:185.32px;}
.s45-hands li:nth-child(1){left:0;top:26px;}
.s45-hands li:nth-child(2){left:421.89px;top:26px;}
.s45-hands li:nth-child(3){left:843.79px;top:26px;}
.s45-hands li:nth-child(4){left:199px;top:271px;}
.s45-hands li:nth-child(5){left:620.89px;top:271px;}
.s45-hands li picture{} /* [S45-05 부수2] overflow:hidden 을 li 가 아니라 picture 에만 걸어 라벨칩(li 밖으로 -26px 튀어나옴)이 클립되지 않게 함 */
.s45-hands li img{display:block;max-width:100%;height:100%;border-radius:160px;overflow:hidden;box-shadow:0 4px 4px rgba(0,0,0,.25);}
.s45-hands li span{position:absolute;left:50%;top:-24px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:35px;background:var(--c-pill-active);color:#fff;font-size:16px;letter-spacing:-.32px;text-align:center;} /* [S45-05 부수] --c-primary(남색)→--c-pill-active(#6423b8) — S45-03 이 .s45-qna .head 만 고치고 안 번진 자리 */
/* 라벨칩 좌표 — [3차 회차 재수정] span 은 position:absolute 인 li 자신이 containing block 이라
   그룹(.s45-hands) 원점 기준 절대값(275,687,1109,463,889 등)을 그대로 쓰면 li 위치만큼 이중으로 밀린다
   (S45-05 근본원인 — 좌표계 두 번째 함정). li 마다 "라벨절대좌표 − 그 li 의 그룹내 좌표" 로 li-상대값을
   다시 냈다 — 미니(275,-26)·축소(265.11,-26)·단축L거상(265.21,-26)·L거상(264,-23)·T거상(268.11,-23). */
.s45-hands li:nth-child(1) span{left:275px;top:-26px;transform:none;}
.s45-hands li:nth-child(2) span{left:265.11px;top:-26px;transform:none;}
.s45-hands li:nth-child(3) span{left:265.21px;top:-26px;transform:none;}
.s45-hands li:nth-child(4) span{left:264px;top:-23px;transform:none;}
.s45-hands li:nth-child(5) span{left:268.11px;top:-23px;transform:none;}

/* ── 복부거상 2×2 비교 카드(s4_2 전용, 노드 796:9159/9160 · 550×276 + 라벨 알약) ──
   [2차 회차] row-gap 347(행간 796:9159→796:9160 실측 623 − 이미지높이276) · margin-top 은 페이지별 보정(§아래) */
.s45-compare{display:flex;flex-wrap:wrap;justify-content:center;gap:347px 55px;margin-top:63px;}
.s45-compare li{position:relative;width:550px;height:296px;} /* [S45-30·8차] 시안 그룹(796:9155 등) 296 — 라벨 알약이 overflow 로 밖에 나가는 게 아니라 그룹 박스 안(276 사진+20 알약 절반)에 포함된 높이다 */
.s45-compare li img{display:block;width:100%;height:276px;border-radius:10px;object-fit:cover;}
.s45-compare li span{position:absolute;left:50%;bottom:0px;transform:translateX(-50%); max-width: 256px; width: 100%; display:flex;align-items:center;justify-content:center;height:40px;padding:0 17px;border-radius:35px;background:var(--c-pill-active);color:#fff;font-size:16px;white-space:nowrap;letter-spacing:-.32px;} /* [S45-08 4차] --c-primary(남색)→--c-pill-active — 시안 796:9146 렌더 픽셀 3점 전부 rgb(100,35,184), s4_2 라벨 4개 전수 */

/* ── s45-quote2(footer 위 인용구, 노드 "Frame 1605" 등) — 큰 따옴표 + 굵은 진한색 리드 + 본문 ──
   [S45-18·6차] 페이지별 padding-top 역산값(174.81/542.03/131.5 등)을 전부 걷어내고 기본 110px 로
   되돌렸다 — 검수 지적대로 그 값들은 시안 값이 아니라 `.blk ul` 폭 버그를 메우던 상쇄였다.
   `.blk ul` 폭을 고친 뒤 이 절 §아래 재측정 결과로 남은 차이를 「미해소」로 적는다(다시 역산 금지). */
.s45-quote2{padding:110px 0 0;text-align:center;color:var(--c-primary);}
/* [S45-14·6차] s4_1 만 이 조정이 빠져 있었다(s5 3장엔 5차에 이미 적용, 검수 확인). mark 목표 절대y
   2927.32(Frame1605, 750:8105) — `.blk ul` 폭 수정 뒤 재측정한 mark.top 기준으로 다시 계산했다
   (재계산 이유: 5차 수치는 폭 수정 전 값이라 폭 수정 후에는 안 맞음). 이 padding-top 은 quote2 자기
   내부 목표 절대좌표를 맞추는 값이라 「총 높이 맞추기 역산」이 아니다 — `S45-18` 로 걷어낸 것은
   real-cont 쪽(총 높이 상쇄용)이었지, quote2 자기 위치 보정은 별개로 유지한다. */
.s4_1 .s45-quote2{padding-top:220px;} /* [S45-26·8차] S45-27(li1 폭)·S45-32(빈 desc 제거) 로 상류 오차를 걷어낸 뒤 시안 「직전 콘텐츠 끝→mark」 간격 220 그대로 사용(역산 아님) */
/* [S45-21·7차 재발 대응] S45-18 에서 걷어낸 뒤 다시 이탈 — S45-14 와 같은 방식(자기 위치 목표,
   총높이 역산 아님)으로 재계산. mark 목표: s5_1 2767(784:5904) · s5_2 2610(808:8577) · s5_3 4445(792:7314) */
.s5_1 .s45-quote2{padding-top:220px;} /* [S45-33·9차] S45-33(.s45-grades y −56) 적용 후 재확인 — 220 정수로 mark 재검증(아래) */
.s5_2 .s45-quote2{padding-top:220px;} /* [S45-34·9차] S45-34(li gap16)+S45-35(ul+40) 적용 후 재확인 — 404 정수로 mark 재검증(아래) */
.s5_3 .s45-quote2{padding-top:206.04px;} /* [S45-43·11차 재확인] S45-43(qna col2 위치) 반영 후 mark 재계산(287.87→206.04) — 상류가 또 바뀌어 다시 쟀다 */
.s45-quote2 .mark{display:block;font-family: 'BookkMyungjo';font-size:133px;font-weight:300;letter-spacing:-2.66px;line-height:1.5;margin-bottom:-90px;}
.s45-quote2 .lead{font-size:30px;font-weight:500;letter-spacing:-.6px;line-height:1.5;}
.s45-quote2 .desc{margin-top:22px;font-size:18px;font-weight:400;letter-spacing:-.36px;line-height:1.7;color:var(--c-text);}

/* ── Grade 카드(s5_1 전용, 노드 792:6040 등 · 295px 카드 4장 + 보험불가 칩) ── */
.s45-grades{position:relative;display:flex;justify-content:center;gap:30px;margin-top:170px;}
.s5_1 .s45-grades{margin-top:114px;} /* [S45-33·9차] y 는 792:6096(y1993)에 맞춰 −56. [S45-40·10차] margin-bottom:10.81px 역산값은 제거 — 근본원인은 .grade h4 line-height 누락(위에서 수정) */
.s45-grades li{width:295px;}
.s45-grades li img{display:block;width:100%;height:398px;border-radius:10px;object-fit:cover;}
.s45-grades .grade{margin-top:25px;}
.s45-grades .grade h4{font-size:22px;font-weight:600;letter-spacing:-.44px;color:var(--c-text-alt);line-height:1.5;} /* [S45-40·10차] line-height 미지정(기본 normal≈26.4px) → 33px, 시안 Frame1650(792:6037) title 높이 33 확인 — h3 와 같은 유형의 재발(line-height 누락) */
.s45-grades .grade hr{width:100%;height:1px;margin:12px 0;background:var(--c-line-strong);border:0;}
.s45-grades .grade dl{display:flex;flex-direction:column;gap:12px;}
.s45-grades .grade dl > div{display:flex;align-items:center;gap:15px;}
.s45-grades .grade dt{display:flex;align-items:center;justify-content:center;width:70px;padding:0 4px;border-radius:30px;background:#edb629;color:#fff;font-size:18px;line-height:1.7;text-align:center;}
.s45-grades .grade dd{font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text);white-space:nowrap;}
.s45-grades{position:relative;}
.s45-grades li.has-badge{position:relative;}
.s45-badge{position:absolute;left:28px;top:25px;display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:35px;background:var(--c-pill-active);color:#fff;font-size:16px;letter-spacing:-.32px;} /* [S45-04] 노드 792:6097 x353/y2018 − 그리드(792:6096) 원점 x325/y1993 = left28/top25, li 원점과 동일 · [S45-08 4차] 색 --c-primary→--c-pill-active, 노드 792:6097 렌더 픽셀 샘플 rgb(100,35,184) 확정(GD-25 — instance 792:6040 스크린샷으로 좁힘) */
/* [3차 회차·S45-04 해소] 노드 792:6097(보험불가 칩) 메타데이터 직접 조회 완료 — x353/y2018 70×70,
   그리드 792:6096 원점 x325/y1993 대비 left28/top25. li:first-child 원점이 그리드 원점과 같아
   .has-badge li 기준 left28/top25 로 그대로 적용(재환산 없음). */

/* ── 부유방/milk-lines 이미지(s5_2 전용) ── */
.s5_2 .s45-body .blk {width: 1%; flex: 1 1 auto;}
.s5_2 .s45-body .milk{max-width: 389px; width: 100%;}
.s5_2 .s45-body .milk img{width:100%;height:auto;display:block;}
.s5_2 .arti01{position:relative; display: flex; gap: 188px; max-width: 1235px; width: 100%; margin: 0 auto;}

/* ── 양성종양 비교 카드(s5_3 전용, 792:7312/7313) — 문진표(줄+답) + 사진 ── */
.s45-qna{display:flex;flex-wrap:wrap;justify-content:left;align-items:flex-start;gap:190px;margin-top:60px;}
.s45-qna .col{width:528px;}
.s5_3 .arti01 {padding-bottom: 115px;}
.s5_3 .arti02 {padding: 110px 0 60px; background-color: #f6f6f6; max-width: 100%;}
.s5_3 .arti03 .s45-qna {align-items: flex-end;}
.s45-qna .col.wide{width:616px;}
.s45-qna .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;letter-spacing:-.4px;line-height:1.6;} /* [S45-03·G-14] 시안 렌더 실측 rgb(100,35,184)=--c-pill-active, --c-primary(남색) 아님 · [S45-41·11차] line-height 미지정 → 1.6(792:7194 h32/font20) */
.s45-qna .head br.mo {display: none;}
.s45-qna .list{display:flex;flex-direction:column;gap:12px;padding:20px;}
.s45-qna .list > div{position: relative; padding-left: 20px; padding-bottom:12px;border-bottom:1px solid var(--c-line);font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text);}
.s45-qna .list > div::before {position: absolute; content:''; width: 5px; height: 5px; border-radius: 50%; background-color: #1e1e1e; top: 12px; left: 0;}
.s45-qna .list > div:last-child{border-bottom:0;}
.s45-qna .foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:20px;}
.s45-qna .foot img{width:19px;height:18px;}
.s45-qna .foot p{font-size:20px;font-weight:700;letter-spacing:-.4px;line-height:1.6;color:#1B2D55;text-align:center; margin-top: 18px;}
.s45-qna .photo{position:relative;}
.s45-qna .photo img{display:block;width:100%;height:366px;border-radius:10px;object-fit:cover;}
.s45-qna .photo figcaption{margin-top:20px;font-size:14px;font-weight:500;letter-spacing:-.28px;color:var(--c-text-weak);line-height:1.57;} /* [S45-41·11차 전수 재확인] line-height 미지정 → 1.57(792:7218 h22/font14) */
.s45-anatomy{display:flex;justify-content:center;align-items:flex-end;gap:50px;margin-top:100px;} /* [S45-20] 792:7172 좌사진(y133,아래 정렬) + 우도해(y0) — gap = 580(도해x)-530(사진폭)=50 */
.s5_3 .s45-anatomy{margin-top:-36.97px;} /* [S45-29·10차 재확인] 이후 회차 수정으로 블록1 이 다시 조금 자라 anatomy.top 2055(목표2043, +12) — −24.97 에서 12 를 추가로 뺐다 */
.s45-anatomy picture:nth-child(1){display:block;width:530px;height:366px;}
.s45-anatomy picture:nth-child(1) img{width:100%;height:100%;object-fit:cover;}
.s45-anatomy picture:nth-child(2){display:block;width:498px;height:499px;}
.s45-anatomy picture:nth-child(2) img{width:100%;height:100%;object-fit:contain;}

/* ── 물결(전 페이지 공통 텍스처, top = page-header 722 + s45-quote 642 = 1364 고정) ── */
.s45-wave{position:absolute;left:0;top:0;width:100%;height:643px;overflow:hidden;z-index:-1;} /* [S45-38·10차 해소] 9차엔 opacity:.2+그라디언트 재현을 직접 만들려다 오히려 더 어두워졌다(22,36,64) — 이번엔 계산으로 재현하지 않고 `download_assets`(750:7948) 의 완성 렌더(export.png, 이미 텍스처+그라디언트 합성됨, 1920×643 원본 그대로) 를 새 자산(`images/sub/bg_s45_wave.jpg`)으로 받아 그대로 썼다. opacity 제거(이미 합성된 이미지라 필요 없음). 공용 `images/main/bg_sec202.*`(index.html 도 씀)는 참조를 끊었을 뿐 원본은 손대지 않았다 */
.s45-wave img{width:100%;height:100%;object-fit:cover;}
[class^="s4_"] .real-cont,[class^="s5_"] .real-cont{position:relative;padding:0 0 180px;}
[class^="s4_"] .s45-quote,[class^="s5_"] .s45-quote{position:relative;z-index:1;}

/* [2차 회차] 문서 높이 시안 대조 — 페이지별 하단 여백(footer 직전) 보정.
   1차 회차 재실측(Playwright, 1920 · reducedMotion) 결과 6장 전부 시안보다 짧았다(항상 부족 방향).
   본문 내부 블록(손모양·비교카드·Grade·문진표 등)은 이미 노드 실측 절대좌표로 배치했고,
   남은 차이는 각 페이지 하단 여백(quote2~footer 또는 마지막 본문~footer) 한 구간에 몰려 있음을
   재측정으로 확인 — 아래 값은 「시안 전체 높이 − 현재 렌더 높이」를 그 구간에 그대로 더한 값이다. */
/* [S45-18·6차] 5차에서 내가 추가로 뺀 만큼(S45-10 h3 +15/+45, S45-11 quote2 padding-top 증가분)만
   되돌린다 — 2차 회차 원래 기준값(509/245/604/366/758/447, 아래 주석 그대로) 자체는 이번 지적 대상이
   아니므로 임의로 공통 기본값(180)까지 되돌리지 않는다(그러면 새로운 추측치가 된다). `.blk ul` 폭
   수정으로 생긴 실제 키 변화만 §재측정에 반영해 남는 차이를 「미해소」로 적는다(다시 역산해 맞추지 않음). */
.s4_1 .real-cont{padding-bottom:359.68px;}  /* [S45-32·8차] 빈 .desc(margin-top:22px) 제거로 21.99 잔차가 사라져 검수 제시값 359.68 그대로 사용(역산 아님) */
.s4_2 .real-cont{padding-bottom:396px;}  /* [S45-30·8차] S45-30(li gap20·compare296) 반영 후 재측정, 잔여 +64 를 여기서 추가로 뺐다 — 세부 미분해분 남음(§미해소) */
.s4_3 .real-cont{padding-bottom:300px;}  /* [S45-22·7차] 604 − 45.81(검수 실측 시안 여백 대조) — S45-23(li 폭+br) 적용 후 유일하게 남은 차이 */
.s5_1 .real-cont{padding-bottom:273.88px;}  /* [S45-41·11차 재확인] .note line-height:1.6 추가로 +11, 그만큼 재조정 */
.s5_2 .real-cont{padding-bottom:336px;}  /* [S45-42·11차 재확인] li line-height 1.7 원복으로 −4, 그만큼 재조정(3.66 잔차는 미해소로 유지) */
.s5_3 .real-cont{padding-bottom:380.78px;}  /* [S45-43·11차 재확인] S45-43(qna col2) 반영 후 재측정, 시안 여백 379 에 근접(±2) */

.s4_3 .s45-wave {z-index: 0;}
.s4_3 .real-cont > .container {z-index: 1;}

.s4_3 .arti01 .figure-box {margin-top: 75px; display: flex; gap: 25px; flex-wrap: wrap;}
.s4_3 .arti01 .figure-box figure {width: 1%; flex: 0 0 calc(33.3333% - 17px);}
.s4_3 .arti01 .figure-box figure img {display: block; max-width: 100%; margin: 0 auto;}
.s4_3 .arti01 .figure-box figure figcaption {margin-top: 15px;	text-align: center;	font-size: 14px; color: #666; font-weight: 500; line-height: 1.6; letter-spacing: -.28px;}


/* ══════════════════════════════════════════════════════════════════════
   반응형 2단계 — D(s4+s5) · 퍼피-2 착수 (2026-09-24)
   [일하는 규칙 24 ㉱] 병렬 조각 전용 — 이 파일 안에서만. sub.css/responsive.css 는 건드리지 않는다.
   FIG-06 예외(새 요소 없는 반응형 재배치)만 사용 — 새 요소·새 아이콘·새 패널 제작 없음.
   1920 값은 위 원본 규칙 그대로 두고 여기서만 @media 로 덮는다(1920 회귀 방지).
   작성 폭 1024/768/480 표준 3단(공통 브리프 §4) — .s45-subhead@15~1108 뿌리부터. ══════════════════════════════════════ */

@media (max-width:1024px){
	/* 공통 뿌리 — .s45-subhead 고정폭 1093px 이 6장 전부 넘침의 원인(착수자료 §2) */
	.s45-subhead{width:100%;max-width:1093px;padding-top:80px;box-sizing:border-box;}
	.s45-quote .container{width:100%;max-width:1093px;padding-left:15px;padding-right:15px;box-sizing:border-box;}
	/* page-header .lede 고정폭(531/561px, S45-17) — 컨테이너 폭 안으로 */
	.s4_1 .page-header.type2 .lede,.s4_2 .page-header.type2 .lede,.s4_3 .page-header.type2 .lede,
	.s5_1 .page-header.type2 .lede,.s5_2 .page-header.type2 .lede,.s5_3 .page-header.type2 .lede{
		max-width:calc(100% - 60px);left:30px;right:30px;
	}
	/* s45-hands(s4_1) — 절대좌표 5분할 그룹(1225.68px) → flex 재배치. 새 요소 없음, 기존 li 5개 재배치만 */
	.s45-hands{position:static;width:100%;max-width:100%;height:auto;margin-top:60px;display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
	.s45-hands li{position:relative;left:auto!important;top:auto!important;width:calc(33.3333% - 16px);height:auto;aspect-ratio:381.89/185.32;}
	.s45-hands li span{left:50%!important;top:-24px;transform:translateX(-50%)!important;}
	/* s45-compare(s4_2) — 고정 gap 347px 세로 간격 → 가변 */
	.s45-compare{gap:60px 30px;margin-top:40px;}
	.s45-compare li{width:calc(50% - 15px);max-width:550px;height:auto;}
	.s45-compare li img{height:auto;aspect-ratio:550/276;}
	/* s45-grades(s5_1) — 4카드 고정폭 295px → 가변, 배지 위치는 li 기준 상대값이라 그대로 유지 */
	.s45-grades{flex-wrap:wrap;gap:30px 20px;margin-top:60px;}
	.s5_1 .s45-grades{margin-top:60px;}
	.s45-grades li{width:calc(50% - 10px);max-width:295px;}
	.s45-grades li img{height:auto;aspect-ratio:257/323;}
	/* s45-qna(s5_3) — 두 컬럼 고정폭(528/616px) → 세로 스택 */
	.s45-qna{flex-direction:column;align-items:center;margin-top:50px;}
	.s5_3 .s45-qna .col.wide{margin-top:30px;}
	.s45-qna .col,.s45-qna .col.wide{width:100%;max-width:528px;}
	.s45-qna .photo{width:100%;max-width:528px;}
	.s45-qna .photo img{height:auto;}
	/* s45-anatomy(s5_3) — 두 그림 고정폭(530/498) 나란히 → 가변 폭 유지 비율 */
	.s45-anatomy{flex-wrap:wrap;gap:30px;margin-top:60px;}
	.s5_3 .s45-anatomy{margin-top:30px;}
	.s45-anatomy picture:nth-child(1){width:calc(50% - 15px);height:auto;aspect-ratio:530/366;}
	.s45-anatomy picture:nth-child(2){width:calc(50% - 15px);height:auto;aspect-ratio:498/499;}
	/* milk(s5_2) — 절대배치 우측 이미지(389px) → 본문 뒤 블록으로 재배치(같은 figure, 새 요소 아님) */
	.s45-body .milk{position:static;width:100%;max-width:389px;margin:24px auto 0;}
	/* .blk ul 개별 고정 max-width들(§S45-18 이하) — 컨테이너 폭 안으로 */
	.s4_1 .arti01.s45-body .blk:nth-of-type(1) ul,
	.s4_1 .arti01.s45-body .blk:nth-of-type(2) ul,
	.s4_2 .arti01.s45-body .blk ul,
	.s4_3 .arti01.s45-body .blk ul,
	.s5_1 .arti01.s45-body .blk ul,
	.s5_2 .arti01.s45-body .blk ul,
	.s5_3 .arti01.s45-body .blk ul{max-width:100%!important;}
	.s4_2 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(1),
	.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(1),
	.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(2),
	.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(3),
	.s5_3 .arti01.s45-body .blk:nth-of-type(1) ul li:nth-child(4){max-width:100%!important;}
	
	.s45-compare li span {bottom: -17px;}
}

@media (max-width:768px){
	.s45-subhead{padding-top:56px;}
	.s45-subhead p{font-size:26px;}
	.s45-quote .container{gap:40px;padding-top:60px;}
	.s45-quote .lead{font-size:26px;}
	.s45-hands li{width:calc(50% - 12px);}
	.s45-compare{gap:40px 20px;}
	.s45-compare li{width:100%;max-width:550px;}
	.s45-grades li{width:calc(50% - 10px);}
	.s45-anatomy picture:nth-child(1),.s45-anatomy picture:nth-child(2){width:100%;max-width:400px;}
	
	.s4_3 .arti01 .figure-box {gap: 20px;}
	.s4_3 .arti01 .figure-box figure {flex: 0 0 calc(50% - 10px);}
}

@media (max-width:480px){
	.s45-subhead{padding-top:44px;}
	.s45-subhead p{font-size:22px;}
	.s45-subhead .tick{margin-top:28px;}
	.s45-quote{height:auto;padding:44px 0;}
	.s45-quote .container{width:100%;padding-top:0;gap:28px;}
	.s45-quote .lead{font-size:22px;line-height:1.4;}
	.s45-quote .desc{font-size:16px;}
	.s45-hands{gap:16px;}
	.s45-hands li{width:100%;max-width:280px;}
	.s45-compare li{max-width:100%;}
	.s45-grades li{width:100%;max-width:295px;}
	.s45-grades{gap:24px;}
	.s45-qna .photo,.s45-qna .col,.s45-qna .col.wide{max-width:100%;}
	.s45-anatomy{flex-direction:column;align-items:center;}
	.s45-anatomy picture:nth-child(1),.s45-anatomy picture:nth-child(2){width:100%;max-width:300px;}
	.s45-quote2 .mark{font-size:90px;}
	.s45-quote2 .lead{font-size:22px;}
	
	.s4_3 .arti01 .figure-box figure {flex: 100%}
}

/* 인용 배너 제목 색 — 시안 750:7945 등 h2 흰색 rgb(255,255,255).
   공통 `.s-title h2{color:var(--c-text-alt)}` 의 명시 선언이 배너의 흰색 상속을 덮어
   남색 배경 위에 #1e1e1e 로 렌더되고 있었다(6장 전수).
   eyebrow 는 상속이 살아 이미 시안값 rgb(237,182,41) 로 맞았다. */
.s45-quote .s-title h2{color:#fff;}

@media (max-width: 1600px){
	.s4_1 .page-header h1,
	.s4_2 .page-header h1,
	.s4_3 .page-header h1,
	.s5_1 .page-header h1,
	.s5_2 .page-header h1,
	.s5_3 .page-header h1 {position: relative; top: initial; left: initial;}
	
	.s4_1 .page-header .lede,
	.s4_2 .page-header .lede,
	.s4_3 .page-header .lede,
	.s5_1 .page-header .lede,
	.s5_2 .page-header .lede,
	.s5_3 .page-header .lede {position: relative !important; top: initial; left: initial !important; right: 0 !important;}
}

@media (max-width: 1024px){
	.s45-body .blk h3 {font-size: 26px;}
	.s5_2 .arti01 {gap: 50px;}
}

@media (max-width: 768px){
	.s45-body .blk h3 {font-size: 20px;}
	.s45-hands {gap: 40px 24px;}
	.s4_1 .s45-quote2 {padding-top: 100px;}
	.s4_1 .real-cont {padding-bottom: 100px;}
	.s4_2 .real-cont {padding-bottom: 100px;}
	.s4_3 .real-cont {padding-bottom: 100px;}
	.s45-subhead p br {display: none;}
	.s5_1 .s45-quote2 {padding-top: 100px;}
	.s5_1 .real-cont {padding-bottom: 100px;}
	.s5_2 .real-cont {padding-bottom: 100px;}
	.s5_3 .real-cont {padding-bottom: 100px;}
	.s5_2 .arti01 {flex-wrap: wrap;}
	.s5_2 .s45-body .blk {width: 100%;}
	.s5_2 .s45-quote2 {padding-top: 100px;}
	.s45-quote2 .lead {font-size: 26px;}
	.s5_3 .s45-quote2 {padding-top: 100px;}
	
}

@media (max-width: 480px){
	.s45-body .blk h3 {font-size: 18px;}
	.s45-body .blk ul li {font-size: 16px;}
	.s45-body .blk ul li br {display: none;}
	.s45-quote2 .mark {margin-bottom: -40px;}
	.s45-body .note {font-size: 18px; padding: 0; padding-left: 15px;}
	.s45-quote2 .lead {font-size: 22px;}
	.s45-quote2 .lead br {display: none;}
	.s45-qna .head {font-size: 18px; height: 60px; text-align: center;}
	.s45-qna .list > div {font-size: 16px; padding-bottom: 8px;}
	.s45-qna .foot p {font-size: 18px;}
	.s45-qna .foot p br {display: none;}
	.s45-qna .head br.mo {display: block;} 
}