body {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #200515; /* 추출한 색상 코드 */
    color: #ffffff; /* 순백색 또는 연한 그레이 등 밝은 색상 */
}

.recommendation-prompt {
    text-align: center;
    margin: 20px 0;
}

.chat-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px
}

.chat-bubble {
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.user-bubble {
    background-color: #e2f7fd;
    text-align: right;
}

.bot-bubble {
    background-color: #FFFFFF;
    text-align: left;
    color:  #211312; /* 흰색으로 글꼴 색상 변경 */
}

.chat-input {
    width: 100px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 20px;
}

.chip {
    border: 1px solid #9E9E9E;
    background-color: #200515; /* #211312; */
    border-radius: 5px;
    display: inline-block;
    padding: 5px 10px;
    font-weight: bold; /* 텍스트를 굵게 만듭니다. */
    font-size: 16px;
    margin: 4px;
    cursor: pointer;
    color: #bebebe;
}

.chip.selected {
    background-color: rgb(255, 235, 208);
    color: #200515;
    border: 1px solid;
    border-color: rgb(255, 235, 208);
}

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

#tastePreferences {
    margin-bottom: 5px; /* 맛과 풍미 섹션과 버튼 사이의 간격 */
}

.send-button {
    width: 100%; /* 버튼의 너비를 화면 너비에 맞춤 */
    padding: 15px 0; /* 상하 패딩을 10px로 설정하여 버튼 높이 증가, 좌우는 0 */
    margin-top: 20px; /* 위쪽 마진으로 간격 조정 */
    box-sizing: border-box; /* padding이나 border가 너비에 포함되도록 설정 */
    /* 추가적인 스타일링 */
    background-color: rgb(255, 235, 208);
    color: #200515;
    border: none; /* 테두리 제거 */
    border-radius: 8px; /* 버튼 모서리를 둥글게 */
    cursor: pointer; /* 마우스 오버 시 커서 변경 */
    font-weight: bold; /* 텍스트를 굵게 만듭니다. */
    font-size: 16px;
}

/* 화면의 가로 너비가 좁은 경우를 위한 반응형 디자인 */
@media (max-width: 600px) {
    .send-button {
        padding: 15px 0; /* 모바일 환경에서 버튼의 높이를 조금 더 늘림 */
    }
}

#recommendationsContainer {
    margin-top: 20px; /* 원하는 간격에 따라 조정 */
}

#priceRange {
    height: 18px; /* 높이 조정 */
    width: 80px; /* 너비 조정 */
    padding: 5px; /* 입력 필드 내부에 약간의 여백을 추가 */
    font-size: 16px; /* 글자 크기를 조금 더 크게 */
    background-color: #211312; /* 버튼 내 텍스트 색상 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 버튼 모서리를 둥글게 */
    border: 1px solid #9E9E9E;
    color: white; /* 버튼 내 텍스트 색상 */
}

.priceRange,
.pairing,
.wineType,
.tastePreferences {
    border: 1px solid #ccc; /* 테두리 색상 */
    border-radius: 8px; /* 모서리 둥글기 */
    padding: 20px; /* 내부 여백 */
    margin-bottom: 20px; /* 하단 여백 */
}

h2 {
    margin-top: 0; /* 상단 마진 제거 */
    padding-top: 0px; /* 필요에 따라 상단 패딩 추가 */
}

h3 {
    margin-top: 0; /* 상단 마진 제거 */
    padding-top: 05px; /* 필요에 따라 상단 패딩 추가 */
}

.intro-container {
    margin-bottom: 20px; /* 하단 마진 추가 */
}

.intro-container img {
    display: block;
    margin: 0 auto; /* 중앙 정렬 */
    max-width: 100%; /* 이미지가 컨테이너 너비를 넘지 않도록 */
    height: auto; /* 이미지의 비율을 유지 */
}

.loading-indicator {
    margin-top: 20px; /* 상단 마진 추가 */
    text-align: left;
    /* 기타 스타일 */
    position: relative; /* 상대적 위치 지정 */
    display: inline-block; /* 인라인 블록 요소로 변경 */
}

.spinner {
    display: inline-block; /* 인라인 블록으로 설정 */
    vertical-align: middle; /* 수직 정렬을 텍스트 중앙으로 설정 */
    width: 1em; /* 크기 조정 */
    height: 1em; /* 크기 조정 */
    border: 2px solid #200515; /* 추출한 색상 코드 */
    border-radius: 50%;
    border-top-color: rgb(255, 235, 208);
    margin-left: 0.5em; /* 텍스트와 스피너 사이의 간격 조정 */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* 중앙 정렬을 위한 컨테이너 스타일 */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 버튼 사이의 간격 */
    margin: 20px 0; /* 위 아래 여백 */
}

/* "nv-openmain"과 "share-button" 버튼의 공통 스타일 */
.share-button {
    border: 1.9px solid #ccc; /* 테두리 설정 */
    color: #ffffff; /* 텍스트 색상 */
    background-color: #200515; /* 버튼 색상 */
    padding: 4px 20px; /* 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 텍스트 밑줄 없앰 */
    display: inline-block; /* 버튼을 인라인 블록 요소로 설정 */
    font-size: 14px; /* 글자 크기 */
    margin: 4px 2px; /* 주변 여백 */
    cursor: pointer; /* 마우스 오버 시 커서 변경 */
}