@charset "UTF-8";
/* 소아성장 클리닉 전용 — 공통은 ../../../common/css/common.css · sub.css (가격 카드 · 비대면 안내 박스 · 감수 박스 = sub.css 17)
   섹션별로 다른 값은 새 클래스 대신 변수만 덮어씀 */

/* 상단 하위 메뉴 : 진료안내 중분류 7개 */

/* 한신 성장 관리 : 원장 약재 확인 사진 (세로) */
.care-photo img{aspect-ratio:4/5;object-position:50% 45%}

/* 성장 관리 과정 : 4단계 (공통 .proc 는 5칸 기준) */
@media (min-width:1000px){
  .process .proc{grid-template-columns:repeat(4,minmax(0,1fr))}
  .process .proc li:nth-child(4n){border-right:0}
}

/* 성장 프로그램 : 구성 카드 아래 비급여 안내 (가운데) */
/* 10-13 : 공진단 · 경옥고 「종류 · 형태 안내」와 같은 형식으로 — 한자 워터마크 · 금색 윗선 · 번호 붙인 베이지 항목
   price-card 는 다른 페이지도 쓰므로 이 섹션에서만 덮어씀 */
.program{background:linear-gradient(180deg,#FDFAF4 0%,#FDFAF4 30%,#F4ECDF 100%)}
.program .price-card{position:relative;overflow:hidden;isolation:isolate;padding:44px 36px 34px;border-color:#E9E2D6;border-radius:18px;box-shadow:0 18px 40px rgba(120,95,50,.06);text-align:left;transition:translate .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
html.js-anim .program .price-card.rv{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.program .price-card::before{content:"";position:absolute;left:36px;right:36px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.program .price-card .hj{position:absolute;z-index:-1;right:-6px;top:-18px;font-family:var(--kserif);font-size:190px;line-height:1;color:var(--gold);opacity:.08;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.program .price-card h3{margin-top:14px;font-family:var(--kserif);font-size:30px;font-weight:500;letter-spacing:-.03em}
.program .price-card > p{font-size:15.5px}
.program .price-card ul{margin-top:28px;border-top:0;display:grid;gap:10px}
.program .price-card li{display:flex;align-items:center;gap:14px;padding:15px 18px;border:0;border-radius:12px;background:#F8F4ED}
.program .price-card li > i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid #D9C7A2;font-family:var(--lat);font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--gold)}
.program .price-card:hover{translate:0 -6px;border-color:#D9C7A2;box-shadow:0 26px 50px rgba(120,95,50,.12)}
.program .price-card:hover .hj{opacity:.14;transform:scale(1.05)}
.program .notice{margin-top:32px;text-align:center}
@media (max-width:999px){
  .program .price-card{padding:30px 22px 22px}
  .program .price-card::before{left:22px;right:22px}
  .program .price-card .hj{font-size:140px}
  .program .price-card h3{font-size:25px}
  .program .price-card li{padding:13px 14px}
}

/* 생활 습관
   10-14 : 1180px 한 줄로 가던 목록을 사진 + 글 좌우 번갈이로.
           짝수 줄은 사진을 오른쪽으로 보내되 칸 비율을 뒤집어, 사진 칸 폭은 세 줄 모두 같게 맞춤 */
.habit .hb{display:grid;gap:clamp(44px,5vw,72px)}
.habit .hb > li{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,calc(32px + (100vw - 1000px) * 32 / 920),64px)}
.habit .hb > li:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* 줄 사이 옅은 구분선 (첫 줄 위에는 없음) */
.habit .hb > li + li::after{content:"";position:absolute;left:0;right:0;top:calc(clamp(44px,5vw,72px) / -2);height:1px;background:var(--line)}
.habit .hb > li:nth-child(even) > .ph{order:2}
.habit .hb .ph{border-radius:14px;box-shadow:0 18px 44px rgba(120,95,50,.10)}
.habit .hb .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.habit .hb .n{display:flex;align-items:center;gap:16px;font-family:var(--lat);font-size:30px;line-height:1;font-weight:400;letter-spacing:.04em;color:#CBB98E}
.habit .hb .n::after{content:"";width:56px;height:1px;background:var(--gold);opacity:.45}
.habit .hb h3{margin-top:10px;font-size:24px;line-height:1.4;font-weight:600;letter-spacing:-.04em}
.habit .hb p{margin-top:12px;font-size:16px;line-height:1.85;font-weight:300;color:var(--ink-2)}
.habit .hb .tags{margin-top:18px}
.habit .notice{margin-top:32px}

@media (max-width:999px){
  .habit .hb > li,
  .habit .hb > li:nth-child(even){grid-template-columns:minmax(0,1fr);gap:24px}
  .habit .hb > li:nth-child(even) > .ph{order:0}
  .habit .hb .ph img{aspect-ratio:3/2}
}
@media (max-width:690px){
  /* 10-21 : 휴대폰은 작고 촘촘하게 — 제목은 카드 제목과 같은 18(480 이하 17) */
  .habit .hb{gap:36px}
  .habit .hb > li + li::after{top:-18px}
  .habit .hb > li,
  .habit .hb > li:nth-child(even){gap:16px}
  .habit .hb .n{gap:12px;font-size:22px}
  .habit .hb .n::after{width:40px}
  .habit .hb h3{margin-top:8px;font-size:18px}
  .habit .hb p{margin-top:8px;font-size:14.5px;line-height:1.75}
  .habit .hb .tags{margin-top:12px;justify-content:center}
  .habit .hb > li{text-align:center}   /* 가운데 정렬 — 번호 옆 선은 빼고 번호만 */
  .habit .hb .n{justify-content:center}
  .habit .hb .n::after{display:none}
}
@media (max-width:480px){
  .habit .hb h3{font-size:17px}
}

/* ===== 엘리멘터 max-width · margin · flex 보정 (tools/sync_theme.py 자동 생성 · 직접 고치지 말 것) ===== */
.elementor.elementor.elementor.elementor .program .price-card h3{margin-top:14px}
.elementor.elementor.elementor.elementor .program .price-card ul{margin-top:28px}
.elementor.elementor.elementor.elementor .program .price-card li{align-items:center}
.elementor.elementor.elementor.elementor .program .price-card li > i{flex:none}
.elementor.elementor.elementor.elementor .program .notice{margin-top:32px}
.elementor.elementor.elementor.elementor .habit .hb > li{align-items:center}
.elementor.elementor.elementor.elementor .habit .hb .n{align-items:center}
.elementor.elementor.elementor.elementor .habit .hb h3{margin-top:10px}
.elementor.elementor.elementor.elementor .habit .hb p{margin-top:12px}
.elementor.elementor.elementor.elementor .habit .hb .tags{margin-top:18px}
.elementor.elementor.elementor.elementor .habit .notice{margin-top:32px}
@media (max-width:690px){.elementor.elementor.elementor.elementor .habit .hb h3{margin-top:8px}}
@media (max-width:690px){.elementor.elementor.elementor.elementor .habit .hb p{margin-top:8px}}
@media (max-width:690px){.elementor.elementor.elementor.elementor .habit .hb .tags{margin-top:12px;justify-content:center}}
@media (max-width:690px){.elementor.elementor.elementor.elementor .habit .hb .n{justify-content:center}}

/* 엘리멘터 배경 보정 (자동 생성 · 배경 그림만 되살림) */
.elementor.elementor.elementor.elementor.elementor .program{background-image:linear-gradient(180deg,#FDFAF4 0%,#FDFAF4 30%,#F4ECDF 100%) !important}