html, body.iframe-body{height: 100%;}

/*** content ***/
.content{display: block;max-width: none;}
.content:has(.tab-top){padding: 0;}
.content > div{width: 100%;}
.content:has(.card.pane){display: flex;flex-direction: column;margin-left: 0;padding: 10px 20px;width: 100%;height: 100%;}

/* tab-menu */
.tab-top{background-color: #e7ebee;}
.tab-wrap{padding-top: 10px;width: 100%;max-width: 1700px;}
#tabs{position: relative;display: block !important;width: 100% !important;height: 30px;overflow: hidden;}
.tab-arrow-left, .tab-arrow-right{position: absolute;top: 0;width: 20px;height: 40px;background-color: #e7ebee;cursor: pointer;display: flex !important;justify-content: center;align-items: center;font-size: 18px !important;font-variation-settings:'FILL' 1;color: #999;z-index: 20;user-select: none;}
.tab-arrow-left{left: 0;}
.tab-arrow-right{right: 0;}
.no-overflow .tab-arrow-left, .no-overflow .tab-arrow-right{display: none !important;}

.tab-menu{display: flex;flex-wrap: nowrap;padding: 0 20px;width: 100% !important;height: 30px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;scrollbar-width: none;}
.tab-menu::-webkit-scrollbar{display: none;}
.tab-menu li{
	display: inline-flex;justify-content: space-between;align-items: center;
	padding: 0 2px 0 10px;width: auto;min-width: 120px;height: 30px;font-size: 14px;font-weight: bold;cursor: pointer;user-select: none;
	border: 1px solid #e7ebee;border-bottom: none;border-top-left-radius: 5px;border-top-right-radius: 5px;background-color: #fff;
}
.tab-menu li::before{content: none;}
.tab-menu li i.material-symbols-outlined{font-variation-settings: 'wght' 300,'opsz' 20;}
.tab-menu li.active{background-color: #44aaee;color: #fff;}
.tab-menu li.active i{color: #fff}

/* Iframe 연동 공통 레이어 팝업 */
.pane-modal-overlay{
	position: fixed;top: 0;left: 0;bottom: 0;width: 100%;min-width: 1440px;background-color: rgba(0, 0, 0, .6);transition: opacity 0.3s ease, visibility 0.3s ease;
	display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;pointer-events: none;z-index: 9999;
}
.pane-modal-overlay.active{opacity: 1;visibility: visible;pointer-events: auto;}
.pane-modal{
	background-color: #fff;border-radius: 4px;box-shadow: 0 4px 20px rgba(0, 0, 0, .3);outline: none;transform: translateY(-20px);transition: transform 0.3s ease;
	display: flex;flex-direction: column;width: 1000px;max-width: 95vw;height: auto;/* max-height: min(600px, 90vh);*/overflow: hidden;
}
.pane-modal.w700{width: 700px;}
.pane-modal:has(.slim) button, .sm-modal:has(.slim) button{height: 25px;min-height: unset !important;line-height: 1;}
.pane-modal:has(.slim) ul.btns li{margin-left: 5px;}
.pane-modal-overlay.active .pane-modal{transform: translateY(0);}
.pane-modal-header, .sm-modal-header{display: flex;justify-content: space-between;align-items: center;padding: 0 15px;height: 40px;background-color: rgba(0, 0, 0, .05);border-bottom: 1px solid #d3d3d0;cursor: move;flex-shrink: 0;}
.pane-modal-desc, .sm-modal-header span{font-size: 14px;font-weight: 700;color: #111;}
.pane-modal-close, .btn-sm-modal-close{background: transparent;border: none;cursor: pointer;padding: 0;align-items: center;}
.pane-modal-close{ color: #111;font-weight: 700;gap: 5px;}
.pane-modal-close span{ font-size: 13px;}
.pane-modal-close i{ font-size: 18px;}
.pane-modal-close:focus{outline: 2px solid #004a98;}
.pane-modal-toolbar{padding: 0 15px;height: 40px;border-bottom: 1px solid #d3d3d0;display: flex;justify-content: space-between;align-items: center;flex-shrink: 0;}
.pane-modal-title{font-size: 14px;font-weight: 700;margin: 0;}
.pane-modal-body, .sm-modal-body{position: relative;padding: 10px 15px;flex: 1;overflow-y: auto;font-size: 13px;}
.pane-modal-body{font-size: 14px;overflow-y: auto !important;min-height: 0;max-height: min(520px, calc(90vh - 80px));}
.pane-modal-body .sbbox{overflow-y: visible;}
.pane-modal-body .in-tabbox{display: grid;align-items: start;}
.pane-modal-body .in-tabbox .in-tabcon{grid-area: 1 / 1;display: block !important;visibility: hidden;}
.pane-modal-body .in-tabbox .in-tabcon.active{visibility: visible;}
.pane-modal-body .in-tabbox .in-tabcon:not(.active) .sbbox table{visibility: hidden;}
.pane-modal-body ul li{font-size: 13px;}
.pane-modal-body ul.dot li{position: relative;padding-left: 8px;}
.pane-modal-body ul.dot span, .pers strong{display: inline-block;}
.pane-modal-body ul.dot li:before{content: "\00B7";position: absolute;left: 0;}
.pane-modal-footer{padding: 10px 15px;border-top: 1px solid #d3d3d0;text-align: center;}

.sm-modal{position: absolute;width: 600px;/* max-height: 200px; */background-color: #fff;border: 1px solid #888;border-radius: 4px;box-shadow: 0 4px 15px rgba(0, 0, 0, .3);z-index: 1000;display: flex;flex-direction: column;}
.sm-modal-header{height: 30px;}
.sm-modal:has(.slim) .btn-sm-modal-close{font-size: 16px;border: none;}

/* pane */
.pane-wrap{/*padding: 10px 20px;*/max-width: 1700px;height: calc(100% - 50px);}
.tab-pane{height: 100%;}
.tab-pane iframe{display: block;vertical-align: top;}

.card.pane{flex: 1;display: flex;flex-direction: column;margin-bottom: 0;min-height: 0;}
.pane .card-btm .card-body, .pane .card-btm:has(.card-tab) .card-body{max-height: calc(100vh - 140px);}
.pane:has(.slim) .card-btm .card-body{max-height: calc(100vh - 90px);}
.pane .card-btm .tb_stky{max-height: unset !important;}
.pane .card-search{padding-top: 0;justify-content: space-between;}
.pane .card-search ul{margin: 0;}
.pane .card-search span{font-weight: normal;}

.pane button.red{font-weight: bolder;color: red;border-color: red;}
.pane button.sq{width: 30px;}
.pane caption ul.btns li{margin-left: 5px;height: 25px;}
.pane caption ul.btns li button, .pane caption > button.absolute{min-height: 25px;line-height: 1;font-weight: normal;}
.pane strong span.toRight{right: 0;font-size: 13px;font-weight: normal;}

.in-tabbox .in-tabcon{display: none;}
.in-tabbox .in-tabcon.active{display: block;}
.in-tabbox .in-tabcon p{font-size: 13px;}
/* .pane .card-body:has(.toggle-con) .in-tabbox.tb_stky{height: calc(100% - 220px);}
.pane .siChg.hidden .toggle-si.on ~ .in-tabbox.tb_stky{height: calc(100% - 70px);} */

.conn_box{padding: 4px 10px;min-height: 50px;background-color: #f9f9f9;border: 1px solid rgba(0, 0, 0, .15);}
.conn_box.add_scr{/* min-height: 90px;*/max-height: 150px;overflow-y: overlay;}
.conn_box, .conn_box p{line-height: 20px;font-size: 14px;}
.conn_box.add_scr::-webkit-scrollbar, .pane-modal-body::-webkit-scrollbar, .sbbox:has(table)::-webkit-scrollbar{width: 15px;}
.conn_box.add_scr::-webkit-scrollbar-thumb, .pane-modal-body::-webkit-scrollbar-thumb, .sbbox:has(table)::-webkit-scrollbar-thumb{background-color: #d71a21;border-radius: 100px;background-clip: padding-box;border: 5px solid transparent;}
.conn_box.add_scr::-webkit-scrollbar-track, .pane-modal-body::-webkit-scrollbar-track, .sbbox:has(table)::-webkit-scrollbar-track{background-color: transparent;}

.card-body > .siChg{display: flex;flex-direction: column;height: 100%;}
.siChg > .toggle-si, .siChg > .toggle-con, .siChg > .card-tab.in-tab{flex-shrink: 0;}
.siChg > .in-tabbox.tb_stky{flex: 1;min-height: 0;height: auto !important;max-height: none !important;}

/** 파일 첨부 **/
.file-drop-zone{display: flex;flex-direction: column;align-items: center;justify-content: center;margin-bottom: 10px;padding: 10px 0;border: 2px dashed #888;background-color: #fff;text-align: center;cursor: pointer;}
.file-drop-zone, .file-drop-zone p, .file-upload-icon{transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
.file-drop-zone:hover, .file-drop-zone.dragover{background-color: #e7f3ff;border-color: #004a98;}
.file-drop-zone:hover .file-upload-icon, .file-drop-zone.dragover .file-upload-icon, .file-drop-zone:hover p, .file-drop-zone.dragover p{color: #004a98;}
.file-drop-zone p{font-size: 18px;color: #888;font-weight: 500;max-width: 400px;}
.file-upload-icon{font-size: 48px !important;color: #888;}
/* .file-list{width: 100%;margin-top: 10px;} */
.file-list li::before, .file-list li::after{content: none !important;display: none !important;}
.file-list li{display: flex;align-items: center;justify-content: space-between;height: 30px;margin-bottom: 5px;padding: 0 15px;background-color: #f9f9f9;border: 1px solid #d3d3d0;border-radius: 4px;box-sizing: border-box;}
.file-list li .file-name{display: flex;align-items: center;font-size: 13px;color: #242424;}
.file-list li .file-name i{margin-right: 8px;color: #e35327;}
.file-list li .file-name i, .file-list li button i{font-size: 18px;}
.file-list li .btn-remove, .file-list li .btn-download{background: transparent;border: none;cursor: pointer;color: #888;display: flex;align-items: center;padding: 0;min-height: unset;}
.file-list li .btn-remove:hover{color: #d71a21;}
.file-list li .btn-download:hover{color: #111;}
.file-list.half{display: flex;flex-wrap: wrap;gap: 5px;}
.file-list.half li{width: calc(50% - 2.5px);margin-bottom: 0}

@media only screen and (max-height: 600px) {
	.pane-modal-body .in-tabbox{display: block;}
	.pane-modal-body .in-tabbox .in-tabcon{display: none !important;visibility: visible;}
	.pane-modal-body .in-tabbox .in-tabcon.active{display: block !important;}
}