* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'S-CoreDream',sans-serif;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  background: #f4f6f9;
}
    
    

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; 
	padding: 0; 
	border: 0;  
	font-size: inherit; 
	font-family: inherit; 
	vertical-align: baseline;
}
* { color : inherit; } /*#56575b;*/
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}



*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust:none; 
	-webkit-tap-highlight-color:transparent;
}


img,fieldset{border:0;outline:none}
label {cursor:pointer}
i, em, address {font-style:normal}
caption{visibility:hidden;width:0px;height:0px;line-height:0px}
iframe,object,video,embed{position:relative;top:0;left:0;max-width:100%}
input,select,textarea{letter-spacing:-1px}
textarea{resize:none;border:none;background:none;padding:0px;}	

/* 제목요소 */
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal; margin:0px; padding:0px;} 

/* 테두리 없애기 */
fieldset, img, abbr,acronym,a {border:0px none;}

/* 목록 */
ol, ul, li {list-style:none; list-style-type:none; margin:0px; padding:0px;}

/* 텍스트 관련 요소 초기화 */
address, caption, em, cite {font-weight:normal;	font-style:normal;}
ins {text-decoration:none;}
del {text-decoration:line-through;}

/* 인라인 요소 세로 정렬 부분 */
img, input, select, textarea, label{vertical-align:middle;
	font-size: inherit; 
	font-family: inherit; 
	font-style: normal; /* 혹시 italic이 걸려 있다면 제거 */
}

/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand{display:none}

a {
	-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	text-decoration: none;
	-webkit-tap-highlight-color:transparent;
}
a:link, a:visited {text-decoration:none;cursor: pointer;user-select:none;}
a:hover, a:focus, a:active{background:none;text-decoration:none;}
*:focus {
    outline: none;
}	
input::-ms-clear{display:none}		

@-ms-viewport {
	width: device-width;
}


 
h1 {font-size: 24px; padding: 16px; background: #f0f0f0; margin: 0;}
select, input, textarea {
	width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-top: 4px;
}
label {font-weight: 600; margin-top: 12px; display: block;}

button{
	padding:0px;
	margin:0px;
	font-family: inherit; 
	vertical-align: baseline;
	border:0px;
}


input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea {
-webkit-tap-highlight-color:transparent;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background: #ffffff;
	border-radius: 3px;
	border: 1px solid #ddd !important;
	color: inherit;
	outline: none;
	outline-style:none;
	padding: 0 0.5em;
	text-decoration: none;
	width: 100%;
	height:31px;
	vertical-align:middle;
}

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
input[type="tel"]:invalid,
input[type="number"]:invalid,
input[type="search"]:invalid,
input[type="url"]:invalid,
textarea:invalid {
	box-shadow: none;
}

/* 셀렉트박스 제어 */
select{
	width:100%;
	border:1px solid #ccc !important;
	padding:5px 8px;
	background:#fff !important;
	border-radius:5px;
    font-size:14px;
}

input[type="radio"],
input[type="checkbox"]{
	width:17px;
	height:17px;
	margin-right:3px;
}


body{
	/*font-family: 'Noto Sans KR', sans-serif;color:#56575b; */
	/*font-family: 'S-CoreDream-3Light', sans-serif; */
	font-family: 'S-CoreDream',sans-serif;
	color:#333;
	font-weight:400;
	min-width:340px;
	height: 100%;
	font-size:100%;
	-webkit-text-size-adjust: none;
	-ms-overflow-style: scrollbar;
	background:#EFF3FB;
}    


input::placeholder {
	color: #999;
	font-style: italic;
	font-size:15px;
}






/*
*	기본
*/

.sectionTitles{
	font-size:18px;text-align:left;
	border-bottom:1px solid #ddd;
	padding-bottom:10px;
	margin-bottom:10px;
	display: flex;            /* 가로 정렬 활성화 */
	align-items: center;      /* 세로 중앙정렬 */
	gap: 6px;                 /* 아이콘과 텍스트 사이 간격 */	
}
.sectionTitles svg {
  vertical-align: middle;   /* 혹시 inline 일 때 대비 */
  flex-shrink: 0;           /* 아이콘 크기 유지 */
}

/*
*	컨텐츠 박스
*/
.menu-content-box {
	background: #fff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	text-align:left;
}




/*
*	text,textarea 입력폼 스타일
*	사용
*/
.input-wrap {
	background: #F7F9FC;
	padding: 8px 5px;
	border-radius: 10px;
	border: 1px solid transparent; /* 기본은 투명 */
	transition: border-color 0.2s;
}

.input-wrap:focus-within {
	border-color: #000; /* #4A90E2 포커스 됐을 때 파란 테두리 */
}

.input-wrap input,
.input-wrap textarea {
	background: #F7F9FC;
	border: none !important;
	outline: none;
	width: 100%;
	font-size: 14px;
	margin: 0 !important;
	resize: none; /* 사용자가 드래그로 크기 변경 못하게 */
	overflow: hidden; /* 스크롤바 감춤 */
	line-height: 1.5;
}

.input-wrap textarea {
	background: #F7F9FC;
	border: none !important;
	outline: none;
	width: 100%;
	font-size: 14px;
	margin: 0 !important;
	resize: none;
	overflow: hidden;
	line-height: 1.5;
	transition: height 0.2s ease; /* 부드러운 높이 변화 */
	min-height: 2.5em; /* ⭐ placeholder 잘림 방지 */
	padding: 6px 8px;
	box-sizing: border-box;
	
	padding-top: 4px;      /* 약간만 위쪽 여백 */
	padding-bottom: 4px;	
	overflow-y: hidden;
}



/*
* 스트리밍 처음 
*/
    .message {
      max-width: 800px;
      margin: 0 auto 1rem;
      display: flex;
      gap: 1rem;
    }
    .message.user {
      justify-content: flex-end;
    }
    .message.assistant {
      justify-content: flex-start;
    }
    .message-content {
      /*background: #444654;*/
      background: #ffffff; /* 연한 회색 말풍선 */
      padding: 0.5rem;
      /*border-radius: 8px;*/
      border-radius: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      color: #222;
    }
    .message.user .message-content {
      /*background: #10a37f;*/
      background: #F9F9F9; /* 사용자 말풍선 약간 다른 색 */
      /*color: #fff;*/
      color: #000;
    }
    
    
/*gpt 답변 시작전 로딩*/
.loader-dots {
  display: flex;
  gap: 5px;
  font-size: 10px;
  white-space: normal;
  /*justify-content: center;중앙정렬*/
  justify-content: flex-start; 
  align-items: center;  
}

.loader-dots span {
  display: inline-block;
  animation: bounce 1.2s infinite ease-in-out;
}

.loader-dots span:nth-child(1) {
  animation-delay: 0s;
}
.loader-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.loader-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  40% {
    transform: translateY(-8px);
    opacity: 1;
  }
}


section{width:100%;}
.ais-content-section{
	max-width:1560px;
	margin:0 auto;
}