@charset "utf-8";
/*
	기본정보
	- 생성일 : 2026-08-25
	- 포함내용 : KIS 트레이딩 어시스턴트 (플로팅 챗봇)
	             플로팅 버튼(열림 시 X), 우측 패널, 대화 말풍선, 입력창, 대화 기록

	기존 CSS 는 건드리지 않는다. 이 파일은 챗봇 전용이며
	web/fragment/kis/chatbot.html 의 chatbotScript 프래그먼트에서만 로드한다.

	아이콘은 포털 컨벤션대로 new_inc/img/common/ico-chatbot-*.svg 파일 23개로 두고
	여기서는 url() 로만 참조한다 (CSS 안에 data-URI 를 넣지 않는다).
	색이 두 가지인 아이콘은 기존 ico-snb-arrow / -active 처럼 파일을 나눴다.
	원본은 Figma 'KiS-Proj2_P3:Agent Design' > Component 페이지 > icon 컴포넌트 (16 그리드, stroke 2, #333333).

	치수·색은 Figma 'P3:Agent_Design_v1' (2026-04-23 확정, Option C) 기준이다.
	패널 400x780 / 확장 640x920 은 디자인 확정값이며, 확장 폭 640px 은
	한투 4/23 요청분이다. 디자인과 스토리보드가 어긋나면 디자인을 따른다.
	대조표 : _analysis/챗봇_디자인확정_대조표.md
*/

:root {
	--chatbot-size: 4.8rem;			/* 플로팅 버튼 (디자인 확정 48x48) */
	--chatbot-width: 40rem;			/* 기본 패널 너비  (디자인 확정 400px) */
	--chatbot-width-max: 64rem;		/* 확장 패널 너비  (한투 4/23 요청 640px) */
	--chatbot-height: 72rem;		/* 기본 패널 높이  (확정 Layout 400x720) */
	--chatbot-height-max: 86rem;	/* 확장 패널 높이  (확정 Layout 640x860) */
	--chatbot-gap: 4rem;			/* 화면 우측·하단 여백 */
	--chatbot-space: 1.2rem;		/* 플로팅 버튼 ↔ 패널 간격 */
	--chatbot-top: 14rem;			/* 헤더(10rem) 아래 여백 포함 */
	--chatbot-radius: 1.6rem;
	--chatbot-grip: .8rem;			/* 크기 조절 손잡이 폭 (테두리 안쪽 띠) */
	--chatbot-icon-dark: #333333;	/* 어두운 아이콘 (디자인 확정) */
	--chatbot-popover-text: #555555;/* 팝오버 본문 - 검정보다 옅은 회색 */
	--chatbot-send-off-bg: #f6f6f6;	/* 확정 BG/Surface - 입력창 비활성 배경, 보내기 비활성 원 */
	--chatbot-stop-bg: #e1e2e5;		/* 확정 - 정지 버튼 원 (비활성 원보다 한 톤 진하다) */
	--chatbot-border-off: #dbdbdb;	/* 확정 - 입력창 비활성 테두리, 드롭다운 테두리 */
	--chatbot-input-hover: #f5fafd;	/* 확정 BG/Blue-Gray (Dev Mode 확인) */
	--chatbot-primary-hover: #23abf1;	/* 확정 Brand/Primary Hover */
	--chatbot-primary-dark: #0175b0;	/* 확정 Brand/Primary-Dark (pressed) */
	--chatbot-ok: #22c55e;			/* 진행 단계 통과 체크 (연두). 디자인 토큰에 초록이 없어 여기서 정했다 */
	--chatbot-bg-pressed: #ecf8ff;		/* 확정 BG/Blue-Sky */
	--chatbot-text-muted: #73757c;		/* 확정 Text/Muted */
	--chatbot-error: #ff5959;			/* 확정 State/Error */
	--chatbot-error-dark: #d94c4c;		/* 확정 State/Error hover */
	--chatbot-chip-border: #cccccc;		/* 확정 - Smart Follow Chips 기본 테두리 */
	--chatbot-btn-line: #8f8f8f;		/* 확정 - BTN-Outline 테두리 */
	--chatbot-text-heading: #111111;	/* 확정 Text/Heading */
	--chatbot-chart-line: #e1e2e5;		/* 확정 Border/Line - 차트 그리드·테두리 */
}

/* 공통 */
#kis-chatbot {position: fixed; right: var(--chatbot-gap); bottom: var(--chatbot-gap); z-index: 100;}
#kis-chatbot [hidden] {display: none !important;}

/* 플로팅 버튼 - 닫힘은 로봇, 열림은 X (닫기 담당) */
.chatbot-fab {display: block; position: relative; width: var(--chatbot-size); height: var(--chatbot-size); padding: 1rem; border-radius: 1.6rem; background-color: var(--color-point); box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, .15); cursor: pointer; transition: background-color var(--animation-spead) var(--animation-timing);}
.chatbot-fab .ico {display: block; width: 100%; height: 100%; background: url('./../img/common/ico-chatbot-agent.svg') no-repeat center / contain;}
.chatbot-fab:hover {background-color: var(--chatbot-primary-dark);}
.chatbot-fab:focus-visible {outline: .2rem solid var(--color-point); outline-offset: .4rem;}
/* 열림 상태 = 닫기 버튼. 흰 배경 + 어두운 X (확정 컴포넌트 Mode:Close) */
.chatbot-fab.is-open {background-color: var(--color-light);}
.chatbot-fab.is-open:hover {background-color: var(--chatbot-input-hover);}
.chatbot-fab.is-open .ico {background-image: url('./../img/common/ico-chatbot-close.svg'); background-repeat: no-repeat; background-position: center; background-size: 1.8rem 1.8rem;}

/* 미로그인 안내 팝오버 (SCR-0110 ②) */
/* 미로그인 안내 팝오버 (확정 SCR-0110-login-error-1)
   흰 배경 + 그림자 + 아래 우측 꼬리. 꼬리가 FAB 를 가리킨다 */
.chatbot-popover {display: flex; align-items: center; position: absolute; right: 0; bottom: calc(var(--chatbot-size) + 1rem); gap: .8rem; width: max-content; max-width: none; padding: .8rem 1.2rem; border-radius: .8rem; background-color: var(--color-light); font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text); white-space: nowrap; box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, .15);}
.chatbot-popover::after {content: ""; position: absolute; right: 1.6rem; bottom: -.9rem; width: 0; height: 0; border-top: 1rem solid var(--color-light); border-left: .7rem solid transparent; border-right: .7rem solid transparent;}
.chatbot-popover .ico {flex: none; width: 2.4rem; height: 2.4rem; background: url('./../img/common/ico-chatbot-info.svg') no-repeat center / 1.8rem 1.8rem;}

/* 열림 상태 - 우측 패널. 플로팅 버튼 위로 펼쳐진다 */
.chatbot-panel {position: fixed; right: var(--chatbot-gap); bottom: calc(var(--chatbot-gap) + var(--chatbot-size) + var(--chatbot-space)); display: flex; flex-direction: column; width: min(var(--chatbot-width), calc(100vw - var(--chatbot-gap) * 2)); height: min(var(--chatbot-height), calc(100vh - var(--chatbot-top) - var(--chatbot-gap) - var(--chatbot-size) - var(--chatbot-space))); border-radius: var(--chatbot-radius); background-color: var(--color-light); box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, .15); overflow: hidden;}
.chatbot-panel.is-expanded {width: min(var(--chatbot-width-max), calc(100vw - var(--chatbot-gap) * 2)); height: min(var(--chatbot-height-max), calc(100vh - var(--chatbot-gap) * 2 - var(--chatbot-size) - var(--chatbot-space)));}

/* 패널 - 헤더 */
/* 확정안 : 높이 약 64, 좌우 패딩 8 (Header 오토레이아웃 패딩 4/8) */
/* 확정 Header-A 는 세 상태(Default / Gen-title / Menu-History)가 전부 400x64 다.
   부제가 없거나 대화 내역이라고 헤더가 줄어들면 안 된다 */
.chatbot-head {display: flex; align-items: center; flex: none; gap: .4rem; min-height: 6.4rem; padding: .8rem .4rem; background-color: var(--color-point);}
.chatbot-head .chatbot-tit {display: flex; align-items: center; flex: 1; gap: .8rem; min-width: 0; margin-left: .8rem;}
/* 에이전트(로봇) 아이콘 - Figma 확정안 SVG 그대로.
   연회색 원(#F6F6F6) + 파란 로봇(#0175B0) 2색이라 mask 가 아니라 background-image 로 넣는다 */
.chatbot-head .chatbot-tit .ico {flex: none; width: 3.2rem; height: 3.2rem; background: url('./../img/common/ico-chatbot-agent-round.svg') no-repeat center / contain;}
/* 클래스명에 chatbot 스코프를 붙인다. 전역 .box 규칙과 충돌했다 */
.chatbot-head .chatbot-tit .tit-box {flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none;}
.chatbot-head .chatbot-tit .txt {display: block; overflow: hidden; font-size: 1.4rem; font-weight: var(--font-bold); line-height: 1.4; color: var(--color-light); text-overflow: ellipsis; white-space: nowrap;}
/* 현재 대화 제목. 대화가 비어 있으면 JS 가 비워 둔다 */
.chatbot-head .chatbot-tit .sub {display: block; overflow: hidden; font-size: 1.1rem; line-height: 1.4; color: var(--chatbot-input-hover); text-overflow: ellipsis; white-space: nowrap;}
.chatbot-head .chatbot-tit .sub:empty {display: none;}
/* 대화를 불러오는 동안에는 빈 부제 줄을 남겨 둔다 (헤더 높이가 튀지 않게) */
.chatbot-panel.is-loading-thread:not(.is-history) .chatbot-head .chatbot-tit .sub:empty {display: block; min-height: 1.54rem;}

/* 헤더 아이콘 버튼 공통.
   아이콘은 Figma 확정안에서 그대로 뽑은 SVG 를 mask 로 쓴다.
   SVG 캔버스(36/48) 안에서 글리프가 차지하는 비율이 디자인과 같으므로
   mask-size:contain 만 주면 크기 비율이 자동으로 맞는다. */
.chatbot-icon-btn {flex: none; position: relative; width: 3.6rem; height: 3.6rem; border-radius: 50%; cursor: pointer;}
/* 확정안 : max-min 버튼만 48x48 (패딩 6) */
.chatbot-resize {width: 4.8rem; height: 4.8rem;}
.chatbot-icon-btn:hover:not(:disabled) {background-color: rgba(255, 255, 255, .18);}
/* 확정 icon-BTN State=Disabled 는 아이콘을 #A3A3A3 로 흐린다.
   우리 아이콘은 흰색 배경 이미지라 색을 못 바꿔서 흐리기로 근사한다 */
.chatbot-icon-btn:disabled {opacity: .4; cursor: default;}
.chatbot-icon-btn .ico {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 1.8rem 1.8rem;}

/* 좌측 - 햄버거 (대화 내역). 가운데 줄이 가장 길다 (확정 SVG) */
.chatbot-menu .ico {background-image: url('./../img/common/ico-chatbot-menu.svg');}

/* 좌측 - 뒤로가기 (대화 내역 화면에서) */
.chatbot-back .ico {background-image: url('./../img/common/ico-chatbot-back.svg');}

/* 우측 - 확장/축소 : 네 모서리 꺾쇠 (확정 SVG, 라운드 코너 + 라운드 캡) */
.chatbot-resize .ico {background-image: url('./../img/common/ico-chatbot-maximize.svg');}
.chatbot-resize.is-expanded .ico {background-image: url('./../img/common/ico-chatbot-minimize.svg');}

/* 패널 - 대화 영역 */
.chatbot-body {flex: 1; min-height: 0; padding: 2rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;}
.chatbot-body .chatbot-msg + .chatbot-msg {margin-top: 1.6rem;}
.chatbot-msg {display: flex; flex-direction: column;}
.chatbot-msg .bubble {max-width: 84%; font-size: 1.4rem; line-height: 1.6; word-break: break-word; white-space: pre-wrap;}
/* 사용자 : 연회색 말풍선, 우측 (디자인 확정) */
.chatbot-msg.is-user {align-items: flex-end;}
/* 확정 Chat User : 배경 BG/Blue-Gray, 우상단 모서리만 4 (나머지 12), 글자 #333333 */
.chatbot-msg.is-user .bubble {max-width: 70%; padding: .8rem 1.2rem; border-radius: 1.2rem .4rem 1.2rem 1.2rem; background-color: var(--chatbot-bg-pressed); color: var(--chatbot-icon-dark);}
/* 에이전트 : 말풍선 없음, 패널 폭을 다 쓴다 (디자인 확정) */
.chatbot-msg.is-agent {align-items: flex-start;}
.chatbot-msg.is-agent .bubble {max-width: 100%; width: 100%; color: var(--color-black);}
.chatbot-msg.is-error {align-items: flex-start;}
.chatbot-msg.is-error .bubble {color: var(--color-red);}

/* 패널 - 시작 화면 (SCR-0120). 대화가 비어 있을 때만 노출 */
.chatbot-greeting {margin-bottom: 2rem; font-size: 1.6rem; font-weight: var(--font-bold); line-height: 1.5; color: var(--color-black-text);}
.chatbot-cards {display: flex; flex-direction: column; gap: .8rem;}
/* 질문은 최대 3줄까지 보이고 넘치면 말줄임 (SCR-0120 ⑤) */
.chatbot-cards button {display: flex; align-items: center; width: 100%; min-height: 5.6rem; padding: 1rem 1.6rem; overflow: hidden; border: var(--line-sm) solid var(--chatbot-border-off); border-radius: 1.6rem; background-color: var(--color-light); font-size: 1.4rem; line-height: 1.5; color: var(--color-black-text); text-align: left; cursor: pointer; transition: background-color var(--animation-spead) var(--animation-timing);}
.chatbot-cards button:hover {border-color: var(--color-point); background-color: var(--chatbot-input-hover); color: var(--color-black-text);}
.chatbot-cards button:active {border-color: var(--color-point); background-color: var(--chatbot-bg-pressed);}

/* 패널 - 응답 템플릿 11종 (SCR-0220~0230)
   표·차트·코드가 들어가므로 템플릿 답변만 패널 폭을 다 쓴다 */
/* 에이전트 답변은 전부 폭 100% 라 is-tpl 별도 규칙은 두지 않는다 */
/* 확정 Answer Header : 제목 Text/H3 16/150 → 8 → 구분선(Border/Default) → 8 → 부제 Text/Body 14/160
   부제와 본문 사이는 프레임 간격 16 이다 */
.chatbot-tpl-tit {margin-bottom: 1.6rem; font-size: 1.6rem; font-weight: var(--font-bold); line-height: 1.5; color: var(--color-black-text);}
.chatbot-tpl-tit:has(+ .chatbot-tpl-sub) {margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: var(--line-sm) solid var(--chatbot-border-off);}
.chatbot-tpl-sub {margin-bottom: 1.6rem; font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}
.chatbot-tpl-txt {font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text); white-space: pre-line;}
.chatbot-tpl-txt + .chatbot-tpl-txt {margin-top: .8rem;}
/* 등락 색 (2026-09-02 본부장 피드백 — 국내 증권 관례).
   서버가 주는 방향(tone)에만 반응한다. 색값은 포털 토큰을 그대로 쓴다 */
/* 보조 수치의 .value 규칙이 뒤에 있어 특이도가 같으면 그쪽이 이긴다.
   그 자리만 클래스를 하나 더 얹어 색이 먹게 한다 */
.chatbot-tpl .is-up,
.chatbot-tpl-metrics .value.is-up {color: var(--color-red);}
.chatbot-tpl .is-down,
.chatbot-tpl-metrics .value.is-down {color: var(--color-blue);}
/* 보합(flat) 은 색을 덮지 않는다 — 본문색 그대로. 2026-09-04 요청.
   회색(#a3a3a3, 확정 Text/Disabled)으로 뒀더니 비활성처럼 보였다.
   차트 보합 캔들은 배경 위 도형이라 색이 필요해서 그쪽은 회색을 유지한다 */

/* 본문 안 굵게 (확정 R-05 '핵심 지표' · R-09 아이템명).
   포털 default.css 가 strong 을 건드리지 않아 그대로 굵게 나오지만,
   확정안은 굵은 줄의 글자색이 본문보다 진하다 */
.chatbot-tpl-txt strong,
.chatbot-tpl-steps strong {font-weight: var(--font-bold); color: var(--color-black-text);}
/* 확정 R-05 는 분포표와 '핵심 지표' 사이가 본문 간격만큼 떠 있다.
   표 · 차트 바로 뒤에 본문이 붙으면 선에 닿아 보인다 */
.chatbot-tpl-scroll + .chatbot-tpl-txt,
.chatbot-tpl-dist + .chatbot-tpl-txt,
.chatbot-tpl-chartbox + .chatbot-tpl-txt {margin-top: 1.6rem;}
.chatbot-tpl-rule + .chatbot-tpl-subtit {margin-top: 0;}
/* 신형 스키마의 소제목 (contents 의 heading1 · heading2).
   구형은 sections 안에서만 쓰던 step-tit · step-sub 였다 — 목록 밖에서도 쓰게 뺐다 */
/* heading1 은 제목(.chatbot-tpl-tit)으로 그린다 - 스키마 v2 (2026-09-04) */
.chatbot-tpl-h2 {margin-top: 1.6rem; font-size: 1.4rem; font-weight: var(--font-bold); line-height: 1.5; color: var(--color-black-text);}
.chatbot-tpl-h2:first-child {margin-top: 0;}
.chatbot-tpl-rule + .chatbot-tpl-h2 {margin-top: 0;}
.chatbot-tpl-h2 + .chatbot-tpl-txt {margin-top: .6rem;}
.chatbot-tpl-subtit {margin: 1.6rem 0 0; font-size: 1.4rem; font-weight: var(--font-bold); line-height: 1.6; color: var(--chatbot-popover-text);}
.chatbot-tpl-note {margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}

/* 핵심 값 (Look-up) */
.chatbot-tpl-value {font-size: 2rem; font-weight: var(--font-bold); line-height: 1.4; color: var(--chatbot-icon-dark);}
.chatbot-tpl-metrics {margin-top: 1.2rem;}
.chatbot-tpl-metrics li {display: flex; justify-content: space-between; gap: 1.2rem; padding: .5rem 0; font-size: 1.4rem; line-height: 1.5;}
.chatbot-tpl-metrics .label {color: var(--color-gray1);}
.chatbot-tpl-metrics .value {font-weight: var(--font-medium); color: var(--color-black-text);}

/* 표 (Compare · Timeseries) */
/* 확정 : 표는 바깥 테두리만 있는 흰 상자다 (내부 격자·헤더 배경 없음) */
/* 확정 : 바깥 #DBDBDB radius 4 상자 + 내부 격자 #E1E2E5 + 헤더 #F5FAFD */
.chatbot-tpl-scroll {overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--line-sm) solid var(--chatbot-border-off); border-radius: .4rem; background-color: var(--color-light);}
/* width:100% 로 두면 nowrap 셀이 줄어들다 못해 옆 칸을 침범한다.
   min-width 로 바꿔 표가 늘어나고 .chatbot-tpl-scroll 이 가로 스크롤을 맡게 한다 */
/* 포털 default.css 의 `table {table-layout:fixed}` 를 되돌린다.
   고정 레이아웃이면 칸을 똑같이 나눠 nowrap 글자가 옆 칸을 침범한다 */
.chatbot-tpl-table {min-width: 100%; table-layout: auto; border-collapse: collapse; font-size: 1.4rem; line-height: 1.6; white-space: nowrap;}
.chatbot-tpl-table th,
.chatbot-tpl-table td {padding: 1rem 1.2rem; border-right: var(--line-sm) solid var(--chatbot-border-off); border-bottom: var(--line-sm) solid var(--chatbot-border-off); text-align: right;}
.chatbot-tpl-table tr > *:last-child {border-right: 0;}
.chatbot-tpl-table tbody tr:last-child > * {border-bottom: 0;}
.chatbot-tpl-table thead th {background-color: var(--chatbot-input-hover); font-weight: var(--font-bold); color: var(--chatbot-icon-dark);}
/* 확정안은 행 머리(현재가·전일비…)도 값과 같이 오른쪽 정렬이다 */
.chatbot-tpl-table tbody th {font-weight: var(--font-regular); color: var(--chatbot-popover-text);}
/* 기간 데이터(R-04)만 6열이라 한 단계 작다 : Text/Caption 12/150 · 행 36 */
/* 6열(날짜 YYYY.MM.DD + 시/고/저/종 + 거래량)이 400px 패널 안에 가로 스크롤 없이
   들어가야 한다. 본문 폭 358px, 세로 스크롤바(default.css 지정 8px)를 빼면 350px.
   글자 크기는 확정안(12px)을 유지하고 좌우 패딩 1rem → .4rem, 자간 -.03em 으로 맞췄다.
   실측 표 자연폭 342.5px (스크롤바 8px 기준 7.5px, 15px 기준 0.5px 여유).
   값이 7자리를 넘는 예외는 .chatbot-tpl-scroll 이 받는다. */
.chatbot-tpl-table.is-compact {font-size: 1.2rem; line-height: 1.5; letter-spacing: -.03em;}
/* 6열이라 좌우 여백이 빠듯하다. 글자가 칸 선에 붙어 보이지 않게 오른쪽만 조금 넓힌다 */
.chatbot-tpl-table.is-compact th,
.chatbot-tpl-table.is-compact td {padding: .9rem .8rem .9rem .4rem;}
/* 헤더는 굵어서 더 붙어 보인다. 마지막 칸(거래량)은 아래 규칙이 따로 잡는다 */
.chatbot-tpl-table.is-compact thead th:not(:last-child) {padding-right: 1.1rem;}
/* 거래량 칸만 조금 넓게. 앞 5열에서 각 2px 씩 덜어 왔으므로 표 전체 폭은 그대로다
   (거래량 44.6 → 55.1px, 자연폭 342.5px 유지) */
.chatbot-tpl-table.is-compact tr > *:last-child {padding-left: 1rem; padding-right: 1rem;}

/* 랭킹 (Discover) */
.chatbot-tpl-rank li {font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}

/* 차트 (Timeseries) - echarts 가 이 박스 크기에 맞춰 그린다 */
/* 확정 '그래프 컬러' 표 : 컨테이너 1px #e1e2e5 · radius 8 · padding 16 */
/* 좌우 패딩은 .8rem — 그래프 폭을 16px 벌었다 (2026-09-04). 위아래는 확정안대로 */
.chatbot-tpl-chartbox {margin-bottom: 1.2rem; padding: 1.6rem .8rem; border: var(--line-sm) solid var(--chatbot-chart-line); border-radius: .8rem; background-color: var(--color-light);}
.chatbot-tpl-chart {width: 100%; height: 20rem;}

/* 접기 (Timeseries 상세) — 확정 R-04_Timeseries + More 컴포넌트.
   표를 통째로 감추지 않고 앞 네 줄만 남긴 뒤 흰색 그라데이션으로 흐린다 */
.chatbot-tpl-fold {position: relative;}
.chatbot-tpl-foldbox {max-height: 18rem; overflow: hidden;}
.chatbot-tpl-fold.is-open .chatbot-tpl-foldbox {max-height: none;}
.chatbot-tpl-more {display: flex; align-items: center; justify-content: center; gap: .4rem; position: relative; width: 100%; padding: .8rem 0; font-size: 1.3rem; line-height: 1.5; color: var(--chatbot-icon-dark); cursor: pointer;}
/* 잘린 마지막 줄 위로 덮이는 흰색 그라데이션 */
.chatbot-tpl-more::before {content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 4rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-light) 100%); pointer-events: none;}
.chatbot-tpl-more::after {content: ""; flex: none; width: 1.8rem; height: 1.8rem; background: url('./../img/common/ico-chatbot-chevron-down.svg') no-repeat center / contain;}
/* 접힌 것이 코드 블록(어두운 배경)이면 덮는 그라데이션도 같은 색이어야 한다 */
.chatbot-tpl-fold:has(.chatbot-tpl-codebox) .chatbot-tpl-more::before {background: linear-gradient(to bottom, rgba(51, 51, 51, 0) 0%, #333 100%);}
.chatbot-tpl-fold:has(.chatbot-tpl-codebox) .chatbot-tpl-foldbox {max-height: 26rem;}
/* 펼침은 접힘 규칙보다 뒤에 와야 한다. 특이도가 같아 순서로 이긴다 —
   코드 전용 높이(위)가 나중이면 '전체 보기' 를 눌러도 높이가 그대로다 */
.chatbot-tpl-fold.is-open .chatbot-tpl-foldbox,
.chatbot-tpl-fold.is-open:has(.chatbot-tpl-codebox) .chatbot-tpl-foldbox {max-height: none;}
/* 코드 자체에도 높이 제한이 걸려 있다 (아래 .is-block). 펼친 뒤에도 그게 남아 있으면
   '전체 보기' 를 눌러도 안쪽에 스크롤만 생기고 코드는 여전히 잘려 보인다 */
.chatbot-tpl-fold.is-open .chatbot-tpl-codebox.is-block .chatbot-tpl-code {max-height: none; overflow-y: visible;}
.chatbot-tpl-fold.is-open .chatbot-tpl-more::before {display: none;}
.chatbot-tpl-fold.is-open .chatbot-tpl-more .txt {font-size: 0;}
.chatbot-tpl-fold.is-open .chatbot-tpl-more .txt::before {content: "간략히 보기"; font-size: 1.3rem;}
.chatbot-tpl-fold.is-open .chatbot-tpl-more::after {background-image: url('./../img/common/ico-chatbot-chevron-up.svg');}

/* 분석 (Analysis) — 스토리보드 표기 `- **POC**: 190,000원` */
.chatbot-tpl-bullets li {font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}
.chatbot-tpl-bullets li::before {content: "- ";}
.chatbot-tpl-bullets .label {font-weight: inherit;}
.chatbot-tpl-bullets .label::after {content: ": ";}

/* 분포 표 (매물대 분석 : 가격대 / 비중 / 분포) */
.chatbot-tpl-dist {width: 100%; table-layout: auto; border-collapse: collapse; font-size: 1.4rem; line-height: 1.6;}
.chatbot-tpl-dist th,
.chatbot-tpl-dist td {padding: .8rem 1rem; border-right: var(--line-sm) solid var(--chatbot-border-off); border-bottom: var(--line-sm) solid var(--chatbot-border-off);}
.chatbot-tpl-dist tr > *:last-child {border-right: 0;}
.chatbot-tpl-dist thead th {background-color: var(--chatbot-input-hover); font-weight: var(--font-bold); color: var(--chatbot-icon-dark);}
.chatbot-tpl-dist .col-label {width: 1%; text-align: left; white-space: nowrap;}
.chatbot-tpl-dist .col-value {width: 1%; text-align: left; white-space: nowrap;}
.chatbot-tpl-dist .col-bar {text-align: left;}
.chatbot-tpl-dist tbody th {font-weight: inherit; color: var(--chatbot-popover-text);}
/* 막대 영역 + 마커 영역. 마커 칸이 늘 같은 폭이라 막대 길이를 서로 비교할 수 있다 */
.chatbot-tpl-dist .bar-wrap {display: flex; align-items: center;}
.chatbot-tpl-dist .bar-track {flex: 1 1 auto; min-width: 0;}
.chatbot-tpl-dist .bar {display: block; height: 1.4rem; border-radius: .2rem; background-color: var(--chatbot-popover-text);}
/* 클래스명 `mark` 는 bootstrap.css 의 `mark, .mark {background:#fcf8e3}` 와 겹친다. 쓰지 말 것 */
.chatbot-tpl-dist .poc {flex: 0 0 4.6rem; padding-left: .5rem; font-size: 1.1rem; font-weight: var(--font-bold); color: var(--chatbot-icon-dark); white-space: nowrap;}
.chatbot-tpl-dist .is-poc {font-weight: var(--font-bold);}
/* 디자인 확정 : 막대는 전부 회색. POC 는 굵은 글씨 + ◀ 마커로만 구분한다 */

/* 인용 (Explain 정의 · Analysis 면책 고지) */
/* 디자인 확정 : 정의는 인용구가 아니라 평문이다 */
.chatbot-tpl-quote {font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}
/* 확정 R-05 Analysis : 배경 #F5FAFD + 테두리 #E1E2E5 + radius 8 */
/* 확정 blockquote : radius 8 · 1px Border/Light(#e1e2e5) · BG/Blue-Gray(#f5fafd) · 패딩 12/16
   확정안에 ※ 표기가 없어 붙이지 않는다 (규격서의 '화면이 자동으로 붙인다'는 폐기) */
.chatbot-tpl-disclaimer {margin-top: 1.6rem; padding: 1.2rem 1.6rem; border: var(--line-sm) solid var(--chatbot-chart-line); border-radius: .8rem; background-color: var(--chatbot-input-hover); font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text); white-space: pre-line;}

/* 코드 (Explain 계산식 · Guide · Code) */
/* 확정 R-08/R-09 : 검정 상자 안쪽 상단에 좌측 `언어 ⌄` + 우측 복사 버튼 */
.chatbot-tpl-codebox {margin-top: .8rem; border-radius: .8rem; background-color: var(--chatbot-icon-dark); overflow: hidden;}
.chatbot-tpl-codehead {display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem .4rem;}
/* 확정안에는 언어 이름 뒤에 아래화살표가 있지만 두지 않는다 —
   서버가 주는 코드는 한 종류뿐이라 고를 것이 없고, 누를 수도 없는 장식이었다.
   되살리려면 아래 한 줄을 다시 켜면 된다 (2026-09-02) :
   .chatbot-tpl-codehead .lang::after {content: ""; width: 1.4rem; height: 1.4rem;
       background: url('./../img/common/ico-chatbot-chevron-down-light.svg') no-repeat center / contain;} */
.chatbot-tpl-codehead .lang {display: inline-flex; align-items: center; gap: .4rem; font-size: 1.2rem; line-height: 1.4; color: var(--color-light);}
.chatbot-tpl-codecopy {position: relative; width: 2.4rem; height: 2.4rem; cursor: pointer;}
.chatbot-tpl-codecopy::before {content: ""; display: block; width: 100%; height: 100%; background: url('./../img/common/ico-chatbot-copy-light.svg') no-repeat center / 1.8rem 1.8rem;}
.chatbot-tpl-codecopy.is-done {opacity: .5;}
.chatbot-tpl-code {margin: 0; padding: .4rem 1.2rem 1.2rem; overflow-x: auto; font-family: Menlo, Consolas, monospace; font-size: 1.2rem; line-height: 1.6; color: #e6e6e6; white-space: pre;}
.chatbot-tpl-codebox.is-block .chatbot-tpl-code {max-height: 32rem; overflow-y: auto;}
/* 포털이 코드 폰트를 두 번 덮어쓴다.
   - prism.css : code[class*="language-"] 가 Pretendard + pre-wrap
   - bootstrap.css : `pre, code, kbd, samp` 에 맑은 고딕 !important
   기존 파일을 못 고치므로 폰트만 !important 로 되받는다 */
.chatbot-tpl-codebox .chatbot-tpl-code,
.chatbot-tpl-codebox .chatbot-tpl-code code {font-family: Menlo, Consolas, monospace !important;}
.chatbot-tpl-codebox .chatbot-tpl-code code {display: block; font-size: inherit; line-height: inherit; white-space: pre; background: none; color: inherit; text-shadow: none;}

/* 명령어 한 줄 — 확정 'blockquote' 컴포넌트 (400x40).
   절차 안내(R-08_Guide) 안에서 쓰는 형태다. 언어 표시 없이 코드 + 복사 아이콘만 있다 */
.chatbot-tpl-codeline {display: flex; align-items: center; gap: .8rem; margin-top: .8rem; padding: .8rem .8rem .8rem 1.2rem; border-radius: .8rem; background-color: var(--chatbot-icon-dark);}
.chatbot-tpl-codeline code {flex: 1; min-width: 0; overflow-x: auto; font-family: Menlo, Consolas, monospace !important; font-size: 1.4rem; line-height: 1.6; color: var(--color-light); white-space: pre; background: none; text-shadow: none;}
/* 여러 줄 코드는 버튼을 첫 줄 옆(위쪽)에 둔다. 가운데 두면 상자 중간에 뜬다 */
.chatbot-tpl-codeline.is-multi {align-items: flex-start;}
.chatbot-tpl-linecopy {flex: none; position: relative; width: 2.4rem; height: 2.4rem; cursor: pointer;}
.chatbot-tpl-linecopy::before {content: ""; display: block; width: 100%; height: 100%; background: url('./../img/common/ico-chatbot-copy-light.svg') no-repeat center / 1.8rem 1.8rem;}
.chatbot-tpl-linecopy.is-done {opacity: .5;}

/* 절차 (Guide) */
.chatbot-tpl-steps {counter-reset: step;}
.chatbot-tpl-steps > li {padding: 1.2rem 0; border-bottom: var(--line-sm) solid var(--color-line);}
.chatbot-tpl-steps > li:last-child {border-bottom: 0;}
.chatbot-tpl-steps .step-tit {font-size: 1.4rem; font-weight: var(--font-bold); color: var(--color-black-text);}
.chatbot-tpl-steps .step-tit::before {counter-increment: step; content: counter(step) "단계: ";}
.chatbot-tpl-steps .step-txt {margin-top: .6rem; padding-left: 1rem; font-size: 1.3rem; line-height: 1.6; color: var(--color-dark-gray); white-space: pre-line;}
/* 플랫 스키마는 서버가 heading 에 번호를 넣어 보낸다. CSS 자동 번호를 끈다 */
.chatbot-tpl-steps.is-flat .step-tit::before {content: none;}
/* 플랫 스키마는 불릿까지 서버 문자열에 들어 있다. 화면이 "- " 를 덧붙이지 않는다 */
.chatbot-tpl-steps.is-flat .step-txt::before {content: none;}
.chatbot-tpl-steps .step-txt::before {content: "- ";}

/* 목록 (Catalog) */
.chatbot-tpl-catalog > li + li {margin-top: 1.6rem;}
.chatbot-tpl-catalog .item-tit {font-size: 1.4rem; font-weight: var(--font-bold); line-height: 1.6; color: var(--chatbot-icon-dark);}
.chatbot-tpl-catalog .item-props li {padding-left: 1rem; font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}
.chatbot-tpl-catalog .item-props li::before {content: "- ";}

/* 링크 (Guide · Code · Catalog · VoC · External) */
.chatbot-tpl-link {margin-top: 1rem; font-size: 1.3rem; line-height: 1.6;}
.chatbot-tpl-link a,
.chatbot-tpl-link a:visited {color: var(--color-point); text-decoration: underline;}
.chatbot-tpl-links li + li {margin-top: .2rem;}

/* 출처 */
/* 출처 — 확정 Source `list=2` (피그마 538:3914, 2026-09-11 갱신).
   라벨 한 줄 + **파란 밑줄 링크** 목록이고, 글자 오른쪽에 External-Link 아이콘이 온다.
   실사용 화면(R-02 비교 101:1361)이 이 변형을 쓴다 — 09-09 에 맞춰 둔 회색 버튼
   (`list=4` 538:4713)은 디자이너가 화면에서 뺐다.
   되돌리려면 `_analysis/patch_srclink.py --revert` */
.chatbot-tpl-source {margin-top: 1.6rem; padding-top: 1.6rem; border-top: var(--line-sm) solid var(--chatbot-border-off); font-size: 1.6rem; line-height: 1.5; letter-spacing: -.032em; color: var(--chatbot-popover-text);}
/* 라벨 (확정 538:3915 - Text/Muted 16) */
.chatbot-tpl-source .tit {color: var(--chatbot-text-muted);}
/* 줄 사이 8px, 라벨과도 8px (확정 link-group gap).
   링크는 글자 너비만 차지한다 — 확정의 `link btn` 이 hug 다 */
.chatbot-tpl-source .src-list {display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; margin-top: .8rem;}
/* 주소가 없는 출처(용어 DB)는 확정 `Finance Dict` 변형대로 링크 없이 한 줄이다 */
.chatbot-tpl-source .src-list li {min-width: 0;}
/* 파란 밑줄 링크 + 아이콘 (확정 538:3918 - gap 4, items-start) */
.chatbot-tpl-source .src-btn {display: inline-flex; align-items: flex-start; gap: .4rem; max-width: 100%; color: var(--color-point);}
/* 확정에는 한 줄로 그려져 있지만 실제 API 이름은 길다 (`국내주식기간별시세(일_주_월_년)`).
   넘치면 줄바꿈해 줄이 늘어나게 둔다 — 잘라 내면 어느 API 인지 알 수 없다 */
.chatbot-tpl-source .src-btn .nm {min-width: 0; word-break: break-word; text-decoration: underline; text-underline-position: from-font;}
/* 아이콘은 줄지 않는다 (확정 24x24). 밑줄이 아이콘까지 따라가지 않게 글자에만 긋는다.
   색이 글자와 같이 움직여야 해서 배경 이미지가 아니라 mask 로 넣는다 —
   배경 이미지는 SVG 안의 색을 못 바꾼다 */
.chatbot-tpl-source .src-btn .ico {flex: 0 0 auto; width: 2.4rem; height: 2.4rem; background-color: currentColor; -webkit-mask: url('./../img/common/ico-chatbot-external.svg') no-repeat center / 2.4rem 2.4rem; mask: url('./../img/common/ico-chatbot-external.svg') no-repeat center / 2.4rem 2.4rem;}
/* 포털 전역 a:visited 가 보라색으로 덮어써서 색을 명시한다 */
.chatbot-tpl-source a,
.chatbot-tpl-source a:visited {color: var(--color-point); text-decoration: none;}
.chatbot-tpl-source .src-btn:hover {color: var(--chatbot-primary-hover);}

/* Smart Follow-up 칩 (SCR-0200 ③-1). 0~4개 */
.chatbot-chips {display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem;}

/* 팔로우업 제안 — 줄바꿈하지 않고 한 줄에 두고 좌우로 스크롤한다 (2026-09-02).
   스크롤바는 그리지 않는다. 패널 폭을 다 쓰도록 align-self 를 늘려야 넘침이 생긴다 */
.chatbot-chips:not(.is-choice) {align-self: stretch; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;}
.chatbot-chips:not(.is-choice)::-webkit-scrollbar {display: none;}
.chatbot-chips:not(.is-choice) > li {flex: 0 0 auto;}

/* 스크롤바를 감췄으니 끌 수 있다는 것만 커서로 알린다 (2026-09-02).
   끄는 동안에는 글자가 선택되지 않게 막는다 */
/* 잡는 손 모양은 좌우로 넘칠 때만. 넘쳤는지는 CSS 가 알 수 없어서 JS 가 달아 준다
   (chatbot.js syncChips) — 다 들어가는데도 끌 수 있어 보였다 */
.chatbot-chips.is-pannable {cursor: grab;}
.chatbot-chips.is-panning {cursor: grabbing; user-select: none;}

/* 종목 선택지 — 한 줄에 하나씩, 폭은 '가장 긴 항목' 에 맞춰 전부 같게 (2026-09-02).
   '제안' 이 아니라 '선택지' 라서 나란히 두면 어디까지가 한 항목인지 읽기 어렵다.
   패널 폭을 다 채우면 답변 영역이 답답해 보이므로 내용 폭까지만 늘린다.

   grid 한 줄 + max-content 로 칸 폭이 '가장 긴 칩' 에 맞고, 나머지 칩은 그 폭으로 늘어난다.
   minmax(0, ...) 이라 가장 긴 항목이 패널보다 길면 패널 폭까지만 쓰고 뒤를 … 로 줄인다.
   ellipsis 는 inline-flex 에서 듣지 않으므로 이 경우만 block 으로 바꾼다 */
.chatbot-chips.is-choice {display: grid; grid-template-columns: minmax(0, max-content); flex-wrap: nowrap;}
.chatbot-chips.is-choice > li > button {display: block; width: 100%; line-height: 3.2rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* 확정 R-11 : 출처 블록이 없는 link 템플릿은 링크 아래에 구분선이 온다.
   (다른 템플릿은 .chatbot-tpl-source 의 border-top 이 그 역할을 한다)
   선을 칩에 붙여 두면 칩이 없을 때 같이 사라진다. 템플릿 자신에게 붙인다 */
.chatbot-tpl.is-link,
.chatbot-tpl.is-flat.is-link {padding-bottom: 1.6rem; border-bottom: var(--line-sm) solid var(--chatbot-border-off);}
.bubble:has(> .chatbot-tpl.is-link) + .chatbot-chips,
.bubble:has(> .chatbot-tpl.is-flat.is-link) + .chatbot-chips {align-self: stretch; margin-top: 1.6rem;}
.chatbot-chips button {display: inline-flex; align-items: center; height: 3.4rem; padding: 0 1.4rem; border: var(--line-sm) solid var(--chatbot-chip-border); border-radius: 1.7rem; background-color: var(--color-light); font-size: 1.3rem; line-height: 1.4; color: var(--chatbot-icon-dark); cursor: pointer; transition: background-color var(--animation-spead) var(--animation-timing), border-color var(--animation-spead) var(--animation-timing);}
.chatbot-chips button:hover {border-color: var(--color-point); background-color: var(--chatbot-input-hover); color: var(--color-point);}
.chatbot-chips button:active {border-color: var(--color-point); background-color: var(--chatbot-bg-pressed); color: var(--color-point);}
/* 확정 Smart Follow Chips State=Disabled — 답변 생성 중에는 누를 수 없다.
   :hover · :active 는 disabled 에도 걸리므로 이 줄이 뒤에 와야 한다 */
.chatbot-chips button:disabled {border-color: var(--chatbot-border-off); background-color: var(--chatbot-send-off-bg); color: var(--color-gray3); cursor: default;}

/* 답변 액션 (SCR-0203 ③-3) */
.chatbot-actions {display: flex; gap: .4rem; margin-top: .6rem;}
/* 답변 복사 - Figma 확정안 형태 : 앞 사각형이 왼쪽 아래, 뒤 사각형이 오른쪽 위 */
.chatbot-copy {position: relative; width: 2.4rem; height: 2.4rem; border-radius: .4rem; cursor: pointer;}
.chatbot-copy::before {content: ""; display: block; width: 100%; height: 100%; background: url('./../img/common/ico-chatbot-copy.svg') no-repeat center / 1.8rem 1.8rem;}
.chatbot-copy:hover::before,
.chatbot-copy.is-done::before {background-image: url('./../img/common/ico-chatbot-copy-active.svg');}

/* 패널 - 응답 대기 */
/* Processing (SCR-0201) : 스토리보드는 텍스트형 "답변 생성 중 ..." */
/* 말풍선 없이 평문 "답변 생성 중..." (디자인 확정 SCR-0201) */
.chatbot-typing {display: flex; align-items: baseline; gap: .1rem; font-size: 1.4rem; line-height: 1.6; color: var(--color-gray1);}
.chatbot-typing .dots {display: flex; gap: .1rem;}
/* 진행 단계 표시 (2026-09-14). 서버가 준 글자가 `...` 으로 끝날 때만 점을 둔다.
   끝난 단계는 점 대신 초록 체크가 붙는다 — 디자인 토큰에 초록이 없어서 여기서 만든다 */
.chatbot-typing .dots.is-off {display: none;}
.chatbot-typing .step-ok {margin-left: .3rem; font-style: normal; font-weight: var(--font-bold); color: var(--chatbot-ok);}
.chatbot-typing .step-ok::before {content: "\2713";}
.chatbot-typing.is-ok {color: var(--chatbot-ok);}
/* 글자가 툭 바뀌면 눈에 안 잡힌다. 흐려져 올라가며 사라지고 아래에서 올라오며 뜬다.
   .16s 는 chatbot.js 의 STEP_OUT_MS 와 같은 값이다 — 한쪽만 고치면 어긋난다 */
.chatbot-typing {transition: opacity .16s var(--animation-timing), transform .16s var(--animation-timing);}
.chatbot-typing.is-out {opacity: 0; transform: translateY(-.3rem);}
.chatbot-typing.is-in {animation: chatbot-step-in .22s var(--animation-timing) both;}
@keyframes chatbot-step-in {
	from {opacity: 0; transform: translateY(.3rem);}
	to {opacity: 1; transform: translateY(0);}
}
/* 움직임을 줄여 달라고 해 둔 사람에게는 움직이지 않는다 */
@media (prefers-reduced-motion: reduce) {
	.chatbot-typing {transition: none;}
	.chatbot-typing.is-out {opacity: 1; transform: none;}
	.chatbot-typing.is-in {animation: none;}
}
.chatbot-typing .dots i {width: .3rem; height: .3rem; border-radius: 50%; background-color: var(--color-gray2); animation: chatbot-blink 1.2s infinite ease-in-out;}
.chatbot-typing .dots i:nth-child(2) {animation-delay: .2s;}
.chatbot-typing .dots i:nth-child(3) {animation-delay: .4s;}
@keyframes chatbot-blink {
	0%, 80%, 100% {opacity: .3;}
	40% {opacity: 1;}
}

/* 패널 - 입력창 */
.chatbot-input {flex: none; display: flex; align-items: flex-end; gap: .8rem; margin: 0 2rem 2rem; padding: 1rem 1rem 1rem 2rem; border: var(--line-sm) solid var(--color-point); border-radius: 1.6rem; background-color: var(--color-light); transition: background-color var(--animation-spead) var(--animation-timing);}
/* 높이는 chatbot.js 가 내용에 맞춰 조절한다. 한 줄일 때 스크롤바가 뜨지 않도록 기본은 hidden */
.chatbot-input textarea {flex: 1; min-width: 0; height: 3.2rem; max-height: 8rem; padding: .6rem 0; border: 0; font-size: 1.4rem; line-height: 1.6; color: var(--color-black-text); resize: none; overflow-y: hidden;}
.chatbot-input textarea::placeholder {color: var(--color-gray3);}
/* 확정 SCR-0204 : 대기·중단 중(입력 비활성) 에는 placeholder 를 비운다 */
.chatbot-input textarea:disabled::placeholder {color: transparent;}
.chatbot-input textarea:focus {outline: 0;}
/* 확정 Input Field State:Hover */
.chatbot-input:hover:not(:has(textarea:disabled)) {background-color: var(--chatbot-input-hover);}
/* 보내기 / 정지 버튼 — 확정 컴포넌트 `Input Field` (State 6종) 기준
   입력창 360x56 radius 16, 보내기 원 36x36, 화살표·정지 사각형 모두 14x14 굵기 2
   입력 있음  : 원 #0199E8 + 흰 화살표
   입력 없음  : 원 #F6F6F6 + 화살표 #A3A3A3
   응답 중    : 입력창 #F6F6F6 / 테두리 #DBDBDB, 원 #E1E2E5 + 정지 사각형 #333333 */
.chatbot-send {flex: none; position: relative; width: 3.6rem; height: 3.6rem; border-radius: 50%; background-color: var(--color-point); cursor: pointer; transition: background-color var(--animation-spead) var(--animation-timing);}
.chatbot-send::before {content: ""; position: absolute; top: 50%; left: 50%; width: 1.6rem; height: 1.6rem; transform: translate(-50%, -50%); background: url('./../img/common/ico-chatbot-send.svg') no-repeat center / contain;}
/* 입력이 비어 있으면 비활성. 파랑을 흐리는 게 아니라 회색 원 + 회색 화살표다 */
.chatbot-send:disabled {background-color: var(--chatbot-send-off-bg); cursor: default;}
.chatbot-send:disabled::before {background-image: url('./../img/common/ico-chatbot-send-disabled.svg');}
/* 대기 중에는 Stop (SCR-0202 · SCR-0204). 회색 원 + 짙은 정지 사각형 */
.chatbot-send.is-stop {background-color: var(--chatbot-stop-bg);}
.chatbot-send.is-stop::before {width: 1.4rem; height: 1.4rem; background-image: url('./../img/common/ico-chatbot-stop.svg');}

/* 패널 - 대화 기록 */
.chatbot-history {flex: 1; min-height: 0; display: flex; flex-direction: column;}
.chatbot-new .ico {background-image: url('./../img/common/ico-chatbot-new.svg');}
.chatbot-history-list {flex: 1; min-height: 0; padding: .8rem 1rem; overflow-y: auto; overscroll-behavior: contain;}
/* 메뉴 버튼은 항목 높이만큼 늘려 점이 세로 가운데 오게 한다 (클릭 영역도 넓어진다) */
/* 확정 item : Default 는 테두리·배경 없음, Focus 는 파란 테두리, Pressed 는 파란 테두리 + BG/Blue-Gray
   기본에도 투명 테두리를 깔아 상태가 바뀔 때 1px 밀리지 않게 한다 */
.chatbot-history-item {display: flex; align-items: stretch; min-height: 7.2rem; border: var(--line-sm) solid transparent; border-radius: .8rem;}
.chatbot-history-item.is-current {border-color: var(--color-point); background-color: var(--chatbot-input-hover);}
.chatbot-history-item:hover {border-color: var(--color-point);}
.chatbot-history-item .open {flex: 1; min-width: 0; padding: 1.2rem; text-align: left; cursor: pointer;}
.chatbot-history-item .tit {display: block; overflow: hidden; font-size: 1.4rem; line-height: 1.5; color: var(--color-black-text); text-overflow: ellipsis; white-space: nowrap;}
.chatbot-history-item .date {display: block; margin-top: .4rem; font-size: 1.2rem; line-height: 1.4; color: var(--chatbot-text-muted);}
/* 점 세 개를 세로로 (⋮) */
.chatbot-history-item .more {flex: none; position: relative; width: 3.2rem; cursor: pointer;}
/* 확정 디자인 : 가로 ••• */
.chatbot-history-item .more .dot {position: absolute; top: 50%; left: 50%; width: 1.8rem; height: 1.8rem; transform: translate(-50%, -50%); background: url('./../img/common/ico-chatbot-dots.svg') no-repeat center / contain;}
.chatbot-history-item .more:hover .dot {background-image: url('./../img/common/ico-chatbot-dots-active.svg');}
.chatbot-history-empty {padding: 4rem 2rem; font-size: 1.4rem; line-height: 1.6; color: var(--color-gray2); text-align: center;}

/* 대화 목록은 서버가 페이지 단위(기본 20건)로 준다. 남은 게 있을 때만 나온다.
   확정 디자인에 없는 요소라 대화 항목과 같은 글자 크기로 눈에 띄지 않게 둔다 */
.chatbot-history-more {padding: .8rem 0; text-align: center;}
.chatbot-history-more button {padding: .8rem 1.6rem; font-size: 1.3rem; line-height: 1.4; color: var(--chatbot-text-muted); cursor: pointer;}
.chatbot-history-more button:hover:enabled {color: var(--color-point); text-decoration: underline;}
.chatbot-history-more button:disabled {cursor: default;}

/* 이력이 커서 기반이라 오래된 대화는 나눠서 온다. 대화 맨 위에 붙는다 */
.chatbot-more-old {display: block; width: 100%; padding: .8rem 0; font-size: 1.3rem; line-height: 1.4; color: var(--chatbot-text-muted); text-align: center; cursor: pointer;}
.chatbot-more-old:hover {color: var(--color-point); text-decoration: underline;}

/* 대화를 불러오는 동안 */
.chatbot-loading {padding: 2.4rem 0; font-size: 1.3rem; line-height: 1.5; color: var(--chatbot-text-muted); text-align: center;}

/* 대화 항목 메뉴 드롭다운 (SCR-0300 ②-1) */
.chatbot-drop {position: absolute; z-index: 3;}
.chatbot-drop button {display: flex; align-items: center; gap: .4rem; height: 3.6rem; padding: .6rem .8rem; border: var(--line-sm) solid var(--chatbot-border-off); border-radius: .8rem; background-color: var(--color-light); box-shadow: 0 0 1.6rem 0 rgba(0, 0, 0, .15); font-size: 1.4rem; line-height: 1.5; color: var(--chatbot-popover-text); white-space: nowrap; cursor: pointer;}
/* 휴지통 : 뚜껑 + 몸통 */
.chatbot-drop button .ico {flex: none; width: 2.4rem; height: 2.4rem; background: url('./../img/common/ico-chatbot-trash.svg') no-repeat center / 1.8rem 1.8rem;}
.chatbot-drop button:hover .ico {background-image: url('./../img/common/ico-chatbot-trash-active.svg');}
/* 확정 popover 는 Default / Focus / Pressed / Disabled 4상태뿐이고 Hover 가 따로 없다.
   마우스만 올렸을 때 파란 테두리가 뜨면 확정 화면(SCR-0300-1)과 달라 보여서,
   hover 는 배경만 옅게 하고 파란 테두리는 키보드 포커스·누름에만 준다 */
.chatbot-drop button:hover {background-color: var(--chatbot-input-hover); color: var(--chatbot-icon-dark);}
.chatbot-drop button:focus-visible {border-color: var(--color-point);}
.chatbot-drop button:active {border-color: var(--color-point); background-color: var(--chatbot-input-hover);}

/* 삭제 확인 드로어 (SCR-0300 ③) */
.chatbot-dim {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; background-color: rgba(17, 17, 17, .5);}
.chatbot-drawer {position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; padding: 2.4rem 2rem; border-top-left-radius: var(--chatbot-radius); border-top-right-radius: var(--chatbot-radius); background-color: var(--color-light); animation: chatbot-drawer-up .2s var(--animation-timing);}
@keyframes chatbot-drawer-up {
	from {transform: translateY(100%);}
	to {transform: none;}
}
/* 확정 Bottom-sheet : 두 줄이 한 덩어리(Text/H3 16/150)이고 버튼 묶음과 40 간격이다 */
.chatbot-drawer .tit {font-size: 1.6rem; font-weight: var(--font-bold); line-height: 1.5; color: var(--chatbot-text-heading); text-align: center;}
.chatbot-drawer .txt {margin-bottom: 4rem; font-size: 1.6rem; font-weight: var(--font-bold); line-height: 1.5; color: var(--chatbot-text-heading); text-align: center;}
/* 확정 디자인 : 세로 2단. 삭제하기가 위, 각각 전체 폭 */
.chatbot-drawer-btns {display: flex; flex-direction: column; gap: 1.6rem;}
.chatbot-drawer-btns button {width: 100%; height: 5.6rem; border-radius: 1.6rem; font-size: 1.6rem; font-weight: var(--font-medium); line-height: 1.5; cursor: pointer; transition: background-color var(--animation-spead) var(--animation-timing);}
.chatbot-drawer-btns .cancel {border: var(--line-sm) solid var(--chatbot-btn-line); background-color: var(--color-light); color: var(--chatbot-popover-text);}
.chatbot-drawer-btns .cancel:hover {border-color: var(--color-point); background-color: var(--chatbot-input-hover); color: var(--color-point);}
.chatbot-drawer-btns .confirm {background-color: var(--chatbot-error); color: var(--color-light);}
.chatbot-drawer-btns .confirm:hover {background-color: var(--chatbot-error-dark);}

/* 크기 조절 손잡이 (2026-09-01)

   패널이 우하단 고정이므로 위 · 왼쪽 · 좌상단만 잡을 수 있다.
   패널에 overflow:hidden 이 걸려 있어 밖으로 내밀 수 없으니 테두리 안쪽에 띠를 둔다.
   위쪽 띠는 헤더 버튼을 가리지 않게 아래에 두고, 좌상단 모서리만 위로 올린다
   (거기엔 버튼이 없다). */
.chatbot-grip {position: absolute; z-index: 1;}
.chatbot-grip--n {top: 0; right: 0; left: var(--chatbot-grip); height: var(--chatbot-grip); cursor: ns-resize;}
.chatbot-grip--w {top: var(--chatbot-grip); bottom: 0; left: 0; width: var(--chatbot-grip); cursor: ew-resize;}
.chatbot-grip--nw {top: 0; left: 0; z-index: 3; width: var(--chatbot-grip); height: var(--chatbot-grip); cursor: nwse-resize;}

/* 끌고 있는 동안 글자가 선택되거나 다른 요소가 커서를 가로채지 않게 한다 */
.chatbot-panel.is-gripping {user-select: none;}
.chatbot-panel.is-gripping * {pointer-events: none;}
.chatbot-panel.is-gripping .chatbot-grip {pointer-events: auto;}

/* 애니메이션
   사용자가 직접 열 때만 재생한다. 이 포털은 SPA 가 아니라 화면을 옮길 때마다
   위젯이 새로 만들어지므로, .chatbot-panel 에 그냥 걸면 페이지가 바뀔 때마다
   애니메이션이 다시 돌아 '매번 새로 열리는' 것처럼 보인다. */
.chatbot-panel {transform-origin: 100% 100%;}
.chatbot-panel.is-anim {animation: chatbot-open .24s var(--animation-timing);}
@keyframes chatbot-open {
	from {opacity: 0; transform: translateY(1.6rem) scale(.98);}
	to {opacity: 1; transform: none;}
}

/* (태블릿) */
@media screen and (max-width: 1024px) {
	:root {--chatbot-gap: 2.4rem; --chatbot-top: 12rem;}
}

/* (태블릿+모바일) */
@media screen and (max-width: 768px) {
	:root {--chatbot-size: 5.6rem; --chatbot-gap: 1.6rem; --chatbot-top: 8rem;}
	.chatbot-panel,
	.chatbot-panel.is-expanded {width: calc(100vw - var(--chatbot-gap) * 2);}
	/* 화면 폭을 다 쓰는 구간에서는 조절할 여지가 없다 */
	.chatbot-grip {display: none;}
}

/* 본문 구분선 (Explain 정의↔계산식↔예시 · Code/Catalog 링크 앞) */
.chatbot-tpl-rule {height: 0; margin: 1.6rem 0; border: 0; border-top: var(--line-sm) solid var(--chatbot-border-off);}

/* CTA 한 줄 : 이모지 + 소제목(bold) + 링크 (확정 디자인) */
.chatbot-tpl-cta {font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}
/* 확정 SCR-0230 · SCR-0231 : 안내 문단과 링크 줄 사이는 빈 줄 한 줄(1.6em = line-height) 이다 */
.chatbot-tpl-txt + .chatbot-tpl-cta {margin-top: 1.6em;}
.chatbot-tpl-cta strong {font-weight: var(--font-bold); color: var(--chatbot-icon-dark);}
.chatbot-tpl-cta a,
.chatbot-tpl-cta a:visited {color: inherit; text-decoration: none; word-break: break-all;}
.chatbot-tpl-link {font-size: 1.4rem; line-height: 1.6;}
.chatbot-tpl-link a,
.chatbot-tpl-link a:visited {color: var(--color-point); text-decoration: underline; word-break: break-all;}

/* 예시 여러 줄 (Explain) */
.chatbot-tpl-lines li {font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}

/* 예문 안내 (Catalog) */
.chatbot-tpl-note-ex {padding-left: 2rem; font-size: 1.4rem; line-height: 1.6; color: var(--chatbot-popover-text);}

/* 카탈로그 중간 생략 */
.chatbot-tpl-catalog .item-gap {padding: .6rem 0; text-align: center; color: var(--color-gray2); letter-spacing: .2rem;}

/* 절차 안의 소제목 (Guide 2단계 안의 "Docker 설치" 같은 것) */
.chatbot-tpl-steps .step-sub {margin: .8rem 0 .2rem; font-size: 1.35rem; font-weight: var(--font-medium); color: var(--color-black-text);}

/* 관련 자료 (Guide) */
.chatbot-tpl-links li {padding: .3rem 0; font-size: 1.3rem; line-height: 1.6;}
.chatbot-tpl-links li::before {content: "- ";}
.chatbot-tpl-links .label {color: var(--color-gray1);}
.chatbot-tpl-links a,
.chatbot-tpl-links a:visited {color: var(--color-point); text-decoration: underline; word-break: break-all;}

/* 상태 안내 (SCR-0205 가드레일 · SCR-0206 오류 · SCR-0207 이용 제한 · 중단)
   chips·출처·복사 버튼이 붙지 않는다. 말풍선 배경만 쓰고 아이콘으로 톤을 구분한다. */
.chatbot-notice .notice-tit {margin-bottom: .6rem; font-size: 1.4rem; font-weight: var(--font-bold); color: var(--color-black-text);}
.chatbot-notice .notice-tit .ico {margin-right: .4rem;}
.chatbot-notice .notice-txt {font-size: 1.4rem; line-height: 1.6; color: var(--color-black);}
.chatbot-notice .notice-txt + .notice-txt {margin-top: .8rem;}
.chatbot-notice.is-guardrail .notice-tit {color: var(--color-black-text);}
.chatbot-notice.is-data-not-found .notice-tit,
.chatbot-notice.is-api-error .notice-tit {color: var(--color-red);}
.chatbot-notice.is-stopped .notice-txt {color: var(--color-gray1);}
/* 로그인 세션이 끊겼을 때 (2026-09-15). 비로그인 팝오버와 같은 글자·같은 아이콘을 쓴다.
   아이콘은 그 팝오버가 쓰는 파일 그대로다 (ico-chatbot-info.svg) */
.chatbot-notice.is-login-required {display: flex; align-items: center; gap: .8rem;}
.chatbot-notice.is-login-required::before {content: ""; flex: none; width: 2.4rem; height: 2.4rem; background: url('./../img/common/ico-chatbot-info.svg') no-repeat center / 1.8rem 1.8rem;}
.chatbot-notice.is-login-required .notice-txt {color: var(--chatbot-popover-text);}
.chatbot-notice.is-login-required a,
.chatbot-notice.is-login-required a:visited {color: var(--color-point); text-decoration: underline; text-underline-position: from-font;}
.chatbot-notice.is-login-required a:hover {color: var(--chatbot-primary-hover);}

/* 입력창 비활성 (Processing·Streaming 구간)
   확정 SCR-0202 : 파란 테두리가 사라지고 BG/Surface 로 채워진다 */
.chatbot-input textarea:disabled {color: var(--color-gray2); cursor: default;}
.chatbot-input:has(textarea:disabled) {border-color: var(--chatbot-border-off); background-color: var(--chatbot-send-off-bg);}

/* 대화 내역 화면 (SCR-0300) : 헤더가 흰 배경이다. 대화 화면만 파랑 */
.chatbot-panel.is-history .chatbot-head {background-color: var(--color-light); border-bottom: var(--line-sm) solid var(--color-line);}
.chatbot-panel.is-history .chatbot-head .chatbot-tit .txt {color: var(--chatbot-text-heading);}
/* 확정 Header State:Menu-H — 대화 내역에서는 로고(아바타)와 확대 버튼이 없다 */
.chatbot-panel.is-history .chatbot-head .chatbot-tit .ico {display: none;}
.chatbot-panel.is-history .chatbot-head .chatbot-tit .sub {display: none;}
.chatbot-panel.is-history .chatbot-resize {display: none;}
.chatbot-panel.is-history .chatbot-icon-btn:hover:not(:disabled) {background-color: var(--chatbot-send-off-bg);}
.chatbot-panel.is-history .chatbot-menu .ico {background-image: url('./../img/common/ico-chatbot-menu-dark.svg');}
.chatbot-panel.is-history .chatbot-back .ico {background-image: url('./../img/common/ico-chatbot-back-dark.svg');}
.chatbot-panel.is-history .chatbot-new .ico {background-image: url('./../img/common/ico-chatbot-new-dark.svg');}