@font-face {
    font-family: 'Lucida';
    src: url('/fonts/LucidaHandwritingStdBold.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}



:root {
    --custom-accent-color: #f77e0b;
}

/* Reset */
p {
    margin-bottom: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

a.disabled {
    /*pointer-events: none;*/
    cursor: not-allowed;
}

.ui-widget.ui-widget-content {
    z-index: 1000 !important;
}

a.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-title {
    font-family: 'Lucida';
    font-weight: bold;
    font-size: 30px;
}

.btn.popup {
    height: auto !important;
}

.ql-toolbar.ql-snow {
    background-color: #F0F0F0;
    padding: 3px 8px !important;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow.ql-disabled {
    border-top: 1px solid #ccc;
}

.ui-datepicker-trigger {
    display: none !important;
}

.sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    left: 0;
    background: red !important;
}


.editor-viewer table td {
    border-style: solid;
    border-width: 1px;
    padding: 4px;
}


@media print {
    body {
        margin: 0;
        padding: 0;
        background: white;
        zoom: 1 !important;
    }

    .page-main.pdf {
        width: 1200px;
        margin: 0 auto;
        transform: scale(1);
        transform-origin: top center;
    }


    table.pdf {
        width: 100%;
    }

    table.pdf th {
        font-size: 13px;
        font-weight: bold;
        background-color: #F0F0F0;
        padding: 8px 6px;
        border-bottom: 2px solid black;
        text-align: left;
        color: black;
    }

    table.pdf td {
        font-size: 13px;
        font-weight: normal;
        padding: 6px 6px;
        border-bottom: 1px solid black;
        text-align: left;
        color: black;
    }

}


.access-control-link {
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.jstree-wrapper {
    border: 1px solid var(--main-light-2);
    width: 100%;
    position: relative;
}

.jstree-scroll {
    width: 100%;
    height: 200px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

.jstree-wrapper .message {
    /*position: absolute;*/
    /*bottom: 0;*/
    background-color: white;
    opacity: 0.8;
    padding: 10px;
    color: #666;
}

.tree-board-wrapper {
    padding: 3px 0;
    height: 200px;
    overflow: auto;
    border: 1px solid var(--main-light-2);
}

.tree-board {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 8px;
    flex-direction: column;
    padding: 10px;
}


#notice-form .editor-viewer {
    height: auto;
    max-height: 500px;
    display: block;
    line-height: 1.3;
}


p.help {
    margin: 10px 0;
    font-size: 0.85em;
    color: #666;
}

.tree-board .node input {
    margin-right: 4px;
}

.disabled .icon {
    opacity: 0.5;
}
.hidden {
    display: none;
}
/*.disabled {*/
/*    color: #a6a6a6;*/
/*}*/
/**:disabled {*/
/*    color: #a6a6a6;*/
/*}*/

/* 스피너 스타일 */
#spinner {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* 다른 요소 위에 표시되도록 설정 */
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/* 스피너 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Util */
/* Margin Utilities */
.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 20px; }

.mx-1 { margin-left: 4px; margin-right: 4px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.mx-3 { margin-left: 12px; margin-right: 12px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }
.mx-5 { margin-left: 20px; margin-right: 20px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; }
.mr-5 { margin-right: 20px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 12px; }
.ml-4 { margin-left: 16px; }
.ml-5 { margin-left: 20px; }

/* Padding Utilities */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 20px; }

/* Flex Utilities */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

/* Text Utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-bold { font-weight: bold; }
.text-italic { font-style: italic; }

/* Display Utilities */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

/* Width and Height Utilities */
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

/* Border Utilities */
.border { border: 1px solid #ddd; }
.border-none { border: none; }
.border-radius-sm { border-radius: 4px; }
.border-radius-md { border-radius: 8px; }
.border-radius-lg { border-radius: 12px; }

/* UI */
.test {
    border: 1px solid red;
}

.template {
    display: none !important;
}

.input {
    padding: 0 6px;
}

input[data-format="number"] {
    text-align: right;
}

.input-box .icon.calendar-icon {
    cursor: pointer;
}

.input-box {
    padding-left: 0;
    padding-right: 0;
}
.input-box-text {
    padding: 0 6px;
}

.input.date {
    width: 90px;
}
.dg-cell .input.date {
    width: 100%;
}

.input-box.error {
    border: 1px solid var(--error-color);
}
.input-box .icon {
    margin-right: 6px;
}

input:disabled {
    background-color: white;
    /*color: #a6a6a6;*/
}

.textarea.row-4 {
    height: 5.5rem;
}



.required::after {
    content: '*';
    color: var(--custom-accent-color);
    font-size: 0.75em;
    vertical-align: super;
    margin-left: 2px;
}
.check-label input:disabled ~ .check-label-text {
    color: #a6a6a6;
}
.check-label-mark:after {
    content: "";
    position: absolute;
    display: none;
}
.check-label input:checked ~ .check-label-mark:after {
    display: block;
}
.check-label input:hover ~ .check-label-mark {
    background-color: #fef1e7;
}
.check-label input:checked ~ .check-label-mark {
    border-color: #f77e0b;
}
.check-label input:disabled ~ .check-label-mark {
    opacity: 0.5;
}

.check-label .check-label-mark:after {
    left: 3.5px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid #f77e0b;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.drop-selected:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 5px;
    height: 5px;
    border: solid #8c8c8c;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg) translateY(-100%);
}
/* Grid */
.dg-row:hover .dg-cell {
    background-color: rgba(247, 126, 11, 0.1);
}
.dg-row .dg-cell.input {
    padding: 3px;
}
.dg-row .dg-cell:first-child {
    border-left: none;
}
.dg-row .dg-cell:last-child {
    border-right: none;
}
.dg-body .data-grid > .dg-row:last-child .dg-cell {
    border-bottom: none;
}
.dg-body > .dg-row-grp:last-child > .dg-row:last-child .dg-cell {
    border-bottom: none;
}
.dg-cell.empty {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
}
.dg-cell {
    /*overflow-wrap: anywhere;*/
    overflow-wrap: break-word;
}
.dg-cell-input {
    padding: 3px;
}
/* 스크롤 바의 너비 조절 */
/* width */
.data-grid-wrapper::-webkit-scrollbar {
    width: 15px;
}
/* Track */
.data-grid-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* Handle */
.data-grid-wrapper::-webkit-scrollbar-thumb {
    background: #888;
}
/* Handle on hover */
.data-grid-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.data-grid-wrapper {
    height: auto;
    max-height: unset;
    min-height: 100px;
}


.grid .gd-cell {
    border-bottom: 1px solid #666;
}
.data-grid-wrapper.simple .dg-cell {
    border-left: none;
    border-right: none;
}

.dg-input {
    height: 100%;
    display: inline-block;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
}

.tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 9999;
}




.page-section {
    margin: 10px auto 20px;
}
.search-bar {
    margin-bottom: 10px;
}
.pg-sec-title-bar {
    margin-bottom: 0;
}

/* Webflow override */
.form-grid.query-form {
    grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(160px, 2fr) 30px;
}
.form-grid.project-role-form.body {
    overflow: visible;
    padding-bottom: 30px;
}


.data-grid-wrapper.lg {
    max-height: 65vh;
}

.modal-main-wrapper {
    margin-bottom: 30px;
}
.modal-main {
    overflow: auto;
    max-height: 85vh;
}
.modal-win.wide {
    max-width: 1100px;
}
.modal-win.big {
    min-width: 80vw;
    max-width: 90vw;
}

.modal-sec-content.scroll {
    overflow: unset;
    overflow-y: auto;
}

.modal-content.scroll {
    overflow: auto;
}

.tag .icon {
    display: flex;
    align-items: center;
    margin-top: 1px;
    margin-left: 4px;
}
.tag .icon svg {
    width: 12px;
    height: 12px;
}
.tag .icon.del {
    cursor: pointer;
}

.data-grid .resize-handle {
    width: 8px;
    height: 100%;
    background: transparent;
    position: absolute;
    right: -4px;
    top: 0;
    cursor: col-resize;
    z-index: 1;
}

.data-grid .resize-handle:hover {
    background: rgba(0, 0, 255, 0.1);
}

.dg-head-icon.active {
    padding-left: inherit;
    position: static;
}


.data-grid.body {
    height: auto !important;
}
.data-grid .dg-cell {
    overflow-wrap: anywhere !important;
}

.data-grid.body.query-form-result-grid.h-210 {
    overflow: unset !important;
}

.input-box-wrapper.disabled {
    opacity: .5;
    pointer-events: none;
}

.editor-viewer {
    padding: 6px;
    min-height: 100px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.editor-viewer a {
    color: #f77e0b;
    text-decoration: underline;
}


.mode-r .input-box-wrapper.disabled {
    opacity: 0.8;
    pointer-events: none;
}


.mode-r .select2-container--default.select2-container--disabled .select2-selection--single {
    opacity: 0.8;
}
.mode-r .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0d0d0d;
}

.modal-win.project-edit {
    width: auto;
    min-width: 800px;
}

.pg-sec-title-bar {
    text-wrap-mode: nowrap;
}

.file-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    height: auto;
    min-height: 60px;
}
.file-box .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.file-box .file-item .item-content {
    display: flex;
    align-items: center;
}

.file-box .file-item .icon {
    margin-right: 6px;
}

.file-box .file-item .icon svg {
    width: 24px;
    height: 24px;
}

.file-box .file-item .file-name {
    text-decoration: none;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-box .file-item .file-size {
    font-size: 0.75em;
    color: #666;
}

.file-box .file-item .file-remove-btn {
    margin-left: 6px;
    cursor: pointer;
}



#organization {
    list-style: none;
    padding: 0;
}
#organization li {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #ddd;
    margin: 5px 0;
}
.selected {
    background-color: #f0f0f0;
}

.form-desc {
    font-size: 0. nineem;
    color: #999;
    margin-top: 20px;
}