/**
 * ポッカキット コメント連携（本体側）
 *
 * ⚠️⚠️ **既存の見た目を変えないこと。**
 *    指定してよいのは、**このプラグインが足した `.pokka-*` を含むもの**だけ。
 *    ⚠️ `.comment` や `.fn` だけを狙って書かない。
 *
 * ⚠️ **目印の無いコメントの見た目は、一切変えない**（D-43）。
 *    そのために、すべての指定に `.pokka-avatar` などの条件を付ける。
 */

/* ───────────────────────────────────────────────
   アバター
   ─────────────────────────────────────────────── */

/*
 * ⚠️ **幅と高さは HTML 側で指定している**（D-30）。
 *    ここでは触らない。触ると、読み込みの途中で高さが変わり、
 *    **iframe の高さが合わなくなる。**
 */
.pokka-avatar {
    /* ⚠️ 後ろの色（D-41）。背景のパーツを持たないアバターは透明 */
    background-color: #3A3A3A;

    border-radius: 4px;
    vertical-align: top;

    /* ⚠️ 縦に伸び縮みさせない */
    flex: none;

    /* ⚠️ テーマの img の指定に負けないように */
    max-width: none;
    box-shadow: none;
    border: 0;
}

/* 名前の入れ物（⚠️ JavaScript が中だけを書き換える） */
.pokka-name {
    /* ⚠️ テーマの見た目を引き継ぐ。ここで字体や色を変えない */
    display: inline;
}

/* ───────────────────────────────────────────────
   ⚠️ 置き方（D-42）
   アバターを左、その右に「名前・日付・返信」と「本文」
   ─────────────────────────────────────────────── */

/*
 * ⚠️⚠️ **名前の行の名前を、条件にしないこと。**
 *
 *    ⚠️ テーマによって、名前の行の要素が違う。
 *      パソコン用      … `<header class="comment-meta comment-author vcard">`
 *      スマートフォン用 … `<footer class="comment-meta">`
 *                        その中の `<div class="comment-author vcard">`
 *
 *    ⚠️ `> header` を条件にしていたため、**スマートフォンでは
 *    指定が1つも当たらず、アバターが名前の前に並ぶだけだった**
 *    （2026-10-12 に実際に起きた）。
 *
 *    ✅ **アバターそのものだけを条件にする。**
 *    ⚠️ 返信は `<article>` の外（`<ul class="children">`）にあるので、
 *    親が返信のアバターを拾うことはない。
 */

/*
 * ⚠️⚠️ **基準は、必ずこちらで作ること。**
 *
 *    ⚠️ テーマの `position: relative` を当てにしてはいけない。
 *    **コメント一覧ページは `.commentlist` で囲まれていない**ので、
 *    テーマの `.commentlist .children li.comment { position: relative }`
 *    が効かず、**浮かせたアバターがページの上に飛んだ**
 *    （2026-10-12 に実際に起きた）。
 *
 * ⚠️ **当てるのは内側の `article.comment` だけ。**
 *    外側にも `class="comment"` の付いた `<li>` があるため、
 *    `.comment` だけで狙うと**二重に効く。**
 */
article.comment:has(.pokka-avatar) {
    position: relative;
}

/*
 * ⚠️⚠️ **アバターは、箱の左上に浮かせる。**
 *    浮かせるので**高さを持たない。**
 *    下の `min-height` と必ず組にすること。
 */
article.comment:has(.pokka-avatar) .pokka-avatar {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
}

/*
 * ⚠️⚠️ **`min-height` は「アバターの高さ ＋ 10px」。**
 *
 *    ⚠️ 無いと、本文が1行だけのとき（「あけおめ」など）
 *    **アバターが箱の下にはみ出し、次のアバターに重なる。**
 *    ⚠️ 10px は、**アバター同士がくっついて見えない**ための余白
 *    （D-45・2026-10-12）。
 *
 * ⚠️ **本文が長いコメントの見た目は変わらない**（最低の高さなので）。
 */

/* ── パソコン用：親 56px ───────────────────── */
/*
 * ⚠️⚠️ **大きさを変えたら、ここも必ず変えること**（2026-10-14 に踏んだ）。
 *
 *    ⚠️ 条件が `[width="64"]` のままだと、56px のアバターに**当たらない。**
 *    → ⚠️ **空きが足りず、アバターが名前に重なる**（実際に起きた）。
 *
 *    ⚠️ `padding-left` は「アバターの幅 ＋ 20px」、
 *       `min-height` は「アバターの高さ ＋ 10px」。
 *
 * ⚠️ **`CommentPluginTest` が、PHP の大きさと CSS の条件がそろっているかを
 *    検査している。**
 */
article.comment:has(.pokka-avatar[width="56"]) {
    padding-left: 76px;
    min-height: 66px;
}

/* ── パソコン用：返信 48px ──────────────────── */
article.comment:has(.pokka-avatar[width="48"]) {
    padding-left: 60px;
    min-height: 58px;
}

/* ── スマートフォン用：親 40px ─────────────── */
article.comment:has(.pokka-avatar[width="40"]) {
    padding-left: 50px;
    min-height: 50px;
}

/* ── スマートフォン用：返信 32px ────────────── */
article.comment:has(.pokka-avatar[width="32"]) {
    padding-left: 42px;
    min-height: 42px;
}

/* ── ⚠️ 例外：記事ページの返信 ───────────────── */

/*
 * ⚠️⚠️ **ここだけ、空きを足さない。**
 *
 *    記事ページの返信にかぎり、テーマが名前を 50px 右へ寄せて
 *    **自分のアバター（39px）の場所を空けている**
 *    （`.commentlist .children li.comment .comment-meta`）。
 *    ⚠️ **さらに足すと二重になる**
 *    （2026-10-12 に実際に起きた。約100px 空いた）。
 *
 * ⚠️ **コメント一覧ページには、この空きが無い。**
 *    一覧ページは `.commentlist` の外にあるため。
 *    だから `.commentlist` を条件に入れて見分ける。
 */
.commentlist .children article.comment:has(.pokka-avatar[width="32"]) {
    /* ⚠️ テーマが空けた 50px に、アバターを収める */
    padding-left: 0;
}

/*
 * ⚠️ **本文も、名前と同じだけ右へ送る**（D-42）。
 *    テーマは名前だけを寄せていて、本文は左端のままなので、
 *    そろえないと**本文がアバターの下に回り込む。**
 */
.commentlist .children article.comment:has(.pokka-avatar[width="32"]) > .comment-content {
    margin-left: 50px;
}

/*
 * ⚠️ `:has()` が使えない古いブラウザでは、
 *    上の指定が丸ごと無視され、**アバターが名前の前に並ぶ**
 *    （崩れはしない）。そのときの間だけ空ける。
 *
 * ⚠️⚠️ **`@supports` で囲むこと。**
 *    囲まないと、`:has()` が使える今のブラウザでも効いてしまい、
 *    **名前が会員以外より右へずれる。**
 */
@supports not selector(:has(*)) {
    .pokka-avatar + .pokka-name {
        margin-left: 8px;
    }
}

/* ───────────────────────────────────────────────
   ⚠️ 会員としてコメントする（D-53）
   ─────────────────────────────────────────────── */

/*
 * ⚠️⚠️ **テーマの `#respond input { width: 400px }` などが、
 *    こちらの部品にも効いてしまう**（twentyten style.css:1430）。
 *    ⚠️ テーマは **ID を使って指定している**ので、
 *    こちらを後に読み込んでも**強さで負ける。**
 *
 * ⚠️ **`!important` を使うのは、この欄の中だけ。**
 *    ⚠️ **既存の入力欄・コメントには一切届かない。**
 */

/* ── 欄そのもの ───────────────────────────── */

.pokka-comment-choice {
    /*
     * ⚠️ **いちばん上に出す。**
     *    テーマは `#commentform` を縦の flex にしていて、
     *    本文に `order: 1`、送信に `order: 2` を与えている。
     *    ⚠️ **ここを `-1` にしておけば、何より先に来る。**
     */
    order: -1;

    box-sizing: border-box !important;
    display: block;
    /* ⚠️ パソコン用は、本文の欄と同じ幅 */
    width: 100%;
    max-width: 426px;
    margin: 10px 0 12px !important;
    padding: 10px 12px !important;
    background: #353535;
    border: 0;
    border-left: 4px solid #ffa500;
    border-radius: 4px;
    text-align: left;
    line-height: 1.6;
}

/* ── チェックの行 ─────────────────────────── */

.pokka-comment-choice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* ⚠️ 指で押せる高さ */
    min-height: 44px;
}

.pokka-comment-choice-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    /* ⚠️ 行いっぱいを押せるようにする（44px 以上） */
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 44px;
    cursor: pointer;
    font-weight: normal;
}

/*
 * ⚠️⚠️ **本物のチェックボックスを、見た目だけ作り替える。**
 *
 *    ⚠️ `appearance: none` を使う。
 *    ⚠️ **別の絵に置き換えて本物を隠してはいけない。**
 *    キーボードで操作でき、フォーカスも見えるようにするため。
 *
 * ⚠️ チェックの印は背景の画像で描く。
 *    `::after` は、入力部品では当てにならないブラウザがある。
 */
.pokka-comment-choice input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: none !important;
    box-sizing: border-box !important;
    width: 18px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #ffa500 !important;
    border-radius: 4px !important;
    background: transparent !important;
    float: none !important;
    cursor: pointer;
}

.pokka-comment-choice input[type="checkbox"]:checked {
    background-color: #ffa500 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
}

/* ⚠️ フォーカスが見えること */
.pokka-comment-choice input[type="checkbox"]:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px;
}

.pokka-comment-choice-text {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
}

.pokka-comment-choice .pokka-comment-login {
    flex: none;
    margin: 0;
    color: #ffa500 !important;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none !important;
}

/* ── ① チェックを入れていない ───────────────── */

.pokka-comment-hint {
    margin: 8px 0 0 !important;
    color: #a8a8a8;
    font-size: 11px;
    line-height: 1.6;
}

.pokka-comment-hint[hidden] {
    display: none !important;
}

/* ── ② 会員としてコメントする ───────────────── */

.pokka-comment-me[hidden] {
    display: none !important;
}

.pokka-comment-me {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #ffffff;
    font-size: 12px;
}

/*
 * ⚠️ **幅と高さは HTML 側で指定している**（D-30）。
 *    読み込みの途中で高さが変わらないように。
 */
.pokka-comment-me-avatar {
    flex: none;
    background-color: #3A3A3A;
    border-radius: 5px;
    max-width: none;
    box-shadow: none;
    border: 0;
}

.pokka-comment-me-avatar:not([src]) {
    visibility: hidden;
}

.pokka-comment-me-name b {
    font-weight: 700;
}

/*
 * ⚠️⚠️ **会員として投稿するときは、名前の欄を隠す。**
 *    名前は `@ユーザーネーム` に決まるため。
 *    ⚠️ **チェックを外したら元どおり出す**（入力した値はそのまま）。
 */
.pokka-member-on .comment-form-author {
    display: none;
}

/* ── ③ 接続できなかった ─────────────────────── */

.pokka-comment-error[hidden] {
    display: none !important;
}

/*
 * ⚠️⚠️ **④ の案内（オレンジ）と、はっきり区別する。**
 *    こちらは**うまくいかなかったことの知らせ**なので赤系。
 */
.pokka-comment-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: #3b1f1f;
    border: 1px solid #c9473f;
    border-radius: 4px;
}

.pokka-comment-error-mark {
    flex: none;
    display: inline-flex;
    color: #ff8a80;
    margin-top: 1px;
}

.pokka-comment-error-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    line-height: 1.6;
}

.pokka-comment-error-title {
    color: #ff8a80;
    font-size: 12px;
    font-weight: 700;
}

.pokka-comment-error-text {
    color: #e6c4c1;
}

/* ── ④ ログインしていない ─────────────────── */

.pokka-comment-login-box[hidden] {
    display: none !important;
}

.pokka-comment-login-box {
    display: block;
    margin: 8px 0 0;
    padding: 10px 12px;
    background: rgba(255, 165, 0, .10);
    border: 1px solid #ffa500;
    border-radius: 6px;
    line-height: 1.6;
    text-align: left;
}

.pokka-comment-login-title {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.pokka-comment-login-lead {
    margin: 6px 0 0 !important;
    color: #e8e8e8;
    font-size: 11.5px;
    line-height: 1.7;
}

/* ⚠️ 強調するのは「名前とアバター付き」と「1日1回 ◯ポイント」だけ */
.pokka-comment-login-lead b {
    color: #ffa500;
    font-weight: 700;
}

.pokka-comment-login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/*
 * ⚠️ **高さはパソコン用 34px。**
 *    ⚠️ 狭い画面では 44px にする（指で押すため）。
 */
.pokka-comment-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    /*
     * ⚠️ **枠線を高さに含める。**
     *    含めないと、1px の枠が上下に足されて **36px** になる。
     */
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/*
 * ⚠️⚠️ **文字色に `!important` が要る。**
 *
 *    テーマが `#respond a { color: … }` のように
 *    **ID を使って色を決めている**ので、
 *    こちらを後に読み込んでも**強さで負ける。**
 *
 *    ⚠️ **実際に、塗りのボタンの文字が
 *    背景と同じオレンジになって消えた**（2026-10-12）。
 */
.pokka-comment-login-btn--fill,
.pokka-comment-login-btn--fill:hover,
.pokka-comment-login-btn--fill:focus,
.pokka-comment-login-btn--fill:visited {
    background: #ffa500 !important;
    color: #111 !important;
    border: 1px solid #ffa500 !important;
    text-decoration: none !important;
}

.pokka-comment-login-btn--line,
.pokka-comment-login-btn--line:hover,
.pokka-comment-login-btn--line:focus,
.pokka-comment-login-btn--line:visited {
    background: transparent !important;
    color: #ffa500 !important;
    border: 1px solid #ffa500 !important;
    text-decoration: none !important;
}

/* 外部リンクの印 */
.pokka-comment-ext {
    font-size: 12px;
}

.pokka-comment-login-note {
    margin: 10px 0 0 !important;
    color: #a8a8a8;
    font-size: 10.5px;
    line-height: 1.6;
}

/* ⚠️ 読み上げ用の控え。見た目には出さない */
.pokka-comment-state {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ───────────────────────────────────────────────
   ⚠️ 狭い画面（スマートフォン用）
   ⚠️ テーマは端末で切り替わるので、ここは画面の広さで見る
   ─────────────────────────────────────────────── */

@media (max-width: 650px) {
    .pokka-comment-choice {
        max-width: none;
        padding: 12px !important;
        background: #1c1c1c;
    }

    .pokka-comment-choice input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
    }

    .pokka-comment-choice input[type="checkbox"]:checked {
        background-size: 16px 16px !important;
    }

    .pokka-comment-choice-text {
        font-size: 15px;
    }

    .pokka-comment-choice .pokka-comment-login {
        font-size: 14px;
    }

    .pokka-comment-hint {
        font-size: 13px;
    }

    .pokka-comment-me {
        font-size: 14px;
    }

    .pokka-comment-error-body {
        font-size: 13px;
    }

    .pokka-comment-error-title {
        font-size: 14px;
    }

    .pokka-comment-login-title {
        font-size: 15px;
    }

    .pokka-comment-login-lead {
        font-size: 13px;
    }

    .pokka-comment-login-note {
        font-size: 12px;
    }

    .pokka-comment-login-btn {
        height: 44px;
        padding: 0 18px;
        font-size: 14px;
        /* ⚠️ 2つ並べると窮屈なので、幅を分け合う */
        flex: 1 1 auto;
    }
}

/* ───────────────────────────────────────────────
   ⚠️ 送信ボタンの手前の「@名前 として投稿します」（D-51）
   ─────────────────────────────────────────────── */

/*
 * ⚠️⚠️ **押す直前に、誰として投稿するかが必ず目に入るようにする。**
 *
 *    本体のフォームは「お名前 → チェック → 本文 → 送信ボタン」の順で、
 *    ⚠️ **書いているうちにチェックの行が画面の外へ出る。**
 *
 * ⚠️ **`hidden` のときは出さない。**
 *    会員と確認できたときだけ JavaScript が外す。
 *    ⚠️ **会員以外の読者には、何も足さない。**
 */
.pokka-comment-as[hidden] {
    display: none !important;
}

.pokka-comment-as {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    /* ⚠️ テーマの文字色に任せない（暗くて読めなくなる） */
    color: #dddddd;
    font-size: 12px;
    font-weight: 700;
    /* ⚠️ 幅を決めない。テーマの入力欄と並んでも崩れないように */
    width: auto;
}

/*
 * ⚠️ **幅と高さは HTML 側で指定している**（D-30）。
 *    読み込みの途中で高さが変わらないように。
 */
.pokka-comment-as-avatar {
    background-color: #3A3A3A;
    border-radius: 4px;
    flex: none;
    max-width: none;
    box-shadow: none;
    border: 0;
}

/* ⚠️ 絵が無い間は、枠だけを出さない */
.pokka-comment-as-avatar:not([src]) {
    display: none;
}

/* ───────────────────────────────────────────────
   ⚠️ ログインしていないときの案内（D-52）
   ─────────────────────────────────────────────── */

/*
 * ⚠️⚠️ **赤い警告とは、はっきり違う見た目にする。**
 *    これは**失敗の知らせではなく、誘いの案内。**
 *    ⚠️ サイトのオレンジ（#ffa500）で出す。
 *
 * ⚠️ **`<p>` の中にあるので、中身はすべて `<span>`。**
 *    `display: block` は、ここで与える。
 */
.pokka-comment-login-box[hidden] {
    display: none !important;
}

.pokka-comment-login-box {
    display: block;
    margin: 10px 0 0;
    padding: 12px 14px;
    background: rgba(255, 165, 0, .10);
    border: 1px solid #ffa500;
    border-radius: 6px;
    /* ⚠️ テーマの文字の大きさに引きずられないように */
    line-height: 1.6;
    text-align: left;
}

.pokka-comment-login-title {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.pokka-comment-login-lead {
    display: block;
    margin-top: 6px;
    color: #e8e8e8;
    font-size: 13px;
}

/* ⚠️ 強調するのは「名前とアバター付き」と「1日1回 ◯ポイント」だけ */
.pokka-comment-login-lead b {
    color: #ffa500;
    font-weight: 700;
}

.pokka-comment-login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/*
 * ⚠️ **高さはパソコン用 34px。**
 *    ⚠️ 狭い画面では 44px にする（指で押すため）。
 */
.pokka-comment-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px;
    /*
     * ⚠️ **枠線を高さに含める。**
     *    含めないと、1px の枠が上下に足されて **36px** になる。
     */
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    /* ⚠️ テーマの a の下線や色に負けないように */
    white-space: nowrap;
}

/*
 * ⚠️⚠️ **文字色に `!important` が要る。**
 *
 *    テーマが `#respond a { color: … }` のように
 *    **ID を使って色を決めている**ので、
 *    こちらを後に読み込んでも**強さで負ける。**
 *
 *    ⚠️ **実際に、塗りのボタンの文字が
 *    背景と同じオレンジになって消えた**（2026-10-12）。
 *
 * ⚠️ **使うのは、この案内の箱の中だけ。**
 */
.pokka-comment-login-btn--fill,
.pokka-comment-login-btn--fill:hover,
.pokka-comment-login-btn--fill:focus,
.pokka-comment-login-btn--fill:visited {
    background: #ffa500 !important;
    color: #111 !important;
    border: 1px solid #ffa500 !important;
    text-decoration: none !important;
}

.pokka-comment-login-btn--line,
.pokka-comment-login-btn--line:hover,
.pokka-comment-login-btn--line:focus,
.pokka-comment-login-btn--line:visited {
    background: transparent !important;
    color: #ffa500 !important;
    border: 1px solid #ffa500 !important;
    text-decoration: none !important;
}

/* 外部リンクの印 */
.pokka-comment-ext {
    font-size: 12px;
}

.pokka-comment-login-note {
    display: block;
    margin-top: 10px;
    color: #a8a8a8;
    font-size: 12px;
}

/*
 * ⚠️ 狭い画面では、指で押せる高さにする。
 *    ⚠️ スマートフォン用テーマは端末で切り替わるので、
 *    ここは**画面の広さ**で見ている（テーマの境目と同じ 650px）。
 */
@media (max-width: 650px) {
    /*
     * ⚠️ **ここは、普通の指定より後ろに置くこと。**
     *    前に置くと、後ろの `.pokka-comment-as` に負けて効かない
     *    （2026-10-12 に実際に起きた）。
     */
    .pokka-comment-as {
        color: #ffffff;
        font-size: 14px;
    }

    .pokka-comment-login-btn {
        height: 44px;
    }

    .pokka-comment-login-actions .pokka-comment-login-btn {
        /* ⚠️ 2つ並べると窮屈なので、幅を分け合う */
        flex: 1 1 auto;
    }
}

/* 会員の印（⚠️ U-20 が決まったら、ここに足す） */

/* ──────────────────────────────────────────────────────────
   評価のボタン（第一弾B・2026-10-14 に見直し）

   ⚠️ 運営者がモックアップで確定した形：
      丸い枠のボタン2つ。高さ パソコン 28px・スマートフォン 40px、
      角丸は高さの半分、横の余白 パソコン 10px・スマートフォン 14px、
      文字は太字（パソコン 12px・スマートフォン 14px）、間隔 8px。

   ⚠️⚠️ **テーマが `#respond a` のような ID で色を決めている**ので、
      色と下線には `!important` が要る。

   ⚠️⚠️ **幅と高さを先に決めること**（D-30）。
      ⚠️ **iframe の高さは1回しか測らない**ので、
      数があとから入って大きさが変わると、**コメント欄が切れる。**
   ────────────────────────────────────────────────────────── */

.pokka-votes {
    /* ⚠️ 本文の下、右寄せ（運営者の指定） */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    /*
     * ⚠️ **高さを先に決める。** 数が入っても変わらないように。
     * ⚠️ パソコン用はボタンが 28px なので、当たりは 44px を別に確保する。
     */
    min-height: 44px;

    margin: 10px 0 0;
    padding: 0;
}

.pokka-vote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* ⚠️ モックアップの指定（パソコン用） */
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;

    /*
     * ⚠️⚠️ **押せる範囲は 44px 以上**（指で押せる大きさ）。
     *    ⚠️ 見た目は 28px のままで、**当たりだけを広げる。**
     *    ⚠️ `::before` を使うと、`.pokka-votes` の高さを変えずに済む。
     */
    position: relative;
    min-width: 56px;
    min-height: 44px;

    margin: 0;

    border: 1.5px solid #666;
    background: transparent !important;

    color: #ddd !important;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;

    cursor: pointer;

    /* ⚠️ テーマのボタンの見た目を持ち込ませない */
    box-shadow: none;
    text-decoration: none !important;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

/* ⚠️ 低評価は、少し控えめに（モックアップの指定） */
.pokka-vote-down {
    border-color: #555;
    color: #aaa !important;
}

.pokka-vote:hover {
    border-color: #999;
}

.pokka-vote:focus-visible {
    /* ⚠️ キーボードで追えるようにする */
    outline: 2px solid #ffa500;
    outline-offset: 2px;
}

.pokka-vote-icon {
    /* ⚠️ モックアップの指定（パソコン用 15px） */
    width: 15px;
    height: 15px;
    flex: none;
    display: block;
}

.pokka-vote-count {
    /*
     * ⚠️⚠️ **数が入っても幅が動かないように、先に場所を取る。**
     *    ⚠️ 動くと、iframe の高さがずれる。
     */
    min-width: 1.6em;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/*
 * ⚠️⚠️ **押したあとは、押せない見た目にする。**
 *    ⚠️ **やり直せない**ので、戻れると誤解させない。
 */
.pokka-vote[disabled] {
    cursor: default;
}

/*
 * ⚠️ 押さなかったほうは、はっきり沈める。
 *
 * ⚠️⚠️ **「押さなかったほう」だけを名指しすること**（2026-10-14 に踏んだ）。
 *    ⚠️ `.pokka-vote[disabled]` とまとめて書くと、**条件の強さで勝ってしまい、
 *    押したほうのオレンジまで薄くなる**（実際にそうなった）。
 */
.pokka-votes[data-pokka-voted="up"] .pokka-vote-down,
.pokka-votes[data-pokka-voted="down"] .pokka-vote-up {
    opacity: 0.45;
}

.pokka-votes.is-voted .pokka-vote[disabled]:hover {
    border-color: #555;
}

/*
 * ⚠️⚠️ **押したほうは、オレンジで塗りつぶす**（モックアップの指定）。
 *    ⚠️ 押せたのかどうかが分からないと、**読者は何度も押す。**
 */
.pokka-votes[data-pokka-voted="up"] .pokka-vote-up,
.pokka-votes[data-pokka-voted="down"] .pokka-vote-down {
    border-color: #ffa500;
    background: #ffa500 !important;
    color: #111 !important;
    /* ⚠️ 薄くしない（上の規則と取り違えないように、念のため書く） */
    opacity: 1;
}

/*
 * ⚠️⚠️ **色だけで示さない。** ✓ の印も出す。
 *    ⚠️ 色が見分けられない方にも、押したことが伝わるように。
 */
.pokka-vote-check {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.pokka-vote-check[hidden] {
    display: none;
}

.pokka-vote-check-icon {
    width: 12px;
    height: 12px;
    display: block;
}

/* 案内（すでに評価しています など） */
.pokka-vote-notice {
    /* ⚠️ 1行ぶん、右端に出す */
    flex: 1 1 100%;
    margin: 6px 0 0;
    padding: 0;

    color: #d6d6d6 !important;
    font-size: 13px;
    line-height: 1.6;
    text-align: right;
}

/*
 * ⚠️⚠️ **案内の中のボタンには、下線を付けないこと**（2026-10-14 に踏んだ）。
 *
 *    ⚠️ `.pokka-vote-notice a` と `.pokka-vote-login-btn` が
 *    **どちらも `!important`** だと、**条件の強さで前者が勝つ**
 *    （`a` のぶん強い）。→ ⚠️ ボタンに下線が出た。
 *
 * ✅ **狙いをここで外しておく。** 強さの綱引きにしない。
 */
.pokka-vote-notice a:not(.pokka-vote-login-btn) {
    color: #ffa500 !important;
    text-decoration: underline !important;
}

/* ──────────────────────────────────────────────────────────
   ログインしていない読者への案内の箱（U-30・2026-10-14 に見直し）

   ⚠️ 会員の欄の案内（D-52）と**同じ見た目**にする。
   ⚠️ **押したボタンの近くに出す**（運営者の指定）。

   ⚠️⚠️ **`.pokka-vote-notice` の指定より後ろに置くこと**（2026-10-14 に踏んだ）。
      ⚠️ 同じ要素が両方の名前を持つので、**前に置くと、
      右寄せと下線に負ける**（実際にそうなった）。
   ────────────────────────────────────────────────────────── */

.pokka-vote-login {
    /* ⚠️ 1行ぶん、まるごと使う */
    flex: 1 1 100%;

    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 8px 0 0;
    padding: 10px 12px;

    /* ⚠️ モックアップの指定 */
    border: 1px solid #ffa500;
    border-radius: 8px;
    background: rgba(255, 165, 0, .10) !important;

    /* ⚠️ 箱の中は左寄せ（上の `text-align: right` を打ち消す） */
    text-align: left;
}

.pokka-vote-login-title {
    color: #fff !important;
    font-size: 12px;
    font-weight: bold;
}

.pokka-vote-login-lead {
    color: #e8e8e8 !important;
    font-size: 11px;
    line-height: 1.6;
}

.pokka-vote-login-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pokka-vote-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 30px;
    padding: 0 16px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: bold;

    /*
     * ⚠️⚠️ **下線は出さない**（ボタンに見せる）。
     *    ⚠️ `.pokka-vote-notice a` が下線を `!important` で付けるので、
     *    **こちらも `!important` で、かつ後ろに置く。**
     */
    text-decoration: none !important;
    box-sizing: border-box;
}

/* ⚠️ ログイン：オレンジの塗り */
.pokka-vote-login-btn.is-fill {
    background: #ffa500 !important;
    border: 1px solid #ffa500;
    color: #111 !important;
}

/* ⚠️ 新規登録：オレンジの枠線 */
.pokka-vote-login-btn.is-line {
    background: transparent !important;
    border: 1px solid #ffa500;
    color: #ffa500 !important;
}

.pokka-vote-login-btn:focus-visible {
    outline: 2px solid #ffa500;
    outline-offset: 2px;
}


/*
 * ⚠️ スマートフォン用（テーマの境目と同じ 650px）。
 *
 * ⚠️ **ここは、普通の指定より後ろに置くこと。**
 */
@media (max-width: 650px) {
    .pokka-votes {
        gap: 8px;
        margin-top: 8px;
    }

    .pokka-vote {
        /* ⚠️ モックアップの指定（スマートフォン用） */
        height: 40px;
        padding: 0 14px;
        border-radius: 20px;
        font-size: 14px;
        min-width: 64px;
    }

    .pokka-vote-icon {
        width: 18px;
        height: 18px;
    }

    .pokka-vote-check-icon {
        width: 15px;
        height: 15px;
    }

    .pokka-vote-notice {
        font-size: 13px;
    }

    /* ⚠️ 案内の箱（スマートフォン用。モックアップの指定） */
    .pokka-vote-login {
        padding: 12px;
    }

    .pokka-vote-login-title {
        font-size: 14px;
    }

    .pokka-vote-login-lead {
        font-size: 13px;
    }

    .pokka-vote-login-btn {
        /* ⚠️ 指で押せる大きさ */
        height: 40px;
        font-size: 13px;
    }
}

/* ──────────────────────────────────────────────────────────
   会員の印（U-20・2026-10-14 に決着）

   ⚠️⚠️ **幅と高さを先に指定すること**（D-30）。
      ⚠️ SVG は、指定が無いと既定の 300×150 で場所を取ってから縮む。
      ⚠️ **iframe の高さは1回しか測らない**ので、名前の行が飛び跳ねる。

   ⚠️ **テーマが `#respond a` のような ID で色を決めている**ので、
      色には `!important` が要る。
   ────────────────────────────────────────────────────────── */

.pokka-badge {
    /* ⚠️ パソコン用 14px（スマートフォン用は下で 16px に） */
    width: 14px;
    height: 14px;

    /* ⚠️ 名前の行に、縦の中心でそろえる */
    display: inline-block;
    vertical-align: middle;
    flex: none;

    /* ⚠️ 名前のすぐ右。詰めすぎない */
    margin-left: 4px;

    /* ⚠️ サイトのリンクの色。外側の塗りが `currentColor` を見る */
    color: #ffa500 !important;
}

@media (max-width: 650px) {
    .pokka-badge {
        /* ⚠️ スマートフォン用は 16px */
        width: 16px;
        height: 16px;
    }
}

/* ──────────────────────────────────────────────────────────
   公開プロフィールへのリンク（2026-10-15）

   ⚠️ 名前とアバターの**両方**がリンクになる。
      ⚠️ 張るのは**通常の会員だけ**（退会・停止中は張らない）。

   ⚠️⚠️ **テーマが `#respond a` のような ID で色を決めている**ので、
      色と下線には `!important` が要る。
   ────────────────────────────────────────────────────────── */

/*
 * ⚠️ **名前は、今の見た目のまま。**
 *    ⚠️ 色は、テーマの見直し側が白にしている。ここでは変えない。
 *    ⚠️ **下線は、マウスを乗せたときだけ。**
 */
.pokka-name-link {
    color: inherit !important;
    text-decoration: none !important;

    /* ⚠️ テーマのリンクの装飾を持ち込ませない */
    background: none !important;
    border: 0;
}

.pokka-name-link:hover,
.pokka-name-link:focus-visible {
    text-decoration: underline !important;
}

/*
 * ⚠️ アバターは、**押せることが分かる程度**に。
 *
 * ⚠️⚠️ **幅と高さを変えないこと**（D-30）。
 *    ⚠️ 大きさが変わると、**iframe の高さがずれる。**
 */
.pokka-avatar-link {
    display: inline-block;
    line-height: 0;

    /* ⚠️ 角丸は、中のアバターに合わせる */
    border-radius: 4px;

    text-decoration: none !important;
}

.pokka-avatar-link:hover .pokka-avatar {
    /* ⚠️ 少し明るくするだけ（大きさは変えない） */
    filter: brightness(1.15);
}

/*
 * ⚠️⚠️ **キーボードで選んだときに、枠が見えること。**
 *
 * ⚠️ アバターのリンクは `tabindex="-1"` なので、
 *    ⚠️ **Tab では選ばれない**（名前のリンクが受け持つ）。
 *    ⚠️ それでも、念のため枠の指定は入れておく。
 */
.pokka-name-link:focus-visible,
.pokka-avatar-link:focus-visible {
    outline: 2px solid #ffa500;
    outline-offset: 2px;
}

/* ⚠️ 記事のクレジットのリンクも、同じ扱い */
.pokka-credit-name:focus-visible {
    outline: 2px solid #ffa500;
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════
   ⚠️ 表示名の右に出す @ユーザーネーム（2026-10-17）

   ⚠️⚠️ **並びは 表示名 → @ユーザーネーム → 会員の印**
      （運営者が決めたモックアップの③）。

   ⚠️ **JavaScript が、表示名のある会員にだけ足す。**
      ⚠️ 会員以外には、何も足さない（D-43）。

   ⚠️⚠️ **縮まないこと。**
      ⚠️ 運営者の指定：**@ユーザーネームと印は、必ず全部見せる。**
      ⚠️ **縮むのは表示名だけ。**
   ══════════════════════════════════════════════════════════ */

.pokka-handle {
    /* ⚠️⚠️ **絶対に縮めない** */
    flex: none;

    /* ⚠️ 小さく灰色（モックアップの指定） */
    font-size: 11px;
    font-weight: normal;
    color: #9a9a9a;

    /* ⚠️ テーマの字体や下線を引き継がない */
    font-style: normal;
    text-decoration: none;

    /* ⚠️ 表示名との間隔（名前の行の `gap` が効かない場面の保険） */
    margin-left: 2px;

    /* ⚠️ 折り返さない */
    white-space: nowrap;
}

/*
 * ⚠️⚠️ **名前の入れ物を、横並びにする**（2026-10-17 に踏んだ）。
 *
 * ⚠️ **`.pokka-name` は `display: inline`** なので、
 *    ⚠️⚠️ **`overflow` も `text-overflow` も効かない。**
 *    ⚠️ 実測：長い表示名で、**行が 66px はみ出した。**
 *
 * ⚠️ **包んでいるのはテーマの `cite.fn`（PC）／`span.fn`（SP）。**
 *    ⚠️ **テーマごとに要素が違う**ので、`:has()` で狙う。
 *
 * ⚠️ **`:has()` を使う理由**：⚠️ **テーマを変えずに済む。**
 *    ⚠️ 会員のコメントにしか `.pokka-name` が無いので、
 *    ⚠️ **会員以外には何も起きない**（D-43）。
 *
 * ⚠️ アバターはテーマが**浮かせて**置いているので、
 *    ⚠️ 横並びにしても動かない。
 */
.fn:has(> .pokka-name),
cite:has(> .pokka-name) {
    display: flex;
    align-items: center;
    gap: 4px;

    /* ⚠️⚠️ **縮めるようにする**（⚠️ 無いと、はみ出したまま） */
    min-width: 0;
}

/*
 * ⚠️⚠️ **縮んで「…」になるのは、表示名だけ。**
 *
 * ⚠️ 運営者の指定：**@ユーザーネームと印は、必ず全部見せる。**
 */
.fn:has(> .pokka-name) > .pokka-name,
cite:has(> .pokka-name) > .pokka-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠️⚠️ **@ユーザーネームと印は、絶対に縮めない。** */
.fn:has(> .pokka-name) > .pokka-handle,
cite:has(> .pokka-name) > .pokka-handle,
.fn:has(> .pokka-name) > .pokka-badge,
cite:has(> .pokka-name) > .pokka-badge {
    flex: none;
}

/*
 * ⚠️ スマートフォン用は 12px（モックアップの指定）。
 *    ⚠️ パソコン用は 11px（上で指定済み）。
 */
@media (max-width: 650px) {
    .pokka-handle {
        font-size: 12px;
    }
}

/* ══════════════════════════════════════════════════════════
   ⚠️ 記事のクレジットのカード（2026-10-18・運営者の決定・案B）

   ⚠️⚠️ **会員のネタから生まれた記事にだけ出る。**
      ⚠️ 会員以外には、そもそもクレジットが無い（D-43）。

   ⚠️ **記事ページは作り置きされる**ので、
      ⚠️ **表示名とアバターは、ブラウザの中で `/api/u/` から埋める。**
      ⚠️ 最初は「myポッカキット会員」と既定の画像（D-17・D-25）。

   ⚠️ **テーマは変えない。** ⚠️ ここだけで完結させる。
   ══════════════════════════════════════════════════════════ */

.pokka-credit-card {
    /* ⚠️ 帯をカードの縁にかけるため */
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    /* ⚠️ 上は帯のぶん広め（モックアップの指定） */
    padding: 24px 20px 20px;

    border-radius: 12px;
    background: linear-gradient(180deg, #262626 0%, #1a1a1a 100%);
    border: 1px solid #3a3a3a;

    text-align: center;

    /* ⚠️ 記事の本文との間隔 */
    margin: 28px 0 16px;

    /* ⚠️ テーマの字体を引き継ぐ。色だけここで決める */
    box-sizing: border-box;
}

/* ⚠️ 上の帯。⚠️ カードの縁にかける */
.pokka-credit-ribbon {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);

    padding: 3px 12px;
    border-radius: 999px;

    background: #ffa500;
    color: #111;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: .08em;

    /* ⚠️ 折り返さない（⚠️ 折り返すと帯の形が崩れる） */
    white-space: nowrap;
}

/* ⚠️ アバターの入れ物。⚠️ オレンジの縁取りはここに付ける */
.pokka-credit-avatar-wrap {
    flex: none;
    display: inline-block;

    width: 80px;
    height: 80px;

    border-radius: 50%;
    overflow: hidden;
    background: #3a3a3a;

    /* ⚠️ 二重の縁取り（モックアップの指定） */
    box-shadow: 0 0 0 3px #ffa500, 0 0 0 6px rgba(255, 165, 0, .18);
}

/*
 * ⚠️ アバターそのもの。
 *
 * ⚠️⚠️ **テーマの `img` の指定に負けないこと。**
 *    ⚠️ テーマが `max-width` や `border` を付けていることがある。
 */
.pokka-credit-card .pokka-credit-avatar {
    display: block;
    width: 80px;
    height: 80px;
    max-width: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

/* ⚠️ 名前の行。⚠️ 表示名 → @ユーザーネーム → 印 */
.pokka-credit-names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

/* ⚠️ 表示名（⚠️ 表示名が無い人は @ユーザーネーム がここに入る） */
.pokka-credit-card .pokka-credit-display,
.pokka-credit-card .pokka-credit-name {
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;

    /* ⚠️ 長い表示名で、カードからはみ出さない */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ⚠️⚠️ @ユーザーネームは、小さく灰色。**縮めない** */
.pokka-credit-card .pokka-credit-handle {
    flex: none;
    color: #9a9a9a;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}

/* ⚠️ 会員の印。⚠️ 縮めない */
.pokka-credit-card .pokka-badge {
    flex: none;
    width: 15px;
    height: 15px;
    color: #ffa500;
}

/* ⚠️ お礼の文 */
.pokka-credit-thanks {
    color: #bbb;
    font-size: 12px;
    line-height: 1.6;
}

/* ⚠️ リンクの見え方（⚠️ テーマの下線を打ち消す） */
.pokka-credit-card a:hover,
.pokka-credit-card a:focus {
    text-decoration: underline;
}

.pokka-credit-card a:focus-visible {
    outline: 2px solid #ffa500;
    outline-offset: 2px;
}

/* ⚠️ スマートフォン用（モックアップの指定） */
@media (max-width: 650px) {
    .pokka-credit-card {
        padding: 22px 16px 18px;
    }

    .pokka-credit-ribbon {
        font-size: 12px;
    }

    .pokka-credit-avatar-wrap,
    .pokka-credit-card .pokka-credit-avatar {
        width: 72px;
        height: 72px;
    }

    .pokka-credit-card .pokka-credit-display,
    .pokka-credit-card .pokka-credit-name {
        font-size: 18px;
    }

    .pokka-credit-card .pokka-credit-handle {
        font-size: 13px;
    }

    .pokka-credit-card .pokka-badge {
        width: 16px;
        height: 16px;
    }

    .pokka-credit-thanks {
        font-size: 13px;
    }
}