/* 登録者向けのまとめ（/guides/・/topics/）。クラス名は member-guide- 接頭辞だけを使う（既存のクラス名・data 属性と衝突させない）。
   guide-hubs.css の流儀に合わせる: 章は罫線・余白・見出しで分け、浮いたカードで囲まない。色は共通トークンだけ。
   390px 幅で横にはみ出さない（表は表の領域だけ横スクロール）。 */
.member-guide-as-of { margin: 0 0 6px; color: var(--muted); font-size: .85rem; }
.member-guide-points ul { margin: 12px 0 0; padding-left: 1.3em; line-height: 1.85; }
.member-guide-points li { margin: 0 0 4px; }

.member-guide-gate { margin: 12px 0 0; padding: 14px 0; border-block: 1px solid var(--line); }
.member-guide-gate-text { font-weight: 700; }
.member-guide-gate-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 10px 0 0; }
.member-guide-login { display: inline-block; padding: 8px 14px; border: 1px solid var(--accent-2); border-radius: 6px; font-weight: 700; text-decoration: none; }
.member-guide-join { font-size: .92rem; }
.member-guide-status:empty { display: none; }
/* display を指定した要素でも hidden 属性で隠れるようにする（申請中・会員のときに案内のボタンを隠す） */
.member-guide-gate[hidden], .member-guide-gate-actions[hidden], .member-guide-content[hidden] { display: none; }
.member-guide-status { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }

.member-guide-content h3 { margin: 22px 0 8px; font-size: 1.08rem; line-height: 1.5; }
.member-guide-content ul { margin: 8px 0 12px; padding-left: 1.3em; line-height: 1.85; }
.member-guide-table-scroll { margin: 10px 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.member-guide-table { min-width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.6; }
.member-guide-table caption { margin: 0 0 6px; color: var(--muted); font-size: .85rem; text-align: left; }
.member-guide-table th, .member-guide-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.member-guide-table thead th { color: var(--muted); font-size: .8rem; border-bottom-color: var(--ink); }
.member-guide-note { margin: 10px 0; padding: 10px 0 10px 12px; border-left: 3px solid var(--line); color: var(--muted); font-size: .92rem; }
.member-guide-quote { margin: 10px 0; padding-left: 12px; border-left: 3px solid var(--accent-2); }
.member-guide-quote cite { display: block; margin-top: 4px; color: var(--muted); font-size: .85rem; font-style: normal; }
.member-guide-fact-list { font-size: .9rem; }

.member-guide-sources ul { margin: 12px 0 0; padding: 0; list-style: none; }
.member-guide-sources li { padding: 8px 0; border-top: 1px solid var(--line); }
.member-guide-source-meta { display: block; color: var(--muted); font-size: .85rem; }

.member-guide-cards { margin: 12px 0 0; padding: 0; list-style: none; }
.member-guide-card { padding: 12px 0; border-top: 1px solid var(--line); }
.member-guide-card p { margin: 4px 0 0; }
.member-guide-card-title { font-size: 1.02rem; font-weight: 800; }
.member-guide-card-meta { color: var(--muted); font-size: .85rem; }

/* 元になった配信（押したときだけ読み込む埋め込み）。390px で横にはみ出さない */
.member-guide-origin p { margin: 8px 0; }
.member-guide-embed { margin: 12px 0; }
.member-guide-embed-play { position: relative; display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; }
.member-guide-embed-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-guide-embed-icon { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(0, 0, 0, .72); }
.member-guide-embed-icon::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.member-guide-embed-play:hover .member-guide-embed-icon, .member-guide-embed-play:focus-visible .member-guide-embed-icon { background: #c4302b; }
.member-guide-embed-play:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.member-guide-embed-note { color: var(--muted); font-size: .85rem; }
.member-guide-embed-frame { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 0; }
.member-guide-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.member-guide-origin-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }