.twr-ranking { max-width: 1280px; margin: 2rem auto; color: #161616; }
.twr-ranking__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.twr-ranking__header h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.twr-ranking__header p { margin: 0; color: #666; font-size: .85rem; }
.twr-ranking__grid { display: grid; grid-template-columns: repeat(var(--twr-columns), minmax(0, 1fr)); gap: 18px; padding: 0; margin: 0; list-style: none; }
.twr-ranking__group { margin: 0 0 2.5rem; }
.twr-ranking__group h3 { margin: 0 0 .8rem; padding-left: .7rem; border-left: 4px solid #fe2c55; font-size: 1.15rem; }
.twr-card { min-width: 0; }
.twr-card a { color: inherit; text-decoration: none; display: block; }
.twr-card__image { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: #ededed; box-shadow: 0 3px 14px rgba(0, 0, 0, .12); }
.twr-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .18s ease; }
.twr-card a:hover .twr-card__image img { transform: scale(1.035); }
.twr-card__rank { position: absolute; z-index: 1; margin: 8px; min-width: 28px; padding: 4px 7px; border-radius: 999px; color: #fff; background: #fe2c55; font-size: .8rem; font-weight: 800; line-height: 1; }
.twr-card__title { display: -webkit-box; overflow: hidden; margin-top: 8px; min-height: 2.9em; font-size: .92rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.twr-card__meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; color: #666; font-size: .76rem; white-space: nowrap; overflow: hidden; }
.twr-card__meta span { overflow: hidden; text-overflow: ellipsis; }
.twr-empty { color: #666; }
@media (max-width: 780px) { .twr-ranking__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .twr-ranking__header { display: block; } .twr-ranking__header p { margin-top: .4rem; } }