/* 공용 헤더 · 게임 메뉴 · 창 틀 · 알림 (Main · CA · CARD · Board). 색 토큰(--rd-*)과 이 네 가지의 배치만 둔다.
   창 안 · 화면 안 부품(버튼 · 입력 · 탭 · 설정 줄 · 내역 목록 등)은 site-ui.css 한 곳에서 정의한다.
   헤더 · 게임 메뉴 규칙은 #rd-header · #rd-subnav 아래로 묶는다: 게임 CSS의 button · nav 규칙보다 항상 우선하게.
   색: 나이트 플랫 + 게임 색(CA 하늘 · CARD 보라 · Board 주황 · Main 흰색), CA는 아래에서 아케이드 블루. */
/* 사이트 글자 크기: 화면 CSS의 글자 크기는 rem이라 여기 한 곳에서 키우고 줄인다(1rem = 16.8px) */
html { font-size: 105%; }
@font-face { font-family: RdInter; src: url('/main-font.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --rd-ca: #38bdf8; --rd-card: #a78bfa; --rd-board: #f5a524; --rd-main: #f5f5f5; --rd-game: var(--rd-main);
  --rd-font: RdInter, 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --rd-header-h: 58px; --rd-width: 1600px;
  --rd-bg: #000; --rd-surface: #121212; --rd-surface-2: #1c1c1c; --rd-chip: #262626;
  --rd-text: #f5f5f5; --rd-muted: #a9a9a9; --rd-positive: #b8f05a; --rd-negative: #ff7b85; --rd-wallet: #eed49c; --rd-focus: #fff;
  --rd-line: #262626; --rd-header-bg: #0b0b0b; --rd-menu-bg: #141414; --rd-ghost-bg: #171717; --rd-divider: #ffffff14;
  --rd-radius: 14px; --rd-radius-sm: 10px;
}
:root[data-rd-game=ca] { --rd-game: var(--rd-ca); } :root[data-rd-game=card] { --rd-game: var(--rd-card); }
:root[data-rd-game=board] { --rd-game: var(--rd-board); }
/* CA: 아케이드 블루(시안 arcade 토큰). 모양은 같고 색만 바꾼다. */
:root[data-rd-game=ca] {
  --rd-game: #ffe16a; --rd-text: #f4fbff; --rd-muted: #b7dcf2; --rd-wallet: #ffe27a; --rd-focus: #ffe16a;
  --rd-surface: #0b5d9c; --rd-surface-2: #084a80; --rd-chip: #0a4a80; --rd-line: #3cc3f3; --rd-divider: #ffffff22;
  --rd-header-bg: #08396b; --rd-menu-bg: #08396b; --rd-ghost-bg: #0a5491; --rd-positive: #7cf08a; --rd-negative: #ff8a8a;
}
/* 앱 사이 이동(문서 바뀜)에는 전환 효과를 쓰지 않는다(효과는 방 · 경기에 들어가고 나올 때만, site-ui screenSwitch) */
:root[data-reduce-motion] *, :root[data-reduce-motion] *::before, :root[data-reduce-motion] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* 스크립트가 공용 헤더로 바꾸기 전의 원래 <header>: 같은 높이의 빈 막대로 보이게 한다(스타일 없는 글자 깜빡임 · 위치 흔들림 방지).
   게임 메뉴(nav)가 있는 페이지는 메뉴 줄 높이까지 미리 잡는다. */
body > header.site-header { display: block; box-sizing: border-box; height: var(--rd-header-h); margin: 0; padding: 0; overflow: hidden; background: var(--rd-header-bg); border-bottom: 1px solid var(--rd-line); }
body > header.site-header:has(nav) { height: calc(var(--rd-header-h) + 43px); }
body > header.site-header > * { visibility: hidden; }

#rd-header, #rd-subnav, #rd-toast, dialog.rd-dialog, .rd-window { font-family: var(--rd-font); color: var(--rd-text); box-sizing: border-box; -webkit-font-smoothing: antialiased; }
:is(#rd-header, #rd-subnav, dialog.rd-dialog, .rd-window) * { box-sizing: border-box; }
:is(#rd-header, #rd-subnav, dialog.rd-dialog, .rd-window) :focus-visible { outline: 3px solid var(--rd-focus); outline-offset: 2px; }

/* 헤더 막대: 내용 폭은 본문과 같은 최대 폭 · 여백 */
#rd-header { position: sticky; top: 0; z-index: 40; width: 100%; height: var(--rd-header-h); flex: none; background: var(--rd-header-bg); border-bottom: 1px solid var(--rd-line); }
:is(#rd-header, #rd-subnav) .rd-inner { width: min(var(--rd-width), 100%); height: 100%; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; gap: 16px; }
#rd-header .rd-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#rd-header .rd-brand { font-size: 1.3125rem; font-weight: 800; letter-spacing: -.6px; color: var(--rd-text); text-decoration: none; white-space: nowrap; }
#rd-header .rd-brand b { color: var(--rd-game); font-weight: 800; }
#rd-header .rd-tabs { display: flex; gap: 4px; min-width: 0; }
#rd-header :is(.rd-tabs, .rd-right, .rd-wallet, .rd-menu)[hidden], #rd-subnav[hidden] { display: none; }
#rd-header .rd-tab { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--rd-radius-sm); color: var(--rd-muted); font-weight: 700; font-size: 0.875rem; text-decoration: none; white-space: nowrap; }
#rd-header .rd-tab:hover { color: var(--rd-text); }
#rd-header .rd-tab.active { color: var(--rd-text); background: var(--rd-chip); }
#rd-header .rd-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
#rd-header .rd-dot.g-ca { background: var(--rd-ca); } #rd-header .rd-dot.g-card { background: var(--rd-card); } #rd-header .rd-dot.g-board { background: var(--rd-board); }
#rd-header .rd-right { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
#rd-header .rd-right #connection { font-size: 0.75rem; color: var(--rd-muted); white-space: nowrap; }
#rd-header .rd-right #connection[hidden] { display: none; }
#rd-header .rd-wallet { display: flex; gap: 12px; height: 36px; min-height: 0; align-items: center; padding: 0 10px; border-radius: var(--rd-radius-sm); border: 0; background: none; font: inherit; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rd-wallet); cursor: pointer; white-space: nowrap; }
#rd-header .rd-wallet:hover { background: var(--rd-ghost-bg); }
#rd-header .rd-wallet small { font-weight: 500; color: var(--rd-muted); font-size: 0.8125rem; }
/* 아이콘 단추: 헤더 설정 · 창 닫기 */
:is(#rd-header, dialog.rd-dialog, .rd-window) .rd-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0; border-radius: var(--rd-radius-sm); border: 1px solid #333; background: var(--rd-ghost-bg); color: var(--rd-text); font: inherit; cursor: pointer; box-shadow: none; }
:is(#rd-header, dialog.rd-dialog, .rd-window) .rd-icon-btn:hover { filter: brightness(1.25); }
:is(#rd-header, dialog.rd-dialog, .rd-window) .rd-icon-btn.rd-sm { width: 34px; height: 34px; }
#rd-header .rd-me-wrap { position: relative; }
#rd-header .rd-me { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px; margin: 0; min-height: 0; color: var(--rd-text); font: inherit; font-weight: 700; font-size: 0.875rem; cursor: pointer; max-width: 180px; }
#rd-header .rd-me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 헤더 아바타: 모양은 공용 .rd-avatar(site-ui.css)와 같고 크기만 */
#rd-header .rd-avatar { --rd-avatar-size: 30px; width: var(--rd-avatar-size); height: var(--rd-avatar-size); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; line-height: 1; text-align: center; flex: none; background: #2a2a2a; color: #fff; font-weight: 800; font-size: calc(var(--rd-avatar-size) * .42); }
#rd-header .rd-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 228px; padding: 6px; border-radius: var(--rd-radius); background: var(--rd-menu-bg); border: 1px solid #2a2a2a; box-shadow: 0 12px 40px #0008; display: flex; flex-direction: column; z-index: 45; }
#rd-header .rd-me-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #2a2a2a; margin-bottom: 4px; min-width: 0; }
#rd-header .rd-me-card > span:last-child { min-width: 0; }
/* 이름 · 아이디 줄 높이를 정수 px로: 카드 높이가 소수가 되면 아바타 글자가 헤더 아바타와 반 픽셀 어긋난다 */
#rd-header .rd-me-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 22px; }
#rd-header .rd-me-card small { display: block; color: var(--rd-muted); font-size: 0.75rem; line-height: 18px; }
#rd-header .rd-menu :is(button, a) { display: flex; align-items: center; gap: 10px; height: 40px; min-height: 0; padding: 0 10px; margin: 0; border: 0; background: none; border-radius: var(--rd-radius-sm); color: var(--rd-text); font: inherit; font-size: 0.875rem; text-align: left; text-decoration: none; cursor: pointer; box-shadow: none; }
#rd-header .rd-menu :is(button, a):hover, #rd-header .rd-menu :is(button, a):focus-visible { background: var(--rd-ghost-bg); }
#rd-header .rd-menu .rd-menu-wallet { height: auto; padding: 8px 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; margin-bottom: 4px; border-bottom: 1px solid #2a2a2a; border-radius: 0; }
#rd-header .rd-menu-wallet span { display: flex; flex-direction: column; }
#rd-header .rd-menu-wallet small { font-size: 0.6875rem; color: var(--rd-muted); }
#rd-header .rd-menu-wallet b { font-variant-numeric: tabular-nums; color: var(--rd-wallet); }

/* 게임 메뉴(헤더 아래). CARD는 기존 메뉴 버튼을 그대로 옮겨 쓴다. */
#rd-subnav { width: 100%; flex: none; background: var(--rd-header-bg); border-bottom: 1px solid var(--rd-line); font-family: var(--rd-font); }
#rd-subnav .rd-inner { height: auto; gap: 0; }
#rd-subnav .rd-subnav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: -14px; min-width: 0; }
#rd-subnav .rd-subnav-links > :is(a, button) { flex: none; display: flex; align-items: center; height: 42px; padding: 0 14px; margin: 0; font: inherit; font-family: var(--rd-font); font-size: 0.875rem; font-weight: 700; color: var(--rd-muted); background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; text-decoration: none; cursor: pointer; white-space: nowrap; min-height: 0; box-shadow: none; }
#rd-subnav .rd-subnav-links > :is(a, button):hover { color: var(--rd-text); background: none; }
#rd-subnav .rd-subnav-links > :is(.active, [aria-current=page]) { color: var(--rd-text); border-bottom-color: var(--rd-game); }
#rd-subnav .rd-subnav-links > [hidden] { display: none; }

/* 창 틀(공용 창 #rd-dialog · 관리자 창 등 .rd-dialog, 게임이 따로 여는 창 .rd-window). 안 내용은 site-ui.css 부품.
   모양(테두리 · 바탕 · 여백 · 그림자 · 세로 쌓기)은 둘이 같고, 크기 · 자리는 .rd-dialog만 정한다(.rd-window는 게임이 창마다 정한다).
   .rd-window는 창(dialog)이 아닌 떠 있는 칸에도 붙일 수 있다. */
:is(dialog.rd-dialog, .rd-window) { border: var(--rd-panel-border, 1px solid #2a2a2a); border-radius: var(--rd-radius); background: var(--rd-surface); padding: 18px; box-shadow: 0 20px 60px #0009; overflow: auto; font-size: 0.9375rem; line-height: 1.5; }
dialog:is(.rd-dialog, .rd-window)[open] { display: flex; flex-direction: column; gap: 14px; }
dialog:is(.rd-dialog, .rd-window)::backdrop { background: #000a; backdrop-filter: none; }
dialog.rd-dialog { height: fit-content; width: min(460px, calc(100% - 24px)); margin: max(16px, 10dvh) auto auto; max-height: calc(100dvh - max(16px, 10dvh) - 16px); }
dialog.rd-dialog.rd-wide { width: min(620px, calc(100% - 24px)); }
dialog.rd-dialog.rd-full { width: min(1100px, calc(100% - 24px)); }
/* 플레이어 정보(프로필 내용): 장착 창(620)보다 조금 크게, 불러오는 동안 높이가 덜 흔들리게 */
dialog.rd-dialog.rd-profile-dlg { width: min(720px, calc(100% - 24px)); min-height: min(520px, calc(100dvh - 32px)); overflow: hidden; }
/* 내용만 스크롤하고 머리(닫기) · 방장 버튼(강퇴 등)은 늘 보인다 */
dialog.rd-profile-dlg > .rd-profile-view { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* 게임 CSS의 dialog h2 · label · p 여백 규칙이 창 안으로 들어오지 않게 되돌린다(글자색 · 크기는 각 부품이 정한다) */
:is(dialog.rd-dialog, .rd-window) :is(h2, h3, p, label) { margin: 0; line-height: 1.3; }
:is(dialog.rd-dialog, .rd-window) h3 { font-size: 0.875rem; }
.rd-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rd-dlg-head h2 { font-size: 1.125rem; font-weight: 700; }
.rd-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
:is(dialog.rd-dialog, .rd-window) .rd-seg { display: flex; }
:is(dialog.rd-dialog, .rd-window) .rd-seg-btn { flex: 1; }

/* 알림: popover 최상위 레이어(창보다 위) */
#rd-toast { position: fixed; inset: auto auto 24px 50%; margin: 0; border: 0; transform: translateX(-50%); padding: 10px 18px; border-radius: 99px; background: #f5f5f5; color: #000; font-size: 0.875rem; font-weight: 600; box-shadow: 0 8px 30px #0006; max-width: calc(100% - 32px); }

/* 좁은 화면 */
@media (max-width: 760px) {
  :is(#rd-header, #rd-subnav) .rd-inner { gap: 6px; padding: 0 10px; }
  #rd-header .rd-brand { font-size: 1.125rem; }
  #rd-header .rd-tab { padding: 0 8px; height: 34px; font-size: 0.8125rem; gap: 5px; }
  #rd-header :is(.rd-tab .rd-dot, .rd-me-name) { display: none; }
  #rd-header .rd-right { gap: 4px; }
  #rd-subnav .rd-subnav-links { margin-left: -10px; }
  #rd-subnav .rd-subnav-links > :is(a, button) { padding: 0 10px; font-size: 0.8125rem; height: 40px; }
  /* CARD gacha.css가 좁은 화면 nav 버튼 크기를 !important로 정하므로 여기서만 되돌린다 */
  #rd-subnav .rd-subnav-links > button { font-size: 0.8125rem !important; min-height: 0 !important; }
}
@media (max-width: 400px) {
  #rd-header .rd-tab { padding: 0 6px; }
  #rd-header .rd-brand { font-size: 1rem; letter-spacing: -.8px; }
}

/* CA 헤더 · 창 틀 모양(아케이드 테두리) */
:root[data-rd-game=ca] :is(#rd-header, #rd-subnav) { border-bottom-width: 2px; }
:root[data-rd-game=ca] #rd-subnav { background: #0a4a82; }
:root[data-rd-game=ca] #rd-header .rd-brand { color: #ffea54; }
:root[data-rd-game=ca] #rd-header .rd-brand b { color: #fff; }
:root[data-rd-game=ca] #rd-header .rd-tab.active { background: #0e74bd; }
:root[data-rd-game=ca] :is(#rd-header, dialog.rd-dialog, .rd-window) .rd-icon-btn { border: 2px solid #3aa9df; }
:root[data-rd-game=ca] #rd-header .rd-avatar { background: #ffe16a; color: #3b2200; }
:root[data-rd-game=ca] #rd-header .rd-menu { border: 3px solid #36c2ef; }
:root[data-rd-game=ca] #rd-header :is(.rd-me-card, .rd-menu-wallet) { border-bottom-color: #ffffff2a; }
:root[data-rd-game=ca] #rd-toast { background: #ffe16a; color: #2b1a00; }