/**
 * "완전 신규 디자인" 진료과목 페이지 공용 스타일 — 원래 ADHD 한 페이지만을 위해
 * treatment-adhd-new.css라는 이름으로 만들었으나, tic 등 같은 패턴의 페이지가
 * 늘어나면서 2026-08-25 범용 이름(treatment-full-design.css)으로 변경(내용은
 * 그대로 유지, 파일명·핸들명만 변경 — functions.php 참고).
 *
 * 어떤 슬러그가 이 파일을 쓰는지는 functions.php의 hyoo_treatment_full_design_slugs()
 * 배열로 관리(현재 adhd/adhd-test/tic-test). 클래스 이름(.disease-hero,
 * .symptom-check 등)은 ADHD 페이지 기준으로 지어졌지만 의미상 특정 진료과목에
 * 종속되지 않으므로 그대로 재사용 — 새 진료과목 페이지를 추가할 때 이 파일의
 * 섹션 클래스를 그대로 쓰면 됨. 기존 사이트 색상 토큰(--hyoo-accent 등, style.css
 * :root)을 그대로 재사용 — 참고 이미지들의 웜톤 배경 + 로즈/브라운 포인트 컬러가
 * 기존 토큰과 잘 맞아서 새 팔레트를 만들지 않았다.
 */

#hyoo-full-design-page {
  color: var(--hyoo-text);
  overflow-x: hidden;
}

#hyoo-full-design-page .container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

#hyoo-full-design-page .container--wide {
  max-width: 1280px;
}

#hyoo-full-design-page section {
  padding: 72px 0;
}

#hyoo-full-design-page section:nth-of-type(even) {
  background: var(--hyoo-bg-soft);
}

/* ── 섹션 공통 헤딩 ───────────────────────────────────────────── */
.section-heading {
  margin-bottom: 40px;
}

.section-heading--center {
  text-align: center;
}

.section-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--hyoo-accent-dark);
  margin: 0 0 12px;
}

.section-heading h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  word-break: keep-all;
  margin: 0 0 14px;
}

.section-description {
  font-size: 15px;
  color: var(--hyoo-text-muted);
  line-height: 1.7;
  word-break: keep-all;
  margin: 0;
}

/* ── 버튼 ─────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
  white-space: nowrap;
}

.button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.button--primary {
  background: var(--hyoo-accent-dark);
  color: #fff;
}

.button--primary:hover {
  background: var(--hyoo-accent);
  color: #fff;
}

.button--secondary {
  background: #fff;
  color: var(--hyoo-accent-dark);
  border: 1px solid var(--hyoo-accent-dark);
}

.button--secondary:hover {
  background: var(--hyoo-bg-soft);
}

/* ── 01. HERO ─────────────────────────────────────────────────── */
.disease-hero {
  padding-top: 56px;
  padding-bottom: 0;
  background: var(--hyoo-bg-soft);
}

.disease-hero__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.disease-hero__eyebrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--hyoo-accent-dark);
  margin: 0 0 16px;
}

.disease-hero__content h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 20px;
  word-break: keep-all;
}

.disease-hero__headline {
  font-size: 17px;
  line-height: 1.7;
  color: var(--hyoo-text-muted);
  word-break: keep-all;
  margin: 0 0 24px;
}

.disease-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.disease-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hyoo-text);
}

.disease-hero__points li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.disease-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.disease-hero__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
}

/* ── 02. AWARD ────────────────────────────────────────────────── */
/* `.award-bridge`가 흰 배경으로 항상 렌더링될 거라 가정하고 `.award-bridge__icon`의
   배경을 var(--hyoo-bg-soft)(베이지)로 설계했는데, 실제로는 이 섹션이 항상 2번째
   (짝수) 섹션이라 `#hyoo-full-design-page section:nth-of-type(even)` 규칙(id
   셀렉터라 specificity가 더 높음, .clinic-intro 수정 때와 동일한 원인 —
   아래쪽 참고)이 이 흰 배경을 조용히 덮어써서 섹션 자체가 베이지로 렌더링되고
   있었음. 그 결과 아이콘 배지(베이지)와 섹션 배경(역시 베이지)이 같은 색이 되어
   배지가 거의 안 보이는 문제가 있었음(사용자 리포트, "다한증이 뱃지 설명글의
   배경이 잘 보이지 않아" — 실제로는 완전 신규 디자인 페이지 전체에 있던 문제였고
   다한증만의 문제가 아니었음, 2026-08-31). `section` 타입 셀렉터까지 추가해
   specificity를 nth-of-type 규칙과 동일하게 맞추고, 이 규칙이 파일에서 더 뒤에
   있어 동률일 때 우선 적용되도록 함. */
#hyoo-full-design-page section.award-bridge {
  background: #fff;
}

/* 하나의 구간(카드)에 테두리+둥근 모서리 적용(사용자 요청, 2026-08-19) — 두 박스로
   나눴다가 "1구간으로" 되돌리고, 세로 스택으로도 바꿔봤다가 다시 "좌우 배치"로
   되돌림 — 최종: 가로 배치 + 카드 전체는 중앙 정렬 + 확대된 글자 크기. */
.award-bridge__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  padding: 36px 32px;
  border: 1px solid var(--hyoo-border);
  border-radius: 16px;
}

.award-bridge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  background: var(--hyoo-bg-soft);
  border-radius: 50%;
}

.award-bridge__icon img {
  object-fit: contain;
}

.award-bridge__title {
  text-align: left;
}

.award-bridge__title p {
  font-size: 16px;
  color: var(--hyoo-text-muted);
  margin: 0 0 6px;
}

.award-bridge__title strong {
  font-size: 26px;
  font-weight: 800;
  color: var(--hyoo-accent-dark);
  white-space: nowrap;
}

.award-bridge__divider {
  width: 1px;
  height: 56px;
  background: var(--hyoo-border);
}

.award-bridge__description {
  max-width: 420px;
  font-size: 17px;
  color: var(--hyoo-text-muted);
  line-height: 1.7;
  word-break: keep-all;
  margin: 0;
  text-align: left;
}

/* ── 03. PATIENT REVIEW ───────────────────────────────────────── */
.review-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 16px;
  overflow: hidden;
}

.review-card__image {
  overflow: hidden;
}

.review-card__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.review-card:hover .review-card__image img {
  transform: scale(1.1);
}

.review-card__content {
  padding: 32px 32px 32px 0;
}

.review-card__quote {
  display: block;
  font-size: 40px;
  font-weight: 800;
  color: var(--hyoo-accent-muted);
  line-height: 1;
}

.review-card__quote--open {
  margin-bottom: 8px;
}

/* 여는 인용부호만 있고 마감(닫는) 부호가 없어 문장이 안 끝난 느낌이었음(사용자
   리포트, "review-card__quote 마감 영역이 없음") — 인용문 뒤에 같은 스타일의
   닫는 부호를 우측 정렬로 추가(2026-08-19). */
.review-card__quote--close {
  text-align: right;
  margin-top: -12px;
  margin-bottom: 8px;
}

.review-card blockquote {
  margin: 0 0 8px;
}

.review-card blockquote strong {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  word-break: keep-all;
}

.review-card__meta {
  font-size: 13px;
  color: var(--hyoo-text-soft);
  margin: 0;
}

.review-disclaimer {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 20px 24px;
  background: var(--hyoo-bg-soft);
  border-radius: 12px;
  word-break: keep-all;
}

.review-disclaimer p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--hyoo-text-soft);
  margin: 0;
}

.review-disclaimer p + p {
  margin-top: 4px;
}

/* ── 04. WHAT IS ADHD ─────────────────────────────────────────── */
.definition-card {
  position: relative;
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

/* 사진 배경(베이지/크림 톤)이 그대로 텍스트 밑까지 깔려 가독성이 떨어진다는
   피드백(사용자 리포트, "배경에 색상이 있어") — panic/autonomic/insomnia/다한증 등
   대부분의 완전 신규 디자인 페이지가 같은 톤이라 사진 개별 교체 대신 흰색
   그라디언트 오버레이를 공통으로 추가(2026-08-31). 사진 자체는 그대로 두고
   텍스트가 앉는 오른쪽 영역만 자연스럽게 밝아지도록 처리 — 사진 교체 없이
   모든 완전 신규 디자인 페이지에 일괄 적용됨. */
.definition-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 28%, rgba(250, 248, 246, 0.94) 58%);
  pointer-events: none;
}

.definition-card__content {
  position: relative;
  z-index: 1;
  width: 95%;
  max-width: 580px;
  margin-left: auto;
  padding: 40px;
}

.definition-card__lead {
  margin: 0 0 16px;
}

.definition-card__lead strong {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.6;
  word-break: keep-all;
}

/* 문장 전체가 아니라 일부 구절만 포인트 색상으로 강조할 때 쓰는 클래스(사용자 요청,
   2026-09-15, ADHD "WHAT IS" 섹션에서 처음 사용) — strong 안/밖 어디서든 재사용 가능.
   처음엔 --hyoo-accent-dark를 썼는데 주변 굵은 본문(near-black --hyoo-text)과 명도
   차이가 적어 "티가 안 난다"는 피드백을 받음 — .research-result strong(통계 숫자
   강조)과 동일하게, 이 코드베이스에서 실제로 눈에 띄는 강조용으로 쓰는
   --hyoo-accent-rose로 교체(2026-09-15). */
.definition-card__point {
  color: var(--hyoo-accent-rose);
}

.definition-card__content p:not(.definition-card__lead) {
  font-size: 14px;
  color: var(--hyoo-text-muted);
  line-height: 1.7;
  word-break: keep-all;
  margin: 0;
}

/* ── 05. SYMPTOM CHECK ────────────────────────────────────────── */
.symptom-check__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.symptom-card {
  padding: 28px 22px;
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 14px;
}

/* 참고 이미지(sample page.jpeg)처럼 아이콘을 연한 원형 뱃지 안에 배치 — 아이콘만
   덩그러니 있던 것에서 변경. */
.symptom-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--hyoo-bg-soft);
  color: var(--hyoo-accent-dark);
}

.symptom-card__icon svg {
  width: 30px;
  height: 30px;
}

/* 1번 카드(주의력 결핍) — 자체 원형 배경이 포함된 손그림 매듭 아트워크(사용자 제공,
   2026-08-19)라 wrapper의 원형 배경을 끄고 SVG를 배지 크기에 꽉 채움. 배경을 끄니
   원형 배지 형태 자체가 사라져 다른 카드와 안 어울렸음(사용자 리포트, "원형
   테두리가 없어") — 테두리만 남겨 배지 윤곽을 유지(2026-08-19). */
.symptom-card__icon--art {
  background: none;
  border: 1px solid var(--hyoo-border);
}

.symptom-card__icon--art svg {
  width: 56px;
  height: 56px;
}

.symptom-card h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 12px;
}

.symptom-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.symptom-card li {
  position: relative;
  padding-left: 12px;
  font-size: 13px;
  color: var(--hyoo-text-muted);
  line-height: 1.7;
  word-break: keep-all;
}

.symptom-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hyoo-accent-muted);
}

/* 흰 배경을 고정값으로 뒀더니, PATIENT REVIEW 섹션이 없는 다한증 페이지에서는
   그 뒤 섹션들의 짝/홀수 순번이 한 칸씩 밀려 SYMPTOM CHECK 섹션 자체가
   #hyoo-full-design-page section:nth-of-type(even) 규칙(--hyoo-bg-soft)을 받는
   바람에, 이 카드의 흰 배경만 도드라져 보이는 문제가 있었음(사용자 리포트,
   ".symptom-bridge 흰배경 제거", 2026-08-31). 배경을 아예 없애 부모 섹션 배경을
   그대로 비치게 함 — 다른 페이지(섹션이 홀수 순번이라 이미 흰 배경)에는 시각적
   차이 없음. */
.symptom-bridge {
  display: flex;
  align-items: stretch;
  padding: 32px 4px;
  border-radius: 16px;
}

/* gap 제거로 이미지와 텍스트 박스가 맞닿아 하나의 알약형 카드처럼 보이므로,
   맞닿는 안쪽 모서리는 각지게 두고 바깥쪽 모서리만 둥글림(사용자 요청,
   2026-08-19). */
.symptom-bridge img {
  width: 460px;
  flex-shrink: 0;
  border-radius: 14px 0 0 14px;
  object-fit: cover;
  aspect-ratio: 608 / 362;
}

/* 텍스트 박스가 이미지보다 훨씬 짧아 위아래 큰 공백이 생기던 문제(사용자 리포트,
   "이미지와 콘텐츠 부분이 이상함") — 부모를 stretch로 바꾸고 blockquote 자체를
   flex로 만들어 이미지와 같은 높이로 늘어나되, 내부 텍스트는 세로 중앙 정렬
   유지(2026-08-19). 하드코딩 <br>도 제거해 자연스러운 줄바꿈으로 전환 — 강제
   줄바꿈 때문에 "있다면,"이 혼자 어색하게 한 줄을 차지하던 문제 해결. */
.symptom-bridge blockquote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin: 0;
  padding: 24px 28px;
  background: var(--hyoo-bg-soft);
  border: none;
  border-radius: 0 14px 14px 0;
}

.symptom-bridge blockquote p {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.7;
  word-break: keep-all;
  color: var(--hyoo-text);
}

/* review-card__quote와 동일한 여는/닫는 인용부호 패턴 추가(사용자 요청, "review-card__quote
   review-card__quote--open 처럼 추가", 2026-08-19). */
.symptom-bridge__quote {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--hyoo-accent-muted);
  line-height: 1;
}

.symptom-bridge__quote--open {
  margin-bottom: 8px;
}

.symptom-bridge__quote--close {
  text-align: right;
  margin-top: 8px;
}

/* ── 06. TREATMENT PROCESS ────────────────────────────────────── */
/* section-label 좌우에 장식선을 두는 이 섹션 전용 변형 — 참고 이미지(sample
   page.jpeg)에만 있던 스타일이라 section-label--divider로 별도 모디파이어 처리. */
.section-label--divider {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto 12px;
}

.section-label--divider::before,
.section-label--divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hyoo-border);
}

/* 카드 위 번호 타임라인 — 각 카드와 열을 맞춰 5등분 그리드로 정렬. */
.treatment-process__timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

.treatment-process__timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.treatment-process__timeline li::before {
  content: "";
  position: absolute;
  top: 41.5px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--hyoo-border);
  z-index: 0;
}

.treatment-process__timeline li:first-child::before {
  display: none;
}

.treatment-process__num {
  font-size: 18px;
  font-weight: 800;
  color: var(--hyoo-accent-dark);
}

.treatment-process__dot {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hyoo-accent-dark);
}

.treatment-process__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.treatment-process__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 14px;
  padding: 24px 14px 44px;
}

.treatment-process__item h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 10px;
}

.treatment-process__summary {
  position: relative;
  font-size: 12px;
  color: var(--hyoo-text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
  padding-top: 10px;
}

.treatment-process__summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: var(--hyoo-border);
}

.treatment-process__toggle {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hyoo-border);
  background: #fff;
  color: var(--hyoo-accent-dark);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.treatment-process__toggle:hover,
.treatment-process__toggle[aria-expanded="true"] {
  background: var(--hyoo-accent-dark);
  color: #fff;
  border-color: var(--hyoo-accent-dark);
}

.treatment-process__detail {
  margin-top: 8px;
  padding: 18px 22px;
  background: var(--hyoo-bg-soft);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--hyoo-text);
  word-break: keep-all;
}

.treatment-process__detail p {
  margin: 0;
}

/* ── 07. EXAMINATION SYSTEM ───────────────────────────────────── */
.examination-system__viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.examination-system__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.examination-system__track::-webkit-scrollbar {
  display: none;
}

/* 카드마다 제목 줄 수(1~2줄)가 달라 텍스트 영역 높이가 제각각이었음 — 카드를
   세로 flex로 바꾸고 이미지 영역을 flex:1로 나머지 공간을 채우게 해서, 카드 전체
   높이는 트랙의 기본 stretch로 맞추고 이미지가 남는 공간을 항상 꽉 채우도록 함
   (사용자 요청, "리스트 아이템의 이미지를 백그라운드 이미지로 처리하고 전체
   높이를 일관성을 줄려고 한다", 2026-08-19). */
.examination-card {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  flex: 0 0 320px;
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 16px;
  overflow: hidden;
}

/* 카드마다 제목/설명 줄 수가 달라 콘텐츠 영역 높이가 다르면, 이미지를
   flex:1(남는 공간 채우기)로 두는 이전 방식은 카드마다 "남는 공간"이 달라져
   이미지 높이가 제각각이었음(사용자 리포트, "리스트에 이미지가 경우에 따라
   높이가 달라지는데 높이가 같아지는 방향으로의 수정이 필요함", 2026-09-16) —
   이미지를 고정 높이로 바꾸고, 대신 콘텐츠 영역을 flex:1로 남는 공간을
   흡수하게 반전. 카드 전체 높이는 여전히 트랙의 기본 stretch로 통일되고,
   이미지 높이는 이제 모든 카드에서 항상 동일함. */
.examination-card__image {
  flex: none;
  height: 200px;
  background-size: cover;
  background-position: center;
}

.examination-card__content {
  flex: 1;
  padding: 22px;
}

/* 참고 이미지(sample page.jpeg)처럼 카드 제목 위 원형 뱃지 아이콘 — 처음엔
   display:none으로 숨겨뒀던 것을 사이트 스타일에 맞춰 새로 그려서 노출. */
.examination-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--hyoo-bg-soft);
  color: var(--hyoo-accent-dark);
}

.examination-card__icon svg {
  width: 24px;
  height: 24px;
}

.examination-card h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 10px;
  word-break: keep-all;
}

.examination-card p {
  font-size: 13px;
  color: var(--hyoo-text-muted);
  line-height: 1.7;
  margin: 0;
  word-break: keep-all;
}

.slider-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hyoo-border);
  background: #fff;
  color: var(--hyoo-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.slider-arrow:hover {
  background: var(--hyoo-accent-dark);
  color: #fff;
  border-color: var(--hyoo-accent-dark);
}

/* ── 08. TREATMENT PROGRAM ────────────────────────────────────── */
.treatment-program__list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.treatment-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.treatment-item--reverse .treatment-item__image {
  order: 2;
}

.treatment-item__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.treatment-item__number {
  display: block;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--hyoo-accent-muted);
  margin-bottom: 10px;
}

.treatment-item__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hyoo-accent-dark);
  margin: 0 0 10px;
}

.treatment-item__content h3 {
  font-size: 25px;
  font-weight: 800;
  margin: 0 0 14px;
}

.treatment-item__content > p {
  font-size: 15px;
  color: var(--hyoo-text-muted);
  line-height: 1.7;
  word-break: keep-all;
  margin: 0 0 18px;
}

.treatment-item__content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.treatment-item__content li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--hyoo-text);
  line-height: 2;
  word-break: keep-all;
}

/* 참고 이미지(sample page.jpeg, 틱장애 페이지 목업)의 원형 체크마크 뱃지 스타일을
   그대로 맞춤 — 단순 점(dot) 대신 체크 아이콘. */
.treatment-item__content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--hyoo-accent-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a87860' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

/* ── 09. RESEARCH EVIDENCE ────────────────────────────────────── */
.research-evidence__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}

.research-evidence__description {
  font-size: 15px;
  color: var(--hyoo-text-muted);
  line-height: 1.7;
  word-break: keep-all;
  margin: 12px 0 28px;
}

.research-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 12px;
  margin-bottom: 28px;
}

.research-result span {
  font-size: 15px;
  color: var(--hyoo-text-muted);
  width: 100%;
}

.research-result strong {
  font-size: 40px;
  font-weight: 800;
  color: var(--hyoo-accent-rose);
}

.research-result > small {
  display: block;
  width: 100%;
  font-size: 14px;
  color: var(--hyoo-text-soft);
  margin-top: 4px;
}

/* 출처 문구만 통계 박스(.research-result) 안에서 강조 배경색으로 남김(사용자
   요청, "출처만 강조영역으로 남기기") — 실험조건 캡션은 위 일반 텍스트로 분리
   (2026-08-19). 이후 전체 글자 크기 확대 + 중앙정렬 요청으로 폰트 크기업/
   text-align:center 추가(2026-08-19). */
.research-result__footnote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 14px 20px;
  background: rgba(184, 112, 96, 0.08);
  border-left: 3px solid var(--hyoo-accent-rose);
  border-radius: 8px;
}

.research-result__footnote small {
  font-size: 14px;
  color: var(--hyoo-text-soft);
  line-height: 1.6;
}

.research-evidence__features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.research-evidence__features li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 100px;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
}

.research-evidence__features-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--hyoo-bg-soft);
  color: var(--hyoo-accent-dark);
}

.research-evidence__features-icon svg {
  width: 18px;
  height: 18px;
}

.research-evidence__features strong {
  font-size: 14px;
  font-weight: 800;
}

.research-evidence__features span {
  color: var(--hyoo-text-muted);
}

.research-evidence__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  margin: 0 0 16px;
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--hyoo-text);
  line-height: 1.6;
  word-break: keep-all;
}

.research-evidence__note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hyoo-accent-dark);
  color: #fff;
  font-size: 12px;
}

.research-evidence__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
}

/* ── 10. FAQ ──────────────────────────────────────────────────── */
.disease-faq__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.disease-faq__item {
  background: #fff;
  border: 1px solid var(--hyoo-border);
  border-radius: 12px;
  padding: 18px 20px;
}

.disease-faq__item summary {
  display: flex;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}

.disease-faq__item summary::-webkit-details-marker {
  display: none;
}

.disease-faq__q {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--hyoo-accent-dark);
}

.disease-faq__q-text {
  flex: 1;
}

.disease-faq__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--hyoo-text-soft);
  transition: transform 0.2s;
}

.disease-faq__item[open] .disease-faq__chevron {
  transform: rotate(180deg);
}

.disease-faq__item p {
  margin: 14px 0 0 27px;
  font-size: 14px;
  color: var(--hyoo-text-muted);
  line-height: 1.7;
  word-break: keep-all;
}

/* FAQ 전체보기 링크 — /faq/?faq_cat=... 로 이동. .clinic-intro__more-link와 동일한
   시각 언어(작은 텍스트 + 화살표, 호버 시 화살표 이동)로 통일(사용자 요청,
   2026-08-19). */
.disease-faq__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hyoo-accent-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.disease-faq__more:hover {
  text-decoration: underline;
}

.disease-faq__more svg {
  transition: transform 0.15s;
}

.disease-faq__more:hover svg {
  transform: translateX(3px);
}

/* ── 11. CTA — 이미지가 섹션 전체 배경(실제 <img>, SEO 때문에 CSS 배경 대신 사용,
   위 마크업 주석 참고)이고 텍스트가 그 위에 얹히는 구조. ─────────────────────── */
/* 이 배경색은 이미지 로딩 전/실패 시 폴백용이라 평소엔 안 보이지만, .award-bridge와
   동일한 이유로 PATIENT REVIEW를 생략한 페이지(다한증 등)에서는 이 섹션이 짝수
   순번이 되어 #hyoo-full-design-page section:nth-of-type(even) 규칙에 조용히
   덮어써질 수 있어 미리 specificity를 맞춰둠(위 award-bridge 수정과 동일한 조치,
   2026-08-31). */
#hyoo-full-design-page section.disease-cta {
  position: relative;
  background: var(--hyoo-accent-dark);
  color: #fff;
  overflow: hidden;
}

.disease-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.disease-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 사진 위에 텍스트가 항상 읽히도록 어둡게 깔아주는 그라데이션 오버레이. */
.disease-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(37, 26, 20, 0.86) 0%,
    rgba(37, 26, 20, 0.72) 42%,
    rgba(37, 26, 20, 0.32) 75%,
    rgba(37, 26, 20, 0.1) 100%
  );
}

.disease-cta__layout {
  position: relative;
  z-index: 1;
}

.disease-cta__content {
  max-width: 560px;
}

.disease-cta__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.8;
  margin: 0 0 14px;
}

.disease-cta__content h2 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.5;
  word-break: keep-all;
  margin: 0 0 14px;
}

.disease-cta__content h2 em {
  font-style: normal;
  color: var(--hyoo-accent-light);
}

.disease-cta__content > p {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.6;
  word-break: keep-all;
  margin: 0 0 24px;
}

.disease-cta .button--primary {
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.disease-cta .button--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.disease-cta .button--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── FIXED BOTTOM CTA ─────────────────────────────────────────── */
/* 2026-08-19: 프로젝트 마지막 단계에서 제거 예정(사용자 요청) — 지금은 유지. */
.fixed-contact {
  /* sticky는 이 nav가 속한 컨테이너(문서 맨 끝) 안에서만 동작해서, 페이지 끝까지
	   스크롤해야 겨우 보이는 문제가 있었음(사용자 리포트) — 스크롤 위치와 무관하게
	   항상 화면 하단에 떠 있어야 하므로 fixed로 교체. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 40;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--hyoo-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.fixed-contact a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--hyoo-text);
  border-left: 1px solid var(--hyoo-border);
}

.fixed-contact a:first-child {
  border-left: none;
}

.fixed-contact__phone {
  background: #1e2a4a;
  color: #fff !important;
}

.fixed-contact__phone span {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}

.fixed-contact__phone strong {
  font-size: 14px;
}

.fixed-contact__call {
  background: var(--hyoo-accent-dark);
  color: #fff !important;
}

.fixed-contact__icon {
  width: 22px;
  height: 22px;
}

.fixed-contact__icon svg {
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════════════════════
   반응형 — CLAUDE.md 기준 360~1280px, 1024/768/480/360 분기.
   ══════════════════════════════════════════════════════════════ */

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

  .disease-hero__layout,
  .review-card,
  .research-evidence__layout {
    grid-template-columns: 1fr;
  }

  .review-card__content {
    padding: 24px;
  }

  .review-disclaimer {
    padding: 16px 20px;
  }

  .disease-hero__image {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }

  .treatment-item,
  .treatment-item--reverse {
    grid-template-columns: 1fr;
  }

  .treatment-item--reverse .treatment-item__image {
    order: 0;
  }

  /* 5개 항목을 3열 그리드에 넣으면 4/5번이 둘째 줄로 밀려 첫째 줄 숫자·점과
	   겹쳐 보이는 문제가 있어(사용자 리포트, "진료 과정의 숫자 표시되는 디자인에
	   문제가 있어 보인다") 타임라인은 768px 이하와 동일하게 숨기고 카드 목록만
	   3열로 유지 — 연결선 기반 타임라인은 한 줄에 다 들어갈 때만 의미가 있음
	   (2026-08-19). */
  .treatment-process__timeline {
    display: none;
  }

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

@media (max-width: 768px) {
  #hyoo-full-design-page section {
    padding: 48px 0;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .disease-hero__content h1 {
    font-size: 30px;
  }

  .treatment-process__list {
    grid-template-columns: 1fr;
  }

  .treatment-process__item {
    padding: 20px 18px 40px;
  }

  /* 모바일에서 문단 전체를 text-align:center로 뒀더니 여러 줄로 줄바꿈되는
     본문 텍스트가 가운데 정렬되어 오히려 읽기 불편했음(사용자 리포트,
     "문자 정렬 중간으로 오는데 좌 우 배치가 되어야 한다") — center 제거,
     기본 좌측정렬로 복귀. 데스크톱과 동일하게 여는 인용부호(좌측)/문단(좌측)/
     닫는 인용부호(우측, 아래 .symptom-bridge__quote--close 기본 규칙)가
     좌우로 자연스럽게 배치됨 — 별도 모바일 오버라이드 불필요. */
  .symptom-bridge {
    flex-direction: column;
  }

  /* 데스크톱은 좌우 배치라 이미지 좌측/blockquote 우측만 둥글렸는데, 모바일은
	   세로로 쌓이므로 이미지는 위쪽 두 모서리, blockquote는 아래쪽 두 모서리만
	   둥글게 재조정(2026-08-19). */
  .symptom-bridge img {
    width: 100%;
    border-radius: 14px 14px 0 0;
  }

  .symptom-bridge blockquote {
    border-radius: 0 0 14px 14px;
  }

  .examination-card {
    flex-basis: 260px;
  }

  .definition-card {
    min-height: 0;
  }

  /* 리드 문구에 하드코딩된 <br>로 줄이 나뉘어 있어서, width 지정 없이 max-width만
	   풀면 flex 자식이 가장 긴 줄 텍스트 너비만큼만 줄어들어(shrink-to-fit) 카드
	   오른쪽/아래로 배경 이미지가 그대로 노출되는 문제가 있었음(사용자 리포트,
	   "이미지나 영역 넘어감에 문제가 있어") — width:100%로 전체 폭을 채우도록
	   고침(2026-08-19). */
  .definition-card__content {
    width: 100%;
    margin: 0;
    max-width: none;
    background: rgba(250, 248, 246, 0.9);
  }

  /* 리드/보조 문단의 <br>은 데스크톱 카드 폭 기준으로 잡은 줄바꿈이라, 모바일
     폭에서는 그대로 두면 줄 길이가 들쭉날쭉해짐 — 숨기고 자연스러운 줄바꿈에
     맡김(사용자 요청, 2026-09-15). */
  .definition-card__content br {
    display: none;
  }

  .fixed-contact a {
    font-size: 11px;
    padding: 10px 4px;
  }

  .fixed-contact__phone strong {
    font-size: 12px;
  }

  /* 카드 콘텐츠(아이콘+타이틀+구분선+설명)가 한 줄에 다 안 들어가는 중간 폭
	   (대략 500~760px)에서 flex-wrap이 구분선까지만 첫 줄에 남기고 설명을 다음
	   줄로 넘겨 구분선이 허공에 떠 보이는 문제가 있었음(사용자 리포트, "반응형에서
	   award-bridge__divider 구간에 문제가 있어 보인다") — 768px 이하는 항상 세로
	   스택으로 고정해 그 불안정한 wrap 구간 자체를 없앰. 768px 초과에서는 한 줄에
	   전부 들어가는 걸 확인함(2026-08-19). */
  .award-bridge__card {
    flex-direction: column;
    padding: 24px 16px;
  }

  .award-bridge__title,
  .award-bridge__description {
    text-align: center;
  }

  .award-bridge__divider {
    width: 60px;
    height: 1px;
  }
}

/* 500px 이하부터 1열로(사용자 요청, 2026-09-15) — 다른 규칙은 CLAUDE.md 기준
   480px 분기를 그대로 쓰므로 이 선택자만 별도 breakpoint로 분리. */
@media (max-width: 500px) {
  .symptom-check__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .disease-hero__points {
    gap: 8px;
  }

  .disease-hero__actions .button,
  .disease-cta__buttons .button {
    flex: 1 1 auto;
  }
}

@media (max-width: 360px) {
  #hyoo-full-design-page .container,
  #hyoo-full-design-page .container--wide {
    padding: 0 14px;
  }

  .disease-hero__content h1 {
    font-size: 26px;
  }

  .examination-card {
    flex-basis: 220px;
  }

  .fixed-contact a strong {
    font-size: 10.5px;
  }
}

/* ══════════════════════════════════════════════════════════════
   지점 소개 (창원점 의료진 + 오시는 길) — 메인 홈 섹션(components/home/sections.php,
   원본 CSS는 assets/css/main.css)을 이 페이지에 그대로 재사용하기 위해 필요한
   .clinic-intro* 규칙만 복사해옴(사용자 요청, 2026-08-19). main.css 전체를 로드하면
   이 페이지와 무관한 홈 전용 CSS/JS까지 딸려오고, main.js는 홈 전용 DOM을 기대하는
   상호작용이 있어 함께 로드하면 부작용 위험이 있어 CSS만 이렇게 분리해서 가져옴 —
   원본이 바뀌면 이 블록도 같이 손봐야 함(두 곳 관리, 감수한 트레이드오프).
   ══════════════════════════════════════════════════════════════ */
/* #hyoo-full-design-page 접두어로 specificity를 올림 — `#hyoo-full-design-page section { padding: 72px 0; }`
   범용 규칙(id 셀렉터라 더 높은 우선순위)에 이 섹션의 30px 패딩이 조용히 덮여쓰여
   상하 72px(의도한 값의 2배 이상)로 늘어나 있던 문제 수정(사용자 리포트, "하단의
   여백인지 간격이 있다", 2026-08-19). */
#hyoo-full-design-page .clinic-intro {
  background: var(--hyoo-bg-soft);
  padding: 30px 20px;
}

.clinic-intro__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
}

.clinic-intro__photo {
  flex: 0 0 560px;
  order: 3;
  display: flex;
  flex-direction: column;
}

.clinic-intro__photo img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
  display: block;
}

.clinic-intro__divider {
  order: 2;
  flex-shrink: 0;
  align-self: stretch;
  width: 0;
  border-left: 1px solid var(--hyoo-border);
  border-radius: 999px;
}

.clinic-intro__info {
  flex: 1;
  min-width: 0;
  order: 1;
}

.clinic-intro__eyebrow {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--hyoo-accent-dark);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.clinic-intro__title,
.clinic-intro__photo-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--hyoo-text);
  letter-spacing: -0.5px;
  margin: 0 0 20px;
  word-break: keep-all;
}

.clinic-intro__doctors {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.clinic-intro__more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hyoo-accent-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.clinic-intro__more-link:hover {
  text-decoration: underline;
}

.clinic-intro__more-link svg {
  transition: transform 0.15s;
}

.clinic-intro__more-link:hover svg {
  transform: translateX(3px);
}

.clinic-intro__doctors li {
  font-size: 15px;
  color: var(--hyoo-text);
}

.clinic-intro__doctor-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1.5px solid var(--hyoo-accent-light);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hyoo-accent-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.clinic-intro__doctor-btn:hover {
  background: var(--hyoo-accent-dark);
  border-color: var(--hyoo-accent-dark);
  color: #fff;
}

.clinic-intro__address {
  font-size: 14px;
  color: var(--hyoo-text);
  line-height: 1.7;
  margin: 0 0 12px;
  word-break: keep-all;
}

.clinic-intro__address-row {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.clinic-intro__address-row--sub {
  font-weight: 400;
  color: var(--hyoo-text);
  font-size: 13px;
}

.clinic-intro__phone-line {
  font-size: 14px;
  color: var(--hyoo-text);
  margin: 0 0 32px;
}

.clinic-intro__phone-line a {
  color: var(--hyoo-text);
  font-weight: 700;
  text-decoration: none;
}

.clinic-intro__phone-line a:hover {
  color: var(--hyoo-accent-dark);
}

.clinic-intro__hours {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.clinic-intro__hours th,
.clinic-intro__hours td {
  text-align: left;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--hyoo-border);
}

.clinic-intro__hours th {
  width: 110px;
  font-weight: 700;
  color: var(--hyoo-text);
}

.clinic-intro__hours td {
  color: var(--hyoo-text);
}

.clinic-intro__hours-note {
  font-size: 12px;
  color: var(--hyoo-text);
  margin: 0 0 24px;
  word-break: keep-all;
}

.clinic-intro__map {
  margin: 0 0 24px;
}

.clinic-intro__map-link {
  display: block;
  line-height: 0;
}

.clinic-intro__map-link img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hyoo-border);
  border-radius: 8px 8px 0 0;
}

.clinic-intro__map-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--hyoo-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #fff;
}

.clinic-intro__map-foot img {
  display: block;
  height: 14px;
  width: auto;
}

.clinic-intro__map-foot a {
  font-size: 12px;
  color: var(--hyoo-text);
  text-decoration: none;
}

.clinic-intro__map-foot a:hover {
  color: var(--hyoo-accent-dark);
}

.clinic-intro__map-apps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 1024px) {
  .clinic-intro__inner {
    gap: 24px;
  }

  .clinic-intro__photo {
    flex: 0 0 380px;
  }
}

@media (max-width: 768px) {
  .clinic-intro__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .clinic-intro__photo {
    flex: none;
    order: 1;
    margin: 0 auto;
    max-width: 100%;
  }

  .clinic-intro__divider {
    order: 2;
    align-self: stretch;
    width: auto;
    height: 0;
    border-left: none;
    border-top: 1px solid var(--hyoo-border);
  }

  .clinic-intro__info {
    order: 3;
    width: 100%;
    text-align: left;
  }

  .clinic-intro__doctors {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  #hyoo-full-design-page .clinic-intro {
    padding: 24px 20px;
  }

  .clinic-intro__title,
  .clinic-intro__photo-title {
    font-size: 22px;
  }

  .clinic-intro__hours th {
    width: 90px;
  }
}

@media (max-width: 360px) {
  #hyoo-full-design-page .clinic-intro {
    padding: 20px 16px;
  }

  .clinic-intro__doctors {
    flex-direction: column;
    gap: 6px;
  }
}