/* 두 모니터가 공유하는 레이아웃 — 전체 화면 1920×1080 기준.
   관객이 2~3m 떨어져 본다는 전제로 본문 최소 15px, 강조 숫자는 훨씬 크게 잡는다. */

.monitor {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* 전시 화면은 스크롤하지 않는다 — 안 보이면 안 담은 것이다 */
}

/* ── 질문 바 ─────────────────────────────────────────── */
.question-bar {
  padding: 1.1rem 2rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #101821 0%, var(--bg) 100%);
  flex: none;
}
.question-bar__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
.question-bar__row {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}
.question {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.question--idle { color: var(--ink-faint); font-weight: 400; }
.question-bar__meta {
  display: flex;
  gap: 1.2rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-dim);
  flex: none;
}

/* ── 진행 파이프라인 ─────────────────────────────────── */
.pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.9rem 2rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  position: relative;
}
.step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--line);
  margin: 0 0.9rem;
  transition: background 0.3s;
}
.step__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--line);
  flex: none;
  transition: background 0.25s, box-shadow 0.25s;
}
.step__body { display: flex; flex-direction: column; gap: 0.1rem; }
.step__label {
  font-size: 0.92rem;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color 0.25s;
}
.step__ms {
  font-size: 0.72rem;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.25s;
  min-height: 1em;
}
.step.is-done .step__ms, .step.is-active .step__ms { opacity: 1; }
.step.is-done .step__dot { background: var(--accent); }
.step.is-done .step__label { color: var(--ink-dim); }
.step.is-done:not(:last-child)::after { background: var(--accent); }
.step.is-active .step__dot {
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(79, 195, 217, 0.18);
  animation: pulse 1.1s ease-in-out infinite;
}
.step.is-active .step__label { color: var(--ink); font-weight: 600; }
.step.is-skipped .step__label { color: var(--ink-faint); text-decoration: line-through; opacity: 0.6; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .step.is-active .step__dot { animation: none; } }

/* ── 본문 ────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1px;
  background: var(--line);
  flex: 1;
  min-height: 0;
}
/* 3단 — Working Memory는 구성/근거/결과 세 축이라 열을 하나 더 쓴다. */
.grid-3 {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr 1fr;
  gap: 1px;
  background: var(--line);
  flex: 1;
  min-height: 0;
}
.pane {
  background: var(--bg);
  padding: 1.3rem 2rem 1.6rem;
  overflow-y: auto;
  min-height: 0;
}
.pane--right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.3rem 2rem 1.6rem;
}
.pane__title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
  font-weight: 500;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.3rem;
  flex: none;
}
/* 답변은 내용만큼만 차지하되 너무 납작해지지 않게 최소 높이만 준다.
   flex:1로 늘리면 짧은 답에서 카드 절반이 빈 채로 남아 화면이 미완성으로 보인다. */
.card--answer { min-height: 12rem; display: flex; flex-direction: column; }

/* 질의 이해 — 파이프라인 첫 단계에 대응하는 화면 내용. */
.understanding { margin-bottom: 1.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips .chip {
  font-size: 0.85rem;
  padding: 0.35em 0.75em;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
}
.chips .chip--q {
  color: var(--ink);
  border-color: rgba(79, 195, 217, 0.4);
  background: rgba(79, 195, 217, 0.08);
}
.chips .chip--skip { color: var(--ink-faint); font-style: italic; }

/* ── 근거 목록 ───────────────────────────────────────── */
.evidence { display: flex; flex-direction: column; gap: 0.85rem; }

/* 항상 아는 사실 — 짧은 불릿이 많아 세로로 쌓으면 화면을 독차지한다. 가로로 흘려 담는다. */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem;
}
.ev-grid .ev { padding: 0.7rem 0.9rem; }
.ev-grid .ev__body { font-size: 0.9rem; line-height: 1.5; }
.ev-grid .ev__body li { margin-bottom: 0.15rem; }
.ev-grid .ev__head { margin-bottom: 0.35rem; }

.ev {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  padding: 0.85rem 1.1rem;
}
.ev--aoc      { border-left-color: var(--aoc); }
.ev--fact     { border-left-color: var(--fact); }
.ev--chunk    { border-left-color: var(--chunk); }
.ev--turn     { border-left-color: var(--chunk); }
.ev--tool     { border-left-color: var(--tool); }
.ev--external { border-left-color: var(--external); }

.ev__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.ev__kind {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ev--aoc      .ev__kind { color: var(--aoc); }
.ev--fact     .ev__kind { color: var(--fact); }
.ev--chunk    .ev__kind,
.ev--turn     .ev__kind { color: var(--chunk); }
.ev--tool     .ev__kind { color: var(--tool); }
.ev--external .ev__kind { color: var(--external); }
.ev__sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-left: auto;
}
.ev__body { font-size: 0.95rem; line-height: 1.65; color: var(--ink); }
.ev__body ul { margin: 0; padding-left: 1.1rem; }
.ev__body li { margin-bottom: 0.3rem; }
/* 관련도 — 순위 + 막대. 점수 값 자체(RRF 융합값)는 사람이 읽을 단위가 아니다.
   li를 직접 flex로 만들면 불릿이 사라지므로 안쪽 .ev__row에 건다. */
.ev__row { display: flex; align-items: baseline; gap: 0.7rem; }
.ev__text { flex: 1; min-width: 0; }
/* 관련도 3단 명암 — 위쪽 기억은 밝고, 예산을 채우느라 딸려온 기억은 흐리다.
   가장 흐린 단계도 본문으로 읽히는 밝기를 지킨다(흐린 게 오류로 보이면 안 된다). */
.ev__text--hi  { color: var(--ink); }
.ev__text--mid { color: #B2C0CA; }
.ev__text--lo  { color: var(--ink-dim); }
/* 1단 항목의 종류 뱃지. 본문과 같은 줄 맨 앞에 놓여 훑을 때 종류가 먼저 읽힌다.
   세로 정렬은 건드리지 않는다 — align-self로 가운데를 잡으면 여러 줄 항목에서 뱃지가
   가운데 줄로 내려가 첫 줄과 어긋난다(부모의 baseline 정렬이 첫 줄을 잡아 준다). */
.ev__badge { flex: none; }
.rel {
  flex: none;
  width: 4.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  align-self: center;
}
.rel b {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--ink-faint);
  width: 1.1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rel__bar { flex: 1; height: 0.3rem; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.rel__bar i { display: block; height: 100%; background: var(--fact); opacity: 0.75; }

/* 날짜 머리글 — 같은 날 기록을 한 덩어리로 묶는다. */
.ev__date {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0.55rem 0 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ev__date::after {
  content: "";
  order: 1;          /* 구분선이 먼저, 범례는 오른쪽 끝 — 막대 열과 세로로 맞춘다. */
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}
.ev__body > .ev__date:first-child { margin-top: 0; }
.ev__legend { order: 2; flex: none; width: 4.4rem; text-align: center; color: var(--ink-faint); }
.ev__body li::marker { color: var(--ink-faint); }
.ev__more { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.4rem; }
.ev__more-btn {
  margin-top: 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink-dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
.ev__more-btn:hover { color: var(--ink); border-color: var(--ink-faint); }

/* 출처 원문 — 사실 아래 딸려온 것. 한 단 들여쓰고 라운드 박스로 감싸 "이건 근거의 근거"
   라는 게 위치와 모양으로 읽히게 한다. 접혔을 때도 앞부분이 보여야 원문이 함께 들어왔다는
   사실 자체가 전달된다. */
.ev__src {
  margin: 0.15rem 0 0.5rem 1.15rem;
  padding: 0.45rem 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.ev__src:hover { border-color: var(--line); }
.ev__src.is-static { cursor: default; }
.ev__src.is-static:hover { border-color: var(--line-soft); }
.ev__src-label {
  flex: none;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.ev__src-body { flex: 1; min-width: 0; }
.ev__src-line {
  margin: 0 0 0.3rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.ev__src-line:last-child { margin-bottom: 0; }
/* 접힌 상태의 미리보기는 한 줄로 — 길어도 줄바꿈하지 않는다. */
.ev__src:not(.is-open) .ev__src-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 답변 ────────────────────────────────────────────── */
.answer {
  font-size: 1.18rem;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.answer--empty { color: var(--ink-faint); font-size: 1rem; }
.answer--error { color: var(--danger); font-size: 0.95rem; }

/* ── 예산 바 ─────────────────────────────────────────── */
.budget__nums {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.budget__used { font-size: 2rem; font-weight: 600; color: var(--accent); }
.budget__sep { color: var(--ink-faint); }
.budget__unit { font-size: 0.85rem; color: var(--ink-dim); margin-left: 0.2rem; }

.bar {
  display: flex;
  height: 0.7rem;
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel-2);
  gap: 2px;
}
.bar i { display: block; transition: flex-grow 0.4s ease; }
.bar i.s-fact     { background: var(--fact); }
.bar i.s-chunk    { background: var(--chunk); }
.bar i.s-turn     { background: var(--chunk); opacity: 0.65; }
.bar i.s-graph    { background: var(--aoc); }
.bar i.s-rest     { background: transparent; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}
.legend span { display: inline-flex; align-items: center; gap: 0.45em; }
.legend i { width: 0.6rem; height: 0.6rem; border-radius: 2px; display: block; }

/* ── 비용 ────────────────────────────────────────────── */
.cost {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.cost__item { display: flex; flex-direction: column; gap: 0.15rem; }
.cost__num { font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.cost__label { font-size: 0.75rem; color: var(--ink-faint); }

.fold { margin-top: 1rem; }
.fold summary {
  font-size: 0.8rem;
  color: var(--ink-faint);
  cursor: pointer;
  font-family: var(--mono);
}
.fold summary:hover { color: var(--ink-dim); }
.fold pre { margin-top: 0.6rem; max-height: 16rem; overflow-y: auto; font-size: 0.75rem; }

.empty--sm { padding: 1rem; font-size: 0.8rem; }

/* 좁은 화면(노트북 확인용) — 전시는 1920 가로 기준이지만 개발 중엔 좁게 볼 수 있어야 한다. */
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; overflow-y: auto; }
  .monitor { overflow: auto; height: auto; min-height: 100vh; }
  .question { white-space: normal; }
}


/* ── Working Memory 구성 스택 ────────────────────────── */
.stack__total { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.85rem; }
.stack__total-num { font-size: 2rem; font-weight: 600; color: var(--ink); }
.stack__total-unit { font-size: 0.82rem; color: var(--ink-dim); }
.stack__actual { margin-left: auto; font-size: 0.78rem; color: var(--ink-faint); }

/* 세로 스택 — 각 블록의 높이가 곧 차지하는 비중이다. */
.stackbar { display: flex; height: 0.7rem; border-radius: 3px; overflow: hidden; gap: 2px; margin-bottom: 1rem; }
.stackbar i { display: block; transition: flex-grow 0.4s ease; }
.p-instruction { background: #8FA3B0; }
.p-tools       { background: var(--tool); }
.p-aoc         { background: var(--aoc); }
.p-recall      { background: var(--fact); }
.p-toolresult  { background: var(--external); }
.p-question    { background: var(--accent); }

.stack__list { display: flex; flex-direction: column; gap: 0.5rem; }
.spart {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.spart__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  list-style: none;
}
.spart__head::-webkit-details-marker { display: none; }
.spart__swatch { width: 0.55rem; height: 0.55rem; border-radius: 2px; flex: none; }
.spart__name { font-size: 0.92rem; font-weight: 500; }
.spart__desc { font-size: 0.78rem; color: var(--ink-faint); }
.spart__tok { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-dim); }
.spart__pct { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); min-width: 2.8rem; text-align: right; }
.spart pre { border: none; border-top: 1px solid var(--line); border-radius: 0; max-height: 14rem; font-size: 0.72rem; }
.spart[open] .spart__head { border-bottom: 1px solid var(--line-soft); }

/* ── 예산 주석 · LLM 호출 목록 ───────────────────────── */
.budget__note {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
/* ── 처리 과정 분해 ──────────────────────────────────────
   응답 전(사용자가 기다리는 시간)과 응답 후(백그라운드)를 시각적으로 갈라 놓는다.
   같은 목록에 섞어 두면 "왜 30초나 걸리지"로 오해한다. */
.phase { display: flex; flex-direction: column; gap: 0.28rem; margin-top: 0.9rem; }
.phase__row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  background: var(--panel-2);
  border-radius: 4px;
}
.phase__row--sub {
  background: transparent;
  padding-left: 1.5rem;
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.phase__what { color: var(--ink); }
.phase__row--sub .phase__what { color: var(--ink-dim); }
.phase__why { color: var(--ink-faint); font-size: 0.76rem; }
.phase__ms { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-dim); }
.phase__row--total { background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.phase__row--total .phase__what { font-weight: 600; }
.phase__row--total .phase__ms { color: var(--ink); font-weight: 600; }

.phase__split {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
}
.phase__split-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok, var(--fact));
}
.phase__split-note { font-size: 0.76rem; color: var(--ink-faint); }

/* 예산 — 읽기 지침 몫을 별도 색으로 드러낸다(설명이 아니라 형태로 읽히게). */
.bar i.s-guidance { background: #6B7D88; }
.budget__note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
  line-height: 1.6;
}
.budget__note b { color: var(--ink); font-weight: 600; }

@media (max-width: 1400px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-3 > .pane:last-child { grid-column: 1 / -1; }
}

/* ── 기억 대조(기억 없이) 턴 ─────────────────────────────────────
   같은 질문을 기억 켜고/끄고 던지는 시연. 근거가 텅 빈 이유를 배너가 못 박고,
   질문 바가 붉게 물들어 "지금은 기억 없음"이 멀리서도 읽힌다. */
.memoryless-banner {
  margin-top: 0.7rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--danger);
  border-radius: var(--r, 8px);
  background: rgba(232, 115, 107, 0.12);
  color: var(--danger);
  font-size: 0.95rem;
  font-weight: 600;
}
body.is-memoryless .question-bar {
  background: linear-gradient(180deg, rgba(232, 115, 107, 0.14) 0%, var(--bg) 100%);
}
/* 기억이 꺼진 턴에서는 근거·구성 패널이 비어 있는 게 정상이다 — 빈 상태를 흐리게 눌러
   "이 답에는 기억이 안 쓰였다"가 형태로 읽히게 한다. */
body.is-memoryless #stack-empty,
body.is-memoryless #evidence .empty { opacity: 0.85; }