@charset "UTF-8";
/* custom dim Layer 생성 2024-08-02*/
#customDimLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000a6;
    opacity: 0.5;
    z-index: 1040; /* Bootstrap modal-backdrop is 1040, so should be same or higher */
}

/* 판매 상태에 따라, 상품 이미지 dim 처리 2024-07-16 */
.goods-dim-overlay {
    position: absolute; /* 부모 요소를 기준으로 절대적인 위치 부여 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 불투명한 검은색 배경 */
    display: flex; /* 텍스트를 가운데 정렬 */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem; /* 텍스트 크기 조절 */
    pointer-events: none; /* 오버레이가 클릭 이벤트를 방해하지 않도록 설정 */
}
.goods-dim-overlay-reserved {
    position: absolute; /* 부모 요소를 기준으로 절대적인 위치 부여 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 불투명한 검은색 배경 */
    display: flex; /* 텍스트를 가운데 정렬 */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem; /* 텍스트 크기 조절 */
    pointer-events: none; /* 오버레이가 클릭 이벤트를 방해하지 않도록 설정 */
}

.goods-dim-overlay-reserved::before {
    content: "";
    position: absolute;
    width: 80px; /* 원의 크기 조정 */
    height: 80px; /* 원의 크기 조정 */
    border: 2px solid white; /* 원형 라인 색상 */
    border-radius: 50%; /* 원형으로 만들기 */
    box-sizing: border-box; /* 패딩 및 보더 포함한 크기 조절 */
}