/* 媽媽日記:六段故事的捲動進度指示 bar
   設計稿(20260416 影片 3~17 秒):畫面左側一條固定的灰色軌道,
   內含一段橘色 thumb,隨捲動由上往下移動。
   只在六段故事區(gsbp-4eeb56e ~ gsbp-6a1ad3f)顯示,
   頁首 banner 與最後一段之後都不出現。 */

.cyan-story-progress {
	position: fixed;
	/* left 由 JS 依實際版心左緣換算(留白的約 1/3 處),三個斷點通用 */
	left: 16px;
	/* 在「header 以下的可視區」垂直置中:
	   --cyan-header 由 JS 量測固定頁首高度後填入(預設 80px)。 */
	top: calc(var(--cyan-header, 80px) + (100vh - var(--cyan-header, 80px)) / 2);
	transform: translateY(-50%);
	width: 6px;
	height: calc((100vh - var(--cyan-header, 80px)) * 0.74);
	border-radius: 3px;
	background: #a3a7a8;
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

.cyan-story-progress.is-active {
	opacity: 1;
	visibility: visible;
}

.cyan-story-progress__thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 11.5%;
	border-radius: 3px;
	background: var(--theme-palette-color-1, #edae5c);
	transform: translateY(0);
	will-change: transform;
}

/* 平板:版心左側留白只剩 38~50px,軌道收細一點才不會顯得笨重 */
@media (max-width: 999.98px) {
	.cyan-story-progress {
		width: 5px;
		border-radius: 2.5px;
		height: calc((100vh - var(--cyan-header, 70px)) * 0.72);
	}

	.cyan-story-progress__thumb {
		border-radius: 2.5px;
	}
}

/* 手機:留白只有 23px 左右,再收細 */
@media (max-width: 689.98px) {
	.cyan-story-progress {
		width: 4px;
		border-radius: 2px;
		height: calc((100vh - var(--cyan-header, 64px)) * 0.68);
	}

	.cyan-story-progress__thumb {
		border-radius: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cyan-story-progress {
		transition: none;
	}
}

/* 舊版做法:六段故事的文字方塊各自帶一條 3px 橘色邊框(左右交錯)。
   改為統一的捲動進度 bar 後移除,並把該側 padding 歸零讓文字與圖片切齊。 */
.gsbp-6fe8bb0d64d1,
.gsbp-ee24e9df6795b8,
.gsbp-08aeca69825478 {
	border-left-width: 0 !important;
	padding-left: 0 !important;
}

.gsbp-8637e3dba1825,
.gsbp-8d16e5e4448f7,
.gsbp-15bec25fbbd1e {
	border-right-width: 0 !important;
	padding-right: 0 !important;
}