/*
 * Direction C of default-skins.md, the dense list: a white page, no cards, a 2px rule in the text
 * colour over the one heading a region leads with, hairlines between rows, the accent on counts and
 * marks, and one filled button per screen. The colour roles are §2's: the page and the field are
 * white (`--board-bg`, `--board-surface`), the panel fill `--board-tint`, the hairline
 * `--board-line`, a field's edge `--board-rule`, the faintest divider `--board-hair` (derived),
 * the three type greys (`--board-text`, `--board-mid`, `--board-dim`), the filled button's ink
 * (`--board-primary`, `--board-on-primary`, the text colour in C), and the accent from `ui.accent`.
 * The type scale is the eight size steps (`--board-size-caption` through `--board-size-title`), the
 * weights, the leadings and the one spacing scale (`--board-space-1` through `--board-space-8`).
 */
:root {
  --board-font: var(--ui-font, Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", system-ui, -apple-system, sans-serif);
  --board-mono: ui-monospace, "SF Mono", Menlo, Consolas, "D2Coding", monospace;
  /* C's measures: 12px dates, 13px meta and table cells, 14px rows, 15px section heads, 16px prose, 20px a post's title, 22px a list's. */
  /* `ui.textSize` (noriter-174): every step grows by `--ui-text-step` and the two smallest stop at `--ui-text-floor`; unset, both are 0. */
  --board-text-step: var(--ui-text-step, 0px);
  --board-text-floor: var(--ui-text-floor, 0px);
  --board-size-caption: max(calc(0.75rem + var(--board-text-step)), var(--board-text-floor));
  --board-size-meta: max(calc(0.8125rem + var(--board-text-step)), var(--board-text-floor));
  /* A date or a name beside a row or a comment: the caption, which `large` takes to 14px with the meta it reads as. */
  --board-size-byline: max(calc(0.75rem + 2 * var(--board-text-step)), var(--board-text-floor));
  --board-size-ui: calc(0.875rem + var(--board-text-step));
  --board-size-read: calc(1rem + var(--board-text-step));
  --board-size-head: calc(0.9375rem + var(--board-text-step));
  --board-size-display: calc(1.25rem + var(--board-text-step));
  --board-size-page: calc(1.375rem + var(--board-text-step));
  --board-size-title: calc(1.75rem + var(--board-text-step));
  --board-weight-normal: 400;
  --board-weight-bold: 700;
  --board-leading-tight: 1.35;
  --board-leading-ui: 1.5;
  --board-leading-read: 1.8;
  /* The one spacing scale: every pad, gap and offset in this sheet reads from it (board-skin.md §9). */
  --board-space-1: 0.25rem;
  --board-space-2: 0.5rem;
  --board-space-3: 0.75rem;
  --board-space-4: 1rem;
  --board-space-5: 1.25rem;
  --board-space-6: 1.5rem;
  --board-space-7: 2rem;
  --board-space-8: 3rem;
  /* The names sites and the rail skin already set or read; the board skin itself uses only the names above (board-skin.md §9). */
  --board-size-xs: var(--board-size-caption);
  --board-size-foot: var(--board-size-caption);
  --board-size-s: var(--board-size-meta);
  --board-size: var(--board-size-ui);
  --board-size-l: var(--board-size-ui);
  --board-size-xl: var(--board-size-head);
  --board-size-2xl: var(--board-size-page);
  --board-size-body: var(--board-size-read);
  --board-weight-title: 700;
  --board-bg: #ffffff;
  --board-surface: #ffffff;
  --board-tint: #f7f7f7;
  --board-tint-2: #efefef;
  /* A 공지 row's ground: the panel fill, so the row reads as marked by its 공지 word in the accent rather than by a colour band. */
  --board-notice: var(--board-tint);
  --board-line: #e6e6e6;
  --board-rule: #d8d8d8;
  /* The faintest divider, between rows (default-skins.md §2): the hairline halfway to the page. */
  --board-hair: color-mix(in srgb, var(--board-line) 55%, var(--board-bg));
  --board-text: #191919;
  --board-mid: #555555;
  --board-dim: #737373;
  --board-ink: #191919;
  --board-on-ink: #ffffff;
  /* `--ui-*` are the site's `ui.*` settings (ui-standard.md §4a); unset, the value after the comma is the skin's own. */
  --board-accent: var(--ui-accent, #c8321e);
  --board-on-accent: var(--ui-on-accent, #ffffff);
  --board-accent-hover: var(--ui-accent-hover, color-mix(in srgb, var(--board-accent) 82%, #000));
  --board-accent-text: var(--board-accent);
  /* C's one filled button (글쓰기, 등록) is the text colour, not the accent: the accent marks counts and the current place. A site that wants it in the accent sets these two. */
  --board-primary: var(--board-ink);
  --board-on-primary: var(--board-on-ink);
  --board-primary-hover: color-mix(in srgb, var(--board-primary) 82%, var(--board-bg));
  --board-count: var(--board-accent);
  --board-new: var(--board-accent);
  --board-danger: #c8342a;
  --board-danger-fill: var(--board-danger);
  --board-radius: calc(6px * var(--ui-radius, 1));
  --board-radius-s: calc(4px * var(--ui-radius, 1));
  --board-radius-l: calc(8px * var(--ui-radius, 1));
  --board-shadow: none;
  --board-card-pad: calc(var(--board-space-4) * var(--ui-density, 1));
  /* The empty state of a listing, comments thread or message box. */
  --board-empty-pad: var(--board-space-8) 0;
  /* C's controls: 36px on a list and a post, a 6px corner. A screen that needs another size sets the token on its element. */
  --board-control-h: calc(2.25rem * var(--ui-density, 1));
  --board-control-pad-y: 0.35rem;
  --board-control-pad-x: 0.875rem;
  --board-control-radius: var(--board-radius);
  --board-control-leading: 1.2;
  /* The text-side inset of a one-line field; the select caret sits the same distance in. */
  --board-input-pad-x: 0.75rem;
  /* The right rail: 240px beside the main column, 32px apart (default-skins.md §1, C: main 50–958, rail 990–1230). */
  --board-rail-w: 15rem;
  --board-side-w: 15rem;
  --board-compose-w: var(--board-side-w);
  --board-max: 73.75rem;
  --board-gap: var(--board-space-5);
  /*
   * The gap a sticky element or an anchor target keeps below the header: the runtime measures the
   * bar and writes --gb-header-offset on <html> — the bar's height while it shows, 0 once the
   * headerAutohide option has let it step aside — and this adds the skin's own 0.75rem of air.
   * Before the runtime runs the fallback is the drawn 57px (3.5rem row plus the rule).
   */
  --board-header-offset: calc(var(--gb-header-offset, 3.5625rem) + 0.75rem);
  /* Native controls and scrollbars follow the site's own light, not the system's. */
  color-scheme: light;
  /*
   * Core's colour set (default-skins.md §2), filled so a plugin and the editor island draw in this
   * skin's colours. Each is the board token it stands for: the var() resolves where it is used, so
   * the dark block's --board-* overrides carry these with them and no second declaration is owed.
   */
  --gb-bg: var(--board-bg);
  --gb-surface: var(--board-surface);
  --gb-surface-2: var(--board-tint);
  --gb-surface-hover: var(--board-tint);
  --gb-surface-muted: var(--board-tint);
  --gb-text: var(--board-text);
  --gb-text-soft: var(--board-mid);
  --gb-text-dim: var(--board-dim);
  --gb-border: var(--board-line);
  --gb-border-strong: var(--board-rule);
  --gb-line: var(--board-line);
  --gb-accent: var(--board-accent);
  --gb-accent-hover: var(--board-accent-hover);
  --gb-accent-soft: var(--ui-accent-soft, color-mix(in srgb, var(--board-accent) 10%, var(--board-bg)));
  --gb-on-accent: var(--board-on-accent);
  --gb-danger: var(--board-danger);
  --gb-danger-soft: color-mix(in srgb, var(--board-danger) 8%, var(--board-surface));
  --gb-card-pad: var(--board-card-pad);
  --gb-mono: var(--board-mono);
  --gb-radius: var(--board-radius);
  --gb-radius-sm: var(--board-control-radius);
  --gb-radius-xs: var(--board-radius-s);
  --gb-ring: 0 0 0 3px var(--board-focus-ring, color-mix(in srgb, var(--board-ink) 14%, transparent));
  --gb-shadow: none;
  --gb-shadow-lift: 0 4px 16px rgb(0 0 0 / 0.08);
}
/* Both dark selectors, so the reader's choice and the system's run through one set of values (skin-api.md §3u); doubled, so a site's later sheet does not win here by order alone (§3n). */
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
    --board-bg: #121212;
    --board-surface: #181818;
    --board-tint: #1b1b1b;
    --board-tint-2: #232323;
    --board-line: #2e2e2e;
    --board-rule: #3a3a3a;
    --board-text: #ececec;
    --board-mid: #bdbdbd;
    --board-dim: #9a9a9a;
    --board-ink: #ececec;
    --board-on-ink: #121212;
    /* The default accent lightened toward white until it reads at 4.5:1 on the page (default-skins.md §2): #c8321e mixed 0.2 → #d35b4b, 4.79:1. A chosen one comes lightened by --ui-accent-dark. */
    --board-accent: var(--ui-accent-dark, #d35b4b);
    --board-on-accent: var(--ui-on-accent-dark, #121212);
    --board-accent-hover: var(--ui-accent-dark-hover, color-mix(in srgb, var(--board-accent) 80%, #fff));
    --gb-accent-soft: var(--ui-accent-dark-soft, color-mix(in srgb, var(--board-accent) 18%, var(--board-bg)));
    --board-danger: #ea7b70;
    --board-danger-fill: color-mix(in srgb, var(--board-danger) 55%, #000);
    --gb-shadow-lift: 0 4px 16px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

:root:root[data-theme="dark"] {
    --board-bg: #121212;
    --board-surface: #181818;
    --board-tint: #1b1b1b;
    --board-tint-2: #232323;
    --board-line: #2e2e2e;
    --board-rule: #3a3a3a;
    --board-text: #ececec;
    --board-mid: #bdbdbd;
    --board-dim: #9a9a9a;
    --board-ink: #ececec;
    --board-on-ink: #121212;
    /* The default accent lightened toward white until it reads at 4.5:1 on the page (default-skins.md §2): #c8321e mixed 0.2 → #d35b4b, 4.79:1. A chosen one comes lightened by --ui-accent-dark. */
    --board-accent: var(--ui-accent-dark, #d35b4b);
    --board-on-accent: var(--ui-on-accent-dark, #121212);
    --board-accent-hover: var(--ui-accent-dark-hover, color-mix(in srgb, var(--board-accent) 80%, #fff));
    --gb-accent-soft: var(--ui-accent-dark-soft, color-mix(in srgb, var(--board-accent) 18%, var(--board-bg)));
    --board-danger: #ea7b70;
    --board-danger-fill: color-mix(in srgb, var(--board-danger) 55%, #000);
    --gb-shadow-lift: 0 4px 16px rgb(0 0 0 / 0.5);
    color-scheme: dark;
}