/* engagement.css — 조회수/댓글 배지 · 참여 지표 · 댓글 UI.
   showcase 계열 페이지(랜딩·아카이브·상세)에서 공용. */

/* ── 목록 배지 (랜딩 최근 목록 · 아카이브 목록) ── */
.engagement-badge {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-size: .72rem;
  color: #8a8172;
  letter-spacing: .01em;
  white-space: nowrap;
}
.engagement-badge__item { display: inline-flex; align-items: center; }
.engagement-badge__item + .engagement-badge__item::before {
  content: "·";
  margin-right: .5rem;
  color: #c4b7a4;
}
/* 랜딩 최근 목록: 그리드(날짜·본문·끝) 3칸 구조라, 배지+화살표를 한 칸(.recent-list__end)에
   함께 담아 그리드를 깨지 않는다. 4번째 자식으로 넣으면 그리드가 어긋나 배지가 안 보였다. */
.recent-list__end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  white-space: nowrap;
}

/* ── 상세 페이지 참여 지표 ── */
.engagement-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  font-size: .82rem;
  color: #6f6656;
}
.engagement-stats__item { display: inline-flex; gap: .3rem; }
.engagement-stats__item b { color: #1a2233; font-weight: 700; }

/* ── 댓글 ── */
.comments {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e3ddd0;
}
.comments__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a2233;
  margin: 0 0 1.25rem;
}
.comments__title span { color: #b8935a; }

.comments__list { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.comments__empty { color: #9aa3af; font-size: .9rem; padding: .75rem 0; }

.comment { padding: .9rem 0; border-bottom: 1px solid #ece6d9; }
.comment__head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .35rem;
}
.comment__nick { font-weight: 700; font-size: .9rem; color: #2a3446; }
.comment__time { font-size: .72rem; color: #a49a86; }
.comment__body {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: #3d4453;
  white-space: pre-wrap;      /* 줄바꿈 보존, 태그 실행은 없음(textContent) */
  word-break: break-word;
}

/* ── 작성 폼 ── */
.comments__form { display: block; }
.comments__row { margin-bottom: .6rem; }
.comments__nick {
  width: 220px;
  max-width: 100%;
  padding: .55rem .7rem;
  border: 1px solid #d8cfbb;
  border-radius: 6px;
  background: #fffdf8;
  font-size: .9rem;
}
/* 허니팟 — 화면 밖으로 숨긴다(사람에겐 안 보이고 봇만 채운다) */
.comments__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}
.comments__body {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #d8cfbb;
  border-radius: 6px;
  background: #fffdf8;
  font-size: .92rem;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}
.comments__nick:focus, .comments__body:focus {
  outline: none;
  border-color: #b8935a;
  box-shadow: 0 0 0 3px rgba(184, 147, 90, .15);
}
.comments__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .7rem;
}
.comments__submit { margin-left: auto; }
.comments__msg { font-size: .82rem; color: #6f6656; }
.comments__msg--ok { color: #2f7d4f; }
.comments__msg--err { color: #c0392b; }

/* ── 브리핑 본문 안 개별 기사 참여 바 ── */
.brief-item__engage {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .55rem;
  font-size: .78rem;
  color: #8a8172;
}
.brief-item__cmt {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .1rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  color: #6f6656;
}
.brief-item__cmt:hover { color: #b8935a; }
.brief-item__cmt[aria-expanded="true"] { color: #b8935a; font-weight: 600; }
.brief-item__clk { color: #9a917f; }
.brief-item__clk [data-clk-count],
.brief-item__cmt [data-cmt-count] { font-weight: 700; color: #5a5344; }

/* 인라인 댓글 스레드 */
.brief-item__thread {
  margin-top: .75rem;
  padding: .9rem 1rem;
  background: #f3efe6;
  border-left: 2px solid #d8cfbb;
  border-radius: 4px;
}
.brief-item__thread .comments__list { margin-bottom: 1rem; }
.brief-item__thread .comment { padding: .6rem 0; }
.brief-item__thread .comments__body { background: #fffdf8; }