@charset 'utf-8';
:root {
    --bs-body-bg:#f9f9fb;
    --bs-inverse-bg:#fff;
    --bs-theme:#0056b3;
    --bs-theme-dark:#002855;
    --bs-theme-bg-subtle:#e9f2ff;
    --bs-primary-dark:#05386B;
}


* {margin:0; padding:0; font-size:13px; font-family:'Inter', 'Pretendard', '맑은 고딕', '고딕', 'sans serif' }

/*
*::-webkit-scrollbar {width:8px; height:8px}
*::-webkit-scrollbar-track{background-color:var(--pico-color-grey-50)}
*::-webkit-scrollbar-thumb{background:var(--pico-primary-background) !important;  border-radius:5px}
*::-webkit-scrollbar-thumb:hover{background:var(--pico-primary-hover-background)}


*::-webkit-scrollbar-track{background-color:transparent}
*::-webkit-scrollbar-thumb{background: rgba(135, 139, 144, 0.5);}
*::-webkit-scrollbar-thumb:hover{background: rgba(135, 139, 144, 0.5); width:8px}
*/
body {overflow-x:hidden}


form {display:inline-block; width:100%}
ul {margin-bottom:0; padding:0}
ul li {list-style:none; margin:0; padding:0}
img {width:100%}

a {display:inline-block; cursor:pointer}
a:not(.link):not(.btn) {text-decoration:none; color:inherit}
a.link {color:var(--bs-theme); text-underline-position:under}


input {border-radius:5px}
input:not([type=checkbox],[type=radio]){margin-bottom:0} 
select, textarea, [type=button],
:where(ol,ul) li {margin-bottom:0}
textarea {resize:none}

/*input[type="date"]::-webkit-calendar-picker-indicator {display:none;  -webkit-appearance: none}*/

input[type='date']:after,
input[type='datetime-local']:after,
.icon-wrap:after {font-family: 'Material_Symbols_Outlined'; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased}
input[type='date']:after,
input[type='datetime-local']:after,
.icon-wrap:after {width:37px; height:38px; position:absolute; text-align:center; line-height:38px; right:0; top:0;  border-left:1px solid var(--bs-border-color); background-color:var(--bs-body-bg); color:#6c757d; font-size:16px; pointer-events:none}
input[type='date']:hover:after,
input[type='datetime-local']:hover:after,
.icon-wrap:hover:after{background-color:#6c757d; color:var(--bs-white)}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
select::-webkit-calendar-picker-indicator {position: absolute; top: 0; right: 0; width: 37px; height: 37px; margin: 0; opacity: 0; cursor: pointer }

input[type='date']:after {content:'\e916'}
.icon-wrap {width:100%}
.icon-wrap:after {border-width:0 1px 0 1px; border-style:solid; border-color:var(--bs-border-color); border-top-right-radius:5px; border-bottom-right-radius:5px; height:36px; top:1px}
.icon-wrap select {cursor: pointer}
.icon-wrap.select:after {content:'\e313'}
.icon-wrap.date:after {content:'\e916'}




.form-control:disabled,
.form-select:disabled{background-color:#eee; opacity:.8}


.form-check-input {width:17px; height:18px; margin-top:0}
.form-check-input[type="checkbox"]:checked,
.form-check-input[type="radio"]:checked {background-color:var(--bs-theme-dark); border-color:var(--bs-theme-color)}
.form-check-input + label {margin-left:3px}


.card .form-control:not(:read-only),
.card .form-select:not(:disabled) {background-color: var(--bs-white)}
.card .card-body {padding:25px}

button{display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow }

/*button:hover{box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5)}*/


/*컬러 설정*/
.text-theme {color:var(--bs-theme) !important}
.text-theme-dark {color:var(--bs-theme-dark)}

.bg-soft-primary {background-color: rgba(var(--bs-primary-rgb),.12)}
.bg-soft-secondary {background-color: rgba(var(--bs-secondary-rgb),.12)}
.bg-soft-success {background-color: rgba(var(--bs-success-rgb),.12)}
.bg-soft-purple {background-color: rgba(var(--bs-purple-rgb),.12)}
.bg-soft-info {background-color: rgba(var(--bs-info-rgb),.12)}
.bg-soft-danger {background-color: rgba(var(--bs-danger-rgb),.12)}
.bg-gradient-primary {background-image :linear-gradient(to right,color-mix(in srgb,var(--pico-primary) 70%,white),color-mix(in srgb,#f34b7e 70%,white),color-mix(in srgb,var(--pico-primary) 70%,white))}


.bs-primary-bg-subtle {background-color:var(--bs-primary-bg-subtle)}
.bs-danger-bg-subtle {background-color:var(--bs-danger-bg-subtle)}
.bs-warning-bg-subtle {background-color:var(--bs-warning-bg-subtle)}
.bs-info-bg-subtle {background-color:var(--bs-info-bg-subtle)}
.bs-success-bg-subtle {background-color:var(--bs-success-bg-subtle)}

/*버튼 컬러*/
.btn {display:flex; justify-content:center; align-items:center; padding:10px 20px; border-radius:5px}
.btn span:not(.material-symbols-outlined) {font-size:13px}
.btn-sm {padding:4px 5px}
.btn .material-symbols-outlined {font-size:16px}
.btn-theme {
    --bs-btn-hover-bg : #004A99;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-border-color:#004A99;
    background-color:var(--bs-theme); border:1px solid var(--bs-theme); box-shadow: none; color:var(--bs-inverse-bg)
}

.btn-theme-dark {
    --bs-btn-hover-bg : #001A3A;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-border-color:#001A3A;
    background-color:var(--bs-theme-dark); border:1px solid var(--bs-theme-dark); box-shadow: none; color:var(--bs-inverse-bg)
}
.btn-outline-theme-dark {
    --bs-btn-hover-bg :var(--bs-theme-dark);
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-border-color:#001A3A;
    background-color:var(--bs-inverse-bg); border:1px solid var(--bs-theme-dark); box-shadow: none; color:var(--bs-theme-dark)
}

.btn-primary-dark {
    --bs-btn-hover-bg : #00305F;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-border-color:#00305F;
    background-color: var(--bs-primary-dark); color:var(--bs-white); border-color:var(--bs-primary-dark);
}


.accordion .accordion-item {margin-bottom:15px; border-radius:5px; overflow:hidden; }
.accordion .accordion-item:not(:first-child) {border-top:1px solid var(--bs-border-color)}
.accordion .accordion-item .accordion-button {border:none; border-radius:0}
.accordion .accordion-item .accordion-button.collapsed {background-color:var(--bs-inverse-bg)}
.accordion-button:focus {box-shadow:2px 2px 4px rgba(0,0,0,0.1)}


.select2-search__field:focus-visible {outline:none}
.selection {position:relative; width:100%}
.selection  > span {border-color:var(--bs-border-color) !important; height:37px !important; border-radius:7px !important}
.selection .select2-selection:focus-visible {outline:none}
.selection .select2-selection__rendered {line-height:37px !important; font-size:12px !important; padding-left:1rem !important}
.selection .select2-selection__arrow {right:10px !important; top:5px !important}
.select2-container {width:100% !important}
.select2-container--default .select2-selection--single .select2-selection__clear {margin-right:30px; height:35px}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background-color:var(--bs-primary)}
.select2-container--open .select2-dropdown--below {border-top:1px solid var(--bs-border-color)}
.select2-dropdown {border-color:var(--bs-border-color)}


.card {box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.16)}

.ui-widget-header {background-color:var(--bs-inverse-bg)}
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {border:none; background-color:transparent; text-align:center}
.ui-state-highlight, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active {background-color:var(--bs-info); color:var(--bs-inverse-bg); border-radius:5px}

.dropdown {position:absolute; padding:10px 5px; background-color:var(--bs-inverse-bg); border:1px solid var(--bs-border-color); border-radius:5px; box-shadow:0 3px 4px 0 #283b5c1a; transition:all .3s ease-in-out; display:none}
.dropdown a {padding:5px 10px; width:100%; border-radius:5px; margin:0}
.dropdown a:hover {background-color:var(--bs-gray-200)}


.w-30 {width:30%}
.w-40 {width:40%}
.w-45 {width:45%}
.w-70 {width:70%}
.w-90 {width:90%}


.required {position:relative}
.required .text-del {position:absolute; right:10px; top:3px}

.date {position:relative; border-radius:5px; overflow:hidden}
.date:before {font-family: 'Material_Symbols_Outlined'; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; content:'\ebcc'; position:absolute; right:10px; top:8px; color:var(--bs-gray-500)}
.date_area .date{width:calc(50% - 15px); display:inline-block}
.date_area .date:first-child:after {content:'\007e'; position:absolute; right:-20px; top:calc(50% - 10px)}
.date_area .date:last-child {float:right}

.card-header {font-size:20px;}


.table {--bs-thead-bg: rgb(241 245 249 / 1); table-layout:fixed; width:100%; border-top:0px solid transparent}
.table thead {top:0; position:sticky; background-color:var(--bs-inverse-bg); z-index:1}
.table th {background-color:var(--bs-thead-bg); min-height:38px }
.table th.bg {background-color:var(--bs-theme-base-color)}
.table thead th:first-child,
.table tbody td:first-child {border-left:0}
.table thead th:last-child,
.table tbody td:last-child {border-right:0}
.table-bordered > thead > tr:first-child {border-top:0}


/* Pagination */
.pagination-area {padding: 15px 0 0 0; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center}
.pagination-area .form-select {height:38px}
.pagination-area .page-link {min-width:35px; height:35px; text-align:center; line-height:28px; border-color:transparent; border-radius:5px}
.pagination-area .page-link:not(.active, :hover) {background-color:var(--bs-inverse-bg)}
.pagination-area .page-link:hover {background-color:var(--bs-body-bg); border-color:var(--bs-border-color)}
.pagination-area .page-link.active {background-color:var(--bs-theme-bg-subtle); border-color:var(--bs-theme); color:var(--bs-theme); font-weight:600}
.pagination-area nav + div {font-size:14px}
.pagination-area nav + div .total {color:var(--bs-theme)}



.spinner-wrap {position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:9999; display:flex; justify-content:center; align-items:center}


@media (max-width: 1023px) {
    .main>aside#documentation-menu {
        display: grid;
        z-index: 4;
        position: fixed;
        inset: 0;
        grid-template-rows: auto 1fr;
        transform: translate(calc(-100% - var(--pico-spacing)));
        transition: transform var(--pico-transition);
    }


    .main>aside#documentation-menu.is_open{
      transform:translate(0);
    }
}


/* DBCS 관리페이지 - 검색영역 수평+수직 레이아웃 */

/* 검색영역 전체 */
.search-box {
    margin-bottom: 20px;
}

/* 각 검색행 */
.search-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}

/* 레이블 - 고정 너비 */
.search-label {
    width: 100px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

/* 입력필드 영역 */
.search-row-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

/* 입력필드 - 전체 너비 */
.search-input {
    flex: 1;
    min-width: 150px;
}

/* 버튼 영역 - 우측 정렬 */
.search-btn-group {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.search-btn-group .btn {
    white-space: nowrap;
}

/* 테이블 영역 - 아래 배치 */
.data-table-wrapper {
    margin-bottom: 20px;
}