:root {
  /* ===============================
     ■ Width
  =============================== */
  --width-full: 100%;
  --width-md: 1100px;

  /* ===============================
     ■ Spacing / Gap
  =============================== */
  --padding-block: var(--scale-80);
  --padding-inline: var(--scale-20);
  --gap-row: var(--scale-56);
  --gap-column: var(--scale-40);

  /* ===============================
     ■ Chart Layout
  =============================== */
  --chart-th-group-width: 29px;
  --chart-th-sub-width: 100px;
  --chart-th-width: calc(
    var(--chart-th-group-width) + var(--chart-th-sub-width)
  );
  /*--chart-th-width: 112px;*/
  --chart-td-width: min(
    100vw / 375 * 120,
    (1280px - var(--chart-th-width)) / 8
  );
  --chart-th-h3-height: min(100vw/ 375 * 36, 46px);
  /*--chart-th-group-height: 0px;*/
  --chart-th-sub-height: min(100vw / 375 * 96, 104px);
  /*--chart-th-height: calc(
    var(--chart-th-h3-height) + var(--chart-th-sub-height)
  );*/

  --chart-th-height: min(100vw / 375 * 50, 62px);

  --chart-td-height: min(100vw / 375 * 77, 123px);

  /* ===============================
     ■ Scale
  =============================== */
  --scale-2: min(2px, 100vw / 375 * 2);
  --scale-4: min(4px, 100vw / 375 * 3);
  --scale-8: min(8px, 100vw / 375 * 6);
  --scale-12: min(12px, 100vw / 375 * 10);
  --scale-14: min(14px, 100vw / 375 * 12);
  --scale-16: min(16px, 100vw / 375 * 13);
  --scale-18: min(18px, 100vw / 375 * 15);
  --scale-20: min(20px, 100vw / 375 * 16);
  --scale-24: min(24px, 100vw / 375 * 20);
  --scale-28: min(28px, 100vw / 375 * 22);
  --scale-32: min(32px, 100vw / 375 * 24);
  --scale-40: min(40px, 100vw / 375 * 28);
  /*--scale-48: min(48px, 100vw / 375 * 28);*/
  --scale-56: min(56px, 100vw / 375 * 32);
  /*--scale-64: min(64px, 100vw / 375 * 44);*/
  --scale-80: min(80px, 100vw / 375 * 40);
}
