/* 顏色與尺寸可改 */
.yb-timeline{
	--accent: #68b7c2;
	/* 點與箭頭色 */
	--line: rgba(255,255,255,.7);
	/* 垂直線色：深色背景用。淺色背景可改成 rgba(0,0,0,.2) */
	--time-col: 56px;
	/* 左側時間欄寬 */
	--rail-col: 20px;
	/* 中間軌道欄寬 */
	--row-gap: 16px;
	/* 每個項目之間的垂直間距 */
	color: #fff;
	/* 深色背景示例 */
	background: #000;
	/* 深色背景示例（若用在白底頁面請移除這行與上一行） */
	padding: 12px 16px;
	border-radius: 8px;
	display: grid;
	row-gap: var(--row-gap);
}
/* 標題 */
.yb-tl-head{
	display: inline-block;
	padding: 4px 10px;
	background: var(--accent);
	color: #fff;
	border-radius: 4px;
	margin-bottom: 4px;
	font-weight: 600;
}
/* 單一列：時間 / 軌道 / 內容 */
.yb-tl-item{
	display: grid;
	grid-template-columns: var(--time-col) var(--rail-col) 1fr;
	align-items: start;
	column-gap: 8px;
	position: relative;
}
/* 中間的軌道欄位，用偽元素畫「往下延伸」的垂直線 */
.yb-tl-rail{
	position: relative;
}
.yb-tl-item:not(:last-child) .yb-tl-rail::after{
	content:"";
	position: absolute;
	left: calc(var(--rail-col) / 2 - 1px);
	/* 線置中 */
	top: 14px;
	/* 從圓點下方開始 */
	bottom: calc(-1 * var(--row-gap));
	/* 延伸到下一列的上方，跨過間距 */
	width: 2px;
	background: var(--line);
}
/* 上方圓點 */
.yb-tl-dot{
	position: absolute;
	top: 6px;
	left: calc(var(--rail-col) / 2 - 5px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent);
}
/* 末端箭頭（朝下） */
.yb-tl-arrow{
	position: absolute;
	top: 8px;
	left: calc(var(--rail-col) / 2 - 6px);
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
}
/* 文字樣式（可依網站調整） */
.yb-tl-time{
	opacity:.85;
}
.yb-tl-title{
	margin-bottom: 2px;
}
.yb-tl-sub{
	font-size: .9em;
	opacity:.8;
	line-height: 1.4;
}