/* admin-web 공용 스타일 — taste-skill(minimalist-ui) 적용 (2026-08-13, PR #41).
   원칙: 따뜻한 오프화이트 · 차콜 텍스트(순검정 금지) · 헤어라인 구분선 · 파스텔 필 뱃지 ·
   니어블랙 버튼(그림자 없음) · 모션은 transform/opacity/색상 200ms만.
   다이얼: VARIANCE 2 · MOTION 2 · DENSITY 6 (데이터 어드민).
   ⛔ 웹폰트·아이콘 라이브러리·CDN 불사용 — 시스템 스택만(프레임워크 금지 제약과 짝). */

:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --text: #2f3437;
  --muted: #787774;
  --hairline: #eaeaea;
  --hairline-soft: rgba(0, 0, 0, 0.06);
  --primary: #111111;
  --primary-hover: #2b2b2b;
  --link: #1f6c9f;
  --danger-strong: #9f2f2d;

  /* 파스텔 4종 — 스팟 컬러는 이것뿐이다 */
  --pastel-red-bg: #fdebec;    --pastel-red-text: #9f2f2d;
  --pastel-blue-bg: #e1f3fe;   --pastel-blue-text: #1f6c9f;
  --pastel-green-bg: #edf3ec;  --pastel-green-text: #346538;
  --pastel-yellow-bg: #fbf3db; --pastel-yellow-text: #956400;

  --radius-card: 10px;
  --radius-control: 6px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Geist Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--text); }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 3px;
}

code, kbd, .mono { font-family: var(--font-mono); font-size: 0.86em; }

/* ── 상단바 · 네비 (파트너/내부 2종) ─────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.8rem 1.6rem;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.topbar .brand { font-weight: 700; letter-spacing: -0.02em; }
.topbar .brand .scope {
  display: inline-block;
  margin-left: 0.55rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0.02em;
  vertical-align: 2px;
}
.topbar nav { display: flex; gap: 1.25rem; }
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.2rem 0.05rem;
  transition: color 200ms ease;
}
.topbar nav a:hover { color: var(--text); }
.topbar nav a.active {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--text);
}
.topbar .session { margin-left: auto; color: var(--muted); font-size: 0.88em; }
.topbar .session a { color: var(--muted); }
.topbar.internal { border-top: 3px solid var(--pastel-blue-text); }

.inline-form { display: inline; }
.linklike {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 200ms ease;
}
.linklike:hover { color: var(--text); }

/* 하단 여백을 상단보다 크게 — 광학 조정.
   ⚠️ 폭 상한 없음(2026-08-14 어진) — 표가 내용 크기만큼 자동으로 늘어나고,
   컨테이너는 그걸 막지 않는다. 940px 고정이 내용을 자르던 것의 정반대 방향. */
.container { max-width: none; margin: 2rem auto 4rem; padding: 0 1.8rem; }

/* ── 페이지 헤더 — 카드 밖 좌정렬 (h1은 페이지당 1개) ────────── */
.page-header { margin: 0 0 1.4rem; }
.page-header h1 { margin: 0 0 0.25rem; font-size: 1.45rem; }
.page-header .page-desc { margin: 0; color: var(--muted); font-size: 0.92em; }

/* ── 카드 · 표 ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  /* 🔴 카드가 내용을 따라 늘어난다(2026-08-14 어진) — 이게 빠져서 표만 늘고 카드는
     화면 폭에 갇혀 카드 안 가로 스크롤이 남았다. fit-content = 내용이 폭을 정하고,
     min-width 100% = 내용이 적어도 컨테이너 폭은 채운다(카드끼리 폭 들쭉날쭉 방지). */
  width: fit-content;
  min-width: 100%;
}
.card h2 { margin: 0 0 0.9rem; font-size: 1.05rem; }
.card h2 + .muted { margin-top: -0.5rem; }

/* 표는 **내용 크기만큼** 늘어난다(2026-08-14 어진) — 칸을 구기거나 꺾지 않는다.
   min-width 100%: 내용이 적어도 카드 폭은 채운다. 내용이 화면보다 넓은 극단만
   table-scroll이 받는다(마지막 그물). */
.table-scroll { overflow-x: auto; }

table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.65rem;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: top;
}
th {
  font-size: 0.82em;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
tbody tr { transition: background-color 200ms ease; }
tbody tr:hover { background: #fbfbfa; }
tbody tr:last-child td { border-bottom: none; }
td:last-child { white-space: nowrap; }
td.ts { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 행 액션 가로 한 줄 — 표가 내용만큼 늘어나므로 구길 이유가 없다(2026-08-14 어진). */
td .row-actions { display: flex; align-items: center; gap: 0.4rem; }
td .row-actions form { display: flex; align-items: center; gap: 0.3rem; margin: 0; }
td .row-actions input[type="text"] { width: 11rem; min-width: 0; }

/* 소스(매체) 태그 — 행 머리의 동그란 라벨 (어진 2026-08-14).
   색은 매체명 → 색상환 자동 배정(src_hue 필터 · 매체 추가 시 등록 불요) — 템플릿이
   인라인 hsl로 칠한다. 채도·명도는 아래 톤으로 고정해 파스텔 결을 유지한다:
   배경 hsl(H 48% 91%) · 글자 hsl(H 55% 32%). ⚠️ 상태 뱃지의 파스텔 4종과 다른 축이다 —
   저쪽은 의미 색(상태), 이쪽은 정체성 색(매체)이라 팔레트를 공유하면 상태로 오독된다. */
.src-tag {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 진행 중 맥박 점 — reprocessing 등 「돌고 있다」 표시. ⚠️ 실제 잡 진행률이 아니라
   상태 기반 표시다(재파싱·재구성은 30분 사이클 — 화면이 관측할 진행률 소스가 없다).
   모션 원칙(opacity 계열) 안에서 주기만 길게 쓴다. */
.pulse-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pastel-yellow-text);
  vertical-align: 1px;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ── 상태 뱃지 — 파스텔 필 ────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.badge.published,
.badge.resolved,
.badge.ok          { background: var(--pastel-green-bg); color: var(--pastel-green-text); }
.badge.in_review,
.badge.approved    { background: var(--pastel-blue-bg); color: var(--pastel-blue-text); }
.badge.rejected,
.badge.failed      { background: var(--pastel-red-bg); color: var(--pastel-red-text); }    /* failed = worker 취득 실패 */
.badge.reprocessing,
.badge.draft,      /* draft(사이클 사이) = 검수자 재생성 대기 — reprocessing과 같은 「진행 중」 결 */
.badge.empty       { background: var(--pastel-yellow-bg); color: var(--pastel-yellow-text); } /* empty = 파서 실패 */
.badge.received,
.badge.unpublished { background: #f1f0ee; color: var(--muted); }
.badge.gate_failed { background: var(--pastel-red-bg); color: var(--pastel-red-text); }
/* lang = 상태가 아니라 **언어 표지**다(번역 행) — 상태 팔레트와 분리해 둔다: 상태 색을
   재조정해도 언어 뱃지가 따라 물들지 않게(PR #90 리뷰 — in_review 차용이 상태로 오독됐다). */
.badge.lang        { background: #ece9f7; color: #5b4b8a; }

/* ── 폼 · 버튼 ────────────────────────────────────────────── */
label { display: block; font-size: 0.88em; color: var(--muted); margin: 0.8rem 0 0.3rem; }
input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color 200ms ease;
}
input:hover, textarea:hover { border-color: #d5d3cf; }
input:focus, textarea:focus { outline: none; border-color: var(--text); }
textarea { min-height: 5.5rem; resize: vertical; }
::placeholder { color: #b0aca6; }

.btn {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-control);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease, transform 150ms ease;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn:active { transform: scale(0.98); }
.btn.secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--hairline);
}
.btn.secondary:hover { border-color: var(--muted); background: var(--surface); }
.btn.danger { background: var(--danger-strong); border-color: var(--danger-strong); }
.btn.danger:hover { background: #862826; border-color: #862826; }
.btn[disabled] {
  background: #f1f0ee;
  border-color: var(--hairline);
  color: #b0aca6;
  cursor: not-allowed;
  transform: none;
}
.actions { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }

/* ── 안내 · 오류 · 플레이스홀더 ───────────────────────────── */
.error-banner {
  background: var(--pastel-red-bg);
  border: 1px solid #f2d6d7;
  color: var(--pastel-red-text);
  border-radius: var(--radius-control);
  padding: 0.65rem 0.95rem;
  margin-bottom: 1rem;
}
.info-banner {
  background: var(--pastel-blue-bg);
  border: 1px solid #c8e4f6;
  color: var(--pastel-blue-text);
  border-radius: var(--radius-control);
  padding: 0.65rem 0.95rem;
  margin-bottom: 1rem;
}
.error-banner a, .info-banner a { color: inherit; font-weight: 500; }

/* 미확정 요소(계약 문면·기능 대기) — 점선 「자리」 표식은 기능적 장치라 유지 */
.placeholder {
  border: 1.5px dashed #cfccc6;
  background: #fbfbfa;
  color: var(--muted);
  border-radius: var(--radius-control);
  padding: 0.65rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.kv { display: grid; grid-template-columns: 10.5rem 1fr; row-gap: 0.45rem; }
.kv dt { color: var(--muted); font-size: 0.88em; }
.kv dd { margin: 0; }

.muted { color: var(--muted); }

/* 빈 상태 — 제목 + 보조문 2줄 구조 */
.empty-state { text-align: center; padding: 2.4rem 0 2.6rem; }
.empty-state .empty-title { color: var(--text); font-weight: 500; margin: 0 0 0.25rem; }
.empty-state .empty-desc { color: var(--muted); font-size: 0.9em; margin: 0; }

pre.raw {
  /* 본문·JSON도 줄바꿈으로 전부 보인다 — 가로 스크롤 금지(표와 같은 판단) */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  color: var(--text);
  background: #fbfbfa;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-control);
  padding: 0.8rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.86em;
  line-height: 1.55;
}