@font-face {
  font-family: 'NanumSquareNeo-Variable';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Cafe24Supermagic-Bold-v1.0';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: 'NanumSquareNeo-Variable';
  background-color: #706c6c;
  margin: 0;
  height: 100vh;
}
/*==========챗 ui 컨테이너=========*/
.chat-container {
  min-width: 300px;
  max-height: 400px;
  background-color: #928a8a;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 10px;
  /*overflow-y: scroll; /* 스크롤이 항상 표시되도록 설정 */
  overflow-y: auto; /* 스크롤이 필요한 경우만 표시 */
  scrollbar-width: thin; /* 스크롤바 두께 설정 */
  scrollbar-color: #ececec transparent; /* 스크롤바 색상 설정 */
  margin: auto; /* 가운데 정렬을 위한 수정 */
  position: absolute;
  top: calc(50% - 30px); /* 컨테이너를 화면 중앙에서 위로 50px 이동 */
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top:20px;
}

/* Webkit 기반 브라우저용 스크롤바 스타일 */
.chat-container::-webkit-scrollbar {
  width: 6px; /* 스크롤바의 너비 */
}

.chat-container::-webkit-scrollbar-thumb {
  background: #ececec; /* 스크롤바 색상 */
  border-radius: 3px; /* 스크롤바 모서리 반경 */
}


/*상단 메세지*/
#title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 30px;
}
#subtext1,#subtext2{
  font-weight: none;
  font-size: 13px;
  color: #353436;
}

/*채팅 메세지 출력 ui */
.chat-bubble {
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
}
/* 사용자 bubble */
.user-bubble {
  background-color: #f0f4f5;
  color: #000;
  align-self: flex-end;
}

.bot-bubble {
  background-color: #b0c0d4;
  color: #000;
  align-self: flex-start;
}
/* input + 전송아이콘 영역 */
.input-container {
  display: flex;
  align-items: center; /* 요소를 수직으로 가운데 정렬 */
  position: absolute;
  bottom: 50px; /* 원하는 간격에 맞게 조정 */
  left: 50%;
  transform: translateX(-50%);
}

/*사용자 채팅 입력 프롬프트 */
.chat-input {
  padding: 18px;
  /*width: calc(100% - 10px);*/ /* 아이콘과 여백을 고려한 너비 계산 */
  width : 220px;
  border: 1px solid #928a8a;
  background-color: #f0f4f5;
  border-radius: 5px;
  outline: none;
  font-size: 16px;
  position: relative; /* 부모 요소에 대한 상대적 위치 설정을 위해 추가 */
  right : 24px;
}

/* 전송 아이콘 버튼모양 없애기 */
#sendButton {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 28px;
  color: #f0f4f5;
  transition: all 0.2s ease-out;
  position: absolute; /* 입력 상자 내에서의 상대적 위치 설정 */
  right: -25px; /* 원하는 위치에 맞게 조정 */
  bottom: 13px;
}

#sendButton:hover {
  color: #424242;
}

/*모바일 요소 조절 */
@media screen and (max-width: 768px) {
  .chat-container {
    max-height: 60vh; /* 모바일 기기에서는 뷰포트 높이의 70%로 제한 */
  }
  .input-container {
    bottom: 30px;
  }
  select {
    text-align: center; /* 모바일에서도 가운데 정렬을 위한 추가 스타일 */
  }
  /*
  #bot-icon{
    position: absolute;
    top: 140px; /* 상단에서의 거리 조정
  }*/
}
/*
@media screen and (max-width: 568px) {
  .chat-container {
    margin-left: 20px;
    margin-right: 20px; /*오른쪽은 안 되는 이유는 ?..
  }
}
*/
@media screen and (min-width: 768px) {
  .chat-container {
    width: 500px;
  }
  .chat-input {
    width : 420px;
  }
}

@media screen and (min-width: 992px) {

  .intro-container img{
    top : -150px;
  }
  .input-group {
   position: relative;
   bottom : 150px;
  }
  .intro-container button{
      position: relative;
      bottom: 130px;
  }
  .chat-container {
    top : calc(50% - 60px);
  }
}


/*로딩 메세지로 변경*/
#loader-message{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  animation: blink 1s infinite alternate;
}
#noneani{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  font-size: 10px;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*광고 배너*/
#ad {
  width: 100%;
}

/*=========시작 페이지 컨테이너=========*/

.intro-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 50px;
}
.intro-container img{
  width: 60%;
  min-width: 300px;
  position: relative;
  bottom : 20px;
}

/*start 버튼 */
.intro-container button {
border-radius: 6px;
width : 200px;
padding: 20px;
border: 2px solid rgba(255, 255, 255, 0.5);
font-family: 'NanumSquareNeo-Variable';
font-size: 20px;
color : black;
transition: 0.5s;
background-size: 200% auto;
margin-top: 30px;
}
.startBtn:hover {
  background-position: right center;
  cursor: pointer;
}

.startBtn {
  background-image: linear-gradient(to right, #aba5e8 0%, #e7ebbc 51%, #aba5e8 100%);
  
}

/*date 안에 있는 달력 아이콘 조절*/
input[type="date"]::-webkit-calendar-picker-indicator {
  /*font-size: 18px;
  margin-right: 5px;*/
  cursor: pointer;
}


/* 웹킷 브라우저용 캘린더 아이콘 숨기기
input[type="date"]::-webkit-calendar-picker-indicator{
  display: none;
}
*/

#datepicker {
    width: 106px; /* 너비 조정 */
    border: 2px solid gray;
    border-radius: 6px;
    padding: 10px 30px 10px 10px; /* 오른쪽 패딩을 아이콘 너비만큼 늘리기*/
    color: black;
    outline: none;
    cursor: pointer;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative; /* 아이콘과 겹치지 않도록 상대 위치 지정 */
    -webkit-appearance: none; /* iOS와 Safari에서 기본 스타일링 제거 */
    -moz-appearance: none; /* Firefox에서 기본 스타일링 제거 */
    appearance: none; /* 다른 브라우저에서 기본 스타일링 제거 */
    background-color: white;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAANtJREFUSEvFld0NwjAMhK+TAJvAJjAJbAKbwChlEshJTWSZWAl2f/zShyb+cmfHGbBwDAvnRwvwmQ5grWv9Xx9wBHAHsHdaNwK4AHjl/Vr6M/0kJBKEHCxA9jQC4N5ycK1gNUCruyyFP11lKdgMcAbAIpYuUVLCCthljJPhkQvAO8HW3aWktykxv++KGheAtvDy1YJKpF0uABPXIDo517kBcrN1SUMAKrimGfUQNZhVAYssvc7DkC0rI2RRz3zaHjDHuKaV5SLqmUOvWUzvm9B8cHp8/muNd2p2Q760AzkZpIfB7AAAAABJRU5ErkJggg==");
    background-repeat: no-repeat;
    background-position: right 10px center; /* 화살표 아이콘 위치 조정 */
    text-align: center;
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.input-group label {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center; /* 라벨 가운데 정렬 */
  width: 100%; /* 라벨 너비를 100%로 설정하여 가운데 정렬 적용 */
}


/*
#date{
  border :2px solid #f0f4f5;
  border-radius: 6px;
  padding :10px;
  color : black;
  outline: none;
  cursor: pointer;
  font-size: 15px;
  margin-top : 5px;
  margin-bottom: 5px;
}
*/

/* select 스타일 */
#hour {
  border: 2px solid gray;
  border-radius: 6px;
  padding: 10px 30px 10px 10px; /* 오른쪽 패딩 아이콘 너비만큼 늘리기*/
  color: black;
  outline: none;
  cursor: pointer;
  font-size: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative; /* 아이콘과 겹치지 않도록 상대 위치 지정 */
  -webkit-appearance: none; /* iOS와 Safari에서 기본 스타일링 제거 */
  -moz-appearance: none; /* Firefox에서 기본 스타일링 제거 */
  appearance: none; /* 다른 브라우저에서 기본 스타일링 제거 */
  width: 150px; 
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAJ5JREFUSEvtk9sNgCAMRS+b6CY6ipPoJuokruIoehNICKFQTEj8qD++6Dn0Njh0vlxnPkxQTdgi+n9EK4ATwC1sdQAwATikVkpDJnzz8DkjIXz3gkWSlAQEXG8h7+wglsRw/hu/dMCanITfw86LcC7UnINUQihzr8K1grQTvqvgLYJYwmcx83QWmojimjDw6gELC1oFarAJ1FHZDKpRPbjcGRnmtrrsAAAAAElFTkSuQmCC"); /* 화살표 아이콘 추가 */
  background-repeat: no-repeat;
  background-position: right 10px center; /* 화살표 아이콘 위치 조정 */
  background-color: white;
}

#hour {
  text-align-last: center; /* 모바일 브라우저에 대한 정렬 속성 */
}

/*로봇 아이콘/출처 */

#icon-link{
  display: none;
  text-decoration: none;
  color: #424242;
  font-size: 14px;
  margin-right:5px;
  position:fixed;
  top: 55px;
  right: 0;
  font-family: sans-serif;
  z-index: -5;
}


#bot-icon{
  display: none;
  width: 85px;
  position: absolute;
  top: 120px; /* 상단에서의 거리 조정 */
  left: 50%; /* 가운데 정렬 */
  transform: translateX(-50%); /* 가운데 정렬을 위한 조정*/
  z-index: -1;
  opacity: 0.8;
}