@charset "utf-8";
/*
 * surgery.css — 외과센터 재디자인 3페이지(surgerytechniques/neuro-orthopedics/general-surgery) 전용 컴포넌트
 * 2026-08-12 staging 검수 통과 후 승격. 페이지에서 $SURGERY_CSS=true 설정 시 top.html이 로드.
 * 기존 디자인 시스템 토큰 준수: 1rem = 1px(base.css font-size:6.25%), 강조색 var(--color-point,#fe8451)
 * 신규 3종: 스티키 점프내비(스크롤스파이) / 히어로 pill-tab / FAQ 아코디언
 * 프로덕션 content.css를 건드리지 않기 위해 staging 페이지에서만 로드.
 */

/* ============ 공통 ============ */
.stg-inr{max-width:1200rem; margin:0 auto; padding:0 20rem; box-sizing:border-box;}

/* (히어로 pill-tab은 기존 디자인 시스템의 .snb 컴포넌트를 그대로 사용 — 커스텀 스타일 제거) */

/* ============ 스티키 점프내비 + 스크롤스파이 ============ */
.jumpnav{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #eee;
}
.jumpnav ul{
  display:flex; justify-content:center; flex-wrap:wrap;
  max-width:1200rem; margin:0 auto; padding:0 20rem; box-sizing:border-box;
}
.jumpnav li{flex:0 0 auto;}
.jumpnav a{
  display:flex; align-items:center; gap:7rem;
  padding:20rem 18rem; font-size:16rem; font-weight:600; color:#9a9a9a;
  border-bottom:2rem solid transparent; transition:color .2s,border-color .2s;
}
.jumpnav a .num{font-size:14rem; font-weight:800; color:#d0d0d0; transition:color .2s;}
.jumpnav a:hover{color:#444;}
.jumpnav a:hover .num{color:var(--color-point,#fe8451);}
.jumpnav a.active{color:var(--color-point,#fe8451); border-bottom-color:var(--color-point,#fe8451);}
.jumpnav a.active .num{color:var(--color-point,#fe8451);}

/* 앵커 스크롤 시 sticky 높이만큼 오프셋 */
.stg-section{scroll-margin-top:78rem;}

@media (max-width:768px){
  .jumpnav ul{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch;}
  .jumpnav ul::-webkit-scrollbar{display:none;}
  .jumpnav a{padding:15rem 12rem; font-size:14rem; white-space:nowrap;}
  .stg-section{scroll-margin-top:60rem;}
  .pill-tab a{font-size:14rem; padding:9rem 18rem;}
}

/* ============ 3) FAQ 아코디언 (details/summary) — 원안: 질문별 화이트 카드 + 오렌지 셰브런 ============ */
/* 본문 섹션 패널(.list__wrap max-width:1200rem)과 동일 폭 */
.faq-list{max-width:1200rem; margin:0 auto; display:flex; flex-direction:column; gap:12rem;}
.faq-list details{
  background:#fff; border:1px solid #ececec; border-radius:16rem; overflow:hidden;
}
.faq-list summary{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center; gap:14rem;
  padding:22rem 54rem 22rem 24rem; font-size:17rem; font-weight:700; color:#1a1a1a;
}
.faq-list summary:hover{background:#fafafa;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary .q{display:none;}
.faq-list summary .chev{
  position:absolute; right:26rem; top:50%; width:12rem; height:12rem;
  margin-top:-8rem; border-right:2rem solid var(--color-point,#fe8451); border-bottom:2rem solid var(--color-point,#fe8451);
  transform:rotate(45deg); transition:transform .25s;
}
.faq-list details[open] summary .chev{transform:rotate(-135deg); margin-top:-2rem;}
.faq-list .faq-a{
  padding:0 24rem 24rem; font-size:15rem; line-height:1.8; color:#54615e;
  text-align:left; word-break:keep-all;
}
.faq-list summary{text-align:left;}
@media (max-width:768px){
  .faq-list summary{font-size:15rem; padding:18rem 44rem 18rem 16rem;}
  .faq-list summary .chev{right:18rem;}
  .faq-list .faq-a{font-size:14rem; padding:0 16rem 18rem;}
}

/* ============ 섹션 앵커 래퍼 (점프내비 대상) ============ */
.stg-section{padding:14rem 0;}

/* ============ 점프내비 ↔ 본문 간 여백 (staging 전용) ============
 * 스티키 점프내비 바로 아래 섹션 제목(sub-tit__line)/첫 카드가 붙어 답답해 보이는 문제 보정. */
.surgery-part{padding-top:64rem !important;}
.surgery-part .sub-tit__line{margin:0 0 44rem !important;}
@media (max-width:768px){
  .surgery-part{padding-top:38rem !important;}
  .surgery-part .sub-tit__line{margin:0 0 26rem !important;}
}

/* ============ 아코디언 → 항상 열린 단일 컬럼 스택 (staging 전용) ============
 * 기존 content.css의 아코디언은 flex/그리드 2열 + 고정높이(880rem/400rem) + 내부 스크롤 구조라
 * "모든 섹션 열림 + 점프내비" 배치에서 모바일 2열 미접힘/내용 잘림이 발생.
 * staging에서는 전 섹션을 세로 스택·자동 높이·내부 스크롤 제거로 강제(디자이너 원본 구성에도 충실). */
.surgery-part .h-accordion-list{
  display:block !important; margin:0 !important; padding:0 !important; gap:0 !important;
}
.surgery-part .h-accordion-list > .list__wrap{
  display:block !important; float:none !important; flex:none !important;
  width:100% !important; max-width:1200rem !important; height:auto !important; min-height:0 !important;
  margin:0 auto 24rem !important; position:relative !important; left:auto !important; top:auto !important;
  background:#fff !important; background-image:none !important;
  border:1px solid #ececec !important; border-radius:20rem !important; overflow:hidden !important;
  box-shadow:0 2rem 14rem rgba(0,0,0,.04) !important; transition:none !important;
}
/* 접힌 헤더(list--off)는 항상 열림이므로 숨김 */
.surgery-part .h-accordion-list > .list__wrap .list--off{display:none !important;}
/* 펼침 영역 항상 표시 */
.surgery-part .h-accordion-list > .list__wrap .list--on{
  display:block !important; opacity:1 !important; position:relative !important; height:auto !important;
}
.surgery-part .h-accordion-list > .list__wrap.on{height:auto !important;}
/* 섹션 타이틀바 */
.surgery-part .h-accordion-list > .list__wrap .list--on .list__title{
  height:auto !important; padding:26rem 30rem !important; border-bottom:1px solid #f0f0f0 !important;
  display:flex !important; align-items:baseline !important; flex-wrap:wrap !important; gap:6rem 10rem !important;
}
/* 콘텐츠 영역: 고정높이/스크롤 제거 */
.surgery-part .h-accordion-list > .list__wrap .list--on .list__cont{height:auto !important;}
.surgery-part .h-accordion-list > .list__wrap .list--on .list__cont .box-scroll{
  height:auto !important; max-height:none !important; overflow:visible !important;
  margin:0 !important; padding:30rem !important;
}
.surgery-part .h-accordion-list > .list__wrap .list--on .list__cont .box-scroll .wrap{height:auto !important;}
@media (max-width:768px){
  .surgery-part .h-accordion-list > .list__wrap{margin-bottom:16rem !important;}
  .surgery-part .h-accordion-list > .list__wrap .list--on .list__title{padding:20rem !important;}
  .surgery-part .h-accordion-list > .list__wrap .list--on .list__cont .box-scroll{padding:20rem !important;}
}

/* ============ 2026-08-11 검수 피드백 ============ */
/* 2) 인트로 문단의 강조(<i>) 볼드 해제 — content.css:471 기본값이 font-weight:500
 *    · 전 문단: 굵기만 해제(오렌지 색상은 유지)
 *    · 첫 문단: 색상까지 검정으로 */
.surgery-page .cont-tit .cont > span > i{font-weight:400;}
.surgery-page .cont-tit .cont > span:first-child > i{color:#222;}


/* ============ 디자이너 시안 충실화 (2026-08-06 클라이언트 검수 피드백) ============
 * 원안(.dc.html) 대비 밋밋했던 부분 보강: 오렌지 소제목 / 웜톤 캡슐 pill /
 * 이미지 카드 프레임 / 카드형 질환 블록. 원안 오렌지 #EE7B4E ≈ 사이트 토큰 --color-point. */

/* 본문 문단: 원안의 행간/톤/최대폭 (16px/1.8, #3C4A47, max 860) */
.surgery-part .box-scroll .wrap > .txt > p{font-size:16rem; line-height:1.8; color:#3c4a47;}

/* 섹션 소제목(오렌지): sub04 .box>h3, h3 단독 .txt 블록(스텐트 시술 적용 등)
 * 프로즈 내부 h3(FHNO/THR 등)는 원안대로 다크 → content.css 기본(17rem bold #333) 유지
 * content.css 1590(.h-accordion-list > .list__wrap.on ... .txt > h3, 특이도 0,6,1)보다 높게 유지 */
.surgery-part .box > h3,
.surgery-part .h-accordion-list .list--on .list__cont .wrap > .txt > h3:only-child{
  display:block; margin:32rem 0 16rem; font-size:19rem; font-weight:800;
  color:var(--color-point,#fe8451); line-height:1.35em; word-break:keep-all;
}
.surgery-part .box{margin-top:36rem;}
.surgery-part .box > h3:first-child{margin-top:0;}

/* 질환/시술 카드 블록(sub04/sub05): h3로 시작하고 p가 있는 .txt만 보더 카드로 */
.surgery-page.sub05 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p),
.surgery-page.sub04 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p){
  border:1px solid #eee; border-radius:16rem; padding:22rem 24rem; box-sizing:border-box;
}
.surgery-page.sub05 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p) > h3,
.surgery-page.sub04 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p) > h3{
  margin:0 0 8rem; font-size:17rem; font-weight:800; color:#1a1a1a; line-height:1.4em; word-break:keep-all;
}
.surgery-page.sub05 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p) > p,
.surgery-page.sub04 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p) > p{
  margin:0; font-size:15rem; line-height:1.7; color:#54615e; max-width:none;
}

/* ---- case-list 공통: 프로덕션 회색 박스/사이드바 폭(187rem) 해제 ---- */
.surgery-part .wrap .case-list.list-txt{
  width:100% !important; margin:14rem 0 24rem !important; padding:0 !important;
  background:transparent !important; border:none !important; border-radius:0 !important;
}

/* 번호형 case-list 기본: 원안 스택형 행 카드(솔리드 오렌지 배지) */
.surgery-part .wrap .case-list.list-txt[data-list="number"]{
  display:flex; flex-direction:column; gap:12rem;
}
.surgery-part .wrap .case-list.list-txt[data-list="number"] > li{
  display:flex !important; gap:16rem; align-items:flex-start; margin:0 !important; box-sizing:border-box;
  background:#fafafa; border:1px solid #eee; border-radius:16rem; padding:20rem 22rem;
}
.surgery-part .wrap .case-list.list-txt[data-list="number"] > li > i{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:auto; margin:2rem 0 0; padding:4rem 10rem; border-radius:8rem;
  background:var(--color-point,#fe8451); color:#fff;
  font-size:13rem; font-weight:800; line-height:1.4em;
}
.surgery-part .wrap .case-list.list-txt[data-list="number"] > li > span{
  display:block; flex:1 1 auto; width:auto; font-size:15rem; line-height:1.7; color:#5a6663; word-break:keep-all;
}
.surgery-part .wrap .case-list.list-txt[data-list="number"] > li > span > i.text-point02{
  display:block; margin:0 0 5rem; font-size:16rem; font-weight:800; color:#1a1a1a; line-height:1.4em;
}
.surgery-part .wrap .case-list.list-txt[data-list="number"] > li > span > i.text-point02 + br{display:none;}

/* 스텐트 시술 적용(sub05 중재시술 섹션)만: 원안 3열 카드 + 라이트 칩 */
.surgery-page.sub05 .list__wrap01 .case-list.list-txt[data-list="number"]{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240rem, 1fr)); gap:14rem;
}
.surgery-page.sub05 .list__wrap01 .case-list.list-txt[data-list="number"] > li{
  display:block !important; background:#fff; padding:26rem 24rem;
}
.surgery-page.sub05 .list__wrap01 .case-list.list-txt[data-list="number"] > li > i{
  width:44rem; height:44rem; margin:0 0 14rem; padding:0; border-radius:12rem;
  background:#fdf0e7; color:var(--color-point,#fe8451); line-height:1em;
}
.surgery-page.sub05 .list__wrap01 .case-list.list-txt[data-list="number"] > li > span > i.text-point02{
  margin:0 0 8rem; font-size:17rem;
}

/* 도트형 case-list: 원안 오렌지 도트 리스트(박스 없음) */

.surgery-part .wrap .case-list.list-txt[data-list="dot"] > li{margin:0 0 8rem !important; padding-left:20rem;}
.surgery-part .wrap .case-list.list-txt[data-list="dot"] > li:before{
  top:11rem; width:5rem; height:5rem; background:var(--color-point,#fe8451);
}
.surgery-part .wrap .case-list.list-txt[data-list="dot"] > li > span{
  font-size:15rem; line-height:1.7; color:#3c4a47;
}
.surgery-part .wrap .case-list.list-txt[data-list="dot"] > li > span > i.text-point02{
  color:#1a1a1a; font-weight:700;
}

/* pill 태그: 원안 웜톤 캡슐 (#FDF3EC / #F6DFCE) */
.surgery-part .list-tag{gap:10rem; width:100%;}
.surgery-part .list-tag > li{
  padding:9rem 18rem; background:#fdf3ec; border:1px solid #f6dfce; border-radius:999rem;
  font-size:15rem; font-weight:600; color:#3c4a47; line-height:1.2em;
}

/* 이미지 리스트: 카드 프레임 + 중앙 정렬 + 캡션 (sub0102는 content.css 전용 스타일 유지) */
.surgery-page.sub04 .list-img[data-grid],
.surgery-page.sub05 .list-img[data-grid]{gap:14rem; margin-top:18rem;}
.surgery-page.sub04 .list-img[data-grid] > li .img,
.surgery-page.sub05 .list-img[data-grid] > li .img{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; padding:0; box-sizing:border-box;
  background:#fff; border:1px solid #eee; border-radius:14rem; overflow:hidden;
}
/* 기본: 실사/방사선 케이스컷 → 프레임 꽉 채움 (원안 object-fit:cover)
 * 아래 예외들은 디자이너 원안(.dc.html)의 이미지별 지정을 1:1로 옮긴 것. */
.surgery-page.sub04 .list-img[data-grid] > li .img img,
.surgery-page.sub05 .list-img[data-grid] > li .img img{
  width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; display:block;
}

/* 예외 A) 잘리면 안 되는 조합컷(골절 등): 폭에 맞추고 세로는 자연 비율(레터박스) */
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="fracture"]{
  width:100%; height:auto; object-fit:contain;
}
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="fracture02"],
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="fracture03"]{width:90%;}

/* 예외 B) 도해/일러스트: 프레임 안에 전체가 보이게 contain */
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="neurological01"]{object-fit:contain;}
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="patellar03"]{
  width:85%; height:85%; object-fit:contain;
}

/* 예외 C) 수료증/상장: 카드를 거의 꽉 채우되 잘리지 않게(원안 pad 6~16px + contain) */
.surgery-page.sub04 .list-img[data-grid] > li .img:has(img[src*="hip01"]),
.surgery-page.sub04 .list-img[data-grid] > li .img:has(img[src*="hip02"]){padding:6rem;}
.surgery-page.sub04 .list-img[data-grid] > li .img:has(img[src*="certi"]){padding:16rem;}
/* sub0102 tplo 카드는 content.css가 padding-bottom:100%로 비율을 잡고 있어 padding을 덮으면 카드가 붕괴됨 → 건드리지 않음 */
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="hip01"],
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="hip02"],
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="certi"]{
  width:auto; height:100%; max-width:100%; max-height:100%; object-fit:contain;
}

/* sub0102: content.css가 width/height 100%만 주고 object-fit이 없어 이미지가 늘어남(3dprinting 19% 가로 확대).
 * 원안은 object-fit:cover → 비율 유지 크롭. wrap04(TPLO 비교)는 width:auto라 영향 없음. */
.surgery-page.sub0102 .list-img > li .img img{object-fit:cover;}

/* 중재시술(sub05 01): 원안은 두 컷을 1열 스택 + 높이 상한 */
.surgery-page.sub05 .list__wrap01 .list-img[data-grid]{grid-template-columns:1fr; gap:28rem;}
.surgery-page.sub05 .list__wrap01 .list-img[data-grid] > li .img img[src*="interventional01"]{
  width:auto; max-width:100%; max-height:534rem; margin:0 auto;
}

/* 일반외과 전후 방사선: 원안 높이 상한 300px + 가운데 정렬 */
.surgery-page.sub05 .list-img[data-grid] > li .img img[src*="general0"]{
  width:auto; max-width:100%; max-height:300rem; margin:0 auto;
}

/* 예외 2) 전후 비교 와이드컷/제품컷: 원본 비율 그대로 (원안 height:auto) */
.surgery-page.sub05 .list-img[data-grid] > li .img:has(img[src*="interventional"]),
.surgery-page.sub05 .list-img[data-grid] > li .img:has(img[src*="general0"]),
.surgery-page.sub04 .list-img[data-grid] > li .img:has(img[src*="hip03"]),
.surgery-page.sub04 .list-img[data-grid] > li .img:has(img[src*="hip04"]){
  aspect-ratio:auto; padding:28rem 20rem;
}
.surgery-page.sub05 .list-img[data-grid] > li .img img[src*="interventional"],
.surgery-page.sub05 .list-img[data-grid] > li .img img[src*="general0"],
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="hip03"],
.surgery-page.sub04 .list-img[data-grid] > li .img img[src*="hip04"]{
  width:100%; height:auto; object-fit:unset;
}
.surgery-page.sub04 .list-img[data-grid] > li .txt,
.surgery-page.sub05 .list-img[data-grid] > li .txt{
  margin:12rem 0 0; font-size:16rem; font-weight:700; color:#1a1a1a;
  text-align:center; line-height:1.4em; word-break:keep-all;
}

/* icon-list(sub0102): 가로 행 스택 → 원안 아이콘 카드 그리드 */
.surgery-page.sub0102 .h-accordion-list .icon-list{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240rem, 1fr)); gap:14rem;
  margin:24rem 0; border:none; border-radius:0;
}
.surgery-page.sub0102 .h-accordion-list .icon-list > li{
  display:block; padding:26rem 20rem; text-align:center; box-sizing:border-box;
  background:#fafafa; border:1px solid #eee; border-radius:16rem;
}
.surgery-page.sub0102 .h-accordion-list .icon-list > li .icon{margin:0 auto 14rem;}
.surgery-page.sub0102 .h-accordion-list .icon-list > li .icon img{height:70rem;}
.surgery-page.sub0102 .h-accordion-list .icon-list > li .txt > h3{
  margin:0 0 6rem; font-size:17rem; font-weight:800; color:#1a1a1a; line-height:1.4em; word-break:keep-all;
}
.surgery-page.sub0102 .h-accordion-list .icon-list > li .txt > span{
  display:block; font-size:15rem; line-height:1.7; color:#54615e; word-break:keep-all;
}
@media (max-width:768px){
  .surgery-page.sub0102 .h-accordion-list .icon-list{gap:10rem; margin:18rem 0;}
  .surgery-page.sub0102 .h-accordion-list .icon-list > li{padding:20rem 16rem;}
}

/* 각주(.reference): 회색 박스 제거 → 본문 아래 조용한 안내 캡션 */
.surgery-part .reference{justify-content:flex-start; margin:14rem 0 0;}
.surgery-part .reference em{
  padding:0; background:none; border:none;
  font-size:13rem; font-weight:400; color:#8a8a8a; line-height:1.6em;
  text-align:left; word-break:keep-all;
}
/* 사진출처 표기: 아주 작은 회색 캡션 + 링크 밑줄.
 * base.css의 'Outfit','Pretendard' 순서 때문에 한글(Pretendard)/영문(Outfit)이
 * 서로 다른 굵기로 렌더돼 색이 달라 보임 → 한 줄 전체를 Pretendard로 통일. */
.surgery-part .reference:has(a) em,
.surgery-part .reference:has(a) em > a{
  font-family:'Pretendard','맑은 고딕',Dotum,Sans-serif;
  font-size:11rem; color:#9aa19d; letter-spacing:0;
}
/* 밑줄이 있으면 URL만 시각적으로 무거워져 한글 앞부분과 색이 달라 보임 → 평소엔 밑줄 없이,
 * 링크임은 hover로 표시. */
.surgery-part .reference:has(a) em > a{text-decoration:none;}
.surgery-part .reference:has(a) em > a:hover{text-decoration:underline; text-underline-offset:2rem;}

/* 유튜브 CTA: 원안 오렌지 풀폭 버튼(radius 14) */
.surgery-part .btn-youtube{background:var(--color-point,#fe8451) !important; border-radius:14rem !important;}
.surgery-part .btn-youtube:hover{background:#ee7b4e !important;}

/* 관절경 케이스 강아지 실루엣: 원본 154px JPG를 potrace 벡터화한 SVG 사용(무한 확대 가능).
 * 카드 높이를 낮추고 실루엣을 크게 배치해도 화질 저하 없음. */
.surgery-page.sub04 .list__wrap01 .list-img[data-grid] > li .img:has(img[src*="arthroscope-case"]){
  aspect-ratio:16/9; padding:20rem;
}
.surgery-page.sub04 .list__wrap01 .list-img[data-grid] > li .img img[src*="arthroscope-case"]{
  width:auto; height:100%; max-height:100%; max-width:70%; object-fit:contain;
}

/* advantage 카드: 원안 웜 그레이 카드(#FAFAFA, radius 16) */
.surgery-part .advantage-list > li{
  background:#fafafa; border:1px solid #eee; border-radius:16rem; padding:24rem 20rem;
}

@media (max-width:768px){
  .surgery-part .box > h3,
  .surgery-part .h-accordion-list .list--on .list__cont .wrap > .txt > h3:only-child{font-size:17rem; margin:24rem 0 12rem;}
  .surgery-part .box{margin-top:26rem;}
  .surgery-part .list-tag > li{padding:7rem 14rem; font-size:13rem;}
  .surgery-page.sub04 .list-img[data-grid],
  .surgery-page.sub05 .list-img[data-grid]{gap:10rem; grid-template-columns:1fr;}
  .surgery-page.sub04 .list-img[data-grid] > li .txt,
  .surgery-page.sub05 .list-img[data-grid] > li .txt{font-size:14rem;}
  .surgery-page.sub05 .list-img[data-grid] > li .img:has(img[src*="interventional"]),
  .surgery-page.sub05 .list-img[data-grid] > li .img:has(img[src*="general0"]),
  .surgery-page.sub04 .list-img[data-grid] > li .img:has(img[src*="hip03"]),
  .surgery-page.sub04 .list-img[data-grid] > li .img:has(img[src*="hip04"]){padding:16rem 12rem;}
  .surgery-page.sub05 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p),
  .surgery-page.sub04 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p){padding:18rem;}
  .surgery-part .wrap .case-list.list-txt[data-list="number"]{gap:10rem;}
  .surgery-part .wrap .case-list.list-txt[data-list="number"] > li{padding:16rem;}
  .surgery-page.sub05 .list__wrap01 .case-list.list-txt[data-list="number"]{grid-template-columns:1fr;}
  .surgery-page.sub05 .list__wrap01 .case-list.list-txt[data-list="number"] > li{padding:18rem 16rem;}
  .surgery-page.sub05 .list__wrap01 .case-list.list-txt[data-list="number"] > li > i{
    width:36rem; height:36rem; margin:0 0 10rem;
  }

  /* 모바일 본문 텍스트는 사이트 관례(14rem)에 맞춤 — content.css의 다른 페이지 모바일 오버라이드와 동일 */
  .surgery-part .wrap .case-list.list-txt[data-list="number"] > li > span,
  .surgery-part .wrap .case-list.list-txt[data-list="dot"] > li > span{font-size:14rem;}
  .surgery-part .wrap .case-list.list-txt[data-list="number"] > li > span > i.text-point02,
  .surgery-page.sub05 .list__wrap01 .case-list.list-txt[data-list="number"] > li > span > i.text-point02{font-size:15rem;}
  .surgery-part .list-tag > li{font-size:14rem;}
  .surgery-page.sub05 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p) > h3,
  .surgery-page.sub04 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p) > h3{font-size:15rem;}
  .surgery-page.sub05 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p) > p,
  .surgery-page.sub04 .box-scroll .wrap > .txt:has(> h3:first-child):has(> p) > p{font-size:14rem;}
  .surgery-part .advantage-list > li .txt > span,
  .surgery-page.sub0102 .h-accordion-list .icon-list > li .txt > span{font-size:14rem;}

  /* 데스크톱 기준으로 넣은 <br>은 모바일 좁은 폭에서 어색하게 끊김 → 숨김.
   * content.css가 여러 페이지에서 쓰는 관례(.box-txt > p br, .cont-tit > span br 등)와 동일. */
  .surgery-part .box-scroll .wrap .txt > p br,
  .surgery-part .box-scroll .wrap .txt > span br,
  .surgery-part .case-list.list-txt > li > span br{display:none;}
}