@charset "UTF-8";
/* 목 통증 전용 — 공통은 ../../../common/css/common.css · sub.css (체크 목록 · 카드 · 포인트 행 · 단계 · 관련 링크 · FAQ · 감수 박스)
   통증 4페이지(목 · 허리 · 어깨 · 무릎)는 같은 뼈대 · 섹션별로 다른 값은 새 클래스 대신 변수만 덮어씀 */

/* 한신의 치료 : 왼쪽 세로 사진 (보약 클리닉 「다른 점」 사진과 같은 4:5) */
.tx-photo img{aspect-ratio:4/5}
@media (max-width:999px){.tx-photo img{aspect-ratio:4/3;object-position:50% 35%}}   /* 한 줄로 쌓이면 사진이 너무 길어지지 않게 */

/* 치료 과정 : 단계 아래 관련 링크 카드 2개 + 비급여 안내 (가운데) */
.process .rel{margin-top:40px}
.process .rel a{min-height:132px}
.process .notice{margin-top:28px;text-align:center}

/* =========================================================
   디자인 디벨롭 (2026-10-06) — 목 통증을 통증 4페이지 기준본으로
   · 공통(sub.css)은 건드리지 않고 이 페이지에서만 덮어씀
   · 확정되면 같은 내용을 허리 · 어깨 · 무릎에도 옮김
   ========================================================= */

/* 원인 · 치료 방법 카드 — 번호와 제목이 먼저 읽히도록 */
.cause .card .n,.methods .card .n{font-size:13px;letter-spacing:.2em;font-weight:600;color:var(--gold)}
.cause .card p,.methods .card p{margin-top:11px;font-size:15px;line-height:1.85}
.cause .card--photo .ph img,.methods .card--photo .ph img{aspect-ratio:4/3}
.cause .card__body,.methods .card__body{padding:28px 28px 30px}

/* 치료 과정 — 번호를 키우고 칸을 넓혀 표처럼 보이지 않게 */
.process .proc{border-top:2px solid var(--ink)}
.process .proc li{padding:36px 26px 38px}
.process .proc .n{font-size:13px;letter-spacing:.2em;font-weight:600;color:var(--gold)}
.process .proc p{margin-top:10px;font-size:15px;line-height:1.8}

@media (max-width:999px){
  .process .proc li{padding:26px 18px 28px}
}

/* ===== 엘리멘터 max-width · margin · flex 보정 (tools/sync_theme.py 자동 생성 · 직접 고치지 말 것) ===== */
.elementor.elementor.elementor.elementor .process .rel{margin-top:40px}
.elementor.elementor.elementor.elementor .process .notice{margin-top:28px}
.elementor.elementor.elementor.elementor .cause .card p,.elementor.elementor.elementor.elementor .methods .card p{margin-top:11px}
.elementor.elementor.elementor.elementor .process .proc p{margin-top:10px}