/* web/assets/css/community.css — SC15 커뮤니티 화면(SP-COMM-8, T-14.6.7).
   디자인 토큰(styles.css :root)만 쓴다 — 색·간격·반경 리터럴 0(UT-NO-LITERAL). 셸이 auth.css 를
   읽지 않으므로 카드·버튼·입력은 필요한 만큼만 여기에 둔다(auth.css 와 같은 규약, import 없음).
   목록 행은 모바일 1열 카드 → 데스크톱(≥768px) 3칸 행. */

#community, #community .disclaimer { word-break: keep-all; }
#community .lede { color: var(--t3); font-size: var(--fs-sm); line-height: var(--lh-base); margin-top: var(--sp-3); }

/* ── 공통: 버튼·링크형 버튼·카드·오류 ── */
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
          min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4);
          background: var(--brand); color: var(--on-brand); border: 0; border-radius: var(--r-md);
          font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
          text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.cm-btn:hover { background: var(--brand-active); text-decoration: none; }
.cm-btn:disabled { opacity: .55; cursor: progress; }
.cm-btn--ghost { background: var(--bg-2); color: var(--t2); }
.cm-btn--ghost:hover { background: var(--bg-3); }
.cm-btn--sm { min-height: 36px; padding: var(--sp-1) var(--sp-3); }
.cm-link { background: none; border: 0; padding: var(--sp-1); color: var(--link); font: inherit;
           font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; }
.cm-link:disabled { color: var(--t4); cursor: default; text-decoration: none; }
.cm-card { margin-top: var(--sp-5); background: var(--bg-1); border: var(--bw) solid var(--border);
           border-radius: var(--r-lg); padding: var(--sp-5); display: grid; gap: var(--sp-4); justify-items: start;
           box-shadow: var(--shadow-1); }
.cm-error, .cm-form-error { background: var(--red-dim); color: var(--red); border-radius: var(--r-sm);
                            padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); margin-top: var(--sp-4); }
.cm-form-error a { color: var(--red); font-weight: var(--fw-medium); }
.cm-error button { margin-left: var(--sp-2); min-height: 32px; padding: var(--sp-1) var(--sp-3);
                   background: var(--bg-1); color: var(--t1); border: var(--bw) solid var(--border-strong);
                   border-radius: var(--r-sm); cursor: pointer; }
.cm-empty, .cm-notfound, .cm-hint { color: var(--t3); font-size: var(--fs-sm); margin-top: var(--sp-5); }
.cm-report-ok { background: var(--green-dim); color: var(--green); border-radius: var(--r-sm);
                padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* ── 목록 ── */
.cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.cm-cats { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.cm-cats a { display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-3);
             border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium);
             color: var(--t2); background: var(--bg-2); }
.cm-cats a:hover { background: var(--bg-3); text-decoration: none; }
.cm-cats a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.cm-sort { margin-left: auto; font-size: var(--fs-sm); color: var(--t3); display: inline-flex; align-items: center; gap: var(--sp-2); }
.cm-sort select { font: inherit; font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2);
                  border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm);
                  background: var(--bg-1); color: var(--t1); }
.cm-write { flex: 0 0 auto; }

.cm-rows { margin-top: var(--sp-4); border-top: var(--bw) solid var(--border); }
.cm-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-3) 0;
          border-bottom: var(--bw) solid var(--border); }
.cm-cat { display: inline-block; font-size: var(--fs-xs); color: var(--brand); background: var(--brand-tint);
          padding: 2px var(--sp-2); border-radius: var(--r-pill); white-space: nowrap; justify-self: start; }
.cm-title { color: var(--t1); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.cm-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
           font-size: var(--fs-xs); color: var(--t3); margin: 0; }
.cm-nick { color: var(--t2); font-weight: var(--fw-medium); }
.cm-badge { font-size: var(--fs-xs); padding: 1px var(--sp-2); border-radius: var(--r-pill);
            background: var(--badge-member-bg); color: var(--badge-member-fg); white-space: nowrap; }
.cm-comp { color: var(--link); }
.cm-comp-text { color: var(--t3); }
.cm-cnt, .cm-date { font-variant-numeric: tabular-nums; }
.cm-edited { color: var(--t4); }
.cm-more { width: 100%; margin-top: var(--sp-4); }

@media (min-width: 768px) {
  .cm-row { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); }
  .cm-row .cm-meta { justify-content: flex-end; }
}

/* ── 상세 ── */
.cm-back { display: inline-block; margin-top: var(--sp-5); font-size: var(--fs-sm); }
.cm-post { margin-top: var(--sp-4); background: var(--bg-1); border: var(--bw) solid var(--border);
           border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); }
.cm-post-title { font-size: var(--fs-h2); margin-top: var(--sp-2); overflow-wrap: anywhere; }
.cm-post-head .cm-meta { margin-top: var(--sp-3); }
.cm-body { margin-top: var(--sp-5); white-space: pre-wrap; overflow-wrap: anywhere;
           line-height: var(--lh-base); color: var(--t1); font-size: var(--fs-base); }
.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
              margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--bw) solid var(--border); }
.cm-like, .cm-like-cnt { display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-3);
                         border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium);
                         color: var(--t2); background: var(--bg-2); border: var(--bw) solid var(--border);
                         font-family: var(--font-sans); cursor: pointer; text-decoration: none; }
a.cm-like:hover { text-decoration: none; background: var(--bg-3); }
button.cm-like[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }
button.cm-like:disabled { opacity: .55; cursor: progress; }
.cm-like-cnt { cursor: default; }
.cm-own { margin-left: auto; display: inline-flex; gap: var(--sp-2); }
/* 신고 버튼·폼 슬롯은 부모 flex 행의 직접 자식이 된다(display:contents) — 폼이 열리면 한 줄을 통째로 차지하고,
   비어 있으면 자리를 차지하지 않는다. order 로 본인 수정/삭제 뒤에 둔다. */
.cm-report-wrap { display: contents; }
.cm-report-slot { flex-basis: 100%; order: 10; }
.cm-report-slot:empty { display: none; }
.cm-report-form { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-3);
                  background: var(--surface-soft); border-radius: var(--r-sm); max-width: 480px; }
.cm-form-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ── 댓글 ── */
.cm-comments { margin-top: var(--sp-6); }
.cm-comments h3 { font-size: var(--fs-lg); }
.cm-comment-list { margin-top: var(--sp-3); border-top: var(--bw) solid var(--border); }
.cm-comment { padding: var(--sp-3) 0; border-bottom: var(--bw) solid var(--border); }
.cm-c-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: var(--sp-1); color: var(--t1); font-size: var(--fs-sm); }
.cm-c-deleted { color: var(--t4); font-style: italic; }
.cm-c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.cm-c-more { width: 100%; margin-top: var(--sp-3); }
.cm-comment-form { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); justify-items: end; }
.cm-comment-form textarea { justify-self: stretch; }

/* ── 입력(작성·수정·댓글·신고 공통) ── */
.cm-form-title { font-size: var(--fs-h2); margin-top: var(--sp-5); }
.cm-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); background: var(--bg-1);
           border: var(--bw) solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); }
.cm-field { display: grid; gap: var(--sp-1); }
.cm-field-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--t2); }
.cm-form input[type="text"], .cm-form textarea, .cm-form select,
.cm-comment-form textarea, .cm-report-form textarea, .cm-report-form select {
  width: 100%; padding: 11px 12px; font-size: var(--fs-base); font-family: var(--font-sans);
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-1); color: var(--t1);
}
.cm-form textarea, .cm-comment-form textarea, .cm-report-form textarea { resize: vertical; min-height: 76px; line-height: var(--lh-base); }
.cm-form select:disabled { background: var(--bg-2); color: var(--t3); }
.cm-counter { display: block; text-align: right; font-size: var(--fs-xs); color: var(--t4); font-variant-numeric: tabular-nums; }
.cm-comp-results { margin-top: var(--sp-1); border: var(--bw) solid var(--border); border-radius: var(--r-sm);
                   overflow: hidden; max-height: 240px; overflow-y: auto; }
.cm-comp-results li { padding: 10px 12px; cursor: pointer; font-size: var(--fs-sm); color: var(--t1);
                      border-bottom: var(--bw) solid var(--border); }
.cm-comp-results li:last-child { border-bottom: 0; }
.cm-comp-results li:hover, .cm-comp-results li:focus { background: var(--brand-tint); }
.cm-comp-results li .ind { color: var(--t3); font-size: var(--fs-xs); margin-left: var(--sp-2); }
.cm-comp-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3);
                border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand); font-size: var(--fs-sm); }
.cm-chip-x { background: none; border: 0; color: var(--brand); font: inherit; font-size: var(--fs-base); cursor: pointer;
             padding: 0 var(--sp-1); line-height: 1; }