/* 공용 화면 부품 (Main·CA·CARD·Board). 시안 Main/tasks/prototypes/unified-ui-v2/app.css를 rd- 이름으로 옮긴 것.
   site-header.css 다음에 불러온다(색 토큰 --rd-*는 거기서 정하고, 여기서는 부품 토큰만 더한다).
   부품은 이 파일 한 곳에서만 정의한다(헤더 창 안 부품 포함). 게임 CSS는 배치 · 게임 고유 그림만 둔다.
   1부 토큰 · 2부 기본 부품 · 3부 방 목록 · 방 안 · 채팅 · 4부 기록 · 5부 인게임 틀 · 로딩 · 6부 반응형 */

/* ===== 1부: 부품 토큰(나이트 플랫 기본, CA는 아래에서 아케이드 블루로) ===== */
:root {
  --rd-chat-h: clamp(220px, 30dvh, 320px);
  --rd-gap: 12px; --rd-side-w: 340px; --rd-radius-btn: 10px;
  --rd-well: #0a0a0a; --rd-row: #181818; --rd-notice: #f2c46b;
  --rd-btn-bg: #2a2a2a; --rd-btn-ink: #fff; --rd-btn-border: 1px solid #3a3a3a; --rd-btn-shadow: none;
  --rd-ghost-border: 1px solid #333;
  --rd-cta-bg: var(--rd-game); --rd-cta-ink: #000; --rd-cta-border: 0; --rd-cta-shadow: none;
  --rd-panel-border: 1px solid #222;
  --rd-card-bg: #121212; --rd-card-bg-hover: #1a1a1a; --rd-card-border: 1px solid #262626; --rd-card-hover: var(--rd-game);
  --rd-title-ink: #fff; --rd-no-ink: #000; --rd-no-bg: var(--rd-game); --rd-action-ink: var(--rd-game);
  --rd-badge-wait: #000c; --rd-badge-wait-ink: #fff; --rd-badge-play: var(--rd-game); --rd-badge-play-ink: #000; --rd-badge-full: #3a3a3a; --rd-badge-full-ink: #ddd;
  --rd-seg-bg: #141414; --rd-seg-active: #f5f5f5; --rd-seg-active-ink: #000;
  --rd-input-bg: #0b0b0b; --rd-input-border: 1px solid #3a3a3a;
  --rd-seat-bg: #161616; --rd-seat-border: 1px solid #2a2a2a; --rd-seat-ring: #000;
  /* 빈 자리는 밝은 점선(들어갈 수 있음), 닫힌 자리는 빗금(못 들어감)으로 한눈에 나눈다 */
  --rd-seat-open: #121212; --rd-seat-open-border: 1px dashed #555; --rd-seat-closed: repeating-linear-gradient(135deg, #141414 0 7px, #060606 7px 14px); --rd-seat-closed-border: 1px solid #222; --rd-seat-closed-ink: #5c5c5c; --rd-seat-closed-icon: .35;
  --rd-state-bg: #222; --rd-ready-bg: var(--rd-game); --rd-ready-ink: #000; --rd-host-ink: var(--rd-game); --rd-me-ring: var(--rd-game);
  --rd-avatar-bg: #2a2a2a; --rd-avatar-ink: #fff; --rd-chat-name: #cfcfcf;
  --rd-page-bg: #000; --rd-accent: var(--rd-game); --rd-switch-on: var(--rd-game); --rd-switch-knob: #111;
}
:root[data-rd-game=ca] {
  --rd-page-bg: radial-gradient(ellipse at top, #1677c4 0%, #0a3f78 45%, #061a33 100%) fixed #061a33;
  --rd-well: #07477c; --rd-row: #0a5491; --rd-notice: #ffe27a;
  --rd-btn-bg: linear-gradient(#25b4ef, #0a7fcb); --rd-btn-border: 2px solid #8ee6ff; --rd-btn-shadow: inset 0 -3px #06609f;
  --rd-ghost-border: 2px solid #3aa9df;
  --rd-cta-bg: linear-gradient(#ffd25a, #f0a320); --rd-cta-ink: #3b2200; --rd-cta-border: 2px solid #fff1b0; --rd-cta-shadow: inset 0 -4px #c97c0e;
  --rd-panel-border: 3px solid #36c2ef;
  --rd-card-bg: #06466c; --rd-card-bg-hover: #08577f; --rd-card-border: 2px solid #4bb6d5; --rd-card-hover: #ffe16a;
  --rd-title-ink: #fff1a9; --rd-no-ink: #063b62; --rd-no-bg: #7fe0ff; --rd-action-ink: #ffe27a;
  --rd-badge-wait: #7fe0ff; --rd-badge-wait-ink: #053456; --rd-badge-play: #ff8a3d; --rd-badge-play-ink: #2a0e00; --rd-badge-full: #c6d4df; --rd-badge-full-ink: #1d2b36;
  --rd-seg-bg: #07477c; --rd-seg-active: #ffe16a; --rd-seg-active-ink: #3b2200;
  --rd-input-bg: #064c88; --rd-input-border: 2px solid #36bdec;
  --rd-seat-bg: linear-gradient(#17b3e8, #0a86c8); --rd-seat-border: 3px solid #b0f3ff; --rd-seat-ring: #ffffffcc;
  --rd-seat-open: #0d93cf; --rd-seat-open-border: 3px dashed #7fd8f7; --rd-seat-closed: #0b6a9e; --rd-seat-closed-border: 3px solid #0a5f8f; --rd-seat-closed-ink: var(--rd-muted); --rd-seat-closed-icon: .55;
  --rd-state-bg: #04497d; --rd-ready-bg: #ffcf4a; --rd-ready-ink: #3b2200; --rd-host-ink: #7ff6ff; --rd-me-ring: #ffe16a;
  --rd-avatar-bg: #ffe16a; --rd-avatar-ink: #3b2200; --rd-chat-name: #9fe6ff; --rd-accent: #ffe16a; --rd-switch-on: #ffcf4a; --rd-switch-knob: #3b2200;
}

/* ===== 2부: 페이지 틀 · 기본 부품 ===== */
/* 공용 페이지 기본: 숨김 속성 · 입력 요소 글꼴(브라우저 기본 글꼴이 남지 않게) */
body.rd-page [hidden] { display: none !important; }
/* 기본값 되돌리기는 우선순위 0(:where): 부품 규칙(.rd-cta-btn 등)의 글자색 · 크기가 항상 이긴다 */
:where(body.rd-page) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.rd-page) :where(a) { color: inherit; text-decoration: none; }
body.rd-page { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--rd-page-bg); color: var(--rd-text); font: 400 0.9375rem/1.5 var(--rd-font); -webkit-font-smoothing: antialiased; }
.rd-main { flex: 1; width: min(var(--rd-width), 100%); margin: 0 auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: var(--rd-gap); min-height: 0; box-sizing: border-box; font-family: var(--rd-font); color: var(--rd-text); }
/* 내용 칸 안의 화면(한 번에 하나): 세로로 쌓고 남은 높이를 넘겨준다(방 안 · 인게임 한 화면) */
.rd-main > .page { display: flex; flex-direction: column; gap: var(--rd-gap); flex: 1; min-height: 0; }
.rd-main > .page[hidden] { display: none; }
.rd-main *, .rd-main *::before, .rd-main *::after { box-sizing: border-box; }
.rd-main :is(h1, h2, h3) { margin: 0; line-height: 1.3; }
.rd-main h1 { font-size: 1.375rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.rd-main h2 { font-size: 0.9375rem; font-weight: 700; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rd-main h2 small { font-size: 0.75rem; font-weight: 500; color: var(--rd-muted); }
.rd-main :focus-visible { outline: 3px solid var(--rd-focus); outline-offset: 2px; }
/* 부품 자리: 자기 상자 없이 자식이 바깥 배치를 따른다(방 안 좁은 화면 순서 등) */
.rd-slot { display: contents; }
.rd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd-muted { color: var(--rd-muted); }
.rd-link { font-size: 0.8125rem; font-weight: 600; color: var(--rd-action-ink); text-decoration: none; }
button.rd-link { border: 0; background: none; padding: 0; margin: 0; min-height: 0; font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--rd-action-ink); cursor: pointer; }
.rd-small { font-size: 0.8125rem; margin: 0; }
.rd-pos { color: var(--rd-positive); font-variant-numeric: tabular-nums; } .rd-neg { color: var(--rd-negative); font-variant-numeric: tabular-nums; }
.rd-error { margin: 0; color: var(--rd-negative); font-size: 0.8125rem; min-height: 1em; }
.rd-status { margin: 0; font-size: 0.875rem; min-height: 1.5em; }
.rd-status.rd-ok { color: var(--rd-positive); }
.rd-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--rd-game); }
.rd-dot.g-ca { background: var(--rd-ca); } .rd-dot.g-card { background: var(--rd-card); } .rd-dot.g-board { background: var(--rd-board); }
.rd-n { font-size: 0.75rem; opacity: .75; font-variant-numeric: tabular-nums; }
.rd-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; min-height: 0; padding: 0 10px; border-radius: 99px; background: var(--rd-chip); border: 0; color: var(--rd-text); font: inherit; font-size: 0.8125rem; white-space: nowrap; flex: none; }
button.rd-chip { cursor: pointer; }
.rd-chip .rd-i { width: 15px; height: 15px; }
.rd-chip.rd-mine { box-shadow: inset 0 0 0 2px var(--rd-accent); }
/* 글자 아바타: 크기는 --rd-avatar-size 하나로(가로 = 세로, 글자는 크기의 .42 — 헤더와 같게), line-height 1로 글자를 가운데. 곳마다 크기 변수만 바꾼다. 픽셀 확인: Main/tasks/scripts/avatar-center-browser-test.mjs */
.rd-avatar { --rd-avatar-size: 56px; 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; font-weight: 800; font-size: calc(var(--rd-avatar-size) * .42); background: var(--rd-avatar-bg); color: var(--rd-avatar-ink); flex: none; }
.rd-res { display: inline-grid; place-items: center; min-width: 52px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; flex: none; }
.rd-res.r-win { background: color-mix(in srgb, var(--rd-positive) 22%, transparent); color: var(--rd-positive); }
.rd-res.r-loss { background: color-mix(in srgb, var(--rd-negative) 20%, transparent); color: var(--rd-negative); }
.rd-res.r-draw, .rd-res.r-void { background: var(--rd-chip); color: var(--rd-muted); }

.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px; margin: 0; border-radius: var(--rd-radius-btn); border: var(--rd-btn-border); background: var(--rd-btn-bg); box-shadow: var(--rd-btn-shadow); color: var(--rd-btn-ink); font: inherit; font-family: var(--rd-font); font-weight: 700; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: filter .12s; }
.rd-btn:hover:not(:disabled) { filter: brightness(1.12); }
.rd-btn:disabled { opacity: .45; cursor: not-allowed; }
.rd-btn.rd-primary { background: var(--rd-cta-bg); color: var(--rd-cta-ink); border: var(--rd-cta-border); box-shadow: var(--rd-cta-shadow); }
.rd-btn.rd-ghost { background: var(--rd-ghost-bg); color: var(--rd-text); border: var(--rd-ghost-border); box-shadow: none; }
.rd-btn.rd-sm { min-height: 34px; padding: 0 12px; font-size: 0.8125rem; }
.rd-btn.rd-block { width: 100%; }
.rd-btn.rd-icon { width: 42px; padding: 0; }
.rd-btn.rd-icon.rd-sm { width: 34px; }
.rd-btn.rd-danger { color: var(--rd-negative); }

.rd-input, :is(.rd-field, .rd-inline, .rd-search-row) > :is(input:not([type=checkbox]):not([type=range]):not([type=radio]), select, textarea) { min-height: 40px; padding: 0 12px; border-radius: var(--rd-radius-sm); border: var(--rd-input-border); background: var(--rd-input-bg); color: var(--rd-text); font: inherit; width: 100%; min-width: 0; margin: 0; }
.rd-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; color: var(--rd-muted); min-width: 0; }
.rd-field.rd-wide { grid-column: 1 / -1; }
.rd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-form-grid .rd-input, .rd-form-grid select { min-height: 36px; }
.rd-inline, .rd-search-row { display: flex; gap: 8px; align-items: center; margin: 0; }
:is(.rd-inline, .rd-search-row) > input { flex: 1; }
.rd-search-row > select { flex: none; width: auto; min-width: 116px; }
/* 방 비밀번호처럼 브라우저 비밀번호 저장을 피해야 하는 입력: 글자는 가리고 type=text를 유지 */
.rd-secret { -webkit-text-security: disc; }
.rd-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rd-gap); align-items: start; }
/* 고르기 칸(캐릭터 · 덱 · 배치 등): aria-pressed / aria-checked로 고른 상태 */
.rd-pick { position: relative; margin: 0; min-height: 0; padding: 8px 4px 6px; border: 1px solid #333; border-radius: var(--rd-radius-sm); background: var(--rd-surface-2); color: var(--rd-text); font: inherit; cursor: pointer; box-shadow: none; }
:root[data-rd-game=ca] .rd-pick { background: #0a74b6; border: 3px solid #43c6f0; }
.rd-pick:is([aria-pressed=true], [aria-checked=true]) { border-color: var(--rd-accent); box-shadow: 0 0 0 2px var(--rd-accent); }
.rd-pick:disabled { opacity: .5; cursor: not-allowed; }
.rd-pick-list { display: flex; flex-direction: column; gap: 8px; }
.rd-pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px; text-align: left; }
.rd-pick-text { display: flex; flex-direction: column; min-width: 0; }
.rd-pick-text strong { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-pick-text small { color: var(--rd-muted); font-size: 0.75rem; }
/* 방 설정 아래 줄: 방장 비밀번호 · 봇 */
.rd-pw-row, .rd-bot-row { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--rd-muted) 22%, transparent); }
.rd-bot-row > span { flex: none; color: var(--rd-muted); }
.rd-bot-row > select { flex: 1; min-width: 0; min-height: 34px; }
.rd-pw-row > span { display: inline-flex; align-items: center; gap: 6px; flex: 1; }
.rd-pw-row .rd-i { width: 16px; height: 16px; }
/* 표(관리자 등) */
.rd-table-wrap { overflow-x: auto; }
.rd-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.rd-table th { text-align: left; font-size: 0.75rem; color: var(--rd-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--rd-line); white-space: nowrap; }
.rd-table td { padding: 8px; border-bottom: 1px solid var(--rd-divider); white-space: nowrap; }
.rd-table .rd-num { text-align: right; font-variant-numeric: tabular-nums; }
.rd-table td small { display: block; color: var(--rd-muted); font-size: 0.75rem; }
.rd-table td.rd-empty-cell { text-align: center; color: var(--rd-muted); padding: 24px 8px; white-space: normal; }
/* 창 안 부품: 설정 줄 · 스위치 · 음량 · 내역 목록 */
.rd-prefs { display: flex; flex-direction: column; min-height: 290px; }
.rd-pref { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--rd-divider); font-size: 0.875rem; color: var(--rd-text); margin: 0; padding: 0; }
.rd-pref select { width: 210px; min-height: 38px; padding: 0 10px; border-radius: var(--rd-radius-sm); border: var(--rd-input-border); background: var(--rd-input-bg); color: var(--rd-text); font: inherit; font-size: 0.875rem; }
.rd-pref-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; font-size: 0.8125rem; }
.rd-range { display: flex; align-items: center; gap: 10px; width: 190px; }
.rd-range input { flex: 1; accent-color: var(--rd-switch-on); min-height: 0; height: 20px; margin: 0; padding: 0; border: 0; background: none; }
.rd-range output { width: 40px; text-align: right; font-variant-numeric: tabular-nums; color: var(--rd-muted); }
.rd-switch { appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 26px; border-radius: 99px; background: var(--rd-chip); position: relative; cursor: pointer; flex: none; transition: background .15s; min-height: 0; padding: 0; border: 0; }
.rd-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.rd-switch:checked { background: var(--rd-switch-on); }
/* 켜짐: 밝은 바탕 위 어두운 손잡이로 대비를 확보한다 */
.rd-switch:checked::after { transform: translateX(18px); background: var(--rd-switch-knob); box-shadow: 0 0 0 2px #0002; }
.rd-ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
dialog .rd-ledger { min-height: 240px; max-height: 50dvh; overflow: auto; }
.rd-ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--rd-divider); font-size: 0.875rem; align-items: center; }
.rd-ledger li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 계정 설정 창: 일마다 한 칸(.rd-acct-sec). 칸 사이(12px)와 칸 안(8–10px) 간격 · 칸 바탕으로 묶음이 나뉜다. 오류 줄은 자리를 미리 잡는다. */
.rd-acct { display: flex; flex-direction: column; gap: 12px; }
.rd-acct-sec { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; min-width: 0; border-radius: var(--rd-radius-sm); background: var(--rd-surface-2); border: 1px solid var(--rd-divider); }
.rd-acct-sec h3 { font-size: 0.875rem; font-weight: 700; }
.rd-acct-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.rd-acct-state { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; background: color-mix(in srgb, var(--rd-notice) 15%, transparent); color: var(--rd-notice); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.rd-acct-state .rd-i { width: 15px; height: 15px; }
/* 프로필: 사진 | 닉네임 줄 · 사진 단추 줄 · 오류 줄 */
.rd-acct-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: center; }
.rd-acct-profile > .rd-avatar { --rd-avatar-size: 84px; grid-row: 1 / 4; }
.rd-acct-profile > .rd-error { grid-column: 2; }
.rd-acct-photo { display: flex; align-items: center; gap: 8px; }
.rd-acct-name > .rd-btn, .rd-acct-photo > .rd-btn { flex: none; }
/* 가격(쀼): 단추 안 작은 알약. 모자라면 빨간 글자(단추는 막힌다) */
.rd-price { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 99px; background: #0000002e; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-btn.rd-ghost .rd-price { background: var(--rd-chip); color: var(--rd-wallet); }
.rd-btn .rd-price.rd-short { color: var(--rd-negative); }
.rd-acct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-acct-foot { display: flex; align-items: center; gap: 10px; }
.rd-acct-foot > .rd-error { flex: 1; }
.rd-acct-foot > .rd-btn { flex: none; }
/* 프로필 사진 고르기: 네모 칸(둥근 테두리 밖은 어둡게) + 확대 밀대 */
.rd-crop { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rd-crop-canvas { display: block; width: min(300px, 100%); aspect-ratio: 1; border-radius: var(--rd-radius-sm); background: var(--rd-well); touch-action: none; cursor: grab; }
.rd-crop-canvas:active { cursor: grabbing; }
.rd-crop-zoom { display: flex; align-items: center; gap: 10px; width: min(300px, 100%); }
.rd-crop-zoom input { flex: 1; min-height: 0; height: 20px; margin: 0; padding: 0; accent-color: var(--rd-switch-on); }
.rd-crop > .rd-error { align-self: stretch; text-align: center; }
.rd-crop-zoom .rd-crop-left svg { transform: scaleX(-1); }
.rd-crop-deg { min-width: 4.5ch; text-align: right; font-size: 0.8125rem; color: var(--rd-muted); }
@media (max-width: 480px) {
  .rd-acct-pair { grid-template-columns: 1fr; }
  .rd-acct-profile { column-gap: 12px; }
  .rd-acct-profile > .rd-avatar { --rd-avatar-size: 64px; }
}
.rd-ledger li.rd-muted { display: block; border: 0; text-align: center; padding: 24px 0; }
.rd-ledger small { color: var(--rd-muted); text-align: right; white-space: nowrap; }
.rd-ledger b { font-variant-numeric: tabular-nums; }
.rd-stack { display: flex; flex-direction: column; gap: 12px; }
.rd-switch-row { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.rd-switch-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--rd-accent); }
.rd-panel { background: var(--rd-surface); border: var(--rd-panel-border); border-radius: var(--rd-radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rd-summary { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; font-size: 0.875rem; }
.rd-summary dt { color: var(--rd-muted); white-space: nowrap; }
.rd-summary dd { margin: 0; display: flex; align-items: center; gap: 4px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rd-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: calc(var(--rd-radius-btn) + 4px); background: var(--rd-seg-bg); max-width: 100%; }
.rd-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-height: 0; padding: 0 14px; margin: 0; border: 0; border-radius: var(--rd-radius-btn); background: none; color: var(--rd-muted); font: inherit; font-weight: 700; font-size: 0.875rem; white-space: nowrap; cursor: pointer; box-shadow: none; }
.rd-seg-btn:is([aria-pressed=true], [aria-selected=true]) { background: var(--rd-seg-active); color: var(--rd-seg-active-ink); }
/* 작은 탭 줄(세부 분류 등): 같은 탭 모양, 높이 · 글자만 작게 */
.rd-seg.rd-seg-sub { padding: 3px; gap: 3px; }
.rd-seg.rd-seg-sub .rd-seg-btn { height: 28px; padding: 0 10px; font-size: 0.8125rem; }
/* 숫자 조절(−  값  ＋): 탭 줄과 같은 바탕, 가운데 값 */
.rd-stepper { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: calc(var(--rd-radius-btn) + 4px); background: var(--rd-seg-bg); }
.rd-stepper > .rd-btn { width: 34px; padding: 0; flex: none; }
.rd-stepper > output { flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-scroll-x { overflow-x: auto; scrollbar-width: none; }
/* 화면 머리: 제목 + 오른쪽 버튼 */
/* 쪽 머리 줄: 단추가 있든 없든 같은 높이(메뉴를 옮겨 다닐 때 아래 내용이 오르내리지 않게) */
.rd-page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 42px; }
.rd-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-toolbar-end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.rd-search { flex: 1; min-width: 180px; max-width: 420px; position: relative; display: flex; align-items: center; }
.rd-search > .rd-i { position: absolute; left: 12px; color: var(--rd-muted); pointer-events: none; }
.rd-search input.rd-input { padding-left: 40px; }
/* 검색 칸 지우기(×, clearableSearch): 칸 너비는 감싼 칸이 맡는다 */
.rd-clearable { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.rd-clearable > input { flex: 1; width: 100%; min-width: 0; padding-right: 36px; }
.rd-clearable > input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.rd-clear { position: absolute; right: 4px; width: 30px; height: 30px; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--rd-muted); cursor: pointer; }
.rd-clear:hover, .rd-clear:focus-visible { color: var(--rd-text); background: color-mix(in srgb, var(--rd-muted) 18%, transparent); }
.rd-clear[hidden] { display: none; }
.rd-clear .rd-i { width: 16px; height: 16px; }
.rd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rd-tile { background: var(--rd-surface); border: var(--rd-panel-border); border-radius: var(--rd-radius-sm); padding: 10px 14px; display: flex; flex-direction: column; min-width: 0; }
.rd-tile span { font-size: 0.75rem; color: var(--rd-muted); }
.rd-tile b { font-size: 1.25rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-tiles.rd-compact .rd-tile { background: var(--rd-surface-2); border: 0; }
.rd-tiles.rd-compact b { font-size: 1.0625rem; }

/* ===== 3부: 방 목록 · 채팅 · 방 안 ===== */
.rd-lobby { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--rd-gap); }
.rd-lobby-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-room-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 104px; align-content: start; gap: 10px; padding: 10px; background: var(--rd-well); border-radius: var(--rd-radius); overflow: auto; }
.rd-room-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; text-align: left; padding: 8px; margin: 0; min-height: 0; border: var(--rd-card-border); border-radius: var(--rd-radius-sm); background: var(--rd-card-bg); color: var(--rd-text); font: inherit; min-width: 0; height: 104px; cursor: pointer; box-shadow: none; }
.rd-room-card:hover:not([aria-disabled=true]) { border-color: var(--rd-card-hover); background: var(--rd-card-bg-hover); }
.rd-room-card[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.rd-thumb { position: relative; border-radius: calc(var(--rd-radius-sm) - 3px); overflow: hidden; background: var(--rd-surface-2); display: grid; place-items: center; }
.rd-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* 픽셀 그림이 아닌 미리보기(판 그림 · 사진): 부드럽게, 위쪽 기준 */
.rd-thumb > img.rd-thumb-art { image-rendering: auto; object-position: top; }
.rd-thumb > svg { height: 84px; width: auto; }
.rd-badge { position: absolute; left: 5px; top: 5px; font-size: 0.6875rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--rd-badge-wait); color: var(--rd-badge-wait-ink); }
.rd-badge.s-playing { background: var(--rd-badge-play); color: var(--rd-badge-play-ink); }
.rd-badge.s-full { background: var(--rd-badge-full); color: var(--rd-badge-full-ink); }
.rd-rc-body { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.rd-rc-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rd-rc-title strong { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rd-title-ink); }
.rd-rc-title .rd-i { width: 16px; height: 16px; color: var(--rd-muted); }
.rd-no { font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 800; color: var(--rd-no-ink); background: var(--rd-no-bg); padding: 1px 6px; border-radius: 6px; flex: none; }
.rd-rc-meta { font-size: 0.8125rem; color: var(--rd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-rc-foot { display: flex; align-items: center; gap: 12px; font-size: 0.8125rem; margin-top: 3px; min-width: 0; }
.rd-rc-foot > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rd-rc-foot .rd-i { width: 15px; height: 15px; color: var(--rd-muted); }
.rd-rc-host { min-width: 0; overflow: hidden; }
.rd-rc-action { margin-left: auto; font-weight: 800; color: var(--rd-action-ink); }
.rd-rc-action .rd-i { color: currentColor; }
.rd-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; color: var(--rd-muted); }
.rd-pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.rd-pages { display: flex; align-items: center; gap: 4px; }
.rd-page-no { min-width: 34px; min-height: 34px; margin: 0; padding: 0 6px; border: 1px solid transparent; border-radius: var(--rd-radius-sm); background: none; color: var(--rd-muted); font: inherit; font-weight: 700; cursor: pointer; box-shadow: none; }
.rd-page-no:hover { color: var(--rd-text); background: var(--rd-surface-2); }
.rd-page-no[aria-current=page] { color: var(--rd-text); border-color: var(--rd-accent); background: var(--rd-surface-2); }
.rd-gap { min-width: 18px; text-align: center; color: var(--rd-muted); }

.rd-chat { display: flex; flex-direction: column; gap: 8px; background: var(--rd-surface); border: var(--rd-panel-border); border-radius: var(--rd-radius); padding: 10px; min-height: 0; min-width: 0; }
.rd-chat-log { list-style: none; margin: 0; padding: 0 4px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; }
.rd-chat-log li { display: flex; gap: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.rd-chat-log b { flex: none; color: var(--rd-chat-name); }
/* 채팅 이름: 단추가 아니라 누를 수 있는 글자(링크). 모든 게임 같음(CA 채팅도 같은 a.rd-chat-name) */
.rd-chat-log .rd-chat-name { flex: none; color: var(--rd-chat-name); font-weight: 700; text-decoration: none; cursor: pointer; }
.rd-chat-log .rd-chat-name:hover { text-decoration: underline; }
/* 이름 옆 표시(관전 등): 이름과 따로, 작고 흐리게 */
.rd-chat-log .rd-chat-tag { flex: none; margin-left: -4px; color: var(--rd-muted); font-size: 0.75rem; line-height: 1.9; }
.rd-chat-log li.rd-sys { color: var(--rd-notice); }
.rd-chat-log li.rd-sys b { display: none; }
.rd-chat-log li.rd-mine b { color: var(--rd-accent); }
.rd-chat-form { display: flex; gap: 8px; margin: 0; }
/* 방 목록 · 방 안 채팅 높이는 모든 게임 같음(--rd-chat-h, :root에서). 방 안 좌석 칸은 남은 높이를 쓴다. */
.rd-chat-dock { height: var(--rd-chat-h); flex: none; }
.rd-chat-room { flex: 0 0 var(--rd-chat-h); }
.rd-chat-room.rd-grow { flex: 1 1 var(--rd-chat-h); }

.rd-room-head { display: flex; align-items: center; gap: 10px; }
.rd-room-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.rd-room-title h1 { font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-room-title > .rd-i { color: var(--rd-muted); }
.rd-room-chips { display: flex; gap: 6px; }
.rd-room-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--rd-side-w); gap: var(--rd-gap); }
.rd-room-left { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.rd-seats { min-height: 0; display: grid; gap: 10px; }
.rd-seats-ca { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 240px; }
.rd-seats-duel { flex: none; height: 250px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.rd-vs { align-self: center; font-size: 1.625rem; font-weight: 900; font-style: italic; color: var(--rd-accent); }
.rd-seat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; min-height: 0; padding: 28px 8px 46px; border-radius: var(--rd-radius); border: var(--rd-seat-border); background: var(--rd-seat-bg); color: var(--rd-text); font: inherit; text-align: center; min-width: 0; overflow: hidden; box-shadow: none; }
:root[data-rd-game=ca] .rd-seat { text-shadow: 1px 1px 0 #05325a; }
button.rd-seat { cursor: pointer; }
button.rd-seat:hover { filter: brightness(1.08); }
.rd-seat[data-me] { box-shadow: inset 0 0 0 3px var(--rd-me-ring); }
.rd-seat[data-state=open] { background: var(--rd-seat-open); border: var(--rd-seat-open-border); color: var(--rd-muted); }
.rd-seat[data-state=closed] { background: var(--rd-seat-closed); border: var(--rd-seat-closed-border); color: var(--rd-seat-closed-ink, var(--rd-muted)); }
.rd-seat[data-state=closed] .rd-seat-art > .rd-i { opacity: var(--rd-seat-closed-icon, .55); }
.rd-seat-no { position: absolute; left: 10px; top: 7px; font-size: 0.75rem; font-weight: 800; color: var(--rd-muted); }
.rd-team { position: absolute; right: 10px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--rd-team); box-shadow: 0 0 0 2px var(--rd-seat-ring); }
.rd-seat-art { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; }
.rd-seat-art > .rd-i { width: 32px; height: 32px; opacity: .55; }
.rd-seat-art > .rd-avatar { --rd-avatar-size: min(56px, 100cqh, 100cqw); }
.rd-seat-text { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
.rd-seat-name { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; font-weight: 800; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-seat-name .rd-i { width: 16px; height: 16px; color: var(--rd-host-ink); }
.rd-seat-lv { font-size: 0.75rem; color: var(--rd-muted); }
.rd-seat-extra { font-size: 0.8125rem; color: var(--rd-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-seat-state { position: absolute; left: 8px; right: 8px; bottom: 8px; min-height: 30px; display: flex; flex-direction: column; justify-content: center; border-radius: var(--rd-radius-sm); background: var(--rd-state-bg); font-size: 0.875rem; font-weight: 800; line-height: 1.2; }
.rd-seat-state small { font-size: 0.6875rem; font-weight: 500; opacity: .8; }
.rd-seat[data-state=host] .rd-seat-state { color: var(--rd-host-ink); }
.rd-seat[data-state=ready] .rd-seat-state { background: var(--rd-ready-bg); color: var(--rd-ready-ink); }
.rd-seat[data-state=waiting] .rd-seat-state { color: var(--rd-muted); font-weight: 600; }
.rd-seat:is([data-state=open], [data-state=closed]) .rd-seat-state { background: none; font-weight: 600; }
.rd-seats-duel .rd-avatar { --rd-avatar-size: 76px; }
.rd-seats-duel .rd-seat-name { font-size: 1.0625rem; }
/* 관전자 줄: 인원 · 역할과 관계없이 한 줄 고정 높이, 이름이 많으면 가로 스크롤 */
.rd-spectators { height: 48px; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; padding: 0 12px; white-space: nowrap; border-radius: var(--rd-radius-sm); background: var(--rd-surface); border: var(--rd-panel-border); font-size: 0.875rem; flex: none; }
.rd-spec-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.rd-chips { display: flex; gap: 6px; flex-wrap: nowrap; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rd-spectators > :last-child:not(.rd-chips) { flex: none; }
.rd-you-watch { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rd-accent); }
/* 오른쪽 칸: 내 설정 → 방 설정 → 주 버튼 */
.rd-room-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.rd-side-scroll { flex: 0 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.rd-cta { display: flex; flex-direction: column; gap: 6px; flex: none; }
.rd-cta-reason { margin: 0; font-size: 0.8125rem; color: var(--rd-notice); text-align: center; }
.rd-cta-btn { min-height: 58px; font-size: 1.3125rem; font-weight: 900; border-radius: var(--rd-radius); background: var(--rd-cta-bg); color: var(--rd-cta-ink); border: var(--rd-cta-border); box-shadow: var(--rd-cta-shadow); }
.rd-cta-btn.rd-is-ready { background: var(--rd-ghost-bg); color: var(--rd-text); border: var(--rd-ghost-border); box-shadow: none; }

/* ===== 4부: 기록 · 프로필 · 플레이어 ===== */
.rd-profile-head { flex-direction: row; align-items: center; gap: 14px; }
.rd-profile-head h1 { font-size: 1.25rem; margin: 0; line-height: 1.3; }
/* 이름과 아이디: 붙여서 두 줄(제목 기본 여백 없음) */
.rd-profile-head > div:not(.rd-head-actions) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-profile-link { text-decoration: underline transparent; text-underline-offset: 4px; transition: text-decoration-color .12s; }
.rd-profile-link:hover, .rd-profile-link:focus-visible { text-decoration-color: currentColor; }
.rd-head-actions { margin-left: auto; display: flex; gap: 8px; }
.rd-game-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rd-gap); }
.rd-game-sum { text-align: left; color: var(--rd-text); gap: 4px; font: inherit; cursor: pointer; }
.rd-game-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; }
.rd-game-sum b { font-size: 1.625rem; }
.rd-game-sum small { color: var(--rd-muted); }
.rd-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rd-match { display: grid; grid-template-columns: 76px auto minmax(0, 1fr) 56px 80px 72px auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid color-mix(in srgb, var(--rd-muted) 18%, transparent); font-size: 0.875rem; }
.rd-match.rd-muted { display: block; border: 0; text-align: center; padding: 24px 0; }
.rd-m-game { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.rd-m-body { display: flex; flex-direction: column; min-width: 0; }
.rd-m-body b, .rd-m-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-m-body small, .rd-m-when, .rd-m-who { color: var(--rd-muted); font-size: 0.8125rem; }
.rd-m-dur { font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--rd-muted); }
.rd-m-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 프로필 내용(site-profile.js): 내 프로필 화면 · 플레이어 정보 창 */
.rd-profile-view { min-width: 0; }
/* 다른 게임 · 화면으로 떠나는 중(site-header beginLeave): 내용만 흐려 감추고 헤더는 그대로 */
body.rd-leaving :is(.rd-main, #rd-subnav) { opacity: 0; pointer-events: none; transition: opacity .12s ease-out; }
.rd-player-card { display: flex; align-items: center; gap: 12px; }
.rd-player-card b { display: block; font-size: 1.125rem; }
.rd-player-card small { color: var(--rd-muted); }

/* ===== 5부: 인게임 틀 · 결과 · 로딩 ===== */
/* 인게임: 게임 메뉴 줄만 숨기고 공용 헤더 · 좌우 여백은 그대로. 판은 헤더 아래 남은 높이에 맞춘다. */
body[data-rd-mode] #rd-subnav { display: none; }
/* 방 안 · 인게임은 한 화면(헤더 아래 남은 높이를 채운다). 좁은 화면에서는 아래 미디어 규칙이 풀어 준다 */
body:is([data-rd-mode=room], [data-rd-mode=play]) { height: 100dvh; overflow: hidden; }
.rd-play { flex: 1; min-height: 0; height: calc(100dvh - var(--rd-header-h)); padding-top: 10px; padding-bottom: 10px; gap: 10px; }
.rd-play-bar { height: 46px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: var(--rd-surface); border: var(--rd-panel-border); border-radius: var(--rd-radius-sm); }
.rd-play-bar strong { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-play-bar strong small { color: var(--rd-muted); font-weight: 500; }
.rd-play-bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rd-play-area { flex: 1; min-height: 0; position: relative; display: flex; }
/* rd-play-fill: 판이 화면을 꽉 채우는 경기(CARD). 좁은 화면에서는 판이 화면 높이 그대로이고, 위 헤더 · 경기 막대는 스크롤하면 밀려 올라간다(revealPlayArea) */
/* 경기 결과 창(resultLayer): 경기 화면 상자를 덮고, 판 안의 층(최근 칸 · 말 · 차례 안내 · 연출)보다 늘 위 */
.rd-result { position: absolute; inset: 0; z-index: 30; }
.rd-result-dim { position: absolute; inset: 0; background: #000a; }
.rd-result-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; padding: 20px; border-radius: var(--rd-radius); background: var(--rd-surface); border: var(--rd-panel-border); display: flex; flex-direction: column; gap: 14px; }
.rd-result-panel h2 { justify-content: center; font-size: clamp(26px, 5vw, 42px); color: var(--rd-title-ink); }
.rd-result-panel[data-outcome=win] h2 { color: var(--rd-positive); }
.rd-result-panel[data-outcome=loss] h2 { color: var(--rd-negative); }
.rd-result-meta { margin: -6px 0 0; text-align: center; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.rd-result-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rd-result-note { margin: 0; text-align: center; color: var(--rd-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
/* 결과 순위(resultLayer standings): 위 강조 칸(승자 · 공동 1위, 왕관 · 큰 아바타 · 큰 점수) + 아래 등수 줄(등수 · 아바타 · 이름 · 점수 오른쪽 맞춤). 내 칸은 테두리 대신 안쪽 그림자(크기 그대로) */
.rd-standings { display: flex; flex-direction: column; gap: 10px; }
.rd-podium, .rd-ranks { list-style: none; margin: 0; padding: 0; }
.rd-podium { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rd-podium > li { --rd-win: #ffcf4a; flex: 0 1 168px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 14px; border-radius: var(--rd-radius-sm); background: color-mix(in srgb, var(--rd-win) 10%, var(--rd-surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-win) 45%, transparent); text-align: center; }
.rd-podium .rd-avatar { --rd-avatar-size: 64px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-win) 70%, transparent); }
.rd-rs-crown { display: grid; place-items: center; height: 22px; color: var(--rd-win); }
.rd-rs-crown svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.rd-podium.rd-even > li { --rd-win: var(--rd-muted); }
.rd-podium.rd-even .rd-rs-crown { visibility: hidden; }
.rd-podium .rd-rs-name { flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 5px; row-gap: 2px; max-width: 100%; }
.rd-podium .rd-rs-name small { flex-basis: 100%; }
.rd-podium .rd-rs-name strong { font-size: 1.0625rem; }
.rd-podium .rd-rs-score b { font-size: 2rem; }
.rd-podium[data-count="3"] > li, .rd-podium[data-count="4"] > li { flex-basis: 128px; }
.rd-podium[data-count="3"] .rd-avatar, .rd-podium[data-count="4"] .rd-avatar { --rd-avatar-size: 48px; }
.rd-podium[data-count="3"] .rd-rs-score b, .rd-podium[data-count="4"] .rd-rs-score b { font-size: 1.5rem; }
/* 다섯 명 이상 함께 이김(협동 성공 등): 한 줄에 다섯 칸 */
.rd-podium[data-count="5"] > li { flex-basis: 104px; padding-inline: 6px; }
.rd-podium[data-count="5"] .rd-avatar { --rd-avatar-size: 44px; }
.rd-podium[data-count="5"] .rd-rs-score b { font-size: 1.375rem; }
.rd-ranks { display: flex; flex-direction: column; gap: 6px; }
.rd-ranks > li { display: grid; grid-template-columns: 1.75em 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px 6px 10px; border-radius: var(--rd-radius-sm); background: var(--rd-surface-2); }
.rd-ranks .rd-avatar { --rd-avatar-size: 32px; }
/* 5명 이상: 넓은 창에서 두 단(1단 위→아래, 다음 2단). 창 너비는 결과 창(rd-result-panel) 기준 */
.rd-result-panel { container-type: inline-size; }
@container (min-width: 500px) { .rd-ranks[data-many] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rd-rows), auto); grid-auto-flow: column; column-gap: 8px; } }
.rd-rs-rank { text-align: center; font-weight: 800; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.rd-standings:not(.rd-scored) .rd-ranks > li { grid-template-columns: 32px minmax(0, 1fr); padding-left: 12px; }
.rd-standings:not(.rd-scored) .rd-rs-rank { display: none; }
.rd-rs-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rd-rs-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rd-text); }
.rd-rs-name small { color: var(--rd-muted); font-size: 0.75rem; white-space: nowrap; }
.rd-rs-me { flex: none; align-self: center; padding: 1px 6px; border-radius: 999px; background: var(--rd-accent); color: var(--rd-switch-knob, #111); font-size: 0.6875rem; font-weight: 800; line-height: 1.4; }
.rd-rs-score { display: inline-flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-rs-score b { font-size: 1.125rem; font-weight: 800; color: var(--rd-text); line-height: 1.1; }
.rd-rs-score small { color: var(--rd-muted); font-size: 0.75rem; font-weight: 700; }
.rd-ranks > li[data-self] { box-shadow: inset 0 0 0 2px var(--rd-accent); }
.rd-podium > li[data-self] { box-shadow: inset 0 0 0 2px var(--rd-accent); }
/* 퇴장한 사람: 아주 살짝 어둡게(크기 · 자리 그대로) */
:is(.rd-ranks, .rd-podium) > li[data-left] { opacity: .8; }
@media (max-width: 480px) {
  .rd-result-panel { padding: 16px 12px; gap: 12px; }
  .rd-podium > li { flex-basis: 140px; }
  .rd-podium .rd-avatar { --rd-avatar-size: 52px; }
  .rd-podium .rd-rs-score b { font-size: 1.625rem; }
  .rd-ranks > li { gap: 8px; padding-right: 12px; }
}
/* 결과 창을 닫은 뒤(마지막 판 보기): 판 아래쪽 가운데 작은 줄에서 결과 다시 보기 · 돌아가기 */
.rd-result-mini { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; display: flex; gap: 8px; padding: 8px; border-radius: var(--rd-radius); background: var(--rd-surface); border: var(--rd-panel-border); box-shadow: 0 8px 24px #0009; }
/* 내용 영역 로딩: 헤더 · 게임 메뉴는 그대로 두고 내용 자리에만 표시 */
.rd-loading { flex: 1; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--rd-muted); font-size: 0.875rem; }
.rd-loading[hidden] { display: none; }
/* 격자 목록 자리(카드 팩 진열 등)에 들어가도 한 칸이 아니라 줄 전체 */
.rd-loading { grid-column: 1 / -1; }
.rd-load-failed { gap: 10px; text-align: center; }
.rd-load-failed strong { color: var(--rd-text); font-size: 0.9375rem; }
.rd-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--rd-muted) 30%, transparent); border-top-color: var(--rd-accent); animation: rd-spin .8s linear infinite; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
.rd-progress { display: block; width: min(260px, 70%); height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--rd-muted) 25%, transparent); overflow: hidden; }
.rd-progress[hidden] { display: none; }
.rd-progress > i { display: block; height: 100%; width: var(--rd-progress, 0%); background: var(--rd-accent); transition: width .2s; }
/* 지연 표시 문구: 빨리 끝나면 보이지 않는다 */
.rd-delayed { animation: rd-appear 0s .3s both; }
@keyframes rd-appear { from { visibility: hidden; } to { visibility: visible; } }

/* ===== 6부: 반응형 ===== */
@media (min-width: 1024px) and (min-height: 640px) {
  body.rd-fit { height: 100dvh; overflow: hidden; }
}
@media (max-width: 1023px) {
  :root { --rd-side-w: 300px; }
  .rd-room-grid { overflow: visible; }
  .rd-seats-ca { grid-template-rows: repeat(2, 180px); min-height: 0; }
}
/* 태블릿 세로 이하: 1열. 방 안은 좌석 → 내 설정 → 방 설정 → 버튼 → 관전자 → 채팅 */
@media (max-width: 860px) {
  body:is([data-rd-mode=room], [data-rd-mode=play]) { height: auto; overflow: auto; }
  .rd-play { height: auto; }
  /* 좁은 화면 인게임: 공용 헤더도 따라 붙지 않고 함께 스크롤돼 판 자리를 차지하지 않는다 */
  body[data-rd-mode=play] #rd-header { position: relative; }
  /* 판은 화면 맨 아래까지(아래에 붙는 창이 화면 끝에 닿게): 아래 여백 없이 위 6px만 */
  .rd-play:has(.rd-play-fill) { padding-bottom: 0; }
  .rd-play-area.rd-play-fill { flex: none; height: calc(100dvh - 6px); }
  .rd-two-col { grid-template-columns: minmax(0, 1fr); }
  .rd-room-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-room-body { display: flex; flex-direction: column; }
  .rd-room-left { display: contents; }
  .rd-seats { order: 1; } .rd-room-side { order: 2; } .rd-side-scroll { overflow: visible; } .rd-spectators { order: 3; } .rd-chat-room { order: 4; flex: none; height: 300px; }
  .rd-game-sums { grid-template-columns: minmax(0, 1fr); }
  .rd-match { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'game body act' 'res dur act'; row-gap: 4px; }
  .rd-m-game { grid-area: game; } .rd-match .rd-res { grid-area: res; justify-self: start; } .rd-m-body { grid-area: body; } .rd-m-dur { grid-area: dur; } .rd-match .rd-btn { grid-area: act; }
  .rd-m-who, .rd-m-when { display: none; }
}
/* 가로로 눕힌 휴대폰(높이가 낮은 터치 화면)도 인게임은 위와 같이 헤더 · 경기 막대가 스크롤로 밀려 올라간다 */
@media (max-height: 520px) and (pointer: coarse) {
  body[data-rd-mode=play] { height: auto; overflow: auto; }
  body[data-rd-mode=play] .rd-play { height: auto; }
  body[data-rd-mode=play] #rd-header { position: relative; }
  /* 판은 화면 맨 아래까지(아래에 붙는 창이 화면 끝에 닿게): 아래 여백 없이 위 6px만 */
  .rd-play:has(.rd-play-fill) { padding-bottom: 0; }
  .rd-play-area.rd-play-fill { flex: none; height: calc(100dvh - 6px); }
}
@media (max-width: 600px) {
  .rd-form-grid { grid-template-columns: minmax(0, 1fr); }
  :root { --rd-gap: 10px; }
  .rd-main { padding: 10px 10px 14px; }
  .rd-toolbar { gap: 8px; }
  .rd-lobby .rd-seg { width: 100%; }
  .rd-lobby .rd-seg-btn { flex: 1; padding: 0 6px; }
  .rd-search { max-width: none; min-width: 0; }
  .rd-toolbar-end { margin-left: 0; width: 100%; }
  .rd-toolbar-end .rd-btn { flex: 1; }
  .rd-room-card { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; height: 96px; }
  .rd-room-grid { grid-auto-rows: 96px; padding: 6px; }
  .rd-thumb > svg { height: 76px; }
  .rd-rc-title strong { font-size: 0.9375rem; }
  .rd-rc-foot { gap: 8px; }
  .rd-room-title h1 { font-size: 1.0625rem; }
  .rd-room-chips, .rd-hide-sm { display: none; }
  .rd-seats-ca { gap: 6px; grid-template-rows: repeat(2, 136px); }
  .rd-seats-ca .rd-seat { padding: 18px 4px 32px; gap: 2px; }
  .rd-seats-ca .rd-seat-art { overflow: hidden; }
  .rd-seats-ca .rd-seat-name { font-size: 0.75rem; }
  .rd-seats-ca .rd-seat-lv { display: none; }
  .rd-seats-ca .rd-seat-state { font-size: 0.6875rem; min-height: 24px; left: 4px; right: 4px; bottom: 4px; }
  .rd-seats-ca .rd-seat-state small { display: none; }
  .rd-seats-ca .rd-seat-no { left: 6px; top: 3px; font-size: 0.625rem; }
  .rd-seats-ca .rd-team { right: 6px; top: 6px; width: 10px; height: 10px; }
  /* 2인 좌석: 가로형으로 줄여 세로 길이를 아낀다 */
  .rd-seats-duel { height: auto; gap: 6px; }
  .rd-seats-duel .rd-seat { height: 88px; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; justify-items: start; text-align: left; gap: 2px 8px; padding: 10px 8px; }
  .rd-seats-duel :is(.rd-seat-no, .rd-seat-extra) { display: none; }
  .rd-seats-duel .rd-seat-art { grid-row: 1 / 3; width: 40px; height: 40px; }
  .rd-seats-duel .rd-avatar { --rd-avatar-size: 40px; }
  .rd-seats-duel .rd-seat-text { align-items: flex-start; }
  .rd-seats-duel .rd-seat-name { font-size: 0.875rem; }
  .rd-seats-duel .rd-seat-lv { font-size: 0.6875rem; }
  .rd-seats-duel .rd-seat-state { position: static; grid-column: 2; min-height: 0; background: none; font-size: 0.75rem; padding: 0; }
  .rd-seats-duel .rd-seat[data-state=ready] .rd-seat-state { background: none; color: var(--rd-accent); }
  .rd-seats-duel .rd-seat-state small { display: none; }
  .rd-vs { font-size: 0.9375rem; }
  .rd-profile-head .rd-avatar { --rd-avatar-size: 44px; }
  .rd-play { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
  .rd-play-bar { gap: 6px; padding: 0 6px; }
}
@media (max-width: 420px) {
  .rd-pref { flex-wrap: wrap; padding: 6px 0; }
  .rd-range, .rd-pref select { width: 100%; }
}
/* 안내 창 글: 줄바꿈 그대로, 긴 낱말은 끊어서 */
.rd-notice-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
/* 화면 바꾸기 효과(screenEnter): 새 화면이 짧게 나타난다. 크기 · 위치는 바꾸지 않는다(경기 판이 화면 크기를 재는 동안 어긋나지 않게, 스크롤도 생기지 않게) */
@keyframes rd-screen-in { from { opacity: 0; } to { opacity: 1; } }
.rd-screen-in { animation: rd-screen-in .22s ease-out both; }
/* 화면 바꾸기 앞 단계: 지금 화면을 어둡게(site-ui screenSwitch) */
/* 전환(transition)이 아니라 애니메이션: 바로 앞 밝게 애니메이션을 떼는 순간과 겹치면 전환이 시작되지 않고 바로 검게 되던 문제 */
@keyframes rd-screen-out { from { opacity: 1; } to { opacity: 0; } }
.rd-screen-out { animation: rd-screen-out .14s ease-in both; pointer-events: none; }

/* 리플레이 탐색 줄(replayControls, .replay-bar 안만 — CA 리플레이의 같은 이름 칸과 겹치지 않게): CA · Board 리플레이와 같은 모양 — 가는 진행 막대(지난 부분은 게임 색), 둥근 반투명 단추, 둥근 위치 표시 */
.replay-bar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--rd-radius); background: #0007; }
.replay-bar .replay-timeline { display: flex; align-items: center; height: 16px; }
.replay-bar .replay-step { appearance: none; width: 100%; height: 7px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 3px; cursor: pointer; background: linear-gradient(to right, var(--rd-game) 0 var(--seek-progress, 0%), #ffffff55 var(--seek-progress, 0%) 100%); }
.replay-bar .replay-step::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--rd-game); }
.replay-bar .replay-step::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--rd-game); }
.replay-bar .replay-controls { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.replay-bar .replay-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #0007; color: #fff; cursor: pointer; }
.replay-bar .replay-btn:hover { background: #fff2; }
.replay-bar .replay-toggle { width: 48px; height: 48px; }
.replay-bar .replay-svg svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.replay-bar .replay-toggle .replay-svg svg { width: 24px; height: 24px; }
.replay-bar .replay-count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 10px 16px; border-radius: 28px; background: #0007; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.replay-bar .replay-speed-label { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--rd-muted); font-size: 0.875rem; white-space: nowrap; }
.replay-bar .replay-speed { padding: 8px 12px; border: 0; border-radius: 24px; background: #0007; color: #fff; }
@media (max-width: 560px) { .replay-bar .replay-btn { width: 34px; height: 34px; } .replay-bar .replay-toggle { width: 42px; height: 42px; } .replay-bar .replay-count { padding: 8px 10px; font-size: 0.8125rem; } .replay-bar .replay-controls { gap: 5px; } }

/* 리플레이 탐색 줄 겹쳐 보이기(replayOverlay): 화면 아래 그라데이션 위, 숨으면 가는 진행 선만(누르면 다시) */
.rd-replay-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; padding: 36px 0 10px; background: linear-gradient(transparent, #0009); opacity: 0; transition: opacity .2s; pointer-events: none; }
.rd-replay-overlay[data-visible="true"] { opacity: 1; pointer-events: auto; }
.rd-replay-overlay .replay-bar { padding: 0; background: transparent; }
/* 진행 막대는 좌우 꽉 차게(숨었을 때의 가는 진행 선과 같은 너비), 단추 줄만 안쪽 여백 */
.rd-replay-overlay .replay-bar .replay-controls { padding: 0 12px; }
.rd-replay-reveal { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; width: 100%; height: 18px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; transition: opacity .2s; }
.rd-replay-reveal[data-visible="false"] { opacity: 0; pointer-events: none; }
.rd-replay-reveal::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff38; }
.rd-replay-reveal::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--seek-progress, 0%); background: var(--rd-game); }
@media (max-width: 560px) { .rd-replay-overlay { padding: 16px 0 6px; } .rd-replay-overlay .replay-bar .replay-controls { padding: 0 6px; } }