/* ============================================================
 * base.css — :root 변수, 리셋, 스크롤바, 헤더/로고/홈버튼
 * ------------------------------------------------------------
 * 📦 분리: 2026-05-11
 * 🎨 Finance Pro 디자인 시스템 적용: 2026-05-15
 * 원본 위치: 01-short_trem_stock_investment.html 라인 22-99
 * 다른 메인 페이지(02, 03)에서도 재사용 가능
 *
 * ⚠️ 색상 컨벤션 변경: 한국 시장 관례(상승=빨강, 하락=파랑) 적용
 * 변수 이름(--green, --red)은 기존 호환을 위해 유지하되 값이 뒤집힘
 * ============================================================ */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    :root {
      /* Finance Pro 표준 토큰 */
      --fin-bg-0: #0A0E14;
      --fin-bg-1: #131820;
      --fin-bg-2: #1C2330;
      --fin-bg-3: #252D3D;
      --fin-text-primary: #E4E7EB;
      --fin-text-secondary: #9AA0AC;
      --fin-text-tertiary: #6C7280;
      --fin-up: #E74C3C;
      --fin-up-bg: rgba(231, 76, 60, 0.12);
      --fin-up-border: rgba(231, 76, 60, 0.3);
      --fin-down: #3498DB;
      --fin-down-bg: rgba(52, 152, 219, 0.12);
      --fin-down-border: rgba(52, 152, 219, 0.3);
      --fin-flat: #95A5A6;
      --fin-accent: #4A9EFF;
      --fin-accent-hover: #6BB1FF;
      --fin-warning: #F39C12;
      --fin-border: #2A3441;
      --fin-border-strong: #3A4452;

      /* 레거시 변수 호환 매핑 (한국식 색상) */
      --bg: #0A0E14;          /* 기존 #0a0e17 → Finance Pro */
      --surface: #131820;     /* 기존 #111827 */
      --surface2: #1C2330;    /* 기존 #1a2332 */
      --border: #2A3441;      /* 기존 #2a3444 */
      --primary: #4A9EFF;     /* 기존 #3b82f6 → Finance Pro accent */
      --green: #E74C3C;       /* ⚠️ 한국식: 상승=빨강 (기존 #10b981 초록) */
      --red: #3498DB;         /* ⚠️ 한국식: 하락=파랑 (기존 #ef4444 빨강) */
      --up: #E74C3C;          /* 명시적 상승 색상 */
      --down: #3498DB;        /* 명시적 하락 색상 */
      --flat: #95A5A6;        /* 보합 */
      --yellow: #F39C12;      /* 경고 (기존 #f59e0b) */
      --purple: #A78BFA;      /* 기존 #8b5cf6 */
      --text: #E4E7EB;        /* 기존 #e5e7eb */
      --text2: #9AA0AC;       /* 기존 #9ca3af */
      --text3: #6C7280        /* 기존 #6b7280 */
    }

    body {
      font-family: 'Inter', 'Pretendard', 'Noto Sans KR', 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      word-break: keep-all;
      overflow-wrap: break-word;
      line-height: 1.6
    }

    /* 숫자/데이터는 모노스페이스 + tabular-nums (Finance Pro 핵심 규칙) */
    .number, .price, .amount, .ratio, .data-num,
    [class*="price"], [class*="-num"], [class*="rate"] {
      font-family: 'JetBrains Mono', 'IBM Plex Mono', 'D2Coding', 'Consolas', monospace;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum'
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px
    }

    ::-webkit-scrollbar-track {
      background: var(--bg)
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--fin-border-strong)
    }

    .header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      display: flex;
      align-items: center;
      height: 56px;
      position: sticky;
      top: 0;
      z-index: 100
    }

    .home-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      margin-right: 10px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background: var(--fin-accent);
      border-radius: var(--radius-md, 4px);
      text-decoration: none;
      white-space: nowrap;
      transition: opacity .15s, background .15s;
      flex-shrink: 0;
    }

    .home-btn:hover {
      background: var(--fin-accent-hover);
      opacity: 1;
    }

    .home-btn:active {
      transform: scale(0.96);
    }