/* 통합 관리 검색 · 신호등 · 이력.
   directory.css 와 같은 토큰(var(--bg) 등)을 쓴다. 새 색을 만들지 않는다. */

.mid-hint{margin:10px 0 0;color:var(--muted);font-size:13px}
.mid-filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.mid-filters button{padding:6px 11px;font-size:12px;background:var(--bg);color:var(--ink)}
.mid-filters button.on{background:var(--blue);color:#fff}

.mid-state{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:14px}
.mid-state.info{background:var(--sky);color:var(--blue)}
.mid-state.warn{background:#fff6e6;color:#8a5a00}

.mid-results{display:grid;gap:8px;margin-top:14px}
.mid-hit{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  width:100%;padding:12px 14px;background:var(--bg);border:1px solid transparent;
  border-radius:11px;text-align:left;color:var(--ink)}
.mid-hit:hover{border-color:var(--blue);background:#fff}
.mid-hit.exact{border-color:var(--blue);background:#fff}
/* 번호가 눈에 먼저 들어와야 한다 — 이름으로 찾은 사람이 번호를 알게 되는 자리다. */
.mid-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;
  color:var(--blue);font-size:14px;letter-spacing:.4px}
.mid-code.none{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:0}
.mid-main strong{display:block}
.mid-main small{display:block;margin-top:3px;color:var(--muted)}
.mid-type{color:var(--muted);font-size:12px;white-space:nowrap}

/* 신호등 — 색만으로 뜻을 전하지 않는다. 글자가 함께 있다. */
.mid-signals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.mid-signal{padding:11px 12px;background:var(--bg);border-radius:10px;text-align:left;
  width:100%;color:var(--ink);border:1px solid transparent}
.mid-signal:hover{border-color:var(--blue)}
.mid-signal .lamp{font-size:13px}
.mid-signal strong{display:block;margin-top:3px;font-size:13px}
.mid-signal small{display:block;margin-top:4px;color:var(--muted);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mid-signal.g{background:#eefaf3}
.mid-signal.y{background:#fff8e8}
.mid-signal.r{background:#fdeeee}
.mid-signal.u{background:#f2f0fb}

.mid-detail{margin-top:12px;padding:12px 14px;background:var(--bg);border-radius:10px;
  font-size:13px}
.mid-detail dt{color:var(--muted);font-size:12px;margin-top:8px}
.mid-detail dt:first-child{margin-top:0}
.mid-detail dd{margin:2px 0 0}

.mid-timeline{display:grid;gap:0;margin-top:14px}
.mid-event{display:grid;grid-template-columns:132px 92px 1fr;gap:12px;align-items:baseline;
  padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px}
.mid-event time{color:var(--muted);font-size:12px}
.mid-event em{font-style:normal;color:var(--muted)}

@media(max-width:900px){
  .mid-signals{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .mid-hit{grid-template-columns:1fr;gap:6px}
  .mid-type{white-space:normal}
  .mid-event{grid-template-columns:1fr;gap:2px}
}