/* =================================================================== StockPlus — unified design system Layers brand tokens on top of Bootstrap 5.3 native theming (data-bs-theme="light" | "dark" on ). Loaded on every surface: public, mypage, auth. =================================================================== */ :root { --sp-brand: #2563eb; /* blue-600 */ --sp-brand-strong: #1e40af; /* blue-800 */ --sp-accent: #f59e0b; /* amber-500 */ --sp-radius: .65rem; --sp-nav-h: 60px; /* Korean market convention: 상승=빨강, 하락=파랑 */ --sp-up: #e11d48; --sp-down: #2563eb; } /* ---- Light theme surface tokens (Bootstrap default) ---- */ [data-bs-theme="light"] { --sp-bg: #f1f5f9; --sp-surface: #ffffff; --sp-border: #e2e8f0; --sp-muted: #64748b; --bs-body-bg: var(--sp-bg); } /* ---- Dark theme surface tokens ---- */ [data-bs-theme="dark"] { --sp-bg: #0b1120; --sp-surface: #131c2e; --sp-border: #24314a; --sp-muted: #94a3b8; --sp-up: #fb7185; --sp-down: #60a5fa; --bs-body-bg: var(--sp-bg); --bs-tertiary-bg: #131c2e; --bs-border-color: #24314a; } * { -webkit-font-smoothing: antialiased; } body { font-family: 'Pretendard', 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif; background-color: var(--sp-bg); letter-spacing: -0.01em; } /* ------------------------------------------------------------------ */ /* Top navigation — identical on every surface */ /* ------------------------------------------------------------------ */ .sp-nav { background-color: #0b1120 !important; /* always dark, both themes */ box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 18px rgba(0,0,0,.25); min-height: var(--sp-nav-h); } .sp-nav .navbar-brand { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; color: #fff !important; } .sp-nav .navbar-brand .fa-chart-line { color: var(--sp-brand); } .sp-nav .nav-link { color: #cbd5e1 !important; font-weight: 500; border-radius: .4rem; padding: .4rem .7rem !important; transition: color .15s ease, background-color .15s ease; } .sp-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.06); } .sp-nav .nav-link.active { color: #fff !important; background: rgba(37,99,235,.22); } .sp-nav .btn-signup { background: var(--sp-brand); border: none; color: #fff !important; padding: .4rem 1rem !important; border-radius: .5rem; font-weight: 600; } .sp-nav .btn-signup:hover { background: var(--sp-brand-strong); } /* theme toggle button */ .sp-theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,.18); color: #cbd5e1; width: 38px; height: 38px; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; } .sp-theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,.4); } [data-bs-theme="light"] .sp-theme-toggle .fa-sun, [data-bs-theme="dark"] .sp-theme-toggle .fa-moon { display: none; } /* push content below fixed nav */ .sp-shell-main { padding-top: var(--sp-nav-h); } /* ------------------------------------------------------------------ */ /* Cards / surfaces */ /* ------------------------------------------------------------------ */ .card { border: 1px solid var(--sp-border); border-radius: var(--sp-radius); background-color: var(--sp-surface); } .card-title { font-weight: 700; letter-spacing: -0.02em; } .btn-primary { background-color: var(--sp-brand); border-color: var(--sp-brand); } .btn-primary:hover { background-color: var(--sp-brand-strong); border-color: var(--sp-brand-strong); } .text-brand { color: var(--sp-brand) !important; } /* price direction (Korean convention) */ .price-up { color: var(--sp-up) !important; } .price-down { color: var(--sp-down) !important; } /* ------------------------------------------------------------------ */ /* MyPage sidebar shell */ /* ------------------------------------------------------------------ */ .sp-sidebar .list-group-item { background: transparent; border: none; border-radius: .5rem; color: var(--sp-muted); font-weight: 500; padding: .6rem .85rem; display: flex; align-items: center; gap: .6rem; } .sp-sidebar .list-group-item:hover { background: color-mix(in srgb, var(--sp-brand) 10%, transparent); color: var(--bs-body-color); } .sp-sidebar .list-group-item.active { background: var(--sp-brand); color: #fff; } .sp-sidebar .list-group-item i { width: 1.1rem; text-align: center; } /* ------------------------------------------------------------------ */ /* Auth pages */ /* ------------------------------------------------------------------ */ .sp-auth-wrap { min-height: calc(100vh - var(--sp-nav-h)); display: flex; align-items: center; } .sp-auth-card { width: 100%; max-width: 420px; margin: 0 auto; } /* ------------------------------------------------------------------ */ /* Footer */ /* ------------------------------------------------------------------ */ .sp-footer { background: #0b1120; color: #94a3b8; padding: 3rem 0 1.75rem; } .sp-footer h5, .sp-footer h6 { color: #fff; font-weight: 700; } .sp-footer a { color: #94a3b8; text-decoration: none; } .sp-footer a:hover { color: #fff; } /* small empty-state helper */ .sp-empty { text-align: center; padding: 2.5rem 1rem; color: var(--sp-muted); } .sp-empty i { font-size: 2rem; opacity: .5; display: block; margin-bottom: .75rem; }