body {
    margin: 0;
    height: 100vh;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    font-family: 'SUIT', 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: "tnum" 1;

    /* 페이지 스크롤은 SimpleBar(#appScrollRoot)가 전담한다.
       overflow-y 만 hidden 으로 두면 명세상 overflow-x 가 auto 로 계산돼,
       내용이 넘칠 때 네이티브 가로 스크롤바가 하나 더 생긴다.
       (SimpleBar 바와 겹쳐 스크롤바가 두 개로 보이던 원인) */
    overflow: hidden;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    min-width: 0;
}

/* =========================================================
   앱 셸 최소 너비

   데스크톱 업무 앱이라 아주 좁은 폭까지 레이아웃을 변형할 필요가 없다.
   1024px 아래에서는 화면에 맞추려 애쓰는 대신 페이지 전체가 가로로 밀린다.

   반드시 사이드바를 포함한 .wrapper 에 걸어야 한다.
   #content 에 걸면 margin-left: 290px 이 더해져
   실제 최소 폭이 290 + 값 이 되어버린다.
   (원래 #content 에 89rem 이 걸려 있어 최소 1714px 이었던 게 이 문제였다)

   상단바·사이드바는 position: fixed 라 이때 같이 밀리지 않는다.
   기존 동작 그대로다.

   로그인 화면(.wrapper 만 있고 app-shell 없음)은 사이드바 없는
   가운데 정렬 폼이라 어느 폭에서나 동작하므로 제외한다.
========================================================= */
.app-shell {
    min-width: 1024px;
}

/* 텍스트만 드래그 허용하고 싶을 때 allow-to-drag-text 클래스 넣기! */
.allow-to-drag-text {
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text
}

/* 크기 조절 */
.mh-46-custom {
    max-height: calc(100vh - 11rem);
}
.mh-15-custom {
    max-height: calc(100vh - 15rem);
}
.mh-calc-1704rem {
    max-height: calc(100vh - 17.04rem);
}
.mh-calc-22rem {
    max-height: calc(100vh - 22rem);
}
/* 최소 폭 유틸: 컨테이너보다 넓어지지 않도록 min()으로 캡을 씌운다.
   화면이 넓으면 기존과 동일하게 동작하고, 좁아지면 가로 스크롤 대신 컨테이너 폭을 따라간다. */
.mw-33 {
    min-width: min(33rem, 100%);
}
.mw-55 {
    min-width: min(55rem, 100%);
}

/* 너비 길이 조절 */
.w-custom-25 { width: 3rem; }
.w-custom-41 { width: 4.1rem !important; }
.w-custom-43 { width: 4.3rem; }
.w-custom-56 { width: 5.6rem; }

/* 라벨 색상 변경 */
.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    color: rgb(114 114 114 / 46%);
}

/*  */
.txt_darkblue> a, .txt_darkblue {
    color: #405472;
}
.txt_bold {
    font-weight: 600 !important;
}

.main-grid-page {
    min-height: 0;
    overflow: hidden;
    padding: 22px 28px 18px;
    gap: 12px;
}

.project-grid-title {
    overflow: hidden;
    color: var(--est-text);
    font-weight: 600;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-header-meta {
    font-size: 0.95em;
    color: #374151;
}

/* 모달 CSS */
.modal-title-custom {
    font-weight: bold;
    color: #2a2b6b;
}

/* 리스트 그룹 활성화 배경색 지정 */
.list-group-item.active {
    background-color: #414a58 !important;
    border-color: #414a58 !important;
}

/* 특정 너비 이하일 때, 회사 목록과 부서 목록 숨김 */
@media (max-width: 768px) {
    .dept-list, .company-list {
        display: none;
    }
}

/* 포커스 효과 제거 */
.form-control:focus, .form-select:focus {
    border-color: #dee2e6;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0);
}

.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.no_result {
    height: 100px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 1.1em;
}

/* 수정하기 삭제하기 모달창 */
.custom-popup {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #f6f6f6;
    border-radius: 10px;
    padding: 30px 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* 검색창 */
.search-container {
    display: flex;
    align-items: center;
    position: relative;
    width: auto;
    border: 1px solid #ccc; /* 전체 컨테이너에 테두리 적용 */
    border-radius: 5px;
    transition: border 0.3s ease, width 0.3s ease, padding 0.3s ease; /* 테두리와 너비 전환 애니메이션 */
    box-sizing: border-box;
    overflow: hidden; /* 내부 요소가 넘치지 않도록 설정 */
}
.search-btn {
    background-color: #ffffff;
    color: #232020;
    border: none; /* 버튼의 테두리 제거 */
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 0; /* 버튼의 둥근 테두리 제거 */
    transition: transform 0.3s ease; /* 부드러운 이동 */
    z-index: 10; /* 버튼이 위에 위치 */
}
.search__input {
    position: relative;
    padding: 5px 0;
    width: 0;
    border: none; /* input의 테두리 제거 */
    box-sizing: border-box;
    transition: width 0.5s ease, padding 0.3s ease; /* 너비 전환 */
    outline: none; /* 클릭 시 외곽선 제거 */
}
/* 열릴 때 스타일 */
.search-container.open .search__input {
    width: 300px; /* 검색창이 넓어짐 */
    margin-right: 4px;
}
.search-container.open {
    border: 1px solid #ccc; /* 열렸을 때 테두리 스타일 유지 */
}

/* border */
.box-border {
    box-sizing: border-box;
}

/* paging */
.pagination a {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    font-size: 1.1em;
    line-height: 30px;
    color: #666;
    text-align: center;
    vertical-align: top;
    padding-top: 1px;
    text-decoration: none;
    cursor: pointer;
}

/* left를 고정 px로 주면 페이지마다 .pagination a의 폭/패딩이 달라서
   숫자 위치와 어긋난다(예: 어떤 곳은 left:10px, 어떤 곳은 left:0이어야
   숫자 밑에 옴) — <a> 박스 자체의 가로 중앙에 붙이면 위의 text-align:center
   덕에 숫자도 항상 박스 중앙에 있으니, 폭이 얼마든 항상 숫자 바로
   아래에 오게 된다. */
.pagination a.active:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 8px;
    height: 1px;
    background: #4453e4;
    transform: translateX(-50%);
}

.pagination a.active {
    font-weight: 700;
    color: #4453e4;
}

.pagination a:hover {
    color: #222;
}

.pagination a:hover:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 8px;
    height: 1px;
    background: #000;
    transform: translateX(-50%);
}

.pagination-btn {
    background-color: #fff;
    border-color: transparent !important;
    box-sizing: border-box;
    border: none;
}

.pagination-btn.disabled {
    cursor: not-allowed;
}

/* 체크박스 */
.form-check-input[type=checkbox] {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}
.form-check-input[type=checkbox]:disabled, .form-switch .form-check-input[type=checkbox]:disabled, .form-check-input[type=checkbox]:disabled + .form-check-label {
    pointer-events: auto;
    cursor: not-allowed;
}
.form-switch .form-check-input[type=checkbox] {
    cursor: pointer;
    width: 2em;
    height: 1em;
}

/* 부서 목록 액티브 효과 */
.data-list-container.active {
    background-color: #f7f7f7; /* 밝은 블루 */
    font-weight: bold;
    border-color: #f7f7f7;
}
/* 버튼 액티브 스타일 없애기 */
#data-tree button.btn:active, button.btn.bg-cool-100:active {
    color: var(--bs-btn-active-color);
    background-color: #f7f7f7;
    border-color: #f7f7f7;
}

.btn.hover\:\!bg-error-50:active {
    border-color: rgb(255 241 234/var(--tw-bg-opacity))
}

.btn.hover\:bg-choco-400:active {
    border-color: rgb(140 131 122 / var(--tw-bg-opacity));
    background-color: rgb(140 131 122 / var(--tw-bg-opacity));
}

.border_line {
    height: 1px;
    width: 100%;
    margin: 1em 0;
    --tw-bg-opacity: 1;
    background-color: rgb(233 233 233 / var(--tw-bg-opacity));
}

.border_line_bottom {
    --tw-bg-opacity: 1;
    border-bottom: 1px solid rgb(233 233 233/var(--tw-bg-opacity));
}

.border_line_top {
    --tw-bg-opacity: 1;
    border-top: 1px solid rgb(233 233 233/var(--tw-bg-opacity));
}

.border_line_vertical {
    min-height: 1.2em;
    width: 1px;
    margin: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(233 233 233 / var(--tw-bg-opacity));
}

.border_table_line_top {
    height: 1px;
    width: 100%;
    margin-top: 1em;
    --tw-bg-opacity: 1;
    background-color: #f2f2f2;
}

/* 기본적으로 아이콘 숨김 */
.data-list-container .hover-icon {
    opacity: 0; /* 투명하게 숨김 */
    transition: opacity 0.1s ease-in-out; /* 부드러운 애니메이션 */
}

/* 부모 요소에 hover하면 아이콘이 나타남 */
.data-list-container:hover .hover-icon {
    opacity: 1; /* 완전히 표시 */
}

.user_perm_role_list {
    grid-template-columns: 5fr 5fr;
    gap: 20px;
}

.dropdown-menu.dropdown-align-right {
    text-align: right;
}

.pg-header {
    height: 71px;
}