/*
 * Tabulator 커스텀 UX 오버라이드
 *
 * style.css 를 markup 에서 다시 복붙해도 이 규칙들이 사라지지 않도록 별도 파일로 분리.
 * App.tsx 에서 style.css '다음'에 로드되므로(동일/높은 specificity + 나중 로드) 항상 우선 적용된다.
 * 새 규칙 추가 시 어떤 markup 규칙을 덮어쓰는지 주석으로 남길 것.
 */

/* 셀 범위(selectableRange) 드래그 시 브라우저 기본 텍스트 선택 방지 */
.tabulator .tabulator_th_cell,
.tabulator .tabulator_td_cell {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* tabindex=-1 포커스(클립보드 복사용) 시 기본 outline 제거 */
.tabulator .tabulator_th_cell:focus,
.tabulator .tabulator_td_cell:focus {
  outline: none;
}

/* 수동 새로고침 아이콘: 클릭 시 450ms 동안 360° 1회 회전(is_spinning 은 JS 가 450ms 후 제거). */
@keyframes orderListRefreshSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.btn_refresh.is_spinning img {
  animation: orderListRefreshSpin 450ms linear;
}

/* 목록 관리 메뉴가 열린 상태: 활성 탭 연필 아이콘 하이라이트 유지(hover 와 동일 연한 회색). */
.page_tms_ai .order_filter_tab_item .btn_tab_edit.is_open {
  background: #ebedef;
}

/* 체크박스 셀 hover 시 좌측에 드래그 핸들([::]) 노출 — 오더를 기사 스케줄로 끄는 어포던스.
   메인 오더리스트(#order-list-grid)에만 적용하고 AI 등록 오더 모달(#ai-order-list-grid)
   에서는 제거한다(기사 스케줄 드롭 대상이 아님).
   (셀은 이미 positioning context 라 ::before 절대배치가 셀 기준으로 잡힌다) */
#order-list-grid
  .tabulator-row
  .tabulator-cell[tabulator-field="checked"]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 16px;
  background: url("../images/ico/ic_24_drag_indicator.svg") center center
    no-repeat;
  background-size: contain;
  pointer-events: none;
}
/* 드래그 핸들([::], left:0·14px) 자리를 항상 비워 두어 체크박스(20px)를 hover 여부와 무관하게
   같은 위치(좌측 15px)에 고정한다. 기존엔 hover 시에만 밀어(QABTS-8345) 핸들이 뜰 때 체크박스가
   우측으로 점프했는데, 비-hover 에도 동일 padding 을 적용해 움직이지 않게 한다.
   헤더 전체선택 체크박스도 같은 padding 으로 맞춰 행 체크박스와 세로 정렬을 유지한다.
   핸들이 있는 메인 그리드(#order-list-grid)에만 적용. 열 폭 36px = 15 + 20 + 1.
   (기본 padding 규칙이 :is(#..grid) ID 특이도라, 동일 스코프 + 부모 셀렉터로 특이도를 높인다) */
#order-list-grid
  .tabulator-row
  .tabulator-cell[tabulator-field="checked"]
  .tabulator_td_cell,
#order-list-grid
  .tabulator-header
  .tabulator-col[tabulator-field="checked"]
  .tabulator_th_cell {
  padding: 7px 1px 7px 15px !important;
}
#order-list-grid
  .tabulator-header
  .tabulator-col[tabulator-field="checked"]
  .tabulator_th_cell {
  padding: 7px 1px 7px 17px !important;
}

/* 컬럼 헤더명: 컬럼 폭을 최소로 줄이면 말줄임(…) 처리.
   th_cell 이 컬럼 폭을 제약하고, th_title 을 block+ellipsis 로 넘치는 글자를 자른다.
   컬럼을 최소로 줄여도 헤더 타이틀이 0 으로 사라지지 않고 최소 1글자(+말줄임) 노출되도록
   최소폭 보장(QABTS-8277, 셀 지명 min-width 와 동일 정책).
   (ⓘ 컬럼은 th_area flex 안에서 동일 적용 — 인라인 ellipsis 와 중복돼도 무해) */
.tabulator .tabulator_th_cell .th_title {
  display: block;
  min-width: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 행 헤더(체크박스 열): 스프레드시트 선택 커서, 체크박스만 클릭 컨트롤 커서 */
.tabulator .tabulator-row .tabulator-cell.tabulator-range-row-header {
  cursor: cell;
}
#order-list-grid .tabulator .tabulator-row.row_selected{background-color: #E5EFFF;}
.tabulator
  .tabulator-row
  .tabulator-cell.tabulator-range-row-header
  .inp_choice,
.tabulator
  .tabulator-row
  .tabulator-cell.tabulator-range-row-header
  .lab_choice {
  cursor: pointer;
}

/* 셀 선택 시 가장 왼쪽 행 헤더(range-row-header)만 하이라이트 배경 제외(행 배경이 비치도록).
   나머지 셀/헤더 기본 하이라이트는 유지. markup 의 range-highlight 배경을 투명으로 덮어씀 */
.order_grid_skin
  .tabulator-row.tabulator-range-highlight
  .tabulator-cell.tabulator-range-row-header {
  background-color: transparent !important;
}

/* 화살표(nested 펼침) 컬럼 헤더/셀 배경을 일반 컬럼과 통일.
   헤더: 일반 컬럼 th_cell 과 동일한 #F6F7F8, 셀: 행 배경이 비치도록 투명.
   (__nested_expand: Tabulator 래퍼 nestedTable 공용 — 오더 리스트/AI 등록 오더 모달) */
.order_grid_skin .tabulator-col[tabulator-field="__nested_expand"],
.order_grid_skin
  .tabulator-col[tabulator-field="__nested_expand"]
  .tabulator_th_cell {
  background-color: #f6f7f8 !important;
}
.order_grid_skin .tabulator-cell[tabulator-field="__nested_expand"] {
  background-color: transparent !important;
}

/* row_input_required(입력필요) 빨간 border-left 는 descendant 셀렉터라 펼친 부모 행 안의
   경유지(nested) 자식 행 첫 셀에도 새어든다. 자식 행에는 노출하지 않도록 nested holder 내부에서 제거. */
.tabulator
  .tabulator-row.row_input_required
  .tabulator_nested_holder
  .tabulator-cell:first-child {
  border-left: 0 !important;
}

/* 경고(!) 아이콘 래퍼 .tooltip_info 는 z-index:20(style.css)이라, 횡스크롤 시 셀이 좌측 고정(frozen)
   열(z-index:11) 아래로 지나갈 때 아이콘만 프로즌 위로 떠서 체크박스/오더ID 를 가리고 클릭을 막는다.
   그리드 바디 셀의 tooltip_info 를 frozen 아래로 낮춘다(헤더는 이미 z-index:0 처리). QABTS-8447 */
:is(#order-list-grid, #ai-order-list-grid) .tabulator-cell .tooltip_info {
  z-index: 0;
}

/* AI 확장 타이틀 그라데이션 로딩 스피너 — 등록 진행중 무한 회전(피그마 AI/AI_Gradient). QABTS-8356
   (@keyframes rotate 는 style.css 정의를 공유) */
.ai_title_loader {
  width: 16px;
  height: 16px;
  animation: rotate 1s linear infinite;
}

/* nested 펼침 화살표 아이콘 — markup 은 .page_tms_ai .section_order_list 하위로 스코프돼 있어
   body 로 portal 되는 AI 등록 오더 모달에는 적용되지 않는다. 스킨 기준으로 동일 규칙 제공 */
.order_grid_skin .btn_sub_toggle {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  background: url("../images/ico/ic_16_arrow_down_gray.svg") center center
    no-repeat;
  background-size: 16px auto;
  transform: rotate(-90deg);
}
.order_grid_skin .btn_sub_toggle.toggle_open {
  transform: rotate(0);
}
/* 펼침 불가(등록 진행중 등) 화살표 — 회색 톤 다운 + 클릭 불가. 완료되면 재렌더로 활성화. QABTS-8352 */
.order_grid_skin .btn_sub_toggle.is_disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* 가로 스크롤 끝 탄성 오버스크롤(헤더-바디 어긋남) 보조 차단 (Chrome 계열).
   주 차단은 Tabulator.tsx 의 wheel 가드, 이건 보완용. */
.order_grid_skin .tabulator-tableholder {
  overscroll-behavior-x: none;
}

/* 메인 오더리스트: 마지막 row 가 하단 가로 스크롤바에 가려 짤리는 문제 — tableholder 하단에
   스크롤바 높이만큼 여백을 줘 마지막 row 를 스크롤바 위로 드러낸다. */
#order-list-grid .tabulator-tableholder {
  padding-bottom: 16px;
}

/* 편집 활성 셀: LIS 블루 2px 하이라이트.
   - 셀에 overflow:hidden 이 있어 outline(offset -2px)은 클립되므로 inset box-shadow 로 안쪽 경계에 2px 링을 그린다(폭 밀림 없음).
   - 범위 선택 오버레이(.tabulator-range-overlay z-index:10)가 덮지 않도록 z-index:11 로 올린다(오버레이는 pointer-events:none).
   - markup 기본값 `.tabulator-cell.tabulator-editing{border:1px solid #1d68cd}` 을 덮어씀 */
.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
  border: 0 !important;
  border-right: 1px solid #e3e5e9 !important;
  position: relative;
  z-index: 11;
  box-shadow: inset 0 0 0 2px #005fff !important;
  /* 수정 모드 셀 배경 회색(피그마 Background/Gray) — input 은 아래에서 투명 처리해 이 색을 노출. */
  background: #f6f7f8 !important;
}

/* 인라인 편집 input 타이포그래피를 셀 표시와 일치. 패딩 8px(!important: 내장 editor 가 inline 으로 padding 4px 를 박음) */
.tabulator .tabulator-row .tabulator-cell.tabulator-editing input,
.tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
  width: 100%;
  height: 100%;
  padding: 0 8px !important;
  box-sizing: border-box;
  font-family: "Pretendard GOV";
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: #2e3238;
  letter-spacing: -0.3px;
  /* 셀 회색 배경이 비치도록 input/select 는 투명. */
  background: transparent !important;
}

/* list editor dropdown 항목 (body 로 portal 되어 .tabulator 하위 아님) */
.tabulator-popup-container.tabulator-edit-list .tabulator-edit-list-item {
  font-family: "Pretendard GOV";
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.3px;
  padding: 7px 8px;
}

/* 테이블 최상위 컨테이너(.tabulator 루트) 외곽선 제거 —
   markup style.css 의 `.tabulator{border-top:1px solid #E3E5E9}` 를 스킨 한정으로 덮어씀.
   (.order_grid_skin 이 루트 div 에 직접 붙어 초기화 시 .tabulator 와 같은 요소가 된다) */
.order_grid_skin.tabulator {
  border: 0;
}

/* (제거) AI 모달 편집 셀 전용 2px 테두리 — 이제 AI 모달도 selectableRange 를 쓰므로
   공통 규칙(.tabulator ...)의 inset box-shadow 2px 링이 적용된다. 여기에 별도 border 를
   더하면 링(inset)+테두리(border)가 겹쳐 포커스가 두 겹으로 두껍게 보였다(QABTS-8380).
   → 메인 오더리스트와 동일하게 공통 inset 링 하나만 남긴다. */

/* 화주 셀 에디터 드롭다운 — 선택 항목 체크(::after)의 좌측 마진 제거(태그와 붙임) */
.shipper_cell_dropdown .ly_dropdown__item.active .btn_dropdown::after {
  margin-left: 0;
}
/* 이름(.txt)이 남은 공간을 차지해 태그+체크가 우측에 붙도록(active 시 3요소 space-between 분산 방지).
   LIS style.css 는 .txt 에 flex 규칙이 없어 셀 드롭다운 한정으로 보완. */
.shipper_cell_dropdown .ly_dropdown__item .btn_dropdown.flex_d .txt {
  flex: 1;
  min-width: 0;
}

/* 거래처 등록 버튼: markup(.ly_dropdown_group .btn_partner_add)의 회색 배경(#F9F9F9)과
   우측 > 아이콘(::after)을 제거해 드롭다운(#fff) 배경과 통일하고 불필요한 화살표를 숨긴다.
   화주/요청협력사/위탁협력사 셀 드롭다운 공통 적용(QABTS-8346).
   (동일 특이도라 style.css 다음 로드되는 이 파일이 우선) */
.ly_dropdown_comm .btn_partner_add {
  background: #ffffff;
}
.ly_dropdown_comm .btn_partner_add::after {
  display: none;
}
/* '거래처 등록' 앞 '+' 아이콘 — 셀 드롭다운은 포털(.section_order_list 밖)이라
   style.css 의 .section_order_list 스코프 ::before 가 안 먹으므로 여기서 노출한다.
   (.btn_partner_add 는 화주/요청협력사/위탁협력사 드롭다운에만 존재) */
.ly_dropdown_comm .btn_partner_add::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin-top: -2px;
  background: url("../images/ico/ic_16_plus_off.svg") center center no-repeat;
  background-size: 100% auto;
}

/* 목록 정렬 설정 모달: 정렬 항목 드롭다운이 옵션 텍스트 폭만큼 넓어져 모달 우측 경계를
   벗어나던 문제 — 드롭다운 폭을 트리거(컨테이너) 폭에 맞춰 모달 내에 들어오게 한다.
   (긴 항목명 말줄임은 .ly_dropdown_normal .txt_opt 규칙이 이미 처리) */
.lypop_align_set .opt_select_choice .ly_dropdown_comm.ly_dropdown_normal {
  width: 100%;
  box-sizing: border-box;
}

/* ly_dropdown_normal 단일선택 항목: 이름(.txt_opt)이 남은 공간을 차지하고 태그(tag_state)와
   선택 체크(::after)가 우측에 붙도록. (요청협력사 미가입/배차금지 태그 우측 정렬) */
.ly_dropdown_comm.ly_dropdown_normal .btn_dropdown .txt_opt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ly_dropdown_comm.ly_dropdown_normal .btn_dropdown .tag_state {
  flex: none;
}

/* 편집 가능 셀 hover 시 우측에 편집(연필) 아이콘 노출 */
.tabulator .tabulator-row .tabulator-cell.cell-editable-hover {
  position: relative;
}
.tabulator
  .tabulator-row
  .tabulator-cell.cell-editable-hover:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("../images/ico/ic_16_edit.svg") center center no-repeat;
  background-size: 16px auto;
  cursor: pointer;
}
/* 체크박스로 선택된 행: 전체 배경 강조.
   Tabulator SelectRange 가 tabulator-range-selected 를 관리(셀 범위선택 시 제거)하므로
   전용 클래스(row_checked)를 써서 충돌을 피한다. (셀 배경은 투명이라 행 배경이 비침) */
.tabulator .tabulator-row.row_checked {
  background-color: #ccdfff !important;
}

/* 오더 그리드 체크박스(헤더 전체선택 + 각 행): markup 의 ico_checkbox_normal.svg(18x18)
   대신 디자인 스펙대로 CSS 로 그린 16x16 라운드 박스로 대체.
   - 미체크/hover: 1.3px #ADB1B9 아웃라인, radius 4px
   - 체크: 기존 selected SVG 유지(우리 테두리 제거 + 16px 로 스케일)
   ::before 의사요소라 인라인 스타일이 불가해 여기서 오버라이드. */
.order_grid_skin .opt_comm.opt_choice input[type="checkbox"] + .lab_choice::before,
.order_grid_skin
  .opt_comm.opt_choice
  input[type="checkbox"]:hover
  + .lab_choice::before {
  width: 20px;
  height: 20px;
  background: url("../images/ico/ic_20_checkbox_off.svg") 0 0 no-repeat;
  background-size: 100% auto;
  vertical-align: -3px;
}
.order_grid_skin
  .opt_comm.opt_choice
  input[type="checkbox"]:checked
  + .lab_choice::before {
  width: 20px;
  height: 20px;
  border: 0;
  background: url("../images/ico/ic_20_checkbox_on.svg") 0 0 no-repeat;
  background-size: 100% auto;
  vertical-align: -3px;
}

/* 셀 텍스트 상하 정중앙.
   Tabulator 셀(inline-block) 안에서 td_cell 이 height:100% 를 못 펴고 상단에 붙어, 텍스트가
   아이콘(셀 기준 absolute 중앙)보다 위로 뜬다. 단일 라인 텍스트(.txt_ellipsis)의 line-height 를
   (행 40px − 상하 padding 14px =) 26px 로 키우면 td_cell 이 셀을 꽉 채우고, 그 line-height 가
   글자를 셀 정중앙(20px)에 맞춘다. align_column(화주/요청협력사 등)도 단일 라인이라 동일하게 적용. */
:is(#order-list-grid, #ai-order-list-grid) .tabulator_td_cell .txt_ellipsis {
  line-height: 26px;
}

/* 체크박스 셀(첫 열) 내부 여백. field 로 지정해 순서와 무관하게 적용(!important + 나중 로드).
   오더리스트 + AI 등록 오더 모달 동일 적용. */
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="checked"]
  .tabulator_td_cell {
  padding: 7px !important;
}

/* style.css 의 첫 열 헤더/셀 padding:0 무효화(요청).
   (`#order-list-grid .tabulator-col:first-child .tabulator_th_cell`,
    `#order-list-grid .tabulator-cell:first-child .tabulator_td_cell{padding:0}`)
   style.css 는 markup 재싱크로 직접 수정하지 않고 여기서 7px 로 되돌린다. */
:is(#order-list-grid, #ai-order-list-grid) .tabulator-col:first-child .tabulator_th_cell,
:is(#order-list-grid, #ai-order-list-grid) .tabulator-cell:first-child .tabulator_td_cell {
  padding: 7px;
}

/* nested 화살표 열(__nested_expand, 20px) td 좌우 패딩 제거 — 기본 td_cell 의 좌우 8px 때문에
   화살표가 오른쪽으로 밀려 짤리는 것을 막는다. style.css 의 `#order-list-grid .tabulator-cell:nth-child(2)`
   리셋이 오더리스트에만 걸려 AI 등록 오더 모달(#ai-order-list-grid)엔 미적용이라, 여기서 두 그리드
   공용(field 기준)으로 제공한다. */
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="__nested_expand"]
  .tabulator_td_cell {
  padding: 7px 0;
}

/* 첫 열(체크박스) + 둘째 열(nested 화살표): 셀/헤더 배경을 #f6f7f8 로 고정.
   불투명 회색으로 채우므로 범위선택(SelectRange) 드래그 블록이 이 두 열엔 칠해지지 않는다.
   단, 체크 선택(row_checked / range-selected)된 행과 드래그 프리뷰(row_drag_preview) 행은
   제외·별도 규칙으로 markup 처럼 덮는다.
   오더리스트 + AI 등록 오더 모달 동일 적용(두 그리드 ID 모두 명시). */
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-row:not(.row_checked):not(.row_drag_preview)
  .tabulator-cell[tabulator-field="__nested_expand"],
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-row:not(.row_checked):not(.row_drag_preview)
  .tabulator-cell[tabulator-field="checked"],
:is(#order-list-grid, #ai-order-list-grid) .tabulator-col[tabulator-field="__nested_expand"] .tabulator_th_cell,
:is(#order-list-grid, #ai-order-list-grid) .tabulator-col[tabulator-field="checked"] .tabulator_th_cell,
/* AI 모달 "결과" 열도 체크박스 열과 동일한 회색(#f6f7f8) 배경 */
#ai-order-list-grid
  .tabulator-row:not(.row_checked)
  .tabulator-cell[tabulator-field="aiStatus"],
#ai-order-list-grid .tabulator-col[tabulator-field="aiStatus"] .tabulator_th_cell {
  background-color: #f6f7f8 !important;
}

/* frozen 열(체크박스·화살표) 배경 불투명화 — 근본 원인 대응.
   Tabulator 기본 .tabulator-cell.tabulator-frozen 은 background-color:inherit(행 배경 상속) + z-index:11.
   일반 행 배경은 unset(투명)이라 이 frozen 셀도 투명해지는데, frozen 이 range 오버레이(z-index:10)
   위라 투명하면 횡스크롤 시 활성 셀의 파란 테두리가 이 열 위로 비친다. field 선택자가 frozen body
   셀에 안 걸리는 케이스가 있어 .tabulator-frozen 으로 확실히 불투명 채운다.
   (row_checked / range-selected / row_drag_preview 는 아래 별도 규칙이 각 색으로 덮는다.
    :not() 이 셋이라 특이도가 높으므로, 덮는 규칙이 밀리지 않게 여기서 프리뷰 행도 제외한다.) */
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-row:not(.row_checked):not(.tabulator-range-selected):not(
    .row_drag_preview
  )
  .tabulator-cell.tabulator-frozen {
  background-color: #f6f7f8 !important;
}

/* 체크(row_checked)된 행: 좌측 고정(frozen) 셀(체크박스·화살표)을 행 하이라이트색(#CCDFFF)으로
   불투명 채움. 이 두 열은 style.css 의 .tabulator-range-row-header{transparent !important}(체크박스)
   와 스킨의 __nested_expand{transparent}(화살표)로 투명한데, frozen 열이 투명이면 횡스크롤 시 뒤로
   스크롤되는 셀 텍스트가 비쳐 보인다. field 대신 frozen/행헤더 클래스로 확실히 잡는다.
   (style.css 미수정 — ID 특이도 + !important 로 오버라이드. range-selected 규칙이 아래에서
   #669FFF 로 덮으므로 체크+범위선택 동시 상태는 그쪽이 우선.) */
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-row.row_checked
  .tabulator-cell.tabulator-frozen,
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-row.row_checked
  .tabulator-cell.tabulator-range-row-header,
#ai-order-list-grid
  .tabulator-row.row_checked
  .tabulator-cell[tabulator-field="aiStatus"] {
  background-color: #669fff !important;
}
/* 진한 파랑(#669fff) 위 화살표 대비 — range-selected 와 동일하게 흰색 화살표. QABTS-8120 */
.order_grid_skin .tabulator-row.row_checked .btn_sub_toggle {
  background-image: url("../images/ico/ic_16_arrow_down_white.svg");
}

/* 오더 드래그 프리뷰(row_drag_preview): 미체크 행을 기사 스케줄로 끄는 동안 체크박스가 표시 전용으로
   체크되는데, 체크박스 셀(행 헤더·frozen) 배경도 체크 상태(row_checked)와 동일한 #669fff 로 맞춘다.
   mouseup 시 JS 가 클래스를 제거해 본래 색으로 돌아간다(toTabulatorColumns.ts 드래그 프리뷰).
   드래그는 메인 오더리스트(#order-list-grid)에서만 시작된다. */
#order-list-grid
  .tabulator-row.tabulator-row.row_drag_preview
  .tabulator-cell.tabulator-cell.tabulator-frozen,
#order-list-grid
  .tabulator-row.tabulator-row.row_drag_preview
  .tabulator-cell.tabulator-cell.tabulator-range-row-header {
  background-color: #669fff !important;
}
.order_grid_skin .tabulator-row.row_drag_preview .btn_sub_toggle {
  background-image: url("../images/ico/ic_16_arrow_down_white.svg");
}

/* 체크박스 아이콘 내부(.lab_choice::before) 배경을 흰색으로 — 헤더(전체선택, .lab_choice)와
   행(.lab_choice.checkbox) 모두. ::before 는 투명한 SVG 아이콘이라 뒤 셀 회색(#f6f7f8)이 비쳐 보였다.
   background-image 는 원래 상태별 규칙(normal/hover/checked)을 그대로 두고 background-color 만 흰색으로 얹는다.
   ID 특이도로 상태별 shorthand(background) 의 투명 리셋을 이겨 모든 상태에서 흰색 유지.
   오더리스트 + AI 등록 오더 모달 동일 적용. */
/* :is(#order-list-grid, #ai-order-list-grid) .opt_choice .lab_choice::before {
  background-color: #ffffff;
} */
/* disabled: 위 흰 배경 오버라이드가 공통 disabled 아이콘(background shorthand)을 가리므로
   동일 ID 특이도로 disabled 아이콘을 다시 지정한다. */
:is(#order-list-grid, #ai-order-list-grid)
  .opt_choice
  input[type="checkbox"]:disabled
  + .lab_choice::before {
  background: url("../images/ico/ic_20_checkbox_off_disabled.svg") center center no-repeat;
  cursor: default;
}
:is(#order-list-grid, #ai-order-list-grid)
  .opt_choice
  input[type="checkbox"]:checked:disabled
  + .lab_choice::before {
  background: url("../images/ico/ic_20_checkbox_on_disabled.svg") center center no-repeat;
  cursor: default;
}

/* 체크(range-selected)된 행: 체크박스/화살표 셀을 markup 처럼 #669FFF, 화살표는 흰색.
   (markup: .tabulator-range-selected .tabulator-range-row-header{#669FFF} + .btn_sub_toggle 흰색)
   배경: #order-list-grid 회색 오버라이드(ID 특이도)를 이기려 두 그리드 ID 를 명시한다.
   화살표: order_grid_skin 회색 규칙만 이기면 되므로 공용 스킨으로 두 그리드 모두 적용. */
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-row.tabulator-range-selected
  .tabulator-cell.tabulator-frozen,
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-row.tabulator-range-selected
  .tabulator-cell[tabulator-field="checked"],
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-row.tabulator-range-selected
  .tabulator-cell[tabulator-field="__nested_expand"],
#ai-order-list-grid
  .tabulator-row.tabulator-range-selected
  .tabulator-cell[tabulator-field="aiStatus"] {
  background-color: #669fff !important;
}
.order_grid_skin .tabulator-row.tabulator-range-selected .btn_sub_toggle {
  background-image: url("../images/ico/ic_16_arrow_down_white.svg");
}
/* 선택 상태(체크/범위선택/드래그) 화살표 회전 복원 — style.css:5199 의
   `.tabulator-range-highlight .btn_sub_toggle{transform:rotate(0)}` 이 체크된 행(체크 시
   range-highlight 부여)에 적용돼, 접힘 화살표(하향 이미지 + base rotate(-90)=우향)를 rotate(0)
   으로 눕혀 아래로 보이던 문제를 되돌린다. 접힘=우향('>'), 펼침(toggle_open)=하향('v'). QABTS-8464
   (동일 특이도라 나중 로드되는 이 파일이 우선) */
.order_grid_skin .tabulator-row.row_checked .btn_sub_toggle,
.order_grid_skin .tabulator-row.tabulator-range-selected .btn_sub_toggle,
.order_grid_skin .tabulator-row.row_drag_preview .btn_sub_toggle {
  transform: rotate(-90deg);
}
.order_grid_skin .tabulator-row.row_checked .btn_sub_toggle.toggle_open,
.order_grid_skin .tabulator-row.tabulator-range-selected .btn_sub_toggle.toggle_open,
.order_grid_skin .tabulator-row.row_drag_preview .btn_sub_toggle.toggle_open {
  transform: rotate(0deg);
}
/* 흰 화살표는 화살표 셀 배경이 파랑(#669FFF)이 되는 실제 선택 상태에서만
   (row_checked / tabulator-range-selected / row_drag_preview).
   style.css 의 `.tabulator-range-highlight .btn_sub_toggle{흰색}` 규칙은 포커스 셀의 행 교차
   하이라이트(배경 불변)에도 흰색을 입혀, 밝은 배경 위 화살표가 안 보이던 문제.
   위 세 선택 상태가 아닌 단순 하이라이트에선 기본 회색 화살표로 완전 복원한다. */
.order_grid_skin
  .tabulator-row.tabulator-range-highlight:not(.tabulator-range-selected):not(
    .row_checked
  ):not(.row_drag_preview)
  .btn_sub_toggle {
  background: url("../images/ico/ic_16_arrow_down_gray.svg") center center
    no-repeat;
  background-size: 16px auto;
  transform: rotate(-90deg);
}
.order_grid_skin
  .tabulator-row.tabulator-range-highlight:not(.tabulator-range-selected):not(
    .row_checked
  ):not(.row_drag_preview)
  .btn_sub_toggle.toggle_open {
  transform: rotate(0);
}

/* 편집 중에는 아이콘 숨김 */
.tabulator
  .tabulator-row
  .tabulator-cell.cell-editable-hover.tabulator-editing::after {
  display: none;
}
/* 배차방법상 편집 불가한 배차의존 셀(위탁협력사 등): 편집(연필) 아이콘 숨김.
   editable=false 로 진입도 막혀 있어, 아이콘만 뜨면 클릭해도 안 열려 혼란을 준다.
   toTabulatorColumns formatter 가 편집 판정과 같은 기준으로 data 속성을 표시한다. */
.tabulator
  .tabulator-row
  .tabulator-cell.cell-editable-hover[data-edit-disabled="true"]:hover::after {
  display: none;
}
/* 서버 저장 요청 중(테이블 전체): 편집(연필) 아이콘 숨김 — 편집 진입도 함께 차단(editable=false).
   저장 중인 그 셀은 아래 data-saving 스피너를 유지해야 하므로 :not([data-saving]) 로 제외한다. */
.tabulator.is-saving
  .tabulator-row
  .tabulator-cell.cell-editable-hover:not([data-saving="true"]):hover::after {
  display: none;
}
/* 저장 중(요청~응답): 편집 아이콘 위치에 동일 크기(16x16) 스피너 표시(hover 무관).
   Tabulator 가 재렌더 시 className 을 덮어쓰므로 data 속성으로 표시(속성은 유지됨). */
.tabulator .tabulator-row .tabulator-cell[data-saving="true"] {
  position: relative;
}
.tabulator .tabulator-row .tabulator-cell[data-saving="true"]::after,
.tabulator
  .tabulator-row
  .tabulator-cell.cell-editable-hover[data-saving="true"]:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid #e3e5e9;
  border-top-color: #9197a1;
  border-radius: 50%;
  background: none;
  cursor: default;
  animation: cell-save-spin 0.6s linear infinite;
}
@keyframes cell-save-spin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* 셀 내 warning 아이콘: 셀 우측에 절대배치 + 상하 정중앙(고정 16px 를 top/bottom:0 + margin:auto).
   (텍스트는 아래 line-height 로 셀을 채워 중앙정렬 → 아이콘과 같은 중앙선에 맞춘다) */
.tabulator .tabulator-row .tabulator-cell .warning {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  height: 16px;
  margin: auto 0;
}
/* 편집(연필) 아이콘이 뜨는 hover 시엔 warning 을 숨겨 아이콘과 겹치지 않게 한다. */
.tabulator
  .tabulator-row
  .tabulator-cell.cell-editable-hover:hover
  .warning {
  display: none;
}
/* 단, 안내 툴팁이 붙는 컬럼(경유지 기본주소)은 hover 에도 warning(빨간 느낌표)을 유지해
   클릭으로 툴팁을 열 수 있게 하고(CellWarningTooltip), 편집(연필) 아이콘은 왼쪽으로 밀어 겹침 방지.
   (화주/요청협력사는 기본주소와 동일하게 hover 시 (!)를 숨김 — 사용자 요청) */
.tabulator
  .tabulator-row
  .tabulator-cell.cell-editable-hover[tabulator-field="basicAddress"]:hover
  .warning {
  display: block;
}
/* 안내 툴팁 트리거 warning 은 클릭 가능 표시(커서). */
.tabulator
  .tabulator-row
  .tabulator-cell[tabulator-field="consignorName"]
  .warning,
.tabulator
  .tabulator-row
  .tabulator-cell[tabulator-field="requestPartnerName"]
  .warning,
.tabulator
  .tabulator-row
  .tabulator-cell[tabulator-field="basicAddress"]
  .warning {
  cursor: pointer;
}
/* 경유지 기본주소(basicAddress)도 메인 상차지 기본주소(pickupBasicAddress)와 동일하게 —
   연필(수정) 아이콘은 기본 위치(right:6px), (!) 위치·말줄임은 공용 .justify_start 규칙을 그대로 따른다.
   (이전엔 basicAddress 만 연필을 right:28px 로 밀었으나, justify_start 의 padding-right:24px 가 이미 공간을
   확보하므로 불필요 — 메인 오더리스트와 동일 정렬. QABTS-8468) */

/* (!) 아이콘 셀(justify_start, 화주/요청협력사/기본주소 등): 긴 텍스트가 우측 아이콘(경고 (!)·수정
   연필)과 겹치지 않도록, txt_ellipsis 를 flex 축소 가능(min-width:0)하게 해 우측 여백 안에서
   말줄임한다. (min-width 미지정 시 flex 항목이 내용폭을 유지해 텍스트가 padding 을 넘어 겹침 — QABTS-8469) */
:is(#order-list-grid, #ai-order-list-grid) .tabulator_td_cell.justify_start {
  padding-right: 24px;
}
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator_td_cell.justify_start
  .txt_ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "오더 등록" 버튼: AI 처리중(running) SSE 진행 문구를 채팅의 ai_thinking .message 와 동일한
   shimmer 텍스트 + 채팅 심볼 아이콘으로 노출.
   원본 `.lypop_aichat .aichat_section .aichat__msg.ai_thinking .message` 는 채팅영역 스코프라
   버튼(.lypop_aichat 밖)엔 안 붙으므로, 동일 스타일을 버튼 스코프로 미러링한다
   (shimmer 애니메이션은 style.css 의 전역 @keyframes aichatThinkingPulse 재사용 — GPU 합성 opacity). */
.btn_ai_orderedit.is_ai_running::before {
  display: none; /* 기본 AI 아이콘 숨김 — thinking 문구는 채팅 심볼만 노출 */
}
.btn_ai_orderedit .message {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 0 8px;
  font-family: "Pretendard GOV";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: #2e3238;
  animation: aichatThinkingPulse 1.4s ease-in-out infinite;
  will-change: opacity;
}
.btn_ai_orderedit .message::before {
  display: block;
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("../images/ico/ic_24_chat_symbol.svg") 0 0 no-repeat;
  background-size: 100% auto;
}

/* 컨텍스트 메뉴 "정보 복사"(2depth) — 서브메뉴를 body 포털(click_2depth_portal)로 렌더해서
   nested .lypop_click_2depth 가 없어 디자인 시스템의 :has(> .lypop_click_2depth) 화살표 규칙이
   안 걸린다. 마커 클래스(.has_2depth)로 우측 > 화살표를 항상 노출한다. */
.lypop_click_opt .click__lst > li.has_2depth > .link_opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.lypop_click_opt .click__lst > li.has_2depth > .link_opt::after {
  flex: none;
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  background: url("../images/ico/ic_16_arrow_right_gray.svg") center center
    no-repeat;
  background-size: 16px auto;
}
/* hover(=서브메뉴 노출) 시에만 파란 화살표로 */
.lypop_click_opt .click__lst > li.has_2depth > .link_opt:hover::after {
  background-image: url("../images/ico/ic_16_arrow_right_blue.svg");
}

/* 오더리스트 우클릭 컨텍스트 메뉴: 항목이 늘어(12개+구분선 ~544px) 디자인 시스템의
   .click__lst{max-height:332px} 에 잘려 "정보 복사" 아래 항목이 스크롤 밑으로 숨었다.
   이 메뉴에 한해 max-height 클립을 해제해 전 항목을 노출한다(디자인과 동일). */
.lypop_click_opt.order_ctx_menu .click__lst {
  max-height: none;
}

/* 정보 복사 2depth 포털: 복사 항목(2줄짜리 포함 ~260px)이 디자인 시스템의
   .click_2depth_portal{max-height:218px} 에 잘려 스크롤이 생긴다. 이 서브메뉴에 한해
   max-height 해제해 전 항목을 스크롤 없이 노출한다. */
.lypop_click_2depth.click_2depth_portal.order_ctx_2depth {
  max-height: none;
}

/* 정보 복사 2depth 는 body 포털(click_2depth_portal)이라 .lypop_click_opt .disabled 회색 규칙이
   안 닿는다 → disabled 항목이 활성처럼 보임. 포털 내 disabled 도 동일하게 회색/비활성 표시. */
.lypop_click_2depth.order_ctx_2depth .disabled .link_opt {
  color: #c7cbd1;
  cursor: not-allowed;
}
.lypop_click_2depth.order_ctx_2depth .disabled .link_opt:hover {
  background-color: transparent;
}

/* 상/하차지명 + 경유지명(경유 서브테이블 field="addressName"): 우측에 작업장유형(workZoneType) gray 태그.
   셀을 flex 로 만들어 지명(txt_ellipsis) 바로 옆에 태그가 붙게 한다(QABTS-8557).
   padding-right:24px 로 우측에 수정(연필) 아이콘 공간을 확보한다 — 기본주소 (!) 아이콘 셀(.justify_start)과
   동일한 우측 limit 이라, 태그가 셀 우측 끝까지 붙지 않고 연필과 겹치지 않는다(QABTS-8579 후속). */
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="pickupAddressName"]
  .tabulator_td_cell,
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="dropoffAddressName"]
  .tabulator_td_cell,
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="addressName"]
  .tabulator_td_cell {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 24px;
}
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="pickupAddressName"]
  .tabulator_td_cell
  .txt_ellipsis,
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="dropoffAddressName"]
  .tabulator_td_cell
  .txt_ellipsis,
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="addressName"]
  .tabulator_td_cell
  .txt_ellipsis {
  /* 지명은 내용폭까지만 차지(grow 0) → 작업장유형 태그가 우측 끝이 아니라 지명 바로 옆에 붙는다.
     (QABTS-8557) 폭이 부족하면 태그가 먼저 축소·말줄임되고(태그 shrink 9999 » 지명 shrink 1), 태그가 다
     줄어든 뒤에야 지명이 축소된다 → 지명을 최대한 온전히 노출한다. */
  flex: 0 1 auto;
  /* 컬럼을 최소로 줄여도 지명이 0 으로 사라지지 않고 최소 1글자(+말줄임) 노출되도록 최소폭 보장. */
  min-width: 28px;
  max-width: none;
}
:is(#order-list-grid, #ai-order-list-grid) .lis_grid_tag {
  /* 폭이 부족하면 태그가 먼저 축소·말줄임된다(shrink 9999 » 지명 shrink 1) → 지명을 최대한 온전히 노출.
     (QABTS-8557) 태그는 min-width:0 까지 줄고 내용은 말줄임 처리한다. */
  flex: 0 9999 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  padding: 0 6px;
  height: 20px;
  line-height: 20px;
  border-radius: 4px;
  background-color: #eef1f4;
  color: #2e3238;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* 증빙서류/화주첨부파일 셀: 클립 아이콘 첨부 버튼(.tables_container .btn_attached 디자인을
   그리드 스코프로 재현). 0건이면 disabled(회색 + 비활성 아이콘). */
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="documentCount"]
  .tabulator_td_cell,
:is(#order-list-grid, #ai-order-list-grid)
  .tabulator-cell[tabulator-field="attachmentCount"]
  .tabulator_td_cell {
  display: flex;
  align-items: center;
}
:is(#order-list-grid, #ai-order-list-grid) .btn_attached {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 2px;
  background: #e3e5e9;
  color: #2e3238;
  font-size: 13px;
  line-height: 26px;
  white-space: nowrap;
  cursor: pointer;
}
:is(#order-list-grid, #ai-order-list-grid) .btn_attached::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("../images/ico/ic_16_clip.svg") center center no-repeat;
  background-size: 100% auto;
}
:is(#order-list-grid, #ai-order-list-grid) .btn_attached:disabled {
  background-color: #f1f2f4;
  color: #b6bac1;
  cursor: default;
}
:is(#order-list-grid, #ai-order-list-grid) .btn_attached:disabled::before {
  background-image: url("../images/ico/ic_16_clip_disabled.svg");
}

/* 경유지 nested 테이블 로딩/에러 상태 (fetchChildren 조회 중/실패) */
.tabulator_nested_holder .nested_state {
  padding: 12px 8px;
  font-size: 14px;
  line-height: 20px;
  color: #8b909a;
  text-align: center;
}
.tabulator_nested_holder .nested_state.nested_error {
  color: #dd3b3b;
}

/* ── 경유지 nested 서브테이블: 부모 그리드와 분리된 독립 박스로 표시 (tabulator nested-tables 예제 형태) ── */
/* holder 여백/배경 — style.css `.tabulator_nested_holder{padding:0}` 오버라이드.
   solid 배경으로 부모 행 선택/hover 하이라이트가 nested 영역에 비치지 않게 한다.
   sticky(left:0) — 행은 전체 컬럼 폭만큼 넓지만, 가로 스크롤해도 nested 는 뷰포트 좌측에 고정.
   폭은 JS 에서 그리드 clientWidth 로 지정(뷰포트 폭). */
.order_grid_skin .tabulator_nested_holder {
  /* 우측 여백(56px)은 padding-right 로 주지 않는다 — 가로 스크롤 컨테이너는 스크롤 끝에서
     padding-right 를 무시해 여백이 사라진다. 대신 아래 .tabulator margin-right 로 준다(스크롤 콘텐츠에 포함). */
  padding: 10px 0 12px 56px !important;
  background-color: #f9fafb;
  position: sticky;
  left: 0;
  box-sizing: border-box;
  /* 테이블이 내용 폭(inline-block)이라, 리사이즈로 컬럼 합이 holder 를 넘으면 여기서 부모와
     독립적으로 가로 스크롤. 좁을 땐 스크롤바 없이 우측은 holder 배경. */
  overflow-x: auto;
}
/* 서브테이블 자체를 테두리 박스로(예제처럼 독립). style.css `.tabulator_nested_holder .tabulator{border:0}` 오버라이드.
   overflow:hidden 은 주지 않는다 — 리사이즈 가이드선(.tabulator-col-resize-guide)이 .tabulator 에 붙어
   클리핑되면 가이드 리사이즈가 깨지므로.
   display:inline-block — fitDataTable 이 하는 것과 동일하게 테이블을 컬럼 합 폭으로 축소(이탈일시에서 끝).
   단 레이아웃은 fitData 라 리사이즈 폭 리셋이 없다. 컬럼을 넓히면 테이블이 커지고 holder(overflow-x)가 스크롤. */
.order_grid_skin .tabulator_nested_holder .tabulator {
  border: 1px solid #e3e5e9 !important;
  border-radius: 8px;
  display: inline-block;
  /* 우측 여백을 테이블 margin 으로 — 스크롤 콘텐츠 폭에 포함돼 스크롤 끝까지 56px 여백 유지
     (holder padding-right 는 스크롤 끝에서 무시되므로 이쪽으로 옮김). */
  margin-right: 56px;
}
/* 셀 배경을 부모 테이블(오더리스트)과 동일한 흰색으로. style.css `.tabulator-table{background:#F6F7F8}` 오버라이드. */
.order_grid_skin .tabulator_nested_holder .tabulator .tabulator-table {
  background-color: #ffffff !important;
}
/* nested 테이블은 순서 등 첫/둘째 열도 일반 셀(부모 그리드의 체크박스/화살표 회색 규칙과 다름) — 모든 body 셀 흰색.
   style.css `.tabulator-cell:first-child, :nth-child(2){background:#F6F7F8}` 오버라이드. */
.order_grid_skin .tabulator_nested_holder .tabulator .tabulator-cell {
  background-color: #ffffff !important;
  /* 셀 자체 padding 은 0 — 내부 .tabulator_td_cell 래퍼가 부모와 동일하게 7px 8px + flex 수직중앙을 담당.
     (style.css `.tabulator_nested_holder .tabulator .tabulator-cell{padding:10px 8px}` 오버라이드) */
  padding: 0 !important;
}
/* row 사이 경계선. style.css `.tabulator_nested_holder .tabulator .tabulator-row{border-bottom:0}` 오버라이드. */
.order_grid_skin .tabulator_nested_holder .tabulator .tabulator-row {
  border-bottom: 1px solid #e3e5e9 !important;
}
/* 컬럼 구분 세로 보더 — 헤더(.tabulator-col)/바디(.tabulator-cell) 각 열 우측 경계(마지막 열 제외).
   부모 그리드처럼 컬럼이 구분돼 보이도록. 편집 진입(더블클릭)·range 선택과 무관한 순수 시각 규칙. */
.order_grid_skin
  .tabulator_nested_holder
  .tabulator
  .tabulator-col:not(:last-child),
.order_grid_skin
  .tabulator_nested_holder
  .tabulator
  .tabulator-row
  .tabulator-cell:not(:last-child) {
  border-right: 1px solid #e3e5e9 !important;
}
/* 자식(경유지) 테이블도 부모처럼 헤더 컬럼 경계의 리사이즈 핸들 hover 시 좌우 리사이즈 커서.
   (전역 `.tabulator .tabulator-header ...:hover{cursor:ew-resize}` 이 중첩에서 안 먹는 경우 대비해
    더 높은 우선순위로 명시) */
.order_grid_skin
  .tabulator_nested_holder
  .tabulator
  .tabulator-header
  .tabulator-col-resize-handle:hover {
  cursor: ew-resize !important;
}
/* 활성 셀 포커스 박스(.tabulator-range-cell-active)는 SelectRange 가 높이를 부모 행
   offsetHeight 로 설정한다. nested 로 행이 커지면 이 박스도 nested 하단까지 늘어난다.
   활성 셀은 항상 단일 셀(=행높이 40px)이라 40px 로 고정해도 안전 → 포커스 테두리를 셀에만 남긴다.
   (범위 선택 .tabulator-range 는 다중 행 선택을 위해 그대로 둔다) */
.order_grid_skin .tabulator-range-overlay .tabulator-range-cell-active {
  height: 40px !important;
}

/* 부모 + 자식(경유지) 테이블을 "하나의 엑셀"처럼 — 그룹 내 셀 포커스 오버레이는 '활성' 테이블
   한 곳만 표시한다(자식이 여러 개 펼쳐져도 한 곳만). 각 테이블은 자기 오버레이
   (.tabulator > .tabulator-tableholder > .tabulator-range-overlay)를 기본 숨김,
   래퍼 JS 가 셀 클릭 시 그 테이블에만 range-active 를 부여한다.
   !important 로 Tabulator 인라인 visibility 를 결정적으로 덮는다(overlay 는 SelectRange 가
   visibility 로 토글하므로 display 대신 visibility 로 맞춰 레이아웃 리플로우도 없다). */
.order_grid_skin.tabulator
  > .tabulator-tableholder
  > .tabulator-range-overlay,
.order_grid_skin
  .tabulator
  > .tabulator-tableholder
  > .tabulator-range-overlay {
  visibility: hidden !important;
}
.order_grid_skin.tabulator.range-active
  > .tabulator-tableholder
  > .tabulator-range-overlay,
.order_grid_skin
  .tabulator.range-active
  > .tabulator-tableholder
  > .tabulator-range-overlay {
  visibility: visible !important;
}

/* frozen 열(체크박스/화살표/결과) 위로 SelectRange 오버레이의 파란 선이 비쳐 보이는 문제 차단.
   [원인] range 박스는 left=cell.offsetLeft(콘텐츠 좌표)로 잡혀 오버레이가 가로 스크롤과 함께
   움직이고(뷰포트 핀 고정 아님), 오버레이(z-index:10)는 frozen 셀(행 내부 z-index:11)보다
   항상 상위 레이어다. 데이터/frozen 셀이 같은 컨테이너(.tabulator-table)를 공유해
   → clip 도(스크롤과 함께 밀려남) z-index 도(둘을 분리 불가) frozen 위 파란 선을 막지 못한다.
   [해결] 선택 상태는 이미 .tabulator-range-selected 행 배경(#CCDFFF, style.css)으로 드러나므로,
   오버레이의 파란 테두리(.tabulator-range border)와 드래그 필 핸들(::after)만 무력화한다.
   활성 셀 포커스(.tabulator-range-cell-active)는 유지. 우리 두 그리드에만 한정. */
#order-list-grid .tabulator-range-overlay .tabulator-range,
#ai-order-list-grid .tabulator-range-overlay .tabulator-range {
  border-color: transparent !important;
}
#order-list-grid
  .tabulator-range-overlay
  .tabulator-range.tabulator-range-active::after,
#ai-order-list-grid
  .tabulator-range-overlay
  .tabulator-range.tabulator-range-active::after {
  display: none !important;
}

/* 빈 목록 문구("조회된 오더가 없습니다.")를 컬럼 횡스크롤과 무관하게 항상 뷰포트 중앙에 고정.
   Tabulator 는 placeholder 를 테이블 전체폭으로 두고 contents.marginLeft=scrollLeft 로 뷰포트에
   맞추지만, 횡스크롤 시 재계산하지 않아 문구가 밀린다. → contents 를 sticky(left:0) 로 뷰포트에
   고정하고 Tabulator 의 marginLeft 오프셋을 제거한다(수직 중앙은 flex align-items 유지).
   contents width 는 Tabulator 가 뷰포트폭으로 설정 → text-align:center 가 뷰포트 중앙에 위치. */
.order_grid_skin .tabulator-tableholder .tabulator-placeholder {
  /* !important 필수 — 기본 tabulator.min.css 는 Tabulator.tsx 의 JS import 로 번들에 들어가고
     이 파일은 next/head 의 <link> 라, 셀렉터 특정도가 같으면(클래스 4개) 로드 순서에 따라
     기본값(justify-content:center)이 이겨 정렬 기준이 뒤집힌다. */
  justify-content: flex-start !important;
}
.order_grid_skin
  .tabulator-tableholder
  .tabulator-placeholder
  .tabulator-placeholder-contents {
  position: sticky !important;
  left: 0 !important;
  margin-left: 0 !important;
}

/* 검색 키워드타입 셀렉트(화주주문번호 등)가 combi 검색 flex(nowrap) 안에서 축소돼 잘리지
   않도록 콘텐츠 폭을 유지한다(QABTS-8317). 다른 모달의 .opt_select{flex:none} 패턴과 동일. */
.order_filter_wrap .opt_wrap__combi_srch > .opt_size {
  flex: none;
}

/* 기사 스케줄 좁게보기(is_schedule_min): 헤더 우측 영역(.section_header_right — 노출 날짜/범례)을
   숨긴다. markup(style.css)은 우측 영역에 padding 20px×2 + border 1px 가 있어 폭이 0 이 되어도
   41px 가 남아 좌측 영역(.section_header_left) 옆에 세로선과 여백으로 드러난다. 좁게보기에서는
   타임라인이 보이지 않아 날짜/범례 표기가 의미 없으므로 좌측 영역만 노출한다
   (DriverScheduleSection 이 초기 너비를 좌측 영역 폭에 맞추는 것과 함께 적용). */
.page_tms_ai .section_driver_schedule.is_schedule_min .section_header_right {
  display: none;
}