Igniplex 테마 댓글 구조 오류 수정

테마 변경시 똑같이 추가하기

1) startSide / endSide 값을 좌→우로 바로잡기 (한 번만 수정)

테마 > HTML 편집에서 검색(Cmd/Ctrl + F)으로 다음 부분을 찾고:

→ 아래처럼 바꿔 저장하세요.

이 한 줄 교체만으로 시작/끝 기준이 LTR(좌→우)로 돌아가 댓글 박스의 우측 치우침이 해소

테마 → HTML 편집 → </b:skin> 바로 위
혹은 사용자 CSS(custom CSS) 영역에 아래 코드 그대로 복사해 넣으세요.


/* ===== Igniplex 댓글 위치/줄바꿈/반응형 최종 패치 ===== */
/* 기본 정렬 · 우측 치우침 방지 */
#comments, .comments, .comment-thread {
  direction: ltr !important;
  float: none !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
  margin: 1.5rem auto !important;
  clear: both !important;
}

/* 본문 세로낙하 방지 + 가독성 */
.comment-inner, .comment-content {
  display: block !important;
  min-width: 0 !important;       /* flex 수축 시 폭 인지 */
  width: 100% !important;
  word-break: keep-all !important;/* 한글 단위 줄바꿈 */
  overflow-wrap: break-word !important;
  white-space: normal !important;
  line-height: 1.7 !important;
  writing-mode: horizontal-tb !important;
}

/* 아바타/메타 정렬 */
.comment-avatar {
  float: left !important;
  margin-right: 12px !important;
  width: 50px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
}

/* 리스트 항목 정렬 안정화 */
.comments > li, .comment-replies > li {
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}

/* 우측 정렬 상속 차단(안전) */
.comment-actions, .comment-inner, .comment-content, .comment-replies {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* 입력창(폼) 폭/가독성 */
.comments .comment-form, .comment-form {
  margin: 1rem 0 1.5rem !important;
  padding: 0 !important;
}
.comments textarea, .comments input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.6 !important;
}

/* 긴 링크/이미지로 레이아웃 깨짐 방지 */
#comments img { max-width: 100% !important; height: auto !important; }
#comments a { word-break: break-all; }

/* ===== 반응형(모바일) 최적화 ===== */
@media (max-width: 768px) {
  #comments { margin: 1.25rem auto !important; }
  .comment-avatar {
    width: 42px !important; height: 42px !important; margin-right: 10px !important;
  }
  .comment-inner, .comment-content { line-height: 1.65 !important; font-size: 15.5px; }
  .comment-actions { margin-top: .25rem !important; }
}

@media (max-width: 480px) {
  .comment-avatar {
    width: 34px !important; height: 34px !important; margin-right: 8px !important;
  }
  .comment-inner, .comment-content { font-size: 15px; line-height: 1.6 !important; }
  /* 대댓글 들여쓰기 가이드(선택): 필요 없으면 삭제 */
  .comment-replies { border-left: 2px solid var(--border, #e5e7eb); padding-left: .75rem; }
  .comments textarea, .comments input[type="text"] { font-size: 15px; }
}

/* 다크모드 대비 링크 대비 강화(선택) */
@media (prefers-color-scheme: dark) {
  #comments a { text-decoration: underline; }
}