/* ═══════════════════════════════════════════════════════
   ChartFlow — wallet-guide.html 전용 (접두어 wg-) · 2026-10-18 개편
   공용 부품: .page-header · .ui-container--narrow · .ui-alert(--warning/--info/--danger) · .ui-card · .ui-badge · .ui-code · .btn-*
   (예전 페이지 안 <style> 의 어두운 테마 .wg-* 는 지우고 이 파일로 대신함)
   ═══════════════════════════════════════════════════════ */

.wg-alert + .wg-alert { margin-top: 12px; }
.wg-alert + .wg-card { margin-top: 32px; }
.wg-card + .wg-card { margin-top: 20px; }
.wg-alert .ui-alert__icon { color: var(--c-ink-2); }
.ui-alert--warning.wg-alert .ui-alert__icon { color: var(--c-warn); }
.ui-alert--info.wg-alert .ui-alert__icon { color: var(--c-accent-ink); }

/* 카드 머리 */
.wg-card { padding: 28px 32px 30px; }
.wg-card-head { margin-bottom: 22px; }
.wg-kicker { font-size: var(--fs-small); font-weight: 650; color: var(--c-accent-ink); margin-bottom: 2px; }
.wg-card-head .ui-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }

/* 단계 */
.wg-steps { list-style: none; display: grid; gap: 0; }
.wg-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--c-line); }
.wg-step:first-child { border-top: 0; padding-top: 0; }
.wg-step:last-child { padding-bottom: 0; }
.wg-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--c-accent-tint); color: var(--c-accent-ink); font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.wg-step-body { min-width: 0; padding-top: 3px; font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.8; }
.wg-step-body > * + * { margin-top: 10px; }
.wg-step-body strong { color: var(--c-ink); }
.wg-step-body .ui-code { font-size: 0.875em; }

/* 공식 사이트 링크 버튼 · 새 창 표시 */
.wg-dl { gap: 6px; }
.wg-ext { width: 12px; height: 12px; flex-shrink: 0; color: var(--c-ink-3); }
.wg-dl:hover .wg-ext { color: currentColor; }

/* 복구 문구 경고 (2단계 안) */
.wg-seed { margin-top: 12px; }

.wg-cta { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-line); text-align: center; }

@media (max-width: 640px) {
  .wg-card { padding: 22px 18px 24px; }
  .wg-step { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .wg-step-num { width: 28px; height: 28px; font-size: 0.8125rem; }
  .wg-step-body { padding-top: 1px; }
  .wg-cta .btn-primary { width: 100%; }
  .wg-seed { padding: 12px 14px; }
}