.aiBot {width:100%;/*max-width:900px;*/background:rgba(255,255,255,1);/*border:1px solid #ddd; border-radius:20px;margin:0 auto;    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.1); */}
.aiBot_text {margin:0 auto;font-size:14px;text-align:center;color:#333;letter-spacing:-0.27px;}
.aiBot_text p {font-size:15px;color:#000;font-weight:500;}
.aiBot .aiBot_title h2{display: block;text-align: center;padding: 0 20px;line-height: 45px;font-size: 1.583em;}
.aiBot .aiBot_title p{max-width:560px;margin:0 auto;text-align: center;line-height: 24px;font-size: 1.1em;word-break:keep-all}

.aiBot {width:100%;display: flex;    align-items: flex-start;    justify-content: flex-start;  }
.aiBot .chat-history {width:240px;  }
.aiBot .drop-zone {width:calc(100% - 200px); }


@media (max-width: 768px) {
 
  .aiBot {
    flex-direction: column; /* 세로 정렬 */
  }

  .aiBot .chat-history {
    width: 100%; /* 가로 전체 사용 */
    order: 2;    /* 아래로 내림 */
  }

  .aiBot .drop-zone {
    width: 100%; /* 가로 전체 사용 */
    order: 1;    /* 위로 배치 */
    padding:5px;
  }
}

@media (max-width: 480px) {
  .aiBot  { box-shadow: none;border:none; }
  .aiBot_text {font-size:14px; }
  
}



/* chatbot*/
.chat_cont {  width: 100%;max-width: 700px;margin: 0 auto;text-align: center;padding: 10px;}
.chat_cont .title {font-size: 24px;font-weight: 700;margin-bottom: 40px;}
.chat_cont .input-area {display: flex;align-items: center; flex-wrap: nowrap; /* 줄바꿈 안되게 유지 */overflow: hidden;  /* 넘치는 부분 잘림 방지 */width: 100%;border: 2px solid #3f7ff1;border-radius: 28px;padding: 10px 15px;background: #fff;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);}
.chat_cont .left {display: flex;align-items: center;gap: 6px;font-size: 14px;white-space: nowrap;flex-shrink: 0;}
.chat_cont .left label {font-family: FontAwesome;font-size: 26px;font-weight: 300;color: #b6b6b6;cursor: pointer;}
#fileInput {display: none;}
.chat_cont .input-area input[type="text"],
.chat_cont .input-area textarea {flex: 1;font-size: 16px;padding: 8px;color: #333;border: none;border-radius: 4px;margin: 0 10px;min-width: 0; }
.chat_cont .input-area textarea {overflow: hidden;      /* 스크롤 숨김 */min-height: 40px;      /* 최소 높이 */max-height: 300px;     /* 최대 높이 제한 */line-height: 1.5;}
.chat_cont .input-area textarea {resize: none;  }
.chat_cont .right {display: flex;align-items: center;gap: 6px;font-size: 18px;color: #666;cursor: pointer;flex-shrink: 0;max-width: 86px;}
.chat_cont .right button {border: none;background: transparent;padding: 4px;}
.chat_cont .right button i {color: #0585ee;font-size: 20px;}
/*.chat_cont p {text-align: left;line-height: 16px;padding: 7px 10px;color: #0066ff;font-size: 13px;}*/

#chatBox {position:relative; height: auto;max-height:500px;min-height: calc(100% - 100px);overflow-y: auto;padding: 20px 10px;display: flex;flex-direction: column;gap: 10px;margin-bottom: 10px;font-size:14px;    }
#chatBox .gosite {display: inline !important; border-radius:5px;background:#e8e8e8;padding:1px 5px;text-align:center;margin-right:5px;font-size:12px;color:#8c8c8c}

#chatBox {      font-size: 16px;line-height:20px;text-align:left;    }
    
/* 메시지 스타일 */
#chatBox .msg {padding: 10px;border-radius: 10px;}
#chatBox .user {max-width: 80%;margin-top: 20px;background-color: #d9edf7;align-self: flex-start;text-align: left;}
#chatBox .upfile {max-width: 80%;background-color: #f1f1f1;align-self: flex-start;text-align: left;line-height: 24px;}

.ai .bubble {width: 100%;background-color: #fff;align-self: flex-start;text-align: left;line-height: 24px;}
.ai .bubble strong { color: #000; line-height:20px;}
.ai .bubble a { color: #0066cc; text-decoration: none;display: inline !important; border-radius:5px;background:#e8e8e8;padding:1px 5px;text-align:center;margin-right:5px;font-size:12px;color:#8c8c8c }
.ai .bubble a:hover { text-decoration: underline; }

.loading {text-align: center;font-size: 14px;color: #0053fd;margin-top: 5px;} 

/* 모바일 대응 */
@media (max-width: 480px) {
  .chat_cont .title {  font-size: 20px;}
  .chat_cont .input-area input[type="text"] {  font-size: 14px;}
  .chat_cont .left {  font-size: 12px;}
  .chat_cont .right {  font-size: 16px;}
  #chatBox {  max-height: 450px;  padding: 10px;}
}


/* ---------- 챗봇 ---------- */
:root {
  --base-font-size: 16px;
  --max-width: 800px;
  --ui-font: "Pretendard", "Noto Sans KR", sans-serif;
  --line-height: 1.6;
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --code-bg: #f3f4f6;
  --pre-bg: #f2f2f2;
  --pre-text: #f8fafc;
  --blockquote-bg: #f9fafb;
}
.ai {width:100%;}
.ai .bubble {
      background: #fff;
      border: 1px solid #eaeaea;
      border-radius: 15px 15px 15px 0;
      padding: 20px;
      font-size: 16px;
      
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
      width: 100%;
      text-align:left;
}
.ai .bubble{
  box-sizing: border-box;
  margin: 0 auto;
  
  max-width: var(--max-width);
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: var(--base-font-size);
  line-height: var(--line-height);
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
   
}

/* 기본 텍스트 요소 */
.ai .bubble p{
  margin: 0 0 16px 0;
  color: var(--text);
}

/* ---------- 제목 ---------- */
.ai .bubble h1,
.ai .bubble h2,
.ai .bubble h3,
.ai .bubble h4,
.ai .bubble h5,
.ai .bubble h6{
  margin: 20px 0 10px 0;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.02em;
}

.ai .bubble h1{ font-size: 1.5rem; margin-top: 0; }
.ai .bubble h2{ font-size: 1.3rem; }
.ai .bubble h2:before{ font-size: 1.3rem; }
.ai .bubble h3{ font-size: 1.2rem; }
.ai .bubble h4{ font-size: 1.0rem; }
.ai .bubble h5{ font-size: 0.90rem; }
.ai .bubble h6{ font-size: 0.80rem; color: var(--muted); }

.ai .bubble h2::before {
  /*content: "\25A0 ";  
  color: #007bff;   */
}

/* 제목 아래 소제목 보조선 (선택적) */
.ai .bubble h1 + p { margin-top: 8px; }

/* ---------- 링크 ---------- */
.ai .bubble a{
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}
.ai .bubble a:hover,
.ai .bubble a:focus{
  text-decoration: underline;
  outline: none;
}

/* 외부 링크 아이콘 (optional, requires ::after content) */
.ai .bubble a[target="_blank"]::after{
  content: " ↗";
  font-size: 0.9em;
  opacity: 0.7;
  margin-left: 4px;
}

/* ---------- 수평선 ---------- */
.ai .bubble hr{
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 28px 0;
}

/* ---------- 블록 인용 ---------- */
.ai .bubble blockquote{
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--border);
  background: var(--blockquote-bg);
  color: var(--muted);
  border-radius: 6px;
  font-style: italic;
}

/* ---------- 목록 ---------- */
.ai .bubble ul,
.ai .bubble ol{
  margin: 0 0 16px 0;
  padding-left: 1.15rem;
}
.ai .bubble ul li,
.ai .bubble ol li{
	
  margin: 6px 0;
  
}

/* 체크박스 (GitHub style) */
.ai .bubble input[type="checkbox"]{
  margin-right: 8px;
  vertical-align: middle;
}

/* ---------- 코드 ---------- */
/* 인라인 코드 */
.ai .bubble code{
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.92em;
  color: #111827;
  white-space: pre-wrap;
}

/* 블록 코드 (pre > code) */
.ai .bubble pre{
  margin: 16px 0;
  padding: 14px;
  overflow: auto;
  border-radius: 8px;
  background: var(--pre-bg);
  color: var(--pre-text);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* 코드 스니펫 제목(파일명) 용도: .code-header 연결 가능 */
.ai .bubble .code-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- 표 ---------- */
.ai .bubble table{
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 18px 0;
  display: block;
  overflow: auto;
}
.ai .bubble th,
.ai .bubble td{
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  min-width: 80px;
}
.ai .bubble th{
  background: #fbfdff;
  font-weight: 700;
}

/* ---------- 이미지 ---------- */
#chatBox img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
  border-radius: 6px;
}

/* ---------- 기타 ---------- */
#chatBox .task-list-item {
  list-style: none;
}

/* 소규모 메모/주석용 */
#chatBox small{
  color: var(--muted);
  font-size: 0.9em;
}

/* 모바일 대응 */
@media (max-width: 640px){
  #chatBox{
    padding: 18px;
    font-size: 15px;
  }
  #chatBox h1{ font-size: 1.6rem; }
  #chatBox pre{ font-size: 0.85rem; padding: 12px; }
}

/* 유틸리티: 강조 박스 */
#chatBox .callout{
  padding: 12px 14px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  color: var(--text);
  margin: 12px 0;
}

/* 액세스성: focus 스타일 */
#chatBox a:focus,
#chatBox button:focus{
  outline: 3px solid rgba(37,99,235,0.18);
  outline-offset: 2px;
  border-radius: 6px;
}
 
/* chatbot end */