/* ============================================================
   assets/compare.css — 双栏对比网格组件
   Vinland Saga 教学 workspace

   依赖：base.css（:root 变量）

   HTML 结构：
     <div class="compare">
       <div class="compare-col real">
         <h4>史实</h4>
         <p>……</p>
       </div>
       <div class="compare-col manga">
         <h4>漫画改编</h4>
         <p>……</p>
       </div>
     </div>

   预设配色：
     .real  — 绿色背景（史实）
     .manga — 橙色背景（漫画改编）

   如需其他配色（如蓝色主题），在文件级 <style> 中覆写：
     .compare-col.real { background: #e8f0f8; }
     .compare-col.real h4 { color: #1a5276; }
   ============================================================ */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 0.8rem 0;
}

@media (max-width: 600px) {
  .compare { grid-template-columns: 1fr; }
}

.compare-col {
  background: var(--highlight);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
}

.compare-col h4 {
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
  font-family: system-ui, sans-serif;
}

/* --- 预设主题配色 --- */

/* 史实（绿色） */
.compare-col.real {
  background: #e8f5e9;
}
.compare-col.real h4 {
  color: #2e7d32;
}

/* 漫画改编（橙色） */
.compare-col.manga {
  background: #fff3e0;
}
.compare-col.manga h4 {
  color: #e65100;
}