/* ===== topic コメント欄（サイト配色：グレイッシュグリーン系） ===== */
/* --ink:#5F6969 / --soft:#EFF1F5 / --fill:#E1E3EA / --line:#D2D6DE */

.topic-comments {
  max-width: 720px;
  margin: 0 auto 64px;
  padding: 0 16px;
  box-sizing: border-box;
}
.topic-comments-title {
  font-size: 20px;
  font-weight: 700;
  color: #5F6969;
  border-left: 5px solid #5F6969;
  padding-left: 12px;
  margin: 0 0 24px;
}

/* コメント一覧 */
.topic-comment-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}
/* 最上位コメント＝カード枠（親コメントと返信をまとめて1つの枠に入れる） */
.topic-comment-list > li.comment {
  list-style: none;
  background: #EFF1F5;
  border: 1px solid #D2D6DE;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 18px;
}
/* コメント本体は個別の枠を持たない（枠は親liが持つ） */
.topic-comment-list .comment-body {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* 返信（子コメント）＝同じ枠の中で、左に縦線を付ける */
.topic-comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topic-comment-list .children > li.comment {
  list-style: none;
  margin: 14px 0 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid #B0B4BC;
}
.topic-comment-list .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.topic-comment-list .comment-author .avatar {
  border-radius: 50%;
}
.topic-comment-list .comment-author .fn {
  font-style: normal;
  font-weight: 700;
  color: #4A5252;
  font-size: 15px;
}
.topic-comment-list .comment-author .says { display: none; }
.topic-comment-list .comment-meta {
  font-size: 12px;
  color: #9AA0A4;
  margin-bottom: 8px;
}
.topic-comment-list .comment-meta a { color: #9AA0A4; text-decoration: none; }
.topic-comment-list .comment-content {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}
.topic-comment-list .comment-content p { margin: 0 0 .5em; }
.topic-comment-list .reply { margin-top: 6px; }
.topic-comment-list .comment-reply-link {
  display: inline-block;
  font-size: 13px;
  color: #5F6969;
  text-decoration: none;
  font-weight: 700;
}
.topic-comment-list .comment-awaiting-moderation {
  font-size: 12px;
  color: #7A8385;
}

.topic-comments-empty {
  color: #888;
  font-size: 14px;
  margin: 0 0 32px;
}

/* 投稿フォーム */
.comment-respond {
  background: #fff;
  border: 1px solid #D2D6DE;
  border-radius: 12px;
  padding: 24px;
}
.comment-reply-title {
  font-size: 18px;
  font-weight: 700;
  color: #5F6969;
  margin: 0 0 8px;
}
.topic-comment-notes {
  font-size: 12px;
  color: #9AA0A4;
  margin: 0 0 18px;
}
.comment-form p { margin: 0 0 16px; }
.comment-form label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #5F6969;
  margin-bottom: 6px;
}
.comment-form label .required { color: #5F6969; margin-left: 3px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #C7CCD4;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  background: #FBFCFD;
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: #5F6969;
  box-shadow: 0 0 0 3px rgba(95, 105, 105, .18);
}
.comment-form textarea { resize: vertical; }

.topic-comment-submit,
.comment-form .submit {
  display: inline-block;
  border: none;
  border-radius: 999px;
  background: #5F6969;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 13px 40px;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.topic-comment-submit:hover,
.comment-form .submit:hover {
  background: #4C5454;
  box-shadow: 0 4px 14px rgba(95, 105, 105, .3);
}

.topic-comments-closed {
  color: #888;
  font-size: 14px;
}

@media (max-width: 768px) {
  .topic-comments-title { font-size: 18px; }
  .comment-respond { padding: 18px; }
}