/* ────────────────────────────────
   既存のスタイル（省略せず全文）
   ──────────────────────────────── */

/* 横並び：画像 → 吹き出し */
.entry-content .ownedbase-comment-row {
    display: flex;
    gap: 40px;
    /* margin はインラインCSSで制御 */
}

/* 画像コンテナ（正方形） */
.entry-content .ownedbase-comment-row .ownedbase-comment-image {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;  
    /* line-height:0 で、img の下のベースライン空白をなくす */
    line-height: 0;
    /* デバッグ用：背景色は上記で付与 */
}

/* 丸いアイコン画像 */
.entry-content .ownedbase-comment-row .ownedbase-comment-image img {
    margin-bottom: -20px; /* 画像下の隙間を消すためのマイナスマージン */
    display: block;      /* inline-block のベースライン隙間を消す */
    width: 60px;         /* 好みのサイズに合わせる */
    height: 60px;        /* 好みのサイズに合わせる */
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);

    /* デバッグ用：背景色は上記で付与 */
}

/* キャラクター名を画像下に表示 */
.entry-content .ownedbase-comment-row .ownedbase-comment-image .character-name {
    display: inline-block; /* 必要に応じて追加 */
    padding-top: -25px;          /* 少し余裕が必要なら 2px 程度に変更可 */
    font-size: 12px;
    line-height: 1;        /* 文字自体の高さを確保 */
    text-align: center;
    width: 100%;         /* 画像の幅に合わせる */
    word-wrap: break-word;   /* 長い名前は折り返す */

    /* デバッグ用：背景色は上記で付与 */
    /* margin-top はインラインCSSで動的に設定 */
}

/* 吹き出し本体（画像の右または左） */
.entry-content .ownedbase-comment-row .ownedbase-speech-bubble {
    line-height: 1.6;
    word-break: normal;
    flex-grow: 1;
    position: relative; /* 三角形の位置指定のため */
}

/* 三角形吹き出し（動的CSSで表示/非表示、色、位置、影を制御） */
.entry-content .ownedbase-comment-row .ownedbase-speech-bubble::after {
    content: '';
    position: absolute;
    border-left: 0;
    z-index: -1; /* 背景色による白い枠線を防ぐ */
}

/* モバイル対応（動的CSSで上書き） */
@media (max-width: 480px) {
    .entry-content .ownedbase-comment-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    /* モバイルでは画像を 50×50 に */
    .entry-content .ownedbase-comment-row .ownedbase-comment-image {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70px;
        /* line-height:0 で、img の下のベースライン空白をなくす */
        line-height: 0;
        /* デバッグ用：背景色は上記で付与 */
    }
    .entry-content .ownedbase-comment-row .ownedbase-comment-image img {
        margin-bottom: -20px; /* 画像下の隙間を消すためのマイナスマージン */
        display: block;      /* inline-block のベースライン隙間を消す */
        width: 50px;         /* 好みのサイズに合わせる */
        height: 50px;        /* 好みのサイズに合わせる */
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);

    /* デバッグ用：背景色は上記で付与 */
    }
    /* 名前の余白も動的に設定 */
    .entry-content .ownedbase-comment-row .ownedbase-comment-image .character-name {
        display: inline-block; /* 必要に応じて追加 */
        padding-top: -25px;          /* 少し余裕が必要なら 2px 程度に変更可 */
        font-size: 10px;
        line-height: 0;        /* 文字自体の高さを確保 */
        text-align: center;
        width: 100%;
        word-wrap: break-word;   /* 長い名前は折り返す */
        /* margin-top はインラインCSSで動的に設定 */
    }

    .entry-content .ownedbase-comment-row .ownedbase-speech-bubble {
        word-break: break-word;
    }
}

/* 投稿全体のカスタムクラス */
.ownedbase-post {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;           /* 左右のpaddingを削除 */
    box-sizing: border-box;    /* マージンを幅に含めない */
}

/* ──────────────────────────────────────
   ここから左右反転用の追加（必要に応じて）
   ────────────────────────────────────── */

/* 反転用フラグがつくと、画像→吹き出し の順を逆転（吹き出し→画像） */
.reverse-ownedbase-comments .entry-content .ownedbase-comment-row {
    flex-direction: row-reverse;
}

/* 反転時の三角形も右寄せに変更し、向きを反転 */
.reverse-ownedbase-comments .entry-content .ownedbase-comment-row .ownedbase-speech-bubble::after {
    top: 30px;         /* 三角形の上下オフセット */
    right: 50px;       /* 左寄せ時の left:50px を right:50px に */
    left: auto;        /* リセット */
    border-width: 0 10px 10px 10px;   /* 下向き三角形 */
    border-color: transparent transparent transparent #ccc;
    transform: scaleY(-1); /* 向きを上下反転 */
    filter: drop-shadow(0 1px 10px rgba(0,0,0,0.1));
}

/* モバイルでも同様に左右反転 */
@media (max-width: 480px) {
    .reverse-ownedbase-comments .entry-content .ownedbase-comment-row {
        flex-direction: row-reverse;
    }
    .reverse-ownedbase-comments .entry-content .ownedbase-comment-row .ownedbase-speech-bubble::after {
        top: -20px;        /* モバイル用オフセット例 */
        right: 40px;      /* モバイル用 after_left と連動 */
        left: auto;
        border-width: 0 8px 8px 8px;   /* triangle_size:8px */
        border-color: transparent transparent transparent #ccc;
        transform: scaleY(-1);
        filter: drop-shadow(0 1px 8px rgba(0,0,0,0.1));
    }
}