@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");

/*
 * Shared article content CSS for tcmsearch.com.tw.
 * Loaded in TinyMCE (body.tcm-editor-content) and on the frontend
 * (.blogDetail-box .editor) so the classic editor matches the article box.
 */

body.tcm-editor-content,
.blogDetail-box .editor {
	--color-purple: #9170dd;
	--color-pink: #fc5c7d;
	--color-black: #282828;
	--color-dark-pink: #c94a6a;
}

body.tcm-editor-content {
	font-family: "Noto Sans TC", sans-serif;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1.85;
	color: #282828;
	background-color: #f8f8f8;
	padding: 16px 20px;
	max-width: 100%;
}

body.tcm-editor-content p,
body.tcm-editor-content h1,
body.tcm-editor-content h2,
body.tcm-editor-content h3,
body.tcm-editor-content h4,
body.tcm-editor-content h5,
body.tcm-editor-content h6 {
	margin: 0;
}

body.tcm-editor-content h1 {
	font-size: 28px;
	color: var(--color-purple);
}

body.tcm-editor-content h2 {
	margin-top: 10px;
	font-size: 20px;
}

body.tcm-editor-content h3 {
	font-size: 18px;
	font-weight: 400;
}

body.tcm-editor-content a,
body.tcm-editor-content p {
	font-size: 16px;
}

body.tcm-editor-content a {
	color: var(--color-pink);
	text-decoration: underline;
}

body.tcm-editor-content img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: inline-block;
}

body.tcm-editor-content figcaption {
	color: #fff;
	font-size: 14px;
	background-color: var(--color-black);
	padding: 15px 30px;
	margin-bottom: 5%;
}

body.tcm-editor-content blockquote {
	position: relative;
	color: var(--color-pink);
	padding: 0 3%;
	margin-top: 3%;
	font-size: 18px;
}

body.tcm-editor-content blockquote::before {
	position: absolute;
	content: "";
	background: var(--color-pink);
	width: 7px;
	height: 100%;
	top: 0;
	left: 0;
}

body.tcm-editor-content table {
	border-collapse: collapse;
	width: 100%;
}

body.tcm-editor-content tbody {
	border: 1px solid var(--color-pink);
}

body.tcm-editor-content th {
	border: 1px solid var(--color-pink);
	color: var(--color-dark-pink);
	height: 75px;
}

body.tcm-editor-content td {
	border: 1px solid var(--color-pink);
	color: var(--color-black);
	height: 50px;
	text-align: center;
	padding: 10px;
}

/*
 * Default unordered lists: hide the native marker and draw the brand pink
 * dot via ::before (same as BlogDetail custom CSS).
 * When TinyMCE sets list-style-type (disc / circle / square), drop the
 * ::before so only one marker shows.
 */
body.tcm-editor-content ul,
.blogDetail-box .editor ul {
	list-style: none;
}

body.tcm-editor-content ol,
.blogDetail-box .editor ol {
	margin-left: 15px;
}

body.tcm-editor-content li,
.blogDetail-box .editor li {
	list-style-position: outside;
	font-size: 16px;
	margin-left: 1em;
}

body.tcm-editor-content ul li::before,
.blogDetail-box .editor ul li::before {
	content: "•";
	color: var(--bullet-color, var(--color-pink)) !important;
	font-weight: bold;
	font-size: 20px;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

body.tcm-editor-content ul[style*="square"] > li::before,
body.tcm-editor-content ul[style*="circle"] > li::before,
body.tcm-editor-content ul[style*="disc"] > li::before,
body.tcm-editor-content li[style*="square"]::before,
body.tcm-editor-content li[style*="circle"]::before,
body.tcm-editor-content li[style*="disc"]::before,
.blogDetail-box .editor ul[style*="square"] > li::before,
.blogDetail-box .editor ul[style*="circle"] > li::before,
.blogDetail-box .editor ul[style*="disc"] > li::before,
.blogDetail-box .editor li[style*="square"]::before,
.blogDetail-box .editor li[style*="circle"]::before,
.blogDetail-box .editor li[style*="disc"]::before {
	content: none !important;
	display: none !important;
	width: 0;
	margin: 0;
}

body.tcm-editor-content ul[style*="square"],
body.tcm-editor-content ul[style*="circle"],
body.tcm-editor-content ul[style*="disc"],
.blogDetail-box .editor ul[style*="square"],
.blogDetail-box .editor ul[style*="circle"],
.blogDetail-box .editor ul[style*="disc"] {
	list-style-image: none;
}

body.tcm-editor-content ul[style*="square"] > li,
body.tcm-editor-content ul[style*="circle"] > li,
body.tcm-editor-content ul[style*="disc"] > li,
body.tcm-editor-content li[style*="square"],
body.tcm-editor-content li[style*="circle"],
body.tcm-editor-content li[style*="disc"],
.blogDetail-box .editor ul[style*="square"] > li,
.blogDetail-box .editor ul[style*="circle"] > li,
.blogDetail-box .editor ul[style*="disc"] > li,
.blogDetail-box .editor li[style*="square"],
.blogDetail-box .editor li[style*="circle"],
.blogDetail-box .editor li[style*="disc"] {
	list-style-position: outside;
}

body.tcm-editor-content ul li::marker,
.blogDetail-box .editor ul li::marker {
	color: var(--bullet-color, var(--color-pink)) !important;
	font-weight: bold;
}

li.tcm-bullet-pink {
	--bullet-color: #fc5c7d;
}

li.tcm-bullet-purple {
	--bullet-color: #9170dd;
}

li.tcm-bullet-blue {
	--bullet-color: #0000ff;
}

li.tcm-bullet-maroon {
	--bullet-color: #800000;
}

li.tcm-bullet-black {
	--bullet-color: #282828;
}