/* =====================================================================
   ブログ記事本文 装飾CSS  (.blog-article-body 配下にスコープ)
   single-blog_post.php の the_content 出力エリア専用。
   サイト他要素には影響しないよう、すべて .blog-article-body 配下にネスト。
   竹の子トーン：ダークグリーン / ゴールド / 薄緑 / クリーム。
   絵文字不使用（アイコンは Lucide SVG または ::before の図形で描画）。
   ===================================================================== */

.blog-article-body {
    /* このスコープ専用のカラートークン */
    --ba-green: #2a5a2a;      /* 濃いめグリーン（見出し・強調） */
    --ba-green-base: #3a6b3a; /* ベースグリーン（既存 --green 相当） */
    --ba-gold: #c79a2e;       /* 文字に使える濃いめゴールド（クリーム/白で可読） */
    --ba-gold-bright: #f0d060;/* 明るいゴールド（濃緑背景のアクセント／バー） */
    --ba-mintbg: #deeede;     /* 薄緑（= --gp） */
    --ba-cream: #fdf6e3;      /* クリーム */
    --ba-ink: #2a2a2a;        /* 本文の濃いグレー */

    color: var(--ba-ink);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.9;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ── 1. 段落の基本 ── */
.blog-article-body p {
    margin: 0 0 1.6em;
    color: var(--ba-ink);
}
.blog-article-body > *:first-child { margin-top: 0; }
.blog-article-body > *:last-child  { margin-bottom: 0; }

/* ── 2. リード文 ── */
.blog-article-body .lead {
    font-size: 1.2em;
    line-height: 2;
    color: var(--ba-green);
    font-weight: 500;
    margin-bottom: 1.8em;
    padding-bottom: 0.2em;
}

/* ── 3. 見出し ── */
.blog-article-body h2 {
    position: relative;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--ba-green);
    line-height: 1.5;
    margin: 2.5em 0 0.8em;
    padding-left: 16px;
}
.blog-article-body h2::before {
    content: '';
    position: absolute;
    left: 0; top: 0.15em; bottom: 0.15em;
    width: 5px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--ba-gold-bright), var(--ba-green-base));
}
.blog-article-body h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.25em;
    font-weight: 700;
    color: var(--ba-green);
    line-height: 1.55;
    margin: 2em 0 0.7em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--ba-mintbg);
}

/* ── 4. 強調（太字＋色）── */
.blog-article-body strong { font-weight: 700; color: var(--ba-ink); }
.blog-article-body .em-green { font-weight: 700; color: var(--ba-green); }
.blog-article-body .em-gold  { font-weight: 700; color: var(--ba-gold); }

/* ── 5. マーカー（蛍光ペン風）── */
.blog-article-body mark,
.blog-article-body .marker,
.blog-article-body .marker-gold {
    background: linear-gradient(transparent 60%, rgba(240, 208, 96, 0.45) 60%);
    color: inherit;
    padding: 0 2px;
    font-weight: 500;
}
.blog-article-body .marker-green {
    background: linear-gradient(transparent 60%, rgba(58, 107, 58, 0.25) 60%);
    color: inherit;
    padding: 0 2px;
    font-weight: 500;
}

/* ── 6. ポイントボックス ── */
.blog-article-body .point-box {
    background: var(--ba-cream);
    border-left: 5px solid var(--ba-gold-bright);
    border-radius: 6px;
    padding: 20px 22px;
    margin: 1.8em 0;
}
.blog-article-body .point-box > *:first-child { margin-top: 0; }
.blog-article-body .point-box > *:last-child  { margin-bottom: 0; }
.blog-article-body .point-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ba-green);
    margin-bottom: 10px;
}
/* ポイントボックス見出しのアイコン（Lucide lightbulb を ::before で）。
   インラインSVGをデータURIで描画＝絵文字不使用。currentColor で緑に揃う。 */
.blog-article-body .point-box-title::before {
    content: '';
    flex: 0 0 auto;
    width: 18px; height: 18px;
    background-color: var(--ba-green);
    -webkit-mask: var(--ba-icon-bulb) no-repeat center / contain;
            mask: var(--ba-icon-bulb) no-repeat center / contain;
}

/* 通常の引用 */
.blog-article-body blockquote {
    border-left: 4px solid var(--ba-green-base);
    background: #f7faf7;
    color: #4a4a4a;
    font-style: italic;
    margin: 1.8em 0;
    padding: 14px 18px;
    border-radius: 0 4px 4px 0;
}
.blog-article-body blockquote p:last-child { margin-bottom: 0; }

/* ── 7. 箇条書き ── */
.blog-article-body ul,
.blog-article-body ol {
    margin: 0 0 1.6em;
    padding-left: 1.4em;
}
.blog-article-body li { margin-bottom: 0.5em; line-height: 1.85; }

/* チェックリスト（Lucide check を ::before のマスクで描画） */
.blog-article-body .check-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.6em;
}
.blog-article-body .check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 0.7em;
    line-height: 1.8;
}
.blog-article-body .check-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.28em;
    width: 20px; height: 20px;
    background-color: var(--ba-green-base);
    -webkit-mask: var(--ba-icon-check) no-repeat center / contain;
            mask: var(--ba-icon-check) no-repeat center / contain;
}

/* ── 8. その他 ── */
.blog-article-body a {
    color: var(--ba-green-base);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.blog-article-body a:hover { color: var(--ba-gold); }

.blog-article-body hr {
    border: 0;
    border-top: 1px solid var(--ba-mintbg);
    margin: 2.4em 0;
}

.blog-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1.6em 0;
    display: block;
}

/* ── アイコン定義（Lucide SVG を data URI 化。stroke=currentColor 相当を mask で着色）── */
.blog-article-body {
    --ba-icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
    --ba-icon-bulb: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>');
}

/* ── モバイル（360px 基準）── */
@media (max-width: 600px) {
    .blog-article-body { font-size: 16px; }
    .blog-article-body h2 { font-size: 1.35em; }
    .blog-article-body h3 { font-size: 1.18em; }
    .blog-article-body .lead { font-size: 1.12em; }
    .blog-article-body .point-box { padding: 16px 16px; }
}