
.page-article-detail {
  background: white;

  padding: 20px 0;
  border-radius: 4px;

  .article-title {
    word-break: break-all;
    margin: 20px 0;
    font-size: 28px;
    color: black;
    font-weight: 700;
    line-height: 1.3;

    .edit-icon {
      visibility: hidden;
    }
    &:hover {
      .edit-icon {
        visibility: visible;
      }
    }
  }

  .article-info {
    border-top: 1px solid #eeeeee;
    padding-top: 20px;
    .author {
      a {
        font-size: 20px;
        color: #555;
        &:hover {
          color: #000;
          text-decoration: underline;
        }
      }

    }
    .mix {
    }
  }

  .article-content {

    margin-top: 40px;

    padding: 0 !important;
    overflow: hidden;

    img {
      max-width: 100%;
      text-align: center;
    }

  }

  #interactive-area {

    margin-top: 20px;
    .article-appendix {
      padding: 20px 0 40px 0;
      border-top: 1px solid #eee;
    }

    .inter-btn {
      color: #888;
      margin-right: 10px;
      &:hover {
        color: black;
      }
    }

    .title-area {

      padding: 10px 0;
      .total {
        font-weight: bold;
        font-size: 18px;
      }
    }
    .tree-area {
      .cell-area {

        border-top: 1px solid #eeeeee;
        padding: 15px 0;

        .reply-area {
          border-left: 4px solid #eeeeee;
          padding-left: 20px;

          .sub-cell-area {
            padding: 15px 0;
            border-top: 1px solid #eeeeee;

            &:first-child {
              border-top: none;
              margin-top: 15px;

            }

          }

        }
      }

    }
    .pager-area {
      margin-top: 10px;
    }
  }
}
