/* RealGrid2 테마 — 색상은 토큰(var)만 참조, 엔진 렌더(폰트/세로선/헤더배경)는 _rg.js setStyles()와 짝 */

/* 유틸 클래스 */
.unidocu-rg-number,
.unidocu-rg-align-right { text-align: right; }
.unidocu-rg-align-left  { text-align: left; }

.unidocu-rg-imageText   { cursor: pointer; color: var(--color-primary) !important; }
.unidocu-rg-blueNumber  { color: var(--color-primary); text-align: right; }
.unidocu-rg-redNumber   { color: var(--color-danger); text-align: right; }
.unidocu-rg-fgcolor-red { color: var(--color-danger); }
.unidocu-rg-mono        { font-family: var(--font-mono); }

.unidocu-rg-origin,
.unidocu-rg-bgcolor-white   { background-color: var(--bg-surface); }
.unidocu-rg-bgcolor-inherit { background-color: inherit; }
.unidocu-rg-bgcolor-skyblue { background-color: var(--color-info-bg); }
.unidocu-rg-bgcolor-yellow  { background-color: var(--color-warning-bg); }
.unidocu-rg-bgcolor-lightsalmon { background-color: var(--color-danger-bg); }
.unidocu-rg-bgcolor-greenyellow { background-color: var(--color-success-bg); }

.unidocu-rg-required-cell { background-color: var(--color-input-bg-require); }
.rg-data-readonly-cell    { background-color: #f1f5f9; }

.multiline-pre-line { white-space: pre-line !important; text-align: right !important; }

.rg-filter-checkbox {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

/* 토큰 치환 */
.unidocu-rg-selectedRow   { background: var(--color-primary-subtle) !important; }
.unidocu-rg-unSelectedRow { background: var(--bg-surface) !important; }

.rg-head   { background: var(--bg-subtle) !important; }
.rg-root   { color: var(--color-text-primary); background-color: var(--bg-surface); }
/* 행/셀 hover 배경 없음 (요청) */

/* 세로 구분선 — 가로선(--border)보다 항상 옅게(gray-100) 컬럼 구획만. 격자 노이즈 방지 */
.rg-body       .rg-table tr td,
.rg-fixed-body .rg-table tr td,
.rg-head       .rg-table tr td,
.rg-header     .rg-table tr td {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--color-gray-200) !important;
}

/* RealGrid 클래스 기반 테마 */
.rg-root, .rg-grid, .rg-header, .rg-body, .rg-head, .rg-foot, .rg-rowbarcontainer {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
}
.rg-header-cell, .rg-head-cell {
    background-color: var(--bg-subtle) !important;
    /* gray-600은 헤더 배경 위에서 흐릿해 gray-700(--text-strong)로 상향, 데이터(gray-900)보단 낮춰 위계 유지 */
    color: var(--text-strong, #334155) !important;
    border-right-color: var(--color-gray-200) !important;
    border-bottom-color: var(--border) !important;
    /* SUIT-Bold 명시해야 font-weight 반영. 실제 헤더 렌더는 _rg.js buildUniGridStyles().header — 이 CSS는 보험 */
    font-family: 'SUIT-Bold', sans-serif;
    font-weight: 600;
    text-align: center;
}
.rg-header-group-cell {
    background-color: var(--bg-subtle) !important;
    color: var(--text-strong, #334155) !important;
    text-align: center;
}
.rg-data-cell {
    background-color: var(--bg-surface) !important;
    color: var(--color-text-primary) !important;
    border-right-color: var(--color-gray-200) !important;
    border-bottom-color: var(--border) !important;
    /* 실제 본문 글씨는 _rg.js buildUniGridStyles().body.font('SUIT-SemiBold,12'). 이 CSS는 DOM 셀 보험 */
    font-family: 'SUIT-SemiBold', sans-serif;
    font-weight: 600;
}
.rg-alternate-row,
.rg-data-row.rg-alternate-row .rg-data-cell { background-color: var(--bg-subtle) !important; }  /* 줄무늬 */
/* readonly 배경이 세로선색(gray-100)과 겹쳐 안 보여, readonly만 세로선을 gray-300으로 상향 */
.rg-data-readonly-cell { background-color: #f1f5f9 !important; color: var(--color-text-secondary) !important; border-right-color: var(--color-gray-300) !important; }
.rg-data-cell.unidocu-rg-required-cell { background-color: var(--color-input-bg-require) !important; }
/* [실험] 필수 헤더 * 표시 — 헤더가 <span> 통째라 CSS로만 덧붙임(bindExtendAPI.js markColumnRequired). 안 먹으면 텍스트 방식으로 되돌릴 것 */
.rg-header-cell.unidocu-rg-required-header .rg-header-renderer::after {
    content: ' *';
    color: var(--color-danger);
    /* 폼 라벨 필수표시와 동일하게 위치·굵기 보정 */
    position: relative;
    top: -0.25em;
    font-weight: 700;
}
/* 필수 셀 검증 실패 — 빨간 배경, 값 입력 시 위 필수(크림) 상태로 자동 복귀 */
.rg-data-cell.unidocu-rg-invalid-cell { background-color: var(--color-danger-bg) !important; }

.rg-header-cell.unidocu-rg-favorite-header .rg-header-renderer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.rg-header-cell.unidocu-rg-favorite-header .rg-header-renderer::before {
    content: '';
    flex: 0 0 15px;
    height: 13px;
    background-image: url('../images/i-favorite-on.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* setColumnBgColor로 지정한 색은 readonly 회색보다 항상 우선(makeReadOnlyGridColorWhite 등) */
.rg-data-cell.unidocu-rg-bgcolor-inherit { background-color: inherit !important; color: var(--color-text-primary) !important; }
.rg-data-cell.unidocu-rg-bgcolor-white   { background-color: var(--bg-surface) !important; color: var(--color-text-primary) !important; }
.rg-data-cell.unidocu-rg-bgcolor-skyblue { background-color: var(--color-info-bg) !important; }
.rg-data-cell.unidocu-rg-bgcolor-yellow  { background-color: var(--color-warning-bg) !important; }
.rg-data-cell.unidocu-rg-bgcolor-lightsalmon { background-color: var(--color-danger-bg) !important; }
.rg-data-cell.unidocu-rg-bgcolor-greenyellow { background-color: var(--color-success-bg) !important; }

/* imageText/강조색 셀: 항상 마지막 선언으로 최종 우선. font은 td가 아니라 안쪽 <span>에 직접 줘야 함
   — 전역 리셋 * {font-weight:550}이 span에 직접 매치돼 조상 값이 상속되지 않음 */
.rg-data-cell.unidocu-rg-imageText {
    color: var(--color-primary) !important;
}
.rg-data-cell.unidocu-rg-imageText .rg-renderer,
.rg-data-cell.unidocu-rg-imageText .rg-renderer * {
    font-family: 'SUIT', sans-serif !important;
    font-weight: 700 !important;
}
.rg-data-cell.unidocu-rg-blueNumber { color: var(--color-primary) !important; }
.rg-data-cell.unidocu-rg-redNumber,
.rg-data-cell.unidocu-rg-fgcolor-red { color: var(--color-danger) !important; }

/* 행번호/체크바 헤더·푸터 — 헤더 톤 유지, 세로선은 다른 컬럼과 동일(gray-100) */
.rg-rowindicator-head, .rg-checkbar-head,
.rg-rowindicator-foot, .rg-checkbar-foot, .rg-foot-cell {
    background-color: var(--bg-subtle) !important; color: var(--color-text-secondary) !important;
    border: none !important; border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--color-gray-200) !important;
}
/* 행번호/체크박스 body 셀 — 흰 배경, 세로선은 데이터셀과 동일 */
.rg-rowindicator-cell, .rg-checkbar-cell {
    background-color: var(--bg-surface) !important; color: var(--color-text-secondary) !important;
    border: none !important; border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--color-gray-200) !important;
}
/* 정렬 기준 선택 헤더 — 구분이 약해 더 진하게. font은 안쪽 <span>에 직접(전역 리셋 이유, 위와 동일) */
.rg-header-cell.rg-header-select {
    background-color: var(--color-primary-muted) !important;
    color: var(--color-primary) !important;
}
.rg-header-cell.rg-header-select .rg-header-renderer,
.rg-header-cell.rg-header-select .rg-header-renderer * {
    font-family: 'SUIT', sans-serif !important;
    font-weight: 800 !important;
}
/* 컬럼 헤더 hover 하이라이트 복구 (엔진 hover가 !important에 덮여 사라진 것) */
.rg-header-cell:hover, .rg-head-cell:hover { background-color: var(--bg-hover) !important; }

/* 포커스/선택 — 둥근 모서리 + 반투명 */
.rg-focus {
    border: 1px solid var(--color-brand-500) !important;
    border-radius: var(--radius-sm) !important;
    /* 셀 overflow로 바깥 그림자가 잘려 안쪽 링으로 포커스 글로우 표현 */
    box-shadow: inset 0 0 0 2px rgba(var(--color-primary-rgb), 0.18) !important;
}
.rg-rowindicator-focus { background-color: var(--color-primary-subtle) !important; }
/* 클릭 포커스 헤더: 텍스트는 안쪽 <span>이 가짐. 전역 리셋 * {font-weight:550}이 span에 직접 매치돼 td에 줘도 안 내려감 → span 직접 타겟 */
.rg-header-focus {
    background-color: var(--color-primary-subtle) !important;
}
.rg-header-focus .rg-header-renderer,
.rg-header-focus .rg-header-renderer * {
    font-family: 'SUIT', sans-serif !important;
    font-weight: 800 !important;
}
.rg-selection, .rg-selection-cell {
    background-color: rgba(var(--color-primary-rgb), .12) !important;
    border: 1px solid var(--color-primary-muted) !important;
    border-radius: var(--radius-sm) !important;
}

/* 고유 디테일 */
.rg-body .rg-renderer, .rg-fixed-body .rg-renderer,
.rg-header .rg-renderer, .rg-header .rg-header-renderer { padding: 0 14px !important; }  /* 셀 좌우 여백 14px */
.rg-body .rg-renderer, .rg-fixed-body .rg-renderer { font-variant-numeric: tabular-nums; } /* 숫자 폭 고정 */
/* 요약(합계)행 bold 강조 — 전체 그리드 공통 적용 */
#unipost-unidocu .unidocu-grid .rg-header-summary, #unipost-unidocu .unidocu-grid .rg-header-summary *, #unipost-unidocu .unidocu-grid .rg-sum, #unipost-unidocu .unidocu-grid .rg-sum * { font-weight: 800 !important; }
/* small-font-grid: 캔버스 셀은 _rg.js가 -1px, 그러나 DOM 오버레이(.rg-renderer)는 기본 13px 상속 → 여기서 11px로.
   헤더 텍스트는 <span>까지 명시 필요(전역 리셋 * {font-size:13px}이 span에 직접 매치)
   요약(합계)행은 .rg-renderer 안 감싸 별도 처리(.rg-header-summary / .rg-sum 하위 모두) — 안 그러면 본문 11px vs 요약 13px로 튐 */
#unipost-unidocu .unidocu-grid.small-font-grid .rg-renderer,
#unipost-unidocu .unidocu-grid.small-font-grid .rg-renderer *,
#unipost-unidocu .unidocu-grid.small-font-grid .rg-header-renderer,
#unipost-unidocu .unidocu-grid.small-font-grid .rg-header-renderer *,
#unipost-unidocu .unidocu-grid.small-font-grid .rg-header-summary,
#unipost-unidocu .unidocu-grid.small-font-grid .rg-header-summary *,
#unipost-unidocu .unidocu-grid.small-font-grid .rg-sum,
#unipost-unidocu .unidocu-grid.small-font-grid .rg-sum * { font-size: 11px; }

/* 편집 가능 셀 hover → 셀 전체에 옅은 inset 테두리 (읽기전용 제외) */
.rg-body .rg-data-cell:not(.rg-data-readonly-cell):hover {
    box-shadow: inset 0 0 0 1px var(--border-strong);
}
.rg-fixed-row td { border-bottom: 1px solid var(--border) !important; }
.rg-empty-grid { background: var(--bg-subtle) !important; color: var(--color-text-tertiary) !important; }
.rg-grid       { border: 1px solid var(--border) !important; }   /* 그리드 외곽선 */
.rg-statebar-cell,
.rg-statebar-cell .rg-statebar-updated { background: var(--bg-subtle) !important; border-color: var(--border) !important; }

/* 체크박스 (CSS 렌더) — 체크 채움색은 강조색 --color-primary. 흰 체크마크는 고정 흰색 SVG라 어떤 강조색 위에서도 보임 */
.rg-checkbar-unchecked, .rg-check-renderer-unchecked,
.rg-checkbar-head-unchecked {
    width: 12px; height: 12px; border: 1px solid var(--border-strong);
    background-color: var(--bg-surface); background-image: none;
    vertical-align: middle; border-radius: var(--radius-xs);
}
.rg-checkbar-checked, .rg-check-renderer-checked,
.rg-checkbar-head-checked {
    width: 12px; height: 12px; border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.2l2.2 2.2 4.9-5.1'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 12px;
    vertical-align: middle; border-radius: var(--radius-xs);
}

/* 드롭다운(콤보)/캘린더 — rg-dropdownlist/-item/-select */
.rg-dropdownlist {
    margin-top: 40px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 4px !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    color: var(--color-text-primary) !important;
}
.rg-dropdownlist .rg-dropdown-item {
    padding: 7px 10px !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    transition: background-color .13s ease;
}
.rg-dropdownlist .rg-dropdown-item:hover { background: var(--bg-hover) !important; }
.rg-dropdownlist .rg-dropdown-select {
    background: var(--color-primary-subtle) !important;
    color: var(--color-primary) !important;
    /* 전역 리셋이 직접 매치 → 부모의 font-family 상속 안 됨, 직접 재지정 */
    font-family: 'SUIT', sans-serif;
    font-weight: 600;
}
.rg-calendar     { z-index: 3; }

/* 다크: --color-text-* 토큰 직접 참조(값이 다크서 재정의돼 자동 반영). 예외만 아래 */
/* 헤더 예외: --text-strong의 다크값(sand12)은 너무 밝아 튀므로 다크는 text-secondary 유지 */
:root[data-mode="dark"] .rg-header-cell,
:root[data-mode="dark"] .rg-head-cell,
:root[data-mode="dark"] .rg-header-group-cell {
    color: var(--color-text-secondary) !important;
}
:root[data-mode="dark"] .rg-data-readonly-cell {
    background-color: var(--color-surface-secondary) !important;
    /* 데이터 글자는 편집/readonly 무관 동일하게 밝게 — 배경으로만 구분 */
    color: var(--color-text-primary) !important;
}

:root[data-mode="dark"] .rg-data-cell.unidocu-rg-editable-cell:not(.rg-data-readonly-cell):not(.unidocu-rg-required-cell):not(.unidocu-rg-invalid-cell):not(.unidocu-rg-bgcolor-skyblue):not(.unidocu-rg-bgcolor-yellow):not(.unidocu-rg-bgcolor-lightsalmon):not(.unidocu-rg-bgcolor-greenyellow) {
    background-color: var(--color-input-bg) !important;
}

/* No./체크박스 열은 옆 컬럼과 동일 톤(헤더=bg-subtle, 데이터=bg-surface). 상속 미반영이라 !important 확정 */
:root[data-mode="dark"] .rg-rowindicator-head,
:root[data-mode="dark"] .rg-checkbar-head,
:root[data-mode="dark"] .rg-rowindicator-foot,
:root[data-mode="dark"] .rg-checkbar-foot {
    background-color: var(--bg-subtle) !important;
}
:root[data-mode="dark"] .rg-rowindicator-cell,
:root[data-mode="dark"] .rg-checkbar-cell,
:root[data-mode="dark"] .unidocu-rg-origin {
    background-color: var(--bg-surface) !important;
}
:root[data-mode="dark"] .rg-rowindicator-focus {
    background-color: var(--color-primary-subtle) !important;
}
:root[data-mode="dark"] .rg-checkbar-unchecked,
:root[data-mode="dark"] .rg-check-renderer-unchecked,
:root[data-mode="dark"] .rg-checkbar-head-unchecked {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-strong) !important;
}
:root[data-mode="dark"] .rg-checkbar-checked,
:root[data-mode="dark"] .rg-check-renderer-checked,
:root[data-mode="dark"] .rg-checkbar-head-checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
/* 네이티브 브라우저 체크박스(appearance:checkbox 사용처)까지 방어적으로 처리 */
:root[data-mode="dark"] input[type="checkbox"] { accent-color: var(--color-primary); }

/* 헤더 요약(합계)행 — 라이트는 엔진 기본 크림색이 자연스럽지만, 다크는 요약행 스타일이 없어 크림이 그대로 떠 Σ·합계 글자가 안 보임 → 헤더 톤 배경 + 밝은 글자로 통일 */
/* 베이지색은 셀이 아니라 셀을 감싸는 .rg-sum 패널 배경에 칠해짐 → 패널도 반드시 함께 덮어야 함 */
/* 요약행은 두 종류 — 왼쪽 고정영역(.rg-sum)과 넓은 데이터컬럼(.rg-header-summary). 베이지는 각 패널 배경에 칠해지므로 패널을 함께 덮어야 전체 폭이 통일됨 */
/* 배경 #302B1E: 라이트 크림(#F3EBDB)의 다크 대응 톤 — 데이터행(#222221)과 색조로 구분되되 눈부심 낮음. 셀 테두리는 라이트 밝은색이 남아 다크서 하얗게 뜨므로 4면 모두 다크 테두리로 덮음 */
:root[data-mode="dark"] .rg-sum,
:root[data-mode="dark"] .rg-header-summary {
    background-color: #302B1E !important;
    border-color: var(--border) !important;
}
:root[data-mode="dark"] .rg-sum-cell,
:root[data-mode="dark"] .rg-rowindicator-sum,
:root[data-mode="dark"] .rg-checkbar-sum,
:root[data-mode="dark"] .rg-header-summary-cell {
    background-color: #302B1E !important;
    color: var(--color-text-primary) !important;
    border-color: var(--border) !important;
}

:root[data-mode="dark"] .rg-empty-grid { color: var(--color-text-tertiary) !important; }
:root[data-mode="dark"] .rg-dropdownlist { color: var(--color-text-primary) !important; }

/* imageText/blueNumber: 라이트 brand-600은 다크 표면서 묻혀 brand-400으로 밝게 */
:root[data-mode="dark"] .rg-data-cell.unidocu-rg-imageText,
:root[data-mode="dark"] .rg-data-cell.unidocu-rg-blueNumber { color: var(--color-brand-400) !important; }

/* 세로선: gray-100이 다크 오버라이드 없어 거의 흰색으로 떠 격자 시끄러움 → 가로선과 같은 sand6(--border)로. 라이트 규칙은 유지 */
:root[data-mode="dark"] .rg-body   .rg-table tr td,
:root[data-mode="dark"] .rg-fixed-body .rg-table tr td,
:root[data-mode="dark"] .rg-head   .rg-table tr td,
:root[data-mode="dark"] .rg-header .rg-table tr td,
:root[data-mode="dark"] .rg-header-cell,
:root[data-mode="dark"] .rg-head-cell,
:root[data-mode="dark"] .rg-data-cell,
:root[data-mode="dark"] .rg-rowindicator-head,
:root[data-mode="dark"] .rg-checkbar-head,
:root[data-mode="dark"] .rg-rowindicator-foot,
:root[data-mode="dark"] .rg-checkbar-foot,
:root[data-mode="dark"] .rg-rowindicator-cell,
:root[data-mode="dark"] .rg-checkbar-cell {
    border-right-color: var(--border) !important;
}

:root[data-mode="dark"] .rg-table tr td.rg-data-cell.unidocu-rg-required-cell,
:root[data-mode="dark"] .rg-table tr td.rg-data-cell.unidocu-rg-invalid-cell,
:root[data-mode="dark"] .rg-data-cell.unidocu-rg-required-cell,
:root[data-mode="dark"] .rg-data-cell.unidocu-rg-invalid-cell {
    border-right-color: var(--border-strong) !important;
    border-bottom-color: var(--border-strong) !important;
}

/* 툴팁·메시지 팝업 — 엔진 기본이 라이트 고정색(배경 rgba(234,236,239,.9) / 보더 #6e7786)이라
   다크에서 밝은 테두리로 떠 이질감. 표면 토큰으로 교체해 두 모드 모두 대응.
   padding(3px 6px)은 엔진 기본을 유지 — 한 줄 툴팁이 커지지 않도록. */
.rg-tooltip,
.rg-message {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-sm) !important;
}

/* AI 적합성(FIT_FLAG) 툴팁 — .rg-tooltip 안에 들어가는 카드.
   마크업 생성처: uni-e-fi/view/VectorSearchCommon.js buildFitTooltip()
   표면·보더·그림자는 위 .rg-tooltip이 담당하므로 여기서는 레이아웃과 상태색만 정의한다. */
.unidocu-fit-tooltip {
    width: 320px;
    white-space: normal;
    padding: 5px 4px;
}
.unidocu-fit-tooltip .fit-head {
    margin-bottom: 6px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
}
/* 브랜드 색을 따르되, 라이트 brand-600은 다크 표면서 묻히므로 brand-400으로 밝게
   (위 imageText/blueNumber와 같은 처리) */
.unidocu-fit-tooltip .fit-brand { color: var(--color-primary); }
:root[data-mode="dark"] .unidocu-fit-tooltip .fit-brand { color: var(--color-brand-400); }
.unidocu-fit-tooltip .fit-badge {
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid;
    border-radius: var(--radius-full);
}
/* 판정별 상태색 — FIT_FLAG "1"=추천 / "2"=검토 / "3"=미추천 */
.unidocu-fit-tooltip .fit-badge.is-ok {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}
.unidocu-fit-tooltip .fit-badge.is-hold {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-color: var(--color-warning-border);
}
.unidocu-fit-tooltip .fit-badge.is-ng {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}
.unidocu-fit-tooltip .fit-reason {
    font-size: var(--text-sm);
    line-height: 1.55;
}