.article-view {
  display: grid;
  grid-template:
    ". header ." auto
    ". toc ." auto
    ". hero ." auto
    "aside body ." auto
    ". footer ." auto
    / 1fr auto 1fr;

  .content-wrap {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  header {
    grid-area: header;
    padding-top: 88px;
    @media (min-width: 809px) {
      padding-top: 144px;
    }

    .content-wrap {
      padding-bottom: 0;
    }

    h1 {
      color: var(--text-primary);
      font-weight: 600;
      font-size: 32px;
      line-height: 1.2;
      margin: 0;
      @media (min-width: 809px) {
        font-size: 40px;
      }
    }

    .date {
      margin: 24px 0;
      color: var(--text-secondary);
    }
  }

  aside {
    grid-area: toc;
    @media (min-width: 1440px) {
      grid-area: aside;
    }
    #news-article & {
      display: none;
    }

    .content-wrap {
      padding-top: 0;
      padding-bottom: 0;
      @media (min-width: 1440px) {
        position: sticky;
        top: 128px;
        max-width: 296px;
        margin-top: 16px;
        margin-left: auto;
        margin-right: 16px;
        border: 1px solid #E7E7EE;
        background-color: #F9F9FB;
        border-radius: 16px;
        padding: 20px;
      }
    }

    .authors {
      margin: 0;
      padding: 0 0 24px;
      list-style: none;
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      @media (min-width: 1440px) {
        padding-bottom: 0;
      }

      li {
        display: flex;
        gap: 16px;
        align-items: center;

        img {
          width: 40px;
          height: 40px;
          object-fit: cover;
          border-radius: 20px;
        }

        span {
          font-size: 16px;
          font-weight: 500;
        }
      }
    }

    #toc {
      max-height: calc(100vh - 300px);
      overflow-y: auto;
      margin: 0;
      padding: 0;
      list-style: none;
      display: none;
      @media (min-width: 1440px) {
        display: block;
      }
      .authors + &:not(:empty) {
        @media (min-width: 1440px) {
          margin-top: 24px;
          padding-top: 24px;
          border-top: 1px solid #C4C4D4;
        }
      }

      li {
        li + li {
          margin-top: 8px;
        }
        
        a {
          display: block;
          text-decoration: none;
          padding: 8px 16px;
          color: var(--text-secondary);
          font-weight: 500;
          line-height: 1.2;
        }
        a.active {
          color: #000;
          background-color: #E9EBFC;
          border-radius: 8px;
        }
        
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }
      }
    }
  }

  .hero {
    grid-area: hero;

    .content-wrap {
      padding-top: 0;
      padding-bottom: 40px;
      @media (min-width: 1440px) {
        padding-bottom: 80px;
      }
    }
    
    img {
      width: 100%;
      border-radius: 24px;
      display: block;
      @media (min-width: 809px) {
        border-radius: 8px;
      }
    }
  }

  .article-body {
    grid-area: body;
    font-size: 18px;
    line-height: 1.6;
    overflow-x: hidden;

    .content-wrap * {
      max-width: 100%;
    }

    .content-wrap > *:first-child {
      margin-top: 0;
    }
    .content-wrap > *:last-child {
      margin-bottom: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 64px 0 16px;
      color: var(--text-primary);
      font-size: 24px;
      font-weight: 500;
      line-height: 1.3;
      scroll-margin-top: 104px;

      strong,
      b {
        font-weight: 500;
      }

      #news-article & {
        margin-top: 0;
      }
    }
    h2 {
      font-size: 20px;
      margin-top: 54px;
    }
    h3 {
      font-size: 18px;
      margin-top: 34px;
    }
    h4 {
      font-size: 16px;
      margin-top: 34px;
    }
    h5 {
      font-size: 14px;
      margin-top: 22px;
    }
    h6 {
      font-size: 12px;
      margin-top: 22px;
    }

    a {
      text-decoration: underline;
      color: #33d;
    }

    p {
      margin: 16px 0;
      color: var(--text-secondary);
      font-size: 18px;
    }

    p span[style*="font-size"] {
      display: inline-block;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    video {
      max-width: 100%;
      height: auto;
    }

    pre {
      max-width: 100%;
      font-size: 14px;
      white-space: pre-wrap;
      word-break: break-all;
    }

    code {
      word-break: break-all;
    }

    .wp-caption {
      text-align: center;
    }
    .wp-caption[style] {
      /* style로 width가 지정되면 overflow 발생 */
      width: auto !important;
    }
    .wp-caption-text {
      margin-top: 0;
      line-height: 1.3;
      text-align: center;
    }

    .wp-video {
      width: auto !important;
    }

    /* FIXME: table 때문에 가로 스크롤이 생기는데 하이라이터를 다른걸로 교체 해보자 */
    .syntaxhighlighter table {
      @media (max-width: 809px) {
        table-layout: fixed !important;
      }
    }

    .table-scroll-wrapper {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .table-scroll-wrapper table {
      white-space: nowrap;
    }
  }

  footer {
    grid-area: footer;

    .hbspt {
      margin: 90px auto ;
      max-width: 520px;
    }

    .information {
      margin: 32px 0 80px;
      padding: 24px;
      background-color: #F9F9FB;
      border-radius: 24px;

      b {
        display: block;
        height: 32px;
        line-height: 32px;
        font-weight: 500;
        font-size: 24px;
        background: url(/images/information.svg) no-repeat 0 50% / 32px 32px;
        padding: 0 0 0 42px
      }

      p {
        margin: 16px 0 0;
        color: var(--text-secondary);
        font-size: 18px;
      }
    }

    .pr-link {
      text-align: center;
      margin: 40px 0 90px;
    }
  }
}

.embla {
  overflow: hidden;
  user-select: none;
  -webkit-user-drag: none;
}
.embla__container {
  display: flex;
}
.embla__slide {
  position: relative;
  flex: 0 0 100%;
}
.embla__slide img {
  width: 100%;
  display: block;
  pointer-events: none;
}

/* dots 스타일 */
.embla__dots {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  gap: 24px;
}
.embla__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: #d9d9d9;;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.embla__dot.is-selected {
  background: #6a77d7;
}

.related-article {
  background-color: #f1f3fb;
}