/* _content/SWMes.SFrame_EAM/Component/Common/LoadingNotification.razor.rz.scp.css */
/* ==============================================
   Loading Notification Component Styles
   - Modern design with company color scheme
   - Responsive and accessible
   - Smooth animations and transitions
   ============================================== */

/* Overlay - Base Styles */
.loading-notification-overlay[b-7xuwfuo2l8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 82, 131, 0.15); /* Primary color with transparency */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Full Screen Mode (Default) */
.loading-notification-overlay.full-screen[b-7xuwfuo2l8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

/* Container Scoped Mode */
    .loading-notification-overlay.container-scoped[b-7xuwfuo2l8] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        /* Match container styling */
        /*border-radius: 8px; */

        background: var(--background-color-main-stack) !important;
        box-shadow: var(--rz-card-shadow);
        border: var(--rz-boder-variant-filled) !important;
        border-radius: var(--rz-card-border-radius);
    }

.loading-notification-overlay.show[b-7xuwfuo2l8] {
    opacity: 1;
    visibility: visible;
}

.loading-notification-overlay.hide[b-7xuwfuo2l8] {
    opacity: 0;
    visibility: hidden;
}

/* Container - Base Styles */
.loading-notification-container[b-7xuwfuo2l8] {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 
        0 20px 25px -5px rgba(46, 82, 131, 0.1),
        0 10px 10px -5px rgba(46, 82, 131, 0.04),
        0 0 0 1px rgba(46, 82, 131, 0.05);
    padding: 2rem;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(46, 82, 131, 0.08);
}

/* Container - Full Screen Mode */
.loading-notification-overlay.full-screen .loading-notification-container[b-7xuwfuo2l8] {
    min-width: 320px;
    max-width: 480px;
    width: 90vw;
}

/* Container - Container Scoped Mode */
.loading-notification-overlay.container-scoped .loading-notification-container[b-7xuwfuo2l8] {
    min-width: 280px;
    max-width: 400px;
    width: 80%;
    padding: 1.5rem;
    box-shadow: 
        0 10px 15px -3px rgba(46, 82, 131, 0.1),
        0 4px 6px -2px rgba(46, 82, 131, 0.05);
}

.loading-notification-overlay.show .loading-notification-container[b-7xuwfuo2l8] {
    transform: scale(1) translateY(0);
}

/* Content Layout */
.loading-notification-content[b-7xuwfuo2l8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

/* Spinner Styles */
.loading-spinner[b-7xuwfuo2l8] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-ring[b-7xuwfuo2l8] {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.spinner-ring div[b-7xuwfuo2l8] {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 48px;
    height: 48px;
    margin: 8px;
    border: 4px solid transparent;
    border-radius: 50%;
    animation: spin-b-7xuwfuo2l8 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring div:nth-child(1)[b-7xuwfuo2l8] {
    border-top-color: #2e5283; /* Primary color */
    animation-delay: -0.45s;
}

.spinner-ring div:nth-child(2)[b-7xuwfuo2l8] {
    border-top-color: #0077be; /* Secondary color */
    animation-delay: -0.3s;
}

.spinner-ring div:nth-child(3)[b-7xuwfuo2l8] {
    border-top-color: #16A085; /* Accent color */
    animation-delay: -0.15s;
}

.spinner-ring div:nth-child(4)[b-7xuwfuo2l8] {
    border-top-color: #3c6db5; /* Light primary */
    animation-delay: 0;
}

@keyframes spin-b-7xuwfuo2l8 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Message Styles */
.loading-message[b-7xuwfuo2l8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.loading-title[b-7xuwfuo2l8] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2e5283; /* Primary color */
    margin: 0;
    font-family: 'PretendardVariable', sans-serif;
    letter-spacing: -0.025em;
}

.loading-description[b-7xuwfuo2l8] {
    font-size: 0.95rem;
    color: #556477; /* Matching grid header color */
    margin: 0;
    line-height: 1.5;
    font-family: 'PretendardVariable', sans-serif;
}

/* Progress Bar */
.loading-progress[b-7xuwfuo2l8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.progress-bar[b-7xuwfuo2l8] {
    width: 100%;
    height: 8px;
    background-color: #f3f3f5; /* Matching viewer-top background */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill[b-7xuwfuo2l8] {
    height: 100%;
    background: linear-gradient(90deg, #2e5283 0%, #0077be 50%, #16A085 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-fill[b-7xuwfuo2l8]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: shimmer-b-7xuwfuo2l8 1.5s infinite;
}

@keyframes shimmer-b-7xuwfuo2l8 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-text[b-7xuwfuo2l8] {
    font-size: 0.875rem;
    color: #2e5283;
    font-weight: 500;
    text-align: center;
    font-family: 'PretendardVariable', sans-serif;
}

/* Cancel Button */
.loading-actions[b-7xuwfuo2l8] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
}

.loading-cancel-btn[b-7xuwfuo2l8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: #6C757D; /* Matching setting button */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: 'PretendardVariable', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.loading-cancel-btn:hover[b-7xuwfuo2l8] {
    background-color: #242729; /* Matching hover state */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

.loading-cancel-btn:focus[b-7xuwfuo2l8] {
    outline: 2px solid #2e5283;
    outline-offset: 2px;
}

.loading-cancel-btn:active[b-7xuwfuo2l8] {
    transform: translateY(0);
}

.cancel-icon[b-7xuwfuo2l8] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* Responsive Design */
@media (max-width: 480px) {
    /* Full Screen Mode */
    .loading-notification-overlay.full-screen .loading-notification-container[b-7xuwfuo2l8] {
        padding: 1.5rem;
        min-width: 280px;
        margin: 1rem;
    }
    
    /* Container Scoped Mode */
    .loading-notification-overlay.container-scoped .loading-notification-container[b-7xuwfuo2l8] {
        padding: 1rem;
        min-width: 240px;
        width: 90%;
    }
    
    .loading-title[b-7xuwfuo2l8] {
        font-size: 1.125rem;
    }
    
    .loading-description[b-7xuwfuo2l8] {
        font-size: 0.875rem;
    }
    
    .spinner-ring[b-7xuwfuo2l8] {
        width: 56px;
        height: 56px;
    }
    
    .spinner-ring div[b-7xuwfuo2l8] {
        width: 40px;
        height: 40px;
        margin: 8px;
        border-width: 3px;
    }
}

/* Container Scoped - Additional Styling */
.loading-notification-overlay.container-scoped .loading-content[b-7xuwfuo2l8] {
    gap: 1rem; /* Reduce gap in container mode */
}

.loading-notification-overlay.container-scoped .spinner-ring[b-7xuwfuo2l8] {
    width: 48px;
    height: 48px;
}

.loading-notification-overlay.container-scoped .spinner-ring div[b-7xuwfuo2l8] {
    width: 36px;
    height: 36px;
    margin: 6px;
    border-width: 3px;
}

.loading-notification-overlay.container-scoped .loading-title[b-7xuwfuo2l8] {
    font-size: 1.125rem;
}

.loading-notification-overlay.container-scoped .loading-description[b-7xuwfuo2l8] {
    font-size: 0.875rem;
}

/* Dark Theme Support */
:root[data-theme="dark"] .loading-notification-container[b-7xuwfuo2l8] {
    background: rgba(51, 51, 51, 0.98);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.3),
        0 10px 10px -5px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .loading-title[b-7xuwfuo2l8] {
    color: #FFC107; /* Dark theme primary */
}

:root[data-theme="dark"] .loading-description[b-7xuwfuo2l8] {
    color: #E0E0E0; /* Dark theme text */
}

:root[data-theme="dark"] .progress-bar[b-7xuwfuo2l8] {
    background-color: #1E1E1E;
}

:root[data-theme="dark"] .progress-text[b-7xuwfuo2l8] {
    color: #FFC107;
}

:root[data-theme="dark"] .loading-cancel-btn[b-7xuwfuo2l8] {
    background-color: #DC3545; /* Dark theme setting button */
}

:root[data-theme="dark"] .loading-cancel-btn:hover[b-7xuwfuo2l8] {
    background-color: #E77883;
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    .loading-notification-overlay[b-7xuwfuo2l8],
    .loading-notification-container[b-7xuwfuo2l8],
    .progress-fill[b-7xuwfuo2l8],
    .loading-cancel-btn[b-7xuwfuo2l8] {
        transition: none;
    }
    
    .spinner-ring div[b-7xuwfuo2l8] {
        animation: none;
        border-top-color: #2e5283;
        border-right-color: #2e5283;
        border-bottom-color: #2e5283;
        border-left-color: transparent;
    }
    
    .progress-fill[b-7xuwfuo2l8]::after {
        animation: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .loading-notification-container[b-7xuwfuo2l8] {
        border: 2px solid #2e5283;
        background: white;
    }
    
    .loading-title[b-7xuwfuo2l8] {
        color: #000;
    }
    
    .loading-description[b-7xuwfuo2l8] {
        color: #333;
    }
    
    .loading-cancel-btn[b-7xuwfuo2l8] {
        border: 2px solid #000;
    }
}
/* _content/SWMes.SFrame_EAM/Component/Common/SWFileUploader.razor.rz.scp.css */
/* 기본 상태에서는 긴 텍스트 표시, 짧은 텍스트 숨김 */
.file-label-text-long[b-wukyo3xkx4] {
    display: inline;
}

.file-label-text-short[b-wukyo3xkx4] {
    display: none;
}
/* 파일업로드 */
.file-upload-area[b-wukyo3xkx4] {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    width: 100%;
}

.file-header[b-wukyo3xkx4] {
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 0px 5px 0px;
    margin-bottom: 15px;
}

.file-title[b-wukyo3xkx4] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #333;
}

    .file-title .rz-icon[b-wukyo3xkx4] {
        margin-right: 8px;
        color: #3b7eff;
    }

.file-upload-container[b-wukyo3xkx4] {
    display: flex;
    justify-content: space-between;
    padding: 0 15px 15px;
    align-items: center;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 허용 */
    gap: 10px; /* 요소 간 간격 */
}

.custom-file[b-wukyo3xkx4] {
    position: relative;
    flex-grow: 1;
    margin-right: 10px;
    min-width: 200px; /* 최소 너비 설정 */
}

.custom-file-label[b-wukyo3xkx4] {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 15px;
    background-color: #f5f8fd;
    border: 1px dashed #3b7eff;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    overflow: hidden;
    text-overflow: ellipsis; /* 너비가 좁아지면 텍스트 말줄임표 표시 */
}

/* 모바일 버전용 레이블 텍스트 클래스 */
.file-label-text[b-wukyo3xkx4] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-file-label .rz-icon[b-wukyo3xkx4] {
    margin-right: 8px;
    color: #3b7eff;
    flex-shrink: 0; /* 아이콘 크기 유지 */
}

.custom-file-label:hover[b-wukyo3xkx4] {
    background-color: #edf2fd;
}

.file-upload-btn[b-wukyo3xkx4] {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 12px;
    height: 40px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

    .file-upload-btn .rz-icon[b-wukyo3xkx4] {
        margin-right: 5px;
        color: #ff5252;
    }

    .file-upload-btn:hover[b-wukyo3xkx4] {
        background-color: #f0f0f0;
    }

.selected-files-area[b-wukyo3xkx4] {
    padding: 0 15px 10px;
    height: auto;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

    /* 스크롤바 스타일 추가 */
    .selected-files-area[b-wukyo3xkx4]::-webkit-scrollbar {
        width: 6px;
    }

    .selected-files-area[b-wukyo3xkx4]::-webkit-scrollbar-track {
        background: #f3f4f6;
        border-radius: 10px;
    }

    .selected-files-area[b-wukyo3xkx4]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 10px;
    }

        .selected-files-area[b-wukyo3xkx4]::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

.file-list[b-wukyo3xkx4] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.file-item[b-wukyo3xkx4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid #16A085;
    border-top: 1px solid lavender;
    border-bottom: 1px solid lavender;
    border-right: 1px solid lavender;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 가능하도록 */
}

.file-item-error[b-wukyo3xkx4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    background-color: rgba(255, 137, 139, 0.3);
    color: #de0024;
    border-radius: 4px;
    border-left: 3px solid #de0024;
    border-top: 1px solid lavender;
    border-bottom: 1px solid lavender;
    border-right: 1px solid lavender;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 가능하도록 */
}

.file-info[b-wukyo3xkx4] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* flex item이 너무 작아지지 않도록 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
}

    .file-info .rz-icon[b-wukyo3xkx4] {
        margin-right: 8px;
        color: #3b7eff;
        flex-shrink: 0; /* 아이콘 크기 유지 */
    }

.file-name[b-wukyo3xkx4] {
    margin-left: 5px;
    margin-right: 10px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 긴 파일명 말줄임표로 표시 */
    max-width: 200px; /* 최대 너비 설정 */
}

.file-name-error[b-wukyo3xkx4] {
    margin-left: 5px;
    margin-right: 10px;
    font-size: 13px;
    color: #de0024;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.file-size[b-wukyo3xkx4] {
    font-size: 12px;
    color: #888;
    white-space: nowrap; /* 크기 표시가 줄바꿈되지 않도록 */
    flex-shrink: 0; /* 크기 축소 방지 */
}

.file-remove-btn[b-wukyo3xkx4] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0; /* 버튼 크기 유지 */
}

    .file-remove-btn:hover[b-wukyo3xkx4] {
        background-color: #f0f0f0;
        color: #ff5252;
    }

.file-actions[b-wukyo3xkx4] {
    display: flex;
    align-items: center;
    margin-left: auto; /* 우측 정렬 */
    flex-shrink: 0; /* 크기 축소 방지 */
}

.file-download-btn[b-wukyo3xkx4] {
    background: none;
    border: none;
    color: #3b7eff;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-right: 4px;
    flex-shrink: 0; /* 버튼 크기 유지 */
}

    .file-download-btn:hover[b-wukyo3xkx4] {
        background-color: #edf2fd;
        color: #2c6cef;
    }

.no-files[b-wukyo3xkx4] {
    text-align: center;
    color: #888;
    padding: 15px;
    font-style: italic;
    font-size: 14px;
}

/* 모바일 대응 미디어 쿼리 */
@media (max-width: 768px) {
    .file-upload-container[b-wukyo3xkx4] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-file[b-wukyo3xkx4] {
        margin-right: 0;
        /*   margin-bottom: 5px;*/
        width: 100%;
    }

    .file-upload-btn[b-wukyo3xkx4] {
        width: 100%;
        justify-content: center;
    }

    .file-name[b-wukyo3xkx4] {
        max-width: 150px;
    }

    .file-name-error[b-wukyo3xkx4] {
        max-width: 150px;
    }

    /* 모바일용 파일 선택 레이블 텍스트 조정 */
    .file-label-text-long[b-wukyo3xkx4] {
        display: none;
    }

    .file-label-text-short[b-wukyo3xkx4] {
        display: inline;
    }
}

/* 작은 모바일 화면 */
@media (max-width: 576px) {
    .file-item[b-wukyo3xkx4] {
        flex-direction: column;
        align-items: flex-start;
    }

    .file-info[b-wukyo3xkx4] {
        width: 100%;
        margin-bottom: 8px;
    }

    .file-actions[b-wukyo3xkx4] {
        width: 100%;
        justify-content: flex-end;
    }

    .file-name[b-wukyo3xkx4], .file-name-error[b-wukyo3xkx4] {
        max-width: 200px; /* 작은 화면에서는 더 넓게 표시 */
    }

    .selected-files-area[b-wukyo3xkx4] {
        max-height: 250px; /* 모바일에서 스크롤 영역 높이 조정 */
    }
}

/* 터치 디바이스를 위한 상호작용 개선 */
@media (hover: none) {
    .file-upload-btn:active[b-wukyo3xkx4],
    .file-remove-btn:active[b-wukyo3xkx4],
    .file-download-btn:active[b-wukyo3xkx4] {
        opacity: 0.7;
    }

    /* 터치 기기를 위한 버튼 크기 증가 */
    .file-remove-btn[b-wukyo3xkx4],
    .file-download-btn[b-wukyo3xkx4] {
        padding: 8px;
    }
}

/* 초소형 화면 (320px 이하) */
@media (max-width: 320px) {
    .file-header[b-wukyo3xkx4] {
        padding: 5px;
    }

    .file-upload-container[b-wukyo3xkx4] {
        padding: 0 10px 10px;
    }

    .selected-files-area[b-wukyo3xkx4] {
        padding: 0 10px 10px;
    }

    .file-item[b-wukyo3xkx4] {
        padding: 8px;
    }

    .file-name[b-wukyo3xkx4],
    .file-name-error[b-wukyo3xkx4] {
        max-width: 160px;
        font-size: 12px;
    }

    .file-size[b-wukyo3xkx4] {
        font-size: 11px;
    }
}
/* _content/SWMes.SFrame_EAM/Component/Common/SWGallery.razor.rz.scp.css */
/* 이미지 뷰어 전체 CSS 코드 - 데스크탑/모바일 반응형 */

.list-container[b-b8l6ystox3] {
    background-color: #f8f9fa;
    border-radius: 8px;
    min-height: 400px;
    max-height: 510px; /* 최대 높이 제한으로 스크롤 생성 */
    overflow-y: auto;
    padding: 15px;
    margin-top: 15px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

    .list-container[b-b8l6ystox3]::-webkit-scrollbar {
        width: 8px;
    }

    .list-container[b-b8l6ystox3]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .list-container[b-b8l6ystox3]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

        .list-container[b-b8l6ystox3]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

#ImageItems[b-b8l6ystox3] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: start;
}

/* 모던 갤러리 스타일 */
.modern-gallery[b-b8l6ystox3] {
    width: 100%;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

/* 갤러리 컨테이너 */
.gallery-container[b-b8l6ystox3] {
    width: 100%;
    height: 100%;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

    /* 스크롤바 스타일 */
    .gallery-container[b-b8l6ystox3]::-webkit-scrollbar {
        width: 6px;
    }

    .gallery-container[b-b8l6ystox3]::-webkit-scrollbar-track {
        background: #f3f4f6;
        border-radius: 10px;
    }

    .gallery-container[b-b8l6ystox3]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 10px;
    }

        .gallery-container[b-b8l6ystox3]::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

/* 갤러리 그리드 레이아웃 */
.gallery-grid[b-b8l6ystox3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    padding: 5px;
}

/* 갤러리 아이템 */
.gallery-item[b-b8l6ystox3] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

    .gallery-item:hover[b-b8l6ystox3] {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

/* 이미지 래퍼 */
.image-wrapper[b-b8l6ystox3] {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 비율 */
    overflow: hidden;
}

    .image-wrapper img[b-b8l6ystox3] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease, opacity 0.3s ease;
        opacity: 0;
        border-radius: 12px 12px 0 0;
    }

    .image-wrapper:hover img[b-b8l6ystox3] {
        transform: scale(1.05);
    }

/* 로딩 스피너 */
.loading-spinner[b-b8l6ystox3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .loading-spinner.hidden[b-b8l6ystox3] {
        opacity: 0;
        visibility: hidden;
    }

.spinner-circle[b-b8l6ystox3] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(100, 116, 139, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-b8l6ystox3 1s linear infinite;
}

@keyframes spin-b-b8l6ystox3 {
    to {
        transform: rotate(360deg);
    }
}

/* 이미지 툴바 (기존 오버레이 스타일) */
.image-tools[b-b8l6ystox3] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.image-wrapper:hover .image-tools[b-b8l6ystox3] {
    opacity: 1;
    transform: translateY(0);
}

.tool-button[b-b8l6ystox3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.9);
    color: #4b5563;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .tool-button:hover[b-b8l6ystox3] {
        background-color: white;
        transform: scale(1.1);
    }

.view-button:hover[b-b8l6ystox3] {
    color: #3b82f6;
}

.delete-button:hover[b-b8l6ystox3] {
    color: #ef4444;
}

/* 이미지 캡션 */
.image-caption[b-b8l6ystox3] {
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: white;
    border-bottom: 1px solid #f1f1f1;
}

/* 이미지 액션 버튼 영역 */
.image-actions[b-b8l6ystox3] {
    display: none; /* 기본적으로 숨김 처리 (데스크탑) */
    justify-content: space-between;
    padding: 8px;
    background-color: white;
}

/* 액션 버튼 스타일 */
.action-button[b-b8l6ystox3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    border: none;
    background-color: white;
    color: #4b5563;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .action-button:hover[b-b8l6ystox3] {
        background-color: #f9fafb;
    }

    .action-button i[b-b8l6ystox3] {
        font-size: 14px;
    }

    .action-button.view-button[b-b8l6ystox3] {
        color: #3b82f6;
    }

        .action-button.view-button:hover[b-b8l6ystox3] {
            color: #2563eb;
        }

    .action-button.delete-button[b-b8l6ystox3] {
        color: #ef4444;
    }

        .action-button.delete-button:hover[b-b8l6ystox3] {
            color: #dc2626;
        }

/* 라이트박스 스타일 */
.lightbox-backdrop[b-b8l6ystox3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn-b-b8l6ystox3 0.3s ease;
}

@keyframes fadeIn-b-b8l6ystox3 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lightbox-window[b-b8l6ystox3] {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 90%;
    max-height: 800px;
    background-color: rgba(30, 41, 59, 0.7);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: scaleIn-b-b8l6ystox3 0.3s ease;
}

@keyframes scaleIn-b-b8l6ystox3 {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}

/* 라이트박스 헤더 */
.lightbox-header[b-b8l6ystox3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: rgba(15, 23, 42, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-title[b-b8l6ystox3] {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.lightbox-actions[b-b8l6ystox3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lightbox-button[b-b8l6ystox3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .lightbox-button:hover:not(:disabled)[b-b8l6ystox3] {
        background-color: rgba(255, 255, 255, 0.25);
        transform: scale(1.1);
    }

    .lightbox-button:disabled[b-b8l6ystox3] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.counter[b-b8l6ystox3] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0 5px;
}

.spacer[b-b8l6ystox3] {
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 5px;
}

/* 라이트박스 바디 */
.lightbox-body[b-b8l6ystox3] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    position: relative;
}

/* 이미지 컨테이너 */
.image-container[b-b8l6ystox3] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

/* 드래그 가능한 이미지 */
.draggable-image[b-b8l6ystox3] {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    user-select: none;
    border-radius: 4px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    will-change: transform;
}

    .draggable-image.zoomedIn[b-b8l6ystox3] {
        cursor: grab;
    }

        .draggable-image.zoomedIn:active[b-b8l6ystox3] {
            cursor: grabbing;
        }

/* 빈 상태 컨테이너 */
.empty-state[b-b8l6ystox3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 400px;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    animation: fadeInUp-b-b8l6ystox3 0.5s ease forwards;
}

/* 빈 상태 아이콘 */
.empty-state-icon[b-b8l6ystox3] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: #f3f4f6;
    border-radius: 50%;
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

    .empty-state-icon i[b-b8l6ystox3] {
        font-size: 32px;
        color: #9ca3af;
    }

/* 빈 상태 제목 */
.empty-state-title[b-b8l6ystox3] {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

/* 빈 상태 설명 */
.empty-state-description[b-b8l6ystox3] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 32px;
    max-width: 400px;
}

/* 애니메이션 (선택 사항) */
@keyframes fadeInUp-b-b8l6ystox3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 대형 태블릿 및 소형 데스크톱 (992px 이하) */
@media (max-width: 992px) {
    .gallery-grid[b-b8l6ystox3] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 18px;
    }

    .lightbox-window[b-b8l6ystox3] {
        max-width: 95%;
    }
}

/* 태블릿 대응 (768px 이하) */
@media (max-width: 768px) {
    .gallery-grid[b-b8l6ystox3] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
    }

    .list-container[b-b8l6ystox3] {
        max-height: 510px;
    }

    .gallery-container[b-b8l6ystox3] {
        height: auto;
        max-height: 550px;
    }

    .lightbox-window[b-b8l6ystox3] {
        width: 95%;
        height: 95%;
    }

    .lightbox-title[b-b8l6ystox3] {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lightbox-button[b-b8l6ystox3] {
        width: 32px;
        height: 32px;
    }

    /* 라이트박스 액션 버튼 간소화 */
    .lightbox-actions[b-b8l6ystox3] {
        gap: 8px;
    }

    /* 빈 상태 조정 */
    .empty-state[b-b8l6ystox3] {
        height: 350px;
        padding: 30px;
    }

    .empty-state-icon[b-b8l6ystox3] {
        width: 70px;
        height: 70px;
    }

    .empty-state-title[b-b8l6ystox3] {
        font-size: 18px;
    }
}

/* 모바일 대응 (576px 이하) */
@media (max-width: 576px) {
    .list-container[b-b8l6ystox3] {
        padding: 10px;
        max-height: 400px;
        min-height: 300px;
        overflow-y: auto;
    }

    .modern-gallery[b-b8l6ystox3] {
        padding: 10px;
    }

    .gallery-container[b-b8l6ystox3] {
        height: auto;
        max-height: 100%;
        padding-right: 0;
    }

    /* 모바일에서 image-actions 표시 */
    .image-actions[b-b8l6ystox3] {
        display: flex;
        flex-direction: row;
        padding: 0 10px 0 0;
        background: none;
        gap: 8px;
    }

    /* 모바일에서 그리드에서 리스트 형태로 변경 */
    .gallery-grid[b-b8l6ystox3] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* 갤러리 아이템 스타일 변경 - 모바일에서 가로 배치 */
    .gallery-item[b-b8l6ystox3] {
        flex-direction: row;
        height: 80px;
        padding: 0;
        align-items: center;
    }

    /* 이미지 래퍼 변경 */
    .image-wrapper[b-b8l6ystox3] {
        width: 80px;
        height: 80px;
        padding-bottom: 0;
        flex-shrink: 0;
    }

        .image-wrapper img[b-b8l6ystox3] {
            position: absolute;
            border-radius: 8px 0 0 8px;
        }

        /* 이미지 래퍼 호버 효과 제거 - 모바일에서는 무의미 */
        .image-wrapper:hover img[b-b8l6ystox3] {
            transform: none;
        }

    /* 기존 오버레이 툴바 모바일에서 숨김 */
    .image-tools[b-b8l6ystox3] {
        display: none;
    }

    /* 이미지 캡션 위치 및 스타일 조정 */
    .image-caption[b-b8l6ystox3] {
        flex-grow: 1;
        text-align: left;
        padding: 0 15px;
        display: flex;
        align-items: center;
        height: 100%;
        border-bottom: none;
        background: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 이미지 액션 버튼 영역 - 모바일에서 우측으로 */
    .image-actions[b-b8l6ystox3] {
        display: flex;
        flex-direction: row;
        padding: 0 10px 0 0;
        background: none;
        gap: 8px;
    }

    /* 액션 버튼 스타일 - 모바일에서는 작은 사각형 버튼으로 */
    .action-button[b-b8l6ystox3] {
        width: 28px;
        height: 28px;
        flex: none;
        border-radius: 2px;
        background-color: white;
        padding: 0;
    }

        .action-button.view-button[b-b8l6ystox3] {
            border: 1px solid #2563eb;
            color: #2563eb;
        }

        .action-button.delete-button[b-b8l6ystox3] {
            border: 1px solid #e03131;
            color: #e03131;
        }

        .action-button i[b-b8l6ystox3] {
            font-size: 14px;
        }

        .action-button span[b-b8l6ystox3] {
            display: none; /* 모바일에서는 텍스트 숨김 */
        }

    /* 호버 효과 제거 (터치 디바이스에서는 의미 없음) */
    .gallery-item:hover[b-b8l6ystox3] {
        transform: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    /* 라이트박스 헤더 조정 */
    .lightbox-header[b-b8l6ystox3] {
        padding: 10px 15px;
    }

    .lightbox-title[b-b8l6ystox3] {
        font-size: 14px;
        max-width: 120px;
    }

    /* 라이트박스 내 불필요한 버튼 숨기기 - 모바일에서 단순화 */
    .counter[b-b8l6ystox3], .spacer[b-b8l6ystox3] {
        display: none;
    }

    /* 라이트박스 영역 전체 화면으로 */
    .lightbox-window[b-b8l6ystox3] {
        width: 98%;
        height: 98%;
        max-width: 100%;
        max-height: 100%;
    }

    .lightbox-body[b-b8l6ystox3] {
        padding: 10px;
    }

    /* 라이트박스 버튼 배치 조정 */
    .lightbox-actions[b-b8l6ystox3] {
        gap: 5px;
    }

    /* 빈 상태 조정 */
    .empty-state[b-b8l6ystox3] {
        height: 300px;
        padding: 30px 15px;
    }

    .empty-state-icon[b-b8l6ystox3] {
        width: 60px;
        height: 60px;
    }

        .empty-state-icon i[b-b8l6ystox3] {
            font-size: 24px;
        }

    .empty-state-title[b-b8l6ystox3] {
        font-size: 18px;
    }

    .empty-state-description[b-b8l6ystox3] {
        font-size: 14px;
        margin-bottom: 24px;
    }
}

/* 작은 모바일 화면 (400px 이하) */
@media (max-width: 400px) {
    .gallery-item[b-b8l6ystox3] {
        height: 70px;
    }

    .image-wrapper[b-b8l6ystox3] {
        width: 70px;
        height: 70px;
    }

    .image-caption[b-b8l6ystox3] {
        font-size: 13px;
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .action-button[b-b8l6ystox3] {
        width: 24px;
        height: 24px;
    }

        .action-button i[b-b8l6ystox3] {
            font-size: 12px;
        }

    /* 라이트박스 버튼 더 작게 */
    .lightbox-button[b-b8l6ystox3] {
        width: 28px;
        height: 28px;
    }

        .lightbox-button i[b-b8l6ystox3] {
            font-size: 12px;
        }

    .lightbox-title[b-b8l6ystox3] {
        max-width: 100px;
        font-size: 13px;
    }

    /* 조금 더 간소화된 라이트박스 버튼 */
    .lightbox-actions[b-b8l6ystox3] {
        gap: 4px;
    }

    /* 빈 상태 추가 조정 */
    .empty-state[b-b8l6ystox3] {
        height: 250px;
        padding: 20px 10px;
    }

    .empty-state-icon[b-b8l6ystox3] {
        width: 50px;
        height: 50px;
        margin-bottom: 16px;
    }

        .empty-state-icon i[b-b8l6ystox3] {
            font-size: 20px;
        }

    .empty-state-title[b-b8l6ystox3] {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .empty-state-description[b-b8l6ystox3] {
        font-size: 13px;
        margin-bottom: 20px;
    }
}

/* 터치 시 시각적 피드백 */
@media (hover: none) {
    .action-button:active[b-b8l6ystox3] {
        opacity: 0.7;
    }

    .lightbox-button:active:not(:disabled)[b-b8l6ystox3] {
        opacity: 0.7;
    }
}
/* _content/SWMes.SFrame_EAM/Component/RenderErrorComponent.razor.rz.scp.css */
*[b-850hqkj34e] {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



/*body {
    background-color: var(--error-bg);
    color: var(--error-fg);
    display: flex;
    font: 1em/1.5 Nunito, sans-serif;
    height: 100vh;
    transition: background-color var(--error-trans-dur), color var(--error-trans-dur);
}*/

main[b-850hqkj34e] {
    display: grid;
    grid-gap: 3em 1.5em;
    margin: auto;
    max-width: 40em;
    padding: 3em 0;
    text-align: center;
    width: calc(100% - 3em);
}

h1[b-850hqkj34e] {
    font-size: 3em;
    line-height: 1;
    margin: 0 0 1.5rem;
}

p[b-850hqkj34e] {
    margin: 0 0 1.5em;
}

.btn-link[b-850hqkj34e] {
    background: var(--error-primary);
    border-radius: 1.5em;
    display: inline-block;
    outline: transparent;
    padding: 0.75em 1.5em;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s linear;
}

    .btn-link[b-850hqkj34e],
    .btn-link:visited[b-850hqkj34e] {
        color: hsl(0,0%,100%);
    }

        .btn-link:focus-visible[b-850hqkj34e],
        .btn-link:hover[b-850hqkj34e] {
            background: var(--error-primary-down);
        }

        .btn-link:hover[b-850hqkj34e] {
            text-decoration: none;
        }

.paper[b-850hqkj34e] {
    display: block;
    margin: auto;
    overflow: visible;
    width: 100%;
    /*max-width: 224px;*/
    height: auto;
}

.paper__fill[b-850hqkj34e] {
    fill: hsl(0,0%,100%);
}

.paper__outline[b-850hqkj34e],
.paper__lines[b-850hqkj34e] {
    transition: stroke var(--error-trans-dur);
}

.paper__outline[b-850hqkj34e] {
    stroke: hsl(var(--error-hue),10%,10%);
}

.paper__lines[b-850hqkj34e] {
    stroke: hsl(var(--error-hue),10%,70%);
}

.paper__shadow[b-850hqkj34e] {
    fill: hsl(var(--error-hue),10%,70%);
    transition: fill var(--error-trans-dur);
}

.paper__top[b-850hqkj34e],
.paper__bottom[b-850hqkj34e],
.paper__tear[b-850hqkj34e],
.paper__tear-fill[b-850hqkj34e] {
    animation: paperTop-b-850hqkj34e 1.25s cubic-bezier(0.77,0,0.18,1);
}

.paper__top[b-850hqkj34e],
.paper__bottom[b-850hqkj34e] {
    transform-origin: 0 148px;
    transition: transform var(--error-trans-dur) cubic-bezier(0.77,0,0.18,1);
}

.paper__top[b-850hqkj34e] {
    transform: translate(0,8px);
}

.paper__bottom[b-850hqkj34e] {
    animation-name: paperBottom-b-850hqkj34e;
    transform: translate(0,42px);
}

.paper__tear[b-850hqkj34e],
.paper__tear-fill[b-850hqkj34e] {
    animation-timing-function: cubic-bezier(0.32,0,0.67,0);
}

.paper__tear[b-850hqkj34e] {
    animation-name: paperTear-b-850hqkj34e;
    stroke-dashoffset: 0;
}

.paper__tear-fill[b-850hqkj34e] {
    animation-name: paperTearFill-b-850hqkj34e;
}

.paper__outline:hover .paper__top[b-850hqkj34e],
.paper__outline:hover .paper__bottom[b-850hqkj34e] {
    transform: translate(0,25px);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root[b-850hqkj34e] {
        --error-bg: hsl(var(--error-hue),10%,25%);
        --error-fg: hsl(var(--error-hue),10%,90%);
    }

    .paper__shadow:first-child[b-850hqkj34e] {
        fill: hsl(var(--error-hue),10%,15%);
    }
}

/* Beyond mobile */
@media (min-width: 768px) {
    main[b-850hqkj34e] {
        grid-template-columns: 1fr 2fr;
        align-items: center;
        text-align: left;
    }

    .paper[b-850hqkj34e] {
        max-width: 300px;
    }
}

/* Animations */
@keyframes paperTop-b-850hqkj34e {
    from, 40% {
        animation-timing-function: cubic-bezier(0.32,0,0.67,0);
        transform: translate(0,25px) rotate(0);
        transform-origin: 61px 148px;
    }

    70% {
        animation-timing-function: cubic-bezier(0.33,1,0.67,1.5);
        transform: translate(0,25px) rotate(-5deg);
        transform-origin: 61px 148px;
    }

    to {
        transform: translate(0,8px) rotate(0);
        transform-origin: 0 148px;
    }
}

@keyframes paperBottom-b-850hqkj34e {
    from, 40% {
        animation-timing-function: cubic-bezier(0.32,0,0.67,0);
        transform: translate(0,25px) rotate(0);
        transform-origin: 61px 148px;
    }

    70% {
        animation-timing-function: cubic-bezier(0.33,1,0.67,1.5);
        transform: translate(0,25px) rotate(5deg);
        transform-origin: 61px 148px;
    }

    to {
        transform: translate(0,42px) rotate(0);
        transform-origin: 0 148px;
    }
}

@keyframes paperTear-b-850hqkj34e {
    from, 40% {
        stroke-dashoffset: -198;
    }

    70%, to {
        stroke-dashoffset: 0;
    }
}

@keyframes paperTearFill-b-850hqkj34e {
    from, 40% {
        width: 187px;
    }

    70%, to {
        width: 0;
    }
}
/* _content/SWMes.SFrame_EAM/Component/RenderErrorSimpleComponent.razor.rz.scp.css */
.error-container[b-ycn6znl0bp] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.error-content[b-ycn6znl0bp] {
    display: flex;
    align-items: center;
    max-width: 600px;
    padding: 1rem;
}

.error-text[b-ycn6znl0bp] {
    flex: 1;
}

.error-code[b-ycn6znl0bp] {
    font-size: 2rem;
    font-weight: bold;
    color: var(--background-color-main-button);
    margin-bottom: 0.5rem;
}

.error-title[b-ycn6znl0bp] {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--text-color-title)
}

.error-message[b-ycn6znl0bp] {
    color: var(--error-message-color, #6c757d);
    margin-bottom: 1rem;
}


/* 모바일 화면 대응 */
@media (max-width: 576px) {
    .error-content[b-ycn6znl0bp] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/SWMes.SFrame_EAM/Component/UserPage/ItemLocationCard.razor.rz.scp.css */

.spare-item-card-content[b-lhnwjpffjm] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 105px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-left: 10px;
}

.spare-item-card-content[b-lhnwjpffjm]::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    content: "";
}

.spare-item-card-content.stock-low[b-lhnwjpffjm] {
    background-color: #fff1f2;
}

.spare-item-card-content.stock-low[b-lhnwjpffjm]::before {
    background-color: #ef4444;
}

.spare-item-card-content.stock-high[b-lhnwjpffjm]::before {
    background-color: #22c55e;
}

.spare-item-card-content.stock-normal[b-lhnwjpffjm]::before {
    background-color: #d1d5db;
}

.spare-item-main[b-lhnwjpffjm] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.spare-item-title[b-lhnwjpffjm],
.spare-item-spec[b-lhnwjpffjm] {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.spare-item-title[b-lhnwjpffjm] {
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.28;
}

.spare-item-spec[b-lhnwjpffjm] {
    margin-top: 4px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.spare-item-code[b-lhnwjpffjm] {
    min-width: 0;
    margin-top: 4px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-item-qty[b-lhnwjpffjm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 105px;
    border-left: 1px solid #e5e7eb;
    box-sizing: border-box;
    padding: 0 8px;
    text-align: center;
}

.spare-item-qty-current[b-lhnwjpffjm] {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: #111827;
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

.spare-item-card-content.stock-low .spare-item-qty-current[b-lhnwjpffjm] {
    color: #ef4444;
}

.spare-item-qty-safe[b-lhnwjpffjm] {
    display: block;
    width: 100%;
    margin-top: 3px;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
/* _content/SWMes.SFrame_EAM/Component/UserPage/RenderEmptySpare.razor.rz.scp.css */
.empty-paragraph[b-j7yxxn8zvz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 60px 24px;
    text-align: center;
}

.empty-icon[b-j7yxxn8zvz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    background-color: #f2f4f6;
    border-radius: 50%;
    animation: bounce-b-j7yxxn8zvz 2s ease-in-out infinite;
}

    .empty-icon[b-j7yxxn8zvz]  .notranslate {
        font-size: 28px;
        color: #8b95a1;
    }

@keyframes bounce-b-j7yxxn8zvz {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.empty-text[b-j7yxxn8zvz] {
    font-size: 16px;
    font-weight: 600;
    color: #191f28;
    line-height: 1.5;
    letter-spacing: -0.3px;
}

.empty-subtext[b-j7yxxn8zvz] {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #4e5968;
    line-height: 1.4;
}
/* _content/SWMes.SFrame_EAM/Component/UserPage/RenderExcelUpload.razor.rz.scp.css */
.custom-drop-zone[b-mvmfafx7wn] {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
    min-width: 400px !important;
}

@media (max-width: 400px) { 
    .custom-drop-zone[b-mvmfafx7wn] {
        min-width: 90vw !important;        
    }
}

.custom-drop-zone.custom-drop-zone-hover[b-mvmfafx7wn] {
    border-style: solid;
}

.custom-drop-zone svg[b-mvmfafx7wn] {
    width: 42px;
    height: 42px;
}

.custom-drop-zone > *:not(#overviewDemoSelectButton)[b-mvmfafx7wn] {
    pointer-events: none;
}

.upload-form[b-mvmfafx7wn] {
    max-width: 400px;
}
/* _content/SWMes.SFrame_EAM/Component/UserPage/RenderImageUpload.razor.rz.scp.css */
/* 기본 컨테이너 스타일 */
.responsive-container[b-5ur5nsiz4x] {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 섹션 공통 스타일 */
.uploader-section[b-5ur5nsiz4x],
.gallery-section[b-5ur5nsiz4x] {
    margin-bottom: 24px;
    width: 100%;
}

/* 대형 태블릿 및 소형 데스크톱 (992px 이하) */
@media (max-width: 992px) {
    .responsive-container[b-5ur5nsiz4x] {
        width: 95%;
        padding: 0 15px;
    }
}

/* 태블릿 (768px 이하) */
@media (max-width: 768px) {
    .responsive-container[b-5ur5nsiz4x] {
        width: 100%;
        padding: 0 12px;
    }
}

/* 모바일 (576px 이하) */
@media (max-width: 576px) {
    .responsive-container[b-5ur5nsiz4x] {
        padding: 0 10px;
    }

    /* 모바일에서의 컴포넌트별 추가 스타일 */
    :deep(.sw-gallery)[b-5ur5nsiz4x] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    :deep(.sw-gallery-item)[b-5ur5nsiz4x] {
        width: 100% !important; /* 갤러리 아이템을 모바일에서 전체 너비로 */
    }

    :deep(.file-uploader-container)[b-5ur5nsiz4x] {
        padding: 10px;
    }

    :deep(.file-upload-button)[b-5ur5nsiz4x] {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* 작은 모바일 화면 (400px 이하) */
@media (max-width: 400px) {
    .responsive-container[b-5ur5nsiz4x] {
        padding: 0 8px;
    }

    :deep(.file-upload-progress)[b-5ur5nsiz4x] {
        font-size: 14px;
    }
}
/* _content/SWMes.SFrame_EAM/Component/UserPage/RenderSparePartCallRequest.razor.rz.scp.css */
:host[b-1x6aeaho01] {
    display: block;
    height: 100%;
    min-height: 0;
}

.spare-call-request-page[b-1x6aeaho01] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 10px;
    padding: 5px;
    overflow: hidden;
    color: #172033;
    background: #f7f8fa;
}

.spare-call-request-tab-content[b-1x6aeaho01] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 16px;
}

.spare-call-request-body[b-1x6aeaho01] {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    gap: 16px;
}

.spare-call-request-detail[b-1x6aeaho01] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 16px;
}

.spare-call-request-molds[b-1x6aeaho01] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px;
    overflow: hidden;
    border: 1px solid #d6d9e3;
    border-radius: 6px;
    background: #ffffff;
}

.spare-call-request-mold-title[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.spare-call-request-mold-title span[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
}

.spare-call-request-mold-title strong[b-1x6aeaho01] {
    color: #687083;
    font-size: 12px;
}

[b-1x6aeaho01] .spare-call-request-mold-search {
    width: 100%;
    min-height: 38px;
    height: 38px;
    margin-bottom: 10px;
}

.spare-call-request-mold-list[b-1x6aeaho01] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #e5e8eb;
    border-radius: 8px;
    background: #f9fafb;
}

.spare-call-request-mold-card[b-1x6aeaho01] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    gap: 5px 10px;
    padding: 14px 16px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid #f1f4f6;
    color: #191f28;
    background: #ffffff;
}

.spare-call-request-mold-card:last-child[b-1x6aeaho01] {
    border-bottom: 0;
}

.spare-call-request-mold-card:hover[b-1x6aeaho01] {
    background: #f9fafb;
}

.spare-call-request-mold-card.selected[b-1x6aeaho01] {
    background: #eff6ff;
    box-shadow: inset 3px 0 #3182f6;
}

.spare-call-request-mold-card strong[b-1x6aeaho01] {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-call-request-mold-card span[b-1x6aeaho01] {
    color: #6b7684;
    font-size: 12px;
}

.spare-call-request-mold-card small[b-1x6aeaho01] {
    grid-column: 1 / -1;
    color: #8b95a1;
    font-size: 11px;
}

[b-1x6aeaho01] .spare-call-request-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

[b-1x6aeaho01] .spare-call-request-tabs > .rz-tabview-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d7dce6;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #ffffff;
}

[b-1x6aeaho01] .spare-call-request-tabs > .rz-tabview-panels > .rz-tabview-panel {
    height: 100%;
    min-height: 0;
    padding: 14px;
    animation: spareCallRequestFadeIn-b-1x6aeaho01 0.2s ease-out;
}

[b-1x6aeaho01] .spare-call-request-tabs > .rz-tabview-nav {
    gap: 6px;
    margin: 0;
    width: 100%;
    min-height: 44px;
    padding: 5px 8px 0;
    border: 1px solid #d7dce6;
    border-radius: 10px 10px 0 0;
    background: #f4f6f9;
}

[b-1x6aeaho01] .spare-call-request-tabs > .rz-tabview-nav > li {
    margin: 0 0 -1px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    transition: color 0.18s ease, background-color 0.18s ease;
}

[b-1x6aeaho01] .spare-call-request-tabs > .rz-tabview-nav > li > a {
    min-height: 38px;
    padding: 8px 18px;
    color: #687083;
}

[b-1x6aeaho01] .spare-call-request-tabs > .rz-tabview-nav > li.rz-tabview-selected {
    border-color: #d7dce6;
    border-bottom-color: #ffffff;
    background: #ffffff;
    box-shadow: inset 0 3px #2563eb;
}

[b-1x6aeaho01] .spare-call-request-tabs > .rz-tabview-nav > li.rz-tabview-selected > a {
    color: #174ea6;
}

.spare-call-request-tab-header[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
}

.spare-call-request-tab-header strong[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    color: #ffffff;
    background: #2563eb;
    font-size: 11px;
}

.spare-call-request-unified-toolbar[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 30;
    gap: 10px;
    min-height: 40px;
    padding: 0 4px;
    flex-shrink: 0;
    overflow: visible;
}

.spare-call-request-items-title span[b-1x6aeaho01],
.spare-call-request-field label[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[b-1x6aeaho01] .spare-call-request-plant-filter {
    width: 180px;
    min-height: 32px;
    height: 32px;
}

[b-1x6aeaho01] .spare-call-request-car-filter {
    width: 150px;
    min-height: 32px;
    height: 32px;
}

.spare-call-request-plant-chip[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    gap: 6px;
    padding: 0 11px;
    white-space: nowrap;
    border: 1px solid #d6d9e3;
    border-radius: 5px;
    color: #687083;
    background: #ffffff;
    font-size: 12px;
}

.spare-call-request-plant-chip strong[b-1x6aeaho01] {
    color: #172033;
    font-size: 13px;
}

.spare-call-request-mold-chip[b-1x6aeaho01] {
    max-width: 180px;
}

.spare-call-request-mold-chip strong[b-1x6aeaho01] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.spare-call-request-location-selector[b-1x6aeaho01] {
    position: relative;
    z-index: 20;
    width: 230px;
    flex-shrink: 0;
}

[b-1x6aeaho01] .spare-call-request-location-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    min-height: 32px;
    padding: 0 12px !important;
    cursor: pointer;
    border: 1px solid #d6d9e3;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: none !important;
}

[b-1x6aeaho01] .spare-call-request-location-summary > div {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
}

[b-1x6aeaho01] .spare-call-request-location-summary strong {
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-call-request-location-overlay[b-1x6aeaho01] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 2000;
    max-height: 360px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #cfd4df;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(18, 25, 38, 0.18);
    animation: spareCallRequestSlideDown-b-1x6aeaho01 0.18s ease-out;
}

[b-1x6aeaho01] .spare-call-request-location-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    padding: 10px !important;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: none !important;
}

[b-1x6aeaho01] .spare-call-request-location-card:last-child {
    margin-bottom: 0;
}

[b-1x6aeaho01] .spare-call-request-location-card:hover,
[b-1x6aeaho01] .spare-call-request-location-card.selected {
    border-color: #2563eb;
    background: #eef4ff;
}

.spare-call-request-location-icon[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #ffffff;
    background: #2563eb;
}

.spare-call-request-location-text[b-1x6aeaho01] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.spare-call-request-location-text strong[b-1x6aeaho01] {
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-call-request-location-text span[b-1x6aeaho01] {
    color: #687083;
    font-size: 12px;
    font-weight: 600;
}

[b-1x6aeaho01] .spare-call-request-search {
    width: 280px;
    min-height: 32px;
    height: 32px;
}

[b-1x6aeaho01] .spare-call-request-search-button,
[b-1x6aeaho01] .spare-call-request-submit {
    min-height: 32px;
    height: 32px;
}

.spare-call-request-items[b-1x6aeaho01] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    border: 1px solid #d6d9e3;
    border-radius: 6px;
    background: #ffffff;
}

.spare-call-request-items-title[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    flex-shrink: 0;
    border-bottom: 1px solid #e2e6ef;
}

.spare-call-request-items-title span[b-1x6aeaho01] {
    font-size: 18px;
    font-weight: 700;
}

.spare-call-request-items-title strong[b-1x6aeaho01] {
    color: #687083;
    font-size: 14px;
}

.spare-call-request-card-grid[b-1x6aeaho01] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.spare-call-request-item-card[b-1x6aeaho01] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    min-height: 124px;
    padding: 16px;
    overflow: hidden;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border: 1px solid #d7dce6;
    border-radius: 6px;
    color: inherit;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.spare-call-request-item-card:hover[b-1x6aeaho01] {
    border-color: #9bb9ee;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.1);
}

.spare-call-request-item-card.selected[b-1x6aeaho01] {
    border-color: #2563eb;
    background: #eef4ff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.spare-call-request-item-card.out-of-stock:not(.selected)[b-1x6aeaho01] {
    background: #fafafa;
    cursor: not-allowed;
    opacity: 0.72;
}

.spare-call-request-item-head[b-1x6aeaho01] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}

.spare-call-request-item-head strong[b-1x6aeaho01] {
    align-self: center;
    min-width: 0;
    overflow: hidden;
    color: #111827;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-call-request-qty[b-1x6aeaho01] {
    justify-self: end;
    padding: 3px 8px;
    color: #0f3f8f;
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 12px;
    background: #e8f0ff;
}

.spare-call-request-qty.empty[b-1x6aeaho01] {
    color: #b42318;
    background: #feeceb;
}

.spare-call-request-part-name[b-1x6aeaho01] {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    color: #2d3748;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.spare-call-request-item-meta[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    min-width: 0;
    justify-content: space-between;
    gap: 10px;
    overflow: hidden;
    color: #687083;
    font-size: 12px;
    font-weight: 600;
}

.spare-call-request-item-meta > span[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-call-request-item-meta .spare-call-request-part-spec[b-1x6aeaho01] {
    flex: 1 1 0;
    max-width: 100%;
}

.spare-call-request-part-spec > span[b-1x6aeaho01] {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-call-request-item-meta > span:last-child[b-1x6aeaho01] {
    flex: 0 1 auto;
    max-width: 45%;
}

[b-1x6aeaho01] .spare-call-request-part-spec .rz-icon {
    flex: 0 0 auto;
}

[b-1x6aeaho01] .spare-call-request-item-meta .rz-icon {
    font-size: 16px;
}

.spare-call-request-select-state[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: #7a8494;
    font-size: 12px;
    font-weight: 700;
}

.spare-call-request-item-card.selected .spare-call-request-select-state[b-1x6aeaho01] {
    color: #2563eb;
}

.spare-call-request-empty[b-1x6aeaho01] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    color: #687083;
    font-size: 14px;
    font-weight: 600;
}

[b-1x6aeaho01] .spare-call-request-empty .rz-progressbar {
    width: min(320px, 80%);
}

.spare-call-request-illustrated-empty[b-1x6aeaho01] {
    gap: 18px;
}

.spare-call-request-illustrated-empty > span[b-1x6aeaho01] {
    font-size: 18px;
    font-weight: 700;
}

.spare-call-request-mold-prompt > span[b-1x6aeaho01] {
    font-size: 20px;
}

.spare-call-request-cart[b-1x6aeaho01] {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    min-height: 116px;
    flex-shrink: 0;
    padding: 14px 16px;
    gap: 10px;
    overflow: hidden;
    border: 1px solid #d6d9e3;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.spare-call-request-cart-title[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.spare-call-request-cart-title > span[b-1x6aeaho01],
.spare-call-request-cart-title > div[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spare-call-request-cart-title > span[b-1x6aeaho01] {
    font-size: 16px;
    font-weight: 700;
}

.spare-call-request-cart-title strong[b-1x6aeaho01] {
    color: #2563eb;
    font-size: 13px;
}

.spare-call-request-cart-empty[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    color: #8b95a1;
    font-size: 13px;
}

.spare-call-request-cart-list[b-1x6aeaho01] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 8px;
    overflow-y: auto;
    overflow-x: auto;
}

.spare-call-request-cart-row[b-1x6aeaho01] {
    --spare-call-request-control-height: 32px;
    display: grid;
    grid-template-columns: minmax(175px, 190px) minmax(230px, 260px) minmax(95px, 110px) 130px 100px minmax(262px, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e6ef;
    border-radius: 6px;
    background: #f9fafb;
}

.spare-call-request-cart-code[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.spare-call-request-cart-code > span[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #ffffff;
    background: #2563eb;
}

.spare-call-request-cart-code > div[b-1x6aeaho01],
.spare-call-request-cart-details[b-1x6aeaho01] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.spare-call-request-cart-code > div[b-1x6aeaho01] {
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: flex-start;
    text-align: left;
}

.spare-call-request-cart-details[b-1x6aeaho01] {
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: flex-start;
    justify-self: start;
    text-align: left;
}

.spare-call-request-cart-code strong[b-1x6aeaho01],
.spare-call-request-cart-details strong[b-1x6aeaho01],
.spare-call-request-cart-details span[b-1x6aeaho01] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-call-request-cart-code small[b-1x6aeaho01],
.spare-call-request-cart-mold-field small[b-1x6aeaho01] {
    color: #7a8494;
    font-size: 10px;
    font-weight: 700;
}

.spare-call-request-cart-mold-field[b-1x6aeaho01] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 2px;
}

.spare-call-request-cart-mold[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    max-width: 100%;
    min-width: 0;
    gap: 4px;
    padding: 3px 7px;
    overflow: hidden;
    border-radius: 9px;
    color: #174ea6;
    background: #e8f0ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spare-call-request-cart-mold > span[b-1x6aeaho01] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-1x6aeaho01] .spare-call-request-cart-mold .rz-icon {
    flex: 0 0 auto;
    font-size: 14px;
}

.spare-call-request-cart-code strong[b-1x6aeaho01] {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #172033;
    font-size: 17px;
    line-height: 1.2;
    text-align: left;
}

.spare-call-request-cart-details > strong[b-1x6aeaho01] {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #2d3748;
    font-size: 13px;
    text-align: left;
}

.spare-call-request-cart-details > div[b-1x6aeaho01] {
    display: flex;
    gap: 12px;
    color: #7a8494;
    font-size: 11px;
}

.spare-call-request-cart-details span[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.spare-call-request-field[b-1x6aeaho01] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
}

.spare-call-request-field label[b-1x6aeaho01] {
    color: #374151;
    font-size: 13px;
    font-weight: 700;
}

.spare-call-request-note-actions[b-1x6aeaho01] {
    display: flex;
    align-items: flex-end;
    min-width: 0;
    gap: 8px;
}

.spare-call-request-note-actions .spare-call-request-field[b-1x6aeaho01] {
    flex: 1 1 auto;
}

[b-1x6aeaho01] .spare-call-request-input {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--spare-call-request-control-height);
    height: var(--spare-call-request-control-height);
    margin: 0;
}

[b-1x6aeaho01] .spare-call-request-cart-remove {
    box-sizing: border-box;
    width: 34px;
    min-width: 34px;
    min-height: var(--spare-call-request-control-height);
    height: var(--spare-call-request-control-height);
    flex: 0 0 34px;
    margin: 0;
}

[b-1x6aeaho01] .spare-call-request-cart-action {
    min-height: 32px;
    height: 32px;
}

.spare-call-request-history-content[b-1x6aeaho01] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 16px;
}

[b-1x6aeaho01] .spare-call-request-history-filter {
    width: 180px;
    min-height: 32px;
    height: 32px;
}

.spare-call-request-history[b-1x6aeaho01] {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: auto;
    border: 1px solid #d6d9e3;
    border-radius: 10px;
    background: #ffffff;
}

.spare-call-request-history-toolbar[b-1x6aeaho01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px;
}

.spare-call-request-history-toolbar > span[b-1x6aeaho01] {
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

[b-1x6aeaho01] .spare-call-request-history-grid {
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
}

[b-1x6aeaho01] .spare-call-request-history-grid .rz-grid-table {
    border-collapse: separate;
    border-spacing: 0;
}

[b-1x6aeaho01] .spare-call-request-history-grid .rz-grid-table thead > tr > th {
    height: 42px;
    padding: 0 12px;
    color: #4b5565;
    background: #f3f6fa;
    border-bottom: 1px solid #dce2ea;
    font-size: 12px;
    font-weight: 750;
}

[b-1x6aeaho01] .spare-call-request-history-grid .rz-grid-table thead .rz-column-title {
    width: 100%;
}

[b-1x6aeaho01] .spare-call-request-history-grid .rz-grid-table tbody > tr > td {
    height: 42px;
    padding: 8px 12px;
    color: #2d3748;
    border-bottom: 1px solid #edf0f4;
    font-size: 12px;
}

[b-1x6aeaho01] .spare-call-request-history-grid .rz-grid-table tbody > tr:hover > td {
    background: #f5f8ff;
}

/* 오른쪽에 데이터가 더 있다는 것을 알 수 있도록 가로 스크롤바를 눈에 띄게 표시 */
[b-1x6aeaho01] .spare-call-request-history-grid * {
    scrollbar-width: auto;
    scrollbar-color: #a7b0c0 #eef0f4;
}

[b-1x6aeaho01] .spare-call-request-history-grid *::-webkit-scrollbar {
    height: 12px;
}

[b-1x6aeaho01] .spare-call-request-history-grid *::-webkit-scrollbar-track {
    background: #eef0f4;
}

[b-1x6aeaho01] .spare-call-request-history-grid *::-webkit-scrollbar-thumb {
    background: #a7b0c0;
    border-radius: 6px;
    border: 2px solid #eef0f4;
}

[b-1x6aeaho01] .spare-call-request-history-grid *::-webkit-scrollbar-thumb:hover {
    background: #848fa2;
}

[b-1x6aeaho01] .spare-call-request-history-grid .rz-paginator {
    min-height: 48px;
    border-top: 1px solid #e2e6ef;
    background: #ffffff;
}

.spare-call-request-status[b-1x6aeaho01] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 12px;
    color: #596273;
    background: #edf0f4;
    font-size: 11px;
    font-weight: 750;
}

.spare-call-request-status.status-1[b-1x6aeaho01] {
    color: #a94d00;
    background: #fff0dc;
}

.spare-call-request-status.status-2[b-1x6aeaho01] {
    color: #167044;
    background: #ddf6e9;
}

.spare-call-request-status.status-9[b-1x6aeaho01] {
    color: #b42318;
    background: #fee7e5;
}

.empty-state[b-1x6aeaho01] {
    display: flex;
    min-height: 430px;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #8b95a1;
}

.empty-state-icon[b-1x6aeaho01] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 46% 54% 52% 48%;
    color: #ffffff;
    font-size: 42px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.48), 0 14px 26px rgba(54, 65, 94, 0.22);
}

.empty-state-icon[b-1x6aeaho01]::after {
    position: absolute;
    top: 12px;
    left: 16px;
    width: 20px;
    height: 10px;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    transform: rotate(-24deg);
}

.empty-state-icon-mold[b-1x6aeaho01] {
    background: linear-gradient(135deg, #2563eb 8%, #06b6d4 92%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.48), 0 14px 26px rgba(37, 99, 235, 0.28);
}

.empty-state-icon-parts[b-1x6aeaho01] {
    background: linear-gradient(135deg, #f59e0b 8%, #f43f5e 92%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.48), 0 14px 26px rgba(244, 63, 94, 0.25);
}

.empty-state-icon-history[b-1x6aeaho01] {
    background: linear-gradient(135deg, #6366f1 8%, #a855f7 92%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.48), 0 14px 26px rgba(99, 102, 241, 0.28);
}

[b-1x6aeaho01] .empty-state-icon .rz-icon,
.empty-state-icon i[b-1x6aeaho01] {
    position: relative;
    z-index: 1;
    font-size: 42px;
    filter: drop-shadow(0 3px 3px rgba(20, 29, 55, 0.24));
}

.empty-state-message[b-1x6aeaho01] {
    font-size: 18px;
    font-weight: 650;
}

@keyframes spareCallRequestFadeIn-b-1x6aeaho01 {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spareCallRequestSlideDown-b-1x6aeaho01 {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .spare-call-request-page[b-1x6aeaho01] {
        overflow-y: auto;
    }

    .spare-call-request-body[b-1x6aeaho01] {
        display: flex;
        flex-direction: column;
    }

    .spare-call-request-molds[b-1x6aeaho01] {
        min-height: 260px;
    }

    .spare-call-request-unified-toolbar[b-1x6aeaho01] {
        align-items: stretch;
        flex-direction: column;
    }

    .spare-call-request-location-selector[b-1x6aeaho01],
    .spare-call-request-plant-chip[b-1x6aeaho01],
    [b-1x6aeaho01] .spare-call-request-plant-filter,
    [b-1x6aeaho01] .spare-call-request-search,
    [b-1x6aeaho01] .spare-call-request-car-filter,
    [b-1x6aeaho01] .spare-call-request-history-filter,
    [b-1x6aeaho01] .spare-call-request-search-button,
    [b-1x6aeaho01] .spare-call-request-submit {
        width: 100%;
    }

    .spare-call-request-items[b-1x6aeaho01] {
        flex: none;
        overflow: visible;
    }

    .spare-call-request-card-grid[b-1x6aeaho01],
    .spare-call-request-cart-row[b-1x6aeaho01] {
        grid-template-columns: 1fr;
    }

    .spare-call-request-cart[b-1x6aeaho01] {
        max-height: none;
    }
}
/* _content/SWMes.SFrame_EAM/Component/UserPage/RenderTest.razor.rz.scp.css */
/* 기본 컨테이너 스타일 */
.responsive-container[b-xmwytjriax] {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 섹션 공통 스타일 */
.uploader-section[b-xmwytjriax],
.gallery-section[b-xmwytjriax] {
    margin-bottom: 24px;
    width: 100%;
}

/* 대형 태블릿 및 소형 데스크톱 (992px 이하) */
@media (max-width: 992px) {
    .responsive-container[b-xmwytjriax] {
        width: 95%;
        padding: 0 15px;
    }
}

/* 태블릿 (768px 이하) */
@media (max-width: 768px) {
    .responsive-container[b-xmwytjriax] {
        width: 100%;
        padding: 0 12px;
    }
}

/* 모바일 (576px 이하) */
@media (max-width: 576px) {
    .responsive-container[b-xmwytjriax] {
        padding: 0 10px;
    }

    /* 모바일에서의 컴포넌트별 추가 스타일 */
    :deep(.sw-gallery)[b-xmwytjriax] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    :deep(.sw-gallery-item)[b-xmwytjriax] {
        width: 100% !important; /* 갤러리 아이템을 모바일에서 전체 너비로 */
    }

    :deep(.file-uploader-container)[b-xmwytjriax] {
        padding: 10px;
    }

    :deep(.file-upload-button)[b-xmwytjriax] {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* 작은 모바일 화면 (400px 이하) */
@media (max-width: 400px) {
    .responsive-container[b-xmwytjriax] {
        padding: 0 8px;
    }

    :deep(.file-upload-progress)[b-xmwytjriax] {
        font-size: 14px;
    }
}
/* _content/SWMes.SFrame_EAM/Pages/Accounts/LoginPage.razor.rz.scp.css */


/* BASIC */

#formFooter a[b-4oeiuovaay] {
    color: #1d365b;
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
}

/* STRUCTURE */

#login_backgroundContent[b-4oeiuovaay] {
    top: 0;
    left: 0;
    background: url(../images/login_background.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute
}

    #login_backgroundContent .wrapper[b-4oeiuovaay] {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 100%;
        padding: 20px;
        height: 100vh;
    }

#formContent[b-4oeiuovaay] {
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}

#formFooter[b-4oeiuovaay] {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

/* FORM TYPOGRAPHY*/
input[type=button][b-4oeiuovaay], input[type=submit][b-4oeiuovaay], input[type=reset][b-4oeiuovaay], button[b-4oeiuovaay] {
    background-color: #2e5283;
    border: none;
    color: white;
    padding: 15px 80px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(29, 54, 91,0.4);
    box-shadow: 0 10px 30px 0 rgba(29, 54, 91,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 20px 20px 20px 20px;
    /* -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;*/
    /* width: 85%;*/
}

    input[type=button]:hover[b-4oeiuovaay], input[type=submit]:hover[b-4oeiuovaay], input[type=reset]:hover[b-4oeiuovaay], button:hover[b-4oeiuovaay] {
        background-color: #101d30;
    }

    input[type=button]:active[b-4oeiuovaay], input[type=submit]:active[b-4oeiuovaay], input[type=reset]:active[b-4oeiuovaay], button:active[b-4oeiuovaay] {
        /* -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);*/
    }

input[type=text][b-4oeiuovaay] {
    background-color: #f6f6f6;
    color: #0d0d0d;
    padding: 15px 32px;    
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    border: 1px solid #d3d3d3 !important;    
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

    input[type=text]:focus[b-4oeiuovaay] {
        background-color: #fff;
        border-bottom: 2px solid #5fbae9;
    }

    input[type=text]:placeholder[b-4oeiuovaay] {
        color: #cccccc;
    }


.language-container[b-4oeiuovaay] {
    position: relative;
    display: inline-block;
    width: 85%;
    margin: 5px;
}

.language-item[b-4oeiuovaay] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-icon[b-4oeiuovaay] {
    width: 23px;
    height: 24px;
    object-fit: contain;
}

[b-4oeiuovaay] .languageType {
    background-color: #f6f6f6;    
    color: #0d0d0d;
    padding: 15px 32px;
    /* text-align: center;*/
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    border: 1px solid #d3d3d3 !important;
    height:100%;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

[b-4oeiuovaay] .valid.modified:not([type=checkbox]) {
     outline: none; 
}

input[type=password][b-4oeiuovaay] {
    background-color: #f6f6f6;
    color: #0d0d0d;
    padding: 15px 32px;
    /* text-align: center;*/
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    border: 1px solid #d3d3d3 !important;    
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

    input[type=password]:focus[b-4oeiuovaay] {
        background-color: #fff;
        border-bottom: 2px solid #5fbae9;
    }

    input[type=password]:placeholder[b-4oeiuovaay] {
        color: #cccccc;
    }

/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown[b-4oeiuovaay] {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown-b-4oeiuovaay;
    -webkit-animation-duration: 0.2s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-timing-function: ease-in-out; /* 부드러운 전환 */
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown-b-4oeiuovaay {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    50% {
        transform: translate3d(0, 0px, 0); /* 약간 아래로 이동 */
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn-b-4oeiuovaay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn[b-4oeiuovaay] {
    opacity: 1;
    /*  -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;*/
    /* -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;*/
    /*    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;*/
}

    .fadeIn.first[b-4oeiuovaay] {
        /* -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        animation-delay: 0.3s;*/
        margin: 40px;
    }

/*.fadeIn.second {
        -webkit-animation-delay: 0.5s;
        -moz-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .fadeIn.third {
        -webkit-animation-delay: 0.7s;
        -moz-animation-delay: 0.7s;
        animation-delay: 0.7s;
    }

    .fadeIn.fourth {
        -webkit-animation-delay: 0.9s;
        -moz-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }*/

/* Simple CSS3 Fade-in Animation */
.underlineHover[b-4oeiuovaay]:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #1d365b;
    content: "";
    transition: width 0.2s;
}

.underlineHover:hover[b-4oeiuovaay] {
    color: #0d0d0d;
}

    .underlineHover:hover[b-4oeiuovaay]:after {
        width: 100%;
    }

/* OTHERS */

*:focus[b-4oeiuovaay] {
    outline: none;
}

#icon[b-4oeiuovaay] {
    width: 60%;
    padding: 10px;
}
/* _content/SWMes.SFrame_EAM/Pages/Common/ViewerContentsPage.razor.rz.scp.css */

.gridlayout-item[b-dl27m9oz6n] {
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column; /* 수직 방향으로 배치 */
    align-items: stretch; /* 자식 요소들이 넓이를 맞추도록 */
}

.gridlayout-item[b-dl27m9oz6n]:before {
   position: absolute;
   z-index: -1;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
}

.pull-right[b-dl27m9oz6n] {
    float: right !important;
}

.pull-left[b-dl27m9oz6n] {
    float: left;
   /* padding: 0.6rem;*/
    font-size: 14px;
}

.viewer-grid-heading[b-dl27m9oz6n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* RadzenDataGrid와의 간격 조정 */
}

@media (max-width: 1199.98px) {
    .viewer-grid-heading[b-dl27m9oz6n] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px; /* RadzenDataGrid와의 간격 조정 */
        margin-top: 0.3rem
    }
}


.btn-list[b-dl27m9oz6n] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 10px; /* 버튼 간의 간격 조정 */
}

/* From Uiverse.io by kamehame-ha */ 
.btn-list .button[b-dl27m9oz6n] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13.8px 15px;
  height: 1px;
  gap: 15px;
  background-color: #16A085;
  width: 7rem;
  outline: 3px #16A085 solid;
  outline-offset: -3px;
  border-radius: 5px;
  border: none;  
  cursor: pointer;
  margin-top: 0.1rem;
  transition: 400ms;
}

.btn-list p[b-dl27m9oz6n] {
    margin-top: 0;
    margin-bottom: 0;
}

.btn-list .button .text[b-dl27m9oz6n] {
  color: white;
  font-weight: 500;
  font-size: 0.8em;
  transition: 400ms;
}

.btn-list .button svg path[b-dl27m9oz6n] {
  transition: 400ms;
}

.btn-list .button:hover[b-dl27m9oz6n] {
  background-color: transparent;
}

.btn-list .button:hover .text[b-dl27m9oz6n] {
  color: #16A085;
}

.btn-list .button:hover svg path[b-dl27m9oz6n] {
  fill: #16A085;
}

.viewer-grid-title[b-dl27m9oz6n] {
    padding-left: 0.3rem;
    font-weight: 550;
    color: #3E3E3E;
}

#page-wrapper[b-dl27m9oz6n] {
    background-color: var(--background-color) !important;
    height: 100%;
    background: url(../images/cover-scrum-board-4.png) no-repeat fixed;
    background-size: 550px;
    background-position: calc(100% - 10px) calc(100% - 10px);
    min-height: 240px;
    position: relative !important;
}

@media (max-width: 768px) {
    #page-wrapper[b-dl27m9oz6n] {
        position: inherit;
        margin: 0 0 0 0;
        min-height: 240px;
        background-size: min(550px, 100%);
    }
}
/* _content/SWMes.SFrame_EAM/Pages/Common/ViewerPage.razor.rz.scp.css */

.btn-list[b-95460r2r4n] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 5px; /* 버튼 간의 간격 조정 */
}


    /* From Uiverse.io by kamehame-ha */
    .btn-list .button[b-95460r2r4n] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 1px;
        gap: 15px;
        background-color: #2e5283;
        width: 7rem;
        outline: 3px #2e5283 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }


    .btn-list .favorite[b-95460r2r4n] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 1px;
        gap: 15px;
        background-color: #6c757d;
        width: 3.4rem;
        outline: 3px #6c757d solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }

    .btn-list p[b-95460r2r4n] {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-list .button .text[b-95460r2r4n] {
        color: white;
        font-weight: 700;
        font-size: 0.95em;
        transition: 400ms;
    }

    .btn-list .button svg path[b-95460r2r4n] {
        transition: 400ms;
    }

    .btn-list .button:hover[b-95460r2r4n] {
        background-color: transparent;
    }

        .btn-list .button:hover .text[b-95460r2r4n] {
            color: #2e5283;
        }

        .btn-list .button:hover svg path[b-95460r2r4n] {
            fill: #2e5283;
        }

.viewer-main[b-95460r2r4n] {
}

.viewer-heading[b-95460r2r4n] {
    display: flow-root;
    padding: 0px;
    color: #3E3E3E !important;
    border-bottom: 2px solid #2e5283;
}

    .viewer-heading > span > form > button.item-btn[b-95460r2r4n],
    .viewer-heading > span > button.item-btn[b-95460r2r4n] {
        vertical-align: middle;
        width: 70px;
    }

    .viewer-heading .breadcrumb > li + li[b-95460r2r4n]:before {
        padding: 0px 0px 0px 1px;
        margin-right: 10px;
    }


/*.viewer-contents {
    height: calc(100vh - 210px);
}*/

.pull-right[b-95460r2r4n] {
    float: right !important;
}

.pull-left[b-95460r2r4n] {
    float: left;
    /*padding: 0.6rem;*/
    font-size: 14px;
    margin-top: 0.6rem;
}

.breadcrumb-wrapper[b-95460r2r4n] {
    align-self: flex-end;
    padding: 0.6rem;
    display: inline-block;
}

.breadcrumb[b-95460r2r4n] {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
    background-color: inherit;
}

.item-btn[b-95460r2r4n] {
    background-color: #2e5283;
    vertical-align: middle;
    border: none;
    width: 80px;
    padding: 5px 11px 5px 11px;
    margin: 5px 0px 0px 0px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
}

    .item-btn:hover[b-95460r2r4n] {
        background-color: #101d30;
    }

.btn-list .filter[b-95460r2r4n] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 17px 15px;
    height: 1px;
    gap: 15px;
    background-color: var(--background-color-sub-button);
    width: 3.4rem;
    outline: 3px var(--background-color-sub-button) solid;
    outline-offset: -3px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    margin-top: 0.1rem;
    transition: 400ms;
}

    .btn-list .filter .text[b-95460r2r4n] {
        color: white;
        font-weight: 700;
        font-size: 0.95em;
        transition: 400ms;
    }

    .btn-list .filter svg path[b-95460r2r4n] {
        transition: 400ms;
    }

    .btn-list .filter:hover[b-95460r2r4n] {
        background-color: var(--background-color-set-button-hover) !important;
        outline: var(--outline-set-button-hover) !important;
    }

        .btn-list .filter:hover .text[b-95460r2r4n] {
            color: #6c757d;
        }

        .btn-list .filter:hover svg path[b-95460r2r4n] {
            fill: #6c757d;
        }
/* _content/SWMes.SFrame_EAM/Pages/Common/ViewerSiteMap.razor.rz.scp.css */

/* _content/SWMes.SFrame_EAM/Pages/Dashboard/ViewerDashboardEmpty.razor.rz.scp.css */

#page-wrapper[b-2tdejnntac] {
    background-color: var(--background-color) !important;
    height: 92vh;
    background: url(../Images/cover-scrum-board-3.png) no-repeat fixed;
    background-size: 360px;
    background-position: calc(100% - 10px) calc(100% - 10px);
    min-height: 568px;
    position: relative !important;
}

@media (max-width: 768px) {
    #page-wrapper[b-2tdejnntac] {
        position: inherit;
        margin: 0 0 0 0;
        min-height: 100vh;
    }
}
/* _content/SWMes.SFrame_EAM/Pages/LayoutManager/CellDetailInfo.razor.rz.scp.css */
.cell-detail-info[b-8y4z57wfyi] {
    background: rgba(49, 130, 246, 0.02);
    border: 1px solid rgba(49, 130, 246, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
   /* max-width: 600px;*/
    width: 100%;
    animation: slideIn-b-8y4z57wfyi 0.3s ease-out;
}

@keyframes slideIn-b-8y4z57wfyi {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-header[b-8y4z57wfyi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(49, 130, 246, 0.15);
}

.detail-title h3[b-8y4z57wfyi] {
    font-size: 16px;
    font-weight: 700;
    color: #3182f6;
    margin: 0;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.cell-id-badge[b-8y4z57wfyi] {
    background: #3182f6;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.detail-sections[b-8y4z57wfyi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-section[b-8y4z57wfyi] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #f1f3f4;
}

.section-header[b-8y4z57wfyi] {
    margin-bottom: 12px;
}

    .section-header h4[b-8y4z57wfyi] {
        font-size: 14px;
        font-weight: 600;
        color: #191f28;
        margin: 0;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    }

.section-content[b-8y4z57wfyi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row[b-8y4z57wfyi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.info-label[b-8y4z57wfyi] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    min-width: 7rem;
}

.info-value[b-8y4z57wfyi] {
    font-size: 13px;
    font-weight: 600;
    color: #191f28;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

    .info-value.primary[b-8y4z57wfyi] {
        color: #3182f6;
        background: rgba(49, 130, 246, 0.1);
        padding: 2px 8px;
        border-radius: 6px;
    }

    .info-value.highlight[b-8y4z57wfyi] {
        color: #059669;
        background: rgba(5, 150, 105, 0.1);
        padding: 2px 8px;
        border-radius: 6px;
    }

    .info-value.range[b-8y4z57wfyi] {
        font-family: 'Monaco', 'Menlo', monospace;
        background: #f8f9fa;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
    }

.status-active[b-8y4z57wfyi] {
    color: #059669;
}

.status-inactive[b-8y4z57wfyi] {
    color: #dc2626;
}

.status-merged[b-8y4z57wfyi] {
    color: #d97706;
}

.status-normal[b-8y4z57wfyi] {
    color: #6b7280;
}

.status-visible[b-8y4z57wfyi] {
    color: #059669;
}

.status-hidden[b-8y4z57wfyi] {
    color: #dc2626;
}

.quick-actions[b-8y4z57wfyi] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(49, 130, 246, 0.15);
}

.action-btn[b-8y4z57wfyi] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

    .action-btn.primary[b-8y4z57wfyi] {
        background: #3182f6;
        color: white;
        box-shadow: 0 2px 4px rgba(49, 130, 246, 0.2);
    }

        .action-btn.primary:hover[b-8y4z57wfyi] {
            background: #1c64f2;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(49, 130, 246, 0.3);
        }

    .action-btn.secondary[b-8y4z57wfyi] {
        background: #f8f9fa;
        color: #6b7280;
        border: 1px solid #e5e7eb;
    }

        .action-btn.secondary:hover[b-8y4z57wfyi] {
            background: #f1f3f4;
            color: #374151;
            transform: translateY(-1px);
        }
/* _content/SWMes.SFrame_EAM/Pages/LayoutManager/GridCondition.razor.rz.scp.css */
.cell-detail-info[b-7lvpl8g8ex] {
    background: rgba(49, 130, 246, 0.02);
    border: 1px solid rgba(49, 130, 246, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    /* max-width: 600px;*/
    width: 100%;
    animation: slideIn-b-7lvpl8g8ex 0.3s ease-out;
}

@keyframes slideIn-b-7lvpl8g8ex {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-header[b-7lvpl8g8ex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(49, 130, 246, 0.15);
}

.detail-title h3[b-7lvpl8g8ex] {
    font-size: 16px;
    font-weight: 700;
    color: #3182f6;
    margin: 0;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.cell-id-badge[b-7lvpl8g8ex] {
    background: #3182f6;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.detail-sections[b-7lvpl8g8ex] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-section[b-7lvpl8g8ex] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #f1f3f4;
}

.section-header[b-7lvpl8g8ex] {
    margin-bottom: 12px;
}

    .section-header h4[b-7lvpl8g8ex] {
        font-size: 14px;
        font-weight: 600;
        color: #191f28;
        margin: 0;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    }

.section-content[b-7lvpl8g8ex] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row[b-7lvpl8g8ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.info-label[b-7lvpl8g8ex] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    min-width: 7rem;
}

.info-value[b-7lvpl8g8ex] {
    font-size: 13px;
    font-weight: 600;
    color: #191f28;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

    .info-value.primary[b-7lvpl8g8ex] {
        color: #3182f6;
        background: rgba(49, 130, 246, 0.1);
        padding: 2px 8px;
        border-radius: 6px;
    }

    .info-value.highlight[b-7lvpl8g8ex] {
        color: #059669;
        background: rgba(5, 150, 105, 0.1);
        padding: 2px 8px;
        border-radius: 6px;
    }

    .info-value.range[b-7lvpl8g8ex] {
        font-family: 'Monaco', 'Menlo', monospace;
        background: #f8f9fa;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
    }

.status-active[b-7lvpl8g8ex] {
    color: #059669;
}

.status-inactive[b-7lvpl8g8ex] {
    color: #dc2626;
}

.status-merged[b-7lvpl8g8ex] {
    color: #d97706;
}

.status-normal[b-7lvpl8g8ex] {
    color: #6b7280;
}

.status-visible[b-7lvpl8g8ex] {
    color: #059669;
}

.status-hidden[b-7lvpl8g8ex] {
    color: #dc2626;
}

.quick-actions[b-7lvpl8g8ex] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(49, 130, 246, 0.15);
}

.action-btn[b-7lvpl8g8ex] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

    .action-btn.primary[b-7lvpl8g8ex] {
        background: #3182f6;
        color: white;
        box-shadow: 0 2px 4px rgba(49, 130, 246, 0.2);
    }

        .action-btn.primary:hover[b-7lvpl8g8ex] {
            background: #1c64f2;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(49, 130, 246, 0.3);
        }

    .action-btn.secondary[b-7lvpl8g8ex] {
        background: #f8f9fa;
        color: #6b7280;
        border: 1px solid #e5e7eb;
    }

        .action-btn.secondary:hover[b-7lvpl8g8ex] {
            background: #f1f3f4;
            color: #374151;
            transform: translateY(-1px);
        }
/* _content/SWMes.SFrame_EAM/Pages/LayoutManager/GridEtc.razor.rz.scp.css */
/* manager-btn 스타일 개선 */
.manager-btn[b-nsk765diu9] {
   /* padding: 8px 16px;*/
    border: none;
    border-radius: 6px;
    background: #3182f6;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(49, 130, 246, 0.2);
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    height: 32px;
    min-width: 60px;
    /*margin-left: 8px;*/
    flex-shrink: 0;
}

.manager-btn:hover[b-nsk765diu9] {
    background: #1c64f2;
    box-shadow: 0 2px 4px rgba(49, 130, 246, 0.3);
    transform: translateY(-1px);
}

.manager-btn:active[b-nsk765diu9] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(49, 130, 246, 0.2);
}

/* 기존 스타일 유지 */
.cell-detail-info[b-nsk765diu9] {
    background: rgba(49, 130, 246, 0.02);
    border: 1px solid rgba(49, 130, 246, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    width: 100%;
    animation: slideIn-b-nsk765diu9 0.3s ease-out;
}

@keyframes slideIn-b-nsk765diu9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-header[b-nsk765diu9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(49, 130, 246, 0.15);
}

.detail-title h3[b-nsk765diu9] {
    font-size: 16px;
    font-weight: 700;
    color: #3182f6;
    margin: 0;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.detail-sections[b-nsk765diu9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-section[b-nsk765diu9] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #f1f3f4;
}

.section-header[b-nsk765diu9] {
    margin-bottom: 12px;
}

.section-header h4[b-nsk765diu9] {
    font-size: 14px;
    font-weight: 600;
    color: #191f28;
    margin: 0;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.section-content[b-nsk765diu9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row[b-nsk765diu9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    gap: 12px;
}

.info-label[b-nsk765diu9] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    min-width: 7rem;
    flex-shrink: 0;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .info-row[b-nsk765diu9] {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 8px 0;
        gap: 8px;
    }
    
    .info-label[b-nsk765diu9] {
        width: 100% !important;
        margin-bottom: 4px;
        font-size: 13px;
        min-width: auto;
    }
    
    .manager-btn[b-nsk765diu9] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 8px;
        padding: 12px 16px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cell-detail-info[b-nsk765diu9] {
        padding: 12px;
        margin-top: 12px;
        border-radius: 8px;
    }
    
    .detail-header[b-nsk765diu9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .detail-title h3[b-nsk765diu9] {
        font-size: 14px;
    }
    
    .info-row[b-nsk765diu9] {
        padding: 6px 0;
        gap: 6px;
    }
    
    .info-label[b-nsk765diu9] {
        font-size: 12px;
        margin-bottom: 3px;
    }
    
    .manager-btn[b-nsk765diu9] {
        padding: 10px 16px;
        font-size: 13px;
        height: 36px;
    }
}

.info-description[b-nsk765diu9] {
    flex: 1;
    font-size: 12px;
    color: #6b7280;
}
/* _content/SWMes.SFrame_EAM/Pages/LayoutManager/GridSizeControls.razor.rz.scp.css */
.grid-size-controls[b-ooknmwt3x3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.size-section[b-ooknmwt3x3] {
    background: #f8f9fc;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e8ecef;
}

    .size-section h3[b-ooknmwt3x3] {
        font-size: 15px;
        font-weight: 600;
        color: #191f28;
        margin-bottom: 16px;
        margin-top: 0;
        border-bottom: none;
        padding-bottom: 0;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    }

.cell-properties-section[b-ooknmwt3x3] {
    background: rgba(49, 130, 246, 0.04);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(49, 130, 246, 0.15);
}

    .cell-properties-section h3[b-ooknmwt3x3] {
        color: #3182f6;
        border-bottom: none;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    }

.control-group[b-ooknmwt3x3] {
    margin-bottom: 16px;
}

    .control-group.highlight[b-ooknmwt3x3] {
        background: #fff;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid rgba(49, 130, 246, 0.2);
    }

.selected-cell-info[b-ooknmwt3x3] {
    font-weight: 600;
    color: #3182f6;
    font-size: 13px;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

label[b-ooknmwt3x3] {
    display: block;
    font-size: 13px;
    color: #4e5968;
    margin-bottom: 8px;
    font-weight: 500;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.size-input-group[b-ooknmwt3x3] {
    display: flex;
    gap: 8px;
}

.size-input[b-ooknmwt3x3] {
    flex: 7;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.unit-select[b-ooknmwt3x3] {
    flex: 3;
    min-width: 50px;
    padding: 12px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: border-color 0.2s ease;
}

input[b-ooknmwt3x3], select[b-ooknmwt3x3] {
    font-size: 14px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 100%;
    background: #fff;
    transition: border-color 0.2s ease;
}

    input:focus[b-ooknmwt3x3], select:focus[b-ooknmwt3x3], .size-input:focus[b-ooknmwt3x3], .unit-select:focus[b-ooknmwt3x3] {
        outline: none;
        border-color: #3182f6;
        box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1);
    }

.manager-btn[b-ooknmwt3x3] {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: #3182f6;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(49, 130, 246, 0.2);
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

    .manager-btn:hover[b-ooknmwt3x3] {
        background: #1c64f2;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(49, 130, 246, 0.3);
    }

    .manager-btn.secondary[b-ooknmwt3x3] {
        background: #8b95a1;
        box-shadow: 0 1px 3px rgba(139, 149, 161, 0.2);
    }

        .manager-btn.secondary:hover[b-ooknmwt3x3] {
            background: #6b7684;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 149, 161, 0.3);
        }

    .manager-btn.small[b-ooknmwt3x3] {
        padding: 12px 14px;
        font-size: 13px;
    }

.validation-message[b-ooknmwt3x3] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 6px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    padding: 6px 8px;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* 가로 배치 셀 속성 스타일 */
.cell-properties-section-horizontal[b-ooknmwt3x3] {
    background: rgba(49, 130, 246, 0.04);
    border: 1px solid rgba(49, 130, 246, 0.15);
    border-radius: 12px;
    padding: 16px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cell-info-badge[b-ooknmwt3x3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 70px;
}

.cell-id[b-ooknmwt3x3] {
    background: #3182f6;
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.cell-position[b-ooknmwt3x3] {
    font-size: 10px;
    color: #6b7280;
    font-weight: 500;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.cell-controls-horizontal[b-ooknmwt3x3] {
    display: flex;
    gap: 12px;
    flex: 1;
    align-items: end;
    flex-wrap: wrap;
}

.control-item[b-ooknmwt3x3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 60px;
}

    .control-item.content-input[b-ooknmwt3x3] {
        min-width: 100px;
        flex: 1;
    }

    .control-item label[b-ooknmwt3x3] {
        font-size: 11px;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 0;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    }

.compact-select[b-ooknmwt3x3], .compact-input[b-ooknmwt3x3] {
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

    .compact-select:focus[b-ooknmwt3x3], .compact-input:focus[b-ooknmwt3x3] {
        outline: none;
        border-color: #3182f6;
        box-shadow: 0 0 0 2px rgba(49, 130, 246, 0.1);
    }

.cell-actions-horizontal[b-ooknmwt3x3] {
    display: flex;
    gap: 8px;
}

.compact-btn[b-ooknmwt3x3] {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    white-space: nowrap;
}

    .compact-btn.primary[b-ooknmwt3x3] {
        background: #3182f6;
        color: white;
        box-shadow: 0 1px 3px rgba(49, 130, 246, 0.2);
    }

        .compact-btn.primary:hover[b-ooknmwt3x3] {
            background: #1c64f2;
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(49, 130, 246, 0.3);
        }

    .compact-btn.secondary[b-ooknmwt3x3] {
        background: white;
        color: #6b7280;
        border: 1px solid #e5e7eb;
    }

        .compact-btn.secondary:hover[b-ooknmwt3x3] {
            background: #f9fafb;
            color: #374151;
            transform: translateY(-1px);
        }

/* Radzen 컴포넌트 스타일링 */
.size-input-group .rz-numeric[b-ooknmwt3x3] {
    flex: 7 !important;
}

.size-input-group .rz-dropdown[b-ooknmwt3x3] {
    flex: 3 !important;
    min-width: 50px !important;
}

.size-input-group .rz-numeric input[b-ooknmwt3x3],
.size-input-group .rz-dropdown .rz-dropdown-label[b-ooknmwt3x3] {
    font-size: 14px !important;
    padding: 12px 14px !important;
}

/* 반응형 */
@media (max-width: 768px) {
    .cell-properties-section-horizontal[b-ooknmwt3x3] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cell-controls-horizontal[b-ooknmwt3x3] {
        justify-content: space-between;
    }

    .cell-actions-horizontal[b-ooknmwt3x3] {
        justify-content: center;
    }
}
/* _content/SWMes.SFrame_EAM/Pages/LayoutManager/SWSettingEditor.razor.rz.scp.css */

.grid-builder-container[b-3r0n93dxjj] {
    /*max-width: 1400px;*/
    /*margin: 0 auto;*/
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: auto auto auto;
    gap: 24px;
    height: auto;
    align-items: start;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    background: #f7f8fa;
    padding: 24px;
}

.grid-builder-condition-container[b-3r0n93dxjj] {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    height: auto;
    align-items: start;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    background: #f7f8fa;
    padding: 24px;
}

.setting-tab-container[b-3r0n93dxjj] {
    padding: 24px;
}

.grid-sidebar[b-3r0n93dxjj], .properties-panel[b-3r0n93dxjj] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #f1f3f4;
    height: auto;
    /* 스크롤바 숨기기 */
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}

.grid-sidebar[b-3r0n93dxjj]::-webkit-scrollbar, 
.properties-panel[b-3r0n93dxjj]::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.main-area[b-3r0n93dxjj] {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #f1f3f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    height: auto;
}

.grid-frame-label[b-3r0n93dxjj] {
    font-size: 14px;
    font-weight: 600;
    color: #3182f6;
    margin-bottom: 20px;
    text-align: center;
    background: rgba(49, 130, 246, 0.08);
    padding: 12px 20px;
    border-radius: 24px;
    border: 1px solid rgba(49, 130, 246, 0.15);
}

.grid-container[b-3r0n93dxjj] {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    padding: 0;
    width: 600px;
    height: 400px;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.control-section[b-3r0n93dxjj] {
    background: #f8f9fc;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    margin-top: 24px;
}

.template-section[b-3r0n93dxjj] {
    background: #f8f9fc;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    padding: 16px;
    font-size: 13px;
    color: #4e5968;
    margin-bottom: 24px;
}

    .control-section h3[b-3r0n93dxjj] {
        font-size: 15px;
        font-weight: 600;
        color: #191f28;
        margin-bottom: 16px;
        margin-top: 0;
        font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    }

.control-group[b-3r0n93dxjj] {
    margin-bottom: 16px;
}

.control-actions[b-3r0n93dxjj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

label[b-3r0n93dxjj] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4e5968;
    margin-bottom: 8px;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

input[b-3r0n93dxjj], select[b-3r0n93dxjj] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.2s ease;
}

    input:focus[b-3r0n93dxjj], select:focus[b-3r0n93dxjj] {
        outline: none;
        border-color: #3182f6;
        box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1);
    }

.manager-btn[b-3r0n93dxjj] {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: #3182f6;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(49, 130, 246, 0.2);
}

    .manager-btn:hover[b-3r0n93dxjj] {
        background: #1c64f2;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(49, 130, 246, 0.3);
    }

    .manager-btn.secondary[b-3r0n93dxjj] {
        background: #8b95a1;
        box-shadow: 0 1px 3px rgba(139, 149, 161, 0.2);
    }

        .manager-btn.secondary:hover[b-3r0n93dxjj] {
            background: #6b7684;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 149, 161, 0.3);
        }

.info-box[b-3r0n93dxjj] {
    background: #f8f9fc;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    padding: 16px;
    font-size: 13px;
    color: #4e5968;
    margin-top: 20px;
}

h2[b-3r0n93dxjj] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #191f28;
    border-bottom: none;
    padding-bottom: 0;
}

@media (max-width: 1200px) {
    .grid-builder-condition-container[b-3r0n93dxjj] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 10px;
        gap: 15px;
    }

    .grid-builder-container[b-3r0n93dxjj] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 10px;
        gap: 15px;
    }

    .grid-sidebar[b-3r0n93dxjj], .properties-panel[b-3r0n93dxjj] {
        padding: 15px;
    }

    .main-area[b-3r0n93dxjj] {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .grid-builder-condition-container[b-3r0n93dxjj] {
        height: auto;
        padding: 10px;
    }

    .grid-builder-container[b-3r0n93dxjj] {
        height: auto;
        padding: 10px;
    }

    .main-area[b-3r0n93dxjj] {
        padding: 15px;
        min-height: 400px;
    }

    .grid-frame-label[b-3r0n93dxjj] {
        font-size: 12px;
        margin-bottom: 10px;
        padding: 6px 12px;
    }

    .grid-container[b-3r0n93dxjj] {
        width: 320px;
        height: 240px;
        border-width: 2px;
        border-radius: 8px;
    }

    h2[b-3r0n93dxjj] {
        font-size: 14px;
    }

    .control-section h3[b-3r0n93dxjj] {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .grid-frame-label[b-3r0n93dxjj] {
        font-size: 11px;
        margin-bottom: 8px;
        padding: 5px 10px;
    }

    .grid-container[b-3r0n93dxjj] {
        width: 280px;
        height: 200px;
    }

    .main-area[b-3r0n93dxjj] {
        padding: 10px;
        min-height: 300px;
    }
}

/* 메인 영역의 셀 속성 섹션 스타일 */
.main-area .cell-properties-section-horizontal[b-3r0n93dxjj] {
    background: rgba(49, 130, 246, 0.04);
    border: 1px solid rgba(49, 130, 246, 0.15);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 600px;
    width: 100%;
    margin-top:20px;
}

.main-area .cell-info-badge[b-3r0n93dxjj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 70px;
}

.main-area .cell-id[b-3r0n93dxjj] {
    background: #3182f6;
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.main-area .cell-position[b-3r0n93dxjj] {
    font-size: 10px;
    color: #6b7280;
    font-weight: 500;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

.main-area .cell-controls-horizontal[b-3r0n93dxjj] {
    display: flex;
    gap: 12px;
    flex: 1;
    align-items: stretch;
    flex-wrap: wrap;
}

.main-area .control-item[b-3r0n93dxjj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    justify-content: stretch;
}

.main-area .control-item.content-input[b-3r0n93dxjj] {
    flex: 1;
}

.main-area .control-item label[b-3r0n93dxjj] {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 0;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* Radzen 컴포넌트 스타일링 */
.main-area .control-item .rz-textbox[b-3r0n93dxjj],
.main-area .control-item .rz-dropdown[b-3r0n93dxjj] {
    height: 36px !important;
    width: 100% !important;
    font-size: 12px !important;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: white !important;
    box-sizing: border-box !important;
}

.main-area .control-item .rz-textbox input[b-3r0n93dxjj],
.main-area .control-item .rz-dropdown .rz-dropdown-label[b-3r0n93dxjj] {
    padding: 10px 8px !important;
    font-size: 12px !important;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important;
}

/* 기존 클래스 유지 (호환성) */
.main-area .compact-select[b-3r0n93dxjj], .main-area .compact-input[b-3r0n93dxjj] {
    padding: 10px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    height: 36px;
    box-sizing: border-box;
    flex: 1;
    width: 100% !important;
}

.main-area .compact-select:focus[b-3r0n93dxjj], .main-area .compact-input:focus[b-3r0n93dxjj] {
    outline: none;
    border-color: #3182f6;
    box-shadow: 0 0 0 2px rgba(49, 130, 246, 0.1);
}

.main-area .cell-actions-horizontal[b-3r0n93dxjj] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-left: auto;
    align-self: flex-end;
}

.main-area .compact-btn[b-3r0n93dxjj] {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    white-space: nowrap;
    min-width: 60px;
    height: 36px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-area .compact-btn.primary[b-3r0n93dxjj] {
    background: #3182f6;
    color: white;
    box-shadow: 0 1px 3px rgba(49, 130, 246, 0.2);
    width: 5rem
}

.main-area .compact-btn.primary:hover[b-3r0n93dxjj] {
    background: #1c64f2;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(49, 130, 246, 0.3);        
}

.main-area .compact-btn.secondary[b-3r0n93dxjj] {
    background: white;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    width: 5rem
}

.main-area .compact-btn.secondary:hover[b-3r0n93dxjj] {
    background: #f9fafb;
    color: #374151;
    transform: translateY(-1px);
}

.setting-info-banner[b-3r0n93dxjj] {
    padding: 20px 24px;
    /*max-width: 1400px;*/
    /*margin: 0 auto;*/
}

.page-container[b-3r0n93dxjj] {
    animation: slideIn-b-3r0n93dxjj 0.3s ease-out;
}

@keyframes slideIn-b-3r0n93dxjj {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-content-animated.tab-switching[b-3r0n93dxjj] {
    animation: slideUp-b-3r0n93dxjj 0.4s ease-out;
}

@keyframes slideUp-b-3r0n93dxjj {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.banner-content[b-3r0n93dxjj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 24px;
}

.banner-content h3[b-3r0n93dxjj] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #191f28;
    letter-spacing: -0.3px;
}

.setting-status[b-3r0n93dxjj] {
    background: #f8f9fa;
    color: #6b7684;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e9ecef;
}

.tab-container[b-3r0n93dxjj] {
    /*max-width: 1400px;*/
    /*margin: 0 auto;*/
    padding: 0 24px 0 24px;
}

.tab-bar[b-3r0n93dxjj] {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tab-bar[b-3r0n93dxjj] {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tab-button[b-3r0n93dxjj] {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #6b7684;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    letter-spacing: -0.2px;
}

    .tab-button:hover[b-3r0n93dxjj] {
        background: #f8f9fa;
        color: #191f28;
    }

    .tab-button.active[b-3r0n93dxjj] {
        background: #0064ff;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 100, 255, 0.3);
    }

        .tab-button.active:hover[b-3r0n93dxjj] {
            background: #0056e0;
            color: #ffffff;
        }

.tab-content[b-3r0n93dxjj] {
    padding: 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.placeholder-content[b-3r0n93dxjj] {
    text-align: center;
    padding: 40px;
    color: #6b7684;
}

.placeholder-content h3[b-3r0n93dxjj] {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #191f28;
}

.placeholder-content p[b-3r0n93dxjj] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* 뒤로가기 버튼 스타일 */
.back-button[b-3r0n93dxjj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(49, 130, 246, 0.08);
    border: 1px solid rgba(49, 130, 246, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-right: 12px;
    position: relative;
}

.back-button:hover[b-3r0n93dxjj] {
    background: rgba(49, 130, 246, 0.12);
    border-color: rgba(49, 130, 246, 0.25);
    transform: translateX(-2px);
}

.back-button:active[b-3r0n93dxjj] {
    transform: translateX(0);
    background: rgba(49, 130, 246, 0.15);
}

/* CSS로 만든 화살표 */
.back-button[b-3r0n93dxjj]::before {
    content: '';
    width: 8px;
    height: 8px;
    border-left: 2px solid #3182f6;
    border-bottom: 2px solid #3182f6;
    transform: rotate(45deg);
    transition: all 0.2s ease;
}

.back-button:hover[b-3r0n93dxjj]::before {
    border-color: #1c64f2;
    transform: rotate(45deg) translateX(-1px);
}
/* _content/SWMes.SFrame_EAM/Pages/Notice/ViewerNoticeInPage.razor.rz.scp.css */



.post-container[b-txclrski0w] {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.post-header[b-txclrski0w] {
    border-left: 5px solid var(--rz-primary);
}

.post-info[b-txclrski0w] {
    color: var(--rz-text-disabled-color);
}

.post-content[b-txclrski0w] {
    height: 900px;
    min-height: 300px;
    line-height: 1.8;
    font-size: 1.1rem;
    overflow:auto;
}

.edit-label[b-txclrski0w] {
    /* background-color: #f2f2f2; */
    /* padding: 6px 12px; */
    /* border-left: 3px solid #0066cc; */
    display: block;
    margin-bottom: 5px;
    /* border-radius: 0 4px 4px 0; */
    font-weight: 500;
}

.comments-section[b-txclrski0w] {
    border-top: 3px solid var(--rz-secondary-lighter);
}

.comment[b-txclrski0w] {
    background-color: var(--rz-base-100);
    transition: background-color 0.2s;
}

    .comment:hover[b-txclrski0w] {
        background-color: var(--rz-base-200);
    }

.text-right[b-txclrski0w] {
    text-align: right;
}


@media (max-width: 768px) {
    .post-header .rz-button[b-txclrski0w] {
        margin-top: 10px;
    }
}

.post-info .rz-text-body2[b-txclrski0w] {
    display: flex !important;
    align-items: center !important; 
}

.post-info .notranslate[b-txclrski0w] {
    display: flex !important;
    align-items: center !important;
    margin-right: 5px !important;
}

/* 댓글 스타일 */
.comment-list[b-txclrski0w] {
    width: 100%;
    margin-top: 15px;
}

.comment-item[b-txclrski0w] {
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.comment-header[b-txclrski0w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.user-info[b-txclrski0w] {
    display: flex;
    align-items: flex-start;
}

.avatar[b-txclrski0w] {
    font-size: 40px;
    color: #888;
    margin-right: 10px;
}

.user-meta[b-txclrski0w] {
    display: flex;
    flex-direction: column;
    padding-left: 7px;
}

.username-container[b-txclrski0w] {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.username[b-txclrski0w] {
    font-weight: bold;
    color: #333;
    margin-right: 8px;
    font-size: 14px;
}

.profile-badge[b-txclrski0w] {
    background-color: #f4f4f4;
    color: #666;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.comment-meta[b-txclrski0w] {
    display: flex;
    align-items: center;
    color: #888;
    font-size: 12px;
}

.comment-date[b-txclrski0w] {
    margin-right: 10px;
}

.comment-notification[b-txclrski0w] {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 12px;
}

    .comment-notification rz-icon[b-txclrski0w] {
        font-size: 14px;
        margin-right: 2px;
    }

.comment-actions[b-txclrski0w] {
    display: flex;
}

.action-btn[b-txclrski0w] {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    margin-left: 5px;
    font-size: 13px;
    padding: 5px;
}

    .action-btn:hover[b-txclrski0w] {
        color: #333;
    }

.comment-content[b-txclrski0w] {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    word-break: break-word;
    padding-left: 52px; /* 아바타 너비 + 마진과 일치 */
}

/* 파일업로드 */
.file-upload-area[b-txclrski0w] {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.file-header[b-txclrski0w] {
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 0px 5px 0px;
    margin-bottom: 15px;
}

.file-title[b-txclrski0w] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #333;
}

    .file-title .rz-icon[b-txclrski0w] {
        margin-right: 8px;
        color: #3b7eff;
    }

.file-upload-container[b-txclrski0w] {
    display: flex;
    justify-content: space-between;
    /*padding: 0 15px 15px;*/
    align-items: center;
}

.custom-file[b-txclrski0w] {
    position: relative;
    flex-grow: 1;
    margin-right: 10px;
}

#NTBoardEditFieldFile[b-txclrski0w] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    display: none !important;
    z-index: 2;
}

.custom-file-label[b-txclrski0w] {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 15px;
    background-color: #f5f8fd;
    border: 1px dashed #3b7eff;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

    .custom-file-label .rz-icon[b-txclrski0w] {
        margin-right: 8px;
        color: #3b7eff;
    }

    .custom-file-label:hover[b-txclrski0w] {
        background-color: #edf2fd;
    }

.file-delete-btn[b-txclrski0w] {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 12px;
    height: 40px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

    .file-delete-btn .rz-icon[b-txclrski0w] {
        margin-right: 5px;
        color: #ff5252;
    }

    .file-delete-btn:hover[b-txclrski0w] {
        background-color: #f0f0f0;
    }

.selected-files-area[b-txclrski0w] {
    /*  padding: 0 15px 10px;*/
    padding: 10px 0px 0px;
}

.file-list[b-txclrski0w] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.file-item[b-txclrski0w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid #16A085;
    border-top: 1px solid lavender;
    border-bottom: 1px solid lavender;
    border-right: 1px solid lavender;
}

.file-item-error[b-txclrski0w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    background-color: rgba(255, 137, 139, 0.3);
    color: #de0024;
    border-radius: 4px;
    border-left: 3px solid #de0024;
    border-top: 1px solid lavender;
    border-bottom: 1px solid lavender;
    border-right: 1px solid lavender;
}

.file-info[b-txclrski0w] {
    display: flex;
    align-items: center;
}

    .file-info .rz-icon[b-txclrski0w] {
        margin-right: 8px;
        color: #3b7eff;
    }

.file-name[b-txclrski0w] {
    margin-left : 5px;
    margin-right: 10px;
    font-size: 13px;
    color: #333;
}

.file-name-error[b-txclrski0w] {
    margin-left: 5px;
    margin-right: 10px;
    font-size: 13px;
    color: #de0024;
}

.file-size[b-txclrski0w] {
    font-size: 12px;
    color: #888;
}

.file-remove-btn[b-txclrski0w] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .file-remove-btn:hover[b-txclrski0w] {
        background-color: #f0f0f0;
        color: #ff5252;
    }

.file-actions[b-txclrski0w] {
    display: flex;
    align-items: center;
}

.file-download-btn[b-txclrski0w] {
    background: none;
    border: none;
    color: #3b7eff;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-right: 4px;
}

    .file-download-btn:hover[b-txclrski0w] {
        background-color: #edf2fd;
        color: #2c6cef;
    }

.no-files[b-txclrski0w] {
    text-align: center;
    color: #888;
    padding: 15px;
    font-style: italic;
    font-size: 14px;
}



/* 카드 삭제 버튼 스타일 */
.product-card-with-delete[b-txclrski0w] {
    position: relative;
}

.delete-button-container[b-txclrski0w] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.delete-btn[b-txclrski0w] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 4px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
}

    .delete-btn:hover[b-txclrski0w] {
        background-color: #fff !important;
        transform: scale(1.1) !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    }

    .delete-btn .rz-button-icon[b-txclrski0w] {
        font-size: 14px !important;
    }

/* 카드에 여백 조정 (삭제 버튼을 위한 공간 확보) */
.product-card-with-delete .product-main[b-txclrski0w] {
    padding-right: 40px;
}
/* _content/SWMes.SFrame_EAM/Pages/Notice/ViewerNoticePopupPage.razor.rz.scp.css */
/* _content/SWMes.SFrame_EAM/Pages/Setting/ViewerSettingDepartment.razor.rz.scp.css */

.btn-list[b-o0ofns1gcc] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 5px; /* 버튼 간의 간격 조정 */
}


    /* From Uiverse.io by kamehame-ha */
    .btn-list .button[b-o0ofns1gcc] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 1px;
        gap: 15px;
        background-color: #2e5283;
        width: 7rem;
        outline: 3px #2e5283 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }

    .btn-list p[b-o0ofns1gcc] {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-list .button .text[b-o0ofns1gcc] {
        color: white;
        font-weight: 700;
        font-size: 0.95em;
        transition: 400ms;
    }

    .btn-list .button svg path[b-o0ofns1gcc] {
        transition: 400ms;
    }

    .btn-list .button:hover[b-o0ofns1gcc] {
        background-color: transparent;
    }

        .btn-list .button:hover .text[b-o0ofns1gcc] {
            color: #2e5283;
        }

        .btn-list .button:hover svg path[b-o0ofns1gcc] {
            fill: #2e5283;
        }

.viewer-main[b-o0ofns1gcc] {
}

.viewer-heading[b-o0ofns1gcc] {
    display: flow-root;
    padding: 0px;
    color: #3E3E3E !important;
    border-bottom: 2px solid #2e5283;
}

    .viewer-heading > span > form > button.item-btn[b-o0ofns1gcc],
    .viewer-heading > span > button.item-btn[b-o0ofns1gcc] {
        vertical-align: middle;
        width: 70px;
    }

    .viewer-heading .breadcrumb > li + li[b-o0ofns1gcc]:before {
        padding: 0px 0px 0px 1px;
        margin-right: 10px;
    }


/*.viewer-contents {
    height: calc(100vh - 210px);
}*/

.pull-right[b-o0ofns1gcc] {
    float: right !important;
}

.pull-left[b-o0ofns1gcc] {
    float: left;
    /*padding: 0.6rem;*/
    font-size: 14px;
}

.breadcrumb-wrapper[b-o0ofns1gcc] {
    align-self: flex-end;
    padding: 0.6rem;
    display: inline-block;
}

.breadcrumb[b-o0ofns1gcc] {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
    background-color: inherit;
}

.item-btn[b-o0ofns1gcc] {
    background-color: #2e5283;
    vertical-align: middle;
    border: none;
    width: 80px;
    padding: 5px 11px 5px 11px;
    margin: 5px 0px 0px 0px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
}

    .item-btn:hover[b-o0ofns1gcc] {
        background-color: #101d30;
    }




.gridlayout-item[b-o0ofns1gcc] {
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column; /* 수직 방향으로 배치 */
    align-items: stretch; /* 자식 요소들이 넓이를 맞추도록 */
}

    .gridlayout-item[b-o0ofns1gcc]:before {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

.pull-right[b-o0ofns1gcc] {
    float: right !important;
}

.pull-left[b-o0ofns1gcc] {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}

.pull-left-viewer-grid-heading[b-o0ofns1gcc] {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}


.viewer-grid-heading[b-o0ofns1gcc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* RadzenDataGrid와의 간격 조정 */
}

.viewer-grid-title[b-o0ofns1gcc] {
    padding-left: 0.3rem;
    font-weight: 550;
    color: #3E3E3E;
}

.btn-list-content[b-o0ofns1gcc] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 10px; /* 버튼 간의 간격 조정 */
}

    /*.btn-list-content .button-content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 13.8px 15px;
        height: 1px;
        gap: 15px;
        background-color: #16A085;
        width: 4rem;
        outline: 3px #16A085 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }
*/
    .btn-list-content p[b-o0ofns1gcc] {
        margin-top: 0;
        margin-bottom: 0;
    }

    /*.btn-list-content .button-content .text {
        color: white;
        font-weight: 500;
        font-size: 0.8em;
        transition: 400ms;
    }

    .btn-list-content .button-content svg path {
        transition: 400ms;
    }

    .btn-list-content .button-content:hover {
        background-color: transparent;
    }

        .btn-list-content .button-content:hover .text {
            color: #16A085;
        }

        .btn-list-content .button-content:hover svg path {
            fill: #16A085;
        }*/
/* _content/SWMes.SFrame_EAM/Pages/Setting/ViewerSettingLanguagePage.razor.rz.scp.css */



.btn-list[b-c1fd0araiz] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 5px; /* 버튼 간의 간격 조정 */
}


    /* From Uiverse.io by kamehame-ha */
    .btn-list .button[b-c1fd0araiz] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 1px;
        gap: 15px;
        background-color: #2e5283;
        width: 7rem;
        outline: 3px #2e5283 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }

    .btn-list p[b-c1fd0araiz] {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-list .button .text[b-c1fd0araiz] {
        color: white;
        font-weight: 700;
        font-size: 0.95em;
        transition: 400ms;
    }

    .btn-list .button svg path[b-c1fd0araiz] {
        transition: 400ms;
    }

    .btn-list .button:hover[b-c1fd0araiz] {
        background-color: transparent;
    }

        .btn-list .button:hover .text[b-c1fd0araiz] {
            color: #2e5283;
        }

        .btn-list .button:hover svg path[b-c1fd0araiz] {
            fill: #2e5283;
        }

.viewer-main[b-c1fd0araiz] {
}

.viewer-heading[b-c1fd0araiz] {
    display: flow-root;
    padding: 0px;
    color: #3E3E3E !important;
    border-bottom: 2px solid #2e5283;
}

    .viewer-heading > span > form > button.item-btn[b-c1fd0araiz],
    .viewer-heading > span > button.item-btn[b-c1fd0araiz] {
        vertical-align: middle;
        width: 70px;
    }

    .viewer-heading .breadcrumb > li + li[b-c1fd0araiz]:before {
        padding: 0px 0px 0px 1px;
        margin-right: 10px;
    }


/*.viewer-contents {
    height: calc(100vh - 210px);
}*/

.pull-right[b-c1fd0araiz] {
    float: right !important;
}

.pull-left[b-c1fd0araiz] {
    float: left;
  /*  padding: 0.6rem;*/
    font-size: 14px;
}

.breadcrumb-wrapper[b-c1fd0araiz] {
    align-self: flex-end;
    padding: 0.6rem;
    display: inline-block;
}

.breadcrumb[b-c1fd0araiz] {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
    background-color: inherit;
}

.item-btn[b-c1fd0araiz] {
    background-color: #2e5283;
    vertical-align: middle;
    border: none;
    width: 80px;
    padding: 5px 11px 5px 11px;
    margin: 5px 0px 0px 0px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
}

    .item-btn:hover[b-c1fd0araiz] {
        background-color: #101d30;
    }




.gridlayout-item[b-c1fd0araiz] {
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column; /* 수직 방향으로 배치 */
    align-items: stretch; /* 자식 요소들이 넓이를 맞추도록 */
}

    .gridlayout-item[b-c1fd0araiz]:before {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

.pull-right[b-c1fd0araiz] {
    float: right !important;
}

.pull-left[b-c1fd0araiz] {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}

.pull-left-viewer-grid-heading[b-c1fd0araiz] {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}


.viewer-grid-heading[b-c1fd0araiz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* RadzenDataGrid와의 간격 조정 */
}

.viewer-grid-title[b-c1fd0araiz] {
    padding-left: 0.3rem;
    font-weight: 550;
    color: #3E3E3E;
}

.btn-list-content[b-c1fd0araiz] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 10px; /* 버튼 간의 간격 조정 */
}

    /*.btn-list-content .button-content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 13.8px 15px;
        height: 1px;
        gap: 15px;
        background-color: #16A085;
        width: 4rem;
        outline: 3px #16A085 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }
*/
    .btn-list-content p[b-c1fd0araiz] {
        margin-top: 0;
        margin-bottom: 0;
    }
/*
    .btn-list-content .button-content .text {
        color: white;
        font-weight: 500;
        font-size: 0.8em;
        transition: 400ms;
    }

    .btn-list-content .button-content svg path {
        transition: 400ms;
    }

    .btn-list-content .button-content:hover {
        background-color: transparent;
    }

        .btn-list-content .button-content:hover .text {
            color: #16A085;
        }

        .btn-list-content .button-content:hover svg path {
            fill: #16A085;
        }*/
/* _content/SWMes.SFrame_EAM/Pages/Setting/ViewerSettingLogPage.razor.rz.scp.css */

.btn-list[b-rbt3d231wm] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 5px; /* 버튼 간의 간격 조정 */
}


    /* From Uiverse.io by kamehame-ha */
    .btn-list .button[b-rbt3d231wm] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 1px;
        gap: 15px;
        background-color: #2e5283;
        width: 7rem;
        outline: 3px #2e5283 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }

    .btn-list p[b-rbt3d231wm] {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-list .button .text[b-rbt3d231wm] {
        color: white;
        font-weight: 700;
        font-size: 0.95em;
        transition: 400ms;
    }

    .btn-list .button svg path[b-rbt3d231wm] {
        transition: 400ms;
    }

    .btn-list .button:hover[b-rbt3d231wm] {
        background-color: transparent;
    }

        .btn-list .button:hover .text[b-rbt3d231wm] {
            color: #2e5283;
        }

        .btn-list .button:hover svg path[b-rbt3d231wm] {
            fill: #2e5283;
        }

.viewer-main[b-rbt3d231wm] {
}

.viewer-heading[b-rbt3d231wm] {
    display: flow-root;
    padding: 0px;
    color: #3E3E3E !important;
    border-bottom: 2px solid #2e5283;
}

    .viewer-heading > span > form > button.item-btn[b-rbt3d231wm],
    .viewer-heading > span > button.item-btn[b-rbt3d231wm] {
        vertical-align: middle;
        width: 70px;
    }

    .viewer-heading .breadcrumb > li + li[b-rbt3d231wm]:before {
        padding: 0px 0px 0px 1px;
        margin-right: 10px;
    }


/*.viewer-contents {
    height: calc(100vh - 210px);
}*/

.pull-right[b-rbt3d231wm] {
    float: right !important;
}

.pull-left[b-rbt3d231wm] {
    float: left;
  /*  padding: 0.6rem;*/
    font-size: 14px;
}

.breadcrumb-wrapper[b-rbt3d231wm] {
    align-self: flex-end;
    padding: 0.6rem;
    display: inline-block;
}

.breadcrumb[b-rbt3d231wm] {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
    background-color: inherit;
}

.item-btn[b-rbt3d231wm] {
    background-color: #2e5283;
    vertical-align: middle;
    border: none;
    width: 80px;
    padding: 5px 11px 5px 11px;
    margin: 5px 0px 0px 0px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
}

    .item-btn:hover[b-rbt3d231wm] {
        background-color: #101d30;
    }




.gridlayout-item[b-rbt3d231wm] {
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column; /* 수직 방향으로 배치 */
    align-items: stretch; /* 자식 요소들이 넓이를 맞추도록 */
}

    .gridlayout-item[b-rbt3d231wm]:before {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

.pull-right[b-rbt3d231wm] {
    float: right !important;
}

.pull-left[b-rbt3d231wm] {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}

.pull-left-viewer-grid-heading[b-rbt3d231wm] {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}


.viewer-grid-heading[b-rbt3d231wm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* RadzenDataGrid와의 간격 조정 */
}

.viewer-grid-title[b-rbt3d231wm] {
    padding-left: 0.3rem;
    font-weight: 550;
    color: #3E3E3E;
}

.btn-list-content[b-rbt3d231wm] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 10px; /* 버튼 간의 간격 조정 */
}

    /*.btn-list-content .button-content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 13.8px 15px;
        height: 1px;
        gap: 15px;
        background-color: #16A085;
        width: 4rem;
        outline: 3px #16A085 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }*/

    .btn-list-content p[b-rbt3d231wm] {
        margin-top: 0;
        margin-bottom: 0;
    }
/*
    .btn-list-content .button-content .text {
        color: white;
        font-weight: 500;
        font-size: 0.8em;
        transition: 400ms;
    }

    .btn-list-content .button-content svg path {
        transition: 400ms;
    }

    .btn-list-content .button-content:hover {
        background-color: transparent;
    }

        .btn-list-content .button-content:hover .text {
            color: #16A085;
        }

        .btn-list-content .button-content:hover svg path {
            fill: #16A085;
        }
*/
/* _content/SWMes.SFrame_EAM/Pages/Setting/ViewerSettingMenuPage.razor.rz.scp.css */

.btn-list[b-3g670s6sqo] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 5px; /* 버튼 간의 간격 조정 */
}


    /* From Uiverse.io by kamehame-ha */
    .btn-list .button[b-3g670s6sqo] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 1px;
        gap: 15px;
        background-color: #2e5283;
        width: 7rem;
        outline: 3px #2e5283 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }

    .btn-list p[b-3g670s6sqo] {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-list .button .text[b-3g670s6sqo] {
        color: white;
        font-weight: 700;
        font-size: 0.95em;
        transition: 400ms;
    }

    .btn-list .button svg path[b-3g670s6sqo] {
        transition: 400ms;
    }

    .btn-list .button:hover[b-3g670s6sqo] {
        background-color: transparent;
    }

        .btn-list .button:hover .text[b-3g670s6sqo] {
            color: #2e5283;
        }

        .btn-list .button:hover svg path[b-3g670s6sqo] {
            fill: #2e5283;
        }

.viewer-main[b-3g670s6sqo] {
}

.viewer-heading[b-3g670s6sqo] {
    display: flow-root;
    padding: 0px;
    color: #3E3E3E !important;
    border-bottom: 2px solid #2e5283;
}

    .viewer-heading > span > form > button.item-btn[b-3g670s6sqo],
    .viewer-heading > span > button.item-btn[b-3g670s6sqo] {
        vertical-align: middle;
        width: 70px;
    }

    .viewer-heading .breadcrumb > li + li[b-3g670s6sqo]:before {
        padding: 0px 0px 0px 1px;
        margin-right: 10px;
    }


/*.viewer-contents {
    height: calc(100vh - 210px);
}*/

.pull-right[b-3g670s6sqo] {
    float: right !important;
}

.pull-left[b-3g670s6sqo] {
    float: left;
   /* padding: 0.6rem;*/
    font-size: 14px;
}

.breadcrumb-wrapper[b-3g670s6sqo] {
    align-self: flex-end;
    padding: 0.6rem;
    display: inline-block;
}

.breadcrumb[b-3g670s6sqo] {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
    background-color: inherit;
}

.item-btn[b-3g670s6sqo] {
    background-color: #2e5283;
    vertical-align: middle;
    border: none;
    width: 80px;
    padding: 5px 11px 5px 11px;
    margin: 5px 0px 0px 0px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
}

    .item-btn:hover[b-3g670s6sqo] {
        background-color: #101d30;
    }




.gridlayout-item[b-3g670s6sqo] {
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column; /* 수직 방향으로 배치 */
    align-items: stretch; /* 자식 요소들이 넓이를 맞추도록 */
}

.gridlayout-item[b-3g670s6sqo]:before {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
}

.pull-right[b-3g670s6sqo] {
    float: right !important;
}

.pull-left[b-3g670s6sqo] {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}

.viewer-grid-heading[b-3g670s6sqo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* RadzenDataGrid와의 간격 조정 */
}

.viewer-grid-title[b-3g670s6sqo] {
    padding-left: 0.3rem;
    font-weight: 550;
    color: #3E3E3E;
}



.btn-list-content[b-3g670s6sqo] {
    display: flex;  /* 버튼들을 가로로 배치 */
    gap: 10px;      /* 버튼 간의 간격 조정 */
}

/*.btn-list-content .button-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13.8px 15px;
    height: 1px;
    gap: 15px;
    background-color: #16A085;
    width: 7rem;
    outline: 3px #16A085 solid;
    outline-offset: -3px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    margin-top: 0.1rem;
    transition: 400ms;
}*/

.btn-list-content p[b-3g670s6sqo] {
    margin-top: 0;
    margin-bottom: 0;
}

/*.btn-list-content .button-content .text {
    color: white;
    font-weight: 500;
    font-size: 0.8em;
    transition: 400ms;
}*/

/*.btn-list-content .button-content svg path {
    transition: 400ms;
}*/

/*.btn-list-content .button-content:hover {
    background-color: transparent;
}

.btn-list-content .button-content:hover .text {
    color: #16A085;
}

.btn-list-content .button-content:hover svg path {
    fill: #16A085;
}*/
/* _content/SWMes.SFrame_EAM/Pages/Setting/ViewerSettingPopupPage.razor.rz.scp.css */


.popup-button[b-auvon4vlc3] {
    width: 75px !important;
}


.btn-list .setting[b-auvon4vlc3] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 17px 15px;
    height: 1px;
    gap: 15px;
    background-color: #6c757d;
    width: 3.4rem;
    outline: 3px #6c757d solid;
    outline-offset: -3px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    margin-top: 0.1rem;
    transition: 400ms;
}


.btn-list .setting .text[b-auvon4vlc3] {
    color: white;
    font-weight: 700;
    font-size: 0.95em;
    transition: 400ms;
}

.btn-list .setting svg path[b-auvon4vlc3] {
    transition: 400ms;
}

.btn-list .setting:hover[b-auvon4vlc3] {
    background-color: transparent;
}

.btn-list .setting:hover .text[b-auvon4vlc3] {
        color: #6c757d;
}

.btn-list .setting:hover svg path[b-auvon4vlc3] {
        fill: #6c757d;
}
/* _content/SWMes.SFrame_EAM/Pages/Setting/ViewerSettingRolePage.razor.rz.scp.css */

.btn-list[b-ydncyb5pcq] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 5px; /* 버튼 간의 간격 조정 */
}


    /* From Uiverse.io by kamehame-ha */
    .btn-list .button[b-ydncyb5pcq] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 17px 15px;
        height: 1px;
        gap: 15px;
        background-color: #2e5283;
        width: 7rem;
        outline: 3px #2e5283 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.1rem;
        transition: 400ms;
    }

    .btn-list p[b-ydncyb5pcq] {
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-list .button .text[b-ydncyb5pcq] {
        color: white;
        font-weight: 700;
        font-size: 0.95em;
        transition: 400ms;
    }

    .btn-list .button svg path[b-ydncyb5pcq] {
        transition: 400ms;
    }

    .btn-list .button:hover[b-ydncyb5pcq] {
        background-color: transparent;
    }

        .btn-list .button:hover .text[b-ydncyb5pcq] {
            color: #2e5283;
        }

        .btn-list .button:hover svg path[b-ydncyb5pcq] {
            fill: #2e5283;
        }

.viewer-main[b-ydncyb5pcq] {
}

.viewer-heading[b-ydncyb5pcq] {
    display: flow-root;
    padding: 0px;
    color: #3E3E3E !important;
    border-bottom: 2px solid #2e5283;
}

    .viewer-heading > span > form > button.item-btn[b-ydncyb5pcq],
    .viewer-heading > span > button.item-btn[b-ydncyb5pcq] {
        vertical-align: middle;
        width: 70px;
    }

    .viewer-heading .breadcrumb > li + li[b-ydncyb5pcq]:before {
        padding: 0px 0px 0px 1px;
        margin-right: 10px;
    }


/*.viewer-contents {
    height: calc(100vh - 210px);
}*/

.pull-right[b-ydncyb5pcq] {
    float: right !important;
}

.pull-left[b-ydncyb5pcq] {
    float: left;
 /*   padding: 0.6rem;*/
    font-size: 14px;
}

.breadcrumb-wrapper[b-ydncyb5pcq] {
    align-self: flex-end;
    padding: 0.6rem;
    display: inline-block;
}

.breadcrumb[b-ydncyb5pcq] {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0;
    background-color: inherit;
}

.item-btn[b-ydncyb5pcq] {
    background-color: #2e5283;
    vertical-align: middle;
    border: none;
    width: 80px;
    padding: 5px 11px 5px 11px;
    margin: 5px 0px 0px 0px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
}

    .item-btn:hover[b-ydncyb5pcq] {
        background-color: #101d30;
    }




.gridlayout-item[b-ydncyb5pcq] {
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column; /* 수직 방향으로 배치 */
    align-items: stretch; /* 자식 요소들이 넓이를 맞추도록 */
}

    .gridlayout-item[b-ydncyb5pcq]:before {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

.pull-right[b-ydncyb5pcq] {
    float: right !important;
}

.pull-left[b-ydncyb5pcq] {
    float: left;
    /* padding: 0.6rem;*/
    font-size: 14px;
}

.pull-left-viewer-grid-heading[b-ydncyb5pcq] {
    float: left;
   /*  padding: 0.6rem;*/
    font-size: 14px;
}


.viewer-grid-heading[b-ydncyb5pcq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* RadzenDataGrid와의 간격 조정 */
}

.viewer-grid-title[b-ydncyb5pcq] {
    padding-left: 0.3rem;
    font-weight: 550;
    color: #3E3E3E;
}

.btn-list-content[b-ydncyb5pcq] {
    display: flex; /* 버튼들을 가로로 배치 */
    gap: 10px; /* 버튼 간의 간격 조정 */
}

    .btn-list-content .button-content[b-ydncyb5pcq] {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 13.8px 15px;
        height: 1px;
        gap: 15px;
        background-color: #16A085;
        /*width: 4rem;*/
        outline: 3px #16A085 solid;
        outline-offset: -3px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        margin-top: 0.2rem;
        transition: 400ms;
    }

    .btn-list-content p[b-ydncyb5pcq] {
        margin-top: 0;
        margin-bottom: 0;
    }
/*
    .btn-list-content .button-content .text {
        color: white;
        font-weight: 500;
        font-size: 0.8em;
        transition: 400ms;
    }

    .btn-list-content .button-content svg path {
        transition: 400ms;
    }

    .btn-list-content .button-content:hover {
        background-color: transparent;
    }

        .btn-list-content .button-content:hover .text {
            color: #16A085;
        }

        .btn-list-content .button-content:hover svg path {
            fill: #16A085;
        }
*/
/* _content/SWMes.SFrame_EAM/Pages/WorkspaceStatus.razor.rz.scp.css */
.workspace-status[b-4e0wjjlbfo] { max-width:1200px; margin:8px auto; color:var(--sframe-text); }
.workspace-status[b-4e0wjjlbfo]  .status-panel { overflow:hidden; }
.status-table[b-4e0wjjlbfo] { width:100%; border-collapse:collapse; color:inherit; }
.status-table th[b-4e0wjjlbfo], .status-table td[b-4e0wjjlbfo] { padding:16px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--sframe-border); }
.status-table th[b-4e0wjjlbfo] { background:var(--sframe-background); font-weight:600; }
.status-table td:first-child[b-4e0wjjlbfo] { width:150px; font-weight:600; }
.status-table tr:last-child td[b-4e0wjjlbfo] { border-bottom:0; }
@media (max-width:600px) {
    .workspace-status[b-4e0wjjlbfo] { margin:8px 0; }
    .status-table th[b-4e0wjjlbfo], .status-table td[b-4e0wjjlbfo] { padding:12px 10px; overflow-wrap:anywhere; }
    .status-table td:first-child[b-4e0wjjlbfo] { width:80px; }
    .workspace-status[b-4e0wjjlbfo]  h1 { font-size:1.5rem; line-height:1.4; }
}
/* _content/SWMes.SFrame_EAM/Shared/Header.razor.rz.scp.css */
.navbar.header-navbar[b-elmirb0s1a] {
    flex-grow: 0;
    flex-wrap: nowrap;
    border: none;
    /*background-color: inherit;*/
    background-color: white;
    border-radius: 0;
    height: 3.5rem;
    min-height: 3.5rem;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
    justify-content: flex-start;
}

.header-navbar .navbar-toggler[b-elmirb0s1a] {
    outline: none;
    border-radius: 0;
    padding-left: .75rem;
    padding-right: .75rem;
    box-shadow: none;
    align-self: stretch;
}

.header-navbar .navbar-toggler .navbar-toggler-icon[b-elmirb0s1a] {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    background-color: transparent !important;
    height: 2rem;
    width: 2rem;
}

.Title[b-elmirb0s1a] {
    font-size: 1.1rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 350px) {
    .Title[b-elmirb0s1a] {
        font-size: inherit;
    }
}

.navbar.header-navbar > div:first-child[b-elmirb0s1a] {
    height: 3.5rem;
    min-height: 3.5rem;
}

#topNavDropdown .profile_menu .rz-profile-menu[b-elmirb0s1a] {
    background-color: white !important;
}

#topNavDropdown .profile_menu .rz-profile-menu .rz-navigation-item-icon-children[b-elmirb0s1a],
[b-elmirb0s1a] #proFavorite .rz-navigation-item-icon-children {
    display: none !important;
}

#topNavDropdown .profile_menu .language-button[b-elmirb0s1a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4a4a4a;
    font-weight: bold;
}

#topNavDropdown .profile_menu .language-icon[b-elmirb0s1a] {
    font-size: 20px;
    color: red;
    margin-right: 5px;
}

#topNavDropdown .language-icon[b-elmirb0s1a] {
    width: 23px;
    height: 24px;
    object-fit: contain;
}


#topNavDropdown .profile_menu .language-text[b-elmirb0s1a] {
    font-size: 16px;
    color: #4a4a4a;
}

#topNavDropdown .profile_menu .custom-menu-item[b-elmirb0s1a] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s ease;
}

#topNavDropdown .profile_menu .custom-menu-item:hover[b-elmirb0s1a] {
    background-color: #f0f0f0;
}

#topNavDropdown .profile_menu .custom-menu-item img.flag-icon[b-elmirb0s1a] {
    width: 20px;
    height: 15px;
    margin-right: 10px;
    border-radius: 2px;
}

/* Radzen Profile Menu UL 스타일 덮어쓰기 */
[b-elmirb0s1a] #topNavDropdown ul.rz-menu.rz-profile-menu {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    margin: 0; /* 다른 여백 제거 */
    background: transparent !important;
}

#topNavDropdown ul.rz-menu.rz-profile-menu li[b-elmirb0s1a] {
    margin: 0;
}

#proFileMenu .profile-container[b-elmirb0s1a] {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 10px; /* 사진과 텍스트 사이 간격 */
}

#proFileMenu .profile-image[b-elmirb0s1a] {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* 원형 이미지 */
    object-fit: cover;
}

#proFileMenu .profile-info[b-elmirb0s1a] {
    display: flex;
    flex-direction: column; /* 텍스트를 위아래로 정렬 */
}

#proFileMenu .profile-name[b-elmirb0s1a] {
    font-weight: bold;
    font-size: 14px;
}

#proFileMenu .profile-team[b-elmirb0s1a] {
    font-size: 12px;
    color: gray;
}

[b-elmirb0s1a] #proFavorite > li > ul.rz-navigation-menu {
    inset-block-start: calc(100% - -1px);
}

#topNavDropdown .darkmode-menu[b-elmirb0s1a],
#topNavDropdown .theme-button[b-elmirb0s1a],
[b-elmirb0s1a] #proFavorite > li.rz-navigation-item > div.rz-navigation-item-wrapper > div.rz-navigation-item-link {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
    font-weight: bold;
}

[b-elmirb0s1a] #proFavorite > li.rz-navigation-item > div.rz-navigation-item-wrapper > div.rz-navigation-item-link {
    padding: 6px;
}

    #topNavDropdown .language-menu[b-elmirb0s1a] {
        position: relative;
        display: inline-block;
        padding: 1rem !important
    }

#topNavDropdown .language-button[b-elmirb0s1a] {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: white;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 16px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
    font-weight: bold;
}

#topNavDropdown .language-button:hover[b-elmirb0s1a] {
    background-color: #f5f5f5;
}

#topNavDropdown .dropdown-menu[b-elmirb0s1a] {
    position: absolute;
    /* top: 0; */
    left: 0;
    /*background-color: white;*/
    background-color: var(--rz-profile-menu-background-color);
    color: var(--rz-menu-item-color);
    box-shadow: var(--rz-context-menu-box-shadow);
    border-radius: 5px;
    width: auto;
    display: none;
    min-width: 100%;
    font-weight: bold;
    z-index: 1050;
}

[b-elmirb0s1a] .rz-navigation-menu {
    z-index: 1050 !important;
}

#topNavDropdown .menu-item[b-elmirb0s1a] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#topNavDropdown .menu-item:hover[b-elmirb0s1a] {
    background-color: var(--rz-menu-item-hover-background-color);
    color: var(--rz-menu-item-hover-color);
}

#topNavDropdown .flag-icon[b-elmirb0s1a] {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
}

[b-elmirb0s1a] #proFileMenu > li > div > div > i {
    display: none !important;
}

/* 기본 데스크탑 이미지 */
@media (min-width: 1201px) {
    img.header_logo[b-elmirb0s1a] {
        content: url('/images/ci_New.png');
        margin-left: 10px;
    }
}

/* 모바일 이미지 */
@media (max-width: 1200px) {
    img.header_logo[b-elmirb0s1a] {
        content: url('/images/ci_mobile_New.png');
        margin-left: 10px;
    }
}
[b-elmirb0s1a] .sframe-appbar { height:56px; border-bottom: 1px solid var(--sframe-border); }
[b-elmirb0s1a] .sframe-toolbar { display:flex; justify-content:space-between; gap:8px; min-height:56px; padding:0 12px; }
[b-elmirb0s1a] .sframe-appbar .mud-icon-button { min-width:44px; min-height:44px; }
[b-elmirb0s1a] .sframe-appbar .header_logo { max-width:148px; }
@media (max-width:600px) {
    [b-elmirb0s1a] .sframe-toolbar { padding:0 4px; gap:0; }
    [b-elmirb0s1a] .sframe-appbar .header_logo { max-width:76px; }
}
/* _content/SWMes.SFrame_EAM/Shared/MainLayout.razor.rz.scp.css */
.page[b-3zru8ccsve] {
    height: 100%;
    overflow: hidden;
    background-color: inherit;
}

[b-3zru8ccsve] .page-layout { height:100%; }

[b-3zru8ccsve] .page-layout,
[b-3zru8ccsve] .layout-item {
    /* background-color: inherit;*/
    background-color: #F8F8FA;
}

[b-3zru8ccsve] .content {
    padding: 1.1rem 2rem 0 2rem;
    overflow: auto;
    /* 스크롤바 숨기기 */
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}

[b-3zru8ccsve] .content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

@media (max-width: 1199.98px) {
    [b-3zru8ccsve] .page-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    [b-3zru8ccsve] .layout-header {
        height: 55px;
    }
    
    .page[b-3zru8ccsve] {
        overflow: auto; /* 모바일에서 페이지 전체 스크롤 허용 */
        /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE, Edge */
        scrollbar-width: none; /* Firefox */
    }
    
    .page[b-3zru8ccsve]::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    [b-3zru8ccsve] .content {
        overflow: visible; /* 모바일에서 content 영역 스크롤 해제 */
    }
}

[b-3zru8ccsve] .fit-width {
    max-width: 100%;
}

[b-3zru8ccsve] .mw-1100 {
    max-width: 1100px;
}

/* Mud shell only. Existing dynamic SWGridLayout consumers keep their original styles. */
[b-3zru8ccsve] .sframe-shell { min-height: 100dvh; background: var(--sframe-background); }
[b-3zru8ccsve] .sframe-main { height: 100dvh; overflow: auto; padding: 72px 24px 24px; }
[b-3zru8ccsve] .mud-drawer.sframe-drawer { top:56px; height:calc(100dvh - 56px); border-right: 1px solid var(--sframe-border); }
@media (max-width:1200px) {
    [b-3zru8ccsve] .sframe-main { padding: 64px 12px 16px; }
}
/* _content/SWMes.SFrame_EAM/Shared/NavMenu.razor.rz.scp.css */
.sidebar[b-k7611w8ekn] {
    min-width: 300px;
    max-width: 300px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease-out;
    height: 100%;
    max-height: 100%;
    /*overflow: auto;*/
    background-color: inherit;
    overflow-y: auto; /* 스크롤 동작 유지 */
    -ms-overflow-style: none; /* IE & Edge에서 스크롤바 숨김 */
    scrollbar-width: none; /* Firefox에서 스크롤바 숨김 */
    -webkit-overflow-scrolling: touch; /* 📱 iOS에서 부드러운 스크롤 지원 */
}

/*슬라이드 애니메이션*/
/*.sidebar.collapse {
    display: none;
}

.sidebar.expand {
    display: block;
}*/

@media (max-width: 1199.98px) {
    .sidebar[b-k7611w8ekn] {
        display: none;
    }

    .sidebar.expand[b-k7611w8ekn] {
        display: block;
        position: fixed;
        /*top: 3.5rem;*/
        padding-bottom: 3.5rem;
        left: 0;
        height: auto;
        min-width: 100%;
        z-index: 1048;
    }
}

[b-k7611w8ekn] .app-sidebar > .nav-pills > .nav-item:first-of-type {
    padding-top: 1rem;
}

[b-k7611w8ekn] .app-sidebar > .nav-pills > .nav-item:last-of-type {
    padding-bottom: 1rem;
}

[b-k7611w8ekn] .app-sidebar .nav-pills > .nav-item a {
    border-radius: 0px;
    display: flex;
    align-items: center;
}

[b-k7611w8ekn] .app-sidebar > .nav-pills > .nav-item > a {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: .25rem 1rem .25rem .125rem;
}
[b-k7611w8ekn] .app-sidebar,
[b-k7611w8ekn] .app-sidebar > .nav-pills,
[b-k7611w8ekn] .app-sidebar > .nav-pills > .nav-item,
[b-k7611w8ekn] .app-sidebar > .nav-pills > .nav-item > a:not(.active) {
    background-color: inherit;
}

@media (max-width: 1199.98px) {
    [b-k7611w8ekn] .app-sidebar > .nav-pills > .nav-item:last-of-type {
        padding-bottom: 0;
    }
}
.sframe-navigation[b-k7611w8ekn] { padding:12px 8px; overflow:auto; min-height:100%; }
.sframe-navigation[b-k7611w8ekn]  .mud-nav-link { min-height:44px; border-radius:6px; text-decoration:none; }
.sframe-navigation[b-k7611w8ekn]  .sframe-menu-group { padding:4px 8px; }
.sframe-navigation[b-k7611w8ekn]  .sframe-menu-group .nav-link { color:var(--sframe-text); border-radius:6px; padding:8px; }
.sframe-navigation[b-k7611w8ekn]  .sframe-menu-group .nav-link.active { color:var(--sframe-primary); background:var(--mud-palette-primary-hover); }