:root {
  /* 토스 계열 원색의 방향은 유지하되 흰 면 AA를 넘도록 명도를 낮춘 실측값. */
  --nx-rise: #d12f43;
  --nx-fall: #1769d2;
  /* 어두운 면에서는 같은 색상축을 밝힌다. #293f9c 면에서도 각각 4.73:1, 5.08:1. */
  --nx-rise-dark: #ff9fab;
  --nx-fall-dark: #8fc5ff;
}

.nx-amount {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.nx-amount > .nx-amount__number { font: inherit; font-variant-numeric: tabular-nums; font-weight: 700; }
.nx-amount > .nx-amount__unit { font: inherit; font-weight: 400; }
.nx-amount--end { justify-content: flex-end; text-align: right; width: 100%; }

/* HTML 보조 텍스트는 부모의 0.8em 위계를 유지하되 서비스 하한 12px 아래로는 내리지 않는다. */
:where(small, sub, sup) { font-size: max(12px, .8em); }

html[data-theme="dark"] {
  --nx-rise: var(--nx-rise-dark);
  --nx-fall: var(--nx-fall-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nx-rise: var(--nx-rise-dark);
    --nx-fall: var(--nx-fall-dark);
  }
}