/* =========================================================================
 * 운영 페이지(/ops/) 공통 — 2026-10-07. 이 화면에서만 싣는다(functions.php).
 * 탭마다 모양은 ops-{탭}.css 에 둔다. 여기에는 다섯 탭이 같이 쓰는 것만:
 *   .ops-notice       탭 맨 위 알림 한 줄(DalshimOps.notice)
 *   .ops-toolbar      목록 위 필터·검색 줄
 *   .ops-list/.ops-item  카드형 목록 한 줄(표 대신 — 좁은 화면에서 표는 가로로 넘친다)
 *   .ops-meta         회색 작은 정보 줄
 *   .ops-actions      줄 오른쪽(좁으면 아래) 버튼 묶음
 *   .ops-badge        상태 배지(.is-warn / .is-done / .is-muted)
 *   .ops-field        입력칸(신고 상자 .mod-detail 과 같은 값)
 *   .ops-empty        빈 목록 안내
 * 버튼은 사이트 공용 .btn / .btn.ghost / .btn.sm / .btn.solid 를 그대로 쓴다.
 * ========================================================================= */

/* 운영 페이지 탭 줄. 밑줄과 탭 사이에 여백을 둔다(2026-10-07 고객 「아래 라인에서 여백 추가」).
 * .ops-tabs 로만 잡는다 — #screen-ops .tabs 로 잡으면 쿠폰 탭 검색 줄 안의 「전체·최근 사용」 탭까지
 * margin 이 걸려 검색칸과 높이가 어긋난다(같은 날 고객 「쿠폰 라인 맞도록」). */
#screen-ops .ops-tabs{margin:0 0 20px; padding:4px 0 14px; border-bottom:2px solid var(--ink)}

.ops-notice{margin:0 0 14px; padding:10px 12px; border:2px solid var(--card-line); border-radius:4px;
  background:var(--surface); font-size:13.5px; font-weight:700; color:var(--ink)}
.ops-notice.is-error{border-color:var(--action); color:var(--action)}

.ops-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px}
.ops-toolbar .tabs{margin:0}

.ops-list{display:flex; flex-direction:column; gap:10px}
.ops-item{display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 14px; padding:14px 16px;
  border:2px solid var(--ink); border-radius:4px; background:var(--card, #fff)}
.ops-item-main{flex:1 1 320px; min-width:0}
.ops-item-title{margin:0 0 4px; font-size:15px; font-weight:800; color:var(--ink); overflow-wrap:anywhere}
.ops-item-title a{color:inherit}
.ops-item-body{margin:6px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink); overflow-wrap:anywhere; white-space:pre-wrap}
.ops-meta{margin:0; font-family:var(--mono); font-size:11.5px; color:var(--muted); overflow-wrap:anywhere}
.ops-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-left:auto}

.ops-badge{display:inline-block; padding:2px 7px; border-radius:3px; font-family:var(--mono); font-size:11px; font-weight:800;
  background:var(--ink); color:var(--bg); vertical-align:middle}
.ops-badge.is-warn{background:var(--action-bg); color:#fff}
.ops-badge.is-done{background:transparent; color:var(--muted); border:1.5px solid var(--card-line)}
.ops-badge.is-muted{background:var(--warmgrey); color:var(--cream)}

.ops-field{font-family:inherit; font-size:13px; padding:7px 9px; min-height:36px; min-width:0;
  border:2px solid var(--card-line); border-radius:3px; background:var(--surface); color:var(--ink)}
.ops-field::placeholder{color:var(--muted)}
.ops-field:focus{outline:3px solid var(--action); outline-offset:1px; border-color:var(--action)}
textarea.ops-field{width:100%; min-height:120px; line-height:1.5; resize:vertical}

.ops-empty{margin:24px 0; text-align:center; color:var(--muted); font-size:14px}

.ops-pager{display:flex; justify-content:center; gap:8px; margin:16px 0 0}

@media (max-width:600px){
  .ops-item{padding:12px}
  .ops-actions{margin-left:0; width:100%}
}