* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: #f5f6f8;
  color: #222;
  line-height: 1.5;
}

header {
  background: #2a3142;
  color: white;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
header h1 { margin: 0; font-size: 1.6rem; }
.subtitle { margin: 0.3rem 0 0; opacity: 0.8; font-size: 0.9rem; }

.header-nav { display: flex; align-items: center; gap: 0.8rem; }
.header-nav a { color: #b9d0ff; text-decoration: none; font-size: 0.9rem; }
.header-nav a:hover, .header-nav a.active { text-decoration: underline; }
.header-nav #me-info { font-size: 0.9rem; opacity: 0.8; }
.header-nav button {
  padding: 0.4rem 0.9rem;
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}
.header-nav button:hover { background: rgba(255,255,255,0.2); }

main {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}
/* 🔴 두 칸을 나란히 두는 화면(검토 결과)은 더 넓어야 합니다 — 1100px 를 반으로 나누면
   A4 한 쪽이 550px 라 글자를 못 읽습니다(2026-09-15 사용자 지적). */
main.wide { max-width: 1700px; }

section {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.hidden { display: none !important; }

.hint { font-size: 0.9rem; color: #888; margin: 0.4rem 0; }
/* 추천과 어긋난 선택·감당 양식 없음. 조용히 지나가면 안 되는 자리라 색을 준다. */
.hint.warn { color: #b03030; font-weight: 600; }
/* 제목 옆 "(선택)" — 필수와 선택을 한눈에 가른다. */
.hint-inline { font-size: 0.8em; font-weight: 400; color: #888; }

button, input, select { font: inherit; }

/* ------- 폼 ------- */
.inline-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
/* 글자를 받는 입력은 종류를 가리지 않고 같은 모양 — text·password 만 적었더니 이메일 칸만 낮게 보였다(2026-10-16 · 검수자 칸). */
.inline-form input[type="text"], .inline-form input[type="password"],
.inline-form input[type="email"], .inline-form input[type="tel"], .inline-form input[type="number"],
.inline-form input[type="date"], .inline-form input[type="search"], .inline-form input[type="url"],
.inline-form select {
  padding: 0.5rem 0.7rem;
  border: 1px solid #ccd;
  border-radius: 4px;
  font-size: 0.95rem;
}
.inline-form .checkbox { display: flex; gap: 0.3rem; align-items: center; font-size: 0.9rem; }
.inline-form button {
  padding: 0.5rem 1rem;
  background: #4a78d6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.inline-form button:hover { background: #3563bf; }

/* ------- 테이블 (사용자/잡 공용) ------- */
#user-table, #jobs-table, .jobs-table, .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
#user-table th, #user-table td,
#jobs-table th, #jobs-table td,
.jobs-table th, .jobs-table td,
.data-table th, .data-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid #eef;
}
#user-table th, #jobs-table th, .jobs-table th, .data-table th {
  background: #f5f6f8; font-weight: 600;
}
#user-table td button, .data-table td button {
  padding: 0.3rem 0.6rem;
  margin-right: 0.3rem;
  font-size: 0.8rem;
  background: #f0f2f7;
  border: 1px solid #ccd;
  border-radius: 3px;
  cursor: pointer;
}
#user-table td button:hover, .data-table td button:hover { background: #e3e7ef; }
#user-table td button.user-delete-btn {
  background: #c53030; color: white; border-color: #a82828;
}
#user-table td button.user-delete-btn:hover { background: #9a2424; }

#jobs-table td a, .jobs-table td a {
  color: #4a78d6; text-decoration: none; margin-right: 0.4rem;
}
#jobs-table td a:hover, .jobs-table td a:hover { text-decoration: underline; }
#jobs-table td .row-action, .jobs-table td .row-action {
  padding: 0.25rem 0.65rem;
  border: 1px solid #ccd;
  border-radius: 3px;
  background: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  color: #444;
}
#jobs-table td .delete-btn:hover:not(:disabled),
.jobs-table td .delete-btn:hover:not(:disabled) {
  background: #fff4f4; border-color: #c53030; color: #c53030;
}

/* ------- 상태 색상 ------- */
.state-queued { color: #888; }
.state-running { color: #d68a1c; }
.state-success { color: #2a8f3e; font-weight: 600; }
.state-failed { color: #c53030; font-weight: 600; }

/* ------- 진행 progress bar (콘텐츠 프로젝트 목록) ------- */
.progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 250px;
}
.progress-stages {
  display: flex;
  gap: 3px;
}
.progress-step {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: #e8ebef;
  transition: background 0.3s;
}
.progress-step.pending { background: #e8ebef; }
.progress-step.done    { background: #2a8f3e; }
.progress-step.failed  { background: #c53030; }
/* skipped: KOCCA 잡의 추출 단계 또는 manual 잡의 KOCCA 단계 — 회색 사선 */
.progress-step.skipped {
  background: repeating-linear-gradient(45deg, #d0d4da 0 4px, #e8ebef 4px 8px);
  opacity: 0.6;
}
.progress-step.active {
  background: #4a78d6;
  animation: progress-pulse 1.4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.progress-step.active::after {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: progress-shimmer 1.4s linear infinite;
}
@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes progress-shimmer {
  0%   { left: -40%; }
  100% { left: 100%; }
}
.progress-label {
  font-size: 0.8rem;
  color: #666;
}
.progress-label.done   { color: #2a8f3e; font-weight: 600; }
.progress-label.failed { color: #c53030; font-weight: 600; }
.progress-elapsed {
  color: #888;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  margin-left: 0.3rem;
}
.progress-label.done .progress-elapsed,
.progress-label.failed .progress-elapsed { color: inherit; opacity: 0.7; }

/* 문서 파싱 진행 — quokka 서버의 큐/단계 (2026-08-31). 경과시간과 같은 급으로 둔다:
   상태를 덮지 않고 옆에 붙는 부가 정보다. */
.parse-progress { color: #6b7280; font-size: 0.85em; }
/* 저하는 «실패»가 아니라 «확인필요»다 — 빨강이 아니라 주의색으로 둔다. */
.parse-degraded { color: #b45309; font-size: 0.85em; font-weight: 600; }
/* 「저하됐는지 모른다」 — 저하와 다른 축이라 색도 다르다(경고 아님, 미확인). */
.parse-unverified { color: #6b7280; font-size: 0.85em; font-weight: 600; }
.progress-label.done .parse-progress,
.progress-label.failed .parse-progress { color: inherit; opacity: 0.7; }

/* ------- 에러/성공 메시지 ------- */
.error {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: #fff4f4;
  border-left: 4px solid #c53030;
  color: #8a1f1f;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
}
.success {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: #f0fdf4;
  border-left: 4px solid #2a8f3e;
  color: #1c6b2c;
}

/* ------- 내 작업 헤더 ------- */
.my-jobs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
}
.my-jobs-header h2 { margin: 0; }
.jobs-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.jobs-actions button {
  padding: 0.4rem 0.9rem;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ------- 로그인 / 비밀번호 변경 ------- */
.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #2a3142;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.auth-card h1 { margin: 0 0 0.3rem; }
.auth-card .subtitle { margin: 0 0 1.2rem; color: #666; font-size: 0.9rem; }
.auth-card form { display: flex; flex-direction: column; gap: 0.8rem; }
.auth-card label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: #555; }
.auth-card input {
  padding: 0.6rem 0.8rem;
  border: 1px solid #ccd;
  border-radius: 4px;
  font-size: 1rem;
}
.auth-card input:focus { outline: 2px solid #4a78d6; outline-offset: -1px; }
.auth-card button {
  margin-top: 0.5rem;
  padding: 0.7rem;
  background: #4a78d6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}
.auth-card button:hover { background: #3563bf; }
.auth-card button:disabled { background: #b9bfcc; cursor: not-allowed; }

/* ------- 업로드 zone ------- */
.drop-zone {
  display: block;
  padding: 2.5rem 1.5rem;
  border: 2px dashed #b9bfcc;
  border-radius: 6px;
  text-align: center;
  background: #fafbfd;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.drop-zone.drag-over { border-color: #4a78d6; background: #eff4ff; }
.drop-zone input[type="file"] { display: none; }
.drop-title { margin: 0 0 0.4rem; font-size: 1.05rem; color: #333; }
.drop-hint { margin: 0; font-size: 0.85rem; color: #777; }
/* 새 검토 입력 넷 — 2칸 × 2줄 (2026-10-19 사용자 «너무 장황하다»). 칸 이름 폭을 맞추고, 칸의 상황 안내는 그 칸 아래에. */
.review-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 2rem; margin: 1rem 0; max-width: 960px; }
.review-fields .field { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 0.6rem; margin: 0; }
.review-fields .field input, .review-fields .field select { width: 100%; height: 2rem; box-sizing: border-box; }
.review-fields .hint { margin: 0.25rem 0 0 8.1rem; }
@media (max-width: 760px) { .review-fields { grid-template-columns: 1fr; } }
.drop-preview {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  background: white;
  border: 1px solid #d6dae2;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #333;
  text-align: left;
  max-height: 200px;
  overflow: auto;
}
.drop-preview ul { margin: 0; padding-left: 1.2rem; }

/* ------- 편집 페이지 ------- */
.editor-form { display: flex; flex-direction: column; gap: 1rem; }
.editor-form label { display: flex; flex-direction: column; gap: 0.3rem; }
.editor-form label > span { font-size: 0.85rem; color: #555; font-weight: 600; }
.editor-form input[type="text"],
.editor-form textarea {
  padding: 0.5rem 0.7rem;
  border: 1px solid #ccd;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
}
.editor-form textarea { min-height: 80px; resize: vertical; }

.editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem 1.2rem;
}

details.editor-group {
  background: #fafbfd;
  border: 1px solid #e3e7ef;
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.8rem;
}
details.editor-group > summary {
  cursor: pointer;
  font-weight: 600;
  color: #2a3142;
  padding: 0.2rem 0;
}
details.editor-group[open] > summary { margin-bottom: 0.6rem; }

.array-empty-hint {
  font-size: 0.85rem;
  color: #999;
  font-style: italic;
  padding: 0.3rem 0.7rem;
}
.array-item {
  border-left: 3px solid #d6dae2;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.5rem;
}
.array-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.array-item-label {
  font-weight: 600;
  color: #666;
  font-size: 0.85rem;
}
.array-item-del {
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  border: 1px solid #c53030;
  background: #fff4f4;
  color: #c53030;
  border-radius: 3px;
  cursor: pointer;
}
.array-item-del:hover { background: #ffe0e0; }
.array-add-btn {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  border: 1px dashed #4a78d6;
  background: #fff;
  color: #4a78d6;
  border-radius: 4px;
  cursor: pointer;
}
.array-add-btn:hover { background: #eff4ff; }

/* ------- 이미지 슬롯 카드 ------- */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
}
.slot-card {
  border: 1px solid #d6dae2;
  border-radius: 6px;
  background: white;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.slot-key { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.8rem; color: #666; }
.slot-label { font-weight: 600; color: #2a3142; }
.slot-preview-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.slot-preview {
  width: 110px;
  height: 80px;
  background: #f0f2f7;
  border: 1px solid #d6dae2;
  border-radius: 4px;
  object-fit: contain;
  display: block;
}
.slot-preview-meta {
  font-size: 0.75rem;
  color: #777;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.slot-card .slot-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.slot-card .slot-actions button {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid #ccd;
  background: #f0f2f7;
  border-radius: 3px;
  cursor: pointer;
}
.slot-card .slot-actions button.danger {
  border-color: #c53030;
  background: #fff4f4;
  color: #8a1f1f;
}
.slot-drop {
  transition: border-color 0.15s, background 0.15s;
}
.slot-drop.drag-over {
  border-color: #4a78d6;
  background: #eff4ff;
}
.slot-drop-hint {
  font-size: 0.75rem;
  color: #999;
  text-align: center;
  margin-top: 0.2rem;
  font-style: italic;
}

/* ------- 작업 버튼 행 ------- */
.action-row {
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.btn-primary {
  padding: 0.6rem 1.4rem;
  background: #4a78d6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn-primary:hover { background: #3563bf; }
.btn-primary:disabled { background: #b9bfcc; cursor: not-allowed; }
.btn-success { background: #2a8f3e; }
.btn-success:hover { background: #207030; }
.btn-danger { background: #c53030; }
.btn-danger:hover { background: #9a2424; }

/* 🔴 셋째 단추 자리 — 저장(파랑)·HWPX 생성(초록) 옆의 **안 지우는** 동작.
   2026-09-08 사용자 지적: 「왜 버튼색이 알아볼 수가 없지?」 원인은 `.jobs-actions
   button` 이 `color: white` 만 주고 **배경은 안 주는** 것이다 — 클래스 없는 단추는
   「흰 글자 + 브라우저 기본 회색」이 되어 글자가 안 보인다. */
.btn-secondary { background: #5a6478; color: #fff; }
.btn-secondary:hover { background: #454d5e; }
.btn-secondary:disabled { background: #b9bfcc; cursor: not-allowed; }

/* 🔴 다음 사람이 클래스를 잊어도 **안 보이지는 않게** 한다. `:not([class])` 라서
   위의 클래스들과 다투지 않는다(클래스가 하나라도 있으면 안 걸린다). */
.jobs-actions button:not([class]) { background: #5a6478; }

/* ------- 마법사 스텝 표시 ------- */
.wizard-steps {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d6dae2;
}
.wizard-steps .step {
  flex: 1;
  padding: 0.7rem 0.9rem;
  background: #f5f6f8;
  border-right: 1px solid #d6dae2;
  font-size: 0.9rem;
  color: #888;
  text-align: center;
}
.wizard-steps .step:last-child { border-right: none; }
.wizard-steps .step.active { background: #4a78d6; color: white; font-weight: 600; }
.wizard-steps .step.done { background: #2a8f3e; color: white; }

footer { text-align: center; padding: 1rem; color: #888; font-size: 0.85rem; }

@media (max-width: 720px) {
  header { padding: 1rem; flex-direction: column; align-items: flex-start; }
  .header-nav { width: 100%; justify-content: flex-end; }
  main { padding: 0 0.8rem; margin: 1rem auto; }
  section { padding: 1rem; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input, .inline-form button, .inline-form select { width: 100%; }
}


/* ============================================================
 * P7: KOCCA 프로젝트 브라우저
 * ============================================================ */

.kocca-browser {
  background: #f5f8fc;
  border: 1px solid #d8e1ef;
  border-radius: 6px;
  padding: 1rem 1.2rem;
}
.kocca-browser h2 { margin: 0; }
.kocca-controls {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin: 0.6rem 0 0.4rem;
  flex-wrap: wrap;
}
.kocca-controls label {
  font-size: 0.9rem;
  color: #444;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.kocca-controls select {
  padding: 0.3rem 0.5rem;
  border: 1px solid #c0c8d8;
  border-radius: 4px;
  font-size: 0.9rem;
  background: white;
}
.kocca-banner { margin: 0.5rem 0; }
.kocca-banner-info { color: #555; }
.kocca-banner-error { color: #c53030; font-weight: 600; }

#kocca-table { width: 100%; margin-top: 0.5rem; }
#kocca-table th { background: #e7eef9; font-size: 0.88rem; }
#kocca-table td { font-size: 0.9rem; }

.btn-link {
  padding: 0.3rem 0.7rem;
  border: 1px solid #4a6cdd;
  background: white;
  color: #4a6cdd;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
}
.btn-link:hover { background: #f0f4ff; }

.ss-status { font-size: 0.85rem; padding: 0.2rem 0.5rem; border-radius: 3px; }
.ss-ok   { background: #e0f2e6; color: #1f6f31; }
.ss-warn { background: #fcefce; color: #8a6b1a; }

.src-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
}
.src-badge.src-kocca  { background: #e6f0fd; color: #1f4fae; }
.src-badge.src-manual { background: #f0f0f0; color: #555; }
.src-badge.src-done   { background: #e0f2e6; color: #1f6f31; }

/* 양식 선택 모달 */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }
.modal-body {
  background: white;
  border-radius: 8px;
  padding: 1.3rem 1.5rem;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.modal-body h3 { margin: 0 0 0.5rem; }
.modal-body select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #c0c8d8;
  border-radius: 4px;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.modal-actions button {
  padding: 0.45rem 1rem;
  border: 1px solid #c0c8d8;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}
.modal-actions button.btn-primary {
  background: #4a6cdd;
  color: white;
  border-color: #4a6cdd;
}

/* ------- /account 페이지 (My Account) ------- */
.account-page h2 { margin: 0 0 1.2rem; }
.account-section h3 { margin: 0 0 0.8rem; font-size: 1.05rem; color: #333; }

/* 계정 정보 dl */
.account-info {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: 0.95rem;
}
.account-info dt { color: #888; }
.account-info dd { margin: 0; color: #222; }

/* 폼 — staff_info / 비번 변경 공통 */
.account-section form { display: flex; flex-direction: column; gap: 0.8rem; max-width: 480px; }
.account-section label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: #555; }
.account-section input {
  padding: 0.5rem 0.7rem;
  border: 1px solid #ccd;
  border-radius: 4px;
  font-size: 0.95rem;
}
.account-section input:focus { outline: 2px solid #4a78d6; outline-offset: -1px; }
.account-section .form-actions { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.account-section button {
  padding: 0.6rem 1.2rem;
  background: #4a78d6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
}
.account-section button:hover { background: #3563bf; }
.account-section button:disabled { background: #b9bfcc; cursor: not-allowed; }
.account-section button.danger { background: #b94545; }
.account-section button.danger:hover { background: #9a2424; }
.account-section code {
  background: #f3f5fa;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.85em;
}

/* ------- 추출 확인 신호 (B1) -------
   두 종류를 **색으로 가른다**: 값이 채워진 채 확인이 필요한 것(주황)과
   빈칸의 이유(회색). 같은 배지로 뭉치면 "확인 필요"와 "왜 비었나"가 섞인다. */
.extract-signals {
  border: 1px solid #e0d0b0; background: #fffdf5; border-radius: 6px;
  padding: 0.6rem 0.8rem; margin: 0 0 0.8rem; font-size: 0.9rem;
}
.extract-signals .signal-doc { margin-top: 0.3rem; }
/* 3층(그려서 본 결과)의 경고 — 「덮였다」는 값이 잘려 나갈 수 있다는 뜻이라 눈에 띄어야
   한다. 다만 **막지는 않는다**(조기경보). */
.extract-signals .signal-doc.warn {
  border-left: 3px solid #d08a3a; padding-left: 0.55rem; background: #fff8ef;
  border-radius: 0 4px 4px 0;
}
.field-signals { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
/* 🔴 신호의 **상세를 화면에** — 예전엔 `title=` 툴팁 안 JSON 이라 마우스를 올려야 보였고,
   올려도 읽을 수 없었다. 충돌 자리에서 이게 결정적이다: 무엇과 무엇이 갈렸는지 모르면
   운영자가 서류를 처음부터 뒤져야 한다(사용자 지시 2026-08-13). 배지와 같은 줄이 아니라
   **아래 줄 전체**를 쓴다 — 인용이 길다. */
.field-signals .signal-detail {
  flex-basis: 100%; font-size: 0.76rem; line-height: 1.45;
  color: #5a4a4a; margin-top: 0.15rem; word-break: break-word;
}
.signal-badge {
  font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: 10px;
  border: 1px solid transparent; cursor: help;
}
.signal-badge.signal-check { background: #fff0d6; border-color: #e0b060; color: #7a4a00; }
/* 🔴 회색(#eee)이었다 — "필수인데 비었음"이 화면에서 **가장 눈에 안 띄는** 것이었다.
   비어서 사용자가 직접 채워야 하는 자리이므로 확인(주황)보다 세게 잡는다. */
.signal-badge.signal-empty { background: #fdeaea; border-color: #d99; color: #8a1f1f; }

/* ------- 확인이 필요한 필드 자체를 표시한다 -------
   사용자 지시(2026-08-08, 주소 건): 값이 미심쩍으면 비워 두고 **화면에서 하이라이트해
   사용자가 다시 확인·입력**하게 한다. 배지만 달면 긴 양식에서는 스크롤로 지나친다. */
.field-flagged {
  border-left: 3px solid #e0b060; padding-left: 0.55rem;
  margin-left: -0.55rem; border-radius: 0 4px 4px 0;
}
.field-flagged-empty { border-left-color: #c0392b; background: #fff7f7; }
/* 🔴 `.editor-form` 을 앞에 둔다 — 안 두면 `.editor-form input[type="text"]`(특이도 0,2,1)
   에 **져서 한 번도 안 칠해진다.** 2026-08-08 에 넣은 이 빨간 테두리가 그렇게 죽어 있었고,
   배지만 보고 됐다고 여겼다(2026-08-13 진짜 브라우저 탐침이 잡았다). */
.editor-form .field-flagged-empty > input,
.editor-form .field-flagged-empty > textarea,
.editor-form .field-flagged-empty > select { border-color: #c0392b; background: #fffafa; }
/* ------- 출처가 어긋난 칸 (콘진원 ②) -------
   콘진원 요청 문구가 "차이나는 부분은 붉은색으로 표기"다. 다만 **화면에서만** 붉다 —
   인쇄물에 붉은 글씨가 남으면 그대로 제출된다. 그리고 "비었다"(빨강)와 구별되어야 하므로
   테두리를 점선으로 둔다: 값은 있는데 **다른 말을 한 출처가 있다**는 뜻이다. */
.field-conflict {
  border-left: 3px dashed #c0392b; padding-left: 0.55rem;
  margin-left: -0.55rem; border-radius: 0 4px 4px 0;
}
.signal-badge.signal-conflict {
  background: #fdeaea; border-color: #c0392b; color: #a01f1f; font-weight: 600;
}
.signal-conflict-head { margin-top: 0.45rem; color: #a01f1f; }
/* 합쳐진 항목 — 원문을 열어 볼 이유가 있다는 표시(세부가 흘렀을 수 있다). */
.signal-badge.agree-merged { border-style: dashed; }

/* ------- 보고서 문장 ↔ 신청서류 원문이 어긋난 자리 (콘진원 ②) -------
   > "사업계획서에는 예상매출을 50억원으로 적었으나 평가위원이 평가 시 5억원으로 오타를
   >  내는 경우 … 차이나는 부분 있을 시 붉은색 글씨로 표기되어 담당자가 재확인 가능"

   요청대로 붉게 칠하되 **화면에서만** 붉다 — 인쇄물(.hwpx)에 남으면 그대로 제출된다.
   출처 어긋남(`.field-conflict`, 점선)과 **다르게** 그린다: 저쪽은 "우리 안의 두 출처가
   다른 말을 했다"이고 이쪽은 "**서류와 다르다**"라 담당자가 할 일이 다르다. */
.field-crosscheck {
  border-left: 3px solid #c0392b; padding-left: 0.55rem;
  margin-left: -0.55rem; border-radius: 0 4px 4px 0;
}
.crosscheck-box {
  margin-top: 0.4rem; padding: 0.45rem 0.6rem; border-left: 3px solid #c0392b;
  background: #fff7f7; border-radius: 0 4px 4px 0; font-size: 0.86rem;
}
.crosscheck-box .attr-head { color: #a01f1f; font-weight: 600; margin-bottom: 0.3rem; }
.crosscheck-line { display: flex; gap: 0.4rem; align-items: baseline; margin: 0.18rem 0;
                   flex-wrap: wrap; }
.signal-badge.crosscheck-badge {
  background: #fdeaea; border-color: #c0392b; color: #a01f1f; font-weight: 700;
}
/* 어느 평가위원에서 왔나 — 붉은 표시만으로는 고칠 수 없다(오류 추적, 사용자 요구). */
.crosscheck-who { color: #666; font-size: 0.78rem; }

/* ------- SWOT 합의 정도 (콘진원 ③) -------
   🔴 **화면 전용**이다. 콘진원 요청 문구는 볼드/언더바/이탤릭이지만 사용자 결정(2026-08-09)
   대로 인쇄물에는 넣지 않는다 — 보고서에 남으면 그대로 제출되고 되돌릴 수 없다.
   대신 편집 화면에서 요청한 그 세 서식으로 보여 주어 눈에 익은 규칙을 유지한다. */
.agree-badge { background: #eef4ff; border-color: #7a9ccc; color: #1f3f7a; }
.field-agreed.agree-all    > input, .field-agreed.agree-all    > textarea { font-weight: 700; }
.field-agreed.agree-majority > input,
.field-agreed.agree-majority > textarea { text-decoration: underline; }
.field-agreed.agree-few    > input, .field-agreed.agree-few    > textarea { font-style: italic; }
.field-agreed { border-left: 3px solid #7a9ccc; padding-left: 0.55rem; margin-left: -0.55rem; }

/* ------- 의견 본문의 문장별 귀속 (콘진원 ③-b) -------
   본문은 한 덩어리라 칸에 배지를 못 붙이고, 문단 단위로 붙이면 **항상 "전원"**이 된다
   (실측: 위원 76명 전원이 같은 주제 섹션을 쓴다). 그래서 본문 아래에 문장 목록을 편다.
   여기도 **화면 전용**이다 — 인쇄물엔 안 들어간다. */
.opinion-attribution {
  margin-top: 0.4rem; padding: 0.45rem 0.6rem; border-left: 3px solid #7a9ccc;
  background: #f7faff; border-radius: 0 4px 4px 0; font-size: 0.86rem;
}
.opinion-attribution .attr-head { color: #1f3f7a; font-weight: 600; margin-bottom: 0.3rem; }
.attr-line { display: flex; gap: 0.4rem; align-items: baseline; margin: 0.18rem 0; }
.attr-line .attr-text { color: #333; }
/* 🔴 전원=굵게 · 과반=밑줄 · 소수=기울임 (콘진원 ③ · 사용자 결정 2026-08-09,
   `docs/8-7-daytime.md` §31-⑤). SWOT 칸에는 `.field-agreed.agree-*` 로 이미 걸려
   있었고 의견 문장 목록에는 **배지만** 있었다 — 배지를 읽어야 세기를 아는 화면은
   「한눈에 훑는다」는 규칙의 뜻을 반쯤 잃는다. 화면 전용이다(인쇄물엔 안 들어간다).
   덧칠 순서: 「수정됨」 줄의 취소선이 이겨야 한다 — 아래 `.attr-stale` 규칙이
   선택자가 더 구체적이라 그대로 이긴다. */
.attr-line .attr-text.agree-all      { font-weight: 700; }
.attr-line .attr-text.agree-majority { text-decoration: underline; }
.attr-line .attr-text.agree-few      { font-style: italic; }
/* 범례 — 보기와 **같은 서식**으로 적어 글자 자체가 예시가 되게 한다 (사용자 요청). */
.agree-legend { margin-left: 0.6rem; font-weight: 400; color: #6b7079; font-size: 0.82em; }
.agree-legend .attr-text.agree-all      { font-weight: 700; color: #333; }
.agree-legend .attr-text.agree-majority { text-decoration: underline; color: #333; }
.agree-legend .attr-text.agree-few      { font-style: italic; color: #333; }
.signal-badge.attr-none { background: #f2f2f2; border-color: #bbb; color: #666; }
/* 본문이 고쳐져 그 문장이 더 이상 없는 줄 — 귀속을 믿으면 안 된다는 표시. */
.attr-line.attr-stale { opacity: 0.5; }
.attr-line.attr-stale .attr-text { text-decoration: line-through; }
.attr-stale-mark { color: #a01f1f; font-size: 0.78rem; }

/* 값을 넣으면 강조만 거둔다 — 배지(왜 비었나)는 기록이라 남긴다. */
.field-filled-in { background: transparent; border-left-color: #9bbf7a; }
.editor-form .field-filled-in > input,
.editor-form .field-filled-in > textarea,
.editor-form .field-filled-in > select { border-color: #9bbf7a; background: #fff; }
/* 요약에서 이동해 왔을 때 잠깐 눈에 띄게. */
.field-jumped { animation: field-jump-flash 1.6s ease-out; }
@keyframes field-jump-flash {
  0%, 40% { background: #fff2c0; }
  100%    { background: transparent; }
}
.signal-jump {
  background: none; border: none; padding: 0; font: inherit; font-weight: 600;
  color: #2f5fbf; text-decoration: underline; cursor: pointer;
}
.signal-jump:hover { color: #17408a; }
/* 칸별 할 일(2026-10-18) — «비어 있는 칸» 은 칸 이름을 한 줄에 잇고, «값을 확인할 칸» 은 칸마다 이유 한 줄. */
.extract-signals .todo-group { margin-top: 0.35rem; }
.extract-signals .todo-names { margin: 0.15rem 0 0 0.6rem; line-height: 1.7; }
.extract-signals .todo-row { margin: 0.2rem 0 0 0.6rem; }
.extract-signals .todo-why { font-size: 0.8rem; color: #6b5a3a; margin-left: 0.2rem; }
.extract-signals .todo-human summary { cursor: pointer; }
/* 점검 기록 — 할 일이 없는 사실(«없음»·잰 숫자·검사 사유). 지우지 않고 접는다(문의 때 펼쳐 읽는다). */
.extract-signals .diag-record { margin-top: 0.5rem; color: #6b6b6b; font-size: 0.82rem; }
.extract-signals .diag-record summary { cursor: pointer; }
.extract-signals .diag-record .hint { margin-top: 0.2rem; }
.render-warnings { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.render-warnings li { cursor: help; }

/* ------- 신청상품 확인 (업로드 3단계) -------
   근거를 눈으로 대조할 수 있어야 확인이 형식적 통과가 되지 않는다. */
.product-evidence { margin: 0.6rem 0; }
.product-evidence img {
  max-width: 100%; border: 1px solid #ccd; border-radius: 4px; background: #fff;
}
/* 서류 검토의 근거 그림은 **작게** — 300DPI 조각을 화면 폭 그대로 그리면 입력 칸을 밀어내고 한눈에 안 들어온다(2026-10-19 사용자
   «너무 크게 보여져서 서류를 제대로 읽을수가 없네»). 누르면 원래 크기로 펼친다. */
#subtype-evidence img { max-width: min(100%, 720px); max-height: 480px; width: auto; height: auto; cursor: zoom-in; }
#subtype-evidence img.enlarged { max-width: 100%; max-height: none; cursor: zoom-out; }
.product-evidence pre {
  white-space: pre-wrap; word-break: break-all; background: #f7f8fa;
  border: 1px solid #e0e3e8; border-radius: 4px; padding: 0.6rem; font-size: 0.85rem;
  margin: 0;
}

/* ------- 표본값 잔류 (§25) -------
   "확인해 보세요"가 아니라 **등록을 막는 사실**이다. pending 항목 하나로 섞이면
   스크롤에 묻히고, 관리자는 4단계까지 채우고 나서야 막힌 것을 안다. */
.leftover-block {
  margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 6px;
  border: 1px solid #c0392b; background: #fff5f5; color: #7a1f1f;
}
.leftover-list { margin: 0.4rem 0 0; padding-left: 1.2rem; max-height: 14rem; overflow-y: auto; }
.leftover-list li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.leftover-ok {
  margin-top: 0.6rem; padding: 0.4rem 0.7rem; border-radius: 6px;
  border: 1px solid #9bbf7a; background: #f6fbf3; color: #33591f; font-size: 0.9rem;
}

/* ------- 충돌 후보를 **한 번 눌러 넣기** (사용자 지시 2026-08-13) -------
   "사용자가 골라서 넣을 수 있도록 하면 좋겠어. … 아니면 경고에서 두 항목을 다 보여주고
   직접 입력하라고 하든지." 입력칸은 그대로 두므로 직접 입력이 계속 된다 — 어느 후보도
   맞지 않는 자리가 실제로 있다(표기만 다른 같은 값 · 한쪽이 잘린 값). */
.signal-choices {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.3rem; margin-top: 0.25rem;
}
.signal-choices-lead { font-size: 0.76rem; color: #6a5a5a; }
.signal-choices-hint { font-size: 0.72rem; color: #8a8a8a; }
.signal-choice {
  font-size: 0.78rem; padding: 0.12rem 0.5rem; border-radius: 10px;
  border: 1px solid #b0b8c8; background: #eef3fb; color: #1f3a5f; cursor: pointer;
}
.signal-choice:hover { background: #dde8f8; border-color: #7f95bb; }
.signal-choice:focus-visible { outline: 2px solid #4a7fd0; outline-offset: 1px; }

/* ------- 🔴 값이 **갈린** 칸은 칸 자체를 빨갛게 -------
   사용자 지시(2026-08-13, 참고 이미지 첨부): *"자본금 칸 자체를 빨간색으로 하이라이트 …
   정확히는 conflict 가 난 칸이지."* 왼쪽 띠만으로는 긴 양식에서 눈에 안 들어온다.

   `.field-flagged-empty`(비었다 — 이유 있음) 위에 얹는다. 갈린 칸은 그중에서도
   **사람이 골라야만 채워지는** 자리라 한 단계 세게 잡는다.
   🔴 화면에서만 빨갛다 — 인쇄물(.hwpx)에 붉은 글씨가 남으면 그대로 제출된다. */
.editor-form .field-conflicted > input,
.editor-form .field-conflicted > textarea,
.editor-form .field-conflicted > select {
  border: 1.5px solid #d93025; border-radius: 5px; background: #fff;
}
.editor-form .field-conflicted > input:focus,
.editor-form .field-conflicted > textarea:focus,
.editor-form .field-conflicted > select:focus { outline: 2px solid #d93025; outline-offset: 1px; }
/* 참고 이미지의 경고줄 모양 — 알약 배지가 아니라 **⊗ 가 붙은 붉은 한 줄**. */
.field-conflicted .signal-badge.signal-empty {
  background: transparent; border-color: transparent; color: #d93025;
  font-weight: 600; padding-left: 0; cursor: default;
}
.field-conflicted .signal-badge.signal-empty::before { content: "⊗ "; }
.field-conflicted .signal-detail { color: #a32a20; }

/* 신청서 양식 고르기 — 드롭다운이 아니라 스크롤 목록 (2026-09-02 사용자 결정).
   접힌 목록은 «무엇이 있는지»도 «누가 쓰는지»도 안 보이고 첫 항목이 조용히 골라진다. */
.pick-list {
  max-height: 11rem;
  overflow-y: auto;
  border: 1px solid var(--line, #d7dbe0);
  border-radius: 6px;
  background: #fff;
  margin: 0.4rem 0;
}
.pick-list .pick-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid #eef1f4;
  cursor: pointer;
}
.pick-list .pick-item:last-child { border-bottom: none; }
.pick-list .pick-item:hover { background: #f5f8ff; }
.pick-list .pick-name { flex: 1 1 auto; word-break: break-all; }
/* 「누가 쓰나」는 서버가 계약에서 파생해 준다 — 화면이 표를 들면 낡는다. */
.pick-list .pick-use { font-size: 0.82em; color: #1f6feb; white-space: nowrap; }
.pick-list .pick-use.unused { color: #8a8f96; }
.pick-list .pick-empty { padding: 0.6rem 0.7rem; color: #8a8f96; }
.pick-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.btn-danger {
  background: #fff; color: #b3261e; border: 1px solid #e6b4b0;
  border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer;
}
.btn-danger:disabled { color: #b9bcc0; border-color: #e3e5e8; cursor: default; }

/* 이을 자리 — 사람이 이름·출처·앵커를 정하는 카드 (2026-09-02) */
.place-card {
  border: 1px solid var(--line, #d7dbe0); border-radius: 8px;
  padding: 0.7rem 0.9rem; margin: 0.6rem 0; background: #fff;
}
.place-card .place-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.place-card .place-where { font-family: ui-monospace, monospace; color: #6b7280;
  font-size: 0.85em; cursor: pointer; text-decoration: underline dotted; }
.place-card .place-label { font-weight: 600; }
.place-card .place-label.none { font-weight: 400; color: #8a8f96; }
/* 표본 값이 «이 칸이 무엇인가» 의 유일한 증거다 — 접지 않고 보여 준다. */
.place-card .place-samples {
  font-size: 0.85em; color: #374151; background: #f7f9fb;
  border-radius: 5px; padding: 0.35rem 0.55rem; margin: 0.4rem 0;
  max-height: 4.5rem; overflow-y: auto; word-break: break-all;
}
.place-card .place-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.35rem; }
.place-card .place-row > label { font-size: 0.9em; color: #4b5563; min-width: 3rem; }
.place-card input[type="text"] { flex: 1 1 14rem; padding: 0.25rem 0.4rem; }
.place-card .anchor-row.off { display: none; }
.place-card .suggest { font-size: 0.82em; color: #1f6feb; }

/* 매칭 화면 — 두 무리(정해야 할 자리 · 이미 이어진 자리)를 한 화면에 (2026-09-02) */
.place-band {
  font-size: 0.88em; color: #4b5563; padding: 0.4rem 0.6rem;
  border-radius: 6px; background: #f2f4f7; margin: 0.5rem 0;
}
.place-band.todo-band { color: #8a4b00; background: #fff6e8; border: 1px solid #f0d9b5; }
.place-card.todo { border-left: 3px solid #e5a34a; }
.place-card.done { border-left: 3px solid #9fc79f; background: #fcfdfc; }
.place-done-group { margin-top: 0.9rem; }
.place-done-group > summary {
  cursor: pointer; font-size: 0.9em; color: #4b5563;
  padding: 0.35rem 0; user-select: none;
}
/* 앵커 — 한 칸이 여러 표기를 가질 수 있어 목록으로 쌓는다(칩). */
.place-card .anchor-chips { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.place-card .chip {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: #eef4ff; border: 1px solid #c7d9f7; border-radius: 999px;
  padding: 0.1rem 0.5rem; font-size: 0.85em;
}
.place-card .chip-x {
  border: none; background: none; cursor: pointer; color: #6b7280;
  font-size: 1em; line-height: 1; padding: 0 0.1rem;
}
.place-card .chip-x:hover { color: #b3261e; }
.place-card .pl-anchor-add { max-width: 18rem; padding: 0.25rem 0.3rem; }

/* 원본을 보면서 잇는다 — 왼쪽 본문 · 오른쪽 카드 (2026-09-02 사용자 요구) */
.link-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem; }
@media (max-width: 1100px) { .link-split { grid-template-columns: 1fr; } }
.doc-pane { border: 1px solid var(--line, #d7dbe0); border-radius: 8px; background: #fff; overflow: hidden; }
.doc-pane-head {
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line, #d7dbe0);
  background: #f7f9fb; font-size: 0.88em; font-weight: 600;
}
.doc-pane-head .hint { font-weight: 400; }
.doc-preview { max-height: 70vh; overflow: auto; padding: 0.7rem 0.9rem; font-size: 0.82em; }
.doc-preview .dh-p { margin: 0.15rem 0; line-height: 1.5; word-break: break-word; }
.doc-preview .dh-tbl {
  border-collapse: collapse; width: 100%; margin: 0.4rem 0; table-layout: fixed;
}
.doc-preview .dh-tbl td {
  border: 1px solid #d7dbe0; padding: 0.2rem 0.35rem; vertical-align: top; word-break: break-word;
}
.doc-preview .dh-box { border: 1px dashed #cfd6de; border-radius: 5px; padding: 0.3rem 0.45rem; margin: 0.3rem 0; }
/* 자리 — 색이 곧 상태다(🔴 정해야 함 / ✅ 이어짐 / 선언에 없음) */
.doc-preview .dh-slot {
  display: inline-block; border-radius: 4px; padding: 0 0.3rem; cursor: pointer;
  border: 1px solid transparent; font-weight: 600;
}
.doc-preview .dh-slot.todo { background: #fff3e0; border-color: #e5a34a; color: #8a4b00; }
.doc-preview .dh-slot.done { background: #eaf5ea; border-color: #9fc79f; color: #2f6b2f; }
.doc-preview .dh-slot.orphan { background: #fdeaea; border-color: #e0a6a2; color: #8c2f28; }
.doc-preview .dh-slot:hover { filter: brightness(0.95); }
.place-card .badge-none {
  font-size: 0.78em; color: #8c2f28; background: #fdeaea;
  border: 1px solid #e0a6a2; border-radius: 4px; padding: 0 0.3rem;
}
/* 한쪽에서 누르면 다른 쪽이 잠깐 빛난다 — «눌렀는데 아무 일도 안 난다» 를 없앤다 */
@keyframes dh-flash { from { box-shadow: 0 0 0 3px #ffd88a; } to { box-shadow: 0 0 0 3px transparent; } }
.flash { animation: dh-flash 1.2s ease-out; }

/* 계약이 로드되지 않는 양식 — 숨기지 않고 그 줄에 사유를 싣는다 (2026-09-02) */
tr.tpl-broken { background: #fdf3f2; }
tr.tpl-broken .tpl-err { color: #8c2f28; font-size: 0.88em; word-break: break-all; }

/* 채울 때 통째로 다시 그리는 구역 — 여기 글자는 견본이다 (2026-09-03) */
.doc-preview .dh-managed {
  border: 1px dashed #b9a25a; border-radius: 6px; background: #fffdf4;
  padding: 0.2rem 0.35rem 0.35rem; margin: 0.4rem 0;
}
.doc-preview .dh-managed-tag {
  font-size: 0.78em; color: #7a6420; padding: 0.1rem 0 0.25rem; font-weight: 600;
}
.doc-preview .dh-managed .dh-tbl td { background: #fffdf4; }

/* 그림 슬롯 — 못 보는 그림에 이름을 지으라고 하지 않는다 (2026-09-03) */
.place-card .place-img {
  max-width: 100%; max-height: 9rem; display: block; margin: 0.4rem 0;
  border: 1px solid var(--line, #d7dbe0); border-radius: 5px; background: #fff;
}

/* 구조 보기 ↔ 실제 모습 토글 (2026-09-03) */
.doc-pane-head .view-tab {
  border: 1px solid var(--line, #d7dbe0); background: #fff; border-radius: 5px;
  padding: 0.15rem 0.5rem; margin-right: 0.25rem; cursor: pointer; font-size: 0.9em;
}
.doc-pane-head .view-tab.on { background: #1f6feb; color: #fff; border-color: #1f6feb; }
.doc-preview .doc-pdf { width: 100%; height: 66vh; border: 0; }

/* 이름 제안 — 눌러야 들어간다 (2026-09-03) */
.place-card .name-use {
  border: 1px solid #c7d9f7; background: #eef4ff; color: #1f4f9c;
  border-radius: 5px; padding: 0.15rem 0.5rem; cursor: pointer; font-size: 0.85em;
}
.place-card .name-use:hover { background: #dde9ff; }

/* 3단계 — 제안은 «제안» 이라고 보여야 한다. 미리 채우되 확인을 요구한다. */
.slot-suggest {
  margin: 6px 0 2px;
  padding: 2px 6px;
  font-size: 12px;
  color: #7a4a00;
  background: #fff4e0;
  border-left: 3px solid #e8a33d;
}
#bindata-fixed-wrap {
  margin-top: 14px;
  padding: 8px 10px;
  background: #f7f7f8;
  border: 1px solid #e2e2e5;
  border-radius: 4px;
}
#bindata-fixed-wrap > summary { cursor: pointer; font-size: 13px; color: #555; }
.fixed-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #ececee;
  font-size: 13px;
}
.fixed-thumb {
  width: 64px;
  height: 44px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #ddd;
}

/* 🔴 임시 이름 — 채워 두는 이유가 «빠뜨릴까 봐» 이므로, 채운 것이 확인된 것처럼
   보이면 안 된다. 카드·띠·입력칸을 같이 붉힌다. */
.slot-card.needs-check { border-color: #d0021b; box-shadow: inset 3px 0 0 #d0021b; }
.slot-card.needs-check input { border-color: #d0021b; }
.slot-warn {
  margin: 6px 0 2px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b0021b;
  background: #fdecee;
  border-left: 3px solid #d0021b;
}
.warn-text { color: #b0021b; }

/* 보증평가결과 엑셀 자리 — 신청서 드롭보다 작게. **한 개만** 받는 자리다. */
.drop-zone-one {
  padding: 1.2rem 1rem;
  margin: 0.4rem 0 0;
}
.drop-zone-one .drop-title { font-size: 0.95rem; }

/* ------- 신청서 양식 확인 (2026-09-04) -------
   서류를 안 보여 주고 이름만 늘어놓으면 답할 수 없는 질문이다. PDF 를 **나란히**
   놓는다 — 겹쳐 그리지 않는 것은 등록 화면과 같은 이유다(짝맞춤은 그 자체로 오차를
   갖는다). 좁은 화면에서는 세로로 쌓인다. */
.appform-pick { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.appform-doc { flex: 1 1 24rem; min-width: 18rem; }
.appform-doc iframe { width: 100%; height: 60vh; border: 1px solid #ccd; border-radius: 4px; }
.appform-doc .hint { margin: 0; }
.appform-side { flex: 1 1 20rem; min-width: 16rem; }
.appform-side .pick-list { max-height: 60vh; }
/* 겹침 비율 — 크다고 정답이 아니다. 그래서 **막대가 아니라 숫자**로 적는다. */
.appform-side .pick-score { font-size: 0.82em; color: #6b7079; white-space: nowrap; }
.appform-side .pick-item.top .pick-score { color: #1f6feb; }
.appform-side .pick-why {
  flex-basis: 100%; font-size: 0.78em; color: #8a8f96; word-break: break-all;
}

/* ------- 평가 서류 창 (2026-09-04) -------
   빈 칸마다 「서류에 있는지 확인해 주세요」가 붙는데 그 서류가 화면에 없었다. 폼과
   **나란히** 둔다 — 모달이면 닫아야 입력할 수 있어 옮겨 적기가 안 된다. */
/* 🔴 폭의 **주인은 하나**다. 창 너비와 본문이 비켜 줄 폭을 따로 적으면 어긋난다.
   그리고 비켜 주는 것은 `main` 이 아니라 **body** 다 — `main` 은 `max-width: 1100px`
   이라 그 안쪽에 패딩을 넣으면 내용 폭이 그만큼 깎인다(실측 2026-09-04: 2000px 화면에서
   본문이 **216px** 로 눌려 글자가 세로로 한 줄씩 쌓였다). body 를 좁히면 `margin: auto`
   가 남은 폭 안에서 다시 가운데를 잡는다. */
/* 제목줄의 다른 단추(저장·HWPX 생성)와 같은 무게로 — 스타일이 없으면 브라우저 기본
   단추라 «눌린 회색 덩어리» 로 읽히고, 사람이 그걸 못 누를 것으로 본다. */
.btn-docs {
  background: #fff; color: #2a3142; border: 1px solid #9aa3b2;
  border-radius: 6px; padding: 0.45rem 0.9rem; cursor: pointer; font: inherit;
  white-space: nowrap;
}
.btn-docs:hover { background: #eef2f8; }
body { --docs-w: min(42vw, 900px); }
.docs-dock {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--docs-w); min-width: 22rem;
  background: #fff; border-left: 1px solid var(--line, #d7dbe0);
  box-shadow: -2px 0 12px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; z-index: 40; padding: 0.6rem 0.7rem;
}
body.docs-open { padding-right: var(--docs-w); }
.docs-dock .docs-head { display: flex; gap: 0.5rem; align-items: center; }
/* 폭 손잡이 — 창 **왼쪽 가장자리**에 걸친다. 잡기 쉬우라고 창 밖으로 조금 나온다. */
.docs-resize {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 9px;
  cursor: col-resize; z-index: 41; background: transparent;
}
.docs-resize:hover, body.docs-resizing .docs-resize { background: #b9d2ff; }
/* 끄는 동안: 글자가 선택돼 파랗게 끌리지 않게, 그리고 🔴 **iframe 이 포인터를 삼키지
   않게** 한다 — PDF 뷰어 위로 끌면 이벤트가 창 안쪽으로 빨려 들어가 손잡이가 멈춘다. */
body.docs-resizing { user-select: none; cursor: col-resize; }
body.docs-resizing iframe { pointer-events: none; }
.docs-dock .docs-head strong { flex: 1 1 auto; }
/* 🔴 목록이다(드롭다운이 아니다) — 무엇이 올라왔는지 보이는 것 자체가 이 창의 절반이다.

   🔴 `flex: 0 0 auto` 가 본론이다 (2026-09-15 「파일을 선택할 수가 없어」).
      창은 세로 flex 이고 본문에는 2배로 구운 쪽 그림이 들어간다. 폭 650px 에서도
      세로 917px 이라 창이 넘치고, flex 는 **기본 크기에 비례해** 줄인다 — 목록도
      제 몫만큼 눌린다. 실측(서류 5건, `tmp/독높이/sweep.py`):

          창 1080 · 독  700 → 3.74줄     창 700 · 독 1100 → 1.68줄
          창  900 · 독  900 → 2.66줄     창 600 · 독 1100 → 1.39줄

      서류를 읽으려고 **독을 넓힐수록 목록이 줄어드는** 것이 이 결함의 얼굴이다.
      줄지 않게 못박고, 높이는 사람이 정한다(`resize: vertical` — 브라우저 손잡이라
      우리가 끌기 코드를 또 만들지 않는다). 바닥은 세 줄이다. */
.docs-list {
  flex: 0 0 auto;
  height: 9rem; min-height: 7.6rem; max-height: 60vh;
  overflow-y: auto; resize: vertical; margin: 0.4rem 0;
  border: 1px solid var(--line, #d7dbe0); border-radius: 6px; background: #fff;
}
.docs-item {
  display: flex; gap: 0.5rem; align-items: baseline; width: 100%; text-align: left;
  padding: 0.4rem 0.6rem; border: 0; border-bottom: 1px solid #eef1f4;
  background: none; cursor: pointer; font: inherit;
}
.docs-item:last-child { border-bottom: none; }
.docs-item:hover:not(:disabled) { background: #f5f8ff; }
.docs-item.on { background: #eaf1ff; font-weight: 600; }
.docs-item:disabled { color: #b9bcc0; cursor: default; }
.docs-item .docs-kind { font-size: 0.78em; color: #1f6feb; white-space: nowrap; }
.docs-item:disabled .docs-kind { color: #b9bcc0; }
.docs-item .docs-name { flex: 1 1 auto; word-break: break-all; }
.docs-empty { padding: 0.6rem; color: #8a8f96; }
.docs-dock .hint { margin: 0.35rem 0; }
.docs-body { flex: 1 1 auto; min-height: 0; display: flex; }
.docs-body iframe { flex: 1 1 auto; width: 100%; border: 1px solid #ccd; border-radius: 4px; }
/* 🔴 글자 파일은 `<pre>` 그대로 — 선택·복사가 되고 줄바꿈이 산다. */
.docs-body pre {
  flex: 1 1 auto; overflow: auto; white-space: pre-wrap; word-break: break-word;
  background: #f7f8fa; border: 1px solid #e0e3e8; border-radius: 4px;
  padding: 0.7rem; font-size: 0.88rem; line-height: 1.55; margin: 0;
  user-select: text;
}
@media (max-width: 900px) {
  /* 좁은 화면에서는 덮는다 — 비켜 줄 폭이 없다. */
  body { --docs-w: 100vw; }
  .docs-dock { min-width: 0; }
  body.docs-open { padding-right: 0; }
}

/* ── 칸 분량 경고와 그 자리 요약 (2026-09-05 사용자 지시) ─────────────────────
   🔴 «넘쳤다» 는 빨갛게, 되돌릴 수 있는 상태는 눈에 띄되 놀라지 않게. */
.length-badge { margin-top: .25rem; display: flex; flex-wrap: wrap;
                align-items: center; gap: .4rem; }
.length-badge small { color: #666; }
.length-badge.over small { color: #b00020; }
.length-badge .summarize-btn,
.length-badge .undo-btn { font-size: .82em; padding: .12rem .5rem; }
.length-badge .undo-btn { background: #fff; border: 1px solid #bbb; color: #333; }
.summarize-preview { flex-basis: 100%; margin-top: .35rem; padding: .5rem;
                     border: 1px solid #d0d0d0; border-radius: 4px; background: #fafafa; }
.summarize-preview textarea { width: 100%; margin: .35rem 0; }
.summarize-preview button { margin-right: .4rem; }

/* 「이렇게 고쳐줘」 — 요약이 마음에 안 들 때 **무엇이 마음에 안 들었는지**를 고른다
   (사용자 결정 2026-09-05). 체크박스 문구는 서버 선언에서 오고 화면은 안 갖는다. */
.summarize-directives {
  margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed #d9d9d9;
}
.summarize-directives .directive-boxes {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; margin: 0.35rem 0;
}
.summarize-directives .directive-boxes label {
  font-weight: normal; font-size: 0.86rem; display: inline-flex;
  align-items: center; gap: 0.25rem; cursor: pointer;
}
.summarize-directives .directive-free {
  width: 100%; box-sizing: border-box; padding: 0.3rem 0.4rem;
  border: 1px solid #ccc; border-radius: 3px; font-size: 0.86rem;
}
.summarize-directives .summarize-again { margin-top: 0.4rem; }

/* 멈춘 잡 — 사람이 할 수 있는 일을 같이 말한다 (2026-09-08) */
.stalled-hint {
  margin-left: .5rem;
  padding: .05rem .35rem;
  border-radius: 3px;
  background: #fdecea;
  color: #b3261e;
  font-size: .85em;
}

/* 합성 선언을 정하는 자리(등록 3단계) — autogen 이 «합의 없음» 으로 안 채운 잎 */
.pipeline-leaf { margin: .6rem 0; padding: .5rem .6rem; border: 1px solid var(--line, #ddd);
                 border-radius: 6px; }
.pipeline-leaf textarea { width: 100%; font-family: monospace; font-size: .85rem; }
/* 🔴 못 읽는 글은 **빨갛게**. 조용히 버리면 사람은 적었다고 믿는다. */
.pipeline-leaf textarea.bad { border-color: #c0392b; background: #fff5f4; }
.btn-mini { font-size: .78rem; padding: .1rem .4rem; margin-right: .2rem; }

/* ------- 서류 검토 — 사유·대상외 안내 (P3) ------- */
/* 🔴 사유만 적으면 구경거리다. **무엇을 하면 되는지**를 그 자리에 적는다. */
.review-note {
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem !important;
  border-bottom: 1px solid #eef;
}
.review-note.out-of-scope {
  background: #fff8e6;
  border-left: 3px solid #d69e2e;
  color: #6b4c00;
}
.review-note.failed-note {
  background: #fff4f4;
  border-left: 3px solid #c53030;
  color: #7a2020;
}
.review-log {
  margin: 0.5rem 0 0;
  padding: 0.5rem;
  max-height: 20rem;
  overflow: auto;
  background: #1e1e24;
  color: #e6e6ea;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ------- 검토 결과 화면 (P4) ------- */
.review-banner {
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.55;
}
/* 🔴 대상외는 «판정처럼» 보이면 안 된다 — 실측상 판정이 「보완필요」로 온다. */
.review-banner.out-of-scope {
  background: #fff8e6; border-left: 4px solid #d69e2e; color: #6b4c00;
}
/* 🔴 추출본을 안 읽었으면 「괜찮다」가 아니라 「알 수 없다」다. */
.review-banner.unread {
  background: #f4f4f8; border-left: 4px solid #7a7a8c; color: #3a3a48;
}
.review-counts { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0 1rem; }
.review-count {
  display: flex; flex-direction: column; align-items: center;
  min-width: 5.5rem; padding: 0.5rem 0.8rem;
  border: 1px solid #dde; border-radius: 4px; background: #fafbfd;
}
.review-count .n { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.review-count .k { font-size: 0.75rem; color: #666; }
.review-count.c-block .n { color: #c53030; }
.review-count.c-warn  .n { color: #d69e2e; }
/* 참고는 «할 일» 이 아니다 — 눈에 덜 띄게 둔다(보완과 같은 급으로 보이면 안 된다). */
.review-count.c-info { opacity: 0.65; }

details.area { margin: 0.6rem 0; border: 1px solid #e3e6ee; border-radius: 4px; }
details.area > summary {
  padding: 0.6rem 0.8rem; cursor: pointer; background: #f5f6f8;
  display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap;
}
.finding { padding: 0.6rem 0.9rem; border-top: 1px solid #eef; font-size: 0.88rem; }
.finding .f-head { display: flex; gap: 0.45rem; align-items: baseline; flex-wrap: wrap; }
.finding .f-judgment { font-weight: 600; }
.finding .f-rule { color: #888; font-size: 0.8rem; font-family: ui-monospace, monospace; }
.finding .f-item { color: #333; }
.finding .f-msg { margin-top: 0.25rem; color: #444; line-height: 1.5; }
.finding .f-fix { margin-top: 0.25rem; color: #2a5fb0; }
.finding.j-fail { background: #fff6f6; }
.finding.j-attention { background: #fffbf0; }
.finding.j-info { opacity: 0.72; }

/* ------- 손 볼 것이 아닌 판정은 접어 둔다 (2026-09-15) -------
   지우지 않습니다 — 개수를 보이고 한 번 눌러 펼칩니다. */
details.folded > summary {
  cursor: pointer; padding: 0.45rem 0.9rem; border-top: 1px solid #eef;
  color: #777; font-size: 0.82rem; background: #fafbfc;
}
details.folded > summary:hover { color: #2a5fb0; }
details.folded[open] > summary { border-bottom: 1px solid #eef; }

/* dunnart 가 자기 구분자(` · `)로 이어 붙인 한 줄을 그 자리에서 끊어 보입니다.
   🔴 뜻을 다시 만들지 않습니다 — 줄바꿈 자리만 줍니다. */
.finding .f-msg-head { color: #333; }
.finding .f-msg-parts {
  margin: 0.25rem 0 0; padding-left: 1.1rem; list-style: disc;
}
.finding .f-msg-parts li { margin: 0.15rem 0; }

/* ------- 사람이 읽는 줄 (2026-09-15) -------
   dunnart 이 진단 옆에 실어 보낸 `plain_message`. 진단은 아래 「원문 진단」에 접힙니다. */
.finding .f-plain-head { margin-top: 0.25rem; color: #222; font-weight: 600; }
.finding .f-plain-body { margin-top: 0.15rem; color: #444; line-height: 1.55; }
details.f-raw > summary {
  margin-top: 0.3rem; cursor: pointer; color: #8a8f98; font-size: 0.78rem;
}
details.f-raw > summary:hover { color: #2a5fb0; }
details.f-raw .f-msg { color: #666; font-size: 0.82rem; }
.badge-blocking {
  background: #c53030; color: #fff; border-radius: 3px;
  padding: 0 0.35rem; font-size: 0.72rem; font-weight: 700;
}
/* 🔴 지우지 않고 표시한다 — 감추면 그 자리가 «참인 근거» 로 보인다. */
.ev-unverified {
  margin-top: 0.35rem; padding: 0.3rem 0.5rem;
  background: #fff4e0; border-left: 3px solid #d69e2e;
  color: #6b4c00; font-size: 0.82rem;
}
.f-ev { margin-top: 0.35rem; font-size: 0.82rem; }
.f-ev .ev-block { display: flex; gap: 0.5rem; margin: 0.2rem 0; }
.f-ev .ev-k { color: #888; min-width: 2.4rem; }
.f-ev ul { margin: 0; padding-left: 1.1rem; word-break: break-all; }
/* 근거 원문 되짚기 (P5) */
.ev-src {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #2a5fb0; text-align: left; font: inherit; text-decoration: underline dotted;
}
.ev-text {
  margin: 0.25rem 0 0.4rem; padding: 0.4rem 0.6rem;
  background: #f7f8fb; border-left: 3px solid #b9c2d6;
  font-size: 0.82rem; white-space: pre-wrap; word-break: break-word;
}

/* ------- 본문을 못 읽는 첨부 (2026-09-15) -------
   검토 입구에 검토 리포트·케이스 기록 같은 **제출 서류가 아닌 것**이 섞이면 dunnart 가
   그것을 `skipped_files` 에 «신청인이 낸 첨부»로 적는다. 막지 않고 **보이게** 한다. */
.drop-preview li.not-extractable { color: #b0021b; }
.drop-preview li { margin-bottom: 0.15rem; }
.drop-preview li .btn-link { margin-left: 0.4rem; padding: 0 0.35rem; font-size: 0.8rem; }

/* ------- 근거를 서류 위에서 보이기 (2026-09-15) -------
   🔴 좌표는 **서버가 맞춰 줍니다** — dunnart 의 `render_pdf_page_png` 가 96dpi 로 굽고
   추출 `layout.bbox` 도 px:96dpi 라 이미지 픽셀 좌표 == bbox 좌표입니다. 여기서는
   `position: relative` 한 틀 안에 %로 얹기만 합니다. */
/* 🔴 근거는 «제출 서류» 창 안에서 보입니다 — 따로 두었던 판(`#evidence-doc`)과
   분할 레이아웃은 2026-09-15 에 걷었습니다(사용자 지적: 뷰어가 둘이었습니다).
   아래 둘은 그 창 안에서 씁니다. */
.pageimg-wrap { position: relative; display: inline-block; max-width: 100%; }
.pageimg { display: block; max-width: 100%; height: auto; border: 1px solid #ccd; }
.bbox-overlay {
  position: absolute; border: 2px solid #d64545; background: rgba(214, 69, 69, 0.14);
  pointer-events: none;
}
/* 좁은 화면에서는 아래로 쌓입니다 — 나란히 두면 둘 다 못 읽습니다. */


/* ------- 검토 목록의 «프로젝트» 칸 (2026-09-15) -------
   사람이 적은 이름이 얼굴이고, 해시는 그 아래 작게 남습니다 — URL·로그가 해시로
   말하므로 지우면 문의할 때 못 찾습니다. */
.proj-name { font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }   /* 낱말 사이에서 끊는다 — «2 / 026» 처럼 낱말 한가운데를 자르지 않게 */
.proj-id { font-size: 0.72rem; color: #8a8f98; word-break: break-all; }



/* ------- 서류 창 안의 «근거 보기» (2026-09-15) -------
   🔴 `.docs-body` 는 flex **행**입니다. 그냥 넣으면 단추·그림·안내가 가로로 늘어서
   그림이 눌립니다 — 사용자: 「문서내용을 알아 볼수가 없다」. 세로로 쌓고 **폭을 꽉**
   채웁니다. 창 폭은 사람이 끕니다(`--docs-w`). */
.docs-body .docs-evidence {
  flex: 1 1 auto; min-width: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.docs-body .docs-evidence .pageimg-wrap { display: block; width: 100%; max-width: 100%; }
.docs-body .docs-evidence .pageimg { width: 100%; height: auto; }
.docs-body .docs-evidence .pdf-nav { flex: 0 0 auto; }
.docs-body .docs-evidence p { flex: 0 0 auto; margin: 0; }

/* 재생성할 양식 제안 · 잃는 글자 검토 (2026-09-24) */
.pick-list .pick-item .badge {
  display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 3px;
  background: #1f6feb; color: #fff; font-size: .75rem;
}
.lost-item {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  padding: .35rem 0; border-bottom: 1px solid #eee;
}
.lost-item .lost-text { flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; }

/* 업로드 입구 탭 — 선택자 계열(보증·투자)마다 하나 (`[upload] entrances`) */
.entrance-tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.entrance-tabs button { border: 1px solid #b9bfcc; background: #fff; color: #333; padding: 6px 14px;
  border-radius: 16px; cursor: pointer; font-size: 0.95em; }
.entrance-tabs button[aria-selected="true"] { background: #2d5aa0; border-color: #2d5aa0; color: #fff; }

/* 업로드 목록 — 칸 표시·빼기·칸 안내 (2026-10-04) */
.drop-preview .preview-head { margin-bottom: 0.3rem; font-size: 0.85rem; color: #555; }
.drop-preview .slot-pick { margin-left: 0.5rem; font-size: 0.8rem; color: #2a4a8a; }
.drop-preview .slot-note { margin: 0.35rem 0 0; font-size: 0.82rem; color: #555; }
.drop-preview .slot-note.ok { color: #1d6b2f; }
.drop-preview .slot-note.warn { color: #b0021b; }

/* 편집 화면 쪽별 묶음 (2026-10-04) — 쪽은 서버가 양식을 그려 잰다(field_pages.py). */
.page-section {
  border-top: 2px solid #2a3142;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.page-section-head { margin: 0; font-size: 1.05rem; color: #2a3142; }
.page-section-unplaced { border-top-color: #b08900; }
.page-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.45rem;
  border-radius: 9px;
  background: #e8edf7;
  color: #34507a;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
}
.page-badge-warn { background: #fff1d6; color: #8a5a00; }
.field-crumb { color: #999; font-weight: 400; }
details.editor-group.array-head-only { margin-bottom: 0; }

/* 신청내역을 못 찾았을 때 보고서·장르 고르기 (2026-10-06) */
.choose-box { border: 2px solid #c0392b; background: #fff8f6; border-radius: 6px; padding: 0.8rem 1rem; margin: 0.6rem 0; }
.choose-reason { margin: 0 0 0.6rem; color: #b03030; font-weight: 700; font-size: 1rem; }
.choose-row { display: flex; align-items: center; gap: 0.8rem; margin: 0.4rem 0; }
.choose-row > span { min-width: 5rem; font-weight: 600; color: #333; }
.choose-row select { min-width: 22rem; padding: 0.35rem; }
.choose-note { margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; background: #fff1d6; border-left: 4px solid #d08a00;
               color: #6b4500; font-weight: 600; line-height: 1.5; }

/* 평가 항목 등록 (보고서 템플릿 관리) */
.evalmap-q { display: grid; gap: 4px; margin: 10px 0; max-width: 640px; }
.evalmap-q select { max-width: 360px; }

/* 템플릿 만들기 1단계 — 칸 둘(보고서 필수 · 그 밖의 파일 선택) · 어느 양식인가 (2026-10-07) */
.step1-h { margin: 0.4rem 0 0.2rem; font-size: 1rem; }
.badge-need, .badge-opt { font-size: 0.75em; padding: 0.05rem 0.4rem; border-radius: 0.6rem; vertical-align: middle; }
.badge-need { background: #fde8e8; color: #b0021b; }
.badge-opt { background: #eef1f5; color: #5a6270; }
.btn-small { padding: 0.1rem 0.5rem; font-size: 0.82em; }
#report-list .badge, #form-guess .badge { background: #1f6feb; color: #fff; font-size: 0.75em; padding: 0.05rem 0.45rem; border-radius: 0.6rem; }
#base-advice { margin-top: 0.3rem; }
.tpl-folder { color: #8a8f96; }

/* 같은 서류 값을 감당하는 양식이 여럿일 때 고르는 줄 (2026-10-07) */
.pick-same { display: block; margin: 4px 0 0 8px; font-weight: normal; }

/* 3단계 — VLM 이 양식이라 판정한 고정 그림은 사람이 본다 (2026-10-08) */
.fixed-row.needs-check { border-left: 4px solid #d97706; padding-left: 8px; background: #fffbeb; }

/* ── 버그 리포트 (2026-10-12) ── */
.header-nav .bug-report-btn { border-color: rgba(255, 200, 120, 0.7); }
.bug-report-dialog { max-width: 560px; width: 92vw; border: 1px solid #ccd; border-radius: 6px; padding: 18px 20px; }
.bug-report-dialog::backdrop { background: rgba(20, 24, 33, 0.45); }
.bug-report-dialog h2 { margin-top: 0; }
.bug-report-dialog textarea, .bug-report-dialog select { width: 100%; box-sizing: border-box; margin-top: 4px; }
.bug-report-dialog .field { display: block; margin: 10px 0; }
.bug-report-actions { display: flex; gap: 8px; margin-top: 12px; }
#br-table td { vertical-align: top; font-size: 0.9em; }

/* 등급 격자(제작보증)는 폼 칸 안에 들어간다 (2026-10-13 · 전수 e2e F16).
   칸 안 입력의 기본 폭 때문에 표가 1012px 로 넘쳐, 1400px 창에서 자동으로 열리는 «평가 서류» 칸 밑에
   등급·삭제 칸이 깔렸다(누를 수 없음). 입력은 칸 폭을 따르고, 그래도 좁으면 격자 안에서 가로로 민다. */
[data-grade-tree] { overflow-x: auto; }
[data-grade-tree] table.data-table { table-layout: fixed; min-width: 0; }
[data-grade-tree] table.data-table input { width: 100%; min-width: 0; box-sizing: border-box; }
[data-grade-tree] table.data-table th:last-child,
[data-grade-tree] table.data-table td:last-child { width: 4.5rem; }

/* ── 화면 틀 — 왼쪽 패널 · 위 막대 (shell.js · 2026-10-14 사용자 «왼쪽에 네비게이션 panel») ──
   구분(보증 · 투자)마다 «서류 검토 · 보고서 작성» 이 묶이고, 관리자는 «관리» 묶음이 더 있다.
   좁은 창과 «평가 서류» 창이 열린 화면(편집 · 검토 결과)에서는 패널이 ☰ 로 접힌다 — 일하는 칸이 좁아지면 안 된다. */
body.has-shell { --shell-w: 210px; padding-left: var(--shell-w); }
.shell-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--shell-w);
  background: #1f2533; color: #cfd6e4; overflow-y: auto; z-index: 45;
  padding: 1rem 0.6rem; display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform 0.15s;
}
.shell-brand { font-weight: 700; font-size: 1.2rem; color: #fff; padding: 0 0.6rem; }
.shell-group { display: flex; flex-direction: column; gap: 2px; }
.shell-group-title { font-size: 0.8rem; color: #8c96aa; padding: 0 0.6rem 0.2rem; letter-spacing: 0.04em; }
.shell-group.current .shell-group-title { color: #fff; font-weight: 600; }
.shell-nav a {
  color: #cfd6e4; text-decoration: none; padding: 0.42rem 0.6rem 0.42rem 1.2rem;
  border-radius: 6px; font-size: 0.92rem;
}
.shell-nav a:hover { background: rgba(255,255,255,0.08); }
.shell-nav a.active { background: #4a78d6; color: #fff; }
.shell-foot { margin-top: auto; }
.shell-foot a { padding-left: 0.6rem; }
.shell-toggle {
  display: none; background: none; color: #fff; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; font-size: 1.1rem; padding: 0.15rem 0.6rem;
}
body.has-shell header { justify-content: flex-start; padding: 0.9rem 1.5rem; }
body.has-shell header h1 { font-size: 1.3rem; }
body.has-shell header .header-nav { margin-left: auto; }
.shell-error { margin: 1rem 0; }
/* 패널이 210px 를 쓰므로 본문 상한을 그만큼 넓힌다 — 목록 표(양식 · 진행 · 날짜)가 1100px 안에서 글자마다 꺾였다. */
body.has-shell main:not(.wide) { max-width: 1400px; }
.tpl-family { white-space: nowrap; }
@media (max-width: 900px) {
  body.has-shell { padding-left: 0; }
  .shell-nav { transform: translateX(-100%); }
  body.shell-open .shell-nav { transform: none; }
  .shell-toggle { display: inline-block; }
}
body.has-shell.docs-open { padding-left: 0; }
body.docs-open .shell-nav { transform: translateX(-100%); }
body.docs-open.shell-open .shell-nav { transform: none; }
body.docs-open .shell-toggle { display: inline-block; }
/* 🔴 열린 패널이 ☰ 를 덮으면 **다시 닫을 수 없다**(2026-10-14 · 전수 e2e 12판 — 패널이 단추 위의 클릭을 가로챘다).
   열려 있는 동안 단추는 패널 바로 오른쪽에 떠서 늘 누를 수 있다. 패널 밖을 눌러도 닫힌다(shell.js). */
body.shell-open .shell-toggle {
  position: fixed; top: 0.8rem; left: calc(var(--shell-w) + 0.5rem); z-index: 46;
  background: #1f2533;
}

/* ── 목록 머리 — 제목 · 건수 · «+ 신규 등록» · 거르개 (list_filter.js · 2026-10-14) ── */
.list-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.list-head h2 { margin: 0; }
.list-count { color: #888; font-weight: normal; font-size: 0.95rem; margin-left: 0.3rem; }
.list-head .list-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.list-actions button:not(.btn-primary) {
  padding: 0.6rem 1rem; background: #fff; color: #2a3142; border: 1px solid #9aa3b2; border-radius: 6px; cursor: pointer;
}
.list-actions button:not(.btn-primary):hover { background: #eef2f8; }
#shell-families { display: flex; flex-direction: column; gap: 1.1rem; }
.list-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; align-items: flex-end; }
.list-filters label { display: flex; flex-direction: column; font-size: 0.8rem; color: #666; gap: 2px; }
.list-filters input[type="search"] { min-width: 14rem; }
/* 찾기 칸 · 드롭다운 · «필터 초기화» 를 **한 높이**로(2026-10-16 사용자 «드랍다운 메뉴의 높이가 옆의 찾기창과 같게»).
   브라우저 기본 높이가 요소마다 달라 드롭다운만 낮게 보였다. */
.list-filters input[type="search"],
.list-filters select,
.list-filters button {
  height: 2.1rem; box-sizing: border-box; font-size: 0.9rem;
  padding: 0 0.5rem; border: 1px solid #b7bdc8; border-radius: 4px; background: #fff;
}
.list-filters button { cursor: pointer; color: #2a3142; }
.list-filters button:hover { background: #eef2f8; }
.list-note { margin-top: 0.6rem; }

/* 구분(보증 · 투자) 체크박스 — 관리자 화면의 사용자 추가 · 목록 (2026-10-14) */
.family-checks { display: inline-flex; gap: 0.7rem; flex-wrap: wrap; }
.family-checks .checkbox { white-space: nowrap; }

/* 검토 결과의 기준일(유효기간 판정일) — 판정을 읽을 때 같이 보여야 한다(2026-10-14) */
.review-ref-date { margin: 0.2rem 0 0.6rem; font-weight: 600; color: #2a3142; }

/* 편집 화면 — 장르별 산업 자료(산업 백서 구간) 갈아 끼우기 (2026-10-20 · industry_editor.js) */
.industry-panel { margin-top: 1.5rem; }
.industry-block .industry-items { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }
.industry-text-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.industry-text-label { font-size: .8rem; color: #666; min-width: 2rem; }
.industry-piece { display: inline-flex; align-items: center; gap: .25rem; }
.industry-piece input { font-size: .9rem; padding: .2rem .35rem; }
.industry-piece input.changed { border-color: #b8860b; background: #fffbea; }
.industry-note { background: #eef6ff; border: 1px solid #b6d4fe; border-radius: 6px; padding: .4rem .6rem; margin: .35rem 0; font-size: .9rem; }
.industry-save { border-top: 1px dashed #ccc; padding-top: .6rem; margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.industry-save .hint { flex-basis: 100%; margin: .2rem 0 0; }
.industry-save .industry-year { width: 6rem; }
.industry-compare { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }
.industry-compare-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; border-bottom: 1px solid #eee; padding: .35rem 0; }
.industry-compare-head { font-weight: 600; min-width: 4rem; }
.industry-compare figure { margin: 0; }
.industry-compare figcaption { font-size: .8rem; color: #666; }
.industry-old { color: #888; text-decoration: line-through; }
.shell-badge { background: #d0021b; color: #fff; border-radius: 9px; padding: 0 .4rem; font-size: .75rem; margin-left: .25rem; }
.industry-stale { font-weight: 600; }
.industry-row-낡음 td { background: #fff4f4; }
.industry-row-기록없음 td { background: #fffbea; }
.industry-year-input { width: 5.5rem; }
.industry-history-images { display: flex; flex-wrap: wrap; gap: .5rem; flex-basis: 100%; }
.industry-history-images figure { margin: 0; }
/* 그림 큰 미리 보기 — 마우스를 올리면 옆에 떠오른다(2026-10-20 · image_hover.js · 그림 칸·산업 자료 전부) */
.image-hover-preview { position: fixed; z-index: 1000; pointer-events: none; background: #fff; border: 1px solid #c8c8c8;
  border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); padding: 6px; }
.image-hover-preview img { display: block; max-width: min(720px, 60vw); max-height: 70vh; width: auto; height: auto; }
.slot-preview { cursor: zoom-in; }
.industry-captions { margin: .35rem 0 .45rem; display: flex; flex-direction: column; gap: .3rem; }
/* 산업 자료 — 글로 된 통계표를 표 모양 그대로(2026-10-20 · industry_editor.js `산업_표카드`). 바탕·글자색은 판의 선언에서 온다. */
.industry-table-wrap { overflow-x: auto; max-width: 100%; }
.industry-table { border-collapse: collapse; font-size: .8rem; }
.industry-table td { border: 1px solid #bbb; padding: .1rem .2rem; vertical-align: middle; text-align: center; }
.industry-cell-line { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; }
.industry-cell-piece { display: inline-flex; align-items: center; }
.industry-cell-piece input { font: inherit; text-align: center; border: 1px solid transparent; background: transparent; padding: .1rem .15rem; }
.industry-cell-piece input:hover:not(:disabled) { border-color: #ccc; }
.industry-cell-piece input:focus { border-color: #4a7bd0; background: #fff; color: #000 !important; outline: none; }
.industry-cell-piece input.changed { border: 2px solid #b8860b; }
.industry-cell-revert { border: 0; background: none; color: #b8860b; cursor: pointer; padding: 0 .1rem; font-size: .85rem; }
/* 편집 화면 — 행마다 칸이 여럿인 양식 표를 표 모양으로(2026-10-20 · editor.js `buildFieldGrid`). 칸 하나는 여느 칸(`buildField`)이다. */
.field-grid-box { margin: .6rem 0 1rem; }
.field-grid-caption { display: block; margin-bottom: .3rem; }
.field-grid-wrap { overflow-x: auto; max-width: 100%; }
.field-grid { border-collapse: collapse; font-size: .85rem; min-width: 60%; }
.field-grid td { border: 1px solid #c8c8c8; padding: .2rem .3rem; vertical-align: middle; }
.field-grid td:not(.field-grid-input) { background: #f4f5f7; color: #333; font-weight: 600; text-align: center; }
.field-grid td.field-grid-input { min-width: 7rem; }
.field-grid td > label { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: .1rem; }
.field-grid td > label > span:first-child { display: none; }          /* 칸 이름 — 표 머리가 말한다(마우스를 올리면 나온다) */
.field-grid td > label input, .field-grid td > label select, .field-grid td > label textarea { width: 100%; box-sizing: border-box; font-size: .85rem; padding: .2rem .3rem; }
.field-grid td > label .hint, .field-grid td > label .badge, .field-grid td > label [class*="badge"] { font-size: .7rem; }
.field-grid td > label.field-flagged-empty .field-absent-note { display: none; }
.field-grid-mirror { color: #555; font-weight: 400; }
.field-grid .field-grid-folded { display: none; }
.field-grid-signals { margin: 0 0 .3rem; }
.field-grid td:not(.field-grid-input) { white-space: nowrap; }
.field-grid-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-bottom: .35rem;
  padding: .25rem .5rem; background: #f3eef6; border-left: 3px solid #7a3e94; }
.field-grid-title strong { color: #5a2d73; }
.field-grid-subtitle { color: #666; }
/* 배치 표(그림 슬롯·안쪽 표가 든 표 · 2026-10-20) — 칸 안의 안쪽 표와 그림 카드 */
.field-grid .field-grid-inner { width: 100%; font-size: inherit; min-width: 0; }
.field-grid td.field-grid-input .field-grid-label { font-weight: 600; color: #444; }
.field-grid .field-grid-slot { margin: .2rem 0; }
.field-grid .field-grid-slot .slot-card { margin: 0; }