/* blog.css - Qiita Structure + Zenn Accent */
:root {
    --text-main: #333333;     /* 記事タイトル・本文 */
    --text-sub: #666666;      /* メタ情報 */
    --zenn-blue: #3ea8ff;     /* リンク・アクセントカラー */
    --zenn-blue-dark: #2c82c9;
    --bg-color: #f5f5f5;      /* 全体背景 */
    --border-color: #e0e0e0;
    --header-height: 50px;    /* ヘッダーの高さを定義 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    line-height: 1.8;
    color: var(--text-main);
    background-color: var(--bg-color);
    margin: 0;
}

/* 擬似ナビゲーションバー */
.qiita-header-mock {
    background-color: #3f3f3f;
    height: var(--header-height);
    width: 100%;
    margin-bottom: 30px;
}

/* 記事全体のコンテナ：サイドバーを含めるため幅を拡張 */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

/* --- レイアウト拡張 (Flexbox) --- */
.main-wrapper {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

article {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    padding: 48px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* サイドバー（目次） */
.sidebar {
    width: 280px;
    position: sticky;
    top: 20px;
}

/* 目次内のアンカーへ飛んだ時の余白調整（ヘッダー対策） */
[id^="heading-"] {
    scroll-margin-top: 20px;
}

@media (max-width: 1000px) {
    .main-wrapper {
        flex-direction: column;
    }
    .sidebar {
        display: none; /* スマホ・タブレットでは目次を非表示 */
    }
}

/* --- 目次(TOC)スタイル --- */
.toc {
    padding: 8px;
}

.toc-title {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
    font-size: 0.95rem;
    display: block;
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--border-color);
}

.toc li {
    margin-bottom: 4px;
}

.toc a {
    color: var(--text-sub);
    display: block;
    line-height: 1.4;
    padding: 4px 12px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.toc a:hover {
    color: var(--zenn-blue);
    background: rgba(62, 168, 255, 0.05);
    text-decoration: none;
}

/* 記事内の画像が枠を突き抜けないようにする */
article img {
    max-width: 100%;    /* 親要素（article）の幅を超えない */
    height: auto;       /* アスペクト比を維持 */
    display: block;     /* 下部の余計な隙間を消す */
    margin: 24px auto;  /* 上下に余白を作り、中央寄せにする */
    border-radius: 4px; /* 少し角を丸くすると雰囲気が良くなります */
}

/* キャプション（もし使う場合）のスタイル */
.image-caption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-top: -16px;
    margin-bottom: 24px;
}

/* --- 以下、既存のスタイルを維持 --- */
header { margin-bottom: 40px; }
.post-meta { font-size: 0.9rem; color: var(--text-sub); margin-bottom: 8px; }
h1 { font-size: 2rem; font-weight: 700; margin: 0 0 16px; line-height: 1.4; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tag-item { background: #f0f2f5; color: var(--text-sub); padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; text-decoration: none; }
h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-top: 48px; margin-bottom: 24px; font-weight: 700; }
h3 { font-size: 1.25rem; margin-top: 32px; margin-bottom: 16px; font-weight: 700; }
p { margin-bottom: 1.6rem; }
a { color: var(--zenn-blue); text-decoration: none; }
.site-nav { font-size: 0.9rem; margin-bottom: 20px; color: var(--text-sub); }
strong { font-weight: 700; }
code:not(pre code) { background-color: #eee; color: #e01e5a; padding: 2px 4px; border-radius: 3px; font-size: 0.9em; font-family: monospace; }
pre { background: #282c34; border-radius: 6px; margin: 24px 0; overflow: hidden; }
pre code { background: none; padding: 0; }
pre code.hljs { display: block; overflow-x: auto; padding: 1.5em; font-family: monospace; font-size: 0.9rem; line-height: 1.6; }
footer { margin-top: 60px; border-top: 1px solid var(--border-color); padding-top: 30px; }

/* --- テーブル（Zenn/Qiita風） --- */
#content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

#content table th {
    background-color: #f0f6fc;
    color: var(--text-main);
    font-weight: 700;
    padding: 10px 16px;
    border: 1px solid #c8d7e5;
    text-align: left;
    white-space: nowrap;
}

#content table td {
    padding: 10px 16px;
    border: 1px solid #d8e0e8;
    vertical-align: top;
}

#content table tr:nth-child(even) td {
    background-color: #f8fafb;
}

#content table tr:hover td {
    background-color: #eaf3fb;
}