/* DOCKTRE — Blog styles (extends landing.css) */
.blog-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.blog-hero .eyebrow { margin-bottom: 18px; }
.blog-hero h1 { font-size: clamp(34px,5vw,52px); letter-spacing: -0.04em; }
.blog-hero p { margin-top: 16px; max-width: 52ch; }
.blog-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.blog-chip { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 100px; border: 1px solid var(--line-2); color: var(--ink-2); background: #fff; transition: background .12s, border-color .12s, color .12s; cursor: pointer; }
.blog-chip:hover { background: var(--bg-soft); }
.blog-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.blog-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin: 48px 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-soft); }
.blog-feature .cover { aspect-ratio: 16/10; border-radius: var(--r-lg); position: relative; overflow: hidden; }
.blog-feature h2 { font-size: clamp(24px,3vw,34px); margin-top: 14px; letter-spacing: -0.03em; line-height: 1.15; }
.blog-feature p { color: var(--muted); margin-top: 14px; font-size: 15.5px; line-height: 1.6; }

/* Article */
/* padding-top only — 좌우 패딩은 .wrap(0 28px / 모바일 0 20px)에 맡겨, 좁은 화면에서
   본문·표·인용구가 화면 가장자리에 닿지 않게 한다(shorthand는 wrap 패딩을 덮어씀). */
.article { max-width: 720px; margin: 0 auto; padding-top: 56px; }
.article-head { text-align: center; margin-bottom: 44px; }
.article-cat { font-size: 13px; font-weight: 700; color: var(--brand-ink); }
.article h1 { font-size: clamp(30px,4.5vw,46px); letter-spacing: -0.035em; line-height: 1.1; margin-top: 14px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin-top: 22px; font-size: 13.5px; color: var(--muted); }
/* 좁은 화면에서 각 항목(이름/날짜/읽기시간)이 단어 중간에 잘리지 않고 통째로 줄바꿈되게 */
.article-meta span { white-space: nowrap; }
.article-meta .av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.article-cover { aspect-ratio: 21/9; border-radius: var(--r-lg); margin-bottom: 44px; position: relative; overflow: hidden; }
.prose { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 24px; }
.prose h2 { font-size: 26px; letter-spacing: -0.03em; color: var(--ink); margin-top: 48px; }
.prose h3 { font-size: 20px; letter-spacing: -0.02em; color: var(--ink); margin-top: 36px; }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-top: 10px; }
.prose li::marker { color: var(--brand); }
.prose blockquote { border-left: 3px solid var(--brand); padding: 4px 0 4px 22px; color: var(--ink); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.prose code { font-family: var(--mono); font-size: 14px; background: var(--bg-sunken); padding: 2px 7px; border-radius: 6px; color: var(--brand-ink); }
.prose .callout { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r); padding: 20px 22px; font-size: 15.5px; line-height: 1.6; }
.prose .callout strong { color: var(--brand-ink); }
.prose .pquote { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 32px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; border: none; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.prose th { background: var(--bg-soft); text-align: left; padding: 11px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line); }
.prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose tr:last-child td { border-bottom: none; }
.prose .num { font-family: var(--mono); }
.article-cta { margin: 64px 0; padding: 40px; border-radius: var(--r-xl); background: var(--ink); color: #fff; text-align: center; position: relative; overflow: hidden; }
.article-cta h3 { font-size: 26px; letter-spacing: -0.03em; }
.article-cta p { color: rgba(255,255,255,0.6); margin-top: 12px; }
.article-share { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 48px 0; }
.article-related { margin: 56px 0; }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 80px; }
.pagination a, .pagination span { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: #fff; transition: background .12s, border-color .12s, color .12s; }
.pagination a:hover { background: var(--bg-soft); border-color: var(--muted-2); color: var(--ink); }
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .page-nav { font-weight: 500; }
.pagination .disabled { opacity: .4; pointer-events: none; }

@media (max-width: 920px) { .blog-feature { grid-template-columns: 1fr; } }