/* ✅ 모달 기본 스타일 */
.modal {
    display: none;
    position: fixed;
    z-index: 9999999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

/* ✅ 활성화된 모달 */
.modal.active {
    display: flex;
}

/* ✅ 모달 내용 */
.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000; /* ✅ 버튼이 다른 요소에 가려지지 않도록 */
}

/* ✅ 모달 내부 요소 클릭 가능하도록 */
.modal * {
    pointer-events: auto;
}

/* ✅ 모달 바깥 배경 클릭 가능하도록 */
.modal {
    pointer-events: auto;
}




input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'GmarketSansMedium';
    width: 100%;
    margin-bottom: 15px;
}



.modal-content .close {
    font-size: 20px;
}



.modal-content p {
    font-size: 14px;
  
}


/* ✅ 닫기 버튼을 원형으로 만들기 */
.modal .close {
    position: absolute;
    right: -10px;  /* ✅ 모달 밖으로 약간 이동 */
    top: -10px;     /* ✅ 모달 밖으로 약간 이동 */
    width: 40px;    /* ✅ 원형 크기 */
    height: 40px;   /* ✅ 원형 크기 */
    line-height: 40px;
    font-size: 24px; /* ✅ X 글자 크기 */
    font-weight: bold;
    cursor: pointer;
    color: #fff;  /* ✅ X 글자 색상 */
    background-color: #ff4d4d; /* ✅ 빨간 배경 */
    border-radius: 50%;  /* ✅ 원형 */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white; /* ✅ 테두리 */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* ✅ 그림자 효과 */
    transition: all 0.3s ease-in-out;
}

/* ✅ 마우스를 올렸을 때 효과 */
.modal .close:hover {
    transform: scale(1.2); /* ✅ 살짝 커지는 효과 */
    background-color: #d60000; /* ✅ 더 진한 빨강 */
}



.consultation-submit {
    background: #004E42;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
    margin-top: auto; /* ✅ 버튼이 항상 하단에 고정되도록 설정 */
}


.profile-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.consultation_top_font {
    font-size: 24px;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}





#carInfoContainer {
    width: 100%;  /* 부모 div가 컨테이너 전체 차지 */
    height: 100%; /* 부모 div의 높이를 100%로 설정 */
    display: flex;
    align-items: center;  /* 세로 정렬 */
    justify-content: center; /* 가로 정렬 */
    overflow: hidden; /* 이미지가 넘치지 않도록 */
}

#modalVehicleImage {
    width: 100%;   /* 부모 크기에 맞게 조정 */
    height: auto;  /* 가로 비율 유지 */
    object-fit: contain; /* 이미지를 부모 크기에 맞게 조정 */
}



.modal_car-image {
    width: 100%;
}





/* ✅ 모바일에서 모달 여백 추가 */
@media (max-width: 768px) {



    .modal-content {
        width: calc(100% - 30px); /* 좌우 여백 10px */
        max-width: 100%;
        margin: 0 auto;
        position: fixed; /* 🚀 화면을 따라다니도록 */
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        max-height: 80vh; /* 🚀 너무 커지지 않도록 */
        overflow-y: auto; /* 🚀 내부 스크롤 추가 */
    }



    /* ✅ 닫기 버튼을 원형으로 만들기 */
.modal .close {
    position: absolute;
    right: 10px;  /* ✅ 모달 밖으로 약간 이동 */
    top: 10px;     /* ✅ 모달 밖으로 약간 이동 */
    width: 40px;    /* ✅ 원형 크기 */
    height: 40px;   /* ✅ 원형 크기 */
    line-height: 40px;
    font-size: 24px; /* ✅ X 글자 크기 */
    font-weight: bold;
    cursor: pointer;
    color: #fff;  /* ✅ X 글자 색상 */
    background-color: #ff4d4d; /* ✅ 빨간 배경 */
    border-radius: 50%;  /* ✅ 원형 */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white; /* ✅ 테두리 */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* ✅ 그림자 효과 */
    transition: all 0.3s ease-in-out;
}



.consultation_top_font {
    display: none;
    font-size: 16px;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}



#carInfoContainer {
    width: 100%;  /* 부모 div가 컨테이너 전체 차지 */
    height: 100%; /* 부모 div의 높이를 100%로 설정 */
    display: flex;
    align-items: center;  /* 세로 정렬 */
    justify-content: center; /* 가로 정렬 */
    overflow: hidden; /* 이미지가 넘치지 않도록 */
    background-color : #eee;
    border-radius: 10px;
}


}