/* account.css — public/index.html 에서 분리 (로드 순서가 의존 순서다) */
  /* ===== 토큰 로그인 (우상단) ===== */
  /* 우상단 묶음: 잔액 · 개인톡 · 토큰관리 · 로그인 */
  #hdr-right { margin-left: auto; display: flex; align-items: center; gap: 6px; padding-left: 8px; }
  #hdr-cash {
    font-size: 12px; font-weight: bold; color: #e0af68;
    background: #2c2618; border: 1px solid #574a22; border-radius: 999px; padding: 4px 11px;
    white-space: nowrap;
  }
  #hdr-cash[hidden] { display: none; }
  #admin-btn[hidden] { display: none; }
  #admin-btn, #auth-btn {
    background: none; border: 1px solid #3a4150; color: #9aa0a6;
    padding: 5px 12px; border-radius: 999px; cursor: pointer;
    font-size: 13px; font-family: inherit; white-space: nowrap;
  }
  #admin-btn:hover, #auth-btn:hover { background: #2c313a; color: #e8eaed; }
  #admin-btn { color: #e0af68; border-color: #574a22; }
  #auth-box {
    position: fixed; top: var(--dock-top, 44px); right: 8px; z-index: 95;
    width: min(430px, calc(100vw - 16px)); max-height: calc(100vh - 60px); overflow-y: auto;
    padding: 14px 16px; background: #20242b;
    border: 1px solid #3a4150; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55);
  }
  #auth-box[hidden] { display: none; }
  .auth-badge {
    font-size: 10px; background: #574a22; color: #e0af68;
    border-radius: 999px; padding: 1px 7px; vertical-align: middle;
  }
  #admin-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid #333a45; }
  #admin-panel[hidden] { display: none; }
  #admin-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
  .tok {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    background: #2c313a; border-radius: 8px; padding: 7px 10px;
  }
  .tok .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tok .who.free { color: #9aa0a6; }
  .tok code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #7aa2f7; }
  .tok button { font-size: 11px; padding: 3px 8px; }
  .auth-title { font-size: 14px; font-weight: bold; color: #7aa2f7; margin-bottom: 6px; }
  .auth-help { font-size: 12px; color: #9aa0a6; line-height: 1.6; margin-bottom: 8px; }
  #auth-row, .auth-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  #reg-row { display: flex; flex-direction: column; gap: 8px; }
  /* display를 지정한 요소는 hidden 속성만으로는 안 숨는다 */
  #auth-row[hidden], .auth-row[hidden], #reg-row[hidden], #auth-forms[hidden] { display: none; }
  #auth-box input {
    background: #2c313a; border: 1px solid #3a4150; color: #e8eaed;
    padding: 8px 10px; border-radius: 7px; font-family: inherit; font-size: 13px;
  }
  #auth-box input:focus { outline: none; border-color: #7aa2f7; }
  #auth-id { flex: 1; min-width: 110px; }
  #auth-pw { flex: 1; min-width: 110px; }
  .auth-sep { font-size: 12px; color: #9aa0a6; margin-top: 10px; }
  button.link {
    background: none; border: none; color: #7aa2f7; cursor: pointer;
    font-family: inherit; font-size: 12px; padding: 0; text-decoration: underline;
  }
  #auth-msg { font-size: 12px; margin-top: 7px; min-height: 16px; color: #f7768e; }
  #auth-msg.ok { color: #9ece6a; }
  #auth-btn.on { background: #2d4a37; border-color: #9ece6a; color: #b7e88c; }
  header { padding-right: 12px; }
  /* 로그인 안 하면 도금통 게임은 잠긴다 */
  .auth-lock {
    background: #3a2b2f; border: 1px solid #8c4351; border-radius: 10px;
    padding: 10px 14px; font-size: 13px; color: #ffb3c0; text-align: center;
    width: min(92vw, 470px); line-height: 1.6;
  }
  .auth-lock[hidden] { display: none; }
  .auth-lock button { margin-left: 8px; }
