body {
    font-family: Arial, sans-serif;
}
select {
    width: auto;
    padding: 12px 16px; /* Ample padding for touch targets */
    margin: 8px 0 16px; /* Consistent margin */
    display: inline-block;
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Box-sizing set to border-box */
    background-color: #f8f8f8; /* Light background color */
    font-size: 16px; /* Readable font size */
}
/* 화면 크기에 따른 반응형 디자인 */
@media (max-width: 600px) {
    select {
        width: 100%;  /* 화면 너비에 맞게 조정*/
        padding: 10px; /* 선택지가 잘 보이도록 패딩 추가*/
    }
}



/* Base styles for all buttons */
button {
    width: auto; /* 너비를 자동으로 설정합니다 (필요에 따라 고정된 너비를 지정할 수도 있습니다) */
    padding: 12px 16px; /* 편안한 내부 여백 */
    margin: 16px auto; /* 상하 마진을 일정하게 유지하면서 좌우 마진을 auto로 설정하여 가운데 정렬합니다 */
    background-color: #b2acac; /* 테마 색상 */
    color: white; /* 대비 색상 */
    border: none; /* 테두리 없음 */
    border-radius: 4px; /* 둥근 모서리 */
    font-size: 16px; /* 읽기 쉬운 글꼴 크기 */
    font-weight: bold; /* 굵은 텍스트 */
    cursor: pointer; /* 호버 시 포인터 커서 */
    transition: background-color 0.3s ease; /* 호버 효과를 위한 부드러운 전환 */
    text-align: center; /* 텍스트 중앙 정렬 */
    display: block; /* 너비를 채우기 위해 블록으로 표시 */
    text-decoration: none; /* 밑줄 없음 */
}


button:hover {
    background-color: #818185; /* Darker shade on hover for interaction feedback */
}
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    button {
        padding: 15px; /* Larger padding for touch-friendly interface */
        font-size: 18px; /* Larger font size for easy reading on mobile devices */
    }
}


.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    /* Add additional styles to match your design */
}


#chatContainer {
    width: 100%;
    max-width: 600px;
    height: 400px;
    border: 1px solid #ccc;
    margin: 20px auto;
    padding: 10px;
    overflow-y: auto;
    background-color: #f9f9f9;
    display: none;
    flex-direction: column; /* Newest messages at the bottom */
}
.intro-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.intro-container img {
    width: 20%;
    min-width: 200px;
}
.intro-range {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.intro-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

}
.intro-checkbox label {
    display: block;
    padding: 10px;
    margin: 5px 0;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.message {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    max-width: 80%;
}
.user {
    align-self: flex-end;
    background-color: #dcf8c6;
}
.bot {
    align-self: flex-start;
    background-color: #eeeeee;
}
#userInput {
    width: calc(100% - 24px);
    padding: 10px;
    max-width: 600px;
    height: 30px;
    margin: 0 auto;
    display: none;
}

#sendButton {
    width: auto; /* Full-width */
    max-width: 600px;
    padding: 12px 16px;
    margin: 5px auto; /* 가운데 정렬 */
    height: 50px;
    display: none;
    background-color: #b2acac; /* Theme color */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#sendButton:hover {
    background-color: #818185; /* Slightly darker on hover */
}

@media (max-width: 768px) {
    #sendButton {
        padding: 15px;
        font-size: 18px;
    }
}

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






.kakao-ad {
    display: flex;
    justify-content: center;
    margin-top: 0px;
    min-width: 350px;
    /* min-height: 200px; */
}