Reorganize CSS

[masakudamatsu]

• [ ] Replace id selector (e.g., #map) with the attribute selector ( [id="map"]), to avoid an unnecessary specificity increase. (see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#making_selectors_specific_with_and_without_adding_specificity)

• [ ] Use the parent selector to handle specificity

  By indicating the section of the document you're styling before the element you're selecting, the rule becomes more specific. — MDN Web Docs

• [ ] Follow CUBE CSS methodology (cf. https://www.smashingmagazine.com/2021/07/global-local-styling-nextjs/)

• [ ] Use CSS variables instead of JavaScript (i.e. designtokens.js) (see comment below for detail)

• [ ] Deal with #348

• [ ] Deal with #231

• [ ] Deal with #230

• [ ] Deal with #181

• [ ] Deal with #180

[masakudamatsu]

For CSS variables, we can use something like

--minimum-target-size: 48px;
--close-button-size: var(--minimum-target-size);

// ButtonCircle.js
const setClickableArea = `
  height: var(--close-button-size);
  width: var(--close-button-size);
`

// DivPopup.js
const setPadding = `
  padding: var(--close-button-size);
`;