/* 한국석유관리원 시연용 — 로고의 초록/회색 계열에 맞춘 최소 스타일 */
:root {
  --green: #4CAF2F;
  --green-dark: #3d8f26;
  --ink: #1f2328;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f7f8fa;
  --card: #ffffff;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  line-height: 1.6;
}

/* ---------- 상단 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { height: 30px; width: auto; display: block; }
.wordmark { align-items: baseline; gap: 4px; font-weight: 800; }
.wm-k { color: var(--green); font-size: 22px; }
.wm-petro { font-size: 20px; letter-spacing: -0.5px; }
.wm-ko { font-size: 14px; color: var(--muted); margin-left: 4px; font-weight: 700; }
.divider { width: 1px; height: 20px; background: var(--line); }
.title { font-size: 15px; font-weight: 600; color: var(--muted); }

.conn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(76, 175, 47, .15); }

/* ---------- 본문 ---------- */
.wrap { max-width: 900px; margin: 0 auto; padding: 28px 20px 64px; }

.searchbar { display: flex; gap: 8px; }
.searchbar input {
  flex: 1; min-width: 0; padding: 14px 16px; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink); outline: none;
}
.searchbar input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(76, 175, 47, .12); }
.searchbar button {
  padding: 0 24px; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--green); border: 0; border-radius: var(--radius); cursor: pointer;
}
.searchbar button:hover:not(:disabled) { background: var(--green-dark); }
.searchbar button:disabled { opacity: .5; cursor: default; }

.recent { margin-top: 14px; }
.recent-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px; font-size: 13px; color: #374151; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
}
.chip:hover { border-color: var(--green); color: var(--green-dark); }

/* ---------- 패널 ---------- */
.panel {
  margin-top: 18px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-title { font-size: 14px; font-weight: 700; }
.meta, .elapsed { font-size: 12px; color: var(--muted); }
.elapsed { font-variant-numeric: tabular-nums; }

/* ---------- 진행 상태 ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.step .ico { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.step.active .ico { background: var(--green); animation: pulse 1s infinite; }
.step.done .ico { background: var(--green); }
.step.done .lbl { color: var(--muted); }
.step .lbl { flex: 1; min-width: 0; }
.step .sec { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.live { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.live-label { font-size: 12px; color: var(--green-dark); font-weight: 600; margin-bottom: 4px; }
.live-text { font-size: 14px; color: #374151; white-space: pre-wrap; word-break: break-word; }
.live-text::after {
  content: '▍'; color: var(--green); animation: blink .9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0 } }

/* ---------- 답변 ---------- */
.answer-text { font-size: 16px; white-space: pre-wrap; word-break: break-word; }

/* ---------- 참고 문서 ---------- */
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc { padding: 12px 14px; background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px; }
.doc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.doc-title { font-size: 14px; font-weight: 600; }
.doc-score { font-size: 12px; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.doc-body {
  margin-top: 6px; font-size: 13px; color: #4b5563; white-space: pre-wrap; word-break: break-word;
  max-height: 9.5em; overflow: hidden;
}
.doc-foot { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---------- 안내 / 오류 ---------- */
.empty { margin-top: 40px; text-align: center; color: var(--muted); }
.empty .sub { font-size: 13px; }
.error {
  margin-top: 18px; padding: 14px 16px; font-size: 14px;
  color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: var(--radius);
}

@media (max-width: 600px) {
  .wrap { padding: 20px 14px 48px; }
  .searchbar { flex-direction: column; }
  .searchbar button { padding: 12px; }
  .title { display: none; }
}

/* ---------- 탭 ---------- */
.tabs {
  display: flex; gap: 4px; padding: 0 24px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.tab {
  padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--green-dark); border-bottom-color: var(--green); }

/* ---------- 진행 중 인사이트 ---------- */
.insight {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.insight-label { font-size: 12px; color: var(--muted); }
.badge {
  padding: 3px 10px; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--green); border-radius: 999px;
}
.badge.gray { background: #6b7280; }
.mini-docs {
  flex-basis: 100%; list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.mini-docs li {
  font-size: 13px; color: #4b5563; padding-left: 12px; position: relative;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-docs li::before { content: '·'; position: absolute; left: 2px; color: var(--green); }

/* ---------- 모델 정보 ---------- */
.models { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.model-chip {
  padding: 3px 10px; font-size: 12px; color: #4b5563;
  background: #f3f4f6; border-radius: 999px;
}
.model-chip b { color: var(--ink); font-weight: 600; }
.model-chip .ms { color: var(--green-dark); }

/* ---------- 검색어 목록 탭 ---------- */
.hist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hist-title { font-size: 15px; font-weight: 700; }
.ghost {
  padding: 7px 14px; font-size: 13px; color: #374151; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}
.ghost:hover { border-color: var(--green); color: var(--green-dark); }
.ghost.small { padding: 4px 10px; font-size: 12px; flex: none; }

.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hist-item { padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.hist-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hist-q { font-size: 15px; font-weight: 600; min-width: 0; }
.hist-a { margin-top: 8px; font-size: 14px; color: #4b5563; white-space: pre-wrap; word-break: break-word; }
.hist-docs { margin-top: 8px; }
.hist-docs summary { font-size: 12px; color: var(--green-dark); cursor: pointer; }
.hist-docs .mini-docs li { white-space: normal; }
.hist-date { margin-top: 8px; font-size: 12px; color: var(--muted); }
.hist-empty { padding: 40px 0; text-align: center; color: var(--muted); }

.tab-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.tab.active .tab-count { color: var(--green-dark); }
.hist-count { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- 정책 차단 ---------- */
.panel.blocked { border-color: #f5c26b; background: #fffaf0; }
.blocked-head { display: flex; align-items: center; gap: 8px; }
.blocked-icon { font-size: 18px; }
.blocked-title { font-size: 15px; font-weight: 700; color: #b45309; }
.blocked-msg { margin-top: 10px; font-size: 15px; color: #78350f; white-space: pre-wrap; word-break: break-word; }
.blocked-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.btag {
  padding: 3px 10px; font-size: 12px; color: #92400e;
  background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px;
}
.btag.stage { background: #fff; border-color: #f5c26b; }
.blocked-note { margin-top: 10px; font-size: 12px; color: #a16207; }

/* ---------- 좌측 예시 질의 ---------- */
.layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 0; max-width: 1220px; margin: 0 auto;
}
.layout .wrap { max-width: none; margin: 0; }
.sidebar {
  padding: 28px 18px 64px; border-right: 1px solid var(--line);
  background: var(--card); min-width: 0;
}
.side-title { font-size: 14px; font-weight: 700; }
.side-note { margin-top: 2px; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.side-group { margin-bottom: 18px; }
.side-group-title {
  font-size: 12px; font-weight: 700; color: var(--green-dark);
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.side-group-hint { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.side-q {
  display: block; width: 100%; margin-bottom: 4px; padding: 8px 10px;
  font-size: 13px; line-height: 1.45; text-align: left; color: #374151; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.side-q:hover { background: #f3faf1; border-color: #d6ecd0; color: var(--green-dark); }

/* ---------- 범위 밖 질문 ---------- */
.panel.outscope { border-color: #cbd5e1; background: #f8fafc; }
.outscope-title { font-size: 15px; font-weight: 700; color: #475569; }
.outscope-msg { margin-top: 10px; font-size: 14px; color: #64748b; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 14px; }
  .side-group { margin-bottom: 12px; }
}
.step .cum { font-size: 11px; color: #9ca3af; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.step .sec { min-width: 44px; text-align: right; }

/* hidden 속성보다 display 선언이 우선이라 .layout(grid) 은 hidden 이 먹지 않는다.
   탭 전환이 display 로 동작하므로 명시적으로 눌러 준다. */
[hidden] { display: none !important; }
.panel.graph { border-color: #cfe8c6; background: #fbfefa; }
.panel.graph .doc { background: #fff; border-color: #e3f0dd; }

/* ---------- LLMOps 기능 대응표 ---------- */
.spec-head { margin-bottom: 16px; }
.spec-title { margin: 0; font-size: 20px; font-weight: 800; }
.spec-sub { margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.spec-badges { display: flex; gap: 6px; }
.sb { padding: 3px 10px; font-size: 12px; font-weight: 700; border-radius: 999px; }
.sb.ok   { color: #fff;    background: var(--green); }
.sb.part { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; }
.sb.road { color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; }

table.spec {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
table.spec th, table.spec td {
  padding: 10px 12px; font-size: 13px; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
table.spec thead th { background: #f8faf7; font-weight: 700; font-size: 12px; color: #475569; }
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tr.hi td { background: #fbfefa; }
table.spec td:first-child { font-weight: 600; white-space: nowrap; }
table.spec td:last-child { color: var(--muted); font-size: 12px; }
table.spec .c { text-align: center; width: 48px; }
table.spec b { color: var(--green-dark); }

.d { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.d.ok   { background: var(--green); }
.d.part { background: #f5c26b; }
.d.road { background: #cbd5e1; }

.spec-foot { margin-top: 12px; font-size: 12px; color: var(--muted); }

@media (max-width: 720px) {
  table.spec td:last-child, table.spec th:last-child { display: none; }
}