/* ===== Table CSS - Sell Pilot ===== */
/* Tabulator 및 테이블 관련 스타일 */

/* ✅ Box-sizing 통일 (헤더/컬럼 너비 정렬 개선) */
.tabulator,
.tabulator *,
.tabulator *::before,
.tabulator *::after {
    box-sizing: border-box !important;
}

/* =========================== */
/* 테이블 기본 스타일 */
/* =========================== */

.tabulator {
    font-size: 12px;
    /* ✅ Phase 2.7.8: 직접 12px 지정 (기존 var(--font-size-base) 13px) */
    border: 0px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
}

/* ✅ Phase A: 스크롤 성능 최적화 (contain + will-change) */
/* - contain: 행/셀 내부 변경이 외부 레이아웃에 영향을 주지 않도록 격리 */
/* - will-change: GPU 가속 힌트로 스크롤 시 리페인트 최소화 */
.tabulator .tabulator-tableholder {
    will-change: scroll-position;  /* 스크롤 컨테이너 GPU 가속 */
}
.tabulator .tabulator-row {
    contain: layout style;  /* 행 내부 변경 격리 (paint 제외: 배경색 변경 허용) */
}
.tabulator .tabulator-cell {
    contain: layout;  /* 셀 레이아웃 격리 (style 제외: 조건부 서식 허용) */
}

.tabulator-tableHolder {
    background: var(--color-bg-white);
}

.tabulator-header {
    background: var(--color-bg-light);
    border-bottom: 2px solid var(--color-border-medium);
    padding-left: 0 !important;
    /* ✅ 헤더/컬럼 너비 정렬 개선 (좌측 패딩 제거) */
}

/* ✅ Frozen 헤더 좌측 패딩 제거 (price_history 등 frozen 컬럼) */
.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
    padding-left: 0 !important;
}

.tabulator-col {
    background: var(--color-bg-light);
    border-right: 1px solid var(--color-border-light);
}

.tabulator-col-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    text-align: center !important;
    /* ✅ 헤더 타이틀 중앙 정렬 */
}

/* ✅ 헤더 컨텐츠 컨테이너 중앙 정렬 (Tabulator 5.5+) */
.tabulator-col-content {
    justify-content: center !important;
}

.tabulator-row {
    border-bottom: 1px solid var(--color-border-light);
}

.tabulator-row:nth-child(even) {
    background: var(--color-gray-100);
}

/* ✅ Phase 2.7.5: 그룹 행은 짝수 배경 제거 (그룹 색상이 보이도록) */
.tabulator-row[class*="group-"]:nth-child(even) {
    background: none !important;
}

/* ✅ Phase 2.7.12: Row Hover 스타일 우선순위 강화 (그룹 스타일보다 위, 선택 스타일보다 아래) */
/* ✅ Phase 2.7.13.2: editable-cell 제외 제거 - 편집 가능 셀에서도 호버 스타일 적용 */
/* ✅ Phase B-1: :not(:is(...)) 단일 셀렉터로 축소 (8× :not() → 1×) — 스크롤 성능 개선 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background: var(--color-bg-light) !important;
}

/* ✅ Phase 2.7.7: 행 선택 스타일 - Frozen 컬럼 배경 유지 */
/* ✅ 색상 통일: 테두리는 파란색, Frozen 배경은 홀/짝 유지 */

/* 홀수 행 - Row 레벨 */
.tabulator-row:nth-child(odd).tabulator-selected {
    background: white !important;
}

/* 홀수 행 - Frozen Cell 레벨 (Specificity: 0-0-6-0) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(odd).tabulator-selected .tabulator-cell.tabulator-frozen,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(odd).tabulator-selected .tabulator-cell[tabulator-field="memo"],
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(odd).tabulator-selected .tabulator-cell[tabulator-field="price_history"] {
    background: white !important;
}

/* 짝수 행 - Row 레벨 */
.tabulator-row:nth-child(even).tabulator-selected {
    background: var(--color-gray-100) !important;
}

/* 짝수 행 - Frozen Cell 레벨 (Specificity: 0-0-6-0) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even).tabulator-selected .tabulator-cell.tabulator-frozen,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even).tabulator-selected .tabulator-cell[tabulator-field="memo"],
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even).tabulator-selected .tabulator-cell[tabulator-field="price_history"] {
    background: var(--color-gray-100) !important;
}

.tabulator-cell {
    padding: 3px;
    /* ✅ Phase 2.7.8: 8px → 5px */
    border-right: 1px solid var(--color-border-light);
    font-size: 12px;
    /* ✅ Phase 2.7.8: 직접 12px 지정 (기존 var(--font-size-base) 13px) */
}

/* =========================== */
/* 테이블 편집 관련 */
/* =========================== */

/* ✅ Phase 2.7.9: Tabulator 드롭다운 스타일 (올바른 클래스 사용) */
.tabulator-edit-list {
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-base);
    background: var(--color-bg-white);
    z-index: var(--z-index-dropdown);
}

.tabulator-edit-list .tabulator-edit-list-item {
    padding: var(--spacing-md);
    color: var(--color-text-primary);
}

/* 마우스 호버 + 키보드 선택 스타일 */
.tabulator-edit-list .tabulator-edit-list-item:hover,
.tabulator-edit-list .tabulator-edit-list-item.active {
    background: var(--color-bg-light);
    color: var(--color-text-primary);
}

/* 키보드 포커스 테두리 */
.tabulator-edit-list .tabulator-edit-list-item.focused {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* =========================== */
/* 테이블 컨테이너 */
/* =========================== */

/* 테이블 컨테이너 - 스크롤 가능하도록 수정 */
.table-container {
    flex: 1;
    background: var(--color-bg-white);
    overflow: auto;
    position: relative;
    min-height: 0;
    /* ✅ Phase 2.7.8: flexbox 버그 방지 */
    /* ✅ Phase 2.9.6: max-height 제거 - flexbox가 자동으로 높이 계산하도록 수정 */
}

/* 테이블 섹션 - Flexbox 기반 반응형 테이블 높이 */
/* ✅ Phase 3.52: calc(100vh) 하드코딩 제거, flex:1로 남은 공간 자동 채움 */
.table-section,
.table-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Tabulator 테이블 너비 설정 - 높이는 Tabulator 옵션에서 제어 */
#product-table,
#product-basic-table,
#product-sales-table,
#business-table,
#platform-fee-table {
    /* height 제거: Tabulator 초기화 옵션의 height 파라미터로 대체 */
    width: 100%;
}

/* 필터 섹션 */
.filter-section {
    background: var(--color-bg-white);
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-base);
    align-items: center;
    flex-shrink: 0;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.filter-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.filter-group input,
.filter-group select {
    padding: var(--spacing-sm) var(--spacing-base);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-sm);
    line-height: 16px;
    /* 높이 30px = 16px(텍스트) + 12px(패딩) + 2px(보더) */
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    /* min-width: 60px; */
    max-width: 150px;
}

/* 드롭다운 화살표 커스터마이징 (우측 4px 안쪽) */
.filter-group select {
    appearance: none;
    /* 기본 화살표 제거 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    /* 우측 끝에서 4px 안쪽 */
    padding-right: 24px;
    /* 화살표 공간 확보 */
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* =========================== */
/* 컨트롤 영역 */
/* =========================== */

.table-controls {
    background: var(--color-bg-white);
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: center;
}

/* 필터 컨테이너는 위에서 정의됨 */

/* =========================== */
/* 검색 영역 */
/* =========================== */

.search-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-base);
}

.search-input {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-base);
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    min-width: 250px;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.search-input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

/* =========================== */
/* 액션 버튼 */
/* =========================== */

.action-buttons {
    display: flex;
    gap: var(--spacing-base);
    margin-left: auto;
}

.btn-action {
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--border-radius-base);
    font-size: 12px;
    /* ✅ Phase 2.7.8: 13px → 12px */
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: var(--shadow-base);
}

.btn-secondary {
    background: var(--color-gray-500);
    color: var(--color-text-white);
}

.btn-secondary:hover {
    background: var(--color-gray-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-base);
}

.btn-danger {
    background: var(--color-danger);
    color: var(--color-text-white);
}

.btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: var(--shadow-base);
}

/* ✅ Phase 3.20: btn-success, btn-info 추가 */
.btn-success {
    background: #28a745;
    color: var(--color-text-white);
}

.btn-success:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: var(--shadow-base);
}

.btn-info {
    background: #17a2b8;
    color: var(--color-text-white);
}

.btn-info:hover {
    background: #138496;
    transform: translateY(-1px);
    box-shadow: var(--shadow-base);
}

/* =========================== */
/* 상태 표시 */
/* =========================== */

.status-bar {
    background: var(--color-bg-light);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: none;
    /* 숨김 처리 (나중에 필요하면 display: flex로 변경) */
    justify-content: space-between;
    align-items: center;
}

.status-info {
    display: flex;
    gap: var(--spacing-2xl);
}

.status-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* =========================== */
/* 반응형 테이블 */
/* =========================== */

@media (max-width: 768px) {
    .table-controls {
        padding: var(--spacing-lg);
        flex-direction: column;
        align-items: stretch;
    }

    .filters-container {
        justify-content: center;
    }

    .search-container {
        justify-content: center;
    }

    .search-input {
        min-width: 200px;
    }

    .action-buttons {
        margin-left: 0;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .filter-select {
        width: 100%;
        min-width: auto;
    }

    .search-input {
        min-width: auto;
        width: 100%;
    }

    .btn-action {
        flex: 1;
        justify-content: center;
    }
}

/* =========================== */
/* 테이블 스크롤 */
/* =========================== */

.tabulator-tableHolder::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tabulator-tableHolder::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
    background: var(--color-gray-200);
}

.tabulator-tableHolder::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
    background: var(--color-gray-500);
    border-radius: var(--border-radius-sm);
}

.tabulator-tableHolder::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-600);
}

.tabulator-tableHolder::-webkit-scrollbar-corner {
    background: var(--color-gray-200);
}

/* =========================== */
/* 접근성 개선 */
/* =========================== */

.tabulator-cell:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.filter-select:focus,
.search-input:focus,
.btn-action:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .btn-action,
    .filter-select,
    .search-input {
        transition: none;
    }

    .btn-action:hover {
        transform: none;
    }
}

/* =========================== */
/* Tabulator 그룹 색상 */
/* =========================== */


/* ✅ Phase 2.7.7: 행 선택 통합 스타일 - 일반 셀만 적용 (frozen 제외) */
/* ✅ Phase 3.14: 행/열/셀 선택 스타일 통일 - 전체 테두리 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected .tabulator-cell:not(.tabulator-frozen):not([tabulator-field="memo"]):not([tabulator-field="price_history"]) {
    background-color: rgba(0, 123, 255, 0.1) !important;
    color: #000 !important;
    border: 2px solid #007bff !important;
    position: relative;
    z-index: 999 !important;
}

/* ✅ Phase 3.14: 행/열/셀 선택 스타일 통일 - 전체 테두리 */
/* 모든 셀: 파란색 전체 테두리 (frozen 포함) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected .tabulator-cell {
    border: 2px solid #007bff !important;
}

/* ✅ Phase 2.7.5: 그룹화된 행 색상 (우선순위 강화) */
/* ✅ Phase 2.7.7: editable-cell, 셀 선택 스타일은 그룹 색상보다 우선하도록 제외 */
/* ✅ Phase 2.7.12: :not(:hover) 추가 - Row Hover 스타일 우선순위 확보 */
/* ✅ Phase B-1: :not(:is(...)) 단일 셀렉터로 축소 (8× :not() → 1×) */
/* ✅ Phase B-5: 그룹 컬러 CSS 변수 정의 */
:root {
    --group-1-bg: rgba(255, 230, 230, 1);
    --group-2-bg: rgba(230, 255, 230, 1);
    --group-3-bg: rgba(230, 230, 255, 1);
    --group-4-bg: rgba(255, 255, 230, 1);
    --group-5-bg: rgba(255, 230, 255, 1);
    --group-6-bg: rgba(230, 255, 255, 1);
    --group-7-bg: rgba(255, 240, 230, 1);
    --group-8-bg: rgba(240, 230, 255, 1);
}

/* 전체 행 배경 (행 전체 + 우선순위 높은 스타일 제외한 모든 셀) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-1:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-1:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: var(--group-1-bg) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-2:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-2:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: var(--group-2-bg) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-3:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-3:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: var(--group-3-bg) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-4:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-4:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: var(--group-4-bg) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-5:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-5:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: var(--group-5-bg) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-6:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-6:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: var(--group-6-bg) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-7:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-7:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: var(--group-7-bg) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-8:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.group-8:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: var(--group-8-bg) !important;
}

/* ===================================================================== */
/* ✅ Phase 3.34: 수정 행 스타일 (플레이오토 동기화 추적) */
/* ===================================================================== */
/* 수정된 행: 연한 노란색 배경 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified {
    background-color: #fff3cd !important;
}

/* 수정된 행 호버: 진한 노란색 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified:hover {
    background-color: #ffe69c !important;
}

/* ✅ Phase B-1: 수정된 행 내 셀 배경색 유지 (그룹 스타일 제외 셀) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: #fff3cd !important;
}

/* 수정된 행 내 셀 호버 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified:hover .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: #ffe69c !important;
}

/* ✅ Phase 3.34e-fix28: 그룹 스타일과 row-modified 조합 (specificity 맞춤) */
/* 그룹 1~8 + row-modified: :not(:hover) 추가로 그룹 스타일과 동일 specificity 확보 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-1:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-2:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-3:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-4:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-5:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-6:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-7:not(:hover),
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-8:not(:hover) {
    background-color: #fff3cd !important;
}

/* 그룹 1~8 + row-modified 호버 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-1:hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-2:hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-3:hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-4:hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-5:hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-6:hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-7:hover,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified.group-8:hover {
    background-color: #ffe69c !important;
}

/* ✅ Phase B-1: 그룹 1~8 + row-modified 셀 배경색 (:not(:is(...)) 축소) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-modified[class*="group-"]:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: #fff3cd !important;
}

/* ===================================================================== */
/* \u2705 Phase 3.66: \uc6d0\uac00 \ubcc0\uacbd \ud589 \uc2a4\ud0c0\uc77c (cost_change != 0) */
/* ===================================================================== */
/* \uc6d0\uac00 \ubcc0\uacbd\ub41c \ud589: \uc5f0\ud55c \ud30c\ub780\uc0c9 \ubc30\uacbd */
/* ===================================================================== */
/* 품절/판매중지/일시품절 행: 배경 + 텍스트 흐리게로 비활성 상태 구분 */
/* ===================================================================== */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-dimmed {
    background-color: #ebebeb !important;
    color: #999 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-dimmed:hover {
    background-color: #e0e0e0 !important;
    color: #888 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-dimmed .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: #ebebeb !important;
    color: #999 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-dimmed:hover .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, [tabulator-field="exp_profit_rt"], [tabulator-field="exp_profit"], [tabulator-field="chg_prod_price"], .highlight-key-column)) {
    background-color: #e0e0e0 !important;
    color: #888 !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-cost-changed {
    background-color: #e3f2fd !important;
}

/* \uc6d0\uac00 \ubcc0\uacbd\ub41c \ud589 \ud638\ubc84: \uc9c4\ud55c \ud30c\ub780\uc0c9 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-cost-changed:hover {
    background-color: #bbdefb !important;
}

/* Phase B-1: \uc6d0\uac00 \ubcc0\uacbd\ub41c \ud589 \ub0b4 \uc140 \ubc30\uacbd\uc0c9 \uc720\uc9c0 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-cost-changed .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, .highlight-key-column)) {
    background-color: #e3f2fd !important;
}

/* \uc6d0\uac00 \ubcc0\uacbd\ub41c \ud589 \ub0b4 \uc140 \ud638\ubc84 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-cost-changed:hover .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, .highlight-key-column)) {
    background-color: #bbdefb !important;
}

/* \uadf8\ub8f9 1~8 + row-cost-changed \uc870\ud569 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-cost-changed[class*="group-"]:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, .highlight-key-column)) {
    background-color: #e3f2fd !important;
}

/* ===================================================================== */
/* 업체지정 행 하이라이트 (vendor designation)                             */
/* ===================================================================== */

/* 업체만 지정 (designated_vendor=true, price_locked=false) - 연한 주황 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-track {
    background-color: #fff3e0 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-track:hover {
    background-color: #ffe0b2 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-track .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, .highlight-key-column)) {
    background-color: #fff3e0 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-track:hover .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, .highlight-key-column)) {
    background-color: #ffe0b2 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-track[class*="group-"]:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, .highlight-key-column)) {
    background-color: #fff3e0 !important;
}

/* 업체+가격 고정 (designated_vendor=true, price_locked=true) - 연한 보라 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-locked {
    background-color: #f3e5f5 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-locked:hover {
    background-color: #e1bee7 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-locked .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, .highlight-key-column)) {
    background-color: #f3e5f5 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-locked:hover .tabulator-cell:not(:is(.selected-cell, .multi-selected, .column-selected, .highlight-key-column)) {
    background-color: #e1bee7 !important;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.row-vendor-locked[class*="group-"]:not(:hover) .tabulator-cell:not(:is(.selected-cell, .multi-selected, .row-selected, .column-selected, .highlight-key-column)) {
    background-color: #f3e5f5 !important;
}

/* ===================================================================== */
/* ✅ Phase 2.7.5: 셀 선택 스타일 우선순위 강화 (그룹 색상보다 위에 표시) */
/* ===================================================================== */
/* 그룹 색상과 동일한 specificity로 정의하되, 나중에 선언되어 우선순위 확보 */

/* 선택된 셀 (활성 셀) - 그룹 행에서도 우선 표시 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.selected-cell {
    background-color: rgba(0, 123, 255, 0.1) !important;
    /* Row/Column과 동일한 Light Blue */
    color: inherit !important;
    /* 텍스트 색상 유지 (Black) */
    outline: 3px solid #007bff !important;
    /* Row(2px)보다 두꺼운 3px 파란색 테두리 */
    outline-offset: -3px !important;
    position: relative;
    z-index: 1000 !important;
}

/* 다중 셀 선택 - 그룹 행에서도 우선 표시 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.multi-selected {
    background-color: rgba(0, 123, 255, 0.1) !important;
    /* 통일된 배경색 */
    color: inherit !important;
    border: 1px solid #007bff !important;
    /* 다중 선택은 얇은 테두리 */
    position: relative;
    z-index: 999 !important;
}

/* ✅ Phase 2.7.7: 행 선택 스타일 제거 (Shift+Space를 체크박스 시스템으로 통합) */
/* .row-selected 클래스는 더 이상 사용하지 않음 - .tabulator-selected로 통합 */

/* ✅ Phase 3.14: 열 선택 (Ctrl+Space) - 행 선택과 스타일 통일 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.column-selected {
    background-color: rgba(0, 123, 255, 0.1) !important;
    border: 2px solid #007bff !important;
    position: relative;
    z-index: 997 !important;
}

/* 수정 불가 셀 - 우측 상단 삼각형 (읽기 전용 표시) */
.tabulator-cell:not(.editable-cell):not(.tabulator-frozen):not([tabulator-field="memo"]):not([tabulator-field="price_history"])::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 0;
    /* 우측 상단 삼각형 - 회색 (읽기 전용) */
    border-color: transparent #bbb transparent transparent;
    z-index: 1001;
}

/* 편집 가능 셀 - hover 시 연한 배경 (수정 가능 힌트 유지) */
.tabulator-cell.editable-cell:not([tabulator-field="memo"]):not([tabulator-field="price_history"]):hover {
    background-color: rgba(255, 193, 7, 0.05) !important;
    /* 5% 투명도 노랑 배경 */
}

/* ✅ Phase 2.7.7: Frozen 컬럼 (체크박스, memo, price_history) 최우선 표시 */
/* 셀 선택, 행/열 선택보다 위에 표시되도록 z-index 최고값 부여 */
.tabulator-cell.tabulator-frozen,
.tabulator-cell[tabulator-field="memo"],
.tabulator-cell[tabulator-field="price_history"] {
    position: relative;
    z-index: 2000 !important;
}

/* ⚠️ Phase 2.7.5: 아래 스타일은 위쪽(Line 497-535)에서 더 높은 specificity로 재정의됨 */
/* 선택된 셀, 다중 선택, 행 선택, 열 선택 스타일은 모두 위에서 처리 */

/* 수익률 색상 */
.profit-positive {
    color: #28a745;
    font-weight: bold;
}

.profit-negative {
    color: #dc3545;
    font-weight: bold;
}

/* 상품 상태 색상 */
.status-active {
    color: #28a745;
}

.status-soldout {
    color: #ff9800;
}

.status-discontinued {
    color: #dc3545;
}

/* 링크 스타일 */
.product-link {
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

.product-link:hover {
    text-decoration: underline;
}

/* Tabulator Footer 고정 */
.tabulator-footer {
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border-light);
    padding: var(--spacing-md);
    position: relative;
    z-index: 10;
    /* ✅ Phase 2.9.6: 드롭다운이 다른 요소 위에 표시되도록 */
}

/* ✅ Phase 2.9.6: 페이지 크기 선택 드롭다운 수정 */
.tabulator-page-size {
    position: relative;
    z-index: 10000 !important;
    /* 드롭다운이 최상위에 표시되도록 (frozen 컬럼 2000보다 높게) */
}

.tabulator-page-size select {
    cursor: pointer;
    pointer-events: auto !important;
    /* 클릭 이벤트 확실히 작동 */
}

/* Footer 좌측 컨테이너 */
.footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Footer 버튼 스타일 (Phase 2.9) */
.tabulator-footer-contents .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    /* Phase 2.9.21: transition 제거하여 Footer 점프 현상 완화 */
}

.tabulator-footer-contents .btn-primary {
    background-color: #007bff;
    color: white;
}

.tabulator-footer-contents .btn-primary:hover {
    background-color: #0056b3;
}

.tabulator-footer-contents .btn-secondary {
    background-color: #6c757d;
    color: white;
}

.tabulator-footer-contents .btn-secondary:hover {
    background-color: #545b62;
}

.tabulator-footer-contents .btn-danger {
    background-color: #dc3545;
    color: white;
}

.tabulator-footer-contents .btn-danger:hover {
    background-color: #c82333;
}

/* ✅ Phase 3.20: Footer용 btn-success, btn-info 추가 */
.tabulator-footer-contents .btn-success {
    background-color: #28a745;
    color: white;
}

.tabulator-footer-contents .btn-success:hover {
    background-color: #218838;
}

.tabulator-footer-contents .btn-info {
    background-color: #17a2b8;
    color: white;
}

.tabulator-footer-contents .btn-info:hover {
    background-color: #138496;
}

/* status-bar 비어있을 때 높이 조정 */
.status-bar:empty,
.status-bar:has(> :only-child:empty) {
    padding: var(--spacing-sm);
    min-height: 20px;
}

/* 정렬 화살표 숨기기 (Phase 2.9) */
.hide-sort-arrows .tabulator-col-sorter {
    display: none !important;
}

/* 정렬 화살표 숨길 때 공간도 제거 */
.hide-sort-arrows .tabulator-col-content {
    padding-right: 4px !important;
    /* 기본 패딩만 유지 */
}

.hide-sort-arrows .tabulator-col-title {
    padding-right: 0 !important;
    /* 타이틀 우측 패딩 제거 */
}

/* ===================================================================== */
/* ✅ Phase 2.7.9: 조건부 서식 (예상 수익률) - 셀 재렌더링 대응 */
/* ===================================================================== */

/* 조건부 서식 셀은 그룹 스타일보다 우선 (z-index로 계층 확보) */
.tabulator-cell[tabulator-field="exp_profit_rt"] {
    position: relative;
    z-index: 998 !important;
}

/* 음수: 진한 빨강 (#b02030) */
.profit-rt-negative {
    background-color: #b02030 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* 0~5%: 빨강 (#dc3545) */
.profit-rt-low {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* 5~10%: 빨강→노랑 그라데이션 (인라인 스타일로 배경/텍스트 색상 동적 적용) */
.profit-rt-mid-low {
    font-weight: 600 !important;
    /* background-color, color는 formatter에서 인라인 스타일로 적용 */
}

/* 10~20%: 노랑→초록 그라데이션 (인라인 스타일로 배경 색상 동적 적용) */
.profit-rt-mid-high {
    font-weight: 600 !important;
    color: #333333 !important;
    /* background-color는 formatter에서 인라인 스타일로 적용 */
}

/* 20%+: 초록 (#28a745) */
.profit-rt-high {
    background-color: #28a745 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* =========================== */
/* 핵심 컬럼 강조 (Phase 2.8.1) */
/* =========================== */

/* 예상 수익, 변경 판매가 강조 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.highlight-key-column:not(.selected-cell):not(.multi-selected):not(.column-selected) {
    background-color: #e0f7fa !important;
    border: 2px solid #00acc1 !important;
    font-weight: 700 !important;
    position: relative;
    z-index: 998 !important;
    /* exp_profit_rt와 동등, (행/열 선택 999) < 셀 선택 (1000)보다 낮음 */
}

/* 필드별 z-index 확보 (레이어링) */
.tabulator-cell[tabulator-field="exp_profit"],
.tabulator-cell[tabulator-field="chg_prod_price"] {
    position: relative;
    z-index: 998 !important;
}

/* ===== 크롤링 진행바 pulse 애니메이션 (Phase 3.51) ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===== Phase D-1: Skeleton Loading UI ===== */
.table-skeleton {
    position: absolute;
    inset: 0;
    background: var(--bg-primary, #fff);
    z-index: 10;
    padding: 10px 6px;
    overflow: hidden;
    pointer-events: none;
}
.skeleton-header {
    display: flex;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 4px;
}
.skeleton-header .skeleton-cell {
    height: 28px;
    background: #d6d8db;
    background-image: none;
    animation: none;
}
.skeleton-row {
    display: flex;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid #f0f0f0;
}
.skeleton-cell {
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    border-radius: 3px;
    height: 22px;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-cell.w-xs  { flex: 0 0 50px; }
.skeleton-cell.w-sm  { flex: 0 0 80px; }
.skeleton-cell.w-md  { flex: 0 0 120px; }
.skeleton-cell.w-lg  { flex: 0 0 200px; }
.skeleton-cell.w-xl  { flex: 1 1 280px; }
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.table-skeleton.fade-out {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* =========================== */
/* 행사 종료 행 스타일 (D-day) */
/* =========================== */
.tabulator-row.event-expired {
    background-color: #f0f0f0 !important;
    color: #999 !important;
    opacity: 0.7;
}
.tabulator-row.event-expired .tabulator-cell {
    color: #999 !important;
}
.tabulator-row.event-expired:hover {
    background-color: #e8e8e8 !important;
}