@charset "utf-8";
/* CSS Document */

/* 1. 선택된 셀의 기본 스타일 (Passive Selection) */
[data-table-selectable] tbody td.selected {
    background-color: #d8e5f2 !important; /* 연한 파란색 */
    border: 1px solid #739fcf !important; /* 중간 파란색 테두리 */
}

/* 2. 스크립트가 제어하는 활성 셀 (td.focused) */
/* 선택되지 않았을 때의 포커스 상태. 선택 영역과 구분되도록 밝은 노란색과 짙은 회색 윤곽선 사용 */
[data-table-selectable] tbody td.focused {
    background-color: #fffacd !important; /* 매우 연한 노란색 (활성 표시) */
    outline: 2px solid #5a5a5a !important; /* 짙은 회색 윤곽선 */
    border: 1px solid #5a5a5a !important; /* 테두리도 윤곽선 색상과 통일 */
}

/* 3. 선택된 영역 내에서 현재 포커스된 셀 (td.selected.focused 또는 td.selected:focus) */
[data-table-selectable] tbody td.selected.focused,
[data-table-selectable] tbody td.selected:focus {
    /* 배경색: 기존 선택색보다 약간 더 진하고 활성화된 느낌의 파란색 */
    background-color: #b2d6ff !important; /* Active Blue - 선택색과 조화 */
    
    /* 윤곽선/테두리: 선택 영역의 테두리보다 훨씬 강하고 눈에 띄는 짙은 파란색 */
    outline: 2px solid #004d99 !important; /* 짙은 파란색 윤곽선 강조 */
    border: 1px solid #004d99 !important; /* 테두리도 윤곽선 색상과 통일 */
}

/* 4. 네이티브 포커스 (td:focus) - .focused 클래스가 없지만 포커스가 잡히는 경우 대비 */
[data-table-selectable] tbody td:focus {
    /* td.focused와 동일하게 설정하여 일관성 유지 */
    background-color: #fffacd !important;
    outline: 2px solid #5a5a5a !important;
    border: 1px solid #5a5a5a !important;
}