:root {
    --om-bg: #f8fafc;
    --om-card: #ffffff;
    --om-border: #e5e7eb;
    --om-text: #374151;
    --om-accent: #7c3aed;
  }
  body > main, #pjax-content { padding-top: 8px !important; padding-bottom: 0 !important; }
  body > main#pjax-content {
    height: calc(100vh - 64px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #pjax-content { background: var(--om-bg); }
  .om-orders-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .om-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--om-border);
    background: var(--om-card);
    flex-wrap: wrap;
  }
  .om-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .om-toolbar-title {
    font-weight: 800;
    font-size: 16px;
    color: #111827;
    letter-spacing: -0.02em;
  }
  .om-toolbar-search {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    outline: none;
    min-width: 160px;
  }
  #omSearchField {
    min-width: 92px;
    width: 92px;
    padding-right: 24px;
  }
  #omDateQuickRange {
    min-width: 64px;
    width: 64px;
    padding-right: 20px;
  }
  #omDateField {
    min-width: 76px;
    width: 76px;
    padding-right: 22px;
  }
  #omDateFrom,
  #omDateTo {
    min-width: 116px;
    width: 116px;
  }
  .om-date-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .om-date-input-wrap .om-toolbar-search {
    padding-right: 32px;
  }
  .om-date-picker-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
  }
  .om-date-picker-btn:hover {
    color: #374151;
  }
  .om-date-picker-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  .om-toolbar-search:focus {
    border-color: var(--om-accent);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
  }
  .om-toolbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .om-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
  }
  .om-btn:hover { background: #f3f4f6; }
  .om-btn:disabled { opacity: 0.45; cursor: default; }
  .om-btn.is-active {
    background: #fff7ed;
    border-color: #f97316;
    color: #c2410c;
  }
  .om-btn-primary {
    background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    border-color: #5b21b6;
  }
  .om-btn-primary:hover { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); }
  .om-btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
  }
  .om-btn-danger:hover { background: #b91c1c; border-color: #991b1b; }
  .om-btn-restore {
    background: #111827;
    border-color: #111827;
    color: #fff;
  }
  .om-btn-restore:hover { background: #1f2937; }
  #omBtnSearch {
    background: #2563eb;
    color: #fff;
    border-color: #1d4ed8;
  }
  #omBtnSearch:hover {
    background: #1d4ed8;
    border-color: #1e40af;
  }
  .om-btn-danger:disabled { background: #fca5a5; border-color: #fca5a5; }
  .om-btn-green {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border-color: #15803d;
  }
  .om-btn-green:hover { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); }
  .om-loss-send-btn {
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    transition: transform 0.12s ease, opacity 0.12s ease;
  }
  .om-loss-send-btn:hover:not([disabled]) { transform: scale(1.15); }
  .om-loss-send-btn[disabled] { cursor: default; opacity: 0.5; }
  .om-loss-send-btn[disabled]:not([data-loss-send]) { font-size: 12px; }  /* 전송됨 상태 텍스트는 일반 셀(12px)과 동일 크기 — 📤(18px)는 유지 */
  .om-count {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
  }
  .om-column-data-preview {
    margin: 0 0 8px;
    padding: 8px 12px;
    border: 1px solid #dbe5f5;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    position: sticky;
    top: 8px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
  .om-column-data-preview-name {
    font-size: 11px;
    font-weight: 800;
    color: #334155;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .om-column-data-preview-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    line-height: 30px;
    color: #111827;
    outline: none;
  }
  .om-column-data-preview-input:focus {
    border-color: var(--om-accent);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
  }
  .om-column-data-preview-input:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: default;
  }
  /* 상태 요약 뱃지 바(사용자 요청 2026-07-04): 전체/선택/처리/중복/블랙/취소 건수를 한눈에.
     선택한 컬럼데이터 입력칸 오른쪽에 고정폭으로 붙는다. */
  .om-status-pill-bar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    border: 1px solid #dbe5f5;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
  }
  .om-status-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-right: 1px solid #e5e7eb;
    font-size: 12px;
    white-space: nowrap;
  }
  .om-status-pill:last-child { border-right: none; }
  .om-status-pill-label { color: #64748b; font-weight: 600; }
  .om-status-pill-value { font-weight: 800; color: #111827; }
  /* 2026-07-04: 처리/중복/블랙/취소 뱃지는 클릭해서 해당 상태만 필터링할 수 있다(사용자 확인). */
  .om-status-pill.is-clickable { cursor: pointer; }
  .om-status-pill.is-clickable:hover { background: #f8fafc; }
  .om-status-pill.is-status-active { background: #eff6ff; box-shadow: inset 0 0 0 1px #93c5fd; }
  .om-cell a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .om-cell a:hover {
    color: #1d4ed8;
  }
  .om-help-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .om-help-btn {
    min-height: 24px;
    width: 24px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    cursor: help;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .om-help-btn:hover {
    background: #fdf1c2;
  }
  .om-help-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    transform: none;
    width: 680px;
    max-width: min(680px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #efe2b6;
    background: #fffdf6;
    color: #374151;
    box-shadow: 0 14px 28px rgba(148, 163, 184, 0.18);
    font-size: 12px;
    line-height: 1.65;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 30;
    max-height: min(72vh, 600px);
    overflow-y: auto;
  }
  .om-help-wrap:hover .om-help-tooltip,
  .om-help-wrap:focus-within .om-help-tooltip {
    opacity: 1;
    pointer-events: auto;
  }
  .om-help-title {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
  }
  .om-help-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 12px;
    background: #fff;
    border: 1px solid #f1e5bf;
    border-radius: 10px;
    overflow: hidden;
  }
  .om-help-table th {
    padding: 9px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    background: #fff7db;
    border-bottom: 1px solid #f1e5bf;
  }
  .om-help-table td {
    padding: 10px;
    vertical-align: top;
    color: #4b5563;
    border-top: 1px solid #f8efd3;
    word-break: keep-all;
  }
  .om-help-table tbody tr:first-child td {
    border-top: none;
  }
  .om-help-table td:first-child {
    width: 130px;
    min-width: 130px;
    font-weight: 700;
    color: #111827;
    background: #fffdf6;
  }
  .om-help-table tr.om-help-sec td {
    width: auto;
    padding: 7px 10px;
    background: #fdf1c2;
    color: #92400e;
    font-weight: 800;
    font-size: 11px;
    border-top: 1px solid #f1e5bf;
  }

  /* 테이블 */
  .om-table-wrap {
    overflow: auto;
    width: 100%;
    height: auto;
    flex: 1;
    min-height: 0;
    position: relative;
    background: var(--om-card);
  }
  #omBodyRows { transition: opacity 0.12s ease; }
  .om-virtual-spacer {
    pointer-events: none;
    flex: 0 0 auto;
  }
  .om-table-wrap.is-loading #omBodyRows { opacity: 0.4; pointer-events: none; }
  .om-table-loading-pill {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
    display: none;
    width: fit-content;
    margin: 0;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(79,70,229,0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    pointer-events: none;
  }
  .om-table-wrap.is-loading .om-table-loading-pill { display: block; }
  .om-header-row {
    display: grid;
    background: linear-gradient(180deg, #f7f8fa 0%, #e8ecf2 100%);
    border-bottom: 2px solid #b8c4d0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .om-header-cell {
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid #c0c8d4;
    position: relative;
    cursor: grab;
    user-select: none;
    background: transparent;
    line-height: 24px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.75);
    letter-spacing: 0.01em;
  }
  .om-header-cell:hover { background: rgba(124,58,237,0.07); color: #7c3aed; }
  .om-header-cell.dragging { opacity: 0.5; }
  .om-header-cell.drag-over { background: #dbeafe; }
  .om-header-cell.is-sorted { background: #eff6ff; color: #1d4ed8; }
  .om-sort-mark { font-size: 10px; color: #1d4ed8; }
  .om-filter-mark { font-size: 11px; color: #b45309; margin-left: 3px; }
  .om-header-cell.is-deprecated,
  .om-cell.is-deprecated {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
  }
  .om-header-cell.is-readonly-col {
    background: linear-gradient(180deg, #eef2f7 0%, #e2e8f0 100%);
    color: #475569;
    cursor: grab;
  }
  .om-header-cell.is-readonly-col:hover {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #334155;
  }
  .om-header-cell.om-col-renamed {
    background: #fef9c3;
  }
  .om-header-cell.has-header-help {
    overflow: visible;
    z-index: 20;
  }
  .om-header-cell.has-header-help:hover {
    z-index: 45;
  }
  .om-header-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
  }
  .om-header-help::after {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 280px;
    padding: 8px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 10px 24px rgba(15,23,42,0.18);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.55;
    white-space: pre-line;
    text-align: left;
    z-index: 30;
  }
  .om-header-help:hover::after { display: block; }
  .om-cell.is-readonly-col {
    background: #f8fafc;
    color: #64748b;
    cursor: default;
  }
  .om-body-row:hover .om-cell.is-readonly-col {
    background: #f1f5f9;
  }
  .om-cell.has-calc-breakdown {
    cursor: help;
  }
  .om-calc-tooltip {
    position: fixed;
    display: none;
    max-width: min(420px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    z-index: 10000;
    pointer-events: none;
  }
  .om-calc-tooltip-title {
    margin-bottom: 6px;
    font-weight: 800;
    color: #111827;
  }
  .om-calc-tooltip-formula {
    margin-bottom: 6px;
    color: #334155;
  }
  .om-calc-tooltip-steps {
    margin: 0 0 7px 16px;
    padding: 0;
  }
  .om-calc-tooltip-result {
    padding-top: 7px;
    border-top: 1px solid #e5e7eb;
    font-weight: 800;
    color: #0f172a;
  }
  .om-body-row.is-muted {
    background: #f3f4f6;
    box-shadow: inset 3px 0 0 #9ca3af;
  }
  .om-body-row.is-muted .om-cell {
    background: #f3f4f6;
    color: #6b7280;
  }
  .om-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
    background: transparent;
  }
  .om-resize-handle:hover, .om-resize-handle.active { background: var(--om-accent); }
  .om-body-row {
    display: grid;
    grid-template-columns: var(--om-row-grid-tpl, none);
    width: var(--om-row-grid-width, auto);
    background: linear-gradient(to bottom, #fff calc(100% - 1px), #d1d5db 100%);
  }
  .om-body-row:hover {
    background: linear-gradient(to bottom, #fff calc(100% - 1px), #d1d5db 100%);
  }
  .om-body-row.is-order-completed {
    background: linear-gradient(to bottom, #f0fdf4 calc(100% - 1px), #bbf7d0 100%);
    box-shadow: inset 3px 0 0 #22c55e;
  }
  .om-body-row.is-order-completed:hover {
    background: linear-gradient(to bottom, #f0fdf4 calc(100% - 1px), #bbf7d0 100%);
  }
  .om-body-row.is-order-completed .om-check-col {
    box-shadow: none;
  }
  /* 2026-07-04: 송장출력완료(is-muted)는 처리(is-order-completed)보다 이후 단계라 겹치면
     회색이 이겨야 하는데(사용자 확인: "구매완료보다 송장출력이 이후단계니까 회색이 맞아"),
     is-order-completed가 소스 순서상 나중이라 초록 색띠가 이겨버렸다(사용자 리포트: 텍스트는
     회색인데 세로 색띠만 초록으로 보임). 명시적으로 회색이 이기도록 고정. */
  .om-body-row.is-order-completed.is-muted {
    background: #f3f4f6;
    box-shadow: inset 3px 0 0 #9ca3af;
  }
  .om-body-row.is-order-completed.is-muted:hover {
    background: #f3f4f6;
  }
  /* 2026-07-04: 취소는 행 전체 배경을 넣지 않는다(사용자 확인) — 왼쪽 세로 색띠(빨강)와
     행 전체 텍스트를 빨간색으로 표시한다(사용자 확인: "취소 텍스트만이 아니라 전체
     텍스트"). 블랙리스트와 겹치면 행 배경/글씨는 블랙리스트(검정+흰색)를 그대로 따르고
     (블랙리스트의 !important가 자연히 이김), 색띠만 취소가 우선해서 빨간색으로 보이게
     한다(아래 콤보 규칙). 송장출력완료(is-muted, 회색 텍스트)와 겹치면 취소가 이겨야
     하므로(더 중요한 신호) is-muted .om-cell 규칙보다 뒤에 선언한다. */
  .om-body-row.is-release-stopped {
    box-shadow: inset 3px 0 0 #dc2626;
  }
  .om-body-row.is-release-stopped .om-cell {
    color: #dc2626;
  }
  .om-body-row.is-blacklist.is-release-stopped {
    box-shadow: inset 3px 0 0 #dc2626;
  }
  .om-body-row.is-active-row {
    background: linear-gradient(to bottom, #fffbeb calc(100% - 1px), #fcd34d 100%);
    box-shadow: inset 3px 0 0 #f59e0b;
  }
  .om-body-row.is-active-row .om-cell {
    background: rgba(245, 158, 11, .08);
  }
  /* 2026-07-07 사용자 확정: 선택 표시는 배경/색띠 변경 '없이' 바깥 테두리 라인만(구글시트 동일).
     - 배경·상태 색띠는 선택돼도 그대로 둔다(선택이 상태색을 덮지 않는다).
     - 테두리는 행 위 ::after 오버레이로 그린다: outline/inset shadow는 sticky 체크박스 칸
       (z-index:3, 불투명 배경)에 가려 끊겼다(사용자 스크린샷 2회).
     - 연속 선택 구간(sel-run-first/last는 JS가 계산)은 첫/끝 행에만 위/아래 선을 그려
       Shift 범위 선택이 블록 하나의 바깥 라인으로 보인다. Ctrl 단독 행은 자기 구간의
       first이자 last라 온전한 박스가 된다. */
  .om-body-row.selected {
    position: relative;
  }
  .om-body-row.selected::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7; /* 틀고정 셀(z-index:3)보다 위 — 체크박스 칸에서 라인 끊김 방지 */
    border-left: 2px solid #2563eb;
    border-right: 2px solid #2563eb;
  }
  .om-body-row.selected.sel-run-first::after { border-top: 2px solid #2563eb; }
  .om-body-row.selected.sel-run-last::after { border-bottom: 2px solid #2563eb; }
  /* Ctrl+클릭 비연속 셀 복수 선택(구글시트식) — 셀 단위 테두리 + 옅은 파랑 채움 */
  .om-cell.om-cell-multi-sel {
    box-shadow: inset 0 0 0 1px #2563eb;
    background: rgba(37, 99, 235, .10) !important;
  }
  .om-cell {
    position: relative;
    padding: 3px 4px;
    font-size: 12px;
    color: #111827;
    border-right: 1px solid #d1d5db;
    overflow: hidden;
    white-space: nowrap;
    /* 행 높이(세로 간격)는 사용자 조절 가능 — --om-row-h 변수(기본 38px), 2026-07-07 사용자 요청 */
    min-height: var(--om-row-h, 38px);
    line-height: var(--om-row-h, 38px);
    cursor: default;
    background: transparent;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  .om-cell.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .om-cell.is-quantity-alert input {
    color: #dc2626;
    background: #fef08a;
    font-weight: 700;
  }
  /* 2026-07-04: 복수주문(주문수량 2 이상)도 취소/중복과 같은 이유로 셀 전체 배경이 아니라
     텍스트만 배지로 표시한다 — 블랙리스트(검정 배경)와 겹치면 셀 전체 배경은 파묻혀서
     안 보이지만, 배지는 자식 요소 자체 배경이라 항상 보인다(사용자 확인). */
  .om-qty-alert-badge {
    display: inline-block;
    padding: 1px 8px;
    background: #fef08a;
    color: #b91c1c;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
  }
  .om-cell.sel-range {
    background: rgba(124,58,237,0.10);
    box-shadow: inset 0 0 0 1px rgba(124,58,237,0.30);
  }
  .om-cell:focus-within {
    background: #fafafa;
    outline: 2px solid var(--om-accent);
    outline-offset: -2px;
  }
  .om-check-col:focus-within {
    outline: none;
  }
  .om-cell input {
    user-select: text;
    -webkit-user-select: text;
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    font-family: inherit;
    padding: 0;
    line-height: 1.4;
    text-align: center;
  }
  .om-inline-autocomplete {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .om-inline-autocomplete-ghost {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 12px;
    font-family: inherit;
    color: #9ca3af;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
  }
  .om-inline-autocomplete-ghost-prefix {
    visibility: hidden;
  }
  .om-inline-autocomplete input {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 0 8px;
    box-sizing: border-box;
  }
  .om-cell.is-num input {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* 결제카드 칸 커스텀 드롭다운(2026-07-07 사용자 리포트: 브라우저 기본 datalist 화살표가
     작고, 값이 이미 목록과 일치하면 재클릭해도 전체 목록이 안 뜨던 문제) — position:fixed로
     document.body에 직접 붙여 셀의 overflow:hidden에 잘리지 않는다. */
  .om-payment-card-dropdown {
    position: fixed;
    z-index: 13010;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15,23,42,0.2);
    padding: 4px;
    max-height: 260px;
    overflow-y: auto;
  }
  .om-payment-card-dropdown-item {
    padding: 7px 10px;
    font-size: 13px;
    color: #1e293b;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
  }
  .om-payment-card-dropdown-item:hover { background: #f1f5f9; }
  .om-payment-card-dropdown-item.is-selected { background: #eff6ff; color: #1d4ed8; font-weight: 700; }
  .om-check-col {
    width: 32px;
    flex-shrink: 0;
    text-align: center;
  }

  /* 페이지네이션 */
  .om-pagination {
    display: flex;
    align-items: center;
    padding: 8px 112px 8px 16px;
    gap: 8px;
    border-top: 1px solid var(--om-border);
    background: var(--om-card);
    font-size: 12px;
    color: #6b7280;
  }
  .om-page-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 12px;
    color: #475569;
  }
  .om-page-jump-input {
    width: 58px;
    height: 28px;
    border: 1px solid var(--om-border);
    border-radius: 6px;
    padding: 0 6px;
    font-size: 12px;
    text-align: right;
  }
  .om-page-total-text {
    color: #94a3b8;
    white-space: nowrap;
  }
  .om-selection-summary {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
  }

  /* 모달 */
  .om-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    align-items: center;
    justify-content: center;
  }
  .om-modal-box {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    min-width: 360px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  }
  .om-confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 12000;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
  }
  .om-confirm-box {
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    padding: 24px;
  }
  .om-confirm-title {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
  }
  .om-confirm-message {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    margin-bottom: 22px;
    white-space: pre-wrap;
  }
  .om-import-box {
    width: min(520px, calc(100vw - 32px));
  }
  .om-import-warning {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
  }
  .om-import-drop-zone {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px dashed #93c5fd;
    border-radius: 12px;
    background: #eff6ff;
    color: #1e3a8a;
    text-align: center;
  }
  .om-import-drop-zone.drag-over {
    border-color: #2563eb;
    background: #dbeafe;
  }
  .om-import-drop-title {
    font-size: 14px;
    font-weight: 800;
  }
  .om-import-drop-desc {
    font-size: 12px;
    color: #64748b;
  }
  .om-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .om-confirm-actions .om-btn {
    min-width: 72px;
    height: 38px;
  }

  /* 토스트 */
  .om-toast {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    display: none;
    z-index: 9999;
  }

  /* 컬럼 설정 모달 */
  .om-col-modal-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: 8px 0;
  }
  .om-col-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
  }
  .om-col-item:last-child { border-bottom: none; }
  .om-col-item-separator {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #d1d5db;
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
  }
  .om-col-item-info { flex: 1; min-width: 0; }
  .om-col-item-name { font-size: 13px; font-weight: 500; color: #111827; }
  .om-col-item-key { font-size: 11px; color: #9ca3af; margin-top: 1px; }
  .om-col-item-width {
    width: 60px;
    padding: 3px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
  }
  .om-col-item-px { font-size: 11px; color: #6b7280; width: 34px; text-align: right; }
  .om-col-move-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    padding: 0;
  }
  .om-col-move-btn:hover { background: #f3f4f6; }
  .om-col-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
  }
  .om-col-modal-footer-left { display: flex; gap: 8px; }
  .om-col-modal-footer-right { display: flex; gap: 8px; }

  /* 셀 범위 선택 */
  .om-cell-sel { background: rgba(59,130,246,0.10) !important; }
  .om-cell-sel-t { border-top: 2px solid #3b82f6 !important; }
  .om-cell-sel-b { border-bottom: 2px solid #3b82f6 !important; }
  .om-cell-sel-l { border-left: 2px solid #3b82f6 !important; }
  .om-cell-sel-r { border-right: 2px solid #3b82f6 !important; }
  .om-cell-fill-preview { background: rgba(34,197,94,0.10) !important; }
  .om-cell-fill-t { border-top: 2px dashed #16a34a !important; }
  .om-cell-fill-b { border-bottom: 2px dashed #16a34a !important; }
  .om-cell-fill-l { border-left: 2px dashed #16a34a !important; }
  .om-cell-fill-r { border-right: 2px dashed #16a34a !important; }
  .om-fill-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    background: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
    cursor: crosshair;
    z-index: 8;
  }

  /* 가로 틀고정 (좌측 컬럼 sticky-left). left 오프셋은 applyColumnFreeze가 인라인 설정 */
  .om-frozen-cell { position: sticky; z-index: 3; background: #ffffff; }
  .om-header-row .om-frozen-cell { z-index: 6; background: #eef1f6; }
  .om-frozen-last { box-shadow: 2px 0 5px rgba(15,23,42,0.14); border-right: 2px solid #94a3b8 !important; }
  .om-body-row.is-order-completed .om-frozen-cell { background: #f0fdf4; }
  .om-body-row.is-order-completed:hover .om-frozen-cell { background: #dcfce7; }
  .om-body-row.is-active-row .om-frozen-cell { background: #fffbeb; }
  /* 2026-07-07 사용자 확정: 선택은 배경을 바꾸지 않는다 — 예전의 selected 틀고정 배경 강제
     (#ffffff + 상태 콤보 복원 3종)는 제거. 선택 표시는 ::after 테두리 오버레이가 전담. */
  .om-body-row.is-muted .om-frozen-cell { background: #f3f4f6; }
  /* 송장출력완료가 처리보다 이후 단계라 겹치면 회색이 이겨야 한다(틀고정 영역도 동일). */
  .om-body-row.is-order-completed.is-muted .om-frozen-cell { background: #f3f4f6; }
  /* 2026-07-04: 틀고정(sticky) 체크박스 셀은 배경이 불투명해져(스크롤 시 아래 내용 가림 목적)
     행 자체의 inset 3px 좌측 색띠를 덮어버린다. 체크박스(항상 c===0, 틀고정 여부 무관하게
     sticky)에 한해 동일 색띠를 다시 그려 상태색이 왼쪽 끝에 보이게 한다. */
  .om-body-row.is-muted .om-check-col.om-frozen-cell { box-shadow: inset 3px 0 0 #9ca3af; }
  .om-body-row.is-order-completed .om-check-col.om-frozen-cell { box-shadow: inset 3px 0 0 #22c55e; }
  .om-body-row.is-order-completed.is-muted .om-check-col.om-frozen-cell { box-shadow: inset 3px 0 0 #9ca3af; }
  .om-body-row.is-release-stopped .om-check-col.om-frozen-cell { box-shadow: inset 3px 0 0 #dc2626; }
  .om-body-row.is-active-row .om-check-col.om-frozen-cell { box-shadow: inset 3px 0 0 #f59e0b; }
  /* (2026-07-07) 선택 시 체크칸 색띠를 파랑으로 덮던 규칙 제거 — 선택은 상태 색띠를 바꾸지 않는다. */
  .om-body-row.is-blacklist .om-check-col.om-frozen-cell { background: #18181b; box-shadow: inset 3px 0 0 #000000; }
  .om-body-row.is-blacklist:hover .om-check-col.om-frozen-cell { background: #27272a; }
  /* 취소는 블랙리스트와 겹쳐도 색띠(체크박스 포함)만은 취소(빨강)가 우선한다(사용자 확인). */
  .om-body-row.is-blacklist.is-release-stopped .om-check-col.om-frozen-cell { box-shadow: inset 3px 0 0 #dc2626; }

  /* 등록상품 팝업 필드 */
  .om-popup-field { display:flex; align-items:flex-start; gap:8px; font-size:13px; }
  .om-popup-label { min-width:72px; color:#374151; font-weight:600; padding-top:5px; flex-shrink:0; }
  .om-popup-val { color:#1f2937; font-size:13px; word-break:break-all; padding-top:5px; }
  .om-popup-input { border:1px solid #d1d5db; border-radius:6px; padding:4px 8px; font-size:13px; flex:1; }
  .om-popup-select { border:1px solid #d1d5db; border-radius:6px; padding:4px 8px; font-size:13px; flex:1; background:#fff; }
  .om-popup-input:focus, .om-popup-select:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.12); }

  .om-icon-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:999px; border:1px solid #d1d5db;
    background:#fff; cursor:pointer; font-size:15px; flex-shrink:0;
  }
  .om-icon-btn:hover { background:#f3f4f6; }
  .om-fee-info-note {
    font-size:12px; color:#6b7280; margin:6px 0 12px;
  }
  .om-fee-info-table { width:100%; border-collapse:collapse; font-size:12px; }
  .om-fee-info-table th {
    padding:8px 10px; text-align:left; font-weight:700; color:#374151;
    background:#f8fafc; border-bottom:1px solid #e5e7eb;
  }
  .om-fee-info-table td {
    padding:8px 10px; color:#1f2937; border-bottom:1px solid #f1f5f9;
  }
  .om-fee-info-table td.is-num, .om-fee-info-table th.is-num { text-align:right; }

  /* 수수료 미등록 배지 */
  .om-unreg-badge {
    display: inline-block;
    padding: 1px 7px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    pointer-events: auto;
  }
  .om-unreg-badge:hover { background: #fde68a; }
  /* 2026-07-04: 처음엔 배지(배경+흰 글씨)로 표시했으나, 다른 상태와 겹칠 일이 없는 칸이라
     굳이 배경 없이 텍스트 색상만 지정해도 충분하다(사용자 확인). 자체 지정 color는
     상속값(예: 블랙리스트 행의 흰 글씨)보다 항상 우선하므로 배경 없이도 블랙리스트와
     겹쳐도 빨간 글씨가 계속 보인다. */
  .om-cancel-badge {
    color: #dc2626;
    font-weight: 700;
    white-space: nowrap;
  }

  /* 중복 주문 표시(차단 아님, 사용자 요청 2026-07-04): 행 전체를 물들이던 방식은 걷어내고,
     실제 중복 판정에 쓰는 3개 필드(주문고유번호/상품명/주문선택사항)의 값만 등록상품
     '미등록' 뱃지(.om-unreg-badge)처럼 배경색 있는 뱃지로 감싸서 어떤 값이 겹치는지
     바로 보이게 한다. renderRows()와 syncRowStatusVisuals()(applyDuplicateFieldBadges) 참고. */
  .om-dup-field-badge {
    display: inline-block;
    padding: 1px 7px;
    background: #cffafe;
    color: #0e7490;
    border: 1px solid #67e8f9;
    border-radius: 4px;
    font-weight: 600;
  }

  /* 블랙리스트 매칭(사용자 요청 2026-07-04): 검정 배경 + 흰색 글씨로 가장 강하게 경고. */
  .om-body-row.is-blacklist {
    color: #ffffff;
    background: linear-gradient(to bottom, #18181b calc(100% - 1px), #3f3f46 100%);
    box-shadow: inset 3px 0 0 #000000;
  }
  .om-body-row.is-blacklist .om-cell {
    color: #ffffff !important;
    background: #18181b;
    font-weight: 600;
  }
  .om-body-row.is-blacklist .om-check-col {
    box-shadow: none;
  }
  .om-body-row.is-blacklist:hover {
    color: #ffffff;
    background: linear-gradient(to bottom, #27272a calc(100% - 1px), #52525b 100%);
  }
  .om-body-row.is-blacklist:hover .om-cell {
    color: #ffffff !important;
    background: #27272a;
  }
  /* 2026-07-04: 취소는 블랙리스트와 겹쳐도 텍스트가 계속 빨간색으로 보여야 한다(사용자 확인:
     "블랙이랑 겹쳐도 텍스트 빨간색으로 해야지"). 블랙리스트 색상이 !important라 콤보 선택자도
     !important로 맞추고, 클래스 4개(더 높은 특이도)로 이긴다. */
  .om-body-row.is-blacklist.is-release-stopped .om-cell {
    color: #dc2626 !important;
  }
  .om-body-row.is-blacklist.is-release-stopped:hover .om-cell {
    color: #dc2626 !important;
  }

  @media (max-width: 768px) {
    .om-toolbar { flex-direction: column; align-items: stretch; }
    .om-toolbar-right { width: 100%; flex-wrap: wrap; }
    .om-btn { flex: 1 1 0; }
  }

  /* 행 높이(세로 간격) 조절 핸들 — 체크박스 칸 하단 경계선. 드래그=전체 행 높이 조절(가상
     렌더링이 균일 높이를 전제하므로 구글시트의 '전체 행 선택 후 조절'과 동일 의미),
     더블클릭=기본(38px) 복귀. 2026-07-07 사용자 요청.
     .om-body-row로 스코프 — 헤더의 체크칸도 .om-check-col을 공유해서 스코프 없이 걸면
     맨 위 컬럼명 행까지 같이 늘어나는 회귀(헤더에는 리사이즈 핸들 자체가 없음, 2026-07-07 리포트).
     position은 여기서 걸지 않는다 — 체크칸은 항상 가로 고정열(.om-frozen-cell, position:sticky)
     이라 position:relative를 얹으면(구 버전에서는 이 셀렉터가 더 늦게 와 이겨버림) 가로
     스크롤 시 고정이 풀려 체크박스가 스크롤과 함께 사라지는 회귀가 생겼다(2026-07-07 사용자
     리포트: "횡스크롤시 체크박스가 사라짐"). position:sticky도 절대위치 자식(리사이즈 핸들)의
     기준점이 되므로 별도 position:relative가 필요 없다. */
  .om-body-row .om-check-col { line-height: var(--om-row-h, 38px); }
  .om-row-resize-handle {
    /* 부모 .om-check-col도 .om-cell(overflow:hidden)이라 음수 bottom으로 튀어나오면
       잘려서 클릭/더블클릭 자체가 안 먹는다(2026-07-07 사용자 리포트) — 박스 안쪽에 배치. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    cursor: row-resize;
    z-index: 4;
  }
  .om-row-resize-handle:hover { background: rgba(37, 99, 235, .35); }
  /* 2026-07-07 사용자 리포트("더블클릭해도 안 줄어듦")에 대한 추가 보완 — 시각 라인은
     6px로 유지하되, 실제 클릭/더블클릭 판정 범위는 위쪽으로 4px 더 넓힌다(아래로 넓히면
     최소 행 높이 22px에서 다음 행 경계 밖으로 나가 overflow:hidden에 잘림). 두 번의
     클릭이 정확히 같은 지점이어야만 브라우저가 dblclick으로 묶는데, 6px는 사람 손으로
     두 번 정확히 맞히기엔 좁아 두 번째 클릭이 빗나가 dblclick 자체가 안 생기는 경우가 있었다. */
  .om-row-resize-handle::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    bottom: 0;
  }

  /* 실시간 동기화: 접속 중인 팀 유저 아바타(툴바, 구글시트식). 호버 시 title로 이름 표시. */
  .om-presence-users {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
  }
  .om-presence-user {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #2563eb;
    margin-left: -6px;
    background: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    box-sizing: border-box;
    cursor: default;
  }
  .om-presence-user:first-child { margin-left: 0; }
  .om-presence-user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 실시간 동기화: 다른 팀원의 프레즌스(보고 있는 셀)/편집 소프트락 표시.
     2026-07-07 사용자 지시: 상시 이름표 금지 — 얇은 색 테두리만 표시하고,
     누군지는 호버 시 툴팁(attr(data-*), HTML 미해석이라 XSS 안전)으로 안내. */
  .om-presence-cell {
    position: relative;
    box-shadow: inset 0 0 0 1px var(--om-presence-color, #2563eb) !important;
  }
  .om-locked-cell {
    position: relative;
    box-shadow: inset 0 0 0 1px #f59e0b !important;
    background: rgba(245, 158, 11, .08) !important;
  }
  /* 호버 이름 태그(구글시트식) — .om-cell이 overflow:hidden이라 ::after는 잘려서 못 쓴다.
     JS가 body에 fixed로 띄우는 플로팅 태그(_showPresenceTip)를 사용. */
  .om-presence-tip {
    position: fixed;
    z-index: 9999;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    color: #fff;
    padding: 0 6px;
    border-radius: 3px;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  }

  /* 관리자 팀선택 모달 — 수익분석 팀선택과 동일 UI(2026-07-07 사용자 요청). */
  .om-team-panel { display: none; }
  .om-team-panel.is-visible { display: flex; }
  .team-modal-panel {
    width: 90%;
    max-width: 460px;
    max-height: 80vh;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
  }
  .team-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    padding: 16px 20px 12px;
  }
  .team-modal-body { padding: 12px 20px 20px; }
  .team-search-input {
    width: 100%;
    height: 2.4rem;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    padding: 0 0.75rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #334155;
  }
  .team-modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(48vh, 28rem);
    margin: 12px 0 16px;
    overflow: auto;
    font-size: 14px;
  }