@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.content {
  padding: 3.75rem 0 2.25rem 0;

  &.archive {
    ol {
      list-style-type: lower-roman;
      margin: 0.7rem 0;
    }
  }

  // table style
  tr {
    break-inside: avoid;
    break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
    overflow: auto;
    break-inside: auto;
    text-align: left;
    margin-top: $hl-9;
    margin-bottom: $hl-9;
    table-layout: fixed;
  }
  table td {
    min-width: 32px;
  }
  table {
    margin: 0.8em 0;
  }
  table {
    padding: 0;
    word-break: initial;
  }
  table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
  }
  table tr:nth-child(2n),
  thead {
    background-color: #f8f8f8;
  }
  table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
  }
  table tr td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
  }
  th:nth-child(1) {
    width: 12rem;
    @media screen and (max-width: $mobile) {
      width: $hl-1;
    }
  }
  th:nth-child(3) {
    width: 8rem;
    @media screen and (max-width: $mobile) {
      width: $hl-3;
    }
  }
  td:nth-child(1) {
    width: 12rem;
    @media screen and (max-width: $mobile) {
      width: $hl-1;
    }
  }
  td:nth-child(3) {
    width: 8rem;
    @media screen and (max-width: $mobile) {
      width: $hl-3;
    }
  }
  table tr th:first-child,
  table tr td:first-child {
    margin-top: 0;
  }
  table tr th:last-child,
  table tr td:last-child {
    margin-bottom: 0;
  }
}