/* =========================================================
 * 漫画のページ（/manga/・page-manga.php）
 * 作品の絵は使えないので、作品名・巻数・ボタンの並びで見せます。
 * ======================================================= */
.mg-sec { display: flex; flex-direction: column; gap: 12px; }
.mg-sec__lead { margin: 0; font-size: 14px; color: var(--body); line-height: 1.8; }

/* 人気の漫画ランキング */
.mg-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mg-rank__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--bd); border-radius: 10px; background: #fff; }
.mg-rank__no { font-weight: 900; font-size: 18px; color: var(--navy); text-align: center; }
.mg-rank__item:nth-child(-n+3) .mg-rank__no { color: var(--red); }
.mg-rank__title { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.mg-rank__title:hover { color: var(--red); }
.mg-rank__meta { font-size: 12px; color: var(--sub); white-space: nowrap; }

/* 作品の1行 */
.mg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mg-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border: 1px solid var(--bd); border-radius: 10px; background: #fff; }
.mg-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.mg-row__main:hover .mg-row__title { color: var(--red); }
.mg-row__title { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.mg-row__meta { font-size: 12px; color: var(--sub); display: flex; gap: 8px; flex-wrap: wrap; }
.mg-row__genre { color: var(--navy); }
.mg-row__btn { flex-shrink: 0; background: var(--btn); color: #fff; font-size: 12px; font-weight: 900; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.mg-row__btn:hover { background: var(--btn-h); color: #fff; }

/* ジャンル */
.mg-genres { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-genres__item { border: 1.5px solid var(--bd2); font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 999px; white-space: nowrap; color: var(--ink); background: #fff; }
.mg-genres__item:hover { border-color: var(--navy); }

/* どこで読むか */
.mg-where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mg-where__box { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 14px; background: var(--ebook-bg); border: 1px solid #f6d3d0; color: var(--ink); }
.mg-where__box:hover { border-color: var(--red); color: var(--ink); }
.mg-where__h { font-size: 16px; font-weight: 900; }
.mg-where__t { font-size: 13px; color: var(--body); line-height: 1.7; }
.mg-where__go { margin-top: auto; font-size: 13px; font-weight: 900; color: var(--red); }

/* スマホ */
@media (max-width: 768px) {
	.mg-sec { padding: 0 16px; gap: 10px; }
	.mg-rank, .mg-list, .mg-where { grid-template-columns: minmax(0, 1fr); }
	.mg-row__btn { padding: 10px 14px; }
	.mg-where__box { padding: 14px 16px; }
}