@charset "UTF-8";
/*
    theme.css
    역할 : 화면 테마 (색/글꼴/모서리/간격). 기존 클래스를 덮어써서 화면 JSP 수정 없이 적용한다.
    로드 순서 : 레이아웃(defaultLayout / popupLayout)에서 다른 CSS 를 모두 불러온 뒤 마지막에 불러온다.
    색은 아래 변수만 바꾸면 전체가 따라간다.
*/

:root {
    /* 기본 색 */
    --t-bg          : #FFFFFF;
    --t-panel       : #FFFFFF;
    --t-sub         : #F6F7F9;   /* 표 머리, 라벨 칸 */
    --t-line        : #DFE2E7;   /* 바깥 테두리 */
    --t-line-soft   : #ECEEF1;   /* 안쪽 구분선 */
    --t-input-line  : #CDD1D8;
    --t-text        : #1B1E24;
    --t-text-2      : #3A404A;
    --t-muted       : #5F6672;
    --t-faint       : #8A919C;

    /* 포인트 */
    --t-primary       : #1E3A5F;
    --t-primary-hover : #16304F;
    --t-primary-soft  : #E8EDF4;
    --t-danger        : #A3352B;
    --t-ok            : #23593F;
    --t-wait          : #6F4E12;
    --t-excel         : #1D6F42;
    --t-excel-hover   : #185C37;

    /* 사이드바 */
    --t-sb-bg     : #17191E;
    --t-sb-line   : #262A31;
    --t-sb-text   : #A9AFBA;
    --t-sb-active : #262A31;

    /* 모양 */
    --t-radius    : 2px;
    --t-btn-h     : 30px;
    --t-font      : "Pretendard Variable", "Pretendard", "맑은 고딕", "Malgun Gothic", AppleGothic, sans-serif;

    /* sidebar-menu.css 변수 덮어쓰기 */
    --sb-bg         : var(--t-sb-bg);
    --sb-footer-bg  : var(--t-sb-bg);
    --sb-border     : var(--t-sb-line);
    --sb-text       : var(--t-sb-text);
    --sb-hover-bg   : #20242A;
    --sb-active-bg  : var(--t-sb-active);
    --sb-sub-bg     : #131519;
    --sb-accent     : var(--t-sb-active);
    --sb-fo-radius  : var(--t-radius);
    --sb-fo-hover-bg: var(--t-primary-soft);

    /* layout.css 변수 */
    --bg            : var(--t-sb-bg);
}

/* ============================================================
   글꼴 - 둥근 글꼴(ChironGoRound) 대신 Pretendard, 숫자는 폭 고정
   ============================================================ */
html, body, input, select, textarea, button, table, .tui-grid-container {
    font-family: var(--t-font);
}
body {
    color: var(--t-text);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   레이아웃 - 둥근 흰 카드 대신 사이드바 옆에 붙은 평면
   ============================================================ */
.inner_wrap {
    margin: 0 0 0 var(--sb-width);
    border-radius: 0;
    background: var(--t-bg);
}
.collapsed .inner_wrap,
.sidebar-collapsed ~ .inner_wrap {
    margin-left: var(--sb-collapsed-w);
}
.main_wrap {
    margin: 0;
    padding: 22px 20px 0 24px;
}
.inner_wrap .main .inner .navi_area {
    padding: 0;
    margin-bottom: 4px;
}
.inner_wrap .main .inner .navi_area .title,
h1.title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--t-text);
}
.inner_wrap .main .inner .navi_area .menu_navi,
.inner_wrap .main .inner .navi_area .menu_navi a {
    color: var(--t-faint);
}

/* 사이드바: 둥근 알약 모양 선택 표시를 각진 면으로 */
.sb-link:hover::before,
.sb-link:focus::before,
.sb-item.is-active > .sb-link::before {
    inset: 3px 8px;
    border-radius: var(--t-radius);
}
.sb-item.is-active > .sb-link {
    font-weight: 600;
}

/* ============================================================
   입력
   ============================================================ */
input, select, textarea {
    color: var(--t-text);
    border-color: var(--t-input-line);
    border-radius: var(--t-radius);
}
input, select {
    height: var(--t-btn-h);
    line-height: normal;
    font-size: 12.5px;
}
input[type=checkbox], input[type=radio] {
    height: auto;
    accent-color: var(--t-primary);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 2px var(--t-primary-soft);
}
input[readonly], input:disabled, select:disabled {
    background-color: var(--t-sub);
    color: var(--t-muted);
}

/* select: 브라우저 기본 화살표 대신 안쪽으로 여백을 둔 화살표 (목록형 select[multiple]/[size] 는 그대로) */
select:not([multiple]):not([size]),
select[size="1"],
table.search-tb select:not([multiple]):not([size]),
table.search-small-tb select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 28px 0 9px;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F6672' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
    cursor: pointer;
}
select:not([multiple]):not([size]):disabled,
select[size="1"]:disabled {
    background-color: var(--t-sub);
    cursor: default;
}
select::-ms-expand {
    display: none;
}

/* ------------------------------------------------------------
   검색 select (select2) - 일반 select 와 같은 모양으로
   기본 화면은 3.5 (js/select2-3.5.1), 일부 팝업은 4.0 (js/jquery/select2.min.js, 본문에서 늦게 불러와 html 을 붙여 우선)
   ------------------------------------------------------------ */
.select2-container,
.select2-drop,
.select2-dropdown,
.select2-search input,
.select2-search__field {
    font-family: var(--t-font);
    font-size: 12.5px;
}
.select2-container {
    vertical-align: middle;
}

/* 3.5 단일 선택 */
.select2-container .select2-choice {
    height: var(--t-btn-h);
    line-height: calc(var(--t-btn-h) - 2px);
    padding: 0 0 0 9px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    background: #FFFFFF;
    color: var(--t-text);
    box-shadow: none;
}
.select2-container .select2-choice > .select2-chosen {
    margin-right: 28px;
}
.select2-container.select2-allowclear .select2-choice .select2-chosen {
    margin-right: 46px;
}
.select2-container .select2-choice .select2-default,
.select2-container .select2-choice.select2-default {
    color: var(--t-faint);
}
.select2-container .select2-choice .select2-arrow {
    width: 28px;
    border: 0;
    background: none;
}
.select2-container .select2-choice .select2-arrow b {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F6672' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 8px center / 10px 6px;
    transition: transform .15s;
}
.select2-dropdown-open .select2-choice .select2-arrow b {
    transform: rotate(180deg);
}
/* 선택 지우기(x) */
.select2-container .select2-choice abbr {
    right: 28px;
    top: 50%;
    margin-top: -6px;
    opacity: .55;
}
.select2-container .select2-choice abbr:hover {
    opacity: 1;
}
.select2-container-active .select2-choice,
.select2-dropdown-open .select2-choice,
.select2-container-active .select2-choices,
.select2-dropdown-open.select2-container-multi .select2-choices {
    border-color: var(--t-primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 2px var(--t-primary-soft);
}
.select2-dropdown-open.select2-drop-above .select2-choice {
    border-radius: var(--t-radius);
    background: #FFFFFF;
}
.select2-container.select2-container-disabled .select2-choice {
    background-color: var(--t-sub);
    border-color: var(--t-input-line);
    color: var(--t-muted);
}
.select2-container.select2-container-disabled .select2-choice .select2-arrow b {
    opacity: .5;
}

/* 3.5 여러 개 선택 */
.select2-container-multi .select2-choices {
    min-height: var(--t-btn-h);
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    background: #FFFFFF;
}
.select2-container-multi .select2-choices .select2-search-choice {
    margin: 4px 0 3px 4px;
    padding: 3px 7px 3px 20px;
    line-height: 15px;
    border: 1px solid #C9D3E1;
    border-radius: var(--t-radius);
    background: var(--t-primary-soft);
    color: var(--t-text);
    box-shadow: none;
}
.select2-container-multi .select2-choices .select2-search-field input {
    height: 26px;
    padding: 0 6px;
    font-family: var(--t-font);
    color: var(--t-text);
}

/* 3.5 펼친 목록 */
.select2-drop,
.select2-drop.select2-drop-active,
.select2-drop.select2-drop-above,
.select2-drop.select2-drop-above.select2-drop-active {
    margin-top: 2px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: #FFFFFF;
    color: var(--t-text);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
}
.select2-drop.select2-drop-above {
    margin-top: -2px;
}
.select2-search {
    padding: 6px 6px 2px;
}
.select2-search input,
.select2-search input.select2-active {
    min-height: 28px;
    padding: 0 26px 0 8px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.8' fill='none' stroke='%238A919C' stroke-width='1.6'/%3E%3Cpath d='M10.6 10.6L14 14' stroke='%238A919C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center / 13px 13px;
    color: var(--t-text);
}
.select2-search input:focus {
    border-color: var(--t-primary);
    box-shadow: 0 0 0 2px var(--t-primary-soft);
}
.select2-results {
    max-height: 260px;
    margin: 4px 4px 4px 0;
}
.select2-results .select2-result-label {
    padding: 6px 8px;
    line-height: 1.4;
}
.select2-results .select2-highlighted {
    background: var(--t-primary-soft);
    color: var(--t-text);
}
.select2-results .select2-match {
    text-decoration: none;
    color: var(--t-primary);
    font-weight: 700;
}
.select2-results li em {
    background: transparent;
    color: var(--t-primary);
    font-weight: 700;
}
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
    padding: 8px;
    background: #FFFFFF;
    color: var(--t-faint);
}

/* 4.0 단일/여러 개 선택 */
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple {
    min-height: var(--t-btn-h);
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    background: #FFFFFF;
}
html .select2-container--default .select2-selection--single {
    height: var(--t-btn-h);
}
html .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 28px 0 9px;
    line-height: calc(var(--t-btn-h) - 2px);
    color: var(--t-text);
}
html .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--t-faint);
}
html .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 6px;
    color: var(--t-faint);
    font-weight: 400;
}
html .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0;
    width: 28px;
    height: calc(var(--t-btn-h) - 2px);
}
html .select2-container--default .select2-selection--single .select2-selection__arrow b,
html .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    left: 8px;
    width: 10px;
    height: 6px;
    margin: -3px 0 0;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F6672' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 6px;
    transition: transform .15s;
}
html .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg);
}
html .select2-container--default.select2-container--focus .select2-selection--single,
html .select2-container--default.select2-container--open .select2-selection--single,
html .select2-container--default.select2-container--focus .select2-selection--multiple,
html .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--t-primary);
    border-radius: var(--t-radius);
    box-shadow: 0 0 0 2px var(--t-primary-soft);
}
html .select2-container--default.select2-container--disabled .select2-selection--single,
html .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--t-sub);
}
html .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 4px;
    padding: 0 7px;
    line-height: 20px;
    border: 1px solid #C9D3E1;
    border-radius: var(--t-radius);
    background: var(--t-primary-soft);
    color: var(--t-text);
}
html .select2-dropdown {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
}
html .select2-container--open .select2-dropdown--below {
    margin-top: 2px;
    border-top: 1px solid var(--t-line);
    border-radius: var(--t-radius);
}
html .select2-container--open .select2-dropdown--above {
    margin-top: -2px;
    border-bottom: 1px solid var(--t-line);
    border-radius: var(--t-radius);
}
html .select2-search--dropdown {
    padding: 6px 6px 2px;
}
html .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 28px;
    padding: 0 26px 0 8px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.8' fill='none' stroke='%238A919C' stroke-width='1.6'/%3E%3Cpath d='M10.6 10.6L14 14' stroke='%238A919C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center / 13px 13px;
    outline: none;
}
html .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--t-primary);
    box-shadow: 0 0 0 2px var(--t-primary-soft);
}
html .select2-container--default .select2-results > .select2-results__options {
    max-height: 260px;
    padding: 4px;
}
html .select2-results__option {
    padding: 6px 8px;
    line-height: 1.4;
}
html .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--t-sub);
    font-weight: 600;
}
html .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--t-primary-soft);
    color: var(--t-text);
}

/* ============================================================
   버튼 - 기본은 흰 바탕 보조 버튼, 주 버튼은 네이비 하나
   ============================================================ */
button,
#body .btn-area-search > button,
#body .btn-area-search > button.defaultBtn {
    height: var(--t-btn-h);
    line-height: calc(var(--t-btn-h) - 2px);
    padding: 0 14px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    background: #FFFFFF;
    color: var(--t-text);
    font-size: 12.5px;
    transition: background-color .15s, border-color .15s;
}
button:hover,
button.defaultBtn:hover {
    background: var(--t-sub);
    border-color: #B9BFC8;
}
button:disabled,
button:disabled:hover {
    background: var(--t-sub);
    border-color: var(--t-line);
    color: #9AA0A9;
    cursor: default;
}

/* 주 버튼: 저장(blueBtn), 조회. 한 버튼 줄에 주 버튼은 조회 하나만 */
button.blueBtn,
.btnBlue, .btnSky,
#body .btn-area-search > button.blueBtn,
.btn-area-search > button[onclick^="reqSer(0)"] {
    background: var(--t-primary);
    border-color: var(--t-primary);
    color: #FFFFFF;
    font-weight: 600;
}
button.blueBtn:hover,
.btnBlue:hover, .btnSky:hover,
.btn-area-search > button[onclick^="reqSer(0)"]:hover {
    background: var(--t-primary-hover);
    border-color: var(--t-primary-hover);
}

/* 합계조회(reqSer(1))는 조회 옆이라 보조 버튼으로 */
.btn-area-search > button[onclick^="reqSer(1)"],
#body .btn-area-search > button.blueBtn[onclick^="reqSer(1)"] {
    background: #FFFFFF;
    border-color: var(--t-input-line);
    color: var(--t-text);
    font-weight: 400;
}
.btn-area-search > button[onclick^="reqSer(1)"]:hover {
    background: var(--t-sub);
    border-color: #B9BFC8;
}

/* 엑셀: 녹색 + 엑셀 아이콘
   class="excelBtn" 이 없는 엑셀 버튼도 많아 onclick 함수 이름으로 함께 잡는다.
   PaymentAgencyForm 의 다운로드(reqDownload)는 excelBtn 이지만 txt 파일이라 제외 */
button.excelBtn:not([onclick^="reqDownload"]),
button[onclick*="Excel"],
button[onclick*="excel"],
button[onclick^="reqSerEx"],
button[onclick^="reqTIDSerEx"],
#body .btn-area-search > button.excelBtn:not([onclick^="reqDownload"]),
#body .btn-area-search > button[onclick*="Excel"],
#body .btn-area-search > button[onclick*="excel"],
#body .btn-area-search > button[onclick^="reqSerEx"],
#body .btn-area-search > button[onclick^="reqTIDSerEx"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    vertical-align: middle;
    background: var(--t-excel);
    border-color: var(--t-excel);
    color: #FFFFFF;
    font-weight: 600;
}
button.excelBtn:not([onclick^="reqDownload"]):hover,
button[onclick*="Excel"]:hover,
button[onclick*="excel"]:hover,
button[onclick^="reqSerEx"]:hover,
button[onclick^="reqTIDSerEx"]:hover,
#body .btn-area-search > button.excelBtn:not([onclick^="reqDownload"]):hover,
#body .btn-area-search > button[onclick*="Excel"]:hover,
#body .btn-area-search > button[onclick*="excel"]:hover,
#body .btn-area-search > button[onclick^="reqSerEx"]:hover,
#body .btn-area-search > button[onclick^="reqTIDSerEx"]:hover {
    background: var(--t-excel-hover);
    border-color: var(--t-excel-hover);
}
button.excelBtn:not([onclick^="reqDownload"])::before,
button[onclick*="Excel"]::before,
button[onclick*="excel"]::before,
button[onclick^="reqSerEx"]::before,
button[onclick^="reqTIDSerEx"]::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='2' fill='%23fff'/%3E%3Cpath d='M5.2 4.6l5.6 6.8M10.8 4.6l-5.6 6.8' stroke='%231D6F42' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
/* 다운로드 중(disabled)에는 회색 바탕 */
button.excelBtn:not([onclick^="reqDownload"]):disabled,
button[onclick*="Excel"]:disabled,
button[onclick*="excel"]:disabled,
#body .btn-area-search > button.excelBtn:not([onclick^="reqDownload"]):disabled,
#body .btn-area-search > button[onclick*="Excel"]:disabled,
#body .btn-area-search > button[onclick*="excel"]:disabled {
    background: var(--t-sub);
    border-color: var(--t-line);
    color: #9AA0A9;
}
/* txt 다운로드는 일반 보조 버튼 */
button.excelBtn[onclick^="reqDownload"],
#body .btn-area-search > button.excelBtn[onclick^="reqDownload"] {
    background: #FFFFFF;
    border-color: var(--t-input-line);
    color: var(--t-text);
}
button.excelBtn[onclick^="reqDownload"]:hover {
    background: var(--t-sub);
}

/* 삭제/위험 */
button.small_red,
button[name="btnDel"] {
    background: #FFFFFF;
    border-color: var(--t-danger);
    color: var(--t-danger);
}
button.small_red:hover,
button[name="btnDel"]:hover {
    background: #F7E8E6;
}

/* 그리드 안 작은 버튼 (수정, 매출전표 등) */
button.small,
button.small_white,
button.small_red {
    height: 24px;
    line-height: 22px;
    padding: 0 9px;
    font-size: 12px;
    border-radius: var(--t-radius);
}
button.small,
button.small_white {
    background: #FFFFFF;
    border-color: var(--t-input-line);
    color: var(--t-text);
}
button.small:hover,
button.small_white:hover {
    background: var(--t-sub);
    border-color: #B9BFC8;
}

/* 버튼 줄 */
.btn-area-search {
    margin: 12px 0;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;        /* 창이 좁으면 다음 줄로 */
}

/* ============================================================
   검색 조건 (table.search-tb) - 왼쪽 라벨 칸 + 오른쪽 입력 칸
   ============================================================ */
/* 창이 좁으면 표만 가로 스크롤 (js/common/ui-layout.js 가 표를 .t-scroll 로 감싼다) */
.t-scroll {
    max-width: 100%;
    overflow-x: auto;
    margin: 12px 0 0 0;
}
.t-scroll > table.search-tb,
.t-scroll > table.search-small-tb {
    margin: 0;
}
table.search-tb,
table.search-small-tb {
    margin: 12px 0 0 0;
    background: var(--t-panel);
    border: 1px solid var(--t-line);
    border-collapse: collapse;
}
table.search-tb > tbody > tr > th,
table.search-tb > tr > th,
table.search-small-tb > tbody > tr > th {
    padding: 0 8px;
    background: var(--t-sub);
    color: var(--t-text-2);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    word-break: keep-all;   /* 낱말 중간에서는 줄바꿈하지 않는다 */
    border-bottom: 1px solid var(--t-line-soft);
    border-right: 1px solid var(--t-line-soft);
}
table.search-tb > tbody > tr > td,
table.search-tb > tr > td,
table.search-small-tb > tbody > tr > td {
    height: 30px;
    padding: 5px 6px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--t-line-soft);
    border-right: 1px solid var(--t-line-soft);
}
table.search-tb > tbody > tr:last-child > th,
table.search-tb > tbody > tr:last-child > td {
    border-bottom: 0;
}
table.search-tb > tbody > tr > td:last-child {
    border-right: 0;
}

/* 화면마다 고정된 입력칸 폭이 표를 밀어내지 않도록 칸 폭 안에서 줄어들게 한다 */
table.search-tb input:not([type=checkbox]):not([type=radio]),
table.search-tb select {
    max-width: 100%;
}

/* ------------------------------------------------------------
   검색 조건 표를 그리드로 (JSP 수정 없이 CSS 로)
   - 표/본문을 grid 로, 행(tr)은 display: contents 로 풀어 th/td 가 [라벨, 입력] 쌍으로 흘러가게 한다.
     창이 좁으면 쌍 단위로 다음 줄로 넘어간다.
   - 기간 선택(.date-quick)이 든 칸, 내용이 칸보다 넓은 칸(js/common/ui-layout.js 가 .t-wide 를 붙인다)은
     새 줄의 처음부터 줄 끝까지 쓴다. (colspan 은 행의 남은 칸 채우기에도 쓰여서 기준으로 삼지 않는다)
   - JS 로 숨긴 행(style="display: none")은 그대로 숨겨진다. 다시 보이면(jQuery show) contents 로 돌아온다.
   - 그리드로 바꾸면 깨지는 화면은 표에 class="no-reflow" 를 붙이면 예전 표로 그린다.
   ------------------------------------------------------------ */
table.search-tb:not(.no-reflow) {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
table.search-tb:not(.no-reflow) > colgroup {
    display: none;
}
table.search-tb:not(.no-reflow) > tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, 96px minmax(190px, 1fr));
}
table.search-tb:not(.no-reflow) > tbody > tr:not([style*="none"]) {
    display: contents !important;
}
table.search-tb:not(.no-reflow) > tbody > tr > th,
table.search-tb:not(.no-reflow) > tbody > tr > td {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
    min-height: 41px;
    border-bottom: 1px solid var(--t-line-soft);
}
/* 입력 칸은 줄바꿈하지 않아야 넘치는지 잴 수 있다. 넓힌 칸(.t-wide)은 그래도 모자라면 줄바꿈 */
table.search-tb:not(.no-reflow) > tbody > tr > td {
    flex-wrap: nowrap;
}
table.search-tb:not(.no-reflow) > tbody > tr > td.t-wide {
    flex-wrap: wrap;
}
/* 라벨 칸: 체크박스·선택 상자와 글자를 한 줄에 (글자는 띄어쓰기에서만 줄바꿈) */
table.search-tb:not(.no-reflow) > tbody > tr > th {
    flex-wrap: nowrap;
}
/* 라벨 칸(96px) 안의 select(조회 기준 선택 등)는 여백을 줄이고 칸 폭을 채운다 */
table.search-tb:not(.no-reflow) > tbody > tr > th:has(> select) {
    padding-left: 4px;
    padding-right: 4px;
}
table.search-tb:not(.no-reflow) > tbody > tr > th > select:not([multiple]):not([size]) {
    width: 100%;
    min-width: 0;
    padding: 0 20px 0 6px;
    background-position: right 7px center;
}
table.search-tb:not(.no-reflow) > tbody > tr > td {
    border-right: 1px solid var(--t-line-soft);
}
table.search-tb:not(.no-reflow) > tbody > tr > td:has(.date-quick),
table.search-tb:not(.no-reflow) > tbody > tr > td.t-wide {
    grid-column: 2 / -1;
}
table.search-tb:not(.no-reflow) > tbody > tr > th:has(+ td .date-quick),
table.search-tb:not(.no-reflow) > tbody > tr > th:has(+ td.t-wide) {
    grid-column: 1 / 2;
}
table.search-tb:not(.no-reflow) > tbody > tr > th:empty,
table.search-tb:not(.no-reflow) > tbody > tr > td:empty {
    display: none;
}

/* 날짜 빠른 선택 (tags/frToDt.tag) - 붙은 버튼 묶음 */
.date-quick {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    overflow: hidden;
}
.date-quick > button,
.date-quick > button:hover {
    height: 28px;
    line-height: 26px;
    padding: 0 6px;
    border: 0;
    border-left: 1px solid var(--t-input-line);
    border-radius: 0;
    font-size: 12px;
    color: var(--t-text-2);
    background: #FFFFFF;
}
.date-quick > button:first-child { border-left: 0; }
.date-quick > button:hover { background: var(--t-sub); }
.date-quick > button.on {
    background: var(--t-primary);
    color: #FFFFFF;
}

/* ============================================================
   상세/입력 표 (table.form-tb), 목록 표 (table.list-tb)
   ============================================================ */
table.form-tb {
    border: 1px solid var(--t-line);
    border-collapse: collapse;
}
table.form-tb > tbody > tr > th,
table.form-tb > tr > th,
table.form-tb > thead > tr > th {
    background: var(--t-sub);
    color: var(--t-text-2);
    font-weight: 600;
    border-color: var(--t-line-soft);
}
table.form-tb > tbody > tr > td,
table.form-tb > tr > td {
    border-color: var(--t-line-soft);
}
table.list-tb {
    border-top: 1px solid var(--t-line);
}
table.list-tb > thead > tr > th,
table.list-tb > tbody > tr > th {
    background: var(--t-sub);
    color: var(--t-text-2);
    font-weight: 600;
    border-color: var(--t-line-soft);
}

/* 그리드 위 건수/금액 요약 (tui-grid-custom.css 의 #cntTb) - 배경색 대신 글자색만 */
table.form-tb#cntTb {
    border: 1px solid var(--t-line);
}
table.form-tb#cntTb > tbody > tr > th:nth-child(1),
table.form-tb#cntTb > tbody > tr > th:nth-child(4),
table.form-tb#cntTb > tbody > tr > th:nth-child(7) {
    background-color: var(--t-sub);
}
table.form-tb#cntTb > tbody > tr > th:nth-child(1) { color: var(--t-ok); }
table.form-tb#cntTb > tbody > tr > th:nth-child(4) { color: var(--t-danger); }
table.form-tb#cntTb > tbody > tr > th:nth-child(7) { color: var(--t-primary); }
table.form-tb#cntTb > tbody > tr > td,
table.form-tb#cntTb > tbody > tr > th {
    border-color: var(--t-line-soft);
}

/* ============================================================
   그리드 (Toast UI Grid) - 색은 tui-grid-custom.js 의 THEME_OPTIONS
   ============================================================ */
.tui-grid-container {
    border: 1px solid var(--t-line);
}
.tui-grid-cell-header {
    font-weight: 600;
}
.tui-grid-cell-summary {
    background-color: var(--t-sub) !important;
    font-weight: 700;
    color: var(--t-text);
}
.tui-pagination .tui-page-btn {
    border-radius: var(--t-radius);
    font-family: var(--t-font);
}
.tui-pagination .tui-first,
.tui-pagination .tui-last {
    border-radius: var(--t-radius);
}
.tui-pagination .tui-is-selected,
.tui-pagination strong {
    background: var(--t-primary);
    border-color: var(--t-primary);
}

/* ============================================================
   그리드 헤더 필터 (Toast UI Grid column filter) - 문구는 tui-grid-custom.js 의 setLanguage
   ============================================================ */
.tui-grid-filter-container {
    padding: 8px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    box-shadow: 0 6px 18px rgba(10, 14, 20, 0.14);
    font-family: var(--t-font);
    color: var(--t-text);
}
.tui-grid-filter-dropdown {
    height: 30px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    overflow: hidden;
}
.tui-grid-filter-dropdown select {
    height: 100%;
    font-size: 12.5px;
    color: var(--t-text);
}
.tui-grid-filter-container .tui-grid-filter-input {
    box-sizing: border-box;
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    font-family: var(--t-font);
    font-size: 12.5px;
    color: var(--t-text);
}
.tui-grid-filter-container .tui-grid-filter-input:focus {
    outline: none;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 2px var(--t-primary-soft);
}
.tui-grid-filter-input::placeholder {
    color: var(--t-faint);
}
.tui-grid-filter-list-container .tui-grid-filter-list {
    border-top-color: var(--t-line-soft);
    border-bottom-color: var(--t-line-soft);
}
.tui-grid-filter-list-container .tui-grid-filter-list-item {
    color: var(--t-text);
}
.tui-grid-filter-list-item label {
    padding: 7px 8px;
}
.tui-grid-filter-list-item label span {
    font-size: 12.5px;
}
.tui-grid-filter-list .tui-grid-filter-list-item-checked {
    background-color: var(--t-primary-soft);
}
/* 체크 표시 - 파란 기본 그림 대신 */
.tui-grid-filter-list-item label::before {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid var(--t-input-line);
    border-radius: 2px;
    background: #FFFFFF;
}
.tui-grid-filter-list-item-checked label::before {
    border-color: var(--t-primary);
    background: var(--t-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
}
.tui-grid-filter-comparator label::before {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid var(--t-input-line);
    border-radius: 50%;
    background: #FFFFFF;
}
.tui-grid-filter-comparator-checked label::before {
    border: 4px solid var(--t-primary);
    background: #FFFFFF;
}
.tui-grid-filter-comparator span {
    color: var(--t-text-2);
}
.tui-grid-filter-btn {
    width: auto;
    min-width: 52px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--t-radius);
    font-family: var(--t-font);
    font-size: 12px;
    font-weight: 600;
}
.tui-grid-filter-btn-apply,
.tui-grid-filter-btn-apply:hover {
    background-color: var(--t-primary);
    border: 1px solid var(--t-primary);
    color: #FFFFFF;
}
.tui-grid-filter-btn-apply:hover {
    background-color: var(--t-primary-hover);
    border-color: var(--t-primary-hover);
}
.tui-grid-filter-btn-clear,
.tui-grid-filter-btn-clear:hover {
    background-color: #FFFFFF;
    border: 1px solid var(--t-input-line);
    color: var(--t-text-2);
}
.tui-grid-filter-btn-clear:hover {
    background-color: var(--t-sub);
}

/* ============================================================
   팝업 (popupLayout)
   ============================================================ */
h1.popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t-text);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--t-line);
}

/* ============================================================
   알림/확인 창 (js/common/ui-dialog.js)
   ============================================================ */
.ui-dlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 24, 31, 0.45);
    font-family: var(--t-font);
}
.ui-dlg {
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #FFFFFF;
    border-top: 3px solid var(--t-primary);
    box-shadow: 0 10px 28px rgba(10, 14, 20, 0.28);
    color: var(--t-text);
}
.ui-dlg.is-danger { border-top-color: var(--t-danger); }
.ui-dlg-title {
    padding: 18px 20px 6px 20px;
    font-size: 14px;
    font-weight: 800;
}
.ui-dlg-body {
    padding: 0 20px 18px 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--t-text-2);
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow-y: auto;
}
.ui-dlg-foot {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 10px 14px;
    background: var(--t-sub);
}
.ui-dlg-foot button {
    min-width: 64px;
}
.ui-dlg-foot button.is-primary {
    background: var(--t-primary);
    border-color: var(--t-primary);
    color: #FFFFFF;
    font-weight: 700;
}
.ui-dlg.is-danger .ui-dlg-foot button.is-primary {
    background: var(--t-danger);
    border-color: var(--t-danger);
}
.ui-dlg-foot button.is-primary:focus-visible,
.ui-dlg-foot button:focus-visible {
    outline: 2px solid var(--t-primary-soft);
    outline-offset: 1px;
}

/* 토스트 */
.ui-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100001;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid var(--t-input-line);
    box-shadow: 0 6px 18px rgba(10, 14, 20, 0.12);
    font-family: var(--t-font);
    font-size: 12.5px;
    color: var(--t-text);
}
.ui-toast::before {
    content: "\2713";
    color: var(--t-primary);
    font-weight: 700;
    margin-right: 6px;
}

/* ============================================================
   사이트 로고/별칭 (사이드바 .site-brand), 푸터 사업자정보 (.site-co)
   - 로고는 어두운 바탕용 한 장. 푸터에서는 어두운 칸에 놓는다.
   - 사업자정보 관리·영업점 수정 팝업의 미리보기(js/common/brand-preview.js)도 같은 클래스를 쓴다.
   ============================================================ */
.site-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
}
.site-brand a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #FFFFFF;
    text-decoration: none;
}
.site-brand .site-brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 32px;
}
#sidebar.sidebar-collapsed .site-brand {
    display: none;
}
/* 로고가 없을 때: 별칭 또는 상호 글자 */
.site-brand .site-brand-text {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* 푸터: 사업자정보 (로고 없음) */
.company_wrap.site-co {
    display: flex;
    align-items: center;
}
.company_wrap.site-co .company_info {
    margin: 0;
    padding: 0;
    list-style: none;
}
.company_wrap.site-co .company_info li {
    padding-bottom: 2px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--t-muted);
    text-align: left;
}
.company_wrap.site-co .company_info li b {
    color: var(--t-text-2);
    font-weight: 600;
}
.company_wrap.site-co .company_info li span {
    padding: 0 5px;
    color: var(--t-line);
}
.company_wrap.site-co .company_info li .com_name {
    color: var(--t-text-2);
    font-weight: 700;
}

/* 미리보기 창 */
.brand-pv-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 24, 31, 0.45);
    font-family: var(--t-font);
}
.brand-pv {
    display: flex;
    flex-direction: column;
    width: 760px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    background: #FFFFFF;
    border-top: 3px solid var(--t-primary);
    box-shadow: 0 10px 28px rgba(10, 14, 20, 0.28);
    color: var(--t-text);
}
.brand-pv-head {
    padding: 16px 20px 4px 20px;
    font-size: 14px;
    font-weight: 800;
}
.brand-pv-desc {
    padding: 0 20px 12px 20px;
    font-size: 12px;
    color: var(--t-muted);
}
.brand-pv-body {
    padding: 0 20px 18px 20px;
    overflow: auto;
}
.brand-pv-sec + .brand-pv-sec {
    margin-top: 18px;
}
.brand-pv-label {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--t-text-2);
}
.brand-pv-src {
    font-weight: 400;
    color: var(--t-faint);
}
.brand-pv-sb {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 220px;
    height: 56px;
    padding: 0 14px;
    box-sizing: border-box;
    background: var(--t-sb-bg);
    overflow: hidden;
}
.brand-pv-sb .site-brand {
    flex: 1;
}
.brand-pv-sb .brand-pv-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid var(--t-sb-line);
    border-radius: var(--t-radius);
    box-sizing: border-box;
}
.brand-pv-foot .company_wrap {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--t-line);
}
.brand-pv-note {
    margin: 6px 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.6;
    color: var(--t-danger);
}
.brand-pv-foot-bar {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    background: var(--t-sub);
}
.brand-pv-foot-bar button {
    min-width: 64px;
}

/* ============================================================
   가맹점(Pgs_merchant) 화면 - 같은 theme.css 를 두 프로젝트가 함께 쓴다
   ============================================================ */
/* 큰 확인 버튼 (신용카드 수기결제 등, css/pgs.css 의 .blueBtnL) */
.blueBtnL {
    border: 1px solid var(--t-primary);
    border-radius: var(--t-radius);
    background: var(--t-primary);
    color: #FFFFFF;
    font-weight: 600;
    cursor: pointer;
}
.blueBtnL:hover {
    border-color: var(--t-primary-hover);
    background: var(--t-primary-hover);
}
/* 결제 입력표 (form.paylarge) */
.paylarge table.form-tb > tbody > tr > th {
    border-color: var(--t-line);
    border-radius: var(--t-radius) 0 0 var(--t-radius);
    background: var(--t-sub);
    color: var(--t-text-2);
}
.paylarge table.form-tb > tbody > tr > td {
    border-color: var(--t-line);
    border-radius: 0 var(--t-radius) var(--t-radius) 0;
}
.paylarge table.form-tb > tbody > tr:focus-within > td {
    border-color: var(--t-primary);
}

/* ============================================================
   로그인 / OTP 인증 (layout/loginLayout.jsp)
   ============================================================ */
.login {
    min-height: 100vh;
    background: var(--t-sb-bg);
}
.login .inner .center_box {
    width: 400px;
    max-width: calc(100% - 32px);
}
.login .inner .center_box > .contents {
    padding: 40px 36px 36px;
    border-radius: var(--t-radius);
    border-top: 3px solid var(--t-primary);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.login .inner .center_box > .contents .input_wrap .title_img1 {
    height: 48px;
    margin-bottom: 28px;
    background-size: auto 42px;
}
/* 로그인 화면 로고 자리 - 사업자정보 관리의 로그인 로고(밝은 바탕용), 없으면 별칭/상호 글자 */
.login .inner .center_box > .contents .input_wrap .login-brand {
    margin: 0 auto 28px;
    text-align: center;
}
.login .inner .center_box > .contents .input_wrap .login-brand img {
    display: inline-block;
    max-width: 240px;
    max-height: 48px;
    width: auto;
    margin: 0;
}
.login .inner .center_box > .contents .input_wrap .login-brand-img {
    width: auto;
    max-width: 240px;
    max-height: 48px;
    margin-bottom: 20px;
}
.login .inner .center_box > .contents .input_wrap .login-brand-text {
    display: inline-block;
    font-size: 26px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -0.5px;
    color: var(--t-text);
}
.login .inner .center_box > .contents .input_wrap li {
    margin-top: 10px;
}

/* 아이디/비밀번호/인증번호 입력 */
.login .inner .center_box > .contents .input_wrap input[type="text"],
.login .inner .center_box > .contents .input_wrap input[type="password"] {
    height: 44px;
    line-height: normal;
    padding: 0 14px 0 40px;
    font-size: 14px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    color: var(--t-text);
    transition: border-color .15s, box-shadow .15s;
}
.login .inner .center_box > .contents .input_wrap input[type="text"]:focus,
.login .inner .center_box > .contents .input_wrap input[type="password"]:focus {
    background-color: #FFFFFF !important;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px var(--t-primary-soft);
}
.login .inner .center_box > .contents .input_wrap li .id:after,
.login .inner .center_box > .contents .input_wrap li .pw:after {
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--t-faint);
}
.login .inner .center_box > .contents .input_wrap li .id label.placeholder,
.login .inner .center_box > .contents .input_wrap li .pw label.placeholder {
    top: 50%;
    left: 41px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--t-faint);
    z-index: 1;
}

/* ID 저장: 이미지 대신 체크 상자. 실제 체크 상태를 그대로 보여준다 */
.login .inner .center_box > .contents .input_wrap li .checkbox_wrap {
    margin-top: 2px;
}
.login .inner .center_box > .contents .input_wrap li .checkbox_wrap label .id_check {
    top: 2px;
}
.login .inner .center_box > .contents .input_wrap li .checkbox_wrap label .id_check .checking_img {
    width: 16px;
    height: 16px;
    border: 1px solid var(--t-input-line);
    border-radius: var(--t-radius);
    background: #FFFFFF;
}
.login .inner .center_box > .contents .input_wrap li .checkbox_wrap label .id_check:has(input:checked) .checking_img {
    border-color: var(--t-primary);
    background: var(--t-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px !important;
}
.login .inner .center_box > .contents .input_wrap li .checkbox_wrap label .check_text {
    margin-left: 24px;
    font-size: 13px;
    font-weight: 400;
    color: var(--t-text-2);
}

/* 로그인 버튼 */
.login .inner .center_box > .contents .input_wrap li .login_btn {
    margin-top: 24px;
}
.login .btnB.btnBlue {
    height: 44px;
    line-height: 44px;
    border-radius: var(--t-radius);
    background-color: var(--t-primary);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .15s;
}
.login .btnB.btnBlue:hover {
    background-color: var(--t-primary-hover);
}

/* OTP 인증 화면 */
.login .inner .center_box > .contents .input_wrap .logo {
    width: 150px;
    margin-bottom: 20px;
}
.login .inner .center_box > .contents .input_wrap .logo_sub,
.login .inner .center_box > .contents .input_wrap .secret_key {
    font-size: 13px;
    line-height: 1.6;
    color: var(--t-muted);
    margin-bottom: 24px;
}
.login .inner .center_box > .contents .input_wrap .logo_sub .weight {
    font-weight: 600;
    color: var(--t-text);
}
.login .inner .center_box > .contents .input_wrap .otp_reset_btn a {
    color: var(--t-muted) !important;
}

/* 하단 */
.login .inner .center_box > .footer .company_info {
    margin-top: 24px;
    font-size: 11.5px;
    letter-spacing: .02em;
    color: #6E7480;
}