html , body{font-family:'Noto Sans KR', 'Nanum Gothic', sans-serif, Dotum, 돋움;background: #F7F7F7; margin-top: 0px; }
.login_top{text-align: center; margin: 25px 0;}
.login-wrap{margin: 0 auto; width: 370px; padding: 0; position: relative; top: 150px; background-color: #F7F7F7; padding: 20px 28px; border-radius:6px; height:420px;}
.id_pw_wrap {margin: 10px 10px 10px 10px;} /* new */
.id_pw_wrap .input_row:first-chid{border-radius: 6px 6px 0 0;}
.id_pw_wrap .input_row{display:table; table-layout:fixed; width:100%; padding:14px 17px 13px; box-sizing: border-box; background-color:#fff;}
.id_pw_wrap .input_row .icon_cell{display:table-cell; width:24px; vertical-align:middle;}
.icon_id{position:absolute; top:50%; left:17px; margin-top:-8px; background-position:-93px -203px; background-repeat:no-repeat; width:16px; height:16px; background-image:url(../images/login.png); background-size: 266px 225px;}
.icon_pw{position:absolute; top:50%; left:17px; margin-top:-8px; background-position:-129px -203px; background-repeat:no-repeat; width:16px; height:16px; background-image:url(../images/login.png); background-size: 266px 225px;}
.blind{position:absolute; clip:rect(0 0 0 0); width:1px; margin:-1px; overflow:hidden;}
.id_pw_wrap .input_row .input_text{display:table-cell; padding-right:30px;}
.input_text{position:relative; display:block; width:100%; font-size:13px; font-weight:400; line-height:19px; letter-spacing:-.5px; color:#222; box-sizing: border-box; border:none; outline:0;}
.input_row{position:relative; display:block; height:100%; border:1px solid #dadada; padding:16px 18px 15px; text-align:left; box-shadow:0 2px 6px 0 rgb(68 68 68 / 8%); box-sizing: border-box; margin-bottom:5px;}
#select_area{margin-top:20px; height:35px; margin: 10px 10px 10px 10px;}
.select_type{float:left; margin:0; background-color:#fff; width:170px;}
.selcet_type_1{appearance: menulist-button;width: 182px;position: absolute;opacity: 0;height: 30px;font-size: 13px;}
.selcet_type_2{ background:url(../images/ico_select.gif) no-repeat; background-position:90% 50%; border:1px solid #eaeaea; color:#666; width:180px !important; height:28px; font-size: 13px; line-height:1em; text-indent:5px; display:inline-block;}
.selcet_type_3{width:178px; display: inline-block; padding-top:8px; height:20px; line-height:1em; font-weight:normal;}
.select_lang{float:right; margin:0; background-color:#F7F7F7; font-size:13px; color: #666; width:170px;}
.selcet_lang_1{appearance: menulist-button;width: 170px;position: absolute;opacity: 0;height: 30px;font-size: 13px;}
.selcet_lang_2{ background:url(../images/ico_select.gif) no-repeat; background-position:90% 50%; border:1px solid #eaeaea; color:#666; width:170px !important; height:28px; font-size: 13px; line-height:1em; text-indent:5px; display:inline-block;}
.selcet_lang_3{width:178px; display: inline-block; padding-top:8px; height:20px; line-height:1em; font-weight:normal;}
#my_info .selcet_lang_1{appearance: menulist-button;width: 82px;position: absolute;opacity: 0;height: 30px;font-size: 13px;}
#my_info .selcet_lang_2{ background:url(../images/ico_select.gif) no-repeat; background-position:90% 50%; border:1px solid #eaeaea; color:#666; width:80px !important; height:28px; font-size: 13px; line-height:1em; text-indent:5px; display:inline-block;}
.btn_login_wrap{margin-top:38px; margin: 10px 10px 10px 10px;}
.btn_login{display:block; width:100%; padding:13px 0 13px; border-radius: 6px; border: solid 1px rgba(0,0,0,.15); background-color: #f2163a; box-sizing: border-box; cursor:pointer;}
.btn_login .btn_text{font-size:20px; font-weight:700; line-height:24px; color:#fff;}
.login_keep_wrap{position:relative; margin-top:13px; padding-right:90px;margin: 10px 10px 10px 10px;}
.keep_check{position:relative; padding-left:23px;}
.keep_check .input_keep{position:absolute; top:1px; left:1px; width:105px; height:15px; appearance:none;}
.keep_check .keep_text{display:inline-block; font-size:13px; font-weight:500; line-height:17px; color:#777;}
.keep_check .keep_text::before{content:''; position:absolute; top:0; left:0; background-position:-244px -87px; background-repeat:no-repeat; width:18px; height:18px; background-image:url(../images/login.png); background-size: 266px 225px;}
.keep_check input:checked+.keep_text::before{content:''; position:absolute; top:0; left:0; background-position:-244px -167px; background-repeat:no-repeat; width:18px; height:18px; background-image:url(../images/login.png); background-size: 266px 225px;}
.find_pwid ul{margin:0;}
.find_wrap li{position:relative; display:inline-block;margin-left:4px;}
.find_wrap .find_text{display: inline-block; font-size:13px; line-height:17px; text-decoration:none; color:#888;}
.find_pwid{position:absolute; top:-2px; right:0;}
.find_wrap li+li::before{content:''; position:absolute; top:3px; left:-6px; width:1px; height:12px; border-radius:0.5px; background-color:#dadada;}
.join_wrap{margin-top:20px;margin: 14px 10px 66px -7px;}
.co_join, .system_join{display:block; width:167px; padding:5px; border-radius: 6px; border: solid 1px rgba(0,0,0,.15); background-color: #616a87; box-sizing: border-box; float:left; margin-left:16px; cursor:pointer;}
.co_join,.system_join .btn_text{font-size:16px; font-weight:600; line-height:24px; color:#fff; cursor:pointer;}
/* 기존 header 스타일 - modern-header 사용으로 비활성화 */
/* #header{position:relative; width:100%; height:43px; padding:0 0 0 0; margin: 0 auto;} */
/* #wrap{margin-left: 10px;} */
#container{position:relative; width:100%; margin:0 auto; letter-spacing:-.2px; background:#F7F7F7; float:left;}
.title_left{ text-align:center;}
.logo_default{ margin:0 auto;}
.service_area .btn{border-radius:3px; margin:0 0 5px 0; font-size:12px; line-height:1.5; border:none;}
.search_area{position:absolute; left:42%; width:316px; height:32px;top:15px;}
.search_area fieldset{border: 1px solid #dadada; height: 20px; padding: 5px; box-shadow:0 2px 6px 0 rgb(68 68 68 / 8%);}
.blind{position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; overflow:hidden;}
.o_window{position:relative; width:300px;}
.o_window input{ outline:none; border:none;}
.search_area .btn_submit{position:absolute; top:0px; left:268px; height:32px; width:46px; background-color:#718295; border-radius: 0 2px 2px 0; cursor:pointer; color:#fff; border: 1px solid #dadada;}
.btn_submit{position:relative; top:-5px; height:25px; width:25px; background-color:#718295; border-radius: 0 2px 2px 0; cursor:pointer; color:#fff; border: 1px solid #dadada;}
.service_area{float: right; position:absolute; top:15px;right: 0px;}
.service_home{float: left; position:absolute; top:15px;}
.service_home .btn{ border:1px solid #dadada; border-radius: 5px; margin:0px 8px 0px 0px; background-color:#fff; cursor:pointer;}
#gnb{ border-bottom:3px solid #005555; height:5px;}
#my_info{display:inline-block; position:absolute; right:260px; top:15px;}
.fiveStep{height:40px;}
div#menu { margin:5px auto; }
.parent img{margin:-3px 8px 0 0; vertical-align:middle;}
#popup{width: 50px; height: 50px;background-color:#718295; border-radius: 50%;font-size: 9px; display: inline-block;
position: absolute; margin-top: 18px; line-height: 54px; text-align:center; z-index:9999;}
#popup a{ color:#fff; cursor:pointer; text-decoration:none;}
.service_area .btn{ border:1px solid #dadada; border-radius: 5px; margin:0 auto; background-color:#fff; cursor:pointer;}
.service_area .i1{ background-image:url(../images/i_f.png); background-repeat:no-repeat; width:30px; height:30px; position:absolute; top:0; left:0;}
.service_area .i2{ background-image:url(../images/i_p.png); background-repeat:no-repeat; width:30px; height:30px; position:absolute; top:0; left:40px;}
.service_area .i3{ background-image:url(../images/i_s.png); background-repeat:no-repeat; width:30px; height:30px; position:absolute; top:0; left:80px;}
.service_area .i4{ background-image:url(../images/i_a.png); background-repeat:no-repeat; width:30px; height:30px; position:absolute; top:0; left:120px;}
.service_area .i5{ background-image:url(../images/i_m.png); background-repeat:no-repeat; width:30px; height:30px; position:absolute; top:0; left:160px;}
.service_area .i6{ background-image:url(../images/i_q.png); background-repeat:no-repeat; width:30px; height:30px; position:absolute; top:0; left:200px;}
.service_area .i7{ background-image:url(../images/i_e.png); background-repeat:no-repeat; width:30px; height:30px; position:absolute; top:0; left:240px;}
.top_nav { margin: 5px 15px 5px 15px; padding: 0; background: #F7F7F7; }
.page-title {
display: flex; align-items: center; justify-content: space-between;
width: 100%; background: #fff; margin: 0; padding: 10px 20px;
border: 1px solid var(--border-color, #E2E8F0);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
box-sizing: border-box;
}
.page-title .title_left {
display: flex; align-items: center; gap: 6px;
color: var(--text-secondary, #64748B); font-size: 13px;
}
.page-title .title_left .fa-home {
color: var(--primary-color, #3B82F6); font-size: 14px; cursor: default;
}
.page-title .title_left .sep {
color: #CBD5E1; font-size: 12px; margin: 0 2px;
}
.page-title .title_left a {
color: var(--primary-color, #3B82F6); text-decoration: none;
}
.page-title .title_left a:hover { text-decoration: underline; }
.page-title .title_right {
display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.title_right .btn:not(.btn-primary):not(.btn-outline):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-secondary):not(.btn-top) {
border: none; border-radius: 5px; background-color: transparent;
cursor: pointer; color: var(--text-secondary, #64748B); padding: 4px 6px;
}
.title_right .btn:not(.btn-primary):not(.btn-outline):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-secondary):not(.btn-top):hover {
color: var(--primary-color, #3B82F6);
}
.title_right .btn-primary,
.title_right .btn-outline,
.title_right .btn-warning,
.title_right .btn-danger,
.title_right .btn-success,
.title_right .btn-secondary
:not(.btn-top)
{
margin-left: 4px;
}
#btn_memo { position: relative; }
#replayCnt {
position: absolute; top: -4px; right: -4px;
background: #EF4444; color: #fff;
font-size: 11px; min-width: 16px; height: 16px;
line-height: 16px; border-radius: 50%;
text-align: center; padding: 0 3px;
}
.x_panel{width:100%; background:#fff; margin:0px 5px 5px 0px; border:1px solid #dadada; position:relative;}
.l_1{display:contents; position:absolute; top:20px; left:60px;}
.l_1 input{border:1px solid #dadada; height:20px; outline:none; }
.tb_l_1 th{padding-left:20px; vertical-align:middle; padding-top:4px;}
.tb_l_1 tr{color:#666; font-size:12px;height:30px;}
.btn_sch .btn{ width:100px; height:30px; position:absolute; top:6px; right:30px; border:none; border-radius:5px; color:#fff; background: #f2163a; cursor:pointer;}
.x_panel2{width:100%; background:#fff; margin:0px 0px 0px 0px; position:absolute;border: 1px solid #dadada;}
.x_panel2_t input{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:right;}
.x_panel2_t span{position:absolute; top:14px; left:80px;}
/*.x_panel2_wrap{width:100%; float:left;}*/
.x_panel2_wrap{width: 98%; background: #fff; margin: 20px 5px 5px 20px;}
.x_panel2_tb{ width:100%; overflow:auto; margin:0 auto; display:inline-block; }
.x_panel2_tb table{width:98%; height:200px; text-align:left; padding:10px; margin:0 auto; font-size:13px;}
.x_panel2_tb table thead{background:#718295; color:#ecf0f1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.x_panel2_tb table td{border:1px solid #ddd; padding:10px;}
.x_panel2_tb table th{padding:10px;}
.btn_gr .btn_cp .btn{width:100%; height:30px; border:1px solid #dadada; border-radius:5px; color:#666; background: #fff; cursor:pointer; min-width:50px; padding: 0px 10px 0px 10px; }
.btn_gr .btn_cp .btn_excel{width:30px; height:30px; border:1px solid #dadada; border-radius:5px; color:#666; background: #fff; cursor:pointer; background-image: url(../opnSrce/dropzone/img/excel.png);background-size: cover;}
.save{color:#fff !important; background: #718295 !important;}
.req{color:#fff !important; background: #f2163a !important;}
.btn_gr{float:right; }
.ct{position:absolute; right:-20px; top:-16px;}
.olive{background:#7c8437 !important; color:#fff !important;}
.btn_gr ul{position:relative;min-height: 10px;top: -6px;}
.btn_gr ul li{float:left; list-style:none; margin: 0px 30px 0px -25px; font-size:13px; color:#666;}
.btn_gr .btn{width:20px; height:20px; border:none; cursor:pointer; background:transparent;}
.btn_gr .i2{ background-image:url(../images/i_p_.png); background-repeat:no-repeat; width:20px; height:20px; margin-top: 10px;}
.btn_gr .i8{ background-image:url(../images/i_8_.png); background-repeat:no-repeat; width:20px; height:20px; margin-top: 10px;}
.btn_gr .i9{ background-image:url(../images/i_9_.png); background-repeat:no-repeat; width:20px; height:20px; margin-top: 10px;}
.btn_gr .i10{ background-image:url(../images/i_10_.png); background-repeat:no-repeat; width:20px; height:20px; margin-top: 10px;}
.btn_gr .i11{ background-image:url(../images/p_.png); background-repeat:no-repeat; width:20px; height:20px; margin-top: 10px;}
.red{color:red;}
.Pager li{float:left; list-style:none; width: 30px;}
.pagingWrap{overflow:hidden; position:relative; min-height:30px; margin:0 0 20px 30px; padding:2px 0; text-align:left; display:inline-block; width:98%;}
.pagingWrap div{float:left; font-size:12px;}
.paging .btn-paging.first{background-position:0 0;}
.paging .btn-paging{width:20px; height:20px; line-height:20px; border:1px solid #ddd; background: url(../images/arr_sp.png); text-indent:100%; white-space:nowrap; overflow:hidden;}
.paging span, .paging a{display:inline-block; margin:0 2px; text-align:center; vertical-align:top; width:20px; height:20px; line-height:20px; border:1px solid #ddd; text-decoration:none; color:inherit; font-size:12px;}
.paging .btn-paging.last{background-position:0 -48px;}
.paging .btn-paging.next{margin-left:5px; background-position: 0 -30px;}
.paging .btn-paging.pre{margin-left:5px; background-position: 0 -15px;}
.paging-right{position:absolute; font-size:12px; right:45px; top:20px;}
.paging-right .i11{ background-image:url(../images/i_rf.png); background-repeat:no-repeat; width:20px; height:20px; margin-top: 10px; border:none; background-color:#fff; cursor:pointer;}
.page_per select{outline:none; border:1px solid #ddd; margin: 14px 5px 0 17px; width:47px;}
.paging-right span{margin: 0 5px; vertical-align:super;}
.x_panel3_wrap{width:100%; height:240px;}
.x_panel3{width:100%; height:auto; overflow:hidden; background:#fff; margin:0px 0px 0px 0px; border:1px solid #dadada; position:relative;}
.x_panel3_t{margin-bottom:40px}
.x_panel3_t input{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:right;}
.x_panel3_t .input-readonly500{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:left; width:500px;}
.x_panel3_t span{position:absolute; top:24px; left:44px;}
.x_panel3_t span .step_tt{color: yellowgreen;}
.w50{width:50px !important;}
.w70{width:70px !important;}
.w150{width:150px !important;}
#stinfo{float:left; width:100%;}
#stinfo li{float:left; position:relative; width:380px; list-style:none;}
#stinfo ul li{list-style:circle; color:#666;}
.x_panel4{width:98%; height:160px; background:#fff; margin:20px; border:1px solid #dadada; position:relative;}
.x_panel4_t{margin-bottom:30px;min-height:30px;}
.x_panel4_t input{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:right;}
.x_panel4_t span{position:absolute; top:24px; left:60px; font-weight:800;}
.x_panel4_t span .step_tt{color: yellowgreen;}
.x_panel4{width:100%; height:100%; background:#fff; margin:10px 0px 0px 0px; border:1px solid #dadada; position:relative;}
.x_panel4_t input{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:right;}
.x_panel4_t span{position:absolute; top:14px; left:60px;}
.x_panel4_wrap{width:100%; width: 98%; background: #fff; margin: 20px 5px 5px 20px;}
.x_panel4_wrap_sub{width:100%; width: 95%; background: #fff; margin: -10px 0px -15px 40px;}
.x_panel4_tb{width:100%; margin:0 auto; position:relative;}
.x_panel4_tb table{width:100%; text-align:left; margin:0px 10px 20px 0px; font-size:12px;}
.x_panel4_tb table th{background:#718295; color:#ecf0f1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:10%; padding:5px;}
.x_panel4_tb table td{border:1px solid #ddd; margin:0; color:#666;}
.x_panel4_tb table th{padding-left:10px; margin:0;}
.x_panel4_tb input{border:1px solid #dadada; color: #666; outline:none; width:400px;height:20px;}
.x_panel4_tb .input100{border:1px solid #dadada; color: #666; outline:none; width:100px; }
.x_panel4_tb .input200{border:1px solid #dadada; color: #666; outline:none; width:200px; }
.x_panel4_tb .input300{border:1px solid #dadada; color: #666; outline:none; width:300px; }
.x_panel4_tb .input400{border:1px solid #dadada; color: #666; outline:none; width:400px; }
.x_panel4_tb .input-readonly {border:none;border-right:0px; border-top:0px; border-left:0px; border-bottom:0px;}
.x_panel4_tb .input-readonly100 {border:none;border-right:0px;width:100px; border-top:0px; border-left:0px; border-bottom:0px;}
.x_panel4_tb .input-readonly200 {border:none;border-right:0px;width:200px; border-top:0px; border-left:0px; border-bottom:0px;}
.x_panel4_tb .input-readonly300 {border:none;border-right:0px;width:300px; border-top:0px; border-left:0px; border-bottom:0px;}
.x_panel4_tb select{border:1px solid #dadada; color: #666; outline:none; width:426px; padding:4px 12px;}
.x_panel4_tb span:not(.k-combobox){padding-right:5px;}
.x_panel4_tb .btn_submit{ position:relative; width:26px; height:26px; cursor:pointer; border:1px solid #666; vertical-align:bottom; top:0;}
#container_register{position:relative; width:60%; margin:0 auto; letter-spacing:-.2px; background:#F7F7F7; }
.register-title{width:98%; background:#fff; margin:20px;}
.register-title .title_left{ float:left; display:block; padding: 0 0 0 20px; color:#666; margin-top:-5px; margin-left:40px;}
.register-title .title_right{float:right; margin-right:20px; margin-top:10px;}
.btn_register_co{ float:left; position:absolute; top:8px; left:20px;}
.btn_register_co .title{ float:left; position:absolute; top:-2px; left:20px;width:30px;height:30px}
.btn_register_co .btn{width:30px; height:30px; border-radius:5px; color:#666; cursor:pointer;}
.x_panel_register{width:98%; height:160px; background:#fff; margin:20px; border:1px solid #dadada; position:relative;}
.x_panel_register_t{margin-bottom:30px;min-height:15px;}
.x_panel_register_t input{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:right;}
.x_panel_register_t span{position:absolute; top:24px; left:60px; font-weight:800;}
.x_panel_register_t span .step_tt{color: yellowgreen;}
.x_panel_register{width:98%; height:100%; background:#fff; margin:10px 0px 0px 20px; border:1px solid #dadada; position:relative;}
.x_panel_register_t input{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:right;}
.x_panel_register_t span{position:absolute; top:15px; left:60px;}
.x_panel_register_wrap{width:100%; width: 98%; background: #fff; margin: 20px 5px 5px 20px;}
.x_panel_register_wrap_sub{width:100%; width: 95%; background: #fff; margin: -10px 0px -15px 40px;}
.x_panel_register_tb{width:100%; margin:0 auto; position:relative; margin-top:20px;}
.x_panel_register_tb table{width:98%; text-align:left; padding:10px 0px 0px 10px; margin:0px 10px 20px 10px; font-size:12px;}
.x_panel_register_tb table th{background:#718295; color:#ecf0f1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:6%; padding:5px;}
.x_panel_register_tb table td{border:1px solid #ddd; width:20%;margin:0; color:#666;}
.x_panel_register_tb table th{padding-left:10px; margin:0;}
.x_panel_register_tb input{border:1px solid #dadada; color: #666; outline:none; width:400px;height:20px;}
.x_panel_register_tb .input-readonly{border:1px solid #dadada; color: #666; outline:none; width:400px;height:20px;background-color:#ccc;}
.x_panel_register_tb select{border:1px solid #dadada; color: #666; outline:none; width:426px; padding:4px 12px;}
.x_panel_register_tb span:not(.k-combobox){padding-right:5px;}
.x_panel_register_tb .btn_submit{ position:relative; width:26px; height:26px; cursor:pointer; border:1px solid #666; vertical-align:bottom; top:0;}
.pop_panel{width:98%; height:160px; background:#fff; margin:20px; border:1px solid #dadada; position:relative;}
.pop_panel_t{margin-bottom:40px;min-height:30px;}
.pop_panel_t input{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:right;}
.pop_panel_t span{position:absolute; top:24px; left:60px; font-weight:800;}
.pop_panel_t span .step_tt{color: yellowgreen;}
.pop_panel{width:98%; height:100%; background:#fff; margin:10px 0px 0px 10px; border:1px solid #dadada; position:relative;}
.pop_panel_t input{border:none; color: #f2163a; outline:none; margin: 0 10px; text-align:right;}
.pop_panel_t span{position:absolute; top:24px; left:60px;}
.pop_panel_wrap{width:98%; }
.pop_panel_tb{width:100%; margin:10px 10px 10px 10px; position:relative;}
.pop_panel_tb table{width:98%; text-align:left; font-size:12px;}
.pop_panel_tb table th{background:#718295; color:#ecf0f1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:10%; padding:5px;}
.pop_panel_tb table td{border:1px solid #ddd; width:20%;margin:0; color:#666;}
.pop_panel_tb table th{padding-left:10px; margin:0;}
.pop_panel_tb input{border:1px solid #dadada; color: #666; outline:none; width:400px;height:20px;}
.pop_panel_tb .input100{border:1px solid #dadada; color: #666; outline:none; width:100px; }
.pop_panel_tb .input200{border:1px solid #dadada; color: #666; outline:none; width:200px; }
.pop_panel_tb .input300{border:1px solid #dadada; color: #666; outline:none; width:300px; }
.pop_panel_tb .input400{border:1px solid #dadada; color: #666; outline:none; width:400px; }
.pop_panel_tb .input-readonly {border:none;border-right:0px; border-top:0px; border-left:0px; border-bottom:0px;}
.pop_panel_tb .input-readonly100 {border:none;border-right:0px;width:100px; border-top:0px; border-left:0px; border-bottom:0px;}
.pop_panel_tb .input-readonly200 {border:none;border-right:0px;width:200px; border-top:0px; border-left:0px; border-bottom:0px;}
.pop_panel_tb .input-readonly300 {border:none;border-right:0px;width:300px; border-top:0px; border-left:0px; border-bottom:0px;}
#popup01{position:relative; width:100%; margin:0 auto; letter-spacing:-.2px; background:#F7F7F7; float:left;}
#popup01 .x_panel2_wrap{width:100%; background: #fff; margin: -25px 5px 5px 0px; border: 1px solid #dadada;}
.title_pop{position: relative; left:20px;}
.close_btn{float:left; position:absolute; right:10px; top:20px; }
.close_btn .i7{ background-image:url(../images/i_e.png); background-repeat:no-repeat; width:30px; height:30px; position:absolute; top:0; right:0;}
.close_btn .btn{border:none; width:30px; height:30px; border-radius: 5px; margin:0 auto; background-color:#fff; cursor:pointer; position:absolute; right:8px;}
#popup01 .btn_sch .btn{right:10px;}
#popup01 .x_panel{width:100%;}
#popup01 .x_panel2{width:100%;}
#popup01 .x_panel2 .x_panel2_t{min-height: 30px;}
#popup01 .x_panel2 .x_panel2_wrap{width:100%; width: 98%; background: #fff; margin: 20px 5px 5px 8px;}
#popup01 .x_panel2 .x_panel2_wrap .x_panel2_tb{ width:100%; overflow:auto; margin:0 auto; display:inline-block; }
#popup01 .x_panel2_t span{position:absolute; top:24px; left:10px;}
#popup02{width:400px; border:1px solid #ddd;}
#popup02 .top{background-color: #718295; height: 30px; height: 40px; float: left; margin: 0; width: 100%;}
#popup02 .top .title_pop{color:#fff; left:0; margin-left:10px; top:-10px;}
#popup02 .bottom {background-color:#fff; width:100%;}
#popup02 .bottom .btn_gr{width:100%; float:right; background-color:#fff; margin:0; border-top: 1px solid #ddd;padding-top: 15px;padding-left: 30px;}
#popup02 .bottom .btn_gr ul{float:right;}
#popup02 .textarea{background-color:#fff; float:left; font-size:12px; height:100px; margin:10px; padding:10px;}
#popup02 .close_btn{top:-6px; right:6px;}
/*.hwap{margin:10px;}*/
.tb_l_1{margin-left:30px;min-height: 42px;font-weight: bold;}
.tb_l_1 td{padding-right:20px;}
.tb_l_1 .i_search{ background-image:url(../images/i_search.png); background-repeat:no-repeat; width:25px; height:25px; position:absolute; top:0; left:0;}
.tb_l_1 .i_search2{ background-image:url(../images/2_3.png); background-repeat:no-repeat; width:25px; height:25px; position:absolute; top:0; left:0;}
.tb_l_1 .i_remove{ background-image:url(../images/1_2.png); background-repeat:no-repeat; width:25px; height:25px; position:absolute; top:0; left:0;}
#new01{position:relative; width:100%; margin:0 auto; letter-spacing:-.2px; float:left; background-color:#F7F7F7;}
#new02{position:relative; width:100%; margin:0 auto; letter-spacing:-.2px; float:left; background-color:#F7F7F7;}
#new03{position:relative; width:100%; margin:0 auto; letter-spacing:-.2px; float:left; background-color:#F7F7F7;}
#new01 .btn_sch .btn{ width:100px; height:30px; position:absolute; top:6px; border:none; border-radius:5px; color:#fff; background: #f2163a; cursor:pointer;}
#new01 .n_panel1{width:50%; height:600px; background:#F7F7F7; position:relative; border:none; margin:5px 0px 0px 0px; float:left;}
#new01 .n_panel1 .x_panel2_t{min-height: 30px;}
#new01 .n_panel1 .x_panel2_t span{position:absolute; top:22px; left:60px;}
#new01 .n_panel1 .x_panel2_t .btn_co{ float:left; position:absolute; top:15px;}
#new01 .n_panel1 .x_panel2_t .btn_co .btn{width:30px; height:30px; border:1px solid #dadada; border-radius:5px; color:#666; cursor:pointer;}
#new01 .n_panel1 .x_panel2_wrap{width:100%; background: #fff; margin: -25px 5px 5px 0px; border: 1px solid #dadada;}
#new01 .n_panel2{width:48%; height:auto; background:white; position:relative; border:none; margin:10px 0px 0px 20px; float:left;border:1px solid #ddd;}
#new01 .n_panel2 .x_panel2_t{min-height: 30px;}
#new01 .n_panel2 .x_panel2_t .btn_gr .btn_cp .btn{width:100%; height:30px; border:1px solid #dadada; border-radius:5px; color:#666; background: #fff; cursor:pointer; min-width:50px; padding: 0px 10px 0px 10px; padding-top: 15px;padding-left: 30px;}
#new01 .n_panel2 .x_panel2_t .btn_co{ float:left; position:absolute; top:15px; left:35px;}
#new01 .n_panel2 .x_panel2_wrap{width:98%; background: #fff; margin: 30px 0px 0px 10px;}
#new01 .n_panel2 .right_01{width:100%; background:white; float:left; position:relative; border:none; margin-bottom:20px; margin-top: 5px;}
.x_panel4_t{margin-bottom:30px;min-height:15px;}
.x_panel4_wrap{width:98%;background: #fff;}
#new01 .n_panel2 .right_02{width:100%; background:white; float:left; position:relative; border:none;margin-bottom:20px; border:1px solid #ddd;}
#new01 .n_panel1_60{width:60%; height:600px; background:#F7F7F7; position:relative; border:none; margin:5px 0px 0px 20px; float:left;}
#new01 .n_panel2_40{width:37%; height:auto; background:#F7F7F7; position:relative; border:none; margin:5px 0px 0px 20px; float:left;}
#new02 .n_panel1{width:49%; height:600px; background:#F7F7F7; position:relative; border:none; float:left;}
#new02 .n_panel2{width:49%; background:#F7F7F7; position:relative; border:none; float:left;}
#new03 .n_panel1{width:100%; background:#F7F7F7; position:relative; border:none; margin:5px 0px 0px 20px; float:left;}
#new03 .n_panel2{width:100%; background:#F7F7F7; position:relative; border:none; float:left;}
#new02 .n_panel1 .left_01{width:98%; background:#F7F7F7; float:left; position:relative; border:none; margin-bottom:20px;}
#new02 .n_panel1 .left_01 .x_panel2_wrap{width:100%; background: #fff; margin:5px 0px 0px 0px;border:1px solid #ddd; padding: 0px 20px 20px 20px;}
#new02 .n_panel1 .left_02{width:98%; background:#F7F7F7; float:left; position:relative; border:none;}
#new02 .n_panel1 .left_02 .x_panel2_wrap{width:100%; background: #fff; margin:5px 0px 0px 0px;border:1px solid #ddd; padding: 0px 20px 20px 20px;}
#new02 .n_panel2 .right_01{width:100%; background:white; float:left; position:relative; border:none; margin-bottom:20px; border:1px solid #ddd;margin-top: 5px;}
#new02 .n_panel2 .right_01 .x_panel4_top_wrap{width:100%; width: 98%; background: #fff; margin: 0px 0px 0px 10px;}
#new02 .n_panel2 .right_02{width:100%; background:white; float:left; position:relative; border:none;margin-bottom:20px; border:1px solid #ddd;}
#new02 .n_panel2 .right_03{width:100%; height:250px; background:#F7F7F7; float:left; position:relative; border:none;margin-bottom:20px;}
#new03 .n_panel2 .left_01{width:50%; height:100%; background:#F7F7F7; float:left; position:relative; border:none; margin:20px;}
#new03 .n_panel2 .right_01{width:45%; height:100%; background:#F7F7F7; float:left; position:relative; border:none; margin:20px;}
.n4_tb {border:1px solid #ddd; width:100%; border-collapse:collapse;}
.n4_tb th{ background:#ddd;}
.n4_tb tr{border:1px solid #eee; line-height:2em;}
.n4_tb td{padding-left:10px;}
/* input */
input:readonly {background: #ccc;}
input::-webkit-input-placeholder { font-size: 90%; }
input::-moz-placeholder { font-size: 90%; }
input:-ms-input-placeholder { font-size: 90%; }
input:-moz-placeholder { font-size: 90%; }
input::placeholder { font-size: 90%; }
.input-style1 {height:25px; padding:0 5px; border:1px solid #edeef1; border-radius:3px; background-color:#fff;}
.input-style1:disabled {background-color:#ebebeb;}
.input-style1:read-only {background-color:#ebebeb;}
.input-style1:hover { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50); }
.input-style2 {height:255px; padding:0 5px; border:1px solid #edeef1; border-radius:3px; background-color:#fff;}
.input-style2:disabled {background-color:#ebebeb;}
.input-style2:read-only {background-color:#ebebeb;}
.input-style2:hover { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50); }
.input-totalCnt {width:40px; background-color:white;}
.input-date {display:inline-block; position:relative; background-color:#ebebeb;}
.input-date .input-style1 {padding-right:30px; border:1;}
.input-date .btn-calendar {position:absolute; top:0; right:0;}
.ico-calendar {width:12px; height:13px; background:url('../images/ico_calendar.png') no-repeat 0 0;}
/* select */
.select-style1 {height:28px; border:1px solid #edeef1; background-color:#fff;}
.select-style1:disabled {background-color:#ebebeb;}
/* textarea */
.textarea {border:1px solid #edeef1; resize:none;}
.textarea:disabled {background-color:#ebebeb;}
/* combobox kendo*/
.combo-style1{height:29px;padding-right:0px; font-size:13px;border:0px;}
.combo-readonly,
.combo-readonly .k-input-inner{height:29px;padding-right:0px;background-color:#F8FAFC !important;}
/* grid */
.k-grid {
border: 1px solid #dadada;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
/*margin: 0px 30px 15px 20px; */
}
.k-grid tbody tr {height:30px !important;}
.k-grid td{
white-space: nowrap;
text-overflow: ellipsis;
padding: 4px 12px !important;
line-height: 22px !important;
}
.k-list {
font-size:13px;
}
.grid-list{
height: calc(100% - 45px);
}
/* radio */
.box-radio-input input[type="radio"]{display:none;}
.box-radio-input input[type="radio"] + span{display:inline-block;background:#fff;border:1px solid #E2E8F0;padding:0 12px;text-align:center;height:28px;line-height:28px;font-size:12px;font-weight:500;color:#475569;cursor:pointer;border-radius:4px;margin-right:4px;transition:all .15s;}
.box-radio-input input[type="radio"] + span:hover{border-color:#94A3B8;background:#F8FAFC;}
.box-radio-input input[type="radio"]:checked + span{border:1px solid #3B82F6;background:#EFF6FF;color:#2563EB;font-weight:600;}
.box-radio-input input[type="radio"]:checked + span:hover{background:#DBEAFE;}
/* checkbox */
.input-checkbox {vertical-align: -5px;}
/* tab_menu - 기존 스타일 비활성화 (Modern Layout의 .screen-tab 사용) */
/*
#_tabs { margin:0; padding:0; list-style:none; overflow:hidden; margin: 10px 10px 0px 10px;}
#_tabs li { float:left; display:block; padding:5px; background-color:#bbb; margin-right:5px;border-top-left-radius: 5px;border-top-right-radius: 5px;}
#_tabs li a { color:#fff; text-decoration:none; }
#_tabs li.current { background-color:#e1e1e1;border-top-left-radius: 5px;border-top-right-radius: 5px;}
#_tabs li.current a { color:#000; text-decoration:none; }
#_tabs li a.remove { color:#f00; margin-left:10px;}
*/
/* 기존 스타일 - Modern Layout에서 오버라이드됨 */
/* #bodyContents{ float:left; margin:0 20px 0 0; width:100%;} */
/* .ifrm-default{width:99%; border-width:1px 0px 0px 0px;height:89%;position:absolute;} */
.k-dialog.k-alert .k-dialog-titlebar {
background-color: #333;
color: #eee;
}
.k-dialog.k-alert .k-button {
background-color: #333;
color: #eee;
}
/*Icon to the left side of the titlebar */
.k-confirm .k-window-titlebar::before {
content: '\f059 Please Confirm ';
font-family: "FontAwesome";
font-weight: bold;
font-size: 14px;
}
/*Icon to the right side of the titlebar */
.k-confirm .k-window-titlebar::after {
font-family: "FontAwesome";
content: "\f059";
font-weight: bold;
font-size: 24px;
float: right;
}
.k-confirm .k-window-titlebar .k-dialog-title {
visibility: collapse;
}
/* topMenu Util Button */
.div_TopBtnPop{background : #f5f5f5;color : #fff;width : 274px;height: 100%;margin: 0px 0px 0px 0px;border: 1px solid #dadada;overflow: auto;position : absolute; }
.div_TopBtnPop ul{padding : 0px;list-style:none; }
.div_TopBtnPop ul li{border-top : 1px solid #73cae4;border-bottom : 1px solid #060606; }
.div_TopBtnPop ul li a{padding : 10px;display : block;color : #fff;text-decoration : none; }
.div_TopBtnPop ul li:first-child { border-top:none;}
.div_TopBtnPop ul li:last-child { border-bottom:none;}
.div_TopBtnPop ul li a:hover { background:#73cae4;}
.div_title{padding: 5px 0px 5px 15px;border: 1px solid #dadada;background: black; }
.div_content{padding: 10px 10px 10px 10px;min-height: 200px; }
.div_btnLine{padding: 5px 0px 5px 1px;font-size: 11px;color:#009BC0;border-bottom: 1px solid #060606;padding: 10px; }
.div_btnLine_left{display: inline;padding: 0px 0px 0px 10px;cursor: pointer;}
.div_btnLine_right{display: inline;float: right;padding: 0px 10px 0px 0px;cursor: pointer;}
.div_content ul{padding : 0px;list-style:none; }
.div_content ul li{border-top : 1px solid #003399;border-bottom : 1px solid #060606; }
.div_content ul li a{padding : 10px;font-size : 12px;display : block;color : black;text-decoration : none; }
.div_content ul li:first-child { border-top:none;}
.div_content ul li:last-child { border-bottom:none;}
.div_content ul li a:hover { background:#73cae4;}
/* template toolbar button */
.cke_button__inputtag_icon,.cke_button__stdtag_icon{
background-size: auto !important;
width:58px !important;
height:21px !important;
}
input[type="checkbox"]{vertical-align: -5px;}
/* =============================================
Modern Flat Layout Styles (Prototype 적용)
============================================= */
/* CSS 변수 정의 */
:root {
--header-height: 40px;
--tabbar-height: 40px;
--sidebar-width: 60px;
--primary-color: #3B82F6;
--primary-hover: #2563EB;
--sidebar-bg: #1E293B;
--content-bg: #F0F4F8;
--border-color: #E2E8F0;
--header-bg: #1E293B;
--text-primary: #334155;
--text-secondary: #64748B;
--base-font-size: 12px;
--primary: #2CC4A0;
--primary-lt: #e8faf5;
--primary-dk: #22a085;
--blue: #3B82F6;
--blue-lt: #EFF6FF;
--blue-dk: #2563EB;
--orange: #E8870A;
--orange-lt: #FFF7ED;
--red: #EF4444;
--red-lt: #FEF2F2;
--navy: #1E2B3C;
--navy2: #253347;
--gray-50: #F8FAFC;
--gray-100: #F1F5F9;
--gray-200: #E2E8F0;
--gray-300: #CBD5E1;
--gray-400: #94A3B8;
--gray-500: #64748B;
--gray-600: #475569;
--gray-700: #334155;
--text: #1E293B;
--indigo: #4338CA;
--indigo-lt: #EEF2FF;
--ct-blue: #0369A1;
--ct-blue-lt: #F0F9FF;
--ct-blue-bd: #BAE6FD;
}
/* 글로벌 폰트 사이즈 (--base-font-size 변수로 일괄 조정) */
body { font-size: var(--base-font-size); }
.k-grid td, .k-grid th, .k-grid .k-header { font-size: var(--base-font-size) !important; }
.k-widget, .k-input, .k-textbox { font-size: var(--base-font-size) !important; }
.k-dropdown .k-dropdown-wrap, .k-combobox .k-dropdown-wrap { font-size: var(--base-font-size) !important; }
input, select, textarea, button { font-size: var(--base-font-size); }
.detail-form-table, .detail-form-table th, .detail-form-table td { font-size: var(--base-font-size) !important; }
/* 기본 body 스타일 오버라이드 */
html, body {
height: 100%;
overflow: hidden;
background: white;
/*background: var(--content-bg) !important;*/
}
/* === Modern Header (전체 너비, 다크 테마) === */
#header.modern-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
height: var(--header-height) !important;
background: #1E293B !important;
border-bottom: 1px solid rgba(255,255,255,0.08);
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 0 24px 0 0;
margin: 0 !important;
z-index: 120;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.header-left {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.btn-menu-toggle {
width: 60px;
height: var(--header-height);
border: none;
background: transparent;
border-radius: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #94A3B8;
transition: all 0.2s;
flex-shrink: 0;
}
.btn-menu-toggle:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
border-color: rgba(255,255,255,0.3);
}
.header-logo {
font-size: 18px;
font-weight: 700;
color: #4ADE80;
margin: 0;
padding-left: 8px;
padding-bottom: 0px;
}
.header-logo span {
color: #94A3B8;
}
.header-logo .header-logo-sup {
color: #60A5FA;
font-weight: 600;
font-size: 16px;
}
.header-portal-label {
font-size: 12px;
color: #64748B;
font-weight: 500;
padding-left: 12px;
margin-left: 12px;
border-left: 1px solid rgba(255,255,255,0.15);
white-space: nowrap;
}
/* 헤더 중앙: 통합검색 */
.header-center {
flex: 1;
display: flex;
justify-content: center;
padding: 0 60px;
min-width: 0;
}
.header-search {
display: flex;
align-items: center;
width: 100%;
max-width: 300px;
background: rgba(255,255,255,0.11);
border: 1.5px solid #5B9A8B;
border-radius: 6px;
padding: 0px 12px;
gap: 6px;
transition: all 0.2s ease;
}
.header-search:focus-within {
border-color: #6B8DB2;
box-shadow: 0 0 0 2px rgba(107,141,178,0.15);
background: rgba(255,255,255,0.15);
}
.header-search i.fa-search {
color: #5B9A8B;
font-size: 13px;
flex-shrink: 0;
cursor: pointer;
transition: color 0.2s;
}
.header-search:focus-within i.fa-search {
color: #6B8DB2;
}
.header-search input {
border: none;
background: transparent;
color: #fff;
font-size: 13px;
padding: 0;
width: 100%;
outline: none;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 500;
}
.header-search input::placeholder {
color: rgba(255,255,255,0.35);
font-size: 12.5px;
font-weight: 400;
}
.top-search-kbd {
flex-shrink: 0;
font-size: 10px;
color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 3px;
padding: 1px 5px;
font-family: 'JetBrains Mono', monospace;
line-height: 1.4;
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.header-lang {
display: flex;
align-items: center;
}
.header-lang select,
.header-lang .k-combobox {
border: 1px solid rgba(255,255,255,0.22);
padding: 0;
border-radius: 5px;
font-size: 12px;
background: rgba(255,255,255,0.06);
color: #CBD5E1;
height: 30px;
min-height: 30px;
}
.header-lang .k-combobox .k-input-inner,
.header-lang .k-combobox .k-input {
color: #CBD5E1 !important;
height: 28px;
line-height: 28px;
padding: 0 8px;
font-size: 12px;
}
.header-lang .k-combobox .k-input-button {
height: 28px;
width: 24px;
padding: 0;
}
.header-lang .k-combobox .k-input-button .k-icon {
color: rgba(255,255,255,0.4);
font-size: 12px;
}
.header-actions {
display: flex;
align-items: center;
gap: 4px;
}
.header-icon-btn {
width: 36px;
height: 36px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #94A3B8;
transition: all 0.2s;
font-size: 16px;
}
.header-icon-btn:hover {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
}
/* 알림 배지 */
.noti-badge {
position: absolute;
top: 2px;
right: -5px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: #EF4444;
color: #FFFFFF;
font-size: 10px;
font-weight: 600;
line-height: 16px;
text-align: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* === 헤더 내 탭 영역 === */
.header-tabs {
display: flex;
align-items: center;
flex: 1;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
gap: 4px;
padding: 0 8px;
min-width: 0;
}
.header-tabs::-webkit-scrollbar {
height: 3px;
}
.header-tabs::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 3px;
}
/* === TabBar (헤더 아래, 전체 너비) === */
.tab-bar {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
height: var(--tabbar-height);
background: #FFFFFF;
border-bottom: 1px solid #E2E8F0;
display: flex;
align-items: center;
padding: 0 12px 0 16px;
z-index: 110;
gap: 4px;
overflow: hidden;
}
.tab-bar::-webkit-scrollbar {
height: 3px;
}
.tab-bar::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 3px;
}
/* 홈 버튼 */
.tab-home {
width: 32px;
height: 32px;
min-width: 32px;
border: none;
background: var(--primary-color);
color: #FFFFFF;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-right: 4px;
transition: all 0.2s;
flex-shrink: 0;
}
.tab-home:hover {
background: var(--primary-hover);
}
/* 탭 리스트 컨테이너 */
#_tabs,
.tab-bar .tab-list {
display: flex !important;
align-items: center !important;
gap: 4px !important;
flex: 1 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
height: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
float: none !important;
}
.tab-bar .tab-list::-webkit-scrollbar {
height: 3px;
}
.tab-bar .tab-list::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 3px;
}
/* =============================================
Screen Tab Styles (Prototype 동일)
============================================= */
/* 개별 탭 아이템 - 브라우저 탭 스타일 */
#_tabs li.screen-tab,
.tab-bar .tab-list li.screen-tab,
.screen-tab {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 14px !important;
height: var(--tabbar-height) !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
cursor: pointer !important;
font-size: 13px !important;
color: #64748B !important;
white-space: nowrap !important;
transition: color 0.15s, border-color 0.15s, background 0.15s !important;
position: relative !important;
min-width: 80px !important;
max-width: 200px !important;
float: none !important;
margin-right: 0 !important;
list-style: none !important;
box-sizing: border-box !important;
}
#_tabs li.screen-tab:hover,
.tab-bar .tab-list li.screen-tab:hover,
.screen-tab:hover {
background: rgba(59,130,246,0.04) !important;
color: #334155 !important;
border-bottom-color: #CBD5E1 !important;
}
#_tabs li.screen-tab.current,
.tab-bar .tab-list li.screen-tab.current,
.screen-tab.current,
.screen-tab.active {
background: #FFFFFF !important;
color: var(--primary-color) !important;
border-bottom: 2px solid var(--primary-color) !important;
font-weight: 600 !important;
}
#_tabs li.screen-tab.current::after,
.tab-bar .tab-list li.screen-tab.current::after,
.screen-tab.current::after,
.screen-tab.active::after {
content: none;
}
/* 탭 아이콘 */
#_tabs li.screen-tab i.tab-icon,
.screen-tab i.tab-icon {
font-size: 13px !important;
color: #94A3B8 !important;
flex-shrink: 0;
display: flex;
align-items: center;
}
#_tabs li.screen-tab.current i.tab-icon,
.screen-tab.current i.tab-icon,
.screen-tab.active i.tab-icon {
color: var(--primary-color) !important;
}
/* 탭 타이틀 */
#_tabs li.screen-tab .tab-title,
.screen-tab .tab-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
}
#_tabs li.screen-tab .tab-title a.tab,
.screen-tab .tab-title a.tab {
color: inherit !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: inherit !important;
line-height: 1 !important;
}
/* 탭 닫기 버튼 */
#_tabs li.screen-tab .tab-close,
.screen-tab .tab-close {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 11px;
opacity: 0.5;
transition: all 0.2s;
flex-shrink: 0;
cursor: pointer;
}
#_tabs li.screen-tab .tab-close:hover,
.screen-tab .tab-close:hover {
background: #E2E8F0;
opacity: 1;
}
#_tabs li.screen-tab.current .tab-close,
.screen-tab.current .tab-close,
.screen-tab.active .tab-close {
opacity: 0.7;
}
#_tabs li.screen-tab .tab-close a.remove,
.screen-tab .tab-close a.remove {
color: #94A3B8 !important;
text-decoration: none !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0 !important;
}
#_tabs li.screen-tab .tab-close a.remove:hover,
.screen-tab .tab-close a.remove:hover {
color: #EF4444 !important;
}
/* 기존 .tab-bar .tab-list li 스타일 (호환성 유지) */
.tab-bar .tab-list li:not(.screen-tab) {
display: flex;
align-items: center;
gap: 8px;
height: var(--tabbar-height);
padding: 0 14px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s, background 0.15s;
font-size: 13px;
color: var(--text-secondary);
position: relative;
min-width: 80px;
max-width: 200px;
box-sizing: border-box;
}
.tab-bar .tab-list li:not(.screen-tab):hover {
background: rgba(59,130,246,0.04);
color: var(--text-primary);
border-bottom-color: #CBD5E1;
}
.tab-bar .tab-list li:not(.screen-tab).current {
background: #fff;
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
font-weight: 600;
z-index: 1;
}
.tab-bar .tab-list li:not(.screen-tab).current::after {
content: none;
}
/* 탭 아이콘 (호환성) */
.tab-bar .tab-list li:not(.screen-tab) i.tab-icon {
font-size: 12px;
color: #94A3B8;
}
.tab-bar .tab-list li:not(.screen-tab).current i.tab-icon {
color: var(--primary-color);
}
/* 탭 링크 스타일 (호환성) */
.tab-bar .tab-list li:not(.screen-tab) a.tab {
flex: 1;
color: inherit;
text-decoration: none;
font-size: 13px;
font-weight: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 탭 닫기 버튼 (호환성) */
.tab-bar .tab-list li:not(.screen-tab) a.remove {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #94A3B8;
font-size: 11px;
transition: all 0.2s;
flex-shrink: 0;
margin-left: 4px;
text-decoration: none;
}
.tab-bar .tab-list li:not(.screen-tab) a.remove:hover {
color: #EF4444;
background: #FEE2E2;
}
.tab-bar .tab-list li:not(.screen-tab).current a.remove {
color: #64748B;
}
.tab-bar .tab-list li:not(.screen-tab).current a.remove:hover {
color: #EF4444;
background: #FEE2E2;
}
/* 탭 액션 영역 */
.tab-actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: 4px;
padding-left: 4px;
flex-shrink: 0;
}
/* 모든 탭 닫기 버튼 */
.tab-action-btn {
width: 28px;
height: 28px;
border: 1px solid #E2E8F0;
background: #FFFFFF;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #64748B;
font-size: 13px;
transition: all 0.2s;
flex-shrink: 0;
}
.tab-action-btn:hover {
color: #EF4444;
background: #FEE2E2;
border-color: #FECACA;
}
/* === Main Container === */
.main-container {
margin-left: 0;
}
/* === Content Area === */
.content-area {
position: fixed !important;
top: calc(var(--header-height) + var(--tabbar-height)) !important;
left: var(--sidebar-width);
right: 0;
bottom: 0;
height: calc(100vh - var(--header-height) - var(--tabbar-height)) !important;
overflow: hidden;
background: var(--content-bg);
padding: 0;
transition: left 0.3s ease;
}
.content-area.expanded {
left: 60px;
}
/* === bodyContents 스타일 조정 === */
#bodyContents.content-area {
float: none !important;
margin: 0 !important;
width: auto !important;
}
/* === iframe 스타일 조정 === */
.content-area .ifrm-default,
#bodyContents .ifrm-default,
.ifrm-default {
width: 100% !important;
height: 100% !important;
border: none !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
/* === _content 컨테이너 스타일 === */
#_content {
width: 100%;
height: 100%;
position: relative;
}
#_content > div {
width: 100%;
height: 100%;
position: relative;
}
/* === 기존 헤더 스타일 숨김 (새 스타일과 충돌 방지) === */
.modern-header ~ #gnb {
display: none;
}
/* === 팝업 위치 조정 (헤더 높이 변경에 따른) === */
.div_TopBtnPop {
top: 56px !important;
}
/* =============================================
Header Dropdown Panel (Modern Design)
============================================= */
/* =============================================
Header Dropdown Panel — Dark Theme
헤더(#1E293B) 와 통일된 다크 디자인
============================================= */
.header-dropdown-panel {
position: absolute;
width: 320px;
background: #1E293B;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
z-index: 10000;
animation: dropdownFadeIn 0.18s ease;
}
@keyframes dropdownFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.dropdown-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
background: #0F172A;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dropdown-panel-title {
font-size: 13px;
font-weight: 600;
color: #F1F5F9;
letter-spacing: 0.3px;
}
.dropdown-panel-close {
background: transparent;
border: none;
color: #64748B;
cursor: pointer;
width: 26px;
height: 26px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
font-size: 13px;
}
.dropdown-panel-close:hover {
background: rgba(255,255,255,0.1);
color: #F1F5F9;
}
.dropdown-panel-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px;
background: rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 11px;
}
.dropdown-actions-left,
.dropdown-actions-right {
display: flex;
gap: 4px;
}
.dropdown-actions-left span,
.dropdown-actions-right span {
color: #60A5FA;
cursor: pointer;
padding: 4px 8px;
border-radius: 5px;
transition: background 0.15s, color 0.15s;
font-size: 11px;
}
.dropdown-actions-left span:hover,
.dropdown-actions-right span:hover {
background: rgba(96,165,250,0.15);
color: #93C5FD;
}
.dropdown-panel-content {
padding: 4px 0;
max-height: 320px;
overflow-y: auto;
}
.dropdown-panel-content::-webkit-scrollbar {
width: 4px;
}
.dropdown-panel-content::-webkit-scrollbar-track {
background: transparent;
}
.dropdown-panel-content::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 4px;
}
.dropdown-list {
list-style: none;
padding: 0;
margin: 0;
}
.dropdown-list li {
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: background 0.15s;
}
.dropdown-list li:last-child {
border-bottom: none;
}
.dropdown-list li span {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 10px 14px;
color: #CBD5E1;
font-size: 13px;
}
.dropdown-list li a {
display: flex;
align-items: center;
gap: 8px;
color: #CBD5E1;
text-decoration: none;
font-size: 13px;
flex: 1;
transition: color 0.15s;
}
.dropdown-list li a:hover {
color: #60A5FA;
}
.dropdown-list li:hover {
background: rgba(255,255,255,0.05);
}
.dropdown-list li img {
width: 16px;
height: 16px;
opacity: 0.6;
}
.dropdown-list li img:last-child {
cursor: pointer;
opacity: 0.4;
transition: opacity 0.2s;
}
.dropdown-list li img:last-child:hover {
opacity: 0.9;
}
.dropdown-list li input[type="checkbox"] {
width: 15px;
height: 15px;
cursor: pointer;
accent-color: #3B82F6;
}
.dropdown-list li a i {
margin-right: 6px;
color: #60A5FA;
font-size: 13px;
width: 16px;
text-align: center;
}
.dropdown-delete-btn {
cursor: pointer;
color: #475569;
font-size: 13px;
padding: 4px 6px;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
.dropdown-delete-btn:hover {
color: #F87171;
background: rgba(248,113,113,0.1);
}
/* 알림 아이템 전용 */
.noti-item {
flex: 1;
min-width: 0;
}
.noti-item .noti-title-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.noti-item i.fa-bell-o {
color: #60A5FA;
margin-right: 6px;
font-size: 13px;
}
.noti-item .noti-content {
color: #64748B;
font-size: 11px;
padding-left: 19px;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =============================================
Filter Card & Data Card Styles (Prototype)
============================================= */
/* Page Header & Breadcrumb */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 12px 16px 8px 20px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-secondary);
font-size: 13px;
}
.breadcrumb a {
color: var(--primary-color);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb-icons {
display: flex;
align-items: center;
gap: 8px;
}
.breadcrumb-icons .header-icon {
width: auto;
padding: 0 8px;
cursor: pointer;
}
/* Filter Card */
.filter-card {
background: #fff;
border-radius: 12px;
padding: 10px 24px;
margin: 0 16px 12px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Filter Actions (검색 버튼 영역) */
.filter-actions {
display: flex;
justify-content: center;
padding-top: 16px;
margin-top: 12px;
border-top: 1px solid var(--border-color);
}
/* Form Control (기본 입력 필드) */
.form-control {
height: 32px;
padding: 0 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 13px;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
.form-control:focus {
border-color: var(--primary-color);
}
.form-control.input-readonly,
.form-control[readonly] {
background: #F8FAFC;
color: #64748B;
}
.form-control::placeholder {
color: #94A3B8;
}
/* Filter Container - 프로토타입과 동일한 flex 레이아웃 */
.filter-container {
display: flex;
align-items: flex-start;
gap: 12px;
}
/* 접기/펼치기 버튼 - 왼쪽에 위치 */
.filter-collapse-btn {
width: 28px;
height: 28px;
min-width: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #F1F5F9;
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-secondary);
cursor: pointer;
font-size: 12px;
margin-top: 4px;
transition: all 0.2s;
}
.filter-collapse-btn:hover {
background: #E2E8F0;
color: var(--text-primary);
}
/* 기본(접힌 상태): 오른쪽 방향 */
.filter-collapse-btn i {
transform: rotate(-90deg);
transition: transform 0.2s;
}
/* 펼친 상태: 아래 방향 */
.filter-collapse-btn.collapsed i {
transform: rotate(-180deg);
}
/* Filter Table - 테이블 기반 레이아웃 */
table.filter-table {
width: 100%;
border-collapse: collapse;
}
table.filter-table th,
table.filter-table td {
padding: 8px 12px;
vertical-align: middle;
font-size: 13px;
}
table.filter-table th {
text-align: right;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
background: transparent;
}
table.filter-table td {
text-align: left;
}
table.filter-table .required {
color: #EF4444;
margin-right: 2px;
}
/* Filter Table - div 기반 CSS Grid 레이아웃 (3열) */
div.filter-table {
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px 16px;
}
/* 접힌 상태: 첫째줄(3개)만 표시 */
div.filter-table.collapsed .filter-cell:nth-child(n+4) {
display: none;
}
/* Date Range 스타일 */
.date-range {
display: flex;
align-items: center;
gap: 8px;
}
.date-range .date-separator {
color: var(--text-secondary);
}
/* 3열 그리드 레이아웃 (div 기반) */
.filter-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px 16px;
}
/* Filter Cell - 가로 배치 (라벨 | 입력) */
.filter-cell {
display: flex;
align-items: center;
gap: 8px;
}
.filter-cell label {
min-width: 80px;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
text-align: right;
}
.filter-cell label.required::after {
content: ' *';
color: #EF4444;
margin-right: 2px;
}
/* Filter Input Group */
.filter-input-group {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
}
.filter-input-group span {
color: var(--text-secondary);
}
/* Filter Input */
/* ── 전역 table tr 높이 30px 통일 ── */
table th,
table td {
height: 35px !important;
padding: 0 8px !important;
line-height: 30px !important;
box-sizing: border-box !important;
}
/* ── 전역 input 높이 30px 통일 (로그인 페이지 제외) ── */
input[type="text"]:not(.form-input),
input[type="number"]:not(.form-input),
input[type="search"]:not(.form-input),
input[type="password"]:not(.form-input),
input[type="tel"]:not(.form-input),
input[type="email"]:not(.form-input),
input[type="url"]:not(.form-input),
select:not(.form-input):not(.form-select) {
height: 30px !important;
box-sizing: border-box !important;
}
.filter-input {
flex: 1;
min-width: 0;
height: 30px;
padding: 0 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 13px;
outline: none;
transition: border-color 0.2s;
}
.filter-input:focus {
border-color: var(--primary-color);
}
/* Kendo ComboBox 스타일 (검색조건용) */
/* Kendo ComboBox / DropDown 전역 30px */
.k-combobox,
.k-dropdown,
.k-datepicker,
.k-datetimepicker {
height: 30px !important;
box-sizing: border-box !important;
}
.k-combobox .k-input-inner,
.k-dropdown .k-input-inner,
.k-datepicker .k-input-inner,
.k-datetimepicker .k-input-inner {
height: 28px !important;
padding: 0 10px !important;
font-size: 13px !important;
line-height: 28px !important;
border: none !important;
background: transparent !important;
}
.k-combobox .k-input-button,
.k-dropdown .k-input-button,
.k-datepicker .k-input-button,
.k-datetimepicker .k-input-button {
height: 28px !important;
width: 28px !important;
}
.filter-cell .k-combobox,
.filter-cell .k-dropdown,
.filter-input-group .k-combobox,
.filter-input-group .k-dropdown {
width: 100% !important;
min-width: 100px;
height: 30px !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
background: #fff !important;
box-sizing: border-box;
}
.filter-cell .k-combobox .k-input-inner,
.filter-cell .k-dropdown .k-input-inner,
.filter-input-group .k-combobox .k-input-inner,
.filter-input-group .k-dropdown .k-input-inner {
height: 28px !important;
padding: 0 10px !important;
font-size: 13px !important;
line-height: 28px !important;
border: none !important;
background: transparent !important;
}
.filter-cell .k-combobox .k-input-button,
.filter-cell .k-dropdown .k-input-button,
.filter-input-group .k-combobox .k-input-button,
.filter-input-group .k-dropdown .k-input-button {
height: 28px !important;
width: 28px !important;
border: none !important;
background: transparent !important;
border-left: 1px solid var(--border-color) !important;
border-radius: 0 !important;
}
.filter-cell .k-combobox:hover,
.filter-cell .k-dropdown:hover,
.filter-input-group .k-combobox:hover,
.filter-input-group .k-dropdown:hover {
border-color: #CBD5E1 !important;
}
.filter-cell .k-combobox:focus-within,
.filter-cell .k-dropdown:focus-within,
.filter-input-group .k-combobox:focus-within,
.filter-input-group .k-dropdown:focus-within {
border-color: var(--primary-color) !important;
box-shadow: none !important;
}
/* Filter Icon Button */
.filter-icon-btn {
width: 30px;
height: 30px;
min-width: 28px;
background: #F8FAFC;
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-size: 11px;
transition: all 0.2s;
flex-shrink: 0;
}
.filter-icon-btn:hover {
background: #E2E8F0;
color: var(--text-primary);
}
/* Search 버튼 - 오른쪽 끝 정렬 */
.filter-search-btn {
margin-left: auto;
align-self: flex-start;
margin-top: 1px;
padding: 8px 24px;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.filter-search-btn:hover {
background: var(--primary-hover);
}
/* Data Card */
.data-card {
background: #fff;
border-radius: 12px;
margin: 0 16px 16px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
overflow: hidden;
}
.data-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-bottom: 1px solid var(--border-color);
}
.data-title {
display: flex;
align-items: center;
gap: 12px;
}
.data-title h3,
.data-title span:first-child {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
margin: 0;
}
.total-count {
font-size: 13px;
color: #3B82F6;
font-weight: 500;
margin-left: 8px;
}
.total-count span {
font-weight: 600;
}
.data-count {
color: var(--primary-color);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.data-count .input-totalCnt {
width: 60px;
border: none;
background: transparent;
color: var(--primary-color);
font-weight: 600;
font-size: 15px;
text-align: right;
padding: 0;
}
.data-actions {
display: flex;
gap: 8px;
}
/* Grid Toolbar */
.grid-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Grid Toolbar 단독 사용시 (data-card 바로 아래) */
.data-card > .grid-toolbar {
padding: 8px 12px;
border-bottom: 1px solid var(--border-color);
background: #F8FAFC;
justify-content: space-between;
}
/* Grid Toolbar가 data-header 안에 있을 때 */
.data-header .grid-toolbar {
padding: 0;
border: none;
background: transparent;
}
/* Grid Toolbar가 section-body 안에 있을 때 (상세화면) */
.section-body > .grid-toolbar {
padding: 8px 12px;
border-bottom: 1px solid var(--border-color);
background: #F8FAFC;
justify-content: space-between;
margin: 0;
}
.grid-toolbar-left,
.grid-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
}
/* Grid Search Input */
.grid-search {
display: flex;
align-items: center;
background: #fff;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 0 10px;
gap: 6px;
height: 28px;
}
.grid-search input {
border: none;
outline: none;
font-size: 12px;
width: 180px;
height: 26px;
background: transparent;
}
.grid-search i {
color: #94A3B8;
font-size: 12px;
}
.grid-toolbar-btn {
width: 28px;
height: 28px;
background: #fff;
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
font-size: 12px;
transition: all 0.2s;
}
.grid-toolbar-btn:hover {
background: #E2E8F0;
color: var(--text-primary);
border-color: #CBD5E1;
}
/* Grid toolbar buttons height */
.grid-toolbar .btn {
height: 28px;
padding: 0 12px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
/* Button Styles */
.btn {
display: inline-flex;
align-items: center;
gap: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Pretendard', sans-serif;
font-weight: 600;
font-size: 12.5px;
line-height: 1;
white-space: nowrap;
transition: all .15s;
padding: 0 13px;
height: 30px;
}
.btn svg {
flex-shrink: 0;
}
.sp {
width: 1px;
height: 20px;
background: var(--gray-300);
margin: 0 3px;
display: inline-flex;
flex-shrink: 0;
}
.btn-search {
background: var(--blue);
color: #fff;
}
.btn-search:hover {
background: var(--blue-dk);
}
.btn-primary {
background: var(--primary-color);
color: #fff;
}
.btn-primary:hover {
background: var(--primary-hover);
}
.btn-success {
background: #10B981;
color: #fff;
}
.btn-success:hover {
background: #059669;
}
.btn-secondary {
background: #fff;
color: var(--gray-700);
border: 1px solid var(--gray-300);
}
.btn-secondary:hover {
background: var(--gray-50);
}
.btn-save {
background: #fff;
color: var(--gray-600);
border: 1px solid var(--gray-300);
}
.btn-save:hover {
background: var(--gray-100);
}
.btn-tool {
background: var(--gray-50);
color: var(--gray-700);
border: 1px solid var(--gray-200);
}
.btn-tool:hover {
background: var(--gray-100);
}
.btn-tool.del {
color: var(--red);
}
.btn-ai {
background: linear-gradient(135deg, #7C3AED, #4F46E5);
color: #fff;
}
.btn-ai:hover {
opacity: .9;
}
.btn-info {
background: var(--blue-lt);
color: var(--blue);
border: 1px solid #BFDBFE;
}
.btn-create {
background: var(--primary);
color: #fff;
}
.btn-create:hover {
background: var(--primary-dk);
}
.btn-create svg {
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
}
.btn-proceed {
background: var(--primary-lt);
color: var(--primary-dk);
border: 1px solid #A7F3D0;
font-weight: 700;
}
.btn-proceed:hover {
background: #D1FAE5;
}
.btn-proceed-ct {
background: var(--ct-blue-lt);
color: var(--ct-blue);
border: 1px solid var(--ct-blue-bd);
font-weight: 700;
}
.btn-proceed-ct:hover {
background: #E0F2FE;
}
.btn-auto {
background: var(--indigo-lt);
color: var(--indigo);
border: 1.5px solid #C7D2FE;
font-weight: 700;
}
.btn-auto:hover {
background: #E0E7FF;
}
.btn-auto:disabled {
opacity: .45;
cursor: not-allowed;
}
.btn-submit {
background: var(--navy);
color: #fff;
height: 32px;
}
.btn-submit:hover {
background: var(--navy2);
}
.btn-approve {
background: #16A34A;
color: #fff;
height: 32px;
}
.btn-approve:hover {
background: #15803D;
}
.btn-reject {
background: var(--red-lt);
color: var(--red);
border: 1.5px solid var(--red);
height: 32px;
font-weight: 700;
}
.btn-reject:hover {
background: #FEE2E2;
}
.btn-cancel {
background: var(--orange-lt);
color: var(--orange);
border: 1.5px solid var(--orange);
height: 32px;
font-weight: 700;
}
.btn-cancel:hover {
background: #FED7AA;
}
.btn-save-pop {
background: var(--navy);
color: #fff;
height: 32px;
}
.btn-sm {
padding: 5px 12px;
font-size: 12px;
}
.btn-excel {
background: #fff;
border: 1px solid #10B981;
color: #10B981;
}
.btn-excel:hover {
background: #ECFDF5;
}
.btn-excel i {
color: #10B981;
}
.btn-grouping {
background: #fff;
border: 1px solid #6366F1;
color: #6366F1;
}
.btn-grouping:hover {
background: #EEF2FF;
}
.btn-grouping.active {
background: #6366F1;
color: #fff;
}
.btn-grouping i {
color: inherit;
}
.btn-outline {
background: #fff;
border: 1px solid var(--border-color);
color: var(--text-primary);
}
.btn-outline:hover {
background: #F8FAFC;
border-color: #CBD5E1;
}
/* =============================================
Kendo UI Grid Styles (Prototype 적용)
============================================= */
/* Grid Base */
.k-grid {
border: none;
font-family: 'Noto Sans KR', sans-serif;
font-size: 13px;
}
/* Grid Header - 프로토타입 design1-modern-flat 동일 */
.k-grid .k-grid-header {
background: #F8FAFC !important;
border-bottom: 1px solid #E2E8F0;
padding: 0;
}
.k-grid .k-grid-header-wrap {
border: none;
background: #F8FAFC !important;
}
.k-grid .k-grid-header th,
.k-grid .k-grid-header .k-header,
.k-grid th.k-header,
.k-grid .k-grid-header th.k-header {
background: #F8FAFC !important;
color: #334155;
font-weight: 500;
padding: 0 12px !important;
height: 35px !important;
line-height: 35px !important;
box-sizing: border-box !important;
border-color: #E2E8F0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.k-grid .k-grid-header .k-header .k-link {
color: #334155;
justify-content: inherit;
}
/* headerAttributes text-align 적용 지원 */
.k-grid .k-grid-header .k-header[style*="text-align: center"] .k-link {
justify-content: center;
}
.k-grid .k-grid-header .k-header[style*="text-align: right"] .k-link {
justify-content: flex-end;
}
/* Grid Header Hover - 마우스 오버된 컬럼만 색상 변경 */
.k-grid .k-grid-header .k-header:hover,
.k-grid .k-grid-header th.k-header:hover {
background: #EDF2F7 !important;
color: #334155;
}
.k-grid .k-grid-header .k-header:hover .k-link {
color: #334155;
}
/* Kendo 기본 hover 상태 오버라이드 */
.k-grid .k-grid-header .k-header.k-state-hover,
.k-grid th.k-header.k-state-hover {
background: #F8FAFC !important;
}
.k-grid .k-grid-header .k-header.k-state-hover:hover,
.k-grid th.k-header.k-state-hover:hover {
background: #EDF2F7 !important;
}
/* Grid Sticky Column - stickable 컬럼 배경 통일 */
.k-grid .k-grid-header th.k-grid-header-sticky,
.k-grid .k-grid-header th.k-header.k-grid-header-sticky {
background: #F8FAFC !important;
border-color: #E2E8F0;
}
.k-grid td.k-grid-content-sticky {
background: #fff !important;
border-color: #F1F5F9;
}
.k-grid tbody tr:hover td.k-grid-content-sticky {
background: #F8FAFC !important;
}
.k-grid tbody tr.k-selected td.k-grid-content-sticky {
background: #EFF6FF !important;
}
.k-grid tbody tr.k-alt td.k-grid-content-sticky {
background: #FAFBFC !important;
}
.k-grid tbody tr.k-alt:hover td.k-grid-content-sticky {
background: #F8FAFC !important;
}
/* Grid Content */
.k-grid .k-grid-content {
border: none;
}
.k-grid td {
border-color: transparent;
border-width: 0 !important;
padding: 0 12px !important;
height: 30px !important;
line-height: 30px !important;
box-sizing: border-box !important;
border-bottom: 1px solid #F1F5F9;
border-right: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.k-grid tbody tr {
height: 30px !important;
}
/* Grid Row Hover & Selected */
.k-grid tbody tr:hover {
background: #F8FAFC;
}
.k-grid tbody tr.k-selected,
.k-grid tbody tr.k-selected:hover {
background: #EFF6FF;
color: inherit;
}
.k-grid tbody tr.k-selected td {
background: transparent;
}
/* Grid Alt Row */
.k-grid tbody tr.k-alt {
background: #FAFBFC;
}
.k-grid tbody tr.k-alt:hover {
background: #F8FAFC;
}
/* Grid Pager */
.k-grid .k-pager-wrap,
.k-grid .k-pager {
background: #F8FAFC;
border: none;
border-top: 1px solid #E2E8F0;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.k-grid .k-pager-numbers {
display: flex;
gap: 4px;
}
.k-grid .k-pager-numbers .k-link,
.k-grid .k-pager-numbers .k-state-selected {
min-width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
border-radius: 4px;
padding: 0;
color: #64748B;
font-size: 12px;
}
.k-grid .k-pager-numbers .k-link:hover {
background: #E2E8F0;
color: #334155;
}
.k-grid .k-pager-numbers .k-link.k-selected,
.k-grid .k-pager-numbers .k-state-selected {
background: #3B82F6;
border-color: #3B82F6;
color: #fff;
}
/* Pager Navigation Buttons */
.k-grid .k-pager-nav {
width: 28px;
height: 28px;
border-radius: 4px;
border: 1px solid #E2E8F0;
background: #fff;
color: #64748B;
}
.k-grid .k-pager-nav:hover {
background: #F1F5F9;
border-color: #CBD5E1;
color: #334155;
}
.k-grid .k-pager-nav.k-state-disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Pager Info & Page Size */
.k-grid .k-pager-info {
color: #64748B;
font-size: 12px;
}
.k-grid .k-pager-sizes .k-dropdown {
width: 80px !important;
}
.k-grid .k-pager-sizes .k-dropdown-wrap {
height: 28px;
border: 1px solid #E2E8F0;
border-radius: 4px;
}
/* Grid Checkbox */
.k-grid .k-checkbox {
border-color: #CBD5E1;
border-radius: 3px;
}
.k-grid .k-checkbox:checked,
.k-grid .k-checkbox.k-checked {
background: #3B82F6;
border-color: #3B82F6;
}
/* Grid Group Header */
.k-grid .k-grouping-header {
background: #F8FAFC;
border: none;
border-bottom: 1px solid #E2E8F0;
padding: 8px 12px;
color: #64748B;
font-size: 12px;
}
.k-grid .k-group-indicator {
background: #E2E8F0;
border-radius: 4px;
padding: 4px 8px;
margin-right: 8px;
}
/* Grid Group Row */
.k-grid .k-grouping-row td {
background: #F8FAFC;
font-weight: 500;
color: #334155;
padding: 8px 12px;
border-bottom: 1px solid #E2E8F0;
}
.k-grid .k-grouping-row .k-icon {
margin-right: 8px;
}
/* Grid Resize Handle */
.k-grid .k-resize-handle {
background: transparent;
}
.k-grid .k-resize-handle:hover {
background: #3B82F6;
}
/* Grid Column Menu */
.k-grid .k-header .k-grid-column-menu {
color: #94A3B8;
}
.k-grid .k-header .k-grid-column-menu:hover {
color: #3B82F6;
}
/* Grid Filter Row */
.k-grid .k-filter-row th {
background: #FAFBFC;
padding: 4px 8px;
border-bottom: 1px solid #E2E8F0;
}
.k-grid .k-filter-row .k-filtercell .k-textbox,
.k-grid .k-filter-row .k-filtercell .k-dropdown {
height: 26px;
border: 1px solid #E2E8F0;
border-radius: 4px;
}
/* Grid No Records */
.k-grid .k-grid-norecords {
color: #94A3B8;
padding: 40px 20px;
text-align: center;
}
/* Grid 영역 패딩 */
.data-card .grid-list {
padding: 0;
}
.data-card #div_btn2_view {
/*padding: 0 20px 20px 20px;*/
}
/* Kendo Grid 기본 툴바 숨김 (커스텀 툴바 사용) */
.data-card .k-grid .k-grid-toolbar,
.section-body .k-grid .k-grid-toolbar,
.collapsible-section .k-grid .k-grid-toolbar {
display: none !important;
}
/* Section Body 내 Grid Toolbar 스타일 보완 */
.section-body .grid-toolbar {
padding: 8px 12px;
border-bottom: 1px solid var(--border-color);
background: #F8FAFC;
justify-content: space-between;
margin: 0;
display: flex;
align-items: center;
}
.section-body .grid-toolbar .grid-toolbar-right {
margin-left: auto;
}
/* Kendo Grid 그룹 헤더 스타일 개선 */
.k-grid .k-grouping-header {
background: #FAFBFC !important;
border: none !important;
border-bottom: 1px solid #E2E8F0 !important;
padding: 10px 16px !important;
min-height: 36px;
font-size: 12px;
color: #94A3B8;
}
/* 그리드 flex 레이아웃 - grouping 숨김 시 빈 공간 제거 */
.k-grid {
display: flex !important;
flex-direction: column !important;
}
.k-grid > .k-grid-content {
flex: 1 1 auto !important;
}
.k-grid .k-grouping-header .k-grouping-dropclue {
color: #94A3B8;
}
/* Grid에 테두리 추가 */
.data-card .k-grid {
border: 1px solid #E2E8F0 !important;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
/* Grid 헤더 스타일 보완 */
.k-grid .k-grid-header {
border-bottom: 2px solid #E2E8F0 !important;
}
/* Grid 푸터/페이저 라운드 처리 */
.k-grid .k-pager-wrap,
.k-grid .k-pager {
border-radius: 0 0 8px 8px;
}
/* 반응형 조정 */
@media (max-width: 1200px) {
div.filter-table {
grid-template-columns: repeat(2, 1fr);
}
/* 2열일 때 접힌 상태: 첫째줄(2개)만 표시 */
div.filter-table.collapsed .filter-cell:nth-child(n+3) {
display: none;
}
}
@media (max-width: 768px) {
div.filter-table {
grid-template-columns: 1fr;
}
/* 1열일 때 접힌 상태: 첫째줄(1개)만 표시 */
div.filter-table.collapsed .filter-cell:nth-child(n+2) {
display: none;
}
}
/* =============================================
Detail Screen Styles (상세화면 - Prototype)
============================================= */
/* Detail Header (상세화면 헤더) */
.detail-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 16px;
background: #fff;
border-radius: 8px;
margin: 12px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.detail-header .breadcrumb-nav {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.detail-header .breadcrumb-nav i {
color: #64748B;
font-size: 14px;
}
.detail-header .breadcrumb-nav a {
color: #3B82F6;
text-decoration: underline;
}
.detail-header .breadcrumb-nav span {
color: #64748B;
}
.detail-header .header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.detail-header .header-actions .header-icon {
padding: 8px;
color: #64748B;
cursor: pointer;
}
.detail-header .header-actions .header-icon:hover {
color: #3B82F6;
}
/* Collapsible Section (접을 수 있는 섹션) */
.collapsible-section {
background: #fff;
border-radius: 8px;
margin: 0 16px 8px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
overflow: hidden;
}
.section-header {
display: flex;
align-items: center;
padding: 2px 16px;
background: #F8FAFC;
border-bottom: 1px solid #E2E8F0;
cursor: pointer;
user-select: none;
}
.section-header:hover {
background: #F1F5F9;
}
.section-toggle {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #E2E8F0;
border-radius: 4px;
margin-right: 12px;
color: #64748B;
font-size: 12px;
transition: transform 0.2s;
}
.section-header.collapsed .section-toggle {
transform: rotate(-90deg);
}
.section-title {
font-size: 14px;
font-weight: 600;
color: #1E293B;
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.section-title .count {
color: #EF4444;
font-weight: 600;
}
.section-title .count-label {
color: #64748B;
font-weight: 400;
}
.section-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.section-info {
font-size: 13px;
color: #64748B;
font-weight: 500;
}
.section-amount {
font-size: 16px;
font-weight: 700;
color: #1E40AF;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 6px;
padding: 4px 12px;
min-width: 100px;
text-align: right;
display: inline-block;
}
.section-amount-unit {
font-size: 13px;
color: #64748B;
font-weight: 500;
}
.section-body {
padding: 16px;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.section-header.collapsed + .section-body {
max-height: 0;
padding: 0 16px;
overflow: hidden;
}
/* Info Table (기본정보 테이블) */
.info-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.info-table th {
width: 15%;
}
.info-table td {
width: 35%;
}
.info-table tr {
border-bottom: 1px solid #F1F5F9;
}
.info-table tr:last-child {
border-bottom: none;
}
.info-table th {
background: #F8FAFC;
color: #475569;
font-weight: 500;
font-size: 13px;
padding: 10px 12px;
text-align: left;
width: 140px;
white-space: nowrap;
border: 1px solid #E2E8F0;
}
.info-table th.required::after {
content: ' *';
color: #EF4444;
}
.info-table td {
padding: 0px 12px;
font-size: 13px;
background: #fff;
border: 1px solid #E2E8F0;
}
.info-table td input[type="text"],
.info-table td input[type="password"],
.info-table td input[type="number"],
.info-table td select,
.info-table td textarea {
width: 100%;
/*max-width: 300px;*/
padding: 6px 10px;
border: 1px solid #E2E8F0;
border-radius: 4px;
font-size: 13px;
box-sizing: border-box;
}
.info-table td input:focus,
.info-table td select:focus,
.info-table td textarea:focus {
outline: none;
border-color: #3B82F6;
}
.info-table td input[readonly],
.info-table td input.readonly {
background: #F8FAFC;
color: #64748B;
border-color: #E2E8F0;
}
/* Kendo ComboBox in info-table - filter-cell과 동일한 스타일 적용 */
.info-table td .k-combobox,
.info-table td .k-dropdown {
width: 100% !important;
max-width: 300px;
height: 32px !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
background: #fff !important;
box-shadow: none !important;
}
.info-table td .k-combobox .k-input-inner,
.info-table td .k-dropdown .k-input-inner {
height: 30px !important;
padding: 0 10px !important;
font-size: 13px !important;
line-height: 30px !important;
border: none !important;
background: transparent !important;
}
.info-table td .k-combobox.combo-readonly,
.info-table td .k-dropdown.combo-readonly {
background: #F8FAFC !important;
}
.info-table td .k-combobox .k-input-button,
.info-table td .k-dropdown .k-input-button {
height: 30px !important;
width: 28px !important;
border: none !important;
background: transparent !important;
border-left: 1px solid var(--border-color) !important;
border-radius: 0 !important;
}
.info-table td .k-combobox:hover,
.info-table td .k-dropdown:hover {
border-color: #CBD5E1 !important;
}
.info-table td .k-combobox:focus-within,
.info-table td .k-dropdown:focus-within {
border-color: var(--primary-color) !important;
box-shadow: none !important;
}
/* Grid Header in Section */
.section-body .grid-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding: 8px 0;
}
.section-body .grid-header .left-actions,
.section-body .grid-header .right-actions {
display: flex;
align-items: center;
gap: 8px;
}
.section-body .search-inline {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #E2E8F0;
border-radius: 4px;
padding: 0 10px;
height: 32px;
}
.section-body .search-inline input {
border: none;
outline: none;
font-size: 12px;
width: 150px;
background: transparent;
}
.section-body .search-inline i {
color: #94A3B8;
font-size: 12px;
}
/* Attachment List (첨부파일 목록) */
.attachment-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.attachment-item {
display: flex;
align-items: center;
padding: 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 6px;
gap: 12px;
}
.attachment-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 18px;
}
.attachment-icon.excel {
background: #ECFDF5;
color: #10B981;
}
.attachment-icon.pdf {
background: #FEF2F2;
color: #EF4444;
}
.attachment-icon.image {
background: #EFF6FF;
color: #3B82F6;
}
.attachment-icon.default {
background: #F1F5F9;
color: #64748B;
}
.attachment-info {
flex: 1;
}
.attachment-name {
font-size: 13px;
font-weight: 500;
color: #334155;
}
.attachment-size {
font-size: 11px;
color: #94A3B8;
}
.attachment-delete {
color: #EF4444;
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
}
.attachment-delete:hover {
background: #FEE2E2;
}
/* Button Variants */
.btn-warning {
background: #F59E0B;
color: #fff;
border: none;
}
.btn-warning:hover {
background: #D97706;
}
.btn-danger {
background: #EF4444;
color: #fff;
border: none;
}
.btn-danger:hover {
background: #DC2626;
}
/* Input with Icon (검색 버튼 포함 입력필드) */
.input-with-icon {
display: flex;
align-items: center;
gap: 4px;
}
.input-with-icon input {
flex: 1;
}
.input-with-icon .icon-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #F1F5F9;
border: 1px solid #E2E8F0;
border-radius: 4px;
color: #64748B;
cursor: pointer;
font-size: 12px;
}
.input-with-icon .icon-btn:hover {
background: #E2E8F0;
color: #334155;
}
/* Input Icon (입력필드 내 아이콘) */
.input-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #64748B;
cursor: pointer;
font-size: 14px;
flex-shrink: 0;
}
.input-icon:hover {
color: #3B82F6;
}
/* Checkbox Group (검색조건 체크박스 그룹) */
.checkbox-group {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 13px;
color: var(--text-primary);
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--primary-color);
}
/* Radio Group (검색조건 라디오 그룹) */
.radio-group {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.radio-label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 13px;
color: var(--text-primary);
}
.radio-label input[type="radio"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--primary-color);
}
/* =============================================
Kendo TileLayout 스크롤바 제거
============================================= */
.k-tilelayout .k-tilelayout-item-body {
overflow: hidden;
}
/* TileLayout 내부 Grid는 스크롤 허용 */
.k-tilelayout .k-tilelayout-item-body .k-grid {
overflow: auto;
}
/* =============================================
iframe 내부 페이지 스크롤 설정
============================================= */
/* iframe 내부 html - 높이 100% 설정 */
html.iframe-html {
height: 100%;
overflow: hidden;
}
/* iframe 내부 body - 콘텐츠가 넘칠 때만 스크롤 */
body.iframe-body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
padding: 0;
}
/* iframe 내부 콘텐츠 wrapper */
.iframe-content {
/* min-height: 100%;
padding-bottom: 20px;*/
}
/* =============================================
Multi Search Modal (멀티검색 팝업)
============================================= */
.multi-search-content {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.multi-search-input-wrapper {
position: relative;
border: 1px solid #E2E8F0;
border-radius: 6px;
overflow: hidden;
}
.multi-search-textarea {
width: 100%;
min-height: 180px;
padding: 12px;
padding-right: 70px;
border: none;
resize: vertical;
font-family: inherit;
font-size: 13px;
line-height: 1.5;
outline: none;
box-sizing: border-box;
}
.multi-search-textarea:focus {
outline: none;
}
.multi-search-input-wrapper:focus-within {
border-color: #3B82F6;
}
.multi-search-apply-btn {
position: absolute;
top: 8px;
right: 8px;
padding: 6px 16px;
font-size: 12px;
background: #3B82F6;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.multi-search-apply-btn:hover {
background: #2563EB;
}
.multi-search-hint {
color: #64748B;
font-size: 12px;
margin: 0;
padding-left: 4px;
}
/* =============================================
Kendo Window Modal (팝업 공통 스타일)
============================================= */
.k-window {
border-radius: 8px !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
border: 1px solid #E2E8F0 !important;
}
.k-window-titlebar {
background: #fff !important;
color: #1E293B !important;
border-bottom: 1px solid #E2E8F0 !important;
padding: 12px 16px !important;
border-radius: 8px 8px 0 0 !important;
}
.k-window-titlebar .k-window-title {
font-size: 16px !important;
font-weight: 600 !important;
}
.k-window-titlebar .k-window-actions {
margin: 0 !important;
}
.k-window-titlebar .k-window-action {
width: 32px !important;
height: 32px !important;
padding: 0 !important;
color: #64748B !important;
opacity: 1 !important;
border-radius: 4px !important;
}
.k-window-titlebar .k-window-action:hover {
background: #F1F5F9 !important;
color: #334155 !important;
}
.k-window-content {
padding: 0 !important;
background: #fff !important;
border-radius: 0 0 8px 8px !important;
}
/* 비-iframe 모달에서 daterangepicker가 팝업 위로 표시되도록 */
.daterangepicker {
z-index: 100001 !important;
}
/* =============================================
Modal 내부 콘텐츠 스타일 (사용자검색 등)
============================================= */
/* 모달 컨텐츠 영역
.modal-content-area {
padding: 16px;
}
*/
/* 모달 필터 영역 */
.modal-filter {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 16px;
padding: 16px;
background: #F8FAFC;
border-radius: 6px;
}
.modal-filter .filter-group {
display: flex;
align-items: center;
gap: 8px;
}
.modal-filter .filter-group label {
width: auto;
min-width: auto;
font-size: 13px;
color: #334155;
font-weight: 500;
}
.modal-filter .filter-group label.required::after {
content: ' *';
color: #EF4444;
margin-right: 2px;
}
.modal-filter .filter-group input[type="text"],
.modal-filter .filter-group select {
height: 32px;
padding: 0 10px;
border: 1px solid #E2E8F0;
border-radius: 6px;
font-size: 13px;
min-width: 120px;
}
.modal-filter .filter-group input[type="text"]:focus,
.modal-filter .filter-group select:focus {
outline: none;
border-color: #3B82F6;
}
.modal-filter .checkbox-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #64748B;
cursor: pointer;
}
.modal-filter .checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
/* 모달 데이터 헤더 */
.modal-data-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding: 0 16px;
}
.modal-data-header .data-title {
display: flex;
align-items: center;
gap: 8px;
}
.modal-data-header .data-title h4 {
font-size: 13px;
font-weight: 500;
color: #3B82F6;
margin: 0;
}
.modal-data-header .data-count {
font-size: 13px;
color: #64748B;
}
.modal-data-header .data-count span {
color: #EF4444;
font-weight: 600;
}
/* 모달 내 적용 버튼 */
.btn-apply {
background: #3B82F6;
color: #fff;
height: 32px;
border: none;
padding: 8px 20px;
border-radius: 6px;
font-size: 13px;
}
.btn-apply:hover {
background: #2563EB;
}
/* 모달 내 그리드 영역
.modal-grid-area {
padding: 0 16px 16px 16px;
}
*/
/* 모달 필터 내 Kendo ComboBox */
.modal-filter .k-combobox,
.modal-filter .k-dropdown {
height: 32px !important;
border: 1px solid #E2E8F0 !important;
border-radius: 6px !important;
background: #fff !important;
box-shadow: none !important;
}
.modal-filter .k-combobox .k-input-inner,
.modal-filter .k-dropdown .k-input-inner,
.modal-filter .k-combobox .k-input,
.modal-filter .k-dropdown .k-input {
height: 30px !important;
padding: 0 10px !important;
font-size: 13px !important;
line-height: 30px !important;
border: none !important;
background: transparent !important;
}
.modal-filter .k-combobox .k-input-button,
.modal-filter .k-dropdown .k-input-button,
.modal-filter .k-combobox .k-select,
.modal-filter .k-dropdown .k-select {
height: 30px !important;
width: 28px !important;
border: none !important;
background: transparent !important;
border-left: 1px solid #E2E8F0 !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 드롭다운 화살표 아이콘 */
.modal-filter .k-combobox .k-input-button .k-icon,
.modal-filter .k-dropdown .k-input-button .k-icon,
.modal-filter .k-combobox .k-select .k-icon,
.modal-filter .k-dropdown .k-select .k-icon,
.modal-filter .k-combobox .k-i-arrow-s,
.modal-filter .k-dropdown .k-i-arrow-s {
color: #64748B !important;
font-size: 14px !important;
}
/* Kendo ComboBox wrapper 스타일 */
.modal-filter .k-combobox .k-dropdown-wrap,
.modal-filter .k-dropdown .k-dropdown-wrap {
display: flex !important;
align-items: center !important;
border: none !important;
background: transparent !important;
height: 30px !important;
}
.modal-filter .k-combobox .k-dropdown-wrap .k-select,
.modal-filter .k-dropdown .k-dropdown-wrap .k-select {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 30px !important;
border-left: 1px solid #E2E8F0 !important;
background: transparent !important;
}
.modal-filter .k-combobox:hover,
.modal-filter .k-dropdown:hover {
border-color: #CBD5E1 !important;
}
.modal-filter .k-combobox:focus-within,
.modal-filter .k-dropdown:focus-within {
border-color: #3B82F6 !important;
box-shadow: none !important;
}
/* =============================================
Status Progress Card (진행상태 표시)
============================================= */
.status-progress-card {
background: #fff;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
}
.progress-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 16px;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.progress-step .step-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: #E2E8F0;
color: #64748B;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}
.progress-step.current .step-circle {
background: #3B82F6;
color: #fff;
}
.progress-step .step-label {
font-size: 12px;
color: #64748B;
font-weight: 500;
}
.progress-step.current .step-label {
color: #3B82F6;
font-weight: 600;
}
.progress-line {
width: 80px;
height: 2px;
background: #E2E8F0;
margin: 0 8px;
margin-bottom: 24px;
}
.status-badge {
text-align: center;
margin-bottom: 16px;
}
.badge {
display: inline-block;
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
}
.badge-warning {
background: #FEF3C7;
color: #D97706;
}
.badge-success {
background: #D1FAE5;
color: #059669;
}
.badge-primary {
background: #DBEAFE;
color: #2563EB;
}
.badge-danger {
background: #FEE2E2;
color: #DC2626;
}
.status-info-area {
display: flex;
justify-content: center;
gap: 40px;
}
.status-info-item {
text-align: center;
}
.status-info-item ul {
list-style: none;
padding: 0;
margin: 0;
}
.status-info-item ul li {
font-size: 12px;
color: #64748B;
margin-bottom: 4px;
}
/* Info Textarea (기타사항 등) */
.info-textarea {
width: 100%;
min-height: 150px;
padding: 12px;
border: 1px solid #E2E8F0;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
}
.info-textarea:focus {
outline: none;
border-color: #3B82F6;
}
.info-textarea:disabled {
background: #F8FAFC;
color: #64748B;
}
/* =============================================
Kendo UI Column Menu & Popup Styles
============================================= */
/* Kendo Popup Container */
.k-popup,
.k-animation-container {
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
border: 1px solid #E2E8F0 !important;
overflow: hidden !important;
}
/* Kendo DropDown / ComboBox / SelectBox - 선택 항목 스타일 */
.k-popup .k-list-item.k-selected,
.k-popup .k-list-optionlabel.k-selected,
.k-popup .k-item.k-state-selected {
background-color: #3B82F6 !important;
color: #fff !important;
}
.k-popup .k-list-item.k-selected:hover,
.k-popup .k-list-optionlabel.k-selected:hover,
.k-popup .k-item.k-state-selected:hover {
background-color: #2563EB !important;
color: #fff !important;
}
.k-popup .k-list-item:hover,
.k-popup .k-list-optionlabel:hover,
.k-popup .k-item:hover {
background-color: #F1F5F9 !important;
color: #1E293B !important;
}
/* Column Menu */
.k-column-menu,
.k-menu.k-menu-vertical {
background: #fff !important;
border: none !important;
padding: 8px 0 !important;
min-width: 200px !important;
}
/* Menu Items */
.k-menu .k-item,
.k-column-menu .k-item {
padding: 0 !important;
margin: 0 !important;
}
.k-menu .k-link,
.k-column-menu .k-link,
.k-menu-item > .k-link {
padding: 10px 16px !important;
font-size: 13px !important;
color: #334155 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
transition: background 0.15s ease !important;
border: none !important;
background: transparent !important;
}
.k-menu .k-link:hover,
.k-column-menu .k-link:hover,
.k-menu-item > .k-link:hover,
.k-menu .k-item.k-state-hover > .k-link,
.k-menu .k-item:hover > .k-link {
background: #F1F5F9 !important;
color: #1E293B !important;
}
/* Menu Icons */
.k-menu .k-icon,
.k-column-menu .k-icon,
.k-menu-item .k-icon {
color: #64748B !important;
font-size: 16px !important;
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.k-menu .k-i-sort-asc-sm::before,
.k-i-sort-asc::before {
content: "↑" !important;
font-family: inherit !important;
}
.k-menu .k-i-sort-desc-sm::before,
.k-i-sort-desc::before {
content: "↓" !important;
font-family: inherit !important;
}
/* Submenu Arrow */
.k-menu .k-i-arrow-e::before,
.k-menu .k-i-arrow-60-right::before {
content: "▸" !important;
font-family: inherit !important;
font-size: 10px !important;
}
/* Menu Separator */
.k-menu .k-separator,
.k-column-menu .k-separator {
margin: 4px 12px !important;
height: 1px !important;
background: #E2E8F0 !important;
border: none !important;
}
/* Submenu Popup */
.k-menu .k-group,
.k-menu .k-menu-group {
background: #fff !important;
border: 1px solid #E2E8F0 !important;
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
padding: 8px 0 !important;
min-width: 160px !important;
}
/* Column Chooser (Checkbox List) */
.k-column-menu .k-columns-item,
.k-columns-item {
padding: 0 !important;
}
/* Animation Container - 부모 컨테이너 클리핑 방지 */
.k-animation-container {
overflow: visible !important;
}
.k-column-menu .k-columns-item .k-child-animation-container,
.k-column-list-wrapper,
.k-child-animation-container {
overflow: visible !important;
}
/* Kendo Submenu Scroll - 서브메뉴 내부 스크롤 */
.k-menu .k-group,
.k-menu .k-menu-group,
.k-column-menu .k-group,
.k-columns-item .k-group,
.k-columns-item .k-menu-group {
max-height: calc(100vh - 200px) !important;
max-height: min(280px, calc(100vh - 200px)) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Submenu Animation Container - overflow visible */
.k-columns-item > .k-animation-container,
.k-menu-item > .k-animation-container,
.k-item.k-menu-item > .k-animation-container {
max-height: none !important;
overflow: visible !important;
}
/* Submenu UL scroll */
.k-columns-item .k-group > ul,
.k-columns-item .k-menu-group > ul,
.k-menu .k-group > ul {
max-height: calc(100vh - 220px) !important;
max-height: min(260px, calc(100vh - 220px)) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
.k-column-list {
padding: 8px 0 !important;
margin: 0 !important;
list-style: none !important;
max-height: calc(100vh - 220px) !important;
max-height: min(260px, calc(100vh - 220px)) !important;
overflow-y: auto !important;
}
.k-column-list-item {
padding: 8px 16px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 13px !important;
color: #334155 !important;
cursor: pointer !important;
transition: background 0.15s ease !important;
}
.k-column-list-item:hover {
background: #F1F5F9 !important;
}
/* Checkbox in Column Menu */
.k-column-list-item input[type="checkbox"],
.k-column-menu input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
accent-color: #F97316 !important;
cursor: pointer !important;
margin: 0 !important;
border-radius: 3px !important;
}
/* Column Menu Header Item */
.k-columnmenu-item {
padding: 10px 16px !important;
font-size: 13px !important;
color: #334155 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
cursor: pointer !important;
transition: background 0.15s ease !important;
}
.k-columnmenu-item:hover {
background: #F1F5F9 !important;
}
.k-columnmenu-item .k-icon {
color: #64748B !important;
font-size: 16px !important;
}
.k-columnmenu-item-content {
padding: 0 !important;
}
/* Filter Submenu */
.k-filter-menu {
padding: 16px !important;
}
.k-filter-menu .k-textbox,
.k-filter-menu .k-dropdown {
width: 100% !important;
margin-bottom: 8px !important;
}
.k-filter-menu .k-button {
margin-top: 8px !important;
}
/* Column Position Submenu */
.k-column-menu .k-set-column-position,
.k-set-column-position {
padding: 8px !important;
}
/* State Styles */
.k-menu .k-state-selected > .k-link,
.k-menu .k-item.k-selected > .k-link {
background: #EFF6FF !important;
color: var(--primary-color) !important;
}
.k-menu .k-state-focused > .k-link,
.k-menu .k-item.k-focus > .k-link {
box-shadow: none !important;
outline: none !important;
}
/* Kendo Grid Header Menu Button */
.k-grid .k-header-column-menu,
.k-grid .k-grid-header-menu {
color: #64748B !important;
opacity: 0.7;
transition: opacity 0.2s;
}
.k-grid .k-header-column-menu:hover,
.k-grid .k-grid-header-menu:hover,
.k-grid th:hover .k-header-column-menu,
.k-grid th:hover .k-grid-header-menu {
opacity: 1;
color: var(--primary-color) !important;
}
/* Context Menu Styling */
.k-context-menu {
background: #fff !important;
border: 1px solid #E2E8F0 !important;
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
padding: 8px 0 !important;
}
.k-context-menu .k-item {
padding: 0 !important;
}
.k-context-menu .k-link {
padding: 10px 16px !important;
font-size: 13px !important;
color: #334155 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.k-context-menu .k-link:hover {
background: #F1F5F9 !important;
}
/* Tooltip Popup */
.k-tooltip {
background: #1E293B !important;
color: #fff !important;
border-radius: 6px !important;
padding: 8px 12px !important;
font-size: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
border: none !important;
}
.k-tooltip .k-callout {
color: #1E293B !important;
}
/* Kendo Notification */
.k-notification {
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}
/* Scrollbar for Column List */
/* Scrollbar for Column List & Submenu */
.k-column-list-wrapper::-webkit-scrollbar,
.k-column-list::-webkit-scrollbar,
.k-menu .k-group::-webkit-scrollbar,
.k-menu .k-menu-group::-webkit-scrollbar,
.k-columns-item .k-group::-webkit-scrollbar {
width: 6px;
}
.k-column-list-wrapper::-webkit-scrollbar-track,
.k-column-list::-webkit-scrollbar-track,
.k-menu .k-group::-webkit-scrollbar-track,
.k-menu .k-menu-group::-webkit-scrollbar-track,
.k-columns-item .k-group::-webkit-scrollbar-track {
background: #F1F5F9;
border-radius: 3px;
}
.k-column-list-wrapper::-webkit-scrollbar-thumb,
.k-column-list::-webkit-scrollbar-thumb,
.k-menu .k-group::-webkit-scrollbar-thumb,
.k-menu .k-menu-group::-webkit-scrollbar-thumb,
.k-columns-item .k-group::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 3px;
}
.k-column-list-wrapper::-webkit-scrollbar-thumb:hover,
.k-column-list::-webkit-scrollbar-thumb:hover,
.k-menu .k-group::-webkit-scrollbar-thumb:hover,
.k-menu .k-menu-group::-webkit-scrollbar-thumb:hover,
.k-columns-item .k-group::-webkit-scrollbar-thumb:hover {
background: #94A3B8;
}
/* ========================================
Custom Layer Popup (Alert/Confirm)
======================================== */
/* Overlay backdrop */
.layer-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 100003;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Popup container */
.layer-popup {
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
min-width: 320px;
max-width: 480px;
overflow: hidden;
animation: slideIn 0.25s ease-out;
}
/* Popup header */
.layer-popup-header {
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color: #fff;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 10px;
}
.layer-popup-header.confirm {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}
.layer-popup-header i {
font-size: 20px;
}
.layer-popup-header .title {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.3px;
}
/* Popup content */
.layer-popup-content {
padding: 24px 20px;
font-size: 14px;
line-height: 1.6;
color: #334155;
word-break: keep-all;
}
/* Popup footer (buttons) */
.layer-popup-footer {
padding: 16px 20px;
background: #F8FAFC;
border-top: 1px solid #E2E8F0;
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Popup buttons */
.layer-popup-btn {
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: none;
outline: none;
}
.layer-popup-btn:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.layer-popup-btn.primary {
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color: #fff;
}
.layer-popup-btn.primary:hover {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.layer-popup-btn.secondary {
background: #fff;
color: #64748B;
border: 1px solid #E2E8F0;
}
.layer-popup-btn.secondary:hover {
background: #F1F5F9;
border-color: #CBD5E1;
}
.layer-popup-btn.confirm-yes {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
color: #fff;
}
.layer-popup-btn.confirm-yes:hover {
background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
/* ========================================
Modal Form Styles
======================================== */
.modal-form-area {
padding: 20px;
}
.form-group {
margin-bottom: 16px;
}
.form-group:last-child {
margin-bottom: 0;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: #334155;
margin-bottom: 8px;
}
.form-textarea {
width: 100%;
min-height: 150px;
padding: 12px 14px;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
color: #334155;
background: #fff;
resize: vertical;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.form-textarea:focus {
outline: none;
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-textarea::placeholder {
color: #94A3B8;
}
.modal-footer {
padding: 16px 20px;
background: #F8FAFC;
border-top: 1px solid #E2E8F0;
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* ========================================
Kendo Grid Selected Row Styles
======================================== */
/* 선택된 행 배경색 및 텍스트 색상 */
.k-grid tbody tr.k-selected,
.k-grid tbody tr.k-selected:hover,
.k-grid tbody tr.k-state-selected,
.k-grid tbody tr.k-state-selected:hover {
background-color: #EFF6FF !important;
}
.k-grid tbody tr.k-selected > td,
.k-grid tbody tr.k-selected:hover > td,
.k-grid tbody tr.k-state-selected > td,
.k-grid tbody tr.k-state-selected:hover > td,
.k-grid tbody tr.k-selected td,
.k-grid tbody tr.k-state-selected td {
background-color: #EFF6FF !important;
color: #1E40AF !important;
}
/* 선택된 행 내 링크 색상 */
.k-grid tbody tr.k-selected a,
.k-grid tbody tr.k-selected:hover a,
.k-grid tbody tr.k-state-selected a,
.k-grid tbody tr.k-state-selected:hover a {
color: #1E40AF !important;
}
/* 선택된 행 체크박스 셀 */
.k-grid tbody tr.k-selected td.k-checkbox-cell,
.k-grid tbody tr.k-selected:hover td.k-checkbox-cell,
.k-grid tbody tr.k-state-selected td.k-checkbox-cell {
background-color: #EFF6FF !important;
}
/* 포커스된 셀 스타일 */
.k-grid td.k-focused,
.k-grid td.k-state-focused,
.k-grid td:focus {
box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}
/* 다중 선택 시 행 스타일 (짝수/홀수 행) */
.k-grid tbody tr.k-selected.k-alt,
.k-grid tbody tr.k-selected.k-alt > td,
.k-grid tbody tr.k-state-selected.k-alt,
.k-grid tbody tr.k-state-selected.k-alt > td,
.k-grid tbody tr.k-alt.k-selected td,
.k-grid tbody tr.k-alt.k-state-selected td {
background-color: #DBEAFE !important;
color: #1E40AF !important;
}
/* 호버 시 행 스타일 (선택되지 않은 행) */
.k-grid tbody tr:hover:not(.k-selected):not(.k-state-selected) > td:not(.k-selected) {
background-color: #F8FAFC !important;
}
/* dragToSelect 셀 단위 선택 스타일 */
.k-grid tbody td.k-selected,
.k-grid tbody td.k-state-selected {
background-color: #EFF6FF !important;
color: #1E40AF !important;
}
.k-grid tbody tr:hover td.k-selected,
.k-grid tbody tr:hover td.k-state-selected {
background-color: #DBEAFE !important;
color: #1E40AF !important;
}
/* ========================================
Detail Card Styles (View/Detail Pages)
======================================== */
.detail-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 16px;
border: 1px solid #E2E8F0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 20px;
border-bottom: 1px solid #E2E8F0;
background: #F8FAFC;
border-radius: 8px 8px 0 0;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: #1E293B;
display: flex;
align-items: center;
gap: 8px;
}
.section-title i {
color: #3B82F6;
}
.section-actions {
display: flex;
gap: 8px;
align-items: center;
}
.section-toggle {
background: none;
border: none;
padding: 6px 10px;
cursor: pointer;
color: #64748B;
border-radius: 4px;
transition: all 0.2s;
}
.section-toggle:hover {
background: #E2E8F0;
color: #1E293B;
}
.section-content {
padding: 20px;
}
.contract-title {
font-size: 16px;
font-weight: 600;
color: #1E293B;
}
/* ========================================
Form Table Styles (Detail Pages)
======================================== */
.form-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #E2E8F0;
}
.form-table th,
.form-table td {
padding: 0 16px !important;
border: 1px solid #E2E8F0;
vertical-align: middle;
height: 40px !important;
max-height: 40px !important;
font-size: 13px;
line-height: 40px;
box-sizing: border-box;
}
.form-table th {
background: #F8FAFC;
color: #475569;
font-weight: 500;
text-align: left;
width: 150px;
white-space: nowrap;
}
.form-table td {
background: #fff;
}
.form-table input.form-control[readonly] {
background: #F8FAFC;
border-color: #E2E8F0;
color: #1E293B;
}
/* ========================================
Wizard Steps Styles (Contract Progress)
======================================== */
.wizard-wrapper {
padding: 24px 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.wizard-steps {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 0;
flex: 1;
}
.wizard-steps li {
flex: 1;
position: relative;
text-align: center;
padding: 12px 20px;
background: #F1F5F9;
color: #64748B;
font-size: 13px;
font-weight: 500;
transition: all 0.3s;
}
.wizard-steps li:first-child {
border-radius: 6px 0 0 6px;
}
.wizard-steps li:last-child {
border-radius: 0 6px 6px 0;
}
.wizard-steps li:not(:last-child)::after {
content: '';
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
border: 12px solid transparent;
border-left-color: #F1F5F9;
z-index: 1;
}
.wizard-steps li.current {
background: #3B82F6;
color: #fff;
}
.wizard-steps li.current::after {
border-left-color: #3B82F6;
}
.wizard-status {
display: flex;
gap: 8px;
}
.status-badge {
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
.status-badge.status-valid {
background: #DCFCE7;
color: #166534;
}
.status-badge.status-auto {
background: #E0F2FE;
color: #0369A1;
}
.status-badge.status-expired {
background: #FEE2E2;
color: #991B1B;
}
/* Wizard Info */
.wizard-info {
padding: 0 20px 20px;
}
.wizard-info-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 16px;
}
.wizard-info-list > li {
flex: 1;
background: #F8FAFC;
border-radius: 6px;
padding: 12px;
font-size: 12px;
color: #64748B;
}
.wizard-info-list ul {
list-style: none;
padding: 0;
margin: 4px 0;
}
.wizard-info-list ul li {
padding: 2px 0;
}
/* ========================================
Button Styles Extensions
======================================== */
.btn-danger {
background: #EF4444;
color: #fff;
border: 1px solid #EF4444;
}
.btn-danger:hover {
background: #DC2626;
border-color: #DC2626;
}
.btn-separator {
width: 1px;
height: 24px;
background: #E2E8F0;
margin: 0 8px;
}
/* ========================================
Tab Context Menu
======================================== */
.tab-context-menu {
display: none;
position: fixed;
z-index: 100001;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 160px;
padding: 6px 0;
}
.tab-context-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.tab-context-menu ul li {
padding: 10px 16px;
cursor: pointer;
font-size: 13px;
color: #333;
display: flex;
align-items: center;
gap: 10px;
transition: background-color 0.15s ease;
}
.tab-context-menu ul li:hover {
background-color: #f0f4f8;
}
.tab-context-menu ul li i {
color: #666;
width: 16px;
text-align: center;
}
.tab-context-menu ul li:hover i {
color: #005555;
}
.tab-context-menu ul li.ctx-divider {
height: 1px;
padding: 0;
margin: 4px 8px;
background: #E2E8F0;
cursor: default;
}
.tab-context-menu ul li.ctx-divider:hover {
background: #E2E8F0;
}
/* ========================================
Tab Drag & Drop Styles
======================================== */
.tab-list li {
cursor: grab;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.tab-list li:active {
cursor: grabbing;
}
.tab-list li.tab-dragging {
opacity: 0.5;
background: #e0e7ef;
}
.tab-list li.tab-drop-before {
border-left: 3px solid #005555;
margin-left: -3px;
}
.tab-list li.tab-drop-after {
border-right: 3px solid #005555;
margin-right: -3px;
}
.tab-list li[draggable="true"] {
user-select: none;
}
/* ============================================================
Dropzone 컴팩트 리스트 스타일
============================================================ */
/* 메인 컨테이너 */
.dropzone {
min-height: auto !important;
padding: 0 !important;
border: 1px solid #E2E8F0 !important;
border-radius: 8px !important;
background: #fff !important;
}
/* 드래그 메시지 영역 - 파일 없을 때 */
.dropzone .dz-message {
margin: 0 !important;
padding: 20px !important;
text-align: center;
color: #94A3B8;
font-size: 13px;
border-radius: 8px;
cursor: pointer;
}
/* 드래그 메시지 영역 - 파일 있을 때 (컴팩트) */
.dropzone.dz-started .dz-message {
display: block !important;
padding: 12px 16px !important;
border-bottom: 1px dashed #E2E8F0;
border-radius: 8px 8px 0 0;
background: #F8FAFC;
}
/* 업로드 아이콘 */
.dropzone .dz-message .dz-upload-icon {
font-size: 24px;
display: block;
margin-bottom: 6px;
color: #94A3B8;
}
.dropzone.dz-started .dz-message .dz-upload-icon {
display: inline;
font-size: 14px;
margin-bottom: 0;
margin-right: 6px;
}
/* 드래그 오버 효과 */
.dropzone.dz-drag-hover {
border-color: #3B82F6 !important;
}
.dropzone.dz-drag-hover .dz-message {
background: #EFF6FF !important;
color: #3B82F6;
}
.dropzone.dz-drag-hover .dz-message .dz-upload-icon {
color: #3B82F6;
}
/* ---- 파일 리스트 아이템 ---- */
.dropzone .dz-preview.dz-list-item {
display: flex !important;
align-items: center;
padding: 8px 16px;
margin: 0 !important;
min-height: auto !important;
border-bottom: 1px solid #F1F5F9;
background: #fff;
flex-wrap: wrap;
}
.dropzone .dz-preview.dz-list-item:last-child {
border-bottom: none;
border-radius: 0 0 8px 8px;
}
.dropzone .dz-preview.dz-list-item:hover {
background: #F8FAFC;
}
/* 파일 정보 영역 */
.dz-list-info {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
cursor: pointer;
}
/* 파일 아이콘 */
.dz-list-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #EFF6FF;
border-radius: 6px;
color: #3B82F6;
font-size: 14px;
flex-shrink: 0;
margin-right: 10px;
}
/* 파일 상세 (이름 + 크기) */
.dz-list-item .dz-details {
display: flex !important;
align-items: center;
gap: 10px;
position: static !important;
opacity: 1 !important;
padding: 0 !important;
min-width: 0;
font-size: 13px !important;
max-width: none !important;
z-index: auto !important;
color: inherit !important;
line-height: normal !important;
}
.dz-list-item .dz-filename {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #334155;
font-weight: 500;
font-size: 13px;
}
.dz-list-item .dz-filename span {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.dz-list-item .dz-size {
color: #94A3B8;
font-size: 12px !important;
white-space: nowrap;
flex-shrink: 0;
margin-bottom: 0 !important;
}
.dz-list-item .dz-size span {
background: transparent !important;
padding: 0 !important;
}
/* 액션 영역 */
.dz-list-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
margin-left: 12px;
}
/* 삭제 버튼 */
.dz-list-item .dz-remove.dz-remove-hidden {
display: none !important;
}
.dz-list-item .dz-remove {
display: flex !important;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 4px;
color: #94A3B8;
font-size: 13px;
text-decoration: none !important;
cursor: pointer;
transition: all 0.15s;
border: none;
}
.dz-list-item .dz-remove:hover {
background: #FEE2E2;
color: #EF4444;
text-decoration: none !important;
}
/* 진행률 바 */
.dz-list-item .dz-progress {
width: 60px;
height: 4px;
background: #E2E8F0;
border-radius: 2px;
overflow: hidden;
position: static !important;
opacity: 1 !important;
margin: 0 !important;
left: auto !important;
right: auto !important;
top: auto !important;
}
.dz-list-item .dz-upload {
display: block;
height: 100%;
background: #3B82F6;
border-radius: 2px;
transition: width 0.3s;
}
/* 성공/에러 마크 */
.dz-list-item .dz-success-mark,
.dz-list-item .dz-error-mark {
position: static !important;
display: none !important;
opacity: 1 !important;
-webkit-animation: none !important;
animation: none !important;
margin: 0;
width: auto;
height: auto;
}
.dz-list-item .dz-success-mark svg,
.dz-list-item .dz-error-mark svg {
display: none;
}
.dz-list-item.dz-success .dz-success-mark {
display: inline-flex !important;
color: #10B981;
font-size: 14px;
}
.dz-list-item.dz-success .dz-progress {
display: none !important;
}
.dz-list-item.dz-error .dz-error-mark {
display: inline-flex !important;
color: #EF4444;
font-size: 14px;
}
.dz-list-item.dz-error .dz-progress {
display: none !important;
}
/* 에러 메시지 */
.dz-list-item .dz-error-message {
position: static !important;
display: none;
width: 100%;
padding: 2px 0 0 42px;
font-size: 11px;
color: #EF4444;
background: transparent !important;
opacity: 1 !important;
}
.dz-list-item .dz-error-message::after {
display: none;
}
.dz-list-item.dz-error .dz-error-message {
display: block;
}
/* 이미지 썸네일 숨김 */
.dz-list-item .dz-image {
display: none !important;
}
/* 읽기전용 모드 */
.dropzone[style*="ebebeb"] .dz-message,
.dropzone[style*="ebebeb"] {
background: #F1F5F9 !important;
cursor: default;
}
input.input-plain {
border: none !important;
background: transparent !important;
outline: none;
box-shadow: none !important;
color: #475569;
}