/* --- 記事下SNSボタン：横いっぱい・コンテナレス版（整理済） --- */


.share-btn {
    transition: all 0.2s ease;
    will-change: opacity, transform; /* ブラウザに合成を事前通知 */
}

/* ホバー：ブランドカラーを背景に */
.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;
}

/* --- 著者プロフィールボックス --- */
.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;
}

.profile-more{
    display: inline-flex !important;
    margin-left: auto !important; /* 左マージンをautoにして右へ */
    margin-right: 0 !important;
    margin-top: auto !important;
    transition: 
        transform 0.3s ease, 
        background-color 0.3s ease, 
        /* color 0.3s ease, */
        /* box-shadow 0.3s ease !important; */
    background-color: #1a1d23;
    color: #ff8c69 !important;
    text-decoration: none !important; 
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 140, 105, 0.3);
    text-align: center;
}

.profile-more:hover {
    background-color: #ff8c69 !important;
    color: #ffffff !important;
    border-color: #ff8c69 !important;
    text-decoration: none !important;
    /* box-shadow: 0 4px 12px rgba(255, 140, 105, 0.2); */
    transform: translateY(-1px);
}

/* アクセシビリティ：フォーカス時の可視性確保 */
.profile-more:focus {
    outline: 2px solid #ff8c69;
    outline-offset: 2px;
}

.author-avatar-wrap img {
    /* サイズを厳格に固定 */
    width: 173px !important;  /* 好きなサイズに調整してください */
    height: 173px !important; /* 幅と同じ数値を指定 */
    
    /* 縦長画像を枠に収める魔法のプロパティ */
    object-fit: cover;
    object-position: center top; /* 顔が上の方にあるなら top、真ん中なら center */
    
    /* デザインの調整 */
    border-radius: 4%;       /* 正円にする（四角がいいなら 4px とかに） */
    border: 2px solid #333;
    display: block;
    flex-shrink: 0;           /* 横幅を潰されないように死守 */
}

/* 親要素の調整（念のため） */
.author-avatar-wrap {
    flex-shrink: 0;
    width: 173px;
    height: 173px;
}

.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; }

/* 768px以下：著者情報の最適化 */
@media screen and (max-width: 768px) {
    .author-profile-box {
        width: 100%; /* 親要素に対してフルサイズ */
        padding: 30px; /* 余白はしっかり確保 */
        box-sizing: border-box;
    }

    .author-inner {
        flex-direction: column;
        align-items: flex-start; /* 中央寄せではなく「左揃え」で幅を使う */
        gap: 20px;
    }

    .author-avatar-wrap,
    .author-avatar-wrap img {
        width: 150px !important; /* 少しサイズを調整して圧迫感を減らす */
        height: 150px !important;
        margin: 0; /* 中央寄せを解除 */
    }

    .author-content {
        width: 100%; /* テキストエリアを横いっぱいに */
    }

    .author-description {
        text-align: left;
        width: 100%;
    }

    .author-links {
        justify-content: flex-start; /* リンクも左から並べる */
    }