/* ════════════════════════════════════════
   통계자료 AI 분석 화면 서식 — public/css/stat-ai.css

   ★★화면 구조·서식은 **의사록 AI 분석(.mn-sem-*)을 그대로 함께 쓴다**(2026-09-23 사무장 확정).
     제목·질문 상자·안내·단추줄은 public/css/minutes.css 에 있다 — 여기에 베껴 두지 않는다.
     베껴 두면 한쪽만 고쳐져 두 화면이 슬그머니 갈라진다.
   ★이 화면은 **목록형 고정 스크롤(CLAUDE.md 10항)을 쓰지 않는다** — 문답 화면이라
     질문칸을 붙잡아 두면 답이 좁은 칸에 갇힌다. 쪽 전체가 스크롤된다.
     20건 페이징(9항)과 표 머리행 sticky 는 그대로 쓴다.

   색은 교단 CI 를 따른다(Emperor #4b207f · Denim #2f557f · Campfire #e36520 · Tree Frog #448d21).
   ★계열색 위에 흰 글자를 얹지 않는다 — 「옅은 바탕 + 진한 글자」로 쓴다.
════════════════════════════════════════ */

/* 답 — 의사록의 #mn-sem-thread 와 **같은 폭·같은 자리**(그쪽은 id 라 함께 못 쓴다).
   ★질문칸과 폭을 맞춘다. 답만 넓히면 두 덩이의 왼쪽 끝이 어긋나 **다른 화면처럼 보인다.**
     열이 많은 표(삼대성장은 표준·실적·달성률까지 열한 칸)는 표 안에서 옆으로 민다.
     그래도 좁으면 여기 한 줄(760px)만 늘리면 된다 — 다른 곳은 손댈 것이 없다. */
.sa-body { max-width: 760px; margin: 16px auto 0; }
/* 도움말·단추줄도 같은 폭 안에 */
.sa-sem .sa-help { max-width: 760px; margin: 14px auto 0; }

/* 도움말 — 평소에는 접혀 있다(늘 띄워 두면 아무도 읽지 않는다) */
.sa-help {
  background: #f3eefb; border: 1.5px solid #d9c9ef; border-radius: 10px;
  padding: 11px 14px; font-size: 12.5px; color: #4b207f; line-height: 1.75; margin-bottom: 12px;
}
.sa-help p { margin: 0 0 7px; }
.sa-help p:last-child { margin-bottom: 0; }

/* 예시 질문 칩 */
.sa-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
.sa-chip {
  background: #f4f5f8; border: 1px solid #dfe3ea; border-radius: 999px;
  padding: 5px 12px; font-size: 12px; color: #465060; cursor: pointer;
}
.sa-chip:hover { background: #ece9f6; border-color: #cbbde6; color: #4b207f; }

/* 배지 */
.sa-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.sa-usage { background: #eef1f6; color: #46506a; }
.sa-over  { background: #fbeaea; color: #c0392b; }
.sa-ok    { background: #e7f6ec; color: #0f7a3d; }
.sa-ask-b { background: #fdf6e3; color: #7a5b12; }
.sa-fail  { background: #fbeaea; color: #c0392b; }

/* ★AI 가 알아들은 조건 — 한 줄 띠(의사록 AI 화면과 같은 모양).
   잘못 알아들어도 표는 멀쩡해 보이므로 이 한 줄은 없애지 않는다. */
.sa-interp {
  font-size: 12px; color: #5a6675; background: #f4f6f9; border-radius: 6px;
  padding: 6px 10px; margin-bottom: 9px; line-height: 1.6;
}
.sa-interp b { color: #2f557f; }

/* 안내 상자(되묻기·막힘·오류) */
.sa-alert { border-radius: 10px; padding: 13px 16px; font-size: 13.5px; line-height: 1.7; }
.sa-alert-title { font-weight: 800; margin-bottom: 5px; }
.sa-alert-ask    { background: #fdf6e3; color: #7a5b12; }
.sa-alert-warn   { background: #fdf0e3; color: #a8480d; }
.sa-alert-danger { background: #fbeaea; color: #8a1f1f; }

/* 결과 머리줄 */
.sa-result-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; color: #7b8794;
}

/* 결과 표 — ★열이 아주 많으면 **옆으로 밀어** 본다(잘라 내면 열이 있는 줄도 모른다) */
.sa-list-wrap {
  background: #fff; border: 1.5px solid var(--border-light); border-radius: 12px;
  overflow: hidden; overflow-x: auto;
}
.sa-list-wrap table { width: 100%; border-collapse: collapse; }
.sa-list-wrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: #efeaf8; color: #3a1a63;
  font-size: 12.5px; font-weight: 700; text-align: center;
  padding: 9px 8px; border-bottom: 1.5px solid #d9c9ef; white-space: nowrap;
}
.sa-unit { font-weight: 500; color: #6b5a86; margin-left: 2px; }
.sa-list-wrap tbody td {
  padding: 8px 9px; font-size: 13px; border-top: 1px solid #eef0f3; vertical-align: middle;
}
.sa-list-wrap tbody tr:hover { background: #fbfaff; }
.sa-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* 페이지 번호 — 표를 감싼 카드 안, 마지막 행 아래 */
#sa-pagi {
  display: flex; justify-content: center; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 16px 12px 18px; border-top: 1px solid #eef0f3; background: #fff;
}
#sa-pagi:empty { display: none; }

/* 처음 들어왔을 때 — 예시 칩이 이 안에 들어 있다(답이 나오면 통째로 사라진다) */
.sa-empty { text-align: center; color: var(--text-sub); padding: 40px 16px; }
.sa-empty-sub { font-size: 12px; color: #9aa3ae; margin-top: 10px; }
.sa-chips-c { justify-content: center; }

/* 이력 표 */
.sa-hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sa-hist-table thead th {
  position: sticky; top: 0; z-index: 2; background: #efeaf8; color: #3a1a63;
  font-size: 12.5px; font-weight: 700; padding: 8px; border-bottom: 1.5px solid #d9c9ef;
}
.sa-hist-table tbody td { padding: 8px; border-top: 1px solid #eef0f3; vertical-align: middle; }
.sa-hist-ts { color: var(--text-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sa-hist-reason { font-size: 11.5px; color: #8a93a1; margin-top: 3px; }

/* ── 요약(안내 문장) 카드 ── 조건 카드와 결과 표 사이에 놓인다.
   문장은 서버가 코드로 만든 것이라 표의 숫자와 어긋나지 않는다(lib/stat-narrate.js). */
.sa-narr { margin: 0 0 12px; }
.sa-narr-list { margin: 0; padding-left: 17px; }
.sa-narr-list li { font-size: 13.5px; line-height: 1.85; color: #22283a; }
.sa-narr-warn { color: #a8480d; }
.sa-narr-foot { display: flex; justify-content: flex-end; margin-top: 7px; }
.sa-narr-ai { margin-top: 9px; padding: 9px 12px; border-left: 3px solid #3e8391;
  background: #f5fafb; border-radius: 0 6px 6px 0;
  font-size: 13px; line-height: 1.75; color: #26303c; }
.sa-narr-ai-head { font-weight: 700; color: #3e8391; margin-bottom: 4px; }
.sa-narr-ai-model { font-weight: 400; font-size: 11px; color: #7b8794; }
.sa-narr-ai-cut { margin-top: 6px; font-size: 12px; color: #7f264a; }
.sa-narr-ai-err { color: #7f264a; }

/* ── 답이 여럿일 때 ── 물음이 두세 가지면 답을 나눠 보인다(2026-09-21) */
.sa-multi { font-size: 12px; color: #5a6675; margin-bottom: 10px; }
.sa-multi-model { color: #9aa3ae; margin-left: 6px; }
.sa-ans-no {
  font-size: 14px; font-weight: 800; color: #4b207f;
  margin: 16px 0 7px; padding-top: 12px; border-top: 1px solid #e8eaef;
}
.sa-ans-no:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* 표를 생략했을 때 펴 보는 링크 */
.btn-link {
  background: none; border: 0; padding: 0; font-size: 12px; color: #2f557f;
  text-decoration: underline; cursor: pointer;
}
.btn-link:hover { color: #4b207f; }

/* ── 이력 창 탭 ── 「전체」와 「못 답한 질문」 */
.sa-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid #e8eaef; }
.sa-tab {
  background: none; border: 0; border-bottom: 2.5px solid transparent; cursor: pointer;
  padding: 8px 14px; font-size: 13.5px; font-weight: 700; color: #8a93a1;
}
.sa-tab:hover { color: #4b207f; }
.sa-tab.on { color: #4b207f; border-bottom-color: #4b207f; }

/* ── 못 답한 질문 묶음 ── 많이 겪은 것부터 위에 온다 */
.sa-gap { border: 1px solid #e8eaef; border-radius: 8px; padding: 11px 13px; margin-bottom: 9px; }
.sa-gap-head { display: flex; align-items: center; gap: 8px; }
.sa-gap-no {
  width: 22px; height: 22px; border-radius: 50%; background: #f3eefb; color: #4b207f;
  font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.sa-gap-cnt { font-size: 13px; font-weight: 800; color: #22283a; }
.sa-gap-kind { font-size: 12px; font-weight: 700; }
/* ★0행이 가장 위험하다 — 오류처럼 보이지 않아 그대로 믿게 된다 */
.sa-gap-empty   { color: #7f264a; }
.sa-gap-clarify { color: #a8480d; }
.sa-gap-fail    { color: #5a6675; }
.sa-gap-why { font-size: 12.5px; color: #26303c; margin: 6px 0 0; line-height: 1.6; }
.sa-gap-qs { margin: 7px 0 0; padding-left: 17px; }
.sa-gap-qs li {
  font-size: 12.5px; color: #5a6675; line-height: 1.9;
  display: list-item;
}
.sa-gap-qs li span { margin-right: 6px; }

/* ── 그래프·대시보드 ── 질문에 「그래프」·「대시보드」를 적었을 때만 나온다(2026-09-24) */
.sa-viz { margin: 0 0 14px; }
.sa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sa-kpi { background: #fff; border: 1.5px solid var(--border-light); border-top: 3px solid #2f557f; border-radius: 10px; padding: 10px 13px; }
.sa-kpi-l { font-size: 12px; color: #5a6675; font-weight: 700; }
.sa-kpi-v { font-size: 21px; font-weight: 800; color: #22283a; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sa-kpi-nv { color: #b0b7c2; }
.sa-kpi-u { font-size: 12px; font-weight: 600; color: #7b8794; margin-left: 3px; }
.sa-kpi-s { font-size: 11.5px; color: #5a6675; margin-top: 5px; line-height: 1.6; }
.sa-charts { display: flex; flex-direction: column; gap: 12px; }
.sa-chart { background: #fff; border: 1.5px solid var(--border-light); border-radius: 12px; padding: 12px 14px 10px; }
.sa-chart-title { font-size: 13.5px; font-weight: 800; color: #4b207f; margin-bottom: 6px; }
.sa-chart-warn { font-size: 11.5px; color: #a8480d; margin-top: 4px; }
.sa-svg { width: 100%; height: auto; display: block; }
.sa-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #465060; margin: 0 0 14px; }
.sa-legend i, .sa-pie-row i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.sa-pie { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.sa-svg-pie { width: 200px; height: 200px; flex: none; }
.sa-pie-row { display: flex; align-items: center; font-size: 12.5px; line-height: 2; gap: 0; }
.sa-pie-nm { min-width: 90px; color: #22283a; }
.sa-pie-row b { margin: 0 8px 0 6px; font-variant-numeric: tabular-nums; }
.sa-pie-row em { font-style: normal; color: #7b8794; }
.sa-viz-note { font-size: 12px; color: #7b8794; margin-top: 6px; }
.sa-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sa-chart-head .sa-chart-title { margin-bottom: 0; }
.sa-detail { margin-top: 12px; }
.sa-detail > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #2f557f; padding: 6px 2px; list-style: none; }
.sa-detail > summary::before { content: '▸ '; }
.sa-detail[open] > summary::before { content: '▾ '; }
.sa-detail > .sa-charts { margin-top: 8px; }
.sa-legend-note { color: #7f264a; font-weight: 700; }
.sa-kpi-pair { grid-column: span 2; }
.sa-kpi-rate { float: right; font-size: 11.5px; font-weight: 800; color: #e36520; }
.sa-kpi-rate.ok { color: #448d21; }
.sa-kpi-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 5px; gap: 10px; }
.sa-kpi-rl { font-size: 12px; color: #7b8794; font-weight: 700; }
.sa-kpi-rv { font-size: 18px; font-weight: 800; color: #22283a; font-variant-numeric: tabular-nums; }
.sa-kpi-act { color: #2f557f; }
.sa-kpi-h { font-size: 13px; font-weight: 800; color: #4b207f; margin: 4px 0 8px; }
.sa-grps { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sa-grp .sa-kpi-l { font-size: 14px; color: #22283a; margin-bottom: 6px; }
.sa-grp-it { border-top: 1px dashed #e1e5ec; padding: 6px 0 4px; }
.sa-grp-h { display: flex; justify-content: space-between; font-size: 12.5px; color: #5a6675; }
.sa-grp-h .sa-kpi-rate { float: none; }
.sa-grp-v { font-size: 14.5px; font-weight: 800; color: #22283a; font-variant-numeric: tabular-nums; }

/* ── 명단 글(2026-10-06) ── 「시내지역 : 서울중앙, 마포, …」 — 표와 같은 자료를 줄 글로 */
.sa-listtext { margin: 0 0 12px; border: 1.5px solid #d6e2ee; border-radius: 10px; background: #fbfdff; }
.sa-listtext-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid #e3ebf3; }
.sa-listtext-title { font-size: 13px; font-weight: 800; color: #2f557f; }
.sa-listtext-sum { font-size: 12px; color: #6b7684; }
.sa-listtext-body { padding: 8px 12px 10px; max-height: 420px; overflow-y: auto; }
.sa-listtext-line { font-size: 13.5px; line-height: 1.8; color: #22283a; padding: 2px 0; border-bottom: 1px dashed #edf1f5; overflow-wrap: anywhere; }
.sa-listtext-line:last-child { border-bottom: 0; }
.sa-listtext-line b { color: #2f557f; }