/* ============================================================
   Phase 2 — pain 카테고리 공통 (pilot: index · ultrasound · neck · review)
   body.p1.pain-p2 스코프. phase1.css 위에 얹혀 동작한다.
   style.css / phase1.css는 수정하지 않는다.
   ============================================================ */

/* ============================================================
   공통 좌측 정렬축 (visual alignment axis)
   - 모든 텍스트 블록은 일반 wrap(88vw)의 좌측 시작선을 공유한다
   - hero의 개별 margin-left(phase1 back용)를 pain-p2에서는 제거
   - wrap-visual(90vw)은 컨테이너만 넓고, 좌측 텍스트 축은 일반 wrap과 일치
     (이미지·비주얼은 오른쪽으로만 확장)
   ============================================================ */
body.pain-p2{--p2-gutter:clamp(18px,1.4vw,32px)}
body.pain-p2 .wrap{padding:0 var(--p2-gutter)}
body.pain-p2 .page-hero .inner{margin-left:0}
body.pain-p2 .wrap-visual{padding-left:calc((min(90vw,1800px) - min(88vw,1720px))/2 + var(--p2-gutter))}
@media(min-width:2200px){
  body.pain-p2 .wrap-visual{padding-left:calc((min(92vw,2300px) - min(90vw,2100px))/2 + var(--p2-gutter))}
}
@media(max-width:1279px){
  body.pain-p2 .wrap-visual{padding-left:var(--p2-gutter)}
}

/* ---------- 부위/시술 사진 공통 (기존 인라인 이관) ---------- */
body.pain-p2 .part-photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block}
body.pain-p2 .treat-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}

/* 인트로 좌우 반전 변형 (콘텐츠 성격에 따라 선택 사용) */
body.pain-p2 .p1-intro.rev{grid-template-columns:58fr 42fr}
body.pain-p2 .p1-intro.rev .part-photo{aspect-ratio:4/5;object-position:top}

/* ---------- 타임라인 5단 변형 (시술 흐름 등) ---------- */
body.pain-p2 .p1-tl.cols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){body.pain-p2 .p1-tl.cols-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body.pain-p2 .p1-tl.cols-5{grid-template-columns:1fr}}
body.pain-p2 .p1-tl.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){body.pain-p2 .p1-tl.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body.pain-p2 .p1-tl.cols-4{grid-template-columns:1fr}}

/* ---------- 비교 블록 (일반 vs 초음파) — 절제된 2분할 ---------- */
.p2-vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p2-vs > div{padding:36px 40px 36px 4px}
.p2-vs > div:first-child{border-right:1px solid var(--line-soft);color:var(--text-mute)}
.p2-vs > div:last-child{padding-left:40px}
.p2-vs .lbl{font-size:.85rem;font-weight:750;margin-bottom:18px;color:var(--text-mute)}
.p2-vs > div:last-child .lbl{color:var(--olive-800)}
.p2-vs ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:.98rem}
.p2-vs li{display:flex;gap:10px;align-items:flex-start}
.p2-vs li::before{content:"—";flex:none;color:var(--line)}
.p2-vs > div:last-child li::before{content:"→";color:var(--olive-700)}
.p2-vs > div:last-child li{color:var(--charcoal);font-weight:600}
@media(max-width:760px){.p2-vs{grid-template-columns:1fr}.p2-vs > div:first-child{border-right:none;border-bottom:1px solid var(--line-soft)}.p2-vs > div:last-child{padding-left:4px}}

/* ---------- 비대칭 갤러리 (1 large + 2 small) ---------- */
.p2-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
.p2-gallery > *:first-child{grid-row:1/3}
.p2-gallery .photo-slot{border-radius:10px;height:100%}
.p2-gallery img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
@media(max-width:760px){.p2-gallery{grid-template-columns:1fr;grid-template-rows:auto}.p2-gallery > *:first-child{grid-row:auto}.p2-gallery .photo-slot{aspect-ratio:4/3}}

/* ---------- 텍스트 스코프 리스트 (아이콘 카드 대체) ---------- */
.p2-scope{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:1px solid var(--line)}
.p2-scope > div{display:flex;gap:18px;align-items:baseline;padding:19px 4px;border-bottom:1px solid var(--line-soft)}
.p2-scope h4{font-size:1.05rem;flex:none;min-width:120px}
.p2-scope p{font-size:.93rem;color:var(--text-soft)}
@media(max-width:700px){.p2-scope{grid-template-columns:1fr}}

/* ---------- 부위 페이지 variation 컴포넌트 ---------- */
/* 진단형: 이미지 + 증상 리스트 결합 (elbow·wrist 등 compact 부위) */
.p2-diag{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,3.5vw,48px);align-items:start}
.p2-diag .part-photo{aspect-ratio:4/5;object-position:top}
@media(max-width:900px){.p2-diag{grid-template-columns:1fr;gap:28px}}
/* 전폭 배너형 인트로 이미지 (hip 등 심부 강조) */
.p2-banner{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:10px;display:block;margin-top:40px}
@media(max-width:760px){.p2-banner{aspect-ratio:4/3}}
/* 증상 1열 대형 리스트 (tmj 등) */
.p1-sym.one-col{grid-template-columns:1fr;max-width:780px}

/* ---------- 절차형 치료 페이지 (dochim) ---------- */
/* 텍스트 우선 인트로: 좌 큰 statement / 우 보조 설명 + 소형 이미지 */
.p2-intro-split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,4vw,64px);align-items:start}
.p2-intro-split .lead-p{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.8;color:var(--ink-soft)}
.p2-intro-split .side{padding-top:clamp(20px,3.2vw,64px)}
.p2-intro-split .side img{width:88%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin:0 0 20px;display:block}
@media(max-width:900px){.p2-intro-split .side{padding-top:0}.p2-intro-split .side img{width:100%}}
@media(max-width:900px){.p2-intro-split{grid-template-columns:1fr;gap:24px}}
/* 대시 리스트 (번호·divider 없는 적응증 나열) */
.p2-dash{display:grid;grid-template-columns:1fr 1fr;gap:10px 56px;list-style:none}
.p2-dash li{display:flex;gap:14px;align-items:baseline;font-size:1.15rem;line-height:1.65;padding:8px 0;color:var(--ink)}
.p2-dash li::before{content:"—";color:var(--olive-600);flex:none}
@media(max-width:700px){.p2-dash{grid-template-columns:1fr}}
/* 세로 대형 번호 스텝 (가로 타임라인과 차별화) */
.p2-steps{max-width:840px}
.p2-steps .st{display:flex;gap:28px;padding:26px 4px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.p2-steps .st:first-child{border-top:1px solid var(--line)}
.p2-steps .num{font-size:2rem;font-weight:800;color:var(--olive-600);flex:none;width:56px;letter-spacing:-.02em}
.p2-steps h4{font-size:1.25rem;margin-bottom:6px}
.p2-steps p{font-size:1.05rem;color:var(--text-soft)}
/* 스코프 3열 변형 */
.p2-scope.cols-3{grid-template-columns:repeat(3,1fr);gap:0 40px}
@media(max-width:900px){.p2-scope.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.p2-scope.cols-3{grid-template-columns:1fr}}

/* ---------- 기능·정렬형 치료 페이지 (chuna) ---------- */
/* 대형 동작 비주얼 우선 */
.p2-wide-visual{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:10px;display:block}
@media(max-width:760px){.p2-wide-visual{aspect-ratio:4/3}}
/* keyword 강조 리스트: 상단 액센트 라인 3열 (번호·대시와 다른 세 번째 형태) */
.p2-kw{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 44px;list-style:none}
.p2-kw li{border-top:2px solid var(--olive-600);padding-top:14px;font-size:1.14rem;font-weight:600;line-height:1.6;color:var(--charcoal)}
@media(max-width:900px){.p2-kw{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.p2-kw{grid-template-columns:1fr}}
/* 절제된 정보 블록 (건강보험 안내 등) — 배너 아님 */
.p2-note{border-left:2px solid var(--olive-600);padding:4px 0 4px 24px;max-width:760px}
.p2-note .lbl{font-size:.88rem;font-weight:700;color:var(--olive-700);margin-bottom:8px}
.p2-note p{font-size:1.05rem;color:var(--ink-soft);line-height:1.8}
/* 가로 4단 흐름 (도트·라인 타임라인과 다른 구분선 플로우) */
.p2-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.p2-flow > div{padding:4px 28px 4px 0;margin-right:28px;border-right:1px solid var(--line-soft)}
.p2-flow > div:last-child{border-right:none;margin-right:0;padding-right:0}
.p2-flow .step{font-size:.8rem;font-weight:750;letter-spacing:.06em;color:var(--text-mute);margin-bottom:10px}
.p2-flow h4{font-size:1.22rem;margin-bottom:8px}
.p2-flow p{font-size:1.02rem;color:var(--text-soft);line-height:1.7}
@media(max-width:900px){.p2-flow{grid-template-columns:1fr 1fr;gap:28px 0}.p2-flow > div:nth-child(2n){border-right:none}}
@media(max-width:600px){.p2-flow{grid-template-columns:1fr}.p2-flow > div{border-right:none;border-bottom:1px solid var(--line-soft);padding:0 0 20px;margin:0 0 20px}.p2-flow > div:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}}

/* ---------- 스포츠 손상: 종목 대형 타이포 그리드 ---------- */
.p2-sport{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;border-top:1px solid var(--line)}
.p2-sport > div{padding:24px 4px;border-bottom:1px solid var(--line-soft)}
.p2-sport h4{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;color:var(--charcoal)}
.p2-sport p{font-size:1rem;color:var(--text-soft)}
@media(max-width:900px){.p2-sport{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.p2-sport{grid-template-columns:1fr}}

/* ---------- 칼럼: 편집형 아티클 리스트 ---------- */
.p2-article{max-width:920px;border-top:1px solid var(--line)}
.p2-article a{display:block;padding:30px 4px;border-bottom:1px solid var(--line-soft);transition:.2s}
.p2-article .cat{font-size:.85rem;font-weight:700;color:var(--olive-700);margin-bottom:8px}
.p2-article h3{font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:750;letter-spacing:-.02em;margin-bottom:8px;transition:.2s}
.p2-article p{font-size:1.05rem;color:var(--text-soft);line-height:1.75;margin-bottom:10px}
.p2-article .meta{font-size:.9rem;color:var(--text-mute);transition:.2s}
.p2-article a:hover h3{color:var(--olive-800)}
.p2-article a:hover .meta{color:var(--olive-700)}

/* ---------- 후기: quote/testimonial ---------- */
.p2-quote{border-left:2px solid var(--olive-600);padding:6px 0 6px 28px;margin-bottom:36px;max-width:860px}
.p2-quote h4{font-family:var(--sans);font-weight:700;font-size:1.08rem;color:var(--charcoal);margin-bottom:12px}
.p2-quote .q{font-size:1.06rem;line-height:1.9;color:var(--ink-soft);margin-bottom:14px}
.p2-quote .meta{font-size:.85rem;color:var(--text-mute)}
.p2-quote .meta .stars{color:var(--text-mute);letter-spacing:.1em;margin-left:10px;font-size:.8rem}

/* ---------- 진료과정/후기 하단 연결 링크 줄 ---------- */
.p2-more{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}

/* ---------- 미세조정: 섹션 여백 축소 유틸 ---------- */
body.pain-p2 .section-pad-sm.pad-tight{padding:60px 0}

/* ---------- 핵심치료 보조 위계: 도침(썸네일 행) + 추나(텍스트 행) ---------- */
.p2-tx-sub{border-top:1px solid var(--line)}
.p2-tx-sub a{display:flex;gap:22px;align-items:center;padding:24px 4px;border-bottom:1px solid var(--line-soft);transition:.2s}
.p2-tx-sub img{width:132px;height:88px;object-fit:cover;border-radius:8px;flex:none}
.p2-tx-sub h3{font-size:1.1rem;margin-bottom:4px}
.p2-tx-sub p{font-size:.93rem;color:var(--text-soft);line-height:1.65}
.p2-tx-sub .go{margin-left:auto;color:var(--olive-700);font-weight:700;flex:none;transition:.2s}
.p2-tx-sub a:hover .go{transform:translateX(4px)}
.p2-tx-sub a:hover h3{color:var(--olive-800)}
@media(max-width:600px){.p2-tx-sub img{width:96px;height:68px}}

/* ============================================================
   타이포 스케일 확대 + 밀도 보정 (2차 지시)
   "큰 타이포 + 큰 이미지 + 충분한 정보" — 읽는 의료정보 페이지
   ============================================================ */
/* --- 타이포 확대 --- */
body.pain-p2 .page-hero h1{font-size:clamp(2.4rem,4.6vw,3.25rem)}
body.pain-p2 .page-hero p{font-size:1.18rem;max-width:720px}
body.pain-p2 .head-block h2{font-size:clamp(2.05rem,3.6vw,2.8rem)}
body.pain-p2 .head-block p{font-size:1.1rem;margin-top:6px}
body.pain-p2 .eyebrow{font-size:.95rem}
body.pain-p2 .prose h2{font-size:clamp(1.95rem,3.5vw,2.65rem)!important}
body.pain-p2 .prose p{font-size:1.12rem;line-height:1.85}
body.pain-p2 .p1-tx-main h3{font-size:clamp(1.6rem,2.8vw,2.1rem)}
body.pain-p2 .p1-tx-main p{font-size:1.1rem}
body.pain-p2 .p2-tx-sub h3{font-size:1.32rem}
body.pain-p2 .p2-tx-sub p{font-size:1.02rem}
body.pain-p2 .p1-sym li{font-size:1.15rem;line-height:1.65}
body.pain-p2 .p1-sym .no{font-size:.78rem;color:var(--text-mute)}
body.pain-p2 .p1-tl h4{font-size:1.32rem}
body.pain-p2 .p1-tl p{font-size:1.05rem;max-width:none}
body.pain-p2 .p1-co h4{font-size:1.16rem;min-width:132px}
body.pain-p2 .p1-co p{font-size:1.02rem}
body.pain-p2 .p1-links a{font-size:1.08rem}
body.pain-p2 .faq-q{font-size:1.14rem;padding:22px 26px}
body.pain-p2 .faq-a{font-size:1.03rem}

/* --- 섹션 밀도: 유형별 차등 압축 --- */
body.pain-p2 .section-pad{padding:88px 0}          /* 대형 visual */
body.pain-p2 .section-pad-sm{padding:64px 0}       /* 일반 information */
body.pain-p2 .section-pad-sm.pad-tight{padding:52px 0} /* 리스트/링크 중심 */
body.pain-p2 .head-block{margin-bottom:36px}
body.pain-p2 .p1-sym li{padding:16px 4px}
body.pain-p2 .p2-tx-sub a{padding:22px 4px}
body.pain-p2 .p1-co > *{padding:16px 4px}
body.pain-p2 .p1-links a{padding:14px 4px}
body.pain-p2 .p1-tx-main{margin-bottom:44px}

/* --- 번호 리스트 변형 --- */
/* plain: 번호 숨김 divider 리스트 (hip 등) — HTML 번호는 유지, 표시만 제거 */
body.pain-p2 .p1-sym.plain .no{display:none}
/* stmt: 대형 statement 리스트 (tmj) */
body.pain-p2 .p1-sym.stmt{grid-template-columns:1fr;max-width:920px}
body.pain-p2 .p1-sym.stmt .no{display:none}
body.pain-p2 .p1-sym.stmt li{font-size:clamp(1.3rem,2.3vw,1.7rem);font-weight:650;line-height:1.5;padding:26px 4px;color:var(--charcoal)}

/* --- hip 배너 완화 (16:7, 텍스트와 한 덩어리) --- */
body.pain-p2 .p2-banner{aspect-ratio:16/7;margin-top:28px}

/* --- 진단형(elbow·wrist): 증상 문구가 주인공 --- */
body.pain-p2 .p2-diag{gap:clamp(24px,3vw,40px)}
body.pain-p2 .p2-diag .p1-sym li{font-size:1.18rem;padding:15px 4px}
body.pain-p2 .p2-diag .p1-sym .no{font-size:.72rem}

/* ---------- 애니메이션 절제 ---------- */
body.pain-p2 .reveal{transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){
  body.pain-p2 .reveal{opacity:1;transform:none;transition:none}
  body.pain-p2 *{animation:none!important;transition-duration:.01s!important}
}