/* Hana2 폰트 정의 */
@font-face {
  font-family: 'Hana2';
  src: url('fonts/Hana2-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hana2';
  src: url('fonts/Hana2-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hana2';
  src: url('fonts/Hana2-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hana2';
  src: url('fonts/Hana2-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hana2';
  src: url('fonts/Hana2-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* CM (Condensed Medium) - 필요시 사용 */
@font-face {
  font-family: 'Hana2-CM';
  src: url('fonts/Hana2-CM.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  background: #000;
  position: relative;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-family: "Hana2", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.bg-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.bg-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 배경 이미지와 요소들을 감싸는 wrapper */
.bg-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 100%;
  display: inline-block;
}

/* 배경 이미지 (img 태그) - wrapper의 크기를 결정 */
.bg-image {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* 최상단 레이어 (배경과 동일한 크기/위치) */
.upper-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 9999;  /* 가장 위에 표시 */
  pointer-events: none;  /* 클릭 이벤트는 아래 요소로 전달 */
}

/* 배경 이미지 블러 레이어 - 검정색 영역을 블러 배경으로 채움 */
.bg-image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("Resources/bg.png") no-repeat center top;
  background-size: cover;
  filter: blur(30px);
  opacity: 0.8;
  z-index: 0;
}

/* 별빛 효과 */
.star {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background: #fff;
  border-radius: 50%;
  animation: twinkle 2.5s infinite ease-in-out;
  z-index: 1;
}

.star:nth-child(1) { top: 25%; left: 12%; animation-delay: 0s; }
.star:nth-child(2) { top: 23%; left: 78%; animation-delay: 0.2s; }
.star:nth-child(3) { top: 17%; left: 45%; animation-delay: 0.4s; }
.star:nth-child(4) { top: 35%; left: 92%; animation-delay: 0.6s; }
.star:nth-child(5) { top: 42%; left: 18%; animation-delay: 0.8s; }
.star:nth-child(6) { top: 67%; left: 83%; animation-delay: 1s; }
.star:nth-child(7) { top: 13%; left: 67%; animation-delay: 1.2s; }
.star:nth-child(8) { top: 78%; left: 32%; animation-delay: 1.4s; }
.star:nth-child(9) { top: 29%; left: 7%; animation-delay: 0.1s; }
.star:nth-child(10) { top: 55%; left: 88%; animation-delay: 0.3s; }
.star:nth-child(11) { top: 81%; left: 15%; animation-delay: 0.5s; }
.star:nth-child(12) { top: 6%; left: 54%; animation-delay: 0.7s; }
.star:nth-child(13) { top: 47%; left: 73%; animation-delay: 0.9s; }
.star:nth-child(14) { top: 72%; left: 6%; animation-delay: 1.1s; }
.star:nth-child(15) { top: 19%; left: 91%; animation-delay: 1.3s; }
.star:nth-child(16) { top: 88%; left: 47%; animation-delay: 0.2s; }
.star:nth-child(17) { top: 31%; left: 28%; animation-delay: 0.4s; }
.star:nth-child(18) { top: 64%; left: 95%; animation-delay: 0.6s; }
.star:nth-child(19) { top: 11%; left: 39%; animation-delay: 0.8s; }
.star:nth-child(20) { top: 93%; left: 71%; animation-delay: 1s; }
.star:nth-child(21) { top: 26%; left: 61%; animation-delay: 1.2s; }
.star:nth-child(22) { top: 59%; left: 4%; animation-delay: 1.4s; }
.star:nth-child(23) { top: 76%; left: 89%; animation-delay: 0.1s; }
.star:nth-child(24) { top: 3%; left: 22%; animation-delay: 0.3s; }
.star:nth-child(25) { top: 51%; left: 56%; animation-delay: 0.5s; }
.star:nth-child(26) { top: 84%; left: 11%; animation-delay: 0.7s; }
.star:nth-child(27) { top: 37%; left: 82%; animation-delay: 0.9s; }
.star:nth-child(28) { top: 69%; left: 38%; animation-delay: 1.1s; }
.star:nth-child(29) { top: 15%; left: 3%; animation-delay: 1.3s; }
.star:nth-child(30) { top: 96%; left: 63%; animation-delay: 0.2s; }

/* 성공 메시지 오버레이 */
.success-overlay {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: flex-start;  /* 👈 center → flex-start 변경! */
  padding-top: 70%;  /* 👈 이제 이 값으로 위치 조절 가능! */
}

.success-image {
  max-width: 80%;
  max-height: 60%;
  width: auto;
  height: auto;
  animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes twinkle {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(0.8);
    box-shadow: 0 0 0px #fff;
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.1);
    box-shadow: 0 0 2px #fff;
  }
}

.msg-image {
  cursor: default;
  /* 배경 이미지 크기 대비 상대적인 크기로 조절 */
  width: 80%;  /* 부모 컨테이너의 80% 너비 */
  height: auto;  /* 비율 유지 */
  max-width: none;  /* 최대 크기 제한 제거 - 완전히 상대적으로 */
  object-fit: contain;
  /* 위치 조절 - 화면 크기에 관계없이 상대적 위치 유지 */
  position: absolute;
  top: 47%;  /* 화면 세로 중앙 (0% = 맨 위, 100% = 맨 아래) */
  left: 50%;  /* 화면 가로 중앙 (0% = 맨 왼쪽, 100% = 맨 오른쪽) */
  transform: translate(-50%, -30%);  /* 중앙 정렬 보정 */
  display: block;
  z-index: 2;  /* 배경 이미지 위에 표시 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.bt-image {
  cursor: pointer;
  transition: all 0.15s ease;
  /* 배경 이미지 크기 대비 상대적인 크기로 조절 */
  width: 80%;  /* 부모 컨테이너의 20% 너비 */
  height: auto;  /* 비율 유지 */
  max-width: none;  /* 최대 크기 제한 제거 - 완전히 상대적으로 */
  object-fit: contain;
  /* 위치 조절 - 화면 크기에 관계없이 상대적 위치 유지 */
  position: absolute;
  top: 88%;  /* 5% 위로 이동 (90% → 85%) */
  left: 50%;  /* 화면 가로 중앙 */
  transform: translate(-50%, -50%);  /* 중앙 정렬 보정 */
  display: block;
  z-index: 2;  /* 배경 이미지 위에 표시 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}




.bt-image:active {
  transform: translate(-50%, -50%) scale(0.95);
  filter: brightness(0.9);
}

.bt-image.pressed {
  transform: translate(-50%, -50%) scale(0.95);
  filter: brightness(0.9);
}



.msg-input-field {
  width: 100%;
  max-width: 100%;
  min-height: 250%;  /* 👈 상대적 최소 높이 (조절 가능: 부모 대비 %) */
  height: 100%;  /* 👈 기본 높이 설정 (조절 가능) */
  border: none;
  border-radius: 8px;
  outline-offset: 3px;
  background: rgba(0, 0, 0, 0);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;         /* Medium */
  line-height: 18px;
  letter-spacing: 0.67px;
  font-family: "Hana2", sans-serif;
  text-align: left;         /* 왼쪽 정렬 */
  resize: none;
  caret-color: white;
  overflow: auto;
  padding: 8% 2% 3% 2%;  /* 이름 입력란과 동일한 패딩 */
  box-sizing: border-box;
  display: block;
  user-select: text;
}

.msg-input-field::placeholder {
  color: rgba(255, 255, 255, 0.5);  /* 반투명 흰색 */
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.67px;
  text-align: left;
  transform: translateY(0%);
}

.msg-char-counter {
  position: relative;  /* 👈 상대적 위치 설정 가능하도록 */
  top: -40%;  /* 👈 세로 위치 조절 (양수 = 아래, 음수 = 위) */
  left: 80%;  /* 왼쪽 정렬 */
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;         /* Medium */
  line-height: 18px;
  letter-spacing: 0.67px;
  transition: all 0.3s ease;
}

/* Thanks to 입력 필드 */
.thanks-to-input {
  position: absolute;
  /* 배경 이미지 크기 대비 상대적인 위치 */
  top: 40%;  /* 화면 세로 위치 */
  left: 55%;  /* 조금 더 왼쪽으로 (60% → 55%) */
  transform: translateX(-50%);
  /* 상대적인 크기 */
  width: 90%;  /* 가로 거의 꽉 차게 */
  max-width: none;  /* 최대 크기 제한 제거 - 완전히 상대적으로 */
  height: auto;  /* 자동 높이 */
  padding: 1.5% 10%;  /* 상대적인 패딩 */
  border: none;
  border-radius: 4px;

  /* 디자이너 가이드 적용 */
  font-size: 13px;
  font-weight: 500;         /* Medium */
  line-height: 18px;
  letter-spacing: 0.67px;
  color: #FFFFFF;
  font-family: "Hana2", sans-serif;
  background: transparent;
  text-align: left;         /* 왼쪽 정렬 */
  outline: none;
  z-index: 10;
  
  /* 텍스트 입력 활성화 */
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  
  /* 클릭 이벤트 보장 */
  pointer-events: auto !important;
  cursor: text !important;
}

.thanks-to-input.completed {
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
}

.thanks-to-input.completed:disabled {
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

/* 모든 기기에서 동일한 크기 */

.thanks-to-input::placeholder {
  color: rgba(255, 255, 255, 0.5);  /* 반투명 흰색 */
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.67px;
  font-family: "Hana2", sans-serif;
}

.msg-char-counter.limit {
  background: rgba(255, 107, 107, 0.9);
  color: white;
  animation: pulse 1s infinite;
}

/* 애니메이션 정의는 파일 하단에 통합되어 있음 */

/* 커서 깜빡임 효과 강화 */
.msg-input-field:focus {
  caret-color: white;
  animation: none;
  outline: none;
}

/* 메시지 입력 안내 텍스트 */
.msg-instructions {
  position: absolute;
  /* 배경 이미지 크기 대비 상대적인 위치 */
  top: 50%;  /* 화면 세로 위치 */
  left: 55%;  /* 이름 입력창과 동일한 가로 위치 (60% → 55%) */
  transform: translate(-50%, -50%);  /* 중앙 정렬 보정 */
  /* 상대적인 크기 */
  width: 90%;  /* 이름 입력창과 동일한 너비 */
  height: 40%;  /* 부모 컨테이너의 10% 높이 */
  max-width: none;  /* 최대 크기 제한 제거 - 완전히 상대적으로 */
  max-height: none;  /* 최대 높이 제한 제거 - 완전히 상대적으로 */
  padding: 2% 9%;  /* 상대적인 패딩 */
  text-align: left;  /* 왼쪽 정렬 */
  display: flex;  /* flex로 내용 중앙 정렬 */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* 왼쪽 정렬 */
  z-index: 2;  /* 배경 이미지 위에 표시 */
}

.msg-instructions-korean {
  position: relative;  /* 👈 상대적 위치 설정 가능하도록 */
  top: 20%;  /* 한 줄 위로 이동 (30% → 0%) */
  left: 2%;  /* 👈 가로 위치 조절 (양수 = 오른쪽, 음수 = 왼쪽) */
  color: rgba(255, 255, 255, 0.5);  /* 알파값 0.5로 변경 */
  font-size: 13px;
  font-weight: 500;         /* Medium */
  line-height: 18px;
  letter-spacing: 0.67px;
  margin-bottom: 2%;
  font-family: "Hana2", sans-serif;
  text-align: left;         /* 왼쪽 정렬 */
}

.msg-instructions-english {
  position: relative;  /* 👈 상대적 위치 설정 가능하도록 */
  top: 0%;  /* 👈 세로 위치 조절 (양수 = 아래, 음수 = 위) */
  left: 0%;  /* 👈 가로 위치 조절 (양수 = 오른쪽, 음수 = 왼쪽) */
  color: rgba(255, 255, 255, 0.5);  /* 알파값 0.5로 변경 */
  font-size: 13px;
  font-weight: 500;         /* Medium */
  line-height: 18px;
  letter-spacing: 0.67px;
  font-family: "Hana2", sans-serif;
  text-align: left;         /* 왼쪽 정렬 */
}

/* 메시지 입력 영역 컨테이너 */
.msg-input-overlay {
  position: relative;  /* 👈 상대적 위치 설정 가능하도록 */
  top: 0%;  /* 👈 세로 위치 조절 (양수 = 아래, 음수 = 위) */
  left: 0%;  /* 👈 가로 위치 조절 (양수 = 오른쪽, 음수 = 왼쪽) */
  width: 100%;  /* 부모(.msg-instructions)의 전체 너비 */
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* 왼쪽 정렬로 변경 */
  gap: 1%;  /* 입력창과 글자수 카운터 간격 */
  margin-top: 3%;  /* 위 텍스트와의 간격 (조절 가능) */
}


/* 모든 기기에서 동일한 스타일 적용 - 미디어 쿼리 제거됨 */

/* ===== 유틸리티 클래스 - JS에서 사용 ===== */
.hidden {
  opacity: 0 !important;  /* 투명하게 만들지만 공간은 유지 */
  transition: opacity 0.3s ease;  /* 부드러운 페이드 효과 */
}

.show {
  display: flex !important;
}

.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.loading {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.pulse {
  animation: pulse 0.15s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.cooldown-message {
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}