@charset "UTF-8";
/* AIAP 디자인 토큰 — 모든 화면과 감사 리포트가 같은 색 의미를 쓴다 (aiap-ui §3).
 *
 * 의미 체계
 *   --outcome-pass / -advice / -conditional / -block
 *        게이트 판정 배지: 통과(초록) · 통과(권고)(연두) · 조건부(주황) · 차단(빨강)
 *   --cp-pass / --cp-violation / --cp-not-reached
 *        체크포인트 통과(초록) · 위반(빨강) · 미도달(회색) — 판정된 데이터 전용.
 *        Verdict·ReportViewModel(CheckpointMark.status)에서 온 값에만 쓴다.
 *   --cp-label (+ -bg, -border)
 *        체크포인트 라벨의 중립색 — 판정이 아니다. trace 뷰어처럼 판정 전 데이터를 나열할 때 쓴다.
 *        판정 색(초록·빨강)과 겹치지 않는 잉크 계열로 둔다.
 *   --tier-low / -mid / -high
 *        위험등급 배지 (판정 색과 겹치지 않는 청록 · 황토 · 자두)
 *   --surface … --border
 *        기본 면·글자. prefers-color-scheme: dark에서 재정의한다.
 *   --page / --grid-line / --faint / --radius-* / --shadow-* / --ease
 *        모든 화면이 같이 쓰는 모노톤 바탕·모서리·그림자·움직임(D57·D58). 밝은 회색 바탕 + 흰 카드 + 짙은 회색 글자.
 *   --point (+ -ink, -soft, --on-point)
 *        포인트 색 — 워드마크·활성 표시·강조선에만 쓴다. AIAP 화면은 붉은 계열(장밋빛), 타겟 사이트는 site.css가
 *        `.site`에서 파랑으로 바꾼다. 포인트 색은 판정이 아니다: 차단·위반의 빨강(--outcome-block·--cp-violation,
 *        벽돌색)과 색조·쓰임을 나눈다 — 판정은 작은 배지·띠 + 글자, 포인트는 표식·밑줄과 주 버튼·진행 막대의 채움(D62).
 *   --btn-*
 *        버튼 3단계(주·보조·약한). 누를 수 있는 것과 정보 상자를 가른다.
 *   --site-point
 *        타겟 사이트(파랑은행·임직원 포털)의 포인트 색 — 파랑. 사이트 화면과 허브의 사이트 카드 표식이 쓴다.
 *
 * 색만으로 의미를 전달하지 않는다 — 배지·라벨에는 항상 글자를 병기한다.
 * 글꼴은 Pretendard(저장소에 넣은 파일 — static/fonts, 글꼴 파일 선언은 app.css) 다음에 시스템 글꼴 스택이다.
 * 이 파일은 보고서에 그대로 인라인되므로 파일 참조를 두지 않는다(보고서는 단일 파일 — 외부 리소스 없음).
 */

:root {
  color-scheme: light dark;

  /* 글꼴 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "D2Coding", monospace;

  /* 기본 면·글자 — 모노톤(모든 화면 공유) */
  --page: #f2f4f6;
  --grid-line: rgb(24 28 36 / 0.055);
  --surface: #ffffff;
  --surface-sunken: #f4f5f7;
  --text: #1b1e25;
  --muted: #555b68;
  --faint: #666c79;
  --border: #e3e6eb;
  --border-strong: #cdd2da;
  --link: #1b1e25;
  --focus-ring: #1b1e25;
  --shadow-1: 0 1px 2px rgb(24 28 36 / 0.05), 0 1px 1px rgb(24 28 36 / 0.03);
  --shadow-2: 0 1px 2px rgb(24 28 36 / 0.04), 0 18px 44px -22px rgb(24 28 36 / 0.2);
  --shadow-hover: 0 2px 4px rgb(24 28 36 / 0.05), 0 26px 56px -24px rgb(24 28 36 / 0.3);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* 포인트 색 — AIAP 화면은 붉은 계열. 판정 색이 아니다(위 설명) */
  --point: #e11d48;
  --point-ink: #b4173a;
  --point-soft: #fdecf0;
  --on-point: #ffffff;

  /* 버튼 3단계(D62) — 누를 수 있는 것은 정보 상자와 한눈에 갈린다.
     주: 포인트 색 채움 / 보조: 흰 바탕 + 굵은 테두리 + 그림자 / 약한: 회색 채움(테두리·그림자 없음).
     허브의 이동 카드·사이트의 칩·타일·보고서 차례도 보조 단계의 테두리·그림자를 쓴다. 정보 카드는 그림자 없이 평평하게 둔다 */
  --btn-primary-bg: var(--point);
  --btn-primary-text: var(--on-point);
  --btn-primary-hover: var(--point-ink);
  --btn-secondary-bg: var(--surface);
  --btn-secondary-border: #b6bcc7;
  --btn-quiet-bg: #e4e7ec;
  --btn-shadow: 0 1px 0 rgb(24 28 36 / 0.08), 0 3px 7px -2px rgb(24 28 36 / 0.18);
  --btn-shadow-hover: 0 2px 0 rgb(24 28 36 / 0.08), 0 10px 20px -8px rgb(24 28 36 / 0.3);

  /* 플랫폼(운영자 화면) 잉크와 강조 — 주 버튼은 짙은 회색, 활성 표시는 포인트 색 */
  --ink: #1b1e25;
  --ink-text: #eef0f4;
  --ink-muted: #aab0bc;
  --accent: #e11d48;
  --accent-contrast: #ffffff;

  /* 게이트 판정 */
  --outcome-pass: #1e7f4a;
  --outcome-advice: #5f8f1a;
  --outcome-conditional: #c2660f;
  --outcome-block: #c0392b;

  /* 체크포인트 — 판정된 데이터 전용 */
  --cp-pass: #1e7f4a;
  --cp-violation: #c0392b;
  --cp-not-reached: #9aa1ac;

  /* 체크포인트 라벨 — 중립(판정 아님) */
  --cp-label: #34405a;
  --cp-label-bg: #e8ebf2;
  --cp-label-border: #c9cfdc;

  /* 위험등급 */
  --tier-low: #1d6b87;
  --tier-mid: #946400;
  --tier-high: #8a2d6c;

  /* 나란히 읽는 열(principal_id·tool_args)의 중립 음영 */
  --pair-bg: #f4f5fa;
  --pair-head-bg: #e6e9f3;

  /* 안내 띠 */
  --notice-bg: #f4f5f7;
  --notice-text: #555b68;
  --notice-border: #e3e6eb;
  --notice-stripe: transparent;

  /* 타겟 사이트의 포인트 색(파랑) — 사이트 화면(site.css가 --point를 이 값으로 바꾼다)과 허브의 사이트 카드 표식 */
  --site-point: #2257e6;

  /* 모양 */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #101216;
    --grid-line: rgb(255 255 255 / 0.045);
    --surface: #191c22;
    --surface-sunken: #20242c;
    --text: #eef0f4;
    --muted: #b1b7c3;
    --faint: #9198a6;
    --border: #2a2f39;
    --border-strong: #3b4150;
    --link: #eef0f4;
    --focus-ring: #eef0f4;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 44px -22px rgb(0 0 0 / 0.8);
    --shadow-hover: 0 2px 4px rgb(0 0 0 / 0.45), 0 26px 56px -24px rgb(0 0 0 / 0.9);

    --point: #ff6f91;
    --point-ink: #ff9ab1;
    --point-soft: #3a1822;
    --on-point: #1d0a10;

    --btn-primary-bg: var(--point);
    --btn-primary-text: var(--on-point);
    --btn-primary-hover: var(--point-ink);
    --btn-secondary-bg: var(--surface);
    --btn-secondary-border: #586072;
    --btn-quiet-bg: #2c313c;
    --btn-shadow: 0 1px 0 rgb(0 0 0 / 0.5), 0 3px 7px -2px rgb(0 0 0 / 0.6);
    --btn-shadow-hover: 0 2px 0 rgb(0 0 0 / 0.5), 0 10px 20px -8px rgb(0 0 0 / 0.8);

    --ink: #0a0b0e;
    --ink-text: #eef0f4;
    --ink-muted: #a3aab7;
    --accent: #ff6f91;
    --accent-contrast: #1d0a10;

    --outcome-pass: #3fb574;
    --outcome-advice: #95c44d;
    --outcome-conditional: #f0a04b;
    --outcome-block: #f0675a;

    --cp-pass: #3fb574;
    --cp-violation: #f0675a;
    --cp-not-reached: #6b7280;

    --cp-label: #c9d0dd;
    --cp-label-bg: #262b35;
    --cp-label-border: #3a4150;

    --tier-low: #5fb3d1;
    --tier-mid: #e0b44a;
    --tier-high: #d77bb8;

    --pair-bg: #1f232b;
    --pair-head-bg: #272c36;

    --notice-bg: #20242c;
    --notice-text: #b1b7c3;
    --notice-border: #2a2f39;
    --notice-stripe: transparent;

    --site-point: #7ea2ff;
  }
}