/* ═══════════════════════════════════════════════════════════════════════
   Prediction CSS Compatibility Layer      (CLEAN MIGRATION, 2026-08-28)
   ═══════════════════════════════════════════════════════════════════════

   무엇인가
   ─────────────────────────────────────────────────────────────────────
   `prediction.css` 는 `--t3-*` 와 `--rt-*` 를 합쳐 837번 참조하는데, 그
   변수들은 이 모듈 안 어디에도 정의되어 있지 않다. 원래는 레이아웃
   `portal_ever` 의 userCSS 인라인 <style> 이 `:root` 에 값을 세워 주었다.

   Clean 재설치에서는 그 레이아웃을 아직 되살리지 않는다. 그런데 정의
   없는 `var()` 는 **앞 선언으로 되돌아가지 않고 선언 자체를 무효로**
   만든다 — 색·배경·테두리가 통째로 빠진 화면이 된다. 그래서 레이아웃을
   복원하는 대신, 이 이름들에 값만 준다.

   왜 :root 인가
   ─────────────────────────────────────────────────────────────────────
   변수를 쓰는 규칙이 `.pd-wrap`·`.pd-rank-board`·`.pd-sports-page`·표·
   배지에 흩어져 있어서, 하나의 공통 조상 선택자가 없다. 대신 이 파일은
   Prediction 스킨이 `Context::loadFile()` 로 부를 때만 문서에 들어온다 —
   Prediction 화면 밖에서는 로드되지 않으므로 :root 라도 범위는 모듈이다.

   `.pd-sports-page` 처럼 모듈이 스스로 같은 이름을 다시 정의하는 자리가
   있는데(m.skins), 그쪽이 특이도가 높아 계속 이긴다. 여기는 정의가
   **없을 때만** 쓰이는 바닥이다.

   값의 출처
   ─────────────────────────────────────────────────────────────────────
   PRE-REINSTALL 백업의
   `layouts/portal_ever/css/userCSS/userCSS.html` 에서 그대로 옮겼다.
   새 디자인이 아니다 — 이름도 값도 바꾸지 않았고, Prediction 이 실제로
   참조하는 것과 그 의존 토큰만 골랐다.

   가져오지 않은 것: --rt-brand, --rt-warning, --rt-hdr-* (Prediction CSS
   가 참조하지 않는다). 레이아웃 복원 단계에서 userCSS 가 돌아오면 그쪽
   :root 가 같은 값을 세우므로 충돌하지 않는다.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── 바탕과 면 ──────────────────────────────────────────────── */
    --rt-bg:            #0a0d12;
    --rt-surface-1:     #141922;
    --rt-surface-2:     #1a2029;
    /* 직접 참조는 없지만 --rt-hover 와 --t3-surface-3 이 여기에 기댄다. */
    --rt-surface-3:     #202836;

    /* ── 경계 3단 ───────────────────────────────────────────────── */
    --rt-border-soft:   #1c2430;
    --rt-border:        #222a36;
    --rt-border-strong: #38445a;

    /* ── 글자 3단 ───────────────────────────────────────────────── */
    --rt-text:          #e9edf3;
    --rt-text-2:        #7f8b9e;
    --rt-muted:         #6f7b8d;

    /* ── 강조 ───────────────────────────────────────────────────── */
    --rt-accent:        #4d8dff;
    --rt-accent-hover:  #3d7df0;
    --rt-accent-text:   #7fb0ff;

    /* ── 뜻이 있는 색 ───────────────────────────────────────────── */
    --rt-positive:      #2fbf85;
    --rt-negative:      #e0576b;

    /* ── 상태 ───────────────────────────────────────────────────── */
    --rt-input-bg:      var(--rt-surface-2);
    --rt-hover:         var(--rt-surface-3);
    --rt-selected:      rgba(77, 141, 255, .14);

    /* ═══ 호환 별칭 — 기존 --t3-* ═══════════════════════════════
       이름을 바꾸지 않고 값만 잇는다. 400개 가까운 var() 참조를 고치면
       그만큼 회귀 지점이 생긴다 — 지금 필요한 것은 rename 이 아니라
       되살리기다.

       ⚠ 일부 참조에는 밝은 fallback(`var(--t3-surface, #ffffff)`)이 붙어
         있다. 이름에 값이 생기면 fallback 은 더 쓰이지 않는다 —
         의도한 결과다(원본 userCSS 와 같은 동작). */
    --t3-bg:            var(--rt-bg);
    --t3-surface:       var(--rt-surface-1);
    --t3-surface-2:     var(--rt-surface-2);
    --t3-surface-3:     var(--rt-surface-3);
    --t3-border:        var(--rt-border);
    --t3-border-soft:   var(--rt-border-soft);
    --t3-text:          var(--rt-text);
    --t3-text-2:        var(--rt-text-2);
    --t3-text-3:        var(--rt-muted);
    /* 예전 이름은 `green` 이지만 하는 일은 **강조**다(단추·활성 탭·링크).
       뜻을 따라 accent 에 잇는다 — 색 이름을 따라 초록에 잇지 않는다. */
    --t3-green:         var(--rt-accent);
    --t3-green-text:    var(--rt-accent-text);
    --t3-navy:          var(--rt-surface-2);
    --t3-danger:        var(--rt-negative);
    --t3-danger-line:   #4a2630;
    --t3-danger-bg:     #24161b;
}