/* 서버 연결이 끊겼을 때의 안내 (AppShell.razor 의 #components-reconnect-modal)
   Blazor 가 상태에 따라 클래스를 붙인다: components-reconnect-show(끊김·재시도 중), -retrying(두 번째 시도부터),
   -failed(정해진 횟수 실패), -rejected(서버가 새로 시작돼 이전 화면을 이어갈 수 없음 → 바로 새로고침), -hide(다시 연결됨),
   -paused(잠듦: 안내 없음. 배포·재시작 때 서버가 재우면 fm-server-paused 와 함께 업데이트 안내) */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused.fm-server-paused {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .35);
}

#components-reconnect-modal .reconnect-box {
    width: 100%;
    max-width: 360px;
    padding: 20px 22px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
    color: #1f2937;
    font-size: var(--fs-base, 14px);
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
}

#components-reconnect-modal .reconnect-title {
    margin: 0 0 6px;
    font-size: var(--fs-lg, 16px);
    font-weight: 700;
}

#components-reconnect-modal .reconnect-text {
    margin: 0;
    color: #4b5563;
}

#components-reconnect-modal .reconnect-actions {
    margin-top: 14px;
    justify-content: center;
    gap: 8px;
}

/* 상태별 문구: 기본은 숨기고 맞는 상태의 것만 보인다 */
#components-reconnect-modal .reconnect-on-show,
#components-reconnect-modal .reconnect-on-retrying,
#components-reconnect-modal .reconnect-on-failed,
#components-reconnect-modal .reconnect-on-rejected,
#components-reconnect-modal .reconnect-on-server-paused {
    display: none;
}

/* 배포·재시작 때 서버가 먼저 재운 탭(wwwroot/js/circuit-valve.js 가 fm-server-paused 를 붙인다): 끊김 제목 대신 업데이트 안내 */
#components-reconnect-modal.fm-server-paused .reconnect-title-lost {
    display: none;
}

#components-reconnect-modal.components-reconnect-paused.fm-server-paused .reconnect-on-server-paused {
    display: block;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying) .reconnect-on-show,
#components-reconnect-modal.components-reconnect-retrying .reconnect-on-retrying,
#components-reconnect-modal.components-reconnect-failed .reconnect-on-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-on-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-actions.reconnect-on-failed {
    display: flex;
}

/* 회로 오류(화면 코드 예외) 안내 줄. Blazor 가 오류 때 display 를 block 으로 바꾼다 */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    padding: 10px 44px 10px 16px;
    background: #fff7e6;
    border-top: 1px solid #ffd591;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
    color: #1f2937;
    font-size: var(--fs-base, 14px);
}

#blazor-error-ui .reload {
    margin-left: 8px;
    font-weight: 700;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 8px;
    right: 14px;
    cursor: pointer;
    color: #6b7280;
}

/* 이어 붙는 동안 옛 화면을 보여 주는 덮개 (wwwroot/js/work-guard.js). 다시 붙인 요소의 애니메이션이 처음부터 돌지 않게 멈춘 그림으로 둔다 */
.fm-resume-cover,
.fm-resume-cover *,
.fm-resume-cover *::before,
.fm-resume-cover *::after {
    animation: none !important;
    transition: none !important;
}