/**
 * Markdown表示用スタイル
 * GitHub風のスタイルを基本とする
 *
 * @since 2025.10.21 Markdown対応
 * @copyright Kodama & Company, Inc.
 */

.markdown-content {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	font-size: 16px;
	line-height: 1.6;
	color: #24292e;
	background-color: #ffffff;
	padding: 20px;
	word-wrap: break-word;
}

/* ========================================
   見出し
   ======================================== */

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
	margin-top: 24px;
	margin-bottom: 16px;
	font-weight: 600;
	line-height: 1.25;
}

.markdown-content h1 {
	font-size: 2em;
	border-bottom: 1px solid #eaecef;
	padding-bottom: 0.3em;
}

.markdown-content h2 {
	font-size: 1.5em;
	border-bottom: 1px solid #eaecef;
	padding-bottom: 0.3em;
}

.markdown-content h3 {
	font-size: 1.25em;
}

.markdown-content h4 {
	font-size: 1em;
}

.markdown-content h5 {
	font-size: 0.875em;
}

.markdown-content h6 {
	font-size: 0.85em;
	color: #6a737d;
}

/* ========================================
   段落とテキスト
   ======================================== */

.markdown-content p {
	margin-top: 0;
	margin-bottom: 16px;
}

.markdown-content strong {
	font-weight: 600;
}

.markdown-content em {
	font-style: italic;
}

.markdown-content del {
	text-decoration: line-through;
}

/* ========================================
   リスト
   ======================================== */

.markdown-content ul,
.markdown-content ol {
	padding-left: 2em;
	margin-top: 0;
	margin-bottom: 16px;
}

.markdown-content li {
	margin-top: 0.25em;
}

.markdown-content li > p {
	margin-top: 16px;
}

.markdown-content li + li {
	margin-top: 0.25em;
}

.markdown-content ul ul,
.markdown-content ul ol,
.markdown-content ol ol,
.markdown-content ol ul {
	margin-top: 0;
	margin-bottom: 0;
}

/* タスクリスト（将来対応） */
.markdown-content .task-list-item {
	list-style-type: none;
}

.markdown-content .task-list-item input {
	margin: 0 0.2em 0.25em -1.6em;
	vertical-align: middle;
}

/* ========================================
   コードブロック
   ======================================== */

.markdown-content code {
	padding: 0.2em 0.4em;
	margin: 0;
	font-size: 85%;
	background-color: rgba(27, 31, 35, 0.05);
	border-radius: 3px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Courier New', monospace;
}

.markdown-content pre {
	padding: 16px;
	overflow: auto;
	font-size: 85%;
	line-height: 1.45;
	background-color: #f6f8fa;
	border-radius: 6px;
	margin-top: 0;
	margin-bottom: 16px;
}

.markdown-content pre code {
	display: inline;
	max-width: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	line-height: inherit;
	word-wrap: normal;
	background-color: transparent;
	border: 0;
}

/* highlight.js のテーマカスタマイズ */
.markdown-content pre code.hljs {
	background-color: transparent;
}

/* ========================================
   引用
   ======================================== */

.markdown-content blockquote {
	padding: 0 1em;
	color: #6a737d;
	border-left: 0.25em solid #dfe2e5;
	margin-top: 0;
	margin-bottom: 16px;
}

.markdown-content blockquote > :first-child {
	margin-top: 0;
}

.markdown-content blockquote > :last-child {
	margin-bottom: 0;
}

/* ========================================
   リンク
   ======================================== */

.markdown-content a {
	color: #0366d6;
	text-decoration: none;
}

.markdown-content a:hover {
	text-decoration: underline;
}

.markdown-content a:visited {
	color: #0366d6;
}

/* ========================================
   テーブル
   ======================================== */

.markdown-content table {
	border-spacing: 0;
	border-collapse: collapse;
	display: block;
	width: max-content;
	max-width: 100%;
	overflow: auto;
	margin-top: 0;
	margin-bottom: 16px;
}

.markdown-content table th {
	font-weight: 600;
	background-color: #f6f8fa;
}

.markdown-content table th,
.markdown-content table td {
	padding: 6px 13px;
	border: 1px solid #dfe2e5;
}

.markdown-content table tr {
	background-color: #ffffff;
	border-top: 1px solid #c6cbd1;
}

.markdown-content table tr:nth-child(2n) {
	background-color: #f6f8fa;
}

/* ========================================
   画像
   ======================================== */

.markdown-content img {
	max-width: 100%;
	height: auto;
	box-sizing: content-box;
	background-color: #ffffff;
	border-radius: 6px;
	margin: 16px 0;
}

/* ========================================
   水平線
   ======================================== */

.markdown-content hr {
	height: 0.25em;
	padding: 0;
	margin: 24px 0;
	background-color: #e1e4e8;
	border: 0;
}

/* ========================================
   その他
   ======================================== */

/* キーボード入力表示（将来対応） */
.markdown-content kbd {
	display: inline-block;
	padding: 3px 5px;
	font-size: 11px;
	line-height: 10px;
	color: #444d56;
	vertical-align: middle;
	background-color: #fafbfc;
	border: solid 1px #c6cbd1;
	border-bottom-color: #959da5;
	border-radius: 3px;
	box-shadow: inset 0 -1px 0 #959da5;
}

/* 詳細/要約（details/summary）（将来対応） */
.markdown-content details {
	display: block;
}

.markdown-content summary {
	display: list-item;
	cursor: pointer;
}

/* ========================================
   EasyMDE エディタ統合用スタイル
   ======================================== */

/* EasyMDE エディタのツールバー調整 */
.EasyMDEContainer .CodeMirror {
	min-height: 400px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Courier New', monospace;
	font-size: 14px;
}

.EasyMDEContainer .CodeMirror-scroll {
	min-height: 400px;
}

/* CodeMirror内のMarkdownヘッダースタイル（編集中） */
.CodeMirror .cm-header-1 {
	font-size: 1.6em;
	font-weight: bold;
}

.CodeMirror .cm-header-2 {
	font-size: 1.4em;
	font-weight: bold;
}

.CodeMirror .cm-header-3 {
	font-size: 1.2em;
	font-weight: bold;
}

.CodeMirror .cm-header-4 {
	font-size: 1.1em;
	font-weight: bold;
}

.CodeMirror .cm-header-5 {
	font-size: 1em;
	font-weight: bold;
}

.CodeMirror .cm-header-6 {
	font-size: 0.9em;
	font-weight: bold;
	color: #6a737d;
}

/* プレビュー領域 */
.editor-preview,
.editor-preview-side {
	padding: 20px;
	background: #fafbfc;
}

.editor-preview pre,
.editor-preview-side pre {
	background: #ffffff;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

@media (max-width: 768px) {
	.markdown-content {
		padding: 10px;
		font-size: 14px;
	}

	.markdown-content h1 {
		font-size: 1.75em;
	}

	.markdown-content h2 {
		font-size: 1.5em;
	}

	.markdown-content table {
		display: block;
		overflow-x: auto;
	}
}