/* 芳喵｜文章目錄。長相照 Mr.TOC（灰框、01 02 編號），數值是對著 Mr.TOC 在瀏覽器實際算出來的樣子調的。 */

.fangcat-toc {
	margin: 40px auto;
	/* 框用內陰影畫，不佔空間，裡面的字才會跟 Mr.TOC 對在同一個位置。 */
	box-shadow: inset 0 0 0 4px rgba(17, 17, 17, 0.15);
	/* 擋住清單的下邊距跑出框外。 */
	padding-bottom: 0.1px;
	background: #fff;
	font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
}

.fangcat-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32px 28px 8px;
	color: #1a202c;
	font-family: "Noto Serif TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, serif;
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.8;
	list-style: none;
	cursor: pointer;
}

.fangcat-toc__title::-webkit-details-marker {
	display: none;
}

/* 右邊的「收合／展開」小按鈕。 */
.fangcat-toc__title::after {
	content: "收合";
	flex-shrink: 0;
	padding: 7px 10px;
	background: #f2f2f2;
	font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
}

.fangcat-toc:not([open]) .fangcat-toc__title {
	padding: 16px 28px;
}

.fangcat-toc:not([open]) .fangcat-toc__title::after {
	content: "展開";
}

.fangcat-toc ol,
.fangcat-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fangcat-toc li {
	position: relative;
	margin: 0;
	line-height: 1.55;
}

.fangcat-toc a {
	display: inline-block;
	color: #334155;
	text-decoration: none;
}

.fangcat-toc a:hover {
	text-decoration: underline;
}

/* 第一層：01、02 編號＋一條細直線。 */
.fangcat-toc .fangcat-toc__list {
	margin: 0 64px 40px;
	padding-left: 1.3em;
	counter-reset: fangcat-toc;
}

.fangcat-toc__list > li {
	padding-top: 16px;
	font-size: 0.95em;
	counter-increment: fangcat-toc;
}

.fangcat-toc__list > li::before {
	content: counter(fangcat-toc, decimal-leading-zero);
	position: absolute;
	top: 16px;
	left: -1.3em;
	color: #64748b;
	font-size: 1.05em;
}

.fangcat-toc__list > li::after {
	content: "";
	position: absolute;
	top: 18px;
	left: 12px;
	width: 1px;
	height: 17px;
	background: #64748b;
}

.fangcat-toc__list > li > a {
	padding-left: 1.65em;
}

/* 第二、三層：小圓點。 */
.fangcat-toc .fangcat-toc__list ul {
	padding: 4px 0 0.75em 2.55em;
}

.fangcat-toc__list ul li {
	padding-top: 6px;
	font-size: 0.9em;
}

.fangcat-toc__list ul li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: -1.15em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #94a3b8;
}

.fangcat-toc .fangcat-toc__list ul ul {
	padding: 0 0 0 1.1em;
}

.fangcat-toc__list ul ul li::before {
	top: 10px;
	width: 5px;
	height: 5px;
}

@media (min-width: 1024px) {
	.fangcat-toc__title {
		padding: 40px 64px 16px;
		font-size: 1.65em;
	}

	.fangcat-toc:not([open]) .fangcat-toc__title {
		padding: 20px 64px;
	}
}

/* 平板以上：收合鈕大一點、細線往下 1px（照 Mr.TOC 實際算出來的樣子）。 */
@media (min-width: 768px) {
	.fangcat-toc__title::after {
		padding: 8px 12px;
	}

	.fangcat-toc__list > li::after {
		top: 19px;
	}
}