*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:#0d111d;font-family:'Malgun Gothic','Noto Sans KR',sans-serif}
#box{width:100%;max-width:440px;background:linear-gradient(160deg,#1c2340,#12172b);color:#e8ebf7;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.nm{font-size:16px;font-weight:700}
.tg{font-size:12px;color:#8e99c4;margin-left:4px;font-weight:400}
.badge{background:#3b5bdb;color:#fff;font-size:12px;padding:3px 10px;border-radius:20px}
.sub{font-size:12px;color:#8e99c4;margin-bottom:6px}
.sum{font-size:13px;color:#aab3d8;margin-bottom:12px;min-height:18px}
.ctl{background:#232b4d;border-radius:12px;padding:10px 14px 12px;margin-bottom:14px}
.ctl-top{display:flex;justify-content:space-between;font-size:12px;color:#aab3d8;margin-bottom:6px}
.ctl-top b{color:#e8ebf7;font-size:13px}
.ctl input{width:100%;margin:0;accent-color:#4dabf7;cursor:pointer}
.ctl-note{font-size:11px;color:#8e99c4;margin-top:6px}
.row{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px}
.dt{width:68px;color:#aab3d8;flex-shrink:0}
.tr{flex:1;height:10px;background:#2a3358;border-radius:6px;overflow:hidden;min-width:30px}
.fl{height:100%;border-radius:6px;background:linear-gradient(90deg,#4dabf7,#7950f2);transition:width .4s}
.ct{width:34px;text-align:right;font-weight:700;flex-shrink:0}
.wl{width:64px;text-align:right;color:#aab3d8;flex-shrink:0}
.wl .w{color:#51cf66}.wl .l{color:#ff6b6b}
.rt{width:40px;text-align:right;font-weight:700;flex-shrink:0}
.rt.up{color:#51cf66}.rt.down{color:#ff8787}
.pg{height:3px;background:#2a3358;border-radius:3px;margin-top:14px;overflow:hidden}
.pgf{height:100%;width:0;background:#4dabf7;transition:width .3s}
.msg{font-size:13px;color:#aab3d8;padding:8px 0;line-height:1.6}