/* 기본 스타일 */
body { font-family: Arial, sans-serif; }
.typing-container {
    visibility: hidden;
    border-right: 2px solid; 
}
.my-image {
    width: 200px;
    height: auto;
    margin: 20px 0;
}
.container {
    text-align: center; /* 텍스트 중앙 정렬 */
}
.nextContainer {
    text-align: center; /* 텍스트 중앙 정렬 */
}
.btnContainer {
    text-align: center; /* 텍스트 중앙 정렬 */
}
.message-animation {
    /* 애니메이션 효과를 위한 스타일 */
    animation: fadeInOut 4s linear;
    text-align: center; /* 텍스트 중앙 정렬 */
    }
    @keyframes fadeInOut {
        0% { opacity: 0; }
        50% { opacity: 1; }
        100% { opacity: 0; }
        
    }
    #messageContainer {
    text-align: center;
    }
/*썸네일*/
#imageThumbnail {
    display: block;
    margin: 0 auto; /* 수평 가운데 정렬 */
    max-width: 100px; /* 최대 너비 설정 */
    max-height: 100px; /* 최대 높이 설정 */
}
#response {
    text-align: center; /* 텍스트 중앙 정렬 */
}
#loader {
    display: none;          /* Flexbox 레이아웃 사용 */
    justify-content: center;/* 수평 가운데 정렬 */
    align-items: center;    /* 수직 가운데 정렬 */
    height: 100px;          /* 적절한 높이 설정 */
}
#imagePreview {
    display: none; /* 초기 상태는 숨김 처리 */
    max-width: 100px;
    max-height: 100px;
}
/* 프로그레스 바 컨테이너 스타일 */
.progress-container {
width: 100%;
background-color: #ddd;
}

/* 프로그레스 바 스타일 */
.progress-bar {
height: 10px;
background-color: #4CAF50;
width: 0%; /* 초기 상태는 0% */
}
/* 모바일 기기를 위한 스타일 */
@media screen and (max-width: 600px) {
.container {
    padding: 10px; /* 모바일 화면에 맞게 패딩 조정 */
}
#imageThumbnail {
    max-width: 80%; /* 모바일 화면에 맞게 이미지 크기 조정 */
    max-height: auto;
}
.btnContainer {
    width: 100%; /* 버튼 컨테이너 너비 조정 */
    padding: 10px;
}
}

/* 태블릿 및 중간 크기 화면을 위한 스타일 */
@media screen and (min-width: 601px) and (max-width: 1024px) {
.container {
    padding: 20px; /* 태블릿 화면에 맞게 패딩 조정 */
}
#imageThumbnail {
    max-width: 60%; /* 태블릿 화면에 맞게 이미지 크기 조정 */
    max-height: auto;
}
.btnContainer {
    width: 100%; /* 버튼 컨테이너 너비 조정 */
    padding: 20px;
}
}

/* 데스크탑 화면을 위한 스타일 */
@media screen and (min-width: 1025px) {
.container {
    padding: 30px; /* 데스크탑 화면에 맞게 패딩 조정 */
}
#imageThumbnail {
    max-width: 50%; /* 데스크탑 화면에 맞게 이미지 크기 조정 */
    max-height: auto;
}
.btnContainer {
    width: 100%; /* 버튼 컨테이너 너비 조정 */
    padding: 30px;
}
}