:root {
 	--primary-color: #4e72d9;
 	--secondary-color: #f5f7ff;
 	--text-color: #333;
 	--button-hover: #375ec2;
 	--border-radius: 10px;
 	--box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 	--transition: all 0.3s ease;
 }

 body {
 	font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
 	margin: 0;
 	padding: 0;
 	background: linear-gradient(135deg, #f5f7ff 0%, #e9efff 100%);
 	color: var(--text-color);
 	line-height: 1.6;
 }

 .container {
 	max-width: 800px;
 	margin: 40px auto;
 	background-color: #fff;
 	border-radius: var(--border-radius);
 	box-shadow: var(--box-shadow);
 	overflow: hidden;
 }

 .header {
 	background-color: var(--primary-color);
 	color: white;
 	padding: 30px;
 	text-align: center;
 }

 .header h1 {
 	margin: 0;
 	font-weight: 600;
 	font-size: 2.2rem;
 }

 .header p {
 	margin-top: 10px;
 	font-size: 1.1rem;
 	opacity: 0.9;
 }

 .form-container {
 	padding: 30px 30px 0 30px;
 }

 .question-container {
 	margin-bottom: 0px;
 	border-bottom: 1px solid #eee;
 	padding-bottom: 25px;
 }

 .question {
 	font-size: 1.2rem;
 	font-weight: 600;
 	margin-bottom: 15px;
 	color: #222;
 }

 .question-number {
 	background-color: var(--primary-color);
 	color: white;
 	border-radius: 50%;
 	width: 26px;
 	height: 26px;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	margin-right: 10px;
 	font-size: 0.9rem;
 }

 .options {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }

 .option {
 	cursor: pointer;
 	display: flex;
 	align-items: center;
 	padding: 12px 15px;
 	border: 1px solid #ddd;
 	border-radius: var(--border-radius);
 	transition: var(--transition);
 }

 .option:hover {
 	background-color: var(--secondary-color);
 	border-color: var(--primary-color);
 }

 .radio-custom {
 	width: 20px;
 	height: 20px;
 	border: 2px solid #ddd;
 	border-radius: 50%;
 	display: inline-block;
 	margin-right: 12px;
 	position: relative;
 	transition: var(--transition);
 }

 .option:hover .radio-custom {
 	border-color: var(--primary-color);
 }

 .option.selected .radio-custom {
 	border-color: var(--primary-color);
 }

 .option.selected .radio-custom::after {
 	content: "";
 	position: absolute;
 	top: 3px;
 	left: 3px;
 	width: 10px;
 	height: 10px;
 	background-color: var(--primary-color);
 	border-radius: 50%;
 }

 .option-text {
 	font-size: 1rem;
 }

 .result-container {
 	display: none;
 	padding: 0 30px;
 	text-align: center;
 	background-color: var(--secondary-color);
 }

 .result-container h2 {
 	color: var(--primary-color);
 	font-size: 1.8rem;
 	margin-bottom: 15px;
 }

 .result-container p {
 	font-size: 1.1rem;
 	margin-bottom: 25px;
 	line-height: 1.7;
 }

 .cta-button {
 	background-color: var(--primary-color);
 	color: white;
 	border: none;
 	border-radius: var(--border-radius);
 	padding: 15px 25px;
 	font-size: 1.1rem;
 	font-weight: 600;
 	cursor: pointer;
 	transition: var(--transition);
 	box-shadow: 0 4px 8px rgba(78, 114, 217, 0.3);
 }

 .cta-button:hover {
 	background-color: var(--button-hover);
 	transform: translateY(-2px);
 	box-shadow: 0 6px 12px rgba(78, 114, 217, 0.4);
 }

 .next-button {
 	background-color: var(--primary-color);
 	color: white;
 	border: none;
 	border-radius: var(--border-radius);
 	padding: 12px 20px;
 	font-size: 1rem;
 	font-weight: 500;
 	cursor: pointer;
 	transition: var(--transition);
 	margin-top: 15px;
 	float: right;
 }

 .next-button:hover {
 	background-color: var(--button-hover);
 }

 .next-button:disabled {
 	background-color: #ccc;
 	cursor: not-allowed;
 }

 .progress-container {
 	height: 6px;
 	background-color: #eee;
 	border-radius: 3px;
 	margin-bottom: 0px;
 	overflow: hidden;
 }

 .progress-bar {
 	height: 100%;
 	background-color: var(--primary-color);
 	width: 0%;
 	transition: width 0.5s ease;
 }

 .highlight {
 	color: var(--primary-color);
 	font-weight: 600;
 }

 /* Animations */
 @keyframes fadeIn {
 	from {
 		opacity: 0;
 		transform: translateY(10px);
 	}

 	to {
 		opacity: 1;
 		transform: translateY(0);
 	}
 }

 .fade-in {
 	animation: fadeIn 0.5s ease forwards;
 }

 .hidden {
 	display: none;
 }

 @media (max-width: 768px) {
 	.container {
 		margin: 20px;
 		width: auto;
 	}

 	.header {
 		padding: 20px;
 	}

 	.header h1 {
 		font-size: 1.8rem;
 	}

 	.form-container {
 		padding:20px;
 	}
 }

.cta-button {
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: var(--border-radius);
	padding: 15px 25px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	box-shadow: 0 4px 8px rgba(78, 114, 217, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* 加入动画 */
	animation: bounce 1.5s infinite;
}

/* 动画关键帧 */
@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}


 .button-content {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }