/* 플랫폼 관리 페이지. 껍데기(레일·본문·폭 규칙)는 platform-shell.css, 색·모서리는 tokens.css 가
   원본이다(UR-163) — 옛 로컬 이름은 그대로 두고 값만 공용 토큰에서 받는다(hub.css 와 같은 방식). */

/* .admin-field·.admin-modal label 같은 display 규칙이 hidden 속성을 이겨 숨긴 칸이 보였다(초대 폼의 회사 칸) —
   styles.css·signup.css 와 같은 전역 규칙으로 막는다. */
[hidden] {
  display: none !important;
}

:root {
  --admin-bg: var(--c-sunken);
  --admin-panel: var(--c-ground);
  --admin-line: var(--c-line);
  --admin-ink: var(--c-ink);
  --admin-text: var(--c-ink);
  --admin-muted: var(--c-muted);
  --admin-primary: var(--c-navy);
  --admin-success: var(--c-income);
  --admin-warn: #9a6700;
  --admin-danger: var(--c-seal);
  --admin-radius-sm: var(--r-control);
  --admin-radius-md: var(--r-card);
  --admin-radius-lg: var(--r-card);
}

* {
  box-sizing: border-box;
}

body.admin-body {
  margin: 0;
  background: var(--admin-bg);
  color: var(--admin-text);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
  border-radius: var(--admin-radius-sm);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--admin-primary) 15%, transparent);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  translate: 0 -160%;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-ink);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
}

.skip-link:focus {
  translate: 0;
}

/* 헤더·레이아웃·메뉴는 공통 껍데기(platform-shell.css)가 그린다 — #admin-nav 의 단추는 .nav-item 이다. */

.admin-main {
  padding-top: 20px;
}

.admin-section-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
}

.admin-section-heading h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--admin-ink);
  margin: 0;
}

.admin-section-sub {
  font-size: 13px;
  color: var(--admin-muted);
}

/* 구역 관리 섹션이 헤딩 줄에 "+ 구역 추가" 버튼을 직접 자식으로 붙인다 — 오른쪽 끝으로 민다. */
.admin-section-heading > .admin-btn {
  margin-left: auto;
}

.admin-placeholder {
  background: var(--admin-panel);
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-md);
  padding: 32px;
  color: var(--admin-muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- 테이블 ---------- */

.admin-panel {
  background: var(--admin-panel);
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-md);
  /* 칸을 지키고 좁으면 옆으로 민다(둥근 모서리 자르기는 그대로 — 한 축이 auto 면 다른 축도 따라간다). */
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--admin-line);
  vertical-align: middle;
}

.admin-table th {
  color: var(--admin-muted);
  font-weight: 600;
  font-size: 12px;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

/* 칸을 flex 로 만들면 줄 높이를 따라가지 못해 아래 구분선이 글자 높이에서 끊겼다 —
   칸은 칸으로 두고 단추끼리 흐르게 한다. */
.admin-table td.admin-table-actions > button {
  display: inline-flex;
  margin: 2px 6px 2px 0;
}

/* 글자 칸이 접히면 '최고관리 / 자', '이메일 인증 대 / 기' 가 된다 — 접지 않고 칸을 늘린다.
   주소(2번째)는 길어질 수 있고, 단추가 넷인 동작 칸은 접혀야 표가 상자 밖으로 나가지 않는다. */
.admin-table th:not(:nth-child(2)),
.admin-table td:not(:nth-child(2)) {
  white-space: nowrap;
}

/* 열이 열 개로 늘면서 동작 칸을 접어도 표는 어차피 상자보다 넓다(2026-09-16) — 접어서 줄만 높아질
   바에는 단추를 한 줄에 두고 상자가 옆으로 밀게 한다. */
.admin-table td.admin-table-actions > button {
  margin-block: 0;
}

.admin-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--admin-muted);
  font-size: 13px;
}

/* 구성원 표의 이니셜 원(2026-09-16 시안) — 이름 앞에서 줄을 구분해 준다.
   칸(td)을 flex 로 만들면 줄 높이를 따라가지 못한다(동작 칸에서 겪은 것과 같은 함정) — 칸은 칸으로 둔다. */
.admin-ava {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c-navy-soft);
  color: var(--admin-primary);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* 값이 없는 칸은 흐리게 — '—'가 이름과 같은 무게면 빈 칸이 먼저 읽힌다. */
.admin-cell-blank {
  color: var(--admin-muted);
}

.admin-side-link {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: var(--admin-radius-sm);
  background: none;
  padding: 6px 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-primary);
  text-align: left;
  cursor: pointer;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  /* 알약은 한 줄이다 — 접히면 '이메일 인증 대 / 기' 가 된다. */
  white-space: nowrap;
}

.admin-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.admin-badge-active {
  color: var(--admin-success);
  background: color-mix(in srgb, var(--admin-success) 12%, var(--admin-panel));
}

.admin-badge-inactive,
.admin-badge-suspended,
.admin-badge-cancelled,
.admin-badge-expired {
  color: var(--admin-muted);
  background: color-mix(in srgb, var(--admin-muted) 10%, var(--admin-panel));
}

.admin-badge-pending {
  color: var(--admin-warn);
  background: color-mix(in srgb, var(--admin-warn) 12%, var(--admin-panel));
}

.admin-btn {
  border: 1px solid var(--admin-line);
  background: var(--admin-panel);
  color: var(--admin-text);
  border-radius: var(--admin-radius-sm);
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.admin-btn:hover {
  border-color: color-mix(in srgb, var(--admin-primary) 40%, transparent);
  color: var(--admin-primary);
}

.admin-btn-danger {
  border-color: color-mix(in srgb, var(--admin-danger) 40%, transparent);
  color: var(--admin-danger);
}

/* ---------- 초대 발송 폼 ---------- */

.admin-invite-form {
  background: var(--admin-panel);
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-md);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-field label {
  font-size: 12px;
  color: var(--admin-muted);
}

/* 입력·선택은 관리 화면 어디에 있든 한 가지 모양이다. 자리마다 따로 적던 탓에 새로 만든 칸이
   브라우저 기본 모양(가는 검은 테두리)으로 남았다 — 업데이트 노트의 찾는 말·거르개가 그랬다
   (2026-09-23 사용자 지적). 여기서 한 번에 정하고, 자리별 규칙은 폭·배치만 더한다. */
.admin-main input:not([type="checkbox"]):not([type="radio"]),
.admin-main select,
.admin-main textarea,
.admin-modal input:not([type="checkbox"]):not([type="radio"]),
.admin-modal select,
.admin-modal textarea {
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-sm);
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--admin-ink);
  background: var(--admin-panel);
}

.admin-main select,
.admin-modal select {
  cursor: pointer;
}

.admin-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.admin-form-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-form-error {
  color: var(--admin-danger);
  font-size: 12px;
  margin: 0;
}

/* ---------- 가입 승인 카드 ---------- */

.admin-approval-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.admin-approval-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-md);
  padding: 14px 16px;
}

.admin-approval-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-approval-name {
  font-weight: 700;
  color: var(--admin-ink);
  font-size: 14px;
}

.admin-approval-meta {
  font-size: 12px;
  color: var(--admin-muted);
}

.admin-approval-zone { color: var(--admin-ink); }

/* 승인 모달 안의 "새 구역 만들기" 묶음 — 구역 만들기 폼과 같은 격자를 쓴다. */
.admin-approval-zone-form {
  margin: 4px 0 12px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-md);
  padding: 10px 12px 4px;
}

.admin-approval-zone-form legend label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  margin-bottom: 0;
}

.admin-approval-zone-form > .admin-field-help { display: block; margin: 0 0 10px; }

.admin-approval-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ---------- 구역 관리 카드 ---------- */

.admin-zone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-zone-card,
.admin-zone-empty {
  background: var(--admin-panel);
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-md);
}

.admin-zone-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
}

.admin-zone-card-head,
.admin-zone-card-identity,
.admin-zone-card-actions {
  display: flex;
  align-items: center;
}

.admin-zone-card-head {
  justify-content: space-between;
  gap: 12px;
}

.admin-zone-card-identity {
  gap: 10px;
  min-width: 0;
}

.admin-zone-card h3 {
  color: var(--admin-ink);
  font-size: 15px;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-zone-description {
  min-height: 42px;
  margin: 12px 0 14px;
  color: var(--admin-text);
  font-size: 13px;
}

.admin-zone-description.is-empty {
  color: var(--admin-muted);
}

.admin-zone-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--admin-line);
  border-bottom: 1px solid var(--admin-line);
}

.admin-zone-metadata div {
  min-width: 0;
}

.admin-zone-metadata dt {
  color: var(--admin-muted);
  font-size: 11px;
}

.admin-zone-metadata dd {
  margin: 3px 0 0;
  color: var(--admin-ink);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-zone-card-actions {
  gap: 8px;
  margin-top: 14px;
}

.admin-zone-card-actions .admin-btn {
  text-decoration: none;
}

.admin-zone-readonly {
  margin-left: auto;
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-zone-empty {
  padding: 48px 24px;
  text-align: center;
}

.admin-zone-empty strong {
  color: var(--admin-ink);
  font-size: 15px;
}

.admin-zone-empty p {
  max-width: 48ch;
  margin: 8px auto 0;
  color: var(--admin-muted);
  font-size: 13px;
}

.admin-zone-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--admin-line);
  vertical-align: middle;
}

/* ---------- 감사 로그 ---------- */

.admin-audit-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-audit-toolbar .admin-field {
  max-width: 220px;
}

/* 감사 로그는 공용 표 규칙(둘째 칸만 접는다)과 접히는 칸이 다르다 — 유형은 한 줄이고 긴 상세가 접힌다.
   둘째 칸이 접히면 '구역 운영 재개'가 한 글자씩 세로로 섰다(2026-09-29 QA). */
.admin-audit-table th:nth-child(2),
.admin-audit-table td:nth-child(2) {
  white-space: nowrap;
}

/* 넓은 화면에서는 상세가 남는 폭을 다 쓰고 표가 상자 안에 선다. 좁으면 공용 규칙대로 상자가 옆으로 민다. */
@media (min-width: 1100px) {
  .admin-audit-table { table-layout: fixed; }
  .admin-audit-table th:nth-child(1) { width: 176px; }
  .admin-audit-table th:nth-child(2) { width: 150px; }
  .admin-audit-table th:nth-child(3),
  .admin-audit-table th:nth-child(4) { width: 120px; }
  .admin-audit-table td:nth-child(3),
  .admin-audit-table td:nth-child(4) { white-space: normal; word-break: keep-all; }
}

.admin-audit-table td.admin-audit-detail {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  min-width: 220px;
  color: var(--admin-muted);
}

.admin-audit-more {
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* ---------- OCR 사용량·비용 ---------- */

.admin-ocr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-ocr-toolbar-note {
  margin: 0;
  color: var(--admin-muted);
  font-size: 13px;
}

.admin-ocr-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.admin-ocr-metric {
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-sm);
  background: color-mix(in srgb, var(--admin-primary) 3%, var(--admin-panel));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.admin-ocr-metric-label,
.admin-ocr-metric-detail {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-ocr-metric-value {
  color: var(--admin-ink);
  font-size: 22px;
  line-height: 1.2;
}

.admin-ocr-notes {
  margin: 0 16px 16px;
  padding: 14px 16px;
  border-radius: var(--admin-radius-sm);
  background: color-mix(in srgb, var(--admin-warn) 8%, var(--admin-panel));
  color: var(--admin-text);
  font-size: 12px;
}

.admin-ocr-notes ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.admin-ocr-notes li + li {
  margin-top: 4px;
}

.admin-ocr-zone-panel {
  margin-top: 16px;
}

.admin-panel-heading {
  padding: 16px 16px 0;
}

.admin-panel-heading h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 15px;
}

/* ---------- 모달 ---------- */

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--admin-ink) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.admin-modal {
  background: var(--admin-panel);
  border-radius: var(--admin-radius-md);
  padding: 24px;
  width: min(380px, calc(100vw - 32px));
  /* 창이 화면보다 길면 배경 막(가운데 고정) 밖으로 잘려 아래 단추에 닿을 수 없었다 — 승인 창에 비슷한
     구역 안내가 붙자 720px 화면에서 드러났다(2026-09-10). 구역 관리 창과 같은 방식으로 창 안에서 스크롤한다. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--admin-ink) 25%, transparent);
}

.admin-zone-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.admin-zone-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.admin-zone-form-wide {
  grid-column: 1 / -1;
}

.admin-field-help {
  display: block;
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 11px;
}

.admin-zone-people-notice {
  margin: 0 0 12px;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg);
  padding: 12px;
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-modal h2 {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--admin-ink);
}

.admin-modal label {
  display: block;
  font-size: 12px;
  color: var(--admin-muted);
  margin-bottom: 6px;
}

.admin-modal input,
.admin-modal select,
.admin-modal textarea {
  width: 100%;
}

.admin-modal-field {
  margin-bottom: 12px;
}

/* 전역 .admin-modal input(width:100%) 이 체크박스도 늘리므로 되돌린다. */
.admin-modal input[type="checkbox"] {
  width: auto;
}

/* 전역 .admin-modal label(display:block) 보다 특이도를 올려 체크박스 한 줄 정렬을 지킨다. */
.admin-modal .admin-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--admin-text);
  margin-bottom: 0;
}

.admin-modal-error {
  color: var(--admin-danger);
  font-size: 12px;
  margin: 10px 0 0;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.admin-modal-actions button {
  border: 1px solid var(--admin-line);
  background: var(--admin-panel);
  color: var(--admin-text);
  border-radius: var(--admin-radius-sm);
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.admin-modal-actions button[data-action="confirm"] {
  border-color: var(--admin-primary);
  background: var(--admin-primary);
  color: #fff;
  font-weight: 600;
}

/* ---------- 반응형 ---------- */

@media (max-width: 760px) {
  .admin-ocr-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-table {
    display: block;
    overflow-x: auto;
  }

  .admin-zone-grid,
  .admin-zone-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-zone-form-wide {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* 이메일 인증 전 신청(2026-09-10). 승인할 수 있는 목록과 한눈에 갈리도록 옅은 바탕에 두고,
   단추 대신 '이메일 인증 대기' 표시만 단다. */
.admin-approval-unverified {
  margin-top: 16px;
  background: var(--admin-soft, #f6f7fa);
}

.admin-approval-unverified h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.admin-approval-note {
  margin: 0 0 12px;
  color: var(--admin-muted, #6b7280);
  font-size: 13px;
}

.admin-approval-waiting {
  align-self: start;
  border-radius: 999px;
  background: #f5ecd7;
  padding: 4px 10px;
  color: #8a5a12;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-member-request {
  display: block;
  margin-top: 4px;
  color: var(--admin-ink, #1b2338);
  font-size: 12px;
}

/* 비슷한 기존 구역(2026-09-10). 승인 창에서 새 구역 칸보다 먼저 눈에 들어오게 옅은 주황 바탕에 둔다.
   판단마다 줄 앞 표시 색을 달리한다 — 같은 곳(주황)·확인 필요(회색)·다른 지역(옅게). */
.admin-similar-zones {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: #fbf4e6;
  padding: 10px 12px;
  font-size: 13px;
}

.admin-similar-zones ul {
  margin: 0;
  padding-left: 18px;
}

.admin-similar-zones li[data-match="same_place"] { color: #8a5a12; font-weight: 700; }
.admin-similar-zones li[data-match="check_place"] { color: var(--admin-ink, #1b2338); }
.admin-similar-zones li[data-match="other_region"] { color: var(--admin-muted, #6b7280); }

/* 되돌릴 수 없는 확인(신청 삭제)은 승인과 같은 파랑이 아니라 빨강으로 가른다. */
.admin-modal-actions button[data-action="confirm"].admin-btn-danger {
  border-color: var(--admin-danger, #b42318);
  background: var(--admin-danger, #b42318);
}

/* ---------- 셋째 열(UR-163) — 승인 대기 · 구역 ---------- */

.admin-side-card {
  padding: 16px 18px;
  background: var(--admin-panel);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.admin-side-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--admin-ink);
}

.admin-side-card h3 small {
  font-weight: 400;
  font-size: 12px;
  color: var(--admin-muted);
}

.admin-side-empty {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--admin-muted);
}

.admin-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-side-list li {
  padding: 8px 0;
  border-top: 1px solid var(--admin-line);
  font-size: 13px;
}

.admin-side-list li:first-child {
  border-top: 0;
}

.admin-side-list b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--admin-ink);
}

.admin-side-list small {
  display: block;
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-side-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.admin-side-go {
  margin-top: 10px;
  width: 100%;
}

/* 느낌 ②: 관리 패널도 테두리 대신 그림자. */
.admin-panel {
  border: 0;
  box-shadow: var(--shadow-card);
}

/* ---------- 업데이트 노트 ---------- */
/* 배포가 쌓여도 스크롤만 길어지지 않게 목록과 본문을 갈랐다(2026-09-23 사용자 지시).
   표가 아니라 글이라 .admin-panel 의 overflow-x:auto 에 기대지 않는다. */

.admin-note-intro {
  margin: 0 0 12px;
  color: var(--admin-muted);
  font-size: 13px;
}

.admin-notes-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* 왼쪽 — 배포 목록. 본문이 길어도 따라 내려오고, 목록 자체가 길면 그 안에서만 스크롤한다. */
.admin-notes-list {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 40px);
  padding: 12px;
  border-radius: var(--admin-radius-md);
  background: var(--admin-panel);
  box-shadow: var(--shadow-card);
}

.admin-notes-tools {
  display: grid;
  gap: 8px;
}

.admin-notes-tools input,
.admin-notes-tools select {
  width: 100%;
  font-size: 13px;
}

.admin-notes-rows {
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.admin-notes-month {
  margin: 12px 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-muted);
}

.admin-notes-month:first-child {
  margin-top: 0;
}

.admin-notes-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--admin-radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.admin-notes-row:hover {
  background: var(--admin-bg);
}

.admin-notes-row.is-active {
  background: color-mix(in srgb, var(--admin-primary) 10%, var(--admin-panel));
}

.admin-notes-when {
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-primary);
}

.admin-notes-count {
  font-size: 11px;
  color: var(--admin-muted);
}

.admin-notes-row strong {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}

/* 오른쪽 — 고른 배포의 본문. */
.admin-notes-detail {
  min-width: 0;
  padding: 20px;
  border-radius: var(--admin-radius-md);
  background: var(--admin-panel);
  box-shadow: var(--shadow-card);
}

.admin-notes-detail-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-notes-back {
  display: none;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--admin-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.admin-note-date {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--admin-primary);
}

.admin-notes-detail-head h3 {
  margin: 2px 0 0;
  font-size: 17px;
}

.admin-note-summary {
  margin: 6px 0 0;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.6;
  word-break: keep-all;
}

/* 항목 바로가기. 본문이 길 때 무엇이 들어 있는지 먼저 보이고 눌러서 건너뛴다. */
.admin-notes-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.admin-notes-chip {
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  background: var(--admin-panel);
  color: var(--admin-ink);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.admin-notes-chip:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}

.admin-notes-items {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.admin-note-item {
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-md);
  scroll-margin-top: 12px;
}

.admin-note-item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-note-item-head h4 {
  margin: 0;
  font-size: 15px;
}

.admin-note-kind {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--admin-muted);
}

.admin-note-kind[data-kind="추가"],
.admin-notes-chip[data-kind="추가"] { background: var(--admin-success); }
.admin-note-kind[data-kind="변경"],
.admin-notes-chip[data-kind="변경"] { background: var(--admin-primary); }
.admin-note-kind[data-kind="고침"],
.admin-notes-chip[data-kind="고침"] { background: var(--admin-danger); }
.admin-note-kind[data-kind="데이터"],
.admin-notes-chip[data-kind="데이터"] { background: var(--admin-warn); }

/* 칩은 글자가 색 위에 얹히므로 흰 글자로 뒤집는다. */
.admin-notes-chip[data-kind] {
  border-color: transparent;
  color: #fff;
}

.admin-notes-chip[data-kind]:hover {
  color: #fff;
  filter: brightness(1.08);
}

.admin-note-where,
.admin-note-source {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--admin-muted);
}

/* 전·후. 한 칸에 글과 그 시점 화면이 함께 들어간다. */
.admin-note-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  align-items: start;
}

.admin-note-compare.is-stacked {
  grid-template-columns: minmax(0, 1fr);
}

.admin-note-side {
  padding: 12px;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg);
}

.admin-note-side[data-tone="after"] {
  background: color-mix(in srgb, var(--admin-primary) 8%, var(--admin-panel));
}

.admin-note-side-label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-muted);
}

.admin-note-side[data-tone="after"] .admin-note-side-label {
  color: var(--admin-primary);
}

.admin-note-summary p {
  margin: 0;
}

/* 문단 사이를 띄운다 — 한 덩어리로 붙으면 무엇이 바뀌었고 무엇이 그대로인지 갈라 읽히지 않는다. */
.admin-note-side-text p + p,
.admin-note-summary p + p {
  margin-top: 8px;
}

.admin-note-side p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  word-break: keep-all;
}

/* 캡처. 2배 해상도로 찍어 파일의 실제 픽셀은 두 배이므로, 멈출 폭은 figure 에 인라인으로 온다. */
.admin-note-figure {
  margin: 10px 0 0;
}

.admin-note-figure.is-wide {
  margin-top: 14px;
}

.admin-note-figure a {
  display: block;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-sm);
  overflow: hidden;
  background: var(--admin-panel);
}

.admin-note-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.admin-note-figure figcaption {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--admin-muted);
  word-break: keep-all;
}

/* 폰·좁은 패드에서는 목록과 본문이 한 화면을 나눠 쓰지 못한다 — 한 번에 한 쪽만 보이고
   본문에서 '배포 목록'으로 돌아간다. 전·후도 반반으로 두면 글자가 두세 자씩 끊긴다. */
@media (max-width: 900px) {
  .admin-notes-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-notes-list { position: static; max-height: none; }
  .admin-notes-layout[data-pane="list"] .admin-notes-detail { display: none; }
  .admin-notes-layout[data-pane="detail"] .admin-notes-list { display: none; }
  .admin-notes-back { display: block; }
  .admin-note-compare { grid-template-columns: minmax(0, 1fr); }
  .admin-notes-detail { padding: 16px 14px; }
}

/* ---------- 긴 목록 도구 ---------- */
/* 구성원·초대가 같은 도구를 쓴다 — 줄이 늘수록 페이지만 길어지던 것을 막는다(2026-09-23). */

.admin-list-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-list-tools .admin-list-search {
  flex: 1 1 240px;
  min-width: 0;
}

.admin-list-tools select {
  flex: 0 0 auto;
}

.admin-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--admin-muted);
}

/* 쪽당 줄 수는 단추들과 같은 높이로 선다 — 공용 입력 규칙의 9px 세로 여백이면 혼자 커진다. */
.admin-pager .admin-pager-size {
  padding: 5px 8px;
  font-size: 12px;
}

.admin-pager-label {
  margin-right: 2px;
}

.admin-pager button[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* 폰에서는 거르개가 가로로 서면 잘린다 — 검색을 한 줄, 거르개를 그다음 줄로 흘린다. */
@media (max-width: 760px) {
  .admin-list-tools .admin-list-search { flex-basis: 100%; }
  .admin-list-tools select { flex: 1 1 140px; }
  .admin-pager { flex-wrap: wrap; justify-content: space-between; }
}

/* ---------- 구역관리카드 ---------- */
/* 종이 한 장으로 읽고 그대로 인쇄하는 보고서다(UR-195). 담당자가 준 실제 양식의 배치를 따른다. */

.zone-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.zone-card-stamp {
  margin-left: auto;
  font-size: 12px;
  color: var(--admin-muted);
}

.zone-card-paper {
  padding: 24px;
  border-radius: var(--admin-radius-md);
  background: var(--admin-panel);
  box-shadow: var(--shadow-card);
}

.zone-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--admin-primary);
}

.zone-card-kind {
  padding: 4px 12px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-sm);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.zone-card-title strong {
  font-size: 22px;
}

.zone-card-head {
  margin-bottom: 20px;
}

.zone-card-head .zone-card-table-scroll {
  margin-top: 10px;
}

/* 표는 제 칸을 지키고, 좁으면 이 상자 안에서만 옆으로 민다. */
.zone-card-table-scroll {
  overflow-x: auto;
}

.zone-card-section {
  margin-top: 20px;
}

.zone-card-section h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.zone-card-section h3::before {
  content: "□ ";
  color: var(--admin-muted);
}

.zone-card-section h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--admin-muted);
}

/* 사업계획 안의 건설개요·단위세대는 한 단계 안쪽이다. */
.zone-card-subsections {
  display: grid;
  gap: 14px;
}

/* 칸의 최소 폭을 0 으로 풀어 둔다. 풀지 않으면 안에 든 표의 폭이 칸을 늘려, 스크롤 상자가 있어도
   페이지째 옆으로 밀린다 — 값이 다 들어찬 카드(샘플)에서 폰 가로 40px 이 밀려 드러났다. */
.zone-card-subsections > .zone-card-section {
  min-width: 0;
}

.zone-card-subsections .zone-card-section {
  margin-top: 0;
}

.zone-card-subsections h3::before {
  content: "○ ";
}

.zone-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.zone-card-table th,
.zone-card-table td {
  padding: 7px 9px;
  border: 1px solid var(--admin-line);
  text-align: left;
  vertical-align: middle;
  word-break: keep-all;
}

.zone-card-table thead th {
  background: var(--admin-bg);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.zone-card-table tbody th {
  width: 190px;
  background: var(--admin-bg);
  font-weight: 600;
}

/* 단위세대의 합계 줄과 합계 칸은 사람이 적지 않는다 — 읽는 값임을 굵기로 알린다. */
.zone-card-table tbody tr:last-child th,
.zone-card-table tbody tr:last-child td:last-child {
  font-weight: 700;
}

.zone-card-value.is-empty {
  color: var(--admin-muted);
}

.zone-card-input {
  width: 100%;
  /* 표 칸 안에서는 칸 테두리가 이미 있다 — 입력 테두리를 겹치면 줄이 두 겹으로 보인다. */
  border-color: transparent !important;
  background: color-mix(in srgb, var(--admin-primary) 6%, var(--admin-panel)) !important;
  padding: 5px 7px !important;
}

.zone-card-input:focus {
  border-color: var(--admin-primary) !important;
}

.zone-card-list {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.zone-card-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.zone-card-bullet {
  color: var(--admin-muted);
}

.zone-card-conditions {
  display: grid;
  gap: 12px;
}

.zone-card-limit {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--admin-warn);
}

.zone-card-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.zone-card-image {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-sm);
  text-align: center;
}

.zone-card-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--admin-radius-sm);
}

.zone-card-image figcaption {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
}

/* 진짜 파일 입력은 감추고 글자를 직접 그린다 — 브라우저가 그리면 "Choose File" 로 나온다. */
.zone-card-image-picker {
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
}

.zone-card-image-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.zone-card-image-picker .admin-btn {
  pointer-events: none;
}

/* ---------- 구역관리카드: 두 안 고르기 · 샘플 · 문서 방식(UR-196) ---------- */

.zone-card-choice {
  display: inline-flex;
}

.zone-card-choice .admin-btn {
  border-radius: 0;
}

.zone-card-choice .admin-btn:first-child {
  border-radius: var(--admin-radius-sm) 0 0 var(--admin-radius-sm);
}

.zone-card-choice .admin-btn:last-child {
  margin-left: -1px;
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}

/* 고른 쪽·켠 것은 색으로 알린다 — 단추 두 개가 같은 모양이면 무엇이 켜졌는지 눌러 봐야 안다. */
.admin-btn.is-on,
.admin-btn.is-on:hover {
  background: var(--admin-ink);
  border-color: var(--admin-ink);
  color: #fff;
}

/* 두 방식을 함께 쓰기로 해서(2026-09-28) 고른 것이 무엇을 정하는지 도구 줄 아래에 적는다. */
.zone-card-choice-note {
  margin: -4px 0 12px;
  font-size: 12px;
  color: var(--admin-muted);
}

.zone-card-sample-flag {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px dashed color-mix(in srgb, var(--admin-warn) 50%, transparent);
  border-radius: var(--admin-radius-sm);
  background: color-mix(in srgb, var(--admin-warn) 8%, transparent);
  color: var(--admin-warn);
  font-size: 12px;
}

/* 글 편집기(Jodit)는 자기 껍데기를 들고 온다 — 우리는 자리와 테두리만 맞춘다.
   껍데기(.jodit-container)에 우리 표시를 붙여 두므로 선택자는 그 자신을 가리킨다. */
.jodit-container.zone-card-doc-editor:not(.jodit_inline) {
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-panel);
}

.zone-card-doc-editor .jodit-workplace {
  background: var(--admin-panel);
}

/* 편집기 안의 글도 보고서와 같은 모양으로 보여야 한다 — 고치는 중과 인쇄가 어긋나지 않게. */
.zone-card-doc-editor .jodit-wysiwyg {
  padding: 16px 18px;
}

.zone-card-doc-body,
.zone-card-doc-editor .jodit-wysiwyg {
  font-size: 13px;
  line-height: 1.7;
  color: var(--admin-ink);
}

/* 고치는 중인 곳은 테두리로 알린다 — 문서는 입력칸이 없어서 어디를 고칠 수 있는지 보이지 않는다. */
.zone-card-doc-body h2,
.zone-card-doc-editor .jodit-wysiwyg h2 {
  margin: 0 0 14px;
  font-size: 17px;
  text-align: center;
}

.zone-card-doc-body h3,
.zone-card-doc-editor .jodit-wysiwyg h3 {
  margin: 18px 0 8px;
  padding-left: 10px;
  border-left: 3px solid var(--admin-ink);
  font-size: 14px;
}

.zone-card-doc-body h4,
.zone-card-doc-editor .jodit-wysiwyg h4 {
  margin: 12px 0 6px;
  font-size: 13px;
  color: var(--admin-muted);
}

.zone-card-doc-body p,
.zone-card-doc-editor .jodit-wysiwyg p {
  margin: 0 0 8px;
}

.zone-card-doc-body ul,
.zone-card-doc-body ol,
.zone-card-doc-editor .jodit-wysiwyg ul,
.zone-card-doc-editor .jodit-wysiwyg ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.zone-card-doc-body table,
.zone-card-doc-editor .jodit-wysiwyg table {
  width: 100%;
  margin: 0 0 12px;
  border-collapse: collapse;
  font-size: 13px;
}

.zone-card-doc-body th,
.zone-card-doc-body td,
.zone-card-doc-editor .jodit-wysiwyg th,
.zone-card-doc-editor .jodit-wysiwyg td {
  padding: 7px 9px;
  border: 1px solid var(--admin-line);
  text-align: left;
  vertical-align: middle;
  word-break: keep-all;
}

.zone-card-doc-body thead th,
.zone-card-doc-editor .jodit-wysiwyg thead th {
  background: var(--admin-bg);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.zone-card-doc-body tbody th,
.zone-card-doc-editor .jodit-wysiwyg tbody th {
  background: var(--admin-bg);
  font-weight: 600;
}

/* 이름 칸이 내용 칸만큼 넓어지면 두 칸짜리 표가 반으로 갈린다 — 양식 쪽과 같은 폭으로 세운다. */
.zone-card-doc-body tbody tr > th:first-child,
.zone-card-doc-editor .jodit-wysiwyg tbody tr > th:first-child {
  width: 190px;
}

.zone-card-doc-body figure {
  margin: 0 0 12px;
}

.zone-card-doc-body img,
.zone-card-doc-editor .jodit-wysiwyg img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-sm);
}

.zone-card-doc-body figcaption,
.zone-card-doc-editor .jodit-wysiwyg figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--admin-muted);
  text-align: center;
}

.zone-card-doc-restricted {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--admin-line);
}

@media (max-width: 900px) {
  .zone-card-paper { padding: 16px 14px; }
  .zone-card-images { grid-template-columns: 1fr; }
  .zone-card-stamp { margin-left: 0; width: 100%; }
  /* 좁은 화면에서는 칸을 글자에 맞추고 표째로 민다 — 고정 폭이면 두세 자씩 끊긴다. */
  .zone-card-table { table-layout: auto; min-width: max-content; }
  .zone-card-table tbody th { width: auto; white-space: nowrap; }
  /* 문서는 표를 스크롤 상자에 담을 수 없다(고치는 글의 일부다) — 문서째로 상자 안에서 민다. */
  .zone-card-doc-body { overflow-x: auto; }

  /* 편집기 도구 줄은 폰에서 세 줄로 접힌다(115px) — 손가락으로 누르는 화면에서는 옆으로 미는 것보다
     접히는 편이 낫다. 접히는 것은 편집기 기본 동작이라 따로 손대지 않는다. */
}

/* 인쇄하면 보고서만 남는다 — 레일·셋째 열·도구는 종이에 있을 이유가 없다. */
@media print {
  .rail,
  .shell-phone-bar,
  .shell-aside,
  .admin-nav,
  .admin-section-heading,
  .admin-note-intro,
  .skip-link,
  .zone-card-toolbar,
  .zone-card-choice-note,
  .zone-card-image-picker,
  .jodit-toolbar__box,
  .jodit-status-bar,
  .jodit-placeholder {
    display: none !important;
  }

  /* 고치는 중에 인쇄해도 종이에는 글만 남는다. */
  .jodit-container.zone-card-doc-editor:not(.jodit_inline) {
    border: none !important;
    height: auto !important;
  }

  .zone-card-doc-editor .jodit-wysiwyg {
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }



  .zone-card-doc-body table,
  .zone-card-doc-body figure {
    break-inside: avoid;
  }

  .zone-card-doc-body {
    overflow: visible !important;
  }

  /* 종이는 흰 바탕이다 — 화면 바탕색이 남으면 내용이 끝난 자리부터 회색 덩어리가 찍힌다. */
  body.admin-body,
  .app-shell,
  .admin-main {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  .zone-card-paper {
    padding: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /* 표가 쪽을 넘어가며 잘리지 않게 한다. */
  .zone-card-section,
  .zone-card-table,
  .zone-card-image {
    break-inside: avoid;
  }

  /* 그림 두 장이 한 쪽을 통째로 먹지 않게 높이를 묶는다 — 향후계획과 같은 쪽에 들어간다. */
  .zone-card-image img,
  .zone-card-doc-body img {
    max-height: 78mm;
    object-fit: contain;
  }

  /* 종이에는 밀 곳이 없다 — 스크롤 상자를 펴서 표가 통째로 찍히게 한다. */
  .zone-card-table-scroll {
    overflow: visible !important;
  }
}

/* 폰에서는 표를 접는다(9월 22일 피드백 18항). 아홉 열을 다 펴면 1,486px 이라 이름과 이메일만
   보이고 나머지는 옆으로 밀어야 닿았다 — 이름·역할·상태·동작만 남기고 나머지는 넓은 화면에서 본다. */
@media (max-width: 760px) {
  .admin-table .admin-col-wide {
    display: none;
  }

  /* 넓은 화면의 nowrap 규칙(열이 접히면 글자가 한 자씩 끊기는 것을 막던 것)은 여기서 푼다 —
     남은 네 열은 접혀도 되고, 붙잡아 두면 표만 옆으로 길어진다. */
  .admin-table th,
  .admin-table td {
    padding: 10px 10px;
    white-space: normal;
    word-break: keep-all;
  }
}

.admin-member-company {
  display: block;
  color: var(--admin-muted);
  font-size: 11px;
}