/* 모달 - 기존코드 */
.modal-component {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    display: none;
}
.modal-component .modal-background {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
}
.modal-component .modal-box-container {
    width: 100%;
    z-index: 9999;
    position: fixed;
    top: 50%;
    left: 0;
}
.modal-component .modal-box-container .modal-box {
    position: relative;
    width: 320px;
    height: auto;
    margin: 0 auto;
    background: #fff;
    text-align: center;
}
.modal-component .modal-box-container .modal-box .modal-title {
    font-weight: normal;
    font-size: 19px;
    padding: 10px 0 11px;
    border: 1px solid #eee;
}
.modal-component .modal-box-container .modal-box .modal-contents {
    padding: 34px 20px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    line-height: 25px;
    text-align: center;
}
.modal-component
.modal-box-container
.modal-box
.modal-contents
span.modal-minor-content {
    font-size: 12px;
    color: grey;
}
.modal-component .modal-box-container .modal-box .modal-actions {
    height: 48px;
    width: 100%;
    overflow: hidden;
}
.modal-component .modal-box-container .modal-box .modal-actions button {
    display: inline-block;
    width: 50%;
    height: 48px;
    border: 1px solid #eee;
}
.modal-component .modal-box-container .modal-box .modal-actions button.full {
    width: 100%;
}
.modal-component .modal-box-container .modal-box .modal-actions button.dark {
    border: 1px solid #3c3d40;
    background: #3c3d40;
    color: var(--white);
}
.modal-component .modal-box-container .modal-box .modal-actions button:focus {
    outline: 0;
}
.modal-component .modal-box-container .modal-box .modal-loading {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #f9f9f9;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
}
/* 셀렉트 - 기존코드  */
.components-select .tit_search {
    float: left;
    padding-right: 6px;
    font-weight: normal;
    line-height: 40px;
}
.components-select .clickable_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    display: none;
}
.components-select .select-container {
    position: relative;
}
.components-select .select-container .select-button {
    width: 100%;
    text-align: left;
    outline: none;
    background: transparent;
    padding: 0 35px 0 15px;
    color: #444 !important;
}
.components-select .select-container .ico_arr {
    position: absolute;
    top: 17px;
    right: 15px;
    width: 7px;
    height: 5px;
    background-position: -80px -10px;
}
.components-select .select-container .box_opt .list_opt {
    max-height: 300px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.components-select .select-container .box_opt .list_opt::-webkit-scrollbar {
    display: none;
}
.components-select .select-container .box_opt .list_opt .link_option {
    cursor: pointer;
    text-align: left;
    padding: 8px 15px 10px;
}
/* 테이블 - 기존코드 */
table.biz-table {
    width: 100%;
    border: 1px solid #eee;
    border-collapse: collapse;
}
table.biz-table tr,
table.biz-table th,
table.biz-table td {
    border: 1px solid #eee;
    padding: 25px;
}
table.biz-table tr.shadowed,
table.biz-table th.shadowed,
table.biz-table td.shadowed {
    background-color: #f9f9f9;
}
table.biz-table tr.centered,
table.biz-table th.centered,
table.biz-table td.centered {
    text-align: center;
}
table.biz-table tr .table-unit,
table.biz-table th .table-unit,
table.biz-table td .table-unit {
    display: flex;
    justify-content: space-between;
}
table.biz-table tr .table-unit.center,
table.biz-table th .table-unit.center,
table.biz-table td .table-unit.center {
    justify-content: center;
    align-items: center;
}
table.biz-table tr .table-unit span,
table.biz-table th .table-unit span,
table.biz-table td .table-unit span {
    font-weight: normal;
}
table.biz-table th {
    background-color: #f9f9f9;
}
table.biz-table td {
    padding: 10px 25px;
}
table.biz-table td.row-header {
    width: 90px;
    background-color: #f9f9f9;
}
.light-text {
    color: #999;
    min-width: 40px;
    display: inline-block;
    text-align: right;
}
.light-text.left {
    text-align: left;
}
/* === 기존코드 사용줄으로 수정하지 않음 === */

/* ===================================================== */
/* =============== 2025-03 개편 NEW 공통작업 =============== */
/* ===================================================== */
:root {
    /* 2025.02.25 추가 - T비즈 디자인시스템 가이드 컬러 */
    --neutral1: #262d39;
    --neutral2: rgba(38, 45, 57, 0.72);
    --neutral3: rgba(38, 45, 57, 0.52);
    --neutral4: rgba(38, 45, 57, 0.32);
    --neutral5: rgba(38, 45, 57, 0.16);
    --neutral6: rgba(38, 45, 57, 0.08);
    --black: #000;
    --white: #fff;
    --primary1: rgba(53, 129, 255, 1);
    --primary1-pressed: rgba(44, 110, 219, 1);
    --primary5: rgba(221, 59, 59, 1);
    --primary6: rgba(239, 245, 255, 1);
    --primary6-1: rgba(239, 245, 255, 0.8);
    --bg: rgba(245, 246, 247, 1);
    --bg2: rgba(248, 248, 248, 1);
    --table-border: rgba(238, 238, 238, 1);
    --table-bg: rgba(249, 249, 249, 1);
    --table-header: rgba(128, 132, 141, 1);

    --btn-gray-pressed: rgba(153, 153, 153, 1);
}
/* =============== 헬퍼 스타일 =============== */
.hidden {
    overflow: hidden;
    position: absolute;
    margin: 0;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
    overflow-wrap: normal;
    color: transparent;
}
.ml-auto {
    margin-left: auto;
}
.flex-box {
    display: flex;
}
.between-box {
    display: flex;
    justify-content: space-between;
    column-gap: 8px;
}
/* =============== 타이포 =============== */
.typo-light {
    font-family: "Noto Sans DemiLight";
}
.typo-medium {
    font-family: "Noto Sans Medium";
}
.typo-bold {
    font-family: "Noto Sans Bold";
}
.typo-black {
    color: var(--neutral1);
}
.typo-blue {
    color: var(--primary1);
}
.typo-gray {
    color: #999;
}
.typo-error {
    color: var(--primary5);
}
.typo-left {
    text-align: left;
}
.typo-center {
    text-align: center;
}
.typo-right {
    text-align: right;
}
.typo-title1 {
    font-size: 36px;
}
.typo-title1-bold {
    font-size: 36px;
    font-family: "Noto Sans Bold";
}
.typo-title2 {
    font-size: 30px;
}
.typo-title2-bold {
    font-size: 30px;
    font-family: "Noto Sans Bold";
}
.typo-headline1 {
    font-size: 20px;
}
.typo-headline1-bold {
    font-size: 20px;
    font-family: "Noto Sans Bold";
}
.typo-headline2 {
    font-size: 18px;
}
.typo-headline2-bold {
    font-size: 18px;
    font-family: "Noto Sans Bold";
}
.typo-body1 {
    font-size: 16px;
}
.typo-body1-bold {
    font-size: 16px;
    font-family: "Noto Sans Bold";
}
.typo-body2 {
    font-size: 14px;
}
.typo-body2-bold {
    font-size: 14px;
    font-family: "Noto Sans Bold";
}
.typo-caption1 {
    font-size: 13px;
}
.typo-caption1-bold {
    font-size: 13px;
    font-family: "Noto Sans Bold";
}
.typo-caption2 {
    font-size: 12px;
}
.typo-caption2-bold {
    font-size: 12px;
    font-family: "Noto Sans Bold";
}
.typo-caption3 {
    font-size: 11px;
}
.typo-caption3-bold {
    font-size: 11px;
    font-family: "Noto Sans Bold";
}
/* =============== SVG 아이콘 =============== */
i[class^="ic-"] {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    background: no-repeat 0 0 / auto;
}
i.ic-24-arrow-down-bk {
    width: 24px;
    height: 24px;
    background-image: url(../images/ic-24-arrow-down-bk.svg);
}
i.ic-24-execl {
    width: 24px;
    height: 24px;
    background-image: url(../images/ic-24-execl.svg);
}
i.ic-32-warning-red {
    width: 32px;
    height: 32px;
    background-image: url(../images/ic-32-warning-red.svg);
}
i.ic-20-info-n1 {
    width: 20px;
    height: 20px;
    background-image: url(../images/ic-20-info-n1.svg);
}
i.ic-20-filter-off {
    width: 20px;
    height: 20px;
    background-image: url(../images/ic-20-filter-off.svg);
}
i.ic-20-claendar {
    width: 20px;
    height: 20px;
    background-image: url(../images/ic-20-claendar.svg);
}
i.ic-20-search-black {
    width: 20px;
    height: 20px;
    background-image: url(../images/ic-20-search-black.svg);
}
i.ic-16-reset {
    width: 16px;
    height: 16px;
    background-image: url(../images/ic-16-reset.svg);
}
i.ic-20-delete-circle {
    width: 20px;
    height: 20px;
    background-image: url(../images/ic-20-delete-circle.svg);
}
i.ic-16-arrow-right-n2 {
    width: 8px;
    height: 16px;
    background-image: url(../images/ic-16-arrow-right-n2.svg);
}
/* =============== NEW 버튼 =============== */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0 4px;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    border: 1px solid rgba(68, 68, 68, 1);
    padding: 0 16px;
    font-family: "Noto Sans DemiLight";
    font-size: 16px;
    vertical-align: top;
    color: var(--white);
    background-color: rgba(68, 68, 68, 1);
    outline: none;
}
.btn:not(:disabled):focus,
.btn:not(:disabled):hover,
.btn:not(:disabled):active {
    border-color: var(--black);
    background-color: var(--black);
}
.btn:disabled {
    border-color: transparent;
    background-color: var(--neutral5);
    color: var(--neutral3);
    cursor: not-allowed;
}
.btn-gray {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0 4px;
    box-sizing: border-box;
    height: 50px;
    border-radius: 4px;
    border: 1px solid var(--neutral5);
    padding: 0 16px;
    font-family: "Noto Sans DemiLight";
    font-size: 16px;
    color: var(--neutral1);
    background-color: var(--white);
    outline: none;
}
.btn-gray:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
.btn-gray:not(:disabled):focus,
.btn-gray:not(:disabled):hover {
    border-color: var(--neutral3);
    background-color: var(--bg);
}
.btn-gray:active {
    background-color: var(--btn-gray-pressed);
}
.btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0 4px;
    box-sizing: border-box;
    height: 50px;
    border-radius: 4px;
    border: 1px solid transparent;
    padding: 0 16px;
    font-family: "Noto Sans DemiLight";
    font-size: 16px;
    color: rgba(38, 45, 57, 0.72);
    background-color: transparent;
    outline: none;
}
.btn-icon:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
.btn-xlarge {
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
}
.btn-large {
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
}
.btn-medium {
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
}
.btn-small {
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
}
/* =============== NEW 셀렉트  =============== */
.field-select {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--neutral6);
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    background-color: var(--white);
}
.field-select:focus-within {
    border-color: var(--primary1);
}
.field-select:focus-within {
    border-color: var(--neutral6);
}
.field-select .ic-arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(68, 68, 68, 1);
    margin-left: auto;
}
.field-select > .btn-select {
    display: flex;
    align-items: center;
    column-gap: 10px;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 15px;
}
.field-select > .btn-select > i[class^="ic-"]:first-child {
    margin-left: -10px;
}
.field-select > .btn-select > .ic-24-arrow-down-bk {
    margin-left: auto;
}
.field-select .txt-selected {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    min-width: 0;
    font-size: 14px;
    vertical-align: top;
    color: var(--neutral1);
}
.field-select .option-content {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0 -1px;
    border: 1px solid var(--neutral6);
    background-color: var(--white);
}
.field-select .list-option {
    overflow-y: auto;
    max-height: 254px;
}
.field-select .list-option > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 15px;
    font-size: 14px;
    color: var(--neutral2);
    cursor: pointer;
}
.field-select .list-option > li:not(:last-of-type) {
    border-bottom: 1px solid var(--neutral6);
}
.field-select .list-option > li:hover {
    color: var(--primary1);
    background-color: var(--bg2);
}
.field-select .list-option > li.active {
    color: var(--primary1);
    background-color: var(--primary6);
}
.field-select.open {
    z-index: 10;
}
.field-select.open .option-content {
    display: block;
}
/* 셀렉트 라지 */
.field-select-large {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--neutral6);
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    border-radius: 4px;
    background-color: var(--white);
}
.field-select-large:focus-within {
    border-color: var(--primary1);
}
.field-select-large:focus-within {
    border-color: var(--neutral6);
}
.field-select-large .ic-arrow-down {
    width: 24px;
    height: 24px;
    border: none;
    margin-left: auto;
    background-image: url(../images/ic-24-arrow-down-bk.svg);
}
.field-select-large > .btn-select {
    display: flex;
    align-items: center;
    column-gap: 10px;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 15px;
}
.field-select-large > .btn-select > i[class^="ic-"]:first-child {
    margin-left: -10px;
}
.field-select-large > .btn-select > .ic-24-arrow-down-bk {
    margin-left: auto;
}
.field-select-large .txt-selected {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    min-width: 0;
    font-size: 16px;
    vertical-align: top;
    color: var(--neutral1);
}
.field-select-large .option-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 -1px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid var(--neutral6);
    background-color: var(--white);
}
.field-select-large .list-option {
    overflow-y: auto;
    max-height: 254px;
}
.field-select-large .list-option > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    box-sizing: border-box;
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    color: var(--neutral2);
    cursor: pointer;
}
.field-select-large .list-option > li:not(:last-of-type) {
    border-bottom: 1px solid var(--neutral6);
}
.field-select-large .list-option > li:hover {
    color: var(--primary1);
    background-color: var(--bg2);
}
.field-select-large.open {
    z-index: 10;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.field-select-large.open .option-content {
    display: block;
}
.field-select-large.open > .btn-select .ic-arrow-down {
    transform: rotate(180deg);
}
/* =============== NEW 체크박스 =============== */
.field-check {
    display: inline-flex;
    column-gap: 6px;
    position: relative;
    user-select: none;
    font-size: 14px;
    text-align: left;
    vertical-align: top;
}
.field-check .check-mark {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    background: url(../images/img_admin_220411.png) no-repeat -228px -128px /
    300px 380px; /* 기존 스프라이트이미지 사용 */
    cursor: pointer;
}
.field-check [type="checkbox"] {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    opacity: 0;
    appearance: none;
    border-radius: 0;
    outline: 0;
    cursor: pointer;
}
.field-check input[type="checkbox"]:checked {
    appearance: checkbox;
}
.field-check input[type="checkbox"]:checked ~ .check-mark {
    background-position-x: -258px;
}
.field-check input[type="checkbox"]:disabled ~ .check-mark {
    opacity: 0.3;
    cursor: not-allowed;
}
.field-check input[type="checkbox"]:disabled ~ .label-txt {
    font-family: "Noto Sans DemiLight";
    color: var(--neutral2);
    cursor: not-allowed;
}
.field-check .label-txt {
    word-break: keep-all;
    color: var(--neutral1);
    cursor: pointer;
}
.field-check .label-desc {
    word-break: keep-all;
    color: rgba(153, 153, 153, 1);
}
.field-check-group {
    display: inline-flex;
    vertical-align: top;
    box-sizing: border-box;
    width: 100%;
}
.field-check-group:not(.block) {
    column-gap: 24px;
    min-height: 24px;
}
.field-check-group.block {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 15px;
}
.field-check-group > .field-check-group {
    padding-left: 28px;
}
/* =============== NEW 라디오그룹 =============== */
.field-radio-group {
    display: inline-flex;
    vertical-align: top;
    box-sizing: border-box;
    width: 100%;
}
.field-radio-group:not(.block) {
    column-gap: 24px;
    min-height: 24px;
}
.field-radio-group.block {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 15px;
}
/* =============== NEW 검색인풋 =============== */
.field-search {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--neutral6);
    box-sizing: border-box;
    width: 100%;
    padding: 0 14px;
    background-color: var(--white);
    min-height: 40px;
}
.field-search input {
    box-sizing: border-box;
    width: 100%;
    min-height: inherit;
    border-radius: 0;
    border: 0 none;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: #262d39;
    background-color: transparent;
    outline: none;
    appearance: none;
}
.field-search input::placeholder {
    color: #999;
}
.field-search input::-webkit-search-cancel-button {
    appearance: none;
}
.field-search:not(.disabled):focus-within {
    border-color: #75828e;
    box-shadow: 0 0 0 1px #75828e;
}
/* =============== NEW 캘린더 =============== */
.claendar {
    display: flex;
    justify-content: center;
    gap: 0 50px;
    position: relative;
    z-index: 1;
    font-family: "Roboto";
    background-color: var(--white);
}
.claendar .claendar-controls {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: -4px;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: 325px;
}
.claendar .claendar-controls .btn-prev,
.claendar .claendar-controls .btn-next {
    width: 30px;
    height: 30px;
}
.claendar .claendar-controls .btn-prev:disabled,
.claendar .claendar-controls .btn-next:disabled {
    cursor: not-allowed;
}
.claendar .claendar-controls .btn-prev i {
    transform: rotate(90deg);
}
.claendar .claendar-controls .btn-next i {
    transform: rotate(270deg);
}
.claendar .claendar-controls .btn-prev:disabled i,
.claendar .claendar-controls .btn-next:disabled i {
    opacity: 0.24;
}
.claendar .claendar-header {
    display: block;
    line-height: 24px;
    font-family: "Noto Sans Bold";
    font-size: 14px;
    text-align: center;
    color: #262d39;
}
.claendar .claendar-body {
    padding-top: 10px;
}
.claendar .calendar-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    empty-cells: show;
    text-align: center;
    color: #262d39;
}
.claendar .calendar-table tbody {
    font-size: 14px;
}
.claendar .calendar-table th {
    padding: 8px 0 0;
    font-size: 12px;
}
.claendar .calendar-table th:first-of-type {
    color: #dd3b3b;
}
.claendar .calendar-table td {
    position: relative;
    height: 42px;
    padding: 0 15px;
}
.claendar .calendar-table td:not(:empty) {
    cursor: pointer;
}
.claendar .calendar-table td:first-of-type {
    color: #dd3b3b;
}
.claendar .calendar-table td.unavailable {
    color: rgba(38, 45, 57, 0.16);
    cursor: not-allowed;
}
.claendar .calendar-table td.unavailable:first-of-type {
    color: #ffc9c9;
}
.claendar .calendar-table td.current::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border: 1px solid rgba(38, 45, 57, 0.16);
    border-radius: 20px;
}
.claendar .calendar-table td.start {
    color: var(--white);
}
.claendar .calendar-table td.start::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 36px;
    height: 36px;
    border-radius: 20px;
    background-color: var(--primary1);
}
.claendar .calendar-table td.start::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: -2;
    width: 50%;
    height: 36px;
    background-color: rgba(223, 235, 255, 1);
}
.claendar .calendar-table td.available::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -2;
    width: 100%;
    height: 36px;
    background-color: rgba(223, 235, 255, 1);
}
.claendar .calendar-table td.end {
    color: var(--white);
}
.claendar .calendar-table td.end::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 36px;
    height: 36px;
    border-radius: 20px;
    background-color: var(--primary1);
}
.claendar .calendar-table td.end::after {
    content: "";
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: -2;
    width: 50%;
    height: 36px;
    background-color: rgba(223, 235, 255, 1);
}
.claendar .calendar-table td.end.start::after {
    display: none;
}
.claendar .calendar-table td.cheanged {
    color: var(--primary1);
}
.claendar .calendar-table td.cheanged .badge-dot {
    position: absolute;
}
.claendar.double .claendar-header {
    font-size: 16px;
    font-weight: 500;
}
.claendar.double .claendar-controls {
    top: -3px;
    max-width: 100%;
    padding: 0 12px;
}
/* =============== NEW 데이터픽커 =============== */
.date-picker {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--neutral6);
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    background-color: var(--white);
}
.date-picker > .btn-date-picker {
    display: flex;
    align-items: center;
    column-gap: 10px;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding-left: 14px;
    padding-right: 14px;
}
.date-picker-content {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: -1px;
    box-sizing: border-box;
    min-width: 400px;
    width: calc(100% + 2px);
    border: 1px solid var(--neutral6);
    padding: 20px 30px;
    background-color: var(--white);
}
.date-picker.open {
    z-index: 10;
}
.date-picker.open .date-picker-content {
    display: block;
    box-shadow: 0px 10px 16px rgba(38, 45, 57, 0.08);
}
.date-picker .field-range-wrap {
    display: flex;
    gap: 0 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f3f3;
}
.date-picker .field-range-item {
    display: flex;
    column-gap: 20px;
    flex-direction: column;
    column-gap: 0;
    position: relative;
    width: 100%;
}
.date-picker .field-label {
    padding-bottom: 4px;
    font-size: 12px;
}
.date-picker .field-input {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--neutral6);
    box-sizing: border-box;
    width: 100%;
    background-color: var(--white);
    min-height: 28px;
    overflow: hidden;
}
.date-picker input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    min-height: inherit;
    border-radius: 0;
    border: 0 none;
    padding: 0 16px;
    font-size: 13px;
    color: var(--neutral1);
    background-color: transparent;
    outline: none;
    appearance: none;
}
.date-picker input[type="text"]::placeholder {
    color: #999;
}
.date-picker .field-input:focus-within {
    border-color: var(--primary1);
    background-color: rgba(239, 245, 255, 1);
}
.date-picker .field-input:focus-within input[type="text"] {
    color: var(--primary1);
}
.field-input .util-box {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    column-gap: 6px;
    min-height: inherit;
    padding-right: 5px;
}
.field-input .util-box:empty {
    display: none;
}
.field-input .util-box button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: inherit;
}
.field-input .util-box button:last-child {
    margin-right: -5px;
}
.field-input .util-box .btn-delete {
    display: none;
}
.field-input .util-box .btn-delete.on {
    display: flex;
}
.date-picker .tilde-mark {
    align-self: flex-end;
    flex-shrink: 0;
    display: inline-block;
    height: 28px;
}
.date-picker .claendar {
    padding-bottom: 16px;
}
.date-picker .btn-actions {
    display: flex;
    column-gap: 8px;
}
.date-picker .btn-actions .btn-icon {
    flex-shrink: 0;
    width: 93px;
}
/* ====== NEW 필터그룹 ====== */
.filter-field-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding-top: 15px;
    padding-bottom: 48px;
}
.filter-field-wrap .filter-field {
    flex-direction: column;
    border-top: 1px solid var(--neutral1);
    border-bottom: 1px solid var(--neutral1);
}
.filter-field-wrap .row {
    display: flex;
    align-items: center;
    column-gap: 8px;
    width: 100%;
}
.filter-field-wrap .row + .row {
    border-top: 1px solid var(--table-border);
}
.filter-field-wrap .field-item {
    display: flex;
    align-items: center;
    width: 100%;
}
.filter-field-wrap .field-box {
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 10px 16px;
    width: 100%;
}
.filter-field-wrap .field-title {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 4px;
    min-width: 100px;
    min-height: 60px;
    font-family: "Noto Sans DemiLight";
    text-align: center;
    background-color: var(--table-bg);
}
.filter-field-wrap .field-select {
    flex-shrink: 0;
    width: 110px;
}
.filter-field-wrap .field-util {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 8px;
}
.filter-field-wrap .field-util > button {
    width: 160px;
    margin: 0;
}
/* =============== NEW 테이블 =============== */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}
.table-controls .table-total-count {
    display: flex;
    align-items: center;
    column-gap: 8px;
}
.table-controls .txt-count {
    color: #444;
}
.table-controls .util-box {
    display: flex;
    align-items: center;
    column-gap: 8px;
}
.table-box {
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--table-border) inset;
}
.table-data {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    empty-cells: show;
    text-align: center;
}
.table-data th,
.table-data td {
    font-size: 12px;
    font-weight: normal;
}
.table-data thead th {
    position: relative;
    box-sizing: border-box;
    height: 48px;
    padding-left: 4px;
    padding-right: 4px;
    font-family: "Noto Sans DemiLight";
    color: var(--white);
    background-color: var(--table-header);
    border: none;
}
.table-data thead th:first-of-type {
    border-top-left-radius: 3px;
}
.table-data thead th:last-of-type {
    border-top-right-radius: 3px;
}
.table-data tbody th,
.table-data tbody td {
    border: 1px solid var(--table-border);
    padding: 16px 4px;
}
.table-data tfoot {
    background-color: var(--bg);
}
.table-data tfoot th,
.table-data tfoot td {
    border: 1px solid var(--table-border);
    padding: 16px 4px;
    font-family: "Noto Sans Bold";
}
.table-data tfoot th:first-of-type {
    border-bottom-left-radius: 3px;
}
.table-data tfoot td:last-of-type {
    border-bottom-right-radius: 3px;
}
.table-data tfoot td:empty {
    font-family: "Noto Sans Medium";
}
.table-data tfoot td:empty:before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1px;
    vertical-align: middle;
    background-color: var(--neutral1);
    font-family: "Noto Sans DemiLight";
}
/* =============== NEW 테이블 - 금액 합산/총액 =============== */
.table-amount-total {
    border-radius: 4px;
    border: 1px solid var(--neutral6);
    padding: 24px;
    background-color: var(--bg2);
}
.table-amount-total + .table-amount-total {
    margin-top: 20px;
}
.total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.total-box .total-title {
    font-family: "Noto Sans Bold";
    font-size: 18px;
    color: var(--neutral1);
}
.total-box .total-value {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-family: "Noto Sans Bold";
    font-size: 18px;
}
.table-amount + .total-box {
    border-top: 1px solid var(--neutral6);
    margin-top: 20px;
    padding-top: 20px;
}
.total-box + .table-amount {
    border-top: 1px solid var(--neutral6);
    margin-top: 20px;
}
.total-box + .table-amount tbody tr:first-child th,
.total-box + .table-amount tbody tr:first-child td {
    padding-top: 20px;
}
.table-amount {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    empty-cells: show;
}
.table-amount tbody tr:not(:last-of-type) th,
.table-amount tbody tr:not(:last-of-type) td {
    padding-bottom: 16px;
}
.table-amount tbody th {
    text-align: left;
    vertical-align: top;
}
.table-amount tbody th,
.table-amount tbody td {
    color: var(--neutral2);
}
.table-amount tbody td {
    text-align: right;
}
.table-amount .dl-table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    font-size: 14px;
    color: var(--neutral2);
}
.table-amount .dl-table-item + .dl-table-item {
    margin-top: 4px;
}
.table-amount .dl-table-item dt {
    flex-shrink: 0;
    min-width: 29px;
    max-width: 174px;
}
/* =============== 레이블 - 상태 =============== */
.label-state {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral5);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: "Noto Sans Bold";
    font-size: 12px;
    vertical-align: top;
    color: var(--neutral1);
}
.label-state.error {
    color: var(--primary5);
    border-color: var(--primary5);
}
.label-state.typo-blue {
    color: var(--primary1);
    border-color: var(--primary1);
}
/* =============== 목록 =============== */
.notice-box .notice-title {
    margin-bottom: 4px;
    font-family: "Noto Sans Bold";
    font-size: 14px;
    color: var(--neutral1);
}
.notice-list > li {
    display: flex;
    word-break: keep-all;
    color: var(--neutral2);
}
.notice-list > li:not(:last-of-type) {
    margin-bottom: 4px;
}
.notice-list > li:before {
    content: "";
    display: block;
    margin: 9px 4px 0 0;
    width: 4px;
    height: 1px;
    background-color: var(--neutral2);
}
.notice-list .btn-txt {
    padding-left: 4px;
    color: var(--primary1);
}
.notice-list .btn-txt:hover,
.notice-list .btn-txt:focus {
    text-decoration: underline;
}
/* =============== 메세지 =============== */
.message-box {
    display: flex;
    align-items: center;
    column-gap: 8px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-family: "Noto Sans Bold";
    font-size: 16px;
    padding: 20px 32px;
    color: var(--white);
    background-color: var(--table-header);
}
.error-message {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-family: "Noto Sans Bold";
    font-size: 16px;
    color: var(--primary5);
}
/* =============== 모달 - 필요한 항목 선택 =============== */
.layer-need-item-download .inner_admin_layer {
    width: 350px;
}
.layer-need-item-download .admin_layer .tit_alert {
    padding: 20px 0 16px;
    font-size: 16px;
}