@import "../css/token/krds_tokens.css";

/* @import "../css/token/krds_tokens_nibr.css"; */
/* 
** 2025-07-02 이다혜 common 재정의
** krds 기반으로 반영함
*/

.btn_group {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap:wrap;
}
@media screen and (max-width: 1024px) {
    .btn_group {width:100%;}
    .btn_group > .krds-btn {width: 100%;}
}
.disflex{display: flex; gap:5px;}
.fl-wrap {flex-wrap: wrap}
.fl-start {justify-content: flex-start;}
.fl-cent {justify-content: center;}
.justtify-betw{justify-content: space-between}
.alit-cent {align-items: center;}

.btn_group.full > a,.btn_group.full > button{flex:1}

button + button {margin: 0;}


/**************************************************************************/
/* 버튼 색상 */
.wh {
    background-color: var(--krds-color-light-alpha-white100);
    border: 0.1rem solid var(--krds-color-light-gray-20);
    color: var(--krds-color-light-gray-90)
}

.wh:hover,
.wh:focus,
.wh:active {
    background-color: var(--krds-color-light-gray-5);
}

.wh .svg-icon {
    background-color: var(--krds-color-light-gray-100)
}


.blue {
    background-color: var(--krds-color-light-primary-50);
    color: var(--krds-color-light-gray-0);
}

.blue:hover,
.blue:focus,
.blue:active {
    background-color: var(--krds-color-light-primary-60);
    color: var(--krds-color-light-gray-0);
}

.blue:hover span,
.blue:focus span,
.blue:active span {
    color: var(--krds-color-light-gray-0)
}

/* krds-btn과 함께 사용될 때 우선순위 보장 */
.krds-btn.blue {
    background-color: var(--krds-color-light-primary-50) !important;
    color: var(--krds-color-light-gray-0) !important;
    border-color: var(--krds-color-light-primary-50) !important;
}

.krds-btn.blue:hover,
.krds-btn.blue:focus,
.krds-btn.blue:active {
    background-color: var(--krds-color-light-primary-60) !important;
    color: var(--krds-color-light-gray-0) !important;
    border-color: var(--krds-color-light-primary-60) !important;
}

.krds-btn.blue:hover span,
.krds-btn.blue:focus span,
.krds-btn.blue:active span,
.krds-btn.blue span {
    color: var(--krds-color-light-gray-0) !important;
}


.info {
    background-color: var(--krds-color-light-primary-5);
    color: var(--krds-color-light-primary-60);
    border: 0.1rem solid var(--krds-color-light-primary-50);
}

.info:hover,
.info:focus,
.info:active {
    background-color: var(--krds-color-light-primary-10);
}

.info .svg-icon {
    background-color: var(--krds-color-light-primary-50)
}

/* krds-btn과 함께 사용될 때 우선순위 보장 */
.krds-btn.info {
    background-color: var(--krds-color-light-primary-5) !important;
    color: var(--krds-color-light-primary-60) !important;
    border-color: var(--krds-color-light-primary-50) !important;
}

.krds-btn.info:hover,
.krds-btn.info:focus,
.krds-btn.info:active {
    background-color: var(--krds-color-light-primary-10) !important;
    color: var(--krds-color-light-primary-60) !important;
    border-color: var(--krds-color-light-primary-50) !important;
}

.krds-btn.info:hover span,
.krds-btn.info:focus span,
.krds-btn.info:active span,
.krds-btn.info span {
    color: var(--krds-color-light-primary-60) !important;
}



.danger {
    background-color: var(--krds-color-light-danger-50);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-danger-50);
}

.danger:hover,
.danger:focus,
.danger:active {
    background-color: var(--krds-color-light-danger-60);
    color: var(--krds-color-light-gray-0);
}

/* krds-btn과 함께 사용될 때 우선순위 보장 */
.krds-btn.danger {
    background-color: var(--krds-color-light-danger-50) !important;
    color: var(--krds-color-light-gray-0) !important;
    border-color: var(--krds-color-light-danger-50) !important;
}

.krds-btn.danger:hover,
.krds-btn.danger:focus,
.krds-btn.danger:active {
    background-color: var(--krds-color-light-danger-60) !important;
    color: var(--krds-color-light-gray-0) !important;
    border-color: var(--krds-color-light-danger-60) !important;
}

.krds-btn.danger:hover span,
.krds-btn.danger:focus span,
.krds-btn.danger:active span,
.krds-btn.danger span {
    color: var(--krds-color-light-gray-0) !important;
}

/* danger 보더타입 */
.danger.border {
    background-color: var(--krds-light-color-border-danger-light);
    color: var(--krds-light-color-text-danger);
    border: 0.1rem solid var(--krds-light-color-border-danger);
}

.danger.border:hover,
.danger.border:focus,
.danger.border:active {
    background-color: var(--krds-color-light-danger-60);
    color: var(--krds-light-color-surface-danger-subtler);
}

/* krds-btn과 함께 사용될 때 우선순위 보장 */
.krds-btn.danger.border {
    background-color: var(--krds-light-color-border-danger-light) !important;
    color: var(--krds-light-color-text-danger) !important;
    border-color: var(--krds-light-color-border-danger) !important;
}

.krds-btn.danger.border:hover,
.krds-btn.danger.border:focus,
.krds-btn.danger.border:active {
    background-color: var(--krds-color-light-danger-60) !important;
    color: var(--krds-light-color-surface-danger-subtler) !important;
    border-color: var(--krds-color-light-danger-60) !important;
}

.krds-btn.danger.border span {
    color: var(--krds-light-color-text-danger) !important;
}

.krds-btn.danger.border:hover span,
.krds-btn.danger.border:focus span,
.krds-btn.danger.border:active span {
    color: var(--krds-light-color-surface-danger-subtler) !important;
}

.danger.border .svg-icon {
    background-color: var(--krds-light-color-text-danger);
}

.danger.border:hover .svg-icon {
    background-color: var(--krds-light-color-surface-danger-subtler);
}



.warning {
    background-color: var(--krds-color-light-warning-40);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-warning-40);
}

.warning:hover,
.warning:focus,
.warning:active {
    background-color: var(--krds-color-light-warning-50);
}



.succes {
    background-color: var(--krds-color-light-success-50);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-success-50);
}

.succes:hover,
.succes:focus,
.succes:active {
    background-color: var(--krds-color-light-success-60);
}



.point {
    background-color: var(--krds-color-light-point-50);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-point-50);
}

.point:hover,
.point:focus,
.point:active {
    background-color: var(--krds-color-light-point-60);
}




.bk {
    background-color: var(--krds-color-light-alpha-black100);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-gray-100);
    transition: var(--krds-transition-base);
}

.bk:hover,
.bk:focus,
.bk:active {
    background-color: var(--krds-color-light-gray-0);
    color: var(--krds-color-light-gray-100);
    border: 0.1rem solid var(--krds-color-light-gray-100);
}

.bk:hover .svg-icon,
.bk:focus .svg-icon,
.bk:active .svg-icon {
    background-color: var(--krds-color-light-gray-100);
}



/*************************************************
** 아이콘 사이즈,색상 
*************************************************/
.btn.small .svg-icon {
    width: var(--krds-icon--size-small);
    height: var(--krds-icon--size-small);
}

.btn .svg-icon {
    background-color: var(--krds-color-light-gray-0);
}






/*************************************************
** 아이콘 추가 ::25-07-09, 이다혜 
*************************************************/

.card-view {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(../img/component/icon/card_view.svg);
    mask-image: url(../img/component/icon/card_view.svg);
}

.list-view {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(../img/component/icon/list_view.svg);
    mask-image: url(../img/component/icon/list_view.svg);
}

.ico-close {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(../img/component/icon/ico_close.svg);
    mask-image: url(../img/component/icon/ico_close.svg);
}

.ico-info {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(../img/component/icon/ico_system-info.svg);
    mask-image: url(../img/component/icon/ico_system-info.svg);
    background-color: transparent;
}

#krds-header .header-container .btn-navi.ico-logout::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
  -webkit-mask-image: url(../img/component/icon/ico_logout.svg);
  mask-image: url(../img/component/icon/ico_logout.svg);
}

#krds-header .header-container .btn-navi.ico-my::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
  -webkit-mask-image: url(../img/component/icon/ico_my.svg);
  mask-image: url(../img/component/icon/ico_my.svg);
}
#krds-header .header-container .btn-navi.ico-setting::before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
  -webkit-mask-image: url(../img/component/icon/ico_setting.svg);
  mask-image: url(../img/component/icon/ico_setting.svg);
}


/*************************************************
** 보더형 아이콘
*************************************************/

.krds-btn.only-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
}
.krds-btn.only-icon .svg-icon {
    width: var(--krds-icon--size-large);
    height: var(--krds-icon--size-large);
}



/***************************************************************************************
***************************************************************************************
** 텍스트 버튼 (페이지 내 이동)
*************************************************/

.btn.link {
    color: var(--krds-color-light-gray-95);
    display: inline-block;
    height: auto !important;
    min-height: auto;
    padding: 0 var(--krds-number-2);
    font-size: var(--krds-pc-font-size-body-large);
    text-align: left;
    white-space: normal;
    color: var(--krds-color-light-primary-50);
}

.btn.link:hover,
.btn.link:focus,
.btn.link:active {
    background-color: var(--krds-color-light-secondary-5);
}

/*************************************************
** 텍스트 버튼 사이즈 정의
*************************************************/
.btn.link.medium {
    padding: 0 var(--krds-number-2);
    font-size: var(--krds-button--pc-font-size-medium);
}





/***************************************************************************************
***************************************************************************************
** 텍스트 색상(상태관리 영역)
*************************************************/
.stat-txt {
    display: inline-flex;
    color: var(--krds-high-contrast-color-text-static);
    font-size: var(--krds-pc-font-size-body-medium);
    border: var(--transparent);
    background: var(--transparent);
    text-align: left;
    padding: 0 var(--krds-padding-1);
}
.stat-txt:hover,.stat-txt:focus,.stat-txt:active {
    color: var(--krds-high-contrast-color-text-static);
    border: var(--transparent);
    background: var(--transparent);
}

.stat-txt.blue{
    color: var(--krds-light-color-element-primary);
}
.stat-txt.info{
    color: var(--krds-light-color-element-information);
}
.stat-txt.danger {
    color: var(--krds-light-color-element-danger);
}
.stat-txt.warning{
    color: var(--krds-high-contrast-color-text-warning);
}

.stat-txt.succes{
    color: var(--krds-light-color-element-success);
}
.stat-txt.point{
    color: var(--krds-light-color-element-point);
}

/***************************************************************************************
***************************************************************************************
** 버튼 라운드
*************************************************/
.krds-btn.round {
    border-radius: var(--krds-radius-max) var(--krds-radius-max);
}

@media (max-width: 767px) {
    .krds-btn {
        justify-content: center;
        width: 100%;
    }
}
/***************************************************************************************
***************************************************************************************
** 입력 폼 (div 형태) :: 공정거래위원회 css 파일 참고하여 작성함.
                        필요없는 css도 있을 수 있습니다. 추 후 정리 예정
                        >> 작업자 이다혜
*************************************************/
.p-wrap {word-break: break-all}


/** form **/
.txt-box.bg-white .box-sec .form-conts .form-datepicker.single {
    width: 18rem;
}

.txt-box.bg-white .box-sec .form-conts .form-datepicker.period {
    width: 26.2rem;
}

textarea.form-control {
    height: var(--krds-spacer-37);
    font-size: var(--krds-input-fz-md);
}

.textarea-wrap .form-control:placeholder-shown {
    font-size: var(--krds-input-fz-md);
}

.form-check.lg > [type=radio] ~ label::after {
    top: calc((var(--krds-rdo-size-lg) - 1.2rem) / 2);
    left: calc((var(--krds-rdo-size-lg) - 1.2rem) / 2);
    width: 1.2rem;
    height: 1.2rem;
}

.form-select {
    width: auto;
    min-width: 13rem;
}

.form-tit {
    color: #555;
    font-size: 1.7rem;
}

.txt-box.bg-white .box-sec .p-attach .p-attach__item.p-file {
    margin-bottom: 0;
}

.txt-box.bg-white .box-sec .p-attach .p-attach__item.p-file+.p-attach__item {
    margin-top: 2rem;
}

@media (max-width: 1099px) and (min-width:1024px) {
    .txt-box.bg-white .form-group {
        width:100%;
    }
}

@media all and (max-width: 799px) {
    .form-select {
        width:100%;
        min-width: inherit;
    }

    .txt-box.bg-white .input-group.m-column .form-datepicker {
        width: 100% !important;
    }
}

@media all and (max-width: 599px) {
    .form-select.md {
        font-size:1.5rem;
    }

    .textarea-wrap .form-control:placeholder-shown {
        font-size: 1.5rem;
    }

    .chk-area {
        gap: var(--krds-spacer-4);
    }

    .txt-box.bg-white .input-group.m-column {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-tit {
        font-size: 1.5rem;
    }

    .txt-box.bg-white .box-sec .p-attach .p-attach__item.p-file+.p-attach__item {
        margin-top: 1.2rem;
    }
}




/***************************************************************************************
***************************************************************************************
셀렉스 박스 수정 : 2025-08-25 // KRDS는 기본이 row형태
*************************************************/
.search-box {}
.form-group.row { flex-direction: row}




/* ** 검색 : 공통 ** */
/* 공통 - 검색 폼 */
.search-top-box {
    --search-box-filter-color-background: var(--krds-color-light-gray-0);;
    --search-box-filter-chip-width-border: var(--krds-light-color-border-width-variable-regular);
    --search-box-filter-chip-color-border: var(--krds-light-color-divider-secondary-light);
	min-width: auto;
}
.search-top-box .sch-filter-box {
    padding: var(--krds-padding-10);
    border-radius: var(--krds-radius-xlarge1);
    background: var(--search-box-filter-color-background);
}

.search-top-box .sch-filter-box .filter-form {
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    flex-direction: row;
    gap: var(--krds-gap-7);
    max-width: 100%;
    flex-wrap: wrap;
}
.search-top-box .sch-filter-box .filter-form > div{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: var(--krds-gap-4);
}
.search-top-box .sch-filter-box .filter-form > div.max-fit{
    max-width: fit-content;
}

@media screen and (max-width: 1024px) {
    .search-top-box .sch-filter-box .filter-form > div,
    .search-top-box .sch-filter-box .filter-form > div.max-fit {flex-direction: column;align-items: flex-start;justify-content: flex-start;}
}


.search-top-box .sch-form-wrap .krds-input {
    width: 48.5rem;
}

.search-top-box .krds-input.medium {
    height: var(--krds-input--size-height-medium)!important;
}

.search-top-box .sch-form-wrap .krds-input.flex-inline {
    display: inline-flex;
}

.krds-form-select {
    width: 18rem;
}

.input-group {
    gap: var(--krds-gap-5);
    align-items: flex-start;
}

.krds-btn.medium {
    flex-shrink: 0;
}


.filter-form {
    display: flex;
    align-items: center;
    gap: var(--krds-gap-7);
    max-width: 100%;
    flex-wrap: wrap;
}



.krds-input {
    width: auto;
}

.label {
    font-weight: var(--krds-font-weight-bold);
    white-space: nowrap;
    /* min-width: 6.3rem; */
}

@media all and (max-width:1023px){
    .search-top-box .sch-filter-box{padding:24px 16px}
    .search-top-box .sch-filter-box .filter-form {width: 100%; flex-direction: column;}
    .krds-form-select {flex:1 1 auto; width:100%;}
    .krds-input {flex:1 1 auto; width: 100%;}
    .search-top-box .sch-filter-box .filter-form > div.max-fit {max-width: unset;}

}