/* =========================================================
   KS병원 — 서브페이지 공통 스타일  (sub_page/css/sub.css)
   ---------------------------------------------------------
   · sub_page/ 폴더의 모든 문서에 자동으로 로드된다.
     (partials/layout-head.php 가 경로를 보고 붙인다)
   · 기준 페이지: /sub_doctor/doctor_member.php
     — 색상 · 폰트 · 버튼 · 보더라인을 그 페이지와 동일하게 맞춘다.
   · 토큰(색 · 글자크기 · 간격)은 /assets/css/tokens.css,
     헤더 · 푸터 · 버튼(.btn) · 탭(.tabs/.tab) · 모달 등 전역 컴포넌트는
     /assets/css/style.css 가 계속 담당한다. 여기서 재정의하지 않는다.
   · 페이지를 하나 만들 때마다 [90. 페이지별 스타일] 아래에
     파일명 배너를 달고 이어서 추가한다.

   [목차]
     00. 서브페이지 공통 변수
     10. 섹션 · 타이틀
     20. 버튼 · 칩
     30. 카드 · 박스 · 그리드
     35. 프로세스 STEP
     40. 표
     50. 리스트 · 노트
     60. 유틸
     90. 페이지별 스타일
         · sub-mission.php — 미션 · 비전
         · info_03.php     — 진료시간 안내
         · info_04.php     — 신청 · 발급 안내
         · info_05.php     — 온라인 진료예약(준비중)
         · info_06.php     — 비급여항목(탭 + 스크롤 표 + 검색)
         · sub-stand.php   — 설립 목적
         · sub-greeting.php— 병원장 인사말
         · sub-brand.php   — 병원 브랜드(CI)
         · sub-history.php — 연혁(구간 탭 + 스크롤 연도)
         · sub-about.php   — 병원소개
         · center_01.php   — 심혈관센터
         · center_02.php   — 내시경센터
         · center_03.php   — 복강경센터
         · health_01.php   — 건강증진센터
         · hospital_01.php — 층별안내
         · hospital_02.php — 편의시설 안내(주차 모달)
         · hospital_03.php — 오시는 길
         · hospital_04.php — 전화번호 안내(탭)
         · page.php        — 정책 · 안내(관리자 에디터 본문)
         · doctor_member_month.php — 의료진 월간 진료일정
   ========================================================= */

/* =========================================================
   00. 서브페이지 공통 변수
   doctor_member.php 에서 실제 쓰이는 값만 별칭으로 고정한다.
   ========================================================= */
:root {
  /* 보더라인 — 카드 · 구분선 #E3E8EE / 탭 · 입력창 #C3CCD6 */
  --sub-line: var(--color-line-200);
  --sub-line-strong: var(--color-line-300);

  /* 배경 */
  --sub-card-bg: #fff;
  --sub-tint: var(--color-bg-50);
  --sub-tint-strong: var(--color-bg-100);

  /* 모서리 */
  --sub-radius: var(--radius-lg);
  --sub-radius-sm: var(--radius-md);
  --sub-radius-pill: var(--radius-full);

  /* 간격 */
  --sub-gap: 2.4rem;
  --sub-sect-pt: 8rem;
  /* 공통 상단(doc-intro) 과 본문 사이 여백 80px */
  --sub-sect-pb: 14rem;

  /* 서브페이지 기본 가로 폭 — 본문은 1400px 안에서 표현한다 */
  --sub-container: 140rem;
}

/* ---------------------------------------------------------
   본문 기준 폭 1400px
   · sub_page/ 문서의 <main> 안 모든 컨테이너에 기본 적용된다.
     (헤더 · 푸터는 전체 사이트 공통이므로 건드리지 않는다)
   · 기준 페이지 doctor_member.php 의
     `body.sub .sect[data-tabs] .inner--wide { max-width:140rem }` 와 같은 폭.
   · 더 넓게/좁게 써야 하는 페이지만 별도 요청으로 예외 처리한다.
   --------------------------------------------------------- */
#main .inner,
#main .inner--wide,
#main .inner--narrow,
#main .breadcrumb__list {
  max-width: var(--sub-container);
}

/* figure 는 브라우저 기본 여백(margin: 1em 40px)이 남아 있어 초기화한다.
   요소 선택자(낮은 우선순위)라 페이지별 .xxx { margin-top } 지정은 그대로 살아난다. */
figure {
  margin: 0;
}

/* =========================================================
   10. 섹션 · 타이틀
   ========================================================= */
.sub-sect {
  position: relative;
  padding-top: var(--sub-sect-pt);
}

/* 문서의 마지막 섹션 — 푸터와의 간격 */
.sub-sect--last {
  padding-bottom: var(--sub-sect-pb);
}

/* 연한 배경 띠 섹션 */
.sub-sect--tint {
  background: var(--sub-tint);
  padding-bottom: 10rem;
}

.sub-sect+.sub-sect {
  padding-top: 10rem;
}

/* 섹션 제목 — 서브페이지 공통 규격: 40px / weight 500 / 자간 -0.02em
   (좌측 포인트 컬러 바는 style.css 의 .block-title 과 동일) */
.sub-title {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-ink-900);
  margin-bottom: 4rem;
  padding-left: 1.5rem;
  border-left: 0.5rem solid var(--point);
}

.sub-title em {
  color: var(--brand);
  font-style: normal;
}

/* 가운데 정렬 제목 — 좌측 바 대신 짧은 밑줄 */
.sub-title--center {
  padding-left: 0;
  border-left: 0;
  text-align: center;
}

.sub-title--center::after {
  content: "";
  display: block;
  width: 5rem;
  height: 0.4rem;
  margin: 2rem auto 0;
  border-radius: 999px;
  background: var(--point);
}

/* 소제목 */
.sub-title2 {
  font-size: var(--main_ti1);
  font-weight: 700;
  color: var(--color-ink-900);
  margin-bottom: 2rem;
}

.sub-title3 {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 1.2rem;
}

/* 영문 소제목 — doc-intro__en 과 동일 서체 */
.sub-en {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1.2rem;
}

/* 페이지 대표 카피 — 섹션 제목보다 큰, 문단형 헤드라인 */
.sub-copy {
  font-size: 4.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.sub-copy--lg {
  font-size: 5rem;
  line-height: 1.35;
}

.sub-copy em {
  color: var(--brand);
  font-style: normal;
  font-weight: 700;
}

/* 본문 리드 문구 */
.sub-lead {
  font-size: var(--bigTxt);
  line-height: 1.7;
  color: var(--color-ink-500);
  max-width: 78rem;
  margin-bottom: 6rem;
  word-break: keep-all;
}

.sub-lead--center {
  margin-inline: auto;
  text-align: center;
}

.sub-txt {
  font-size: var(--txt);
  line-height: 1.75;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.sub-txt+.sub-txt {
  margin-top: 2rem;
}

.sub-txt b {
  font-weight: 700;
  color: var(--color-primary-800);
}

@media (max-width:768px) {
  .sub-sect {
    padding-top: 6rem;
  }

  .sub-sect+.sub-sect {
    padding-top: 7rem;
  }

  .sub-sect--last {
    padding-bottom: 8rem;
  }

  .sub-copy {
    font-size: 2.8rem;
  }

  .sub-copy--lg {
    font-size: 3.2rem;
  }

  .sub-lead {
    margin-bottom: 4rem;
  }
}

/* =========================================================
   20. 버튼 · 칩
   버튼은 전역 .btn / .btn--primary / .btn--point / .btn--ghost 를 그대로 쓴다.
   여기서는 서브페이지에서만 쓰는 칩 · 태그 · 링크만 정의한다.
   ========================================================= */
.sub-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-pill);
  background: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-ink-500);
  cursor: pointer;
  transition: 0.2s;
}

.sub-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.sub-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 라벨(비클릭) — 진료과 · 태그 표시용 */
.sub-tag {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand-tint);
  color: var(--color-primary-800);
  font-size: 1.3rem;
  font-weight: 700;
}

.sub-tag--point {
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}

/* 텍스트 링크 */
.sub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--smTxt);
  font-weight: 700;
  color: var(--brand);
}

.sub-link::after {
  content: "→";
  transition: transform 0.2s;
}

.sub-link:hover::after {
  transform: translateX(0.4rem);
}

/* =========================================================
   30. 카드 · 박스 · 그리드
   ========================================================= */
.sub-card {
  background: var(--sub-card-bg);
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  padding: 4rem;
}

.sub-card--pad-sm {
  padding: 2.4rem;
}

.sub-card--tint {
  background: var(--sub-tint);
}

.sub-card--line {
  border-color: var(--sub-line-strong);
}

/* 강조 박스 — 안내문 · 주의사항 */
.sub-box {
  padding: 3.2rem;
  background: var(--sub-tint);
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-sm);
  font-size: var(--txt);
  color: var(--color-ink-700);
}

.sub-box--brand {
  background: var(--brand-tint);
  border-color: var(--brand-tint-strong);
}

.sub-grid {
  display: grid;
  gap: var(--sub-gap);
}

.sub-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.sub-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.sub-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width:1024px) {
  .sub-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:768px) {
  .sub-card {
    padding: 2.4rem;
  }

  .sub-box {
    padding: 2.4rem;
  }

  .sub-grid--2,
  .sub-grid--3,
  .sub-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   강조 배너 — 브랜드 그라데이션 + 전화 (응급실 · 24시간 안내 등)
   info_03(진료시간) · center_04(응급의료센터)가 함께 쓴다.
   --------------------------------------------------------- */
.sub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 4rem;
  padding: 4.5rem 5rem;
  border-radius: var(--sub-radius);
  background: linear-gradient(120deg, var(--brand-deep), var(--brand));
  color: #fff;
}

.sub-banner__en {
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

.sub-banner__tit {
  margin-top: 1.2rem;
  font-size: var(--main_ti1);
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
}

.sub-banner__tit em {
  color: var(--color-accent-300);
  font-style: normal;
}

.sub-banner__txt {
  margin-top: 1.4rem;
  font-size: var(--smTxt);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  word-break: keep-all;
}

.sub-banner__tel {
  display: inline-flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
  padding: 2.4rem 3.6rem;
  border-radius: var(--sub-radius-sm);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  text-align: center;
}

.sub-banner__tel small {
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.sub-banner__tel b {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* =========================================================
   35. 프로세스 STEP — 진료 · 입원 · 발급 절차 공통
   ========================================================= */
.sub-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.8rem;
}

.sub-steps--4 {
  grid-template-columns: repeat(4, 1fr);
}

.sub-steps--6 {
  grid-template-columns: repeat(6, 1fr);
}

.sub-step {
  position: relative;
  padding: 3.2rem 1.8rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-sm);
}

.sub-step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.8rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand-tint);
  color: var(--brand);
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sub-step__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.sub-step__desc {
  margin-top: 0.9rem;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-ink-500);
  word-break: keep-all;
}

/* 카드 사이 화살표 */
.sub-step+.sub-step::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 0.8rem solid var(--color-line-300);
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
}

@media (max-width:1024px) {

  .sub-steps,
  .sub-steps--4,
  .sub-steps--6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .sub-step+.sub-step::before {
    display: none;
  }
}

@media (max-width:768px) {

  .sub-steps,
  .sub-steps--4,
  .sub-steps--6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .sub-step {
    padding: 2.4rem 1.2rem;
  }
}

/* ---------------------------------------------------------
   아코디언 — 길어지는 목록을 접어 둔다 (<details> 기반)
   health_04(유해인자 181종) · center_05(핵심클리닉)가 함께 쓴다.
   --------------------------------------------------------- */
.sub-acc {
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-sm);
  background: #fff;
  overflow: hidden;
}

.sub-acc + .sub-acc {
  margin-top: 1rem;
}

.sub-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 2rem 2.4rem;
  font-size: var(--smTxt);
  font-weight: 700;
  color: var(--color-ink-900);
  cursor: pointer;
  list-style: none;
}

.sub-acc > summary::-webkit-details-marker {
  display: none;
}

.sub-acc > summary::after {
  content: "＋";
  color: var(--brand);
  font-weight: 700;
}

.sub-acc[open] > summary {
  background: var(--sub-tint);
  border-bottom: 1px solid var(--sub-line);
}

.sub-acc[open] > summary::after {
  content: "－";
}

.sub-acc__body {
  padding: 2.2rem 2.4rem;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--color-ink-700);
  word-break: keep-all;
}

/* =========================================================
   40. 표 — 진료시간 · 안내표 공통
   ========================================================= */
.sub-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sub-table {
  width: 100%;
  border-top: 2px solid var(--brand);
  border-collapse: collapse;
  font-size: var(--smTxt);
}

.sub-table th,
.sub-table td {
  padding: 1.8rem 1.6rem;
  border-bottom: 1px solid var(--sub-line);
  text-align: center;
  word-break: keep-all;
}

.sub-table thead th {
  background: var(--sub-tint-strong);
  color: var(--color-ink-900);
  font-weight: 700;
}

.sub-table tbody th {
  background: var(--sub-tint);
  color: var(--color-ink-700);
  font-weight: 700;
}

.sub-table td {
  color: var(--color-ink-700);
}

.sub-table--left th,
.sub-table--left td {
  text-align: left;
}

@media (max-width:768px) {

  .sub-table th,
  .sub-table td {
    padding: 1.4rem 1rem;
  }
}

/* =========================================================
   50. 리스트 · 노트
   ========================================================= */
.sub-list {
  font-size: var(--txt);
  color: var(--color-ink-700);
}

.sub-list li {
  position: relative;
  padding-left: 1.8rem;
  line-height: 1.75;
  word-break: keep-all;
}

.sub-list li+li {
  margin-top: 1.2rem;
}

.sub-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--point);
}

/* 번호 목록 */
.sub-olist {
  counter-reset: subol;
  font-size: var(--txt);
  color: var(--color-ink-700);
}

.sub-olist li {
  position: relative;
  padding-left: 3.4rem;
  line-height: 1.75;
}

.sub-olist li+li {
  margin-top: 1.4rem;
}

.sub-olist li::before {
  counter-increment: subol;
  content: counter(subol);
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 700;
}

/* 하단 참고 문구 */
.sub-note {
  margin-top: 2rem;
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--color-ink-400);
}

.sub-note::before {
  content: "※ ";
}

/* =========================================================
   60. 유틸
   ========================================================= */
.sub-divider {
  height: 1px;
  margin: 6rem 0;
  background: var(--sub-line);
  border: 0;
}

.sub-figure {
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

.sub-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.sub-figure figcaption {
  padding: 1.4rem 2rem;
  border-top: 1px solid var(--sub-line);
  background: #fff;
  font-size: var(--smTxt);
  font-weight: 600;
  color: var(--color-ink-500);
}

.sub-center {
  text-align: center;
}

/* =========================================================
   90. 페이지별 스타일
   ---------------------------------------------------------
   페이지를 만들 때마다 아래에 배너를 달고 추가한다.
   클래스는 페이지 전용 접두어를 붙여 서로 충돌하지 않게 한다.
   ========================================================= */

/* ---------------------------------------------------------
   [sub-mission.php] 미션 · 비전  —  .mvd
   · 이미지 없이 텍스트 + CSS 육각형 + SVG 연결선으로 그린다.
   · 1100 × 520 좌표계를 기준으로 무대(stage) 비율을 고정하고,
     내부 글자 크기는 --u( = 무대 폭 / 110 )로 함께 확대 · 축소된다.
   --------------------------------------------------------- */
.mvd {
  --u: min(1rem, calc((100vw - var(--inPd) * 2) / 110));
  position: relative;
  width: 100%;
  max-width: 110rem;
  margin-inline: auto;
  aspect-ratio: 1100 / 520;
}

/* 등장 연출은 CSS 애니메이션으로만 처리한다.
   (JS 의 .reveal/.active 에 의존하면 스크립트가 실패할 때 본문이 통째로 사라진다) */
@keyframes mvdRise {
  from {
    opacity: 0;
    transform: translateY(4rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mvdFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---- 연결선 : 점선 + 리더선 + 점 ---- */
.mvd__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: mvdFade 0.8s ease 0.45s forwards;
}

.mvd__lines .dash {
  stroke: var(--sub-line-strong);
  stroke-width: 1.6;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}

.mvd__lines .lead {
  stroke: var(--sub-line-strong);
  stroke-width: 1.6;
}

.mvd__lines .dot {
  fill: var(--brand-bright);
}

/* ---- 육각형 ---- */
.mvd__hex {
  position: absolute;
  width: 23.18%;
  /* 255 / 1100 */
  height: 43.27%;
  /* 225 / 520 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.7 * var(--u));
  text-align: center;
  color: #fff;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  opacity: 0;
  animation: mvdRise 0.7s ease forwards;
}

.mvd__hex b {
  font-size: calc(3.2 * var(--u));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.mvd__hex span {
  font-family: var(--font-en);
  font-size: calc(1.55 * var(--u));
  font-weight: 600;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.9);
}

.mvd__hex--vision {
  left: 38.18%;
  top: 0;
  background: linear-gradient(145deg, var(--color-primary-600), var(--color-primary-700));
}

.mvd__hex--mission {
  left: 6.82%;
  top: 56.15%;
  background: linear-gradient(145deg, var(--color-primary-300), #46A6E8);
  animation-delay: 0.12s;
}

.mvd__hex--core {
  left: 74.55%;
  top: 56.15%;
  background: linear-gradient(145deg, var(--color-primary-800), var(--color-primary-900));
  animation-delay: 0.24s;
}

/* ---- 설명 문구 ---- */
.mvd__txt {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  font-size: calc(1.65 * var(--u));
  line-height: 1.65;
  color: var(--color-ink-700);
  word-break: keep-all;
  opacity: 0;
  animation: mvdFade 0.7s ease 0.35s forwards;
}

.mvd__txt b {
  font-weight: 800;
  color: var(--color-primary-800);
}

.mvd__txt--mission {
  left: 17.82%;
  top: 11.5%;
  width: 32%;
}

.mvd__txt--core {
  left: 81.45%;
  top: 11.5%;
  width: 32%;
}

.mvd__txt--vision {
  left: 49.82%;
  top: 70.5%;
  width: 46%;
}

.mvd__txt--vision p+p {
  margin-top: calc(1.7 * var(--u));
}

/* ---- 모바일 : 연결선을 감추고 사명 → 비전 → 핵심가치 순으로 쌓는다 ---- */
@media (max-width:767px) {
  .mvd {
    --u: 1.15rem;
    aspect-ratio: auto;
    max-width: 44rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mvd__lines {
    display: none;
  }

  .mvd__hex {
    position: static;
    width: 22rem;
    height: 19rem;
    margin-bottom: 2rem;
  }

  .mvd__txt {
    position: static;
    transform: none;
    width: 100%;
    margin-bottom: 6rem;
  }

  /* 모바일에서 마지막에 오는 블록(핵심가치)만 아래 여백을 없앤다 */
  .mvd__txt--core {
    margin-bottom: 0;
  }

  .mvd__hex--mission {
    order: 1;
  }

  .mvd__txt--mission {
    order: 2;
  }

  .mvd__hex--vision {
    order: 3;
  }

  .mvd__txt--vision {
    order: 4;
  }

  .mvd__hex--core {
    order: 5;
  }

  .mvd__txt--core {
    order: 6;
  }
}

@media (prefers-reduced-motion: reduce) {

  .mvd__hex,
  .mvd__txt,
  .mvd__lines {
    opacity: 1 !important;
    animation: none !important;
  }

  .mvd__hex {
    transform: none !important;
  }
}

/* ---------------------------------------------------------
   [info_03.php] 진료시간 안내  —  .info03-*
   · 외래 진료시간 / 응급진료 / 외래 진료절차 / 예약방법 /
     입원 안내(절차 · 준비물품 · 주의사항) / 퇴원 절차
   · 표 · 리스트 · 카드는 공통(.sub-*)을 쓰고,
     여기서는 시간표 · 응급배너 · STEP 프로세스 · 준비물품만 정의한다.
   --------------------------------------------------------- */

/* ---- 외래 진료시간 : 사진 + 시간표 ---- */
.info03-hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

.info03-hours__photo {
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

.info03-hours__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 32rem;
  object-fit: cover;
}

.info03-hours__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0 0;
  border-top: 2px solid var(--brand);
}

.info03-hours__row {
  display: grid;
  grid-template-columns: 16rem 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2.3rem 0.4rem;
  border-bottom: 1px solid var(--sub-line);
}

.info03-hours__day {
  font-size: var(--txt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.info03-hours__time {
  font-family: var(--font-en);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--brand);
}

.info03-hours__row--lunch {
  background: var(--sub-tint);
}

.info03-hours__row--lunch .info03-hours__time {
  color: var(--color-accent-600);
}

/* ---- 입원 준비물품 ---- */
.info03-kit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}

.info03-kit__item {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.info03-kit__item img {
  display: block;
  width: 100%;
  aspect-ratio: 37 / 28;
  object-fit: cover;
}

.info03-kit__cap {
  padding: 2rem;
  text-align: center;
  font-size: var(--txt);
  font-weight: 700;
  color: var(--color-ink-900);
  word-break: keep-all;
}

@media (max-width:768px) {
  .info03-hours {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .info03-hours__photo img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .info03-hours__row {
    grid-template-columns: 11rem 1fr;
    padding: 1.8rem 0.4rem;
  }

  .info03-hours__time {
    font-size: 2.1rem;
  }

  .sub-banner {
    padding: 3rem 2.4rem;
    gap: 2.4rem;
  }

  .sub-banner__tel {
    width: 100%;
    padding: 2rem;
  }

  .info03-kit {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   [info_04.php] 신청 · 발급 안내  —  .info04-*
   · 서식 다운로드(HWP) / 사본발급 수수료
   · 안내 표 · 리스트 · STEP 은 공통(.sub-table, .sub-list, .sub-steps)을 쓴다.
   --------------------------------------------------------- */

/* ---- 서식 다운로드 ---- */
.info04-files {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.info04-file {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 3rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  transition: 0.2s;
}

.info04-file:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

.info04-file__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5.8rem;
  height: 5.8rem;
  border-radius: var(--sub-radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
}

.info04-file__ico svg {
  width: 2.8rem;
  height: 2.8rem;
}

.info04-file__body {
  min-width: 0;
}

.info04-file__tit {
  display: block;
  font-size: var(--txt);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.info04-file__meta {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink-400);
}

.info04-file__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: 1.2rem 2.2rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  white-space: nowrap;
}

.info04-file:hover .info04-file__btn {
  background: var(--brand-deep);
}

.info04-file__btn svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* ---- 사본발급 수수료 ---- */
.info04-fee {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.info04-fee__item {
  padding: 4rem 3rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.info04-fee__label {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand-tint);
  color: var(--color-primary-800);
  font-size: 1.3rem;
  font-weight: 700;
}

.info04-fee__price {
  margin-top: 2rem;
  font-family: var(--font-en);
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--brand);
}

.info04-fee__price span {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-ink-500);
}

.info04-fee__desc {
  margin-top: 1.2rem;
  font-size: var(--smTxt);
  color: var(--color-ink-500);
}

/* ---- 구비서류 표 안의 번호 목록 ---- */
.info04-docs {
  font-size: var(--smTxt);
  line-height: 1.7;
  color: var(--color-ink-700);
}

.info04-docs li+li {
  margin-top: 0.8rem;
}

.info04-docs b {
  font-weight: 700;
  color: var(--color-primary-800);
}

@media (max-width:768px) {

  .info04-files,
  .info04-fee {
    grid-template-columns: 1fr;
  }

  .info04-file {
    flex-wrap: wrap;
    padding: 2.4rem;
    gap: 1.6rem;
  }

  .info04-file__btn {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .info04-fee__item {
    padding: 3rem 2rem;
  }
}

/* ---------------------------------------------------------
   [info_05.php] 온라인 진료예약 (준비중)  —  .info05-*
   · 예약 폼 · 예약 버튼 없이 "준비중" 안내만 제공한다.
   --------------------------------------------------------- */

/* ---- 준비중 안내 배너 ---- */
.info05-ready {
  padding: 7rem 4rem;
  text-align: center;
  border: 1px solid var(--brand-tint-strong);
  border-radius: var(--sub-radius);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--color-primary-50) 0%, #fff 60%);
}

.info05-ready__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.4rem;
  height: 8.4rem;
  margin: 0 auto 3rem;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
}

.info05-ready__ico svg {
  width: 4rem;
  height: 4rem;
}

.info05-ready__badge {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 0.6rem 1.6rem;
  border-radius: var(--sub-radius-pill);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.info05-ready__tit {
  font-size: var(--main_ti1);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.info05-ready__txt {
  margin-top: 2rem;
  font-size: var(--txt);
  line-height: 1.75;
  color: var(--color-ink-500);
  word-break: keep-all;
}

/* ---- 대체 접수 방법 ---- */
.info05-ways {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.info05-way {
  display: flex;
  gap: 2.2rem;
  padding: 3.6rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.info05-way__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: var(--sub-radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
}

.info05-way__ico svg {
  width: 2.6rem;
  height: 2.6rem;
}

.info05-way__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.info05-way__txt {
  margin-top: 1rem;
  font-size: var(--smTxt);
  line-height: 1.7;
  color: var(--color-ink-500);
  word-break: keep-all;
}

.info05-way__tel {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: var(--font-en);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--brand);
}

.info05-way__tel span {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-ink-400);
}

@media (max-width:768px) {
  .info05-ready {
    padding: 4.5rem 2.4rem;
  }

  .info05-ready__ico {
    width: 6.4rem;
    height: 6.4rem;
    margin-bottom: 2.2rem;
  }

  .info05-way__tel {
    font-size: 2.2rem;
  }

  .info05-ready__ico svg {
    width: 3rem;
    height: 3rem;
  }

  .info05-ways {
    grid-template-columns: 1fr;
  }

  .info05-way {
    padding: 2.4rem;
    gap: 1.6rem;
  }
}

/* ---------------------------------------------------------
   [info_06.php] 비급여항목  —  .uni-*
   · 탭(행위료 · 치료재료대 · 약제비 · 제증명수수료 · 선택진료료)마다
     표 전체가 하나의 스크롤 박스 안에 들어간다. (페이지가 길어지지 않게)
   · 헤더는 스크롤 박스 안에서 sticky 로 고정된다.
     2단 헤더의 두 번째 줄 top 값은 JS 가 실제 높이를 재서 --uni-h1 로 넣어준다.
   · 검색은 표 안의 글자를 <mark> 로 감싸 색을 입히고 그 위치로 스크롤한다.
   --------------------------------------------------------- */

/* ---- 탭 — 5개 균등 배치 (.tabs--grid 의 8칸 기본값을 덮는다) ---- */
.uni-tabs {
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 3rem;
}

@media (max-width:560px) {
  .uni-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 검색 툴바 ---- */
.uni-toolbar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.uni-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 34rem;
  max-width: 46rem;
  min-width: 0;
  padding: 0.6rem 0.6rem 0.6rem 2rem;
  background: var(--sub-tint-strong);
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-pill);
}

.uni-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.5rem;
  color: var(--color-ink-900);
}

.uni-search__input::placeholder {
  color: var(--color-ink-400);
}

.uni-search__input:focus {
  outline: none;
}

.uni-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.uni-search__btn:hover {
  background: var(--brand-deep);
}

.uni-search__btn svg {
  width: 1.9rem;
  height: 1.9rem;
}

/* 검색 결과 이동 */
.uni-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.uni-nav__count {
  min-width: 8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-ink-500);
}

.uni-nav__count b {
  color: var(--brand);
  font-weight: 800;
}

.uni-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid var(--sub-line);
  border-radius: 50%;
  background: #fff;
  color: var(--color-ink-500);
  cursor: pointer;
  transition: 0.2s;
}

.uni-nav__btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}

.uni-nav__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.uni-nav__btn svg {
  width: 1.6rem;
  height: 1.6rem;
}

.uni-total {
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--color-ink-500);
}

.uni-total b {
  color: var(--color-ink-900);
  font-weight: 700;
}

/* ---- 표 스크롤 박스 ---- */
.uni-scroll {
  --uni-h1: 4.8rem;
  max-height: 62rem;
  overflow: auto;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-sm);
  background: #fff;
  overscroll-behavior: contain;
}

.uni-table {
  width: 100%;
  min-width: 96rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.4rem;
  line-height: 1.5;
}

.uni-table th,
.uni-table td {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--sub-line);
  word-break: keep-all;
}

.uni-table thead th {
  position: sticky;
  z-index: 2;
  background: var(--sub-tint-strong);
  color: var(--color-ink-900);
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid var(--sub-line-strong);
}

.uni-table thead tr:first-child th {
  top: 0;
}

.uni-table thead tr:nth-child(2) th {
  top: var(--uni-h1);
}

/* 그룹 헤더 구분선 */
.uni-table thead th+th {
  border-left: 1px solid var(--sub-line);
}

.uni-table tbody td {
  color: var(--color-ink-700);
}

.uni-table tbody td+td {
  border-left: 1px solid var(--color-line-200);
}

.uni-table tbody tr:nth-child(even) td {
  background: var(--sub-tint);
}

.uni-table tbody tr:hover td {
  background: var(--brand-tint);
}

.uni-table .is-num {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink-900);
  white-space: nowrap;
}

.uni-table .is-empty {
  color: var(--color-ink-400);
}

/* 검색어 위치 표시 */
.uni-table mark {
  padding: 0.1rem 0.2rem;
  border-radius: 0.3rem;
  background: #FFE9A8;
  color: var(--color-ink-900);
  font-weight: 700;
}

.uni-table mark.is-current {
  background: var(--point);
  color: #fff;
}

.uni-table tbody tr.is-hit td {
  background: var(--color-accent-50);
}

/* 항목 없음 */
.uni-empty {
  padding: 8rem 2rem;
  text-align: center;
  font-size: var(--txt);
  color: var(--color-ink-400);
}

/* 안내 문구 */
.uni-hint {
  display: none;
  margin-top: 1.2rem;
  font-size: 1.3rem;
  color: var(--color-ink-400);
}

@media (max-width:1024px) {
  .uni-hint {
    display: block;
  }
}

@media (max-width:768px) {
  .uni-toolbar {
    gap: 0.8rem;
  }

  .uni-search {
    flex: 1 1 100%;
    max-width: none;
    padding-left: 1.6rem;
  }

  .uni-total {
    margin-left: 0;
  }

  .uni-scroll {
    max-height: 52rem;
  }

  .uni-table {
    font-size: 1.3rem;
    min-width: 82rem;
  }

  .uni-table th,
  .uni-table td {
    padding: 0.9rem 0.7rem;
  }
}
/* ---------------------------------------------------------
   [sub-stand.php] 설립 목적  —  .stand-*
   · 대표 카피 + 병원 전경(파노라마) + 본문 + KS 의미 배너.
   --------------------------------------------------------- */

/* ---- 병원 전경 ---- */
.stand-hero {
  margin-top: 5rem;
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

.stand-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 본문 ---- */
.stand-text {
  max-width: 108rem;
  margin-top: 6rem;
}

.stand-text p {
  font-size: var(--bigTxt);
  line-height: 1.85;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.stand-text p + p {
  margin-top: 2.6rem;
}

.stand-text b {
  font-weight: 700;
  color: var(--color-primary-800);
}

/* ---- KS 의미 배너 ---- */
.stand-ks {
  padding: 6rem 5rem;
  border-radius: var(--sub-radius);
  background: linear-gradient(120deg, var(--brand-deep), var(--brand));
  color: #fff;
}

.stand-ks__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.stand-ks__item {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--sub-radius-sm);
  background: rgba(255, 255, 255, 0.08);
}

.stand-ks__mark {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sub-radius-sm);
  background: #fff;
  color: var(--brand);
  font-family: var(--font-en);
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1;
}

.stand-ks__en {
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.stand-ks__ko {
  margin-top: 0.8rem;
  font-size: var(--smTxt);
  color: rgba(255, 255, 255, 0.8);
  word-break: keep-all;
}

.stand-ks__note {
  margin-top: 4rem;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: var(--txt);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  word-break: keep-all;
}

.stand-ks__note b {
  color: #fff;
  font-weight: 700;
}

@media (max-width:768px) {
  .stand-hero {
    margin-top: 3rem;
  }

  .stand-text {
    margin-top: 4rem;
  }

  .stand-ks {
    padding: 3.5rem 2.4rem;
  }

  .stand-ks__grid {
    grid-template-columns: 1fr;
  }

  .stand-ks__item {
    padding: 2.4rem;
    gap: 1.8rem;
  }

  .stand-ks__mark {
    width: 6rem;
    height: 6rem;
    font-size: 3.2rem;
  }

  .stand-ks__note {
    margin-top: 3rem;
    padding-top: 2.5rem;
    text-align: left;
  }
}

/* ---------------------------------------------------------
   [sub-greeting.php] 병원장 인사말  —  .greet-*
   · 상단 : 병원장 사진 + 대표 카피 + 직함
   · 하단 : 인사말 본문 + 서명
   --------------------------------------------------------- */
.greet-hero {
  display: grid;
  grid-template-columns: 42rem 1fr;
  gap: 6rem;
  align-items: center;
}

.greet-hero__photo {
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-tint) 0%, #fff 75%);
}

.greet-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.greet-hero__copy {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.greet-hero__copy em {
  color: var(--brand);
  font-style: normal;
  font-weight: 700;
}

.greet-hero__lead {
  margin-top: 2.8rem;
  font-size: var(--bigTxt);
  line-height: 1.8;
  color: var(--color-ink-500);
  word-break: keep-all;
}

.greet-hero__name {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-top: 3.4rem;
  padding-top: 2.8rem;
  border-top: 1px solid var(--sub-line);
}

.greet-hero__name span {
  font-size: var(--smTxt);
  font-weight: 600;
  color: var(--color-ink-500);
}

.greet-hero__name b {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink-900);
}

/* ---- 본문 : 2단 그리드 ---- */
.greet-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6rem;
  margin-top: 8rem;
}

/* 감사 인사 + 서명은 두 단에 걸친다 */
.greet-body__foot {
  grid-column: 1 / -1;
}

.greet-body p {
  font-size: var(--txt);
  line-height: 1.95;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.greet-body p + p {
  margin-top: 2.4rem;
}

.greet-body b {
  font-weight: 700;
  color: var(--color-primary-800);
}

.greet-thanks {
  margin-top: 3.5rem;
  font-size: var(--bigTxt);
  font-weight: 600;
  color: var(--color-ink-900);
}

.greet-sign {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--sub-line);
}

.greet-sign span {
  font-size: var(--smTxt);
  font-weight: 600;
  color: var(--color-ink-500);
}

.greet-sign b {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink-900);
}

@media (max-width:1024px) {
  .greet-hero {
    grid-template-columns: 34rem 1fr;
    gap: 4rem;
  }

  .greet-hero__copy {
    font-size: 3.4rem;
  }
}

@media (max-width:768px) {
  .greet-hero {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* 모바일은 한 단으로 — 단 사이 간격은 문단 간격과 같게 */
  .greet-body {
    grid-template-columns: 1fr;
    gap: 2.4rem 0;
  }

  .greet-hero__photo {
    max-width: 30rem;
    margin-inline: auto;
  }

  .greet-hero__copy {
    font-size: 2.8rem;
  }

  .greet-body {
    margin-top: 5rem;
  }

  .greet-sign {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }
}

/* ---------------------------------------------------------
   [sub-brand.php] 병원 브랜드(CI)  —  .brand-*
   · 심볼 및 로고타입 / 브랜드 컬러 / 캐릭터.
   · 대표 카피는 공통 .sub-copy 를 쓴다.
   --------------------------------------------------------- */

/* ---- 심볼 · 로고타입 ---- */
.brand-logo {
  margin-top: 5rem;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: #fff;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 제목 + 설명 (좌 3 : 우 9) */
.brand-desc {
  display: grid;
  grid-template-columns: 28rem 1fr;
  gap: 4rem;
  margin-top: 5rem;
}

.brand-desc__tit {
  font-size: var(--main_ti1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--color-ink-900);
}

.brand-desc__tit small {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.brand-desc__txt {
  font-size: var(--txt);
  line-height: 1.95;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.brand-desc__txt b {
  font-weight: 700;
  color: var(--color-primary-800);
}

/* ---- 브랜드 컬러 ---- */
.brand-colors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.brand-color {
  overflow: hidden;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  background: #fff;
}

.brand-color__chip {
  display: block;
  height: 14rem;
}

.brand-color__chip--blue {
  background: #006EB8;
}

.brand-color__chip--orange {
  background: #F7941D;
}

.brand-color__body {
  padding: 2.8rem 3rem 3rem;
}

.brand-color__name {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-ink-900);
}

.brand-color__hex {
  margin-top: 0.6rem;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink-400);
}

.brand-color__txt {
  margin-top: 1.6rem;
  font-size: var(--smTxt);
  line-height: 1.7;
  color: var(--color-ink-500);
  word-break: keep-all;
}

/* ---- 캐릭터 ---- */
.brand-char {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.brand-char__img {
  padding: 3rem;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  background: var(--sub-tint);
}

.brand-char__img img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-char__names {
  display: flex;
  gap: 1rem;
  margin-top: 2.4rem;
}

@media (max-width:1024px) {
  .brand-desc {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width:768px) {
  .brand-logo {
    margin-top: 3rem;
  }

  .brand-desc {
    margin-top: 3.5rem;
  }

  .brand-colors {
    grid-template-columns: 1fr;
  }

  .brand-color__chip {
    height: 10rem;
  }

  .brand-color__body {
    padding: 2.2rem;
  }

  .brand-char {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .brand-char__img {
    padding: 2rem;
  }
}

/* ---------------------------------------------------------
   [sub-about.php] 병원소개  —  .about-*
   · 대표 카피 + 전경 사진 + 소개글 / 병원 현황 / 둘러보기 / 바로가기 / 오시는 길
   · 갤러리(.gallery)와 지도(.location_sect)는 style.css 의 전역 스타일을 그대로 쓴다.
   --------------------------------------------------------- */
.about-hero {
  margin-top: 5rem;
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

.about-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.about-intro {
  max-width: 108rem;
  margin-top: 5rem;
  font-size: var(--bigTxt);
  line-height: 1.85;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.about-intro b {
  font-weight: 700;
  color: var(--color-primary-800);
}

/* ---- 병원 현황 ---- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.about-stat {
  padding: 4rem 2rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.about-stat__num {
  font-family: var(--font-en);
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand);
}

.about-stat__num span {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-ink-700);
}

.about-stat__label {
  margin-top: 1.6rem;
  font-size: var(--smTxt);
  font-weight: 600;
  color: var(--color-ink-500);
}

.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}

/* ---- 바로가기 ---- */
.about-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.about-link {
  display: block;
  padding: 3.2rem 3rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  transition: 0.2s;
}

.about-link:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

.about-link__en {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.about-link__tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.about-link__tit::after {
  content: "→";
  color: var(--color-ink-400);
  transition: transform 0.2s, color 0.2s;
}

.about-link:hover .about-link__tit::after {
  color: var(--brand);
  transform: translateX(0.4rem);
}

/* ---- 오시는 길 — 전역 .location_sect 여백만 서브페이지에 맞춘다 ---- */
.sub-sect.location_sect {
  padding-bottom: var(--sub-sect-pb);
}

.sub-sect.location_sect .grid {
  margin-top: 0;
}

@media (max-width:1024px) {
  .about-stats,
  .about-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:768px) {
  .about-hero {
    margin-top: 3rem;
  }

  .about-intro {
    margin-top: 3.5rem;
  }

  .about-stat {
    padding: 3rem 1.6rem;
  }

  .about-stat__num {
    font-size: 3.4rem;
  }

  .about-link {
    padding: 2.4rem;
  }
}

/* ---------------------------------------------------------
   [hospital_04.php] 전화번호 안내  —  .tel-*
   · 대표번호 / 진료부서 / 진료지원부서 / 병실직통 / 편의시설 5개 탭.
   · 표는 공통 .sub-table 을 쓰고, 이름 칸 정렬과 번호 링크만 여기서 잡는다.
   --------------------------------------------------------- */
.tel-tabs {
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 4rem;
}

@media (max-width:560px) {
  .tel-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 그룹 제목 (병동명 · 진료지원/행정 구분) */
.tel-group + .tel-group {
  margin-top: 5rem;
}

.tel-group__tit {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--brand);
}

.tel-group__tit::before {
  content: "";
  width: 0.6rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--brand);
}

/* 표 — 부서명과 번호는 가운데 정렬. 열 너비는 colgroup 으로 균등 분배해 화면을 채운다. */
.tel-table th,
.tel-table td {
  text-align: center;
}

.tel-table th {
  font-weight: 600;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.tel-table td {
  white-space: nowrap;
}

/* 두 쌍이 한 줄에 올 때 가운데 경계선 */
.tel-table td + th {
  border-left: 1px solid var(--sub-line);
}

.tel-num {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-ink-900);
  transition: color 0.2s;
}

.tel-num:hover {
  color: var(--brand);
  text-decoration: underline;
}

.tel-num + .tel-num {
  margin-left: 1rem;
}

.tel-table .is-empty {
  background: var(--sub-tint);
}

@media (max-width:768px) {
  .tel-group + .tel-group {
    margin-top: 3.5rem;
  }

  .tel-num {
    font-size: 1.4rem;
  }
}

/* ---------------------------------------------------------
   [hospital_03.php] 오시는 길  —  .way-*
   · 지도는 style.css 의 .location_sect 를 그대로 쓴다.
   --------------------------------------------------------- */
.way-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.way-bus {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.8rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand-tint);
  color: var(--color-primary-800);
  font-size: var(--smTxt);
  font-weight: 700;
  white-space: nowrap;
}

.way-route,
.way-routes li {
  display: block;
  font-size: var(--smTxt);
  line-height: 1.8;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.way-routes {
  counter-reset: wayroute;
}

.way-routes li {
  position: relative;
  padding-left: 2.6rem;
}

.way-routes li + li {
  margin-top: 1.2rem;
}

.way-routes li::before {
  counter-increment: wayroute;
  content: counter(wayroute);
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
}

/* ---------------------------------------------------------
   [hospital_02.php] 편의시설 안내  —  .fac-*
   · 상단 : 브랜드 패널 + 시설 사진
   · 편의시설 7종 카드 (주차장 카드에는 이용안내 모달 버튼)
   · 주차장 이용안내 · 요금안내는 이미지 모달로 띄운다. (sub_page/js/facility.js)
   --------------------------------------------------------- */
.fac-hero {
  display: grid;
  grid-template-columns: 40rem 1fr;
  gap: 2.4rem;
  margin-top: 5rem;
}

.fac-hero__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
  border-radius: var(--sub-radius);
  background: linear-gradient(150deg, var(--brand-deep), var(--brand));
  color: #fff;
}

.fac-hero__brand p {
  font-family: var(--font-en);
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.fac-hero__brand span {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-sans);
  font-size: var(--smTxt);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.fac-hero__photo {
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

.fac-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 편의시설 카드 ---- */
.fac-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.fac-item {
  display: flex;
  flex-direction: column;
  padding: 3.4rem 3rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.fac-item__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  margin-bottom: 2.4rem;
  border-radius: 50%;
  background: var(--brand-tint);
}

.fac-item__ico img {
  width: 4rem;
  height: auto;
}

.fac-item__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.fac-item__txt {
  margin-top: 1.2rem;
  font-size: var(--smTxt);
  line-height: 1.75;
  color: var(--color-ink-500);
  word-break: keep-all;
}

.fac-item__foot {
  margin-top: auto;
  padding-top: 2.4rem;
}

.fac-item__rates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

/* ---- 주차장 카드 강조 + 모달 열기 버튼 ---- */
.fac-item--parking {
  border-color: var(--brand-tint-strong);
  background: linear-gradient(180deg, var(--color-primary-50) 0%, #fff 45%);
}

.fac-park-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.6rem 2rem;
  border: 2px solid var(--brand);
  border-radius: var(--sub-radius-pill);
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: var(--smTxt);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.fac-park-btn:hover,
.fac-park-btn:focus-visible {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  transform: translateY(-0.2rem);
}

.fac-park-btn svg {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
}

.fac-park-btn__arrow {
  transition: transform 0.2s;
}

.fac-park-btn:hover .fac-park-btn__arrow {
  transform: translateX(0.4rem);
}

/* 테두리에서 퍼져 나가는 링 — 클릭을 유도하는 강조 */
.fac-park-btn::before,
.fac-park-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--point);
  opacity: 0;
  pointer-events: none;
  animation: facPulse 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.fac-park-btn::after {
  animation-delay: 1.2s;
}

.fac-park-btn:hover::before,
.fac-park-btn:hover::after {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes facPulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  70% {
    transform: scale(1.16);
    opacity: 0;
  }

  100% {
    transform: scale(1.16);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fac-park-btn::before,
  .fac-park-btn::after {
    animation: none;
    opacity: 0;
  }
}

/* ---- 주차 안내 모달 ---- */
.fac-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10003;
  background: rgba(0, 30, 55, 0.42);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.fac-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fac-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10004;
  width: min(52rem, calc(100vw - 4rem));
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2.4rem;
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 1.6rem 5rem rgba(0, 40, 72, 0.24);
  transform: translate(-50%, -50%) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fac-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.fac-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}

.fac-modal__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.fac-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid var(--sub-line);
  border-radius: 50%;
  background: #fff;
  color: var(--color-ink-500);
  cursor: pointer;
  transition: 0.2s;
}

.fac-modal__close:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.fac-modal__close svg {
  width: 1.6rem;
  height: 1.6rem;
}

.fac-modal__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sub-radius-sm);
}

.fac-modal__foot {
  margin-top: 1.6rem;
  font-size: 1.3rem;
  color: var(--color-ink-400);
}

@media (max-width:1024px) {
  .fac-hero {
    grid-template-columns: 1fr;
  }

  .fac-hero__brand {
    padding: 3rem;
  }

  .fac-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:768px) {
  .fac-hero {
    margin-top: 3rem;
  }

  .fac-hero__brand p {
    font-size: 3.2rem;
  }

  .fac-list {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .fac-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
    padding: 2.4rem;
  }

  .fac-item__ico {
    width: 6rem;
    height: 6rem;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .fac-item__ico img {
    width: 3rem;
  }

  .fac-item__foot {
    padding-top: 1.6rem;
  }
}

/* ---------------------------------------------------------
   [sub-history.php] 연혁  —  .hist-*
   · 3년 단위 구간 탭 + 좌측 큰 연도(sticky) + 우측 월별 목록.
   · 타임라인(선·점) 없이 연도 숫자만으로 흐름을 보여준다.
   · 스크롤하면 좌측 연도가 지금 보고 있는 연도로 바뀐다. (sub_page/js/history.js)
   --------------------------------------------------------- */

/* ---- 구간 탭 — 헤더 아래에 붙어 따라온다 ---- */
.hist-tabs {
  position: sticky;
  top: var(--hd_h);
  z-index: 20;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 6rem;
  padding: 1.4rem 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sub-line);
}

.hist-tab {
  position: relative;
  padding: 1rem 2.4rem;
  border: 1px solid transparent;
  border-radius: var(--sub-radius-pill);
  background: transparent;
  font-family: var(--font-en);
  font-size: var(--smTxt);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-ink-400);
  cursor: pointer;
  transition: 0.2s;
}

.hist-tab:hover {
  color: var(--brand);
}

.hist-tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ---- 본문 : 좌측 연도 + 우측 목록 ---- */
.hist-grid {
  display: grid;
  grid-template-columns: 38rem 1fr;
  gap: 6rem;
  align-items: start;
}

.hist-sticky {
  position: sticky;
  top: calc(var(--hd_h) + 12rem);
}

.hist-year {
  font-family: var(--font-en);
  font-size: 9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand);
}

/* 연도가 바뀌는 순간에만 짧게 튀어오른다 — 값 자체는 지연 없이 즉시 바뀐다 */
.hist-year.is-swap {
  animation: histSwap 0.18s ease-out;
}

@keyframes histSwap {
  from {
    opacity: 0.35;
    transform: translateY(0.8rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hist-year.is-swap {
    animation: none;
  }
}

.hist-range {
  margin-top: 1.6rem;
  font-family: var(--font-en);
  font-size: var(--smTxt);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink-400);
}

.hist-count {
  margin-top: 3rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--sub-line);
  font-size: var(--smTxt);
  color: var(--color-ink-500);
}

.hist-count b {
  color: var(--color-ink-900);
  font-weight: 700;
}

/* ---- 연도 블록 ---- */
.hist-block + .hist-block {
  margin-top: 9rem;
}

/* 모바일에서만 보이는 연도 표시 */
.hist-block__year {
  display: none;
}

.hist-month {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 3rem;
  padding: 2.6rem 0;
}

.hist-month + .hist-month {
  border-top: 1px solid var(--color-line-200);
}

.hist-month__no {
  font-family: var(--font-en);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink-900);
}

.hist-list li {
  font-size: var(--txt);
  line-height: 1.7;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.hist-list li + li {
  margin-top: 1.2rem;
}

/* 주요 성과는 브랜드 색으로 강조 */
.hist-list li.is-key {
  font-weight: 700;
  color: var(--brand);
}

@media (max-width:1024px) {
  .hist-grid {
    grid-template-columns: 26rem 1fr;
    gap: 4rem;
  }

  .hist-year {
    font-size: 6.4rem;
  }
}

@media (max-width:768px) {
  .hist-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 4rem;
    padding-inline: 0.4rem;
    scrollbar-width: none;
  }

  .hist-tabs::-webkit-scrollbar {
    display: none;
  }

  .hist-tab {
    flex-shrink: 0;
    padding: 0.9rem 1.8rem;
  }

  /* 모바일은 좌측 고정 연도 대신 블록마다 연도를 얹는다 */
  .hist-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hist-sticky {
    display: none;
  }

  .hist-block__year {
    display: block;
    position: sticky;
    top: calc(var(--hd_h) + 5.4rem);
    z-index: 10;
    margin-bottom: 1rem;
    padding: 1rem 0;
    background: #fff;
    font-family: var(--font-en);
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand);
  }

  .hist-block + .hist-block {
    margin-top: 5rem;
  }

  .hist-month {
    grid-template-columns: 5rem 1fr;
    gap: 1.6rem;
    padding: 2rem 0;
  }

  .hist-month__no {
    font-size: 2rem;
  }
}

/* ---------------------------------------------------------
   [health_01.php] 건강증진센터  —  .hc-*
   · 대표 비주얼 + 검진 예약 바로가기(외부) + 온라인 문진표 QR + 이용 안내 표.
   --------------------------------------------------------- */
.hc-hero {
  margin-top: 5rem;
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

.hc-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 검진 예약 바로가기 ---- */
.hc-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}

.hc-link {
  display: flex;
  flex-direction: column;
  padding: 3.4rem 3rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  transition: 0.2s;
}

.hc-link:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

.hc-link__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.4rem;
  height: 5.4rem;
  margin-bottom: 2.2rem;
  border-radius: var(--sub-radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
}

.hc-link__ico svg {
  width: 2.6rem;
  height: 2.6rem;
}

.hc-link__tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.hc-link__tit svg {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  color: var(--color-ink-400);
  transition: color 0.2s, transform 0.2s;
}

.hc-link:hover .hc-link__tit svg {
  color: var(--brand);
  transform: translate(0.3rem, -0.3rem);
}

.hc-link__txt {
  margin-top: 1.2rem;
  font-size: var(--smTxt);
  line-height: 1.7;
  color: var(--color-ink-500);
  word-break: keep-all;
}

/* ---- 온라인 문진표 QR ---- */
.hc-qr {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem;
  border: 1px solid var(--brand-tint-strong);
  border-radius: var(--sub-radius);
  background: linear-gradient(120deg, var(--color-primary-50), #fff 60%);
}

.hc-qr__code {
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-sm);
}

.hc-qr__code img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.hc-qr__tit {
  font-size: var(--main_ti1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink-900);
}

.hc-qr__txt {
  margin-top: 1.4rem;
  font-size: var(--txt);
  line-height: 1.75;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.hc-qr__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.2rem;
}

/* ---- 이용 안내 표 ---- */
.hc-info + .hc-info {
  margin-top: 6rem;
}

.hc-info .sub-table th {
  width: 22%;
  background: var(--sub-tint);
  text-align: center;
}

.hc-info .sub-table td {
  text-align: left;
}

.hc-tel {
  font-family: var(--font-en);
  font-size: var(--bigTxt);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--brand);
}

@media (max-width:1024px) {
  .hc-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width:768px) {
  .hc-hero {
    margin-top: 3rem;
  }

  .hc-link {
    padding: 2.4rem;
  }

  .hc-qr {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding: 2.4rem;
    text-align: center;
  }

  .hc-qr__code {
    max-width: 18rem;
    margin-inline: auto;
  }

  .hc-qr__tags {
    justify-content: center;
  }

  .hc-info + .hc-info {
    margin-top: 4rem;
  }

  .hc-info .sub-table th {
    width: 30%;
  }
}

/* ---------------------------------------------------------
   [health_02 · 03 · 04] 검진 · 직업환경의학 공통 조각  —  .hc-* 추가분
   --------------------------------------------------------- */

/* ---- 검진 절차 (예약 → 내원검진 → …) ---- */
.hc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

.hc-step {
  position: relative;
  padding: 3rem 2rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-sm);
}

.hc-step + .hc-step::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 0.8rem solid var(--color-line-300);
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
}

.hc-step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand-tint);
  color: var(--brand);
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 800;
}

.hc-step__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.hc-step__txt {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-ink-500);
  word-break: keep-all;
}

/* ---- 프로그램 탭 ---- */
.hc-tabs {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 3rem;
}

@media (max-width:560px) {
  .hc-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 암검진 카드 ---- */
.hc-cancer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.hc-cancer__item {
  padding: 3.4rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.hc-cancer__tit {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.hc-cancer__tit span {
  padding: 0.4rem 1.2rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand-tint);
  color: var(--color-primary-800);
  font-size: 1.2rem;
  font-weight: 700;
}

.hc-cancer__flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sub-line);
}

.hc-cancer__flow em {
  padding: 0.7rem 1.4rem;
  border-radius: var(--sub-radius-sm);
  background: var(--sub-tint);
  font-size: 1.3rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-ink-700);
  white-space: nowrap;
}

.hc-cancer__flow i {
  color: var(--color-ink-400);
  font-style: normal;
}

@media (max-width:1024px) {
  .hc-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .hc-step + .hc-step::before {
    display: none;
  }

  .hc-cancer {
    grid-template-columns: 1fr;
  }
}

@media (max-width:768px) {
  .hc-step {
    padding: 2.2rem 1.2rem;
  }

  .hc-cancer__item {
    padding: 2.4rem;
  }
}

/* ---------------------------------------------------------
   [center_01.php] 심혈관센터  —  .cvc-*
   · 히어로 + 의료진(관리자 DB) + 센터 특징 2 + 의료인프라 5 + 첨단 의료장비 3.
   · 의료진 카드는 style.css 의 .doctor-card 를 그대로 쓴다.
   --------------------------------------------------------- */
.cvc-hero {
  margin-top: 5rem;
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

.cvc-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 의료진 ---- */
.cvc-docs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.cvc-docs__dept {
  display: inline-block;
  margin-bottom: 2.4rem;
  padding: 0.6rem 1.6rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand-tint);
  color: var(--color-primary-800);
  font-size: var(--smTxt);
  font-weight: 700;
}

/* ---- 센터 특징 · 의료인프라 카드 ---- */
.cvc-cards {
  display: grid;
  gap: 2.4rem;
}

.cvc-cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cvc-cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.cvc-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.cvc-card__img {
  aspect-ratio: 16 / 10;
  background: var(--sub-tint);
}

.cvc-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cvc-card__body {
  padding: 3rem;
}

.cvc-card__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.cvc-card__txt {
  margin-top: 1.4rem;
  font-size: var(--smTxt);
  line-height: 1.8;
  color: var(--color-ink-500);
  word-break: keep-all;
}

/* ---- 첨단 의료장비 ---- */
.cvc-eq + .cvc-eq {
  margin-top: 2rem;
}

.cvc-eq {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 3rem;
  padding: 3.4rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.cvc-eq__no {
  font-family: var(--font-en);
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-tint-strong);
}

.cvc-eq__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.cvc-eq__sub {
  margin-top: 0.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brand);
}

.cvc-eq__txt {
  margin-top: 1.6rem;
  font-size: var(--smTxt);
  line-height: 1.8;
  color: var(--color-ink-500);
  word-break: keep-all;
}

@media (max-width:1024px) {
  .cvc-cards--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:768px) {
  .cvc-hero {
    margin-top: 3rem;
  }

  .cvc-docs,
  .cvc-cards--2,
  .cvc-cards--3 {
    grid-template-columns: 1fr;
  }

  .cvc-card__body {
    padding: 2.4rem;
  }

  .cvc-eq {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 2.4rem;
  }

  .cvc-eq__no {
    font-size: 3.2rem;
  }
}

/* ---------------------------------------------------------
   [center_02.php] 내시경센터  —  .cvc-* 재사용 + .edc-* 추가분
   · 히어로 · 카드 · 장비 블록은 center_01 의 .cvc-* 를 그대로 쓴다.
   · 여기서는 "가로형 이미지 + 설명" 블록과 장비 소개만 따로 정의한다.
   --------------------------------------------------------- */
.edc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.edc-split__img {
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

.edc-split__img img {
  display: block;
  width: 100%;
  height: auto;
}

.edc-split__tit {
  font-size: var(--main_ti1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.edc-split__txt {
  margin-top: 2rem;
  font-size: var(--txt);
  line-height: 1.85;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.edc-split__txt b {
  font-weight: 700;
  color: var(--color-primary-800);
}

/* 장점 요약 */
.edc-points {
  display: grid;
  gap: 1.2rem;
  margin-top: 2.8rem;
}

.edc-point {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.8rem 2rem;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-sm);
  background: #fff;
}

.edc-point__label {
  flex-shrink: 0;
  padding: 0.4rem 1.2rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand-tint);
  color: var(--color-primary-800);
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
}

.edc-point__txt {
  font-size: var(--smTxt);
  line-height: 1.7;
  color: var(--color-ink-700);
  word-break: keep-all;
}

/* ---- 내시경 장비 ---- */
.edc-device {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding: 4rem;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  background: linear-gradient(120deg, var(--color-primary-50), #fff 60%);
}

.edc-device__img img {
  display: block;
  width: 100%;
  height: auto;
}

.edc-device__model {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.6rem 1.6rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

@media (max-width:768px) {
  .edc-split,
  .edc-device {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .edc-device {
    padding: 2.4rem;
  }

  .edc-point {
    padding: 1.6rem;
    gap: 1rem;
  }
}

/* ---------------------------------------------------------
   [center_03.php] 복강경센터  —  .lap-*
   · 히어로 · 의료진 · 좌우 분할 블록은 .cvc-* / .edc-* 를 그대로 쓴다.
   · 여기서는 수술의 장점(번호 카드)과 수술 분야 목록만 정의한다.
   --------------------------------------------------------- */
.lap-merits {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.8rem;
}

.lap-merit {
  padding: 3rem 2rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.lap-merit__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  margin-bottom: 1.8rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 800;
}

.lap-merit__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink-900);
  word-break: keep-all;
}

.lap-merit__txt {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--color-ink-500);
  word-break: keep-all;
}

/* ---- 수술 분야 ---- */
.lap-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.lap-field {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 2.2rem 2.4rem;
  background: #fff;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius-sm);
  font-size: var(--txt);
  line-height: 1.6;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.lap-field::before {
  content: "";
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006EB8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 7'/%3E%3C/svg%3E") center / 1.2rem no-repeat;
}

@media (max-width:1024px) {
  .lap-merits {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:768px) {
  .lap-merits {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .lap-merit {
    padding: 2.2rem 1.2rem;
  }

  .lap-merit__no {
    width: 3.8rem;
    height: 3.8rem;
    margin-bottom: 1.2rem;
  }

  .lap-fields {
    grid-template-columns: 1fr;
  }

  .lap-field {
    padding: 1.8rem;
    font-size: var(--smTxt);
  }
}

/* ---------------------------------------------------------
   [hospital_01.php] 층별안내  —  .floor-*
   · 층별 배치 목록(표). 층 사진 슬라이더는 사진 자료 준비 후 별도 작업.
   --------------------------------------------------------- */
.floor-table th[scope="row"] {
  vertical-align: middle;
}

.floor-badge {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand);
  color: #fff;
  font-size: var(--smTxt);
  font-weight: 700;
  white-space: nowrap;
}

.floor-badge--annex {
  background: var(--color-primary-800);
}

.floor-badge--base {
  background: var(--color-ink-500);
}

.floor-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.floor-item {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--sub-radius-sm);
  background: var(--sub-tint);
  border: 1px solid var(--sub-line);
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-ink-700);
  white-space: nowrap;
}

/* 센터 · 응급 등 주요 시설 강조 */
.floor-item--key {
  background: var(--brand-tint);
  border-color: var(--brand-tint-strong);
  color: var(--color-primary-800);
  font-weight: 700;
}

@media (max-width:768px) {
  .floor-badge {
    padding: 0.5rem 1.2rem;
    font-size: 1.3rem;
  }

  .floor-item {
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
  }
}

/* ---------------------------------------------------------
   [hospital_01.php] 층별 사진 슬라이더  —  .fs-*
   · 마크업 : sub_page/floor/slider.php  ·  초기화 : sub_page/js/floor-slider.js
   · Swiper 11 기본 CSS 위에 얹는다(레이아웃은 Swiper 가 잡고, 여기서는 외형만).
   --------------------------------------------------------- */
.fs {
  /* 슬라이더 폭 — 원본 사진이 915px 이라, 늘려서 흐려지지 않도록 그 크기에 맞춘다.
     ※ 더 큰 사진(1280px)을 확보하면 아래 --fs-width 값만 1280px 으로 바꾸면
       탭 · 큰 사진 · 썸네일이 한꺼번에 넓어진다. (2026-08-31)
     ※ 여기만 rem 이 아니라 px 를 쓴다. rem 은 화면 폭에 따라 8~10px 로 줄어들어
       (assets/css/tokens.css) 사진 실제 크기와 어긋나기 때문이다.
       화면이 좁아지면 max-width 특성상 알아서 줄어드므로 반응형에는 문제 없다. */
  --fs-width: 915px;

  max-width: var(--fs-width);
  margin: 5rem auto 0;   /* 본문(1280px)보다 좁으므로 가운데 정렬 */
}

/* 칸 수는 sub_page/floor/photos.php 의 층 개수와 맞춘다 (현재 지하1층 + 1~7층 = 7칸) */
.fs-tabs {
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 3rem;
}

@media (max-width:1024px) {
  .fs-tabs {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width:560px) {
  .fs-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fs-panel {
  display: none;
}

.fs-panel.is-active {
  display: block;
  animation: fade 0.35s ease;
}

/* ---- 사진 위 캡션 ---- */
/* 배지와 설명글은 글자 크기가 달라 baseline 으로 맞추면 어긋나 보인다. 가운데로 맞춘다. */
.fs-caption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--sub-line);
}

.fs-caption__floor {
  padding: 0.5rem 1.4rem;
  border-radius: var(--sub-radius-pill);
  background: var(--brand);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
}

.fs-caption__text {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
  word-break: keep-all;
}

/* ---- 큰 사진 ---- */
.fs-main {
  position: relative;
  border-radius: var(--sub-radius);
  overflow: hidden;
  background: var(--sub-tint);
}

/* 원본 사진 비율(915 x 597) 그대로. 잘리거나 늘어나는 곳 없이 실제 크기로 보인다.
   ※ 더 큰 사진으로 교체하면 이 비율도 새 사진 크기에 맞춰 바꿔 준다. */
.fs-main__swiper .swiper-slide {
  aspect-ratio: 915 / 597;
  background: var(--sub-tint);
}

.fs-main__swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 이전 · 다음 버튼 */
.fs-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.4rem 1.6rem rgba(0, 40, 72, 0.18);
  color: var(--color-ink-900);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.fs-nav:hover:not(:disabled) {
  background: var(--brand);
  color: #fff;
}

.fs-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.fs-nav svg {
  width: 2.2rem;
  height: 2.2rem;
}

.fs-nav--prev {
  left: 2rem;
}

.fs-nav--next {
  right: 2rem;
}

/* 현재 장수 */
.fs-count {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  z-index: 5;
  padding: 0.7rem 1.6rem;
  border-radius: var(--sub-radius-pill);
  background: rgba(0, 30, 55, 0.62);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.fs-count b {
  color: #fff;
  font-weight: 800;
}

/* ---- 썸네일 ---- */
.fs-thumbs {
  margin-top: 1.2rem;
}

.fs-thumbs .swiper-slide {
  aspect-ratio: 3 / 2;
  border-radius: var(--sub-radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}

.fs-thumbs .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-thumbs .swiper-slide:hover {
  opacity: 0.85;
}

.fs-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--brand);
}

/* ---- 사진 준비 중 ---- */
.fs-empty {
  padding: 9rem 2rem;
  text-align: center;
  background: var(--sub-tint);
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  font-size: var(--txt);
  color: var(--color-ink-400);
}

.fs-empty b {
  color: var(--color-ink-700);
  font-weight: 700;
}

/* ---- Swiper 미로딩 시 (사진만 세로로 노출) ---- */
.fs--no-swiper .fs-thumbs,
.fs--no-swiper .fs-nav,
.fs--no-swiper .fs-count {
  display: none;
}

@media (max-width:768px) {
  .fs {
    margin-top: 3.5rem;
  }

  .fs-caption__text {
    font-size: var(--txt);
  }

  .fs-nav {
    width: 4rem;
    height: 4rem;
  }

  .fs-nav svg {
    width: 1.8rem;
    height: 1.8rem;
  }

  .fs-nav--prev {
    left: 1rem;
  }

  .fs-nav--next {
    right: 1rem;
  }

  .fs-count {
    right: 1rem;
    bottom: 1rem;
    padding: 0.5rem 1.2rem;
    font-size: 1.3rem;
  }

  .fs-empty {
    padding: 6rem 2rem;
  }
}

/* =========================================================
   [page.php] 정책 · 안내 페이지  —  .pol-*
   · 개인정보처리방침 / 이용안내 / 환자의 권리와 의무 / 비급여진료비 안내
   · 본문은 [관리자 > 콘텐츠 > 페이지] 에서 에디터로 작성한 HTML 이다.
     클래스를 붙일 수 없으므로 .pol-body 안의 태그를 직접 꾸민다.
   ========================================================= */
.pol-body {
  /* 글줄이 너무 길면 읽기 힘들다. 본문 폭(1400px)보다 좁게 잡고 가운데 배치. */
  max-width: 100rem;
  margin: 0 auto;
  font-size: var(--txt);
  line-height: 1.85;
  color: var(--color-ink-700);
  word-break: keep-all;
}

.pol-body> :first-child {
  margin-top: 0;
}

.pol-body> :last-child {
  margin-bottom: 0;
}

.pol-body p {
  margin: 0 0 1.6rem;
}

/* 제목 — 에디터에서 어떤 단계를 고르든 크기 차이가 나도록 단계별로 정리 */
.pol-body h1,
.pol-body h2 {
  margin: 5rem 0 2rem;
  padding-left: 1.6rem;
  border-left: 0.5rem solid var(--point);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink-900);
  letter-spacing: -0.02em;
}

.pol-body h3 {
  margin: 4rem 0 1.6rem;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-ink-900);
  letter-spacing: -0.02em;
}

.pol-body h4,
.pol-body h5,
.pol-body h6 {
  margin: 3rem 0 1.2rem;
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--brand);
}

/* 목록 — 에디터 기본 불릿/번호를 그대로 쓰되 여백만 맞춘다 */
.pol-body ul,
.pol-body ol {
  margin: 0 0 1.6rem;
  padding-left: 2.2rem;
  list-style: revert;
}

.pol-body li {
  margin-bottom: 0.6rem;
  line-height: 1.8;
}

.pol-body a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.pol-body strong,
.pol-body b {
  font-weight: 700;
  color: var(--color-ink-900);
}

.pol-body hr {
  margin: 4rem 0;
  border: 0;
  border-top: 1px solid var(--sub-line);
}

.pol-body blockquote {
  margin: 2.4rem 0;
  padding: 2rem 2.4rem;
  background: var(--sub-tint);
  border-left: 0.4rem solid var(--brand);
  border-radius: 0 var(--sub-radius-sm) var(--sub-radius-sm) 0;
}

.pol-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sub-radius-sm);
}

/* 표 — 붙여넣은 표도 사이트 표(.sub-table)와 같은 모양이 되도록 */
.pol-body table {
  width: 100%;
  margin: 2.4rem 0;
  border-top: 2px solid var(--brand);
  border-collapse: collapse;
  font-size: var(--smTxt);
}

.pol-body th,
.pol-body td {
  padding: 1.6rem 1.4rem;
  border-bottom: 1px solid var(--sub-line);
  border-left: 1px solid var(--sub-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.pol-body th:first-child,
.pol-body td:first-child {
  border-left: 0;
}

.pol-body thead th {
  background: var(--sub-tint-strong);
  color: var(--color-ink-900);
  font-weight: 700;
  text-align: center;
}

.pol-body tbody th {
  background: var(--sub-tint);
  color: var(--color-ink-700);
  font-weight: 700;
}

/* 표가 화면보다 넓으면 페이지 대신 표만 가로 스크롤 */
@media (max-width:768px) {
  .pol-body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ---- 내용 없음 · 잘못된 주소 안내 ---- */
.pol-empty {
  padding: 8rem 2rem;
  text-align: center;
  background: var(--sub-tint);
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
}

.pol-empty p {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.pol-empty__sub {
  margin-top: 1rem;
  font-size: var(--smTxt);
  font-weight: 500 !important;
  color: var(--color-ink-500) !important;
}

.pol-empty__sub a {
  color: var(--brand);
  font-weight: 700;
}

.pol-empty .btn {
  margin-top: 2.8rem;
}

@media (max-width:768px) {
  .pol-body h1,
  .pol-body h2 {
    font-size: 2.4rem;
  }

  .pol-body h3 {
    font-size: 2rem;
  }

  .pol-empty {
    padding: 5rem 1.6rem;
  }
}

/* =========================================================
   [doctor_member_month.php] 의료진 월간 진료일정  —  .dm-*
   · 마크업은 sub_doctor/js/doctor-month.js 가 그린다.
   · 의료진 한 명 = 한 줄(.dm-item). 위쪽 카드(가로형) + 아래 그 달 진료표.
   · 형제 페이지 doctor_member.php 는 카드 2단 그리드 + 모달이라 스타일이 다르다.
   ========================================================= */
.dm-count {
  margin-bottom: 2.4rem;
  font-size: var(--smTxt);
  color: var(--color-ink-500);
}

.dm-count b {
  color: var(--brand);
  font-weight: 700;
}

.dm-empty {
  padding: 8rem 2rem;
  text-align: center;
  background: var(--sub-tint);
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  color: var(--color-ink-500);
}

/* ---- 표기 안내 (안내문 + 범례) ---- */
.dm-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 3rem 0 2.4rem;
}

.dm-guide__note {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.4rem;
  color: var(--color-ink-500);
  word-break: keep-all;
}

.dm-guide__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--point);
}

.dm-legend {
  display: flex;
  gap: 1.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-ink-700);
}

.dm-legend li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---- 상태 점 (진료 · 수술 · 휴진) ---- */
.dm-dot {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
}

/* 진료 — 로고 주황 */
.dm-dot--open {
  background: var(--point);
}

/* 수술 — 로고 파랑. 점 모양도 달리해 색만으로 구분하지 않게 한다 */
.dm-dot--proc {
  border-radius: 0.2rem;
  background: var(--brand);
}

/* 휴진 — 연한 회색. 진료 · 수술보다 눈에 덜 띄어야 한다 */
.dm-dot--closed {
  background: var(--color-line-200);
  border: 1px solid var(--color-line-300);
}

/* ---- 의료진 한 줄 ---- */
.dm-item {
  padding: 2.6rem;
  border: 1px solid var(--sub-line);
  border-radius: var(--sub-radius);
  background: #fff;
}

.dm-item+.dm-item {
  margin-top: 2rem;
}

.dm-doc {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.dm-doc__photo {
  flex: 0 0 8.4rem;
  width: 8.4rem;
  height: 10.4rem;
  overflow: hidden;
  border-radius: var(--sub-radius-sm);
  background: var(--sub-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dm-doc__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.dm-doc__placeholder {
  font-size: 1.2rem;
  color: var(--color-ink-500);
}

.dm-doc__dept {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand);
}

.dm-doc__name {
  margin-top: 0.6rem;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-ink-900);
  letter-spacing: -0.02em;
}

.dm-doc__name span {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-ink-500);
}

.dm-doc__spec {
  margin-top: 0.6rem;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-ink-700);
  word-break: keep-all;
}

/* ---- 진료표 ---- */
.dm-sched {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--sub-line);
}

.dm-sched__head {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.4rem;
}

.dm-sched__tit {
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-900);
}

.dm-months {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.dm-months__bar {
  color: var(--sub-line-strong);
}

.dm-month {
  padding: 0.4rem 0.6rem;
  font-size: var(--bigTxt);
  font-weight: 700;
  color: var(--color-ink-400, #9aa3b0);
  transition: 0.2s;
}

.dm-month:hover {
  color: var(--color-ink-700);
}

.dm-month.is-active {
  color: var(--brand);
}

.dm-sched__empty {
  padding: 3rem;
  text-align: center;
  font-size: var(--smTxt);
  color: var(--color-ink-500);
  background: var(--sub-tint);
  border-radius: var(--sub-radius-sm);
}

.dm-table {
  display: none;
  position: relative;
}

.dm-table.is-active {
  display: block;
}

/* 날짜가 많아 가로로 넘칠 때만 스크롤한다 */
.dm-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.dm-cal {
  width: 100%;
  min-width: 88rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.dm-cal th,
.dm-cal td {
  border: 1px solid var(--sub-line);
  text-align: center;
}

/* 가로로 스크롤해도 오전 · 오후 라벨은 왼쪽에 붙어 있게 한다 */
.dm-cal__lead {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 6.4rem;
  min-width: 6.4rem;
  background: var(--brand);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 1rem 0;
}

.dm-cal__day {
  padding: 0.8rem 0;
  background: var(--sub-tint);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink-900);
  line-height: 1.25;
}

.dm-cal__day b {
  display: block;
  font-size: 1.4rem;
}

.dm-cal__day span {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-ink-500);
}

/* 주말 — 토요일 파랑 · 일요일 빨강 */
.dm-cal__day.is-sat b,
.dm-cal__day.is-sat span {
  color: var(--brand);
}

.dm-cal__day.is-sun b,
.dm-cal__day.is-sun span {
  color: #e2231a;
}

.dm-cal__cell {
  height: 4.4rem;
  background: #fff;
}

/* 일정이 없는 날 — 빈칸 대신 흐린 '-' */
.dm-none {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-line-300);
}

.dm-cal__cell.is-sat,
.dm-cal__cell.is-sun {
  background: var(--sub-tint);
}

/* 좌우 이동 버튼 — 표가 넘칠 때만 나온다(.has-scroll 은 doctor-month.js 가 붙인다).
   표가 다 보이는 폭에서는 버튼이 오전/오후 칸을 가리므로 숨긴다. */
.dm-nav {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 1px solid var(--sub-line-strong);
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand);
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: 0.2s;
}

/* 넘칠 때만 보인다 — 위 .dm-nav 의 display:none 을 여기서 푼다 */
.dm-table.has-scroll .dm-nav {
  display: flex;
}

.dm-nav:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.dm-nav svg {
  width: 1.8rem;
  height: 1.8rem;
}

.dm-nav--prev {
  left: -1.2rem;
}

.dm-nav--next {
  right: -1.2rem;
}

@media (max-width:900px) {
  .dm-item {
    padding: 2rem 1.6rem;
  }

  .dm-doc__photo {
    flex-basis: 6.4rem;
    width: 6.4rem;
    height: 8rem;
  }

  .dm-doc__name {
    font-size: 1.9rem;
  }

  .dm-sched__head {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .dm-nav--prev {
    left: 0.4rem;
  }

  .dm-nav--next {
    right: 0.4rem;
  }
}