/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* 연결 끊김 창 — App.razor의 스플래시 로딩 화면(#app-splash)과 같은 구성.
   검은 전체 화면 + BBDA LIVE 로고 + 빨간 인디케이터 바 + 아래 안내 문구.

   둘 다 "아직 화면을 못 쓰는 상태"를 알리는 화면이라 서로 다르게 생기면
   같은 사이트로 안 보인다. 값(크기·색·애니메이션)은 스플래시와 맞춰 뒀다 —
   한쪽을 고치면 다른 쪽도 같이 볼 것. (CLAUDE.md §4)

   ⚠ 아래 id·클래스 이름은 Blazor 프레임워크가 상태에 따라 직접 붙였다 뗐다 한다.
      재연결 동작이 여기에 물려 있으므로 셀렉터는 건드리지 말고 값만 바꿀 것.
      (components-reconnect-show / -retrying / -failed / -paused / -resume-failed) */

.components-reconnect-first-attempt-visible[b-9vhw2ojrbd],
.components-reconnect-repeated-attempt-visible[b-9vhw2ojrbd],
.components-reconnect-failed-visible[b-9vhw2ojrbd],
.components-pause-visible[b-9vhw2ojrbd],
.components-resume-failed-visible[b-9vhw2ojrbd],
.components-rejoining-animation[b-9vhw2ojrbd] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9vhw2ojrbd],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9vhw2ojrbd],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9vhw2ojrbd],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9vhw2ojrbd],
#components-reconnect-modal.components-reconnect-retrying[b-9vhw2ojrbd],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9vhw2ojrbd],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9vhw2ojrbd],
#components-reconnect-modal.components-reconnect-failed[b-9vhw2ojrbd],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9vhw2ojrbd] {
    display: block;
}

/* ── 창 자체 ──
   카드가 아니라 화면을 통째로 덮는다. 스플래시와 같은 자리에 같은 모양으로 떠야
   "연결이 끊겼다 → 다시 붙는 중"이 한 화면으로 읽힌다. */
#components-reconnect-modal[b-9vhw2ojrbd] {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: #000;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-9vhw2ojrbd 0.35s both;
}

    /* ⚠ 2초 늦게 나타난다.

       첫 접속에서 스플래시가 사라지자마자 이 창이 깜박이는 일이 있었다. 원인은
       Blazor 회선의 첫 `/_blazor/negotiate` 가 Cloudflare 에서 502 로 떨어지는 것이다.
       브라우저 네트워크 기록에서 502 → 502 → 200 으로 이어지는 걸 확인했다.
       (서버로 직접 같은 요청을 보내면 매번 200 이라 터널 구간의 문제로 보인다)

       Blazor 는 실패하면 곧바로 다시 붙고 대개 1초 안에 성공한다. 스스로 낫는
       일 때문에 전체 화면 경고가 번쩍이면 사람은 사이트가 고장난 줄 안다.
       그 사이에 끝나면 아예 안 보이게 지연을 준다.

       `both` 라서 지연 동안에는 시작 상태(opacity 0)가 유지된다.
       진짜로 끊긴 경우에는 2초 뒤에 그대로 뜬다. */
    #components-reconnect-modal[open][b-9vhw2ojrbd] {
        animation: components-reconnect-modal-fadeInOpacity-b-9vhw2ojrbd 0.35s ease-in-out 2s both;
    }

/* 화면을 이미 꽉 채우므로 백드롭은 같은 검정으로만 둔다 */
#components-reconnect-modal[b-9vhw2ojrbd]::backdrop {
    background-color: #000;
}

@keyframes components-reconnect-modal-fadeInOpacity-b-9vhw2ojrbd {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-9vhw2ojrbd {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── 가운데 묶음 ── 스플래시의 #app-splash와 같은 배치(세로 가운데, gap 18px) */
.components-reconnect-container[b-9vhw2ojrbd] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    box-sizing: border-box;   /* 전역 border-box가 없다 (CLAUDE.md) */
}

/* ── 로고 ── 스플래시의 .splash-logo와 같은 값 ── */
.rc-logo[b-9vhw2ojrbd] {
    display: flex;
    align-items: center;
    font-family: 'Segoe UI', sans-serif;
    font-size: 30px;
    font-weight: 900;
    font-style: italic;
    color: #fff;
    letter-spacing: -0.5px;
}

    .rc-logo span[b-9vhw2ojrbd] {
        font-size: 31px;
        background: #e10600;
        color: #fff;
        padding: 2px 10px;
        margin-left: 6px;
        font-style: normal;
        line-height: 1.1;
    }

/* ── 인디케이터 바 ── 스플래시의 .splash-bar / .splash-bar-fill과 같은 값.
   프레임워크가 이름으로 찾는 요소라 클래스명은 그대로 두고 생김새만 바꿨다.
   (예전에는 동심원 스피너였다) */
.components-rejoining-animation[b-9vhw2ojrbd] {
    width: 180px;
    height: 2px;
    background: #1a1a1a;
    overflow: hidden;
}

    .components-rejoining-animation div[b-9vhw2ojrbd] {
        width: 40%;
        height: 100%;
        background: #e10600;
        animation: components-rejoining-slide-b-9vhw2ojrbd 1.1s ease-in-out infinite;
    }

@keyframes components-rejoining-slide-b-9vhw2ojrbd {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ── 문구 ──
   스플래시는 'CONNECTING…' 한 단어라 11px에 자간 3px이지만, 여기는 한글 문장이라
   그대로 쓰면 읽기 어렵다. 같은 계열로 두되 크기와 자간만 읽을 수 있게 풀었다. */
#components-reconnect-modal p[b-9vhw2ojrbd] {
    margin: 0;
    max-width: 320px;
    text-align: center;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.5px;
}

/* 두 번째 줄(무엇을 하면 되는지)은 한 단계 더 죽인다 */
.rc-sub[b-9vhw2ojrbd] {
    color: #555;
    font-size: 12px;
    font-weight: 600;
}

/* 남은 초. monospace + tabular-nums라야 9→8로 바뀔 때 폭이 안 흔들린다 */
#components-seconds-to-next-attempt[b-9vhw2ojrbd] {
    font-family: 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 900;
    color: #e10600;
}

/* ── 버튼 ── 실패 상태에서만 나온다. 스플래시에는 없는 요소라 사이트 기본 버튼 톤 */
#components-reconnect-modal button[b-9vhw2ojrbd] {
    margin-top: 4px;
    border: 1px solid #e10600;
    background-color: #e10600;
    color: #fff;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 10px 26px;
    border-radius: 0;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-9vhw2ojrbd] {
        background-color: #ff1e15;
        border-color: #ff1e15;
    }

    #components-reconnect-modal button:active[b-9vhw2ojrbd] {
        background-color: #e10600;
        border-color: #e10600;
    }