/* ==========================================================================
   wallet — 입출금 모듈 (이전 프로젝트에서 그대로 가져옴)

   모든 규칙을 #walletModal 안으로 가둔다.
   .btn · .chip 처럼 바깥 화면과 이름이 겹치는 클래스가 있어
   그대로 두면 카지노 버튼과 카테고리 칩이 덮인다.

   토큰도 여기서만 이전 값으로 되돌린다 (--r 은 바깥 12, 지갑 10).
   ========================================================================== */
#walletModal{
  --bg-2: #14162e;
  --card: #212545;
  --fs-3xl: 32px;
  --fs-base: 14px;
  --fs-lg: 17px;
  --fs-md: 15px;
  --fs-sm: 12.5px;
  --fs-xl: 20px;
  --fs-xs: 11px;
  /* ★ 금색은 <BONUS 지갑>을 가리키는 색이다. 브랜드 CTA(플래티넘)와 <일부러 다르다> —
     같게 만들면 회원이 보너스 지갑과 주요 버튼을 구별하지 못한다. */
  --gold: #ffc233;
  --gold-2: #ffd469;
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  --live: #ff3b5c;
  --lose: #ff5470;
  --overlay: rgba(8,9,20,.72);
  --panel: #1a1d38;
  --primary: #2A63C4;   /* WHALEY 사파이어 — 전역(#1E4FA8)보다 한 단계 밝다. 모달은 바닥이 밝아서다 */
  --primary-2: #9b83ff;
  --primary-dim: rgba(124,92,255,.16);
  --r: 10px;
  --r-full: 999px;
  --r-lg: 14px;
  --r-sm: 6px;
  --r-xl: 20px;
  --sh-2: 0 8px 24px rgba(0,0,0,.36);
  --sp-1: 4px;
  --sp-10: 40px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --t: 200ms cubic-bezier(.16,1,.3,1);
  --t-fast: 120ms cubic-bezier(.16,1,.3,1);
  --text: #ffffff;
  --text-2: #b9bde0;
  --text-3: #7e83aa;
  --text-4: #565b82;
  --warn: #ffa726;
  --win: #23d18b;
}

/* ==========================================================================
   탭 줄 — 자산 · 입금 · 출금 · 크립토 구매 · 캐쉬 · 보너스 전환
   6개라 좁은 폭에서는 가로로 밀어서 본다 (.tabs--scroll)
   ========================================================================== */
/* ★ 스카이시티 .wf-tabs — padding 4 · gap 4 · radius 8 · 바탕은 한 단 어두운 면 */
#walletModal .tabs{
  display:flex; gap:4px; padding:4px;
  background:var(--bg); border-radius:8px;
}
#walletModal .tabs--scroll{ overflow-x:auto; scrollbar-width:none; }
#walletModal .tabs--scroll::-webkit-scrollbar{ display:none; }
/* ★ 스카이시티 .wf-tab — 36 높이 · radius 6 · 14px/800 */
#walletModal .tabs button{
  flex:1 0 auto; white-space:nowrap;
  height:36px; padding:0 var(--sp-3); border-radius:6px;
  font-size:14px; font-weight:800; color:var(--text-3);
  transition:color var(--t-fast), background var(--t-fast);
}
#walletModal .tabs button:hover{ color:var(--text-2); }
#walletModal .tabs button.is-active{ background:var(--card); color:var(--text); }

/* ---- 좁은 화면 — 옆으로 밀지 않고 <두 줄로 접는다> (레드 2026-09-15 「짤림」) --
   ★★ 다섯 탭(자산·캐쉬·암호화폐·암호화폐 구매·포인트 전환)이 393px 에 안 선다.
      가로 스크롤로 두었더니 마지막 탭이 <반쯤 잘린 채로> 서서, 회원 눈에는
      「글자가 깨졌다」로 보였다 — 밀 수 있다는 것이 보이지 않기 때문이다.

   ★ 접으면 잘릴 자리가 아예 없다. 다섯이 3+2 로 선다.
   ⚠ flex:1 0 auto 를 풀어야 접힌다. 안 풀면 한 줄에 억지로 밀어 넣는다.
   ⚠ 이름은 <안 줄인다>. 「포인트 전환」을 「포인트」로 줄이면 무엇을 전환하는지
     사라진다 — 자리를 주는 편이 맞다. */
/* ⚠ 이 자리에서 .tabs 를 고쳐도 소용없다. 같은 파일 뒤쪽(모바일 압축 구역)에
     #walletModal .modal__body .tabs 가 있어 선택자가 더 강하고 순서도 뒤다 —
     실측으로 flex-wrap 이 안 먹었다. 고칠 일이 있으면 그쪽에서 고친다. */


/* ==========================================================================
   wpanel — 지갑 첫 화면 (스카이시티 .wpanel 을 그대로 옮겼다 · 2026-09-25)

   ★ 치수 · 간격 · 글자크기는 스카이시티 값을 <그대로> 쓴다. 색만 WHALEY 토큰이다
     (레드 2026-09-25 「옮겨야할 컴포넌트 페이지등은 완전하게 똑같이 옮기며
      컬러 토큰은 웨일리에 맞춰야한다」).

       스카이시티        →  WHALEY
       --gold            →  --primary   (브랜드 강조 — 사파이어)
       --text-on-gold    →  #fff        (사파이어 위 글자는 흰색이다)
       --gold-soft       →  --primary 12%
       --text-sub        →  --text-3
       --line-strong     →  --line-2
       --surface-2(호버) →  --card

   ⚠ var(--fs-sm) 과 var(--r) 은 <두 프로젝트에서 값이 다르다>
     (fs-sm: 스카이 14 · 지갑 12.5 / r: 스카이 8 · 지갑 10).
     토큰 이름을 그대로 옮기면 글자와 모서리가 달라진다 — 숫자를 박는다.

   ⚠ 아이콘은 스카이시티가 <svg> 를 바로 두지만 우리는 <Coin> 이 .coin 으로
     한 겹 싼다. 크기는 size 로 주므로(16 · 26) 여기서 다시 잡지 않는다.
   ========================================================================== */
/* ⚠ 줄높이를 <비율>로 되돌린다 (line-height:1.5 · 시안 body 값).
     WHALEY 는 body 에 24px 를 <고정>으로 물려 준다. 그대로 두면 12px 글자도
     24px 줄상자를 쓰게 되어, 값은 다 맞는데 <상자 키만 6px 씩 커진다> —
     실측 카드 74(시안 68) · 자산 줄 45(시안 43). 글자 크기가 아니라 줄상자가 범인이다. */
#walletModal .wpanel{ display:grid; gap:10px; line-height:1.5; }

/* ---- 위 카드 둘 — 사용 중 자산 · 포인트 ---- */
#walletModal .wp-top{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#walletModal .wp-card{
  display:grid; gap:2px; align-content:start; padding:10px 12px;
  border-radius:8px; background:var(--bg); border:1px solid var(--line);
  text-align:left;
}
#walletModal .wp-card.is-money{ border-color:color-mix(in srgb, var(--primary) 40%, var(--line)); }
#walletModal .wp-card__label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3); }
#walletModal .wp-card__value{ font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; }
#walletModal .wp-card.is-money .wp-card__value{ color:var(--text); }
/* ⚠ 시안에는 .is-point 를 잡는 규칙이 <없다> — 두 카드 중 어느 것인지 가리는 표시일 뿐이다.
     그래도 이름을 지우지 않는다(마크업을 시안과 같게 둔다). 대신 검사 도구가
     「CSS 에 없는 이름」으로 잡으므로, 기본값과 같은 한 줄을 여기 둔다. */
#walletModal .wp-card.is-point .wp-card__value{ color:var(--text); }
#walletModal .wp-card__sub{ font-size:12px; color:var(--text-3); }
#walletModal .wp-card__row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* 포인트 전환 화면 위 카드 — 무료스핀이 0개라 카드가 하나뿐이면 그 카드가 한 줄을 다 쓴다 (레드 2026-09-27 「지갑처럼」) */
#walletModal .wp-top > .wp-card:only-child{ grid-column:1 / -1; }
/* 포인트 전환 「받을 자산」 — 지갑 수만큼 한 줄에 채운다(다섯 칸 고정이면 여섯째가 혼자 떨어진다). 좁으면 알아서 접힌다 */
#walletModal .wf-coins.is-fit{ grid-template-columns:repeat(auto-fit, minmax(52px, 1fr)); }
/* 포인트 전환 — 받을 자산별 예상 수량표 (레드 2026-09-27 「환율 적용해서 각 통화 · 코인마다 표기」 · 「타일 아래 예상표」)
   PC 3칸 × 2줄, 휴대폰 2칸 × 3줄(3칸이면 BTC 같은 긴 숫자가 잘린다). 고른 자산 칸은 타일과 같은 파랑 */
#walletModal .wf-est{ display:grid; gap:6px; }
#walletModal .wf-est__h{ margin:0; font-size:12px; font-weight:700; color:var(--text-3); }
#walletModal .wf-est__grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; margin:0; }
/* ⚠ 코드 위 · 수량 아래로 쌓는다 — 옆으로 두면 「≈ 13.86666666」이 3칸 폭(141px)에서 잘렸다(9/27 실측) */
#walletModal .wf-est__grid > div{ display:grid; gap:1px; min-width:0; padding:6px 9px; line-height:1.35; border-radius:6px; border:1px solid var(--line); background:var(--card); }
#walletModal .wf-est__grid > div.is-on{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); }
#walletModal .wf-est__grid dt{ flex:none; font-size:11px; font-weight:800; color:var(--text-3); }
#walletModal .wf-est__grid dd{ margin:0; min-width:0; font-size:12px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* ★ 고른 자산 하나만 한 줄 (레드 2026-09-27) — 왼쪽 이름표 · 오른쪽 「USDT ≈ 3.05 - ₩4,160」.
     고른 표 칸과 같은 파랑 테두리로 타일과 이어 보이게 한다. 폭이 모자라면 금액 쪽이 다음 줄로 내려간다. */
#walletModal .wf-est__line{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px;
  padding:9px 12px; border-radius:8px;
  border:1px solid var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent);
}
#walletModal .wf-est__line > span{ font-size:12px; font-weight:700; color:var(--text-3); }
#walletModal .wf-est__line > b{ font-size:14px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; text-align:right; }
#walletModal .wf-est__line em{ font-style:normal; font-weight:700; color:var(--text-2); }
#walletModal .wf-est__rate{ margin:0; font-size:11px; line-height:1.5; color:var(--text-3); }
#walletModal .wp-card__btn{
  flex:none; height:26px; padding:0 12px; border-radius:var(--r-full);
  background:var(--primary); color:#fff; font-size:12px; font-weight:800;
  transition:background var(--t-fast);
}
#walletModal .wp-card__btn:hover{ background:var(--primary-2); }
#walletModal .wp-card__btn:disabled{ background:var(--card); color:var(--text-4); cursor:default; }

/* ---- 표시 통화 ---- */
#walletModal .wp-view{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 8px 8px 14px; border-radius:8px; border:1px solid var(--line);
}
#walletModal .wp-view > span{ font-size:14px; font-weight:700; color:var(--text-3); }
#walletModal .wp-seg{ display:flex; gap:2px; padding:3px; border-radius:8px; background:var(--bg); }
#walletModal .wp-seg button{
  height:26px; padding:0 10px; border-radius:6px;
  font-size:12px; font-weight:800; color:var(--text-3);
  transition:color var(--t-fast), background var(--t-fast);
}
#walletModal .wp-seg button:hover{ color:var(--text); }
#walletModal .wp-seg button.is-on{ background:var(--primary); color:#fff; }

/* ---- 사용할 자산 ---- */
#walletModal .wp-h{ font-size:14px; font-weight:700; color:var(--text-3); }
#walletModal .wp-assets{ display:grid; gap:6px; margin-top:-4px; }
#walletModal .wp-asset{
  display:grid; grid-template-columns:26px 1fr auto 18px; align-items:center; gap:10px; padding:8px 10px; text-align:left;
  border-radius:8px; background:var(--bg); border:1px solid transparent; transition:border-color var(--t-fast), background-color var(--t-fast);
}
#walletModal .wp-asset:hover{ background:var(--card); }
#walletModal .wp-asset.is-on{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, var(--bg)); }
#walletModal .wp-asset__name{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; }
#walletModal .wp-asset__name b{ font-weight:800; }
#walletModal .wp-asset__name small{ font-size:12px; color:var(--text-3); }
#walletModal .wp-asset__name em{
  font-style:normal; font-size:10px; font-weight:800; padding:1px 6px; border-radius:4px;
  background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary-2);
}
#walletModal .wp-asset__bal{ font-weight:800; font-variant-numeric:tabular-nums; }
#walletModal .wp-asset__bal b{ font-weight:800; }
#walletModal .wp-asset__bal b small, #walletModal .wp-asset__bal > small{ font-size:11px; font-weight:500; color:var(--text-3); }
#walletModal .wp-asset__radio{
  display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--line-2); color:transparent;
}
#walletModal .wp-asset__radio svg{ width:10px; height:10px; }
#walletModal .wp-asset.is-on .wp-asset__radio{ border-color:var(--primary); background:var(--primary); color:#fff; }
/* ★ 인증 안 한 갈래 — 동그라미 대신 자물쇠, 줄은 한 단 흐리게 (레드 2026-09-25).
     ⚠ pointer-events 를 끄지 않는다. 눌러야 인증 창이 열린다. */
#walletModal .wp-asset.is-locked{ opacity:.55; }
#walletModal .wp-asset.is-locked:hover{ opacity:.8; background:var(--card); }
#walletModal .wp-asset__lock{ display:grid; place-items:center; width:18px; height:18px; color:var(--text-4); }

/* ---- 아래 단추 ----
   ★ 들어오는 쪽만 면을 칠한다(.btn--primary). 나머지는 테두리만 — 시안 그대로다. */
#walletModal .wp-foot{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#walletModal .wp-foot.is-3{ grid-template-columns:repeat(3,1fr); }
#walletModal .wp-foot .btn{ justify-content:center; gap:6px; height:44px; padding:0 30px; border-radius:8px; font-size:16px; font-weight:700; }
#walletModal .wp-foot .btn svg{ width:16px; height:16px; }
/* ==========================================================================
   wf — 지갑 두 번째 화면 (캐쉬 입금 · 출금 / 암호화폐)
        스카이시티 .wf-* 를 그대로 옮겼다 · 2026-09-25

   ★ 치수 · 간격 · 글자크기는 시안 값 그대로. 색만 브랜드 토큰이다.
       --gold        → --primary        --text-on-gold → #fff
       --gold-soft   → --primary 12%    --text-sub     → --text-3
       --line-strong → --line-2         --surface      → --panel
       --surface-2   → --card           --surface-3    → --card 를 한 단 밝게

   ⚠ 시안 layout.css 는 같은 선택자를 <뒤에서 또> 덮는다(고치며 붙인 자국).
     여기에는 <마지막에 이긴 값>만 적는다 — 중간 값을 옮기면 화면이 달라진다.
     보기: .wf-steps 는 두 번 나오고 뒤엣것이 list-style:none 이다.

   ⚠ var(--fs-sm)=14 · var(--fs-lg)=16 · var(--r)=8 은 시안 값이다.
     우리 토큰은 각각 12.5 · 17 · 10 이라 <숫자를 박는다>.
   ========================================================================== */
#walletModal .wpanel.is-flow{ gap:12px; }

/* ---- 입금 / 출금 탭 ---- */
#walletModal .wf-tabs{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px;
  border-radius:8px; background:var(--bg);
}
#walletModal .wf-tab{
  height:36px; border-radius:6px; font-weight:800; color:var(--text-3);
  transition:background-color var(--t-fast), color var(--t-fast);
}
#walletModal .wf-tab:hover{ color:var(--text); }
#walletModal .wf-tab.is-on{ background:var(--primary); color:#fff; }

/* ---- 뼈대 ---- */
/* ⚠ 시안은 뒤에서 gap 을 8 로 다시 덮는다(layout.css 631). <마지막 값>이 8 이다 */
#walletModal .wf-body{ display:grid; gap:8px; }
#walletModal .wf-body, #walletModal .wf-box{ min-width:0; }
#walletModal .wf-box{
  display:grid; gap:8px; padding:12px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg);
}
#walletModal .wf-h{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; }
#walletModal .wf-h small{ margin-left:auto; font-weight:600; color:var(--text-3); }
#walletModal .wf-step{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:11px; font-weight:900;
  /* ⚠⚠ .wpanel 이 물려 주는 line-height:1.5 가 20px 칸에 30px 줄상자를 만든다 —
       place-items 는 <줄상자>를 가운데 두지 글자 획을 두지 않아, 숫자가 위로 붙어 보였다.
       줄상자를 글자 크기에 붙여야 그 둘이 같아진다. (2026-09-26 레드 「숫자도 수직가운데정렬」) */
  line-height:1; /* 숫자 */
}
#walletModal .wf-note,
#walletModal .wf-foot{ font-size:12px; line-height:1.6; color:var(--text-3); word-break:keep-all; }
#walletModal .wf-foot{ text-align:center; }
#walletModal .wf-warn{ display:flex; gap:6px; font-size:12px; line-height:1.5; color:var(--warn); word-break:keep-all; }
#walletModal .wf-warn svg{ flex:none; width:14px; height:14px; margin-top:2px; }
/* ★ 신청 단추는 48 이다. 시안 .btn--lg 높이(48)를 그대로 쓴다 —
     우리 .btn--lg 는 44 라 그대로 두면 낮아 보인다. 첫 화면 아래 단추만 44 다(.wp-foot 이 덮는다). */
/* ⚠ 선택자를 <한 단 더> 준다(.wpanel 을 앞에 둔다).
     같은 파일 뒤쪽 #walletModal .btn--lg 가 높이 · 글자크기를 들고 있어,
     칸수가 같으면 <뒤엣것이 이긴다> — 실측으로 15px/800 이 그대로 나왔다. */
#walletModal .wpanel .wf-submit{ width:100%; height:48px; justify-content:center; font-size:16px; font-weight:700; }
/* ★ 지갑 안 단추 모서리는 8 이다(시안 --r). 우리 --r 은 10 이고 .btn--lg 는 더 둥글다 */
/* ★ 지갑 안 맨 단추는 <면이 비고 테두리만> 있다 (시안 .btn).
     우리 .btn 은 바깥 화면 규칙 때문에 면이 차 있어, 나란히 두면 주요 단추와 구별이 안 된다.
   ★ 모서리도 8 이다(시안 --r). 우리 --r 은 10 이고 .btn--lg 는 더 둥글다. */
#walletModal .wpanel .btn{
  border-radius:8px; background:transparent; border:1px solid var(--line-2); color:var(--text);
}
#walletModal .wpanel .btn:hover{ border-color:var(--primary); color:var(--primary-2); background:transparent; }
/* 면을 칠하는 갈래는 그대로 둔다 — 면이 없으면 주요 단추가 안 읽힌다 */
#walletModal .wpanel .btn--primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
#walletModal .wpanel .btn--primary:hover{ background:var(--primary-2); border-color:var(--primary-2); color:#fff; }
/* ⚠ 지갑 안에서는 방향색(.btn--in · .btn--out)을 <쓰지 않는다> (레드 2026-09-25).
     시안은 들어오는 쪽만 면을 칠하고 나머지는 테두리만 둔다 — 둘 다 칠하면 줄이 신호등이 된다.
     바깥 화면(헤더 지갑 메뉴 등)의 방향색 규칙은 그대로다. */
/* ★ 빠른 금액은 <세 칸>이다 (시안 --cols:3). 통화 고르개는 통화 수만큼이라 따로 준다 */
#walletModal .wf-quick--amt{ --cols:3; }

/* ---- 보너스 선택 — 라벨 + 셀렉트처럼 생긴 단추 ----
   ★ 시안은 <네이티브 select 가 아니다.> 라벨 80px 과 값 1fr 이 한 줄로 서고,
     값 자리가 셀렉트처럼 생긴 단추다(값 · 꼬리표 · 화살표 셋 칸).
     누르면 아래에 목록이 <겹쳐> 내려온다 — 창 길이는 안 늘어난다. */
#walletModal .wf-drop{ display:grid; gap:6px; position:relative; }
#walletModal .wf-drop__row{ display:grid; grid-template-columns:80px 1fr; align-items:center; gap:12px; }
#walletModal .wf-drop__label{ font-size:14px; font-weight:800; }
#walletModal .wf-drop__btn{
  display:grid; grid-template-columns:1fr auto 16px; align-items:center; gap:8px;
  height:40px; padding:0 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); text-align:left;
}
/* ★★ 고른 값은 <한 줄만> 보인다 (레드 2026-09-26 「선택한건 타이틀만보여주고 칸넘어가면 연하게」).
     긴 보너스 이름이 40px 칸 안에서 세 줄로 접혀 아래 설명 줄을 덮었다.
   ★ 잘린 자리는 <끝을 흐리게> 해서 더 있다는 것을 알린다 — 점 세 개보다 조용하다. */
#walletModal .wf-drop__btn b{
  font-size:14px; text-align:left; min-width:0;
  white-space:nowrap; overflow:hidden;
  /* ⚠ 왼쪽 정렬이라 잘리는 쪽은 <오른쪽 끝>이다. 마스크 방향도 그쪽이어야 한다 */
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
/* ⚠ 잘릴 만큼 길지 않으면 흐림도 없어야 한다 — 짧은 값의 첫 글자가 괜히 사라진다.
     칸을 넘으면 흐려지며, 아닐 때는 mask 를 끈다(:not 으로는 못 가려 JS 없이 이렇게 둔다). */
#walletModal .wf-drop__btn b:hover{ -webkit-mask-image:none; mask-image:none; }
#walletModal .wf-drop__btn small{ font-size:11px; color:var(--primary-2); }
#walletModal .wf-drop__btn svg{ width:16px; height:16px; color:var(--text-3); transition:transform var(--t-fast); }
#walletModal .wf-drop.is-open .wf-drop__btn{ border-color:var(--primary); }
#walletModal .wf-drop.is-open .wf-drop__btn svg{ transform:rotate(180deg); }

#walletModal .wf-bonus{
  position:absolute; z-index:20; top:calc(100% + 4px); left:92px; right:0; margin:0;
  display:grid; gap:4px; max-height:300px; overflow-y:auto; padding:6px;
  border-radius:8px; border:1px solid var(--line-2);
  background:var(--panel); box-shadow:0 14px 32px rgba(0,0,0,.55);
}
#walletModal .wf-bonus__opt{
  display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; border:1px solid var(--line); text-align:left;
  background:var(--bg);
}
#walletModal .wf-bonus__opt i{ width:14px; height:14px; border-radius:50%; border:2px solid var(--line-2); }
/* ★★ <보너스 목록만> 이름을 다 쓰고 꼬리표를 아랫줄로 (레드 2026-09-26).
     한 줄에 나란히 두었더니 긴 이름이 좁은 칸에서 네 줄로 접혔다 —
     「슬롯 무한충전 보너스 10% 지급 이벤트」가 실제로 그랬다.
   ★ 왼쪽 정렬이다. 가운데로 몰리면 목록의 첫 글자가 줄마다 어긋나 읽기 어렵다.
   ⚠ 네트워크 고르개(같은 .wf-bonus__opt)는 <한 줄 · 오른쪽>이 시안이다 —
     「Tron [TRC20]」은 짧아 접힐 일이 없다. 그래서 갈래를 따로 둔다. */
#walletModal .wf-bonus--wrap .wf-bonus__opt{ grid-template-columns:16px 1fr; align-items:start; row-gap:2px; }
#walletModal .wf-bonus--wrap .wf-bonus__opt i{ margin-top:3px; }
#walletModal .wf-bonus--wrap .wf-bonus__opt b{ text-align:left; line-height:1.4; word-break:keep-all; }
#walletModal .wf-bonus--wrap .wf-bonus__opt small{ grid-column:2; text-align:left; }
#walletModal .wf-bonus__opt b{ font-size:14px; text-align:right; }
#walletModal .wf-bonus__opt small{ font-size:11px; color:var(--primary-2); }
#walletModal .wf-bonus__opt:hover{ border-color:var(--line-2); }
#walletModal .wf-bonus__opt.is-on{
  border-color:var(--primary); background:color-mix(in srgb, var(--primary) 18%, var(--bg));
}
#walletModal .wf-bonus__opt.is-on i{
  border-color:var(--primary); background:radial-gradient(circle, var(--primary) 45%, transparent 50%);
}

/* ---- 입금 계좌 안내 ---- */
#walletModal .wf-steps{
  display:grid; gap:8px; list-style:none; padding-left:0; counter-reset:wfs;
  font-size:12px; line-height:1.6; color:var(--text-3); word-break:keep-all;
}
#walletModal .wf-steps li{ display:flex; gap:4px; line-height:18px; counter-increment:wfs; }
#walletModal .wf-steps li::before{ content:counter(wfs) "."; flex:none; width:14px; }
#walletModal .wf-steps li span{ flex:1; min-width:0; }
#walletModal .wf-half{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:4px; }
#walletModal .wf-half .btn{ height:36px; font-size:12px; }
#walletModal .wf-acct{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px;
  padding:10px 12px; border-radius:8px; background:var(--card);
}
#walletModal .wf-acct span{ font-size:12px; color:var(--text-3); }
#walletModal .wf-acct b{ grid-column:1; font-size:16px; font-weight:900; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
#walletModal .wf-acct .btn{ grid-column:2; grid-row:1 / 3; }
/* ★ 긴 값이 칸을 밀어내지 않게 (레드 2026-10-01 · suii 「오버되어 버려서」).
     1fr 만 두면 칸이 <글자 폭만큼은> 차지해서, 띄어쓰기 없는 주소가 「복사」 단추를 밖으로 밀었다.
     minmax(0,1fr) 로 줄일 수 있게 하고 — 계좌 글자는 칸 안에서 줄을 바꾸고,
     주소(링크)는 한 줄로 두되 조금 작게 · 끝을 흐린다(배당 단추 팀 이름과 같은 처리). */
#walletModal .wf-acct{ grid-template-columns:minmax(0,1fr) auto; }
#walletModal .wf-acct b{ min-width:0; overflow-wrap:anywhere; }
#walletModal .wf-acct__link{
  grid-column:1; min-width:0; overflow:hidden; white-space:nowrap;
  font-size:14px; font-weight:800; color:var(--text); text-decoration:underline; text-underline-offset:3px;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
}
#walletModal .wf-acct__link:hover{ color:var(--primary); }
/* ★ 세로 가운데 (레드 2026-10-01 「높이정렬 가운데로」) — 「복사」 단추가 1~2행을 걸치는데
     값은 1행에만 있어 위로 붙어 보였다. 값도 두 행을 걸치고 가운데에 둔다. */
#walletModal .wf-acct__link,
#walletModal .wf-acct > b{ grid-row:1 / 3; align-self:center; }

/* ---- 금액 ---- */
#walletModal .wf-amount{
  /* ★ 높이는 주소 칸(.wf-input 40px)과 같다 (레드 2026-09-27 「아래 인풋 높이 위에 인풋에 맞추자」).
       48px 이던 때는 한 화면에 두 칸이 서로 다른 높이로 붙어 보였다. */
  display:flex; align-items:center; gap:10px; height:40px; padding:0 14px;
  border-radius:8px; border:1px solid var(--line); background:var(--panel);
}
#walletModal .wf-amount:focus-within{ border-color:var(--primary); }
#walletModal .wf-amount b{ color:var(--text-3); font-weight:900; }
#walletModal .wf-amount input{
  flex:1 1 0; width:0; min-width:0; border:0; background:none; color:var(--text);
  font-size:18px; font-weight:800; text-align:right; outline:none;
}
#walletModal .wf-amount input::placeholder{ font-size:15px; font-weight:700; color:var(--text-3); }
#walletModal .wf-amount__hint{ flex:none; font-size:11px; color:var(--text-3); white-space:nowrap; }
#walletModal .wf-amount__hint em{ font-style:normal; font-weight:800; color:var(--text); }
#walletModal .wf-quick{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:6px; }
#walletModal .wf-quick button{
  flex:1 1 0; min-width:0; height:32px; padding:0 4px; white-space:nowrap;
  border-radius:6px; background:var(--card); font-size:12px; font-weight:800; color:var(--text-3);
}
#walletModal .wf-quick button:hover{ color:var(--text); background:color-mix(in srgb, #ffffff 8%, var(--card)); }
#walletModal .wf-quick.is-pct button{ color:var(--primary-2); }

/* ---- 보유 금액 · 계좌 ---- */
#walletModal .wf-have{ grid-template-columns:1fr auto; align-items:center; }
#walletModal .wf-have span{ color:var(--text-3); font-size:14px; }
#walletModal .wf-have b{ font-size:16px; font-weight:900; color:var(--text); }
#walletModal .wf-bank{ display:grid; padding:4px 12px; border-radius:8px; background:var(--card); }
#walletModal .wf-bank div{ display:grid; grid-template-columns:64px 1fr; align-items:center; height:34px; }
#walletModal .wf-bank div + div{ border-top:1px solid var(--line); }
#walletModal .wf-bank dt{ font-size:12px; color:var(--text-3); }
#walletModal .wf-bank dd{ font-size:14px; font-weight:800; text-align:right; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
#walletModal .wf-bank div.is-2{ grid-template-columns:48px 1fr 1px 56px 1fr; column-gap:12px; }
#walletModal .wf-bank div.is-2::before{ content:""; grid-column:3; grid-row:1; width:1px; height:16px; background:var(--line-2); }
#walletModal .wf-bank div.is-2 dt:first-of-type{ grid-column:1; grid-row:1; }
#walletModal .wf-bank div.is-2 dd:first-of-type{ grid-column:2; grid-row:1; }
#walletModal .wf-bank div.is-2 dt:last-of-type{ grid-column:4; grid-row:1; }
#walletModal .wf-bank div.is-2 dd:last-of-type{ grid-column:5; grid-row:1; }


/* ---- 암호화폐 세 화면 (전송 · 출금 · 카드결제) — 시안 .wf-* 이어서 ----
   ★ 값은 시안 그대로, 색만 브랜드 토큰이다. 앞 블록과 같은 규칙이다. */
#walletModal .wf-hrow{ display:flex; align-items:center; justify-content:space-between; }
#walletModal .wf-arrows{ display:flex; gap:4px; }
#walletModal .wf-arrows button{
  display:grid; place-items:center; width:26px; height:26px;
  border-radius:6px; border:1px solid var(--line); color:var(--text-3);
}
#walletModal .wf-arrows button:hover{ border-color:var(--primary); color:var(--primary-2); }
#walletModal .wf-arrows svg{ width:14px; height:14px; }

/* 코인 고르개 — 다섯 칸 */
#walletModal .wf-coins{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
#walletModal .wf-coin{
  display:grid; justify-items:center; gap:4px; padding:8px 0;
  border-radius:8px; border:1px solid var(--line); font-size:12px; font-weight:800;
}
#walletModal .wf-coin .coin{ width:26px !important; height:26px !important; }
#walletModal .wf-coin:hover{ background:var(--card); }
#walletModal .wf-coin.is-on{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); }
/* ⚠ 한 줄형(.is-row)은 <걷었다> (레드 2026-09-26 「전송쪽이랑 통일하자」).
     세 화면의 코인 칸이 한 모양이어야 한다 — 좁은 폭에서 다섯이 눌리기도 했다. */

/* 네트워크 — 셀렉트 안쪽에 쓰는 줄 (코인마다 목록이 다르다) */
#walletModal .wf-nets{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
#walletModal .wf-net{ display:grid; gap:1px; padding:8px 12px; border-radius:8px; border:1px solid var(--line); text-align:left; }
#walletModal .wf-net small{ font-size:11px; color:var(--text-3); }
#walletModal .wf-net.is-on{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); }
#walletModal .wf-fixnet{ font-size:11px; color:var(--text-3); }
#walletModal .wf-fixnet b{ margin:0 2px; color:var(--primary-2); font-weight:800; }

/* 번호 동그라미가 셀렉트와 한 줄에 서는 모양 */
#walletModal .wf-drop__row.is-step{ grid-template-columns:auto 1fr; align-items:start; }
#walletModal .wf-drop__row.is-step > .wf-h{ height:40px; }
#walletModal .wf-drop__col{ position:relative; display:grid; gap:6px; min-width:0; }
#walletModal .wf-drop__col .wf-bonus{ left:0; }
/* 자산 고르개 — 아이콘 · 이름 · 금액 */
#walletModal .wf-opt__ico{ width:18px !important; height:18px !important; }
#walletModal .wf-drop__btn.is-asset{ grid-template-columns:18px auto 1fr 16px; }
/* ★ 코인 이름은 <전부> 보인다 (레드 2026-09-27 「코인 셀렉트 글자 전체표기」).
     위 공통 규칙의 끝 흐림이 짧은 이름(「테더」)의 끝 글자까지 지웠다. 코인 이름은 짧아 자를 일이 없다.
   ⚠ 대신 넘치면 오른쪽 금액이 줄어든다 — 금액 쪽에 말줄임을 준다. */
#walletModal .wf-drop__btn.is-asset b{
  text-align:left; overflow:visible;
  -webkit-mask-image:none; mask-image:none;
}
#walletModal .wf-drop__btn.is-asset em{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#walletModal .wf-drop__btn em,
#walletModal .wf-bonus__opt em{
  font-style:normal; font-size:14px; font-weight:800; color:var(--text);
  text-align:right; font-variant-numeric:tabular-nums;
}
#walletModal .wf-bonus__opt.is-asset{ grid-template-columns:16px 18px auto 1fr; padding:6px 10px; }
#walletModal .wf-bonus__opt.is-asset b{ text-align:left; }
#walletModal .wf-bonus__opt.is-asset b small{ margin-left:4px; color:var(--text-3); }

/* 주소 · QR */
#walletModal .wf-addr{ display:grid; grid-template-columns:112px 1fr; gap:28px; align-items:center; padding-top:4px; }
#walletModal .wf-qr{ width:112px; height:112px; border-radius:8px; background:#fff; }
#walletModal .wf-kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:12px; align-self:center; row-gap:10px; }
#walletModal .wf-kv dt{ color:var(--text-3); }
#walletModal .wf-kv dd{ margin:0; text-align:right; font-weight:700; }
#walletModal .wf-addr__line{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
  padding:6px 6px 6px 12px; border-radius:8px; background:var(--card);
}
#walletModal .wf-addr__line code{ font-size:12px; letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* 주소 유효시간 */
#walletModal .wf-timer{ display:flex; align-items:center; gap:8px; }
#walletModal .wf-timer i{ display:block; width:120px; height:6px; border-radius:3px; background:var(--card); overflow:hidden; }
#walletModal .wf-timer b{ display:block; height:100%; border-radius:3px; background:#2fd39a; transform-origin:left; transition:transform 1s linear; }
#walletModal .wf-timer em{ font-style:normal; font-size:12px; font-weight:800; color:#2fd39a; font-variant-numeric:tabular-nums; }

/* 직접 입력 체크 */
#walletModal .wf-check{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3); }
#walletModal .wf-check i{ display:grid; place-items:center; width:16px; height:16px; border-radius:4px; border:1.5px solid var(--line-2); }
#walletModal .wf-check svg{ width:12px; height:12px; opacity:0; }
#walletModal .wf-check[aria-checked="true"]{ color:var(--text); }
#walletModal .wf-check[aria-checked="true"] i{ border-color:var(--primary); background:var(--primary); color:#fff; }
#walletModal .wf-check[aria-checked="true"] svg{ opacity:1; }

/* 입력칸 · 계산 줄 */
#walletModal .wf-input{
  width:100%; height:40px; padding:0 12px; border-radius:8px;
  font-size:12px; color:var(--text); background:var(--panel); border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
#walletModal .wf-input:focus{ border-color:var(--primary); outline:none; }
#walletModal .wf-input[readonly]{ color:var(--text-3); background:var(--card); border-color:transparent; }
#walletModal .wf-calc{ display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--text-3); font-variant-numeric:tabular-nums; }
#walletModal .wf-calc i{ font-style:normal; color:var(--primary-2); font-weight:900; }
#walletModal .wf-recv{ display:flex; align-items:baseline; gap:6px; margin:0; font-size:12px; color:var(--text-3); }
#walletModal .wf-recv b{ color:var(--text); font-size:14px; }
#walletModal .wf-recv small{ margin-left:auto; font-size:11px; }

/* 카드결제 — 수량 ⇄ 금액 */
#walletModal .wf-buy{ display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); align-items:center; gap:6px; }
#walletModal .wf-buy__f{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px;
  height:48px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel); cursor:text;
}
#walletModal .wf-buy__f:focus-within{ border-color:var(--primary); }
#walletModal .wf-buy__f span{ font-size:11px; color:var(--text-3); }
#walletModal .wf-buy__f input{
  width:100%; min-width:0; border:0; background:none; color:var(--text);
  font-size:16px; font-weight:800; text-align:right; outline:none; font-variant-numeric:tabular-nums;
}
#walletModal .wf-buy__f b{ font-size:11px; font-weight:800; color:var(--text-3); }
#walletModal .wf-buy__eq{ display:grid; place-items:center; color:var(--text-3); }
#walletModal .wf-buy__eq svg{ width:18px; height:18px; }

/* 결제 수단 — 흰 카드 넷 */
#walletModal .wf-pays{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
#walletModal .wf-pay{
  position:relative; display:grid; place-items:center; height:48px; padding:0 10px;
  border-radius:8px; background:#fff; border:2px solid transparent;
  transition:border-color var(--t-fast), transform var(--t-fast);
}
#walletModal .wf-pay:hover{ transform:translateY(-1px); }
#walletModal .wf-pay img{ display:block; max-width:100%; height:20px; object-fit:contain; }
/* ★ 로고마다 눈에 보이는 크기가 달라 높이를 따로 준다 (시안 그대로) */
#walletModal .wf-pay img.is-apay{ height:22px; }
#walletModal .wf-pay img.is-applepay{ height:22px; }
#walletModal .wf-pay img.is-visa{ height:16px; }
#walletModal .wf-pay img.is-amex{ height:32px; }
#walletModal .wf-pay.is-on{ border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
#walletModal .wf-pay.is-on::after{
  content:""; position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%;
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat;
}
#walletModal .wf-pays .wf-pay,
#walletModal .wf-pays .wf-pay.is-on,
#walletModal .wf-pays .wf-pay:hover{ background:#fff; color:#000; }

/* 휴대폰 — 라벨과 셀렉트가 두 줄로 선다. 80px 라벨이 좁은 폭에서 값을 눌러서다 */
@media (max-width:480px){
  /* ★ 좁은 폭에서는 코인 칸을 <세로형>으로 푼다 (레드 2026-09-26 「모바일시안다르네」).
       시안 모바일이 아이콘 위 · 글자 아래다. 가로형(is-row)을 그대로 두면
       다섯 칸에 아이콘과 글자가 나란히 들어가 눌린다 — 글자를 줄이는 것보다 이쪽이 시안이다. */
  #walletModal .wf-coins{ gap:4px; }
  /* 포인트 전환 「받을 자산」 — 휴대폰에서도 여섯이 한 줄에 서게 칸 최소폭을 줄인다(52 면 여섯째가 떨어진다) */
  #walletModal .wf-coins.is-fit{ grid-template-columns:repeat(auto-fit, minmax(40px, 1fr)); }
  #walletModal .wf-est__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #walletModal .wf-drop__row{ grid-template-columns:1fr; gap:6px; }
  #walletModal .wf-bonus{ left:0; }
}


/* 휴대폰 · 태블릿 — 「표시 통화」 이름은 한 줄, 통화 단추가 남은 폭을 나눠 쓴다
   (스카이시티 layout.css @media (max-width:1023px) 그대로) */
@media (max-width:1023px){
  #walletModal .wp-view{ gap:8px; padding-left:12px; }
  #walletModal .wp-view > span, #walletModal .wp-view > b, #walletModal .wp-view .wp-h{ white-space:nowrap; flex:none; }
  #walletModal .wp-seg{ min-width:0; }
  #walletModal .wp-seg button{ padding-inline:8px; }
}

/* 활성 자산 안내 */
#walletModal .activehint{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r); background:var(--primary-dim);
  border:1px solid rgba(124,92,255,.28);
  font-size:var(--fs-sm); line-height:1.55;
}

/* 입금 코인 선택 */
/*
   ⚠ 일곱 칸 고정이었다 (레드 2026-09-20 「모바일 글티어나간다」).
     모바일 규칙은 640px 아래에만 걸려 있어, 그 위 좁은 폭(모달이 700px 남짓일 때)에서는
     일곱 칸이 그대로 눌려 「THB」가 상자 밖으로 나갔다.
     칸 수를 폭이 정하게 하면 통화가 몇 개든 접힌다.
*/
#walletModal .coinpick{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(58px, 1fr)); gap:6px;
}
#walletModal .coinpick button{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:var(--sp-2) 4px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line);
  font-size:var(--fs-xs); font-weight:800;
  transition:border-color var(--t-fast), background var(--t-fast);
}
#walletModal .coinpick button:hover{ background:var(--card); }
#walletModal .coinpick button.is-active{ border-color:var(--primary); background:var(--primary-dim); }

/*
  결제 수단 — 코인 칸과 <같은 생김새>를 쓰되 칸 수만 다르다.
  코인은 일곱, 결제 수단은 다섯이다. 일곱 칸에 다섯을 넣으면 오른쪽 두 칸이 빈다.
*/
#walletModal .paypick{ grid-template-columns:repeat(5,1fr); }
/*
  ★ 마크에 <그 브랜드 색>을 준다 (레드 2026-09-14). 칸이 --c 로 실어 준다.

  ⚠ 안 고른 것은 <흐리게> 둔다. 다섯이 다 제 색으로 떠 있으면 줄이 시끄럽고,
    지금 무엇을 골랐는지가 안 읽힌다. 고른 것만 제 색으로 살아난다.
*/
/* ★★ 흐리게 두던 것을 <걷었다> (레드 2026-09-15 「전체적으로 한줄 색넣어줘」).
     안 고른 것을 .45 로 눌러 두니 다섯이 전부 회색 덩어리로 보였다 —
     무슨 수단이 있는지가 한눈에 안 들어왔다. 고른 것은 칸의 테두리와
     바탕(.is-active)이 이미 말하고 있어 마크까지 죽일 까닭이 없다. */
#walletModal .paypick button i{
  line-height:1;
  color:var(--c, var(--text-2));
}
/* ⚠ 구글은 svg 다. 글자색을 안 따르니 자리만 맞춘다 */
#walletModal .paypick button .auth-gmark{ display:block; }
#walletModal .paypick button:hover i{ opacity:.75; }
#walletModal .paypick button.is-active i{ opacity:1; }
/* 고른 칸의 테두리도 그 색을 띤다 — 마크와 테두리가 같은 것을 가리킨다 */
#walletModal .paypick button.is-active{
  border-color:color-mix(in srgb, var(--c, var(--primary)) 65%, transparent);
  background:color-mix(in srgb, var(--c, var(--primary)) 12%, var(--panel));
}


/* 입금 주소
   ★ QR 과 옆 칸의 <위·아래 끝을 맞춘다> (레드 2026-09-11 「QR코드랑 옆에 내용이랑 세로안맞는것」).
     예전엔 QR(132)은 위에 붙고 옆 칸(안내·주소·「주소」 라벨·다시 발급)이 더 길어 아래로 삐져나왔다.
     「주소」 라벨을 빼고(레드 「주소 << 이런건 삭제」) QR 을 148 로 키운 뒤(옆 칸 최소 높이 148 실측), 옆 칸을 QR 높이로 늘여
     안내는 위 끝·다시 발급은 아래 끝에 붙인다(space-between). 옆 칸이 더 길 때(메모 코인)는 QR 이 위에 선다. */
#walletModal .depaddr{ display:grid; grid-template-columns:148px 1fr; gap:var(--sp-3); align-items:stretch; }
#walletModal .depaddr__body{
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-2); min-width:0;
}

/* 주소 유효시간 */
#walletModal .expiry{ display:flex; flex-direction:column; gap:6px; }
#walletModal .expiry__top{ display:flex; align-items:flex-start; gap:var(--sp-2); }
#walletModal .expiry__msg{
  flex:1; min-width:0; font-size:var(--fs-xs); line-height:1.45; color:var(--text-3);
  word-break:keep-all;   /* 「안내용입니/다.」처럼 글자 중간에서 끊기지 않게 — 낱말 단위로 */
}
/* ★ 시계 칸은 <절대 줄바꿈되지 않는다>. 여기가 늘어나면 옆 안내 문구가 눌린다 */
#walletModal .expiry__time{
  white-space:nowrap;
  flex:none; display:inline-flex; align-items:center; gap:4px;
  font-size:var(--fs-sm); color:var(--text-2);
}
#walletModal .expiry__time b{ font-weight:800; font-variant-numeric:tabular-nums; }
#walletModal .expiry__bar{
  height:4px; border-radius:var(--r-full); background:var(--panel); overflow:hidden;
}
#walletModal .expiry__bar i{
  display:block; height:100%; width:100%; border-radius:var(--r-full);
  background:var(--win); transition:width 1s linear;
}

/* 주소 한 줄 */
#walletModal .addrline{ display:flex; flex-direction:column; gap:4px; min-width:0; }
#walletModal .addrline__label{ font-size:var(--fs-xs); color:var(--text-4); }
#walletModal .addrline__row{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line);
}
#walletModal .addrline__row code{
  flex:1; min-width:0; font-size:var(--fs-xs); line-height:1.45;
  font-family:"SF Mono",Menlo,monospace; word-break:break-all;
}
#walletModal .addrline__copy{
  flex:none; width:32px; height:32px; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--text-3);
  transition:color var(--t-fast), background var(--t-fast);
}
#walletModal .addrline__copy:hover{ background:var(--card); color:var(--text); }
#walletModal .addrline__copy.is-done{ color:var(--win); }
#walletModal .qrbox{
  width:148px; height:148px; margin:0;
  border-radius:var(--r); background:#fff; display:grid; place-items:center;
  color:#0e1023; font-size:var(--fs-xs); font-weight:800;
}
/*
  ★ QR 은 <정사각형>이어야 한다.

  img 에 width/height 속성만 두면 max-width:100% 가 <가로만> 줄여서
  세로로 늘어난다. 실제로 132×200 으로 눌려서 떴다(2026-09-10).
  QR 은 눌리면 읽히지 않을 수도 있다 — 모양이 취향 문제가 아니다.
*/
#walletModal .qrbox img{
  width:100%; height:100%; object-fit:contain; display:block;
  border-radius:inherit;
}

/* 캐쉬 트랙 구분 배너 */
#walletModal .trackbar{
  display:flex; gap:var(--sp-2); padding:var(--sp-1);
  background:var(--bg-2); border-radius:var(--r); margin-bottom:var(--sp-4);
}
/* ★ 서브탭마다 테두리 (레드 2026-09-11 「입금하기 출금하기 탭 테두리라도」) — 바탕이 모달과 거의 같아
     안 고른 쪽이 글자만 떠 있어 누르는 곳으로 안 읽혔다. 고른 쪽은 사파이어 테두리로 더 선다.
     크립토(입금하기/출금하기)·캐쉬(충전/출금)가 같은 부품이라 둘 다 바뀐다. */
#walletModal .trackbar button{
  flex:1; height:38px; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:800; color:var(--text-3);
  border:1px solid var(--line);
  transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
#walletModal .trackbar button:hover{ color:var(--text-2); border-color:var(--line-2); }
#walletModal .trackbar button.is-active{ background:var(--card); color:var(--text); border-color:var(--primary); }

/* ---- 돈이 <어느 쪽으로> 가는가 (레드 2026-09-15) ------------------------
   ★ 들어오는 돈이 초록, 나가는 돈이 빨강. 글자를 읽기 전에 손이 먼저 안다.

   ⚠ 앞서 헤더 지갑 메뉴의 단추에만 색을 줬는데, 레드가 가리킨 것은 <이쪽>
     — 지갑 창 안의 「입금하기 / 출금하기」 탭이다. 같은 일을 하는 자리가
     둘이라 한쪽만 칠하면 회원은 두 화면을 다른 것으로 읽는다.

   ⚠ .trackbar 는 이 창에서 <입금·출금 두 곳에만> 쓰인다(캐쉬·크립토).
     첫 칸이 언제나 들어오는 쪽, 둘째 칸이 나가는 쪽이다 — 그래서 차례로 고른다.
   ⚠ 고른 쪽은 <더 진하게>. 안 고른 쪽도 색은 띠되 테두리만 옅게 둔다 —
     둘 다 꽉 차면 어느 쪽에 있는지가 안 읽힌다. */
#walletModal .trackbar button:first-child{
  color:var(--success);
  border-color:color-mix(in srgb, var(--success) 45%, transparent);
}
#walletModal .trackbar button:first-child:hover{ border-color:var(--success); }
#walletModal .trackbar button:first-child.is-active{
  color:var(--success);
  border-color:var(--success);
  background:color-mix(in srgb, var(--success) 16%, transparent);
}
#walletModal .trackbar button:last-child{
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 45%, transparent);
}
#walletModal .trackbar button:last-child:hover{ border-color:var(--danger); }
#walletModal .trackbar button:last-child.is-active{
  color:var(--danger);
  border-color:var(--danger);
  background:color-mix(in srgb, var(--danger) 16%, transparent);
}

/* 보너스 전환 */
#walletModal .convert__amount{
  text-align:center; padding:var(--sp-5) 0;
}
#walletModal .convert__amount b{ font-size:var(--fs-3xl); font-weight:900; color:var(--gold); }
#walletModal .convert__amount span{ display:block; font-size:var(--fs-sm); color:var(--text-3); margin-top:var(--sp-1); }
/*
  무료스핀 줄 (레드 2026-09-21). 바로 위 전환 가능액과 <같은 자리에 나란히> 둔다.
  ⚠ 금액이 아니므로 금빛을 쓰지 않는다 — 전환할 수 있는 돈과 섞이면 안 된다.
  ⚠ 위 줄보다 작게. 주인공은 전환 가능액이고 이쪽은 곁들임이다.
*/
#walletModal .convert__amount--fs{
  padding:0 0 var(--sp-4);
  border-top:1px solid var(--line, rgba(255,255,255,.08));
  padding-top:var(--sp-3); margin-top:calc(var(--sp-3) * -1);
}
#walletModal .convert__amount--fs b{ font-size:var(--fs-xl); color:var(--primary-2,#4E93FF); }
#walletModal .progress{
  height:8px; border-radius:var(--r-full); background:var(--panel);
  overflow:hidden; margin:var(--sp-2) 0;
}
#walletModal .progress__fill{ height:100%; background:linear-gradient(90deg,var(--primary),var(--gold)); border-radius:var(--r-full); }
#walletModal .progress__meta{ display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--text-3); }
/* 포인트 전환 화면(wf-box 안) 진행 막대 — 지갑 파랑 톤으로. 시안 금색 끝은 웨일리 톤에서 하늘로 (레드 2026-09-27 「지갑처럼」) */
#walletModal .wf-box .progress{ margin:0; }
#walletModal .wf-box .progress__fill{ background:linear-gradient(90deg, var(--primary), #4EC3F7); }



/* ---- 네트워크 접힘 선택 -------------------------------------------------- */
#walletModal .netsel{ position:relative; }
#walletModal .netsel > summary,
#walletModal .netsel--single,
#walletModal .netsel__list button{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:6px var(--sp-3); border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line); text-align:left;
  transition:border-color var(--t-fast), background var(--t-fast);
  list-style:none; cursor:pointer;
}
#walletModal .netsel > summary::-webkit-details-marker{ display:none; }
#walletModal .netsel > summary{ border-color:var(--primary); background:var(--primary-dim); }
#walletModal .netsel > summary:hover{ background:var(--card); }
#walletModal .netsel--single{ cursor:default; }
#walletModal .netsel__caret{
  position:absolute; top:50%; right:var(--sp-3); transform:translateY(-50%);
  color:var(--text-3); font-size:10px; transition:transform var(--t);
}
#walletModal .netsel[open] .netsel__caret{ transform:translateY(-50%) rotate(180deg); }
#walletModal .netsel__list{
  display:flex; flex-direction:column; gap:var(--sp-2);
  margin-top:var(--sp-2); padding:var(--sp-2);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
}
#walletModal .netsel__list button{ width:100%; }
#walletModal .netsel__list button:hover{ background:var(--card); }
#walletModal .netsel__list button.is-active{ border-color:var(--primary); background:var(--primary-dim); }
#walletModal .netsel__name{ font-size:var(--fs-sm); font-weight:800; line-height:1.3; }
#walletModal .netsel__meta{ font-size:var(--fs-xs); line-height:1.25; color:var(--text-3); }
#walletModal .netsel__head{ display:flex; align-items:center; gap:6px; }
#walletModal .netpick__tag{
  flex:none; font-size:9px; font-weight:900; letter-spacing:.04em; line-height:1;
  padding:3px 5px; border-radius:4px;
  background:var(--win); color:#04150d;
}

/* ---- 출금 from → to ---------------------------------------------------- */
#walletModal .swapbox{
  display:grid; grid-template-columns:1fr auto 1fr; gap:var(--sp-3);
  align-items:center; margin-bottom:var(--sp-4);
}
#walletModal .swapbox__side{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
#walletModal .swapbox__label{
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-4);
}
#walletModal .swapbox__sub{ font-size:var(--fs-xs); color:var(--text-3); }
#walletModal .swapbox__arrow{
  width:34px; height:34px; flex:none; align-self:center; margin-top:18px;
  display:grid; place-items:center; border-radius:var(--r-full);
  background:var(--primary-dim); color:var(--primary-2); font-weight:900;
}

/* ---- 금액 퀵버튼 -------------------------------------------------------- */
/*
   ★★ 넉 칸씩 <두 줄>로 편다 (레드 2026-09-20 「안되면 넉넉히 2줄로하면되자나」).

     단추가 여덟으로 늘면서 flex + flex:1 로는 한 줄에 욱여넣느라
     「₩1,000,000」이 「₩1,000」에서 잘렸다. 칸 너비를 격자가 정하게 하면
     글자가 온전히 들어간다.
   ⚠ minmax(0, 1fr) 이다. 그냥 1fr 로 두면 칸이 <글자 길이만큼> 넓어져
     다시 넘친다 — 격자 칸의 기본 최소 폭이 auto 라서 그렇다.
*/
#walletModal .quickamt{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--sp-2); margin-top:var(--sp-2);
}
#walletModal .quickamt button{
  height:32px; border-radius:var(--r-sm);
  background:var(--panel); border:1px solid var(--line);
  font-size:var(--fs-sm); font-weight:800; color:var(--text-2);
  transition:background var(--t-fast);
  white-space:nowrap;
}
#walletModal .quickamt button:hover{ background:var(--card); color:var(--text); }
/*
   「정정하기」는 금액이 아니다 — 제 줄에 온전히 둔다.
   ⚠ 테두리는 <남긴다> (레드 2026-09-20 「정정하기 테두리줘야지」).
     지웠더니 글자만 떠 있어 누를 수 있는 것으로 안 보였다.
     구실이 다르다는 것은 <바탕을 비우는 것>으로 충분하다.
*/
#walletModal .quickamt .ex-amtpad__reset{
  grid-column:1 / -1;
  background:transparent; color:var(--text-3);
}
#walletModal .quickamt .ex-amtpad__reset:hover{
  background:var(--panel); color:var(--text); border-color:var(--line-2, var(--line));
}

/* ---- 요약 · 키밸류 ------------------------------------------------------ */
#walletModal .kv{
  display:grid; grid-template-columns:1fr 1fr; gap:6px var(--sp-3);
  padding:var(--sp-3); margin-bottom:var(--sp-3);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
}
#walletModal .kv > div{ display:flex; justify-content:space-between; gap:var(--sp-2); font-size:var(--fs-sm); }
#walletModal .kv span{ color:var(--text-3); }
#walletModal .kv b{ font-weight:800; }

#walletModal .summary{
  padding:var(--sp-4); border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line);
}
#walletModal .summary > div{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-2) 0; font-size:var(--fs-sm);
}
#walletModal .summary > div span{ color:var(--text-3); }
#walletModal .summary__total{
  margin-top:var(--sp-2); padding-top:var(--sp-3) !important;
  border-top:1px solid var(--line);
}
#walletModal .summary__total b{ font-size:var(--fs-lg); font-weight:900; color:var(--win); }

@media (max-width:640px){
  #walletModal .kv{ grid-template-columns:1fr; }
  #walletModal .swapbox{ grid-template-columns:1fr; }
  #walletModal .swapbox__arrow{ margin:0 auto; transform:rotate(90deg); }
}


/* ==========================================================================
   모바일 압축 — 한 화면에 들어오게
   ========================================================================== */
@media (max-width:640px){
  /* 탭을 상단에 고정해 스크롤해도 이동 가능 */
  #walletModal .modal__body .tabs{
    position:sticky; top:calc(var(--sp-4) * -1); z-index:5;
    margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    background:var(--bg-2); border-bottom:1px solid var(--line);
    border-radius:0;
  }
  /* ★ 한 줄 <가로 스크롤> 그대로다 (레드 2026-09-15). 접지 않는다. */
  #walletModal .modal__body .tabs button{ height:30px; font-size:var(--fs-xs); flex:0 0 auto; }
  /* ⚠⚠ max-width:100% 가 <오른쪽 음수 마진을 막고> 있었다 (레드 2026-09-15
       「bottom 줄끊긴거」).

       이 줄은 margin:-16px -16px 로 좌우를 모달 가장자리까지 내미는데,
       100% 는 <안쪽 여백을 뺀 폭>(327)이라 오른쪽으로 못 늘어난다.
       실측: 왼쪽 여백 1px · 오른쪽 33px — 그만큼 밑줄이 일찍 끝나
       <선이 끊긴 것>으로 보였다.

     ★ 상한을 풀고 폭을 <안쪽 여백만큼 더> 잡는다. 그래야 띠가 모달 폭을 채운다. */
  #walletModal .modal__body .tabs{
    max-width:none;
    width:calc(100% + var(--sp-4) * 2);
  }

  /* ⚠⚠ <끝까지 안 밀리던> 까닭 — 스크롤 통의 오른쪽 안쪽 여백(padding-right)은
       끝에 닿았을 때 <그려지지 않는다>. 브라우저가 스크롤 폭을 셀 때 그 여백을
       빼먹는 오래된 버릇이다. 그래서 마지막 탭 「포인트 전환」이 모달 모서리에
       딱 붙어 반쯤 잘린 채로 멈췄다.

     ★ 마지막에 <빈 칸을 하나 세운다>. 그 칸이 여백 몫을 대신 차지하므로
       끝까지 밀면 마지막 탭이 온전히 선다. */
  #walletModal .modal__body .tabs::after{
    content:""; flex:0 0 var(--sp-4); align-self:stretch;
  }

  /* ⚠ 밑줄이 <끊겨> 보이던 까닭 — 테두리는 보이는 칸(스크롤 창)에만 그려지는데
       안쪽 내용은 그보다 넓다. 밀어 놓으면 글자가 선 밖으로 나가 선이 끝난 것처럼
       읽힌다. 테두리를 걷고 <밑에 깔린 띠>로 바꾼다 — 띠는 스크롤과 무관하게
       칸 전체를 채운다. */
  #walletModal .modal__body .tabs{
    border-bottom:0;
    box-shadow:inset 0 -1px 0 var(--line);
  }


  /* 입금 QR · 네트워크 */
  #walletModal .depaddr{ grid-template-columns:1fr; justify-items:center; }
  #walletModal .depaddr__body{ width:100%; }
  #walletModal .qrbox{ width:132px; height:132px; margin-bottom:var(--sp-3); }
  #walletModal .coinpick{
    display:flex; gap:var(--sp-2); overflow-x:auto;
    scrollbar-width:none; padding-bottom:2px;
  }
  #walletModal .coinpick::-webkit-scrollbar{ display:none; }
  #walletModal .coinpick button{
    flex:0 0 auto; width:64px; padding:var(--sp-2) var(--sp-1);
    font-size:10px; gap:4px;
  }
  #walletModal .coinpick .coin{ width:24px !important; height:24px !important; }
  #walletModal .coinpick .coin svg{ width:24px; height:24px; }

  /* 네트워크 접힘 압축 */
  #walletModal .netsel > summary, #walletModal .netsel--single, #walletModal .netsel__list button{ padding:var(--sp-2) var(--sp-3); }
  #walletModal .netsel__name{ font-size:var(--fs-xs); }
  #walletModal .netsel__meta{ font-size:10px; }
  #walletModal .netpick__tag{ right:26px; padding:2px 5px; font-size:8px; }
  #walletModal .netsel__caret{ right:var(--sp-3); }

  /* QR 더 작게 */
  #walletModal .qrbox{ width:112px; height:112px; margin-bottom:var(--sp-2); }

  /* 출금 from → to 는 가로 유지 (세로로 쌓으면 화면이 길어짐) */
  #walletModal .swapbox{ grid-template-columns:1fr auto 1fr; gap:var(--sp-2); margin-bottom:var(--sp-3); }
  #walletModal .swapbox__arrow{ width:26px; height:26px; margin-top:16px; font-size:12px; }
  #walletModal .swapbox__sub{ font-size:10px; }

  #walletModal .field{ margin-bottom:var(--sp-3); }
  #walletModal .input{ height:40px; }
  #walletModal .summary > div{ padding:var(--sp-1) 0; }
  #walletModal .kv{ padding:var(--sp-3); }
  #walletModal .note{ padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs); }
  #walletModal .activehint{ margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs); }
}

/* ---- 코인 접힘 선택 ------------------------------------------------------ */
#walletModal .coinsel{ position:relative; min-width:0; }
#walletModal .coinsel > summary,
#walletModal .coinsel__list button{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3); border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line);
  list-style:none; cursor:pointer; width:100%; text-align:left;
  transition:background var(--t-fast), border-color var(--t-fast);
}
#walletModal .coinsel > summary::-webkit-details-marker{ display:none; }
#walletModal .coinsel > summary{ position:relative; padding-right:26px; }
#walletModal .coinsel > summary:hover,
#walletModal .coinsel__list button:hover{ background:var(--card); }
#walletModal .coinsel__list button.is-active{ border-color:var(--primary); background:var(--primary-dim); }
#walletModal .coinsel__label{ min-width:0; }
#walletModal .coinsel__label b{ display:block; font-size:var(--fs-sm); font-weight:800; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
#walletModal .coinsel__label small{ display:block; font-size:var(--fs-xs); color:var(--text-4); }
#walletModal .coinsel[open] > summary{ border-color:var(--primary); }
#walletModal .coinsel__list{
  position:absolute; z-index:10; left:0; right:0; top:calc(100% + 6px);
  display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-2); max-height:240px; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:var(--sh-2);
}

/* ---- 라벨 + 체크박스 한 줄 ----------------------------------------------- */
#walletModal .field__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-2); flex-wrap:wrap;
}
#walletModal .field__row .field__label{ margin-bottom:0; }
#walletModal .check{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-xs); font-weight:700; color:var(--text-2); cursor:pointer;
}
/* ★ 체크 표시는 <글자가 아니라 선>으로 그린다 (레드 2026-09-11 「체크박스도 안맞아」).
     「✓」 글자는 줄 높이(24px)를 물려받고 대체 글꼴로 그려져 16px 칸 밖으로 커지며 아래로 처졌다.
     브라우저 기본 여백(3px 3px 3px 4px)도 지운다 — 옆 글자와 가운데 줄이 어긋난다. */
#walletModal .check input{
  appearance:none; width:16px; height:16px; flex:none; margin:0;
  position:relative; line-height:0;
  border:1.5px solid var(--line-2); border-radius:4px;
  background:var(--panel); cursor:pointer;
  transition:background var(--t-fast), border-color var(--t-fast);
}
#walletModal .check input:checked{ background:var(--primary); border-color:var(--primary); }
#walletModal .check input:checked::after{
  content:""; position:absolute; left:50%; top:45%;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:translate(-50%, -50%) rotate(45deg);
}
#walletModal .check input:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
#walletModal .input[readonly]{ color:var(--text-2); background:rgba(255,255,255,.02); cursor:default; }

/* ---- 막힌 폼 — 잔액·적립분이 없을 때 (레드 2026-09-11 「출금폼은 보여주고 disabled 처리 · 포인트전환도」)
   ★ fieldset disabled 가 안의 입력칸·단추·체크박스를 한 번에 막는다. 모양만 여기서 —
     브라우저 기본 테두리·여백을 지우고, 막혔다는 것이 보이게 흐리게 한다.
   ⚠ 코인 고르개(details/summary)는 폼 요소가 아니라 disabled 가 안 먹는다 — 눌리지 않게 따로 막는다. */
#walletModal .lockform{ border:0; padding:0; margin:0; min-width:0; }
#walletModal .lockform:disabled{ opacity:.5; }
#walletModal .lockform:disabled details,
#walletModal .lockform:disabled summary{ pointer-events:none; }

/* ==========================================================================
   지갑이 함께 쓰는 공용 조각 — 재구축 시 새 components.css 로 옮기세요.
   ========================================================================== */

/* ---- 버튼 -------------------------------------------------------------- */
#walletModal .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:40px; padding:0 var(--sp-5);
  border-radius:var(--r); font-weight:800; font-size:var(--fs-sm);
  white-space:nowrap; transition:background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
#walletModal .btn:active{ transform:translateY(1px); }
#walletModal .btn[disabled]{ opacity:.42; pointer-events:none; }
#walletModal .btn--primary{ background:var(--primary); color:#fff; }
#walletModal .btn--primary:hover{ background:var(--primary-2); }
#walletModal .btn--gold{ background:var(--gold); color:#231a00; }
#walletModal .btn--gold:hover{ background:var(--gold-2); }
#walletModal .btn--ghost{ background:var(--panel); border:1px solid var(--line); }
#walletModal .btn--ghost:hover{ background:var(--card); border-color:var(--line-2); }
#walletModal .btn--sm{ height:32px; padding:0 var(--sp-3); font-size:var(--fs-xs); }
#walletModal .btn--lg{ height:48px; padding:0 var(--sp-6); font-size:var(--fs-md); }
#walletModal .btn--block{ width:100%; }

/* ---- 칩 · 뱃지 --------------------------------------------------------- */
#walletModal .chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  height:34px; padding:0 var(--sp-4);
  border-radius:var(--r-full); background:var(--panel);
  border:1px solid var(--line);
  font-size:var(--fs-sm); font-weight:700; color:var(--text-2);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
#walletModal .chip:hover{ background:var(--card); color:var(--text); }
#walletModal .chip.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
#walletModal .chip-row{ display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
#walletModal .chip-row::-webkit-scrollbar{ display:none; }

#walletModal .badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 7px; border-radius:var(--r-sm);
  font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
}

/* ---- 모달 -------------------------------------------------------------- */
#walletModal{
  position:fixed; inset:0; z-index:90;
  /* ★ 스카이시티 실측: 덮개 padding 30 */
  display:grid; place-items:center; padding:30px;
  background:var(--overlay); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; 
}
#walletModal.is-open{ opacity:1; pointer-events:auto; }
/*
 * ★ 스카이시티 지갑 모달 치수를 그대로 옮긴다 (레드 2026-09-25).
 *
 *   .modal__dialog  width min(480px, 100%) · radius 8 · 덮개 padding 30
 *   전에는 520 / radius 20 이었다 — 폭 40 · 둥글기 12 차이.
 *
 * ⚠⚠ 스카이시티는 <html 에 zoom:0.9 가 걸려 있다>. 그래서 화면에서 재면
 *   480 이 432 로, 44 가 40 으로 나온다. 눈에 보이는 수를 그대로 옮기면
 *   전부 10% 작아진다 — 옮길 값은 <computed 의 CSS 값>이지 rect 가 아니다.
 *   (실측으로 확인: dialogComputedWidth = 480px, rect = 432)
 *
 * ⚠ 이 규칙은 #walletModal 안에만 건다. 라이브챗·알림 같은 다른 모달은
 *   WHALEY 기존 모양(r-xl)을 그대로 쓴다 — 한꺼번에 바꾸면 요청 밖이다.
 */
#walletModal .modal__box{
  width:100%; min-width:0; max-width:480px; max-height:calc(100vh - 60px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:8px; box-shadow:var(--sh-2);
  transform:translateY(10px) scale(.99); transition:transform var(--t);
}
#walletModal.is-open .modal__box{ transform:none; }
/* ★ 스카이시티: 머리 padding 15/20(높이 62) · 제목 16px/700 */
#walletModal .modal__head{
  display:flex; align-items:center; gap:8px;
  padding:15px 20px; border-bottom:1px solid var(--line);
}
#walletModal .modal__title{ font-size:16px; font-weight:700; }
/* ★ 안쪽 화면의 제목 — 뒤로 화살표 + 이름 (스카이시티 .wf-head · .wf-back) */
#walletModal .modal__title.wf-head{ display:inline-flex; align-items:center; gap:8px; }
#walletModal .wf-back{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-full); color:var(--text-3);
  transition:color var(--t-fast), background var(--t-fast);
}
#walletModal .wf-back:hover{ background:var(--card); color:var(--text); }
/* 제목에 얹는 자산 — 아이콘 24 · 이름은 한 단 흐리게 (시안 .wf-head) */
#walletModal .modal__title.wf-head .coin{ width:24px !important; height:24px !important; flex:none; }
#walletModal .wf-head small{ font-size:14px; font-weight:400; color:var(--text-3); }
/* ★ 스카이시티: 닫기 32×32 원형 (화면에서 잰 29 는 zoom 0.9 가 먹은 값) */
#walletModal .modal__close{
  margin-left:auto; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; color:var(--text-3);
}
#walletModal .modal__close svg{ width:18px; height:18px; }
#walletModal .modal__close:hover{ background:var(--panel); color:var(--text); }
/* ★ 스카이시티: 본문 padding 14/20/16 · 기본 글자 14px/400
   ⚠ 글자 크기는 <이 모달 안에만> 건다. 바깥 WHALEY 기본(16px)은 그대로다. */
#walletModal .modal__box{ font-size:14px; font-weight:400; }
#walletModal .modal__body{ padding:14px 20px 16px; overflow-y:auto; overflow-x:hidden; min-width:0; }
#walletModal .modal__body:has(.coinsel[open]){ overflow:visible; }
/* 모바일 — 화면 가운데에 작게. 바텀시트로 내리지 않는다 */
@media (max-width:640px){
  /* 아래 여백을 더 줘서 중앙보다 위로 올림 */
  #walletModal{ padding:var(--sp-4) var(--sp-4) 104px; align-items:center; justify-items:stretch; }
  #walletModal .modal__box{
    max-width:none;
    max-height:min(78vh, 600px);
    border-radius:var(--r-lg);
  }
  #walletModal .modal__head{ padding:var(--sp-3) var(--sp-4); }
  #walletModal .modal__title{ font-size:var(--fs-md); }
  #walletModal .modal__body{ padding:var(--sp-4); }
}

/* ---- 폼 ---------------------------------------------------------------- */
#walletModal .field{ margin-bottom:var(--sp-3); }
#walletModal .field__label{
  display:block; font-size:var(--fs-xs); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-4); margin-bottom:6px;
}
#walletModal .input{
  width:100%; height:44px; padding:0 var(--sp-4);
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); font-size:var(--fs-base); outline:none;
  transition:border-color var(--t-fast);
}
#walletModal .input:focus{ border-color:var(--primary); }
#walletModal .input::placeholder{ color:var(--text-4); }
#walletModal .input-group{ display:flex; gap:var(--sp-2); }
#walletModal .input-group .input{ flex:1; }
#walletModal .hint{ font-size:var(--fs-sm); color:var(--text-3); margin-top:var(--sp-2); line-height:1.55; }
#walletModal .hint--warn{ color:var(--warn); }

/* ---- 알림 배너 ---------------------------------------------------------- */
#walletModal .note{
  display:flex; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r); font-size:var(--fs-sm); line-height:1.5;
  background:var(--primary-dim); border:1px solid rgba(124,92,255,.28);
}
#walletModal .note--warn{ background:rgba(255,167,38,.12); border-color:rgba(255,167,38,.3); }
#walletModal .note .ico{ flex:none; }

/* ---- 빈 상태 ------------------------------------------------------------ */
#walletModal .empty{ padding:var(--sp-10) var(--sp-5); text-align:center; color:var(--text-3); }
#walletModal .empty .ico{ font-size:38px; margin-bottom:var(--sp-3); opacity:.5; }

/* ---- 코인 심볼 ---------------------------------------------------------- */
#walletModal .coin{
  display:inline-grid; place-items:center; flex:none;
  border-radius:var(--r-full);
  background:var(--coin,#666);
  color:#0b0d1c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
#walletModal .coin svg{ display:block; }
/* 밝은 코인 색은 어두운 글리프, 어두운 색은 흰 글리프 */
#walletModal .coin[style*="#627eea"], #walletModal .coin[style*="#2775ca"], #walletModal .coin[style*="#26a17b"]{ color:#fff; }

#walletModal .t-win{ color:var(--win); font-weight:800; }
#walletModal .t-lose{ color:var(--lose); font-weight:800; }
#walletModal .t-dim{ color:var(--text-3); }

/* ★ 출금 계좌 없음 — 표 자리에 한 줄 (레드 2026-09-27 「계좌미등록시 UI깨짐」) */
#walletModal .wf-bank--none{ display:flex; align-items:center; justify-content:center; min-height:68px; margin:0; padding:12px; font-size:14px; font-weight:800; color:var(--text-3); text-align:center; }

/* ★ 코인 아래 단추 셋(전송 · 출금 · 카드결제)에 아이콘이 안 보였다 (레드 2026-09-27).
     폰에서 한 칸이 ~100px 인데 좌우 여백이 30px 씩이라 글자가 넘쳤고, 넘친 만큼 <아이콘이 0 으로 줄었다>.
   ① 아이콘은 줄지 않는다  ② 세 칸일 때는 여백을 줄인다  ③ 막힌(미인증) 단추는 흐리게, 못 누른다 */
#walletModal .wp-foot .btn svg{ flex:none; }
#walletModal .wp-foot.is-3 .btn{ padding:0 8px; gap:4px; font-size:15px; white-space:nowrap; }
#walletModal .wp-foot .btn:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ★★ 모바일 지갑 — <안쪽 스크롤을 없애고> 모달 높이를 내용에 맞춘다. 화면을 넘으면 <바깥(덮개)>이 구른다 (레드 2026-09-27).
     전에는 상자를 min(78vh,600px) 로 묶고 본문만 굴려, 짧은 폰에서 입력칸 · 단추가 상자 안쪽 스크롤 밑에 숨었다.
   ⚠ place-items:center 그대로 두면 상자가 화면보다 길 때 <위쪽이 잘려> 스크롤로도 못 닿는다.
     그래서 가운데 맞춤을 margin:auto 로 한다 — 짧으면 가운데, 길면 여백이 0 이 되어 맨 위부터 구른다.
   ⚠ 코인 고르개(.coinsel[open])가 펼쳐져도 상자 밖으로 나갈 수 있게 상자도 overflow 를 푼다. */
@media (max-width:640px){
  #walletModal{ place-items:normal; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  #walletModal .modal__box{ margin:auto 0; max-height:none; overflow:visible; }
  #walletModal .modal__body{ overflow:visible; }
}