/* ============================================================
   Phase 2 — about 카테고리 공통
   body.p1.pain-p2.about-p2 스코프. phase1.css + pain-p2.css 위에 얹힌다.
   style.css / phase1.css / pain-p2.css는 수정하지 않는다.
   ============================================================ */

/* ---------- 대형 statement (소개·철학) ---------- */
.a2-stmt{font-size:clamp(1.45rem,2.6vw,2.15rem);font-weight:700;line-height:1.6;letter-spacing:-.025em;color:var(--charcoal);max-width:1020px}
.a2-stmt em{font-style:normal;color:var(--olive-700)}
.a2-stmt-sub{margin-top:22px;font-size:1.12rem;line-height:1.85;color:var(--text-soft);max-width:760px}

/* ---------- 의료진: editorial 프로필 (카드 아님) ---------- */
.a2-doc{display:grid;grid-template-columns:37fr 63fr;gap:clamp(32px,4.5vw,80px);padding:clamp(48px,5vw,76px) 0;border-bottom:1px solid var(--line);align-items:start}
.a2-doc:last-of-type{border-bottom:none}
.a2-doc .portrait{position:relative}
.a2-doc .portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block}
.a2-doc .portrait .cap{margin-top:12px;font-size:.85rem;color:var(--text-mute)}
.a2-doc.rev{grid-template-columns:63fr 37fr}
.a2-doc.rev .portrait{order:2}
.a2-doc .role{font-size:.9rem;font-weight:700;color:var(--olive-700);margin-bottom:10px}
.a2-doc h2{font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.03em;margin-bottom:14px}
.a2-doc .fields{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:26px;font-size:1.02rem;font-weight:600;color:var(--ink)}
.a2-doc .fields span::before{content:"—";color:var(--olive-600);margin-right:8px}
.a2-doc .focus{border-left:2px solid var(--olive-600);padding:6px 0 6px 24px;margin-bottom:32px;max-width:640px}
.a2-doc .focus p{font-size:clamp(1.08rem,1.5vw,1.24rem);line-height:1.8;color:var(--ink-soft)}
.a2-cv{display:grid;grid-template-columns:1fr 1fr;gap:26px 48px}
.a2-cv h4{font-size:.84rem;font-weight:750;letter-spacing:.05em;color:var(--text-mute);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.a2-cv ul{list-style:none;font-size:.96rem;line-height:2;color:var(--text-soft)}
.a2-cv .wide{grid-column:1/-1}
@media(max-width:900px){
  .a2-doc,.a2-doc.rev{grid-template-columns:1fr;gap:26px}
  .a2-doc.rev .portrait{order:0}
  .a2-doc .portrait{max-width:420px}
  .a2-cv{grid-template-columns:1fr}
}

/* ---------- 진료 전체안내: 텍스트 디렉토리 (아이콘 카드 대체) ---------- */
.a2-dir{border-top:1px solid var(--line)}
.a2-dir .row{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:16px clamp(28px,4vw,72px);padding:clamp(30px,3.2vw,42px) 4px;border-bottom:1px solid var(--line-soft)}
.a2-dir .no{font-size:.82rem;font-weight:750;color:var(--text-mute);letter-spacing:.06em;margin-bottom:8px}
.a2-dir h3{font-size:clamp(1.35rem,2.2vw,1.7rem);letter-spacing:-.02em;margin-bottom:6px}
.a2-dir h3 a{color:inherit;transition:.2s}
.a2-dir h3 a:hover{color:var(--olive-800)}
.a2-dir .desc{font-size:.95rem;color:var(--text-soft);line-height:1.7}
.a2-dir .links{display:flex;flex-wrap:wrap;gap:10px 32px;align-content:start;padding-top:6px}
.a2-dir .links a{font-size:1.02rem;font-weight:600;color:var(--ink);padding:6px 0;transition:.2s}
.a2-dir .links a .go{color:var(--line);margin-left:6px;transition:.2s}
.a2-dir .links a:hover{color:var(--olive-800)}
.a2-dir .links a:hover .go{color:var(--olive-700)}
.a2-dir .links .soon{font-size:1.02rem;font-weight:600;color:var(--text-mute);padding:6px 0;cursor:default}
.a2-dir .links .soon small{font-size:.8rem;font-weight:650;color:var(--sand);margin-left:6px}
@media(max-width:760px){.a2-dir .row{grid-template-columns:1fr;gap:12px}}

/* ---------- 진료시간: 대형 시간표 ---------- */
.a2-hours{max-width:820px}
.a2-hours .hrow{display:flex;justify-content:space-between;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line-soft)}
.a2-hours .hrow:first-child{border-top:1px solid var(--line)}
.a2-hours .d{font-size:1.08rem;font-weight:650;color:var(--ink)}
.a2-hours .d small{display:block;font-size:.85rem;font-weight:500;color:var(--text-mute);margin-top:2px}
.a2-hours .t{font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:750;letter-spacing:-.02em;color:var(--charcoal);font-variant-numeric:tabular-nums}
.a2-hours .off .t{color:var(--text-mute);font-size:clamp(1.2rem,1.8vw,1.4rem)}

/* 연락 채널: 텍스트 라인 (아이콘 원형 대신) */
.a2-ch{border-top:1px solid var(--line)}
.a2-ch a,.a2-ch > div{display:flex;gap:18px;align-items:baseline;padding:17px 4px;border-bottom:1px solid var(--line-soft);transition:.2s}
.a2-ch b{font-size:1.05rem;flex:none;min-width:150px;color:var(--charcoal)}
.a2-ch span{font-size:.95rem;color:var(--text-soft)}
.a2-ch a .go{margin-left:auto;color:var(--line);flex:none;transition:.2s}
.a2-ch a:hover b{color:var(--olive-800)}
.a2-ch a:hover .go{color:var(--olive-700);transform:translateX(3px)}
@media(max-width:600px){.a2-ch b{min-width:110px}}

/* ---------- 비급여: editorial 가격표 ---------- */
.a2-fee{margin-bottom:clamp(40px,4.5vw,60px)}
.a2-fee:last-of-type{margin-bottom:0}
.a2-fee h3{font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em;padding-bottom:14px;border-bottom:2px solid var(--charcoal);margin-bottom:0}
.a2-fee table{width:100%;border-collapse:collapse}
.a2-fee th{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--text-mute);text-align:left;padding:12px 4px;border-bottom:1px solid var(--line)}
.a2-fee th:last-child{text-align:right}
.a2-fee td{padding:16px 4px;border-bottom:1px solid var(--line-soft);font-size:1.02rem;color:var(--ink)}
.a2-fee td:first-child{font-weight:600}
.a2-fee td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--charcoal)}
.a2-fee td.sub{color:var(--text-soft);font-size:.92rem}

/* ---------- 장비/공간: 넓은 비주얼 행 ---------- */
.a2-eq{display:grid;grid-template-columns:52fr 48fr;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(36px,4vw,56px) 0;border-bottom:1px solid var(--line-soft)}
.a2-eq:last-of-type{border-bottom:none;padding-bottom:0}
.a2-eq:first-of-type{padding-top:0}
.a2-eq.rev > div:first-child{order:2}
.a2-eq h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:12px}
.a2-eq .use{font-size:.88rem;font-weight:700;color:var(--olive-700);margin-bottom:10px}
.a2-eq p{font-size:1.05rem;line-height:1.85;color:var(--text-soft);max-width:560px}
.a2-eq .photo-slot{border-radius:10px}
@media(max-width:860px){.a2-eq{grid-template-columns:1fr;gap:20px}.a2-eq.rev > div:first-child{order:0}}

/* ---------- 원장 3인 portrait 스트립 (소개 → 의료진 연결) ---------- */
.a2-docstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px)}
.a2-docstrip a{display:block}
.a2-docstrip img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:10px;display:block;margin-bottom:16px;transition:.3s}
.a2-docstrip a:hover img{opacity:.92}
.a2-docstrip h4{font-size:1.22rem;margin-bottom:4px;transition:.2s}
.a2-docstrip a:hover h4{color:var(--olive-800)}
.a2-docstrip p{font-size:.94rem;color:var(--text-soft)}
.a2-docstrip .role{font-size:.8rem;font-weight:700;color:var(--olive-700);margin-bottom:6px}
@media(max-width:700px){.a2-docstrip{grid-template-columns:1fr;max-width:340px}}

/* ---------- 페이지별 hero variation ---------- */
body.about-p2 .page-hero{padding:112px 0 40px}
/* 인물 페이지: 대형 타이포 */
body.about-p2 .hero-xl{padding:124px 0 48px}
body.about-p2 .hero-xl h1{font-size:clamp(2.8rem,5.4vw,4rem);letter-spacing:-.035em}
/* 문의·정보 페이지: 주소/전화가 본문 역할 */
body.about-p2 .hero-contact p{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--charcoal);font-weight:600}
body.about-p2 .hero-contact p a{color:inherit}
/* 문서형 페이지: 타이트 */
body.about-p2 .hero-tight{padding:100px 0 28px}
body.about-p2 .hero-tight h1{font-size:clamp(1.8rem,3.4vw,2.5rem)}

/* ---------- 미세 유틸 ---------- */
.a2-note-line{font-size:.92rem;color:var(--text-mute);margin-top:18px}