@charset "utf-8";

/* common */
#chat_con .btn_m_menu,
#chat_con header {display:none;}
#chat_con #sidebar {position:fixed;left:0;top:0;height:100vh;background-color:#363636;width:320px;padding:30px;}
#chat_con #sidebar + #container {padding-left:370px;}
#chat_con .sidebar_con {position:relative;height:calc( 100vh - 80px );overflow: hidden;overflow-y:auto;}

/* 스크롤바 전체 기본 꾸미기 */
#chat_con .sidebar_con::-webkit-scrollbar {width: 3px; }
#chat_con .sidebar_con::-webkit-scrollbar-thumb {background: #000; /* 스크롤바 색상 */}
#chat_con .sidebar_con::-webkit-scrollbar-track {background: #88888850;  /*스크롤바 뒷 배경 색상*/}

#chat_con .main_logo {font-size:26px;color:#fff;}
#chat_con .main_logo .point_color {font-size:26px;color:var(--base-color);}
#chat_con .main_logo .version_area {font-size:12px;color:#afafaf;margin-left:10px;font-weight:400;}
#chat_con .member_area {margin:34px 0 40px;display:flex;gap:10px;}
#chat_con .member_area a {display:inline-block;padding:8px 20px 8px 40px;border-radius:20px;font-weight:500;color:#1e1e1e;background:#fff url("../images/icon/bull_member.svg") 15px center no-repeat;}
#chat_con .header_tit {position: relative;font-size: 16px;color: #afafaf;}

#chat_con .project_list {padding-bottom:20px;margin-bottom: 20px; border-bottom:1px solid #ddd;}
#chat_con .project_list li {margin-top: 10px;}
#chat_con .project_list li:first-child {margin-top: 0;}
#chat_con .project_list li a {font-size: 16px;font-weight: 500;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color:#fff;}
#chat_con .project_list li a:focus,
#chat_con .project_list li a:hover,
#chat_con .project_list li a.on {color: #f16422;text-decoration: underline;}

#chat_con .menu_list {margin-top: 15px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #ddd;}
#chat_con .menu_list > li {margin-top: 10px;position: relative;display: flex;flex-wrap: wrap;align-items: center;}
#chat_con .menu_list > li.new_type {padding-right: 50px;}
#chat_con .menu_list > li.new_type::after {width: 15px;height: 15px;font-size: 11px;line-height: 15px;text-align: center;content: "N";display: inline-block;margin-left: 5px;padding: 2px;background-color: #f16422;border-radius: 30px;color: #fff;}
#chat_con .menu_list > li:first-child {margin-top: 0;}
#chat_con .menu_list > li > a {font-size: 16px;display: inline-block;font-weight: 500;border-bottom: 2px solid transparent;color:#fff;}
#chat_con .menu_list > li > a:focus,
#chat_con .menu_list > li > a:hover,
#chat_con .menu_list > li > a.on {border-bottom: 2px solid #f16422;color: #f16422;}
#chat_con .txt_copyright {position:absolute;left:0;bottom:20px;width:100%;text-align:center;color:#afafaf;font-size:12px;letter-spacing:0;}

#chat_con #container {padding:50px;}
#chat_con .contents {width:100%;max-width:640px;margin:0 auto;}
#chat_con .contents.w100 {max-width:100%;padding-bottom:60px;}

@media only screen and (max-width: 768px){
    #chat_con html.m_menu_on {overflow:hidden;}
    #chat_con #sidebar {position:relative;height:62px;width:100%;padding:15px;}
    #chat_con .sidebar_con {height:auto;overflow: inherit;position:static;}
    #chat_con #sidebar + #container {padding-left:10px;}
    #chat_con .member_area {margin:0;}
    #chat_con .con_m {display:none;position:fixed;top:62px;left:0;width:100%;height:calc(100vh - 62px);background-color:#363636;z-index:10;padding:10px 20px;}
    #chat_con .member_area {justify-content: center;}
    #chat_con .member_area a {font-size:13px;padding:8px 15px 8px 30px;background-size:14px auto;background-position: 10px center;border:1px solid #ddd;}
    #chat_con .btn_m_menu {display:block;position:absolute;right:15px;top:15px;width:30px;height:30px;background:url("../images/icon/icon_m_menu.png") center no-repeat;background-size:25px auto;}

    #chat_con .project_list {padding-top:15px;margin-top:15px;border-top:1px solid #ddd;}
    #chat_con .project_list li {margin-top:8px;}
    #chat_con .project_list li a {font-size:18px;}

    #chat_con .menu_list > li {margin-top:8px;}
    #chat_con .menu_list > li > a {font-size: 16px;}

    #chat_con .txt_copyright {position: fixed;bottom:10px;color:#fff;z-index:10;}
}

/* robot button */
#chat_con .bg_dimm {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);z-index: 10000;display: none;}

/* input */
#chat_con input[type="password"],
#chat_con input[type="number"],
#chat_con input[type="text"] {padding:10px;width:100%;background-color:#fff;border:1px solid #ddd;}
#chat_con input[type="file"] {padding:8px 10px;width:100%;background-color:#fff;border:1px solid #ddd;}
#chat_con label {margin-right:10px;}
#chat_con .select_wrap {position:relative;display:inline-block;max-width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;}
#chat_con .select_wrap::before {content:"▼";position:absolute;right:10px;top:7px;color:#333;font-size:10px;}
#chat_con .select_area {padding:8px 10px;padding-right:25px;border:1px solid #ddd;max-width:100%;}
#chat_con textarea {width:100%;border:1px solid #ddd;resize: none;padding:15px;}
#chat_con .input_area_wrap {display:flex;margin:2px 0 5px;align-items: center;justify-content: space-between;}
#chat_con .input_area_wrap .input_area {flex-grow: 1;}
#chat_con .input_area_wrap .input_area label {padding:0 20px;}
#chat_con .input_area_wrap .input_area span {padding:0 20px;}
#chat_con .input_area_wrap .btn_send {flex-shrink: 0;}
#chat_con .input_area_wrap button {align-self: stretch;}

@media only screen and (max-width: 768px){
    #chat_con input {font-size:12px;}
    #chat_con select {font-size:12px;}
}

/* button */
#chat_con .chat_wrap button {padding:10px 25px;background-color:#8d8c8c;color:#fff;font-weight:500;font-size:13px;}
#chat_con .chat_wrap button:hover {outline: 2px dotted #333;}
#chat_con .chat_wrap button.type_white {padding:9px 24px;border:1px solid #ddd;background-color:#fff;color:#1e1e1e;}
#chat_con .chat_wrap button.type_white:hover,
#chat_con .chat_wrap button.type_white:focus {outline: 2px dotted #fff;}
#chat_con .btn_area {display:flex;gap:10px;justify-content: center;margin-top:20px;}

@media only screen and (max-width: 768px){
    #chat_con .chat_wrap button {font-size:12px;padding:8px 15px;}
}

/* text */
#chat_con .title_box {display:flex;justify-content: space-between;flex-wrap:wrap;}
#chat_con .title_btn {align-self: center;}
#chat_con .title_box button {padding:8px 14px;font-size:12px;}
#chat_con .page_tit {font-size:22px;font-weight:500;}
#chat_con .sub_tit {font-size:18px;padding:10px 0 10px;}
#chat_con .box_tit {font-size:14px;font-weight:500;margin:10px 0 5px;}
#chat_con .txt_cation {color:red;font-size:12px;}

@media only screen and (max-width: 768px){
    #chat_con .page_tit {font-size:16px;}
    #chat_con .sub_tit {font-size:14px;padding:10px 0 5px;}
    #chat_con .box_tit {font-size:12px;}
    #chat_con .txt_cation {font-size:11px;}
}

/* tab */
#chat_con .tab_wrap {position:relative;margin-top:30px;}
#chat_con .tab_wrap .tab_list {display:flex;}
#chat_con .tab_wrap .tab_list li a {display:inline-block;min-width:100px;text-align:center;padding:8px;border:1px solid #ddd;}
#chat_con .tab_wrap .tab_list li a.on {background-color:#f16422;border:1px solid #f16422;color:#fff;}
#chat_con .tab_wrap .tab_con {display:none;border:1px solid #ddd;margin-top:-1px;padding:20px;}

@media only screen and (max-width: 768px){
    #chat_con .tab_wrap {margin-top:15px;}
    #chat_con .tab_wrap .tab_list li a {font-size:12px;padding:5px;min-width:60px;}
}

/* page */
#chat_con .num_count_wrap {margin-top:20px;font-weight:bold;padding-bottom:3px;}
#chat_con .num_count_wrap span {font-size:14px;color:#f16422;font-weight:400;}
#chat_con .num_count_wrap + .scroll_box {margin-top:0;}
#chat_con .sub_tit + .scroll_box {margin-top:0;}
#chat_con .scroll_box::-webkit-scrollbar { width: 3px; height:5px;}
#chat_con .scroll_box::-webkit-scrollbar-thumb { background: #999; }
#chat_con .scroll_box {position:relative;overflow: auto;height:200px;border:1px solid #ddd;margin:10px 0;padding:20px;background-color:#f9f9f9;word-break: break-all;}
#chat_con .scroll_box .add_caution {position:absolute;left:0;top:0;width:100%;padding:5px;font-size:11px;color:#f16422;background-color:#fff;border-bottom:1px solid #ddd;}
#chat_con .scroll_box.bg_white {background-color:#fff;}
#chat_con .scroll_box .box_tit:first-child {margin-top:0;}
#chat_con .scroll_box table {min-width:768px;}

#chat_con .size_guide {display:flex;align-items:center;padding:5px 0;}
#chat_con .size_guide + .scroll_box {margin-top:5px;}
#chat_con .size_guide .num_input {text-align:center;width:60px;padding:5px 10px;margin:0 20px;flex-shrink: 0;}

#chat_con .qa_list {margin-top:20px;}
#chat_con .qa_list dt {font-size:15px;font-weight:500;margin-bottom:10px;}

#chat_con .text_ex_area {display:flex;flex-wrap:wrap;}
#chat_con .text_ex_area dl {display:flex;align-items: center;position:relative;}
#chat_con .text_ex_area dl dt {font-weight:500;padding-right:3px;}
#chat_con .text_ex_area dl + dl {margin-left:10px;padding-left:15px;}
#chat_con .text_ex_area dl + dl::before {content:"/";position:absolute;left:0;top:50%;transform:translateY(-50%);}

#chat_con .result_area {color:red;padding:10px;border:1px solid #ddd;margin:10px 0 20px;}
#chat_con .result_area * {color:red;}

/* table */
#chat_con .tb_scroll_wrap {overflow: auto;width:100%;}
#chat_con .tb_scroll_wrap::-webkit-scrollbar { width: 3px; height:5px;}
#chat_con .tb_scroll_wrap::-webkit-scrollbar-thumb { background: #000; }
#chat_con .tb_scroll_wrap table {min-width:1200px;}
#chat_con .tb01 {border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
#chat_con .tb01 th {border-left:1px solid #555;border-top:1px solid #555;border-bottom:1px solid #555;padding:8px 5px;background-color:#696969;color:#fff;font-size:14px;}
#chat_con .tb01 td {border-left:1px solid #ddd;border-top:1px solid #ddd;padding:8px 5px;font-size:13px;text-align: center;}
#chat_con .tb01 td.txt_left {text-align:left;}
#chat_con .tb01 tr:nth-child(2n) td {background-color:#eee;}


/* Python table 클래스 추가 */
#chat_con .dataframe {border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
#chat_con .dataframe th {border-left:1px solid #555;border-top:1px solid #555;border-bottom:1px solid #555;padding:8px 5px;background-color:#696969;color:#fff;font-size:14px;}
#chat_con .dataframe td {border-left:1px solid #ddd;border-top:1px solid #ddd;padding:8px 5px;font-size:13px;text-align: center;}
#chat_con .dataframe td.txt_left {text-align:left;}
#chat_con .dataframe tr:nth-child(2n) td {background-color:#eee;}

#chat_con .dataframe {width: auto;overflow-y: auto;min-width: 100%;}
#chat_con .dataframe th, .dataframe td {font-size: 0.75rem;white-space: nowrap;padding-left: 5px;padding-right: 5px;}
#chat_con .tbl1 thead th, .dataframe thead th {padding-top: 8px;padding-bottom: 8px;border-bottom: 1px solid #9d9e9e}
#chat_con .tbl1 tbody td, .dataframe tbody td {padding-top: 8px;padding-bottom: 8px}
#chat_con .dataframe thead th {text-align: center;}
#chat_con .dataframe tbody th {border-bottom: 1px solid #9d9e9e;vertical-align: middle;}
#chat_con .dataframe tbody td {text-align:left;}

/* 로딩바 추가 */
#chat_con .loading-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 1000;}
#chat_con .loading-spinner {color: #fff;font-size: 24px;font-weight: bold;letter-spacing: 2px;animation: wave-animation 2s infinite;}

/* sound only */
#chat_con .screenOut {overflow: hidden; display: inline-block; border: 0; position: absolute; z-index: -1; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}

@keyframes wave-animation {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
}
  
  

@media only screen and (max-width: 768px){
    #chat_con .scroll_box {height:150px;padding:10px;}
    #chat_con .size_guide * {font-size:12px;}
    #chat_con .qa_list dt {font-size:14px;}
    #chat_con .text_ex_area * {font-size:12px;}
    #chat_con .text_ex_area dl + dl {margin-left:5px;padding-left:10px;}
    #chat_con .scroll_box * {font-size:14px;}
    #chat_con .tb01 th {font-size:12px;}
    #chat_con .tb01 td {font-size:12px;}
}



/* 툴팁 기본 스타일 설정 시작 */

#chat_con .tooltip {
  position: relative;
  display: block;
}

#chat_con .tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #8d8c8c;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 3px 0;

  position: relative;
  z-index: 1;
  
}

#chat_con .tooltip:hover .tooltiptext {
  visibility: visible;
}

#chat_con .tooltip:hover .bull_tail {
  visibility: visible;
}

/* 툴팁 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 화살표 기본 스타일 설정 시작 */

#chat_con .tooltip .bull_tail {
  visibility: hidden; 
  position: absolute;
  left:10px;
  top:21px;
  border-style: solid;
  border-width: 5px;
  margin-left: -5px;
  border-color: transparent transparent #8d8c8c transparent;
}

/* 툴팁 화살표 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 방향 설정 시작 */

#chat_con .tooltip .tooltip-bottom {
  width: 88px;
  top: 150%;
  left: 50%;
  margin-left: -44px;
  font-size:12px;
  display:block;
}

#chat_con .evalution_area button:last-child .tooltip-bottom {
  margin-left: -70px;
}

#chat_con .tooltip .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent #8d8c8c transparent;
}

/* 아래쪽 툴팁 시작 */

/* 툴팁 방향 설정 끝 */