/* ============================================================
   OPEN_GRID — Base CSS Variables & Layout
   레이어: Infrastructure (스타일 시스템)
   설계 근거: CSS Variables로 테마 전환, 런타임 오버라이드 지원
   ============================================================ */

:root {
  /* Primary */
  --og-primary:           #1976d2;
  --og-primary-light:     #e3f2fd;
  --og-primary-dark:      #1565c0;

  /* 헤더 */
  --og-header-bg:         #f5f5f5;
  --og-header-color:      #333333;
  --og-header-hover-bg:   #ebebeb;
  --og-header-sort-color: #1976d2;

  /* 행 */
  --og-row-bg:            #ffffff;
  --og-row-alt-bg:        #fafafa;
  --og-row-hover-bg:      #e3f2fd;
  --og-row-color:         #212121;

  /* 선택 */
  --og-row-selected-bg:   #bbdefb;
  --og-row-selected-color:#0d47a1;

  /* 상태 행 */
  --og-row-added-bg:      #e8f5e9;
  --og-row-added-color:   #1b5e20;
  --og-row-edited-bg:     #fff8e1;
  --og-row-edited-color:  #bf360c; /* WCAG 1.4.3: #e65100(3.57:1)→#bf360c(5.27:1) ✅ */
  --og-row-removed-bg:    #ffebee;
  --og-row-removed-color: #b71c1c;

  /* 그룹 행 */
  --og-group-bg:          #e8eaf6;
  --og-group-color:       #283593;
  --og-group-border:      #c5cae9;

  /* 트리 */
  --og-tree-toggle-color:  #555555;
  --og-tree-line-color:    #d0d0d0;
  --og-tree-folder-color:        #f9a825;   /* amber   — 열린 폴더 */
  --og-tree-folder-closed-color: #8eacc4;   /* blue-gray — 닫힌 폴더 */
  --og-tree-file-color:    #78909c;   /* blue-grey — 파일 아이콘 */
  --og-tree-hover-bg:      rgba(25,118,210,0.06);
  --og-tree-indent-guide:  #e0e0e0;   /* legacy 호환 */

  /* 셀 병합 */
  --og-merge-bg:          #fff9c4;
  --og-merge-border:      #f9a825;

  /* 셀 / 보더 */
  --og-cell-padding:      0 8px;
  --og-border-color:      #e0e0e0;
  --og-focus-border:      #1976d2;

  /* 폰트 */
  --og-font-size:         13px;
  --og-font-family:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* 크기 */
  --og-row-height:        32px;
  --og-header-height:     34px;
  --og-scrollbar-size:    8px;

  /* 페이징 */
  --og-pagination-bg:       #ffffff;
  --og-pagination-btn-bg:   #ffffff;
  --og-pagination-btn-color:#333333;

  /* 입력 */
  --og-input-bg:          #ffffff;
  --og-input-color:       #212121;
  --og-input-border:      #1976d2;

  /* 필터 */
  --og-filter-bg:         #ffffff;
  --og-filter-color:      #212121;

  /* ── 프리미엄 디자인 시스템 ── */

  /* 그림자 */
  --og-shadow-sm:              0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --og-shadow-md:              0 4px 14px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  --og-shadow-lg:              0 8px 24px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06);

  /* 전환 */
  --og-transition-fast:        0.12s ease;
  --og-transition-base:        0.18s ease;

  /* 컨테이너 반경 */
  --og-container-radius:       8px;

  /* 헤더 타이포그래피 */
  --og-header-font-weight:     600;
  --og-header-letter-spacing:  0.025em;

  /* 행 좌측 강조선 */
  --og-row-accent-color:       var(--og-primary);
  --og-row-accent-width:       3px;

  /* 로딩 스피너 트랙 (라이트 테마용) */
  --og-spinner-track:          rgba(0,0,0,0.10);
  --og-spinner-color:          var(--og-primary);
}

/* ============================================================
   컨테이너
   ============================================================ */
.og-container {
  font-family: var(--og-font-family);
  font-size:   var(--og-font-size);
  color:       var(--og-row-color);
  display:     flex;
  flex-direction: column;
  overflow:    hidden;
  box-sizing:  border-box;
  border:      1px solid var(--og-border-color);
  border-radius: var(--og-container-radius);
  background:    var(--og-row-bg);
  box-shadow:    var(--og-shadow-sm);
}

/* ============================================================
   헤더
   ============================================================ */
.og-header {
  flex-shrink: 0;
  overflow:    hidden;
  border-bottom: 1px solid var(--og-border-color);
  scrollbar-width: none;
}
.og-header::-webkit-scrollbar { display: none; }

.og-header-table {
  table-layout:    fixed;
  border-collapse: collapse;
  width:           100%;
}

.og-header-cell {
  padding:         var(--og-cell-padding);
  height:          var(--og-header-height);
  background:      var(--og-header-bg);
  color:           var(--og-header-color);
  text-align:      center;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  border-right:    1px solid var(--og-border-color);
  border-bottom:   1px solid var(--og-border-color);
  user-select:     none;
  box-sizing:      border-box;
  position:        relative;
  font-weight:     var(--og-header-font-weight);
  letter-spacing:  var(--og-header-letter-spacing);
  transition:      background var(--og-transition-fast), color var(--og-transition-fast);
}
.og-header-cell:hover      { background: var(--og-header-hover-bg); }
.og-header-cell.og-sortable{ cursor: pointer; }

.og-header-cell .og-sort-icon {
  display:     inline-block;
  margin-left: 4px;
  font-size:   10px;
  color:       var(--og-header-sort-color);
}

/* 컬럼 리사이즈 핸들 */
.og-resize-handle {
  position:   absolute;
  right: 0; top: 0; bottom: 0;
  width:      5px;
  cursor:     col-resize;
  z-index:    1;
  transition: background var(--og-transition-fast);
}
.og-resize-handle:hover { background: var(--og-primary); opacity: 0.7; }

/* ============================================================
   바디
   ============================================================ */
.og-body-wrapper {
  flex:     1;
  overflow: auto;
  position: relative;
  /* Sprint 39: 모바일 터치 스크롤 */
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.og-body-wrapper::-webkit-scrollbar        { width: 8px; height: 8px; }
.og-body-wrapper::-webkit-scrollbar-track  { background: transparent; }
.og-body-wrapper::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.18); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.og-body-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.30); border: 2px solid transparent; background-clip: content-box; }
.og-body-wrapper::-webkit-scrollbar-corner { background: transparent; }

.og-body { position: relative; }

/* ============================================================
   행
   ============================================================ */
.og-row {
  position:    absolute;
  left:        0;
  right:       0;
  display:     flex;
  align-items: center;
  border-bottom: 1px solid var(--og-border-color);
  background:  var(--og-row-bg);
  color:       var(--og-row-color);
  box-sizing:  border-box;
  cursor:      default;
  transition:  background var(--og-transition-fast), box-shadow var(--og-transition-fast);
}
.og-row:nth-child(even) { background: var(--og-row-alt-bg); }
.og-row:hover           { background: var(--og-row-hover-bg) !important; box-shadow: inset var(--og-row-accent-width) 0 0 var(--og-row-accent-color); }

/* 선택된 행 — 배경 + 텍스트 모두 강제 적용 */
.og-row.og-selected {
  background: var(--og-row-selected-bg) !important;
  color:      var(--og-row-selected-color) !important;
}

/* 상태 행 */
.og-row.og-state-added {
  background: var(--og-row-added-bg)   !important;
  color:      var(--og-row-added-color) !important;
}
.og-row.og-state-edited {
  background: var(--og-row-edited-bg)   !important;
  color:      var(--og-row-edited-color) !important;
}
.og-row.og-state-removed {
  background:      var(--og-row-removed-bg)   !important;
  color:           var(--og-row-removed-color) !important;
  text-decoration: line-through;
  opacity:         0.75;
}

/* ============================================================
   셀
   ============================================================ */
.og-cell {
  padding:         var(--og-cell-padding);
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  border-right:    1px solid var(--og-border-color);
  overflow:        hidden;
  white-space:     nowrap;
  text-overflow:   ellipsis;
  box-sizing:      border-box;
  flex-shrink:     0;
  color:           inherit;
}
.og-cell:last-child   { border-right: none; }
.og-cell--center      { justify-content: center; }
.og-cell--right       { justify-content: flex-end; }
.og-cell--editable    { cursor: text; }

/* WCAG 2.2 2.4.13: 포커스 셀 outline 최소 3px, 대비 3:1 이상 */
.og-cell.og-cell-focused {
  outline:        3px solid var(--og-focus-border);
  outline-offset: -2px;
  position:       relative;
  z-index:        3; /* frozen 셀 z-index(2)보다 높여 가림 방지 */
}
.og-cell.og-editing { padding: 0; }

/* 인라인 에디터 입력 */
.og-cell input.og-cell-input,
.og-cell select.og-cell-select,
.og-cell textarea.og-cell-textarea {
  width:       100%;
  height:      100%;
  border:      2px solid var(--og-input-border);
  outline:     none;
  padding:     0 6px;
  font-size:   var(--og-font-size);
  font-family: var(--og-font-family);
  background:  var(--og-input-bg);
  color:       var(--og-input-color);
  box-sizing:  border-box;
  border-radius: 2px;
}

/* 숫자·체크박스 정렬 */
.og-cell.og-type-number   { justify-content: flex-end; }
.og-cell.og-type-checkbox { justify-content: center; }

/* 엑스트라 컬럼 — og-cell과 함께 사용: 공통 레이아웃(height/display/border/box-sizing/flex-shrink)은 og-cell에서 상속 */
.og-col-state {
  width:           24px;
  min-width:       24px;
  justify-content: center;
  padding:         0;
  font-size:       12px;
}
.og-col-rownum {
  width:           44px;
  min-width:       44px;
  justify-content: center;
  padding:         0;
  font-size:       11px;
  color:           #999;
}
.og-col-check {
  width:           36px;
  min-width:       36px;
  justify-content: center;
  padding:         0;
}
.og-col-check input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }

/* ============================================================
   고정 컬럼 (Frozen)
   ============================================================ */
.og-frozen {
  position: sticky !important;
  z-index:  3 !important;
  background: var(--og-header-bg) !important;
}
.og-frozen-cell {
  position: sticky !important;
  z-index:  1 !important;
  background: inherit;
}
.og-frozen-last {
  box-shadow: 3px 0 6px rgba(0,0,0,0.14) !important;
}

/* ============================================================
   그룹 행
   ============================================================ */
.og-group-row {
  position:    absolute;
  left:        0;
  right:       0;
  display:     flex;
  align-items: center;
  background:  var(--og-group-bg)    !important;
  color:       var(--og-group-color) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--og-group-border);
  padding:     0 8px;
  box-sizing:  border-box;
  cursor:      pointer;
  user-select: none;
}
.og-group-row:hover  { filter: brightness(0.96); }
.og-group-arrow { margin-right: 4px; font-size: 11px; color: var(--og-primary, #1976d2); }
.og-group-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-group-sum   { text-align: right; padding: 0 8px; font-size: 11px; color: #555; flex-shrink: 0; }

/* ============================================================
   트리 — 탐색기(Explorer) / Git Tree 스타일
   ─ 구조: [가이드│…][연결선├─/└─][토글chevron][폴더/파일아이콘][내용]
   ============================================================ */

/* 트리 첫 번째 컬럼 래퍼 */
.og-tree-cell {
  display:        flex;
  align-items:    center;
  height:         100%;
  min-width:      0;
  padding-right:  4px;
  overflow:       hidden;
}

/* ─── 가이드 라인 (│ 세로선, 공백) ────────────────────────── */
.og-tree-guide {
  display:    inline-flex;
  align-items: stretch;
  width:       16px;
  min-width:   16px;
  height:      100%;
  flex-shrink: 0;
  position:    relative;
}
/* │ 표시: 형제가 아직 남아있는 조상 레벨 */
.og-tree-guide--line::before {
  content:    '';
  position:   absolute;
  left:       7px;
  top:        0;
  bottom:     0;
  width:      1px;
  background: var(--og-tree-line-color, #d0d0d0);
}

/* ─── 연결선 (├─ 또는 └─) ─────────────────────────────────── */
.og-tree-connector {
  display:    inline-flex;
  align-items: center;
  width:       16px;
  min-width:   16px;
  height:      100%;
  flex-shrink: 0;
  position:    relative;
}

/* ├─ : 세로선 전체 + 수평선 */
.og-tree-connector--mid::before {
  content:    '';
  position:   absolute;
  left:       7px;
  top:        0;
  bottom:     0;
  width:      1px;
  background: var(--og-tree-line-color, #d0d0d0);
}
.og-tree-connector--mid::after {
  content:    '';
  position:   absolute;
  left:       7px;
  top:        50%;
  width:      9px;
  height:     1px;
  background: var(--og-tree-line-color, #d0d0d0);
}

/* └─ : 위→중간 세로선 + 수평선 */
.og-tree-connector--last::before {
  content:    '';
  position:   absolute;
  left:       7px;
  top:        0;
  bottom:     50%;
  width:      1px;
  background: var(--og-tree-line-color, #d0d0d0);
}
.og-tree-connector--last::after {
  content:    '';
  position:   absolute;
  left:       7px;
  top:        50%;
  width:      9px;
  height:     1px;
  background: var(--og-tree-line-color, #d0d0d0);
}

/* ─── 토글 버튼 래퍼 ───────────────────────────────────────── */
.og-tree-toggle-wrap {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  min-width:       18px;
  height:          18px;
  flex-shrink:     0;
}

/* chevron 버튼 */
.og-tree-toggle-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     1px;
  color:       var(--og-tree-toggle-color, #555);
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       18px;
  height:      18px;
  border-radius: 3px;
  font-size:   11px;
  line-height: 1;
  transition:  background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.og-tree-toggle-btn:hover {
  background: var(--og-tree-hover-bg, rgba(25,118,210,0.08));
  color:      var(--og-primary, #1976d2);
}
.og-tree-toggle-btn:focus-visible {
  outline: 2px solid var(--og-focus-border, #1976d2);
  outline-offset: 1px;
}

/* 리프 노드 닷 */
.og-tree-leaf-dot {
  display:      inline-block;
  width:        18px;
  height:       18px;
  flex-shrink:  0;
  position:     relative;
}
.og-tree-leaf-dot::after {
  content:      '';
  position:     absolute;
  left:         50%;
  top:          50%;
  transform:    translate(-50%, -50%);
  width:        5px;
  height:       5px;
  border-radius: 50%;
  background:   var(--og-tree-line-color, #d0d0d0);
}

/* ─── 노드 아이콘 (폴더 / 파일) ───────────────────────────── */
.og-tree-node-icon {
  font-size:    14px;
  margin:       0 5px 0 3px;
  flex-shrink:  0;
  line-height:  1;
  transition:   color 0.12s;
}
.og-tree-node-icon--branch {
  color: var(--og-tree-folder-closed-color, #8eacc4);  /* 닫힘: blue-gray */
}
.og-tree-node-icon--branch.og-tree-node-icon--open {
  color: var(--og-tree-folder-color, #f9a825);          /* 열림: amber */
  filter: brightness(1.05);
}
.og-tree-node-icon--leaf {
  color: var(--og-tree-file-color, #78909c);
}

/* 폴더 아이콘이 토글 버튼 역할 — 클릭/키보드 지원 */
.og-tree-node-icon--toggle {
  cursor:     pointer;
  font-size:  15px;
  transition: color 0.15s, filter 0.15s;
}
/* 닫힘 hover: blue-gray → primary blue */
.og-tree-node-icon--branch.og-tree-node-icon--toggle:not(.og-tree-node-icon--open):hover {
  color:  var(--og-primary, #1976d2) !important;
  filter: none !important;
}
/* 열림 hover: amber → 좀 더 밝게 */
.og-tree-node-icon--branch.og-tree-node-icon--toggle.og-tree-node-icon--open:hover {
  filter: brightness(1.2) !important;
}
.og-tree-node-icon--toggle:focus-visible {
  outline:        2px solid var(--og-focus-border, #1976d2);
  border-radius:  2px;
  outline-offset: 2px;
}

/* 행 호버 시 폴더/파일 아이콘 약간 밝게 (토글 아이콘은 자체 hover로 처리) */
.og-row:hover .og-tree-node-icon--branch:not(.og-tree-node-icon--toggle) { filter: brightness(1.15); }
.og-row:hover .og-tree-node-icon--leaf   { color: var(--og-primary, #1976d2); }

/* ─── 하위 호환: 기존 og-tree-toggle, og-tree-indent 유지 ─── */
.og-tree-toggle  { display: none; }   /* 더 이상 사용 안 함 */
.og-tree-indent  { display: inline-block; flex-shrink: 0; }

/* ============================================================
   드래그 핸들
   ============================================================ */
.og-drag-handle {
  cursor:          grab;
  color:           #bbb;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.og-drag-handle:hover  { color: var(--og-primary); }
.og-drag-handle:active { cursor: grabbing; }

/* ============================================================
   필터 레이어
   ============================================================ */
.og-filter-layer {
  position:   absolute;
  z-index:    100;
  background: var(--og-filter-bg);
  color:      var(--og-filter-color);
  border:     1px solid var(--og-border-color);
  border-radius: 4px;
  box-shadow: var(--og-shadow-md);
  padding:    10px;
  min-width:  200px;
}
.og-filter-layer input,
.og-filter-layer select {
  background: var(--og-input-bg);
  color:      var(--og-input-color);
  border:     1px solid var(--og-border-color);
  border-radius: 3px;
  padding:    3px 6px;
  font-size:  12px;
}

/* ============================================================
   빈 데이터 / 로딩
   ============================================================ */
.og-empty-message {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          120px;
  gap:             10px;
  color:           #b0bec5;
  font-size:       13px;
  letter-spacing:  0.01em;
  user-select:     none;
}
.og-empty-message::before {
  content:     '⊘';
  font-size:   26px;
  opacity:     0.45;
  line-height: 1;
  display:     block;
}
.og-loading-mask {
  position:        absolute;
  inset:           0;
  background:      rgba(255,255,255,0.76);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         50;
}
.og-loading-mask::after {
  content:       '';
  width:         28px;
  height:        28px;
  border:        3px solid var(--og-spinner-track);
  border-top-color: var(--og-spinner-color);
  border-radius: 50%;
  animation:     og-spin 0.7s linear infinite;
  flex-shrink:   0;
}
@keyframes og-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   푸터 / 페이징
   ============================================================ */
.og-footer {
  flex-shrink: 0;
  border-top:  1px solid var(--og-border-color);
  background:  var(--og-header-bg);
  color:       var(--og-header-color);
}
.og-pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  padding:         8px 12px;
  background:      var(--og-pagination-bg);
  border-top:      1px solid var(--og-border-color);
}
.og-pagination button {
  min-width:       30px;
  height:          28px;
  padding:         0 9px;
  border:          1px solid transparent;
  border-radius:   6px;
  background:      transparent;
  color:           var(--og-pagination-btn-color);
  cursor:          pointer;
  font-size:       12px;
  font-weight:     500;
  font-family:     var(--og-font-family);
  transition:      all var(--og-transition-fast);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
}
.og-pagination button:hover    { background: var(--og-primary-light); border-color: var(--og-border-color); color: var(--og-primary); }
.og-pagination button.og-active{ background: var(--og-primary); color: #fff; border-color: var(--og-primary); font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.16); }
.og-pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ============================================================
   위젯 렌더러 (ProgressRenderer / SparklineRenderer / SwitchRenderer / RatingRenderer)
   ============================================================ */

/* 프로그레스바 */
.og-progress-track {
  flex: 1;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}
.og-progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

/* 스위치 */
.og-switch {
  display: inline-block;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: #bdbdbd;
  position: relative;
  transition: background 0.2s;
  cursor: default;
  flex-shrink: 0;
}
.og-switch--on { background: var(--og-primary, #1976d2); }

/* 피벗 테이블 컨트롤 */
.og-pivot-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 12px;
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 10px;
}
.og-pivot-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.og-pivot-field-group label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.og-pivot-field-group select {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}

/* ============================================================
   접근성 (WCAG 2.2 / 장차법)
   ============================================================ */

/* aria-live 알림 영역: 시각적으로 숨기고 스크린리더에만 노출 */
.og-live-region {
  position:  absolute;
  width:     1px;
  height:    1px;
  margin:    -1px;
  padding:   0;
  overflow:  hidden;
  clip:      rect(0,0,0,0);
  white-space: nowrap;
  border:    0;
}

/* 컨테이너 포커스 (WCAG 2.4.7 Focus Visible) */
.og-container:focus-visible {
  outline:        3px solid var(--og-focus-border);
  outline-offset: 1px;
}

/* 헤더 셀 키보드 포커스 (WCAG 2.1.1 Keyboard) */
.og-header-cell:focus-visible {
  outline:        3px solid var(--og-focus-border);
  outline-offset: -2px;
  z-index:        5;
  position:       relative;
}

/* 정렬 방향 CSS content (스크린리더는 aria-sort로 읽음) */
[role="columnheader"][aria-sort="ascending"]::after  { content: ' ▲'; font-size: 9px; color: var(--og-primary); vertical-align: middle; }
[role="columnheader"][aria-sort="descending"]::after { content: ' ▼'; font-size: 9px; color: var(--og-primary); vertical-align: middle; }

/* WCAG 2.5.8: 터치 타겟 최소 24×24px */
.og-filter-icon {
  min-width:  24px;
  min-height: 24px;
  display:    inline-flex;
  align-items: center;
  justify-content: center;
}
.og-drag-handle {
  min-width:  24px;
  min-height: 24px;
}

/* 체크박스: 명시적 크기 + 포커스 표시 */
.og-col-check input[type="checkbox"]:focus-visible,
.og-header-cell input[type="checkbox"]:focus-visible {
  outline:        3px solid var(--og-focus-border);
  outline-offset: 2px;
}

/* ============================================================
   Sprint 38: 캐스케이딩 필터 셀렉트 (.og-filter-select)
   ============================================================ */
.og-filter-select {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     6px 10px;
  border:      none;
  border-bottom: 1px solid var(--og-border-color, #e0e0e0);
  background:  var(--og-header-bg, #f5f5f5);
  font-family: var(--og-font-family, -apple-system, sans-serif);
  font-size:   var(--og-font-size, 13px);
  margin:      0;
  flex-shrink: 0;
  flex-wrap:   wrap;
}
.og-filter-select-legend {
  font-size:   11px;
  font-weight: 600;
  color:       var(--og-header-color, #333);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding:     0 4px;
  float:       left;
  width:       100%;
  margin-bottom: 4px;
}
.og-filter-select-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
  flex:        1;
}
.og-filter-select-group {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.og-filter-select-label {
  font-size:   12px;
  color:       var(--og-header-color, #555);
  white-space: nowrap;
}
.og-filter-select-sel {
  padding:      3px 6px;
  border:       1px solid var(--og-border-color, #e0e0e0);
  border-radius: 3px;
  font-size:    12px;
  font-family:  inherit;
  background:   var(--og-input-bg, #fff);
  color:        var(--og-input-color, #212121);
  cursor:       pointer;
  min-width:    80px;
  max-width:    160px;
}
.og-filter-select-sel:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}
.og-filter-select-sel:focus-visible {
  outline:       2px solid var(--og-focus-border, #1976d2);
  outline-offset: 1px;
}
.og-filter-select-reset {
  padding:      3px 10px;
  border:       1px solid var(--og-border-color, #e0e0e0);
  border-radius: 3px;
  font-size:    12px;
  font-family:  inherit;
  background:   var(--og-row-bg, #fff);
  color:        var(--og-header-color, #555);
  cursor:       pointer;
  white-space:  nowrap;
  transition:   background 0.1s, border-color 0.1s;
}
.og-filter-select-reset:hover {
  background:   var(--og-primary-light, #e3f2fd);
  border-color: var(--og-primary, #1976d2);
  color:        var(--og-primary, #1976d2);
}
.og-filter-select-reset:focus-visible {
  outline:       2px solid var(--og-focus-border, #1976d2);
  outline-offset: 1px;
}
@media print { .og-filter-select { display: none !important; } }

/* ============================================================
   인쇄
   ============================================================ */
@media print {
  .og-loading-mask,
  .og-pagination,
  .og-filter-icon,
  .og-resize-handle,
  .og-drag-handle { display: none !important; }
}

/* ============================================================
   F3: 컨텍스트 메뉴 (우클릭 팝업)
   설계: .og-container 자식으로 추가 → CSS 변수 자동 상속
         --og-cm-* 변수로 테마별 미세 조정 지원
   ============================================================ */

/* 컨텍스트 메뉴 전용 변수 — 기본값은 그리드 변수 참조 */
.og-container {
  --og-cm-bg:          var(--og-row-bg);
  --og-cm-color:       var(--og-row-color);
  --og-cm-border:      var(--og-border-color);
  --og-cm-hover-bg:    var(--og-row-hover-bg);
  --og-cm-hover-color: var(--og-primary);
  --og-cm-icon-color:  var(--og-primary);
  --og-cm-divider:     var(--og-border-color);
  --og-cm-shadow:      0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  --og-cm-radius:      6px;
  --og-cm-min-width:   168px;
}

/* 다크 테마: 그림자 강화 */
[data-og-theme="dark"] {
  --og-cm-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 1px 6px rgba(0, 0, 0, 0.35);
}

.og-context-menu {
  min-width:        var(--og-cm-min-width);
  background:       var(--og-cm-bg);
  color:            var(--og-cm-color);
  border:           1px solid var(--og-cm-border);
  border-radius:    var(--og-cm-radius);
  box-shadow:       var(--og-cm-shadow);
  padding:          4px 0;
  font-family:      var(--og-font-family);
  font-size:        var(--og-font-size);
  user-select:      none;
  outline:          none;
  animation:        og-cm-appear 0.1s ease-out;
}

@keyframes og-cm-appear {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.og-cm-item {
  display:        flex;
  align-items:    center;
  gap:            8px;
  width:          100%;
  padding:        7px 16px;
  background:     transparent;
  border:         none;
  color:          var(--og-cm-color);
  font-family:    inherit;
  font-size:      inherit;
  text-align:     left;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background 0.1s, color 0.1s;
  box-sizing:     border-box;
}

.og-cm-item:hover,
.og-cm-item:focus {
  background:  var(--og-cm-hover-bg);
  color:       var(--og-cm-hover-color);
  outline:     none;
}

.og-cm-item:focus-visible {
  outline:        2px solid var(--og-focus-border);
  outline-offset: -2px;
}

.og-cm-item.og-cm-disabled {
  opacity:        0.4;
  cursor:         not-allowed;
  pointer-events: none;
}

.og-cm-icon {
  width:      18px;
  text-align: center;
  font-style: normal;
  color:      var(--og-cm-icon-color);
  flex-shrink: 0;
}

.og-cm-label {
  flex: 1;
}

.og-cm-divider {
  height:     1px;
  background: var(--og-cm-divider);
  margin:     4px 0;
}

/* ============================================================
   F3: 찾기 바 (.og-find-bar)
   그리드 헤더 위에 슬라이드 인 방식으로 표시
   ============================================================ */
.og-find-bar {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        5px 10px;
  background:     var(--og-header-bg);
  border-bottom:  1px solid var(--og-border-color);
  font-family:    var(--og-font-family);
  font-size:      var(--og-font-size);
  animation:      og-find-slide 0.15s ease-out;
}

.og-find-bar[hidden] { display: none; }

@keyframes og-find-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.og-find-label {
  color:       var(--og-header-color);
  font-weight: 600;
  white-space: nowrap;
}

.og-find-input {
  flex:           1;
  max-width:      260px;
  padding:        4px 8px;
  background:     var(--og-input-bg);
  color:          var(--og-input-color);
  border:         1px solid var(--og-border-color);
  border-radius:  4px;
  font-family:    inherit;
  font-size:      inherit;
  outline:        none;
  transition:     border-color 0.15s;
}

.og-find-input:focus {
  border-color: var(--og-focus-border);
  box-shadow:   0 0 0 2px color-mix(in srgb, var(--og-focus-border) 20%, transparent);
}

.og-find-count {
  color:       var(--og-header-color);
  font-size:   12px;
  white-space: nowrap;
  min-width:   40px;
}

.og-find-close {
  display:        flex;
  align-items:    center;
  justify-content:center;
  width:          24px;
  height:         24px;
  background:     transparent;
  border:         none;
  border-radius:  4px;
  color:          var(--og-header-color);
  font-size:      16px;
  cursor:         pointer;
  transition:     background 0.1s;
  padding:        0;
  line-height:    1;
}

.og-find-close:hover { background: var(--og-row-hover-bg); }

/* 인쇄 시 컨텍스트 메뉴·찾기 바 숨김 */
@media print {
  .og-context-menu,
  .og-find-bar { display: none !important; }
}

/* ============================================================
   F2: 워크시트 탭바 (.og-sheet-tabs)
   설계: .og-container 하단에 고정. 탭 클릭 시 시트 전환.
         CSS 변수 자동 상속 — 테마별 색상 일치.
   ============================================================ */

.og-container {
  --og-tab-bg:           var(--og-header-bg);
  --og-tab-color:        var(--og-header-color);
  --og-tab-border:       var(--og-border-color);
  --og-tab-active-bg:    var(--og-row-bg);
  --og-tab-active-color: var(--og-primary);
  --og-tab-hover-bg:     var(--og-row-hover-bg);
  --og-tab-add-color:    var(--og-primary);
}

.og-sheet-tabs {
  display:          flex;
  align-items:      stretch;
  gap:              2px;
  padding:          0 8px;
  background:       var(--og-tab-bg);
  border-top:       1px solid var(--og-tab-border);
  min-height:       30px;
  overflow-x:       auto;
  overflow-y:       hidden;
  scrollbar-width:  thin;
  flex-shrink:      0;
  font-family:      var(--og-font-family);
  font-size:        calc(var(--og-font-size) - 1px);
}

.og-sheet-tabs::-webkit-scrollbar        { height: 4px; }
.og-sheet-tabs::-webkit-scrollbar-thumb  { background: var(--og-tab-border); border-radius: 2px; }
.og-sheet-tabs::-webkit-scrollbar-track  { background: transparent; }

.og-sheet-tab {
  display:        flex;
  align-items:    center;
  padding:        0 14px;
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  color:          var(--og-tab-color);
  font-family:    inherit;
  font-size:      inherit;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background 0.12s, border-color 0.12s, color 0.12s;
  border-radius:  3px 3px 0 0;
  margin-top:     3px;
}

.og-sheet-tab:hover {
  background:   var(--og-tab-hover-bg);
}

.og-sheet-tab--active {
  background:     var(--og-tab-active-bg);
  color:          var(--og-tab-active-color);
  border-bottom:  2px solid var(--og-tab-active-color);
  font-weight:    600;
}

.og-sheet-tab-rename {
  padding:      2px 6px;
  margin:       auto 0;
  background:   var(--og-input-bg);
  color:        var(--og-input-color);
  border:       1px solid var(--og-focus-border);
  border-radius:3px;
  font-family:  inherit;
  font-size:    inherit;
  outline:      none;
  min-width:    60px;
  max-width:    120px;
}

.og-sheet-add {
  display:      flex;
  align-items:  center;
  justify-content: center;
  width:        26px;
  margin:       auto 0 auto 4px;
  background:   transparent;
  border:       1px solid transparent;
  border-radius:4px;
  color:        var(--og-tab-add-color);
  font-size:    18px;
  line-height:  1;
  cursor:       pointer;
  transition:   background 0.12s, border-color 0.12s;
  padding:      0;
  flex-shrink:  0;
}

.og-sheet-add:hover {
  background:   var(--og-tab-hover-bg);
  border-color: var(--og-tab-border);
}

/* 인쇄 시 탭바 숨김 */
@media print {
  .og-sheet-tabs { display: none !important; }
}

/* ============================================================
   OrgChart — 조직도 컴포넌트
   ============================================================ */
.og-orgchart {
  overflow:   auto;
  position:   relative;
  background: var(--og-bg, #fff);
  padding:    24px 16px 32px;
  box-sizing: border-box;
}

.og-orgchart-wrap {
  position:   relative;
}

/* SVG 연결선 */
.og-orgchart-line {
  stroke:       var(--og-tree-line-color, #bdbdbd);
  stroke-width: 1.5;
}

/* 노드 카드 */
.og-orgchart-node {
  position:       absolute;
  border:         1.5px solid var(--og-border-color, #e0e0e0);
  border-radius:  8px;
  background:     var(--og-row-bg, #fff);
  box-shadow:     0 1px 4px rgba(0,0,0,0.08);
  display:        flex;
  flex-direction: column;
  justify-content: center;
  overflow:       hidden;
  cursor:         pointer;
  transition:     box-shadow 0.15s, border-color 0.15s, background 0.15s;
  box-sizing:     border-box;
  padding:        8px 12px;
  user-select:    none;
}
.og-orgchart-node:hover {
  border-color: var(--og-primary, #1976d2);
  box-shadow:   0 3px 10px rgba(25,118,210,0.15);
}
.og-orgchart-node--selected {
  border-color: var(--og-primary, #1976d2);
  box-shadow:   0 0 0 3px rgba(25,118,210,0.18);
}

/* 카드 안 컨텐츠 */
.og-orgchart-node-content {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             3px;
  overflow:        hidden;
  min-height:      0;
}
.og-orgchart-col {
  font-size:     13px;
  line-height:   1.35;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  color:         var(--og-row-color, #212121);
}

/* 기본 스타일 헬퍼 — 예제에서 className으로 사용 */
.og-orgchart-col-name {
  font-weight:   600;
  font-size:     14px;
  color:         var(--og-row-color, #1a1a1a);
}
.og-orgchart-col-sub {
  font-size: 12px;
  color:     var(--og-header-color, #757575);
  opacity:   0.75;
}

/* 토글 버튼 (카드 하단 중앙 ⊕/⊖) */
.og-orgchart-toggle {
  position:        absolute;
  bottom:          -11px;
  left:            50%;
  transform:       translateX(-50%);
  background:      var(--og-row-bg, #fff);
  border:          1.5px solid var(--og-border-color, #e0e0e0);
  border-radius:   50%;
  width:           22px;
  height:          22px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       13px;
  color:           var(--og-primary, #1976d2);
  z-index:         2;
  padding:         0;
  line-height:     1;
  transition:      background 0.12s, color 0.12s, border-color 0.12s;
}
.og-orgchart-toggle:hover {
  background:    var(--og-primary, #1976d2);
  color:         #fff;
  border-color:  var(--og-primary, #1976d2);
}


/* 컬럼 드래그 리오더 */
.og-col-dragging {
  opacity: 0.5;
  cursor: grabbing !important;
}
.og-col-drop-over {
  background: var(--og-primary-light, #e3f2fd) !important;
  border-left: 2px solid var(--og-primary, #1976d2) !important;
}

/* 합계 푸터 바 */
.og-footer-bar {
  display: flex;
  align-items: stretch;
  border-top: 2px solid var(--og-primary, #1976d2);
  background: var(--og-header-bg, #f5f5f5);
  overflow: hidden;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
}
.og-footer-bar > div {
  padding: 4px 8px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--og-border-color, #e0e0e0);
}

/* 그룹 행 — 컬럼 정렬 소계 */
.og-group-row {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: stretch;
  cursor: pointer;
  user-select: none;
  background: var(--og-header-bg, #f5f5f5);
  border-bottom: 1px solid var(--og-border-color, #e0e0e0);
  font-size: 13px;
  transition: background 0.1s;
}
.og-group-row:hover {
  background: var(--og-primary-light, #e3f2fd);
}
.og-group-cell {
  flex-shrink: 0;
  padding: 2px 8px;
  box-sizing: border-box;
  overflow: hidden;
  border-right: 1px solid var(--og-border-color, #e0e0e0);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.og-group-state-cell {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  border-right: 1px solid var(--og-border-color, #e0e0e0);
}

/* 셀 병합 placeholder (hidden 셀 — 컬럼 너비 보존용) */
.og-cell--merge-ph { visibility: hidden !important; }

.og-vue-wrapper[data-v-0a49d4fc] {
  display: block;
  box-sizing: border-box;
}