:root {
    --border-rad-lg: 15px;
    --light-text: #2e2e2e;
    --dark-bg: #ffffff;
    --input-bg: #f8efed;
    --button-bg: #2f4f4f;
    --main-nomal: #f9e4df;
    --main-dark: #fac6b8;
    --main-mdark: #fbbaa9;
    --main-mdark2: #f7dbd4;
    --main-bla: #403b3b;
    --main-bla2: #bdbbbb;
    --main-aiback:#fa876a;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
/* 모바일 브라우저를 위한 스타일 */



@media (min-width: 553px) and (max-width: 991.2px) {
    .modal {
        width: 50vw !important;
        height: 80vh !important;
      
    }
    .btncontainer::-webkit-scrollbar {
        width: 12px; /* 스크롤바 너비를 더 크게 */
    }
    
    .btncontainer::-webkit-scrollbar-thumb {
        background-color: #ffffff; /* 더 진한 색상 */
        border-radius: 6px; /* 스크롤바 둥근 모서리 */
        border: 3px solid rgba(131, 160, 182, 0.863); /* 스크롤바 외곽선 */
    }

    
  
}

@media (min-width: 991.2px) {
    .modal {
        width: 34vw !important;
        height: 80vh !important;
      
    }

    #chatbox{
        width: 70vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
  .btncontainer{
    width: 56vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .btncontainer::-webkit-scrollbar {
    width: 12px; /* 스크롤바 너비를 더 크게 */
}

.btncontainer::-webkit-scrollbar-thumb {
    background-color: #ffffff; /* 더 진한 색상 */
    border-radius: 6px; /* 스크롤바 둥근 모서리 */
    border: 3px solid rgba(131, 160, 182, 0.863); /* 스크롤바 외곽선 */
}

.modal::-webkit-scrollbar {
    width: 12px; /* 스크롤바 너비를 더 크게 */
}

.modal::-webkit-scrollbar-thumb {
    background-color: #ffffff; /* 더 진한 색상 */
    border-radius: 6px; /* 스크롤바 둥근 모서리 */
    border: 3px solid rgba(65, 76, 84, 0.863); /* 스크롤바 외곽선 */
}
}

@media (max-width: 868px) {
    .btncontainer::-webkit-scrollbar {
        width: 12px; /* 스크롤바 너비를 더 크게 */
    }

    .btncontainer::-webkit-scrollbar-thumb {
        background-color: #ffffff; /* 더 진한 색상 */
        border-radius: 6px; /* 스크롤바 둥근 모서리 */
        border: 3px solid rgba(131, 160, 182, 0.863); /* 스크롤바 외곽선 */
    }

    .modal::-webkit-scrollbar {
        width: 12px; /* 스크롤바 너비를 더 크게 */
    }

    .modal::-webkit-scrollbar-thumb {
        background-color: #ffffff; /* 더 진한 색상 */
        border-radius: 6px; /* 스크롤바 둥근 모서리 */
        border: 3px solid rgba(65, 76, 84, 0.863); /* 스크롤바 외곽선 */
    }


}

@media(max-width:500px){
    #floating-button {
 
        right: 84px !important;  
    }

}

.btncontainer {
    width: 56vw; /* 화면의 80% 너비 */
    height: 500px; /* 화면의 50% 높이 */
    background-color: rgba(131, 160, 182, 0.863); /* 반투명 검은색 배경 */
    border-radius: 25px; /* 둥근 모서리 */
    
    position: absolute; /* 고정 위치 */
    bottom: 6%; /* 초기 위치, 화면 아래에 숨겨져 있음 */
    left: 36%; /* 중앙 정렬을 위해 왼쪽에서 2% 위치 */
    transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* 부드러운 위치 이동, 투명도 변경 및 크기 변화 효과 */
    transform-origin: calc(100% - 10%) calc(100% - 10px); /* 변형의 기준점을 오른쪽 아래 코너에서 각각 10px 안쪽으로 설정 */

    z-index: 1100; /* 다른 요소들 위에 위치 */
    display: none; /* 기본적으로 보이지 않음 */
    padding:  10px;
    padding-left: 30px;
    padding-right: 0px;
    opacity: 0; /* 초기 투명도 설정 */
    transform: scale(0); /* 초기 크기를 0으로 설정 */
    overflow-y: auto; /* 내용이 높이를 초과하면 스크롤바 생성 */
    overflow-x: hidden; /* 가로 스크롤바 숨김 */
    -webkit-overflow-scrolling: touch; /* iOS Safari에서 부드러운 스크롤을 위한 설정 */

    padding-bottom: 10px;

      /* 스크롤바 스타일 */
      ::-webkit-scrollbar {
        width: 8px; /* 스크롤바 너비 */
    }

    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1); /* 스크롤바 트랙 색상 */
    }

    ::-webkit-scrollbar-thumb {
        background-color: white; /* 스크롤바 색상 */
        border-radius: 10px; /* 스크롤바 둥근 모서리 */
        border: 3px solid rgba(131, 160, 182, 0.863); /* 스크롤바 테두리 (배경색과 동일하게 설정하여 트랙과 융합) */
    }

}

.visible {
    bottom: 72px; /* 화면의 가운데로 이동 */
 
    opacity: 1; /* 완전히 불투명하게 */
    transform: scale(1); /* 크기를 원래대로 복원 */
}



.curtain {
    position: absolute;
    height: 100%;
    background-color: black;
    top: 0;
    z-index: 3311;
    width: 50%; /* 초기 너비 설정 */
    transition: width 1.7s ease-out; /* 부드러운 너비 변화 적용 */
    transition-delay: 0.7s; /* 애니메이션 지연 시간 1초 */
    
}

.left-curtain {
    background-color: #f7dbd4; /* 회색 배경 설정 */
    background-image: url('../images/haim_logo_left3.webp'); /* 로고 이미지 삽입 */
    background-repeat: no-repeat;
    background-position: right center; /* 오른쪽 중앙에 로고 배치 */
    left: 0;
    height: 100vh;
}

.right-curtain {
    background-color: #f7dbd4; /* 회색 배경 설정 */
    background-image: url('../images/haim_logo_right3.webp'); /* 로고 이미지 삽입 */
    background-repeat: no-repeat;
    background-position: left center; /* 오른쪽 중앙에 로고 배치 */
    right: 0;
    height: 100vh;
}

/* 웹 폰트 로드 전까지 기본 폰트 사용 설정 */
@font-face {
    font-family: 'Nanum Gothic';
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');
}

body {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color:#fceae6;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
    font-family: 'Nanum Gothic', sans-serif;
}
.containertt {
    display: flex;
   /*  justify-content: space-between;  양 끝에 요소 배치 */
    align-items: center;  /* 세로 중앙 정렬 */
    width: 100%;  /* 컨테이너의 폭을 전체로 설정 */
    height: 35px;
    padding: 0px;  /* 상하좌우 패딩 */
    position: relative; /* 상대적 위치 지정 컨텍스트 설정 */
}
#chatbox {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 상단과 하단의 요소들 사이에 공간을 최대로 배치 */
    background-color: var(--dark-bg);
    /* width: 360px;
    min-height: 500px; */
    left: 2%;
    right: 2%;
    width: 96vw;
    height: calc(100vh - 20px); /* 20px의 여백을 빼고 높이 계산 */
    border-radius:35px;
  
    padding-left: 1em;
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    box-shadow: 0 8px 16px rgba(233, 176, 176, 0.77); /* 그림자 강도 및 투명도 조정 */

    display: flex;
    flex-direction: column;
    top: 10px; /* 상단에서 10px 떨어지게 고정 설정 */
}

#profile-photo {
    width: 43;  /* 프로필 사진의 너비 */
    height: 43px;  /* 프로필 사진의 높이 */
    border-radius: 50%;  /* 원형으로 만들기 */
   margin-left: 4px;
    object-fit: cover;  /* 이미지 비율 유지하며 채우기 */
  
}
/* 전체 화면 이미지 스타일 */
.fullscreen-img {
    width: auto;  /* 전체 너비 */
    height: auto;  /* 전체 높이 */
    object-fit: contain;  /* 비율 유지하며 컨테이너 채우기 */
    background: black;  /* 배경 색상 */
}



#chatbox-title {
    color: var(--light-text);
    margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 10px;
    font-size: 24px;
    opacity: 0; /* 처음에 안 보이게 설정 */
    transform: translateY(-20px); /* 위로 20px 이동하여 시작 */
    transition: opacity 2s ease-in, transform 2s ease-in; /* 서서히 보이는 효과와 함께 이동 */
  font-weight: lighter;
  font-style: normal;
  color: rgb(250, 133, 83);


}
#chatbox-title.visible {
    opacity: 1; /* 보이게 설정 */
    transform: translateY(0); /* 제자리로 이동 */
}





#responses {
    flex-grow: 1;
    height: 100%;
    background-color: transparent;
    overflow-y: auto;
    /* 내용이 넘칠 경우 스크롤바 생성 */
    max-height: calc(100% - 158px); /* 입력 컨테이너, 제목, 기타 요소를 위해 여유 공간을 남김 */
    /* 챗박스 내부의 스크롤 영역 최대 높이 설정 */
    margin-bottom: 0.1em;
    padding: 0.5em;
    position: relative; /* 상대적 위치 설정 */
}
#floating-button {
    position: absolute; /* 절대 위치 설정 */
    right: 110px;     /* 오른쪽 가장자리에서 10px 떨어진 위치에 배치 */
   bottom: 10px;     /* 하단 가장자리에서 10px 떨어진 위치에 배치 */
    background-color: #6f8c9f; /* 배경색 설정 */
    color: white;    /* 아이콘 색상 설정 */
    border: none;    /* 테두리 없음 */
    border-radius: 50%; /* 원형 버튼 만들기 */
    width: 40px;     /* 버튼의 너비 */
    height: 40px;    /* 버튼의 높이 */
    display: flex;   /* Flexbox를 사용하여 아이콘을 중앙에 배치 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    cursor: pointer; /* 마우스 오버시 커서 변경 */
    z-index: 10;      /* z-index 값 설정 */
    transition: transform 2.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 2.2s ease, visibility 2.2s ease;
    transform: rotate(0deg); /* 초기 회전 상태 */
    transform: scale(3); /* 초기 크기 2배 */

    opacity: 0; /* 초기 투명도 설정 */
    visibility: hidden; /* 초기에 보이지 않게 설정 */

}

#floating-button i {
    font-size: 20px; /* 아이콘 크기 조정 */
}

#star-icon {
    position: absolute; /* 절대 위치 설정 */
    top: -8px; /* 버튼의 왼쪽 위로 10px 상승 */
    left: -5px; /* 버튼의 왼쪽으로 10px 이동 */
    color: #ef7878; /* 아이콘 색상 설정 */
    font-size: 28px; /* 아이콘 크기 설정 */
    z-index: 11; /* floating-button 보다 상위에 위치하도록 z-index 설정 */
}


#input-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0px;
    padding: 0 0em;
}

input[type="text"] {
    flex-grow: 1;
    padding: 1em;
    margin: 0;
    border: 2px solid var(--main-nomal);
    border-radius: 30px 0 0 30px;
    background-color: transparent;
    color: var(--light-text);
    font-size: 1.05em;
    box-sizing: border-box;
    width: 0; /* 기본 width 설정 */
}

input[type="text"]:focus {
    outline: none;
    border: 2px solid var(--main-dark);
    font-size: 1.05em;
}
.message-container {
    display: flex;
    width: 100%;
}

.me-container {
    justify-content: flex-end;
    /* 오른쪽 정렬 */
}

.ai-container {
    justify-content: flex-start;
    /* 왼쪽 정렬 */
}

.me {
    color: #000000;
    background-color: var(--input-bg);
    margin: 1.5em 0;
    margin-left: 3em;
    padding: 1em;
    border-radius: var(--border-rad-lg);
    border-top-right-radius: 0;
    text-align: left;
    /* 텍스트 우측 정렬 추가 */
    max-width: 80%;
    /* 최대 넓이 설정 */
    min-width: 5%;
    /* 최소 넓이 설정 */
    display: inline-block;
    /* inline-block으로 설정하여 내용에 맞게 크기 조절 */

}

.ai {
    color: #ffffff;
    background-color: var(--main-aiback);
    margin: 0.5em 0;
    padding: 1em;
    border-radius: var(--border-rad-lg);
    border-top-left-radius: 0;
    max-width: 90%;
    /* 최대 넓이 설정 */
    min-width: 20%;
    /* 최소 넓이 설정 */
    display: inline-block;
    /* inline-block으로 설정하여 내용에 맞게 크기 조절 */
    font-size: 1.05em;

}


/* 
input[type="text"] {
    flex-grow: 1;
    padding: 1em;
    margin: 0;
    border: 2px solid var(--main-nomal);
    border-radius: 30px 0 0 30px;
    background-color: transparent;
    color: var(--light-text);
    font-size: 1.05em; 
}

input[type="text"]:focus {
    outline: none;
    border: 2px solid var(--main-dark);
    font-size: 1.05em; 
} */


button {
    padding: 1em;

    font-size: 1.05em; /* 기존 font-size 대비 20% 증가 */
    font-weight: bold;
    background-color: var(--main-dark);
    border: 0px solid #ffffff;
    color: #ffffff;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}



button:hover {
    background-color:var(--main-mdark);
}
button:focus {
    outline:none;
    box-shadow: none;
  }



.text-style {
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
    font-weight: lighter;
    align-self: flex-end; /* 이 속성을 추가하여 하단 정렬 */
    margin-bottom: 7px;
}

.text-style1 {
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
    font-weight: lighter;
    margin-bottom: 7px;
    align-self: flex-end; /* 이 속성을 추가하여 하단 정렬 */
}


/* 스크롤바 제거 */
#responses::-webkit-scrollbar {
    display: none;
}

#responses::-moz-scrollbar {
    display: none;
}

.message-container .ai a,
.message-container .me a {
    word-wrap: break-word;
    /* 긴 URL도 줄바꿈 */
    overflow-wrap: break-word;
    /* 텍스트가 컨테이너 너비를 초과할 때 줄바꿈 */
    max-width: 100%;
    /* 링크의 최대 너비를 설정 */
}

/* 로딩 */
.loader {
    position: fixed;
    /* 또는 absolute, 뷰포트에 대해 고정 */
    top: 50%;
    /* 상단에서 50% 위치 */
    left: 50%;
    /* 왼쪽에서 50% 위치 */
    transform: translate(-50%, -50%);
    /* 정확히 중앙에 위치하도록 조정 */
    z-index: 1500;
    /* 다른 요소들 위에 보이도록 z-index 설정 */
    display: none;
    /* 초기에는 로더를 숨김 */
    width: 60px;
    /* 너비 설정 */
    height: 80px;
    /* 높이 설정 */
    background-color: var(--main-dark);
    /* 배경색 설정 */
    padding: 15px;
    /* 내부 요소와의 간격 */
    border-radius: 10px;
    /* 모서리 둥글게 처리 */
    text-align: center;
    /* 텍스트 중앙 정렬 */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
    /* 그림자 효과 추가 */
}


.loader__bar {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 50%;
    background: var(--main-nomal);
    transform-origin: center bottom;
    box-shadow: 0px 0px 0 rgba(0, 0, 0, .2);
    animation: barUp1 4s infinite;
}

.loader__bar:nth-child(2) {
    left: 15px;
    animation: barUp2 4s infinite;
}

.loader__bar:nth-child(3) {
    left: 30px;
    animation: barUp3 4s infinite;
}

.loader__bar:nth-child(4) {
    left: 45px;
    animation: barUp4 4s infinite;
}

.loader__bar:nth-child(5) {
    left: 60px;
    animation: barUp5 4s infinite;
}

.loader__ball {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background:  var(--input-bg);
    border-radius: 50%;
    animation: ball 4s infinite;
}

.loader__text {
    position: absolute;
    top: 100%;
    /* 로더의 맨 아래 위치 */
    left: 50%;
    /* 가운데 정렬 */
    transform: translateX(-50%);
    /* X축 중앙 정렬 보정 */
    color: #ffffff;
    /* 텍스트 색상: 흰색 */
    font-size: 14px;
    /* 폰트 크기 */
    font-weight: bold;
    margin-top: 10px;
    /* 로더와의 간격 조정 */
    text-align: center;
    /* 텍스트 중앙 정렬 */
    white-space: nowrap;
    /* 텍스트 줄바꿈 없음 */
    width: auto;
    /* 너비 자동 조정 */
    max-width: 100vw;
    /* 최대 너비를 뷰포트 너비로 제한 */
    background-color:  var(--main-mdark);
    /* 배경색 설정 */
    padding: 5px;
    /* 내부 요소와의 간격 */
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    /* 모서리 둥글게 처리 */
    text-align: center;
    /* 텍스트 중앙 정렬 */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
    /* 그림자 효과 추가 */
}



@keyframes ball {
    0% {
        transform: translate(0, 0);
    }

    5% {
        transform: translate(8px, -14px);
    }

    10% {
        transform: translate(15px, -10px);
    }

    17% {
        transform: translate(23px, -24px);
    }

    20% {
        transform: translate(30px, -20px);
    }

    27% {
        transform: translate(38px, -34px);
    }

    30% {
        transform: translate(45px, -30px);
    }

    37% {
        transform: translate(53px, -44px);
    }

    40% {
        transform: translate(60px, -40px);
    }

    50% {
        transform: translate(60px, 0);
    }

    57% {
        transform: translate(53px, -14px);
    }

    60% {
        transform: translate(45px, -10px);
    }

    67% {
        transform: translate(37px, -24px);
    }

    70% {
        transform: translate(30px, -20px);
    }

    77% {
        transform: translate(22px, -34px);
    }

    80% {
        transform: translate(15px, -30px);
    }

    87% {
        transform: translate(7px, -44px);
    }

    90% {
        transform: translate(0, -40px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes barUp1 {
    0% {
        transform: scale(1, 0.2);
    }

    40% {
        transform: scale(1, 0.2);
    }

    50% {
        transform: scale(1, 1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.2);
    }
}

@keyframes barUp2 {
    0% {
        transform: scale(1, 0.4);
    }

    40% {
        transform: scale(1, 0.4);
    }

    50% {
        transform: scale(1, 0.8);
    }

    90% {
        transform: scale(1, 0.8);
    }

    100% {
        transform: scale(1, 0.4);
    }
}

@keyframes barUp3 {
    0% {
        transform: scale(1, 0.6);
    }

    100% {
        transform: scale(1, 0.6);
    }
}

@keyframes barUp4 {
    0% {
        transform: scale(1, 0.8);
    }

    40% {
        transform: scale(1, 0.8);
    }

    50% {
        transform: scale(1, 0.4);
    }

    90% {
        transform: scale(1, 0.4);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@keyframes barUp5 {
    0% {
        transform: scale(1, 1);
    }

    40% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1, 0.2);
    }

    90% {
        transform: scale(1, 0.2);
    }

    100% {
        transform: scale(1, 1);
    }
}
/* 텍스트가 날아가는 효과 */
.temp-message {
    position: absolute;
    font-size: 15px; /* 원하는 크기로 조절 */
    font-size: 1.2em; /* 기존 font-size 대비 20% 증가 */
    max-width: 70%;
    color: #2e2e2e; /* 텍스트 색상 흰색으로 설정 */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    opacity: 1;
}

.temp-message.fade-out {
    opacity: 0;
    transform: translateX(40px) translateY(-100px); /* 오른쪽 위로 이동 */
}



.container {
    display: flex;
    justify-content: space-between; /* 각 버튼을 전체 너비에 고르게 분산 */
    padding-top: 16px;
    width: 100%; /* 또는 원하는 너비로 설정 */
    z-index: 1100;
   
}
#horizontal-line {
    text-align: center;
  
    height: 14px; /* 두께 */
    font-size: 12px;
    color: #6f8c9f;
    background-color:#00000000; /* 원하는 색상으로 변경 가능 */
    margin: 0 auto 0 auto; /* 위, 왼쪽, 아래, 오른쪽 마진 설정 */
    margin-left: auto; /* 왼쪽 마진을 자동으로 설정하여 오른쪽에 요소를 정렬 */
    margin-right: 5%; /* 오른쪽 마진을 0으로 설정 */
    border-radius: 0px; /* 원형 유지 */
}
.center { margin: 0 auto 0 auto; /* 위, 왼쪽, 아래, 오른쪽 마진 설정 */
    margin-left: auto; /* 왼쪽 마진을 자동으로 설정하여 오른쪽에 요소를 정렬 */
    margin-right: 5%; /* 오른쪽 마진을 0으로 설정 */
    }

input[id="menuicon"] {display:none;    z-index: 1099; /* z-index 설정 */}
input[id="menuicon"] + label {display:block;width:30px;height:20px;position:relative;cursor:pointer;}
input[id="menuicon"] + label span {display:block;position:absolute;width:100%;height:5px;border-radius:30px;background: #6f8c9f;transition:all .35s;}
input[id="menuicon"] + label span:nth-child(1) {top:0;}
input[id="menuicon"] + label span:nth-child(2) {top:50%;transform:translateY(-50%);} /* 비슷하게 사용할 수 있는 style top:calc(50% - 2.5px); margin-top:-2.5px;*/
input[id="menuicon"] + label span:nth-child(3) {bottom:0;}
input[id="menuicon"]:checked + label {z-index:1099;}
input[id="menuicon"]:checked + label span {background:#6f8c9f;}
input[id="menuicon"]:checked + label span:nth-child(1) {top:50%;transform:translateY(-50%) rotate(45deg);}
input[id="menuicon"]:checked + label span:nth-child(2) {opacity:0;}
input[id="menuicon"]:checked + label span:nth-child(3) {bottom:50%;transform:translateY(50%) rotate(-45deg);}
/* div[class="sidebar"] {
    width: 100vw; 
    height: 58vh; 
    background: #ffffff8b; 
    position: fixed; 
    top: 10vh; 
    right: calc(50% - 50vw); 
    transition: top 1.35s ease; 
    z-index: 2000;
    border-radius: 20px;
    

}

input[id="menuicon"]:checked + label + div {
    top: -50vh; 
    border-radius: 20px;

} */
/* div[class="sidebar"].visible {
    top: -10vh; 
    border-radius: 20px;
display: block;
} */ 









#readButton {
    background-color: var(--main-dark);
    /* 흰색 배경 */
    color: #ffffff;
    /* 검은색 글씨 */
    border: 0px solid #000000;
    /* 검은색 테두리 */
    border-radius: 20px;
    /* 둥근 모서리 설정 */
    padding: 10px;
    /* 안쪽 여백 */
    font-size: 12px;
    /* 글씨 크기 */
    cursor: pointer;
    /* 커서를 포인터로 설정 */
    margin-right: 0px;
    /* 오른쪽 여백 */
    width: 50px; /* 버튼 너비 조정 */
    height: 50px; /* 버튼 높이 조정 */
    /* 최대 넓이 설정 */
    font-weight: bold;

    background-image: url('../images/speaker.webp'); /* 이미지 배경으로 설정 */
    background-repeat: no-repeat; /* 이미지 반복 설정 */
    background-position: center; /* 이미지 위치 설정 */
    background-size: 60%; /* 이미지 크기를 버튼 안에 맞게 조정 */
}

#readButton:hover {
    background-color: #5a189a;
    /* 호버 상태의 배경 색상 */
}

#homebtn {
    border-radius: 20px;
    background-color:#ffffff00;
    width: 60px; 
    height: 50px; 
 padding: 5px;
}

.homebtn {
    border-radius: 20px;
    background-color:#ffffff00;
    width: 100%; 
    height: 50px; 
 padding: 5px;
    cursor: pointer;
    transition: transform 0.2s ease; /* 부드러운 변형을 위한 전환 효과 */
    margin-top: 10px;
    display: flex; /* 버튼 내부 요소들을 flexbox로 배치 */
    flex-direction: row;
   /* align-items: flex-end;  내부 요소들을 하단 정렬 */
    justify-content: flex-start; /* 내부 요소들을 왼쪽 정렬 */
    
}

.homebtn:active {
    transform: scale(1.14); /* 버튼이 활성화될 때 크기 증가 */
    background-color: #ffffff00;
    outline: none;
}
.homebtn:not(:active) {
    transition: background-color 0.2s ease; /* 비활성화 상태로 돌아갈 때의 배경색 변화 효과 */
    background-color: #ffffff00; /* 초기 배경색으로 설정 */
}

.homebtn2 {
    border-radius: 50px;
    background-color:#ffffff;
    width: 45px; 
    height: 45px; 
 padding: 15px;
    cursor: pointer;
    transition: transform 0.2s ease; /* 부드러운 변형을 위한 전환 효과 */
    margin-top: 4px;
    margin-left: 6px;
    margin-right: 6px;
}

.homebtn2:active {
    transform: scale(1.2); /* 버튼이 활성화될 때 크기 증가 */
    background-color: #ffffff;
    outline: none;
}
.homebtn2:not(:active) {
    transition: background-color 0.2s ease; /* 비활성화 상태로 돌아갈 때의 배경색 변화 효과 */
    background-color: #ffffff; /* 초기 배경색으로 설정 */
}
/* 기본 색상 */
#home-icon {
    color: #fbbaa9;
    font-size: 30px;
    transition: color 0.1s ease; /* 색상 변화를 부드럽게 */
}

/* 마우스 오버 시 더 진한 색상으로 변경 */
#home-icon:hover {
    color: #f8b09e;
}

.loadervoice {
    height: 60px; /* 원래 크기의 20% */
    width: 60px; /* 원래 크기의 20% */
    position: absolute;
    top: 30%; /* 상단에서 50% 위치 */
    right: 5px; /* 오른쪽 여백 */
    transform: translateY(-50%) rotatex(60deg); /* Y축 중앙 정렬 및 3D 회전 */
    /* display: none; 초기에 로더 숨김 */
    transform-style: preserve-3d;
    perspective: 500px;
    border-radius: 50%; /* 원형 유지 */
}

.loadervoice .circle {
    --distance: 4px; /* 원래 거리의 20% */
    --animationEase: ease-in-out;
    --animationSpeed: 0.9s; /* 지속 시간을 2초로 변경 */
    position: absolute;
    top: calc(var(--index) * var(--distance));
    bottom: calc(var(--index) * var(--distance));
    left: calc(var(--index) * var(--distance));
    right: calc(var(--index) * var(--distance));
    margin: auto;
    border: 4px solid var(--color); /* 테두리 크기를 원래의 20%로 조정 */
    animation: animate var(--animationSpeed) var(--animationEase) infinite;
    animation-delay: calc(var(--index) * (var(--animationSpeed) / var(--circlesCount)));
    border-radius: 50%; /* 원형 유지 */
    box-shadow: 0px 2px 2px var(--color), 0px 2px 4px var(--color) inset, 0px 2px 5px var(--color) inset;
}

@keyframes animate {
    0%, 100% {
        transform: translateZ(0);
    }
    50% {
        transform: translateZ(calc(var(--index) * var(--distance) * -1));
    }
}

/*ai명함 모달*/
.aibizcard {
    display: none;
    position: fixed;
    left: 0vw;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255, 255, 255);
    z-index: 1501;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS Safari에서 부드러운 스크롤을 위한 설정 */

    
      /* 스크롤바 스타일 */
      ::-webkit-scrollbar {
        width: 8px; /* 스크롤바 너비 */
    }

    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1); /* 스크롤바 트랙 색상 */
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgb(0, 0, 0); /* 스크롤바 색상 */
        border-radius: 10px; /* 스크롤바 둥근 모서리 */
        border: 3px solid rgba(131, 160, 182, 0.863); /* 스크롤바 테두리 (배경색과 동일하게 설정하여 트랙과 융합) */
    }
}
.contentaiai {
    width: 100vw;
    height: 80vh;
    
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
   
}

#name, #affiliation, #title {
    color: #333;
    font-weight: normal;
    margin-bottom: 10px;
    transform: scaleX(-1) scaleY(-1); /* 좌우반전, 상하반전 적용 */
}

#qrcode {
    margin: 20px 0;
}
#toggleFlip {
    font-size: 15px;
    font-weight: lighter;
    color: #707070;
    float: right;
    margin-top: 10px;
    margin-right: 30px;
  
}
.closeai2 {
    color: #333;
    position: absolute; /* 절대 위치 설정 */
    right: 20px; /* 우측 여백 */
    bottom: 20px; /* 하단 여백 */
    font-size: 23px;
    font-weight: bold; /* 폰트 두께 두껍게 */
    transform: scaleX(-1) scaleY(-1); /* 좌우반전, 상하반전 적용 */
    
}
.flipped {
    transform: scaleX(1) scaleY(1) !important;
}


/*명함 모달*/
.modal {
    display: none;
    position: fixed;
    left: 2vw;
    top: 0;
    width: 96vw;
    height: 50vh;
    background-color: rgba(128, 128, 128, 0);
    z-index: 1500;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS Safari에서 부드러운 스크롤을 위한 설정 */

    
      /* 스크롤바 스타일 */
      ::-webkit-scrollbar {
        width: 8px; /* 스크롤바 너비 */
    }

    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1); /* 스크롤바 트랙 색상 */
    }

    ::-webkit-scrollbar-thumb {
        background-color: white; /* 스크롤바 색상 */
        border-radius: 10px; /* 스크롤바 둥근 모서리 */
        border: 3px solid rgba(131, 160, 182, 0.863); /* 스크롤바 테두리 (배경색과 동일하게 설정하여 트랙과 융합) */
    }
}

.modal-content {
    background-color: #668091;
    margin: 0% auto;
   
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    border: 1px solid #888;
    width: 100%;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.5s;
    
}
.closeai {
    color: #707070;
    float: right;
    font-size: 15px;
    margin-top: 10px;
    margin-right: 10px;
    font-weight: lighter;
}

.closeai:hover,
.closeai:focus {
    color: #a9a9a9;
    text-decoration: none;
    cursor: pointer;
}

.close {
    color: #ffffff;
    float: right;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: lighter;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.business-card {
    display: block;
    width: 100%; /* Adjust size accordingly */
    margin: 5px 0;
}

.button-container button {
    padding: 10px 20px;
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 16px;
    background-color: #00000000;
    cursor: pointer;
}

.button-container {
    display: flex;
    flex-direction: row; /* 수평 배열을 위해 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
}

.button-container2 button {
    padding: 10px 0px;
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 16px;
    background-color: #00000000;
    cursor: pointer;
}

.button-container2 {
    display: flex;
    flex-direction: row; /* 수평 배열을 위해 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
}


.modal.open {
    display: block;
    animation: slideIn 0.5s forwards;
}

.modal.close {
    animation: slideOut 0.5s forwards;
}

.aibizcard.open {
    display: block;
    animation: slideInai 1.1s forwards;
}

.aibizcard.closeai {
    animation: slideOutai 0.3s forwards;
}

@keyframes slideIn {
    from {top: -50%;}
    to {top: 0;}
}

@keyframes slideOut {
    from {top: 0;}
    to {top: -50%;}
}

@keyframes slideInai {
    from {top: -100%;}
    to {top: 0;}
}

@keyframes slideOutai {
    from {top: 0;}
    to {top: -100%;}
}


.toast {
    visibility: hidden;
    width: 90%;
    margin: 0 auto;
    background-color: #6f8c9f;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    padding: 16px;
    position: fixed;
    z-index: 3000;
    left: 50%;
    bottom: 80px;
    font-size: 17px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast.show {
    visibility: visible;
    opacity: 1;
}

.toast i {
    margin-right: 8px;
}