.hero { text-align: center; padding: 3rem 0; background: white; border-radius: 8px; margin-bottom: 2rem; }
.hero h1 { font-size: 2rem; margin-bottom: 1rem; color: #2c3e50; }
.hero .intro { font-size: 1.1rem; color: #666; max-width: 800px; margin: 0 auto; line-height: 1.8; }

.hot-section, .latest-section, .nav-section { margin-bottom: 3rem; }
.hot-section h2, .latest-section h2, .nav-section h2 { font-size: 1.8rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 3px solid #3498db; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: #2c3e50; }
.card h3 a { color: #2c3e50; }
.card h3 a:hover { color: #3498db; }
.card .meta { font-size: 0.9rem; color: #999; margin-bottom: 0.5rem; }
.card .oneline { font-size: 0.95rem; color: #666; line-height: 1.6; }

.nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.nav-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; text-align: center; font-size: 1.3rem; font-weight: bold; border-radius: 8px; transition: transform 0.3s; }
.nav-card:hover { transform: scale(1.05); }

.page-intro { font-size: 1.1rem; color: #666; margin-bottom: 2rem; line-height: 1.8; }
.list-container { display: flex; flex-direction: column; gap: 1.5rem; }
.list-item { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: relative; }
.list-item.top { border-left: 4px solid #e74c3c; }
.list-item.topic { border-left: 4px solid #9b59b6; }
.list-item.latest { border-left: 4px solid #27ae60; }
.list-item .rank { position: absolute; top: 1rem; right: 1rem; background: #e74c3c; color: white; padding: 0.3rem 0.8rem; border-radius: 20px; font-weight: bold; }
.list-item .date-badge { position: absolute; top: 1rem; right: 1rem; background: #27ae60; color: white; padding: 0.3rem 0.8rem; border-radius: 4px; font-size: 0.9rem; }
.list-item h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.list-item h3 a { color: #2c3e50; }
.list-item h3 a:hover { color: #3498db; }
.list-item .meta { color: #999; margin-bottom: 0.5rem; }
.list-item .summary { color: #666; line-height: 1.6; }

.detail { background: white; padding: 2rem; border-radius: 8px; margin-bottom: 2rem; }
.detail h1 { font-size: 2.2rem; margin-bottom: 1.5rem; color: #2c3e50; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; padding: 1.5rem; background: #f8f9fa; border-radius: 8px; }
.info-grid p { font-size: 1rem; color: #555; }
.oneline { font-size: 1.1rem; color: #3498db; font-weight: 500; margin-bottom: 1.5rem; padding: 1rem; background: #e3f2fd; border-radius: 8px; border-left: 4px solid #3498db; }
.summary, .review { margin-bottom: 2rem; }
.summary h2, .review h2 { font-size: 1.5rem; margin-bottom: 1rem; color: #2c3e50; }
.summary p, .review p { font-size: 1.05rem; line-height: 1.8; color: #555; }

.related { margin-top: 3rem; }
.related h2 { font-size: 1.8rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 3px solid #9b59b6; }

@media (max-width: 768px) {
  .hero h1 { font-size: 1.5rem; }
  .card-grid { grid-template-columns: 1fr; }
  .nav-links { grid-template-columns: 1fr; }
}