/**
 * pages/tonic.css — 眞 보약 그룹 전용 부품 (.tn-*). 기본 틀(.di-*)은 css/pages/diet.css 가 먼저 로드됨.
 * 사진 상자는 그룹 기본 1:0.9(가운데 기준으로 잘라 채움), 준비 중 자리도 같은 비율.
 */
.tn-page .di-h2 em { font-style: normal; color: var(--primary); }
.tn-page .di-split-photo { aspect-ratio: 1 / .9; }
.tn-page .di-split-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tn-page .hd-photo-pending { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; width: 100%; aspect-ratio: 1 / .9; padding: 28px; border-radius: 24px; background: #EEF2F7; color: #526577; }
.tn-page .di-ch-1 .hd-photo-pending { border-radius: 100px 24px 24px 24px; }
.tn-page .hd-lead { margin-bottom: 22px; font-size: 1.1rem; }

/* 한자 표기(면역력 免疫力 · 기허 氣虛) — 카드 위 작은 명조 느낌 */
.tn-hanja { display: block; margin-bottom: 14px; font-size: 1.5rem; font-weight: 500; letter-spacing: .12em; line-height: 1; color: var(--primary); }

/* 01 3가지 치료 원칙 — 기본 틀 카드를 3열로, 글|사진 아래 */
.di-cards.tn-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }

/* 03 POINT 1~4 — 큰 번호 대신 작은 라벨 */
.tn-points .di-card-no { margin-bottom: 20px; font-size: .82rem; font-weight: 700; letter-spacing: .14em; color: var(--primary); }
.tn-points .di-card h3 { font-size: 1.2rem; }

/* 04 남색 띠 — 3항목 한 줄, 흰 테두리 링크 버튼 */
.di-process-list.tn-quality-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tn-band-btn { margin-top: 26px; border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff; }
.tn-band-btn:hover { background: #fff; border-color: #fff; color: #10233F; }

/* 05 보약이 필요한 6가지 상황 — 글|사진 아래 3열 체크 목록 */
.tn-when { list-style: none; margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid #DFE7ED; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; }
.tn-when li { display: flex; align-items: center; gap: 12px; font-size: 1.02rem; line-height: 1.6; color: var(--text-dark); word-break: keep-all; }
.tn-when i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--primary); border-radius: 5px; color: var(--primary); font-size: .85rem; }
/* 인용문(교통사고 .ac-quote 와 같은 모양 — 그룹 CSS 가 달라 여기서 정의) */
.tn-quote { margin: 24px 0 0; padding-left: 18px; border-left: 2px solid var(--primary); font-size: 1.05rem; font-weight: 600; line-height: 1.7; color: var(--primary); word-break: keep-all; }

/* 06·08 작용·목표 칩 묶음 — 작은 제목 + 가운데 체크 칩 */
.tn-acts { margin-top: 40px; text-align: center; }
.tn-acts h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: #10233F; }
.tn-acts .hd-routine-list { margin-top: 18px; }
.tn-acts .hd-routine-list li { font-size: 1rem; padding: 10px 20px; }

/* 07 추천 대상 — 연한 패널(글 | 번호 목록) */
.tn-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: clamp(32px, 4vw, 64px); align-items: center; padding: 48px 56px; border-radius: 28px; background: linear-gradient(135deg, #F7F9FC, #EEF3F8); }
.tn-panel-text { align-self: center; }   /* 글 칸은 사진·목록 높이 기준 세로 가운데 */
.tn-panel .di-h2 { margin-bottom: 20px; }
.tn-panel .di-p { margin: 0; }
.tn-reco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* 항목 사이에만 선 — 첫 항목 위, 마지막 항목 아래에는 선을 두지 않는다(2026-09-21) */
.tn-reco li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 16px 0; }
.tn-reco li + li { border-top: 1px solid #D9E3EC; }
.tn-reco-no { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--primary); }
.tn-reco p { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 1.6; color: #10233F; word-break: keep-all; }

/* 08 만성피로 — 두 가지 이유 카드 2열 + 목표 칩 */
.tn-fatigue-q { font-weight: 600; color: #10233F; }
.di-cards.tn-fatigue-causes { grid-template-columns: repeat(2, minmax(0, 1fr));  margin: 0 auto; }
.tn-fatigue-causes .di-card { padding: 36px 40px 40px;  text-align: center;}
.tn-fatigue-causes .di-card-no { margin-bottom: 14px; }
.tn-fatigue-causes .tn-hanja { font-size: 1.3rem; }

@media (max-width: 1023px) {
    .tn-panel { grid-template-columns: 1fr; padding: 40px 32px; gap: 28px; }
    .tn-when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .tn-page .di-ch-1 .hd-photo-pending { border-radius: 56px 20px 20px 20px; }
    .tn-page .hd-photo-pending { padding: 20px; }
    .tn-hanja { font-size: 1.25rem; margin-bottom: 10px; }
    .di-cards.tn-principles, .di-cards.tn-fatigue-causes { grid-template-columns: 1fr; margin-top: 32px; }
    .tn-principles .di-card, .tn-fatigue-causes .di-card { padding: 22px 0; display: block; }
    .tn-principles .di-card + .di-card::before, .tn-fatigue-causes .di-card + .di-card::before { display: none; }
    .tn-principles .di-card + .di-card, .tn-fatigue-causes .di-card + .di-card { border-top: 1px solid #DFE7ED; }
    /* 기본 틀의 모바일 카드는 큰 번호|글 2열이라 POINT 라벨 카드는 세로로 쌓음(제목이 44px 칸에 갇혀 글자별로 줄바꿈되던 문제) */
    .tn-points .di-card { display: block; padding: 22px 0; }
    .tn-points .di-card-no { margin-bottom: 8px; }
    .tn-points .di-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
    .di-process-list.tn-quality-list { grid-template-columns: 1fr; }
    .tn-when { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; padding-top: 20px; }
    .tn-when li { font-size: .98rem; }
    .tn-acts { margin-top: 28px; }
    .tn-acts .hd-routine-list li { font-size: .92rem; padding: 8px 14px; }
    .tn-panel { padding: 28px 22px; border-radius: 20px; }
    .tn-reco li { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 0; }
    .tn-reco p { font-size: .98rem; }
    .tn-fatigue-causes .di-card { padding: 22px 0; }
}

/* ── 그룹 나머지 페이지 부품 ── */
/* 생애주기: 보약 두 개 짝(한자 · 이름 · 설명) */
.tn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin-top: 28px; }
.tn-pair-item { padding-top: 18px; }
.tn-pair-item + .tn-pair-item { border-top: 1px solid #DFE7ED; }   /* 짝 사이에만 선 */
.tn-pair-item h3 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: #10233F; }
.tn-pair-item .di-p { margin: 0; font-size: .98rem; }
.tn-line-btns { flex: none; display: flex; flex-direction: column; gap: 10px; }
.tn-line-btns .di-btn { justify-content: space-between; white-space: nowrap; }
/* 왼쪽 정렬 칩·목록 묶음(글 칸 안) */
.tn-acts-left { margin-top: 28px; text-align: left; }
.tn-acts-left .hd-routine-list { justify-content: flex-start; }
.tn-acts-left .tn-reco { margin-top: 12px; }
.tn-reco p small { display: block; margin-top: 2px; font-size: .9rem; font-weight: 400; color: var(--text-mid); }
/* 카드 아래 강조 문단(교통사고 .ac-cause-note 와 같은 모양) */
.tn-note { max-width: 1100px; margin: 40px auto 0; text-align: center; font-size: 1.05rem; line-height: 1.8; color: var(--text-dark); word-break: keep-all; }
.tn-note strong { color: var(--primary); font-weight: 700; }
/* 남색 띠(가운데 머리 + 아래 칸들) — 교통사고 .ac-band 와 같은 모양 */
.tn-band { padding: 56px 48px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, #102D49, #175C80); }
.tn-band-head { text-align: center; margin-bottom: 36px; }
.tn-band .di-no { color: #A5D7E5; }
.tn-band-title { margin: 0 0 16px; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.4; word-break: keep-all; }
.tn-band-sub { max-width: 1100px; margin: 0 auto; font-size: 1.02rem; line-height: 1.8; color: #E0EAF0; word-break: keep-all; }
/* 성장보약: 띠 안 4단계에 설명 한 줄, 시기 카드의 나이 라벨 */
.tn-step-desc { font-size: .9rem; line-height: 1.65; color: #C9D8E3; word-break: keep-all; }
.tn-timing .di-card-no { font-size: 1.6rem; letter-spacing: -.02em; }
/* 산후보약: 남색 띠 STEP 3 (제목 + 항목 목록), 산후풍 원인 카드는 글|사진 아래 */
.tn-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tn-steps > li { padding: 28px 30px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); }
.tn-steps h3 { margin: 8px 0 16px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.tn-steps ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); display: flex; flex-direction: column; gap: 8px; }
.tn-steps ul li { display: flex; align-items: center; gap: 10px; font-size: .98rem; color: #E0EAF0; word-break: keep-all; }
.tn-steps ul i { flex: none; font-size: .8rem; color: #BFEAF1; }
.pp-causes { margin-top: 18px; }
.tn-areas { justify-content: flex-start; }
/* 유산보약: 글 칸 안 체크 목록 2열 */
.tn-when-inline { margin: 20px 0 22px; padding: 0; border: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
/* 태반약침: 큰 수치 */
.tn-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 8px; }
.tn-stat strong { padding: 0; background-image: none; font-family: 'Montserrat', sans-serif; font-size: 3rem; font-weight: 700; line-height: 1; color: #BFEAF1; }   /* 본문 굵은 글자의 펜 밑줄 띠는 끔 */
.tn-stat span { font-size: .95rem; line-height: 1.7; color: #E0EAF0; }
.pl-safe-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-safe-list .di-step-name { font-size: .95rem; }

@media (max-width: 1023px) {
    .tn-steps { grid-template-columns: 1fr; gap: 14px; }
    .tn-band { padding: 44px 32px; }
}
@media (max-width: 767px) {
    .tn-pair { grid-template-columns: 1fr; gap: 18px; margin-top: 20px; }
    .tn-when-inline { grid-template-columns: 1fr; }
    .tn-steps > li { padding: 22px 20px; }
    .tn-stat strong { font-size: 2.4rem; }
    .pl-safe-list { grid-template-columns: 1fr; }
    .tn-timing .di-card-no { font-size: 1.3rem; }
    .tn-note { margin-top: 28px; }
    .tn-band { padding: 32px 24px; border-radius: 20px; }
    .tn-band-head { text-align: left; margin-bottom: 28px; }
    .tn-line-btns { width: 100%; }
}

/* 생애주기별 케어 — 세 분류의 제목과 설명 위계 통일 */
.tn-life .tn-life-stage .di-h2 { margin-bottom: 0; font-size: clamp(1.8rem, 2.8vw, 2.65rem); line-height: 1.35; letter-spacing: -.03em; }
.tn-life .tn-life-stage .di-title-pre { margin-bottom: 12px; font-size: 1rem; line-height: 1.6; }
.tn-life .tn-pair { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 30px; }
.tn-life .tn-pair-item { padding-top: 22px; }
.tn-life .tn-pair-item h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 12px; font-size: 1.35rem; }
.tn-life .tn-pair-item .tn-hanja { margin: 0; font-size: .9rem; font-weight: 400; letter-spacing: .08em; color: #698091; }
.tn-life .tn-pair-item .di-p { font-size: 1.02rem; }
@media (max-width: 1023px) {
    .tn-life .tn-life-stage .di-split { gap: 28px; }
    .tn-life .tn-life-stage .di-split-text { display: contents; }
    .tn-life .tn-life-heading { order: 0; }
    .tn-life .tn-life-stage .di-split-photo { order: 1; }
    .tn-life .tn-pair { order: 2; margin-top: 0; }
}
@media (max-width: 767px) {
    .tn-life .tn-life-stage .di-h2 { font-size: clamp(1.65rem, 6.7vw, 2rem); }
    .tn-life .tn-life-stage .di-title-pre { font-size: .9rem; margin-bottom: 10px; }
    .tn-life .tn-life-stage .di-split { gap: 24px; }
    .tn-life .tn-pair { gap: 22px; }
    .tn-life .tn-pair-item { padding-top: 20px; }
    .tn-life .tn-pair-item h3 { font-size: 1.2rem; margin-bottom: 10px; }
    .tn-life .tn-pair-item .di-p { font-size: 1rem; }
}

/* 성장보약 — 추천 대상, 진료 과정, 연령별 안내 */
.tn-growth .gr-need .tn-acts { margin-top: 28px; margin-bottom: 28px; }
.tn-growth .gr-check-list li { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.tn-growth .gr-check-list i { color: var(--primary); font-size: 1rem; }
.tn-growth .gr-basis .di-card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; font-size: 1.4rem; }
.tn-growth .gr-basis .tn-hanja { margin: 0; font-size: .95rem; font-weight: 400; color: #698091; }
.tn-growth .gr-basis .di-ch-head .di-p, .tn-growth .gr-timing .di-ch-head .di-p { max-width: 800px; margin-inline: auto; }
.tn-growth .gr-program .di-band { display: block; }
.tn-growth .gr-program .di-band-text { max-width: 1100px; margin-inline: auto; text-align: center; }
.tn-growth .gr-program .di-process { margin-top: 36px; padding: 32px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
.tn-growth .gr-program .di-process h3 { text-align: center; }
.tn-growth .tn-program { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.tn-growth .tn-program li { border-top: 0; padding-top: 0; }
.tn-growth .tn-program .di-step-name { font-size: 1.12rem; font-weight: 600; }
.tn-growth .tn-program .tn-step-desc { line-height: 1.8; }
.tn-growth .gr-program .di-keys { margin-top: 32px; padding-top: 24px; justify-content: center; gap: 12px 28px; }
.tn-growth .gr-program .di-keys li { padding: 0; border: 0; border-radius: 0; background: none; color: #E0E9EF; }
/* 시기 타임라인 — 데스크톱은 점을 칸 가운데에 두고 첫 점~마지막 점 사이만 선으로 잇는 가운데 정렬(클리닉 진료 과정 띠와 같은 구조), 모바일은 왼쪽 세로 선 */
.tn-growth .gr-timeline { position: relative; list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tn-growth .gr-timeline::before { content: ''; position: absolute; top: 0; left: calc(16.667% - 6px); right: calc(16.667% - 6px); height: 2px; background: #D8E5EB; }
.tn-growth .gr-time-item { position: relative; padding: 30px 20px 0; text-align: center; }
.tn-growth .gr-time-item::before { content: ''; position: absolute; top: -6px; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 6px #fff; }
.tn-growth .gr-age { display: block; margin-bottom: 18px; color: var(--primary); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.tn-growth .gr-time-item h3 { margin: 0 0 12px; color: #10233F; font-size: 1.2rem; font-weight: 600; }
.tn-growth .gr-time-item p { max-width: 30ch; margin: 0 auto; font-size: 1rem; line-height: 1.85; color: var(--text-mid); word-break: keep-all; }
.tn-growth .gr-habit .di-p + .di-p { margin-top: 16px; }
.tn-growth .gr-habit-list li { display: block; padding: 20px 0; }
.tn-growth .gr-habit-list strong { font-size: 1.2rem; font-weight: 600; color: #10233F; }
.tn-growth .gr-habit-list small { margin-top: 8px; font-size: .98rem; }
@media (max-width: 1023px) {
    .tn-growth .tn-program { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (max-width: 767px) {
    .tn-growth .gr-program .di-band-text, .tn-growth .gr-program .di-process h3 { text-align: left; }
    .tn-growth .gr-program .di-process { margin-top: 28px; padding-top: 24px; }
    .tn-growth .tn-program { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .tn-growth .tn-program li { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.22); gap: 6px 16px; }
    .tn-growth .tn-program li:first-child { padding-top: 0; border-top: 0; }
    .tn-growth .tn-program .tn-step-desc { grid-column: 2; margin-top: 4px; }
    .tn-growth .gr-program .di-keys { justify-content: flex-start; gap: 14px; }
    .tn-growth .gr-program .di-keys li { align-items: flex-start; line-height: 1.7; }
    .tn-growth .gr-timeline { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
    .tn-growth .gr-timeline::before { display: none; }
    /* 세로 선은 배경 선(2px)으로 그려 첫 항목은 점부터, 마지막 항목은 점까지만 — 점 위·아래로 선이 삐져나오지 않게 */
    .tn-growth .gr-time-item { padding: 0 0 30px 26px; margin-left: 6px; text-align: left; background: linear-gradient(#D8E5EB, #D8E5EB) no-repeat 0 0 / 2px 100%; }
    .tn-growth .gr-time-item:first-child { background-position: 0 14px; background-size: 2px calc(100% - 14px); }
    .tn-growth .gr-time-item:last-child { background-size: 2px 14px; }
    .tn-growth .gr-time-item p { max-width: none; margin: 0; }
    .tn-growth .gr-time-item:last-child { padding-bottom: 0; }
    .tn-growth .gr-time-item::before { top: 8px; left: -5px; margin-left: 0; box-shadow: 0 0 0 4px #fff; }
    .tn-growth .gr-age { margin-bottom: 12px; font-size: 1.9rem; }
    .tn-growth .gr-habit-list li { padding: 18px 0; }
}

/* 산후보약 — 원인과 치료 목표를 구분하고 단계 안내를 연결 */
.tn-post .pp-principles { list-style: none; display: grid; gap: 12px; padding: 22px 0 0; margin: 24px 0 0; border-top: 1px solid #DFE7ED; }
.tn-post .pp-principles li { display: flex; align-items: baseline; gap: 12px; font-size: 1rem; line-height: 1.65; color: #10233F; }
.tn-post .pp-principles i, .tn-post .pp-goals i { flex: none; color: var(--primary); }
/* 03 아래 — 산후풍 원인 카드(번호형)와 치료 목표 상자. 작은 제목은 왼쪽 정렬로 카드와 축을 맞춘다 */
.tn-post .pp-causes-wrap { margin-top: 44px; }
.tn-post .pp-sub { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; color: #10233F; }
.tn-post .pp-sub::after { content: ''; flex: 1; height: 1px; background: #DFE7ED; }
.tn-post .pp-causes { margin-top: 0; text-align: left; border-top: 0; border-bottom: 0; }
.tn-post .pp-causes .di-card { padding: 26px 26px 0 0; }
.tn-post .pp-causes .di-card + .di-card { padding-left: 26px; }
.tn-post .pp-causes .di-card + .di-card::before { top: 30px; bottom: 4px; }
.tn-post .pp-causes .di-card-no { margin-bottom: 14px; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: var(--primary); }
.tn-post .pp-causes .di-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.tn-post .pp-causes .di-card p { font-size: .98rem; }
/* 치료 목표 — 왼쪽 라벨 | 오른쪽 항목 3개(빈 오른쪽 공간이 생기지 않게) */
.tn-post .pp-goals { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 36px; padding: 30px 36px; border-radius: 20px; background: #F2F6F8; }
.tn-post .pp-goals h3 { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.45; letter-spacing: -.02em; color: #10233F; }
.tn-post .pp-goals ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; list-style: none; padding: 0 0 0 32px; margin: 0; border-left: 1px solid #D5E0E7; }
.tn-post .pp-goals li { display: flex; align-items: baseline; gap: 10px; font-size: 1rem; line-height: 1.7; color: #10233F; word-break: keep-all; }
/* 데스크톱: 점을 칸 가운데, 첫 점~마지막 점 사이만 선. STEP·제목은 가운데 정렬, 항목 목록은 폭을 내용에 맞춰(fit-content) 가운데 두되 안에서는 왼쪽 정렬 → 플러스 아이콘이 세로로 나란히 */
.tn-post .tn-steps { position: relative; gap: 0; }
.tn-post .tn-steps::before { content: ''; position: absolute; top: 0; left: calc(16.667% - 4px); right: calc(16.667% - 4px); height: 1px; background: rgba(255,255,255,.35); }
.tn-post .tn-steps > li { position: relative; padding: 28px 16px 0; border: 0; border-radius: 0; background: none; text-align: center; }
.tn-post .tn-steps > li::before { content: ''; position: absolute; top: -4px; left: 50%; margin-left: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: #BFEAF1; }
.tn-post .tn-steps h3 { font-size: 1.5rem; margin-top: 12px; }
.tn-post .tn-steps ul { display: inline-flex; width: fit-content; max-width: 100%; margin: 0 auto; border-top: 0; padding-top: 4px; gap: 12px; text-align: left; align-items: flex-start; }
.tn-post .tn-steps ul li { align-items: baseline; }
/* 오로부절·오로불하 정의 두 줄 + 맺음말 — 줄 사이에만 선(첫 줄 위·마지막 줄 아래는 선 없음).
   마지막 span 은 맺음말(.pp-definition-note)이라 클래스가 다르므로 span 기준으로 규칙을 건다 */
.tn-post .pp-definitions { margin: 4px 0 24px; padding: 24px 28px; border: 0; border-radius: 20px; background: #F2F6F8; }   /* 용어 정의는 상자로 묶어 다음 본문과 구분 */
.tn-post .pp-definitions > span { display: block; margin: 0; padding: 16px 0; border: 0; }
.tn-post .pp-definitions > span:first-child { padding-top: 0; }
.tn-post .pp-definitions > span:last-child { padding-bottom: 0; }
.tn-post .pp-definitions > span + span { border-top: 1px solid #DCE5EB; }
.tn-post .pp-lochia .bs-features { margin-top: 24px; gap: 12px; }
.tn-post .pp-more .tn-panel { padding: 40px 0 0; border-top: 1px solid #DFE7ED; border-radius: 0; background: none; }
.tn-post .pp-more .di-btn { margin-top: 28px; }
.tn-post .pp-more .tn-acts { margin-top: 0; }
.tn-post .pp-more .tn-areas { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 20px; margin-top: 22px; }
.tn-post .pp-more .tn-areas li { justify-content: flex-start; padding: 18px 0; border: 0; border-bottom: 1px solid #DFE7ED; border-radius: 0; background: none; font-size: .98rem; }
.tn-post .pp-more .tn-areas li:nth-child(n+4) { border-bottom: 0; }   /* 3열이므로 마지막 줄(4~6번) 아래 선 없음 */
/* 공용 바우처의 구조를 유지하며 산후보약 페이지의 안내 위계만 조정 */
.tn-post .tn-voucher .di-h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.5; }
.tn-post .tn-voucher .bs-features { margin-top: 28px; padding-top: 22px; border-top: 1px solid #D9E3EC; gap: 18px; }
.tn-post .tn-voucher .bs-features i { color: var(--primary); }
@media (max-width: 1023px) {
    .tn-post .pp-intro .di-split-text { display: contents; }
    .tn-post .pp-intro-head { order: 0; }
    .tn-post .pp-intro .di-split-photo { order: 1; }
    .tn-post .pp-intro-body { order: 2; }
    .tn-post .pp-intro .hd-lead { margin-bottom: 0; }
    .tn-post .tn-steps::before { display: none; }
    .tn-post .tn-steps > li { padding: 0 0 32px 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%; }
    .tn-post .tn-steps > li:first-child { background-position: 0 10px; background-size: 1px calc(100% - 10px); }
    .tn-post .tn-steps > li:last-child { background-size: 1px 10px; }
    .tn-post .tn-steps > li:last-child { padding-bottom: 0; }
    .tn-post .tn-steps > li::before { top: 5px; left: -4px; margin-left: 0; }
    .tn-post .tn-steps ul { display: flex; width: auto; margin: 0; }
}
@media (max-width: 767px) {
    .tn-post .pp-intro .di-split { gap: 28px; }
    .tn-post .pp-causes-wrap { margin-top: 32px; }
    .tn-post .pp-causes .di-card { padding: 22px 0; }
    .tn-post .pp-causes .di-card + .di-card { padding-left: 0; }
    .tn-post .pp-causes .di-card-no { margin-bottom: 8px; }
    .tn-post .pp-goals { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; margin-top: 24px; }
    .tn-post .pp-goals h3 br { display: none; }
    .tn-post .pp-goals ul { padding: 18px 0 0; border-left: 0; border-top: 1px solid #D5E0E7; }
    .tn-post .pp-definitions { padding: 22px 20px; margin-bottom: 20px; }
    .tn-post .pp-goals ul { grid-template-columns: minmax(0,1fr); gap: 14px; padding-top: 16px; }
    .tn-post .pp-more .tn-areas { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .tn-post .pp-more .tn-areas li:nth-child(n+4) { border-bottom: 1px solid #DFE7ED; }
    .tn-post .pp-more .tn-areas li:nth-child(n+5) { border-bottom: 0; }   /* 2열이므로 마지막 줄은 5~6번 */
    .tn-post .pp-more .di-btn { width: 100%; justify-content: space-between; }
    .tn-post .tn-voucher .tn-panel { gap: 28px; }
    .tn-post .tn-voucher .di-h2 { font-size: 1.5rem; }
}

/* 성장 시기 · 산후관리 단계의 점에서 퍼지는 파장 */
.tn-growth .gr-time-item::after,
.tn-post .tn-steps > li::after {
    content: ''; position: absolute; box-sizing: border-box; border: 1px solid currentColor;
    border-radius: 50%; pointer-events: none; opacity: 0;
    animation: tn-dot-ripple 3s ease-out infinite;
    animation-delay: var(--tn-ripple-delay, 0s); animation-play-state: paused;
}
.tn-growth .gr-time-item::after { top: -6px; left: 50%; margin-left: -6px; width: 12px; height: 12px; color: var(--primary); }
.tn-post .tn-steps > li::after { top: -4px; left: 50%; margin-left: -4.5px; width: 9px; height: 9px; color: #BFEAF1; }
.tn-growth .gr-time-item:nth-child(2), .tn-post .tn-steps > li:nth-child(2) { --tn-ripple-delay: .4s; }
.tn-growth .gr-time-item:nth-child(3), .tn-post .tn-steps > li:nth-child(3) { --tn-ripple-delay: .8s; }
.tn-growth .gr-timeline.is-in .gr-time-item::after,
.tn-post .tn-band.is-in .tn-steps > li::after { animation-play-state: running; }
@keyframes tn-dot-ripple {
    0% { transform: scale(1); opacity: 0; }
    12% { opacity: .6; }
    80%, 100% { transform: scale(3.4); opacity: 0; }
}
@media (max-width: 1023px) {
    .tn-post .tn-steps > li::after { top: 5px; left: -4px; margin-left: 0; }
}
@media (max-width: 767px) {
    .tn-growth .gr-time-item::after { top: 8px; left: -5px; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .tn-growth .gr-time-item::after, .tn-post .tn-steps > li::after { animation: none; opacity: 0; }
}

/* 보약 소개 — 그룹의 다른 상세 페이지와 분리 */
.tn-intro .tn-principles .di-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.tn-intro .tn-principles .tn-hanja { font-size: .95rem; color: #698091; margin-bottom: 18px; }
.tn-intro .tn-metric { display: block; margin-bottom: 22px; color: var(--primary); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
.tn-intro .tn-quality .di-band { display: block; }
.tn-intro .tn-quality .di-band-text { max-width: 820px; margin-inline: auto; text-align: center; }
.tn-intro .tn-quality .di-process { margin-top: 32px; padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
.tn-intro .tn-quality .di-process h3 { text-align: center; margin-bottom: 24px; }
.tn-intro .tn-quality-list li { align-items: center; text-align: center; padding: 0 20px; border: 0; }
.tn-intro .tn-quality-list li + li { border-left: 1px solid rgba(255,255,255,.22); }
.tn-intro .tn-quality-list .di-step-name { font-size: 1.08rem; }
.tn-intro .tn-quality-action { text-align: center; }
.tn-intro .tn-when-sec .tn-when { grid-template-columns: minmax(0, 1fr); margin: 0 0 28px; padding: 24px 28px; border: 0; border-radius: 20px; background: #F2F6F8; gap: 12px; }
.tn-intro .tn-when-sec .tn-when li { align-items: flex-start; }
.tn-intro .tn-when-sec .tn-when i { margin-top: 2px; }
.tn-intro .tn-reco-sec .tn-reco li { grid-template-columns: 64px minmax(0,1fr); gap: 16px; padding: 20px 0; }
.tn-intro .tn-reco-label { color: var(--primary); font-weight: 700; font-size: 1.1rem; }
.tn-intro .tn-fatigue .di-ch-head > .di-p:not(.tn-fatigue-q) { text-align: left; max-width: 800px; margin: 24px auto; }
.tn-intro .tn-fatigue-causes { gap: 24px; border: 0; }
.tn-intro .tn-fatigue-causes .di-card { padding: 32px; border: 1px solid #D9E3EB; border-radius: 20px; text-align: left; }
.tn-intro .tn-fatigue-causes .di-card::before { display: none; }
.tn-intro .tn-fatigue-causes h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 1.5rem; }
.tn-intro .tn-fatigue-causes .tn-hanja { margin: 0; font-size: 1rem; color: #698091; }
.tn-intro .tn-fatigue .hd-routine-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 760px; margin-inline: auto; }
.tn-intro .tn-fatigue .hd-routine-list li { justify-content: center; border-radius: 10px; }
@media (max-width: 767px) {
    .tn-intro .tn-points .di-card { display: grid; grid-template-columns: 86px minmax(0,1fr); column-gap: 18px; }
    .tn-intro .tn-metric { grid-row: 1 / 3; margin: 0; font-size: 2rem; }
    .tn-intro .tn-points .di-card h3, .tn-intro .tn-points .di-card p { grid-column: 2; }
    .tn-intro .tn-quality .di-band-text { text-align: left; }
    .tn-intro .tn-quality .di-process h3 { text-align: left; }
    .tn-intro .tn-quality-list li { padding: 16px 0; text-align: left; }
    .tn-intro .tn-quality-list li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
    .tn-intro .tn-quality-list .di-step-name { font-size: 1rem; }
    .tn-intro .tn-quality-action .di-btn { width: 100%; justify-content: space-between; }
    .tn-intro .tn-when-sec .tn-when { padding: 24px 20px; margin-bottom: 28px; gap: 16px; }
    .tn-intro .tn-reco-sec .tn-reco li { grid-template-columns: 50px minmax(0,1fr); gap: 12px; padding: 16px 0; }
    .tn-intro .tn-reco-label { font-size: 1rem; }
    .tn-intro .tn-fatigue-causes { margin-top: 0; gap: 16px; }
    .tn-intro .tn-fatigue-causes .di-card { padding: 24px; }
    .tn-intro .tn-fatigue .hd-routine-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* ── 나머지 4 페이지 보정: 앞서 다듬은 소개·생애주기·성장·산후 페이지의 패턴을 따름 ── */
/* 공통 패턴: 카드 제목 옆 회색 한자 · 테두리 비교 카드 · 체크 행 목록(border-top, 브랜드색 체크) · 라벨 번호 목록 · 띠 가운데 세로 구성 */
.tn-misc .tn-principles .di-card h3, .tn-cm .tn-principles .di-card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; font-size: 1.4rem; }
.tn-misc .tn-principles .tn-hanja, .tn-cm .tn-principles .tn-hanja { margin: 0; font-size: .95rem; font-weight: 400; color: #698091; }
.tn-misc .ms-check, .tn-gj .gj-check { list-style: none; display: grid; gap: 12px; padding: 22px 0 0; margin: 24px 0 0; border-top: 1px solid #DFE7ED; }
.tn-misc .ms-check li, .tn-gj .gj-check li { display: flex; align-items: baseline; gap: 12px; font-size: 1rem; line-height: 1.65; color: #10233F; }
.tn-misc .ms-check i, .tn-gj .gj-check i { flex: none; color: var(--primary); }
.tn-misc .tn-reco-label, .tn-pl .tn-reco-label { color: var(--primary); font-weight: 700; font-size: 1.1rem; }
.tn-misc .ms-reco-list li, .tn-pl .tn-reco li { grid-template-columns: 100px minmax(0,1fr); gap: 16px; padding: 20px 0; }
/* 유산보약 */
.tn-misc .ms-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 24px; padding: 24px 28px; border: 0; border-radius: 20px; background: #F2F6F8; gap: 12px 20px; }
.tn-misc .ms-signs li { align-items: flex-start; }
.tn-misc .ms-signs i { margin-top: 2px; }
.tn-misc .ms-intro .hd-lead { margin-bottom: 0; }
.tn-misc .ms-intro-body { margin-top: 22px; }
.tn-misc .ms-care-list li { display: block; padding: 20px 0; }
.tn-misc .ms-care-list strong { font-size: 1.2rem; font-weight: 600; color: #10233F; }
.tn-misc .ms-care-list small { margin-top: 8px; font-size: .98rem; }
.tn-misc .ms-reco-list { margin-bottom: 24px; }
.tn-misc .tn-voucher .di-h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.5; }
.tn-misc .tn-voucher .bs-features { margin-top: 28px; padding-top: 22px; border-top: 1px solid #D9E3EC; gap: 18px; }
.tn-misc .tn-voucher .bs-features i { color: var(--primary); }
/* 공진단·경옥고: 생애주기와 같은 제목 위계(작은 안내줄 + 큰 제목), 비교 카드는 테두리형 */
.tn-gj .gj-stage .di-h2 { margin-bottom: 0; font-size: clamp(1.8rem, 2.8vw, 2.65rem); line-height: 1.35; letter-spacing: -.03em; }
.tn-gj .gj-stage .di-title-pre { margin-bottom: 12px; font-size: 1rem; line-height: 1.6; }
.tn-gj .gj-stage .hd-lead { margin-top: 22px; }
.tn-gj .tn-fatigue-causes { gap: 24px; border: 0; }
.tn-gj .tn-fatigue-causes .di-card { padding: 32px; border: 1px solid #D9E3EB; border-radius: 20px; text-align: left; }
.tn-gj .tn-fatigue-causes .di-card::before { display: none; }
.tn-gj .tn-fatigue-causes h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 1.5rem; }
.tn-gj .tn-fatigue-causes .tn-hanja { margin: 0; font-size: 1rem; color: #698091; }
/* 태반약침: 효능 카드 라벨 없이, 안전성 띠는 가운데 세로 구성 */
.tn-pl .di-ch-1 .di-split-photo { aspect-ratio: 1 / 1; }   /* 01 포스터는 1:1 (그룹 기본 1:0.9 대신) */
.tn-misc .di-ch-1 .di-split-photo { aspect-ratio: 1 / 1; }   /* 유산보약 01 원장 사진(1100×1100)은 1:1 */
.tn-pl .pl-effects .di-card h3 { font-size: 1.3rem; }
.tn-pl .pl-safe .di-band { display: block; }
.tn-pl .pl-safe .di-band-text { max-width: 820px; margin-inline: auto; text-align: center; }
.tn-pl .pl-safe .tn-stat { justify-content: center; grid-template-columns: auto minmax(0, 520px); text-align: left; margin-top: 16px; }
.tn-pl .pl-safe .di-keys { margin-top: 28px; padding-top: 22px; justify-content: center; gap: 12px 28px; }
.tn-pl .pl-safe .di-keys li { padding: 0; border: 0; border-radius: 0; background: none; color: #E0E9EF; }
.tn-pl .pl-safe .di-process { margin-top: 32px; padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
.tn-pl .pl-safe .di-process h3 { text-align: center; margin-bottom: 24px; }
.tn-pl .pl-safe-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.tn-pl .pl-safe-list li { align-items: center; text-align: center; padding: 0 20px; border: 0; }
.tn-pl .pl-safe-list li + li { border-left: 1px solid rgba(255,255,255,.22); }
.tn-pl .pl-safe-list .di-step-name { font-size: 1rem; }
@media (max-width: 1023px) {
    .tn-misc .ms-intro .di-split-text { display: contents; }
    .tn-misc .ms-intro-head { order: 0; }
    .tn-misc .ms-intro .di-split-photo { order: 1; }
    .tn-misc .ms-intro-body { order: 2; margin-top: 0; }
    .tn-pl .pl-safe-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
    .tn-pl .pl-safe-list li:nth-child(3) { border-left: 0; }
}
@media (max-width: 767px) {
    .tn-misc .ms-intro .di-split { gap: 28px; }
    .tn-misc .ms-signs { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 14px; }
    .tn-misc .ms-reco-list li, .tn-pl .tn-reco li { grid-template-columns: 70px minmax(0,1fr); gap: 12px; padding: 16px 0; }
    .tn-misc .tn-reco-label, .tn-pl .tn-reco-label { font-size: 1rem; }
    .tn-misc .tn-voucher .tn-panel { gap: 28px; }
    .tn-misc .tn-voucher .di-h2 { font-size: 1.5rem; }
    .tn-gj .gj-stage .di-h2 { font-size: clamp(1.65rem, 6.7vw, 2rem); }
    .tn-gj .gj-stage .di-title-pre { font-size: .9rem; margin-bottom: 10px; }
    .tn-gj .tn-fatigue-causes { margin-top: 0; gap: 16px; }
    .tn-gj .tn-fatigue-causes .di-card { padding: 24px; }
    .tn-pl .pl-safe .di-band-text, .tn-pl .pl-safe .di-process h3 { text-align: left; }
    .tn-pl .pl-safe .tn-stat { grid-template-columns: auto minmax(0, 1fr); justify-content: start; }
    .tn-pl .pl-safe .di-keys { justify-content: flex-start; gap: 10px 20px; }
    .tn-pl .pl-safe-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .tn-pl .pl-safe-list li { padding: 16px 0; text-align: left; align-items: flex-start; }
    .tn-pl .pl-safe-list li + li, .tn-pl .pl-safe-list li:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
}