/* =============================================================================
   BISCROW Guarantee / Earn — 디자인 시스템
   2026-08-22

   범위 규칙 (중요)
     이 파일의 모든 선택자는 `.ge` 아래에만 적용된다.
     전역 태그 선택자를 쓰지 않는다 — 기존 페이지를 건드리지 않기 위해서다.
     (2026-08-11 감사에서 "전역 태그 셀렉터 오염 0건" 을 확인했고 그 상태를 유지한다)

   디자인 방향 (2026-08-22 UI 감사 반영)
     이건 사람 돈을 맡아두는 화면이다. "크립토 대시보드" 처럼 보이면 안 된다.
       · 배경은 조용하게, 숫자가 화면의 주인공이 되게 한다.
       · 네온·글로우·큰 그라디언트를 걷어냈다. 화려함은 신뢰가 아니다.
       · 금액은 정수부를 굵게, 소수부를 옅게 — 거래소가 쓰는 방식이 읽기 정확하다.
       · 모든 파생 수치 옆에 "언제 확인했는지" 를 붙인다. 근거 없는 숫자를 두지 않는다.
     브랜드 시안(#00d4ff)은 아이덴티티로 유지하되 작은 강조에만 쓴다.
   ========================================================================== */

.ge {
  /* ── 색 ─────────────────────────────────────────────────────────────
     금융 서비스에 맞게 조정(2026-08-22 UI 감사).
       · 보라빛 네이비 → 중립 슬레이트로. 배경이 조용해야 숫자가 앞으로 나온다.
       · 네온 시안은 "작은 강조" 전용. 큰 면적에는 한 단계 낮춘 톤을 쓴다.
       · 성공/경고/위험은 채도를 낮춰 경고가 장식처럼 보이지 않게.                */
  --ge-bg:            #0b0e14;
  --ge-surface:       #12161f;
  --ge-surface-2:     #171c27;
  --ge-surface-3:     #1e2532;
  --ge-border:        #232b3a;
  --ge-border-strong: #33405480;

  --ge-text:          #eef2f8;
  --ge-text-2:        #9aa5b8;
  --ge-text-3:        #6b7689;

  --ge-brand:         #35c3ee;   /* 본문·아이콘용 (읽기 편한 밝기) */
  --ge-brand-hi:      #00d4ff;   /* 기존 브랜드색 — 작은 강조에만 */
  --ge-brand-dim:     #1391b7;
  --ge-brand-soft:    rgba(53, 195, 238, .10);
  --ge-brand-ring:    rgba(53, 195, 238, .28);

  --ge-pos:           #35c08a;
  --ge-pos-soft:      rgba(53, 192, 138, .10);
  --ge-warn:          #dda63a;
  --ge-warn-soft:     rgba(221, 166, 58, .10);
  --ge-neg:           #e2635c;
  --ge-neg-soft:      rgba(226, 99, 92, .10);
  --ge-info:          #7d8cf0;
  --ge-info-soft:     rgba(125, 140, 240, .10);

  /* ── 간격 (4px 스케일) ──────────────────────────────────────────── */
  --ge-1: 4px;  --ge-2: 8px;  --ge-3: 12px; --ge-4: 16px;
  --ge-5: 20px; --ge-6: 24px; --ge-8: 32px; --ge-10: 40px; --ge-12: 48px;

  /* ── 타이포 ─────────────────────────────────────────────────────────
     크기 종류를 줄이고 대비를 키웠다. 숫자는 항상 tabular.               */
  --ge-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             'Noto Sans KR', Roboto, sans-serif;
  --ge-mono: 'SF Mono', 'JetBrains Mono', 'Roboto Mono', 'D2Coding', Consolas, monospace;

  --ge-fs-xs: 11px; --ge-fs-sm: 13px; --ge-fs-md: 15px;
  --ge-fs-lg: 17px; --ge-fs-xl: 22px; --ge-fs-2xl: 28px; --ge-fs-3xl: 38px;

  /* ── 모양 ───────────────────────────────────────────────────────────
     글로우를 걷어내고 얇은 테두리 + 아주 옅은 그림자로. 과장을 줄인다.   */
  --ge-r-sm: 8px; --ge-r: 10px; --ge-r-lg: 14px; --ge-r-xl: 18px; --ge-r-full: 999px;
  --ge-shadow:    0 1px 1px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.18);
  --ge-shadow-lg: 0 2px 4px rgba(0,0,0,.32), 0 18px 44px rgba(0,0,0,.34);

  --ge-t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --ge-t:      200ms cubic-bezier(.4,0,.2,1);

  font-family: var(--ge-font);
  color: var(--ge-text);
  font-size: var(--ge-fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

/* 라이트 선호 시 토큰만 교체 — 구조는 동일 */
@media (prefers-color-scheme: light) {
  .ge.ge-adaptive {
    --ge-bg:            #f6f7fb;
    --ge-surface:       #ffffff;
    --ge-surface-2:     #f2f4f9;
    --ge-surface-3:     #e8ebf3;
    --ge-border:        #dfe3ee;
    --ge-border-strong: #c7cddf;
    --ge-text:          #12151f;
    --ge-text-2:        #4e5568;
    --ge-text-3:        #838aa0;
    --ge-brand:         #0089b3;
    --ge-brand-soft:    rgba(0, 137, 179, .10);
  }
}

/* 접근성 — 움직임 최소화 선호 */
@media (prefers-reduced-motion: reduce) {
  .ge *, .ge *::before, .ge *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── 레이아웃 ──────────────────────────────────────────────────────── */
.ge-stack   { display: flex; flex-direction: column; gap: var(--ge-4); }
.ge-row     { display: flex; align-items: center; gap: var(--ge-3); flex-wrap: wrap; }
.ge-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ge-3); }
.ge-grid    { display: grid; gap: var(--ge-4); }
.ge-grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ge-grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ge-grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ge-grow    { flex: 1 1 auto; min-width: 0; }
.ge-spacer  { flex: 1 1 auto; }

@media (max-width: 900px) {
  .ge-grid-3, .ge-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ge-grid-2, .ge-grid-3, .ge-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ── 히어로 ────────────────────────────────────────────────────────
   네온 방사 그라디언트를 걷어냈다. 돈을 맡기는 화면에서 화려한 빛은
   신뢰가 아니라 불안을 준다. 위에서 은은히 떨어지는 빛 + 미세 격자만 남긴다. */
.ge-hero {
  position: relative; overflow: hidden;
  border-radius: var(--ge-r-xl);
  padding: var(--ge-12) var(--ge-8);
  background:
    linear-gradient(180deg, rgba(53,195,238,.055) 0%, rgba(53,195,238,0) 42%),
    linear-gradient(180deg, var(--ge-surface-2) 0%, var(--ge-surface) 100%);
  border: 1px solid var(--ge-border);
}
.ge-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%);
}
.ge-hero > * { position: relative; }
.ge-hero h1 {
  font-size: var(--ge-fs-3xl); font-weight: 800; letter-spacing: -.028em;
  margin: 0 0 var(--ge-4); line-height: 1.22; color: var(--ge-text);
}
.ge-hero p { color: var(--ge-text-2); font-size: var(--ge-fs-lg); margin: 0; max-width: 58ch; line-height: 1.65; }
@media (max-width: 640px) {
  .ge-hero { padding: var(--ge-8) var(--ge-5); border-radius: var(--ge-r-lg); }
  .ge-hero h1 { font-size: var(--ge-fs-2xl); }
  .ge-hero p { font-size: var(--ge-fs-md); }
}

/* ── 카드 ──────────────────────────────────────────────────────────── */
.ge-card {
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-r-lg);
  padding: var(--ge-5);
}
.ge-card--flat  { background: var(--ge-surface-2); }
.ge-card--brand { border-color: var(--ge-brand-ring); box-shadow: 0 0 0 1px var(--ge-brand-soft) inset; }
.ge-card__head  { display: flex; align-items: center; justify-content: space-between;
                  gap: var(--ge-3); margin-bottom: var(--ge-4); }
.ge-card__title { font-size: var(--ge-fs-lg); font-weight: 700; margin: 0; }
.ge-card__sub   { color: var(--ge-text-2); font-size: var(--ge-fs-sm); margin: 2px 0 0; }

/* ── 통계 타일 ─────────────────────────────────────────────────────── */
.ge-stat { background: var(--ge-surface-2); border: 1px solid var(--ge-border);
           border-radius: var(--ge-r); padding: var(--ge-4); min-width: 0; }
.ge-stat__label { font-size: var(--ge-fs-xs); color: var(--ge-text-3);
                  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.ge-stat__value { font-family: var(--ge-mono); font-size: var(--ge-fs-xl); font-weight: 700;
                  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
                  overflow-wrap: anywhere; }
.ge-stat__unit  { font-size: var(--ge-fs-sm); color: var(--ge-text-2); margin-left: 4px; font-weight: 500; }
.ge-stat__meta  { font-size: var(--ge-fs-xs); color: var(--ge-text-3); margin-top: 4px; }
.ge-stat--pos .ge-stat__value { color: var(--ge-pos); }
.ge-stat--brand .ge-stat__value { color: var(--ge-brand); }

/* 숫자 정렬 — 표와 타일 전체에서 자릿수가 흔들리지 않게 */
.ge .ge-num { font-family: var(--ge-mono); font-variant-numeric: tabular-nums; }

/* ── 금액 표기 ──────────────────────────────────────────────────────
   정수부는 굵게, 소수부는 한 단계 옅게, 단위는 더 옅게.
   자릿수가 흔들리지 않도록 tabular-nums 를 강제한다.                    */
.ge-amt {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--ge-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.015em; white-space: nowrap;
}
.ge-amt b  { font-weight: 700; color: inherit; }
.ge-amt i  { font-style: normal; font-weight: 600; opacity: .62; }
.ge-amt em { font-style: normal; font-weight: 500; font-size: .62em;
             color: var(--ge-text-3); margin-left: 5px; letter-spacing: .02em; }
.ge-amt--lg { font-size: var(--ge-fs-2xl); }
.ge-amt--sm { font-size: var(--ge-fs-sm); }
.ge-amt--pos b, .ge-amt--pos i { color: var(--ge-pos); }
.ge-amt--neg b, .ge-amt--neg i { color: var(--ge-neg); }

/* ── 신뢰 스트립 — 이 화면의 숫자가 어디서 왔는지 한 줄로 ─────────── */
.ge-trust {
  display: flex; flex-wrap: wrap; gap: var(--ge-2) var(--ge-5);
  padding: var(--ge-3) var(--ge-4);
  background: var(--ge-surface-2); border: 1px solid var(--ge-border);
  border-radius: var(--ge-r); font-size: var(--ge-fs-xs); color: var(--ge-text-3);
}
.ge-trust__item { display: inline-flex; align-items: center; gap: 6px; }
.ge-trust__item i { color: var(--ge-text-3); }
.ge-trust__item b { color: var(--ge-text-2); font-weight: 600; }

/* ── 모바일 고정 액션바 — 돈 관련 주요 버튼을 항상 손에 닿게 ───────── */
.ge-actionbar { display: none; }
@media (max-width: 720px) {
  .ge-actionbar {
    display: flex; gap: var(--ge-2);
    position: sticky; bottom: 0; z-index: 50;
    padding: var(--ge-3) var(--ge-4) calc(var(--ge-3) + env(safe-area-inset-bottom, 0px));
    margin: var(--ge-4) calc(-1 * var(--ge-4)) 0;
    background: linear-gradient(180deg, rgba(11,14,20,0), var(--ge-bg) 28%);
    border-top: 1px solid var(--ge-border);
  }
  .ge-actionbar .ge-btn { flex: 1 1 0; }
  .ge-page { padding-bottom: var(--ge-6); }
}

/* ── 정보 행 (라벨 : 값) ───────────────────────────────────────────── */
.ge-kv { display: flex; justify-content: space-between; gap: var(--ge-4);
         padding: 9px 0; border-bottom: 1px solid var(--ge-border); }
.ge-kv:last-child { border-bottom: 0; }
.ge-kv__k { color: var(--ge-text-2); font-size: var(--ge-fs-sm); }
.ge-kv__v { text-align: right; font-size: var(--ge-fs-sm); overflow-wrap: anywhere; }

/* ── 배지 / 칩 ─────────────────────────────────────────────────────── */
.ge-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--ge-r-full);
  font-size: var(--ge-fs-xs); font-weight: 600; line-height: 1.7;
  border: 1px solid transparent; white-space: nowrap;
}
.ge-badge--pos  { background: var(--ge-pos-soft);   color: var(--ge-pos);   border-color: rgba(52,211,153,.28); }
.ge-badge--warn { background: var(--ge-warn-soft);  color: var(--ge-warn);  border-color: rgba(251,191,36,.28); }
.ge-badge--neg  { background: var(--ge-neg-soft);   color: var(--ge-neg);   border-color: rgba(248,113,113,.28); }
.ge-badge--info { background: var(--ge-info-soft);  color: var(--ge-info);  border-color: rgba(129,140,248,.28); }
.ge-badge--brand{ background: var(--ge-brand-soft); color: var(--ge-brand); border-color: var(--ge-brand-ring); }
.ge-badge--mute { background: var(--ge-surface-3);  color: var(--ge-text-2); border-color: var(--ge-border); }

/* 보증금 배지 (프로필/목록에서 재사용) */
.ge-gbadge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: var(--ge-r-full);
  background: var(--ge-brand-soft);
  border: 1px solid var(--ge-brand-ring);
  color: var(--ge-text); font-size: var(--ge-fs-xs); font-weight: 650;
  text-decoration: none; white-space: nowrap;
  transition: background var(--ge-t-fast), border-color var(--ge-t-fast);
}
.ge-gbadge:hover { background: rgba(53,195,238,.16); border-color: var(--ge-brand); }
.ge-gbadge i { color: var(--ge-brand); font-size: .95em; }

/* ── 버튼 ──────────────────────────────────────────────────────────── */
.ge-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--ge-r-sm);
  font-size: var(--ge-fs-md); font-weight: 650; font-family: inherit;
  border: 1px solid var(--ge-border-strong); background: var(--ge-surface-2);
  color: var(--ge-text); cursor: pointer; text-decoration: none;
  transition: background var(--ge-t-fast), border-color var(--ge-t-fast), transform var(--ge-t-fast);
  min-height: 44px;              /* 터치 타깃 */
}
.ge-btn:hover:not(:disabled) { background: var(--ge-surface-3); border-color: var(--ge-brand-ring); }
.ge-btn:active:not(:disabled){ transform: translateY(1px); }
.ge-btn:focus-visible { outline: 2px solid var(--ge-brand); outline-offset: 2px; }
.ge-btn:disabled, .ge-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.ge-btn--primary {
  /* 단색 — 그라디언트 버튼은 값이 싸 보인다 */
  background: var(--ge-brand); border-color: var(--ge-brand); color: #04131a;
  font-weight: 700;
}
.ge-btn--primary:hover:not(:disabled) { background: #4bcef4; border-color: #4bcef4; }
.ge-btn--primary:active:not(:disabled) { background: var(--ge-brand-dim); border-color: var(--ge-brand-dim); }
.ge-btn--ghost   { background: transparent; border-color: var(--ge-border); }
.ge-btn--danger  { background: var(--ge-neg-soft); border-color: rgba(248,113,113,.4); color: var(--ge-neg); }
.ge-btn--sm      { padding: 7px 12px; font-size: var(--ge-fs-sm); min-height: 36px; }
.ge-btn--block   { width: 100%; }

/* 로딩 스피너 (버튼 내부) */
.ge-btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.ge-btn.is-loading::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--ge-text); animation: ge-spin .7s linear infinite;
}
@keyframes ge-spin { to { transform: rotate(360deg); } }

/* ── 입력 ──────────────────────────────────────────────────────────── */
.ge-field { display: flex; flex-direction: column; gap: 6px; }
.ge-label { font-size: var(--ge-fs-sm); color: var(--ge-text-2); font-weight: 600; }
.ge-input, .ge-select, .ge-textarea {
  width: 100%; padding: 11px 14px; min-height: 44px;
  background: var(--ge-surface-2); border: 1px solid var(--ge-border);
  border-radius: var(--ge-r-sm); color: var(--ge-text);
  font-size: var(--ge-fs-md); font-family: inherit;
  transition: border-color var(--ge-t-fast), box-shadow var(--ge-t-fast);
}
.ge-input:focus, .ge-select:focus, .ge-textarea:focus {
  outline: none; border-color: var(--ge-brand); box-shadow: 0 0 0 3px var(--ge-brand-soft);
}
.ge-input--num { font-family: var(--ge-mono); font-variant-numeric: tabular-nums; text-align: right; }
.ge-input[aria-invalid="true"] { border-color: var(--ge-neg); }
.ge-hint  { font-size: var(--ge-fs-xs); color: var(--ge-text-3); }
.ge-error { font-size: var(--ge-fs-xs); color: var(--ge-neg); }

.ge-inputgroup { display: flex; gap: var(--ge-2); align-items: stretch; }
.ge-inputgroup .ge-input { flex: 1 1 auto; }

/* ── 탭 ────────────────────────────────────────────────────────────── */
.ge-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--ge-surface-2); border: 1px solid var(--ge-border);
  border-radius: var(--ge-r); overflow-x: auto; scrollbar-width: none;
}
.ge-tabs::-webkit-scrollbar { display: none; }
.ge-tab {
  flex: 1 1 auto; padding: 10px 16px; border: 0; background: transparent;
  color: var(--ge-text-2); font-size: var(--ge-fs-sm); font-weight: 650;
  border-radius: var(--ge-r-sm); cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: background var(--ge-t-fast), color var(--ge-t-fast);
  min-height: 40px;
}
.ge-tab:hover { color: var(--ge-text); }
.ge-tab[aria-selected="true"] { background: var(--ge-surface); color: var(--ge-brand); box-shadow: var(--ge-shadow); }
.ge-tab:focus-visible { outline: 2px solid var(--ge-brand); outline-offset: -2px; }

/* ── 표 ────────────────────────────────────────────────────────────── */
.ge-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
                border: 1px solid var(--ge-border); border-radius: var(--ge-r); }
.ge-table { width: 100%; border-collapse: collapse; font-size: var(--ge-fs-sm); min-width: 560px; }
.ge-table th {
  text-align: left; padding: 12px 14px; background: var(--ge-surface-2);
  color: var(--ge-text-3); font-weight: 650; font-size: var(--ge-fs-xs);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  border-bottom: 1px solid var(--ge-border);
}
.ge-table td { padding: 13px 14px; border-bottom: 1px solid var(--ge-border); vertical-align: middle; }
.ge-table tbody tr:last-child td { border-bottom: 0; }
.ge-table tbody tr:hover td { background: var(--ge-surface-2); }
.ge-table .ge-td-num { text-align: right; font-family: var(--ge-mono); font-variant-numeric: tabular-nums; }

/* ── 주소 표시 ─────────────────────────────────────────────────────── */
.ge-addr {
  display: flex; align-items: center; gap: var(--ge-2);
  background: var(--ge-surface-2); border: 1px dashed var(--ge-border-strong);
  border-radius: var(--ge-r-sm); padding: 12px 14px;
}
.ge-addr code {
  font-family: var(--ge-mono); font-size: var(--ge-fs-sm); color: var(--ge-text);
  overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; line-height: 1.5;
}
.ge-addr__actions { display: flex; gap: 6px; flex-shrink: 0; }

.ge-qr { display: grid; place-items: center; padding: var(--ge-4);
         background: #fff; border-radius: var(--ge-r); width: fit-content; margin: 0 auto; }
.ge-qr img { display: block; width: 176px; height: 176px; max-width: 100%; }

/* ── 진행 단계 ─────────────────────────────────────────────────────── */
.ge-steps { display: flex; gap: var(--ge-2); flex-wrap: wrap; }
.ge-step {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--ge-surface-2); border: 1px solid var(--ge-border);
  border-radius: var(--ge-r-full); font-size: var(--ge-fs-xs); color: var(--ge-text-3);
}
.ge-step__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ge-text-3); flex-shrink: 0; }
.ge-step.is-active { border-color: var(--ge-brand-ring); color: var(--ge-brand); background: var(--ge-brand-soft); }
.ge-step.is-active .ge-step__dot { background: var(--ge-brand); animation: ge-pulse 1.6s ease-in-out infinite; }
.ge-step.is-done   { color: var(--ge-pos); border-color: rgba(52,211,153,.3); }
.ge-step.is-done .ge-step__dot { background: var(--ge-pos); }
.ge-step.is-fail   { color: var(--ge-neg); border-color: rgba(248,113,113,.35); }
.ge-step.is-fail .ge-step__dot { background: var(--ge-neg); }
@keyframes ge-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── 스켈레톤 ──────────────────────────────────────────────────────── */
.ge-skel {
  background: linear-gradient(90deg, var(--ge-surface-2) 25%, var(--ge-surface-3) 37%, var(--ge-surface-2) 63%);
  background-size: 400% 100%; animation: ge-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--ge-r-sm); min-height: 14px;
}
.ge-skel--line { height: 14px; margin: 6px 0; }
.ge-skel--title{ height: 24px; width: 45%; }
.ge-skel--tile { height: 82px; }
@keyframes ge-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── 빈 상태 / 오류 상태 ───────────────────────────────────────────── */
.ge-empty {
  text-align: center; padding: var(--ge-10) var(--ge-4); color: var(--ge-text-3);
  border: 1px dashed var(--ge-border); border-radius: var(--ge-r); background: var(--ge-surface-2);
}
.ge-empty i { font-size: 34px; opacity: .45; display: block; margin-bottom: var(--ge-3); }
.ge-empty h4 { color: var(--ge-text-2); font-size: var(--ge-fs-md); margin: 0 0 6px; font-weight: 650; }
.ge-empty p  { font-size: var(--ge-fs-sm); margin: 0 0 var(--ge-4); }

/* ── 알림 배너 ─────────────────────────────────────────────────────── */
.ge-note {
  display: flex; gap: var(--ge-3); padding: var(--ge-4);
  border-radius: var(--ge-r); border: 1px solid var(--ge-border);
  background: var(--ge-surface-2); font-size: var(--ge-fs-sm); color: var(--ge-text-2);
  align-items: flex-start;
}
.ge-note i { flex-shrink: 0; margin-top: 2px; }
.ge-note strong { color: var(--ge-text); display: block; margin-bottom: 3px; font-weight: 650; }
.ge-note--warn { background: var(--ge-warn-soft); border-color: rgba(251,191,36,.3); }
.ge-note--warn i, .ge-note--warn strong { color: var(--ge-warn); }
.ge-note--neg  { background: var(--ge-neg-soft); border-color: rgba(248,113,113,.32); }
.ge-note--neg i, .ge-note--neg strong { color: var(--ge-neg); }
.ge-note--pos  { background: var(--ge-pos-soft); border-color: rgba(52,211,153,.3); }
.ge-note--pos i, .ge-note--pos strong { color: var(--ge-pos); }
.ge-note--brand{ background: var(--ge-brand-soft); border-color: var(--ge-brand-ring); }
.ge-note--brand i, .ge-note--brand strong { color: var(--ge-brand); }

/* 데이터 신선도 */
.ge-fresh { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ge-fs-xs); color: var(--ge-text-3); }
.ge-fresh__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ge-pos); }
.ge-fresh.is-stale .ge-fresh__dot { background: var(--ge-warn); }
.ge-fresh.is-down  .ge-fresh__dot { background: var(--ge-neg); }
.ge-fresh.is-stale, .ge-fresh.is-down { color: var(--ge-warn); }

/* ── 미터 (비율 막대) ──────────────────────────────────────────────── */
.ge-meter { height: 8px; border-radius: var(--ge-r-full); background: var(--ge-surface-3); overflow: hidden; }
.ge-meter__fill { height: 100%; border-radius: inherit; background: var(--ge-brand);
                  transition: width var(--ge-t); }
.ge-meter__fill--pos  { background: var(--ge-pos); }
.ge-meter__fill--warn { background: var(--ge-warn); }
.ge-meter__fill--neg  { background: var(--ge-neg); }

/* ── 스파크라인 ────────────────────────────────────────────────────── */
.ge-spark { display: block; width: 100%; height: 56px; }
.ge-spark path { fill: none; stroke: var(--ge-brand); stroke-width: 2;
                 stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ge-spark .ge-spark__area { fill: var(--ge-brand-soft); stroke: none; }

/* ── 모달 ──────────────────────────────────────────────────────────── */
.ge-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.ge-modal.is-open { display: block; }
.ge-modal__bg { position: absolute; inset: 0; background: rgba(4,6,16,.72); backdrop-filter: blur(3px); }
.ge-modal__box {
  position: relative; margin: 6vh auto; max-width: 520px; width: calc(100% - 32px);
  background: var(--ge-surface); border: 1px solid var(--ge-border-strong);
  border-radius: var(--ge-r-lg); box-shadow: var(--ge-shadow-lg);
  max-height: 88vh; overflow-y: auto;
}
.ge-modal__head { display: flex; align-items: center; justify-content: space-between;
                  padding: var(--ge-5); border-bottom: 1px solid var(--ge-border); }
.ge-modal__title { font-size: var(--ge-fs-lg); font-weight: 700; margin: 0; }
.ge-modal__body { padding: var(--ge-5); }
.ge-modal__foot { padding: var(--ge-4) var(--ge-5); border-top: 1px solid var(--ge-border);
                  display: flex; gap: var(--ge-2); justify-content: flex-end; flex-wrap: wrap; }
.ge-modal__x { background: none; border: 0; color: var(--ge-text-3); font-size: 20px;
               cursor: pointer; width: 36px; height: 36px; border-radius: var(--ge-r-sm); }
.ge-modal__x:hover { background: var(--ge-surface-2); color: var(--ge-text); }
@media (max-width: 560px) {
  .ge-modal__box { margin: 0; width: 100%; max-width: none; min-height: 100%;
                   border-radius: 0; border: 0; max-height: none; }
  .ge-modal__foot { position: sticky; bottom: 0; background: var(--ge-surface); }
  .ge-modal__foot .ge-btn { flex: 1 1 auto; }
}

/* ── 지갑 선택 ─────────────────────────────────────────────────────── */
.ge-wallets { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--ge-2); }
@media (max-width: 420px) { .ge-wallets { grid-template-columns: minmax(0,1fr); } }
.ge-wallet {
  display: flex; align-items: center; gap: var(--ge-3); padding: var(--ge-3) var(--ge-4);
  border: 1px solid var(--ge-border); border-radius: var(--ge-r); background: var(--ge-surface-2);
  cursor: pointer; text-align: left; font-family: inherit; color: var(--ge-text);
  transition: border-color var(--ge-t-fast), background var(--ge-t-fast); min-height: 60px;
}
.ge-wallet:hover:not(:disabled) { border-color: var(--ge-brand-ring); background: var(--ge-surface-3); }
.ge-wallet:disabled { opacity: .55; cursor: not-allowed; }
.ge-wallet__name { font-weight: 650; font-size: var(--ge-fs-sm); }
.ge-wallet__note { font-size: var(--ge-fs-xs); color: var(--ge-text-3); }
.ge-wallet__icon { width: 32px; height: 32px; display: grid; place-items: center;
                   border-radius: var(--ge-r-sm); background: var(--ge-surface-3); flex-shrink: 0; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.ge-faq { border: 1px solid var(--ge-border); border-radius: var(--ge-r); overflow: hidden; }
.ge-faq__item + .ge-faq__item { border-top: 1px solid var(--ge-border); }
.ge-faq__q {
  width: 100%; text-align: left; padding: var(--ge-4) var(--ge-5); background: transparent;
  border: 0; color: var(--ge-text); font-size: var(--ge-fs-md); font-weight: 650;
  cursor: pointer; display: flex; justify-content: space-between; gap: var(--ge-3);
  font-family: inherit; min-height: 52px; align-items: center;
}
.ge-faq__q:hover { background: var(--ge-surface-2); }
.ge-faq__q:focus-visible { outline: 2px solid var(--ge-brand); outline-offset: -2px; }
.ge-faq__q i { transition: transform var(--ge-t); color: var(--ge-text-3); }
.ge-faq__q[aria-expanded="true"] i { transform: rotate(180deg); }
.ge-faq__a { padding: 0 var(--ge-5) var(--ge-5); color: var(--ge-text-2); font-size: var(--ge-fs-sm); }
.ge-faq__a[hidden] { display: none; }

/* ── 유틸 ──────────────────────────────────────────────────────────── */
.ge-mono { font-family: var(--ge-mono); }
.ge-muted { color: var(--ge-text-2); }
.ge-dim   { color: var(--ge-text-3); }
.ge-pos   { color: var(--ge-pos); }
.ge-neg   { color: var(--ge-neg); }
.ge-warn  { color: var(--ge-warn); }
.ge-brand { color: var(--ge-brand); }
.ge-xs { font-size: var(--ge-fs-xs); }
.ge-sm { font-size: var(--ge-fs-sm); }
.ge-lg { font-size: var(--ge-fs-lg); }
.ge-b  { font-weight: 700; }
.ge-center { text-align: center; }
.ge-right  { text-align: right; }
.ge-mt-2 { margin-top: var(--ge-2); } .ge-mt-4 { margin-top: var(--ge-4); }
.ge-mt-6 { margin-top: var(--ge-6); } .ge-mt-8 { margin-top: var(--ge-8); }
.ge-mb-2 { margin-bottom: var(--ge-2); } .ge-mb-4 { margin-bottom: var(--ge-4); }
.ge-mb-6 { margin-bottom: var(--ge-6); }
.ge-nowrap { white-space: nowrap; }
.ge-break  { overflow-wrap: anywhere; }
.ge-hidden { display: none !important; }

/* 스크린리더 전용 */
.ge-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 섹션 제목 */
.ge-h2 { font-size: var(--ge-fs-2xl); font-weight: 750; letter-spacing: -.015em; margin: 0 0 var(--ge-2); }
.ge-h3 { font-size: var(--ge-fs-lg); font-weight: 700; margin: 0 0 var(--ge-2); }
.ge-lead { color: var(--ge-text-2); font-size: var(--ge-fs-md); margin: 0 0 var(--ge-5); max-width: 68ch; }

/* 페이지 컨테이너 — 기존 .main-container 안에서 쓴다 */
.ge-page { display: flex; flex-direction: column; gap: var(--ge-6); padding-bottom: var(--ge-12); }