/* ============================================================================
   override.grid.css — Tn.Web.Grid 전용 override 모음
   ----------------------------------------------------------------------------
   2026-04-22: override.css 에서 그리드 관련 룰만 추출.
   Tomas (classic ASP.NET MVC, net48) 포팅에 필요해서 분리.
   - F/W (Core.Web.Platform): override.css 가 여전히 전체를 포함하므로
     이 파일은 디스크에만 두고 _Layout 에서 로드하지 않는다 (중복 방지).
     향후 override.css 에서 제거하면서 _Layout 에 추가 예정.
   - Tomas: /App/Content/override.grid.css 로 동일 본 배치, _Layout 에서 로드.
   ============================================================================ */

.grid-body td input.hasDatepicker {
    cursor: pointer;
}


.grid-state-filter > a.tag.is-light > span.icon {
    display: none;
}

/* 빈 그리드 메시지 — table 은 항상 렌더(행추가 가능)하고, 메시지는 grid-item-right 위 오버레이.
   grid-item-right 가 position:absolute 라 inset:0 으로 보이는 영역을 채워 가운데 정렬된다(table 폭·가로 스크롤 무관).
   행이 하나라도 추가되면 :has 로 자동으로 사라진다(빈 편집 그리드 행추가 대응).
   2026-06-11: 오버레이가 .grid-right(실제 스크롤 컨테이너, overflow:scroll) 전체를 덮어
   휠/드래그 이벤트를 가로채 좌우 스크롤이 막히고 하단 가로 스크롤바가 가려지는 문제
   → pointer-events:none 으로 이벤트 통과. z-index 는 그리드 바디 위에만 뜨면 충분하므로
   2 → 1 로 최소화 (grid-left 도 1 이지만 화면상 겹치지 않음). */
.grid-not-found {
    position: absolute;
    inset: 0;
    /* z-index: 2; */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.grid-item:has(tbody.item tr) .grid-not-found {
    display: none;
}


.grid-height-fixed .grid-header-right {
    overflow-y: scroll;
}


tr.hide {
    display: none;
}


.grid tbody.filter {
    display: none;
}


.grid-item table {
    will-change: transform;
    background-color: #fff;
}

.grid-header * {
    user-select: none;
}


.grid-group-zone .grid-column {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    height: 100%;
    min-width: 80px;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid var(--border-light-color);
    border-bottom: 3px solid var(--thead-border-bottom-color);
    background-color: var(--thead-bg-color);
    cursor: pointer;
    zoom: 0.9;
}

.grid-group-zone .grid-column .item {
    width: 100%;
    height: 100%;
    padding: 0 18px 0 8px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-group-zone .grid-column .item.grid-sort-asc::after,
.grid-group-zone .grid-column .item.grid-sort-desc::after {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    font-family: "Material Symbols Outlined";
    font-size: 14px;
    line-height: 1;
    color: var(--control-color);
}

.grid-group-zone .grid-column .item.grid-sort-asc::after {
    content: "arrow_drop_up";
}

.grid-group-zone .grid-column .item.grid-sort-desc::after {
    content: "arrow_drop_down";
}

.grid-group-zone .grid-column .filter {
    display: none;
}

.grid-column .icon .grid-sort-meta {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 12px;
    line-height: 1;
}

.grid-column .icon .grid-sort-meta.grid-sort-meta-use {
    display: flex;
}

.grid-column .icon .grid-sort-order {
    /*    font-size: 9px;
    font-weight: 700;
    position: absolute;
    top: -2px;
    z-index: 99999999;
    left: -50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 10px;
    height: 12px;
    background: #1e293b;
    border-radius: 0 0 6px 0;*/
    font-size: 9px;
    font-weight: 700;
    position: relative;
    top: -3px;
}

.grid-sort-meta {
    display: flex;
}

.grid-sort-direction {
    position: relative;
    top: 0px;
}

.grid-sort-meta.grid-subtotal-date-unit-use {
    cursor: pointer;
}

.grid-number-bucket-panel {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    width: 248px;
    padding: 12px;
    z-index: 9999;
    border: 1px solid #dbe2f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.grid-number-bucket-panel.on {
    display: block;
}

.grid-number-bucket-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.grid-number-bucket-group {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.grid-number-bucket-group.on {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.45);
}

.grid-number-bucket-group-select {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
}

.grid-number-bucket-slider,
.grid-number-bucket-step-editor,
.grid-number-bucket-group-help {
    display: none;
}

.grid-number-bucket-group.on .grid-number-bucket-slider {
    display: block;
}

.grid-number-bucket-group.on .grid-number-bucket-step-editor {
    display: flex;
}

.grid-number-bucket-group.on .grid-number-bucket-group-help {
    display: block;
}

.grid-number-bucket-group-radio {
    display: inline-flex;
    width: 16px;
    height: 16px;
    border: 1.5px solid #94a3b8;
    border-radius: 999px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
}

.grid-number-bucket-group.on .grid-number-bucket-group-radio {
    border-color: #2563eb;
}

.grid-number-bucket-group-radio::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: transparent;
}

.grid-number-bucket-group.on .grid-number-bucket-group-radio::after {
    background: #2563eb;
}

.grid-number-bucket-group-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.grid-number-bucket-slider {
    margin-top: 8px;
    width: 100%;
}

.grid-number-bucket-step-editor {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 9px;
    border: 1px solid #d7e2f2;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.92);
}

.grid-number-bucket-step-label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
}

.grid-number-bucket-step-input {
    width: 96px;
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    outline: none;
}

.grid-number-bucket-step-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
}

.grid-number-bucket-group-help {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.55;
    color: #64748b;
}

.grid-number-bucket-current {
    display: inline-flex;
    align-items: center;
    min-width: 28px;
    padding: 1px 7px;
    margin: 0 2px;
    border-radius: 999px;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    vertical-align: baseline;
}

.grid-number-bucket-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.grid-number-bucket-button {
    min-width: 58px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.grid-number-bucket-button.primary {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.grid-subtotal-date-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    margin-top: -2px;
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    line-height: 1;
}

/* 구간/단위 배지는 "설정 유무" 표시 — 중립 회색으로 보여 과도한 활성 느낌 방지.
   향후 소계/그룹 효과 유무에 따라 하이라이트가 필요하면 별도 modifier class 로 강조.
   이 class 는 헤더 .grid-config-indicator 내부 배지 + 팝업 설정 표시 read-only 에서 재사용. */
.grid-number-bucket-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    margin-top: -2px;
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    line-height: 1;
}

/* 구간/단위 설정 진입점 — 필터 아이콘 아래 세로 배치.
   설정 없음 → tune 아이콘만 표시, 설정 있음 → 배지 텍스트만 표시. */
.grid-filter {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1;
}

th.grid-column:has(.grid-config-indicator) .grid-filter {
    transform: translateY(4px);
}

/* filter_alt 아이콘의 16px 박스/패딩을 제거해 하단 tune/배지와 바짝 붙인다 (정렬 메타와 동일한 밀도). */
.grid-column .icon .grid-filter > .material-symbols-outlined {
    height: auto;
    padding-top: 0;
    line-height: 1;
}
.grid-config-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    position: relative;
    top: -4px;
}
.grid-config-indicator-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    line-height: 1;
    padding-top: 3px;
}
/* 아이콘/배지 전환은 single-child DOM 교체 방식 (interaction.sort.js applyConfigIndicator).
   display:none 토글은 더 이상 사용하지 않는다 (과거 "병기" 이슈의 원인). */

.grid.grid-total-use-on .grid-header th.grid-column[data-subtotal-break-use='Y'] .header-wrap.grid-sortable .item.grid-sort.grid-sort-asc,
.grid.grid-total-use-on .grid-header th.grid-column[data-subtotal-break-use='Y'] .header-wrap.grid-sortable .item.grid-sort.grid-sort-desc {
    box-shadow: inset 3px 0 0 rgba(201, 162, 39, 0.95);
}

.grid.grid-total-use-on .grid-header th.grid-column[data-subtotal-break-use='N'] .header-wrap.grid-sortable .item.grid-sort.grid-sort-asc,
.grid.grid-total-use-on .grid-header th.grid-column[data-subtotal-break-use='N'] .header-wrap.grid-sortable .item.grid-sort.grid-sort-desc {
    background-image: repeating-linear-gradient(to bottom, rgba(148, 163, 184, 0.85) 0 4px, transparent 4px 8px);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 3px calc(100% - 8px);
}

/* ── Column Indicator ── */

.grid-column-indicator-cell {
    height: 12px !important;
    padding: 0 2px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #475569;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    line-height: 12px !important;
    white-space: nowrap;
    user-select: none;
}

.grid-column-indicator-cell {
    position: relative;
}

.grid-indicator-letter {
    vertical-align: middle;
}

/* 행 인디케이터 × 컬럼 인디케이터 교차 셀(_Indi) = "모두 선택" 모퉁이.
   Excel 과 동일하게 클릭 시 전체 선택 (range.js onHeaderMousedown 참조). */
.grid-column-indicator-cell[data-id="_Indi"] {
    cursor: pointer;
}

.grid-indicator-filter {
    position: absolute;
    right: 2px;
    top: 1px;
    font-size: 12px !important;
    line-height: 12px !important;
    color: #475569;
    cursor: pointer;
}

.grid-indicator-filter:hover {
    color: #6366f1;
}

/* ── Side Panel (공통 레이아웃) ── */

main {
    position: relative;
}

main.side-panel-open {
    padding-right: 480px;
    transition: padding-right .18s ease;
}

.side-panel-layer {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

.side-panel-layer.active {
    display: block;
}

.side-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 24px rgba(15, 23, 42, 0.08);
    pointer-events: auto;
}

/* ── Side Panel: Analysis ── */

.grid-analysis-tab-button.on,
.grid-analysis-scope-button.on {
    border-color: #c7d2fe !important;
    background-color: #eef2ff !important;
    color: #4f46e5 !important;
    font-weight: 600;
}

/* 분석 패널 탭 레이아웃 복구 (두 가지 문제 동시 해결):
   1. `.tab-content > div.on { display: block }` 이 탭 내부 flex 컨텍스트를 깨는 문제
   2. `side-panel`이 position:absolute 기반이라 CSS height가 auto로 인식되어
      flex 자식이 content-based grow → tab-content가 부풀어 overflow 트리거 실패.
      (tw-h-0/tw-min-h-0은 Tailwind JIT에서 번들 누락되어 적용 안 됨)
*/
.side-panel-layer[data-panel="analysis"] > .side-panel > .tab-content,
.side-panel-layer[data-panel="analysis"] > .side-panel > .tab-content > div.on {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
}
.side-panel-layer[data-panel="analysis"] > .side-panel > .tab-content > div.on {
    display: flex;
    flex-direction: column;
    padding-top: 0;  /* framework 기본 0.75rem 취소 (자체 padding 사용) */
}
.side-panel-layer[data-panel="analysis"] .grid-analysis-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.grid-analysis-scope-button:disabled {
    opacity: 0.45;
    cursor: default !important;
    pointer-events: none;
}

/* ── Side Panel: Help ── */

.grid-help-panel {
    word-break: break-all;
}

.grid-help-section + .grid-help-section {
    border-top: 1px solid #e2e8f0;
}

.grid-help-topic.on > a,
.grid-help-topic a:hover {
    background-color: #f8fafc;
    color: #334155;
}

.grid-help-topic.visited > a {
    color: #6366f1;
}

.grid-help-topic.visited > a::after {
    content: " ✓";
    font-size: 11px;
    color: #a5b4fc;
}

.grid-help-section-highlight {
    background-color: #eef2ff;
    border-radius: 12px;
    transition: background-color .6s ease;
}

.grid-help-section-highlight .grid-help-section-toggle {
    color: #4f46e5;
}

/* ── Help Detail Content ── */

.grid-help-detail-section p {
    margin-bottom: 10px;
    line-height: 1.7;
}

.grid-help-sub-title {
    margin-top: 18px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.grid-help-table {
    width: 100%;
    margin-bottom: 12px;
    border-collapse: collapse;
    font-size: 13px;
}

.grid-help-table th {
    padding: 7px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #475569;
    text-align: left;
    white-space: nowrap;
}

.grid-help-table td {
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: top;
}

.grid-help-table td:first-child {
    white-space: nowrap;
    color: #1e293b;
    font-weight: 500;
}

.grid-help-table kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f1f5f9;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    line-height: 1.6;
    box-shadow: 0 1px 0 #cbd5e1;
}

.grid-help-tip {
    margin-top: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-left: 3px solid #818cf8;
    border-radius: 0 8px 8px 0;
    background: #eef2ff;
    font-size: 13px;
    line-height: 1.7;
    color: #3730a3;
}

.grid-subtotal-date-unit-menu {
    position: absolute;
    z-index: 9999;
    display: none;
    min-width: 92px;
    padding: 4px;
    border: 1px solid #d9dee8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.grid-subtotal-date-unit-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: #1f2937;
    font-size: 12px;
    text-align: left;
    border-radius: 6px;
}

.grid-subtotal-date-unit-item:hover {
    background: #f3f6fb;
}

.grid-subtotal-date-unit-item.on {
    background: #eef4ff;
    color: #1d4ed8;
    font-weight: 600;
}

.grid-subtotal-date-unit-check {
    visibility: hidden;
    font-size: 14px;
}

.grid-subtotal-date-unit-item.on .grid-subtotal-date-unit-check {
    visibility: visible;
}

.grid-setting-sort-clear span {
    font-size: 14px;
    color: #64748b;
}

body.is-grid-range-dragging {
    user-select: none;
}

body.is-grid-range-dragging .grid-item,
body.is-grid-range-dragging .grid-item * {
    user-select: none;
}

/* Range selection overlay (top/bottom/left/right) — cell 위에 absolute 로 띄움.
   Core.Web.Platform 의 grid.css 와 동일 색상 (--primary-dark: #6d28d9) 사용.
   Tomas 엔 그 CSS 변수 정의가 없어 hardcoded. */
div[class|="grid-range"] {
    position: absolute;
    display: block;
    background: #6d28d9;
    outline: none;
    pointer-events: auto;
}

/* Copy 마킹 점선 애니메이션 (Excel "marching ants").
   .is-dotted 는 background 를 linear-gradient 점선으로 덮어씀 → 위 실선 background override.
   keyframes 도 Tomas 에 별도 정의 필요. */
@keyframes linearmove-top {
    100% {
        background-position: 6px 0, -6px 100%;
    }
}

@keyframes linearmove-right {
    100% {
        background-position: 100% 6px, 6px 0;
    }
}

@keyframes linearmove-bottom {
    100% {
        background-position: -6px 100%, 6px 0;
    }
}

@keyframes linearmove-left {
    100% {
        background-position: 100% 6px, 6px 0;
    }
}

.grid-range-top.is-dotted {
    background: linear-gradient(90deg, #6d28d9 50%, transparent 50%) 0 0 / 6px 1px repeat-x;
    animation: linearmove-top 0.3s infinite;
}

    .grid-range-top.is-dotted.is-move {
        animation: linearmove-top 0.3s infinite;
    }

.grid-range-right.is-dotted {
    background: linear-gradient(0, #6d28d9 50%, transparent 50%) 100% 0 / 1px 6px repeat-y;
}

    .grid-range-right.is-dotted.is-move {
        animation: linearmove-right 0.3s infinite;
    }

.grid-range-bottom.is-dotted {
    background: linear-gradient(90deg, #6d28d9 50%, transparent 50%) 0 100% / 6px 1px repeat-x;
}

    .grid-range-bottom.is-dotted.is-move {
        animation: linearmove-bottom 0.3s infinite;
    }

.grid-range-left.is-dotted {
    background: linear-gradient(0, #6d28d9 50%, transparent 50%) 0 0 / 1px 6px repeat-y;
}

    .grid-range-left.is-dotted.is-move {
        animation: linearmove-left 0.3s infinite reverse;
    }

.grid-subtotal-row {
    background: #f8f4dc;
}

.grid-subtotal-row td {
    border-top: 1px solid #eadfb2;
    border-bottom: 1px solid #eadfb2;
}

.grid-subtotal-cell {
    background: transparent;
    font-weight: 600;
}

.grid-subtotal-cell-break {
    box-shadow: inset 3px 0 0 #c9a227;
}

.grid-subtotal-cell-label {
    color: #7a5b00;
}

.grid-subtotal-cell-value {
    background: #fff8df;
    color: #1f2937;
}

.grid-subtotal-cell-empty {
    background: rgba(248, 244, 220, 0.7);
}

.grid-subtotal-text {
    display: inline-block;
}

.grid-subtotal-break-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 100%;
}

.grid-subtotal-label-text {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.12);
    color: #7a5b00;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.grid-subtotal-value-text {
    font-weight: 700;
}

.grid-total-row {
    background: #f8fafc;
}

.grid-total-row td {
    border-top: 1px solid #dbe4f0;
}

.grid-total-type-row {
    background: #eef3f8;
}

.grid-total-type-row td {
    border-top: 1px solid #dbe4f0;
    border-bottom: 1px solid #dbe4f0;
}

.grid-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: #f8fafc;
    border-top: 1px solid #dbe4f0;
}

.grid-footer-right {
    width: 100%;
}

.grid-footer table {
    background: #f8fafc;
}

.grid-footer td {
    background: inherit;
}

.grid-total-cell {
    font-weight: 600;
}

.grid-total-cell-indicator {
    color: #475569;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.grid-total-cell-indicator.on {
    color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
    font-weight: 700;
}

.grid-total-cell-value {
    color: #0f172a;
}

.grid-total-text {
    display: inline-block;
}

.grid-total-type-cell {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}

.grid-total-type-cell-indicator {
    color: #334155;
}

.grid-total-type-select-all-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-total-type-select-all-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #475569;
    cursor: pointer;
}

.grid-total-type-select-all-button:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

.grid-total-type-select-all-button .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.grid-total-type-select-all {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
}

.grid-subtotal-cell-indicator {
    color: #7c5e10;
    font-weight: 700;
}

.grid-subtotal-indicator-text {
    display: inline-block;
    font-weight: 700;
}

.grid-total-type-cell-value {
    color: #0f172a;
}

.grid-total-type-text {
    display: inline-block;
    letter-spacing: 0.02em;
}

.grid-total-type-select {
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 0 20px 0 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #0f172a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.grid-total-type-select:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.16);
}

.grid-footer-right {
    overflow-x: hidden;
    overflow-y: scroll;
}
.grid-footer-right::-webkit-scrollbar { width: 8px !important; }

/* ──────────────────────────────────────────────────────────
   Grid range footer summary — 두 그룹 (range / stat) 시각 구분.
   JS: libraryGrid.controller.range.js updateSelectionSummaryText
   DOM: <div id="pFooterGridState">
           <span class="footer-grid-state-range">...</span>
           <span class="footer-grid-state-sep">‖</span>
           <span class="footer-grid-state-stat">...</span>
         </div>
   - range : 선택 좌표/크기 — 기본 텍스트 색
   - sep   : 두 그룹 구분자 — 색 옅게 + 좌우 간격
   - stat  : 집계값 — 보조 정보로 색을 살짝 흐리게 (사이드 패널이 주, footer 는 참고용)
   ────────────────────────────────────────────────────────── */
#pFooterGridState .footer-grid-state-sep {
    color: #cbd5e1;
    padding: 0 0.6rem;
    font-weight: 300;
}

#pFooterGridState .footer-grid-state-stat {
    color: #64748b;
}


/* ============================================================================
   Tomas 전용 override (신 F/W 에는 없는 블록)
   ----------------------------------------------------------------------------
   2026-04-23: Tomas 의 main.css / jquery-ui 계열이 grid.css 의 overflow 룰을
   덮어쓰면서 `.grid-header-right` 가 `overflow: visible` 로 최종 계산되는 문제.
   신 F/W 는 amata 번들 + grid.css 조합으로 이미 `overflow: hidden scroll` 이
   유효해 문제없음. 따라서 Tomas 에만 필요한 override.
   ============================================================================ */

/* ── 헤더-right 를 본문과 같은 스크롤 컨테이너로 고정 ──
   증상 해소:
   - 헤더가 스크롤되는 현상 (컨테이너 미고정 → 내부 table 이 박스 밖으로 흘러나옴)
   - 메뉴 열린 상태에서 좌우 스크롤 시 헤더 동기화 깨짐
   - settings 메뉴 오픈 시 헤더 오른쪽이 밀려 확장되는 현상 */
.grid .grid-header .grid-right.grid-header-right {
    position: static;       /* 신 F/W 와 동일. grid-body-command-settings 의 absolute 앵커를 상위 grid-header 로 올림 */
    overflow-x: hidden;     /* 가로 넘침 숨김 */
    overflow-y: scroll;     /* 본문과 세로 스크롤바 공간 맞추기 */
}

/* ── grid-body-command-settings 기준점 ──
   grid-header-right 가 static 이 되었으므로 absolute 는 한 단계 위 grid-header
   를 기준으로 하게 된다. grid-header 가 position:relative 여야 올바른 앵커. */
.grid .grid-header {
    position: relative;
}

.grid .grid-header .grid-body-command-settings {
    position: absolute;
    top: 0;
    right: 0;
    z-index: auto;          /* 기존 z-index:5 가 있으면 제거. 메뉴 드롭다운만 z-index 올리도록 역할 분리 */
}


/* ── GridMenu 드롭다운 포지셔닝 보정 (Tomas 전용) ──
   2026-04-23:
   GridMenu.cshtml 은 `tw-absolute tw-w-52 tw-z-10 tw-bg-white` 등
   tailwind 유틸 클래스로 드롭다운을 배치함. 신 F/W 의 amata.css 는
   tw-* 유틸 456개를 포함하지만 Tomas override.css 는 26개뿐 →
   Tomas 에서는 `.dropdown-animation` 이 기본 static 으로 렌더되어
   부모 `.grid-header-right` 의 너비를 밀어낸다.

   증상:
   - settings 메뉴 열면 헤더 오른쪽이 영역 벗어나서 펼쳐짐
   - 메뉴 열린 상태에서 좌우 스크롤 시 헤더 동기화 깨짐
     (메뉴가 부모 너비를 넘겨 scrollLeft 계산이 이상해짐)

   해결: .grid 스코프로 한정해 드롭다운에 absolute + 고정폭 + z-index 강제.
   다른 곳 (Tabbar 등) 의 dropdown-animation 에는 영향 없음.
   GridButton.cshtml 의 분석 드롭다운은 .dropdown > .dropdown-animation
   구조, GridMenu.cshtml 은 .grid-body-command-settings + .dropdown-animation
   형제 구조 — 두 경우 모두 커버. */
.grid .dropdown-animation {
    position: absolute !important;
    z-index: 10;
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* GridMenu (grid-body-command-settings 옆 형제 드롭다운) 고정폭 */
.grid .grid-body-command-settings + .dropdown-animation {
    width: 13rem;   /* tw-w-52 = 208px */
    top: 28px;
    right: 0;
}

/* GridButton 계열 (분석/필터 드롭다운) 은 width:max-content 인라인 스타일 유지,
   position 만 강제. */

.card-content {
    overflow-x: clip !important;        /* 가로 overflow → 가로 스크롤 트리거 차단 */
}


/* ── 그룹 헤더(band) 텍스트 중앙 정렬 ──
   2026-06-11: grid.css 의 flex 중앙 정렬 룰이 `.grid-column .item` 에만 걸려 있어
   하위 컬럼을 묶는 그룹 헤더(th.grid-column-band, 예: 매입처1)의 .item 은
   display:block + 콘텐츠 폭으로 줄어들어 셀 왼쪽에 붙는 문제
   (text-align:center 는 있으나 박스가 텍스트 폭만큼만 차지해 무효).
   grid.css 427 의 `.grid-column .item` 과 동일한 flex 중앙 정렬을 band 에도 적용. */
.grid-column-band .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 행을 더블클릭하면 상세가 새 탭에서 열리는 목록 — 클릭할 수 있다는 걸 커서로 알린다.
   해당 화면에서 dblclick 을 걸 때 grid.$.addClass("is-row-clickable") 로 표시한다.
   편집 그리드에는 붙이지 않는다 — 거기서 더블클릭은 셀 편집이라 의미가 다르다 */
.is-row-clickable tbody.item tr {
    cursor: pointer;
}
/* 눌러서 상태를 바꾸는 태그 — 스케줄러 일시정지/재개.
   설정으로 꺼둔 스케줄러는 이 클래스를 안 붙여 눌러도 반응이 없다는 걸 커서로 알린다 */
.tag.is-clickable {
    cursor: pointer;
}

.tag.is-clickable:hover {
    filter: brightness(0.92);
}

/* ══ 그리드 바로 위 툴바 한 줄 ═══════════════════════════════════════════════
   왼쪽에 건수(GridCount), 오른쪽에 화면 고유 버튼 + 그리드 공통 버튼(GridButton).
   어느 화면을 열어도 같은 자리·같은 높이여야 손이 기억한다.

   간격은 전부 여기서 잡는다 — 화면마다 ml-2/mr-3 을 붙이면 화면마다 달라진다 */
.grid-toolbar {
    margin-bottom: 0.5rem;
}

.grid-toolbar .level-left,
.grid-toolbar .level-right {
    gap: 0.5rem;
}

/* main.css 의 `.buttons:not(:last-child) { margin-bottom: 1rem }` 이 문제다 —
   화면 버튼 묶음 뒤에 GridButton 이 오면서 last-child 가 아니게 되고,
   그 1rem 이 가운데 정렬을 끌어내려 건수·공통버튼과 세로 중심이 어긋난다.
   한 줄짜리 툴바라 아래 여백은 전부 0 이 맞다 */
.grid-toolbar .buttons,
.grid-toolbar .buttons:not(:last-child) {
    margin-bottom: 0;
}

.grid-toolbar .buttons .button,
.grid-toolbar .buttons .button:not(:last-child) {
    margin-bottom: 0;
}

/* ── 건수: 12 / 340 — 앞이 필터 결과(지금 보는 수), 뒤가 전체 ── */
.grid-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #7a7a7a;
    white-space: nowrap;
}

.grid-count .grid-filter-count {
    font-weight: 600;
    color: #363636;
}

.grid-count .grid-count-sep {
    color: #dbdbdb;
}

/* ── 분석 버튼 + 드롭다운 토글: 둘을 하나로 붙여 보인다 ──
   .buttons.has-addons 를 못 쓴다 — 이 wrap 은 f/w 가 show()/toggle() 로 display 를
   직접 건드리는 요소라(.grid-command-aggregate-wrap) 레이아웃 클래스를 얹으면 서로 싸운다 */
.grid-command-aggregate-wrap {
    display: inline-flex;
    align-items: center;
}

.grid-command-aggregate {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.grid-command-aggregate-dropdown {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* 드롭다운 패널. override.grid.css 위쪽의 `.grid .dropdown-animation` 규칙은
   그리드 **안쪽** 메뉴(GridMenu)용이라 툴바(그리드 바깥)에는 안 걸린다 */
.grid-toolbar .dropdown-animation {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    margin-top: 0.25rem;
    width: max-content;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* f/w 가 비활성 버튼에 붙이는 유틸 (setActionButtonEnabled).
   amata.tw.css 를 안 물리는 앱이라 이 둘만 여기서 채운다 */
.tw-pointer-events-none {
    pointer-events: none;
}

.tw-opacity-50 {
    opacity: 0.5;
}