/* 中文九歌・課程分類總覽 — 圓潤糖果系（可愛 / 白底 / 粉彩）
   配色全為 .c9scc 上的 CSS 變數，易於微調。 */

.c9scc {
	--ink: #3a4750;
	--ink-soft: #8a979d;
	--jade: #10b89c;
	--jade-deep: #0a8f7c;
	--line: #eef1ef;
	--card: #ffffff;

	/* cute pastels for stage pills (no yellow) */
	--p1: #d6f2ea; /* mint   */
	--p2: #dcebfb; /* sky    */
	--p3: #ffe1ee; /* pink   */
	--p4: #e9e3f9; /* lilac  */
	--p5: #d9f3e0; /* leaf   */
	--p6: #d4f0ef; /* teal   */

	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 60px clamp(20px, 5vw, 92px) 58px;
	color: var(--ink);
	line-height: 1.6;
	font-family: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
	/* white base + soft pastel corner glows (no watercolor, no yellow) */
	background:
		radial-gradient(38% 46% at 6% 8%, rgba(16, 184, 156, 0.10), transparent 72%),
		radial-gradient(36% 44% at 95% 14%, rgba(120, 175, 255, 0.10), transparent 72%),
		radial-gradient(42% 52% at 90% 94%, rgba(255, 140, 190, 0.09), transparent 72%),
		radial-gradient(40% 50% at 8% 92%, rgba(150, 120, 230, 0.08), transparent 72%),
		#ffffff;
	overflow: hidden;
}
.c9scc *,
.c9scc *::before,
.c9scc *::after { box-sizing: border-box; }

/* ---------- title ---------- */
.c9scc .c9scc-title {
	display: block;
	width: auto;
	margin: 0 0 10px;
	font-weight: 900;
	font-size: clamp(30px, 3.6vw, 44px);
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--ink);
}
.c9scc .c9scc-title::after {
	content: "";
	display: block;
	width: 66px;
	height: 9px;
	margin: 16px auto 0;
	border-radius: 999px;
	background: var(--jade);
}
.c9scc-sub {
	margin: 14px auto 42px;
	color: var(--ink-soft);
	font-size: 14.5px;
	text-align: center;
}

/* ---------- three columns: biggest in centre ---------- */
.c9scc-stages {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	gap: 0 clamp(26px, 4vw, 64px);
	max-width: 1280px;
	margin: 0 auto;
}
.c9scc-col {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	max-width: 360px;
}
.c9scc-col-left { order: 1; }
.c9scc-col-center { order: 2; }
.c9scc-col-right { order: 3; }
.c9scc-stage {
	margin: 0 0 34px;
	animation: c9scc-pop 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
.c9scc-stage:nth-child(1) { animation-delay: 0.05s; }
.c9scc-stage:nth-child(2) { animation-delay: 0.13s; }
.c9scc-stage:nth-child(3) { animation-delay: 0.21s; }
.c9scc-stage:nth-child(4) { animation-delay: 0.29s; }

/* ---------- stage header = a cute pastel pill ---------- */
.c9scc-stage summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 18px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--pill, var(--p1));
	box-shadow: 0 4px 10px -4px rgba(60, 90, 90, 0.22);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: 0.04em;
	color: var(--ink);
	list-style: none;
	cursor: pointer;
}
.c9scc-stage summary::-webkit-details-marker { display: none; }
.c9scc-sname-tx { position: relative; }
.c9scc-cnt {
	font-size: 12px;
	font-weight: 700;
	color: var(--jade-deep);
	background: rgba(255, 255, 255, 0.6);
	padding: 2px 9px;
	border-radius: 999px;
}
.c9scc-chev { display: none; color: var(--jade-deep); font-weight: 800; }

/* stage pill colour is set inline per stage (PHP, --pill: var(--pN)) */

/* ---------- sub-group (國七/國八/會考) = small rounded tag ---------- */
.c9scc-grp { margin: 0 0 18px; }
.c9scc-gl {
	display: block;
	width: max-content;
	margin: 0 auto 12px;
	padding: 4px 16px;
	border-radius: 999px;
	background: rgba(16, 184, 156, 0.11);
	color: var(--jade-deep);
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-align: center;
}

/* ---------- item = rounded soft card, bouncy hover ---------- */
.c9scc-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0 0 10px;
	padding: 13px 16px;
	border-radius: 16px;
	background: var(--card);
	box-shadow: 0 2px 9px -3px rgba(60, 90, 90, 0.16);
	color: var(--ink);
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	transition: transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.c9scc-item:hover,
.c9scc-item:focus-visible {
	transform: translateY(-2px) scale(1.015);
	box-shadow: 0 8px 18px -6px rgba(16, 184, 156, 0.4);
	color: var(--jade-deep);
	outline: none;
}
.c9scc-nm { position: relative; }
.c9scc-b {
	flex: none;
	min-width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--jade);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
}
.c9scc-item:hover .c9scc-b { background: var(--jade-deep); }
.c9scc-ar { flex: none; color: var(--jade); font-weight: 800; opacity: 0; transform: translateX(-4px); transition: opacity 0.16s ease, transform 0.16s ease; }
.c9scc-item:hover .c9scc-ar { opacity: 1; transform: translateX(0); }
.c9scc-cta { color: var(--jade-deep); font-weight: 700; }
.c9scc-cta .c9scc-ar { opacity: 0.6; transform: none; }

.c9scc-desk .c9scc-stage summary { cursor: default; }

@keyframes c9scc-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to { opacity: 1; transform: none; }
}

/* ---------- tablet & mobile: stacked accordion ---------- */
@media (max-width: 880px) {
	.c9scc { padding: 38px 16px 28px; }
	.c9scc-stages { flex-direction: column; flex-wrap: nowrap; max-width: 540px; gap: 0; }
	.c9scc-col { max-width: none; width: 100%; }
	.c9scc-col-center { order: 0; }
	.c9scc-col-left { order: 1; }
	.c9scc-col-right { order: 2; }
	.c9scc-stage {
		margin: 0 0 14px;
		border-radius: 20px;
		background: var(--card);
		box-shadow: 0 3px 14px -6px rgba(60, 90, 90, 0.2);
		overflow: hidden;
		animation: none;
	}
	.c9scc-stage summary {
		width: 100%;
		justify-content: flex-start;
		gap: 10px;
		margin: 0;
		padding: 16px 18px;
		border-radius: 20px;
		box-shadow: none;
		font-size: 19px;
	}
	.c9scc-cnt { margin-left: auto; }
	.c9scc-chev { display: inline-block; transition: transform 0.2s ease; }
	.c9scc-stage[open] .c9scc-chev { transform: rotate(90deg); }
	.c9scc-body { padding: 6px 14px 14px; }
	.c9scc-item { justify-content: space-between; padding: 14px 16px; font-size: 17px; box-shadow: none; background: #f7faf9; }
}

@media (prefers-reduced-motion: reduce) {
	.c9scc-stage { animation: none; }
	.c9scc-item, .c9scc-ar, .c9scc-chev { transition: none; }
}