/* =====================================================
   sub3.css — 진료과목 (sub3.html) 페이지 전용. 로드 순서: common.css → sub_common.css → sub3.css
   공통 헤더 / 푸터 / 퀵메뉴는 common.css, 서브 비주얼 · 공통 섹션 제목은 sub_common.css. 이 파일은 .page-subject 본문만.
   모션으로 숨기지 않습니다. JS 가 없어도 내용이 보입니다.

   크기 기준 (시안 1920px 화면 실측 환산)
   - 사진 패널 1644 × 638 (우하단 100px). 패널 안쪽 글자 · 원은 패널 폭의 비율(cqw: 패널 1644px 에서 1cqw = 16.44px)로 줄어듦
   - 인접 패널 사이 빈 간격 226px, 과목 대제목 ≈ 132px, 강조 문구 46px, 설명 20px / 행간 1.8, 원 지름 184px · 원 사이 56px · 원 글자 22px
   - 준비사항 목록 폭 1400px, 카드 높이 405px, 카드 제목 36px, 카드 설명 18px
   - 1000px 이하(태블릿 · 모바일)는 아래 "반응형"에서 의도적으로 따로 조정
   ===================================================== */
.page-subject {
  --subj-ivory: #f8f3ed; /* 시안 실측: 패널 사이 / 준비사항 배경 */
  --subj-intro-bg: #eeebe6; /* 시안 실측: 첫 소개 영역 (첫 패널 가운데까지 이어짐) */
  --subj-ink: #1e3a52;
  --subj-gold: #d6b992;
  --subj-lead: #f0ddc0;
  --subj-panel-w: min(1644px, calc(100vw - 48px)); /* 사진 패널 폭 (패널 간격 · 과목 제목 크기 계산용) */
  /* sub_common.css 의 서브 비주얼 / 공통 제목 변수 */
  --sub-hero-bg: #3a332c;

  --sub-hero-pos: center 42%;
  --sub-heading-accent: var(--subj-gold);
  --sub-heading-desc: #5e584f;
}
.page-subject main {
  background: var(--subj-ivory);
}

/* 서브 비주얼 / 브레드크럼은 sub_common.css */

/* ---------- 소개 ---------- */
/* 영문 라벨 → 한글 제목 → 설명 → 첫 패널 간격 (1920px: 라벨 중심이 비주얼 아래 166px, 제목 46px / 줄 63px) */
.subj-intro {
  padding: clamp(84px, 7.9vw, 152px) 24px clamp(100px, 12.6vw, 242px);
  background: var(--subj-intro-bg);
  color: var(--subj-ink);
  text-align: center;
}
.subj-intro .sub-section-heading__eyebrow {
  margin-bottom: 25px;
}
.subj-intro .sub-section-heading__title {
  max-width: 16em;
  margin-inline: auto;
  font-size: clamp(28px, 2.4vw, 46px);
  line-height: 1.37;
}
.subj-intro .sub-section-heading__description {
  margin-top: clamp(20px, 1.7vw, 32px);
}

/* ---------- 진료과목 패널 ---------- */
/* 이전 사진 하단 → 다음 사진 상단 = margin-top 한 값 (padding 합산 없음). 1920px 에서 226px */
.subj-dept {
  position: relative;
  margin-top: calc(var(--subj-panel-w) * 0.1375);
  overflow: visible;
  background: var(--subj-ivory);
}
/* 첫 패널: 위쪽 절반은 소개 영역 색, 아래쪽 절반은 본문 색 (시안) */
.subj-intro + .subj-dept {
  margin-top: 0;
  background: linear-gradient(to bottom, var(--subj-intro-bg) 50%, var(--subj-ivory) 50%);
}
/* 제목 위치용 wrapper: 사진 상단 경계에 세로 중앙이 걸침. 모션은 안쪽 h2 만 움직임 (transform 충돌 없음) */
.subj-dept__title-wrap {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 16px);
  text-align: center;
  pointer-events: none;
}
.subj-dept__title {
  margin: 0;
  font-size: clamp(44px, calc(var(--subj-panel-w) * 0.08), 140px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: #d7bc90;
}
/* overflow:hidden 은 사진 + 딤드만 자름. 제목 · 문구는 크기가 커져도 패널 밖 제목이 잘리지 않음 */
.subj-media {
  position: relative;
  container-type: inline-size; /* 안쪽 글자 · 원 크기를 패널 폭 비율(cqw)로 */
  width: min(1644px, calc(100% - 48px));
  margin-inline: auto;
  overflow: hidden;
  border-radius: 0 0 clamp(40px, calc(var(--subj-panel-w) * 0.0608), 100px) 0;
  background: #243240;
  --subj-chip: clamp(104px, 11.19cqw, 184px);
  --subj-chip-gap: clamp(16px, 3.4cqw, 56px);
}
.subj-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--subj-pos, 50% 45%);
  transform-origin: center center;
}
.subj-dim {
  position: absolute;
  inset: 0;
  background: rgba(16, 26, 36, 0.48);
}
/* 패널 높이: 폭 × 638 / 1644 (내용이 더 길면 늘어남). 묶음은 위에서부터 (제목 아래 문구 → 설명), 원은 아래쪽 */
.subj-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1644 / 638;
  padding: clamp(64px, 8.5cqw, 140px) clamp(16px, 2cqw, 32px) clamp(40px, 6.2cqw, 102px);
  text-align: center;
}
.subj-lead {
  max-width: 100%;
  margin: 0;
  font-size: clamp(20px, 2.8cqw, 50px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--subj-lead);
  word-break: keep-all;
}
.subj-description {
  max-width: 100%;
  margin: clamp(16px, 2.2cqw, 36px) 0 0;
}
.subj-description p {
  margin: 0;
  font-size: clamp(14px, 1.1cqw, 18px);
  line-height: 1.9;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.9);
  word-break: keep-all;
}
/* 원: 설명 유무와 상관없이 패널 아래쪽에 고정 (margin-top:auto), 문구와 닿지 않게 padding-top 으로 최소 간격 */
.subj-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--subj-chip-gap);
  row-gap: 16px;
  width: 100%;
  margin: auto 0 0;
  padding: clamp(24px, 3.1cqw, 51px) 0 0;
  list-style: none;
}
.subj-chips li {
  position: relative;
}
/* 원 사이 작은 점: 같은 줄의 앞 항목이 있을 때만 (sub3.js 가 .is-follow). 줄 끝에 남지 않음 */
.subj-chips li.is-follow::before {
  content: "";
  position: absolute;
  left: calc(var(--subj-chip-gap) / -2);
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -50%);
}
.subj-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--subj-chip);
  height: var(--subj-chip);
  padding: 12px;
  border-radius: 50%;
  color: #fff;
  font-size: clamp(13px, 1.34cqw, 26px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
}
/* 시안의 점선 원: 약 30개의 점 (점 4px) */
.subj-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -1.3deg, rgba(255, 255, 255, 0.78) 0 2.6deg, transparent 2.6deg 12deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
  background:#fff;
  pointer-events: none;
}

/* ---------- 내원 전 준비사항 ---------- */
/* 1920px: 이전 패널 하단 → 라벨 중심 173px, 카드 하단 → 푸터 200px */
.subj-prep {
  padding: clamp(80px, 8.4vw, 161px) 24px clamp(100px, 10.4vw, 200px);
  background: var(--subj-ivory);
  color: var(--subj-ink);
  text-align: center;
}
.subj-prep .sub-section-heading__title {
  font-size: clamp(28px, 2.4vw, 46px);
}
.subj-prep .sub-section-heading__description {
  margin-top: clamp(24px, 3.1vw, 60px);
}
/* 목록 폭 1400 · 열 비율 1 : 1.1 : 1 (가운데 삼각형이 조금 넓음) · 사이 간격 60 */
.subj-prep__list {
  container-type: inline-size; /* 카드 안쪽 크기를 목록 폭 비율(cqw)로 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(16px, 3.125vw, 60px);
  width: min(1400px, 100%);
  margin: clamp(40px, 3.4vw, 66px) auto 0;
  padding: 0;
  list-style: none;
}
.subj-prep__item {
  --prep-inset: clamp(20px, 3.14cqw, 44px); /* 바깥 테두리 두께 = 안쪽 밝은 면의 여백 */

  position: relative;
  display: flex;
  min-height: clamp(260px, 28.9cqw, 405px);
  padding: 0 clamp(24px, 3.9cqw, 40px);
}
.subj-prep__shape,
.subj-prep__face {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.subj-prep__shape {
  background: #f1e8dd;
}
.subj-prep__face {
  inset: var(--prep-inset);
  background: #faf5ee;
}
/* 왼쪽: 좌하단만 둥근 사각형 / 오른쪽: 우하단만 크게 둥근 사각형 (나머지 모서리는 직각) */
.subj-prep__item--note .subj-prep__shape {
  border-radius: 0 0 0 clamp(24px, 4.3cqw, 60px);
}
.subj-prep__item--note .subj-prep__face {
  border-radius: 0 0 0 clamp(8px, 1.15cqw, 16px);
}
.subj-prep__item--check .subj-prep__shape {
  border-radius: 0 0 clamp(60px, 12.1cqw, 170px) 0;
}
.subj-prep__item--check .subj-prep__face {
  border-radius: 0 0 clamp(40px, 9cqw, 126px) 0;
}
/* 가운데: 삼각형. 안쪽 면도 같은 두께의 삼각형 (밑변 454 × 높이 405 기준 비율). 글자는 도형과 별개라 잘리지 않음 */
.subj-prep__item--data .subj-prep__shape {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.subj-prep__item--data .subj-prep__face {
  inset: 0;
  clip-path: polygon(50% 23.2%, 82.7% 88.6%, 17.3% 88.6%);
}
.subj-prep__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* 카드 제목: 두 줄 (HTML 의 <br> 위치에서 줄바꿈) */
.subj-prep__name {
  margin: 0;
  font-size: clamp(22px, 2.57cqw, 40px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--subj-ink);
  word-break: keep-all;
}
.subj-prep__description {
  max-width: 100%;
  margin: clamp(12px, 1.6cqw, 22px) 0 0;
}
.subj-prep__description p {
  margin: 0;
  font-size: clamp(14px, 1.29cqw, 18px);
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #2a2622;
  word-break: keep-all;
}

/* ---------- 반응형 ---------- */
/* 1001 ~ 1740px(태블릿 가로 · 작은 노트북): 패널은 PC 와 같은 비율(1644:638)로 폭에 맞춰 줄어들고 안쪽 글자 · 원도 같은 비율.
   예전의 min-height:520px 은 이 구간에서 패널 비율을 세로로 늘렸으므로 제거 (비율 유지) */
@media (max-width: 1000px) {
  .page-subject {
    --sub-hero-pos: center 38%;
    --subj-panel-w: calc(100vw - 40px);
  }
  /* 예전: 본문이 모바일 퀵메뉴(우측 고정) 폭만큼 왼쪽으로 밀리는 비대칭 여백(우 72 / 좌 20, 우 68 / 좌 16).
     좌우 대칭 20px 로 맞추고, 퀵메뉴는 오른쪽 아래에 떠 있는 아이콘 묶음이라 본문 전체를 밀지 않음 */
  .subj-intro,
  .subj-prep {
    padding-right: 20px;
    padding-left: 20px;
  }
  .subj-media {
    width: calc(100% - 40px);
  }
  /* 모바일 · 태블릿 세로: 높이는 내용에 맞춤 (고정 비율 없음) */
  .subj-body {
    aspect-ratio: auto;
    padding-bottom: 40px;
  }
  .subj-chips {
    margin-top: 0;
    padding-top: 28px;
  }
  .subj-prep__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    width: min(420px, 100%);
  }
  .subj-prep__item {
    min-height: 340px;
  }
}
@media (max-width: 580px) {
  .subj-prep__item {
    min-height: 320px;
  }
}
@media (max-width: 480px) {
  .subj-media {
    --subj-chip: 92px; /* 390px 폭에서 원 3개가 한 줄에 들어가도록 */
  }
}
@media (prefers-reduced-motion: reduce) {
  .subj-img {
    transform: none;
  }
}