@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b1320;--card:#152237;--line:#2a3b54;--text:#eef4ff;--muted:#9aabc2;--blue:#61a9ff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 75% -20%,#19375d 0%,transparent 52%),var(--bg);color:var(--text);font-family:'Noto Sans KR',Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:auto;padding:0 36px}
header{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:23px;letter-spacing:-.05em}
.logo b{display:inline-flex;align-items:center;justify-content:center;width:47px;height:37px;background:#f0f5ff;color:#102039;border-radius:7px;font-size:19px}
header span,.heading span,.top small,footer{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.hero{padding:93px 0 92px}
.eyebrow{display:flex;align-items:center;gap:10px;color:#a7c8f1;font-size:12px;font-weight:700;letter-spacing:.06em}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:#6cdab7;box-shadow:0 0 12px #6cdab766}
h1{font-size:clamp(42px,6vw,74px);line-height:1.2;letter-spacing:-.065em;margin:24px 0}
h1 em{font-style:normal;color:var(--blue)}
.hero p{font-size:16px;color:var(--muted);line-height:1.9}
.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}
.heading h2{font-size:14px;letter-spacing:.15em;margin:0}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.card{display:flex;flex-direction:column;min-height:272px;padding:27px 30px;background:var(--card);border:1px solid var(--line);border-radius:13px;transition:background .2s,border-color .2s,transform .2s}
.card.live:hover,.card.live:focus-visible{background:#1b2d47;border-color:var(--blue);transform:translateY(-3px);outline:none}
.card.pending{opacity:.65}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top strong{font-size:11px;font-weight:500;border:1px solid #42546b;border-radius:20px;padding:5px 10px;color:var(--muted);white-space:nowrap}
.live .top strong{color:#89e2c1;border-color:#387f69}
.symbol{font-size:32px;margin-top:27px;color:#82b9ff;line-height:1}
.card h3{font-size:22px;margin:12px 0 6px;letter-spacing:-.035em}
.card p{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 24px}
.action{margin-top:auto;font-size:12px;color:#a7ceff;font-weight:700}
.pending .action{color:var(--muted)}
footer{display:flex;justify-content:space-between;padding:42px 0 28px;margin-top:70px;border-top:1px solid var(--line)}
@media(max-width:680px){.wrap{padding:0 20px}header{height:72px}header span{display:none}.hero{padding:64px 0 65px}.hero p{font-size:14px}.grid{grid-template-columns:1fr}.card{min-height:245px;padding:23px}footer{margin-top:45px}}
@media(prefers-reduced-motion:reduce){.card{transition:none}}