/* ============================================================
   STIS 디자인 시스템 — 디자인 토큰 (variables.css)
   서울과학기술정보시스템 · 2026-09-03
   근거: Design System/REQUIREMENTS.md · typography.md · DESIGN.md(기본 틀)
   ============================================================ */

:root {
  /* ---------- 브랜드 컬러 (로고 컬러 — 변경 금지) ---------- */
  --brand-blue:   #0057f3; /* Main — 화면당 1개의 결정적 액션(CTA·검색)에만 */
  --brand-orange: #ff5102; /* Sub(노드) — 햄버거 버튼, 희소한 포인트 */
  --brand-blue-hover:   #0047c8;
  --brand-orange-hover: #e04600;
  --brand-navy:         #16337f; /* 군청 — 무게감 있는 면·강조. 블루와 동일 색상축의 딥 톤 */
  --brand-navy-deep:    #0b2242; /* 딥 네이비 — 배너·스탯 카드 등 다크 면 바탕. 어두워서 포인트 컬러가 잘 뜸 */
  --brand-blue-tint:    #eef4fe; /* 블루 아주 옅은 면 — 호버 배경, 선택 상태 */
  --brand-blue-tint-line: #dbe6fb; /* 흰 면 위에 긋는 얇은 블루 선 — 옅은 블루 카드의 테두리 */
  --brand-blue-tint-line-in: #ccddf9; /* 같은 선을 옅은 블루 면 안에 그을 때 — 바탕이 이미 블루라 한 단계 더 진해야 같은 세기로 보인다 */
  --brand-orange-tint:  #fff0e9; /* 주황 아주 옅은 면 */

  /* 로고 보조 컬러 (logo/README.md) */
  --logo-kr: #111111;
  --logo-en: #8a8f98;
  --logo-en-reverse: #cfd9f5;

  /* ---------- 텍스트 컬러 (4단계) ---------- */
  --text-1: #090909; /* 제목 */
  --text-2: #383838; /* 본문 */
  --text-3: #5c5c5c; /* 보조 */
  --text-4: #767676; /* 흐림 — 화이트 위 4.5:1 하한, 이보다 연한 텍스트 금지 */
  --text-on-dark: #ffffff;
  --text-on-dark-sub: rgba(255, 255, 255, 0.66);

  /* ---------- 면(Surface) ---------- */
  --surface-canvas: #ffffff; /* 페이지 기본 배경 — 화이트 기준 */
  --surface-band:   #efefed; /* 그레이 면 — 전체메뉴 바탕 (발간물 밴드는 더 옅은 surface-tint 사용) */
  --surface-card:   #ffffff;
  --surface-tint:   #f6f6f4; /* 카드 내부 보조 면(인풋 배경 등) */
  --surface-dark:   #1c1c1c; /* 아이콘 필·다크 버튼 — #000 대체 */
  --surface-footer: #111111; /* 푸터 전용 — 통계 밴드 하단 비네트와 이어지도록 surface-dark보다 한 단계 어둡게. 값은 --logo-kr과 동일(새 색 아님) */

  /* ---------- 보더 ---------- */
  --border-hairline: #e5e5e2; /* 카드 윤곽 등 가장 옅은 선 */
  --border-divider:  #d9d9d9; /* 리스트 구분선, 푸터 상단선 */
  --border-input:    #c9c9c5;

  /* ---------- 데이터 증감 표기 ---------- */
  --delta-up:   #d94a20; /* 상승 — 주황 계열과 조화 */
  --delta-down: #2563c9; /* 하락 — 블루 계열과 조화 */

  /* ---------- 데이터 시각화 (차트 공통 규칙) ----------
     메인 투자현황 미니 막대(.stat-chart)·자치구 목록 막대(.data-list__bar)·성과정보 차트(perf-*, /js/perf.js)가 같은 값을 쓴다
     · 막대 기본색은 브랜드 블루 1색. 여러 계열을 무지개색으로 나누지 않는다
     · 강조는 한 개만 — 흰 면: 선택 연도 = 블루, 나머지 = 옅은 블루 / 다크 면·순위 1위: 오렌지
     · '기타'는 값과 무관하게 회색 막대, 목록 맨 뒤
     · 숫자 라벨은 Space Grotesk 15(보조 크기), 축·격자는 헤어라인 — 곡선 보간·이중 축·로그 축 금지 */
  --chart-bar:        var(--brand-blue);   /* 기본 막대 */
  --chart-bar-soft:   #b3cdfb;             /* 선택하지 않은 막대(흰 면) — 블루의 옅은 단계 */
  --chart-bar-deep:   var(--brand-navy);   /* 두 번째 계열이 꼭 필요할 때 (전체 탭 자체R&D) */
  --chart-bar-deep-soft: #a7b3d6;          /* 네이비 막대의 옅은 단계 — 특허 자체R&D 해외(스택 2층) */
  --chart-bar-accent: var(--brand-orange); /* 다크 면의 현재 연도·순위 1위 */
  --chart-bar-etc:    #b9b9b4;             /* 기타 */
  --chart-track:      var(--surface-tint); /* 막대가 차지 않은 바탕 */
  /* 선 그래프 5계열 — 한 차트에 지표가 여럿일 때(종합현황)만 쓴다. 포인트 컬러(블루·주황) 안에서만 고르고,
     지표 성격에 따라 두 계열로 나눈다. 블루 = 연구 성과(논문·특허), 주황 = 활용 성과(기술료·사업화).
     계열 안에서는 단계 + 점 마커 모양으로 구분한다. 옅은 주황은 흰 배경에서 안 보여 쓰지 않는다 */
  --chart-line-1:     var(--brand-navy);    /* 논문 — 진한 네이비 */
  --chart-line-2:     var(--brand-blue);    /* 특허 출원 — 메인 블루 */
  --chart-line-3:     #63a0f7;              /* 특허 등록 — 옅은 블루(흰 면에서 선이 보이는 하한 단계) */
  --chart-line-4:     #f0a020;              /* 기술료 징수건수 — 노란빛 주황(앰버). 메인 주황과 밝기가 아니라 색상으로 갈린다 */
  --chart-line-5:     var(--brand-orange);  /* 사업화 — 메인 주황 */
  --chart-line-6:     #75756f;              /* 6번째 선(6T 분야 여섯) — 중립 회색 · 마름모. 흰 면에서 선이 보이는 대비 4.6:1 */
  --chart-grid:       var(--border-hairline);
  --chart-axis:       var(--border-divider);
  --chart-radius:     4px;                 /* 막대 끝 둥글기 (미니 막대는 크기에 맞춰 6) */
  --chart-label-font: var(--font-accent);
  --chart-label-size: var(--text-system);
  --chart-motion:     0.35s var(--ease-out-soft); /* 값·순서 전환 */
  /* 좁은 화면(860 이하) 차트 · 목록 그리는 영역 높이 — 세로 막대 · 가로 막대 목록 · 꺾은선 모두 이 한 값.
     카드 높이는 여기에 제목 · 안팎 여백이 더해져 정해진다. 넓은 화면 카드 높이(480 · 1024 이하 440)는 sub.css 에 그대로 둔다 */
  --chart-body-h-narrow: 280px;

  /* ---------- 서체 ---------- */
  /* 폴백에 'Noto Sans KR' 없음 — 옛 로고용 Noto 서브셋(sstis-fonts.css)은 로고 교체(2026-09-11)로 제거됨. 로고는 이제 아웃라인 SVG */
  --font-base:   Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Malgun Gothic', sans-serif; /* Static 자체 호스팅(fonts.css) — Variable 미사용 */
  --font-accent: 'Space Grotesk', var(--font-base); /* 영문·숫자 전용 포인트 — 폴백이 안전장치 */

  /* 웨이트 — 한글 400~700 (800 이상 금지), Space Grotesk 500·700만 */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600; /* 목록 제목 — 500은 약하고 700은 무거운 자리 */
  --weight-bold:    700;

  /* ---------- 타이포 스케일 (본문 17px 기준 · typography.md 우선) ---------- */
  /* 최소 크기: 한글 본문 17px, 보조 15px. 15px는 허용된 하한이고 14px 이하만 금지 */
  /* 15px 자리는 typography.md §3 "15px가 정당한 자리" 표에 고정 — 뱃지·기간·단위·영문 라벨.
     본문 크기로 올리면 본문과 보조 정보가 같은 무게로 읽혀 위계가 무너진다. 개별 하드코딩 말고 이 토큰을 쓴다 */
  --text-system:  15px;  --leading-system:  22px;  /* 툴팁·헬퍼·메타 */
  --text-label:   16px;  --leading-label:   24px;  /* 레이블·캡션 */
  --text-body:    17px;  --leading-body:    26px;  /* 본문 기준값 */
  --text-nav:     19px;  --leading-nav:     28px;  /* GNB 메뉴 (19~20px) */
  --text-title:   22px;  --leading-title:   30px;  /* 카드·패널 제목 */
  --text-subheading: 34px; --leading-subheading: 41px;
  --text-heading-sm: 42px; --leading-heading-sm: 46px;
  --text-heading:    52px; --leading-heading:    52px;
  --text-display:    88px; --leading-display:    84px;

  /* 자간 — 양수 금지. 17px 이하 = 0, 클수록 음수 (typography.md §4) */
  --tracking-none:    0;
  --tracking-body:    -0.01em; /* 18~23px */
  --tracking-title:   -0.02em; /* 24~39px */
  --tracking-display: -0.03em; /* 40px 이상 */

  /* ---------- 간격 (4px 배수) ---------- */
  --spacing-unit: 4px;
  --spacing-4: 4px;   --spacing-8: 8px;    --spacing-12: 12px;
  --spacing-16: 16px; --spacing-20: 20px;  --spacing-24: 24px;
  --spacing-32: 32px; --spacing-40: 40px;  --spacing-48: 48px;
  --spacing-64: 64px; --spacing-96: 96px;  --spacing-120: 120px;

  /* ---------- 라운드 ---------- */
  --radius-sm:   6px;   /* 네비 요소, 소형 컨트롤 */
  --radius-md:   12px;  /* 인풋, 소형 카드 */
  --radius-card: 16px;  /* 기본 카드 */
  --radius-card-lg: 24px; /* 대형 카드·배너 */
  --radius-pill: 999px; /* 필 버튼·토글·뱃지 */

  /* ---------- 레이아웃 ---------- */
  --container-content: 1640px; /* 콘텐츠 컨테이너 (패딩 포함) → 실질 1440px */
  --container-wide:    1880px; /* 헤더·푸터 내부 → 실질 1680px */
  --container-pad:     100px;  /* 좌우 패딩 — 반응형 축소 */
  --section-gap:       96px;
  --header-height:     100px;

  /* ---------- 그림자 ----------
     시스템은 기본 무그림자(플랫). 드롭다운·툴팁 등 떠 있는 기능 요소에만 허용 */
  --shadow-overlay: 0 8px 28px rgba(9, 9, 9, 0.12);

  /* ---------- 전환 ---------- */
  --transition-fast: 0.16s ease;
  --transition-base: 0.24s ease;
  /* 등장 모션 — 페이드 + 18px 상승, 0.7s 감속(빠른 시작·부드러운 착지). 시차 60(반복 타일)/120(블록)/140(대형 카드) */
  --ease-out-soft:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-reveal:   0.7s;
  --reveal-distance: 18px;
}

/* 좌우 패딩 반응형 축소 */
@media (max-width: 1720px) { :root { --container-pad: 48px; } }
@media (max-width: 1280px) { :root { --container-pad: 32px; } }
@media (max-width: 768px)  { :root { --container-pad: 16px; --section-gap: 64px; } } /* 모바일 거터 16 — 전체메뉴와 동일 */