/* ─────────────────────────────────────────────────────────────
   TMG 테마 토큰 — 색·글꼴·글자 크기·굵기·자간·모서리·간격의 단일 정본.
   규칙: site.css 등 화면 코드에서는 var(--tmg-*) 만 쓴다. 새 값이 필요하면 여기에 먼저 추가한다.
   검사: node --no-warnings scripts/check-theme-colors.mjs (직접 색상값이 기준선보다 늘면 실패)
   ───────────────────────────────────────────────────────────── */
:root {
  /* 브랜드 — TMG 로고 파랑을 기준으로 한 단계. 800은 조직도·강조 상자의 짙은 남색 */
  --tmg-primary-50:  #eaf2f8;
  --tmg-primary-100: #d3e4f0;
  --tmg-primary-500: #3b8ec6;
  --tmg-primary-600: #2077ae;   /* 로고 파랑 */
  --tmg-primary-700: #2f5680;
  --tmg-primary-800: #1f3a5c;
  --tmg-red-600:     #dd1b1f;   /* 로고 빨강 — 포인트로만 */

  /* 글자 */
  --tmg-ink:   #141414;   /* 제목·진한 글자 */
  --tmg-ink-2: #2a2a28;   /* 긴 본문 */
  --tmg-mute:  #5d5d5a;   /* 보조 글자 */

  /* 면·선 — 따뜻한 미색 바탕 */
  --tmg-bg:          #f3f2ee;
  --tmg-bg-2:        #e9e7e1;
  --tmg-card:        #ffffff;
  --tmg-line:        rgba(20, 20, 20, .14);
  --tmg-line-strong: #a9a7a0;   /* 조직도 연결선 등 */

  /* 어두운 구역(히어로·스토리·CTA·푸터) */
  --tmg-dark:    #0f1012;
  --tmg-dark-2:  #1b1c1f;
  --tmg-on-dark: #f3f2ee;   /* 어두운 바탕 위 글자 */
  --tmg-white:   #ffffff;
  --tmg-black:   #000000;

  /* 글꼴 */
  --tmg-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --tmg-font-serif: Georgia, "Times New Roman", serif;   /* 장식용 따옴표만 */
  --tmg-fw-medium:   500;
  --tmg-fw-semibold: 600;
  --tmg-fw-bold:     700;

  /* 글자 크기 — 고정 단계 */
  --tmg-fs-2xs:     11px;
  --tmg-fs-xs:      12px;
  --tmg-fs-sm:      13px;
  --tmg-fs-md:      14px;
  --tmg-fs-body-sm: 15px;
  --tmg-fs-body:    16px;
  --tmg-fs-body-lg: 17px;
  --tmg-fs-lead:    18px;
  --tmg-fs-title:   20px;
  /* 글자 크기 — 화면 폭·높이에 따라 커지는 제목 단계.
     한 화면(슬라이드)에 제목과 내용이 함께 들어가야 하므로 vw뿐 아니라 vh로도 상한을 둔다
     (윈도 1920×1080·배율 125% → 브라우저 화면 약 1536×730에서도 잘리지 않게). 2026-10-08 리뷰 반영으로 전체 축소 */
  --tmg-fs-nav:        clamp(18px, 1.35vw, 25px);   /* 헤더 메뉴 — 기존 tmg.kr 메뉴(약 20~22px)만큼 크게(2026-10-13) */
  --tmg-fs-card:       clamp(17px, 1.3vw, 22px);
  --tmg-fs-hero-sub:   clamp(14px, 1.1vw, 18px);
  --tmg-fs-h4:         clamp(18px, 1.6vw, 26px);
  --tmg-fs-h3:         clamp(20px, min(1.7vw, 3.2vh), 26px);
  --tmg-fs-h3-lg:      clamp(20px, min(1.8vw, 3.4vh), 30px);
  --tmg-fs-spec:       clamp(20px, 1.8vw, 30px);
  --tmg-fs-statement:  clamp(19px, min(1.9vw, 3.6vh), 32px);
  --tmg-fs-h2-sm:      clamp(22px, min(2.1vw, 4vh), 36px);
  --tmg-fs-h2:         clamp(24px, min(2.5vw, 4.6vh), 42px);
  --tmg-fs-stat:       clamp(30px, min(3.2vw, 6.2vh), 60px);
  --tmg-fs-menu:       clamp(36px, 10vw, 56px);
  --tmg-fs-display-md: clamp(26px, min(3vw, 5.6vh), 52px);
  --tmg-fs-page-title: clamp(28px, min(3.2vw, 6vh), 56px);
  --tmg-fs-display:    clamp(30px, min(4vw, 7.4vh), 76px);
  --tmg-fs-year:       clamp(34px, 3.4vw, 60px);
  --tmg-fs-cat:        clamp(24px, min(2.8vw, 5.2vh), 50px);   /* 홈 분야 목록 */
  --tmg-fs-hero:       clamp(40px, min(6.6vw, 11.5vh), 124px);
  --tmg-fs-quote:      clamp(90px, min(10vw, 18vh), 200px);   /* 회장 인사말 큰 따옴표(장식) */

  /* 자간 */
  --tmg-ls-display: -0.05em;   /* 큰 제목·숫자 */
  --tmg-ls-heading: -0.04em;   /* 절 제목 */
  --tmg-ls-title:   -0.025em;  /* 카드·소제목 */
  --tmg-ls-caps:    .14em;     /* 영문 대문자 라벨 */

  /* 모양·움직임·배치 */
  --tmg-radius:    10px;
  --tmg-radius-lg: 16px;
  --tmg-border:    1px solid var(--tmg-line);   /* 칸 구분선 */
  /* 간격 — 슬라이드(한 화면) 구성 기준. 화면 높이를 따라 줄고 늘어난다 */
  --tmg-header-h:  72px;                          /* 고정 헤더 높이(스크롤 뒤) */
  --tmg-slide-pad: clamp(14px, 3.4vh, 44px);     /* 슬라이드 위·아래 안쪽 여백(헤더 제외) */
  --tmg-sp-head:   clamp(14px, 2.6vh, 32px);     /* 절 제목 → 내용 */
  --tmg-sp-stack:  clamp(10px, 1.6vh, 18px);     /* 제목·설명·태그 사이 */
  --tmg-sp-block:  clamp(20px, 4vh, 48px);       /* 한 화면 안 덩어리 사이 */
  --tmg-sp-section: clamp(56px, 9vh, 120px);     /* 슬라이드가 아닌 절의 위·아래 여백 */
  --tmg-sticky-top: var(--tmg-header-h);         /* 상단 고정 띠 위치 — 헤더가 숨으면 JS가 0으로 */
  --tmg-gutter: clamp(20px, 4vw, 64px);
  /* 본문 폭: 보통 화면(~1920)은 1680px까지, 와이드·울트라와이드(2560~5120)는 화면의 86%까지 넓혀 빈 여백을 줄인다(2026-10-12 통화).
     100vw 대신 100%를 써서 윈도(엣지·크롬)의 세로 스크롤바 폭만큼 화면이 넘치지 않게 한다 */
  --tmg-wrap:   min(calc(100% - 2 * var(--tmg-gutter)), max(1680px, 86%));
  --tmg-edge:   calc((100% - var(--tmg-wrap)) / 2);   /* 화면 끝 → 본문 시작까지(전체 폭 요소에서만 사용) */
  --tmg-ease:   cubic-bezier(.22, .61, .36, 1);
  --tmg-grade:  saturate(.82) contrast(1.05) brightness(.98);   /* 사진 색 보정 */
}