:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#1f2a44; --sub:#8a93a6; --line:#eaedf3;
  --pos:#e2453a;        /* 한국식: 상승=빨강 */
  --neg:#2f6bd8;        /* 하락=파랑 */
  --accent:#5b6cf0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",
    "Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  padding:22px 16px 40px;
}
.wrap{max-width:1080px;margin:0 auto}

/* 헤더 */
.hero{background:linear-gradient(135deg,#fff,#f7f9ff);border:1px solid var(--line);
  border-radius:18px;padding:22px 24px;box-shadow:0 6px 24px rgba(31,42,68,.05)}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.usermenu{display:flex;align-items:center;gap:13px;font-size:12.5px;white-space:nowrap}
.usermenu .uname{color:var(--ink);font-weight:700;background:#eef1f8;padding:4px 10px;border-radius:20px}
.usermenu a{color:var(--sub);text-decoration:none;font-weight:600}
.usermenu a:hover{color:var(--accent)}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--sub);font-weight:700}
.clock{font-size:12px;color:var(--sub)}
.total{font-size:40px;font-weight:800;letter-spacing:-.02em;margin:8px 0 16px}
.total .est{font-size:13px;font-weight:600;color:var(--sub);vertical-align:middle;
  background:#eef1f8;padding:3px 9px;border-radius:20px;margin-left:6px}
.sumcards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sc{background:#fbfcff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  display:flex;flex-direction:column;gap:4px}
.sc-l{font-size:11px;color:var(--sub)} .sc-v{font-size:16px;font-weight:700}

/* 카드 그리드 */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;box-shadow:0 4px 18px rgba(31,42,68,.04)}
.card.muted{opacity:.72}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:12px}
.cname{font-size:16px;font-weight:800;display:block;margin-bottom:6px}
.badges{display:flex;flex-wrap:wrap;gap:5px}
.badges span{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;
  background:#eef1f8;color:#566377}
.badges .bk{background:#1f2a44;color:#fff}
.badges .kind{background:#e7ecf6;color:#445}
.badges .kind.paper{background:#fff3d6;color:#9a6b00}   /* 모의투자 강조 */
.badges .mk{background:#eaf3ff;color:#2f6bd8}
.badges .st{background:#f0eefe;color:#5b4bd0}
.live{font-size:11px;font-weight:800;color:#16a34a;white-space:nowrap}
.manual{font-size:11px;font-weight:700;color:var(--sub);white-space:nowrap}

table.pos{width:100%;border-collapse:collapse;margin-bottom:10px}
table.pos th{font-size:10.5px;color:var(--sub);font-weight:600;text-align:right;
  padding:4px 6px;border-bottom:1px solid var(--line)}
table.pos th:first-child{text-align:left}
table.pos td{font-size:13px;text-align:right;padding:6px 6px;font-variant-numeric:tabular-nums}
table.pos td:first-child{text-align:left}
td.tk{font-weight:700}
.pos,.neg{font-weight:700}
.pos{color:var(--pos)} .neg{color:var(--neg)}

.meta{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--sub)}
.meta .kr{margin-left:auto;color:var(--ink);font-weight:700}
.empty{padding:18px 4px;color:var(--sub);font-size:13px;text-align:center;
  border:1px dashed var(--line);border-radius:10px}

/* 패널 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 20px;margin-top:14px;box-shadow:0 4px 18px rgba(31,42,68,.04)}
.panel h3{font-size:13px;color:var(--sub);font-weight:700;margin-bottom:12px;
  letter-spacing:.02em}
.bar-row{display:flex;align-items:center;gap:12px;margin:7px 0}
.bl{font-size:12.5px;width:200px;flex:none;color:#445}
.bar-track{flex:1;height:9px;background:#eef1f6;border-radius:6px;overflow:hidden}
.bar{height:100%;border-radius:6px}
.bar.pos{background:var(--pos)} .bar.neg{background:var(--neg)}
.bv{width:72px;text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums}
.spark{width:100%;height:90px}
.hint{font-size:12.5px;color:var(--sub);line-height:1.6}
.badges .fee{background:#fdeaea;color:#c23b32}
.amt{display:block;font-size:10.5px;font-weight:600;opacity:.82;margin-top:1px}
.sc-v.pos{color:var(--pos)} .sc-v.neg{color:var(--neg)}

/* 사이클 / 밴드 진행바 */
.cyc{margin:2px 0 10px}
.cyc-top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);margin-bottom:4px}
.cyc-sub{font-variant-numeric:tabular-nums}
.cyc-track{height:8px;background:#eef1f6;border-radius:6px;overflow:hidden}
.cyc-track.mid{background:linear-gradient(90deg,#eaf0ff 0%,#f3f5fa 50%,#fdeaea 100%)}
.cyc-fill{height:100%;background:var(--accent);border-radius:6px;min-width:3px}
.cyc-track.mid .cyc-fill{background:transparent;border-right:3px solid #1f2a44}

/* 편집 페이지 */
.editlink{color:var(--accent);font-weight:700;text-decoration:none}
.appnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.appnav a{flex:1;min-width:120px;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:11px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;
  box-shadow:0 2px 10px rgba(31,42,68,.04)}
.appnav a:hover{border-color:var(--accent);color:var(--accent)}
.appnav .nav-edit{color:var(--accent)}
.head-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.applink{font-size:11px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.applink:hover{text-decoration:underline}
.edit-intro{font-size:13px;color:var(--sub);margin-top:8px}
.fld-group{margin:8px 0}
.fld-title{font-size:13px;font-weight:700;margin:8px 0 4px}
.fld-group label{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:12.5px;color:#445;margin:6px 0}
.fld-group input{flex:1;max-width:62%;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;font-size:13px;font-variant-numeric:tabular-nums}
.fld-group input:focus{outline:none;border-color:var(--accent)}
/* 계좌 관리 */
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 4px;border-bottom:1px solid var(--line)}
.acct-info b{font-size:14px;margin-right:8px}
.acct-lock{font-size:11px;color:var(--sub)}
.del-btn{background:#fdeaea;color:#c23b32;border:1px solid #f3c9c5;border-radius:8px;
  padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer}
.del-btn:hover{background:#f9d9d6}
.acct-card{padding:8px 2px;border-bottom:1px solid var(--line)}
.acct-card .acct-row{border-bottom:none;padding:3px 2px}
.editline{display:flex;flex-wrap:wrap;gap:7px 11px;align-items:center;margin:4px 0 2px;
  padding:8px 10px;background:#fbfcff;border:1px solid var(--line);border-radius:10px}
.editline label{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#556}
.editline input,.editline select{padding:5px 7px;border:1px solid var(--line);border-radius:7px;
  font-size:12.5px;max-width:108px}
.editline input:focus,.editline select:focus{outline:none;border-color:var(--accent)}
.editline button{background:var(--accent);color:#fff;border:none;padding:6px 15px;border-radius:8px;
  font-size:12px;font-weight:700;cursor:pointer}
.addgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:6px}
.addgrid label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:#334;font-weight:700}
.addgrid .help{font-size:10.5px;color:var(--sub);font-weight:400;line-height:1.35}
.addgrid input,.addgrid select{width:100%;padding:8px 9px;border:1px solid var(--line);
  border-radius:8px;font-size:13px;margin-top:2px}
.addgrid input:focus,.addgrid select:focus{outline:none;border-color:var(--accent)}
.big-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:800;margin:6px 0 14px}
.big-field select{padding:11px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-weight:600}
.row-btns{display:flex;gap:7px;align-items:center}
.mini-btn{background:#eef1f8;color:#445;border:1px solid var(--line);border-radius:8px;
  padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.mini-btn:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:760px){.addgrid{grid-template-columns:1fr}}

.save-row{margin:16px 0;text-align:center}
.save-row button{background:var(--accent);color:#fff;border:none;padding:11px 28px;
  border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.save-row button:hover{filter:brightness(1.05)}

/* 로그인 페이지 */
.login-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:34px 30px;width:340px;max-width:92vw;box-shadow:0 10px 40px rgba(31,42,68,.08);text-align:center}
.login-logo{font-size:22px;font-weight:800}
.login-sub{font-size:12.5px;color:var(--sub);margin:6px 0 20px}
.login-err{background:#fdeaea;color:#c23b32;border:1px solid #f3c9c5;border-radius:8px;
  padding:9px;font-size:12.5px;margin-bottom:14px}
.social{display:flex;flex-direction:column;gap:9px}
.sbtn{display:block;padding:12px;border-radius:10px;font-size:14px;font-weight:700;
  text-decoration:none;border:1px solid var(--line)}
.sbtn.google{background:#fff;color:#222;border-color:#dadce0}
.sbtn.naver{background:#03c75a;color:#fff}
.sbtn.kakao{background:#fee500;color:#3c1e1e}
.login-or{color:var(--sub);font-size:12px;margin:14px 0}
.login-note{font-size:12.5px;color:var(--sub);line-height:1.6;margin-bottom:16px}
.pwform{display:flex;gap:8px}
.pwform input{flex:1;padding:11px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.pwform input:focus{outline:none;border-color:var(--accent)}
.pwform button{background:var(--accent);color:#fff;border:none;padding:11px 18px;
  border-radius:10px;font-weight:700;cursor:pointer}

.foot{margin-top:18px;font-size:11.5px;color:var(--sub);text-align:center;line-height:1.6}

@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  .sumcards{grid-template-columns:1fr 1fr}
  .total{font-size:32px} .bl{width:120px}
}