.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.hero { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; margin-bottom: 40px; }
.hero h1 { font-size: 2.5rem; margin-bottom: 20px; line-height: 1.3; }
.hero .subtitle { font-size: 1.1rem; opacity: 0.95; line-height: 1.8; }
.intro-section { background: white; padding: 40px; border-radius: 8px; margin-bottom: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.intro-section h2 { font-size: 1.8rem; margin-bottom: 20px; color: #2563eb; }
.intro-section p { line-height: 1.8; color: #555; }
.intro-section a { color: #2563eb; text-decoration: underline; }
.video-list { margin-bottom: 50px; }
.video-list h2 { font-size: 2rem; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 3px solid #2563eb; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.video-card { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
.video-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.video-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.video-card h3 a { color: #1e40af; }
.video-card h3 a:hover { color: #2563eb; }
.video-card .meta { font-size: 0.9rem; color: #666; margin-bottom: 12px; }
.video-card .oneline { font-size: 0.95rem; color: #444; line-height: 1.6; margin-bottom: 16px; }
.video-card .btn-more { display: inline-block; padding: 8px 16px; background: #2563eb; color: white; border-radius: 4px; font-size: 0.9rem; transition: background 0.3s; }
.video-card .btn-more:hover { background: #1e40af; }
.entry-links { margin-top: 50px; }
.entry-links h2 { font-size: 2rem; margin-bottom: 30px; text-align: center; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.entry-card { background: white; padding: 32px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.entry-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.entry-card h3 { font-size: 1.5rem; color: #2563eb; margin-bottom: 12px; }
.entry-card p { color: #666; }
.page-intro { background: white; padding: 24px; border-radius: 8px; margin-bottom: 32px; line-height: 1.8; color: #555; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.video-list-full .video-item-full { background: white; padding: 24px; margin-bottom: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.video-item-full h3 { font-size: 1.4rem; margin-bottom: 10px; }
.video-item-full h3 a { color: #1e40af; }
.video-item-full .meta { font-size: 0.9rem; color: #666; margin-bottom: 12px; }
.video-item-full .summary { line-height: 1.7; color: #444; margin-bottom: 12px; }
.video-item-full .btn-detail { display: inline-block; padding: 8px 16px; background: #10b981; color: white; border-radius: 4px; font-size: 0.9rem; }
.video-item-full .btn-detail:hover { background: #059669; }
.video-list-ranked .video-item-ranked { background: white; padding: 20px; margin-bottom: 12px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; align-items: center; gap: 20px; }
.video-item-ranked .rank-number { font-size: 2rem; font-weight: bold; color: #2563eb; min-width: 50px; text-align: center; }
.video-item-ranked .video-info { flex: 1; }
.video-item-ranked h3 { font-size: 1.3rem; margin-bottom: 8px; }
.video-item-ranked h3 a { color: #1e40af; }
.video-item-ranked .meta { font-size: 0.85rem; color: #666; margin-bottom: 8px; }
.video-item-ranked .review { font-size: 0.9rem; color: #555; line-height: 1.6; }
.video-item-ranked .btn-view { padding: 10px 20px; background: #2563eb; color: white; border-radius: 4px; white-space: nowrap; }
.video-item-ranked .btn-view:hover { background: #1e40af; }
.topic-group { margin-bottom: 50px; }
.topic-title { font-size: 1.8rem; margin-bottom: 24px; color: #2563eb; padding-bottom: 12px; border-bottom: 2px solid #e5e7eb; }
.video-grid-topic { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.video-card-topic { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.video-card-topic h3 { font-size: 1.2rem; margin-bottom: 10px; }
.video-card-topic h3 a { color: #1e40af; }
.video-card-topic .meta { font-size: 0.85rem; color: #666; margin-bottom: 8px; }
.video-card-topic .oneline { font-size: 0.9rem; color: #555; line-height: 1.6; }
.video-list-latest .video-item-latest { background: white; padding: 20px; margin-bottom: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; gap: 20px; align-items: flex-start; }
.video-item-latest .video-year { font-size: 1.5rem; font-weight: bold; color: #10b981; min-width: 60px; text-align: center; background: #f0fdf4; padding: 10px; border-radius: 6px; }
.video-item-latest .video-content { flex: 1; }
.video-item-latest h3 { font-size: 1.3rem; margin-bottom: 8px; }
.video-item-latest h3 a { color: #1e40af; }
.video-item-latest .meta { font-size: 0.85rem; color: #666; margin-bottom: 8px; }
.video-item-latest .oneline { font-size: 0.95rem; color: #555; line-height: 1.6; }
.detail-page { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.video-detail h1 { font-size: 2.5rem; margin-bottom: 30px; color: #1e40af; border-bottom: 3px solid #2563eb; padding-bottom: 15px; }
.video-detail section { margin-bottom: 40px; }
.video-detail h2 { font-size: 1.6rem; margin-bottom: 16px; color: #2563eb; }
.basic-info .info-list { list-style: none; }
.basic-info .info-list li { padding: 10px 0; border-bottom: 1px solid #e5e7eb; font-size: 1.05rem; }
.basic-info .info-list li strong { color: #374151; margin-right: 8px; }
.one-line p, .summary p, .review p { line-height: 1.9; font-size: 1.05rem; color: #374151; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.related-card { background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; }
.related-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.related-card h3 a { color: #1e40af; }
.related-card .meta { font-size: 0.85rem; color: #666; margin-bottom: 8px; }
.related-card .brief { font-size: 0.9rem; color: #555; line-height: 1.6; }
footer { text-align: center; padding: 40px 20px; color: #666; border-top: 1px solid #e5e7eb; margin-top: 60px; }
@media (max-width: 768px) {
  .hero h1 { font-size: 1.8rem; }
  .hero .subtitle { font-size: 1rem; }
  .video-grid { grid-template-columns: 1fr; }
  .video-item-ranked { flex-direction: column; text-align: center; }
  .video-item-latest { flex-direction: column; }
  .detail-page { padding: 20px; }
  .video-detail h1 { font-size: 1.8rem; }
}