/* BlueTraffic 블로그: blog.php / blog-post.php 전용 (traffic-v6.css 토큰 사용). */

/* 헤더(.v6-header-inner: max 1220 - padding 26*2 = 1168)와 본문 좌우 끝을 맞춘다. */
body.bt-blog-page .container { width:min(100% - 52px,1168px); max-width:1168px; }

/* traffic.css 가 모든 <section> 에 전역 여백을 넣기 때문에 새 섹션은 직접 리셋한다. */
.bt-blog-hero,
.bt-blog-featured-section,
.bt-blog-list-section,
.bt-post-head,
.bt-post-body-section,
.bt-post-related-section { padding:0; }

body.bt-blog-page main h1,
body.bt-blog-page main h2,
body.bt-blog-page main h3,
body.bt-blog-page main p,
body.bt-blog-page main li,
body.bt-blog-page main summary { overflow-wrap:break-word; word-break:keep-all; }

.bt-breadcrumb { align-items:center; color:var(--v6-muted); display:flex; flex-wrap:wrap; font-size:13px; font-weight:650; gap:8px; margin-bottom:24px; }
.bt-breadcrumb a { color:var(--v6-copy); }
.bt-breadcrumb a:hover { color:var(--v6-brand); }
.bt-eyebrow { color:var(--v6-brand); display:block; font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }

.bt-btn-primary { align-items:center; background:var(--v6-brand); border-radius:999px; box-shadow:0 14px 28px -14px rgba(242,84,45,.65); color:#fff; display:inline-flex; font-size:15px; font-weight:750; gap:9px; justify-content:center; min-height:52px; padding:14px 25px; transition:transform .2s ease,box-shadow .2s ease; }
.bt-btn-primary:hover { box-shadow:0 14px 25px -16px rgba(33,29,24,.45); color:#fff; transform:translateY(-2px); }

/* ── 목록 히어로 ──────────────────────────────────────────────────────── */
body.bt-blog-page main>section.bt-blog-hero { background:var(--v6-bg); padding:44px 0 34px; }
.bt-blog-hero h1 { color:var(--v6-ink); font-size:clamp(32px,4.4vw,50px); font-weight:850; letter-spacing:-.05em; line-height:1.16; margin:14px 0 0; }
.bt-blog-hero h1 span { color:var(--v6-brand); }
.bt-blog-hero>.container>p { color:var(--v6-copy); font-size:16px; line-height:1.78; margin:18px 0 0; max-width:60ch; }

.bt-blog-filter { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.bt-filter { align-items:center; background:#fff; border:1px solid var(--v6-line); border-radius:999px; color:var(--v6-copy); display:inline-flex; font-size:14px; font-weight:700; gap:8px; min-height:44px; padding:10px 17px; transition:border-color .18s ease,background .18s ease,color .18s ease; }
.bt-filter i { color:var(--v6-muted); font-size:13px; }
.bt-filter span { background:#f4ede4; border-radius:999px; color:var(--v6-muted); font-size:12px; font-weight:750; padding:2px 8px; }
.bt-filter:hover { border-color:#f0bfae; color:var(--v6-ink); }
.bt-filter.is-active { background:var(--v6-ink); border-color:var(--v6-ink); color:#fff; }
.bt-filter.is-active i { color:#ffb69f; }
.bt-filter.is-active span { background:rgba(255,255,255,.18); color:#fff; }

/* ── 카테고리 태그 ────────────────────────────────────────────────────── */
.bt-blog-tag { align-items:center; background:#f7f1e9; border-radius:999px; color:#5d564a; display:inline-flex; font-size:12px; font-weight:750; gap:6px; padding:6px 12px; }
.bt-blog-tag i { font-size:12px; }
.bt-blog-tag--instagram i { color:#d62976; }
.bt-blog-tag--youtube i { color:#ff0033; }
.bt-blog-tag--shortform i { color:#26221d; }
.bt-blog-tag--traffic i { color:var(--v6-brand); }
.bt-blog-tag--marketing i { color:#2f8f6b; }

/* ── 대표 글 ──────────────────────────────────────────────────────────── */
body.bt-blog-page main>section.bt-blog-featured-section { background:var(--v6-bg); padding:12px 0 0; }
.bt-blog-featured { align-items:center; background:#fff; border:1px solid var(--v6-line); border-radius:28px; display:grid; gap:0; grid-template-columns:1.05fr .95fr; overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.bt-blog-featured:hover { border-color:#f4c6b9; box-shadow:0 18px 40px -26px rgba(57,45,32,.45); transform:translateY(-2px); }
.bt-blog-featured-thumb { background:var(--v6-soft); display:block; }
.bt-blog-featured-thumb img { aspect-ratio:16/10; display:block; height:100%; object-fit:cover; width:100%; }
.bt-blog-featured-copy { display:block; padding:34px 38px; }
.bt-blog-featured-copy strong { color:var(--v6-ink); display:block; font-size:clamp(21px,2.4vw,28px); font-weight:850; letter-spacing:-.035em; line-height:1.34; margin:14px 0 0; }
.bt-blog-featured-excerpt { color:var(--v6-copy); display:block; font-size:15px; line-height:1.75; margin:12px 0 0; }
.bt-blog-meta { color:var(--v6-muted); display:block; font-size:13px; font-weight:650; margin-top:16px; }

/* ── 글 목록 ──────────────────────────────────────────────────────────── */
body.bt-blog-page main>section.bt-blog-list-section { background:var(--v6-section-alt); margin-top:50px; padding:56px 0 74px; }
body.bt-blog-post-page main>section.bt-post-related-section { background:var(--v6-section-alt); padding:64px 0 78px; }
.bt-blog-grid { align-items:stretch; display:grid; gap:20px; grid-template-columns:repeat(3,1fr); }
.bt-blog-card { background:#fff; border:1px solid var(--v6-line); border-radius:22px; display:flex; flex-direction:column; overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.bt-blog-card:hover { border-color:#f4c6b9; box-shadow:0 14px 32px -20px rgba(57,45,32,.4); transform:translateY(-2px); }
.bt-blog-card-link { display:flex; flex:1; flex-direction:column; height:100%; }
.bt-blog-card-thumb { background:var(--v6-soft); display:block; }
.bt-blog-card-thumb img { aspect-ratio:16/10; display:block; height:auto; object-fit:cover; width:100%; }
.bt-blog-card-body { display:flex; flex:1; flex-direction:column; padding:22px 22px 20px; }
.bt-blog-card-body h2,
.bt-blog-card-body h3 { color:var(--v6-ink); font-size:17px; font-weight:800; letter-spacing:-.025em; line-height:1.45; margin:13px 0 0; }
.bt-blog-card-body p { color:var(--v6-copy); font-size:14.5px; line-height:1.75; margin:10px 0 0; }
.bt-blog-card-body .bt-blog-meta { margin-top:auto; padding-top:16px; }
.bt-blog-card .bt-blog-tag { align-self:flex-start; }

/* ── 페이지네이션 ─────────────────────────────────────────────────────── */
.bt-blog-pagination { align-items:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:44px; }
.bt-page-num,.bt-page-arrow { align-items:center; background:#fff; border:1px solid var(--v6-line); border-radius:999px; color:var(--v6-copy); display:inline-flex; font-size:14px; font-weight:700; gap:7px; justify-content:center; min-height:44px; min-width:44px; padding:10px 16px; }
.bt-page-num:hover,.bt-page-arrow:hover { border-color:#f0bfae; color:var(--v6-ink); }
.bt-page-num.is-active { background:var(--v6-ink); border-color:var(--v6-ink); color:#fff; }

/* ── 글 상세: 헤더 ────────────────────────────────────────────────────── */
body.bt-blog-post-page main>section.bt-post-head { background:var(--v6-bg); padding:38px 0 0; }
/* 본문 열(1120 - 사이드 320 - 간격 44)과 좌우 폭을 맞춰 아래 커버 이미지와 정렬한다. */
.bt-post-head-inner { max-width:calc(100% - 364px); }
.bt-post-head .bt-breadcrumb { margin-bottom:20px; }
.bt-post-head .bt-blog-tag { transition:background .18s ease,color .18s ease; }
.bt-post-head .bt-blog-tag:hover { background:var(--v6-soft); color:var(--v6-brand); }
.bt-post-head h1 { color:var(--v6-ink); font-size:clamp(27px,3.5vw,40px); font-weight:850; letter-spacing:-.045em; line-height:1.3; margin:14px 0 0; }
.bt-post-excerpt { color:var(--v6-copy); font-size:16.5px; line-height:1.75; margin:14px 0 0; max-width:62ch; }
.bt-post-meta { align-items:center; border-top:1px solid var(--v6-line); color:var(--v6-muted); display:flex; flex-wrap:wrap; font-size:13.5px; font-weight:650; gap:10px; margin-top:22px; padding-top:16px; }
.bt-post-meta-dot { background:#d8cec0; border-radius:50%; display:inline-block; height:3px; width:3px; }

/* ── 글 상세: 본문 레이아웃 ───────────────────────────────────────────── */
body.bt-blog-post-page main>section.bt-post-body-section { background:var(--v6-bg); padding:32px 0 76px; }
.bt-post-layout { align-items:start; display:grid; gap:44px; grid-template-columns:minmax(0,1fr) 320px; }
.bt-post-cover { margin:0 0 30px; }
.bt-post-cover img { border:1px solid var(--v6-line); border-radius:24px; display:block; height:auto; width:100%; }

.bt-post-toc { background:#fff; border:1px solid var(--v6-line); border-radius:20px; margin-bottom:32px; padding:22px 24px; }
.bt-post-toc strong { color:var(--v6-ink); display:block; font-size:14px; font-weight:800; letter-spacing:-.02em; }
.bt-post-toc ol { counter-reset:toc; list-style:none; margin:14px 0 0; padding:0; }
.bt-post-toc li { counter-increment:toc; margin-top:9px; padding-left:26px; position:relative; }
.bt-post-toc li::before { color:var(--v6-brand); content:counter(toc); font-size:12.5px; font-weight:800; left:0; position:absolute; top:2px; }
.bt-post-toc a { color:var(--v6-copy); font-size:14.5px; font-weight:650; line-height:1.55; }
.bt-post-toc a:hover { color:var(--v6-brand); }

/* ── 글 상세: 본문 타이포 ─────────────────────────────────────────────── */
.bt-post-body { color:var(--v6-copy); font-size:16.5px; line-height:1.86; }
.bt-post-body p { margin:0 0 22px; }
.bt-post-body h2 { border-top:1px solid var(--v6-line); color:var(--v6-ink); font-size:clamp(22px,2.6vw,27px); font-weight:850; letter-spacing:-.04em; line-height:1.35; margin:46px 0 18px; padding-top:36px; scroll-margin-top:96px; }
.bt-post-body h2:first-child { border-top:0; margin-top:0; padding-top:0; }
.bt-post-body h3 { color:var(--v6-ink); font-size:18.5px; font-weight:800; letter-spacing:-.03em; line-height:1.45; margin:32px 0 12px; }
.bt-post-body ul,.bt-post-body ol { margin:0 0 22px; padding-left:22px; }
.bt-post-body li { margin-bottom:10px; padding-left:2px; }
.bt-post-body li::marker { color:var(--v6-brand); font-weight:700; }
.bt-post-body strong { color:var(--v6-ink); font-weight:750; }
.bt-post-body a { color:var(--v6-brand); font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.bt-post-body a:hover { color:#d13d1a; }

.bt-post-callout { background:var(--v6-soft); border:1px solid #f8d5c8; border-radius:22px; margin:34px 0; padding:26px 28px; }
.bt-post-callout p { color:#6a4034; font-size:15.5px; line-height:1.78; margin:0; }
.bt-post-callout p+p { margin-top:16px; }
.bt-post-callout strong { color:#a8341a; }
.bt-post-callout a:not(.bt-post-cta) { color:#a8341a; }
.bt-post-cta { align-items:center; background:var(--v6-brand); border-radius:999px; color:#fff!important; display:inline-flex; font-size:14.5px; font-weight:750; gap:8px; min-height:48px; padding:12px 22px; text-decoration:none!important; }
.bt-post-cta:hover { background:#d94620; color:#fff!important; }

/* ── 글 상세: FAQ ─────────────────────────────────────────────────────── */
.bt-post-faq { margin-top:52px; }
.bt-post-faq h2 { color:var(--v6-ink); font-size:24px; font-weight:850; letter-spacing:-.04em; margin:0 0 18px; }
.bt-post-faq .v6-faq-list details { background:#fff; border:1px solid var(--v6-line); border-radius:18px; margin-bottom:10px; padding:0; }
.bt-post-faq summary { align-items:center; color:var(--v6-ink); cursor:pointer; display:flex; font-size:15.5px; font-weight:750; gap:14px; justify-content:space-between; line-height:1.55; list-style:none; padding:19px 22px; }
.bt-post-faq summary::-webkit-details-marker { display:none; }
.bt-post-faq summary i { color:var(--v6-muted); font-size:13px; transition:transform .2s ease; }
.bt-post-faq details[open] summary i { transform:rotate(45deg); }
.bt-post-faq details p { color:var(--v6-copy); font-size:15px; line-height:1.8; margin:0; padding:0 22px 20px; }

/* ── 글 상세: 이전/다음 ───────────────────────────────────────────────── */
.bt-post-nav { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-top:46px; }
.bt-post-nav-item { background:#fff; border:1px solid var(--v6-line); border-radius:20px; display:block; padding:20px 22px; transition:border-color .2s ease,transform .2s ease; }
.bt-post-nav-item:hover { border-color:#f4c6b9; transform:translateY(-2px); }
.bt-post-nav-item>span { color:var(--v6-muted); display:block; font-size:12.5px; font-weight:750; }
.bt-post-nav-item strong { color:var(--v6-ink); display:block; font-size:15px; font-weight:750; letter-spacing:-.02em; line-height:1.5; margin-top:8px; }
.bt-post-nav-item--next { text-align:right; }
.bt-post-nav-item:only-child { grid-column:span 2; }

/* ── 글 상세: 사이드 ──────────────────────────────────────────────────── */
.bt-post-aside { display:grid; gap:16px; position:sticky; top:96px; }
.bt-post-side-card { background:var(--v6-ink); border-radius:24px; color:#fff; padding:28px 26px; }
.bt-post-side-badge { background:rgba(255,255,255,.14); border-radius:999px; color:#ffc9b8; display:inline-block; font-size:12px; font-weight:750; padding:6px 12px; }
.bt-post-side-card strong { display:block; font-size:19px; font-weight:800; letter-spacing:-.03em; line-height:1.45; margin:16px 0 0; }
.bt-post-side-card p { color:rgba(255,255,255,.72); font-size:14px; line-height:1.72; margin:12px 0 0; }
.bt-post-side-card ul { display:grid; gap:9px; list-style:none; margin:18px 0 22px; padding:0; }
.bt-post-side-card li { align-items:flex-start; color:rgba(255,255,255,.86); display:flex; font-size:13.5px; font-weight:650; gap:9px; line-height:1.5; }
.bt-post-side-card li i { color:#ff9d7f; font-size:11px; margin-top:5px; }
.bt-post-side-card .bt-btn-primary { width:100%; }
.bt-post-side-link { color:rgba(255,255,255,.66); display:block; font-size:13.5px; font-weight:650; margin-top:14px; text-align:center; }
.bt-post-side-link:hover { color:#fff; }

.bt-post-side-related { background:#fff; border:1px solid var(--v6-line); border-radius:22px; padding:24px 24px 20px; }
.bt-post-side-related strong { color:var(--v6-ink); display:block; font-size:14px; font-weight:800; letter-spacing:-.02em; }
.bt-post-side-related ul { display:grid; gap:14px; list-style:none; margin:16px 0 0; padding:0; }
.bt-post-side-related a { color:var(--v6-copy); font-size:14.5px; font-weight:650; line-height:1.55; }
.bt-post-side-related a:hover { color:var(--v6-brand); }

.bt-post-related-section .v6-section-head { margin-bottom:30px; }

/* ── 반응형 ───────────────────────────────────────────────────────────── */
@media (max-width:1080px) {
    .bt-blog-grid { grid-template-columns:repeat(2,1fr); }
    .bt-blog-featured { grid-template-columns:1fr; }
    .bt-blog-featured-copy { padding:28px 26px 30px; }
    .bt-post-head-inner { max-width:100%; }
    .bt-post-layout { grid-template-columns:1fr; }
    .bt-post-aside { position:static; }
    .bt-post-side-card { padding:26px 24px; }
}

@media (max-width:680px) {
    body.bt-blog-page .container { width:min(100% - 32px,1168px); }
}

@media (max-width:760px) {
    body.bt-blog-page main>section.bt-blog-hero { padding:28px 0 26px; }
    body.bt-blog-page main>section.bt-blog-list-section { margin-top:38px; padding:42px 0 56px; }
    body.bt-blog-post-page main>section.bt-post-related-section { padding:48px 0 58px; }
    .bt-blog-grid { grid-template-columns:1fr; }
    .bt-blog-filter { flex-wrap:nowrap; margin-inline:-16px; overflow-x:auto; padding:2px 16px 8px; scrollbar-width:none; }
    .bt-blog-filter::-webkit-scrollbar { display:none; }
    .bt-filter { flex:0 0 auto; }
    body.bt-blog-post-page main>section.bt-post-head { padding:26px 0 0; }
    body.bt-blog-post-page main>section.bt-post-body-section { padding:26px 0 56px; }
    .bt-post-excerpt { font-size:15.5px; }
    .bt-post-cover img { border-radius:18px; }
    .bt-post-body { font-size:16px; }
    .bt-post-body h2 { margin-top:38px; padding-top:28px; }
    .bt-post-callout { border-radius:18px; padding:22px 20px; }
    .bt-post-cta { width:100%; }
    .bt-post-nav { grid-template-columns:1fr; }
    .bt-post-nav-item--next { text-align:left; }
    .bt-post-nav-item:only-child { grid-column:span 1; }
}