/* ============================================================
	[모더나이즈] 전역 폰트 - Pretendard 적용
	- 한글/영문 모두 자연스럽게 처리
	- 설치형/폐쇄망 환경 지원 (자체 호스팅)
	- 기존 Basier circle (유료/한글 미지원) 대체
	- font-weight 500 → 400 (한글에서 너무 두꺼워 보이는 문제 개선)
	============================================================ */
body, div, h1, h2, h3, h4, h5, h6,
button, input, select, textarea, label,
a, span, p, li, td, th {
	font-family: 'Pretendard Variable', Pretendard, 
				 'Apple SD Gothic Neo', system-ui, -apple-system, 
				 BlinkMacSystemFont, 'Segoe UI', Roboto, 
				 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 
				 'Apple Color Emoji', 'Segoe UI Emoji', 
				 'Segoe UI Symbol', 'Noto Color Emoji' !important;
	font-weight: 400 !important;	/* 500 → 400 (모던한 느낌) */
	letter-spacing: -0.3px;	/* 자간 자연스럽게 조정 */
}

/* 헤더 태그는 굵게 */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600 !important;
}

/* 본문 가독성 개선 (안티앨리어싱) */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* 코드 블록은 모노스페이스 유지 */
code, pre, kbd, samp {
	font-family: 'D2Coding', 'Consolas', 'Monaco', 
				 'Courier New', monospace !important;
	font-weight: 400 !important;
}

.text-secondary{
	color:#333 !important;
}

/* ============================================================
   [모더나이즈] Bootstrap 5.1 모달 디자인 통일
   - account-setting / chat-widget 페이지와 톤 매치
   - 그라데이션 헤더, 부드러운 그림자, 둥근 모서리
   - 접근성: focus-visible 처리, 모션 저감
   ============================================================ */

/* 모달 다이얼로그 — 기본 폭과 진입 애니메이션 */
.modal-dialog {
	max-width: 540px;
}
.modal-lg {
	max-width: 820px;
}
.modal-xl {
	max-width: 1140px;
}

/* 모달 컨테이너 — 부드러운 모서리와 깊이감 */
.modal-content {
	border: none;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
				0 4px 16px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	background: #fff;
}

/* 모달 헤더 — 그라데이션 배경 + 타이틀 강조 */
.modal-header {
	border-bottom: 1px solid #f0f2f5;
	padding: 20px 24px;
	background: #fff;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.modal-header .modal-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #2c3e50;
	letter-spacing: -0.3px;
	line-height: 1.4;
	margin: 0;
}
/* 헤더 안에 부제(서브타이틀)를 넣을 때 */
.modal-header .modal-subtitle {
	font-size: 0.8125rem;
	color: #7f8c8d;
	line-height: 1.5;
	margin-top: 4px;
	display: block;
}

/* 모달 바디 — 넉넉한 여백 */
.modal-body {
	padding: 24px;
	background: #fff;
	color: #495057;
	font-size: 0.9375rem;
	line-height: 1.6;
}
/* 바디 내 첫번째/마지막 자식의 여백 정리 */
.modal-body > *:first-child {
	margin-top: 0;
}
.modal-body > *:last-child {
	margin-bottom: 0;
}

/* 모달 푸터 — 우측 정렬 + 버튼 간격 */
.modal-footer {
	border-top: 1px solid #f0f2f5;
	padding: 16px 24px;
	background: #fafbfc;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.modal-footer > * {
	margin: 0;	/* Bootstrap 기본 마진 제거 (gap으로 대체) */
}

/* 닫기 버튼 — 미니멀하고 부드럽게 */
.modal-header .btn-close {
	padding: 8px;
	margin: -8px -8px -8px auto;
	border-radius: 8px;
	opacity: 0.5;
	transition: all 0.2s ease;
	background-size: 14px;
}
.modal-header .btn-close:hover {
	opacity: 1;
	background-color: #f0f2f5 !important;
}
.modal-header .btn-close:focus {
	box-shadow: none;
	outline: 2px solid #33d1f2;
	outline-offset: 2px;
}

/* 모달 내부 폼 요소 — 통일된 룩앤필 */
.modal-body .form-label {
	font-weight: 600;
	color: #2c3e50;
	font-size: 0.875rem;
	margin-bottom: 8px;
	display: block;
}
.modal-body .form-control,
.modal-body .form-select {
	border-radius: 8px;
	border: 1px solid #dee2e6;
	padding: 10px 14px;
	font-size: 0.9375rem;
	transition: all 0.2s ease;
}
.modal-body .form-control:focus,
.modal-body .form-select:focus {
	border-color: #33d1f2;
	box-shadow: 0 0 0 3px rgba(51, 209, 242, 0.15);
}
.modal-body .form-control:disabled {
	background: #f8f9fa;
	color: #6c757d;
}
.modal-body .form-text {
	font-size: 0.8125rem;
	color: #7f8c8d;
	margin-top: 6px;
}

/* 모달 내 알림 박스 — 강조된 메시지 */
.modal-body .alert {
	border: none;
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 0.875rem;
	margin-bottom: 16px;
}
.modal-body .alert-info {
	background: #e7f7fb;
	color: #0c6175;
}
.modal-body .alert-warning {
	background: #fff7e6;
	color: #8a5a00;
}
.modal-body .alert-success {
	background: #e6f7ed;
	color: #0a6b2e;
}
.modal-body .alert-danger {
	background: #fde8ea;
	color: #842029;
}

/* 모달 내 유효성 피드백 */
.modal-body .valid-feedback {
	color: #27ae60;
	font-size: 0.8125rem;
	margin-top: 6px;
}
.modal-body .invalid-feedback {
	color: #e74c3c;
	font-size: 0.8125rem;
	margin-top: 6px;
}

/* 모달 푸터 버튼 — Primary는 그라데이션, Secondary는 텍스트 버튼 */
.modal-footer .btn {
	padding: 10px 20px;
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.25s ease;
	min-width: 100px;
}
.modal-footer .btn-primary {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
	border: none;
	color: #fff !important;
	box-shadow: 0 2px 6px rgba(79, 172, 254, 0.3);
}
.modal-footer .btn-primary:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}
.modal-footer .btn-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}
.modal-footer .btn-secondary,
.modal-footer .btn-link {
	background: transparent !important;
	color: #7f8c8d !important;
	border: 1px solid transparent;
}
.modal-footer .btn-secondary:hover,
.modal-footer .btn-link:hover {
	background: #f0f2f5 !important;
	color: #2c3e50 !important;
}

/* 프로필/이미지 미리보기 — 모달 전용 */
.modal-body .profile-img-preview {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #f0f2f5;
	transition: all 0.3s ease;
}
.modal-body .profile-img-preview:hover {
	border-color: #33d1f2;
}

/* tagsinput (초대 모달) — Bootstrap 5와 어색하지 않게 */
.modal-body .bootstrap-tagsinput {
	width: 100% !important;
	border-radius: 8px !important;
	border: 1px solid #dee2e6 !important;
	padding: 8px 10px !important;
	min-height: 80px;
	box-shadow: none !important;
}
.modal-body .bootstrap-tagsinput:focus-within {
	border-color: #33d1f2 !important;
	box-shadow: 0 0 0 3px rgba(51, 209, 242, 0.15) !important;
}
.modal-body .bootstrap-tagsinput .tag,
.modal-body .bootstrap-tagsinput .label-info {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
	color: #fff !important;
	padding: 4px 10px !important;
	border-radius: 14px !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	margin: 2px !important;
}
/* tagsinput 내부 실제 input — 테두리/배경 완전 제거 */
.modal-body .bootstrap-tagsinput input {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	padding: 4px 6px !important;
	margin: 2px !important;
	min-width: 180px;
	font-size: 0.9375rem;
	color: #2c3e50;
}
.modal-body .bootstrap-tagsinput input:focus,
.modal-body .bootstrap-tagsinput input:active {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
}
.modal-body .bootstrap-tagsinput input::placeholder {
	color: #adb5bd;
	font-size: 0.875rem;
}

/* tagsinput 컨테이너 자체 — 위 컨테이너 규칙 보강
   (라이브러리 기본 inline-block을 block으로 강제, 줄바꿈 자연스럽게) */
.modal-body .bootstrap-tagsinput {
	display: block !important;
	flex-wrap: wrap;
	gap: 4px;
	cursor: text;
	transition: all 0.2s ease;
}

/* 모션 저감 환경 대응 (접근성) */
@media (prefers-reduced-motion: reduce) {
	.modal-content,
	.modal-footer .btn,
	.modal-header .btn-close {
		transition: none !important;
	}
}

/* 모바일 대응 */
@media (max-width: 576px) {
	.modal-dialog {
		margin: 12px;
	}
	.modal-header {
		padding: 16px 20px;
	}
	.modal-body {
		padding: 20px;
	}
	.modal-footer {
		padding: 14px 20px;
		flex-direction: column-reverse;
	}
	.modal-footer .btn {
		width: 100%;
	}
}


/* Primary 컬러 변경 */
.btn-primary, .bg-primary{
	background-color: #33d1f2 !important;
	color: #fff !important;
}
.text-primary {
	/*background-color: #33d1f2 !important;*/
	color: #47d6f3 !important;
}

.text-secondary {
	color: rgb(60 69 79) !important;
}

.mw-sm-xs{
	width:16rem !important;
}

/* Custom Common CSS */
.invalid-tooltip{
	position: relative !important;
}

.bg-very-light{
    background-color: #ebebeb; /* 매우 밝은 회색 */
}

.tiny {
	font-size: 0.625rem; /* 더 작은 폰트 크기를 정의 */
}

.smaller {
	font-size: 0.75rem; /* 폰트 크기를 0.875rem에서 0.75rem으로 줄임 */
}

a {
    color: inherit; /* 부모 요소로부터 글씨 색상을 상속받습니다. */
    text-decoration: none; /* 밑줄 제거 */
}
*:focus{
	outline:none;
}

a:hover {
    color: inherit; /* 마우스 오버나 포커스 시에도 색상을 상속받습니다. */
    text-decoration: none; /* 마우스 오버나 포커스 시 밑줄 제거 */
	background-color: #33d1f2 !important; /* 배경 컬러 변경 */
	color:#FFF !important;
}

.w-5 {
	width: 5% !important;
}

.w-10 {
	width: 10% !important;
}

.w-20 {
	width: 20% !important;
}

.btn-very-sm {
	padding: 0.1rem 0.4rem;
	font-size: 0.5rem;
	border-radius: 0.2rem;
	margin:0.2rem;
}

.btn-very-sm:hover {
	color: inherit; /* 마우스 오버나 포커스 시에도 색상을 상속받습니다. */
	text-decoration: none; /* 마우스 오버나 포커스 시 밑줄 제거 */
	background-color: #33d1f2 !important; /* 배경 컬러 변경 */
	color:#FFF !important;
}

.btn-very-sm:click{
	outline:none;
}


.bootstrap-tagsinput .tag {
    padding: 6px;
    border-radius: 2px;
}
.label {
    border-radius: 4px;
    font-size: 75%;
    padding: 4px 7px;
    margin-right: 5px;
    font-weight: 400;
    color: #fff;
}

.nav-1{
    border-right: 1px solid #d1d7dd;
}

/* 아이콘 또는 다른 요소에 primary 컬러 적용 */
.icon-primary {
	color: #33d1f2 !important;
}

/* 모든 버튼에 적용되는 스타일 */
.btn {
    outline: none; /* 클릭 시 생기는 외곽선 제거 */
    border: none; /* 버튼의 경계선 제거 */
    transition: background-color 0.3s ease; /* 배경색 변경에 대한 전환 효과 */
}

.cursor-pointer{
	cursor:pointer;
}

.btn:focus{
    outline: none; /* 완전히 제거 */
    /* 또는 더 세련된 포커스 스타일로 대체 */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Bootstrap의 기본 포커스 스타일과 유사한 효과 */
}

/* 버튼에 마우스를 올렸을 때의 스타일 */
.btn:hover {
    background-color: #33d1f2; /* 롤오버 시 배경색 변경, 색상은 예시이며 원하는 색으로 변경 가능 */
	color:#FFF !important;
}


.navbar-menu button{
	font-size:0.875rem;
}

.ms-lg-80 {
    margin-left: 17rem !important;
    transition: margin-left 0.35s ease, margin-right 0.35s ease !important;
}

.nav-2, .nav-3 {
    /*opacity: 0;
    visibility: hidden;*/
    transition: opacity 1s ease, visibility 1s;
}

.nav-2.visible {
    opacity: 1;
    visibility: visible;
}

.nav-3.visible {
    opacity: 1;
    visibility: visible;
}

.ms-lg-nav-2-visible {
    margin-left: 32rem !important;
}

.ms-lg-nav-3-visible {
    margin-right: 16rem !important;
}

.nav-3 .flex-column {
    height: 33.33%; /* 전체 높이의 1/3 */
    overflow-y: auto; /* 내용이 늘어날 경우 스크롤 */
}

.nav-3 .widget-btn i{
	font-size:0.6rem;
}

.nav-3 .user-highlight {
    font-size: 0.95rem; /* 기본 폰트 크기보다 약간 작게 */
    font-weight: bold; /* 텍스트를 두껍게 하여 강조 */
}

.nav-3 .user-item:hover {
    background-color: #f8f9fa; /* 롤오버 시 배경색 변경 */
    cursor: pointer; /* 마우스 포인터를 손가락 모양으로 변경하여 클릭 가능함을 나타냄 */
    transition: background-color 0.3s ease; /* 배경색 변경에 대한 전환 효과 */
    border-radius: 0.5rem; /* 모서리를 둥글게 */
}

.nav-3 .status-dot {
    font-size: 0.5rem; /* 또는 원하는 크기로 조정 */
	vertical-align:middle;
}

.nav-link.folded svg{
	transform: rotate(180deg);
}

.flex-column.folded{
	display:none;
}

.file-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 0.25rem; /* 라운드 효과 */
    transition: background-color 0.2s ease-in-out; /* 부드러운 배경색 전환 */
	font-size:0.875rem;
}

.file-item:hover {
    background-color: #33d1f2 !important; /* Bootstrap의 primary 색상 */
    color: white; /* 텍스트 색상을 흰색으로 변경 */
}

.file-name {
    margin-left: 0.5rem; /* 아이콘과 파일명 사이의 간격 */
}

.msg-item {
	display: flex;
	cursor: pointer;
	border-radius: 0.25rem; /* 라운드 효과 */
	transition: background-color 0.2s ease-in-out; /* 부드러운 배경색 전환 */
}

.msg-item:hover {
	background-color: #33d1f2 !important; /* Bootstrap의 primary 색상 */
	color: white; /* 텍스트 색상을 흰색으로 변경 */
}

.fa-file-excel {
    color: #217346; /* 엑셀 아이콘 색상 - Microsoft Excel의 테마 색상 */
}

.fa-file-word {
    color: #2B579A; /* 워드 아이콘 색상 - Microsoft Word의 테마 색상 */
}

.widget-box-prompts button{
	font-size:0.75rem;
}

.hidden-sub {
  overflow: hidden; /* 내부 요소가 밖으로 나오지 않도록 함 */
  height: 0; /* 높이를 0으로 설정하여 보이지 않도록 함 */
}

.nav-pills{
	width:100%;
}


.btn_modal_team_modify:hover i {
	color: white; /* 흰색으로 변경 */
}


/*********** right - chatwork ***********/
.makechat_right{
	float:left;
	width:20%;
	padding-top:6px;
	background:#000;
}

.makechat_right_widget{
	width:100%;
}

.makechat_right_widget.widget1{
}

.makechat_right_widget.widget2{
}

.widget_header{
	width:100%;
	height:28px;
	line-height:28px;
	padding-left:10px;
	padding-right:10px;
}

.widget_header_title{
	width:50%;
	height:28px;
	line-height:28px;
	float:left;
	color:#FFF;
}

.widget_header_btn{
	width:80px;
	font-size:13px;
	height:24px;
	line-height:24px;
	float:right;
	border-radius:5px;
	text-align:center;
	color:#FFF;
	background:#343541;
	margin-top:2px;
	cursor:pointer;
}

.widget_header_btn:hover{
	background:#33d1f2;
}

.widget_header_btn span{
	margin-left:3px;
}

.widget_content{
	padding:10px;
	width:100%;
	box-sizing: border-box;
}

.widget_box{
	width:100%;
	background:#333;
	border-radius:5px;
	padding:14px;
	box-sizing: border-box;
	overflow-y:scroll;
}

.item_friend-profile-image img{
	height:30px;
	width:30px;
	float:left;
	box-shadow:none;
}

.item_friend_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start; /* 자식 요소들을 왼쪽 정렬합니다 */
	height: 30px;
	width: 150px;
	padding-left: 10px;
	color: #FFF;
}

.item_friend_username {
	font-size: 14px;
	color: #FFF;
	margin: 0; /* 기본 마진 제거 */
	height:15px;
	line-height:15px;
}

.item_friend_usertitle {
	font-size: 14px;
	color: #AAA;
	margin: 0; /* 기본 마진 제거 */
	height:15px;
	line-height:15px;
}

.item_friend_right{
	height:30px;
	width:50px;
	float:right;
	text-align:right;
	color:#FFF;
}

.item_friend_right i{
	color:#FFF;
}

.item_friend{
	height:50px;
	line-height:50px;
	width:100%;
	padding:10px;
	box-sizing: border-box;
	cursor:pointer;
}

.widget_members .item_friend:hover{
	background:#222;
	border-radius:5px;
}

.item_friend:not(:first-child) {
	margin-top:20px;
}


/* modal : common */
.my-modal{
	background:#FFF;
	border-radius: 6px;
    box-shadow: 0 0 0 1px var(--saf-0),0 4px 12px 0 #0000001f;
	border:1px #CCC solid;
	position:fixed;
	z-index: 100000;
	box-sizing: border-box;
	padding-top:20px;
	padding-bottom:20px;
	user-select: none;
}
.my-modal button{
	font-size:0.75rem;
}
.my-modal input,textarea{
	user-select: auto;
}

.my-modal.center {
    position: fixed; /* fixed를 사용하여 화면에 고정 */
    top: 50%; /* 상단에서 50% 위치로 이동 */
    left: 50%; /* 좌측에서 50% 위치로 이동 */
    width: 100%;
    min-height: 250px;
    transform: translate(-50%, -50%); /* 현재 위치에서 -50% 만큼 이동하여 화면 중앙에 정확하게 위치 */
	background:#FFF;
	padding-top:10px;
}

.modal-overlay {
    position: fixed;       /* 화면 전체에 고정 */
    top: 0;                /* 상단부터 시작 */
    left: 0;               /* 좌측부터 시작 */
    width: 100%;           /* 화면 전체 폭 */
    height: 100%;          /* 화면 전체 높이 */
    background: rgba(0, 0, 0, 0.5);   /* 검정색 투명도 50% */
    z-index: 10000;         /* 다른 요소보다 앞에 오도록 z-index 설정 */
	display:none;
}

.my-modal .close-modal-btn {
    position: absolute; /* 모달 내부의 상단 오른쪽에 위치시키기 위해 */
    top: 15;
    right: 20px;
    background: none; /* 기본 배경 제거 */
    border: none; /* 기본 테두리 제거 */
    color: #999; /* 아이콘 색상 설정 */
    cursor: pointer; /* 마우스를 올렸을 때 손가락 모양으로 변경 */
}

.my-modal .close-modal-btn i{
	color:#000;
}

.my-modal .title{
	width:100%;
	color:#333;
	margin-bottom:16px;
	font-weight: bold;
	height:34px;
	line-height:34px;
}

.my-modal .title h5{
	height:34px;
	line-height:34px;
}

.my-modal .close-modal-btn:focus {
    outline: none; /* 포커스 시 기본 테두리 제거 */
}

.my-modal .form-row {
	height:36px;
	line-height:36px;
}


.form-row-msg{
	color:red;
	display:none;
}

.my-modal .form-row.title {
	margin-top:10px;
}

.my-modal .form-row.desc{
	font-size: .8rem;
	margin-top:5px;
	height:26px;
	line-height:20px;
}

.my-modal.center{
    position: fixed; /* fixed를 사용하여 화면에 고정 */
    top: 50%; /* 상단에서 50% 위치로 이동 */
    left: 50%; /* 좌측에서 50% 위치로 이동 */
    max-width: 700px;
    width: 100%;
    min-height: 250px;
    transform: translate(-50%, -50%); /* 현재 위치에서 -50% 만큼 이동하여 화면 중앙에 정확하게 위치 */
	background:#FFF;
	padding-top:10px;
}

/*바로 아래에 있는 요소만 적용*/
.my-modal > div,
.my-modal > h4,
.my-modal > h5,
.my-modal > h6 {
	width:100%;
	padding-left:20px !important;
	padding-right:20px !important;
}


/* modal : Create Team */
.modal-workspace-team-create-userlist{
	overflow-y:scroll;
	height: 320px;
}

.modal-workspace-team-create-userlist div{
	padding:0;
}

.modal-workspace-team-create-userlist .item_friend{
	height:50px;
	line-height:50px;
	width:100%;
	box-sizing: border-box;
	cursor:pointer;
	padding:0;
	padding:10px;
}

.modal-workspace-team-create-userlist .item_friend:hover{
	background:#EFEFEF;
	border-radius:5px;
}

.modal-workspace-team-create-userlist .item_friend:not(:first-child) {
	margin-top:10px;
}

.modal-workspace-team-create-userlist .item_friend-profile-image{
	padding:0;
}

.modal-workspace-team-create-userlist .item_friend-profile-image img{
	height:30px;
	width:30px;
	float:left;
	box-shadow:none;
}

.modal-workspace-team-create-userlist .item_friend_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 자식 요소들을 왼쪽 정렬합니다 */
    height: 30px;
    width: 350px;
    padding-left: 10px;
    color: #FFF;
	float:left;
}

.modal-workspace-team-create-userlist .item_friend_name {
    font-size: 14px;
    color: #000;
    margin: 0; /* 기본 마진 제거 */
	height:15px;
	line-height:15px;
}

.modal-workspace-team-create-userlist .item_friend_email {
    font-size: 14px;
    color: #666;
    margin: 0; /* 기본 마진 제거 */
	height:15px;
	line-height:15px;
}

.modal-workspace-team-create-userlist .item_friend_right{
	height:30px;
    line-height: 30px;
	width:30px;
	float:right;
	text-align:right;
	color:#FFF;
	padding:0;
}

.modal-workspace-team-create-userlist .item_friend_right i{
	color:#FFF;
	width:30px;
	height:30px;
    line-height: 30px;
	border-radius:50%;
	background-color:#999;
	padding: 0;
    text-align: center;
}

.modal-workspace-team-create-userlist .item_friend.joined i{
	background-color:#33d1f2;
}


/* modal : invite */

.my-modal-invite {
    position: fixed; /* fixed를 사용하여 화면에 고정 */
    top: 50%; /* 상단에서 50% 위치로 이동 */
    left: 50%; /* 좌측에서 50% 위치로 이동 */
    max-width: 700px;
    width: 100%;
    min-height: 250px;
    transform: translate(-50%, -50%); /* 현재 위치에서 -50% 만큼 이동하여 화면 중앙에 정확하게 위치 */
	background:#FFF;
	padding-top:10px;
}

.my-modal-invite.complete{
	display:none;
}

.my-modal-invite.complete .my-modal-invite-title{
    height: 250px;
    line-height: 250px;
	text-align:center;
}

.my-modal-invite-title{
	width:100%;
	color:#333;
	margin-bottom:16px;
	font-weight: bold;
	height:34px;
	line-height:34px;
}

.my-modal-invite-message{
	width:100%;
	margin-bottom:8px;
	height:34px;
	line-height:34px;
}

.my-modal-invite-title.msg{
	height: 250px !important;
    line-height: 24px !important;
    font-size: 18px;
    text-align: center !important;
    padding-top: 100px;
}


.my-modal-invite-text{
	width:100%;
	max-height:400px;
}

.my-modal-invite-text .bootstrap-tagsinput{
	padding:8px;
	border:#CCC 1px solid;
	min-height:80px;
}

.my-modal-invite-text .bootstrap-tagsinput .label-info{
	background:#33d1f2;
}

.my-modal-invite-text input{
	border:0;
	padding:0;
	width:100%;
}

.my-modal-invite-button{
	margin-top:10px;
}

.my-modal-invite-button a{
	margin-top:10px;
	font-size: 14px !important;
}

.my-modal-invite-button button{
	width:100px !important;
}


/* modal : workspace-rename */
.my-modal-workspace-rename {
    position: fixed; /* fixed를 사용하여 화면에 고정 */
    top: 50%; /* 상단에서 50% 위치로 이동 */
    left: 50%; /* 좌측에서 50% 위치로 이동 */
    max-width: 700px;
    width: 100%;
    min-height: 250px;
    transform: translate(-50%, -50%); /* 현재 위치에서 -50% 만큼 이동하여 화면 중앙에 정확하게 위치 */
	background:#FFF;
	padding-top:10px;
}

.my-modal-workspace-rename div{
	width:100%;
	padding-left:20px;
	padding-right:20px;
}

.my-modal-workspace-rename-title{
	width:100%;
	color:#333;
	margin-bottom:16px;
	font-weight: bold;
	height:34px;
	line-height:34px;
}

.my-modal-workspace-rename-content{
	width:90%;
	max-height:400px;
	margin:0 auto;
}

.my-modal-workspace-rename-content input{
	margin-top:20px;
	width:100%;
}

.my-modal-workspace-rename-content .invalid-tooltip,valid-tooltip{
	position:relative;
}


.my-modal-workspace-rename-button{
	margin-top:10px;
	width:100%;
	text-align:center;
}

.my-modal-workspace-rename-button a{
	margin-top:10px;
	font-size: 14px !important;
}

.my-modal-workspace-rename-button button{
	width:150px !important;
	margin:0 auto;
}

/* modal : user */

.my-modal-user{
	top:64px;
	left:30px;
	max-width:300px;
	width:100%;
	min-height:80px;
	display:none;
	/*max-height:200px;*/
	overflow-y:visible;
}

.my-modal-user div{
	width:100%;
	padding-left:20px;
	padding-right:20px;
}

.my-modal-user-me{
	font-size:0.875rem;
	font-weight:bold;
}
.my-modal-user-me img{
	width:30px;
	height:30px;
	margin-right:4px;
	border-radius: 50% !important;
}

.my-modal-user-line{
	width:100%;
	border-bottom:1px #CCC solid;
	margin-top:10px;
	margin-bottom:10px;
}

.my-modal-user-line-title{
	width:100%;
	border-bottom:1px #CCC solid;
	border-top:1px #CCC solid;
	color:#333;
	margin-top:16px;
	margin-bottom:16px;
	font-size:0.875rem;
	font-weight: bold;
	height:34px;
	line-height:34px;
}



.my-modal-user-current{
	font-size:14px;
	font-weight:bold;
}

.my-modal-user-url{
	font-size:12px;
	color:#666;
}

.my-modal-user-menu{
	font-size:14px;
	height:30px;
	line-height:30px;
	cursor:pointer;
}

.my-modal-user-menu:hover {
    background-color: #DDD;
}


/* modal : user-profile */


code[class*=language-], pre[class*=language-] {
    -webkit-font-smoothing: auto;
    color: #5a5a5a;
    font-family: Bitstream Vera Sans Mono,Menlo,Consolas,Monaco,Courier,monospace,serif;
    font-size: .75em;
    line-height: 1.5em;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    text-shadow: none;

    word-wrap: normal;
    direction: ltr;
    font-size: .8125rem;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    text-align: left;
    white-space: pre;
    word-break: normal;
    word-spacing: normal;
}


/* Toast Styles */
.toast {
    background-color: #333;
    color: white;
}

.toast.success {
    background-color: #198754;
}

.toast.error {
    background-color: #dc3545;
}

.toast.warning {
    background-color: #ffc107;
    color: #333;
}

.toast.info {
    background-color: #0dcaf0;
}

.toast-icon {
    font-size: 1.2rem;
}

.toast.success .toast-icon:before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.toast.error .toast-icon:before {
    content: '\f071';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.toast.warning .toast-icon:before {
    content: '\f06a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.toast.info .toast-icon:before {
    content: '\f05a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* ============================================
   언어 변경 select 박스 (lang-switcher) 전용 스타일
   - inc_header.php의 lang-switcher가 페이지별 .form-select 오버라이드에
     영향받지 않도록 ID 선택자로 specificity를 높여 강제 적용
   - ID(0,1,0,0) > 클래스(0,0,1,0) 이므로 무조건 우선됨
============================================ */
#lang-switcher.form-select-sm {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: 0.5rem;
	padding-right: 1.75rem;     /* select 우측 화살표 아이콘 공간 */
	font-size: 0.875rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	height: auto;               /* height 강제 지정된 경우 대비 */
}
.page-content > section > div.d-flex.justify-content-end {
    padding-bottom: 0 !important;
}