/* 전체 화면 설정: Arial 폰트 사용, 배경색 회색, 중앙 정렬 */
body {
    font-family: 'Arial', sans-serif;
    /* Arial 폰트 사용 */
    background-color: #f5f5f5;
    /* 배경색을 연한 회색으로 설정 */
    display: flex;
    /* Flexbox 레이아웃 사용 */
    flex-direction: column;
    justify-content: center;
    /* 수평 중앙 정렬 */
    align-items: center;
    /* 수직 중앙 정렬 */
    height: 100vh;
    /* 화면 전체 높이 사용 */
    margin: 0;
    /* 기본 여백 제거 */
}

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

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

.person-container {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 20px;
    width: 400px;
    padding: 5px;
}

.person-container label {
    text-align: right;
    padding-right: 10px;
    line-height: 2;
}

.person-container input,
.person-container select {
    width: 100%;
    padding: 5px;
}

.intro-container button {
    width: 50%;
    min-width: 300px;
    padding: 10px 20px;
    /* 안쪽 여백 상하 10px, 좌우 20px */
    font-size: 16px;
    /* 글자 크기 16px */
    border: none;
    /* 테두리 없음 */
    border-radius: 0 5px 5px 0;
    /* 오른쪽 테두리 둥글게 설정 */
    background-color: #007bff;
    /* 배경색을 파란색으로 설정 */
    color: white;
    /* 글자색을 흰색으로 설정 */
    cursor: pointer;
    /* 마우스를 올리면 포인터 커서로 변경 */
}

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


/*--------------------------------*/

/* 채팅 컨테이너 설정 */
.chat-container {
    display: flex;
    /* Flexbox 레이아웃 사용 */
    flex-direction: column;
    /* 세로 방향으로 정렬 */
    justify-content: space-between;
    /* 위아래로 공간 분배 */
    width: 100%;
    /* 전체 너비 사용 */
    max-width: 600px;
    /* 최대 너비 600px */
    height: 80vh;
    /* 높이를 화면의 80%로 설정 */
    background: white;
    /* 배경색을 흰색으로 설정 */
    border-radius: 10px;
    /* 테두리를 둥글게 설정 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* 그림자 추가 */
    padding: 20px;
    /* 안쪽 여백 20px */
    box-sizing: border-box;
    /* 테두리와 패딩을 포함한 박스 크기 설정 */
}

/* 채팅 박스 설정 */
.chat-box {
    flex: 1;
    /* 남은 공간을 모두 사용 */
    overflow-y: auto;
    /* 세로로 스크롤 가능 */
    height: 60vh;
    margin-bottom: 10px;
    /* 아래쪽 여백 10px */
    padding: 10px;
    /* 안쪽 여백 10px */
    border: 1px solid #ccc;
    /* 연한 회색 테두리 */
    border-radius: 10px;
    /* 테두리를 둥글게 설정 */
    background-color: #fafafa;
    /* 배경색을 아주 연한 회색으로 설정 */
}

/* 채팅 메시지 설정 */
.chat-message {
    margin: 10px 0;
    /* 위아래 여백 10px */
    padding: 10px;
    /* 안쪽 여백 10px */
    border-radius: 5px;
    /* 테두리를 둥글게 설정 */
}

/* 챗봇 메시지 설정 */
.bot-message {
    background-color: #e0e0e0;
    /* 배경색을 연한 회색으로 설정 */
    text-align: left;
    /* 왼쪽 정렬 */
}

/* 사용자 메시지 설정 */
.user-message {
    background-color: #007bff;
    /* 배경색을 파란색으로 설정 */
    color: white;
    /* 글자색을 흰색으로 설정 */
    text-align: right;
    /* 오른쪽 정렬 */
}

/* 입력 영역 설정 */
.input-area {
    display: flex;
    /* Flexbox 레이아웃 사용 */
    height: 50px;
    /* 고정 높이 설정 */
}

/* 입력 필드 설정 */
.input-area input {
    flex: 1;
    /* 남은 공간을 모두 사용 */
    padding: 10px;
    /* 안쪽 여백 10px */
    font-size: 16px;
    /* 글자 크기 16px */
    border: 1px solid #ccc;
    /* 연한 회색 테두리 */
    border-radius: 5px 0 0 5px;
    /* 왼쪽 테두리 둥글게 설정 */
}

/* 버튼 설정 */
.input-area button {
    padding: 10px 20px;
    /* 안쪽 여백 상하 10px, 좌우 20px */
    font-size: 16px;
    /* 글자 크기 16px */
    border: none;
    /* 테두리 없음 */
    border-radius: 0 5px 5px 0;
    /* 오른쪽 테두리 둥글게 설정 */
    background-color: #007bff;
    /* 배경색을 파란색으로 설정 */
    color: white;
    /* 글자색을 흰색으로 설정 */
    cursor: pointer;
    /* 마우스를 올리면 포인터 커서로 변경 */
}

/* 버튼에 마우스를 올렸을 때 색 변경 */
.input-area button:hover {
    background-color: #0056b3;
    /* 배경색을 더 짙은 파란색으로 변경 */
}