/* 영업팀 상황판 · 디자인 토큰 (바닐라 CSS, 외부 글꼴·CDN 없음) */
/* 디자인 v2: 크림 바탕 3단 · 큰 세리프 숫자 · 옅은 2겹 그림자 · 코랄은 선과 아이콘에만 · 주 버튼은 짙은 먹색 */
:root {
  /* 글꼴 — 맑은 고딕은 400/700 두 굵기만 있으므로 굵기는 2단계만 씀 */
  --font: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  /* 큰 숫자 전용 (숫자 칸 · 날짜 줄 숫자). 이 PC 에 깔린 글꼴만. 한글 단위는 맑은 고딕으로 떨어지게 serif 앞에 둠 */
  --font-num: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Malgun Gothic', '맑은 고딕', serif;
  --w-normal: 400;
  --w-bold: 700;

  /* 글자 크기 단계 (px) — 화면 글자는 13 이상. --fs-12 는 이름만 남기고 13px */
  --fs-12: 13px;  /* (옛 12px 자리) 꼬리표 · 범례 · 공휴일 이름 */
  --fs-13: 13px;  /* 머리글 · 시간 · 메일 줄 */
  --fs-14: 14px;  /* 표 보조칸(PJT·담당자·날짜) · 작은 버튼 · 숫자 칸 설명 */
  --fs-15: 15px;  /* 업무 제목(PC) · 본문 · 버튼 */
  --fs-16: 16px;  /* 폰 업무 제목 · 폰 입력칸(16 미만 금지) · AI 답 요약 */
  --fs-17: 17px;  /* 펼친 카드 제목 · 판 제목 */
  --fs-20: 20px;  /* 화면 제목 · 창 제목 */
  --fs-22: 22px;  /* 날짜 줄 한글 · PJT 현황 제목 */
  --fs-26: 26px;  /* 로그인 · 주간보고 표제 */
  --fs-num-xl: 44px;  /* PC 숫자 칸 숫자 (세리프) */
  --fs-num-l: 30px;   /* 날짜 줄 숫자 「10월 13일」 */
  --fs-num-m: 28px;   /* 폰 숫자 칸 숫자 */
  --lh-tight: 1.3;
  --lh-body: 1.55;

  /* 바탕 · 글자 · 선 — 따뜻한 크림 3단 (수출입 HUB 와 같은 바탕) */
  --bg-page: #faf9f5;    /* 페이지 */
  --bg-surface: #ffffff; /* 목록 상자 · 카드 · 머리줄 · AI 판 */
  --bg-sub: #f7f2ea;     /* 표 머리 · 카드 아래 띠 · 보기만 칸 · 진행 중 업무 칸 */
  --bg-cream: #f5f0e8;   /* AI 비서 입력칸 · 고르기 단추 바탕 · 질문 말풍선 · 막대 바탕 */
  --bg-soft: #fbf8f3;    /* 펼친 카드 정보 칸 · 주말 칸 · AI 카드 줄 */
  --bg-hover: #f8f3ec;   /* 줄 · 단추 마우스 올림 (옛 #f3f6fa) */
  --ink-900: #141413;    /* 본문 (흰 바탕 18.4:1) */
  --ink-700: #3d3a35;    /* 강한 보조 (흰 11.3:1) */
  --ink-500: #66635c;    /* 보조 (흰 5.99 · 크림 5.28 · 완료 바탕 5.14) */
  --ink-400: #6c6a64;    /* 안내 글 · 「PJT 없음」 (흰 5.41 · 크림 4.77) */
  --line-200: #e6dfd8;   /* 상자 테두리 */
  --line-100: #efe9e1;   /* 줄 사이 선 */
  --line-control: #d9cfc3; /* 고르기 · 보조 단추 테두리 (글자가 붙어 있음) */
  --line-input: #8a8379;   /* 글 쓰는 칸 테두리 (흰 3.75 · 크림 3.30, 3:1 넘김) */

  /* 주 버튼 — 짙은 먹색. 지연 색과 멀어서 지연 신호를 흐리지 않음 */
  --primary: #2b2824;        /* 주 버튼 바탕 (흰 글자 14.7:1) */
  --primary-hover: #141413;  /* 주 버튼 누름 · 올림 */
  /* 옛 이름 → 새 값 (app.css 가 부르는 이름. 고른 것 · 오늘 · 주 버튼이 먹색 · 크림으로 바뀜) */
  --blue-600: var(--primary);
  --blue-700: var(--primary-hover);
  --blue-50: var(--bg-cream);

  /* 코랄 — HUB 와 같은 집안 표식. 선 · 밑줄 · 아이콘 · 테두리 · AI 비서 표식에만 (글자색 · 면 · 신호 모양에는 안 씀) */
  --coral-500: #c46f53;   /* 흰 3.65 · 페이지 3.47 · 크림 3.22 (그래픽 3:1 넘김) */
  --coral-600: #a9583e;   /* AI 비서 표식 그라데이션 끝 */
  --coral-300: #e3a58e;   /* AI 비서 표식 그라데이션 시작 */
  --ai-mark: linear-gradient(140deg, #d27c5e 0%, #a9583e 100%);
  --focus-ring: 0 0 0 3px rgba(196, 111, 83, .32);

  /* 망고 — 이름 「영업 Mango」 표식 (10-15). 망고 그림 · BETA VERSION 작은 줄 · 진행 막대 · 고른 메뉴 표시에만 (신호색 아님) */
  --mango-300: #ffd36e;   /* 망고 그림 밝은 쪽 (그러데이션 시작) */
  --mango-400: #f6a23a;   /* 망고 그림 가운데 */
  --mango-450: #e8692b;   /* 망고 그림 짙은 쪽 (그러데이션 끝) */
  --mango-500: #c96410;   /* 선 · 막대 · 그림 테두리 (흰 3.95 · 페이지 3.75 · 크림 3.48 · 막대 바탕 3.28, 그래픽 3:1 넘김) */
  --mango-ink: #8f4a06;   /* 망고 글자 (흰 6.67 · 크림 5.88 · 망고 옅은 면 6.12) */
  --mango-bg: #fff4e0;    /* 망고 옅은 면 (빈 화면 원) */
  --leaf-500: #4f8a34;    /* 망고 잎 (흰 4.19 · 크림 3.69) */
  --stem-600: #7a5230;    /* 망고 꼭지 */

  /* 신호등 — 의미가 있는 색. 다른 용도로 쓰지 않음 (값 그대로 · 완료만 따뜻한 회색) */
  --run-dot: #2f9a4b;  --run-ink: #1f7a3a;  --run-bg: #e7f5eb;   /* 진행중 · 정상 */
  --hold-dot: #e8870e; --hold-ink: #a35800; --hold-bg: #fdf1e0;  /* 보류 · 주의 */
  --late-dot: #d93a35; --late-ink: #c22a26; --late-bg: #fdebea;  /* 지연 · ASAP · 정체 · 오류 */
  --late-row: #fff6f5; --late-line: #f5dedc;                      /* 지연 · ASAP 줄 바탕 */
  --done-dot: #a8a29a; --done-ink: #66635c; --done-bg: #f1ede6;  /* 완료 · 지시 취소 · 보고 없음 */
  /* 업무 상태 색 (10-19 이학준): 완료 = 녹색 · 진행중 = 노란색(글자는 호박색) · 보류 · 지연 · ASAP = 빨간색 · 업무 취소 = 회색.
     목록 점 · 마감일 칩 · 상세 상태 칩 · 숫자 칸 · 달력 · 알림이 모두 이 네 벌만 씀 (위 신호등 값은 정상 · 주의 · 오류 같은 다른 신호에만) */
  --st-done-dot: #2f9a4b;  --st-done-ink: #1f7a3a;  --st-done-bg: #e7f5eb;   /* 완료 */
  --st-doing-dot: #b08300; --st-doing-ink: #7d5a00; --st-doing-bg: #fdf4d3;  /* 진행중 */
  --st-stop-dot: #d93a35;  --st-stop-ink: #c22a26;  --st-stop-bg: #fdebea;   /* 보류 · 지연 · ASAP */
  --st-off-dot: #a8a29a;   --st-off-ink: #66635c;   --st-off-bg: #f1ede6;    /* 업무 취소 */
  --late-ink-strong: #a31f1b;  /* 오류 글자 (로그인 오류 · 메일 못 보냄 띠) — app.css 에 숫자로 있던 값에 이름만 붙임 */
  --late-edge: #f3c9c6;        /* 오류 띠 · 위험 단추 테두리 — 같은 이유 */

  /* 간격 (4 배수) */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;

  /* 모서리 — 크기별 위계: 알약(단추 · 꼬리표) → 20 창 → 18 숫자 칸 → 16 상자 · 카드 → 10 입력칸 */
  --r-tag: 999px;     /* 꼬리표 (알약) */
  --r-due: 999px;     /* 마감일 꼬리표 (알약) */
  --r-control: 10px;  /* 입력칸 · 거르기 칸 */
  --r-button: 999px;  /* 단추 (알약) */
  --r-box: 16px;      /* 목록 상자 · 요약 판 */
  --r-card: 16px;     /* 펼친 카드 · AI 답 상자 */
  --r-tile: 18px;     /* 숫자 칸 */
  --r-modal: 20px;    /* 창 */
  --r-sheet: 20px;    /* 폰 아래에서 올라오는 판 (위 두 모서리) */
  --r-pill: 999px;    /* 신호등 점 · 상태 칩 */

  /* 그림자 — 옅은 2겹 · 갈색 기운. 쉬는 상자에는 아주 옅게, 뜬 것에만 진하게. 단추 · 입력칸 · 줄에는 없음 */
  --sh-rest: 0 1px 2px rgba(20, 20, 19, .04), 0 8px 24px -16px rgba(110, 72, 50, .22);   /* 숫자 칸 · 목록 상자 · 판 */
  --sh-hover: 0 2px 4px rgba(20, 20, 19, .05), 0 12px 28px -14px rgba(110, 72, 50, .30); /* 숫자 칸 마우스 올림 */
  --sh-card: 0 2px 6px rgba(20, 20, 19, .05), 0 24px 48px -18px rgba(90, 60, 40, .34);   /* 펼친 상세 · PJT 카드 */
  --sh-float: 0 16px 40px -12px rgba(60, 40, 30, .28);    /* 알림 판 · 예시 칩 판 */
  --sh-panel: -16px 0 36px -12px rgba(60, 40, 30, .16);   /* AI 옆 판 */
  --sh-modal: 0 24px 60px rgba(40, 26, 18, .28);          /* 업무 지시 창 */
  --sh-dock: 0 -6px 18px rgba(60, 40, 30, .08);           /* 폰 아래 고정줄 */

  /* 면 */
  --tile-grad: linear-gradient(180deg, #ffffff 0%, #fbf7f1 100%);       /* 숫자 칸 */
  --tile-grad-late: linear-gradient(180deg, #fffafa 0%, #fff3f1 100%);  /* 지연 1 이상인 숫자 칸 */
  --page-glow: radial-gradient(1100px 280px at 0% 0%, rgba(196, 111, 83, .07), rgba(196, 111, 83, 0) 70%),
               linear-gradient(180deg, #f3ece1 0, rgba(250, 249, 245, 0) 280px);   /* 머리줄 아래 옅은 빛 띠 (인쇄 때 끔) */

  /* 움직임 — 펼침 · 판 · 창 · 숫자 칸 올림만 */
  --t-fast: 150ms;
  --t-slow: 200ms;

  /* 높이 */
  --h-header: 56px;
  --h-row: 44px;          /* PC 목록 줄 */
  --h-control: 36px;      /* PC 거르기 · 입력칸 */
  --h-button: 40px;       /* PC 주 버튼 */
  --h-touch: 40px;        /* 폰 누르는 칸 최소 */
  --h-touch-lg: 48px;     /* 폰 주 버튼 · AI 입력줄 */
}

body { margin: 0; font-family: var(--font); color: var(--ink-900); background: var(--bg-page); }
.num { font-variant-numeric: tabular-nums; }
.num-serif { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; font-weight: var(--w-bold); letter-spacing: -.01em; }
@media (max-width: 480px) {
  input, select, textarea { font-size: var(--fs-16); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media print {
  body { background: #fff; }
}