/* ========================================
   页面骨架 · Layout v2.0
   暗色血金主题
   ======================================== */

.container {
  width: 100%;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow {
  max-width: var(--content-width);
}

.main-content {
  flex: 1;
  padding: var(--sp-xl) 0;
}

/* --- 网格系统 --- */
.grid { display: grid; gap: var(--sp-lg); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* --- Flex --- */
.flex { display: flex; gap: var(--sp-md); align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }

/* --- 间距辅助 --- */
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }

/* --- 章节导航（暗色） --- */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--c-border);
}
.chapter-nav-btn {
  display: flex;
  flex-direction: column;
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--c-text);
  max-width: 45%;
  transition: all var(--transition);
  background: var(--c-surface);
}
.chapter-nav-btn:hover {
  border-color: var(--c-blood);
  background: var(--c-surface-alt);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.chapter-nav-btn.next { margin-left: auto; text-align: right; }
.chapter-nav-label { font-size: var(--fs-small); color: var(--c-text-muted); }
.chapter-nav-title {
  font-family: var(--font-serif);
  font-weight: 600;
  margin-top: var(--sp-xs);
  color: var(--c-gold);
}