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

html {
  background: #000;
}

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: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 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;
  /* 디버그: wrapper 영역 확인용 */
  outline: 3px solid #ff000000;  /* 빨간색 테두리 */
  outline-offset: -3px;
}

/* 배경 이미지 (img 태그) - wrapper의 크기를 결정 */
.bg-image {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  /* 디버그: 배경 이미지 영역 확인용 */
  outline: 3px solid #00ffff00;  /* 시안색 테두리 */
  outline-offset: -3px;
}

/* 배경 이미지 블러 레이어 - 검정색 영역을 블러 배경으로 채움 */
.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;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  padding-top: 10%;
}

.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;
  /* 디버그: 영역 확인용 */
  outline: 2px solid #00ff0000;  /* 녹색 테두리 */
  outline-offset: -2px;
}

.bt-image {
  cursor: pointer;
  transition: all 0.15s ease;
  /* 배경 이미지 크기 대비 상대적인 크기로 조절 */
  width: 80%;  /* 부모 컨테이너의 20% 너비 */
  height: auto;  /* 비율 유지 */
  max-width: none;  /* 최대 크기 제한 제거 - 완전히 상대적으로 */
  object-fit: contain;
  /* 위치 조절 - 화면 크기에 관계없이 상대적 위치 유지 */
  position: absolute;
  top: 90%;  /* 화면 하단 쪽 (조절 가능) */
  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: white;
  font-size: 16px;  /* iOS 자동 줌 방지를 위한 최소 크기 */
  font-family: inherit;
  text-align: center; /* 중앙 정렬로 변경 */
  resize: none;
  line-height: 1.5;
  caret-color: white; /* 흰색 커서로 변경 */
  overflow: auto;
  padding: 2% 3%;  /* 패딩 추가 */
  box-sizing: border-box;
  display: block;  /* block으로 변경 */
  user-select: text;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0);  /* 디버그: 녹색 그림자 */
}

.msg-input-field::placeholder {
  color: #ccc;
  font-size: 16px;  /* iOS 자동 줌 방지를 위한 최소 크기 */
  text-align: center; /* 중앙 정렬로 변경 */
  line-height: 1.5;
  transform: translateY(0%); /* 기본 위치로 복원 */
}

.msg-char-counter {
  position: relative;  /* 👈 상대적 위치 설정 가능하도록 */
  top: -40%;  /* 👈 세로 위치 조절 (양수 = 아래, 음수 = 위) */
  left: 35%;  /* 👈 가로 위치 조절 (양수 = 오른쪽, 음수 = 왼쪽) */
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;  /* iOS 자동 줌 방지를 위한 최소 크기 */
  font-weight: bold;
  transition: all 0.3s ease;
}

/* Thanks to 입력 필드 */
.thanks-to-input {
  position: absolute;
  /* 배경 이미지 크기 대비 상대적인 위치 */
  top: 40%;  /* 화면 세로 위치 (조절 가능) */
  left: 50%;  /* 화면 가로 중앙 */
  transform: translateX(-50%);
  /* 상대적인 크기 */
  width: 90%;  /* 가로 거의 꽉 차게 */
  max-width: none;  /* 최대 크기 제한 제거 - 완전히 상대적으로 */
  height: auto;  /* 자동 높이 */
  padding: 1.5% 2%;  /* 상대적인 패딩 */
  border: none;  /* 디버그 테두리 제거 */
  border-radius: 4px;

  font-size: 16px;  /* iOS 자동 줌 방지를 위한 최소 크기 */
  background: rgba(255, 0, 0, 0);  /* 디버그: 빨간색 배경으로 클릭 영역 확인 */
  color: white;  /* 입력 텍스트를 흰색으로 */
  text-align: center;
  outline: none;
  z-index: 10;  /* 다른 요소들보다 위에 표시 */
  box-shadow: 0 0 10px rgba(255, 0, 255, 0);  /* 디버그: 글로우 효과 */
  
  /* 텍스트 입력 활성화 */
  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::placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;  /* iOS 자동 줌 방지를 위한 최소 크기 */
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

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

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

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

/* 커서 깜빡임 효과 강화 */
.msg-input-field:focus {
  caret-color: white;
  animation: none; /* 기본 브라우저 커서 애니메이션 사용 */
  border-color: rgba(255, 255, 255, 0);  /* 포커스 시 테두리 강조 */
  background: rgba(255, 255, 255, 0);  /* 포커스 시 배경 강조 (투명도 줄임) */
  outline: none;
}

/* 메시지 입력 안내 텍스트 */
.msg-instructions {
  position: absolute;
  /* 배경 이미지 크기 대비 상대적인 위치 */
  top: 50%;  /* 화면 세로 위치 (조절 가능) */
  left: 50%;  /* 화면 가로 중앙 */
  transform: translate(-50%, -50%);  /* 중앙 정렬 보정 */
  /* 상대적인 크기 */
  width: 100%;  /* 가로 꽉 차게 */
  height: 40%;  /* 부모 컨테이너의 10% 높이 */
  max-width: none;  /* 최대 크기 제한 제거 - 완전히 상대적으로 */
  max-height: none;  /* 최대 높이 제한 제거 - 완전히 상대적으로 */
  padding: 1% 2%;  /* 상대적인 패딩 */
  text-align: center;
  display: flex;  /* flex로 내용 중앙 정렬 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;  /* 배경 이미지 위에 표시 */
  pointer-events: none;  /* 클릭 이벤트 통과 - 입력창 클릭 가능하도록 */
  
  /* 디버그 스타일 제거됨 */
}

.msg-instructions-korean {
  position: relative;  /* 👈 상대적 위치 설정 가능하도록 */
  top: 30%;  /* 👈 세로 위치 조절 (양수 = 아래, 음수 = 위) */
  left: 0%;  /* 👈 가로 위치 조절 (양수 = 오른쪽, 음수 = 왼쪽) */
  color: rgba(255, 255, 255, 0.6);  /* 가독성 향상 */
  font-size: 16px;  /* iOS 자동 줌 방지를 위한 최소 크기 */
  line-height: 1.5;
  margin-bottom: 2%;  /* 입력창과의 간격 */
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 500;  /* 약간 굵게 */
}

.msg-instructions-english {
  position: relative;  /* 👈 상대적 위치 설정 가능하도록 */
  top: 0%;  /* 👈 세로 위치 조절 (양수 = 아래, 음수 = 위) */
  left: 0%;  /* 👈 가로 위치 조절 (양수 = 오른쪽, 음수 = 왼쪽) */
  color: rgba(255, 255, 255, 0.9);  /* 가독성 향상 */
  font-size: 16px;  /* iOS 자동 줌 방지를 위한 최소 크기 */
  line-height: 1.5;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", sans-serif;
  font-weight: 500;  /* 약간 굵게 */
}

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


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

/* ===== 유틸리티 클래스 - 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;
  }
}

/* PC 모드 (1025px 이상) - 모바일처럼 414px 고정 */
@media (min-width: 1025px) {
  html, body {
    max-width: 414px;
    margin: 0 auto;
  }
  
  .bg-container {
    max-width: 414px;
    margin: 0 auto;
  }
  
  .bg-image-container {
    max-width: 414px;
  }
}