/*  소셜 층(좋아요 · 댓글)의 옷 — 값은 globals.css 의 :root 한 벌이고 이름도 그 결(.input · .btn · .hint · .who-nick · .empty)을 딛는다.
 *  드는 자리는 부품 둘(`LikeButton.tsx` · `Comments.tsx`)이다. 새 색을 안 짓는다 — 눌린 좋아요는 --lec 하나다. */

/* ── 좋아요 — 머리줄의 칩 줄에 .tag 와 나란히 선다(같은 높이 · 같은 둥글기) ───── */
.like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.like:hover {
  color: var(--ink);
  border-color: var(--dim2);
}
.like:disabled {
  cursor: default;
}
.like .heart {
  font-size: 13px;
  line-height: 1;
}
.like.on,
.like.on:hover {
  color: var(--lec);
  border-color: var(--lec);
}

/* ── 즐겨찾기(★) — 좋아요 곁에 서는 «나만의» 자국. 셈이 없다(남에게 안 보인다 · 0006_favorites.sql).
      금빛은 새 색이 아니라 --amber 다. 카드 위에 얹히는 것은 `.bare` 로 테를 벗는다. ───────── */
.fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.5;
  cursor: pointer;
  transition:
    color 0.12s,
    border-color 0.12s,
    background 0.12s;
}
.fav:hover {
  color: var(--ink);
  border-color: var(--dim2);
}
.fav:disabled {
  cursor: default;
}
.fav .star {
  font-size: 13px;
  line-height: 1;
}
.fav.on,
.fav.on:hover {
  color: var(--amber);
  border-color: var(--amber);
}

/*  카드 위의 별 — 그림 위에 얹히므로 어두운 판을 깔고 테를 벗는다. 즐겨찾기한 것은 늘 또렷하고
    안 한 것은 옅게 섰다가 카드에 손이 올라오면 또렷해진다(있는 줄 모르면 못 쓴다).  */
.fav.bare {
  padding: 0;
  width: 26px;
  height: 26px;
  border-color: transparent;
  background: rgba(6, 6, 7, 0.62);
  color: #d8d8de;
  opacity: 0.55;
}
.fav.bare .star {
  font-size: 15px;
}
.fav.bare:hover {
  opacity: 1;
  background: rgba(6, 6, 7, 0.85);
  border-color: transparent;
}
.fav.bare.on,
.fav.bare.on:hover {
  opacity: 1;
  color: var(--amber);
  border-color: transparent;
}

/* ── 댓글 ─────────────────────────────────────────────────────────────────── */
.cmts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmt-list {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cmt {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.cmt:first-child {
  border-top: 0;
}
.cmt-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.cmt-h .who-nick {
  font-size: 13px;
}
.cmt-h form {
  margin-left: auto;
}
.cmt-body {
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  font-size: 14px;
  color: var(--ink);
}
.cmt-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmt-form textarea.input {
  min-height: 72px;
}
.cmt-form .row {
  justify-content: flex-end;
}