@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ==========================================
   디자인 토큰 (장반장 공통 브랜드 시스템)
   - 미니멀 그레이스케일 베이스 + 포인트 컬러 하나(블루)
   - 빨강/주황/초록은 브랜드 컬러가 아니라 AI 진단 결과의
     위험도 표시(위험/주의/안전) 전용 의미 색상이므로 그대로 둠
   ========================================== */
:root {
  --jbj-ink: #0f172a;
  --jbj-primary: #1e293b;
  --jbj-primary-hover: #0f172a;
  --jbj-accent: #16a34a;        /* 포인트 컬러 = 그린 */
  --jbj-accent-hover: #15803d;
  --jbj-accent-soft: #f0fdf4;
  --jbj-bg-light: #f8fafc;
  --jbj-card-bg: #ffffff;
  --jbj-border: #e2e8f0;
  --jbj-text-main: #334155;
  --jbj-text-muted: #64748b;
  --jbj-font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;

  --bs-primary: var(--jbj-accent);
  --bs-primary-rgb: 22, 163, 74;
  --bs-link-color: var(--jbj-accent);
  --bs-link-color-rgb: 22, 163, 74;
  --bs-link-hover-color: var(--jbj-accent-hover);
}

body {
  font-family: var(--jbj-font);
  background-color: var(--jbj-bg-light);
  color: var(--jbj-text-main);
  letter-spacing: -0.02em;
  word-break: keep-all;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.btn-primary {
  --bs-btn-bg: var(--jbj-accent);
  --bs-btn-border-color: var(--jbj-accent);
  --bs-btn-hover-bg: var(--jbj-accent-hover);
  --bs-btn-hover-border-color: var(--jbj-accent-hover);
  --bs-btn-active-bg: var(--jbj-accent-hover);
  --bs-btn-active-border-color: var(--jbj-accent-hover);
}

/* 라이트 모드: 흰 배경 + 하단 보더로 포털 내비게이션과 톤을 맞춤 */
.jbj-navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--jbj-border);
}

.jbj-navbar .navbar-brand .jbj-brand-text,
.jbj-navbar .btn-outline-light {
  color: var(--jbj-ink) !important;
  border-color: var(--jbj-border) !important;
}

/* 브랜드 배지(장반장)는 항상 accent 배경 + 흰 글씨 — 위 규칙에 절대 딸려오지 않도록 별도 지정 */
.jbj-brand-badge {
  color: #ffffff !important;
}

.jbj-navbar .btn-outline-light:hover {
  background-color: var(--jbj-bg-light) !important;
  border-color: var(--jbj-border) !important;
}

.jbj-brand-badge {
  background-color: var(--jbj-accent);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3em 0.6em;
  border-radius: 6px;
}

.jbj-card {
  background-color: var(--jbj-card-bg);
  border: 1px solid var(--jbj-border);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.btn-jbj-primary {
  background-color: var(--jbj-accent);
  color: #ffffff;
  border: none;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-jbj-primary:hover {
  background-color: var(--jbj-accent-hover);
  color: #ffffff;
}

/* ==========================================
   마크다운 / 리포트 뷰어 기본 라이트모드 스타일
   ========================================== */
.jbj-markdown-view h1,
.jbj-markdown-view h2,
.jbj-markdown-view h3 {
  font-weight: 700;
  color: var(--jbj-ink);
  padding-left: 10px;
  border-left: 4px solid var(--jbj-accent);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.jbj-markdown-view strong {
  background: linear-gradient(to top, rgba(254, 240, 138, 0.7) 40%, transparent 40%);
  padding: 0 2px;
}

.jbj-markdown-view blockquote {
  background-color: #f1f5f9;
  border-left: 4px solid var(--jbj-primary);
  padding: 12px 16px;
  margin: 1rem 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
}

/* 원문 입력상자 (결과페이지 및 인쇄 전용) */
.print-source-box {
  background-color: #f8fafc;
  border: 1px solid var(--jbj-border);
}

.print-source-title {
  font-weight: 700;
  color: var(--jbj-primary);
}

.print-source-content {
  color: var(--jbj-text-main);
}


/* ==========================================
   다크모드 완벽 대응 스타일
   ========================================== */
body.bg-dark {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

body.bg-dark .jbj-navbar {
  background-color: #0f172a !important;
  border-bottom: 1px solid #1e293b;
}

body.bg-dark .jbj-navbar .navbar-brand .jbj-brand-text,
body.bg-dark .jbj-navbar .btn-outline-light {
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.bg-dark .jbj-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body.bg-dark .form-control {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* 1. 다크모드 원문 출력 상자 보정 */
body.bg-dark .print-source-box {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

body.bg-dark .print-source-title {
  color: #f1f5f9 !important;
}

body.bg-dark .print-source-content {
  color: #cbd5e1 !important;
}

/* 2. 다크모드 마크다운 타이틀 및 본문 텍스트 보정 */
body.bg-dark .jbj-markdown-view {
  color: #e2e8f0 !important;
}

body.bg-dark .jbj-markdown-view h1,
body.bg-dark .jbj-markdown-view h2,
body.bg-dark .jbj-markdown-view h3,
body.bg-dark .jbj-markdown-view h4 {
  color: #4ade80 !important;
  border-left-color: #4ade80 !important;
}

/* 3. 다크모드 인용구 및 강조 형광펜 보정 */
body.bg-dark .jbj-markdown-view blockquote {
  background-color: #0f172a !important;
  border-left-color: #4ade80 !important;
  color: #cbd5e1 !important;
}

body.bg-dark .jbj-markdown-view strong {
  background: linear-gradient(to top, rgba(22, 163, 74, 0.35) 40%, transparent 40%);
  color: #ffffff !important;
}

/* 4. 다크모드 접이식 영역 보정 */
body.bg-dark #rewriteCollapseArea .card-body {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

/* 5. 다크모드 테이블 UI 보정 */
body.bg-dark .table {
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

body.bg-dark .table-light {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

/* ==========================================
   다크모드 전용 시인성 개선 스타일 (Dark Mode Adjustments)
   ========================================== */

/* 1. 다크모드일 때 마크다운 결과물 및 일반 글자색 밝게 변경 */
#bodyTheme.bg-dark,
#bodyTheme.bg-dark #resultContent,
#bodyTheme.bg-dark .jbj-markdown-view,
#bodyTheme.bg-dark .card-body,
#bodyTheme.bg-dark p,
#bodyTheme.bg-dark li,
#bodyTheme.bg-dark span {
  color: #e2e8f0 !important; /* 가독성 높은 연한 회색 */
}

/* 2. 다크모드 카드 및 박스 배경 어둡게 조정 */
#bodyTheme.bg-dark .jbj-card,
#bodyTheme.bg-dark .card,
#bodyTheme.bg-dark .modal-content {
  background-color: #1e293b !important; /* 슬레이트 다크 배경 */
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* 3. 다크모드 원고 원문 상자 (입력된 광고 원문 박스) */
#bodyTheme.bg-dark .print-source-box,
#bodyTheme.bg-dark #printSourceText {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
  border-left-color: #4ade80  !important;
}

#bodyTheme.bg-dark .print-source-title {
  color: #94a3b8 !important;
}

/* 4. 다크모드 표(Table) 스타일 조정 */
#bodyTheme.bg-dark table,
#bodyTheme.bg-dark th,
#bodyTheme.bg-dark td {
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

#bodyTheme.bg-dark thead th {
  background-color: #334155 !important;
  color: #f8fafc !important;
}

#bodyTheme.bg-dark tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 5. 다크모드 회색 보조 텍스트 (text-muted 등) 가독성 향상 */
#bodyTheme.bg-dark .text-muted,
#bodyTheme.bg-dark .text-secondary {
  color: #94a3b8 !important;
}

/* 6. 다크모드 폼 입력창 (textarea, input) */
#bodyTheme.bg-dark .form-control {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

#bodyTheme.bg-dark .form-control::placeholder {
  color: #64748b !important;
}

/* ==========================================
   인쇄 / PDF 출력 전용 설정 (index.html 최적화 반영)
   ========================================== */
@media print {
  /* 네비바, 푸터, 버튼, 링크 및 index.html 입력창(#inputCard) 인쇄 시 숨김 */
  .no-print, nav, footer, button, a, #inputCard {
    display: none !important;
  }

  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html, body {
    background-color: #ffffff !important;
    color: #000000 !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .jbj-card, #resultContent, .jbj-markdown-view, #rewriteCollapseArea, #resultCard {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    padding: 0 !important;
  }

  .print-source-box {
    display: block !important;
    border: 1px solid #94a3b8 !important;
    background-color: #f8fafc !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    border-radius: 6px;
    page-break-inside: avoid;
  }

  .print-source-title {
    font-weight: 700;
    font-size: 11pt;
    color: #1e293b !important;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 6px;
    margin-bottom: 8px;
  }

  .print-source-content {
    font-size: 9.5pt;
    color: #334155 !important;
    white-space: pre-wrap;
    line-height: 1.5;
  }

  h1, h2, h3, .alert, table, tr, blockquote {
    page-break-inside: avoid;
  }
  /* 인쇄 시 details 박스 경계선과 배경을 보기 쉽게 조정 */
  details {
    border: 1px solid #ccc !important;
    background-color: #ffffff !important;
    page-break-inside: avoid;
  }

  /* 인쇄 시 안내 문구 스타일 정돈 */
  summary {
    font-weight: bold;
    color: #1e293b !important;
    list-style: none !important; /* 브라우저 기본 화살표 제거 */
  }

  summary::-webkit-details-marker {
    display: none !important; /* 크롬/사파리 화살표 제거 */
  }
}