/* 토큰 · 리셋 · 헤더 */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #dfe3e8;
  --text: #1f2328;
  --dim: #6b7280;
  --accent: #3b5bdb;
  --accent-soft: #edf0fd;
  --changed: #b45309;
  --changed-soft: #fff7ed;
  --error: #c0392b;
  --error-soft: #fdeded;
  --warn: #a16207;
  --warn-soft: #fefce8;
  --ok: #15803d;
  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

/* ── 상태 색 ────────────────────────────────────────────────────────────
   ⭐ 9개 상태를 **전부 다른 색**으로 둔다. 한눈에 갈리는 것이 요점이라
      비슷한 색 두 개를 쓰지 않는다 (사용자 요청 2026-08-26).

   ⚠️ 그전에는 6개 톤에 9개 상태를 밀어 넣어서 **배정됨·작업중·반려가 같은
      파랑**이었다. 손이 가야 하는 상태(반려)가 아무 일 없는 상태와 같은 색이면
      목록을 훑는 의미가 없다.

   ⭐ 색은 **여기에만** 적는다. 목록 태그·진척 막대·필터 칩·배정 화면·작업
      화면 머리글이 전부 이 두 변수(--s 글자 · --sb 배경)를 읽는다 —
      한 곳만 고치면 다 같이 바뀐다.

   ⚠️ base.css 에 두는 이유: 세 화면(index·mypage·admin)이 모두 읽는 유일한
      파일이다. mypage.css 에 있을 때는 작업 화면이 그 파일을 안 읽어서
      머리글만 색이 빠졌다. */
.st-unassigned   { --s: #6b7280; --sb: #f1f3f5; }   /* 미배정   회색  */
.st-assigned     { --s: #3b5bdb; --sb: #edf0fd; }   /* 배정됨   파랑  */
.st-in_progress  { --s: #0e7490; --sb: #ecfeff; }   /* 작업중   청록  */
.st-rejected     { --s: #c0392b; --sb: #fdeded; --sl: #f0c2bc; }  /* 반려 빨강 ⭐ */
.st-submitted    { --s: #6d28d9; --sb: #f3effd; }   /* 제출됨   보라  */
.st-needs_review { --s: #db2777; --sb: #fdf2f8; }   /* 검수필요 자홍  */
.st-held         { --s: #a16207; --sb: #fefce8; }   /* 보류     황토  */
.st-escalated    { --s: #7c3aed; --sb: #f5f3ff; --sl: #ddd0fb; }  /* 관리자 검토 ⭐ */
.st-approved     { --s: #15803d; --sb: #ecfdf5; }   /* 승인     초록  */
.st-discarded    { --s: #78716c; --sb: #eceae8; }   /* 폐기     흙색  */

/* 라벨러에게만 보이는 묶음 상태 (routes/statusView.js).
   ⚠️ 「실패」와 「반려」는 둘 다 나쁜 소식이지만 뜻이 다르다 — 반려는 다시 하라는
      것이고 실패는 끝난 것이다. 같은 붉은 계열로 두되 색을 갈라 둔다. */
.st-in_review      { --s: #6d28d9; --sb: #f3effd; }   /* 검수중   보라  */
.st-result_success { --s: #15803d; --sb: #ecfdf5; }   /* 성공     초록  */
.st-result_fail    { --s: #9f1239; --sb: #fff1f4; --sl: #f2c2ce; }  /* 실패 자주 */
.st-result_pending { --s: #6b7280; --sb: #f1f3f5; }   /* 판정대기 회색  */

/* 역할 색 — 상태와 같은 수법이다(`--s` 글자 · `--sb` 바탕).
   ⭐ 권한이 올라갈수록 진해진다. 목록에서 관리자가 몇인지 훑기 쉬우라고.
   ⚠️ 상태 색과 겹쳐도 된다 — 역할은 사용자 관리 화면에만, 상태는 작업 목록에만
      나온다. 한 화면에서 마주치지 않는다. */
.rl-labeler     { --s: #0e7490; --sb: #ecfeff; }   /* 라벨러         청록 */
.rl-reviewer    { --s: #6d28d9; --sb: #f3effd; }   /* 라벨링 검수자   보라 */
.rl-label_admin { --s: #b45309; --sb: #fff7ed; }   /* 라벨링 관리자   주황 */
.rl-admin       { --s: #be123c; --sb: #fff1f3; }   /* 워크벤치 관리자 진홍 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC",
               "Noto Sans Thai", system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 { margin: 0; font-size: 13px; font-weight: 600; }
button { font: inherit; cursor: pointer; }
code { font-family: var(--mono); }
.dim { color: var(--dim); }

/* 헤더 */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem .9rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.h-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.h-title { color: var(--accent); text-decoration: none; font-weight: 600; }
a.h-title:hover { text-decoration: underline; }
.h-item { display: inline-flex; gap: .35rem; align-items: baseline; }
.h-item em { font-style: normal; color: var(--dim); font-size: 11px; }
.h-item[hidden] { display: none; }
/* 담당자 여럿을 한 칸에 — 「라벨러 달1 · 검수자 달2」 */
.h-people { display: inline-flex; gap: .5rem; align-items: baseline; }
.h-people b { font-weight: 500; }
.h-people .none { color: var(--dim); }
.h-right { display: flex; gap: .4rem; align-items: center; }

.chip {
  padding: .15rem .5rem; border-radius: 999px;
  background: #eef1f4; color: var(--dim); font-size: 11px;
}
.chip.is-changed { background: var(--changed-soft); color: var(--changed); font-weight: 600; }

/* 머리글의 상태 — 목록·배정 화면과 같은 색을 쓴다(.st-* 가 넘겨준다).
   ⚠️ 클래스가 없으면(일감 없는 열람 건) 회색으로 떨어진다. 의도한 것이다. */
.h-status {
  padding: .1rem .45rem; border-radius: 3px; font-size: 11px; font-weight: 500;
  background: var(--sb, #eef1f4); color: var(--s, var(--dim));
  border: 1px solid transparent;
}
.h-status.st-rejected,
.h-status.st-result_fail { border-color: var(--sl, var(--s)); font-weight: 600; }
.h-status.st-discarded { text-decoration: line-through; opacity: .75; }

.app-header button, .app-header select {
  padding: .3rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.btn-ghost { color: var(--dim); }

/* 헤더의 링크형 버튼(관리자 입구 등) — `.app-header button` 은 <a> 를 잡지 못한다.
   ⚠️ 예전에 특이도에 밀려 흰 배경+흰 글씨로 버튼이 사라진 적이 있다. */
.app-header a.btn-ghost {
  padding: .3rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
  text-decoration: none;
}

.user-box {
  display: inline-flex; align-items: center; gap: .4rem;
  padding-left: .6rem; margin-left: .2rem;
  border-left: 1px solid var(--border);
}
.h-user { font-size: 12px; color: var(--text); }

/* 초벌 자동정리 고지 */
.draft-notice {
  display: none;
  padding: .5rem .9rem;
  background: var(--warn-soft);
  border-bottom: 1px solid #fde68a;
  font-size: 12px;
}
.draft-notice.is-visible { display: block; }

.error {
  margin: 1rem; padding: 1rem;
  background: var(--error-soft); color: var(--error);
  border-radius: var(--radius);
}

/* ── 상태 띠 ─────────────────────────────────────────────────────────────
   ⭐ 머리글 바로 아래. 접히지도 스크롤되지도 않는다 — 놓치면 반려의 뜻이 사라진다.

   띠는 여럿일 수 있다(초안 경고 + 반려 사유). 그래서 바깥은 통이고,
   색은 각 띠(.sn-band)가 저마다 가진다. */
.status-notice { display: none; }
.status-notice.is-visible { display: block; }
.sn-band { padding: .5rem .9rem; border-bottom: 1px solid; }
.sn-band.is-warn   { background: var(--warn-soft);   border-color: #fde68a; }
.sn-band.is-danger { background: var(--error-soft);  border-color: #f5c6c2; }
.sn-band.is-ok     { background: #f0fdf4;            border-color: #bbf7d0; }
.sn-band.is-info   { background: var(--accent-soft); border-color: #c7d2fe; }

.sn-head { display: flex; align-items: baseline; gap: .5rem; font-size: 12px; }
.sn-head strong { font-size: 13px; }
.sn-band.is-warn   .sn-head strong { color: var(--warn); }
.sn-band.is-danger .sn-head strong { color: var(--error); }
.sn-band.is-ok     .sn-head strong { color: var(--ok); }
.sn-band.is-info   .sn-head strong { color: var(--accent); }
.sn-who { color: var(--dim); font-size: 11px; }
.sn-more {
  margin-left: auto; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); padding: .1rem .5rem; font-size: 11px; color: var(--dim);
}
.sn-more:hover { color: var(--accent); border-color: #c7d2fe; }

/* 코멘트가 본문이다 — 제목보다 크게 두어 먼저 읽히게 한다 */
.sn-comment {
  margin: .35rem 0 0; font-size: 13px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap;
}
.sn-comment.is-empty { color: var(--dim); font-style: italic; font-size: 12px; }
.sn-tags { display: flex; gap: .3rem; margin-top: .35rem; flex-wrap: wrap; }
.sn-tag {
  font-size: 11px; padding: .05rem .35rem; border-radius: 3px;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--border); color: var(--dim);
}

/* ── 쪽 나누기 ───────────────────────────────────────────────────────────
   마이페이지 목록과 관리자 배정이 같은 것을 쓴다(js/panels/pager.js). */
.pager {
  display: flex; align-items: center; gap: .4rem;
  /* 목록 **위**에 붙는다 — 몇 건인지, 몇 쪽인지는 표를 보기 전에 알아야 한다 */
  padding: 0 .2rem .45rem; font-size: 12px; color: var(--dim);
}
.pager:empty { display: none; }
.pg-info { margin-right: auto; font-variant-numeric: tabular-nums; }
.pg-at { font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: center; }
.pg-btn, .pg-size {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); padding: .2rem .55rem;
  font: inherit; font-size: 12px; color: var(--text);
}
.pg-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }