/* 01-tokens.css — 색·모서리·간격·글자 크기와 차트 색(--chart-*)의 정본. 리셋, 본문 기본, @font-face 포함.
   원본 index.html 249~580줄. 파일 순서 = 캐스케이드 순서이므로 이름 앞 번호를 바꾸지 말 것. */
  /* Pretendard 폰트 — 이 HTML과 같은 폴더의 fonts/ 하위 woff2 4종(Regular/Medium/Bold/ExtraBold)을 참조.
     기본 텍스트는 Regular(400)/Medium(500), 중간 강조는 Bold(700), 최대 강조는 ExtraBold(800)만 사용 —
     font-weight:700/900은 이 4종 스케일에 맞춰 700/800으로 통일돼 있다(아래 본문 CSS에 반영됨).
     이 HTML 파일을 다른 폴더로 옮길 경우 fonts/ 폴더도 함께 옮겨야 한다(없으면 시스템 폰트로 자동 대체).
     .otf 폴백 4종은 용량(6MB) 때문에 삭제했다. woff2 는 IE 를 제외한 전 브라우저가 지원한다. */
  @font-face{ font-family:'Pretendard'; src:url('../fonts/Pretendard-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Pretendard'; src:url('../fonts/Pretendard-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Pretendard'; src:url('../fonts/Pretendard-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Pretendard'; src:url('../fonts/Pretendard-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
  :root{

  /* 타이포 스케일. 새 CSS 는 이 8단만 쓴다. */
  --fs-1:11px; --fs-2:12px; --fs-3:12.5px; --fs-4:13.5px; --fs-5:14.5px; --fs-6:16px; --fs-7:19px; --fs-8:26px;
  /* KPI 숫자 전용 한 단 — 강조 숫자가 너무 작다는 지적이 있었다.
     --fs-8 을 키우면 통계 스트립·보고서 숫자까지 같이 커져서, 위 여덟 단은 그대로 두고 한 칸을 더 얹었다. */
  --fs-9:38px;
    /* Notion 스타일 디자인 시스템 기반 — warm paper 캔버스/잉크 텍스트/헤어라인 보더 + 단일 구조적 액센트(브랜드 블루).
       제품 고유 브랜드 블루(--primary 계열)는 그대로 유지. 다크 인디고는 예상매출 KPI 1곳에만 쓰는 "나이트 히어로밴드" 전용 액센트. */
    --bg:#f6f5f4;
    --card:#ffffff;
    --surface2:#f0eeec;
    --border:#e6e6e6;
    --border-soft:#ededeb;
    /* 순블랙 계열 텍스트 금지. 본문 잉크는 #212529 로 통일. */
    --text:#212529;
    --text-secondary:#3f444a;
    --muted:#615d59;
    --faint:#a39e98;
    /* Slack "Kind of Blue" 테마 색. 사내에서 쓰는 Slack 테마와 화면 색을 맞춘다.
       값은 Slack 테마 설정에서 그대로 가져왔다.
         시스템 탐색 #4C64A6 · 선택된 항목 #71A3D1 · 현재 상태 #14ADFF · 알림 #DB519F
       한 가지 색만 쓰는 시스템이라 프라이머리와 히어로 밴드(secondary)가 같은 값을 공유한다.
       링크 색을 따로 두지 않고 프라이머리로 합쳤다. 클릭 가능한 글자는
       색이 아니라 링크 아이콘으로 구분한다. */
    --primary:#4c64a6;
    --primary-press:#3f5490;
    --primary-light:#eef2f9;
    --secondary:#4c64a6;
    --secondary-light:#c7d3e9;
    --positive:#16a34a;
    --negative:#dc2626;
    /* 시맨틱 두 색의 옅은 배경. KPI 의 '지난주 대비' 배지에서 쓴다.
       새 액센트가 아니라 위 두 색을 옅게 깐 것이다. */
    --positive-bg:#eaf7ef;
    --negative-bg:#fdecec;
    --accent2:#f59e0b;
    --accent3:#9c9fa5;
    --exclude-bg:#ffe3c2;

    /* 차트 색을 여기로 꺼냈다. 예전에는 js/ 안에 배열로 박혀 있어서
       CSS 를 아무리 고쳐도 차트만 파란색으로 남았다.
       js 의 chartPalette() 가 이 값을 읽어 쓰므로, 색을 바꾸려면 여기만 고치면 된다.
       기본색 명도 사다리 + 시맨틱 2종 구성. 단계 수는 여덟. */
    --chart-1:#4c64a6;
    --chart-2:#6b82be;
    --chart-3:#8fa3d2;
    --chart-4:#b4c1e2;
    --chart-5:#3f5490;
    --chart-6:#c7d3e9;
    --chart-7:#007a5a;
    --chart-8:#b8860b;
    --chart-mute:#e6e9f0;   /* 값 없음 · 미지정 · 도넛 빈 구간 */

    /* ========================================================
       단일 기본색 규칙의 **공식 예외 3종**
       아래 세 묶음은 "예쁘게"가 아니라 "구분해서 읽히게" 하는 색이라
       기본색 한 가지로 뭉치지 않는다. 색을 바꿀 때도 이 성격을 지킬 것.
       ======================================================== */

    /* 예외 ① 제품 상징색 — 제품은 색으로 알아본다 */
    --prod-spam:#dc2626;     /* 스팸스나이퍼 */
    --prod-screen:#1264a3;   /* 메일스크린 */
    --prod-jbolt:#f59e0b;    /* 제이볼트 */
    --prod-mudfix:#16a34a;   /* 머드픽스 */
    --prod-cloud:#ec4899;    /* Cloud MailGATE */
    --prod-etc:#9c9fa5;      /* 기타 */

    /* 예외 ② 달성률 — 0%에 가까울수록 빨강, 100%에 가까울수록 초록 */
    --rate-0:#cc4117;
    --rate-40:#d9822b;
    --rate-60:#b8860b;
    --rate-80:#4e9a51;
    --rate-100:#007a5a;

    /* 예외 ③ 영업단계 — 달성률과 **같은 신호등**을 쓴다.
       초기제안(빨강) → 완료(초록)로 진행도가 색으로 읽히고, DROP 은 판단 대상이 아니라 회색이다.
       이전의 명도 사다리는 진행 방향이 눈에 안 들어온다는 지적으로 폐기했다. */
    --stage-60:#cc4117;      /* 초기제안 */
    --stage-70:#d9822b;      /* 도입검토 */
    --stage-80:#b8860b;      /* 구매결정 */
    --stage-90:#4e9a51;      /* 검수진행 */
    --stage-done:#007a5a;    /* 완료 */
    --stage-drop:#9c9fa5;    /* 실주(DROP) — 회색 */

    /* 표 머리 버튼이 선택됐을 때만 들어가는 색.
       네 개는 영업단계 토큰을 그대로 재사용하고, 아래 둘만 새로 만든다.
       흰 글자를 올리므로 명암비 4.5:1 을 넘기는 값으로 잡았다. */
    --tab-review:#857636;    /* 확인/정리 필요 매출 — 채도를 낮춘 노랑 */
    --tab-carry:#c0392b;     /* 이월 — 빨강 */

    /* 스크롤 막대. 슬랙처럼 굴릴 때만 잠깐 보인다.
       칸 너비는 늘 같은 값이라 막대가 나타났다 사라져도 본문이 밀리지 않는다. */
    --sb-w:8px;
    --sb-thumb:#b8bdc7;

    /* 표 한 줄의 높이. 파이프라인 표의 기본 줄 수를 셀 때 쓴다.
       실측 줄 높이는 33.1px 이고, 첫 줄만 머리줄과 맞닿는 선 때문에 2px 더 높다.
       아홉 줄이 잘리지 않고 다 들어오도록 34px 로 잡았다. */
    /* 표 머리의 세 값. 기준은 '당월 완료 예정' 카드를 실측한 값이다.
       카드 상단→버튼 15 · 카드 왼쪽→버튼 17 · 버튼→표 머리행 10.
       왼쪽 값은 카드의 안쪽 여백이라 버튼과 표가 같은 선에서 시작한다. */
    /* OverView 하단 좌측 카드의 줄 높이. 기준은 '당월 완료 예정' 탭 실측값이다.
       그 탭에만 고객사명에 링크 아이콘이 붙어 줄이 2.4px 더 높았다. 셋을 이 값으로 못박는다. */
    /* 패널 드롭다운에 한 번에 보이는 항목 수와 한 줄 높이. 8~10개를 권해 9로 두었다. */
    /* 채널 등록 바. **어느 탭에서나 같은 크기**여야 한다. */
    /* **레일 맨 위 `JS` 상자**만 주황이다. 레일 배경은 그대로 둔다.
       원안 #ff7f00 은 흰 글자와 2.5:1 이라 글자가 안 보였다. #b35600 은 4.9:1 로 안전하다.
       ⭐ 더 밝게 가려면 이 한 줄만 #cc6600 으로 바꾼다. */
    --rail-bg:#b35600;
    --chform-w:262px;
    --chform-h:30px;
    --dd-rows:9;
    --dd-row-h:36.5px;   /* 알약 한 줄(글자 + 상하 여백 + 줄간격) 실측값 */
    --pipe-row-h:43px;
    /* 첫 줄만 위 여백이 2px 넓다(main table tbody tr:first-child td). 기준 표를 따른다. */
    --pipe-row-h1:45px;
    --tblhd-top:15px;
    --tblhd-left:17px;
    --tblhd-gap:10px;
    --tbl-row-h:34px;
    --tbl-rows:9;

    /* 예외 ④ 차트 구분색.
       판매구분·판매채널처럼 '항목이 여럿인' 차트는 한 색의 진하기 사다리로는 구분이 안 됐다.
       제품 상징색(예외①)과 겹치지 않는 색만 골라 배정한다. 미지정은 --chart-mute. */
    --cat-1:#0f766e;   /* 딥 틸 */
    --cat-2:#7c3aed;   /* 바이올렛 */
    --cat-3:#b45309;   /* 브론즈 */
    --cat-4:#0891b2;   /* 시안 */
    --cat-5:#4d7c0f;   /* 올리브 */
    --cat-6:#9d174d;   /* 와인 */
    --cat-7:#475569;   /* 슬레이트 */
    --cat-8:#a16207;   /* 머스터드 */

    /* 모서리 반경이 31종까지 늘어나 있었다(7·9·10·11·14·18·99·999px …).
       DESIGN-slack 의 6단으로 통일하고, CSS 안의 직접값을 전부 이 토큰으로 바꿨다.
       **화면 곡률을 조정하려면 이 여섯 줄만 고치면 된다.** */
    --radius-xs:2px;
    --radius-sm:4px;
    --radius-md:8px;
    --radius-lg:12px;
    --radius-xl:16px;
    --radius-full:90px;

    /* 간격도 같은 이유로 5단 스케일. gap 이 17종이던 것을 여기로 모았다.
       빽빽하거나 헐거우면 이 다섯 줄로 한 번에 조절한다. */
    --sp-1:4px;
    --sp-2:6px;
    --sp-3:8px;
    --sp-4:12px;
    --sp-5:16px;
    --shadow-sm:0 0 0 1px rgba(0,0,0,.02), 0 1px 2px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.04);
    --shadow-md:0 0 0 1px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.07);
    --shadow-md-blue:0 0 0 1px rgba(76,100,166,.14), 0 6px 16px rgba(76,100,166,.13), 0 12px 26px rgba(76,100,166,.10);
    --row-hover:#eef2f9;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Pretendard','Inter','Malgun Gothic','Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:17px;
  }
  .app{
    display:grid;
    grid-template-columns:210px 1fr;
    grid-template-rows:auto auto 1fr;
    grid-template-areas:
      "header header"
      "tabs tabs"
      "sidebar main";
    height:100vh;
    overflow:hidden;
  }
  .app.pdf-export-mode{ grid-template-columns:1fr; grid-template-areas:"main"; height:auto; overflow:visible; }
  .app.pdf-export-mode main{ display:block; overflow:visible; height:auto; }
  .app.pdf-export-mode #dashboardContent, .app.pdf-export-mode #weeklyContent, .app.pdf-export-mode #checklistContent{ display:block; height:auto; }
  .app.pdf-export-mode #dashboard{ display:block; height:auto; }
  .app.pdf-export-mode #dashboard .card, .app.pdf-export-mode .weekly-card, .app.pdf-export-mode .checklist-card{ margin-bottom:16px; overflow:visible; height:auto; }
  .app.pdf-export-mode .dash-kpi, .app.pdf-export-mode .dash-mid, .app.pdf-export-mode .weekly-top, .app.pdf-export-mode .weekly-bottom{ display:block; }
  .app.pdf-export-mode .weekly-grid{ display:block; height:auto; }
  .app.pdf-export-mode .presenter-list, .app.pdf-export-mode .presenter-head{ display:none; }
  .app.pdf-export-mode table.review-table, .app.pdf-export-mode table.pipeline-table{ display:block; height:auto; }
  .app.pdf-export-mode header,
  .app.pdf-export-mode .top-tabs,
  .app.pdf-export-mode aside{ display:none; }
  .top-tabs{
    grid-area:tabs;
    background:var(--card);
    border-bottom:1px solid var(--border);
    padding:0 24px;
    display:flex;
    gap:var(--sp-1);
  }
  .tab-btn{
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    padding:11px 6px;
    margin:0 10px 0 0;
    font-size:var(--fs-5);
    font-weight:700;
    color:var(--muted);
    cursor:pointer;
  }
  .tab-btn:hover{ color:var(--text); }
  .tab-btn.active{ color:var(--primary); border-bottom-color:var(--primary); }
  header{
    grid-area:header;
    background:var(--card);
    border-bottom:1px solid var(--border);
    padding:9px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-5);
    flex-wrap:wrap;
  }
  header h1{
    font-size:17px;
    margin:0;
    font-weight:700;
  }
  header .sub{
    color:var(--muted);
    font-size:var(--fs-5);
    margin-top:2px;
  }
  .upload-area{
    display:flex;
    align-items:center;
    gap:var(--sp-4);
  }
  .upload-status{
    font-size:var(--fs-5);
    color:var(--muted);
    text-align:right;
    line-height:1.5;
  }
  .upload-status b{ color:var(--text); }
  .btn{
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:var(--radius-md);
    padding:9px 18px;
    font-size:var(--fs-5);
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn:hover{ background:var(--primary-press); }
  .btn.secondary{
    background:#fff;
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
  }
  .btn.secondary:hover{ background:var(--surface2); }
  .btn.btn-pdf{
    background:#dc2626;
    color:#fff;
    border:none;
  }
  .btn.btn-pdf:hover{ background:#b91c1c; }
  .btn:disabled{ opacity:.55; cursor:default; }
  #fileInput{ display:none; }


  /* 다운로드 버튼 — 호버 시 PDF/마크다운/텍스트 보고서 3종 메뉴 노출 */
  .download-dropdown{ position:relative; display:inline-block; }
  /* Report 드롭다운을 헤더로 되돌리고 그룹(통합/현재 탭)으로 나눔 */
  .download-menu-group{ padding:7px 14px 4px; font-size:var(--fs-1); font-weight:800; color:var(--muted);
    letter-spacing:.2px; white-space:nowrap; }
  .download-menu-sep{ height:1px; background:var(--border); margin:5px 0; }
  .download-menu{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    margin-top:4px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    min-width:180px;
    padding:6px;
    z-index:20;
  }
  .download-dropdown:hover .download-menu,
  .download-dropdown:focus-within .download-menu{ display:block; }
  .download-menu-item{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    border-radius:var(--radius-sm);
    padding:9px 10px;
    font-size:var(--fs-5);
    font-weight:700;
    color:var(--text);
    cursor:pointer;
    white-space:nowrap;
  }
  .download-menu-item:hover{ background:var(--surface2); }
  .download-menu-item:disabled{ opacity:.55; cursor:default; }

  aside{
    grid-area:sidebar;
    background:var(--card);
    border-right:1px solid var(--border);
    padding:12px 12px;
    overflow-y:auto;
    min-height:0;
  }
  .filter-block{ margin-bottom:12px; }
  .filter-block label{
    display:block;
    font-size:var(--fs-4);
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:7px;
  }
  select{
    width:100%;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-xs);
    font-size:var(--fs-5);
    background:#fff;
    color:var(--text);
  }
  .pill-group{
    display:flex;
    gap:var(--sp-2);
    flex-wrap:wrap;
  }
  .pill-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--sp-2);
  }
  .pill-grid.cols3{ grid-template-columns:repeat(3, 1fr); }
  .pill{
    padding:5px 8px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:#fff;
    font-size:var(--fs-5);
    cursor:pointer;
    color:var(--muted);
    text-align:center;
    white-space:nowrap;
    transition:background .12s,border-color .12s,color .12s;
  }
  .pill-group .pill{ padding:5px 10px; }
  .pill:hover{ border-color:var(--faint); }
  .pill.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
  }
  .reset-link{
    font-size:var(--fs-4);
    color:var(--primary);
    cursor:pointer;
    text-decoration:underline;
    margin-top:4px;
    display:inline-block;
  }
  .sidebar-note{
    font-size:var(--fs-3);
    color:var(--muted);
    line-height:1.6;
    border-top:1px solid var(--border);
    padding-top:14px;
    margin-top:8px;
  }

  main{
    grid-area:main;
    padding:14px 16px;
    overflow:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  #dashboardContent, #weeklyContent, #checklistContent{ flex:1; min-height:0; display:flex; flex-direction:column; }
  .empty-state{
    margin-top:80px;
    text-align:center;
    color:var(--muted);
  }
  .empty-state .big{
    font-size:44px;
    margin-bottom:12px;
  }
  /* 로딩 스피너 — 누적 데이터를 서버에서 받아오는 동안 표시 */
  .spinner{ width:46px; height:46px; margin:0 auto; border:4px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .9s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  /* 업로드 모달 — 드래그앤드롭 + 파일 탐색기. 팝업 폭·내부 여백은 축소된 값이다. */
  .upload-modal-box{ width:min(600px,92vw); height:auto; max-height:88vh; }
  .upload-modal-box .drop-zone{ margin:0; max-width:none; }
  .upload-modal-body{ padding:11px 14px 14px; overflow-y:auto; }
  .drop-zone-lg{ padding:17px 14px; }
  .drop-zone-lg .drop-zone-icon{ font-size:23px; margin-bottom:4px; }
  .drop-zone-lg .drop-zone-text{ font-size:var(--fs-4); }
  /* 모달 안으로 옮긴 업로드 상태 표시 */
  .upload-modal-body .upload-status{ margin:0 0 3px; padding:7px 11px; border-radius:var(--radius-md); background:var(--surface2);
    font-size:var(--fs-3); line-height:1.45; color:var(--muted); text-align:center; }
  /* ③ 드롭존 내부 텍스트 중앙 정렬 */
  .drop-zone, .drop-zone .drop-zone-icon, .drop-zone .drop-zone-text, .drop-zone .drop-zone-file{ text-align:center; }
  .drop-zone-file{ margin-top:7px; font-size:var(--fs-3); font-weight:800; color:var(--primary); }
  .upload-note{ text-align:center; margin-top:8px; line-height:1.55; }
  /* ④ CRM 파일 + 공식 매출표를 한 번에 */
  .upload-step{ margin-top:11px; }
  .upload-step-head{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-4); font-weight:800; margin-bottom:5px; }
  .upload-step-no{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
    background:var(--primary); color:#fff; font-size:var(--fs-1); font-weight:800; }
  .upload-step-opt{ font-size:var(--fs-1); font-weight:700; color:var(--muted); }
  .upload-step textarea{ width:100%; min-height:74px; resize:vertical; font-family:inherit; font-size:var(--fs-3); line-height:1.5;
    border:1px solid var(--border); border-radius:var(--radius-md); padding:8px 10px; background:var(--surface2); color:var(--text); }
  .upload-step textarea:focus{ outline:none; border-color:var(--primary); background:#fff; }
  /* 확인 버튼 — 가로 1.5배 + 가운데 정렬 */
  .upload-confirm-row{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); margin-top:12px; }
  .upload-confirm-row .btn{ min-width:170px; padding-left:30px; padding-right:30px; }
  .upload-msg{ font-size:var(--fs-3); font-weight:700; line-height:1.5; margin:0; text-align:center; }
  .upload-msg.ok{ color:#047857; }
  .upload-msg.err{ color:#dc2626; }
  .btn-ico{ margin-right:6px; }
  .empty-state h2{ color:var(--text); margin:0 0 6px; }
  .nas-status-hidden{ display:none; }