@charset "utf-8";

/* ==========================================
   Prism.js 専用カスタムスタイル
   ========================================== */

/* 1. コードブロック全体を囲む大枠の設定 */
pre[class*="language-"],
code[class*="language-"] {
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

pre[class*="language-"]{
    border-radius: 3px;
}

.my-code-block {
    background: #f5f2f0 !important; /* 背景色（黒系テーマなら #2d2d2d などに変更） */
    padding: 15px !important;
    border-radius: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. preとcodeの折り返し・文字前スペースの強制適用 */
.my-code-block pre,
.my-code-block code {
    white-space: pre-wrap !important;  /* ボックス内での自動折り返し（右改行）を強制 */
    word-break: break-all !important;  /* 英単語の途中でも綺麗に折り返す */
    background: transparent !important; /* preの二重背景を防止 */
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. 手打ち説明文（コメント用）のカラーバリエーション */
.my-code-block .c-blue   { color: #035188 !important; font-weight: bold; }
.my-code-block .c-purple { color: #cc99cd !important; font-weight: bold; }
.my-code-block .c-red    { color: #be3e5a !important; font-weight: bold; }