/* ============================================================
   숨터 — 카페 커뮤니티 (반응 평결바 + 댓글) 스타일
   maison 토큰을 그대로 따르고, 카페 시그니처 색(--accent)을 입힙니다.
   스크롤 성능을 위해 mask-image / filter:blur 는 사용하지 않습니다.
   ============================================================ */

.sc-reactions,
.sc-community{
  --sc-accent: var(--accent, var(--gold-3, #C85A3E));
  --sc-accent-light: var(--accent-light, #F4D2BB);
  --sc-accent-dark: var(--accent-dark, #2A1F15);
  --sc-paper: var(--paper, #FBF6EA);
  --sc-card: var(--card, #FFFDF7);
  --sc-ink: var(--ink, #241A12);
  --sc-ink-2: var(--ink-2, #5B4A38);
  --sc-ink-3: var(--ink-3, #8C7A62);
  --sc-line: var(--line, rgba(120,90,40,.14));
  --sc-line-2: var(--line-2, rgba(120,90,40,.24));
  --sc-r: 22px;
  --sc-ease: var(--ease, cubic-bezier(.22,.61,.36,1));
}
.sc-community{ margin-top:18px; margin-bottom:8px; }
.sc-reactions{ margin:6px 0 2px; text-align:center; }
.sc-reactions *,
.sc-community *{ box-sizing: border-box; }

/* ───────── 공통 버튼 ───────── */
.sc-btn{
  appearance:none; border:0; cursor:pointer; font-family:var(--sans);
  font-weight:800; font-size:13.5px; letter-spacing:-.02em; line-height:1;
  padding:11px 18px; border-radius:999px; transition:transform .28s var(--sc-ease), box-shadow .28s var(--sc-ease), background .2s, color .2s;
}
.sc-btn-solid{
  color:#fff;
  background:linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 64%, #5a2c14));
  box-shadow:0 8px 22px color-mix(in srgb, var(--sc-accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.sc-btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 30px color-mix(in srgb, var(--sc-accent) 36%, transparent), inset 0 1px 0 rgba(255,255,255,.3); }
.sc-btn-solid:active{ transform:translateY(0); }
.sc-btn-solid:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.sc-btn-ghost{
  color:var(--sc-ink-2); background:var(--sc-card);
  box-shadow:inset 0 0 0 1px var(--sc-line-2), var(--shadow-s, 0 1px 0 rgba(36,26,18,.04));
}
.sc-btn-ghost:hover{ transform:translateY(-1px); color:var(--sc-ink); box-shadow:inset 0 0 0 1px var(--sc-accent), var(--shadow-s, 0 1px 0 rgba(36,26,18,.04)); }

/* ============================================================
   카페 반응 버튼 (박스 없이, 가운데 정렬, 컴팩트)
   ============================================================ */
.sc-react-row{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.sc-react{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:999px; text-decoration:none;
  background:var(--sc-card); border:1.5px solid var(--sc-line-2);
  box-shadow:var(--shadow-s, 0 1px 0 rgba(36,26,18,.04));
  font-family:var(--sans); line-height:1;
  transition:transform .25s var(--sc-ease), box-shadow .25s var(--sc-ease), border-color .2s, background .2s, color .2s;
}
.sc-react:hover{ transform:translateY(-2px); border-color:var(--sc-accent); box-shadow:0 6px 16px rgba(76,55,28,.12); }
.sc-react:active{ transform:translateY(0); }
.sc-react-emoji{ font-size:16px; line-height:1; }
.sc-react-text{ font-weight:800; font-size:13.5px; color:var(--sc-ink); letter-spacing:-.02em; }
.sc-react-count{ font-variant-numeric:tabular-nums; font-weight:800; font-size:12.5px; color:var(--sc-ink-3); min-width:1ch; }
.sc-react-up.is-active{
  border-color:transparent; color:#fff;
  background:linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 62%, #5a2c14));
  box-shadow:0 8px 20px color-mix(in srgb, var(--sc-accent) 30%, transparent);
}
.sc-react-up.is-active .sc-react-text,
.sc-react-up.is-active .sc-react-count{ color:#fff; }
.sc-react-down.is-active{
  border-color:transparent; color:#fff;
  background:linear-gradient(135deg, #5B4A38, #2A1F15);
  box-shadow:0 8px 20px rgba(36,26,18,.26);
}
.sc-react-down.is-active .sc-react-text,
.sc-react-down.is-active .sc-react-count{ color:#fff; }
.sc-react.is-bump{ animation:sc-bump .42s var(--sc-ease); }
@keyframes sc-bump{ 0%{transform:scale(1)} 35%{transform:scale(1.06)} 100%{transform:scale(1)} }

@media (prefers-reduced-motion: reduce){
  .sc-react, .sc-btn, .sc-vote-btn{ transition:none; }
  .sc-react.is-bump, .sc-vote-btn.is-bump{ animation:none; }
}

/* ============================================================
   댓글
   ============================================================ */
.sc-comments{ margin-top:26px; }
.sc-comments-head{ display:flex; align-items:center; gap:10px; margin:0 2px 14px; }
.sc-comments-title{
  display:flex; align-items:baseline; gap:8px; margin:0;
  font-size:clamp(18px,2.2vw,22px); font-weight:900; letter-spacing:-.03em; color:var(--sc-ink);
}
.sc-comments-count{ font-family:var(--serif, Georgia, serif); font-size:18px; font-weight:800; color:var(--sc-accent); font-variant-numeric:tabular-nums; }

/* 작성 박스 */
.sc-composer{
  display:flex; gap:14px; padding:20px; margin-bottom:22px;
  border-radius:18px; background:var(--sc-card); border:1px solid var(--sc-line);
  box-shadow:var(--shadow-s, 0 1px 0 rgba(36,26,18,.04));
}
.sc-composer-avatar{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; font-size:17px; color:#fff;
  background:linear-gradient(140deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 55%, #5a2c14));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.sc-composer-main{ flex:1 1 auto; min-width:0; }
.sc-composer-input,
.sc-edit-input{
  width:100%; resize:vertical; min-height:64px;
  font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--sc-ink);
  padding:12px 14px; border-radius:13px; background:var(--sc-paper);
  border:1.5px solid var(--sc-line-2); transition:border-color .2s, box-shadow .2s, background .2s;
}
.sc-composer-input::placeholder{ color:var(--sc-ink-3); }
.sc-composer-input:focus,
.sc-edit-input:focus{
  outline:none; background:#fff; border-color:var(--sc-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sc-accent) 18%, transparent);
}
.sc-composer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; flex-wrap:wrap;
}
.sc-captcha{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 9px 7px 13px; border-radius:11px;
  background:color-mix(in srgb, var(--sc-accent-light) 32%, var(--sc-paper));
  border:1px dashed color-mix(in srgb, var(--sc-accent) 42%, transparent);
}
.sc-captcha-q{ font-family:var(--serif, Georgia, serif); font-weight:800; font-size:14px; color:var(--sc-ink-2); letter-spacing:.02em; user-select:none; }
.sc-captcha-a{
  width:62px; font-family:var(--sans); font-size:14px; font-weight:700; text-align:center; color:var(--sc-ink);
  padding:7px 8px; border-radius:8px; border:1.5px solid var(--sc-line-2); background:#fff;
}
.sc-captcha-a:focus{ outline:none; border-color:var(--sc-accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--sc-accent) 18%, transparent); }
.sc-composer-right{ display:flex; align-items:center; gap:13px; margin-left:auto; }
.sc-counter{ font-size:12px; color:var(--sc-ink-3); font-weight:700; font-variant-numeric:tabular-nums; }
.sc-composer-msg{ margin:10px 0 0; font-size:12.5px; font-weight:700; color:var(--sc-ink-2); }
.sc-composer-msg.is-err{ color:#C0392B; }

.sc-composer-locked{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px 22px; margin-bottom:22px; border-radius:18px;
  background:
    radial-gradient(100% 140% at 0% 0%, color-mix(in srgb, var(--sc-accent-light) 40%, transparent), transparent 60%),
    var(--sc-card);
  border:1px dashed var(--sc-line-2);
}
.sc-composer-locked p{ margin:0; font-size:14px; font-weight:700; color:var(--sc-ink-2); }

/* 모더레이션 안내 */
.sc-comments-notice{
  margin:0 2px 20px; padding:9px 13px; border-radius:10px;
  font-size:12.5px; font-weight:700; line-height:1.5; color:var(--sc-ink-3);
  background:color-mix(in srgb, var(--sc-ink) 4%, var(--sc-paper));
  border:1px solid var(--sc-line);
}

/* 목록 / 구역 라벨 */
.sc-list{ display:flex; flex-direction:column; gap:0; }
.sc-best-zone{ margin-bottom:10px; }
.sc-zone-label{
  display:flex; align-items:center; gap:8px; margin:4px 2px 14px;
  font-family:var(--serif, Georgia, serif); font-weight:800; font-size:14px; letter-spacing:.04em;
  color:var(--sc-accent);
}
.sc-zone-star{ font-size:15px; }
.sc-zone-label--muted{ color:var(--sc-ink-3); margin-top:22px; }
.sc-zone-count{ font-weight:800; color:var(--sc-ink-2); }

/* 댓글 카드 */
.sc-comment{
  position:relative;
  padding:18px 20px; margin-bottom:14px;
  border-radius:16px; background:var(--sc-card);
  border:1px solid var(--sc-line);
  box-shadow:var(--shadow-s, 0 1px 0 rgba(36,26,18,.04));
  animation:sc-fade .34s var(--sc-ease) both;
}
@keyframes sc-fade{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .sc-comment{ animation:none; } }

/* 베스트 댓글 */
.sc-comment--best{
  border:0; padding:2px;
  background:linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 45%, #e7a14a));
  box-shadow:0 14px 34px color-mix(in srgb, var(--sc-accent) 22%, transparent);
}
.sc-comment--best > *{ position:relative; }
.sc-comment--best::after{
  content:""; position:absolute; inset:2px; border-radius:14px; background:var(--sc-card); z-index:0;
}
.sc-comment--best > .sc-comment-head,
.sc-comment--best > .sc-body,
.sc-comment--best > .sc-comment-foot,
.sc-comment--best > .sc-edit-form{ z-index:1; }
.sc-comment--best{ padding-left:2px; }
.sc-comment--best .sc-comment-head,
.sc-comment--best .sc-body,
.sc-comment--best .sc-comment-foot{ padding-left:18px; padding-right:18px; }
.sc-comment--best .sc-comment-head{ padding-top:16px; }
.sc-comment--best .sc-comment-foot{ padding-bottom:16px; }
.sc-best-ribbon{
  position:absolute; z-index:2; top:14px; right:-4px;
  padding:5px 14px 5px 12px; font-family:var(--serif, Georgia, serif); font-weight:800; font-size:11px;
  letter-spacing:.12em; color:#fff;
  background:linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 55%, #5a2c14));
  border-radius:4px 0 0 4px; box-shadow:0 6px 14px color-mix(in srgb, var(--sc-accent) 34%, transparent);
}
.sc-best-ribbon::after{
  content:""; position:absolute; right:0; bottom:-6px; border-width:6px 4px 0 0;
  border-style:solid; border-color:color-mix(in srgb, var(--sc-accent) 55%, #3a1c0c) transparent transparent transparent;
}

/* 헤더: 아바타 + 닉네임 + 등급 */
.sc-comment-head{ display:flex; align-items:flex-start; gap:12px; }
.sc-avatar{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; font-size:16px; color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); background:var(--sc-ink-3);
}
.sc-id{ flex:1 1 auto; min-width:0; }
.sc-id-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sc-name{ font-weight:900; font-size:14.5px; color:var(--sc-ink); letter-spacing:-.02em; }
.sc-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:-.01em;
  background:color-mix(in srgb, var(--sc-ink) 6%, var(--sc-paper)); color:var(--sc-ink-2);
  box-shadow:inset 0 0 0 1px var(--sc-line);
}
.sc-chip--admin{
  color:#fff; background:linear-gradient(135deg, #C0392B, #8E2A20); box-shadow:none;
}
.sc-grade-emoji{ font-size:12px; }
.sc-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; font-size:12px; color:var(--sc-ink-3); font-weight:600; }
.sc-date{ font-variant-numeric:tabular-nums; }
.sc-meta .sc-rel::before{ content:"·"; margin-right:8px; color:var(--sc-ink-3); opacity:.6; }
.sc-edited{ color:var(--sc-ink-3); opacity:.85; }
.sc-edited::before{ content:"·"; margin-right:8px; opacity:.6; }
.sc-ip{
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:11px; font-weight:700;
  color:#8E2A20; padding:2px 7px; border-radius:6px;
  background:color-mix(in srgb, #C0392B 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, #C0392B 22%, transparent);
}

/* 본문 */
.sc-body{
  margin:12px 0 0; font-size:14.5px; line-height:1.72; color:var(--sc-ink); font-weight:500;
  word-break:break-word; overflow-wrap:anywhere; white-space:normal;
}

/* 등급별 색 테마 (아바타 + 칩) */
.sc-grade--sprout.sc-avatar{ background:linear-gradient(140deg,#52A874,#2F7D4F); }
.sc-grade--spark.sc-avatar{ background:linear-gradient(140deg,#E0B23E,#C8941F); }
.sc-grade--home.sc-avatar{ background:linear-gradient(140deg,#D98A52,#C2683C); }
.sc-grade--gem.sc-avatar{ background:linear-gradient(140deg,#48A0B2,#2C7A8C); }
.sc-chip.sc-grade--sprout{ color:#2F7D4F; background:#E3F2E8; box-shadow:inset 0 0 0 1px rgba(47,125,79,.22); }
.sc-chip.sc-grade--spark{ color:#A9791A; background:#FBF0D6; box-shadow:inset 0 0 0 1px rgba(200,148,31,.26); }
.sc-chip.sc-grade--home{ color:#B0572E; background:#F6E2D5; box-shadow:inset 0 0 0 1px rgba(194,104,60,.26); }
.sc-chip.sc-grade--gem{ color:#2C7A8C; background:#D9EEF1; box-shadow:inset 0 0 0 1px rgba(44,122,140,.26); }

/* 수정 폼 */
.sc-edit-form{ margin-top:12px; }
.sc-edit-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:10px; }
.sc-edit-actions .sc-btn{ padding:9px 16px; font-size:12.5px; }

/* 하단: 투표 + 액션 */
.sc-comment-foot{ display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.sc-vote{ display:inline-flex; gap:8px; }
.sc-vote-btn{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px; font-family:var(--sans); font-weight:800; font-size:12.5px;
  background:var(--sc-paper); color:var(--sc-ink-2); border:1px solid var(--sc-line-2);
  transition:transform .25s var(--sc-ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.sc-vote-btn:hover{ transform:translateY(-1px); border-color:var(--sc-accent); color:var(--sc-ink); }
.sc-vote-emoji{ font-size:14px; line-height:1; }
.sc-vote-count{ font-variant-numeric:tabular-nums; min-width:1ch; }
.sc-vote-up.is-active{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--sc-accent), color-mix(in srgb, var(--sc-accent) 62%, #5a2c14));
  box-shadow:0 6px 16px color-mix(in srgb, var(--sc-accent) 30%, transparent);
}
.sc-vote-down.is-active{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#6B5947,#3A2D20);
  box-shadow:0 6px 16px rgba(36,26,18,.22);
}
.sc-vote-btn.is-bump{ animation:sc-bump .42s var(--sc-ease); }

.sc-actions{ display:inline-flex; gap:6px; margin-left:auto; }
.sc-link-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--sc-ink-3);
  padding:6px 9px; border-radius:8px; transition:color .2s, background .2s;
}
.sc-link-btn:hover{ color:var(--sc-ink); background:color-mix(in srgb, var(--sc-ink) 5%, transparent); }
.sc-link-danger:hover{ color:#C0392B; background:color-mix(in srgb, #C0392B 8%, transparent); }

/* ───────── 대댓글(답글) ───────── */
.sc-reply-toggle{ color:var(--sc-accent); font-weight:800; }
.sc-reply-toggle:hover{ color:var(--sc-accent); background:color-mix(in srgb, var(--sc-accent) 8%, transparent); }
.sc-replies{
  margin:14px 0 2px; padding-left:16px;
  border-left:2px solid color-mix(in srgb, var(--sc-accent) 26%, var(--sc-line-2));
  display:flex; flex-direction:column;
}
.sc-reply{
  position:relative; padding:13px 15px; margin-bottom:10px;
  border-radius:13px; background:color-mix(in srgb, var(--sc-paper) 55%, #fff);
  border:1px solid var(--sc-line);
  animation:sc-fade .3s var(--sc-ease) both;
}
.sc-reply:last-child{ margin-bottom:0; }
.sc-reply .sc-avatar{ width:34px; height:34px; font-size:14px; }
.sc-reply .sc-name{ font-size:13.5px; }
.sc-reply .sc-body{ margin-top:9px; font-size:14px; line-height:1.66; }
.sc-reply .sc-comment-foot{ margin-top:11px; }
.sc-reply .sc-vote-btn{ padding:6px 11px; font-size:12px; }
.sc-reply-form{
  margin:12px 0 6px; padding-left:16px;
  border-left:2px solid color-mix(in srgb, var(--sc-accent) 26%, var(--sc-line-2));
}
.sc-reply-input{
  width:100%; resize:vertical; min-height:52px;
  font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--sc-ink);
  padding:10px 12px; border-radius:11px; background:var(--sc-paper);
  border:1.5px solid var(--sc-line-2); transition:border-color .2s, box-shadow .2s, background .2s;
}
.sc-reply-input::placeholder{ color:var(--sc-ink-3); }
.sc-reply-input:focus{ outline:none; background:#fff; border-color:var(--sc-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--sc-accent) 18%, transparent); }
.sc-reply-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:9px; }
.sc-reply-actions .sc-btn{ padding:8px 15px; font-size:12.5px; }
@media (prefers-reduced-motion: reduce){ .sc-reply{ animation:none; } }
/* 베스트 댓글 내부의 답글 영역 (그라데이션 테두리 위로) */
.sc-comment--best > .sc-replies,
.sc-comment--best > .sc-reply-form{ position:relative; z-index:1; margin-left:18px; margin-right:18px; }
.sc-comment--best > .sc-replies{ padding-bottom:4px; }
.sc-comment--best > .sc-reply-form{ padding-bottom:14px; }

/* 빈 상태 */
.sc-empty{
  text-align:center; padding:48px 20px;
  border-radius:18px; border:1.5px dashed var(--sc-line-2);
  background:color-mix(in srgb, var(--sc-paper) 60%, #fff);
}
.sc-empty-mark{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; font-size:26px; color:var(--sc-accent);
  background:color-mix(in srgb, var(--sc-accent-light) 36%, var(--sc-paper));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sc-accent) 26%, transparent);
}
.sc-empty-title{ margin:0; font-weight:900; font-size:16px; color:var(--sc-ink); letter-spacing:-.02em; }
.sc-empty-sub{ margin:7px 0 0; font-size:13px; color:var(--sc-ink-3); font-weight:600; }

/* 토스트 */
.sc-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 14px);
  z-index:1000; pointer-events:none; opacity:0;
  padding:12px 20px; border-radius:999px;
  font-family:var(--sans); font-weight:800; font-size:13.5px; color:#fff; letter-spacing:-.01em;
  background:linear-gradient(135deg, #33271B, #241A12);
  box-shadow:0 16px 40px rgba(36,26,18,.34);
  transition:opacity .3s var(--sc-ease), transform .3s var(--sc-ease);
  max-width:90vw;
}
.sc-toast.is-show{ opacity:1; transform:translate(-50%, 0); }
.sc-toast.is-err{ background:linear-gradient(135deg, #C0392B, #8E2A20); }

/* 관리자 설치 안내 */
.sc-install-note{
  margin:18px 0; padding:14px 18px; border-radius:14px;
  background:#FFF6E6; border:1px solid #F2D49A; color:#7A5A12; font-size:13.5px; font-weight:700;
}
.sc-install-note a{ color:#B0572E; font-weight:800; }

/* 반응형 */
@media (max-width:640px){
  .sc-composer{ flex-direction:column; }
  .sc-composer-avatar{ display:none; }
  .sc-composer-right{ width:100%; justify-content:space-between; }
  .sc-comment-foot{ gap:10px; }
  .sc-replies, .sc-reply-form{ padding-left:12px; }
  .sc-comment--best > .sc-replies,
  .sc-comment--best > .sc-reply-form{ margin-left:14px; margin-right:14px; }
}