/* ───────────────────────────────────────────────────────────
   jwill.shop 공통 디자인 시스템 (로그인 · 홈 앱바 · 가상투자)
   - Pretendard 폰트, 다크/라이트 테마 토큰, 카드/버튼/폼/표
   - html[data-theme="light"|"dark"] (없으면 시스템 설정 따름)
   ─────────────────────────────────────────────────────────── */
:root{
  --jw-sat:env(safe-area-inset-top,0px);--jw-sar:env(safe-area-inset-right,0px);
  --jw-sab:env(safe-area-inset-bottom,0px);--jw-sal:env(safe-area-inset-left,0px);
  --jw-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --jw-radius:16px;--jw-radius-sm:10px;
  --jw-bg:#0b0d12;--jw-bg-2:#0e1018;--jw-surface:#141821;--jw-surface-2:#1b2030;--jw-border:#262c3b;
  --jw-text:#e8edf6;--jw-muted:#8d9bb3;--jw-dim:#5f6f8a;
  --jw-primary:#8b7cff;--jw-primary-2:#6d5ce8;--jw-primary-soft:rgba(139,124,255,.16);
  --jw-up:#ff5b6e;--jw-down:#4c8dff;--jw-ok:#22c55e;--jw-warn:#f5b941;
  --jw-shadow:0 10px 30px rgba(0,0,0,.35);--jw-shadow-sm:0 2px 10px rgba(0,0,0,.25);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --jw-bg:#f3f5fa;--jw-bg-2:#e9edf6;--jw-surface:#ffffff;--jw-surface-2:#f6f8fc;--jw-border:rgba(15,23,42,.09);
    --jw-text:#0f172a;--jw-muted:#5b6b84;--jw-dim:#94a3b8;
    --jw-primary-soft:rgba(79,140,255,.10);--jw-up:#e5313f;--jw-down:#2f6fe4;
    --jw-shadow:0 10px 30px rgba(15,23,42,.08);--jw-shadow-sm:0 2px 8px rgba(15,23,42,.06);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --jw-bg:#f3f5fa;--jw-bg-2:#e9edf6;--jw-surface:#ffffff;--jw-surface-2:#f6f8fc;--jw-border:rgba(15,23,42,.09);
  --jw-text:#0f172a;--jw-muted:#5b6b84;--jw-dim:#94a3b8;
  --jw-primary-soft:rgba(79,140,255,.10);--jw-up:#e5313f;--jw-down:#2f6fe4;
  --jw-shadow:0 10px 30px rgba(15,23,42,.08);--jw-shadow-sm:0 2px 8px rgba(15,23,42,.06);
  color-scheme:light;
}

/* ── 기본 ── */
html{background:var(--jw-bg);min-height:100%}
.jw *, .jw *::before, .jw *::after{box-sizing:border-box}
body.jw{margin:0;background:var(--jw-bg);color:var(--jw-text);font-family:var(--jw-font);
  -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh;min-height:100dvh}
.jw a{color:inherit}
.jw .num{font-variant-numeric:tabular-nums}
.jw .up{color:var(--jw-up)} .jw .down{color:var(--jw-down)} .jw .muted{color:var(--jw-muted)}

/* ── 상단 앱바 (모든 jwill 페이지 공통) ── */
.jw-appbar{position:sticky;top:0;z-index:900;backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  background:color-mix(in srgb,var(--jw-bg) 78%,transparent);border-bottom:1px solid var(--jw-border);font-family:var(--jw-font)}
.jw-appbar-in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:10px 16px;padding-top:calc(10px + var(--jw-sat))}
.jw-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--jw-text);font-weight:800;font-size:17px;letter-spacing:-.02em;margin-right:auto}
.jw-logo{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:15px;
  background:linear-gradient(135deg,var(--jw-primary),var(--jw-primary-2));box-shadow:0 4px 14px rgba(79,140,255,.35)}
.jw-brand small{font-weight:600;color:var(--jw-muted);font-size:12px}
.jw-nav{display:flex;gap:4px;align-items:center}
.jw-nav a,.jw-iconbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;
  text-decoration:none;color:var(--jw-muted);background:transparent;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
.jw-nav a:hover,.jw-iconbtn:hover{background:var(--jw-primary-soft);color:var(--jw-text)}
.jw-nav a.on{background:var(--jw-primary-soft);color:var(--jw-primary);border-color:rgba(79,140,255,.25)}
.jw-iconbtn{width:34px;padding:0;justify-content:center;font-size:16px}
@media (max-width:520px){ .jw-nav a .jw-lbl{display:none} .jw-nav a{padding:0 10px} .jw-brand small{display:none} }

/* ── 레이아웃 ── */
.jw-wrap{max-width:960px;margin:0 auto;padding:18px 16px 96px;container-type:inline-size;container-name:jwwrap}
.jw-grid{display:grid;gap:14px}
/* 창 너비가 아니라 본문 폭(패딩 제외). 레일이 있으면 940px 화면의 오른쪽 창에서 주문 | 보유가 나뉜다. 469px 이하는 한 열. */
@container jwwrap (min-width:560px){ .jw-grid.two{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} }
.jw-card{background:var(--jw-surface);border:1px solid var(--jw-border);border-radius:var(--jw-radius);padding:18px;box-shadow:var(--jw-shadow-sm)}
.jw-card h2{margin:0 0 12px;font-size:16px;font-weight:750;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.jw-card h2 .jw-sub{margin-left:auto;font-size:12px;font-weight:500;color:var(--jw-muted)}
.jw-hero{border-radius:20px;padding:22px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,#3b6cff 0%,#6a4dff 60%,#8b5cf6 100%);box-shadow:0 14px 40px rgba(79,92,255,.35)}
.jw-hero .lbl{font-size:13px;opacity:.85;font-weight:600}
.jw-hero .big{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px}
.jw-hero .row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;font-size:13px}
.jw-hero .row b{display:block;font-size:15px}
.jw-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;background:rgba(255,255,255,.18)}

/* ── 버튼/폼 ── */
.jw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--jw-border);
  background:var(--jw-surface-2);color:var(--jw-text);font:600 14px/1 var(--jw-font);cursor:pointer;text-decoration:none;transition:transform .06s ease,background .15s,opacity .15s}
.jw-btn:active{transform:scale(.98)} .jw-btn:disabled{opacity:.55;cursor:not-allowed}
.jw-btn.primary{background:linear-gradient(135deg,var(--jw-primary),var(--jw-primary-2));border-color:transparent;color:#fff}
.jw-btn.buy{background:var(--jw-up);border-color:transparent;color:#fff}
.jw-btn.sell{background:var(--jw-down);border-color:transparent;color:#fff}
.jw-btn.ghost{background:transparent}
.jw-btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:9px}
.jw-btn.block{width:100%}
.jw-input,.jw-select{width:100%;height:46px;border-radius:12px;border:1px solid var(--jw-border);background:var(--jw-surface-2);color:var(--jw-text);
  padding:0 14px;font:500 15px var(--jw-font);outline:none;transition:border-color .15s,box-shadow .15s}
.jw-input:focus{border-color:var(--jw-primary);box-shadow:0 0 0 4px var(--jw-primary-soft)}
.jw-label{display:block;font-size:12.5px;font-weight:600;color:var(--jw-muted);margin:0 0 6px}
.jw-chips{display:flex;flex-wrap:wrap;gap:8px}
.jw-chip{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--jw-border);background:var(--jw-surface-2);color:var(--jw-text);
  font:600 13px var(--jw-font);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.jw-chip:hover{border-color:var(--jw-primary);color:var(--jw-primary)}
.jw-chip small{color:var(--jw-muted);font-weight:500}
.jw-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--jw-surface-2);border:1px solid var(--jw-border);border-radius:12px;padding:4px;gap:4px}
.jw-seg button{height:38px;border:0;border-radius:9px;background:transparent;color:var(--jw-muted);font:700 14px var(--jw-font);cursor:pointer}
.jw-seg button.on.buy{background:var(--jw-up);color:#fff} .jw-seg button.on.sell{background:var(--jw-down);color:#fff}

/* ── 표/리스트 ── */
.jw-table{width:100%;border-collapse:collapse;font-size:13.5px}
.jw-table th{font-size:12px;font-weight:600;color:var(--jw-muted);text-align:right;padding:8px 6px;border-bottom:1px solid var(--jw-border);white-space:nowrap}
.jw-table td{padding:10px 6px;text-align:right;border-bottom:1px solid var(--jw-border);font-variant-numeric:tabular-nums;white-space:nowrap}
.jw-table th:first-child,.jw-table td:first-child{text-align:left}
.jw-table tr:last-child td{border-bottom:0}
.jw-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.jw-list{display:flex;flex-direction:column}
.jw-item{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--jw-border)}
.jw-item:last-child{border-bottom:0}
.jw-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 38px;
  background:var(--jw-primary-soft);color:var(--jw-primary)}
.jw-item .main{flex:1;min-width:0}
.jw-item .t{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jw-item .s{font-size:12.5px;color:var(--jw-muted)}
.jw-item .r{text-align:right;font-variant-numeric:tabular-nums}
.jw-empty{color:var(--jw-muted);text-align:center;padding:26px 8px;font-size:14px}
.jw-notice{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.55;
  background:color-mix(in srgb,var(--jw-warn) 13%,transparent);border:1px solid color-mix(in srgb,var(--jw-warn) 38%,transparent);color:var(--jw-text)}
.jw-badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:700;background:var(--jw-surface-2);color:var(--jw-muted);border:1px solid var(--jw-border)}
.jw-toast{position:fixed;left:50%;bottom:calc(24px + var(--jw-sab));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  background:#111827;color:#fff;padding:12px 18px;border-radius:12px;font:600 14px var(--jw-font);box-shadow:var(--jw-shadow);transition:all .25s;z-index:2000;max-width:92vw}
.jw-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.jw-toast.err{background:#b91c1c}
.jw-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--jw-surface);border:1px solid var(--jw-border);border-radius:12px;box-shadow:var(--jw-shadow);
  z-index:50;max-height:300px;overflow:auto;display:none}
.jw-suggest button{display:flex;width:100%;gap:10px;align-items:center;padding:10px 14px;background:none;border:0;color:var(--jw-text);font:500 14px var(--jw-font);cursor:pointer;text-align:left}
.jw-suggest button:hover,.jw-suggest button.act{background:var(--jw-primary-soft)}
.jw-suggest small{color:var(--jw-muted);margin-left:auto}
.jw-skel{background:linear-gradient(90deg,var(--jw-surface-2),var(--jw-bg-2),var(--jw-surface-2));background-size:200% 100%;animation:jwsk 1.2s infinite;border-radius:8px;height:14px}
@keyframes jwsk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── 로그인 ── */
.jw-login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(24px,var(--jw-sat)) max(18px,var(--jw-sar)) max(24px,var(--jw-sab)) max(18px,var(--jw-sal));
  background:radial-gradient(60% 50% at 15% 10%,rgba(79,140,255,.22),transparent 70%),radial-gradient(50% 45% at 90% 90%,rgba(124,92,255,.22),transparent 70%),var(--jw-bg)}
.jw-login-card{width:100%;max-width:400px;background:var(--jw-surface);border:1px solid var(--jw-border);border-radius:24px;padding:34px 26px 26px;box-shadow:var(--jw-shadow);text-align:center}
.jw-login-card .jw-logo{width:64px;height:64px;border-radius:20px;font-size:30px;margin:0 auto 18px}
.jw-login-card h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.jw-login-card p.lead{margin:8px 0 26px;color:var(--jw-muted);font-size:14.5px}
.jw-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:56px;border-radius:14px;border:1px solid #dadce0;background:#fff;color:#1f1f1f;
  font:700 16px var(--jw-font);text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .06s,box-shadow .15s}
.jw-google:hover{box-shadow:0 6px 18px rgba(0,0,0,.18)} .jw-google:active{transform:scale(.985)}
.jw-google svg{width:22px;height:22px}
.jw-google.disabled{opacity:.5;pointer-events:none}
.jw-err{margin:0 0 16px;padding:12px 14px;border-radius:12px;font-size:13.5px;text-align:left;line-height:1.5;
  background:color-mix(in srgb,var(--jw-up) 12%,transparent);border:1px solid color-mix(in srgb,var(--jw-up) 35%,transparent)}
.jw-feats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:22px}
.jw-feats span{font-size:12px;color:var(--jw-muted);background:var(--jw-surface-2);border:1px solid var(--jw-border);padding:5px 10px;border-radius:999px}
.jw-foot{margin-top:18px;font-size:12px;color:var(--jw-dim)}