/* 폰트 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
div,
dd,
dt,
ul li,
ol li,
select,
input,
textarea,
button {
	font-family: "Pretendard Variable", Pretendard, sans-serif;
}

/* 리셋 */
body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0px;
}

ul,
ol {
	padding: 0px;
	margin: 0px;
}

ul li {
	list-style: none;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

/* 기본 버튼 */
.sidetalk-dashboard-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border: 1px solid #ededed;
	border-radius: 20px;
	background-color: #fff;
	cursor: pointer;
	color: #555;
	transition: all 200ms ease-in-out;
}

.sidetalk-dashboard-button i {
	margin-right: 10px;
	font-size: 22px;
	line-height: 22px;
}

.sidetalk-dashboard-button .text {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
}

.sidetalk-dashboard-button:hover {
	background-color: #00b0ed;
	color: #fff;
}

/* 체크박스 커스텀 스타일 */
.custom-checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.custom-checkbox input[type="checkbox"] {
	display: none;
}

.custom-checkbox label {
	font-size: 16px;
	font-weight: 200;
	margin-left: 10px;
	cursor: pointer;
}

.custom-checkbox input[type="checkbox"]+label::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid #ddd;
	border-radius: 4px;
	vertical-align: middle;
	margin-right: 10px;
	background-color: #fff;
}

.custom-checkbox input[type="checkbox"]:checked+label::before {
	border: 1px solid #00b0ed;
	background-color: #00b0ed;
	background-image: url('../css/images/icon_check.png');
	/* 아이콘 이미지 URL */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 10px;
}

.custom-radio {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.custom-radio-wrap {
	display: flex;
	margin-bottom: 10px;
}

.custom-radio input[type="radio"] {
	display: none;
}

.custom-radio label {
	font-size: 16px;
	font-weight: 500;
	margin-left: 10px;
	cursor: pointer;
}

.custom-radio input[type="radio"]+label::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid #ddd;
	border-radius: 4px;
	vertical-align: middle;
	margin-right: 10px;
	background-color: #fff;
}

.custom-radio input[type="radio"]:checked+label::before {
	border: 1px solid #00b0ed;
	background-color: #00b0ed;
	background-image: url('../css/images/icon_check.png');
	/* 아이콘 이미지 URL */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 10px;
}

/* 저장 버튼 */
button.sidetalk-dashboard-button.save-button {
	border: 1px solid #00b0ed;
	background-color: #00b0ed;
	color: #fff;
}

button.sidetalk-dashboard-button.save-button:hover {
	border: 1px solid #008cd2;
	background-color: #008cd2;
}

/* 작은 버튼 */
button.sidetalk-dashboard-small-button {
	padding: 15px;
	border: 1px solid #ededed;
	border-radius: 15px;
	background-color: #fff;
	cursor: pointer;
	color: #555;
	transition: all 200ms ease-in-out;
}

button.sidetalk-dashboard-small-button i {
	margin-right: 10px;
	font-size: 22px;
	line-height: 22px;
}

button.sidetalk-dashboard-small-button .text {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
}

button.sidetalk-dashboard-small-button:hover {
	background-color: #00b0ed;
	color: #fff;
}

/* 작은 저장 버튼 */
button.sidetalk-dashboard-small-button.save-button {
	border: 1px solid #00b0ed;
	background-color: #00b0ed;
	color: #fff;
}

button.sidetalk-dashboard-small-button.save-button:hover {
	border: 1px solid #008cd2;
	background-color: #008cd2;
}

/* 채팅 기록 질문,답변 길이 제한 */
.text-wrap {
	display: inline-block;
	/* 텍스트를 블록으로 설정 */
	max-width: 136ch;
	/* 최대 50글자 길이로 제한 (1ch = 1글자 폭) */
	overflow-wrap: break-word;
	/* 단어 단위로 줄바꿈 */
	white-space: normal;
	/* 자동 줄바꿈 */
}

/* 밑줄 버튼 */
button.sidetalk-dashboard-underline-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
	color: #333;
	transition: all 200ms ease-in-out;
}

button.sidetalk-dashboard-underline-button i {
	margin-right: 10px;
	font-size: 18px;
	line-height: 22px;
}

button.sidetalk-dashboard-underline-button .text {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	text-decoration: underline;
}

button.sidetalk-dashboard-underline-button:hover {
	color: #008cd2;
}

/* 밑줄 없는 버튼 */
button.sidetalk-dashboard-text-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
	color: #333;
	transition: all 200ms ease-in-out;
}

button.sidetalk-dashboard-text-button i {
	margin-right: 10px;
	font-size: 18px;
	line-height: 22px;
}

button.sidetalk-dashboard-text-button .text {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
}

button.sidetalk-dashboard-text-button:hover {
	color: #008cd2;
}

/* 사이드메뉴 라이브러리 - 추가하기 버튼 */
button.add-library-button {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 50px;
	background-color: #fff;
	cursor: pointer;
	color: #555;
	transition: all 200ms ease-in-out;
}

button.add-library-button i {
	margin-right: 10px;
	font-size: 22px;
	line-height: 1;
}

button.add-library-button:hover {
	background-color: #00b0ed;
	color: #fff;
}

/* 기본 인풋필드 */
input.sidetalk-dashboard-input {
	padding: 20px;
	border: 1px solid #ededed;
	border-radius: 20px;
	background-color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: #333;
	box-sizing: border-box;
}

input.sidetalk-dashboard-input::placeholder {
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: #999;
}

input.sidetalk-dashboard-input:focus,
input.sidetalk-dashboard-input:active {
	outline: 1px solid #00b0ed;
}

/* 찾기 필드 */
.search-input-wrap {
	position: relative;
	margin: 0 5px;
}

.search-input-wrap i {
	position: absolute;
	top: 50%;
	left: 20px;
	z-index: 10;
	transform: translateY(-50%);
	color: #999;
}

.search-input-wrap input.sidetalk-dashboard-input {
	padding-left: 50px;
	height: 102%;
	border-radius: 20px;
}

/* 기본 인풋필드 */
select.sidetalk-dashboard-input {
	padding: 20px;
	border: 1px solid #ededed;
	border-radius: 20px;
	background-color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: #333;
	box-sizing: border-box;
}

select.sidetalk-dashboard-input::placeholder {
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: #999;
}

select.sidetalk-dashboard-input:focus,
select.sidetalk-dashboard-input:active {
	outline: 1px solid #00b0ed;
}

.search-input-wrap select.sidetalk-dashboard-input {
	padding-left: 50px;
	height: 102%;
	border-radius: 20px;
}

/* 텍스트 에어리어 */
textarea.sidetalk-dashboard-textarea {
	padding: 20px;
	border: 1px solid #ededed;
	border-radius: 20px;
	background-color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: #333;
	box-sizing: border-box;
}

textarea.sidetalk-dashboard-textarea:focus,
textarea.sidetalk-dashboard-textarea:active {
	outline: 1px solid #00b0ed;
}

/* 대시보드 전체영역 */
#sidetalk-dashboard-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	min-height: 100vh;
}

/* 사이드 영역 */
#sidetalk-dashboard-nav {
	display: flex;
	flex-direction: column;
	width: 270px;
	height: auto;
	border-right: 1px solid #ccc;
	background-color: #fff;
	box-sizing: border-box;
}

#sidetalk-dashboard-nav .nav-header {
	height: auto;
	padding: 25px 30px;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}

#sidetalk-dashboard-nav .nav-header .sidetalk-dashboard-logo {
	width: 100px;
	height: 27px;
	/*padding-right: 20px; margin-right: 20px; border-right: 1px solid #ededed; */
}

#sidetalk-dashboard-nav .nav-header .group {
	/*display: flex; */
	text-align: center;
}

#sidetalk-dashboard-nav .nav-header .group img {
	width: auto;
}

#sidetalk-dashboard-nav .nav-header .group .text {
	font-size: 14px;
	font-weight: 700;
	line-height: 30px;
	color: #777;
}

#sidetalk-dashboard-nav .nav-row {
	height: auto;
	padding: 25px 30px;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}

#sidetalk-dashboard-nav .nav-row h3 {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 21px;
	color: #333;
}

#sidetalk-dashboard-nav .nav-row ul {
	display: block;
	margin: 0;
	padding: 0px 0px 0px 10px;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link {
	padding: 10px 0px;
	color: #777;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link:first-child {
	padding-top: 0px;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #888;
	transition: all 200ms ease-in-out;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link a:hover {
	color: #000;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link a i {
	margin-right: 10px;
	font-size: 18px;
}

#sidetalk-dashboard-nav .nav-row ul li.item-link.item-active a {
	color: #000;
}

#sidetalk-dashboard-nav .nav-row ul li.item-separator {
	margin: 4px 0;
	padding: 0;
	border-bottom: 1px solid #f0f0f0;
}

/* 사이트 선택 시 볼드 */
.selected-site {
	font-weight: bold;
	color: #000;
}

#sidetalk-dashboard-nav .nav-row.profile p {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0px;
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	color: #333;
}

#sidetalk-dashboard-nav .nav-row.profile .profile-image {
	display: block;
	width: 45px;
	height: 45px;
	margin-right: 10px;
	border: 1px solid #ededed;
	border-radius: 45px;
	background-color: #ddd;
	text-align: center;
}

#sidetalk-dashboard-nav .nav-row.profile .profile-name {
	margin-right: 5px;
	color: #333;
}

#sidetalk-dashboard-nav .nav-row.active-project .title-active-project {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 15px;
	padding: 15px;
	border: 1px solid #00b0ed;
	border-radius: 50px;
	background-color: #00b0ed;
	cursor: pointer;
	box-sizing: border-box;
}

#sidetalk-dashboard-nav .nav-row.active-project .title-active-project i {
	margin-right: 10px;
	font-size: 18px;
	font-weight: 500;
	line-height: 22px;
	color: #fff;
	transform: rotate(-90deg);
}

#sidetalk-dashboard-nav .nav-row.active-project .title-active-project .text {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: #fff;
}

#sidetalk-dashboard-nav .nav-row.library-project button.add-library-button {
	margin-bottom: 20px;
}

/* 콘텐츠 영역 */
#sidetalk-dashboard-content {
	display: flex;
	flex-direction: column;
	width: calc(100% - 270px);
	height: auto;
	padding: 0px 10px;
	background-color: #f7f7f7;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-header {
	width: 100%;
	height: 80px;
	padding: 30px;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-header h2 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: #000;
}

#sidetalk-dashboard-content .content-body {
	width: 100%;
	height: calc(100% - 80px);
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body.second { display: block; }

#sidetalk-dashboard-content .content-body .header-row {
	display: flex;
	/*justify-content: flex-end; */
	flex-direction: row;
	width: 100%;
	height: auto;
	padding: 30px 0px 0px;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body .header-row .sidetalk-dashboard-button {
	margin: 0px 5px;
}

#sidetalk-dashboard-content .content-body .content-row {
	width: 100%;
	height: auto;
	padding: 40px 50px;
	margin-top: 30px;
	margin-bottom: 120px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body .content-row .coupon-wrap {
	max-width: 768px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background: #00b0ed;
	margin-bottom: 30px;
	border-radius: 0.75rem;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body .content-row .coupon-wrap>.coupon-text {
	margin: 0;
	color: #fff;
}

#sidetalk-dashboard-content .content-body .content-row .coupon-wrap>a {
	width: 50%;
	border: 2px solid #ffffff;
	padding: 10px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 200ms ease-in-out;
}

#sidetalk-dashboard-content .content-body .content-row .coupon-wrap>a:hover {
	background: #008cd2;
}

#sidetalk-dashboard-content .subscription_pay_form .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col {
	max-width: 768px;
}

#sidetalk-dashboard-content .content-body .content-row h3 {
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #333;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap {
	display: block;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table {
	width: 100%;
	border-collapse: collapse
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table thead tr {
	border-top: 1px solid #ddd;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table thead tr th {
	padding: 20px 0px;
	border-bottom: 1px solid #ddd;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #333;
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table thead tr th:first-child {
	width: 5%;
	padding: 20px 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table thead tr th:last-child {
	width: 5%;
	padding: 20px 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table thead tr th a.update-link {
	color: #333;
	text-decoration: none;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table tbody tr {
	border-bottom: 1px solid #ddd;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table tbody tr td {
	padding: 20px 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: #555;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table tbody tr td:first-child,
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table tbody tr td:nth-child(4),
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table tbody tr td:last-child { vertical-align: middle; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table tbody tr td:last-child i {
	font-size: 16px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap table tbody tr td .no-sidetalks {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav {
	margin-top: 60px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul {
	display: flex;
	justify-content: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul li {
	margin-right: 10px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul li a {
	display: inline-block;
	padding: 0 8px;
	/*width: 25px; */
	height: 25px;
	border-radius: 8px;
	background-color: #ddd;
	font-size: 14px;
	font-weight: 500;
	line-height: 25px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: all 200ms ease-in-out;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul li a.active,
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap .sidetalk-dashboard-content-list-nav ul li a:hover {
	background-color: #00b0ed;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap {
	display: flex;
	padding: 15px 0px;
	border-top: 1px solid #ddd;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col {
	display: flex;
	flex-direction: column;
	width: 100%;
}


#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col.row {
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
	gap: 30px;
	row-gap: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col.row h3 {
	width: 100%;
	margin-bottom: 20px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col.left {
	width: 50%;
	padding-right: 50px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col.right {
	width: 50%;
	padding-left: 50px;
	border-left: 1px solid #ddd;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col h4 {
	padding-left: 20px;
	margin-top: 14px;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	color: #333;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col form {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col label {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
	color: #333;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .sidetalk-dashboard-select-wrap {
	position: relative;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .sidetalk-dashboard-select-wrap select {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .sidetalk-dashboard-select-wrap i {
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col input {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col input[type="color"] {
	width: 50px !important;
	height: 50px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 1px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col input[type="color"]::-webkit-color-swatch {
	border-radius: 0.75rem;
	border: 1px solid #ddd;
	height: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col input[type="checkbox"] {
	width: auto;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col select {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col button.sidetalk-dashboard-underline-button {
	padding-left: 20px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col button.sidetalk-dashboard-text-button {
	padding-left: 20px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col textarea {
	width: 100%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row {
	width: 100%;
	margin-bottom: 20px;
	padding: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third {
	margin-bottom: 20px;
	padding: 0px;
	width: 30%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview.image-preview-square {
	width: 50px;
	height: 50px;
	border: 1px solid #ddd;
	border-radius: 0.75rem;
	overflow: hidden;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview.image-preview-square:hover {
	cursor: pointer;
}

.item-row.one-third input[type="color"]:hover {
	cursor: pointer;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview.image-preview-circle {
	width: 50px;
	height: 50px;
	border: 1px solid #ddd;
	border-radius: 50%;
	overflow: hidden;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.one-third .image-preview i {
	font-size: 30px;
	margin-left: 9px;
	margin-top: 9px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row h4 {
	padding-left: 20px;
	margin-top: 10px;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 28px;
	color: #333;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.checkbox-row input {
	width: auto;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.cursor-point {
	cursor: pointer;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row .description {
	display: block;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row button.sidetalk-dashboard-underline-button {
	padding-left: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row button.sidetalk-dashboard-text-button {
	padding-left: 0px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row .attr-value {
	display: flex;
	align-items: center;
	gap: 12px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row input,
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row select,
#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row textarea {
	width: 100%;
	border-radius: 0.75rem;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap .data-add-col .item-row.radio { display: block; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio {
	display: flex;
	gap: 12px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio .sidetalk-dashboard-button {
	white-space: nowrap;
	background: #ee5253;
	color: #fff;
	flex-shrink: 0;
	text-decoration: none;
	margin-bottom: 10px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio .sidetalk-dashboard-button:hover {
	background: #ff6b6b;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio>label {
	display: flex;
	width: 100%;
	gap: 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 12px 16px;
	border-radius: 0.75rem;
	align-items: center;
	cursor: pointer;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio>label>input {
	width: auto;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio>label>span { display: inline-flex; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-add-wrap.sidetalk-cafe24-settings .data-add-col>.item-row>.radio>label>button { border: 0; background: none; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap { width: 100%; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table { width: 100%; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tr { border-bottom: 0; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th { text-align: center; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.title {
	width: 20%;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.status {
	width: 10%
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.price {
	width: 20%
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table thead tr>th.created_at {
	width: 20%
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.title {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status { text-align: center; }

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div button {
	border-radius: 10px;
	width: auto;
	height: 25px;
	display: flex;
	justify-content: center;
	font-size: 12px;
	background: #00a7e9;
	color: #fff;
	border: none;
	line-height: 24px;
	position: relative;
	padding: 0 22px;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tbody tr>td.status>div span {
	border-radius: 10px;
	width: auto;
	height: 25px;
	display: flex;
	justify-content: center;
	font-size: 12px;
	background: #999999;
	color: #fff;
	border: none;
	position: relative;
	padding: 0 22px;
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tr.total_info td {
	font-weight: bold;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tr td.price {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>table tr td.created_at {
	text-align: center;
}

#sidetalk-dashboard-content .content-body .content-row .sidetalk-dashboard-data-list-wrap>.noti {
	width: 100%;
	display: block;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
}

@media (max-width: 2000px) {
	.sidetalk-dashboard-data-list-wrap {
		overflow-x: auto;
		display: block;
		width: 100%;
		white-space: nowrap;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		font-size: 14px;
		padding: 10px;
		word-break: break-word;
		white-space: normal;
	}

	.sidetalk-dashboard-data-list-wrap table thead th,
	.sidetalk-dashboard-data-list-wrap table tbody td {
		padding: 10px;
		font-size: 14px;
	}
}

@media (max-width: 1600px) {
	.sidetalk-dashboard-data-list-wrap {
		overflow-x: auto;
		display: block;
		width: 100%;
		white-space: nowrap;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		font-size: 14px;
		padding: 10px;
		word-break: break-word;
		white-space: normal;
	}

	.sidetalk-dashboard-data-list-wrap table thead th,
	.sidetalk-dashboard-data-list-wrap table tbody td {
		padding: 10px;
		font-size: 14px;
	}
}

@media (max-width: 1200px) {
	.sidetalk-dashboard-data-list-wrap {
		overflow-x: auto;
		display: block;
		width: 100%;
		white-space: nowrap;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		font-size: 14px;
		padding: 10px;
		word-break: break-word;
		white-space: normal;
	}

	.sidetalk-dashboard-data-list-wrap table thead th,
	.sidetalk-dashboard-data-list-wrap table tbody td {
		padding: 10px;
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	.sidetalk-dashboard-data-list-wrap {
		overflow-x: auto;
		display: block;
		width: 100%;
		white-space: nowrap;
	}

	.answer-content {
		max-height: none !important;
		overflow: visible !important;
		white-space: normal !important;
		word-break: break-word !important;
	}

	.toggle-answer {
		display: none !important;
	}

	.sidetalk-dashboard-data-list-wrap table { width: 100%; }

	/* 테이블 내 각 컬럼의 폭을 줄이고 텍스트를 줄바꿈 */
	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		font-size: 13px;
		/* 작은 화면에서 폰트 크기 축소 */
		padding: 8px;
		/* 패딩 조정 */
		word-break: break-word;
		/* 긴 단어 자동 줄바꿈 */
		white-space: normal;
		/* 줄바꿈 허용 */
	}

	/* 특정 컬럼이 너무 넓어지는 경우 크기 조정 */
	.sidetalk-dashboard-data-list-wrap table thead th,
	.sidetalk-dashboard-data-list-wrap table tbody td {
		padding: 8px;
		/* 여백을 줄여서 공간 활용 */
		font-size: 13px;
		/* 작은 화면에서는 글자 크기 조정 */
	}

	/* 모바일에서는 테이블을 블록형 리스트로 변경 */
	.sidetalk-dashboard-data-list-wrap table,
	.sidetalk-dashboard-data-list-wrap table thead,
	.sidetalk-dashboard-data-list-wrap table tbody,
	.sidetalk-dashboard-data-list-wrap table th,
	.sidetalk-dashboard-data-list-wrap table td,
	.sidetalk-dashboard-data-list-wrap table tr {
		display: block;
		width: 100%;
	}

	.sidetalk-dashboard-data-list-wrap table thead tr {
		display: none;
		/* 작은 화면에서 헤더 숨김 */
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr {
		border: 1px solid #ddd;
		margin-bottom: 10px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 8px;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		text-align: left;
		padding: 6px 10px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td:last-child {
		border-bottom: none;
	}

	/* 각 컬럼 앞에 레이블 추가 */
	.sidetalk-dashboard-data-list-wrap table tbody tr td::before {
		content: attr(data-label);
		/* HTML에서 data-label 속성 값 사용 */
		font-weight: bold;
		color: #555;
	}
}

/* 📌 480px 이하 화면에서도 더 최적화 */
@media (max-width: 480px) {
	.sidetalk-dashboard-data-list-wrap {
		overflow-x: visible;
	}

	.sidetalk-dashboard-data-list-wrap table {
		min-width: 100%;
		/* 테이블 최소 너비 해제 */
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr {
		padding: 8px;
		border-radius: 6px;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td {
		font-size: 12px;
		/* 글자 크기 더 축소 */
		padding: 5px 8px;
		flex-direction: column;
		/* 텍스트가 한 줄로 강제 표시되지 않도록 함 */
		align-items: flex-start;
	}

	.sidetalk-dashboard-data-list-wrap table tbody tr td::before {
		margin-bottom: 4px;
		font-size: 11px;
		color: #444;
	}

	/* 버튼 크기 조정 */
	.sidetalk-dashboard-button {
		font-size: 12px;
		padding: 6px 8px;
	}
}

#sidetalk-dashboard-content .content-body .fixed-row {
	position: fixed;
	right: 40px;
	bottom: 40px;
	display: flex;
	/*justify-content: flex-end; */
	flex-direction: row;
	width: calc(100% - 470px);
	padding: 10px 60px;
	border: 1px solid #ddd;
	background: #ebebeb;
	/*box-sizing: border-box;*/
	border-radius: 20px;
}

.title-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	/* 반응형 줄바꿈 */
}

.title-left-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.sidetalk-guide-button {
	display: inline-block;
	padding: 5px 10px;
	background: #fff;
	color: #555;
	font-size: 12px;
	border: 1px solid #00a7e9;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
	transition: 0.2s;
	margin-bottom: 30px;
}

.sidetalk-guide-button:hover {
	background: #00a7e9;
	color: #fff;
}

.sidetalk-guide-button.invisible {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: none; /* 즉시 사라지게 만듦 */
}

/* =====================
   드래그 핸들(테이블/폼 공통)
   ===================== */
.drag-handle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 6px;
	padding: 4px 8px;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 999px;
	background: linear-gradient(180deg, #fff, #f7f7f9);
	color: #444;
	cursor: grab;
	line-height: 1;
	user-select: none;
	transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
.drag-handle .grip {
		width: 14px; height: 14px; display: inline-block;
		background-image:
			linear-gradient(#6b7280 0 0),
			linear-gradient(#6b7280 0 0),
			linear-gradient(#6b7280 0 0);
		background-size: 14px 2px, 14px 2px, 14px 2px; /* 3개의 굵은 가로줄 */
		background-position: 0 2px, 0 6px, 0 10px;
		background-repeat: no-repeat;
		border-radius: 2px;
		opacity: .95;
}
.drag-handle .hint {
	font-size: 11px;
	color: #666;
}
.drag-handle:hover,
.drag-handle:focus {
	border-color: #c7d2fe;
	box-shadow: 0 0 0 3px rgba(79,70,229,.15);
	outline: none;
}
.drag-handle:active { cursor: grabbing; transform: scale(.98); }

/* 테이블 헤더 드래그 중 가시성 보강 */
#previewHeaderRow th.table-col-draggable.dragging .drag-handle {
	
	opacity: .7;
}
/* 테이블 헤더: 드래그 핸들 위치를 컬럼 제목과 정렬 */
#previewHeaderRow th.table-col-draggable { position: relative; }
#previewHeaderRow th.table-col-draggable .drag-handle { position: absolute; left: 6px; top: 5px !important; }

#sidetalk-dashboard-content .content-body .fixed-row .sidetalk-dashboard-button {
	margin: 0px 5px;
}

/* 메뉴 드롭다운 */
.nav-row ul {
	display: none;
}

/* 버튼 스타일 */
.dynamic-position {
	display: flex;
	justify-content: space-between;
	/* 버튼 사이의 공간을 균등하게 분배 */
}

/* 사이드 패널 스타일 */
#side-panel {
	position: fixed;
	top: 33px;
	right: 0;
	width: 300px;
	height: 100%;
	background-color: #fff;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
	padding: 20px;
	box-sizing: border-box;
	display: none;
	z-index: 99999999;
	overflow-y: auto;
}

#side-panel .close-btn {
	font-size: 24px;
	color: #aaa;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

#side-panel .close-btn:hover {
	color: #000;
}

#side-panel h2 {
	margin-top: 0;
	color: #333;
}

#side-panel p {
	color: #555;
	margin: 10px 0;
}

#side-panel .panel-content {
	padding: 10px;
	background-color: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-name-highlight {
	color: #007bff !important;
	/* 파란색 텍스트 */
	cursor: pointer;
	transition: color 0.3s ease;
}

.user-name-highlight:hover {
	color: #0056b3 !important;
	;
	/* 더 어두운 파란색 텍스트 */
}

/* 카드 스타일 */
.sidetalk-card {
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	width: 320px;
	overflow: hidden;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.3s, box-shadow 0.3s, opacity 0.5s;
	/* opacity도 애니메이션 추가 */
}

.sidetalk-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.sidetalk-card-header {
	background-color: #f8f9fa;
	padding: 16px 20px;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 1px solid #e0e0e0;
}

.sidetalk-card-body {
	padding: 20px;
	flex-grow: 1;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

.sidetalk-card-footer {
	padding: 12px 20px;
	border-top: 1px solid #e0e0e0;
	background-color: #f8f9fa;
	display: flex;
	justify-content: space-between;
}

/* 공통 버튼 스타일 */
.sidetalk-dashboard-card-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: #f8f9fa;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	cursor: pointer;
	transition: background-color 0.3s, box-shadow 0.3s;
}

/* 버튼 종류별 스타일 */
.sidetalk-dashboard-card-button.add {
	background-color: #1dd1a1;
	color: #fff;
}

.sidetalk-dashboard-card-button.add:hover {
	background-color: #10ac84;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.sidetalk-dashboard-card-button.remove {
	background-color: #ff6b6b;
	color: #fff;
}

.sidetalk-dashboard-card-button.remove:hover {
	background-color: #ee5253;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 실시간 방문자 버튼 */
.sidetalk-dashboard-card-button.live {
	background-color: #007bff;
	color: #fff;
	border: 1px solid #0056b3;
}

.sidetalk-dashboard-card-button.live:hover {
	background-color: #0056b3;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 버튼 활성 상태 (연결 중) */
.sidetalk-dashboard-card-button.live.active {
	background-color: #10ac84;
	/* 연결 시 버튼 색상 변경 */
	border: 1px solid #0e8b6c;
	color: #fff;
	cursor: not-allowed;
	/* 활성 상태에서는 클릭 비활성화 */
}

/* 버튼 오른쪽 정렬 */
.sidetalk-dashboard-card-button.remove {
	margin-left: auto;
}

/* 버튼 왼쪽 정렬 */
.sidetalk-dashboard-card-button.add {
	margin-right: auto;
}

/* 열 머리글 드래그 */
.resize-handle {
	width: 10px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	cursor: col-resize;
	background-color: rgba(0, 0, 0, 0.1);
	border-right: 2px solid #ccc;
	transition: background-color 0.2s ease;
}

/* 배너 */
.banner {
	display: none;
	position: fixed;
	bottom: 120px;
	right: 40px;
	width: 400px;
	background-color: #ffffff;
	color: #333333;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	text-align: center;
	padding: 20px;
	border-radius: 12px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transform: translateY(20px);
	opacity: 0;
	visibility: hidden;
	/* 👈 추가 */
}

.banner.show {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	/* 👈 추가 */
}

.banner-header {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 15px;
}

.banner-body {
	margin: 15px 0;
}

.banner-body ul {
	margin: 0;
	padding: 0;
	padding-left: 20px;
	list-style: none;
}

.banner-body a {
	color: #0073aa;
	text-decoration: none;
	font-weight: 500;
}

.banner-body a:hover {
	text-decoration: underline;
}

.banner-footer {
	margin-top: 15px;
}

.close-button {
	margin-top: 10px;
	padding: 10px 20px;
	background-color: #6c757d;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s, box-shadow 0.3s;
	font-weight: bold;
}

.close-button:hover {
	background-color: #5a6268;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 개인 정보 가리기 */
.hover-reveal {
	position: relative;
	cursor: pointer;
}

.hover-reveal::after {
	content: attr(data-full);
	position: absolute;
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s;
	background: white;
	border: 1px solid #ddd;
	padding: 5px;
	z-index: 10;
	left: 36%;
}

.hover-reveal:hover::after {
	visibility: visible;
	opacity: 1;
}

@keyframes slideUp {
	0% {
		bottom: -120px;
		/* Start off-screen */
		opacity: 0;
	}

	100% {
		bottom: 120px;
		/* Final position */
		opacity: 1;
	}
}

.slide-up-animation {
	animation: slideUp 1s ease-out forwards;
}

/* 애니메이션 정의 */
@keyframes attentionGrabber {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

.card.attention-grabber {
	animation: attentionGrabber 1s forwards;
}

.card.slide-out-up {
	transform: translateY(-100%);
	/* 위로 이동 */
	opacity: 0;
	/* 투명도 조정 */
	transition: transform 0.3s ease, opacity 0.3s ease;
}

#data-entry-banner {
	display: none;
}

@keyframes fadeOut {
	to {
		opacity: 0;
		visibility: hidden;
		height: 0;
		overflow: hidden;
	}
}

/* 토글 css */
.custom-toggle {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	margin-right: 10px;
}

.toggle-switch input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked+.slider {
	background-color: #2196F3;
}

input:checked+.slider:before {
	transform: translateX(26px);
}

.toggle-label {
	vertical-align: middle;
}

/* 모달 css */
.sidetalk-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	display: none;
	z-index: 999999999;
}

.sidetalk-modal-overlay h4 {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	color: #333;
}

.sidetalk-modal-wrap {
	width: 400px;
	height: auto;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
	transform: translateY(-20%);
	box-shadow: -2px 2px 10px 1px rgba(0, 0, 0, 0.2), 2px 2px 10px 1px rgba(0, 0, 0, 0.2), 0 2px 10px 1px rgba(0, 0, 0, 0.2);
	z-index: 1000000000;
}

.sidetalk-modal-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.sidetalk-modal-item-row {
	display: flex;
	width: 50%;
	box-sizing: border-box;
	align-items: center;
	padding: 5px 0;
}

.sidetalk-modal-item-row p {
	margin-left: 10px;
	margin-bottom: 0;
}

.sidetalk-modal-item-row:hover {
	background-color: rgba(0, 140, 210, 0.05);
	cursor: pointer;
}

.sidetalk-modal-action-detail {
	height: 100px;
}

/* 사이드 모달 */
/* .sidetalk-side-modal-overlay { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 5; display: none; } */
#sidetalk-side-modal-close-btn {
	word-break: keep-all;
	height: 45px;
}

/* 원래는 width:70px; */
.sidetalk-side-modal-wrap h4 {
	margin-bottom: 0px;
	font-size: 20px;
	font-weight: 700;
	color: #333;
}

.sidetalk-side-modal-wrap {
	position: fixed;
	right: -500px;
	width: 700px;
	height: 100%;
	background-color: #fff;
	box-shadow: -2px 0 10px 1px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	z-index: 999999998;
	overflow-y: auto;
	display: none;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #ddd;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap img {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap .side-modal-title {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap .side-modal-title .side-modal-title-text {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.sidetalk-side-modal-wrap .side-modal-title-wrap .side-modal-title .side-modal-title-text input {
	border-radius: 0.75rem;
}

.sidetalk-side-modal-wrap .side-modal-navigation-wrap {
	display: flex;
	justify-content: space-between;
	border-bottom: 3px solid #ddd;
}

.sidetalk-side-modal-wrap .side-modal-navigation-wrap .side-modal-navigation-btn {
	width: 120px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidetalk-side-modal-wrap .side-modal-navigation-wrap .side-modal-navigation-btn.active {
	font-weight: 700;
	color: #00b0ed;
	justify-content: center;
	align-items: center;
}

.sidetalk-side-modal-wrap .side-modal-navigation-wrap .side-modal-navigation-btn:hover {
	cursor: pointer;
}

.sidetalk-navigation-wrap {
	display: flex;
	align-items: center;
	text-align: center;
	border-top: 1px solid #ddd;
	flex-wrap: wrap;
	/* ensure consistent spacing between tabs across pages */
	gap: 8px;
}

.sidetalk-navigation-wrap .sidetalk-navigation-btn {
	min-width: 125px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* normalize anchor tabs to look identical to div tabs */
.sidetalk-navigation-wrap a.sidetalk-navigation-btn {
	display: flex;
	text-decoration: none;
	color: inherit;
}

.sidetalk-navigation-wrap .sidetalk-navigation-btn.active {
	font-weight: 700;
	color: #00b0ed;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.sidetalk-navigation-wrap .sidetalk-navigation-btn:hover {
	cursor: pointer;
}

.sidetalk-navigation-btn span.navigation-text {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Desktop: make navigation tabs equal-width so label length doesn't affect spacing */
@media (min-width: 1025px) {
	#tables-edit-tabs .sidetalk-navigation-btn,
	#tables-data-tabs .sidetalk-navigation-btn {
		flex: 0 0 150px; /* fixed width per tab on desktop */
	}
}

/* Bottom divider under data sheet tabs */
#tables-data-tabs {
	border-bottom: 1px solid #ddd;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: calc(100% - 178px);
	padding: 20px;
	box-sizing: border-box;
}

.sidetalk-side-modal-wrap .side-modal-content {
	/* padding: 20px; */
	display: flex;
	display: none;
	flex-direction: column;
	gap: 20px;
}

.sidetalk-side-modal-wrap .side-modal-content.active {
	display: flex;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-flex-space-between {
	display: flex;
	justify-content: space-between;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-flex {
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-item .content-app {
	height: 60px;
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 0.75rem;
	align-items: center;
	cursor: pointer;
	margin: 3px;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-item .content-app-detail {
	padding: 10px;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-item .description {
	margin-bottom: 0px;
	word-break: keep-all;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-item select {
	margin-bottom: 0px;
	width: 100%;
}

.sidetalk-side-modal-wrap .side-modal-content-wrap .side-modal-content-footer {
	height: 80px;
	display: flex;
	justify-content: start;
	align-items: center;
	border-top: 1px solid #ddd;
}

.sidetalk-side-modal-wrap .side-modal-content .side-modal-content-item input,
.sidetalk-side-modal-wrap .side-modal-content .side-modal-content-item select,
.sidetalk-side-modal-wrap .side-modal-content .side-modal-content-item textarea {
	border-radius: 0.75rem;
	resize: vertical;
}

/* 작업 div */
#sidetalk-dashboard-content .sidetalk-actions-wrap {
	width: 450px;
	cursor: pointer;
	position: relative;
}

#sidetalk-dashboard-content .sidetalk-answer-output-wrap {
	width: 450px;
	position: relative;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .actions-wrap-delete-btn {
	position: absolute;
	top: 20px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	color: #333;
	cursor: pointer;
	z-index: 1;
	padding: 10px;
	display: none;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .actions-wrap-delete-btn.active {
	display: block;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row:hover {
	background-color: #00b0ed10;
	transform: scale(1.03);
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .show-action-method-btn-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row {
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 30px 40px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
	display: none;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

#sidetalk-dashboard-content .sidetalk-answer-output-wrap .answer-output-wrap {
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 30px 40px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
}

#sidetalk-dashboard-content .sidetalk-answer-output-wrap .answer-output-wrap h3 {
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #333;
}


#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger {
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 30px 40px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #fff;
	box-sizing: border-box;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger h3 {
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #333;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger h4 {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: #333;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger .item-row input,
#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger .item-row select,
#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row-trigger .item-row textarea {
	width: 100%;
	border-radius: 0.75rem;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row.active {
	display: block;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row h3 {
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #333;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row h4 {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: #333;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row .action-content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#sidetalk-dashboard-content .sidetalk-actions-wrap .action-content-row .action-content-body {
	display: flex;
	align-items: center;
	width: 100%;
}

#sidetalk-dashboard-content.agent-content-wrap {
	padding: 0;
}

#sidetalk-dashboard-content .content-body .agent-setting-content-body {
	display: flex;
	justify-content: space-between;
}

#sidetalk-dashboard-content .content-body .agent-setting-content-body .left-side-bar-wrap {
	display: flex;
}

#sidetalk-dashboard-content .content-body .agent-setting-content-body .left-side-bar-wrap .left-side-btn-wrap {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: start;
}

#sidetalk-dashboard-content .content-body .agent-setting-content-body .left-side-bar-wrap .left-side-btn-wrap button {
	margin: 5px 5px 5px 5px;
}

@keyframes pulse {

	0%,
	100% {
		background-color: #ffffff;
	}

	50% {
		background-color: #f0f0f0;
	}
}

.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

#loading-template {
	display: none;
}

/* 알림 효과 */
.admin-notification-count {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 2px 6px;
	border-radius: 12px;
	/* 더 둥글게 */
	background-color: #ff3b30;
	/* 카카오톡 스타일 (빨간색) */
	color: #ffffff;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	line-height: 1;
	transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	margin-left: 4px;
}

.admin-notification-count.animate {
	animation: pulse-expand 0.8s ease-in-out, shake 0.5s ease-out;
}

/* 알림 팝업 효과 */
@keyframes pulse-expand {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.9;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* 흔들리는 효과 */
@keyframes shake {
	0% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-2px);
	}

	50% {
		transform: translateX(2px);
	}

	75% {
		transform: translateX(-2px);
	}

	100% {
		transform: translateX(0);
	}
}

.sidetalk-chatbot-custom-modal {
	display: none;
	/* 처음에는 숨김 상태 */
	align-items: center;
	justify-content: center;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(20, 20, 20, 0.7);
}

.sidetalk-chatbot-custom-content {
	background-color: #fefefe;
	padding: 25px;
	border-radius: 12px;
	width: 90%;
	/* 반응형 너비 */
	max-width: 600px;
	max-height: 90vh;
	/* 화면 높이의 90%로 제한 */
	overflow-y: auto;
	/* 내용이 넘칠 경우 스크롤 */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	animation: slideDown 0.4s ease;
}

@keyframes slideDown {
	from {
		transform: translateY(-50px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.sidetalk-chatbot-custom-close {
	color: #444;
	float: right;
	font-size: 26px;
	font-weight: bold;
	cursor: pointer;
}

.sidetalk-chatbot-custom-close:hover {
	color: #d9534f;
}

/* 아이콘과 툴팁 */
.sidetalk-tooltip-icon {
	position: relative;
	cursor: pointer;
	margin-left: 8px;
}

.info-circle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #888;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

.sidetalk-tooltip-text {
	visibility: hidden;
	width: 260px;
	background-color: #222;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 8px;
	position: absolute;
	z-index: 1;
	bottom: 130%;
	left: 50%;
	margin-left: -130px;
	opacity: 0;
	transition: opacity 0.4s ease;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidetalk-tooltip-icon:hover .sidetalk-tooltip-text {
	visibility: visible;
	opacity: 1;
}

.sidetalk-tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #222 transparent transparent transparent;
}

/* 입력 필드 스타일 */
.sidetalk-chatbot-custom-content .item-row {
	margin-bottom: 20px;
}

.sidetalk-chatbot-custom-content textarea {
	width: 100%;
	min-height: 100px;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	resize: vertical;
	font-family: Arial, sans-serif;
	font-size: 14px;
	background-color: #f9f9f9;
}

.sidetalk-chatbot-custom-content textarea:focus {
	border-color: #007acc;
	outline: none;
}

/* 설명 텍스트와 문자 수 제한 */
.sidetalk-chatbot-custom-description {
	color: #555;
	font-size: 13px;
	margin-top: 5px;
}

.sidetalk-chatbot-custom-description .char-limit {
	color: #777;
}

/* 사용자 가이드 링크 */
.sidetalk-chatbot-custom-content a {
	color: #337ab7;
	text-decoration: underline;
	font-size: 14px;
	margin-top: 6px;
	display: inline-block;
}

.sidetalk-chatbot-custom-content a:hover {
	color: #23527c;
	/* 링크 호버 시 색상 */
}

.sidetalk-dashboard-checkbox-container {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

/* 기본 체크박스 숨기기 */
.sidetalk-dashboard-checkbox-container input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* 커스텀 체크박스 */
.sidetalk-dashboard-checkbox {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 체크 상태 스타일 */
.sidetalk-dashboard-checkbox-container input[type="checkbox"]:checked+.sidetalk-dashboard-checkbox {
	background-color: #007bff;
	border-color: #007bff;
	box-shadow: 0 2px 4px rgba(0, 123, 255, 0.4);
}

/* 체크 상태 아이콘 */
.sidetalk-dashboard-checkbox-container input[type="checkbox"]:checked+.sidetalk-dashboard-checkbox::after {
	content: "✔";
	color: white;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 호버 효과 */
.sidetalk-dashboard-checkbox:hover {
	background-color: #f8f9fa;
	border-color: #b3b3b3;
}

.skeleton {
	background: linear-gradient(-90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	border-radius: 4px;
}

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* 폼 빌더 컨테이너 */
#sidetalk-dashboard-content .form-container {
	display: flex;
	flex-direction: column;
	padding: 20px;
	margin-top: 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#sidetalk-dashboard-content .form-container h3 {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	text-align: center;
}

/* 입력 필드 스타일 */
.form-field-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

.form-field-group label {
	font-size: 14px;
	font-weight: 500;
	color: #555;
	margin-bottom: 5px;
}

.form-field-group input,
.form-field-group select {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	color: #333;
	background-color: #f9f9f9;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-field-group input:focus,
.form-field-group select:focus {
	border-color: #00b0ed;
	background-color: #fff;
	outline: none;
	box-shadow: 0 0 5px rgba(0, 176, 237, 0.3);
}

.form-field-group .description-text {
	font-size: 12px;
	color: #888;
	margin-top: 5px;
}

/* 미리보기 컨테이너 */
#previewContainer {
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #ffffff;
	padding: 18px;
	margin: 0 auto 20px;
	font-size: 14px;
	color: #444;
	max-width: 600px;
	text-align: center;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}

#previewContainer p {
	font-weight: 600;
	color: #222;
	margin-bottom: 12px;
}


/* 필드 컨테이너 */
#previewFieldsContainer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* 여유 있는 간격 */
}

#previewFieldsContainer .radio-options-preview {
  display: flex;
  flex-direction: row;   /* ✅ 세로 → 가로 */
  flex-wrap: wrap;       /* 옵션이 많으면 줄바꿈 */
  gap: 16px;             /* 옵션 간격 */
  margin-top: 6px;
}

#previewFieldsContainer .radio-options-preview label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

#previewFieldsContainer .radio-options-preview input[type="radio"] {
  margin: 0;
}

#previewFieldsContainer select.preview-control {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #ededed;
  border-radius: 20px;
  background-color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: #333;
}

/* 폼 미리보기: 드래그 핸들 위치 및 드롭 인디케이터 */
#previewFieldsContainer .preview-field { position: relative; }
#previewFieldsContainer .drag-handle { position: absolute; left: 7px; top: 13px !important; opacity: .85; }
#previewFieldsContainer .preview-field.dragging { opacity: .5; }
#previewFieldsContainer .drop-indicator { height: 10px; background: #e5edff; border: 1px dashed #94a3b8; margin: 6px 0; border-radius: 6px; }

/* 공통 필드 스타일 */
.preview-field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-items: center;
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-radius: 12px;
	background-color: #ffffff;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	justify-content: space-between;
	gap: 14px;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
}

.preview-field .field-name,
.preview-field .field-name-block {
	width: 100%;
	max-width: 100%;
	font-weight: 600;
	font-size: 15px;
	color: #222;
	white-space: normal;
	word-break: break-word;
	margin-bottom: 8px;
	text-align: left;
	overflow: visible;
	text-overflow: unset;
	display: block;
}

.column-type-label {
	font-weight: bold;
	color: #666;
	margin-right: 6px;
	flex: 0 0 auto;
	font-size: 12px;
}

/* 컬럼 타입 스타일 (아이콘 + 텍스트) */
.preview-field .column-type {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #555;
}

.preview-field .column-type i {
	font-size: 16px;
	color: #0077cc;
}

/* 테이블 컬럼 필드 (입력 불가능, 보기 전용) */
.preview-field.table-field input {
	flex: 0 0 70px;
	padding: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #777;
	border: none;
	background-color: transparent;
	text-align: center;
}

/* 삭제 버튼 */
.preview-field .delete-button {
	flex: 0 0 auto;
	padding: 8px 12px;
	border: none;
	border-radius: 8px;
	background-color: #ff4d4d;
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.preview-field .delete-button:hover {
	background-color: #d93636;
}

/* 마우스 오버 효과 */
.preview-field:hover {
	background-color: #f9fcff;
	box-shadow: 0 0 12px rgba(0, 120, 220, 0.15);
}

/* 추가 버튼 */
.preview-buttons .add-field-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: bold;
	border: 2px solid #0077cc;
	border-radius: 30px;
	background-color: #ffffff;
	color: #0077cc;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	margin-top: 12px;
}

.preview-buttons .add-field-button:hover {
	background-color: #0077cc;
	color: #fff;
	box-shadow: 0 4px 10px rgba(0, 120, 220, 0.2);
	transform: translateY(-2px);
}

.preview-buttons .add-field-button:active {
	transform: translateY(1px);
	box-shadow: 0 2px 4px rgba(0, 120, 220, 0.2);
}

/* 반응형 스타일 */
@media (max-width: 768px) {
	.preview-field {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px;
	}

	.preview-field .field-name {
		width: 100%;
		font-size: 15px;
		text-align: left;
	}

	.preview-field .column-type {
		width: 100%;
		font-size: 14px;
	}

	.preview-field .delete-button {
		width: 100%;
		margin-top: 6px;
	}
}

/* 새로운 미리보기 테이블 컨테이너 */
.preview-table-container {
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #ffffff;
	padding: 16px;
	margin: 20px auto;
	font-size: 14px;
	color: #444;
	max-width: 100%;
	text-align: center;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}

/* 컬럼 미리보기 테이블 */
.preview-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	text-align: left;
	background-color: #fff;
}

/* 컬럼 헤더 스타일 */
.preview-table thead {
	background-color: #f8f9fa;
	font-size: 14px;
	font-weight: bold;
}

.preview-table th {
	position: relative;
	border: 1px solid #ddd;
	padding: 12px;
	text-align: center;
	color: #333;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.preview-table tbody td {
	text-align: left;
	/* 왼쪽 정렬 */
	padding: 8px;
	/* 적절한 여백 추가 */
}

.preview-table tbody td:not([data-type="number"]) {
	text-align: left;
}

.preview-table tbody td[data-type="number"] {
	text-align: right;
	/* 숫자는 오른쪽 정렬 */
}

/* 컬럼 헤더 마우스 오버 효과 */
.preview-table th:hover {
	background-color: #e9ecef;
}

/* 컬럼 삭제 버튼 (× 아이콘) */
.delete-column {
	position: absolute;
	top: 4px;
	right: 8px;
	font-size: 14px;
	color: #ff4d4d;
	cursor: pointer;
	transition: color 0.2s ease;
}

.delete-column:hover {
	color: #d93636;
}


/* 빈 테이블 미리보기 (컬럼이 없을 때) */
.preview-table tbody td {
	text-align: center;
	color: #999;
	font-size: 13px;
	padding: 12px;
}

/* 컬럼 추가 버튼 */
.preview-table-buttons {
	margin-top: 12px;
	text-align: center;
}

/* 추가 버튼 */
.preview-table-buttons .add-column-button {
	padding: 12px 20px;
	font-size: 15px;
	font-weight: bold;
	border: 2px solid #0077cc;
	border-radius: 30px;
	background-color: #ffffff;
	color: #0077cc;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 12px;
}

.preview-table-buttons .add-column-button:hover {
	background-color: #0077cc;
	color: #fff;
}

.preview-table-buttons .add-column-button:active {
	transform: translateY(1px);
	box-shadow: 0 2px 4px rgba(0, 120, 220, 0.2);
}

/* 반응형 스타일 */
@media (max-width: 768px) {
	.preview-table th {
		font-size: 12px;
		padding: 10px;
	}

	.preview-table tbody td {
		font-size: 12px;
	}

	.preview-table-buttons .add-column-button {
		padding: 10px 16px;
		font-size: 14px;
	}
}


/* 사이드 패널 */
.custom-side-panel {
	position: fixed;
	top: 34px;
	right: -100%;
	width: 400px;
	height: 100%;
	background-color: #fff;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
	transition: right 0.5s ease;
	z-index: 9999;
}

.custom-side-panel.open {
	right: 0;
}

.custom-side-panel-content {
	display: flex;
	flex-direction: column;
}

.custom-side-panel h3 {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	text-align: center;
}

.custom-side-panel .close-btn {
	position: absolute;
	top: 16px;
	right: 10px;
	font-size: 30px;
	color: #aaa;
	cursor: pointer;
	transition: color 0.3s ease;
}

.custom-side-panel .close-btn:hover {
	color: #000;
}

.custom-side-panel-controls {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.custom-side-panel-controls .sidetalk-dashboard-button {
	flex: 1;
	margin: 0 5px;
	padding: 10px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-side-panel-controls .save-button {
	background-color: #00b0ed;
	color: #fff;
	border: none;
}

.custom-side-panel-controls .save-button:hover {
	background-color: #008cd2;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-side-panel-controls .cancel-button {
	background-color: #ddd;
	color: #555;
	border: none;
}

.custom-side-panel-controls .cancel-button:hover {
	background-color: #ccc;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 컬럼 입력 필드와 관련된 스타일 */
.sidetalk-columns-container {
	margin-top: 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	background: linear-gradient(to bottom, #f9f9f9, #ffffff);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 컬럼 행 스타일 */
.sidetalk-column-row {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
	padding: 10px;
	border-radius: 6px;
	background-color: #fdfdfd;
	border: 1px solid #e5e5e5;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sidetalk-input {
	flex: 1;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #ffffff;
	transition: all 0.3s ease;
}

.sidetalk-input:focus {
	border-color: #0073aa;
	background-color: #f5faff;
	outline: none;
}

/* 셀렉트 스타일 */
.sidetalk-select {
	flex: 1;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #ffffff;
}

/* 컬럼 추가 버튼 */
#add-column {
	width: 100%;
	max-width: 200px;
	margin: 20px auto;
	padding: 12px 20px;
	font-size: 16px;
	font-weight: bold;
	color: white;
	background: linear-gradient(45deg, #00b0ed, #007bbf);
	border: none;
	border-radius: 25px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	text-transform: uppercase;
	text-align: center;
}

#add-column:hover {
	background: linear-gradient(45deg, #33c3f0, #0094d2);
	transform: translateY(-3px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

#add-column:active {
	transform: translateY(0);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#add-column:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 176, 237, 0.5);
}

.form-controls.right-align {
	display: flex;
	justify-content: flex-end;
	/* 버튼을 오른쪽 끝으로 정렬 */
	margin-top: 20px;
	/* 상단 간격 */
}

.form-controls.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

#sidetalk-auto-sync-btn {
	margin-left: auto;
}

/* dashboard.css에 추가 */
.sidetalk-dashboard-button .save-button.blink {
	animation: sidetalk-blink 1.2s infinite alternate;
	box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.15);
}

@keyframes sidetalk-blink {
	0% {
		background-color: #f5fbff;
		box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.10);
	}

	100% {
		background-color: #e6f7ff;
		box-shadow: 0 0 8px 2px rgba(0, 153, 255, 0.18);
	}
}

#activate-form-select {
	width: 100%;
	/* 드롭다운 너비를 부모 요소에 맞게 설정 */
	max-width: 400px;
	/* 최대 너비 설정 가능 */
	margin-top: 13px !important;
	/* 상단 간격 */
}

/* 테이블 링크 스타일 */
.sidetalk-table-list-link {
	color: #555555;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 900;
	text-align: center;
	transition: color 0.3s ease;
	display: inline-block;
	cursor: pointer;
}

/* 링크 호버 스타일 */
.sidetalk-table-list-link:hover {
	color: #007bff;
	text-decoration: none;
}

.sidetalk-table-list-link.data-sheet {
	color: #555555;
}

#excelTable {
	width: 100%;
	table-layout: fixed;
	/* 컬럼 폭 고정 */
	border-collapse: collapse;
	font-family: "Pretendard Variable", Pretendard, sans-serif;
	font-size: 14px;
	color: #333333;
}

/* 테이블 헤더 스타일 */
#excelTable thead th {
	background: #f9f9f9;
	/* 밝은 회색 */
	border: 1px solid #e0e0e0;
	padding: 15px 10px !important;
	text-align: left !important;
	font-weight: bold;
	color: #444444;
	/* 진한 회색 */
	white-space: nowrap;
	position: sticky;
	/* 헤더 고정 */
	top: 0;
	/* 테이블 상단에 고정 */
	z-index: 10;
	/* 바디 내용 위에 표시 */
}

#excelTable thead th:last-child {
	width: unset !important;
}

/* 테이블 바디 스타일 */
#excelTable tbody td {
	border: 1px solid #e0e0e0;
	padding: 5px 10px !important;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #555555;
	/* 중간 회색 */
	background-color: #ffffff;
	/* 흰색 배경 */
	transition: background-color 0.3s ease, color 0.3s ease;
}

#excelTable tbody td.show-full,
#excelTable tbody td:focus {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
	background: #f6faff;
	z-index: 10;
	position: relative;
	min-width: 200px;
	max-width: 600px;
	word-break: break-all;
}

/* 행 호버 시 강조 효과 */
#excelTable tbody tr:hover td {
	background-color: #e9e9e9;
	/* 조금 더 진한 회색 */
	color: #333333;
}

/* 셀 클릭 강조 효과 */
#excelTable tbody td:active {
	background-color: #dcdcdc;
	/* 진한 회색 */
	color: #222222;
	/* 거의 검정색 */
	font-weight: bold;
}

/* 스크롤바 스타일 */
.table-wrapper::-webkit-scrollbar {
	height: 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
	background: #bbbbbb;
	/* 중간 회색 */
	border-radius: 6px;
	border: 2px solid #eeeeee;
	/* 스크롤바 주변 색상 */
}

.table-wrapper::-webkit-scrollbar-track {
	background: #f4f4f4;
	/* 연한 회색 */
}

/* 1. 버튼 컨테이너와 버튼 그룹 반응형 개선 */
@media (max-width: 1024px) {
	.sidetalk-button-container {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.sidetalk-button-wrapper,
	.sidetalk-button-group {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 8px;
	}

	.sidetalk-page-size-container {
		margin: 0;
		justify-content: flex-start;
		width: 100%;
	}

	.sidetalk-btn,
	.sidetalk-setting-button,
	.sidetalk-upload-label {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
}

/* 2. 테이블 가로 스크롤 및 셀 줄바꿈 */
@media (max-width: 1024px) {
	.sidetalk-dashboard-data-list-wrap {
		overflow-x: auto;
		width: 100%;
		display: block;
	}

	.table-wrapper {
		overflow-x: auto;
		width: 100%;
	}

	#excelTable {
		min-width: 600px;
		/* 테이블이 너무 작아지지 않게 최소 너비 설정 */
	}
}

/* 3. 모바일(768px 이하)에서 버튼, 입력, 테이블 더 세분화 */
@media (max-width: 768px) {
	.sidetalk-button-container {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		margin-bottom: 10px;
	}

	.sidetalk-button-wrapper,
	.sidetalk-button-group {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 6px;
	}

	.sidetalk-btn,
	.sidetalk-setting-button,
	.sidetalk-upload-label {
		width: 100%;
		min-width: 0;
		font-size: 13px;
		padding: 10px 0;
	}

	.sidetalk-page-size-container {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin: 0;
	}

	.sidetalk-page-size-input {
		width: 100%;
		min-width: 0;
		margin-top: 4px;
	}

	.sidetalk-dashboard-data-list-wrap {
		padding: 0;
	}

	.table-wrapper {
		padding: 0;
	}

	#excelTable {
		font-size: 12px;
		min-width: 480px;
	}
}

/* 4. 아주 작은 화면(480px 이하)에서 */
@media (max-width: 480px) {
	.sidetalk-button-container {
		gap: 4px;
	}

	.sidetalk-btn,
	.sidetalk-setting-button,
	.sidetalk-upload-label {
		font-size: 11px;
		padding: 8px 0;
	}

	#excelTable {
		font-size: 11px;
		min-width: 320px;
	}
}

/* 반응형 스타일 */
@media (max-width: 768px) {

	#excelTable thead th,
	#excelTable tbody td {
		font-size: 12px;
		padding: 8px;
	}
}

/* 공통 버튼 컨테이너 스타일 */
.sidetalk-button-container,
.sidetalk-button-container.bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	margin-top: 10px;
	width: 100%;
}

/* 버튼 그룹, 페이지 사이즈 입력 그룹 */
.sidetalk-button-wrapper,
.sidetalk-button-group,
.sidetalk-page-size-container {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 버튼 크기 줄이기 */
.sidetalk-btn,
.sidetalk-setting-button,
.sidetalk-upload-label {
	height: 36px;
	display: inline-block;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	background-color: #777777;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.sidetalk-btn:hover,
.sidetalk-setting-button:hover,
.sidetalk-upload-label:hover {
	background-color: #666666;
}

.sidetalk-btn:active,
.sidetalk-setting-button:active,
.sidetalk-upload-label:active {
	background-color: #555555;
}

/* 삭제 버튼 스타일 */
.sidetalk-btn-delete {
	background-color: #e74c3c;
}

.sidetalk-btn-delete:hover {
	background-color: #c0392b;
}

.sidetalk-btn-delete:active {
	background-color: #a93226;
}

.sidetalk-btn-delete:disabled {
	background-color: #bdc3c7;
	cursor: not-allowed;
	opacity: 0.7;
}

/* 삭제 버튼 스타일 */
.sidetalk-btn-save {
	background-color: #00b0ed;
}

.sidetalk-btn-save:hover {
	background-color: #00b0ed;
}

.sidetalk-btn-save:active {
	background-color: #00b0ed;
}

.sidetalk-btn-save:disabled {
	background-color: #bdc3c7;
	cursor: not-allowed;
	opacity: 0.7;
}

.sidetalk-btn:disabled {
	background-color: #bdc3c7;
	cursor: not-allowed;
	opacity: 0.7;
}

/* CSV 업로드/다운로드 버튼 크기 동일하게 */
.sidetalk-upload-form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sidetalk-upload-label {
	height: 33px;
	/* 다른 버튼과 동일한 높이 */
	padding: 1px 23px;
	/* 동일한 내부 여백 */
	font-size: 14px;
	/* 폰트 크기 통일 */
	font-weight: bold;
	color: #ffffff;
	background-color: #777777;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
	display: inline-flex;
	/* 내부 요소 크기 문제 해결 */
	align-items: center;
	justify-content: center;
}

.sidetalk-upload-label:hover {
	background-color: #666666;
}

.sidetalk-upload-label:active {
	background-color: #555555;
}

/* 숨겨진 파일 업로드 필드 */
.sidetalk-upload-input {
	display: none;
}

.sidetalk-page-size-input {
	width: 65px;
	height: 28px !important;
	/* 강제 적용 */
	min-height: 38px !important;
	padding: 2px 6px !important;
	line-height: normal !important;
	/* 강제 적용 방지 */
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
	margin-top: 10px;
	box-sizing: border-box;
	/* 패딩과 border 포함 */
	display: inline-block !important;
	/* 높이 자동 조정 방지 */
}

.sidetalk-page-size-container label {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	margin-right: 4px;
}

.total-entries-text {
	float: right;
}

/* 반응형 스타일 적용 */
@media (max-width: 1024px) {
	.sidetalk-button-container {
		justify-content: center;
		flex-wrap: wrap;
	}

	.sidetalk-button-wrapper,
	.sidetalk-button-group {
		justify-content: center;
		flex-wrap: wrap;
	}

	.sidetalk-page-size-container {
		margin-left: 0;
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.sidetalk-button-container {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.sidetalk-button-wrapper,
	.sidetalk-page-size-container,
	.sidetalk-button-group {
		flex-direction: column;
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.sidetalk-page-size-container label {
		text-align: center;
	}

	.sidetalk-btn {
		width: 100%;
		max-width: 240px;
	}

	.sidetalk-page-size-input {
		width: 80px;
	}
}

@media (max-width: 480px) {
	.sidetalk-button-container {
		gap: 6px;
	}

	.sidetalk-button-wrapper,
	.sidetalk-button-group {
		gap: 5px;
	}

	.sidetalk-btn {
		font-size: 12px;
		padding: 6px 12px;
	}

	.sidetalk-page-size-input {
		width: 70px;
		font-size: 12px;
	}
}

/* 테이블 스타일 */
.next-step-btn {
	display: inline-block;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(45deg, #00b0ed, #007bbf);
	border: none;
	border-radius: 25px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	text-transform: uppercase;
	text-align: center;
}

.next-step-btn:hover {
	background: linear-gradient(45deg, #33c3f0, #0094d2);
	transform: translateY(-3px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.next-step-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.next-step-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 176, 237, 0.5);
}

/* 단계 내비게이션 컨테이너 */
.step-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	margin-top: 20px;
	position: relative;
}

/* 버튼 스타일 */
.step-item {
	flex: 1;
	background-color: #ffffff;
	border: 1px solid #dee2e6;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 12px 15px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #6c757d;
	position: relative;
	transition: all 0.3s ease;
	cursor: default;
}

/* 화살표 디자인 개선 */
.step-item::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -6px;
	width: 10px;
	height: 10px;
	background-color: #ffffff;
	border-top: 1px solid #dee2e6;
	border-right: 1px solid #dee2e6;
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.3s ease;
	z-index: 1;
}

/* 활성 상태 (현재 단계 강조) */
.step-item.active {
	background-color: #007bff;
	color: #ffffff;
	border-color: #007bff;
	box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	transform: translateY(-2px);
	z-index: 2;
}

/* 활성 상태 화살표 */
.step-item.active::after {
	background-color: #007bff;
	border-top-color: #007bff;
	border-right-color: #007bff;
}

/* 마지막 단계에서 화살표 제거 */
.step-item:last-child::after {
	display: none;
}

.tooltip-icon {
	display: inline-block;
	margin-left: 8px;
	font-size: 17px;
	color: #007bff;
	cursor: pointer;
	position: relative;
}

.tooltip-icon:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	/* 아이콘 위에 툴팁 표시 */
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	white-space: nowrap;
	font-size: 12px;
	z-index: 10;
	opacity: 1;
	transition: opacity 0.2s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tooltip-icon:hover::before {
	content: '';
	position: absolute;
	bottom: 90%;
	/* 툴팁 아래 삼각형 표시 */
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent #333 transparent;
	z-index: 10;
}

.tooltip-icon::after,
.tooltip-icon::before {
	opacity: 0;
	pointer-events: none;
}

.tooltip-icon:hover::after,
.tooltip-icon:hover::before {
	opacity: 1;
}

.sidetalk-dashboard-data-add-wrap .sideatalkDashboardTabForm {
	width: 100%;
}

.selected-cell {
	background-color: #d0ebff !important;
	border: 1px solid #4a90e2 !important;
}

.sidetalk-border-radius-0 {
	border-radius: 0 !important;
}

.answer-content {
	max-height: 3em;
	/* 기본적으로 3줄까지 표시 */
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
}

.toggle-answer {
	display: none;
	color: #555;
	/* 회색 텍스트 */
	font-size: 14px;
	/* 글자 크기 작게 */
	text-decoration: underline;
	/* 링크처럼 보이게 */
	background: none;
	border: none;
	cursor: pointer;
}

.toggle-answer:hover {
	color: #0056b3;
}

.action-drag-handle {
	cursor: move;
	display: inline-block;
	padding: 5px;
	color: #888;
	position: absolute;
	right: 40px;
	top: 10px;
}

/* 중략 - 기존 스타일 유지 */

/* 로딩 인디케이터 스타일 추가 */
.ajax-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.0);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.ajax-loading-spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.button-loading {
	opacity: 0.7;
	position: relative;
	pointer-events: none;
}

.button-loading:after {
	content: "...";
	margin-left: 5px;
}


.action-drag-handle {
	cursor: move;
	display: inline-block;
	padding: 5px;
	color: #888;
	position: absolute;
	right: 40px;
	top: 10px;
}

.ui-sortable-helper {
	opacity: 0.8;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.ui-sortable-placeholder {
	visibility: visible !important;
	background-color: rgba(0, 0, 0, 0.05);
	border: 2px dashed #ccc;
	margin-bottom: 10px;
	height: 80px;
}

.sortable-action-item {
	position: relative;
}

/* 추가된 스타일 */
#sortable-actions-container .xi-arrow-down {
	display: block;
	text-align: center;
	margin: 10px 0;
}

.sidetalk-actions-wrap {
	cursor: move;
	/* 전체 영역에 드래그 가능한 커서 표시 */
}

/* 사이드 모달 오버레이 스타일 */
.sidetalk-side-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100;
	display: none;
}

/* 사이드 모달 z-index 조정 */
.sidetalk-side-modal-wrap {
	z-index: 101;
}

/* 동기화 버튼 스타일 */
.sidetalk-sync-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border: 1px solid #00b0ed;
	border-radius: 12px;
	background-color: #00b0ed;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 200ms ease-in-out;
	margin-bottom: 5px;
	min-width: auto;
	text-decoration: none;
}

.sidetalk-sync-button:hover {
	background-color: #008cd2;
	border-color: #008cd2;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidetalk-sync-button:disabled {
	background-color: #6c757d;
	border-color: #6c757d;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.sidetalk-sync-button i {
	margin-right: 4px;
	font-size: 14px;
	line-height: 14px;
}

.sidetalk-sync-button .text {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
}

/* 동기화 상태 표시 */
.sidetalk-sync-status {
	font-weight: bold;
	font-size: 12px;
}

.sidetalk-sync-status.success {
	color: #28a745;
}

.sidetalk-sync-status.error {
	color: #dc3545;
}

.sidetalk-sync-status.neutral {
	color: #888;
}

/* 커스텀 컨펌 모달 스타일 */
.sidetalk-confirm-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Pretendard Variable", Pretendard, sans-serif;
}

.sidetalk-confirm-modal-content {
	background: white;
	padding: 30px;
	border-radius: 15px;
	max-width: 400px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	animation: sidetalkModalFadeIn 0.3s ease-out;
}

.sidetalk-confirm-modal-icon {
	font-size: 50px;
	color: #00b0ed;
	margin-bottom: 20px;
}

.sidetalk-confirm-modal h3 {
	margin-bottom: 15px;
	color: #333;
	font-size: 18px;
	font-weight: 600;
}

.sidetalk-confirm-modal p {
	margin-bottom: 25px;
	color: #666;
	line-height: 1.5;
	font-size: 14px;
}

.sidetalk-confirm-modal small {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	color: #888;
}

.sidetalk-confirm-modal-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.sidetalk-confirm-btn {
	padding: 12px 24px;
	background: #00b0ed;
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
	transition: all 0.2s ease;
}

.sidetalk-confirm-btn:hover {
	background: #0099d3;
	transform: translateY(-1px);
}

.sidetalk-cancel-btn {
	padding: 12px 24px;
	background: #ddd;
	color: #666;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
}

.sidetalk-cancel-btn:hover {
	background: #ccc;
	transform: translateY(-1px);
}

.checkbox-options-preview {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	text-align: left;
	font-size: 15px;
}

@keyframes sidetalkModalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.sidetalk-readonly-message {
	position: absolute;
	background: #f5f6fa;
	color: #555;
	font-size: 13px;
	padding: 7px 16px;
	border-radius: 7px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
	z-index: 100;
	pointer-events: none;
	white-space: nowrap;
}

/* 사이드패널 사용자 정보 입력필드 정렬 개선 */
.userinfo-fields > div {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.userinfo-fields strong {
	display: inline-block;
	min-width: 110px; /* 라벨 너비 고정, 필요시 조정 */
	font-weight: 600;
}
.userinfo-fields input,
.userinfo-fields textarea {
	flex: 1;
	margin-left: 8px;
}

/* 채팅로그 마크다운 */
#sidetalk-dashboard-content .answer-content .markdown-content {
	line-height: 1.6;
	text-align: left;
	font-size: 14px;
	color: inherit;
	word-break: break-word;
}

#sidetalk-dashboard-content .answer-content .markdown-content h1,
#sidetalk-dashboard-content .answer-content .markdown-content h2,
#sidetalk-dashboard-content .answer-content .markdown-content h3,
#sidetalk-dashboard-content .answer-content .markdown-content h4,
#sidetalk-dashboard-content .answer-content .markdown-content h5,
#sidetalk-dashboard-content .answer-content .markdown-content h6 {
	margin: 0.8em 0 0.4em;
	line-height: 1.25;
	font-weight: 600;
}
#sidetalk-dashboard-content .answer-content .markdown-content h1 { font-size: 1.35em; }
#sidetalk-dashboard-content .answer-content .markdown-content h2 { font-size: 1.25em; }
#sidetalk-dashboard-content .answer-content .markdown-content h3 { font-size: 1.15em; }
#sidetalk-dashboard-content .answer-content .markdown-content h4 { font-size: 1.05em; }
#sidetalk-dashboard-content .answer-content .markdown-content h5,
#sidetalk-dashboard-content .answer-content .markdown-content h6 { font-size: 1em; }

#sidetalk-dashboard-content .answer-content .markdown-content p { margin: 0.5em 0; }

#sidetalk-dashboard-content .answer-content .markdown-content a {
	color: #2271b1;
	text-decoration: underline;
}
#sidetalk-dashboard-content .answer-content .markdown-content a:hover { text-decoration: none; }

#sidetalk-dashboard-content .answer-content .markdown-content ul,
#sidetalk-dashboard-content .answer-content .markdown-content ol {
	padding-left: 1.4em;
	margin: 0.5em 0 0.5em 0.2em;
}
#sidetalk-dashboard-content .answer-content .markdown-content li { margin: 0.25em 0; }

#sidetalk-dashboard-content .answer-content .markdown-content blockquote {
	margin: 0.8em 0;
	padding: 0.6em 0.9em;
	border-left: 3px solid #d0d7de;
	background: #f6f8fa;
	border-radius: 4px;
}

#sidetalk-dashboard-content .answer-content .markdown-content code {
	background: #f6f8fa;
	padding: 0.15em 0.35em;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.95em;
}

#sidetalk-dashboard-content .answer-content .markdown-content pre {
	padding: 0.9em 1em;
	margin: 0.6em 0;
	border-radius: 6px;
	overflow: auto;
	background: #0d1117; /* 하이라이트 테마가 없을 때 대비용 */
	color: #c9d1d9;
}
#sidetalk-dashboard-content .answer-content .markdown-content pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-size: 0.92em;
}

#sidetalk-dashboard-content .answer-content .markdown-content hr {
	border: 0;
	border-top: 1px solid #e5e7eb;
	margin: 1em 0;
}

#sidetalk-dashboard-content .answer-content .markdown-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 0.75em 0;
}
#sidetalk-dashboard-content .answer-content .markdown-content th,
#sidetalk-dashboard-content .answer-content .markdown-content td {
	border: 1px solid #e5e7eb;
	padding: 0.45em 0.6em;
	text-align: left;
}
#sidetalk-dashboard-content .answer-content .markdown-content th {
	background: #f9fafb;
	font-weight: 600;
}

#sidetalk-dashboard-content .answer-content .markdown-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

#previewFieldsContainer select.sidetalk-dashboard-select {
		pointer-events: none;
}

#previewFieldsContainer .radio-options-preview {
		pointer-events: none;
}