/* 그리드 컬럼 개인화 — ⚙ 버튼 + 드롭다운 패널 + 좌측 sticky 핀.
 * 결정 박제: CLAUDE.md §5 (2026-05-17)
 */

/* ── 컨테이너 + 토글 ──────────────────────────────────── */
/* 서버에서는 grid 아래 (m-grid.ejs / list-extras.ejs) 에 렌더되고
 * JS relocateToMLimit 가 .mState 우상단 .mLimit 옆으로 옮기며 .inMLimit 클래스 부착.
 * 이동 전엔 display:none — grid 아래에서 깜빡이지 않음. */
.mGridPref { position: relative; display: none; align-items: center; }
.mGridPref.inMLimit { display: inline-flex; }
/* 토글 버튼 — 옆의 limit select(26px) 와 높이 통일 */
.mGridPref .eGridPrefToggle {
  height: 26px; line-height: 1; padding: 0 8px;
  display: inline-flex; align-items: center; box-sizing: border-box;
}
/* m-state 우상단 — JS 가 만든 wrapper 안에서 [컬럼][limit] 인라인 배치 */
.mState .mStateRightGroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mState .mStateRightGroup p.mLimit { margin: 0; }
.mState .mGridPref.inMLimit { margin: 0; }
.mGridPref .eGridPrefToggle .eGridPrefToggleLabel { margin-left: 4px; }
.mGridPref .eGridPrefToggle .eGridPrefActiveName {
  margin-left: 4px;
  color: #1f4d8a;
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  display: inline-block;
}
.mGridPref.hasActivePreset .eGridPrefToggle {
  border-color: #1f4d8a;
  background: #eef2f7;
}
.mGridPref .eGridPrefToggle .icoGridPref {
  display: inline-block;
  width: 12px; height: 12px;
  vertical-align: middle;
  line-height: 1;
}
.mGridPref .eGridPrefToggle .icoGridPref::before {
  content: '▦';
  font-size: 13px;
  line-height: 1;
}
.mGridPref .eGridPrefToggle[aria-expanded="true"] {
  background: #eef2f7;
  border-color: #1f4d8a;
  color: #1f4d8a;
}

/* ── 패널 ──────────────────────────────────────────── */
.eGridPrefPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120; /* sticky thead(2)/리사이저(6) 등 그리드 요소 위로 — 드롭다운이 테이블에 안 가리도록 */
  width: 380px;
  padding: 14px;
  background: #fff;
  border: 1px solid #c8d0dc;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.16);
  font-size: 12px;
  color: #1d2c4a;
  /* 패널을 flex 컬럼으로 — JS 가 max-height 를 가용 공간에 맞추면 목록만 늘어/줄어들고
     제목·프리셋·검색·하단버튼은 항상 보임 (팝업/작은 화면에서 스크롤 불필요). */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
  overflow: hidden;
}
.eGridPrefPanel[hidden] { display: none; }
/* 목록 섹션이 남은 높이를 차지하고, 그 안의 컬럼 목록만 스크롤 */
.eGridPrefListSection { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.eGridPrefListSection .eGridPrefList { flex: 1 1 auto; max-height: none; min-height: 96px; }

.eGridPrefTitle {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1d2c4a;
  /* 헤더를 잡고 패널 이동 (m-grid-pref.js installPanelDrag) */
  cursor: move;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef1f6;
}
/* 좌측 grip 점 — 드래그 가능함을 시각적으로 표시 */
.eGridPrefTitle::before {
  content: '⠿';
  font-size: 13px;
  line-height: 1;
  color: #aab3c2;
}
.eGridPrefTitle:hover::before { color: #1f4d8a; }
.eGridPrefTitle.isDragging { cursor: grabbing; }

.eGridPrefSection { margin-bottom: 12px; }
.eGridPrefPresetsBox { padding-bottom: 10px; border-bottom: 1px dashed #e2e6ec; }
.eGridPrefPresetRow { display: flex; gap: 6px; align-items: center; margin-bottom: 0; }
.eGridPrefPresetRow .fSelect { flex: 1; height: 26px; font-size: 12px; padding: 2px 6px; }
/* 적용/수정/삭제 — select 와 같은 줄 우측 정렬 */
.eGridPrefPresetActions { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-shrink: 0; }
.eGridPrefPresetActions .btnNormal {
  height: 26px; line-height: 1; font-size: 11px; padding: 0 8px;
  display: inline-flex; align-items: center;
}
.eGridPrefPresetActions .btnNormal[hidden] { display: none; }
.eGridPrefPresetActions .eGridPrefPresetDelete[hidden] { display: none; }
.eGridPrefSectionLabel {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 11px;
  color: #4a5872;
}
.eGridPrefSection .fSelect { width: 100%; height: 26px; font-size: 12px; padding: 2px 6px; }

.eGridPrefSearchRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.eGridPrefSearchInput { flex: 1; height: 26px; font-size: 12px; padding: 2px 8px; }
.eGridPrefCount { font-size: 11px; color: #4a5872; }
.eGridPrefCount strong { color: #1f4d8a; }

/* ── 컬럼 리스트 ──────────────────────────────────────── */
.eGridPrefList {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #e2e6ec;
  border-radius: 4px;
  background: #fff;
}

.eGridPrefItem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid #f0f3f7;
  background: #fff;
  cursor: default;
}
.eGridPrefItem:last-child { border-bottom: 0; }
.eGridPrefItem:hover { background: #f7f9fc; }
.eGridPrefItem.isDragging { opacity: 0.45; }
.eGridPrefItem.isDropTarget { box-shadow: 0 -2px 0 #1f4d8a inset; }
.eGridPrefItem[hidden] { display: none; }

/* ── group 헤더 + 들여쓰기 ───────────────────────────── */
.eGridPrefGroup {
  list-style: none;
  border-bottom: 1px solid #f0f3f7;
  background: #fff;
}
.eGridPrefGroup:last-child { border-bottom: 0; }
.eGridPrefGroupHeader {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: #f4f7fb;
  border-bottom: 1px solid #e2e6ec;
}
.eGridPrefGroupLabel {
  display: flex; align-items: center; gap: 6px;
  flex: 1; margin: 0; cursor: pointer;
  font-size: 11px; font-weight: 700; color: #1d2c4a;
}
.eGridPrefGroupCheck { margin: 0; }
.eGridPrefGroupTitle { color: #1f4d8a; }
.eGridPrefGroupCount { color: #6c7a93; font-weight: 500; }
.eGridPrefSubList {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
}
.eGridPrefItem.inGroup {
  padding-left: 24px;  /* indent */
  border-bottom: 1px solid #f7f9fc;
}
.eGridPrefItem.inGroup:last-child { border-bottom: 0; }
/* drag 시 invalid drop (다른 group) 시각 피드백 — JS 가 .isDragInvalid class 부착 */
.eGridPrefList.isDragInvalid,
.eGridPrefSubList.isDragInvalid {
  cursor: not-allowed;
  background: #fdecec;
}

.eDragHandle {
  cursor: grab;
  color: #8a93a3;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -2px;
  user-select: none;
  padding: 0 4px;
  line-height: 1;
}
.eDragHandle:hover { color: #1f4d8a; }
.eGridPrefItem.isDragging .eDragHandle { cursor: grabbing; }

.eGridPrefLabel {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  margin: 0;
}
.eGridPrefVisible { margin: 0; }
.eGridPrefLabelText { color: #1d2c4a; }
.eGridPrefVisible:not(:checked) ~ .eGridPrefLabelText { color: #8a93a3; text-decoration: line-through; }

.eGridPrefPin {
  border: 1px solid #d0d8e3;
  border-radius: 4px;
  background: #fff;
  color: #8a93a3;
  cursor: pointer;
  width: 26px;
  height: 22px;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.eGridPrefPin:hover { color: #1f4d8a; border-color: #1f4d8a; }
.eGridPrefPin.isPinned {
  background: #1f4d8a;
  color: #fff;
  border-color: #1f4d8a;
}

/* ── 하단 영역 ───────────────────────────────────────── */
.eGridPrefHint {
  margin: 8px 0 6px;
  font-size: 11px;
  color: #6c7a93;
}
.eGridPrefHint strong { color: #1f4d8a; }

.eGridPrefFlash { margin: 4px 0 6px; font-size: 11px; }
.eGridPrefFlash[data-type="ok"]  { color: #1c6b3f; }
.eGridPrefFlash[data-type="err"] { color: #a93434; }

.eGridPrefActions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed #e2e6ec;
}
.eGridPrefActions .btnNormal {
  height: 26px;
  line-height: 1;
  font-size: 11px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
}
.eGridPrefActions .btnNormal.blue {
  background: #1f4d8a;
  color: #fff;
  border-color: #1f4d8a;
}
.eGridPrefActions .btnNormal.blue:hover {
  background: #163b6e;
}
.eGridPrefSpacer { flex: 1; }

/* ── sticky 컬럼 (pinnedCol) ─────────────────────────── */
/* m-grid partial 이 _pinnedLeft 계산 후 inline style 로 left 값 부착 */
.mGridTable th.pinnedCol,
.mGridTable td.pinnedCol {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
}
.mGridTable thead th.pinnedCol {
  z-index: 4;
  background: #f0f4fa;
}
/* 마지막 핀 컬럼 우측에 그라데이션 그림자 — 명시적으로 .pinnedLast 부착 */
.mGridTable th.pinnedCol.pinnedLast::after,
.mGridTable td.pinnedCol.pinnedLast::after {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  width: 6px;
  height: 100%;
  background: linear-gradient(90deg, rgba(20, 30, 50, 0.10), transparent);
  pointer-events: none;
}