/* ═══════════════════════════════════════════════════════════════════════════
   공통 데이터 그리드 — 스타일 단일 관리 파일 (2026-07-22 분리, 舊 style.css 내 섹션)
   ───────────────────────────────────────────────────────────────────────────
   이 파일 + hems2.grid.js 가 그리드 공통 구조의 관리 지점이다.
     · 스타일(이 파일)      : gridBox 프레임·스크롤·sticky 헤더·컬럼 구분선·행 인터랙션·오버레이 썸
     · 동작(hems2.grid.js) : 높이 계산(data-grid-height)·오버레이 썸·init()/refresh()·grid-empty 컴포넌트
     · defaultTable 기본(display·th/td·rowMiddle)은 common.css 가 담당(폼 테이블과 공유) — 여기선 확장만.

   마크업 규약 — gridBox > table 단일 껍데기(gridBox 자신이 스크롤러):
     <div class="gridBox">                 data-grid-height: 생략=화면 바닥까지 / 숫자=고정 px / "css"=flex 부모가 결정
       <table class="defaultTable">          말줄임 필요 시 gridBox 에 gridEllipsis 클래스 추가
         <colgroup> … </colgroup>
         <thead><tr class="row"><th class="th"> … </th></tr></thead>
         <tbody>
           <tr class="row dataRow" v-for=…> <td class="td"> … </td> </tr>   td 기본이 중앙 정렬(래퍼 div 불필요)
           <tr is="grid-empty" v-if="list.length === 0"></tr>   0건 안내(문구·colspan 자동 — hems2.grid.js)
         </tbody>
       </table>
     </div>
   ※ 舊 gridBox>gridScroll>table 2겹 구조(이관 전 화면)도 hems2.grid.js·이 파일이 함께 지원한다(점진 이관).

   화면 전용 확장(세로선·가로 스크롤·고정 높이 등)은 각 화면 클래스로 style.css 또는 css/hems2/*.css 에서 덧쓴다.
   이 파일은 style.css 보다 먼저 로드되므로 화면 전용 규칙이 우선한다(head_css.jsp 로드 순서 참조).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 선 디자인: 세로선 없음 (전 화면 단일 — 2026-07-21 통일) ──────────────────
   행 구분선만 두고, 컬럼 구분선은 헤더에만. 외곽 프레임도 두지 않아 선이 데이터 영역에만 남는다.
   바닥선은 프레임이 아니라 '마지막 행'이 담당한다 — 프레임이 바닥을 그리면 스크롤 중
   바닥에 걸친 행의 구분선과 겹쳐 2줄로 보인다(2026-07-20).
   ※ 舊 격자형 옵션(data-grid-line="grid")은 전 화면 기본 통일로 폐기 — 필요 시 git 이력 참조. */
/* gridBox = 스크롤러 겸 프레임. 구조 2종을 함께 지원(점진 이관):
     레거시 : gridBox > gridScroll > table  (스크롤 = gridScroll)
     신규   : gridBox > table               (스크롤 = gridBox 자신)
   셀 규칙은 .gridBox .defaultTable … 스코프 — 두 구조 모두 매칭하고, 舊 .gridScroll 과 같은
   특이도(클래스 3개)를 유지해 common.css 의 .defaultTable .row .td/.th(position:relative 등)를 이긴다.
   실제 스크롤러의 overflow 지정과 오버레이 썸 부착 위치는 hems2.grid.js 가 구조에 맞춰 처리한다. */
.gridBox{position: relative; background: #fff; scrollbar-width: none;} /* position: 레거시 썸 기준 / 신규는 부모 기준(무해) */
.gridBox::-webkit-scrollbar{display: none;}
/* css 높이 모드(data-grid-height="css") — 높이를 JS 대신 CSS flex 가 결정(권한관리·SMS 발송).
   gridBox 가 스크롤러 겸 flex 자식 — 부모(componentResult) flex 컬럼의 남는 높이를 상한으로 받되(flex-shrink+min-height:0),
   건수가 적으면 내용만큼만 차지(flex-basis:auto). overflow 는 hems2.grid.js 가 지정. */
.gridBox[data-grid-height="css"]{flex: 0 1 auto; min-height: 0;}
/* 레거시 스크롤 영역(gridScroll). 신규는 gridBox 자신이 스크롤러(overflow 는 hems2.grid.js 가 지정) */
.gridBox .gridScroll{overflow-y: auto; background: #fff; scrollbar-width: none;}
.gridBox .gridScroll::-webkit-scrollbar{display: none;}
/* ⚠ overflow:visible — defaultTable 의 overflow:hidden 이 sticky 헤더를 깨뜨린다 */
.gridBox .defaultTable{border-collapse: separate; border-spacing: 0; border: 0; width: 100%; overflow: visible;}
/* 헤더 — sticky 고정. 舊 '셀 경계' 방식의 정렬 사유는 격자형(바디 세로선) 폐기로 소멸. */
.gridBox .defaultTable thead .th{position: sticky; top: 0; z-index: 1; background: #98A5C0;
    border: 0; border-bottom: 1px solid #BBC7E3;}
/* 컬럼 구분선 — th::after 짧은 선. 마크업 훅 불필요 — th 에 직접 텍스트를 넣는다(舊 rowMiddle
   래퍼는 그리드에서 전량 제거, 2026-07-22). rowspan/colspan 크로스탭 헤더 포함 전 그리드 동일 적용 */
.gridBox .defaultTable thead .th:not(:last-child)::after{content: ''; position: absolute;
    right: 0; top: 50%; transform: translateY(-50%); height: 1.3em; width: 1px; background: #BBC7E3;}
/* 2줄(rowspan) 헤더 셀 — 1줄과 같은 상하 여백을 유지한 채 선이 셀 높이를 채운다.
   한 줄 높이(50%) + 1.3em 을 가운데 두면 여백 = (셀높이 - (한줄+1.3em))/2 = 1줄 셀의 여백과 동일 */
.gridBox .defaultTable thead .th[rowspan]:not(:last-child)::after{height: calc(50% + 1.3em);}
/* 헤더 액션 버튼(추가 등) — sticky 헤더 배경(#98A5C0)이 버튼에 비쳐 보이므로 흰 배경 고정(공통 버튼 디자인) */
.gridBox .defaultTable thead .th .btn{background: #fff;}
/* 바디 행 — tbody 의 th(행 머리)도 td 와 같은 선 체계를 따른다(권한관리처럼 첫 칸이 th 인 그리드) */
.gridBox .defaultTable .row .td,
.gridBox .defaultTable tbody .row .th{border-bottom: 1px solid #BBC7E3; border-right: 0; padding: 5px 10px;}

/* 그리드 바닥선 — 마지막 행이 담당.
   ⚠ border 가 아니라 inset box-shadow 로 그린다 — 행 높이가 소수점(버튼이 든 행 등)이면
   마지막 행 바닥이 스크롤 영역 경계를 0.x px 넘어가 border 가 잘려 사라진다(2026-07-20 실측) */
.gridBox .defaultTable tbody > .row:last-child > .td,
.gridBox .defaultTable tbody > .row:last-child > .th{border-bottom: 0; box-shadow: inset 0 -1px 0 #BBC7E3;}
/* 행 그룹 교차 배경 — rowspan 으로 여러 행이 한 단위(같은 날짜의 오전/오후 등)일 때
   홀수째 그룹 행들에 rowGroupAlt 를 부여해 옅은 톤으로 묶음을 표시. hover·selected 가 우선(아래 규칙이 이김) */
.gridBox .defaultTable .row.rowGroupAlt > .td{background: #F7F9FC;}
/* 행 인터랙션: 클릭 대상 행(dataRow)만 hover(#F1F4F8=clickable 어휘)·selected(#d7e3fc=active 어휘) */
.gridBox .defaultTable .row.dataRow{cursor: pointer;}
.gridBox .defaultTable .row.dataRow:hover > .td{background: #F1F4F8;}
.gridBox .defaultTable .row.selected > .td{background: #d7e3fc;}
/* opt-in: 셀 한 줄 표시(넘치면 말줄임…) — 열 너비는 각 화면 colgroup 으로. class="gridBox gridEllipsis"
   (전 셀 공통. 특정 컬럼만 말줄임하려면 화면 CSS 에서 .td:nth-child(n) 으로 별도 지정) */
.gridBox.gridEllipsis .defaultTable .row .th,
.gridBox.gridEllipsis .defaultTable .row .td{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* 오버레이 스크롤 썸 — hems2.grid.js 가 생성. 레거시=gridBox 안(가로는 right:2px) / 신규=부모 안(JS 가 left 지정) */
.gridThumb{position: absolute; right: 2px; width: 6px; border-radius: 3px;
    background: rgba(114, 128, 160, .55); opacity: 0; transition: opacity .25s; z-index: 2;}
.gridThumb.show{opacity: 1;}
.gridThumb:hover, .gridThumb:active{background: rgba(114, 128, 160, .8);}