/* トップページの /static/style.css の上に重ねて、ブログ固有の部品だけを同じ配色で定義する */
:root {
    --bg: #eaf6ff;
    --card: #fff;
    --text: #23405c;
    --muted: #5f7a94;
    --brand: #5b8ee6;
    --accent: #2563eb;
    --light: #aee2ff;
    --border: #d4e6f7;
    --code-bg: #eef5fc;
    --grad: linear-gradient(90deg, #aee2ff 0%, #5b8ee6 100%);
    --grad-soft: linear-gradient(120deg, #eaf6ff 0%, #f8fafc 100%);
    --shadow: 0 8px 32px rgba(91,142,230,0.10);
}
* { box-sizing: border-box; }

.logo a, .logo a:hover { background: none; box-shadow: none; color: inherit; }
.blog-main { min-height: 60vh; }

/* style.css の a 全体へのグラデーション背景を、ブログの部品では打ち消す */
.blog-main a, .latest-posts a { background: none; box-shadow: none; border-radius: 0; }
.blog-main a:hover, .latest-posts a:hover { background: none; box-shadow: none; }

/* 一覧の見出し・検索 */
.blog-head {
    background: var(--grad-soft); border-radius: 28px; box-shadow: var(--shadow);
    padding: 2rem 2.2rem; margin-top: 3rem;
}
.blog-head h1 { margin: 0 0 0.6em; font-size: 2.4rem; font-weight: 800; color: var(--brand); text-shadow: 0 2px 12px rgba(91,142,230,0.10); }
.search { display: flex; gap: 0.6em; max-width: 520px; }
.search input {
    flex: 1; padding: 0.7em 1em; border: 2px solid var(--light); border-radius: 14px;
    background: #fff; color: var(--text); font: inherit; font-size: 1rem;
}
.search input:focus { outline: none; border-color: var(--brand); }
.search button {
    padding: 0.7em 1.4em; border: none; border-radius: 14px; background: var(--grad);
    color: #fff; font-weight: 700; cursor: pointer; font-size: 1rem;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 1.2em; }
.blog-main .tag {
    padding: 0.35em 1em; border-radius: 14px; background: #fff; color: var(--brand);
    font-weight: 700; font-size: 0.95rem; box-shadow: 0 2px 8px rgba(91,142,230,0.08);
}
.blog-main .tag.active, .blog-main .tag:hover { background: var(--grad); color: #fff; }
.result-info { color: var(--muted); margin: 1em 0 0; }
.empty { text-align: center; color: var(--muted); padding: 3em 0; }

/* 記事カード（トップの作品カードと同じ質感） */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; padding: 2.5rem 0 0; }
.blog-main .article-card, .latest-posts .article-card {
    background: linear-gradient(120deg, #eaf6ff 0%, #aee2ff 100%); border-radius: 28px; overflow: hidden;
    color: var(--text); box-shadow: var(--shadow); display: flex; flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s; text-decoration: none;
}
.blog-main .article-card:hover, .latest-posts .article-card:hover {
    transform: scale(1.03) rotate(-1deg); box-shadow: 0 12px 48px rgba(91,142,230,0.14);
    background: linear-gradient(120deg, #eaf6ff 0%, #aee2ff 100%); color: var(--text);
}
.article-thumb { width: 100%; height: 190px; object-fit: cover; display: block; background: #fff; }
.article-thumb.placeholder {
    display: flex; align-items: center; justify-content: center; padding: 1em; text-align: center;
    background: var(--grad); color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.03em;
}
.article-body { padding: 1.2rem 1.5rem 1.5rem; font-size: 0.9rem; color: var(--muted); }
.article-title { font-size: 1.3rem; font-weight: 900; margin: 0.3em 0; color: var(--brand); letter-spacing: 0.03em; }
.article-desc { margin: 0.3em 0 0; color: var(--text); font-size: 1rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.7em; }
.card-tags span, .blog-main .card-tags a {
    color: var(--brand); background: #fff; border-radius: 10px; padding: 0.1em 0.6em; font-size: 0.85rem; font-weight: 700;
}

/* 記事ページ */
.preview-banner { background: #fff3cd; color: #7a5a00; padding: 0.7em 1em; border-radius: 14px; margin-top: 2rem; text-align: center; }
.post {
    max-width: 860px; margin: 3rem auto 0; background: var(--grad-soft); border-radius: 28px;
    box-shadow: var(--shadow); padding: 2.5rem 2.8rem;
}
.post-header { border-bottom: 3px solid var(--light); padding-bottom: 1em; margin-bottom: 1.5em; }
.post-header h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.35; margin: 0 0 0.4em; color: var(--brand); }
.post-meta { color: var(--muted); font-size: 0.95rem; margin: 0; }
.blog-main .post-meta a { color: var(--accent); }
.post-nav {
    max-width: 860px; margin: 1.5rem auto 0; display: flex; justify-content: space-between; gap: 1em; align-items: center;
}
.blog-main .post-nav a {
    background: #fff; color: var(--brand); font-weight: 700; padding: 0.6em 1.2em; border-radius: 14px;
    box-shadow: 0 2px 8px rgba(91,142,230,0.08);
}
.blog-main .post-nav a:hover { background: var(--grad); color: #fff; }

.post-body { font-size: 1.08rem; overflow-wrap: break-word; color: var(--text); }
.post-body h2 { font-size: 1.6rem; color: var(--brand); border-left: 6px solid var(--light); padding-left: 0.6em; margin-top: 2em; }
.post-body h3 { font-size: 1.3rem; color: var(--brand); margin-top: 1.6em; }
.blog-main .post-body a { color: var(--accent); text-decoration: underline; }
.post-body img, .post-body video { max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 14px; box-shadow: 0 4px 24px rgba(91,142,230,0.12); }
.post-body code { background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 6px; font-family: Consolas, "Courier New", monospace; font-size: 0.9em; }
.post-body pre { background: #23405c; color: #eaf6ff; padding: 1.1em 1.3em; border-radius: 14px; overflow-x: auto; }
.post-body pre code { background: none; padding: 0; color: inherit; }
.post-body blockquote { border-left: 6px solid var(--light); margin: 1.5em 0; padding: 0.6em 1.2em; background: #fff; border-radius: 14px; color: var(--muted); }
.post-body table { border-collapse: collapse; width: 100%; margin: 1.5em 0; display: block; overflow-x: auto; background: #fff; border-radius: 12px; }
.post-body th, .post-body td { border: 1px solid var(--border); padding: 0.6em 1em; }
.post-body th { background: var(--grad-soft); color: var(--brand); }
.post-body hr { border: none; border-top: 2px dashed var(--light); margin: 2em 0; }

.message { text-align: center; padding: 4em 0; }

/* トップページに差し込む最新記事 */
.latest-posts .article-grid { padding-top: 0.5rem; }
.latest-more { text-align: right; margin-top: 1.5rem; }
.latest-posts .latest-more a { font-weight: 700; padding: 0.6em 1.3em; border-radius: 14px; background: #fff; color: var(--brand); }
.latest-posts .latest-more a:hover { background: var(--grad); color: #fff; }
.latest-posts .empty { padding: 1em 0; }

@media (max-width: 600px) {
    .blog-head, .post { padding: 1.5rem 1.2rem; border-radius: 20px; }
    .blog-head h1, .post-header h1 { font-size: 1.7rem; }
    .post-nav { flex-direction: column; }
}