/* CSS 변수 - 전역 색상 및 레이아웃 */
:root {
    --primary: #00288e;
    --primary-dark: #001a4d;
    --primary-soft: #d0e1fb;
    --text-dark: #191c1e;
    --text-gray: #505f76;
    --text-light: #94a3b8;
    --white: #ffffff;
    --border: #e2e8f0;
    --border-dark: #c4c5d5;
    --border-input: #e6e9ed;
    --bg-main: rgb(248 250 252 / 0.8);
    --bg-title-bar: rgb(248 250 252 / 0.8);
    --bg-main-dark: #e6e8ea;
    --page-wrap-border: rgba(226, 232, 240, 1);
    --page-wrap-radius: 1rem;
    --surface-container-low: #f2f4f6;
    --shadow-sm: 0 0.08rem 0.23rem rgba(0, 0, 0, 0.05);
    --shadow-md: 0 0.31rem 0.46rem -0.08rem rgba(0, 40, 142, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-width: 20rem;
    --sidebar-collapsed-width: 1.15rem;
    --font-family-base: "Malgun Gothic", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo";
    /* 글자 색상 변수 */
    --fc-wht: #ffffff; /* 흰색 */
    --fc-blk: #000000; /* 검정 */
    --fc-red: #ec0e03; /* 빨강 */
    --fc-blue: #0000ff; /* 파랑 */
    --fc-purple: #5900b3; /* 보라 */
    --fc-green: #006600; /* 녹색 */
    --fc-084: #547eec; /* 블루 */
    --fc-107: #6b8f13; /* 녹색 */
    --fc-197: #197fe0; /* 파랑 */
    --fc-7d6: #7d62c3; /* 보라 */
    --fc-255: #ff7200; /* 주황1 */
    --fc-eb7: #eb7c06; /* 주황2 */
    --fc-e06: #e06c04; /* 주황3 */
    --fc-grey: #898989; /* 회색 */
    --fc-214: #d6d6d6; /* 회색1 */
    --fc-b2: #b2b2b2; /* 회색2 */
    --fc-125: #7d7d7d; /* 회색3 */
    --fc-137: #898989; /* 회색4 */
    --fc-888: #888888; /* 회색5 */
    --fc-999: #999999; /* 회색6 */
    --fc-90: #f33e31; /* 주황빨강 */
    --fc-hana: #019d94; /* 하나 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 0.75rem;
}

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-family-base);
    background-color: var(--bg-main);
    color: var(--text-dark);
}

    body * {
        font-size: 1rem;
    }


/* 목록 화면 최상위 페이지 영역(제목바+검색영역+테이블 전체)을 세로로 채우는 래퍼. OrgSearch.razor의 최상위 div에 사용됨 */
.page-body-wrap {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.section-title {
    font-weight: 700;
    color: #0f766e;
    padding: 0.38rem 0.62rem;
    background: #ecfeff;
    border: 1px solid #bae6fd;
    border-left: 0;
    border-right: 0;
}
/* 페이지 타이틀 바 스타일 */
.page-title-bar {
    display: flex;
    justify-content: space-between;
    padding: 0 0 1rem;
}
/* 페이지 제목 아이콘 */
.title-icon {
    width: 0.31rem;
    height: 1.08rem;
    background-color: #0f172a;
    border-radius: 0.15rem;
}
/* 페이지 타이틀 버튼 그룹 스타일 (기존 toolbar와 동일) */
.page-title-btns {
    display: flex;
    gap: 0.31rem;
}

/* 폼 제목바 버튼 기본 스타일 */
.page-body-wrap .form-btns button,
.page-body-wrap .page-title-btns button,
.form-grid .btn,
.btns button {
    height: 2.1rem;
    padding: 0 0.69rem;
    border: 1px solid #c9d5e4;
    border-radius: 0.4rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    cursor: pointer;
    color: #334155;
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 0.31rem;
    white-space: nowrap;
}

    .page-body-wrap .form-btns button:hover,
    .page-body-wrap .page-title-btns button:hover {
        background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%);
        border-color: #a1afc9;
        color: #0f172a;
    }

.form-grid .btn {
    background: linear-gradient(180deg, #1861ac 0%, #1861ac 100%);
    color: #fff;
}
.form-grid .btn:hover {
    background: linear-gradient(180deg, #1861ac 10%, #1861ac 90%);
    color: #fff;
}

    .btn-icon {
        width: 2rem !important;
        border: 1px solid #eee;
        border-radius: 0.2rem;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }
        /*아이콘버튼*/
        .btn-icon::before {
            font-family: 'Material Icons';
            font-size: 1.2rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
        }
		.btn-icon:hover {
			background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%);
			border-color: #a1afc9;
			color: #0f172a; 
		}

            .btn-icon.search::before {
                content: "search";
                color: #316ca4;
            }
            /* 닫기 버튼 */
            .btn-icon.delete::before {
                content: "close";
                color: #e46565;
            }
            /*이동버튼*/
            .btn-icon.move::before {
                content: "move";
                color: #316ca4;
            }
            /* 기본 버튼 스타일 (page-body-wrap의 기본 버튼) */
            /* 조회 버튼 */
            .page-body-wrap button[data-action]::before {
                font-family: 'Material Icons';
                font-size: 16px;
            }

            .page-body-wrap button[data-action="search"]::before {
                content: "search";
            }

            .page-body-wrap button[data-action="search"]::after {
                content: "조회";
            }

            .page-body-wrap button[data-action="search"] {
            }

                .page-body-wrap button[data-action="search"]:hover {
                }
            /* Excel 버튼 */
            .page-body-wrap button[data-action="excel"]::before {
                content: "download";
            }

            .page-body-wrap button[data-action="excel"]::after {
                content: "Excel";
            }

            .page-body-wrap button[data-action="excel"] {
            }

                .page-body-wrap button[data-action="excel"]:hover {
                }
            /* 닫기 버튼 */
            .page-body-wrap button[data-action="close"]::before {
                content: "close";
            }

            .page-body-wrap button[data-action="close"]::after {
                content: "닫기";
            }

            .page-body-wrap button[data-action="close"] {
                background: #475569;
                border-color: #475569;
                color: #ffffff;
            }

                .page-body-wrap button[data-action="close"]:hover {
                    background: #334155;
                    border-color: #334155;
                    color: #ffffff;
                }

            .sub-btns button {
                padding: 0 0.5rem;
                height: 2rem;
                gap: 0.26rem;
                border-radius: 0.32rem;
            }
            /* 추가 버튼 */
            .page-body-wrap button[data-action="add"]::before {
                content: "add";
            }

            .page-body-wrap button[data-action="add"]::after {
                content: "추가";
            }
            /* 저장 버튼 */
            .page-body-wrap button[data-action="save"]::before {
                content: "check";
            }

            .page-body-wrap button[data-action="save"]::after {
                content: "저장";
            }
            /* 삭제 버튼 */
            .page-body-wrap button[data-action="delete"]::before {
                content: "delete";
            }

            .page-body-wrap button[data-action="delete"]::after {
                content: "삭제";
            }
            /* value 속성이 있는 경우 우선 표시 */
            .page-body-wrap button[value]:not([value=""]) {
            }

                .page-body-wrap button[value]:not([value=""]):before {
                    content: attr(value) " ";
                }

                .page-body-wrap button[value]:not([value=""]):after {
                    content: "";
                }
            /* 폼 제목바 버튼 닫기 스타일 */
            .page-body-wrap button.close {
                background: linear-gradient(180deg, #64748b 0%, #475569 100%);
                border-color: #475569;
                color: #ffffff;
            }

                .page-body-wrap button.close:hover {
                    background: linear-gradient(180deg, #475569 0%, #334155 100%);
                    border-color: #334155;
                }
            /* 전역 달력 입력 스타일 통일 (페이지 scoped CSS보다 우선 적용) */
            input[type="date"] {
                box-sizing: border-box !important;
                height: 26px !important;
                min-height: 26px !important;
                border: 1px solid #cbd5e1 !important;
                border-radius: 4px !important;
                padding: 0 8px !important;
                font-size: 12px !important;
                color: #0f172a !important;
                background-color: #ffffff !important;
            }

                input[type="date"]:focus {
                    outline: none;
                    border-color: #3b82f6 !important;
                }
            /* AppDatePicker 팝오버는 body 하위로 렌더링되므로 전역 스타일에서 지정 */
            :root {
                --mud-palette-black: rgba(17, 14, 45, 1);
                --mud-palette-white: rgba(255, 255, 255, 1);
                --mud-palette-primary: rgba(89, 74, 226, 1);
                --mud-palette-primary-rgb: 89, 74, 226;
                --mud-palette-primary-text: rgba(255, 255, 255, 1);
                --mud-palette-primary-darken: rgb(62, 44, 221);
                --mud-palette-primary-lighten: rgb(118, 106, 231);
                --mud-palette-primary-hover: rgba(89, 74, 226, 0.058823529411764705);
                --mud-palette-secondary: rgba(255, 64, 129, 1);
                --mud-palette-secondary-rgb: 255, 64, 129;
                --mud-palette-secondary-text: rgba(255, 255, 255, 1);
                --mud-palette-secondary-darken: rgb(255, 31, 105);
                --mud-palette-secondary-lighten: rgb(255, 102, 153);
                --mud-palette-secondary-hover: rgba(255, 64, 129, 0.058823529411764705);
                --mud-palette-tertiary: rgba(30, 200, 165, 1);
                --mud-palette-tertiary-rgb: 30, 200, 165;
                --mud-palette-tertiary-text: rgba(255, 255, 255, 1);
                --mud-palette-tertiary-darken: rgb(25, 169, 140);
                --mud-palette-tertiary-lighten: rgb(42, 223, 187);
                --mud-palette-tertiary-hover: rgba(30, 200, 165, 0.058823529411764705);
                --mud-palette-info: rgba(33, 150, 243, 1);
                --mud-palette-info-rgb: 33, 150, 243;
                --mud-palette-info-text: rgba(255, 255, 255, 1);
                --mud-palette-info-darken: rgb(12, 128, 223);
                --mud-palette-info-lighten: rgb(71, 167, 245);
                --mud-palette-info-hover: rgba(33, 150, 243, 0.058823529411764705);
                --mud-palette-success: rgba(0, 200, 83, 1);
                --mud-palette-success-rgb: 0, 200, 83;
                --mud-palette-success-text: rgba(255, 255, 255, 1);
                --mud-palette-success-darken: rgb(0, 163, 68);
                --mud-palette-success-lighten: rgb(0, 235, 98);
                --mud-palette-success-hover: rgba(0, 200, 83, 0.058823529411764705);
                --mud-palette-warning: rgba(255, 152, 0, 1);
                --mud-palette-warning-rgb: 255, 152, 0;
                --mud-palette-warning-text: rgba(255, 255, 255, 1);
                --mud-palette-warning-darken: rgb(214, 129, 0);
                --mud-palette-warning-lighten: rgb(255, 167, 36);
                --mud-palette-warning-hover: rgba(255, 152, 0, 0.058823529411764705);
                --mud-palette-error: rgba(244, 67, 54, 1);
                --mud-palette-error-rgb: 244, 67, 54;
                --mud-palette-error-text: rgba(255, 255, 255, 1);
                --mud-palette-error-darken: rgb(242, 28, 13);
                --mud-palette-error-lighten: rgb(246, 96, 85);
                --mud-palette-error-hover: rgba(244, 67, 54, 0.058823529411764705);
                --mud-palette-dark: rgba(66, 66, 66, 1);
                --mud-palette-dark-rgb: 66, 66, 66;
                --mud-palette-dark-text: rgba(255, 255, 255, 1);
                --mud-palette-dark-darken: rgb(46, 46, 46);
                --mud-palette-dark-lighten: rgb(87, 87, 87);
                --mud-palette-dark-hover: rgba(66, 66, 66, 0.058823529411764705);
                --mud-palette-text-primary: rgba(22, 22, 22, 1);
                --mud-palette-text-primary-rgb: 22, 22, 22;
                --mud-palette-text-secondary: rgba(0, 0, 0, 0.5372549019607843);
                --mud-palette-text-secondary-rgb: 0, 0, 0;
                --mud-palette-text-disabled: rgba(0, 0, 0, 0.3764705882352941);
                --mud-palette-text-disabled-rgb: 0, 0, 0;
                --mud-palette-action-default: rgba(0, 0, 0, 0.5372549019607843);
                --mud-palette-action-default-hover: rgba(0, 0, 0, 0.058823529411764705);
                --mud-palette-action-disabled: rgba(0, 0, 0, 0.25882352941176473);
                --mud-palette-action-disabled-background: rgba(0, 0, 0, 0.11764705882352941);
                --mud-palette-surface: rgba(255, 255, 255, 1);
                --mud-palette-surface-rgb: 255, 255, 255;
                --mud-palette-background: rgba(255, 255, 255, 1);
                --mud-palette-background-gray: rgba(245, 245, 245, 1);
                --mud-palette-drawer-background: rgba(255, 255, 255, 1);
                --mud-palette-drawer-text: rgba(66, 66, 66, 1);
                --mud-palette-drawer-icon: rgba(97, 97, 97, 1);
                --mud-palette-appbar-background: rgba(255, 255, 255, 0.8);
                --mud-palette-appbar-text: rgba(66, 66, 66, 1);
                --mud-palette-lines-default: rgba(0, 0, 0, 0.11764705882352941);
                --mud-palette-lines-inputs: rgba(203, 213, 225, 1);
                --mud-palette-table-lines: rgba(224, 224, 224, 1);
                --mud-palette-table-striped: rgba(0, 0, 0, 0.0196078431372549);
                --mud-palette-table-hover: rgba(0, 0, 0, 0.0392156862745098);
                --mud-palette-divider: rgba(224, 224, 224, 1);
                --mud-palette-divider-rgb: 224, 224, 224;
                --mud-palette-divider-light: rgba(0, 0, 0, 0.8);
                --mud-palette-skeleton: rgba(0, 0, 0, 0.10980392156862745);
                --mud-palette-gray-default: #9E9E9E;
                --mud-palette-gray-light: #e8e8e8;
                --mud-palette-gray-lighter: #f9f9f9;
                --mud-palette-gray-dark: #757575;
                --mud-palette-gray-darker: #616161;
                --mud-palette-overlay-dark: rgba(33, 33, 33, 0.4980392156862745);
                --mud-palette-overlay-light: rgba(255, 255, 255, 0.4980392156862745);
                --mud-palette-border-opacity: 1;
                --mud-ripple-color: var(--mud-palette-text-primary);
                --mud-ripple-opacity: 0.1;
                --mud-ripple-opacity-secondary: 0.2;
                --mud-elevation-0: none;
                --mud-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
                --mud-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                --mud-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
                --mud-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                --mud-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
                --mud-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                --mud-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
                --mud-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
                --mud-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
                --mud-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
                --mud-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
                --mud-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
                --mud-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
                --mud-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
                --mud-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
                --mud-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
                --mud-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
                --mud-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
                --mud-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
                --mud-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
                --mud-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
                --mud-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
                --mud-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
                --mud-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
                --mud-elevation-25: 0 5px 5px -3px rgba(0, 0, 0, .06), 0 8px 10px 1px rgba(0, 0, 0, .042), 0 3px 14px 2px rgba(0, 0, 0, .036);
                --mud-default-borderradius: 4px;
                --mud-drawer-width-left: 240px;
                --mud-drawer-width-right: 240px;
                --mud-drawer-width-mini-left: 56px;
                --mud-drawer-width-mini-right: 56px;
                --mud-appbar-height: 64px;
                --mud-typography-default-family: var(--font-family-base);
                --mud-typography-default-size: 1rem;
                --mud-typography-default-weight: 400;
                --mud-typography-default-lineheight: 1.43;
                --mud-typography-default-letterspacing: .01071em;
                --mud-typography-default-text-transform: none;
                --mud-typography-h1-family: var(--font-family-base);
                --mud-typography-h1-size: 6.86rem;
                --mud-typography-h1-weight: 300;
                --mud-typography-h1-lineheight: 1.167;
                --mud-typography-h1-letterspacing: -.01562em;
                --mud-typography-h1-text-transform: none;
                --mud-typography-h2-family: var(--font-family-base);
                --mud-typography-h2-size: 4.29rem;
                --mud-typography-h2-weight: 300;
                --mud-typography-h2-lineheight: 1.2;
                --mud-typography-h2-letterspacing: -.00833em;
                --mud-typography-h2-text-transform: none;
                --mud-typography-h3-family: var(--font-family-base);
                --mud-typography-h3-size: 3.43rem;
                --mud-typography-h3-weight: 400;
                --mud-typography-h3-lineheight: 1.167;
                --mud-typography-h3-letterspacing: 0;
                --mud-typography-h3-text-transform: none;
                --mud-typography-h4-family: var(--font-family-base);
                --mud-typography-h4-size: 2.43rem;
                --mud-typography-h4-weight: 400;
                --mud-typography-h4-lineheight: 1.235;
                --mud-typography-h4-letterspacing: .00735em;
                --mud-typography-h4-text-transform: none;
                --mud-typography-h5-family: var(--font-family-base);
                --mud-typography-h5-size: 1.71rem;
                --mud-typography-h5-weight: 400;
                --mud-typography-h5-lineheight: 1.334;
                --mud-typography-h5-letterspacing: 0;
                --mud-typography-h5-text-transform: none;
                --mud-typography-h6-family: var(--font-family-base);
                --mud-typography-h6-size: 1.43rem;
                --mud-typography-h6-weight: 500;
                --mud-typography-h6-lineheight: 1.6;
                --mud-typography-h6-letterspacing: .0075em;
                --mud-typography-h6-text-transform: none;
                --mud-typography-subtitle1-family: var(--font-family-base);
                --mud-typography-subtitle1-size: 1rem;
                --mud-typography-subtitle1-weight: 400;
                --mud-typography-subtitle1-lineheight: 1.75;
                --mud-typography-subtitle1-letterspacing: .00938em;
                --mud-typography-subtitle1-text-transform: none;
                --mud-typography-subtitle2-family: var(--font-family-base);
                --mud-typography-subtitle2-size: 1rem;
                --mud-typography-subtitle2-weight: 500;
                --mud-typography-subtitle2-lineheight: 1.57;
                --mud-typography-subtitle2-letterspacing: .00714em;
                --mud-typography-subtitle2-text-transform: none;
                --mud-typography-body1-family: var(--font-family-base);
                --mud-typography-body1-size: 1rem;
                --mud-typography-body1-weight: 400;
                --mud-typography-body1-lineheight: 1.5;
                --mud-typography-body1-letterspacing: .00938em;
                --mud-typography-body1-text-transform: none;
                --mud-typography-body2-family: var(--font-family-base);
                --mud-typography-body2-size: 1rem;
                --mud-typography-body2-weight: 400;
                --mud-typography-body2-lineheight: 1.43;
                --mud-typography-body2-letterspacing: .01071em;
                --mud-typography-body2-text-transform: none;
                --mud-typography-button-family: var(--font-family-base);
                --mud-typography-button-size: 1rem;
                --mud-typography-button-weight: 500;
                --mud-typography-button-lineheight: 1.75;
                --mud-typography-button-letterspacing: .02857em;
                --mud-typography-button-text-transform: uppercase;
                --mud-typography-caption-family: var(--font-family-base);
                --mud-typography-caption-size: 1rem;
                --mud-typography-caption-weight: 400;
                --mud-typography-caption-lineheight: 1.66;
                --mud-typography-caption-letterspacing: .03333em;
                --mud-typography-caption-text-transform: none;
                --mud-typography-overline-family: var(--font-family-base);
                --mud-typography-overline-size: 1rem;
                --mud-typography-overline-weight: 400;
                --mud-typography-overline-lineheight: 2.66;
                --mud-typography-overline-letterspacing: .08333em;
                --mud-typography-overline-text-transform: none;
                --mud-zindex-drawer: 1100;
                --mud-zindex-appbar: 1300;
                --mud-zindex-dialog: 1400;
                --mud-zindex-popover: 1200;
                --mud-zindex-snackbar: 1500;
                --mud-zindex-tooltip: 1600;
                --mud-native-html-color-scheme: light;
            }
            /* 공용 전체화면 로딩 오버레이 */
            .app-progress-overlay {
                position: fixed !important;
                inset: 0;
                z-index: 2000;
            }

            .app-progress-overlay-content {
                position: fixed;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            /*============= mudblazor 스타일 ==================*/
            .mud-picker-inline {
                width: 100px;
            }

            .mud-input-helper-text.mud-input-error, .mud-input-control-helper-container {
                display: none !important;
            }
            /* input 박스 */
            .list-search-panel .mud-input > input.mud-input-root, .list-search-panel div.mud-input-slot.mud-input-root {
                height: auto;
                padding: 0.4rem 0.2rem;
            }

            .list-search-panel .mud-input > input.mud-input-root-outlined, .list-search-panel div.mud-input-slot.mud-input-root-outlined {
                padding: 0.5rem;
            }
            /* input 박스 */
.mud-input-control.readonly .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input-control.readonly .mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-width: 1px;
    border-color: #f0f0f0;
}

            .mud-input-control.readonly .mud-input > input.mud-input-root,
            .mud-input-control.readonly div.mud-input-slot.mud-input-root {
                background: #fafafa;
            }

.mud-input-control.readonly.noclick .mud-input.mud-input-outlined.mud-input-adorned-end {
    background: #fafafa;
}

            .mud-input-control.b input {
                font-weight: 800 !important;
            }

            .app-numeric-field input[type="number"]::-webkit-outer-spin-button,
            .app-numeric-field input[type="number"]::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            .app-numeric-field input[type="number"] {
                -moz-appearance: textfield;
                appearance: textfield;
                text-align: right;
            }
            /*달력*/
            .list-search-panel .mud-icon-button {
                padding: 0.3rem;
            }

            .list-search-panel .mud-icon-button-edge-end {
                margin-right: 0;
            }

            .list-search-panel .mud-input-adornment-end {
                margin-left: 0;
                margin-inline-start: 0;
            }
            /*select*/
            .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end, .list-searchdiv.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
                padding-inline-start: 0.5rem;
            }

            .list-search-panel .mud-input.mud-input-outlined.mud-input-adorned-end {
                padding-right: 0.2rem;
                padding-inline-end: 0.2rem;
            }
            /*textarea*/
            .list-search-panel .mud-input > textarea.mud-input-root-outlined {
                margin-top: 0;
                padding: 0.5rem;
            }
/*숫자*/
.mud-input-number-control input {
    text-align: right;
    padding-right: 0.3rem !important;
}
.mud-input-adornment-text {
color: #888;
}
/* MudSelect 드롭다운은 body 하위 팝오버로 렌더링되어 컴포넌트 scoped CSS가 닿지 않으므로 전역 스타일로 처리 */
/*select*/
.mud-popover-provider .mud-list-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.mud-popover-provider .mud-list-item-text {
    margin: 0;
}

            .mud-popover-provider .mud-list-item-gutters {
                padding-left: 0.6rem;
                padding-right: 0.6rem;
            }

            .juso-search-dialog {
                min-height: 360px;
            }

            .juso-search-bar {
                display: flex;
                gap: 8px;
                margin-bottom: 12px;
            }

                .juso-search-bar input {
                    flex: 1;
                    min-width: 0;
                    height: 38px;
                    padding: 0 12px;
                    border: 1px solid #cbd5e1;
                    border-radius: 5px;
                    font-size: 14px;
                }

                .juso-search-bar .btn-find {
                    height: 38px;
                    padding: 0 18px;
                    font-size: 13px;
                }

            .juso-search-message {
                margin: 24px 0;
                color: #64748b;
                text-align: center;
                font-size: 13px;
            }

                .juso-search-message.error {
                    color: #dc2626;
                }

            .juso-result-list {
                max-height: 360px;
                overflow-y: auto;
                border-top: 1px solid #e2e8f0;
            }

            .juso-result {
                display: flex;
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
                padding: 12px 8px;
                border: 0;
                border-bottom: 1px solid #e2e8f0;
                background: #fff;
                color: #1e293b;
                text-align: left;
                cursor: pointer;
            }

                .juso-result:hover {
                    background: #eff6ff;
                }

                .juso-result strong {
                    color: #1d4ed8;
                    font-size: 14px;
                }

                .juso-result span,
                .juso-result small {
                    color: #64748b;
                    font-size: 12px;
                }