/* 기본형4 「병원 소개」 페이지 [KAN-184].
   ⚠️ 기존 클래스(staff_item·contact-pg)를 재사용하지 않는다 — page.css 가
   main.css 의 같은 규칙을 복제해 갖고 나중에 로드돼 이긴다. intro- 접두사로 격리한다. */

/* 콘텐츠 밴드. 시안 PC 0:850 은 x=410~1511 = «1101px» 이다(1920 프레임 = 1x).
   max-width 를 1141 로 두는 이유는 border-box + 좌우 20px 패딩이라 실제 콘텐츠가
   정확히 1101 이 되기 때문이다. 좌우 20px 는 MO 시안 1:2823 의 x=40(@2x → 20px)
   과 같은 값이라 PC/MO 가 한 상수로 맞는다.
   ⚠️ .minframe(max-width 1200 → 콘텐츠 1168)을 쓰지 «않는다». 이 페이지는 시안 폭을
      그대로 따르기로 했다(2026-09-07 사용자 결정). 형제 페이지보다 좌우가 34px 씩
      안쪽인 것은 의도된 차이다 — KAN-177 검색이 반대로 택한 것과 다르다.
   ⚠️ 이 규칙이 없으면 폭 제약이 «아예» 사라진다. #pageMenuContentWrap·#pageContent 는
      테마 1·3 의 layout.css 에만 정의돼 있고 테마 6 에는 규칙이 없다 — 셸을 믿고
      빼면 1920 화면에서 본문이 1905px 로 퍼지고 카드가 240 대신 458px 가 된다. */
.intro-pg {
  max-width: 1141px;
  margin: 0 auto;
  padding: 0 20px 120px;
}

.intro-sec-tit {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin: 100px 0 40px;
}

/* 섹션 탭(#intro/#staff/#directions)으로 뛸 때 «제목부터» 보이게 한다.
   헤더(position:fixed)와 그 아래 붙어 다니는 탭 띠가 합쳐서
   var(--nav-height) + var(--t6-section-tab-h) 만큼 화면 위를 가린다. 이걸
   빼 주지 않으면 브라우저가 섹션 top 을 뷰포트 0 에 맞춰 제목이 그 뒤로
   숨고 본문부터 보인다. 끝의 40px 은 제목 위 숨돌릴 여백이다.

   ⚠️ `.intro-sec-tit` 의 margin-top(100px)에 기대면 안 된다 — margin 은
   scroll 위치 계산에 들어가지만 #intro 처럼 제목이 없는 섹션은 그 여백이
   없어 계산이 섹션마다 갈린다. scroll-margin 으로 한 곳에서 잡는다. */
.intro-image-sec,
.intro-staff-sec,
.intro-directions-sec {
  scroll-margin-top: calc(var(--nav-height) + var(--t6-section-tab-h) + 40px);
}

/* ── 소개 이미지 ─────────────────────────────── */
.intro-image-sec { margin-top: 40px; }
.intro-image { display: block; width: 100%; height: auto; }

/* ── 의료진 ──────────────────────────────────── */
.intro-staff-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 시안 0:850 — 카드 240px, 열 간격 47(287-240), 행 간격 75(574-499).
     4*240 + 3*47 = 1101 로 콘텐츠 밴드와 정확히 맞는다. */
  gap: 75px 47px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.intro-staff-photo { margin: 0 0 16px; }
.intro-staff-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.intro-staff-name { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.intro-staff-position { font-weight: 400; }
.intro-staff-branch { font-size: 14px; color: #666; margin: 0 0 12px; }
/* 지점 줄이 없으면 그 줄의 margin-bottom(12px)을 이름 아래로 옮겨, 약력까지의 간격을 유지한다. */
.intro-staff-name--no-branch { margin-bottom: 16px; }

.staff-bio__body {
  --bio-fold-lines: 6;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  /* ⚠️ -webkit-line-clamp 를 쓰지 «않는다» — 그게 마지막 줄에 「…」를 붙인다.
     더보기 버튼이 이미 「잘렸다」를 말해 주므로 말줄임표는 중복이고 시안에도 없다.
     ⚠️ 다만 line-clamp 는 «line box 수» 를 세는데 max-height 는 «박스 높이» 를 자른다.
        같은 6줄이 되려면 두 가지가 필요하다 —
        (1) 줄높이를 «1lh» 로 읽는다. 1lh 는 이 요소의 계산된 line-height 라
            1.6 이든 18px 이든 그대로 따라온다. em 으로 적으면 안 된다 — em 은
            font-size 를 따라가고, line-height 를 px 로 바꾸면 calc 가 길이²가 돼
            통째로 무효(max-height:none)가 된다. 시안값 18px 로 맞추는 후속 작업이
            정확히 그 편집이라 실제로 밟는다.
        (2) 자식 여백을 지운다(바로 아래 규칙). 안 지우면 여백이 접힘 예산을 먹는다.
     StaffBio.tsx 의 넘침 판정(scrollHeight > clientHeight)은 그대로 동작한다.
     lh 단위 기준선은 Chrome 109 / Safari 16.4 / Firefox 120 이다. 그보다 낮으면
     이 선언이 통째로 무시돼 «안 접히고 전문이 보인다» — 잘리는 쪽이 아니라
     다 보이는 쪽으로 무너지므로 폴백을 따로 두지 않는다. */
  max-height: calc(var(--bio-fold-lines) * 1lh);
  overflow: hidden;
}
/* 약력은 어드민 WYSIWYG 가 쓰는 HTML 이라 <p> 가 올 수 있다. common.css 의 리셋은
   body·h1~h6·dd·dl 만 지우고 «p 는 안 지운다» — UA 기본 1em 여백이 그대로 붙는다.
   line-clamp 였을 땐 line box 만 세서 무관했지만 max-height 는 박스 높이라, 여백이
   있으면 6줄 예산을 먹어 4줄 남짓에서 그것도 줄 중간에 멈춘다. 같은 에디터가 진료안내
   필드에서 실제로 <p> 를 뱉으므로 가정이 아니다(.intro-hours p 도 같은 이유로 0 이다).
   시안(0:250)도 약력 줄 사이 여백이 0 이라 지우는 쪽이 맞다. */
.staff-bio__body > :where(p, div, ul, ol, dl) {
  margin-top: 0;
  margin-bottom: 0;
}
/* 펼침은 높이 해제로만 한다 — display:none 을 쓰지 않으므로 접힌 동안에도
   화면낭독기에는 전문이 남는다. */
.staff-bio__body.is-open {
  max-height: none;
  overflow: visible;
}
.staff-bio__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  /* 시안 0:253 은 #5ca6a8 — 웰스 테넌트 색이다. .num 과 같은 토큰을 쓴다.
     (전에 있던 #2f8f92 는 어느 테넌트 색도 아닌 값이었다.) */
  color: var(--primary-txt);
  font-size: 13px;
  cursor: pointer;
}
/* 시안 0:252 의 화살표. 내려받은 SVG 는 5.5×5.5 뷰박스에 `M5.5 0.5H0.5V5.5`,
   즉 «5×5 정사각형의 위·왼쪽 1px 테두리» 를 -135° 돌린 캐럿이다.
   파일로 넣지 않고 CSS 테두리로 그리는 이유는 둘이다 —
   (1) 그 SVG 는 stroke 에 #5CA6A8 이 «박혀» 있어 테넌트 색을 못 따라간다.
       currentColor 로 그리면 버튼 색을 그대로 물려받는다.
   (2) 이 테마가 이미 쓰는 방식이다(main-mo.css:421 swiper 화살표). */
.staff-bio__toggle::after {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: rotate(-135deg);
}
/* 펼친 상태에서는 위를 가리킨다(시안 MO 1:2874 「접기」). */
.staff-bio__toggle[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

/* ── 찾아오시는 길 ───────────────────────────── */
/* 시안 0:850 — 정보 블록(40:4464)이 359px, 사이 91px, 지도 630x381.
   359+91+630 = 1080 으로 밴드(1101)에 21px 모자란데, 바로 위 의료진 그리드는
   1101 에 딱 맞으므로 지도를 남는 폭까지 늘려 오른쪽 기준선을 맞춘다.
   대신 시안 비율 630:381 은 aspect-ratio 로 지킨다. */
.intro-directions-body {
  display: grid;
  grid-template-columns: 359px 1fr;
  gap: 91px;
  align-items: start;
}
.intro-directions-map .__map {
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 381;
}

/* 대표번호 — 시안은 라벨 Bold 18 / 번호 Medium 30 을 «밑선» 에 맞춰 한 줄에 둔다.
   시안이 라벨만 top 12 로 내려놓은 것이 곧 베이스라인 정렬이다(행 높이 36).
   ⚠️ 색을 #5ca6a8 로 박지 않는다 — 그건 웰스 테넌트 색이고 var(--primary) 가 같은
      값을 준다(KAN-177 관례). 번호의 .num/.numBold 가 이미 그 색을 쓰고 있다. */
.intro-tel {
  display: flex;
  align-items: baseline;
  gap: 6px;                 /* 시안 라벨 폭 63 · 번호 시작 x=69 */
  margin: 0;
  line-height: normal;
  /* 시안은 색이 Frame 53(0:885) «전체» 에 걸려 있어 라벨과 번호가 둘 다 포인트색이다
     (픽셀 확인: 양쪽 다 rgb(92,166,168)). 라벨만 먹색으로 두면 안 된다.
     토큰은 --primary-txt 다 — common.css:137 의 .num 이 쓰는 바로 그 변수라
     번호와 한 곳에서 갈린다. --primary 도 같은 값이지만 여기서는 쓰지 않는다. */
  color: var(--primary-txt);
}
.intro-tel b { font-size: 18px; font-weight: 700; }
/* .numBold 가 700 을 걸어 둔다 — 시안은 Medium 이라 여기서 되돌린다. */
.intro-tel .num { font-size: 30px; font-weight: 500; }

/* 블록 사이는 43px 다 — 시안에서 대표번호 끝(36) → 주소 라벨(79) 과
   주소 값 끝(124) → 진료시간 라벨(167) 이 둘 다 43 이다. */
.intro-addr {
  margin: 43px 0 0;
  font-size: 16px;
  line-height: normal;
}
.intro-hours {
  margin-top: 43px;
  font-size: 14px;
  line-height: 25.7px;
  letter-spacing: -0.28px;
}

.intro-addr b,
.intro-hours b {
  display: block;
  font-size: 16px;
  /* 시안은 SemiBold(600)인데 이 레포의 Pretendard 는 400/500/700 만 싣는다 —
     600 은 지금 700 으로 떨어진다. 폰트가 늘면 저절로 맞으라고 600 으로 적는다. */
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  /* 라벨 밑 7px — 시안에서 주소(라벨 79+19 → 값 105) 와 진료시간(라벨 167+19 → 평일 193)
     이 «둘 다» 7 이다. 진료시간 쪽은 토요일(0:884)만 186 에 있어 0 처럼 보이는데,
     같은 열의 평일·공휴일이 193/252 라 그쪽이 어긋난 것이다. */
  margin-bottom: 7px;
}

/* 시안은 진료시간 항목이 2열이다 — 열 폭 138 + 사이 83 = 359.
   항목 수는 병원마다 다르다(요일 묶음·점심·휴진, KAN-194) — 열을 CSS 로만 만들어
   몇 개든 흐르기만 하고 안 깨진다. */
.intro-hours > .hours-list {
  columns: 2;
  column-gap: 83px;
}
/* 시안 항목 세로 간격은 59(평일 193 → 공휴일 252), 항목 자체가 52 라 7 이 남는다.
   margin-top 이 아니라 bottom 인 이유는 2열 흐름이라 — top 을 주면 2열의 첫 항목만
   7px 내려가 두 열의 윗선이 어긋난다. */
.intro-hours .hours-list p { margin: 0 0 7px; break-inside: avoid; }
/* 시안은 라벨이 값 «윗줄» 에 온다. 어드민 HTML 은 <strong>라벨</strong>값 이 한 줄이라
   블록으로 바꿔 줄을 나눈다 — 마크업을 안 건드리고 되는 유일한 방법이다. */
.intro-hours .hours-list strong { display: block; font-weight: 600; }
/* 비고 — 시안 40:4464 「* 이곳에 비고를 적어주세요」 두 줄. 목록 아래, 1열.
   글자 크기·줄간격·자간·색은 위 .intro-hours 가 이미 14px/25.7px/-0.28px/검정으로
   먹여 두고 있어(§184) 시안(text-[14px] leading-[25.7px] tracking-[-0.28px]
   text-black) 과 그대로 맞는다 — 따로 지정할 게 없다. */
.intro-hours .hours-note { margin: 0; }
/* 시안 실측: 마지막 항목(공휴일/점심시간, top 252) 한 줄 높이 51.4(25.7×2) →
   바닥 303.4, 비고(top 318) 까지 간격 14.6. 그런데 .hours-list 는 columns 로
   BFC 가 걸려 마지막 <p> 의 margin-bottom:7px 이 빠져나가지 못하고 .hours-list
   박스 안에 이미 포함된다(브라우저로 실측 확인) — 그래서 여기 더할 값은
   14.6 이 아니라 14.6-7 ≈ 7. 결과적으로 7+7=14 로, 다른 행 사이 간격(7)의
   두 배다. (13px 는 스크린샷 눈대중값이었다 — 이 트랩 효과를 안 뺀 수치.) */
.intro-hours .hours-list + .hours-note { margin-top: 7px; }

@media (max-width: 1024px) {
  .intro-staff-list { grid-template-columns: repeat(3, 1fr); }
  /* 시안에 태블릿 프레임이 없다. 359px 고정을 그대로 두면 이 구간에서
     지도만 좁아지므로 비례 분할로 되돌린다(시안 359:651 ≈ 1:1.8). */
  .intro-directions-body { grid-template-columns: 1fr 1.8fr; gap: 40px; }
}

@media (max-width: 720px) {
  .intro-sec-tit { font-size: 24px; margin: 60px 0 24px; }
  /* MO 시안 1:2823 (720 프레임 = @2x → 전부 ÷2) — 카드 300→150px,
     열 간격 40→20px, 행 간격 72.25→36px. 콘텐츠 320 = 150*2 + 20 이라
     360px 화면에서 카드가 시안과 정확히 같은 150px 가 된다. */
  .intro-staff-list { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  /* 모바일은 지도가 먼저다(시안 1:2823). */
  /* MO 시안 1:2823 — 지도 끝(4790) → 대표번호(4825) 가 35@2x = 18px. */
  .intro-directions-body { grid-template-columns: 1fr; gap: 18px; }
  /* MO 시안은 지도가 화면 끝까지 간다(x=0, w=713/720). .intro-pg 의 좌우 20px 를
     지도에서만 되돌린다. */
  .intro-directions-map { margin-left: -20px; margin-right: -20px; }
  /* MO 시안은 진료시간이 «1열» 이다 — 평일·토요일·공휴일·점심시간이 전부 x=40 에
     세로로 쌓인다(5136 / 5254 / 5372 / 5490). PC 의 2열을 그대로 두면 320px 폭에
     열이 두 개 들어가 시안과 구조가 달라진다. */
  .intro-hours > .hours-list { columns: 1; }
  .intro-directions-map { order: -1; }
}