@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-break: break-all;
}

.header {
  position: sticky;
  top: 0;
  padding: 0 2rem;
  background: #fff;
  z-index: 100;

  .header-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;

    .site-title {
      font-size: 1.2rem;
      font-weight: 600;
    }
  }
}

.footer {
  margin-top: 6rem;

  .footer-contents {
    .footer-copyright {
      text-align: center;
      padding: 2rem;
    }
  }
}

.main {
  .main-header {
    margin: 4rem auto;
    width: 1200px;
    max-width: calc(100% - 4rem);

    h1 {
      font-size: 1.4rem;

      &.category-title {
        display: flex;
        align-items: center;
        gap: 4px;
        
        &::before {
          content: "\efb7";
          font-family: "Material Symbols Outlined";
        }
      }
    }

    p {
      color: #aaa;
    }
    
    @media screen and (max-width: 800px) {
      h1 {
        font-size: 1.2rem;
      }
    }
  }

  .main-contents {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-gap: 4rem;
    margin: auto;
    width: 1200px;
    max-width: calc(100% - 4rem);

    @media screen and (max-width: 800px) {
      grid-template-columns: 1fr;
    }

    .content-title {
      margin-bottom: 1rem;
      font-size: 1.4rem;
      font-weight: 400;
    }
  }
}

.side {

  h2 {
    margin-bottom: 1rem;
    color: #ddd;
    font-weight: 600;
    transition: .2s;
  }

  .side-category {
    border: 1px solid transparent;
    border-radius: 1rem;
    transition: .2s;

    &.active {
      padding: 1rem;
      border: 1px solid #ddd;
      box-shadow: 4px 4px 4px #ddd;
    }
  }
}

.section {
  margin: 6rem 0;

  &:first-of-type {
    margin-top: 0;
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}

.categories {
  ul {
    padding-left: 1rem;

    li {
      border-top: 1px dotted #ddd;
    }
  }

  & > ul {
    display: grid;
    padding-left: 0;

    & > li {
      &:last-child {
        border-bottom: 1px dotted #ddd;
      }
    }

    li {
      a {
        display: block;
        padding: .5rem 0;
      }
    }
  }

  .category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

    &:hover {
      .category-count {
        background: #ddd;
        transform: scale(1.1);
      }
    }

    .category-title {
      font-size: .9rem;
    }

    .category-count {
      margin-left: auto;
      padding: .5rem;
      width: 3rem;
      background: #eee;
      border-radius: 3rem;
      font-size: 11px;
      text-align: center;
      line-height: 1;
      transition: .2s;
    }
  }
}

.posts {
  .post {
    position: relative;
    display: grid;
    grid-gap: .5rem;
    padding: 1rem 0;
    border-top: 1px solid #eee;
    transition: .2s;

    &:last-child {
      border-bottom: 1px solid #eee;
    }

    &:hover {
      .post-details {
        &:after {
          background: #000;
          color: #fff;
          transform: scale(1.1);
        }
      }
    }

    .post-title {
      font-size: 2rem;
      line-height: 1.2;
      transition: .2s;
    }

    .post-details {
      display: flex;
      align-items: center;
      gap: .5rem;
      color: #888;
      font-size: .8rem;
      transition: .2s;

      .post-category {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: .25em 1em;
        background: #eee;
        color: #000;
        border-radius: 5rem;
        font-size: .7rem;
        
        &::before {
          content: "\efb7";
          font-family: "Material Symbols Outlined";
        }
      }

      &::after {
        content: "\e5c8";
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 2rem;
        margin-left: auto;
        background: #fafafa;
        border-radius: 50%;
        font-family: "Material Symbols Outlined";
        transition: .2s;
      }
    }
  }
  &.posts-books {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;

    @media screen and (max-width: 800px) {
      grid-template-columns: repeat(3, 1fr);
    }

    .post {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: .5rem;
      border: 0;

      &::after {
        content: none;
      }

      .post-image {
        aspect-ratio: 1 / 1.4;
        width: 100%;
        background: #eee;
      }
    }
  }

}

.main-archive {
  .page-header {
    margin-bottom: 2rem;

    .page-title {
      display: inline-block;
      padding: .5rem 1rem;
      background: #fafafa;
      border-radius: 5rem;
      font-size: .9rem;
      font-weight: 600;
    }
  }
}

.main-single {
  .post-header {
    padding: 2rem 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    .post-title {
      font-size: 4rem;
      font-weight: 400;
      line-height: 1.2;
    }
  }

  .post-details {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;

    .post-category {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: .25em 1em;
      background: #eee;
      color: #000;
      border-radius: 5rem;
      font-size: .7rem;
      
      &::before {
        content: "\efb7";
        font-family: "Material Symbols Outlined";
      }
    }
  }

  .post-main {
    margin: 4rem 0;
    
    .post-content {
      & > * + * {
        margin-top: 1rem;
      }

      h2 {
        margin: 4rem 0 1rem;
        font-size: 1.4rem;
      }

      a {
        text-decoration: underline;
      }

      ul {
        list-style-type: disc;
        margin-left: 2rem;
      }
    }
  }

  .post-footer {
    .post-share {
      display: flex;
      gap: .5rem;
      margin-top: 4rem;
      padding-top: 1rem;
      border-top: 1px solid #ddd;

      .post-share-title {
        font-size: .9rem;
        font-weight: 500;
      }
    }
  }
}

.button {
  cursor: pointer;
  transition: .2s;

  &.button-icon {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 3rem;
    background: #eee;
    border-radius: 50%;

    &:hover {
      background: #ddd;
    }
  }
}