/* ============================================================
   MOONGI PORTFOLIO v2 — design tokens
   컬러는 "온도"다. S0/S1 차가움 → S3 따뜻함.
   개별 색을 만지지 말고 --signal / --skin 을 상태별로 바꾼다.
   ============================================================ */

/* Simple Tech Bold 02 (demo) — 라틴 전용(A–Z, a–z, 0–9, 문장부호 105자).
   한글 글리프가 없으므로 스택 뒤에 한글 폰트를 두어 글자 단위로 폴백시킨다. */
@font-face {
  font-family: 'Simple Tech';
  src: url('../assets/fonts/simple-tech.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* Gmarket Sans — 한글 본문/UI.
   IBM Plex Sans KR은 좁고 세로로 길어 화면의 다른 요소(2.4등신 로봇, 가로로
   퍼진 육각 그리드, 넓적한 워드마크)와 따로 놀았다. 넓고 눌린 글자꼴로 교체.
   Light는 안 쓴다 — 웨이트당 400KB라 필요한 것만 싣는다. */
@font-face {
  font-family: 'Gmarket Sans';
  src: url('../assets/fonts/GmarketSansMedium.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gmarket Sans';
  src: url('../assets/fonts/GmarketSansBold.woff2') format('woff2');
  font-weight: 600 900;
  font-display: swap;
}

:root {
  /* --- steel (기계) --- */
  --steel-900: #0a0c0f;
  --steel-800: #12161c;
  --steel-700: #1b212a;
  --steel-600: #232b36;
  --steel-500: #2e3742;
  --steel-300: #6b7683;
  --steel-200: #98a2ae;
  --chrome:    #c7cfd8;

  /* --- moongi (사람) --- */
  --cream:      #f4eee1;
  --orange:     #f3944b;
  --orange-hot: #ff7a1a;
  --ink:        #1c1b19;

  /* --- machine signal --- */
  --cyan: #7fe8ff;

  /* --- 상태 구동 변수 (JS가 아니라 body[data-state] 가 바꾼다) --- */
  --signal:      var(--cyan);      /* 라이트·보더·커서·HUD 강조 */
  --signal-soft: rgba(127, 232, 255, 0.16);
  --text:        var(--steel-200);
  --text-strong: var(--chrome);
  --warmth:      0;                 /* 0 = 차가움, 1 = 따뜻함. 필터/글로우 세기 */

  /* --- 구조 --- */
  --line:   rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --panel:  rgba(18, 22, 28, 0.72);
  --rail-w: clamp(240px, 21vw, 430px);   /* 좌우 패널 폭 — 넓은 화면에서 스테이지가 과하게 벌어지지 않게 */
  --bar-h:  34px;
  --band-h: 44px;                        /* nav 밑 채널 실측 밴드 */                        /* 하단 HUD */
  --nav-h:  62px;

  /* --- 타이포 ---
     Simple Tech는 라틴 전용 디스플레이 서체라 **메인 타이틀에만** 쓴다.
     본문에 쓰면 한글(시스템 폰트)과 라틴(Simple Tech)의 x-height·굵기·폭이 안 맞아
     "건축 PE로 시작해서 AECOM·삼성에서" 같은 혼용 문장이 전부 들쭉날쭉해진다.

     나머지는 IBM Plex 슈퍼패밀리로 통일 — 한글(Sans KR)·라틴·모노가 한 설계라
     세 종류가 한 화면에 섞여도 튀지 않는다. HUD 실시간 수치만 진짜 모노. */
  --f-display: 'Simple Tech', 'Gmarket Sans', system-ui, sans-serif;  /* 메인 타이틀 전용 */
  --f-ui:      'Gmarket Sans', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Gmarket Sans', ui-monospace, monospace;
  --f-data:    'IBM Plex Mono', ui-monospace, monospace;
  --f-kr:      'Gmarket Sans', system-ui, sans-serif;

  /* --- 모션 --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   200ms;
  --t-med:    420ms;
  --t-slow:   640ms;

  /* --- x-ray 렌즈 (rig.js가 갱신) --- */
  --lens-x: -999px;
  --lens-y: -999px;
  --lens-r: 0px;
}

/* ---- S3: 마스크가 열리면 씬 전체가 따뜻해진다 ---- */
body[data-state='unmasked'] {
  --signal:      var(--orange-hot);
  --signal-soft: rgba(255, 122, 26, 0.16);
  --text:        #b6a893;
  --text-strong: var(--cream);
  --warmth:      1;
}

/* ---- 접근성: 모션 최소화 ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
}