@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 제목 스타일 */
.intro-container h1 {
    font-family: 'yg-jalnan'; /* 원하는 글씨체로 변경 */
    font-size: 2.5em; /* 글씨 크기 조정 */
    color: #ffffff; /* 글씨 색상 조정 */
    text-align: center; /* 제목 중앙 정렬 */
    margin: 0; /* 제목의 기본 여백 제거 */
    text-shadow: 
    1px 1px 0 #000000, /* 오른쪽 아래 방향에 빨간색 테두리 추가 */
    -1px -1px 0 #000000, /* 왼쪽 위 방향에 빨간색 테두리 추가 */
    1px -1px 0 #000000, /* 오른쪽 위 방향에 빨간색 테두리 추가 */
    -1px 1px 0 #000000; /* 왼쪽 아래 방향에 빨간색 테두리 추가 */

}

/* 기본 스타일 설정 */
body {
    font-family: 'S-CoreDream-3Light'; /* 기본 폰트를 Arial로 설정 */
    margin: 0; /* 기본 여백 제거 */
    padding: 0; /* 기본 패딩 제거 */
    background-color: #ececff; /* 배경색을 연한 회색으로 설정 */
}

/* 채팅 컨테이너 */
.chat-container {
    width: 500px; /* 고정된 너비 설정 */
    max-width: 90%; /* 화면 크기에 따라 최대 너비 조정 */
    margin: 50px auto; /* 상단 여백 50px, 수평 중앙 정렬 */
    background: rgb(255, 255, 255); /* 배경색을 흰색으로 설정 */
    border-radius: 10px; /* 둥근 모서리 적용 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
    overflow: hidden; /* 자식 요소가 컨테이너를 넘어가지 않도록 설정 */
    display: flex; /* 플렉스 박스 레이아웃으로 설정 */
    flex-direction: column; /* 자식 요소들을 세로 방향으로 배치 */
}

/* 채팅 말풍선 */
.chat-bubble {
    max-width: 100%; /* 말풍선의 최대 너비 설정 */
    margin: 10px; /* 모든 방향에 10px 여백 추가 */
    padding: 15px; /* 말풍선 내부에 15px 패딩 추가 */
    border-radius: 10px; /* 둥근 모서리 적용 */
    position: relative; /* 상대 위치로 설정하여 나중에 추가적인 스타일 조정 가능 */
    font-size: 15px; /* 폰트 크기 설정 */
    line-height: 1.5; /* 줄 간격 설정 */
    word-wrap: break-word; /* 긴 단어가 말풍선을 넘어가지 않도록 설정 */
}

/* 사용자 말풍선 */
.user-bubble {
    background-color: #d2e9de; /* 연한 녹색 배경색 설정 */
    text-align: right; /* 오른쪽 정렬 */
    margin-left: auto; /* 왼쪽 여백 자동으로 설정하여 오른쪽 정렬 */
}

/* 봇 말풍선 */
.bot-bubble {
    background-color: #ffffff; /* 연한 회색 배경색 설정 */
    text-align: left; /* 왼쪽 정렬 */
    margin-right: auto; /* 오른쪽 여백 자동으로 설정하여 왼쪽 정렬 */
}

/* 채팅 입력 필드 */
.chat-input {
    border: none; /* 테두리 제거 */
    padding: 15px; /* 내부에 15px 패딩 추가 */
    font-size: 14px; /* 폰트 크기 설정 */
    width: 500px; /* 입력 필드 너비를 버튼과 여백을 제외한 전체 너비로 설정 */
    border-top: 1px solid #ddd; /* 상단에 얇은 회색 선 추가 */
    box-sizing: border-box; /* 패딩과 테두리를 포함한 너비 계산 방식 설정 */
    border-radius: 0; /* 둥근 모서리 없음 */
}

/* 보내기 버튼 */
.send-button {
    width: 500px; /* 버튼 너비 설정 */
    background-color: #6190be; /* 파란색 배경색 설정 */
    color: white; /* 글자색을 흰색으로 설정 */
    border: none; /* 테두리 제거 */
    padding: 15px; /* 내부에 15px 패딩 추가 */
    cursor: pointer; /* 커서 모양을 손가락으로 변경 */
    border-radius: 0; /* 둥근 모서리 없음 */
}

/* 버튼 호버 효과 */
.send-button:hover {
    background-color: #3068a3; /* 호버 시 배경색을 더 어두운 파란색으로 변경 */
}

/* 모바일 대응 */
@media (max-width: 480px) {
    .chat-container {
        width: 100%; /* 화면 너비에 맞춰 전체 너비 설정 */
    }

    .chat-input {
        width: calc(100% - 80px); /* 모바일 화면에서 입력 필드 너비 조정 */
    }

    .send-button {
        width: 80px; /* 모바일 화면에서 버튼 너비 조정 */
    }
}
.intro-container {
    display: flex;  /* 다른 요소가 추가되더라도 비율 유지한 채로 레이아웃 정렬 */
    flex-direction: column; /* 수직 구성 */                
    justify-content: center;  /* 가로선에서 정렬 */
    align-items: center;  /* 세로선에서 정렬  */
}
    
/* 이미지 크기 조절하기 */                        
.intro-container img {
    width:20%; /* 이미지 너비를 부모 요소의 10%로 설정 */
    min-width: 200x; /* 이미지의 최소 너비를 150px로 설정 */
    margin-top: 50px; /* 이미지 위쪽에 20px 여백 추가 */
    margin-bottom: 35px; /* 이미지 아래쪽에 20px 여백 추가 */
}

#loader {
    font-size: 25px;
    text-align: center;
}

.kakao-ad {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    min-width: 350px;
    min-height: 200px;
}