@font-face {
	font-family: 'CookieRun-Regular';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'S-CoreDream-3Light';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: 'S-CoreDream-3Light', sans-serif; /* 'CookieRun-Regular' */
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f9f9f9; /* 배경색 추가 */
}

header {
	background-color: #4CAF50; /* 헤더 색상 */
	color: white;
	/* padding: 10px; */
	text-align: center;
	/* width: 100%; */
}
header h1 { margin: .5rem;font-size: 1.8rem;}

.main-container {
	flex: 1;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
}

h1 {
	font-size: 2.5em;
	margin-bottom: 10px;
}

p {
	font-size: 1.2em;
	margin-bottom: 20px;
}

.game-list {
	display: flex;
	flex-wrap: wrap; /* 여러 줄에 걸쳐 표시 */
	justify-content: center; /* 가운데 정렬 */
	/* width: 90%;  */	/* 너비 90% */
	margin: 0 auto; /* 가운데 정렬 */
}

.game-item {
	width: 200px; /* 각 게임 아이템의 고정 너비 */
	height: 300px; /* 각 게임 아이템의 고정 높이 */
	margin: 10px;
	border: 1px solid #ccc;
	padding: 10px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	text-align: left;
	overflow: hidden; /* 넘치는 내용 숨기기 */
}

.game-item img {
	width: 100%; /* 이미지 너비 100% */
	height: 150px; /* 이미지 높이 설정 */
	object-fit: contain;
	margin-bottom: 10px;
}

.game-item h2 {
	font-size: 1.5em;
	margin: 0; /* 여백 제거 */
	white-space: nowrap; /* 줄바꿈 없이 표시 */
	overflow: hidden; /* 넘치는 내용 숨기기 */
	text-overflow: ellipsis; /* 말줄임표 표시 */
}

.game-item p {
	font-size: 1em;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* 최대 3줄 표시 */
	overflow: hidden; /* 넘치는 내용 숨기기 */
	text-overflow: ellipsis; /* 말줄임표 표시 */
}

a {
	color: inherit; /* 상속된 색상 사용 */
	text-decoration: none; /* 밑줄 제거 */
}

a:link,
a:visited,
a:hover,
a:active {
	color: inherit; /* 링크 상태에 관계없이 색상 상속 */
}

footer {
	text-align: center; /* 가운데 정렬 */
	/* padding: 10px; */
	background-color: #4CAF50; /* 푸터 색상 */
	color: white; /* 푸터 글자 색상 */
	position: relative;
	bottom: 0;
	/* width: 100%; */
	font-size: 0.9em; /* 글자 크기 작게 조정 */
}
footer p {margin: .5rem;font-size: .8rem;}


@media (max-width: 768px) {
	.game-item {
		width: 150px; /* 모바일에서 게임 아이템 너비 조정 */
	}
}

.hide {display:none;}