/* AI 시연 화면(예시). 앱 공통 모양을 따른다: 글자 12px, 테두리 1px, 모서리 반경 0 */
.ad { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; min-width: 0; padding: 6px; }
.ad-head { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); padding: 3px 6px; min-height: 32px; flex: 0 0 auto; }
.ad-title { font-weight: 700; font-size: 13px; color: var(--purple); white-space: nowrap; }
.ad-tabs { flex: 1 1 auto; min-height: 0; }
.ad-tabs > .tabs-body { display: flex; flex-direction: column; overflow: hidden; }
.ad-page { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }
.ad-note { flex: 0 0 auto; line-height: 20px; padding: 2px; }
.ad-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.ad-chips > .muted { padding-top: 2px; }
.ad-split { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 6px; }
.ad-left, .ad-right { min-height: 0; display: flex; flex-direction: column; }
.ad-tablebox { flex: 1 1 0; min-height: 0; display: flex; }
.ad-tablebox > .grid-wrap { flex: 1 1 auto; width: 100%; }
.ad-detail { flex: 1 1 0; min-height: 0; overflow: auto; background: #fff; border: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ad-dhead { font-size: 13px; }
.ad-sub { font-weight: 700; margin-top: 4px; }
.ad-lines > div { border-bottom: 1px solid var(--line-soft); padding: 2px 0; }
.ad-lines > .ad-bad { color: var(--red); font-weight: 700; background: #fdeeee; }
.ad-ol { margin: 0; padding-left: 18px; line-height: 20px; }
.ad-amt { padding: 2px 0; }
.ad-risk { display: flex; align-items: center; gap: 4px; }
.ad-risk-t { flex: 1 1 auto; height: 10px; background: #eef1f5; }
.ad-risk-t > i { display: block; height: 100%; min-width: 2px; }
.ad-risk-v { font-weight: 700; min-width: 32px; text-align: right; }
.ad-hbars { display: flex; flex-direction: column; gap: 2px; min-width: 300px; flex: 1 1 300px; }
.ad-hbar { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 6px; }
.ad-hbar-t { height: 12px; background: #eef1f5; }
.ad-hbar-t > i { display: block; height: 100%; }
.ad-hbar-v { text-align: right; }
.ad-vbars { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 4px 2px; }
.ad-vbar { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 46px; }
.ad-vbar-t { flex: 1 1 auto; width: 28px; display: flex; align-items: flex-end; background: #eef1f5; }
.ad-vbar-t > i { display: block; width: 100%; }
.ad-vbar-v { font-weight: 700; font-size: 11px; }
.ad-vbar-l { font-size: 11px; color: var(--muted); }
.ad-two { flex: 0 0 auto; display: flex; gap: 24px; background: #fff; border: 1px solid var(--line); padding: 4px 10px; }
.ad-pano { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.ad-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.ad-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.ad-chat { flex: 1 1 0; min-height: 0; overflow: auto; background: #fff; border: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.ad-msg { max-width: 760px; padding: 6px 10px; line-height: 20px; border: 1px solid var(--line-soft); }
.ad-msg.me { align-self: flex-end; background: var(--blue-soft); }
.ad-msg.ai { align-self: flex-start; background: #f5f2fb; border-color: #d8d0ec; display: flex; flex-direction: column; gap: 6px; }
.ad-mini { width: auto; min-width: 420px; background: #fff; }
.ad-sqlbar { display: flex; align-items: center; gap: 4px; }
.ad-sql { margin: 0; padding: 6px 8px; background: #1f2430; color: #d6e2f5; font: 11px/1.5 Consolas, monospace; white-space: pre-wrap; }
.ad-ask { flex: 0 0 auto; }
.ad-ask > .inp { flex: 1 1 auto; }
.btn.ad-mic { min-width: 86px; }
.btn.ad-mic.on { background: var(--red); border-color: var(--red); color: #fff; }
.ad-detail .ad-hbars { flex: 0 0 auto; }
.ad-page > .row > select.inp { width: 180px; }
.ad-scroll { overflow: auto; }
.ad-box { flex: 0 0 auto; background: #fff; border: 1px solid var(--line); padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.ad-box > .grid-wrap { height: auto; }
.ad-map { width: 100%; max-width: 1320px; height: auto; display: block; }
.ad-grid3 { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ad-grid3 .ad-hbar { grid-template-columns: 150px 1fr 90px; }
.ad-full { color: var(--green); font-weight: 700; }
.ad-part { color: var(--orange); font-weight: 700; }
.ad-grid3 .ad-vbars { gap: 4px; }
.ad-grid3 .ad-vbar { min-width: 0; flex: 1 1 0; }