/*
 * 건강정보(/blog/) 전용 스타일
 * blog 목록·분류·상세 화면에서만 로드된다 (functions.php: gamsahan_blog_styles)
 * style.css 는 건드리지 않는다.
 */

.blog-main {
    padding: 60px 20px 120px;
}

.blog-wrap,
.blog-single {
    max-width: 1200px;
    margin: 0 auto;
}

/* 상세글 제목은 header.php 의 page-title 로 나간다 — 블로그에서만 크기를 줄인다 */
body.single-blog .page-title {
    font-size: calc(var(--font-size-32) * var(--font-scale)) !important;
    line-height: 1.45;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    word-break: keep-all;
}

/* ── 분류 탭 ───────────────────────────────── */
.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}

.blog-cat {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: calc(var(--font-size-15) * var(--font-scale)) !important;
    color: var(--secondary-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-cat:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.blog-cat.is-current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* ── 카드 그리드 ───────────────────────────── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
}

.blog-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.blog-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bg-light);
}

.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.blog-card-link:hover .blog-card-thumb img {
    transform: scale(1.04);
}

.blog-card-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--font-size-16) * var(--font-scale)) !important;
    color: var(--light-text);
    letter-spacing: 0.05em;
}

.blog-card-body {
    padding: 18px 4px 0;
}

.blog-card-cat {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(96, 209, 181, 0.16);
    color: #1c7f6b;
    font-size: calc(var(--font-size-12) * var(--font-scale)) !important;
    text-decoration: none;
}

.blog-card-title {
    margin: 0 0 10px;
    font-size: calc(var(--font-size-20) * var(--font-scale)) !important;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-color);
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-link:hover .blog-card-title {
    color: var(--primary-color);
}

.blog-card-excerpt {
    margin: 0 0 12px;
    font-size: calc(var(--font-size-15) * var(--font-scale)) !important;
    line-height: 1.7;
    color: var(--secondary-color);
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-date {
    font-size: calc(var(--font-size-14) * var(--font-scale)) !important;
    color: var(--light-text);
}

.blog-empty {
    padding: 80px 0;
    text-align: center;
    color: var(--light-text);
}

/* ── 페이지네이션 ─────────────────────────── */
.blog-main .pagination {
    margin-top: 60px;
}

.blog-main .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.blog-main .nav-links .page-numbers {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: calc(var(--font-size-15) * var(--font-scale)) !important;
    color: var(--secondary-color);
    text-decoration: none;
}

.blog-main .nav-links .page-numbers.current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.blog-main .nav-links .page-numbers:hover:not(.current) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ── 상세 ─────────────────────────────────── */
.blog-single {
    max-width: 860px;
}

.blog-single-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    font-size: calc(var(--font-size-14) * var(--font-scale)) !important;
    color: var(--light-text);
}

.blog-single-thumb {
    margin: 0 0 40px;
    border-radius: 14px;
    overflow: hidden;
}

.blog-single-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* 본문 — 여기에 정의된 요소만 스타일이 먹는다 */
.blog-single-content {
    font-size: calc(var(--font-size-18) * var(--font-scale)) !important;
    line-height: 1.85;
    color: var(--text-color);
    word-break: keep-all;
}

.blog-single-content > * + * {
    margin-top: 1.1em;
}

.blog-single-content h2 {
    margin: 2.2em 0 0.8em;
    padding-top: 1.6em;
    border-top: 1px solid var(--border-color);
    font-size: calc(var(--font-size-28) * var(--font-scale)) !important;
    font-weight: 700;
    line-height: 1.45;
}

.blog-single-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.blog-single-content h3 {
    margin: 1.8em 0 0.6em;
    font-size: calc(var(--font-size-23) * var(--font-scale)) !important;
    font-weight: 700;
    line-height: 1.5;
}

.blog-single-content h4 {
    margin: 1.5em 0 0.5em;
    font-size: calc(var(--font-size-20) * var(--font-scale)) !important;
    font-weight: 700;
}

.blog-single-content p,
.blog-single-content li {
    font-size: calc(var(--font-size-18) * var(--font-scale)) !important;
}

.blog-single-content p {
    margin: 0 0 1.1em;
}

.blog-single-content ul,
.blog-single-content ol {
    margin: 0 0 1.3em;
    padding-left: 1.4em;
}

.blog-single-content li {
    margin-bottom: 0.5em;
}

.blog-single-content li::marker {
    color: var(--primary-color);
}

.blog-single-content blockquote {
    margin: 1.6em 0;
    padding: 20px 24px;
    border-left: 4px solid var(--accent-color);
    background: var(--bg-light);
    border-radius: 0 10px 10px 0;
    font-size: calc(var(--font-size-16) * var(--font-scale)) !important;
    color: var(--secondary-color);
}

.blog-single-content blockquote p:last-child {
    margin-bottom: 0;
}

.blog-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.blog-single-content figure {
    margin: 1.8em 0;
}

.blog-single-content figcaption {
    margin-top: 10px;
    font-size: calc(var(--font-size-14) * var(--font-scale)) !important;
    color: var(--light-text);
    text-align: center;
}

.blog-single-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-single-content table {
    width: 100%;
    margin: 1.6em 0;
    border-collapse: collapse;
    font-size: calc(var(--font-size-16) * var(--font-scale)) !important;
}

.blog-single-content th,
.blog-single-content td {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    text-align: left;
}

.blog-single-content th {
    background: var(--bg-light);
    font-weight: 700;
}

.blog-disclaimer {
    margin: 56px 0 0;
    padding: 18px 20px;
    border-radius: 10px;
    background: var(--bg-light);
    font-size: calc(var(--font-size-14) * var(--font-scale)) !important;
    line-height: 1.7;
    color: var(--light-text);
    word-break: keep-all;
}

/* ── 관련글 ───────────────────────────────── */
.blog-related {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid var(--border-color);
}

.blog-related-title {
    margin: 0 0 28px;
    font-size: calc(var(--font-size-23) * var(--font-scale)) !important;
    font-weight: 700;
}

.blog-related .blog-grid {
    gap: 24px 20px;
}

.blog-single-foot {
    margin-top: 64px;
    text-align: center;
}

.blog-list-btn {
    display: inline-block;
    padding: 14px 44px;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    font-size: calc(var(--font-size-16) * var(--font-scale)) !important;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-list-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ── 반응형 ───────────────────────────────── */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .blog-main {
        padding: 36px 16px 80px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .blog-related .blog-grid {
        gap: 24px;
    }

    .blog-cats {
        margin-bottom: 28px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .blog-cat {
        flex: 0 0 auto;
    }
}

/* ════════════════════════════════════════════════════════════════
   2026-08-03 · 건강정보 목록·본문 디자인 통일
   장위마디편한의원 블로그와 같은 레퍼런스 기준으로 맞춤.

   ℹ️ 테마에 body.font-scale-0~4 글자 크기 조절 변수가 있으나 **사용하지 않는다**(2026-08-03 사용자 확인).
      그래서 여기서는 레퍼런스 실측값을 px 로 그대로 쓴다.
   ⚠️ 구조(PHP)는 건드리지 않았다. 값만 덮어쓴다.
   ════════════════════════════════════════════════════════════════ */

/* ── 목록 그리드 ── */
.blog-grid {
    column-gap: 36px;
    row-gap: 60px;
}

/* ── 썸네일: 직각 ── */
.blog-grid .blog-card-thumb,
.blog-grid .blog-card-thumb img {
    border-radius: 0;
}

/* ── 카테고리: 알약 배지 → 텍스트 라벨 ── */
.blog-grid .blog-card-cat {
    display: block;
    margin-top: 22px;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.3;
    color: var(--primary-color);
}

/* ── 제목 ── */
.blog-grid .blog-card-title {
    margin: 8px 0 0;
    font-size: 22px !important;
    font-weight: 700;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 요약 ── */
.blog-grid .blog-card-excerpt {
    margin: 2px 0 0;
    font-size: 18px !important;
    line-height: 1.53;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 날짜 ── */
.blog-grid .blog-card-date {
    display: block;
    margin-top: 12px;
    font-size: 15px !important;
    color: #747474;
}

/* ── 본문 컬럼 700px ── */
.blog-single {
    max-width: 748px;
}

.blog-single-content {
    font-size: 18px !important;
    line-height: 1.72;
    color: var(--text-color);
    word-break: keep-all;
}

.blog-single-content p {
    margin: 0 0 28px;
    font-size: inherit !important;
    line-height: inherit;
}

.blog-single-content h2 {
    margin: 56px 0 16px;
    font-size: 28px !important;
    font-weight: 700;
    line-height: 1.5;
}

.blog-single-content h3 {
    margin: 36px 0 10px;
    font-size: 21px !important;
    font-weight: 700;
    line-height: 1.55;
}

.blog-single-content ul,
.blog-single-content ol {
    margin: 0 0 28px;
    padding-left: 22px;
}

.blog-single-content ul { list-style: disc outside; }
.blog-single-content ol { list-style: decimal outside; }
.blog-single-content li {
    list-style: inherit;
    margin-bottom: 8px;
    font-size: inherit;
    line-height: 1.72;
}
.blog-single-content li::marker { color: #747474; }

/* ── 이미지·캡션 ── */
.blog-single-thumb,
.blog-single-content figure {
    margin: 40px 0;
}

.blog-single-thumb img,
.blog-single-content figure img,
.blog-single-content img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

.blog-single-content figcaption {
    margin-top: 8px;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.5;
    color: #747474;
    text-align: center;
}

/* ── 강조 체계 ── */
.blog-single-content strong { font-weight: 700; color: inherit; }

.blog-single-content mark {
    background: #DCE4F5;
    color: inherit;
    padding: 0 2px;
    border-radius: 0;
}

.blog-single-content sup {
    font-size: 0.72em;
    line-height: 0;
    vertical-align: super;
    color: var(--primary-color);
    font-weight: 500;
}

.blog-single-content .footnote {
    margin: -14px 0 28px;
    padding-top: 10px;
    border-top: 1px solid #eaeef2;
    font-size: 14px !important;
    line-height: 1.7;
    color: #747474;
}

.blog-single-content blockquote {
    margin: 36px 0;
    padding: 0 0 0 20px;
    border-left: 3px solid var(--primary-color);
    color: #333;
}

.blog-single-content blockquote p {
    margin: 0 0 8px;
    font-size: 17px !important;
    line-height: 1.7;
}

.blog-single-content blockquote cite {
    display: block;
    font-size: 14px !important;
    font-style: normal;
    color: #747474;
}

.blog-single-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(27, 69, 168, 0.3);
    transition: text-decoration-color 0.2s ease;
}

.blog-single-content a:hover { text-decoration-color: var(--primary-color); }

/* ── 반응형 ── */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 44px; }
}

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; row-gap: 40px; }
    .blog-grid .blog-card-cat { margin-top: 16px; }
    .blog-grid .blog-card-title { font-size: 19px !important; }
    .blog-grid .blog-card-excerpt { font-size: 15px !important; }
    .blog-grid .blog-card-date { font-size: 14px !important; margin-top: 10px; }
    .blog-single-content { font-size: 16px !important; line-height: 1.75; }
    .blog-single-content h2 { font-size: 22px !important; }
    .blog-single-content h3 { font-size: 18px !important; }
    .blog-single-content figcaption,
    .blog-single-content .footnote { font-size: 13px !important; }
    .blog-single-content h2 { margin: 40px 0 12px; }
    .blog-single-content h3 { margin: 28px 0 8px; }
    .blog-single-content p { margin-bottom: 24px; }
    .blog-single-thumb,
    .blog-single-content figure { margin: 28px 0; }
}

/* ── 2026-08-03 후속: 목록 너비 · 제목 영역 여백 (블로그에서만) ──
   · 목록 컨테이너가 1200px 이라 사이트 기준(page-header-container 1600px)보다 좁아 혼자 밀려 보였다
   · 제목 영역(.page-header-container) 상하 패딩이 120px 씩이라 제목과 본문 사이가 크게 비었다
     → 다른 페이지(진료과목 등)에는 그대로 두고 블로그 화면에서만 줄인다 */

.blog-wrap {
    max-width: 1600px;
}

body.post-type-archive-blog .page-header-container,
body.tax-blog_cat .page-header-container,
body.single-blog .page-header-container {
    padding-top: 64px;
    padding-bottom: 40px;
}

body.post-type-archive-blog .blog-main,
body.tax-blog_cat .blog-main,
body.single-blog .blog-main {
    padding-top: 24px;
}

@media (max-width: 768px) {
    body.post-type-archive-blog .page-header-container,
    body.tax-blog_cat .page-header-container,
    body.single-blog .page-header-container {
        padding-top: 36px;
        padding-bottom: 24px;
    }
    body.post-type-archive-blog .blog-main,
    body.tax-blog_cat .blog-main,
    body.single-blog .blog-main {
        padding-top: 16px;
    }
}

/* ── 상세 메타 줄(카테고리 · 날짜) 정렬 ──
   목록 카드용 .blog-card-cat 규칙이 여기로 새면서 카테고리만 아래로 내려갔다.
   메타는 한 줄 flex 이므로 여백을 지우고 baseline 을 맞춘다. */
.blog-single-meta {
    /* 제목(.page-title)이 가운데 정렬이라 메타만 왼쪽이면 계단처럼 어긋나 보인다.
       레퍼런스도 제목 바로 아래 메타를 가운데 두므로 맞춘다. */
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 36px;
}

.blog-single-meta .blog-card-cat {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.6;
    color: var(--primary-color);
}

.blog-single-meta time {
    font-size: 15px !important;
    line-height: 1.6;
    color: #747474;
}

@media (max-width: 768px) {
    .blog-single-meta { margin-bottom: 24px; }
}