/**
 * pages/clinic.css — 진료 클리닉 4 그룹(피부·신경정신·소화기·이비인후) 공용 보정 (.cl-*).
 * 기본 틀(.di-*, diet.css) 과 보약 부품(.tn-*, tonic.css: 한자 카드·체크 행·라벨 목록·연한 패널·남색 띠·인용·강조 문단) 을 그대로 쓰고 여기서는 클리닉 전용만.
 * 렌더러: includes/clinic-page.php
 */
.cl-page .di-h2 em { font-style: normal; color: var(--primary); }
/* 페이지별 보정 — 참사랑 피부질환 · 한포진 01 사진만 1:1 (그룹 기본 1:0.9 대신) */
.cl-skin-intro .di-ch-1 .di-split-photo,
.cl-skin-pompholyx .di-ch-1 .di-split-photo { aspect-ratio: 1 / 1; }
/* 건선 01 사진 — 유형 인포그래픽(1100×1100)이라 1:1 로 잘림 없이, 왼쪽 위 큰 곡선 대신 다른 섹션과 같은 곡선 */
.cl-skin-psoriasis .di-ch-1 .di-split-photo { aspect-ratio: 1 / 1; border-radius: 24px; }
/* 섹션별 사진 비율('photo_ratio') — 잘리면 안 되는 그림은 상자를 원본 비율에 맞춘다 */
.cl-photo-ratio .di-split-photo { aspect-ratio: var(--cl-photo-ratio); }
/* 체크 행 목록(산후보약 처방 원칙과 같은 모양) — 문단 사이에 두므로 위아래 여백 */
.cl-checks { margin: 24px 0; }
.cl-checks h3 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; color: #10233F; }
.cl-check { list-style: none; display: grid; gap: 12px; padding: 22px 0 0; margin: 0; border-top: 1px solid #DFE7ED; }
.cl-check li { display: flex; align-items: baseline; gap: 12px; font-size: 1rem; line-height: 1.65; color: #10233F; word-break: keep-all; }
.cl-check i { flex: none; color: var(--primary); }
/* 긴 체크 목록 2열('list_cols' => 2) — 한 칸이 300px 이상 나올 때만 2열(auto-fit). 좁으면 저절로 1열이라 항목이 두 줄로 꺾이지 않는다 */
.cl-check-2col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 24px; }
.cl-checks + .di-p { margin-top: 0; }
/* 글|사진 아래 전체 폭 체크 목록('list_pos' => 'below') — 칸이 340px 이상 나오는 만큼 여러 열(1600 폭에서 3열) */
.cl-checks-row { margin-top: 40px; }
.cl-checks-row .cl-checks { margin: 0; }
.cl-checks-row .cl-check { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); column-gap: 32px; }
/* 해시 칩 — 글 칸 안에 두면 좁아서 여러 줄이 되고 오른쪽 사진보다 아래로 넘친다. 글|사진 아래 전체 폭에 가운데 정렬 */
.cl-chips-row { margin-top: 36px; }
.cl-chips { justify-content: center; }
/* 글만 있는 섹션 */
.cl-nophoto { grid-template-columns: minmax(0, 1fr); }
.cl-nophoto .di-split-text { max-width: 900px; }
/* 카드: 제목 옆 회색 한자(성장 원리 카드), 3장·4장 */
.cl-cards .di-card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; font-size: 1.35rem; }
.cl-cards .tn-hanja { margin: 0; font-size: .95rem; font-weight: 400; color: #698091; }
/* 카드 열 수는 항목 수에 맞춘다(1200px 이상). 5·6개는 3열 2줄 — 둘째 줄 첫 카드의 세로 구분선은 지우고 가로 선으로 잇는다.
   1199px 이하는 기본 틀(diet.css)의 2열 → 767px 이하 1열 규칙을 그대로 따른다. */
@media (min-width: 1200px) {
    .di-cards.cl-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .di-cards.cl-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .di-cards.cl-cards-5, .di-cards.cl-cards-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cl-cards-5 .di-card:nth-child(4)::before, .cl-cards-6 .di-card:nth-child(4)::before { display: none; }
    .cl-cards-5 .di-card:nth-child(n+4), .cl-cards-6 .di-card:nth-child(n+4) { border-top: 1px solid #DFE7ED; }
    /* 7·8개는 기본 4열 그대로 두고 둘째 줄만 정리 */
    .cl-cards-7 .di-card:nth-child(5)::before, .cl-cards-8 .di-card:nth-child(5)::before { display: none; }
    .cl-cards-7 .di-card:nth-child(n+5), .cl-cards-8 .di-card:nth-child(n+5) { border-top: 1px solid #DFE7ED; }
}
/* 번호형 카드('numbered' => true) — 산후보약 산후풍 원인 카드와 같은 모양. 모바일은 기본 틀의 44px 번호 칸을 그대로 쓴다 */
.cl-cards-num .di-card-no { margin-bottom: 14px; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: var(--primary); }
.cl-cards-num .di-card h3 { font-size: 1.2rem; }
.cl-cards-sec .di-ch-head .di-p { max-width: 1100px; margin-inline: auto; }
/* 남색 띠 단계 — 점을 칸 가운데에 두고 첫 점~마지막 점 사이만 선으로 잇는다(성장 05·산후 04 타임라인과 같은 구조).
   점에서는 파장이 순서대로 퍼진다(tonic.css 의 tn-dot-ripple 재사용). 칸 수에 따라 첫·마지막 점까지의 여백 --cl-edge */
.cl-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.cl-steps::before { content: ''; position: absolute; top: 0; left: calc(var(--cl-edge, 12.5%) - 4px); right: calc(var(--cl-edge, 12.5%) - 4px); height: 1px; background: rgba(255,255,255,.35); }
.cl-steps-2 { --cl-edge: 25%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-steps-3 { --cl-edge: 16.667%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-steps-4 { --cl-edge: 12.5%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-steps-5 { --cl-edge: 10%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cl-steps > li { position: relative; padding: 28px 16px 0; text-align: center; }
.cl-steps > li::before { content: ''; position: absolute; top: -4px; left: 50%; margin-left: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: #BFEAF1; }
.cl-steps > li::after {
    content: ''; position: absolute; top: -4px; left: 50%; margin-left: -4.5px; width: 9px; height: 9px; box-sizing: border-box;
    border: 1px solid currentColor; border-radius: 50%; color: #BFEAF1; pointer-events: none; opacity: 0;
    animation: tn-dot-ripple 3s ease-out infinite; animation-delay: var(--cl-ripple-delay, 0s); animation-play-state: paused;
}
.cl-steps > li:nth-child(2) { --cl-ripple-delay: .3s; }
.cl-steps > li:nth-child(3) { --cl-ripple-delay: .6s; }
.cl-steps > li:nth-child(4) { --cl-ripple-delay: .9s; }
.cl-steps > li:nth-child(5) { --cl-ripple-delay: 1.2s; }
.tn-band.is-in .cl-steps > li::after { animation-play-state: running; }
.cl-steps h3 { margin: 10px 0 10px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: #fff; word-break: keep-all; }
.cl-steps p { max-width: 30ch; margin: 0 auto; font-size: .95rem; line-height: 1.75; color: #E0EAF0; word-break: keep-all; }
@media (prefers-reduced-motion: reduce) { .cl-steps > li::after { animation: none; opacity: 0; } }
/* 남색 띠 아래 맺음말 — 띠 안은 가운데 정렬이므로 맺음말도 가운데(모바일은 왼쪽) */
.tn-band-note { max-width: 760px; margin: 32px auto 0; padding-top: 24px; text-align: center; font-size: .98rem; line-height: 1.8; color: #C8DCE6; word-break: keep-all; }

/* 연한 패널 라벨 목록 */
.cl-reco li { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
.cl-reco .tn-reco-label { color: var(--primary); font-weight: 700; font-size: 1.1rem; word-break: keep-all; }
.cl-reco p small { display: block; margin-top: 4px; font-size: .95rem; font-weight: 400; color: var(--text-mid); }

@media (max-width: 1023px) {
    .cl-steps-4, .cl-steps-5 { --cl-edge: 25%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .cl-skin-psoriasis .di-ch-1 .di-split-photo { border-radius: 20px; }
    .cl-chips-row { margin-top: 24px; }
    .cl-checks-row { margin-top: 28px; }
    .cl-checks { margin: 18px 0; }
    .cl-check { gap: 10px; padding-top: 16px; }
    .cl-cards .di-card { padding: 22px 0; display: block; }
    .cl-cards-num .di-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
    .cl-cards-num .di-card-no { margin-bottom: 8px; }
    .cl-cards .di-card + .di-card::before { display: none; }
    .cl-cards .di-card + .di-card { border-top: 1px solid #DFE7ED; }
    /* 모바일: 왼쪽 세로 선(첫 점부터 마지막 점까지만, 배경 선으로 그려 점을 넘지 않게) + 왼쪽 정렬 */
    .cl-steps, .cl-steps-2, .cl-steps-3, .cl-steps-4, .cl-steps-5 { grid-template-columns: 1fr; gap: 0; }
    .cl-steps::before { display: none; }
    .cl-steps > li { padding: 0 0 24px 26px; margin-left: 4px; text-align: left; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)) no-repeat 0 0 / 1px 100%; }
    .cl-steps > li:first-child { background-position: 0 10px; background-size: 1px calc(100% - 10px); }
    .cl-steps > li:last-child { padding-bottom: 0; background-size: 1px 10px; }
    .cl-steps > li::before, .cl-steps > li::after { top: 5px; left: -4px; margin-left: 0; }
    .cl-steps p { max-width: none; margin: 0; }
    .tn-band-note { margin-top: 24px; padding-top: 20px; text-align: left; }
    .cl-reco li { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 16px 0; }
    .cl-reco .tn-reco-label { font-size: .95rem; }
}