/* SlickGrid Custom Styles
 * SlickGrid 자체 스타일 오버라이드/확장용
 * 예제 페이지 스타일은 여기에 넣지 않음
 */

/* ══════════════════════════════════════
	 기본 · 변수
	 ══════════════════════════════════════ */
.sc-grid {
	box-sizing: border-box;
	--sc-border-color: #dde1e6;
	--sc-font-size: 14px;
	--sc-cell-padding: 0 0.3rem;
	--sc-editable-bg: #fffde7;
	--sc-editable-bg-odd: #fffce0;
	--sc-hover-bg: #e8f4fe;
	--sc-active-bg: #d4ebfd;
	--sc-odd-bg: #f8f8f8;
	--sc-even-bg: #ffffff;
	--sc-row-line-height: 1.5;
	--sc-resize-color: #4a7ebb;
	--alpine-font-size: var(--sc-font-size);
	font-size: var(--sc-font-size);
	border: 1px solid var(--sc-border-color) !important;
	line-height: 1.5;
}

.sc-grid *, .sc-grid *::before, .sc-grid *::after {
	box-sizing: border-box;
}
.slick-range-decorator { box-sizing: content-box; }

/* ══════════════════════════════════════
	 jQuery UI 클래스 중화 (slick 내부만)
	 ──────────────────────────────────────
	 SlickGrid 5.19.0이 DOM 생성 시 아래 4개 ui-* 클래스를 하드코딩으로 붙임 (옵션으로 끌 수 없음).
	 jquery-ui.min.css와 함께 로드되면 해당 클래스의 jq ui 기본 스타일이 slick 엘리먼트에
	 적용돼 alpine-theme/slickgrid.custom.css가 설정하지 않는 속성(color, font-weight, font-family 등)
	 이 jq ui 색상/폰트로 보이는 현상 발생. 아래 규칙들로 .sc-grid 스코프 안에서만 중화.
	 ────
	 jq ui가 각 클래스에 설정하는 값 (참고):
		 .ui-widget          → font-family: Arial,Helvetica,sans-serif; font-size: 1em;
													 (+ 내부 input/select/textarea/button도 동일)
		 .ui-widget-content  → border: 1px solid #dddddd; background: #fff; color: #333;
		 .ui-state-default   → border: 1px solid #c5c5c5; background: #f6f6f6; color: #454545; font-weight: normal;
		 .ui-state-hover     → border: 1px solid #ccc; background: #ededed; color: #2b2b2b; font-weight: normal;
	 ══════════════════════════════════════ */

/* [그리드 컨테이너] slick은 컨테이너(.sc-grid)에 .ui-widget 을 붙임
	 → jq ui가 font-family: Arial 을 강제 (alpine은 #myGrid/.slick-container에만 폰트 지정, .sc-grid 에는 안 걸림)
	 → 페이지 기본 폰트로 복원. font-size는 .sc-grid 규칙(위쪽 --sc-font-size)이 이미 처리하므로 건드리지 않음 */
.sc-grid.ui-widget {
	font-family: inherit;
}
.sc-grid.ui-widget input,
.sc-grid.ui-widget select,
.sc-grid.ui-widget textarea,
.sc-grid.ui-widget button {
	font-family: inherit;
	font-size: inherit;
}

/* [데이터 행] slick-row 에 .ui-widget-content 가 붙음
	 → jq ui의 border:1px 은 alpine의 .slick-row.ui-widget-content { border:0 } 가 이김 (specificity 0,2,0 vs 0,1,0)
	 → 하지만 background:#fff / color:#333 은 alpine 이 slick-row 기본엔 안 걸어서 jq ui 값이 남음
	 → 투명 배경 + 색 상속 으로 alpine odd/hover/active 효과가 보이게 */
.sc-grid .ui-widget-content {
	background: transparent;
	color: inherit;
}

/* [헤더/헤더로우/상단패널/preheader/footer-row 의 컬럼] 에 .ui-state-default 가 붙음
	 → jq ui: background:#f6f6f6 / color:#454545 / font-weight:normal / border:1px
	 → alpine은 .slick-header(래퍼)에 배경/색/볼드를 넣지만 개별 컬럼엔 안 넣어서 jq ui 값이 덮어씀
	 → 투명/상속으로 래퍼 스타일 노출, border:0 로 불필요한 1px 라인 제거 */
.sc-grid .ui-state-default {
	background: transparent;
	border: 0;
	color: inherit;
	font-weight: inherit;
}

/* [헤더 hover 상태] slick-header-column hover 시 .ui-state-hover 추가
	 → alpine은 .slick-header-columns .slick-state-hover 로 hover 배경 지정 (다른 클래스명)
	 → jq ui의 .ui-state-hover 가 같은 요소에 붙어 경쟁 → 중화시켜 alpine 이 깔끔히 보이게 */
.sc-grid .ui-state-hover {
	background: transparent;
	border: 0;
	color: inherit;
	font-weight: inherit;
}

/* ══════════════════════════════════════
	 헤더 · 그룹 헤더
	 ══════════════════════════════════════ */
.slick-preheader-panel { box-shadow: 0 1px 0 var(--sc-border-color); overflow: hidden !important; }
.sc-grid .slick-pane-header {
	background-color: #f0f0f0;
}
.sc-grid .slick-header {
	border-bottom: 1px solid var(--sc-border-color);  /* 중화로 죽은 alpine border 복원 */
}
/* 필터 row 기본 숨김 — SlickGrid 5.18 의 setHeaderRowVisibility(false) 가 JS 로 height tween 애니메이션 (약 220ms) 을 돌려서
	 사용자에게 필터 row 가 축소되며 사라지는 모습이 보임 (flicker). display:none !important 로 애니메이션 자체를 건너뜀.
	 toolbar 필터 토글 시 sc-filter-on 클래스 추가로 노출 */
.sc-grid .slick-headerrow { display: none !important; }
.sc-grid.sc-filter-on .slick-headerrow { display: block !important; }
.sc-grid .slick-header-column {
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
	border-right: 1px solid var(--sc-border-color);
	min-height: 28px;
}

/* 멀티라인 헤더 (<br>) — create() 에서 라인 수 감지 후 rootEl 에 sc-header-lines-N 부착.
	 SlickGrid 가 header 컨테이너에 설정하는 inline height 를 덮어쓴다. frozen column 시 좌/우도 동일 높이. */
.sc-header-lines-2 .slick-header,
.sc-header-lines-2 .slick-header-left,
.sc-header-lines-2 .slick-header-right,
.sc-header-lines-2 .slick-header-column { height: 46px !important; }
.sc-header-lines-3 .slick-header,
.sc-header-lines-3 .slick-header-left,
.sc-header-lines-3 .slick-header-right,
.sc-header-lines-3 .slick-header-column { height: 64px !important; }
.slick-header-column .slick-column-name { text-align: center; width: 100%; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 필수 컬럼 표시 — col.required 이면 name 뒤에 빨간 * (_initColumns 에서 headerCssClass 자동 부여) */
.sc-grid .slick-header-column.sc-col-required .slick-column-name::after {
	content: ' *';
	color: #dc2626;
	font-weight: bold;
}

.slick-resizable-handle {
	width: 1rem;
	top: 0;
	height: 100%;
	box-shadow: none;
	border: none;
	background: transparent;
}
.slick-resizable-handle:hover,
.slick-resizable-handle:active {
	background: color-mix(in srgb, var(--sc-resize-color) 20%, transparent);
}

.slick-sort-indicator {
	position: absolute;
	right: 4px;
	margin: 0 !important;
	padding: 0 !important;
}

.sc-group-header-cell {
	text-align: center;
	border-right: 1px solid var(--sc-border-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 28px;
	color: #444;
}

/* ══════════════════════════════════════
	 필터 행
	 ══════════════════════════════════════ */
.slick-headerrow { background: #f7f9fb; }
.slick-headerrow-column { border-right: 1px solid var(--sc-border-color); padding: 1px 2px; }
.sc-filter-input {
	width: 100%;
	height: 100%;
	border: 1px solid #bbb !important;
	outline: none;
	border-bottom: 1px dashed #aab;
	border-radius: 0;
	padding: 0 4px;
	color: #555;
}
.sc-filter-input::placeholder { color: #bbb; font-style: italic; }

/* ══════════════════════════════════════
	 행 · 셀
	 ══════════════════════════════════════ */
.slick-row { line-height: var(--sc-row-line-height); }
.slick-row.odd { background: var(--sc-odd-bg); }
.slick-row.even { background: var(--sc-even-bg); }

.slick-cell {
	border-right: 1px solid var(--sc-border-color);
	padding: var(--sc-cell-padding);
	padding-top: 0.2rem;
}
.slick-cell.flashing { box-shadow: inset 0 0 0 1px #dc2626; }  /* grid.flashCell() 반짝 효과 */
.slick-cell.text-right { text-align: right; }
.slick-cell.text-center { text-align: center; }
.slick-cell.text-left { text-align: left; }

/* 병합 셀 — col.mergeBy 설정 컬럼에서 인접 행과 값이 같을 때 경계 흐리게 + 배경 중립 */
.slick-cell.sc-merge-t,
.slick-cell.sc-merge-b {
	background: #fff !important;
}
.slick-cell.sc-merge-t { border-top-color: transparent !important; }
.slick-cell.sc-merge-b { border-bottom-color: transparent !important; }

/* ══════════════════════════════════════
	 행 상태 · 편집 · hover/active
	 ══════════════════════════════════════ */
.slick-pane-left .slick-row.sc-row-i { box-shadow: inset 3px 0 0 #a5d6a7; }
.slick-pane-left .slick-row.sc-row-u { box-shadow: inset 3px 0 0 #ffcc80; }
.slick-row.sc-row-checked { filter: saturate(0.8) brightness(0.95); }  /* 체크된 행 — 채도 낮춰 "처리됨" 느낌 */

.slick-cell.cell-editable { background-color: var(--sc-editable-bg); }
.slick-row.odd .cell-editable { background-color: var(--sc-editable-bg-odd); }

.slick-row:hover { background-color: var(--sc-hover-bg) !important; }
.slick-row.active { background-color: var(--sc-active-bg) !important; }
.slick-row.active .cell-editable { background-color: var(--sc-editable-bg) !important; }

.slick-row:hover .cell-editable { background-color: #fff3b0 !important; }
.slick-cell.cell-editable.selected { background-color: #fff3b0 !important; }

/* ══════════════════════════════════════
	 체크박스 · Y/N · 트리
	 ══════════════════════════════════════ */
.sc-check-all,
.sc-check-row {
	cursor: pointer;
	width: 15px;
	height: 15px;
	margin: 0;
	vertical-align: middle;
	accent-color: var(--sc-resize-color);
}

.slick-row.sc-tree-lv0 { background: #e8ecf0; }
.slick-row.sc-tree-lv1 { background: #f0f4f8; }
.slick-row.sc-tree-lv2 { background: #f7f9fb; }
.slick-row.sc-tree-lv3 { background: #fbfcfd; }
.slick-row.sc-tree-lv4 { background: #fff; }

.sc-tree-toggle { cursor: pointer; display: inline-block; width: 14px; text-align: center; font-size: 13px; color: #666; }
.sc-tree-toggle:hover { color: #333; }
.sc-tree-leaf { display: inline-block; width: 14px; }

.sc-cell-btn {
	padding: 0 6px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.6;
}
.sc-cell-btn:hover { background: #e8ecf0; border-color: #aaa; }

/* ── 커스텀 드롭다운 (에디터 옵션 선택) ── */
.sc-dropdown {
	position: fixed;
	z-index: 9999;
	background: #fff;
	border: 1px solid #bbb;
	border-radius: 0 0 4px 4px;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	font-size: var(--sc-font-size, 14px);
}
.sc-dropdown-item {
	padding: 4px 10px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.08s;
}
.sc-dropdown-item:hover { background: #f0f4f8; }
.sc-dropdown-item.active { background: var(--sc-active-bg, #d4ebfd); }

/* ══════════════════════════════════════
	 링크 스타일 셀 (cellClass: SlickCustom.style.link)
	 ══════════════════════════════════════ */
.sc-link {
	color: #2563eb;
	cursor: pointer;
}
.sc-link:hover { background: #eff6ff; color: #1e40af; }

/* ══════════════════════════════════════
	 툴바
	 ══════════════════════════════════════ */
.sc-toolbar-btn {
	position: absolute;
	top: 2px;
	right: 6px;
	z-index: 11;
	cursor: pointer;
	font-size: 14px;
	color: #bbb;
	opacity: 0.5;
	transition: opacity 0.15s;
	line-height: 1;
}
.sc-toolbar-btn:hover { opacity: 1; color: #666; }

.sc-toolbar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	background: #f0f2f5;
	border: 1px solid #dde1e6;
	border-top: none;
	font-size: 13px;
	color: #666;
}

.sc-btn {
	padding: 1px 4px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
}
.sc-btn:hover { background: #e8ecf0; border-color: #aaa; }
.sc-btn.active { background: #4a7ebb; color: #fff; border-color: #4a7ebb; }

/* ══════════════════════════════════════
	 툴바 — 툴팁
	 ══════════════════════════════════════ */
.sc-tb-tooltip {
	position: relative;
}
.sc-tb-tooltip-body {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 4px;
	padding: 6px 10px;
	background: #fff;
	color: #333;
	border: 1px solid #ccc;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	font-size: 13px;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 11;
	line-height: 1.5;
	transition: visibility 0s 0.3s, opacity 0.15s 0.15s;
}
.sc-tb-tooltip:hover .sc-tb-tooltip-body:not(:empty) {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.15s;
}

.sc-tb-stats,
.sc-tb-distinct { border-collapse: collapse; }
.sc-tb-tooltip-body .sc-tb-distinct {
	max-height: 300px;
	display: block;
	overflow-y: auto;
}
.sc-tb-stats th,
.sc-tb-stats td,
.sc-tb-distinct th,
.sc-tb-distinct td {
	padding: 1px 0.25rem;
	border-bottom: 1px solid #e5e7eb;
	text-align: left;
}
.sc-tb-stats th,
.sc-tb-distinct th { color: #888; }
.sc-tb-stats td:last-child,
.sc-tb-distinct td:first-child,
.sc-tb-distinct td:last-child { text-align: right; }

/* ══════════════════════════════════════
	 툴바 — 통계
	 ══════════════════════════════════════ */
.sc-pivot-wrap {
	background: #fff;
	color: #333;
	border: 1px solid #dde1e6;
	border-top: none;
	padding: 6px 8px;
}
.sc-pivot-panel { min-width: 500px; }
.sc-pivot-row { display: flex; gap: 4px; margin: 4px 0; }
.sc-pivot-tags { margin: 2px 0; font-size: 13px; }
.sc-pv-tag {
	display: inline-block;
	background: #4a7ebb;
	color: #fff;
	padding: 1px 6px;
	border-radius: 3px;
	margin: 1px 2px;
}
.sc-pv-tag span { cursor: pointer; margin-left: 4px; color: #fcc; }
.sc-pv-tag span:hover { color: #f66; }
.sc-pivot-result { margin-top: 4px; }

/* ══════════════════════════════════════
	 툴바 — 찾기
	 ══════════════════════════════════════ */
.sc-search-input {
	width: 140px;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 2px 6px;
	font-size: 13px;
	outline: none;
	margin: 4px 0;
	background: #fff;
	color: #333;
}
.sc-search-input::placeholder { color: #bbb; }
.sc-search-input:focus { border-color: #4a7ebb; }
.sc-search-nav { display: flex; align-items: center; gap: 4px; }
.sc-search-nav .sc-btn { font-size: 13px; padding: 0 4px; }
.sc-search-count { font-size: 13px; color: #666; }
.sc-search-wrap { font-size: 13px; color: #666; cursor: pointer; user-select: none; }
.sc-search-wrap input { vertical-align: middle; margin: 0 2px 0 4px; }

/* ══════════════════════════════════════
	 그리드 높이 리사이즈
	 ══════════════════════════════════════ */
.sc-resize-handle {
	height: 8px;
	cursor: ns-resize;
	background: #f0f3f6;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sc-resize-handle::after {
	content: '';
	width: 40px;
	height: 3px;
	background: #b0b8c0;
	border-radius: 2px;
}
.sc-resize-handle:hover { background: #d0d6dc; }
.sc-resize-handle:hover::after { background: var(--sc-resize-color, #4a7ebb); }
.sc-resize-guide {
	position: absolute;  /* 그리드 부모 기준 — 다이얼로그/overlay 안에서도 정상 노출 */
	left: 0;
	right: 0;
	height: 2px;
	background: var(--sc-resize-color, #4a7ebb);
	z-index: 11;
	pointer-events: none;
}

/* ══════════════════════════════════════
	 알림 — 검증 툴팁 · flash
	 ══════════════════════════════════════ */
.sc-validation-tip {
	position: absolute;
	transform: translateY(-100%);
	background: #d32f2f;
	color: #fff;
	font-size: 13px;
	padding: 2px 8px;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 11;
	pointer-events: none;
	animation: sc-tip-fade 2s forwards;
}
@keyframes sc-tip-fade {
	0%, 70% { opacity: 1; }
	100% { opacity: 0; }
}

.sc-flash {
	position: absolute;
	top: 4px;
	left: 6px;
	z-index: 11;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 13px;
	padding: 2px 10px;
	border-radius: 3px;
	pointer-events: none;
	animation: sc-flash-fade 1.5s forwards;
}
@keyframes sc-flash-fade {
	0%, 60% { opacity: 1; }
	100% { opacity: 0; }
}