/* ============================================================
   SUPERBALL 메인페이지 모달 — 밝은 테마
   메인(흰 바탕 · 파란 포인트) 위에서 뜨는 모달(이벤트·공지·쪽지·고객센터·입출금·로그인 등)을
   메인 디자인과 같은 색으로 맞춘다.
   - 범위: body.sb-home(메인 · 매니저모드) 의 #modal-root 안쪽만 → 게임 페이지 등은 기존 다크 그대로
   - 색은 토큰(변수)을 바꿔서 적용 + 브랜드(vegabet) CSS 에 직접 박힌 다크색만 덮어씀
   - index.html 에서 brand-*.css 다음(맨 마지막)에 로드
   ============================================================ */

body.sb-home #modal-root {
  --brand-pink: #0a3fd6;
  --brand-purple: #06257f;
  --brand-gradient: linear-gradient(90deg, #1e5bff, #0a3fd6);
  --brand-gradient-strong: linear-gradient(135deg, #3d74ff 0%, #0a3fd6 100%);

  --bg: #ffffff;
  --bg-1: #f5f7fb;
  --bg-2: #ffffff;
  --bg-3: #eef3fc;
  --bg-elev: #f5f7fb;
  --bg-hover: #eef3fc;
  --bg-input: #f7f9fc;

  --fg: #1b1f2b;
  --fg-muted: #5b6474;
  --fg-dim: #8a93a3;

  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;
  --info: #0284c7;

  --border: #e6e9f0;
  --border-strong: #c9d3e6;
  --focus-ring: 0 0 0 3px rgba(10, 63, 214, 0.18);

  --shadow-sm: 0 2px 8px rgba(10, 40, 120, 0.08);
  --shadow-md: 0 20px 50px rgba(10, 30, 90, 0.22);
  --shadow-glow: 0 8px 20px rgba(10, 63, 214, 0.18);

  /* vegabet 전용 변수 → 파란 계열로 */
  --vb-purple-1: #0a3fd6;
  --vb-purple-2: #1e5bff;
  --vb-purple-3: #0a3fd6;
  --vb-purple-4: #06257f;
  --vb-purple-glow: #1e5bff;
  --vb-purple-grad: linear-gradient(90deg, #1e5bff, #0a3fd6);
  --vb-money: #0a3fd6;
  --vb-point: #c8931a;
  --vb-green: #16a34a;
  --vb-red: #dc2626;

  color: var(--fg);
  font-family: 'Noto Sans KR', var(--font-sans);
}

/* 뒤 배경: 메인이 그대로 보이게 아주 옅은 그림자만 */
html body.sb-home #modal-root .modal {
  background: rgba(15, 30, 60, 0.16) !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 모달 상자 */
html body.sb-home #modal-root .modal-card,
html body.sb-home #modal-root .modal-content {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  box-shadow: var(--shadow-md) !important;
  color: var(--fg);
}
html body.sb-home #modal-root .modal-head {
  border-bottom: 1px solid var(--border);
  background: #fff;
}
html body.sb-home #modal-root .modal-head h3 { color: var(--fg); font-weight: 900; }
html body.sb-home #modal-root .modal-close { color: var(--fg-dim); }
html body.sb-home #modal-root .modal-close:hover { background: var(--bg-3); color: var(--fg); }

/* 입력 */
html body.sb-home #modal-root input,
html body.sb-home #modal-root select,
html body.sb-home #modal-root textarea {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--fg) !important;
}
html body.sb-home #modal-root input::placeholder,
html body.sb-home #modal-root textarea::placeholder { color: var(--fg-dim); }
html body.sb-home #modal-root input:focus,
html body.sb-home #modal-root select:focus,
html body.sb-home #modal-root textarea:focus {
  border-color: #0a3fd6 !important;
  box-shadow: var(--focus-ring) !important;
  background: #fff !important;
}
html body.sb-home #modal-root input:disabled,
html body.sb-home #modal-root input[readonly] { background: #eef1f6 !important; color: var(--fg-muted) !important; }

/* 버튼: 주 버튼 = 파랑, 보조 버튼 = 흰 바탕 테두리 */
html body.sb-home #modal-root .btn-primary {
  background: #0a3fd6 !important;
  color: #fff !important;
  border: 1px solid #0a3fd6 !important;
  box-shadow: none !important;
}
html body.sb-home #modal-root .btn-primary:hover { background: #06257f !important; filter: none; }
html body.sb-home #modal-root .btn-ghost,
html body.sb-home #modal-root .btn-secondary,
html body.sb-home #modal-root .btn-outline {
  background: #fff !important;
  color: #0a3fd6 !important;
  border: 1px solid #0a3fd6 !important;
  box-shadow: none !important;
}
html body.sb-home #modal-root .btn-ghost:hover,
html body.sb-home #modal-root .btn-secondary:hover,
html body.sb-home #modal-root .btn-outline:hover { background: #eef3fc !important; }
html body.sb-home #modal-root .btn-danger {
  background: #fff !important;
  color: #dc2626 !important;
  border: 1px solid #f3b4b4 !important;
  box-shadow: none !important;
}
html body.sb-home #modal-root .btn-danger:hover { background: #fdecec !important; }

/* 링크 · 보조 글씨 */
html body.sb-home #modal-root a { color: #0a3fd6; }
html body.sb-home #modal-root .muted,
html body.sb-home #modal-root .dim { color: var(--fg-muted) !important; }

/* 표 */
html body.sb-home #modal-root table { color: var(--fg); }
html body.sb-home #modal-root th { background: var(--bg-1); color: var(--fg-muted); border-color: var(--border); }
html body.sb-home #modal-root td { border-color: var(--border); }
html body.sb-home #modal-root tbody tr:hover td { background: #f8faff; }

/* 스크롤바 */
html body.sb-home #modal-root ::-webkit-scrollbar-track { background: #f1f4f9; }
html body.sb-home #modal-root ::-webkit-scrollbar-thumb { background: #c9d3e6; border-radius: 8px; }
html body.sb-home #modal-root ::-webkit-scrollbar-thumb:hover { background: #9fb0cf; }

/* 금액 표시 — 다크용 노란 글씨는 흰 바탕에서 안 보이므로 메인 색으로 */
html body.sb-home #modal-root .amount-form .amount-display {
  color: #0a3fd6;
  background: #f5f8ff;
  border-color: #c9d3e6;
  text-shadow: none;
}
html body.sb-home #modal-root .profile-val-gold { color: #0a3fd6; }
html body.sb-home #modal-root .tx-table .tx-amount { color: #0a3fd6; }
html body.sb-home #modal-root .tx-table tbody tr:hover { background: #f8faff; }
html body.sb-home #modal-root .profile-badge.pt { border-color: #c8931a; color: #b07d10; }
html body.sb-home #modal-root .profile-badge.pt:hover { background: #c8931a; color: #fff; }