/* 트레이더 v2 로그인 — 셸 없는 중앙 카드(17 §1·§5). 바탕 테마(다크/라이트)만 · 환경 배색은 인증 후. */

:root{ --radius:12px; --mono:ui-monospace,"Cascadia Mono","Consolas",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif; }

body.scheme-dark{
  --bg:#0b1220; --bg-2:#0e1728; --surface:#141f33; --surface-2:#1a2740; --surface-3:#20304e;
  --line:#243354; --line-soft:#1c2942; --text:#dbe4f0; --text-dim:#8ba0bd; --text-faint:#5f728f;
  --brand:#e23a5b; --accent:#5cc7d4; --gain:#e5484d; --crit:#f0563f; --ok:#35b87a; --logo-ring:transparent; }
body.scheme-light{
  --bg:#f4f6fa; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f1f4f9; --surface-3:#e4e9f1;
  --line:#d6dde8; --line-soft:#e7ebf3; --text:#16202f; --text-dim:#4d5c72; --text-faint:#7c8aa0;
  --brand:#c2183a; --accent:#0e7c8c; --gain:#c62828; --crit:#cf3a26; --ok:#1e8a5a; --logo-ring:#dbe2ec; }

*{box-sizing:border-box}
html,body{margin:0; min-height:100vh}
body{background:radial-gradient(1100px 600px at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--bg);
  color:var(--text); font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased;
  display:grid; place-items:center; padding:20px}
a{color:inherit; text-decoration:none} .ti,.bi{line-height:1}

.theme-toggle{position:fixed; top:16px; right:16px; display:flex; gap:4px; padding:3px; background:var(--surface); border:1px solid var(--line); border-radius:9px}
.theme-toggle button{border:0; background:transparent; color:var(--text-dim); border-radius:6px; width:34px; height:30px; cursor:pointer; font-size:16px; display:grid; place-items:center}
.theme-toggle button.on{background:var(--surface-2); color:var(--text)}

.login-box{width:100%; max-width:380px}
.brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px}
.brand svg{width:34px; height:34px}
.brand .bt{font-weight:800; font-size:22px; letter-spacing:-.5px}
.brand .bt i{color:var(--brand); font-style:normal}
.brand .v2{font-size:11px; font-weight:700; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); padding:2px 7px; border-radius:6px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 24px 26px; box-shadow:0 18px 50px rgba(0,0,0,.28)}
.card .msg{text-align:center; font-size:13px; color:var(--text-dim); margin:0 0 18px}

.err{display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:9px; font-size:12.5px; margin-bottom:16px;
  background:color-mix(in srgb, var(--crit) 12%, transparent); border:1px solid color-mix(in srgb, var(--crit) 34%, transparent); color:var(--crit)}
.err.hide{display:none} .err .ti{font-size:16px}

.fld{position:relative; margin-bottom:13px}
.fld input{width:100%; height:44px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:0 42px 0 13px; font:inherit; font-size:14px}
.fld input:focus{outline:none; border-color:var(--accent)}
.fld .ic{position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:17px}
.fld .eye{cursor:pointer}

.row{display:flex; align-items:center; justify-content:space-between; margin:4px 0 18px}
.chk{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); cursor:pointer; user-select:none}
.chk input{width:16px; height:16px; accent-color:var(--accent)}
.btn{width:100%; height:46px; border:1px solid var(--accent); background:var(--accent); color:var(--bg-2); border-radius:9px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn:hover{filter:brightness(1.05)}

.foot{text-align:center; margin-top:18px; font-size:11px; color:var(--text-faint)}

details.legend{margin-top:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:12px 15px}
details.legend summary{cursor:pointer; list-style:none; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--text-dim)}
details.legend summary::-webkit-details-marker{display:none}
details.legend .lg{margin-top:12px; display:grid; gap:10px}
details.legend dt{font-weight:600; font-size:12px; margin-bottom:2px; color:var(--text)}
details.legend dd{margin:0; color:var(--text-dim); font-size:11.5px; line-height:1.45}