@charset "utf-8";

/* ==========================================================================
   공지사항 레이어 팝업 스타일
   - 기존 popup_wrap (모달 팝업)을 레이어 팝업으로 오버라이드
   - id가 "popup_notice_"로 시작하는 요소에만 적용
   ========================================================================== */

/* 레이어 팝업 컨테이너 */
[id^='popup_notice_'].popup_wrap {
    width: 650px; /* 팝업 크기 증가: 400px -> 650px */
    background: none; /* 오버레이 배경 제거 */
    position: fixed;
    z-index: 99999; /* z-index를 헤더보다 높게 설정 */
    /* left, top, height는 JavaScript로 동적 설정 */
}

/* 팝업 박스 */
[id^='popup_notice_'].popup_wrap .alert_box {
    position: absolute; /* jQuery UI draggable 호환 - absolute로 변경 */
    top: 0; /* popup_wrap 내부 상대 위치 */
    left: 0;
    transform: none; /* translate 해제 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 100%; /* 부모 width 상속 */
}

/* 팝업 헤더 */
[id^='popup_notice_'].popup_wrap .alert_box .head {
    height: auto;
    padding: 16px;
    background: #404040;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: grab;  /* 드래그 가능함을 표시 (T007) */
}

[id^='popup_notice_'].popup_wrap .alert_box .head .tit {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}
[id^='popup_notice_'].popup_wrap .alert_box .head .btn_notice_close {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

/* 팝업 내용 */
[id^='popup_notice_'].popup_wrap .alert_box .cont {
    padding: 0;
}

[id^='popup_notice_'].popup_wrap .alert_box .cont .inner {
    display:block;
    height: auto;
    min-height: 100px;
    max-height: calc(80vh - 100px); /* 화면 높이의 80%에서 헤더/푸터 공간 제외 */
    overflow-y: auto; /* 화면을 초과할 경우에만 스크롤 표시 */
    overflow-x: hidden; /* 가로 스크롤 방지 */
    padding: 25px 30px; /* 여백 증가로 가독성 개선 */
    text-align: left;
    word-break: break-word;
    line-height: 1.8; /* 줄 간격 개선 */
    justify-content: flex-start;
}

/* 팝업 버튼 영역 */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap {
    display: flex;
    gap: 0 10px;
    padding: 0 16px 16px;
    border-top: solid 1px #E8E8E8;
    padding-top: 16px;
}

[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .btn {
    flex: 1;
    height: 40px;
    font-size: 14px;
}

/* body 스크롤 방지 클래스는 이미 style.css에 정의되어 있음 */
/* .no_scroll {height:100%;overflow:hidden} */

/* ==========================================================================
   팝업 "오늘 그만보기" 체크박스 (US2)
   - 기존 .chk_box 스타일을 기반으로 IE11 호환성 개선
   - gap 속성을 margin으로 대체
   - CSS 변수를 실제 값으로 대체
   ========================================================================== */

/* 체크박스 컨테이너 */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_wrap {
    display: flex;
    align-items: center;
}

/* 기본 체크박스 숨김 */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_box input {
    display: none;
}

/* 체크박스 레이블 */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_box label {
    display: flex;
    align-items: center;
    color: #525252;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 커스텀 체크박스 (::before 가상 요소) */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_box label::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 6px; /* gap 대체 - IE11 호환 */
    background: #fff; /* var(--white) 대체 - IE11 호환 */
    border: solid 1px #BCBCBC;
    flex-shrink: 0; /* 체크박스 크기 고정 */
}

/* 체크된 상태 (체크 아이콘 표시) */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_box input:checked + label::before {
    background: #fff url('../img/check.svg') no-repeat center/100%;
}

/* 호버 효과 */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_box label:hover::before {
    border-color: #999;
}

/* 포커스 효과 (키보드 네비게이션 접근성) */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_box input:focus + label::before {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

/* ==========================================================================
   팝업 하단 버튼 영역 배경색 개선 (US3)
   - btn_gray 버튼과 동일한 다크 그레이 배경색 적용
   - 시각적 계층 구조 개선
   ========================================================================== */

/* 하단 버튼 영역 배경색 */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap {
    background-color: #ececec; /* btn_gray와 동일한 색상 */
    border-bottom-left-radius: 10px; /* 팝업 하단 모서리와 조화 */
    border-bottom-right-radius: 10px;
}

/* 체크박스 라벨 텍스트 색상 (배경이 어두우므로 밝게) */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_box label {

    color: #131313;
}

/* 체크박스 테두리 색상 조정 (배경이 어두우므로 밝게) */
[id^='popup_notice_'].popup_wrap .alert_box .btn_wrap .chk_box label::before {
    border: solid 1px #999; /* 더 밝은 테두리 */
}

/* ==========================================================================
   팝업 내 테이블 및 그리드 요소 스타일
   - 테이블이 팝업 너비를 초과하지 않도록 처리
   - 반응형 스크롤 처리
   ========================================================================== */

/* 팝업 내 테이블 스타일 */
[id^='popup_notice_'].popup_wrap .alert_box .cont .inner table {
    width: 100% !important;
    max-width: 100%;
    table-layout: auto;
    word-wrap: break-word;
    margin: 10px 0;
    border-collapse: collapse;
}

/* 테이블 셀 스타일 */
[id^='popup_notice_'].popup_wrap .alert_box .cont .inner td,
[id^='popup_notice_'].popup_wrap .alert_box .cont .inner th {
    padding: 8px;
    word-break: break-word;
    vertical-align: top;
    border: 1px solid #ddd;
}

/* 이미지가 팝업을 넘지 않도록 제한 */
[id^='popup_notice_'].popup_wrap .alert_box .cont .inner img {
    max-width: 100%;
    height: auto;
}

/* 프리포맷된 텍스트 처리 */
[id^='popup_notice_'].popup_wrap .alert_box .cont .inner pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
}

/* 리스트 스타일 개선 */
[id^='popup_notice_'].popup_wrap .alert_box .cont .inner ul {
    padding-left: 20px;
    margin: 10px 0;
    list-style: disc;
}

[id^='popup_notice_'].popup_wrap .alert_box .cont .inner ol {
    padding-left: 20px;
    margin: 10px 0;
    list-style: decimal;
}

/* 스크롤바 커스터마이징 (웹킷 브라우저) */
[id^='popup_notice_'].popup_wrap .alert_box .cont .inner::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[id^='popup_notice_'].popup_wrap .alert_box .cont .inner::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

[id^='popup_notice_'].popup_wrap .alert_box .cont .inner::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

[id^='popup_notice_'].popup_wrap .alert_box .cont .inner::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==========================================================================
   팝업 드래그 기능 스타일 (T007: 016-popup-drag)
   - 드래그 중 시각 피드백 (opacity, box-shadow)
   - 드래그 핸들 커서 (grab, grabbing)
   - 드래그 비활성화 영역 (user-select)
   - 모던 브라우저 지원 (Chrome, Firefox, Safari, Edge)
   ========================================================================== */

/* 드래그 중 시각 피드백: 팝업 전체 */
[id^='popup_notice_'].popup_wrap.dragging {
    opacity: 0.95;  /* 투명도 변경으로 드래그 상태 표시 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);  /* 그림자 강조로 부유감 표현 */
    transition: opacity 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* 드래그 중 헤더 커서 업데이트 */
[id^='popup_notice_'].popup_wrap.dragging .alert_box .head {
    cursor: grabbing;  /* 드래그 진행 중임을 표시 */
}

/* 드래그 중 본문 영역 - 텍스트 선택 방지 */
[id^='popup_notice_'].popup_wrap.dragging .alert_box .cont {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 드래그 중에도 버튼과 체크박스는 상호작용 가능하도록 유지 */
[id^='popup_notice_'].popup_wrap.dragging .btn_notice_close,
[id^='popup_notice_'].popup_wrap.dragging .alert_box .btn_wrap .btn,
[id^='popup_notice_'].popup_wrap.dragging .alert_box .btn_wrap .chk_box {
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
}

/* 반응형 처리 - 모바일 화면 대응 */
@media screen and (max-width: 768px) {
    [id^='popup_notice_'].popup_wrap {
        width: 90%;
        max-width: 650px;
    }

    [id^='popup_notice_'].popup_wrap .alert_box .cont .inner {
        max-height: 400px;
        padding: 20px 15px;
        justify-content: flex-start;
    }
}