/*
 * What a site is expected to restyle, and nothing else: the page ground and the card surface
 * (`--board-bg`, `--board-surface`), the two greys a hairline is drawn in (`--board-line`, the
 * heavier `--board-rule`), the three type greys (`--board-text`, `--board-mid`, `--board-dim`),
 * the ink the one filled button and the current pager cell are painted with (`--board-ink`,
 * `--board-on-ink`), the brand colour every accent takes (`--board-accent`, `--board-on-accent`,
 * `--board-accent-text` for its text-on-ground case), the comment count (`--board-count`), the
 * card radius (`--board-radius-l`), and the type scale: the eight size steps (`--board-size-caption`
 * through `--board-size-title`), the two weights (`--board-weight-normal`, `--board-weight-bold`),
 * the three leadings (`--board-leading-tight`, `--board-leading-ui`, `--board-leading-read`), 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;
  --board-size-caption: 0.8125rem;
  --board-size-meta: 0.875rem;
  --board-size-ui: 1rem;
  --board-size-read: 1.0625rem;
  --board-size-head: 1.125rem;
  --board-size-display: 1.375rem;
  --board-size-page: 1.625rem;
  --board-size-title: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem);
  --board-weight-normal: 400;
  --board-weight-bold: 700;
  --board-leading-tight: 1.3;
  --board-leading-ui: 1.5;
  --board-leading-read: 1.75;
  /* 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: #f5f7f8;
  --board-surface: #ffffff;
  --board-tint: #eef3f4;
  --board-tint-2: #e8eaed;
  /* The notice row's own ground: production's accent tint (rgb(237, 248, 245)), warmer than --board-tint, so a 공지 row reads as marked rather than as a hovered one. */
  --board-notice: #edf8f5;
  --board-line: #e1e8eb;
  --board-rule: #d1d5db;
  --board-text: #182c35;
  --board-mid: #4e626c;
  --board-dim: #5a6b75;
  --board-ink: #182c35;
  --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, #176b62);
  --board-on-accent: var(--ui-on-accent, var(--board-on-ink));
  /* The primary's hovered ground: a step darker than the accent it replaces (opacity fades showed the page through the button). */
  --board-accent-hover: color-mix(in srgb, var(--board-accent) 82%, #000);
  --board-accent-text: var(--ui-accent, #176b62);
  --board-count: #2f6fde;
  /* Small “N” text needs normal-text contrast on the white surface; keep the same red family. */
  --board-new: #d13438;
  --board-danger: #d92d20;
  /* The filled face of a destructive button: the link tone in light, a deeper step of it in dark so white text still reads (AppButton.vue's --danger variant has no dark pair). */
  --board-danger-fill: var(--board-danger);
  --board-radius: calc(8px * var(--ui-radius, 1));
  --board-radius-s: calc(3px * var(--ui-radius, 1));
  --board-radius-l: calc(16px * var(--ui-radius, 1));
  --board-shadow: 0 2px 6px rgb(24 44 53 / 4%);
  --board-card-pad: calc(var(--board-space-6) * var(--ui-density, 1));
  /* The empty state of a listing, comments thread or message box: the legacy .empty-state measure. */
  --board-empty-pad: var(--board-space-8) 0;
  /* The control measures, taken from the legacy AppButton: a screen that needs another size sets the token on its element rather than re-declaring the property. */
  --board-control-h: calc(2.75rem * var(--ui-density, 1));
  --board-control-pad-y: 0.55rem;
  --board-control-pad-x: 0.9rem;
  --board-control-radius: calc(0.55rem * var(--ui-radius, 1));
  --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.7rem;
  --board-rail-w: 11rem;
  --board-side-w: 15rem;
  /* Supporting widgets use the side-column measure, leaving the main feed the reading width. */
  --board-compose-w: var(--board-side-w);
  --board-max: 80rem;
  --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, or in a browser that never runs it, the fallback is the drawn 65px
   * (4rem row plus the hairline), so the margin is right either way.
   */
  --board-header-offset: calc(var(--gb-header-offset, 4.0625rem) + 0.75rem);
  /* Native controls and scrollbars follow the site's own light, not the system's. */
  color-scheme: light;
  /*
   * The names editor.css reads (the compose page's editor island draws its own chrome where this
   * skin has replaced the theme's sheet, so its --gb-* fallbacks are the theme's, not the board's).
   * 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-accent: var(--board-accent);
  --gb-border: var(--board-line);
  --gb-border-strong: var(--board-rule);
  --gb-card-pad: var(--board-card-pad);
  --gb-danger: var(--board-danger);
  --gb-danger-soft: color-mix(in srgb, var(--board-danger) 8%, var(--board-surface));
  --gb-line: var(--board-line);
  --gb-mono: var(--board-mono);
  --gb-on-accent: var(--board-on-accent);
  --gb-radius: var(--board-radius);
  --gb-radius-sm: var(--board-control-radius);
  --gb-ring: 0 0 0 3px var(--board-focus-ring, color-mix(in srgb, var(--board-accent) 18%, transparent));
  --gb-shadow-lift: var(--board-shadow);
  --gb-surface: var(--board-surface);
  --gb-surface-2: var(--board-tint);
  --gb-surface-muted: var(--board-tint);
  --gb-text: var(--board-text);
  --gb-text-dim: var(--board-dim);
  --gb-text-soft: var(--board-mid);
}
/* 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: #0f1012;
    --board-surface: #18191c;
    --board-tint: #222327;
    --board-tint-2: #2c2e33;
    --board-notice: #16302a;
    --board-line: #2c2e33;
    --board-rule: #44474d;
    --board-text: #eceef1;
    --board-mid: #b4b8bf;
    --board-dim: #8d929a;
    --board-ink: #eceef1;
    --board-accent: var(--ui-accent-dark, #8ed6c5);
    --board-on-accent: var(--ui-on-accent-dark, #102c26);
    --board-accent-text: var(--ui-accent-dark, #8ed6c5);
    --board-on-ink: #16181d;
    /* Accent is the pale ink here with dark text on it, so the hovered step goes toward white — darkening would sit under rest's contrast. */
    --board-accent-hover: color-mix(in srgb, var(--board-accent) 72%, #fff);
    --board-count: #7da2ff;
    --board-new: #ff6b70;
    --board-danger: #ff8a80;
    --board-danger-fill: color-mix(in srgb, var(--board-danger) 55%, #000);
    --board-shadow: none;
    color-scheme: dark;
  }
}

:root:root[data-theme="dark"] {
    --board-bg: #0f1012;
    --board-surface: #18191c;
    --board-tint: #222327;
    --board-tint-2: #2c2e33;
    --board-notice: #16302a;
    --board-line: #2c2e33;
    --board-rule: #44474d;
    --board-text: #eceef1;
    --board-mid: #b4b8bf;
    --board-dim: #8d929a;
    --board-ink: #eceef1;
    --board-accent: var(--ui-accent-dark, #8ed6c5);
    --board-on-accent: var(--ui-on-accent-dark, #102c26);
    --board-accent-text: var(--ui-accent-dark, #8ed6c5);
    --board-on-ink: #16181d;
    /* Accent is the pale ink here with dark text on it, so the hovered step goes toward white — darkening would sit under rest's contrast. */
    --board-accent-hover: color-mix(in srgb, var(--board-accent) 72%, #fff);
    --board-count: #7da2ff;
    --board-new: #ff6b70;
    --board-danger: #ff8a80;
    --board-danger-fill: color-mix(in srgb, var(--board-danger) 55%, #000);
    --board-shadow: none;
    color-scheme: dark;
}