@charset "UTF-8";
/* ============================================================
   비상 블로그 전용 스타일시트 (blog.css)
   ──────────────────────────────────────────────────────────────
   - 뷰가 실제 사용하는 prefix 없는 BEM 클래스 (.page-hero, .cat-tabs,
     .blog-grid, .blog-card, .popular-item, .empty-state 등)에
     정확히 매칭되도록 처음부터 다시 작성
   - 비상 본 사이트의 글로벌 클래스(.container, .btn, .btn-primary,
     .btn-outline)는 절대 재정의하지 않음 (충돌 방지)
   - mockup 톤: blog_mockups_startupspace/index.html, post.html

   디자인 토큰
   - Primary  : #3561ff
   - Accent   : #6135ff
   - Secondary: #111823
   - Gradient : linear-gradient(135deg,#3561ff 0%,#6135ff 60%,#7324ff 100%)
   - Pretendard Variable (layouts/default에서 CDN 로드)
   - 컨테이너: 본 사이트 .container 글로벌 사용 (재정의 X)
   - 본문 단 폭: 720px (.blog-narrow / .blog-prose)
   - 모바일 분기: 767px
   - radius: 12px (카드/박스)
   - shadow : 0 4px 16px rgba(17,24,35,.08) / hover 0 8px 24px rgba(17,24,35,.12)
   ============================================================ */


/* ============================================================
   0) 블로그 전용 디자인 토큰 (--blog-* 네임스페이스)
   ──────────────────────────────────────────────────────────────
   본 사이트 글로벌 토큰과 충돌하지 않도록 --blog-* / --color-*
   변수를 블로그 전용 스코프(.blog-scope 없이 :root)에 정의한다.
   본 사이트가 이미 --color-* 를 정의했더라도 블로그용 fallback
   값을 함께 보강한다.
   ============================================================ */
:root {
    /* Primary / Accent / Secondary */
    --blog-primary       : #3561ff;
    --blog-primary-hover : #1e46e0;
    --blog-primary-soft  : #eaf0ff;
    --blog-accent        : #6135ff;
    --blog-accent-deep   : #7324ff;
    --blog-secondary     : #111823;
    --blog-secondary-hover: #1f2a3d;

    /* 브랜드 그라데이션 (히어로, 사이드 CTA, 상담 CTA 공용) */
    --blog-gradient: linear-gradient(135deg, #3561ff 0%, #6135ff 60%, #7324ff 100%);

    /* Neutral 톤 */
    --blog-text       : #212121;
    --blog-text-sub   : #757575;
    --blog-text-muted : #999999;
    --blog-bg         : #ffffff;
    --blog-bg-alt     : #f7f7f7;
    --blog-bg-soft    : #f5f7fb;
    --blog-border     : #e5e5e5;
    --blog-border-dark: #d3d3d3;
    --blog-sale       : #fe5356;

    /* 카테고리 7색 (color_index 1~7 매핑) */
    --cat-1: #3561ff; /* 창업 */
    --cat-2: #6135ff; /* 사무실 */
    --cat-3: #29b6f6; /* 세무·법무 */
    --cat-4: #3cdbc0; /* 비즈팁 */
    --cat-5: #66bb6a; /* 정부지원 */
    --cat-6: #f5a623; /* 이벤트 */
    --cat-7: #ef5d8f; /* 비상 소식 */

    /* Shadow / Radius / Ring */
    --blog-shadow-xs   : 0 1px 2px rgba(0, 0, 0, .04);
    --blog-shadow-sm   : 0 1px 3px rgba(0, 0, 0, .06);
    --blog-shadow-card : 0 4px 16px rgba(17, 24, 35, .08);
    --blog-shadow-hover: 0 8px 24px rgba(17, 24, 35, .12);
    --blog-ring-focus  : 0 0 0 3px rgba(53, 97, 255, .18);

    --blog-radius-sm : 6px;
    --blog-radius-md : 8px;
    --blog-radius-lg : 12px;
    --blog-radius-xl : 16px;
    --blog-radius-pill: 9999px;
}

/* ============================================================
   공용 보조 — sr-only / visually-hidden / 폰트
   ──────────────────────────────────────────────────────────────
   본 사이트가 Pretendard를 이미 로드한다는 전제에서
   블로그 영역만 폰트 우선순위를 명시한다.
   ============================================================ */
.blog-hero,
.page-hero,
.filter-bar,
.content-wrap,
.blog-pillar-wrap,
.blog-prose,
.blog-narrow,
.tag-hero,
.search-head,
.cat-hero,
.cluster-head,
.cluster-posts-section,
.recent,
.related-tags,
.list-wrap,
.results-section,
.hot-keywords,
.crumbs,
.crumb,
.blog-crumb,
.breadcrumb {
    font-family: 'Pretendard Variable', Pretendard, -apple-system,
                 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI',
                 'Malgun Gothic', sans-serif;
    word-break: keep-all;
}

/* 시각적으로 숨김 (스크린리더만 인식) */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ============================================================
   1) 페이지 헤더 (.page-hero)
   ──────────────────────────────────────────────────────────────
   blog/index, blog/clusters 메인 영역 상단 히어로.
   mockup: blog_mockups_startupspace/index.html .page-hero 톤 그대로.
   ============================================================ */
.page-hero {
    background: linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%);
    padding: 64px 0 48px;
    position: relative;
    overflow: hidden;
}

/* 우상단 블루 글로우 */
.page-hero::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53, 97, 255, .12) 0%, rgba(53, 97, 255, 0) 70%);
    pointer-events: none;
}

/* 좌하단 퍼플 글로우 */
.page-hero::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(97, 53, 255, .10) 0%, rgba(97, 53, 255, 0) 70%);
    pointer-events: none;
}

/* 컨테이너 내부 인너 박스 (그라데이션 위로 z-index 보정) */
.page-hero__inner {
    position: relative;
    z-index: 1;
}

/* eyebrow: 작은 라벨 (BISANG INSIGHT, TOPIC CLUSTERS 등) */
.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--blog-primary);
    text-transform: uppercase;
    background: var(--blog-primary-soft);
    padding: 6px 14px;
    border-radius: var(--blog-radius-pill);
    margin-bottom: 18px;
}

/* eyebrow 앞 점 장식 */
.page-hero__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blog-primary);
}

/* 큰 제목 */
.page-hero__title {
    font-size: 2.75rem;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--blog-secondary);
    margin: 0 0 14px;
    font-weight: 800;
}

/* em 강조: 브랜드 그라데이션 텍스트 */
.page-hero__title em {
    font-style: normal;
    background: var(--blog-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 서브 카피 */
.page-hero__sub {
    font-size: 1.125rem;
    color: var(--blog-text-sub);
    max-width: 640px;
    line-height: 1.6;
    margin: 0;
}

/* 통계 박스 묶음 */
.page-hero__stats {
    display: flex;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap;
}

/* 통계 개별 항목 */
.page-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-hero__stat b {
    font-size: 1.5rem;
    color: var(--blog-secondary);
    font-weight: 800;
}
.page-hero__stat span {
    font-size: 12px;
    color: var(--blog-text-muted);
    font-weight: 600;
    letter-spacing: .05em;
}

/* clusters 페이지: 메타 라인 (총 N개 / 매주 업데이트) */
.page-hero__meta {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--blog-text-sub);
    font-weight: 600;
}
.page-hero__meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--blog-border-dark);
}
.page-hero__meta b {
    color: var(--blog-secondary);
    font-weight: 800;
}

/* 모바일 분기 */
@media (max-width: 767px) {
    .page-hero { padding: 40px 0 32px; }
    .page-hero__title { font-size: 2rem; }
    .page-hero__sub { font-size: 1rem; }
    .page-hero__stats { gap: 20px; margin-top: 24px; }
    .page-hero__stat b { font-size: 1.25rem; }
}


/* ============================================================
   2) 필터바 (.filter-bar) — 카테고리 탭 + 검색
   ──────────────────────────────────────────────────────────────
   index.php에서 sticky 톱 위치로 노출되는 카테고리 탭 + 검색 영역.
   본 사이트 헤더(80px) 아래 sticky.
   ============================================================ */
.filter-bar {
    background: #ffffff;
    border-top: 1px solid var(--blog-border);
    border-bottom: 1px solid var(--blog-border);
    position: sticky;
    top: 80px;
    z-index: 40;
}

.filter-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}

/* ─── 카테고리 탭 (.cat-tabs / .cat-tab) ─── */
.cat-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }

/* 개별 탭 (a 태그 기반) */
.cat-tab,
.cat-tabs > a {
    padding: 9px 16px;
    border-radius: var(--blog-radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-sub);
    background: #ffffff;
    border: 1px solid var(--blog-border);
    white-space: nowrap;
    transition: all .15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cat-tab:hover,
.cat-tabs > a:hover {
    color: var(--blog-primary);
    border-color: var(--blog-primary);
}

/* 활성 탭: 다크 네이비 배경 */
.cat-tab.is-active,
.cat-tabs > a.is-active {
    background: var(--blog-secondary);
    border-color: var(--blog-secondary);
    color: #ffffff;
}

/* 카테고리 탭 좌측 색상 닷 (category.php가 사용) */
.cat-tabs .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blog-border-dark);
    display: inline-block;
}

/* ─── 검색 박스 (.search-box) ─── */
.search-box {
    position: relative;
    flex: 0 0 280px;
}
.search-box input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius-md);
    font-size: 13px;
    font-family: inherit;
    background: var(--blog-bg-soft);
    transition: .15s ease;
}
.search-box input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--blog-primary);
    box-shadow: var(--blog-ring-focus);
}
/* 검색 아이콘 (Lucide SVG) */
.search-box svg,
.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--blog-text-muted);
    pointer-events: none;
}

/* 반응형: 1024 / 767 */
@media (max-width: 1024px) {
    .search-box { flex: 0 0 220px; }
}
@media (max-width: 767px) {
    .filter-bar { top: 64px; }
    .filter-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 0;
    }
    .search-box { flex: 1; }
    .cat-tabs { padding-bottom: 2px; }
}


/* ============================================================
   3) 콘텐츠 레이아웃 (.content-wrap / .content-grid)
   ──────────────────────────────────────────────────────────────
   index.php의 메인 + 사이드 2단 그리드.
   ============================================================ */
.content-wrap {
    padding: 48px 0 80px;
    background: var(--blog-bg-soft);
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
}

/* 태블릿 */
@media (max-width: 1024px) {
    .content-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
}
/* 모바일: 사이드 하단 이동 */
@media (max-width: 767px) {
    .content-wrap { padding: 32px 0 60px; }
    .content-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* 리스트 헤더 */
.list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.list-head h2 {
    font-size: 1.5rem;
    color: var(--blog-secondary);
    letter-spacing: -.02em;
    margin: 0;
    font-weight: 800;
}
.list-head__meta {
    font-size: 13px;
    color: var(--blog-text-muted);
    font-weight: 500;
    margin: 0;
}
.list-head__meta b {
    color: var(--blog-primary);
    font-weight: 700;
}


/* ============================================================
   4) 블로그 카드 그리드 (.blog-grid / .blog-card)
   ──────────────────────────────────────────────────────────────
   partials/card.php가 출력하는 카드 + 데스크톱 3열 / 태블릿 2열
   / 모바일 1열 그리드.
   ============================================================ */
.blog-grid {
    display: grid;
    /* auto-fill + minmax 으로 카드 폭을 320px 이상 고정.
       글이 1건뿐일 때도 카드가 화면 폭 전체로 커지지 않고 깔끔하게 좌측 정렬됨. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
/* 단, 화면이 좁아지면 명시적으로 컬럼 수 줄이기 */
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
@media (max-width: 520px)  { .blog-grid { grid-template-columns: 1fr; } }

/* ─── 카드 본체 ─── */
.blog-card {
    background: #ffffff;
    border-radius: var(--blog-radius-lg);
    overflow: hidden;
    box-shadow: var(--blog-shadow-card);
    transition: .25s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--blog-shadow-hover);
}

/* 카드 썸네일 */
.blog-card__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    font-size: 64px;
    color: #ffffff;
    /* 기본 배경 (cover_image 없을 때 그라데이션 폴백) */
    background: var(--blog-gradient);
}
/* 하단 어둑한 그라데이션 오버레이 */
.blog-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .15) 100%);
    pointer-events: none;
}

/* cover image 가 있는 경우 img 채우기 */
.blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* g1~g8 그라데이션 변형 (detail/clusters에서 직접 사용) */
.blog-card__thumb.g1 { background: linear-gradient(135deg, #3561ff, #6135ff); }
.blog-card__thumb.g2 { background: linear-gradient(135deg, #29b6f6, #3561ff); }
.blog-card__thumb.g3 { background: linear-gradient(135deg, #6135ff, #ef5d8f); }
.blog-card__thumb.g4 { background: linear-gradient(135deg, #3cdbc0, #3561ff); }
.blog-card__thumb.g5 { background: linear-gradient(135deg, #66bb6a, #3cdbc0); }
.blog-card__thumb.g6 { background: linear-gradient(135deg, #f5a623, #fe5356); }
.blog-card__thumb.g7 { background: linear-gradient(135deg, #ef5d8f, #6135ff); }
.blog-card__thumb.g8 { background: linear-gradient(135deg, #7324ff, #3561ff); }

/* 카테고리 배지 (좌상단, mockup 톤) */
.blog-card__cat {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: var(--blog-radius-pill);
    font-size: 11px;
    font-weight: 700;
    color: var(--cat, var(--blog-primary));
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* 클러스터 라벨 (clusters.php에서 사용) */
.blog-card__cluster {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: var(--blog-radius-pill);
    font-size: 11px;
    font-weight: 700;
    color: var(--blog-secondary);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* 카드 본문 */
.blog-card__body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 카드 타이틀 */
.blog-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--blog-text);
    letter-spacing: -.015em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
}
.blog-card__title a {
    color: inherit;
    text-decoration: none;
}
.blog-card__title a:hover { color: var(--blog-primary); }

/* 카드 요약 */
.blog-card__excerpt {
    font-size: 13px;
    color: var(--blog-text-sub);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 14px;
    flex: 1;
}

/* 카드 메타 */
.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--blog-text-muted);
    font-weight: 500;
    padding-top: 12px;
    border-top: 1px solid var(--blog-bg-alt);
    flex-wrap: wrap;
}
.blog-card__meta time { font-weight: 600; }
.blog-card__meta .dot,
.blog-card__meta span.dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--blog-border-dark);
    display: inline-block;
}
.blog-card__meta .views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 검색어 강조 (partials/card.php의 <mark>) */
.blog-card mark {
    background: #fff3a8;
    color: var(--blog-secondary);
    font-weight: 700;
    padding: 0 2px;
    border-radius: 2px;
}

/* ─── 미니 카드 (.blog-card--mini) — partials/related.php ─── */
.blog-card--mini { box-shadow: var(--blog-shadow-sm); }
.blog-card__thumb--mini { aspect-ratio: 16 / 9; font-size: 36px; }
.blog-card__body--mini { padding: 14px 16px 16px; }
.blog-card__title--mini {
    font-size: 14px;
    -webkit-line-clamp: 2;
}
.blog-card__excerpt--mini {
    font-size: 12px;
    -webkit-line-clamp: 2;
    margin-bottom: 8px;
}
.blog-card__meta--mini { font-size: 11px; padding-top: 8px; }
.blog-card__emoji { font-size: 42px; }
.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── 미니 그리드 (.blog-grid-mini) ─── */
.blog-grid-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 16px 0 32px;
}
@media (max-width: 1024px) { .blog-grid-mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .blog-grid-mini { grid-template-columns: 1fr; } }


/* ============================================================
   5) 무한스크롤 sentinel (.scroll-end / .loader / .list-end)
   ============================================================ */
.scroll-end {
    padding: 32px 0;
    text-align: center;
}
.scroll-end__spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--blog-primary-soft);
    border-top-color: var(--blog-primary);
    animation: blog-spin 1s linear infinite;
}
.scroll-end__msg {
    font-size: 13px;
    color: var(--blog-text-muted);
    margin: 10px 0 0;
    font-weight: 500;
}
.scroll-end.is-done .scroll-end__spinner { display: none; }

/* '더 보기' 버튼 fallback (본 사이트 .btn 정의는 재사용) */
.scroll-end__more { margin-top: 12px; }

/* 카테고리/태그 무한스크롤 loader */
.loader {
    padding: 32px 0;
    text-align: center;
    color: var(--blog-text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
}
.loader[hidden] { display: none; }
.loader__spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--blog-primary-soft);
    border-top-color: var(--blog-primary);
    animation: blog-spin 1s linear infinite;
}
.loader.is-done .loader__spinner { display: none; }
.loader__text { font-weight: 500; }

/* 리스트 종료 메시지 */
.list-end {
    text-align: center;
    padding: 32px 0;
    font-size: 13px;
    color: var(--blog-text-muted);
    font-weight: 500;
}
.list-end[hidden] { display: none; }

/* sentinel은 시각상 보이지 않게 */
.infinite-sentinel {
    width: 1px;
    height: 1px;
    visibility: hidden;
}

/* spinner 키프레임 (충돌 회피 위해 blog- prefix) */
@keyframes blog-spin {
    to { transform: rotate(360deg); }
}


/* ============================================================
   6) SEO 페이지네이션 fallback
   (.seo-pagination / .pagination-fallback / .seo-pager / .blog-pagination)
   ============================================================ */
.seo-pagination,
.pagination-fallback,
.seo-pager,
.blog-pagination {
    padding: 24px 0;
    text-align: center;
    font-size: 12px;
    color: var(--blog-text-muted);
}
.seo-pagination a,
.pagination-fallback a,
.seo-pager a,
.blog-pagination a {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius-sm);
    color: var(--blog-text-sub);
    font-weight: 600;
    transition: .15s;
    text-decoration: none;
}
.seo-pagination a:hover,
.pagination-fallback a:hover,
.seo-pager a:hover,
.blog-pagination a:hover {
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
    border-color: var(--blog-primary);
}

/* 현재 페이지: .is-current / .is-here / .cur 모두 지원 */
.seo-pagination a.is-current,
.pagination-fallback a.is-current,
.seo-pagination a.is-here,
.pagination-fallback a.is-here,
.seo-pager a.cur,
.blog-pagination a[aria-current="page"] {
    background: var(--blog-secondary);
    color: #ffffff;
    border-color: var(--blog-secondary);
}
.seo-pagination__hint {
    margin-top: 10px;
    font-size: 11px;
    color: var(--blog-text-muted);
}


/* ============================================================
   7) 사이드 영역 (.side / .side-card / .popular-* / .tag-cloud /
                    .tag-chip / .side-cta)
   ============================================================ */
.side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 170px;
    align-self: start;
}
@media (max-width: 1024px) { .side { top: 160px; } }
@media (max-width: 767px)  { .side { position: static; } }

/* 사이드 카드 박스 (인기글/태그) */
.side-card {
    background: #ffffff;
    border-radius: var(--blog-radius-lg);
    padding: 24px;
    box-shadow: var(--blog-shadow-sm);
    border: 1px solid var(--blog-border);
}
.side-card__title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--blog-secondary);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -.01em;
}
.side-card__title::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--blog-gradient);
}

/* 인기글 리스트 */
.popular-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.popular-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--blog-bg-alt);
}
.popular-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.popular-rank {
    flex: 0 0 24px;
    font-size: 1.125rem;
    font-weight: 800;
    font-feature-settings: "tnum";
    line-height: 1.3;
    color: var(--blog-text-muted);
}
/* 상위 3개는 그라데이션 강조 */
.popular-item:nth-child(-n+3) .popular-rank {
    background: var(--blog-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.popular-link {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--blog-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
    text-decoration: none;
}
.popular-link:hover { color: var(--blog-primary); }
.popular-meta {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--blog-text-muted);
    font-weight: 500;
}

/* 태그 클라우드 / 칩 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-chip {
    padding: 5px 11px;
    border-radius: var(--blog-radius-pill);
    background: var(--blog-bg-soft);
    font-size: 12px;
    font-weight: 600;
    color: var(--blog-text-sub);
    transition: .15s ease;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.tag-chip:hover {
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
    border-color: var(--blog-primary);
}
.tag-chip.hot {
    background: #fff5f5;
    color: var(--blog-sale);
    border-color: #ffd5d5;
}

/* 사이드 미니 CTA */
.side-cta {
    background: var(--blog-gradient);
    color: #ffffff;
    border-radius: var(--blog-radius-lg);
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
}
.side-cta::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.side-cta__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    opacity: .85;
    margin-bottom: 8px;
    text-transform: uppercase;
    position: relative;
}
.side-cta__title {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 6px;
    position: relative;
    letter-spacing: -.01em;
}
.side-cta__sub {
    font-size: 12px;
    opacity: .85;
    line-height: 1.5;
    margin: 0 0 16px;
    position: relative;
}
.side-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: var(--blog-primary);
    padding: 9px 16px;
    border-radius: var(--blog-radius-md);
    font-size: 13px;
    font-weight: 700;
    position: relative;
    transition: .15s ease;
    text-decoration: none;
}
.side-cta__btn:hover {
    transform: translateX(2px);
    color: var(--blog-primary-hover);
}


/* ============================================================
   8) 빈 상태 (.empty-state)
   ──────────────────────────────────────────────────────────────
   index/category/tag/search/clusters 공용 빈 결과 박스.
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 64px 20px;
    background: #ffffff;
    border-radius: var(--blog-radius-lg);
    border: 1px dashed var(--blog-border);
    color: var(--blog-text-sub);
}
.empty-state__icon {
    margin: 0 auto 18px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--blog-bg-soft);
    display: grid;
    place-items: center;
    color: var(--blog-text-muted);
}
.empty-state__icon i,
.empty-state__icon svg {
    width: 28px;
    height: 28px;
}
.empty-state__title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--blog-secondary);
    margin-bottom: 10px;
    letter-spacing: -.02em;
}
.empty-state__desc {
    color: var(--blog-text-sub);
    line-height: 1.7;
    margin: 0 0 22px;
    font-size: 14px;
}

/* 빈 상태 추천 키워드 칩 */
.empty-state__suggests {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.empty-state__suggests .chip {
    padding: 6px 14px;
    border-radius: var(--blog-radius-pill);
    background: var(--blog-bg-soft);
    color: var(--blog-text-sub);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--blog-border);
    transition: .15s ease;
}
.empty-state__suggests .chip:hover {
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
    border-color: var(--blog-primary);
}


/* ============================================================
   9) 빵부스러기 (.blog-crumb / .crumb / .crumbs / .breadcrumb)
   ──────────────────────────────────────────────────────────────
   detail, detail_pillar, clusters, cluster, tag, category 등
   여러 뷰에서 클래스명이 살짝 다르게 쓰여 모두 매칭.
   ============================================================ */
.blog-crumb,
.crumb,
.crumbs,
.breadcrumb {
    background: var(--blog-bg-soft);
    padding: 18px 0;
    font-size: 13px;
    color: var(--blog-text-sub);
}
.blog-crumb ol,
.crumb ol,
.crumbs ol,
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-crumb a,
.crumb a,
.crumbs a,
.breadcrumb a { color: inherit; text-decoration: none; }
.blog-crumb a:hover,
.crumb a:hover,
.crumbs a:hover,
.breadcrumb a:hover { color: var(--blog-primary); }

/* 구분자 */
.blog-crumb__sep,
.crumb__sep { color: var(--blog-text-muted); }

/* 현재 페이지 */
.blog-crumb__current,
.crumb__current,
.crumbs .cur,
.breadcrumb [aria-current="page"] {
    color: var(--blog-text);
    font-weight: 600;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   10) 글 상세 헤더 / 썸네일 (detail.php)
   (.blog-post-head / .blog-post-cat / .blog-post-title /
    .blog-post-meta / .blog-post-thumb)
   ============================================================ */
.blog-post-head {
    padding: 48px 0 32px;
    background: #ffffff;
}
.blog-post-cat {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--blog-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    --cat: var(--cat-2);
    color: var(--cat);
    background: color-mix(in srgb, var(--cat) 14%, #fff);
}
.blog-post-title {
    font-size: 2.25rem;
    line-height: 1.25;
    color: var(--blog-secondary);
    margin: 18px 0 24px;
    letter-spacing: -.025em;
    font-weight: 800;
}
@media (max-width: 767px) { .blog-post-title { font-size: 1.65rem; } }

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--blog-text-sub);
}
.blog-post-meta__author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blog-text);
}
.blog-post-meta__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--blog-gradient);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}
.blog-post-meta__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--blog-text-muted);
}
.blog-post-share { gap: 6px; }
.blog-share-btn:hover {
    background: var(--blog-primary-soft) !important;
    color: var(--blog-primary) !important;
}
@media (max-width: 767px) {
    .blog-post-meta { font-size: 12px; gap: 10px; }
}

/* 대표 썸네일 박스 */
.blog-post-thumb {
    margin: 32px auto;
    max-width: 1100px;
    padding: 0 1.5rem;
}
.blog-post-thumb__inner {
    aspect-ratio: 16 / 8;
    border-radius: var(--blog-radius-xl);
    background: linear-gradient(135deg, #3561ff 0%, #6135ff 55%, #7324ff 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--blog-shadow-card);
}
.blog-post-thumb__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .18), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(115, 36, 255, .4), transparent 50%);
    pointer-events: none;
}
.blog-post-thumb__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
@media (max-width: 767px) {
    .blog-post-thumb__inner { aspect-ratio: 16 / 10; border-radius: var(--blog-radius-lg); }
}


/* ============================================================
   11) 본문 단 폭 + Prose (.blog-narrow / .blog-prose)
   ──────────────────────────────────────────────────────────────
   detail.php / detail_pillar.php 의 article 본문 가독성 타이포.
   max-width 720px 단 폭.
   ============================================================ */
.blog-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.blog-prose {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 1.5rem 48px;
    font-size: 1.125rem;
    line-height: 1.8;
    letter-spacing: -.01em;
    color: #262626;
}

/* lead: 도입부 강조 (서브타이틀) */
.blog-prose__lead,
.blog-prose > .lead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--blog-text);
    font-weight: 500;
    border-left: 4px solid var(--blog-primary);
    padding: 6px 0 6px 18px;
    margin: 0 0 32px;
    background: linear-gradient(90deg, var(--blog-primary-soft) 0%, rgba(234, 240, 255, 0) 100%);
}

/* H1~H3 굵게 + 적절한 마진 */
.blog-prose h1 {
    font-size: 2rem;
    font-weight: 800;
    margin: 48px 0 16px;
    color: var(--blog-secondary);
    letter-spacing: -.02em;
}
.blog-prose h2 {
    font-size: 1.875rem;
    font-weight: 800;
    margin: 56px 0 18px;
    color: var(--blog-secondary);
    scroll-margin-top: 100px;
    position: relative;
    padding-top: 14px;
    letter-spacing: -.02em;
}
/* H2 위 그라데이션 짧은 바 (mockup post.html 톤) */
.blog-prose h2::before {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--blog-gradient);
    position: absolute;
    top: 0;
    left: 0;
}
/* 필러용 H2 번호 뱃지 */
.blog-prose h2 .h2-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
    font-size: 14px;
    font-weight: 800;
    vertical-align: middle;
}

.blog-prose h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 40px 0 14px;
    color: var(--blog-secondary);
    letter-spacing: -.015em;
}

/* p 단락 — line-height 1.8 */
.blog-prose p { margin: 0 0 20px; line-height: 1.8; }

/* strong: 형광 하이라이트 */
.blog-prose strong {
    color: var(--blog-secondary);
    font-weight: 700;
    background: linear-gradient(transparent 60%, #fff3a8 60%);
    padding: 0 2px;
}

/* 인라인 링크 */
.blog-prose a {
    color: var(--blog-primary);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--blog-primary) 35%, transparent);
    text-decoration: none;
}
.blog-prose a:hover {
    color: var(--blog-primary-hover);
    border-bottom-color: var(--blog-primary-hover);
}

/* 리스트 */
.blog-prose ul,
.blog-prose ol { margin: 0 0 24px; padding-left: 1.4em; }
.blog-prose ul li,
.blog-prose ol li { margin-bottom: 10px; }
.blog-prose ul li::marker { color: var(--blog-primary); }
.blog-prose ol li::marker { color: var(--blog-accent); font-weight: 700; }

/* 인용 blockquote — 좌측 4px primary border */
.blog-prose blockquote {
    margin: 32px 0;
    padding: 22px 24px 22px 28px;
    background: var(--blog-bg-soft);
    border-radius: var(--blog-radius-lg);
    border-left: 4px solid var(--blog-primary);
    font-size: 1.125rem;
    color: var(--blog-text);
    position: relative;
}
.blog-prose blockquote::before {
    content: "\201C";
    position: absolute;
    top: -6px;
    left: 14px;
    font-size: 48px;
    color: var(--blog-accent);
    font-family: Georgia, serif;
    opacity: .4;
    line-height: 1;
}
.blog-prose blockquote p { margin: 0; font-weight: 500; }
.blog-prose blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--blog-text-sub);
    font-style: normal;
    font-weight: 600;
}

/* 인라인 code: 회색 배경 */
.blog-prose code {
    font-family: 'JetBrains Mono', 'D2Coding', ui-monospace, monospace;
    font-size: .92em;
    background: #f3f5fb;
    color: var(--blog-accent-deep);
    padding: 2px 7px;
    border-radius: 5px;
    font-weight: 600;
}

/* pre 다크 코드 블록 */
.blog-prose pre {
    margin: 28px 0;
    padding: 18px 22px;
    background: #111823;
    color: #e3e8f3;
    border-radius: var(--blog-radius-lg);
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'D2Coding', ui-monospace, monospace;
    font-size: 14px;
    line-height: 1.6;
}
.blog-prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-weight: 400;
}

/* 이미지: radius 8px + width 100% */
.blog-prose img {
    width: 100%;
    border-radius: 8px;
    box-shadow: var(--blog-shadow-card);
    margin: 28px 0;
    height: auto;
    display: block;
}
.blog-prose figure { margin: 32px 0; }
.blog-prose figcaption {
    text-align: center;
    font-size: 13px;
    color: var(--blog-text-sub);
    margin-top: 10px;
}

/* 표: 헤더 다크 배경 */
.blog-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 1rem;
    border-radius: var(--blog-radius-md);
    overflow: hidden;
    box-shadow: var(--blog-shadow-sm);
}
.blog-prose table thead { background: var(--blog-secondary); color: #ffffff; }
.blog-prose table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.01em;
}
.blog-prose table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--blog-border);
    font-size: 14.5px;
    line-height: 1.6;
}
.blog-prose table tr:last-child td { border-bottom: none; }
.blog-prose table tbody tr:nth-child(even) { background: var(--blog-bg-soft); }

/* callout (mockup post.html .callout) */
.blog-prose .callout {
    display: flex;
    gap: 14px;
    padding: 20px 22px;
    border-radius: var(--blog-radius-md);
    background: var(--blog-primary-soft);
    border: 1px solid color-mix(in srgb, var(--blog-primary) 20%, #fff);
    margin: 28px 0;
}

@media (max-width: 767px) {
    .blog-prose { font-size: 1rem; line-height: 1.75; padding: 16px 1rem 32px; }
    .blog-prose h1 { font-size: 1.625rem; }
    .blog-prose h2 { font-size: 1.5rem; margin: 40px 0 14px; }
    .blog-prose h3 { font-size: 1.25rem; margin: 28px 0 10px; }
    .blog-prose table { font-size: 13px; }
    .blog-prose table th,
    .blog-prose table td { padding: 10px 12px; }
    .blog-narrow { padding: 0 1rem; }
}


/* ============================================================
   12) 태그 칩 (.blog-tag-chip) — detail.php의 본문 하단 태그
   ============================================================ */
.blog-tag-chip {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: var(--blog-radius-pill);
    background: var(--blog-bg-soft);
    color: var(--blog-text-sub);
    transition: .2s;
    border: 1px solid transparent;
    text-decoration: none;
}
.blog-tag-chip:hover {
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
    border-color: color-mix(in srgb, var(--blog-primary) 25%, transparent);
}


/* ============================================================
   13) 상담 CTA 박스 (.blog-cta-box / .blog-gradient)
   ──────────────────────────────────────────────────────────────
   partials/cta_contact.php — 글 본문 끝 풀와이드 박스
   ============================================================ */
.blog-gradient { background: var(--blog-gradient); }

.blog-cta-box {
    position: relative;
    overflow: hidden;
    padding: 72px 0 80px;
    margin: 48px 0 0;
    color: #ffffff;
    text-align: center;
}
.blog-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .15), transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(115, 36, 255, .45), transparent 45%);
    pointer-events: none;
}
.blog-cta-box__inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.blog-cta-box__emoji {
    font-size: 48px;
    margin-bottom: 14px;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .2));
}
.blog-cta-box__title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 14px;
    letter-spacing: -.02em;
}
.blog-cta-box__desc {
    font-size: 1.125rem;
    opacity: .95;
    margin: 0 0 32px;
    line-height: 1.6;
}
.blog-cta-box__actions { margin-top: 8px; }
.blog-cta-box__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: var(--blog-primary);
    padding: 1.05rem 2.25rem;
    border-radius: var(--blog-radius-md);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    transition: .25s ease;
    text-decoration: none;
}
.blog-cta-box__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
    color: var(--blog-primary-hover);
}
@media (max-width: 767px) {
    .blog-cta-box { padding: 52px 0 56px; }
    .blog-cta-box__title { font-size: 1.5rem; }
    .blog-cta-box__desc { font-size: 1rem; }
}


/* ============================================================
   14) 클러스터 배지 박스 (.blog-cluster-badge)
   ──────────────────────────────────────────────────────────────
   partials/cluster_badge.php — 글 상세 상단 클러스터 안내
   ============================================================ */
.blog-cluster-badge {
    display: block;
    background: linear-gradient(135deg, #f5f0ff 0%, #eaf0ff 100%);
    border: 1px solid color-mix(in srgb, var(--blog-accent) 22%, transparent);
    border-radius: var(--blog-radius-lg);
    padding: 22px 24px;
    text-decoration: none;
    color: inherit;
    transition: .2s ease;
    box-shadow: var(--blog-shadow-xs);
}
.blog-cluster-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(97, 53, 255, .15);
}
.blog-cluster-badge__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.blog-cluster-badge__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--blog-gradient);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.blog-cluster-badge__body { flex: 1; min-width: 200px; }
.blog-cluster-badge__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blog-accent);
    margin-bottom: 4px;
}
.blog-cluster-badge__title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--blog-secondary);
    margin: 4px 0 6px;
    letter-spacing: -.01em;
}
.blog-cluster-badge__sub {
    font-size: 13px;
    color: var(--blog-text-sub);
    line-height: 1.6;
    margin: 0;
}
.blog-cluster-badge__cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blog-accent);
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}
.blog-cluster-badge__cta-arrow { transition: transform .15s; }
.blog-cluster-badge:hover .blog-cluster-badge__cta-arrow { transform: translateX(2px); }
@media (max-width: 767px) {
    .blog-cluster-badge__cta { margin-left: 0; width: 100%; justify-content: flex-end; }
}


/* ============================================================
   15) 관련글 섹션 (.blog-related)
   ──────────────────────────────────────────────────────────────
   partials/related.php
   ============================================================ */
.blog-related {
    margin: 40px auto 48px;
}
.blog-related__head { margin-bottom: 18px; text-align: center; }
.blog-related__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--blog-primary);
    margin-bottom: 8px;
}
.blog-related__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blog-secondary);
    letter-spacing: -.02em;
    margin: 0;
}


/* ============================================================
   16) 필러 페이지 (.pillar-head / .pillar-badge / .pillar-title /
                     .pillar-sub / .pillar-meta /
                     .blog-pillar-wrap / .blog-pillar-grid /
                     .blog-toc / .blog-pillar-body /
                     .blog-cluster-posts / .blog-cluster-grid /
                     .blog-cluster-card)
   ──────────────────────────────────────────────────────────────
   detail_pillar.php — 좌측 sticky TOC + 우측 본문 2단 그리드
   ============================================================ */
.pillar-head {
    padding: 56px 0 36px;
    background:
        radial-gradient(circle at 85% 20%, rgba(97, 53, 255, .12), transparent 50%),
        linear-gradient(180deg, #f5f0ff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--blog-border);
    position: relative;
    overflow: hidden;
}

/* PILLAR PAGE 배지 */
.pillar-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(97, 53, 255, .12);
    color: var(--blog-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--blog-radius-pill);
    border: 1px solid color-mix(in srgb, var(--blog-accent) 25%, transparent);
    margin-bottom: 18px;
}

.pillar-title {
    font-size: 2.5rem;
    color: var(--blog-secondary);
    letter-spacing: -.03em;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 14px;
}
.pillar-sub {
    font-size: 1.125rem;
    color: var(--blog-text-sub);
    line-height: 1.7;
    max-width: 720px;
    margin: 0 0 22px;
}

.pillar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 13px;
    color: var(--blog-text-sub);
    font-weight: 600;
}
.pillar-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pillar-meta__item i,
.pillar-meta__item svg {
    width: 14px;
    height: 14px;
    color: var(--blog-accent);
}
.pillar-meta__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--blog-border-dark);
}

@media (max-width: 767px) {
    .pillar-head { padding: 40px 0 28px; }
    .pillar-title { font-size: 1.75rem; }
    .pillar-sub { font-size: 1rem; }
}

/* ─── 필러 2단 그리드 ─── */
.blog-pillar-wrap {
    padding: 48px 0 64px;
    background: #ffffff;
}
.blog-pillar-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 1024px) {
    .blog-pillar-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
    .blog-pillar-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── 좌측 sticky TOC ─── */
.blog-toc,
.blog-pillar-toc {
    position: sticky;
    top: 100px;
    align-self: start;
    background: #ffffff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius-lg);
    padding: 22px 20px;
    box-shadow: var(--blog-shadow-sm);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
@media (max-width: 767px) {
    .blog-toc,
    .blog-pillar-toc { position: static; max-height: none; }
}

.blog-toc__title,
.blog-pillar-toc__title {
    font-size: 14px;
    font-weight: 800;
    color: var(--blog-secondary);
    margin: 0 0 14px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-toc__list,
.blog-pillar-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.blog-toc__list li,
.blog-pillar-toc__item { margin: 0; }

.blog-toc__list a,
.blog-pillar-toc__link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--blog-radius-sm);
    font-size: 13px;
    line-height: 1.5;
    color: var(--blog-text-sub);
    text-decoration: none;
    transition: .15s ease;
    font-weight: 500;
}
.blog-toc__list a:hover,
.blog-pillar-toc__link:hover {
    background: var(--blog-bg-soft);
    color: var(--blog-primary);
}
.blog-toc__list a.is-active,
.blog-pillar-toc__link.active,
.blog-pillar-toc__link.is-active {
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
    font-weight: 700;
}

/* TOC 번호 */
.blog-toc__list a span,
.blog-pillar-toc__num {
    flex: 0 0 22px;
    font-size: 11px;
    font-weight: 800;
    color: var(--blog-accent);
    font-feature-settings: "tnum";
}
.blog-pillar-toc__text { flex: 1; }

.blog-toc__empty,
.blog-pillar-toc__empty {
    font-size: 12px;
    color: var(--blog-text-muted);
    margin: 0;
}

/* TOC 구분선 */
.blog-toc__divider,
.blog-pillar-toc__divider {
    height: 1px;
    background: var(--blog-border);
    margin: 18px 0;
}

/* 클러스터 글 목록 (TOC 하단) */
.blog-toc__cluster-title,
.blog-pillar-toc__cluster-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--blog-secondary);
    margin: 0 0 10px;
    letter-spacing: -.01em;
}
.blog-toc__cluster,
.blog-pillar-toc__cluster-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.blog-toc__cluster a,
.blog-pillar-toc__cluster-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--blog-radius-sm);
    font-size: 12.5px;
    color: var(--blog-text-sub);
    line-height: 1.5;
    text-decoration: none;
    transition: .15s ease;
}
.blog-toc__cluster a:hover,
.blog-pillar-toc__cluster-link:hover {
    background: var(--blog-bg-soft);
    color: var(--blog-primary);
}
.blog-toc__cluster b,
.blog-pillar-toc__cluster-num {
    flex: 0 0 22px;
    color: var(--blog-text-muted);
    font-feature-settings: "tnum";
    font-weight: 800;
    font-size: 11px;
}

/* ─── 우측 필러 본문 ─── */
.blog-pillar-body { max-width: 100%; }

/* ─── 클러스터 글 섹션 ─── */
.blog-cluster-posts {
    padding: 64px 0 80px;
    background: var(--blog-bg-soft);
    border-top: 1px solid var(--blog-border);
}

/* 섹션 헤더 (블로그 공용) */
.blog-section-head {
    text-align: center;
    margin-bottom: 40px;
}
.blog-section-head__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--blog-primary);
    margin-bottom: 10px;
}
.blog-section-head__title {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--blog-secondary);
    margin: 0;
}
.blog-section-head__sub {
    margin-top: 10px;
    color: var(--blog-text-sub);
    font-size: 1rem;
}

/* 클러스터 카드 그리드 */
.blog-cluster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1024px) { .blog-cluster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .blog-cluster-grid { grid-template-columns: 1fr; } }

.blog-cluster-card {
    background: #ffffff;
    border-radius: var(--blog-radius-lg);
    overflow: hidden;
    box-shadow: var(--blog-shadow-card);
    transition: .2s ease;
    display: flex;
    flex-direction: column;
}
.blog-cluster-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--blog-shadow-hover);
}
.blog-cluster-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #ffffff;
    text-decoration: none;
}
.blog-cluster-card__order {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 9px;
    border-radius: var(--blog-radius-pill);
    background: rgba(255, 255, 255, .9);
    color: var(--blog-secondary);
    font-size: 11px;
    font-weight: 800;
    font-feature-settings: "tnum";
}
.blog-cluster-card__body { padding: 16px 18px 20px; }
.blog-cluster-card__date {
    font-size: 11px;
    color: var(--blog-text-muted);
    font-weight: 600;
}
.blog-cluster-card__title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--blog-secondary);
    margin: 6px 0 0;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-cluster-card__title a {
    color: inherit;
    text-decoration: none;
}
.blog-cluster-card__title a:hover { color: var(--blog-primary); }


/* ============================================================
   17) 카테고리 페이지 (category.php)
   (.cat-hero / .toolbar / .sort-wrap / .sort-select / .cat-section)
   ============================================================ */
.cat-hero {
    padding: 56px 0 40px;
    background: linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%);
    border-bottom: 1px solid var(--blog-border);
}
.cat-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}
@media (max-width: 767px) {
    .cat-hero__inner { grid-template-columns: 1fr; gap: 18px; }
}
.cat-hero__main { min-width: 0; }
.cat-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cat-current, var(--blog-primary));
    margin-bottom: 14px;
}
.cat-hero__eyebrow-bar {
    display: inline-block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--cat-current, var(--blog-primary));
}
.cat-hero__title {
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--blog-secondary);
    letter-spacing: -.03em;
    margin: 0 0 14px;
    font-weight: 800;
}
.cat-hero__title .accent {
    background: var(--blog-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cat-hero__desc {
    font-size: 1rem;
    color: var(--blog-text-sub);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 0 18px;
}
.cat-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--blog-text-sub);
    font-weight: 600;
}
.cat-hero__count b { color: var(--blog-primary); font-weight: 800; }
.cat-hero__page { color: var(--blog-text-muted); }
.cat-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--blog-radius-pill);
    background: #ffffff;
    border: 1px solid var(--blog-border);
    font-size: 12px;
    color: var(--blog-text-sub);
    font-weight: 600;
}
.cat-hero__pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
@media (max-width: 767px) {
    .cat-hero__title { font-size: 1.875rem; }
}

/* 카테고리 페이지 툴바 */
.toolbar {
    background: #ffffff;
    border-bottom: 1px solid var(--blog-border);
    position: sticky;
    top: 80px;
    z-index: 30;
}
.toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    flex-wrap: wrap;
}
@media (max-width: 767px) {
    .toolbar { top: 64px; }
    .toolbar__inner { padding: 10px 0; }
}

/* 정렬 셀렉트 */
.sort-wrap { flex-shrink: 0; }
.sort-select {
    padding: 8px 32px 8px 14px;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text);
    background: #ffffff;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--blog-text-sub) 50%),
                      linear-gradient(135deg, var(--blog-text-sub) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
.sort-select:focus {
    outline: none;
    border-color: var(--blog-primary);
    box-shadow: var(--blog-ring-focus);
}

.cat-section {
    padding: 40px 0 64px;
    background: var(--blog-bg-soft);
}


/* ============================================================
   18) 태그 페이지 (tag.php)
   (.tag-hero / .related-tags / .tag-pill-list / .tag-pill /
    .list-wrap / .list-toolbar / .sort-tabs / .list-end)
   ============================================================ */
.tag-hero {
    padding: 56px 0 40px;
    background:
        radial-gradient(circle at 80% 20%, rgba(97, 53, 255, .12), transparent 50%),
        linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%);
}
.tag-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.tag-hero__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--blog-accent);
    background: rgba(97, 53, 255, .1);
    padding: 5px 12px;
    border-radius: var(--blog-radius-pill);
    margin-bottom: 14px;
}
.tag-hero__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 12px;
    font-size: 2.5rem;
    color: var(--blog-secondary);
    letter-spacing: -.03em;
    font-weight: 800;
    line-height: 1.2;
}
.tag-hero__hash {
    background: var(--blog-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.tag-hero__count {
    font-size: 1rem;
    color: var(--blog-text-sub);
    font-weight: 600;
}
.tag-hero__count b { color: var(--blog-primary); font-weight: 800; }
.tag-hero__desc {
    font-size: 1rem;
    color: var(--blog-text-sub);
    line-height: 1.7;
    max-width: 680px;
    margin: 0;
}
@media (max-width: 767px) {
    .tag-hero__title { font-size: 1.875rem; }
}

/* 관련 태그 섹션 */
.related-tags {
    padding: 28px 0;
    background: #ffffff;
    border-bottom: 1px solid var(--blog-border);
}
.related-tags__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.related-tags__head .label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--blog-accent);
}
.related-tags__head h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--blog-secondary);
    margin: 0;
}

.tag-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: var(--blog-radius-pill);
    background: var(--blog-bg-soft);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-sub);
    text-decoration: none;
    transition: .15s ease;
}
.tag-pill:hover {
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
    border-color: var(--blog-primary);
}
.tag-pill .hash { color: var(--blog-accent); margin-right: 2px; }
.tag-pill .num {
    margin-left: 6px;
    font-size: 11px;
    color: var(--blog-text-muted);
    font-weight: 700;
}

/* 리스트 본체 wrap */
.list-wrap {
    padding: 40px 0 64px;
    background: var(--blog-bg-soft);
}
.list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.list-toolbar__count {
    font-size: 13px;
    color: var(--blog-text-sub);
    font-weight: 500;
}
.list-toolbar__count b {
    color: var(--blog-secondary);
    font-weight: 800;
}

/* 정렬 탭 (.sort-tabs / button) */
.sort-tabs {
    display: flex;
    gap: 4px;
    background: #ffffff;
    padding: 4px;
    border-radius: var(--blog-radius-md);
    border: 1px solid var(--blog-border);
}
.sort-tabs button {
    padding: 7px 14px;
    border-radius: var(--blog-radius-sm);
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blog-text-sub);
    cursor: pointer;
    transition: .15s ease;
    font-family: inherit;
}
.sort-tabs button:hover { color: var(--blog-primary); }
.sort-tabs button.is-active {
    background: var(--blog-secondary);
    color: #ffffff;
}


/* ============================================================
   19) 검색 페이지 (search.php)
   (.search-head / .search-bar / .results-section /
    .results-bar / .results-grid-wrap /
    .hot-keywords / .hot-grid / .hot-item)
   ============================================================ */
.search-head {
    padding: 48px 0 36px;
    background: linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%);
    border-bottom: 1px solid var(--blog-border);
}
.search-head__crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--blog-text-sub);
    margin-bottom: 18px;
}
.search-head__crumb i,
.search-head__crumb svg { width: 12px; height: 12px; color: var(--blog-text-muted); }
.search-head__crumb a:hover { color: var(--blog-primary); }

.search-head__title {
    font-size: 2.25rem;
    color: var(--blog-secondary);
    letter-spacing: -.025em;
    margin: 0 0 12px;
    font-weight: 800;
    line-height: 1.2;
}
.search-head__title .kw {
    background: var(--blog-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.search-head__count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--blog-text-sub);
    margin-bottom: 22px;
}
.search-head__count strong {
    color: var(--blog-primary);
    font-weight: 800;
}

/* 검색바 (.search-bar) */
.search-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1.5px solid var(--blog-border);
    border-radius: var(--blog-radius-md);
    overflow: hidden;
    max-width: 640px;
    transition: .15s ease;
    box-shadow: var(--blog-shadow-sm);
}
.search-bar:focus-within {
    border-color: var(--blog-primary);
    box-shadow: var(--blog-ring-focus);
}
.search-bar i,
.search-bar svg {
    align-self: center;
    margin: 0 12px;
    width: 18px;
    height: 18px;
    color: var(--blog-text-muted);
    flex-shrink: 0;
}
.search-bar input {
    flex: 1;
    padding: 14px 10px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-family: inherit;
    color: var(--blog-text);
}
.search-bar input:focus { outline: none; }
.search-bar button {
    padding: 0 24px;
    background: var(--blog-secondary);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: .15s ease;
}
.search-bar button:hover { background: var(--blog-secondary-hover); }
@media (max-width: 767px) {
    .search-head__title { font-size: 1.75rem; }
    .search-bar button { padding: 0 16px; font-size: 13px; }
}

/* 결과 섹션 */
.results-section { padding: 36px 0 64px; }

.results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
}
.results-bar__sort { display: flex; align-items: center; gap: 8px; }
.results-bar__sort a {
    color: var(--blog-text-sub);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 6px;
}
.results-bar__sort a:hover { color: var(--blog-primary); }
.results-bar__sort a.is-active {
    color: var(--blog-primary);
    font-weight: 800;
}
.results-bar__view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blog-text-muted);
    font-weight: 600;
}

/* 인기 검색어 섹션 */
.hot-keywords {
    padding: 48px 0 64px;
    background: var(--blog-bg-soft);
    border-top: 1px solid var(--blog-border);
}
.hot-keywords__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.hot-keywords__head h2 {
    font-size: 1.25rem;
    color: var(--blog-secondary);
    margin: 0;
    font-weight: 800;
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hot-keywords__head .pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blog-sale);
    box-shadow: 0 0 0 0 rgba(254, 83, 86, .6);
    animation: blog-pulse 1.8s infinite;
}
.hot-keywords__head .update {
    font-size: 11px;
    color: var(--blog-text-muted);
    font-weight: 600;
}
@keyframes blog-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(254, 83, 86, .6); }
    70%  { box-shadow: 0 0 0 12px rgba(254, 83, 86, 0); }
    100% { box-shadow: 0 0 0 0 rgba(254, 83, 86, 0); }
}

.hot-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
@media (max-width: 1024px) { .hot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .hot-grid { grid-template-columns: repeat(2, 1fr); } }

.hot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius-md);
    text-decoration: none;
    color: inherit;
    transition: .15s ease;
}
.hot-item:hover {
    border-color: var(--blog-primary);
    box-shadow: var(--blog-shadow-sm);
    transform: translateY(-1px);
}
.hot-item__rank {
    flex: 0 0 22px;
    font-size: 14px;
    font-weight: 800;
    color: var(--blog-text-muted);
    font-feature-settings: "tnum";
}
.hot-item:nth-child(-n+3) .hot-item__rank { color: var(--blog-primary); }
.hot-item__kw {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--blog-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hot-item__trend {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--blog-radius-sm);
}
.hot-item__trend.new {
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
}
.hot-item__trend.up {
    background: #ffeae8;
    color: var(--blog-sale);
}
.hot-item__trend.same {
    color: var(--blog-text-muted);
}


/* ============================================================
   20) 클러스터 허브 (clusters.php)
   (.cluster-grid / .cluster-card.c1~c4 / .why-cluster / .diagram /
    .recent / .section-head)
   ============================================================ */
.clusters { padding: 48px 0 24px; background: #ffffff; }

.cluster-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 767px) { .cluster-grid { grid-template-columns: 1fr; } }

.cluster-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: var(--blog-radius-xl);
    overflow: hidden;
    box-shadow: var(--blog-shadow-card);
    border: 1px solid var(--blog-border);
    text-decoration: none;
    color: inherit;
    transition: .25s ease;
}
.cluster-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--blog-shadow-hover);
}

/* 카드 그라데이션 변형 (c1~c4) */
.cluster-card.c1 .cluster-card__head { background: linear-gradient(135deg, #3561ff 0%, #6135ff 100%); }
.cluster-card.c2 .cluster-card__head { background: linear-gradient(135deg, #6135ff 0%, #7324ff 100%); }
.cluster-card.c3 .cluster-card__head { background: linear-gradient(135deg, #29b6f6 0%, #3561ff 100%); }
.cluster-card.c4 .cluster-card__head { background: linear-gradient(135deg, #3cdbc0 0%, #29b6f6 100%); }

.cluster-card__head {
    position: relative;
    padding: 28px 26px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 120px;
}
.cluster-card__head::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .15), transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, .12), transparent 40%);
    pointer-events: none;
}
.cluster-card__pillarBadge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    color: #ffffff;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: var(--blog-radius-pill);
    border: 1px solid rgba(255, 255, 255, .3);
}
.cluster-card__index {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .85);
    font-feature-settings: "tnum";
}
.cluster-card__emoji {
    font-size: 56px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25));
    margin-left: auto;
}

.cluster-card__body { padding: 22px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.cluster-card__name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--blog-secondary);
    margin: 0 0 8px;
    letter-spacing: -.015em;
}
.cluster-card__desc {
    font-size: 14px;
    color: var(--blog-text-sub);
    line-height: 1.6;
    margin: 0 0 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cluster-card__meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cluster-card__meta .chip {
    padding: 4px 10px;
    border-radius: var(--blog-radius-pill);
    background: var(--blog-bg-soft);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--blog-text-sub);
}
.cluster-card__meta .chip b { color: var(--blog-secondary); font-weight: 800; }
.cluster-card__meta .chip.is-pillar {
    background: var(--blog-primary-soft);
    color: var(--blog-primary);
}
.cluster-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 800;
    color: var(--blog-primary);
}
.cluster-card:hover .cluster-card__cta i {
    transform: translateX(2px);
    transition: transform .15s;
}

/* "왜 클러스터인가" 섹션 */
.why-cluster {
    padding: 80px 0;
    background: var(--blog-bg-soft);
}
.why-cluster__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
@media (max-width: 1024px) {
    .why-cluster__grid { grid-template-columns: 1fr; gap: 40px; }
}
.why-cluster__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--blog-primary);
    margin-bottom: 12px;
}
.why-cluster__title {
    font-size: 2rem;
    color: var(--blog-secondary);
    line-height: 1.3;
    letter-spacing: -.025em;
    font-weight: 800;
    margin: 0 0 18px;
}
.why-cluster__title em {
    font-style: normal;
    background: var(--blog-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.why-cluster__lead {
    font-size: 1rem;
    color: var(--blog-text-sub);
    line-height: 1.7;
    margin: 0 0 28px;
}
.why-cluster__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.why-cluster__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.why-cluster__item .num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--blog-gradient);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}
.why-cluster__item .txt {
    font-size: 14.5px;
    color: var(--blog-text);
    line-height: 1.7;
}

/* 다이어그램 */
.diagram {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    margin: 0 auto;
}
.diagram svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.diagram__pillar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--blog-gradient);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 12px 32px rgba(97, 53, 255, .35);
    text-align: center;
    padding: 0 8px;
}
.diagram__pillar .label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    opacity: .85;
}
.diagram__pillar .name {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}
.diagram__node {
    position: absolute;
    width: 92px;
    background: #ffffff;
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius-md);
    padding: 10px 6px;
    text-align: center;
    box-shadow: var(--blog-shadow-sm);
    font-size: 11px;
    font-weight: 700;
    color: var(--blog-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.diagram__node .emoji { font-size: 22px; }
.diagram__node .t { line-height: 1.3; }
/* 6개 노드의 방사형 배치 */
.diagram__node.n1 { top: 0;             left: 50%;         transform: translateX(-50%); }
.diagram__node.n2 { top: 22%;           right: 0; }
.diagram__node.n3 { bottom: 22%;        right: 0; }
.diagram__node.n4 { bottom: 0;          left: 50%;         transform: translateX(-50%); }
.diagram__node.n5 { bottom: 22%;        left: 0; }
.diagram__node.n6 { top: 22%;           left: 0; }

/* 최근 발행 글 섹션 */
.recent {
    padding: 64px 0 80px;
    background: #ffffff;
}
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}
.section-head__left .eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--blog-primary);
    margin-bottom: 8px;
}
.section-head__left h2 {
    font-size: 1.75rem;
    color: var(--blog-secondary);
    margin: 0;
    font-weight: 800;
    letter-spacing: -.02em;
}
.section-head__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blog-primary);
    text-decoration: none;
}
.section-head__more:hover { color: var(--blog-primary-hover); }


/* ============================================================
   21) 공용 chip
   ──────────────────────────────────────────────────────────────
   여러 페이지에서 단독 .chip 가 사용됨 (empty-state suggests,
   cluster card meta 안의 chip)
   ============================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* ============================================================
   22) 인쇄용 (Print)
   ============================================================ */
@media print {
    .filter-bar,
    .toolbar,
    .side,
    .scroll-end,
    .blog-pillar-toc,
    .blog-toc,
    .blog-cta-box,
    .seo-pagination,
    .pagination-fallback,
    .seo-pager,
    .blog-pagination {
        display: none !important;
    }
    .blog-grid,
    .blog-cluster-grid,
    .cluster-grid { grid-template-columns: 1fr; }
}