/* ============================================================
   서울 APP 진입점 (features/app-entry) — 목업 「진입점 (서울 APP)」 하위탭 디자인
   (mockup_sample.html 11차 .fx-* 를 이 기능 접두어 .aex-* 로 옮겨 자족 모듈로 둔다)

   ⛔ 호스트 클래스에 기대지 않는다 — 색은 **토큰이 있으면 토큰**, 없으면 폴백(ui-state.css와 같은 규약).
   ⛔ 전역 button{width:100%}·표 규칙에 먹히지 않게 이 파일 안에서 필요한 값은 다시 든다.
   ⛔ 색은 상태 토큰 그대로다(초록 여유 · 주황 혼잡 가능 · 빨강 초과) — 새 색을 만들지 않는다
      (descent.py 머리말과 같은 근거 — 색이 곧 등급이 되면 안 된다. 여기 색은 «간격 문턱»만 말한다).
   ============================================================ */
.aex { font-size: var(--fs-md, 12px); }

.aex-stale {
  margin-bottom: 8px; padding: 6px 10px; border-radius: var(--radius-sm, 6px);
  background: var(--status-danger-bg, #fef2f2); color: var(--status-danger, #dc2626);
  font-size: var(--fs-xs, 10px);
}

.aex-hint {
  background: var(--bg-sunken, #f8fafc); border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: var(--radius-sm, 6px); padding: 8px 10px; margin-bottom: 8px;
  font-size: var(--fs-xs, 10px); color: var(--text-secondary, #475569); line-height: 1.55;
}
.aex-hint .aex-t { display: block; margin-top: 3px; color: var(--text-muted, #64748b); }

.aex-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px;
}
@media (max-width: 640px) { .aex-metrics { grid-template-columns: repeat(2, 1fr); } }
.aex-m {
  background: var(--bg-sunken, #f8fafc); border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: var(--radius-md, 10px); padding: 10px; text-align: left;
}
.aex-mv { font-family: var(--font-mono, monospace); font-weight: 800; font-size: var(--fs-xl, 15px);
  color: var(--text-primary, #0f172a); line-height: 1.15; }
.aex-mv.warn { color: var(--status-warn, #d97706); }
.aex-mv.bad { color: var(--status-danger, #dc2626); }
.aex-mu { font-size: var(--fs-sm, 11px); font-weight: 700; color: var(--text-muted, #64748b); margin-left: 1px; }
.aex-mk { font-size: var(--fs-xs, 10px); color: var(--text-muted, #64748b); margin-top: 3px; }
.aex-ms { font-size: var(--fs-xs, 10px); color: var(--text-muted, #64748b); margin-top: 3px; overflow-wrap: anywhere; }

.aex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-bottom: 8px; }
.aex-empty {
  padding: 18px 10px; text-align: center; color: var(--text-muted, #64748b); font-size: var(--fs-sm, 11px);
  background: var(--bg-sunken, #f8fafc); border: 1px dashed var(--border-subtle, #e2e8f0);
  border-radius: var(--radius-md, 10px);
}

.aex-card {
  background: var(--bg-surface-elevated, #fff); border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: var(--radius-md, 10px); padding: 10px 12px; cursor: pointer;
}
.aex-card:hover { background: var(--bg-hover, #f1f5f9); }
.aex-card.warn { border-color: var(--status-warn, #d97706); }
.aex-card.over { border-color: var(--status-danger, #dc2626); }
.aex-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.aex-id { font-size: var(--fs-lg, 13px); font-weight: 800; color: var(--text-primary, #0f172a);
  font-family: var(--font-mono, monospace); }
.aex-dir { font-size: var(--fs-xs, 10px); color: var(--text-muted, #64748b); font-weight: 700; }
.aex-chip {
  font-size: var(--fs-xs, 10px); font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full, 9999px);
  background: var(--status-live-bg, #ecfdf5); color: var(--status-live, #059669);
  border: 1px solid var(--status-live, #059669);
}
.aex-chip.warn { background: var(--status-warn-bg, #fffbeb); color: var(--status-warn, #d97706); border-color: var(--status-warn, #d97706); }
.aex-chip.over { background: var(--status-danger-bg, #fef2f2); color: var(--status-danger, #dc2626); border-color: var(--status-danger, #dc2626); }
.aex-n { margin-left: auto; font-size: var(--fs-xl, 15px); font-weight: 800; color: var(--text-primary, #0f172a);
  font-family: var(--font-mono, monospace); }
.aex-n small { font-size: var(--fs-xs, 10px); font-weight: 600; color: var(--text-muted, #64748b); margin-left: 2px; }

/* 게이지 — 0~scale, warnN·cap 눈금 */
.aex-gauge {
  position: relative; height: 10px; border-radius: var(--radius-full, 9999px);
  background: var(--bg-sunken, #f8fafc); border: 1px solid var(--border-subtle, #e2e8f0); overflow: hidden;
}
.aex-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-full, 9999px) 0 0 var(--radius-full, 9999px); }
.aex-fill.ok { background: var(--status-live, #059669); }
.aex-fill.warn { background: var(--status-warn, #d97706); }
.aex-fill.over { background: var(--status-warn, #d97706); }
.aex-over {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, var(--status-danger, #dc2626), var(--status-danger, #dc2626) 4px, transparent 4px, transparent 8px);
}
.aex-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; }
.aex-tick.warn { background: var(--status-warn, #d97706); }
.aex-tick.cap { background: var(--status-danger, #dc2626); }
.aex-num { position: relative; height: 12px; font-size: 10px; color: var(--text-muted, #64748b); margin: 3px 0 8px; font-family: var(--font-mono, monospace); }
.aex-num > span:first-child { position: absolute; left: 0; }
.aex-num > span.mx { position: absolute; right: 0; }
.aex-num .wn, .aex-num .cp { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.aex-num .wn { color: var(--status-warn, #d97706); font-weight: 700; }
.aex-num .cp { color: var(--status-danger, #dc2626); font-weight: 700; }

/* 진입 분포 — 판정 색은 쓰지 않는다(⛔ 2분 칸 겹침 판정 없음 — 머리말 참조) */
.aex-bins { display: flex; gap: 2px; height: 30px; align-items: flex-end; }
.aex-bin { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.aex-bin i { display: block; width: 100%; border-radius: 2px 2px 0 0; background: var(--accent-cyan, #0284c7); opacity: .55; min-height: 0; }
.aex-bin-v { font-size: 9px; color: var(--text-muted, #64748b); line-height: 1.3; }
/* 분포 아래 축 — 왼쪽 시작 시각 · 가운데 설명 · 오른쪽 끝 시각 (칸마다 시각은 막대 툴팁) */
.aex-bin-lb { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--text-muted, #64748b); margin: 3px 0 7px; }
.aex-bin-lb > span:first-child, .aex-bin-lb > span:last-child { font-family: var(--font-mono, monospace); flex: none; }
.aex-bin-lb > span:nth-child(2) { text-align: center; min-width: 0; }
.aex-bin-t { display: none; }

.aex-concl {
  font-size: var(--fs-sm, 11px); color: var(--text-primary, #0f172a); line-height: 1.6;
  padding: 7px 9px; border-radius: var(--radius-sm, 6px);
  background: var(--bg-sunken, #f8fafc); border: 1px solid var(--border-subtle, #e2e8f0);
}
.aex-card.warn .aex-concl { background: var(--status-warn-bg, #fffbeb); border-color: var(--status-warn, #d97706); }
.aex-card.over .aex-concl { background: var(--status-danger-bg, #fef2f2); border-color: var(--status-danger, #dc2626); }

/* 추정 배정 — 예측 경로에 공식 진입점이 없어 가장 가까운 진입점으로 배정한 편(서버 how='near').
   ⛔ 경고색이 아니다(틀린 값이 아니라 «근거가 약한 배정») — 중립 점선 테두리로만 구분한다. */
.aex-nearnote { margin-top: 6px; font-size: var(--fs-xs, 10px); color: var(--text-muted, #64748b); }
.aex-nearnote b { color: var(--text-secondary, #475569); }
.aex-near {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: var(--radius-full, 9999px);
  border: 1px dashed var(--border-medium, #cbd5e1); color: var(--text-muted, #64748b);
  font-family: inherit; font-size: 9px; font-weight: 700; line-height: 1.5; vertical-align: 1px;
}
.aex-routes { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.aex-rt-k { font-size: var(--fs-xs, 10px); color: var(--text-muted, #64748b); margin-right: 2px; }
.aex-rt {
  font-size: var(--fs-xs, 10px); color: var(--text-secondary, #475569); background: var(--bg-sunken, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0); border-radius: var(--radius-full, 9999px); padding: 2px 8px;
}
.aex-rt b { color: var(--text-primary, #0f172a); font-weight: 700; }

/* 펼치면 나오는 편 목록 */
.aex-list { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border-subtle, #e2e8f0); }
.aex-list table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs, 10px); }
.aex-list th { text-align: left; color: var(--text-muted, #64748b); font-weight: 700; padding: 2px 4px; }
.aex-list td { padding: 2px 4px; border-top: 1px solid var(--border-subtle, #e2e8f0); white-space: nowrap; }
.aex-list td:nth-child(3) { white-space: normal; }
.aex-mono { font-family: var(--font-mono, monospace); }
.aex-b { font-weight: 700; }
.aex-dim { color: var(--text-muted, #64748b); }

.aex-foot {
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border-subtle, #e2e8f0);
  font-size: var(--fs-xs, 10px); line-height: 1.6; color: var(--text-muted, #64748b);
}
.aex-foot:first-of-type { margin-top: 10px; }
/* 2026-09-30 — 각주 접이 칸 (「불필요한 설명은 제거, 부족한 설명은 도움말로」) */
.aex-more { margin-top: 10px; }
.aex-more > summary { cursor: pointer; font-size: var(--fs-xs, 10px); color: var(--text-muted, #64748b); list-style: none; }
.aex-more > summary::-webkit-details-marker { display: none; }
.aex-more[open] > summary { margin-bottom: 2px; }