/* ════════════════════════════════════════════════════════════════════
   위비앙병원 서브페이지 표준 디자인 시스템  (WBN Premium Sub-Page System)
   ────────────────────────────────────────────────────────────────────
   · 색·폰트는 메인(site.css :root)을 그대로 상속 → 룩앤필 100% 일치
   · 아래 [공통선언문]의 토큰 값만 바꾸면 37개 서브페이지가 한 번에 변경됨
   · 새 페이지는 _template.html을 복사해 블록을 골라 텍스트/이미지만 교체
   ════════════════════════════════════════════════════════════════════ */

/* ───────── [공통선언문] 서브페이지 전역 토큰 (여기만 고치면 일괄 적용) ───────── */
:root{
  /* 타이포 스케일 (메인 디자인 결과 동일) */
  --fs-h1:clamp(41px,4.93vw,61.5px);  /* 페이지 대제목 */
  --fs-h2:clamp(34.5px,3.36vw,47.5px);/* 섹션 대제목 (메인과 통일) */
  --fs-h3:22.5px;                      /* 카드/소제목 */
  --fs-body:20px;                  /* 본문 */
  --fs-small:17.5px;                 /* 보조 텍스트 */
  --fs-eyebrow:14.5px;                 /* 영문 라벨 */
  --ls-eyebrow:.15em;                /* 영문 라벨 자간 */
  /* 레이아웃 */
  --sub-wrap:1180px;
  --sp-block:clamp(44px,4.5vw,66px);  /* 섹션 상하 여백 (2026-08-09 수정⑨: 여백 축소) */
  /* 모서리 / 그림자 / 모션  (모서리는 site.css :root의 --radius 표준을 따름) */
  --r-card:var(--radius);
  --r-img:var(--radius);
  --sh-card:0 4px 20px rgba(13,59,44,.04);
  --sh-card-h:0 16px 40px rgba(13,59,44,.10);
  --sh-img:0 24px 52px rgba(13,59,44,.14);
  --ease:cubic-bezier(.165,.84,.44,1);
}

/* 메뉴 항목 링크가 일반 텍스트처럼 보이도록 */
.mega .col li a,nav>ul>li a{color:inherit;text-decoration:none;}

/* 서브페이지 공통 본문 폭 / 섹션 여백 */
.sub-wrap{width:var(--sub-wrap);max-width:calc(100% - 48px);margin:0 auto;}
/* 우측 플로팅 바와 겹치지 않도록 (2026-08-09) */
@media(min-width:981px){.sub-wrap{max-width:calc(100% - 200px);}}
section.subblk{padding:var(--sp-block) 0;}
.subblk + .subblk{border-top:1px solid var(--line);}

/* ───────── 공통 섹션 헤더 (영문 eyebrow + 한글 대제목 + 가는 구분선) ───────── */
.subblk .sec-head{margin-bottom:38px;}
.subblk .sec-head .bar{display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);color:var(--g700);text-transform:uppercase;margin-bottom:14px;}
.subblk .sec-head h2{font-size:var(--fs-h2);font-weight:800;color:var(--g900);letter-spacing:-.025em;line-height:1.25;word-break:keep-all;}
.subblk .sec-head h2::after{display:none;}
.subblk .sec-head .desc{font-size:var(--fs-body);color:var(--muted);margin-top:26px;line-height:1.7;word-break:keep-all;}
/* 가운데 정렬형(카드 섹션 등)은 구분선·요소도 가운데로 */
.sub-cards .sec-head,.sub-list .sec-head,.sub-stats .sec-head{text-align:center;}
.sub-cards .sec-head h2::after,.sub-list .sec-head h2::after{margin-left:auto;margin-right:auto;}

/* ───────── ① 페이지 히어로 + 브레드크럼 ───────── */
/* ★2026-09-21 대문 높이도 하나로 — 실측 342~564px로 제각각이었다(글 양에 따라 늘어나는 구조).
   최소 높이를 516px(좁은 화면 600px)로 올려 46개 중 45개가 똑같은 높이가 된다.
   남은 1개(비만 클리닉)는 대문 안에 「치료 범위 띠」가 하나 더 있어 구조가 다른 화면이다. */
.subhero{position:relative;background:var(--g900);color:#fff;overflow:hidden;padding:104px 0 58px;min-height:516px;display:flex;align-items:center;}
.subhero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 85% 0,rgba(46,155,110,.34),transparent 60%);}
/* 배경 사진을 깔 때: <div class="subhero-bg" style="background-image:url(...)"></div> + .has-bg */
.subhero.has-bg .subhero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
/* 2026-09-26 위비앙 소식 대문: 이홍찬 원장 사진(common-3)으로 통일. 가운데 기준이면 넓은 화면에서
   머리가 잘려 기준점을 위쪽 25%로 올린다. 모바일은 글자가 폭 전체라 얼굴만 오른쪽(30%)으로. */
.subhero.has-bg .subhero-bg.bg-face{background-position:30% 25%;}
/* PC(861px↑)는 사진 가로폭이 화면과 같아 위치값으로 좌우 이동이 안 된다(이동 여유 0).
   사진을 오른쪽 68% 칸에 두고 왼쪽 끝을 초록 바탕으로 흐려, 얼굴이 제목·설명 글자 오른쪽에 오게 한다. */
@media(min-width:861px){.subhero.has-bg .subhero-bg.bg-face{left:32%;background-position:center 25%;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%);mask-image:linear-gradient(to right,transparent,#000 18%);}}
.subhero.has-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,59,44,.86),rgba(13,59,44,.62));}
/* 서브페이지 상단 히어로 영상 밴드 — 이 밴드가 맨 위, 그 아래에 기존 이미지 히어로가 온다 */
.subhero-topband{position:relative;width:100%;aspect-ratio:16/9;background:var(--g900);overflow:hidden;}
.subhero-topband iframe{position:absolute;inset:0;z-index:0;width:100%;height:100%;border:0;pointer-events:none;}
/* 2026-08-09 발주처 요청(수정⑱⑲): 영상 위 카피가 밝은 장면에서 묻혀 안 보인다는 지적.
   글자 그림자는 쓰지 않는다(2026-07-01 'AI티 제거'에서 걷어낸 방식) → 스크림을 강화해 대비를 확보한다. */
.subhero-topband::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(13,59,44,.44),rgba(13,59,44,.72));pointer-events:none;}
.subhero-topband .topband-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px;pointer-events:none;}
/* 영문 서브카피: opacity로 흐려 놓아 "현재 보이지 않음" 지적 → 불투명 + 확대 */
/* 2026-08-10 수정⑱⑲ 2차: 영상 밝은 장면에서 영문 카피가 묻힌다는 지적이 남아 있었다.
   ★볼드는 18.66px 이상이면 접근성상 "큰 글씨"로 분류돼 요구 대비가 4.5:1→3:1로 낮아진다.
   PC 18.88px는 문턱을 겨우 넘었지만 모바일 15.04px는 미달이라 탈락했다 → 양쪽 다 여유 있게 키운다. */
.subhero-topband .tb-kicker{font-size:2.25rem;letter-spacing:.16em;font-weight:700;opacity:1;margin-bottom:22px;}
/* 한글 제목: "크고 진하게" — 자간·행간을 여유 있게 잡아 부드럽게 읽히도록 */
/* 2026-08-05 회의 수정⑱ "부드러운 서체로 크고 진하게" — 고딕(Pretendard) 대신 명조로 바꿔 온기를 준다.
   폰트가 아직 안 왔을 때를 대비해 Pretendard를 폴백으로 둔다. */
.subhero-topband .tb-title{font-family:'Nanum Myeongjo','Pretendard','PretendardFull',serif;font-size:clamp(3rem,5.6vw,5rem);font-weight:800;line-height:1.3;letter-spacing:-.01em;}
@media(max-width:640px){.subhero-topband .tb-kicker{font-size:1.6rem;letter-spacing:.06em;margin-bottom:14px;}.subhero-topband .tb-title{font-size:2.6rem;}}
/* 360px대에서는 긴 영문(WITH YOU, THROUGH CARE 등)이 2줄이 되며 배너 높이(16:9)를 넘겼다 → 그 구간만 한 단계 줄인다 */
@media(max-width:400px){.subhero-topband .tb-kicker{font-size:1.3rem;letter-spacing:.04em;margin-bottom:10px;}.subhero-topband .tb-title{font-size:2.3rem;}}
.subhero .sub-in{position:relative;z-index:1;width:var(--sub-wrap);max-width:calc(100% - 48px);margin:0 auto;}
/* ★2026-09-21 대표님 지시 — 화면마다 제각각이던 대문 글자 크기를 전 화면 하나로 통일.
   실측 결과 경로 표시 16px(42개)·20px(4개)로 갈려 있었다 → 전부 20px(본문 최소 20px 기준). */
.subhero .crumb{font-size:20px;color:#a9d8c4;letter-spacing:.01em;margin-bottom:20px;}
.subhero .crumb a{color:#a9d8c4;text-decoration:none;}
.subhero .crumb a:hover{color:#fff;}
.subhero .crumb span{margin:0 8px;opacity:.5;}
.subhero .eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);color:#7fd9b0;text-transform:uppercase;}
.subhero h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.03em;line-height:1.18;margin-top:14px;word-break:keep-all;}
/* ★2026-09-21 대문 본문도 하나로 — 실측 20.2px(41개)·22px(4개)로 갈려 있었다.
   좁은 화면에서 19.5px까지 내려가 「본문 최소 20px」에도 못 미쳤다 → 전 화면 22px 고정.
   색·굵기도 3개 화면만 밝고 굵게(#eef8f3/500) 따로 잡혀 있었다 → 가독성이 나은 그쪽으로 통일. */
.subhero .lead{font-size:22px;line-height:1.75;color:#eef8f3;font-weight:500;margin-top:20px;max-width:760px;word-break:keep-all;}

/* ───────── ② 텍스트 + 이미지 2단 (갤러리 프레임) ───────── */
.sub-2col{background:var(--cream);}
.sub-2col .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;}
.sub-2col.rev .grid{direction:rtl;}
.sub-2col.rev .grid > *{direction:ltr;}
.sub-2col .s2-tx .eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);color:var(--g700);text-transform:uppercase;}
.sub-2col .s2-tx h2{font-size:var(--fs-h2);font-weight:800;color:var(--g900);letter-spacing:-.025em;line-height:1.25;margin-top:14px;word-break:keep-all;}
.sub-2col .s2-tx p{font-size:var(--fs-body);line-height:1.85;color:#46544c;margin-top:18px;word-break:keep-all;}
.sub-2col .s2-tx p b{color:var(--g700);font-weight:700;}
/* 이미지 프레임 */
.sub-2col .s2-img{position:relative;border-radius:var(--r-img);overflow:hidden;box-shadow:var(--sh-img);aspect-ratio:4/3;background:var(--g50);}
.sub-2col .s2-img img{width:100%;height:100%;object-fit:cover;display:block;}
#check .sec-head{text-align:center;margin-bottom:38px;}
#check .sec-head h2::after{margin-left:auto;margin-right:auto;}
#check .sec-head .desc{max-width:820px;margin-left:auto;margin-right:auto;}
#check .check-ol{list-style:none;margin:0;padding:0;}
#check .check-ol li{display:flex;gap:16px;align-items:flex-start;padding:18px 2px;border-bottom:1px solid var(--line);}
#check .check-ol li:first-child{border-top:1px solid var(--line);}
#check .check-ol .con{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:27px;color:var(--g500);flex:0 0 auto;line-height:1.5;}
#check .check-ol p{margin:0;font-size:var(--fs-body);line-height:1.7;color:#46544c;word-break:keep-all;}
/* 2026-08-26: 대표원장 사진(680×679, 거의 정사각)을 4/3 칸에 넣어 위아래가 12.4%씩 잘려
   머리 윗부분이 날아갔다. 원본 비율에 맞춰 잘림 0으로. */
#director .s2-img{aspect-ratio:1/1;}
/* 2026-09-26 대표님 지시: 사진이 글보다 너무 커 균형이 안 맞는다 → PC(1025px↑)에서 사진 한 변을
   글 묶음 높이(이름~마지막 줄 약 320px)에 맞추고, 글+사진을 한 묶음으로 가운데 모은다. */
@media(min-width:1025px){#director .grid{grid-template-columns:minmax(0,max-content) 320px;justify-content:center;}}
/* 최주연 원장(팀) 사진은 세로형 인물이라 슬롯을 세로로 길게 두어 얼굴이 위아래로 잘리지 않게 함 */
#team .s2-img{aspect-ratio:4/5;max-width:60%;margin-inline:auto;}
#amenity .s2-img{aspect-ratio:1500/337;}
/* 2026-08-29: 앵커(#…)로 들어왔을 때 상단 고정 헤더(81px)가 그 단락 제목을 덮지 않도록 여유를 둔다.
   대문(.subhero)은 위 여백이 104px라 이미 가리지 않으므로 제외한다. */
.subblk[id],.tx-band[id],.sub-full[id]{scroll-margin-top:96px;}
/* 2026-08-29: 가로형 사진을 4/3 칸에 넣으면 좌우가 잘린다(밥·일반식 식단 1336×891 → 좌우 5.5%씩).
   이 칸만 원본 비율을 따라가게 해 잘림 0. 사진을 바꿔도 비율을 다시 손볼 필요가 없다. */
.sub-2col .s2-img.s2-img--nocrop{aspect-ratio:auto;background:transparent;}
.sub-2col .s2-img.s2-img--nocrop img{height:auto;object-fit:contain;}
/* 호텔식 입원실: 위 텍스트(가운데) + 아래 입원실 사진 3장 가로배열 (슬라이드 62) */
.sub-rooms{background:var(--cream);}
.sub-rooms .sec-head{text-align:center;margin-bottom:34px;}
.sub-rooms .sec-head h2::after{margin-left:auto;margin-right:auto;}
.sub-rooms .sec-head .desc{max-width:820px;margin-left:auto;margin-right:auto;}
.sub-rooms .room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);}
.sub-rooms .room-grid figure{margin:0;border-radius:var(--r-img);overflow:hidden;box-shadow:var(--sh-img);background:var(--g50);}
.sub-rooms .room-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
@media(max-width:720px){.sub-rooms .room-grid{grid-template-columns:1fr;}}
/* 자동차 이용 시: 위 텍스트(가운데) + 아래 약도(가로로 긴 이미지) (슬라이드 72) */
.sub-route .sec-head{text-align:center;margin-bottom:30px;}
.sub-route .sec-head h2::after{margin-left:auto;margin-right:auto;}
.sub-route .sec-head .desc{max-width:760px;margin-left:auto;margin-right:auto;}
.sub-route .route-fig{margin:0 auto;max-width:940px;border-radius:var(--r-img);overflow:hidden;box-shadow:var(--sh-img);background:var(--g50);}
.sub-route .route-fig img{width:100%;height:auto;display:block;}
/* 입원 식단: 위 텍스트(가운데) + 아래 식단 사진 4장 가로배열 (식단 슬라이드) */
.sub-rooms.meal-4 .room-grid{grid-template-columns:repeat(4,1fr);}
.sub-rooms.meal-4 .room-grid img{aspect-ratio:3/2;}
@media(max-width:720px){.sub-rooms.meal-4 .room-grid{grid-template-columns:repeat(2,1fr);}}
/* 이홍찬 대표원장: '외과 전문의'를 절반 크기로 이름 아래 줄에 배치 */
#director .s2-tx h2 .h2-sub,#team .s2-tx h2 .h2-sub{display:block;font-size:.5em;font-weight:600;color:var(--g700);letter-spacing:0;margin-top:10px;}

/* 안내 이미지 아래 키워드 배지 (2026-09-04 2차 피드백 — 장 면역치료 「하단 4가지가 안 보인다」).
   원래 이미지 안에 흰 글자/회색 배지로 박혀 있어 대비가 2.4:1이었다. 글자로 빼고 토큰 색으로 맞춘다.
   딥그린 글자(--g800) × 연녹 배경(--g50) = 8.4:1. 좁은 화면에서는 두 줄로 접힌다.
   2026-09-04 대표님 지시로 글자를 한 단 키웠다(16 → 20px, 모바일 14.5 → 17px).
   2026-09-15 대표님 지시로 한 단 더(20 → 24px, 모바일 17 → 20px). 배지도 같이 키워 글자가 답답하지 않게 한다.
   같은 날 추가 지시: 앞의 「#」을 빼고(마크업에서 제거) 글자를 더 진하고 두껍게
   → 색 --g800(#13513c) → --g900(#0d3b2c), 굵기 700 → 800. 연녹 배경 대비 11.2:1.
   ★이 배지는 장 면역치료 한 페이지에서만 쓴다(사용처 전수 확인) — 다른 화면에 영향 없다. */
.promo-tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:30px auto 0;}
.promo-tags li{background:var(--g50);color:var(--g900);border:1px solid var(--tline);border-radius:999px;
  padding:14px 28px;font-size:24px;font-weight:800;line-height:1.35;letter-spacing:-.02em;word-break:keep-all;}
@media(max-width:720px){
  .promo-tags{gap:10px;margin-top:24px;}
  .promo-tags li{padding:11px 19px;font-size:20px;}
}

/* 소메뉴 구분 띠 — 한 페이지에 여러 소메뉴가 이어질 때 「여기서부터 다른 주제」를 알리는 딥그린 밴드.
   고도비만 케어(obesity-severe)에서 쓰던 방식을 공용으로 뺐다 (2026-09-04 대표님 지시로 회복·후유증 케어에도 적용).
   ★크기 상한 근거: 페이지 대제목(--fs-h1)보다는 아래, 보통 소제목(--fs-h2)보다는 위여야 위계가 맞다.
     대제목이 화면 폭을 따라 줄어들므로 이 제목도 같은 방식(clamp)으로 따라간다. */
.tx-band{background:var(--g700);color:#fff;}
.tx-band .sub-wrap{padding:58px 20px;}
.tx-band .eyb{display:inline-block;font-size:18px;font-weight:700;letter-spacing:.08em;opacity:.82;margin-bottom:12px;}
.tx-band h2{color:#fff;font-size:clamp(40px,4.7vw,59px);line-height:1.2;margin:0 0 14px;font-weight:800;letter-spacing:-.025em;word-break:keep-all;}
.tx-band p{color:rgba(255,255,255,.88);max-width:760px;margin:0;line-height:1.7;font-size:var(--fs-body);word-break:keep-all;}
.tx-band h2:last-child{margin-bottom:0;}
@media(max-width:600px){.tx-band .sub-wrap{padding:44px 20px;}.tx-band .eyb{font-size:16px;}}

/* 인물 소개(물리치료사·영양사) — 왼쪽 사진 + 오른쪽 자격 목록 (2026-09-04 2차 피드백 3번).
   ★새 클래스라 이 클래스를 쓰는 곳에만 적용된다(기존 페이지 영향 없음). */
.prof-grid{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(28px,4vw,56px);align-items:start;margin-top:40px;}
.prof-grid .lwrap{margin-top:0;}
.prof-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-img);background:var(--g50);}
.prof-photo img{width:100%;height:auto;display:block;}
@media(max-width:820px){
  .prof-grid{grid-template-columns:1fr;gap:24px;margin-top:28px;}
  .prof-photo{max-width:280px;margin:0 auto;}
}

/* ───────── ③ 카드 그리드 (번호 = 세리프 이탤릭) ───────── */
.sub-cards{background:#fff;}
.sub-cards .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:8px;}
/* 암 장비(6개)·퇴원 후 가이드(5개)는 데스크톱에서 3열 고정 */
@media(min-width:781px){#cancer-eq .cgrid,#guide .cgrid{grid-template-columns:repeat(3,1fr);}}
/* 2026-09-09 대표님 지시: 가이드 5개는 아랫줄 두 개가 왼쪽으로 쏠려 한쪽이 비어 보였다.
   → 6칸 격자에 카드를 2칸씩 놓고 4번째를 2번 칸에서 시작시켜 아랫줄을 가운데로 모은다.
   칸 너비 계산상 3열일 때와 카드 크기·간격이 같다((W-44)/3). 좁은 화면(≤780px)은 한 줄씩이라 해당 없음. */
@media(min-width:781px){
  #guide .cgrid{grid-template-columns:repeat(6,1fr);}
  #guide .cgrid>.card{grid-column:span 2;}
  #guide .cgrid>.card:nth-child(4){grid-column:2/span 2;}
}
/* 증상 유형(4개)은 데스크톱에서 2열 고정 → 01·02 / 03·04 로 정렬 */
@media(min-width:781px){#types .cgrid{grid-template-columns:repeat(2,1fr);}}
/* 2026-09-26 의료진 학회 활동: 카드 아래 원장 증서 3장. 증서는 글자가 정보라 자르지 않는다(contain).
   세 장 비율이 조금씩 달라 칸 비율을 첫 장에 맞추고 남는 폭은 증서 종이색(cream)으로 메운다. */
#society .certs{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:22px;}
@media(min-width:781px){#society .certs{display:grid;grid-template-columns:repeat(3,minmax(0,280px));justify-content:center;}#society .certs img{width:100%;}}
#society .certs img{display:block;width:280px;height:auto;aspect-ratio:900/1286;object-fit:contain;background:var(--cream);box-shadow:var(--sh-card);}
/* 2026-09-26 대표님 지시: 카드 3개를 줄이고 증서를 같은 폭(280px)으로 키워 위아래 줄 균형. PC만(모바일은 한 줄 카드·두 장 증서 유지). */
@media(min-width:781px){#society .cgrid{grid-template-columns:repeat(3,minmax(0,280px));justify-content:center;}#society .card{padding:30px 24px;}#society .card h3{font-size:24px;}}
@media(max-width:780px){#society .certs{gap:16px;margin-top:28px;}#society .certs img{width:160px;}}
.sub-cards .card{position:relative;background:#fff;border:1px solid var(--tline);border-radius:var(--r-card);padding:38px 30px;box-shadow:var(--sh-card);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.sub-cards .card:hover{transform:translateY(-6px);box-shadow:var(--sh-card-h);border-color:var(--g500);}
.sub-cards .card .cnum-badge{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:31.5px;font-weight:700;color:var(--g500);letter-spacing:0;}
.sub-cards .card h3{font-size:var(--fs-h3);font-weight:800;color:var(--g900);margin-top:12px;letter-spacing:-.02em;word-break:keep-all;}
.sub-cards .card h3::after{content:"";display:block;width:26px;height:2px;background:var(--g50);margin:12px 0 0;transition:width .4s var(--ease),background .4s var(--ease);}
.sub-cards .card:hover h3::after{width:46px;background:var(--g500);}
.sub-cards .card p{font-size:var(--fs-small);line-height:1.72;color:var(--muted);margin-top:14px;word-break:keep-all;}
.sub-cards .card .card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:17px;font-weight:700;color:var(--g700);text-decoration:none;transition:gap .3s var(--ease),color .3s var(--ease);}
.sub-cards .card .card-cta:hover{gap:12px;color:var(--g900);}
.sub-cards .card .card-img{display:block;width:100%;height:170px;object-fit:contain;background:var(--cream);border:1px solid var(--tline);border-radius:var(--radius);padding:16px;margin:0 0 22px;}
.sub-cards .card:has(.card-photo){display:flex;flex-direction:column;}
.sub-cards .card:has(.card-photo) p:last-of-type{margin-bottom:20px;}
.sub-cards .card .card-photo{display:block;width:100%;height:190px;object-fit:cover;border:1px solid var(--tline);border-radius:var(--radius);margin:auto 0 2px;}
/* 정밀검사 상세 — 이미지+텍스트 2열 블록 */
.chk-block{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:56px;padding-top:8px;}
.chk-block .chk-img img{width:100%;border:1px solid var(--tline);border-radius:var(--radius);display:block;box-shadow:var(--sh-card);}
.chk-block .chk-tx h3{font-size:var(--fs-h3);font-weight:700;color:var(--g900);margin:0 0 14px;}
.chk-block .chk-tx>p{color:var(--muted);line-height:1.75;margin:0 0 20px;}
.chk-block.rev .chk-img{order:2;}
@media(max-width:780px){.chk-block{grid-template-columns:1fr;gap:24px;}.chk-block.rev .chk-img{order:0;}}
/* 대사·전신 검사 — 텍스트 좌 + 이미지 우 2열 */
.exam-row{display:grid;grid-template-columns:1fr 0.85fr;gap:40px;align-items:center;margin-bottom:52px;padding-top:8px;}
.exam-row .exam-img img{width:100%;border:1px solid var(--tline);border-radius:var(--radius);display:block;box-shadow:var(--sh-card);}
@media(max-width:780px){.exam-row{grid-template-columns:1fr;gap:22px;}}

/* ───────── ④ 체크리스트 / 단계 ───────── */
.sub-list{background:var(--cream);}
.sub-list .lwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 40px;margin-top:40px;list-style:none;}
#booking .lwrap{grid-template-columns:repeat(2,1fr);}
/* ★2026-09-18 대표님 지시: 예약 안내는 **한 줄에 한 항목씩 네 줄**, 왼쪽 제목 · 오른쪽 설명.
   ★#booking 에만 건다 — 같은 부품을 쓰는 다른 목록 18곳의 배열은 건드리지 않는다.
   ★좁은 화면(≤820px)에서는 두 칸이 안 들어가므로 지금처럼 제목 아래 설명이 오는 세로 배열을 그대로 둔다. */
@media(min-width:821px){
  #booking .lwrap{grid-template-columns:1fr;gap:0;}
  #booking .lwrap>li>div{flex:1;display:grid;grid-template-columns:minmax(250px,330px) 1fr;
    gap:30px;align-items:baseline;}
  #booking .lwrap>li>div .ld{margin-top:0;}
}
.sub-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 4px;border-bottom:1px solid var(--line);}
.sub-list li .mk{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--g600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:800;}
/* ★2026-09-18 대표님 지시 「설명 글자가 작다」(예약 안내 · 오시는 길 두 곳에서 같은 지적).
   원인은 이 두 줄이 토큰 어디에도 없는 임의값(18.5 / 17px)이었다는 것 —
   본문이 20px 인데 목록 설명만 17px 이라 3px 작았다. 토큰에 맞춰 올린다.
   ★설명만 올리면 제목(18.5)보다 커져 위아래가 뒤집히므로 제목도 한 단 올렸다. */
/* ★제목에 --fs-h3 를 쓰면 안 된다: 그 토큰은 PC(981px 이상)에서 30px 까지 커지는 **카드 소제목**용이라
   목록 한 줄짜리 제목에는 과하다(실측 29.95px). 목록 제목은 본문 20px 바로 위 단으로 고정한다. */
.sub-list li .lt{font-size:22.5px;font-weight:700;color:var(--ink);}
/* 2026-09-26 대표님 지시: 의료진 「학력 및 경력」 12항목·「연구실적」 8항목만 글자 크기·진하기를 낮춤 */
#career .lt,#paper .lt{font-size:var(--fs-body);font-weight:500;}
/* 논문 8개는 PC에서 한 줄에 두 항목(4줄) */
@media(min-width:781px){#paper .lwrap{grid-template-columns:repeat(2,minmax(0,1fr));}}
.sub-list li .ld{font-size:var(--fs-body);line-height:1.65;color:var(--muted);margin-top:5px;word-break:keep-all;}
.sub-list .mk .mk-img{display:block;width:100%;height:200px;object-fit:cover;border:1px solid var(--tline);border-radius:var(--radius);margin-top:16px;}
.sub-list li .li-photo{display:block;width:100%;height:180px;object-fit:cover;border:1px solid var(--tline);border-radius:var(--radius);margin-top:14px;}
/* 5S 성공약속(obesity.html)만: 5개 항목을 3+2 역삼각형으로 — 둘째 줄 2개를 가운데로.
   3열이 실제로 만들어지는 폭(1120px↑)에서만 적용하고, 그 아래는 기본 auto-fit 그대로 둔다. */
@media(min-width:1120px),(min-width:968px) and (max-width:980px){
  #promise .lwrap,#fivec .lwrap{grid-template-columns:repeat(6,1fr);}
  #promise .lwrap>li,#fivec .lwrap>li{grid-column:span 2;}
  #promise .lwrap>li:nth-child(4),#fivec .lwrap>li:nth-child(4){grid-column:2/span 2;}
  #promise .lwrap>li:nth-child(5),#fivec .lwrap>li:nth-child(5){grid-column:4/span 2;}
}
/* 같은 섹션: 항목 안 글자도 가운데로(번호 배지를 제목 위에 올리고 제목·설명 중앙 정렬) */
/* 5S 용어 부각 (2026-09-04 2차 피드백 — 「5S 다섯 가지 용어 글씨 부각」).
   Safety·Success·Shape·Speed·Support 가 한글 설명과 같은 크기·색이라 묻혀 있었다.
   용어를 윗줄로 세우고 크게·초록으로. ★#promise 안으로만 한정 — 다른 페이지 목록(.lt)은 그대로다.
   2026-09-04 대표님 지시로 용어를 27 → 34 → 40px까지 키웠다(모바일 24 → 32px).
   ★같은 날 밝은 초록(--g500)·번호 없음도 시험했으나 대표님이 원래 진한 초록과 번호를 택하셨다
     → 색은 --g700(크림 바탕 5.89:1), 번호 동그라미 유지.
   ★40px가 상한이다. 섹션 제목(.sec-head h2)이 1280px에서 43px, 모바일에서 38px이라
     여기서 더 키우면 소제목이 제목보다 커지는 역전이 생긴다. 제목을 먼저 키우지 않는 한 넘기지 말 것. */
#promise .lt .s5w,#fivec .lt .s5w{display:block;font-size:40px;font-weight:800;color:var(--g700);letter-spacing:-.01em;line-height:1.2;}
#promise .lt .s5d,#fivec .lt .s5d{display:block;margin-top:7px;font-size:17px;font-weight:700;color:var(--ink);line-height:1.45;word-break:keep-all;}
@media(max-width:720px){
  #promise .lt .s5w,#fivec .lt .s5w{font-size:32px;}
  #promise .lt .s5d,#fivec .lt .s5d{font-size:16px;}
}
#promise .lwrap>li,#fivec .lwrap>li{flex-direction:column;align-items:center;text-align:center;}
/* 설명이 1줄인 항목(1번)만 사진이 위로 올라가 어긋나므로, 사진을 카드 아래쪽에 붙여
   줄 수가 달라도 같은 줄의 사진 시작선이 맞도록 한다. */
#promise .lwrap>li>div,#fivec .lwrap>li>div{width:100%;flex:1;display:flex;flex-direction:column;}
#promise .lwrap>li .li-photo{margin-top:auto;}

/* ───────── ⑤ 프리미엄 비용·데이터 표 ───────── */
.sub-table{background:#fff;}
.sub-table table{width:100%;border-collapse:separate;border-spacing:0;margin-top:8px;font-size:18px;border:1px solid var(--tline);border-radius:var(--radius);overflow:hidden;}
.sub-table th,.sub-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--tline-strong);word-break:keep-all;vertical-align:top;}
.sub-table thead th{background:var(--g900);color:var(--cream);font-weight:700;letter-spacing:-.01em;border-bottom:none;}
.sub-table tbody tr:nth-child(even){background:#fcfbf7;}
.sub-table tbody tr:hover{background:var(--cream);transition:background .2s;}
.sub-table tbody tr:last-child td{border-bottom:none;}
.sub-table td:last-child{color:var(--g700);font-weight:700;}

/* ───────── ⑥ 큰 사진 / 영상 ───────── */
.sub-media{background:var(--cream);}
.sub-media .frame{border:1px solid var(--tline);border-radius:var(--r-img);overflow:hidden;box-shadow:var(--sh-img);aspect-ratio:16/9;background:var(--g50);margin-top:8px;}
.sub-media .frame img,.sub-media .frame iframe{width:100%;height:100%;object-fit:cover;border:0;display:block;}

/* ───────── ⑦ 인용·슬로건 스트립 (단조로움 차단) ───────── */
.sub-quote{background:var(--cream);text-align:center;padding:clamp(40px,4vw,58px) 0;}
.sub-quote .q-in{position:relative;width:860px;max-width:calc(100% - 48px);margin:0 auto;padding:18px 0;}
.sub-quote .q-in::before{content:"\201C";position:absolute;top:-34px;left:50%;transform:translateX(-50%);font-family:Georgia,serif;font-size:114px;line-height:1;color:var(--g900);opacity:.1;}
.sub-quote p{font-size:clamp(25px,2.64vw,31.5px);line-height:1.6;font-weight:600;color:var(--g900);letter-spacing:-.02em;word-break:keep-all;}
.sub-quote .q-by{display:block;margin-top:22px;font-size:17px;font-weight:700;color:var(--g700);letter-spacing:.02em;}

/* ───────── ⑧ 통계·숫자 스트립 (신뢰도 수치) ───────── */
.sub-stats{background:var(--g800);color:#fff;padding:clamp(44px,4.4vw,62px) 0;}
.sub-stats .sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;text-align:center;}
.sub-stats .sitem .snum{font-size:clamp(45.5px,4.93vw,61.5px);font-weight:800;color:var(--cream);letter-spacing:-.03em;line-height:1;}
.sub-stats .sitem .snum small{font-size:.45em;font-weight:700;margin-left:4px;}
/* 2026-08-26: "Since 2001"이 두 줄로 갈라져 옆 항목과 어긋났다.
   Since를 단위(small)와 같은 비율로 줄이고 줄바꿈을 막아 한 줄에 담는다. */
.sub-stats .sitem .snum .pre{font-size:.45em;font-weight:700;margin-right:6px;}
.sub-stats .sitem .snum{white-space:nowrap;}
.sub-stats .sitem .slbl{font-size:17px;color:#bfe9d4;margin-top:12px;letter-spacing:.03em;word-break:keep-all;}

/* ───────── ⑨ 하단 공통 CTA ───────── */
.sub-cta{background:linear-gradient(180deg,#10513b,#0d3b2c);color:#fff;text-align:center;}
.sub-cta-in{width:760px;max-width:calc(100% - 48px);margin:0 auto;}
.sub-cta .eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);color:#7fd9b0;text-transform:uppercase;}
.sub-cta h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.025em;line-height:1.3;margin-top:14px;word-break:keep-all;}
.sub-cta p{font-size:var(--fs-body);line-height:1.7;color:#cfe7dc;margin-top:16px;word-break:keep-all;}
.sub-cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.sub-cta .btn-p{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--g900);font-size:19.5px;font-weight:800;padding:15px 30px;border-radius:32px;text-decoration:none;transition:.2s;}
.sub-cta .btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.25);}
.sub-cta .btn-o{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;font-size:19.5px;font-weight:700;padding:15px 28px;border-radius:32px;border:1.5px solid rgba(255,255,255,.5);text-decoration:none;transition:.2s;}
.sub-cta .btn-o:hover{background:rgba(255,255,255,.12);border-color:#fff;}

/* ───────── 스크롤 리빌 (site.js와 연동) ───────── */
html.jsr .subhero .sub-in,html.jsr .sub-2col .s2-tx,html.jsr .sub-2col .s2-img,
html.jsr .sub-cards .card,html.jsr .sub-list li,html.jsr .sub-table,
html.jsr .sub-media,html.jsr .sub-quote .q-in,html.jsr .sub-stats .sitem,html.jsr .sub-cta-in{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .9s cubic-bezier(.19,.84,.26,1);}
html.jsr .sub-2col .s2-img{transform:translateY(40px) scale(.97);}
html.jsr .reveal-in{opacity:1!important;transform:none!important;}
.sub-cards .card:nth-child(2){transition-delay:.08s}.sub-cards .card:nth-child(3){transition-delay:.16s}
.sub-cards .card:nth-child(4){transition-delay:.24s}.sub-cards .card:nth-child(5){transition-delay:.32s}
.sub-list li:nth-child(2){transition-delay:.06s}.sub-list li:nth-child(3){transition-delay:.12s}
.sub-list li:nth-child(4){transition-delay:.18s}.sub-list li:nth-child(5){transition-delay:.24s}
.sub-stats .sitem:nth-child(2){transition-delay:.08s}.sub-stats .sitem:nth-child(3){transition-delay:.16s}
.sub-stats .sitem:nth-child(4){transition-delay:.24s}

/* ════════════════════════════════════════════════════════════════════
   [볼륨업 확장 블록]  — 페이지를 충실하게 길게 + 사진을 분량으로 전환
   (1사진=1설명 원칙 / 통일된 비율·테두리 / 배경색 리듬 교차)
   ════════════════════════════════════════════════════════════════════ */

/* ───────── ⑩ 스티키 앵커 네비 (긴 페이지 길잡이) ───────── */
.sub-anchor{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);}
.sub-anchor .an-in{width:var(--sub-wrap);max-width:calc(100% - 48px);margin:0 auto;display:flex;gap:6px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;}
.sub-anchor .an-in::-webkit-scrollbar{display:none;}
.sub-anchor a{flex:0 0 auto;padding:16px 18px;font-size:17.5px;font-weight:700;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;}
.sub-anchor a:hover{color:var(--g700);}
.sub-anchor a.cur{color:var(--g900);border-bottom-color:var(--g700);}

/* ───────── ⑪ 스텝 프로세스 (번호 + 사진 + 설명, 세로 흐름) ───────── */
.sub-steps{background:#fff;}
.sub-steps .stp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.sub-steps .stp + .stp{margin-top:clamp(40px,5vw,72px);}
.sub-steps .stp:nth-child(even) .st-tx{order:2;}
.sub-steps .st-img{position:relative;border:1px solid var(--tline);border-radius:var(--r-img);overflow:hidden;box-shadow:var(--sh-img);aspect-ratio:4/3;background:var(--g50);}
.sub-steps .st-img img{width:100%;height:100%;object-fit:cover;display:block;}
.sub-steps .st-no{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:clamp(47.5px,5.6vw,71px);color:var(--g50);line-height:1;}
.sub-steps .st-tx h3{font-size:clamp(26px,2.64vw,32.5px);font-weight:800;color:var(--g900);letter-spacing:-.025em;margin-top:6px;word-break:keep-all;}
.sub-steps .st-tx h3::after{content:"";display:block;width:48px;height:2px;background:var(--g700);margin:16px 0 0;border-radius:2px;}
.sub-steps .st-tx p{font-size:var(--fs-body);line-height:1.85;color:#46544c;margin-top:18px;word-break:keep-all;}
.sub-steps .st-tx p b{color:var(--g700);font-weight:700;}
@media(min-width:781px){
  .sub-steps .stpgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,3.4vw,56px);}
  .sub-steps .stpgrid .stp{grid-template-columns:1fr;gap:24px;align-items:start;}
  .sub-steps .stpgrid .stp + .stp{margin-top:0;}
  .sub-steps .stpgrid .stp:nth-child(even) .st-tx{order:0;}
}

/* ───────── ⑫ 풀블리드 대형 사진 + 오버레이 텍스트 ───────── */
.sub-full{position:relative;min-height:clamp(340px,46vw,520px);display:flex;align-items:center;overflow:hidden;background:var(--g900);}
.sub-full .sf-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.sub-full::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,59,44,.84),rgba(13,59,44,.42));}
.sub-full .sf-in{position:relative;z-index:1;width:var(--sub-wrap);max-width:calc(100% - 48px);margin:0 auto;color:#fff;}
.sub-full h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.025em;line-height:1.28;word-break:keep-all;max-width:640px;}
.sub-full p{font-size:var(--fs-body);line-height:1.8;color:#d9ece2;margin-top:18px;max-width:560px;word-break:keep-all;}

/* ───────── ⑬ 대상자 사진 카드 (이런 분께 권합니다) ───────── */
.sub-photocards{background:var(--cream);}
.sub-photocards .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:8px;}
.sub-photocards .pcard{position:relative;border:1px solid var(--tline);border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--sh-card);background:var(--g50);}
.sub-photocards .pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.sub-photocards .pcard:hover img{transform:scale(1.05);}
.sub-photocards .pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,59,44,0) 40%,rgba(13,59,44,.82));}
.sub-photocards .pcard .pcap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 20px;color:#fff;font-size:19.5px;font-weight:700;line-height:1.45;word-break:keep-all;}
/* 의료진 '직접 진료 영역' 사진은 가로형이라 세로로 낮은 카드로 두어 상·하단이 잘리지 않게 함 */
#field .pcard{aspect-ratio:11/10;}
@media(max-width:560px){#care-fields .pgrid{grid-template-columns:1fr 1fr;gap:14px;}}

/* ───────── ⑭ 디테일 사진 갤러리 (작은 그리드, 꼼꼼함 강조) ───────── */
.sub-gallery{background:#fff;}
.sub-gallery .ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:8px;}
/* 2026-09-09 대표님 지시: 사진 5장이라 마지막 줄이 왼쪽으로 쏠렸다 → 마지막 줄을 가운데로 모은다.
   칸 수가 화면 폭에 따라 2·3·4·5열로 바뀌므로(실측: ~780px 2열 / 781~809px 3열 / 810~1155px 4열 /
   1156px~ 5열=한 줄) 구간마다 따로 맞춘다. 칸을 2배로 쪼개 사진을 2칸씩 놓는 방식이라
   ★사진 크기·간격은 손대기 전과 똑같다((W-(N-1)*14)/N 로 계산이 일치).
   ★적용 대상은 아래 선택자에 적은 갤러리뿐이다 — 같은 모양(사진 5장)인
     about #facility · cancer-radiation #gallery · cancer-recovery #prevent-gallery ·
     cancer-treatment #diet-gallery 는 지시가 오면 이 선택자에 이름만 더하면 된다. */
/* ★2026-09-19: 위 보정(#env)은 **사진이 5장일 때** 마지막 줄 쏠림을 잡던 규칙이었다.
   대표님 지시로 「1:1 진료 상담」을 빼 4장이 되면서 쏠릴 줄 자체가 없어졌고, 사진을 키워
   어느 폭에서나 2열 × 2행으로 두기로 해 규칙을 지웠다(배치는 strength.html 의 #env 규칙).
   같은 모양의 다른 갤러리(.gc5 등)는 아래 규칙을 그대로 쓰므로 영향이 없다. */
/* 2026-09-09 대표님 지시(2차): 나머지 갤러리들도 마지막 줄을 가운데로 모은다.
   ★id가 아니라 클래스로 건다 — `#gallery`는 사진 4·5·6장짜리 서로 다른 페이지 네 곳이 함께 쓰는
     이름이라, id로 걸면 6장짜리(장 건강·통증 갤러리) 배치가 깨진다(nth-child가 엉뚱한 칸을 옮긴다).
   붙인 곳: `.gc5` = 사진 5장 (위비앙 소개 #facility · 방사선치료 #gallery · 회복케어 #prevent-gallery)
            `.gc4` = 사진 4장 (암치료 #diet-gallery)
   ★칸 수가 바뀌는 폭이 경쟁력(#env)과 다르다 — 그쪽은 페이지 안에 모바일 2열 지정이 따로 있어서다.
     실측: ~421px 1열(한 장씩이라 쏠림 없음) / 422~615 2열 / 616~809 3열 / 810~1155 4열 / 1156~ 한 줄.
     회복케어는 820px 이하에서 화면에 없어 4열 구간만 해당된다. */
@media(min-width:422px) and (max-width:615px){            /* 2열 → 5번째가 혼자 남는다 */
  .gc5 .ggrid{grid-template-columns:repeat(4,1fr);}
  .gc5 .ggrid>figure{grid-column:span 2;}
  .gc5 .ggrid>figure:nth-child(5){grid-column:2/span 2;}
}
@media(min-width:616px) and (max-width:809px){            /* 3열 → 4·5번째가 왼쪽으로 쏠린다 */
  .gc5 .ggrid{grid-template-columns:repeat(6,1fr);}
  .gc5 .ggrid>figure{grid-column:span 2;}
  .gc5 .ggrid>figure:nth-child(4){grid-column:2/span 2;}
}
@media(min-width:810px) and (max-width:1155px){           /* 4열 → 5번째가 혼자 남는다 */
  .gc5 .ggrid{grid-template-columns:repeat(8,1fr);}
  .gc5 .ggrid>figure{grid-column:span 2;}
  .gc5 .ggrid>figure:nth-child(5){grid-column:4/span 2;}
}
/* 사진 4장 갤러리는 3열일 때만 마지막 한 장이 남는다(실측 782~809px). 나머지 폭은 이미 딱 맞는다. */
@media(min-width:782px) and (max-width:809px){
  .gc4 .ggrid{grid-template-columns:repeat(6,1fr);}
  .gc4 .ggrid>figure{grid-column:span 2;}
  .gc4 .ggrid>figure:nth-child(4){grid-column:3/span 2;}
}
.sub-gallery figure{margin:0;border:1px solid var(--tline);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);background:var(--g50);}
.sub-gallery figure img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.sub-gallery figcaption{padding:13px 14px;font-size:16px;font-weight:600;color:var(--ink);background:#fff;word-break:keep-all;}

/* ───────── ⑮ FAQ 아코디언 (하단 볼륨 + 신뢰) ───────── */
.sub-faq{background:var(--cream);}
.sub-faq .fwrap{max-width:820px;margin:0 auto;}
.sub-faq details{background:#fff;border:1px solid var(--tline);border-radius:var(--r-card);margin-bottom:12px;overflow:hidden;transition:box-shadow .3s;}
.sub-faq details[open]{box-shadow:var(--sh-card);}
.sub-faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-size:20px;font-weight:700;color:var(--g900);display:flex;justify-content:space-between;align-items:center;gap:16px;word-break:keep-all;}
.sub-faq summary::-webkit-details-marker{display:none;}
.sub-faq summary::after{content:"+";flex:0 0 auto;font-size:29px;font-weight:400;color:var(--g700);transition:transform .3s;}
.sub-faq details[open] summary::after{transform:rotate(45deg);}
/* ★2026-09-21 대표님 지시 — 자주 묻는 질문 답변 글자 20px.
   그동안 네 화면(여성암·위풍선·비만약물·위절제)만 따로 20px 로 적어 두어 화면마다 달랐다 →
   공용 규칙을 20px 로 올려 FAQ 가 있는 26개 화면이 한 곳에서 같이 움직이게 한다. */
.sub-faq .fa{padding:0 26px 24px;font-size:20px;line-height:1.8;color:var(--muted);word-break:keep-all;}

/* ───────── 스크롤 리빌 확장 적용 ───────── */
html.jsr .sub-steps .st-img,html.jsr .sub-steps .st-tx,html.jsr .sub-photocards .pcard,
html.jsr .sub-gallery figure,html.jsr .sub-faq details,html.jsr .sub-full .sf-in{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .9s cubic-bezier(.19,.84,.26,1);}
html.jsr .reveal-in{opacity:1!important;transform:none!important;}
.sub-photocards .pcard:nth-child(2){transition-delay:.08s}.sub-photocards .pcard:nth-child(3){transition-delay:.16s}
.sub-photocards .pcard:nth-child(4){transition-delay:.24s}
.sub-gallery figure:nth-child(2){transition-delay:.05s}.sub-gallery figure:nth-child(3){transition-delay:.1s}
.sub-gallery figure:nth-child(4){transition-delay:.15s}.sub-gallery figure:nth-child(5){transition-delay:.2s}
/* 접근성: 모션 최소화 설정 사용자에겐 등장 애니메이션 없이 즉시 표시(멀미 방지) */
@media(prefers-reduced-motion:reduce){
  html.jsr .subhero .sub-in,html.jsr .sub-2col .s2-tx,html.jsr .sub-2col .s2-img,
  html.jsr .sub-cards .card,html.jsr .sub-list li,html.jsr .sub-table,
  html.jsr .sub-media,html.jsr .sub-quote .q-in,html.jsr .sub-stats .sitem,html.jsr .sub-cta-in,
  html.jsr .sub-steps .st-img,html.jsr .sub-steps .st-tx,html.jsr .sub-photocards .pcard,
  html.jsr .sub-gallery figure,html.jsr .sub-faq details,html.jsr .sub-full .sf-in{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* ───────── 모바일 ───────── */
@media(max-width:780px){
  #booking .lwrap{grid-template-columns:1fr;}
  .sub-2col .grid{grid-template-columns:1fr;}
  .sub-2col.rev .grid{direction:ltr;}
  /* ★2026-09-21 좁은 화면도 최소 높이를 둔다(전에는 0이라 글 양에 따라 288~660px로 널뛰었다). */
  .subhero{padding:92px 0 46px;min-height:600px;}
  .subhero .lead br{display:none;}
  .sub-2col .s2-tx p br{display:none;}
  .sub-full p br{display:none;}
  .sub-steps .st-tx p br{display:none;}
  .sub-cards .card p br{display:none;}
  #society .card p br{display:revert;}
  /* 최주연 원장 경력은 줄마다 한 항목이라 모바일에서도 줄을 나눈다(안 나누면 「졸업 이대…」로 붙어 읽힘) */
  #team .s2-tx p br{display:revert;}
  .sub-table .sub-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sub-table table{font-size:16px;min-width:0;}
  .sub-table th,.sub-table td{padding:11px 11px;}
  section.subblk{padding:36px 0;}
  .subblk .sec-head{margin-bottom:28px;}
  .sub-steps .stp{grid-template-columns:1fr;gap:20px;}
  .sub-steps .stp:nth-child(even) .st-tx{order:0;}
  #flow .stpgrid .stp{grid-template-columns:34% 1fr;gap:16px;align-items:center;}
  #flow .stpgrid .st-tx{order:0!important;}
  #flow .stpgrid .st-no{font-size:37px;margin-bottom:6px;}
  #flow .stpgrid .st-tx h3{font-size:21px;}
  .sub-anchor a{padding:14px 14px;font-size:16px;}
}

/* 2026-08-26: 안내 목록(.ld)의 지정 줄바꿈은 칸이 넓을 때만 유지한다.
   목록이 2열로 접히는 990~1050px 구간에서 칸 폭이 327~357px로 좁아져 첫 줄이 넘쳤다.
   실측상 칸 폭 360px(화면 1070px)부터 안정 → 여유를 둬 1100px을 문턱으로 잡았다. */
@media(max-width:1100px){
  .sub-list li .ld br{display:none;}
}

/* 소식 목록 (관리자 등록 게시물) */
.news-list{display:flex;flex-direction:column;gap:14px;}
.news-item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:box-shadow .25s var(--ease);}
.news-item[open]{box-shadow:0 10px 30px rgba(13,59,44,.08);}
.news-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:18px 22px;}
.news-item>summary::-webkit-details-marker{display:none;}
.news-item .ni-thumb{flex:0 0 92px;width:92px;height:68px;border-radius:10px;overflow:hidden;background:#eef1ee;}
.news-item .ni-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.news-item .ni-head{flex:1;min-width:0;}
.news-item .ni-date{font-size:14px;color:var(--g600);font-weight:700;letter-spacing:.2px;}
.news-item .ni-head h3{margin:4px 0 0;font-size:20.5px;color:var(--g900);line-height:1.4;font-weight:700;}
.news-item .ni-arrow{flex:0 0 auto;color:#9fb4a9;font-size:23.5px;transition:transform .25s var(--ease);}
.news-item[open] .ni-arrow{transform:rotate(180deg);}
.news-item .ni-body{padding:0 22px 22px 22px;color:#3a4a42;line-height:1.85;white-space:pre-wrap;border-top:1px solid var(--line);margin-top:2px;padding-top:18px;}
.news-item .ni-body img{max-width:100%;border-radius:10px;margin:12px 0;}
@media(max-width:640px){
  .news-item>summary{gap:13px;padding:15px 16px;}
  .news-item .ni-thumb{flex-basis:64px;width:64px;height:50px;}
  .news-item .ni-head h3{font-size:18.5px;}
  .news-item .ni-body{padding:16px 16px 18px;}
}

/* 주차 안내 약도 아래 문의 안내 (2026-08-09 추가㉓) */
/* ★2026-09-22 대표님 지시: 주차 문의 안내 글자를 키운다 — 보조(17px) → 본문(20px).
   전화번호가 들어간 안내라 작게 두면 놓친다. 이 부품은 오시는 길 한 곳에서만 쓴다(전수 확인). */
.park-note{max-width:940px;margin:18px auto 0;text-align:center;font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-caption);word-break:keep-all;}
/* ★2026-09-18 대표님 지시: 주차 안내에 실제 사진 두 장(입구·지하)을 나란히 둔다.
   두 사진은 같은 3:2 로 잘라 두었다 — 비율이 다르면 나란히 놓을 때 높이가 어긋난다. */
.park-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:940px;margin:20px auto 0;}
.park-shots figure{margin:0;border-radius:var(--r-img);overflow:hidden;box-shadow:var(--sh-img);background:var(--g50);}
.park-shots img{width:100%;height:auto;display:block;}
.park-shots figcaption{padding:12px 14px;background:#fff;text-align:center;font-size:var(--fs-small);
  color:var(--muted);line-height:var(--lh-caption);word-break:keep-all;}
.park-shots figcaption b{color:var(--ink);font-weight:700;}
@media(max-width:820px){.park-shots{grid-template-columns:1fr;gap:14px;}}

/* ★2026-09-18 대표님 지시: 지하철 안내 두 항목을 가운데로 모아 균형있게 둔다.
   ★#subway 에만 건다 — 같은 부품을 쓰는 다른 목록의 배열은 건드리지 않는다. */
#subway .lwrap{grid-template-columns:repeat(2,minmax(0,330px));justify-content:center;gap:16px 44px;}
#subway .lwrap>li{flex-direction:column;align-items:center;text-align:center;gap:10px;}
@media(max-width:820px){#subway .lwrap{grid-template-columns:minmax(0,330px);}}
.park-note a{color:var(--g700);}
.dbr{display:inline}
@media(max-width:820px){.dbr{display:none}}
.mbr{display:none}
@media(max-width:780px){.mbr{display:inline}}
@media(max-width:780px){
  #target .pgrid{grid-template-columns:1fr 1fr;gap:14px;}
  #process .stpgrid .stp{grid-template-columns:40% 1fr;gap:14px;align-items:center;}
  #process .stpgrid .st-img{min-width:0;}
  #process .stpgrid .st-tx{min-width:0;}
  #disease .lwrap{grid-template-columns:1fr;gap:14px;}
  #disease .mk{display:grid;grid-template-columns:38% 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:14px;}
  #disease .mk .lt{grid-column:2;grid-row:1;min-width:0;}
  #disease .mk ul{grid-column:2;grid-row:2;min-width:0;margin:8px 0 0;padding:0;list-style:none;}
  #disease .mk .mk-img,#disease .mk .dimg{grid-column:1;grid-row:1 / span 2;width:100%;height:100%;min-width:0;min-height:100%;margin:0;align-self:stretch;aspect-ratio:auto;}
}

.wm-greenbox{display:inline-block;background:#5f8f2b;color:#fff;font-size:var(--fs-body);font-weight:600;padding:12px 26px;border-radius:8px;margin:0 auto 38px;text-align:center}
.wm-circles{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-bottom:32px}
.wm-circle{width:230px;height:230px;border:1px solid #d9d9d9;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;color:#1a1a1a;font-size:21px;font-weight:700;line-height:1.55;padding:12px}
.wm-foot{text-align:center;font-size:var(--fs-body);color:var(--muted);line-height:1.8;margin:0}
@media(max-width:820px){.wm-circle{width:196px;height:196px;font-size:19.5px}.wm-circles{gap:20px}}

.wm-card-img{width:100%;height:200px;object-fit:cover;border-radius:10px;margin-bottom:16px;display:block;background:#f2f2f2}

/* 2026-08-10 줄바꿈 원칙(외톨이 금지) 상시 장치 — 글자 크기가 바뀌어도 유지되도록 CSS로 박는다.
   text-wrap:pretty 는 마지막 줄에 한 어절만 남는 것을 브라우저가 알아서 막아 준다.
   ★금지된 text-wrap:balance 와 다르다 — balance 는 줄 폭을 맞추느라 쉼표를 줄 한가운데로 밀어내므로 쓰지 않는다. */
h1,h2,h3,h4,p,li,figcaption,.lead,.desc,.sec-sub,.pcap{text-wrap:pretty;}

/* 2026-08-29 인증 현판 밴드 (암 클리닉 히어로 직하) — 대한통합암학회 인증기관 현판 노출 */
.sub-cert{background:var(--cream);text-align:center;padding:var(--sp-block) 0;}
.sub-cert .eyebrow{display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);color:var(--g700);text-transform:uppercase;margin-bottom:14px;}
.sub-cert h2{font-size:var(--fs-h2);font-weight:800;color:var(--g900);letter-spacing:-.025em;line-height:var(--lh-heading);word-break:keep-all;}
.sub-cert figure{margin:38px auto 0;width:820px;max-width:100%;}
.sub-cert figure img{width:100%;border:1px solid var(--tline);border-radius:var(--r-img);box-shadow:var(--sh-img);}

/* ===== 통합 암케어 5C 지킴 — 두 페이지 공용 (2026-09-17) =====
   ★여기가 5C 그림의 유일한 출처(SSoT)다. 쓰는 곳은 두 군데:
       암 클리닉 소개  pages/cancer.html   #fivec  (전체판)
       위비앙의 경쟁력 pages/strength.html #c5sum  (.lite 짧은판)
     ★페이지 안에 CSS 를 복붙하지 말 것. 예전에 그렇게 두 벌로 두었다가
       한쪽만 고쳐져 「암 클리닉은 영문이 크고 경쟁력은 한글이 큰」 어긋남이 생겼다.
   ★모양의 기준은 6층 로비 벽면(2026-09-17 병원 제공 사진)이다:
       나무가 위 · 네모 불릿 · 「영문 한글」 한 줄 · 왼쪽 3 오른쪽 2 · 상자 없음.
     벽면을 왼→오 지그재그로 읽으면 SECOM 순서가 된다. 표를 줄 방향으로 채우면 저절로 그렇게 된다.
   ★색은 벽면(회색 콘크리트)이 아니라 사이트 토큰을 쓴다 — 벽 색을 옮기면 사이트가 어두워진다. */
.c5wall .w5-top{text-align:center;}
.c5wall .w5-top img{display:block;width:clamp(88px,9.5vw,132px);height:auto;
  margin:0 auto clamp(12px,1.6vw,20px);}

/* ★2026-09-17 대표님: 「글자가 너무 작다. 한 줄에 한 항목씩 배열하고 한 줄씩 천천히 나오게」
   → 벽면의 2열(왼3·오2)을 **한 줄에 하나씩 다섯 줄**로 바꿨다. 읽는 순서가 위→아래라
     SECOM 이 더 또렷이 읽히고, 한 줄을 통째로 쓰니 글자를 크게 키울 수 있다.
     2열로 되돌리면 글자는 다시 작아진다. */
/* ★2026-09-17 대표님: 「한 항목이 한 줄이 아니라 세 줄이잖아. 가운데로 몰리고 여백이 많다」
   → 한 항목을 **가로 한 줄**에 편다: [불릿] [SECOM] [영문 한글] [설명].
     앞서 세 줄로 쌓였던 것(영문 / SECOM / 설명)을 가로 세 칸으로 바꾼 것이다.
   ★열 너비를 표로 고정해 다섯 줄의 SECOM·영문·설명이 세로로 가지런히 선다.
     낱말 길이가 제각각이라(Care 는 짧고 Cooperation 은 길다) 열을 안 잡으면 들쭉날쭉해진다.
   ★fit-content 로 가운데 모으던 것을 되돌렸다 — 한 줄로 펴면 폭을 다 쓰므로 여백이 남지 않는다. */
.c5wall .w5{list-style:none;margin:clamp(24px,3vw,38px) auto 0;padding:0;
  width:min(100%,1040px);
  display:grid;grid-template-columns:1fr;
  row-gap:clamp(18px,2vw,26px);}
/* ★열 너비를 반드시 고정할 것. auto 로 두면 줄마다 따로 계산돼(Care 는 짧고
   Cooperation 은 길다) 설명 시작점이 제각각 흩어진다 — 실제로 그렇게 나왔다. */
/* ★네 덩어리(네모·SECOM·영문·설명)는 **세로 가운데**로 맞춘다.
   ★밑선(baseline)으로 맞췄더니 작은 글자가 큰 영문의 밑선에 딸려 내려가
     「SUPPORT 가 아래로 처진」 것처럼 보였다(2026-09-17 대표님 지적). 되돌리지 말 것.
     네모도 같은 기준(50%)이라 SECOM 과 정확히 같은 높이에 온다.
   ★영문 열은 가장 긴 「Cooperation 협조」(실측 292px)에 여유만 준 310px 이다.
     더 넓히면 Care 처럼 짧은 낱말 뒤가 비어 설명이 멀어진다. */
.c5wall .w5 li{position:relative;padding-left:clamp(22px,2vw,30px);
  display:grid;grid-template-columns:clamp(92px,9vw,126px) clamp(196px,24vw,310px) 1fr;
  column-gap:clamp(12px,1.5vw,24px);align-items:center;}
/* 벽면의 네모 불릿 — SECOM 과 같은 높이에 오도록 줄의 세로 가운데에 앉힌다 */
.c5wall .w5 li::before{content:'';position:absolute;left:0;top:50%;margin-top:-6px;
  width:12px;height:12px;background:var(--g500);}
/* ★grid-row:1 을 반드시 함께 쓸 것. 칸(column)만 지정하면 격자가 앞으로만 채우는 성질 때문에
   뒤에 오는 SECOM(1번 칸)이 **둘째 줄로 밀려** 세 덩어리가 어긋난다 — 실제로 그렇게 나왔다. */
.c5wall .w5 .en{grid-column:2;grid-row:1;display:block;margin:0;font-size:clamp(25px,3.1vw,40px);
  font-weight:800;color:var(--g700);letter-spacing:-.02em;line-height:1.2;white-space:nowrap;}
.c5wall .w5 .en .bigc{font-size:1.3em;color:var(--g500);}
/* 한글은 영문 뒤·작게 — 벽면과 같은 위계다. 뒤집지 말 것(대표님 지시 2026-09-17). */
.c5wall .w5 .en .ko{font-size:.56em;font-weight:700;color:var(--g900);margin-left:.55em;
  letter-spacing:-.01em;}
/* SECOM 은 보조다 — 5C 가 주(2026-09-16 대표님 지적). 맨 앞 열에 왼쪽으로 맞춰
   위에서 아래로 읽으면 S·E·C·O·M 이 세로로 보이게 한다(열 너비를 고정하는 이유다). */
/* ★2026-09-17 대표님 「작은 글자도 더 크게」 — SECOM 13→16px, 설명 19→22px 로 올렸다.
   흐리기(opacity)도 .75 → .85 로 덜 흐리게 했다. 되돌리면 다시 작아 보인다. */
.c5wall .w5 .sec{grid-column:1;grid-row:1;display:block;margin:0;font-size:clamp(13px,1.25vw,16px);
  font-weight:700;letter-spacing:.09em;color:var(--muted);opacity:.85;white-space:nowrap;}
.c5wall .w5 .sec b{font-weight:800;color:var(--g600);font-size:1.15em;}
.c5wall .w5 .d{grid-column:3;grid-row:1;margin:0;font-size:clamp(17px,1.7vw,22px);color:var(--muted);
  line-height:1.5;word-break:keep-all;}

/* 짧은 판(경쟁력)은 SECOM·설명이 없으므로 영문만 남는다 → 열을 나누지 않는다 */
/* (짧은 판 규칙은 이 파일 맨 아래 「짧은 판」 블록에 모아 두었다) */

.c5wall .w5-more{display:none;margin:clamp(24px,2.8vw,34px) 0 0;text-align:center;}
.c5wall .w5-more a{display:inline-block;font-size:16.5px;font-weight:700;color:var(--g700);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(28,107,79,.45);}

/* ── 짧은 판(경쟁력) : 같은 부품에서 감출 것만 정한다 ── */
/* ===== 짧은 판(위비앙의 경쟁력) — 6층 벽면 그대로, 왼쪽 3 · 오른쪽 2 =====
   ★2026-09-17 대표님: 「한 줄에 한 항목·글자 키움은 **암 클리닉에만** 해당하는 변화다.
     경쟁력은 원래대로 돌리고 액션 효과만 천천히 강하게」
     → 위쪽의 한 줄 배치·키운 글자는 여기 적용하지 않고 벽면 2열로 되돌린다.
       움직임(왼→오, 한 줄씩)만 암 클리닉과 같은 것을 쓴다.
   ★암 클리닉 규칙보다 선택자가 한 단계 구체적이라(.c5wall.lite) 위 규칙을 덮는다. */
.c5wall.lite .sec,.c5wall.lite .d{display:none;}
.c5wall.lite .w5-more{display:block;}
.c5wall.lite .w5{width:min(100%,900px);
  grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,4vw,64px);row-gap:clamp(20px,2.4vw,30px);}
.c5wall.lite .w5 li{grid-template-columns:1fr;padding-left:clamp(20px,1.8vw,26px);}
.c5wall.lite .w5 li::before{top:clamp(11px,1.15vw,15px);margin-top:0;width:9px;height:9px;}
.c5wall.lite .w5 .en{grid-column:1;grid-row:1;font-size:clamp(21px,2.35vw,31px);}
.c5wall.lite .w5 .en .ko{font-size:.62em;}
/* 좁은 화면에서는 두 열을 한 줄로 세운다(읽는 순서는 그대로) */
@media(max-width:760px){
  .c5wall.lite .w5{grid-template-columns:1fr;row-gap:17px;}
}

/* ── 좁은 화면: 두 열을 한 줄로 세운다(읽는 순서는 그대로 유지된다) ── */
/* ── 좁은 화면: 한 줄에 세 칸을 못 넣는다 → 위에서 아래로 쌓는다 ──
   ★「모바일만」 따로 만들지 않는다. 기본(=한 줄)을 여기서 상태만 바꿔 되돌리는 방식이라
     PC 쪽은 손대지 않아도 그대로다. */
@media(max-width:880px){
  .c5wall .w5 li{grid-template-columns:1fr;row-gap:5px;}
  .c5wall .w5 .sec{grid-column:1;grid-row:1;}
  .c5wall .w5 .en{grid-column:1;grid-row:2;}
  .c5wall .w5 .d{grid-column:1;grid-row:3;}
  .c5wall .w5{row-gap:24px;}
  /* 세 줄로 쌓이므로 「가운데」는 영문 언저리가 된다 → 네모는 맨 윗줄(SECOM)에 맞춘다.
     짧은 판은 SECOM 이 없어 영문이 첫 줄이므로 그 줄에 맞춘다. */
  .c5wall .w5 li::before{top:3px;margin-top:0;}
}

/* ===== 순차 등장 — 스크롤을 내리는 동안 한 줄씩 =====
   대표님 요청: 「하나씩 툭툭 나오거나 흘러가듯이」(3차 검수 P-01)
   + 2026-09-17 「너무 빨리 끝나서 스크롤하는 동안 하나씩 등장한다는 느낌이 없다 — 더 천천히」.
   ★그래서 다섯 줄을 한꺼번에 발동시키지 않는다. **줄마다 따로** 화면에 들어올 때 열린다
     (site.js 가 줄 단위로 관찰한다). 그래서 스크롤 속도에 맞춰 한 줄씩 따라온다.
   ★한 화면에 여러 줄이 동시에 들어올 때만 site.js 가 --d 로 약간씩 늦춘다.
   ★html.jsr 이 붙었을 때만 숨긴다 — site.js 가 죽으면 아무것도 숨겨지지 않고 전부 보인다. */
html.jsr .c5wall .w5-top img{opacity:0;transform:translateY(10px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1);}
html.jsr .c5wall.on .w5-top img{opacity:1;transform:none;}

/* 줄 하나 — ★2026-09-17 대표님 「왼쪽에서 오른쪽으로」 「한 번에 한 줄씩 좌에서 우로 흐르도록」
   한 항목이 가로 한 줄이라 가로로 흘러야 글이 읽히는 방향과 같다.
   거리 90px · 1.2초, 끝에서 길게 감속하는 곡선이라 「흘러와 멎는」 느낌이 난다.
   ★여기에 지연(delay)을 주지 말 것 — 줄 사이 간격은 site.js 의 **대기열**이 만든다.
     양쪽에 다 걸면 지연이 이중으로 쌓여 뒷줄이 한참 뒤에 나온다. */
/* ★.seq5 = 같은 움직임을 쓰는 다른 자리. 지금은 비만 클리닉의 5S 성공약속(#promise)이다.
   (3차 검수 P-08). 5C 와 움직임을 따로 만들지 않는다 — 한 사이트에서 같은 성격의
   다섯 칸이 페이지마다 다르게 움직이면 따로 노는 화면이 된다. */
html.jsr .c5wall .w5 li,
html.jsr .seq5 .lwrap > li{opacity:0;transform:translateX(-90px);
  transition:opacity .8s ease,
             transform 1.2s cubic-bezier(.17,.89,.32,1);}
/* 불릿은 줄보다 조금 늦게 톡 — 글이 자리를 잡은 뒤 점이 찍히는 순서다 */
html.jsr .c5wall .w5 li::before{transform:scale(0);
  transition:transform .55s cubic-bezier(.3,1.6,.5,1) .5s;}
html.jsr .c5wall .w5 li.on,
html.jsr .seq5 .lwrap > li.on{opacity:1;transform:none;}
html.jsr .c5wall .w5 li.on::before{transform:scale(1);}

/* 모션 줄이기를 켠 분에게는 움직임 없이 바로 보인다(사이트 기존 정책과 같다) */
@media(prefers-reduced-motion:reduce){
  html.jsr .c5wall .w5-top img,html.jsr .c5wall .w5 li,html.jsr .c5wall .w5 li::before,
  html.jsr .seq5 .lwrap > li{
    opacity:1;transform:none;transition:none;}
}


/* ═══ 서브 글자를 메인 6단에 맞춤 — PC 전용 (2026-09-18) ═══
   메인 PC 를 6단(54/40/30/24/본문/17)으로 정리하면서 서브도 같은 결로 맞춘다.
   ★원래 :root 는 PC·모바일 공통이라 그대로 두고 981px 이상에서만 덮어쓴다 — 모바일은 한 글자도 안 바뀐다.
   ★본문(--fs-body)은 일부러 건드리지 않는다: 서브는 20px, 메인은 21px 이다.
     1px 차이는 눈에 안 보이는데, 21px 로 올리면 43개 페이지의 지정 줄바꿈이 밀린다(실측 3개 페이지에서 7곳).
     → 대표님 결정으로 「메인 21 / 서브 20」을 의도된 예외로 둔다. 나중에 누가 통일하려 들지 않도록 여기 적어 둔다.
   ★아래 값들은 각각 따로 재서 지정 줄바꿈 밀림 0곳을 확인했다.
   ★되돌리려면 이 블록만 지우면 된다. */
@media(min-width:981px){
  :root{
    --fs-h1:clamp(44px,4.22vw,54px);   /* ① 지금 최대 61.5 → 54 (메인과 같게) */
    --fs-h2:clamp(33px,3.13vw,40px);   /* ② 지금 최대 47.5 → 40 */
    --fs-h3:clamp(26px,2.34vw,30px);   /* ③ 지금 22.5 → 30 */
    --fs-small:17px;                   /* ⑥ 지금 17.5 → 17 */
    --fs-eyebrow:17px;                 /* ⑥ 지금 14.5 → 17 (대표님: 윗 라벨이 너무 작다) */
  }
}

/* 2026-09-19: 단락 아래에서 다른 화면으로 잇는 안내. 위비앙 경쟁력(영양 관리 → 항암 식단)과
   병원 소개(입원 환경 → 시설 안내)가 함께 쓴다. 색·굵기는 사이트 토큰만 쓴다. */
.sec-more{margin-top:30px;text-align:center;font-size:var(--fs-body);line-height:1.7;color:var(--g700);word-break:keep-all;}
/* ★2026-09-19 대표님 지시: 밑줄 글자보다 눈에 띄도록 초록 알약 버튼으로. 모서리 32px 는
   상담 단락의 .btn-p 와 같은 값을 써 사이트 안에서 버튼 모양이 갈리지 않게 했다. */
.sec-more a{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:14px 30px;
  background:var(--g700);color:#fff;font-weight:800;border-radius:32px;text-decoration:none;transition:.2s;}
.sec-more a:hover{background:var(--g900);transform:translateY(-2px);box-shadow:0 12px 26px rgba(13,59,44,.22);}
.sec-more .ar{font-weight:700;}
@media(max-width:780px){.sec-more{margin-top:24px;}.sec-more a{margin-top:16px;padding:13px 26px;}}

/* ───────── 암 클리닉 전용 글자 크기 (2026-09-22 대표님 지시) ─────────
   「본문 가장 작은 글씨를 재고, 작으면 6단계 위계에 맞춰 키워라 — 암 클리닉만」.
   ★범위를 묶은 방법: 암 클리닉 14개 화면의 <body> 에 `clinic-cancer` 표식을 달았다.
     공용 부품을 그대로 고치면 장 건강·비만·줄기세포 화면까지 전부 바뀐다(표만 21개 화면이 공유).
   ★올린 것은 「읽는 글」뿐이다 — 문단·목록·표.
     동그라미·뱃지·영문 라벨·버튼처럼 크기가 디자인의 일부인 글자는 위계상 제자리라 두었다.
   ★숫자를 박지 않고 토큰을 쓴다: 본문 --fs-body(20px) · 보조 --fs-small(17.5px).
     16px·17px 은 6단계 어디에도 없던 값이라 가장 가까운 단으로 맞춘 것이다. */
/* ★가장 많았던 원인: 이름표(class) 없이 그냥 놓인 문단은 **걸리는 규칙이 아예 없어**
   브라우저 기본값(16px)을 그대로 물려받고 있었다(5개 화면 23곳). 이런 문단을 본문 크기로 올린다. */
body.clinic-cancer .subblk p:not([class]){font-size:var(--fs-body);line-height:1.85;}
body.clinic-cancer .sub-cards .card p{font-size:var(--fs-body);}
body.clinic-cancer .sub-table table{font-size:var(--fs-body);}
body.clinic-cancer .sub-gallery figcaption{font-size:var(--fs-small);}
body.clinic-cancer .sub-stats .sitem .slbl{font-size:var(--fs-small);}
body.clinic-cancer .sub-quote .q-by{font-size:var(--fs-small);}
body.clinic-cancer .sub-cards .card .card-cta{font-size:var(--fs-small);}


/* ═══════ 단락 배경 자동 번갈이 (2026-09-22 대표님 결정) ═══════
   ★왜: 그전에는 색이 **부품 종류에 붙어** 있었다(.sub-2col=크림 / .sub-cards=흰색 …).
     번갈이 규칙은 어디에도 없어서, 같은 종류가 이어지면 같은 색이 연달아 나왔다
     — 실측 결과 **46개 화면 중 40개**에서 연속 구간이 있었다.
   ★어떻게: 부품이 아니라 **순서**로 칠한다. 형제 `section` 중 홀수=흰색 / 짝수=크림.
     사진 띠(.subhero·.sub-full)·진초록 띠(.sub-stats·.sub-cta)도 순서를 한 칸 차지하므로,
     그 띠를 건너뛴 앞뒤 단락이 자연스럽게 반대 색이 된다.
   ★건드리지 않는 것: 사진·진초록 띠 자체와 인용 띠(.quote-band)는 제 배경을 그대로 쓴다.
   ★이 규칙이 부품별 배경(.sub-2col 등)을 덮으려면 선택자가 더 세야 한다 →
     `section.subblk:nth-of-type()` (요소+클래스+의사클래스)로 둔다. 값을 바꿀 땐 이 점을 같이 확인할 것. */
/* ★★2026-09-22 즉시 수정 — 앞선 규칙이 `background`(통째 지정)여서 **배경 사진·그라데이션을 지웠다.**
   그 바람에 거의 모든 화면 맨 아래 **상담 띠(.sub-cta) 45곳의 진초록 배경이 사라져** 흰 글자가
   밝은 바탕에 놓였다(대표님이 오시는 길 캡처로 지적). 배경 있는 띠는 손대선 안 된다.
     ① `background` → **`background-color`** 로 바꿔 사진·그라데이션은 건드리지 않는다.
     ② 제 색을 가진 띠는 아예 제외한다 — 통계 띠(.sub-stats)·구분 띠(.partband).
   ★교훈: 색만 바꿀 때 `background` 단축 속성을 쓰면 사진까지 날아간다. `background-color` 를 쓸 것. */
section.subblk:not(.sub-stats):not(.partband):nth-of-type(odd),
section.sub-cert:nth-of-type(odd){background-color:#fff;}
section.subblk:not(.sub-stats):not(.partband):nth-of-type(even),
section.sub-cert:nth-of-type(even){background-color:var(--cream);}
/* ★일부러 규칙 밖에 두는 곳
   · 줄기세포 항노화(stem-antiaging): 「같은 주사에 딸린 설명+추천대상」을 **같은 바탕으로 묶어** 두었다
     (2026-09-04 대표님 지시 — 한 주사가 둘로 보이던 것을 고친 것). id 로 칠해 두어 이 규칙보다 세다.
     번갈이보다 「한 주사 = 한 덩어리」가 우선이라 그대로 둔다.
   · 옅은 색(#f7faf8)·진초록으로 일부러 칠한 단락도 그대로다. */