:root {
  color-scheme: light dark;
  --nx-page: #f5f7fb;
  --nx-paper: #ffffff;
  --nx-paper-soft: #f0f3f9;
  --nx-paper-elevated: #ffffff;
  --nx-navy: #172b4d;
  --nx-ink: #1d2f4d;
  --nx-sub: #556377;
  --nx-muted: #5f6b80;
  --nx-line: #dde4ee;
  --nx-line-strong: #c7d1df;
  --nx-blue: #4b55c7;
  --nx-blue-strong: #353fa9;
  --nx-blue-soft: #eef0ff;
  /* Accent as ink (--nx-blue) and accent as a filled surface (--nx-blue-fill)
     are the same colour in light, and must diverge in dark: ink has to rise off
     a dark page, a fill has to sit under white text. */
  --nx-blue-fill: var(--nx-blue);
  --nx-blue-fill-strong: var(--nx-blue-strong);
  --nx-teal: #0b9f96;
  --nx-teal-soft: #e6f7f4;
  --nx-orange: #f27a35;
  --nx-orange-soft: #fff0e7;
  --nx-up: #e65f52;
  --nx-up-soft: #fff0ed;
  --nx-down: #3474d6;
  --nx-down-soft: #edf3ff;
  /* 위험(되돌릴 수 없는 행동) 의미. 시장 등락색과 **다른 축**이다 —
     계정 삭제·연결 해제를 「값이 내렸다」와 같은 색으로 말하지 않는다. */
  --nx-risk: #b3392a;
  --nx-risk-soft: #fdeeeb;
  --nx-risk-line: #f0c5bd;
  --nx-radius-sm: 14px;
  --nx-radius-md: 20px;
  --nx-radius-lg: 28px;
  --nx-shadow-sm: 0 1px 2px rgb(16 37 74 / 4%), 0 10px 28px rgb(16 37 74 / 7%);
  --nx-shadow-lg: 0 2px 4px rgb(16 37 74 / 4%), 0 24px 70px rgb(16 37 74 / 12%);
  --nx-shadow-float: 0 8px 18px rgb(16 37 74 / 8%), 0 28px 72px rgb(16 37 74 / 14%);
  --nx-shell: 1240px;
  --nx-gutter: clamp(16px, 3vw, 32px);
  /* The shell header has one authoritative size per viewport class. */
  --nx-header: 72px;
  /* 하단 도크도 화면 등급마다 높이가 하나다 — 도크 위에서 끝나야 하는 면들이 이 값을 읽는다.
   * 도크가 없는 화면 등급에서는 0 이라 같은 식이 그대로 통과한다. */
  --nx-dock: 0px;
  --nx-dock-clear: calc(var(--nx-dock) + env(safe-area-inset-bottom, 0px));
  --nx-font: "Pretendard Variable", Pretendard, "Noto Sans KR", "Noto Sans CJK KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 760px) {
  :root {
    --nx-header: 64px;
    --nx-dock: 72px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --nx-page: #0f1521;
    --nx-paper: #171f2d;
    --nx-paper-soft: #1c2636;
    --nx-paper-elevated: #202b3c;
    --nx-navy: #f2f5fb;
    --nx-ink: #e8edf6;
    --nx-sub: #aab5c6;
    --nx-muted: #98a3b7;
    --nx-line: #2d394b;
    --nx-line-strong: #3d4b60;
    --nx-blue: #8791ff;
    --nx-blue-strong: #aeb5ff;
    --nx-blue-soft: #252c52;
    --nx-blue-fill: #3742ac;
    --nx-blue-fill-strong: #2a3490;
    --nx-teal: #54c8bd;
    --nx-teal-soft: #173b3a;
    --nx-orange: #ff9a5f;
    --nx-orange-soft: #432a20;
    --nx-up: #ff8d81;
    --nx-up-soft: #432724;
    --nx-down: #77a9ff;
    --nx-down-soft: #1d3151;
    --nx-risk: #ff9b8f;
    --nx-risk-soft: #3a211d;
    --nx-risk-line: #5c332c;
    --nx-shadow-sm: 0 1px 2px rgb(0 0 0 / 24%), 0 12px 30px rgb(0 0 0 / 18%);
    --nx-shadow-lg: 0 2px 4px rgb(0 0 0 / 28%), 0 28px 76px rgb(0 0 0 / 30%);
    --nx-shadow-float: 0 10px 22px rgb(0 0 0 / 25%), 0 34px 84px rgb(0 0 0 / 36%);
  }
}