/* 作業1419番：「あわせて読みたい」のカード（ブロック utsuwa-ai/readmore）＝読者側とブロックエディターで同じ見た目。
   正＝05_モック\設計モック_1201_あわせて読みたい_2026-09-27\本モック_v2_2026-09-28.html（カードの土台）／
       05_モック\設計モック_1419_記事の出典と関連記事の候補_2026-10-03\本モック_v1_2026-10-03.html（記事に入ったときの見え方）。
   色や余白の生値を持ち込まず、テーマが上書きできる変数と currentColor だけで組む（テーマの文字色・本文サイズに合わせて見える）。 */
.uai-readmore { margin: var(--uai-rm-gap, 1.4em) 0; }
.uai-readmore-lead { display: block; font-size: var(--uai-rm-lead-fs, .9em); font-weight: 700; letter-spacing: .04em; opacity: .75; margin: 0 0 .5em; }
.uai-readmore .uai-readmore-list { display: flex; flex-direction: column; gap: var(--uai-rm-card-gap, .8em); margin: 0; padding: 0; list-style: none; }
.uai-readmore .uai-readmore-list > li { margin: 0; padding: 0; list-style: none; }
.uai-readmore .uai-readmore-list > li::before, .uai-readmore .uai-readmore-list > li::marker { content: none; display: none; }
/* テーマの本文の箇条書き（例：utsuwa の .post-body ul:not(…×5) li ＝先頭の「・」と1字下げ）に負けないよう、同じ印を重ねて強くする
   （強制指定は使わない）。test2 の実測 2026-10-03＝カードの前に「・」が付き、1字右へずれていた。 */
.uai-readmore.uai-readmore.uai-readmore ul.uai-readmore-list.uai-readmore-list.uai-readmore-list.uai-readmore-list > li { margin: 0; padding: 0; list-style: none; position: static; }
.uai-readmore.uai-readmore.uai-readmore ul.uai-readmore-list.uai-readmore-list.uai-readmore-list.uai-readmore-list > li::before { content: none; display: none; }
.uai-readmore .uai-readmore-card { display: flex; align-items: flex-start; gap: .7em; padding: .7em .9em; border: 1px solid var(--uai-rm-border, color-mix(in srgb, currentColor 22%, transparent)); border-radius: var(--uai-rm-radius, 10px); background: var(--uai-rm-bg, color-mix(in srgb, currentColor 3%, transparent)); color: inherit; text-decoration: none; transition: background .15s; }
.uai-readmore .uai-readmore-card:hover { background: var(--uai-rm-bg-hover, color-mix(in srgb, currentColor 7%, transparent)); }
.uai-readmore .uai-readmore-card:hover .uai-readmore-t { text-decoration: underline; }
.uai-readmore-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.uai-readmore-kind { flex: none; font-size: .875em; line-height: 1.4; padding: .15em .6em; margin-top: .2em; border: 1px solid currentColor; border-radius: 999px; opacity: .72; white-space: nowrap; }
.uai-readmore-t { font-weight: 700; line-height: 1.5; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uai-readmore-d { font-size: .9em; opacity: .8; line-height: 1.5; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* テーマが target="_blank" に足す外部リンクの印は、このカードの中では出さない（モックに無い）。出典の枠（class-source-links.php front_css）と同じ詳細度の考え方。 */
.uai-readmore .uai-readmore-list li .uai-readmore-card[target="_blank"]::after,
.uai-readmore .uai-readmore-list li .uai-readmore-card[target="_blank"]::before { content: none; display: none; }
/* 重の2周目 MAJOR-1（2026-10-03）：テーマ（utsuwa-mira・utsuwa-base-blue）の「.post-body li a:not(.img-links)[target=_blank]{display:inline-block}」＝(0,3,2) に
   上の「.uai-readmore .uai-readmore-card{display:flex}」＝(0,2,0) が負け、札が題名の上に乗り、カードが文字の幅に縮んでいた。
   並びを決める行（display・幅・向き）だけを、同じ印を重ねて (0,7,3) で書く（強制指定は使わない）。 */
.uai-readmore.uai-readmore.uai-readmore ul.uai-readmore-list.uai-readmore-list > li > a.uai-readmore-card.uai-readmore-card { display: flex; flex-direction: row; align-items: flex-start; width: 100%; box-sizing: border-box; }
@media (max-width: 560px) {
    .uai-readmore .uai-readmore-card { flex-direction: column; gap: .35em; }
    .uai-readmore.uai-readmore.uai-readmore ul.uai-readmore-list.uai-readmore-list > li > a.uai-readmore-card.uai-readmore-card { flex-direction: column; }
    .uai-readmore-kind { align-self: flex-start; margin-top: 0; }
}
@supports not (color: color-mix(in srgb, currentColor 22%, transparent)) {
    .uai-readmore .uai-readmore-card { border-color: currentColor; background: transparent; }
}