/*
 * ⚠️⚠️ 会員限定の箱の見た目（⚠️ 版 0.2.2・⚠️ 2026-10-24）。
 *
 * ⚠️ 本体の暗いデザインに合わせる（⚠️ コメント欄と同じ色づかい）。
 *
 * ## ⚠️⚠️ なぜ作り直したか
 *
 *    ⚠️ 本番で、⚠️⚠️ **箱の中の文字がほとんど読めなかった**。
 *       ⚠️ 明るい灰色の箱に、⚠️ テーマの白い文字がかかっていた。
 *    ⚠️ 箱が明るくて、⚠️ 本体の暗いデザインに馴染んでいなかった。
 *
 * ## ⚠️⚠️ だから、箱の中の色は**すべてここで決める**
 *
 *    ⚠️ テーマの文字色・背景色に負けないよう、`!important` を付ける。
 *    ⚠️ ⚠️ **「指定しない」は、テーマに任せることになる。**
 *       ⚠️⚠️ **それが今回の不具合の原因だった。**
 *
 * ## ⚠️ 色は、コメント欄（pkt-comment-ui.css）から取っている
 *
 *    ⚠️ カードの背景 #1c1c1c ／ ⚠️ 角の丸み 8px
 *    ⚠️ オレンジ #ffa500 ／ ⚠️ オレンジの上の文字 #111
 *    ⚠️ 本文 #fff ／ ⚠️ 添える文 #c8c8c8 ／ ⚠️ 枠 #3d3d3d
 */

.pokka-members-only {
    box-sizing: border-box;
    margin: 2em 0;
    padding: 18px 16px;
    border-radius: 8px;
    text-align: center;
}

/*
 * ⚠️⚠️ **2つの class 名の両方に当てること。**
 *
 *    ⚠️ php が出すのは `pokka-members-only__lead`
 *    ⚠️ js が出すのは  `pokka-mo__lead`
 *    ⚠️ ⚠️ **前の版は js の方にしか当てていなかった。**
 *       ⚠️⚠️ **js が動く前の文は、色が決まっていなかった。**
 */
.pokka-members-only__lead,
.pokka-mo__lead {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

.pokka-mo__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

/* ⚠️ コメント欄のボタンと同じ形（⚠️ 丸い・⚠️ 高さ44px） */
.pokka-members-only .pokka-mo__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #ffa500 !important;
    border-radius: 999px !important;
    background: #ffa500 !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pokka-members-only .pokka-mo__button:hover,
.pokka-members-only .pokka-mo__button:focus {
    background: #ffcf80 !important;
    border-color: #ffcf80 !important;
    color: #111 !important;
}

/* ⚠️ 2つ目のボタン（⚠️ ログイン）は、枠だけ */
.pokka-members-only .pokka-mo__button--ghost {
    background: transparent !important;
    color: #ffa500 !important;
}

.pokka-members-only .pokka-mo__button--ghost:hover,
.pokka-members-only .pokka-mo__button--ghost:focus {
    background: rgba(255, 255, 255, .1) !important;
    border-color: #ffa500 !important;
    color: #ffa500 !important;
}

/*
 * ⚠️⚠️ **「登録は無料です」の一文は、読みやすく残すこと。**
 *
 *    ⚠️ 小さくしすぎない（⚠️ 13px）。
 *    ⚠️ 暗すぎない色にする（⚠️ #c8c8c8）。
 *    ⚠️ ⚠️ **コインに実利を持たせないための一文なので、消さない。**
 */
.pokka-members-only .pokka-mo__note {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: #c8c8c8 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/*
 * ⚠️ 読み込んだ本文は、記事と同じ見た目のままにする。
 *
 * ⚠️⚠️ **ここに色を付けないこと。** ⚠️ 箱ごと差し替わるので、
 *    ⚠️ 記事本文の見た目をそのまま使う。
 */
.pokka-mo__body {
    margin: 0;
}

/* ⚠️ スマートフォン */
@media (max-width: 480px) {
    .pokka-members-only {
        padding: 16px 12px;
    }

    .pokka-members-only .pokka-mo__button {
        width: 100%;
    }

    .pokka-mo__actions {
        flex-direction: column;
        gap: 8px;
    }
}

/*
 * ⚠️⚠️ **枠はオレンジ**（⚠️ 運営者の判断・2026-10-24）。
 *
 *    ⚠️ コメント欄の「案内の箱」と同じ形にする。
 *    ⚠️ ⚠️ **落ち着いた枠（#3d3d3d）の案もあったが、こちらを採った。**
 */
.pokka-members-only {
    border: 1px solid #ffa500;
    background: #1a1a1a !important;
}

/*
 * ⚠️⚠️ **編集者向けのプレビューの帯**（⚠️ 版 0.2.7）。
 *
 * ⚠️ ⚠️ **「いま見えているものは、読者には見えない」と伝えるためのもの。**
 *    ⚠️⚠️ **目立たせること。** ⚠️ 見落とすと、公開したつもりになる。
 */
.pokka-mo-preview {
    box-sizing: border-box;
    margin: 0 0 16px !important;
    padding: 12px 14px !important;
    border: 2px solid #ffa500 !important;
    border-radius: 6px !important;
    background: #ffa500 !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/*
 * ⚠️⚠️ **読み込んだ本文を、画面からはみ出させない**（⚠️ 版 0.2.8）。
 *
 * ## ⚠️⚠️ 本番で起きたこと（⚠️ 2026-10-25・⚠️ スマートフォン）
 *
 *    ⚠️ 本文を渡す口は**別の通信**なので、
 *    ⚠️⚠️ **スマートフォン用のテーマの決まりが効かず、
 *       ⚠️ パソコン用の幅（640px）のまま本文が作られていた。**
 *
 *    → ⚠️⚠️ **中身が画面からはみ出し、ページ全体が縮んで小さく見えた**
 *       （⚠️ 375 ÷ 640 ＝ 0.59）。
 *
 * ## ⚠️ 幅は、php の側でも合わせている
 *
 *    ⚠️ ここは**念のための押さえ**。
 *    ⚠️ ⚠️ **幅が伝わらなかったときも、はみ出させない。**
 */
.pokka-mo__body {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ⚠️⚠️ **大きさを持つものは、すべて画面に収める** */
.pokka-mo__body img,
.pokka-mo__body video,
.pokka-mo__body iframe,
.pokka-mo__body embed,
.pokka-mo__body object,
.pokka-mo__body .wp-video,
.pokka-mo__body .wp-video-shortcode,
.pokka-mo__body .mejs-container,
.pokka-mo__body .mejs-overlay,
.pokka-mo__body .mejs-poster,
.pokka-mo__body .mejs-mediaelement {
    max-width: 100% !important;
}

/*
 * ⚠️ 動画は、⚠️⚠️ **高さを幅に合わせる**（⚠️ 縦横の比を保つ）。
 *    ⚠️ ⚠️ **高さを決め打ちのままにすると、黒い帯が残る。**
 */
.pokka-mo__body video,
.pokka-mo__body .wp-video,
.pokka-mo__body .wp-video-shortcode,
.pokka-mo__body .mejs-container {
    height: auto !important;
}

/* ⚠️ 本体の記事でよく使われる入れ物も、収める */
.pokka-mo__body .w600 {
    max-width: 100% !important;
}

/*
 * ⚠️ 表は、⚠️⚠️ **そこだけ横にすべらせる**（⚠️ ページ全体を広げない）。
 */
.pokka-mo__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ⚠️⚠️ **長いアドレスが、横に突き抜けないように** */
.pokka-mo__body a,
.pokka-mo__body pre {
    overflow-wrap: break-word;
    word-break: break-word;
}

.pokka-mo__body pre {
    max-width: 100%;
    overflow-x: auto;
}