@charset "UTF-8";
/* 교통사고 후유증 전용 — 공통은 ../../../common/css/common.css · sub.css (카드 · 포인트 행 · 단계 · 감수 박스)
   섹션별로 다른 값은 새 클래스 대신 변수만 덮어씀 */

/* 단계별 치료 : 사진 카드 3장 (번호 라벨 줄바꿈) · 아래 보험 안내는 가운데 */
.stages .card__body .n{display:block}
.stages .notice{margin-top:32px;text-align:center}

/* 대표원장 진료 : 추나 진료 사진 (세로) */
.doc-photo img{aspect-ratio:4/5;object-position:50% 30%}

/* 자동차보험 진료 절차 : 5단계 아래 배너 2개 (10-08 배너 형식으로 교체) */
.insurance .note-split{margin-top:40px}
#insurance .proc li{text-align:center}                 /* 다른 진료 페이지 단계와 같게 가운데 정렬 */

/* 999 이하 : 단계 카드 3장은 3열 유지(한신슬림환 단계 카드와 같게) · 690 이하 1열 */
@media (max-width:999px){
  .stages .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stages .card__body{padding:20px 18px 24px}
  .stages .card h3{font-size:18px}
  .stages .card p{font-size:14.5px}
}
@media (max-width:690px){
  .stages .grid-3{grid-template-columns:1fr}
}

/* 자동차보험 : 딥그린 바탕 (10-07) — 단계 선 · 글자 · 안내 상자를 어두운 바탕에 맞춤 */
#insurance .proc{border-top-color:rgba(255,255,255,.5)}                       /* 위 굵은 선 (밝은 화면의 진한 선에 해당) */
#insurance .proc li{border-bottom-color:rgba(255,255,255,.16)}               /* 칸 아래 · 사이 구분선은 연하게 */
#insurance .proc li:not(:nth-child(5n)){border-right-color:rgba(255,255,255,.16)}
#insurance .proc .n{color:#9FB0A9}
#insurance .proc h3{color:#fff}
#insurance .proc p{color:#C7CFCB}
#insurance .note-box{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#C7CFCB}
#insurance .note-box small{color:var(--yellow)}
#insurance .note-box strong{color:#fff}
#insurance .note-box span{color:#9FB0A9}
#insurance .note-box--link .go{border-color:var(--yellow);color:var(--yellow)}
/* 어두운 바탕이라 hover 는 밝은 쪽으로 반전 (밝은 바탕의 .rel a:hover 와 반대 방향) */
#insurance .note-box--link:hover{background:#F7F5EC;border-color:#F7F5EC;color:#4E5752}
#insurance .note-box--link:hover small{color:var(--accent)}
#insurance .note-box--link:hover strong{color:#1E3029}
#insurance .note-box--link:hover span{color:#4E5752}
#insurance .note-box--link:hover .go{background:#1E3029;border-color:#1E3029;color:var(--yellow)}

/* 시기별 단계 : 아래로 갈수록 진해지는 그라데이션 (10-08) — 바로 아래 크림색 「대표원장 직접 진료」 섹션과 경계가 보이도록 */
#stages{background:linear-gradient(180deg,#F9F6F2 0%,#F6F1E8 55%,#EFE7DA 100%)}

/* 시기별 단계 : 사진 4:3 (10-08) — 원본이 4:3 이라 잘림 없이 그대로 */
#stages .card--photo .ph img{aspect-ratio:4/3}

/* ===== 엘리멘터 max-width · margin · flex 보정 (tools/sync_theme.py 자동 생성 · 직접 고치지 말 것) ===== */
.elementor.elementor.elementor.elementor .stages .notice{margin-top:32px}
.elementor.elementor.elementor.elementor .insurance .note-split{margin-top:40px}

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