/* CLN Exam System — 前台 CSS
 * 所有選擇器限定在 .cln-exam-wrap 內 */

.cln-exam-wrap {
	--primary-dark:  #28333B;
	--accent-blue:   #0A6EB1;
	--text-dark:     #3E3A39;
	--text-body:     #333333;
	--white:         #FFFFFF;
	--danger:        #C4392A;
	--accent-blue-10: rgba(10,110,177,0.10);
	--dark-05:       rgba(40,51,59,0.05);
	--dark-12:       rgba(40,51,59,0.12);
	--dark-40:       rgba(40,51,59,0.40);
	--border:        rgba(40,51,59,0.10);
	--surface:       #F7F8F9;
	--radius-sm:     6px;
	--radius-md:     10px;
	--radius-lg:     14px;
	--shadow-sm:     0 1px 3px rgba(40,51,59,0.06), 0 1px 2px rgba(40,51,59,0.04);
	--transition:    0.2s cubic-bezier(0.4, 0, 0.2, 1);

	font-family: 'IBM Plex Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-body);
	-webkit-font-smoothing: antialiased;
	max-width: 1290px;
	margin: 0 auto;
	padding: 32px 40px;
	-webkit-user-select: none;
	user-select: none;
	box-sizing: border-box;
}

/* 防作弊用的 user-select: none 只該套在「作答中」的區塊。
   舊白名單列的 .sc-result-section 與 .sc-past-scores-area 這兩個 class
   在實際 markup 裡並不存在（結果頁真正用的是 .sc-result-section-scores、
   .sc-result-content、#sc-result-past-scores 等；查詢區則是 #sc-past-scores-area），
   等於整張結果頁都選不起來，考生連自己的分數都無法複製。
   結果步驟（step 4）本來就不需要防作弊，故整個容器連同子孫一律開放選取。 */
.cln-exam-wrap .sc-error-msg,
.cln-exam-wrap .sc-submit-early-hint,
.cln-exam-wrap #sc-past-scores-area,
.cln-exam-wrap #sc-past-scores-area *,
.cln-exam-wrap .cln-exam-step[data-step="4"],
.cln-exam-wrap .cln-exam-step[data-step="4"] * {
	-webkit-user-select: text;
	user-select: text;
}

.cln-exam-wrap *,
.cln-exam-wrap *::before,
.cln-exam-wrap *::after {
	box-sizing: inherit;
}

.cln-exam-wrap h1,
.cln-exam-wrap h2,
.cln-exam-wrap h3 {
	margin: 0;
	padding: 0;
}

/* ──────────────────────────────────────────
   Stepper
   ────────────────────────────────────────── */
.cln-exam-wrap .cln-exam-stepper {
	display: flex;
	align-items: center;
	margin-bottom: 32px;
}

.cln-exam-wrap .cln-exam-step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.cln-exam-wrap .cln-exam-step-num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dark-12);
	color: var(--dark-40);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	transition: all var(--transition);
	box-shadow: 0 1px 4px rgba(40,51,59,0.08);
}

.cln-exam-wrap .cln-exam-step-item.active .cln-exam-step-num,
.cln-exam-wrap .cln-exam-step-item.done .cln-exam-step-num {
	background: var(--accent-blue);
	color: #fff;
}

.cln-exam-wrap .cln-exam-step-label {
	font-size: 11.5px;
	color: var(--dark-40);
	white-space: nowrap;
}

.cln-exam-wrap .cln-exam-step-item.active .cln-exam-step-label {
	color: var(--accent-blue);
	font-weight: 500;
}

.cln-exam-wrap .cln-exam-step-line {
	flex: 1;
	height: 1px;
	background: var(--border);
	margin: 0 8px;
	margin-bottom: 16px;
}

/* ──────────────────────────────────────────
   Section Titles
   ────────────────────────────────────────── */
.cln-exam-wrap .cln-exam-section-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-dark);
	margin-bottom: 8px;
}

.cln-exam-wrap .cln-exam-section-desc {
	font-size: 14px;
	color: var(--dark-40);
	margin-bottom: 24px;
}

/* ──────────────────────────────────────────
   Buttons
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	border: none;
	transition: all var(--transition);
	text-decoration: none;
}

.cln-exam-wrap .sc-btn-primary {
	background: var(--accent-blue);
	color: #fff;
}

@media (hover: hover) {
	.cln-exam-wrap .sc-btn-primary:hover {
		background: var(--accent-blue);
		filter: brightness(0.88);
		transform: translateY(-1px);
	}
}

.cln-exam-wrap .sc-btn:active {
	transform: scale(0.97);
}

.cln-exam-wrap .sc-btn-secondary {
	background: var(--white);
	color: var(--text-dark);
	border: 1px solid var(--border);
}

@media (hover: hover) {
	.cln-exam-wrap .sc-btn-secondary:hover {
		background: var(--surface);
	}
}

.cln-exam-wrap .sc-btn-ghost {
	background: transparent;
	color: var(--dark-60, #666);
	border: 1px dashed var(--dark-20, #ddd);
}

/* U4：提前交卷確認狀態（紅色 outline 強調 destructive） */
.cln-exam-wrap .sc-btn-danger {
	background: transparent;
	color: var(--danger, #C4392A);
	border: 2px solid var(--danger, #C4392A);
	font-weight: 600;
}
.cln-exam-wrap .sc-btn-danger:hover:not(:disabled) {
	background: var(--danger, #C4392A);
	color: #fff;
}
.cln-exam-wrap .sc-btn-danger:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.cln-exam-wrap .sc-submit-early-hint-warning {
	background: rgba(196,57,42,0.08);
	border-left: 3px solid var(--danger, #C4392A);
	color: var(--danger, #C4392A);
	font-weight: 500;
}

@media (hover: hover) {
	.cln-exam-wrap .sc-btn-ghost:hover {
		background: var(--surface, #f8f8f8);
		color: var(--text-dark);
		border-color: var(--dark-40, #999);
	}
}

.cln-exam-wrap .sc-btn:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.cln-exam-wrap .sc-btn-outline {
	background: transparent;
	color: var(--accent-blue);
	border: 1.5px solid var(--accent-blue);
}

@media (hover: hover) {
	.cln-exam-wrap .sc-btn-outline:hover {
		background: var(--accent-blue);
		color: #fff;
	}
}

/* ──────────────────────────────────────────
   Forms (info-form)
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-form-body {
	display: flex;
	flex-direction: column;
	/* 一般欄位（姓名／Email 等單行輸入）之間維持 20px；
	   選擇題另由 .sc-form-group--choice 的上緣 padding + 分隔線再拉開，
	   不需要把所有欄位一起撐到 30px。 */
	gap: 20px;
	margin-bottom: 28px;
}

.cln-exam-wrap .sc-form-group {
	display: flex;
	flex-direction: column;
}

/* 選擇題（單選／多選）上緣加分隔線：先前題目間距 25px、選項間距 20px，
   比值只有 1.25:1，題與題之間幾乎看不出斷點。用 class 而非 :has() 以相容舊瀏覽器。 */
.cln-exam-wrap .sc-form-group--choice {
	padding-top: 22px;
	border-top: 1px solid var(--border, rgba(40, 51, 59, 0.10));
}
.cln-exam-wrap .sc-form-group--choice .sc-form-label {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 10px;
}

.cln-exam-wrap .sc-form-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dark);
	margin-bottom: 6px;
}

.cln-exam-wrap .sc-required {
	color: var(--danger);
	margin-left: 3px;
}

.cln-exam-wrap .sc-input,
.cln-exam-wrap input[type="text"],
.cln-exam-wrap input[type="email"],
.cln-exam-wrap input[type="tel"],
.cln-exam-wrap select,
.cln-exam-wrap textarea {
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-family: inherit;
	background: var(--white);
	color: var(--text-body);
	box-shadow: none;
	width: 100%;
	-webkit-user-select: text;
	user-select: text;
	transition: border-color var(--transition), box-shadow var(--transition);
	-webkit-appearance: none;
}

.cln-exam-wrap .sc-input:focus,
.cln-exam-wrap input:focus,
.cln-exam-wrap select:focus,
.cln-exam-wrap textarea:focus {
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 3px var(--accent-blue-10);
	outline: none;
}

.cln-exam-wrap textarea,
.cln-exam-wrap .sc-input[rows] {
	height: auto;
	padding: 10px 14px;
	min-height: 100px;
	resize: vertical;
}

.cln-exam-wrap .sc-radio-group,
.cln-exam-wrap .sc-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cln-exam-wrap .sc-radio-label,
.cln-exam-wrap .sc-checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	/* 未設 line-height 時會繼承 .cln-exam-wrap 的 1.7，光學間距被行高灌大到 20px，
	   縮小 gap 效果有限；壓到 1.45 才是真正的槓桿 */
	line-height: 1.45;
	cursor: pointer;
}

/* 「讓學員自行輸入」的選項展開後的文字欄（v6.9.5） */
.cln-exam-wrap .sc-opt-input {
	margin: 2px 0 4px 28px;
	width: calc(100% - 28px);
	max-width: 420px;
}

.cln-exam-wrap .sc-radio-label input,
.cln-exam-wrap .sc-checkbox-label input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.cln-exam-wrap .sc-form-hint {
	font-size: 12.5px;
	color: var(--dark-40);
	margin-top: 5px;
}

.cln-exam-wrap .sc-field-error {
	font-size: 12.5px;
	color: var(--danger);
	margin-top: 5px;
}

.cln-exam-wrap .sc-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 8px;
}

/* ──────────────────────────────────────────
   使用規範同意勾選 + 彈窗
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-terms-agreement-group {
	margin: 16px 0 8px;
	padding: 14px 16px;
	background: var(--dark-05, #f7f7f7);
	border-radius: 8px;
}
.cln-exam-wrap .sc-terms-agreement-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
	color: var(--dark-80, #333);
}
.cln-exam-wrap .sc-terms-checkbox {
	margin-top: 2px;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	cursor: pointer;
}
.cln-exam-wrap .sc-terms-link {
	color: var(--accent-blue, #0a6eb1);
	text-decoration: underline;
	font-weight: 500;
	margin: 0 2px;
}
.cln-exam-wrap .sc-terms-link:hover {
	text-decoration: none;
}

/* 彈窗 */
.sc-terms-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.sc-terms-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.55);
}
.sc-terms-modal-dialog {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: 640px;
	width: 100%;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0,0,0,0.30);
}
.sc-terms-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid #eee;
}
.sc-terms-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}
.sc-terms-modal-close {
	background: transparent;
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	padding: 4px 8px;
}
.sc-terms-modal-close:hover { color: #000; }
.sc-terms-modal-body {
	padding: 22px;
	overflow-y: auto;
	flex: 1;
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}
.sc-terms-modal-body h1,
.sc-terms-modal-body h2,
.sc-terms-modal-body h3,
.sc-terms-modal-body h4,
.sc-terms-modal-body h5,
.sc-terms-modal-body h6 {
	margin: 1.2em 0 0.5em;
	font-weight: 700;
	line-height: 1.3;
}
.sc-terms-modal-body h1 { font-size: 26px; }
.sc-terms-modal-body h2 { font-size: 22px; }
.sc-terms-modal-body h3 { font-size: 18px; }
.sc-terms-modal-body h4 { font-size: 16px; }
.sc-terms-modal-body h5 { font-size: 15px; }
.sc-terms-modal-body h6 { font-size: 14px; color: #666; }
.sc-terms-modal-body p { margin: 0 0 1em; }
.sc-terms-modal-body img { max-width: 100%; height: auto; }
.sc-terms-modal-body a { color: var(--accent-blue, #0a6eb1); text-decoration: underline; }
.sc-terms-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 22px 18px;
	border-top: 1px solid #eee;
}

/* ──────────────────────────────────────────
   Notices
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-notice {
	padding: 14px 18px;
	border-radius: var(--radius-md);
	font-size: 14px;
	margin-bottom: 20px;
}

.cln-exam-wrap .sc-notice-error {
	background: rgba(196,57,42,0.08);
	color: var(--danger);
	border: 1px solid rgba(196,57,42,0.20);
}

/* ──────────────────────────────────────────
   Progress
   ────────────────────────────────────────── */
.cln-exam-wrap .cln-exam-progress-bar-wrap {
	height: 4px;
	background: var(--dark-12);
	border-radius: 2px;
	margin-bottom: 8px;
	overflow: hidden;
}

.cln-exam-wrap .cln-exam-progress-bar {
	height: 100%;
	background: var(--accent-blue);
	border-radius: 2px;
	transition: width 0.3s ease;
}

.cln-exam-wrap .cln-exam-progress-text {
	font-size: 12.5px;
	color: var(--dark-40);
	text-align: right;
	margin-bottom: 20px;
}

/* ──────────────────────────────────────────
   Timer
   ────────────────────────────────────────── */
.cln-exam-wrap #sc-timer-wrap {
	text-align: center;
	margin-bottom: 16px;
}

.cln-exam-wrap .sc-timer {
	display: inline-block;
	background: var(--primary-dark);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	padding: 10px 24px;
	border-radius: 28px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 1px;
	box-shadow: 0 2px 12px rgba(40,51,59,0.15);
}

.cln-exam-wrap .sc-timer.warning {
	background: var(--danger);
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.7; }
}

/* ──────────────────────────────────────────
   Nav Dots
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-nav-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	padding: 12px 16px;
	background: var(--surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.cln-exam-wrap .sc-nav-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--dark-12);
	color: var(--dark-40);
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--transition);
}

.cln-exam-wrap .sc-nav-dot.answered {
	background: var(--accent-blue);
	color: #fff;
}

.cln-exam-wrap .sc-nav-dot.current {
	outline: 2px solid var(--accent-blue);
	outline-offset: 2px;
}

/* ──────────────────────────────────────────
   Question Area
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-question-area {
	margin-bottom: 24px;
}

/* 音訊系統確認頁 */
.cln-exam-wrap .cln-exam-audio-check {
	padding: 20px 0;
}
.cln-exam-wrap .sc-audio-check-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 12px);
	box-shadow: 0 2px 12px rgba(40,51,59,0.06);
	padding: 32px;
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
}
.cln-exam-wrap .sc-audio-check-desc {
	color: var(--dark-60, #666);
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 8px;
}
.cln-exam-wrap .sc-audio-check-player {
	margin: 24px 0;
}
.cln-exam-wrap .sc-audio-check-player audio {
	width: 100%;
}
.cln-exam-wrap .sc-audio-check-actions {
	margin-top: 20px;
}
.cln-exam-wrap .sc-audio-check-hint {
	margin-top: 12px;
	font-size: 13px;
	color: var(--accent-red, #dc3545);
}
.cln-exam-wrap #sc-audio-check-ok:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cln-exam-wrap .sc-question-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 12px rgba(40,51,59,0.06), 0 1px 3px rgba(40,51,59,0.04);
	padding: 28px;
	position: relative;
}
.cln-exam-wrap .sc-question-card + .sc-question-card {
	margin-top: 16px;
}
.cln-exam-wrap .sc-group-q-num {
	position: absolute;
	top: -1px;
	left: -1px;
	background: var(--accent-blue);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	min-width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg) 0 8px 0;
	padding: 0 8px;
}

.cln-exam-wrap .sc-question-type-hint {
	font-size: 12.5px;
	color: var(--accent-blue);
	font-weight: 500;
	margin-bottom: 8px;
}

.cln-exam-wrap .sc-question-text {
	font-size: 17px;
	font-weight: 600;
	color: var(--primary-dark);
	margin-bottom: 20px;
	line-height: 1.5;
}

.cln-exam-wrap .sc-question-media {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}

.cln-exam-wrap .sc-question-media img {
	max-width: 100%;
	border-radius: var(--radius-md);
}

.cln-exam-wrap .sc-question-media audio {
	width: 100%;
}
.cln-exam-wrap audio::-webkit-media-controls-enclosure {
	overflow: hidden;
}
.cln-exam-wrap audio::-webkit-media-controls-panel {
	width: calc(100% + 30px);
}

.cln-exam-wrap .sc-question-media iframe {
	width: 100%;
	border: none;
	border-radius: var(--radius-md);
}

/* Part 分段標題 */
.cln-exam-wrap .sc-part-header {
	background: var(--white, #fff);
	border: 2px solid var(--accent-blue, #2563eb);
	color: var(--text-body, #333);
	padding: 16px 20px;
	border-radius: var(--radius-md, 8px);
	margin-bottom: 16px;
}
.cln-exam-wrap .sc-part-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--accent-blue, #2563eb);
}
.cln-exam-wrap .sc-part-instructions {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-body, #333);
}
.cln-exam-wrap .sc-part-audio {
	display: block;
	width: 100%;
	margin: 10px 0 0;
}

/* 題組共用內容 */
.cln-exam-wrap .sc-group-context {
	background: #f8f9fa;
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-md, 8px);
	padding: 16px;
	margin-bottom: 16px;
}
.cln-exam-wrap .sc-group-passage {
	font-size: 15px;
	line-height: 1.7;
	color: #1a202c;
}
.cln-exam-wrap .sc-group-context .sc-question-media {
	margin-bottom: 12px;
}
.cln-exam-wrap .sc-group-context .sc-question-media img {
	max-width: 100%;
	border-radius: var(--radius-sm, 4px);
}

.cln-exam-wrap .sc-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cln-exam-wrap .sc-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: 15px;
	transition: all var(--transition);
	background: var(--white);
	position: relative;
}

@media (hover: hover) {
	.cln-exam-wrap .sc-option:hover {
		border-color: var(--accent-blue);
		background: var(--accent-blue-10);
	}
}

.cln-exam-wrap .sc-option.selected {
	border-color: var(--accent-blue);
	background: var(--accent-blue-10);
	font-weight: 500;
}

.cln-exam-wrap .sc-option input[type="radio"],
.cln-exam-wrap .sc-option input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Option letter + text */
.cln-exam-wrap .sc-option-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--dark-05);
	color: var(--dark-40);
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
}

.cln-exam-wrap .sc-option.selected .sc-option-letter {
	background: var(--accent-blue);
	color: #fff;
}

.cln-exam-wrap .sc-option-text {
	flex: 1;
}

/* Letter-only mode (audio questions) */
.cln-exam-wrap .sc-options-letter-only .sc-option {
	display: inline-flex;
	width: auto;
	min-width: 56px;
	justify-content: center;
	padding: 12px 16px;
}
.cln-exam-wrap .sc-options-letter-only .sc-option-letter {
	width: 32px;
	height: 32px;
	font-size: 14px;
}
.cln-exam-wrap .sc-options-letter-only {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Review detail layout */
.cln-exam-wrap .sc-review-main {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex: 1;
}

.cln-exam-wrap .sc-review-detail {
	flex: 1;
}

.cln-exam-wrap .sc-review-question {
	font-size: 13px;
	color: var(--text-dark);
	margin-bottom: 4px;
	font-weight: 500;
}

.cln-exam-wrap .sc-review-answer {
	font-size: 12.5px;
	color: var(--dark-40);
}

.cln-exam-wrap .sc-review-item.unanswered .sc-review-answer {
	color: var(--danger);
}

/* Breakdown icon text */
.cln-exam-wrap .sc-breakdown-icon.correct { color: #109960; }
.cln-exam-wrap .sc-breakdown-icon.incorrect { color: var(--danger); }

/* Past scores */
.cln-exam-wrap .sc-past-scores {
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.cln-exam-wrap .sc-past-score-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
	gap: 12px;
}

.cln-exam-wrap .sc-past-score-row:last-child {
	border-bottom: none;
}

.cln-exam-wrap .sc-loading {
	text-align: center;
	padding: 40px;
	color: var(--dark-40);
}

/* ──────────────────────────────────────────
   Action Buttons Row
   ────────────────────────────────────────── */
.cln-exam-wrap .cln-exam-q-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 24px;
}
.cln-exam-wrap .cln-exam-q-nav-row {
	display: flex;
	align-items: center;
	flex: 1;
}

.cln-exam-wrap .sc-submit-early-hint {
	font-size: 13px;
	color: var(--accent-red, #dc3545);
	margin-top: 6px;
	text-align: center;
}

/* Review: buttons always equal width, side-by-side */
.cln-exam-wrap .cln-exam-review .cln-exam-q-actions > div[style] {
	display: none;
}
.cln-exam-wrap .cln-exam-review .cln-exam-q-actions .sc-btn {
	flex: 1;
	justify-content: center;
}

/* ──────────────────────────────────────────
   Review Page
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-review-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.cln-exam-wrap .sc-review-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-size: 14px;
}

.cln-exam-wrap .sc-review-item.unanswered {
	border-color: rgba(196,57,42,0.30);
	background: rgba(196,57,42,0.04);
}

.cln-exam-wrap .sc-review-num {
	font-weight: 600;
	color: var(--accent-blue);
	font-size: 13px;
	flex-shrink: 0;
	min-width: 24px;
}

.cln-exam-wrap .sc-review-edit-btn {
	background: none;
	border: none;
	color: var(--accent-blue);
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
	flex-shrink: 0;
}

/* ──────────────────────────────────────────
   Result Page
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-result-score-area {
	text-align: center;
	padding: 40px 0 32px;
}

.cln-exam-wrap .sc-result-circle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: 5px solid var(--accent-blue);
	margin-bottom: 20px;
	background: linear-gradient(135deg, rgba(10,110,177,0.04), rgba(10,110,177,0.01));
	box-shadow: 0 4px 24px rgba(10,110,177,0.12);
}

.cln-exam-wrap .sc-result-score-val {
	font-size: 40px;
	font-weight: 700;
	color: var(--primary-dark);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cln-exam-wrap .sc-result-score-max {
	font-size: 14px;
	color: var(--dark-40);
	margin-top: 4px;
}

.cln-exam-wrap .sc-result-correct-count {
	font-size: 15px;
	color: var(--dark-40);
}

.cln-exam-wrap .sc-result-content {
	padding: 24px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	margin-bottom: 8px;
}

.cln-exam-wrap .sc-result-source-note {
	font-size: 12.5px;
	color: var(--dark-40, #888);
	text-align: right;
	margin: 0 0 24px;
	font-style: italic;
}

.cln-exam-wrap .sc-cta-global {
	margin: 8px 0 28px;
	padding: 24px;
	background: var(--surface, #F7F8F9);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-size: 15px;
	line-height: 1.7;
}
.cln-exam-wrap .sc-cta-global > *:first-child { margin-top: 0; }
.cln-exam-wrap .sc-cta-global > *:last-child { margin-bottom: 0; }

/* Breakdown */
.cln-exam-wrap .sc-breakdown-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}

.cln-exam-wrap .sc-breakdown-item {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.cln-exam-wrap .sc-breakdown-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	cursor: pointer;
	font-size: 14px;
}

.cln-exam-wrap .sc-breakdown-header.correct   { background: rgba(16,153,96,0.06); }
.cln-exam-wrap .sc-breakdown-header.incorrect { background: rgba(196,57,42,0.06); }

.cln-exam-wrap .sc-breakdown-icon { font-size: 16px; flex-shrink: 0; }
.cln-exam-wrap .sc-breakdown-q    { flex: 1; }
.cln-exam-wrap .sc-breakdown-body {
	padding: 12px 16px;
	font-size: 13.5px;
	color: var(--dark-40);
	border-top: 1px solid var(--border);
	display: none;
}

.cln-exam-wrap .sc-breakdown-item.open .sc-breakdown-body {
	display: block;
}

/* Result actions */
.cln-exam-wrap .sc-result-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

/* ──────────────────────────────────────────
   Responsive
   ────────────────────────────────────────── */
@media (max-width: 689.98px) {
	.cln-exam-wrap {
		padding: 20px 14px;
		font-size: 14px;
	}
	.cln-exam-wrap .cln-exam-section-title { font-size: 17px; }
	.cln-exam-wrap .cln-exam-section-desc  { font-size: 13px; margin-bottom: 16px; }
	.cln-exam-wrap .sc-question-text       { font-size: 15px; margin-bottom: 14px; }

	/* Stepper */
	.cln-exam-wrap .cln-exam-stepper .cln-exam-step-label { display: none; }
	.cln-exam-wrap .cln-exam-step-num  { width: 30px; height: 30px; font-size: 12px; }
	.cln-exam-wrap .cln-exam-step-line { margin: 0 4px; margin-bottom: 0; }
	.cln-exam-wrap .cln-exam-stepper   { margin-bottom: 20px; }

	/* Timer */
	.cln-exam-wrap .sc-timer { font-size: 16px; padding: 8px 18px; }

	/* Nav Dots */
	.cln-exam-wrap .sc-nav-dots { gap: 6px; padding: 10px 12px; margin-bottom: 16px; }
	.cln-exam-wrap .sc-nav-dot  { width: 26px; height: 26px; font-size: 11px; }

	/* Question Card */
	.cln-exam-wrap .sc-question-card { padding: 18px 14px; }
	.cln-exam-wrap .sc-question-card + .sc-question-card { margin-top: 12px; }

	/* Options */
	.cln-exam-wrap .sc-option { padding: 10px 12px; gap: 10px; font-size: 14px; }
	.cln-exam-wrap .sc-options-letter-only .sc-option { padding: 10px 12px; min-width: 48px; }

	/* Part header */
	.cln-exam-wrap .sc-part-header { padding: 12px 14px; }
	.cln-exam-wrap .sc-part-title  { font-size: 16px; }

	/* Group context */
	.cln-exam-wrap .sc-group-context { padding: 12px; }

	/* Form */
	.cln-exam-wrap .sc-form-actions { flex-direction: column; }
	.cln-exam-wrap .sc-form-actions .sc-btn { width: 100%; justify-content: center; }
	.cln-exam-wrap .sc-btn { height: 42px; font-size: 14px; padding: 0 16px; }

	/* Action Buttons */
	.cln-exam-wrap .cln-exam-q-actions { flex-direction: column; gap: 8px; }
	.cln-exam-wrap .cln-exam-q-nav-row { display: flex; gap: 8px; width: 100%; }
	.cln-exam-wrap .cln-exam-q-nav-row > div[style] { display: none; }
	.cln-exam-wrap .cln-exam-q-nav-row .sc-btn { flex: 1; justify-content: center; }
	.cln-exam-wrap #sc-submit-early-btn { width: 100%; justify-content: center; font-size: 13px; }
	/* Review: 返回修改 / 正式提交 always side-by-side */
	.cln-exam-wrap .cln-exam-review .cln-exam-q-actions { flex-direction: row; }
	.cln-exam-wrap .cln-exam-review .cln-exam-q-actions > div[style] { display: none; }
	.cln-exam-wrap .cln-exam-review .cln-exam-q-actions .sc-btn { flex: 1; justify-content: center; }

	/* Review */
	.cln-exam-wrap .sc-review-item { padding: 10px 12px; gap: 10px; font-size: 13px; }

	/* Result */
	.cln-exam-wrap .sc-result-score-area { padding: 28px 0 24px; }
	.cln-exam-wrap .sc-result-circle { width: 130px; height: 130px; border-width: 4px; }
	.cln-exam-wrap .sc-result-score-val { font-size: 32px; }
	.cln-exam-wrap .sc-result-actions { flex-direction: column; }
	.cln-exam-wrap .sc-result-actions .sc-btn { width: 100%; justify-content: center; }
	.cln-exam-wrap .sc-breakdown-header { padding: 10px 12px; font-size: 13px; }
	.cln-exam-wrap .sc-breakdown-body   { padding: 10px 12px; font-size: 12.5px; }

	/* Countdown */
	.cln-exam-wrap .sc-cd-num   { font-size: 28px; }
	.cln-exam-wrap .sc-cd-label { font-size: 11px; }
	.cln-exam-wrap .sc-cd-sep   { font-size: 22px; }
	.cln-exam-wrap .sc-cd-unit  { min-width: 48px; }

	/* Audio check */
	.cln-exam-wrap .sc-audio-check-card { padding: 24px 16px; }

	/* Past scores */
	.cln-exam-wrap .sc-past-score-row { flex-direction: column; gap: 4px; padding: 10px 0; }
}

@media (max-width: 400px) {
	.cln-exam-wrap { padding: 16px 10px; }
	.cln-exam-wrap .sc-question-card { padding: 14px 10px; }
	.cln-exam-wrap .sc-option { padding: 8px 10px; }
	.cln-exam-wrap .sc-result-circle { width: 110px; height: 110px; }
	.cln-exam-wrap .sc-result-score-val { font-size: 28px; }
}

/* 作答次數與上次成績提示 */
.cln-exam-wrap .sc-attempt-info {
	background: var(--accent-blue-10);
	color: var(--accent-blue);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	font-weight: 500;
	margin-bottom: 12px;
	text-align: center;
}
.cln-exam-wrap .sc-previous-score {
	background: var(--dark-05);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	margin-bottom: 12px;
	text-align: center;
}
.cln-exam-wrap .sc-previous-score .sc-previous-time {
	color: var(--dark-40);
	font-size: 12px;
}
.cln-exam-wrap .sc-answered-count {
	color: var(--dark-40);
	font-size: 12.5px;
}

/* 考試倒數計時 */
.cln-exam-wrap .cln-exam-gate-logo {
	text-align: center;
	margin-bottom: 24px;
}

.cln-exam-wrap .cln-exam-gate-logo img {
	max-height: 60px;
	width: auto;
}

.cln-exam-wrap .cln-exam-countdown-wrap {
	text-align: center;
	padding: 48px 24px;
}
.cln-exam-wrap .cln-exam-countdown-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-dark);
	margin-bottom: 24px;
}
.cln-exam-wrap .cln-exam-countdown {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.cln-exam-wrap .sc-cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px;
}
.cln-exam-wrap .sc-cd-num {
	font-size: 36px;
	font-weight: 700;
	color: var(--accent-blue);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.cln-exam-wrap .sc-cd-label {
	font-size: 12px;
	color: var(--dark-40);
	margin-top: 4px;
}
.cln-exam-wrap .sc-cd-sep {
	font-size: 28px;
	font-weight: 300;
	color: var(--dark-40);
	margin-top: -16px;
}
.cln-exam-wrap .cln-exam-countdown-note {
	font-size: 13px;
	color: var(--dark-40);
}

/* 考試已結束 */
.cln-exam-wrap .cln-exam-ended-wrap {
	text-align: center;
	padding: 48px 24px;
}

/* 錯誤訊息 */
.cln-exam-wrap .sc-error-msg {
	background: rgba(196,57,42,0.06);
	border: 1px solid rgba(196,57,42,0.15);
	color: var(--danger);
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	margin: 12px 0;
}

@media print {
	.cln-exam-wrap .sc-result-actions,
	.cln-exam-wrap .cln-exam-stepper,
	.cln-exam-wrap #sc-timer-wrap,
	.cln-exam-wrap #sc-result-lookup-btn,
	.cln-exam-wrap #sc-result-past-scores { display: none !important; }
	.cln-exam-wrap .sc-result-score-area { break-inside: avoid; }
	.cln-exam-wrap .sc-breakdown-item { break-inside: avoid; page-break-inside: avoid; }
	.cln-exam-wrap .sc-result-content { break-inside: avoid; }
	.cln-exam-wrap { max-width: 100% !important; }
	.cln-exam-wrap .sc-question-card,
	.cln-exam-wrap .sc-result-content,
	.cln-exam-wrap .sc-breakdown-item { box-shadow: none !important; }
}

/* ──────────────────────────────────────────
   v5.7.0+ : 資料表單 + 形象圖兩欄佈局
   ────────────────────────────────────────── */
.cln-exam-wrap .cln-exam-info-form.has-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	margin: -32px -40px;
	/* v5.11.7：step 1 已無上下 padding，hero 圖應延伸到頁面邊（接近 footer） */
	min-height: calc(100vh - 80px);
}
@media (max-width: 999.98px) {
	.cln-exam-wrap .cln-exam-info-form.has-hero {
		min-height: auto;
	}
}
.cln-exam-wrap .cln-exam-info-form.has-hero .cln-exam-info-form-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 60px 60px 80px;
	min-width: 0;
	box-sizing: border-box;
}
/* 限制表單內容最大寬度（避免欄位被拉超寬），但容器本身仍佔滿 grid column */
.cln-exam-wrap .cln-exam-info-form.has-hero .cln-exam-info-form-body > * {
	max-width: 440px;
	width: 100%;
}
.cln-exam-wrap .cln-exam-info-hero {
	background: var(--dark-05, #f5f5f5);
	overflow: hidden;
	/* 透過負右 margin 把圖片右緣延伸到 viewport 邊 */
	margin-right: min(-20px, calc(625px - 50vw));
	min-width: 0;
}
.cln-exam-wrap .cln-exam-info-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 999.98px) {
	.cln-exam-wrap .cln-exam-info-form.has-hero {
		grid-template-columns: 1fr;
		/* 抵銷 cln-exam-wrap padding (-32 -16) 與 standalone-wrap margin-bottom (-40) */
		margin: -32px -16px -40px;
		min-height: auto;
	}
	.cln-exam-wrap .cln-exam-info-form.has-hero .cln-exam-info-form-body {
		/* v5.11.9: 加大手機版上下 gap，避免表單貼到 header 與下方預覽圖 */
		padding: 56px 20px 0;
		min-height: auto;
		margin-bottom: 48px;
	}
	.cln-exam-wrap .cln-exam-info-form.has-hero .cln-exam-info-form-body > * {
		max-width: 100%;
	}
	.cln-exam-wrap .cln-exam-info-hero {
		margin: 0 -16px;
		min-height: 240px;
		max-height: 320px;
	}
	.cln-exam-wrap .cln-exam-info-hero img {
		min-height: 240px;
		max-height: 320px;
	}
}


/* ──────────────────────────────────────────
   v5.7.0+ : 考題作答頁 — 左側欄佈局
   ────────────────────────────────────────── */
.cln-exam-wrap .cln-exam-layout {
	display: grid;
	grid-template-columns: 3fr 7fr;
	gap: 56px;
	align-items: flex-start;
}
.cln-exam-wrap .cln-exam-sidebar {
	position: sticky;
	/* sticky 上緣 = 主題深色 header 高度 + 8px 緩衝，避免往下滑時時鐘上方被 header 切掉 */
	top: calc(var(--cln-header-h, 76px) + 8px);
	align-self: start;  /* 確保 grid item 不被 row 高度拉伸，sticky 才能正常運作 */
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: calc(100vh - var(--cln-header-h, 76px) - 16px);
	/* 不再對整個 sidebar overflow，避免時鐘被章節導覽擠出視野 */
	overflow: visible;
}
.cln-exam-wrap .cln-exam-sidebar-timer {
	background: var(--dark-05, #f0f0f0);
	border-radius: 8px;
	padding: 14px 16px;
	text-align: center;
	flex-shrink: 0;  /* 不被章節導覽擠壓 */
}
.cln-exam-wrap .cln-exam-sidebar-timer-label {
	font-size: 12px;
	color: var(--dark-60, #666);
	margin-bottom: 4px;
}
.cln-exam-wrap .cln-exam-sidebar-timer-value {
	font-size: 22px;
	font-weight: 700;
	color: var(--dark, #222);
	font-variant-numeric: tabular-nums;
}
.cln-exam-wrap .cln-exam-sidebar-timer-value.warning {
	color: #d97706;
}
.cln-exam-wrap .cln-exam-sidebar-timer-value.expired {
	color: #dc2626;
}
.cln-exam-wrap .cln-exam-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}
.cln-exam-wrap .sc-side-section {
	padding: 10px 16px;
	margin-top: 18px;
	background: var(--accent-blue, #0A6EB1);
	color: #fff;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
}
.cln-exam-wrap .sc-side-section:first-child {
	margin-top: 0;
}
.cln-exam-wrap .sc-side-part {
	padding: 10px 16px;
	font-size: 14px;
	color: var(--dark-60, #555);
	cursor: pointer;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s;
	text-align: center;
}
/* 觸控裝置點過一次 Part 後，:hover 會「黏」在該元素上不消失（sticky hover），
   於是手機上同時看到一個深藍 active 的 Part 與另一個淡藍高亮的 Part，狀態語意混淆。
   用 @media (hover: hover) 把 hover 樣式限定給真的有游標的裝置。 */
@media (hover: hover) {
	.cln-exam-wrap .sc-side-part:hover {
		background: var(--accent-blue-10, rgba(10, 110, 177, 0.10));
		color: var(--accent-blue, #0A6EB1);
	}
}
.cln-exam-wrap .sc-side-part.active {
	background: var(--accent-blue, #0A6EB1);
	color: #fff;
	font-weight: 600;
}
.cln-exam-wrap .sc-side-part.done {
	color: var(--dark-40, #999);
}
.cln-exam-wrap .cln-exam-content {
	min-width: 0;
}

/* 已移除死規則：`.cln-exam-wrap .cln-exam-layout #sc-timer-wrap { display: none !important; }`
   #sc-timer-wrap 是由 class-shortcode.php 輸出在所有 .cln-exam-step 之外的頂層節點，
   從來就不是 .cln-exam-layout 的後代，這條選擇器永遠命不中，留著只會讓人誤以為
   舊版頂部計時器是被 CSS 藏起來的。它的顯示與否完全由 exam.js 控制（只在 step 3 出現）。 */

@media (max-width: 999.98px) {
	.cln-exam-wrap .cln-exam-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.cln-exam-wrap .cln-exam-sidebar {
		position: relative;
		top: 0;
		flex-direction: column;
		max-height: none;
	}
	/* 手機版倒數計時器改為右上角固定膠囊。
	   側欄在行動版是 position: relative 的靜態區塊，考生一往下捲到題目，
	   剩餘時間就整個離開視野；這是 30 分鐘限時、時間到自動交卷的考試，
	   時間必須全程可見，故讓計時器脫離側欄文件流固定在畫面上。
	   （position: fixed 的子元素不算 flex item，所以側欄的 gap 不會留下空洞。） */
	.cln-exam-wrap .cln-exam-sidebar-timer {
		position: fixed;
		/* 主題深色 sticky header 的實際高度由 JS 量測後寫入 --cln-header-h（fallback 76px），
		   往下推 8px 緩衝，避免膠囊被 header 蓋住 */
		top: calc(var(--cln-header-h, 76px) + 8px);
		right: 12px;
		z-index: 900;
		display: flex;
		align-items: baseline;
		gap: 6px;
		padding: 5px 12px;
		background: var(--primary-dark, #28333B);
		border-radius: 999px;
		box-shadow: 0 4px 12px rgba(40, 51, 59, 0.28);
		text-align: left;
	}
	.cln-exam-wrap .cln-exam-sidebar-timer-label {
		font-size: 11px;
		line-height: 1.4;
		color: rgba(255, 255, 255, 0.72);
		margin-bottom: 0;
		white-space: nowrap;
	}
	.cln-exam-wrap .cln-exam-sidebar-timer-value {
		font-size: 15px;
		line-height: 1.4;
		color: #fff;
	}
	/* 深色膠囊底上，原本的橘、紅警示色對比不足，改用亮色系才看得出狀態 */
	.cln-exam-wrap .cln-exam-sidebar-timer-value.warning {
		color: #FBBF24;
	}
	.cln-exam-wrap .cln-exam-sidebar-timer-value.expired {
		color: #FCA5A5;
	}
	/* JS 每次換頁會把 .cln-exam-content 捲到距視窗頂 40px 處（exam.js），
	   而深色 sticky header 高約 --cln-header-h，會蓋住第一張 Part 標題卡的上緣；
	   上方再加上固定計時膠囊也佔著同一塊區域。行動版補足上方留白，
	   讓標題卡落在 header 與膠囊的下方。 */
	.cln-exam-wrap .sc-question-area > .sc-part-header:first-child {
		margin-top: calc(var(--cln-header-h, 76px) + 8px);
	}
	.cln-exam-wrap .cln-exam-sidebar-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
		align-items: center;
	}
	/* section header（Listening / Reading）獨占整行，下一行才開始放 Part */
	.cln-exam-wrap .sc-side-section {
		flex: 1 0 100%;
		margin-top: 8px;
		padding: 6px 12px;
		font-size: 12px;
	}
	.cln-exam-wrap .sc-side-section:first-child {
		margin-top: 0;
	}
	.cln-exam-wrap .sc-side-part {
		flex: 0 1 auto;
		padding: 6px 10px;
		font-size: 12px;
	}
}

/* ──────────────────────────────────────────
   Part 中介頁
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-part-intro {
	background: #fff;
	border-radius: 12px;
	padding: 32px 32px 28px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	max-width: 720px;
	margin: 0 auto;
}
.cln-exam-wrap .sc-part-intro-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 700;
	color: var(--dark, #222);
	margin: 0 0 14px;
}
.cln-exam-wrap .sc-part-intro-section-desc {
	background: rgba(10, 110, 177, 0.06);
	border-left: 3px solid var(--accent-blue, #0A6EB1);
	padding: 14px 18px;
	border-radius: 4px;
	color: var(--dark-60, #555);
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 24px;
}
.cln-exam-wrap .sc-part-intro-part {
	border-top: 1px solid var(--border, #eee);
	padding-top: 24px;
}
.cln-exam-wrap .sc-part-intro:not(:has(.sc-part-intro-section)) .sc-part-intro-part {
	border-top: none;
	padding-top: 0;
}
.cln-exam-wrap .sc-part-intro-part-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--dark, #222);
	margin: 0 0 12px;
}
.cln-exam-wrap .sc-part-intro-part-desc {
	color: var(--dark-60, #555);
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 16px;
}

/* 章節/Part 敘述、結果頁、CTA 區塊內的 H1-H6 樣式（從後台 rich editor 帶入） */
.cln-exam-wrap .sc-part-intro-section-desc h1,
.cln-exam-wrap .sc-part-intro-section-desc h2,
.cln-exam-wrap .sc-part-intro-section-desc h3,
.cln-exam-wrap .sc-part-intro-section-desc h4,
.cln-exam-wrap .sc-part-intro-section-desc h5,
.cln-exam-wrap .sc-part-intro-section-desc h6,
.cln-exam-wrap .sc-part-intro-part-desc h1,
.cln-exam-wrap .sc-part-intro-part-desc h2,
.cln-exam-wrap .sc-part-intro-part-desc h3,
.cln-exam-wrap .sc-part-intro-part-desc h4,
.cln-exam-wrap .sc-part-intro-part-desc h5,
.cln-exam-wrap .sc-part-intro-part-desc h6,
.cln-exam-wrap .sc-result-content h1,
.cln-exam-wrap .sc-result-content h2,
.cln-exam-wrap .sc-result-content h3,
.cln-exam-wrap .sc-result-content h4,
.cln-exam-wrap .sc-result-content h5,
.cln-exam-wrap .sc-result-content h6,
.cln-exam-wrap .sc-cta-global h1,
.cln-exam-wrap .sc-cta-global h2,
.cln-exam-wrap .sc-cta-global h3,
.cln-exam-wrap .sc-cta-global h4,
.cln-exam-wrap .sc-cta-global h5,
.cln-exam-wrap .sc-cta-global h6 {
	color: var(--dark, #222);
	font-weight: 700;
	line-height: 1.3;
	margin: 0.8em 0 0.4em;
}
.cln-exam-wrap .sc-part-intro-section-desc h1,
.cln-exam-wrap .sc-part-intro-part-desc h1,
.cln-exam-wrap .sc-result-content h1,
.cln-exam-wrap .sc-cta-global h1 { font-size: 28px; }
.cln-exam-wrap .sc-part-intro-section-desc h2,
.cln-exam-wrap .sc-part-intro-part-desc h2,
.cln-exam-wrap .sc-result-content h2,
.cln-exam-wrap .sc-cta-global h2 { font-size: 24px; }
.cln-exam-wrap .sc-part-intro-section-desc h3,
.cln-exam-wrap .sc-part-intro-part-desc h3,
.cln-exam-wrap .sc-result-content h3,
.cln-exam-wrap .sc-cta-global h3 { font-size: 20px; }
.cln-exam-wrap .sc-part-intro-section-desc h4,
.cln-exam-wrap .sc-part-intro-part-desc h4,
.cln-exam-wrap .sc-result-content h4,
.cln-exam-wrap .sc-cta-global h4 { font-size: 17px; }
.cln-exam-wrap .sc-part-intro-section-desc h5,
.cln-exam-wrap .sc-part-intro-part-desc h5,
.cln-exam-wrap .sc-result-content h5,
.cln-exam-wrap .sc-cta-global h5 { font-size: 15px; }
.cln-exam-wrap .sc-part-intro-section-desc h6,
.cln-exam-wrap .sc-part-intro-part-desc h6,
.cln-exam-wrap .sc-result-content h6,
.cln-exam-wrap .sc-cta-global h6 { font-size: 13px; color: var(--dark-60, #666); }
.cln-exam-wrap .sc-part-intro-audio {
	margin: 16px 0 0;
}
.cln-exam-wrap .sc-part-intro-audio audio {
	width: 100%;
	max-width: 480px;
}
.cln-exam-wrap .sc-part-intro-actions {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}
.cln-exam-wrap .sc-part-intro-start {
	min-width: 240px;
	max-width: 100%;
	padding: 12px 22px;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	/* v5.11.9: 允許按鈕在文字太長時換行變高，而不是撐爆版面 */
	height: auto;
	min-height: 44px;
	line-height: 1.45;
	white-space: normal;
	text-align: center;
}
.cln-exam-wrap .sc-part-intro-start > svg {
	flex-shrink: 0;
}
@media (max-width: 689.98px) {
	.cln-exam-wrap .sc-part-intro-start {
		font-size: 13.5px;
		padding: 12px 18px;
		min-width: 200px;
	}
}
.cln-exam-wrap .sc-audio-locked {
	background: var(--dark-05, #f5f5f5);
	color: var(--dark-60, #777);
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	border: 1px dashed var(--border, #ddd);
}
.cln-exam-wrap .sc-part-header-compact {
	margin-bottom: 12px;
}
.cln-exam-wrap .sc-part-header-compact .sc-part-title {
	font-size: 13px;
	color: var(--accent-blue, #0A6EB1);
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* v5.7.0+ : 隱藏舊版頂部步驟條（新版以 sidebar + intro 取代） */
.cln-exam-wrap .cln-exam-stepper { display: none !important; }

/* v5.7.2+ : sidebar Part 進度標籤 */
.cln-exam-wrap .sc-side-part {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 14px;
}
.cln-exam-wrap .sc-side-part-label {
	flex: 1;
	min-width: 0;
	text-align: left;
}
.cln-exam-wrap .sc-side-part-progress {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--dark-12);
	color: var(--dark-60);
	flex-shrink: 0;
	min-width: 38px;
	text-align: center;
}
.cln-exam-wrap .sc-side-part-progress.partial {
	background: rgba(217, 119, 6, 0.15);
	color: #b45309;
}
.cln-exam-wrap .sc-side-part-progress.done {
	background: rgba(22, 163, 74, 0.18);
	color: #15803d;
}
.cln-exam-wrap .sc-side-part.active .sc-side-part-progress {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}
.cln-exam-wrap .sc-side-part.active .sc-side-part-progress.done {
	background: #15803d;
	color: #fff;
}

/* v5.7.2+ : 各章節分數拆解（結果頁） */
.cln-exam-wrap .sc-section-scores-wrap {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 24px 28px;
	margin: 24px 0;
}
.cln-exam-wrap .sc-section-scores-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-dark);
	margin: 0 0 16px;
}
.cln-exam-wrap .sc-section-scores-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.cln-exam-wrap .sc-section-score-card {
	background: rgba(10, 110, 177, 0.04);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
}
.cln-exam-wrap .sc-section-score-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-blue);
	margin-bottom: 8px;
}
.cln-exam-wrap .sc-section-score-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--primary-dark);
	line-height: 1;
}
.cln-exam-wrap .sc-section-score-value .sc-section-score-max {
	font-size: 14px;
	font-weight: 400;
	color: var(--dark-40);
}
.cln-exam-wrap .sc-section-score-meta {
	font-size: 12.5px;
	color: var(--dark-40);
	margin-top: 6px;
}
.cln-exam-wrap .sc-section-score-bar {
	height: 6px;
	background: var(--dark-12);
	border-radius: 3px;
	margin-top: 10px;
	overflow: hidden;
}
.cln-exam-wrap .sc-section-score-bar-fill {
	height: 100%;
	background: var(--accent-blue);
	transition: width 0.4s ease;
}
.cln-exam-wrap .sc-section-scores-total {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed var(--border);
	font-size: 15px;
	text-align: right;
	color: var(--dark-60);
}
.cln-exam-wrap .sc-section-scores-total strong {
	font-size: 22px;
	color: var(--primary-dark);
	margin: 0 4px;
}

/* v5.7.3+ : 音檔僅播一次的自訂播放器
   v5.11.8: 改為全寬（貼近原生 audio）、有色外框 + 有色 icon/文字（不再純色填滿） */
.cln-exam-wrap .sc-audio-once {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 100%;
}
.cln-exam-wrap .sc-audio-once-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 20px;
	background: #fff;
	color: var(--accent-blue);
	border: 1.5px solid var(--accent-blue);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s, color 0.15s, transform 0.1s;
}
.cln-exam-wrap .sc-audio-once-btn svg {
	flex-shrink: 0;
}
.cln-exam-wrap .sc-audio-once-btn-label {
	font-size: 14px;
	letter-spacing: 0.3px;
}
.cln-exam-wrap .sc-audio-once-btn:hover {
	background: var(--accent-blue-10);
}
.cln-exam-wrap .sc-audio-once-btn:active {
	transform: scale(0.99);
}
.cln-exam-wrap .sc-audio-once-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 20px;
	background: #fff;
	border: 1.5px solid var(--accent-blue);
	border-radius: 999px;
	color: var(--accent-blue);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}
.cln-exam-wrap .sc-audio-once-progress svg {
	flex-shrink: 0;
}
.cln-exam-wrap .sc-audio-once-bar {
	flex: 1;
	height: 6px;
	background: var(--accent-blue-10);
	border-radius: 3px;
	overflow: hidden;
}
.cln-exam-wrap .sc-audio-once-bar-fill {
	height: 100%;
	background: var(--accent-blue);
	width: 0%;
	transition: width 0.1s linear;
}
.cln-exam-wrap .sc-audio-once-time {
	color: var(--accent-blue);
	font-size: 12.5px;
	font-weight: 500;
	min-width: 78px;
	text-align: right;
}

/* v5.7.4+ : 提前交卷提示，桌機/平板靠右，手機保持預設 */
.cln-exam-wrap .sc-submit-early-hint {
	text-align: right;
	color: var(--dark-60);
	font-size: 13px;
	padding: 8px 4px 0;
}
@media (max-width: 689.98px) {
	.cln-exam-wrap .sc-submit-early-hint {
		text-align: left;
	}
}

/* v5.7.4+ : 手機 sidebar Part 改為全寬一行（label 左、題數右） */
@media (max-width: 999.98px) {
	.cln-exam-wrap .sc-side-part {
		flex: 1 0 100%;
		padding: 10px 16px;
		font-size: 13px;
		display: flex !important;
		justify-content: space-between;
		align-items: center;
	}
	.cln-exam-wrap .sc-side-part-label {
		text-align: left;
		flex: 1;
	}
	.cln-exam-wrap .sc-side-part-progress {
		flex-shrink: 0;
	}
	.cln-exam-wrap .cln-exam-sidebar-nav {
		gap: 8px;
	}
	.cln-exam-wrap .sc-side-section {
		margin-top: 12px;
	}
}

/* ──────────────────────────────────────────
   獨立考題頁（/exam/{slug}）的頁面留白 — 所有相關規則集中於此，勿再散落他處

   沿革：
   - v5.11.5：standalone-wrap 統一 60/40px 上下 padding
   - v5.11.6：改為只有 step 2-4（作答／確認／結果）加上下間距；
              step 1（報名表）刻意不加，好讓右側 hero 配圖延伸到頁面邊
   - v5.11.9：手機版改由表單欄自己出 56px/48px 的上下 gap
   - v6.9.6：step 1 選項一多就會貼上主選單與頁尾，故補回上下留白。
              ⚠ 只能加在**左側表單欄**（.cln-exam-info-form-body），
              加在 .cln-standalone-wrap 容器上會連右側配圖一起推下來。
              桌機的實際值寫在本檔最下方「桌機入場畫面」區塊（≥1000px 的
              padding: 60px 60px 60px 0），手機版則沿用 v5.11.9 的 56/48px。
   ────────────────────────────────────────── */

/* 左右留白（原本內嵌在 class-exam-cpt.php 的 <style>，v6.9.6 移入統一管理）
   ⚠ ≤768px 必須維持 16px：has-hero 的負 margin 抵銷鏈（-16px）以此為計算基礎，
   改 20px 會讓 hero 圖左右各出現 2px 白縫、不再貼齊螢幕邊。 */
.cln-standalone-wrap {
	padding-left: 20px;
	padding-right: 20px;
}
@media (max-width: 768px) {
	.cln-standalone-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* step 2-4（作答／確認／結果頁）：整個容器上下留白 */
.cln-standalone-wrap.cln-step-2,
.cln-standalone-wrap.cln-step-3,
.cln-standalone-wrap.cln-step-4 {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}
@media (max-width: 999.98px) {
	.cln-standalone-wrap.cln-step-2,
	.cln-standalone-wrap.cln-step-3,
	.cln-standalone-wrap.cln-step-4 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* ──────────────────────────────────────────
   #4 + #5：桌機（Blocksy 桌機 ≥1000px）入場畫面（step1 has-hero）
   - 輸入欄位左緣對齊網站內容左緣（移除 80px 內縮）
   - 入場畫面高度上限 ≈ 100vh（扣掉主題 header），內容垂直置中、整頁免捲動
   - --cln-header-h 由 exam.js 量測主題 header 實際高度後設定（fallback 76px）
   ────────────────────────────────────────── */
@media (min-width: 1000px) {
	/* 高度上限只在獨立頁面（/exam/slug）套用，避免影響被嵌入一般頁面的考題 */
	.cln-standalone-wrap .cln-exam-info-form.has-hero {
		min-height: 0;
		height: calc(100vh - var(--cln-header-h, 76px));
	}
	/* 左緣對齊（移除 80px 內縮）；上下 60px 是 v6.9.6 補的表單留白，
	   刻意只加在這一欄，右側 hero 配圖仍延伸到頁面邊 */
	.cln-exam-wrap .cln-exam-info-form.has-hero .cln-exam-info-form-body {
		padding: 60px 60px 60px 0;
		overflow: auto;               /* 內容若仍超高，左欄自身捲動，整頁不捲 */
		/* 改用首尾子元素 margin auto 取代 justify-content:center：
		   內容少時垂直置中、內容超高時 auto 收為 0，頂端不被裁切且可正常捲動 */
		justify-content: flex-start;
	}
	.cln-exam-wrap .cln-exam-info-form.has-hero .cln-exam-info-form-body > :first-child {
		margin-top: auto;
	}
	.cln-exam-wrap .cln-exam-info-form.has-hero .cln-exam-info-form-body > :last-child {
		margin-bottom: auto;
	}
}

/* ──────────────────────────────────────────
   OTP Email 驗證 Modal
   ────────────────────────────────────────── */
.sc-otp-modal {
	position: fixed; inset: 0; z-index: 100000;
	display: none; align-items: center; justify-content: center; padding: 20px;
}
.sc-otp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.sc-otp-dialog {
	position: relative; background: #fff; border-radius: 12px;
	max-width: 420px; width: 100%; padding: 28px 26px 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.30); text-align: center;
}
.sc-otp-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--primary-dark, #28333B); }
.sc-otp-desc { margin: 0 0 18px; font-size: 14px; color: var(--dark-60, #555); line-height: 1.6; }
.sc-otp-input {
	width: 100%; text-align: center; font-size: 26px; letter-spacing: 10px;
	font-weight: 700; padding: 12px 0; margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}
.sc-otp-error { text-align: center; margin: 4px 0 0; color: #C4392A !important; font-weight: 600; }
.sc-otp-actions { display: flex; gap: 10px; margin-top: 18px; }
.sc-otp-actions .sc-btn { flex: 1; justify-content: center; transition: filter .15s, transform .05s, box-shadow .15s; }
.sc-otp-actions .sc-btn:hover:not(:disabled) { filter: brightness(0.93); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.sc-otp-actions .sc-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.88); }
.sc-otp-actions .sc-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sc-otp-close {
	position: absolute; top: 10px; right: 14px; background: transparent; border: 0;
	font-size: 24px; line-height: 1; color: #999; cursor: pointer; padding: 4px 8px;
}
.sc-otp-close:hover { color: #000; }

/* 提交中全螢幕遮罩 + 轉圈動畫 */
.sc-submit-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: rgba(20,28,34,0.55); backdrop-filter: blur(2px); }
.sc-submit-overlay-box { background: #fff; border-radius: 14px; padding: 28px 34px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 86vw; }
.sc-submit-spinner { width: 46px; height: 46px; margin: 0 auto 16px; border: 4px solid rgba(10,110,177,0.2); border-top-color: #0A6EB1; border-radius: 50%; animation: sc-submit-spin 0.8s linear infinite; }
@keyframes sc-submit-spin { to { transform: rotate(360deg); } }
.sc-submit-overlay-msg { margin: 0; font-size: 15px; font-weight: 600; color: #28333B; line-height: 1.6; }

/* ──────────────────────────────────────────
   WordPress emoji 腳本殘留的 <img class="emoji"> 防護（v6.9.5）

   後台的 wpemoji 會把 contenteditable 內打的 emoji 就地換成 s.w.org 的 twemoji SVG。
   那些 SVG 只有 viewBox、沒有 width/height，本站前台又因主題移除了 print_emoji_styles
   而缺少 WP 內建的 img.emoji{1em} 規則，於是 <img> 取瀏覽器預設 300px、撐爆整個版面。
   來源已在後台 richContentVal() 與伺服器端 kses_rich() 各攔一次，
   此處是既有資料與任何漏網情況的最後防線。
   ────────────────────────────────────────── */
.cln-exam-wrap img.emoji,
.cln-exam-wrap img.wp-smiley {
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	margin: 0 .07em !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	vertical-align: -0.1em !important;
}

/* 富文字區塊內的一般圖片也不該撐出容器 */
.cln-exam-wrap .sc-cta-global img,
.cln-exam-wrap .sc-result-content img,
.cln-exam-wrap .sc-terms-content img {
	max-width: 100%;
	height: auto;
}

/* ──────────────────────────────────────────
   結果頁的考生基本資料表格（v6.9.7）
   版面對齊成績單 PDF 的資訊表格，讓考生在畫面上與 PDF 看到一致的內容。
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-result-info { margin-bottom: 24px; }
.cln-exam-wrap .sc-result-info-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.cln-exam-wrap .sc-result-info-table th,
.cln-exam-wrap .sc-result-info-table td {
	border: 1px solid var(--border, rgba(40, 51, 59, 0.12));
	padding: 9px 12px;
	text-align: left;
	vertical-align: middle;
	line-height: 1.5;
}
.cln-exam-wrap .sc-result-info-table th {
	background: var(--dark-05, #f5f7f9);
	color: var(--dark-60, #5b6b76);
	font-weight: 600;
	font-size: 13px;
	width: 18%;
}
/* 手機：兩欄一列太擠，改為單欄堆疊；補位用的空格直接隱藏 */
@media (max-width: 640px) {
	.cln-exam-wrap .sc-result-info-table,
	.cln-exam-wrap .sc-result-info-table tbody,
	.cln-exam-wrap .sc-result-info-table tr,
	.cln-exam-wrap .sc-result-info-table th,
	.cln-exam-wrap .sc-result-info-table td { display: block; width: auto; }
	.cln-exam-wrap .sc-result-info-table th { border-bottom: 0; }
	.cln-exam-wrap .sc-result-info-table th:empty,
	.cln-exam-wrap .sc-result-info-table td:empty { display: none; }
}

/* 報名表標題與第一個欄位之間的呼吸空間（v6.9.8）
   .cln-exam-section-title 的 margin-bottom: 8px 是給考題頁用的，
   報名表第一個輸入框緊貼在標題下方會太擠，故只在報名表區塊加大。 */
.cln-exam-wrap .cln-exam-info-form .cln-exam-section-title {
	margin-bottom: 26px;
}
@media (max-width: 640px) {
	.cln-exam-wrap .cln-exam-info-form .cln-exam-section-title {
		margin-bottom: 20px;
	}
}

/* ──────────────────────────────────────────
   B6：報名頁「考前須知」
   刻意做成低調的淺灰卡片而不是警示色：它是「先看一下」的說明，
   不是錯誤訊息，若用紅／黃底會跟下方的 #sc-info-error 搶注意力。
   行高拉到 1.9 是因為這是條列式資訊，考生多半只掃讀，行距鬆一點才好找。
   ────────────────────────────────────────── */
.cln-exam-wrap .sc-exam-notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--dark-05, rgba(40, 51, 59, 0.05));
	border: 1px solid var(--border, rgba(40, 51, 59, 0.10));
	border-radius: var(--radius-md, 10px);
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--text-body, #333);
}

.cln-exam-wrap .sc-exam-notice-title {
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.9;
	color: var(--text-dark, #3E3A39);
}

/* 佈景主題常把 ul 的 list-style 與 padding 清成 0，
   這裡明寫回來，確保項目符號與縮排在任何主題下都一致。 */
.cln-exam-wrap .sc-exam-notice-list {
	margin: 0;
	padding-left: 20px;
	list-style: disc outside;
}

.cln-exam-wrap .sc-exam-notice-list li {
	margin: 0;
	padding: 0;
}

@media (max-width: 640px) {
	.cln-exam-wrap .sc-exam-notice {
		padding: 12px 14px;
		margin-bottom: 20px;
	}
}

/* ──────────────────────────────────────────
   B13：鍵盤操作的焦點可見性
   ────────────────────────────────────────── */

/* 三處焦點一律用深色 primary-dark 的外環，理由有二：
   一是對白底與淡藍底（.selected／.active）都有極高對比，遠超過 WCAG 對非文字
   元件 3:1 的要求；二是站上的藍色已經被「已選取／目前位置」占用，焦點若也用藍色，
   考生會分不清「我選了這個」與「鍵盤游標在這個」。焦點只加外環、不動底色與邊框，
   所以焦點與選取兩種狀態可以同時出現、同時看得懂。 */

/* 作答選項：真正的 radio／checkbox 被 opacity: 0 藏起來（見上方 .sc-option input 規則），
   瀏覽器預設的焦點環於是畫在一顆看不見的元素上，純鍵盤使用者用 Tab／方向鍵移動時
   完全看不出焦點停在哪個選項。用 :focus-within 把焦點狀態畫回外層的 .sc-option。
   （此處不用 :focus-visible：焦點在子元素 input 上，:focus-within 才抓得到。） */
.cln-exam-wrap .sc-option:focus-within {
	outline: 3px solid var(--primary-dark, #28333B);
	outline-offset: 2px;
}

/* 題號圓點與側欄 Part：兩者都是靠 JS 綁事件的 div（不是原生按鈕），焦點環必須自己補。
   :focus-visible 只在鍵盤操作時出現，滑鼠點擊不會留下外框。
   放在檔案最末端，是為了在同分特異性下勝過前面的 .current／.active 規則。 */
.cln-exam-wrap .sc-nav-dot:focus-visible,
.cln-exam-wrap .sc-side-part:focus-visible {
	outline: 3px solid var(--primary-dark, #28333B);
	outline-offset: 2px;
}

/* ──────────────────────────────────────────
   即將自動交卷的警示條（v6.11.1）
   ──────────────────────────────────────────
   v6.9.17 為了讓「剩 30 秒即將自動交卷」在作答中（step 2）也看得到，改由 JS 動態插入
   一條 .sc-auto-submit-warning 到 body 末端，但當時漏了樣式：沒有 position 的元素會被
   當成一般區塊排在頁尾之後，考生在題目區捲動時根本不在視窗內，等於那次修正在它唯一要
   解決的情境下沒有生效。這裡補上固定定位，讓它無論捲到哪裡都壓在畫面最上方。
   刻意不放在 .cln-exam-wrap 之下：JS 是 append 到 body，不是外掛容器內。 */
.sc-auto-submit-warning {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	padding: 12px 16px;
	background: #C4392A;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	animation: sc-auto-submit-warning-in .2s ease-out;
}

@keyframes sc-auto-submit-warning-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@media (max-width: 640px) {
	.sc-auto-submit-warning { padding: 10px 12px; font-size: 14px; }
}

/* ──────────────────────────────────────────
 *  v6.17.0 本機作答暫存與離頁保護
 * ────────────────────────────────────────── */

/* 報名表上方的「偵測到未完成的作答」橫幅 */
.cln-exam-wrap .sc-draft-banner {
	margin: 0 0 16px;
	padding: 16px 18px;
	border: 1px solid var(--accent-blue);
	border-left-width: 4px;
	border-radius: var(--radius-md);
	background: var(--accent-blue-10);
}
.cln-exam-wrap .sc-draft-title {
	font-weight: 700;
	font-size: 15px;
	color: var(--accent-blue);
	margin-bottom: 6px;
}
.cln-exam-wrap .sc-draft-body {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-body);
}
.cln-exam-wrap .sc-draft-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cln-exam-wrap .sc-draft-actions .sc-btn {
	flex: 0 1 auto;
}

/* 畫面下方的短暫提示（返回被擋、已接續作答） */
.cln-exam-wrap .sc-exam-toast {
	display: none;
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 99999;
	max-width: min(560px, calc(100vw - 32px));
	box-sizing: border-box;
	padding: 14px 18px;
	border-radius: var(--radius-md);
	background: var(--primary-dark);
	color: var(--white);
	font-size: 14px;
	line-height: 1.7;
	box-shadow: 0 6px 24px rgba(40, 51, 59, 0.28);
}

@media (max-width: 600px) {
	.cln-exam-wrap .sc-exam-toast {
		left: 16px;
		right: 16px;
		bottom: 16px;
		transform: none;
		max-width: none;
	}
	.cln-exam-wrap .sc-draft-actions .sc-btn {
		flex: 1 1 100%;
	}
}