/*@import url('rxcontrols.ui.2024.01.css');*/


/* for all editor instances */
.monaco-editor-container {
    min-height: 500px;
    height: 100%;
}

    .monaco-editor-container .monaco-editor {
        padding-top: 20px;
    }


.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}


.autocomplete {
    position: relative;
    display: inline-block;
}



.autocomplete-items {
    background-color: var(--bs-body-bg);
    position: absolute;
    border: 1px solid rgba(var(--bs-gray-500-rgb), 0.8);
    z-index: 99;
    top: 100%;
    left: -1px;
    right: 0;
    overflow-y: scroll;
    height: auto;
    max-height: 180px;
    min-width: 130px;
}

    .autocomplete-items.bottom {
        top: initial;
        bottom: 100%;
    }


    .autocomplete-items div {
        font-size: 11.4px !important;
        padding: 5px 5px 5px 5px;
        cursor: pointer;
        border-left: 0px solid rgba(var(--bs-gray-400-rgb), 0.8);
        border-right: 1px solid rgba(var(--bs-gray-400-rgb), 0.8);
        border-bottom: 1px solid rgba(var(--bs-gray-400-rgb), 0.8);
        overflow: hidden;
        text-overflow: ellipsis;
        height: 30px;
    }

        .autocomplete-items div:first-child {
            border-top: 0px solid rgba(var(--bs-gray-400-rgb), 0.8);
        }

        .autocomplete-items div:last-child {
            border-bottom: 0px solid rgba(var(--bs-gray-400-rgb), 0.8);
        }
        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.autocomplete-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    background-color: var(--bg-white);
    border-bottom: 0px solid red; /* 포커스가 있을 때 강조 표시 */
}
    .autocomplete-container.autocomplete-tagify:disabled {
        background-color: rgba(0,0,0,0) !important;
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    }


    .autocomplete-container.autocomplete-tagify {
        border: 1px solid rgba(var(--bs-gray-300-rgb), 1);
        padding: 0px;
        min-height: 26px;
    }

    .autocomplete-container.autocomplete-selector {
        border: 1px solid rgba(var(--bs-gray-300-rgb), 1);
        padding: 0px;
        min-height: 26px;
    }

    .autocomplete-container .input-container {
        position: relative;
        width: 100%;
    }

    .autocomplete-container .autocomplete-input {
        width: 100%;
        padding: 8px;
        border: none;
        outline: none;
        color: var(--bs-dark); /* ksh 2025-04-07 다크모드 텍스트 검색 시*/
        background-color: #f3f3f3;
        border-radius: 4px;
        height: 26px; 
        font-family: 'Pretendard';
        font-size: 12px;
        font-weight: 400;
    }

        .autocomplete-container .autocomplete-input::placeholder {
/*            color: var(--bs-gray-500);*/
            color: var(--cds-text-placeholder, #a8a8a8);
            font-family: 'Pretendard';
            font-size: 12px;
            font-weight: 400;
        }

        .autocomplete-container .autocomplete-input:focus::placeholder {
            color: transparent;
        }

    .autocomplete-container.autocomplete-tagify .autocomplete-input {
        background-color: transparent;
    }

    .autocomplete-container.autocomplete-selector .autocomplete-input {
        background-color: transparent;
        height: 26px;
    }

        .autocomplete-container.autocomplete-selector .autocomplete-input:focus {
        }


    .autocomplete-container.autocomplete-multi-selector .input-container {
        background-color: transparent;
        top: 0;
        left: 0;
        border-bottom: 1px solid #efefef;
    }



    .autocomplete-container.autocomplete-single-selector .input-container {
        background-color: transparent;
        top: 0;
        left: 0;
    }

.selected-tags.single-line {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto; /* 가로 스크롤 가능하게 설정 */
}

.selected-tags.multi-line {
    display: flex;
    flex-direction: column; /* 태그를 수직으로 배치 */
    gap: 4px;
}

.autocomplete-list {
    position: absolute;
    width: 100%;
    border: 1px solid #ccc;
    background-color: var(--cds-rw-ctrl-bg) !important;
    max-height: 200px;
    overflow-y: auto;
    margin: 0 0 0 -3px;
    padding: 0;
    list-style-type: none;
    z-index: 1;
/*    font-family: 'Pretendard';*/
    font-size: 12px;
    /* min-width: 150px; */
}

    .autocomplete-list li {
        padding: 8px !important;
        height:32px;
        align-items:center;
        cursor: pointer;
/*        font-family: 'Pretendard';*/
        font-size: 12px;
        border-left: 2px solid transparent;
        background-color: var(--cds-rw-ctrl-bg) !important;
    }

        .autocomplete-list li.selected {
            /* 2025-04-07 ksh 선택된 항목 색 처리
                background-color: #fafafa;
            */
            background-color: var(--bs-gray-300);
            font-weight: bold; /* 선택된 항목의 글자를 굵게 표시 */
            border-left: 2px solid #000;
        }
        /*ksh 2025-08-20 hover 추가*/
        .autocomplete-list li:hover {
            background-color: var(--bs-gray-300);
            font-weight: bold; /* 선택된 항목의 글자를 굵게 표시 */
            border-left: 2px solid #000;
        }

.autocomplete-container .tag {
/*    font-family: 'Pretendard';*/
    font-size: 10px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-weight: 500;
    background-color: #ebecec;
    border-radius: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 24px;
    color: var(--bs-text-dark) !important;
    white-space: nowrap; /* 한 줄로 유지하고 줄 바꿈 방지 */
}


.autocomplete-container.autocomplete-selector .tag {
/*    font-family: 'Pretendard';*/
    font-size: 10px;
    display: flex;
    background: red;
    align-items: center;
    padding: 4px 8px;
    font-weight: 500;
    background-color: transparent;
    border-radius: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 26px;
    white-space: nowrap; /* 한 줄로 유지하고 줄 바꿈 방지 */
}



.autocomplete-container .input-container .tag:first-child {
}


.autocomplete-container .tag-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.autocomplete-container .tag button {
    margin-left: 4px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #000;
}


.autocomplete-container.autocomplete-tagify {
    border: 1px solid rgba(var(--bs-gray-300-rgb), 1);
    min-height: 26px;
    padding: 2px;
}

/* .autocomplete-container .tag {
    height: 20px;
}

.autocomplete-container .autocomplete-input {
    height: 20px;
} */

.autocomplete-container .tag-text {
    font-family: "SUIT";
    font-size: 12px !important;
    font-weight: 400 !important;
}



.autocomplete-container.focused {
    border-bottom: 0px solid blue; /* 포커스가 있을 때 강조 표시 */
}


.no-focus-border {
    outline: none; /* 포커스 상태에서 외곽선 제거 */
}


[data-bs-theme=dark]
.autocomplete-container .tag {
    background-color: #333;
}

    [data-bs-theme=dark]
    .autocomplete-container .tag button {
        color: #fff;
    }



[data-bs-theme=light]
.rwgrid {
    --border-top-color: rgba(var(--bs-gray-400-rgb),0.55);
    --border-bottom-color: rgba(var(--bs-gray-400-rgb),0.35);
    --border-left-color: rgba(var(--bs-gray-400-rgb),0.0);
    --border-right-color: rgba(var(--bs-gray-400-rgb),0.1);
    --rs-grid-style-data-selected-bgcolor: #eaeaea;
    --header-text-color: rgb(30, 31, 33);
    --cell-text-color: #222;
    --focued-border-color: rgba(var(--bs-gray-800-rgb), 0.65);
    --focued-in-border-color: rgba(var(--bs-gray-800-rgb), 0.95);
}

[data-bs-theme=light]
/* ver 2 */
.rwgrid {
    --header-bg-color: #e7e7e7; /*#f4f4f4;*/ /*f6f6f6*/ /*#e0e9f1 하늘색 */
    --header-border-color: #b5cade;
    --header-border-right-color: #b9bfc4; /* 헤더 영역 Right Border 색상 추가 */


    --column-border-left-color: #b5cade;
    --column-border-right-color: #b5cade;
    --column-border-top-color: #b5cade;
    --column-border-bottom-color: #b5cade;
    --group-header-bg-color: var(--bs-gray-100); /*#fff;*/
    --group-header-sub-bg-color: blue;
    --group-header-bottom-color: #e3e7eb;
    --border-top-color: #e1e1e1;
    --border-bottom-color: #e1e1e1;
    --border-left-color: #e1e1e1;
    --border-right-color: #cfdbe7;
    --cell-border-top-width: 0;
    --cell-border-bottom-width: 0;
    --cell-border-left-width: 0;
    --cell-border-right-width: 1px;
    /* 수정 */


    --selected-cell-bg-color: #f4faff; /*rgba(247, 236, 185, 0.5);*/
    --selected-cell-top-color: #0050e6;
    --selected-cell-bottom-color: #0050e6; /*#F7CE0E;*/
    --focued-border-color: rgba(247, 236, 185, 0.5);
    --focued-in-border-color: rgba(var(--bs-gray-800-rgb), 0.95);
}


[data-bs-theme=dark]
.rwgrid {
    --border-top-color: rgba(var(--bs-gray-400-rgb),0.75);
    --border-bottom-color: rgba(var(--bs-gray-400-rgb),0.75);
    --border-left-color: rgba(var(--bs-gray-400-rgb),0.75);
    --border-right-color: rgba(var(--bs-gray-400-rgb),0.75);
    --focued-border-color: rgba(var(--bs-gray-800-rgb), 0.45);
    --focued-in-border-color: rgba(var(--bs-gray-800-rgb), 0.95);
    --rs-grid-style-data-selected-bgcolor: #384470;
    --header-bg-color: #000;
    --header-text-color: #fff;
    --cell-text-color: #fff;
    /* 추가 */
    --selected-cell-bg-color: rgb(247 236 185 / 20%);
    --selected-cell-top-color: rgb(247 206 14 / 50%);
    --selected-cell-bottom-color: rgb(247 206 14 / 50%);
    --focued-border-color: rgba(247, 236, 185, 0.5);
    --focued-in-border-color: rgba(var(--bs-gray-800-rgb), 0.95);
}

.rwgrid:focus {
}


.rwgrid {
    height: 100%;
    width: 100%;
    overflow: auto;
    /*    font-family: 'Pretendard', sans-serif;*/
    font-family: 'IBM Plex Sans KR', 'Pretendard', sans-serif !important;
    font-size: 12.0px;
    font-weight: 400;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.1);
    border-left: solid 0px var(--border-left-color);
    border-top: solid 1px var(--border-top-color);
    border-bottom: solid 1px var(--border-bottom-color);
    border-right: solid 0px var(--border-right-color);
    border-radius: 2px; /*var(--rs-grid-style-outer-bdradius)*/

    color: var(--bs-text-dark);
    background-color: var(--bs-white);
    border-radius: 0;
    /* 스크롤바 클릭/드래그는 허용하되 키보드 동작은 막기 */
    /* scrollbar-width: thin; ksh 2025-04-07 thin > 스크롤바 색상 지정 되지 않음. */
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    /* 필요한 경우 */
    scroll-snap-type: none;
}

    .rwgrid .header {
        background-color: var(--header-bg-color);
        display: block; /*inline-table;*/
        /* display: contents; */
        width: 100%;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: -0.4px;
        padding: 0;
        margin: 0;
        height: auto;
        min-height: 30px;
        /*        border-bottom: solid 1px var(--cds-border-subtle-01, #e0e0e0);*/
        border-bottom: solid 0px #d9d9d9;
        position: sticky;
        /*        will-change: transform; 그리드 선택 시 틀어짐 */
        /* Keep sticky headers above fixed body cells, which use z-index:2 inline. */
        z-index: 3;
        top: 0;
        /*transform: translateZ(0);*/
    }

    .rwgrid .header-row {
        background-color: var(--header-bg-color);
        height: 30px;
    }

    .rwgrid .header .group-header {
        height: 30px;
    }


    .rwgrid.cds-rwgrid .header {
        min-height: 32px;
    }

    .rwgrid.cds-rwgrid .header-row {
        height: 32px;
    }

    .rwgrid.cds-rwgrid .header .group-header {
        height: 32px;
    }

.rwgrid .header .group-column {
    background-color: #e8e8e8;
    font-weight: bold;
    display: flex;
    align-items: center;
        justify-content: center;
        border-right: solid 1px transparent;
        border-bottom: 0;
        background-color: var(--header-bg-color); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
    }

        .rwgrid .header .group-column:first-child {
            border-left: solid 0px var(--column-border-left-color);
        }

        .rwgrid .header .group-column:last-child {
            border-right: solid 0px var(--column-border-right-color);
        }

[data-bs-theme=light] {
    --cds-grid-header: #e7e7e7;
    /* 선택 행: 카본 표준 $layer-selected — 구분은 좌측 인디케이터 바가 담당 */
    --cds-grid-select: #e0e0e0;
    --cds-grid-border: #cbcbcb;
    --cds-grid-column-border: #d3d3d3;
    --cds-grid-cell-border: #dedede;
}
[data-bs-theme=dark] {
    --cds-grid-header: #2b2b2b;
    --cds-grid-select: #393939;
    --cds-grid-border: #444444;
    --cds-grid-column-border: #444444;
    --cds-grid-cell-border: #444444;
}



.rwgrid .column-border-bottom {
    /*border-bottom: solid 1px var(--border-right-color);*/
}

.rwgrid .header-container {
    display: inline-flex !important;
    /*        border-bottom: solid 1px var(--header-border-color);*/
    border-bottom: 0;
    /*        will-change: transform; 그리드 선택 시 틀어짐 */
}

.rwgrid .header-container.group-header {
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--cds-grid-column-border, var(--cds-grid-border, #d9d9d9));
}

    .rwgrid .rw-row-sx, .rw-column-sx {
        background-color: var(--header-bg-color); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
        min-width: 30px;
    }


    /* 헤더에 있는 셀 */
    .rwgrid .header-container:not(.group-header) .rw-row-sx,
    .rwgrid .header-container:not(.group-header) .rw-column-sx {
        transform: translateZ(0); /* GPU 처리 */
    }


    /* 그리드 헤드 show hide 처리 ksh 2026-01-06 */
/*    .no-header .header-container {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }*/

    .no-header {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }

    .no-header .header-container {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }


.rw-grid-toolbar-container {
/*    background-color: var(--bs-gray-100);*/
}

.rw-grid-root .rw-grid-multi-banner {
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-color: #edf5ff;
    border: 1px solid #b6d4fe;
    border-radius: 4px;
}

.rw-grid-root .rw-grid-multi-banner__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rw-grid-root .rw-grid-multi-banner__count {
    font-size: 12px;
    font-weight: 700;
    color: #0f2a5c;
}

.rw-grid-root .rw-grid-multi-banner__desc {
    font-size: 11px;
    color: #35507f;
}

.rw-grid-root .rw-grid-multi-banner__clear {
    border: 1px solid #8eb6ff;
    background: #ffffff;
    color: #114fb4;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1;
    padding: 6px 10px;
}

.rwgrid .content-container {
    width: 100%;
    display: inline-table;
    margin-top: 1px; /* 첫번째 컬럼 선택 시 위쪽 outline focus 짤림 방지 */
    /*background-color: bisque;*/
}

    .rwgrid .content-container.mt-container {
        margin-top: 1px; /* Group header height is now handled by the sticky header container itself. */
    }



.rwgrid .rw-column {
    height: 30px;
    color: var(--header-text-color);
    /*    background-color: var(--cds-field-01, #f4f4f4); 틀고정되는 경우가 있어 배경색을 지정합니다. */
    border-right: solid 1px transparent;
    background-color: var(--cds-grid-header, #e7e7e7);
    /*overflow: hidden;*/
}

.rwgrid.cds-rwgrid .rw-column {
    color: var(--header-text-color);
    height: 32px;
    background-color: var(--bs-gray-300); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
}

    .rwgrid .rw-column:first-child {
        border-left: solid 0px var(--cds-grid-column-border, var(--cds-grid-border, #d9d9d9));
    }

    .rwgrid .rw-column:last-child {
        /*        border-right: solid 1px var(--column-border-right-color);*/
        border-right: solid 1px transparent;
    }

.rwgrid .header:hover .rw-column {
    border-right-color: var(--cds-grid-column-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid.rw-lines-vertical .rw-column,
.rwgrid.rw-lines-vertical .group-column {
    border-right-color: var(--cds-grid-column-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid .header:hover .group-column {
    border-right-color: var(--cds-grid-column-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid .header-container.group-header .group-column {
    border-right-color: var(--cds-grid-column-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid .header-container.group-header ~ .header-container .rw-column {
    border-right-color: var(--cds-grid-column-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid .rw-column.rw-fixed-column-edge {
    border-right-color: var(--cds-grid-column-border, var(--cds-grid-border, #d9d9d9));
    box-shadow: none;
}

    .rwgrid .rw-column .resizer {
        width: 5px;
        height: 100%;
        margin-right: 0px;
        z-index: 2;
        cursor: col-resize;
    }


.rwgrid .rw-data-row {
    height: 30px;
    /*    border-top: solid 1px transparent;*/
    /*    will-change: transform;*/
/*    border-bottom: solid 1px var(--cds-layer-hover, #e8e8e8);*/
    border-bottom: solid 1px var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid.rw-lines-horizontal .rw-data-row {
    border-bottom: solid 1px var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid:not(.rw-lines-horizontal) .rw-data-row {
    border-bottom: 0 !important;
}

    .rwgrid .rw-data-row.rw-row-selected {
        background-color: var(--cds-grid-select, #e0e0e0) !important;
        outline-offset: -2px; /* 위 보더 위치랑 겹치도록 */
    }

    /* 카본 선택 표시: 좌측 인디케이터 바($interactive) —
       배경은 표준 $layer-selected 회색이라, 호버(반투명·바 없음)와의 구분은 이 바가 담당한다.
       행이 아니라 첫 자식에 그린다 — 좌측의 sticky 셀(rw-row-sx 등)이 행 배경을 덮기 때문. */
    .rwgrid .rw-data-row.rw-row-selected > :first-child {
        box-shadow: inset 3px 0 0 var(--cds-focus, #0f62fe);
    }

/* 카본디자인 적용일때 */

.cds-grid-container .cds-rwgrid .header-container > .rw-column:first-child > div:first-child {
    padding-left: 16px !important; /* 페이지 전체 좌측 여백 맞추기 */
}

.cds-grid-container .rwgrid.cds-rwgrid .rw-cell:first-child .rw-cell-content-container .rw-cell-content {
    padding-left: 16px !important; /* 첫 행만 적용 */
}
.cds-grid-container .rwgrid.cds-rwgrid .rw-cell .rw-cell-content-container .rw-cell-content {
    padding-right: 19px !important;
}



.cds-grid-container .rwgrid .header {
    background-color: var(--cds-table-header, #e0e0e0);
}

.cds-grid-container .rwgrid.rw-lines-horizontal.rw-merge-cell-visual.cds-rwgrid .rw-row-sx {
    border-top: none !important;
}

.rwgrid.cds-rwgrid .rw-data-row.rw-row-selected {
    /*    border-top: 1px solid var(--selected-cell-top-color);
    border-bottom: 1px solid var(--selected-cell-bottom-color);*/
    /*    border-block-end: 1px solid #c6c6c6;
    border-block-start: 1px solid #e0e0e0;*/
    background-color: var(--cds-grid-select, #e5e5e5) !important;
    outline-offset: -2px; /* 위 보더 위치랑 겹치도록 */
}

.rwgrid.cds-rwgrid .rw-grid-row-selector-check {
    appearance: none;
    border: 1px solid var(--cds-text-primary, #161616) !important;
    border-radius: 2px;
    width: 16px !important;
    height: 16px !important;
    position: relative !important;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    background-color: transparent;
}
    .rwgrid.cds-rwgrid .rw-grid-row-selector-check:checked {
        background-color: var(--cds-dark-color, #161616) !important;
        position: relative !important;
    }
        .rwgrid.cds-rwgrid .rw-grid-row-selector-check:checked::before {
            block-size: 5px; /*.3125rem;*/
            border-block-end: 1.5px solid var(--cds-white-color, #FFFFFF);
            border-inline-start: 1.5px solid var(--cds-white-color, #FFFFFF);
            content: "";
            inline-size: 8.5px; /*.5rem*/
            inset-block-start: 2px; /*.2rem;*/
            inset-inline-start: 3.5px; /*.25rem;*/
            margin-block-start: -2px; /*-.1875rem*/
            position: absolute;
            transform: scale(1) rotate(-45deg);
            transform-origin: bottom right;
        }
        .rwgrid.cds-rwgrid .rw-grid-row-selector-check:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--cds-focus, #0f62fe);
        }

        /* 셀 커서 = ::after 프레임.
           - 셀 보더 폭을 건드리지 않는다(border:0 금지) → 포커스 시 텍스트 흔들림 없음.
           - inset:0 프레임이라 셀 외곽선과 정확히 일치.
           - z-index가 스티키 헤더(3)보다 높아 헤더 밑 행에서도 윗변이 먹히지 않는다. */
        .rwgrid.cds-rwgrid .rw-cell.rw-cell-focused:not(.rw-fixed-cell) {
            position: relative;
        }

        .rwgrid.cds-rwgrid .rw-cell.rw-cell-focused {
            outline: none !important;
        }

        /* 기본(비활성) = 회색 프레임: 포커스가 그리드 밖일 때.
           inset -1px 확장: 그리드 라인은 셀 박스 밖에 있다(윗줄=이전 행 아랫보더,
           왼줄=왼쪽 셀 오른보더, 아랫줄=행 아랫보더) — 프레임이 그 라인들 위에
           정확히 겹쳐 앉아야 카본 표준(경계선과 일치하는 2px 포커스)이 된다. */
        .rwgrid.cds-rwgrid .rw-cell.rw-cell-focused::after {
            content: "";
            position: absolute;
            inset: -2px;   /* outline처럼 완전히 바깥 링 — 셀 내부 0px 침범, 행 보더와 일치 (카본 표준, 사장 확정) */
            border: 2px solid var(--cds-gray-300);
            pointer-events: none;
            z-index: 4;
        }

        /* 활성 = 파랑: 편집 중 / 셀 안 포커스(선포커스 편집기) / 그리드 루트 포커스(키보드 탐색) */
        .cds-grid-container .rwgrid.cds-rwgrid [data-cell-editing="true"].rw-cell.rw-cell-focused::after,
        .rwgrid.cds-rwgrid:focus .rw-cell.rw-cell-focused::after,
        .rwgrid.cds-rwgrid .rw-cell.rw-cell-focused:focus-within::after {
            border-color: var(--cds-focus, #0f62fe);
        }

    .rwgrid.cds-rwgrid .rw-cell .rw-cell-editor-container .rw-cell-editor {
        border-right: 0 !important;
    }

    /* 셀 경고 말풍선: 콤보 무효값 Enter 등에서 셀 위에 잠깐 띄운다 (JS showCellWarning) */
    .rw-cell-warning {
        position: fixed;
        z-index: 10000;
        max-width: 260px;
        padding: 4px 10px;
        font-size: 12px;
        line-height: 1.4;
        color: #161616;
        background: var(--cds-support-warning, #f1c21b);
        border: 1px solid rgba(0, 0, 0, .25);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
        pointer-events: none;
        white-space: nowrap;
    }

    .rw-cell-warning::after {
        content: "";
        position: absolute;
        left: 12px;
        bottom: -5px;
        border-width: 5px 5px 0 5px;
        border-style: solid;
        border-color: var(--cds-support-warning, #f1c21b) transparent transparent transparent;
    }
.rwgrid.cds-rwgrid .rw-data-row:hover .rw-fixed-cell,
.rwgrid.cds-rwgrid .rw-data-row:hover .rw-cell-merged-ghost {
    /*    background-color: var(--rw-grid-hover-bg-opaque, #f4f4f4) !important;*/
    background-color: var(--cds-layer-hover, #e8e8e8) !important; /* 2026.07.21 이지혜 추가 - 기존 hover시 다크모드에서 흰색 */
}


.cds-grid-container .rwgrid.cds-rwgrid .rw-column {
    background-color: var(--cds-grid-header, #e7e7e7);
}
.cds-grid-container .rwgrid.cds-rwgrid .content-container{
    margin-top: 0;
}
/* 셀렉트 배너 */
.cds-rw-grid-toolbar-container .rw-grid-multi-banner {
    background-color: var(--cds-primary, ##0f62fe);
    margin: 0;
    padding: 0;
    border-radius: 0;
    height: 40px;
}
.cds-rw-grid-toolbar-container .rw-grid-multi-banner__count {
    color: var(--cds-text-on-color, #ffffff);
    font-weight: 400;
    font-size: 14px;
}
.cds-rw-grid-toolbar-container .rw-grid-multi-banner__left{
    padding-left:12px;
}
.cds-rw-grid-toolbar-container .rw-grid-multi-banner__right{
    position: relative;
}
.cds-rw-grid-toolbar-container .rw-grid-multi-banner__right .rw-grid-multi-banner__clear {
    border: none;
    border-radius: 0;
    color: var(--cds-text-on-color, #ffffff);
    background: none;
    font-size: 12px;
    padding: 13px;
}
    .cds-rw-grid-toolbar-container .rw-grid-multi-banner__right .rw-grid-multi-banner__clear:hover {
        background-color: var(--cds-button-primary-hover, #0353e9);
    }
    .cds-rw-grid-toolbar-container .rw-grid-multi-banner__right .rw-grid-multi-banner__clear:active,
    .cds-rw-grid-toolbar-container .rw-grid-multi-banner__right .rw-grid-multi-banner__clear:focus {
        outline: 2px solid #ffffff !important;
        outline-offset: -2px;
    }
    .cds-rw-grid-toolbar-container .rw-grid-multi-banner__right .rw-grid-multi-banner__clear:before {
        position: absolute;
        display: block;
        border: none;
        background-color: var(--cds-text-on-color, #ffffff);
        block-size: 16px;
        content: "";
        inline-size: 1px;
        inset-block-start: 11px;
        inset-inline-start: 0;
        opacity: 1;
        transition: opacity .11s cubic-bezier(.2,0,.38,.9);
    }


    .rwgrid .rw-data-row:hover {
        /* 반투명 호버 — 행 상태색/머지 위에서도 은은하게 겹친다 */
        background-color: var(--rw-grid-hover-bg, rgba(141, 141, 141, .10));
    }


/*
        .rwgrid .rw-data-row:hover .rw-cell {
            background-color: var(--bs-gray-200);
        }*/

    .rwgrid .rw-data-row.rw-row-selected .rw-row-sx {
/*        will-change: transform;  그리드 선택 시 틀어짐 */

    }

    .rwgrid .rw-data-row.rw-row-selected .rw-cell {
/*        will-change: transform;  그리드 선택 시 틀어짐 */
    }

        .rwgrid .rw-data-row.rw-row-selected .rw-cell.text-danger {
            /*--bs-text-danger: #fff;*/
        }


    [data-bs-theme=light]
    /*.rwgrid .rw-data-row.rw-row-selected .text-gray-100,
        .rwgrid .rw-data-row.rw-row-selected .text-gray-200,
        .rwgrid .rw-data-row.rw-row-selected .text-gray-300,
        .rwgrid .rw-data-row.rw-row-selected .text-gray-400,*/
    .rwgrid .rw-data-row.rw-row-selected .text-gray-500,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-600,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-700,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-800,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-900 {
        /*color: var(--bs-info-light) !important;*/
    }

    [data-bs-theme=dark]
    .rwgrid .rw-data-row.rw-row-selected .text-gray-100,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-200,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-300,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-400,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-500,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-600,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-700,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-800,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-900 {
        /*color: var(--bs-gray-700) !important;*/
    }

    .rwgrid .rw-data-row.rw-row-selected .text-info {
        /*color: var(--bs-info-light) !important*/
    }

    .rwgrid .rw-data-row.rw-row-selected .text-primary {
        /*color: var(--bs-primary-light) !important*/
    }



    /* 선택된 행에서 rw-light-bg-color와 글자색이 겹칠 때 대비 조정 */
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-500,
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-600,
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-700,
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-800,
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-900 {
        /*color: var(--bs-text-dark) !important;*/
    }

.rwgrid .rw-cell {
    display: flex;
    color: var(--cell-text-color);
    /*    border-top: solid var(--cell-border-top-width) var(--border-top-color);
    border-bottom: solid var(--cell-border-bottom-width) var(--border-bottom-color);
    border-left: solid var(--cell-border-left-width) var(--border-left-color);
    border-right: solid var(--cell-border-right-width) var(--border-right-color);*/
    border-top: 0px solid var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
    border-bottom: 0px solid var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
    border-left: 0px solid var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
    /*    border-right: 1px solid var(--cds-layer-hover, #e8e8e8);*/
    border-right: 1px solid transparent;
    /*border: solid 1px var(--border-right-color);*/
    /*overflow: hidden; 셀 편집기 때문에 제거 */

    word-wrap: break-word;
    text-overflow: ellipsis;
    /* 셀편집기때문에 제거
            padding-left: 5px;
            padding-right: 5px;*/
}

.rwgrid.rw-lines-vertical .rw-cell {
    border-right-color: var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid:not(.rw-lines-vertical) .rw-cell {
    border-right-color: transparent !important;
}

.rwgrid.rw-lines-vertical .rw-fixed-cell {
    border-right-color: transparent;
}

/* 머지셀 비주얼: 고정 컬럼도 세로선을 그린다 —
   머지 대상 컬럼이 고정 컬럼이면 위 규칙이 컬럼 경계선까지 지워서
   머지 블록 구분이 통째로 사라진다. */
.rwgrid.rw-lines-vertical.rw-merge-cell-visual .rw-fixed-cell {
    border-right-color: var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid .rw-fixed-cell.rw-fixed-cell-edge {
    border-right-color: transparent !important;
    box-shadow: inset -1px 0 0 var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
}

/* 세로선 모드: 고정 엣지 선도 보더 픽셀에 직접 그린다.
   inset box-shadow는 투명 보더 1px 안쪽에 칠해져서
   헤더의 border-right(맨 오른쪽 픽셀)와 1px 어긋난다. */
.rwgrid.rw-lines-vertical .rw-fixed-cell.rw-fixed-cell-edge {
    border-right-color: var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9)) !important;
    box-shadow: none;
}


    .rwgrid .rw-cell.rw-cell-focused {
        border-left: solid 1px var(--focued-border-color) !important;
        border-top: solid 1px var(--focued-border-color) !important;
        border-bottom: solid 1px var(--focued-border-color) !important;
        border-right: solid 1px var(--focued-border-color) !important;
    }

/* 1. 그리드에 포커싱이 있는 경우 (그리드에 포커싱 : O 에디에터에 포커싱 : X)*/
.rwgrid:focus .rw-cell.rw-cell-focused {
    border: solid 1px var(--focued-in-border-color) !important;
}
/* 2. 그리드에 포커싱이 있는 경우 (그리드에 포커싱 : X 에디에터에 포커싱 : O)*/
.rwgrid .rw-cell.rw-cell-focused:focus-within {
    border: solid 1px var(--focued-in-border-color) !important;
}


.rwgrid [data-cell-editing="true"].rw-cell.rw-cell-focused {
    border: solid 2px var(--bs-primary) !important;
}

/* 셀 범위 선택 (Shift+클릭/Shift+방향키): 앵커 셀 외 범위 내 셀 표시 */
.rwgrid .rw-cell.rw-cell-range-selected {
    background-color: var(--cds-highlight, rgba(15, 98, 254, 0.10)) !important;
}

/* dirty 셀: 좌상단 모서리 삼각 마커 (엑셀 방식) */
.rwgrid .rw-cell.rw-cell-dirty {
    position: relative;
}

.rwgrid .rw-cell.rw-cell-dirty::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-style: solid;
    border-width: 6px 6px 0 0;
    border-color: var(--cds-support-info, #0f62fe) transparent transparent transparent;
    pointer-events: none;
}

/* 검증 위반 셀: 붉은 배경 + 하단 경고선 (메시지는 title 툴팁) */
.rwgrid .rw-cell.rw-cell-invalid {
    background-color: var(--cds-support-error-light, rgba(218, 30, 40, 0.08)) !important;
    box-shadow: inset 0 -2px 0 var(--cds-support-error, #da1e28);
}

/* 행 상태 마킹: 좌측 엣지 색상 바 (신규=초록, 수정=파랑, 삭제=빨강+취소선) */
.rwgrid .rw-data-row.rw-row-added {
    box-shadow: inset 3px 0 0 var(--cds-support-success, #24a148);
}

.rwgrid .rw-data-row.rw-row-modified {
    box-shadow: inset 3px 0 0 var(--cds-support-info, #0f62fe);
}

.rwgrid .rw-data-row.rw-row-deleted {
    box-shadow: inset 3px 0 0 var(--cds-support-error, #da1e28);
    opacity: 0.55;
    text-decoration: line-through;
}


.rwgrid .rw-cell-readonly {
    /*background-color: var(--bs-gray-100) !important;*/
}

.rwgrid .rw-cell .rw-cell-content-container .rw-cell-content {
    padding-left: 12px;
    padding-right: 5px;
}

.rwgrid .rw-cell .rw-cell-editor-container .rw-cell-editor {
    padding-left: 5px;
    padding-right: 5px;
}

.rwgrid .rw-sum-cell {
    padding-left: 5px;
/*    padding-right: 5px;*/
    padding-right:19px;
    font-weight: 800;
}

.rwgrid .rw-cell-focused.rw-cell-readonly {
    border-left: solid 1px #000 !important;
    border-top: solid 1px #000 !important;
    border-bottom: solid 1px #000 !important;
    border-right: solid 1px #000 !important;
    /*background-color: var(--bs-gray-200) !important;*/
}


.rwgrid .rw-fixed-column {
    position: sticky;
    left: 0;
    z-index: 4;
    will-change: transform;
}

.rwgrid .rw-cell .rw-cell-content-container {
    /* 셀 truncate 처리 (이걸 옵션으로 해야할지 고민중) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.rwgrid .rw-cell .rw-cell-editor-container {
    width: 100%;
}

.rwgrid .rw-cell.rw-cell-readonly {
    /*background-color: var(--bs-gray-100);*/
}

.rwgrid .rw-cell input.rw-cell-editor {
    border: 0px solid #a1a1a111;
    background-color: transparent;
    padding-left: 0px;
    padding-right: 0px;
}


.rwgrid .rw-data-row:hover .rw-fixed-cell {
    /* 고정 셀은 스크롤 내용을 가려야 하므로 반투명 호버의 불투명 등가색(흰 바탕 합성) */
    background-color: var(--rw-grid-hover-bg-opaque, #f4f4f4);
}

/* 로우디테일 하단 구분선: 행은 아랫선만 그리는 규칙이라(윗선 생략 = 겹침 방지)
   디테일 패널이 아랫선 없이 끝나면 다음 행과의 사이가 빈 줄로 보인다. */
.rwgrid.rw-lines-horizontal .rw-row-detail-row,
.cds-grid-container .rwgrid .rw-row-detail-row {
    border-bottom: solid 1px var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
}

/* 하단 이중 보더 방지 (JS rw-at-bottom과 짝):
   마지막 행이 컨테이너 하단 보더와 맞닿아 있을 때만 행 아랫선을 숨긴다 —
   짧은 데이터/중간 스크롤에서는 행 선이 그대로 남아 마감선 역할을 한다.
   테두리 없는 변형(rw-grid-border-0/fluid)은 숨기면 마감선이 사라지므로 제외. */
.cds-rw-grid-root:not(.rw-grid-border-0):not(.cds-rwgrid-fluid) .rwgrid.rw-at-bottom .content-container > .rw-data-row:last-child,
.cds-rw-grid-root:not(.rw-grid-border-0):not(.cds-rwgrid-fluid) .rwgrid.rw-at-bottom .content-container > .rw-row-detail-row:last-child,
.cds-rw-grid-root:not(.rw-grid-border-0):not(.cds-rwgrid-fluid) .rwgrid.rw-at-bottom .content-container > .data-container > .rw-data-row:last-child,
.cds-rw-grid-root:not(.rw-grid-border-0):not(.cds-rwgrid-fluid) .rwgrid.rw-at-bottom .content-container > .data-container > .rw-row-detail-row:last-child {
    border-bottom-color: transparent !important;
}

.rwgrid[data-editor-mode="LikeExcel"] .rw-data-row:not(.rw-row-selected):hover {
    background-color: transparent;
}

.rwgrid[data-editor-mode="LikeExcel"] .rw-data-row:not(.rw-row-selected):hover .rw-fixed-cell {
    background-color: var(--bs-white);
}

.rwgrid .rw-data-row.rw-row-selected .rw-fixed-cell {
    background-color: var(--cds-grid-select);
}

/* --bs-white > --bs-gray-200 변경 시 sum row 아닌 일반 row 도 gray 로 바뀜*/
.rwgrid .rw-data-row .rw-fixed-cell {
    background-color: var(--cds-rw-ctrl-bg);
    position: sticky !important;
    left: 0;
    /*transform: translateZ(0); rwcombo 사용시 ItemContainer의 위치가 제대로 출력되지 않는다. */
    /*will-change: transform;*/ /* GPU 강제 적용 (랜더링 문제 수정) */
}

.rwgrid .rw-data-row .rw-fixed-cell-sum-row {
    background-color: var(--bs-gray-200);
    position: sticky !important;
    left: 0;
}


.rw-grid-root .cds-grid-container {
    background-color: var(--bs-white) !important;
}


.rwgrid .rw-group-header {
    height: 30px;
    font-size: 10px;
    font-weight: 700;
    color: var(--bs-text-gray-800); /*#333;*/
    padding-left: 1px;
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: var(--group-header-bg-color); /*var(--bs-gray-200);*/

    border-bottom: solid 1px var(--group-header-bottom-color);
}

.rwgrid:not(.rw-lines-horizontal) .rw-group-header {
    border-bottom: 0 !important;
}

    .rwgrid .rw-group-header.rw-group-header-sub {
        background-color: var(--bs-gray-100);
    }

    .rwgrid .rw-group-header .rw-group-header-content {
        position: sticky !important;
        left: 20px;
        will-change: transform;
    }

.rwgrid .rw-group-data-container {
    /* max-height: 0; */
}

.rwgrid .rw-column-sx {
    width: 22px;
}

.rwgrid .rw-column-selector {
    width: 30px;
    min-width: 30px;
    border-right: solid 1px rgba(0,0,0,0.04);
    background-color: var(--cds-table-header, #e0e0e0); /* 다른 헤더 색상과 동일한 배경색상 추가 - 26.06.04 이지혜 */
}

.rwgrid .rw-column-drag {
    border-right: solid 0px rgba(0,0,0,0.04);
    width: 30px;
}

.rwgrid .over {
    border-left: 1px dotted #333;
}

.rwgrid .rw-row-sx {
    width: 22px;
}

.rwgrid .rw-row-selector-cell {
    width: 30px;
    min-width: 30px;
    border-right: solid 1px rgba(0,0,0,0.04);
}

.rwgrid .rw-grid-row-selector-check {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.rwgrid .rw-row-sx,
.rwgrid .rw-row-selector-cell,
.rwgrid .row-drag-handler {
    border-right: solid 1px transparent;
}

.rwgrid .row-drag-handler {
    width: 30px;
}

/* 로우 디테일 펼침 토글(>): btn 상속으로 흰색이 되던 것을 카본 회색으로 명시 */
.rwgrid .rw-row-detail-toggle,
.rwgrid .rw-row-detail-toggle i {
    color: var(--cds-icon-secondary, #6f6f6f);
}

.rwgrid .rw-row-detail-toggle:hover,
.rwgrid .rw-row-detail-toggle:hover i {
    color: var(--cds-icon-primary, #161616);
}

.rwgrid.rw-lines-vertical .rw-row-sx,
.rwgrid.rw-lines-vertical .rw-row-selector-cell,
.rwgrid.rw-lines-vertical .row-drag-handler {
    border-right-color: var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid:not(.rw-lines-vertical) .rw-row-sx,
.rwgrid:not(.rw-lines-vertical) .rw-row-selector-cell,
.rwgrid:not(.rw-lines-vertical) .row-drag-handler {
    border-right-color: transparent !important;
}

/* 드래그 이동 아이콘 숨김 */
.rwgrid .row-drag-handler-hide i {
    visibility: hidden;
}

.rwgrid .header-button {
    transition: transform 0.5s ease-in-out;
    width: 30px;
    position: sticky;
    will-change: transform;
}

.rwgrid .row-group-button-rotate-90 {
    transform: rotate(90deg);
}

.rwgrid .row-group-button-rotate-0 {
    transform: rotate(0deg);
}


/*     .rwgrid .rw-group-data-container {
        transition: max-height 0.2s ease-out;
    }

    .rwgrid .close {
        min-height: 0;
        max-height: 0;
        height:0;
        overflow: hidden;
    }
 */
.rwgrid .rw-group-data-container {
    /* overflow: hidden;  이 옵션은 틀고정시에 사용할 수 없음*/
    transition: height 0.3s ease-out;
}

    .rwgrid .rw-group-data-container.closed {
        overflow: hidden;
        height: 0;
    }




/* 추가된 가이드라인 스타일 */
.insert-above {
    border-top: 1px dotted #333 !important;
}

.insert-below {
    border-bottom: 1px dotted #333 !important;
}

.rwgrid .rw-data-row:last-child.insert-below {
    border-bottom: 1px dotted #333 !important;
}
/* 스타일 추가 */
.dragging {
    opacity: 1.0; /* 드래그 중인 요소의 투명도 조절 */
}


/* 데이터그리드 로딩 메시지 */
.rw-grid-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.rw-grid-loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: rw-grid-spin 1s linear infinite;
}

@keyframes rw-grid-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}






























.above {
    bottom: 100%;
}

.below {
    top: 100%;
}



.popover {
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
}

.popover-header {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.popover-body {
    font-size: 14px;
    padding-top: 10px;
}

.btn-min {
    padding: 8px 14px 8px 14px !important;
    font-size: 12px !important; /* 폰트 사이즈 감소 */
    line-height: 12px !important; /* 라인 높이 조정 */
    border-radius: 2px; /* 둥근 모서리를 조금 더 세밀하게 조정 */
    height: 30px;
}








/* RWModal*/

/* 기본 모달 스타일링 */
.rw-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none; /* 초기 상태는 숨김 처리 */
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
}

.rw-modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

.rw-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%; /* 모달 컨텐츠의 너비를 조절하려면 이 값을 조정하세요 */
    pointer-events: auto; /* 모달 컨텐츠에 마우스 이벤트 적용 */
    background-color: #FFF;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

.rw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.rw-modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.rw-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.btn-close {
    padding: 0.5rem 1rem;
    margin: -0.5rem -1rem -0.5rem auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.rw-modal.fade.show {
    display: block; /* 팝업을 표시 */
}








/* 추가적인 모달 스타일링은 여기에 작성하세요 */

@keyframes rw-window-slideDown {
    from {
        transform: translateY(-100px);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.rw-window-slide-down {
    animation: rw-window-slideDown 0.5s ease-out;
}

.rw-window {
    position: fixed;
    background-color: white;
    border: 0px solid #384470;
    box-shadow: 0 1px 3px rgba(0,0,0,0.7);
    border-radius: 1px !important;
    /*z-index: 1000; 동적으로 지정됨 */
    resize: both;
    overflow: hidden;
    left: -50%;
    top: -50%;
}

.rw-window-header {
    cursor: move;
    background-color: #384470;
    color: #fff;
    padding: 8px 10px;
    border-bottom: 0px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .rw-window-header button {
        border: none;
        background-color: transparent;
        cursor: pointer;
        font-size: 16px;
    }

.rw-window-content {
    padding: 0px;
}


#keyboardzone {
    background-color: #ccc;
}

.goja-keyboard {
    position: absolute;
    width: 900px;
    align: center;
    visibility: hidden;
    font-size: 25px;
    background-color: moccasin;
}

    .goja-keyboard .goja-key-row {
        display: flex;
        flex-wrap: nowrap; /* 줄 바꿈 방지 */
        flex-direction: row; /* 가로 방향으로 나열 */
        justify-content: space-around; /* 균등한 간격 */
    }

        .goja-keyboard .goja-key-row .goja-key {
            flex: 1 1 8%; /* 각 키가 동일한 크기를 가지도록 설정 */
            margin: 10px;
            padding: 20px;
            align-content: center;
            text-align: center;
            border-radius: 5px;
            background-color: #ccc;
            color: white;
            font-size: 1.5rem;
            user-select: none;
            transition: background-color 0.3s;
        }

@keyframes rx-slide-left {
    from {
        transform: translateX(100%);
        opacity: 1;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.rx-slide-left {
    animation: rx-slide-left 0.3s ease-in-out;
}

.rw-window-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.rw-textbox-markdown-editor {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
    font-family: Consolas, "Courier New", monospace;
}

.rw-textbox-markdown-output {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid rgba(var(--bs-gray-400-rgb), 0.6);
    border-radius: 2px;
    background-color: var(--bs-white);
    overflow-wrap: anywhere;
}

.rw-textbox-markdown-output > :last-child {
    margin-bottom: 0;
}

.rw-textbox-markdown-output pre {
    padding: 8px;
    background-color: rgba(var(--bs-gray-200-rgb), 0.8);
    border-radius: 2px;
}

.rw-textbox-markdown-output code {
    font-family: Consolas, "Courier New", monospace;
}

.rw-textbox-view,
button.rw-textbox-inline-editor,
span.rw-textbox-inline-editor {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    color: var(--cds-text-primary);
    font: inherit;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

button.rw-textbox-inline-editor {
    appearance: none;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    cursor: text;
    transition: background-color 0.5s ease;
}

button.rw-textbox-inline-editor:hover {
    background: var(--cds-layer-hover-01);
}

button.rw-textbox-inline-editor:focus-visible {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}

.rw-textbox-inline-editor__action {
    flex: 0 0 auto;
/*    margin-left: auto;*/
    opacity: 0;
}

.rw-textbox-inline-editor__action::before {
    content: "\270e";
}

button.rw-textbox-inline-editor:hover .rw-textbox-inline-editor__action,
button.rw-textbox-inline-editor:focus-visible .rw-textbox-inline-editor__action {
    opacity: 1;
}

.rw-textbox-inline-editor-readonly {
    cursor: default;
}

.rw-textbox-mode-empty {
    color: var(--cds-text-placeholder);
}

.rw-textbox-input.rw-textbox-inline-editor.rw-textbox-editing {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}

button.rw-textbox-inline-editor.inline-editor-center{
    justify-content: center !important;
    margin-left: 10px;
}
button.rw-textbox-inline-editor.inline-editor-center .rw-textbox-inline-editor__action{
    
}

.rw-selector-inline-editor {
    position: relative;
    width: 100%;
}

.rw-selector-inline-editor:not(.disabled)::after {
    align-items: center;
    content: "\270e";
    display: inline-flex;
    height: 100%;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 0;
    transition: opacity 110ms ease;
    width: 16px;
    z-index: 1;
}

.rw-selector-inline-editor:not(.disabled):hover::after,
.rw-selector-inline-editor:not(.disabled):focus-within::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .rw-selector-inline-editor::after {
        transition: none;
    }
}


/* Merge visual mode: keep vertical separators, control horizontal separators at cell level */
.rwgrid.rw-lines-horizontal.rw-merge-cell-visual .rw-data-row {
    border-bottom: 0 !important;
}

.rwgrid.rw-lines-horizontal.rw-merge-cell-visual .rw-cell,
.rwgrid.rw-lines-horizontal.rw-merge-cell-visual .rw-row-sx,
.rwgrid.rw-lines-horizontal.rw-merge-cell-visual .rw-sum-cell {
    border-top: 1px solid var(--cds-grid-cell-border, var(--cds-grid-border, #d9d9d9));
}

.rwgrid.rw-lines-horizontal.rw-merge-cell-visual .rw-cell.rw-cell-merged-ghost {
    border-top-color: transparent !important;
}

.rwgrid.rw-lines-horizontal.rw-merge-cell-visual .rw-cell.rw-cell-merged-ghost.rw-cell-focused,
.rwgrid.rw-lines-horizontal.rw-merge-cell-visual:focus .rw-cell.rw-cell-merged-ghost.rw-cell-focused,
.rwgrid.rw-lines-horizontal.rw-merge-cell-visual .rw-cell.rw-cell-merged-ghost.rw-cell-focused:focus-within,
.rwgrid.rw-lines-horizontal.rw-merge-cell-visual [data-cell-editing="true"].rw-cell.rw-cell-merged-ghost.rw-cell-focused {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

.rwgrid .rw-cell .rw-cell-merge-ghost-text {
    visibility: hidden;
}