:root {
  color-scheme: dark;
  --bg:#070a12; --bg2:#0d1220; --panel:rgba(16,24,42,.72); --panel2:rgba(28,39,68,.74);
  --text:#f3f7ff; --muted:#9ba9c9; --soft:#dbe7ff; --border:rgba(255,255,255,.11);
  --accent:#7c9cff; --accent2:#58e6c0; --violet:#b68cff; --green:#37d67a; --red:#ff6b83; --yellow:#ffd166;
  --shadow:0 24px 70px rgba(0,0,0,.38); --radius:26px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; font-family:Inter,Pretendard,"Noto Sans KR",system-ui,-apple-system,sans-serif;
  color:var(--text); letter-spacing:-.015em;
  background:
    radial-gradient(circle at 10% -10%, rgba(124,156,255,.28), transparent 34rem),
    radial-gradient(circle at 92% 4%, rgba(88,230,192,.18), transparent 28rem),
    linear-gradient(180deg,var(--bg),var(--bg2) 48%,#070a12);
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px; mask-image:linear-gradient(180deg,rgba(0,0,0,.78),transparent 72%);
}
.wrap { max-width:1280px; margin:0 auto; padding:46px 22px 88px; }
.hero,.card {
  position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  box-shadow:var(--shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.hero::after,.card::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.13); }
.hero {
  padding:36px; margin-bottom:22px;
  background:
    linear-gradient(135deg,rgba(124,156,255,.28),rgba(88,230,192,.08) 52%,rgba(182,140,255,.14)),
    rgba(16,24,42,.78);
}
.hero h1 { max-width:920px; }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.card { grid-column:span 12; padding:24px; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.card:hover,.item:hover { transform:translateY(-2px); border-color:rgba(124,156,255,.30); }
.span-4 { grid-column:span 4; } .span-6 { grid-column:span 6; } .span-8 { grid-column:span 8; } .span-12 { grid-column:span 12; }
h1 { margin:0 0 12px; font-size:clamp(31px,4vw,54px); line-height:1.04; font-weight:880; letter-spacing:-.055em; }
h2 { margin:0 0 16px; font-size:24px; line-height:1.18; letter-spacing:-.035em; } h3 { margin:0 0 8px; font-size:18px; }
p, li { line-height:1.68; } ul { margin:10px 0 0 18px; padding:0; }
a { color:#b9d4ff; text-decoration:none; font-weight:650; } a:hover { color:#fff; text-decoration:none; }
.chip,.badge,.badge-chip {
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07); color:#dce7ff; font-size:13px; line-height:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.chip { margin-bottom:12px; color:#bfe8ff; background:rgba(124,156,255,.14); border-color:rgba(124,156,255,.28); }
.muted { color:var(--muted); }
.list { display:flex; flex-direction:column; gap:12px; }
.item {
  padding:15px 17px; border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09); transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.item .badge { margin-left:6px; }
.kv { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.badge { font-size:12px; background:rgba(124,156,255,.16); color:#d9e5ff; }
.badge a { color:inherit; }
table { width:100%; border-collapse:separate; border-spacing:0 8px; }
th { color:var(--muted); font-size:13px; font-weight:700; text-align:left; padding:0 12px 4px; }
td { padding:13px 12px; background:rgba(255,255,255,.045); border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); vertical-align:top; }
td:first-child { border-left:1px solid rgba(255,255,255,.07); border-radius:14px 0 0 14px; }
td:last-child { border-right:1px solid rgba(255,255,255,.07); border-radius:0 14px 14px 0; }
.quick-grid,.date-card-grid,.watch-grid { display:grid; gap:12px; }
.quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.date-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.watch-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.quick-card,.date-card,.stat-tile,.watch-chip {
  display:flex; flex-direction:column; gap:7px; min-height:96px; padding:16px; border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032)); border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07); transition:transform .18s ease,border-color .18s ease;
}
.quick-card:hover,.date-card:hover,.watch-chip:hover { transform:translateY(-2px); border-color:rgba(124,156,255,.38); }
.quick-kicker,.date-sub,.watch-code { color:var(--muted); font-size:12px; font-weight:650; }
.quick-title { color:#f5f8ff; font-size:17px; font-weight:820; }
.date-main { color:#fff; font-size:30px; line-height:1; font-weight:900; letter-spacing:-.05em; }
.date-kind { color:#dce7ff; font-size:13px; }
.date-card.opening { border-color:rgba(124,156,255,.25); }
.date-card.midday { border-color:rgba(88,230,192,.25); }
.date-card.premarket { border-color:rgba(255,209,102,.25); }
.date-card.close { border-color:rgba(255,107,131,.25); }
.date-card.trends { border-color:rgba(182,140,255,.28); }
.dashboard { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.stat-tile { grid-column:span 3; min-height:112px; justify-content:space-between; }
.stat-tile strong { display:block; font-size:34px; line-height:1; letter-spacing:-.05em; }
.chart-panel { grid-column:span 8; padding:18px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.volume-panel { grid-column:span 4; padding:18px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.bar-chart { height:172px; display:flex; gap:9px; align-items:end; padding:8px 0 0; }
.bar-col { flex:1; min-width:28px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.bar-stack { width:100%; height:126px; display:flex; flex-direction:column-reverse; justify-content:flex-start; border-radius:13px; overflow:hidden; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.bar-seg { display:block; min-height:3px; }
.bar-seg.opening { background:#7c9cff; } .bar-seg.midday { background:#58e6c0; } .bar-seg.premarket { background:#ffd166; } .bar-seg.close { background:#ff6b83; } .bar-seg.trends { background:#b68cff; }
.bar-label { color:var(--muted); font-size:11px; white-space:nowrap; }
.legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.legend span { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.legend i { width:9px; height:9px; border-radius:999px; display:inline-block; }
.vol-row { display:grid; grid-template-columns:86px 1fr 40px; gap:10px; align-items:center; margin:11px 0; }
.vol-track { height:11px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.vol-fill { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.archive-head { display:flex; align-items:end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.month-bars { display:flex; align-items:end; gap:10px; height:132px; padding-top:8px; }
.month-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:44px; }
.month-bar { width:100%; border-radius:12px 12px 5px 5px; background:linear-gradient(180deg,var(--accent),rgba(124,156,255,.25)); min-height:8px; }
.month-label { color:var(--muted); font-size:11px; white-space:nowrap; }
.footer { margin-top:30px; color:var(--muted); font-size:13px; }
@media (max-width:900px){ .wrap{padding:28px 14px 60px}.hero{padding:26px}.span-4,.span-6,.span-8{grid-column:span 12}.kv,.quick-grid,.date-card-grid,.watch-grid{grid-template-columns:1fr}.dashboard{grid-template-columns:1fr}.stat-tile,.chart-panel,.volume-panel{grid-column:span 1}.date-main{font-size:26px} }