/*@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 {
        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: #ccc;
            font-family: 'Pretendard';
            font-size: 10px;
            font-weight: 300;
        }

        .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(--bs-white); /* ksh 2025-04-07*/
    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: 6px 8px;
        cursor: pointer;
        font-family: 'Pretendard';
        font-size: 11px;
        border-left: 2px solid transparent;
    }

        .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;
        }

.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: #f6f6f6;
    --header-border-color: #e1e1e1;
    --group-header-bg-color: #fff;
    --group-header-sub-bg-color: blue;
    --group-header-bottom-color: #e1e1e1;
    --border-top-color: #e1e1e1;
    --border-bottom-color: #e1e1e1;
    --border-left-color: #e1e1e1;
    --border-right-color: #e1e1e1;
    --cell-border-top-width: 0;
    --cell-border-bottom-width: 0;
    --cell-border-left-width: 0;
    --cell-border-right-width: 1px;
    /* 수정 */
    --selected-cell-bg-color: rgba(247, 236, 185, 0.5);
    --selected-cell-top-color: #F7CE0E;
    --selected-cell-bottom-color: #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-size: 12.0px;
    font-weight: 400;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.1);
    border-left: solid 1px var(--border-left-color);
    border-top: solid 1px var(--border-top-color);
    border-bottom: solid 1px var(--border-bottom-color);
    border-right: solid 1px 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: 10.5px;
        letter-spacing: -1px;
        padding: 0;
        margin: 0;
        height: 30px;
        border-bottom: solid 1px var(--header-border-color);
        position: sticky;
        will-change: transform;
        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 .header .group-column {
        background-color: #e8e8e8;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: solid 1px var(--border-right-color);
        background-color: var(--header-bg-color); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
    }

    .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);
        will-change: transform;
    }

    .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 처리 */
    }


    .rwgrid .content-container {
        width: 100%;
        display: inline-table;
        /*background-color: bisque;*/
    }

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

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


    .rwgrid .rw-data-row {
        height: 30px;
        border-bottom: solid 1px var(--border-bottom-color);
        /*will-change: transform;*/
        /*pointer-events: none;*/
    }

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

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



        .rwgrid .rw-data-row.rw-row-selected .rw-row-sx {
            background-color: var(--selected-cell-bg-color) !important;
            will-change: transform;
            border-top: 1px solid var(--selected-cell-top-color);
            border-bottom: 1px solid var(--selected-cell-bottom-color);
        }

        .rwgrid .rw-data-row.rw-row-selected .rw-cell {
            background-color: var(--selected-cell-bg-color) !important;
            will-change: transform;
            border-top: 1px solid var(--selected-cell-top-color);
            border-bottom: 1px solid var(--selected-cell-bottom-color);
        }


            .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: solid 1px var(--border-right-color);*/
        /*overflow: hidden; 셀 편집기 때문에 제거 */

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


        .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;
    }


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

    .rwgrid .rw-cell .rw-cell-content-container .rw-cell-content {
        padding-left: 5px;
        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: 10px;
        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;
        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(--bs-gray-200);
    }

    .rwgrid .rw-data-row .rw-fixed-cell {
        background-color: var(--bs-white);
        position: sticky !important;
        left: 0;
        /*transform: translateZ(0); rwcombo 사용시 ItemContainer의 위치가 제대로 출력되지 않는다. */
        /*will-change: transform;*/ /* GPU 강제 적용 (랜더링 문제 수정) */
    }


    .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 .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-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 .row-drag-handler {
        width: 30px;
        border-right: solid 1px rgba(0,0,0,0.04);
    }

    /* 드래그 이동 아이콘 숨김 */
    .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);
}