/* ai-debate/board/board.css — 갤러리 스타일 (v1.4.0, 2026-05-26)
 * ai-debate.css 의 변수·card 토대 그대로 활용. 갤러리 전용 클래스 추가.
 */

/* 툴바 — 정렬·필터·검색 */
.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 8px;
}
.board-filter-group { display: flex; flex-direction: column; gap: 3px; }
.board-search-group { flex: 1; min-width: 200px; }
.board-filter-label { font-size: 10px; font-weight: 700; color: var(--text3); letter-spacing: 0.04em; }
.board-select, .board-search {
  padding: 6px 10px; font-size: 12px;
  background: var(--bg-input); border: 1px solid var(--border, #444); border-radius: 6px;
  color: var(--text1, #f1f5f9); font-family: inherit;
}
.board-select { min-width: 130px; }
.board-search { width: 100%; }
.board-search:focus, .board-select:focus { outline: none; border-color: #a78bfa; }
.board-stats { font-size: 12px; color: var(--text2); margin-left: auto; font-weight: 600; }

/* 게시물 리스트 */
.board-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.board-loading, .board-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text3);
  font-size: 13px;
}
.board-empty-link {
  color: #a78bfa;
  font-weight: 600;
  text-decoration: none;
}
.board-empty-link:hover { text-decoration: underline; }

/* 카드 */
.brd-card {
  background: var(--bg-input);
  border: 1px solid var(--border, #444);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brd-card:hover {
  transform: translateY(-2px);
  border-color: #a78bfa;
  box-shadow: 0 4px 14px rgba(167, 139, 250, 0.18);
}
.brd-card-head { display: flex; flex-direction: column; gap: 4px; }
.brd-card-mode {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 100px;
  align-self: flex-start;
  letter-spacing: 0.02em;
}
.brd-mode-auto      { background: rgba(74, 158, 255, 0.18); color: #93c5fd; }
.brd-mode-semi      { background: rgba(250, 204, 21, 0.18); color: #fde047; }
.brd-mode-turn      { background: rgba(74, 222, 128, 0.18); color: #86efac; }
.brd-mode-creative  { background: rgba(167, 139, 250, 0.22); color: #c4b5fd; }
.brd-card-subject {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brd-card-personas { display: flex; flex-wrap: wrap; gap: 5px; font-size: 10px; }
.brd-card-persona {
  background: rgba(0, 0, 0, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  color: var(--text2);
}
.brd-card-label { color: #a78bfa; font-weight: 600; }
.brd-card-model { opacity: 0.6; font-size: 9px; }
.brd-card-issues {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 11px;
  color: var(--text3);
}
.brd-card-issues li { line-height: 1.4; }
.brd-card-preview {
  font-size: 11.5px;
  color: var(--text2);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.85;
}
.brd-card-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #444);
}

/* 더보기 */
.board-loadmore {
  text-align: center;
  margin-top: 18px;
}

/* 상세 모달 */
.brd-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.brd-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px); }
.brd-modal-dialog {
  position: relative;
  background: var(--bg, #1a1a1a);
  border: 1px solid var(--border, #444);
  border-radius: 12px;
  width: 92vw; max-width: 920px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.7);
}
.brd-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border, #444);
  gap: 14px;
}
.brd-modal-title-wrap { flex: 1; min-width: 0; }
.brd-modal-head h2 { margin: 0 0 6px; font-size: 17px; color: var(--text1); line-height: 1.4; }
.brd-modal-meta { font-size: 11px; color: var(--text3); }
.brd-modal-close {
  background: none; border: none; color: var(--text2);
  font-size: 22px; cursor: pointer; padding: 0 6px;
}
.brd-modal-close:hover { color: #f87171; }
.brd-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.brd-modal-body h3 {
  font-size: 14px;
  color: #a78bfa;
  margin: 18px 0 8px;
  letter-spacing: 0.02em;
}
.brd-modal-foot {
  display: flex;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border, #444);
  background: rgba(0, 0, 0, 0.15);
}

/* 모달 내부 — 페르소나 / 쟁점 */
.brd-modal-personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.brd-modal-persona {
  background: rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #444);
}
.brd-modal-persona-head { font-size: 13px; margin-bottom: 3px; }
.brd-modal-persona-role { font-size: 11px; color: var(--text3); margin-bottom: 6px; }
.brd-modal-persona-stance { font-size: 11px; color: var(--text2); line-height: 1.5; }
.brd-modal-framework {
  background: rgba(74, 158, 255, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: var(--text2);
  margin-bottom: 12px;
}
.brd-modal-framework strong { color: #93c5fd; }
.brd-modal-framework ul {
  margin: 4px 0 8px;
  padding-left: 20px;
  line-height: 1.5;
}

/* 모달 — 토론 transcript */
.brd-transcript-details {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--border, #444);
}
.brd-transcript-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  padding: 6px 0;
}
.brd-transcript-details summary:hover { color: #a78bfa; }
.brd-transcript {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brd-tr-bubble {
  background: rgba(0, 0, 0, 0.18);
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--border, #444);
}
.brd-tr-head { font-size: 12px; margin-bottom: 5px; color: var(--text1); }
.brd-tr-role { font-size: 10px; color: var(--text3); }
.brd-tr-round { font-size: 10px; color: #a78bfa; margin-left: 6px; font-weight: 600; }
.brd-tr-body { font-size: 12px; color: var(--text2); line-height: 1.6; }

/* v2.1.0 — 갤러리 모달 풍부화 (결과 페이지와 동일 디자인) */

/* 비용 박스 */
.brd-cost-box {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 12px;
  color: #fde047;
}
.brd-cost-box strong { color: #fde047; }

/* 자신감 궤적 매트릭스 */
.brd-traj {
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.05), rgba(167, 139, 250, 0.04));
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
}
.brd-traj-title { font-size: 12.5px; font-weight: 700; color: #93c5fd; margin-bottom: 10px; }
.brd-traj-grid { display: grid; gap: 4px; font-size: 11px; }
.brd-traj-cell { padding: 6px 8px; text-align: center; border-radius: 4px; background: rgba(0,0,0,0.18); }
.brd-traj-head { font-weight: 700; background: rgba(0,0,0,0.3); }
.brd-traj-rname { text-align: left; font-weight: 600; color: var(--text2); }
.traj-low  { background: rgba(251, 146, 60, 0.18); }
.traj-mid  { background: rgba(250, 204, 21, 0.15); }
.traj-high { background: rgba(74, 222, 128, 0.18); }
.traj-na   { background: rgba(120, 120, 120, 0.12); opacity: 0.6; }
.brd-traj-legend { font-size: 10px; color: var(--text3); margin-top: 8px; text-align: right; }

/* Mermaid 다이어그램 (모달 안) */
.mermaid-wrap {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(167, 139, 250, 0.04));
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 10px;
  padding: 14px 16px 18px;
  margin: 12px 0;
  overflow-x: auto;
}
.mermaid-wrap .mermaid-title { font-size: 12.5px; font-weight: 700; color: #93c5fd; margin-bottom: 10px; }
.mermaid-wrap .mermaid {
  display: flex; justify-content: center; align-items: center; min-height: 80px;
}
.mermaid-wrap .mermaid svg { max-width: none !important; height: auto !important; }
.mermaid-wrap .mermaid .nodeLabel, .mermaid-wrap .mermaid .edgeLabel { color: #f1f5f9 !important; }
.mermaid-wrap .mermaid .edgeLabel {
  background: rgba(30, 41, 59, 0.85) !important;
  padding: 2px 6px; border-radius: 4px; font-size: 11px;
}
.mermaid-error {
  padding: 14px 18px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.32);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 12.5px;
}
.mermaid-error strong { color: #f87171; display: block; margin-bottom: 4px; font-size: 13px; }
.mermaid-error p { margin: 0; color: var(--text2, #b0b0b7); }

/* 페르소나 카드 stance 색 (모달 안) */
.brd-modal-persona.stance-pro       { border-left: 3px solid #4ade80; }
.brd-modal-persona.stance-con       { border-left: 3px solid #f87171; }
.brd-modal-persona.stance-third     { border-left: 3px solid #a78bfa; }
.brd-modal-persona.stance-neutral   { border-left: 3px solid #9ca3af; }
.brd-modal-persona.stance-pragma    { border-left: 3px solid #38bdf8; }
.brd-modal-persona.stance-principle { border-left: 3px solid #fb923c; }

/* stance chip (모달 페르소나 헤더·궤적 헤더 안 이름) */
.stance-chip-pro       { background: rgba(74, 222, 128, 0.18); color: #86efac; padding: 1px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.stance-chip-con       { background: rgba(248, 113, 113, 0.18); color: #fca5a5; padding: 1px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.stance-chip-third     { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; padding: 1px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.stance-chip-neutral   { background: rgba(156, 163, 175, 0.18); color: #d1d5db; padding: 1px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.stance-chip-pragma    { background: rgba(56, 189, 248, 0.18); color: #7dd3fc; padding: 1px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.stance-chip-principle { background: rgba(251, 146, 60, 0.18); color: #fdba74; padding: 1px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.stance-chip-other     { background: rgba(255,255,255,0.08); color: var(--text2); padding: 1px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }

/* 라운드별 transcript (모달 안) */
.brd-tr-round {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.brd-tr-round-header {
  font-size: 12.5px;
  font-weight: 600;
  color: #c4b5fd;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(167, 139, 250, 0.18);
}
.brd-tr-round-header strong { color: #fff; }
.brd-tr-round-bubbles { display: flex; flex-direction: column; gap: 10px; }

/* transcript bubble — stance 색 + 모델 아바타 */
.brd-tr-bubble {
  background: rgba(0, 0, 0, 0.22);
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--border, #444);
}
.brd-tr-bubble.stance-pro       { border-left-color: #4ade80; background: linear-gradient(90deg, rgba(74, 222, 128, 0.10), transparent 40%); }
.brd-tr-bubble.stance-con       { border-left-color: #f87171; background: linear-gradient(90deg, rgba(248, 113, 113, 0.10), transparent 40%); }
.brd-tr-bubble.stance-third     { border-left-color: #a78bfa; background: linear-gradient(90deg, rgba(167, 139, 250, 0.10), transparent 40%); }
.brd-tr-bubble.stance-neutral   { border-left-color: #9ca3af; background: linear-gradient(90deg, rgba(156, 163, 175, 0.10), transparent 40%); }
.brd-tr-bubble.stance-pragma    { border-left-color: #38bdf8; background: linear-gradient(90deg, rgba(56, 189, 248, 0.10), transparent 40%); }
.brd-tr-bubble.stance-principle { border-left-color: #fb923c; background: linear-gradient(90deg, rgba(251, 146, 60, 0.10), transparent 40%); }

.brd-tr-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.brd-tr-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.brd-tr-avatar.model-claude { background: #d97706; }
.brd-tr-avatar.model-gpt    { background: #10a37f; }
.brd-tr-avatar.model-gemini { background: #4285f4; }
.brd-tr-head-info { flex: 1; min-width: 0; }
.brd-tr-head-info strong { font-size: 13px; color: var(--text1, var(--text)); }
.brd-tr-stance { margin-left: 6px; }
.brd-tr-conf {
  font-size: 10px;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 100px;
  font-weight: 600;
}
.brd-tr-conf.conf-low  { background: rgba(251, 146, 60, 0.18); color: #fdba74; }
.brd-tr-conf.conf-mid  { background: rgba(250, 204, 21, 0.18); color: #fde047; }
.brd-tr-conf.conf-high { background: rgba(74, 222, 128, 0.18); color: #86efac; }
.brd-tr-meta { font-size: 10.5px; color: var(--text3); margin-top: 2px; }
.brd-tr-body { font-size: 12.5px; color: var(--text2); line-height: 1.65; }

/* markdown-body 스타일 (모달 안 보고서 + transcript 본문) */
.brd-modal-dialog .markdown-body h1,
.brd-modal-dialog .markdown-body h2 { font-size: 15px; color: var(--text1, var(--text)); margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(167, 139, 250, 0.2); }
.brd-modal-dialog .markdown-body h3 { font-size: 13.5px; color: #c4b5fd; margin: 12px 0 5px; }
.brd-modal-dialog .markdown-body p  { margin: 6px 0; }
.brd-modal-dialog .markdown-body ul,
.brd-modal-dialog .markdown-body ol { padding-left: 22px; margin: 5px 0; }
.brd-modal-dialog .markdown-body strong { color: var(--text1, var(--text)); }
.brd-modal-dialog .markdown-body code {
  background: rgba(0, 0, 0, 0.3); padding: 1px 5px; border-radius: 3px;
  font-size: 12px; color: #fde047; font-family: ui-monospace, monospace;
}
.brd-modal-dialog .markdown-body pre {
  background: rgba(0, 0, 0, 0.35); padding: 10px 12px; border-radius: 6px;
  overflow-x: auto; font-size: 11.5px;
}
.brd-modal-dialog .markdown-body blockquote {
  border-left: 3px solid #a78bfa; padding-left: 12px;
  margin: 6px 0; color: var(--text3);
}
.brd-modal-dialog .markdown-body table {
  border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12px;
}
.brd-modal-dialog .markdown-body th,
.brd-modal-dialog .markdown-body td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 9px; text-align: left; vertical-align: top;
}
.brd-modal-dialog .markdown-body th {
  background: rgba(167, 139, 250, 0.12); color: #c4b5fd; font-weight: 700;
}
.brd-modal-dialog .markdown-body tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* v1.8.0 — 삭제 버튼 (모달 footer) */
.brd-delete-btn {
  margin-left: auto;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  background: rgba(248, 113, 113, 0.08) !important;
}
.brd-delete-btn:hover {
  background: rgba(248, 113, 113, 0.18) !important;
  border-color: rgba(248, 113, 113, 0.6) !important;
}

/* 보고서 markdown */
.markdown-body h2 { font-size: 15px; color: var(--text1); margin: 16px 0 8px; }
.markdown-body h3 { font-size: 13px; color: var(--text1); margin: 14px 0 6px; }
.markdown-body p { font-size: 12.5px; line-height: 1.7; color: var(--text2); margin: 8px 0; }
.markdown-body ul { padding-left: 20px; font-size: 12.5px; color: var(--text2); line-height: 1.6; }
.markdown-body li { margin: 3px 0; }
.markdown-body strong { color: var(--text1); }

/* ── v2.4.4: 댓글 영역 ── */
.brd-comments-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border, #2a2a2a);
}
.brd-comments-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text1);
}
.brd-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.brd-comments-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px dashed var(--border, #2a2a2a);
}
.brd-comment {
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.06);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
}
.brd-comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.brd-comment-author {
  color: var(--text1);
  font-weight: 700;
  font-size: 13px;
}
.brd-comment-date {
  color: var(--text3);
  font-size: 11px;
}
.brd-comment-del {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--text3);
  font-size: 11px;
  transition: color 0.15s, border-color 0.15s;
}
.brd-comment-del:hover {
  color: #f87171;
  border-color: #f87171;
}
.brd-comment-body {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
  word-break: break-word;
}
.brd-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
}
.brd-comment-row {
  display: flex;
  gap: 8px;
}
.brd-comment-row input {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid var(--border, #2a2a2a);
  background: var(--bg-input);
  color: var(--text1, #f1f5f9);
  font-family: inherit;
}
.brd-comment-row input:focus {
  outline: none;
  border-color: var(--accent, #4a9eff);
}
.brd-comment-form textarea {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid var(--border, #2a2a2a);
  background: var(--bg-input);
  color: var(--text1, #f1f5f9);
  font-family: inherit;
  resize: vertical;
}
.brd-comment-form textarea:focus {
  outline: none;
  border-color: var(--accent, #4a9eff);
}
.brd-comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.brd-comment-hint {
  font-size: 11px;
  color: var(--text3);
}

/* v2.4.3: 갤러리 본문 큰 [← AI 썰전 인덱스] CTA 버튼 */
.section-header-with-cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.brd-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.brd-back-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #0a0e1a;
  background: var(--accent, #4a9eff);
  border: 1px solid var(--accent, #4a9eff);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 2px 8px rgba(74, 158, 255, 0.25);
}
.brd-back-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(74, 158, 255, 0.4);
}

/* v2.4.5: 어드민 모드 토글 + 배너 */
.brd-admin-toggle {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  background: transparent;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.brd-admin-toggle:hover {
  color: #f87171;
  border-color: #f87171;
}
.brd-admin-toggle.brd-admin-on {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}
.brd-admin-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 16px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 8px;
  font-size: 13px;
  color: #fca5a5;
}
.brd-admin-banner-off {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 11px;
  background: transparent;
  border: 1px solid #f87171;
  color: #fca5a5;
  border-radius: 4px;
  cursor: pointer;
}
.brd-admin-banner-off:hover {
  background: #dc2626;
  color: #fff;
}

/* v2.4.5: 모달 안 배경 지식 표시 */
.brd-modal-bg {
  margin: 14px 0;
  padding: 8px 14px;
  background: rgba(245, 158, 11, 0.06);
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
}
.brd-modal-bg > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text2);
  padding: 4px 0;
}
.brd-modal-bg[open] > summary {
  margin-bottom: 8px;
  color: #fbbf24;
}
.brd-modal-bg-pre {
  font-family: inherit;
  font-size: 12px;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}