/* =========================================================================
   seran-about.css — 병원 소개 · 의료진 소개 본문 스타일

   모듈: about-doctors — 소유 파일 (CONTRACT-FRONT.md §3).
   대상 마크업은 scripts/migrate/12-about.php 가 post_content 에 기록한다.
   본문에는 인라인 style 이 하나도 없다(CONTRACT-FRONT §0-3) — 배치는 전부 이 파일.
   색·반경·글꼴은 seran-tokens.css 의 var(--seran-*) 만 쓴다(§0-4). hex 리터럴 0개.

   로드 순서 (_wiring/about-doctors.md §5-1)
     style.css → seran-tokens → seran-prose → seran-page → **seran-about**
     등록 시 deps 에 'seran-tokens'(+있으면 'seran-prose')를 잡는다.

   ── 이 시트의 역할 분담 (읽고 고칠 것) ──────────────────────────────────
   prose-css 모듈(assets/css/seran-prose.css)이 이미 카드 그리드·점 리스트·
   리드 문단 같은 **공용 원자**를 갖고 있다. 12-about.php 는 그 클래스를 그대로
   붙여 내보낸다(`seran-cards seran-cards--photo` / `seran-cards__num` /
   `seran-list--dot` / `seran-prose__lead` / `seran-heading--center` /
   `seran-prose__divider` / `seran-prose__raw`).
   그래서 이 시트는 **두 층**으로 나뉜다:

     (A) 이 모듈 고유 컴포넌트  — 항상 이겨야 한다.
         셀렉터를 루트 클래스로 접두해 (0,2,0) 이상으로 만든다.
         예: `.seran-doctors .seran-doctor__name`, `.seran-about .seran-about__heading`
         → seran-tokens §4 의 `.seran-prose h2`(0,1,1) 같은 규칙을 이긴다.

     (B) prose 원자의 **폴백**   — prose 시트가 실리지 않은 문맥에서만 살아난다.
         일부러 **한 클래스(0,1,0 / 0,1,1)** 로 낮게 건다.
         prose 가 있으면 `.seran-prose .seran-cards…`(0,2,0)가 이겨 공용 디자인이,
         없으면 이 폴백이 적용돼 최소한 카드/리스트로는 읽힌다.
         → (B) 규칙에 루트 클래스를 붙이지 말 것. 붙이는 순간 공용 디자인을 덮는다.

   모바일 우선 — 기본이 1열, `@media (min-width:…)` 에서 넓힌다.

   ── 구조 (12-about.php 출력) ────────────────────────────────────────────
     [본문 맨 앞]  h1.seran-about__title + hr  ← page.php 가 히어로로 끌어올린다
     .seran-about.seran-prose__raw
       └ section.seran-about__block--intro     p.seran-about__lead / hr
       └ section.seran-about__block--team      h2 / ul.seran-cards--photo > li
       └ section.seran-about__block--facility  h2 / figure / ol.seran-cards
     .seran-doctors.seran-prose__raw
       └ article.seran-doctor  figure + div.body(tagline·header·hr·credentials·schedule)
   ========================================================================= */

/* =========================================================================
   (A) 공통 컨테이너
   ========================================================================= */

.seran-about,
.seran-doctors {
  max-width: var(--seran-content-width);
  margin-inline: auto;
  font-family: var(--seran-font);
  font-size: var(--seran-fs-base);
  line-height: var(--seran-lh);
  color: var(--seran-ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 이미지가 원본 크기로 쏟아지지 않게 하는 최후 방어선. */
.seran-about img,
.seran-doctors img {
  max-width: 100%;
  height: auto;
}

.seran-about a,
.seran-doctors a {
  color: var(--seran-cta);
  text-decoration: underline;
  text-underline-offset: .18em;
  transition: color var(--seran-dur) var(--seran-ease);
}

.seran-about a:hover,
.seran-about a:focus-visible,
.seran-doctors a:hover,
.seran-doctors a:focus-visible {
  color: var(--seran-orange);
}

/* Brizy 는 한 문장을 줄 단위 <p> 로 쪼개 두었다.
   12-about.php 는 그것을 요소 하나 + 줄 span 으로 바꾼다(스크린리더가 문장을
   토막내 읽지 않게). 원고의 줄바꿈은 여기서 되살린다. */
.seran-about .seran-about__line,
.seran-doctors .seran-doctor__line {
  display: block;
}

/* =========================================================================
   (A) 병원 소개 — 섹션 리듬
   ========================================================================= */

.seran-about .seran-about__block {
  padding-block: var(--seran-section) 0;
}

.seran-about .seran-about__block:first-child {
  padding-block-start: 0;
}

.seran-about .seran-about__block:last-child {
  padding-block-end: var(--seran-section);
}

/* `--intro` / `--team` / `--facility` / `--plain` 은 **식별용 훅**이다.
   배치는 안쪽 요소 클래스가 전담하므로 `--intro`(가운데 정렬)와
   `--plain`(폴백 렌더) 외에는 일부러 규칙을 두지 않는다.
   섹션 단위로 배경·여백을 바꾸고 싶을 때 여기에 붙이면 된다. */

/* -------------------------------------------------------------------------
   인사말 (intro)
------------------------------------------------------------------------- */

.seran-about .seran-about__block--intro {
  text-align: center;
}

.seran-about .seran-about__lead {
  max-width: var(--seran-prose-width);
  margin-inline: auto;
  margin-block: 0;
  font-size: clamp(1rem, .95rem + .5vw, 1.375rem);
  line-height: 1.9;
  color: var(--seran-ink-2);
}

/* -------------------------------------------------------------------------
   섹션 제목 (team · facility 공용)
------------------------------------------------------------------------- */

.seran-about .seran-about__heading {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--seran-font-display);
  font-size: var(--seran-fs-h2);
  font-weight: 500;
  line-height: var(--seran-lh-tight);
  letter-spacing: -.01em;
  color: var(--seran-ink);
  text-align: center;
}

/* 원본에서 가운뎃점 하나가 <strong> 으로 감싸여 있었다 — 굵기 차이를 없앤다. */
.seran-about .seran-about__heading strong {
  font-weight: inherit;
}

/* -------------------------------------------------------------------------
   의료진 요약 카드 (team) — 레이아웃은 prose 의 .seran-cards--photo 가 그린다.
   여기서는 리듬과 사진 비율만 조정한다.
------------------------------------------------------------------------- */

.seran-about .seran-about__team {
  margin-block: 0;
}

/* 전문과목 줄이 원본에서 <strong> 이었다 — 눈썹 문구는 굵기를 여기서 정한다. */
.seran-about .seran-about__member-field strong {
  font-weight: inherit;
}

/* -------------------------------------------------------------------------
   시설 (facility)
------------------------------------------------------------------------- */

.seran-about .seran-about__photo {
  margin: 0 0 clamp(24px, 4vw, 40px);
}

.seran-about .seran-about__photo-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--seran-radius-lg);
  background: var(--seran-bg-soft);
}

.seran-about .seran-about__points {
  margin-block: 0;
}

/* 번호 배지는 제목 줄에 맞춰 위로 붙인다(카드 기본은 세로 가운데). */
.seran-about .seran-about__point {
  align-items: flex-start;
}

.seran-about .seran-about__point-num {
  margin-top: 2px;
}

/* =========================================================================
   (A) 의료진 소개 — 프로필 카드
   prose-css 에는 이 형태(사진 좌 · 정보 우 + 경력 3묶음 + 진료일정표)가 없다.
   ========================================================================= */

.seran-doctors .seran-doctor {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(32px, 5vw, 64px);
}

.seran-doctors .seran-doctor:first-child {
  padding-block-start: 0;
}

.seran-doctors .seran-doctor + .seran-doctor {
  border-top: 1px solid var(--seran-line);
}

.seran-doctors .seran-doctor__photo {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.seran-doctors .seran-doctor__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--seran-radius-lg);
  background: var(--seran-bg-soft);
}

.seran-doctors .seran-doctor__body {
  min-width: 0;
}

.seran-doctors .seran-doctor__tagline {
  margin: 0 0 12px;
  color: var(--seran-ink-2);
}

.seran-doctors .seran-doctor__id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.seran-doctors .seran-doctor__name {
  margin: 0;
  font-family: var(--seran-font-display);
  font-size: var(--seran-fs-h2);
  font-weight: 700;
  line-height: var(--seran-lh-tight);
  letter-spacing: -.01em;
  color: var(--seran-ink);
}

.seran-doctors .seran-doctor__role {
  margin: 0;
  font-size: var(--seran-fs-base);
  color: var(--seran-ink-3);
}

.seran-doctors .seran-doctor__rule {
  width: auto;
  height: 0;
  margin: 18px 0 20px;
  border: 0;
  border-top: 1px solid var(--seran-line);
  border-radius: 0;
}

/* 경력 — 원본의 ul 3묶음(학력·학회·경력)을 점선으로 가른다.
   묶음 제목은 원고에 없었으므로 만들지 않는다(문장 창작 금지). */
.seran-doctors .seran-doctor__credentials {
  display: grid;
  gap: 0;
}

.seran-doctors .seran-doctor__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.seran-doctors .seran-doctor__list + .seran-doctor__list {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--seran-line);
}

.seran-doctors .seran-doctor__list > li {
  position: relative;
  margin: 0;
  padding: 3px 0 3px 16px;
  font-size: var(--seran-fs-sm);
  line-height: 1.7;
  color: var(--seran-ink-2);
}

.seran-doctors .seran-doctor__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--seran-orange-soft);
}

/* 원본이 굵게 표시한 항목(현직 등)은 그대로 강조로 살린다. */
.seran-doctors .seran-doctor__list strong {
  font-weight: 700;
  color: var(--seran-ink);
}

/* -------------------------------------------------------------------------
   진료 일정표 — [clinician_schedule] (booking-resources 가 렌더·스타일)
   표 자체는 그 모듈 소유다. 여기서는 좁은 화면에서 페이지를 밀지 않도록
   가로 스크롤 컨테이너만 제공한다(CONTRACT-FRONT: 표는 가로 스크롤 컨테이너).
------------------------------------------------------------------------- */

.seran-doctors .seran-doctor__schedule {
  margin-top: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.seran-doctors .seran-doctor__schedule:focus-visible {
  outline: 2px solid var(--seran-orange);
  outline-offset: 2px;
}

/* 2주 일정표는 7열이라 460px 아래로는 눌린다 — 그 아래에서는 가로 스크롤. */
.seran-doctors .seran-doctor__schedule table {
  min-width: 460px;
}

/* seran-tokens.css §4 의 `@media(max-width:782px){.seran-prose table{display:block}}`
   가 2주 일정표의 표 레이아웃을 무너뜨린다. **이 한 줄만** 되돌린다 —
   색·패딩은 건드리지 않는다(booking-resources 의 .cs-* 규칙을 덮지 않기 위해).
   근본 해결은 _wiring/about-doctors.md §6 (prose-css 가 static-pages 에 낸 요청과 동일). */
.seran-doctors .seran-doctor__schedule table {
  display: table;
}

/* =========================================================================
   (A) 분류 실패 섹션 폴백 — 원고를 버리지 않는 안전망
   ========================================================================= */

.seran-about .seran-about__block--plain h2,
.seran-about .seran-about__block--plain h3,
.seran-about .seran-about__block--plain h4 {
  margin: 1.6em 0 .5em;
  font-family: var(--seran-font-display);
  font-weight: 500;
  line-height: var(--seran-lh-tight);
}

.seran-about .seran-about__block--plain p {
  margin: 0 0 1.1em;
  color: var(--seran-ink-2);
}

.seran-about .seran-about__list {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
  list-style: disc;
  color: var(--seran-ink-2);
}

.seran-about .seran-about__figure {
  margin: 1.4em 0;
}

.seran-about .seran-about__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--seran-radius);
}

/* =========================================================================
   (B) prose 원자 폴백 — seran-prose.css 가 실리지 않은 문맥 전용

   전부 **한 클래스**로만 건다. seran-prose.css 가 실리면
   `.seran-prose .seran-cards…`(0,2,0) 가 이겨 공용 디자인이 나온다.
   여기에 루트 클래스(.seran-about)를 붙이지 말 것 — 붙이면 공용 디자인을 덮는다.
   ========================================================================= */

/* 선두 제목 — page.php 가 히어로로 끌어올리지 못한 경우에만 보인다. */
h1.seran-about__title {
  margin: 0 0 20px;
  font-family: var(--seran-font-display);
  font-size: var(--seran-fs-h1);
  font-weight: 500;
  line-height: var(--seran-lh-tight);
  letter-spacing: -.01em;
  color: var(--seran-ink);
  text-align: center;
}

hr.seran-about__rule {
  width: 48px;
  height: 0;
  margin: 24px auto;
  border: 0;
  border-top: 3px solid var(--seran-orange);
  border-radius: 2px;
}

/* 인물 카드 그리드 */
ul.seran-about__team,
ol.seran-about__points {
  display: grid;
  gap: var(--seran-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.seran-about__member {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--seran-line);
  border-radius: var(--seran-radius);
  background: var(--brand-secondary);
  text-align: center;
}

.seran-about__member-photo {
  display: block;
  margin: 0;
  background: var(--seran-bg-warm);
}

img.seran-about__member-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

.seran-about__member-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 20px;
}

p.seran-about__member-field {
  margin: 0;
  font-size: var(--seran-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--seran-olive-dark);
}

h3.seran-about__member-name {
  margin: 0;
  font-family: var(--seran-font-display);
  font-size: var(--seran-fs-lg);
  font-weight: 500;
  line-height: var(--seran-lh-tight);
  color: var(--seran-ink);
}

p.seran-about__member-role {
  margin: 0;
  font-size: var(--seran-fs-sm);
  color: var(--seran-ink-2);
}

/* 번호 특징 카드 */
.seran-about__point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--seran-line-warm);
  border-radius: var(--seran-radius);
  background: var(--seran-bg-warm);
}

.seran-about__point-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--seran-grad-orange);
  color: var(--brand-secondary);
  font-size: var(--seran-fs-sm);
  font-weight: 700;
  line-height: 1;
}

.seran-about__point-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

h3.seran-about__point-title {
  margin: 0;
  font-family: var(--seran-font-display);
  font-size: var(--seran-fs-lg);
  font-weight: 500;
  line-height: var(--seran-lh-tight);
  color: var(--seran-ink);
}

p.seran-about__point-text {
  margin: 0;
  font-size: var(--seran-fs-sm);
  line-height: 1.65;
  color: var(--seran-ink-2);
}

/* 경력 점 리스트 폴백 (.seran-list--dot 상당) */
ul.seran-doctor__list {
  list-style: none;
  padding-left: 0;
}

/* 한줄 소개 폴백 (.seran-prose__lead 상당) */
p.seran-doctor__tagline {
  font-size: var(--seran-fs-lg);
  line-height: 1.75;
}

/* =========================================================================
   넓은 화면
   ========================================================================= */

@media (min-width: 641px) {
  .seran-about .seran-about__point {
    gap: 18px;
  }
}

@media (min-width: 901px) {
  /* 구 사이트 요약 카드는 3열 고정이었다(brz 컬럼 33%).
     prose 의 auto-fit 은 인원이 4명이 되면 4열로 벌어지므로 여기서 3열로 고정한다. */
  .seran-about .seran-about__team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--seran-gap-lg);
  }

  /* 구 사이트 의료진 카드 = 사진 50% / 정보 50% (컴파일 CSS `flex:1 1 50%`).
     본문 가독을 위해 정보 쪽을 조금 넓게 잡는다. */
  .seran-doctors .seran-doctor {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 56px);
  }

  .seran-doctors .seran-doctor__photo {
    max-width: none;
    margin: 0;
  }
}

/* =========================================================================
   인쇄 — 카드·표를 페이지 경계에서 자르지 않는다.
   ========================================================================= */

@media print {
  .seran-doctors .seran-doctor,
  .seran-about .seran-about__point,
  .seran-about .seran-about__member {
    break-inside: avoid;
  }

  .seran-doctors .seran-doctor__schedule {
    overflow: visible;
  }
}