/* --- 記事下SNSボタン：横いっぱい・コンテナレス版（整理済） --- */
.article-share-buttons {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 40px 0 60px; /* 下マージンを広げてページナビと離す */
    width: 100%;
}

.share-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #ccc !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

/* アイコン共通：SVG */
.share-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    margin-bottom: 5px;
}

/* アイコン共通：テキスト・絵文字系 */
.share-btn .btn-text-icon {
    line-height: 1;
    margin-bottom: 4px;
}

/* はてな「B!」の巨大化 */
.share-btn .large-b {
    font-size: 22px !important;
    font-weight: 900;
}

/* BlueSky「🦋」の巨大化（10pxの呪縛を打破） */
.share-btn .emoji {
    font-size: 24px !important;
}

/* ラベルテキスト（10px固定） */
.share-btn span:not(.btn-text-icon) {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

/* ホバー：ブランドカラーを背景に */
.share-btn:hover { color: #fff !important; border-color: transparent; }
.share-btn.x:hover { background: #000; }
.share-btn.hatena:hover { background: #008fde; }
.share-btn.bluesky:hover { background: #0085ff; }
.share-btn.facebook:hover { background: #1877f2; }
.share-btn.line:hover { background: #06c755; }
.share-btn.copy:hover { background: #E9967A; } /* サーモンピンク */

/* コピー完了時のステータス固定 */
.share-btn.copy.is-copied {
    background: #E9967A !important;
    color: #fff !important;
}

/* スマホ対応：3列×2段 */
@media screen and (max-width: 600px) {
    .article-share-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 40px;
    }
}

/* 親要素をFlexboxにして、中身の表示順をコントロールする */
.single .site-main {
    display: flex;
    flex-direction: column;
}

/* 1. 記事本文 */
.single .entry-content {
    order: 1;
}

/* 2. SNSシェアボタン（これを2番目に持ってくる） */
.single .article-share-buttons {
    order: 2;
    margin-top: 40px;
    margin-bottom: 20px; /* ナビとの間隔 */
}

/* 3. ページナビが含まれるフッターメタ */
.single footer.entry-meta {
    order: 3;
    display: block !important; /* 復活の呪文 */
}


/* --- 著者プロフィールボックス --- */
.author-profile-box {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 30px;
    margin-top: 40px;
}

.author-inner {
    display: flex;
    gap: 25px;
    align-items: center;
}

.author-avatar-wrap img {
    border-radius: 50%;
    border: 2px solid #333;
    display: block;
}

.author-label {
    font-size: 10px;
    font-weight: bold;
    color: #E9967A; /* 差し色のサーモンピンク */
    letter-spacing: 0.1em;
}

.author-name {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin: 5px 0 10px;
}

.author-description {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 著者リンク（SNSボタンのミニ版） */
.author-links {
    display: flex;
    gap: 10px;
}

.auth-link {
    font-size: 11px;
    font-weight: bold;
    color: #999 !important;
    text-decoration: none !important;
    border: 1px solid #444;
    padding: 4px 12px;
    border-radius: 20px;
    transition: all 0.2s;
}

.auth-link:hover { color: #fff !important; }
.auth-link.x:hover { background: #000; border-color: #000; }
.auth-link.bsky:hover { background: #0085ff; border-color: #0085ff; }
.auth-link.codepen:hover { background: #ffdd40; color: #000 !important; border-color: #ffdd40; }
.auth-link.amazon:hover { background: #ff9900; border-color: #ff9900; }

/* スマホ対応 */
@media screen and (max-width: 600px) {
    .author-inner { flex-direction: column; text-align: center; }
    .author-links { justify-content: center; flex-wrap: wrap; }
}