/* =============================================
   02_ranking.css : ランキング表示専用
   ============================================= */
.cvx-top3-area {
    position: relative;
    max-width: 950px;
    margin: 0 auto 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
    min-height: 480px;
    z-index: 20;
}

.cvx-top-1 { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 32%; z-index: 100; }
.cvx-top-1 .cvx-frame { border: 2px solid #ffcc00; box-shadow: 0 20px 50px rgba(255,185,0,0.25); }
.cvx-top-2, .cvx-top-3 { width: 26%; z-index: 50; }

.cvx-badge {
    position: absolute;
    top: -30px; left: -20px; width: 60px; height: 60px; color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 28px; border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); z-index: 300; text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}

.cvx-badge::before {
    content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 22px; background: inherit;
    clip-path: polygon(0% 100%, 0% 0%, 25% 50%, 50% 0%, 75% 50%, 100% 0%, 100% 100%);
}

.badge-1 { background: radial-gradient(circle at 30% 30%, #ffec8b, #ffb900, #cc8400); }
.badge-2 { background: radial-gradient(circle at 30% 30%, #ffffff, #b0b0b0, #606060); }
.badge-3 { background: radial-gradient(circle at 30% 30%, #ffccaa, #d2691e, #703000); }

.cvx-cap { font-size: 13px; font-weight: bold; margin-top: 10px; line-height: 1.4; height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cvx-num-tag { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.8); color: #fff; padding: 2px 8px; font-size: 10px; border-radius: 4px; z-index: 10; font-weight: bold; }