: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;

  --link: #3F6C9E;

  --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;
  --tile-art-inset: 13%;
  --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;
  --text-xxl: 32px;

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

  --btn-pad-y: var(--space-2);
  --grade-size: 52px;
  --btn-icon-size: 34px;
  --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);
  --ad-unit-w: 160px;
  --ad-unit-h: 600px;
  --ad-rail: var(--ad-unit-w);
  --ad-span-x: calc(var(--ad-rail) * 2);
  --ad-span-y: 0px;
  --frame-w: calc(100vw - var(--safe-x) - var(--app-pad) * 2 - var(--ad-span-x));
  --dora-reserve: 0px;
  --frame-h: calc(var(--viewport-h) - var(--safe-y) - var(--app-pad) * 2 - var(--app-gap)
    - var(--dora-reserve) - var(--ad-span-y));
  --panel-h: 600px;
  --panel-cap-w: calc((100vw - var(--safe-x)) * 0.94);
  --panel-cap-h: calc((var(--viewport-h) - var(--safe-y)) * 0.94);
  --detail-cap: calc(var(--viewport-h) * 0.5);
  --center-min: 136px;

  --board-span: 680;
  --report-board-span: 615;
  --dock-span: 714;
  --stack-span: 690;
  --dock-tail: 200px;
  --board-unit-cap: 1.08px;
  --board-cap: 820px;
  --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(var(--board-unit-cap), 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;
  }
}