/* --- Highlighting Code Block プラグインの黒背景テーマ --- */


/* コード表示エリア (pre タグ) */
div.hcb_wrap pre.prism {
    background-color: #282c34;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 15px;
    margin: 0;
    line-height: 1.7; /* 行の高さ */
}

/* コードの文字 (code タグ) */
div.hcb_wrap pre.prism code {
    color: #abb2bf; /* 文字色 (明るいグレー) */
    background: none !important;
    text-shadow: none; /* 影を消す */
}

/* 行番号のスタイル */
div.hcb_wrap pre.prism.line-numbers .line-numbers-rows {
    border-right: 1px solid #4a4a4a; /* 行番号の右の線 */
    opacity: 0.7;
}
div.hcb_wrap pre.prism .line-numbers-rows > span:before {
    color: #6c737c; /* 行番号の文字色 */
}

/*
 * 'bash' (または 'sh', 'shell') の行番号を
 * 強制的に '$ ' 記号に置き換える
 */
pre.language-bash.line-numbers .line-numbers-rows > span::before,
pre.language-sh.line-numbers .line-numbers-rows > span::before,
pre.language-shell.line-numbers .line-numbers-rows > span::before {
    content: '$ '; /* 表示する記号 */
    
    /* 見た目の調整 (任意) */
    color: #888; /* 記号の色 (文字色と変える場合) */
    padding-right: 0.8em; /* 記号とコードの間の余白 */
    width: auto; /* 幅を自動調整 */
    text-align: left; /* 左揃え */
}

/* 構文ハイライトの色 (一部) - お好みで調整 */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6c737c; /* コメントアウトの色 */
}
.token.punctuation {
    color: #abb2bf; /* 記号の色 */
}
.token.operator,
.token.url {
    color: #56b6c2; /* 演算子など */
}
.token.string {
    color: #98c379; /* 文字列 */
}

/* --- コピーボタンのスタイル調整 --- */
div.hcb_wrap button.hcb-clipboard {
    background-color: #444c56; /* ボタンの背景色 */
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 6px 10px;
    top: 3px;   /* 上からの位置 */
    right: 10px; /* 右からの位置 */
    opacity: 0.8;
}

/* ボタンにマウスを乗せた時 */
div.hcb_wrap button.hcb-clipboard:hover {
    background-color: #525b67;
    opacity: 1;
}


/*
 * ============================================
 * フォントとテキスト色のカスタマイズ
 * ============================================
 */

/* --- 1. 見やすいフォントを指定する (全体) --- */
/* フロント(公開画面)の pre, code タグ */
div.hcb_wrap pre.prism,
div.hcb_wrap pre.prism code[class*="language-"] {
    /*
     * 等幅フォントを指定
     * (左から優先的に読み込まれます)
     * Menlo, Monaco (Mac) / Consolas (Win) / 汎用
     */
    font-family: Menlo, Consolas, Monaco, 'Courier New', monospace;

    /* お好みでフォントサイズを微調整 */
    font-size: 1.1em; /* (例: 1em, 15px, 1rem など) */
}

/* エディタ(編集画面)の textarea */
.editor-styles-wrapper div.hcb_wrap .hcb_textarea {
    font-family: Menlo, Consolas, Monaco, 'Courier New', monospace !important;
    font-size: 1.1em !important;
}


/* --- 2. テキストの色を設定する (Bash用) --- */

/* デフォルトの文字色 (変更不要ならこのブロックは削除OK) */
div.hcb_wrap pre.prism code.language-bash {
    color: #abb2bf; /* 明るいグレー */
}

/* "ls" などのコマンド (token.function) */
div.hcb_wrap pre.prism code.language-bash .token.function {
    color: #61afef; /* 例: 明るい青色 */
}

/* オプション (-l, -a など) (token.option) */
div.hcb_wrap pre.prism code.language-bash .token.option {
    color: #d19a66; /* 例: オレンジ系 */
}

/* 文字列 ("hello" など) (token.string) */
div.hcb_wrap pre.prism code.language-bash .token.string {
    color: #98c379; /* 例: 緑色 */
}

/* 変数 ($PATH など) (token.variable) */
div.hcb_wrap pre.prism code.language-bash .token.variable {
    color: #c678dd; /* 例: 紫色 */
}