/* ===================================================================
   Blog - list + post pages. Builds on css/style.css tokens.
   Generated pages: blog/index.html, blog/<slug>.html
   =================================================================== */

/* ===== List page ===== */
.blog-main { padding: 130px 0 100px; }
.blog-handle { color: var(--primary); }
.blog-handle:hover { text-decoration: underline; }
.blog-count { font-size: .82rem; color: var(--text-mute); white-space: nowrap; }

.blog-featured { margin-bottom: 48px; }
.blog-featured .tools-label { margin-bottom: 4px; }
.blog-featured.collapsed { display: none; }

/* ===== Reading typography =====
   국룰 스택: Pretendard 1순위(사이트 기본 --sans는 Inter 1순위라 영문이 Inter로 렌더됨).
   CJK 조판 규칙: keep-all 단어 단위 줄바꿈, 본문 17px/행간 1.8,
   Pretendard는 자간이 내장 보정되어 있어 letter-spacing 추가 금지. */
:root {
    --reading: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
        'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* ===== List rows (techblogposts-style: one line, thin dividers) ===== */
.blog-list { display: flex; flex-direction: column; }
.blog-row {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 17px 6px; border-bottom: 1px solid var(--border-soft);
    transition: background .2s var(--ease);
}
.blog-row:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.blog-row.hidden { display: none; }

.blog-row-title {
    font-family: var(--reading); flex: 1; min-width: 0;
    font-size: 1.04rem; font-weight: 600; word-break: keep-all;
    line-height: 1.5; transition: color .2s var(--ease);
}
.blog-row:hover .blog-row-title { color: var(--primary); }
.blog-row-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.blog-row-info { font-size: .76rem; color: var(--text-mute); white-space: nowrap; }

.blog-row.featured .blog-row-title::before {
    content: "\2605"; color: var(--primary); font-size: .82em; margin-right: 7px;
}

/* ===== Topic chips (colors mirror project-tag palette) ===== */
.topic-chip {
    font-family: var(--mono); font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
    border: 1px solid transparent;
}
.topic-claude-code { color: var(--primary); background: var(--primary-glow); border-color: var(--primary-border); }
.topic-agent { color: #4fb6ad; background: rgba(79, 182, 173, .12); border-color: rgba(79, 182, 173, .30); }
.topic-security { color: #f87171; background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .28); }
.topic-industry { color: #60a5fa; background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .28); }
.topic-culture { color: #a78bfa; background: rgba(167, 139, 250, .12); border-color: rgba(167, 139, 250, .28); }
body.light .topic-agent { color: #0f766e; background: rgba(15, 118, 110, .10); border-color: rgba(15, 118, 110, .32); }
body.light .topic-security { color: #b91c1c; background: rgba(185, 28, 28, .08); border-color: rgba(185, 28, 28, .28); }
body.light .topic-industry { color: #1d4ed8; background: rgba(29, 78, 216, .08); border-color: rgba(29, 78, 216, .28); }
body.light .topic-culture { color: #6d28d9; background: rgba(109, 40, 217, .08); border-color: rgba(109, 40, 217, .28); }

/* ===== Post page ===== */
.post-main { padding: 120px 0 100px; }
.post { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.post-back {
    display: inline-flex; align-items: center; gap: 8px; font-size: .84rem;
    color: var(--text-mute); margin-bottom: 32px; transition: color .2s var(--ease);
}
.post-back:hover { color: var(--primary); }

.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.post-date, .post-meta { font-size: .82rem; color: var(--text-mute); }
.post-dot { opacity: .6; }

.post-title {
    font-family: var(--reading); font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
    word-break: keep-all; text-wrap: balance; margin-bottom: 18px;
}

.post-origin { margin-bottom: 44px; font-size: .82rem; }
.post-origin a {
    display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim);
    border: 1px solid var(--border-soft); background: var(--surface);
    padding: 8px 14px; border-radius: 999px; transition: all .2s var(--ease);
}
.post-origin a:hover { color: var(--primary); border-color: var(--primary-border); }

/* thread-native rhythm: short lines kept via <br>; CJK 조판 - 17px/1.8, keep-all */
.post-body p {
    font-family: var(--reading); color: var(--text-dim);
    font-size: 1.0625rem; line-height: 1.8; word-break: keep-all;
    overflow-wrap: break-word; margin-bottom: 1.7em;
}
.post-body p:last-child { margin-bottom: 0; }
.post-body a { color: var(--primary); word-break: break-all; }
.post-body a:hover { text-decoration: underline; }

/* code: terminal stays dark in both themes (matches .terminal in style.css) */
.post-body .code-block {
    background: var(--term-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; margin: 0 0 1.7em; overflow-x: auto;
    scrollbar-width: thin; scrollbar-color: #2a3b5c transparent;
}
.post-body .code-block code {
    font-family: var(--mono); font-size: .84rem; line-height: 1.65;
    color: #e8edf2; white-space: pre; background: none; border: none; padding: 0;
}
.post-body p strong { color: var(--text); font-weight: 700; }
.post-body p code {
    font-family: var(--mono); font-size: .84em; color: var(--primary);
    background: var(--surface-2); border: 1px solid var(--border-soft);
    padding: 2px 7px; border-radius: 6px; word-break: break-all;
}

.post-links { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.post-links ul { list-style: none; margin-top: 4px; }
.post-links li { margin-bottom: 8px; }
.post-links a { font-family: var(--mono); font-size: .82rem; color: var(--text-dim); word-break: break-all; }
.post-links a:hover { color: var(--primary); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.post-nav-item {
    display: flex; flex-direction: column; gap: 7px;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 16px 18px; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.post-nav-item:hover { border-color: var(--primary-border); transform: translateY(-2px); }
.post-nav-item.next { text-align: right; align-items: flex-end; }
.post-nav-label { font-size: .72rem; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }
.post-nav-title { font-size: .86rem; color: var(--text-dim); line-height: 1.45; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    /* 좁은 화면: 한 줄 → 제목/메타 2줄 스택 */
    .blog-row { flex-direction: column; align-items: flex-start; gap: 9px; padding: 16px 2px; }
    .blog-row-side { width: 100%; justify-content: space-between; }
    .post-nav { grid-template-columns: 1fr; }
    .post-nav-item.next { text-align: left; align-items: flex-start; }
    .blog-main { padding-top: 110px; }
    .post-main { padding-top: 100px; }
}