/* 고객센터 — 문의 · 기능개선요청 (2026-08-10)
   ⚠개발규칙 1: 뷰에 인라인 <style> 금지. 이 화면의 스타일은 전부 여기 모은다.
   문의·기능개선요청이 같은 마크업을 쓰므로 클래스도 하나(.stk-*)로 공유한다. */

.stk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stk-title { font-size: 18px; font-weight: 600; color: #111827; margin: 0; }
.stk-desc { font-size: 12px; color: #6b7280; margin: 4px 0 0; }
.stk-new-btn {
  margin-left: auto; padding: 7px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: #3e6187; color: #fff; font-size: 13px; font-weight: 600;
}
.stk-new-btn:hover { background: #35547a; }

/* 안내 박스 — 정보박스 표준(components 가이드) */
.stk-info {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  padding: 12px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
}
.stk-info p { margin: 0; font-size: 12.5px; color: #1e40af; line-height: 1.6; }

/* 목록 */
.stk-list { display: flex; flex-direction: column; gap: 8px; }
.stk-empty { padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 13px; }

.stk-card {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 13px 15px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  cursor: pointer; font: inherit;
}
.stk-card:hover { border-color: #cbd5e1; background: #f8fafc; }
.stk-card-main { flex: 1; min-width: 0; }
.stk-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.stk-no { font-family: monospace; font-size: 11.5px; color: #94a3b8; font-weight: 600; }
.stk-card-title {
  font-size: 13.5px; font-weight: 600; color: #111827;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stk-card-meta { font-size: 11.5px; color: #94a3b8; display: flex; gap: 6px; flex-wrap: wrap; }
.stk-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.stk-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* 미읽음 — 답변이 달렸는데 아직 안 본 상태. 목록에서 즉시 눈에 띄어야 한다. */
.stk-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #dc2626; flex-shrink: 0;
}

/* 대화 스레드 */
.stk-thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.stk-msg { display: flex; }
.stk-msg--member { justify-content: flex-end; }
.stk-msg--agent { justify-content: flex-start; }
.stk-bubble {
  max-width: 78%; padding: 9px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.stk-msg--member .stk-bubble { background: #3e6187; color: #fff; border-bottom-right-radius: 4px; }
.stk-msg--agent .stk-bubble { background: #f1f5f9; color: #0f172a; border-bottom-left-radius: 4px; }
.stk-msg-meta { font-size: 10.5px; color: #94a3b8; margin-top: 3px; }
.stk-msg--member .stk-msg-meta { text-align: right; }

/* 상태 변경 줄 — 대화 흐름 안에 시스템 이벤트로 표시 */
.stk-sys { align-self: center; padding: 3px 12px; background: #f8fafc; border: 1px solid #e2e8f0;
           border-radius: 12px; font-size: 11px; color: #64748b; }

/* 원문 카드 */
.stk-origin { padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 12px; }
.stk-origin-title { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
.stk-origin-body { font-size: 13px; color: #334155; line-height: 1.7; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* 입력 */
.stk-form { margin-top: 12px; }
.stk-input, .stk-textarea {
  width: 100%; padding: 8px 11px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 13px; background: #fff; color: #111827; font-family: inherit;
}
.stk-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.stk-label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; }
.stk-field { margin-bottom: 12px; }
.stk-closed-note {
  padding: 10px 12px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 12.5px; color: #475569; text-align: center;
}

/* 등록 모달 — height 90vh 라 본문이 위에 몰리지 않게 세로로 채운다 */
.stk-new-form { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.stk-new-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 18px; }
.stk-field-grow { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.stk-field-grow .stk-textarea { flex: 1; min-height: 120px; resize: none; }

/* 진행 단계(.ord-stepper 공용) — 상세 모달 상단 고정 */
.stk-steps { margin-bottom: 12px; }

/* ⭐입력 카드 — 행동 하나 = 카드 하나 = 버튼 하나.
   상태 변경과 답변이 한 폼에 섞여 「이 버튼이 무엇을 하는가」가 안 보이던 것을 나눴다. */
.stk-panel {
  margin-top: 12px; padding: 12px 14px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
}
.stk-panel-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.stk-panel-title { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.stk-panel-hint { font-size: 11.5px; color: #94a3b8; }
.stk-panel-row { display: flex; gap: 8px; flex-wrap: wrap; }
.stk-panel-row .stk-input { flex: 1 1 180px; }
.stk-status-select { flex: 0 0 160px; }
.stk-panel-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.stk-btn {
  padding: 6px 15px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
}
.stk-btn-primary { background: #3e6187; color: #fff; }
.stk-btn-primary:hover { background: #35547a; }
.stk-btn-outline { background: #fff; color: #3e6187; border-color: #c7d2e0; }
.stk-btn-outline:hover { background: #f1f5f9; }
.stk-btn[disabled] { opacity: .6; cursor: default; }
.stk-panel .stk-textarea { resize: vertical; min-height: 70px; }

/* 운영자 화면 */
.stk-adm-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.stk-chip {
  padding: 4px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; text-decoration: none;
}
.stk-chip:hover { background: #f8fafc; }
.stk-chip.is-on { background: #3e6187; border-color: #3e6187; color: #fff; }
.stk-chip-alert.is-on { background: #dc2626; border-color: #dc2626; }
.stk-adm-search { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.stk-adm-search .stk-input { flex: 0 1 260px; }
.stk-adm-total { margin-left: auto; font-size: 12px; color: #6b7280; }

@media (max-width: 768px) {
  .stk-new-btn { margin-left: 0; width: 100%; }
  .stk-bubble { max-width: 88%; }
}