/* ============================================================
   暮らしノート - 記事の装飾（共通）
   このファイルは「フロント」と「投稿編集画面」の両方から読み込まれます。
   ここだけを直せば、書いているときと公開後の見た目が必ず一致します。

   色は var(--x, #既定値) 形式で書いています。
   編集画面ではテーマ変数が無いため、既定値（16進数）が使われます。
   ============================================================ */

/* ============================================================
   1. 文字装飾（ツールバーの「∨」から適用）
   ============================================================ */

/* --- アンダーマーカー（蛍光ペン風） --- */
mark.marker, .marker,
mark.marker-orange, .marker-orange,
mark.marker-green, .marker-green,
mark.marker-blue, .marker-blue,
mark.marker-pink, .marker-pink {
  color: inherit;
  font-weight: 700;
  padding: 0 2px;
  background-color: transparent;
}
mark.marker,        .marker        { background-image: linear-gradient(transparent 58%, #ffe08a 58%); }
mark.marker-orange, .marker-orange { background-image: linear-gradient(transparent 58%, #ffcdad 58%); }
mark.marker-green,  .marker-green  { background-image: linear-gradient(transparent 58%, #bfe0da 58%); }
mark.marker-blue,   .marker-blue   { background-image: linear-gradient(transparent 58%, #c5ddf2 58%); }
mark.marker-pink,   .marker-pink   { background-image: linear-gradient(transparent 58%, #f7cdd8 58%); }

/* --- 文字色つきの強調 --- */
.text-accent { color: var(--c-accent-d, #d06b44); font-weight: 700; }
.text-red    { color: #c05e50; font-weight: 700; }
.text-green  { color: #4c8a81; font-weight: 700; }

/* --- 下線 --- */
.underline-dot   { border-bottom: 3px dotted var(--c-accent, #e8845c); padding-bottom: 1px; font-weight: 700; }
.underline-solid { border-bottom: 2px solid var(--c-accent, #e8845c); padding-bottom: 1px; font-weight: 700; }

/* --- 文字サイズ・ラベル --- */
.text-big   { font-size: 1.25em; font-weight: 700; }
.text-small { font-size: .84em; color: var(--c-ink-soft, #756e64); }
.text-badge {
  display: inline-block;
  background: var(--c-accent, #e8845c);
  color: #fff;
  font-size: .8em;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  margin: 0 2px;
  line-height: 1.6;
}

/* ============================================================
   2. ボックス（段落／グループの「スタイル」から適用）
   ============================================================ */
.box-point,   .is-style-box-point,
.box-memo,    .is-style-box-memo,
.box-warning, .is-style-box-warning,
.box-danger,  .is-style-box-danger,
.box-ok,      .is-style-box-ok,
.box-ng,      .is-style-box-ng,
.box-qa,      .is-style-box-qa,
.box-voice,   .is-style-box-voice,
.box-plain,   .is-style-box-plain,
.box-fill,    .is-style-box-fill {
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 24px;
}

/* ボックス内の最後の要素は余白を詰める（グループブロック対応） */
.box-point > *:last-child,   .is-style-box-point > *:last-child,
.box-memo > *:last-child,    .is-style-box-memo > *:last-child,
.box-warning > *:last-child, .is-style-box-warning > *:last-child,
.box-danger > *:last-child,  .is-style-box-danger > *:last-child,
.box-ok > *:last-child,      .is-style-box-ok > *:last-child,
.box-ng > *:last-child,      .is-style-box-ng > *:last-child,
.box-qa > *:last-child,      .is-style-box-qa > *:last-child,
.box-voice > *:last-child,   .is-style-box-voice > *:last-child,
.box-plain > *:last-child,   .is-style-box-plain > *:last-child,
.box-fill > *:last-child,    .is-style-box-fill > *:last-child { margin-bottom: 0; }

/* ラベル（ボックス上部の見出し。本文だけ書けば自動で付きます） */
.box-point::before,   .is-style-box-point::before,
.box-memo::before,    .is-style-box-memo::before,
.box-warning::before, .is-style-box-warning::before,
.box-danger::before,  .is-style-box-danger::before,
.box-ok::before,      .is-style-box-ok::before,
.box-ng::before,      .is-style-box-ng::before,
.box-qa::before,      .is-style-box-qa::before,
.box-voice::before,   .is-style-box-voice::before {
  display: block;
  font-family: var(--font-round, "Zen Maru Gothic", sans-serif);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 8px;
}

/* 💡 ポイント（コツ・おすすめ） */
.box-point, .is-style-box-point { background: #fdf1e8; border: 1.5px solid #f2c4a8; }
.box-point::before, .is-style-box-point::before { content: "💡 ポイント"; color: var(--c-accent-d, #d06b44); }

/* 📝 メモ（補足・豆知識） */
.box-memo, .is-style-box-memo { background: #eef5f3; border: 1.5px solid #cfe2dd; }
.box-memo::before, .is-style-box-memo::before { content: "📝 メモ"; color: #4c8a81; }

/* ⚠️ 注意（気をつけること） */
.box-warning, .is-style-box-warning { background: #fdf0ef; border: 1.5px solid #f0c6c0; }
.box-warning::before, .is-style-box-warning::before { content: "⚠️ 注意"; color: #c05e50; }

/* 🚨 重要・危険（けが・故障につながること） */
.box-danger, .is-style-box-danger {
  background: #fdeceb; border: 2px solid #d9544a;
}
.box-danger::before, .is-style-box-danger::before { content: "🚨 重要"; color: #b23b31; }

/* ✅ OK例 */
.box-ok, .is-style-box-ok { background: #eef7f0; border: 1.5px solid #c3e0cb; }
.box-ok::before, .is-style-box-ok::before { content: "✅ OK例"; color: #3f8353; }

/* ❌ NG例 */
.box-ng, .is-style-box-ng { background: #fbf0f0; border: 1.5px solid #eec9c6; }
.box-ng::before, .is-style-box-ng::before { content: "❌ NG例"; color: #c05e50; }

/* ❓ Q&A */
.box-qa, .is-style-box-qa { background: #f2f2fb; border: 1.5px solid #d3d3ee; }
.box-qa::before, .is-style-box-qa::before { content: "❓ よくある質問"; color: #5f5f9c; }

/* 💬 体験談 */
.box-voice, .is-style-box-voice { background: #fbf8f3; border: 1.5px dashed #d8cfbe; }
.box-voice::before, .is-style-box-voice::before { content: "💬 体験談"; color: #8a7a5e; }

/* 枠線だけ・背景だけ（ラベルなし） */
.box-plain, .is-style-box-plain { background: #fff; border: 1.5px solid var(--c-line, #ece7df); }
.box-fill,  .is-style-box-fill  { background: var(--c-bg, #fbf8f3); }

/* ============================================================
   3. 吹き出し（会話形式）
   ============================================================ */
.fukidashi-l,  .is-style-fukidashi-l,
.fukidashi-r,  .is-style-fukidashi-r,
.fukidashi-l2, .is-style-fukidashi-l2,
.fukidashi-r2, .is-style-fukidashi-r2 {
  position: relative;
  padding: 14px 18px;
  border-radius: 14px;
  margin: 0 0 28px;
  min-height: 54px;
}
.fukidashi-l,  .is-style-fukidashi-l,
.fukidashi-l2, .is-style-fukidashi-l2 { margin-left: 70px; }
.fukidashi-r,  .is-style-fukidashi-r,
.fukidashi-r2, .is-style-fukidashi-r2 { margin-right: 70px; }

.fukidashi-l,  .is-style-fukidashi-l  { background: #fff;    border: 1.5px solid var(--c-line, #ece7df); }
.fukidashi-r,  .is-style-fukidashi-r  { background: #fdf1e8; border: 1.5px solid #f2c4a8; }
.fukidashi-l2, .is-style-fukidashi-l2 { background: #f4f2ef; border: 1.5px solid #ddd7cd; }
.fukidashi-r2, .is-style-fukidashi-r2 { background: #eef5f3; border: 1.5px solid #cfe2dd; }

/* アイコン（外観 > カスタマイズ > 記事の装飾 で画像・絵文字を変更できます） */
.fukidashi-l::before,  .is-style-fukidashi-l::before,
.fukidashi-r::before,  .is-style-fukidashi-r::before,
.fukidashi-l2::before, .is-style-fukidashi-l2::before,
.fukidashi-r2::before, .is-style-fukidashi-r2::before {
  position: absolute; top: -2px;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 27px;
  border: 1.5px solid var(--c-line, #ece7df);
}
.fukidashi-l::before,  .is-style-fukidashi-l::before  { content: "🙋"; left: -70px;  background: #eef5f3; }
.fukidashi-r::before,  .is-style-fukidashi-r::before  { content: "☕"; right: -70px; background: #fdf1e8; }
.fukidashi-l2::before, .is-style-fukidashi-l2::before { content: "👶"; left: -70px;  background: #f4f2ef; }
.fukidashi-r2::before, .is-style-fukidashi-r2::before { content: "👩"; right: -70px; background: #eef5f3; }

/* しっぽ */
.fukidashi-l::after,  .is-style-fukidashi-l::after,
.fukidashi-r::after,  .is-style-fukidashi-r::after,
.fukidashi-l2::after, .is-style-fukidashi-l2::after,
.fukidashi-r2::after, .is-style-fukidashi-r2::after {
  content: ""; position: absolute; top: 18px;
  border: 8px solid transparent;
}
.fukidashi-l::after,  .is-style-fukidashi-l::after  { left: -15px;  border-right-color: #fff; }
.fukidashi-r::after,  .is-style-fukidashi-r::after  { right: -15px; border-left-color: #fdf1e8; }
.fukidashi-l2::after, .is-style-fukidashi-l2::after { left: -15px;  border-right-color: #f4f2ef; }
.fukidashi-r2::after, .is-style-fukidashi-r2::after { right: -15px; border-left-color: #eef5f3; }

/* スマホではアイコンを小さくして本文幅を確保 */
@media (max-width: 600px) {
  .fukidashi-l,  .is-style-fukidashi-l,
  .fukidashi-l2, .is-style-fukidashi-l2 { margin-left: 56px; }
  .fukidashi-r,  .is-style-fukidashi-r,
  .fukidashi-r2, .is-style-fukidashi-r2 { margin-right: 56px; }
  .fukidashi-l::before,  .is-style-fukidashi-l::before,
  .fukidashi-r::before,  .is-style-fukidashi-r::before,
  .fukidashi-l2::before, .is-style-fukidashi-l2::before,
  .fukidashi-r2::before, .is-style-fukidashi-r2::before {
    width: 44px; height: 44px; font-size: 22px;
  }
  .fukidashi-l::before,  .is-style-fukidashi-l::before,
  .fukidashi-l2::before, .is-style-fukidashi-l2::before { left: -56px; }
  .fukidashi-r::before,  .is-style-fukidashi-r::before,
  .fukidashi-r2::before, .is-style-fukidashi-r2::before { right: -56px; }
}

/* ============================================================
   4. リスト（リストブロックの「スタイル」から適用）
   ============================================================ */
.is-style-check-list, .check-list,
.is-style-good-list,  .good-list,
.is-style-bad-list,   .bad-list,
.is-style-arrow-list, .arrow-list {
  list-style: none !important;
  margin: 24px 0 !important;
  padding: 0 !important;
}
.is-style-check-list li, .check-list li,
.is-style-good-list li,  .good-list li,
.is-style-bad-list li,   .bad-list li,
.is-style-arrow-list li, .arrow-list li {
  position: relative;
  padding: 0 0 0 30px;
  margin-bottom: 10px;
  list-style: none;
}
.is-style-check-list li::before, .check-list li::before,
.is-style-good-list li::before,  .good-list li::before,
.is-style-bad-list li::before,   .bad-list li::before,
.is-style-arrow-list li::before, .arrow-list li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 700;
}
.is-style-check-list li::before, .check-list li::before { content: "✔"; color: #4c8a81; }
.is-style-good-list li::before,  .good-list li::before  { content: "◯"; color: #3f8353; }
.is-style-bad-list li::before,   .bad-list li::before   { content: "×"; color: #c05e50; font-size: 1.1em; }
.is-style-arrow-list li::before, .arrow-list li::before { content: "→"; color: var(--c-accent, #e8845c); }

/* ① 手順（ステップ）リスト */
.is-style-step-list, .step-list {
  counter-reset: step;
  list-style: none !important;
  margin: 24px 0 !important;
  padding: 0 !important;
}
.is-style-step-list li, .step-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 56px;
  margin: 0;
  list-style: none;
}
.is-style-step-list li::before, .step-list li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-accent, #e8845c); color: #fff;
  font-family: var(--font-round, "Zen Maru Gothic", sans-serif);
  font-weight: 700; font-size: .95rem;
  display: grid; place-items: center;
}
.is-style-step-list li:not(:last-child)::after, .step-list li:not(:last-child)::after {
  content: "";
  position: absolute; left: 16px; top: 36px; bottom: 6px;
  width: 2px; background: var(--c-line, #ece7df);
}
.is-style-step-list li:last-child, .step-list li:last-child { padding-bottom: 0; }

/* ============================================================
   5. 表（テーブルブロックの「スタイル」から適用）
   ============================================================ */
/* .post-body       … 公開ページ
   #tinymce         … クラシックエディターのビジュアル画面
   .editor-styles-wrapper … ブロックエディター
   .kt-deco-wrap    … 管理画面の「装飾の見本」 */
.wp-block-table table,
.post-body table,
#tinymce table,
.editor-styles-wrapper table,
.kt-deco-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: .92rem;
  background: #fff;
}
#tinymce table, .kt-deco-wrap table { margin: 24px 0; }
.wp-block-table { margin: 24px 0; overflow-x: auto; }
.wp-block-table th, .wp-block-table td,
.post-body th, .post-body td,
#tinymce th, #tinymce td,
.editor-styles-wrapper th, .editor-styles-wrapper td,
.kt-deco-wrap th, .kt-deco-wrap td {
  border: 1px solid var(--c-line, #ece7df);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.wp-block-table th, .post-body th,
#tinymce th, .editor-styles-wrapper th, .kt-deco-wrap th {
  background: var(--c-bg, #fbf8f3);
  font-weight: 700;
}
.wp-block-table tbody tr:nth-child(even) td,
.post-body tbody tr:nth-child(even) td,
#tinymce tbody tr:nth-child(even) td,
.kt-deco-wrap tbody tr:nth-child(even) td { background: #fdfbf8; }
.wp-block-table figcaption { margin-top: 8px; }

/* 比較表：1列目を見出しとして色分け */
.is-style-kt-table-comp tbody th,
.is-style-kt-table-comp tbody td:first-child {
  background: var(--c-bg, #fbf8f3);
  font-weight: 700;
  white-space: nowrap;
}
.is-style-kt-table-comp thead th {
  background: var(--c-accent, #e8845c);
  color: #fff;
  text-align: center;
}
.is-style-kt-table-comp td { text-align: center; }
.is-style-kt-table-comp td:first-child { text-align: left; }

/* コンパクト表 */
.is-style-kt-table-slim table,
table.is-style-kt-table-slim { font-size: .84rem; }
.is-style-kt-table-slim th, .is-style-kt-table-slim td { padding: 6px 10px; }

/* スマホで横スクロールさせる（列が多い表向け） */
.is-style-kt-table-scroll,
.kt-scroll-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.is-style-kt-table-scroll table,
.kt-scroll-table table { min-width: 620px; margin: 0; }

/* ============================================================
   6. 見出し（見出しブロックの「スタイル」から適用）
   ============================================================ */
.is-style-head-fill {
  background: var(--c-bg, #fbf8f3);
  border-left: 6px solid var(--c-accent, #e8845c);
  border-radius: 0 10px 10px 0;
  padding: 12px 18px !important;
}
.is-style-head-fill::after { display: none !important; }

.is-style-head-border {
  border-left: 6px solid var(--c-sub, #6fa8a0);
  padding: 2px 0 2px 16px !important;
}
.is-style-head-border::after { display: none !important; }

.is-style-head-num {
  counter-increment: kt-head;
  position: relative;
  padding-left: 46px !important;
}
.is-style-head-num::after { display: none !important; }
.is-style-head-num::before {
  content: counter(kt-head);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-accent, #e8845c); color: #fff;
  font-size: .95rem; font-weight: 700;
  display: grid; place-items: center;
}

.is-style-head-plain { padding-bottom: 0 !important; }
.is-style-head-plain::after { display: none !important; }

/* ============================================================
   7. 画像・引用・ボタン・区切り線
   ============================================================ */
.is-style-img-round img,  img.is-style-img-round  { border-radius: 18px; }
.is-style-img-frame img,  img.is-style-img-frame  { border: 6px solid #fff; box-shadow: 0 0 0 1px var(--c-line, #ece7df); border-radius: 6px; }
.is-style-img-shadow img, img.is-style-img-shadow { border-radius: 14px; box-shadow: 0 10px 28px rgba(80, 66, 48, .18); }
.is-style-img-circle img, img.is-style-img-circle { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

.is-style-quote-voice {
  position: relative;
  background: var(--c-bg, #fbf8f3);
  border: none !important;
  border-radius: 14px;
  padding: 26px 24px 20px 56px !important;
  margin: 24px 0;
}
.is-style-quote-voice::before {
  content: "💬";
  position: absolute; left: 18px; top: 20px;
  font-size: 22px;
}
.is-style-quote-voice cite { color: var(--c-ink-soft, #756e64); font-size: .84rem; }

.is-style-quote-plain {
  background: none !important;
  border-left: 3px solid var(--c-line, #ece7df) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 20px !important;
  color: var(--c-ink-soft, #756e64);
}

.is-style-btn-big .wp-block-button__link,
.wp-block-button.is-style-btn-big .wp-block-button__link {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 18px 44px;
  border-radius: 999px;
}
.is-style-btn-outline .wp-block-button__link,
.wp-block-button.is-style-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--c-accent-d, #d06b44);
  border: 2px solid var(--c-accent, #e8845c);
  border-radius: 999px;
}

.is-style-sep-dot {
  border: none !important;
  border-top: 3px dotted var(--c-line, #ece7df) !important;
  background: none !important;
  height: 0 !important;
  max-width: 220px;
  margin: 40px auto !important;
}
.is-style-sep-wave {
  border: none !important;
  background: none !important;
  height: 12px !important;
  max-width: 220px;
  margin: 40px auto !important;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 24px);
  background-color: var(--c-line, #ece7df) !important;
}