@charset "UTF-8";
@import url(font.css); 
@import url(custom.css); 

*{margin: 0; padding: 0; border: none; color: inherit; font: inherit; text-decoration: none; box-sizing: border-box;}
html { font-size: 14px; width: 100%; height: 100%; }
body { font-family: 'NanumSquare', sans-serif !important; width: 100%; height: 100%; font-size: 14px !important; color: #000;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
button{cursor: pointer; font-size: 14px; background: none; }
input:focus{outline: none;}
.tui-select-box-input,
.tui-select-box-input:focus,
input{padding: 0 10px; border: 1px solid #ddd; font-weight: 700; outline: none;}
textarea{padding: 10px; outline: none; resize: none;}
textarea:focus{outline: none;}
.tui-datetime-input{width: 100%;}
/* layout.css */
/* header */
.header-container { position: sticky; top: 0; left: 0; width: 100%; padding: 0 20px; height: 60px;  z-index: 100; display: flex; justify-content: space-between; border-bottom: 1px solid #F1F0F5; background-color: white;}
/* header > left */
.header-left { display: flex; align-items: center; justify-content: center; gap: 10px;}
.header-left .logo{}
.header-left .logo a{ display: block; }
.header-left .logo a img{height: 25px;}
.header-left .font-sys-name { color: #050076; font-weight: 700;}
/* header > center 바로가기메뉴 */
.header-center { display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 300px; gap: 30px; position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100%;}
.header-center .icon-item { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; color: #d9d9d9; font-weight: 900; font-size: 0.8rem;}
.header-center .icon-item:hover { color: RoyalBlue;} 
/* header > right */
.header-right { display: flex; justify-content: space-between; align-items: center; gap:20px;}
.header-right .login-info{ display: flex; align-items: center; gap:10px;}
.header-right .login-info span{font-weight: 700;}

/* site-map */
.site-map { position: fixed; z-index: 1111; top: 0; left: 0; width: 100%; height: 100vh; background-color: #071427; display: flex; flex-wrap: wrap; padding: 20px 75px 20px 30px; justify-content: space-between; transition: 0.2s; align-content: space-between; opacity: 0; visibility: hidden; min-height: 100vh; gap: 25px; overflow-y: scroll;}
.site-map.active{opacity: 1; visibility: visible;}
.site-map .closebtn { position: absolute; top: 15px; right: 25px; }
.site-map .menu-box {width: 100%;}
.site-map .menu-box:nth-of-type(1),
.site-map .menu-box:nth-of-type(2){width: 49%;}
.site-map .menu-box:nth-of-type(1) .menu-div2 .item,
.site-map .menu-box:nth-of-type(2) .menu-div2 .item{width: calc((100% - 10px) / 2.5);}
.site-map .menu-box .menu-div1{display: flex; align-items: center; gap: 5px; margin-bottom: 10px;}
.site-map .menu-box .menu-div1 span{font-size: 16px; font-weight: 700;}
.site-map .menu-box .menu-div1 .menu-icon{color: RoyalBlue;}
.site-map .menu-box .menu-div2{display: flex; gap: 10px; width: 100%; padding: 5px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; flex-wrap: wrap;}
.site-map .menu-box .menu-div2 .item{width: calc((100% - 40px) / 5); font-size: 16px; display: flex; align-items: center; gap: 5px;}
.site-map .menu-box .menu-div2 .item span{font-size: 16px; color: CornflowerBlue;}
.site-map .menu-box .menu-div2 .item a{padding: 5px; }
.site-map .menu-box .menu-div2 .item a:hover{color: white; background-color: Royalblue; font-weight: 700;}
/* side-nav */
.side-nav{width: 100%; height: calc(100vh - 60px); transition: 0.3s; border-right: 1px solid #F1F0F5;}
.side-nav .closebtn { position: absolute; top: 20px; right: 25px; }
.side-nav.active{right: 0;}
.side-nav .menu-box{border-bottom: 1px solid #F1F0F5;}
.side-nav .menu-div1{display: flex; align-items: center; justify-content: space-between;  cursor: pointer; padding: 15px 20px; font-size: 18px;}
.side-nav .menu-div1 .menu-arrow{font-family: 'Material Symbols Outlined filled 48pt'; font-size: 20px;}
.side-nav .menu-div1 .menu-arrow.menu-on{display: block;}
.side-nav .menu-div1 .menu-arrow.menu-off{display: none;}
.side-nav .menu-div1.active .menu-arrow.menu-on{display: none;}
.side-nav .menu-div1.active .menu-arrow.menu-off{display: block;}
.side-nav .menu-div2{display: none; font-size: 16px;}
.side-nav .menu-div2.active{display: block;}
.side-nav .menu-div2.active{}
.side-nav .menu-div2 .item{padding: 10px; background-color: #F9FBFC; display: flex; align-items: center; gap: 5px;}

/* body */
.body-container { min-height: calc(100vh - 60px); width: 100%; position: relative; display: flex;}
.body-container .left-nav{width: 250px;}
.body-container .right-body{width: calc(100% - 250px); display: flex; flex-direction: column; overflow-x: hidden;}
.pg-title {border-bottom: 1px solid #F1F0F5; font-weight: 700; font-size: 18px; padding: 0 10px; display: flex; justify-content: space-between; align-items: center;}
.pg-title h2{display: inline-block; border-bottom: 2px solid #0080A7; padding: 14px 10px;}
.body-inner{padding: 20px;}


/* footer */
.footer-container{color: white; background-color: #153452; width: 100%; font-weight: 300; display: flex; justify-content: space-between; align-items: center; padding: 0px 20px; line-height: 1.5; height: 120px; position: relative;}
.footer-logo{ width: 150px; font-size: 0; }
.footer-logo img{width: 100%;}
.footer-center{ text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.footer-right {display: flex; flex-direction: column; gap: 5px;}
.footer-right a,
.footer-right button{ padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; gap: 5px; display: flex; justify-content: space-between;}
.footer-right a span,
.footer-right button span{font-size: 14px;}
/* ************************************************************************************* */

/* new 컨텐츠 레이아웃 */
.body-cont {padding: 10px 10px; background-color: #F9FBFC; flex: 1;}
.body-cont .grid-wrap{height: 100%;}
.body-cont.body-center{display: flex; align-items: center; justify-content: center;}




/* 상단버튼 레이아웃 */
.top-btn{ display: flex; gap: 5px; }
.top-btn h2{font-size: 16px;}
.search-wrap{display: flex; align-items: center; gap: 50px; padding: 10px; border-bottom: 1px solid #F1F0F5;}
.search-div{display: flex; flex-wrap: wrap; gap: 20px;}
.search-item { font-size: 12px; display: flex; align-items: center; gap: 5px;}
.search-item > span{min-width: 45px;}
.search-item .tui-datetime-input{width: 130px;}
.search-item .tui-datetime-input > input{width: 125px;}
.search-item .tui-select-box-input,
.search-item .tui-select-box-input:focus,
.search-item input{width: 150px; height: 30px;}
.tui-datepicker-input > input{height: auto; position: relative; z-index: 1; background: none;}
.search-item input::placeholder{color: #000;}
.search-item .tui-select-box-dropdown{z-index: 22;}
.search-item .label-div{width: 100px;}
.search-item .label-item,
.search-item .label-item > *{width: 200px; }
.search-item .label-item .sbux-pik-input.sbux-dirty{width: calc(200px - 37px);}


/* 검색 레이아웃 */
/* 검색 레이아웃 한줄 */
.search-div1 { display: grid; grid-template-columns: auto auto auto auto auto auto auto; margin: 10px 0 15px; background-color: #eaf7fc; border-radius: 10px; box-shadow: 1px 1px 2px 0px LightGrey; padding: 0 10px;}
.search-item1 { font-size: 12px; padding: 10px; display: flex; align-items: center; gap: 10px;}
/* 검색 레이아웃 두줄 */
.search-div2 { display: grid; grid-template-columns: 100px 230px 100px 230px 100px 230px auto;
 margin: 10px 0 15px; background-color: #eaf7fc; border-radius: 10px; box-shadow: 1px 1px 2px 0px LightGrey; padding: 0 10px;}
.search-item2 { font-size: 12px; padding: 10px; display: flex; align-items: center; gap: 10px;}
.search-item1 .sbux-sel,
.search-item2 .sbux-sel,
.search-item1 div.sbux-form-group,
.search-item2 div.sbux-form-group{width: 180px;}
/* 검색 버튼 */
.search-button-wrap{display: flex; align-items: center; gap:5px;}
.search-button-wrap button{}
.search-button-wrap .search-btn{}
.search-button-wrap .search-btn i{height: 15px;}
.search-button-wrap .search-btn i img{height: 100%;}
.search-button-wrap .clear-btn{background: #ddd;}
/* 2025-08-06 **** 여기까지 수정함 */

/* 검색 날짜 */
.sbux-pik-daterange .sbux-pik-wrap .sbux-pik-date .sbux-pik-input.sbux-pik-input.sbux-dirty,
.sbux-pik-input.sbux-dirty{background-color: #fff !important; color: #000 !important; text-align: center !important; width: 100px;}
.sbux-pik-daterange{border: none !important;}
.sbux-pik-daterange .sbux-pik-wrap .sbux-pik-date .sbux-pik-input{
    width:90px; text-align: center; background-color: white; color: black;
}

/* 검색날짜 표시영역 */
.search-date-wrap { width: 100%; text-align: right; font-size: 16px; font-weight: bold; }
.search-date { color: #0A406C; display: inline-block; background-color: #d7edff; padding: 10px 15px; border-radius: 4px; }
.search-date-wrap .day-night { margin-left: 15px; }

/* 모달 내 검색 영역 */
.modal-search-div { display: flex; min-height: 50px; margin: 10px 0px; background-color: #eaf7fc; border-radius: 10px; box-shadow: 1px 1px 2px 0px LightGrey; justify-content: center; }
.modal-search-div .input { margin-right: 20px; }

/* error page */
.error-center-box { position: fixed; top: 50%; left: 50%; font-family: 'NanumSquare', sans-serif; font-weight: 400; text-align: center; }
.error-box {
  transform: translate(-50%, -50%); position: relative; width: 500px; display: flex; flex-direction: column;
  justify-content: flex-start; background-color: white; border: 1px solid #ccc; border-radius: 7px; font-family: 'NanumSquare', sans-serif; }
.error-code-box { font-weight: 700; font-size: 5rem; color: white; background-color: CornflowerBlue; padding: 10px; border-radius: 7px 7px 0 0; }
.error-title-box { font-weight: 700; font-size: 2.5rem; color: CornflowerBlue; padding: 40px 0px; }
.error-message-box { font-weight: 700; font-size: 1rem; color: Grey; padding: 0 40px; line-height: 3; text-align: left; text-indent: 2rem; }
.error-button-box { padding: 40px 0; display: flex; justify-content: center; gap: 20px; }

/* 가운데 */
.center-div {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0.1px solid lightgray; border-radius: 10px;
}

/* 팝업 검색 */
.pop-input-button-div {
	display: flex; flex-flow: row nowrap; gap: 5px; justify-content: center; align-items: center; width: 100%; /* border: 1px solid black; */
}

.popup-search-div { background-color: #eaf7fc; border-radius: 10px; box-shadow: 1px 1px 2px 0px LightGrey; padding: 10px 20px; display: flex; gap: 10px; align-items: center; margin-bottom: 20px;}
.popup-search-div .item-wrap{display: flex; flex-wrap: wrap; gap: 10px; }
.popup-search-div .popup-search-item {font-size: 12px; display: flex; align-items: center; gap: 10px; }
.popup-search-item .label{display: flex; align-items: center; gap: 5px; }
.popup-search-item .select{width: 200px;}
.popup-search-item .select > *{width: 100% !important; max-width: 200px;}
.popup-search-div .popup-search-button{display: flex; width: 200px; justify-content: space-between;}
.popup-search-div .popup-search-button button{margin: 0;}
/* 팝업 검색과 그리드 */
.pop-search-grid-div {
	display: flex; flex-flow: column nowrap; gap: 10px; align-items: flex-start; width: 100%; justify-content: space-between;
}
.flex-row-10gap-center {
	display: flex; flex-flow: row nowrap; gap: 10px; justify-content: center;
}
.sbux-mol-wrap .sbux-mol-cont .sbux-mol-ft{margin-top: 0 !important;}
/* // layout.css */




/* style.css */
/* 칼럼색 */
.col-blue {color: blue !important;}
.col-green {color: green !important;}
/* 메인 */
.main-wrap{margin: 0 auto; width: 100%; padding-top: 20px; height: calc(100vh - 100px);}
.main-wrap > h2{text-align: center; margin-bottom: 15px; font-size: 14px;}
.main-wrap > div{padding: 0 !important; height: 100%;}
.main-wrap .sbgrid-row{font-size: 16px !important;}
.main-wrap .sbgrid-row.sbgrid-caption>.sbgrid-col.sbgrid-col-1-1{background: rgb(4, 4, 136); color: #fff;}
.main-wrap #Grid1.sbgrid-grid >.sbgrid-panel.sbgrid-scroll>.sbgrid-scroll-body>.sbgrid-panel.sbgrid-body>.sbgrid-area>.sbgrid-body>.sbgrid-scroll>.sbgrid-row>.sbgrid-col.sbgrid-col-1-4 p{height: 100%;}
.main-wrap img{height: 100%;}
.main-wrap .sbgrid-grid{height: 100% !important;}
/* .main-wrap > div{border: 0.5px solid #e0e0e0; border-radius: 10px;}
.main-wrap > div .title{padding: 15px; border-bottom: 1px solid #eee; font-size: 18px; display: flex; justify-content: space-between; }
.main-wrap > div .title h2{color: #0e6ba8;}
.main-wrap > div .title a{display: flex; align-items: center; gap:5px; color: #0e6ba8;} */

/* 모니터링 시간 */
.time-box { color: #0A406C; background-color: #d7edff; padding: 5px 10px; border-radius: 4px; font-weight: bold; position: absolute; right: 20px; top: 10px;}

/* 제품재고관리 > 제품수불 조회 */
.in-out {display: flex; margin-top: 20px;}
.in-out > div {width: 50%;}
.in-out h2 {font-size: 16px; font-weight: bold; margin-bottom: 10px;}
/* 모달 내 검색 영역 */
.modal-search-div { display: flex; min-height: 50px; margin: 10px 0px; background-color: #eaf7fc; border-radius: 10px; 
	box-shadow: 1px 1px 2px 0px LightGrey; justify-content: center; }
.modal-search-div .input { margin-right: 20px; }



.flex-garo-container { display: flex; flex-direction: row; border: 1px solid black;}
.flex-sero-container { display: flex; flex-direction: column; border: 1px solid black;}

span.center-icon:hover { color: #71a5de; }

.white-button {
  color: black; background-color: white; border: 1px solid #ccc; border-radius: 5px; text-align: center; 
  padding: 5px; cursor: pointer;
}
.menu-button {
  color: #595959; background-color: white; border: none;
  padding: 5px 0px; cursor: pointer;
}
/* login */
.login .box {
  position: fixed; top: 50%; left: 50%; font-weight: 400; transform: translate(-50%, -50%); width: 450px; display: flex; flex-direction: column; justify-content: center; padding: 60px; background-color: white; border-radius: 7px;
}
.login .box .logo{text-align: center; margin-bottom: 20px;}
.login .box .logo img{height: 60px; max-width: 100%;}
.login .box input, 
.login .box button { padding: 15px; font-size: 16px;  }
.login .box input { margin-bottom: 25px; background: none; border: none; border-bottom: 1px solid grey; } 
.login .box input:focus {border: none; outline: none; border-bottom: 1px solid royalblue; }
input { vertical-align: -2px; }
.login .box label span { margin-left : 10px; } 
.login .box button { border: 0; color: white; background: royalblue; box-shadow: none; border-radius: 10px; }
.login-sys-name { font-weight: 700; font-size: 18px; padding-bottom: 2rem; text-align: center; } 

/* 비밀번호 변경 */
.change-pw{padding: 40px; background-color: #fff; box-shadow: 1px 1px 15px 5px #ddd; display: flex; flex-direction: column; gap: 20px;}
.change-pw .title{display: flex; gap: 10px; align-items: center; }
.change-pw .title i{color: gray; font-size: 20px;}
.change-pw .title div{}
.change-pw .title div p{font-weight: 700; font-size: 18px; line-height: 1.5; }
.change-pw .title div p span{color: red;}
.change-pw .pw-cont{display: flex; gap: 20px; }
.change-pw .pw-cont .left{display: flex; flex-flow: column nowrap; gap:15px; justify-content: space-around; }
.change-pw .pw-cont .left input{height: 40px;}
.change-pw .pw-cont .right{display: flex; flex-flow: column nowrap; gap:20px; justify-content: flex-start; }
.change-pw button{height: 40px; width: 100%;}





/* button */
.button-style {
    border: 1px solid #ddd; box-shadow: 1px 1px 5px 2px #f1f1f1; display: flex; align-items: center; justify-content: center; padding: 0 10px; height: 30px; font-weight: 400; border-radius: 4px; text-align: center; gap: 5px; color: #000; 
}
.button-style i.mat-filled-14-bold{font-size: 16px;}
.button-style.save-btn{background-color: #0080A7; color: #fff;}
.navy-button  { background-color: navy; color: #fff;}
.navy-button:hover { background-color: rgb(0, 0, 71); }

.blue-button  { background-color: DodgerBlue;}
.blue-button:hover { background-color: RoyalBlue; }

.gray-button { background-color: #99a7b2;}
.gray-button:hover { background-color: LightSlateGray; }

.lightblue-button  { background-color: #759ef0; }
.lightblue-button:hover { background-color: CornflowerBlue; cursor: pointer; padding: 10px 20px; }

.pink-button  { background-color: DeepPink; color: #fff; }
.pink-button:hover  { background-color: FireBrick; }

.green-button { background-color: ForestGreen;}
.green-button:hover { background-color: DarkGreen; }

.pop-lightblue-button { background-color: #759ef0;}
.pop-lightblue-button:hover { background-color: CornflowerBlue;}

button:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
/*** 검색조건 ***/
/* 글머리기호 */
.red-bullet-point { color:red; }
.black-bullet-point { color:black; }
/* 날짜구간 */
/* .button-text-style { font-size: 1rem; vertical-align: text-top; } */


/* Home > 경영진 > 워크센터별 로스 내역 */
@page { size: A4 landscape; margin:0; }
.print-btn{position: absolute; top: 00px; right: 0; z-index: 11; font-size: 18px; padding: 5px 10px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #fff; background-color: #6d6d6d; border: none; cursor: pointer;}
.sbux-mol-wrap .sbux-mol-sm-dlg, .sbux-mol-wrap .sbux-mol-md-dlg, .sbux-mol-wrap .sbux-mol-lg-dlg{left: 50%; top: 50%; margin: 0 !important; transform: translate(-50%, -50%) !important;}