#footer {
  background-color: #1f2937 !important;
}

/* heading anchor link — 加間距讓 # 和標題不要黏在一起 */
.header-anchor {
  margin-right: 0.35em;
}

/* ------------------------------------------------------------------
   markdown-it-container — namespaced under .mdc-* to avoid clashing
   with Butterfly's built-in .note tag plugin styles.
   Source syntax stays natural: ::: note / ::: tip / ::: warning / ::: spoiler
   Rendered HTML: <div class="mdc-callout mdc-note"> ...
   ------------------------------------------------------------------ */
.mdc-callout {
  margin: 1.2em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .mdc-callout:not(.mdc-spoiler) {
  background-color: rgba(255, 255, 255, 0.05);
}

.mdc-callout::before {
  display: block;
  font-weight: 700;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  margin-bottom: 0.5em;
}

.mdc-note {
  border-color: #3b82f6;
}
.mdc-note::before {
  content: "NOTE";
  color: #3b82f6;
}

.mdc-tip {
  border-color: #10b981;
}
.mdc-tip::before {
  content: "TIP";
  color: #10b981;
}

.mdc-warning {
  border-color: #f59e0b;
}
.mdc-warning::before {
  content: "WARNING";
  color: #f59e0b;
}

/* spoiler — 預設遮蔽，hover / focus 才顯示 */
.mdc-spoiler {
  border-color: #6b7280;
  background-color: #1f2937;
  color: #1f2937;
  cursor: pointer;
  transition: color 0.3s ease;
}
.mdc-spoiler::before {
  content: "SPOILER (hover 顯示)";
  color: #9ca3af;
}
.mdc-spoiler:hover,
.mdc-spoiler:focus-within {
  color: #f3f4f6;
}
.mdc-spoiler:hover::before,
.mdc-spoiler:focus-within::before {
  content: "SPOILER";
}
.mdc-spoiler a {
  color: inherit;
}