/* 민원 티켓: 회원용 "내 민원" 목록·작성 + 보드 상세 전용 스타일.
   보드의 컬럼/카드/모달 뼈대는 kanban.css 를 재사용한다. 색은 테마 토큰. */

/* 유형 배지 */
.sp-cat { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sp-cat-suggestion { background: color-mix(in srgb, var(--info-text) 18%, transparent); color: var(--info-text); }
.sp-cat-bug { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.sp-cat-report { background: color-mix(in srgb, var(--warn-text) 20%, transparent); color: var(--warn-text); }
.sp-cat-other { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }

/* 상태 배지 */
.sp-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sp-status-open { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.sp-status-in_progress { background: color-mix(in srgb, var(--info-text) 18%, transparent); color: var(--info-text); }
.sp-status-pending { background: color-mix(in srgb, var(--warn-text) 20%, transparent); color: var(--warn-text); }
.sp-status-resolved { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.sp-status-rejected { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }

/* ---------- 회원: 내 민원 목록 ---------- */
#support-tickets .heading { display: flex; align-items: flex-start; gap: 12px; }
#support-tickets .heading > div { flex: 1; min-width: 0; }
#support-tickets .heading [data-sp-new] { flex: 0 0 auto; white-space: nowrap; }
.sp-list { display: flex; flex-direction: column; gap: 10px; }
.sp-empty { color: var(--muted); text-align: center; padding: 60px 20px; border: 1px dashed var(--line); border-radius: 12px; }
.sp-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.sp-card.open { border-color: var(--accent); }
.sp-card-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; }
.sp-card-head:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sp-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sp-cnt { font-size: 12px; color: var(--muted); }
.sp-thread { border-top: 1px solid var(--line); padding: 14px 16px; }
.sp-body { white-space: pre-wrap; line-height: 1.6; font-size: 14px; margin-bottom: 14px; }
.sp-convo { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.sp-msg { border-radius: 10px; padding: 9px 12px; background: var(--surface-2, color-mix(in srgb, var(--ink) 5%, transparent)); }
.sp-msg.sp-officer { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sp-msg header { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.sp-msg header b { color: var(--ink); font-size: 13px; }
.sp-msg p { margin: 0; white-space: pre-wrap; line-height: 1.5; font-size: 14px; }
.sp-badge { font-size: 10px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.sp-reply { display: flex; gap: 8px; align-items: flex-end; }
.sp-reply textarea { flex: 1; resize: vertical; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.sp-form-status { min-height: 16px; font-size: 13px; color: var(--muted); margin: 6px 0 2px; }
.sp-form-status.err { color: var(--danger); }

/* ---------- 보드 상세(운영진) 전용 ---------- */
#support-board .sp-sub { font-size: 13px; color: var(--muted); margin: 2px 0 14px; }
#support-board .sp-body { white-space: pre-wrap; line-height: 1.6; font-size: 14px; margin: 0 0 14px; padding: 12px 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 10px; }
#support-board .kanban-comment.sp-officer { background: color-mix(in srgb, var(--accent) 10%, transparent); }

@media (max-width: 560px) {
  #support-tickets .heading { flex-direction: column; }
  #support-tickets .heading [data-sp-new] { width: 100%; }
  .sp-card-head { flex-wrap: wrap; }
  .sp-title { flex: 1 1 100%; order: -1; white-space: normal; }
}