/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Design tokens: 모던 AI 다크 ===
   variant1 (redesign_variants/variant1.html) 계승: #0A0B0D 배경, #C6FF3D 라임 액센트,
   Pretendard(본문) + JetBrains Mono(인용번호/소스배지/타임스탬프/날짜/UI 크롬).
   레거시 변수명(--accent-500, --btn-bg 등)은 admin/ontology/guide 페이지가 참조하므로
   그대로 유지하되 다크 값으로 매핑한다. */
:root {
  /* Background layers */
  --bg: #0A0B0D;
  --bg-mesh-a: rgba(198, 255, 61, 0.07);
  --bg-mesh-b: rgba(127, 179, 255, 0.05);

  --surface: #131519;
  --surface-2: #181B20;
  --surface-subtle: #15171C;
  --surface-soft: #1B1E24;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text hierarchy */
  --text: #EEEFF1;
  --text-secondary: #C7CBD1;
  --text-muted: #9296A0;
  /* #5B5F69는 surface 위 2.7:1로 WCAG AA(4.5:1) 미달이었다 — 날짜·출처 메타처럼
     신뢰 판단에 쓰이는 정보가 안 읽혔다. #808593은 surface 4.96:1 / surface-2 4.68:1. */
  --text-faint: #808593;

  /* Accent (라임) — 소면적 강조 전용 */
  --accent: #C6FF3D;
  --accent-dim: rgba(198, 255, 61, 0.14);
  --accent-line: rgba(198, 255, 61, 0.35);
  --accent-500: var(--accent);
  --accent-600: #A6E62A;
  --focus-ring: rgba(198, 255, 61, 0.28);

  /* Source-type colors */
  --notion: #7FB3FF;
  --slack: #E39CFF;
  --github: #7BE0C0;
  --gdrive: #FFCE7A;
  --gdrive-audio: #FF9A7A;
  --domain-reference: #A0D6FF;

  /* Status colors (다크 대비 AA) */
  --success: #4ADE80;
  --success-dim: rgba(74, 222, 128, 0.12);
  --success-line: rgba(74, 222, 128, 0.35);

  --warning: #FBBF24;
  --warning-dim: rgba(251, 191, 36, 0.12);
  --warning-line: rgba(251, 191, 36, 0.35);

  --danger: #F87171;
  --danger-dim: rgba(248, 113, 113, 0.12);
  --danger-line: rgba(248, 113, 113, 0.35);

  /* Buttons (legacy names kept for admin/login) */
  --btn-bg: var(--accent);
  --btn-hover: #D9FF6E;
  --btn-text: #0A0B0D;

  --radius-sm: 10px;
  --radius: 14px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);

  /* JetBrains Mono에는 한글 글리프가 없다 — "답변"·"더 보기" 같은 한글 라벨이
     OS 폴백(굴림 계열)으로 떨어지므로 monospace 앞에 Pretendard를 세운다. */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    'Pretendard Variable', 'Pretendard', monospace;
  --sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 다크 UI이므로 네이티브 컨트롤(스크롤바·셀렉트·폼)도 다크로 렌더시킨다 */
  color-scheme: dark;
}

body {
  font-family: var(--sans);
  min-height: 100vh;
  color: var(--text);
  line-height: 1.6;
  /* 한국어는 어절(공백) 단위로 줄바꿈해야 한다. CSS 기본값은 음절 아무 데서나
     꺾어 "글로비/스"처럼 단어가 절단된다. keep-all은 공백 없는 긴 토큰(URL·영문
     식별자)을 못 꺾으므로 그런 자리에는 overflow-wrap을 반드시 병기한다. */
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 15% -8%, var(--bg-mesh-a), transparent 60%),
    radial-gradient(760px 460px at 88% -12%, var(--bg-mesh-b), transparent 60%),
    var(--bg);
  position: relative;
}

/* 다크 테마 스크롤바 (기본 흰 트랙 제거) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); }

/* 은은한 격자 텍스처 — 상단부에서만 보이도록 마스킹 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0, 0, 0, 0.9), transparent 75%);
  z-index: 0;
}

/* === Layout === */
.app {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(16px, 2vw, 28px);
}

.main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: grid;
  gap: 2px;
}

.brand-logo {
  height: 28px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  display: block;
  /* 남색 워드마크가 다크 배경에서도 또렷하게 보이도록 밝기/채도 보정 */
  filter: brightness(1.85) saturate(1.12);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  /* 아이콘만 있는 버튼이라 히트 영역이 36px에 그쳤다 — 모바일 터치 최소 권장치(44px)까지 넓힌다 */
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.top-link-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.reingest-btn {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.reingest-btn:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.reingest-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 헤더 컴팩트 아이콘 버튼: 사용 가이드/온톨로지 맵/소스 관리/검색으로 돌아가기/새로고침 */
.icon-btn {
  /* 아이콘만 있는 버튼은 스스로 가운데 정렬을 책임진다. 예전에는 부모 버튼이
     inline-flex인 경우(.top-link-btn)에만 가운데 왔고, 아닌 경우(.reingest-btn)
     SVG가 inline이라 baseline에 앉아 descender 공간만큼 위로 쏠렸다(실측 5.4px). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
}

.icon-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.top-link-btn.icon-btn:hover,
.reingest-btn.icon-btn:hover {
  border-color: var(--accent-line);
  color: var(--accent);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#history-toggle-btn[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent);
}

.page-title {
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.page-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.content {
  min-width: 0;
}

/* === Buttons === */
#submit-btn {
  padding: 12px 20px;
  min-height: 50px;
  flex: 0 0 auto;
  border: none;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 8px 20px -8px rgba(198, 255, 61, 0.4);
}

#submit-btn:hover {
  background: var(--btn-hover);
  box-shadow: 0 10px 26px -8px rgba(198, 255, 61, 0.55);
  transform: translateY(-1px);
}

#submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 유틸리티 버튼(초기화/인용 펼치기·접기/인용 모드 토글/관리화면 CRUD)은
   아이콘+텍스트 조합으로 통일한다 — 아이콘은 .btn-icon, 라벨은 .btn-label. */
.evidence-toggle-btn,
.citation-mode-btn,
.reset-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.btn-icon svg {
  display: block;
}

.evidence-toggle-btn {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.evidence-toggle-btn:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.evidence-toggle-btn .btn-icon {
  transition: transform 0.15s ease;
}

.evidence-toggle-btn[aria-expanded="true"] .btn-icon {
  transform: rotate(180deg);
}

.citation-mode-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.citation-mode-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.citation-mode-btn[aria-pressed="true"] {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* 답변 길이 세그먼트 컨트롤 (짧게/기본/길게) */
.length-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 3px;
}

.length-toggle-btn {
  appearance: none;
  border: none;
  border-radius: 7px;
  background: transparent;
  padding: 5px 10px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.length-toggle-btn:hover {
  color: var(--text);
}

.length-toggle-btn.is-active {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}

/* "쉽게" 답변 난이도 토글 — evidence/citation 유틸 버튼과 동일한 아이콘+라벨 조합 */
.plain-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.plain-toggle-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.plain-toggle-btn.is-active {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--accent);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* === Search === */
.search-box {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 14px;
}

/* 히어로 카피 없이 검색바가 화면 상단 중앙 무대가 되도록 여백만 확보 */
.search-box--top {
  /* 검색 전에는 콘텐츠가 화면 위 1/3에만 몰려 아래 절반이 비었다.
     시각 중심을 내리되 작은 화면에서 과하지 않게 상한을 둔다. */
  margin-top: min(13vh, 120px);
}

/* 검색 후에는 답변 공간이 우선이라 상단으로 붙인다 */
.search-box--top.searched {
  margin-top: 20px;
}

.search-box > * {
  min-width: 0;
}

.search-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 20px 50px -24px rgba(198, 255, 61, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box.searched .search-input-wrap {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.search-box.searched input {
  background: transparent;
}

.search-input-wrap:hover {
  border-color: var(--border-strong);
}

.search-input-wrap:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 3px var(--accent-dim), 0 24px 60px -20px rgba(198, 255, 61, 0.18);
}

.search-icon {
  display: inline-flex;
  color: var(--text-muted);
}

.search-box input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 0;
  padding: 12px 0;
  font-size: 0.98rem;
  color: var(--text);
  background: transparent;
}

.search-box input:focus {
  outline: none;
}

.search-box input::placeholder {
  color: var(--text-faint);
}

/* Force transparent autofill background in Chromium/WebKit */
.search-box input:-webkit-autofill,
.search-box input:-webkit-autofill:hover,
.search-box input:-webkit-autofill:focus,
.search-box input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-out 0s;
}

.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto 14px;
}

.filters-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.filters-toggle-btn:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.filters-toggle-btn[aria-expanded="true"] .filters-toggle-caret {
  transform: rotate(180deg);
}

.filters-toggle-caret {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.chip-key {
  color: var(--text-faint);
  font-weight: 700;
}

.chip-value {
  color: var(--text-secondary);
  font-weight: 600;
}

/* === Loading === */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  color: var(--text-muted);
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none !important;
}

.spinner--sm {
  width: 13px;
  height: 13px;
  border-width: 1.5px;
  flex-shrink: 0;
}

.section-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.84rem;
  padding: 6px 0;
}

/* === Status Text === */
.status-text {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  transition: opacity 0.4s ease;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-line);
  animation: statusPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.status-label {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  animation: statusFadeIn 0.3s ease;
}

/* 지속되는 "라이브" 표시용 펄스 — 콘텐츠 진입 애니메이션이 아니므로 opacity 사용 가능 */
@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

/* 진입 애니메이션은 transform만 사용 — opacity 키프레임으로 콘텐츠를 숨기지 않는다 */
@keyframes statusFadeIn {
  from { transform: translateY(4px); }
  to { transform: translateY(0); }
}

/* === Source Card Strip === */
.source-strip {
  display: none; /* 출처는 오른쪽 근거 컬럼에서 상시 노출 — 상단 가로 스트립 중복 제거 */
  gap: 8px;
  padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  margin-bottom: 0;
}

.source-card {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 220px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  animation: cardSlideIn 0.3s ease forwards;
  text-decoration: none;
  display: block;
}

.source-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.source-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.source-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-card-date {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-faint);
  white-space: nowrap;
}

/* 진입 애니메이션: transform만 사용 (opacity 키프레임 금지) — 카드는 항상 완전히 보이는 상태로 슬라이드된다 */
@keyframes cardSlideIn {
  from { transform: translateX(-12px); }
  to { transform: translateX(0); }
}

/* === Skeleton Shimmer === */
.skeleton-line {
  height: 1rem;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-soft) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-line:nth-child(2) { width: 85%; }
.skeleton-line:nth-child(3) { width: 70%; }
.skeleton-line:nth-child(4) { width: 60%; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 근거 strip 스켈레톤 — 검색 시작~첫 근거 도착 사이의 자리 표시.
   실제 .source-card 치수를 본떠 로드 완료 시 레이아웃 점프를 없앤다. */
.source-card-skel {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 220px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.skel-bar {
  height: 0.75rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-soft) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.source-card-skel .skel-bar + .skel-bar {
  margin-top: 8px;
  width: 80%;
}

/* '지금까지의 결론' 로딩 자리 — 결론 문단 레이아웃(제목줄+본문 2줄)을 본뜬다 */
.stance-skel .skel-bar { height: 0.9rem; }
.stance-skel .skel-bar + .skel-bar { margin-top: 10px; }
.stance-skel .skel-bar:nth-child(2) { width: 92%; }
.stance-skel .skel-bar:nth-child(3) { width: 78%; }

/* 스켈레톤→콘텐츠 해제: blur+opacity 크로스페이드 (buzz t-skel 패턴) —
   완료 순간의 팝인을 없앤다. */
.content-reveal {
  animation: contentReveal 0.4s ease both;
}

@keyframes contentReveal {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

/* AI 생성 답변 배지 — 사람 저작 근거 카드와의 대비를 답변 쪽에 명시한다 */
.ai-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skel-bar {
    animation: none;
  }
  .source-card,
  .content-reveal {
    animation: none;
  }
}

/* === Results === */
/* 진입 애니메이션: transform만 사용 — visibility는 .hidden 토글이 별도로 담당한다 */
.results {
  animation: resultsRise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes resultsRise {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}

.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.results-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.toolbar-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.toolbar-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.search-layout.evidence-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.search-layout.evidence-collapsed .evidence-column {
  display: none;
}

.answer-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 0;
}

.answer-section:last-child {
  margin-bottom: 0;
}

.answer-section h2,
.evidence-header h2 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  /* 0.1em은 라틴 대문자 라벨 기준값 — 한글("답변"·"인사이트")은 자간을 벌리면
     낱자가 흩어져 읽기 어려워진다. mono 스택에 Pretendard가 들어오면서
     한글 라벨이 제대로 렌더되므로 자간도 함께 줄인다. */
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.answer-section h2::before,
.evidence-header h2::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

/* 한글 본문 조판 — 크기·행간·폭은 한 세트다. 따로 만지면 어긋난다.
   17px: KRDS body-medium 값이자 한글 판독 하한(16px) 위. 15.2px였을 때는 하한 미달.
   1.65: 17×1.65=28.05px로 이전 절대 행간(15.2×1.82=27.7px)을 유지하면서
         한글 권장 밴드(1.5~1.75) 안으로 들어온다. 글자만 커지고 리듬은 그대로.
   52rem: 17px 기준 한 줄 ~49자 — 한글 권장 40~60자의 정중앙. 그래서 폭은 손대지 않는다. */
.answer-text {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 52rem;
  overflow-wrap: break-word; /* keep-all이 못 꺾는 긴 URL·식별자 방어 */
}

/* 자식에도 min-width:0을 내려야 한다 — 표의 min-content가 그리드 트랙을 밀어내
   390px에서 페이지 전체가 가로로 밀리던(scrollWidth 454) 원인이었다. */
.analysis-column > * {
  min-width: 0;
}

.analysis-column {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.evidence-column {
  min-width: 0;
  /* 고정·스크롤은 자식인 .evidence-section이 이미 담당한다. 여기에 또 걸면
     스크롤바가 두 개로 보인다. */
}

/* === Reading row: 아티클 본문(analysis-column) + 목차(TOC) 우측 레일 === */
.reading-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.reading-row .analysis-column {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  gap: 24px;
}

/* 기본 화면에서는 오른쪽을 근거 컬럼이 쓰므로 목차를 접는다. 읽기뷰(.reading-row)는
   근거 컬럼이 빠져 자리가 남고, 답변에 섹션 제목이 생기면서 실을 내용도 생겼다.
   :not(.hidden)으로 JS의 표시 제어(항목 없으면 hidden)를 존중한다. */
.reading-row .toc-rail:not(.hidden) {
  display: block;
}

.toc-rail {
  display: none;
  flex: 0 0 200px;
  position: sticky;
  top: 14px;
  align-self: flex-start;
}

.toc-rail-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 14px 8px 14px 14px;
}

.toc-rail-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  padding-left: 8px;
}

.toc-list {
  display: grid;
  gap: 1px;
}

.toc-link {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 0 7px 7px 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.toc-link:hover {
  color: var(--text);
  background: var(--surface-2);
  border-left-color: var(--border-strong);
}

.toc-link--lvl1 {
  padding-left: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-faint);
}

/* 목차는 넓은 화면에서만 노출 — 좁은 화면에서는 우아하게 숨김 */
@media (max-width: 1100px) {
  .toc-rail {
    display: none !important;
  }
}

/* === Article header: 현재 질문을 아티클 제목으로 === */
.article-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.article-title {
  font-size: clamp(1.2rem, 1.02rem + 0.7vw, 1.62rem);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--text);
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.article-meta-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.primary-answer {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  padding: 26px 28px;
}

.primary-answer .answer-text {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text-secondary);
}

/* 인사이트 항목이 서로 붙어 한 덩어리로 보이던 문제 (항목 간격 0px) */
#insights-list > div + div {
  margin-top: 14px;
}

.scope-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.scope-item {
  display: grid;
  gap: 2px;
}

.scope-key {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 700;
}

.scope-value {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.5;
}

.timeline-summary {
  display: grid;
  gap: 10px;
}

.timeline-steps {
  list-style: none;
  display: grid;
  gap: 10px;
}

.timeline-step {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  transition: border-color 0.15s ease;
}

.timeline-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

/* 타임라인 날짜도 신뢰 판단 정보 — faint(2.7:1)에서 muted(5.8:1)로 */
.timeline-date {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.timeline-change {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.timeline-step--changed {
  border-color: var(--border-strong);
}

.timeline-step p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.66;
}

.timeline-change-detail {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 5px;
}

.change-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  margin-bottom: 4px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
}

.change-type-badge--new {
  color: var(--success);
  background: var(--success-dim);
  border-color: var(--success-line);
}

.change-type-badge--scope {
  color: var(--notion);
  background: rgba(127, 179, 255, 0.12);
  border-color: rgba(127, 179, 255, 0.35);
}

.change-type-badge--decision {
  color: var(--warning);
  background: var(--warning-dim);
  border-color: var(--warning-line);
}

.change-before,
.change-after {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.change-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  width: 28px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timeline-more {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 타임라인 "더 보기/접기" 토글 — 6개 초과 시 나머지를 숨겨 페이지 길이를 줄인다 */
.timeline-steps-more {
  margin-top: 10px;
}

.timeline-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.timeline-more-toggle:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.timeline-more-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.timeline-more-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.timeline-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.timeline-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 700;
  margin-top: 3px;
}

.timeline-body {
  min-width: 0;
}

.timeline-body p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.66;
}

.timeline-arrow {
  color: var(--text-faint);
  font-size: 0.875rem;
  margin-left: 60px;
}

.answer-text p {
  margin-bottom: 16px;
}

.answer-text p:last-child {
  margin-bottom: 0;
}

/* 답변 본문 표 — 비교·구성형 질문에서 LLM이 table 단락을 낼 때 쓰인다.
   좁은 화면에서 본문이 가로로 밀리지 않도록 래퍼가 아니라 표 자체를 스크롤시킨다. */
.answer-text table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.answer-text th,
.answer-text td {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  /* 셀은 좁아지므로 어절 단위 줄바꿈이 특히 중요하다. 이게 없으면 한글이
     한 글자씩 세로로 낙하해(390px 실측) 행 하나가 700px까지 늘어났다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.answer-text td:first-child {
  min-width: 6em; /* 항목 열이 한 글자 폭으로 짓눌리지 않게 */
}

.answer-text th {
  background: var(--surface-2);
  font-weight: 700;
  /* nowrap이면 좁은 화면에서 헤더가 표를 밀어낸다. keep-all이 있으니
     어절 단위로만 접히고 단어는 안 깨진다. */
  white-space: normal;
  color: var(--text);
  border-bottom: 2px solid rgba(255, 255, 255, 0.34); /* 3.12:1 — WCAG 1.4.11 */
}

.answer-text tbody tr:nth-child(even) {
  background: var(--surface-2);
}

/* 답변 본문 내 소제목(##, ### 또는 굵은 라벨) — 섹션 제목(.answer-section h2)과 같은
   액센트 마커로 시각적 언어를 통일하되, 크기는 한 단계 낮춰 위계를 구분한다 */
/* display:flex였을 때 제목 안의 <strong>·인용 칩이 flex item이 되어 사이 공백이
   사라졌다("용선료 협상" → "용선료협상"). block + 절대배치 마커로 바꾼다.
   크기는 본문(17px)보다 커야 섹션이 스캔된다 — h1/h2 18.1px, h3 16.3px.
   자간은 0: 20px 미만 한글에 음수 자간을 주면 받침이 붙어 판독성이 떨어진다. */
.answer-text h1,
.answer-text h2,
.answer-text h3 {
  display: block;
  position: relative;
  padding-left: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.answer-text h1,
.answer-text h2 {
  font-size: 1.13rem;
  margin: 32px 0 12px;
}

.answer-text h3 {
  font-size: 1.02rem;
  margin: 28px 0 12px;
}

.answer-text h1::before,
.answer-text h2::before,
.answer-text h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent);
}

.answer-text h1:first-child,
.answer-text h2:first-child,
.answer-text h3:first-child {
  margin-top: 0;
}

.answer-text ul,
.answer-text ol {
  margin: 10px 0 16px;
  display: grid;
  gap: 12px;
}

.answer-text ul {
  list-style: none;
  padding-left: 4px;
}

.answer-text ol {
  padding-left: 20px;
}

.answer-text ul > li {
  position: relative;
  padding-left: 16px;
}

.answer-text ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.answer-text ol > li::marker {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--mono);
  font-size: 0.85em;
}

.answer-text li {
  line-height: 1.75;
  padding-bottom: 2px;
}

.answer-text li > ul,
.answer-text li > ol {
  margin-top: 6px;
  margin-bottom: 0;
}

.answer-text blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.answer-text hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.answer-text strong {
  font-weight: 700;
  color: var(--text);
}

.answer-text code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 2px 5px;
  background: var(--surface-soft);
  border-radius: 4px;
  color: var(--text-secondary);
}

.inline-citations {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* 칩 ::after 히트영역(-4px)이 겹치지 않도록 4→6px */
  margin-left: 6px;
}

.source-ref {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-family: var(--mono);
}

/* 히트영역은 ::after로 넓히고 시각 크기는 절제한다 — 칩이 커지면 본문 흐름에서
   존재감이 과해진다. WCAG 2.5.8 최소 타깃 24px는 확장으로 충족. */
.source-ref-inline::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.source-ref-inline {
  position: relative;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 700;
  vertical-align: super;
  line-height: 1;
}

.source-ref-inline:hover {
  background: rgba(198, 255, 61, 0.22);
  border-color: var(--accent);
}

.source-ref-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  margin-left: 5px;
}

.source-ref-tag:hover {
  border-color: var(--accent);
  background: rgba(198, 255, 61, 0.22);
}

.source-ref-external {
  display: inline-flex;
  align-items: center;
  min-width: 1.4rem;
  height: 1.1rem;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid rgba(127, 179, 255, 0.35);
  background: rgba(127, 179, 255, 0.12);
  color: var(--notion);
  font-size: 0.6rem;
  font-weight: 700;
  vertical-align: super;
  line-height: 1;
  text-decoration: none;
}

.source-ref-external:hover {
  background: rgba(127, 179, 255, 0.22);
  border-color: var(--notion);
}

.external-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.external-badges-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-right: 2px;
}

.disclaimer {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  background: var(--warning-dim);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

/* 본문 위 경고 — "이 답변을 그대로 믿으면 안 될 수 있다"를 읽기 전에 알린다 */
.disclaimer--warning {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--text);
  font-weight: 500;
}

.disclaimer--warning::before {
  content: "⚠";
  margin-right: 8px;
  color: var(--warning);
}

.search-error {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--danger);
  border-radius: 4px;
  background: var(--danger-dim);
  color: var(--danger);
  font-size: 0.8125rem;
}

.search-error-retry {
  padding: 5px 12px;
  border: 1px solid var(--danger);
  border-radius: 6px;
  background: transparent;
  color: var(--danger);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.search-error-retry:hover {
  background: var(--danger);
  color: var(--bg);
}

/* === Empty State === */
.empty-state {
  padding: 48px 12px 32px;
  text-align: center;
}

.empty-state-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.empty-state-examples {
  display: grid;
  /* 820px 폭에서 minmax(220px)는 3열이 잡혀 4번째 카드만 다음 줄에 홀로 남았다.
     2열 고정으로 2×2를 만들고, 좁은 화면에서는 아래 미디어쿼리가 1열로 떨군다. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .empty-state-examples {
    grid-template-columns: minmax(0, 1fr);
  }
}

.example-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.example-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.example-card-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
}

.example-card-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
}

.evidence-section {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

.evidence-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: none;
  padding: 12px 13px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.evidence-card[data-source-type="notion"] { border-left-color: var(--notion); }
.evidence-card[data-source-type="slack"] { border-left-color: var(--slack); }
.evidence-card[data-source-type="github"] { border-left-color: var(--github); }

.evidence-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.evidence-card.is-focused {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.evidence-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  font-family: var(--mono);
  /* 출처·날짜는 "이 답을 믿을지" 판단하는 1차 정보다. 10.6px/2.7:1로는 안 읽혔다. */
  font-size: 0.72rem;
  color: var(--text-muted);
}

.evidence-date {
  font-family: var(--mono);
}

.source-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-weight: 700;
}

.source-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--notion);
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.source-type-badge svg {
  display: block;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}

.source-type-badge--notion {
  border-color: rgba(127, 179, 255, 0.3);
  color: var(--notion);
}

.source-type-badge--slack {
  border-color: rgba(227, 156, 255, 0.3);
  color: var(--slack);
}

.source-type-badge--github {
  border-color: rgba(123, 224, 192, 0.3);
  color: var(--github);
}

/* 근거 목록에 없는 인용 — 유효 인용처럼 보이지 않게 회색·비대화형 */
.source-ref--dead {
  display: inline-block;
  padding: 0 4px;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  cursor: help;
}

/* 원문이 없다는 사실 자체를 표시 — 링크와 같은 자리, 낮은 위계 */
.evidence-origin-none {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-faint);
}

.source-card--nolink {
  cursor: default;
}

.source-type-badge--gdrive {
  border-color: rgba(255, 206, 122, 0.3);
  color: var(--gdrive);
}

.source-type-badge--gdrive_audio {
  border-color: rgba(255, 154, 122, 0.32);
  color: var(--gdrive-audio);
}

.source-type-badge--domain_reference {
  border-color: rgba(160, 214, 255, 0.28);
  color: var(--domain-reference);
}

.dot {
  color: var(--text-faint);
}

.evidence-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.45;
}

/* 검증하러 간 곳이 가장 안 읽히면 안 된다 — 발췌문·제목·메타를 함께 올린다. */
.evidence-content {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.62;
  white-space: normal;
  overflow-wrap: anywhere;
}

.evidence-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--accent-600);
  text-decoration: none;
  font-weight: 600;
}

.evidence-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
}

/* === Inline Filters === */
.filters-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  max-width: 820px;
  margin: 0 auto 22px;
  position: relative;
}

/* 필터는 한 번 정하면 잘 바꾸지 않는데 펼친 채로 첫 화면 200px를 먹었다.
   검색 후에는 접고, 요약 바의 "필터" 버튼으로 다시 연다. */
.search-box.searched ~ .filters-panel {
  display: none;
}

.search-box.searched ~ .filters-panel.is-open {
  display: block;
}

.filters-panel-header {
  display: contents;
}

.reset-filters-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.reset-filters-btn:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.filter-row > label,
.filter-row > div {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px 7px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-row > label:focus-within,
.filter-row > div:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.filter-row-label {
  font-family: var(--mono);
  font-size: 0.65625rem; /* 10.5px — 브라우저 줌이 root font-size를 스케일하도록 rem 유지 */
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.filter-help {
  font-family: var(--sans);
  font-size: 0.64rem;
  /* text-faint(#5B5F69)는 이 배경에서 대비 2.7:1로 WCAG AA(4.5:1) 미달 — 10px 보조문구라 특히 안 읽힌다 */
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin-left: 8px;
}

#filter-date-range {
  border: none;
  background: transparent;
  padding: 0;
  /* placeholder "예: 2026-02-01 ~ 2026-02-15"가 198px라 190px에서는 끝자리가 잘렸다 */
  min-width: 210px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

#filter-date-range:focus {
  outline: none;
}

#filter-date-range::placeholder {
  color: var(--text-faint);
}

/* === Scope Filters (소스, 향후 프로젝트 등) === */
.scope-filter-group {
  min-width: 0;
}

/* .scope-chip-row는 소스 칩 그룹 외에 향후 프로젝트 셀렉터 등이 나란히 추가될 확장 가능한 컨테이너 */
.scope-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chip-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chip-toggle:hover {
  color: var(--text);
}

.chip-toggle input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.chip-toggle svg {
  display: block;
  flex-shrink: 0;
}

.chip-toggle:has(input[type="checkbox"]:checked) {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent);
}

.chip-toggle:has(input[type="checkbox"]:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* === Project Scope Selector (검색 스코프를 프로젝트로 좁히는 셀렉터) === */
.project-scope-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--border-strong);
}

.project-select {
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 28px 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--text-secondary);
  background:
    var(--surface-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12' fill='none' stroke='%239296A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.project-select:hover {
  border-color: var(--accent-line);
}

.project-select:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.project-star-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.project-star-btn:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.project-star-btn.is-default {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent);
}

.project-star-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* === Ontology Map === */
.ontology-content {
  display: grid;
  gap: 12px;
}

.ontology-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px;
}

.ontology-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
}

.type-pill input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.ontology-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ontology-search-input {
  width: min(280px, 48vw);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface-subtle);
}

.ontology-search-input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.ontology-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
}

.ontology-status {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.ontology-counts {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ontology-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 12px;
  min-height: calc(100vh - 240px);
}

.ontology-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ontology-network {
  width: 100%;
  height: calc(100vh - 260px);
  min-height: 540px;
  background:
    radial-gradient(560px 240px at 18% 6%, var(--bg-mesh-a), transparent 66%),
    radial-gradient(520px 220px at 85% -4%, var(--bg-mesh-b), transparent 64%),
    var(--surface);
}

/* vis-network는 노드 hover 툴팁(.vis-tooltip)을 라이트 기본값(크림 배경 + 검은 텍스트)으로
   그래프 컨테이너 안에 직접 주입한다. 다크 테마에 맞게 재정의. */
.ontology-network .vis-tooltip {
  font-family: var(--mono) !important;
  font-size: 0.72rem !important;
  color: var(--text) !important;
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-md) !important;
  white-space: pre-line !important;
}

.ontology-detail-panel {
  padding: 16px;
  display: grid;
  align-content: flex-start;
  gap: 10px;
}

.ontology-detail-panel h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ontology-detail-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ontology-detail {
  display: grid;
  gap: 10px;
}

.ontology-detail-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.ontology-detail-type {
  display: inline-flex;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
}

.ontology-detail-lines {
  display: grid;
  gap: 6px;
}

.ontology-detail-line {
  display: grid;
  gap: 3px;
}

.ontology-detail-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ontology-detail-value {
  font-size: 0.8rem;
  color: var(--text);
  word-break: break-all;
}

.ontology-detail h3 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ontology-detail-links {
  list-style: none;
  display: grid;
  gap: 6px;
  max-height: 46vh;
  overflow: auto;
  padding-right: 4px;
}

.ontology-detail-links li {
  font-size: 0.76rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 9px;
  line-height: 1.5;
}

/* === Guide Page === */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
  gap: 16px;
}

.guide-nav {
  position: sticky;
  top: 16px;
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 12px;
  display: grid;
  gap: 6px;
}

.guide-nav h2 {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.guide-nav a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.86rem;
  padding: 6px 8px;
  border-radius: 8px;
}

.guide-nav a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.guide-article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2vw, 28px);
  display: grid;
  gap: 18px;
}

.guide-header h1 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin-bottom: 6px;
  color: var(--text);
}

.guide-header p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.guide-section {
  display: grid;
  gap: 10px;
}

.guide-section h2 {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text);
}

.guide-section ol,
.guide-section ul {
  display: grid;
  gap: 6px;
  padding-left: 20px;
  font-size: 0.93rem;
  color: var(--text-secondary);
}

.guide-section p {
  font-size: 0.93rem;
  color: var(--text-secondary);
}

.guide-section h3 {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-top: 2px;
  color: var(--text);
}

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

.guide-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 11px 12px;
  display: grid;
  gap: 4px;
}

.guide-card h3 {
  font-size: 0.86rem;
  color: var(--text);
}

.guide-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.guide-callout {
  border: 1px solid var(--accent-line);
  background: var(--accent-dim);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.86rem;
}

.guide-article code {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--text-secondary);
  background: var(--surface-soft);
  padding: 1px 4px;
  border-radius: 4px;
}

.guide-article pre {
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid var(--border);
}

.guide-article pre code {
  font-size: 0.8rem;
  line-height: 1.6;
  background: none;
  padding: 0;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.guide-table th,
.guide-table td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  padding: 9px 10px;
  color: var(--text-secondary);
}

.guide-table th:last-child,
.guide-table td:last-child {
  border-right: none;
}

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

.guide-table th {
  background: var(--surface-2);
  font-weight: 700;
  color: var(--text);
}

.guide-footer {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 0.84rem;
}

/* === History Drawer (좌측 슬라이드 Q&A 기록) === */
.history-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
  animation: historyFade 0.18s ease;
}

@keyframes historyFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.history-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border-right: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  z-index: 41;
  animation: historySlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes historySlideIn {
  from { transform: translateX(-14px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}

.history-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.history-drawer-header h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.history-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.history-close-btn:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.history-list {
  display: grid;
  gap: 6px;
}

/* 기록 행 = 단일 카드 한 줄 — 질문·시간·평가·삭제가 한 테두리 안에 있다.
   버튼별 박스를 나누면 행이 높아지고 시선이 갈라진다 (2026-07 UI 피드백). */
.history-item {
  display: flex;
  align-items: center;
  gap: 2px;
  /* 리스트가 grid라 행의 min-width:auto가 nowrap 본질 폭으로 트랙을 벌린다 —
     0으로 풀어야 질문이 말줄임되고 버튼이 드로어 안에 남는다 */
  min-width: 0;
  padding: 3px 6px 3px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.history-item:hover {
  border-color: var(--accent-line);
  background: var(--surface-soft);
}

.history-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  padding: 7px 4px 7px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.history-item-query {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-time {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.history-item-feedback,
.history-item-delete {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.history-item-feedback:hover {
  background: var(--surface);
  color: var(--text);
}

.history-item-feedback[data-rating="1"].is-active {
  background: var(--success-dim);
  color: var(--success);
}

.history-item-feedback[data-rating="-1"].is-active {
  background: var(--danger-dim);
  color: var(--danger);
}

.history-item-delete:hover {
  background: var(--surface);
  color: var(--danger);
}

/* 기본은 질문+시간만 — 평가/삭제는 행 hover 또는 키보드 포커스가 행 안에
   있을 때만 시간 자리에 드러난다. 이미 평가를 남긴 행은 상태를 항상 보여준다. */
.history-item-feedback,
.history-item-delete {
  display: none;
}

.history-item-feedback.is-active,
.history-item:hover .history-item-feedback,
.history-item:hover .history-item-delete,
.history-item:focus-within .history-item-feedback,
.history-item:focus-within .history-item-delete {
  display: inline-flex;
}

.history-item:hover .history-item-time,
.history-item:focus-within .history-item-time {
  display: none;
}

/* 터치 기기(hover 없음)에서는 항상 노출 — 아니면 버튼에 닿을 방법이 없다 */
@media (hover: none) {
  .history-item-feedback,
  .history-item-delete {
    display: inline-flex;
  }
}

.history-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding: 20px 8px;
}

/* === 답변 피드백 === */
.answer-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.answer-feedback-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.feedback-btn:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.feedback-btn[data-feedback-rating="1"].is-active {
  border-color: var(--success-line);
  background: var(--success-dim);
  color: var(--success);
}

.feedback-btn[data-feedback-rating="-1"].is-active {
  border-color: var(--danger-line);
  background: var(--danger-dim);
  color: var(--danger);
}

.answer-feedback-status {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* 메모 줄은 한 줄을 통째로 차지한다 (평가 버튼 아래) */
.answer-feedback-note-row {
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
}

#answer-feedback-note {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
}

#answer-feedback-note:focus {
  outline: none;
  border-color: var(--accent-line);
}

#answer-feedback-note-submit {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

#answer-feedback-note-submit:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

/* === Follow-up: 이어서 묻기 === */
.follow-up-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.follow-up-suggestions-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.follow-up-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.follow-up-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

/* 방향 표시는 인라인 SVG를 쓴다 — ▸/▾ 같은 글리프는 폰트에 따라 찌그러진다 */
.follow-up-chip-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--accent);
}

.follow-up-chip-text {
  min-width: 0;
}

.follow-up-chip:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

/* 답변을 읽다가 바로 이어 물을 수 있도록 하단에 고정한다 */
.follow-up-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 16px 16px;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}

.follow-up-bar-inner {
  display: flex;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.follow-up-bar-inner:focus-within {
  border-color: var(--accent-line);
}

#follow-up-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}

#follow-up-input:focus {
  outline: none;
}

#follow-up-submit {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--bg);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

#follow-up-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 고정 바가 마지막 내용을 가리지 않도록 */
body.has-follow-up-bar .content {
  padding-bottom: 96px;
}

/* 고정된 인용 패널도 하단 바를 피해서 잘린다 */
body.has-follow-up-bar .evidence-section {
  max-height: calc(100vh - 112px);
}

/* === Responsive === */
@media (max-width: 980px) {
  .search-layout {
    grid-template-columns: 1fr;
  }

  .scope-summary {
    grid-template-columns: 1fr;
  }

  .evidence-section {
    position: static;
  }

  .ontology-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ontology-network {
    height: 62vh;
    min-height: 420px;
  }

  .ontology-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .ontology-actions {
    width: 100%;
  }

  .ontology-search-input {
    width: 100%;
  }

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .guide-nav h2 {
    grid-column: 1 / -1;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .app {
    padding: 14px;
  }

  /* 390px에서 카드 좌우 패딩 합이 56px라 본문이 304px(~18자/줄)로 짓눌렸다 */
  .answer-section {
    padding: 16px 14px;
  }

  .primary-answer {
    padding: 20px 16px;
  }

  .top-controls {
    align-items: flex-start;
  }

  .search-box {
    flex-direction: column;
  }

  #submit-btn {
    width: 100%;
    justify-content: center;
  }

  .toolbar-controls {
    width: 100%;
  }

  .toolbar-controls .evidence-toggle-btn,
  .toolbar-controls .citation-mode-btn,
  .toolbar-controls .length-toggle-group,
  .toolbar-controls .plain-toggle-btn {
    flex: 1 1 auto;
  }

  .filter-row > label,
  .filter-row > div {
    width: 100%;
  }

  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .ontology-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .guide-nav {
    grid-template-columns: 1fr;
  }
}

/* === Stance Section === */
.stance-trigger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.stance-load-btn {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.stance-load-btn:hover:not(:disabled) {
  border-color: var(--accent-line);
  color: var(--text);
}

.stance-load-btn:disabled {
  cursor: progress;
  opacity: 0.6;
}

.stance-trigger-note {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.stance-trigger-note--error {
  color: var(--danger);
}

.stance-summary {
  font-weight: 500;
  line-height: 1.82;
  margin-bottom: 12px;
  color: var(--text);
}

.stance-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.stance-confidence {
  font-family: var(--mono);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.7rem;
  white-space: nowrap;
}

.stance-confidence--high {
  color: var(--success);
  background: var(--success-dim);
  border: 1px solid var(--success-line);
}

.stance-confidence--mid {
  color: var(--warning);
  background: var(--warning-dim);
  border: 1px solid var(--warning-line);
}

.stance-confidence--low {
  color: var(--danger);
  background: var(--danger-dim);
  border: 1px solid var(--danger-line);
}

.stance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.stance-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
}

.stance-block-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.stance-block-items {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.stance-block-items li {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 10px;
  position: relative;
}

.stance-block-items li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

.stance-open-questions {
  background: var(--warning-dim);
  border: 1px solid var(--warning-line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 4px;
}

.stance-open-questions .stance-block-label {
  color: var(--warning);
}

.stance-open-questions .stance-block-items li {
  color: var(--text-secondary);
}

.stance-open-questions .stance-block-items li::before {
  color: var(--warning);
}

@media (max-width: 640px) {
  .stance-grid {
    grid-template-columns: 1fr;
  }
}

/* === air-datepicker: 다크 스킨 ===
   air-datepicker.css가 styles.css보다 먼저 로드되므로, 동일 선택자에 대해
   여기서 지정한 --adp-* 값이 소스 순서상 우선 적용된다. */
.air-datepicker {
  --adp-font-family: var(--sans);
  --adp-background-color: var(--surface-2);
  --adp-background-color-hover: var(--surface-soft);
  --adp-background-color-active: var(--surface-soft);
  --adp-background-color-in-range: rgba(198, 255, 61, 0.1);
  --adp-background-color-in-range-focused: rgba(198, 255, 61, 0.18);
  --adp-background-color-selected-other-month-focused: var(--accent);
  --adp-background-color-selected-other-month: var(--accent-line);
  --adp-color: var(--text-secondary);
  --adp-color-secondary: var(--text-muted);
  --adp-accent-color: var(--accent);
  --adp-color-current-date: var(--accent);
  --adp-color-other-month: var(--text-faint);
  --adp-color-disabled: var(--text-faint);
  --adp-color-disabled-in-range: var(--text-faint);
  --adp-color-other-month-hover: var(--text-muted);
  --adp-border-color: var(--border-strong);
  --adp-border-color-inner: var(--border);
  --adp-border-radius: 12px;
  --adp-border-color-inline: var(--border);
  --adp-nav-arrow-color: var(--text-muted);
  --adp-nav-color-secondary: var(--text-muted);
  --adp-day-name-color: var(--text-faint);
  --adp-day-name-color-hover: var(--text);
  --adp-cell-border-radius: 8px;
  --adp-cell-background-color-hover: var(--surface-soft);
  --adp-cell-background-color-selected: var(--accent);
  --adp-cell-background-color-selected-hover: var(--accent);
  --adp-cell-background-color-in-range: rgba(198, 255, 61, 0.1);
  --adp-cell-background-color-in-range-hover: rgba(198, 255, 61, 0.18);
  --adp-cell-border-color-in-range: var(--accent-line);
  --adp-btn-color: var(--accent);
  --adp-btn-color-hover: var(--text);
  --adp-btn-background-color-hover: var(--surface-soft);
  --adp-btn-background-color-active: var(--surface-soft);
  --adp-time-track-color: var(--border-strong);
  --adp-time-track-color-hover: var(--text-muted);
  --adp-time-day-period-color: var(--text-muted);
  box-shadow: var(--shadow-lg);
}

/* 라임 배경 위 흰 글자(#fff 하드코딩)는 대비가 낮으므로 다크 텍스트로 교체 */
.air-datepicker-cell.-selected- {
  color: var(--bg);
}

.air-datepicker-cell.-selected-.-current- {
  color: var(--bg);
}

.air-datepicker--pointer::after {
  background: var(--surface-2);
}