/*  운영 흐름의 옷 — 알림 목록 · 신고 폼 · 쪽나누기. 값은 globals.css 의 :root 한 벌이고 새 색을 안 짓는다.
 *  드는 자리: Notices.tsx · ReportForm.tsx · Pager.tsx (`import '@/styles/ops.css'`).
 */
.notices {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.notice {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: var(--dim);
}
/*  안 읽은 것 — 옅게 띄운다(보라 띠 ＋ 잉크색). 읽으면 흐린 줄이 된다. */
.notice.new {
  color: var(--ink);
  background: #131316;
  border-left-color: var(--accent);
}
.notice .when {
  margin-left: auto;
  white-space: nowrap;
}
.notice a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line2);
  text-underline-offset: 3px;
}
.notice a:hover {
  text-decoration-color: var(--accent);
}

/*  알림의 쪽 넘김 — 머리줄 오른쪽의 꺾쇠 둘과 그 사이의 값(이 쪽의 줄 번호).
 *  ⚠ 꺾쇠는 «테두리 둘»로 그린다 — 게임란 무대의 `.screen-arw i` 와 같은 자다(글자 화살표는 글꼴을 탄다).
 *  갈 곳이 없는 쪽은 자리를 지운 채 죽여 둔다(머리줄이 안 흔들린다).  */
.notice-pg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: var(--dim2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.notice-pg .arw {
  display: grid;
  place-items: center;
  width: 26px;
  height: 24px;
  border: 1px solid var(--line2);
  border-radius: 7px;
  color: var(--ink);
  transition: background 0.12s;
}
.notice-pg .arw:hover {
  background: var(--head);
}
.notice-pg .arw[aria-disabled='true'] {
  opacity: 0.3;
  pointer-events: none;
}
.notice-pg .arw i {
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
}
.notice-pg .arw.next i {
  transform: rotate(-135deg);
  margin-left: -2px;
}

/*  신고 — 접힌 단추 하나가 열리면 폼이 그 아래 선다. */
.report {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.report-form {
  width: 320px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: left;
}
.report-form .input {
  font-size: 13.5px;
}

/*  쪽나누기 — 표 아래 [이전] [다음] 과 그 사이의 값. */
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  color: var(--dim2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.pager .btn[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}