/*
 * 記事のアンケート（/js/poll.js）。全サイト共通。色はサイトの CSS で --poll-* を決める（無ければ下の白い地の色）
 *   --poll-bg 地 / --poll-bg-2 選択肢の地 / --poll-ink 文字 / --poll-muted 薄い文字 / --poll-line 線
 *   --poll-accent 差し色（選んだ枠・棒・ボタン）/ --poll-on-accent 差し色の上の文字 / --poll-up・--poll-down 順位の上下
 */
.gi-poll { margin: 24px 0; padding: 16px; border: 1px solid var(--poll-line, #ddd); background: var(--poll-bg, #fff); color: var(--poll-ink, #222); line-height: 1.6; }
.gi-poll button { font: inherit; color: inherit; }
.gi-poll-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gi-poll-round { flex: none; padding: 0 8px; border: 1px solid var(--poll-accent, #333); color: var(--poll-accent, #333); font-size: 12px; font-weight: 700; line-height: 22px; }
/* 記事の本文の p の大きさ・余白に負けないよう !important */
.gi-poll p.gi-poll-q { margin: 0 !important; font-size: 17px !important; font-weight: 700; line-height: 1.5 !important; }
.gi-poll p.gi-poll-note, .gi-poll p.gi-poll-empty { margin: 4px 0 10px !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--poll-muted, #777); }
.gi-poll p.gi-poll-msg { margin: 0 0 10px !important; padding: 6px 10px; border-left: 3px solid var(--poll-accent, #333); background: var(--poll-bg-2, #f5f5f5); font-size: 14px !important; line-height: 1.6 !important; }
.gi-poll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.gi-poll-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 2px solid transparent; background: var(--poll-bg-2, #f5f5f5); cursor: pointer; }
.gi-poll-choice:hover { border-color: var(--poll-line, #ccc); }
.gi-poll-choice[aria-pressed="true"] { border-color: var(--poll-accent, #333); }
.gi-poll-choice:disabled { cursor: default; opacity: .55; }
.gi-poll-face { position: relative; display: block; width: 56px; aspect-ratio: 1; overflow: hidden; background: var(--poll-bg, #fff); border: 1px solid var(--poll-line, #ddd); flex: none; }
.gi-poll-face > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gi-poll-noimg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 9px; font-weight: 600; line-height: 1.2; letter-spacing: .06em; color: var(--poll-muted, #999); }
.gi-poll-name { width: 100%; font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-poll-actions { margin-top: 12px; text-align: center; }
.gi-poll-send { min-width: 220px; padding: 8px 20px; border: 0; background: var(--poll-accent, #333); color: var(--poll-on-accent, #fff) !important; font-weight: 700; cursor: pointer; }
.gi-poll-send:disabled { opacity: .45; cursor: default; }
.gi-poll-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--poll-line, #ddd); font-size: 12px; color: var(--poll-muted, #777); }
.gi-poll-link { padding: 0; border: 0; background: none; color: var(--poll-accent, #333) !important; text-decoration: underline; cursor: pointer; }
.gi-poll-result { margin: 0; padding: 0; list-style: none; }
.gi-poll-result li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--poll-line, #eee); }
.gi-poll-result li:last-child { border-bottom: 0; }
.gi-poll-result li.is-mine { background: var(--poll-bg-2, #f5f5f5); }
.gi-poll-result .gi-poll-face { width: 40px; }
.gi-poll-rank { flex: none; width: 24px; text-align: center; font-weight: 700; font-size: 15px; }
.gi-poll-row { flex: 1; min-width: 0; }
.gi-poll-label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.gi-poll-you { padding: 0 6px; background: var(--poll-accent, #333); color: var(--poll-on-accent, #fff); font-size: 10px; line-height: 18px; }
.gi-poll-move { font-size: 11px; color: var(--poll-muted, #999); }
.gi-poll-move.is-up { color: var(--poll-up, #2e8b57); }
.gi-poll-move.is-down { color: var(--poll-down, #c0392b); }
.gi-poll-move.is-new { color: var(--poll-accent, #333); font-weight: 700; }
.gi-poll-bar { display: block; height: 8px; margin-top: 4px; background: var(--poll-bg-2, #eee); }
.gi-poll-bar > span { display: block; height: 100%; background: var(--poll-accent, #333); }
.gi-poll-num { flex: none; width: 64px; text-align: right; line-height: 1.3; }
.gi-poll-num b { display: block; font-size: 15px; }
.gi-poll-num small { font-size: 11px; color: var(--poll-muted, #777); }
@media (max-width: 767px) {
    .gi-poll { padding: 12px; }
    .gi-poll-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
    .gi-poll-face { width: 48px; }
    .gi-poll-send { min-width: 0; width: 100%; }
}