/* ─────────────────────────────────────────────────────────────
   rh-wallet.css — 충전 · 환전 · 고객센터 · 쪽지 패널
   로비(index.html) 팔레트를 그대로 쓴다.
   2026-09-05
   ───────────────────────────────────────────────────────────── */

.wl-mask{
  position:fixed;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(2,5,7,.82);backdrop-filter:blur(3px);
}
.wl-mask.show{display:flex}

.wl-panel{
  width:min(560px,100%);max-height:min(88vh,780px);
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,#192126,#0c1114);
  border:1px solid rgba(218,168,79,.48);border-radius:10px;
  box-shadow:0 26px 70px rgba(0,0,0,.75);
  overflow:hidden;
}

/* ── 머리 ─────────────────────────────────────────────────── */
.wl-head{padding:20px 22px 0;flex:0 0 auto}
.wl-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.wl-title{margin:0;font:700 18px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#e5c281;letter-spacing:.4px}
.wl-title small{display:block;margin-top:5px;font:400 12px Inter,Segoe UI,Arial,sans-serif;color:#8f9394;letter-spacing:0}
.wl-x{width:32px;height:32px;flex:0 0 auto;border:1px solid #3c4448;border-radius:6px;background:#121a1e;color:#9aa0a2;font-size:17px;line-height:1;transition:.15s}
.wl-x:hover{border-color:var(--wl-gold,#d9a84f);color:#f7d58f}

/* 보유금 */
.wl-bal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:13px 16px;margin-bottom:16px;border-radius:7px;
  background:linear-gradient(145deg,#231a10,#111719);border:1px solid rgba(218,168,79,.34)}
.wl-bal .k{font-size:11px;letter-spacing:2.4px;color:#9b8c6c}
.wl-bal .v{font:700 20px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#f7d58f;font-variant-numeric:tabular-nums}

/* 탭 */
.wl-tabs{display:flex;gap:2px;border-bottom:1px solid #2a3236}
.wl-tab{display:flex;align-items:center;justify-content:center;gap:5px;
  flex:1;padding:11px 4px 12px;border:0;background:none;
  color:#8f9394;font-size:12.5px;font-weight:800;letter-spacing:.2px;
  border-bottom:2px solid transparent;transition:.15s}
.wl-tab:hover{color:#e2d9c4}
.wl-tab.on{color:#f7d58f;border-bottom-color:#d9a84f}
/* 대기 건수 배지 — 글자를 가리지 않도록 라벨 옆에 붙인다 */
.wl-tab .dot{flex:0 0 auto;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:#c0532f;color:#fff;font-size:10px;font-weight:900;line-height:16px;text-align:center}

/* ── 본문 ─────────────────────────────────────────────────── */
.wl-body{flex:1 1 auto;overflow-y:auto;padding:18px 22px 4px;-webkit-overflow-scrolling:touch}
.wl-body::-webkit-scrollbar{width:8px}
.wl-body::-webkit-scrollbar-thumb{background:#2c3438;border-radius:4px}

.wl-field{margin-bottom:15px}
.wl-field > label{display:block;margin-bottom:7px;font-size:12px;color:#9aa0a2;letter-spacing:.3px}
.wl-field > label b{color:#e2d9c4;font-weight:700}

/* 금액 입력 */
.wl-amt{position:relative;display:flex;align-items:center}
.wl-amt input{
  width:100%;padding:14px 62px 14px 14px;border:1px solid #3c4448;border-radius:6px;
  background:#0d1316;color:#f6f0e4;font:700 19px Inter,Segoe UI,Arial,sans-serif;
  font-variant-numeric:tabular-nums;text-align:right;letter-spacing:.5px;
}
.wl-amt input:focus{outline:0;border-color:#d9a84f;box-shadow:0 0 0 3px rgba(218,168,79,.14)}
.wl-amt input::placeholder{color:#535a5d;font-weight:400}
.wl-amt .unit{position:absolute;right:14px;font-size:12px;font-weight:800;color:#9b8c6c;letter-spacing:.5px;pointer-events:none}
.wl-amt.bad input{border-color:#c0532f}
.wl-amt.bad input:focus{box-shadow:0 0 0 3px rgba(192,83,47,.16)}

.wl-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.wl-quick button{padding:7px 12px;border:1px solid #3c4448;border-radius:5px;background:#121a1e;
  color:#c9ccca;font-size:12px;font-weight:700;transition:.15s;white-space:nowrap}
.wl-quick button:hover{border-color:#d9a84f;color:#f7d58f}
.wl-quick button.all{border-color:rgba(218,168,79,.5);color:#e5c281}

.wl-err{margin:8px 0 0;font-size:12px;color:#e08a5f;line-height:1.6;min-height:0}
.wl-note{margin:9px 0 0;font-size:11.5px;color:#7e8385;line-height:1.7}

/* 선택·텍스트 입력 */
.wl-field select,
.wl-field textarea,
.wl-field input[type=text]{
  width:100%;padding:12px 13px;border:1px solid #3c4448;border-radius:6px;
  background:#0d1316;color:#f6f0e4;font:400 13.5px Inter,Segoe UI,Arial,sans-serif;line-height:1.6;
}
.wl-field textarea{min-height:96px;resize:vertical}
.wl-field select:focus,.wl-field textarea:focus,.wl-field input[type=text]:focus{
  outline:0;border-color:#d9a84f;box-shadow:0 0 0 3px rgba(218,168,79,.14)}
.wl-field textarea::placeholder,.wl-field input::placeholder{color:#535a5d}
.wl-count{margin-top:6px;font-size:11px;color:#6f7477;text-align:right}

/* 안내 박스 */
.wl-info{display:flex;gap:11px;padding:13px 15px;margin-bottom:15px;border-radius:7px;
  background:#101619;border:1px solid #2c3438}
.wl-info .ico{flex:0 0 auto;font-size:15px;line-height:1.4;color:#d9a84f}
.wl-info div{font-size:12px;color:#a4a8a9;line-height:1.75}
.wl-info b{color:#e2d9c4;font-weight:700}
.wl-info.warn{border-color:#8c4a2c;background:#1a1210}
.wl-info.warn .ico{color:#e08a5f}

/* 받을 곳 */
.wl-dest{display:flex;flex-direction:column;gap:7px;padding:13px 15px;margin-bottom:15px;
  border-radius:7px;background:#101619;border:1px solid #2c3438}
.wl-dest .r{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.wl-dest .r .k{color:#8f9394}
.wl-dest .r .v{color:#e2d9c4;font-weight:700;text-align:right;word-break:break-all}

/* ── 내역 ─────────────────────────────────────────────────── */
.wl-hist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:20px 0 10px;padding-top:16px;border-top:1px solid #2a3236}
.wl-hist-head h3{margin:0;font:700 13px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#e5c281;letter-spacing:1.2px}
.wl-hist-head .cnt{font-size:11.5px;color:#7e8385}

.wl-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.wl-item{padding:12px 14px;border:1px solid #2a3236;border-radius:6px;background:#101619}
.wl-item.answered{border-color:rgba(218,168,79,.4)}
.wl-item-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.wl-item-top .ttl{font-size:13px;font-weight:700;color:#e2d9c4}
.wl-item-top .amt{font-size:13px;font-weight:800;color:#f7d58f;font-variant-numeric:tabular-nums}
.wl-item-top .when{margin-left:auto;font-size:11px;color:#6f7477;white-space:nowrap}
.wl-item .msg{font-size:12.5px;color:#a4a8a9;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.wl-reply{margin-top:9px;padding:10px 12px;border-radius:5px;background:#171208;
  border-left:2px solid #d9a84f}
.wl-reply b{display:block;margin-bottom:4px;font-size:11px;letter-spacing:1.4px;color:#d9a84f}
.wl-reply span{font-size:12.5px;color:#ddd5c2;line-height:1.7;white-space:pre-wrap}

.wl-st{padding:3px 9px;border-radius:11px;font-size:10.5px;font-weight:900;letter-spacing:.4px}
.wl-st.pending {background:rgba(201,128,62,.18);color:#e0a15f;border:1px solid rgba(201,128,62,.5)}
.wl-st.approved{background:rgba(62,125,82,.18);color:#68c187;border:1px solid rgba(62,125,82,.55)}
.wl-st.rejected{background:rgba(178,60,60,.18);color:#e07575;border:1px solid rgba(178,60,60,.5)}
.wl-st.unknown {background:#1b2226;color:#8f9394;border:1px solid #333b3f}

.wl-empty{padding:26px 10px;text-align:center;font-size:12.5px;color:#6f7477}
.wl-more{width:100%;margin-top:2px;padding:10px;border:1px dashed #333b3f;border-radius:6px;
  background:none;color:#8f9394;font-size:12px;font-weight:700;transition:.15s}
.wl-more:hover{border-color:#d9a84f;color:#e5c281}

/* ── 바닥 ─────────────────────────────────────────────────── */
.wl-foot{flex:0 0 auto;display:flex;gap:9px;padding:14px 22px 18px;
  border-top:1px solid #2a3236;background:linear-gradient(180deg,rgba(12,17,20,0),#0c1114 40%)}
.wl-foot button{flex:1;padding:14px 8px;border-radius:6px;font-size:14px;font-weight:900;letter-spacing:.4px;transition:.15s}
.wl-cancel{flex:0 0 34%!important;border:1px solid #3c4448;background:#121a1e;color:#c9ccca}
.wl-cancel:hover{border-color:#5a6367;color:#e6e2d8}
.wl-submit{border:0;background:linear-gradient(100deg,#b87c2e,#edca77,#b47a2f);color:#171009;
  box-shadow:inset 0 1px 0 #ffe4a2}
.wl-submit:hover:not(:disabled){filter:brightness(1.13)}
.wl-submit:disabled{background:#1b2226;color:#6d7274;box-shadow:none;cursor:default;filter:none}

/* 로비 버튼 배지 */
.mem-actions button{position:relative}
.mem-actions .rh-badge{
  position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:#c0532f;color:#fff;
  font-size:10px;font-weight:900;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px #05080a;
}

/* ── 반응형 ───────────────────────────────────────────────── */
@media(max-width:600px){
  .wl-mask{padding:0;align-items:flex-end}
  .wl-panel{width:100%;max-height:92vh;border-radius:12px 12px 0 0;border-bottom:0}
  .wl-head{padding:16px 16px 0}
  .wl-body{padding:16px 16px 4px}
  .wl-foot{padding:12px 16px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .wl-tab{font-size:11.5px;padding:10px 2px 11px;gap:4px}
  .wl-tab .dot{min-width:15px;height:15px;line-height:15px;font-size:9.5px}
  .wl-amt input{font-size:17px;padding:13px 56px 13px 12px}
  .wl-foot button{padding:13px 6px;font-size:13.5px}
}

/* [2026-09-09] 원화 금액 옆 USDT 환산 — 충전·환전은 원화가 기준이고
   USDT 는 신청 시점 요율로 계산한 참고값이다. */
.wl-usdt{margin:9px 0 0;padding:8px 10px;border:1px solid #33424a;border-radius:5px;
  background:rgba(218,168,79,.06);font-size:12px;color:#9a9d9e;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.wl-usdt b{font:700 14px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#e5c281;letter-spacing:.3px}
.wl-usdt-r{font-size:10.5px;color:#7d8184;letter-spacing:.2px}
.wl-item .amt-usdt{display:block;margin-top:2px;font-style:normal;font-size:10.5px;
  font-weight:400;color:#7d8184;letter-spacing:.2px}

/* [2026-09-09] 신청은 USDT, 송금은 원화 — 입금할 원화 금액과 계좌를 신청 화면에서 바로 안내한다 */
.wl-conv{margin:10px 0 0;border:1px solid #3c4c56;border-radius:6px;overflow:hidden;
  background:linear-gradient(160deg,rgba(218,168,79,.10),rgba(218,168,79,.03))}
.wl-conv-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 12px 4px}
.wl-conv-top .k{font-size:11px;letter-spacing:1.2px;color:#9b8c6c;font-weight:900}
.wl-conv-top b{font:700 20px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#f7d58f;letter-spacing:.3px}
.wl-conv-r{padding:0 12px 11px;font-size:11px;color:#8b9094;letter-spacing:.2px}
.wl-conv-r span{color:#6f7477}
.wl-acct{border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.22);padding:9px 12px}
.wl-acct .r{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}
.wl-acct .k{color:#8b9094}
.wl-acct .v{color:#e7e3da;font-weight:600}
.wl-acct .v.acct{font:700 13px Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:#f7d58f;letter-spacing:.5px}
.wl-acct.empty{color:#8b9094;font-size:11.5px;line-height:1.7}