/* ===== 記事本文用の囲みボックス =====
 *
 * 編集画面（クラシックエディタ）のツールバー「書式」から選んで使う。
 * このファイルは表示側と編集画面の両方から読み込むため、
 * 書いたそのままの見た目を編集中にも確認できる。
 *
 * otoha-box       … カラーテーマ連動（選択中の配色に追従）
 * otoha-box-info  … 情報・補足（青）
 * otoha-box-warn  … 注意（黄）
 * otoha-box-alert … 警告（赤）
 * otoha-box-ok    … ポイント（緑）
 * otoha-box-plain … 色を使わないグレー
 *
 * 意味が固定されている4色は、どのカラーテーマでも共通にしている
 * （赤が「警告」であることは配色の好みで変えるべきではないため）。
 */

/* 編集画面では表示側のカラー変数が無いため、既定値を用意しておく
 * （実際の配色は編集画面側にも動的に流し込まれる） */
.otoha-box,
.otoha-box-info,
.otoha-box-warn,
.otoha-box-alert,
.otoha-box-ok,
.otoha-box-plain {
    border-radius: 8px;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.9;
    border-left: 4px solid;
}

.otoha-box > :first-child,
.otoha-box-info > :first-child,
.otoha-box-warn > :first-child,
.otoha-box-alert > :first-child,
.otoha-box-ok > :first-child,
.otoha-box-plain > :first-child { margin-top: 0; }

.otoha-box > :last-child,
.otoha-box-info > :last-child,
.otoha-box-warn > :last-child,
.otoha-box-alert > :last-child,
.otoha-box-ok > :last-child,
.otoha-box-plain > :last-child { margin-bottom: 0; }

/* カラーテーマ連動。カスタマイザーで配色を変えると自動的に追従する */
.otoha-box {
    background: color-mix(in srgb, var(--otoha-primary, #f0c30f) 14%, transparent);
    border-left-color: var(--otoha-primary, #f0c30f);
    color: var(--otoha-text, #1a1a1a);
}

.otoha-box-info {
    background: #eaf4fd;
    border-left-color: #2f80c4;
    color: #17415f;
}

.otoha-box-warn {
    background: #fdf6e3;
    border-left-color: #d99a06;
    color: #6b4c00;
}

.otoha-box-alert {
    background: #fdecec;
    border-left-color: #d63638;
    color: #7a1d1e;
}

.otoha-box-ok {
    background: #eaf7ee;
    border-left-color: #2e9e52;
    color: #1c5c31;
}

.otoha-box-plain {
    background: var(--otoha-bg2, #f7f7f9);
    border-left-color: var(--otoha-border, #e5e5ea);
    color: var(--otoha-text, #1a1a1a);
}

/* 囲みの中の見出しは、本文側の見出しデザインを引き継がず控えめにする */
.otoha-box h2, .otoha-box h3, .otoha-box h4,
.otoha-box-info h2, .otoha-box-info h3, .otoha-box-info h4,
.otoha-box-warn h2, .otoha-box-warn h3, .otoha-box-warn h4,
.otoha-box-alert h2, .otoha-box-alert h3, .otoha-box-alert h4,
.otoha-box-ok h2, .otoha-box-ok h3, .otoha-box-ok h4,
.otoha-box-plain h2, .otoha-box-plain h3, .otoha-box-plain h4 {
    font-size: 15px;
    margin: 0 0 8px;
    padding: 0;
    border: none;
    color: inherit;
}

/* 囲みの中のリンクは背景色に対して読める色にする */
.otoha-box a,
.otoha-box-info a,
.otoha-box-warn a,
.otoha-box-alert a,
.otoha-box-ok a { color: inherit; text-decoration: underline; }