:root {
  --sage: #CCD5AE;
  --lime: #E9EDC9;
  --ivory: #FEFAE0;
  --cream: #FAEDCD;
  --tan: #D4A373;

  --ink: #5A4632;
  --ink-soft: #8C7355;
  --felt: #A9B78C;
  --felt-deep: #8C9A6E;

  --man: #B5794C;
  --pin: #77875C;
  --sou: #5A4632;

  --line: rgba(90, 70, 50, 0.18);
  --shade: rgba(90, 70, 50, 0.22);
  --veil: rgba(90, 70, 50, 0.45);

  --tile-w: 30px;
  --tile-h: 42px;
  --tile-gap: 2px;
  --hand-tiles: 14;
  --scrollbar: 8px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 34px;

  --layer-center: 1;
  --layer-dock: 2;
  --layer-announce: 3;
  --layer-overlay: 10;

  --text-s: 12px;
  --text-m: 14px;
  --text-l: 20px;
  --text-xl: 26px;

  --radius-s: 5px;
  --radius-m: 10px;
  --radius-l: 18px;

  --btn-pad-y: var(--space-2);
  --grade-size: 52px;
  --panel-pad: var(--space-4);
  --panel-gap: var(--space-3);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-pad: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  --safe-x: calc(var(--safe-left) + var(--safe-right));
  --safe-y: calc(var(--safe-top) + var(--safe-bottom));

  --viewport-h: 100vh;
  --app-pad: var(--space-3);
  --app-gap: var(--space-3);
  --frame-w: calc(100vw - var(--safe-x) - var(--app-pad) * 2);
  --frame-h: calc(var(--viewport-h) - var(--safe-y) - var(--app-pad) * 2 - var(--app-gap));
  --panel-cap-w: calc((100vw - var(--safe-x)) * 0.94);
  --panel-cap-h: calc((var(--viewport-h) - var(--safe-y)) * 0.94);
  --detail-board-cap: calc(var(--viewport-h) * 0.5);

  --board-span: 680;
  --report-board-span: 615;
  --dock-span: 714;
  --stack-span: 690;
  --dock-tail: 200px;
  --board-cap: 760px;
  --board-size: min(
    var(--board-cap),
    calc(var(--frame-h) * var(--board-span) / var(--stack-span)),
    calc((var(--frame-w) - var(--dock-tail)) * var(--board-span) / var(--dock-span))
  );
  --board-unit: min(1px, calc(var(--board-size) / var(--board-span)));
  --center-span: 236;
  --river-cols: 6;
  --river-rows: 3;
  --dock-lift: calc(var(--board-unit) * 54);
  --font: 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
}

@supports (height: 100dvh) {
  :root {
    --viewport-h: 100dvh;
  }
}