/* Light theme styles */
.EasyMDEContainer.light-theme .CodeMirror {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.EasyMDEContainer.light-theme .editor-toolbar {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

.EasyMDEContainer.light-theme .editor-toolbar button {
    color: #000000 !important;
}

.EasyMDEContainer.light-theme .editor-toolbar button:hover {
    background-color: #f8f9fa !important;
}

.EasyMDEContainer.light-theme .editor-preview {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.EasyMDEContainer.light-theme .CodeMirror-cursor {
    border-left: 1px solid #000000 !important;
}

.EasyMDEContainer.light-theme .CodeMirror-selected {
    background: #e3f2fd !important;
}

/* Dark theme styles */
.EasyMDEContainer.dark-theme .CodeMirror {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
}

.EasyMDEContainer.dark-theme .editor-toolbar {
    background-color: #34495e !important;
    border-color: #4a5568 !important;
}

.EasyMDEContainer.dark-theme .editor-toolbar button {
    color: #ecf0f1 !important;
}

.EasyMDEContainer.dark-theme .editor-preview {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
}

/* Common styles */
.EasyMDEContainer .CodeMirror {
    border-radius: 4px;
}

.EasyMDEContainer .editor-toolbar button.active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* プレビュー画面の見出しスタイル */
.editor-preview h1::before,
.editor-preview-side h1::before {
    content: "第X章 ";
}

.editor-preview h2::before,
.editor-preview-side h2::before {
    content: "X.X. ";
}

.editor-preview h3::before,
.editor-preview-side h3::before {
    content: "X.X.X. ";
}

.editor-preview h4::before,
.editor-preview-side h4::before {
    content: "(X) ";
}

.editor-preview h5::before,
.editor-preview-side h5::before {
    content: "○ ";
}

/* プレビュー画面の見出しサイズ調整 */
.editor-preview h1,
.editor-preview-side h1 {
    font-size: 28px;
    line-height: 2.0;
}

.editor-preview h2,
.editor-preview-side h2 {
    font-size: 22px;
    line-height: 2.0;
}

.editor-preview h3,
.editor-preview-side h3 {
    font-size: 20px;
    line-height: 2.0;
}

.editor-preview h4,
.editor-preview-side h4 {
    font-size: 18px;
    line-height: 2.0;
}

.editor-preview h5,
.editor-preview-side h5 {
    font-size: 18px;
    line-height: 2.0;
}

/* プレビュー画面のダークモード対応 */
[data-bs-theme="dark"] .editor-preview,
[data-bs-theme="dark"] .editor-preview-side {
    background-color: var(--bs-dark) !important;
    color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .editor-preview pre,
[data-bs-theme="dark"] .editor-preview-side pre {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .editor-preview code,
[data-bs-theme="dark"] .editor-preview-side code {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-light) !important;
}