open-grid 0.2.0

package/dist/open-grid-base.css

@@ -0,0 +1,1595 @@
+/* ============================================================
+   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:   11px;
+  font-weight: bold;
+  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; }
+
+/* ================================================================
+   OPEN_GRID — UI/UX 개선 (UX-1 ~ UX-6)  2026-06-03
+   ================================================================ */
+
+/* ── UX-1: 셀 타입 CSS 클래스 완성 ──────────────────────────── */
+
+/* 숫자 셀: 탭뷸러 정렬 (자릿수 정렬, 천단위 가독성 향상) */
+.og-cell-number {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+/* 텍스트/날짜: 클래스 기반 overflow 처리 */
+.og-cell-text,
+.og-cell-date {
+  overflow:      hidden;
+  text-overflow: ellipsis;
+  white-space:   nowrap;
+  display:       block;
+  width:         100%;
+}
+
+/* 링크 렌더러: 밑줄 오프셋 + 호버 강조 */
+.og-cell-link {
+  text-underline-offset: 2px;
+}
+.og-cell-link:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* 버튼 렌더러 CSS 클래스 (인라인 style 보완 — 테마 override 용) */
+.og-cell-btn {
+  padding:      2px 10px;
+  border:       1px solid var(--og-primary, #1976d2);
+  border-radius: 4px;
+  background:   var(--og-row-bg, #fff);
+  color:        var(--og-primary, #1976d2);
+  cursor:       pointer;
+  font-size:    12px;
+  font-family:  var(--og-font-family);
+  font-weight:  500;
+  white-space:  nowrap;
+  transition:   background var(--og-transition-fast), box-shadow var(--og-transition-fast);
+  display:      inline-flex;
+  align-items:  center;
+  justify-content: center;
+  line-height:  1;
+}
+.og-cell-btn:hover {
+  background:  var(--og-primary-light, #e3f2fd);
+  box-shadow:  0 1px 4px rgba(25,118,210,0.15);
+}
+.og-cell-btn:active {
+  filter: brightness(0.95);
+}
+
+/* 체크박스/라디오 셀: accent-color CSS 변수 연동 */
+.og-cell-checkbox input[type="checkbox"],
+.og-cell-radio    input[type="radio"] {
+  accent-color: var(--og-primary, #1976d2);
+}
+
+/* ── UX-2: 헤더 인터랙션 개선 ───────────────────────────────── */
+
+/* 정렬 활성 헤더 컬럼 배경 하이라이트 */
+.og-header-cell.og-sorted {
+  background: var(--og-primary-light, #e3f2fd) !important;
+}
+.og-header-cell.og-sorted:hover {
+  filter: brightness(0.96);
+}
+
+/* 필터 아이콘: 기본은 흐리게, 호버/활성 시 primary */
+.og-filter-icon {
+  transition: opacity var(--og-transition-fast), color var(--og-transition-fast);
+}
+.og-filter-icon:hover {
+  opacity: 1 !important;
+  color:   var(--og-primary, #1976d2) !important;
+}
+.og-filter-icon--active {
+  opacity:     1 !important;
+  color:       var(--og-primary, #1976d2) !important;
+  font-weight: bold;
+}
+
+/* 리사이즈 핸들: 세로 바 힌트 + 호버 인터랙션 */
+.og-resize-handle::after {
+  content:    '';
+  position:   absolute;
+  right:      1px;
+  top:        25%;
+  bottom:     25%;
+  width:      2px;
+  background: var(--og-border-color, #e0e0e0);
+  border-radius: 1px;
+  transition: background var(--og-transition-fast),
+              top var(--og-transition-fast),
+              bottom var(--og-transition-fast),
+              width var(--og-transition-fast);
+}
+.og-resize-handle:hover::after {
+  background: var(--og-primary, #1976d2);
+  top:        12%;
+  bottom:     12%;
+  width:      3px;
+}
+/* resize 드래그 중 ::after 제거 (혼란 방지) */
+.og-header-cell:active .og-resize-handle::after { display: none; }
+
+/* 컬럼 드롭 인디케이터 강화 */
+.og-col-drop-over {
+  background:  var(--og-primary-light, #e3f2fd) !important;
+  border-left: 3px solid var(--og-primary, #1976d2) !important;
+  box-shadow:  inset 2px 0 6px rgba(25,118,210,0.12) !important;
+}
+
+/* ── UX-3: 편집 셀 시각 개선 ─────────────────────────────────── */
+
+/* 편집 입력 필드: 포커스 내부 링 + 드롭섀도우 */
+.og-cell.og-editing input.og-cell-input,
+.og-cell.og-editing select.og-cell-select,
+.og-cell.og-editing textarea.og-cell-textarea {
+  box-shadow: inset 0 0 0 1px var(--og-input-border, #1976d2),
+              0 2px 8px rgba(25,118,210,0.10);
+}
+
+/* ── UX-4: 위젯 렌더러 CSS 개선 ─────────────────────────────── */
+
+/* Progress: 그라디언트 트랙 + fill 애니메이션 */
+.og-progress-track {
+  background: linear-gradient(135deg, #eeeeee 0%, #e8e8e8 100%);
+}
+.og-progress-fill {
+  background: linear-gradient(
+    90deg,
+    var(--og-primary, #1976d2) 0%,
+    color-mix(in srgb, var(--og-primary, #1976d2) 75%, white) 100%
+  );
+  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Switch: CSS-only thumb 미세 조정 (TS inline 보완) */
+.og-switch {
+  display:        inline-block;
+  width:          34px;
+  height:         18px;
+  border-radius:  9px;
+  position:       relative;
+  transition:     background 0.2s;
+  cursor:         pointer;
+  flex-shrink:    0;
+}
+
+/* ── UX-5: 그룹 행 CSS 정리 ─────────────────────────────────── */
+
+/* og-group-row: 첫번째 정의(line 339)의 !important 충돌 해소
+   — 그룹 변수(--og-group-*)를 명시 적용, transition 추가 */
+.og-group-row {
+  background:    var(--og-group-bg, #e8eaf6)    !important;
+  color:         var(--og-group-color, #283593)  !important;
+  font-weight:   600;
+  font-size:     13px;
+  transition:    background var(--og-transition-fast);
+  border-bottom: 1px solid var(--og-group-border, #c5cae9) !important;
+}
+.og-group-row:hover {
+  background: color-mix(in srgb, var(--og-group-bg, #e8eaf6) 80%, var(--og-primary, #1976d2)) !important;
+  filter:     none !important; /* 첫번째 정의의 filter:brightness 취소 */
+}
+.og-group-cell {
+  color: inherit;
+}
+
+/* 그룹 화살표 트랜지션 (collapsed 상태용) */
+.og-group-arrow {
+  display:    inline-block;
+  transition: transform var(--og-transition-fast);
+}
+.og-group-row--collapsed .og-group-arrow {
+  transform: rotate(-90deg);
+}
+
+/* ── UX-6: 기타 컴포넌트 ─────────────────────────────────────── */
+
+/* 툴팁 CSS */
+.og-tooltip {
+  position:       fixed;
+  z-index:        99999;
+  background:     rgba(33, 33, 33, 0.95);
+  color:          #fff;
+  font-size:      12px;
+  font-family:    var(--og-font-family);
+  line-height:    1.45;
+  padding:        5px 10px;
+  border-radius:  5px;
+  white-space:    normal;
+  word-break:     break-word;
+  pointer-events: none;
+  box-shadow:     0 3px 10px rgba(0, 0, 0, 0.25);
+  max-width:      300px;
+  animation:      og-tooltip-appear 0.12s ease-out;
+}
+@keyframes og-tooltip-appear {
+  from { opacity: 0; transform: translateY(3px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* 빈 상태 개선: 아이콘 크게, 텍스트 부드럽게 */
+.og-empty-message {
+  height:     140px;
+  gap:        12px;
+  color:      #90a4ae;
+  font-size:  13.5px;
+  letter-spacing: 0.025em;
+}
+.og-empty-message::before {
+  font-size: 34px;
+  opacity:   0.32;
+}
+
+/* 고정 컬럼 그림자: 레이어드 섀도우로 자연스러운 경계 */
+.og-frozen-last {
+  box-shadow: 4px 0 10px -2px rgba(0,0,0,0.12),
+              1px 0 3px  -1px rgba(0,0,0,0.06) !important;
+}
+
+/* 합계 푸터 바: 셀 내부 정렬 개선 */
+.og-footer-bar > div {
+  display:         flex;
+  flex-direction:  column;
+  justify-content: center;
+  font-size:       12px;
+}
+
+.og-vue-wrapper[data-v-0a49d4fc] {
+  display: block;
+  box-sizing: border-box;
+}