/* post-card-style.css — ベーススタイル（デフォルト：白カード） */

.post-card-frame {
    max-width: 860px;
    margin: 40px auto;
    padding: 0 16px 60px;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* メインカード */
.post-card-frame .card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        0 4px 6px rgba(0,0,0,0.04),
        0 12px 32px rgba(0,0,0,0.08),
        0 32px 64px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* アイキャッチ */
.post-card-frame .card-thumbnail {
    width: 100%; aspect-ratio: 16/7; object-fit: cover; display: block;
}
.post-card-frame .card-thumbnail-placeholder {
    width: 100%; aspect-ratio: 16/7;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4); font-size: 14px; letter-spacing: .1em;
}

/* カードボディ */
.post-card-frame .card-body { padding: 40px 48px 48px; }

/* カテゴリバッジ */
.post-card-frame .card-category {
    display: inline-flex; align-items: center;
    background: #f0f0ff; color: #5b5bd6;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 100px; margin-bottom: 18px; text-decoration: none;
    transition: background .2s, color .2s;
}
.post-card-frame .card-category:hover { background: #5b5bd6; color: #fff; }

/* タイトル */
.post-card-frame .card-title {
    font-size: clamp(22px, 4vw, 32px); font-weight: 700; line-height: 1.5;
    color: #111; margin: 0 0 20px;
}

/* メタ */
.post-card-frame .card-meta {
    display: flex; flex-wrap: wrap; gap: 16px;
    font-size: 12px; color: #aaa;
    padding-bottom: 28px; border-bottom: 1px solid #f0f0f0; margin-bottom: 32px;
}

/* 本文 */
.post-card-frame .card-content { color: #333; font-size: 15px; line-height: 1.9; }
.post-card-frame .card-content p { margin-bottom: 22px; }
.post-card-frame .card-content h2 {
    font-size: 20px; font-weight: 700; color: #111;
    margin: 42px 0 16px; padding: 14px 20px;
    background: #f8f8ff; border-left: 4px solid #5b5bd6;
    border-radius: 0 10px 10px 0;
}
.post-card-frame .card-content h3 {
    font-size: 17px; font-weight: 700; color: #222;
    margin: 32px 0 12px; padding-left: 14px; border-left: 3px solid #ddd;
}
.post-card-frame .card-content blockquote {
    margin: 28px 0; padding: 20px 24px;
    background: #fafafa; border-radius: 12px;
    box-shadow: inset 0 0 0 1px #eee; color: #666; font-style: italic;
}
.post-card-frame .card-content pre {
    background: #1e1e2e; color: #cdd6f4;
    border-radius: 10px; font-size: 13px;
    padding: 20px 24px; overflow-x: auto; margin-bottom: 22px;
}
.post-card-frame .card-content code {
    background: #1e1e2e; color: #cdd6f4;
    padding: 2px 8px; border-radius: 4px; font-size: 13px;
}

/* タグ */
.post-card-frame .card-tags {
    margin-top: 40px; padding-top: 28px;
    border-top: 1px solid #f0f0f0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.post-card-frame .card-tag {
    font-size: 12px; color: #888; background: #f5f5f5;
    padding: 5px 14px; border-radius: 100px;
    text-decoration: none; transition: all .2s;
}
.post-card-frame .card-tag:hover { background: #eee; color: #333; }

/* 前後ナビ */
.post-card-frame .card-navigation {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px;
}
.post-card-frame .card-nav-item {
    background: #fff; border-radius: 14px; padding: 20px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    text-decoration: none; color: #333;
    transition: box-shadow .25s, transform .25s;
}
.post-card-frame .card-nav-item:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.12); transform: translateY(-2px);
}
.post-card-frame .card-nav-label {
    font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
    color: #bbb; margin-bottom: 6px;
}
.post-card-frame .card-nav-title { font-size: 13px; font-weight: 700; line-height: 1.5; }
.post-card-frame .card-nav-next { text-align: right; }

/* レスポンシブ */
@media (max-width: 640px) {
    .post-card-frame .card-body { padding: 24px 22px 32px; }
    .post-card-frame .card-navigation { grid-template-columns: 1fr; }
    .post-card-frame .card-content h2 { font-size: 17px; }
}