/* cards.css — public/index.html 에서 분리 (로드 순서가 의존 순서다) */
  /* ===== 카드게임 공용 (블랙잭 · 원카드 · 조커뽑기) ===== */
  .card {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 46px; height: 66px; border-radius: 7px; background: #f4f6fb; color: #15181e;
    font-weight: bold; font-size: 17px; line-height: 1.1; flex: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.35); user-select: none;
  }
  .card.red { color: #d33b52; }
  .card.back {
    background: repeating-linear-gradient(45deg, #3d4a6b 0 5px, #2c3550 5px 10px);
    color: #7aa2f7; font-size: 12px;
  }
  .card.joker { background: #ffe9a8; color: #8a6a00; font-size: 12px; letter-spacing: -.5px; }
  .card.pick { cursor: pointer; transition: transform .12s, box-shadow .12s; }
  .card.pick:hover { transform: translateY(-7px); box-shadow: 0 8px 14px rgba(0,0,0,.45); }
  .card.dim { opacity: .35; }
  .hand { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 66px; }
  .cg-status { font-size: 15px; font-weight: bold; color: #e0af68; min-height: 22px; text-align: center; }
  .cg-label { font-size: 12px; color: #9aa0a6; }
  .cg-seats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .cg-seat {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
    background: #2c313a; border: 1px solid #3a4150; color: #c0caf5; font-size: 13px; font-family: inherit;
  }
  .cg-seat.me { color: #e8eaed; font-weight: bold; }
  .cg-seat.now { background: #33406b; border-color: #7aa2f7; color: #e8eaed; }
  .cg-seat.victim { border-color: #f7768e; color: #ffb3c0; }
  .cg-seat.out { opacity: .45; text-decoration: line-through; }
  .cg-seat .n { color: #565f89; font-size: 11px; }
  .cg-bar { width: min(480px, 90%); height: 6px; background: #2c313a; border-radius: 3px; overflow: hidden; }
  .cg-bar[hidden] { display: none; }
  .cg-fill { height: 100%; background: #7aa2f7; border-radius: 3px; transition: width .25s linear, background-color .3s; }
  .cg-bar.warn .cg-fill { background: #f7768e; }
  .cg-log {
    font-size: 13px; line-height: 1.7; text-align: left; max-height: 130px; overflow-y: auto;
    width: min(90vw, 460px); background: #22262e; border-radius: 10px; padding: 8px 12px;
  }
  .cg-log:empty { display: none; }
  .cg-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .cg-actions[hidden] { display: none; }
  .cash { color: #e0af68; font-weight: bold; }
  .cg-table { font-size: 13px; width: min(90vw, 460px); border-collapse: collapse; }
  .cg-table th, .cg-table td { padding: 5px 8px; border-top: 1px solid #2c313a; text-align: right; }
  .cg-table th:first-child, .cg-table td:first-child { text-align: left; }
  .cg-table th { color: #7aa2f7; font-size: 12px; border-top: none; }
  .up { color: #9ece6a; }
  .down { color: #f7768e; }
  #bj-bet { width: 90px; text-align: right; }
  #oc-suits[hidden] { display: none; }
  .suit-btn {
    background: #f4f6fb; color: #15181e; border: none; border-radius: 7px;
    width: 38px; height: 38px; font-size: 19px; cursor: pointer; font-family: inherit;
  }
  .suit-btn.red { color: #d33b52; }

  /* ===== 가상화폐 — 주식 HTS 배치: 종목 | 차트 | 주문 ===== */
  /* 상승 빨강 · 하락 파랑 (국내 증권사 관례). 매수=상승색, 매도=하락색 */
  #tab-coin { --rise: #f0616e; --fall: #4b8ffb; }
  /* --side: 주문창이 지금 어느 쪽인지. % 칩과 주문 버튼이 이 색을 물려받는다 */
  .c-order { --side: var(--rise); }
  .c-order.side-sell { --side: var(--fall); }
  #tab-coin .game-wrap { align-items: stretch; padding: 14px 16px; gap: 10px; }
  #tab-coin .up { color: var(--rise); }
  #tab-coin .down { color: var(--fall); }

  .coin-top { display: flex; gap: 10px 14px; align-items: baseline; flex-wrap: wrap; }
  .coin-disc { font-size: 11px; color: #6b7280; }

  /* 폭 판정은 뷰포트가 아니라 이 영역의 실제 폭으로 한다 (와이드에선 채팅이 420px 먹는다) */
  .coin-deskwrap { container-type: inline-size; width: 100%; max-width: 1280px; margin: 0 auto; }
  .coin-desk { display: grid; gap: 10px; grid-template-areas: 'chart' 'list' 'order'; }
  /* 2단에서 종목이 두 행을 걸치면 열이 주문창만큼 길어져 가운데가 통째로 빈다.
     차트를 위로 빼면 종목·주문이 같은 행이라 높이가 서로 맞는다 */
  @container (min-width: 720px) {
    .coin-desk { grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: 'chart chart' 'list order'; }
    /* 차트가 제 행을 통째로 쓰므로 늘려두면 종목·주문을 화면 밖으로 밀어낸다.
       #tab-coin 을 붙인 건 아래 기본 #coin-chart 규칙이 소스 순서로 이기기 때문 */
    #tab-coin #coin-chart { flex: none; height: 320px; }
  }
  @container (min-width: 1040px) {
    .coin-desk { grid-template-columns: 240px minmax(0, 1fr) 260px; grid-template-areas: 'list chart order'; }
    /* 3단에선 차트가 제 열을 채워야 아래가 안 빈다 */
    #tab-coin #coin-chart { flex: 1; height: auto; }
  }
  /* 두 열 다 세로로 늘어난다. 행 높이는 제일 긴 열(주문창)이 정하므로,
     늘어나지 않으면 차트 아래와 종목 아래에 빈 칸이 남는다 */
  .c-list { grid-area: list; display: flex; flex-direction: column; }
  .c-chart { grid-area: chart; display: flex; flex-direction: column; }
  .c-order { grid-area: order; }
  /* 순위는 바닥에 붙인다 — 종목은 위, 순위는 아래로 갈라두면 남는 칸이 의도로 읽힌다 */
  .rank-head { margin-top: auto; border-top: 1px solid #2c313a; }

  .coin-panel { background: #1b1e24; border: 1px solid #2c313a; border-radius: 10px; overflow: hidden; }
  .panel-head {
    font-size: 11px; color: #7c8494; letter-spacing: .04em; padding: 7px 10px;
    background: #22262e; border-bottom: 1px solid #2c313a;
  }
  .c-order .panel-head { margin: 4px -10px 0; border-top: 1px solid #2c313a; }

  /* 종목 리스트 — 한 줄에 이름·현재가·등락률, 스파크라인은 배경처럼 깔린다 */
  #coin-list { display: flex; flex-direction: column; }
  /* 아래 24px 은 스파크라인 자리 — 글씨 위에 겹치면 둘 다 못 읽는다 */
  .coin-row {
    position: relative; cursor: pointer; padding: 8px 10px 26px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: center;
    border-bottom: 1px solid #23272f; border-left: 3px solid transparent;
  }
  .coin-row:last-child { border-bottom: none; }
  .coin-row:hover { background: #22262e; }
  .coin-row.sel { background: #262b34; border-left-color: var(--gold); }
  .coin-row .sym { font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .coin-row .price { font-size: 14px; font-weight: bold; text-align: right; font-variant-numeric: tabular-nums; }
  .coin-row .mine { font-size: 11px; color: #7c8494; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .coin-row .chg { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
  .coin-row .spark {
    position: absolute; inset: auto 0 3px 0; width: 100%; height: 22px;
    display: block; opacity: .65; pointer-events: none;
  }

  /* 차트 */
  .chart-head {
    display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap;
    padding: 7px 10px; background: #22262e; border-bottom: 1px solid #2c313a;
  }
  .chart-head b { font-size: 13px; }
  .chart-now { font-size: 16px; font-weight: bold; font-variant-numeric: tabular-nums; }
  .chart-chg { font-size: 12px; font-variant-numeric: tabular-nums; margin-right: auto; }
  .chart-head button { padding: 3px 9px; font-size: 12px; }
  .seg { display: inline-flex; gap: 2px; padding: 2px; background: #15181d; border-radius: 8px; }
  #coin-chart { width: 100%; flex: 1; min-height: 280px; display: block; cursor: crosshair; }

  /* 주문창 — 잔고는 주문 버튼 바로 위에 둔다. 화면 반대편에 두면 살지 말지
     정하는 동안 눈이 왕복한다 (실제 HTS 도 잔고가 주문창에 붙어 있다) */
  .ord-balance {
    padding: 9px 10px; background: #191c22; border-bottom: 1px solid #2c313a;
    display: flex; flex-direction: column; gap: 3px;
  }
  .bal-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #8b93a1; }
  .bal-row b { color: #e8eaed; font-weight: 600; font-variant-numeric: tabular-nums; }
  .bal-row.big b { font-size: 16px; }
  .bal-sep {
    margin-top: 6px; padding-top: 7px; border-top: 1px solid #2c313a;
    font-size: 11px; color: #7c8494; letter-spacing: .03em;
  }

  .ord-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .ord-tab {
    padding: 9px 0; font-size: 14px; font-weight: bold; font-family: inherit; cursor: pointer;
    background: #22262e; color: #7c8494; border: none; border-bottom: 2px solid transparent;
  }
  .ord-tab.buy.on { color: var(--rise); border-bottom-color: var(--rise); background: #1b1e24; }
  .ord-tab.sell.on { color: var(--fall); border-bottom-color: var(--fall); background: #1b1e24; }
  .ord-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
  .ord-type { display: flex; }
  .ord-field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9aa0a6; }
  .ord-field span { width: 42px; flex: none; white-space: nowrap; }
  .game-wrap .ord-field input {
    flex: 1; min-width: 0; width: auto; text-align: right; padding: 6px 8px;
    font-variant-numeric: tabular-nums;
  }
  .ord-field input:disabled { opacity: .45; }
  .ord-pct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .ord-sum { font-size: 12px; color: #9aa0a6; display: flex; flex-direction: column; gap: 3px; }
  .ord-sum div { display: flex; justify-content: space-between; gap: 8px; }
  .ord-sum b { color: #e8eaed; font-variant-numeric: tabular-nums; }
  .ord-msg { font-size: 12px; color: var(--gold); min-height: 16px; word-break: keep-all; }

  /* 예약 주문 */
  #coin-orders { display: flex; flex-direction: column; gap: 5px; }
  .order-row {
    display: flex; gap: 6px; align-items: center; justify-content: space-between;
    background: #22262e; border-radius: 6px; padding: 6px 8px; font-size: 11.5px;
    border-left: 3px solid var(--rise); line-height: 1.35;
  }
  .order-row.sell { border-left-color: var(--fall); }

  /* ===== 컨트롤 =====
     금색은 데이터 전용으로 되돌린다 (현재가 점선 · 선택 종목 · 손익). 선택 상태를
     같은 금색으로 칠하면 "값"과 "켜짐"이 한 색을 나눠 써서 둘 다 안 읽힌다.
     대신 눌린 홈(#15181d)에 면(#2b313b)이 올라온 물리 스위치로 보인다.
     ID 로 못을 박은 건 theme.css 의 button:not([class]) 를 이기기 위해서다 */
  #tab-coin .seg button {
    border: none; background: transparent; color: #8b93a1;
    padding: 5px 11px; font-size: 12px; font-weight: 600; font-family: inherit;
    border-radius: 6px; cursor: pointer; transition: background .15s, color .15s;
  }
  #tab-coin .seg button:hover { color: #e8eaed; }
  #tab-coin .seg button.on {
    background: #2b313b; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 3px rgba(0,0,0,.45);
  }
  #tab-coin .ord-type button { flex: 1; }

  /* % 칩은 지금 서 있는 쪽(--side)의 색을 물려받는다 — 돈이 나가는 방향을 버튼이 안다 */
  #tab-coin .ord-pct button {
    padding: 6px 0; font-size: 11px; font-weight: 600; font-family: inherit;
    color: #8b93a1; background: transparent; border: 1px solid var(--line);
    border-radius: 6px; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
  }
  #tab-coin .ord-pct button:hover {
    color: var(--side); border-color: var(--side);
    background: color-mix(in srgb, var(--side) 12%, transparent);
  }
  #tab-coin .ord-pct button:active { transform: translateY(1px); }

  #tab-coin .ord-tab { transition: color .15s, background .15s; }
  #tab-coin .ord-tab:hover:not(.on) { color: #c9ced8; background: #262b34; }

  #tab-coin .ord-submit {
    padding: 11px 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
    color: #fff; background: var(--side); border: none; border-radius: 8px;
    font-family: inherit; cursor: pointer; transition: filter .15s;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--side) 32%, transparent);
  }
  #tab-coin .ord-submit:hover { filter: brightness(1.08); }
  #tab-coin .ord-submit:active { transform: translateY(1px); }
  #tab-coin .ord-submit:disabled { filter: grayscale(.6) brightness(.75); cursor: default; box-shadow: none; }

  #tab-coin .order-row button {
    padding: 3px 8px; font-size: 11px; flex: none; font-family: inherit; cursor: pointer;
    background: transparent; color: #8b93a1; border: 1px solid var(--line-2); border-radius: 5px;
  }
  #tab-coin .order-row button:hover { color: #e8eaed; border-color: #55607a; background: #2b313b; }

  #tab-coin .seg button:focus-visible,
  #tab-coin .ord-pct button:focus-visible,
  #tab-coin .ord-tab:focus-visible,
  #tab-coin .ord-submit:focus-visible,
  #tab-coin .order-row button:focus-visible { outline: 2px solid #e8eaed; outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    #tab-coin .seg button, #tab-coin .ord-pct button,
    #tab-coin .ord-tab, #tab-coin .ord-submit { transition: none; }
    #tab-coin .ord-pct button:active, #tab-coin .ord-submit:active { transform: none; }
  }

  /* ===== 시세 도크 — 개인톡 도크와 같은 방식으로 오른쪽에서 열린다.
     --dock-top(헤더 높이)은 dm.js 가 재서 넣어둔 값을 같이 쓴다.
     개인톡보다 z-index 를 한 칸 낮춰 둘이 겹치면 개인톡이 위로 온다 ===== */
  #coin-dock-toggle {
    background: none; border: 1px solid #3a4150; color: var(--gold);
    padding: 5px 12px; border-radius: 999px; cursor: pointer;
    font-size: 13px; font-family: inherit; display: flex; align-items: center; gap: 5px;
  }
  #coin-dock-toggle:hover { background: #2c313a; border-color: var(--gold); }
  #coin-dock-toggle[aria-expanded="true"] { background: #4a3a1c; border-color: var(--gold); color: #f3cf95; }
  /* 배지는 헤더에 있어 #tab-coin 안의 .up/.down 규칙이 닿지 않는다 */
  #coin-dock-badge { font-variant-numeric: tabular-nums; font-weight: bold; }
  #coin-dock-badge.up { color: #f0616e; }
  #coin-dock-badge.down { color: #4b8ffb; }

  #coin-dock {
    --rise: #f0616e; --fall: #4b8ffb;
    position: fixed; top: var(--dock-top, 44px); right: 0; bottom: 0; z-index: 89;
    width: min(320px, 100%); display: flex; flex-direction: column;
    background: #20242b; border-left: 1px solid #3a4150;
    box-shadow: -20px 0 50px rgba(0,0,0,.5);
    transform: translateX(102%); visibility: hidden;
    transition: transform .24s cubic-bezier(.32,.72,0,1), visibility 0s .24s;
  }
  #coin-dock.open { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.32,.72,0,1); }
  @media (prefers-reduced-motion: reduce) { #coin-dock { transition: none; } }
  #coin-dock .up { color: var(--rise); }
  #coin-dock .down { color: var(--fall); }
  #coin-dockbar {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    border-bottom: 1px solid #333a45; flex: none;
  }
  #coin-dock-title { flex: 1; font-size: 14px; font-weight: bold; color: var(--gold); }
  #coin-dock-goto, #coin-dock-close {
    background: none; border: 1px solid #3a4150; color: #9aa0a6;
    padding: 4px 9px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12px;
  }
  #coin-dock-goto:hover, #coin-dock-close:hover { background: #2c313a; color: #e8eaed; }
  #coin-dock-sum { padding: 10px 14px; border-bottom: 1px solid #2c313a; display: flex; flex-direction: column; gap: 3px; }
  #coin-dock-list { flex: 1; overflow-y: auto; }
  /* 도크 매매 — 시장가만. 지정가는 차트를 찍어야 하니 탭에 둔다 */
  #coin-dock-trade {
    flex: none; padding: 10px 14px; border-top: 1px solid #2c313a;
    display: flex; flex-direction: column; gap: 6px;
  }
  #cd-trade-sym { color: var(--gold); }
  .game-wrap #cd-qty, #cd-qty {
    width: 100%; text-align: right; padding: 7px 9px; font-variant-numeric: tabular-nums;
    background: #2c313a; border: 1px solid #3a4150; border-radius: 7px;
    color: #e8eaed; font-family: inherit; font-size: 13px;
  }
  .cd-btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cd-btnrow button {
    padding: 8px 0; border: 1px solid #3a4150; border-radius: 7px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: bold; background: #2c313a; color: #e8eaed;
  }
  .cd-btnrow button:hover { filter: brightness(1.12); }
  .cd-btnrow button:active { transform: translateY(1px); }
  #cd-buy { background: #f0616e; border-color: #f0616e; color: #fff; }
  #cd-sell { background: #4b8ffb; border-color: #4b8ffb; color: #fff; }
  #coin-dock-trade .ord-msg { min-height: 0; }
  #coin-dock-trade button:focus-visible, #cd-qty:focus-visible {
    outline: 2px solid #e8eaed; outline-offset: 2px;
  }

  #coin-dock-foot {
    flex: none; padding: 9px 14px; border-top: 1px solid #2c313a;
    display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #7c8494;
  }
  #cd-orders { color: var(--gold); }

  /* 순위 — 240px 열에 4칸짜리 표는 안 들어가서 두 줄 카드로 접었다 */
  #coin-rank { display: flex; flex-direction: column; }
  .rank-row { padding: 6px 10px; border-bottom: 1px solid #23272f; }
  .rank-row:last-child { border-bottom: none; }
  .rank-row.me { background: #262b34; box-shadow: inset 3px 0 0 var(--gold); }
  .rank-row.me .rank-top { color: var(--gold); }
  .rank-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
  .rank-top b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .rank-sub { font-size: 10.5px; color: #7c8494; font-variant-numeric: tabular-nums; }

  @media (max-width: 620px) {
    #tab-coin .game-wrap { padding: 10px; }
    #coin-chart { height: 210px; }
    /* 터치 타겟 — 좁은 화면에서 버튼이 손가락보다 작아지지 않게 */
    .ord-pct button, .ord-type button { min-height: 34px; }
    .ord-submit { min-height: 44px; }
    .game-wrap .ord-field input { min-height: 36px; }
  }

  /* 리더보드 */
  .lb-card { background: #22262e; border-radius: 10px; padding: 10px 14px; width: min(92vw, 340px); }
  .lb-card h3 { font-size: 14px; color: #7aa2f7; margin-bottom: 6px; }
  .lb-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; border-top: 1px solid #2c313a; }
  .lb-row.top { color: #e0af68; font-weight: bold; }
  .lb-empty { font-size: 13px; color: #9aa0a6; }