@charset "utf-8";

#wrap {
	width: 100%;
	min-width: 320px;
	position: relative;
	margin: 0 auto;
	height: 100%;
}

#header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	margin: 0 auto;
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
}

#container {
	width: 100%;
	position: relative;
	margin: 0 auto;
}

.inner {
	width: 1200px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

#footer {
	width: 100%;
	clear: both;
	position: relative;
	margin: 0 auto;
	margin-top: auto;
}



/* 반응형 */
@media all and (max-width:1399px) {
	.inner {
		width: auto;
		margin-left: 3.90625%;
		margin-right: 3.90625%;
	}


}

@media all and (max-width:1199px) {
	.inner {
		width: auto;
		margin-left: 3.90625%;
		margin-right: 3.90625%;
	}


}

/* 타블렛 가로 */
@media all and (max-width:1099px) {}


/* 타블렛 세로 */
@media all and (max-width:1023px) {}


/* 타블렛 가로 미만 ~ 모바일 */
@media all and (max-width:767px) {
	.inner {
		width: auto;
		margin-left: calc(100vw * (30/640));
		margin-right: calc(100vw * (30/640));
	}


}

/* 모바일 상세 */
@media all and (max-width:640px) {}

/* 모바일 가로 */
@media all and (max-width:568px) {}

@media all and (max-width:425px) {}

@media all and (max-width:375px) {}

@media all and (max-width:320px) {}

.skeleton-box {
	height: 20px;/* 기존 14px → 더 큼직하게 */
	background: linear-gradient(-90deg, #eee, #f5f5f5, #eee);
	background-size: 200% 100%;
	animation: shimmer 1.2s infinite;
  border-radius: 6px; /* 모서리 부드럽게 */
  display: inline-block;
}

.skeleton-box.short {
  width: 100px;   /* 기존 60px → 더 넓게 */
}

.skeleton-box.medium {
  width: 160px;   /* 기존 120px */
}

.skeleton-box.long {
  width: 240px;   /* 기존 200px */
}

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}