/* ── pages / about — About the Clinic ──────────────────────────────
   아키타입 article: 히어로 → 본문(.prose) → 번호 블록(.numbered) ×2
   → 이동 카드(.hubgrid) → 상담 CTA.
   뼈대는 subpage.css 의 .page-hero / .prose / .numbered / .hubgrid /
   .cta-band 로 전부 해결된다. 이 파일은 그 프리미티브에 없는 것만 덮어쓴다. */

/* ── 히어로 ────────────────────────────────────────────────── */

/* .page-hero 기본 오버레이는 검정 68%. 이 페이지 사진(hero.jpg)은 수술실
   조명이라 원본이 거의 흰색이고, 68% 로는 회색 바탕이 되어 핑크 eyebrow 와
   흰 본문이 읽히지 않는다. signature·topics 허브와 같이 80% 로 올린다. */
.about-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),
    var(--hero-img,none);
}

/* ── 도입: 로비 사진 + 진료 철학 ───────────────────────────── */

/* 콘텐츠 JSON 의 원본이 1200×565 다. 컨테이너(1280)를 꽉 채우면 그만큼
   확대되므로 원본 폭에서 멈추고 가운데 정렬한다. */
.about-intro__figure{
  max-width:1200px;
  margin-inline:auto;
}
.about-intro__figure img{width:100%;border-radius:var(--radius-card)}

/* 사진과 철학 본문 사이 — J컬이 쓰는 --sp-block(60) */
.about-intro__prose{margin-top:var(--sp-block)}

/* .prose blockquote 는 margin-block:--sp-stack 으로 위아래가 같다.
   여기서는 바로 위에 라벨(Our Philosophy)이 붙으므로 위만 좁힌다.
   blockquote 는 base.css 리셋 대상이 아니라 브라우저 기본 margin-inline:40px
   이 남는다. 그대로 두면 분홍 판만 라벨·본문보다 40px 씩 안으로 들어가고
   390 에서는 읽기 폭이 350→270 으로 줄어든다. 좌우 여백을 지운다. */
.about-intro__quote{margin-top:var(--sp-tight);margin-inline:0}

/* ── 세 가지 원칙 / 여섯 가지 약속 ─────────────────────────── */

/* 리드가 1280 을 가로지르면 읽기 줄이 너무 길다. .prose 와 같은 900 으로 묶는다. */
.about-principles__lead{max-width:900px}

/* .sec-head 와 카드 사이 — J컬 Sec_9 / signature 허브와 같은 --sp-block(60) */
.about-principles__list,
.about-promises__list,
.about-explore__grid{margin-top:var(--sp-block)}

/* 약속 카드는 6장이라 두 줄로 늘어선다. 같은 행끼리 키를 맞춘다. */
.about-promises__list .numbered__item{display:flex;flex-direction:column}

/* ── 이동 카드 (Explore KOWON) ─────────────────────────────── */

/* 그리드 칸이 늘어나야 .hubcard 의 height:100% 가 형제와 키를 맞춘다. */
.about-explore__cell{display:flex}

/* 카드 전체가 링크다. .hubcard 는 flex 컨테이너라 a 로 써도 배치가 같다. */
.about-explore__card{width:100%}
.about-explore__card:hover .link-more{color:var(--brand)}

/* ── 상담 CTA ──────────────────────────────────────────────── */

/* .cta-band 기본 배치는 center 라 로비 사진의 KOWON 사인이 제목 뒤에 겹친다.
   J컬 Sec_10 이 쓴 프레이밍(세로 41%)과 같게 올려 글자 뒤를 비운다. */
.about-cta{background-position:0 0,center 41%}