/* ═══════════════════════════════════════════════════════════════════ * v2 Theme — signal_service_web v2 Stock SaaS * 다크 + 에메랄드 (v5 PySide6 차용) + 트레이딩 시그널 색상 * * Scope: .v2-* prefix 로 격리. 기존 style.css / Bootstrap / Tailwind 영향 X * 작성일: 2026-04-28 * 적용 페이지: /stock (Phase 1), /terms /privacy /disclaimer (Phase 1) * ═══════════════════════════════════════════════════════════════════ */ /* ─── Font Import ─────────────────────────────────────────────────── */ /* Inter (영문 본문/헤더) + Noto Sans KR (한국어) + JetBrains Mono (가격/숫자) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ─── Design Tokens (CSS Variables) ────────────────────────────────── */ :root { /* 배경 / 캔버스 */ --v2-bg: #0E1117; --v2-surface: #1A1F2E; --v2-surface-hover: #232B3D; --v2-surface-active: #2D3650; --v2-border: #262F3E; --v2-border-strong: #3A4458; /* 액센트 / 브랜드 */ --v2-primary: #10B981; --v2-primary-glow: #34D399; --v2-primary-dim: #047857; --v2-secondary: #6366F1; --v2-secondary-glow: #818CF8; /* 트레이딩 시그널 */ --v2-long: #22C55E; --v2-long-bg: rgba(34, 197, 94, 0.12); --v2-short: #EF4444; --v2-short-bg: rgba(239, 68, 68, 0.12); --v2-warning: #F59E0B; --v2-warning-bg: rgba(245, 158, 11, 0.12); --v2-info: #3B82F6; --v2-info-bg: rgba(59, 130, 246, 0.12); --v2-neutral: #94A3B8; /* 타이포 */ --v2-text: #E5E7EB; --v2-text-muted: #94A3B8; --v2-text-subtle: #64748B; --v2-text-inverse: #0E1117; /* 폰트 패밀리 */ --v2-font-base: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --v2-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* 사이즈 / 간격 (8px 그리드) */ --v2-radius-sm: 6px; --v2-radius: 12px; --v2-radius-lg: 16px; --v2-radius-full: 9999px; --v2-space-1: 4px; --v2-space-2: 8px; --v2-space-3: 12px; --v2-space-4: 16px; --v2-space-5: 20px; --v2-space-6: 24px; --v2-space-8: 32px; --v2-space-10: 40px; /* 그림자 (다크 톤에 맞춰 깊이감) */ --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --v2-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --v2-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --v2-shadow-glow: 0 0 16px rgba(16, 185, 129, 0.25); /* 트랜지션 */ --v2-transition: all 0.18s ease; --v2-transition-fast: all 0.1s ease; /* z-index 레이어 */ --v2-z-base: 1; --v2-z-card: 10; --v2-z-dropdown: 100; --v2-z-banner: 200; --v2-z-modal: 1000; --v2-z-toast: 2000; } /* ─── v2 페이지 wrapper ───────────────────────────────────────────── */ /* 사용법: 또는 v2 영역 wrapper 에 .v2-page 적용 * 기존 페이지 (/my, /dashboard 등) 는 .v2-page 없으니 영향 X */ .v2-page { background: var(--v2-bg); color: var(--v2-text); font-family: var(--v2-font-base); font-size: 14px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .v2-page h1, .v2-page h2, .v2-page h3, .v2-page h4 { color: var(--v2-text); font-family: var(--v2-font-base); font-weight: 600; margin: 0 0 var(--v2-space-3) 0; letter-spacing: -0.01em; } .v2-page h1 { font-size: 1.875rem; font-weight: 700; } .v2-page h2 { font-size: 1.5rem; } .v2-page h3 { font-size: 1.25rem; } .v2-page h4 { font-size: 1rem; } .v2-page a { color: var(--v2-primary-glow); text-decoration: none; transition: var(--v2-transition); } .v2-page a:hover { color: var(--v2-primary); text-decoration: underline; } .v2-page p { margin: 0 0 var(--v2-space-3) 0; } .v2-page code, .v2-page pre, .v2-page .v2-mono { font-family: var(--v2-font-mono); } /* 스크롤바 (다크 톤) */ .v2-page ::-webkit-scrollbar { width: 10px; height: 10px; } .v2-page ::-webkit-scrollbar-track { background: var(--v2-bg); } .v2-page ::-webkit-scrollbar-thumb { background: var(--v2-border-strong); border-radius: var(--v2-radius-sm); } .v2-page ::-webkit-scrollbar-thumb:hover { background: var(--v2-text-subtle); } /* ─── Card ────────────────────────────────────────────────────────── */ .v2-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); padding: var(--v2-space-5); box-shadow: var(--v2-shadow-sm); transition: var(--v2-transition); } .v2-card:hover { border-color: var(--v2-border-strong); } .v2-card-title { font-size: 0.75rem; font-weight: 600; color: var(--v2-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--v2-space-3); } .v2-card-body { color: var(--v2-text); } /* ─── Buttons ─────────────────────────────────────────────────────── */ .v2-btn-primary, .v2-btn-outline, .v2-btn-danger, .v2-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-space-2); padding: var(--v2-space-2) var(--v2-space-4); border-radius: var(--v2-radius-sm); font-family: var(--v2-font-base); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: var(--v2-transition); border: 1px solid transparent; line-height: 1.4; text-decoration: none; user-select: none; white-space: nowrap; } .v2-btn-primary { background: linear-gradient(135deg, var(--v2-primary) 0%, var(--v2-primary-glow) 100%); color: var(--v2-text-inverse); border-color: var(--v2-primary); } .v2-btn-primary:hover:not(:disabled) { box-shadow: var(--v2-shadow-glow); transform: translateY(-1px); } .v2-btn-primary:active:not(:disabled) { transform: translateY(0); } .v2-btn-primary:disabled, .v2-btn-outline:disabled, .v2-btn-danger:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .v2-btn-outline { background: transparent; color: var(--v2-text); border-color: var(--v2-border-strong); } .v2-btn-outline:hover:not(:disabled) { background: var(--v2-surface-hover); border-color: var(--v2-primary); color: var(--v2-primary-glow); } .v2-btn-danger { background: var(--v2-short); color: white; border-color: var(--v2-short); } .v2-btn-danger:hover:not(:disabled) { opacity: 0.9; } .v2-btn-ghost { background: transparent; color: var(--v2-text-muted); } .v2-btn-ghost:hover:not(:disabled) { background: var(--v2-surface-hover); color: var(--v2-text); } .v2-btn-sm { padding: var(--v2-space-1) var(--v2-space-3); font-size: 0.75rem; } .v2-btn-lg { padding: var(--v2-space-3) var(--v2-space-6); font-size: 1rem; } /* ─── APPLY / SAVED 버튼 (행별 수정 상태) ───────────────────────────── */ /* SECTION 2.4 ActivePositions TP/SL/TS 행별 수정용 */ .v2-apply-btn { background: var(--v2-warning); color: white; border-color: var(--v2-warning); padding: var(--v2-space-1) var(--v2-space-3); border-radius: var(--v2-radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: var(--v2-transition); border: 1px solid; display: inline-flex; align-items: center; gap: 4px; } .v2-apply-btn:hover { opacity: 0.9; } .v2-saved-btn { background: transparent; color: var(--v2-long); border: 1px solid var(--v2-long); padding: var(--v2-space-1) var(--v2-space-3); border-radius: var(--v2-radius-sm); font-size: 0.75rem; font-weight: 600; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; } /* ─── Inputs ──────────────────────────────────────────────────────── */ .v2-input, .v2-select, .v2-textarea { width: 100%; padding: var(--v2-space-2) var(--v2-space-3); background: var(--v2-bg); color: var(--v2-text); border: 1px solid var(--v2-border-strong); border-radius: var(--v2-radius-sm); font-family: var(--v2-font-base); font-size: 0.875rem; transition: var(--v2-transition); outline: none; } .v2-input:focus, .v2-select:focus, .v2-textarea:focus { border-color: var(--v2-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); } .v2-input::placeholder, .v2-textarea::placeholder { color: var(--v2-text-subtle); } .v2-input:disabled, .v2-select:disabled { background: var(--v2-surface); color: var(--v2-text-subtle); cursor: not-allowed; } .v2-input.v2-mono { font-family: var(--v2-font-mono); letter-spacing: 0.02em; } .v2-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--v2-text-muted); margin-bottom: var(--v2-space-1); text-transform: uppercase; letter-spacing: 0.05em; } .v2-label-required::after { content: ' *'; color: var(--v2-short); } /* ─── Stepper ([−][input][+] TP/SL/TS 입력 그룹) ────────────────────── */ /* SECTION 2.3, 2.4 에서 사용 */ .v2-stepper { display: inline-flex; align-items: center; border: 1px solid var(--v2-border-strong); border-radius: var(--v2-radius-sm); overflow: hidden; background: var(--v2-bg); } .v2-stepper-btn { width: 28px; height: 28px; background: var(--v2-surface); color: var(--v2-text); border: none; cursor: pointer; font-weight: 700; transition: var(--v2-transition-fast); font-size: 1rem; line-height: 1; } .v2-stepper-btn:hover:not(:disabled) { background: var(--v2-surface-hover); color: var(--v2-primary-glow); } .v2-stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; } .v2-stepper-input { width: 60px; height: 28px; border: none; border-left: 1px solid var(--v2-border); border-right: 1px solid var(--v2-border); background: var(--v2-bg); color: var(--v2-text); text-align: center; font-family: var(--v2-font-mono); font-size: 0.875rem; outline: none; } .v2-stepper-input:focus { background: var(--v2-surface-hover); } /* ─── Toggle Switch ───────────────────────────────────────────────── */ .v2-toggle { display: inline-flex; align-items: center; gap: var(--v2-space-2); cursor: pointer; user-select: none; } .v2-toggle-input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; background: var(--v2-border-strong); border-radius: var(--v2-radius-full); position: relative; cursor: pointer; transition: var(--v2-transition); margin: 0; } .v2-toggle-input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: var(--v2-transition); } .v2-toggle-input:checked { background: var(--v2-primary); } .v2-toggle-input:checked::before { transform: translateX(16px); } .v2-toggle-label { font-size: 0.875rem; color: var(--v2-text); } /* ─── Tabs ────────────────────────────────────────────────────────── */ .v2-tabs { display: flex; gap: var(--v2-space-2); border-bottom: 1px solid var(--v2-border); margin-bottom: var(--v2-space-5); overflow-x: auto; } .v2-tab { padding: var(--v2-space-3) var(--v2-space-4); background: transparent; color: var(--v2-text-muted); border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--v2-font-base); font-size: 0.875rem; font-weight: 500; transition: var(--v2-transition); white-space: nowrap; } .v2-tab:hover { color: var(--v2-text); } .v2-tab.v2-tab-active { color: var(--v2-primary-glow); border-bottom-color: var(--v2-primary); } /* ─── Table ───────────────────────────────────────────────────────── */ .v2-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .v2-table thead th { text-align: left; padding: var(--v2-space-3); color: var(--v2-text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--v2-border); background: var(--v2-surface); } .v2-table tbody td { padding: var(--v2-space-3); border-bottom: 1px solid var(--v2-border); color: var(--v2-text); } .v2-table tbody tr { transition: var(--v2-transition-fast); } .v2-table tbody tr:hover { background: var(--v2-surface-hover); } .v2-table tbody tr.v2-row-selected { background: var(--v2-surface-active); box-shadow: inset 3px 0 0 var(--v2-primary); } .v2-table .v2-num { font-family: var(--v2-font-mono); text-align: right; } .v2-table .v2-pnl-positive { color: var(--v2-long); } .v2-table .v2-pnl-negative { color: var(--v2-short); } /* ─── Badges ──────────────────────────────────────────────────────── */ .v2-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--v2-radius-full); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.4; } .v2-badge-new { background: var(--v2-primary); color: var(--v2-text-inverse); box-shadow: var(--v2-shadow-glow); } .v2-badge-long { background: var(--v2-long-bg); color: var(--v2-long); } .v2-badge-short { background: var(--v2-short-bg); color: var(--v2-short); } .v2-badge-warning { background: var(--v2-warning-bg); color: var(--v2-warning); } .v2-badge-info { background: var(--v2-info-bg); color: var(--v2-info); } .v2-badge-neutral { background: var(--v2-surface-hover); color: var(--v2-text-muted); } /* ─── Disclaimer Banner (상단 상시 노출) ───────────────────────────── */ .v2-disclaimer-banner { position: sticky; top: 0; z-index: var(--v2-z-banner); background: var(--v2-surface); border-bottom: 1px solid var(--v2-border); padding: var(--v2-space-2) var(--v2-space-5); font-size: 0.75rem; color: var(--v2-text-muted); display: flex; align-items: center; gap: var(--v2-space-2); } .v2-disclaimer-banner a { color: var(--v2-primary-glow); margin-left: auto; } /* ─── Modal (첫 진입 동의 모달 등) ─────────────────────────────────── */ .v2-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: var(--v2-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--v2-space-5); } .v2-modal { background: var(--v2-surface); border: 1px solid var(--v2-border-strong); border-radius: var(--v2-radius-lg); padding: var(--v2-space-8); box-shadow: var(--v2-shadow-lg); max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; } .v2-modal-title { font-size: 1.25rem; font-weight: 700; color: var(--v2-text); margin-bottom: var(--v2-space-3); display: flex; align-items: center; gap: var(--v2-space-2); } .v2-modal-body { color: var(--v2-text); line-height: 1.7; margin-bottom: var(--v2-space-5); } .v2-modal-body p { margin-bottom: var(--v2-space-2); } .v2-modal-actions { display: flex; gap: var(--v2-space-3); justify-content: flex-end; } /* ─── Recently Listed Widget (SECTION 2.6 핵심) ─────────────────────── */ .v2-recent-card { background: linear-gradient(135deg, var(--v2-surface) 0%, var(--v2-surface-hover) 100%); border: 1px solid var(--v2-primary-dim); border-radius: var(--v2-radius); padding: var(--v2-space-5); margin-bottom: var(--v2-space-5); } .v2-recent-title { font-size: 0.875rem; font-weight: 600; color: var(--v2-primary-glow); margin-bottom: var(--v2-space-3); display: flex; align-items: center; gap: var(--v2-space-2); } .v2-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--v2-space-3); } .v2-recent-item { background: var(--v2-bg); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); padding: var(--v2-space-3); display: flex; flex-direction: column; gap: var(--v2-space-1); font-size: 0.75rem; } .v2-recent-item .v2-recent-symbol { font-family: var(--v2-font-mono); font-weight: 600; color: var(--v2-text); font-size: 0.875rem; } .v2-recent-item .v2-recent-asset { color: var(--v2-text-muted); } .v2-recent-item .v2-recent-date { color: var(--v2-text-subtle); font-family: var(--v2-font-mono); } /* ─── Toast (알림) ────────────────────────────────────────────────── */ .v2-toast-container { position: fixed; top: var(--v2-space-5); right: var(--v2-space-5); z-index: var(--v2-z-toast); display: flex; flex-direction: column; gap: var(--v2-space-2); pointer-events: none; } .v2-toast { background: var(--v2-surface); border: 1px solid var(--v2-border-strong); border-radius: var(--v2-radius-sm); padding: var(--v2-space-3) var(--v2-space-4); color: var(--v2-text); box-shadow: var(--v2-shadow); pointer-events: auto; min-width: 280px; max-width: 400px; animation: v2-toast-in 0.3s ease; } .v2-toast.v2-toast-success { border-left: 3px solid var(--v2-long); } .v2-toast.v2-toast-error { border-left: 3px solid var(--v2-short); } .v2-toast.v2-toast-warning { border-left: 3px solid var(--v2-warning); } .v2-toast.v2-toast-info { border-left: 3px solid var(--v2-info); } @keyframes v2-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ─── Layout Helpers ──────────────────────────────────────────────── */ .v2-row { display: flex; gap: var(--v2-space-3); } .v2-row-wrap { flex-wrap: wrap; } .v2-col { flex: 1; min-width: 0; } .v2-stack { display: flex; flex-direction: column; gap: var(--v2-space-3); } .v2-flex-between { display: flex; justify-content: space-between; align-items: center; } .v2-flex-end { display: flex; justify-content: flex-end; } .v2-flex-center { display: flex; justify-content: center; align-items: center; } .v2-mt-1 { margin-top: var(--v2-space-1); } .v2-mt-2 { margin-top: var(--v2-space-2); } .v2-mt-3 { margin-top: var(--v2-space-3); } .v2-mt-4 { margin-top: var(--v2-space-4); } .v2-mt-5 { margin-top: var(--v2-space-5); } .v2-mb-1 { margin-bottom: var(--v2-space-1); } .v2-mb-2 { margin-bottom: var(--v2-space-2); } .v2-mb-3 { margin-bottom: var(--v2-space-3); } .v2-mb-4 { margin-bottom: var(--v2-space-4); } .v2-mb-5 { margin-bottom: var(--v2-space-5); } .v2-text-muted { color: var(--v2-text-muted); } .v2-text-subtle { color: var(--v2-text-subtle); } .v2-text-primary { color: var(--v2-primary-glow); } .v2-text-long { color: var(--v2-long); } .v2-text-short { color: var(--v2-short); } .v2-text-center { text-align: center; } .v2-text-right { text-align: right; } .v2-text-xs { font-size: 0.75rem; } .v2-text-sm { font-size: 0.875rem; } .v2-text-lg { font-size: 1.125rem; } .v2-text-xl { font-size: 1.25rem; } .v2-font-mono { font-family: var(--v2-font-mono); } .v2-font-bold { font-weight: 600; } .v2-font-extrabold { font-weight: 700; } /* ─── Responsive (모바일/PWA 후순위 대비) ─────────────────────────── */ @media (max-width: 768px) { .v2-page { font-size: 14px; } .v2-page h1 { font-size: 1.5rem; } .v2-page h2 { font-size: 1.25rem; } .v2-card { padding: var(--v2-space-4); } .v2-modal { padding: var(--v2-space-5); } .v2-recent-grid { grid-template-columns: 1fr; } .v2-tabs { gap: 0; } .v2-tab { padding: var(--v2-space-2) var(--v2-space-3); font-size: 0.8rem; } }