/* DocReview Workspace - 커스텀 스타일시트 (CSS 변수 기반 테마 시스템 · 소프트 화이트모드 · 고대비 딤모드) */
@import url('/static/css/utils.css');

/* ==================== [A] CSS 변수 & 테마 토큰 정의 (:root & data-theme) ==================== */
:root,
[data-theme="light"],
body:not(.theme-dim) {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* 배경 및 표면 색상 (소프트 화이트 모드) */
  --bg-page: #f3f5f8;
  --bg-header: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-muted: #f8fafc;
  --bg-surface-subtle: #f1f5f9;
  --bg-input: #ffffff;

  /* 테두리 색상 */
  --border-color: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-input: #cbd5e1;

  /* 텍스트 색상 (WCAG 2.1 AA 명도 대비 4.5:1 이상 충족) */
  --text-primary: #1e293b;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-placeholder: #64748b;

  /* 브랜드 주조색 (뮤트 네이비 블루 #3d5a80) */
  --primary-color: #3d5a80;
  --primary-hover: #2f4868;
  --primary-border: #354f70;
  --primary-contrast: #ffffff;
  --primary-soft-bg: #f0f4f8;
  --primary-soft-border: #d9e2ec;
  --primary-soft-text: #2b4460;
  --focus-ring-color: #3d5a80;

  /* 시맨틱 강조 색상 (WCAG AA 대비율 준수) */
  --accent-emerald-bg: #edf7f4;
  --accent-emerald-border: #c6e6dc;
  --accent-emerald-text: #1f5142;

  --accent-amber-bg: #fffbeb;
  --accent-amber-border: #fde68a;
  --accent-amber-text: #854d0e;

  --accent-rose-bg: #fff1f2;
  --accent-rose-border: #fecdd3;
  --accent-rose-text: #9f1239;

  --accent-blue-bg: #ebf3f9;
  --accent-blue-text: #1e4675;

  /* 스크롤바 */
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
}

/* 다크 / 딤 테마 토큰 (data-theme="dim" 및 .theme-dim 동시 호환) */
[data-theme="dim"],
body.theme-dim {
  --bg-page: #0f172a;
  --bg-header: #0b1120;
  --bg-surface: #1e293b;
  --bg-surface-muted: #0f172a;
  --bg-surface-subtle: #334155;
  --bg-input: #0b1120;

  --border-color: #334155;
  --border-strong: #475569;
  --border-input: #64748b;

  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #cbd5e1;
  --text-placeholder: #94a3b8;

  --primary-color: #4f46e5;
  --primary-hover: #4338ca;
  --primary-border: #6366f1;
  --primary-contrast: #ffffff;
  --primary-soft-bg: #312e81;
  --primary-soft-border: #6366f1;
  --primary-soft-text: #e0e7ff;
  --focus-ring-color: #818cf8;

  --accent-emerald-bg: #064e3b;
  --accent-emerald-border: #059669;
  --accent-emerald-text: #a7f3d0;

  --accent-amber-bg: #78350f;
  --accent-amber-border: #d97706;
  --accent-amber-text: #fef08a;

  --accent-rose-bg: #881337;
  --accent-rose-border: #e11d48;
  --accent-rose-text: #fecdd3;

  --accent-blue-bg: #1e3a8a;
  --accent-blue-text: #bfdbfe;

  --scrollbar-track: #0f172a;
  --scrollbar-thumb: #64748b;
  --scrollbar-thumb-hover: #94a3b8;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-sans);
}

.diff-container {
  font-family: var(--font-mono);
}

textarea:focus, input:focus, select:focus {
  outline: none;
}

/* 스크롤바 정돈 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #f1f5f9);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #cbd5e1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #94a3b8);
}

/* ==================== 차분한 소프트 화이트 모드 (Eye-Comfort Soft Light Theme) ==================== */
body:not(.theme-dim),
[data-theme="light"] body {
  background-color: var(--bg-page, #f3f5f8) !important;
  color: var(--text-primary, #1e293b) !important;
}

body:not(.theme-dim) .app-header {
  background-color: var(--bg-header, #ffffff) !important;
  border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
  color: var(--text-primary, #1e293b) !important;
}

body:not(.theme-dim) nav {
  background-color: var(--bg-header, #ffffff) !important;
  border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
}

body:not(.theme-dim) .nav-tab {
  color: var(--text-muted, #475569);
}

body:not(.theme-dim) .nav-tab:hover {
  background-color: var(--bg-surface-subtle, #f1f5f9);
  color: var(--text-primary, #1e293b);
}

body:not(.theme-dim) .nav-tab.active-tab {
  background-color: var(--primary-color, #3d5a80) !important; /* 차분한 뮤트 네이비 블루 */
  color: var(--primary-contrast, #ffffff) !important;
  box-shadow: 0 1px 2px rgba(30, 41, 59, 0.12);
}

/* 화이트모드 버튼 톤다운 (쨍한 보라/파랑/주황 -> 차분한 스틸블루 & 슬레이트) */
body:not(.theme-dim) .bg-indigo-600,
body:not(.theme-dim) .bg-violet-600,
body:not(.theme-dim) .bg-purple-600 {
  background-color: var(--primary-color, #3d5a80) !important;
  border-color: var(--primary-border, #354f70) !important;
}

body:not(.theme-dim) .hover\:bg-indigo-700:hover,
body:not(.theme-dim) .hover\:bg-violet-700:hover,
body:not(.theme-dim) .hover\:bg-purple-700:hover {
  background-color: var(--primary-hover, #2f4868) !important;
}

body:not(.theme-dim) .bg-amber-600 {
  background-color: #475569 !important;
}
body:not(.theme-dim) .hover\:bg-amber-700:hover {
  background-color: #334155 !important;
}

/* 화이트모드 배지 & 연한 배경 톤다운 */
body:not(.theme-dim) .bg-indigo-50,
body:not(.theme-dim) .bg-indigo-50\/70,
body:not(.theme-dim) .bg-violet-50,
body:not(.theme-dim) .bg-purple-50 {
  background-color: var(--primary-soft-bg, #f0f4f8) !important;
  border-color: var(--primary-soft-border, #d9e2ec) !important;
}

body:not(.theme-dim) .bg-indigo-100 {
  background-color: var(--border-color, #e2e8f0) !important;
}

body:not(.theme-dim) .text-indigo-600,
body:not(.theme-dim) .text-indigo-700,
body:not(.theme-dim) .text-violet-600,
body:not(.theme-dim) .text-violet-700,
body:not(.theme-dim) .text-purple-700 {
  color: var(--primary-soft-text, #2b4460) !important;
}

body:not(.theme-dim) .border-indigo-200,
body:not(.theme-dim) .border-indigo-300,
body:not(.theme-dim) .border-violet-200,
body:not(.theme-dim) .border-purple-200 {
  border-color: var(--border-strong, #cbd5e1) !important;
}

body:not(.theme-dim) .bg-emerald-50,
body:not(.theme-dim) .bg-emerald-100 {
  background-color: var(--accent-emerald-bg, #edf7f4) !important;
  border-color: var(--accent-emerald-border, #c6e6dc) !important;
}

body:not(.theme-dim) .text-emerald-700,
body:not(.theme-dim) .text-emerald-800 {
  color: var(--accent-emerald-text, #1f5142) !important;
}

body:not(.theme-dim) .bg-blue-100 {
  background-color: var(--accent-blue-bg, #ebf3f9) !important;
}
body:not(.theme-dim) .text-blue-800 {
  color: var(--accent-blue-text, #1e4675) !important;
}

/* WCAG AA 명도 대비 보강: 밝은 배경에서 흐릿한 슬레이트 텍스트 가독성 향상 */
body:not(.theme-dim) .text-slate-400 {
  color: #526277 !important;
}
body:not(.theme-dim) .text-slate-500 {
  color: #435368 !important;
}

/* 모바일 토글 버튼 활성 상태 (화이트모드) */
body:not(.theme-dim) #btn-mobile-toggle.mobile-active-btn {
  background-color: var(--border-color, #e2e8f0) !important;
  border-color: #94a3b8 !important;
  color: var(--text-primary, #1e293b) !important;
  font-weight: 700 !important;
}

/* ==================== 딤 / 다크 모드 (High-Contrast Eye-comfort Dim Theme) ==================== */
[data-theme="dim"] body,
body.theme-dim {
  background-color: var(--bg-page, #0f172a) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

body.theme-dim header,
body.theme-dim .app-header {
  background-color: var(--bg-header, #0b1120) !important;
  border-bottom: 1px solid var(--border-color, #334155) !important;
  color: var(--text-primary, #f8fafc) !important;
}

body.theme-dim .app-logo-box {
  background-color: var(--bg-surface, #1e293b) !important;
  border-color: var(--border-color, #334155) !important;
}

body.theme-dim .header-action-btn,
body.theme-dim #system-badge {
  background-color: var(--bg-surface, #1e293b) !important;
  border-color: var(--border-strong, #475569) !important;
  color: var(--text-secondary, #e2e8f0) !important;
}

body.theme-dim nav {
  background-color: var(--bg-surface, #1e293b) !important;
  border-color: var(--border-color, #334155) !important;
}

body.theme-dim nav .nav-tab {
  color: var(--text-muted, #cbd5e1) !important;
  font-weight: 600 !important;
}
body.theme-dim nav .nav-tab:hover {
  background-color: var(--bg-surface-subtle, #334155) !important;
  color: #ffffff !important;
}
body.theme-dim nav .nav-tab.active-tab {
  background-color: var(--primary-color, #4f46e5) !important;
  color: var(--primary-contrast, #ffffff) !important;
  font-weight: 700 !important;
}

body.theme-dim .bg-white {
  background-color: var(--bg-surface, #1e293b) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: var(--border-strong, #475569) !important;
}

body.theme-dim .bg-slate-50,
body.theme-dim .bg-slate-50\/50,
body.theme-dim .bg-slate-50\/70,
body.theme-dim .bg-slate-50\/80,
body.theme-dim .bg-slate-100 {
  background-color: var(--bg-surface-muted, #0f172a) !important;
  border-color: var(--border-strong, #475569) !important;
}

body.theme-dim .text-slate-900,
body.theme-dim .text-slate-800 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.theme-dim .text-slate-700 {
  color: var(--text-primary, #f8fafc) !important;
  font-weight: 600 !important;
}

body.theme-dim .text-slate-600 {
  color: var(--text-secondary, #e2e8f0) !important;
  font-weight: 500 !important;
}

body.theme-dim .text-slate-500,
body.theme-dim .text-slate-400 {
  color: var(--text-muted, #cbd5e1) !important;
  font-weight: 500 !important;
}

body.theme-dim .border-slate-100,
body.theme-dim .border-slate-200,
body.theme-dim .border-slate-300 {
  border-color: var(--border-strong, #475569) !important;
}

body.theme-dim input,
body.theme-dim textarea,
body.theme-dim select {
  background-color: var(--bg-input, #0b1120) !important;
  color: #ffffff !important;
  border-color: var(--border-input, #64748b) !important;
  font-weight: 500 !important;
}

body.theme-dim input::placeholder,
body.theme-dim textarea::placeholder {
  color: var(--text-placeholder, #94a3b8) !important;
  font-weight: 400 !important;
}

body.theme-dim .divide-slate-100 > * + * {
  border-color: var(--border-color, #334155) !important;
}

body.theme-dim thead.bg-slate-50 {
  background-color: var(--bg-surface, #1e293b) !important;
}
body.theme-dim thead th {
  color: #ffffff !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--border-strong, #475569) !important;
}

body.theme-dim tr:hover {
  background-color: #273549 !important;
}

body.theme-dim .bg-indigo-50,
body.theme-dim .bg-indigo-50\/70 {
  background-color: var(--primary-soft-bg, #312e81) !important;
  color: var(--primary-soft-text, #e0e7ff) !important;
  border-color: var(--primary-soft-border, #6366f1) !important;
}
body.theme-dim .text-indigo-700,
body.theme-dim .text-indigo-600 {
  color: #a5b4fc !important;
  font-weight: 700 !important;
}
body.theme-dim .text-indigo-900 {
  color: #e0e7ff !important;
  font-weight: 700 !important;
}
body.theme-dim .bg-emerald-50,
body.theme-dim .bg-emerald-100 {
  background-color: var(--accent-emerald-bg, #064e3b) !important;
  color: var(--accent-emerald-text, #a7f3d0) !important;
  font-weight: 700 !important;
}
body.theme-dim .text-emerald-800,
body.theme-dim .text-emerald-700 {
  color: #6ee7b7 !important;
  font-weight: 700 !important;
}
body.theme-dim .bg-amber-50,
body.theme-dim .bg-amber-100 {
  background-color: var(--accent-amber-bg, #78350f) !important;
  color: var(--accent-amber-text, #fef08a) !important;
  font-weight: 700 !important;
}
body.theme-dim .text-amber-800,
body.theme-dim .text-amber-700 {
  color: #fde047 !important;
  font-weight: 700 !important;
}
body.theme-dim .bg-rose-50,
body.theme-dim .bg-rose-100 {
  background-color: var(--accent-rose-bg, #881337) !important;
  color: var(--accent-rose-text, #fecdd3) !important;
  font-weight: 700 !important;
}
body.theme-dim .text-rose-600,
body.theme-dim .text-rose-700 {
  color: #fda4af !important;
  font-weight: 700 !important;
}

body.theme-dim button.bg-slate-100 {
  background-color: #334155 !important;
  color: #f8fafc !important;
  border-color: #64748b !important;
}
body.theme-dim button.bg-slate-100:hover {
  background-color: #475569 !important;
}

body.theme-dim ::-webkit-scrollbar-track {
  background: var(--scrollbar-track, #0f172a);
}
body.theme-dim ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #64748b);
}
body.theme-dim ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #94a3b8);
}

/* 딤 모드 모달 */
body.theme-dim #modal-send-email > div,
body.theme-dim #modal-bulk-case > div,
body.theme-dim #modal-upload-case > div,
body.theme-dim #modal-create-project > div,
body.theme-dim #modal-edit-project > div,
body.theme-dim #modal-active-jobs > div,
body.theme-dim #modal-category-settings > div,
body.theme-dim #modal-master-guides > div,
body.theme-dim #modal-case-search > div,
body.theme-dim #modal-company-analysis > div,
body.theme-dim #modal-batch-progress > div,
body.theme-dim #modal-lightrag-build > div,
body.theme-dim #modal-lightrag-snapshots > div,
body.theme-dim #modal-logs > div {
  background-color: var(--bg-surface, #1e293b) !important;
  border: 1px solid var(--border-strong, #475569) !important;
  color: var(--text-primary, #f8fafc) !important;
}

body.theme-dim .fact-cat-btn {
  background-color: var(--bg-surface, #1e293b) !important;
  color: var(--text-muted, #cbd5e1) !important;
  border-color: var(--border-strong, #475569) !important;
  font-weight: 600 !important;
}
body.theme-dim .fact-cat-btn:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}
body.theme-dim .fact-cat-btn.active-cat {
  background-color: #3730a3 !important;
  color: #c7d2fe !important;
  border-color: #818cf8 !important;
  font-weight: 700 !important;
}

/* 펄스 애니메이션 */
@keyframes pulse-fast {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-pulse-fast {
  animation: pulse-fast 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==================== 모바일 최적화 및 모바일 뷰 전환 모드 (기존 규칙 유지) ==================== */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Fact 목록 기본(데스크톱) 표시 상태 */
.facts-mobile-cards {
  display: none;
}
.facts-desktop-table {
  display: block;
}

/* 1. 모바일 뷰 패딩 최적화 */
body.mobile-mode main {
  padding: 0.75rem !important;
}

/* 2. 실제 모바일/태블릿 뷰포트(@media max-width: 1023px) */
@media (max-width: 1023px) {
  .facts-mobile-cards {
    display: block !important;
  }
  .facts-desktop-table {
    display: none !important;
  }

  #section-nav-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 0.375rem !important;
    padding-bottom: 0.25rem !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #section-nav-list::-webkit-scrollbar {
    display: none !important;
  }

  .sec-nav-btn {
    width: auto !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid #d9e2ec !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    background-color: #f8fafc;
  }

  .sec-nav-btn.active-sec {
    background-color: #3d5a80 !important;
    color: #ffffff !important;
    border-color: #3d5a80 !important;
    font-weight: 700 !important;
  }

  body.theme-dim .sec-nav-btn {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
  }

  body.theme-dim .sec-nav-btn.active-sec {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
  }

  #tab2-mobile-subnav {
    display: flex !important;
  }
}

/* 3. PC에서 body.mobile-mode 토글 활성화 시에도 동일하게 모바일 레이아웃 강제 적용 */
body.mobile-mode .facts-mobile-cards {
  display: block !important;
}
body.mobile-mode .facts-desktop-table {
  display: none !important;
}

body.mobile-mode #section-nav-list {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  gap: 0.375rem !important;
  padding-bottom: 0.25rem !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
body.mobile-mode #section-nav-list::-webkit-scrollbar {
  display: none !important;
}

body.mobile-mode .sec-nav-btn {
  width: auto !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  padding: 0.4rem 0.75rem !important;
  border: 1px solid #d9e2ec !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  background-color: #f8fafc;
}

body.mobile-mode .sec-nav-btn.active-sec {
  background-color: #3d5a80 !important;
  color: #ffffff !important;
  border-color: #3d5a80 !important;
  font-weight: 700 !important;
}

body.theme-dim.mobile-mode .sec-nav-btn {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

body.theme-dim.mobile-mode .sec-nav-btn.active-sec {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
}

body.mobile-mode #tab2-mobile-subnav {
  display: flex !important;
}

/* 4. 데스크톱 뷰 모드 */
body.desktop-mode .facts-mobile-cards {
  display: none !important;
}
body.desktop-mode .facts-desktop-table {
  display: block !important;
}

/* 5. 모달 모바일 반응형 패딩 및 최대 높이 */
@media (max-width: 640px) {
  #modal-company-analysis > div,
  #modal-batch-progress > div,
  #modal-send-email > div,
  #modal-bulk-case > div,
  #modal-upload-case > div,
  #modal-create-project > div,
  #modal-edit-project > div,
  #modal-active-jobs > div,
  #modal-category-settings > div,
  #modal-logs > div,
  #modal-case-search > div,
  #modal-case-viewer > div,
  #modal-lightrag-build > div,
  #modal-lightrag-snapshots > div,
  #modal-master-guides > div {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0.25rem !important;
    padding: 1rem !important;
    max-height: 92vh !important;
    border-radius: 1rem !important;
  }
}

/* 모바일 탭2 서브 네비게이션 테마 대응 */
body.theme-dim #tab2-mobile-subnav {
  background-color: #1e293b !important;
}
body.theme-dim #tab2-btn-mob-list.bg-white,
body.theme-dim #tab2-btn-mob-detail.bg-white {
  background-color: #3730a3 !important;
  color: #ffffff !important;
}