.reader-reactions {
    max-width: 100%;
    margin: 28px auto;
    padding: 18px 0;
    border-top: 1px solid #e6e1dc;
}

.reader-reactions__title {
    margin: 0 0 12px;
    color: #605851;
    font-size: 14px;
    font-weight: 600;
}

.reader-reactions__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
}

.reader-reaction {
    min-height: 44px;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #625b55;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* ホバー時はボタン背景を変えず、アイコンだけを変化させる。 */
.reader-reaction:hover,
.reader-reaction:focus,
.reader-reaction:active {
    background: transparent;
}

.reader-reaction:focus {
    outline: none;
}

.reader-reaction:focus-visible {
    outline: 2px solid rgba(96, 88, 81, .3);
    outline-offset: 2px;
}

.reader-reaction i {
    font-size: 19px;
    opacity: .88;
    transform: scale(1);
    transition: color .15s ease, opacity .15s ease, transform .15s ease;
}

.reader-reaction:hover i,
.reader-reaction:focus-visible i {
    opacity: 1;
    transform: scale(1.1);
}

.reader-reaction[data-reaction-type="like"] i {
    color: #e65068;
}

.reader-reaction[data-reaction-type="cheer"] i {
    color: #f08a24;
}

.reader-reaction[data-reaction-type="await_next"] i {
    color: #3d94c6;
}


.reader-reaction[data-reaction-type="like"]:hover i,
.reader-reaction[data-reaction-type="like"]:focus-visible i {
    color: #ff8399;
}

.reader-reaction[data-reaction-type="cheer"]:hover i,
.reader-reaction[data-reaction-type="cheer"]:focus-visible i {
    color: #f8b06c;
}

.reader-reaction[data-reaction-type="await_next"]:hover i,
.reader-reaction[data-reaction-type="await_next"]:focus-visible i {
    color: #6494ad;
}


.reader-reaction.is-selected i {
    opacity: 1;
    transform: scale(1.1);
}

.reader-reaction.is-popping i {
    transform: scale(1.2);
}

.reader-reaction__label {
    font-size: 12px;
}

.reader-reaction__count {
    min-width: 1em;
    font-size: 12px;
    font-weight: 700;
}

.reader-reaction__count[hidden] {
    display: none;
}

.reader-reactions__error {
    display: none;
    margin: 8px 0 0;
    color: #a33;
    font-size: 12px;
}

.reader-reactions__error.is-visible {
    display: block;
}

/* 管理画面などの集計表示では、0件も含めて常に件数を表示する。 */
.reader-reaction-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin: 10px 0;
    color: #665f59;
    font-size: 13px;
}

.reader-reaction-summary span {
    white-space: nowrap;
}

.reader-reaction-summary strong {
    color: #76533e;
}

@media (max-width: 480px) {
    .reader-reactions__items {
        justify-content: center;
        gap: 2px 6px;
    }
}

/* =========================================================
   管理画面テーブル：リアクションをアイコン＋件数だけで表示
   ========================================================= */
.reader-reaction-table-heading,
.reader-reaction-table-cell {
    text-align: center;
}

.reader-reaction-table-cell {
    min-width: 120px;
    text-align: center;
    vertical-align: middle !important;
}

.reader-reaction-summary-compact {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    margin: 0;
    line-height: 1;
}

/* 管理テーブル内は、リアクションを1行でコンパクトに表示する。 */
.reader-reaction-table-cell .reader-reaction-summary-compact {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.reader-reaction-summary-compact__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 28px;
    color: #4d4945;
    white-space: nowrap;
    cursor: help;
}

.reader-reaction-summary-compact__item:focus {
    outline: 2px solid rgba(61, 148, 198, .35);
    outline-offset: 3px;
    border-radius: 3px;
}

.reader-reaction-summary-compact__item i {
    font-size: 15px;
    line-height: 1;
}

.reader-reaction-summary-compact__item strong {
    min-width: 1ch;
    color: #4d4945;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.reader-reaction-summary-compact__item[data-reaction-type="like"] i {
    color: #e65068;
}

.reader-reaction-summary-compact__item[data-reaction-type="cheer"] i {
    color: #f08a24;
}

.reader-reaction-summary-compact__item[data-reaction-type="await_next"] i {
    color: #3d94c6;
}


.web-content-format-cell {
    text-align: center;
    vertical-align: middle !important;
}

.web-content-format-status {
    margin-top: 6px;
}

@media (max-width: 767px) {
    .reader-reaction-table-cell {
        min-width: 116px;
    }

    .reader-reaction-summary-compact {
        gap: 6px 8px;
    }
}

/* =========================================================
   話管理テーブル：PCではコンテナ幅100%に収める
   列幅はクラスで指定し、列の追加・並べ替えの影響を受けにくくする。
   ========================================================= */
.web-episode-sale-cell {
    text-align: center;
}

.web-episode-sale-price {
    margin-top: 6px;
    color: #5f554d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* 公開予約日時は「公開予約」バッジの直下に表示する。 */
.web-episode-scheduled-at {
    margin-top: 7px;
    color: #5f6670;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

/* 公開・販売・作品状態のバッジは、行の中央ではなく上端に揃える。 */
.web-episode-manage-table td.web-episode-badge-cell {
    padding-top: 18px !important;
    vertical-align: top !important;
}

@media (min-width: 992px) {
    .text-edit-page .table-responsive {
        overflow-x: visible;
    }

    .text-edit-page .web-episode-manage-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .text-edit-page .web-episode-manage-table th,
    .text-edit-page .web-episode-manage-table td {
        min-width: 0 !important;
        padding-right: 6px;
        padding-left: 6px;
        overflow-wrap: anywhere;
        vertical-align: middle;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-title {
        width: 22%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-public {
        width: 10%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-sales {
        width: 10%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-status {
        width: 10%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-reaction {
        width: 10%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-updated {
        width: 12%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-actions {
        width: 26%;
        white-space: normal !important;
    }

    .text-edit-page .web-episode-manage-table .reader-reaction-table-cell {
        min-width: 0 !important;
        padding-right: 4px;
        padding-left: 4px;
    }

    .text-edit-page .web-episode-manage-table .reader-reaction-summary-compact {
        gap: 7px;
    }

    .text-edit-page .web-episode-manage-table .web-episode-actions {
        justify-content: center;
        gap: 5px;
    }

    .text-edit-page .web-episode-manage-table .web-episode-actions .btn {
        padding: 5px 7px;
        font-size: 12px;
    }
}

/* タブレット・スマートフォンでは、可読性を優先して横スクロールを許可する。 */
@media (max-width: 991px) {
    .text-edit-page .table-responsive {
        overflow-x: auto;
    }

    .text-edit-page .web-episode-manage-table {
        min-width: 780px !important;
    }
}

/* 画面幅が1200px以上では、操作ボタンを1行に並べる。 */
@media (min-width: 1200px) {
    .text-edit-page .web-episode-manage-table .web-episode-col-title {
        width: 18%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-public {
        width: 9%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-sales {
        width: 9%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-status {
        width: 9%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-reaction {
        width: 10%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-updated {
        width: 11%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-actions {
        width: 34%;
    }

    .text-edit-page .web-episode-manage-table .web-episode-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        white-space: nowrap;
    }

    .text-edit-page .web-episode-manage-table .web-episode-actions > a,
    .text-edit-page .web-episode-manage-table .web-episode-actions > form {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    .text-edit-page .web-episode-manage-table .web-episode-actions > form {
        display: inline-flex !important;
        align-items: center;
    }

    .text-edit-page .web-episode-manage-table .web-episode-actions .btn {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        white-space: nowrap;
    }

    /* 削除は補助的な操作なので、他のボタンより少し小さくする。 */
    .text-edit-page .web-episode-manage-table .web-episode-actions .btn-github {
        padding: 3px 7px !important;
        font-size: 11px !important;
        line-height: 1.35;
    }
}

/* =========================================================
   話管理テーブル：スマートフォンで長い話タイトルをセル内に折り返す
   ========================================================= */
@media (max-width: 991px) {
    .text-edit-page .web-episode-manage-table .web-episode-col-title,
    .text-edit-page .web-episode-manage-table .web-episode-title-cell {
        width: 220px;
        min-width: 220px !important;
        max-width: 220px;
    }

    .text-edit-page .web-episode-manage-table .web-episode-title-cell,
    .text-edit-page .web-episode-manage-table .web-episode-title-cell strong {
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .text-edit-page .web-episode-manage-table .web-episode-title-cell strong {
        display: block;
        width: 100%;
        max-width: 100%;
        line-height: 1.65;
    }
}

/* =========================================================
   話管理テーブル：スマートフォン／iPadでリアクションが
   更新日セルへはみ出さないよう、専用幅を確保する。
   ========================================================= */
@media (max-width: 991px) {
    .text-edit-page .web-episode-manage-table {
        min-width: 940px !important;
        table-layout: auto !important;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-reaction,
    .text-edit-page .web-episode-manage-table .reader-reaction-table-cell {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .text-edit-page .web-episode-manage-table .reader-reaction-summary-compact {
        display: flex;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 5px;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .text-edit-page .web-episode-manage-table .reader-reaction-summary-compact__item {
        flex: 0 0 auto;
        min-width: 0;
        gap: 3px;
    }

    .text-edit-page .web-episode-manage-table .reader-reaction-summary-compact__item i {
        font-size: 14px;
    }

    .text-edit-page .web-episode-manage-table .reader-reaction-summary-compact__item strong {
        font-size: 11px;
    }

    .text-edit-page .web-episode-manage-table .web-episode-col-updated {
        width: 116px !important;
        min-width: 116px !important;
        white-space: nowrap;
    }
}

/* =========================================================
   話管理テーブル：スマートフォン／iPadでは、公開・販売・
   作品状態のバッジを行の縦中央に配置する。
   販売価格や公開予約日時がある場合は、複数行のまとまり全体を
   中央に配置する。
   ========================================================= */
@media (max-width: 991px) {
    .text-edit-page .web-episode-manage-table td.web-episode-badge-cell {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        vertical-align: middle !important;
    }
}

/* =========================================================
   話管理テーブル：スマートフォン／iPadでは、2行表示の補足情報を
   セルの高さ計算から外し、バッジ本体を他列のバッジと同じ位置に揃える。
   ========================================================= */
@media (max-width: 991px) {
    .text-edit-page .web-episode-manage-table td.web-episode-badge-cell {
        position: relative;
        vertical-align: middle !important;
    }

    .text-edit-page .web-episode-manage-table td.web-episode-badge-cell .web-episode-sale-price,
    .text-edit-page .web-episode-manage-table td.web-episode-badge-cell .web-episode-scheduled-at {
        position: absolute;
        top: calc(50% + 23px);
        right: 4px;
        left: 4px;
        margin-top: 0;
        text-align: center;
    }
}

/* =========================================================
   Web版の商品管理・話管理：状態バッジを共通化
   話管理で使用している配色・余白・角丸に揃え、
   両画面ともフォントサイズを11pxに統一する。
   ========================================================= */
.web-manage-table .status-badge {
    display: inline-block;
    padding: 4px 9px;
    border: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
}
@media (max-width: 1199px) {
	.web-manage-table .status-badge {
		font-size: 10px;
	}
}
.web-manage-table .status-badge-public,
.web-manage-table .status-badge-on,
.web-manage-table .status-badge-free {
    background: #e8f5ee;
    color: #147844;
}

.web-manage-table .status-badge-private,
.web-manage-table .status-badge-sub,
.web-manage-table .status-badge-unset {
    background: #eef1f5;
    color: #5b6673;
}

.web-manage-table .status-badge-password,
.web-manage-table .status-badge-paused {
    background: #fff4d8;
    color: #8a5a00;
}

.web-manage-table .status-badge-sale {
    background: #fde9e7;
    color: #b42318;
}

.web-manage-table .status-badge-ended {
    background: #f1e8ff;
    color: #5b35a5;
}

.web-manage-table .status-badge-serializing {
    background: #e8f0ff;
    color: #2457a6;
}

.web-manage-table .status-badge-completed {
    background: #e9f7fb;
    color: #0b7285;
}


/* =========================================================
   Web版商品管理：状態バッジを各セルの中央へ正確に配置
   既存CSSの min-width や余白の影響で右寄りに見えるのを防ぐ。
   ========================================================= */
.web-products-table-wrap .web-manage-table td:nth-child(4) > .status-badge,
.web-products-table-wrap .web-manage-table td:nth-child(5) > .status-badge,
.web-products-table-wrap .web-manage-table td:nth-child(6) > .status-badge,
.web-products-table-wrap .web-manage-table .web-content-format-cell > .status-badge,
.web-products-table-wrap .web-manage-table .web-content-format-status > .status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 12px);
    min-width: 0 !important;
    max-width: calc(100% - 12px);
    margin-right: 6px !important;
    margin-left: 6px !important;
    box-sizing: border-box;
    position: static;
    transform: none;
}

/* =========================================================
   「書籍にして欲しい」は閲覧ページ・集計表示とも非表示にする。
   既存データは削除せず、表示だけを停止する。
   ========================================================= */
.reader-reaction[data-reaction-type="want_book"],
.reader-reaction-summary-compact__item[data-reaction-type="want_book"] {
    display: none !important;
}

/* =========================================================
   公開ページ：リアクション表示位置
   SNSボタンの寸法・配色は web-public-layout.css に集約する。
   ========================================================= */

/* 連載トップ：各話のリアクション合計を中央表示する。 */
.web-series-page .web-series-reaction-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 12px;
    text-align: center;
}

.web-series-page .web-series-reaction-summary .reader-reaction-summary-compact {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
}

/* 各話閲覧ページ：リアクションとSNSボタンの間隔を詰める。 */
.web-public-episode-page .reader-reactions {
    margin-bottom: 0;
    padding-bottom: 8px;
}

@media (max-width: 480px) {
    .web-series-page .web-series-reaction-summary .reader-reaction-summary-compact {
        gap: 10px;
    }
}