/* ===== Base ===== */
:root {
  --bg: #f7f8fa;
  --bg-card: #ffffff;
  --border: #e4e7eb;
  --border-strong: #cbd2d9;
  --text: #1f2937;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --radius: 6px;

  /* Subtle background (table headers, hover states, notes) */
  --bg-subtle: #f9fafb;

  /* Step 2 actionable banner / topnav rewrite-pending badge — yellow palette */
  --warn-bg-soft:    #fffbeb;
  --warn-bg:         #fef3c7;
  --warn-bg-strong:  #fde68a;
  --warn-border:     #fde68a;
  --warn-fg:         #78350f;
  --warn-fg-strong:  #92400e;
  --warn-accent:     #b45309;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI",
               "Noto Sans JP", "Noto Sans KR", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: "SF Mono", Monaco, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  color: #0f172a;
}

pre {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Noto Sans JP", "Noto Sans KR", "Segoe UI", sans-serif;
  font-size: 11.5px;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  color: #334155;
  /* 탭 너비 축소 */
  tab-size: 2;
}

/* ===== Topbar ===== */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand > a:first-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.brand-guide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.brand-guide:hover {
  background: #f1f5f9;
  text-decoration: none;
}
.brand-guide.active {
  background: #eff6ff;
}
.topnav { display: flex; gap: 4px; }
.topnav a {
  padding: 7px 14px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-weight: 500;
}
.topnav a:hover { background: #f1f5f9; text-decoration: none; }
.topnav a.active { background: #eff6ff; color: var(--primary); }

/* ------------------------------------------------------------------
 *  全体検索 — topnav inline form + /search ページ
 *
 *  layout: `.topnav-right` 가 search + git-pill 을 감싸 `margin-left: auto`
 *  로 오른쪽 정렬을 담당한다. 안쪽 요소들은 각자의 auto 를 갖지 않는다 —
 *  두 auto 가 free space 를 나눠 먹어 중간에 gap 이 생기는 버그를 피하기
 *  위함.
 * ---------------------------------------------------------------- */
.topnav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topnav-right .git-sync-wrap { margin-left: 0; }
.topnav-search {
  display: flex;
  align-items: center;
}
.topnav-search input[type="search"] {
  width: 260px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: #f8fafc;
  transition: border-color .12s, background .12s;
}
.topnav-search input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}

.search-page { max-width: 1100px; margin: 0 auto; padding: 20px 24px; }
.search-page h1 { font-size: 22px; margin: 0 0 16px; letter-spacing: -0.3px; }
.search-form-page {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.search-form-page input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}
.search-form-page input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
}
.search-form-page button {
  padding: 10px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}
.search-form-page button:hover { background: #1e40af; }

.search-meta { font-size: 13px; color: var(--text-muted); margin: 8px 0 20px; }
.search-meta strong { color: var(--text); }
.search-empty { color: #b91c1c; margin-left: 6px; }
.search-help {
  font-size: 13px;
  color: var(--text-muted);
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  line-height: 1.7;
}

.search-group { margin-bottom: 28px; }
.search-group-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  padding: 0 0 6px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.search-group-title .search-count {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
  text-transform: none;
}
.search-hit-list { list-style: none; padding: 0; margin: 0; }
.search-hit {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.search-hit:last-child { border-bottom: none; }
.search-hit-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.search-hit-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}
.search-hit-title {
  font-size: 13px;
  color: var(--text);
}
.search-hit-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
.search-hit-snippet {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid var(--border);
}
/* 검색 매치 하이라이트 — <mark class="search-hl"> 로 감싸짐 */
.search-hit-snippet mark.search-hl,
mark.search-hl {
  background: #fef3c7;
  color: var(--text);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* 300건 cap 경고 배너 */
.search-cap-warn {
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 0 0 16px;
}

.search-min-len {
  font-size: 13px;
  color: #b91c1c;
  margin: 8px 0 16px;
}

/* カテゴリフィルター (チップ型 checkbox) */
.search-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.search-filter-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 4px;
}
.search-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: background .12s, border-color .12s;
  user-select: none;
}
.search-filter-chip:hover {
  background: #eff6ff;
  border-color: var(--primary);
}
.search-filter-chip input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}
.search-filter-chip input[type="checkbox"]:checked ~ .search-filter-count {
  color: var(--primary);
  font-weight: 600;
}
.search-filter-count {
  color: var(--text-muted);
  font-size: 11px;
}
.search-filter-empty {
  opacity: 0.45;
}
.search-filter-reset {
  margin-left: auto;
  font-size: 12px;
  color: var(--primary);
  padding: 4px 10px;
}

.btn-download,
.btn-claude {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 12px;
  transition: background-color 0.15s, transform 0.05s;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.btn-download {
  background: var(--success);
  color: #fff !important;
}
.btn-download:hover { background: #059669; text-decoration: none; }
.btn-download:active { transform: translateY(1px); }

/* 테스트 다운로드 — 보라색 (test-count 배지와 통일) */
.btn-download.btn-download-tests {
  background: #7c3aed;
}
.btn-download.btn-download-tests:hover {
  background: #6d28d9;
}

.btn-claude {
  background: #1f2937;
  color: #fff !important;
}
.btn-claude:hover { background: #374151; }
.btn-claude:active { transform: translateY(1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: #fff;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.btn-secondary:hover { background: #f8fafc; text-decoration: none; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--primary);
  color: #fff !important;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--danger);
  color: #fff !important;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.btn-danger:hover { background: #b91c1c; text-decoration: none; }
.btn-sm { padding: 4px 10px; font-size: 11px; }

/* Section head with title + action button */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 0;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--border);
}
.section-head .section-title {
  background: transparent;
  border-bottom: none;
  flex: 1;
}
.section-head .btn-primary,
.section-head .btn-secondary {
  flex-shrink: 0;
}
.section-head .section-sub {
  flex: 1;
  padding: 0 20px;
  color: var(--text-muted);
  font-size: 11px;
}

/* Category management */
.cat-add-form {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  align-items: center;
}
.cat-add-form input[type="text"] {
  flex: 1;
  max-width: 400px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
}
.cat-add-form input[type="text"]:focus {
  border-color: var(--primary);
  outline: none;
}

.cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.cat-table th {
  text-align: left;
  padding: 10px 16px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cat-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.cat-table tbody tr:last-child td { border-bottom: none; }
.cat-table tbody tr:hover { background: #fafbfc; }
.cat-table .col-order { width: 80px; }
.cat-table .col-name { }
.cat-table .col-count { width: 100px; text-align: center; }
.cat-table .col-actions { width: 320px; text-align: right; }

.order-input {
  width: 56px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-family: Menlo, monospace;
  text-align: center;
  background: #fff;
}
.order-input:focus {
  border-color: var(--primary);
  outline: none;
}

.name-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  transition: background-color 0.1s, border-color 0.1s;
}
.name-input:hover { background: #f1f5f9; }
.name-input:focus { border-color: var(--primary); background: #fff; outline: none; }

.inline-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.rename-form {
  display: flex;
  max-width: 420px;
}

.btn-icon {
  background: none;
  border: 1px solid transparent;
  padding: 5px 6px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.btn-icon:hover {
  color: var(--primary);
  background: #eff6ff;
  border-color: #bfdbfe;
}

.reassign-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  min-width: 180px;
}
.reassign-select:focus {
  border-color: var(--primary);
  outline: none;
}

.delete-form {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.badge-info { background: #dbeafe; color: #1e40af; }
.badge-empty { background: #f3f4f6; color: #9ca3af; }

/* Role management specific */
.role-add-form { padding: 16px 20px; }
.role-add-form .form-inline {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.role-add-form .form-inline label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-add-form .form-inline label.grow { flex: 1; max-width: 400px; }
.role-add-form .form-inline-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.role-add-form .form-inline input[type="text"] {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.role-add-form .form-inline input[type="text"]:focus {
  border-color: var(--primary);
}
.role-add-form .form-inline input[name="code"] {
  width: 80px;
  font-family: Menlo, monospace;
  text-align: center;
}
.role-add-form .form-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-light);
}

.cat-table .col-code { width: 80px; }
.role-code {
  font-family: Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  background: #eff6ff;
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 3px;
}

/* ============================================================
   Bulk edit table (drag/drop reorder + inline rename)
   ============================================================ */
.bulk-table .col-drag {
  width: 64px;
  padding-left: 10px;
  padding-right: 0;
  white-space: nowrap;
}
.bulk-row {
  transition: background-color 0.15s, box-shadow 0.15s;
}
.bulk-row .col-drag {
  cursor: grab;
  user-select: none;
  color: var(--text-light);
}
/* td 直接 display:flex 면 셀이 table-cell 동작을 잃어 column 너비가 깨진다.
   inner div 에 flex 를 적용해 cell 자체는 정상 table-cell 로 유지. */
.bulk-row .drag-cell-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bulk-row:hover .drag-handle {
  color: var(--primary);
}
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #cbd5e1;
  flex-shrink: 0;
}
.row-order-buttons {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.bulk-row:hover .row-order-buttons,
.bulk-row:focus-within .row-order-buttons {
  opacity: 1;
}
.btn-order-move {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  width: 18px;
  height: 13px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  cursor: pointer;
}
.btn-order-move:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: #eff6ff;
}

/* dirty / drag states */
.bulk-row.row-dirty {
  background: #fffbeb;
}
.bulk-row.row-dirty .name-input {
  background: #fff;
  border-color: #fcd34d;
}
.bulk-row.row-dragging {
  opacity: 0.4;
}
.bulk-row.row-drop-before td {
  box-shadow: inset 0 2px 0 0 var(--primary);
}
.bulk-row.row-drop-after td {
  box-shadow: inset 0 -2px 0 0 var(--primary);
}
.bulk-table.table-reordered {
  outline: 1px dashed #fcd34d;
  outline-offset: -1px;
}

/* save button + dirty count badge */
#bulk-save-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
#bulk-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dirty-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fff;
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  font-family: Menlo, monospace;
}

/* Index 역할 컬럼 — 코드 대신 이름 사용하므로 약간 넓게 */
.col-role {
  width: auto;
  min-width: 60px;
  max-width: 90px;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
}
.api-table thead .col-role {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  word-break: keep-all;
  padding: 8px 6px;
}

/* Flash messages */
.flash-bar { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  border: 1px solid;
}
.flash-success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.flash-error   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* New API form */
.api-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field-method { grid-column: 1; max-width: 160px; }
.form-field-path { grid-column: 2; }
.form-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.form-field .req { color: var(--danger); }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--primary);
}
.form-hint {
  font-size: 11px;
  color: var(--text-light);
}
.form-hint code { font-size: 10.5px; }
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Danger zone */
.danger-zone {
  margin-top: 32px;
  padding: 18px 22px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius);
}
.danger-zone h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.danger-zone p {
  margin: 0 0 14px;
  font-size: 12px;
  color: #7f1d1d;
}
.danger-zone label {
  display: block;
  font-size: 11.5px;
  color: #7f1d1d;
  margin-bottom: 6px;
}
.delete-row {
  display: flex;
  gap: 8px;
  max-width: 520px;
}
.delete-row input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid #fca5a5;
  border-radius: 5px;
  font-size: 12px;
  font-family: Menlo, monospace;
  background: #fff;
  outline: none;
}
.delete-row input:focus { border-color: var(--danger); }

.btn-download svg,
.btn-claude svg,
.btn-secondary svg { flex-shrink: 0; }

.breadcrumb-actions { display: flex; gap: 8px; }

.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 11px 20px;
  background: #1f2937;
  color: #fff;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 100;
  max-width: 480px;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.success { background: #065f46; }
.toast.error   { background: #991b1b; }

.content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

.footer {
  text-align: center;
  padding: 24px;
  color: var(--text-light);
  font-size: 11px;
}

/* ===== Index page ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.stat-card-alert {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #fcd34d;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
}
.stat-card-alert .stat-value { color: #92400e; }
.stat-card-alert .stat-label { color: #b45309; font-weight: 600; }
.stat-card-alert:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
  transform: translateY(-1px);
  transition: all 0.15s;
}

/* WIP stat card */
.stat-card-wip {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-color: #fb923c;
  box-shadow: 0 1px 3px rgba(249, 115, 22, 0.2);
}
.stat-card-wip .stat-value { color: #9a3412; }
.stat-card-wip .stat-label { color: #c2410c; font-weight: 600; }
.stat-card-wip:hover {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
  transform: translateY(-1px);
  transition: all 0.15s;
}

/* WIP badge in list rows */
.wip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 12px;
  font-size: 10.5px;
  color: #9a3412;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.wip-badge .wip-icon {
  font-size: 11px;
}
.wip-badge .wip-time {
  color: #c2410c;
  font-weight: 500;
}
.wip-badge.wip-stale {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.wip-badge.wip-stale .wip-time {
  color: #b91c1c;
}
.wip-stale-warn { font-size: 11px; }
.api-row.is-wip {
  background: rgba(255, 247, 237, 0.4);
}
.api-row.is-wip:hover {
  background: rgba(255, 237, 213, 0.6);
}

/* WIP zone on detail page */
.wip-zone {
  margin-top: 24px;
  padding: 16px 20px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: var(--radius);
}
.wip-zone.wip-zone-active {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-color: #fb923c;
  box-shadow: 0 1px 3px rgba(249, 115, 22, 0.15);
}
.wip-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9a3412;
  font-size: 13px;
  margin-bottom: 10px;
}
.wip-icon-large { font-size: 16px; }
.wip-zone-desc {
  margin: 0 0 12px;
  font-size: 12px;
  color: #9a3412;
}
.wip-state {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  margin-bottom: 12px;
}
.wip-state.wip-state-stale {
  background: #fef2f2;
  border-color: #fca5a5;
}
.wip-state-line {
  font-size: 12.5px;
  color: #9a3412;
}
.wip-state-meta {
  color: #c2410c;
  font-weight: 500;
  margin-left: 4px;
}
.wip-note-display {
  margin-top: 6px;
  padding: 6px 8px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  font-size: 11.5px;
  color: #78350f;
}
.wip-state-warning {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  font-size: 11.5px;
  color: #991b1b;
  font-weight: 600;
}
.wip-history-details { margin-top: 12px; }
.wip-history-details summary {
  cursor: pointer; font-size: 12px; color: #6b7280; font-weight: 600;
}
.wip-history-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  border-left: 2px solid #e5e7eb; padding-left: 12px;
}
.wip-history-item {
  margin-bottom: 8px; font-size: 12px; line-height: 1.5;
}
.wip-history-badge { margin-right: 4px; }
.wip-history-action { font-weight: 600; margin-right: 6px; }
.wip-history-meta { color: #9ca3af; font-size: 11px; }
.wip-history-note {
  margin-top: 2px; padding: 4px 8px;
  background: var(--bg-subtle); border-radius: 3px; font-size: 11.5px;
  white-space: pre-wrap; color: #374151;
}
.wip-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.wip-note-input {
  flex: 1;
  min-width: 180px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid #fdba74;
  border-radius: 4px;
  background: #fff;
}
.wip-note-input:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}
.btn-wip-start {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f97316;
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.btn-wip-start:hover { background: #ea580c; }
.btn-wip-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #6b7280;
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.btn-wip-end:hover { background: #4b5563; }

.filter-changed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 16px;
  font-size: 11.5px;
  color: #92400e;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.filter-changed-toggle:hover {
  background: #fde68a;
}
.filter-changed-toggle input[type="checkbox"] {
  accent-color: #f59e0b;
  cursor: pointer;
}

/* Review workflow */
.btn-review-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--success);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.btn-review-done:hover { background: #059669; }

.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}
.btn-link:hover { color: var(--primary-hover); }

.baseline-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  font-size: 11.5px;
  color: #1e40af;
  margin-bottom: 16px;
}
.baseline-info svg { flex-shrink: 0; }
.baseline-info code {
  background: #fff;
  color: var(--primary);
  padding: 2px 6px;
  font-size: 10.5px;
}
.baseline-reset { margin-left: auto; }

.review-zone {
  margin-top: 32px;
  padding: 18px 22px;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: var(--radius);
}
.review-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #065f46;
  font-size: 13px;
  margin-bottom: 8px;
}
.review-zone p {
  margin: 0 0 14px;
  font-size: 12px;
  color: #065f46;
}
.review-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.review-comment-input {
  width: 100%;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  min-height: 48px;
  transition: border-color 0.15s;
}
.review-comment-input:focus { border-color: var(--primary); outline: none; }
.review-comment-display {
  margin-top: 8px;
  padding: 8px 12px;
  background: #f0fdf4;
  border-left: 3px solid #10b981;
  border-radius: var(--radius);
  font-size: 12px;
  white-space: pre-line;
  line-height: 1.5;
  color: var(--text);
}
.reviewer-input {
  flex: 1;
  max-width: 260px;
  padding: 7px 12px;
  border: 1px solid #6ee7b7;
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  outline: none;
}
.reviewer-input:focus { border-color: var(--success); }

/* ===== Review Comments ===== */
.cmt-count {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.cmt-count.has-unresolved {
  background: #fef3c7;
  color: #92400e;
}

/* ===== Comment Side Panel (sheet 単位) ===== */
.cmt-toggle {
  position: fixed;
  top: 80px;
  right: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.cmt-toggle:hover { background: #f8fafc; }
.cmt-toggle .cmt-count {
  margin-left: 2px;
  background: #f1f5f9;
}
.cmt-toggle .cmt-count.has-unresolved {
  background: #fef3c7;
  color: #92400e;
}

.cmt-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 95vw);
  background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 60;
}
.cmt-panel.open { transform: translateX(0); }

.cmt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
}
.cmt-panel-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.cmt-panel-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 6px;
}
.cmt-panel-close:hover { color: var(--text); }

.cmt-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cmt-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
}

body.cmt-panel-open { /* 本文側の調整は不要 — overlay 方式 */ }

/* DB page の inline コメントブロック (sheet 単位サイドパネルとは別系統) */
.cmt-inline-panel {
  border-top: 1px solid var(--border);
  background: #fafbfc;
  padding: 14px 20px;
}

.cmt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cmt-thread {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12px;
}
.cmt-thread.resolved {
  border-left-color: var(--success);
  opacity: 0.75;
}

.cmt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
}
.cmt-author {
  font-weight: 600;
  color: var(--text);
}
.cmt-date {
  color: var(--text-light);
  font-family: Menlo, monospace;
  font-size: 10px;
}
.cmt-target {
  background: #f1f5f9;
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
}
.cmt-status {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cmt-status.resolved { background: #d1fae5; color: #065f46; }
.cmt-status.open     { background: #fef3c7; color: #92400e; }

.cmt-body pre {
  font-family: inherit;
  font-size: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
  margin: 0;
}

.cmt-replies {
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmt-reply {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 10px;
}

.cmt-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.cmt-actions form { display: inline-flex; }
.cmt-delete { color: var(--danger) !important; }

/* コメント編集済みラベル / 編集フォーム */
.cmt-edited {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 6px;
  cursor: help;
}
.cmt-edit-form {
  margin-top: 8px;
}
.cmt-edit-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.cmt-edit-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px #dbeafe;
}
.cmt-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.cmt-reply-form summary,
.cmt-new summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
  padding: 4px 0;
}
.cmt-reply-form summary:hover,
.cmt-new summary:hover {
  color: var(--primary);
}
.cmt-reply-form[open] summary,
.cmt-new[open] summary {
  margin-bottom: 6px;
}

.cmt-reply-form form,
.cmt-new-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.cmt-reply-form input[type="text"],
.cmt-reply-form textarea,
.cmt-new-form input[type="text"],
.cmt-new-form textarea {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.cmt-reply-form textarea,
.cmt-new-form textarea {
  resize: vertical;
}
.cmt-reply-form input:focus,
.cmt-reply-form textarea:focus,
.cmt-new-form input:focus,
.cmt-new-form textarea:focus {
  border-color: var(--primary);
}

.cmt-new-form {
  margin-top: auto;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmt-new-form h3 {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.cmt-new-form button { align-self: flex-end; }

/* ===== Permission Matrix ===== */
.role-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.role-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.role-stat-code {
  font-family: Menlo, monospace;
  font-size: 10px;
  color: var(--text-light);
  font-weight: 600;
}
.role-stat-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin: 2px 0 8px;
}
.role-stat-bar {
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.role-stat-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, #60a5fa 100%);
  border-radius: 3px;
  transition: width 0.3s;
}
.role-stat-text {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.role-stat-text strong {
  color: var(--text);
  font-size: 12px;
}

.matrix-section {
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.matrix-cat-title {
  margin: 0;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.matrix-wrap {
  overflow-x: auto;
}
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.matrix-table th,
.matrix-table td {
  border-bottom: 1px solid #f1f5f9;
}
.matrix-table thead th {
  background: #fafbfc;
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
}
.matrix-table th.m-api {
  text-align: left;
  padding-left: 16px;
  width: 320px;
}
.matrix-table .m-role {
  width: 100px;
  white-space: nowrap;
}
.matrix-table .m-role-code {
  font-family: Menlo, monospace;
  font-size: 10px;
  color: var(--text-light);
  font-weight: 600;
}
.matrix-table .m-role-name {
  font-size: 11px;
  color: var(--text);
  margin-top: 2px;
}
.matrix-table tbody td.m-api {
  padding: 10px 16px;
  vertical-align: top;
}
.m-api-id {
  font-family: Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.m-api-id:hover { text-decoration: underline; }
.m-api-name {
  font-size: 11px;
  color: var(--text);
  margin-top: 2px;
}
.m-api-trigger {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.m-api-trigger code {
  background: transparent;
  padding: 0;
  font-size: 10px;
}
.matrix-table td.m-cell {
  text-align: center;
  vertical-align: middle;
  padding: 6px;
}
.m-toggle {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.m-toggle.allowed {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}
.m-toggle.denied {
  background: #f8fafc;
  color: #cbd5e1;
  border-color: #e5e7eb;
}
.m-toggle:hover.allowed {
  background: #a7f3d0;
  border-color: #6ee7b7;
}
.m-toggle:hover.denied {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
.m-toggle:active { transform: scale(0.92); }
.matrix-table tbody tr:hover {
  background: #f8fafc;
}
.matrix-table tbody tr:hover .m-toggle.denied {
  background: #f1f5f9;
}

/* ===== Test Cases ===== */
.test-count-mini {
  display: block;
  width: fit-content;
  margin-top: 3px;
  padding: 1px 6px;
  background: #ede9fe;
  color: #5b21b6;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
}

.test-stats-mini {
  display: flex;
  gap: 6px;
  align-items: center;
}
.test-mini {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.test-mini.normal { background: #d1fae5; color: #065f46; }
.test-mini.abnormal { background: #fef3c7; color: #92400e; }
.test-mini.executed { background: #dbeafe; color: #1e40af; }

.test-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  table-layout: fixed;
}
.test-table th {
  text-align: left;
  padding: 8px 10px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.test-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  word-wrap: break-word;
  word-break: break-word;
}
.test-table tbody tr:last-child td { border-bottom: none; }
.test-table tbody tr:hover { background: #fafbfc; }
.test-table tr.test-異常 { background: #fffbeb; }
.test-table tr.test-異常:hover { background: #fef3c7; }

.test-id code {
  font-size: 10px;
  background: #f1f5f9;
  padding: 2px 5px;
}
.test-vp { white-space: nowrap; }
.vp-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
}
.v-tag { background: #dbeafe; color: #1e40af; }
.p-tag { background: #ede9fe; color: #5b21b6; }
.test-cat { text-align: center; }
.cat-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.cat-badge.normal { background: #d1fae5; color: #065f46; }
.cat-badge.abnormal { background: #fef3c7; color: #92400e; }

.test-item { color: var(--text); font-size: 11.5px; line-height: 1.5; }
.test-input pre,
.test-expected pre {
  font-family: inherit;
  font-size: 10.5px;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  color: var(--text-muted);
}
.test-expected pre { color: #475569; }

/* ===== Database ===== */
.db-section { margin-bottom: 28px; }
.db-kind-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.kind-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: Menlo, monospace;
  letter-spacing: 0.5px;
}
.kind-badge.cosmos { background: #dbeafe; color: #1e40af; }
.kind-badge.sql    { background: #fef3c7; color: #92400e; }
.kind-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.db-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none !important;
  color: var(--text);
  transition: all 0.15s;
  box-shadow: var(--shadow);
}
.db-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}
.db-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.db-card-name {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.db-card-refs {
  font-size: 10px;
  font-weight: 600;
  color: #5b21b6;
  background: #ede9fe;
  padding: 2px 6px;
  border-radius: 3px;
}
.db-dcr-badge {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.db-dcr-badge:hover {
  background: #fde68a;
}
.db-card-refdata {
  font-size: 10px;
  font-weight: 600;
  color: #065f46;
  background: #d1fae5;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
/* database detail — DCR pending row highlight */
.dcr-pending-row {
  background: #fffbeb;
}
.dcr-pending-row:hover {
  background: #fef3c7;
}
.db-dcr-badge-inline {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  padding: 1px 5px;
  border-radius: 3px;
  text-decoration: none;
  margin-left: 4px;
  vertical-align: middle;
}
.db-dcr-badge-inline:hover {
  background: #fde68a;
}
/* column_remove DCR — 削除予定 마커 */
.db-dcr-badge-inline.db-dcr-badge-remove {
  color: #991b1b;
  background: #fee2e2;
  border-color: #f87171;
}
.db-dcr-badge-inline.db-dcr-badge-remove:hover {
  background: #fecaca;
}
.db-col-name-strike {
  text-decoration: line-through;
  text-decoration-color: #f87171;
  text-decoration-thickness: 2px;
  color: #991b1b;
}
.dcr-pending-remove-row {
  background: #fef2f2;
}
.dcr-pending-remove-row:hover {
  background: #fee2e2;
}
/* "+ DCR" quick-create link on columns without a pending DCR */
.db-dcr-new-inline {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  background: transparent;
  border: 1px dashed var(--border, #d1d5db);
  padding: 1px 5px;
  border-radius: 3px;
  text-decoration: none;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
tr:hover .db-dcr-new-inline {
  opacity: 1;
}
.db-dcr-new-inline:hover {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #0369a1;
}
/* DCR original value — inline strikethrough for short fields */
.dcr-old-value {
  font-size: 10px;
  color: #9ca3af;
  text-decoration: line-through;
  margin-top: 2px;
}
/* DCR original value disclosure — for long description */
.dcr-original {
  margin-top: 4px;
  font-size: 11px;
}
.dcr-original summary {
  cursor: pointer;
  color: #92400e;
  font-size: 10px;
  font-weight: 600;
}
.dcr-original-text {
  background: #fff;
  border: 1px dashed #d4a373;
  padding: 6px 8px;
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
  white-space: pre-wrap;
}
.db-card-ja {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.db-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10px;
}
.db-card-col {
  background: #f1f5f9;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.db-card-pk {
  background: #fef3c7;
  color: #92400e;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.db-card-type {
  background: #f8fafc;
  color: var(--text-light);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: Menlo, monospace;
}

/* DB detail — 컬럼 테이블 */
.db-col-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  table-layout: fixed;
}
.db-col-table th {
  text-align: left;
  padding: 8px 10px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.db-col-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  word-wrap: break-word;
  word-break: break-word;
}
.db-col-table tbody tr:hover { background: #fafbfc; }
.db-col-table tbody tr:last-child td { border-bottom: none; }

/* hash anchor 로 진입 시 컬럼 행 강조 + 스크롤 여백 */
.db-col-table tbody tr {
  scroll-margin-top: 80px;
  transition: background-color 0.3s;
}
.db-col-table tbody tr:target {
  background: #fef3c7 !important;
  animation: targetFlash 1.6s ease-out;
}
@keyframes targetFlash {
  0%   { background: #fde68a; box-shadow: inset 4px 0 0 0 #f59e0b; }
  60%  { background: #fef3c7; box-shadow: inset 4px 0 0 0 #f59e0b; }
  100% { background: #fef3c7; box-shadow: inset 0 0 0 0 #f59e0b; }
}
.db-col-table tbody tr:target td:first-child {
  border-left: 3px solid #f59e0b;
}
.db-no { color: var(--text-light); font-variant-numeric: tabular-nums; }
.db-col-name code {
  font-size: 11px;
  font-weight: 700;
  background: #eff6ff;
  color: var(--primary);
  padding: 2px 6px;
}
.db-col-ja { color: var(--text-muted); font-size: 11px; }
.db-col-type { font-family: Menlo, monospace; color: var(--text); }
.db-col-size { font-family: Menlo, monospace; color: var(--text-muted); font-size: 10.5px; }
.db-col-nn { text-align: center; }
.nn-yes { color: var(--danger); font-weight: 700; }
.nn-no  { color: var(--text-light); }
.db-col-desc pre {
  font-family: inherit;
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  line-height: 1.5;
}

/* Column 행 오른쪽 끝의 💬 카운트 / ＋ 추가 링크 */
.db-col-cmt { text-align: center; font-size: 11px; }
.db-col-cmt .cmt-count-link {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.db-col-cmt .cmt-count-link.has-unresolved {
  background: #fef3c7;
  color: #92400e;
}
.db-col-cmt .cmt-count-link:hover { filter: brightness(0.95); }
.db-col-cmt .cmt-add-link {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 16px;
  border: 1px dashed var(--border);
  border-radius: 50%;
  color: var(--text-light);
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transition: opacity .12s, border-color .12s, color .12s;
}
.db-col-table tbody tr:hover .cmt-add-link { opacity: 1; }
.db-col-cmt .cmt-add-link:hover { color: var(--primary); border-color: var(--primary); }

.cmt-target-table {
  background: #f1f5f9;
  color: var(--text-muted);
  font-style: italic;
}

.key-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: Menlo, monospace;
  letter-spacing: 0.3px;
}
.key-badge.pk  { background: #fef3c7; color: #92400e; }
.key-badge.pt  { background: #ede9fe; color: #5b21b6; }
.key-badge.fk  { background: #dbeafe; color: #1e40af; }
.key-badge.uq  { background: #d1fae5; color: #065f46; }
.key-badge.idx { background: #f1f5f9; color: var(--text-muted); }

/* ============================================================
   参照データ (specs/references/data/<Table>.yaml) — マスタ行データ
   既存 .section / .section-head / .section-title 패턴 위에 얹음.
   ============================================================ */
.db-reference-body {
  padding: 16px 20px 20px;
}
.db-reference-source {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.6;
}
.db-reference-source code {
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text);
}
.db-reference-label {
  font-weight: 600;
  margin-right: 4px;
  color: var(--text);
}
.db-reference-sep {
  margin: 0 6px;
  color: var(--text-light);
}

.db-reference-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.db-reference-filter-input {
  flex: 1;
  max-width: 460px;
  padding: 7px 12px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--bg-card);
}
.db-reference-filter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.db-reference-filter-count {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.db-reference-table-wrap {
  max-height: 720px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.db-reference-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  color: var(--text);
}
.db-reference-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.db-reference-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: top;
  white-space: nowrap;
}
.db-reference-table th:last-child {
  border-right: none;
}
.db-reference-th-en {
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text);
}
.db-reference-th-ja {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: normal;
  margin-top: 2px;
  white-space: normal;
  line-height: 1.35;
}
.db-reference-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #f1f5f9;
  border-right: 1px solid #f8fafc;
  vertical-align: top;
}
.db-reference-table td:last-child {
  border-right: none;
}
.db-reference-table tbody tr:last-child td {
  border-bottom: none;
}
.db-reference-cell {
  margin: 0;
  font-family: inherit;
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}
.db-reference-empty {
  color: var(--text-light);
  font-style: italic;
}
.db-reference-row:hover td {
  background: #fafbfc;
}

/* Referenced by APIs 테이블 */
.db-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.db-ref-table th {
  text-align: left;
  padding: 8px 10px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: uppercase;
}
.db-ref-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.ref-api a {
  font-family: Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
}
.ref-feat { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.ref-trigger code { font-size: 10.5px; }
.kind-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: Menlo, monospace;
}
.kind-tag.read  { background: #dbeafe; color: #1e40af; }
.kind-tag.write { background: #fee2e2; color: #991b1b; }
.process-tables { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.process-tables .kind-tag { text-decoration: none; font-size: 10px; }
.process-specs { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.process-specs .kind-tag { text-decoration: none; font-size: 10px; }
.kind-tag.spec-call { background: #e0e7ff; color: #3730a3; }
.kind-tag.spec-call:hover { background: #c7d2fe; }

/* ===== Callers card (reverse caller lookup) =====
   API/Function/Screen detail 페이지의 api-header 직후에 표시.
   "呼び出し元" 라벨 + caller chip 리스트. process_specs 의 미러 스타일. */
.callers-card {
  margin: 12px 0 16px;
  padding: 10px 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #6366f1;
  border-radius: 4px;
}
.callers-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.callers-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.02em;
}
.callers-count {
  font-size: 11px;
  color: var(--text-muted);
}
.callers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.caller-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  font-family: Menlo, monospace;
  text-decoration: none;
  transition: background 0.1s;
}
.caller-tag:hover {
  background: #c7d2fe;
}
.caller-loc {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
  padding-left: 4px;
  border-left: 1px solid currentColor;
}

/* ===== Functions list page ===== */
.fn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.fn-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.fn-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.fn-card-id {
  font-family: Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 3px;
}
.fn-card-count {
  font-size: 11px;
  color: var(--text-muted);
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.fn-card-name {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.fn-card-methods {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.fn-method-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 4px;
}
.fn-card-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.fn-cat-tag {
  font-size: 10.5px;
  background: #f1f5f9;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.fn-card-apis {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.fn-card-apis summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  user-select: none;
}
.fn-card-apis summary:hover { color: var(--primary); }
.fn-api-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.fn-api-list li { margin: 0; border-bottom: 1px solid #f1f5f9; }
.fn-api-list li:last-child { border-bottom: none; }
.fn-api-list a {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  padding: 6px 4px;
  text-decoration: none !important;
  color: var(--text);
  font-size: 11.5px;
}
.fn-api-list a:hover { background: #f8fafc; }
.fn-api-id {
  font-size: 10.5px;
  background: #eff6ff;
  color: var(--primary);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: Menlo, monospace;
}
.fn-api-name {
  font-weight: 600;
}
.fn-api-trigger {
  grid-column: 2;
  font-size: 10px;
  color: var(--text-muted);
}
.fn-api-trigger code { font-size: 10px; padding: 0 3px; }

.search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
#search-input {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
#search-input:focus { border-color: var(--primary); }
.search-hint { color: var(--text-muted); font-size: 12px; }

.category-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.category-title {
  margin: 0;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;
}
.api-table td,
.api-table th {
  word-wrap: break-word;
  word-break: break-word;
}
.api-table th {
  text-align: left;
  padding: 8px 10px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.api-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.api-table tbody tr:hover { background: #f8fafc; }
.api-table tbody tr:last-child td { border-bottom: none; }

.col-no { color: var(--text-light); font-variant-numeric: tabular-nums; }
.col-id { font-weight: 500; width: 130px; }
.col-id a { font-family: "SF Mono", Menlo, monospace; font-size: 12px; }

/* Changed API row — prominent for reviewers */
.api-row.has-changes {
  background: linear-gradient(to right, #fef3c7 0%, #fffbeb 15%, transparent 40%);
  position: relative;
}
.api-row.has-changes:hover {
  background: linear-gradient(to right, #fde68a 0%, #fef3c7 15%, #f8fafc 40%);
}
.api-row.has-changes td:first-child {
  position: relative;
}

/* Left border indicator on first cell */
.change-indicator {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: #f59e0b;
  border-radius: 0 2px 2px 0;
}

/* Change badge — prominent tag */
.change-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 8px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none !important;
  transition: all 0.15s;
  white-space: nowrap;
}
.change-badge:hover {
  background: #fde68a;
  border-color: #f59e0b;
  color: #78350f;
  text-decoration: none !important;
}
.change-badge.recent {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
  animation: changePulse 2s infinite;
}
.change-badge.recent:hover {
  background: #fecaca;
  border-color: #ef4444;
}
.change-badge svg {
  flex-shrink: 0;
}
.change-badge .change-time {
  font-weight: 500;
  opacity: 0.85;
}
@keyframes changePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
}
.col-trigger code {
  font-size: 11px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.col-feature .feat-en {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-feature .feat-ja { color: var(--text-muted); font-size: 11.5px; }
.col-desc { color: var(--text-muted); font-size: 12px; }
.col-role { text-align: center; }
.col-issues { white-space: nowrap; }

.perm-yes { color: var(--success); font-size: 14px; }
.perm-no { color: var(--text-light); }

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  margin-right: 4px;
}
.badge-open { background: #fef3c7; color: #92400e; }
.badge-closed { background: #e0e7ff; color: #3730a3; }
.badge-comment { background: #dbeafe; color: #1e40af; }

/* ===== API Detail ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.breadcrumb-path { display: flex; align-items: center; }
.breadcrumb .sep { margin: 0 6px; color: var(--text-light); }
.breadcrumb strong { color: var(--text); font-family: Menlo, monospace; }
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
}
.language-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.language-switch-btn:hover {
  background: #f8fafc;
  text-decoration: none;
}
.language-switch-btn.is-active {
  background: var(--primary);
  color: #fff;
}

.api-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
}
.api-header h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.api-id-badge {
  font-size: 11px;
  font-family: Menlo, monospace;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--text-muted);
  font-weight: 500;
}
.api-header-ja { color: var(--text-muted); font-size: 14px; margin-bottom: 6px; }
.api-header-desc { color: var(--text); font-size: 13px; margin-bottom: 14px; }

.api-header-trigger { display: flex; align-items: center; gap: 10px; }
.http-method {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: Menlo, monospace;
  letter-spacing: 0.5px;
  color: #fff;
}
.m-get    { background: #10b981; }
.m-post   { background: #3b82f6; }
.m-put    { background: #f59e0b; }
.m-delete { background: #ef4444; }
/* Azure Function non-HTTP triggers — first word of function_trigger field */
.m-sql            { background: #8b5cf6; }  /* SQL DB Trigger */
.m-cosmos         { background: #0ea5e9; }  /* Cosmos DB Trigger */
.m-timertrigger   { background: #06b6d4; }  /* TimerTrigger */
.m-eventtrigger   { background: #a855f7; }  /* EventTrigger */
/* EventHubTrigger — still bundled as single word in spec; fallback via attribute selector */
.http-method[class*="eventhub"] { background: #14b8a6; }
.http-path {
  font-size: 13px;
  font-weight: 500;
  background: #f8fafc;
  padding: 4px 10px;
}

.api-header-side {
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.meta-item { margin-bottom: 12px; }
.meta-item:last-child { margin-bottom: 0; }
.meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  margin-bottom: 3px;
  font-weight: 600;
}
.meta-value { font-size: 13px; color: var(--text); }
.role-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.role-badge {
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: default;
  transition: all 0.15s;
}
.role-badge.allowed { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.role-badge.denied  { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }

/* 클릭 가능한 토글 버튼 */
button.role-toggle {
  cursor: pointer;
  font-family: inherit;
}
button.role-toggle:hover.allowed {
  background: #a7f3d0;
  border-color: #6ee7b7;
}
button.role-toggle:hover.denied {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #6b7280;
}
button.role-toggle:active {
  transform: scale(0.95);
}

.meta-hint {
  font-weight: 400;
  color: var(--text-light);
  text-transform: none;
  letter-spacing: 0;
  font-size: 9.5px;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
  min-width: 420px;
  max-width: 520px;
  animation: modalIn 0.15s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--text-light);
  padding: 0 6px;
  border-radius: 4px;
}
.modal-close:hover { color: var(--text); background: #f1f5f9; }
.modal-body {
  padding: 20px;
}
.modal-field {
  display: block;
  margin-top: 14px;
}
.modal-field-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.modal-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12.5px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.modal-field textarea:focus { border-color: var(--primary); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  background: #fafbfc;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
}

/* Permission change visual */
.perm-change {
  padding: 16px;
  background: #f8fafc;
  border-radius: 6px;
  border-left: 4px solid var(--primary);
}
.perm-change.grant { border-left-color: var(--success); }
.perm-change.revoke { border-left-color: var(--danger); }
.perm-api-id {
  font-size: 10px;
  color: var(--text-light);
  font-family: Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.perm-action-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}
.perm-action-label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  margin: 0 2px;
}
.perm-action-label.grant { background: #d1fae5; color: #065f46; }
.perm-action-label.revoke { background: #fee2e2; color: #991b1b; }

/* Section */
.section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 0;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--border);
}
.section-head .section-title {
  background: none;
  border: none;
  flex: 1;
}
.section-title {
  margin: 0;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* Collapsible section — section-head 클릭으로 아래 body 를 토글.
   범용 패턴: data-collapse-target="<id>" 를 section-head 에 붙이고,
   타겟 div 에 class="collapsible-body" id="<id>" 를 지정. JS 는
   api_detail.js 의 collapsible handler 가 처리. */
.collapsible-head {
  cursor: pointer;
  user-select: none;
}
.collapsible-head:hover {
  background: linear-gradient(to bottom, #f1f5f9, #e2e8f0);
}
.collapse-chevron {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.collapsible-head.collapsed .collapse-chevron {
  transform: rotate(-90deg);
}
.collapsible-body.collapsed {
  display: none;
}

/* Fields ↔ JSON 탭 */
.view-tabs {
  display: flex;
  gap: 2px;
  background: #e2e8f0;
  border-radius: var(--radius);
  padding: 2px;
}
.view-tab {
  border: none;
  background: transparent;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.view-tab:hover { color: var(--text); }
.view-tab.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* JSON 뷰 */
.view-content[hidden] { display: none; }
.json-wrap {
  padding: 0 0 8px;
}
.json-wrap .field-title {
  margin: 14px 20px 6px;
}
.json-view {
  margin: 0 20px 12px;
  padding: 14px 18px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--radius);
  overflow: auto;
  max-height: 520px;
  font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre;
}
.json-view code {
  background: none;
  color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}

/* Code view (Process → generated handler) */
.code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.lang-tabs { display: flex; gap: 4px; }
.lang-tab {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.lang-tab:hover { color: var(--text); background: #fff; }
.lang-tab.active {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
}
.btn-copy-code {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.btn-copy-code:hover { color: var(--text); background: #f1f5f9; }
.code-view {
  margin: 12px 20px 8px;
  padding: 16px 20px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--radius);
  overflow: auto;
  max-height: 640px;
  font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.65;
  white-space: pre;
}
.code-view code {
  background: none;
  color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}
.code-hint {
  margin: 0 20px 14px;
  padding: 8px 12px;
  background: #fefce8;
  border-left: 3px solid #facc15;
  font-size: 11px;
  color: #854d0e;
  border-radius: 4px;
}
.section-desc {
  padding: 10px 20px;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  background: #fefce8;
  border-bottom: 1px solid #fde68a;
  white-space: pre-line;
}

.field-table-wrap { padding: 0 0 4px; }
.field-title {
  margin: 14px 20px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  table-layout: fixed;
}
.field-table td,
.field-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-word;
}
.field-table th {
  background: #f8fafc;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  white-space: nowrap;
}
.field-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.field-table .field-name {
  font-family: Menlo, monospace;
  font-weight: 600;
  color: #0f172a;
}
.field-table .jp { color: var(--text-muted); }
.field-table .required { text-align: center; }
.field-table .required .req-yes { color: var(--danger); font-weight: 700; }
.field-table .required .req-no { color: var(--text-light); }
.field-table .desc { color: var(--text); white-space: pre-wrap; }
.field-table .mapping { font-size: 10.5px; color: var(--text-muted); }
.field-table .mapping code {
  font-size: 10.5px;
  padding: 0 3px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Mapping link — Table.Column 클릭 가능 */
.map-link {
  display: inline-block;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  background: #eff6ff;
  color: var(--primary);
  padding: 1px 6px;
  border-radius: 3px;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: all 0.1s;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.map-link:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  text-decoration: none !important;
}
.map-arrow {
  font-weight: 700;
  font-size: 11px;
  margin-right: 2px;
}
.map-arrow.read { color: #2563eb; }
.map-arrow.write { color: #dc2626; }
.map-ref-write .map-link {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}
.map-ref-write .map-link:hover {
  background: #fee2e2;
  border-color: #f87171;
}
.map-link-if {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.map-link-if:hover {
  background: #dcfce7;
  border-color: #86efac;
  text-decoration: none !important;
}

/* 엑셀의 빨간 글자를 보존 — 전체 셀 또는 부분(rich text) */
.red-cell { color: #dc2626; font-weight: 600; }
.red-part { color: #dc2626; font-weight: 600; }
pre.red-cell { color: #dc2626; }

/* DB row — 필드 row 바로 아래에 같은 컬럼 위치로 희미하게 표시 */
.db-row td {
  padding: 0 8px 6px 8px;
  font-size: 10px;
  color: var(--text-light);
  border-bottom: 1px solid #f1f5f9;
  font-style: italic;
  vertical-align: top;
}
.db-row pre {
  font-family: inherit;
  font-size: 10px;
  line-height: 1.5;
  color: inherit;
  font-style: italic;
}
.db-row .required .req-yes,
.db-row .required .req-no {
  color: inherit;
  font-weight: normal;
}

/* Rule tables (Validation / Process) */
.rule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.rule-table th,
.rule-table td {
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
}
.rule-table th {
  background: #f8fafc;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
.rule-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.rule-table .rule-id { font-family: Menlo, monospace; color: var(--primary); }
.rule-table .rule-name { font-weight: 500; }
.rule-table .rule-desc pre { white-space: pre-wrap; word-break: break-word; }
.rule-table .rule-err pre { white-space: pre-wrap; word-break: break-word; }
.rule-table .err-msg {
  margin-top: 6px;
  padding: 5px 8px;
  background: #fef2f2;
  border-left: 2px solid #fca5a5;
  font-size: 10.5px;
  color: #991b1b;
  white-space: pre-wrap;
}

/* Issue 가 걸려있는 rule row 강조. 관련된 open issue 의 location 에 해당
   V/P id 가 명시되면 row 전체를 부드러운 붉은 배경으로 칠해서 눈에 띄게.
   title 속성으로 hover 시 이유 표시. */
.rule-table tr.rule-has-issue {
  background: #fef2f2;
}
.rule-table tr.rule-has-issue td {
  background: #fef2f2;
}
.rule-table tr.rule-has-issue .rule-id,
.rule-table tr.rule-has-issue .rule-id strong {
  color: #991b1b;
}
.rule-table tr.rule-has-issue .rule-id strong {
  position: relative;
}
.rule-table tr.rule-has-issue .rule-id strong::after {
  content: "⚠";
  display: inline-block;
  margin-left: 5px;
  color: #dc2626;
}
.rule-table tr.rule-has-issue-updated {
  background: #fffbeb;
}
.rule-table tr.rule-has-issue-updated td {
  background: #fffbeb;
}
.rule-table tr.rule-has-issue-updated .rule-id,
.rule-table tr.rule-has-issue-updated .rule-id strong {
  color: #92400e;
}
.rule-table tr.rule-has-issue-updated .rule-id strong::after {
  content: "⚠";
  display: inline-block;
  margin-left: 5px;
  color: #f59e0b;
}

/* Remark callout — 각 validation/process 의 설계 노트 / 미결 사항 */
.rule-table .rule-remark {
  margin-top: 10px;
  padding: 8px 10px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 3px;
}
.rule-table .rule-remark strong {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #92400e;
}
.rule-table .rule-remark pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  color: var(--text);
  font-family: inherit;
}

/* Pager */
.pager {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding: 12px 0;
}
.pager a {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: Menlo, monospace;
  font-size: 12px;
}
.pager a:hover { background: #f8fafc; text-decoration: none; }

/* ===== Issues ===== */
.page-head { margin-bottom: 20px; }
.page-head h1 { margin: 0 0 4px; font-size: 22px; }
.page-sub { color: var(--text-muted); font-size: 12px; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.filter-group { display: flex; align-items: center; gap: 6px; }
.filter-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-right: 2px;
}
.chip {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: #f1f5f9;
  font-weight: 500;
}
.chip:hover { background: #e2e8f0; text-decoration: none; }
.chip.active { background: var(--primary); color: #fff; }
.chip.sev-high.active { background: var(--danger); }
.chip.sev-medium.active { background: var(--warning); }
.chip.sev-low.active { background: var(--info); }

/* Sheet 필터: 텍스트 입력 + 제출/클리어 chip */
.filter-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-input {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  font-family: Menlo, monospace;
  background: #fff;
  min-width: 220px;
  color: var(--text);
}
.filter-input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}
button.chip {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.chip-submit { background: var(--primary); color: #fff; }
.chip-submit:hover { background: var(--primary); opacity: 0.9; }
.chip-clear { background: #fef3c7; color: #92400e; }
.chip-clear:hover { background: #fde68a; }

.issues-list { display: flex; flex-direction: column; gap: 10px; }
.issues-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.issue-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-light);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.issue-card.sev-high    { border-left-color: var(--danger); }
.issue-card.sev-medium  { border-left-color: var(--warning); }
.issue-card.sev-low     { border-left-color: var(--info); }
.issue-card.status-resolved { opacity: 0.65; }

.issue-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  flex-wrap: wrap;
}
.issue-num { font-family: Menlo, monospace; font-weight: 700; color: var(--text); }
.issue-category { color: var(--text-muted); }
.issue-date { margin-left: auto; color: var(--text-light); font-family: Menlo, monospace; }

.badge.sev { font-size: 10px; padding: 2px 7px; border-radius: 10px; }
.badge.sev-high   { background: #fee2e2; color: #991b1b; }
.badge.sev-medium { background: #fef3c7; color: #92400e; }
.badge.sev-low    { background: #dbeafe; color: #1e40af; }
.badge.status-open     { background: #fef3c7; color: #92400e; }
.badge.status-updated  { background: #dbeafe; color: #1e40af; }
.badge.status-resolved { background: #d1fae5; color: #065f46; }

.issue-title { font-weight: 600; font-size: 13px; margin: 6px 0 6px; color: var(--text); }
.issue-location { font-size: 10.5px; color: var(--text-muted); margin-bottom: 6px; }
.issue-location code { font-size: 10.5px; }
.issue-apis { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; }
.api-link {
  font-family: Menlo, monospace;
  font-size: 10.5px;
  padding: 2px 6px;
  background: #eff6ff;
  color: var(--primary);
  border-radius: 3px;
}

.issue-card details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.issue-card summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  user-select: none;
}
.issue-card summary:hover { color: var(--primary); }
.issue-section { margin-top: 8px; }
.issue-section strong {
  display: block;
  font-size: 10px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.issue-section pre { font-size: 11px; }
.issue-update {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-top: 8px;
}
.issue-update strong { color: #92400e; }
.issue-resolution {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-top: 8px;
}
.issue-resolution strong { color: #166534; }

.issues-inline {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.issues-inline h3 {
  margin: 0 0 12px;
  font-size: 13px;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.issues-inline .issue-card { background: #fff; }
.closed-issues-toggle { margin-top: 10px; }
.closed-issues-toggle > summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
}
.closed-issues-toggle > summary:hover { color: var(--primary); }
.closed-issues-toggle > .issues-grid { margin-top: 8px; }

/* topbar (52px) 가림 방지 — hash anchor 로 section 진입 시 여백 확보 */
#db-table-issues { scroll-margin-top: 64px; }

.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-light);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ===== History / Diff ===== */
.history-timeline { display: flex; flex-direction: column; gap: 12px; }

.commit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.commit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.commit-sha {
  font-family: Menlo, monospace;
  font-size: 11px;
  background: #1f2937;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.commit-subject { flex: 1; font-weight: 600; color: var(--text); }
.commit-author {
  color: var(--text-muted);
  font-size: 11.5px;
  font-family: Menlo, monospace;
}
.commit-date {
  color: var(--text-light);
  font-size: 11px;
  font-family: Menlo, monospace;
}
.badge-initial {
  background: #e0e7ff;
  color: #3730a3;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 700;
}
.badge-count {
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.commit-body { padding: 0; }
.commit-body.muted {
  padding: 14px 16px;
  color: var(--text-light);
  font-style: italic;
  font-size: 12px;
}

.diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  table-layout: fixed;
}
.diff-table th {
  background: #fafbfc;
  padding: 7px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
.diff-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
}
.diff-table tr:last-child td { border-bottom: none; }

.diff-row.diff-added    { background: #f0fdf4; }
.diff-row.diff-removed  { background: #fef2f2; }
.diff-row.diff-modified { background: #fffbeb; }

.diff-kind { font-family: Menlo, monospace; font-size: 10.5px; }
.kind-added    { color: #15803d; font-weight: 700; }
.kind-removed  { color: #b91c1c; font-weight: 700; }
.kind-modified { color: #b45309; font-weight: 700; }

.diff-path code {
  font-size: 10.5px;
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  word-break: break-all;
  white-space: normal;
}

.diff-old, .diff-new { max-width: 0; }
.diff-ins { background: #bbf7d0; color: #166534; text-decoration: none; padding: 1px 2px; border-radius: 2px; }
.diff-del { background: #fecaca; color: #991b1b; text-decoration: line-through; padding: 1px 2px; border-radius: 2px; }
.val-scalar {
  font-family: Menlo, monospace;
  font-size: 11px;
  background: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  white-space: pre-wrap;
}
.val-json {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  background: rgba(255,255,255,0.7);
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.05);
  max-height: 200px;
  overflow: auto;
  white-space: pre;
}
.val-none { color: var(--text-light); font-style: italic; }

/* ===== Screen Detail (events) ===== */
.screen-event-list { padding: 4px 0 10px; }
.screen-event-block {
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--border);
}
.screen-event-block:last-child { border-bottom: none; }
.screen-event-title {
  margin: 16px 20px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.screen-event-id {
  font-family: Menlo, monospace;
  font-size: 11px;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--primary);
  font-weight: 600;
}
.screen-event-name { font-weight: 600; }
.screen-event-empty {
  margin: 4px 20px 8px;
  font-size: 11px;
  color: var(--text-light);
  font-style: italic;
}

/* Screen layout embedded images — horizontal row with wrap */
.screen-layout-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 18px;
}
.screen-layout-figure {
  flex: 1 1 320px;
  min-width: 300px;
  margin: 0;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.screen-layout-img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: filter 0.15s;
}
.screen-layout-img:hover { filter: brightness(0.95); }

/* Lightbox overlay for clicked screen layout images */
#layout-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 40px;
  cursor: zoom-out;
}
#layout-lightbox.open { display: flex; }
#layout-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  cursor: default;
}
#layout-lightbox .lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#layout-lightbox .lightbox-close:hover { background: rgba(255, 255, 255, 0.16); }
#layout-lightbox .lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 14px;
  border-radius: 4px;
  max-width: calc(100% - 80px);
  text-align: center;
}

/* ===== Git sync pill (topnav 右端) ===== */
.git-sync-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.git-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  line-height: 1;
  text-decoration: none;
  transition: filter 0.15s;
}
.git-pill:hover { filter: brightness(0.95); text-decoration: none; }
.git-pill .git-pill-ahead-count,
.git-pill .git-pill-behind-count { display: inline-block; }
.git-pill-sync {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}
.git-pill-ahead {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}
.git-pill-behind {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.git-pill-diverged {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.git-pill-stale {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  font-style: italic;
}
.git-refresh-form { margin: 0; padding: 0; }
.git-refresh-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.git-refresh-btn:hover { background: #f1f5f9; }

.git-push-form { margin: 0; padding: 0; }
.git-pull-btn {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  cursor: pointer;
  height: 26px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.git-pull-btn:hover:not(:disabled) {
  background: #eff6ff;
}
.git-pull-btn:disabled {
  background: #f1f5f9;
  color: #cbd5e1;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.git-push-btn {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 999px;
  cursor: pointer;
  height: 26px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.git-push-btn:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.git-push-btn:disabled {
  background: #f1f5f9;
  color: #cbd5e1;
  border-color: #e2e8f0;
  cursor: not-allowed;
}
.git-act-form { margin: 0; padding: 0; display: inline-flex; }

/* main 取込 (push なし) — .git-pull-btn ベース + teal outline. */
.git-btn-main {
  background: #fff;
  color: #0f766e;
  border-color: #5eead4;
}
.git-btn-main:hover:not(:disabled) {
  background: #f0fdfa;
  border-color: #2dd4bf;
}

/* main 同期 (取込 + push) — .git-push-btn ベース + filled teal. */
.git-btn-sync {
  background: #0d9488;
  border-color: #0d9488;
}
.git-btn-sync:hover:not(:disabled) {
  background: #0f766e;
  border-color: #0f766e;
}

/* ── エラーページ (404 / 500) ─────────────────────────────────────── */
.error-page {
  max-width: 640px;
  margin: 96px auto;
  padding: 40px;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.error-page .error-code {
  margin: 0 0 8px;
  font-size: 72px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: -2px;
}
.error-page .error-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}
.error-page .error-detail {
  margin: 0 0 24px;
  color: #64748b;
  line-height: 1.6;
}
.error-page .error-detail code {
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ============================================================
   Deploy ▼ button + dropdown — breadcrumb-actions の右端に出す.
   色トーンは btn-claude (dark) 系に揃えて「最終アクション」感を出す.
   ============================================================ */
.deploy-wrapper {
  position: relative;
  display: inline-block;
}

.btn-deploy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid transparent;
  background: #0f766e;
  color: #fff !important;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.05s;
}
.btn-deploy:hover { background: #115e59; }

/* ── Screen Base Design (画面仕様) ── */
.sbd-toc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.sbd-toc h3 { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); }
.sbd-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sbd-toc li { font-size: 13px; }
.sbd-toc .badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--bg-muted); color: var(--text-muted); }

.sbd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.sbd-table th, .sbd-table td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  vertical-align: top;
  text-align: left;
}
.sbd-table thead th {
  background: var(--bg-muted);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}
.sbd-func { width: 16%; font-weight: 500; white-space: pre-line; }
.sbd-rev { width: 28%; }
.sbd-details { list-style: disc; padding-left: 18px; margin: 0; }
.sbd-details li { margin-bottom: 4px; white-space: pre-line; line-height: 1.5; }

/* 画面区分セクションのコピー button */
.sbd-copy-btn {
  padding: 4px 12px;
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.sbd-copy-btn:hover {
  background: #eff6ff;
  border-color: var(--primary);
  color: var(--primary);
}
.sbd-copy-btn.sbd-copy-ok {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

.sbd-toolbar {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sbd-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sbd-toggle input { cursor: pointer; }

.sbd-diff-row { background: #fffbeb; }
.sbd-diff-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px;
  background: #f59e0b;
  color: #fff;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 4px;
}
.sbd-removed { background: #fee2e2; text-decoration: line-through; color: #991b1b; }
.sbd-added { background: #dcfce7; color: #166534; }
.text-warning { color: #f59e0b; }

/* SBD comment */
.sbd-comment-count {
  display: inline-block;
  font-size: 10px;
  margin-left: 4px;
  color: var(--warning);
}
.sbd-comment-row { background: #f8fafc; }
.sbd-comment-row td { border-top: 1px dashed var(--border); }
.sbd-comment-cell { padding: 8px 16px 12px; }
.sbd-comment {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sbd-comment.sbd-resolved { opacity: 0.55; border-left-color: #10b981; }
.sbd-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}
.sbd-comment-head strong { color: var(--primary); font-size: 12px; }
.sbd-comment-head time { font-size: 10px; color: var(--text-muted); }
.sbd-comment-text { white-space: pre-line; line-height: 1.6; color: var(--text); }
.sbd-resolved-badge { font-size: 9px; padding: 2px 6px; background: #10b981; color: #fff; border-radius: 6px; font-weight: 600; }
.sbd-reply {
  margin: 8px 0 0 20px;
  padding: 6px 10px;
  border-left: 2px solid #e2e8f0;
  font-size: 11px;
  background: #f8fafc;
  border-radius: 0 4px 4px 0;
}
.sbd-reply strong { color: var(--text); }
.sbd-reply time { font-size: 10px; color: var(--text-muted); margin-left: 6px; }
.sbd-reply div { margin-top: 2px; line-height: 1.5; }
.sbd-comment-actions {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sbd-reply-form { display: flex; gap: 4px; flex: 1; }
.sbd-reply-input {
  flex: 1;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}
.sbd-reply-input:focus { border-color: var(--primary); outline: none; }
.sbd-add-comment {
  margin-top: 6px;
  padding: 6px 0;
}
.sbd-add-comment summary {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.sbd-add-comment summary:hover { color: var(--primary); background: #eff6ff; }
.sbd-add-comment[open] summary { color: var(--primary); font-weight: 500; }
.sbd-add-comment form { margin-top: 8px; }
.sbd-comment-input {
  width: 100%;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 8px;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.15s;
}
.sbd-comment-input:focus { border-color: var(--primary); outline: none; }
.btn-sm {
  font-size: 11px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s;
}
.btn-sm:hover { background: #1d4ed8; }
.btn-outline {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-outline:hover { background: var(--bg-muted); color: var(--text); }
.btn-danger-outline { background: transparent; color: #dc2626; border-color: #fca5a5; }
.btn-danger-outline:hover { background: #fef2f2; color: #991b1b; }
.btn-deploy:active { transform: translateY(1px); }
.btn-deploy svg { flex-shrink: 0; }
.btn-deploy .btn-caret { font-size: 10px; opacity: 0.85; margin-left: 1px; }
.btn-deploy.is-disabled,
.btn-deploy[disabled] {
  background: #94a3b8;
  cursor: not-allowed;
  opacity: 0.75;
}

.deploy-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.15);
  z-index: 50;
  overflow: hidden;
}
.deploy-wrapper.is-open .deploy-dropdown { display: block; }

.deploy-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.deploy-refresh {
  background: transparent;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.deploy-refresh:hover { background: #e2e8f0; }

.deploy-branch-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
.deploy-branch-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  background: transparent;
  border: none;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  color: #1e293b;
  cursor: pointer;
}
.deploy-branch-item:hover { background: #ecfeff; color: #0f766e; }
.deploy-branch-item:active { background: #cffafe; }

.deploy-loading,
.deploy-empty,
.deploy-error {
  padding: 10px 14px;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}
.deploy-error { color: #b91c1c; text-align: left; }

.deploy-last {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
  font-size: 11px;
  color: #64748b;
}
.deploy-last code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 11px;
  color: #0f766e;
}

/* Review state block (review-zone upgrade) — shows current review + publish
   info with clean / stale variants. Used by api_detail.html and
   screen_detail.html. */
.review-state {
  margin: 16px 0 24px;
  padding: 14px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  line-height: 1.6;
}
.review-state-stale {
  background: #fefce8;
  border-color: #fde68a;
}
.review-state-empty {
  color: #94a3b8;
  font-size: 13px;
  margin: 8px 0 16px;
}
.review-state-line { font-size: 14px; }
.review-state-icon { margin-right: 6px; }
.review-state-meta {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-family: SFMono-Regular, Menlo, monospace;
}
.review-state-meta code {
  background: rgba(0,0,0,0.05);
  padding: 1px 4px;
  border-radius: 3px;
}
.review-state-warning {
  margin-top: 10px;
  padding: 8px 10px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  color: #92400e;
  font-size: 13px;
}
.review-state-published {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #86efac;
  font-size: 13px;
}
.review-state-stale .review-state-published {
  border-top-color: #fcd34d;
}
.review-state-published code {
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.review-state-published-meta {
  margin-left: 8px;
  color: #64748b;
  font-size: 12px;
}
.review-state-published-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.review-state-published-list .review-state-published {
  margin-top: 0;
}
/* published entry 가 source_sha 를 갖고 있으면 a.is-clickable 로 렌더되어
   클릭하면 snapshot 뷰 (?at=source_sha) 로 이동한다. 호버 때만 살짝 배경색
   을 입혀 "클릭 가능" 을 암시. */
.review-state-published.is-clickable {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.review-state-published.is-clickable:hover {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
  cursor: pointer;
}

/* ============================================================
   Snapshot view — ?at=<sha> readonly banner + wrapper
   ============================================================
   sticky 로 상단에 고정되는 amber 배너. snapshot-view 래퍼가 있는 하위
   mutation form / button 을 시각적으로 비활성화한다. pointer-events 까지
   막아 POST submission 을 차단 — 라우트 단에서도 검증하지만 UI 혼동을
   막기 위한 2 차 방어선. */
.snapshot-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fefce8;
  border-bottom: 2px solid #f59e0b;
  padding: 10px 20px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}
.snapshot-banner-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.snapshot-banner-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.snapshot-banner-text {
  flex: 1;
  min-width: 0;
}
.snapshot-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: #78350f;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.snapshot-banner-sha {
  background: #fde68a;
  color: #78350f;
  padding: 1px 8px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
}
.snapshot-banner-sep { color: #d97706; }
.snapshot-banner-target code {
  background: rgba(245, 158, 11, 0.15);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: #78350f;
}
.snapshot-banner-meta {
  font-size: 12px;
  color: #92400e;
  margin-top: 2px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.snapshot-banner-diff {
  font-weight: 600;
}
.snapshot-banner-readonly {
  font-weight: 600;
  color: #b45309;
}
.snapshot-banner-exit {
  background: #f59e0b;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.12s ease;
}
.snapshot-banner-exit:hover {
  background: #d97706;
}

/* breadcrumb 옆 small badge — 본문 내부 레벨에서 "여기는 스냅샷" 을 반복 알림 */
.snapshot-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #fde68a;
  color: #78350f;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'SF Mono', Menlo, monospace;
  vertical-align: middle;
}

/* ============================================================
   /database xlsx upload + preview
   ============================================================ */

.db-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.db-drift-link {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.db-drift-link:hover {
  background: #faf5ff;
  border-color: #c4b5fd;
  text-decoration: none;
}

.db-dcr-link {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  color: #b45309;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.db-dcr-link:hover {
  background: #fffbeb;
  border-color: #f59e0b;
  text-decoration: none;
}

.db-projected-link {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  color: #0f766e;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.db-projected-link:hover {
  background: #f0fdfa;
  border-color: #14b8a6;
  text-decoration: none;
}

.db-ddl-link {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.db-ddl-link:hover {
  background: #eff6ff;
  border-color: #60a5fa;
  text-decoration: none;
}

/* ============================================================
   /database/projected view
   ============================================================ */

.projected-summary {
  margin: 20px 0 28px;
  padding: 20px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
}
.projected-stat-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}
.projected-stat {
  flex: 1;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid #ccfbf1;
  border-radius: 6px;
  text-align: center;
}
.projected-stat-value {
  font-size: 24px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
  color: #0f172a;
}
.projected-stat-label {
  margin-top: 4px;
  font-size: 11px;
  color: #475569;
}
.projected-stat-overlay .projected-stat-value { color: #0f766e; }

.projected-base {
  font-size: 12px;
  color: #475569;
  margin-bottom: 8px;
}
.projected-base-label { color: #64748b; margin-right: 4px; }

.projected-overlay-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #99f6e4;
}
.projected-overlay-title {
  font-size: 11px;
  color: #64748b;
  margin-right: 4px;
}
.projected-overlay-chip {
  padding: 3px 10px;
  background: #ccfbf1;
  color: #0f766e;
  border: 1px solid #99f6e4;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 700;
  text-decoration: none;
}
.projected-overlay-chip:hover {
  background: #5eead4;
  text-decoration: none;
}

.projected-empty {
  margin: 60px auto;
  max-width: 520px;
  text-align: center;
}
.projected-empty-card {
  padding: 48px 32px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 12px;
}
.projected-empty-icon { font-size: 48px; margin-bottom: 16px; }
.projected-empty-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.projected-empty-sub { color: #115e59; font-size: 13px; }

.projected-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.projected-affected-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.projected-affected-card {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #14b8a6;
  border-radius: 6px;
}
.projected-affected-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.projected-affected-name code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.projected-affected-name { text-decoration: none; }
.projected-affected-name:hover code { color: #14b8a6; }
.projected-table-marker {
  padding: 2px 8px;
  background: #ccfbf1;
  color: #0f766e;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 600;
}

.projected-col-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.projected-col-table th {
  text-align: left;
  padding: 5px 8px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.projected-col-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.projected-col-dcr-link {
  padding: 2px 6px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'SF Mono', Menlo, monospace;
  text-decoration: none;
}
.projected-col-dcr-link:hover { background: #fde68a; text-decoration: none; }
.projected-col-remove {
  padding: 2px 6px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'SF Mono', Menlo, monospace;
}

.projected-raw-help {
  margin-bottom: 10px;
  font-size: 12px;
  color: #475569;
}
.projected-raw-help code {
  padding: 1px 5px;
  background: #f1f5f9;
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, monospace;
}
.projected-raw-content {
  padding: 16px 20px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  overflow: auto;
  max-height: 600px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
}

/* ============================================================
   DCR list / new / detail pages
   ============================================================ */

.dcr-summary {
  margin: 20px 0 28px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.dcr-stat-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}
.dcr-stat {
  flex: 1;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-align: center;
}
.dcr-stat-value {
  font-size: 24px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
  color: #0f172a;
}
.dcr-stat-label {
  margin-top: 4px;
  font-size: 11px;
  color: #475569;
}
.dcr-stat-pending .dcr-stat-value { color: #d97706; }
.dcr-stat-requested .dcr-stat-value { color: #2563eb; }
.dcr-stat-reflected .dcr-stat-value { color: #16a34a; }
.dcr-stat-rejected .dcr-stat-value { color: #64748b; }

.dcr-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.dcr-filter-title {
  font-size: 11px;
  color: #64748b;
  margin-right: 4px;
}
.dcr-filter-chip {
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 11px;
  color: #475569;
  text-decoration: none;
  font-weight: 600;
}
.dcr-filter-chip:hover { background: #f8fafc; text-decoration: none; }
.dcr-filter-chip.active { background: #0f172a; color: #fff; border-color: #0f172a; }
.dcr-filter-pending.active { background: #d97706; border-color: #d97706; }
.dcr-filter-requested.active { background: #2563eb; border-color: #2563eb; }
.dcr-filter-reflected.active { background: #16a34a; border-color: #16a34a; }
.dcr-filter-rejected.active { background: #64748b; border-color: #64748b; }

.dcr-empty {
  margin: 60px auto;
  max-width: 560px;
  text-align: center;
}
.dcr-empty-card {
  padding: 48px 32px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
}
.dcr-empty-icon { font-size: 48px; margin-bottom: 16px; }
.dcr-empty-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.dcr-empty-sub { color: #78350f; font-size: 13px; }

.dcr-list {
  margin: 20px 0;
}
.dcr-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.dcr-table th {
  text-align: left;
  padding: 10px 14px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.dcr-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  color: #334155;
}
.dcr-table tr:last-child td { border-bottom: none; }
.dcr-id-link {
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
}
.dcr-id-link:hover { color: #2563eb; text-decoration: underline; }
.dcr-row-pending { background: #fffbeb; }
.dcr-row-stale { box-shadow: inset 3px 0 0 #f59e0b; }
.dcr-row-stale:hover { background: #fff7ed; }

/* DCR list 진단 배지 */
.dcr-diag-na { color: #94a3b8; font-size: 11px; }
.dcr-diag-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'SF Mono', Menlo, monospace;
  white-space: nowrap;
  cursor: help;
}
.dcr-diag-clean   { background: #dcfce7; color: #166534; }
.dcr-diag-case    { background: #dbeafe; color: #1e40af; }
.dcr-diag-rename  { background: #ede9fe; color: #6b21a8; }
.dcr-diag-missing { background: #fee2e2; color: #991b1b; }

/* 진단 필터 bar — 두번째 row */
.dcr-filter-bar-diagnosis {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.dcr-filter-stale.active { background: #f59e0b; color: #fff; border-color: #f59e0b; }

/* DCR detail — Stale 진단 카드 */
.dcr-stale-card {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
}
.dcr-stale-target_renamed_pending { border-left-color: #8b5cf6; background: #faf5ff; }
.dcr-stale-target_missing         { border-left-color: #dc2626; background: #fef2f2; }
.dcr-stale-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--warn-fg-strong);
  margin: 0 0 8px;
}
.dcr-stale-target_renamed_pending h3 { color: #6b21a8; }
.dcr-stale-target_missing h3         { color: #991b1b; }
.dcr-stale-body p { font-size: 13px; line-height: 1.6; color: var(--text); margin: 6px 0; }
.dcr-stale-body code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.dcr-stale-body ul {
  margin: 8px 0 8px 20px;
  font-size: 12px;
  color: var(--text-muted);
}
.dcr-stale-body ul li { margin: 3px 0; }
.dcr-stale-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.dcr-stale-action { margin-top: 12px; }
.dcr-stale-action button code {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #fff;
}

/* Target history — audit trail */
.dcr-target-history {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.dcr-target-history li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dcr-target-history li:last-child { border-bottom: none; }
.dcr-target-history-reason {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  margin-left: auto;
}
.dcr-row-requested { background: #eff6ff; }
.dcr-row-reflected { background: #f0fdf4; }
.dcr-row-rejected { background: #f8fafc; color: #94a3b8; }

.dcr-type-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
  background: #e2e8f0;
  color: #475569;
}
.dcr-type-column_add { background: #dcfce7; color: #166534; }
.dcr-type-column_modify { background: #fef3c7; color: #92400e; }
.dcr-type-column_remove { background: #fee2e2; color: #991b1b; }
.dcr-type-table_add { background: #dbeafe; color: #1e40af; }
.dcr-type-table_rename { background: #fce7f3; color: #9d174d; }

.dcr-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'SF Mono', Menlo, monospace;
}
.dcr-status-pending { background: #fef3c7; color: #92400e; }
.dcr-status-requested { background: #dbeafe; color: #1e40af; }
.dcr-status-reflected { background: #dcfce7; color: #166534; }
.dcr-status-rejected { background: #e2e8f0; color: #475569; }

.dcr-form-section {
  max-width: 720px;
  margin: 20px 0;
}
.dcr-form {
  padding: 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.dcr-form-group {
  margin-bottom: 18px;
}
.dcr-form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.dcr-required { color: #dc2626; }
.dcr-form-input,
.dcr-form textarea,
.dcr-form-sub input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  color: #0f172a;
}
.dcr-form textarea { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; resize: vertical; }
.dcr-form-help {
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
}
.dcr-form-inline {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
.dcr-form-sub {
  flex: 1;
}
.dcr-form-sub label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 3px;
}
.dcr-type-radios {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dcr-type-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
}
.dcr-type-radio input { margin: 0; }
.dcr-type-radio:hover { background: #f8fafc; }
.dcr-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.dcr-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.dcr-detail-card {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.dcr-detail-card h3 {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.dcr-meta {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 12px;
}
.dcr-meta dt {
  color: #64748b;
  font-weight: 600;
}
.dcr-meta dd {
  color: #0f172a;
  margin: 0;
}
.dcr-rc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dcr-rc-table th {
  text-align: left;
  padding: 5px 8px;
  vertical-align: top;
  width: 120px;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.dcr-rc-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
}
.dcr-rc-block,
.dcr-reason-block {
  margin: 0;
  padding: 10px 12px;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  color: #334155;
}
/* DCR expand button / inline diff row on list page */
.dcr-expand-btn {
  background: none;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 3px;
  padding: 0 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  transition: transform 0.15s, background 0.15s;
}
.dcr-expand-btn.open {
  transform: rotate(90deg);
  background: #e0f2fe;
  color: #0369a1;
}
.dcr-diff-row td { background: #fafafa; padding: 12px 16px !important; }
.dcr-diff-inline { max-width: 100%; }
.dcr-inline-reason { margin-top: 10px; font-size: 11px; }
.dcr-inline-reason summary { cursor: pointer; color: var(--text-muted, #6b7280); }

/* DCR bundle (copy-all) page */
.dcr-bundle-visual { margin: 24px 0; }
.dcr-bundle-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.dcr-bundle-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dcr-bundle-target { font-size: 12px; color: #334155; }
.dcr-bundle-meta { font-size: 11px; color: var(--text-muted, #6b7280); }
.dcr-bundle-text { margin-top: 32px; }
.dcr-bundle-text-help {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 8px;
}
.dcr-bundle-textarea {
  width: 100%;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  color: #0f172a;
  resize: vertical;
  margin-top: 10px;
}
/* DCR Before/After diff table */
.dcr-card-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
  margin-left: 8px;
}
.dcr-card-sub-warn { color: #c2410c; }
.dcr-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dcr-diff-table th,
.dcr-diff-table td {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  vertical-align: top;
  text-align: left;
}
.dcr-diff-table thead th {
  background: #f1f5f9;
  font-weight: 600;
  color: #334155;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dcr-diff-table tbody th {
  background: #fafafa;
  width: 120px;
  font-weight: 600;
}
.dcr-diff-old {
  background: #fef2f2;
}
.dcr-diff-new {
  background: #f0fdf4;
}
.dcr-diff-changed .dcr-diff-old { background: #fee2e2; }
.dcr-diff-changed .dcr-diff-new { background: #dcfce7; }
.dcr-diff-empty {
  color: #9ca3af;
  font-style: italic;
}
.dcr-dep-list { margin: 0; padding-left: 20px; font-size: 12px; }
.dcr-dep-list li { margin-bottom: 4px; }
.dcr-dep-note,
.dcr-dep-empty {
  margin-top: 10px;
  font-size: 11px;
  color: #64748b;
}

.dcr-actions {
  margin: 20px 0 40px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.dcr-actions h3 {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin: 0 0 12px;
}
.dcr-action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.dcr-action-row form { margin: 0; }

/* DCR reflect (Edit & Reflect) form — Option A: 본문 수정 + reflected 마킹 */
.dcr-reflect-form-wrap {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
}
.dcr-reflect-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #065f46;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dcr-reflect-summary::-webkit-details-marker { display: none; }
.dcr-reflect-summary::before {
  content: "▶";
  font-size: 10px;
  transition: transform 0.15s;
}
.dcr-reflect-form-wrap[open] .dcr-reflect-summary::before { transform: rotate(90deg); }
.dcr-reflect-summary-hint {
  font-weight: 400;
  color: #047857;
  font-size: 11px;
}
.dcr-reflect-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #a7f3d0;
}
.dcr-reflect-rc-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.dcr-reflect-rc-head,
.dcr-reflect-rc-row {
  display: grid;
  grid-template-columns: 160px 1fr 1.4fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #d1fae5;
}
.dcr-reflect-rc-head {
  font-size: 11px;
  font-weight: 700;
  color: #065f46;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #6ee7b7;
}
.dcr-reflect-rc-key {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: #065f46;
  font-weight: 600;
}
.dcr-reflect-rc-base {
  font-size: 12px;
  color: #475569;
}
.dcr-reflect-rc-base pre {
  margin: 0;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  white-space: pre-wrap;
}
.dcr-reflect-rc-base em { color: #94a3b8; font-size: 11px; }
.dcr-reflect-rc-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #6ee7b7;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  background: #fff;
}
.dcr-reflect-rc-input:focus {
  outline: 2px solid #34d399;
  border-color: #10b981;
}
.dcr-reflect-rename-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px dashed #6ee7b7;
  border-radius: 6px;
}
.dcr-reflect-rename-row label {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.dcr-reflect-note-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
  font-size: 11px;
  font-weight: 600;
  color: #065f46;
}
.dcr-reflect-note {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #6ee7b7;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  background: #fff;
  resize: vertical;
}
.dcr-reflect-submit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #a7f3d0;
}
.dcr-reflect-submit-hint {
  font-size: 11px;
  color: #047857;
  font-style: italic;
}
.dcr-reject-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dcr-reject-form input[type="text"] {
  width: 200px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}
.btn-danger {
  padding: 8px 18px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover { background: #b91c1c; }
.dcr-delete-blocked {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 11px;
  color: #78350f;
}

.db-xlsx-upload {
  display: inline-block;
}
.db-xlsx-upload input[type="file"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.db-xlsx-btn {
  display: inline-block;
  padding: 6px 14px;
  background: #0f172a;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.db-xlsx-btn:hover { background: #1e293b; }

.xlsx-preview-empty {
  margin: 60px auto;
  max-width: 520px;
  text-align: center;
}
.xlsx-empty-card {
  padding: 48px 32px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
}
.xlsx-empty-icon {
  font-size: 48px;
  color: #16a34a;
  margin-bottom: 16px;
}
.xlsx-empty-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.xlsx-empty-sub {
  color: #64748b;
  margin-bottom: 24px;
}

.xlsx-preview-summary {
  margin: 20px 0 32px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.xlsx-source-diff {
  margin-bottom: 20px;
}
.xlsx-source-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.xlsx-source-label {
  display: inline-block;
  min-width: 44px;
  padding: 2px 8px;
  background: #e2e8f0;
  color: #475569;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.xlsx-source-row code {
  font-size: 12px;
  color: #334155;
}
.xlsx-source-arrow {
  text-align: center;
  color: #94a3b8;
  font-size: 16px;
  margin: 2px 0;
}

.xlsx-stat-row {
  display: flex;
  gap: 16px;
}
.xlsx-stat {
  flex: 1;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-align: center;
}
.xlsx-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  font-family: 'SF Mono', Menlo, monospace;
}
.xlsx-stat-label {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}
.xlsx-stat-added .xlsx-stat-value { color: #16a34a; }
.xlsx-stat-removed .xlsx-stat-value { color: #dc2626; }
.xlsx-stat-modified .xlsx-stat-value { color: #ea580c; }

/* xlsx preview: DCR matching section */
.xlsx-section-dcr .xlsx-section-icon { background: #fef3c7; color: #92400e; }

.xlsx-dcr-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.xlsx-dcr-match {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left-width: 4px;
  border-radius: 6px;
}
.xlsx-dcr-state-resolved { border-left-color: #16a34a; background: #f0fdf4; }
.xlsx-dcr-state-mismatch { border-left-color: #ea580c; background: #fff7ed; }
.xlsx-dcr-state-unchanged { border-left-color: #eab308; background: #fffbeb; }

.xlsx-dcr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.xlsx-dcr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.xlsx-dcr-state-resolved .xlsx-dcr-icon { background: #dcfce7; color: #16a34a; }
.xlsx-dcr-state-mismatch .xlsx-dcr-icon { background: #ffedd5; color: #ea580c; }
.xlsx-dcr-state-unchanged .xlsx-dcr-icon { background: #fef3c7; color: #92400e; }

.xlsx-dcr-id {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.xlsx-dcr-title {
  color: #475569;
  font-size: 12px;
}
.xlsx-dcr-state-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'SF Mono', Menlo, monospace;
}
.xlsx-dcr-state-resolved .xlsx-dcr-state-badge { background: #dcfce7; color: #16a34a; }
.xlsx-dcr-state-mismatch .xlsx-dcr-state-badge { background: #ffedd5; color: #ea580c; }
.xlsx-dcr-state-unchanged .xlsx-dcr-state-badge { background: #fef3c7; color: #92400e; }

.xlsx-dcr-body {
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}
.xlsx-dcr-body code {
  padding: 1px 5px;
  background: #f1f5f9;
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, monospace;
}
.xlsx-dcr-deps {
  margin: 6px 0 0 0;
  padding-left: 20px;
}
.xlsx-dcr-deps li {
  font-size: 11px;
  color: #334155;
}

.xlsx-dcr-mismatch-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 11px;
}
.xlsx-dcr-mismatch-table th {
  text-align: left;
  padding: 5px 8px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 600;
  border-bottom: 1px solid #fed7aa;
}
.xlsx-dcr-mismatch-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #fed7aa;
  font-family: 'SF Mono', Menlo, monospace;
}
/* ============================================================
   /database/drift dashboard
   ============================================================ */

.drift-summary {
  margin: 20px 0 30px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.drift-stat-row {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}
.drift-stat {
  flex: 1;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-align: center;
}
.drift-stat-value {
  font-size: 24px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
  color: #0f172a;
}
.drift-stat-label {
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
  line-height: 1.3;
}
.drift-stat-label small {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  margin-top: 2px;
}
.drift-stat-critical .drift-stat-value { color: #dc2626; }
.drift-stat-drift .drift-stat-value { color: #ea580c; }
.drift-stat-pending .drift-stat-value { color: #eab308; }
.drift-stat-clean .drift-stat-value { color: #16a34a; }

.drift-dcr-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.drift-dcr-title {
  font-size: 11px;
  color: #64748b;
  margin-right: 4px;
}
.drift-dcr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
  color: #475569;
}
.drift-dcr-n {
  padding: 0 4px;
  background: #f1f5f9;
  border-radius: 3px;
  font-weight: 600;
  font-family: 'SF Mono', Menlo, monospace;
}
.drift-dcr-status-pending { border-color: #fde68a; color: #92400e; background: #fffbeb; }
.drift-dcr-status-requested { border-color: #93c5fd; color: #1e40af; background: #eff6ff; }
.drift-dcr-status-reflected { border-color: #86efac; color: #166534; background: #f0fdf4; }
.drift-dcr-status-rejected { border-color: #cbd5e1; color: #475569; background: #f8fafc; }

.drift-count-pending {
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.drift-item.drift-sev-pending { border-left-color: #eab308; background: #fffbeb; }
.drift-sev-badge.drift-sev-pending { background: #fef3c7; color: #92400e; }

.drift-item-dcr-chip {
  margin-left: 6px;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 4px;
  font-size: 10px;
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 600;
}
.drift-item-dcr-chip em {
  font-style: normal;
  font-weight: 400;
  color: #b45309;
}
.drift-convert-dcr-btn {
  margin-left: 6px;
  padding: 2px 8px;
  background: #fff;
  color: #b45309;
  border: 1px solid #fde68a;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 600;
  text-decoration: none;
}
.drift-convert-dcr-btn:hover {
  background: #fffbeb;
  border-color: #f59e0b;
  text-decoration: none;
}

.field-dcr-marker {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 600;
  text-decoration: none;
  vertical-align: middle;
}
.field-dcr-marker:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  text-decoration: none;
}
.drift-stale {
  background: #f8fafc !important;
  color: #475569 !important;
}

.drift-attr-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.drift-attr-title {
  font-size: 11px;
  color: #64748b;
  margin-right: 4px;
}
.drift-attr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
}
.drift-attr-chip code {
  font-family: 'SF Mono', Menlo, monospace;
  color: #334155;
}
.drift-attr-n {
  padding: 0 4px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 3px;
  font-weight: 600;
  font-family: 'SF Mono', Menlo, monospace;
}

.drift-empty {
  margin: 60px auto;
  max-width: 520px;
  text-align: center;
}
.drift-empty-card {
  padding: 48px 32px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
}
.drift-empty-icon { font-size: 48px; color: #16a34a; margin-bottom: 16px; }
.drift-empty-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.drift-empty-sub { color: #64748b; }

.drift-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drift-group {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.drift-group summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  user-select: none;
}
.drift-group summary::-webkit-details-marker { display: none; }
.drift-group[open] summary { border-bottom: 1px solid #e2e8f0; background: #f8fafc; }

.drift-group-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
}
.drift-group-kind.api { background: #dbeafe; color: #1e40af; }
.drift-group-kind.function { background: #fce7f3; color: #9d174d; }
.drift-group-id {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
}
.drift-group-id:hover { color: #2563eb; text-decoration: underline; }
.drift-group-name { color: #64748b; font-size: 12px; }
.drift-group-counts { margin-left: auto; display: flex; gap: 8px; }
.drift-count-critical {
  padding: 2px 8px;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.drift-count-drift {
  padding: 2px 8px;
  background: #ffedd5;
  color: #ea580c;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}


.drift-fix-form {
  display: inline;
  margin: 0;
}
.drift-fix-btn {
  padding: 3px 10px;
  background: #fff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.drift-fix-btn:hover {
  background: #faf5ff;
  border-color: #a78bfa;
}

/* drift 필터 바 */
.drift-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
}
.drift-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.drift-filter-label {
  font-weight: 600;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.drift-filter-check {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.drift-filter-n {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.drift-filter-n-critical { background: #fee2e2; color: #b91c1c; }
.drift-filter-n-pending  { background: #fef9c3; color: #92400e; }
.drift-filter-n-drift    { background: #dbeafe; color: #1d4ed8; }
.drift-filter-group-search { gap: 6px; }
.drift-filter-input {
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  width: 130px;
}
.drift-filter-input:focus {
  outline: none;
  border-color: #94a3b8;
  background: #fff;
}
.drift-filter-result {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

/* drift 페이지 inline reflect 액션 버튼 */
.drift-inline-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.drift-inline-actions-form {
  margin: 0;
}
.drift-inline-btn {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
}
.drift-inline-btn-reflect {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.drift-inline-btn-reflect:hover {
  background: #dcfce7;
  border-color: #86efac;
}
.drift-inline-btn-edit {
  background: #fff;
  color: #9333ea;
  border-color: #e9d5ff;
}
.drift-inline-btn-edit:hover {
  background: #faf5ff;
  border-color: #c084fc;
}
/* inline reflect 편집 폼 */
.drift-inline-reflect {
  margin-top: 8px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.drift-inline-reflect-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.drift-inline-reflect-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.drift-inline-reflect-key {
  min-width: 110px;
  font-size: 11px;
  color: #6b7280;
  padding-top: 4px;
}
.drift-inline-reflect-input {
  flex: 1;
  font-size: 12px;
  font-family: monospace;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  min-width: 0;
}
.drift-inline-reflect-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.drift-inline-reflect-note {
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}
.drift-inline-reflect-submit {
  white-space: nowrap;
  font-size: 12px;
  padding: 5px 14px;
}

.drift-items {
  padding: 4px 16px 14px;
}
.drift-item {
  margin: 10px 0;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-left-width: 3px;
  border-radius: 5px;
}
.drift-item.drift-sev-critical { border-left-color: #dc2626; background: #fef2f2; }
.drift-item.drift-sev-drift { border-left-color: #ea580c; background: #fffbeb; }

.drift-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.drift-sev-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
}
.drift-sev-badge.drift-sev-critical { background: #fee2e2; color: #dc2626; }
.drift-sev-badge.drift-sev-drift { background: #ffedd5; color: #ea580c; }
.drift-item-mapping {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: #0f172a;
  font-weight: 600;
}
.drift-item-kind {
  padding: 1px 6px;
  background: #e2e8f0;
  color: #475569;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'SF Mono', Menlo, monospace;
}
.drift-item-section {
  color: #64748b;
  font-size: 11px;
}
.drift-item-field {
  color: #64748b;
  font-size: 11px;
  margin-left: auto;
}
.drift-item-field code { font-family: 'SF Mono', Menlo, monospace; color: #0f172a; }

.drift-item-body { padding: 6px 0; font-size: 12px; color: #475569; }
.drift-dangling code {
  font-family: 'SF Mono', Menlo, monospace;
  color: #dc2626;
  background: #fee2e2;
  padding: 1px 6px;
  border-radius: 3px;
}

.drift-detail-table {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  font-size: 11px;
}
.drift-detail-table th {
  text-align: left;
  padding: 5px 8px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.drift-detail-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  font-family: 'SF Mono', Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
.drift-detail-table td:first-child { width: 120px; color: #0f172a; }
.drift-spec-val { color: #dc2626; max-width: 40%; }
.drift-db-val { color: #16a34a; max-width: 40%; }

.xlsx-preview-section {
  margin: 24px 0;
}
.xlsx-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  margin: 20px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}
.xlsx-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.xlsx-section-added .xlsx-section-icon { background: #dcfce7; color: #16a34a; }
.xlsx-section-removed .xlsx-section-icon { background: #fee2e2; color: #dc2626; }
.xlsx-section-modified .xlsx-section-icon { background: #ffedd5; color: #ea580c; }
.xlsx-section-renamed .xlsx-section-icon { background: #ede9fe; color: #7c3aed; }

.xlsx-table-card {
  margin: 10px 0;
  padding: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.xlsx-card-added { border-left: 4px solid #16a34a; }
.xlsx-card-removed { border-left: 4px solid #dc2626; }
.xlsx-card-modified { border-left: 4px solid #ea580c; }
.xlsx-card-renamed { border-left: 4px solid #7c3aed; background: #faf5ff; }
.xlsx-card-renamed .xlsx-table-name.xlsx-old {
  text-decoration: line-through;
  color: #94a3b8;
}
.xlsx-card-renamed .xlsx-table-name.xlsx-new {
  color: #7c3aed;
  font-weight: 700;
}
.xlsx-rename-arrow {
  color: #7c3aed;
  font-weight: 700;
  margin: 0 4px;
}
.xlsx-rename-similarity {
  font-size: 11px;
  background: #ede9fe;
  color: #7c3aed;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: auto;
}
.xlsx-renamed-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 4px 0 12px;
  padding: 8px 12px;
  background: #faf5ff;
  border-radius: 4px;
  border-left: 3px solid #c4b5fd;
}
.xlsx-stat-renamed .xlsx-stat-value { color: #7c3aed; }

/* Rename hint badge — added/removed 카드에 'リネームかも?' 표시 */
.xlsx-rename-hint {
  font-size: 11px;
  color: #7c3aed;
  background: #faf5ff;
  border: 1px solid #ddd6fe;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
  margin-left: auto;
}
.xlsx-table-card.has-rename-hint {
  /* dashed 보라 외곽선으로 'rename 候補' 임을 시각적 hint */
  border-style: dashed;
}

/* Rename apply UI — 候補 chk + override + manual add */
.xlsx-rename-count-badge {
  font-size: 11px;
  background: #ede9fe;
  color: #7c3aed;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 8px;
}
.xlsx-rename-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.xlsx-rename-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #6b21a8;
  padding: 2px 8px;
  background: #ffffff;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.xlsx-rename-checkbox input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}
.xlsx-rename-override-select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #c4b5fd;
  border-radius: 4px;
  background: #fff;
  color: #4c1d95;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-width: 280px;
}
.xlsx-rename-similarity-high {
  background: #ddd6fe;
  color: #5b21b6;
}
.xlsx-rename-manual-add {
  border-top: 1px dashed #c4b5fd;
  padding-top: 12px;
  margin-top: 4px;
}
.xlsx-rename-manual-add .xlsx-section-sub {
  margin-bottom: 8px;
  font-weight: 600;
  color: #6b21a8;
}
.xlsx-rename-manual-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.xlsx-rename-manual-row select {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 220px;
}
.xlsx-rename-manual-addbtn {
  margin-top: 6px;
  font-size: 12px;
  padding: 4px 12px;
}
.xlsx-rename-manual-empty {
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 0;
}
.xlsx-rename-manual-remove {
  font-size: 11px;
  padding: 3px 10px;
}

/* Apply confirm modal */
.xlsx-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xlsx-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.xlsx-modal-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  max-width: 560px;
  width: calc(100vw - 32px);
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.xlsx-modal-head {
  padding: 14px 18px;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.xlsx-modal-body {
  padding: 14px 18px;
  overflow: auto;
  font-size: 13px;
}
.xlsx-modal-actions {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.xlsx-modal-renames-head {
  font-weight: 600;
  margin-bottom: 6px;
}
.xlsx-modal-renames-list {
  margin: 0 0 12px 18px;
  padding: 0;
}
.xlsx-modal-renames-list li {
  margin: 2px 0;
  font-size: 12.5px;
}
.xlsx-modal-renames-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
}
.xlsx-modal-renames-empty {
  color: var(--text-muted);
  margin-bottom: 12px;
}
.xlsx-modal-warning {
  font-size: 11.5px;
  color: #b45309;
  background: #fef3c7;
  padding: 8px 12px;
  border-radius: 4px;
  border-left: 3px solid #f59e0b;
}

.xlsx-table-card summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  user-select: none;
}
.xlsx-table-card summary::-webkit-details-marker { display: none; }
.xlsx-table-card[open] summary {
  border-bottom: 1px solid #e2e8f0;
}
.xlsx-table-name {
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
  color: #0f172a;
}
.xlsx-table-ja {
  color: #64748b;
  font-size: 12px;
}
.xlsx-table-cols {
  margin-left: auto;
  color: #64748b;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, monospace;
}

.xlsx-change-block {
  padding: 10px 16px 14px;
  border-top: 1px solid #f1f5f9;
}
.xlsx-change-block:first-child { border-top: none; }
.xlsx-change-block-title {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
}
.xlsx-text-added { color: #16a34a; }
.xlsx-text-removed { color: #dc2626; }
.xlsx-text-modified { color: #ea580c; }

.xlsx-columns-table {
  padding: 4px 16px 14px;
}
.xlsx-columns-table table,
.xlsx-columns-table-compact,
.xlsx-field-diff {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.xlsx-columns-table th,
.xlsx-columns-table-compact th,
.xlsx-field-diff th {
  text-align: left;
  padding: 6px 8px;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.xlsx-columns-table td,
.xlsx-columns-table-compact td,
.xlsx-field-diff td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.xlsx-columns-table code,
.xlsx-columns-table-compact code,
.xlsx-field-diff code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: #0f172a;
}

.xlsx-column-modified {
  margin: 10px 0;
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 6px;
}
.xlsx-column-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.xlsx-col-ja {
  font-size: 11px;
  color: #64748b;
}
.xlsx-field-diff .xlsx-old {
  color: #dc2626;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
}
.xlsx-field-diff .xlsx-new {
  color: #16a34a;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
}

.xlsx-preview-actions {
  margin: 32px 0 40px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.xlsx-action-form {
  display: inline;
  margin: 0;
}

/* ============================================================
   topnav: pending 設計書 rewrite 배지 (git pill 옆)
   ============================================================ */
.topnav-rewrite-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: var(--warn-bg-soft);
  color: var(--warn-fg-strong);
  border: 1px solid var(--warn-border);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.topnav-rewrite-pending:hover {
  background: var(--warn-bg);
  border-color: var(--warning);
  text-decoration: none;
  transform: translateY(-1px);
}
.topnav-rewrite-pending .topnav-rewrite-icon { font-size: 13px; line-height: 1; }
.topnav-rewrite-pending .topnav-rewrite-label { font-size: 11px; }
.topnav-rewrite-pending .topnav-rewrite-n {
  padding: 1px 6px;
  background: var(--warning);
  color: #fff;
  border-radius: 999px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
}

/* ============================================================
   /database/drift — Step 2/2 "今回の xlsx 適用分" 노란 섹션
   (preview rename 보라 톤과 차별화하기 위해 노란/주황 톤 사용)
   ============================================================ */
.xlsx-drift-current {
  margin: 20px 0 28px;
  padding: 18px 20px;
  background: var(--warn-bg-soft);
  border: 2px solid var(--warn-border);
  border-left: 6px solid var(--warning);
  border-radius: 10px;
}
.xlsx-drift-current-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.xlsx-drift-current-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--warn-fg);
}
.xlsx-drift-current-icon { font-size: 18px; line-height: 1; }
.xlsx-drift-current-source {
  padding: 2px 8px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
}
.xlsx-drift-rollback {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  font-size: 11px;
}
.xlsx-drift-rollback-label { color: var(--warn-fg-strong); }
.xlsx-drift-rollback-cmd {
  padding: 2px 6px;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
}
.xlsx-drift-rollback-copy {
  padding: 3px 10px;
  background: #fff;
  color: var(--warn-fg-strong);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.xlsx-drift-rollback-copy:hover {
  background: var(--warn-bg);
  border-color: var(--warning);
}
.xlsx-drift-rollback-copy.is-copied {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.xlsx-drift-current-help {
  margin: 6px 0 16px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--warn-fg);
  line-height: 1.6;
}
.xlsx-drift-current-help strong { color: var(--warn-accent); }

.xlsx-drift-block {
  margin: 14px 0;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  overflow: hidden;
}
.xlsx-drift-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fef3c7;
  border-bottom: 1px solid #fde68a;
}
.xlsx-drift-block-title {
  font-size: 13px;
  font-weight: 700;
  color: #78350f;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.xlsx-drift-block-n {
  padding: 1px 8px;
  background: var(--warning);
  color: #fff;
  border-radius: 999px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.xlsx-drift-toggle {
  display: inline-flex;
  gap: 6px;
}
.xlsx-drift-toggle-btn {
  padding: 3px 10px;
  background: #fff;
  color: var(--warn-fg-strong);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.xlsx-drift-toggle-btn:hover {
  background: var(--warn-bg);
  border-color: var(--warning);
}

/* rename DCR rows */
.xlsx-drift-rename-list {
  display: flex;
  flex-direction: column;
}
.xlsx-drift-rename-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--warn-bg);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.xlsx-drift-rename-row:last-child { border-bottom: none; }
.xlsx-drift-rename-row:hover { background: var(--warn-bg-soft); }
.xlsx-drift-rename-row input[type="checkbox"]:checked + .xlsx-drift-rename-id { color: var(--warn-accent); }
.xlsx-drift-rename-id {
  padding: 1px 6px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.xlsx-drift-rename-old,
.xlsx-drift-rename-new {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: #0f172a;
}
.xlsx-drift-rename-old {
  text-decoration: line-through;
  color: #94a3b8;
}
.xlsx-drift-rename-arrow { color: var(--warning); font-weight: 700; }
.xlsx-drift-rename-meta {
  padding: 1px 6px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
}
.xlsx-drift-rename-reason {
  margin-left: auto;
  color: #64748b;
  font-size: 11px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

/* spec drift rows */
.xlsx-drift-spec-list {
  display: flex;
  flex-direction: column;
}
.xlsx-drift-spec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--warn-bg);
  font-size: 12px;
  transition: background 0.1s;
}
.xlsx-drift-spec-row .xlsx-drift-spec-name {
  cursor: pointer;
}
.xlsx-drift-spec-row:last-child { border-bottom: none; }
.xlsx-drift-spec-row:hover { background: var(--warn-bg-soft); }
.xlsx-drift-spec-row.is-critical { background: #fff7ed; }
.xlsx-drift-spec-row.is-critical:hover { background: #ffedd5; }
.xlsx-drift-spec-kind {
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
}
.xlsx-drift-spec-kind.api { background: #dbeafe; color: #1e40af; }
.xlsx-drift-spec-kind.function { background: #fce7f3; color: #9d174d; }
.xlsx-drift-spec-id {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: #0f172a;
  font-weight: 600;
}
.xlsx-drift-spec-name {
  color: #475569;
  font-size: 11px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xlsx-drift-spec-counts {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.xlsx-drift-spec-note {
  padding: 8px 14px;
  background: var(--warn-bg);
  border-top: 1px solid var(--warn-border);
  font-size: 11px;
  color: var(--warn-fg);
  line-height: 1.6;
}
.xlsx-drift-spec-note strong {
  font-weight: 600;
  color: var(--warn-fg);
}

.xlsx-drift-spec-note .xlsx-drift-spec-badge {
  /* 안내문 안에 인라인으로 등장하는 배지 — 약간 작게 */
  font-size: 10px;
  vertical-align: middle;
}

/* ▶ expand 토글 버튼 (row 좌측) */
.xlsx-drift-spec-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #92400e;
  flex-shrink: 0;
  border-radius: 3px;
  transition: background 0.1s;
}
.xlsx-drift-spec-toggle:hover { background: rgba(245, 158, 11, 0.15); }
.xlsx-drift-spec-toggle:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
}
.xlsx-drift-spec-toggle-icon {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  transition: transform 0.12s ease-out;
}
.xlsx-drift-spec-toggle.is-expanded .xlsx-drift-spec-toggle-icon {
  transform: rotate(90deg);
}

/* sheet_id 링크 (a 래퍼) — 기본 link 스타일 죽이고 hover 만 underline */
.xlsx-drift-spec-id-link {
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.xlsx-drift-spec-id-link:hover .xlsx-drift-spec-id {
  color: #2563eb;
  text-decoration: underline;
}

/* 「⚠ 手動修正必要」 / 「✓ DCR-XXX 解決」 배지 */
.xlsx-drift-spec-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.xlsx-drift-spec-badge-auto {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.xlsx-drift-spec-badge-manual {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* manual-only row 강조 — 체크박스 default 미체크 상태를 시각적으로 알림 */
.xlsx-drift-spec-row.is-manual-only {
  background: #fef2f2;
}
.xlsx-drift-spec-row.is-manual-only:hover {
  background: #fee2e2;
}

/* drift 詳細 panel (expand 시 노출) */
.xlsx-drift-spec-detail {
  padding: 8px 14px 10px 40px;
  background: #fffaf2;
  border-bottom: 1px solid #fef3c7;
}
.xlsx-drift-spec-detail[hidden] { display: none; }
.xlsx-drift-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xlsx-drift-detail-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 4px;
  font-size: 11px;
  color: #1f2937;
}
.xlsx-drift-detail-item.drift-type-dangling_table { border-left: 3px solid #dc2626; }
.xlsx-drift-detail-item.drift-type-dangling_column { border-left: 3px solid #ea580c; }
.xlsx-drift-detail-item.drift-type-dangling_dcr { border-left: 3px solid #be123c; }
.xlsx-drift-detail-item.drift-type-stale_pending_marker { border-left: 3px solid #ca8a04; }

.xlsx-drift-detail-empty {
  padding: 6px 8px;
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}
.drift-detail-section {
  font-weight: 600;
  color: #475569;
  min-width: 60px;
}
.drift-detail-field {
  color: #334155;
}
.drift-detail-field code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  color: #0f172a;
}
.drift-detail-mapping-kind {
  padding: 1px 6px;
  background: #e0f2fe;
  color: #075985;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
}
.drift-detail-mapping {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: #b91c1c;
  background: #fef2f2;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #fecaca;
}
.drift-detail-reason {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  padding: 1px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* all_manual_no_match 안내 배너 */
.xlsx-drift-manual-banner {
  margin: 0 14px 12px;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.xlsx-drift-manual-banner-icon {
  font-size: 18px;
  line-height: 1;
  color: #dc2626;
  flex-shrink: 0;
}
.xlsx-drift-manual-banner-body {
  font-size: 12px;
  line-height: 1.55;
  color: #7f1d1d;
}
.xlsx-drift-manual-banner-body strong { color: #b91c1c; }
.xlsx-drift-manual-banner-body code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #fecaca;
}

.xlsx-drift-empty-batch {
  margin: 14px 0;
  padding: 24px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  text-align: center;
}
.xlsx-drift-empty-batch-icon {
  font-size: 32px;
  color: #16a34a;
  margin-bottom: 8px;
}
.xlsx-drift-empty-batch-title {
  font-size: 14px;
  font-weight: 700;
  color: #166534;
}
.xlsx-drift-empty-batch-sub {
  margin-top: 4px;
  font-size: 12px;
  color: #15803d;
}

.xlsx-drift-cta {
  margin-top: 14px;
  padding: 14px 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.xlsx-drift-cta-btn {
  padding: 10px 22px;
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.xlsx-drift-cta-btn:hover:not(:disabled) { background: #d97706; }
.xlsx-drift-cta-btn:disabled {
  background: #fde68a;
  color: #92400e;
  cursor: not-allowed;
  opacity: 0.7;
}
.xlsx-drift-cta-hint {
  color: #78350f;
  font-size: 12px;
  line-height: 1.5;
}
.xlsx-drift-cta-hint strong {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  color: #b45309;
}

/* "既存 drift" 헤더 — current 섹션과 시각적 분리 */
.drift-groups-existing-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 4px 10px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.drift-groups-existing-icon { font-size: 12px; line-height: 1; }

/* xlsx preview Step 1 모달의 안내 박스 (DB 만 반영됨을 강조) */
.xlsx-modal-step-note {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #1e3a8a;
  line-height: 1.5;
}
.xlsx-modal-step-icon {
  font-size: 14px;
  color: var(--primary);
  flex-shrink: 0;
}
.xlsx-modal-step-note strong { color: var(--primary-hover); }

/* snapshot-view 하위의 mutation UI 를 비활성화 — form submit / delete /
   deploy / review-mark / permission toggle 등을 시각적 + 기능적으로 차단.
   안전한 조회 요소 (xlsx DL · claude prompt copy · 페이저 · 이슈 링크 등)
   는 수동으로 opt-out 하도록 `.snapshot-allow` 를 덮어쓸 수 있게 남겨둔다. */
.snapshot-view .review-form,
.snapshot-view .delete-form,
.snapshot-view .danger-zone,
.snapshot-view .review-zone,
.snapshot-view .deploy-wrapper,
.snapshot-view .role-badge,
.snapshot-view .perm-cell.clickable,
.snapshot-view .comment-panel,
.snapshot-view .comment-compose {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  filter: grayscale(0.3);
}

/* ── Matrix (DB CRUD 表 / Screen×API マップ 공용) ─ */
.matrix-scroll {
  overflow-x: auto;
  max-height: 75vh;
  overflow-y: auto;
  margin-top: 8px;
  /* .content 의 max-width:1600px 제약을 뚫고 viewport 폭까지 확장 —
     큰 모니터에서 CRUD 표 전체가 한 눈에 보이도록. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: 24px;
  padding-right: 24px;
}
.crud-matrix-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  white-space: nowrap;
}
.crud-matrix-table th,
.crud-matrix-table td {
  border: 1px solid var(--border);
  padding: 3px 6px;
}
.crud-matrix-table tbody tr:hover td {
  background: var(--row-hover, #f9f9f9);
}
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-card);
  min-width: 200px;
  max-width: 260px;
  border-right: 2px solid var(--border);
}
.crud-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg-card);
}
.crud-matrix-table thead .sticky-col {
  z-index: 5;
}
.table-col {
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 0.7rem;
  height: 120px;
  text-align: left;
  vertical-align: bottom;
  padding: 6px 4px;
}
.crud-cell {
  text-align: center;
  min-width: 36px;
}
.crud-r  { color: #3b82f6; font-weight: 700; }
.crud-w  { color: #f59e0b; font-weight: 700; }

/* どの spec からも R/W されていない列を強調 (DB CRUD 詳細表) */
.detail-row-unused > td { background: #fef2f2; }
.detail-row-unused:hover > td { background: #fee2e2; }
.detail-row-unused .col-col code { color: #b91c1c; }
/* テーブル単位での未使用 — テーブル名セル (rowspan, sticky) も赤く. */
.crud-matrix-table td.col-tbl-unused { background: #fef2f2; }
.crud-matrix-table td.col-tbl-unused a { color: #b91c1c; }
/* DB CRUD 表のテーブル名・列名の下に並ぶ日本語ラベル */
.crud-matrix-table .ja-name {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--muted, #6b7280);
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}
.crud-matrix-table .col-tbl-unused .ja-name { color: #b91c1c; }
.unused-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: #ef4444;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.crud-unused-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 6px;
  font-size: 0.82rem;
}
.crud-unused-summary .summary-icon {
  font-size: 1.1rem;
}
.crud-unused-summary .summary-stat {
  color: #7f1d1d;
}
.crud-unused-summary .summary-stat strong {
  color: #b91c1c;
  font-size: 1rem;
  margin: 0 2px;
}
.crud-unused-summary .summary-toggle {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid #fca5a5;
  background: #fff;
  color: #b91c1c;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
}
.crud-unused-summary .summary-toggle:hover {
  background: #fee2e2;
}
.crud-unused-summary.is-empty {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.crud-unused-summary.is-empty .summary-stat,
.crud-unused-summary.is-empty .summary-stat strong {
  color: #166534;
}
.crud-matrix-table.hide-used .detail-row:not(.detail-row-unused) { display: none; }
.crud-matrix-table.hide-used .detail-spacer { display: none; }
.crud-op { font-size: 0.68rem; font-weight: 600; display: inline-block; }
.crud-op--call      { color: #3b82f6; }
.crud-op--subscribe { color: #8b5cf6; }
.crud-op--read      { color: #10b981; }
.crud-op--write     { color: #f59e0b; }
.crud-op--insert    { color: #8b5cf6; }
.crud-op--update    { color: #f59e0b; }
.crud-op--delete    { color: #ef4444; }
.legend-desc { font-size: 0.72rem; color: var(--muted, #777); margin-left: 2px; }

/* HTTP method bage (Screen × API map) */
.method-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 0.68rem; font-weight: 700; font-family: monospace;
  color: #fff; line-height: 1.4;
}
.method-badge--get     { background: #10b981; }
.method-badge--post    { background: #f59e0b; }
.method-badge--put     { background: #3b82f6; }
.method-badge--patch   { background: #8b5cf6; }
.method-badge--delete  { background: #ef4444; }
.method-badge--head    { background: #64748b; }
.method-badge--options { background: #64748b; }
.method-badge--sub     { background: #a855f7; }
.method-badge--other   { background: #94a3b8; }
.method-badge--unknown { background: #94a3b8; }
.method-badge--inline  { font-size: 0.6rem; padding: 0 4px; margin-left: 4px; }
.entity-cell { line-height: 1.4; }
.entity-cell .fn-name {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: normal;
  max-width: 240px;
}
.matrix-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.matrix-toolbar input {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  width: 240px;
}
.matrix-tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.matrix-zoom-btn,
.matrix-fs-btn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text, #111);
}
.matrix-zoom-btn:hover,
.matrix-fs-btn:hover { background: var(--row-hover, #f4f4f4); }
.matrix-zoom-btn:disabled,
.matrix-fs-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.matrix-zoom-level {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted, #555);
  font-variant-numeric: tabular-nums;
}
.matrix-fs-btn { margin-left: 6px; }
/* Fullscreen 상태 — viewport 100% 를 채우고 .content 의 1600px 제약 / 50%
   shift 를 무효화. Chrome/Safari/Firefox 모두 :fullscreen pseudo-class
   지원. matrix-fullscreen class 는 :fullscreen 미지원 브라우저용 fallback. */
.matrix-scroll:fullscreen,
.matrix-scroll.matrix-fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: var(--bg, #fff);
  overflow: auto;
}
.matrix-legend {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Glossary ──────────────────────────────────── */
.glossary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.glossary-table th,
.glossary-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  vertical-align: top;
}
.glossary-table th {
  background: var(--bg-thead, #f4f4f4);
  font-size: 0.78rem;
  position: sticky;
  top: 0;
  z-index: 2;
}
.glossary-table tbody tr:hover td {
  background: var(--row-hover, #f9f9f9);
}
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 12px 0 8px;
}
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  color: var(--text-muted, #555);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-btn:hover { background: var(--row-hover, #f4f4f4); }
.tab-btn.active {
  background: var(--bg, #fff);
  border-color: var(--border);
  border-bottom: 1px solid var(--bg, #fff);
  margin-bottom: -1px;
  color: var(--text, #111);
  font-weight: 600;
}
.tab-panel.hidden { display: none; }
.badge-neutral { background: #e5e7eb; color: #374151; }
/* ── DB CRUD 상세 페이지 ───────────────────────── */
.crud-detail-wrap { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.crud-detail-table { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.crud-detail-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-thead, #f4f4f4);
  border-bottom: 1px solid var(--border);
}
.crud-detail-tblname { font-weight: 700; font-size: 0.95rem; font-family: monospace; }
.crud-detail-ops { display: flex; gap: 4px; }
.crud-detail-tbllink { margin-left: auto; font-size: 0.78rem; color: var(--link); }
.crud-ref-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.crud-ref-table th,
.crud-ref-table td { border-bottom: 1px solid var(--border); padding: 5px 10px; }
.crud-ref-table th { background: var(--bg-card); font-size: 0.75rem; font-weight: 600; }
.crud-ref-table tbody tr:last-child td { border-bottom: none; }
.crud-ref-table tbody tr:hover td { background: var(--row-hover, #f9f9f9); }
.ref-section { font-size: 0.75rem; color: var(--text-muted); }
.ref-field { font-size: 0.78rem; }
.crud-detail-link { font-weight: 600; }
.entity-spec-link { font-size: 0.7rem; color: var(--text-muted); margin-left: 4px; }
.page-head-sub { font-size: 0.7em; font-weight: 400; color: var(--text-muted); margin-left: 8px; }
.link-subtle { font-size: 0.82rem; color: var(--link); }

.glossary-term        { font-weight: 600; font-family: monospace; }
.glossary-composition { font-family: monospace; font-size: 0.72rem; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.glossary-fullform    { font-family: monospace; font-size: 0.85rem; color: var(--text-muted); }
.glossary-expansion   { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
.glossary-ja          { font-size: 0.85rem; }
.glossary-desc        { font-size: 0.78rem; white-space: pre-wrap; line-height: 1.5; }
.glossary-used-in     { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.glossary-tbl         { font-family: monospace; background: var(--bg-card, #f5f5f5); padding: 1px 5px; border-radius: 3px; margin-right: 4px; font-size: 0.72rem; }
.glossary-table th .th-sub { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }

/* ── CRUD detail full table (all specs, column level) ─── */
.crud-detail-full-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.crud-detail-full-table th,
.crud-detail-full-table td { border: 1px solid var(--border); padding: 4px 8px; vertical-align: top; }
.crud-detail-full-table th { background: var(--bg-thead, #f4f4f4); font-size: 0.75rem; font-weight: 600; position: sticky; top: 0; z-index: 2; }
.crud-detail-full-table .col-sid { min-width: 180px; max-width: 220px; background: var(--bg-card); }
.crud-detail-full-table .col-tbl { min-width: 140px; font-family: monospace; font-size: 0.8rem; }
.crud-detail-full-table .col-col { min-width: 140px; }
.crud-detail-full-table .col-rw  { text-align: center; min-width: 40px; }
.crud-detail-full-table .col-sec { min-width: 110px; }
.crud-detail-full-table .col-fld { min-width: 120px; }
.crud-detail-full-table .detail-row:hover td { background: var(--row-hover, #f9f9f9); }
.crud-detail-full-table .detail-spacer td { height: 6px; background: var(--bg, #f0f0f0); border-left: none; border-right: none; }
.page-head-badge { font-size: 0.55em; font-weight: 500; vertical-align: middle; background: var(--bg-thead, #e8e8e8); color: var(--text-muted); border-radius: 4px; padding: 2px 6px; margin-left: 6px; }

/* ── CRUD detail pivot (行=テーブル+列, 列=スペック) ── */
.crud-detail-pivot-table { font-size: 0.78rem; }
.sticky-col-tbl, .sticky-col-col {
  position: sticky; background: var(--bg-card, #fff);
  border-right: 1px solid var(--border, #ddd); z-index: 2;
}
.sticky-col-tbl { left: 0; min-width: 130px; max-width: 180px; }
.sticky-col-col { left: 130px; min-width: 130px; font-family: monospace; font-size: 0.8rem; }
.crud-matrix-table thead .sticky-col-tbl,
.crud-matrix-table thead .sticky-col-col { z-index: 5; }
.spec-col {
  writing-mode: vertical-rl; white-space: nowrap;
  font-size: 0.72rem; height: 120px;
  text-align: left; vertical-align: bottom; padding: 6px 4px;
  position: sticky; top: 0; z-index: 3; background: var(--bg-card, #fff);
}
.spec-col a { color: inherit; }
.spec-col .fn-name { writing-mode: vertical-rl; font-size: 0.65rem; color: var(--muted, #666); display: block; }

/* ===== Operation History (運用履歴ログ) meta page ============================
   /references/operation-history — read-only catalog of OperationHistory event prefixes,
   EventKind/ErrorLevel enum, producer/consumer matrix, design rules.
   Tokens: var(--primary), var(--border), --warn-* palette のみで構成し、
   ベタ色 (badge 色彩 hex) は EventKind / ErrorLevel の意味色のみ追加。
   ============================================================ */
.oh-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

.oh-table-name {
  font-family: "SF Mono", Monaco, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 13px;
  background: #eff6ff;
  color: var(--primary-hover);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* --- 1. Overview --- */
.oh-overview { margin-bottom: 24px; }
.oh-overview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.oh-overview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.oh-overview-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 80px;
}
.oh-overview-value { font-size: 13px; }
.oh-overview-desc { margin: 8px 0 12px 0; }
.oh-overview-desc pre {
  font-size: 12px;
  color: var(--text);
  background: var(--bg-subtle);
  padding: 10px 12px;
  border-left: 3px solid var(--primary);
  border-radius: 4px;
}
.oh-overview-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.oh-quick-link {
  font-size: 12px;
  color: var(--primary);
  padding: 4px 10px;
  background: #eff6ff;
  border-radius: 4px;
}
.oh-quick-link:hover { background: #dbeafe; text-decoration: none; }

/* --- 2. EventKind / ErrorLevel grid --- */
.oh-enums { margin-bottom: 24px; }
.oh-enums-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .oh-enums-grid { grid-template-columns: 1fr; }
}
.oh-enum-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.oh-enum-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px 0;
}
.oh-enum-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.oh-enum-table th,
.oh-enum-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.oh-enum-table th {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.oh-enum-table tr:last-child td { border-bottom: none; }

/* EventKind badge (1..5 + unknown) */
.oh-eventkind-badge {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.oh-ek-1 { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }  /* purple - resource */
.oh-ek-2 { background: #fef3c7; color: #92400e; border-color: #fde68a; }  /* amber - user device op */
.oh-ek-3 { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }  /* blue - operation user action */
.oh-ek-4 { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }  /* green - auth */
.oh-ek-5 { background: #f3f4f6; color: var(--text-muted); border-color: var(--border); } /* gray - misc */
.oh-ek-unknown { background: var(--bg); color: var(--text-light); border-color: var(--border); }

/* ErrorLevel badge — color from yaml badge_color */
.oh-errorlevel-badge {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.oh-el-red    { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.oh-el-yellow { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.oh-el-gray   { background: #f3f4f6; color: var(--text-muted); border-color: var(--border); }

/* --- 3. Prefix catalog --- */
.oh-prefixes { margin-bottom: 24px; }
.oh-prefix-summary {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.oh-prefix-category {
  margin-bottom: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.oh-prefix-cat-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.oh-prefix-cat-count {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  margin-left: 6px;
  font-weight: 500;
}

.oh-prefix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.oh-prefix-table th,
.oh-prefix-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.oh-prefix-table th {
  background: #fafbfc;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.oh-prefix-table tr:last-child td { border-bottom: none; }

.oh-th-tag       { width: 220px; }
.oh-th-trigger   { width: 90px; }
.oh-th-eventkind { width: 90px; text-align: center; }
.oh-th-errlevel  { width: 110px; text-align: center; }
.oh-th-specs     { width: 200px; }
.oh-th-desc      { }

.oh-prefix-table td:nth-child(3),
.oh-prefix-table td:nth-child(4) { text-align: center; }

.oh-prefix-tag {
  display: inline-block;
  font-family: "SF Mono", Monaco, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  background: #0f172a;
  color: #f1f5f9;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* trigger_type badges */
.oh-trigger-screen,
.oh-trigger-auto,
.oh-trigger-result,
.oh-trigger-misc {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.oh-trigger-screen { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.oh-trigger-auto   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.oh-trigger-result { background: var(--warn-bg); color: var(--warn-fg-strong); border-color: var(--warn-border); }
.oh-trigger-misc   { background: #f3f4f6; color: var(--text-muted); border-color: var(--border); }

.oh-spec-link {
  display: inline-block;
  font-size: 11px;
  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
  background: #eff6ff;
  color: var(--primary-hover);
  border: 1px solid #bfdbfe;
  padding: 1px 6px;
  border-radius: 3px;
  margin: 1px 3px 1px 0;
}
.oh-spec-link:hover { background: #dbeafe; text-decoration: none; }
.oh-spec-link-shared { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.oh-spec-link-shared:hover { background: #dcfce7; }
.oh-spec-empty {
  font-size: 11px;
  color: var(--text-light);
  font-style: italic;
}

.oh-prefix-desc pre {
  font-size: 11.5px;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
}

/* --- 4. Producer / Consumer matrix --- */
.oh-producer-consumer { margin-bottom: 24px; }
.oh-pc-note {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--warn-bg-soft);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.oh-pc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.oh-pc-table th,
.oh-pc-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.oh-pc-table th {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.oh-pc-table tr:last-child td { border-bottom: none; }

.oh-th-producer { width: 220px; }
.oh-th-consumer { }

/* --- 5. Design rules + Related Issue / DCR --- */
.oh-design-rules { margin-bottom: 24px; }
.oh-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.oh-rule-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.oh-rule-card summary {
  cursor: pointer;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-bottom: 1px solid transparent;
  font-size: 12px;
  user-select: none;
}
.oh-rule-card[open] summary {
  border-bottom-color: var(--border);
  background: #eff6ff;
}
.oh-rule-id {
  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  background: #1f2937;
  color: #f1f5f9;
  padding: 2px 8px;
  border-radius: 3px;
}
.oh-rule-body {
  padding: 12px 14px;
}
.oh-rule-body pre {
  font-size: 11.5px;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
}

.oh-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .oh-related-grid { grid-template-columns: 1fr; }
}
.oh-related-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.oh-related-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.oh-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.oh-related-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.oh-related-list li:last-child { border-bottom: none; }
.oh-related-link {
  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  background: #eff6ff;
  padding: 1px 6px;
  border-radius: 3px;
}
.oh-related-link:hover { background: #dbeafe; text-decoration: none; }
.oh-related-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
}
.oh-status-open       { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.oh-status-updated    { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.oh-status-resolved,
.oh-status-reflected,
.oh-status-closed     { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.oh-related-text {
  font-size: 12px;
  color: var(--text);
  flex: 1;
  min-width: 200px;
}
.oh-related-empty {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
}


/* ===========================================================
   Spec Authoring Guide (/spec-authoring-guide) — meta page
   + spec-detail cross-reference card.
   카테고리 5 색은 yaml 의 color_hint 와 정렬 (indigo / blue /
   green / purple / amber / red). 기존 --primary / --warn-* 토큰을
   유지 활용하고, 카테고리별 hue 만 별도 정의.
   =========================================================== */

/* --- 카테고리 색 토큰 (root 에 추가하지 않고 클래스 단위로 가둠) --- */
.sag-category-naming      { --sag-cat-bg: #eef2ff; --sag-cat-fg: #3730a3; --sag-cat-border: #c7d2fe; }
.sag-category-content     { --sag-cat-bg: #eff6ff; --sag-cat-fg: #1d4ed8; --sag-cat-border: #bfdbfe; }
.sag-category-semantics   { --sag-cat-bg: #ecfdf5; --sag-cat-fg: #047857; --sag-cat-border: #a7f3d0; }
.sag-category-workflow    { --sag-cat-bg: #f5f3ff; --sag-cat-fg: #6d28d9; --sag-cat-border: #ddd6fe; }
.sag-category-test        { --sag-cat-bg: #fffbeb; --sag-cat-fg: #92400e; --sag-cat-border: #fde68a; }
.sag-category-cross_sync  { --sag-cat-bg: #fef2f2; --sag-cat-fg: #b91c1c; --sag-cat-border: #fecaca; }

.sag-section-title {
  margin: 24px 0 10px;
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.sag-total-count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  vertical-align: middle;
}

/* --- 1. Overview --- */
.sag-overview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.sag-overview-desc pre {
  margin: 0 0 10px;
  white-space: pre-wrap;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", "Noto Sans JP", "Noto Sans KR", sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.sag-overview-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.sag-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text);
}
.sag-quick-link code {
  font-family: Menlo, monospace;
  font-size: 11px;
  color: #1e293b;
}
.sag-quick-label { color: var(--text-muted); }
.sag-quick-icon { font-size: 12px; }

/* --- 2. Category navigation chips --- */
.sag-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sag-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--sag-cat-bg);
  border: 1px solid var(--sag-cat-border);
  border-radius: 999px;
  color: var(--sag-cat-fg);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s;
}
.sag-cat-chip:hover { filter: brightness(0.96); text-decoration: none; }
.sag-cat-chip-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  font-size: 10px;
  text-align: center;
  color: var(--sag-cat-fg);
}

/* --- 3. Category section --- */
.sag-category-section {
  margin-bottom: 28px;
}
.sag-cat-head {
  margin: 28px 0 12px;
}
.sag-cat-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--sag-cat-border);
  color: var(--sag-cat-fg);
}
.sag-cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sag-cat-fg);
}
.sag-cat-head-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.sag-cat-desc {
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--sag-cat-bg);
  border-left: 3px solid var(--sag-cat-fg);
  border-radius: 4px;
  font-size: 12px;
  color: var(--sag-cat-fg);
}
.sag-cat-desc pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 12px;
}

/* --- 3. Rule card --- */
.sag-rule-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sag-rule-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sag-cat-fg);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  scroll-margin-top: 80px; /* anchor jump 시 topnav 가림 회피 */
}
.sag-rule-card.sag-status-deprecated {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.sag-rule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.sag-rule-id {
  font-family: Menlo, monospace;
  font-size: 11px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 2px 6px;
  border-radius: 3px;
  color: #0f172a;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sag-rule-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1 1 auto;
}
.sag-status-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.sag-status-active {
  background: #dcfce7;
  color: #166534;
}
.sag-status-deprecated {
  background: #fee2e2;
  color: #991b1b;
}
.sag-status-proposed {
  background: var(--warn-bg);
  color: var(--warn-fg);
}

.sag-applies-to {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 11px;
}
.sag-applies-label {
  color: var(--text-muted);
  font-weight: 600;
}
.sag-applies-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: Menlo, monospace;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.sag-applies-api      { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.sag-applies-function { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.sag-applies-screen   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.sag-applies-all      { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }

.sag-rule-rationale {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.sag-rule-rationale-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.sag-rule-rationale pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
}

.sag-example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}
@media (max-width: 900px) {
  .sag-example-grid { grid-template-columns: 1fr; }
}
.sag-example-good,
.sag-example-bad {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.sag-example-good {
  border-color: #a7f3d0;
  background: #ecfdf5;
}
.sag-example-bad {
  border-color: #fecaca;
  background: #fef2f2;
}
.sag-example-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 4px 8px;
  border-bottom: 1px solid;
}
.sag-example-good .sag-example-label {
  color: #166534;
  border-color: #a7f3d0;
  background: rgba(22,101,52,0.05);
}
.sag-example-bad .sag-example-label {
  color: #991b1b;
  border-color: #fecaca;
  background: rgba(153,27,27,0.05);
}
.sag-example-good pre,
.sag-example-bad pre {
  margin: 0;
  padding: 8px 10px;
  white-space: pre-wrap;
  font-family: Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  background: transparent;
  color: var(--text);
}
.sag-example-good code,
.sag-example-bad code {
  font-family: inherit;
  background: transparent;
}

.sag-rule-references {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px dashed var(--border);
}
.sag-ref-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.sag-ref-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
}
.sag-ref-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-family: Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
.sag-ref-spec {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.sag-ref-issue {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.sag-ref-commit {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  cursor: help;
}
.sag-ref-spec:hover  { filter: brightness(0.96); text-decoration: none; }
.sag-ref-issue:hover { filter: brightness(0.96); text-decoration: none; }

/* --- 4. Related docs footer --- */
.sag-related-docs {
  margin-top: 28px;
}
.sag-docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sag-docs-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.sag-docs-path {
  font-family: Menlo, monospace;
  font-size: 11px;
  color: #0f172a;
  font-weight: 600;
}
.sag-docs-title {
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   参考資料 wiki-style left sidebar layout
   ============================================================ */
/* 参考資料 wiki-style sidebar — GitHub Settings 패턴 차용
   (배경 차이로 nav rail 강조, gap:0 로 panel-in-shell 게슈탈트, 강한 active) */
.refs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  /* sticky 가 작동하려면 grid item 이 row 높이로 늘어나면 안 됨.
     align-items: start 로 sidebar 가 자연 높이 유지 + sticky 동작.
     단 visual 적으로 sidebar 끝과 main 끝이 같이 보이게 하려면
     sidebar 의 min-height: calc(100vh - 52px) 가 viewport 높이는 보장. */
  align-items: start;
}
.refs-sidebar {
  position: sticky;
  top: 52px;
  background: #f6f8fa;
  border-right: 1px solid var(--border);
  padding: 16px 0;
  min-height: calc(100vh - 52px);
}
/* head: section label that doubles as hub link.
   유지: small uppercase label 시각. 차이: hover/active 미세 강조. */
.refs-side-head {
  display: block;
  padding: 4px 16px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.refs-side-head:hover { color: var(--text); }
.refs-side-head.active { color: var(--primary); }
.refs-side-item {
  display: block;
  padding: 7px 14px 7px 12px;
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
  border-left: 4px solid transparent;
}
.refs-side-item:hover { background: #eaedf0; }
.refs-side-item.active {
  background: #dde4ed;
  border-left-color: var(--primary);
  font-weight: 600;
  color: var(--text);
}
.refs-side-sep {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 16px 4px;
}
.refs-main {
  min-width: 0;
  padding: 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: none;
  min-height: calc(100vh - 52px);
}

/* Hub overview shortcut buttons */
.refs-hub-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 6px;
  margin: 24px 0 12px;
}
.refs-hub-shortcut:hover { background: var(--primary-hover); }
.refs-hub-shortcut::after { content: "→"; font-weight: 400; }
.refs-hub-shortcut-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.refs-hub-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.refs-hub-secondary a {
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.refs-hub-secondary a:hover { background: #f1f5f9; color: var(--text); }
.refs-hub-guidance {
  margin-top: 32px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 13px;
  border-radius: 0 4px 4px 0;
}

/* ============================================================
   references_messages.html utilities
   ============================================================ */

/* Payload message card (collapsible <details>) */
.payload-message {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--bg-card);
}
.payload-message > summary {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.payload-message > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.payload-message[open] > summary::before { transform: rotate(90deg); }
.payload-message > summary:hover { background: var(--bg-subtle); }
.payload-message > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.payload-message > .payload-table-wrap { padding: 0 12px 12px; overflow-x: auto; }

.payload-message-name { font-family: monospace; color: var(--primary); }
.payload-message-meta { font-size: 11px; color: var(--text-muted); font-weight: normal; }

/* Payload tree field cells */
.payload-tree-cell { white-space: nowrap; font-family: monospace; font-size: 12px; }
.tree-guide { color: var(--text-muted); }

/* Per-interface block spacing inside identifier section */
.payload-article { margin-top: 24px; }
.iface-block { margin-top: 16px; }

/* Section body padding and top-margin for refs-messages sections */
.section > .section-body { padding: 16px 20px 20px; }
#identifier.section { margin-top: 28px; }
#payload.section { margin-top: 24px; }
.iface-sub { margin-bottom: 10px; }
.payload-meta-wrap { margin-bottom: 14px; }
.msg-count { margin-bottom: 8px; }
.direction-badge { margin-left: 6px; font-weight: normal; }

/* Hint / caution note */
.info-note {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-left: 3px solid var(--primary);
  padding: 8px 12px;
  border-radius: 3px;
  margin-bottom: 14px;
}

/* Inline warning marker */
.warn-marker { color: var(--warning); cursor: help; margin-left: 4px; }

/* Subsection heading */
.section-subtitle { font-size: 14px; font-weight: 600; margin: 16px 0 8px; color: var(--text); }

/* Utility: monospace cell, muted cell, scrollable table wrapper */
.mono { font-family: monospace; font-size: 12px; }
.text-muted { color: var(--text-muted); font-size: 12px; }
.table-scroll { overflow-x: auto; }

/* Consistent label-column widths in meta tables */
.meta-th { width: 130px; }
.col-field { width: 220px; }
.col-type, .col-card { width: 100px; }

/* ============================================================
   references_messages.html — タブ拡張
   ============================================================ */
.tab-btn-sub { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.payload-meta-header { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.payload-direction { font-size: 12px; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; }
.link-btn { background: none; border: none; padding: 0; color: var(--primary); cursor: pointer; font-size: inherit; text-decoration: underline; }
.link-btn:hover { color: var(--primary-hover); }

/* ============================================================
   references_files.html — 参考ファイルダウンロード
   ============================================================ */
.refs-files-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.refs-files-table th, .refs-files-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.refs-files-table th { background: var(--bg-subtle); font-weight: 600; color: var(--text-muted); font-size: 12px; }
.refs-files-table tr:hover td { background: #f8fafc; }
.refs-files-name { font-family: monospace; font-size: 12px; word-break: break-all; }
.refs-files-size { text-align: right; width: 90px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.refs-files-mtime { width: 110px; color: var(--text-muted); }
.refs-files-action { width: 72px; text-align: center; }

/* ============================================================
   モバイル対応 — レスポンシブ (hamburger nav + stacked layouts)
   ============================================================ */
.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle:hover { background: #f1f5f9; }
/* desktop: ラッパーをレイアウト透過にし topnav / topnav-right を従来どおり flex item に保つ */
.topbar-collapse { display: contents; }

@media (max-width: 768px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .nav-toggle { display: inline-flex; }
  .topbar-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    max-height: calc(100vh - 52px);
    overflow-y: auto;
  }
  .topbar-collapse.open { display: flex; }
  .topnav { flex-direction: column; gap: 2px; }
  .topnav a { padding: 10px 12px; border-radius: 8px; }
  .topnav-right { flex-direction: column; align-items: stretch; gap: 10px; margin-left: 0; }
  .topnav-search { width: 100%; }
  .topnav-search input[type="search"] { width: 100%; box-sizing: border-box; }
  .git-sync-wrap { flex-wrap: wrap; margin-left: 0; }

  .content { padding: 14px 12px 36px; }
  .breadcrumb { flex-direction: column; align-items: flex-start; gap: 8px; }
  .breadcrumb-actions { flex-wrap: wrap; }
  .search-bar { flex-wrap: wrap; gap: 8px; }
  .search-bar input[type="search"], .search-bar input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .list-header { flex-wrap: wrap; gap: 8px; }
  .matrix-toolbar { flex-wrap: wrap; gap: 8px; }

  .api-header { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .api-header-side {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 14px;
  }
  .api-header h1 { font-size: 19px; flex-wrap: wrap; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .form-field-method,
  .form-field-path { grid-column: 1; max-width: none; }

  .refs-layout { grid-template-columns: 1fr; }
  .refs-sidebar {
    position: static;
    top: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    min-height: 0;
  }

  .cmt-panel { width: 100vw; }

  /* 幅広テーブル (リスト/詳細) は横スクロール可に。
     .field-table は table-layout:fixed で収まるので除外、matrix は自前スクロール。 */
  .content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .content .field-table { display: table; }
  .matrix-scroll { width: 100%; left: auto; right: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .matrix-scroll table { display: table; }

  /* 横スクロール暴走防止: 長い pre/code を折り返し, 画像は親幅まで */
  pre,
  code { white-space: pre-wrap; word-break: break-word; }
  img { max-width: 100%; height: auto; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .api-header h1 { font-size: 18px; }
  .content { padding: 12px 10px 32px; }
}

/* ===== 설계서 데이터 테이블 뷰 토글 (table / card) ===== */
.tview-toggle {
  display: inline-flex;
  margin-left: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
}
.field-table-wrap > .tview-toggle { margin: 0 0 8px; }
.tview-btn {
  background: #fff;
  border: 0;
  padding: 3px 12px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.6;
}
.tview-btn + .tview-btn { border-left: 1px solid var(--border); }
.tview-btn:hover { background: #f1f5f9; }
.tview-btn.active { background: var(--primary); color: #fff; }

/* 카드 뷰: 표를 행 단위 카드로 전개 */
.field-table-wrap.card-view .field-table { display: block; width: 100%; }
.field-table-wrap.card-view .field-table colgroup,
.field-table-wrap.card-view .field-table thead { display: none; }
.field-table-wrap.card-view .field-table tbody { display: block; }
.field-table-wrap.card-view .field-table tr {
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
  padding: 8px 12px;
  margin: 0 0 10px;
}
.field-table-wrap.card-view .field-table td {
  display: block;
  position: relative;
  border: 0;
  padding: 4px 0 4px 38%;
  min-height: 20px;
  font-size: 12.5px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.field-table-wrap.card-view .field-table td::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 4px;
  width: 35%;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: normal;
  line-height: 1.4;
}
.field-table-wrap.card-view .field-table td.tcell-empty { display: none; }
.field-table-wrap.card-view .field-table td.desc,
.field-table-wrap.card-view .field-table td.mapping { padding-left: 0; }
.field-table-wrap.card-view .field-table td.desc::before,
.field-table-wrap.card-view .field-table td.mapping::before {
  position: static;
  display: block;
  width: auto;
  margin-bottom: 3px;
}
.field-table-wrap.card-view .field-table td .tcell-body { display: block; }
.field-table-wrap.card-view .field-table td pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
/* 긴 셀 접기/펼치기 (카드 뷰 전용) */
.field-table-wrap.card-view .field-table td.tcell-long .tcell-body {
  max-height: 6.4em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
          mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.field-table-wrap.card-view .field-table td.tcell-long.tcell-open .tcell-body {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.tcell-more { display: none; }
.field-table-wrap.card-view .field-table td.tcell-long .tcell-more {
  display: inline-block;
  background: transparent;
  border: 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0 0;
}