@charset "utf-8";

/*=====================================================================
 * 목록 열 표시/숨김 (IB-1867) - 짝이 되는 동작은 common/js/sos_grid_col.js
 *
 * 여기 있는 요소(.colCtrl, #colSetBox)는 gf_initColumnToggle() 이 만들어 붙인다.
 * 기능을 쓰지 않는 화면에는 아예 없는 요소라, 전역에 둬도 다른 목록에 영향이 없다.
 *
 * 목록 헤더 고정(sticky)·높이 조절 핸들 CSS 는 화면별 인라인에 그대로 둔다.
 * #scrollGrid / #dataGridList 는 이 기능을 쓰지 않는 화면에도 있는 id 라,
 * 전역으로 올리면 그 화면들의 표 모양까지 바뀐다.
 *=====================================================================*/

/* 헤더의 +/- 버튼 : 헤더가 sticky(= 배치된 요소)라 그 안에서 absolute 로 띄운다.
   헤더 텍스트 위에 겹쳐 흐르므로 열 너비에는 영향이 없다 - colgroup 이 정한
   너비가 그대로 유지된다 */
.colCtrl { position:absolute; right:2px; top:50%; z-index:3;
    margin-top:-8px; padding-left:3px; line-height:16px; white-space:nowrap;
    background:#f9f9f9; }    /* 헤더 배경과 같은 색 : 겹친 글자를 가린다 */
.colCtrl a { display:inline-block; width:16px; height:16px;
    margin-left:1px; vertical-align:middle; }
.colCtrl a img { display:block; width:16px; height:16px; border:0; }

/* 설정 아이콘 : 테이블 밖 우측 하단. 헤더가 sticky(z-index:2) 라 그보다 위에 둔다.
   right/bottom 값은 스크롤바와 높이 조절 핸들만큼 renderColSetBox 에서 다시 잡는다.
   배경은 데이터 행과 같은 흰색 : 마지막 행 위에 겹쳐도 색 얼룩으로 보이지 않는다 */
#colSetBox { position:absolute; right:2px; bottom:2px; z-index:5;
    line-height:16px; white-space:nowrap; background:#fff; padding-left:3px; }
#colSetBox a { display:inline-block; width:16px; height:16px;
    margin-left:1px; vertical-align:middle; }
#colSetBox a img { display:block; width:16px; height:16px; border:0; }
#colSetBox .colSetBtn img { opacity:.45; }
#colSetBox .colSetBtn:hover img { opacity:1; }
#colSetBox .colSetBtnOn img { opacity:1; }

/* 로딩 중 표 감추기 : 숨긴 열이 저장돼 있으면 서버는 전체 열을 그려 보내고 엔진이 DOM ready
   에 숨긴다. 그 사이 모습이 한 번 보이는 것을 막으려고 감춘 채 받는다.
   display:none 이 아니라 visibility 인 이유 - 접으면 표가 차지한 높이가 사라져 아래 푸터가
   올라왔다 내려가고, 그 움직임이 열 깜빡임보다 더 크게 보인다. 자리는 그대로 둔다.
   거두는 쪽은 common/js/sos_grid_col.js (엔진 초기화 끝 + load/타이머 보험) */
.colsLoading { visibility:hidden; }

/* 열 너비 조절 손잡이 : 헤더 셀 오른쪽 끝의 얇은 띠. gf_initColumnToggle({ resizable : true })
   를 부른 화면에만 붙고, 설정 아이콘으로 편집 모드(.colEditing)를 켰을 때만 드러난다.
   +/- 버튼(.colCtrl)보다 위에 둬야 경계를 잡을 수 있다 */
.colResizer { position:absolute; top:0; right:0; z-index:4; display:none;
    width:6px; height:100%; cursor:col-resize; }
.colEditing .colResizer { display:block; }
.colResizer:hover { background:#b8c7db; }

/* 끄는 동안 : 손잡이를 벗어나도 커서를 유지하고 글자가 선택되지 않게 한다 */
.colResizing, .colResizing * { cursor:col-resize !important;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }