 * {
 	box-sizing: border-box;
 }

 body {
 	font-family: 'Segoe UI', sans-serif;
 	background-color: #111;
 	color: #f2f2f2;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	padding: 20px;
 	min-height: 100vh;
 	margin: 0;
 }

 .form-container {
 	background-color: #222;
 	padding: 30px 20px;
 	border-radius: 12px;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
 	max-width: 480px;
 	width: 100%;
 }

 .event-message {
 	background-color: #333;
 	padding: 12px 16px;
 	border-radius: 8px;
 	font-size: 15px;
 	color: #ffcc00;
 	margin-bottom: 20px;
 	text-align: center;
 }

 h2 {
 	margin-bottom: 20px;
 	font-size: 24px;
 	color: #ffffff;
 	text-align: center;
 }

 .form-group {
 	margin-bottom: 15px;
 }

 label {
 	display: block;
 	font-weight: 600;
 	margin-bottom: 6px;
 	color: #ccc;
 }

 input[type="text"],
 input[type="tel"] {
 	width: 100%;
 	padding: 10px 12px;
 	border: 1px solid #444;
 	border-radius: 8px;
 	font-size: 14px;
 	background-color: #111;
 	color: #fff;
 }

 input:focus {
 	border-color: #ffcc00;
 	outline: none;
 }

 .privacy-text {
 	background-color: #2b2b2b;
 	padding: 10px;
 	border-radius: 8px;
 	font-size: 13px;
 	color: #aaa;
 	margin-bottom: 10px;
 }

 .checkbox-group {
 	margin: 15px 0;
 	font-size: 14px;
 }

 .checkbox-group input {
 	margin-right: 6px;
 }

 button {
 	width: 100%;
 	background-color: #ffcc00;
 	color: #111;
 	border: none;
 	padding: 12px;
 	font-size: 16px;
 	font-weight: bold;
 	border-radius: 8px;
 	cursor: pointer;
 	margin-top: 10px;
 }

 button:hover {
 	background-color: #e6b800;
 }

 .error {
 	color: #ff6666;
 	font-size: 13px;
 	margin-top: -10px;
 	margin-bottom: 10px;
 }

 /* 모달 스타일 */
 .modal {
 	display: none;
 	position: fixed;
 	z-index: 1000;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	overflow: auto;
 	background-color: rgba(0, 0, 0, 0.6);
 }

 .modal-content {
 	background-color: #222;
 	margin: 20% auto;
 	padding: 20px;
 	border: 1px solid #888;
 	width: 80%;
 	max-width: 400px;
 	border-radius: 10px;
 	text-align: center;
 	color: #fff;
 }

 .modal-content button {
 	margin-top: 20px;
 	background-color: #ffcc00;
 	color: #000;
 }

 @media screen and (max-width: 480px) {
 	.form-container {
 		padding: 20px 16px;
 	}

 	.modal-content {
 		margin: 40% auto;
 	}
 }