/* ═══════════════════════════════════════════════════
   홈페이지 문의 관리 페이지 스타일
   cs2 컬러 토큰 기반
   ═══════════════════════════════════════════════════ */

#page-inquiries {
  background: #F5F5F5;
}

#inquiriesBody {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px 24px;
}

/* 팁 배너 */
.inq-tip {
  background: #FEF3DA;
  border-left: 3px solid #D97706;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #7A4A08;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.55;
}
.inq-tip strong { font-weight: 700; }
.inq-tip-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #9A9A9A;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 12px;
}
.inq-tip-close:hover { color: #6B6B6B; }

/* 3단 그리드 */
.inq-grid {
  display: grid;
  grid-template-columns: 200px 1fr 400px;
  gap: 12px;
  height: calc(100% - 0px);
  min-height: 600px;
}

/* ─── 좌측 사이드 (필터) ─── */
.inq-side {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  padding: 12px;
  height: fit-content;
  position: sticky;
  top: 0;
}
.inq-side-title {
  font-size: 11px;
  color: #9A9A9A;
  font-weight: 500;
  padding: 0 8px 8px;
  border-bottom: 1px solid #EAEAEA;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.inq-side-item {
  padding: 9px 13px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  color: #3A3A3A;
  margin-top: 2px;
  transition: background .1s;
  user-select: none;
}
.inq-side-item:hover { background: #FAFAFA; }
.inq-side-item.active {
  background: #FFFBF0;
  border-left: 3px solid #D97706;
  padding-left: 10px;
  color: #1A1A1A;
  font-weight: 500;
}
.inq-side-count {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 500;
  min-width: 20px;
  text-align: center;
}
.inq-side-count-sm {
  font-size: 11px;
  color: #9A9A9A;
  background: #F5F5F5;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* ─── 중앙 (카드 리스트) ─── */
.inq-list-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.inq-search-bar {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.inq-search-bar:focus-within {
  border-color: #D97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12);
}
.inq-search-icon {
  color: #9A9A9A;
  font-size: 13px;
}
.inq-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #1A1A1A;
  min-width: 0;
}
.inq-search-bar select {
  border: 1px solid #EAEAEA;
  background: #FFFFFF;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 5px;
  color: #3A3A3A;
  cursor: pointer;
  flex-shrink: 0;
}
.inq-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.inq-empty {
  text-align: center;
  padding: 60px 20px;
  color: #9A9A9A;
  font-size: 13px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
}

/* 문의 카드 */
.inq-card {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  border-left: 3px solid #EAEAEA;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .1s;
}
.inq-card:hover { background: #FAFAFA; }
.inq-card.selected {
  background: #FFFBF0;
  border-color: #FAC775;
}
.inq-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}
.inq-card-head-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.inq-card-writer {
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
}
.inq-card-assignee {
  font-size: 11px;
  color: #9A9A9A;
}
.inq-card-time {
  font-size: 11px;
  color: #9A9A9A;
  flex-shrink: 0;
  white-space: nowrap;
}
.inq-card-preview {
  font-size: 12px;
  color: #3A3A3A;
  line-height: 1.55;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.inq-card-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #6B6B6B;
  flex-wrap: wrap;
}

/* 배지 */
.inq-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* ─── 우측 (상세 패널) ─── */
.inq-detail-wrap {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  height: fit-content;
  max-height: calc(100vh - 180px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}
.inq-detail-empty {
  text-align: center;
  padding: 80px 20px;
  color: #9A9A9A;
  font-size: 13px;
}
.inq-detail-head {
  padding: 14px 16px;
  border-bottom: 1px solid #EAEAEA;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: #FFFFFF;
}
.inq-detail-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #9A9A9A;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.inq-detail-close:hover { color: #6B6B6B; }
.inq-detail-body {
  padding: 14px 16px 16px;
  overflow-y: auto;
  flex: 1;
}
.inq-detail-name {
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A;
  margin-bottom: 3px;
}
.inq-detail-time {
  font-size: 11px;
  color: #9A9A9A;
  margin-bottom: 14px;
}

.inq-info-box {
  background: #F5F5F5;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}
.inq-info-row {
  display: flex;
  margin-bottom: 5px;
}
.inq-info-row:last-child { margin-bottom: 0; }
.inq-info-label {
  width: 56px;
  color: #6B6B6B;
  flex-shrink: 0;
}
.inq-info-val {
  color: #1A1A1A;
  word-break: break-all;
  flex: 1;
}
.inq-info-val a { color: #1565C0; text-decoration: none; }
.inq-info-val a:hover { text-decoration: underline; }

.inq-section-label {
  font-size: 11px;
  color: #6B6B6B;
  font-weight: 500;
  margin-bottom: 5px;
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.inq-section-label:first-child { margin-top: 0; }

.inq-content-box {
  background: #FAFAFA;
  border: 1px solid #EAEAEA;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: #1A1A1A;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 240px;
  overflow-y: auto;
}

.inq-attach-box {
  background: #FAFAFA;
  border: 1px solid #EAEAEA;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  color: #1A1A1A;
  transition: background .1s;
}
.inq-attach-box:hover { background: #F5F5F5; }
.inq-attach-name { flex: 1; color: #1A1A1A; word-break: break-all; }
.inq-attach-size { color: #9A9A9A; font-size: 11px; flex-shrink: 0; }

/* 연결된 업무요청 카드 */
.inq-task-link {
  background: #FFFBF0;
  border: 1px solid #FAC775;
  border-left: 3px solid #D97706;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all .1s;
}
.inq-task-link:hover {
  background: #FEF3DA;
  border-color: #D97706;
}
.inq-task-link-title {
  font-size: 12px;
  font-weight: 500;
  color: #1A1A1A;
  margin-bottom: 5px;
  line-height: 1.4;
}
.inq-task-link-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #6B6B6B;
  flex-wrap: wrap;
}
body.dark .inq-task-link {
  background: #2e2a1e;
  border-color: #7A4A08;
}
body.dark .inq-task-link:hover { background: #3a2f1a; }
body.dark .inq-task-link-title { color: #EDEAE4; }
body.dark .inq-task-link-meta { color: #9A9690; }

.inq-select,
.inq-input {
  width: 100%;
  border: 1px solid #EAEAEA;
  background: #FFFFFF;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #1A1A1A;
  box-sizing: border-box;
  font-family: inherit;
}
.inq-select:focus,
.inq-input:focus {
  outline: none;
  border-color: #D97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12);
}

.inq-memo {
  width: 100%;
  border: 1px solid #EAEAEA;
  background: #FAFAFA;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
  font-family: inherit;
  color: #1A1A1A;
}
.inq-memo:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #D97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12);
}

.inq-status-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* 버튼 */
.inq-btn-primary,
.inq-btn-confirm,
.inq-btn-success,
.inq-btn-secondary,
.inq-btn-danger {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .1s;
  border: 1px solid transparent;
}
.inq-btn-primary {
  background: #D97706;
  border-color: #D97706;
  color: #FFFFFF;
}
.inq-btn-primary:hover { background: #B45309; border-color: #B45309; }
.inq-btn-confirm {
  background: #FEF3DA;
  border-color: #FAC775;
  color: #7A4A08;
}
.inq-btn-confirm:hover { background: #FAC775; }
.inq-btn-success {
  background: #0F6E56;
  border-color: #0F6E56;
  color: #FFFFFF;
}
.inq-btn-success:hover { background: #0A5942; border-color: #0A5942; }
.inq-btn-secondary {
  background: #FFFFFF;
  border-color: #EAEAEA;
  color: #3A3A3A;
}
.inq-btn-secondary:hover { background: #FAFAFA; border-color: #D4D4D4; }
.inq-btn-danger {
  background: #FFFFFF;
  border-color: #EAEAEA;
  color: #D14343;
}
.inq-btn-danger:hover { background: #FDECEC; border-color: #D14343; }

.inq-detail-actions {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #EAEAEA;
}
.inq-detail-actions button { flex: 1; }

/* 이력 */
.inq-history {
  background: #FAFAFA;
  border: 1px solid #EAEAEA;
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 160px;
  overflow-y: auto;
}
.inq-history-item {
  display: flex;
  gap: 8px;
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px solid #EEEEEE;
}
.inq-history-item:last-child { border-bottom: none; }
.inq-history-time {
  color: #9A9A9A;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.inq-history-action { color: #3A3A3A; }

/* ─── 다크모드 ─── */
body.dark #page-inquiries { background: #1a1917; }
body.dark .inq-side,
body.dark .inq-search-bar,
body.dark .inq-card,
body.dark .inq-detail-wrap,
body.dark .inq-empty {
  background: #242220;
  border-color: #3a3733;
}
body.dark .inq-card:hover,
body.dark .inq-side-item:hover { background: #2d2b28; }
body.dark .inq-card.selected { background: #2e2a1e; border-color: #7A4A08; }
body.dark .inq-side-item.active { background: #2e2a1e; }
body.dark .inq-side-title { color: #6F6C67; border-color: #3a3733; }
body.dark .inq-side-item { color: #C8C4BC; }
body.dark .inq-side-item.active { color: #EDEAE4; }
body.dark .inq-card-writer,
body.dark .inq-card-preview,
body.dark .inq-detail-name,
body.dark .inq-info-val,
body.dark .inq-content-box,
body.dark .inq-attach-name { color: #EDEAE4; }
body.dark .inq-info-box,
body.dark .inq-content-box,
body.dark .inq-attach-box,
body.dark .inq-memo,
body.dark .inq-history { background: #2d2b28; border-color: #3a3733; color: #C8C4BC; }
body.dark .inq-detail-head,
body.dark .inq-detail-actions { border-color: #3a3733; }
body.dark .inq-search-bar input,
body.dark .inq-select,
body.dark .inq-input { background: #242220; color: #EDEAE4; }
body.dark .inq-select,
body.dark .inq-input,
body.dark .inq-search-bar select { border-color: #3a3733; color: #C8C4BC; }
body.dark .inq-btn-secondary {
  background: #242220;
  border-color: #3a3733;
  color: #C8C4BC;
}
body.dark .inq-btn-secondary:hover { background: #2d2b28; }
body.dark .inq-side-count-sm { background: #2d2b28; color: #9A9690; }
body.dark .inq-tip { background: #3a2f1a; color: #F0D78C; }

/* ═══════════════════════════════════════
   mall 필터 + 다중 선택 + 일괄 액션
   ═══════════════════════════════════════ */

/* 사이드 필터 mall 점 */
.inq-mall-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* 카드 mall 배지 */
.inq-mall-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-right: 2px;
}

/* 카드 체크박스 */
.inq-card-check {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  cursor: pointer;
  accent-color: #D97706;
  flex-shrink: 0;
}

/* 카드 선택 상태 (체크박스로) */
.inq-card.checked {
  background: #FFFBF0;
  box-shadow: inset 0 0 0 1px #D97706;
}
.inq-card.checked.selected {
  background: #FEF3DA;
}

/* 플로팅 액션바 */
.inq-float-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #1A1A1A;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 9000;
  animation: inqFbSlideUp 0.2s ease-out;
}
@keyframes inqFbSlideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.inq-fb-count {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px 0 4px;
  border-right: 1px solid #3a3733;
  margin-right: 4px;
}
.inq-fb-btn {
  background: transparent;
  border: 1px solid #3a3733;
  color: #EDEAE4;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .1s;
  white-space: nowrap;
}
.inq-fb-btn:hover {
  background: #2d2b28;
  border-color: #4d4a45;
}
.inq-fb-btn.inq-fb-danger {
  border-color: #6b2828;
  color: #FCA5A5;
}
.inq-fb-btn.inq-fb-danger:hover {
  background: #3a1717;
  border-color: #D14343;
  color: #FFFFFF;
}
.inq-fb-close {
  background: transparent;
  border: none;
  color: #9A9690;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: 4px;
}
.inq-fb-close:hover {
  background: #2d2b28;
  color: #FFFFFF;
}

/* 일괄 액션 모달 */
.inq-bulk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.inq-bulk-modal-box {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
body.dark .inq-bulk-modal-box {
  background: #242220;
  color: #EDEAE4;
}

/* 일괄 액션 모달 내 primary 버튼 */
.inq-btn-primary {
  background: #D97706;
  color: #FFFFFF;
  border: 1px solid #D97706;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s;
}
.inq-btn-primary:hover {
  background: #B45309;
  border-color: #B45309;
}

/* 전체 선택 행 */
.inq-selectall-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #FAFAFA;
  border-bottom: 1px solid #EAEAEA;
  font-size: 12px;
}
body.dark .inq-selectall-bar {
  background: #2d2b28;
  border-color: #3a3733;
}
.inq-selectall-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: #3A3A3A;
}
body.dark .inq-selectall-label { color: #C8C4BC; }
.inq-selectall-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  accent-color: #D97706;
}
.inq-selectall-count {
  color: #9A9A9A;
  font-size: 11px;
}
.inq-selectall-info {
  color: #D97706;
  font-weight: 600;
  font-size: 11px;
}