/* 구성원관리 페이지 전용 스타일 */
.ems_wrap {
	width: 1200px;
	margin: 0 auto;
	padding: 24px 0 80px;
	color: #111;
	font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
	box-sizing: border-box;
}
.ems_wrap *,
.ems_wrap *::before,
.ems_wrap *::after { box-sizing: border-box; }

/* 상단 탭 */
/* .ems_tabs / .ems_tab 탭 스타일은 sub.css의 공통 탭 스타일로 통합됨 */

/* 페이지 제목 */
.ems_page_title {
	margin: 50px 0 24px;
	font-size: 22px;
	font-weight: 700;
	color: #111;
}

/* 권한 안내 박스 */
.ems_permission_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.ems_permission_card {
	border: 1px solid #dbdbdb;
	border-radius: 8px;
	background: #fff;
	padding: 36px 36px 40px;
	min-height: 360px;
}
.ems_permission_card__title {
	font-size: 18px;
	font-weight: 700;
	color: #111;
	margin: 0 0 28px;
}
.ems_permission_card__desc {
	font-size: 14px;
	line-height: 1.7;
	color: #333;
	margin: 0 0 28px;
}
.ems_permission_card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ems_permission_card__list li {
	font-size: 14px;
	font-weight: 700;
	color: #326aff;
	line-height: 1.9;
}

/* 정보바 */
.ems_info_bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 30px 0 0;
	height: 60px;
	background: #f9f9f9;
	border-radius: 4px;
	font-size: 14px;
	color: #444;
}
.ems_info_bar__btn {
	height: 32px;
	padding: 0 14px;
	background: #757575;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* 부서관리/구성원추가등록 버튼 줄 */
.ems_action_row {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 36px 0 0;
}
.ems_action_btn {
	height: 44px;
	padding: 0 22px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	cursor: pointer;
}

/* 안내 메시지 */
.ems_notice {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	margin: 18px 0 0;
	padding-bottom: 18px;
	border-bottom: 1px solid #e8e8e8;
	font-size: 13px;
	color: #666;
}
.ems_notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ed4848;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* 카드 리스트 */
.ems_list {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ems_card {
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 24px 32px 24px 32px;
	border: 1px solid #dbdbdb;
	border-radius: 8px;
	background: #fff;
}

.ems_card__photo {
	flex-shrink: 0;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	object-fit: cover;
	background: #ececec;
	display: block;
}

.ems_card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ems_card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.ems_card__name {
	font-size: 17px;
	font-weight: 700;
	color: #111;
}
.ems_card__divider {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: #d8d8d8;
}
.ems_card__rank {
	font-size: 14px;
	color: #555;
}

/* 배지 */
.ems_badge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 10px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
.ems_badge--dark {
	background: #393939;
	color: #fff;
}
.ems_badge--gray {
	background: #8a8a8a;
	color: #fff;
}
.ems_badge--blue-outline {
	background: #fff;
	color: #326aff;
	border: 1px solid #326aff;
	cursor: pointer;
}

/* 카드 정보 */
.ems_card__details {
	display: flex;
	gap: 80px;
	font-size: 13px;
	color: #333;
	line-height: 1.7;
}
.ems_card__details > .ems_card__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ems_card__details > .ems_card__extra {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* 시험위원 체크박스 */
.ems_card__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	font-size: 13px;
	color: #333;
	margin-top: 2px;
}
.ems_card__check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.ems_card__check__box {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #c8c8c8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: background 0.15s, border-color 0.15s;
}
.ems_card__check__box::after {
	content: "";
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
}
.ems_card__check input:checked + .ems_card__check__box {
	background: #326aff;
	border-color: #326aff;
}
.ems_card__check input:checked + .ems_card__check__box::after {
	opacity: 1;
}

/* 우측 액션 버튼 */
.ems_card__actions {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 170px;
}
.ems_card__btn {
	height: 38px;
	padding: 0 12px;
	background: #fff;
	color: #333;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}
.ems_card__btn:hover { background: #fafafa; }

/* 하단 구성원 추가 버튼 */
.ems_bottom_cta_wrap {
	display: flex;
	justify-content: center;
	margin: 50px 0 0;
}
.ems_bottom_cta {
	width: 320px;
	height: 56px;
	background: #326aff;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

/* 프로필등록 모달 */
.ems_modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
}
.ems_modal.is-open { display: flex; }
.ems_modal__dim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.ems_modal__panel {
	position: relative;
	width: 480px;
	background: #fff;
	border-radius: 10px;
	padding: 36px 36px 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.ems_modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #333;
	font-size: 0;
}
.ems_modal__close::before,
.ems_modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 1.5px;
	background: #333;
	transform-origin: center;
}
.ems_modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ems_modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ems_modal__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: #111;
	text-align: center;
}
.ems_modal__sub {
	margin: 0 0 24px;
	font-size: 13px;
	color: #666;
	text-align: center;
}
.ems_modal__textarea {
	display: block;
	width: 100%;
	height: 200px;
	padding: 16px;
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	color: #333;
	resize: none;
	box-sizing: border-box;
}
.ems_modal__textarea::placeholder {
	color: #b8b8b8;
}
.ems_modal__actions {
	display: flex;
	gap: 8px;
	margin: 18px 0 0;
}
.ems_modal__btn {
	flex: 1;
	height: 50px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	border: none;
	cursor: pointer;
}
.ems_modal__btn--cancel {
	background: #fff;
	color: #444;
	border: 1px solid #d8d8d8;
}
.ems_modal__btn--save {
	background: #326aff;
	color: #fff;
	font-weight: 700;
}

/* ============================================ */
/* 사진 담당자 변경 모달 (id: photoOwnerModal) */
/* - 기본 ems_modal 구조 재사용, 내부 레이아웃만 확장 */
/* ============================================ */

.ems_photo_modal__panel {
	width: 420px;
	padding: 36px 32px 28px;
}

/* 섹션 (현재 담당 / 변경 소유자) */
.ems_photo_modal__section {
	margin-top: 24px;
}
.ems_photo_modal__section:first-of-type {
	margin-top: 28px;
}

/* 섹션 라벨 ("현재 담당 소유자", "변경 소유자") */
.ems_photo_modal__label {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: #111;
}

/* 현재 담당자 카드 (읽기 전용) */
.ems_photo_modal__current {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}

/* 변경 소유자 리스트 박스 - 스크롤 영역 */
.ems_photo_modal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}

/* 리스트 항목 - 항목 간 구분선 */
.ems_photo_modal__item + .ems_photo_modal__item {
	border-top: 1px solid #f0f0f0;
}

/* 항목 라벨 (라디오 클릭 영역 전체) */
.ems_photo_modal__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	cursor: pointer;
	user-select: none;
}
.ems_photo_modal__row:hover {
	background: #fafafa;
}

/* 실제 라디오 input은 숨김 (커스텀 원형 사용) */
.ems_photo_modal__row input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* 커스텀 라디오 (회색 원 + 선택 시 파란 채움) */
.ems_photo_modal__radio {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid #c8c8c8;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: border-color .15s;
}
.ems_photo_modal__radio::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #326aff;
	transform: scale(0);
	transition: transform .15s;
}
.ems_photo_modal__row input[type="radio"]:checked + .ems_photo_modal__radio {
	border-color: #326aff;
}
.ems_photo_modal__row input[type="radio"]:checked + .ems_photo_modal__radio::after {
	transform: scale(1);
}

/* 프로필 이미지 (현재/변경 공용) */
.ems_photo_modal__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: #ececec;
	flex-shrink: 0;
}

/* 이름 + 직급 묶음 */
.ems_photo_modal__info {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.ems_photo_modal__name {
	font-size: 14px;
	font-weight: 700;
	color: #111;
}
.ems_photo_modal__rank {
	font-size: 13px;
	color: #888;
}

/* 선택된 항목의 이름 강조 (이미지 디자인 매칭) */
.ems_photo_modal__row input[type="radio"]:checked ~ .ems_photo_modal__info .ems_photo_modal__name {
	color: #111;
}

/* 하단 액션 버튼 영역 - 중앙 정렬, 버튼 가로 폭 좁게 */
.ems_photo_modal__actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}
.ems_photo_modal__actions .ems_modal__btn {
	flex: none;
	min-width: 96px;
	height: 44px;
	padding: 0 22px;
	font-size: 14px;
}

/* ============================================ */
/* 모바일 (768px 이하) */
/* ============================================ */
@media (max-width: 768px) {
	.ems_wrap {
		width: 100%;
		padding: 16px 16px 60px;
	}

	/* 탭 */
	.ems_tabs {
		gap: 24px;
		margin-bottom: 24px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ems_tab {
		flex-shrink: 0;
		font-size: 14px;
		padding-bottom: 10px;
	}

	/* 페이지 제목 */
	.ems_page_title {
		margin: 28px 0 16px;
		font-size: 18px;
	}

	/* 권한 박스 - 1열 */
	.ems_permission_grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.ems_permission_card {
		padding: 24px 20px 28px;
		min-height: 0;
	}
	.ems_permission_card__title {
		font-size: 16px;
		margin-bottom: 18px;
	}
	.ems_permission_card__desc {
		font-size: 13px;
		margin-bottom: 18px;
	}
	.ems_permission_card__list li {
		font-size: 13px;
	}

	/* 정보바 */
	.ems_info_bar {
		flex-direction: column;
		gap: 10px;
		height: auto;
		padding: 14px 12px;
		font-size: 13px;
		text-align: center;
	}
	.ems_info_bar > span {
		line-height: 1.5;
	}

	/* 부서관리 / 구성원추가등록 */
	.ems_action_row {
		gap: 6px;
		margin-top: 20px;
	}
	.ems_action_btn {
		flex: 1;
		height: 40px;
		padding: 0 12px;
		font-size: 13px;
	}

	/* 안내 메시지 */
	.ems_notice {
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 12px;
		line-height: 1.5;
		padding-bottom: 14px;
	}
	.ems_notice__icon {
		flex-shrink: 0;
		margin-top: 2px;
	}

	/* 카드 리스트 - PSD 모바일 디자인: 사진 상단 중앙, 정보 중앙정렬, 버튼 세로 풀폭 */
	.ems_list {
		gap: 12px;
		margin-top: 18px;
	}
	.ems_card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding: 28px 20px 24px;
		text-align: center;
	}
	.ems_card__photo {
		width: 110px;
		height: 110px;
		margin-bottom: 18px;
	}
	.ems_card__body {
		width: 100%;
		gap: 14px;
		align-items: center;
	}
	.ems_card__head {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.ems_card__name {
		font-size: 18px;
	}
	.ems_card__rank {
		font-size: 14px;
		color: #666;
	}
	.ems_card__divider {
		display: none;
	}

	.ems_badge {
		height: 24px;
		padding: 0 12px;
		font-size: 12px;
	}

	/* 카드 정보 - 1열로 중앙정렬 */
	.ems_card__details {
		flex-direction: column;
		gap: 8px;
		font-size: 13px;
		text-align: center;
	}
	.ems_card__details > .ems_card__contact {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 14px;
		position: relative;
	}
	.ems_card__details > .ems_card__contact > span:nth-child(1)::after {
		content: "";
		display: inline-block;
		width: 1px;
		height: 12px;
		background: #d8d8d8;
		margin-left: 14px;
		vertical-align: middle;
	}
	.ems_card__details > .ems_card__contact > span:nth-child(3) {
		flex-basis: 100%;
		text-align: center;
	}
	.ems_card__details > .ems_card__extra {
		align-items: center;
	}

	/* 시험위원 체크박스 - 좌측 정렬, 카드 바디 안쪽 */
	.ems_card__check {
		align-self: flex-start;
		margin-top: 6px;
	}

	/* 카드 액션 버튼 - 세로 풀폭 스택 */
	.ems_card__actions {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
		gap: 10px;
		margin-top: 18px;
	}
	.ems_card__btn {
		flex: none;
		width: 100%;
		min-width: 0;
		height: 48px;
		padding: 0 12px;
		font-size: 14px;
	}

	/* 하단 CTA */
	.ems_bottom_cta_wrap {
		margin-top: 28px;
	}
	.ems_bottom_cta {
		width: 100%;
		height: 50px;
		font-size: 15px;
	}

	/* 모달 */
	.ems_modal__panel {
		width: calc(100% - 32px);
		max-width: 480px;
		padding: 24px 20px 20px;
	}
	.ems_modal__title {
		font-size: 16px;
	}
	.ems_modal__sub {
		font-size: 12px;
		margin-bottom: 18px;
	}
	.ems_modal__textarea {
		height: 160px;
		padding: 12px;
		font-size: 13px;
	}
	.ems_modal__btn {
		height: 46px;
		font-size: 14px;
	}

	/* 사진 담당자 변경 모달 - 모바일 */
	.ems_photo_modal__panel {
		width: calc(100% - 32px);
		max-width: 420px;
		padding: 24px 20px 20px;
	}
	.ems_photo_modal__list {
		max-height: 220px;
	}
	.ems_photo_modal__avatar {
		width: 40px;
		height: 40px;
	}
	.ems_photo_modal__actions .ems_modal__btn {
		min-width: 80px;
		height: 42px;
	}
}