@ninebone/datagrid 0.0.0-stage → 0.0.4

package/dist/css/nine-table.css

@@ -0,0 +1,1713 @@
+
+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;
+    }
+}
+
+