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

/* 처방 과정 설명 안 「한신의 한약」 링크 */
.process .sec-lead a{text-decoration:underline;text-underline-offset:4px}

/* 다른 점 : 원장 검수 사진 */
.diff-photo img{aspect-ratio:4/5}

/* 비용 : 가격표 아래 비급여 고지 버튼 (가운데) · 녹용 부위 설명 + 공진단 링크 */
.deer{margin-top:64px;align-items:center;padding:clamp(24px,calc(24px + (100vw - 1000px) * 24 / 920),48px);border-radius:20px;background:#fff}   /* 흰 라운드 박스 안에 사진 + 설명 */
.deer-photo{border-radius:14px}
@media (min-width:1000px){
  .deer-photo{order:2}   /* PC : 글 왼쪽 · 사진 오른쪽 / 999 이하는 사진 위 */
  .deer{grid-template-columns:minmax(0,627fr) minmax(0,576fr);align-items:center}   /* 09-28 피그마 : 글 칸 넓게 · 사진 576×432 */
  .deer-text{max-width:550px}   /* 문단 줄바꿈은 그대로 · 공진단 링크 박스만 넓게 */
  .deer{padding-block:clamp(24px,calc(24px + (100vw - 1000px) * 34 / 920),58px)}   /* 사진이 432 로 줄어도 박스 높이는 시안대로 (1920 : 위아래 58) */
  .deer > div{padding-left:clamp(12px,calc(12px + (100vw - 1000px) * 40 / 920),52px)}   /* 박스 왼쪽 끝과 글 사이 여백 (1920 기준 박스 끝에서 100px) */
}
.deer-photo img{aspect-ratio:4/3}
.deer-title{font-size:26px;line-height:1.4;font-weight:600;letter-spacing:-.04em}
.deer-text{margin-top:14px;font-size:17px;line-height:1.85;font-weight:300;color:var(--ink-2)}
.gj-link{display:flex;flex-direction:column;gap:4px;margin-top:28px;padding:22px 26px;border-radius:14px;background:var(--bg-2);transition:.35s var(--ease)}
.gj-link small{font-size:13px;font-weight:600;color:var(--gold)}
.gj-link strong{font-size:18px;line-height:1.45;font-weight:600;letter-spacing:-.04em}
.gj-link span{font-size:14px;color:var(--muted)}
.gj-link:hover{background:var(--ink);color:#fff}
.gj-link:hover span{color:#B4BDBA}
.price .notice{margin-top:32px;text-align:center}   /* 박스 밖 안내 문구는 가운데 */

@media (max-width:999px){
  .deer{margin-top:var(--head-gap)}
  .deer-title{font-size:22px}
  .deer > div{text-align:center}
  .gj-link{align-items:center}
}
@media (max-width:690px){
  .deer-text{font-size:15.5px}
  .gj-link{padding:18px 20px}
  .gj-link strong{font-size:16.5px}
}

/* =========================================================
   인사말 · 진료철학 피그마 확정본(09-28)과 같은 기준
   ========================================================= */

/* ---------- 처방 안내 카드 : A안 (09-29) — 한자 워터마크 · 금색 윗선 · 명조 제목 · 번호 붙은 베이지 칸 ----------
   price-card 는 공진단 · 경옥고 등도 쓰므로 이 페이지에서만 덮어씀 */
.price .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 .price .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)}
.price .price-card::before{content:"";position:absolute;left:36px;right:36px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.price .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)}
.price .price-card h3{margin-top:14px;font-family:var(--kserif);font-size:32px;font-weight:500;letter-spacing:-.03em}
.price .price-card > p{font-size:15.5px}
.price .price-card ul{margin-top:28px;border-top:0;display:grid;gap:10px}
.price .price-card li{display:flex;align-items:center;gap:14px;padding:15px 18px;border:0;border-radius:12px;background:#F8F4ED}
.price .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)}
.price .price-card:hover{translate:0 -6px;border-color:#D9C7A2;box-shadow:0 26px 50px rgba(120,95,50,.12)}
.price .price-card:hover .hj{opacity:.14;transform:scale(1.05)}
@media (max-width:690px){
  .price .price-card{padding:30px 22px 22px}
  .price .price-card::before{left:22px;right:22px}
  .price .price-card .hj{font-size:140px}
  .price .price-card h3{font-size:26px}
  .price .price-card li{padding:13px 14px}
}

/* ---------- 09-29 피그마 시안 반영 (시안전달용/보약클리닉.jpg 16:11) ---------- */
/* 한눈에 보기 회색 · 이런 분께 흰 배경 · HANSHIN · 체크리스트 19px 는 공통(sub.css 12-1) */
/* 3대 100년의 임상 : 한지 + 아래 약재 부스러기 · 연기 무늬 */
#diff{background:#F8F3EA url(../../../images/pages/treatment/tonic/bg-why-herbal-fig.jpg) center/cover no-repeat}   /* 톤은 피그마 시안에 맞춘 보정본 */
#diff .tag{background:#fff}   /* 한지 위에서도 태그가 보이도록 흰 바탕 */
/* 처방 과정 : 한지 + 양옆 잎 그림자 */
#process{background:#F6F4F0 url(../../../images/pages/treatment/tonic/bg-process-leaf-fig.jpg) center/cover no-repeat}   /* 톤은 피그마 시안에 맞춘 보정본 */
/* 처방 안내 : 위는 아이보리, 아래로 갈수록 베이지 (녹용 박스가 흰 카드로 뜨도록) */
.price{background:linear-gradient(180deg,#FDFAF4 0%,#FDFAF4 30%,#F4ECDF 100%)}
@media (min-width:1000px){
  .price .price-cards{margin-top:32px}
  .deer-title{font-size:32px}
  #types .card h3{font-size:24px;line-height:30px}   /* 보약 종류 카드 제목 */
  #process .proc h3{font-size:24px;line-height:26px}   /* 처방 과정 단계 제목 */
}

/* ===== 엘리멘터 max-width · margin · flex 보정 (tools/sync_theme.py 자동 생성 · 직접 고치지 말 것) ===== */
.elementor.elementor.elementor.elementor .deer{margin-top:64px;align-items:center}
@media (min-width:1000px){.elementor.elementor.elementor.elementor .deer{align-items:center}}
@media (min-width:1000px){.elementor.elementor.elementor.elementor .deer-text{max-width:550px}}
.elementor.elementor.elementor.elementor .deer-text{margin-top:14px}
.elementor.elementor.elementor.elementor .gj-link{flex-direction:column;margin-top:28px}
.elementor.elementor.elementor.elementor .price .notice{margin-top:32px}
@media (max-width:999px){.elementor.elementor.elementor.elementor .deer{margin-top:var(--head-gap)}}
@media (max-width:999px){.elementor.elementor.elementor.elementor .gj-link{align-items:center}}
.elementor.elementor.elementor.elementor .price .price-card h3{margin-top:14px}
.elementor.elementor.elementor.elementor .price .price-card ul{margin-top:28px}
.elementor.elementor.elementor.elementor .price .price-card li{align-items:center}
.elementor.elementor.elementor.elementor .price .price-card li > i{flex:none}
@media (min-width:1000px){.elementor.elementor.elementor.elementor .price .price-cards{margin-top:32px}}

/* 엘리멘터 배경 보정 (자동 생성 · 배경 그림만 되살림) */
.elementor.elementor.elementor.elementor.elementor #diff{background-image:url(../../../images/pages/treatment/tonic/bg-why-herbal-fig.jpg) !important}
.elementor.elementor.elementor.elementor.elementor #process{background-image:url(../../../images/pages/treatment/tonic/bg-process-leaf-fig.jpg) !important}
.elementor.elementor.elementor.elementor.elementor .price{background-image:linear-gradient(180deg,#FDFAF4 0%,#FDFAF4 30%,#F4ECDF 100%) !important}