.topic-grid { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 20px; }
.topic-card { display: block; position: relative; aspect-ratio: 373/210; overflow: hidden; border-radius: 16px; background: #242424; text-decoration: none; color: #fff; }
.topic-card-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.topic-card-info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 18px 24px; gap: 8px; background: linear-gradient(transparent 35%,rgba(0,0,0,.8)); }
.topic-card-count { padding: 4px 8px; border-radius: 8px; color: #fadc44; background: rgba(0,0,0,.65); font-size: 14px; line-height: 20px; }
.topic-card h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-card:focus-visible { outline: 2px solid #ff4b02; outline-offset: 3px; }
.topic-banner-ads { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; width: 1552px; max-width: calc(100% - 64px); margin-inline: auto; }
.topic-banner-ads a { display: block; aspect-ratio: 766/94; border-radius: 10px; overflow: hidden; }
.topic-banner-ads img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topic-layout { width: 1552px; max-width: calc(100% - 64px); margin: 36px auto; display: flex; flex-direction: column; gap: 24px; }
.topic-breadcrumb { display: flex; flex-wrap: wrap; gap: 0; font-size: 18px; line-height: 24px; color: rgba(255,255,255,.55); }
.topic-breadcrumb a { color: inherit; text-decoration: none; }
.topic-breadcrumb > span:not([aria-current]) { margin-inline: 5px; }
.topic-breadcrumb [aria-current="page"] { color: #ff4b02; }
.topic-breadcrumb a:hover { color: #fff; }
.topic-layout h1 { margin: 0; font-size: 24px; line-height: 32px; color: #f5f5f5; }
.topic-intro { margin: 0; color: #999; font-size: 16px; line-height: 24px; }
.topic-layout .content-section { gap: 24px; }
.topic-layout .pagination { align-self: center; }
@media (max-width:767px) {
 .topic-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .topic-card { border-radius: 10px; height: 194px; aspect-ratio: auto; }
 .topic-banner-ads a { height: 47px; aspect-ratio: auto; }
 .topic-card-info { padding: 10px; gap: 4px; }
 .topic-card-count { font-size: 10px; line-height: 14px; padding: 2px 5px; border-radius: 5px; }
 .topic-card h3 { font-size: 13px; line-height: 18px; }
 .topic-banner-ads { max-width: calc(100% - 32px); grid-template-columns: 1fr; gap: 12px; }
 .topic-layout { max-width: calc(100% - 32px); margin: 20px auto; gap: 16px; }
 .topic-layout h1 { font-size: 20px; line-height: 28px; }
 .topic-intro, .topic-breadcrumb { font-size: 12px; line-height: 20px; }
 .topic-layout .content-section { gap: 16px; }
}

.topic-layout .topic-banner-ads { width: 100%; max-width: 100%; }