/*
 * 프리또 디자인 토큰 — docs/디자인/디자인-시스템.md §3
 * 규칙: 모든 이름은 --ft- 접두사 (Tabler --tblr-·옛 --lotto-color와 충돌하지 않게)
 *       색은 역할 이름으로 쓴다. 컴포넌트·틀 CSS에는 hex를 직접 쓰지 않는다 — 색을 바꿀 곳은 이 파일 한 곳
 *       색 옆 주석의 비율 = WCAG 2.x 대비비 (본문 4.5:1, 큰 글자·UI 경계 3:1 이상)
 * 공존: 옛 화면(<html data-ui="v1">)도 이 파일 + shell.css + components.css를 받는다 (§6.2)
 *       다크 모드는 새 화면(data-ui="v2")에서만 켠다 — 옛 화면은 hex가 박혀 있어 다크가 깨진다 (§3.8)
 */
:root {
  /* ── 글꼴 ── */
  --ft-font: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

  /* ── 글자 크기 / 줄 높이 (6단계) ── */
  --ft-text-xs: 12px;  --ft-lh-xs: 16px;   /* 배지·캡션·탭바 라벨 — 최소 크기 */
  --ft-text-sm: 14px;  --ft-lh-sm: 20px;   /* 보조 글·표 본문·메타 */
  --ft-text-md: 16px;  --ft-lh-md: 24px;   /* 본문·입력 (16 미만이면 iOS가 확대) */
  --ft-text-lg: 18px;  --ft-lh-lg: 26px;   /* 카드 제목·등수 금액 */
  --ft-text-xl: 22px;  --ft-lh-xl: 30px;   /* 모바일 페이지 제목·1등 금액 */
  --ft-text-2xl: 28px; --ft-lh-2xl: 36px;  /* 데스크톱 페이지 제목 */
  --ft-weight-regular: 400;
  --ft-weight-semibold: 600;
  --ft-weight-bold: 700;

  /* ── 간격 (4px 단위) ── */
  --ft-space-1: 4px;
  --ft-space-2: 8px;
  --ft-space-3: 12px;
  --ft-space-4: 16px;
  --ft-space-5: 20px;
  --ft-space-6: 24px;
  --ft-space-8: 32px;
  --ft-space-10: 40px;
  --ft-space-12: 48px;
  --ft-gutter: 16px;       /* 화면 좌우 여백 (≥768px 24px) */
  --ft-card-pad: 16px;     /* 카드 안쪽 여백 (≥768px 20px) */
  --ft-touch: 44px;        /* 최소 터치 영역 */

  /* ── 모서리 ── */
  --ft-radius-sm: 6px;     /* 배지·말머리·등수 표시 */
  --ft-radius-md: 10px;    /* 버튼·입력·알림 띠·광고 자리 */
  --ft-radius-lg: 14px;    /* 카드 */
  --ft-radius-full: 999px; /* 공·칩·세그먼트 */

  /* ── 그림자 ── */
  --ft-shadow-1: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);   /* 카드 */
  --ft-shadow-2: 0 4px 12px rgb(16 24 40 / 10%), 0 2px 4px rgb(16 24 40 / 6%); /* 지도 위 버튼·드롭다운 */
  --ft-shadow-3: 0 -4px 16px rgb(16 24 40 / 10%);                             /* 하단 시트 */

  /* ── 중립색 (라이트) ── */
  --ft-bg: #f4f6f8;            /* 페이지 바탕 */
  --ft-surface: #ffffff;       /* 카드 */
  --ft-surface-2: #f8fafc;     /* 카드 안 구획·표 머리·비활성 */
  --ft-border: #e3e8ee;        /* 구분선 (장식) */
  --ft-border-strong: #8a94a3; /* 입력·보조 버튼 테두리 — 흰 바탕 3.07:1 (UI 경계 3:1) */
  --ft-text: #111827;          /* 흰 17.74:1 · 바탕 16.37:1 */
  --ft-text-2: #4b5563;        /* 흰 7.56:1 · 바탕 6.98:1 · 구획 7.22:1 */
  --ft-text-3: #5f6b7a;        /* 흰 5.43:1 · 바탕 5.01:1 — 가장 옅은 글자 (이보다 옅게 쓰지 않는다) */

  /* ── 상품색 ── */
  --ft-lotto: #1b6fa8;         /* 흰 글자 5.40:1 · 바탕 위 글자 4.99:1 (옛 #227ebd 4.39:1) */
  --ft-lotto-strong: #155a8a;  /* 눌림·호버 — 흰 7.34:1 */
  --ft-lotto-weak: #e8f1f8;    /* 연한 바탕 — 위 강조색 글자 4.73:1 */
  --ft-pension: #2c6c9c;       /* 흰 글자 5.63:1 (옛 값 유지) */
  --ft-pension-strong: #22567d;
  --ft-pension-weak: #e9f1f7;
  --ft-speetto: #4a66b0;       /* 흰 글자 5.50:1 (옛 #5e7bc1 4.13:1) */
  --ft-speetto-strong: #3b528d;
  --ft-speetto-weak: #eef1f9;

  /* 현재 상품 강조색 — <html data-product="…">(또는 그 속성이 있는 요소 안)에서 바뀐다 */
  --ft-accent: var(--ft-lotto);
  --ft-accent-strong: var(--ft-lotto-strong);
  --ft-accent-weak: var(--ft-lotto-weak);
  --ft-on-accent: #ffffff;

  /* ── 의미색 ── */
  --ft-success: #067647;  --ft-success-weak: #ecfdf3;  /* 흰 5.69:1 · 연한 바탕 5.40:1 */
  --ft-warning: #b54708;  --ft-warning-weak: #fffaeb;  /* 흰 5.43:1 · 연한 바탕 5.20:1 */
  --ft-danger: #b42318;   --ft-danger-weak: #fef3f2;   /* 흰 6.57:1 */
  --ft-on-danger: #ffffff;
  --ft-info: var(--ft-accent);
  --ft-info-weak: var(--ft-accent-weak);

  /* ── 로또 공 — 동행복권 5색 유지, 숫자는 진한 색 ── */
  --ft-ball-1: #fbc400;  /* 1~10  · 숫자 10.98:1 (옛 흰 글자 1.62:1) */
  --ft-ball-2: #69c8f2;  /* 11~20 · 9.41:1 (1.88:1) */
  --ft-ball-3: #ff7272;  /* 21~30 · 6.68:1 (2.66:1) */
  --ft-ball-4: #aaaaaa;  /* 31~40 · 7.64:1 (2.32:1) */
  --ft-ball-5: #b0d840;  /* 41~45 · 10.76:1 (1.65:1) */
  --ft-ball-text: #111827;
  --ft-ball-edge: rgb(17 24 39 / 14%);  /* 흰 바탕에서 노랑·하늘 공 윤곽 */
  --ft-ball-empty: #e3e8ee;             /* 미추첨·빈 칸 */
  --ft-ball-sm: 24px;   /* 목록·표 안 (글자 12px) */
  --ft-ball-md: 32px;   /* 발행 번호·통계 카드 (글자 14px) */
  --ft-ball-lg: 40px;   /* 회차 카드 — ≥768px 48px, ≤374px 36px */

  /* ── 데이터 시각화 ── */
  --ft-viz-1: var(--ft-accent);
  --ft-viz-2: #e8590c;
  --ft-viz-3: #2f9e44;
  --ft-viz-low: #eaf2f9;
  --ft-viz-high: #1b6fa8;

  /* ── 레이아웃 ── */
  --ft-topbar-h: 56px;      /* ≥768px 64px */
  --ft-bottomnav-h: 60px;   /* + 화면 아래 안전 영역 */
  --ft-content-max: 1120px;
  --ft-aside-w: 320px;
  --ft-z-sticky: 10;
  --ft-z-nav: 1020;         /* TopBar·BottomNav — 옛 Tabler 드롭다운(1000)·고정 요소 위 */
  --ft-z-sheet: 1030;
  --ft-z-dialog: 1040;

  /* ── 상호작용 ── */
  --ft-focus: var(--ft-accent);  /* 포커스 링 — 흰 바탕 5.40:1 */
  --ft-dur: 150ms;
  --ft-ease: cubic-bezier(.2, 0, 0, 1);
}

@media (min-width: 768px) {
  :root {
    --ft-gutter: 24px;
    --ft-card-pad: 20px;
    --ft-ball-lg: 48px;
    --ft-topbar-h: 64px;
  }
}

@media (max-width: 374px) {
  :root { --ft-ball-lg: 36px; }
}

/* 상품별 강조색 */
[data-product="pension"] {
  --ft-accent: var(--ft-pension);
  --ft-accent-strong: var(--ft-pension-strong);
  --ft-accent-weak: var(--ft-pension-weak);
}
[data-product="speetto"] {
  --ft-accent: var(--ft-speetto);
  --ft-accent-strong: var(--ft-speetto-strong);
  --ft-accent-weak: var(--ft-speetto-weak);
}

/* ── 다크 — 새 화면(data-ui="v2")에서만. 시스템 설정을 따르고 data-theme로 고정 (§3.8·§7-2) ── */
:root[data-ui="v2"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root[data-ui="v2"]:not([data-theme="light"]) {
    color-scheme: dark;
    --ft-bg: #0f1216;
    --ft-surface: #171b21;
    --ft-surface-2: #1e242c;
    --ft-border: #2a313b;
    --ft-border-strong: #6b7685;  /* 표면 3.75:1 */
    --ft-text: #e6e8eb;           /* 표면 14.08:1 · 바탕 15.30:1 */
    --ft-text-2: #a7afba;         /* 7.80:1 · 구획 7.06:1 */
    --ft-text-3: #8b93a1;         /* 5.58:1 · 구획 5.05:1 */
    --ft-lotto: #5aa9e6;          /* 표면 위 글자 6.79:1 · 버튼 위 진한 글자 7.36:1 */
    --ft-lotto-strong: #7fbdec;
    --ft-lotto-weak: #13283a;     /* 5.93:1 */
    --ft-pension: #6aa6d4;        /* 6.60:1 */
    --ft-pension-strong: #8cbbe0;
    --ft-pension-weak: #142838;
    --ft-speetto: #8ea2e0;        /* 6.91:1 */
    --ft-speetto-strong: #a9b9ea;
    --ft-speetto-weak: #1b2340;
    --ft-on-accent: #0b1220;
    --ft-success: #4ade80; --ft-success-weak: #0f2a1b;  /* 8.81:1 */
    --ft-warning: #f7b955; --ft-warning-weak: #2e2210;  /* 8.89:1 */
    --ft-danger: #f97066;  --ft-danger-weak: #331513;   /* 6.20:1 */
    --ft-on-danger: #0b1220;
    --ft-ball-edge: rgb(0 0 0 / 0%);
    --ft-ball-empty: #2a313b;
    --ft-viz-low: #16283a;
    --ft-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
    --ft-shadow-2: 0 4px 12px rgb(0 0 0 / 50%);
    --ft-shadow-3: 0 -4px 16px rgb(0 0 0 / 50%);
  }
}
:root[data-ui="v2"][data-theme="dark"] {
  color-scheme: dark;
  --ft-bg: #0f1216;
  --ft-surface: #171b21;
  --ft-surface-2: #1e242c;
  --ft-border: #2a313b;
  --ft-border-strong: #6b7685;
  --ft-text: #e6e8eb;
  --ft-text-2: #a7afba;
  --ft-text-3: #8b93a1;
  --ft-lotto: #5aa9e6;
  --ft-lotto-strong: #7fbdec;
  --ft-lotto-weak: #13283a;
  --ft-pension: #6aa6d4;
  --ft-pension-strong: #8cbbe0;
  --ft-pension-weak: #142838;
  --ft-speetto: #8ea2e0;
  --ft-speetto-strong: #a9b9ea;
  --ft-speetto-weak: #1b2340;
  --ft-on-accent: #0b1220;
  --ft-success: #4ade80; --ft-success-weak: #0f2a1b;
  --ft-warning: #f7b955; --ft-warning-weak: #2e2210;
  --ft-danger: #f97066;  --ft-danger-weak: #331513;
  --ft-on-danger: #0b1220;
  --ft-ball-edge: rgb(0 0 0 / 0%);
  --ft-ball-empty: #2a313b;
  --ft-viz-low: #16283a;
  --ft-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
  --ft-shadow-2: 0 4px 12px rgb(0 0 0 / 50%);
  --ft-shadow-3: 0 -4px 16px rgb(0 0 0 / 50%);
}