/* ═══════════════════════════════════════════════════════
   ChartFlow — account.html 전용 (계정 관리)
   [2026-10-18 개편] common.css 의 거래 계정 카드·설정 칸 규칙을 밝은 테마로 다시 그림.
   js/account.js 는 클래스가 아니라 id · data-copy 로 찾으므로 이름은 ac- 로 새로 지음.
   창(.tc-modal)·알림(.tc-toast)·입력(.form-row)은 site.css 의 '예전 이름 호환' 묶음이 그림.
   공용 부품: .ui-card · .ui-alert · .ui-kv--tiles · .ui-copy__btn · .ui-state · .btn-outline--danger
   ═══════════════════════════════════════════════════════ */

.ac-main { min-height: 50vh; }

/* ─── 거래 계정 로그인 정보 ─── */
.ac-cred { margin-bottom: 40px; }
.ac-trade-cta { flex-shrink: 0; }
.ac-ext { width: 12px; height: 12px; flex-shrink: 0; }
.ac-cred-list { margin-top: 16px; border-top: 1px solid var(--c-line); }
.ac-cred-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.ac-cred-row dt { font-size: var(--fs-small); color: var(--c-ink-2); }
.ac-cred-row dd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ac-cred-value { flex: 1; min-width: 0; font-family: var(--font-code); font-size: 1rem; color: var(--c-ink); line-height: 1.5; word-break: break-all; }
.ac-cred-btns { display: inline-flex; gap: 6px; flex-shrink: 0; }
.ac-cred-btns .ui-copy__btn { min-width: 56px; }
.ac-cred-hint { margin-top: 12px; }

/* ─── 계정 설정 ─── */
.ac-section-title { margin-bottom: 16px; }
.ac-settings dd { overflow-wrap: anywhere; }
.ac-settings .ui-mono { font-size: 0.9375rem; font-weight: 500; }

/* ─── 자격 포기 (버튼만) · 돌아가기 ─── */
.ac-danger { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.ac-back { margin-top: 32px; }

/* 포기 창 — 본문 안 서버 오류 상자 여백은 site.css (.tc-modal-body .tc-modal-server-error) */
.tc-modal-body .tc-modal-danger-box + .form-row { margin-top: 20px; }
.tc-modal-body .form-row:last-of-type { margin-bottom: 0; }
/* 확인 문구 칸은 한글이라 고정폭 글꼴(.mono-input)이면 글자 사이가 벌어져 보임 — 본문 글꼴로 */
.form-row input#acGiveupConfirm { font-family: var(--font); font-size: 1rem; }

@media (max-width: 640px) {
  .ac-cred { margin-bottom: 32px; }
  .ac-cred .ui-card__head { flex-direction: column; align-items: stretch; }
  .ac-trade-cta { width: 100%; }
  .ac-cred-row { grid-template-columns: 1fr; gap: 6px; }
  .ac-danger .btn-outline, .ac-back .btn-outline { width: 100%; }
}