/* base.css —— 从 layout.css 拆出（原第 1-16 行）
   容器 + 文件头
   拆分日期：2026-10-30 */

/* ===================================================================
   layout.css — 页面大结构及响应式
   完全对齐 base.html 的实际 DOM 结构
   =================================================================== */

/* 主容器 */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 20px; /* 增加左右安全边距，防止贴边 */
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  align-items: start;
}

@media (max-width: 768px) {
  .container {
    padding: 0 4px; /* 移动端：卡片距屏幕背景 4px（与 body 10px 叠加） */
  }
}



/* ===================================================================
   全局滚动条与溢出控制（2026-10-31 追加）
   =================================================================== */


/* 2. 隐藏纵向滚动条外观，保留滚动功能 */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  display: none;
}

/* Firefox / IE / Edge */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 平板/小笔记本（1024px 以下）：单列布局 */
@media (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr;
    display: block;
  }
}