/* ==========================================================================
   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)
   ========================================================================== */
#walletModal .tabs{
  display:flex; gap:var(--sp-1); padding:var(--sp-1);
  background:var(--bg-2); border-radius:var(--r);
}
#walletModal .tabs--scroll{ overflow-x:auto; scrollbar-width:none; }
#walletModal .tabs--scroll::-webkit-scrollbar{ display:none; }
#walletModal .tabs button{
  flex:1 0 auto; white-space:nowrap;
  height:36px; padding:0 var(--sp-3); border-radius:var(--r-sm);
  font-size:var(--fs-sm); 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 이 안 먹었다. 고칠 일이 있으면 그쪽에서 고친다. */


/* ==========================================================================
   wallet — 지갑 (EG-01 정책 반영)
   자산 8줄 · 활성 자산 1개 선택 · 표시 커런시 5종
   크립토 트랙 / 캐쉬 트랙 완전 분리 · 보너스 전환
   ========================================================================== */

#walletModal .wallet__summary{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
#walletModal .moneybox{
  padding:var(--sp-4); border-radius:var(--r-lg);
  background:var(--panel); border:1px solid var(--line);
  text-align:left;
}
/* 포인트 상자는 눌러서 전환 화면으로 간다 */
#walletModal button.moneybox{ width:100%; cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); }
#walletModal button.moneybox:hover{ border-color:var(--gold); background:var(--card); }
#walletModal .moneybox__label{
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-4);
}
#walletModal .moneybox__value{ font-size:var(--fs-xl); font-weight:900; margin-top:var(--sp-1); }
#walletModal .moneybox--bonus .moneybox__value{ color:var(--gold); }
#walletModal .moneybox__sub{ font-size:var(--fs-xs); color:var(--text-3); margin-top:2px; }

/* 표시 커런시 */
#walletModal .curbar{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
}
#walletModal .curbar__label{ font-size:var(--fs-sm); color:var(--text-3); font-weight:700; }
#walletModal .curbar__options{ display:flex; gap:var(--sp-1); margin-left:auto; flex-wrap:wrap; }
#walletModal .curbar__opt{
  height:30px; padding:0 var(--sp-3); border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:800; color:var(--text-3);
  transition:background var(--t-fast), color var(--t-fast);
}
#walletModal .curbar__opt:hover{ background:var(--card); color:var(--text); }
#walletModal .curbar__opt.is-active{ background:var(--primary); color:#fff; }

/* 자산 목록 — 활성 자산 선택 */
#walletModal .assetlist{ display:flex; flex-direction:column; gap:var(--sp-1); }
#walletModal .assetrow{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r);
  border:1px solid transparent; background:var(--panel);
  transition:background var(--t-fast), border-color var(--t-fast);
  width:100%; text-align:left;
}
#walletModal .assetrow:hover{ background:var(--card); }
#walletModal .assetrow.is-active{ border-color:var(--primary); background:var(--primary-dim); }

#walletModal .assetrow__id{ display:flex; align-items:baseline; gap:6px; min-width:0; }
#walletModal .assetrow__name{ font-size:var(--fs-sm); font-weight:800; line-height:1.3; }
#walletModal .assetrow__code{ font-size:var(--fs-xs); color:var(--text-4); }
#walletModal .assetrow__amount{ margin-left:auto; text-align:right; }
#walletModal .assetrow__amount b{ font-size:var(--fs-sm); font-weight:900; line-height:1.3; font-variant-numeric:tabular-nums; }
#walletModal .assetrow__amount small{ display:block; font-size:10px; line-height:1.2; color:var(--text-4); }
#walletModal .assetrow__check{
  width:20px; height:20px; border-radius:var(--r-full); flex:none;
  border:2px solid var(--line-2); display:grid; place-items:center;
  font-size:10px; color:transparent;
  /* ⚠⚠ 줄높이를 <1 로 못 박는다> (레드 2026-09-15 「체크 가운데 오게」).

       물려받은 값이 24px 인데 칸은 20px 이다. 줄상자가 칸보다 4px 커서
       place-items:center 로 가운데를 맞춰도 <글자가 아래로 밀렸다> —
       실측 위 2px · 아래 -6px. 좌우는 6.5/6.5 로 맞았으니 세로만 틀린 것이다.

     ★ place-items 는 <줄상자>를 가운데 두지 글자 획을 두지 않는다.
       줄상자를 글자 크기에 붙여야 그 둘이 같아진다. */
  line-height:1;
}
#walletModal .assetrow.is-active .assetrow__check{
  border-color:var(--primary); background:var(--primary); color:#fff;
}
#walletModal .assetrow__track{
  font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:var(--r-sm);
  background:rgba(255,194,51,.16); color:var(--gold);
}

/* 활성 자산 안내 */
#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;
}

/* 입금 코인 선택 */
#walletModal .coinpick{ display:grid; grid-template-columns:repeat(7,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); }
#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); }

@media (max-width:640px){
  #walletModal .wallet__summary{ grid-template-columns:1fr; }
  #walletModal .curbar{ flex-direction:column; align-items:flex-start; }
  #walletModal .curbar__options{ margin-left:0; }
}

/* ---- 네트워크 접힘 선택 -------------------------------------------------- */
#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;
}

/* ---- 금액 퀵버튼 -------------------------------------------------------- */
#walletModal .quickamt{ display:flex; gap:var(--sp-2); margin-top:var(--sp-2); }
#walletModal .quickamt button{
  flex:1; 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);
}
#walletModal .quickamt button:hover{ background:var(--card); color:var(--text); }

/* ---- 요약 · 키밸류 ------------------------------------------------------ */
#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);
  }

  /* 요약 카드 압축 */
  #walletModal .wallet__summary{ grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-bottom:var(--sp-3); }
  #walletModal .moneybox{ padding:var(--sp-3); }
  #walletModal .moneybox__value{ font-size:var(--fs-md); }
  #walletModal .moneybox__sub{ display:none; }

  /* 표시 커런시 한 줄 유지 */
  #walletModal .curbar{ flex-direction:row; align-items:center; padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); }
  #walletModal .curbar__label{ font-size:var(--fs-xs); }
  #walletModal .curbar__options{ margin-left:auto; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  #walletModal .curbar__options::-webkit-scrollbar{ display:none; }
  #walletModal .curbar__opt{ height:26px; padding:0 var(--sp-2); font-size:var(--fs-xs); }

  /* 자산 줄 압축 */
  #walletModal .assetrow{ padding:var(--sp-2) var(--sp-3); gap:var(--sp-2); }
  #walletModal .assetrow .coin{ width:28px !important; height:28px !important; }
  #walletModal .assetrow .coin svg{ width:28px; height:28px; }
  #walletModal .assetrow__amount b{ font-size:var(--fs-sm); }
  #walletModal .assetrow__amount small{ display:none; }
  #walletModal .assetrow__track{ display:none; }

  /* 입금 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;
  display:grid; place-items:center; padding:var(--sp-4);
  background:var(--overlay); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; 
}
#walletModal.is-open{ opacity:1; pointer-events:auto; }
#walletModal .modal__box{
  width:100%; min-width:0; max-width:520px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--r-xl); box-shadow:var(--sh-2);
  transform:translateY(10px) scale(.99); transition:transform var(--t);
}
#walletModal.is-open .modal__box{ transform:none; }
#walletModal .modal__head{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4); border-bottom:1px solid var(--line);
}
#walletModal .modal__title{ font-size:var(--fs-lg); font-weight:900; }
#walletModal .modal__close{
  margin-left:auto; width:34px; height:34px; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--text-3);
}
#walletModal .modal__close:hover{ background:var(--panel); color:var(--text); }
#walletModal .modal__body{ padding:var(--sp-4); 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); }