/* =====================================================
   sub6.css — 재활·한방클리닉 (sub6.html) 페이지 전용
   로드 순서: common.css → sub_common.css → sub6.css
   공통 헤더 / 푸터 / 퀵메뉴는 common.css, 서브 비주얼(.sub-hero) · 공통 제목(.sub-section-heading)은 sub_common.css.
   이 파일은 .page-rehab 범위의 본문만 다룹니다. 모션으로 숨기지 않습니다 (JS 가 없어도 모든 내용이 보임).

   기준: 시안(341px 폭 축소본)을 1920px 로 환산 (×5.63). PC 기준값
     히어로 1920×550 / 원형 항목 지름 250 · 간격 70 (소개 배경과 아이보리 배경의 경계가 원의 중심을 지남)
     치료 행: 50% / 50% · 사진 960×397 (우하단 100) · 행 사이 156 · 홀수 행 글 시작 78 / 짝수 행 글 시작 250 · 글 최대 폭 604
     영문 장식: Manrope 약 104px, 사진 하단 경계에 걸침 / 하단 배경 1920×997 (우상단 100)
   값은 clamp(최소, vw 비례, PC 값) 이라 1920px 이상에서 위 값이 되고, 좁아질수록 줄어듭니다.
   ===================================================== */
.page-rehab {
  --rg-ivory: #f8f3ed;
  --rg-intro-bg: #eeebe6;
  --rg-ink: #16344c;
  --rg-navy: var(--navy, #1e3a52);
  --rg-beige: var(--gold, #d6b992);
  --rg-radius: clamp(48px, 5.21vw, 100px); /* 치료 사진 · 하단 배경 반경 (PC 100) */
  --rg-d: clamp(150px, 13.02vw, 250px); /* 원형 항목 지름 (PC 250) */

  background: var(--rg-ivory);

  /* sub_common.css 의 서브 비주얼 / 공통 제목 변수 */
  --sub-hero-bg: #3a4046;

  --sub-hero-pos: center center;
  --sub-heading-accent: #c6a36a;
  --sub-heading-desc: #4a5b69;
}
.page-rehab main {
  background: var(--rg-ivory);
  color: var(--rg-ink); /* 본문만. body 에 두면 퀵메뉴까지 어두워짐 */
}

/* ---------- 공통 제목 (이 페이지 안에서만) ---------- */
.page-rehab .sub-section-heading__title {
  color: var(--rg-ink);
}
.page-rehab .sub-section-heading--intro .sub-section-heading__title {
  font-size: clamp(26px, 2.81vw, 54px);
}
.page-rehab .rehab-treat .sub-section-heading__title {
  font-size: clamp(28px, 2.66vw, 51px);
}
.page-rehab .sub-section-heading__description {
  margin-top: clamp(24px, 3.1vw, 59px);
}
.page-rehab .sub-section-heading__description p {
  letter-spacing: -0.02em;
}

/* ---------- 소개 ---------- */
.page-rehab .rehab-intro {
  padding: clamp(88px, 8.4vw, 160px) 24px clamp(56px, 5.6vw, 107px);
  background: var(--rg-intro-bg);
  text-align: center;
}

/* ---------- 원형 관리 항목 ----------
   섹션 맨 위에 원을 놓고, 배경의 경계(소개 배경 → 아이보리)를 원의 가로 중심선에 맞춥니다 (문서 흐름, absolute 없음). */
.page-rehab .rehab-circles {
  background: linear-gradient(to bottom, var(--rg-intro-bg) 0, var(--rg-intro-bg) calc(var(--rg-d) / 2), var(--rg-ivory) calc(var(--rg-d) / 2));
}
.page-rehab .rehab-circles__list {
  display: grid;
  grid-template-columns: repeat(4, var(--rg-d));
  justify-content: center;
  gap: 0 clamp(20px, 3.65vw, 70px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-rehab .rehab-circle {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--rg-d);
  height: var(--rg-d);
  border-radius: 50%;
  background: #fff;
  text-align: center;
}
/* 원 하단의 네이비 곡선 테두리 (아래쪽 반원만, 상단은 감싸지 않음) */
.page-rehab .rehab-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--rg-navy) 0 180deg, transparent 180deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  pointer-events: none;
}
.page-rehab .rehab-circle__text {
  font-size: clamp(16px, 1.46vw, 35px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  word-break: keep-all;
  color: var(--rg-ink);
}

/* ---------- 맞춤 치료 ---------- */
.page-rehab .rehab-treat__head {
  padding: clamp(88px, 8.4vw, 160px) 24px clamp(48px, 4.2vw, 80px);
}
.page-rehab .rehab-list {
  padding-bottom: clamp(88px, 11.3vw, 217px);
}

/* 치료 행: 전체 폭 50% / 50% (사진은 브라우저 절반 폭, 화면 끝에 붙음) */
.page-rehab .rehab-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.page-rehab .rehab-row + .rehab-row {
  margin-top: clamp(64px, 8.125vw, 156px);
}
.page-rehab .rehab-row__media {
  position: relative; /* 영문 장식 기준. overflow 는 사진(.rehab-row__photo)에만 */
  z-index: 1;
  min-width: 0;
}
.page-rehab .rehab-row__photo {
  width: 100%;
  aspect-ratio: 960 / 397;
  overflow: hidden;
  border-radius: 0 0 var(--rg-radius) 0; /* 지정 반경: 우하단만 */
  background: #dfe6ec;
}
.page-rehab .rehab-row__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 영문 장식: 사진 하단 경계에 걸치게 (사진 wrapper 밖에 두어 반경 · overflow 에 잘리지 않음) */
.page-rehab .rehab-row__deco {
  position: absolute;
  bottom: calc(4px - 0.117em);
  font-family: "Manrope", "Pretendard Variable", sans-serif;
  font-size: clamp(40px, 5.83vw, 110px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--rg-beige);
  pointer-events: none;
  user-select: none;
}
.page-rehab .rehab-row--photo-left .rehab-row__deco {
  left: 14.6%;
}
.page-rehab .rehab-row--photo-right .rehab-row__deco {
  left: 8.3%;
}
.page-rehab .rehab-row__body {
  min-width: 0;
  padding-right: 24px;
}
.page-rehab .rehab-row__body > * {
  max-width: 604px;
}
.page-rehab .rehab-row--photo-left .rehab-row__body {
  padding-left: clamp(24px, 4.06vw, 78px);
}
.page-rehab .rehab-row--photo-right .rehab-row__body {
  padding-left: clamp(24px, 13vw, 250px);
}
/* DOM 순서는 항상 사진 → 설명. 짝수 행만 PC 에서 시각적으로 설명을 왼쪽으로 */
.page-rehab .rehab-row--photo-right .rehab-row__media {
  grid-column: 2;
  grid-row: 1;
}
.page-rehab .rehab-row--photo-right .rehab-row__body {
  grid-column: 1;
  grid-row: 1;
}
.page-rehab .rehab-row__label {
  display: inline-block;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rg-beige); /* 라벨 아래 짧은 구분선 */
  font-size: clamp(14px, 1.04vw, 20px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--rg-beige);
}
.page-rehab .rehab-row__title {
  margin: clamp(8px, 0.68vw, 13px) 0 0;
  font-size: clamp(28px, 3.125vw, 60px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  word-break: keep-all;
  color: var(--rg-ink);
}
.page-rehab .rehab-row__desc {
  margin: clamp(14px, 1.3vw, 25px) 0 0;
}
.page-rehab .rehab-row__desc p {
  margin: 0;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.85;
  font-weight: 500;
  letter-spacing: -0.02em;
  word-break: keep-all;
  color: #2a2622;
}

/* ---------- 하단: 배경 사진 위 맞춤 회복 관리 ---------- */
.page-rehab .rehab-care {
  --rg-care-dot: clamp(12px, 1.04vw, 24px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(520px, 51.93vw, 997px); /* PC 1920×997 */
  border-radius: 0 var(--rg-radius) 0 0;
  background: var(--rg-ivory);
}
.page-rehab .rehab-care__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 30%;
}
.page-rehab .rehab-care__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 247, 242, 0.34); /* 아이보리 · 흰색 오버레이: 배경은 은은하게, 네이비 글자는 선명하게 */
}
.page-rehab .rehab-care__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52.7%;
  align-items: start;
  width: min(1420px, calc(100% - 48px));
  margin-inline: auto;
  padding: clamp(80px, 8.5vw, 160px) 0 clamp(72px, 8vw, 150px);
}
.page-rehab .rehab-care__label {
  margin: 0;
  font-size: clamp(14px, 1.25vw, 20px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #d6b992;
}
.page-rehab .rehab-care__title {
  margin: clamp(8px, 0.62vw, 12px) 0 0;
  font-size: clamp(28px, 3.33vw, 60px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.04em;
  word-break: keep-all;
  color: var(--rg-ink);
}
.page-rehab .rehab-care__list {
  display: grid;
  gap: clamp(36px, 4.2vw, 80px);
  margin: clamp(24px, 2.4vw, 46px) 0 0;
  padding: 0 clamp(10px, 1.04vw, 20px) 0 0;
  list-style: none;
}
.page-rehab .rehab-care__item {
  min-width: 0;
  min-height: clamp(84px, 5.94vw, 114px); /* 설명 유무와 상관없이 항목 간 리듬 유지 (PC) */
}
.page-rehab .rehab-care__item-title {
  margin: 0;
  padding-left: clamp(24px, 1.82vw, 35px);
  font-size: clamp(18px, 2.08vw, 40px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
  color: var(--rg-ink);
}
/* 장식: 제목 아래 가로선 + 선 왼쪽 끝의 네이비 원 (접근성 트리 제외) */
.page-rehab .rehab-care__line {
  position: relative;
  display: block;
  height: 2px;
  margin: clamp(6px, 0.42vw, 8px) 0 0 calc(var(--rg-care-dot) / 2);
  background: rgba(22, 52, 76, 0.28);
}
.page-rehab .rehab-care__line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--rg-care-dot) / -2);
  width: var(--rg-care-dot);
  height: var(--rg-care-dot);
  border-radius: 50%;
  background: var(--rg-navy);
  transform: translateY(-50%);
}
.page-rehab .rehab-care__item-desc {
  margin: clamp(16px, 1.45vw, 28px) 0 0;
  padding-left: clamp(24px, 1.82vw, 35px);
  font-size: clamp(14px, 0.84vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  word-break: keep-all;
  color: #2a2622;
}

/* =====================================================
   반응형
   ===================================================== */
@media (max-width: 1100px) {
  /* 원형 항목 2×2 (원 지름은 유지, 경계는 첫 줄 원의 중심을 지남) */
  .page-rehab {
    --rg-d: clamp(180px, 24vw, 220px);
  }
  .page-rehab .rehab-circles__list {
    grid-template-columns: repeat(2, var(--rg-d));
    gap: 24px clamp(20px, 3vw, 36px);
  }
  .page-rehab .rehab-circle__text {
    font-size: clamp(18px, 2.3vw, 24px);
  }
}
@media (max-width: 900px) {
  .page-rehab {
    --rg-radius: clamp(36px, 8vw, 64px);
  }
  .page-rehab .rehab-intro {
    padding-inline: 20px;
  }

  /* 치료 행: 사진 → 텍스트 1열 (짝수 행도 같은 순서) */
  .page-rehab .rehab-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .page-rehab .rehab-row + .rehab-row {
    margin-top: clamp(56px, 11vw, 88px);
  }
  .page-rehab .rehab-row--photo-right .rehab-row__media,
  .page-rehab .rehab-row--photo-right .rehab-row__body {
    grid-column: 1;
    grid-row: auto;
  }
  .page-rehab .rehab-row__photo {
    aspect-ratio: 16 / 9;
  }
  .page-rehab .rehab-row__deco {
    font-size: clamp(34px, 10.4vw, 72px);
  }
  .page-rehab .rehab-row--photo-left .rehab-row__deco,
  .page-rehab .rehab-row--photo-right .rehab-row__deco {
    left: 20px;
  }
  .page-rehab .rehab-row__body,
  .page-rehab .rehab-row--photo-left .rehab-row__body,
  .page-rehab .rehab-row--photo-right .rehab-row__body {
    padding: clamp(32px, 7vw, 52px) 24px 0; /* 좌우 대칭 */
  }
  .page-rehab .rehab-row__label {
    font-size: 15px;
  }
  .page-rehab .rehab-row__title {
    font-size: clamp(26px, 5.6vw, 40px);
  }
  .page-rehab .rehab-row__desc p {
    font-size: 15px;
  }
  .page-rehab .rehab-list {
    padding-bottom: clamp(64px, 12vw, 96px);
  }

  /* 하단 회복 관리: 제목 → 항목 3개 1열, 높이는 내용에 맞춤 */
  .page-rehab .rehab-care {
    min-height: 0;
  }
  .page-rehab .rehab-care__bg {
    object-position: 30% 20%;
  }
  .page-rehab .rehab-care__veil {
    background: rgba(250, 247, 242, 0.62);
  }
  .page-rehab .rehab-care__inner {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 48px);
    padding: clamp(56px, 12vw, 88px) 0 clamp(56px, 12vw, 88px);
  }
  .page-rehab .rehab-care__label {
    font-size: 15px;
  }
  .page-rehab .rehab-care__title {
    font-size: clamp(26px, 6.4vw, 40px);
  }
  .page-rehab .rehab-care__list {
    --rg-care-dot: 14px;
    gap: 32px;
    margin-top: 32px;
    padding-right: 0;
  }
  .page-rehab .rehab-care__item {
    min-height: 0;
  }
  .page-rehab .rehab-care__item-title {
    padding-left: 28px;
    font-size: clamp(18px, 4.2vw, 24px);
  }
  .page-rehab .rehab-care__item-desc {
    padding-left: 28px;
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .page-rehab {
    --rg-d: min(44vw, 170px);
  }
  .page-rehab .rehab-circles__list {
    gap: 16px 14px;
  }
  .page-rehab .rehab-circle__text {
    font-size: clamp(15px, 4.4vw, 18px);
  }
}