/* Main 고유 배치: 로그인 · 게임 선택(게임 카드 · 지갑 · 최근 경기) · 환전소(환율 그래프) · 내 프로필 · 관리자 자리 · 접속 암호.
   페이지 틀 · 버튼 · 칸 · 입력 · 탭 · 내역 목록 같은 부품은 site-ui.css의 공용 부품(rd-)을 쓴다. */
.page-status { margin: 0; text-align: center; color: var(--rd-muted); }
.page-status:empty { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* 지갑 잔액(게임 선택 · 환전소 · 관리자 유저 상세) */
.balances { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.balances.balances-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.balances.balances-1 { grid-template-columns: 1fr; }
/* 인증하지 않은 계정의 환전소: 쀼 잔액만 */
.exchange-page[data-locked] .rd-two-col { grid-template-columns: 1fr; }
.balances div { background: var(--rd-surface-2); border-radius: var(--rd-radius-sm); padding: 10px 12px; min-width: 0; }
.balances dt { font-size: 0.75rem; color: var(--rd-muted); }
.balances dd { margin: 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rd-wallet); overflow-wrap: anywhere; }
.balances-3 dd { font-size: 1.0625rem; }

/* 로그인 · 회원가입 · 접속 암호 */
/* 칸은 위에 붙여 둔다: 회원가입으로 바꾸면 늘어난 칸만 아래로 붙고 탭 · 위 칸은 제자리 */
.auth-page { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding-block: max(24px, 12dvh) 24px; }
.auth { width: min(400px, 100%); padding: 24px; gap: 16px; }
.auth-mode { display: flex; width: 100%; }
.auth-mode .rd-seg-btn { flex: 1; }
.auth .rd-stack { gap: 10px; }
.access-title { display: flex; align-items: center; gap: 10px; }
.access-title .rd-i { width: 22px; height: 22px; }
.access-message { margin: 0; font-size: 0.875rem; }
.access-message:empty { display: none; }

/* 게임 선택 */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--rd-gap); align-items: start; }
.game-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--rd-gap); }
.game-card { --game: var(--rd-main); display: flex; flex-direction: column; background: var(--rd-surface); border: var(--rd-panel-border); border-radius: var(--rd-radius); overflow: hidden; color: var(--rd-text); text-decoration: none; }
.game-card.g-ca { --game: var(--rd-ca); } .game-card.g-card { --game: var(--rd-card); } .game-card.g-board { --game: var(--rd-board); }
.game-card:hover { border-color: var(--game); }
.game-card .rd-btn.rd-primary { background: var(--game); margin-top: auto; }
.game-card[hidden] { display: none; }
/* 인증하지 않은 계정: CA · CARD 카드 자리에 인증 안내 */
.game-pic { aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: var(--rd-surface-2); }
.game-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-pic svg { height: 92%; width: auto; }
.game-body { display: flex; flex-direction: column; gap: 12px; padding: 14px; flex: 1; }
.game-title { display: flex; align-items: center; gap: 8px; font-size: 1.1875rem; font-weight: 800; }
.game-live { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--rd-muted); }
.game-live .live { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-positive); }
.home-side { display: flex; flex-direction: column; gap: var(--rd-gap); }
.playing-game { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; }
.playing-room { display: flex; align-items: baseline; gap: 6px; margin: 0 0 2px; min-width: 0; }
.playing-room b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playing-no { color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.playing-meta { margin: 0 0 12px; color: var(--rd-muted); font-size: 0.8125rem; }
/* 환전소: 위 두 칸 · 환전 내역 사이도 공용 간격 */
.exchange-page:not([hidden]) { display: flex; flex-direction: column; gap: var(--rd-gap); }
.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; }
.recent li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.recent small { margin-left: auto; color: var(--rd-muted); flex: none; }
.recent li.rd-muted { display: block; text-align: center; padding: 12px 0; }
/* Board 카드 그림(장기판) */

/* 내 프로필 · 관리자(관리자 내용은 처음 열 때 /admin/admin.html에서 가져온다) */
.profile, #admin-view { display: flex; flex-direction: column; gap: var(--rd-gap); }
.profile .rd-seg { align-self: flex-start; }

/* 환전소 */
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chart-head h2 { justify-content: flex-start; gap: 8px; }
.chart-head b { font-variant-numeric: tabular-nums; }
.chart-head select { width: auto; }
.chart-wrap { position: relative; touch-action: pan-y; }
.rate-chart { background: var(--rd-surface-2); border-radius: var(--rd-radius-sm); padding: 6px 4px; min-height: 160px; color: var(--rd-muted); font-size: 0.875rem; }
.rate-chart svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.rate-chart svg text { fill: var(--rd-muted); font: 0.75rem var(--rd-font); }
.rate-grid { stroke: #ffffff16; fill: none; stroke-width: 1; }
.rate-line { fill: none; stroke: var(--rd-positive); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rate-point { fill: transparent; stroke: none; }
.chart-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--rd-positive); box-shadow: 0 0 0 3px var(--rd-surface); pointer-events: none; }
.chart-tip { position: absolute; top: 8px; transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; background: var(--rd-menu-bg); border: 1px solid #2a2a2a; font-size: 0.8125rem; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.chart-line { position: absolute; width: 0; border-left: 1px dashed var(--rd-muted); pointer-events: none; }
.chart-wrap:not([data-active]) :is(.chart-line, .chart-dot, .chart-tip) { visibility: hidden; }
.chart-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.estimate { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.875rem; flex-wrap: wrap; }
.estimate b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }

@media (max-width: 1279px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 1023px) {
  .game-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .game-card { flex-direction: row; }
  .game-pic { aspect-ratio: auto; width: 40%; height: 168px; flex: none; }
}
@media (max-width: 700px) {
  .game-card { flex-direction: column; }
  .game-pic { width: 100%; height: auto; aspect-ratio: 16 / 8; }
  .home-side { grid-template-columns: minmax(0, 1fr); }
  .auth { padding: 18px; }
}