/* ===========================================================================
   OpenGrid.css - HandStack OpenGrid UIControl 스타일
   open-grid (https://github.com/farmerkweon/OpenGrid, MIT License) v1.3.1 기반
   원본: vendor/open-grid/open-grid-base.css (dist 그대로 vendoring)
   =========================================================================== */

/* ============================================================
   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;

  /* F1: 범위 선택 + 채우기 핸들(11_design_F1_v2.md §6.1) */
  --og-range-bg:          rgba(25, 118, 210, 0.12);
  --og-range-border:      #1976d2;
  --og-fill-handle-bg:    #1976d2;

  /* 상태 행 */
  --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);
  /* host isolation: 호스트(WordPress 등) 테마의 line-height(1.7~1.9) 상속을
     차단한다. 모든 후손(행·셀·헤더 <th> 포함)으로 normal이 cascade되어,
     고정 행/헤더 높이가 호스트 본문 line-height에 desync되는 것을 막는다. */
  line-height: normal;
  /* host isolation(확장): 호스트 테마가 body/후손에 건 텍스트-흐름 상속 속성을 차단한다.
     letter-spacing·word-spacing 이 상속되면 셀 텍스트가 "김 민 준"처럼 벌어지고(부모 div 오염),
     text-transform/text-indent/font-style/font-variant 도 데이터 표시를 왜곡한다. 컨테이너에서
     normal/기본으로 못박아 전 후손에 cascade — 특정 요소(헤더 letter-spacing·uppercase 등)는
     자기 규칙으로 명시 재지정하므로 영향받지 않는다. */
  letter-spacing: normal;
  word-spacing:   normal;
  text-transform: none;
  text-indent:    0;
  font-style:     normal;
  font-variant:   normal;
  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 var(--og-divider-style, 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%;
  /* host isolation: 헤더만 실제 <table>이라 호스트 table 스타일에 노출된다.
     margin/border-spacing은 상속되지 않으므로 요소에 직접 0으로 고정해
     헤더 테이블이 바디(absolute flex div)와 어긋나지 않게 한다. */
  margin:          0;
  border-spacing:  0;
}

.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 var(--og-border-style, solid) var(--og-border-color);
  border-bottom:   1px var(--og-divider-style, solid) var(--og-border-color);
  user-select:     none;
  box-sizing:      border-box;
  position:        relative;
  /* host isolation: <th>는 table-cell이라 호스트 th/td 규칙에 직접 노출된다
     (element 셀렉터라 .og-container의 상속 line-height를 이김). 따라서 텍스트
     메트릭·잔여 보더를 헤더셀에 직접 고정해 호스트 th{line-height;font-size;border}
     침범을 차단한다. (padding/border-right/bottom/text-align은 이미 클래스 특이도로 방어됨) */
  vertical-align:  middle;
  line-height:     normal;
  font-size:       var(--og-font-size);
  border-top:      0;
  border-left:     0;
  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 var(--og-divider-style, 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); }

/* ── 가변 행 높이(autoHeight, 비가상 모드) ──
   가상 스크롤은 고정 rowHeight 절대배치를 쓰지만, autoHeight 모드에서는 모든 행을
   일반 플로우로 쌓아 내용(특히 wrap 컬럼 줄바꿈)에 따라 높이가 자동으로 늘어나게 한다. */
.og-autoheight              { height: auto !important; }
.og-autoheight .og-row,
.og-autoheight .og-group-row {
  position:   relative !important;
  top:        auto !important;
  height:     auto !important;
  min-height: var(--og-row-height, 32px);
  align-items: stretch;
}
.og-autoheight .og-cell { height: auto; align-items: center; }
.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 var(--og-border-style, 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; }
/* 줄바꿈 컬럼: nowrap+ellipsis 대신 여러 줄 표시.
   가상 스크롤은 고정 rowHeight 를 쓰므로, 줄바꿈은 rowHeight 를 키워 함께 사용한다. */
.og-cell--wrap {
  white-space:   normal;
  text-overflow: clip;
  overflow:      hidden;
  word-break:    break-word;
  line-height:   1.35;
}
/* 셀 내부 텍스트 span(.og-cell-text/.og-cell-date)은 렌더러가 인라인으로
   white-space:nowrap 을 박는다. wrap 컬럼에서는 그 인라인을 !important 로 무력화해야
   실제로 여러 줄로 꺾인다(클래스만으로는 인라인을 못 이김). */
.og-cell--wrap .og-cell-text,
.og-cell--wrap .og-cell-date {
  white-space:   normal !important;
  text-overflow: clip !important;
  overflow:      visible;
  word-break:    break-word;
}

/* 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; }

/* ── F1: 범위 선택 + 채우기 핸들(11_design_F1_v2.md §4) ─────────────────
   면 하이라이트(og-range-selected)의 배경은 GridRenderer 가 인라인 --og-range-bg 로
   직접 지정한다(호스트 CSS 격리, QA-3). 여기서는 클래스 자체의 시각 보강만 최소로 둔다. */
.og-cell.og-range-selected { position: relative; }

/* 연속 테두리·핸들·채우기 프리뷰는 bodyWrap 자식 오버레이(RangeSelectionManager) 가
   인라인 스타일로 배치한다(C6). 아래는 로드베어링 아닌 보조 규칙만. */
.og-range-fill-handle {
  width: 10px; height: 10px;
  margin-left: -5px; margin-top: -5px;
  border-radius: 1px;
  box-shadow: 0 0 0 1px #fff;
}
@media (pointer: coarse) {
  /* C8.4: 터치 히트박스 ≥44×44px — 시각 크기는 유지, 히트영역만 확대 */
  .og-range-fill-handle {
    width: 44px; height: 44px;
    margin-left: -22px; margin-top: -22px;
    background-clip: content-box;
    padding: 17px;
  }
}

/* 인라인 에디터 입력 */
.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-context-menu 도 포함: 메뉴가 document.body 에 부착될 때(임베드 호스트 격리)
   자기 자신에서 --og-cm-* 가 해석되도록 한다(menu 의 data-og-theme 가 --og-* 를 공급). */
.og-container,
.og-context-menu {
  --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;
}

/* F2(11_design_F2_v2.md §11, HANMS-16): 디테일 패널 인트로 — 높이 애니는 정수슬롯 제약상
   불가하나(MVP), 패널 등장 자체는 opacity+translateY 로 손맛을 준다. load-bearing 레이아웃
   속성은 GridRenderer 가 인라인으로 고정하므로(NFR-3) 이 클래스는 순수 연출용. */
.og-detail-panel-intro {
  animation: og-detail-in 140ms ease-out;
}
@keyframes og-detail-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .og-detail-panel-intro { animation: none; }
}
.og-detail-expander {
  border-radius: 3px;
  color: var(--og-primary, #1976d2);
  font-size: 13px;
}
.og-detail-expander:hover { background: rgba(25, 118, 210, 0.08); }
.og-detail-expander:focus-visible { outline: 2px solid var(--og-primary, #1976d2); outline-offset: 1px; }
@media (pointer: coarse) {
  /* C8.4 / DetailGlyph.ts:24(DETAIL_EXPANDER_MIN_HIT_TARGET_PX=44): expander 터치 히트박스 ≥44×44px —
     시각 글리프 크기(버튼 22px)는 유지, 히트 영역만 투명 패딩으로 확대(F1 채우기 핸들과 동일 기법).
     부모 셀(og-col-detail-toggle, 폭 28px)의 overflow:hidden을 이 컬럼에 한해 해제해 확대된 히트영역이
     잘리지 않게 하고, flex-shrink:0으로 좁은 컬럼에 눌려 패딩이 줄어들지 않게 고정한다. */
  .og-cell.og-col-detail-toggle { overflow: visible; }
  .og-detail-expander {
    flex-shrink: 0;
    padding: 11px; /* 22px(min-width/height) + 11px×2 = 44px */
    background-clip: content-box;
  }
}

/* 고정 컬럼 그림자: 레이어드 섀도우로 자연스러운 경계 */
.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-59e771a0] {
  display: block;
  box-sizing: border-box;
}

/* ===========================================================================
   HandStack UIControl 래퍼 (open-grid 자체 스타일이 아닌 HandStack 통합용)
   =========================================================================== */
.syn-opengrid {
    display: block;
    box-sizing: border-box;
    outline: none;
}

/* codehelp 컬럼 타입 전용 셀 레이아웃 (OpenGrid.js 커스텀 렌더러가 사용) */
.og-codehelp-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.og-codehelp-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--og-header-color, #6b7280);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.og-codehelp-button:hover {
    color: var(--og-primary, #1976d2);
    background-color: var(--og-header-hover-bg, #ebebeb);
}

.og-codehelp-button svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}