/* =========================================================
   WASSUP 공통 레이아웃
   - PC(1024px 이상): 상단 헤더 60px + 왼쪽 사이드 메뉴 260px(접으면 72px) + 본문
   - 모바일(1023px 이하): 상단 헤더 60px + 본문 + 하단 탭바 64px, 사이드 메뉴는 드로어
   - 색 · 간격 · 모서리는 tokens.css 변수만 사용
   ========================================================= */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(640px 420px at 18% 0%, var(--glow-blue), transparent 70%) no-repeat,
              radial-gradient(760px 560px at 100% 20%, var(--glow-violet), transparent 72%) no-repeat,
              var(--space-900);
  background-attachment: fixed;
  color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 22px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue-400); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.is-locked { overflow: hidden; }

/* 로그인 상태: <body data-auth="member|guest"> — 백엔드가 세션에 맞춰 넣어 주세요 */
[data-auth="guest"] .only-member { display: none !important; }
[data-auth="member"] .only-guest { display: none !important; }

/* 화면 크기별 표시 */
@media (max-width: 1023px) { .only-pc { display: none !important; } }
@media (min-width: 1024px) { .only-m { display: none !important; } }

/* ---------- 헤더 ---------- */
.hd { position: sticky; top: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--space-800); border-bottom: 1px solid var(--line); }
.hd-btn { position: relative; flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--space-700); color: var(--ink-2); cursor: pointer; padding: 0; }
.hd-btn[aria-expanded="true"], .hd-user[aria-expanded="true"] { border-color: var(--blue-500); }
.hd-logo { display: flex; align-items: center; min-width: 0; }
.hd-logo img { display: block; height: 38px; width: auto; }
.hd-space { flex: 1 1 auto; }
.hd-lang { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.hd-user { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 4px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--space-700); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.hd-caret { font-size: 10px; color: var(--ink-2); }
.hd-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pink-500); color: var(--on-bright); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.hd-count[data-count="0"] { display: none; }
.hd-anchor { position: relative; display: flex; align-items: center; }
.hd-guest { display: flex; gap: 8px; }

/* ---------- 헤더 드롭다운 (입출금 · 알림 · 내 메뉴) ---------- */
.dd { position: absolute; top: 50px; right: 0; z-index: 50; display: none; flex-direction: column; border-radius: 16px; background: var(--space-700); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); color: var(--ink); }
.dd.is-open { display: flex; }
.dd-wallet { width: 320px; padding: 12px; gap: 8px; }
.dd-bell { width: 360px; overflow: hidden; }
.dd-user { width: 248px; padding: 8px; gap: 2px; }
.dd-scrim { display: none; }

.wl-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wl-big button { height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--space-600); color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; }
.wl-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--space-800); border: 1px solid var(--line); }
.wl-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wl-row-text b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wl-row-text span { font-size: 11px; color: var(--ink-2); }
.wl-conv { height: 30px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--blue-500); color: var(--on-blue); font-size: 12px; font-weight: 800; cursor: pointer; }

.bl-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bl-head b { font-size: 15px; font-weight: 800; }
.bl-readall { border: 0; background: none; padding: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.bl-tabs { display: flex; gap: 4px; padding: 8px 10px 0; }
.bl-tabs button { flex: 1 1 0; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 700; cursor: pointer; }
.bl-tabs button.is-active { background: var(--space-600); color: var(--ink); }
.bl-list { display: flex; flex-direction: column; padding: 6px 0; }
.bl-item { display: flex; gap: 10px; padding: 9px 14px; color: var(--ink); }
.bl-item:hover { background: var(--space-600); color: var(--ink); }
.bl-item img { flex: 0 0 auto; width: 30px; height: 30px; object-fit: contain; }
.bl-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bl-line { display: flex; align-items: center; gap: 6px; }
.bl-line b { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-time { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bl-body { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-more { display: block; padding: 11px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; font-weight: 700; color: var(--ink); }
.tag { flex: 0 0 auto; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--space-600); font-size: 10px; font-weight: 800; line-height: 18px; color: var(--ink); }
.tag-msg { background: var(--violet-600); }
.dot-unread { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-500); }
.is-read .dot-unread { display: none; }

.us-card { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 10px; border-radius: 12px; background: var(--space-800); color: var(--ink); }
.us-card img { width: 40px; height: 40px; object-fit: contain; border-radius: 12px; background: var(--space-600); }
.us-card-text { display: flex; flex-direction: column; }
.us-card-text > b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.us-card-text span { font-size: 12px; color: var(--ink-2); }
.us-item { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; width: 100%; }
.us-item:hover { background: var(--space-600); color: var(--ink); }
.us-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.us-out { color: var(--ink-2); }

/* ---------- 본문 틀 ---------- */
.shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--header-h)); }
.side { position: sticky; top: var(--header-h); flex: 0 0 var(--sidebar-w); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 18px 12px 24px; background: var(--space-800); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-title { padding: 0 12px 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
a.ws-nav { text-decoration: none; }
.nav-row { position: relative; }
.nav-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.nav-caret svg { transition: transform .15s; }
.nav-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.side-sub { margin: 2px 0 4px 26px; padding-left: 12px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.side-sub[hidden] { display: none; }
.side-sub a { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.side-sub a:hover { background: var(--space-700); color: var(--ink); }
.side-help { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--space-700); border: 1px solid var(--line); }
.side-help-head { display: flex; align-items: center; gap: 10px; }
.side-help-head div { display: flex; flex-direction: column; }
.side-help-head strong { font-size: 14px; }
.side-help-head span { font-size: 12px; color: var(--ink-2); }

/* 사이드 메뉴 접기 (PC) */
.side-collapsed .side { flex-basis: var(--sidebar-w-collapsed); padding: 18px 6px 24px; }
.side-collapsed .side .ws-nav { flex-direction: column; justify-content: center; gap: 3px; height: 60px; padding: 0 4px; font-size: 10px; text-align: center; }
.side-collapsed .side .ws-nav-label { flex: none; width: 100%; }
.side-collapsed .side .ws-nav-ext, .side-collapsed .side .nav-caret, .side-collapsed .side .side-sub, .side-collapsed .side .side-help { display: none; }
.side-collapsed .side .side-title { align-self: center; width: 24px; height: 1px; margin: 4px 0 8px; padding: 0; overflow: hidden; color: transparent; background: var(--line); }

.main { flex: 1 1 auto; min-width: 0; padding: 28px 32px 0; display: flex; flex-direction: column; gap: 32px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.page-title { display: flex; align-items: center; gap: 10px; }
.page-title h1 { font-size: 22px; line-height: 30px; font-weight: 800; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--space-800); font-size: 12px; color: var(--ink-2); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-500); }
.pill b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.card { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; background: var(--space-700); border: 1px solid var(--line); }
.sec { display: flex; flex-direction: column; gap: 14px; }

/* ---------- 푸터 ---------- */
.ft { margin-top: 16px; padding: 36px 0 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.ft-brand { display: flex; flex-direction: column; gap: 10px; }
.ft-brand img { height: 34px; width: auto; align-self: flex-start; }
.ft-brand strong { font-size: 15px; font-weight: 800; }
.ft-brand span { font-size: 12px; color: var(--ink-3); }
.ft-col { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ft-col strong { font-size: 13px; font-weight: 700; }
.ft-col a, .ft-col button { color: var(--ink-2); border: 0; background: none; padding: 0; text-align: left; font-size: 13px; cursor: pointer; }
.ft-col a:hover, .ft-col button:hover { color: var(--ink); }
.ft-help { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border-radius: 14px; background: var(--space-700); border: 1px solid var(--line); }
.ft-help strong { font-size: 14px; }
.ft-help span { font-size: 12px; color: var(--ink-2); }
.ft-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-3); }

/* ---------- 모바일 하단 탭바 · 드로어 ---------- */
.tabbar-wrap { display: none; }
a.ws-tabbar-item { text-decoration: none; }
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.is-open { display: block; }
.scrim { position: absolute; inset: 0; border: 0; padding: 0; background: var(--scrim); cursor: pointer; }
.drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 300px; max-width: 86vw; display: flex; flex-direction: column; overflow-y: auto; background: var(--space-800); border-right: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.drawer-head { height: var(--header-h); flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); }
.drawer-head img { height: 28px; width: auto; }
.drawer-me { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 0; }
.drawer-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--space-700); border: 1px solid var(--line); color: var(--ink); }
.drawer-card img { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; background: var(--space-600); }
.drawer-card-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.drawer-card-text > b { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.drawer-card-text span { font-size: 12px; color: var(--ink-2); }
.drawer-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.drawer-nav { padding: 18px 12px; display: flex; flex-direction: column; gap: 20px; }
.drawer-out { margin: auto 12px 16px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 700; cursor: pointer; }

/* ---------- 팝업 (PC: 가운데 모달 / 모바일: 아래에서 올라오는 시트) ---------- */
.modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.is-open { display: flex; }
.modal-box { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; border-radius: var(--radius-xl); background: var(--space-700); border: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 16px; }
.modal-box.is-wide { max-width: 760px; }
.modal-box.is-mid { max-width: 560px; }
.modal-grab { display: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.modal-head { display: flex; align-items: center; gap: 10px; }
.modal-head h2 { font-size: 20px; line-height: 28px; font-weight: 800; }
.modal-x { margin-left: auto; flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--space-800); color: var(--ink-2); font-size: 16px; cursor: pointer; }
.modal-note { font-size: 12px; line-height: 18px; color: var(--ink-3); }
.btn2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* 폼 */
.form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--blue-500); margin: 0; }
.check a { margin-left: auto; font-size: 12px; }
.checks { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--space-800); border: 1px solid var(--line); }
.checks .check:first-child { padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.divider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tg-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--space-800); border: 1px solid var(--blue-500); }
.tg-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.tg-label .req { margin-left: auto; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--blue-500); color: var(--on-blue); font-size: 11px; font-weight: 800; line-height: 20px; }
.tg-input { display: flex; align-items: center; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--space-600); }
.tg-input span { padding: 0 2px 0 14px; color: var(--ink-2); font-size: 15px; font-weight: 700; }
.tg-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; outline: none; padding-right: 14px; }
.tg-help { font-size: 11px; line-height: 16px; color: var(--ink-2); }
.req-mark { color: var(--coral-500); }

@media (max-width: 1023px) {
  .hd { padding: 0 12px; gap: 8px; }
  .hd-btn { width: 44px; height: 44px; }
  .hd-logo img { height: 28px; }
  .hd-lang, .hd-user-wrap { display: none; }
  .side { display: none; }
  .main { padding: 16px 16px calc(var(--tabbar-h) + 24px); gap: 24px; }
  .page-title h1 { font-size: 20px; }
  .tabbar-wrap { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
  /* 헤더 패널은 헤더 아래 전체 폭 시트로 */
  .dd { position: fixed; top: calc(var(--header-h) + 8px); left: 8px; right: 8px; width: auto; }
  .dd-scrim.is-open { display: block; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 35; border: 0; background: var(--scrim); }
  .ft { padding: 16px 0 0; gap: 14px; }
  .ft-grid { display: none; }
  .ft-m { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; }
  .ft-m a { color: var(--ink-2); }
  .modal { align-items: flex-end; padding: 0; }
  .modal-box, .modal-box.is-wide, .modal-box.is-mid { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .modal-grab { display: block; }
  .modal-x { width: 44px; height: 44px; }
  .form-2 { grid-template-columns: 1fr; }
  .ws-sechead-actions [data-rail-prev], .ws-sechead-actions [data-rail-next] { display: none; }
}
@media (min-width: 1024px) { .ft-m { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* 팝업 공통 조각 */
.modal-sub { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.modal-note.center { text-align: center; }
.form-error { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--coral-500); background: var(--space-800); font-size: 13px; line-height: 19px; color: var(--ink); }
.form-ok { border-color: var(--mint-500); }
.auth-hero { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--space-800); border: 1px solid var(--line); }
.auth-mascot { width: 48px; height: 68px; object-fit: contain; flex: 0 0 auto; }
.auth-hero p { font-size: 14px; color: var(--ink-2); }
.tg-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--space-800); border: 1px solid var(--line); }
.tg-hero img { flex: 0 0 auto; width: 64px; height: 92px; object-fit: contain; }
.tg-hero div { display: flex; flex-direction: column; gap: 4px; }
.tg-hero b { font-size: 16px; font-weight: 800; }
.tg-hero span { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.copy-row { display: flex; gap: 8px; }
.copy-val { flex: 1 1 auto; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--space-600); font-size: 17px; font-weight: 800; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-btn { flex: 0 0 auto; min-width: 88px; height: 48px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--space-800); color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; }
.copy-btn.is-done { border-color: var(--mint-500); color: var(--mint-500); }
.warn-box { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--coral-500); background: var(--space-800); }
.warn-box b { font-size: 13px; font-weight: 800; color: var(--coral-500); }
.warn-box ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 18px; color: var(--ink-2); }

/* 지갑 팝업 (입금 · 출금 · 전환) */
.head-tag { margin-left: 6px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--space-800); font-size: 12px; font-weight: 700; line-height: 22px; color: var(--ink-2); vertical-align: middle; }
.head-back { width: 32px; height: 32px; margin-right: 6px; border-radius: 9px; border: 1px solid var(--line); background: var(--space-800); color: var(--ink-2); font-size: 16px; cursor: pointer; vertical-align: middle; }
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; flex-direction: column; gap: 14px; }
.step[hidden] { display: none; }
.stepper { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stepper li { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 3px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.stepper li span { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; background: var(--space-600); color: var(--ink-2); font-size: 12px; font-weight: 800; }
.stepper li.is-done { border-bottom-color: var(--blue-500); }
.stepper li.is-done span { background: var(--blue-500); color: var(--on-blue); }
.stepper li.is-current { color: var(--ink); }
.step-lead { font-size: 14px; font-weight: 700; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--space-800); cursor: pointer; }
.opt:has(input:checked) { border-color: var(--blue-400); background: var(--space-600); }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue-500); flex: 0 0 auto; }
.opt-text { display: flex; flex-direction: column; }
.opt-text strong { font-size: 14px; }
.opt-text span { font-size: 12px; color: var(--ink-2); }
.picked { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--space-800); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.picked b { color: var(--ink); }
.picked button, .link-btn { margin-left: auto; padding: 0; border: 0; background: none; color: var(--blue-400); font-size: 12px; font-weight: 700; cursor: pointer; }
.sel-row { display: flex; gap: 8px; }
.sel { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; font-size: 14px; }
.sel-row .sel { flex: 1 1 auto; min-width: 0; }
.sel-row .ws-btn { height: 44px; }
.sub-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--space-800); }
.sub-box[hidden] { display: none; }
.amt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.addr-box { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; align-items: start; padding: 14px; border-radius: 12px; background: var(--space-800); border: 1px solid var(--line); }
.addr-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.addr-label { font-size: 12px; font-weight: 600; }
.addr-val { padding: 10px 12px; border-radius: 10px; background: var(--space-600); font-size: 12px; color: var(--ink-2); word-break: break-all; }
.qr { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: #141033; font-weight: 800; }
.qr img { width: 100%; height: 100%; }
.pin { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pin strong { font-size: 16px; font-weight: 800; }
.pin-dots { display: flex; gap: 12px; padding: 8px 0; }
.pin-dots i { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--line-strong); }
.pin-dots i.is-on { background: var(--yellow-400); border-color: var(--yellow-400); }
.pin-err { min-height: 18px; font-size: 12px; font-weight: 700; color: var(--coral-500); }
.keypad { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.key { height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--space-800); color: var(--ink); font-size: 20px; font-weight: 800; cursor: pointer; }
.key[data-key="C"] { font-size: 13px; font-weight: 700; }
.key:active { background: var(--space-600); }
.tiles2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tiles2[hidden] { display: none; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--space-800); border: 1px solid var(--line); }
.tile > span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tile b { font-size: 20px; line-height: 28px; font-weight: 800; }
.tile b small { margin-left: 3px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tile-ok { border-color: var(--mint-500); }
.tile-ok b { font-size: 15px; color: var(--mint-500); }
.est-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--space-800); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.est-row b { color: var(--ink); }
.cv { display: flex; flex-direction: column; gap: 16px; }
.cv .ws-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; font-size: 14px; font-weight: 700; }
.cv-view { display: flex; flex-direction: column; gap: 14px; }
.cv-view[hidden], [data-panel][hidden] { display: none; }
.note-row { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--ink-2); }
.sum2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.sum2 div { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.sum2 b { color: var(--ink); }
.is-plus { color: var(--mint-500) !important; }
.hlist { margin: 0; padding: 0; list-style: none; border-radius: 14px; border: 1px solid var(--line); background: var(--space-800); overflow: hidden; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.hrow:last-child { border-bottom: 0; }
.htag { flex: 0 0 auto; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--space-600); color: var(--ink-2); font-size: 11px; font-weight: 800; line-height: 22px; }
.htag.is-out { background: var(--blue-500); color: var(--on-blue); }
.htext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.htext b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htext span, .hamt span { font-size: 11px; color: var(--ink-3); }
.hamt { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.hamt b { font-size: 14px; font-weight: 800; color: var(--ink-2); }
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 90; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--space-600); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); font-size: 14px; font-weight: 600; }
@media (max-width: 1023px) { .toast { bottom: calc(var(--tabbar-h) + 16px); } .addr-box { grid-template-columns: minmax(0, 1fr) 88px; } .qr { width: 88px; height: 88px; } .key { height: 52px; } }

/* ---------- 완료 안내 팝업 (#modal-done · 입금 · 출금 · 전환 · 문의 · 쿠폰 · 회원가입 공용) ---------- */
#modal-done { z-index: 75; }
.modal-box.is-done { max-width: 380px; gap: 18px; padding-top: 36px; text-align: center; word-break: keep-all; }
.done-x { position: absolute; top: 14px; right: 14px; }
.done-mark { align-self: center; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--mint-500);
  background: color-mix(in srgb, var(--mint-500) 16%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--mint-500) 7%, transparent); }
.done-mark path { stroke-dasharray: 40; stroke-dashoffset: 0; }
#modal-done.is-open .done-mark { animation: done-pop .32s cubic-bezier(.2, 1.4, .4, 1) both; }
#modal-done.is-open .done-mark path { animation: done-draw .42s .14s ease-out both; }
@keyframes done-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes done-draw { from { stroke-dashoffset: 40; } }
.done-text { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.done-eyebrow { font-size: 12px; line-height: 18px; font-weight: 800; letter-spacing: .04em; color: var(--mint-500); }
.done-text h2 { font-size: 20px; line-height: 28px; font-weight: 800; text-wrap: balance; }
.done-text p { font-size: 14px; line-height: 22px; color: var(--ink-2); text-wrap: pretty; }
.done-rows { margin: 0; padding: 2px 14px; border-radius: 12px; background: var(--space-800); border: 1px solid var(--line); text-align: left; }
.done-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; }
.done-rows > div:first-child { border-top: 0; }
.done-rows dt { flex: 0 0 auto; color: var(--ink-3); }
.done-rows dd { margin: 0; min-width: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.done-btns { display: flex; gap: 8px; }
.done-btns > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 1023px) { .modal-box.is-done { padding-top: 10px; } .done-x { top: 12px; right: 12px; } .done-mark { margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { #modal-done.is-open .done-mark, #modal-done.is-open .done-mark path { animation: none; } }

/* 테더(USDT) 로고 */
.usdt { display: inline-block; flex: 0 0 auto; vertical-align: -3px; }
.head-tag { display: inline-flex; align-items: center; gap: 5px; }
.head-tag .usdt { vertical-align: 0; }
.addr-label, .ws-field-hint, .ws-field-head > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.est-row b { display: inline-flex; align-items: center; gap: 5px; }