/* ============================================================
   AIPICK — Design Tokens
   Tone: 2trouble.com (mono black + white + single orange accent #ff6e2e, Google Sans Flex + Pretendard, flat/minimal)
   This file is the single source of truth for all 3 pages.
   ============================================================ */
:root{
  /* ── Surface (dark, high-contrast) ── */
  --bg:#0b0b0b;            /* page */
  --surface:#141414;       /* card */
  --surface-2:#1b1b1b;     /* nested / hover */
  --surface-3:#222222;     /* selected */
  --line:#272727;          /* hairline border */
  --line-2:#363636;        /* stronger border */

  /* ── Ink (text on dark) ── */
  --ink:#ffffff;
  --ink-2:#c9c9c9;
  --ink-3:#8c8c8c;         /* muted */
  --ink-4:#8c8c8c;         /* readable secondary text */

  /* ── Brand accent (the ONLY brand color — use sparingly) ── */
  /*    2trouble.com 실제 CSS에서 가장 많이 쓰인 포인트 색(2026-11-03 추출). 주황 위 글자는 검정(대비 7.0, 흰색은 2.8로 미달) */
  --accent:#ff6e2e;
  --accent-press:#f05a18;
  --accent-soft:rgba(255,110,46,.12);
  --accent-line:rgba(255,110,46,.34);
  --on-accent:#0b0b0b;

  /* ── 위험 표시 전용 빨강 — 공격·패치 전·치명 항목. 브랜드 색(주황)과 섞지 않는다 ── */
  --danger:#ff2c2c;

  /* ── Semantic (score states only — never as decoration) ── */
  --good:#34d399;
  --warn:#fbbf24;
  --bad:#f87171;

  /* ── Typography ── */
  --font:"Google Sans Flex","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --tracking-tight:-.03em;   /* headlines */
  --tracking-snug:-.02em;    /* subheads */
  --tracking-body:-.01em;    /* body */
  --tracking-wide:.20em;     /* eyebrow / label caps */

  /* ── Radius ── */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-pill:999px;

  /* ── Spacing scale (4pt) ── */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;
  --s-9:56px; --s-10:72px; --s-11:96px; --s-12:128px;

  /* ── Layout ── */
  --maxw:1080px;
  --maxw-narrow:560px;
  --gutter:24px;

  /* ── Elevation / motion ── */
  --shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 8px 30px rgba(0,0,0,.35);
  --ease:.16s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.55;
  letter-spacing:var(--tracking-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent-soft);color:#fff}