/* src/public/css/ranking.css
 *
 * ツールの人気ランキング（/ranking）の見た目。
 */

.rank-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.rank-lead {
    margin: 0 0 18px;
    font-size: 0.92rem;
    color: #5a6a7d;
    line-height: 1.7;
}

.rank-empty {
    margin: 0;
    padding: 28px 0;
    text-align: center;
    font-size: 0.92rem;
    color: #8b97a6;
}

/* =========================================
   順位の並び
   ========================================= */

.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rank-item + .rank-item {
    margin-top: 8px;
}

.rank-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: #22303f;
    transition: background 0.2s, border-color 0.2s;
}

.rank-link:hover {
    background: #f4f7fc;
    border-color: #2a5298;
}

/* 順位（1位・2位…）。1〜3位だけ色を変えます */
.rank-no {
    flex-shrink: 0;
    min-width: 52px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #eef2f8;
    color: #5a6a7d;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}

.rank-no.is-top1 { background: #f6d365; color: #6b4e00; }
.rank-no.is-top2 { background: #d8dee8; color: #47525f; }
.rank-no.is-top3 { background: #e8c4a0; color: #6b4324; }

.rank-name {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: bold;
    /* 名前が長いときは、はみ出さずに「…」で切ります */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-name i {
    margin-right: 6px;
    color: #2a5298;
}

.rank-views {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #8b97a6;
}

.rank-note {
    margin: 18px 0 0;
    font-size: 0.8rem;
    color: #8b97a6;
    line-height: 1.7;
}

/* =========================================
   スマホ
   ========================================= */

@media (max-width: 600px) {
    .rank-card {
        padding: 18px 16px;
    }

    .rank-link {
        /* 💡 狭い画面では、回数を名前の下へ回して窮屈にならないようにします */
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .rank-name {
        /* 順位ぶんの幅を除いた残り全部を使います */
        flex: 1 1 auto;
    }

    .rank-views {
        /* 2行目いっぱいに置き、順位のぶんだけ左に余白を取ります */
        flex: 1 0 100%;
        padding-left: 64px;
    }
}