/* ============================================================
   charts.css — 图表容器样式（配合 charts.js）
   在 styles.css 之后引入：
     <link rel="stylesheet" href="charts.css">
   ============================================================ */

.chart-box {
  margin: 28px 0;
  padding: 20px 18px 12px;
  background: #ffffff;
  border: 1px solid var(--line, #e3e9f0);
  border-radius: var(--radius, 14px);
  box-shadow: 0 1px 6px rgba(13, 36, 64, .05);
  overflow-x: auto;          /* 窄屏可横向滚动，不撑破布局 */
  -webkit-overflow-scrolling: touch;
}

/* 图表本体已由 charts.js 内联 width:100%，此处只兜底 */
.chart-box svg {
  max-width: 100%;
  height: auto;
}

/* 说明文字：图下方的可读补充，让爬虫抓到正文而不只是图形 */
.chart-note {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted, #5b6b7b);
}

/* 移动端：图表在窄屏容易挤，减小内边距并允许滚动 */
@media (max-width: 640px) {
  .chart-box {
    padding: 16px 12px 10px;
    margin: 22px 0;
  }
}

/* 打印：图表加边框，纸质输出也能看清 */
@media print {
  .chart-box {
    box-shadow: none;
    border: 1px solid #999;
    break-inside: avoid;
  }
}