@charset "UTF-8";
/* 한신슬림환 전용 — 공통은 ../../../common/css/common.css · sub.css
   섹션별로 다른 값은 새 클래스 대신 변수만 덮어씀 */

/* 다른 점 : 대표원장 사진 (제품 박스는 아래 3단계 카드로, 09-18) */
.diff-photo img{aspect-ratio:4/5;object-position:50% 12%}

/* 한신슬림환 4단계 — 09-29 「다른 점」에서 떼어 별도 섹션(#levels) (09-23 원장님 피드백으로 3 → 4단계) */
.levels .sec-lead{max-width:760px;margin-inline:auto}
.levels-grid{margin-top:var(--head-gap,64px)}
.levels-foot{justify-content:center}   /* 단계 카드 아래 비대면 신청 버튼 */
.level{text-align:center;--lv:#6E9E7A}
.level--2{--lv:#6F86BD}
.level--3{--lv:#9474B8}
.level--4{--lv:#C2799E}
.level .ph{background:#FAF3E4}
.level .ph img{aspect-ratio:4/3;object-fit:contain}
.level .n{color:var(--lv)}
.level h3{margin-top:8px}
.gauge{display:flex;justify-content:center;gap:5px;margin-top:12px}
.gauge i{width:30px;height:6px;border-radius:3px;background:#E6E2DA}
.level--1 .gauge i:nth-child(-n+1),.level--2 .gauge i:nth-child(-n+2),.level--3 .gauge i:nth-child(-n+3),.level--4 .gauge i{background:var(--lv)}
.gauge i{width:24px}
/* 4단계 : 제품 사진을 아직 못 받아 자리만 표시 (원장님 자료 요청) */
.level-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border:1px dashed #D8D2C4;background:#FAF3E4}
.level-ph span{font-size:13.5px;letter-spacing:-.02em;color:#A99F8C}

/* 진행 과정 아래 유지관리 : 흰 라운드 박스 안 위 타이틀 · 설명 + 아래 그래프 (09-18) */
.process .maintain{margin-top:72px;padding:clamp(28px,calc(28px + (100vw - 1000px) * 28 / 920),56px);border-radius:20px;background:#fff;text-align:center}
.maintain-title{font-size:32px;line-height:1.4;font-weight:600;letter-spacing:-.045em}
.maintain-text{max-width:760px;margin:16px auto 0;font-size:17px;line-height:1.85;color:var(--ink-2)}
.maintain .graph{max-width:900px;margin:36px auto 0;padding:0;border-radius:0;background:none}
.maintain .graph-legend{justify-content:center}
.maintain .graph-m{display:none}   /* 모바일 전용 그래프 (10-01) — PC 그래프는 690 이하에서 글자가 너무 작아짐 */
@media (max-width:690px){
  .maintain .graph-pc{display:none}
  .maintain .graph-m{display:block}
  .maintain .graph-legend{gap:6px 16px;font-size:13px}
}

/* 프로그램 · 비용 카드 : 카드 본체는 sub.css 17 */
.kit{margin-top:64px;padding:clamp(28px,calc(28px + (100vw - 1000px) * 28 / 920),56px);border-radius:20px;background:var(--bg-2);text-align:center}   /* 프로그램 구성 : 회색 라운드 배경 안 사진 카드 캐러셀 (09-18) — 가격표와 구분 */
.kit .card{border-color:transparent}
.kit-title{font-size:32px;line-height:1.4;font-weight:600;letter-spacing:-.045em}   /* 유지관리 박스 타이틀과 같은 크기 */
.kit-car{margin-top:28px}
.kit-card .card__body{padding:22px 20px 26px}
.kit-card h3{margin-top:0;font-size:19px}
.kit-card p{margin-top:8px;font-size:14.5px;line-height:1.7}
.program .notice,.cases .notice{text-align:center}
.cases-foot{justify-content:center}   /* 치료사례 보기 (커뮤니티 › 치료사례 · 후기) */   /* 박스 밖 안내 문구는 가운데 */
.program .notice{margin-top:24px}

/* 체성분 기록 : 사례 3 + 안내 카드 (4단, 09-18) */
.case-cta{display:flex;flex-direction:column;padding:clamp(24px,calc(24px + (100vw - 1000px) * 14 / 920),38px);border-radius:16px;background:var(--green);color:#fff}
.case-k{margin-top:2px;font-size:13px;letter-spacing:-.02em;color:var(--muted)}   /* 큰 숫자가 무엇인지 (체지방량) */
.case-cta .k{font-family:var(--lat);font-size:12.5px;letter-spacing:.2em;color:#C9B07C}
.case-cta h3{margin-top:18px;font-size:26px;line-height:1.4;font-weight:600;letter-spacing:-.045em}
.case-cta p:not(.k){margin-top:14px;font-size:15px;line-height:1.75;font-weight:300;color:#C9D4CF}
.case-cta .acts{margin-top:auto;padding-top:24px;--acts-gap:10px}

@media (max-width:999px){
  .levels-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--head-gap)}
  .case-cta{text-align:center}
  .case-cta .acts{justify-content:center}
  .case-cta h3{font-size:22px}
  .kit{margin-top:var(--head-gap)}
  .process .maintain{margin-top:var(--head-gap)}
  .maintain-title{font-size:26px}
  .kit-title{font-size:26px}
}
@media (max-width:690px){
  .levels-grid{grid-template-columns:1fr}
  .maintain-title{font-size:22px}
  .kit-title{font-size:22px}
}

/* ===== 복용 전 확인 — 복용 중 이상 반응 안내 강조 ===== */
.safety .notice--alert{max-width:820px;margin:34px auto 0;padding:22px 28px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;background:#fff;font-size:15.5px;line-height:1.85;font-weight:300;color:var(--ink-2);text-align:left}
.safety .notice--alert b{font-weight:600;color:var(--ink)}
@media (max-width:690px){
  .safety .notice--alert{margin-top:26px;padding:18px 20px;font-size:14.5px}
}

/* ===== 프로그램 카드 — 기간 표기(1+1 · 2+3)를 카드 안에서 바로 읽히게 ===== */
.price-card .dur{display:grid;gap:5px;margin-top:11px}
.price-card .dur__i{display:grid;grid-template-columns:auto minmax(0,auto);justify-content:center;align-items:center;gap:11px;padding:8px 13px;border-radius:9px;background:var(--bg-2)}
.price-card .dur__i b{font-family:var(--lat);font-size:14.5px;font-weight:600;color:var(--gold)}
.price-card .dur__i i{font-style:normal;font-size:12.5px;line-height:1.45;font-weight:400;letter-spacing:-.04em;color:var(--muted)}
.price-card .dur__i i em{font-style:normal;padding:0 1px;color:var(--line)}
@media (max-width:999px){
  .price-card .dur{max-width:420px;margin-inline:auto}
}

/* ===== 구성 카드 — 포함 프로그램 뱃지 ===== */
.kit-card .kit-tag{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:9px}
.kit-card .kit-tag span{padding:4px 11px 5px;border:1px solid rgba(176,138,63,.45);border-radius:999px;background:rgba(176,138,63,.07);font-size:12px;line-height:1.3;font-weight:600;letter-spacing:-.02em;color:var(--gold)}
.kit-card .kit-tag + p{margin-top:10px}

/* 섹션 배경(흰 · 회색)에 따라 박스 색 반대로 (09-29 교차 배경 재정렬) */
.sec--gray .kit{background:#fff}
.sec:not(.sec--gray) .maintain{background:var(--bg-2)}

/* =========================================================
   피그마 시안 반영 (2026-09-30) — 시안전달용/한신슬림환.jpg 16:24 기준
   · 1920 시안 수치는 @media (min-width:1000px) 안에만
   ========================================================= */
#summary{background:#F8F7F3}
/* 사람마다 다르게 : 한지 + 아래 금색 점선 · 초록 안개 */
#diff{background:#F8F2E7 url(../../../../images/pages/treatment/diet/slim/bg-diff-dots-fig.jpg) center bottom/cover no-repeat}
/* 4단계 : 상자 사진을 칸에 꽉 채움 */
.level .ph img{object-fit:cover}
/* 5단계 진행 : 흰색 → 베이지 */
#process .maintain{background:#FDFCFA}
.maintain-text{max-width:none}
/* 복용 전 확인 : 창호 자연광 */
#safety{background:#F7F4F0 url(../../../../images/pages/treatment/diet/slim/bg-safety-window-fig.jpg) center/cover no-repeat}

/* 프로그램 카드 : 보약 처방 안내 A안 — 한자 워터마크(速 · 完 · 極) · 금색 윗선 · 명조 제목 · 번호 베이지 칸 */
.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:32px;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 > span{flex:1;min-width:0}
.program .price-card li > i{flex:none;align-self:flex-start;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 .dur__i{grid-template-columns:34px minmax(0,1fr);justify-content:stretch;background:#fff}
.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)}

/* 프로그램 구성 : 4 × 2 격자 · 마지막 칸은 맞춤 진료 안내 */
.kit{background:linear-gradient(180deg,#F9F5EC 0%,#FDFBF7 100%)}
.kit-grid{margin-top:32px;gap:20px}
.kit-grid .kit-card .ph img{aspect-ratio:3/2}
.kit-msg{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:32px 30px;border:1px solid #E6DDCB !important;border-radius:16px;background:#FBF8F2;text-align:left}
.kit-msg::before{content:"";position:absolute;left:30px;right:30px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.kit-msg .hj{position:absolute;z-index:-1;right:-8px;bottom:-26px;font-family:var(--kserif);font-size:200px;line-height:1;color:var(--gold);opacity:.08}
.kit-msg .k{font-family:var(--lat);font-size:12.5px;letter-spacing:.2em;color:var(--gold)}
.kit-msg h3{margin-top:14px;font-family:var(--kserif);font-size:25px;line-height:1.45;font-weight:500;letter-spacing:-.04em}
.kit-msg p{margin-top:14px;font-size:14.5px;line-height:1.75;font-weight:300;color:var(--ink-2)}
.kit-msg__foot{margin-top:auto;padding-top:18px;font-size:13px;font-weight:600;letter-spacing:-.02em;color:#8E7340}
.kit-msg__foot::before{content:"";display:inline-block;width:18px;height:1px;margin-right:8px;vertical-align:middle;background:var(--gold)}

@media (min-width:1000px){
  .program .notice{margin-top:64px}
  #diff{--sec-pb:150px}
  #process{--sec-pt:152px;--sec-pb:150px}
  #process .maintain{margin-top:75px}
  #cases{--sec-pb:98px}   /* sec--tight 96 + 2 (시안) */
  #safety .chk-list--toggle label{padding-block:18.4px}   /* 시안 칸 높이 */
  .kit{padding-top:97px;padding-bottom:88px}
  .program .tele-box--green{margin-top:64px}
  .kit-grid{margin-top:27px}
}
@media (max-width:999px){
  .kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:690px){
  .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:26px}
  .program .price-card li{padding:13px 14px}
  /* 기간 옵션(「집중감량 1개월 + 유지관리 1개월」)이 한 줄에 들어가게 안쪽 여백 줄임 (10-01) */
  .program .price-card{padding-left:16px;padding-right:16px}
  .program .price-card li{gap:10px;padding:13px 12px}
  .program .price-card .dur__i{gap:8px;padding:8px 10px;grid-template-columns:30px minmax(0,1fr)}
  .program .price-card .dur__i b{font-size:13.5px}
  .program .price-card .dur__i i{word-break:keep-all}
  .kit-grid{grid-template-columns:1fr}
}

/* 10-21 : 휴대폰 카드 제목을 섹션 타이틀과 차이 나게 (공통 카드 제목 18 · 480 이하 17) */
@media (max-width:690px){
  .kit-card h3{font-size:18px}
}
@media (max-width:480px){
  .kit-card h3{font-size:17px}
}

/* ===== 엘리멘터 max-width · margin · flex 보정 (tools/sync_theme.py 자동 생성 · 직접 고치지 말 것) ===== */
.elementor.elementor.elementor.elementor .levels .sec-lead{max-width:760px;margin-inline:auto}
.elementor.elementor.elementor.elementor .levels-grid{margin-top:var(--head-gap,64px)}
.elementor.elementor.elementor.elementor .levels-foot{justify-content:center}
.elementor.elementor.elementor.elementor .level h3{margin-top:8px}
.elementor.elementor.elementor.elementor .gauge{justify-content:center;margin-top:12px}
.elementor.elementor.elementor.elementor .level-ph{align-items:center;justify-content:center}
.elementor.elementor.elementor.elementor .process .maintain{margin-top:72px}
.elementor.elementor.elementor.elementor .maintain-text{max-width:760px;margin:16px auto 0}
.elementor.elementor.elementor.elementor .maintain .graph{max-width:900px;margin:36px auto 0}
.elementor.elementor.elementor.elementor .maintain .graph-legend{justify-content:center}
.elementor.elementor.elementor.elementor .kit{margin-top:64px}
.elementor.elementor.elementor.elementor .kit-car{margin-top:28px}
.elementor.elementor.elementor.elementor .kit-card h3{margin-top:0}
.elementor.elementor.elementor.elementor .kit-card p{margin-top:8px}
.elementor.elementor.elementor.elementor .cases-foot{justify-content:center}
.elementor.elementor.elementor.elementor .program .notice{margin-top:24px}
.elementor.elementor.elementor.elementor .case-cta{flex-direction:column}
.elementor.elementor.elementor.elementor .case-k{margin-top:2px}
.elementor.elementor.elementor.elementor .case-cta h3{margin-top:18px}
.elementor.elementor.elementor.elementor .case-cta p:not(.k){margin-top:14px}
.elementor.elementor.elementor.elementor .case-cta .acts{margin-top:auto}
@media (max-width:999px){.elementor.elementor.elementor.elementor .levels-grid{margin-top:var(--head-gap)}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .case-cta .acts{justify-content:center}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .kit{margin-top:var(--head-gap)}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .process .maintain{margin-top:var(--head-gap)}}
.elementor.elementor.elementor.elementor .safety .notice--alert{max-width:820px;margin:34px auto 0}
@media (max-width:690px){.elementor.elementor.elementor.elementor .safety .notice--alert{margin-top:26px}}
.elementor.elementor.elementor.elementor .price-card .dur{margin-top:11px}
.elementor.elementor.elementor.elementor .price-card .dur__i{justify-content:center;align-items:center}
@media (max-width:999px){.elementor.elementor.elementor.elementor .price-card .dur{max-width:420px;margin-inline:auto}}
.elementor.elementor.elementor.elementor .kit-card .kit-tag{flex-wrap:wrap;justify-content:center;margin-top:9px}
.elementor.elementor.elementor.elementor .kit-card .kit-tag + p{margin-top:10px}
.elementor.elementor.elementor.elementor .maintain-text{max-width:none}
.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 > span{flex:1}
.elementor.elementor.elementor.elementor .program .price-card li > i{flex:none}
.elementor.elementor.elementor.elementor .program .price-card .dur__i{justify-content:stretch}
.elementor.elementor.elementor.elementor .kit-grid{margin-top:32px}
.elementor.elementor.elementor.elementor .kit-msg{flex-direction:column}
.elementor.elementor.elementor.elementor .kit-msg h3{margin-top:14px}
.elementor.elementor.elementor.elementor .kit-msg p{margin-top:14px}
.elementor.elementor.elementor.elementor .kit-msg__foot{margin-top:auto}
.elementor.elementor.elementor.elementor .kit-msg__foot::before{margin-right:8px}
@media (min-width:1000px){.elementor.elementor.elementor.elementor .program .notice{margin-top:64px}}
@media (min-width:1000px){.elementor.elementor.elementor.elementor #process .maintain{margin-top:75px}}
@media (min-width:1000px){.elementor.elementor.elementor.elementor .program .tele-box--green{margin-top:64px}}
@media (min-width:1000px){.elementor.elementor.elementor.elementor .kit-grid{margin-top:27px}}

/* 엘리멘터 배경 보정 (자동 생성 · 배경 그림만 되살림) */
.elementor.elementor.elementor.elementor.elementor #diff{background-image:url(../../../../images/pages/treatment/diet/slim/bg-diff-dots-fig.jpg) !important}
.elementor.elementor.elementor.elementor.elementor #safety{background-image:url(../../../../images/pages/treatment/diet/slim/bg-safety-window-fig.jpg) !important}
.elementor.elementor.elementor.elementor.elementor .kit{background-image:linear-gradient(180deg,#F9F5EC 0%,#FDFBF7 100%) !important}