.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

main { min-height: calc(100vh - 200px); background: #fff; }

.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff; padding: 60px 20px; text-align: center; }
.hero h1 { font-size: 32px; margin-bottom: 20px; line-height: 1.4; }
.hero .intro { font-size: 16px; line-height: 1.8; max-width: 900px; margin: 0 auto; }

section { padding: 40px 0; }
section h2 { font-size: 28px; margin-bottom: 30px; color: #333;
             border-bottom: 3px solid #1a73e8; padding-bottom: 10px; display: inline-block; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
              gap: 20px; margin-bottom: 30px; }
.video-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
              padding: 20px; transition: all 0.3s; }
.video-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); }
.video-card h3 { font-size: 18px; margin-bottom: 10px; }
.video-card h3 a { color: #333; }
.video-card .meta { font-size: 14px; color: #666; margin-bottom: 10px; }
.video-card .desc { font-size: 14px; color: #555; line-height: 1.6; }

.topic-list { display: flex; flex-direction: column; gap: 20px; }
.topic-item { background: #f9f9f9; border-left: 4px solid #667eea;
              padding: 20px; border-radius: 4px; }
.topic-item h3 { font-size: 20px; margin-bottom: 10px; }
.topic-item h3 a { color: #333; }
.topic-item .topic-desc { font-size: 14px; color: #666; }

.latest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
.latest-card { background: #fff; border: 1px solid #e0e0e0; padding: 15px;
               border-radius: 6px; transition: all 0.3s; }
.latest-card:hover { border-color: #1a73e8; }
.latest-card .latest-title { font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.latest-card .latest-title a { color: #333; }
.latest-card .latest-info { font-size: 13px; color: #888; }

.more-link { text-align: right; margin-top: 20px; font-size: 16px; }

.page-intro { font-size: 16px; color: #555; line-height: 1.8;
              margin: 20px 0 40px; padding: 20px; background: #f5f5f5; border-radius: 8px; }

.list-container { display: flex; flex-direction: column; gap: 20px; }
.video-item { background: #fff; border: 1px solid #e0e0e0; padding: 25px;
              border-radius: 8px; transition: all 0.3s; }
.video-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.video-item h3 { font-size: 22px; margin-bottom: 12px; }
.video-item h3 a { color: #1a73e8; }
.video-item .meta { font-size: 14px; color: #666; margin-bottom: 10px; }
.video-item .tags { font-size: 13px; color: #888; margin-bottom: 10px; }
.video-item .summary { font-size: 15px; color: #444; line-height: 1.7; }

.rank-item { display: flex; align-items: flex-start; gap: 20px; }
.rank-number { font-size: 36px; font-weight: bold; color: #1a73e8;
               min-width: 60px; text-align: center; }
.item-content { flex: 1; }

.topic-item { position: relative; padding-left: 100px; }
.topic-tag { position: absolute; left: 25px; top: 25px;
             background: #667eea; color: #fff; padding: 5px 12px;
             border-radius: 4px; font-size: 13px; }

.latest-item { position: relative; padding-left: 130px; }
.latest-date { position: absolute; left: 25px; top: 25px;
               color: #1a73e8; font-weight: bold; font-size: 14px; }

.detail-page h1 { font-size: 32px; color: #333; margin: 30px 0;
                  padding-bottom: 15px; border-bottom: 2px solid #1a73e8; }

.detail-info { background: #f9f9f9; padding: 25px; border-radius: 8px;
               margin-bottom: 30px; line-height: 2; }
.detail-info .info-row { font-size: 15px; margin-bottom: 8px; }
.detail-info strong { color: #333; min-width: 80px; display: inline-block; }

.detail-section { margin-bottom: 40px; }
.detail-section h2 { font-size: 24px; color: #333; margin-bottom: 20px;
                     border-left: 4px solid #1a73e8; padding-left: 15px; }
.detail-section p { font-size: 16px; line-height: 1.8; color: #444; }
.detail-section .oneline { font-size: 18px; color: #1a73e8; font-weight: 500; }

.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 20px; margin-top: 20px; }
.related-card { border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px;
                background: #fafafa; transition: all 0.3s; }
.related-card:hover { border-color: #1a73e8; background: #fff; }
.related-card h3 { font-size: 17px; margin-bottom: 10px; }
.related-card h3 a { color: #333; }
.related-card .related-meta { font-size: 13px; color: #888; margin-bottom: 8px; }
.related-card .related-desc { font-size: 14px; color: #666; }

footer { background: #333; color: #fff; padding: 30px 0; margin-top: 60px; text-align: center; }

@media (max-width: 768px) {
  .hero h1 { font-size: 24px; }
  .hero .intro { font-size: 14px; }
  .video-grid { grid-template-columns: 1fr; }
  .latest-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .rank-item { flex-direction: column; gap: 10px; }
  .rank-number { font-size: 28px; }
  .topic-item { padding-left: 20px; padding-top: 50px; }
  .topic-tag { left: 20px; top: 15px; }
  .latest-item { padding-left: 20px; padding-top: 50px; }
  .latest-date { left: 20px; top: 15px; }
}