:root {
    --color-mainColor: #004953;
    --color-mainColor2: #0049535b;
    --color-mainColor3: #00495342;
    --color-secondColor: #00BFA6;
    --color-subColor: #228B22;
    --color-pointColor: #333333;
    --color-pointColor2: #33333333;
    --color-positiveColor: #00BFA6;
    --color-negativeColor: #FF7043;
    --color-gradientColor: #147A7A;
    --color-gradientColor-50: #e9fffb;
    --color-gradientColor-100: #c9fff6;
    --color-gradientColor-200: #99fff1;
    --color-gradientColor-300: #54ffeb;
    --color-gradientColor-400: #07ffef;
    --color-gradientColor-500: #00efee;
    --color-gradientColor-600: #00c0c9;
    --color-gradientColor-700: #0098a1;
    --color-gradientColor-800: #087982;
    --color-gradientColor-900: #0c636d;
    --color-gradientColor-1000: #002d33;
    --color-whiteColor: #fff;
    --color-blackColor: #000000;
    --color-greyColor: #ccc;
    --color-yellowColor: #FFBF00;

    --font-size-companyTitle: 25px;
    --font-size-companyButton: 16px;
    --font-size-companyText: 16px;

    --font-size-loginTitle: 30px;
    --font-size-loginText: 16px;

    --font-size-workCreateTitle: 20px;
    --font-size-workCreateText: 12px;
    --font-size-workCreateAiButton: 12px;
    --font-size-workCreateAiText: 12px;

    --font-size-workListTitle: 19px;
    --font-size-workListButton: 16px;
    --font-size-workListMenu: 16px;
    --font-size-workListText: 12px;
    --font-size-workListSearch: 12px;
}

.viewport {
    width: calc(100% - 248px);
    height: calc(100% - 48px);
    margin-left: 248px;
    margin-top: 48px;
    display: flex;
}

body {
    padding: 0;
    margin: 0;
    background-color: #EDEDED;
}

/* 모달 형태 */
.bugreport-modal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    /* 가로 가운데 */
    align-items: center;
    /* 세로 가운데 */
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.1);
    /* 반투명 배경 */
}

/* 모달 창 내용 */
.bugreport-modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;

    /* 폭 제어 */
    max-width: 700px;
    /* 최대 폭 */

    /* 높이 제어 */
    min-height: 300px;
    /* 최소 높이 */
    max-height: 700px;
    /* 최대 높이 */
}

/* 버그 레포트 내용 사이즈 제어 */
.bugreport-content {
    width: 300px;
    height: 150px;
    resize: none;
}

/* 오류신고 하기 버튼 css */
#open-modal-btn {
    display: flex;
    align-items: center;
    width: 248px;
    height: 56px;
    font-size: 17px;
    font-weight: 700;
    padding: 0 24px;
    text-align: left;
    gap: 8px;
    background-color: var(--color-negativeColor);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 0 !important;
}

#open-modal-btn:hover {
    background-color: red;
}

/* 오류신고 하기 제출 버튼 css */
.bugreport-submit-btn {
    padding: 8px 16px;
    background-color: var(--color-positiveColor);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bugreport-submit-btn:hover {
    background-color: var(--color-mainColor);
}

/* 오류신고 하기 닫기 버튼 css */
.bugreport-cancel-btn {
    padding: 8px 16px;
    background-color: var(--color-negativeColor);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bugreport-cancel-btn:hover {
    background-color: red;

}

/* 전체 오버레이 */
.global-loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    /* 30% 명암 */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 숨김 */
.global-loading.is-hidden {
    display: none;
}

/* 스피너 */
.global-loading__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* 텍스트 */
.global-loading__text {
    margin-top: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

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

/* 토스트를 담는 전체 컨테이너 */
#fcm-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 알림 사이 간격 */
}

/* 개별 토스트 스타일 (기존 스타일에서 위치값 제거) */
.fcm-toast {
    background: #ffffff;
    border-left: 6px solid #4e73df;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px 20px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 280px;
    max-width: 350px;
    transition: all 0.3s ease;
    animation: fcmSlideIn 0.4s ease-out;
}

@keyframes fcmSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.fcm-toast-title { font-weight: bold; color: #333; margin-bottom: 3px; }
.fcm-toast-body { font-size: 13px; color: #666; }