/* 심플 리셋 CSS */
html, body, div, span, fieldset, form, label,
table, tbody, thead, tr, th, td, ul {margin: 0; padding: 0; border: 0; vertical-align: baseline;}
ol, ul {list-style: none;}
a {text-decoration: none; color: inherit;}
table {border-collapse: collapse; border-spacing: 0;}
button, input, select, textarea {margin: 0; padding: 0; border: none; background: none; font-family: inherit; color: inherit; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box;}
button {cursor: pointer; background-color: transparent;}
img {max-width: 100%; height: auto; display: block;}
.blind {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

*:focus-visible {border: none; outline: 2px solid #000; border-radius: 1px;}

/* 내부 스타일 */
#findsWrap {width: 100%; font-size: 12px;}

#condArea {padding: 20px 24px; background: #f6f6f6;}
#condArea .condSet + .condSet {margin-top: 12px;}
#condArea .condSet {display: flex;}
#condArea .condSet > span {display: flex; align-items: center; flex-basis: calc((100% - 40px)/ 3);}
#condArea .condSet.sel > span {flex-basis: unset;}
#condArea .condSet > span input {flex: 1 1 120px;}
#condArea .condSet > span:first-of-type input {flex: 1 0 120px;}
#condArea .condSet > span .selWrap {flex: 1 0 139px;}
#condArea .condSet > span label {width: 52px; margin-right: 10px; flex-shrink: 0;}
#condArea .condSet > span + span {margin-left: 20px; flex: 1;}
#condArea .condSet.sel > span + span {margin-left: 8px; flex: unset;}
#condArea .condSet .btn-search {margin-left: auto; height: 24px;}
#condArea .condSet .btn-search img {width: 100%; vertical-align: top;}

#condArea input, #condArea .selWrap button {border: 1px solid #d6d6d6; background: #fff; padding: 0 4px 0 8px; height: 24px; width: 100%; text-align: left;}
#condArea .selWrap button::after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 4px; width: 16px; height: 16px; background: url('/html/images/form/icon_dropdown.gif') no-repeat center center/cover;}
#condArea .selWrap button.on::after {transform: translateY(-50%) rotate(180deg);}
#condArea select {display: none;}
#condArea .selWrap {padding: 0; height: 100%; position: relative;}
#condArea .selWrap.disabled button {background: #ccced5; color: #666;}
#condArea #selBtn {width: 100%; height: 100%; padding: 0 4px 0 8px; text-align: left; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#condArea .selWrap {box-sizing: border-box;}
#condArea .selWrap > ul {display: none; flex-direction: column; position: absolute; top: 26px; min-width: 100%; width: auto; min-height: 26px; height: auto; max-height: 130px; overflow-y: auto; border: 1px solid #d6d6d6; background: #fff; box-sizing: border-box;}
#condArea .selWrap > ul.open {display: flex;}
#condArea .selWrap > ul li a {display: block; width: 100%; height: 26px; line-height: 14px; padding: 6px 10px; box-sizing: border-box; white-space: nowrap; position: relative;}
#condArea .selWrap > ul li.disabled a {background: #ccced5; color: #666; pointer-events: none; cursor: not-allowed;}
#condArea .selWrap > ul li a:hover {background: #f6f6f6;}
#condArea .selWrap > ul li a.cur-selected::after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 4px; width: 14px; height: 14px; background: url('/html/images/form/icon_select.gif') no-repeat center center/cover;}


#resultArea {margin-top: 30px; overflow-x: scroll; overflow-y: hidden; width: 100%; min-height: 200px;}
#resultArea table {width: 100%; min-width: 850px; border-top: 1px solid #9f9f9f; border-bottom: 1px solid #ccced5;}
#resultArea table tr th,
#resultArea table tr td {padding: 9px 5px 7px; text-align: center; line-height: 17px;}
#resultArea table tr th {font-weight: 700;}
#resultArea table thead {border-bottom: 1px solid #9f9f9f; background: #f6f6f6;}
#resultArea table tbody tr + tr {border-top: 1px solid #ccced5;}
#resultArea table tbody tr td {height: 34px; box-sizing: border-box;}
#resultArea table tbody tr.noData td {height: 100%; vertical-align: middle;}

#pagination {margin-top: 20px; display: flex; justify-content: center; align-items: center;}
#pagination > a {height: 13px;}
#pagination > a img {width: 100%; vertical-align: top;}
#pagination > a + a {margin-left: 4px;}
#pagination .btn-first, #pagination .btn-last {width: 17px;}
#pagination ul {display: flex; justify-content: center; align-items: center; margin: 0 10px;}
#pagination ul li {margin: 0 8px;}
#pagination ul li.on a {color: #de3513; font-weight: 700;}
#pagination ul li + li {margin-left: 10px;}

#btnWrap {margin-top: 20px; display: flex; justify-content: flex-end; align-items: center;}
#btnWrap a {display: block; width: 78px; height: 22px; box-sizing: border-box;}
#btnWrap a img {width: 100%; vertical-align: top;}
#btnWrap a + a {margin-left: 7px;}

/* Print Only */
@media print {
    @page {
        size:210mm 297mm;/* A4 규격 */
        margin: 20px;
    }
    * {print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    body {margin: 0; padding: 0; height: auto; box-sizing: border-box;}
    #bodyWrap {display: none !important;}
    #printArea {margin: 0; width: 100%; min-height: 200px; box-sizing: border-box;}
    #printArea table {width: 100%; border-top: 1px solid #9f9f9f; border-bottom: 1px solid #ccced5;}
    #printArea table tr th,
    #printArea table tr td {padding: 9px 5px 7px; text-align: center; line-height: 17px;}
    #printArea table tr th {font-weight: 700;}
    #printArea table thead {border-bottom: 1px solid #9f9f9f; background: #f6f6f6;}
    #printArea table tbody tr + tr {border-top: 1px solid #ccced5;}
    #printArea table tbody tr td {height: 34px; box-sizing: border-box;}
    #printArea table tbody tr.noData td {height: 100%; vertical-align: middle;}
}