[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;
    --carbon-dark-color: #161616;
    --dark-color: #000000;
    --primary-color: #0050e6;
    --white-color: #FFFFFF;
    --primary-bs-txt-color: #fff;
    --primary-bg-color: #0f62fe;
    --primary-bg-over-color: #0050e6;
    --border-primary-color: #0050e6;
    --carbon-textbox-bg: #F4F4F4;
    --carbon-textbox-border-bottom: #8d8d8d;
    --carbon-textbox-border-bottom-readonly: #e7e7e7;
    --carbon-combobox-bg: #1967d2;
    --success-color: #24a148;
    --toggle-off: #8d8d8d;
    /* carbon */
    --cds-primary: #0f62fe;
    --cds-field: #ffffff;
    --cds-field-01: #f4f4f4;
    --cds-field-02: #ffffff;
    --cds-field-03: #f4f4f4;
    --cds-bg-white: #ffffff;
    --cds-white-color: #FFFFFF;
    --cds-dark-color: #161616;
    --cds-overlay: #16161650;
    --cds-background-hover: #8d8d8d30;
    --cds-background-active: #8d8d8d50;
    --cds-layer-01: #f4f4f4;
    --cds-layer-02: #e0e0e0;
    --cds-layer-03: #fafafa;
    --cds-layer-selected: #e0e0e0;
    --cds-layer-selected-hover: #d1d1d1;
    --cds-layer-hover: #e8e8e8;
    --cds-layer-accent: #e0e0e0;
    --cds-toggle-off: #8d8d8d;
    --cds-table-header: #e0e0e0;
    --cds-echo-bubble: #f4f4f4;
    /* 색상-텍스트 */
    --cds-text-primary: #161616;
    --cds-text-secondary: #525252;
    --cds-text-placeholder: #a8a8a8;
    --cds-text-helper: #6f6f6f;
    --cds-text-disabled: #16161625;
    --cds-text-error: #da1e28;
    --cds-text-inverse: #ffffff;
    --cds-text-on-color: #ffffff;
    --cds-text-on-color-disabled: #8d8d8d;
    --cds-link-primary: #0f62fe;
    --cds-link-primary-hover: #054ada;
    --cds-link-secondary: #0043ce;
    --cds-link-inverse: #78a9ff;
    --cds-link-inverse-hover: #a6c8ff;
    /* 색상-버튼 */
    --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: #b81921;
    --cds-button-danger-active: #750e13;
    --csd-button-separator: #e0e0e0;
    --csd-button-disabled: #c6c6c6;
    --cds-button-ghost-active: #8D8D8D50;
    /* 색상-보더 */
    --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;
    --cds-icon-secondary: #525252;
    --cds-icon-danger: #da1e28;
    --cds-icon-disabled: #c6c6c6;
    /* 태그 */
    --cds-tag-bg-blue: #D0E2FF;
    --cds-tag-bg-red: #FFD7D9;
    --cds-tag-bg-green: #A7F0BA;
    --cds-tag-bg-gray: #E0E0E0;
    --cds-tag-text-blue: #0043CE;
    --cds-tag-text-red: #A2191F;
    --cds-tag-text-green: #0E6027;
    --cds-tag-text-gray: #161616;
    /* notification */
    --cds-notification-danger: #FFF1F1;
    --cds-notification-success: #DEFBE6;
    --cds-notification-info: #EDF5FF;
    /* Support Color */
    --cds-support-error: #da1e28;
    --cds-support-success: #24a148;
    --cds-support-warning: #f1c21b;
    --cds-support-info: #0043CE;
    --cds-support-error-inverse: #fa4d56;
    --cds-support-success-inverse: #42be65;
    --cds-support-warning-inverse: #f1c21b;
    --cds-support-info-inverse: #4589ff;
    --cds-support-caution: #ff832b;
    --cds-support-undefined: #8a3ffc;
}

[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;
    --carbon-dark-color: #FFFFFF;
    --white-color: #000000;
    --dark-color: #ffffff;
    --primary-bg-color: #0f62fe;
    --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-combobox-bg: #1967d2;
    --success-color: #24a148;
    --toggle-off: #8d8d8d;
    /* carbon */
    --cds-primary: #0f62fe;
    --cds-field: #262626;
    --cds-field-01: #161616;
    --cds-field-02: #393939;
    --cds-field-03: #393939;
    --cds-bg-white: #ffffff;
    --cds-white-color: #161616;
    --cds-dark-color: #FFFFFF;
    --cds-overlay: #16161670;
    --cds-background-hover: #8d8d8d29;
    --cds-background-active: #8d8d8d40;
    --cds-layer-01: #262626;
    --cds-layer-02: #525252;
    --cds-layer-03: #333333;
    --cds-layer-selected: #393939;
    --cds-layer-selected-hover: #4c4c4c;
    --cds-layer-hover: #333333;
    --cds-layer-accent: #393939;
    --cds-toggle-off: #6f6f6f;
    --cds-table-header: #393939;
    --cds-echo-bubble: #393939;
    /* 색상-텍스트 */
    --cds-text-primary: #f4f4f4;
    --cds-text-secondary: #c6c6c6;
    --cds-text-placeholder: #6f6f6f;
    --cds-text-helper: #8d8d8d;
    --cds-text-disabled: #f4f4f425;
    --cds-text-error: #ff8389;
    --cds-text-inverse: #161616;
    --cds-text-on-color: #ffffff;
    --cds-text-on-color-disabled: #ffffff;
    --cds-link-primary: #78a9ff;
    --cds-link-primary-hover: #a6c8ff;
    --cds-link-secondary: #a6c8ff;
    --cds-link-inverse: #0f62fe;
    --cds-link-inverse-hover: #0043ce;
    /* 색상-버튼 */
    --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: #0353e9;
    --cds-button-tertiary-active: #c6c6c6;
    --cds-button-danger-primary: #da1e28;
    --cds-button-danger-secondary: #fa4d56;
    --cds-button-danger-hover: #b81921;
    --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;
    /* 아이콘 */
    --cds-icon-primary: #f4f4f4;
    --cds-icon-secondary: #c6c6c6;
    --cds-icon-danger: #da1e28;
    --cds-icon-disabled: #f4f4f440;
    /* 태그 */
    --cds-tag-bg-blue: #D0E2FF;
    --cds-tag-bg-red: #FFD7D9;
    --cds-tag-bg-green: #A7F0BA;
    --cds-tag-bg-gray: #E0E0E0;
    --cds-tag-text-blue: #0043CE;
    --cds-tag-text-red: #A2191F;
    --cds-tag-text-green: #0E6027;
    --cds-tag-text-gray: #161616;
    /* notification */
    --cds-notification-danger: #262626;
    --cds-notification-success: #262626;
    --cds-notification-info: #262626;
    /* Support Color */
    --cds-support-error: #fa4d56;
    --cds-support-success: #42be65;
    --cds-support-warning: #f1c21b;
    --cds-support-info: #4589ff;
    --cds-support-error-inverse: #da1e28;
    --cds-support-success-inverse: #24a148;
    --cds-support-warning-inverse: #f1c21b;
    --cds-support-info-inverse: #0043ce;
    --cds-support-caution: #ff832b;
    --cds-support-undefined: #a56eff;
}

:root {
    --cds-grid-num: 4;
}

@media (max-width: 1199px) {
    :root {
        --cds-grid-num: 2;
    }
}

@media (max-width: 850px) {
    :root {
        --cds-grid-num: 1;
    }
}

/* 버튼 */
.carbon-btn-primary {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    background-color: var(--primary-bg-color);
    color: var(--primary-bs-txt-color);
    padding: 15px;
}

    .carbon-btn-primary:hover {
        background-color: var(--primary-bg-over-color);
    }

/* 글자 길면 줄임 */
.cds-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* 영문 줄바꿈 */
.cds-word-break {
    word-break: break-all;
}

/*  우측 슬라이더 높이 */
.cds-slider-container {
    max-height: calc(100vh - 96px);
}



/* ====================================
   여백
   부트스트랩 rem 여백 px로 변경
   ==================================== */
.cds-p-0 {
    padding: 0px !important;
}
.cds-p-1{
    padding: 2px !important;
}
.cds-p-2{
    padding: 4px !important;
}
.cds-p-3{
    padding: 8px !important;
}
.cds-p-4{
    padding: 12px !important;
}
.cds-p-5{
    padding: 16px !important;
}
.cds-p-6{
    padding: 24px !important;
}
.cds-p-7{
    padding: 32px !important;
}
.cds-p-8{
    padding: 40px !important;
}
.cds-p-9{
    padding: 48px !important;
}
.cds-p-10{
    padding: 64px !important;
}
.cds-p-11{
    padding: 80px !important;
}
.cds-p-12{
    padding: 96px !important;
}
.cds-p-13{
    padding: 160px !important;
}


.cds-ps-0 {
    padding-left: 0px !important;
}
.cds-ps-1 {
    padding-left: 2px !important;
}
.cds-ps-2 {
    padding-left: 4px !important;
}
.cds-ps-3 {
    padding-left: 8px !important;
}
.cds-ps-4 {
    padding-left: 12px !important;
}
.cds-ps-5 {
    padding-left: 16px !important;
}
.cds-ps-6 {
    padding-left: 24px !important;
}
.cds-ps-7 {
    padding-left: 32px !important;
}
.cds-ps-8 {
    padding-left: 40px !important;
}
.cds-ps-9 {
    padding-left: 48px !important;
}
.cds-ps-10 {
    padding-left: 64px !important;
}
.cds-ps-11 {
    padding-left: 80px !important;
}
.cds-ps-12 {
    padding-left: 96px !important;
}
.cds-ps-13 {
    padding-left: 160px !important;
}

.cds-pe-0 {
    padding-right: 0px !important;
}
.cds-pe-1 {
    padding-right: 2px !important;
}
.cds-pe-2 {
    padding-right: 4px !important;
}
.cds-pe-3 {
    padding-right: 8px !important;
}
.cds-pe-4 {
    padding-right: 12px !important;
}
.cds-pe-5 {
    padding-right: 16px !important;
}
.cds-pe-6 {
    padding-right: 24px !important;
}
.cds-pe-7 {
    padding-right: 32px !important;
}
.cds-pe-8 {
    padding-right: 40px !important;
}
.cds-pe-9 {
    padding-right: 48px !important;
}
.cds-pe-10 {
    padding-right: 64px !important;
}
.cds-pe-11 {
    padding-right: 80px !important;
}
.cds-pe-12 {
    padding-right: 96px !important;
}
.cds-pe-13 {
    padding-right: 160px !important;
}


.cds-pb-0 {
    padding-bottom: 0px !important;
}
.cds-pb-1 {
    padding-bottom: 2px !important;
}
.cds-pb-2 {
    padding-bottom: 4px !important;
}
.cds-pb-3 {
    padding-bottom: 8px !important;
}
.cds-pb-4 {
    padding-bottom: 12px !important;
}
.cds-pb-5 {
    padding-bottom: 16px !important;
}
.cds-pb-6 {
    padding-bottom: 24px !important;
}
.cds-pb-7 {
    padding-bottom: 32px !important;
}
.cds-pb-8 {
    padding-bottom: 40px !important;
}
.cds-pb-9 {
    padding-bottom: 48px !important;
}
.cds-pb-10 {
    padding-bottom: 64px !important;
}
.cds-pb-11 {
    padding-bottom: 80px !important;
}
.cds-pb-12 {
    padding-bottom: 96px !important;
}
.cds-pb-13 {
    padding-bottom: 160px !important;
}


.cds-pt-0 {
    padding-top: 0px !important;
}
.cds-pt-1 {
    padding-top: 2px !important;
}
.cds-pt-2 {
    padding-top: 4px !important;
}
.cds-pt-3 {
    padding-top: 8px !important;
}
.cds-pt-4 {
    padding-top: 12px !important;
}
.cds-pt-5 {
    padding-top: 16px !important;
}
.cds-pt-6 {
    padding-top: 24px !important;
}
.cds-pt-7 {
    padding-top: 32px !important;
}
.cds-pt-8 {
    padding-top: 40px !important;
}
.cds-pt-9 {
    padding-top: 48px !important;
}
.cds-pt-10 {
    padding-top: 64px !important;
}
.cds-pt-11 {
    padding-top: 80px !important;
}
.cds-pt-12 {
    padding-top: 96px !important;
}
.cds-pt-13 {
    padding-top: 160px !important;
}


.cds-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.cds-px-1 {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.cds-px-2 {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.cds-px-3 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.cds-px-4 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.cds-px-5 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.cds-px-6 {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.cds-px-7 {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

.cds-px-8 {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.cds-px-9 {
    padding-left: 48px !important;
    padding-right: 48px !important;
}

.cds-px-10 {
    padding-left: 64px !important;
    padding-right: 64px !important;
}

.cds-px-11 {
    padding-left: 80px !important;
    padding-right: 80px !important;
}

.cds-px-12 {
    padding-left: 96px !important;
    padding-right: 96px !important;
}

.cds-px-13 {
    padding-left: 160px !important;
    padding-right: 160px !important;
}


.cds-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.cds-py-1 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.cds-py-2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.cds-py-3 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.cds-py-4 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.cds-py-5 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.cds-py-6 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.cds-py-7 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.cds-py-8 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.cds-py-9 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

.cds-py-10 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

.cds-py-11 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.cds-py-12 {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

.cds-py-13 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
}


.cds-m-0 {
    margin: 0px !important;
}
.cds-m-1 {
    margin: 2px !important;
}
.cds-m-2 {
    margin: 4px !important;
}
.cds-m-3 {
    margin: 8px !important;
}
.cds-m-4 {
    margin: 12px !important;
}
.cds-m-5 {
    margin: 16px !important;
}
.cds-m-6 {
    margin: 24px !important;
}
.cds-m-7 {
    margin: 32px !important;
}
.cds-m-8 {
    margin: 40px !important;
}
.cds-m-9 {
    margin: 48px !important;
}
.cds-m-10 {
    margin: 64px !important;
}
.cds-m-11 {
    margin: 80px !important;
}
.cds-m-12 {
    margin: 96px !important;
}
.cds-m-13 {
    margin: 160px !important;
}


.cds-ms-0 {
    margin-left: 0px !important;
}

.cds-ms-1 {
    margin-left: 2px !important;
}

.cds-ms-2 {
    margin-left: 4px !important;
}

.cds-ms-3 {
    margin-left: 8px !important;
}

.cds-ms-4 {
    margin-left: 12px !important;
}

.cds-ms-5 {
    margin-left: 16px !important;
}

.cds-ms-6 {
    margin-left: 24px !important;
}

.cds-ms-7 {
    margin-left: 32px !important;
}

.cds-ms-8 {
    margin-left: 40px !important;
}

.cds-ms-9 {
    margin-left: 48px !important;
}

.cds-ms-10 {
    margin-left: 64px !important;
}

.cds-ms-11 {
    margin-left: 80px !important;
}

.cds-ms-12 {
    margin-left: 96px !important;
}

.cds-ms-13 {
    margin-left: 160px !important;
}



.cds-me-0 {
    margin-right: 0px !important;
}
.cds-me-1 {
    margin-right: 2px !important;
}
.cds-me-2 {
    margin-right: 4px !important;
}
.cds-me-3 {
    margin-right: 8px !important;
}
.cds-me-4 {
    margin-right: 12px !important;
}
.cds-me-5 {
    margin-right: 16px !important;
}
.cds-me-6 {
    margin-right: 24px !important;
}
.cds-me-7 {
    margin-right: 32px !important;
}
.cds-me-8 {
    margin-right: 40px !important;
}
.cds-me-9 {
    margin-right: 48px !important;
}
.cds-me-10 {
    margin-right: 64px !important;
}
.cds-me-11 {
    margin-right: 80px !important;
}
.cds-me-12 {
    margin-right: 96px !important;
}
.cds-me-13 {
    margin-right: 160px !important;
}


.cds-mb-0 {
    margin-bottom: 0px !important;
}
.cds-mb-1 {
    margin-bottom: 2px !important;
}
.cds-mb-2 {
    margin-bottom: 4px !important;
}
.cds-mb-3 {
    margin-bottom: 8px !important;
}
.cds-mb-4 {
    margin-bottom: 12px !important;
}
.cds-mb-5 {
    margin-bottom: 16px !important;
}
.cds-mb-6 {
    margin-bottom: 24px !important;
}
.cds-mb-7 {
    margin-bottom: 32px !important;
}
.cds-mb-8 {
    margin-bottom: 40px !important;
}
.cds-mb-9 {
    margin-bottom: 48px !important;
}
.cds-mb-10 {
    margin-bottom: 64px !important;
}
.cds-mb-11 {
    margin-bottom: 80px !important;
}
.cds-mb-12 {
    margin-bottom: 96px !important;
}
.cds-mb-13 {
    margin-bottom: 160px !important;
}

.cds-mt-0 {
    margin-top: 0px !important;
}
.cds-mt-1 {
    margin-top: 2px !important;
}
.cds-mt-2 {
    margin-top: 4px !important;
}
.cds-mt-3 {
    margin-top: 8px !important;
}
.cds-mt-4 {
    margin-top: 12px !important;
}
.cds-mt-5 {
    margin-top: 16px !important;
}
.cds-mt-6 {
    margin-top: 24px !important;
}
.cds-mt-7 {
    margin-top: 32px !important;
}
.cds-mt-8 {
    margin-top: 40px !important;
}
.cds-mt-9 {
    margin-top: 48px !important;
}
.cds-mt-10 {
    margin-top: 64px !important;
}
.cds-mt-11 {
    margin-top: 80px !important;
}
.cds-mt-12 {
    margin-top: 96px !important;
}
.cds-mt-13 {
    margin-top: 160px !important;
}


.cds-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.cds-mx-1 {
    margin-left: 2px !important;
    margin-right: 2px !important;
}
.cds-mx-2 {
    margin-left: 4px !important;
    margin-right: 4px !important;
}
.cds-mx-3 {
    margin-left: 8px !important;
    margin-right: 8px !important;
}
.cds-mx-4 {
    margin-left: 12px !important;
    margin-right: 12px !important;
}
.cds-mx-5 {
    margin-left: 16px !important;
    margin-right: 16px !important;
}
.cds-mx-6 {
    margin-left: 24px !important;
    margin-right: 24px !important;
}
.cds-mx-7 {
    margin-left: 32px !important;
    margin-right: 32px !important;
}
.cds-mx-8 {
    margin-left: 40px !important;
    margin-right: 40px !important;
}
.cds-mx-9 {
    margin-left: 48px !important;
    margin-right: 48px !important;
}
.cds-mx-10 {
    margin-left: 64px !important;
    margin-right: 64px !important;
}
.cds-mx-11 {
    margin-left: 80px !important;
    margin-right: 80px !important;
}
.cds-mx-12 {
    margin-left: 96px !important;
    margin-right: 96px !important;
}
.cds-mx-13 {
    margin-left: 160px !important;
    margin-right: 160px !important;
}

.cds-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.cds-my-1 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.cds-my-2 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.cds-my-3 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.cds-my-4 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.cds-my-5 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.cds-my-6 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

.cds-my-7 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
}

.cds-my-8 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.cds-my-9 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
}

.cds-my-10 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
}

.cds-my-11 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
}

.cds-my-12 {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
}

.cds-my-13 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
}


.cds-gap-0 {
    gap: 0 !important;
}
.cds-gap-1 {
    gap: 2px !important;
}
.cds-gap-2 {
    gap: 4px !important;
}
.cds-gap-3 {
    gap: 8px !important;
}
.cds-gap-4 {
    gap: 12px !important;
}
.cds-gap-5 {
    gap: 16px !important;
}
.cds-gap-6 {
    gap: 24px !important;
}
.cds-gap-7 {
    gap: 32px !important;
}
.cds-gap-8 {
    gap: 40px !important;
}

/* ====================================
   가로 사이즈
   ==================================== */
.cds-w-100px{
    width: 100px;
}
.cds-w-150px{
    width: 100px;
}
.cds-w-200px{
    width: 100px;
}
.cds-w-250px{
    width: 100px;
}
.cds-w-300px{
    width: 100px;
}
.cds-w-350px{
    width: 100px;
}
.cds-w-400px{
    width: 100px;
}
.cds-w-450px{
    width: 100px;
}
.cds-w-500px{
    width: 100px;
}
.cds-w-550px{
    width: 100px;
}
.cds-w-600px{
    width: 100px;
}
.cds-w-650px{
    width: 100px;
}


/* 패널 가로 사이즈  */
.cds-mw-760px{
    max-width:760px !important;
}



/* ====================================
   세로 사이즈
   ==================================== */
.cds-h-38px {
    height: 38px;
}
.cds-h-40px {
    height: 40px;
}
.cds-h-48px {
    height: 48px;
}
.cds-h-49px {
    height: 49px;
}
.cds-h-50px {
    height: 50px;
}
.cds-h-60px {
    height: 50px;
}
.cds-h-90px {
    height: 90px;
}


/* ====================================
   가로 모바일 사이즈
   ==================================== */
@media (max-width:1023px){
    
    .cds-mm-w-100 {
        width: 100% !important;
    }

    .cds-mm-w-100px {
        width: 100px !important;
    }

    .cds-mm-w-125px {
        width: 125px !important;
    }

    .cds-mm-w-150px {
        width: 150px !important;
    }

    .cds-mm-w-175px {
        width: 175px !important;
    }

    .cds-mm-w-200px {
        width: 200px !important;
    }

    .cds-mm-w-225px {
        width: 225px !important;
    }

    .cds-mm-w-250px {
        width: 250px !important;
    }

    .cds-mm-w-275px {
        width: 275px !important;
    }

    .cds-mm-w-300px {
        width: 300px !important;
    }

    .cds-mm-w-325px {
        width: 325px !important;
    }

    .cds-mm-w-350px {
        width: 350px !important;
    }

    .cds-mm-w-375px {
        width: 375px !important;
    }

    .cds-mm-w-400px {
        width: 400px !important;
    }

    .cds-mm-w-425px {
        width: 425px !important;
    }

    .cds-mm-w-450px {
        width: 450px !important;
    }

    .cds-mm-w-475px {
        width: 475px !important;
    }

    .cds-mm-w-500px {
        width: 500px !important;
    }
    .cds-mm-w-550px {
        width: 550px !important;
    }
}



/* ====================================
   보더
   ==================================== */
.cds-border {
    border: 1px solid !important;
}
.cds-border-top {
    border-top: 1px solid !important;
}
.cds-border-bottom {
    border-bottom: 1px solid !important;
}
.cds-border-left {
    border-left: 1px solid !important;
}
.cds-border-right {
    border-right: 1px solid !important;
}
.cds-border-none {
    border: none !important;
}
.cds-border-gray {
    border-color: var(--cds-border-subtle-01, #e0e0e0) !important;
}
.cds-boxshadow-bottom {
    box-shadow: inset 0 -1px 0 0 var(--cds-border-subtle-01, #e0e0e0);
}


/* ====================================
   배경 색상
   다크 모드에서 색상 다름
   ==================================== */
.cds-bg-white { /* 다크모드 #161616 */
    background-color: var(--cds-white-color, #ffffff) !important;
}

.cds-bg-field { /* 다크모드 #262626  */
    background-color: var(--cds-field, #ffffff) !important;
}
.cds-bg-field-02 { /* 다크모드 #393939  */
    background-color: var(--cds-field-03, #f4f4f4) !important;
}

.cds-background { /* 다크모드 #161616 */c
    background-color: var(--cds-field-01, #f4f4f4) !important;
}

.cds-bg-layer { /* 다크모드 #262626 */
    background-color: var(--cds-layer-01, #f4f4f4) !important;
}

.cds-bg-layer-02 { /* 댓글 배경색상 다크모드 #333333 */
    background-color: var(--cds-layer-03, #fafafa) !important;
}

.cds-bg-accent { /* 다크모드 #393939 */
    background-color: var(--cds-layer-accent, #e0e0e0) !important;
}


.cds-danger {
    color: var(--cds-text-error, #da1e28) !important;
}

/* ====================================
   폰트 색상
   ==================================== */
.cds-text-primary {
    color: var(--cds-text-primary, #161616) !important;
}
.cds-text-secondary {
    color: var(--cds-text-secondary, #52525) !important;
}
.cds-text-error {
    color: var(--cds-text-error, #da1e28) !important;
}

/* ====================================
   링크
   ==================================== */
.cds-link {
    color: var(--cds-link-primary, #0f62fe);
    cursor: pointer;
}
.cds-link:hover {
    color: var(--cds-link-primary-hover, #0043ce);
    text-decoration: underline;
}
.cds-link:focus, .cds-link:active {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;

}



/* ====================================
    색상
   ==================================== */
.cds-primary {
    background-color: var(--cds-primary, #0f62fe) !important;
}
.cds-red {
    background-color: var(--cds-support-error, #da1e28) !important;
}
.cds-green {
    background-color: var(--cds-support-success, #24a148) !important;
}
.cds-yellow{
    background-color: var(--cds-support-warning, #f1c21b) !important;
}
.cds-blue {
    background-color: var(--cds-support-info, #0043CE) !important;
}
.cds-orange {
    background-color: var(--cds-support-caution, #ff832b) !important;
}
.cds-purple {
    background-color: var( --cds-support-undefined, #8a3ffc) !important;
}
.cds-gray {
    background-color: var(--cds-tag-bg-gray, #E0E0E0) !important;
}






/* ====================================
   Display Utilities
   ==================================== */
/* 데스크탑 */
@media (min-width: 1024px) {
    .cds-dd-d-none {
        display: none !important;
    }

    .cds-dd-w-620px {
        width: 620px;
    }

    .cds-dd-w-600px {
        width: 600px;
    }

}
/* 모바일 */
@media (max-width: 1023px) {
    .cds-mm-d-none {
        display: none !important;
    }
}

/* 데스크탑 */
@media( max-width: 1279px) {
    .cds-dm-d-none{
        display: none !important;
    }
}



body {
    font-family: "Pretendard Variable", 'Pretendard', 'SUIT', 'LINESeedKR-Rg', 'sans-serif' !important; /*'Spoqa Han Sans Neo',*/
    font-feature-settings: 'tnum';
    font-weight: 400;
    height: 100%;
    text-size-adjust: none; /* 모바일 폰트사이즈 자동 조절 방지 */
}

.page {
    height: 100%;
}

/* ====================================
   SideBar    
   ==================================== */
.sidebar {
    background-color: var(--cds-white-color, #ffffff) !important;
    border-right: 1px solid var( --cds-border-subtle-01, #e0e0e0) !important;
}

.navbar {
    background-color: #161616 !important;
    border-bottom: 1px solid var(--cds-border-subtle-01, #525252) !important;
}

.navbar-brand {
    color: var(--cds-text-on-color, #ffffff);
}

.navbar-dark {
    background-color: var(--cds-dark-color,#161616) !important;
    color: var(--cds-text-on-color, #ffffff);
}

.nav-content {
    color: var(--cds-dark-color, #161616) !important;
    border-bottom: 1px solid var( --cds-border-subtle-01, #e0e0e0) !important;
}

.nav-content-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}
.nav-content-subtitle{
    color: var(--cds-text-secondary, #525252);
    
}


.nav-item .nav-link {
    color: var(--cds-text-secondary, #525252) !important;
    background: none;
    border: none;
    height: 40px;
    display: flex;
    align-items: center;
    line-height: 40px;
    width: 100%;
}

    .nav-item .nav-link:hover {
        background-color: var(--cds-layer-hover, #e8e8e8) !important;
        color: var(--cds-text-primary, #161616);
        font-weight: 400 !important;
    }

.nav-item .carbon-icon {
    margin-right: 8px;
    background-color: var(--cds-icon-secondary, #525252) !important;
}

.nav-item a.active {
    background-color: var(--cds-background-active, #8d8d8d40) !important;
    color: var(--cds-text-primary, #161616) !important;
    font-weight: 600;
    position: relative;
}

    .nav-item a.active:hover {
        font-weight: 600 !important;
    }

.background {
    font-size: 13px;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}


.cds-sub-title {
    color: var(--cds-text-helper, #6f6f6f);
}

.cds-important {
    color: var(--cds-text-error, #da1e28);
    vertical-align: middle;
}





/* ====================================
   Carbon Demo Component
   ==================================== */

/* ----- 컴포넌트 공통 CSS ----- */
/* label */
.cds-label {
    /*display: inline-block;*/
    font-size: 12px;
    font-weight: 400;
    color: var(--cds-text-secondary, #525252);
    margin-bottom: 8px;
    cursor: default;
}
.cds-label-disabled {
    font-size: 12px;
    font-weight: 400;
    margin-block-end: 8px;
    color: var(--cds-text-disabled, #16161625);
}
/* label과 input 사이 간격 */
.cds-control-wrap.cds-xs-label .cds-label {
    margin-bottom: 2px !important;
}
.cds-control-wrap.cds-s-label .cds-label {
    margin-bottom: 4px !important;
}
.cds-control-wrap.cds-m-label .cds-label {
    margin-bottom: 8px !important;
}



/* ====================================
   Text Box
   ==================================== */
/* 공통 */
.cds-control-wrap {
    margin-bottom: 16px;
}

/* fluid 타입 */
.cds-control-wrap.cds-control-fluid {
    background-color: var(--cds-field-03, #f4f4f4) !important;
    position: relative;
}
/*    .cds-control-wrap.cds-control-fluid .carbon-textbox:disabled {
        background-color: rgba(0,0,0,0) !important;
        position: relative;
    }*/
    .cds-control-wrap.cds-control-fluid:has(.carbon-textbox[disabled]) {
        background-color:rgba(0,0,0,0)  !important;
        position: relative;
    }

    .cds-control-wrap.cds-control-fluid .cds-label {
        height: auto;
        padding: 10px 0 0 10px;
        margin: 0 0;
    }

    /* 기존 Focus outline 제거 */
    .cds-control-wrap.cds-control-fluid .carbon-textbox:focus,
    .cds-control-wrap.cds-control-fluid .carbon-textarea:focus,
    .cds-control-wrap.cds-control-fluid .cds-combobox:not(.disabled):focus-within,
    .cds-control-wrap.cds-control-fluid .cds-autocompleted .input-container.focused,
    .cds-control-wrap.cds-control-fluid .cds-textql:focus-within {
        outline: 0px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: 0 !important;
    }
    .cds-control-wrap.cds-control-fluid .cds-combobox:focus,
    .cds-control-wrap.cds-control-fluid .cds-combobox:active
    .cds-control-wrap.cds-control-fluid .cds-textql:focus-within {
        outline: 0px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: 0 !important;
    }
    /* 하위 요소 클릭 시 상위 요소 Focus outline */
    /* Focus 겹침현상 제거 */
    .cds-control-wrap.cds-control-fluid::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; /* inset: 0; 과 같음 → 바깥으로 안 나감 */
        border: 2px solid var(--cds-focus, #0f62fe) !important;
        pointer-events: none;
        z-index: 10; /* 안쪽 input 보다 위로 */
        opacity: 0; /* 기본은 숨김 */
    }

    /* Autocomplete list 제외 focus css */
    .cds-control-wrap.cds-control-fluid:has(.autocomplete-multi-selector)::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; /* inset: 0; 과 같음 → 바깥으로 안 나감 */
        box-sizing: border-box;
        border: 0px solid var(--cds-focus, #0f62fe) !important;
        border-top: 2px solid var(--cds-focus, #0f62fe) !important;
        pointer-events: none;
        z-index: 10; /* 안쪽 input 보다 위로 */
        opacity: 0; /* 기본은 숨김 */
    }

    .cds-control-wrap.cds-control-fluid:focus-within:has(.autocomplete-multi-selector) .cds-label {
        border-left: 2px solid var(--cds-focus, #0f62fe) !important;
        border-right: 2px solid var(--cds-focus, #0f62fe) !important;
    }

    .cds-control-wrap.cds-control-fluid:focus-within:has(.autocomplete-multi-selector) .input-container {
        border-left: 2px solid var(--cds-focus, #0f62fe) !important;
        border-right: 2px solid var(--cds-focus, #0f62fe) !important;
        border-bottom: 2px solid var(--cds-focus, #0f62fe) !important;
    }


    .cds-control-wrap.cds-control-fluid:focus-within::before {
        opacity: 1;
    }

    /* 하위 요소 클릭 시 상위 요소 Focus outline 기존 CSS */
    /*    .cds-control-wrap.cds-control-fluid:focus-within {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px !important;
    }
        .cds-control-wrap.cds-control-fluid:has(input:focus) {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
    }*/

    .cds-control-wrap.cds-control-fluid .carbon-textbox,
    .cds-control-wrap.cds-control-fluid .carbon-textarea {
        padding: 2px 10px 7px !important;
    }

    .cds-control-wrap.cds-control-fluid:has(.carbon-textarea) {
        border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
    }
    .cds-control-wrap.cds-control-fluid .carbon-textarea {
        border-bottom: 0 !important;
    }

/* 버튼이랑 묶여있을 때 사용 ex)아이디 입력 인풋+중복버튼 */
.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 Box */
input.carbon-textbox {
    background-color: var(--cds-field-03, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-bottom: 1px solid var(--carbon-textbox-border-bottom, #8d8d8d) !important;
    padding: 7px 10px;
    color: var(--cds-text-primary, #161616);
}

    input.carbon-textbox-white {
        background-color: var(--cds-field, #ffffff) !important;
    }

    .carbon-textbox::placeholder {
        color: var(--cds-text-placeholder, #a8a8a8) !important;
        font-style: unset;
        font-size: 12px;
    }

    .carbon-textbox:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
    }

    .carbon-textbox.invalid {
        outline: 2px solid red !important;
    }

    .carbon-textbox:disabled {
        background-color: rgba(0,0,0,0) !important;
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    }

/* textarea 비활성화 상태에서 아래 보더만 나오도록 (2025.11.14) */
textarea.carbon-textbox:disabled {
    background-color: rgba(0,0,0,0) !important;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    border-top: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
}

/* Text Area */
.carbon-textarea {
    background-color: var(--cds-field-03, #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, #a8a8a8);
        font-style: unset;
        font-size: 12px;
    }

    .carbon-textarea:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
    }

    .carbon-textarea:disabled {
        /*        background-color: var(--cds-white-color, #FFFFFF) !important;*/
        background-color: rgba(0,0,0,0) !important;
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    }


/* 위지윅 */
.cds-textql {
    font-family: 'Pretendard', 'SUIT', 'LINESeedKR-Rg', 'sans-serif';
    background-color: var(--cds-field-03, #f4f4f4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
    padding: 7px 10px;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

    .cds-textql .ql-editor {
        padding: 0 !important;
        min-height: 180px;
        color: var(--cds-text-primary, #161616);
    }

        .cds-textql .ql-editor:focus {
            outline: none !important;
            outline-offset: 0 !important;
        }

    .cds-textql:focus-within { 
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
    }

    .cds-textql.ql-disabled {
        background-color: rgba(0,0,0,0) !important;
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    }

/* ====================================
   IOS 모바일 확대 방지
   (16px 미만 자동 확대)
   ==================================== */
/* focus 시 IOS에만 강제 16px 적용 */
@supports (-webkit-touch-callout: none) {
    input:focus, textarea:focus, .wvs-echo-content .rw-textbox:focus, .wvs-echo-content .rw-combobox-container .rw-textbox:focus,
    .wvs-echo-content .cds-combobox:focus, .rw-window.cds-rw-window .rw-textbox:focus {
        font-size: 16px !important;
    }
}

/* ====================================
   Search Bar
   ==================================== */
/* search input */
.cds-search {
    position: relative;
    width: 100%;
/*  display: flex;
    align-items: center;
    inline-size: 100%;*/
}
    .cds-search-input-wrap{
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        background-color: var(--cds-layer-01, #f4f4f4);
    }
        .cds-search-input-wrap input.carbon-textbox { /* 내부 여백 */
            padding: 7px 38px;
        }

        .cds-grid-search .cds-search-input-wrap input.carbon-textbox:hover {
            background-color: var(--cds-layer-hover, #e8e8e8) !important;
        }
        .cds-search-input-wrap input.carbon-textbox:active, .cds-search-input-wrap input.carbon-textbox:focus {
            outline: 2px solid var(--cds-focus, #0f62fe);
            outline-offset: -2px;
        }

.cds-search-icon {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    color: var(--cds-icon-primary, #161616);
}
    .cds-search-icon .cds-btn-icon {
        color: var(--cds-icon-primary, #161616);
        position: unset !important;
    }

/* Search Toolbar(버튼 포함) */
.cds-grid-toolbar-wrap {
    display: flex; 
    position: relative;
    align-items: center;
    background-color: var(--cds-layer-01, #f4f4f4);
}

    .cds-grid-toolbar-wrap input.carbon-textbox{
        background-color: var(--cds-layer-01, #f4f4f4) !important;
    }

.cds-toolbar-search {
    flex: 1;
    position: relative;
}
    .cds-toolbar-search input.carbon-textbox{
        border-bottom:0 !important;
        background-color: var(--cds-field, #ffffff) !important;
}
    .cds-toolbar-search .cds-search-input-wrap input.carbon-textbox:hover {
        /* background-color: var(--cds-background-hover, #8d8d8d12) !important;*/
        background-color: var(--cds-layer-hover, #e8e8e8) !important;
    }
.cds-toolbar-action {
    display: flex;
    align-items: center;
    background-color: var(--cds-field, #ffffff);
}

    .cds-toolbar-action button:active, .cds-toolbar-action button:active,
    .cds-toolbar-action button:focus, .cds-toolbar-action button:focus {
        outline: 2px solid var(--cds-focus, #0f62fe);
        outline-offset: -2px;
    }

.cds-toolbar-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cds-field, #ffffff);
    border: none;
    cursor: pointer;
    transition: background-color 110ms;
    border-radius: 0;
    flex-shrink: 0;
    padding: 0;
    line-height: 0;
    color: currentColor;
    -webkit-text-fill-color: currentColor;
}
    .cds-toolbar-btn:hover {
        background-color: var(--cds-background-hover, #8d8d8d12);
    }
        
.cds-toolbar-btn .cds-btn-icon{
    position: unset !important;
}


/* ====================================
   Tabs
   ==================================== */
.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;
    font-weight: 400 !important;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    font-size: 14px;
}

    .cds-tabs-link:disabled {
        background-color: transparent;
        color: var(--cds-text-disabled, #16161625);
        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, #16161625) !important;
            border-bottom: 2px solid var(--cds-border-subtle-01, #e0e0e0) !important;
        }

.cds-tabs-overflow-nav-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    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, #e8e8e8);
    }

    .cds-tabs-overflow-nav-button svg {
        fill: var(--cds-icon-primary, #161616);
    }

.cds-tabs-overflow-hidden {
    display: none;
}


/* ====================================
   Tabs
   ==================================== */
/* 기본 header tabs */






/* ====================================
   Tree View
   ==================================== */
.cds-tree {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--cds-field-01, #f4f4f4);
}

.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, #525252);
    transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
    outline: 2px solid transparent;
    outline-offset: -2px;
}
    .cds-tree-node-label:hover {
        background-color: var(--cds-layer-hover, #e8e8e8);
        color: var(--cds-text-primary, #161616);
    }

    .cds-tree-node-label:focus {
        outline: 2px solid var(--cds-focus, #0f62fe);
        outline-offset: -2px;
    }

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

.cds-tree-node-selected::before {
    position: absolute;
    background-color: var(--cds-primary, #0f62fe);
    block-size: 100%;
    content: "";
    inline-size: 4px;
    inset-block-start: 0;
    inset-inline-start: 0;
}


.cds-tree-node-selected > .cds-tree-node-label {
    background-color: var(--cds-layer-selected, #e0e0e0);
    color: var(--cds-text-primary, #161616);
}

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

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

.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, #0f62fe);
    }

.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: var(--cds-icon-primary, #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);
}

.cds-tree-node-leaf .cds-tree-node-icon {
    visibility: hidden;
}

.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: var(--cds-icon-secondary, #525252);
    }

/* Tree Label Text */
.cds-tree-node-label-text {
    flex: 1;
    font-size: 12px;
    line-height: 1.29;
    letter-spacing: 0.16px;
    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-children .cds-tree-node-label-text {
        padding-left: 16px;
    }

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

.cds-tree-node + .cds-tree-node {
    margin-top: 0;
}

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



/* ====================================
   아코디언
   ==================================== */
.cds-accordion {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

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

    .cds-accordion-item:last-child {
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    }

.cds-accordion-item-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    cursor: pointer;
    background-color: transparent;
    border: none;
    text-align: left;
    color: var(--cds-text-primary, #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: var(--cds-layer-hover, #e8e8e8);
        color: var(--cds-text-primary, #161616);
    }

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


.cds-accordion-item-title {
    flex: 1;
    font-size: 13px;
    line-height: 1.29;
    letter-spacing: 0.16px;
    font-weight: 400;
    color: var(--cds-text-primary, #161616);
    margin: 0;
    padding-right: 16px;
    white-space: nowrap;
}

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

.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: 12px;
    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;
        }

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


/* ====================================
   Select Box / Combo Box
   ==================================== */
/* 콤보박스 아이템 전체 컨테이너 */
.cds-combobox {
    background-color: var(--cds-field-03, #f4f4f4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
    height: 32px;
    font-size: 12px;
}

    .cds-combobox .rw-textbox-input {
        height: 31px;
        padding: 0 10px;
    }
    .cds-combobox.rw-combobox-container .rx-combo-toggle {
        border: none !important;
    }
    .cds-combobox .options-container {
        color: var(--cds-text-secondary, #525252) !important;
        border: none !important;
        box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
        max-height: 20px;
        overflow-y: auto;
    }
    /* 콤보박스 아이템 스타일 */
    .cds-combobox .options-container .option-item {
        /* border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important; */
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
        background-color: var(--cds-field-03, #f4f4f4) !important;
    }
    .cds-combobox .options-container .option-item:hover {
        background-color: var(--cds-layer-hover, #e8e8e8) !important;
        font-weight: inherit !important;
        color: var(--cds-text-primary, #161616) !important;
    }
    .cds-combobox .options-container .option-item.selected {
        outline: 2px solid var(--cds-focus, #0f62fe);
        outline-offset: -2px;
        margin-top: -2px;
        color: var(--cds-text-primary, #161616) !important;
        background-color: var(--cds-layer-selected, #e0e0e0) !important;
    }
    .cds-combobox .options-container .option-item.highlighted {
        /* background-color: var(--cds-layer-selected, #e0e0e0) !important; */
        font-weight: inherit !important;
        color: var(--cds-text-primary, #161616) !important;
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
    }

            .cds-combobox:focus, .cds-combobox:active {
                outline: 2px solid var(--cds-focus, #0f62fe) !important;
                outline-offset: -2px;
            }

            .cds-combobox:not(.disabled):focus-within {
                outline: 2px solid var(--cds-focus, #0f62fe) !important;
                outline-offset: -2px;
            }

    .cds-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;*/
    }

    .cds-combobox.disabled {
        background-color: var(--cds-field, #FFFFFF) !important;
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    }
    .cds-combobox .carbon-icon {
        background-color: var(--cds-icon-primary, #161616);
    }

    /* disable 일 때 아이콘 색상 */
    .cds-combobox .icon-disabled { 
        background-color: var(--cds-icon-disabled, #c6c6c6) !important;
    }

    /* 검색 텍스트박스 배경 제거 */
    .cds-combobox .rw-textbox {
        background-color: transparent !important;
        border: none !important
    }
    .cds-combobox .rw-textbox::placeholder {
        color: var(--cds-text-placeholder, #a8a8a8) !important;
        font-style:unset;
    }
    input.cds-combobox-input {
        background-color: var(--cds-layer-01, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
        border: none !important;
    }

.cds-combobox .template-cotainer {
    background-color: var(--cds-layer-01, #F4F4F4);
}

/*    input.cds-combobox-input:read-only,
    input.cds-combobox-input[readonly],*/
/*    input.cds-combobox-input.disabled,
    input.cds-combobox-input:disabled {
        background-color: var(--white-color, #FFFFFF) !important;
        border: none !important;
    }*/
/* readonly일 때만 */
/*    input.cds-combobox-input:read-only,
    input.cds-combobox-input[readonly] {
        background-color: var(--white-color, #FFFFFF) !important;
    }*/



/* disabled일 때만 */
input.cds-combobox-input:disabled, input.cds-combobox-input.disabled {
    background-color: var(--cds-white-color, #FFFFFF) !important;
}

    .cds-combobox-item:hover {
        background-color: var(--cds-primary, #0f62fe) !important;
        color: #fff;
        border-color: transparent;
        color: var(--cds-text-primary, #161616);
    }

.carbon-dropdown-button {
    background-color: var(--cds-layer-01, #F4F4F4) !important;
    border: 0px solid black !important;
}

    .carbon-dropdown-button.disabled, .carbon-dropdown-button.disabled {
        background-color: var(--cds-white-color, #FFFFFF) !important;
        border: none !important;
    }

.carbon-item-container.selected {
    border: 1px solid var(--cds-button-primary, #0f62fe);
}

.carbon-item-container:focus {
    border: 2px solid var(--cds-focus, #0f62fe) !important;
}

.carbon-item-container:focus-within {
    border-color: var(--cds-focus, #0f62fe);
    outline: none;
}


/* ====================================
   Autocompleted
   ==================================== */
.cds-autocompleted {
    background-color: var(--cds-field-03, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    color: var(--cds-text-secondary, #525252);
    min-height:32px !important;
    font-size: 12px !important;
    gap:0!important;
}

    .cds-autocompleted .input-container {
        height: 32px !important;
        border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
    }

        .cds-autocompleted .input-container .autocomplete-input{
            padding: 8px 10px;
            height:100%;
        }

        .cds-autocompleted .input-container.focused {
            outline: 2px solid var(--cds-focus, #0f62fe) !important;
            outline-offset: -2px;
        }

    .cds-autocompleted .autocomplete-selected-tag button:focus-visible {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
    }

    .cds-autocompleted.disabled .input-container {
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;
    }
    .cds-autocompleted.disabled .input-container .autocomplete-input {
        cursor: text;
    }

    .cds-autocompleted .icon-disabled { /* disable 일 때 아이콘 색상 */
        background-color: var(--cds-icon-disabled, #c6c6c6) !important;
    }
    .cds-autocompleted.disabled .input-container:active{
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
    }

.cds-autocompleted .autocomplete-list {
    /* margin-top: 2px;*/
    font-size: 12px !important;
    border: none !important;
    border-radius: 0;
    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
    margin-left: 0px;
    background-color: var(--cds-field-03, #f4f4f4) !important;
    z-index:99;
}
    .cds-autocompleted .autocomplete-list li {
        padding: 6px 16px;                                                 
        border-left: none !important;
        border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    }

    .cds-autocompleted .autocomplete-list.selected {
        border: none;
        background-color: var(--cds-field, #f4f4f4) !important 
    }
    .cds-autocompleted .autocomplete-list li:hover{
        background-color: var(--cds-background-hover, #8d8d8d30);
    }

    .cds-autocompleted.disabled {
        background-color: var(--cds-field, #ffffff) !important;
        /*    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0) !important;*/
    }

    .cds-autocompleted li:hover {
        background-color: var(--cds-layer-hover, #e8e8e8) !important;
        color: var(--cds-text-primary, #161616);
        font-weight: inherit !important;
    }

/* 다크모드일 경우 선택 리스트 */
[data-bs-theme=dark] .cds-autocompleted .tag {
    background-color: var(--cds-field-01, #f4f4f4);
}

[data-bs-theme=dark] .cds-autocompleted.disabled .tag {
    background-color: var(--cds-layer-01, #f4f4f4);
}


/* Tag 형식 */
.cds-autocomplete-tag .autocomplete-tagify .input-container {
    border-bottom: 0 !important;
}
.cds-autocomplete-tag .autocomplete-tagify .autocomplete-list li {
    font-size: 12px !important;
    color: var(--cds-text-primary, #525252) !important;
}
.cds-autocomplete-tag .autocomplete-container.autocomplete-tagify {
    border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d) !important;
    padding: 0 !important;
}
.cds-autocomplete-tag .autocomplete-tagify .input-container:disabled {
    background-color: var(--cds-white-color, #FFFFFF) !important;
    border: none !important;
}

.cds-autocompleted .tag {
    background-color: #E0E0E0;
    color: var(--cds-text-primary, #161616);
    margin: 0 2px;
    border-radius: 12px !important;
}
.cds-autocompleted .tag-text {
    font-size: 12px !important;
    font-family: "Pretendard Variable";
    font-weight: 300 !important;
    color: var(--cds-text-primary, #161616) !important;
}
.cds-autocompleted .tag button {
    color: var(--cds-text-primary, #161616) !important;
    font-size: 12px;
    font-weight: 400 !important;
    margin-left: 2px !important;
}

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

.cds-autocomplete-wrap .autocomplete-list {
    margin-left: 1px;
}

.cds-autocomplete-wrap .autocomplete-tagify .autocomplete-list li:hover {
    color: var(--cds-text-primary, #161616) !important;
    border-left: 2px solid transparent;
}


.cds-combobox-list {
    display: block;
    overflow: hidden;
    padding: 10px 16px !important;
    /*    margin: 0 16px !important;*/
    color: var(--cds-text-secondary, #525252);
    box-sizing: border-box;
    border: 0px;
    background-color: var(--cds-layer-01, #F4F4F4) !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,#161616);
    }



/* ====================================
   Button
   ==================================== */
/* 버튼 공통 CSS */
.cds-btn { 
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
    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, #c6c6c6);
        border-color: var(--csd-button-disabled, #c6c6c6);
        color: var(--cds-text-disabled, #16161625) !important;
        cursor: not-allowed;
    }
        .cds-btn:disabled:hover {
            background-color: var(--csd-button-disabled, #c6c6c6) !important;
        }

/* Large Size */
.cds-btn-lg {
    width: 100%;
    height: 52px !important;
    padding: 17px 16px !important;
}

/* ====================================
   Button
   ==================================== */
/* Button Primary */
.cds-btn-primary {
    position: relative;
    /*    border-width: 1px;*/
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    background-color: var(--cds-primary, #0f62fe);
    color: var(--cds-text-on-color, #ffffff);
}

    .cds-btn-primary:hover {
        background-color: var(--cds-button-primary-hover, #0353e9);
    }

    .cds-btn-primary:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-primary:active {
        background-color: var(--cds-button-primary-active, #002d9c);
    }

/* Button tertiary */
.cds-btn-tertiary {
    position: relative;
    border-style: solid;
    border-color: var(--cds-button-primary, #0f62fe);
    background-color: unset;
    color: var(--cds-button-primary, #0f62fe);
}

    .cds-btn-tertiary:hover {
        background-color: var(--cds-button-tertiary-hover, #0353e9);
        color: var(--cds-text-on-color, #ffffff);
    }

    .cds-btn-tertiary:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-tertiary:active {
        background-color: var(--cds-button-primary-active, #002d9c);
    }

/* Button Ghost */
.cds-btn-ghost {
    position: relative;
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    color: var(--cds-button-primary, #0f62fe);
    padding: 7px 48px 7px 16px;
}

    .cds-btn-ghost:hover {
        background-color: var(--cds-background-hover, #8d8d8d12);
        color: var(--cds-link-primary-hover, #0043ce);
    }

    .cds-btn-ghost:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-ghost:active {
        /*        background-color: var(--cds-button-primary-active, #002d9c);*/
        color: var(--cds-link-primary, #0f62fe));
        background-color: var(--cds-button-ghost-active, #8D8D8D50);
    }

/* Button Secondary */
.cds-btn-secondary {
    position: relative;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    background-color: var(--cds-button-secondary, #393939);
    color: var(--cds-text-on-color, #ffffff);
}

    .cds-btn-secondary:hover {
        background-color: var(--cds-button-secondary-hover, #474747);
    }

    .cds-btn-secondary:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-secondary:active {
        background-color: var(--cds-button-secondary-active,#6F6F6F);
    }


/* Button Tertiary Secondary */
.cds-btn-tertiary-secondary {
    position: relative;
    border-style: solid;
    border-color: var(--cds-button-secondary, #393939);
    background-color: unset;
    color: var(--cds-button-secondary, #393939);
}

    .cds-btn-tertiary-secondary:hover {
        background-color: var(--cds-button-secondary, #393939);
        color: var(--cds-text-on-color, #ffffff);
    }

    .cds-btn-tertiary-secondary:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-tertiary-secondary:active {
        background-color: var(--cds-button-secondary-active, #6F6F6F);
    }

/* Button Ghost Secondary */
.cds-btn-ghost-secondary {
    position: relative;
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    color: var(--cds-button-secondary, #393939);
}

    .cds-btn-ghost-secondary:hover {
        background-color: var(--cds-background-hover, #8d8d8d12);
        color: var(--cds-button-secondary, #393939);
    }

    .cds-btn-ghost-secondary:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-ghost-secondary:active {
        background-color: var(--cds-button-ghost-active, #8D8D8D50);
    }

/* Button Dansger */
.cds-btn-danger {
    position: relative;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0);
    background-color: var(--cds-button-danger-primary, #da1e28);
    color: var(--cds-text-on-color, #ffffff);
}

    .cds-btn-danger:hover {
        background-color: var(--cds-button-danger-hover, #b81921);
    }

    .cds-btn-danger:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-danger:active {
        background-color: var(--cds-button-danger-active, #750e13);
    }


/* Button Tertiary Dansger */
.cds-btn-tertiary-danger {
    position: relative;
    border-style: solid;
    border-color: var(--cds-button-danger-primary, #da1e28);
    background-color: unset;
    color: var(--cds-button-danger-primary, #da1e28);
}

    .cds-btn-tertiary-danger:hover {
        background-color: var(--cds-button-danger-hover, #b81921);
        color: var(--cds-text-on-color, #ffffff);
    }

    .cds-btn-tertiary-danger:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-tertiary-danger:active {
        background-color: var(--cds-button-danger-active, #750e13);
    }

/* Button Ghost Dansger */
.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: var(--cds-button-danger-hover, #b81921);
        color: var(--cds-text-on-color, #ffffff);
    }

    .cds-btn-ghost-danger:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);
    }

    .cds-btn-ghost-danger:active {
        background-color: var(--cds-button-danger-active, #750e13);
        ;
    }

/* Butto + Icon */
.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, #161616);
    padding: 8px 16px;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

    .cds-icon-btn:hover {
        background-color: var(--cds-background-hover, #8d8d8d12);
        /*        color: var(--cds-button-secondary, #525252);*/
    }

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

    .cds-icon-btn:active {
        background-color: var(--cds-button-ghost-active, #8D8D8D50);
    }

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

/* Only Icon Button */
.cds-icon-only-btn {
    position: relative;
    border-style: solid;
    border-color: transparent;
    background-color: transparent;
    color: var(--cds-text-primary, #161616);
    padding: 16px;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

    .cds-icon-only-btn:hover {
        background-color: var(--cds-background-hover, #8d8d8d12);
    }

    .cds-icon-only-btn:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px;
        /*        box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe),inset 0 0 0 2px var(--cds-white-color, #FFFFFF);*/
    }

    .cds-icon-only-btn:active {
        background-color: var(--cds-button-ghost-active, #8D8D8D50);
    }



/* ====================================
   Modal Button
   ==================================== */
.cds-btn-set {
    gap: 1px;
    flex-direction: row-reverse;
    /*    border-block-start: 1px solid var(--cds-border-subtle-01, #e0e0e0);*/
}

    .cds-btn-set > *:first-child {
        flex: 0 1 60%;
        /*        flex: 0 0 auto;
        width:50%;*/
    }

    .cds-btn-set > *:last-child {
        flex: 0 1 40%;
    }

.cds-btn-footer {
    gap: 1px;
    box-sizing: initial;
    flex-direction: row-reverse;
    justify-content: flex-end;
/*    border-block-start: 1px solid var(--cds-border-subtle-01, #e0e0e0);*/
    inline-size: 100%;
}

.cds-btn-left {
    display: flex;
    flex: 1;
    border-block-start: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

    .cds-btn-left div {
        flex: 1;
    }
    .cds-btn-left:hover {
/*        border-block-start: none;*/
    }


.cds-btn-right {
    flex: 0 1 auto;
    width: 50%;
    margin-inline-start: auto;
    border-block-start: 1px solid transparent;
}

.cds-btn-right-set {
    display: flex;
    flex: 0 1 auto;
    width: 50%;
    gap: 1px;
    flex-direction: row-reverse;
    margin-inline-start: auto;
    border-block-start: 1px solid transparent;
}
    .cds-btn-right-set div {
        flex: 1;
    }

    .cds-btn-right-set button {
        padding-block-end: 32px;
    }


/* Hover 했을 때 배경색 Primary */
.cds-hover-primary:hover {
    background-color: var(--cds-primary, #0f62fe) !important;
    color: var(--cds-text-on-color, #ffffff) !important;
}



/* ====================================
   Modal
   ==================================== */
.cds-modal {
    background-color: var(--cds-white-color, #FFFFFF);
    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, #161616);
}

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

.cds-modal-close {
    padding: 12px;
    color: var(--cds-text-primary, #161616);
    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, #e8e8e8);
    }

    .cds-modal-close:focus {
        outline: 0;
        box-shadow: none !important;
        border: 2px solid var(--cds-focus, #0f62fe);
    }

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

.cds-modal-btn-set {
    gap: 1px;
    flex-direction: row-reverse;
}

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

.cds-modal-footer {
}

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


/* ====================================
   Modal Popup
   ==================================== */
.cds-rw-window {
    min-width: 350px;
    position: fixed;
    /*
    트랜스폼을 쓰면 모달위에서 fixed 사용하는 컴퍼넌트 위치가 문제가 생김.
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    */
}

    .cds-rw-window .rw-window-header {
        display: none;
    }

    .cds-rw-window .rw-window-content {
        background-color: var(--cds-field, #ffffff) !important;
    }


    .cds-rw-window .rw-window-header {
        display: none;
    }

    .cds-rw-window .rw-window-content {
        background-color: var(--cds-field, #ffffff) !important;
    }




/* ====================================
   Form 
   ==================================== */
.cds-form-title {
    color: var(--cds-text-primary, #161616);
}

.cds-top-btn {
    display: flex;
    /*    margin-right: -16px !important;*/
}
/*
    .cds-top-btn > *:last-child {
        margin-right: -16px !important;
    }*/

.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, #161616);
}

.cds-form-subtitle {
    color: var(--cds-text-primary, #161616);
    font-size: 15px;
    /*    padding: 24px 0;*/
    padding: 16px 0;
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.cds-form-grid {
    display: flex;
    align-items: flex-start;
    /*    gap: 12px;*/
    gap: 16px;
    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, #161616);
    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, #e8e8e8);
    }

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

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


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

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

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

.cds-form-input {
    color: var(--cds-text-primary, #161616) !important;
    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, #e0e0e0);
    background-color: transparent;
    color: var(--cds-text-primary, #161616);
}

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

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

    .cds-form-btn-ghost:active {
        background-color: var(--cds-button-ghost-active, #8D8D8D50);
    }


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


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

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


/* empty 페이지 */
.cds-empty-state {
    text-align: left;
    color: var(--cds-text-primary, #161616);
    padding: 32px !important;
}

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

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



/* ====================================
   Component
   ==================================== */
/* notification */
.carbon-icon:hover {
    opacity: 1 !important;
}

.cds-notification-wrap {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    block-size: auto;
    inline-size: 100%;
    min-block-size: 48px;
/*    min-inline-size: 288px; */
    /*    max-inline-size: 600px;*/
}

.cds-notification-warning {
    display: flex;
    flex-grow: 1;
    background-color: var(--cds-notification-danger, #FFF1F1);
    border: 1px solid #DA1E2830;
    border-inline-start: 3px solid var(--cds-button-danger-primary, #da1e28);
    padding-left: 16px;
}

    .cds-notification-warning .carbon-icon {
        background-color: var(--cds-button-danger-primary, #da1e28);
        flex-shrink: 0;
        margin-block-start: 14px;
        margin-inline-end: 16px;
    }

.cds-notification-error {
    display: flex;
    flex-grow: 1;
    background-color: var(--cds-notification-danger, #FFF1F1);
    border: 1px solid #DA1E2830;
    border-inline-start: 3px solid var(--cds-button-danger-primary, #da1e28);
    padding-left: 16px;
}

    .cds-notification-error .carbon-icon {
        background-color: var(--cds-button-danger-primary, #da1e28);
        flex-shrink: 0;
        margin-block-start: 14px;
        margin-inline-end: 16px;
    }

.cds-notification-fail {
    display: flex;
    flex-grow: 1;
    background-color: var(--cds-notification-danger, #FFF1F1);
    border: 1px solid #DA1E2830;
    border-inline-start: 3px solid var(--cds-button-danger-primary, #da1e28);
    padding-left: 16px;
}

    .cds-notification-fail .carbon-icon {
        background-color: var(--cds-button-danger-primary, #da1e28);
        flex-shrink: 0;
        margin-block-start: 14px;
        margin-inline-end: 16px;
    }

.cds-notification-success {
    display: flex;
    flex-grow: 1;
    background-color: var(--cds-notification-success, #DEFBE6);
    border: 1px solid #24A14830;
    border-inline-start: 3px solid var(--cds-support-success, #24a148);
    padding-left: 16px;
}

    .cds-notification-success .carbon-icon {
        background-color: var(--cds-support-success, #24a148);
        flex-shrink: 0;
        margin-block-start: 14px;
        margin-inline-end: 16px;
    }

.cds-notification-info {
    display: flex;
    flex-grow: 1;
    background-color: var(--cds-notification-info, #EDF5FF);
    border: 1px solid #0043CE30;
    border-inline-start: 3px solid var(--cds-support-info, #0043CE);
    padding-left: 16px;
}

    .cds-notification-info .carbon-icon {
        background-color: var(--cds-support-info, #0043CE);
        flex-shrink: 0;
        margin-block-start: 14px;
        margin-inline-end: 16px;
    }

.cds-notification-text {
    display: flex;
    flex-grow: 1;
    padding: 15px 15px 15px 0;
    flex-direction: column;
}

.cds-notification-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
}

.cds-notification-subtitle {
    font-size: 14px;
    color: var(--cds-text-primary, #161616);
}


/* 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: var(--cds-tag-bg-blue, #D0E2FF);
    color: var(--cds-tag-text-blue, #0043CE);
}

.cds-tag-red {
    background-color: var(--cds-tag-bg-red, #FFD7D9);
    color: var(--cds-tag-text-red, #A2191F);
}

.cds-tag-green {
    background-color: var(--cds-tag-bg-green, #A7F0BA);
    color: var(--cds-tag-text-green, #0E6027);
}

.cds-tag-gray {
    background-color: var(--cds-tag-bg-gray, #E0E0E0);
    color: var(--cds-tag-text-gray, #161616);
}



/* Check Box 기본 스타일 */
.cds-checkbox label, .cds-checkbox-label {
    font-size: 12px;
    color: var(--cds-text-primary, #161616);
}

.carbon-checkbox {
    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: var(--cds-field-02, #ffffff) !important;*/
    background-color: transparent;
}
    /* 체크된 상태 배경 */
    .carbon-checkbox:checked {
        background-color: var(--cds-dark-color, #161616) !important;
        position: relative !important;
    }
        /* 체크 표시 */
        .carbon-checkbox: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;
        }

    .carbon-checkbox:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--cds-focus, #0f62fe);
    }

    .carbon-checkbox:disabled {
        background-color: #f2f2f2;
        border-color: #d9d9d9;
        color: var(--cds-text-disabled, #16161625) !important;
        cursor: not-allowed;
        opacity: 0.3;
    }

/* check box input이 disable일때 label */
.rw-textbox-checkbox-container input:disabled + .rw-textbox-label {
    color: var(--cds-text-disabled, #16161625) !important;
    cursor: not-allowed;
}


/* Radio Button */
.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: 17.5px !important;
    height: 17.5px !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, #161616);
    }

        .carbon-radio:checked::after {
            content: "";
            position: absolute;
            top: 4px;
            left: 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--cds-dark-color, #161616);
        }

    .carbon-radio:focus {
        outline: 2px solid var(--cds-focus,#0f62fe);
        outline-offset: 1px;
    }

    /* 비활성화 상태 */
    .carbon-radio:disabled {
/*        border-color: #d9d9d9 !important;*/
        opacity: 0.25;
        cursor: not-allowed !important;
    }
    .carbon-radio:disabled:checked::after{
/*        background-color: var(--cds-text-disabled, #16161625) !important;*/
    }
    .carbon-radio:disabled + .carbon-radio-label {
        color: var(--cds-text-disabled, #16161625) !important;
    }

.carbon-radio-label {
    color: var(--cds-text-primary, #161616) !important;
    margin-right: 16px;
    white-space: nowrap;
}

.rw-combobox-container .option-item.option-template-item {
    height: 32px !important;
}

.carbon-item {
    background-color: var(--cds-layer-01, #F4F4F4) !important;
    color: var(--cds-text-secondary, #525252);
    padding: 3px 10px;
    /*    height: 26px;
    min-height: 26px;*/
    height: 32px;
    min-height: 32px;
    font-size: 12px;
    font-weight: 400;
    line-height: 28px;
}

    .carbon-item:hover {
        background-color: var(--cds-layer-selected, #e0e0e0) !important;
        color: var(--cds-text-primary, #161616);
        /*        outline: 2px solid var(--cds-focus,#0f62fe);
        outline-offset: -2px;*/
    }

    .carbon-item:focus {
        /*        border: 2px solid var(--cds-focus,#0f62fe) !important;*/
        outline: 2px solid var(--cds-focus,#0f62fe);
        outline-offset: -2px;
    }

    .carbon-item.selected {
        /*        border: 1px solid var(--cds-focus,#0f62fe);
        color: #fff;*/
        outline: 2px solid var(--cds-focus,#0f62fe);
        outline-offset: -2px;
    }

    .carbon-item:focus-within {
        border-color: var(--cds-focus,#0f62fe);
        outline: none;
    }


/* Content Switcher*/
.cds-switcher-wrap {
    display: flex;
    height: 40px;
}

.cds-switcher-wrap .cds-switcher-item:first-child {
    border-end-start-radius: 4px;
    border-start-start-radius: 4px;
    box-shadow: inset 1px 0 0 0 var(--cds-border-inverse, #161616);
}
.cds-switcher-wrap .cds-switcher-item:last-child {
    border-end-end-radius: 4px;
    border-start-end-radius: 4px;
    box-shadow: inset -1px 0 0 0 var(--cds-border-inverse, #161616);
}

.cds-switcher-item .is-selected{
    background-color: #161616 !important;
    color: var(--cds-text-inverse, #ffffff) !important;
}

.cds-switcher-item {
    height:40px;
    width:40px;
    outline: 2px solid transparent;
    outline-offset: -2px;
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: transparent;
    margin: 0;
    border-block-end: 1px solid var(--cds-border-inverse, #161616);
    border-block-start: 1px solid var(--cds-border-inverse, #161616);
}
.cds-switcher-item .cds-icon-only-btn {
    padding: 0;
}


/* Toggle Switch */
.carbon-switch {
    width: 40px;
    height: 20px;
    border-radius: 12px;
    /*    background-color: var(--cds-white-color, #FFFFFF) !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;
        height: 24px;
    }

        .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,#0f62fe);
            outline-offset: 1px;
            box-shadow: none !important;
        }

        .carbon-switch .form-check-input:disabled {
            cursor: not-allowed;
        }

    .carbon-switch .form-switch { 
        padding-left: 48px !important;
    }

.carbon-switch-small {
    width: 32px !important;
    height: 12px !important;
    margin-right: -19px !important;
}

    .carbon-switch-small .form-check-input {
        width: 32px !important;
        height: 16px !important;
    }

.cds-switch-wrap {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

    .cds-switch-wrap .cds-label {
        line-height: 12px;
        margin-bottom: 0;
    }


/*.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;*/ /* 투명도 */
/*}*/


/* ====================================
   Signin - Admin
   ==================================== */
.sign-header {
    height: 40px;
    border-bottom: 1px solid var(--cds-border-tile-01, #c6c6c6);
    background-color: #16161680;
}

.sign-logo {
    height: 100%;
    padding-left: 30px;
    padding-top: 8px;
    color: #ED3E24;
    font-weight: 700;
    font-size: 14px;
    cursor: default;
}

.sign-right {
    position: relative;
    overflow: hidden;
}

.sign-left {
    width: 650px;
    background-color: #16161680;
    z-index: 9;
}


.signin-form-wrap {
    width: 532px;
    padding: 96px 16px 0;
}

.signin-form-title {
}

.signin-title {
    font-size: 32px;
    font-weight: 500;
}

.signin-create-account {
    font-size: 14px;
    color: var(--cds-text-helper, #f6f6f6);
}

.signin-form {
    margin-top: 32px;
}
    .signin-form .cds-label {
        font-size: 14px;
    }
    .signin-form .rw-textbox {
        font-size: 14px;
        height: 48px;
    }
    .signin-form input.carbon-textbox {
        background-color: #161616 !important;
    }

    .signin-form .cds-btn {
        height: 48px !important;
        margin-bottom: 24px;
        padding: 16px 64px 11px 16px;
        font-size: 14px;
    }
    .signin-form .cds-checkbox label {
        font-size: 14px;
    }

.signin-bottom {
    color: var(--cds-text-secondary, #525252);
    font-size: 12px;
}

.promotion-wrap {
    height: 380px;
    width: 480px;
    background-color: #16161680;
}

.promotion-title-wrap {
    padding-left: 40px;
    padding-right: 50px;
    padding-top: 80px;
}

.promotion-title {
    color: var(--cds-text-secondary, #525252);
    font-size: 36px;
    line-height: 52px;
    font-weight: 500;
}

.promotion-description-wrap {
    padding-left: 40px;
    padding-right: 50px;
    padding-top: 38px;
}

.promotion-description {
    color: var(--cds-text-secondary, #525252);
    font-size: 28px;
    font-weight: 300;
}


/* 반응형 */
@media (max-width: 1200px) {
    .promotion-wrap {
        display: none;
    }
}

@media (max-width: 991px) {
    .sign-wrap {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-color: #16161680;
    }

    .sign-container, .signin-form-wrap, .signup-form-wrap {
        width: 100% !important;
    }

    .signin-form-wrap, .signup-form-wrap {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .sign-left {
        background-color: rgba(0,0,0,0);
    }

    .sign-right {
        display: none !important;
    }
}


/* ====================================
   Signup - Admin
   ==================================== */
.signup-left {
    width: 650px;
}

.signup-form-wrap {
    width: 532px;
    padding: 80px 16px 0;
}

.signup-form-title {
}

.signup-title {
    font-size: 32px;
    font-weight: 500;
}

.signup-create-account {
    font-size: 14px;
    color: var(--cds-text-helper, #f6f6f6);
}

.signup-form {
    margin-top: 48px;
}

    .signup-form .cds-btn {
        height: 40px !important;
        margin-bottom: 24px;
        padding: 11px 64px 11px 16px;
    }

    .signup-form .cds-checkbox-label {
        cursor: default;
    }

.cds-sign-point, .cds-sign-point a {
    color: var(--cds-link-primary, #0f62fe);
}

@media (max-width: 991px) {
    .signup-right {
        display: none !important;
    }
}


/* ====================================
   Dashboadr - Admin
   ==================================== */
.section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--cds-text-primary, #161616);
    white-space: nowrap;
}

.cds-dashboard-label {
    color: var(--cds-text-primary, #161616);
    font-size: 14px;
}

.cds-dashboard-data {
    color: var(--cds-text-primary, #161616);
    font-size: 32px;
    font-weight: 500;
    text-align: right;
}

.cds-dashboard-bottom-label {
    color: var(--cds-text-primary, #161616);
    font-size: 12px;
}

    .cds-dashboard-bottom-label .cds-dashboard-label {
        color: var(--cds-text-secondary, #525252);
    }

.cds-dashboard-top-data {
    color: var(--cds-text-primary, #161616);
    font-size: 24px;
    font-weight: 500;
}

.cds-dashboard-icon .carbon-icon {
    background-color: var(--cds-icon-secondary, #525252);
}


/* grid */
.rwgrid .cds-row-rwgrid.rw-data-row.rw-row-selected {
    background-color: var(--cds-layer-selected, #e0e0e0) !important;
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
    /*border: none !important; 이걸 주면 포커스가 있을때 컨텐츠가 위아래 흔들린다. 그래서 주석처리 (01.22) */
}
.cds-row-rwgrid:active, .cds-row-rwgrid:focus {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
}


/* 임의 Table */
.cds-table-container {
    width: 100%;
    overflow-x: auto;
}

.cds-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--cds-white-color, #ffffff);
}

.cds-table-thead {
    background-color: var(--cds-table-header, #e0e0e0);
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.cds-table-th {
    padding: 7px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cds-text-primary, #161616);
    letter-spacing: 0.16px;
    line-height: 1.29;
}

.cds-table-tbody {
    background-color: var(--cds-field, #ffffff);
}

.cds-table-tr {
    border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

    .cds-table-tr:hover {
        background-color: var(--cds-layer-hover, #e8e8e8);
    }

    .cds-table-tr:last-child {
        border-bottom: none;
    }

.cds-table-td {
    padding: 7px 16px;
    font-size: 12px;
    color: var(--cds-text-primary, #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(--cds-white-color, #FFFFFF);
    margin-bottom: 32px;
}


/* ====================================
   사용자별 상세로그 - Admin
   ==================================== */
/*사용자 정보*/
.cds-user-profile {
    color: var(--cds-text-primary, #161616);
    font-size: 16px;
}

.cds-user-profile-img {
    width: 160px;
    height: 160px;
    background-color: var(--cds-layer-selected, #e0e0e0);
}

.cds-user-info-wrap {
    flex: 1 auto;
    padding-left: 32px;
}

.cds-user-info {
    color: var(--cds-text-primary, #161616);
}

.cds-user-name {
    padding-top: 8px;
}

.cds-user-email {
    font-size: 14px;
}

/* 타임라인 */
.cds-timeline {
    color: var(--cds-text-primary, #161616);
}

.cds-timeline-time {
    position: relative;
    margin: 20px auto 17px;
}

    .cds-timeline-time::after {
        content: '';
        position: absolute;
        left: 16px;
        top: 27px;
        bottom: -27px;
        width: 1px;
        background: var(--cds-layer-selected, #e0e0e0);
    }

.cds-timeline .cds-timeline-item:last-child .cds-timeline-time::after {
    display: none;
}

.cds-timeline-content {
    min-width: 80%;
    /*    background-color: var(--cds-field);
    cursor: pointer;
    outline: 2px solid transparent;
    color: var(--cds-text-secondary);*/
}
/*.cds-timeline-content:hover{
    background-color: var(--cds-layer-hover);
    color: var(--cds-text-primary);
}
    .cds-timeline-content:focus {
        outline: 2px solid var(--cds-focus);
        outline-offset: -2px;
    }
    .cds-timeline-content:active {
        outline: 2px solid #0f62fe !important;
        outline-offset: -2px;
    }*/

.cds-timeline-icon-error .carbon-icon {
    background-color: var( --cds-icon-danger, ##da1e28);
}

.cds-timeline-icon-success .carbon-icon {
    background-color: var(--cds-support-success);
}

.cds-timeline-icon-info .carbon-icon {
    background-color: var(--cds-support-info, #0043CE);
}

.cds-timeline-text {
    font-size: 14px;
    padding-left: 12px;
}

.cds-timeline-info-title {
    padding-left: 12px;
    font-size: 16px;
    font-weight: 600;
}

.cds-timeline-info-time {
    color: var(--cds-text-primary, #161616);
}

.cds-message {
    color: var(--cds-text-primary, #161616);
}

    .cds-message li {
        line-height: 24px;
    }




/* ----- 원격 ----- */


.cds-description {
    color: var(--cds-text-primary, #161616);
}


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

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

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



/* 내 태스크 */
.cds-task-wrap {
    display: flex;
    gap: 8px;
}

@media (max-width: 671px) {
    

    .cds-task-wrap {
        display: flex;
        gap: 0;
    }

    .carbon-radio-label {
        margin-right: 0;
    }
}






/* ====================================
   Contained Tabs
   ==================================== */
/* 댓글/워크로드 영역*/
/* 댓글 */
.cds-comment-symbol {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}

    .cds-comment-symbol img {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

.cds-comment-input .cds-icon-btn {
    padding: 6px 8px;
}

/* 워크로드 */
.cds-workload-symbol {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
}

    .cds-workload-symbol img {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

.cds-workload-input {
}

.cds-contained-tabs {
    background: var(--cds-layer-selected, #e0e0e0);
    /*    border: 1px solid #e0e0e0;*/
}

.cds-contained-tab-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--cds-layer-selected, #e0e0e0);
    /*    border-bottom: 1px solid #c6c6c6;*/
    overflow-x: auto;
    scrollbar-width: none;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}
cds-contained-tab-list::-webkit-scrollbar {
    display: none;
}


/* ====================================
   Teams Tabs
   ==================================== */
/* 기본 탭 */

.cds-tab-button {
    flex: 1;
    border: none;
    border-right: 1px solid #c6c6c6;
    font-size: 12px;
    font-weight: 400;
    color: var(--cds-text-secondary, #525252);
    cursor: pointer;
    transition: background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
    position: relative;
    box-shadow: inset 0 -2px 0 0 var(--cds-border-subtle-01, #e0e0e0);
    background-color: var(--cds-field, #ffffff);
    padding: 11px 16px !important;
    white-space: nowrap;
}

    .cds-tab-button:last-child {
        border-right: none;
    }

    .cds-tab-button:hover {
        background: #d1d1d1;
        color: var(--cds-text-primary, #161616);
        font-weight: 400;
        box-shadow: inset 0 -2px 0 0 var(--cds-border-strong-01, #8d8d8d);
    }

    .cds-tab-button:focus {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px !important;
        z-index: 1;
    }

    /* Active Tab */
    .cds-tab-button.active {
        background: var(--cds-field, #ffffff);
        color: var(--cds-text-primary, #161616);
        font-weight: 600;
        /*        border-top: 2px solid var(--cds-border-interactive, #0f62fe);*/
        box-shadow: inset 0 2px 0 0 var(--cds-border-interactive, #0f62fe);
        box-shadow: inset 0 -2px 0 0 var(--cds-border-interactive, #0f62fe);
    }

    /* Disabled Tab */
    .cds-tab-button:disabled {
        background: #e0e0e0;
        color: #c6c6c6;
        cursor: not-allowed;
        border-top: none;
    }

.tab-button:disabled:hover {
    cursor: not-allowed;
}

/* Tab Panel */
.cds-tab-panel {
    display: none;
    padding: 16px;
    height: 100%;
    background-color: var(--cds-field, #ffffff);
}

    .cds-tab-panel.active {
        display: block;
    }

    .cds-tab-panel h2 {
        font-size: 20px;
        font-weight: 600;
        margin: 0 0 16px 0;
        color: var(--cds-text-primary, #161616);
    }

    .cds-tab-panel p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--cds-text-secondary, #525252);
        margin: 0;
    }


/* 프로젝트 */
.project-container {
    display: grid;
    grid-template-columns: repeat(var(--cds-grid-num), 1fr);
    gap: 16px;
}

.project-item {
    display: flex;
    background-color: var(--cds-field, #ffffff);
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 16px;
    /*    height: 44px;
    min-height: 44px;*/
}

    .project-card-header .cds-icon-only-btn {
        padding: 12px !important;
    }

.project-client {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.card-btn-toolbar {
    display: flex;
    align-items: center;
}

.project-card-body {
    padding: 16px;
    flex: 1 1 auto;
}

.project-title {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.project-logo {
}

.project-name {
    padding: 0 16px;
}

.project-card-footer {
    padding: 16px;
    font-size: 12px;
    color: var(--cds-text-secondary, #525252);
}

/* 담당자 */
.project-manager {
}

    .project-manager ul.project-manger-list {
        margin: 0 !important;
        padding: 0 !important;
    }

        .project-manager ul.project-manger-list li {
            list-style: none;
        }

.cds--progress-bar {
}




/* OLD */
/* 콤보박스 아이템 전체 컨테이너 */
.carbon-combobox {
    background-color: var(--carbon-textbox-bg, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-bottom: 1px solid var(--carbon-textbox-border-bottom, #8d8d8d) !important;
}

    .carbon-combobox:focus {
        border: 2px solid var(--border-primary-color) !important;
    }

    .carbon-combobox:not(.disabled):focus-within {
        border: 2px solid var(--border-primary-color) !important;
        outline: none;
    }

    .carbon-combobox.disabled:focus-within {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--carbon-textbox-border-bottom, #8d8d8d) !important;
        outline: none !important;
    }

    .carbon-combobox.disabled {
        background-color: var(--white-color, #FFFFFF) !important;
        border-bottom: 1px solid var(--carbon-textbox-border-bottom-readonly, #e7e7e7) !important;
    }

input.carbon-combobox-input {
    background-color: var(--carbon-textbox-bg, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
}
    /*    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(--carbon-textbox-border-bottom-readonly, #e7e7e7) !important;*/
    }

.carbon-combobox-item {
}

    .carbon-combobox-item:hover {
        background-color: var(--carbon-combobox-bg) !important;
        color: #fff;
    }

.carbon-dropdown-button {
    background-color: var(--carbon-textbox-bg, #F4F4F4) !important;
    border: 0px solid black !important;
}



/* 내 태스크 */
.cds-task-wrap {
    display: flex;
    gap: 8px;
}

.cds-task-list{
    flex: 0 0 760px;
}

@media (max-width: 671px) {
    
    .cds-task-wrap {
        display: flex;
        gap: 0;
    }
    .carbon-radio-label {
        margin-right: 0;
    }
}
@media (max-width: 760px) {
    .cds-task-list {
        flex: 0 0 375px !important;
    }
}


/* 내용  textarea */
.carbon-item-container {
}

    .carbon-item-container.selected {
        border: 1px solid var(--border-primary-color);
    }

    .carbon-item-container:focus {
        border: 2px solid var(--border-primary-color) !important;
    }

    .carbon-item-container:focus-within {
        border-color: var(--border-primary-color);
        outline: none;
    }


/* 각각의 아이템 */
.carbon-item {
    background-color: var(--carbon-textbox-bg, #F4F4F4) !important;
    padding: 3px 10px;
    height: 26px;
    min-height: 26px;
    font-size: 12px;
    font-weight: 400;
}

    .carbon-item:hover {
        background-color: var(--carbon-combobox-bg) !important;
        color: #fff;
    }

    .carbon-item:focus {
        border: 2px solid var(--border-primary-color) !important;
    }

    .carbon-item.selected {
        border: 1px solid var(--border-primary-color);
        color: #fff;
    }

    .carbon-item:focus-within {
        border-color: var(--border-primary-color);
        outline: none;
    }

/* AutoCompleted*/
.carbon-autocompleted {
    background-color: var(--carbon-textbox-bg, #F4F4F4) !important; /* 해당 소스 주석 시 초기 랜더링 됨.*/
    border: none !important;
    border-bottom: 1px solid var(--carbon-textbox-border-bottom, #8d8d8d) !important;
    color: var(--carbon-dark-color);
}

    .carbon-autocompleted:focus {
        border: 2px solid var(--border-primary-color) !important;
    }

    .carbon-autocompleted.disabled {
        background-color: var(--white-color, #FFFFFF) !important;
        border-bottom: 1px solid var(--carbon-textbox-border-bottom-readonly, #e7e7e7) !important;
    }

    .carbon-autocompleted li:hover {
        background-color: var(--carbon-combobox-bg) !important;
        color: var(--white-color);
    }

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

.carbon-autocompleted-border {
    border: 0px solid #fff;
}

    .carbon-autocompleted-border:focus-within {
        border: 2px solid var(--border-primary-color) !important;
    }

.carbon-switch {
    width: 40px !important;
    height: 20px !important;
    border-radius: .75rem;
/*    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(--toggle-off, #8d8d8d) !important;
        width: 40px !important;
        height: 20px !important;
    }

        .carbon-switch .form-check-input:checked {
            background-color: var(--success-color, #24a148) !important; /* 녹색 */
            border-color: #24a148;
        }

        .carbon-switch .form-check-input:focus {
            box-shadow: 0 0 0 2px var(--border-primary-color) !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 {
}

/* 담당자 */
.project-manager {

}
    .project-manager ul.project-manger-list{
        margin: 0 !important;
        padding: 0 !important;
    }
    .project-manager ul.project-manger-list li {
        list-style: none;
    }


/* Prompt Lab */
.cds-verticaltabs-wrap {
}

.cds-verticaltabs {
}

.cds-verticaltab-list {
}

.cds-verticaltab-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cds-text-primary, #161616);
    display: flex;
    padding: 10px 16px;
    border-left: 3px solid var(--cds-border-subtle-01, #e0e0e0) !important;
}

    .cds-verticaltab-item:hover {
        border-left: 3px solid var(--cds-border-strong-01, #e0e0e0) !important;
        color: var(--cds-text-primary, #161616) !important;
    }

    .cds-verticaltab-item:focus, .cds-verticaltab-item:active {
        outline: 2px solid var(--cds-focus, #0f62fe) !important;
        outline-offset: -2px !important;
    }

.cds-verticaltab-active {
    margin-bottom: 0px;
    border-left: 3px solid var(--cds-primary, #0f62fe) !important;
    color: var(--cds-text-primary, #161616) !important;
    font-weight: 600 !important;
}

    .cds-verticaltab-active:hover {
        margin-bottom: 0px;
        border-left: 3px solid var(--cds-primary, #0f62fe) !important;
        color: var(--cds-text-primary, #161616) !important;
    }



.prompt-list-top {
    border-bottom: 1px solid var( --cds-border-subtle-01, #e0e0e0) !important;
}
.prompt-list-top .cds-icon-only-btn:hover{
    background-color: var(--cds-primary, #0f62fe) !important;
    color: var(--cds-text-on-color, #ffffff) !important;
}

.prompt-list {
    width: 256px;
    border-right: 1px solid var( --cds-border-subtle-01, #e0e0e0) !important;
}
.prompt-list-content a {
    font-size: 14px;
    overflow-y: auto;
    height: 100%;
}

.prompt-list-content .wvs-sidebar-nav-item {
    flex-direction: column;
    align-items: baseline;
    gap: 2px;
    padding: 12px 16px;
}
.prompt-list-content .wvs-sidebar-nav-item:active,
.prompt-list-content .wvs-sidebar-nav-item:focus {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
}

.prompt-top-title {
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
}

.prompt-list-title {
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
}

.prompt-list-sub {
    font-size: 12px;
    font-weight: 400;
}

.prompt-list-content .wvs-sidebar-nav-item.selected {
    background-color: var(--cds-layer-hover, #e8e8e8);
}

.prompt-title {
    font-weight: bold;
    font-size: 20px;
    background: var(--cds-layer-01, #f4f4f4);
    padding: 10px 5px;
}
.prompt-container .form-control-custom{
    border: none !important;
}


/*.prompt-container .form-control-custom:focus {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
    box-shadow: none;
}*/
.prompt-container .cds-top-btn {
    border-bottom: 1px solid var( --cds-border-subtle-01, #e0e0e0) !important;
}
    .prompt-container .cds-top-btn > *:last-child {
        margin-right: 0px !important;
    }