/* Pretendard 자체 호스팅 — CDN 의존성 없음 원칙. 실제 쓰는 굵기(400/600/700)만
   선언해 브라우저가 나머지 파일은 받지 않는다. */
@font-face {
  font-family: "Pretendard"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/Pretendard-Bold.woff2") format("woff2");
}

/* ============================================================================
   "공고 검토 인쇄본" — 담당자가 공고를 출력해 형광펜을 긋던 종이를 화면으로
   옮겼다. 회색 책상 위 흰 복사지 한 장, 레이저 토너 검정과 공문서식 괘선.
   색은 형광펜(판정 등급)과 빨간 펜(마감·신규·수의계약)에만 쓴다.
   직전 디자인 백업: backup/web-before-redesign-2026-09-29/
   ========================================================================== */
:root {
  --desk: #e4e6e9;          /* 종이가 놓인 책상 */
  --canvas: #ffffff;        /* 복사지 */
  --shade: #f2f3f5;         /* 서식 머리칸 음영 */
  --parchment: var(--shade); /* 레거시 이름 */
  --pearl: #f8f9fa;
  --ink: #16181b;           /* 토너 검정 */
  --ink-secondary: #3a3e44;
  --ink-muted: #656a71;     /* 흰 바탕 5.4:1, 음영칸 위 4.9:1 */
  --hairline: #d9dce0;
  --divider-soft: #e9ebee;
  --rule: var(--ink);       /* 서식 괘선 */

  /* 형광펜 — 글자 위에 칠하므로 잉크 글자가 늘 7:1 이상 읽힌다 */
  --hl-yellow: #ffe94a;
  --hl-green: #b6efa0;
  --hl-pink: #ffc0d8;
  --hl-yellow-wash: #fffbdc; /* 펼쳐 보는 행 */

  /* 펜 */
  --red-pen: #c41d1d;
  --red-pen-tint: #fdecec;
  --blue-pen: #1f45b8;

  /* app.js·기존 규칙이 참조하는 의미 변수 */
  --core: var(--red-pen);
  --core-tint: var(--red-pen-tint);
  --related: var(--blue-pen);
  --related-tint: #e9eefb;
  --review: #7a5200;
  --review-tint: #fff5cc;
  --excluded: var(--ink-muted);
  --excluded-tint: var(--shade);
  --positive: #1d6e35;
  --positive-tint: #e5f3e8;
  --urgent: var(--red-pen);
  --urgent-tint: var(--red-pen-tint);
  --partial: #9a4f0c;
  --good: var(--positive);
  --blue: var(--ink);
  --blue-focus: var(--ink);

  /* 종이는 모서리가 각져 있다 — 컨트롤만 손에 닿는 2px */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 0;
  --radius-pill: 2px;

  --font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-display: 28px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --paper-shadow: 0 1px 1px rgba(40, 46, 56, 0.06), 0 6px 22px -6px rgba(40, 46, 56, 0.16);
}

* { box-sizing: border-box; }

button, input, select, textarea { font-family: inherit; }
input[type="checkbox"] { accent-color: var(--ink); }
input, textarea { caret-color: var(--ink); }
::placeholder { color: #80858c; }

/* 선택 영역도 형광펜 */
::selection { background: var(--hl-yellow); color: var(--ink); }

/* 링크는 토너 글자 + 가는 밑줄, 올리면 형광펜이 그어진다 */
a {
  color: var(--ink); text-decoration: underline; text-decoration-color: #9aa0a7;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  background: linear-gradient(var(--hl-yellow), var(--hl-yellow)) no-repeat left 85% / 0 55%;
  transition: background-size 180ms var(--ease-out);
}
a:hover { background-size: 100% 55%; text-decoration-color: var(--ink); }

html, body { overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: #b3b8be var(--desk); }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-md);
  padding-bottom: 48px;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .btn:active:not(:disabled) { transform: none; }
  .spinner, .loading-overlay-spinner { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: 0.35; } }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- 마스트헤드 — 서류 맨 위 머리. 흰 바탕에 로고를 그대로 얹는다. ---- */
header.topbar {
  background: var(--canvas);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 20;
}
header.topbar .title-block { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 auto; }
header.topbar .title-block > div:not(.logo) { min-width: 0; padding-left: 16px; border-left: 1px solid var(--hairline); }
header.topbar .logo {
  height: 30px; aspect-ratio: 1000 / 310; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
header.topbar .logo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}
header.topbar h1 {
  font-size: var(--text-md); margin: 0; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
header.topbar .subtitle {
  font-size: var(--text-xs); color: var(--ink-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
header.topbar .right {
  display: flex; align-items: center; gap: 14px; font-size: var(--text-sm);
  color: var(--ink-secondary); flex-shrink: 0; font-variant-numeric: tabular-nums;
}
/* 상태 표시는 서류에 찍는 도장 — 테두리 사각 + 같은 색 글자 */
header.topbar .status-pill {
  background: transparent; color: var(--positive); padding: 3px 9px;
  border: 1.5px solid currentColor; border-radius: var(--radius-xs);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
}
header.topbar .status-pill.running { color: var(--ink); background: var(--hl-yellow); border-color: var(--hl-yellow); }
header.topbar .status-pill.partial { color: var(--partial); }
header.topbar .status-pill.error { color: var(--red-pen); }

/* ---- 소스 전환 — 머리 아래 굵은 괘선. 지금 보는 소스에 노란 형광펜을 긋는다.
   소스 전환은 하루 몇 번뿐이라 펜이 그어지는 220ms를 허락한다. ---- */
nav.source-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--canvas);
  padding: 0 16px;
  position: sticky; top: 52px; z-index: 19;
  border-top: 1px solid var(--hairline);
  border-bottom: 2px solid var(--rule);
}
nav.source-switch button {
  border: none; color: var(--ink-muted);
  padding: 12px 12px 11px; margin: 0 2px; font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  cursor: pointer; white-space: nowrap;
  background: linear-gradient(var(--hl-yellow), var(--hl-yellow)) no-repeat 12px 72% / 0 0.62em;
  transition: color 0.15s ease, background-size 220ms var(--ease-out);
}
nav.source-switch button.active { color: var(--ink); background-size: calc(100% - 24px) 0.62em; }
nav.source-switch button > span[aria-hidden] { display: none; }
nav.source-switch button:hover:not(.active) { color: var(--ink); }
nav.source-switch .tab-btn-settings {
  margin-left: auto; font-size: var(--text-base); font-weight: 600; padding: 6px 14px;
  background: transparent; color: var(--ink); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
nav.source-switch .tab-btn-settings:hover:not(.active) { background: var(--shade); }
nav.source-switch .tab-btn-settings.active { color: #fff; background: var(--ink); }

/* 하위 탭 — 서류철 색인. 활성 탭은 검정 밑줄. 자주 누르는 곳이라 움직임 없음. */
nav.tabs {
  display: flex;
  gap: 4px;
  background: var(--canvas);
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
nav.tabs button[hidden] { display: none; }
nav.tabs button {
  border: none; background: transparent; padding: 11px 12px 10px;
  font-size: var(--text-base); font-weight: 600; color: var(--ink-muted);
  border-radius: 0; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
nav.tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
nav.tabs button:hover:not(.active) { color: var(--ink); }

/* ---- 종이 — 책상 위 한 장. 섹션은 카드가 아니라 괘선으로 나뉜 항목이다. ---- */
main {
  max-width: 1200px; margin: 28px auto; padding: 8px 40px 36px;
  background: var(--canvas); box-shadow: var(--paper-shadow);
}
.panel { display: none; }
.panel.active { display: block; }

/* ---- 지표 서식표 — 공문서 표처럼 음영 라벨칸 위, 수치칸 아래. 칸 선은
   1px 틈으로 비치는 바탕색이라 줄바꿈 위치와 상관없이 붙는다. ---- */
.card-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  background: var(--hairline);
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule);
  overflow: hidden; margin: 24px 0 8px;
}
/* 칸마다 라벨/수치 두 줄을 subgrid로 공유해, 라벨이 두 줄로 감긴 칸이 있어도
   같은 줄의 음영 띠와 수치 높이가 맞는다. DOM 순서(수치→라벨)는 그대로. */
.stat-card {
  position: relative; background: var(--canvas);
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
}
.stat-card > div:not(.icon) { display: contents; }
.stat-card .label { grid-row: 1; }
.stat-card .value { grid-row: 2; }
.stat-card .icon { display: none; }
.stat-card .label {
  font-size: var(--text-sm); color: var(--ink-secondary); font-weight: 600; line-height: 1.35;
  background: var(--shade); border-bottom: 1px solid var(--hairline);
  padding: 8px 26px 8px 14px; min-height: 44px; display: flex; align-items: center;
}
.stat-card .value {
  font-size: var(--text-display); font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; padding: 16px 14px 18px;
}
.stat-card-link { cursor: pointer; transition: background-color 0.15s ease; }
.stat-card-link:active { background: var(--pearl); }
.stat-card-link:focus-visible { outline-offset: -2px; }
.stat-card-link::after {
  content: ""; position: absolute; top: 20px; right: 12px; width: 6px; height: 6px;
  border-top: 1.5px solid var(--ink-muted); border-right: 1.5px solid var(--ink-muted);
  transform: rotate(45deg); transition: border-color .15s;
}
@media (hover: hover) and (pointer: fine) {
  .stat-card-link:hover { background: var(--hl-yellow-wash); }
  .stat-card-link:hover::after { border-color: var(--ink); }
}

/* 항목 — 위는 넓게, 제목 아래는 좁게. ■ 표시는 공문서 항목 기호. */
.section {
  background: transparent; border: 0; border-radius: 0;
  padding: 30px 0 8px; margin: 0;
}
.section + .section { border-top: 1px solid var(--hairline); margin-top: 22px; }
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.section-head h2 {
  font-size: var(--text-lg); margin: 0; font-weight: 700; letter-spacing: -0.025em; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.section-head h2::before { content: ""; width: 9px; height: 9px; background: var(--ink); flex-shrink: 0; }

.stored-summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  background: var(--shade); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 9px 12px; margin-bottom: 12px; font-size: var(--text-base); color: var(--ink);
}
.stored-summary #storedTotals { font-variant-numeric: tabular-nums; font-weight: 600; }
.stored-summary-note { color: var(--ink-muted); font-size: var(--text-sm); }

/* ---- 버튼 — 주 액션은 토너 검정, 보조는 검정 테두리. 누르면 살짝 눌린다. ---- */
.btn {
  background: var(--ink); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 9px 18px; font-size: var(--text-base); font-weight: 600; line-height: 1.3; cursor: pointer;
  display: inline-block; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 0.15s ease;
}
a.btn { background-image: none; }
.btn:hover { text-decoration: none; }
.btn:hover:not(:disabled) { background-color: #33373d; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.secondary, .btn.dark {
  background: var(--canvas); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.btn.secondary:hover:not(:disabled), .btn.dark:hover:not(:disabled) { background: var(--shade); }

/* 진행 막대 — 인쇄 차트처럼 색 없이 토너 검정 */
.progress-track {
  width: 100%; height: 6px; background: var(--divider-soft); overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--ink); width: 100%;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.progress-meta { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.progress-meta + .progress-meta { margin-top: 3px; }
.crawl-progress { margin-top: 16px; }

.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid var(--divider-soft); border-top-color: var(--ink);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-row td { text-align: center; color: var(--ink-muted); padding: 24px 0; }
table.result-table.is-loading { opacity: 0.45; transition: opacity 0.1s ease; pointer-events: none; }

.loading-overlay {
  position: fixed; inset: 0; background: rgba(22, 24, 27, 0.3);
  align-items: center; justify-content: center; z-index: 9999;
}
.loading-overlay:not([hidden]) { display: flex; animation: overlay-in 200ms var(--ease-out) 300ms both; }
@keyframes overlay-in { from { opacity: 0; } }
.loading-overlay-spinner {
  width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite;
}

/* 최근 수집 — 번호 매긴 목록. 순번 칸과 본문을 세로선 없이 정렬만으로 나눈다. */
.recent-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.recent-item { display: flex; gap: 14px; padding: 12px 4px 13px; border-bottom: 1px solid var(--divider-soft); }
.recent-item:last-child { border-bottom: none; }
.recent-item .num {
  width: 20px; color: var(--ink-muted); text-align: right;
  font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  flex-shrink: 0; line-height: 1.55;
}
.recent-item .title { font-weight: 600; font-size: var(--text-md); letter-spacing: -0.015em; line-height: 1.45; }
.recent-item .meta { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 3px; }
.recent-item .meta b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.bar-row { display: grid; grid-template-columns: 150px 1fr 50px; align-items: center; gap: 12px; margin-bottom: 8px; font-size: var(--text-sm); }
.bar-row .name { color: var(--ink-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .track { background: var(--divider-soft); height: 10px; overflow: hidden; }
.bar-row .fill { background: var(--ink); height: 100%; }
.bar-row .count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- 입력 — 서식의 기입란. 테두리는 옅게, 초점은 검정. ---- */
.filters { display: flex; align-items: flex-start; gap: 10px; flex-wrap: nowrap; margin-bottom: 14px; width: 100%; min-width: 0; }
.filters input, .filters select,
.detail-panel select, .detail-panel textarea, .detail-panel input[type=text],
.kw-editor textarea,
.field-row input[type="number"], .field-row input[type="text"], .field-row input[type="time"], .field-row select,
.time-row input[type="time"] {
  border: 1px solid #c3c7cc; border-radius: var(--radius-sm);
  background: var(--canvas); color: var(--ink); font-family: inherit; font-size: var(--text-base);
  transition: border-color 0.12s ease;
}
:is(.filters, .detail-panel, .kw-editor, .field-row, .time-row) :is(input, select, textarea):hover { border-color: #8d9299; }
:is(.filters, .detail-panel, .kw-editor, .field-row, .time-row) :is(input, select, textarea):focus-visible { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.filters input, .filters select { padding: 8px 10px; min-width: 0; }
.filters select {
  padding: 8px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filters-group { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.filters-search { flex: 1 1 auto; min-width: 140px; padding-left: 10px; border-left: 1px solid var(--hairline); }
.filters-search input[type="text"] { flex: 1 1 80px; min-width: 60px; }
.filters-select { flex: 2 1 auto; min-width: 0; }
.filters-select select { flex: 1 1 70px; min-width: 44px; max-width: 130px; }
.filters-select label { flex-shrink: 0; white-space: nowrap; }
.filters .btn { flex-shrink: 0; white-space: nowrap; }

.score-legend {
  font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: 12px; line-height: 2.1;
}
.score-legend .tag { margin: 0 3px 0 2px; }

.table-scroll {
  overflow-x: auto; container-type: inline-size;
  background:
    linear-gradient(to right, var(--canvas) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--canvas) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(22,24,27,.22), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(22,24,27,.22), transparent) right / 14px 100% no-repeat scroll;
}
table.result-table:has(#historyBody) :is(th, td):nth-child(n+3) { text-align: right; }
table.result-table:has(#historyBody) :is(th, td):last-child { padding-right: 16px; }
table.result-table:has(#historyBody) :is(th, td):nth-child(1) { width: 22%; }
table.result-table:has(#historyBody) :is(th, td):nth-child(2) { width: 13%; }
table.result-table:has(#historyBody) :is(th, td):nth-child(n+3) { width: 13%; }
table.result-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-base); table-layout: fixed; }
table.result-table col.col-scrap { width: 4%; }
table.result-table col.col-title { width: 22%; }
table.result-table col.col-worktype { width: 6%; }
table.result-table col.col-agency { width: 10%; }
table.result-table col.col-date-post { width: 9%; }
table.result-table col.col-date-close { width: 9%; }
table.result-table col.col-price { width: 7%; }
table.result-table col.col-contract { width: 8%; }
table.result-table col.col-score { width: 10%; }
table.result-table col.col-keywords { width: 10%; }
table.result-table col.col-status { width: 5%; }
table.result-table col.rnd-col-tier { width: 10%; }
table.result-table col.rnd-col-title { width: 26%; }
table.result-table col.rnd-col-org { width: 14%; }
table.result-table col.rnd-col-period { width: 14%; }
table.result-table col.rnd-col-dday { width: 8%; }
table.result-table col.rnd-col-budget { width: 9%; }
table.result-table col.rnd-col-eligibility { width: 9%; }
table.result-table col.rnd-col-review { width: 6%; }
table.result-table col.rnd-col-new { width: 4%; }
/* 표 머리 — 공문서 표: 굵은 윗괘선, 음영 머리칸, 검정 아랫괘선 */
table.result-table th {
  text-align: left; padding: 9px 8px; background: var(--shade);
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule);
  color: var(--ink-secondary); font-weight: 700; white-space: nowrap; font-size: var(--text-sm);
}
table.result-table th.sortable { cursor: pointer; user-select: none; }
table.result-table th.sortable:hover { color: var(--ink); }
table.result-table th.sortable .sort-arrow { margin-left: 3px; color: var(--ink); }
.scrap-star {
  appearance: none; -webkit-appearance: none;
  border: none; background: none; box-shadow: none; border-radius: var(--radius-sm);
  cursor: pointer; line-height: 1; padding: 3px 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.scrap-star img { width: 15px; height: 15px; display: block; transition: transform 160ms var(--ease-out); }
.scrap-star:active img { transform: scale(0.85); }
.scrap-star:hover { background: var(--shade); }
.scrap-star:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.icon-star { width: 13px; height: 13px; vertical-align: -2px; display: inline-block; }
.sort-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; margin-bottom: 12px; }
.sort-toolbar-left { display: flex; gap: 16px; align-items: center; }
.checkbox-label { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); }
table.result-table td {
  font-variant-numeric: tabular-nums;
  padding: 11px 8px; border-bottom: 1px solid var(--divider-soft); vertical-align: top;
  overflow-wrap: break-word; line-height: 1.5;
}
table.result-table tr.result-row, table.result-table tr.rnd-result-row { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  table.result-table tr.result-row:hover td, table.result-table tr.rnd-result-row:hover td { background: var(--pearl); }
}
/* 펼쳐 읽는 공고는 연한 형광펜으로 칠해 둔 줄 */
table.result-table tr[aria-expanded="true"] td { background: var(--hl-yellow-wash); border-bottom-color: transparent; }
table.result-table tr.detail-row td { background: var(--hl-yellow-wash); border-bottom: 1px solid var(--hairline); }
table.result-table tr.result-row:focus-visible, table.result-table tr.rnd-result-row:focus-visible,
table.result-table th.sortable:focus-visible { outline-offset: -2px; }
.contract-private { color: var(--red-pen); font-weight: 700; }

/* ---- 판정 등급 = 형광펜 자국. 글자 줄 높이에 맞춰 위아래를 조금 비우고
   양끝을 불규칙하게 둥글려 손으로 그은 획처럼 보이게 한다.
   상태 표시 = 펜. 신규·취소·마감임박은 빨간 펜 도장, 나머지는 연필 테두리. ---- */
.tag {
  display: inline-block; padding: 2px 7px; border-radius: 1px 5px 2px 6px / 3px 2px 4px 2px;
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1.45;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
table.result-table td .tag { padding: 1px 7px; }
.tag.core { background: var(--hl-yellow); }
.tag.related { background: var(--hl-green); }
.tag.review { background: var(--hl-pink); }
.tag.excluded { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--hairline); border-radius: var(--radius-xs); }
.tag.unscored { background: transparent; color: var(--ink-muted); outline: 1px dashed #aab0b6; outline-offset: -1px; border-radius: var(--radius-xs); }
.badge-line .tag.core { background: transparent; color: var(--positive); box-shadow: inset 0 0 0 1.5px currentColor; border-radius: var(--radius-xs); }
.tag.new, .tag.cancelled, .tag.dday-urgent {
  background: transparent; color: var(--red-pen); box-shadow: inset 0 0 0 1.5px currentColor; border-radius: var(--radius-xs);
}
.tag.new { font-size: var(--text-xs); letter-spacing: 0.04em; }
.tag.cancelled { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tag.changed { background: var(--hl-pink); }
.tag.renotice { background: transparent; color: var(--blue-pen); box-shadow: inset 0 0 0 1.5px currentColor; border-radius: var(--radius-xs); }
.tag.dday-normal { background: transparent; color: var(--ink-secondary); box-shadow: inset 0 0 0 1px #b8bdc3; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; }
.tag.dday-urgent { font-variant-numeric: tabular-nums; }
.tag.dday-closed { background: var(--shade); color: var(--ink-muted); border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; }

.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.pager .page-btn {
  min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--canvas); color: var(--ink); font-size: var(--text-sm); cursor: pointer; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease;
}
.pager .page-btn:hover:not(:disabled):not(.active) { background: var(--shade); }
.pager .page-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; cursor: default; }
.pager .page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pager .page-ellipsis { padding: 0 4px; color: var(--ink-muted); font-size: var(--text-sm); }
.pager .page-total { margin-left: 8px; font-size: var(--text-sm); color: var(--ink-muted); }

.detail-panel { padding: 12px 6px 16px; font-size: var(--text-base); color: var(--ink-secondary); line-height: 1.7; }
.detail-panel .reasons { margin: 6px 0 12px; padding-left: 18px; max-width: 80em; }
.detail-panel .reasons li { margin-bottom: 4px; }
.detail-panel .reasons li::marker { color: var(--ink-muted); }
.detail-panel .row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.detail-panel select, .detail-panel textarea, .detail-panel input[type=text] { padding: 7px 10px; }
.detail-panel textarea { width: 100%; min-height: 50px; margin-top: 8px; resize: vertical; }
.detail-panel .detail-line { margin-top: 6px; }
.detail-panel .row-actions.detail-line { margin-top: 10px; }
.detail-panel .rnd-assignee-input { width: 100px; }
.reanalyze-msg { font-size: var(--text-sm); }
.save-note-msg { font-size: var(--text-xs); color: var(--positive); margin-left: 6px; }

/* 입찰참가자격 발췌 — 원문 인용이라 판정(형광펜)과 구분되게 붙임 문서처럼 */
.eligibility-block {
  background: var(--canvas); border: 1px solid var(--hairline);
  padding: 12px 14px; margin: 10px 0 12px;
}
.eligibility-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.eligibility-item { margin-bottom: 10px; }
.eligibility-file { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: 3px; }
.eligibility-text {
  border-left: 1px solid var(--ink-muted); padding-left: 12px;
  font-size: var(--text-sm); line-height: 1.75; color: var(--ink); overflow-wrap: break-word; max-width: 90em;
}
.eligibility-note { font-size: var(--text-sm); color: var(--ink-muted); }

.field-label { margin: 0 0 8px; font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.error-box {
  background: var(--red-pen-tint); border: 1px solid #f3c5c5; color: var(--red-pen); border-radius: var(--radius-xs);
  padding: 11px 16px; font-size: var(--text-base); margin-bottom: 14px;
}
.error-box.warn-box { background: var(--review-tint); border-color: #f1df9a; color: var(--review); }

.kw-editor textarea {
  width: 100%; min-height: 90px; padding: 12px; resize: vertical; line-height: 1.6;
}
.kw-editor label { font-size: var(--text-base); font-weight: 700; color: var(--ink); display: block; margin: 28px 0 8px; }
.hint { font-size: var(--text-sm); color: var(--ink-muted); margin: 6px 0 12px; line-height: 1.6; max-width: 72em; }
.field-row { display: flex; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.field-row .field { flex: 1; min-width: 160px; }
.field-row .field label {
  font-size: var(--text-base); font-weight: 700; color: var(--ink); display: block; margin: 0 0 6px;
}
.field-row input[type="number"], .field-row input[type="text"], .field-row input[type="time"], .field-row select {
  width: 100%; padding: 9px 12px;
}
.save-row { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 12px; }
.save-msg { font-size: var(--text-base); color: var(--positive); font-weight: 700; }

.time-list { display: flex; flex-direction: column; gap: 8px; }
.time-row { display: flex; align-items: center; gap: 8px; }
.time-row input[type="time"] { padding: 9px 12px; }
.time-row .btn-remove-time {
  width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--canvas); color: var(--ink-muted); cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.time-row .btn-remove-time:hover { background: var(--red-pen-tint); color: var(--red-pen); border-color: #f3c5c5; }

.empty { color: var(--ink-muted); font-size: var(--text-base); padding: 28px 0; text-align: center; }
.empty-dash { color: var(--ink-muted); }

.section-desc { font-size: var(--text-sm); color: var(--ink-secondary); line-height: 1.65; margin: 0 0 12px; max-width: 72em; }
.section-desc.lead { font-size: var(--text-base); }
.section-desc.muted { color: var(--ink-muted); }
.section-desc.spaced { margin-top: 16px; }
.status-line { font-size: var(--text-sm); color: var(--ink-secondary); margin-top: 6px; }
.status-line.muted { color: var(--ink-muted); margin-top: 8px; }
.status-text { font-size: var(--text-sm); }
.badge-line { font-size: var(--text-base); line-height: 1.6; margin-bottom: 12px; }
.inline-check { font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; }
.inline-check:not(:last-child) { margin-bottom: 14px; }
.time-list + .btn { margin-top: 8px; }
.field-row-spaced { margin-top: 18px; }
.kw-editor textarea.tall { min-height: 180px; }
.kw-editor textarea.short { min-height: 50px; }

/* ---- 반응형 — 720px 이하는 폰(ngrok 외부 접속). 종이는 책상 없이 화면을
   꽉 채우고, 필터는 여러 줄로 감싼다. ---- */
@media (max-width: 720px) {
  main { padding: 4px 16px 28px; margin: 0 auto; box-shadow: none; }
  body { background: var(--canvas); }
  .section { padding-top: 24px; }
  .section-head { flex-wrap: wrap; gap: 8px; }

  header.topbar { padding: 0 14px; height: 48px; }
  header.topbar .title-block { gap: 10px; }
  header.topbar .title-block > div:not(.logo) { padding-left: 10px; }
  header.topbar .subtitle { display: none; }
  header.topbar #nowTime { display: none; }
  header.topbar .logo { height: 24px; }
  nav.source-switch { padding: 0 6px; top: 0; position: static; }
  nav.tabs { padding: 0 6px; }

  .card-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 16px; }
  .stat-card .value { font-size: 23px; padding: 12px 12px 14px; }
  .stat-card .label { padding: 7px 24px 7px 12px; min-height: 44px; }
  .stat-card-link::after { top: 18px; }

  table.result-table { min-width: 980px; }
  table.result-table col.col-scrap { width: 48px; }
  tr.result-row td:first-child { padding: 6px 4px; }

  .filters { flex-wrap: wrap; }
  .filters-group { flex-wrap: wrap; width: 100%; }
  .filters-select {
    flex-basis: 100%; border-bottom: 1px solid var(--hairline);
    padding-bottom: 10px; margin-bottom: 2px;
  }
  .filters-select select { flex: 1 1 120px; max-width: none; }
  .filters-search { min-width: 0; flex-basis: 100%; border-left: none; padding-left: 0; }
  .filters-search input[type="text"] { flex: 1 1 140px; }
  .filters .btn { flex: 1 1 100%; }

  .sort-toolbar { flex-wrap: wrap; gap: 8px; }

  .pager .page-btn { min-width: 40px; height: 40px; }
  .scrap-star { min-width: 40px; min-height: 40px; }
  .time-row .btn-remove-time { width: 40px; height: 40px; }

  .bar-row { grid-template-columns: 84px 1fr 36px; gap: 6px; }

  .field-row { gap: 10px; }

  /* 상세 펼침 행: colspan 셀은 표의 최소폭(980px)을 물려받으므로, 안쪽 패널을
     스크롤 컨테이너의 가시 폭(100cqw)으로 좁히고 왼쪽에 고정한다. */
  tr.detail-row td { position: sticky; left: 0; }
  tr.detail-row .detail-panel {
    position: sticky; left: 0;
    width: calc(100cqw - 16px); max-width: calc(100cqw - 16px); /* td 좌우 패딩 8px씩 */
    box-sizing: border-box; overflow-wrap: break-word;
  }
}