:root {
    --border-rad-lg: 15px;
    --light-text: #2e2e2e;
    --dark-bg: #ffffff;
    --input-bg: #f8efed;
    --button-bg: #2f4f4f;
    --main-normal: #888787;
    /* 약간 어두운 회색 */
    --main-dark: #1a1a1a89;
    /* 더 어두운 회색 */
    --main-mdark: #4a4a4a;
    /* 중간 회색 */

    --main-mdark2: #f7dbd4;
    --main-bla: #403b3b;
    --main-bla2: #bdbbbb;
    --main-aiback: #fa876a;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 모바일 브라우저를 위한 스타일 */
@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);
        /* 스크롤바 외곽선 */
    }
}



.btncontainer {
    width: 96%;
    /* 화면의 80% 너비 */
    height: 45vh;
    /* 화면의 50% 높이 */
    background-color: rgba(131, 160, 182, 0.863);
    /* 반투명 검은색 배경 */
    border-radius: 35px;
    /* 둥근 모서리 */
    position: absolute;
    /* 고정 위치 */
    bottom: 4%;
    /* 초기 위치, 화면 아래에 숨겨져 있음 */
    left: 2%;
    /* 중앙 정렬을 위해 왼쪽에서 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;
    opacity: 0;
    /* 초기 투명도 설정 */
    transform: scale(0);
    /* 초기 크기를 0으로 설정 */
    overflow-y: auto;
    /* 내용이 높이를 초과하면 스크롤바 생성 */
    -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: 65px;
    /* 화면의 가운데로 이동 */
    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; 

} */
.curtain {
    position: absolute;
    height: 100%;
    background-color: black;
    top: 0;
    z-index: 3311;
    width: 50%;
    /* 너비는 유지 */
    transition: opacity 1.7s ease-out;
    /* 부드러운 투명도 변화 적용 */
    opacity: 1;
    /* 초기 투명도 설정 */
}

.left-curtain {
    background-color: #252525;
    /* 회색 배경 설정 */
    background-image: url('../images/sapin_l.webp');
    background-repeat: no-repeat;
    background-position: right 30%;
    /* 오른쪽 중앙에 로고 배치 */
    background-size: 150px 175px;
    left: 0;
    height: 100vh;

}

.right-curtain {
    background-color: #252525;
    /* 회색 배경 설정 */
    background-image: url('../images/sapin_r.webp');
    background-repeat: no-repeat;
    background-position: left 30%;
    /* 오른쪽 중앙에 로고 배치 */
    background-size: 150px 175px;
    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;
    bottom: -100%;
    left: 2%;
    right: 2%;
    background-color: #0000007e;
    width: 96vw;
    height: calc(100vh - 100px);
    /* 상하단에 20px씩 여유 공간 */
    border-radius: 15px;
    padding-left: 1em;
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.77);
    transition: bottom 0.5s ease-out, opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    /* 시작 시 투명 */
}

#chatbox.show {
    bottom: 20px;
    /* 하단 여유 공간 */
    opacity: 1;
    /* 보이게 */
}

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


}

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





#responses {
    flex-grow: 1;
    height: 100%;
    background-color: transparent;
    overflow-y: auto;
    /* 내용이 넘칠 경우 스크롤바 생성 */
    max-height: calc(100% - 110px);
    /* 입력 컨테이너, 제목, 기타 요소를 위해 여유 공간을 남김 */
    /* 챗박스 내부의 스크롤 영역 최대 높이 설정 */
    margin-bottom: 0.1em;
    padding: 0.5em;
    position: relative;
    /* 상대적 위치 설정 */
    margin-top: 6px;
}

#floating-button {
    position: absolute;
    /* 절대 위치 설정 */
    right: 70px;
    /* 오른쪽 가장자리에서 10px 떨어진 위치에 배치 */
    bottom: 5px;
    /* 하단 가장자리에서 10px 떨어진 위치에 배치 */
    background-color: #f1cd04;
    /* 배경색 설정 */
    color: white;
    /* 아이콘 색상 설정 */
    border: none;
    /* 테두리 없음 */
    border-radius: 50%;
    /* 원형 버튼 만들기 */
    width: 38px;
    /* 버튼의 너비 */
    height: 38px;
    /* 버튼의 높이 */
    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);
    /* 초기 회전 상태 */
    opacity: 0;
    /* 초기 투명도 설정 */
    visibility: hidden;
    /* 초기에 보이지 않게 설정 */

}

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

#star-icon {
    position: absolute;
    /* 절대 위치 설정 */
    top: -8px;
    /* 버튼의 왼쪽 위로 10px 상승 */
    left: -5px;
    /* 버튼의 왼쪽으로 10px 이동 */
    color: #ffffff;
    /* 아이콘 색상 설정 */
    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: 1.6px solid #ffffff;
    border-radius: 30px 0 0 30px;
    background-color: #fff;
    color: #000;
    font-size: 1.05em;
    box-sizing: border-box;
    width: 0;
    /* 기본 width 설정 */
    border-right: 0;
    /* 우측면 경계선 없앰 */
}

input[type="text"]:focus {
    outline: none;
    border: 1.6px solid #ffffff;
    font-size: 1.05em;
    border-right: 0;
    /* 우측면 경계선 없앰 */
}

input::placeholder {
    color: #a0a0a0;
}

input::-webkit-input-placeholder {
    color: #a0a0a0;
}

input:-ms-input-placeholder {
    color: #a0a0a0;
}

.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: #928af9;
    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: #fff;
    border: 1.6px solid #ffffff;
    border-left: 0;
    /* 좌측면 경계선 없앰 */
    color: #ffffff;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}




button:focus {
    outline: none;
    box-shadow: none;
}



.text-style {
    color: #fff;
    font-size: 18px;
    margin-left: 10px;
    font-weight: lighter;
}

.text-style1 {
    color: #fff;
    font-size: 18px;
    margin-left: 10px;
    font-weight: lighter;
}


/* 스크롤바 제거 */
#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: #c8c8c8c0;
    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: #4a4a4a99;
    /* 배경색 설정 */
    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: #ffffff;
    /* 텍스트 색상 흰색으로 설정 */
    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: 50px;
    background-color: #ffffff;
    width: 100%;
    height: 50px;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.2s ease;
    /* 부드러운 변형을 위한 전환 효과 */
    margin-top: 10px;
}

.homebtn:active {
    transform: scale(1.2);
    /* 버튼이 활성화될 때 크기 증가 */
    background-color: #ffffff;
    outline: none;
}

.homebtn:not(:active) {
    transition: background-color 0.2s ease;
    /* 비활성화 상태로 돌아갈 때의 배경색 변화 효과 */
    background-color: #ffffff;
    /* 초기 배경색으로 설정 */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.614);
    /* 살짝 퍼지는 흰색 테두리 */
}

.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: 15%;
    /* 상단에서 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: 1.4s;
    /* 지속 시간을 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: calc(var(--vh, 1vh) * 100); /* 브라우저 주소창을 고려한 동적 높이 설정 */

    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: 70vh;
    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: #000000c4;
    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;
    font-size: 14px;
    font-weight: lighter;
    position: absolute;
    /* 부모 요소 기준 절대 위치 */
    top: 10px;
    /* 상단에서 10px 떨어짐 */
    right: 20px;
    /* 우측에서 20px 떨어짐 */
    cursor: pointer;
    /* 클릭 가능한 포인터 표시 */
}

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

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

.button-container button {
    padding: 10px 20px;
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 8px;
    margin-right: 8px;
    font-size: 16px;
    background-color: #ffffff;
    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: #ffffff;
    color: #333;
    text-align: center;
    border-radius: 20px;
    padding: 16px;
    position: fixed;
    z-index: 3000;
    left: 50%;
    top: 20px;
    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;
}


.buttonlang {
    all: unset;
    /* 기존 스타일 초기화 */
    display: inline-flex;
    /* inline-flex로 변경하여 텍스트에 맞게 크기가 조정되도록 함 */

    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    /* 텍스트 주위에 여백 추가 */
    font-size: 17px;
    font-weight: 700;
    border-radius: 10px;
    background-color: #fbfbfb;

    cursor: pointer;
    text-align: center;
    /* 텍스트 중앙 정렬 */
    white-space: nowrap;
    /* 텍스트가 길어질 경우 버튼 안에서 줄바꿈 방지 */
}



.buttonlang:active {
    box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.7),
        inset 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.buttonlang .icon {
    width: 20px;
    /* 아이콘 크기 조정 */
    height: 20px;
    margin-right: 8px;
    /* 아이콘과 텍스트 사이의 간격 */
    display: inline-block;
    vertical-align: middle;
    /* 아이콘이 텍스트와 수평 정렬되도록 함 */
}

.modal2 {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* 배경을 어둡게 */
    justify-content: center;
    align-items: center;
    opacity: 0;
    /* 처음에 투명하게 시작 */
    transition: opacity 0.7s ease;
    /* 부드러운 전환 */
}

.modal2.show {
    display: flex;
    opacity: 1;
    /* 보일 때 투명도를 1로 */
}

.modal-content2 {
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    width: 300px;
    height: 500px;
    text-align: center;
    overflow-y: auto;
    /* 스크롤 추가 */
}

.language-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.language-button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333333;
}

.language-button:hover {
    color: #adadad;
}

.lang_title {
    font-size: 25px;
}

.loaderspk {
    width: 28px;
    height: 28px;
    display: inline-block;
    position: absolute;
    bottom: 150px;
  }
  .loaderspk::after,
  .loaderspk::before {
    content: '';  
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1b1b1b;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    animation: animloader 2s ease-in-out infinite;
  }
  .loaderspk::after {
    animation-delay: 0.5s;
  }

@keyframes animloader {
    0%, 100% {
      transform: scale(0);
      opacity: 1;
}
    50% {
      transform: scale(1.5);
      opacity: 0;
}
  }
  

/* 로딩 숨김 처리 */
.loaderspk.hidden {
    display: none;
}


/* HTML: <div class="loaderai">AI</div> */
.loaderai {
    width: 54px;
    height: 40px; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; 
    font-size: 13px; 
    font-weight: bold;
    background: linear-gradient(to right, #ff95a0f6, #a22bfdf8);
    border-radius: 50%;
    animation: l1 9s infinite linear;
    text-align: center;
}

  @keyframes l1{
    12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
    25%   {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
    37.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
    50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
    62.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
    75%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
    87.5% {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
  }