/* 공개 블로그 — 목록·상세·본문 (토큰만 사용) */
.blog-page { padding-bottom: var(--s-12); }
.blog-chips { margin-bottom: var(--s-6); }
.blog-tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); font-size: var(--t-sm); color: var(--c-muted); }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.blog-card { background: #fff; border: 1px solid var(--c-line-2); border-radius: var(--r-md); overflow: hidden; transition: box-shadow var(--m-fast) var(--ease); }
.blog-card:hover { box-shadow: var(--shadow-3); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.blog-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 1200 / 630; background: var(--c-milk); color: var(--c-muted); overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.blog-card-meta { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--c-muted); }
.blog-card-title { margin: 0; font-size: var(--t-lg); font-weight: 700; line-height: 1.4; color: var(--c-ink); overflow-wrap: anywhere; word-break: keep-all; }
.blog-card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-sm); line-height: 1.6; color: var(--c-muted); }

.blog-article { padding: 0; overflow: hidden; }
.blog-article > :not(.blog-cover) { margin-left: var(--s-6); margin-right: var(--s-6); }
.blog-cover img { width: 100%; height: auto; display: block; aspect-ratio: 1200 / 630; object-fit: cover; }
.blog-article-head { margin-top: var(--s-6); }
.blog-cat { text-decoration: none; background: var(--c-milk-2); color: var(--c-berry); }
.blog-title { margin: var(--s-3) 0 var(--s-2); font-size: var(--t-2xl); font-weight: 800; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.blog-byline { margin: 0; }
.blog-summary { margin-top: var(--s-5); margin-bottom: 0; padding: var(--s-4); background: var(--c-milk); border-left: 3px solid var(--c-accent); border-radius: var(--r-sm); line-height: 1.7; color: var(--c-plum-2); }
.blog-toc { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-line-2); border-radius: var(--r-md); }
.blog-toc summary { font-weight: 700; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.blog-toc ol { margin: var(--s-2) 0 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--t-sm); }
.blog-toc a { color: var(--c-ink); }
.blog-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin-top: var(--s-8); margin-bottom: var(--s-6); }
.blog-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); }
.blog-cta p { margin: 0; }
.blog-cta-actions { flex-wrap: wrap; gap: var(--s-2); }
.blog-related { margin-top: var(--s-10); }
.blog-related-title { font-size: var(--t-xl); font-weight: 800; margin: 0 0 var(--s-4); }

/* 본문 */
.blog-body { margin-top: var(--s-6); font-size: 16px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; color: var(--c-ink); }
.blog-body > :first-child { margin-top: 0; }
.blog-body p { margin: 0 0 var(--s-4); }
.blog-body h2 { margin: var(--s-10) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--c-line); font-size: var(--t-xl); font-weight: 800; line-height: 1.4; scroll-margin-top: 80px; }
.blog-body h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--t-lg); font-weight: 700; line-height: 1.45; }
.blog-body ul, .blog-body ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.blog-body li { margin-bottom: var(--s-1); }
.blog-body a { color: var(--c-berry); text-decoration: underline; text-underline-offset: 3px; }
.blog-body a[target="_blank"]::after { content: "\2197"; margin-left: 2px; font-size: .85em; text-decoration: none; display: inline-block; }
.blog-body blockquote { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); background: var(--c-milk); border-left: 3px solid var(--c-pink); color: var(--c-plum-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.blog-body blockquote > :last-child { margin-bottom: 0; }
.blog-body hr { border: 0; border-top: 1px solid var(--c-line-2); margin: var(--s-8) 0; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.blog-body figure { margin: 0 0 var(--s-5); }
.blog-body figcaption { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-muted); text-align: center; }
.blog-body code { padding: 1px 6px; background: var(--c-milk); border-radius: var(--r-sm); font-size: .9em; word-break: break-all; }
.blog-body pre { margin: 0 0 var(--s-4); padding: var(--s-4); background: var(--c-plum); color: var(--c-banner-ink); border-radius: var(--r-md); overflow-x: auto; font-size: var(--t-sm); line-height: 1.6; }
.blog-body pre code { padding: 0; background: transparent; color: inherit; word-break: normal; }
.blog-table { margin: 0 0 var(--s-5); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-table table { border-collapse: collapse; min-width: 100%; font-size: var(--t-sm); line-height: 1.6; }
.blog-table th, .blog-table td { padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line-2); text-align: left; vertical-align: top; word-break: keep-all; }
.blog-table th { background: var(--c-milk); font-weight: 700; }

@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .blog-article > :not(.blog-cover) { margin-left: var(--s-4); margin-right: var(--s-4); }
  .blog-title { font-size: var(--t-xl); }
  .blog-body { font-size: 15px; }
  .blog-cta-actions .btn { flex: 1 1 100%; }
}