/* 記事本文の装飾(マーカー・吹き出し・コールアウト・Cocoon由来の色/枠)。
   公開サイト(BaseLayout)とWordPressの編集画面(mu-plugin editor-decorations.php)の両方が読む。
   編集画面にはglobal.cssが無いので、使う変数の既定値をここに持つ。値はglobal.cssの:rootと同じにすること
   (:whereで詳細度0にしてあるので、公開サイトではglobal.css側の値が優先される)。 */
:where(:root) {
  --line-rgb: 118, 174, 227;
  --glow-rgb: 102, 163, 221;
  --wash-rgb: 194, 221, 247;
  --accent-rgb: 58, 134, 207;
  --border:       rgba(var(--line-rgb), 0.22);
  --border-hover: rgba(var(--glow-rgb), 0.55);
  --accent:       #3a86cf;
  --accent-light: #a8cff3;
  --accent-pink:  #ffcd57;
  --grad-main: linear-gradient(135deg, #3a86cf, #62b5ec);
  --grad-text: linear-gradient(135deg, #22609f 0%, #3a86cf 50%, #4aa8e0 100%);
  --text-primary: #1d3350;
  --shadow-sm: 0 2px 12px rgba(var(--accent-rgb), 0.1);
}

/* ── Text decorations ── */

/* 蛍光マーカー */
.marker {
  background: linear-gradient(transparent 55%, rgba(255, 210, 100, 0.7) 55%);
  padding: 0 2px;
}
.marker-pink {
  background: linear-gradient(transparent 55%, rgba(255, 176, 212, 0.75) 55%);
  padding: 0 2px;
}
.marker-purple {
  background: linear-gradient(transparent 55%, rgba(196, 160, 255, 0.6) 55%);
  padding: 0 2px;
}

/* グラデーション文字 */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* 吹き出し */
.balloon {
  position: relative;
  background: #fff;
  border: 2px solid var(--border-hover);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 24px 0 32px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.balloon::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 28px;
  border: 7px solid transparent;
  border-top-color: var(--border-hover);
}
.balloon::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 30px;
  border: 5px solid transparent;
  border-top-color: #fff;
  z-index: 1;
}
.balloon-right::after {
  left: auto;
  right: 28px;
}
.balloon-right::before {
  left: auto;
  right: 30px;
}

/* 話者ラベル付き吹き出し */
.speech-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 28px 0;
}
.speech-wrap.right {
  flex-direction: row-reverse;
}
.speech-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb),  0.2);
}
.speech-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.speech-bubble {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  max-width: calc(100% - 60px);
}
.speech-wrap.right .speech-bubble {
  background: rgba(var(--wash-rgb),  0.18);
  border-color: rgba(var(--line-rgb),  0.3);
}

/* コールアウトボックス */
.callout {
  border-left: 4px solid var(--accent);
  background: rgba(var(--accent-rgb),  0.07);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.callout-pink {
  border-left-color: var(--accent-pink);
  background: rgba(244, 160, 200, 0.1);
}
.callout-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 6px;
}
.callout-pink .callout-label {
  color: #c4618c;
}

/* 区切りデコレーション */
.deco-divider {
  text-align: center;
  margin: 36px 0;
  color: var(--accent-light);
  font-size: 1.1rem;
  letter-spacing: 0.5em;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════════
   旧WordPress(Cocoonテーマ)の本文装飾を再現
   実測値は https://mofmof-house.moo.jp/rabbie/ の配信CSSから取得
   ══════════════════════════════════════════════════════════════ */

/* Gutenberg/Cocoon カラーパレット(has-xxx-color) */
.has-amber-color{color:#ffc107}
.has-black-color{color:#000}
.has-blue-color{color:#0095d9}
.has-brown-color{color:#954e2a}
.has-cocoon-black-color{color:#333}
.has-cocoon-white-color{color:#fff}
.has-cyan-bluish-gray-color{color:#abb8c3}
.has-cyan-color{color:#00a3af}
.has-dark-grey-color{color:#666}
.has-deep-color{color:#55295b}
.has-deep-orange-color{color:#ea5506}
.has-ex-a-color{color:#fef4f4}
.has-ex-b-color{color:#f8f4e6}
.has-ex-c-color{color:#eaf4fc}
.has-ex-d-color{color:#eaedf7}
.has-ex-e-color{color:#e8ecef}
.has-ex-f-color{color:#f8fbf8}
.has-green-color{color:#3eb370}
.has-grey-color{color:#949495}
.has-indigo-color{color:#1e50a2}
.has-key-color-color{color:#19448e}
.has-light-blue-color{color:#2ca9e1}
.has-light-green-color{color:#8bc34a}
.has-light-green-cyan-color{color:#7bdcb5}
.has-light-grey-color{color:#ddd}
.has-lime-color{color:#c3d825}
.has-luminous-vivid-amber-color{color:#fcb900}
.has-luminous-vivid-orange-color{color:#ff6900}
.has-orange-color{color:#f39800}
.has-pale-cyan-blue-color{color:#8ed1fc}
.has-pale-pink-color{color:#f78da7}
.has-pink-color{color:#e95295}
.has-purple-color{color:#884898}
.has-red-color{color:#e60033}
.has-teal-color{color:#007b43}
.has-very-dark-gray-color{color:#313131}
.has-very-light-gray-color{color:#eee}
.has-vivid-cyan-blue-color{color:#0693e3}
.has-vivid-green-cyan-color{color:#00d084}
.has-vivid-purple-color{color:#9b51e0}
.has-vivid-red-color{color:#cf2e2e}
.has-watery-blue-color{color:#f3fafe}
.has-watery-green-color{color:#ebf8f4}
.has-watery-red-color{color:#fdf2f2}
.has-watery-yellow-color{color:#fff7cc}
.has-white-color{color:#fff}
.has-yellow-color{color:#ffd900}

/* Cocoon 色付き太字 */
.bold-red{font-weight:700;color:#e60033}
.bold-blue{font-weight:700;color:#0095d9}
.bold-green{font-weight:700;color:#3eb370}

/* Cocoon 枠囲みボックス */
.is-style-border-radius-s-dotted{border:dotted 4px #47585c;border-radius:6px}
.is-style-light-background-box{background-color:#f8f9f8}
.has-box-style,.has-border{padding:1em 1.5em}