/* ══════════════════════════════════════════════════════════════
   tokens.css — 마루 디자인 토큰 (단일 출처)

   규칙: 다른 CSS 파일에서 색·간격·크기 리터럴을 직접 쓰지 않는다.
        전부 var(--*)로 참조한다. 리터럴이 허용되는 곳은 이 파일뿐이다.

   규격 문서: docs/DESIGN_GUIDE.md
   로드 순서: tokens.css → base.css → shell.css → components.css → pages/*.css
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── 표면 ───────────────────────────────────────────────── */
  --bg-body:         #F5F4F0;   /* 페이지 바탕 */
  --bg-surface:      #FFFFFF;   /* 카드·패널 */
  --bg-surface-alt:  #ECEAE4;   /* 눌린 면, 표 헤더 */

  /* ── 글자 ───────────────────────────────────────────────── */
  /* 대비는 --bg-body(#F5F4F0) 기준으로 계산했다. 카드(#FFF) 위에서는 더 높다. */
  --text-primary:    #191C24;   /* 15.5:1  AAA */
  --text-secondary:  #4B5163;   /*  7.2:1  AAA */
  --text-muted:      #626878;   /*  5.1:1  AA  (구 #aaa 는 2.3:1 로 미달이었다) */
  --text-on-accent:  #FFFFFF;   /*  6.3:1  AA  (accent 배경 위) */

  /* ── 선 ─────────────────────────────────────────────────── */
  --border:          #DEDCD5;
  --border-light:    #EDEBE6;
  --border-strong:   #C9C6BC;

  /* ── 강조 ───────────────────────────────────────────────── */
  --accent:          #2B4FC7;   /*  6.3:1  AA  (구 #4a90e2 는 3.3:1 로 미달이었다) */
  --accent-hover:    #2340A6;
  --accent-soft:     #E5EAFA;   /* 선택 상태 배경 */
  --link-color:      var(--accent);

  /* ── 입력 ───────────────────────────────────────────────── */
  --input-bg:        #FFFFFF;
  --input-border:    #C9C6BC;
  --input-focus:     var(--accent);

  /* ── 의미색 ─────────────────────────────────────────────────
     강조색과 별개다. 상태 표현에만 쓰고 조작 유도에는 쓰지 않는다. */
  --ok:              #25714A;   --ok-bg:      #DFEFE6;
  --warn:            #8A5A0C;   --warn-bg:    #F7EDD9;
  --danger:          #A93226;   --danger-bg:  #F8E3E0;
  --info:            #1D5A8A;   --info-bg:    #DDEBF5;
  --idle:            #5A6072;   --idle-bg:    #ECEAE4;

  /* 표 행 배경 틴트 — 배지보다 훨씬 옅다. 행 전체를 물들이는 용도. */
  --tint-ok:         rgba(37, 113, 74, 0.06);
  --tint-danger:     rgba(169, 50, 38, 0.06);
  --tint-idle:       rgba(90, 96, 114, 0.06);

  /* ── 앱 셸 ──────────────────────────────────────────────────
     2단계에서 shell.css가 사용한다. 현재 navbar도 이 값을 쓴다. */
  --shell-bg:        #232833;
  --shell-text:      #C9CFD9;
  --shell-text-hi:   #FFFFFF;
  --shell-muted:     #8C95A3;
  --shell-hover:     rgba(255,255,255,0.10);
  --shell-active:    rgba(255,255,255,0.18);
  --shell-border:    rgba(255,255,255,0.10);

  /* ── 그림자 ─────────────────────────────────────────────── */
  --shadow-color:    rgba(0,0,0,0.10);
  --shadow-card:     0 1px 3px rgba(0,0,0,0.06);
  --shadow-raised:   0 4px 14px -6px rgba(0,0,0,0.18);
  --shadow-overlay:  0 12px 32px -12px rgba(0,0,0,0.30);
  --overlay-bg:      rgba(0,0,0,0.45);   /* 모달 뒷배경 */

  /* ── 도메인 고유색 ──────────────────────────────────────────
     의미가 외부에 고정돼 있어 테마와 무관하게 유지한다. */
  --lotto-ball-1:    #FBC400;   /* 1~10   노랑 */
  --lotto-ball-2:    #69C8F2;   /* 11~20  파랑 */
  --lotto-ball-3:    #FF7272;   /* 21~30  빨강 */
  --lotto-ball-4:    #AAAAAA;   /* 31~40  회색 */
  --lotto-ball-5:    #B0D840;   /* 41~45  초록 */
  --lotto-ball-ink-dark:  #333333;  /* 밝은 공 위 글자 */
  --lotto-ball-ink-light: #FFFFFF;  /* 어두운 공 위 글자 */
  /* 추첨기 캔버스 — 기계 안쪽이라 테마와 무관하게 어둡다. JS가 getComputedStyle 로 읽는다. */
  --lotto-drum-bg:     #0E1525;   /* 캔버스 바탕 */
  --lotto-drum-inner:  #2A4A80;   /* 드럼 안쪽 밝은 곳 */
  --lotto-drum-mid:    #1A3060;   /* 드럼 안쪽 중간 */
  --lotto-drum-deep:   #081828;   /* 드럼 안쪽 어두운 곳 */
  --lotto-drum-pipe:   #3060A8;   /* 파이프 */
  --lotto-drum-pipe-hi: #7AB0F0;  /* 파이프 하이라이트 */
  --lotto-drum-hole:   #0E1A30;   /* 파이프-드럼 연결 구멍 */
  --price-up:        #D12F2F;   /* 상승 — 한국 관행상 빨강 */
  --price-down:      #2563C9;   /* 하락 — 한국 관행상 파랑 */

  /* 포커 칩 — 실물 칩 색을 화면에 그대로 옮긴다.
     이모지(🔴🔵⚪)는 기기마다 모양이 다르고 흰 칩이 배경에 묻혀서 쓰지 않는다. */
  --chip-white:      #FFFFFF;
  --chip-red:        #D64545;
  --chip-blue:       #2F6FD0;
  --chip-green:      #2E8B57;
  --chip-black:      #2B2F38;
  --chip-edge:       rgba(0,0,0,0.30);   /* 칩 테두리 — 흰 칩이 배경에 묻히지 않게 */

  /* 기능 식별색 — 리포트 배지·좌측 띠에서 어느 기능의 산출물인지 구분하는 용도.
     선택·활성 상태에는 쓰지 않는다. 그건 --accent 영역이다. */
  --feat-curation:    #4F46E5;  --feat-curation-bg: #EEF2FF;   /* AI 큐레이션 — 인디고 */
  --feat-course:      #0F766E;  --feat-course-bg:   #E0F2F1;   /* AI 코스 — 청록 */
  --feat-monitor:     #00695C;  --feat-monitor-bg:  #E0F2F1;   /* 사이트 감시 */

  /* ══ 이하 비색상 토큰: 테마와 무관하므로 재정의하지 않는다 ══ */

  /* ── 간격 (4px 배수) ────────────────────────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;  --sp-10: 40px;  --sp-12: 48px;

  /* ── 모서리 ─────────────────────────────────────────────── */
  --r-sm:   6px;    /* 배지, 칩 */
  --r-md:   8px;    /* 버튼, 입력 */
  --r-lg:  12px;    /* 카드, 패널 */
  --r-full: 999px;  /* 알약형 */

  /* ── 서체 ───────────────────────────────────────────────────
     웹폰트를 로드하지 않는다. 한글 웹폰트는 압축해도 1MB를 넘어
     라즈베리파이 3에서 서빙할 이유가 없다. */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* ── 글자 크기 ──────────────────────────────────────────── */
  --fs-xs:   0.75rem;    /* 12px — 배지, 라벨 */
  --fs-sm:   0.8125rem;  /* 13px — 표 셀, 보조 설명 */
  --fs-base: 0.875rem;   /* 14px — 본문 */
  --fs-md:   1rem;       /* 16px — 입력 필드 최소값 (iOS 자동 확대 방지) */
  --fs-lg:   1.125rem;   /* 18px — 카드 제목 */
  --fs-xl:   1.25rem;    /* 20px — 섹션 제목 */
  --fs-2xl:  1.5rem;     /* 24px — 페이지 제목 */
  --fs-3xl:  1.875rem;   /* 30px — 대시보드 지표 */

  /* ── 두께 · 행간 ────────────────────────────────────────── */
  --fw-normal: 400;  --fw-medium: 600;  --fw-bold: 700;  --fw-black: 800;
  --lh-tight: 1.25;  --lh-snug: 1.45;   --lh-base: 1.7;

  /* ── 모션 ───────────────────────────────────────────────── */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ── z-index ────────────────────────────────────────────────
     임의의 z-index를 쓰지 않는다. 반드시 아래에서 고른다. */
  --z-base:     0;
  --z-sticky:   100;   /* 사이드바, 페이지 헤더 */
  --z-tabbar:   200;   /* 하단 탭 */
  --z-dropdown: 300;
  --z-overlay:  400;   /* 모달 뒷배경 */
  --z-modal:    500;
  --z-toast:    600;

  /* ── 레이아웃 ───────────────────────────────────────────── */
  --content-max:   1280px;
  --content-wide:  1440px;
  --sidebar-w:     224px;
  --topbar-h:      52px;
  --tabbar-h:      56px;
}

/* ══════════════════════════════════════════════════════════════
   다크 테마 — 3-상태 구조

   1) 시스템 설정 따름 (기본)  : 아래 미디어쿼리
   2) 사용자가 라이트 선택      : :root 기본값 (미디어쿼리가 :not()으로 비껴간다)
   3) 사용자가 다크 선택        : :root[data-theme="dark"]

   색은 반드시 토큰으로만 재정의한다. 컴포넌트 스타일을 미디어쿼리 안에
   직접 쓰면 위 3상태 중 하나에서 반드시 깨진다.
   ══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-body:        #131519;
    --bg-surface:     #1B1E25;
    --bg-surface-alt: #23272F;

    --text-primary:   #E5E7EE;   /* 14.8:1 */
    --text-secondary: #B4BAC8;   /*  9.4:1 */
    --text-muted:     #8B92A3;   /*  5.9:1  (구 #757575 는 4.0:1) */
    --text-on-accent: #10131A;

    --border:         #2C303A;
    --border-light:   #23272F;
    --border-strong:  #3B404C;

    --accent:         #8AAAF8;   /*  8.0:1 */
    --accent-hover:   #A3BDFA;
    --accent-soft:    #1E2740;

    --input-bg:       #23272F;
    --input-border:   #3B404C;

    --ok:     #5CBB8B;  --ok-bg:     #17301F;
    --warn:   #DFA53F;  --warn-bg:   #33291A;
    --danger: #E8776B;  --danger-bg: #35201F;
    --info:   #7FB6E0;  --info-bg:   #14283A;
    --idle:   #969DAF;  --idle-bg:   #23272F;

    --feat-curation:    #A5B4FC;  --feat-curation-bg: #1E1B4B;
    --feat-course:      #5EEAD4;  --feat-course-bg:   #0F2E2B;
    --feat-monitor:     #80CBC4;  --feat-monitor-bg:  #10302C;

    --tint-ok:     rgba(92, 187, 139, 0.10);
    --tint-danger: rgba(232, 119, 107, 0.10);
    --tint-idle:   rgba(150, 157, 175, 0.10);

    --shell-bg:       #0F1115;
    --shell-text:     #B4BAC8;
    --shell-text-hi:  #FFFFFF;
    --shell-muted:    #6C7283;
    --shell-hover:    rgba(255,255,255,0.08);
    --shell-active:   rgba(255,255,255,0.14);
    --shell-border:   rgba(255,255,255,0.08);

    --shadow-color:   rgba(0,0,0,0.40);
    --shadow-card:    0 1px 3px rgba(0,0,0,0.30);
    --shadow-raised:  0 4px 14px -6px rgba(0,0,0,0.50);
    --shadow-overlay: 0 12px 32px -12px rgba(0,0,0,0.65);
  --overlay-bg:     rgba(0,0,0,0.65);
    --overlay-bg:     rgba(0,0,0,0.65);

    --price-up:       #F87171;
    --price-down:     #7FA9F0;

    --chip-white:     #E6E8EC;
    --chip-red:       #E0605F;
    --chip-blue:      #5B92E5;
    --chip-green:     #4FA97A;
    --chip-black:     #3A404C;
    --chip-edge:      rgba(255,255,255,0.38);
  }
}

:root[data-theme="dark"] {
  --bg-body:        #131519;
  --bg-surface:     #1B1E25;
  --bg-surface-alt: #23272F;

  --text-primary:   #E5E7EE;
  --text-secondary: #B4BAC8;
  --text-muted:     #8B92A3;
  --text-on-accent: #10131A;

  --border:         #2C303A;
  --border-light:   #23272F;
  --border-strong:  #3B404C;

  --accent:         #8AAAF8;
  --accent-hover:   #A3BDFA;
  --accent-soft:    #1E2740;

  --input-bg:       #23272F;
  --input-border:   #3B404C;

  --ok:     #5CBB8B;  --ok-bg:     #17301F;
  --warn:   #DFA53F;  --warn-bg:   #33291A;
  --danger: #E8776B;  --danger-bg: #35201F;
  --info:   #7FB6E0;  --info-bg:   #14283A;
  --idle:   #969DAF;  --idle-bg:   #23272F;

  --feat-curation:    #A5B4FC;  --feat-curation-bg: #1E1B4B;
  --feat-course:      #5EEAD4;  --feat-course-bg:   #0F2E2B;
  --feat-monitor:     #80CBC4;  --feat-monitor-bg:  #10302C;

  --tint-ok:     rgba(92, 187, 139, 0.10);
  --tint-danger: rgba(232, 119, 107, 0.10);
  --tint-idle:   rgba(150, 157, 175, 0.10);

  --shell-bg:       #0F1115;
  --shell-text:     #B4BAC8;
  --shell-text-hi:  #FFFFFF;
  --shell-muted:    #6C7283;
  --shell-hover:    rgba(255,255,255,0.08);
  --shell-active:   rgba(255,255,255,0.14);
  --shell-border:   rgba(255,255,255,0.08);

  --shadow-color:   rgba(0,0,0,0.40);
  --shadow-card:    0 1px 3px rgba(0,0,0,0.30);
  --shadow-raised:  0 4px 14px -6px rgba(0,0,0,0.50);
  --shadow-overlay: 0 12px 32px -12px rgba(0,0,0,0.65);

  --price-up:       #F87171;
  --price-down:     #7FA9F0;

  --chip-white:     #E6E8EC;
  --chip-red:       #E0605F;
  --chip-blue:      #5B92E5;
  --chip-green:     #4FA97A;
  --chip-black:     #3A404C;
  --chip-edge:      rgba(255,255,255,0.38);
}

/* 모션 축소 설정 존중 — 전역 적용 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}