/* tokens.css — 디자인 토큰. 값이 정의되는 유일한 곳.
 *
 * 출처: design-v5/dashboard-performance-v4a.html:10-42
 * 권위: docs/DESIGN-SYSTEM.md
 *
 * ★ 이 파일 밖에 색·크기 리터럴을 쓰지 않는다.
 *   `#FFD600` 이 다른 CSS 에 나타나면 안 된다. var(--lemon) 을 쓴다.
 *   그래야 색을 한 곳에서 바꿀 수 있다.
 *
 * ★ 5색 원칙 (DESIGN-SYSTEM.md 1장)
 *   화면에 보이는 색은 옐로 · 오렌지 · 빨강(하락 전용) · 블랙 · 그레이 다섯뿐이다.
 *   초록 계열(#10B981 #22C55E #047857) 전면 금지. 보라·파랑 금지.
 */

:root {
  /* ── 중립 ─────────────────────────────────── */
  --bg:           #F0F2F5;    /* 페이지 배경 */
  --ink:          #1A1A1A;    /* 본문·제목·KPI 숫자 */
  --sub:          #6B7280;    /* 라벨·캡션·축 눈금 */
  --line:         #E5E7EB;    /* 차트 점선 그리드 */
  --icon-bg:      #F3F4F6;    /* 랭크 칩·중립 태그 */
  --sub-strong:   #4B5563;    /* 중립 태그 글자 (--sub 보다 진함) */
  --off:          #D1D5DB;    /* 비활성 상태 점 */
  --white:        #FFFFFF;

  /* ── 브랜드 (웜톤) ────────────────────────── */
  --lemon:        #FFD600;    /* 사이드바 배경(단색)·기간탭 활성·그레이드 배지 */
  --amber:        #FFB800;    /* 보조 웜톤 */
  --orange:       #FF9500;    /* 적합도 게이지·인스타 라인·알림 배지 */
  --lemon-soft:   #FFF8E1;    /* 개선 제안 인셋 배경 */
  --deep-amber:   #7A5A00;    /* 연옐로 배경 위 캡션·아이콘 */

  /* ── 글래스 ───────────────────────────────── */
  --glass:        rgba(255,255,255,0.85);
  --glass-line:   rgba(255,255,255,0.30);
  --glass-shadow: 0 4px 24px rgba(0,0,0,0.06);
  --glass-hover:  0 10px 34px rgba(0,0,0,0.11);

  /* ── 레몬 배경 위 ─────────────────────────── */
  /* ⚠ 레몬(#FFD600) 위 흰 텍스트는 대비 1.6:1 로 사용 불가.
       반드시 잉크(#1A1A1A)를 쓴다. (DESIGN-SYSTEM.md 11장) */
  --on-warm:      #1A1A1A;
  --on-warm-dim:  rgba(26,26,26,0.68);
  --warm-veil:    rgba(255,255,255,0.20);   /* 사이드바 활성 메뉴 */
  --warm-veil-2:  rgba(255,255,255,0.15);   /* 사이드바 브랜드 카드 */

  /* ── 등락·상태 전용 ───────────────────────── */
  /* ★ 빨강은 하락에만 쓴다. 다른 용도로 확장하지 않는다. */
  --up:           #FF9500;
  --up-text:      #8A4B00;
  --up-bg:        rgba(255,149,0,0.16);
  --down:         #EF4444;
  --down-text:    #B91C1C;
  --down-bg:      rgba(239,68,68,0.14);

  /* ── 치수 ─────────────────────────────────── */
  --radius:       20px;       /* 카드 */
  --sidebar-w:    260px;

  /* ── 간격 (DESIGN-SYSTEM.md 9장) ──────────── */
  --gap-grid:     22px;       /* 카드 간격·섹션 마진 */
  --pad-card:     28px;       /* 카드 내부 */
  --gap-head:     18px;       /* 카드 헤더 아래 */
  --main-max:     1360px;     /* ⚠ 이제 **푸터 안쪽**만 쓴다 — 아래 참조 */

  /* ── ★★ 읽기 폭 (2026-08-25 · `[107]`⑤) ─────────────────────
     ⛔ 실측: 넓은 화면에서 **오른쪽에 회색 빈 공간**이 남았다.
       `.main` 이 `max-width: 1360px` 이라 1920 에서
       `260(사이드바) + 1360 = 1620` 뒤로 **300px 이 빈 배경**이었다.

     ★ 팀장 지시대로 갈랐다 —
       ```
       표·달력·목록·카드   ★ 꽉 채운다   →  `.main` 의 상한을 없앴다
       긴 글·설명          ⚠ 읽기 폭      →  이 값으로 잡는다
       ```
     ⚠ `px` 가 아니라 `ch` 다. 글자 크기가 바뀌면 줄 길이도 같이 따라와야
       한다 — 「몇 글자가 한 줄인가」가 읽기 쉬움을 정한다.
     ⚠ 한글은 한 글자가 `ch`(0 너비)보다 넓다. 그래서 라틴 기준 권장(65~75ch)
       보다 **작게** 잡는다 — 68ch 는 한글로 대략 35~40자다. */
  --read-max:     68ch;

  /* ── 반응형 분기점 ────────────────────────── */
  /* CSS 변수는 @media 조건에 못 쓴다. 참고용으로만 적어 둔다.
     실제 값을 바꿀 때는 components.css·layout.css 의 @media 도 같이 고친다.
       1140px — KPI 2열, 2단 그리드 1열
        780px — 사이드바가 상단 가로 바로 */

  /* ══════════════════════════════════════════════════════════
     ★★★ 공급자 브랜드 색 — **우리 팔레트가 아니다**
     ══════════════════════════════════════════════════════════

     ⚠⚠ 여기 있는 색은 **로그인 버튼 세 개에서만** 쓴다.
       (`pages/login.css` 의 `.way-kakao` · `.way-naver` · `.way-google`)
       다른 화면에 쓰면 5색 원칙이 무너진다.
       `tests/unit/test_login_contract.py` 가 **쓰는 곳을 세어서** 막는다.

     ■ 왜 예외인가 (팀장 2026-08-15)

       ① 남의 로고다. **우리가 색을 정할 권한이 없다.**
          카카오·네이버·구글 브랜드 가이드가 각각 색을 지정한다.
          임의로 바꾸면 가이드 위반이고, 심사에서 지적받을 수 있다.
       ② 사장님이 **아는 색으로 찾는다.** 노란 버튼=카카오, 초록=네이버.
          회색으로 통일하면 「어느 게 카카오지」를 읽어서 골라야 한다.

     ■ ⚠⚠ 초록 금지(금지 6)와 부딪히는 것 — 읽고 넘어가라

       `--brand-naver` 는 **초록이다.** 그런데 금지 6 은 초록 전면 금지다.
       되돌리고 싶어지는 자리라 이유를 여기 적어 둔다 —

         금지 6 이 막는 초록은 **「좋다·올랐다」를 뜻하는 초록**이다.
         빨강=하락과 짝이 되어 지표를 읽는 색이고, 우리는 상승에
         오렌지(--up)를 쓰기로 했다. 여기에 초록이 섞이면
         **상승 색이 둘**이 되어 화면이 거짓말을 한다.

         `--brand-naver` 는 **지표를 뜻하지 않는다.** 「네이버」라는
         회사 이름의 일부다. 로그인 버튼 하나에만 있고 숫자 옆에
         절대 안 온다. → 뜻이 안 겹치므로 섞이지 않는다.

       ★ 그래서 이름이 `--up-*`·`--down-*` 과 **아예 다른 갈래**(`--brand-*`)다.
         이름이 비슷하면 다음 사람이 지표에 갖다 쓴다.

     ■ 출처 (2026-08-15 확인)
       카카오  developers.kakao.com 로그인 버튼 가이드 — 배경 #FEE500,
               글자 검정 85%, 심볼 검정
       네이버  developers.naver.com 로그인 버튼 가이드 — 배경 #03C75A, 흰 글자
       구글    developers.google.com/identity 브랜딩 가이드 — 밝은 테마는
               **흰 배경 + 회색 테두리 + 4색 G**. ★ G 를 단색으로 칠하지 않는다
     ══════════════════════════════════════════════════════════ */
  --brand-kakao:       #FEE500;
  --brand-kakao-ink:   rgba(0, 0, 0, 0.85);   /* 가이드가 정한 글자색 */
  --brand-naver:       #03C75A;
  --brand-naver-ink:   #FFFFFF;
  --brand-google-bg:   #FFFFFF;
  --brand-google-line: #DADCE0;               /* 가이드가 정한 테두리 */
  --brand-google-ink:  #1F1F1F;

  /* 구글 G 넉 자. ⚠ **이 넷을 다른 데 쓰지 않는다.** 파랑·초록이 섞여 있고
     우리 팔레트에 파랑은 아예 없다. 로고를 그리는 것 말고는 쓸 데가 없다. */
  --g-blue:   #4285F4;
  --g-green:  #34A853;
  --g-yellow: #FBBC05;
  --g-red:    #EA4335;
}