/* styles.css */
body, html {
    height: 100%; /* 전체 높이 설정 */
    margin: 0; /* 여백 제거 */
    font-family: Arial, sans-serif; /* 글꼴 설정 */
}

.chat-container {
    display: flex; /* flexbox 레이아웃 사용 */
    flex-direction: column; /* 요소를 세로로 정렬 */
    height: 90%; /* 컨테이너 높이 설정 */
    max-width: 600px; /* 최대 너비 설정 */
    margin: auto; /* 자동으로 중앙 정렬 */
    border: 1px solid #ccc; /* 테두리 설정 */
    padding: 10px; /* 내부 여백 설정 */
    background-color: #fff; /* 배경색 설정 */
}

.chatbox {
    flex-grow: 1; /* 사용 가능한 공간 모두 사용 */
    overflow-y: auto; /* 세로 스크롤 가능 */
    padding: 5px; /* 패딩 설정 */
    border: 1px solid #ddd; /* 테두리 설정 */
    margin-bottom: 10px; /* 아래 여백 설정 */
    background-color: #f9f9f9; /* 배경색 설정 */
}

.input-box {
    padding: 10px; /* 패딩 설정 */
    margin-bottom: 10px; /* 아래 여백 설정 */
    width: 100%; /* 너비 설정 */
    box-sizing: border-box; /* 패딩과 테두리가 너비에 포함되도록 설정 */
    border: 1px solid #ccc; /* 테두리 설정 */
    border-radius: 4px; /* 모서리 둥글게 설정 */
}

.send-btn {
    padding: 10px 20px; /* 패딩 설정 */
    cursor: pointer; /* 커서 모양을 손가락 모양으로 설정 */
    background-color: #4CAF50; /* 배경색 설정 */
    color: white; /* 글자색 설정 */
    border: none; /* 테두리 없음 */
    border-radius: 4px; /* 모서리 둥글게 설정 */
}

.send-btn:hover {
    background-color: #45a049; /* 마우스 오버시 배경색 변경 */
}

.user-message {
    color: grey; /* 글자색 설정 */
    padding: 5px; /* 패딩 설정 */
    margin: 5px; /* 여백 설정 */
    border-radius: 4px; /* 모서리 둥글게 설정 */
    background-color: #f0f0f0; /* 배경색 설정 */
}

.assistant-message {
    color: white; /* 글자색 설정 */
    padding: 5px; /* 패딩 설정 */
    margin: 5px; /* 여백 설정 */
    border-radius: 4px; /* 모서리 둥글게 설정 */
    background-color: #007bff; /* 배경색 설정 */
}

.intro-container {
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
}

.intro-container img {
    width:50%;
    min-width : 300px;
}

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

.kakaoad{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    min-width:350px;
    min-height: 80px;

}