* { box-sizing: border-box; }
body { margin: 0; padding: 0; }
.logo { font-size: 20px; font-weight: bold; color: #007bff; padding: 10px 20px; }
main { max-width: 1200px; margin: 20px auto; padding: 0 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.hero { text-align: center; padding: 40px 20px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 8px 8px 0 0; margin: -20px -20px 20px; }
.hero h1 { font-size: 28px; margin: 0; }
.intro { padding: 20px 0; line-height: 1.8; border-bottom: 1px solid #eee; }
.intro a { color: #007bff; text-decoration: none; }
.intro a:hover { text-decoration: underline; }
section { padding: 20px 0; }
h2 { font-size: 24px; margin-bottom: 15px; color: #333; border-left: 4px solid #007bff; padding-left: 12px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.video-card { border: 1px solid #e0e0e0; padding: 15px; border-radius: 6px; transition: all 0.3s; }
.video-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); }
.video-card h3 { margin: 0 0 8px; font-size: 18px; }
.video-card h3 a { color: #333; text-decoration: none; }
.video-card h3 a:hover { color: #007bff; }
.video-card .meta { font-size: 13px; color: #666; margin: 5px 0; }
.video-card .desc { font-size: 14px; color: #555; line-height: 1.5; }
.video-list { display: flex; flex-direction: column; gap: 15px; }
.video-item { border-bottom: 1px solid #eee; padding-bottom: 15px; }
.video-item h3 { margin: 0 0 5px; font-size: 18px; }
.video-item h3 a { color: #333; text-decoration: none; }
.video-item h3 a:hover { color: #007bff; }
.video-item p { margin: 5px 0 0; color: #666; font-size: 14px; }
.quick-links ul { list-style: none; padding: 0; }
.quick-links li { margin: 10px 0; }
.quick-links a { color: #007bff; text-decoration: none; font-size: 16px; }
.quick-links a:hover { text-decoration: underline; }
.detail-page { padding: 30px 20px; }
.detail-page h1 { font-size: 32px; margin-bottom: 20px; color: #333; }
.info { background: #f9f9f9; padding: 15px; border-radius: 6px; margin: 20px 0; }
.info p { margin: 8px 0; }
.highlight, .summary, .review { margin: 25px 0; }
.highlight h2, .summary h2, .review h2 { font-size: 22px; }
.related-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 15px; }
.related-item { border: 1px solid #e0e0e0; padding: 15px; border-radius: 6px; }
.related-item h3 { margin: 0 0 8px; font-size: 16px; }
.related-item h3 a { color: #007bff; text-decoration: none; }
.related-item h3 a:hover { text-decoration: underline; }
.related-item p { font-size: 14px; color: #666; margin: 0; }
.list-page { padding: 30px 20px; }
.list-page h1 { font-size: 32px; margin-bottom: 10px; color: #333; }
.page-intro { font-size: 16px; color: #666; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #007bff; }
.video-list-full { display: flex; flex-direction: column; gap: 20px; }
.list-item { display: flex; gap: 15px; border: 1px solid #e0e0e0; padding: 15px; border-radius: 6px; transition: all 0.3s; }
.list-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.item-index { font-size: 24px; font-weight: bold; color: #007bff; min-width: 40px; }
.item-content { flex: 1; }
.item-content h2 { margin: 0 0 8px; font-size: 20px; border: none; padding: 0; }
.item-content h2 a { color: #333; text-decoration: none; }
.item-content h2 a:hover { color: #007bff; }
.item-content .meta { font-size: 13px; color: #999; margin: 5px 0; }
.item-content .desc { font-size: 14px; color: #666; margin: 8px 0 0; line-height: 1.6; }
footer { text-align: center; padding: 20px; background: #333; color: #fff; margin-top: 40px; }
@media (max-width: 768px) {
  .hero h1 { font-size: 22px; }
  .video-grid { grid-template-columns: 1fr; }
  .related-list { grid-template-columns: 1fr; }
  .detail-page h1, .list-page h1 { font-size: 24px; }
  .list-item { flex-direction: row; }
  .item-index { font-size: 20px; min-width: 35px; }
}