@ninebone/datagrid 0.0.6 → 0.0.7

package/dist/css/nine-table.css

@@ -1,1713 +0,0 @@
-
-cell-button {
-    --cell-button-border: 1px solid #d1d5db;
-    --cell-button-color: #1f2937;
-    --cell-button-background: #f3f4f6;
-
-    --cell-button-hover-border: 1px solid #d1d5db;
-    --cell-button-hover-color: #1f2937;
-    --cell-button-hover-background: #f3f4f6;
-    --cell-button-active-border: 1px solid #d1d5db;
-    --cell-button-active-color: #1f2937;
-    --cell-button-active-background: #f3f4f6;
-
-    display: block;
-    position: absolute;
-    inset: 0; /* top: 0, right: 0, bottom: 0, left: 0 */
-    padding: 3px 4px;
-
-    button {
-        width: 100%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 4px;
-        border: var(--cell-button-border);
-        color: var(--cell-button-color);
-        background: var(--cell-button-background);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-    button:hover {
-        border: var(--cell-button-hover-border);
-        color: var(--cell-button-hover-color);
-        background: var(--cell-button-hover-background);
-    }
-    button:active {
-        border: var(--cell-button-active-border);
-        color: var(--cell-button-active-color);
-        background: var(--cell-button-active-background);
-    }
-}
-
-cell-checkbox {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-
-    label {
-        display: inline-flex;
-        align-items: center;
-        user-select: none;
-    }
-    input[type="checkbox"] {
-        margin-left: 4px;
-        margin-right: 4px;
-    }
-}
-
-
-.CELL-CHECKBOX {
-    cell-checkbox {
-        justify-content: center;
-    }
-    label {
-        display: flex;
-    }
-    input {
-        background-color: #ffffff;
-    }
-}
-.CELL-CHECKBOX[text-align='left'] {
-    cell-checkbox {
-        justify-content: flex-start;
-    }
-}
-.CELL-CHECKBOX[text-align='center'] {
-    cell-checkbox {
-        justify-content: center;
-    }
-}
-.CELL-CHECKBOX[text-align='right'] {
-    cell-checkbox {
-        justify-content: flex-end;
-    }
-    label {
-        flex-direction: row-reverse;
-    }
-}
-
-
-cell-combo {
-    --cell-combo-button-border-color: #eee;
-    --cell-combo-button-bg-color: #f9f9f9;
-
-    button.btn1 {
-        width: calc(100% - 24px);
-        border: 1px solid var(--cell-combo-button-border-color);
-        border-right: none;
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-        text-align: left;
-        background-color: white;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding: 0 4px;
-        color: #000;
-    }
-    button.btn2 {
-        padding: 3px;
-        width: 24px;
-        border: 1px solid var(--cell-combo-button-border-color);
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-        background-color: var(--cell-combo-button-bg-color);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #333;
-    }
-    button.btn2:after {
-        content: "";
-        border-top: 0.3em solid;
-        border-right: 0.3em solid transparent;
-        border-bottom: 0;
-        border-left: 0.3em solid transparent;
-    }
-}
-
-
-
-cell-combo-panel {
-    z-index: 2;
-    position: absolute;
-    width: 250px;
-    height: 250px;
-    border: 1px solid #999;
-    background-color: white;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    display: none;
-    flex-direction: column;
-    padding: 0;
-    margin: 0;
-    resize: both;
-
-    .head {
-        display: none;
-        padding: 6px;
-        background: #f8f9fa;
-        border-bottom: 1px solid #e5e7eb;
-
-        input[type="text"] {
-            width: 100%;
-            height: 26px;
-            padding: 0 6px;
-            border: 1px solid #d1d5db;
-            border-radius: 3px;
-        }
-    }
-
-    .footer {
-        display: none;
-        height: 32px;
-        background: #f3f4f6;
-        border-top: 1px solid #e5e7eb;
-        align-items: center;
-        padding: 0 8px;
-
-        label {
-            user-select: none;
-        }
-
-        button {
-            height: 22px;
-            padding: 0 12px;
-            background: #2563eb;
-            color: white;
-            border: none;
-            border-radius: 3px;
-        }
-
-        button:hover {
-            background: #1d4ed8;
-        }
-    }
-
-    nine-table-simple {
-        width: 100%;
-        flex: 1;
-        border: none;
-    }
-}
-
-
-
-cell-combo-panel.active {
-    display: flex;
-}
-
-cell-combo-panel.expand {
-    .head {
-        display: flex;
-    }
-}
-
-cell-combo-panel.multi {
-    .footer {
-        display: flex;
-        justify-content: space-between;
-    }
-}
-
-
-
-cell-combo-panel.loading {
-    nine-table-simple {
-        visibility: hidden;
-    }
-}
-cell-combo-panel.loading::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: rgba(255, 255, 255, 0.3);
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-cell-combo-panel.loading::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 24px;
-    height: 24px;
-    margin: -12px 0 0 -12px;
-    border: 3px solid #e5e7eb;
-    border-top-color: #2563eb;
-    border-radius: 50%;
-    animation: combo-loading-spin 0.6s linear infinite;
-    z-index: 999999911;
-}
-@keyframes combo-loading-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-:host {
-    --cell-input-border-color: #eee;
-    --cell-input-bg: #fff;
-    --cell-input-color: #333;
-    --cell-input-readonly-bg: #fdfdfd;
-    --cell-input-btn-bg: #f9f9f9;
-}
-
-cell-input {
-    input {
-        position: relative;
-        user-select: auto;
-        width: 100%;
-        border: 1px solid var(--cell-input-border-color);
-        padding-left: 4px;
-        background: var(--cell-input-bg);
-        color: var(--cell-input-color);
-    }
-
-    input:read-only {
-        border-color: var(--cell-input-readonly-bg);
-        filter: brightness(97%);
-    }
-}
-
-cell-input-color {
-
-    input[type=color] {
-        width: 100%;
-        padding: 0px;
-        margin-left: unset;
-        border: 1px solid var(--cell-input-border-color);
-        border-right: none;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        background-color: transparent;
-    }
-
-    input[type=color]::-webkit-color-swatch {
-        border: 0;
-    }
-
-    input[type=color]::-webkit-color-swatch-wrapper {
-        padding: 1px;
-    }
-
-    button {
-        display: inline-flex;
-        width: 24px;
-        margin-right: unset;
-        border: 1px solid var(--cell-input-border-color);
-        background-color: var(--cell-input-btn-bg);
-        justify-content: center;
-        align-items: center;
-    }
-
-    button:after {
-        content: "";
-        border-top: 0.3em solid var(--cell-input-color);
-        border-right: 0.3em solid transparent;
-        border-bottom: 0;
-        border-left: 0.3em solid transparent;
-    }
-
-    input[type=color]:hover, button:hover {
-        filter: brightness(95%);
-    }
-}
-
-cell-input-date {
-
-    input {
-        position: relative;
-        margin: 0;
-        width: 100%;
-        padding: 0 4px;
-        border: 1px solid var(--cell-input-border-color);
-        background: var(--cell-input-bg);
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
-        background-repeat: no-repeat;
-        background-position: right 4px center;
-        background-size: 14px 16px;
-        color: var(--cell-input-color);
-    }
-
-    input:hover {
-        filter: brightness(95%);
-    }
-
-    input::before {
-        content: attr(data-placeholder);
-        position: absolute;
-        display: flex;
-        align-items: center;
-        width: calc(100% - 22px);
-        height: 100%;
-        left: 1px;
-        top: 1px;
-        pointer-events: none;
-    }
-
-    input.has-value::before, input:focus::before {
-        display: none;
-    }
-
-    input:focus {
-
-    }
-}
-
-cell-input-number {
-    input.border-left-none {
-        border-left: 0;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-    input.border-right-none {
-        border-right: 0;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    input {
-        position: relative;
-        user-select: auto;
-        width: 100%;
-        border: 1px solid var(--cell-input-border-color);
-        background: var(--cell-input-bg);
-        color: var(--cell-input-color);
-        text-align: right;
-    }
-
-    input:read-only {
-        border-color: var(--cell-input-readonly-bg);
-        filter: brightness(97%);
-    }
-}
-cell-radio {
-    height: 100%;
-    width: calc(100% - 8px);
-    display: flex;
-    align-items: center;
-    margin-left: 4px;
-    margin-right: 4px;
-
-    div {
-        display: flex;
-        flex-direction: row;
-    }
-
-    label {
-        display: flex;
-        align-items: center;
-        margin-right: 8px;
-        user-select: none;
-    }
-
-    label.disabled {
-        pointer-events: none;
-        opacity: 0.5;
-    }
-
-    span {
-        margin-left: 4px;
-    }
-}
-
-.CELL-RADIO[text-align='left'] {
-    cell-radio {
-        justify-content: flex-start;
-    }
-}
-.CELL-RADIO[text-align='center'] {
-    cell-radio {
-        justify-content: center;
-    }
-}
-.CELL-RADIO[text-align='right'] {
-    cell-radio {
-        justify-content: flex-end;
-    }
-}
-
-
-
-
-
-cell-renderer {          /* Custom element host layout */
-    display: block;
-    span.wrapper {
-        display: block;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;   /* 줄바꿈 방지 */
-    }
-}
-
-.CELL-RENDERER {      /* Parent cell hook */
-    text-align: left;
-}
-.CELL-RENDERER[text-align="center"] {
-    text-align: center;
-}
-.CELL-RENDERER[text-align="right"] {
-    text-align: right;
-}
-cell-row-indicator {
-    --row-indicator-prefix-size: 0.40rem;
-    --row-indicator-suffix-size: 0.55rem;
-    --row-indicator-sub-size: 0.40rem;
-    --row-indicator-sub-opacity: 0.2;
-    --row-indicator-status-size: 0.55rem;
-
-    display: block;
-    position: absolute; /* 💡 셀 전체를 강제로 꽉 채움 */
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    user-select: none;
-
-    .ng-row-main {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        overflow: hidden;
-        font-size: 10px;
-    }
-
-    .ng-row-prefix {
-        font-weight: normal;
-        font-size: var(--row-indicator-prefix-size);
-    }
-
-    .ng-row-suffix {
-        font-size: var(--row-indicator-suffix-size);
-    }
-
-    .ng-row-sub {
-        position: absolute;
-        right: 2px;
-        bottom: 1px;
-        font-size: var(--row-indicator-sub-size);
-        line-height: 1;
-        opacity: var(--row-indicator-sub-opacity);
-        pointer-events: none;
-    }
-
-    .ng-row-status {
-        position: absolute;
-        right: 2px;
-        top: 1px;
-        font-size: var(--row-indicator-status-size);
-        line-height: 1;
-        pointer-events: none;
-    }
-}
-:host {
-    --cell-selection-bg: rgba(37, 99, 235, 0.08);
-    --cell-selection-border-color: #2563eb;
-}
-
-tbody {
-    .selected {
-        background-color: var(--cell-selection-bg);
-    }
-
-    .selected-start {
-        background-color: transparent;
-    }
-
-    .selected-top    { border-top: 2px solid var(--cell-selection-border-color); }
-    .selected-bottom { border-bottom: 2px solid var(--cell-selection-border-color); }
-    .selected-left   { border-left: 2px solid var(--cell-selection-border-color); }
-    .selected-right  { border-right: 2px solid var(--cell-selection-border-color); }
-}
-nine-table-col-expand {
-    position: absolute;
-    right: 2px;
-    top: 2px;
-    width: 12px;
-    height: 12px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    z-index: 2;
-    pointer-events: auto;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%234b5563" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/></svg>');
-}
-
-nine-table-col-expand.expand {
-    right: 2px;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%234b5563" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5"/></svg>');
-}
-
-nine-table-col-expand.collapsed {
-    left: 50%;
-    right: auto;
-    transform: translate(-50%, 0);
-}
-
-
-tr.col-indicator-rowgroup {
-    th,td {
-        padding: 0;
-    }
-}
-
-.col-indicator-rowgroup.expand {
-    height: 20px;
-}
-.col-indicator-rowgroup.collapse {
-    height: 2px;
-}
-.col-indicator-rowgroup.expand th {
-    background-color: #eee;
-    border-right-color: #ccc;
-    border-top: 2px solid #666;
-}
-.col-indicator-rowgroup.collapse th {
-    background-color: #666;
-    border: none;
-}
-.col-indicator-rowgroup.collapse div {
-    display: unset;
-}
-.col-indicator-rowgroup.collapse div {
-    display: none;
-}
-.ng-col-mover-indi {
-    position: absolute;
-    width: 2px;
-    background-color: #2563eb;
-    display: none;
-    pointer-events: none;
-    z-index: 10020;
-}
-
-.ng-col-mover-indi::before {
-    content: '';
-    position: absolute;
-    top: -6px;
-    left: -4px;
-    width: 0;
-    height: 0;
-    border-top: 6px solid #2563eb;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-}
-
-.ng-col-mover-indi::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: -4px;
-    width: 0;
-    height: 0;
-    border-bottom: 6px solid #2563eb;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-}
-
-.ng-col-mover-grip {
-    position: absolute;
-    display: none;
-    pointer-events: none;
-    z-index: 10010;
-    background-color: rgba(37, 99, 235, 0.12);
-    border: none;
-    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
-    overflow: hidden;
-    backdrop-filter: blur(1px);
-    transition: background-color 0.15s ease, border-color 0.15s ease;
-
-    .grip-header-content {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 2;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    th, td {
-        user-select: none;
-        pointer-events: none;
-    }
-}
-
-
-.ng-col-mover-grip.invalid {
-    background-color: rgba(239, 68, 68, 0.12);
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
-
-    .grip-header-content {
-        border-bottom: 2px solid #ef4444;
-    }
-}
-
-
-thead {
-    .resizable-edge {
-        cursor: col-resize;
-    }
-}
-
-nine-table-col-resizer-panel {
-    --col-resizer-color: #2563eb;
-    --col-resizer-bg: rgba(37, 99, 235, 0.12);
-    --col-resizer-badge-bg: #1e40af;
-    --col-resizer-badge-color: #ffffff;
-
-    --col-resizer-tooltip-left: 0px;
-    --col-resizer-tooltip-width: 0px;
-
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-
-    .resizer-overlay {
-        position: absolute;
-        top: 0;
-        left: var(--col-resizer-tooltip-left, 0px);
-        width: var(--col-resizer-tooltip-width, 0px);
-        height: 100%;
-        background-color: var(--col-resizer-bg);
-        border-left: 1px dashed var(--col-resizer-color);
-        border-right: 2px solid var(--col-resizer-color);
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        padding-top: 8px;
-        pointer-events: none;
-        opacity: 1;
-        transition: opacity 0.15s ease-out;
-
-        .size-badge {
-            padding: 2px 8px;
-            font-size: 11px;
-            font-weight: 700;
-            color: var(--col-resizer-badge-color);
-            background-color: var(--col-resizer-badge-bg);
-            border-radius: 4px;
-            line-height: 14px;
-            white-space: nowrap;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-    }
-
-    .resizer-overlay.fade-out {
-        opacity: 0;
-    }
-}
-
-nine-table-col-resizer-panel.active {
-    display: block;
-}
-
-
-nine-table-filter-button {
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
-    width: 12px;
-    height: 12px;
-    z-index: 2;
-    cursor: pointer;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    display: inline-block;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill="%239ca3af" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/></svg>');
-}
-
-nine-table-filter-button.filtered {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill="%232563eb" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z"/></svg>');
-}
-
-
-nine-table-filter-panel {
-    z-index: 2;
-    position: absolute;
-    width: 250px;
-    height: 250px;
-    border: 1px solid #999;
-    background-color: white;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    display: none;
-    flex-direction: column;
-    padding: 0;
-    margin: 0;
-    font-size: 12px;
-    resize: both;
-
-    nine-table-simple {
-        width: 100%;
-        flex: 1;
-        border: none;
-    }
-
-    .search-box {
-        width: 100%;
-        height: 28px;
-        box-sizing: border-box;
-        padding: 0px 8px;
-        border: none;
-        border-bottom: 1px solid #e5e7eb;
-        border-radius: 0px;
-        outline: none;
-        font-size: 12px;
-        background: #fafafa;
-        color: #333;
-    }
-    .search-box:focus {
-        background: #ffffff;
-    }
-    .footer-section {
-        display: flex;
-        flex-direction: column;
-        padding: 4px 6px;
-        gap: 8px;
-        border-top: 1px solid #e5e7eb;
-        background: #f9fafb;
-        flex-shrink: 0;
-    }
-    .footer-btns {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 6px;
-    }
-    .footer-btns label {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        cursor: pointer;
-        user-select: none;
-    }
-    .btn-group {
-        display: flex;
-        gap: 4px;
-    }
-    button {
-        padding: 4px 14px;
-        border-radius: 4px;
-        border: 1px solid #d1d5db;
-        background: #ffffff;
-        cursor: pointer;
-        font-size: 11px;
-    }
-    button:hover {
-        background: #f3f4f6;
-    }
-    button#btnOk {
-        background: #2563eb;
-        color: white;
-        border: none;
-    }
-}
-nine-table-filter-panel.active {
-    display: flex;
-}
-
-nine-table-filter-panel.loading {
-    nine-table-simple {
-        visibility: hidden;
-    }
-}
-nine-table-filter-panel.loading::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: rgba(255, 255, 255, 0.3);
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-nine-table-filter-panel.loading::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 24px;
-    height: 24px;
-    margin: -12px 0 0 -12px;
-    border: 3px solid #e5e7eb;
-    border-top-color: #2563eb;
-    border-radius: 50%;
-    animation: filter-loading-spin 0.6s linear infinite;
-    z-index: 999999911;
-}
-
-@keyframes filter-loading-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-:host {
-    width: 100%;
-    height: 100%;
-}
-
-
-:host {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    overflow: hidden;
-
-    background: #fff;
-}
-
-:host([theme="simple"]) {
-    /* 1. 불필요한 패널 및 컴포넌트 숨기기 */
-    .ng-part-header, .ng-part-footer,
-    nine-table-toolbar,
-    nine-table-sheets-footer,
-    nine-table-vscrollbar,
-    nine-table-hscrollbar,
-    nine-table-sheet .ng-scroll-edge {
-        display: none;
-    }
-
-    .col-indicator-rowgroup {
-        display: none;
-    }
-
-    tr {
-        height: 32px;
-    }
-
-    /* 2. 💡 [핵심] 스크롤바용 우측 16px 빈 공간을 제거하고 1열(1fr)로 꽉 채우기 */
-    nine-table-sheet {
-        border: none;
-        overflow: hidden;
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr;
-    }
-
-    nine-table-sheet tr th,
-    nine-table-sheet tr td {
-        border: none;
-        padding: 0 8px;
-    }
-
-    /**
-    nine-table-sheet tr td {
-        text-align: left;
-    } */
-
-    /* 4. 브라우저 기본 네이티브 스크롤바를 콘텐츠 위에 자연스럽게 오버레이(Overlay) */
-    nine-table-sheet .ng-sheet-body {
-        overflow-y: auto;
-        overflow-x: hidden;
-        scrollbar-width: thin;
-        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-    }
-
-    nine-table-sheet .ng-sheet-body::-webkit-scrollbar {
-        display: block;
-        width: 6px;
-        height: 6px;
-    }
-
-    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-thumb {
-        background: rgba(0, 0, 0, 0.15);
-        border-radius: 3px;
-    }
-
-    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-thumb:hover {
-        background: rgba(0, 0, 0, 0.3);
-    }
-}
-
-/* 🎯 Toolbar 숨김 제어 */
-:host([theme="simple"]) nine-table-toolbar,
-:host([show-header="false"]) nine-table-toolbar {
-    display: none;
-}
-
-/* 🎯 Footer(StatusBar) 숨김 제어 (show-statusbar="false") */
-:host([theme="simple"]) nine-table-sheets-footer,
-:host([show-statusbar="false"]) nine-table-sheets-footer {
-    display: none;
-}
-
-:host([theme="simple"]) {
-    col[data-col="0"], th[data-col="0"], td[data-col="0"] {
-        display: none;
-    }
-    .ng-container-right {
-        display: none;
-    }
-    tr {
-        height: 26px;
-    }
-}
-
-:host(.loading) {
-    .ng-loading-bar {
-        display: block;
-    }
-}
-
-
-.ng-loading-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: rgba(255, 255, 255, 0.08); /* 은은한 화이트 트랙 배경 */
-    z-index: 10000;
-    display: none;
-    overflow: hidden;
-}
-
-/* 🎯 아주 좁고 쨍한 빛 조각 형태로 압축 */
-.ng-loading-bar::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 12%; /* 바의 전체 길이를 12%로 대폭 축소 */
-    background: linear-gradient(
-            90deg,
-            transparent 0%,
-            rgba(255, 255, 255, 0.4) 20%,
-            #ffffff 50%,
-            rgba(255, 255, 255, 0.4) 80%,
-            transparent 100%
-    );
-    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
-    animation: ng-loading-slide 0.9s ease-in-out infinite;
-}
-
-@keyframes ng-loading-slide {
-    0% {
-        transform: translateX(-150%);
-    }
-    100% {
-        transform: translateX(850%); /* 폭이 좁아진 만큼 이동 거리 확장 */
-    }
-}
-
-input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 14px;
-    height: 14px;
-    background-color: #ffffff; /* 미체크 시 배경 */
-    border: 1px solid #9ca3af;
-    border-radius: 3px;
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.15s ease, border-color 0.15s ease;
-}
-input[type="checkbox"]:checked {
-    background-color: #2563eb; /* 체크 시 파란색 배경 */
-    border-color: #2563eb;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-input[type="radio"] {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 14px;
-    height: 14px;
-    background-color: #ffffff;
-    border: 1px solid #9ca3af;
-    border-radius: 50%;
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-input[type="radio"]:checked {
-    background-image: url('data:image/svg+xml;utf8,<svg height="14" width="14" xmlns="http://www.w3.org/2000/svg"><circle r="3.5" cx="50%" cy="50%" fill="%232563eb" /></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
-}
-* {
-    outline: none;
-    box-sizing: border-box;
-    cursor: default;
-    font-size: 12px;
-}
-
-nine-table-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }
-nine-table-summary { display: none; width: 250px; flex-shrink: 0; border-right: 1px solid #e5e7eb; }
-nine-table-analysis { display: none; }
-nine-table-footer { display: none; }
-
-nine-table-sheets {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    position: relative;
-    background: #fff;
-
-    nine-table-sheets-body {
-        flex: 1;
-        overflow: hidden;
-        position: relative;
-        display: flex;
-        flex-direction: row;
-    }
-}
-
-cell-input, cell-input-number, cell-button, cell-input-color, cell-input-date, cell-combo {
-    position: absolute;
-    inset: 0;
-    padding: 2px 4px;
-    display: flex;
-
-    input, button {
-        height: 100%;
-    }
-}
-
-
-.empty-value {
-    color: #999;
-}
-
-
-nine-table-menu-panel {
-    .menu-wrapper {
-        background: #ffffff;
-        border: 1px solid #d1d5db;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        border-radius: 4px;
-        padding: 4px 0;
-        min-width: 150px;
-    }
-
-    ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    li {
-        position: relative;
-        padding: 6px 16px;
-        color: #374151;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    li:hover {
-        background-color: #f3f4f6;
-        color: #111827;
-    }
-
-    li.on::before {
-        content: '✓';
-        position: absolute;
-        left: 4px;
-        font-weight: bold;
-    }
-
-    li.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background: transparent !important;
-    }
-
-    li.ng-menu-separator {
-        height: 1px;
-        background: #e5e7eb;
-        margin: 4px 0;
-        padding: 0;
-    }
-
-    li.submenu::after {
-        content: '▶';
-        font-size: 9px;
-        margin-left: 8px;
-        color: #9ca3af;
-    }
-
-    .ng-menu-sublist {
-        display: none;
-        position: absolute;
-        top: -4px;
-        left: 100%;
-        background: #ffffff;
-        border: 1px solid #d1d5db;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        border-radius: 4px;
-        padding: 4px 0;
-        min-width: 140px;
-    }
-
-    li.submenu:hover > .ng-menu-sublist {
-        display: block;
-    }
-}
-:host {
-    --hscrollbar-height: 16px;
-    --vscrollbar-width: 16px;
-}
-
-.scroll-edge {
-    display: none; /* 평소에는 기본 숨김 */
-    grid-row: 2;
-    grid-column: 2;
-    width: var(--vscrollbar-width);
-    height: var(--hscrollbar-height);
-    background: #f3f4f6;
-    border-top: 1px solid #e5e7eb;
-    z-index: 10;
-}
-
-nine-table-hscrollbar {
-
-    --hscrollbar-background: #f9fafb;
-    --hscrollbar-border-top: 1px solid #e5e7eb;
-    --hscrollbar-button-background: #f3f4f6;
-    --hscrollbar-track-background: #f3f4f6;
-    --hscrollbar-thumb-background: #9ca3af;
-    --hscrollbar-thumb-hover-background: #6b7280;
-
-    display: none;
-    grid-row: 2;
-    grid-column: 1;
-    flex-direction: row;
-    height: var(--hscrollbar-height);
-    min-height: var(--hscrollbar-height);
-    background: var(--hscrollbar-background);
-    border-top: var(--hscrollbar-border-top);
-    z-index: 10;
-    overflow: hidden;
-    width: 100%;
-    user-select: none;
-    position: relative;
-
-    button {
-        width: var(--hscrollbar-height);
-        height: 100%;
-        background: var(--hscrollbar-button-background);
-        border: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        flex-shrink: 0;
-        z-index: 2;
-    }
-    button:disabled {
-        opacity: 0.4;
-    }
-
-    .scroll-icon {
-        width: 100%;
-        height: 100%;
-        background-repeat: no-repeat;
-        background-position: center;
-    }
-
-    .scroll-left .scroll-icon {
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill="none" stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 12L6 8l4-4"/></svg>');
-    }
-
-    .scroll-right .scroll-icon {
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill="none" stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 4l4 4-4 4"/></svg>');
-    }
-
-    .scroll-track {
-        flex: 1;
-        height: 100%;
-        position: relative;
-        background: var(--hscrollbar-track-background);
-        overflow: hidden;
-    }
-    .scroll-thumb {
-        position: absolute;
-        top: 2px;
-        bottom: 2px;
-        left: 0px;
-        background: var(--hscrollbar-thumb-background);
-        border-radius: 4px;
-        z-index: 1;
-    }
-    .scroll-thumb:hover {
-        background: var(--hscrollbar-thumb-hover-background);
-    }
-}
-
-nine-table-vscrollbar {
-
-    --vscrollbar-background: #f9fafb;
-    --vscrollbar-border-top: 2px solid #333;
-    --vscrollbar-button-background: #f3f4f6;
-    --vscrollbar-track-background: #f3f4f6;
-    --vscrollbar-thumb-background: #9ca3af;
-    --vscrollbar-thumb-hover-background: #6b7280;
-
-    display: none;
-    border-top: var(--vscrollbar-border-top);
-    grid-row: 1;
-    grid-column: 2;
-    width: var(--vscrollbar-width);
-    height: 100%;
-    z-index: 50;
-    flex-direction: column;
-    background: var(--vscrollbar-background);
-    user-select: none;
-    position: relative;
-
-    button {
-        height: var(--vscrollbar-width);
-        width: 100%;
-        background: var(--vscrollbar-button-background);
-        border: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        flex-shrink: 0;
-        z-index: 2;
-    }
-    button:disabled {
-        opacity: 0.4;
-    }
-
-    .scroll-icon {
-        width: 100%;
-        height: 100%;
-        background-repeat: no-repeat;
-        background-position: center;
-    }
-
-    .scroll-top .scroll-icon {
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill="none" stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 10l4-4 4 4"/></svg>');
-    }
-
-    .scroll-bottom .scroll-icon {
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill="none" stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6l4 4 4-4"/></svg>');
-    }
-
-    .scroll-track {
-        flex: 1;
-        width: 100%;
-        position: relative;
-        background: var(--vscrollbar-track-background);
-        overflow: hidden;
-    }
-    .scroll-thumb {
-        position: absolute;
-        left: 2px;
-        right: 2px;
-        top: 0px;
-        height: 30px;
-        background: var(--vscrollbar-thumb-background);
-        border-radius: 4px;
-        z-index: 1;
-    }
-    .scroll-thumb:hover {
-        background: var(--vscrollbar-thumb-hover-background);
-    }
-}
-
-
-/* --- 세로 스크롤바가 활성화되었을 때만 CSS로 2열 너비 확장 및 요소 표시 --- */
-nine-table-sheet.vscroll-visible {
-    grid-template-columns: 1fr var(--vscrollbar-width);
-
-    nine-table-vscrollbar {
-        display: flex;
-    }
-}
-
-/* --- 가로 스크롤바가 활성화되었을 때만 CSS로 행 높이 확장 및 요소 표시 --- */
-nine-table-sheet.hscroll-visible {
-    grid-template-rows: 1fr var(--hscrollbar-height);
-
-    nine-table-hscrollbar, .scroll-edge {
-        display: flex;
-    }
-}
-
-
-nine-table-sheet {
-    --sheet-bg: #ffffff;
-    --sheet-nodata-color: #9ca3af;
-    --sheet-fixed-brightness: 99%;
-
-    display: none;
-    grid-template-columns: 1fr 0;
-    grid-template-rows: 1fr 0;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background: var(--sheet-bg);
-    overflow: hidden;
-
-    .ng-sheet-body {
-        display: block;
-        flex: 1 1 auto;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        overflow-x: hidden;
-        position: relative;
-        scrollbar-width: none;
-        &::-webkit-scrollbar { display: none; height: 0px; width: 0px; }
-    }
-
-    .ng-sheet-body-content {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        position: sticky;
-    }
-
-    .ng-container-left, .ng-container-body, .ng-container-right {
-        flex-direction: column;
-        position: relative;
-        background: var(--sheet-bg);
-    }
-    .ng-container-body {
-        display: flex;
-    }
-    .ng-container-left, .ng-container-right {
-        border: none;
-        flex-shrink: 0;
-        overflow: hidden;
-        filter: brightness(var(--sheet-fixed-brightness));
-    }
-    .ng-container-body {
-        flex: 1;
-        overflow-x: auto;
-        overflow-y: hidden;
-        scrollbar-width: none;
-        &::-webkit-scrollbar { display: none; height: 0px; width: 0px; }
-    }
-
-    .nodata-overlay {
-        display: none;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--sheet-bg);
-        z-index: 20;
-        align-items: center;
-        justify-content: center;
-        color: var(--sheet-nodata-color);
-    }
-}
-
-nine-table-sheet.active {
-    display: grid;
-}
-
-
-
-
-nine-table-sheets-footer {
-    display: flex;
-    height: 26px;
-    --background: #f3f4f6;
-    border-top: 1px solid #e5e7eb;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 8px;
-    flex-shrink: 0;
-
-    .sheets-counter {
-        color: #6b7280;
-        padding-left: 12px;
-        flex-shrink: 0;
-
-        span#row-count {
-            font-weight: 700;
-        }
-    }
-
-
-
-    .nine-tab-bar {
-        display: flex;
-        align-items: flex-start;
-        gap: 2px;
-        overflow-x: auto;
-        flex: 1;
-        height: 100%;
-
-
-
-        nt-sheets-tab-item {
-            padding: 4px 12px;
-            color: #4b5563;
-            background: #f9fafb;
-            border: 1px solid #e5e7eb;
-            border-top: none;
-            border-radius: 0 0 3px 3px;
-            user-select: none;
-            height: 100%;
-            display: flex;
-            align-items: center;
-        }
-
-        nt-sheets-tab-item.active {
-            background: white;
-            color: #111827;
-            font-weight: 600;
-            border-bottom: 2px solid green;
-        }
-    }
-}
-
-
-.asc::after,
-.desc::after {
-    --sort-icon-size: 10px;
-
-    content: "";
-    display: inline-block;
-    width: var(--sort-icon-size);
-    height: var(--sort-icon-size);
-    flex-shrink: 0;
-    margin-left: 4px;
-    vertical-align: middle;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-}
-
-.asc::after {
-    --sort-icon-color: #2563eb;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill="%232563eb" d="M8 3L3 11h10L8 3z"/></svg>');
-}
-
-.desc::after {
-    --sort-icon-color: #dc2626;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill="%23dc2626" d="M8 13L3 5h10l-5 8z"/></svg>');
-}
-table {
-    --table-th-bg: #f9fafb;
-    --table-th-color: #111827;
-    --table-td-bg: #fff;
-    --table-td-color: #111827;
-    --table-disabled-bg: #f0f0f0;
-    --th-border-left: none;
-    --th-border-top: none;
-    --th-border-right: 1px solid #e5e7eb;
-    --th-border-bottom: 1px solid #e5e7eb;
-    --td-border-left: none;
-    --tD-border-top: none;
-    --td-border-right: 1px solid #e5e7eb;
-    --td-border-bottom: 1px solid #e5e7eb;
-
-
-    border-collapse: separate;
-    border-spacing: 0;
-    width: auto;
-    min-width: 100%;
-    table-layout: fixed;
-}
-
-nine-table-sheet[auto-fit-col="true"] table {
-    width: 100%;
-    min-width: 100%;
-}
-
-col {
-    width: attr(width px);
-}
-
-thead {
-    display: table-header-group;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-}
-
-tfoot {
-    display: table-footer-group;
-    position: sticky;
-    bottom: 0;
-    z-index: 10;
-}
-
-tbody {
-    position: relative;
-}
-
-tbody.foot {
-    height: 100vh;
-}
-
-thead tr {
-    height: 48px;
-}
-tbody tr {
-    height: 32px;
-}
-tfoot tr {
-    height: 32px;
-}
-
-tr.hover th, tr.hover td {
-    background-color: rgba(37, 99, 235, 0.06);
-}
-
-th, td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding: 0px 4px;
-    border-top: 1px solid transparent;
-    border-left: 1px solid transparent;
-    color: var(--table-td-color);
-    position: relative;
-}
-
-th {
-    border-left: var(--th-border-left);
-    border-top: var(--th-border-top);
-    border-right: var(--th-border-right);
-    border-bottom: var(--th-border-bottom);
-    background: var(--table-th-bg);
-    color: var(--table-th-color);
-    font-weight: 600;
-    user-select: none;
-}
-
-td {
-    border-left: var(--td-border-left);
-    border-top: var(--td-border-top);
-    border-right: var(--td-border-right);
-    border-bottom: var(--td-border-bottom);
-    background: var(--table-td-bg);
-    color: var(--table-td-color);
-}
-
-td.invalid::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 0;
-    height: 0;
-    border-top: 2px solid red;
-    border-right: 2px solid red;
-    border-bottom: 2px solid transparent;
-    border-left: 2px solid transparent;
-    z-index: 1;
-    pointer-events: none;
-}
-
-td[disabled="true"] {
-    input, button {
-        background: var(--table-disabled-bg);
-        opacity: 0.5;
-        pointer-events: none;
-    }
-}
-
-td[text-align="left"] {
-    input {
-        text-align: left;
-    }
-}
-td[text-align="right"] {
-    input {
-        text-align: right;
-    }
-}
-td[text-align="center"] {
-    input {
-        text-align: center;
-    }
-}
-
-nine-table-toolbar {
-    --display: flex;
-    display: none;
-    align-items: center;
-    justify-content: space-between;
-    height: 40px;
-    padding: 0 12px;
-    --border-bottom: 1px solid #e5e7eb;
-    background: #ffffff;
-    user-select: none;
-    flex-shrink: 0;
-
-
-    .ng-toolbar-left {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-    .ng-toolbar-title {
-        font-size: 13px;
-        font-weight: 600;
-        color: #111827;
-    }
-    .ng-toolbar-menu-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: none;
-        border: none;
-        padding: 4px;
-        border-radius: 4px;
-    }
-    .ng-toolbar-menu-btn:hover {
-        background-color: #f3f4f6;
-    }
-    .ng-toolbar-custom {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-    }
-}
-
-:host([theme="simple"]) nine-table-toolbar,
-:host([show-header="false"]) nine-table-toolbar {
-    display: none;
-
-    .ng-toolbar-menu-btn {
-        display: none;
-    }
-}
-
-