/* blog.css: 既存の grid.css / style.css の上に足す想定 */

/* ページ全体 */
.blog-main {
    margin: 5rem 0 0 0;
    /* style.css の main margin を踏襲してもOK */
}

/* パンくず */
.blog-breadcrumb {
    font-size: 14px;
    color: #666;
    margin: 1.5rem 0 2.0rem;
}

.blog-breadcrumb .sep {
    margin: 0 0.5rem;
    color: #999;
}

.blog-breadcrumb a {
    display: inline;
    color: #666;
    text-decoration: none;
}

.blog-breadcrumb a:hover {
    color: #999;
}

/* 2カラム */
.blog-layout {
    align-items: flex-start;
}

/* セクション */
.blog-section {
    padding: 0;
    margin: 0 0 4rem;
}

/* 見出し行（タイトル + 検索） */
.blog-section-head {
    display: flex;
    gap: 1.2rem;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 1.2rem;
    margin-bottom: 2.0rem;
}

.blog-title {
    margin: 0;
    font-weight: 400;
}

/* 検索 */
.blog-search {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    /* Force top alignment */
}

.blog-search input[type="search"] {
    width: min(320px, 56vw);
    height: 38px;
    border: 1px solid #d1d1d1;
    padding: 6px 10px;
    box-sizing: border-box;
    /* Ensure border acts inside height */
    vertical-align: top;
}

.blog-search button {
    height: 38px;
    padding: 0 14px;
    border: 1px solid #bbb;
    margin: 0;
    /* Reset global margin */
    cursor: pointer;
    box-sizing: border-box;
    /* Ensure border acts inside height */
    vertical-align: top;
}

/* 記事カード */
.post-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

.post-card {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.post-card-link {
    padding: 1.4rem 1.4rem 1.2rem;
}

.post-card-meta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 13px;
    color: #777;
    margin-bottom: 0.6rem;
}

.post-card-meta .dot {
    color: #bbb;
}

.post-card-title {
    margin: 0 0 0.6rem;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.35;
    color: #111;
}

.post-card-excerpt {
    margin: 0 0 0.8rem;
    color: #333;
    font-size: 15px;
    line-height: 1.7;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tag {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
}

/* hover（a が display:block なのでカード全体が反応） */
.post-card:hover {
    border-color: #cfcfcf;
}

.post-card:hover .post-card-title {
    color: #000;
}

/* ページネーション */
.pagination {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: center;
    margin-top: 2.0rem;
}

.pagination .page {
    display: inline-block;
    padding: 0.6rem 1.0rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #666;
    text-decoration: none;
}

.pagination .current {
    border-color: #000;
    color: #000;
}

/* 右カラム（サイドバー） */
.blog-sidebar {
    margin-top: 0.2rem;
}

.sidebar-inner {
    position: sticky;
    top: 12px;
}

/* ウィジェット */
.widget {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    background: #fff;
}

.widget-title {
    margin: 0 0 0.8rem;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.6rem;
}

.widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.6rem 0;
}

.widget-list a {
    display: inline;
    color: #666;
}

.widget-list a:hover {
    color: #999;
}

.widget-list .count {
    color: #999;
}

/* タグクラウド（サイズ差） */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tag-cloud .t-1 {
    font-size: 12px;
}

.tag-cloud .t-2 {
    font-size: 13px;
}

.tag-cloud .t-3 {
    font-size: 14px;
}

.tag-cloud .t-4 {
    font-size: 15px;
}

/* モバイル最適化：サイドバーを下に落とす（grid.css が column→row に切替えるので、そのままでもOK） */
@media (max-width: 768px) {
    .sidebar-inner {
        position: static;
    }

    .blog-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-search input[type="search"] {
        width: 100%;
    }
}

/* =========================================================
   FIX: style.css の a{display:block;} の副作用を局所的に戻す
   ========================================================= */
.blog-main a,
.blog-breadcrumb a,
.post-meta a,
.post-tags a,
.tag-cloud a,
.widget-list a,
.pagination a,
.post-foot a {
    display: inline;
}

.post-card-link {
    display: block;
    /* カード全体クリックは維持 */
}

.tag,
.post-tags a.tag,
.tag-cloud a.tag {
    display: inline-block;
}

/* =========================================================
   FIX: main の余白が二重に効く場合の調整
   （style.css で main{margin:5rem 0;} があるなら blog 側は 0 に）
   ========================================================= */
.blog-main {
    margin: 0;
    padding-top: 3.5rem;
    /* ヘッダー固定に合わせる。不要なら 0 でもOK */
    margin-bottom: 5rem;
}

/* =========================================================
   記事詳細の見栄え（タイトル/メタ/本文リズム）
   ========================================================= */
.post-head {
    margin-bottom: 1.2rem;
}

.post-meta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 13px;
    color: #777;
    margin-bottom: 0.6rem;
}

.post-meta .post-cat {
    color: #666;
    text-decoration: none;
}

.post-meta .post-cat:hover {
    color: #999;
}

.post-title {
    margin: 0 0 0.8rem;
    font-size: 30px;
    line-height: 2;
    font-weight: 500;
}

.post-body {
    font-size: 16px;
    line-height: 1.9;
}

.post-body h2 {
    margin-top: 4.5rem;
    margin-bottom: 2.2rem;
}

.post-body h2 + p {
    margin-top: 0;
}

.post-body h3 {
    margin: 0 0 2rem;
    font-size: 24px;
    line-height: 2;
    font-weight: 500;
}

.post-body p {
    margin: 0 0 1.6rem;
}

.post-body ul {
    margin: 1.8rem 0 2.0rem;
}

.post-body ul + p {
    margin-top: 2.0rem;
}

/* code block */
.post-body pre {
    margin: 1.2rem 0 1.6rem;
    padding: 1rem 1.2rem;
    background: #f3f3f3;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    overflow: auto;
}

.post-body hr {
    margin: 3.5rem auto;
    width: 40%;
    opacity: 0.6;
}


.post-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospa;
}

.post-foot {
    margin-top: 4rem;
    padding: 2.4rem 0;
}

.post-foot .back-to-list {
    display: inline-block;
    padding: 0.8rem 1.2rem 0.8rem 1.6rem;
    font-size: 14px;
    color: #666;
}

/* =========================================================
   PATCH v2026-01-11 INDEX
   目的: 一覧(Index)の呼吸・行間・カード密度の最適化（サイドメニュー中身は触れない）
   方針: 既存CSSは保持し、末尾で上書きする
   ========================================================= */

/* 見出し行（Blog + Search）の呼吸を少し整える */
.blog-section-head {
    padding-bottom: 1.4rem;
    margin-bottom: 2.4rem;
}

.blog-title {
    margin: 0;
    line-height: 1.2;
}

/* 一覧カード：読みの密度を少し上げつつ、圧は下げる */
.post-card {
    padding: 1.6rem 2.0rem;
    margin-bottom: 2.0rem;
    /* 2.4rem -> 2.0rem */
}

.post-card-title {
    line-height: 1.45;
    /* 見出しの間延び防止 */
}

.post-card-excerpt {
    line-height: 1.9;
}

/* タグ：一覧では“操作UI”ではなく“補助ラベル”として軽く */
.post-card-tags .tag {
    padding: 2px 9px;
}

/* メイン/サイドの距離（grid.css の .col margin-left:4% を一覧レイアウトでは無効化し、gapで管理） */
@media (min-width: 768px) {
    .blog-layout {
        gap: 4.8rem;
        align-items: flex-start;
    }

    .blog-layout > .col {
        margin-left: 0;
    }
}

/* ページネーション：押しすぎない間隔 */
.pagination {
    margin-top: 3.2rem;
}