@media screen {
  .tablewrapper {
    overflow-x: auto;
    clear: left;
  }
  .large {
    margin-left: -5%;
    margin-right: -5%;
  }
  @media (min-width: 960px) {
    .large {
      margin-left: -15%;
      margin-right: -15%;
    }
  }
  @media (min-width: 1024px) {
    .large {
      margin-left: -20%;
      margin-right: -20%;
    }
  }
  @media (min-width: 1280px) {
    .large {
      margin-left: -30%;
      margin-right: -30%;
    }
  }
  table {
    min-width: 650px;
  }
}

table th {
  text-align: center;
}
td:nth-child(1),
td:nth-child(2),
td:nth-child(5),
td:nth-child(7) {
  text-align: end;
}
[lang^="ja"] td[lang^="zh-"],
[lang^="ja"] span[lang^="zh-"] {
  text-decoration: underline;
}

caption {
  max-width: calc(720px * 0.66);
  margin: 0 auto;
}
.legend dl {
  margin-left: 1em;
}
.legend dt {
  width: 40px;
  float: left;
  clear: left;
  line-height: 26px;
  text-align: right;
}
dt.legend-color {
  overflow: hidden;
  font-size: 0;
  border: 1px solid;
  height: 20px;
  margin-top: 2px;
}
.legend dd {
  padding-left: 1.5em;
  line-height: 26px;
}

:root {
  --mazu-color: #ffd1fc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --mazu-color: #571c53;
  }
}
tbody.mazu,
.legend .mazu {
  background-color: var(--mazu-color);
}
tbody.mazu tr:nth-child(2n),
tbody.mazu th {
  /* Unset SimpleCSS's tr/th coloring */
  background-color: unset;
}
div.legend {
  border: 1px solid #ddd;
  padding: 0 1em;
  max-width: max-content;
}

body {
  /* Fixes background colors disappearing in print mode */
  print-color-adjust: exact;
}

@media print {
  body > header {
    display: none;
  }
  body {
    /* display: grid; is not print-friendly */
    display: block;
  }
  [lang^="ja"] a::after {
    content: "（リンク: " attr(href) "）";
  }
  [lang^="zh-Hant"] a::after {
    content: "（連接: " attr(href) "）";
  }
  tr {
    page-break-inside: avoid;
  }
  /* Don't print tfoot on every page the table spans on */
  table tfoot {
    display: table-row-group;
  }
  /* Don't show interlang links */
  .interlang {
    display: none;
  }
}

@media screen and (min-width: 500px) {
  p.interlang {
    float: right;
    font-size: larger;
  }
}

p.interlang::before {
  content: "💁";
}