/* ============================================================
   스파르타 오피스 그룹웨어 — 디자인 토큰
   모든 화면(public/*.html)이 가장 먼저 불러오는 공용 토큰. 값의 정본은 이 파일 하나입니다.
   ※ 라이트 전용(다크모드 미지원). 모든 토큰은 :root 라이트 값 하나로 관리합니다.
   ============================================================ */

:root {
  /* ---- 표면(Surface) & 배경 ---- */
  --bg: #f2f4f7;            /* 페이지 배경 */
  --surface: #ffffff;      /* 카드/상단바 기본 표면 */
  --surface-soft: #f7f8fa; /* 카드 내부 인풋/부드러운 블록 */
  --surface-strong: #edf0f3; /* 강조 블록(아이콘칩, 배지 바탕) */

  /* ---- 잉크(Ink) & 텍스트 ---- */
  --ink: #14171c;          /* 기본 텍스트 / 브랜드 로고 텍스트 / 다크 카드 배경 */
  --ink-soft: #505762;     /* 보조 텍스트, 버튼 라벨 */
  --muted: #858d98;        /* 캡션, placeholder, 메타 */

  /* ---- 라인(Line) ---- */
  --line: #dfe3e8;         /* 카드 테두리, 구분선 */
  --line-strong: #cbd1d8;  /* 인풋 테두리, 강한 구분 */

  /* ---- 액센트(오렌지, 브랜드 시그니처) ---- */
  --accent: #ff5a3c;       /* 주요 강조: 밑줄, D-day, 링크 hover, 포커스 */
  --accent-strong: #e9472c;/* 텍스트로 쓰는 진한 액센트 */
  --accent-soft: #fff0ec;  /* 액센트 배경 pill/장식 */

  /* ---- 보조색(Secondary) + soft 변형 ---- */
  --teal: #18ad97;         --teal-soft: #dff8f3;   /* 성장/모집/진정성, 배너 slide2 */
  --violet: #6852e8;       --violet-soft: #ece9ff; /* 이벤트/타운홀/재무, 배너 slide3 */
  --amber: #ef9d28;        --amber-soft: #fff4df;  /* 공간/복지 안내, 배너 slide4 */
  --blue: #377cf6;         --blue-soft: #e9f1ff;   /* 가이드/업무툴/건강, 배너 slide5 */

  /* ---- 상태(Danger) ---- */
  --danger: #e44848;

  /* ---- 브랜드 레드(로고 전용) ---- */
  --brand-red: #fa0030;   /* 로고 이미지에서 추출한 브랜드 레드. "HOME" 워드마크 전용, 다른 곳에 쓰지 않음 */

  /* ---- 그림자 ---- */
  --shadow: 0 12px 34px rgba(20, 23, 28, 0.07);      /* 토스트, 드로어, 떠 있는 요소 */
  --shadow-soft: 0 5px 18px rgba(20, 23, 28, 0.05);  /* 카드 기본 */

  /* ---- 라운드(Radius) ---- */
  --radius-xl: 24px;  /* 대형 히어로/프로필 카드 */
  --radius-lg: 18px;  /* 카드 기본 */
  --radius-md: 13px;  /* 배너, 검색 인풋 */
  --radius-sm: 9px;   /* 버튼, 인풋, 작은 요소 */

  /* ---- 레이아웃 ---- */
  --header-h: 76px;   /* 상단바 높이(900px 이하에서 66px로 축소) */

  /* ---- 폰트 패밀리 ---- */
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* 본문 전반 */
  --font-label: "Archivo", sans-serif;              /* 영문 라벨/숫자/코드/카운트 */
  --font-logo: Impact, "Arial Black", sans-serif;   /* 브랜드 로고 "HOME" 전용 */

  /* ---- 폰트 크기 스케일(실사용 값) ---- */
  --fs-11: 11px;  /* eyebrow, 카운트, 메타 캡션 */
  --fs-12: 12px;  /* pill, 캡션, 보조 라벨 */
  --fs-13: 13px;  /* 퀵링크, 버튼 보조, 리스트 텍스트 */
  --fs-14: 14px;  /* 폼 라벨, 게시글 제목, 프로필 수치 */
  --fs-15: 15px;  /* 본문 기본(body) */
  --fs-16: 16px;  /* nav-btn, tab-btn, deadline */
  --fs-17: 17px;  /* 퀵메뉴 타이틀, 프로필 이름 */
  --fs-18: 18px;  /* section-head h3, 핵심가치 headline */
  --fs-19: 19px;  /* value-card 타이틀 */
  --fs-22: 22px;  /* section-head h2, news h2 */
  --fs-25: 25px;  /* 게시판/글쓰기 h1 */
  --fs-27: 27px;  /* board-title h2 */
  --fs-30: 30px;  /* 생활백서 상세 h2 */
  --fs-hero: clamp(30px, 4vw, 48px);  /* 생활백서 히어로 h1 */
  --fs-banner: clamp(24px, 3vw, 38px);/* 롤링 배너 h2 */

  /* ---- 폰트 굵기 스케일 ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600; /* 본문 강조, placeholder-ish */
  --fw-bold: 700;     /* 라벨, 버튼, 메뉴 */
  --fw-extrabold: 800;/* 제목, 카운트, 탭 활성 */
  --fw-black: 900;    /* 최상위 강조(아바타, 퀵타이틀) */

  /* ---- 자간(letter-spacing) 타이트닝 스케일 ---- */
  --ls-tight-1: -0.02em;   /* 소제목/라벨 */
  --ls-tight-2: -0.035em;  /* h3급 */
  --ls-tight-3: -0.045em;  /* h2급, value headline */
  --ls-tight-4: -0.05em;   /* 게시판 h1 */
  --ls-tight-5: -0.055em;  /* board-title, 배너 h2, 상세 h2 */
  --ls-tight-6: -0.06em;   /* 히어로 h1 */
  --ls-wide: 0.11em;       /* eyebrow(대문자 영문) */
  --ls-wide-label: 0.12em; /* 브랜드/핸드북 eyebrow */

  /* ---- 간격 스케일(실사용) ---- */
  --space-shell-gap: 22px;   /* page-shell 좌/본문 컬럼 간격 */
  --space-col-gap: 18px;     /* left-column / main-column 카드 간 세로 간격 */
  --card-pad: 24px;          /* .section-pad 표준 카드 패딩 */
  --card-pad-sm: 22px;       /* 콤팩트 카드(ground 등) */
  --card-pad-lg: 25px;       /* 프로필 카드 */
  --banner-pad: 30px 34px;   /* 배너 내부 패딩 */

  /* ---- 모션 ---- */
  --dur-fast: .15s;   /* 아이콘/링크 색상 */
  --dur-base: .16s;   /* 카드 hover transform */
  --dur-slow: .25s;   /* 드로어 슬라이드 */
  --ease: ease;
  --ease-carousel: cubic-bezier(.4, 0, .2, 1); /* 배너 트랙 이동 */
}

/* 900px 이하에서 상단바 높이를 줄인다 (index/members/backoffice 공통) */
@media (max-width: 900px) {
  :root { --header-h: 66px; }
}