/* ============================================================
   comments.css — 글 아래 댓글 목록과 댓글 쓰기
   기준: docs/design-system.md — 선·여백·굵기, 입력칸은 1px 테두리
   ============================================================ */

.comments-area {
  max-width: var(--reading-max);
  margin: var(--section-md) auto 0;
  padding-top: var(--section-sm);
  border-top: 1px solid var(--c-line-1);
  background: transparent;
  color: var(--c-text-2);
}

.comments-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-text-1);
}

.comments-title span {
  margin-left: var(--sp-1);
  font-weight: var(--fw-regular);
  color: var(--c-text-3);
}

/* ---------- 댓글 목록 ---------- */
.comment-list {
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.comment-list li {
  margin: 0;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-line-1);
}

.comment-author {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text-1);
}

.comment-meta {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.comment-content {
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--c-text-2);
}

/* ---------- 댓글 쓰기 ---------- */
.comment-respond {
  margin-top: var(--sp-10);
  padding: 0;
  background: none;
  border: 0;
}

.comment-reply-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-text-1);
}

:is(.comment-notes, .logged-in-as) {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.logged-in-as a {
  color: var(--c-link);
  text-decoration: none;
}

.logged-in-as a:hover {
  text-decoration: underline;
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-1);
  background: var(--c-bg);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.comment-form :is(input, textarea):focus {
  outline: none;
  border-color: var(--c-link);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.comment-form input[type="submit"],
.form-submit input[type="submit"] {
  height: 44px;
  padding: 0 var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--c-text-1);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity var(--motion-fast) ease;
}

.comment-form input[type="submit"]:hover {
  opacity: 0.85;
}

@media (max-width: 640px) {
  .comments-area {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}