@font-face {
  font-family: 'CustomFont';
  src: url('/font/KCC은영체(웹,모바일제작용).woff2') format('woff2'),
       url('/font/KCC은영체(웹,모바일제작용).woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
	.bg-fader {
	  position: fixed;
	  top: 0; left: 0;
	  width: 100vw; height: 100vh;
	  z-index: -2;
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	  transition: opacity 1.5s;
	  opacity: 0;
	  pointer-events: none;
	  will-change: opacity;
	  backface-visibility: hidden;
	}
	.bg-fader.active {
	  opacity: 1;
	}
body {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  font-family: 'CustomFont', sans-serif;
  /* overflow: hidden; */
  position: relative;
}

	.menu-bar {
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  gap: 12px;
	  padding: 20px 0 0 0;
	  position: relative;
	  z-index: 5;
	  /* 기본은 한 줄(줄바꿈 없음) */
	  flex-wrap: nowrap;
	}
	.menu-bar a {
	  color: #fff;
	  text-decoration: none;
	  font-size: 1.2rem;
	  padding: 8px 16px;
	  border-radius: 24px;
	  background: rgba(0,0,0,0.6);
	  transition: background 0.2s, transform 0.3s;
	  display: inline-block;
	  word-break: keep-all;
	  text-align: center;
	  min-width: 120px;
	  max-width: 48%;
	  box-sizing: border-box;
	}
	.menu-bar a:hover {
	  background: rgba(0,0,0,0.8);
	  transform: scale(1.12);
	  z-index: 10;
	}
	@media (max-width: 500px) {
	  .menu-bar {
		z-index: 5;
			flex-wrap: wrap; /* 모바일에서만 줄바꿈 허용 */
			gap: 8px;
	  }
	  .menu-bar a {
			min-width: 45vw;
			max-width: 90vw;
			font-size: 1rem;
			padding: 10px 4px;
	  }
	  .youtube-floating {
			width: 90vw;
			height: 50vw;
			min-width: 180px;
			min-height: 100px;
			left: 5vw;
			bottom: 12vw;
	  }
}
	#modal-popup {
	  /* 예시: 더 넓고 높게 */
	  width: 80vw;         /* 전체 화면의 80% 너비 */
	  max-width: 800px;    /* 최대 800px */
	  height: 90vh;        /* 전체 화면의 90% 높이 */
	  max-height: 1000px;   /* 최대 1000px */
	  /* 나머지 스타일은 그대로 */
	  overflow: hidden; /* 모달 자체에는 스크롤 X */
	  padding: 0;
	}
	#modal-iframe {
	  overflow: auto; /* 실제 스크롤은 여기서만 */
	  display: block;
	}