@charset "utf-8";
/* =========================================================================
   Click Design System — Foundations (tokens). The one source of every colour, size, space, corner, shadow, layer and
   motion value in the Portal. Loaded first (index.html, before style.css).

   - Names follow the Click design handoff (ref handoff-v2 click-tokens.css); values follow the redesign brief where the
     two differ (docs/design/DESIGN_SYSTEM.md "결정 기록"): sidebar 200, header 52, card corner 12, button 34, status bar
     6, row 48, gap 16, headline 20–24, KPI 26–32. No zoom on a wide window: the room is used, not magnified.
   - Components are NOT here: they are click-parts.css (read after every screen sheet). This file holds tokens and the
     page's base only, so no generic class (.card .btn .tag .badge .pill ...) collides with a screen's.
   - Older names (--ds-*, --line, --mint, ...) are aliases of these tokens in click-bridge.css (read last). New code
     names these tokens, never a raw value: no hex, px font size, radius or shadow outside this file.
   - Fonts are served by the Portal (CSP default-src 'self'): Pretendard Variable and IBM Plex Mono @font-face live in
     style.css; icons are inline SVG (click-icons.js), never an icon font.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ── Typeface ── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "Apple SD Gothic Neo", monospace;

  /* ── Type scale (px). Role first; the number is the size. ──
     page headline 22–24 · KPI 26 (dashboard rate 32) · drawer title 20 · section 15 · card title 15 · body 14 ·
     table cell / control 13.5 · meta 12.5 · table head / caption 12 · micro 11.5 */
  --fs-page: clamp(20px, calc(1.25vw + 4px), 24px);
  --fs-kpi-xl: 32px;
  --fs-kpi: 26px;
  --fs-kpi-sm: 20px;
  --fs-drawer-title: 18px;
  --fs-section: 15px;
  --fs-card-title: 15px;
  --fs-lead: 14px;
  --fs-body: 14px;
  --fs-sm: 13.5px;
  --fs-xs: 12.5px;
  --fs-2xs: 12px;
  --fs-3xs: 11.5px;
  --fs-4xs: 10.5px;            /* the nav group's number (mono) only */
  --fs-mono: 12.5px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-body: 1.5;
  --lh-relaxed: 1.6;
  --ls-tight: -0.02em;
  --ls-head: -0.025em;

  /* ── Brand (Click Brand Identity · Yellow Edition) ── */
  --brand-yellow: #FFD600;   /* logo, approval count badge, the save bar's save button. Never words or a line on white (1.3:1) */
  --brand-ink: #111318;
  --brand-cloud: #F3F4F1;
  --brand-yellow-hover: #F2CB00; /* the sign-in page's yellow button, pressed or pointed at (ink on it 11.8:1) */
  /* The brand stage: the sign-in page's ink half (words on --brand-ink) and its aligned bolt bars */
  --brand-ink-body: #C9CAC5;     /* a sentence on ink (11.3:1) */
  --brand-ink-label: #8E9094;    /* a mono label on ink (5.8:1) */
  --brand-ink-line: #3A3D42;     /* a rule on ink, never words */
  --brand-bolt-mid: #5B5E63;     /* the third bar: grey */
  --brand-bolt-low: #33363B;     /* the fourth bar: near ink */
  /* Click Agent's plate (Click Agent.html 시안, user 11-12; user 20:3x: as lovable.dev, one colour field over the whole
     plate, no glow of the input's own): a near-white ground, a faint dot grid fading down, and the Click yellow washing
     up from the bottom across the plate's whole width (click-parts .cx-plate). */
  --plate-bg: #FBFBF8;
  --dot-grid: #D9DBD4;
  --dot-step: 22px;
  --plate-wash: radial-gradient(160% 115% at 50% 115%, rgba(255, 158, 0, .72), rgba(255, 198, 0, .52) 28%, rgba(255, 224, 96, .32) 52%, rgba(255, 240, 180, .12) 72%, rgba(255, 244, 196, 0) 90%); /* the colour field, strongest at the bottom middle */
  --r-plate: 20px;      /* the plate and the input on it */
  --shadow-compose: 0 1px 2px rgba(17, 19, 24, .04), 0 10px 30px rgba(17, 19, 24, .07); /* the input lifted off the plate */
  --fs-display: clamp(40px, calc(3.6vw + 8px), 72px); /* the stage's headline, 2 lines */
  --fs-display-sub: 18px;        /* the stage's one line under it */
  --fs-display-h: clamp(30px, calc(1.25vw + 12px), 36px); /* the sign-in form's heading: 30 at 1440, 36 from 1920 */
  --fw-heavy: 800;
  --ls-display: -0.045em;
  --ls-mono-label: 0.16em;       /* a mono annotation label (SYSTEM / 001, 01 / SIGN IN) */

  --primary: #111318;        /* primary button, chosen edge, progress, switch on */
  --primary-hover: #2B2E36;
  --primary-ink: #111318;
  --primary-tint: #FFF1B8;   /* current menu, tab count, Click icon ground, '권장' · '진행 중' chip */
  --primary-wash: #FFFBEA;   /* Click 제안 block */
  --primary-line: #F2E3A6;

  /* ── Neutrals ── */
  --ink: #111318;            /* text: primary */
  --ink-2: #344054;          /* text: body on a card, control words */
  --ink-3: #475467;          /* text: secondary sentences */
  --muted: #535C6E;          /* text: labels, meta (design #667085 darkened: 4.5:1 on hover and selected grounds too) */
  --faint: #98A2B3;          /* text: units, placeholders, disabled — never a sentence */
  --border-strong: #D0D5DD;  /* control edge */
  --border: #E4E7EC;         /* card edge */
  --divider: #EAECF0;        /* section line, segment track */
  --divider-soft: #F2F4F7;   /* row line, quiet chip ground */
  --bg-app: #F3F4F1;         /* page */
  --bg-sidebar: #FBFBFC;
  --bg-subtle: #F9FAFB;      /* inset ground inside a card */
  --bg-head: #FAFBFC;        /* table head */
  --bg-hover: #F7F7F4;       /* row and menu hover */
  --select-bg: #F6F6F2;      /* chosen row: neutral, never yellow (reads as a warning) */
  --select-ring: #111318;
  --surface: #FFFFFF;        /* card */

  /* ── Management status, four steps (colour + dot shape + word, always together) ── */
  --st-managed: #1E9E5A;    --st-managed-bg: #E7F5ED;    --st-managed-fg: #16703F;
  --st-partial: #86C49C;    --st-partial-bg: #EEF7F1;    --st-partial-fg: #2F6B47;
  --st-unmanaged: #D6432A;  --st-unmanaged-bg: #FCEAE6;  --st-unmanaged-fg: #A3301B;
  --st-review: #E07B12;     --st-review-bg: #FDEEDF;     --st-review-fg: #9A4A0B;
  /* A known caution (승인 대기, 중간) on its own lighter amber; the review ground with its dashed edge is 판단 불가's alone. */
  --st-caution-bg: #FDF7F1;
  --danger-line: #F3C9BF;   --danger-ink: #B93A22;
  --warn-banner-bg: #FDF1E4; --warn-banner-line: #F4D3B2; --warn-banner-fg: #8A3F07;
  --violet-bg: #F3EFFB; --violet-fg: #5B3FA8;   /* 통제 범위 '연계' only */
  --deploy: #8C9099;
  /* Agent Universe's dark stage (its own tokens: universe-style.js) */
  --stage-text: #E9EEFC; --stage-dim: #AAB6D8; --stage-hover: #16234F;

  --hatch-review: repeating-linear-gradient(-45deg, #E98F3A 0 3px, #FAE0C8 3px 6px);
  --hatch-pending: repeating-linear-gradient(-45deg, #7FC59B 0 3px, #D5EEDF 3px 6px);
  --hatch-deploying: repeating-linear-gradient(-45deg, #8C9099 0 3px, #E4E5E2 3px 6px);

  /* ── Semantic roles (brief §4 Layer 1). Screens may name either the role or the palette token above. ── */
  --text-primary: var(--ink);
  --text-body: var(--ink-2);
  --text-secondary: var(--ink-3);
  --text-tertiary: var(--muted);
  --text-disabled: var(--faint);
  --surface-page: var(--bg-app);
  --surface-default: var(--surface);
  --surface-subtle: var(--bg-subtle);
  --surface-selected: var(--select-bg);
  --border-default: var(--border);
  --border-control: var(--border-strong);
  --border-subtle: var(--divider-soft);
  --action-primary: var(--primary);
  --action-primary-hover: var(--primary-hover);
  --status-success: var(--st-managed);  --status-success-bg: var(--st-managed-bg);  --status-success-fg: var(--st-managed-fg);
  --status-warning: var(--st-review);   --status-warning-bg: var(--st-caution-bg);  --status-warning-fg: var(--st-review-fg);
  --status-danger: var(--st-unmanaged); --status-danger-bg: var(--st-unmanaged-bg); --status-danger-fg: var(--st-unmanaged-fg);
  --status-neutral: var(--faint);       --status-neutral-bg: var(--divider-soft);   --status-neutral-fg: var(--ink-3);

  /* ── Space (4px grid) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Corners ── */
  --r-card: 12px;            /* card, table frame, popover, drawer edge */
  --r-inner: 10px;           /* block inside a card: suggestion, note, option, empty */
  --r-ctl: 8px;              /* button, input, select, menu item */
  --r-sm: 6px;               /* chip, tag, code box */
  --r-xs: 4px;               /* checkbox, tiny marks */
  --r-pill: 999px;           /* status badge, filter pill, count */

  /* ── Sizes ── */
  --ctl-h: 34px;             /* button, input, select, search, segment (outer) */
  --ctl-h-sm: 28px;
  --ctl-h-lg: 40px;          /* the find page's one big search box */
  --pill-h: 30px;            /* status filter pill */
  --badge-h: 22px;           /* status badge */
  --chip-h: 22px;            /* info / risk chip */
  --icon-btn: var(--ctl-h); /* an icon button stands in a toolbar at a control's height (34), level with the search beside it */
  --icon-sm: 14px; --icon: 16px; --icon-md: 18px; --icon-lg: 20px;
  --bar-h: 6px;              /* status summary bar (brief §3.3: 4–6) */
  --bar-h-sm: 4px;           /* progress, meter in a row */
  --row-min-h: 48px;         /* table row (density: comfortable 56 / compact 40) */
  --row-pad: 10px;
  --row-pad-x: 12px;
  --thead-h: 38px;
  --dot: 8px;

  /* ── Elevation: shadows only on what floats ── */
  --shadow-card: none;
  --shadow-seg: 0 1px 2px rgba(17, 19, 24, .10);
  --shadow-raise: 0 4px 16px rgba(17, 19, 24, .08);   /* a clickable tile on hover */
  --shadow-pop: 0 12px 32px rgba(17, 19, 24, .14);
  --shadow-drawer: -24px 0 56px rgba(17, 19, 24, .16);
  --shadow-float: 0 16px 40px rgba(17, 19, 24, .28);
  --backdrop: rgba(17, 19, 24, .24);
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px #111318;

  /* ── Layers ── */
  --z-sticky: 20; --z-topbar: 40; --z-popover: 45; --z-sidebar: 60; --z-floatbar: 70;
  --z-backdrop: 80; --z-drawer: 90; --z-palette: 100; --z-toast: 120; --z-tooltip: 1000;

  /* ── Motion ── */
  --dur-fast: 120ms; --dur: 180ms; --ease: cubic-bezier(.2, .7, .2, 1);

  /* ── Layout. Breakpoints (media queries cannot read variables): 1200 rail · 1100 split stacks · 1080 settings menu
     becomes a select · 768 overlay menu. ── */
  --sidebar-w: 200px;
  --subnav-w: 212px;         /* settings and Gateway inner menu */
  --sidebar-rail-w: 64px;
  --header-h: 52px;
  --tabs-h: 40px;
  --content-max: 1760px;    /* 1920 uses its whole width; wider windows keep the page centred at this */
  --pad-x: clamp(24px, 2vw, 36px);
  --pad-y: 24px;
  --gap: 16px;               /* between cards */
  --gap-section: 24px;       /* between page sections */
  --drawer-w: 520px;
  --split-list: minmax(320px, 32%);   /* list : detail ≈ 32 : 68 (brief §3.5) */
}
[data-density="comfortable"] { --row-pad: 14px; --row-min-h: 56px; }
[data-density="compact"] { --row-pad: 6px; --row-min-h: 40px; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg-app); color: var(--ink); font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-ink); }
button, input, textarea, select { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--faint); }