@charset "utf-8";
@import "normalize.css";
@import "icons.css";
@import "themes.css";

/* 기본 스타일 정의 */
html, body { 
	font-family: "맑은 고딕", sans-serif ;
	font-size: 13px;
	color: var(--color-text); 
	background: var(--color-background) ;
	line-height: 1.4; 
	letter-spacing:  -0.04em; 
}
html { overflow-y:scroll }
a { background-color:transparent; text-decoration: none }
a:hover { outline-width:0; color:blue!important }
p {margin-bottom:8px}
button {border:1px solid #aaa; display:inline-block;padding:4px 8px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;border-radius:5px;margin-right:3px}
button:hover{color:#000;background-color:#ddd}
.button-x{padding:2px 4px;}
input{padding:4px;border:1px solid #ddd}
input:focus { outline: none;}
input[type=checkbox],input[type=radio]{width:16px;height:16px;position:relative;top:0px}
/*input[type=checkbox],input[type=radio]{width:20px;height:20px;position:relative;top:2px}*/
select{padding:5px 8px;border:1px solid #ddd}
select option {line-height: 30px;}

/*@media (orientation: landscape) {
  body {
    font-size: 14px;
  }
}

@media (orientation: portrait) { 
  body {
    font-size: 13px;
  }

  body::-webkit-scrollbar {
    width: 0;
    display: none;   /*세로모드에서 스크롤바 제거
  }
}*/

/* ==========================================================
    기본 추가 260629 hj
========================================================== */
  .ellipsis-input {
  width: 100%; /* 부모인 td 너비에 100% 꽉 맞춤 */
  box-sizing: border-box; /* 패딩, 테두리가 너비(100%)를 넘지 않도록 고정 */  
  /* 말줄임 필수 3세트 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 
.padding-84{padding:8px 4px;}
.padding-20{ padding:8px 20px !important;}
.inb-block{ display:inline-block} /*mobile480에서 block 임*/
.padding14-8{ padding:14px 16px;} /*mobile480에서는 padding:8px 임*/
.button-red:hover{background-color:#fdfcf6;}

/* ==========================================================
    버튼 스타일 정의 
========================================================== */
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;border-radius:10px;}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn:hover,.w3-button:hover{color:#000!important;background-color:#ccc!important}

.btn {display:flex; cursor:pointer; border:0; border-radius: 3px; background: var(--color-primary); color: var(--color-white); justify-content: center; align-items: center; padding:4px 8px; font-weight: 400; }
.btn.btn-light { border: 1px solid var(--color-border); background: var(--color-second); color: var(--color-text)}
.btn.btn-inline { display:inline }

/* 사이즈 */
.btn-sm { font-size: 12px }
.btn-lg { font-size: 16px; padding:7px 20px; font-weight: 600; border-radius: 5px }
/* ==========================================================
    w3 호환 코드
========================================================== */
.w3-row { display: flex; }
.w3-gap { gap: 5px }
.w3-row .w3-half { width: 50% }
.w3-padding{padding:8px 16px!important}
.w3-margin{margin:8px!important}
.w3-margin-top { margin-top:8px }
.w3-margin-bottom { margin-bottom:8px }
.w3-between { justify-content: space-between }
.w3-section{margin-top:16px!important;margin-bottom:16px!important}

.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-center {text-align:center!important}
.w3-left{float:left!important}
.w3-right{float:right!important}
.w3-border{border:1px solid #ccc!important}
.w3-hide{display:none!important}
.w3-show{display:block!important}
.w3-small{font-size:12px}
.w3-large{font-size:16px}

.w3-table-all{border-collapse:collapse;width:100%;border:1px solid var(--color-border); text-align:center}
.w3-table-all thead { background: var(--color-second); font-weight: 600; }
.w3-table-all td,.w3-table-all th{border: 1px solid var(--color-border)}

.w3-table{border-collapse:collapse;width:100%}
.w3-table thead { border-top: solid 1px var(--color-border) }
.w3-table tr{border-bottom:1px solid var(--color-border)}

.w3-table-all tbody tr:hover,.w3-table tbody tr:hover{ background-color: var(--color-second)!important; }
.w3-table-all td,.w3-table-all th,.w3-table td,.w3-table th{padding:8px 8px;vertical-align:middle;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

td.nowrap{max-width:50px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /** 한줄로 넘으면 clip or ellipsis**/
td.nowrap:hover{overflow:visible;}
td.nowrap2{max-width:80px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /** 한줄로 넘으면 clip or ellipsis**/
td.nowrap2:hover{overflow:visible;}
td.nowrap3{max-width:120px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /** 한줄로 넘으면 clip or ellipsis**/
td.nowrap2:hover{overflow:visible;}
.max100{max-width:100px;} .max50{max-width:50px;}

.inv-table{border-collapse:collapse;width:100%;border:1px solid #ccc; text-align:center; vertical-align:middle;} /* 품목전표,거래명세표 및 하단 합계 */
.inv-table th{background:#eee; padding:5px 8px;border:1px solid #ccc; font-weight:normal}
.inv-table td{padding:4px 4px;border: 1px solid #ccc; } /*padding:2px 8px;*/
.inv-table tbody tr:hover{ background-color: var(--color-second)!important; }

.td-left {text-align:left!important; padding-left:16px}
.td-right {text-align:right!important; padding-right:8px}
.link {cursor:pointer;}
.link:hover {color: var(--color-link)!important}

.table-cd tr,.table-cd td{padding:0px 0px;line-height:1.4; border:0px;} /* 대체전표의 기본 테이블 형식 */
.table-cd input {border: solid 1px #ccc; width:100%; padding:5px 10px 5px 5px;}/* 대체전표 입력 필드 */
.yg-input{padding:5px 2px;display:block;border:none;color:#2f2f2f; width:100%} /* 간격 좁고 테두리 없는 input - 엑셀불러오기에서 사용 */
.input-line{border:1px solid #ccc !important;} /* yg-input쓰고 라인이 필요할때 엑셀불러오기에서 사용 */
.input-trans{ background-color:transparent !important;} /* input 백그라운드 투명 */
/* ==========================================================
    HEADER
========================================================== */
.wrapper { max-width: 1500px; margin: 0 auto; }
/*
header#main-header { background: var(--color-primary); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25); height: 50px; position: fixed; width: 100%; left: 0; top: 0; }
*/
header#main-header { z-index:1; background: var(--color-primary); height: 50px; position: fixed; width: 100%; left: 0; top: 0; }
header#main-header .mobile-menu { display: none; }
header#main-header div.logo a { text-indent: -9999px; overflow: hidden; }
header#main-header .wrapper { display: flex; justify-content: space-between; align-items: center; }
header#main-header .wrapper .header-col1 { display: flex; height: 50px; align-items: center; }
header#main-header .wrapper .header-col1 div.logo { width: 250px; }
header#main-header .wrapper .header-col1 .menu { display: flex; align-self: end; }
header#main-header .wrapper .header-col1 .menu a { display: flex; width: 80px; height: 39px; flex-direction: column; justify-content: center; text-decoration: none; cursor: pointer; margin-right: 15px; color: var(--color-white); text-align: center; font-size: 16px; font-weight: 500; }
header#main-header .wrapper .header-col1 .menu a:hover,
header#main-header .wrapper .header-col1 .menu a.on { border-radius: 5px 5px 0 0; background: var(--color-white); color: var(--color-primary); }

header#main-header .wrapper .header-col2 { display: flex; align-items: center; height: 35px; padding: 4px 10px; justify-content: center; border-radius: 5px; background: var(--color-third); gap:10px }
header#main-header .wrapper .header-col2 .slogan { color: var(--color-white); font-size: 15px  }
header#main-header .wrapper .header-col2 .ssuname2 { color: rgba(255, 255, 255, 0.60); font-size: 15px;}

header#main-header .wrapper .header-col3 { display: flex; align-items: center; justify-content: center; color:#fff; gap:10px }

/*==========================================================
    LAYOUT
========================================================== */
#layout-main { background: var(--color-bg-main); margin-top: 50px; display: flex; justify-content: center;}
#layout-aside { background: var(--color-bg-aside); width: 260px; min-height: calc(100vh - 50px); padding: 25px 16px;}
#layout-contents { width: calc(100% - 200px); padding: 25px 10px;}
#scroll-to { position:fixed; right:20px; bottom:70px; display:none; flex-direction:column; gap:1px }
#scroll-to.show { display:flex }
#main #printArea { margin-top:5px }
.apprBox { display:none } /* 보고서 결재란: 화면에서는 숨김, 인쇄창(stylePrn.css만 로드)에서만 표시 (_apprBox.php 참고) */
.blur { filter: blur(2px); transition: filter 0.3s; box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.5); }
/* ==========================================================
    ASIDE (좌측 메뉴)
========================================================== */
select#master1, select#master2,
select#bksno1, select#bksno2 {
  background: var(--color-second);
  color: var(--color-text);
  text-align: center;
  width: 100%;
  padding: 7px 0;
}

ul.aside-menu-wrapper { margin: 20px 0 0; padding: 0; list-style: none }
ul.aside-menu-wrapper li { margin: 0; padding: 0; }
ul.aside-menu-wrapper li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 9px;
  border-left: 5px solid transparent;
  border-radius: 3px 0 0 3px;
  color: var(--color-text);
  font-weight: 600;
  
}
ul.aside-menu-wrapper.mobile li a { color: var(--color-white); }
ul.aside-menu-wrapper li:hover a,
ul.aside-menu-wrapper li a:hover,
ul.aside-menu-wrapper li a.on { background: var(--color-aside-hover); border-left-color: var(--color-left-bar); }
ul.aside-menu-wrapper li a .icon { font-weight:bold; font-size:16px; transform: none;}
ul.aside-menu-wrapper li a.on .icon { transform: rotate(-90deg); }

ul.aside-menu-wrapper.mobile li:hover a,
ul.aside-menu-wrapper.mobile li a:hover,
ul.aside-menu-wrapper.mobile li a.on { background: var(--color-aside-hover); border-left-color: var(--color-left-bar); color:var(--color-text);}
ul.aside-menu-wrapper ul.aside-submenu {
  margin: 0 0 0 5px;
  padding: 0 0 0 10px;
  background: var(--color-bg-aside-submenu);
  zborder-radius: 0 0 5px 5px;
  zlist-style: circle;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}
/* ul.aside-menu-wrapper.mobile ul.aside-submenu { background: var(--color-mobile-menu); } */
ul.aside-menu-wrapper.mobile ul.aside-submenu { background: var(--color-bg-aside-submenu); }
ul.aside-menu-wrapper ul.aside-submenu.show { max-height: 800px; }
ul.aside-menu-wrapper ul.aside-submenu li {
  list-style: inside;
  list-style-type: circle;
  display: list-item;
  align-items: center;
  cursor: pointer;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
  padding: 7px 0;
  width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   
  
}
ul.aside-menu-wrapper ul.aside-submenu li span { margin-right: 5px; }
ul.aside-menu-wrapper ul.aside-submenu .listsnone { list-style:none;}  /* 25.11.21 hj 추가*/
ul.aside-menu-wrapper.mobile ul.aside-submenu li { color: var(--color-text); }

/* ==========================================================
    우측 상단 검색 및 버튼
========================================================== */
#period-bar { display: flex; justify-content: space-between; margin-bottom: 20px; }
#period-bar .period { display: flex; }
#period-bar .period input { border-radius: 3px; border: 1px solid var(--color-black); text-align:center; padding:0px;} /* height: 24px;*/
/* PC 우측 상단 폼 입력 버튼 */
#period-bar .form-buttons { display: flex; }
#period-bar .form-buttons button { margin-left: 5px }
#period-bar .form-buttons button .icon { margin-right: 6px; }
/* 메인화면 제목 바 */ 
#subj-bar {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding: 8px 15px;border-radius:5px;background-color: var(--color-second-dark);}
#subj-bar #subj {color: var(--color-text); font-size: 15px; font-weight: 600; line-height: normal;}
/* 검색,인쇄,엑셀 */
#subj-bar #search {display: flex}
#subj-bar .search-input {display:flex; padding: 0px 5px; border-radius: 3px; border: 1px solid #9F9F9F; background: var(--color-white);}
#subj-bar .search-input input { width: 110px; border: none; }
#subj-bar .search-input button {border: 0; background: transparent; }

/* ==========================================================
    모바일 사이드 메뉴
========================================================== */
#dropMenu {
  position: fixed;
  z-index: 4; 
  top: 0;
  width: 280px;
  height: 100vh;
  padding: 15px;
  background: var(--color-primary);
  box-shadow: 6px 0 6px 0 rgba(0, 0, 0, 0.03);
  left: -320px;
  overflow-y: scroll;
}
#dropMenu.show { left: 0; transition: left .25s ease-in-out; }
#dropMenu .logo-mobile { margin-bottom: 15px; cursor: pointer; }
#dropMenu .top-buttons { display: flex; gap: 10px; }
#dropMenu .top-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  height: 30px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.50);
  background: var(--color-third);
}
#dropMenu #master,
#dropMenu #bksno {
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: var(--color-primary-dark);
  padding: 3px;
  height: 40px;
  color: var(--color-white);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}
#dropMenu #bksno { margin-bottom: 20px; }

/* ==========================================================
    모바일 하단 버튼 (앱버튼)
========================================================== */
#mobile-bottom-buttons {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 60px;
  border-top: 1px solid rgba(52, 58, 161, 0.30);
  background: #FAFAFF;
  padding: 0 10px;
  box-sizing: border-box;
} /* padding: 0 16px;*/
#mobile-bottom-buttons a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 25%;
  cursor: pointer;
  color: var(--color-primary);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}
#mobile-bottom-buttons a.on { border-top: 3px solid var(--color-primary); }
#mobile-bottom-buttons a span.icon { margin-bottom: 3px }

/* ==========================================================
    Todo Table
========================================================== */
#todo-year {
  display:flex;
  justify-content: center;
  gap: 40px;
  color: var(--color-text); /* 요기 #000;*/
  font-size: 24px;
  font-weight: 600;
}
#todo-list { display:flex; justify-content: space-between;}
#todo-list .todo-list { width:75% }
#todo-list .todo-next { width:25%;} 
.todo-table {
  border-collapse: separate;
  border-spacing: 5px;
  width: 100%;
  margin-bottom:5px;
}
.todo-table td {
  width: 33%;
  height:130px;
  vertical-align: baseline;
  padding: 5px;
 /* 요기   background: var(--color-background); --color-bg-aside #F5F5FA;*/
  border-radius: 5px 5px 0 0;
  border:1px solid #ccc;
}

.todo-table td span{ line-height:1.4; }

.todo-next .todo-table td {
  height:265px;
}	
.todo-table td button.todo-btn {
  margin: -5px -5px 5px -5px;
  width:calc(100% + 10px);
  padding:5px 0;
  border-radius: 5px 5px 0 0;
  border: 0;
  border-bottom: 1px solid #ccc;/*gray;  #343AA1;*/
  background: var(--color-bg-aside); /* --color-white) --color-aside-hover --color-second-dark 요기 #EBECFE; */
  color: var(--color-text);/* 요기 #000;*/
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.todo-table td button.todo-btn:hover{
  background: var(--color-aside-hover);	
}

#todoForm table th {
  font-weight: normal;
 /* width: 70px;*/
}
#todoForm table input[type="text"] {
  border: 1px solid #ccc;
  height:30px;
  /*padding:5px 10px;*/
  padding:4px 4px;  
}

/* ==========================================================
    팝업창 디자인 (기본)
========================================================== */
.w3-modal{z-index:3;display:none;padding-top:74px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.3)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative; padding:0;outline:0;}
.w3-modal-content .w3-table-all tbody tr:hover{ background-color: #eee!important; }
.w3-modal-content .w3-table tbody tr:hover{ background-color: #eee!important; }

.close-button { cursor: pointer; position: absolute; right: 15px; top: 12px; color:white}
.popup-bg {
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  background-color: rgba(0,0,0,.2);
}

.popup {
  border-radius: 5px 5px 5px 5px;
  background: var(--color-white);
  box-shadow: 5px 5px 10px black;
  width:100%;
  padding-bottom:15px;
}   /*  color: var(--color-black); padding: 8px 16px;*/

 .popup .popup-bordrap{ padding:6px;}  
 .popup-bordrap .form-des{ width:15%; margin-bottom:5px; }
 .popup-bordrap .form-desinput{ width:82.5%; margin-bottom:5px; } 
 .popup h3 {
  background-color: gray;
  padding: 10px 16px;
  border-radius: 5px 5px 0 0;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}  /*  margin: -20px -16px 10px -16px;*/

.popup h3 span { margin-right: 10px; }
.popup h4 {font-size: 15px;}
.popup-form .delbox{margin: 0px 5px 10px;}	
.popup-padding{ padding:8px 16px;}

.mobile-on{ display:none;}

/* ==========================================================
    폼 디자인
========================================================== */
form.popup-form { display:flex; flex-direction: column; padding:8px 16px;}
form.popup-form .row { display:flex;}
form.popup-form .row .col { display:flex; flex-direction: column; width:100%;}
form.popup-form .row .col-1-2 { display:flex; width:50%;}

form.popup-form label { display:flex; align-items: center; width:100%; margin:5px 5px 0px 5px}
form.popup-form label span {
  display:block;
  color: var(--color-black);
  text-align: justify;
  font-size:13px;
  height:30px;
  width:30%;
  padding: 5px 14px;
  margin-right:5px;
}    /*width:80px;*/

form.popup-form label span:after {
  content: '';
  display: inline-block;
  width: 100%;
}

form.popup-form .row .col select { width:40%;}
form.popup-form .row .col select,
form.popup-form .row .col input[type="text"] {
  border: 1px solid #ccc;
  height:30px;
  padding:5px 10px;
}

form.popup-form .row .col .input-22{ width:22%;}
form.popup-form .row .col .input-30{ width:30%;}
form.popup-form .row .col .input-65{ width:65%;}
form.popup-form .row .col .input-73{ width:73%;}

/*popup 추가일 때는 하단 추가내역 보여주기 리스트*/
.value-list{margin:auto; max-width:100%; min-height:140px; padding:8px 16px;}  /*min-height:160px;*/
.value-list .table-list{ width: 100%; padding: 0; line-height:1.4; table-layout:fixed; }
.value-list table th{ padding:5px 4px; line-height:1.2;}         
.value-list table td{ font-weight:normal; padding:6px 4px; line-height:1.2; word-break: break-all; white-space: normal; text-overflow: clip;  overflow: visible; letter-spacing:-1px;}
.value-list .table-list .table-th1{ width:26%;}
.value-list .table-list .table-th2{ width:10%;}
.value-list .table-list .table-th3{ width:9%;}
.value-list .table-list .table-th4{ width:13%;}
.value-list .table-list .table-th5{ width:14%;}
.value-list .table-list .table-th6{ width:12%;}
.value-list .table-list .table-th7{ width:11%;}
.value-list .table-list .table-th8{ width:5%;}

form.popup-form #ok{
  margin-top:20px;
  border-radius: 5px;
  color: #FFF;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  padding:7px 22px;
}    /*width:92px; height:33px;*/

/* 팝업폼: type0 (아래 전표 제외 대부분) */
.type0 h3, .type0 #ok, .type0 #cancel { background-color: var(--color-primary); } /* 메인색상 */
.type0 label span, .type0 th { background: var(--color-aside-hover); } /* 라벨,th - 연하게 */

/* 팝업폼: type1 (입출금) */
.type1 h3, .type1 #ok { background-color: var(--color-type1); } /* 타이틀바,확인-고동 */
.type1 label span, .type1 th { background: #E5DEDC; } /* 라벨,th - 연하게 */

/* 팝업폼: type2 (매입매출) */
.type2 h3, .type2 #ok { background-color: var(--color-type2); } /* 카키색 */
.type2 label span, .type2 th { background: #c4cec2; } 

/* 팝업폼: type3 (대체거래) */
.type3 h3, .type3 #ok { background-color: var(--color-type3); } /* 회색 */
.type3 label span, .type3 th { background: #CCC; } 

/* 팝업폼: type4 (품목거래) */
.type4 h3, .type4 #ok { background-color: var(--color-type4); } /* 연한 카키색 */
.type4 label span, .type4 th { background: #D9E5E4; } /* #bed0ce;*/
.type4 #addBtn { background: #bed0ce;border-radius: 5px; } 

/* 팝업폼: type4-1 (품목거래의 품목추가) */
.type4-1 h3 { background-color: #9e9e9e; } 
.type4-1 label span, .type4-1 th { background: #ccc} 
.type4-1 #addBtn2 {border-radius: 5px; } 

/* type5 (검색) */
.type5 h3 { color: var(--color-black); background-color: var(--color-white); border-bottom:1px solid #dddddd }

/* 거래명세표 팝업폼: */
.type6 h3 { background-color: teal; } 

/* 증빙 팝업폼 추가 260729 hj */
.text-justify { text-align: justify; text-justify: inter-character; text-align-last: justify;}

/* ==========================================================
    집계,보고서 디자인 추가 260630 hj
========================================================== */
.agg-list th{ word-break: break-all; white-space: normal;  overflow: visible; }         
.agg-list td{  word-break: break-all; white-space: normal;  overflow: visible;}
.agg-list-f2 th{ word-break: break-all; white-space: normal;  overflow: visible; }         
.agg-list-f2 td{ word-break: break-all; white-space: normal;  overflow: visible; }
.agg-list-f3 th{ word-break: break-all; white-space: normal;  overflow: visible; ;}         
.agg-list-f3 td{ word-break: break-all; white-space: normal; overflow: visible; }
.agg-list-f4 th{ word-break: break-all; white-space: normal;  overflow: visible; }       
.agg-list-f4 td{ word-break: break-all; white-space: normal;  overflow: visible; }
.Ledger-bar {display:flex;justify-content:space-between;align-items:center; padding: 4px 6px;border-radius:5px;}
.Ledger-bar .bar-search {display: flex}
.Ledger-bar .bar-search .bar-input {display:flex; padding: 0px 5px; border-radius: 3px; border: 1px solid #9F9F9F; background: var(--color-white);}
.Ledger-bar .bar-input input { width: 110px; border: none; }
.Ledger-bar .bar-input button {border: 0; background: transparent; }

.text-keep160{ min-width:160px; word-break: break-all !important; white-space: normal !important;  overflow: visible !important;}
.text-keep120{ min-width:120px; word-break: break-all !important; white-space: normal !important;  overflow: visible !important;}
.text-keep100{ min-width:100px; word-break: break-all !important; white-space: normal !important;  overflow: visible !important;}
.text-keep80{ min-width:80px; word-break: break-all !important; white-space: normal !important;  overflow: visible !important;}

/* ==========================================================
    반응형 디자인
   -----------------------------
   800 < web
   800 > mobile
========================================================== */
@media (max-width: 1200px) {
  header#main-header .wrapper { padding:0 10px; }
  .popup{ width:80%;} 	
}

@media (max-width: 980px) {
  body{font-size: 13px;}
  #period-bar { margin-bottom: 10px;}    	
  #period-bar .form-buttons { display:none }
  #mobile-bottom-buttons { display:flex }  
  .popup{ width:98%;}  
  form.popup-form .row .col select, form.popup-form .row .col input[type="text"] { padding:5px 2px;}
  #subj-bar { flex-direction: column; align-items: baseline; gap:2px }
  #subj-bar #subj { font-size: 14px;}   
  #subj-bar #search {margin-left: auto;}  
/*  #layout-contents { padding-bottom:100px; } */
 
  header#main-header .mobile-menu {
    display:flex;
    justify-content: center;
    align-items: center;
  }

  header#main-header .wrapper .header-col2,
  header#main-header .wrapper .header-col3 .payment,
  header#main-header .wrapper .header-col1 .menu {
    display:none;
  }   

  header#main-header .wrapper .header-col1 div.logo {
    width:auto;
  }

  #layout-main { padding-bottom: 70px; } /* 모바일 전표추가 자리 */
  #layout-aside { display: none } /* 사이드 감춤 */
  #layout-contents { width:100%; margin-left:0px; overflow:hidden; min-height: calc(100vh - 120px); } /* 메인자리 전체로 */
  
}

@media (max-width: 800px) {
  body{font-size: 13px;}
  ::-webkit-scrollbar { width: 0; display: none; } /*스크롤바 제거  */
    #period-bar { margin-bottom: 10px;}  
	
  #main {
    width:100%;
    overflow-x: auto;
    /*-webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤을 허용 (iOS) */
  }	
  form.popup-form .row { flex-wrap: wrap }
  form.popup-form .row .col-1-2 { width:100% }

  form.popup-form label span { font-size:12px;}
  form.popup-form #ok{ font-size:14px; margin-top:15px;}

  header#main-header .mobile-menu {
    display:flex;
    justify-content: center;
    align-items: center;
  }

  header#main-header .wrapper .header-col2,
  header#main-header .wrapper .header-col3 .payment,
  header#main-header .wrapper .header-col1 .menu {
    display:none;
  }   

  header#main-header .wrapper .header-col1 div.logo {
    width:auto;
  }

  #layout-main { padding-bottom: 70px; } /* 모바일 전표추가 자리 */
  #layout-aside { display: none } /* 사이드 감춤 */

  #mobile-bottom-buttons { display:flex }
  #subj-bar #search .hide-sm{ display:none }
  /*#subj-bar { flex-direction: row; align-items: baseline; gap:10px }*/  
  #subj-bar { flex-direction: column; align-items: baseline; gap:2px }
  #subj-bar #subj { font-size: 14px;}    
  #subj-bar #search {margin-left: auto;}  
  #subj-bar .search-input{ padding:0px 5px;} 
  .Ledger-bar .bar-search .bar-input{ padding:0px 5px;}   
  #period-box{ display:none }
  
  .hide-sm{ display:none } /* hide small */
  .popup{ width:98%; overflow-x: auto;}    
  form.popup-form .row .col select, form.popup-form .row .col input[type="text"] { padding:3px 2px;}    
  .popup h3 { font-size:14px;}
  .popup-bordrap .form-des{ width:30%;} 
  .popup-bordrap .form-desinput{ width:65%;} 
  .table-cd input { padding:3px 5px 3px 5px;}   
  .font-fs11{ font-size:12px !important;}   
  .font-fs10{ font-size:12px !important;}    
  .form-fs100{ font-size:100%;}  
  .agg-list th{ font-size:12px; padding:8px 6px;}   
  .agg-list td{ font-size:12px; padding:8px 6px;}    
  .agg-list-f2 th{ font-size:12px; padding:8px 6px;}   
  .agg-list-f2 td{ font-size:12px; padding:8px 6px;}     
  .agg-list-f3 th{ font-size:12px; padding:8px 6px;}   
  .agg-list-f3 td{ font-size:12px; padding:8px 6px;}     
  .agg-list-nowrap th{ font-size:12px; padding:8px 6px;} 
  .agg-list-nowrap td{ font-size:12px; padding:8px 6px;}            
  .drag{ position: fixed; top: 0; left: 0; width: 98%; overflow-y: auto; /* 🔄 내부 스크롤 허용 */ -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */ }  
  .button-x{padding:2px 2px;}
  .dis-no{ display:none;}  
  .hide-mb{display:none!important}    
}

@media (max-width: 480px) {
  body{font-size: 12px;} 
  #layout-contents { padding:15px 10px 75px;}  
  .w3-table-all td, .w3-table-all th{ font-size:12px; padding: 6px 4px;}
  #period-bar { margin-bottom: 10px;}    
  #period-bar .period-search .period { display:none }
  #period-bar .period-search button.hide-sm { display:none }
  #subj-bar #search .hide-sm{ display:none }
  /*#subj-bar { flex-direction: row; align-items: baseline; gap:10px }*/
  #subj-bar { flex-direction: column; align-items: baseline; gap:2px }
  #subj-bar #subj { font-size: 13px;}  
  #subj-bar #search {margin-left: auto;}    
  #subj-bar .search-input input {width: 90px;}
  .Ledger-bar .bar-input input{ width:80px;}  
  .popup{ width:98%; overflow-x: auto;}  
  form.popup-form .row .col select, form.popup-form .row .col input[type="text"] { padding:3px 2px; height:25px;}  
  .popup-2{ width:98% !important}
 .popup h3 { font-size:14px; overflow-x: auto;}  
 .popup h4 { font-size:14px; overflow-x: auto;}   
 .popup-bordrap .form-des{ width:30% } 
 .popup-bordrap .form-desinput{ width:65% } 
  form.popup-form label span { font-size:12px;}
  form.popup-form{ margin-bottom:15px; padding:10px 8px;}  
  form.popup-form #ok{ font-size:14px; margin-top:15px;} 
  .popup-padding{ padding:10px 6px;}
  .table-cd input { padding:3px 5px 3px 5px;} 
  .value-list{ padding:10px 8px;}
  .value-list table td{ padding:4px 2px;}    
  /*.value-list .table-list .table-th1{ width:23%;}
  .value-list .table-list .table-th2{ width:8%;}
  .value-list .table-list .table-th3{ width:12%;}
  .value-list .table-list .table-th4{ width:13%;}
  .value-list .table-list .table-th5{ width:15%;}
  .value-list .table-list .table-th6{ width:13%;}
  .value-list .table-list .table-th7{ width:10%;}
  .value-list .table-list .table-th8{ width:6%;} */ 
  .agg-list th{ font-size:11px; padding:6px 4px; line-height:1.2;}   
  .agg-list td{ font-size:11px; padding:6px 4px; line-height:1.2;}   
  .agg-list-f2 th{ font-size:11px; padding:6px 4px; line-height:1.2;}   
  .agg-list-f2 td{ font-size:11px; padding:6px 4px; line-height:1.2;}     
  .agg-list-f3 th{ font-size:12px; padding:6px 4px; line-height:1.2;}   
  .agg-list-f3 td{ font-size:12px; padding:6px 4px; line-height:1.2;}
  .agg-list-f4 th{ font-size:11px; padding:4px 4px; line-height:1.2;}   
  .agg-list-f4 td{ font-size:11px; padding:4px 4px; line-height:1.2;}       
  .agg-list-nowrap th{ font-size:12px; padding:6px 4px; line-height:1.2;} 
  .agg-list-nowrap td{ font-size:12px; padding:6px 4px; line-height:1.2;}      
  .font-fs12{ font-size:12px !important; font-weight:normal !important;}    
  .font-fs11{ font-size:11px !important; font-weight:normal !important;}   
  .font-fs115{ font-size:11.5px !important; font-weight:normal !important;}     
  .font-11{ font-size:11px !important;}     
  .font-fs10{ font-size:10px !important; font-weight:normal !important;}    
  .f-normal{ font-weight:normal}  
  .form-fs100{ font-size:100%}  
  .padding-20{ padding:8px 8px !important;}    
  .drag{ position: fixed; top: 0; left: 0; width: 98%; overflow-y: auto; /* 🔄 내부 스크롤 허용 */   -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */ }
  .drag.he-dvh{ height:90dvh; }
  .button-x{padding:2px 0px;}
  .dis-no{ display:none;} /*테이블 라인 숨김처리..차후 노출할 경우를 위해 별도로 만듬*/
  .hide-mb{display:none!important} /*원장의 복사, 인쇄 버튼 숨김...차후 노출할 경우를 위해 별도로 만듬*/
  .inb-block{ display:block}
  .padding14-8{ padding:10px 8px;}  
  #todo-year { font-size:18px;}   
  #todo-list { flex-direction: column;}
  #todo-list .todo-list { width:100% }
  #todo-list .todo-next { width:100%;}  
 /* .todo-table{ border-collapse: collapse; }*/
  .todo-table td button.todo-btn{ font-size:12px; font-weight:normal;}
 /* .todo-table td{ width:100%; display:block; margin-bottom:8px;}*/
 /* .todo-table td span{ font-size:13px; line-height:1.5; }*/
  #mobile-bottom-buttons a { font-size: 13px;} 
  .mobile-block{ display:block;}
  .mobile-on{ display:block;}
}

/* ==== Drag 창 ========================================= */
.drag {
	position:absolute; 
	z-index:4; 
	top:50%; left:50%; 
	transform: translate(-50%, -50%);
}
.dragHeader {z-index:5; cursor:move;}