/* ─────────────────────────────────────────
   Blog Archive — LIGHT, Linear "Now"-style listing
   (title + category tabs + search + 3-col cards)
   ───────────────────────────────────────── */
.blog-archive {
    background: var(--c-bg-white, #fff);
    padding: clamp(72px, 9vw, 120px) 0 96px;
    min-height: 70vh;
    color: var(--c-text-dark);
    position: relative;
    overflow: hidden;
}
/* 헤더 뒤 은은한 시그니처 워시 — 홈 hero 그라디언트의 저채도 버전 */
.blog-archive::before {
    content: ""; position: absolute; top: -260px; left: 50%;
    transform: translateX(-50%);
    width: 1100px; height: 620px;
    background:
        radial-gradient(circle at 30% 30%, rgba(82, 144, 255, 0.16), transparent 60%),
        radial-gradient(circle at 70% 40%, rgba(136, 146, 250, 0.12), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(255, 175, 200, 0.07), transparent 55%);
    filter: blur(80px);
    pointer-events: none;
}
.blog-archive > .container { position: relative; z-index: 1; }

/* header (left-aligned) — Linear처럼 타이틀과 툴바를 타이트하게 */
.blog-archive__header { max-width: 760px; margin: 0 0 22px; }
/* 타이틀 크기 = 다른 아카이브(news-archive__title)와 동일 스케일 */
.blog-archive__hd {
    font-size: clamp(36px, 4.5vw, 56px); font-weight: 600;
    line-height: 1.05; margin: 0; color: var(--c-text-heading);
}
/* (서브타이틀 제거됨 — 카피는 <title>/메타에 유지) */

/* toolbar: category tabs (left) + search (right) — Linear처럼 텍스트 탭 + 미니멀 필 검색 */
.blog-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 36px;
}
.blog-filter { display: flex; flex-wrap: wrap; gap: 24px; }
.blog-filter__tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    display: inline-block; text-decoration: none;
    padding: 4px 0; font: inherit; font-size: 15px;
    font-weight: 500; color: var(--c-text-subtle);
    transition: color 0.15s ease;
}
.blog-filter__tab:hover { color: var(--c-text-dark); }
.blog-filter__tab.is-active { color: var(--c-text-heading); font-weight: 600; }
.blog-search {
    display: inline-flex; align-items: center; gap: 9px; width: 260px;
    padding: 10px 16px; background: #fff;
    border: 1px solid var(--c-border-light); border-radius: 999px;
    transition: border-color 0.15s ease;
}
.blog-search:focus-within { border-color: rgba(28, 28, 28, 0.28); }
.blog-toolbar__right { display: inline-flex; align-items: center; gap: 10px; }
/* 날짜 정렬 토글 — desc(최신순) 기본, asc면 화살표 180도 */
.blog-sort {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    background: #fff !important; border: 1px solid var(--c-border-light) !important;
    border-radius: 999px !important; padding: 0 !important; box-shadow: none !important;
    color: var(--c-text-subtle);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.blog-sort:hover { color: var(--c-text-dark); border-color: rgba(28, 28, 28, 0.28) !important; }
.blog-sort svg { transition: transform 0.2s ease; }
.blog-sort[data-dir="asc"] svg { transform: rotate(180deg); }
.blog-search__ico { color: var(--c-text-subtle); flex: 0 0 auto; }
/* ibm-overrides의 전역 input[type=search] 룰(!important)이 인풋을 또 한 번
   박스로 감싸 이중 필이 됨 → 더 높은 특이도로 안쪽 완전 리셋.
   박스는 .blog-search(바깥) 하나만. */
.blog-search .blog-search__input {
    border: 0 !important; background: transparent !important;
    border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
    outline: none; width: 100%;
    font-size: 14px; color: var(--c-text-dark);
}
/* 네이티브 X(clear) 버튼 — 기본 색이 튀어서 회색 커스텀 마스크로 교체 */
.blog-search .blog-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
    width: 13px; height: 13px; cursor: pointer; flex: 0 0 auto;
    background-color: var(--c-text-subtle);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.blog-search .blog-search__input::-webkit-search-cancel-button:hover { background-color: var(--c-text-dark); }

/* 3-col grid — 카드 사이 세로 헤어라인은 카드별 ::before(카드 높이만큼만).
   어느 카드에 선을 그릴지는 blog-filter.js가 컬럼 수·필터 상태 보고
   .has-vline을 토글(첫 컬럼 제외). */
.blog-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 88px 40px; transition: opacity 0.18s ease; }
/* AJAX 교체 중 로딩 상태 */
.blog-archive__grid.is-loading { opacity: 0.35; pointer-events: none; }
@media (max-width: 1024px) { .blog-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .blog-archive__grid { grid-template-columns: 1fr; }
    .blog-archive { padding: 96px 0 64px; }   /* 헤더(65px)가 위에 얹힘 — 보강 */
}

/* card: thumbnail on top, text below (borderless, Linear-style) */
.blog-card { background: transparent; cursor: pointer; display: flex; flex-direction: column; color: var(--c-text-dark); position: relative; }
/* 카드 좌측 세로 헤어라인 — 컬럼 gap(40px)의 중앙 */
.blog-card::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -20px;
    width: 1px; background: var(--c-border-light); display: none;
}
.blog-card.has-vline::before { display: block; }
.blog-card__thumb {
    border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10;
    background: var(--c-bg-light); border: 1px solid var(--c-border-light); margin-bottom: 22px;
    transition: box-shadow 0.25s ease;
}
.blog-card__thumb a { display: block; width: 100%; height: 100%; }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 호버: 썸네일 그림자 하나만 (줌/리프트/보더 ❌) */
.blog-card:hover .blog-card__thumb {
    box-shadow: 0 16px 32px -16px rgba(23, 23, 25, 0.20);
}
/* 썸네일 없을 때 기본값 — 커밍순과 동일한 보라 룩(그라데이션 + 심볼), 뱃지는 없음 */
.blog-card__thumb-ph {
    position: relative; display: block; width: 100%; height: 100%;
    background:
        radial-gradient(120% 120% at 80% 10%, color-mix(in srgb, #5290FF 16%, transparent), transparent 60%),
        color-mix(in srgb, #5290FF 7%, #fff);
}
.blog-card__thumb-ph::after {
    content: ""; position: absolute; inset: 0;
    background-color: #5290FF; opacity: .5;
    -webkit-mask: url('../images/article/article-default.svg') center / contain no-repeat;
            mask: url('../images/article/article-default.svg') center / contain no-repeat;
}
.blog-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto; }
/* 카테고리: 날짜와 같은 폰트·크기·회색 (메타 스타일 상속) */
.blog-card__cat { color: inherit; }
/* 전역 h2 헤딩 룰(lh 1.05 / ls -1.2px !important)이 카드 제목을 짓누름 →
   카드 크기(20px)에 맞는 행간·자간으로 !important 탈환 */
.blog-card__name {
    font-size: 20px; font-weight: 600; margin: 0; color: var(--c-text-heading);
    line-height: 1.4 !important; letter-spacing: -0.3px !important;
}
.blog-card__name a { color: inherit; text-decoration: none; }
.blog-card:hover .blog-card__name { color: var(--c-accent-violet); }
.blog-card__excerpt {
    font-size: 15px; line-height: 1.62; letter-spacing: -0.1px; color: var(--c-text-muted); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* meta: 카테고리 · 날짜 — margin-top:auto로 항상 카드 하단 정렬 */
.blog-card__meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: auto; padding-top: 22px;
    font-size: 13px; color: var(--c-text-subtle);
}

.blog-archive__empty { text-align: center; color: var(--c-text-subtle); padding: 64px 0; }

/* pagination (light) */
.blog-archive__pagination { margin-top: 64px; display: flex; justify-content: center; }
.blog-archive__pagination .nav-links,
.blog-archive__pagination > * { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.blog-archive__pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px; background: #fff;
    border: 1px solid var(--c-border-light); border-radius: 8px;
    color: var(--c-text-dark); font-size: 14px; text-decoration: none; transition: all 0.15s ease;
}
.blog-archive__pagination .page-numbers:hover { border-color: var(--c-accent-violet); color: var(--c-accent-violet); }
.blog-archive__pagination .page-numbers.current { background: var(--c-accent-violet); border-color: var(--c-accent-violet); color: #fff; }
.blog-archive__pagination .page-numbers.dots { border-color: transparent; cursor: default; }
.blog-archive__pagination .screen-reader-text { position: absolute; left: -9999px; }

/* ─────────────────────────────────────────
   Blog Single Post — LIGHT article page
   (아카이브와 같은 톤: 흰 배경 + 시그니처 워시 + violet 링크.
    네이밍 주의: __tags/__chip 등 IBM 트랩 substring 금지 → __topics/__topic/__copylink)
   ───────────────────────────────────────── */
.blog-single {
    background: #fff;
    padding: clamp(64px, 8vw, 104px) 0 96px;
    color: var(--c-text-dark);
    position: relative;
    overflow: clip;   /* clip(스크롤 컨테이너 X) — overflow:hidden은 우측 aside sticky를 깨뜨림 */
}
.blog-single::before {
    content: ""; position: absolute; top: -280px; left: 50%;
    transform: translateX(-50%);
    width: 1000px; height: 560px;
    background:
        radial-gradient(circle at 30% 30%, rgba(82, 144, 255, 0.13), transparent 60%),
        radial-gradient(circle at 70% 40%, rgba(136, 146, 250, 0.10), transparent 60%);
    filter: blur(80px);
    pointer-events: none;
}
.blog-single > .container { position: relative; z-index: 1; }

/* 제목·본문·사이드바 한 그룹 정렬 — .blog-col(가운데 고정) 안에서 제목 풀폭 + 본문(680ish)·aside */
.blog-col { max-width: 880px; margin: 0 auto; }
.blog-layout { display: flex; align-items: flex-start; gap: clamp(28px, 4vw, 52px); }
.blog-single__article { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }

.blog-aside { flex: 0 0 150px; position: sticky; top: 92px; display: flex; flex-direction: column; gap: 22px; }
.blog-aside__hd {
    display: block; margin-bottom: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-text-subtle);
}
.blog-aside__topics { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.blog-aside__topic { font-size: 13px; color: var(--c-text-muted); }
.blog-aside__copy {
    width: 44px; height: 44px; border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 1px solid var(--c-border-light); background: #fff; color: var(--c-text-muted); cursor: pointer;
    transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.blog-aside__copy svg { display: block; }
.blog-aside__copy:hover { border-color: var(--c-accent-violet); color: var(--c-accent-violet); }
.blog-aside__copy:active { transform: scale(0.94); }
.blog-aside__copy.is-copied { color: var(--c-accent-violet); border-color: var(--c-accent-violet); }
.blog-aside__copy .blog-aside__ico-ok { display: none; }
.blog-aside__copy.is-copied .blog-aside__ico-link { display: none; }
.blog-aside__copy.is-copied .blog-aside__ico-ok { display: block; }

@media (max-width: 960px) {
    .blog-layout { flex-direction: column; }
    .blog-single__article { flex-basis: auto; max-width: 100%; width: 100%; }
    .blog-aside {
        position: static; flex-basis: auto; width: 100%;
        margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-border-light);
        flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    }
    .blog-aside__hd { display: none; }   /* 모바일은 라벨 생략, #태그만 */
}

/* eyebrow: 카테고리 · 날짜 (제목 위) */
.blog-single__meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--c-text-subtle);
    margin: 0 0 18px;
}
.blog-single__meta-cat { color: var(--c-accent-violet-text); }
/* 작성자 byline — 이름은 mailto 링크 (메타 톤 유지, 호버 시 보라) */
.blog-single__meta-author a { color: inherit; text-decoration: none; }
.blog-single__meta-author a:hover { color: var(--c-accent-violet-text); text-decoration: underline; }

.blog-single__header { margin-bottom: 28px; }
/* 전역 h1 룰(700/-1.8px/1.05)이 아티클 제목엔 과함 → 칼럼 스케일로 완화 */
.blog-single__title {
    font-size: clamp(30px, 4vw, 42px); font-weight: 600 !important;
    line-height: 1.25 !important; letter-spacing: -0.8px !important;
    color: var(--c-text-heading); margin: 0;
}

.blog-single__featured {
    margin: 0 0 40px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--c-border-light); background: var(--c-bg-light);
}
.blog-single__featured img { width: 100%; height: auto; display: block; }

/* ── 본문 (Gutenberg, light) — 토큰: --c-text-body(82% 검정), KO 행간 1.8 ── */
.blog-single__content.entry-content {
    font-size: 17px;
    line-height: 1.8;
    letter-spacing: -0.1px;
    /* 본문은 순검정보다 한 톤 죽인 진회색(Linear 톤) — 강조 요소가 살아난다 */
    color: rgba(28, 28, 28, 0.75);
}
.blog-single__content.entry-content > * { margin-bottom: 1.1em; }

.blog-single__content.entry-content h1,
.blog-single__content.entry-content h2,
.blog-single__content.entry-content h3,
.blog-single__content.entry-content h4 {
    color: var(--c-text-heading);
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.4px !important;
    margin: 2em 0 0.7em;
}
.blog-single__content.entry-content h1 { font-size: 26px; }
.blog-single__content.entry-content h2 { font-size: 24px; }
.blog-single__content.entry-content h3 { font-size: 20px; }
.blog-single__content.entry-content h4 { font-size: 18px; }

/* 링크: 접근성 보라(흰 배경 AA) + 옅은 밑줄 → hover 시 진해짐 */
.blog-single__content.entry-content a {
    color: var(--c-accent-violet-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(111, 80, 204, 0.35);
    transition: text-decoration-color 0.15s ease;
}
.blog-single__content.entry-content a:hover { text-decoration-color: currentColor; }

/* 이미지: 가운데 정렬 + 카드 톤(r8 + 헤어라인) */
.blog-single__content.entry-content img {
    display: block; margin: 32px auto; max-width: 100%; height: auto;
    border-radius: 8px; border: 1px solid var(--c-border-light);
}
.blog-single__content.entry-content figure { margin: 32px auto; text-align: center; }
.blog-single__content.entry-content figure img { margin: 0 auto; }
.blog-single__content.entry-content figcaption {
    font-size: 13px; color: var(--c-text-subtle); margin-top: 10px; text-align: center;
}

/* ── Rank Math TOC: 카드 → 상하 헤어라인 구획. 라벨('목차'/'Table of Contents')은
   굵은 토글(클릭 시 접힘, 셰브론 회전 — single-blog.php 인라인 JS) ── */
.blog-single__content figure:has(+ .wp-block-rank-math-toc-block) {
    margin: 0 !important;
    padding: 16px 0;
    border-top: 1px solid var(--c-border-light);    /* 상단 헤어라인 */
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
}
.blog-single__content figure:has(+ .wp-block-rank-math-toc-block) span {
    font-size: 24px !important;    /* 본문 섹션 헤딩(h2)과 동일 스케일 */
    font-weight: 700 !important;   /* ibm span 400 트랩 대비 !important */
    font-family: var(--font-display) !important;
    letter-spacing: -0.3px !important;
    line-height: 1.3 !important;
    text-transform: none;
    color: var(--c-text-dark) !important;
}
/* 아코디언 셰브론 — 펼침 = 위(접을 수 있음), 접힘 = 아래(펼칠 수 있음) */
.blog-single__content figure:has(+ .wp-block-rank-math-toc-block)::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 1.6px solid var(--c-text-subtle);
    border-bottom: 1.6px solid var(--c-text-subtle);
    transform: rotate(225deg) translate(-2px, -2px);   /* 펼침 = 위 */
    transition: transform 0.2s ease;
    margin-right: 4px;
    flex: 0 0 auto;
}
.blog-single__content figure.toc-collapsed::after { transform: rotate(45deg); }   /* 접힘 = 아래 */
.blog-single__content .wp-block-rank-math-toc-block {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-border-light);   /* 하단 헤어라인 */
    border-radius: 0;
    padding: 4px 0 18px;
    margin: 0 0 36px;
    /* 높이 애니메이션 열림/닫힘 (grid-rows 0fr↔1fr) */
    display: grid; grid-template-rows: 1fr; opacity: 1;
    transition: grid-template-rows .34s ease, opacity .26s ease, padding-block .34s ease, margin-bottom .34s ease, border-bottom-color .2s ease;
}
.blog-single__content .wp-block-rank-math-toc-block > * { min-height: 0; overflow: hidden; }
/* 접힘 상태 — display:none 대신 높이 0으로 접어 부드럽게. 라벨 figure가 하단 헤어라인 위임 */
.blog-single__content .wp-block-rank-math-toc-block.toc-hidden {
    grid-template-rows: 0fr; opacity: 0;
    padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-bottom-color: transparent;
}
@media (prefers-reduced-motion: reduce) { .blog-single__content .wp-block-rank-math-toc-block { transition: none; } }
.blog-single__content figure.toc-collapsed { border-bottom: 1px solid var(--c-border-light); margin-bottom: 36px !important; }
/* TOC 래퍼가 두 겹으로 저장된 글(렌더가 저장 마크업을 또 감쌈) — 안쪽 껍질은
   카드 스타일 무력화(이중 카드 방지), 혹시 형제로 중복된 블록은 숨김 */
.blog-single__content .wp-block-rank-math-toc-block .wp-block-rank-math-toc-block {
    background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0;
}
.blog-single__content .wp-block-rank-math-toc-block + .wp-block-rank-math-toc-block { display: none; }
.blog-single__content .wp-block-rank-math-toc-block nav > ul { list-style: none; padding-left: 14px; margin: 0; }   /* 라벨 대비 들여쓰기 */
.blog-single__content .wp-block-rank-math-toc-block li { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; }
.blog-single__content .wp-block-rank-math-toc-block li:last-child { margin-bottom: 0; }
.blog-single__content .wp-block-rank-math-toc-block ul ul { list-style: none; padding-left: 16px; margin: 6px 0 0; }
.blog-single__content.entry-content .wp-block-rank-math-toc-block a {
    color: var(--c-text-muted); text-decoration: none;
    transition: color 0.15s ease;
}
.blog-single__content.entry-content .wp-block-rank-math-toc-block a:hover { color: var(--c-accent-violet-text); }

/* 앵커 점프 시 고정 헤더에 제목이 가리지 않게 */
.blog-single__content [id] { scroll-margin-top: 96px; }

/* glossary/product 자동링크: 진회색 본문 속에서 검정 글자 + 점선 밑줄로 살짝 도드라지게 */
.blog-single__content.entry-content a.glossary-link,
.blog-single__content.entry-content a.product-link {
    color: var(--c-text-dark); text-decoration: none;
    border-bottom: 1px dotted rgba(28, 28, 28, 0.3);
    /* 줄바꿈 시 둘째 줄 조각에도 점선·호버 밑줄이 완전히 그려지게(slice→clone) */
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.blog-single__content.entry-content a.glossary-link:hover,
.blog-single__content.entry-content a.product-link:hover {
    color: var(--c-accent-violet-text);
    border-bottom-style: solid; border-bottom-color: currentColor;
}
/* 싱글 글 eyebrow(카테고리·날짜) 속 제품 링크: 메타 톤 유지 + 호버 보라 */
.blog-single__meta-cat a.product-link {
    color: inherit; text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: color 0.15s ease;
}
.blog-single__meta-cat a.product-link:hover { color: var(--c-accent-violet-text); }
/* 카드 카테고리 배지 속 제품 링크: 메타 톤 유지 + 호버 시 보라 */
.blog-card__cat a.product-link {
    color: inherit; text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: color 0.15s ease;
}
.blog-card__cat a.product-link:hover { color: var(--c-accent-violet-text); }

.blog-single__content.entry-content ul,
.blog-single__content.entry-content ol { padding-left: 24px; margin-bottom: 1.1em; }
.blog-single__content.entry-content li { margin-bottom: 8px; }
.blog-single__content.entry-content ul { list-style: disc; }
.blog-single__content.entry-content ol { list-style: decimal; }

.blog-single__content.entry-content blockquote {
    border-left: 2px solid var(--c-accent-violet-text);
    padding: 4px 0 4px 20px; margin: 1.6em 0;
    color: var(--c-text-muted);
}

.blog-single__content.entry-content code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: rgba(28, 28, 28, 0.05);
    padding: 2px 6px; border-radius: 4px;
    color: var(--c-text-dark);
}
.blog-single__content.entry-content pre {
    background: #fafafc; border: 1px solid var(--c-border-light);
    padding: 16px 20px; border-radius: 8px; overflow-x: auto;
    font-family: var(--font-mono); font-size: 14px; line-height: 1.6;
    margin: 1.6em 0;
}
.blog-single__content.entry-content pre code { background: none; padding: 0; }

/* ── 푸터: 헤어라인 → 닷 구분 태그(가운데) → 카피링크 버튼(가운데, 아래 위계) ──
   태그는 뱃지/배경 제거·플레인 텍스트, 링크 없음(태그 아카이브 미디자인) */
/* Linear식 푸터: 헤어라인 → [태그 좌정렬] ←→ [Copy link 텍스트버튼 우정렬] */
/* 태그 1열 → 카피링크 1열, 둘 다 가운데 정렬 */
.blog-single__footer {
    max-width: 680px; margin: 56px auto 0;
    padding-top: 24px; border-top: 1px solid var(--c-border-light);
    display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: flex-end;
    gap: 16px;
    background: transparent !important;
}
.blog-single__topics {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 4px 9px; font-size: 12.5px; color: var(--c-text-subtle);
    background: transparent !important;
}
.blog-single__topic { text-transform: lowercase; letter-spacing: 0.01em; background: transparent !important; border: 0 !important; padding: 0 !important; }
.blog-single__topic-dot { color: var(--c-text-faint); }
.blog-single__share { margin: 0; background: transparent !important; }
/* 아웃라인 버튼 (디자인시스템 btn--contact 결) */
.blog-single__copylink {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    font: inherit; font-size: 13px; font-weight: 500;
    color: var(--c-text-body, #4a4a52); background: transparent;
    border: 1px solid var(--c-border-light); border-radius: 6px;
    padding: 9px 18px; line-height: 1.4;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.blog-single__copylink svg { display: block; }
.blog-single__copylink:hover { color: var(--c-text-dark); border-color: var(--c-text-dark); }
.blog-single__copylink.is-copied { color: var(--c-accent-violet-text); border-color: var(--c-accent-violet); }

@media (max-width: 768px) {
    .blog-single { padding: 92px 0 64px; }
}

/* ─────────────────────────────────────────
   Legacy index.php/single.php (fallback)
   Retained for non-CPT archives/search.
   (blog-archive__header / __hd defined above in the light archive block.)
   ───────────────────────────────────────── */
.single-post__container {
    max-width: 780px;
    margin: 0 auto;
}

.single-post__header {
    padding-top: var(--gap-md);
    margin-bottom: var(--gap-md);
}

.single-post__date {
    font-size: var(--fs-small);
    color: var(--c-text-subtle);
    font-family: var(--font-mono);
}

.single-post__title {
    font-size: var(--fs-h1);
    margin-top: var(--gap-xxs);
    margin-bottom: var(--gap-xs);
}

.single-post__excerpt {
    font-size: var(--fs-body-lg);
    color: var(--c-text-muted);
}

.single-post__featured {
    margin-bottom: var(--gap-md);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.single-post__featured img {
    width: 100%;
}

.entry-content {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-text-heading);
}

.entry-content h2 { font-size: var(--fs-h2); margin: var(--gap-md) 0 var(--gap-xs); }
.entry-content h3 { font-size: var(--fs-h3); margin: var(--gap-sm) 0 var(--gap-xxs); }
.entry-content h4 { font-size: var(--fs-h4); margin: var(--gap-sm) 0 var(--gap-xxs); }

/* ── Generic Page ── */
.generic-page__container {
    max-width: 780px;
    margin: 0 auto;
}

.generic-page__title {
    font-size: var(--fs-h1);
    padding-top: var(--gap-md);
    margin-bottom: var(--gap-md);
}

/* ── Contact Page ── */
.contact-page {
    min-height: 60vh;
}

.contact-page__inner {
    max-width: 640px;
    margin: 0 auto;
}

.contact-page__header {
    text-align: center;
    margin-bottom: var(--gap-lg);
    padding-top: var(--gap-md);
}

.contact-page__title {
    font-size: var(--fs-h1);
    margin-bottom: var(--gap-xs);
}

.contact-page__subtitle {
    color: var(--c-text-subtle);
}

.contact-page__form .wpcf7-form input[type="text"],
.contact-page__form .wpcf7-form input[type="email"],
.contact-page__form .wpcf7-form textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--c-bg-dark-card);
    border: 1px solid var(--c-border-dark);
    border-radius: var(--r-sm);
    color: var(--c-text-white);
    font-family: var(--font-primary);
    font-size: var(--fs-body);
}

.contact-page__form .wpcf7-form input[type="submit"] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--c-bg-white);
    color: var(--c-text-dark);
    border: none;
    border-radius: var(--r-sm);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition);
}

.contact-page__form .wpcf7-form input[type="submit"]:hover {
    opacity: 0.85;
}

.contact-page__info {
    margin-top: var(--gap-md);
    text-align: center;
    font-size: var(--fs-small);
    color: var(--c-text-subtle);
}

.contact-page__info a {
    color: var(--c-accent-purple);
}

/* pagination 화살표 — 글리프(‹›) 잉크 치우침 → SVG 셰브론, flex 정중앙 */
.blog-archive__pagination .page-numbers svg { display: block; }

/* 모바일 toolbar — 탭은 가로 스크롤 한 줄(우측 페이드 힌트), 검색은 아래 풀폭 */
@media (max-width: 640px) {
    .blog-toolbar { flex-direction: column; align-items: stretch; gap: 16px; }
    .blog-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: relative;
    }
    .blog-filter::-webkit-scrollbar { display: none; }
    .blog-filter__tab { flex: 0 0 auto; white-space: nowrap; }
    .blog-toolbar__right { display: flex; width: 100%; gap: 10px; }
    .blog-search { flex: 1 1 auto; width: auto; }
}

/* ── Easy TOC(ez-toc 플러그인) 스킨 — Rank Math TOC와 동일 디자인 통일.
   플러그인 screen.min.css + 인라인 스타일을 #id 특이도 + !important로 제압 ── */
.blog-single__content #ez-toc-container {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--c-border-light) !important;
    border-bottom: 1px solid var(--c-border-light) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 0 18px !important;
    margin: 0 0 36px !important;
    width: 100% !important;
}
.blog-single__content #ez-toc-container .ez-toc-title-container {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
    padding: 2px 0 6px;
    -webkit-user-select: none; user-select: none;
}
.blog-single__content #ez-toc-container .ez-toc-title {
    font-size: 24px !important;    /* 본문 섹션 헤딩(h2)과 동일 스케일 */
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    letter-spacing: -0.3px !important;
    line-height: 1.3 !important;
    color: var(--c-text-dark) !important;
    margin: 0 !important;
    cursor: pointer !important;
}
/* 플러그인 토글(햄버거+정렬화살표 svg) 숨기고 우리 셰브론으로 통일 */
.blog-single__content #ez-toc-container .ez-toc-title-toggle { display: none !important; }
.blog-single__content #ez-toc-container .ez-toc-title-container::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 1.6px solid var(--c-text-subtle);
    border-bottom: 1.6px solid var(--c-text-subtle);
    transform: rotate(225deg) translate(-2px, -2px);   /* 펼침 = 위 */
    transition: transform 0.2s ease;
    margin-right: 4px;
    flex: 0 0 auto;
}
.blog-single__content #ez-toc-container.toc-collapsed .ez-toc-title-container::after { transform: rotate(45deg); }   /* 접힘 = 아래 */
/* 목록 열림/닫힘 높이 애니메이션 (display:none 대신 grid-rows 0fr↔1fr) */
.blog-single__content #ez-toc-container nav { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .34s ease, opacity .26s ease; }
.blog-single__content #ez-toc-container nav > * { min-height: 0; overflow: hidden; }
.blog-single__content #ez-toc-container.toc-collapsed nav { grid-template-rows: 0fr; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .blog-single__content #ez-toc-container nav { transition: none; } }
/* 리스트: 번호(disc counter) 제거 + 들여쓰기 + 우리 링크 톤 */
.blog-single__content #ez-toc-container nav ul li a::before { content: none !important; }
.blog-single__content #ez-toc-container nav > ul {
    list-style: none !important;
    padding-left: 14px !important;
    margin: 10px 0 0 !important;
}
.blog-single__content #ez-toc-container nav ul ul { list-style: none !important; padding-left: 16px !important; margin: 6px 0 0 !important; }
.blog-single__content #ez-toc-container li { margin: 0 0 6px !important; font-size: 14.5px !important; line-height: 1.55 !important; }
.blog-single__content #ez-toc-container a.ez-toc-link {
    color: var(--c-text-muted) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    font-size: 14.5px !important;
    transition: color 0.15s ease;
}
.blog-single__content #ez-toc-container a.ez-toc-link:hover { color: var(--c-accent-violet-text) !important; }

/* ── ez-toc 제목 변형(.ez-toc-box-title) 흡수 — 설정에서 제목 재입력 시 이 마크업으로 나옴.
   플러그인이 absolute(top:-4%)로 띄우는 걸 일반 흐름의 우리 제목 스타일로 복원 ── */
.blog-single__content #ez-toc-container .ez-toc-box-title {
    position: static !important;
    top: auto !important; left: auto !important;
    background: transparent !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: -0.3px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    font-family: var(--font-display) !important;
    color: var(--c-text-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;
    cursor: pointer;
}
/* box-title 모드에선 title-container가 토글 줄만 남음 — JS가 box-title을 안으로 옮겨 flex 복원 */

/* ── TOC 리스트 항목 앞 닷 (Rank Math + ez-toc 공통) ── */
.blog-single__content .wp-block-rank-math-toc-block nav > ul li,
.blog-single__content #ez-toc-container nav > ul li {
    position: relative;
    padding-left: 13px !important;
}
.blog-single__content .wp-block-rank-math-toc-block nav > ul li::before,
.blog-single__content #ez-toc-container nav > ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.62em;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--c-text-faint, rgba(28, 28, 28, 0.3));
}

/* ── Learn 허브 / Articles / Proof 페이지 (blog-archive 톤 재사용) ── */
.learn-hub__sub {
    margin: 16px 0 0;
    font-size: 16px; line-height: 1.65; letter-spacing: -0.1px;
    color: var(--c-text-muted);
    max-width: 640px;
}
.learn-hub__grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px; margin: 44px 0 0;
}
.learn-hub__card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 24px; min-height: 150px;
    background: #fff; border: 1px solid var(--c-border-light); border-radius: 12px;
    text-decoration: none; position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.learn-hub__card:hover {
    border-color: var(--c-accent-violet);
    box-shadow: 0 12px 28px -16px rgba(82, 144, 255, 0.45);
}
.learn-hub__card-name { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: var(--c-text-heading); }
.learn-hub__card-desc { font-size: 13.5px; line-height: 1.55; color: var(--c-text-muted); }
.learn-hub__card-arrow { margin-top: auto; color: var(--c-accent-violet); font-size: 15px; }
.learn-hub__recent { margin-top: 72px; }
.learn-hub__recent-hd {
    font-size: 22px !important; font-weight: 700 !important;
    letter-spacing: -0.3px !important; margin: 0 0 28px;
    color: var(--c-text-heading);
}
.articles-page__cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.proof-page { padding-bottom: 0 !important; min-height: 0 !important; }
@media (max-width: 1024px) { .learn-hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .learn-hub__grid { grid-template-columns: 1fr; } }

/* ============================================================
   공용 FAQ 아코디언 (.cubig-faq) — article + blog 본문 하단.
   글로서리 FAQ 톤 계승. 색 액센트는 article=엔티티(--ent), blog=보라 폴백.
   ============================================================ */
/* References(참고문헌) — 본문 끝 번호형 출처 (Sources 메타박스, blog). 헤어라인·제목크기 = FAQ와 통일 */
.cubig-refs { margin-top: clamp(40px, 5vw, 60px); }
.cubig-refs__h {
    margin: 0 0 16px !important;
    font-size: clamp(20px, 2.4vw, 24px) !important;
    font-weight: 700 !important; letter-spacing: -0.3px !important;
    color: var(--c-text-heading) !important;
}
.cubig-refs__list { list-style: none; margin: 0; padding: 18px 0 0; counter-reset: ref; border-top: 1px solid var(--c-border-light); }
.cubig-refs__item {
    position: relative; padding-left: 28px; margin: 0 0 10px;
    font-size: 14px; line-height: 1.55; color: var(--c-text-body);
}
.cubig-refs__item:last-child { margin-bottom: 0; }
.cubig-refs__item::before {
    counter-increment: ref; content: "[" counter(ref) "]";
    position: absolute; left: 0; top: 0; color: var(--c-text-subtle);
    font-variant-numeric: tabular-nums; font-size: 13px;
}
.cubig-refs__item a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--c-border-interactive); }
.cubig-refs__item a:hover { color: var(--c-accent-violet-text); border-bottom-color: currentColor; }

.cubig-faq { margin-top: clamp(40px, 5vw, 60px); }   /* 위 헤어라인 제거 — 마지막 아코디언 항목 border가 아래를 닫음 */
.cubig-faq__h {
    margin: 0 0 16px !important;
    font-size: clamp(20px, 2.4vw, 24px) !important;
    font-weight: 700 !important; letter-spacing: -0.3px !important;
    color: var(--c-text-heading) !important;
}
.cubig-faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--c-border-light); }
.cubig-faq__item { border-bottom: 1px solid var(--c-border-light); }
.cubig-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 2px;
    font-size: 15px; font-weight: 700; letter-spacing: -0.1px;
    color: var(--c-text-heading);
    cursor: pointer; list-style: none;
    transition: color 0.15s ease;
}
.cubig-faq__q::-webkit-details-marker { display: none; }
.cubig-faq__q:hover { color: var(--ent, var(--c-accent-violet, #5290FF)); }
.cubig-faq__item[open] .cubig-faq__q { color: var(--ent, var(--c-accent-violet, #5290FF)); }
.cubig-faq__chev {
    flex: 0 0 auto; color: var(--c-text-subtle);
    transition: transform 0.2s ease, color 0.15s ease;
}
.cubig-faq__item[open] .cubig-faq__chev { transform: rotate(180deg); color: var(--ent, var(--c-accent-violet, #5290FF)); }
.cubig-faq__a {
    padding: 0 2px 20px; max-width: 64ch;
    font-size: 15px; line-height: 1.65; color: var(--c-text-body);
}
.cubig-faq__a p { margin: 0 0 0.8em; }
.cubig-faq__a p:last-child { margin-bottom: 0; }