@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

:root {
	/*--brand-color: #bff6f2;*/
	--brand-color: #538684;
	--brand-orange: #ffaa00;
	--brand-orange-dark: #d37801;

	--brand-logo-color: #a5d3d1;

	--brand-line-color: #6ec0bd;

	--bg-brand-color: #ecf3f0;

	--default-button-bg: #6ec0bd;
	--text-emp-color: #126460;

	--box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);

	--ui-z: 10000;
	--ui-dim: rgba(0,0,0,.45);
	--ui-bg: #fff;
	--ui-text: #222;
	--ui-primary: #2563eb;   /* 파랑 */
	--ui-secondary: #e5e7eb; /* 연회색 */
	--ui-radius: 14px;
	--ui-shadow: 0 10px 30px rgba(0,0,0,.25);
}

html, body {height: 100%}

body {
	margin: 0;
	background-color: #fff;
	font-family: "Noto Sans KR", sans-serif;
}

/* ======= 기본 스타일 ====== */

a {
	text-decoration: none;
	color: inherit;
}
a:visited {
	color: inherit;
}
a:hover {
	text-decoration: none;
}


.btn-list {
	background-color: #f1f1f1;
	border: 1px solid #ccc;
	color: #333;
	border-top: 0;
	border-left: 0;
	border-radius: 6px;
}




.nowrap {
	white-space: nowrap;
}

.no-list {
	padding: 30px 0;
	text-align: center;
	color: #777;
	font-size: inherit;
}


.common-width {
	width: 1170px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
}

/* number 타입 입력에서 스피너(↑↓) 제거 */

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type="number"] {
	-moz-appearance: textfield;
}


/* nav-page */
.nav-page {
	margin: 40px 0 20px;
	text-align: center;
}
.nav-page button {
	/*border: 1px #aaa solid;*/
	border-radius: 4px;
	border: 0;
	background-color: transparent;
	padding: 0;
	height: 30px;
}

.nav-page button.btn-move-block,
.nav-page button.btn-move-page {
	width: 30px;
	color: #777;
	margin: 0 2px;
}
.nav-page button.page {
	min-width: 30px;
	cursor: default;
	border: none;
	border-color: #d0d0d0;
}
.nav-page button.page:hover {
	border-color: #999;
	background-color: #cce4ee;
}
.nav-page button.page.on {
	background-color: var(--brand-color);
	border-color: var(--brand-color);
	color: white;
	cursor: default;
}
.nav-page .page-btns {
	display: inline;
	margin: 0 10px;
}






.main-container {
	/*padding-left: 250px;*/
	position: relative;
	min-height: 100vh;
	/*height: calc(100% - 80px);*/
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
}

.content-body {
	flex: 1;
	height: 100%;
	box-sizing: border-box;
}



.no-result {
	padding: 100px 0;
	text-align: center;
	color: #777;
}



/* 푸터 */
/*.footer {*/
/*	background-color: #666;*/
/*	color: #eee;*/
/*	text-align: center;*/
/*	padding: 30px 20px 40px;*/
/*	font-size: 0.9rem;*/
/*	line-height: 1.6;*/
/*}*/

/*.footer .footer-inner {*/
/*	max-width: 1200px;*/
/*	margin: 0 auto;*/
/*}*/

/*.footer .footer-logo {*/
/*	font-size: 1.6rem;*/
/*	font-weight: 500;*/
/*	color: #eee;*/
/*	margin-bottom: 16px;*/
/*	letter-spacing: 0.02em;*/
/*}*/

/*.footer .footer-info p {*/
/*	margin: 4px 0;*/
/*	color: #eee;*/
/*}*/

/*.footer .footer-copy {*/
/*	margin-top: 18px;*/
/*	padding-top: 12px;*/

/*	color: #eee;*/
/*	font-size: 0.85rem;*/
/*}*/

/* 반응형: 모바일 정렬 및 간격 조정 */
@media (max-width: 768px) {
	/*.footer {*/
	/*	font-size: 0.9rem;*/
	/*	padding: 40px 16px 30px;*/
	/*}*/
	/*.footer .footer-info p {*/
	/*	line-height: 1.5;*/
	/*}*/

	.sepbar {
		display: none;
	}

}


/* Global Alert, Confirm dialog */
body.ui-dialog-open { overflow: hidden; }

#uiDialogRoot {
	position: fixed;
	inset: 0;
	z-index: var(--ui-z);
	display: none;
}
#uiDialogRoot.open { display: block; }

#uiDialogRoot .ui-dim {
	position: absolute;
	inset: 0;
	background: var(--ui-dim);
	opacity: 0;
	transition: opacity .12s ease;
}
#uiDialogRoot.open .ui-dim { opacity: 1; }

#uiDialogRoot .ui-modal {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -46%);
	background: var(--ui-bg);
	color: var(--ui-text);
	min-width: 320px;
	max-width: min(92vw, 520px);
	border-radius: var(--ui-radius);
	box-shadow: var(--ui-shadow);
	opacity: 0;
	translate: 0 10px;
	transition: opacity .12s ease, translate .12s ease, transform .12s ease;
	outline: none;
}
#uiDialogRoot.open .ui-modal {
	opacity: 1;
	translate: 0 0;
	transform: translate(-50%, -50%);
}

.ui-modal .ui-close {
	position: absolute;
	right: 10px;
	top: 8px;
	font-size: 24px;
	line-height: 1;
	border: 0;
	background: transparent;
	color: #8c8c8c;
	cursor: default;
	padding: 6px;
}
.ui-modal .ui-close:hover { color: #111; }

.ui-modal .ui-modal-body { padding: 22px 22px 10px 22px; }
.ui-modal .ui-title {
	margin: 0 24px 8px 0;
	font-size: 18px;
	font-weight: 700;
}
.ui-modal .ui-message {
	font-size: 15px;
	line-height: 1.6;
	word-break: keep-all;
}

.ui-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	padding: 16px 22px 20px 22px;
}
.ui-btn {
	border: 0;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	cursor: default;
	transition: transform .04s ease, opacity .12s ease, box-shadow .12s ease;
}
.ui-btn:active { transform: translateY(1px); }

.ui-primary {
	background: var(--ui-primary);
	color: #fff;
	box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.ui-primary:hover { opacity: .92; }

.ui-secondary {
	background: var(--ui-secondary);
	color: #111;
}
.ui-secondary:hover { opacity: .92; }

/* 작은 화면 대응 */
@media (max-width: 360px) {
	#uiDialogRoot .ui-modal { min-width: 280px; }
}





/* conversation box */

.conversation {
	padding: 20px;
}


.conversation .message {
	position: relative;
	font-size: 1rem;
	line-height: 1.4;
	margin-bottom: 15px;
	border-radius: 10px;
}
.conversation .message.user {
	text-align: right;
}
.conversation .message.ai {
	text-align: left;
}
.conversation .message.user > div {
	display: inline-block;
	text-align: left;
	position: relative;
	max-width: 80%;
	background-color: #dfdfdf;
	padding: 12px 20px;
	margin: 0 0 0 auto;
	border-radius: 10px;
	white-space: pre-wrap;
	box-shadow: var(--box-shadow);
}
.conversation .message.ai > div {
	display: inline-block;
	text-align: left;
	position: relative;
	max-width: 80%;
	background-color: #dff8f5;
	padding: 12px 20px;
	margin: 0 auto 0 0;
	border-radius: 10px;
	white-space: pre-wrap;
	box-shadow: var(--box-shadow);
}
.conversation .message.user > div::after {
	content: "";
	position: absolute;
	right: -8px;
	top: 10px;
	border-width: 8px 0 8px 8px;
	border-style: solid;
	border-color: transparent transparent transparent #dfdfdf;
}
.conversation .message.ai > div::after {
	content: "";
	position: absolute;
	left: -8px;
	top: 10px;
	border-width: 8px 8px 8px 0;
	border-style: solid;
	border-color: transparent #dff8f5 transparent transparent;
}


.mobile-page-header {
	display: none;
}


/* chat box end */

/* 기타 */

.w50 {width: 50px !important}
.w80 {width: 80px !important}
.w100 {width: 100px !important}
.w150 {width: 150px !important}
.w200 {width: 200px !important}
.w250 {width: 250px !important}
.w300 {width: 300px !important}
.w400 {width: 400px !important}
.w500 {width: 500px !important}
.w600 {width: 600px !important}
.w700 {width: 700px !important}
.w800 {width: 800px !important}
.w900 {width: 900px !important}
.w1000 {width: 1000px !important}


.aleft {text-align: left !important}
.acenter {text-align: center !important}
.aright {text-align: right !important}




.sync-tpl {
	display: none;
}


@media (min-width: 1921px)
{
	.common-width {
		width: 1600px;
	}
}

@media (max-width: 1200px)
{
	.common-width {
		width: calc(100% - 20px);
	}
}

@media (max-width: 767px)
{
	.mobile-page-header {
		display: block;
		padding: 15px 10px;
		background-color: #fff;
		border-bottom: 1px solid var(--brand-line-color);
	}
	.mobile-page-header .btn-back {
		border: 0;
		background-color: transparent;
		width: 30px;
		display: inline-block;
		vertical-align: middle;
		font-size: 1rem;
		color: #333;
	}
	.mobile-page-header .page-title {
		display: inline-block;
		vertical-align: middle;
		font-size: 1.2rem;
		line-height: 1;
		font-weight: 600;
		color: #333;
	}

	.conversation .message {
		font-size: 0.8rem;
	}

}