@charset "UTF-8";
/* ==========================================================================
   xc-tokens.css — 디자인 토큰
   컴퓨터메이트 홈페이지 개편 / xCalibur

   · 모든 토큰은 --xc- 프리픽스로 네임스페이스 분리 (기존 style.css 와 충돌 방지)
   · 이 파일은 변수만 정의한다. 컴포넌트 스타일을 넣지 않는다.
   · 확정 근거: docs/SCREENS.md · docs/INTERACTION.md · docs/BENCHMARK.md
   ========================================================================== */

:root {

  /* ────────────────────────────────────────────────────────────
     1. 브랜드 컬러
     ──────────────────────────────────────────────────────────── */

  /* xCalibur 주색 — 네이비
     2026-07-29 짙게 조정. 색상각은 218°로 유지하고 명도만 낮춰 성격은 그대로 두었다.
     이전값: navy #232B3A(L 18.2%) / deep #171D28 */
  --xc-navy:            #161D29;   /* hue 217.9° · L 12.4% */
  --xc-navy-2:          #2E3A50;
  --xc-navy-3:          #3E4C68;
  --xc-navy-deep:       #0D1119;   /* 더 어두운 바닥 */

  /* 기존 회사(MATE) 컬러 — legacy style.css 계승 */
  --xc-orange:          #fc6500;   /* ★ 기존 포인트 컬러 (유지 확정) */
  /* ⚠️ 어둡게 만든 오렌지는 쓰지 않는다. 포인트색은 #fc6500 하나뿐이다.
        흰 배경 3.0:1 이라 작은 글자에서는 최소대비(4.5:1)를 넘지 못한다.
        오렌지를 글자에 쓸 자리라면 굵기·크기를 올리거나 본문색으로 바꾼다 */
  --xc-amber:           #feb500;
  --xc-blue:            #032d72;   /* legacy 주 네이비블루 */
  --xc-blue-2:          #083a8b;

  /* xCalibur 그라디언트 — "검광"
     끝단은 코랄(#F2836B, hue 10.7°) → 오렌지(hue 18.7°)로 조정 확정 (2026-07-29, A2안).
     기준선: 기존 MATE 오렌지 #FC6500 = hue 24.0°. 5° 간격을 유지해 두 브랜드가 섞이지 않게 한다. */
  --xc-grad-1:          #FBE38A;   /* 골드      hue 47.3° */
  --xc-grad-2:          #F9A85C;   /* 오렌지    hue 29.0° */
  --xc-grad-3:          #F18757;   /* 오렌지 딥 hue 18.7° */
  --xc-gradient:        linear-gradient(100deg, var(--xc-grad-1), var(--xc-grad-2), var(--xc-grad-3));
  --xc-gradient-diag:   linear-gradient(135deg, var(--xc-grad-1), var(--xc-grad-2), var(--xc-grad-3));
  /* 다크 섹션 배경용 광원 (은은하게) */
  --xc-gradient-glow:   radial-gradient(ellipse 60% 50% at 80% 0%, rgba(249,168,92,.18), transparent 70%);

  /* 상태색 */
  --xc-success:         #10b981;
  --xc-error:           #ef4444;   /* 선·아이콘용. 흰 배경 3.7:1 이라 글자에는 못 쓴다 */
  --xc-error-text:      #c62828;   /* 에러 문구용. 흰 배경 5.9:1 */


  /* ────────────────────────────────────────────────────────────
     2. 그레이 스케일
     ──────────────────────────────────────────────────────────── */
  --xc-white:           #ffffff;
  --xc-gray-50:         #f8f9fb;
  --xc-gray-100:        #f1f3f6;
  --xc-gray-200:        #e5e8ee;   /* 브랜드 배경 그레이 */
  --xc-gray-300:        #d3d8e0;
  --xc-gray-400:        #a8b0bd;
  --xc-gray-500:        #7b8494;
  --xc-gray-600:        #5a6474;
  --xc-gray-700:        #3f4857;
  --xc-gray-800:        #2b3341;
  --xc-gray-900:        #1a202b;


  /* ────────────────────────────────────────────────────────────
     3. 역할색 (라이트 기본)
        다크 섹션에서는 .xc-dark 가 이 값들을 덮어쓴다 → §9
     ──────────────────────────────────────────────────────────── */
  --xc-bg:              var(--xc-white);
  --xc-bg-soft:         var(--xc-gray-50);
  --xc-bg-muted:        var(--xc-gray-100);
  /* 태그 칩 면색. 반투명이라 어떤 표면 위에 올려도 그 표면보다 한 단계 진하게 깔린다
     (물듦으로 배경이 변하는 구간에서도 따라간다) */
  --xc-chip-bg:         rgba(22, 29, 41, .08);
  /* 포인트색 칩 면. 오렌지를 아주 옅게 깐다.
     ⚠️ 진하게 깔수록 경고 배지처럼 읽힌다 */
  --xc-chip-accent-bg:  rgba(252, 101, 0, .06);

  --xc-text:            var(--xc-navy);        /* 본문·제목 */
  --xc-text-sub:        var(--xc-gray-600);    /* 보조 설명 */
  --xc-text-weak:       var(--xc-gray-600);    /* 캡션·메타 (gray-500 은 흰 배경에서 3.8:1 로 AA 미달) */

  --xc-border:          rgba(22, 29, 41, .14);
  --xc-border-weak:     rgba(22, 29, 41, .07);
  --xc-border-strong:   rgba(22, 29, 41, .38);

  /* 강조색 — 브랜드 스코프에서 재지정 (§8) */
  --xc-accent:          var(--xc-orange);
  --xc-accent-fill:     var(--xc-orange);      /* 버튼 배경 (색 또는 그라디언트) */
  --xc-accent-on:       var(--xc-white);       /* 강조 배경 위 글자색 */
  /* 포커스 링은 강조색과 분리한다. 웜 그라디언트 계열은 흰 배경에서
     #F9A85C 1.94:1 / #F18757 2.52:1 로 비텍스트 최소대비 3:1 을 못 넘는다. */
  --xc-focus:           var(--xc-navy);        /* 흰 배경 위 16.9:1 */


  /* ────────────────────────────────────────────────────────────
     4. 타이포그래피
     ──────────────────────────────────────────────────────────── */
  /* 각 페이지가 `variable/pretendardvariable-dynamic-subset` 을 불러온다.
     굵기 45~920 을 파일 하나가 덮으므로 400·500·600·700·800 이 전부 한 파일에서 나온다.
     ⚠️ 링크를 static 판으로 되돌리면 'Pretendard Variable' 이라는 이름이 사라져
        조용히 두 번째 후보('Pretendard')로 넘어간다. 둘은 같이 움직여야 한다. */
  --xc-font-ko: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                system-ui, 'Malgun Gothic', '맑은 고딕', sans-serif;
  /* 영문·숫자 표시용. 별도 디스플레이 서체로 교체할 수 있는 지점 */
  --xc-font-en: var(--xc-font-ko);
  --xc-font-mono: 'D2Coding', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ────────────────────────────────────────────────────────────
     글자 크기 표준 (2026-07-31 확정)

     두 갈래로 나눈다. 섞어 쓰면 안 된다.

     ① 고정 램프 --xc-fs-{12..20}
        UI·본문 보조 텍스트. 화면 폭이 변해도 크기가 그대로다.
        **컴포넌트 CSS 에서 px 를 직접 쓰지 않는다. 반드시 이 토큰을 쓴다.**
        ⚠️ 12px 이 하한이다. 그보다 작으면 한글 자모가 뭉개진다.
           (예전에 10 · 11 · 11.5 · 12.5px 이 섞여 있었다. 전부 12px 로 모았다)

     ② 유동 척도 --xc-fs-display ~ --xc-fs-body
        제목·리드처럼 화면 폭에 따라 커져야 하는 것. clamp() 로 스스로 조절한다.
        섹션 고유의 연출용 크기는 clamp() 를 직접 써도 되지만,
        **최소값(모바일에서 보이는 값)은 아래 중 하나**여야 하고 왜 그 크기인지 주석을 남긴다.
          40 · 32 · 26 · 20 · 18 · 17 · 16 · 15 · 13   (유동 토큰의 최소값 + 램프)
        등록된 예외 2개 — 새로 늘리지 말 것:
          19px  .xc-decl__body p · .xc-hist__navi button · .xc-card__label · .xc-card__spine
          22px  .xc-str__name

     ⚠️ 토큰 이름이 같아도 값이 같다고 단정하지 말 것.
        .xc-str.is-stage .xc-str__name 은 clamp(26px, 3vw, 44px) 로 --xc-fs-h2 와 양 끝이
        같지만 기울기가 다르다(3vw / 3.2vw). 1280px 에서 38.4px 대 40.96px 로 갈린다.
        토큰으로 바꿀 때는 양 끝이 아니라 **중간값까지 재 보고** 바꾼다.

     ⚠️ 굵은 글씨로 대비 기준을 넘기려면 18.66px 이상이어야 한다(WCAG '큰 글씨').
        포인트 오렌지처럼 대비가 빠듯한 색을 글자에 쓸 때는 --xc-fs-20 이상 + 700.
     ──────────────────────────────────────────────────────────── */

  /* ① 고정 램프 */
  --xc-fs-12: 12px;   /* 하한. 칩·배지·탭 안 숫자 */
  --xc-fs-13: 13px;   /* 캡션·브레드크럼·메타 */
  --xc-fs-14: 14px;   /* 내비 보조·푸터 목록 */
  --xc-fs-15: 15px;   /* 보조 본문·버튼 라벨 */
  --xc-fs-16: 16px;   /* GNB 주메뉴·UI 강조 */
  --xc-fs-18: 18px;   /* 아이콘 안 숫자 */
  --xc-fs-20: 20px;   /* 큰 글씨 하한(대비 3:1 적용 가능) */

  /* 의미 별칭 — 기존 사용처를 그대로 두기 위한 것. 새 코드는 위 램프를 직접 써도 된다 */
  --xc-fs-2xs:     var(--xc-fs-12);
  --xc-fs-xs:      var(--xc-fs-13);
  --xc-fs-sm:      var(--xc-fs-15);
  --xc-fs-md:      var(--xc-fs-16);

  /* ② 유동 척도 */
  --xc-fs-display: clamp(40px, 6vw,   88px);   /* 메인 히어로 */
  --xc-fs-h1:      clamp(32px, 5vw,   64px);   /* 페이지 제목 */
  --xc-fs-h2:      clamp(26px, 3.2vw, 44px);   /* 섹션 제목 */
  --xc-fs-h3:      clamp(20px, 2vw,   28px);
  --xc-fs-h4:      clamp(17px, 1.4vw, 20px);
  --xc-fs-lead:    clamp(17px, 1.5vw, 21px);   /* 리드 문단 */
  --xc-fs-body:    clamp(15px, 1.1vw, 17px);


  /* ── 역할별로 무엇을 쓸지 (2026-08-11 전 화면 실측으로 확정) ──────────
     크기를 고를 때 감으로 정하지 말고 이 표를 본다.

       페이지 제목        --xc-fs-h1        86.4   .xc-ph__title
       섹션 제목(메인)    --xc-fs-h2        44     index.html 만
       섹션 제목(서브)    --xc-fs-blk-h2    36     ← 서브페이지는 예외 없이 이것
       리드 문단          --xc-fs-lead      21     .xc-lead · .xc-sol__lead · .xc-inq__lead
       라벨(eyebrow)      --xc-fs-xs        13
       항목 제목(큰 카드) --xc-fs-h3        31.7   .xc-h3
       항목 제목(표준)    --xc-fs-h4        20     목록·카드 항목
       항목 제목(좁은 칸) --xc-fs-md        16
       메타·캡션          --xc-fs-xs        13     날짜·출처·태그

     ⚠️ 본문이 두 개인 것은 실수가 아니다. 역할이 다르다. 합치지 말 것.
        · --xc-fs-body (15~17 유동) = 읽는 글. 여러 줄로 이어지는 문단
        · --xc-fs-sm   (15 고정)    = 보조. 항목 설명·주석·목록 요약
        1440 에서 0.84px 차라 안 보이지만 1920 에서는 17 대 15 로 벌어진다.
        글자 수로 고르지 않는다 — 80자가 넘어도 항목 설명이면 sm 이다.
        합치면 한쪽이 망가진다. 긴 글을 15 고정으로 두면 넓은 화면에서 답답하고,
        짧은 설명을 유동으로 두면 카드 안에서 쓸데없이 커진다.

     ⚠️ 승인된 예외는 넷뿐이다. 늘리지 말 것.
        · .xc-solall__head 44px  MATE 제품 제목(한 화면에 제품 3~6개, 제품이 페이지 단위)
        · .xc-adds__head · .xc-decl__head 55px  페이지의 단언
        · .xc-xc__head 44px  「왜 검과 검집인가」(사용자 지정)
        · .xc-card__name · .xc-two__name 37.4px / .xc-xc__sol-name 28px
          메인 카드와 xCalibur 제품명(브랜드 스케일) */


  /* ③ 화면 고유 디스플레이 크기
     ①②로 안 떨어지는 연출용 값. 컴포넌트 CSS 에 흩어 두지 않고 여기 모은다.
     ⚠️ 최소값(모바일에서 보이는 값)은 ②의 허용 목록을 따른다.
        19 · 22 는 등록된 예외다(sub-lead · card-label · 19 · str-name).
     ⚠️ 값이 비슷해 보여도 기울기(vw 계수)가 다르면 다른 토큰이다.
        str-name-on(3vw) 과 --xc-fs-h2(3.2vw) 는 양 끝만 같고 중간이 갈린다. */
  --xc-fs-footer-title: clamp(40px, 5.2vw, 84px);   /* 푸터 Contact 제목 */
  --xc-fs-hist-on:      clamp(32px, 3.8vw, 60px);   /* 연혁 · 현재 시기(고정 모드) */
  --xc-fs-decl-ttl:     clamp(26px, 3.8vw, 60px);   /* 회사소개 · 선언 제목 */
  --xc-fs-facts-num:    clamp(32px, min(29cqw, 12vw), 64px);   /* 기업정보 숫자 (칸 폭 기준 cqw) */
  --xc-fs-add-en:       clamp(26px, 3.2vw, 46px);   /* 메인 ③ ADD 영문 단계명 */
  --xc-fs-str-name-on:  clamp(26px, 3vw, 44px);   /* 강점 이름(무대 모드) */
  --xc-fs-blk-h2:       clamp(26px, 2.8vw, 36px);   /* 서브페이지 블록 제목 */
  /* 블록 제목의 한 단계 아래. MATE 솔루션의 제품 안 소제목(.xc-h3, 77곳)과
     사업분야 개요의 오른쪽 제목이 같은 값을 각자 적고 있던 것을 여기로 모았다.
     ⚠️ --xc-fs-h3(clamp 20·2vw·28) 와 다른 값이다. 이름이 비슷하다고 바꿔 쓰지 말 것.
        .xc-h3 클래스가 쓰는 것은 이쪽이다. */
  --xc-fs-blk-h3:       clamp(24px, 2.2vw, 34px);
  --xc-fs-two-name:     clamp(26px, 2.6vw, 38px);   /* 메인 ② 두 갈래 카드 이름 */
  --xc-fs-str-name:     clamp(22px, 2.2vw, 32px);   /* 강점 이름 */
  --xc-fs-hist-era:     clamp(20px, 2vw, 26px);   /* 연혁 시기 제목 */
  --xc-fs-sub-lead:     clamp(19px, 1.6vw, 24px);   /* 선언 본문 · 연혁 시기 버튼 */
  --xc-fs-card-label:   clamp(19px, 1.5vw, 25px);   /* 메인 ④ 라인업 세로 이름 */
  --xc-fs-lb-name:      clamp(18px, 2vw, 26px);   /* 원본 보기 제목 */
  --xc-fs-awd-yr:       clamp(18px, 1.6vw, 22px);   /* 수상 요약 카드 연도 */
  --xc-fs-footer-desc:  clamp(16px, 1.6vw, 28px);   /* 푸터 유도 문장 */
  --xc-fs-ph-sub:       clamp(15px, 1.2vw, 18px);   /* 페이지 헤더 서브카피 */
  --xc-fs-hist-sub:     clamp(13px, 1.05vw, 16px);   /* 연혁 시기 버튼 보조 */
  /* 2026-08-11 · main.css 에 직접 박혀 있던 값을 이름 붙여 옮긴 것.
     값은 그대로다. 화면은 하나도 바뀌지 않는다. */
  --xc-fs-mth-quote:    clamp(24px, 2.6vw, 38px);   /* ADD · 인용 문단 */
  --xc-fs-alg-arrow:    clamp(30px, 3vw,   42px);   /* 알고리즘 도해 · 잇는 화살표 */
  --xc-fs-hub-core-em:  clamp(22px, 2.2vw, 32px);   /* ADUP · 중심 개념 강조 */
  --xc-fs-feat-no-sm:   clamp(20px, 2vw,   30px);   /* 주요 기능 순번(카드 24장 화면 전용, 한 단계 낮춤) */
  --xc-fs-mark-no:      clamp(15px, 1.4vw, 19px);   /* ADD 흐름 · 이음매 배지 기호 */
  --xc-fs-navi-sub:     clamp(15px, 1.15vw, 18px);   /* 사업분야 · 목차 보조 */
  --xc-fs-erp-seq:      18px;                        /* ERP 도해 · 순번 라벨 */
  /* 컴포넌트 CSS 에 흩어져 있던 값을 여기로 모은 것.
     ⚠️ main.css 에 font-size 를 직접 쓰지 않는다. 쓰면 척도 밖 값이 늘어난다. */
  --xc-fs-eff-val:       clamp(32px, 3.4vw, 52px);   /* 스마트팩토리 · 효과 수치 */
  --xc-fs-xc-quote:      clamp(26px, 3vw, 46px);   /* xCalibur · 인용문 */
  --xc-fs-hub-core:      clamp(26px, 2.7vw, 40px);   /* ADUP · 중심 개념 */
  --xc-fs-feat-no:       clamp(26px, 2.6vw, 40px);   /* 솔루션 주요 기능 · 순번 */
  --xc-fs-xc-sol-name:   clamp(22px, 2vw, 28px);   /* xCalibur · 솔루션 이름 */
  --xc-fs-qp-core:       clamp(19px, 1.9vw, 27px);   /* QP · 중심 개념 */
  --xc-fs-loc-name:      clamp(20px, 1.8vw, 26px);   /* 오시는 길 · 거점 이름 */
  --xc-fs-hub-head:      clamp(19px, 1.75vw, 26px);   /* ADUP · 표 머리 */
  --xc-fs-card-ttl:      clamp(19px, 1.7vw, 24px);   /* 카드 제목 (채용 단계·복지·문의 폼·TMS 흐름·ADD 벽) */
  --xc-fs-awd-ttl:       clamp(18px, 1.7vw, 24px);   /* 수상 이름 · 공정 제목 */
  --xc-fs-job-name:      clamp(19px, 1.6vw, 23px);   /* 채용 · 모집직무 이름 */
  --xc-fs-card-ttl-sm:   clamp(18px, 1.5vw, 22px);   /* 작은 카드 제목 */
  --xc-fs-story-body:    clamp(18px, 1.45vw, 22px);   /* xCalibur · 검과 검집 본문 */
  --xc-fs-panel-t:       clamp(20px, 1.5vw, 22px);   /* 이상탐지 패널 제목 */
  --xc-fs-navi-em:       clamp(17px, 1.35vw, 21px);   /* 사업분야 · 목차 강조 */
  --xc-fs-ov-name:       clamp(17px, 1.35vw, 20px);   /* 사업분야 · 항목 이름 */
  --xc-fs-panel-li:      clamp(17px, 1.3vw, 20px);   /* 이상탐지 패널 목록 */
  --xc-fs-cps-box:       clamp(16px, 1.3vw, 19px);   /* CPS · 상자 제목 */
  --xc-fs-leaf:          clamp(16px, 1.4vw, 18px);   /* 도해 말단 라벨 */
  --xc-fs-hub-core-sub:  clamp(15px, 1.3vw, 18px);   /* ADUP · 중심 개념 보조 */
  /* 메인 ④ 라인업 펼침 패널 설명 · 메인 ⑤ 사업분야 카드 요약.
     ⚠️ 값이 바로 위 --xc-fs-hub-core-sub 와 같은 것은 의도한 것이다. 척도에 새 숫자를
        늘리지 않으려고 이미 있는 단을 그대로 쓴다. 역할이 달라 이름만 따로 둔다 —
        도해 안 보조 설명(hub-core-sub)과 카드 본문은 앞으로 따로 움직일 수 있다.
     ⚠️ 최소값 15px 을 올리지 말 것. vw1025 에서 라인업 패널 폭이 제일 좁아지는데
        16px 로 올리면 01 xMeister · 02 xMES · 07 mateX 의 설명이 한 줄 더 늘어난다.
     이름은 접힘 세로 이름(--xc-fs-card-label)과 짝이다. */
  --xc-fs-card-desc:     clamp(15px, 1.3vw, 18px);   /* 카드 본문 설명 (라인업 패널 · 사업분야 요약) */
  --xc-fs-list:          clamp(15px, 1.25vw, 17px);   /* 도해 안 목록 */
  --xc-fs-flow-no:       clamp(13px, 1.1vw, 15px);   /* TMS 흐름 · 순번 */
  --xc-fs-19:           19px;   /* 현재 쓰는 곳 없음. 라인업 세로 이름에 걸려 있었으나
                                   .xc-card__label 이 자기 font-size 를 갖고 있어
                                   한 번도 적용된 적이 없었다(2026-08-10 실측 확인) */

  /* 행간 */
  --xc-lh-tight:   1.2;    /* 대형 제목 */
  --xc-lh-heading: 1.35;
  --xc-lh-body:    1.75;   /* 한글 본문은 넉넉하게 */

  /* 자간 — 한글은 음수가 자연스럽다 */
  --xc-ls-display: -0.03em;
  --xc-ls-heading: -0.02em;
  --xc-ls-body:    -0.01em;

  /* 굵기 */
  --xc-fw-regular:  400;
  --xc-fw-medium:   500;
  --xc-fw-semibold: 600;
  --xc-fw-bold:     700;
  --xc-fw-extra:    800;


  /* ────────────────────────────────────────────────────────────
     5. 레이아웃
     ──────────────────────────────────────────────────────────── */
  /* 컨테이너 5단계 — 섹션 성격에 따라 선택 */
  /* 컨테이너 폭 5단계 (SCREENS.md 공통규칙).
     ⚠️ 메인은 --xc-area(1440) 하나로 통일한다 — 섹션마다 1600/1440 을 섞으면
        스크롤할 때 좌우 정렬선이 80px 씩 흔들린다.
     wide / wrap / box / sub 는 서브페이지용으로 남겨 둔 값이다(메인 미사용). */
  --xc-area-wide:  1840px;
  --xc-area-wrap:  1720px;
  --xc-area-box:   1600px;
  --xc-area:       1440px;   /* ★ 메인 기준 */
  --xc-area-sub:   1380px;
  --xc-area-text:  1140px;   /* LNB 제외 본문 */
  --xc-pad:          30px;   /* 좌우 여백 */

  /* 고정 요소 */
  /* ⚠️ GNB 실제 높이는 main.css 의 --gnb-row(80/64). 서브페이지 sticky 계산에만 쓸 것 */
  --xc-header-h:      80px;
  --xc-header-h-sm:   64px;
  --xc-subhead-h:    280px;   /* 서브페이지 타이포 헤더 */
  --xc-subhead-h-sm: 200px;   /* 모바일 */
  --xc-lnb-w:        240px;
  --xc-progress-h:     2px;

  /* 브레이크포인트 — 3개만 쓴다 (미디어쿼리에는 변수를 못 쓰므로 값 기준용 기록)
     LG 1280 노트북 · MD 1024 태블릿 가로 · SM 640 모바일 */
  --bp-lg: 1280px;
  --bp-md: 1024px;
  --bp-sm:  640px;

  /* 섹션 상하 여백 */
  --xc-sec-y-lg: clamp(80px, 10vw, 180px);
  --xc-sec-y:    clamp(60px,  7vw, 120px);
  --xc-sec-y-sm: clamp(40px,  5vw,  80px);

  /* 요소 간격 */
  --xc-gap-lg:   clamp(32px, 3vw, 56px);
  --xc-gap:      clamp(20px, 2vw, 32px);
  --xc-gap-sm:   clamp(12px, 1.2vw, 18px);

  /* 솔루션 제품개요에서 본문(.xc-sol__lead)과 그 아래 그림 사이.
     ⚠️ 그림은 페이지마다 클래스가 다르다(.xc-anom .xc-hub .xc-alg .xc-qp .xc-sol__flow).
        각자 값을 적어 두면 40/48/32 처럼 어긋난다. 실제로 어긋나 있었다.
        새 솔루션 페이지의 그림도 이 토큰을 쓴다. */
  --xc-sol-figgap: clamp(24px, 3vw, 40px);


  /* ────────────────────────────────────────────────────────────
     6. 모양
     ──────────────────────────────────────────────────────────── */
  --xc-radius-sm:  6px;
  --xc-radius:    12px;
  --xc-radius-lg: 20px;
  --xc-radius-full: 999px;

  --xc-shadow-sm: 0 1px 3px rgba(22, 29, 41, .06);
  --xc-shadow:    0 4px 20px rgba(22, 29, 41, .08);
  --xc-shadow-lg: 0 12px 40px rgba(22, 29, 41, .12);


  /* ────────────────────────────────────────────────────────────
     7. 모션
        기준: BENCHMARK.md — 핀사이트랩스 easing 토큰
     ──────────────────────────────────────────────────────────── */
  --xc-ease-out:      cubic-bezier(.22, 1, .36, 1);    /* 등장 */
  --xc-ease-standard: cubic-bezier(.4, 0, .2, 1);      /* 일반 전환 */
  --xc-ease-in-out:   cubic-bezier(.65, 0, .35, 1);

  --xc-dur-micro: .12s;
  --xc-dur-fast:  .18s;
  --xc-dur-base:  .28s;
  --xc-dur-slow:  .42s;
  /* 선이 그어지는 시간. --xc-dur-slow(폭 전환)보다 길어야 카드가 멎은 뒤에도 선이
     계속 그어져 시선을 끌고 간다. 짝이 되는 이징은 --xc-ease-in-out 이다.
     ⚠️ --xc-ease-out 과 같이 쓰지 말 것. 그 곡선은 35% 지점에서 90% 가 진행되어
        시간을 아무리 늘려도 앞에서 확 그어지고 끝에서 기어가는 모양이 된다. */
  --xc-dur-draw:  .72s;
  /* 한 번 퍼지고 사라지는 파문. 원이 채워지는 순간에 얹힌다.
     채움 전환(--xc-dur-base)보다 충분히 길어야 원이 다 칠해진 뒤에도 여운이 남는다. */
  --xc-dur-pulse: 1.4s;
  /* 아래에서 올라오는 진입 페이드 — 메인 섹션(JS)과 서브페이지(CSS)가 함께 읽는다.
     성격이 같은 모션이므로 한 곳에서 조절한다. main.js 의 RV 가 이 값을 파싱해 쓴다. */
  --xc-dur-reveal: .95s;

  --xc-trans-fast: all var(--xc-dur-fast) var(--xc-ease-out);
  --xc-trans:      all var(--xc-dur-base) var(--xc-ease-standard);
  --xc-trans-slow: all var(--xc-dur-slow) var(--xc-ease-standard);


  /* ────────────────────────────────────────────────────────────
     8. z-index
     ──────────────────────────────────────────────────────────── */
  --xc-z-bg:        -1;
  --xc-z-base:       1;
  --xc-z-float:    900;   /* 퀵메뉴 */
  --xc-z-header:  1000;
  --xc-z-dropdown:1010;
  --xc-z-overlay: 1020;   /* 전체메뉴 */
  --xc-z-modal:   1030;
}


/* ==========================================================================
   9. 브랜드 스코프
   기존 오렌지(#fc6500) 유지 + xCalibur 그라디언트로 두 브랜드를 시각 구분
   → 래퍼에 클래스만 붙이면 하위 컴포넌트 강조색이 전환된다
   ========================================================================== */

/* 기존 MATE 영역 (사업분야 · MATE 솔루션 · 회사소개 · 홍보센터 · 고객지원) */
.xc-brand-mate {
  --xc-accent:      var(--xc-orange);
  --xc-accent-fill: var(--xc-orange);
  --xc-accent-on:   var(--xc-white);
}

/* xCalibur 영역 */
.xc-brand-xcal {
  --xc-accent:      var(--xc-grad-2);
  --xc-accent-fill: var(--xc-gradient);
  --xc-accent-on:   var(--xc-navy);
}


/* ==========================================================================
   10. 다크 섹션
   라이트 70 : 다크 30. 역할색만 덮어써서 같은 컴포넌트가 양쪽에서 동작한다.
   적용처: 메인 히어로 · 서브페이지 헤더 · AI 방법론 · 검집 블록 · 푸터/CTA
   ========================================================================== */

.xc-dark {
  --xc-focus:         var(--xc-white);
  --xc-bg:            var(--xc-navy);
  --xc-bg-soft:       var(--xc-navy-2);
  --xc-bg-muted:      var(--xc-navy-deep);
  --xc-chip-bg:       rgba(255, 255, 255, .10);

  --xc-text:          var(--xc-white);
  --xc-text-sub:      rgba(255, 255, 255, .72);
  --xc-text-weak:     rgba(255, 255, 255, .52);

  --xc-border:        rgba(255, 255, 255, .16);
  --xc-border-weak:   rgba(255, 255, 255, .08);
  --xc-border-strong: rgba(255, 255, 255, .42);

  --xc-shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --xc-shadow:    0 4px 20px rgba(0, 0, 0, .35);
  --xc-shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);

  background: var(--xc-bg);
  color: var(--xc-text);
}

/* 다크 섹션 위 그라디언트 광원 */
.xc-dark--glow {
  position: relative;
  isolation: isolate;
}
.xc-dark--glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--xc-gradient-glow);
  z-index: var(--xc-z-bg);
  pointer-events: none;
}


/* ==========================================================================
   11. 반응형 재정의
   ========================================================================== */

/* 브레이크포인트 3개 기준 (LG 1280 / MD 1024 / SM 640) */
@media (max-width: 1280px) {
  :root {
    --xc-pad: 24px;
    --xc-lnb-w: 200px;
  }
}

@media (max-width: 1024px) {
  :root {
    --xc-header-h: 64px;
    --xc-subhead-h: var(--xc-subhead-h-sm);
  }
}

@media (max-width: 640px) {
  :root {
    --xc-pad: 20px;
    --xc-lh-body: 1.7;
  }
}


/* ==========================================================================
   12. 접근성 — 모션 최소화
   전정기관 장애 사용자 대응. GSAP 쪽에서도 별도 분기가 필요하다.
   (docs/INTERACTION.md §4 가드레일 1)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --xc-dur-micro: .01ms;
    --xc-dur-fast:  .01ms;
    --xc-dur-base:  .01ms;
    --xc-dur-slow:  .01ms;
    --xc-dur-draw:  .01ms;
    --xc-dur-pulse: .01ms;
    --xc-dur-reveal: .01ms;
  }
}


/* ==========================================================================
   13. 유틸리티 — 토큰을 바로 쓰는 최소 클래스
   컴포넌트 스타일은 별도 파일(xc-components.css)로 분리한다.
   ========================================================================== */

/* 컨테이너 */
.xc-area,
.xc-area-box,
.xc-area-wide,
.xc-area-text {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--xc-pad);
}
.xc-area      { max-width: var(--xc-area); }
.xc-area-box  { max-width: var(--xc-area-box); }
.xc-area-wide { max-width: var(--xc-area-wide); }
.xc-area-text { max-width: var(--xc-area-text); }

/* 섹션 여백 */
.xc-sec    { padding-block: var(--xc-sec-y); }
.xc-sec-lg { padding-block: var(--xc-sec-y-lg); }
.xc-sec-sm { padding-block: var(--xc-sec-y-sm); }

/* 그라디언트 텍스트 — 다크 배경에서만 사용할 것 (밝은 배경은 대비 미달) */
.xc-grad-text {
  background: var(--xc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 스크린리더 전용 */
.xc-blind {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* About 제목이 칠해지기 전 색 */
:root { --xc-decl-ghost: rgba(35, 43, 58, .15); }