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

/* 형태 안내
   10-13 : 공진단 「종류 안내」와 같은 형식으로 — 한자 워터마크 · 금색 윗선 · 번호 붙인 베이지 항목
           카드가 4장이라 글자와 한자를 공진단보다 한 단계 작게. price-card 는 다른 페이지도 쓰므로 이 섹션에서만 덮어씀 */
.types{background:linear-gradient(180deg,#FDFAF4 0%,#FDFAF4 30%,#F4ECDF 100%)}
.types .price-card{position:relative;overflow:hidden;isolation:isolate;padding:36px 26px 28px;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 .types .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)}
.types .price-card::before{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.types .price-card .hj{position:absolute;z-index:-1;right:-4px;top:-14px;font-family:var(--kserif);font-size:132px;line-height:1;color:var(--gold);opacity:.08;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.types .price-card h3{margin-top:12px;font-family:var(--kserif);font-size:clamp(20px,calc(20px + (100vw - 1000px) * 6 / 920),26px);font-weight:500;letter-spacing:-.03em}
.types .price-card > p{font-size:14.5px}
.types .price-card ul{margin-top:22px;border-top:0;display:grid;gap:8px}
.types .price-card li{display:flex;align-items:center;gap:11px;padding:13px 14px;border:0;border-radius:12px;background:#F8F4ED;font-size:15.5px}
.types .price-card li small{font-size:12.5px}
.types .price-card li > i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid #D9C7A2;font-family:var(--lat);font-style:normal;font-size:11px;font-weight:500;letter-spacing:0;color:var(--gold)}
.types .price-card:hover{translate:0 -6px;border-color:#D9C7A2;box-shadow:0 26px 50px rgba(120,95,50,.12)}
.types .price-card:hover .hj{opacity:.14;transform:scale(1.05)}
.types .notice{margin-top:32px;text-align:center}
@media (max-width:999px){
  .types .price-card{padding:30px 22px 22px}
  .types .price-card::before{left:22px;right:22px}
  .types .price-card .hj{font-size:120px}
}

/* 원내 제조 과정 : 단계 5칸 아래 안내 (가운데) */
/* 10-13 : 회색 대신 「치료 과정 · 진행 과정」 공통 그라데이션 — 고아 올리는 과정과 결이 맞음 */
.make{background:linear-gradient(180deg,#FBF8F2 0,#F6F0E5 640px,#F2EADB 100%)}   /* 10-19 : 앞 흰 섹션과 경계가 살도록 미색에서 시작 (sub.css 진행 과정과 동일) */
.make .notice{margin-top:32px}

/* 복용 방법 · 보관 : 카드 3장 아래 안내 (가운데) */
.care .notice{margin-top:32px}
/* 10-13 : 설명 길이가 달라 태그 높이가 제각각이라 바닥에 붙임 (공진단과 동일) */
.care .card{display:flex;flex-direction:column}
.care .card .tags{margin-top:auto;padding-top:18px}

/* 10-16 : 복용 안내 일러스트 — 이 섹션은 3칸이라 카드가 넓어 첩약(4칸)보다 그림이 커 보임.
   그림만 같은 크기로 줄이고 둘레는 일러스트 배경색으로 이어 붙임 */
@media (min-width:1000px){
  #care .card--photo .ph{background:#FBF8F2;display:grid;place-items:center;padding:18px 0}
  #care .card--photo .ph img{width:73.5%;height:auto}
}

/* ===== 엘리멘터 max-width · margin · flex 보정 (tools/sync_theme.py 자동 생성 · 직접 고치지 말 것) ===== */
.elementor.elementor.elementor.elementor .types .price-card h3{margin-top:12px}
.elementor.elementor.elementor.elementor .types .price-card ul{margin-top:22px}
.elementor.elementor.elementor.elementor .types .price-card li{align-items:center}
.elementor.elementor.elementor.elementor .types .price-card li > i{flex:none}
.elementor.elementor.elementor.elementor .types .notice{margin-top:32px}
.elementor.elementor.elementor.elementor .make .notice{margin-top:32px}
.elementor.elementor.elementor.elementor .care .notice{margin-top:32px}
.elementor.elementor.elementor.elementor .care .card{flex-direction:column}
.elementor.elementor.elementor.elementor .care .card .tags{margin-top:auto}

/* 엘리멘터 배경 보정 (자동 생성 · 배경 그림만 되살림) */
.elementor.elementor.elementor.elementor.elementor charset "UTF-8";
 

 
.types{background-image:linear-gradient(180deg,#FDFAF4 0%,#FDFAF4 30%,#F4ECDF 100%) !important}
.elementor.elementor.elementor.elementor.elementor .make{background-image:linear-gradient(180deg,#FBF8F2 0,#F6F0E5 640px,#F2EADB 100%) !important}