/* ==========================================================================
   myfans ランキング（トップの欄・/ranking/。includes/ranking-view.php）
   クリエイター単位の一覧。登録済みの人は myfans のアイコン（img）、それ以外はイニシャル。送客ボタンは枠線（btn--outbound）
   ========================================================================== */

.ranking-section { margin-top: var(--space-7); }
.ranking-section__updated { font-size: var(--fs-xs); color: var(--text-sub); margin-top: var(--space-1); }
.ranking-section__more { margin-top: var(--space-4); }

.ranking-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.ranking-item {
    display: grid;
    grid-template-columns: 2rem 44px minmax(0, 1fr);
    grid-template-areas: "rank avatar body" "outbound outbound outbound";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ranking-item__rank { grid-area: rank; font-size: var(--fs-lg); text-align: center; color: var(--text-sub); }
.ranking-item--top .ranking-item__rank { color: var(--primary-hover); }
.ranking-item__avatar { grid-area: avatar; width: 44px; height: 44px; font-size: 1.125rem; }
img.ranking-item__avatar { object-fit: cover; border-radius: 50%; }
.ranking-item__body { grid-area: body; min-width: 0; }
.ranking-item__name { font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.ranking-item__meta { font-size: var(--fs-xs); color: var(--text-sub); overflow-wrap: anywhere; }
.ranking-item__match { font-size: var(--fs-xs); margin-top: 2px; }
.ranking-item__outbound { grid-area: outbound; }
.ranking-item__outbound .outbound__button { min-height: 40px; font-size: var(--fs-sm); }

/* 横に送客ボタンを置くのは、ボタンがある行で、幅に余裕のある総合の一覧だけ。
   ジャンル欄（PC で2列並び・1行が約330px）とボタンの無い行は、名前を全幅にしてボタンは下の段（2026-10-13: 名前が1文字幅に潰れていた） */
@media (min-width: 640px) {
    .ranking-item:has(.ranking-item__outbound) {
        grid-template-columns: 2.25rem 44px minmax(0, 1fr) 11rem;
        grid-template-areas: "rank avatar body outbound";
    }
    .ranking-genres .ranking-item:has(.ranking-item__outbound) {
        grid-template-columns: 2.25rem 44px minmax(0, 1fr);
        grid-template-areas: "rank avatar body" "outbound outbound outbound";
    }
}

.ranking-genres { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 960px) {
    .ranking-genres { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}
.ranking-genre__title { font-size: var(--fs-lg); }
.ranking-source { font-size: var(--fs-xs); color: var(--text-sub); margin-top: var(--space-6); }