/* agentport — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간 · 선언은 :root — @theme 블록은 브라우저가 읽지 않는다, lessons #73)
   방향 A 「포트 대장」: 밝은 온회색 캔버스 → 트레이 → 흰 시트 3층. 숫자·포트·코드는 JetBrains Mono, 이름·문장은 Pretendard.
   색 이름의 bg/surface/canvas/plate 는 `node build.mjs --contrast agentport` 가 배경으로 읽는 이름이다 — 바꾸지 않는다.
   서체 링크(페이지 <head>): /_shared/pretendard.css · /_shared/fonts/jetbrains-mono/font.css (그 둘만). */

:root {
  /* ── 색: 층 ─────────────────────────────────────────────── */
  --color-canvas: #ebeae5;          /* 페이지 바탕 = palette.bg · 밝은 온회색 — 사용자 요구(밝은 정보 사이트)로 R4 예외 승인(G1). 히어로·구간 제목이 선다 */
  --color-plate: #e3e2dc;           /* 트레이(더블 베젤 바깥 테 6px) · 주간 포트 띠 · 고지 첫 문단 상자 */
  --color-surface: #fcfcfa;         /* 시트 — 표·코드 밖 글·입력이 사는 흰 면 (순백 #fff 금지) */
  --color-surface-sunk: #f2f1ec;    /* 시트 안 오목 면 — 표 머리 행 · 행 hover · 인라인 코드 · 요약 상자 · 모노그램 면 */
  --color-code-bg: #17191c;         /* 코드 블록 · 꼬리(먹 시트) */

  /* ── 색: 글 ─────────────────────────────────────────────── */
  --color-ink: #141619;             /* 본문·제목 = palette.ink */
  --color-ink-2: #4a4f55;           /* 보조 글 — 캔버스 위에서도 쓸 수 있는 가장 옅은 글 (캔버스 5.35:1) */
  --color-ink-3: #5f646a;           /* 메타·포트 기본 — 시트·트레이·오목 면에서만 (캔버스 3.87:1 → 캔버스 위 금지) */
  --color-on-dark: #e7e6e1;         /* 먹 면(코드·꼬리) 위 글 */
  --color-on-dark-2: #9aa0a6;       /* 먹 면 위 보조 글 · 고지 상자 테 */

  /* ── 색: 선 ─────────────────────────────────────────────── */
  --color-hairline: #dcdad3;        /* 장식 선 — 행 구분 · 시트 머리 아래 · 격자 칸 사이 (정보를 싣지 않는다) */
  --color-rule-strong: #8e9196;     /* 입력칸·세그먼트 테 — 시트 위 3.08:1 (UI 구성 요소 3:1) */

  /* ── 색: 신호 (강조 1색 — "연결됨·켜짐" 에만) ─────────────── */
  --color-signal: #0a6446;          /* = palette.accent · 켜진 램프 · 현재 쪽·탭 막대 · 선택된 필터 막대 · 복사됨 · 포커스 링 · 원격 딱지 글 */
  --color-signal-surface: #e3efe7;  /* 원격 딱지 틴트 · 복사됨 알약 면 — 한 줄 높이(≤24px) 이하에서만 */
  --color-caution: #8a4a0c;         /* "호환 깨짐" 딱지 글 · 주의 콜아웃 머리 */
  --color-caution-surface: #f6ead9; /* 위 딱지·콜아웃 면 */

  /* ── 색: 코드 문법 (먹 면 위, 전부 ≥ 6.6:1) ─────────────── */
  --color-code-key: #86d1ab;        /* 키·속성 */
  --color-code-str: #e6c37a;        /* 문자열 */
  --color-code-num: #f0a98c;        /* 숫자·불리언 */
  --color-code-fn: #a9c7f0;         /* 명령·함수·메서드 */
  --color-code-dim: #9aa0a6;        /* 주석·구두점 · 줄 번호 */

  /* ── 색: 그래프 (시트 위) ───────────────────────────────── */
  --color-chart-bar: #3c4147;       /* 기본 막대·선 */
  --color-chart-muted: #8e8d85;     /* 비교 막대 · 로컬 쪽 · 지난 기간 — 시트 위 3:1 이상(그래픽 1.4.11) */
  --color-chart-grid: #e6e5df;      /* 눈금선 */

  /* ── 서체 ──────────────────────────────────────────────── */
  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Pretendard Variable", monospace;
  --font-display: "JetBrains Mono", ui-monospace, "Pretendard Variable", monospace; /* 숫자·포트·영문 라벨 전용 — 한글 제목은 --font-sans 700 */

  /* ── 글자 크기 (최소 12px 는 mono 라벨만 · 본문 16 · 표 15) ─ */
  --text-micro: 0.75rem;            --text-micro--line-height: 1rem;        /* 12 mono 눈썹·라벨(대문자 ≤ 28자) */
  --text-meta: 0.8125rem;           --text-meta--line-height: 1.25rem;      /* 13 딱지 · 표 한 줄 설명 · 메타 */
  --text-sm: 0.9375rem;             --text-sm--line-height: 1.4rem;         /* 15 표 이름 · 목록 · 메뉴 */
  --text-base: 1rem;                --text-base--line-height: 1.7rem;       /* 16 본문 · 입력 */
  --text-lg: 1.125rem;              --text-lg--line-height: 1.8rem;         /* 18 설명 문단 · 문서 본문 첫 문단 */
  --text-xl: 1.375rem;              --text-xl--line-height: 1.9rem;         /* 22 H3 · 메뉴 시트 행 */
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);            --text-2xl--line-height: 1.25;   /* H2 구간 제목 24→32 */
  --text-3xl: clamp(2rem, 1.4rem + 2vw, 3rem);              --text-3xl--line-height: 1.15;   /* 쪽 H1 32→48 */
  --text-hero: clamp(2.5rem, 1rem + 4.4vw, 4.5rem);         --text-hero--line-height: 1.08;  /* 홈·소개 H1 40→72 */
  --text-num: clamp(2rem, 1.2rem + 3vw, 4rem);              --text-num--line-height: 1;      /* 카운터·KPI (mono) 32→64 */
  --text-port: clamp(3.5rem, 1.5rem + 6vw, 7.5rem);         --text-port--line-height: 0.9;   /* 상세 포트 숫자 (mono) 56→120 */
  --text-giant: clamp(5rem, 2rem + 10vw, 12rem);            --text-giant--line-height: 0.85; /* 통계 2,418 · :404 (mono) 80→192 */

  /* 자간 (text 이름공간 곁 — 승급 때 --tracking-* 로 옮긴다) */
  --text-hero--letter-spacing: -0.025em;
  --text-num--letter-spacing: -0.04em;
  --text-micro--letter-spacing: 0.08em;

  /* ── 간격 (padding 은 리터럴 단계 · fluid 는 margin·gap 에만 — lessons #50) ─ */
  --spacing: 0.25rem;               /* Tailwind 4 기본 단위 */
  --spacing-1: 0.25rem;  --spacing-2: 0.5rem;  --spacing-3: 0.75rem; --spacing-4: 1rem;
  --spacing-5: 1.25rem;  --spacing-6: 1.5rem;  --spacing-8: 2rem;    --spacing-10: 2.5rem;
  --spacing-12: 3rem;    --spacing-16: 4rem;   --spacing-20: 5rem;   --spacing-24: 6rem;
  --spacing-page-sm: 1rem;          /* < 720 옆 여백 */
  --spacing-page-md: 1.5rem;        /* 720–1023 */
  --spacing-page-lg: 2rem;          /* 1024–1199 */
  --spacing-page-xl: 2.5rem;        /* ≥ 1200 */
  --spacing-container: 80rem;       /* 1280 최대 폭 */
  --spacing-gutter: 1.5rem;         /* 12열 거터 24 (md 6열은 16 = --spacing-4) */
  --spacing-rail: 15.5rem;          /* 목록 필터 레일 248 */
  --spacing-toc: 13.75rem;          /* 문서 목차 레일 220 */
  --spacing-aside: 17.5rem;         /* 사례·글 사실 레일 280 */
  --spacing-measure: 44rem;         /* 문서 본문 최대 704 */
  --spacing-bezel: 6px;             /* 트레이 테 두께 */
  --spacing-row: 3rem;              /* 표 행 최소 48 (터치 44 이상) */
  --spacing-nav: 3.5rem;            /* 머리 줄 높이 <720 = 56 (워드마크 + 검색·메뉴 단추 44) */
  --spacing-bar: 4rem;              /* 명령줄 머리 줄 1 높이 ≥720 = 64 (줄 2 내비 44 는 붙지 않는다) */
  --spacing-sticky-top: 6rem;       /* sticky 레일 top 96 = 명령줄 64 + 32 */
  --spacing-section: clamp(4rem, 2rem + 6vw, 10rem); /* 캔버스 위 구간 사이 (margin 전용) — "밖은 넉넉히" */

  /* ── 반경 (트레이 = 시트 + 테 6 → 동심원) ────────────────── */
  --radius-sheet: 1.25rem;          /* 20 시트 · 먹 꼬리 */
  --radius-plate: calc(1.25rem + 6px); /* 26 트레이 */
  --radius-code: 0.875rem;          /* 14 코드 블록(시트 안) */
  --radius-input: 0.75rem;          /* 12 입력칸 · 세그먼트 */
  --radius-tile: 0.625rem;          /* 10 모노그램 사각 */
  --radius-sm: 0.25rem;             /* 4 명령줄 머리·입력·명령 판 · 주 버튼 — 머리와 버튼은 이 값 이하(헤더 재설계 2026-10-09) */
  --radius-pill: 999px;             /* 딱지 · 칩 · 세그먼트 (버튼·머리에는 쓰지 않는다) */

  /* ── 그림자 (아주 옅게 · 떠 있는 것은 섬과 트레이뿐) ─────── */
  --shadow-float: 0 1px 1px rgb(20 22 25 / 0.04), 0 12px 32px -12px rgb(20 22 25 / 0.18);   /* 명령 판 · 메뉴·필터 시트 */
  --shadow-plate: 0 1px 0 rgb(20 22 25 / 0.03), 0 24px 48px -32px rgb(20 22 25 / 0.22);    /* 트레이 */
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.7);                                     /* 시트 윗면 빛 한 줄 */
  --shadow-focus: 0 0 0 2px #fcfcfa, 0 0 0 4px #0a6446;                                     /* 포커스 링 = 시트 2 + 신호 2 */

  /* ── 이징 (linear·ease-in-out 기본값 금지) ─────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* 등장·탭 막대 Slide */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);     /* 시트 Slide up · 메뉴 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* 그래프 Draw on · Crossfade */

  /* 길이 (Tailwind 이름공간 밖 — 승급 때 :root 에 그대로 둔다) */
  --duration-instant: 100ms;        /* Press */
  --duration-fast: 160ms;           /* Highlight · 알약 사라짐 */
  --duration-base: 240ms;           /* 탭 막대 Slide · Nudge */
  --duration-slow: 480ms;           /* 시트 Fade up */
  --duration-max: 600ms;            /* 상한 — 등장 연출 전체(스태거 포함) */
}