/*
 * 건강정보(/health/) 화면 스타일.
 * 머리글·바닥글·상단 큰 배너(.sub-visual)는 홈페이지 공통 CSS(common.css, sub.css)를 그대로 쓰고,
 * 여기에는 목록과 글 본문만 둔다. 색·둥글기는 아래 토큰 한 곳에서 정하며 홈페이지 값에 맞춘 것이다.
 *   - 강조색: 홈 화면의 진보라(#35157f / #3f1689)
 *   - 글자·선: 홈페이지의 제목색(#101828), 본문색(#14213d), 구분선(#dfe6ef), 옅은 바탕(#f4f8fb)
 *   - 모양: 버튼 6px, 카드·사진 8px (홈페이지 .button, 사진과 같음). 태그 칩만 알약형
 */
.health-page {
  --h-accent: #35157f;       /* 예약 버튼, 선택된 태그, 진행 막대 */
  --h-accent-ink: #3f1689;   /* 분류 글자, 본문 링크 */
  --h-accent-press: #2a1066; /* 눌림·올림 상태 */
  --h-accent-soft: #f3f1fb;  /* 핵심 답변 상자 */
  --h-dark: #4b4266;         /* 일반 버튼(홈페이지 확인 버튼과 같은 색) */
  --h-ink-deep: #101828;     /* 제목 */
  --h-ink: #14213d;          /* 본문 */
  --h-charcoal: #344054;
  --h-muted: #4b5565;        /* 보조 글자 */
  --h-stone: #98a2b3;        /* 구분 기호, 목록 점 */
  --h-hairline: #cbd6e3;     /* 입력창·칩 테두리 */
  --h-line: #dfe6ef;         /* 카드·구분선 */
  --h-wash: #f4f8fb;         /* 옅은 바탕 */
  --h-radius: 8px;
  --h-radius-sm: 6px;

  color: var(--h-ink);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  /* keep-all은 단어 중간에서 끊지 않으므로, 화면보다 긴 단어(주소·영문)는 넘치지 않게 꺾는다 */
  overflow-wrap: break-word;
}

.health-page :focus-visible {
  outline: 2px solid var(--h-accent);
  outline-offset: 2px;
}

.health-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 레이아웃 ---------- */
.health-wrap {
  width: calc(100% - 48px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 0 96px;
}

.health-wrap--narrow {
  max-width: 780px;
}

.health-empty-page {
  padding: 96px 0 120px;
}

.health-empty-page p {
  margin-top: 20px;
}

/* ---------- 현재 위치 ---------- */
.health-breadcrumb {
  color: var(--h-muted);
  font-size: 14px;
}

.health-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.health-breadcrumb li + li::before {
  content: "·";
  margin-right: 8px;
  color: var(--h-stone);
}

.health-breadcrumb a:hover {
  text-decoration: underline;
}

.health-breadcrumb [aria-current] {
  color: var(--h-ink);
}

/* ---------- 버튼 ---------- */
.health-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--h-radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

/* 예약 버튼: 홈페이지 주 색 */
.health-btn--primary {
  background: var(--h-accent);
  color: #ffffff;
}

.health-btn--primary:hover,
.health-btn--primary:active {
  background: var(--h-accent-press);
}

.health-btn--dark {
  background: var(--h-dark);
  color: #ffffff;
}

.health-btn--dark:hover,
.health-btn--dark:active {
  background: var(--h-ink-deep);
}

.health-btn--outline {
  border-color: var(--h-ink-deep);
  background: #ffffff;
  color: var(--h-ink-deep);
}

.health-btn--line {
  border-color: var(--h-hairline);
  background: #ffffff;
  color: var(--h-ink-deep);
}

.health-btn--outline:hover,
.health-btn--outline:active,
.health-btn--line:hover,
.health-btn--line:active {
  background: var(--h-wash);
}

/* ---------- 검색·태그 ---------- */
.health-search {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin-top: 28px;
}

.health-search input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--h-hairline);
  border-radius: var(--h-radius-sm);
  background: #ffffff;
  color: var(--h-ink);
  font-size: 16px;
}

.health-search input::placeholder {
  color: var(--h-muted);
}

.health-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.health-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--h-hairline);
  border-radius: 999px;
  background: #ffffff;
  color: var(--h-ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.health-chip:hover {
  border-color: var(--h-accent);
  color: var(--h-accent-ink);
}

.health-chip.is-active {
  border-color: var(--h-accent);
  background: var(--h-accent);
  color: #ffffff;
}

.health-result-count {
  margin-top: 24px;
  color: var(--h-muted);
}

.health-empty {
  margin-top: 48px;
  padding: 48px 24px;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  color: var(--h-muted);
  text-align: center;
}

/* ---------- 글 카드 ---------- */
.health-grid {
  display: grid;
  gap: 48px 24px;
  margin-top: 48px;
}

@media (min-width: 640px) {
  .health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.health-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.health-card__image {
  display: block;
  overflow: hidden;
  border-radius: var(--h-radius);
  background: var(--h-wash);
}

.health-card__image > img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.health-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 8 / 5;
}

.health-card__placeholder img {
  width: auto;
  height: 32px;
  opacity: 0.6;
}

.health-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 16px;
}

.health-eyebrow {
  color: var(--h-accent-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.health-eyebrow:hover {
  text-decoration: underline;
}

.health-card__title {
  margin-top: 6px;
  color: var(--h-ink-deep);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  text-wrap: balance;
}

.health-card__title a {
  transition: color 0.15s ease-out;
}

.health-card:hover .health-card__title a {
  color: var(--h-accent-ink);
}

.health-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 8px;
  color: var(--h-muted);
  font-size: 15px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.health-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--h-muted);
  font-size: 13px;
}

.health-card__meta a {
  font-weight: 700;
}

.health-card__meta a:hover {
  text-decoration: underline;
}

.health-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 56px;
  color: var(--h-muted);
  font-size: 14px;
}

/* ---------- 글 상세 ---------- */
.health-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  height: 3px;
  pointer-events: none;
}

.health-progress > div {
  width: 0;
  height: 100%;
  background: var(--h-accent);
}

.health-draft-notice {
  padding: 10px 16px;
  background: #fff4de;
  color: #7a4b00;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.health-article {
  padding: 40px 0 96px;
}

.health-article__layout {
  width: calc(100% - 40px);
  max-width: 780px;
  margin: 0 auto;
}

.health-article__aside {
  display: none;
}

/* 넓은 화면에서는 목차를 왼쪽에 고정한다 */
@media (min-width: 1280px) {
  .health-article__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 780px);
    justify-content: center;
    gap: 64px;
    max-width: 1320px;
  }

  .health-article__aside {
    display: block;
  }

  .health-article__aside .health-toc {
    position: sticky;
    top: 112px; /* 고정된 머리글(82px) 아래 */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 8px;
  }

  .health-box--toc {
    display: none;
  }
}

.health-article__header {
  margin-top: 24px;
}

.health-title {
  margin-top: 10px;
  color: var(--h-ink-deep);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}

.health-lead {
  color: var(--h-muted);
  font-size: 18px;
}

.health-meta {
  margin-top: 16px;
  color: var(--h-muted);
  font-size: 14px;
}

/* 핵심 답변: 옅은 보라 안내 상자 */
.health-answer {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--h-radius);
  background: var(--h-accent-soft);
}

.health-answer h2 {
  color: var(--h-accent-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.health-answer p {
  margin-top: 8px;
  color: var(--h-ink-deep);
  font-size: 18px;
  line-height: 1.65;
}

/* 문장마다 줄을 바꿔 한 덩어리로 길게 이어지지 않게 한다 */
.health-answer p span {
  display: block;
}

.health-answer p span + span {
  margin-top: 0.35em;
}

.health-box {
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  background: #ffffff;
}

.health-box h2 {
  color: var(--h-ink-deep);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.health-box ul {
  margin: 12px 0 0 1.25rem;
  list-style: disc;
}

.health-box li + li {
  margin-top: 8px;
}

.health-box li::marker {
  color: var(--h-stone);
}

.health-toc__title {
  color: var(--h-ink-deep);
  font-size: 14px;
  font-weight: 800;
}

.health-toc ol {
  margin-top: 12px;
  color: var(--h-muted);
  font-size: 14px;
  line-height: 1.45;
}

.health-toc li + li {
  margin-top: 8px;
}

.health-toc li.is-sub {
  padding-left: 16px;
}

.health-toc a:hover {
  color: var(--h-accent-ink);
  text-decoration: underline;
}

.health-figure {
  width: 100%;
  margin-top: 32px;
  border-radius: var(--h-radius);
}

/* ---------- 글 본문 ---------- */
.health-prose {
  margin-top: 32px;
  /* 한글 장문 가독성을 위해 줄 간격을 넓게 둔다 */
  font-size: 17px;
  line-height: 1.75;
}

.health-prose h2 {
  margin: 48px 0 16px;
  color: var(--h-ink-deep);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  scroll-margin-top: 104px;
}

.health-prose h3 {
  margin: 32px 0 10px;
  color: var(--h-ink-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  scroll-margin-top: 104px;
}

@media (min-width: 768px) {
  .health-prose h2 {
    font-size: 26px;
  }

  .health-prose h3 {
    font-size: 20px;
  }
}

.health-prose > :first-child {
  margin-top: 0;
}

.health-prose p {
  margin: 0 0 20px;
}

.health-prose ul,
.health-prose ol {
  margin: 0 0 20px 1.25rem;
}

.health-prose ul {
  list-style: disc;
}

.health-prose ol {
  list-style: decimal;
}

.health-prose li {
  margin-bottom: 8px;
}

.health-prose li::marker {
  color: var(--h-stone);
}

.health-prose li p,
.health-prose th p,
.health-prose td p {
  margin: 0;
}

.health-prose a {
  color: var(--h-accent-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 본문 이미지: 위아래 여백을 두고 본문 폭에 맞춘다. 도표가 잘리지 않게 원본 비율 그대로 */
.health-prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: 32px 0;
  border-radius: var(--h-radius);
}

.health-prose blockquote {
  margin: 32px 0;
  padding-left: 20px;
  border-left: 3px solid var(--h-accent);
  color: var(--h-muted);
  font-size: 18px;
  line-height: 1.6;
}

.health-prose hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--h-line);
}

/* 표: 좁은 화면에서는 표만 가로로 민다 */
.health-table {
  margin: 24px 0;
  overflow-x: auto;
}

.health-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.health-prose th,
.health-prose td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--h-line);
  text-align: left;
  vertical-align: top;
}

.health-prose th {
  background: var(--h-wash);
  border-bottom-color: var(--h-hairline);
  color: var(--h-ink-deep);
  font-weight: 700;
}

.health-prose td {
  color: var(--h-charcoal);
}

/* ---------- FAQ·참고 자료 ---------- */
.health-section {
  margin-top: 64px;
}

.health-section__title {
  margin-bottom: 24px;
  color: var(--h-ink-deep);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .health-section__title {
    font-size: 28px;
  }
}

.health-faq {
  padding: 0 24px;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  background: #ffffff;
}

.health-faq + .health-faq {
  margin-top: 12px;
}

.health-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  color: var(--h-ink-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.health-faq summary::-webkit-details-marker {
  display: none;
}

/* 펼침 표시(꺾쇠) */
.health-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--h-muted);
  border-bottom: 2px solid var(--h-muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease-out;
}

.health-faq[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.health-faq > p {
  padding-bottom: 24px;
  line-height: 1.7;
}

.health-refs {
  margin-left: 1.25rem;
  color: var(--h-muted);
  font-size: 14px;
  line-height: 1.5;
  list-style: decimal;
  overflow-wrap: anywhere;
}

.health-refs li + li {
  margin-top: 8px;
}

.health-refs li::marker {
  color: var(--h-stone);
}

.health-refs a {
  color: var(--h-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 진료·상담 안내 ---------- */
.health-consult {
  margin-top: 64px;
  padding: 24px;
  border-radius: var(--h-radius);
  background: var(--h-wash);
}

@media (min-width: 768px) {
  .health-consult {
    padding: 32px;
  }
}

.health-consult h2 {
  color: var(--h-ink-deep);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}

.health-consult > p {
  margin-top: 10px;
}

.health-consult__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.health-consult .health-consult__note {
  margin-top: 18px;
  color: var(--h-muted);
  font-size: 14px;
}

.health-article__main > .health-chips {
  margin-top: 32px;
}

/* ---------- 이전·다음 글 ---------- */
.health-adjacent {
  display: grid;
  gap: 12px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .health-adjacent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health-adjacent .is-next {
    grid-column: 2;
    text-align: right;
  }
}

.health-adjacent a {
  display: block;
  padding: 20px 24px;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  background: #ffffff;
}

.health-adjacent a:hover,
.health-adjacent a:active {
  background: var(--h-wash);
}

.health-adjacent a span {
  display: block;
  color: var(--h-muted);
  font-size: 12px;
  font-weight: 700;
}

.health-adjacent a strong {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: var(--h-ink-deep);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---------- 관련 글·최신 글 ---------- */
.health-more {
  width: calc(100% - 48px);
  max-width: 1320px;
  margin: 80px auto 0;
  padding-top: 56px;
  border-top: 1px solid var(--h-line);
}

.health-more > h2 {
  color: var(--h-ink-deep);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .health-more > h2 {
    font-size: 28px;
  }
}

.health-more .health-grid {
  margin-top: 32px;
}

@media (max-width: 639px) {
  .health-wrap,
  .health-more {
    width: calc(100% - 40px);
  }

  .health-wrap {
    padding: 32px 0 72px;
  }

  .health-article {
    padding: 28px 0 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .health-faq summary::after,
  .health-card__title a {
    transition: none;
  }
}