[data-bs-theme=light] {
    --bs-gray-100: #F9F9F9;
    --bs-gray-200: #F4F4F4;
    --bs-gray-300: #E1E3EA;
    --bs-gray-400: #B5B5C3;
    --bs-gray-500: #A1A5B7;
    --bs-gray-600: #7E8299;
    --bs-gray-700: #5E6278;
    --bs-gray-800: #3F4254;
    --bs-gray-900: #181C32;
    --dark-color: #000000;
    --primary-color: #0050e6;
    --white-color: #FFFFFF;
    --primary-bg-over-color: #0050e6;
    --border-primary-color: #0050e6;
    /* carbon */
    --cds-primary: #0f62fe;
    --cds-field: #f4f4f4;
    --cds-dark-color: #161616;
    --cds-link-primary: #0f62fe;
    --cds-link-primary-hover: #054ada;
    --cds-link-inverse: #78a9ff;
    --cds-support-success: #24a148;
    --cds-overlay: #16161650;
    --cds-layer-selected: #e0e0e0;
    --cds-layer-selected-hover: #d1d1d1;
    --cds-layer-hover: #e8e8e8;
    --cds-toggle-off: #8d8d8d;
    /* 색상-텍스트 */
    --cds-text-primary: #161616;
    --cds-text-secondary: #525252;
    --cds-text-placeholder: #a8a8a8;
    --cds-text-helper: #6f6f6f;
    --cds-text-disabled: #16161640;
    --cds-text-error: #da1e28;
    --cds-text-inverse: #ffffff;
    --cds-text-on-color-disabled: #8d8d8d;
    /* 색상-버튼 */
    --cds-focus: #0f62fe;
    --cds-button-primary: #0f62fe;
    --cds-button-primary-hover: #0353e9;
    --cds-button-primary-active: #002d9c;
    --cds-button-secondary: #393939;
    --cds-button-secondary-hover: #474747;
    --cds-button-secondary-active: #6F6F6F;
    --cds-button-tertiary: #0f62fe;
    --cds-button-tertiary-hover: #0353e9;
    --cds-button-tertiary-active: #002d9c;
    --cds-button-danger-primary: #da1e28;
    --cds-button-danger-secondary: #da1e28;
    --cds-button-danger-hover: #ba1b23;
    --cds-button-danger-active: #750e13;
    --csd-button-separator: #e0e0e0;
    --csd-button-disabled: #c6c6c6;
    /* 색상-보더 */
    --cds-border-interactive: #0f62fe;
    --cds-border-subtle-01: #e0e0e0;
    --cds-border-subtle-02: #c6c6c6;
    --cds-border-strong-01: #8d8d8d;
    --cds-border-tile-01: #c6c6c6;
    --cds-border-tile-02: #a8a8a8;
    --cds-border-inverse: #161616;
    --cds-border-disabled: #c6c6c6;
    /* 아이콘 */
    --cds-icon-primary: #161616;
}

[data-bs-theme=dark] {
    --bs-gray-100: #1b1b29;
    --bs-gray-200: #F4F4F4;
    --bs-gray-300: #323248;
    --bs-gray-400: #474761;
    --bs-gray-500: #565674;
    --bs-gray-600: #6D6D80;
    --bs-gray-700: #92929F;
    --bs-gray-800: #CDCDDE;
    --bs-gray-900: #FFFFFF;
    --cds-dark-color: #FFFFFF;
    --white-color: #000000;
    --dark-color: #ffffff;
    --primary-bg-over-color: #0050e6;
    --primary-color: #0050e6;
    --border-primary-color: #FFFFFF;
    --carbon-textbox-bg: #262626;
    --carbon-textbox-border-bottom: #6f6f6f;
    --carbon-textbox-border-bottom-readonly: #e7e7e7;
    /* carbon */
    --cds-primary: #0f62fe;
    --cds-field: #262626;
    --cds-dark-color: #161616;
    --cds-link-primary: #0f62fe;
    --cds-link-primary-hover: #054ada;
    --cds-link-inverse: #78a9ff;
    --cds-support-success: #24a148;
    --cds-overlay: #16161670;
    --cds-layer-hover: #333333;
    --cds-toggle-off: #8d8d8d;
    /* 색상-텍스트 */
    --cds-text-primary: #f4f4f4;
    --cds-text-secondary: #c6c6c6;
    --cds-text-placeholder: #6f6f6f;
    --cds-text-helper: #8d8d8d;
    --cds-text-disabled: #f4f4f4;
    --cds-text-error: #ff8389;
    --cds-text-inverse: #161616;
    --cds-text-on-color-disabled: #ffffff;
    /* 색상-버튼 */
    --cds-focus: #ffffff;
    --cds-button-primary: #0f62fe;
    --cds-button-primary-hover: #0353e9;
    --cds-button-primary-active: #002d9c;
    --cds-button-secondary: #6f6f6f;
    --cds-button-secondary-hover: #606060;
    --cds-button-secondary-active: #393939;
    --cds-button-tertiary: #ffffff;
    --cds-button-tertiary-hover: #f4f4f4;
    --cds-button-tertiary-active: #c6c6c6;
    --cds-button-danger-primary: #da1e28;
    --cds-button-danger-secondary: #fa4d56;
    --cds-button-danger-hover: #ba1b23;
    --cds-button-danger-active: #750e13;
    --csd-button-separator: #161616;
    --csd-button-disabled: #525252;
    /* 색상-보더 */
    --cds-border-interactive: #4589ff;
    --cds-border-subtle-01: #525252;
    --cds-border-subtle-02: #6f6f6f;
    --cds-border-strong-01: #6f6f6f;
    --cds-border-tile-01: #525252;
    --cds-border-tile-02: #6f6f6f;
    --cds-border-inverse: #f4f4f4;
    --cds-border-disabled: #8d8d8d;
}

.background {
    font-size: 13px;
    border-bottom: 1px solid #ddd;
}


.cds-sub-title {
    color: var(--cds-text-helper);
}
.cds-important {
    color: var(--cds-text-error);
}

/* TAB */
.cds-tabs-wrap {
    min-width: 0;
    max-width: 1000px;  /* 임의 가로 길이 */
}

.cds-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}


.cds-tab-list {
    display: flex;
    gap: 1px;
    flex-wrap: nowrap;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}
    .cds-tab-list::-webkit-scrollbar {
        display: none;
    }

.cds-tabs-nav-item {
    flex: 0 0 auto;
}
.cds-tabs-link{
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.cds-tabs-link:disabled {
    background-color: transparent;
    color: var(--cds-text-disabled);
    box-shadow: none;
    cursor: not-allowed;
    outline: none;
}
    .cds-tabs-link:disabled:focus, .cds-tabs-link:disabled:active {
        outline: none !important;
    }

    .cds-tabs-link:disabled:hover {
        color: var(--cds-text-disabled) !important;
        border-bottom: 2px solid var(--cds-border-subtle-01) !important;
    }



.cds-tabs-overflow-nav-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    text-align: start;
    box-sizing: border-box;
    margin: 0;
    vertical-align: baseline;
    padding: 0;
    border: 0;
    appearance: none;
    background: none;
    cursor: pointer;
}
    .cds-tabs-overflow-nav-button:hover{
        background: var(--cds-layer-hover);
    }
    .cds-tabs-overflow-nav-button svg {
        fill: var(--cds-icon-primary, #161616);
    }
.cds-tabs-overflow-hidden {
    display: none;
}



/* 인풋 라벨 */
.cds-label {
    /*display: inline-block;*/
    font-size: 12px;
    font-weight: 400;
    color: var(--cds-text-secondary);
    margin-block-end: 8px;
}
.cds-label-disabled {
    font-size: 12px;
    font-weight: 400;
    margin-block-end: 8px;
    color: var(--cds-text-disabled);
}





/* 버튼 */
.cds-btn {
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    padding: 7px 64px 7px 16px;
    font-size: 12px;
    line-height: 16px;
    border-width: 1px;
    border-radius: 0;
    border-style: solid;
    box-sizing: border-box;
    cursor: pointer;
    justify-content: space-between;
    position: relative;
    text-decoration: none;
    text-align: start;
    transition: background 70ms cubic-bezier(0,0,.38,.9),box-shadow 70ms cubic-bezier(0,0,.38,.9),border-color 70ms cubic-bezier(0,0,.38,.9),outline 70ms cubic-bezier(0,0,.38,.9);
}
    .cds-btn:disabled {
        background-color: var(--csd-button-disabled);
        border-color: var(--csd-button-disabled);
        color: var(--cds-text-on-color-disabled);
        cursor: not-allowed;
    }


.cds-btn-lg {
    width: 100%;
    height: 52px !important;
    padding: 17px 16px !important;
}
.cds-btn-set {
    gap: 1px;
}
    .cds-btn-set > *:first-child {
        flex: 0 1 40%;
    }

    .cds-btn-set > *:last-child {
        flex: 0 1 60%;
    }
 
 
 .cds-btn-primary {
    position: relative;
/*    border-width: 1px;*/
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    background-color: var(--cds-primary);
    color: var(--white-color);
} .cds-btn-primary:hover {
        background-color: var(--primary-bg-over-color);
    }
    .cds-btn-primary:focus {
        outline: 1px solid var(--cds-focus);
        box-shadow: inset 0 0 0 1px var(--cds-focus),inset 0 0 0 2px #ffffff;
    } .cds-btn-primary:active {
        background-color: var(--cds-button-primary-active);
    }
      
.cds-btn-tertiary {
    position: relative;
    border-style: solid;
    border-color: #0f62fe;
    background-color: unset;
    color: var(--cds-button-primary);
} .cds-btn-tertiary:hover {
        background-color: var(--cds-button-tertiary-hover);
        color: var(--white-color);
    }
    .cds-btn-tertiary:focus {
        outline: 1px solid var(--cds-focus);
        box-shadow: inset 0 0 0 1px var(--cds-focus),inset 0 0 0 2px var(--white-color);
    } .cds-btn-tertiary:active {
        background-color: var(--cds-button-tertiary-active);
    }

.cds-btn-ghost {
    position: relative;
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    color: var(--cds-button-primary);
} .cds-btn-ghost:hover {
        background-color: #8D8D8D12;
        color: var(--cds-button-primary);
    }
    .cds-btn-ghost:focus {
        outline: 1px solid var(--cds-focus);
        box-shadow: inset 0 0 0 1px var(--cds-focus),inset 0 0 0 2px var(--white-color);
    } .cds-btn-ghost:active {
        background-color: #8D8D8D50;
    }
      
.cds-btn-secondary {
    position: relative;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    background-color: var(--cds-button-secondary);
    color: var(--white-color);
} .cds-btn-secondary:hover {
        background-color: var(--cds-button-secondary-hover);
    }
    .cds-btn-secondary:focus {
        outline: 1px solid #0f62fe;
        box-shadow: inset 0 0 0 1px var(--cds-focus),inset 0 0 0 2px var(--white-color);
    } .cds-btn-secondary:active {
        background-color: var(--cds-button-secondary-active);
    } 
      
.cds-btn-tertiary-secondary {
    position: relative;
    border-style: solid;
    border-color: var(--cds-button-secondary);
    background-color: unset;
    color: var(--cds-button-secondary);
} .cds-btn-tertiary-secondary:hover {
        background-color: var(--cds-button-secondary);
        color: var(--white-color);
    }
    .cds-btn-tertiary-secondary:focus {
        outline: 1px solid var(--cds-focus);
        box-shadow: inset 0 0 0 1px var(--cds-focus),inset 0 0 0 2px var(--white-color);
    } .cds-btn-tertiary-secondary:active {
        background-color: var(--cds-button-secondary-active);
    } 
      
.cds-btn-ghost-secondary {
    position: relative;
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    color: var(--cds-button-secondary);
}
    .cds-btn-ghost-secondary:hover {
        background-color: #8D8D8D12;
        color: var(--cds-button-secondary);
    }
    .cds-btn-ghost-secondary:focus {
        outline: 1px solid var(--cds-focus);
        box-shadow: inset 0 0 0 1px var(--cds-focus),inset 0 0 0 2px var(--white-color);
    } .cds-btn-ghost-secondary:active {
        background-color: #8D8D8D50;
    } .cds-btn-danger {
    position: relative;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    background-color: var(--cds-button-danger-primary);
    color: var(--white-color);
} .cds-btn-danger:hover {
        background-color: var(--cds-button-danger-hover);
    }
        .cds-btn-danger:focus {
            outline: 1px solid var(--cds-focus);
            box-shadow: inset 0 0 0 1px var(--cds-focus),inset 0 0 0 2px var(--white-color);
        } .cds-btn-danger:active {
        background-color: var(--cds-button-danger-active);
    }
          
 .cds-btn-tertiary-danger {
    position: relative;
    border-style: solid;
    border-color: #da1e28;
    background-color: unset;
    color: #da1e28;
} .cds-btn-tertiary-danger:hover {
        background-color: #B81922;
        color: #ffffff;
    } .cds-btn-tertiary-danger:focus {
        outline: 1px solid #0f62fe;
        box-shadow: inset 0 0 0 1px #0f62fe,inset 0 0 0 2px #ffffff;
    } .cds-btn-tertiary-danger:active {
        background-color: #750E13;
    } .cds-btn-ghost-danger {
    position: relative;
/*    border-width: 1px;*/
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    color: #da1e28;
} .cds-btn-ghost-danger:hover {
        background-color: #8D8D8D12;
        color: #da1e28;
    } .cds-btn-ghost-danger:focus {
        outline: 1px solid #0f62fe;
        box-shadow: inset 0 0 0 1px #0f62fe,inset 0 0 0 2px #ffffff;
    } .cds-btn-ghost-danger:active {
        background-color: #8D8D8D50;
    }

.cds-btn-icon {
    position: absolute;
    right: 12px;
}

.cds-icon-btn {
    position: relative;
    /*border-width: 1px;*/
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    color: var(--cds-text-primary);
    /*padding: 8px;*/
    padding: 8px 16px;
    font-size: 12px;
}
    .cds-icon-btn:hover {
        background-color: #8D8D8D12;
        color: #393939;
    }

    .cds-icon-btn:focus {
        /*outline: 1px solid #0f62fe;
        box-shadow: inset 0 0 0 1px #0F62FE,inset 0 0 0 2px #ffffff;*/
        outline: 0;
        box-shadow: none !important;
        border: 2px solid var(--cds-primary);
    }

    .cds-icon-btn:active {
        background-color: #8D8D8D50;
    }

.cds-left-icon {
    vertical-align: top;
    margin-right: 8px;
}

/* tag */
.cds-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    cursor: default;
    padding: 2px 8px 4px;
    font-size: 12px;
}

.cds-tag-label {
    white-space: nowrap;
}

.cds-tag-blue {
    background-color: #D0E2FF;
    color: #0043CE;
}

.cds-tag-red {
    background-color: #FFD7D9;
    color: #A2191F;
}

.cds-tag-green {
    background-color: #A7F0BA;
    color: #0E6027;
}

.cds-tag-gray {
    background-color: #E0E0E0;
    color: #161616;
}



.cds-text-input-wrap {
    margin-bottom: 16px;
}

/* 버튼이랑 묶여있을 때 사용 */
.cds-text-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* input 가로 정렬 */
.cds-input-horizon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

    .cds-input-horizon .cds-label {
        flex: 1 0 auto;
        margin-bottom: 0 !important;
    }


/* 텍스트 박스 input.*/
input.carbon-textbox {
    background-color: var(--cds-field, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-bottom: 1px solid var(--carbon-textbox-border-bottom, #8d8d8d) !important;
    padding: 7px 10px;
} .carbon-textbox::placeholder {
    color: var(--cds-text-placeholder) !important;
    font-style: unset;
    font-size: 12px;
} .carbon-textbox:focus {
        outline: 2px solid var(--cds-button-primary) !important;
    } .carbon-textbox.invalid {
        outline: 2px solid red !important;
    } .carbon-textbox:disabled {
    background-color: var(--white-color, #FFFFFF) !important;
    border-bottom: 1px solid var(--cds-border-subtle-01, #8d8d8d) !important;
} .carbon-textarea {
    background-color: var(--cds-field, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
    padding: 7px 10px;
}
    .carbon-textarea::placeholder {
        color: var(--cds-text-placeholder);
        font-style: unset;
        font-size: 12px;
    } .carbon-textarea:focus {
        outline: 2px solid var(--cds-button-primary) !important;
    } .carbon-textarea:disabled {
    background-color: var(--white-color, #FFFFFF) !important;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
}
/* 체크박스 기본 스타일 */
.carbon-checkbox {
    appearance: none;
    border: 1px solid var(--cds-text-primary) !important;
    border-radius: 2px;
    width: 16px !important;
    height: 16px !important;
    position: relative !important;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    background-color: var(--white-color, #FFFFFF) !important;
}
/* 체크된 상태 배경 */
.carbon-checkbox:checked {
        background-color: var(--cds-dark-color, #FFFFFF) !important;
        position: relative !important;
    }
/* 체크 표시 */
    .carbon-checkbox:checked::before {
        block-size: 5px; /*.3125rem;*/
        border-block-end: 1.5px solid #ffffff;
        border-inline-start: 1.5px solid #ffffff;
        content: "";
        inline-size: 8.5px; /*.5rem*/
        inset-block-start: 2.5px; /*.2rem;*/
        inset-inline-start: 3.5px; /*.25rem;*/
        margin-block-start: -2px; /*-.1875rem*/
        position: absolute;
        transform: scale(1) rotate(-45deg);
        transform-origin: bottom right;
    } .carbon-checkbox:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--cds-focus);
    }
.carbon-checkbox:disabled {
        background-color: #f2f2f2; 
        border-color: #d9d9d9;
        cursor: not-allowed;
        opacity: 0.3; 
}
/*.carbon-checkbox:checked:disabled {
        background-color: red !important;
        block-size: .3125rem !important;
        border-block-end: 1.5px solid #ffffff !important;
        border-inline-start: 1.5px solid #ffffff !important;
        content: "" !important;
        inline-size: .5rem !important;
        inset-block-start: .2rem !important;
        inset-inline-start: .25rem !important;
        margin-block-start: -.1875rem !important;
        position: absolute !important;
        transform: scale(1) rotate(-45deg) !important;
        transform-origin: bottom right !important;
    }*/
/* 라디오 버튼 */
.cds-radio-wrap{
    margin-bottom: 16px;
}
.cds-form-radio-wrap {
    
}

.carbon-radio {
    appearance: none;
    border: 1px solid var(--cds-dark-color, #161616) !important;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0) !important;
    position: relative;
    width: 18px !important;
    height: 18px !important;
    margin-block: 1.25px !important;
/*    margin-inline: 0px 8px !important;*/
    cursor: pointer;
    transition: border 0.1s ease-in-out;
} .carbon-radio:checked {
        border-color: var(--cds-dark-color);
    } .carbon-radio:checked::after {
            content: "";
            position: absolute;
            top: 4px; 
            left: 4px;
            width: 8px; 
            height: 8px;
            border-radius: 50%;
            background-color: var(--cds-dark-color);
        }
    .carbon-radio:focus {
        outline: 2px solid var(--cds-focus);
        outline-offset: 1px;
    }
/* 비활성화 상태 */
.carbon-radio:disabled {
        background-color: #f2f2f2;
        border-color: #d9d9d9;
        cursor: not-allowed;
/*        opacity: 0.3;*/
    } .carbon-radio-label {
    margin-right: 16px;
}



/* 콤보박스 아이템 전체 컨테이너 */
.carbon-combobox {
    background-color: var(--cds-field, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
} .carbon-combobox:focus {
        outline: 2px solid var(--cds-primary) !important;
    } .carbon-combobox:not(.disabled):focus-within {
        outline: 2px solid var(--cds-primary) !important;
    } .carbon-combobox.disabled:focus-within {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
        outline: none !important;
    } .carbon-combobox.disabled {
        background-color: var(--white-color, #FFFFFF) !important;
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    } input.carbon-combobox-input {
    background-color: var(--cds-field, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    }

.carbon-combobox .template-cotainer{
    background-color: var(--cds-field);
}



        /*    input.carbon-combobox-input:read-only,
    input.carbon-combobox-input[readonly],*/
        /*    input.carbon-combobox-input.disabled,
    input.carbon-combobox-input:disabled {
        background-color: var(--white-color, #FFFFFF) !important;
        border: none !important;
    }*/
        /* readonly일 때만 */
        /*    input.carbon-combobox-input:read-only,
    input.carbon-combobox-input[readonly] {
        background-color: var(--white-color, #FFFFFF) !important;
    }*/
        /* disabled일 때만 */
        input.carbon-combobox-input:disabled, input.carbon-combobox-input.disabled {
            background-color: var(--white-color, #FFFFFF) !important;
            /*        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;*/
        } .carbon-combobox-item {

    }
        .carbon-combobox-item:hover {
            background-color: var(--cds-primary) !important;
            color: #fff;
            border-color: transparent;
            color: var(--cds-text-primary);
        } 
 .carbon-dropdown-button {
    background-color: var(--cds-field, #F4F4F4) !important;
    border: 0px solid black !important;
} .carbon-dropdown-button.disabled, .carbon-dropdown-button.disabled {
        background-color: var(--white-color, #FFFFFF) !important;
        border: none !important;
    } .carbon-item-container {
} .carbon-item-container.selected {
        border: 1px solid var(--cds-button-primary);
    } .carbon-item-container:focus {
        border: 2px solid var(--cds-button-primary) !important;
    } .carbon-item-container:focus-within {
        border-color: var(--cds-button-primary);
        outline: none;
    }


/* AutoCompleted*/
.cds-autocompleted {
    background-color: var(--cds-field, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-block-end: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
    color: var(--cds-dark-color);
    width: 400px !important;
}
    .cds-autocompleted input:focus {
        outline: 2px solid var(--cds-focus);
        border-radius: 0;
        outline-offset: 1px;
        box-shadow: none !important;
    }
    .cds-autocompleted.disabled {
        background-color: var(--white-color, #FFFFFF) !important;
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    }
    .cds-autocompleted li:hover {
        background-color: var(--cds-layer-selected) !important;
        color: var(--cds-text-primary);
        font-weight:inherit !important;
        
    }

    .cds-autocompleted .tag {
        padding: 0 16px !important;
    }



    .cds-autocompleted-tagitem {
        background-color: var(--bs-gray-300, #E1E3EA) !important;
    }

/*.cds-autocompleted-border {
    border: 0px solid #fff;
}

    .cds-autocompleted-border:focus-within {
        border: 2px solid var(--cds-button-primary) !important;
    }*/

.cds-combobox-input {

}


.autocomplete-listtest{
    background-color: var(--cds-field) !important;
}

.autocomplete-listtest li:hover {
    border-left: 2px solid transparent;
}

.cds-combobox-list {
    display: block;
    overflow: hidden;
    padding: 11px 0 !important;
    margin: 0 16px !important;
    color: var(--cds-text-secondary);
    box-sizing: border-box;
    border: 0px;
    background-color: var(--cds-field) !important;
    border-block-end: 1px solid transparent;
    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--cds-border-suibtle-01);
    vertical-align: baseline;
/*    outline: 2px solid transparent;
    outline-offset: -2px;*/
/*    padding-inline-end: 24px;*/
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
    .cds-combobox-list:hover {
        border-color: transparent;
        color: var(--cds-text-primary);
    }




    /* 각각의 아이템 */
    .carbon-item {
        background-color: var(--cds-field, #F4F4F4) !important;
        padding: 3px 10px;
        height: 26px;
        min-height: 26px;
        font-size: 12px;
        font-weight: 400;
    }
        .carbon-item:hover {
            background-color: var(--cds-layer-selected) !important;
            color: #fff;
        } .carbon-item:focus {
        border: 2px solid var(--cds-button-primary) !important;
    } .carbon-item.selected {
        border: 1px solid var(--cds-button-primary);
        color: #fff;
    } .carbon-item:focus-within {
        border-color: var(--cds-button-primary); 
        outline: none;
    }

.carbon-switch {
    width: 40px !important;
    height: 20px !important;
    border-radius: 12px;
    background-color: var(--white-color) !important;
    transition: background-color 70ms cubic-bezier(0.2, 0, 1, 0.9);
}
        .carbon-switch .form-check-input {
            background-color: var(--cds-toggle-off, #8d8d8d) !important;
            width: 48px !important;
            height: 24px !important;
        }
    .carbon-switch .form-check-input:checked {
        background-color: var(--cds-support-success, #24a148) !important; /* 녹색 */
        border-color: #24a148;
    }
            .carbon-switch .form-check-input:focus {
                outline: 2px solid var(--cds-focus);
                outline-offset: 1px;
                box-shadow: none !important;
            }


/*.cds--toggle__switch {
    position: relative;
    border-radius: .75rem;
    background-color: var(--cds-toggle-off, #8d8d8d);
    block-size: 1.5rem;
    inline-size: 3rem;
    transition: background-color 70ms cubic-bezier(0.2, 0, 1, 0.9);
}*/
/* textbox에서 label 파라미터가 라디오 버튼, 체크박스 제외하고는 없음.
    .carbon-checkbox-label {
}

.carbon-checkbox-label:disabled {
    border-color: #d9d9d9 !important;*/ /* 흐린 테두리 */
    /*cursor: not-allowed !important;*/ /* 마우스 포인터 변경 */
    /*opacity: 0.3 !important;*/ /* 투명도 */
/*}*/


/* MODAL */
.cds-modal {
    background-color: var(--white-color);
    align-items: center;
    justify-content: center;

}
.cds-modal-header {
    position: relative;
    margin-block-end: 8px;
    padding-block-start: 16px;
    padding-inline: 16px 48px;
}

.cds-modal-heading {
    display: block;
    margin: 0;
    vertical-align: baseline;
    font-size: 18px;
    color: var(--cds-text-primary);
}



.cds-modal-close-btn {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
}
.cds-modal-close {
    padding: 12px;
    color: var(--cds-text-primary);
    border: 2px solid transparent;
    background-color: transparent;
    block-size: 48px;
    cursor: pointer;
    inline-size: 48px;
    transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}
    .cds-modal-close:hover{
        background-color: var(--cds-layer-hover);
    }
    .cds-modal-close:focus{
        outline: 0;
        box-shadow:none !important;
        border: 2px solid var(--cds-primary);
    }

.cds-modal-close-icon {
    block-size: 20px;
    fill: var(--cds-primary);
    inline-size: 20px;
}

.cds-modal-btn-set {
    gap: 1px;
}

    .cds-modal-btn-set > * {
        flex: 100%;
    }


.cds-modal-footer {
   
}

.cds-modal-footer > * {
    flex: 100% !important;
}




/* empty 페이지 */
.empty-state {

}

.empty-state-header {
        font-size: 20px;
    }
.empty-state-subtitle {
    font-size: 14px;
}



/* Form */
.cds-top-btn {
    
}

.cds-form {
    align-items: center;
    justify-content: center;
}

.cds-form-header {
    position: relative;
    margin-block-end: 8px;
    padding-block-start: 16px;
    padding-inline: 16px 48px;
}

.cds-form-heading {
    display: block;
    margin: 0;
    vertical-align: baseline;
    font-size: 18px;
    color: var(--cds-text-primary);
}
.cds-form-title{
    font-size: 15px;
    padding: 24px 0;
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

.cds-form-grid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 16px;
}

.cds-form-close-btn {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
}

.cds-form-close {
    padding: 12px;
    color: var(--cds-text-primary);
    border: 2px solid transparent;
    background-color: transparent;
    block-size: 48px;
    cursor: pointer;
    inline-size: 48px;
    transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
}

    .cds-form-close:hover {
        background-color: var(--cds-layer-hover);
    }

    .cds-form-close:focus {
        outline: 0;
        box-shadow: none !important;
        border: 2px solid var(--cds-primary);
    }

.cds-form-close-icon {
    block-size: 20px;
    fill: var(--cds-primary);
    inline-size: 20px;
}


.cds-form-btn-set {
    gap: 1px;
}

    .cds-form-btn-set > * {
        flex: 50%;
    }

.cds-form-footer {
}

    .cds-form-footer > * {
        flex: 100% !important;
    }

.cds-form-input{
    flex: 0 1 auto !important;
}

.cds-form-btn-lg {
    width: 100%;
    height: 52px;
    padding: 12px 16px 22px !important;
}


.cds-form-btn-ghost {
    position: relative;
    border-style: solid;
    border-color: transparent;
    border-top: 1px solid var(--cds-border-subtle-01);
    background-color: transparent;
    color: var(--cds-text-primary);
}

    .cds-form-btn-ghost:hover {
        background-color: #8D8D8D12;
        color: var(--cds-text-primary);
    }

    .cds-form-btn-ghost:focus {
        outline: 1px solid var(--cds-focus);
        box-shadow: inset 0 0 0 1px var(--cds-focus),inset 0 0 0 2px var(--white-color);
    }

    .cds-form-btn-ghost:active {
        background-color: #8D8D8D50;
    }

/* 조회 form 조회 버튼 */
.cds-search-btn {
    display: flex;
    justify-content: right;
}





/* 사용자등록 FORM */
.cds-user-img-input {
    border: 1px solid var(--cds-border-subtle-01);
}

.cds-user-img-wrap .cds-user-file-label {
    color: var(--cds-text-secondary);
}



/* 트리구조 */
.cds-tree {
    list-style: none;
    width: 100%;
    padding:0;
    margin:0;
}

.cds-tree-node {
    position: relative;
}

.cds-tree-node-label {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0;
    cursor: pointer;
    color: var(--cds-text-secondary);
    transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
    outline: 2px solid transparent;
    outline-offset: -2px;
}
.cds-tree-node-selected::before {
    position: absolute;
    background-color: var(--cds-primary);
    block-size: 100%;
    content: "";
    inline-size: 4px;
    inset-block-start: 0;
    inset-inline-start: 0;
}

    .cds-tree-node-label:hover {
        background-color: var(--cds-layer-hover);
        color: var(--cds-text-primary);
    }

    .cds-tree-node-label:focus {
        outline: 2px solid var(--cds-primary);
        outline-offset: -2px;
    }

    .cds-tree-node-label:active {
     
    }

/* Selected State */
.cds-tree-node-selected > .cds-tree-node-label {
    background-color: var(--cds-layer-selected);
    color: var(--cds-text-primary);
}

.cds-tree-node-selected > .cds-tree-node-label:hover {
    background-color: var(--cds-layer-selected-hover);
}

.cds-tree-node-selected > .cds-tree-node-label .cds-tree-node-label-text {
    color: var(--cds-text-primary);
}

/* Active State (for keyboard navigation) */
.cds-tree-node-active > .cds-tree-node-label {
    position: relative;
}

    .cds-tree-node-active > .cds-tree-node-label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: var(--cds-primary);
    }

/* Expand Icon */
.cds-tree-node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
    fill: #161616;
}

    .cds-tree-node-icon svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

.cds-tree-node-expanded > .cds-tree-node-label .cds-tree-node-icon {
    transform: rotate(90deg);
}

/* Leaf nodes (no expand icon) */
.cds-tree-node-leaf .cds-tree-node-icon {
    visibility: hidden;
}

/* Node Icon (file/folder icon) */
.cds-tree-node-label-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
}

    .cds-tree-node-label-icon svg {
        width: 16px;
        height: 16px;
        fill: #525252;
    }

/* Label Text */
.cds-tree-node-label-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: 0.16px;
/*    color: var(--cds-text-secondary);*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Children */
.cds-tree-node-children {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.cds-tree-node-expanded > .cds-tree-node-children {
    max-height: 2000px;
}

.cds-tree-node-children .cds-tree-node-label-text {
    padding-left: 16px;
}



/* Spacing between nodes */
.cds-tree-node + .cds-tree-node {
    margin-top: 0;
}

/* Disabled State */
.cds-tree-node-disabled > .cds-tree-node-label {
    color: #c6c6c6;
    cursor: not-allowed;
}

    .cds-tree-node-disabled > .cds-tree-node-label:hover {
        background-color: transparent;
    }

.cds-tree-node-disabled .cds-tree-node-icon,
.cds-tree-node-disabled .cds-tree-node-label-icon {
    fill: #c6c6c6;
}



/* 아코디언 */

/* Accordion Base */
.cds-accordion {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.cds-accordion-item {
    border-top: 1px solid #e0e0e0;
    transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

    .cds-accordion-item:last-child {
        border-bottom: 1px solid #e0e0e0;
    }

/* Accordion Header */
.cds-accordion-item-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    margin: 0;
    cursor: pointer;
    background-color: transparent;
    border: none;
    text-align: left;
    color: #161616;
    transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
    outline: 2px solid transparent;
    outline-offset: -2px;
}

    .cds-accordion-item-heading:hover {
        background-color: #e5e5e5;
    }

    .cds-accordion-item-heading:focus {
        outline: 2px solid #0f62fe !important;
        outline-offset: -2px;
    }

/* Expanded state */
.cds-accordion-item.cds-accordion-item-expanded .cds-accordion-item-heading {
    background-color: transparent;
}

/* Accordion Title */
.cds-accordion-item-title {
    flex: 1;
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: 0.16px;
    font-weight: 400;
    color: #161616;
    margin: 0;
    padding-right: 16px;
}

/* Chevron Icon */
.cds-accordion-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
    fill: #161616;
}

    .cds-accordion-item-icon svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

.cds-accordion-item-expanded .cds-accordion-item-icon {
    transform: rotate(180deg);
}

/* Accordion Content */
.cds-accordion-item-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.cds-accordion-item-expanded .cds-accordion-item-content {
    max-height: 1000px;
}

.cds-accordion-item-content-inner {
    padding: 0 16px 16px 16px;
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: 0.16px;
    color: #525252;
}

    .cds-accordion-item-content-inner p {
        margin: 0 0 16px 0;
    }

        .cds-accordion-item-content-inner p:last-child {
            margin-bottom: 0;
        }

/* Disabled State */
.cds-accordion-item.cds-accordion-item-disabled .cds-accordion-item-heading {
    color: #c6c6c6;
    cursor: not-allowed;
}

    .cds-accordion-item.cds-accordion-item-disabled .cds-accordion-item-heading:hover {
        background-color: transparent;
    }

.cds-accordion-item.cds-accordion-item-disabled .cds-accordion-item-icon {
    fill: #c6c6c6;
}


/***** ADMIN *****/

/* 접속 사용자 관리 */
/* Table */
.cds-table-container {
    width: 100%;
    overflow-x: auto;
}
.cds-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}
.cds-table-thead {
    background-color: #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.cds-table-th {
    padding: 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    color: #161616;
    letter-spacing: 0.16px;
    line-height: 1.29;
}
.cds-table-tbody {
    background-color: #ffffff;
}
.cds-table-tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
    .cds-table-tr:hover {
        background-color: #e5e5e5;
    }
    .cds-table-tr:last-child {
        border-bottom: none;
    }
.cds-table-td {
    padding: 16px;
    font-size: 12px;
    color: #161616;
    letter-spacing: 0.16px;
    line-height: 1.29;
}
.cds-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #161616;
}
.cds-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
    .cds-status-indicator.connected {
        background-color: #24a148;
    }
    .cds-status-indicator.disconnected {
        background-color: #161616;
    }
.section-card {
    background-color: var(--white-color);
    margin-bottom: 32px;
}


/* 사용자별 상세 로그 */
.cds-user-top{
    font-size: 16px;
}

.cds-time-line {
    border-left: 1px solid #e0e0e0;
    height: 23px;
    margin: 8px 16px;
}

.cds-timeline-time {
    position: relative;
}

    .cds-timeline-time::after {
        content: '';
        position: absolute;
        left: 16px;
        top: 28px;
        bottom: -40px;
        width: 1px;
        background: #e0e0e0;
    }
.cds-timeline-content{
    background-color: var(--cds-field);
}




/* 원격 */
.cds-top-title {
    font-size: 24px;
}
.cds-description {
    color: var(--cds-text-primary);
}


.connection-card {
    background-color: var(--white-color);
    margin-bottom: 32px;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom:8px
}

.Remote-addr{
    font-size:48px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 2px;
}