/* 캘린더 플로팅 아이콘 */
#work-calendar-launcher {
    position: fixed;
    bottom: 9px;
    left: 120px;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    
    /* 기존 이모지 관련 설정은 주석 처리하거나 삭제합니다. */
    /* font-size: 50px; */
    /* text-align: center; */
    /* line-height: 80px; */
    
    cursor: pointer;
    z-index: 10001;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    border: 2px solid #f1c40f;
    transition: all 0.3s ease;

    /* ▼▼▼ 여기에 배경 이미지 설정을 추가하세요 ▼▼▼ */
    /* 작은 따옴표 안에 업로드한 이미지의 실제 경로를 입력하세요 */
    background-image: url('../images/icons/calendar-icon.png'); 

    /* 이미지가 원 안에 꽉 차게 들어가도록 크기 조절 (취향에 따라 조절 가능) */
    /* 예: 60%, 70%, cover, contain 등 */
    background-size: 70%; 
    
    /* 이미지를 정중앙에 위치시킵니다 */
    background-position: center;
    
    /* 이미지 반복 방지 */
    background-repeat: no-repeat;
    z-index: 9999;
}

#work-calendar-launcher:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
    /* hover 시에도 배경 이미지가 유지되도록 설정 */
    background-image: url('../images/icons/calendar-icon.png');
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9998;
}

/* 캘린더 메인 모달 */
.calendar-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; max-width: 800px;
    height: 90vh;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 15px;
    z-index: 9000;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

#calendar-container {
    flex-grow: 1;
    overflow-y: auto;
    background: #fff; /* 달력 가독성을 위해 흰색 배경 또는 밝은 톤 유지 */
    color: #333;
    border-radius: 10px;
}

/* 입력 폼 모달 (상세 기록) */
.work-entry-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: #2c2c2c;
    border: 2px solid #f1c40f;
    padding: 20px;
    z-index: 10001;
    border-radius: 10px;
    color: rgb(255, 255, 255);
}
#work-calendar-launcher::before {
    content: "캘린더 급여 관리 계산기"; /* 표시될 텍스트 */
    position: absolute;
    top: -30px; /* 아이콘보다 30px 위로 배치 */
    left: 50%;
    transform: translateX(-50%); /* 정확히 가운데 정렬 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    font-size: 20px;
    font-weight: bold;
    color: #ffffff; /* 아이콘 테두리 색상과 통일 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* 배경이 밝아도 잘 보이도록 그림자 추가 */
    pointer-events: none; /* 텍스트가 클릭을 방해하지 않도록 설정 */
    z-index: 9999;
}
.fc {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    font-size : 0.95em;
}
.fc-scrollgrid-liquid {
    height: 612px;
}
/* 일요일(빨간색) 및 토요일(파란색) 날짜 글색 설정 */
.fc-day-sun .fc-daygrid-day-number,
.fc-day-sun .fc-col-header-cell-cushion {
    color: #e74c3c !important; /* 빨간색 */
}

.fc-day-sat .fc-daygrid-day-number,
.fc-day-sat .fc-col-header-cell-cushion {
    color: #3498db !important; /* 파란색 */
}

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
    min-height: 4em;
    position: relative;
}

/* 실시간 수당 표시 스타일 */
#realtime-pay-display {
    background: #1e1e1e;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #00ff00;
    font-size: 1.1em;
    text-shadow: 0 0 5px #00ff00;
}
/* FullCalendar 이벤트 텍스트 줄바꿈 설정 */
.fc-event-title {
    white-space: normal !important;  /* 한 줄 제한 해제 */
    word-break: break-all !important; /* 단어 단위로 끊어서 줄바꿈 */
    line-height: 1.2 !important;    /* 줄 간격 조절 */
    overflow-wrap: break-word !important;
}

/* 이벤트 컨테이너 높이 자동 조절 */
.fc-daygrid-event {
    white-space: normal !important;
    align-items: flex-start !important;
}
/* 기본 퀵 버튼 스타일 (기존) */
.btn-q {
    background: #34495e;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
}

/* [추가] 일반 버튼 활성화 (주황색 계열) */
.btn-q.active {
    background: #e67e22 !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    font-weight: bold;
}

/* [추가] 휴가/잡화 등 특수 버튼 활성화 (밝은 초록색) */
.btn-q.btn-v.active {
    background: #2ecc71 !important;
    font-weight: bold;
}
/* 휴가 버튼이 ON 되었을 때 (Active) */
.btn-q.btn-v.active {
    background: #f1c40f !important; /* 노란색 */
    color: #000 !important;
    font-weight: bold;
    border: 1px solid #fff;
}
/* -------------------------------------------------------------------------- */
/* CSS 또는 인라인 스타일 */
#notice-modal {
    z-index: 90000 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* ----------------------------------------------------------------------------------- */
    /* CSS 돋보기 버튼 스타일 추가 대체휴가 사용 및 소멸확인  */
    .zoom-icon {
        position: absolute;
        right: -100px;          /* 기존 텍스트 영역 밖으로 침범 */
        top: -14px;
        font-size: 2.6em;      /* 크게 */
        pointer-events: none;  /* 클릭 방해 X */
        color: #e74c3c;
        text-shadow:
        0 0 4px rgba(255, 215, 0, 0.8),
        0 0 8px rgba(255, 215, 0, 0.6);
        animation: floatZoom 1.8s ease-in-out infinite;
    }

    @keyframes floatZoom {
        0% {
            transform: scale(1) translateY(0);
            opacity: 0.8;
        }
        50% {
            transform: scale(1.25) translateY(-6px);
            opacity: 1;
        }
        100% {
            transform: scale(1) translateY(0);
            opacity: 0.8;
        }
    }
  /* 1. 현재 달이 아닌 날짜(이전/다음 달)에 포함된 이벤트 흐리게 */
.fc-day-other .fc-event {
    opacity: 0.3 !important;      /* 투명도를 30% 수준으로 낮춤 */
    filter: grayscale(60%);       /* 색상을 회색톤으로 변경하여 더 확실히 구분 */
    transition: opacity 0.2s;      /* 마우스 오버 시 부드러운 전환효과 */
    pointer-events: none;          /* (선택사항) 클릭 실수를 방지하려면 추가 */
}

/* 2. 마우스를 올렸을 때만 다시 진하게 보고 싶다면 아래 코드 추가 */
.fc-day-other:hover .fc-event {
    opacity: 0.8 !important;
    filter: grayscale(0%);
    pointer-events: auto;
}  

/* 공지사항 출력창 스타일 수정 */
#notice-body-content {
    line-height: 1.8;
    word-break: break-all;
    
    /* 🌟 이 부분이 핵심입니다! */
    white-space: pre-wrap !important; /* 연속된 띄어쓰기와 줄바꿈을 그대로 유지 */
    
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
}

/* Quill 에디터의 문단 여백이 겹치지 않도록 조정 */
.ql-editor p {
    margin: 0;
    padding: 0;
    min-height: 1em; /* 빈 줄도 높이를 가지게 함 */
}

/* 🌟 중요: Quill의 기본 여백과 목록 스타일을 강제로 적용 */
#notice-body-content p {
    margin-bottom: 10px; /* 문단 사이 간격 */
}

#notice-body-content ul, #notice-body-content ol {
    padding-left: 20px;  /* 목록 들여쓰기 */
    margin-bottom: 10px;
}