/* 旧Cocoon装飾ブロックの紙トーン互換（テーマ切替後も旧記事の本文装飾が破綻しないための最小CSS）
   対象: 記事本文内に残る Cocoon 由来のクラス。デザインは紙×明朝×赤ペン（backstage系トークン）に translate する。
   ※本文に直書きされたインラインスタイル（黒×金ボックス等）はCSSでは救えないため、記事側の修正タスクで対応する。 */

:root {
  --ma-paper: #F4EFE3;
  --ma-paper-deep: #ECE5D3;
  --ma-ink: #1A1712;
  --ma-mut: #8E8674;
  --ma-line: #D8CFBB;
  --ma-vermilion: #E8391B;
}

/* 汎用ボックス群 → 紙の囲み罫 */
.mds-prose .blank-box,
.mds-prose .information-box,
.mds-prose .question-box,
.mds-prose .alert-box,
.mds-prose .memo-box,
.mds-prose .comment-box,
.mds-prose .common-icon-box,
.mds-prose .caption-box,
.mds-prose .label-box {
  background: var(--ma-paper-deep);
  border: 1px solid var(--ma-line);
  border-radius: 2px;
  color: var(--ma-ink);
  padding: 1.2em 1.4em;
  margin: 1.8em 0;
}

/* 注意系だけ赤ペンの縦罫で示す */
.mds-prose .alert-box,
.mds-prose .question-box {
  border-left: 3px solid var(--ma-vermilion);
}

/* ボックスラベル・キャプション */
.mds-prose .box-label,
.mds-prose .caption-box-label {
  background: transparent;
  color: var(--ma-mut);
  font-size: 0.82em;
  letter-spacing: 0.08em;
  padding: 0 0 0.4em;
  display: block;
}

/* マーカー → 赤ペンの下線 */
.mds-prose .marker,
.mds-prose .marker-red,
.mds-prose .marker-blue,
.mds-prose .marker-under,
.mds-prose .marker-under-red,
.mds-prose .marker-under-blue {
  background: none;
  background-image: linear-gradient(transparent 72%, rgba(232, 57, 27, 0.35) 72%);
  color: inherit;
}

/* 吹き出し → シンプルな引用カード（アイコンは隠す） */
.mds-prose .speech-wrap {
  display: block;
  margin: 1.8em 0;
}
.mds-prose .speech-wrap .speech-person { display: none; }
.mds-prose .speech-wrap .speech-balloon {
  display: block;
  width: auto;
  background: var(--ma-paper-deep);
  border: 1px solid var(--ma-line);
  border-radius: 2px;
  color: var(--ma-ink);
  padding: 1em 1.2em;
}
.mds-prose .speech-wrap .speech-balloon::before,
.mds-prose .speech-wrap .speech-balloon::after { display: none; }

/* ボタン → 紙の世界観のCTA（LINE等の旧ボタンリンク） */
.mds-prose .btn,
.mds-prose .btn-wrap a {
  display: inline-block;
  background: var(--ma-ink);
  color: var(--ma-paper);
  border: 1px solid var(--ma-ink);
  border-radius: 2px;
  padding: 0.7em 1.6em;
  text-decoration: none;
}
.mds-prose .btn:hover,
.mds-prose .btn-wrap a:hover {
  background: var(--ma-vermilion);
  border-color: var(--ma-vermilion);
  color: #fff;
}

/* 目次（Cocoon toc） */
.mds-prose .toc {
  background: var(--ma-paper-deep);
  border: 1px solid var(--ma-line);
  padding: 1.2em 1.6em;
  margin: 1.8em 0;
}
.mds-prose .toc-title {
  color: var(--ma-mut);
  font-size: 0.85em;
  letter-spacing: 0.1em;
}