/* EVIDENCE VISUAL LAYER v1 — 표시 전용. 게임 팔레트(잉크/크림/앰버) 유지 */

/* ---- 소스 글리프: 모양 + 색 이중 부호화 ---- */
.ev-glyph {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  font: 700 11px/1 Consolas, monospace;
  font-style: normal;
  border: 1px solid currentColor;
}
.evidence-token { position: relative; padding-left: 29px !important; }
.glyph-profile  { color: #d8cca6; }
.glyph-rule     { color: #d68a50; }
.glyph-dialogue { color: #9ac0b0; }
.glyph-test     { color: #7fa8c9; }

/* ---- 응답속도 눈금 ---- */
.ev-gauge { margin-top: 7px; }
.ev-track {
  position: relative;
  height: 15px;
  border: 1px solid #6b6552;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px), #1d221f;
}
.ev-gauge.compact .ev-track { height: 11px; }
.ev-zone { position: absolute; top: 0; bottom: 0; }
/* 자동화 구간: 사선 해칭 — 색맹 대비 형태로도 구분 */
.ev-zone-ai {
  background: repeating-linear-gradient(45deg, rgba(214,93,80,.55) 0 3px, rgba(214,93,80,.2) 3px 6px);
  border-right: 2px solid #d65d50;
}
/* 인간 구간: 점 패턴 */
.ev-zone-human {
  background: repeating-linear-gradient(90deg, rgba(154,192,176,.42) 0 2px, transparent 2px 5px);
  border-left: 1px solid #6f9a80;
  border-right: 1px solid #6f9a80;
}
.ev-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  margin-left: -1px;
  background: #f2ead0;
  box-shadow: 0 0 0 1px #10130f;
}
.ev-mark::after {
  content: attr(data-value);
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 1px 3px;
  color: #10130f;
  background: #f2ead0;
  font: 800 8px/1 Consolas, monospace;
  white-space: nowrap;
}
/* 구간별 마커 형태 차이 */
.ev-mark.in-ai::before,
.ev-mark.in-human::before,
.ev-mark.in-edge::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 0; height: 0;
  transform: translateX(-50%);
}
.ev-mark.in-ai::before    { border: 4px solid transparent; border-top-color: #d65d50; }
.ev-mark.in-human::before { border: 4px solid transparent; border-top-color: #9ac0b0; }
.ev-mark.in-edge::before  { border: 4px solid transparent; border-top-color: #e5ae55; }

.ev-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: #9a937c;
  font: 600 7px/1 Consolas, monospace;
}
.ev-gauge.compact .ev-scale { margin-top: 8px; font-size: 6px; }

/* ---- 백분율 막대 ---- */
.ev-bars { margin-top: 7px; display: grid; gap: 3px; }
.ev-bar-row { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 6px; }
.ev-bar { position: relative; height: 8px; border: 1px solid #6b6552; background: #1d221f; }
.ev-bar i { position: absolute; inset: 0 auto 0 0; background: #8fa39a; }
.ev-bar i.hi { background: repeating-linear-gradient(45deg, #d65d50 0 3px, #a8443a 3px 6px); }
.ev-bar i.lo { background: repeating-linear-gradient(45deg, #7fa8c9 0 3px, #5d84a3 3px 6px); }
.ev-bar-row b { color: #cfc8ad; font: 700 8px/1 Consolas, monospace; text-align: right; }

/* ---- A/B 좌우 비교 ---- */
.ev-compare { display: none; }
.ev-compare.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 8px;
  border: 2px solid var(--ink, #19211e);
  background: rgba(16, 19, 15, .06);
}
.ev-col { position: relative; padding: 16px 7px 7px; border: 1px dashed #7b755f; }
.ev-col-tag {
  position: absolute;
  left: 0; top: 0;
  padding: 1px 5px;
  color: #f2ead0;
  background: #19211e;
  font: 800 8px/1.4 Consolas, monospace;
  font-style: normal;
}
.ev-nonum { display: block; padding: 6px 0; color: #6f6a58; font: 600 8px/1.4 Consolas, monospace; }
.ev-verdict {
  grid-column: 1 / -1;
  margin: 0;
  padding: 6px 8px;
  border-left: 4px solid #7b755f;
  background: rgba(16, 19, 15, .1);
  font: 700 10px/1.4 "Malgun Gothic", sans-serif;
}
.ev-verdict.bad  { border-left-color: #d65d50; color: #8e2f26; }
.ev-verdict.ok   { border-left-color: #6f9a80; color: #35604a; }
.ev-verdict.edge { border-left-color: #e5ae55; color: #7a5410; }

/* 데스크톱 문서창 안에서는 어두운 바탕에 맞춰 반전 */
.desk-window .ev-verdict.bad  { color: #ef8175; }
.desk-window .ev-verdict.ok   { color: #a9d3ba; }
.desk-window .ev-verdict.edge { color: #edc17f; }

@media (max-width: 700px) {
  .ev-compare.active { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-gauge, .ev-bars { transition: none; }
}

/* 요약과 겹쳐 남을 내용이 없는 본문은 아예 자리를 차지하지 않는다 */
.evidence-token .evidence-full.hidden-full { display: none !important; }
/* 단서 배지: 기호 + 짧은 말, 줄바꿈 방지 */
.evidence-token .evidence-clue { white-space: nowrap; }

/* ============================================================
   LEAN PASS — 증거로 쓰이지 않거나 증거 카드와 중복되는 표시 제거.
   DOM은 남기고 화면에서만 감춘다(game.js가 계속 값을 쓰므로 안전).
   ------------------------------------------------------------
   .benchmark-panel   → 프로필 증거 카드의 눈금과 동일 정보
   .packet-telemetry  → 검사 증거 카드와 같은 수치(지연/CPS/수정률)
   .confidence-block  → 프로필 증거 카드의 '시스템 위험 %'와 동일
   .deep-metrics      → 증거로 등록되지 않음. 대부분 DAY N 잠금 표시
   .network-state     → 판정에 관여하지 않는 전역 수치
   .signal-bars/.live-dot → 장식
   ============================================================ */
.benchmark-panel,
.packet-telemetry,
.confidence-block,
.deep-metrics,
.network-state,
.signal-bars,
.live-dot { display: none !important; }

/* 비워진 자리를 정리 */
.decision-panel > div:empty { display: none; }
.work-screen > .profile-panel { max-height: 44%; }

/* ============================================================
   PORTRAIT PASS — 같은 얼굴이 창구와 프로필에 두 번 크게 뜨던 문제.
   창구(부스)의 얼굴이 '지금 심사받는 사람'이므로 그쪽을 주인공으로 두고,
   프로필 쪽은 서류에 붙은 증명사진 크기의 원형 썸네일로 낮춘다.
   ============================================================ */
.profile-panel .portrait-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  padding: 9px 10px;
}
.profile-panel .portrait,
.work-screen > .profile-panel .portrait {
  flex: none;
  width: 74px;
  height: 74px;
  min-height: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #6b6552;
  box-shadow: 0 0 0 2px rgba(16,19,15,.45);
  background: #e7e0c9;
}
.profile-panel .portrait canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 아바타는 이미 원형 구도로 그려지므로 확대 크롭 없이 그대로 담는다 */
  object-position: 50% 42%;
  transform: none;
  image-rendering: pixelated;
}
/* 썸네일 옆 라벨 — 사진만 덩그러니 놓이지 않게 */
.profile-panel .portrait-wrap::after {
  content: "제출 증명사진 · 본인 대조용";
  color: #8f8871;
  font: 700 8px/1.5 "Malgun Gothic", sans-serif;
  letter-spacing: .02em;
}

/* 데스크톱 책상에서는 신원철이 짧아졌으니 높이 제한도 낮춘다 */
@media (min-width: 1024px) {
  .work-screen > .profile-panel { max-height: 38%; }
}

/* 신원철 본문: 라벨은 작게 죽이고 값은 크고 진하게 — 훑어서 읽히도록 */
.profile-panel .profile-data { padding: 2px 10px 10px; }
.profile-panel .profile-data div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(107, 101, 82, .5);
}
.profile-panel .profile-data div:last-child { border-bottom: 0; }
.profile-panel .profile-data dt {
  color: #8b8470;
  font: 700 7.5px/1.4 Consolas, monospace;
  letter-spacing: .07em;
}
.profile-panel .profile-data dd {
  margin: 0;
  color: #241f16;
  font: 800 11px/1.35 "Malgun Gothic", sans-serif;
  word-break: break-all;
}
/* 어두운 단말 배경일 때는 밝게 */
.terminal-panel .profile-data dd,
.work-screen[data-mobile-view] .panel.profile-panel:not(.desk-doc) .profile-data dd { color: inherit; }

/* ============================================================
   CHRONOLOGY FIX (모바일) — 부스 말풍선은 '지금 말하는 사람'을 보여주는
   장면 요소인데, 모바일에서는 대화 로그 위에 세로로 쌓인다.
   그 결과 최신 답변이 그것을 유발한 질문보다 위에 놓여
   "첫대사 → 답변 → 질문 → 답변" 으로 시간이 역행해 읽힌다.
   데스크톱은 부스와 로그가 좌우로 나뉘어 문제가 없으므로 모바일만 정리한다.
   말풍선을 지우는 대신 '지금 발화 중' 표시만 남긴다.
   ============================================================ */
@media (max-width: 700px) {
  .booth-speech p,
  .booth-speech small { display: none; }
  .booth-speech {
    left: 9px;
    bottom: 9px;
    width: auto;
    min-height: 0;
    padding: 4px 8px;
  }
  .booth-speech::before {
    content: "● 응답 수신 중";
    display: block;
    color: var(--ink);
    font: 800 8px/1.3 "Malgun Gothic", sans-serif;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .booth-speech::after { display: none; }
  /* 대화 로그가 이제 유일한 기록이므로 조금 더 높이를 준다 */
  #chatLog { max-height: none; }
}

.ev-quote { display: block; padding: 4px 2px; color: #241f16; font: 700 9.5px/1.55 "Malgun Gothic", sans-serif; word-break: keep-all; }