/* 디자인 토큰 — 단계 53 SSOT (모든 페이지·컴포넌트 공통).
 *
 * 색 / 간격 / 반경 / 폰트가 demo.css·admin.css·styles.css 에서 다 따로
 * 정의돼 있었던 것 (border-radius 6/10/12, color #f5/#fafafa/#fff 산재 등).
 * 한 파일로 통합 — 변경 1곳, 어디에든 적용.
 */
:root {
  /* ── 색: 의미별 토큰 (semantic) ─────────────────────────────────────── */
  --color-fg: #1a1a2e;              /* 본문 글자 (contrast 16:1 on white) */
  --color-fg-muted: #555a66;        /* 보조 글자 (WCAG AA 4.5:1+) */
  --color-fg-subtle: #6b7280;       /* 더 옅은 보조 (큰 글자에만) */
  --color-fg-inverse: #fff;         /* 어두운 배경 위 */

  --color-bg: #f7f8fc;              /* 페이지 기본 */
  --color-bg-elevated: #fff;        /* 카드·다이얼로그 */
  --color-bg-subtle: #f6f7fa;       /* 표 헤더·hover */
  --color-bg-input: #fff;

  --color-border: #e2e4ee;
  --color-border-strong: #b0b4c0;

  /* ── 색: 모드 액센트 (A/B/C/D) — contrast 4.5+ 보장 ────────────────── */
  --color-accent: #2d3a8c;          /* 기본 액션 (primary) */
  --color-accent-hover: #1f2a6a;
  --color-mode-a: #2e6cdf;          /* 클라우드 (파랑) */
  --color-mode-b: #1f7a4e;          /* 하이브리드 (초록) */
  --color-mode-c: #8e4a0f;          /* 온프레미스 (주황 어두운) */
  --color-mode-d: #7a3aa8;          /* 단일 PC (보라) */

  /* ── 색: 상태 ───────────────────────────────────────────────────────── */
  --color-success: #1f7a4e;
  --color-success-bg: #e6f4ea;
  --color-warn: #7a4500;
  --color-warn-bg: #fff4e0;
  --color-error: #b00020;
  --color-error-bg: #fff0f0;
  --color-info: #2e6cdf;
  --color-info-bg: #e3edff;

  /* ── 색: 데이터 흐름 (구성 화면 #5) — 사무소에서 멀어질수록 강하게 ──── */
  --color-flow-local: #9aa0ad;      /* 같은 위치 안 */
  --color-flow-vault: #2e6cdf;      /* 고객 전용 금고로 (고객 키 암호화) */
  --color-flow-gensapps: #b35c00;   /* 젠아이랩스 클라우드를 지남 */
  --color-flow-provider: #b00020;   /* 외부 제공사까지 */
  --color-flow-metrics: #1f7a4e;    /* 숫자만 */
  --color-flow-encrypted: #7a3aa8;  /* 암호문만 지남 */

  /* ── 간격 (4의 배수) ────────────────────────────────────────────────── */
  --space-1: 0.25rem;               /* 4px */
  --space-2: 0.5rem;                /* 8px */
  --space-3: 0.75rem;               /* 12px */
  --space-4: 1rem;                  /* 16px */
  --space-5: 1.5rem;                /* 24px */
  --space-6: 2rem;                  /* 32px */
  --space-8: 3rem;                  /* 48px */

  /* ── 반경 (일관성 — 8/4 두 단계만) ──────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;                /* 카드·다이얼로그 */
  --radius-pill: 999px;

  /* ── 그림자 ─────────────────────────────────────────────────────────── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.25);

  /* ── 폰트 ───────────────────────────────────────────────────────────── */
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
    "Malgun Gothic", system-ui, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "Menlo", monospace;

  --font-size-sm: 0.78rem;
  --font-size-base: 0.92rem;
  --font-size-lg: 1.05rem;
  --font-size-xl: 1.25rem;

  /* ── styles.css 가 기존에 쓰던 --fg / --muted / --accent 와 호환 ────── */
  --fg: var(--color-fg);
  --muted: var(--color-fg-muted);
  --accent: var(--color-accent);
  --border: var(--color-border);
  --bg: var(--color-bg);
  --card-bg: var(--color-bg-elevated);
}

/* ── 화면 폭 4단계 (전사 docs/product/RESPONSIVE.md) — 값은 여기 한 곳 ───────────────────────────
 *   S < 640 · M 640~1023 · L 1024~1439(본문 1160) · XL ≥ 1440(본문 1400)
 *   .wrap          가운데 정렬한 본문 칸
 *   --edge         폭 전체를 쓰는 띠(머리글 · 탭 줄)의 좌우 여백 — 띠 안의 내용이 .wrap 과 같은 선에 선다.
 *                  % 는 쓰는 자리의 폭 기준이라 스크롤바 폭만큼 어긋나지 않는다(100vw 를 쓰지 않는 이유).
 */
:root { --wrap: 100%; --gutter: 16px; --edge: var(--gutter); }
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --wrap: 1160px; --gutter: 32px; --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); } }
@media (min-width: 1440px) { :root { --wrap: 1400px; } }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }

/* 지금 단계 배지 — 화면을 볼 때 어느 단계의 모양인지 바로 알 수 있게(로그인 뒤 머리글 오른쪽) */
.bp::after { content: "S"; }
@media (min-width: 640px) { .bp::after { content: "M"; } }
@media (min-width: 1024px) { .bp::after { content: "L"; } }
@media (min-width: 1440px) { .bp::after { content: "XL"; } }

/* ── 줄바꿈(#129) — 한국어는 낱말(띄어쓰기) 단위로만 줄을 바꾼다. 긴 주소 · 이메일은 넘치지 않게 끊는다.
 *   제목은 줄 길이를 고르게(마지막 줄에 한두 글자만 남지 않게), 본문은 끝줄이 외톨이가 되지 않게. */
body { word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption, td, th, label { text-wrap: pretty; }