@charset "UTF-8";
/* =============================================================================
   진료안내 · 치료안내 — Clinic 과 Treatment 가 이 파일 하나를 공유한다.
   ========================================================================== */

/* ── 진료과목 그룹별 페이지헤드 텍스처 (진료과목 상세 10개, 그룹별로 배정)
   About 인사말에서 검증한 스타일(기하학적 면 분할, 실크·패브릭 질감 금지)을
   그대로 따르되 그룹 색만 바꿨다. .entry-a 와 함께 쓴다 (기준 §4 Type A).
   background-color 를 쓰지 않고 background-image 만 쓴다 — 채색 블록 예산
   (≤3/페이지, layout-audit.mjs 는 backgroundColor 만 검사)에 잡히지 않으면서도
   이미지 자체는 그대로 보인다. */
.entry-a--rehab  { background-image: url('/www/assets/img/clinic-head-rehab.webp'); background-size: cover; background-position: center; }
.entry-a--immune { background-image: url('/www/assets/img/clinic-head-immune.webp'); background-size: cover; background-position: center; }
.entry-a--foot   { background-image: url('/www/assets/img/clinic-head-foot.webp'); background-size: cover; background-position: center; }

/* ── 치료안내(Treatment) 3페이지 전용 텍스처 — 같은 스타일, 앰버 톤 ── */
.entry-a--treatment { background-image: url('/www/assets/img/treatment-head-bg.webp'); background-size: cover; background-position: center; }

/* ── 과목 카드 ────────────────────────────────────────────────────────── */
.disease-card { display: flex; flex-direction: column; }
.disease-card .card-text { flex: 1; }
.disease-card .card-title { font-size: 18px; }
.disease-card .gmark { margin-bottom: var(--sp-12); }
.disease-card .badge { align-self: flex-start; }

/* ── 상세 포인트 카드 ─────────────────────────────────────────────────── */
.point-card .gmark { margin-bottom: var(--sp-16); }
.point-card .card-title { font-size: 17px; }

/* ── 치료 프로그램 목록 (Treatment) ───────────────────────────────────── */
.program-list { display: grid; gap: var(--sp-16); }
@media (min-width: 768px) { .program-list { grid-template-columns: repeat(2, 1fr); } }

.program { display: flex; flex-direction: column; }
.program .program-tag {
    align-self: flex-start;
    font-size: 11px; font-weight: var(--fw-medium);
    letter-spacing: var(--tk-eyebrow-en); text-transform: uppercase;
    color: var(--violet); margin-bottom: var(--sp-12);
}
.program .card-title { font-size: 18px; }
.program .card-text { flex: 1; }
.program .program-where { margin-top: var(--sp-16); font-size: 13px; color: var(--ash); }

/* ── 검사·장비 (Treatment exam) ───────────────────────────────────────── */
.device-grid { display: grid; gap: var(--sp-16); }
@media (min-width: 768px) { .device-grid { grid-template-columns: repeat(2, 1fr); } }
.device-note { font-size: 13px; color: var(--ash); margin-top: var(--sp-8); }

/* ── 추나요법 (Treatment chuna) ───────────────────────────────────────── */
.chuna-intro { max-width: 860px; }

/* 신연기법 설명 — 카드·채색 없이 좌측 선으로만 한 단계 들여 읽히게 한다 */
.chuna-note { padding: var(--sp-4) 0 var(--sp-4) var(--sp-24); border-left: 2px solid var(--violet); }
.chuna-note-label {
    font-size: 12px; font-weight: var(--fw-medium);
    letter-spacing: var(--tk-eyebrow-ko); color: var(--violet);
    margin-bottom: var(--sp-12);
}

.technique-card .gmark { margin-bottom: var(--sp-16); }
.technique-card .card-title { font-size: 17px; }

/* 증상 목록 — 넓은 화면에서는 2단 */
@media (min-width: 768px) {
    .symptom-list { columns: 2; column-gap: var(--sp-32); }
    .symptom-list li { break-inside: avoid; }
    .symptom-list li:first-child { margin-top: 0; }
}

/* 정리 — 테두리·배경 없이 번호와 문장만 (Principle Card 준용) */
.summary-points { display: grid; gap: var(--sp-24); }
@media (min-width: 768px) { .summary-points { grid-template-columns: repeat(3, 1fr); gap: var(--sp-32); } }

.summary-point { padding-top: var(--sp-16); border-top: 2px solid var(--violet); }
.summary-no {
    display: block; font-size: 12px; letter-spacing: var(--tk-eyebrow-en);
    color: var(--ash); margin-bottom: var(--sp-12);
    font-variant-numeric: tabular-nums;
}
.summary-point p { font-size: 16px; line-height: var(--lh-body); color: var(--ink); }

/* ── 상세 본문 영역 ───────────────────────────────────────────────────── */
.clinic-detail-section .split-media img { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .clinic-detail-section .split-media img { aspect-ratio: 1 / 1; } }