.markdown-content {
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	color: #353535;
	background: #f9f8f6;
	line-height: 1.9;
	padding: 3rem 2rem 2rem 2rem;
	max-width: 900px;
	margin: 40px auto 0 auto;
	box-sizing: border-box;
	font-size: 18px;
	border-radius: 22px;
	box-shadow: 0 4px 36px 0 rgba(60,60,100,0.09);
}

/* 主標題 h1 */
.markdown-content h1 {
	color: #50321e;
	font-weight: 800;
	font-size: 2.1em;
	border-bottom: 4px solid #e9dacb;
	padding-bottom: 0.4em;
	margin: 2rem 0 1.2rem;
	letter-spacing: 0.01em;
	line-height: 1.2;
	border-radius: 0;
}

/* h2 分區標題 */
.markdown-content h2 {
	color: #87674e;
	font-weight: 700;
	font-size: 1.45em;
	border-left: 6px solid #e9dacb;
	background: #f6f3ee;
	padding: 0.48em 1em;
	margin: 2rem 0 1.2rem -1rem;
	border-radius: 0 16px 16px 0;
	line-height: 1.4;
	box-shadow: 0 2px 14px 0 rgba(100,90,50,0.05);
}

/* h3 小標題 */
.markdown-content h3 {
	color: #836555;
	font-weight: 700;
	font-size: 1.15em;
	padding-left: 0.3em;
	border-left: 3px solid #e4cfc3;
	margin: 1.2rem 0 1rem 0;
	line-height: 1.2;
	background: #fcf7f2;
	border-radius: 8px;
}

/* FAQ 問答樣式卡片 */
.markdown-content .faq {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 16px 0 rgba(160,110,80,0.10);
	margin: 2rem 0 2.2rem 0;
	padding: 1.4rem 1.7rem 1.2rem 1.7rem;
	border-left: 6px solid #b9935a;
}

.markdown-content .faq-q {
	font-size: 1.09em;
	font-weight: 700;
	color: #82541d;
	margin-bottom: .4em;
	display: flex;
	align-items: flex-start;
}
.markdown-content .faq-q::before {
	content: "Q";
	font-family: 'Segoe UI', 'Noto Sans TC', Arial, sans-serif;
	font-weight: 900;
	background: linear-gradient(135deg,#ffc968 60%,#efd179 100%);
	color: #fff;
	border-radius: 50%;
	width: 1.7em;
	height: 1.7em;
	text-align: center;
	margin-right: 0.8em;
	box-shadow: 0 2px 6px 0 rgba(240,180,70,0.06);
	line-height: 1.7em;
	font-size: 1.03em;
	display: inline-block;
}
.markdown-content .faq-a {
	font-size: 1em;
	margin-bottom: .6em;
	color: #3e3227;
	display: flex;
	align-items: flex-start;
}
.markdown-content .faq-a::before {
	content: "A";
	font-family: 'Segoe UI', 'Noto Sans TC', Arial, sans-serif;
	font-weight: 900;
	background: #ece5d9;
	color: #ba9a7d;
	border-radius: 50%;
	width: 1.6em;
	height: 1.6em;
	text-align: center;
	margin-right: 0.7em;
	line-height: 1.6em;
	font-size: 1em;
	display: inline-block;
}

/* 提示與注意區塊（可用於重要說明） */
.markdown-content .callout, .markdown-content .tip, .markdown-content .notice {
	background: linear-gradient(90deg,#fff3db 60%,#f9f2e8 100%);
	border-left: 5px solid #ffcc66;
	color: #6b4d13;
	padding: 1em 1.3em 1em 1.3em;
	border-radius: 11px;
	margin: 1.4rem 0 1.4rem 0;
	font-weight: 500;
	box-shadow: 0 2px 14px 0 rgba(240,180,70,0.03);
}

/* 行動裝置自動調整 */
@media (max-width: 600px) {
	.markdown-content {
		padding: 1rem !important;
		font-size: 16px;
		border-radius: 0;
		margin: 0;
	}
	.markdown-content h1 {
		font-size: 1.4em;
	}
	.markdown-content h2 {
		font-size: 1.18em;
		margin-left: -0.5rem;
	}
	.markdown-content h3 {
		font-size: 1.07em;
	}
	.markdown-content .faq {
		padding: 1em 0.7em 1em 1em;
	}
}

/* 表格與段落細節再優化 */
.markdown-content table {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px 0 rgba(140,120,80,0.04);
	margin: 1.3rem 0 1.8rem 0;
	font-size: 0.98em;
}
.markdown-content th, .markdown-content td {
	border-bottom: 1px solid #f4ecd6;
	padding: 0.75em 1em;
	text-align: left;
}
.markdown-content th {
	background: #f9efd8;
	color: #7a5220;
	font-weight: bold;
}

/* blockquote 再加強 */
.markdown-content blockquote {
	border-left: 5px solid #e9dacb;
	background: #faf6f0;
	color: #825e35;
	padding: 1em 1.5em;
	margin: 1.6rem 0 1.6rem 0;
	font-style: italic;
	border-radius: 9px;
}
.markdown-content .breadcrumb {
	background: #f4efea;
	border-radius: 15px;
	box-shadow: 0 2px 8px 0 rgba(200,160,110,0.05);
	padding: 0.8em 1.5em;
	margin-bottom: 2.3em;
	list-style: none;
	display: flex;
	align-items: center;
	font-size: 1.03em;
	gap: 0.5em;
	border: 1px solid #eee3d2;
	overflow-x: auto;
}

.markdown-content .breadcrumb-item {
	color: #ad7a64;
	font-weight: 500;
	position: relative;
	transition: color 0.14s;
	padding-right: 0.5em;
	padding-left: 0.3em;
}

.markdown-content .breadcrumb-item + .breadcrumb-item::before {
	content: "›";
	color: #bba992;
	font-size: 1em;
	margin: 0 0.25em;
	font-weight: 600;
	position: relative;
	top: -1px;
	opacity: 0.85;
}

.markdown-content .breadcrumb-item a {
	color: #ad7a64;
	text-decoration: none;
	transition: color 0.15s;
	font-weight: 600;
	border-radius: 7px;
	padding: 2px 6px;
	position: relative;
	z-index: 1;
}

.markdown-content .breadcrumb-item a:hover,
.markdown-content .breadcrumb-item a:focus {
	color: #fff;
	background: linear-gradient(90deg,#ffde96 70%,#ffc65a 100%);
	text-decoration: none;
	box-shadow: 0 2px 6px 0 rgba(240,200,110,0.07);
}

.markdown-content .breadcrumb-item.active,
.markdown-content .breadcrumb-item.active a {
	color: #9b7d58 !important;
	font-weight: bold;
	background: none;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 700px) {
	.markdown-content .breadcrumb {
		font-size: 0.98em;
		padding: 0.7em 0.5em 0.7em 0.8em;
		border-radius: 12px;
		flex-wrap: wrap;
		gap: 0.1em;
		white-space: normal;
		/* 讓內容自動換行 */
	}

	.markdown-content .breadcrumb-item {
		padding-right: 0.25em;
		padding-left: 0.08em;
		min-width: 0;
		white-space: nowrap;
		/* 讓每個 item 不會被硬拆，但整體會自動流動 */
	}
	.markdown-content .breadcrumb-item a,
	.markdown-content .breadcrumb-item {
		font-size: 1em;
		padding: 2px 4px;
		max-width: 95vw;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
	}
	.markdown-content .breadcrumb-item.active {
		font-weight: bold;
		color: #ab8959 !important;
		background: none;
	}
	.markdown-content .breadcrumb-item + .breadcrumb-item::before {
		margin: 0 0.18em;
		font-size: 1em;
		top: -0.5px;
	}
	/* 可選：讓麵包屑可左右滑動，不會太擠爆行 */
	.markdown-content .breadcrumb {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}

/* 按鈕風格（如有） */
.markdown-content .btn, .markdown-content button {
	background: linear-gradient(90deg,#ffe3ad,#ffc86d 80%);
	color: #6b4d13;
	font-weight: bold;
	padding: 0.55em 1.2em;
	border: none;
	border-radius: 9px;
	cursor: pointer;
	box-shadow: 0 2px 6px 0 rgba(255,200,110,0.07);
	transition: background 0.2s, color 0.2s;
}
.markdown-content .btn:hover, .markdown-content button:hover {
	background: linear-gradient(90deg,#ffc968 40%,#ffd889 100%);
	color: #4b340b;
}

/* 醒目連結 */
.markdown-content a {
	color: #ad7a64;
	text-decoration: none;
}
.markdown-content a:hover {
	color: #ae740c;
	text-decoration: underline solid #ffc24b 2px;
}
.markdown-content pre,
.markdown-content code {
	font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'Menlo', 'monospace';
}

/* 單行 code（如 `xxx` ） */
.markdown-content code {
	background: linear-gradient(90deg,#f5efe6 70%,#f8e6c7 100%);
	color: #a97e41;
	padding: 0.3em 0.6em;
	border-radius: 5px;
	font-size: 0.98em;
	font-weight: 600;
	border: 1px solid #f2e4d1;
	box-shadow: 0 2px 6px 0 rgba(205,170,120,0.05);
	margin: 0 2px;
}
/* 全域 code 字型優化：選用最易讀的字型與抗鋸齒 */
.markdown-content pre,
.markdown-content code {
	font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'Menlo', 'monospace';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-ligatures: none;
}

/* 行內 code */
.markdown-content code {
	background: linear-gradient(90deg,#f7f3e9 70%,#faecc9 100%);
	color: #8c6720;
	padding: 0.28em 0.54em 0.32em 0.54em;
	border-radius: 6px;
	font-size: 0.98em;
	font-weight: 600;
	border: 1px solid #f3e7ce;
	box-shadow: 0 1px 4px 0 rgba(205,170,120,0.06);
	margin: 0 3px;
	line-height: 1.92;
	letter-spacing: 0.03em;
	word-break: break-word;
	/* 讓行內 code 不會被 pre code 樣式覆蓋 */
	display: inline;
}

/* 多行區塊 code */
.markdown-content pre {
	background: linear-gradient(100deg,#fffcf7 65%,#f7dfb2 120%);
	color: #524533;
	border-radius: 16px;
	padding: 1.4em 1.5em 1.2em 1.3em;
	margin: 2.2rem 0 2.2rem 0;
	box-shadow: 0 4px 28px 0 rgba(190,170,120,0.12);
	border: 1.5px solid #ecdcbf;
	overflow-x: auto;
	font-size: 1.07em;
	line-height: 1.93;
	word-break: break-word;
	font-weight: 550;
	transition: background 0.28s;
	letter-spacing: 0.012em;
	white-space: pre;
	tab-size: 4;
}

/* 讓多行 code 裡的 code 元素維持原色 */
.markdown-content pre code {
	background: none;
	color: #a97e41;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
	box-shadow: none;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: inherit;
}

/* 捲軸美化（適用 Chrome/Edge/Safari） */
.markdown-content pre::-webkit-scrollbar {
	height: 11px;
	background: #f7ecd9;
	border-radius: 10px;
}
.markdown-content pre::-webkit-scrollbar-thumb {
	background: #e9dacb;
	border-radius: 10px;
}

/* FireFox 捲軸優化 */
.markdown-content pre {
	scrollbar-width: thin;
	scrollbar-color: #e9dacb #f7ecd9;
}

/* 行號可選，註解掉：需要時打開
.markdown-content pre {
  counter-reset: line;
}
.markdown-content pre code {
  display: block;
}
.markdown-content pre code:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  color: #c1b18a;
  text-align: right;
  user-select: none;
  opacity: 0.7;
}
*/

/* 小螢幕自動縮排和適配 */
@media (max-width: 700px) {
	.markdown-content pre {
		padding: 0.72em 0.5em;
		font-size: 0.97em;
		border-radius: 9px;
		margin: 1.4em 0;
		line-height: 1.85;
	}
	.markdown-content code {
		font-size: 0.94em;
		padding: 0.19em 0.41em;
		line-height: 1.84;
	}
}
.markdown-content img {
	max-width: 1920px;  /* 限制最大寬度 */
	width: 100%;        /* 圖片寬度依父元素寬度調整 */
	height: auto;       /* 保持圖片比例 */
	background: #E9DACB;
	padding: 1rem 1rem 1rem 1rem;
	box-sizing: border-box; /* 防止 padding 使圖片超出預期寬度 */
}