/* 팝업 레이어 스타일 (기본 - 데스크톱) */
.mainLayerPopup {
    position: fixed; /* 화면에 고정 */
    top: 30px;
    left: 30px;
    width: 500px; /* 데스크톱 기준 너비 */
    z-index: 9999; /* 가장 앞단에 표시 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    /* 스크립트가 제어할 초기 상태 */
    display: none;
}

/* 팝업 이미지 박스 */
.popupBox {
    padding: 0;
    line-height: 0;
}
.popupBox img {
    width: 100%;
    display: block;
}

/* 팝업 닫기 영역 */
.popupClose {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: center;
    padding: 12px 15px;
    background-color: #111111;
    color: #fff;
    font-size: 14px;
}

.popupClose .todayCheck {
    display: flex;
    align-items: center;
}

/* 닫기 버튼 링크 */
.popupClose a {
    display: block;
    line-height: 0;
    padding: 5px;
}
.popupClose a > img {
    height: 10px;
}

/* 1. 기본 input 숨기기 */
.popupClose input[type="checkbox"] {
    display: none;
}

/* 2. 라벨 스타일 (클릭 가능 영역) */
.popupClose label {
    cursor: pointer;
    user-select: none;
    display: flex; /* 커스텀 박스와 텍스트 정렬 */
    align-items: center;
}

/* 3. 커스텀 체크박스 (빈 박스) */
.popupClose label::before {
    content: '';
    display: inline-block;
    width: 16px;  /* 박스 크기 */
    height: 16px; /* 박스 크기 */
    border: 1.5px solid #fff; /* 흰색 테두리 */
    border-radius: 3px;
    margin-right: 8px; /* 텍스트와의 간격 */
    background-color: transparent;
    transition: all 0.2s; /* 부드러운 효과 */
}

/* 4. 체크되었을 때 스타일 */
.popupClose input[type="checkbox"]:checked + label::before {
    background-color: #fff; /* 배경 흰색 */
    border-color: #fff;

    /* * 체크 표시 (SVG 아이콘)
     * 배경색(#242424)과 동일한 색상의 체크마크
     */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23242424' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}
/* --- 체크박스 디자인 끝 --- */


/* ========================================
 * 반응형: 모바일 최적화 (600px 이하)
 * ========================================
 */
@media (max-width: 600px) {
    .mainLayerPopup {
        width: auto;
        right: 10px;
    }

    .popupClose {
        font-size: 13px;
        padding: 10px 12px;
    }

    .popupClose label {
        font-size: 12px;
    }

    .popupClose a {
        padding: 8px;
    }
    .popupClose a > img {
        height: 12px;
    }

    /* 모바일에서 체크박스 크기 살짝 조정 (선택 사항) */
    .popupClose label::before {
        width: 14px;
        height: 14px;
        margin-right: 6px;
    }

    .popupClose input[type="checkbox"]:checked + label::before {
        background-size: 10px 10px;
    }
}