/*
 * 디자인 토큰 정본 1/2: 크기·글자·모션·배치 (M7a → M7b 그대로 이전). 색은 colors.css.
 * 방향: 무채색(zinc) 정밀 콘솔. 헤어라인 테두리, ID·수치는 모노 tabular.
 * 규칙
 *  - 화면 CSS는 토큰만 쓴다(하드코딩 색·반경·글자 크기 금지). 새 값이 필요하면 용도 주석과 함께 여기에 추가한다.
 *  - 최소 글자 크기 11px(--fs-micro).
 */
:root {
  /* 글꼴: 시스템 글꼴만 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* 타입 스케일 4단(+표시용 숫자 둘, 최소 글자). 줄 높이는 짝을 이룬다. */
  --fs-display: 28px; /* KPI 큰 숫자 하나('판단 필요 N') */
  --fs-title: 20px; /* 페이지 제목 h1 */
  --fs-num: 15px; /* 머리 지표 칸의 수치(경과·비용·토큰) */
  --fs-section: 14px; /* 섹션·패널 제목, 노드 이름, 대화상자 제목 */
  --fs-body: 13px; /* 본문 기본 */
  --fs-meta: 12px; /* 라벨·시각·표 보조·버튼 */
  --fs-micro: 11px; /* 칩·엣지 라벨·kbd — 이보다 작게 쓰지 않는다 */
  /* 맵 안 글자: 맵은 맞춤 배율(최소 11/12)로 줄어 그려지므로 한 단계 크게 둔다 → 화면에서 11px 이상(js/views/map-layout.js MAP_TEXT) */
  --fs-map-name: 14px; /* 노드 이름 */
  --fs-map-micro: 12px; /* 노드 메타·지금 하는 일·상태 칩·엣지 라벨 */
  /* 줄 높이 3단(리뷰 C22): 제목·한 줄 라벨 · 카드 제목·조밀한 목록 · 본문·여러 줄 글. 한 줄 컨트롤의 글자는 1,
     맵 노드의 줄은 배치 계산(map-layout MAP_TEXT)과 묶인 px(map.css)만 예외 */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-body: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* 간격(4px 격자). 화면 CSS의 padding·margin·gap은 이 토큰만 쓴다(1px 헤어라인·2px 이하 미세 조정만 예외, 테스트가 확인) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* 모서리: 4 칩·상태 단어·배지 · 6 버튼·입력·도구 버튼 · 8 노드·카드 안 요소 · 12 카드·캔버스·떠 있는 컨트롤·팝오버·대화상자 ·
     pill은 누르는 것만(선택지·필터 칩·알약 노드)과 숫자 배지. 상자·상태 표시에 쓰지 않는다(리뷰 C27) */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* 모션: 상호작용은 ease-out 한 가지, 120(누름·호버)·180(열림·전환)·240(맵 이동·패널·칩 강조) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  /* 예외 셋(용도 고정): 엣지 위 메시지 흐름 점 1회, 반복 애니메이션 2개(실행 노드 숨쉬기·상단 실시간 점) */
  --dur-flow: 640ms; /* 메시지가 엣지를 따라 한 번 흐름 */
  --dur-loop: 2800ms; /* 반복 주기 */
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1); /* 숨쉬기처럼 오가는 반복 */
  /*
   * 스프링(2026-10-21 모션 리뷰, css/motion.css): 감쇠 스프링을 linear()로 그린 곡선. 들어올 때(열림·등장·누름 복귀·끌어 놓기)만 쓰고,
   * 닫힘·사라짐은 --ease-out 짧게(튀지 않음). linear()를 못 쓰는 브라우저는 아래 cubic-bezier로 비슷하게.
   */
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* 쫀득: 8% 넘쳤다가 자리 잡음 — 누름 복귀·칩·팝오버·노드 등장·끌어 놓기 */
  --ease-spring-soft: cubic-bezier(0.22, 1, 0.36, 1); /* 2%만 넘침 — 위치 이동(맵 미끄러짐·재정렬)·카드 안 펼침·토스트 */
  --dur-spring: 460ms; /* 스프링이 자리 잡는 시간(앞 200ms에 거의 도착, 뒤는 꼬리) */
  --dur-spring-soft: 420ms;

  /* 배치 */
  /* 폭 4단(리뷰 C6·C7): 모든 화면의 바깥 틀은 --w-wide로 같은 왼쪽 선에서 시작하고(맵을 그리는 run 상세만 상한 없음),
     안쪽 기둥은 용도별로 --w-page(두 기둥 화면: 설정 틀·세션) · --w-form(글·폼 한 기둥: 설정 본문·할 일 카드) ·
     --w-narrow(빈 상태 카드·작은 고르기) 셋 중 하나만 쓴다 */
  --w-wide: 1440px;
  --w-page: 1120px;
  --w-form: 880px;
  --w-narrow: 560px;
  --topbar-h: 48px;
  --panel-w: 360px;
  --page-x: 16px;
  --float-clear: 64px; /* 캔버스 위에 떠 있는 컨트롤(보기 전환) 아래로 내용을 내리는 여백 */
  --z-float: 5;
  --z-raise: 10; /* 맵에서 끌고 있는 노드(다른 노드 위로) */
  --z-sticky: 20;
  --z-topbar: 40;
  --z-pop: 60;
  --z-toast: 90;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.059, 0.199, 0.374, 0.553, 0.715, 0.848, 0.949, 1.018, 1.06, 1.079, 1.083, 1.077, 1.064, 1.049, 1.034, 1.021, 1.011, 1.003, 0.998, 0.995, 0.993, 0.993, 0.994, 1);
    --ease-spring-soft: linear(0, 0.037, 0.127, 0.245, 0.371, 0.494, 0.607, 0.706, 0.788, 0.855, 0.907, 0.946, 0.975, 0.995, 1.008, 1.015, 1.019, 1.02, 1.019, 1.017, 1.015, 1.013, 1.01, 1.008, 1);
  }
}

/* 톤 묶음: data-tone="…"가 붙은 부품은 --tone(선·글리프), --tone-text(글자), --tone-soft(바탕), --tone-line(테두리)을 쓴다. */
[data-tone="accent"] { --tone: var(--accent); --tone-text: var(--accent-text); }
[data-tone="warning"] { --tone: var(--warning); --tone-text: var(--warning-text); }
[data-tone="success"] { --tone: var(--success); --tone-text: var(--success-text); }
[data-tone="danger"] { --tone: var(--danger); --tone-text: var(--danger-text); }
[data-tone="neutral"] { --tone: var(--neutral); --tone-text: var(--neutral-text); }
[data-tone] {
  --tone-soft: color-mix(in srgb, var(--tone) 11%, transparent);
  --tone-line: color-mix(in srgb, var(--tone) 42%, transparent);
}

/* 대기·차단의 색 외 단서: 빗금. 작은 칸(목록 미니 막대 12×4)은 세로 줄무늬로 2px 주기 */
:root {
  --hatch-warning: repeating-linear-gradient(135deg, var(--warning) 0 3px, color-mix(in srgb, var(--warning) 30%, transparent) 3px 6px);
  --hatch-tick: repeating-linear-gradient(90deg, var(--warning) 0 2px, transparent 2px 4px);
}

/*
 * 디자인 토큰 정본 2/2: 색 (M7a → M7b 그대로 이전). 크기·글자·모션은 tokens.css.
 * 색은 의미가 있을 때만(상태 4색 + 중립). 상태는 색만으로 표현하지 않는다: 글리프 모양 + 단어(+ 대기·차단은 빗금 --hatch-*).
 * 글자 대비: --text-1·2·3은 --bg·--surface·--sunken·--canvas 위에서 WCAG AA(4.5:1) 이상. --text-off는 비활성·장식 전용.
 * 라이트가 기본, 다크는 prefers-color-scheme(수동 선택이 없을 때)와 [data-theme="dark"] 두 곳에 같은 값으로 둔다.
 * 다크의 면 단계: 바탕 < 캔버스 < 카드 < 우물(다크에서는 우물이 '살짝 밝게') < 호버.
 */
:root {
  color-scheme: light;

  /* 면 */
  --bg: #fafafa; /* 페이지 바탕 */
  --surface: #ffffff; /* 카드·패널·노드 */
  --sunken: #f4f4f5; /* 우물·코드·세그먼트 바탕 */
  --canvas: #f4f4f5; /* 맵 캔버스 */
  --canvas-dot: #d4d4d8; /* 맵 점 격자 */
  --hover: #f1f1f3; /* 호버 바탕 */
  --active: #e8e8eb; /* 누름 바탕 */
  --glass: rgb(255 255 255 / 0.78); /* 맵 위 떠 있는 컨트롤(블러와 함께) */
  --glass-solid: #ffffff; /* 블러를 못 쓰거나 투명도 줄이기 설정일 때 */
  --scrim: rgb(9 9 11 / 0.32); /* 모달 뒤 */

  /* 선 */
  --line: rgb(9 9 11 / 0.08); /* 기본 헤어라인 */
  --line-strong: rgb(9 9 11 / 0.14); /* 컨트롤 테두리 */
  --line-hard: rgb(9 9 11 / 0.26); /* 호버·강조 테두리 */

  /* 글자 (AA 이상) */
  --text-1: #18181b; /* 본문·제목 */
  --text-2: #52525b; /* 보조 본문 */
  --text-3: #63636b; /* 메타·라벨 — #fafafa/#f4f4f5 위 AA */
  --text-off: #a1a1aa; /* 비활성·장식 전용(글자 정보에 쓰지 않음) */
  --on-strong: #ffffff; /* 진한 바탕(--text-1) 위 글자 */
  --on-danger: #ffffff; /* --danger 바탕 위 글자(위험 확인 버튼) */

  /* 의미 색: 실행(accent) · 대기/차단(warning) · 완료(success) · 실패(danger). *-text는 글자용 AA 값 */
  --accent: #5b5bd6;
  --accent-text: #4545bf;
  --warning: #b45f06;
  --warning-text: #8a4900;
  --success: #1a7f45;
  --success-text: #146c3a;
  --danger: #d4343b;
  --danger-text: #b42228;
  --neutral: #71717a;
  --neutral-text: #52525b;

  /* 엣지 */
  --edge-strong: #8a8a94; /* 산출물·메시지·사람 개입 */
  --edge-faint: #b4b4bc; /* 위임(spawn) */

  /* 선택 */
  --sel: #18181b;
  --sel-ring: rgb(24 24 27 / 0.12);
  --focus: #5b5bd6; /* 키보드 포커스 링 */

  /* 터미널(Fork)·출력 블록 — 테마와 무관하게 어두운 면, 카드 위에서는 --term-line 테두리로 경계를 준다 */
  --term-bg: #0c0c0e;
  --term-fg: #d4d4d8;
  --term-dim: #8a8a93;
  --term-line: rgb(255 255 255 / 0.1);

  /* 그림자: 라이트에서만 은은하게 */
  --shadow-1: 0 1px 2px rgb(9 9 11 / 0.05);
  --shadow-node: 0 1px 2px rgb(9 9 11 / 0.06), 0 2px 8px -4px rgb(9 9 11 / 0.08);
  --shadow-pop: 0 16px 40px -12px rgb(9 9 11 / 0.22), 0 4px 10px -4px rgb(9 9 11 / 0.08);
  --hl: inset 0 1px 0 rgb(255 255 255 / 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #09090b;
    --surface: #121214;
    --sunken: #18181b;
    --canvas: #0b0b0d;
    --canvas-dot: rgb(255 255 255 / 0.08);
    --hover: #1f1f23;
    --active: #27272b;
    --glass: rgb(24 24 27 / 0.76);
    --glass-solid: #18181b;
    --scrim: rgb(0 0 0 / 0.56);
    --line: rgb(255 255 255 / 0.08);
    --line-strong: rgb(255 255 255 / 0.13);
    --line-hard: rgb(255 255 255 / 0.24);
    --text-1: #ededef;
    --text-2: #a1a1aa;
    --text-3: #8b8b94;
    --text-off: #55555d;
    --on-strong: #0a0a0b;
    --on-danger: #0a0a0b;
    --accent: #7c7cf2;
    --accent-text: #a8a8ff;
    --warning: #e5a23a;
    --warning-text: #f2b862;
    --success: #3db96c;
    --success-text: #63d18e;
    --danger: #ee5656;
    --danger-text: #ff8a8a;
    --neutral: #8b8b94;
    --neutral-text: #a1a1aa;
    --edge-strong: #71717b;
    --edge-faint: #46464e;
    --sel: #ededef;
    --sel-ring: rgb(237 237 239 / 0.14);
    --focus: #8f8fff;
    --term-bg: #050506;
    --term-line: rgb(255 255 255 / 0.12);
    --shadow-1: none;
    --shadow-node: 0 1px 0 rgb(0 0 0 / 0.5), 0 10px 24px -14px rgb(0 0 0 / 0.9);
    --shadow-pop: 0 24px 56px -16px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.03);
    --hl: inset 0 1px 0 rgb(255 255 255 / 0.04);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090b;
  --surface: #121214;
  --sunken: #18181b;
  --canvas: #0b0b0d;
  --canvas-dot: rgb(255 255 255 / 0.08);
  --hover: #1f1f23;
  --active: #27272b;
  --glass: rgb(24 24 27 / 0.76);
  --glass-solid: #18181b;
  --scrim: rgb(0 0 0 / 0.56);
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.13);
  --line-hard: rgb(255 255 255 / 0.24);
  --text-1: #ededef;
  --text-2: #a1a1aa;
  --text-3: #8b8b94;
  --text-off: #55555d;
  --on-strong: #0a0a0b;
  --on-danger: #0a0a0b;
  --accent: #7c7cf2;
  --accent-text: #a8a8ff;
  --warning: #e5a23a;
  --warning-text: #f2b862;
  --success: #3db96c;
  --success-text: #63d18e;
  --danger: #ee5656;
  --danger-text: #ff8a8a;
  --neutral: #8b8b94;
  --neutral-text: #a1a1aa;
  --edge-strong: #71717b;
  --edge-faint: #46464e;
  --sel: #ededef;
  --sel-ring: rgb(237 237 239 / 0.14);
  --focus: #8f8fff;
  --term-bg: #050506;
  --term-line: rgb(255 255 255 / 0.12);
  --shadow-1: none;
  --shadow-node: 0 1px 0 rgb(0 0 0 / 0.5), 0 10px 24px -14px rgb(0 0 0 / 0.9);
  --shadow-pop: 0 24px 56px -16px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.03);
  --hl: inset 0 1px 0 rgb(255 255 255 / 0.04);
}


*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: var(--s-4); background: var(--bg); color: var(--text-1); font: var(--fs-body) / var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; }
.login { width: 100%; max-width: 360px; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.login h1 { margin: 0 0 var(--s-5); font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.015em; }
.login form { display: grid; gap: var(--s-4); }
.login label { display: grid; gap: var(--s-2); font-size: var(--fs-meta); color: var(--text-2); }
.login input { font: inherit; color: var(--text-1); background: var(--bg); min-height: 36px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.login button { min-height: 36px; font: inherit; font-weight: var(--fw-medium); color: var(--on-strong); background: var(--text-1); padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm); cursor: pointer; }
.login button:hover { background: color-mix(in srgb, var(--text-1) 86%, var(--bg)); }
.login :focus { outline: none; }
.login :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.login-error { margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger-text); font-size: var(--fs-meta); }
.login-hint { margin: var(--s-5) 0 0; font-size: var(--fs-meta); color: var(--text-3); overflow-wrap: anywhere; }
.login code { font-family: var(--font-mono); font-size: var(--fs-micro); }