@font-face {
	font-family: 'PB_B';
	font-weight: bold;
	font-style: bold;
	src: url("./fonts/Pretendard-Bold.woff")  format('woff');
}

@font-face {
	font-family: 'PB_M';
	font-weight: normal;
	font-style: normal;
	src: url("./fonts/Pretendard-Medium.woff")  format('woff');
}

@font-face {
	font-family: 'PB_R';
	font-weight: normal;
	font-style: normal;
	src: url("./fonts/Pretendard-Regular.woff")  format('woff');
}

@font-face {
	font-family: 'PB_L';
	font-weight: 100;
	font-style: normal;
	src: url("./fonts/Pretendard-Light.woff")  format('woff');
}

@font-face {
	font-family: 'KP_B';
	font-weight: bold;
	font-style: normal;
	src: url("./fonts/KoPubWorld Batang Bold.ttf")  format('truetype');
}

@font-face {
	font-family: 'KP_M';
	font-weight: normal;
	font-style: normal;
	src: url("./fonts/KoPubWorld Batang Medium.ttf")  format('truetype');
}

@font-face {
	font-family: 'KP_L';
	font-weight: 100;
	font-style: normal;
	src: url("./fonts/KoPubWorld Batang Light.ttf")  format('truetype');
}

@font-face {
	font-family: 'TELL';
	font-weight: normal;
	font-style: normal;
	src: url("./fonts/tell_font.ttf")  format('truetype');
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: keep-all !important;
}

body {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  background: #4D0505;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  cursor: pointer;
}

ul,li,ol {
  list-style: none;
}

#hd_pop {
  width: 100%;
  height: 100%;
}

#hd_pop .hd_pops {
  position: fixed;
}

@media (max-width: 1200px) {
  .hd_pops {
    left: 10px !important;
  }
}

@media (max-width: 700px) {
  .hd_pops_con {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 400px) {
  #hd_pop .hd_pops {
    width: 90% !important;
    height: auto !important;
  }
}

/* 로딩 중 스크롤/바운스/제스처 차단 */
html.is-loading,
body.is-loading {
  overflow: hidden !important;
  height: 100%;
  overscroll-behavior: none; /* 안드/데스크탑 바운스 차단 */
  touch-action: none;        /* 터치 스크롤 제스처 차단 */
}

/* iOS 고정 잠금용 */
body.scroll-lock {
  position: fixed;
  width: 100%;
}


/* ===== Loading Screen ===== */
#LoadingScreen {
  width: 100%;
  height: 100vh;
  position: fixed;            /* 화면 위에 덮어쓰기 */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #712E2E;
  background: radial-gradient(circle, rgba(113, 46, 46, 1) 0%, rgba(90, 37, 37, 1) 70%); */
  background: #4D0505;
  z-index: 99999;
  opacity: 1;
  transition: opacity .6s ease;
  will-change: opacity;
}
#LoadingScreen[aria-hidden="true"] {
  opacity: 0;                 /* 1) 페이드아웃 */
  pointer-events: none;
}
/* display:none 전환은 JS에서 transitionend 이후 처리 */

#LoadingScreen .flower {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#LoadingScreen .flower img {
  position: absolute;
  top: -15vh;                 /* 화면 위쪽 바깥에서 떨어지게 */
  width: 60px;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.12));
  /* 개별 img에 animation, left, delay를 JS가 주입 */
}

/* 낙하 키프레임: Y로 떨어지면서 좌우 sway + 약간 회전 */
@keyframes petal-fall {
  0%   { transform: translate3d(var(--xStart,0), -20vh, 0) rotate(0deg); opacity: 0; }
  5%   { opacity: 1; }
  50%  { transform: translate3d(calc(var(--xStart,0) + var(--xDrift, 0)), 50vh, 0) rotate(180deg); }
  100% { transform: translate3d(calc(var(--xStart,0) + calc(var(--xDrift, 0) * 2)), 120vh, 0) rotate(360deg); opacity: 0; }
}

#LoadingScreen .text {
  width: auto;
  height: auto;
  text-align: center;
  pointer-events: none;
}
#LoadingScreen .text h1 {
  font-family: 'KP_M';
  font-weight: normal;
  font-size: 50px;
  color: #fff;
  margin-bottom: 30px;
}
#LoadingScreen .text p {
  font-family: 'KP_M';
  font-weight: normal;
  font-size: 60px;
  color: #fff;
}

/* 접근성: 모션 최소화 사용자에겐 애니메이션 줄이기 */
@media (prefers-reduced-motion: reduce) {
  #LoadingScreen .flower img { animation: none !important; opacity: 1; }
  #LoadingScreen { transition: none; }
}

/* === 타이핑 커서 === */
.typing-caret {
  display: inline-block;
  width: 0.6ch;               /* 커서 폭 (글꼴에 맞춰 조절) */
  height: 65px;
  border-left: 2px solid #fff;/* 커서 색/두께 */
  transform: translateY(10px); /* 살짝 내림(선택) */
  animation: caret-blink 1s step-end infinite;
  position: absolute;
}

@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 줄바꿈/폭 변화로 점프 방지 (선택) */
#LoadingScreen .text h1,
#LoadingScreen .text p {
  white-space: nowrap;        /* 한 줄 타이핑을 원하면 유지 */
}

@media (max-width: 700px) {
  #LoadingScreen .text h1 {
    font-size: 36px;
    margin-bottom: 20px;
  }

  #LoadingScreen .text p {
    font-size: 48px;
  }

  .typing-caret {
    height: 55px;
    transform: translateY(8px);
  }
}

@media (max-width: 400px) {
  #LoadingScreen .flower img {
    scale: 0.7;
  }

  #LoadingScreen .text h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  #LoadingScreen .text p {
    font-size: 36px;
  }

  .typing-caret {
    height: 45px;
    transform: translateY(6px);
  }
}