@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: 'Pretendard-Regular', sans-serif;
}

.toast-success {
    background-color: var(--color-success-500);
    color: #fff;
}

.toast-error {
    background-color: var(--color-error-500);
    color: #fff;
}

.toast-warning {
    background-color: var(--color-warning-500);
    color: #fff;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.backdrop-blur-\[12px\] {
    --tw-backdrop-blur: blur(12px);
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.text-brand-400 {
    color: var(--color-brand-400);
}

.bg-info-50 {
    background-color: var(--color-blue-light-50);
}

.bg-info-500 {
    background-color: var(--color-blue-light-500);
}

.hover-bg-info-50:hover {
    background-color: var(--color-blue-light-50);
}

.hover-text-brand-600:hover {
    color: var(--color-brand-600);
}

.hover-bg-error-600:hover {
    background-color: var(--color-error-600);
}

.hover-bg-warning-600:hover {
    background-color: var(--color-warning-600);
}

.hover-bg-success-600:hover {
    background-color: var(--color-success-600);
}

.hover-bg-gray-600:hover {
    background-color: var(--color-gray-600);
}

.hover-bg-success-500\/\[0\.16\]:hover {
    background-color: color-mix(in oklab, var(--color-success-500) 16%, transparent);
}

.hover-bg-theme-pink-500\/\[0\.16\]:hover {
    background-color: color-mix(in oklab, var(--color-theme-pink-500) 16%, transparent);
}

.hover-bg-theme-purple-500\/\[0\.16\]:hover {
    background-color: color-mix(in oklab, var(--color-theme-purple-500) 16%, transparent);
}

.line-height-0 {
    line-height: 0;
}

.text-\[11px\] {
    font-size: 11px;
}

.opacity-25 {
    opacity: 25%;
}

.bottom-5 {
    bottom: calc(var(--spacing) * 5);
}

.top-4 {
    top: calc(var(--spacing) * 4);
}

.bottom-4 {
    bottom: calc(var(--spacing) * 4);
}

.left-5 {
    left: calc(var(--spacing) * 5);
}

.ml-1 {
    margin-left: calc(var(--spacing) * 1);
}

.ml-2 {
    margin-left: calc(var(--spacing) * 2);
}

.ml-3 {
    margin-left: calc(var(--spacing) * 3);
}

.px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
}

.pt-1 {
    padding-top: calc(var(--spacing) * 1);
}

.pt-2 {
    padding-top: calc(var(--spacing) * 2);
}

.border-gray-400 {
    border-color: var(--color-gray-400);
}

.w-3 {
    width: calc(var(--spacing) * 3);
}

.w-\[50px\] {
    width: 50px;
}

.w-\[100px\] {
    width: 100px;
}

.w-\[150px\] {
    width: 150px;
}

.w-\[200px\] {
    width: 200px;
}

.w-\[250px\] {
    width: 250px;
}

.w-\[350px\] {
    width: 350px;
}

.w-\[20\%\] {
    width: 20%;
}

.w-\[25\%\] {
    width: 25%;
}

.max-w-\[500px\] {
    max-width: 500px;
}

.max-w-\[1000px\] {
    max-width: 1000px;
}

.max-h-\[60vh\] {
    max-height: 60vh;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.dark .invert {
    filter: invert(1);
}

body.dark .dark-text-gray-400\/50 {
    color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
}

body.dark .dark-bg-gray-700 {
    background-color: var(--color-gray-700);
}

body.dark .dark-text-gray-600 {
    color: var(--color-gray-600);
}

body.dark .dark-hover-text-brand-400:hover {
    color: var(--color-brand-400);
}

body.dark .dark-bg-white-20 {
    background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
}

body.dark .dark-hover-bg-white-7:hover {
    background-color: color-mix(in oklab, var(--color-white) 7%, transparent);
}

body.dark .dark-hover-bg-white-10:hover {
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

@media (min-width: 640px) {
    .sm\:h-screen {
        height: 100vh;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:justify-start {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .sm\:mb-0 {
        margin-bottom: 0;
    }

    .sm\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md\:mb-6 {
        margin-bottom: calc(var(--spacing) * 6);
    }

    .md\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }

    .lg\:sticky {
        position: sticky;
    }

    .lg\:text-title-sm {
        font-size: var(--text-title-sm);
        line-height: var(--tw-leading, var(--text-title-sm--line-height));
    }

    .lg\:text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .lg\:mt-2 {
        margin-top: calc(var(--spacing) * 2);
    }

    .lg\:mt-5 {
        margin-top: calc(var(--spacing) * 5);
    }

    .lg\:mt-10 {
        margin-top: calc(var(--spacing) * 10);
    }

    .lg\:mb-5 {
        margin-bottom: calc(var(--spacing) * 5);
    }

    .lg\:mb-10 {
        margin-bottom: calc(var(--spacing) * 10);
    }

    .lg\:px-10 {
        padding-inline: calc(var(--spacing) * 10);
    }

    .lg\:py-10 {
        padding-block: calc(var(--spacing) * 10);
    }

    .lg\:gap-4 {
        gap: calc(var(--spacing) * 4);
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }
}

/* 연차, 대체휴무 관리 */
body.dark .management .flatpickr-calendar {
    background-color: transparent !important;
}

.management .flatpickr-calendar.inline {
    top: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    border: none;
    border-radius: 0 !important;
    background: none;
    box-shadow: none;
}

.management .flatpickr-current-month {

    padding: 2px 0 0;
}

.management .flatpickr-months {
    width: 279px;
    position: relative;
}

.management .flatpickr-months .flatpickr-prev-month {

    left: 10px !important;
    top: 9px !important;
}

.management .flatpickr-months .flatpickr-next-month {

    right: 10px !important;
    top: 9px !important;
}

.flatpickr-current-month .numInputWrapper {
    margin-left: 20px;
}

.management .flatpickr-current-month .flatpickr-monthDropdown-months {
    padding: 0;
}

.management .flatpickr-current-month input.cur-year {
    padding: 0;
}

.management .flatpickr-days {
    width: 279px;
}

.management .dayContainer {
    gap: 1px;
    -webkit-justify-content: normal;
    justify-content: normal;
    width: 279px;
    min-width: 279px;
    max-width: 279px;
}