/* PICKWIKI Board Comments Fix v2
   댓글 작성창 프로필 아이콘 자연스럽게 정렬
   - 초록 원형 아이콘이 textarea 위에 따로 떠 보이는 문제 보정
   - 아이콘을 입력창 왼쪽에 작게 정렬
   - 댓글 textarea 높이/간격 재보정
*/

/* 댓글 작성 폼 기준점 */
#comments form,
.comments form,
.comment-area form,
.comment-wrap form,
.comment-form form,
.comment-write form,
.board-comments form,
.post-comments form,
form[action*="comment"],
form[action*="reply"] {
  position: relative !important;
  display: block !important;
  padding: 14px 16px 16px !important;
  background: #fff !important;
}

/* 댓글 작성 폼 안의 프로필/아바타 아이콘만 보정 */
#comments form .avatar,
#comments form [class*="avatar"],
#comments form [class*="profile"],
.comments form .avatar,
.comments form [class*="avatar"],
.comments form [class*="profile"],
.comment-area form .avatar,
.comment-area form [class*="avatar"],
.comment-area form [class*="profile"],
.comment-wrap form .avatar,
.comment-wrap form [class*="avatar"],
.comment-wrap form [class*="profile"],
.comment-form form .avatar,
.comment-form form [class*="avatar"],
.comment-form form [class*="profile"],
.comment-write form .avatar,
.comment-write form [class*="avatar"],
.comment-write form [class*="profile"],
.board-comments form .avatar,
.board-comments form [class*="avatar"],
.board-comments form [class*="profile"],
.post-comments form .avatar,
.post-comments form [class*="avatar"],
.post-comments form [class*="profile"],
form[action*="comment"] .avatar,
form[action*="comment"] [class*="avatar"],
form[action*="comment"] [class*="profile"],
form[action*="reply"] .avatar,
form[action*="reply"] [class*="avatar"],
form[action*="reply"] [class*="profile"] {
  position: absolute !important;
  left: 16px !important;
  top: 16px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  z-index: 2 !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* 이미지 아바타가 들어간 경우 */
#comments form .avatar img,
#comments form [class*="avatar"] img,
#comments form [class*="profile"] img,
.comments form .avatar img,
.comments form [class*="avatar"] img,
.comments form [class*="profile"] img,
.comment-area form .avatar img,
.comment-area form [class*="avatar"] img,
.comment-area form [class*="profile"] img,
.comment-wrap form .avatar img,
.comment-wrap form [class*="avatar"] img,
.comment-wrap form [class*="profile"] img,
.comment-form form .avatar img,
.comment-form form [class*="avatar"] img,
.comment-form form [class*="profile"] img,
.comment-write form .avatar img,
.comment-write form [class*="avatar"] img,
.comment-write form [class*="profile"] img,
.board-comments form .avatar img,
.board-comments form [class*="avatar"] img,
.board-comments form [class*="profile"] img,
.post-comments form .avatar img,
.post-comments form [class*="avatar"] img,
.post-comments form [class*="profile"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* textarea를 아이콘 오른쪽으로 자연스럽게 정렬 */
#comments form textarea,
.comments form textarea,
.comment-area form textarea,
.comment-wrap form textarea,
.comment-form form textarea,
.comment-write form textarea,
.board-comments form textarea,
.post-comments form textarea,
form[action*="comment"] textarea,
form[action*="reply"] textarea,
textarea[name*="comment"],
textarea[name*="reply"] {
  width: calc(100% - 44px) !important;
  max-width: calc(100% - 44px) !important;
  margin-left: 44px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  height: 118px !important;
  min-height: 118px !important;
  max-height: 230px !important;
  padding: 13px 14px !important;
  border: 1px solid #dbe7ef !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* 버튼도 textarea 시작선과 맞춤 */
#comments form button,
#comments form input[type="submit"],
.comments form button,
.comments form input[type="submit"],
.comment-area form button,
.comment-area form input[type="submit"],
.comment-wrap form button,
.comment-wrap form input[type="submit"],
.comment-form form button,
.comment-form form input[type="submit"],
.comment-write form button,
.comment-write form input[type="submit"],
.board-comments form button,
.board-comments form input[type="submit"],
.post-comments form button,
.post-comments form input[type="submit"],
form[action*="comment"] button,
form[action*="comment"] input[type="submit"],
form[action*="reply"] button,
form[action*="reply"] input[type="submit"] {
  margin-left: 44px !important;
}

/* 댓글 없음 박스는 입력창과 자연스럽게 분리 */
#comments .empty,
.comments .empty,
.comment-area .empty,
.comment-wrap .empty,
.board-comments .empty,
.post-comments .empty,
.comment-empty,
.no-comment,
.no-comments,
.empty-comments,
[class*="comment"] [class*="empty"],
[class*="comment"] [class*="no-data"] {
  margin: 16px !important;
}

/* 혹시 form 전체가 flex/grid라 깨지는 경우 강제 안정화 */
#comments form > *,
.comments form > *,
.comment-area form > *,
.comment-wrap form > *,
.comment-form form > *,
.comment-write form > *,
.board-comments form > *,
.post-comments form > *,
form[action*="comment"] > *,
form[action*="reply"] > * {
  box-sizing: border-box !important;
}

/* 모바일에서는 아이콘을 더 작게 */
@media (max-width: 768px) {
  #comments form,
  .comments form,
  .comment-area form,
  .comment-wrap form,
  .comment-form form,
  .comment-write form,
  .board-comments form,
  .post-comments form,
  form[action*="comment"],
  form[action*="reply"] {
    padding: 12px !important;
  }

  #comments form .avatar,
  #comments form [class*="avatar"],
  #comments form [class*="profile"],
  .comments form .avatar,
  .comments form [class*="avatar"],
  .comments form [class*="profile"],
  .comment-area form .avatar,
  .comment-area form [class*="avatar"],
  .comment-area form [class*="profile"],
  .comment-wrap form .avatar,
  .comment-wrap form [class*="avatar"],
  .comment-wrap form [class*="profile"],
  .comment-form form .avatar,
  .comment-form form [class*="avatar"],
  .comment-form form [class*="profile"],
  .comment-write form .avatar,
  .comment-write form [class*="avatar"],
  .comment-write form [class*="profile"],
  .board-comments form .avatar,
  .board-comments form [class*="avatar"],
  .board-comments form [class*="profile"],
  .post-comments form .avatar,
  .post-comments form [class*="avatar"],
  .post-comments form [class*="profile"],
  form[action*="comment"] .avatar,
  form[action*="comment"] [class*="avatar"],
  form[action*="comment"] [class*="profile"],
  form[action*="reply"] .avatar,
  form[action*="reply"] [class*="avatar"],
  form[action*="reply"] [class*="profile"] {
    left: 12px !important;
    top: 13px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }

  #comments form textarea,
  .comments form textarea,
  .comment-area form textarea,
  .comment-wrap form textarea,
  .comment-form form textarea,
  .comment-write form textarea,
  .board-comments form textarea,
  .post-comments form textarea,
  form[action*="comment"] textarea,
  form[action*="reply"] textarea,
  textarea[name*="comment"],
  textarea[name*="reply"] {
    width: calc(100% - 38px) !important;
    max-width: calc(100% - 38px) !important;
    margin-left: 38px !important;
    height: 108px !important;
    min-height: 108px !important;
  }

  #comments form button,
  #comments form input[type="submit"],
  .comments form button,
  .comments form input[type="submit"],
  .comment-area form button,
  .comment-area form input[type="submit"],
  .comment-wrap form button,
  .comment-wrap form input[type="submit"],
  .comment-form form button,
  .comment-form form input[type="submit"],
  .comment-write form button,
  .comment-write form input[type="submit"],
  .board-comments form button,
  .board-comments form input[type="submit"],
  .post-comments form button,
  .post-comments form input[type="submit"],
  form[action*="comment"] button,
  form[action*="comment"] input[type="submit"],
  form[action*="reply"] button,
  form[action*="reply"] input[type="submit"] {
    margin-left: 38px !important;
  }
}