.myButton {
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background: linear-gradient(to bottom, #0767ac 5%, #476e9e 100%);
	background-color: #0767ac;
	border-radius: 10px;
	border: 1px solid #4e6096;
	display: inline-block;   /* 중요: inline-block으로 중앙정렬 가능 */
	cursor: pointer;
	color: #ffffff;
	font-family: Arial, sans-serif;
	font-size: 1.1rem;
	padding: 0.4em 1.5em;
	text-decoration: none;
	text-align: center;
	text-shadow: 0px 1px 0px #283966;
	white-space: nowrap;
	width: auto;
	min-width: 100px;
	max-width: 300px;
	box-sizing: border-box;
	transition: background 0.3s, transform 0.1s;
}

/* 호버 효과 */
.myButton:hover {
	background: linear-gradient(to bottom, #0767ac 5%, #7892c2 100%);
	background-color: #0767ac;
}

/* 클릭 효과 */
.myButton:active {
	transform: scale(0.98);
}

.container {
    display: flex;             /* 컨테이너를 Flexbox로 만듭니다. */
    justify-content: center;   /* 가로축 중앙 정렬 */
    flex-wrap: wrap;           /* (선택 사항) 화면이 좁아지면 다음 줄로 넘어갑니다. */
    gap: 10px;                 /* (선택 사항) 버튼들 사이의 간격을 줍니다. */
    margin-top: 50px;
    margin-bottom: 30px;
}

/* 모바일 대응 */
@media (max-width: 480px) {
	.myButton {
		font-size: 1rem;
		padding: 0.3em 1.2em;
		max-width: 90%;
		min-width: 80px;
	}
}