/**
 * content/structured-page.css — 구조화 서브페이지(Page Contract) 전용 스타일
 * 렌더러: templates/content/structured-page.php  (클래스 접두어 sp-)
 * 색·간격은 hospital.css 의 CSS 변수를 사용하므로 브랜드 컬러 교체 시 함께 바뀐다.
 */

.sp-inner { max-width: 960px; }
.sp-article { font-size: 1rem; line-height: 1.8; color: var(--text-dark); word-break: keep-all; }

/* ── 헤더 · 바이라인 ── */
.sp-head { padding: 24px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.sp-kicker { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-light); margin-bottom: 10px; }
.sp-title { font-size: 2.1rem; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 14px; }
.sp-byline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--text-light); margin: 0; }
.sp-byline-item em { font-style: normal; color: var(--text-mid); margin-left: 3px; }
.sp-byline-label { display: inline-block; font-size: .7rem; font-weight: 700; color: var(--white); background: var(--text-light); border-radius: 3px; padding: 1px 6px; margin-right: 5px; vertical-align: 1px; }

/* ── 핵심 요약 ── */
.sp-summary { background: var(--bg-section); border-radius: var(--radius-sm); padding: 20px 24px; margin-bottom: 28px; }
.sp-summary-title { font-size: .92rem; font-weight: 500; color: var(--primary); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.sp-summary-title i { color: var(--secondary); }
.sp-summary-body p { margin: 0 0 6px; font-size: 1.02rem; }
.sp-summary-body p:last-child { margin-bottom: 0; }

/* ── 목차 ── */
.sp-toc { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 36px; background: var(--white); }
.sp-toc-title { font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--text-light); margin: 0 0 10px; }
.sp-toc-list { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.sp-toc-list li { break-inside: avoid; margin: 4px 0; font-size: .94rem; }
.sp-toc-list li.sp-toc-l3 { list-style: none; margin-left: 14px; font-size: .88rem; color: var(--text-mid); }
.sp-prose h2 { scroll-margin-top: calc(var(--header-height) + 20px); }
.sp-prose h3, .sp-prose h4 { scroll-margin-top: calc(var(--header-height) + 20px); }
.sp-prose h4 { font-size: 1rem; font-weight: 700; margin: 18px 0 6px; }
.sp-toc-list a { color: var(--text-dark); text-decoration: none; }
.sp-toc-list a:hover { color: var(--primary); text-decoration: underline; }

/* ── 목차 · 관련 키워드 오른쪽 고정 (데스크톱 1200 이상, 2026-09-30 사용자 요청 — 스크롤해도 오른쪽에 따라다니는 목차)
   목차·키워드 묶음(aside.sp-side, templates/content/structured-page.php)이 있는 글만(:has — 지원 안 하는 옛 브라우저는 본문 위에 그대로).
   본문 | 오른쪽 칸 두 칸, 오른쪽 칸은 머리 아래에 붙어 따라온다. 지금 읽는 소제목은 js/site/toc-follow.js 가 .is-active 로 표시 */
@media (min-width: 1200px) {
    .sp-page .sp-inner:has(.sp-side) { max-width: 1440px; padding-right: max(20px, min(115px, calc(115px - (100vw - 1440px) / 2))); }   /* 사이트 공통 폭(헤더·목록과 같은 1440). 오른쪽 고정 퀵메뉴(폭 95 + 여백)가 목차를 가리지 않게 — 약 1620px 이상이면 기본 20px */
    .sp-article:has(> .sp-side) { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 56px; align-items: start; }
    .sp-article:has(> .sp-side) > * { grid-column: 1; min-width: 0; }
    .sp-article > .sp-side {
        grid-column: 2; grid-row: 1 / span 40;   /* 본문 칸의 모든 줄에 걸쳐 두어야 sticky 가 글 끝까지 따라간다 */
        position: sticky; top: calc(var(--header-height) + 28px);
        max-height: calc(100vh - var(--header-height) - 56px); overflow-y: auto;
        padding: 4px 0 4px 20px; border-left: 1px solid var(--border);
    }
    .sp-side > .sp-toc { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
    .sp-side .sp-toc-title, .sp-side .sp-keywords-title { margin-bottom: 14px; letter-spacing: .06em; }
    .sp-side .sp-toc-list { columns: 1; padding-left: 0; list-style: none; }
    .sp-side .sp-toc-list li { margin: 0; font-size: .9rem; line-height: 1.5; }
    .sp-side .sp-toc-list li.sp-toc-l3 { margin-left: 14px; font-size: .84rem; }
    .sp-side .sp-toc-list a { position: relative; display: block; padding: 7px 0; color: var(--text-mid); transition: color .2s; }
    .sp-side .sp-toc-list a:hover { color: var(--primary); text-decoration: none; }
    .sp-side .sp-toc-list a.is-active { color: var(--primary); font-weight: 700; }
    .sp-side .sp-toc-list a.is-active::before { content: ''; position: absolute; left: -21px; top: 6px; bottom: 6px; width: 2px; background: var(--primary); }   /* 왼쪽 세로선 위에 현재 위치 표시 */
    .sp-side > .sp-toc + .sp-keywords { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--border); }
}

/* 관련 키워드 칩 (사이트 디자인) — 진료·서비스 페이지로 이어지는 말만 링크(남색), 지역·기타는 링크 없는 회색 글자 칩 (2026-09-30) */
.sp-keywords { margin: -16px 0 36px; }
.sp-side > .sp-keywords:first-child { margin-top: 0; }
.sp-keywords-title { margin: 0 0 12px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--text-light); }
.sp-keywords-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-keywords-list a, .sp-kw-text { display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: .8rem; line-height: 1.4; color: var(--text-mid); text-decoration: none; }
.sp-keywords-list a { color: var(--primary); border-color: #C9D6E8; background: #F3F7FC; transition: border-color .2s, color .2s, background .2s; }
.sp-keywords-list a:hover { color: #fff; background: var(--primary); border-color: var(--primary); }
.sp-kw-text { background: #F7F8FA; color: #6B7482; }

/* ── 섹션 ── */
.sp-section { margin-bottom: 44px; scroll-margin-top: calc(var(--header-height) + 20px); }
.sp-h2 { font-size: 1.45rem; font-weight: 800; line-height: 1.4; color: var(--primary); margin: 0 0 14px; padding-top: 6px; }
.sp-h2--small { font-size: 1.15rem; }
.sp-h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin: 22px 0 8px; }
.sp-sub { scroll-margin-top: calc(var(--header-height) + 20px); }
.sp-prose p { margin: 0 0 12px; }
.sp-prose strong { color: var(--primary); }
.sp-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.sp-list { margin: 8px 0 14px; padding-left: 20px; }
.sp-list li { margin: 4px 0; }
/* 본문 목록 기호 — 사이트 전역 리셋(ul,ol list-style:none)을 글 본문에서만 되살림 (2026-09-30: 이관 칼럼·샘플 글의 점·번호가 안 보이던 것) */
.sp-prose ul.sp-list { list-style: disc; padding-left: 22px; }
.sp-prose ol.sp-list { list-style: decimal; padding-left: 24px; }
.sp-prose .sp-list ul { list-style: circle; padding-left: 20px; }
.sp-prose .sp-list ol { list-style: lower-alpha; padding-left: 22px; }
.sp-prose .sp-list li::marker { color: var(--primary); }
.sp-prose ul.sp-list--check { list-style: none; }

/* 표 (비교·수치 — GEO-11) */
.sp-table-wrap { overflow-x: auto; margin: 14px 0 18px; }
.sp-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 480px; }
.sp-table caption { caption-side: top; text-align: left; font-size: .82rem; color: var(--text-light); padding: 0 0 8px; }
.sp-table th, .sp-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.sp-table thead th { background: var(--bg-section); font-weight: 700; color: var(--text-dark); white-space: nowrap; }
.sp-table tbody th { background: var(--bg-light); font-weight: 600; white-space: nowrap; }

/* 이미지 */
.sp-figure { margin: 16px 0 20px; }
.sp-figure img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.sp-figure figcaption { font-size: .82rem; color: var(--text-light); margin-top: 8px; text-align: center; }

/* ── FAQ (details) ── */
.sp-faq { margin: 8px 0 44px; scroll-margin-top: calc(var(--header-height) + 20px); }
.sp-faq-list { border-top: 2px solid var(--primary); }
.sp-faq-item { border-bottom: 1px solid var(--border); }
.sp-faq-q { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 16px 40px 16px 8px; font-weight: 700; font-size: 1.02rem; position: relative; }
.sp-faq-q::-webkit-details-marker { display: none; }
.sp-faq-q::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 12px; top: 18px; color: var(--text-light); transition: transform var(--transition); }
.sp-faq-item[open] .sp-faq-q::after { transform: rotate(180deg); }
.sp-faq-item[open] .sp-faq-q { color: var(--primary); }
.sp-faq-a { display: flex; gap: 12px; padding: 0 40px 18px 8px; color: var(--text-mid); }
.sp-faq-mark { flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; background: var(--primary); color: var(--white); margin-top: 2px; }
.sp-faq-a .sp-faq-mark { background: var(--secondary); }

/* ── 출처 · 관련 ── */
.sp-sources { margin-bottom: 36px; }
.sp-sources-list { padding-left: 22px; font-size: .9rem; margin: 0; }
.sp-sources-list li { margin: 6px 0; }
.sp-sources-list a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.sp-source-meta { color: var(--text-light); }
.sp-related { margin-bottom: 36px; }
.sp-related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sp-related-list a { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dark); text-decoration: none; font-weight: 600; font-size: .94rem; transition: border-color var(--transition), color var(--transition); }
.sp-related-list a:hover { border-color: var(--primary); color: var(--primary); }
.sp-related-list i { color: var(--secondary); font-size: 1.2rem; }

/* ── 작성자 ── */
.sp-author { display: grid; gap: 14px; margin: 8px 0 28px; }
.sp-author-card { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-light); border-radius: var(--radius-md); padding: 18px 20px; }
.sp-author-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; flex: 0 0 72px; }
.sp-author-photo--empty { display: inline-flex; align-items: center; justify-content: center; background: var(--border); color: var(--white); font-size: 2rem; }
.sp-author-role { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--secondary); margin: 0 0 4px; }
.sp-author-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.sp-author-name em { font-style: normal; font-weight: 500; color: var(--text-mid); margin-left: 6px; font-size: .9rem; }
.sp-author-name a { color: inherit; text-decoration: none; }
.sp-author-cred { font-size: .84rem; color: var(--text-mid); margin: 0 0 4px; }
.sp-author-bio { font-size: .88rem; color: var(--text-light); margin: 0; }

.sp-disclaimer { font-size: .8rem; color: var(--text-light); border-top: 1px dashed var(--border); padding-top: 14px; margin: 0 0 40px; }

/* ── CTA ── */
.sp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: var(--primary); color: var(--white); border-radius: var(--radius-lg); padding: 30px 34px; margin: 10px 0 20px; }
.sp-cta-title { font-size: 1.35rem; font-weight: 500; margin: 0 0 6px; color: var(--white); }
.sp-cta-desc { margin: 0; opacity: .85; font-size: .95rem; }
.sp-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-cta .btn-outline { border-color: rgba(255,255,255,.6); color: var(--white); }
.sp-cta .btn-outline:hover { background: rgba(255,255,255,.12); }
.sp-cta .btn-primary { background: var(--secondary); border-color: var(--secondary); color: #fff; }

/* ── 반응형 ── */
@media (max-width: 767px) {
    .sp-title { font-size: 1.6rem; }
    .sp-h2 { font-size: 1.22rem; }
    .sp-toc-list { columns: 1; }
    .sp-summary { padding: 16px 18px; }
    .sp-cta { padding: 24px 20px; }
    .sp-cta-actions { width: 100%; }
    .sp-cta-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── 글 끝 '목록으로' (뼈대 templates/content/blocks/back.php, 2026-10-01 사용자) ── */
.sp-back { display: flex; justify-content: center; margin: 0 0 40px; }
.sp-back-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border: 1px solid var(--border); border-radius: 999px; background: var(--white, #fff); color: var(--text-dark); text-decoration: none; font-weight: 600; font-size: .95rem; transition: border-color var(--transition), color var(--transition); }
.sp-back-link:hover { border-color: var(--primary); color: var(--primary); }
.sp-back-link i { font-size: 1.15rem; }